SlideShare a Scribd company logo
1 of 8
TUGAS 6
REKAYASA WEB
Responsive Web Design
Rizki ripai_(1311511511)_KU
Pengertian Responsive web
Design
Responsive Web Design adalah sebuah
teknik yang digunakan untuk membuat
layout website menyesuaikan diri dengan
tampilan device pengunjung, baik ukuran
maupun orientasinya. Jadi tampilan yang
berada di desktop komputer dengan
tampilan yang diakses melalu SmartPhone
misalnya, itu akan berbeda tampilannya.
Pemahaman
Jadi responsive web design itu sebuah
teknik pengembangan web yang dibuat
untuk lebih dinamis dan tampilan website
bisa mengikuti ukuran layar device
Contoh responsive web design
Mobile Desktop
Contoh responsive web design
Mobile Desktop
Framework Bootstrap
Bootstrap adalah sebuah framework yang
dikembangkan pengembang Twitter pada
pertengahan tahun 2010. Sebelum menjadi
kerangka kerja open-source, Bootstrap dikenal
sebagai Twitter Blueprint. Dan terus berkembang
sampai saat ini dan Bootstrap telah menjadi salah
satu front-end framework yang paling populer dan
merupakan proyek open source di dunia.
Framework Foundation
Foundation adalah framework css yang
dikembangkan oleh ZURB pada tahun 2011. Edisi
pertama framework css Foundation adalah versi
2.0 dan hingga saat ini foundation telah
mengalami beberapa kali pengembangan hingga
muncul versi 5 nya. Dari awal pembuatanya ZURB
mengusung sebuah misi untuk membuat
framework yang lebih cepat dan lebih baik untuk
membuat tampilan sebuah website. Dan sama
seperti bootstrap, foundation pun mengusung
responsive fitur didalamnya.
Perbandingan
Bootstrap
•Waktu pembuatan yang lebih cepat
•Template yang menggunakan
Bootstrap lebih rapi
•Template yang menggunakan
Bootstrap lebih ringan.
•Responsive dan tidak responsive
Foundation
•Grid sistem yang baik
•Komponen dan fitur lebih banyak
•Baik untuk penggunaan Gambar

More Related Content

What's hot (7)

Rahmaaaa
RahmaaaaRahmaaaa
Rahmaaaa
 
Belajar Server Side Rendering Yuk! - Dimas Maulana Dwi Saputra
Belajar Server Side Rendering Yuk! - Dimas Maulana Dwi SaputraBelajar Server Side Rendering Yuk! - Dimas Maulana Dwi Saputra
Belajar Server Side Rendering Yuk! - Dimas Maulana Dwi Saputra
 
Tugas 6 rekweb
Tugas 6 rekwebTugas 6 rekweb
Tugas 6 rekweb
 
Tugas rekayasa web
Tugas rekayasa webTugas rekayasa web
Tugas rekayasa web
 
Kursus desain grafis - sedikit mengenal adobe bridge
Kursus desain grafis - sedikit mengenal adobe bridgeKursus desain grafis - sedikit mengenal adobe bridge
Kursus desain grafis - sedikit mengenal adobe bridge
 
Risma aja
Risma ajaRisma aja
Risma aja
 
Annatia ndisay
Annatia ndisayAnnatia ndisay
Annatia ndisay
 

Viewers also liked (9)

Tugas 8 rekayasa web (individu)
Tugas 8 rekayasa web (individu)Tugas 8 rekayasa web (individu)
Tugas 8 rekayasa web (individu)
 
rekayasa gen
rekayasa genrekayasa gen
rekayasa gen
 
Tugas 8
Tugas 8Tugas 8
Tugas 8
 
Tugas 10
Tugas 10Tugas 10
Tugas 10
 
Tugas 9
Tugas 9Tugas 9
Tugas 9
 
Rekayasa prakarya kelas 8
Rekayasa prakarya kelas 8Rekayasa prakarya kelas 8
Rekayasa prakarya kelas 8
 
Wirausaha produk rekayasa elektronika praktis
Wirausaha produk rekayasa elektronika praktis Wirausaha produk rekayasa elektronika praktis
Wirausaha produk rekayasa elektronika praktis
 
Prakarya rekayasa elektronika
Prakarya rekayasa elektronikaPrakarya rekayasa elektronika
Prakarya rekayasa elektronika
 
Wirausaha produk rekayasa elektronika praktis
Wirausaha produk rekayasa elektronika praktisWirausaha produk rekayasa elektronika praktis
Wirausaha produk rekayasa elektronika praktis
 

Similar to Tugas 6 rekayasa web

Similar to Tugas 6 rekayasa web (20)

tugas 6 - 0316 (individu)
tugas 6 - 0316 (individu)tugas 6 - 0316 (individu)
tugas 6 - 0316 (individu)
 
Tugas 6 rekayasa web
Tugas 6 rekayasa webTugas 6 rekayasa web
Tugas 6 rekayasa web
 
Tugas 6 ku 0316 1311511529
Tugas 6 ku 0316 1311511529Tugas 6 ku 0316 1311511529
Tugas 6 ku 0316 1311511529
 
Tugas 6 ku 0316 1311511529
Tugas 6 ku 0316 1311511529Tugas 6 ku 0316 1311511529
Tugas 6 ku 0316 1311511529
 
Sesi 2 - Pemanfaatan Framework Bootstrap.pptx
Sesi 2 - Pemanfaatan Framework Bootstrap.pptxSesi 2 - Pemanfaatan Framework Bootstrap.pptx
Sesi 2 - Pemanfaatan Framework Bootstrap.pptx
 
Tugas 6 rekweb
Tugas 6   rekwebTugas 6   rekweb
Tugas 6 rekweb
 
Tugas 6
Tugas 6Tugas 6
Tugas 6
 
Tugas 6 rekayasa web
Tugas 6 rekayasa webTugas 6 rekayasa web
Tugas 6 rekayasa web
 
Tugas6.rekweb
Tugas6.rekwebTugas6.rekweb
Tugas6.rekweb
 
Tugas 6 – rekayasa web
Tugas 6 – rekayasa webTugas 6 – rekayasa web
Tugas 6 – rekayasa web
 
Bab 1 pengantar desain web
Bab 1   pengantar desain webBab 1   pengantar desain web
Bab 1 pengantar desain web
 
Penjelasan Responsive Web Design
Penjelasan Responsive Web DesignPenjelasan Responsive Web Design
Penjelasan Responsive Web Design
 
Adi prasetya 1511510370 tugas2
Adi prasetya 1511510370 tugas2Adi prasetya 1511510370 tugas2
Adi prasetya 1511510370 tugas2
 
Isfan fs
Isfan fsIsfan fs
Isfan fs
 
Membuat Aplikasi dengan Framework Hybrid Flutter dengan Database Server Docker
Membuat Aplikasi dengan Framework Hybrid Flutter dengan Database Server DockerMembuat Aplikasi dengan Framework Hybrid Flutter dengan Database Server Docker
Membuat Aplikasi dengan Framework Hybrid Flutter dengan Database Server Docker
 
Tugas 6 rekayasa web
Tugas 6  rekayasa webTugas 6  rekayasa web
Tugas 6 rekayasa web
 
Makalah Mobile Programming
Makalah Mobile ProgrammingMakalah Mobile Programming
Makalah Mobile Programming
 
Rekayasa web
Rekayasa webRekayasa web
Rekayasa web
 
Technical Aspects of Website and Information System Development _Training "IN...
Technical Aspects of Website and Information System Development _Training "IN...Technical Aspects of Website and Information System Development _Training "IN...
Technical Aspects of Website and Information System Development _Training "IN...
 
Pengenalan Web Modern.pptx
Pengenalan Web Modern.pptxPengenalan Web Modern.pptx
Pengenalan Web Modern.pptx
 

More from rizkyripai (7)

Tugas 10 rekweb[
Tugas 10 rekweb[Tugas 10 rekweb[
Tugas 10 rekweb[
 
Tugas 9 rekweb
Tugas 9 rekwebTugas 9 rekweb
Tugas 9 rekweb
 
Tugas 8 rekayasa web
Tugas 8 rekayasa webTugas 8 rekayasa web
Tugas 8 rekayasa web
 
Tugas 5 rekayasa web
Tugas 5 rekayasa webTugas 5 rekayasa web
Tugas 5 rekayasa web
 
Tugas 4 rekayasa web
Tugas 4 rekayasa webTugas 4 rekayasa web
Tugas 4 rekayasa web
 
Tugas 3 rekayasa web
Tugas 3 rekayasa webTugas 3 rekayasa web
Tugas 3 rekayasa web
 
TUGAS REKAYASA WEB 2
TUGAS REKAYASA WEB 2TUGAS REKAYASA WEB 2
TUGAS REKAYASA WEB 2
 

Recently uploaded

BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptxBAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
JuliBriana2
 
Kenakalan Remaja (Penggunaan Narkoba).ppt
Kenakalan Remaja (Penggunaan Narkoba).pptKenakalan Remaja (Penggunaan Narkoba).ppt
Kenakalan Remaja (Penggunaan Narkoba).ppt
novibernadina
 
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
pipinafindraputri1
 
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.pptHAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
nabilafarahdiba95
 

Recently uploaded (20)

Pengenalan Figma, Figma Indtroduction, Figma
Pengenalan Figma, Figma Indtroduction, FigmaPengenalan Figma, Figma Indtroduction, Figma
Pengenalan Figma, Figma Indtroduction, Figma
 
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdfMODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
 
MODUL AJAR IPAS KELAS 6 KURIKULUM MERDEKA
MODUL AJAR IPAS KELAS 6 KURIKULUM MERDEKAMODUL AJAR IPAS KELAS 6 KURIKULUM MERDEKA
MODUL AJAR IPAS KELAS 6 KURIKULUM MERDEKA
 
Program Kerja Public Relations - Perencanaan
Program Kerja Public Relations - PerencanaanProgram Kerja Public Relations - Perencanaan
Program Kerja Public Relations - Perencanaan
 
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptxBAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
 
Materi Sosialisasi US 2024 Sekolah Dasar pptx
Materi Sosialisasi US 2024 Sekolah Dasar pptxMateri Sosialisasi US 2024 Sekolah Dasar pptx
Materi Sosialisasi US 2024 Sekolah Dasar pptx
 
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptxPendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
 
Kenakalan Remaja (Penggunaan Narkoba).ppt
Kenakalan Remaja (Penggunaan Narkoba).pptKenakalan Remaja (Penggunaan Narkoba).ppt
Kenakalan Remaja (Penggunaan Narkoba).ppt
 
Tim Yang Lolos Pendanaan Hibah Kepedulian pada Masyarakat UI 2024
Tim Yang Lolos Pendanaan Hibah Kepedulian pada Masyarakat  UI 2024Tim Yang Lolos Pendanaan Hibah Kepedulian pada Masyarakat  UI 2024
Tim Yang Lolos Pendanaan Hibah Kepedulian pada Masyarakat UI 2024
 
Aksi Nyata PMM Topik Refleksi Diri (1).pdf
Aksi Nyata PMM Topik Refleksi Diri (1).pdfAksi Nyata PMM Topik Refleksi Diri (1).pdf
Aksi Nyata PMM Topik Refleksi Diri (1).pdf
 
BAHAN PAPARAN UU DESA NOMOR 3 TAHUN 2024
BAHAN PAPARAN UU DESA NOMOR 3 TAHUN 2024BAHAN PAPARAN UU DESA NOMOR 3 TAHUN 2024
BAHAN PAPARAN UU DESA NOMOR 3 TAHUN 2024
 
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
 
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
 
TUGAS RUANG KOLABORASI 1.3 PRAKARSA PERUBAHAN
TUGAS RUANG KOLABORASI 1.3 PRAKARSA PERUBAHANTUGAS RUANG KOLABORASI 1.3 PRAKARSA PERUBAHAN
TUGAS RUANG KOLABORASI 1.3 PRAKARSA PERUBAHAN
 
PPT MODUL 6 DAN 7 PDGK4105 KELOMPOK.pptx
PPT MODUL 6 DAN 7 PDGK4105 KELOMPOK.pptxPPT MODUL 6 DAN 7 PDGK4105 KELOMPOK.pptx
PPT MODUL 6 DAN 7 PDGK4105 KELOMPOK.pptx
 
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.pptHAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
 
Aksi Nyata Disiplin Positif Keyakinan Kelas untuk SMK
Aksi Nyata Disiplin Positif Keyakinan Kelas untuk SMKAksi Nyata Disiplin Positif Keyakinan Kelas untuk SMK
Aksi Nyata Disiplin Positif Keyakinan Kelas untuk SMK
 
AKSI NYATA TOPIK 1 MERDEKA BELAJAR. PPTX
AKSI NYATA TOPIK 1 MERDEKA BELAJAR. PPTXAKSI NYATA TOPIK 1 MERDEKA BELAJAR. PPTX
AKSI NYATA TOPIK 1 MERDEKA BELAJAR. PPTX
 
Membaca dengan Metode Fonik - Membuat Rancangan Pembelajaran dengan Metode Fo...
Membaca dengan Metode Fonik - Membuat Rancangan Pembelajaran dengan Metode Fo...Membaca dengan Metode Fonik - Membuat Rancangan Pembelajaran dengan Metode Fo...
Membaca dengan Metode Fonik - Membuat Rancangan Pembelajaran dengan Metode Fo...
 
Kanvas BAGJA prakarsa perubahan Ahyar.pdf
Kanvas BAGJA prakarsa perubahan Ahyar.pdfKanvas BAGJA prakarsa perubahan Ahyar.pdf
Kanvas BAGJA prakarsa perubahan Ahyar.pdf
 

Tugas 6 rekayasa web

  • 1. TUGAS 6 REKAYASA WEB Responsive Web Design Rizki ripai_(1311511511)_KU
  • 2. Pengertian Responsive web Design Responsive Web Design adalah sebuah teknik yang digunakan untuk membuat layout website menyesuaikan diri dengan tampilan device pengunjung, baik ukuran maupun orientasinya. Jadi tampilan yang berada di desktop komputer dengan tampilan yang diakses melalu SmartPhone misalnya, itu akan berbeda tampilannya.
  • 3. Pemahaman Jadi responsive web design itu sebuah teknik pengembangan web yang dibuat untuk lebih dinamis dan tampilan website bisa mengikuti ukuran layar device
  • 4. Contoh responsive web design Mobile Desktop
  • 5. Contoh responsive web design Mobile Desktop
  • 6. Framework Bootstrap Bootstrap adalah sebuah framework yang dikembangkan pengembang Twitter pada pertengahan tahun 2010. Sebelum menjadi kerangka kerja open-source, Bootstrap dikenal sebagai Twitter Blueprint. Dan terus berkembang sampai saat ini dan Bootstrap telah menjadi salah satu front-end framework yang paling populer dan merupakan proyek open source di dunia.
  • 7. Framework Foundation Foundation adalah framework css yang dikembangkan oleh ZURB pada tahun 2011. Edisi pertama framework css Foundation adalah versi 2.0 dan hingga saat ini foundation telah mengalami beberapa kali pengembangan hingga muncul versi 5 nya. Dari awal pembuatanya ZURB mengusung sebuah misi untuk membuat framework yang lebih cepat dan lebih baik untuk membuat tampilan sebuah website. Dan sama seperti bootstrap, foundation pun mengusung responsive fitur didalamnya.
  • 8. Perbandingan Bootstrap •Waktu pembuatan yang lebih cepat •Template yang menggunakan Bootstrap lebih rapi •Template yang menggunakan Bootstrap lebih ringan. •Responsive dan tidak responsive Foundation •Grid sistem yang baik •Komponen dan fitur lebih banyak •Baik untuk penggunaan Gambar