SlideShare a Scribd company logo
1 of 9
NIM : 1311511099
NAMA : MOHAMMAD ARIEF
TUGAS 6
REKAYASA WEB
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. Responsive
Web Design Untuk mengetes tampilan yang menggunakan teknik Responsive tersebut
tidak harus mengaksesnya melalui mobile device ataupun device lainnya, namun cukup
dengan meminimize browser saja ke dalam ukuran mobile device yang diinginkan, kita
sudah dapat melihat tampilan website kita pada layar mobile device.
CONTOH WEB
http://outdoorplus.co.uk/
HTTP://SAMPEDRO.DK/EN/
CONTOH WEB
FRAMEWORK BOOSTRAP
Bootstrap merupakan framework untuk membangun desain web secara
responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan
menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop,
tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan
sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk
tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan
dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap
kita juga bisa membangun web dinamis ataupun statis.
FRAMEWORK BOOSTRAP
Bootstrap adalah Boot atau booting. Dalam perangkat keras berarti proses
mengaktifkan komputer sampai diambil alih oleh sistem operasi. Proses boot ini
dikenal dengan dua cara, yaitu warm boot dan cold boot.
Warm boot, berarti mengaktifkan kembali, tanpa harus dimatikan terlebih
dahulu, misalnya dengan menekan tombol reset, atau memencet sekaligus tombol
CTRL+ALT+DEL pada sistem operasi Disk Operating System (DOS).
Cold boot, Proses menghidupkan komputer saat komputer dalam keadaan
mati (dingin)
KELEBIHAN DAN KEKURANGAN
 Kelebihan bootstrap
1. Tidak perlu harddisk, karena dapat digantikan perannya oleh Ethernet card dan BOOT Lan Memiliki
log file sehingga dapat dilihat sewaktu-waktu penyebab error dengan melihat logfile tersebut.
2. Responsive Layout dan 12-column grid system. Dengan Responsive Layout maka aplikasi web yang
didesain dengan menggunakan Bootstrap akan langsung menyesuaikan dengan lebar dari media
perambahnya.
3. tampilan web akan tetap rapi dibuka dengan media apapun baik itu handphone, tablet, laptop ataupun
PC desktop.
 Kelemahan bootstrap
Harus dilakukan secara manual sehingga resiko menimbulkan masalah cukup besar. Pengiriman
pesan yang tidak dapat diandalkan karena menggunakan UDP. OS sekarang misalnya Windows sudah
tidak memasukkan BOOTP dalam konfigurasi jaringannya.
FRAMEWORK FOUNDATION
Foundation adalah framework untuk membuat disain web responsive
dengan cepat. mengetahui dasar HTML dan CSS akan sangat membantu
menggunakan framework ini,foundation ini cuma ready made CSS dan
javascript untuk membantu para disainer.
KELEBIHAN DAN KEKURANGAN
 Kelebihan Foundation
 Grid sistem yang baik
 Komponen dan fitur lebih banyak
 Baik untuk penggunaan Gambar
 Kekurangan Foundation
 Template yang menggunakan foundation lebih berat ketimbang yang menggunakan
bootstrap, hal ini mungkin ditimbulkan dari komponen foundation yang lebih banyak
dari bootstrap.
 Dokumentasi terbatas

More Related Content

What's hot

Tugas rekayasa web 6
Tugas rekayasa web 6Tugas rekayasa web 6
Tugas rekayasa web 6art david
 
Pembuatan Weblog dengan Wordpress
Pembuatan Weblog dengan WordpressPembuatan Weblog dengan Wordpress
Pembuatan Weblog dengan WordpressSuparno Aza
 
Tugas 6 – 0317(individu)
Tugas 6 – 0317(individu)Tugas 6 – 0317(individu)
Tugas 6 – 0317(individu)RiaWahyuni5
 
Tugas 6 individu rekayasa web 0316
Tugas 6  individu rekayasa web 0316Tugas 6  individu rekayasa web 0316
Tugas 6 individu rekayasa web 0316septianarul
 
Wordpress: More Than Just CMS
Wordpress: More Than Just CMSWordpress: More Than Just CMS
Wordpress: More Than Just CMSAban Nesta
 
Layout Dengan Layer (Div)
Layout Dengan Layer (Div)Layout Dengan Layer (Div)
Layout Dengan Layer (Div)Achmad Solichin
 
Cara memperkecil ukuran maksimum kapasitas VM Disk
Cara memperkecil ukuran maksimum kapasitas VM DiskCara memperkecil ukuran maksimum kapasitas VM Disk
Cara memperkecil ukuran maksimum kapasitas VM Diskzulmach .
 
Presentation laporan
Presentation laporanPresentation laporan
Presentation laporanRioA2
 
Blogspot & wordpress
Blogspot & wordpressBlogspot & wordpress
Blogspot & wordpressMuly Yanti
 
Printscreen notepad beserta tampilan web
Printscreen notepad beserta tampilan webPrintscreen notepad beserta tampilan web
Printscreen notepad beserta tampilan webKhadijah K. Fitri
 
Rekomendasi Plugin Membership WordPress Terbaik dan Gratis
Rekomendasi  Plugin Membership WordPress Terbaik dan Gratis Rekomendasi  Plugin Membership WordPress Terbaik dan Gratis
Rekomendasi Plugin Membership WordPress Terbaik dan Gratis Muhamad Edison A
 
Introduction to Trusted Web Activities-Nasrul Gunawan (Software Engineer-Nutr...
Introduction to Trusted Web Activities-Nasrul Gunawan (Software Engineer-Nutr...Introduction to Trusted Web Activities-Nasrul Gunawan (Software Engineer-Nutr...
Introduction to Trusted Web Activities-Nasrul Gunawan (Software Engineer-Nutr...DicodingEvent
 

What's hot (19)

Tugas rekayasa web 6
Tugas rekayasa web 6Tugas rekayasa web 6
Tugas rekayasa web 6
 
Pembuatan Weblog dengan Wordpress
Pembuatan Weblog dengan WordpressPembuatan Weblog dengan Wordpress
Pembuatan Weblog dengan Wordpress
 
Tugas 6 – 0317(individu)
Tugas 6 – 0317(individu)Tugas 6 – 0317(individu)
Tugas 6 – 0317(individu)
 
Tugas 6 individu rekayasa web 0316
Tugas 6  individu rekayasa web 0316Tugas 6  individu rekayasa web 0316
Tugas 6 individu rekayasa web 0316
 
Tugas rekayasa web
Tugas rekayasa webTugas rekayasa web
Tugas rekayasa web
 
Wordpress: More Than Just CMS
Wordpress: More Than Just CMSWordpress: More Than Just CMS
Wordpress: More Than Just CMS
 
Annatia ndisay
Annatia ndisayAnnatia ndisay
Annatia ndisay
 
Layout Dengan Layer (Div)
Layout Dengan Layer (Div)Layout Dengan Layer (Div)
Layout Dengan Layer (Div)
 
Tugas 6
Tugas 6Tugas 6
Tugas 6
 
Cara memperkecil ukuran maksimum kapasitas VM Disk
Cara memperkecil ukuran maksimum kapasitas VM DiskCara memperkecil ukuran maksimum kapasitas VM Disk
Cara memperkecil ukuran maksimum kapasitas VM Disk
 
Presentation laporan
Presentation laporanPresentation laporan
Presentation laporan
 
Blogspot & wordpress
Blogspot & wordpressBlogspot & wordpress
Blogspot & wordpress
 
Fit 06 aban
Fit 06 abanFit 06 aban
Fit 06 aban
 
Printscreen notepad beserta tampilan web
Printscreen notepad beserta tampilan webPrintscreen notepad beserta tampilan web
Printscreen notepad beserta tampilan web
 
Tugas 6
Tugas 6Tugas 6
Tugas 6
 
Tugas 6 rekweb
Tugas 6 rekwebTugas 6 rekweb
Tugas 6 rekweb
 
Tutorial 360
Tutorial 360Tutorial 360
Tutorial 360
 
Rekomendasi Plugin Membership WordPress Terbaik dan Gratis
Rekomendasi  Plugin Membership WordPress Terbaik dan Gratis Rekomendasi  Plugin Membership WordPress Terbaik dan Gratis
Rekomendasi Plugin Membership WordPress Terbaik dan Gratis
 
Introduction to Trusted Web Activities-Nasrul Gunawan (Software Engineer-Nutr...
Introduction to Trusted Web Activities-Nasrul Gunawan (Software Engineer-Nutr...Introduction to Trusted Web Activities-Nasrul Gunawan (Software Engineer-Nutr...
Introduction to Trusted Web Activities-Nasrul Gunawan (Software Engineer-Nutr...
 

Viewers also liked

Presentación 4g
Presentación 4gPresentación 4g
Presentación 4gmnb45ail
 
айнура алеева+качественный мед+предприниматели
айнура алеева+качественный мед+предпринимателиайнура алеева+качественный мед+предприниматели
айнура алеева+качественный мед+предпринимателиАйнура Алеева
 
Maravillas
MaravillasMaravillas
Maravillasmnb45ail
 
Planificacion de proyectos
Planificacion de proyectosPlanificacion de proyectos
Planificacion de proyectosAirton carrasco
 
Производство шампуня для роста волос
Производство шампуня для роста волосПроизводство шампуня для роста волос
Производство шампуня для роста волосАйнура Алеева
 
Get out! How to get kids active outdoors
Get out! How to get kids active outdoorsGet out! How to get kids active outdoors
Get out! How to get kids active outdoorsDavid Ariagno
 

Viewers also liked (15)

Shekhar.cv
Shekhar.cvShekhar.cv
Shekhar.cv
 
Портал свадебных услуг
Портал свадебных услугПортал свадебных услуг
Портал свадебных услуг
 
фруктовая мука
фруктовая мукафруктовая мука
фруктовая мука
 
Tugas 2 rekayasa web
Tugas 2   rekayasa webTugas 2   rekayasa web
Tugas 2 rekayasa web
 
Presentación 4g
Presentación 4gPresentación 4g
Presentación 4g
 
Manual desmontar tu ordenador
Manual desmontar tu ordenadorManual desmontar tu ordenador
Manual desmontar tu ordenador
 
Фитнес-клуб
Фитнес-клубФитнес-клуб
Фитнес-клуб
 
айнура алеева+качественный мед+предприниматели
айнура алеева+качественный мед+предпринимателиайнура алеева+качественный мед+предприниматели
айнура алеева+качественный мед+предприниматели
 
ресторан без персоналов
ресторан без персоналовресторан без персоналов
ресторан без персоналов
 
Maravillas
MaravillasMaravillas
Maravillas
 
ресторан без персоналов
ресторан без персоналовресторан без персоналов
ресторан без персоналов
 
Planificacion de proyectos
Planificacion de proyectosPlanificacion de proyectos
Planificacion de proyectos
 
Производство шампуня для роста волос
Производство шампуня для роста волосПроизводство шампуня для роста волос
Производство шампуня для роста волос
 
Get out! How to get kids active outdoors
Get out! How to get kids active outdoorsGet out! How to get kids active outdoors
Get out! How to get kids active outdoors
 
Power point ticc
Power point ticcPower point ticc
Power point ticc
 

Similar to RWD

Tugas individu pertemuan 06 (19042016)
Tugas individu pertemuan 06 (19042016)Tugas individu pertemuan 06 (19042016)
Tugas individu pertemuan 06 (19042016)Novia Indahsari
 
tugas 6 - 0316 (individu)
tugas 6 - 0316 (individu)tugas 6 - 0316 (individu)
tugas 6 - 0316 (individu)arif_rachman740
 
Tugas 6 rekayasa web
Tugas 6 rekayasa webTugas 6 rekayasa web
Tugas 6 rekayasa webrizkyripai
 
Penjelasan Responsive Web Design
Penjelasan Responsive Web DesignPenjelasan Responsive Web Design
Penjelasan Responsive Web DesignSamsul Arifin
 
Evaluasi Windows 8 dari Sisi HCI
Evaluasi Windows 8 dari Sisi HCIEvaluasi Windows 8 dari Sisi HCI
Evaluasi Windows 8 dari Sisi HCIRumah Studio
 
Adi prasetya 1511510370 tugas2
Adi prasetya 1511510370 tugas2Adi prasetya 1511510370 tugas2
Adi prasetya 1511510370 tugas2prasetyaadi19
 
Laporan praktikum modul 5
Laporan praktikum modul 5 Laporan praktikum modul 5
Laporan praktikum modul 5 Hardini_HD
 
MAKALAH VISUAL STUDIO 2010.docx
MAKALAH VISUAL STUDIO 2010.docxMAKALAH VISUAL STUDIO 2010.docx
MAKALAH VISUAL STUDIO 2010.docxhakimJabbar
 
Kelebihan dan kelemahan browser
Kelebihan dan kelemahan browserKelebihan dan kelemahan browser
Kelebihan dan kelemahan browserYulian Gibran
 
Tren cloud-computing
Tren cloud-computingTren cloud-computing
Tren cloud-computingutak-atik
 
0BB0D0C3-007B-4CFD-BA81-9F3EE1929BDC.pptx
0BB0D0C3-007B-4CFD-BA81-9F3EE1929BDC.pptx0BB0D0C3-007B-4CFD-BA81-9F3EE1929BDC.pptx
0BB0D0C3-007B-4CFD-BA81-9F3EE1929BDC.pptxShofiyyurRohman1
 

Similar to RWD (20)

Tugas individu pertemuan 06 (19042016)
Tugas individu pertemuan 06 (19042016)Tugas individu pertemuan 06 (19042016)
Tugas individu pertemuan 06 (19042016)
 
bootstrap.pptx
bootstrap.pptxbootstrap.pptx
bootstrap.pptx
 
Tugas 6 – rekayasa web
Tugas 6 – rekayasa webTugas 6 – rekayasa web
Tugas 6 – rekayasa web
 
Tugas 6 rekayasa web
Tugas 6 rekayasa webTugas 6 rekayasa web
Tugas 6 rekayasa web
 
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
 
Penjelasan Responsive Web Design
Penjelasan Responsive Web DesignPenjelasan Responsive Web Design
Penjelasan Responsive Web Design
 
Evaluasi Windows 8 dari Sisi HCI
Evaluasi Windows 8 dari Sisi HCIEvaluasi Windows 8 dari Sisi HCI
Evaluasi Windows 8 dari Sisi HCI
 
Adi prasetya 1511510370 tugas2
Adi prasetya 1511510370 tugas2Adi prasetya 1511510370 tugas2
Adi prasetya 1511510370 tugas2
 
Laporan praktikum modul 5
Laporan praktikum modul 5 Laporan praktikum modul 5
Laporan praktikum modul 5
 
Tugas6.rekweb
Tugas6.rekwebTugas6.rekweb
Tugas6.rekweb
 
MAKALAH VISUAL STUDIO 2010.docx
MAKALAH VISUAL STUDIO 2010.docxMAKALAH VISUAL STUDIO 2010.docx
MAKALAH VISUAL STUDIO 2010.docx
 
Isfan fs
Isfan fsIsfan fs
Isfan fs
 
Rekayasa web
Rekayasa webRekayasa web
Rekayasa web
 
Kelebihan dan kelemahan browser
Kelebihan dan kelemahan browserKelebihan dan kelemahan browser
Kelebihan dan kelemahan browser
 
Tren cloud-computing
Tren cloud-computingTren cloud-computing
Tren cloud-computing
 
Kodular.pptx
Kodular.pptxKodular.pptx
Kodular.pptx
 
Tugas 6 rekweb
Tugas 6   rekwebTugas 6   rekweb
Tugas 6 rekweb
 
Jenis Software Database
Jenis Software DatabaseJenis Software Database
Jenis Software Database
 
0BB0D0C3-007B-4CFD-BA81-9F3EE1929BDC.pptx
0BB0D0C3-007B-4CFD-BA81-9F3EE1929BDC.pptx0BB0D0C3-007B-4CFD-BA81-9F3EE1929BDC.pptx
0BB0D0C3-007B-4CFD-BA81-9F3EE1929BDC.pptx
 

More from Mohammad Arief

More from Mohammad Arief (7)

Tugas 10 - rekayasa web
Tugas 10  -  rekayasa webTugas 10  -  rekayasa web
Tugas 10 - rekayasa web
 
Tugas 8 rekayasa web
Tugas 8   rekayasa webTugas 8   rekayasa web
Tugas 8 rekayasa web
 
Tugas 7 rekayasa web
Tugas 7   rekayasa webTugas 7   rekayasa web
Tugas 7 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 1- REKAYASA WEB
TUGAS 1- REKAYASA WEBTUGAS 1- REKAYASA WEB
TUGAS 1- REKAYASA WEB
 

Recently uploaded

AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptx
AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptxAKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptx
AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptxWirionSembiring2
 
Lembar Observasi Pembelajaran di Kelas.docx
Lembar Observasi Pembelajaran di  Kelas.docxLembar Observasi Pembelajaran di  Kelas.docx
Lembar Observasi Pembelajaran di Kelas.docxbkandrisaputra
 
Materi Pertemuan 6 Materi Pertemuan 6.pptx
Materi Pertemuan 6 Materi Pertemuan 6.pptxMateri Pertemuan 6 Materi Pertemuan 6.pptx
Materi Pertemuan 6 Materi Pertemuan 6.pptxRezaWahyuni6
 
adap penggunaan media sosial dalam kehidupan sehari-hari.pptx
adap penggunaan media sosial dalam kehidupan sehari-hari.pptxadap penggunaan media sosial dalam kehidupan sehari-hari.pptx
adap penggunaan media sosial dalam kehidupan sehari-hari.pptxmtsmampunbarub4
 
Kelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdfKelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdftsaniasalftn18
 
tugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SDtugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SDmawan5982
 
Ppt tentang perkembangan Moral Pada Anak
Ppt tentang perkembangan Moral Pada AnakPpt tentang perkembangan Moral Pada Anak
Ppt tentang perkembangan Moral Pada Anakbekamalayniasinta
 
Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)3HerisaSintia
 
04-Gemelli.- kehamilan ganda- duo atau triplet
04-Gemelli.- kehamilan ganda- duo atau triplet04-Gemelli.- kehamilan ganda- duo atau triplet
04-Gemelli.- kehamilan ganda- duo atau tripletMelianaJayasaputra
 
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdfTUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdfElaAditya
 
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptxKONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptxawaldarmawan3
 
Panduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptx
Panduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptxPanduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptx
Panduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptxsudianaade137
 
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docx
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docxtugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docx
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docxmawan5982
 
Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5KIKI TRISNA MUKTI
 
Modul 1.2.a.8 Koneksi antar materi 1.2.pdf
Modul 1.2.a.8 Koneksi antar materi 1.2.pdfModul 1.2.a.8 Koneksi antar materi 1.2.pdf
Modul 1.2.a.8 Koneksi antar materi 1.2.pdfSitiJulaeha820399
 
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdfShintaNovianti1
 
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docx
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docxTugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docx
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docxmawan5982
 
DESAIN MEDIA PEMBELAJARAN BAHASA INDONESIA BERBASIS DIGITAL.pptx
DESAIN MEDIA PEMBELAJARAN BAHASA INDONESIA BERBASIS DIGITAL.pptxDESAIN MEDIA PEMBELAJARAN BAHASA INDONESIA BERBASIS DIGITAL.pptx
DESAIN MEDIA PEMBELAJARAN BAHASA INDONESIA BERBASIS DIGITAL.pptxFuzaAnggriana
 
Aksi Nyata Modul 1.1 Calon Guru Penggerak
Aksi Nyata Modul 1.1 Calon Guru PenggerakAksi Nyata Modul 1.1 Calon Guru Penggerak
Aksi Nyata Modul 1.1 Calon Guru Penggeraksupriadi611
 
Materi Bimbingan Manasik Haji Tarwiyah.pptx
Materi Bimbingan Manasik Haji Tarwiyah.pptxMateri Bimbingan Manasik Haji Tarwiyah.pptx
Materi Bimbingan Manasik Haji Tarwiyah.pptxc9fhbm7gzj
 

Recently uploaded (20)

AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptx
AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptxAKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptx
AKSI NYATA MODUL 1.2-1 untuk pendidikan guru penggerak.pptx
 
Lembar Observasi Pembelajaran di Kelas.docx
Lembar Observasi Pembelajaran di  Kelas.docxLembar Observasi Pembelajaran di  Kelas.docx
Lembar Observasi Pembelajaran di Kelas.docx
 
Materi Pertemuan 6 Materi Pertemuan 6.pptx
Materi Pertemuan 6 Materi Pertemuan 6.pptxMateri Pertemuan 6 Materi Pertemuan 6.pptx
Materi Pertemuan 6 Materi Pertemuan 6.pptx
 
adap penggunaan media sosial dalam kehidupan sehari-hari.pptx
adap penggunaan media sosial dalam kehidupan sehari-hari.pptxadap penggunaan media sosial dalam kehidupan sehari-hari.pptx
adap penggunaan media sosial dalam kehidupan sehari-hari.pptx
 
Kelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdfKelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdf
 
tugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SDtugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SD
 
Ppt tentang perkembangan Moral Pada Anak
Ppt tentang perkembangan Moral Pada AnakPpt tentang perkembangan Moral Pada Anak
Ppt tentang perkembangan Moral Pada Anak
 
Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)
 
04-Gemelli.- kehamilan ganda- duo atau triplet
04-Gemelli.- kehamilan ganda- duo atau triplet04-Gemelli.- kehamilan ganda- duo atau triplet
04-Gemelli.- kehamilan ganda- duo atau triplet
 
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdfTUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
 
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptxKONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
 
Panduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptx
Panduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptxPanduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptx
Panduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptx
 
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docx
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docxtugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docx
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docx
 
Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5
 
Modul 1.2.a.8 Koneksi antar materi 1.2.pdf
Modul 1.2.a.8 Koneksi antar materi 1.2.pdfModul 1.2.a.8 Koneksi antar materi 1.2.pdf
Modul 1.2.a.8 Koneksi antar materi 1.2.pdf
 
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf
 
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docx
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docxTugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docx
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docx
 
DESAIN MEDIA PEMBELAJARAN BAHASA INDONESIA BERBASIS DIGITAL.pptx
DESAIN MEDIA PEMBELAJARAN BAHASA INDONESIA BERBASIS DIGITAL.pptxDESAIN MEDIA PEMBELAJARAN BAHASA INDONESIA BERBASIS DIGITAL.pptx
DESAIN MEDIA PEMBELAJARAN BAHASA INDONESIA BERBASIS DIGITAL.pptx
 
Aksi Nyata Modul 1.1 Calon Guru Penggerak
Aksi Nyata Modul 1.1 Calon Guru PenggerakAksi Nyata Modul 1.1 Calon Guru Penggerak
Aksi Nyata Modul 1.1 Calon Guru Penggerak
 
Materi Bimbingan Manasik Haji Tarwiyah.pptx
Materi Bimbingan Manasik Haji Tarwiyah.pptxMateri Bimbingan Manasik Haji Tarwiyah.pptx
Materi Bimbingan Manasik Haji Tarwiyah.pptx
 

RWD

  • 1. NIM : 1311511099 NAMA : MOHAMMAD ARIEF TUGAS 6 REKAYASA WEB
  • 2. 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. Responsive Web Design Untuk mengetes tampilan yang menggunakan teknik Responsive tersebut tidak harus mengaksesnya melalui mobile device ataupun device lainnya, namun cukup dengan meminimize browser saja ke dalam ukuran mobile device yang diinginkan, kita sudah dapat melihat tampilan website kita pada layar mobile device.
  • 5. FRAMEWORK BOOSTRAP Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.
  • 6. FRAMEWORK BOOSTRAP Bootstrap adalah Boot atau booting. Dalam perangkat keras berarti proses mengaktifkan komputer sampai diambil alih oleh sistem operasi. Proses boot ini dikenal dengan dua cara, yaitu warm boot dan cold boot. Warm boot, berarti mengaktifkan kembali, tanpa harus dimatikan terlebih dahulu, misalnya dengan menekan tombol reset, atau memencet sekaligus tombol CTRL+ALT+DEL pada sistem operasi Disk Operating System (DOS). Cold boot, Proses menghidupkan komputer saat komputer dalam keadaan mati (dingin)
  • 7. KELEBIHAN DAN KEKURANGAN  Kelebihan bootstrap 1. Tidak perlu harddisk, karena dapat digantikan perannya oleh Ethernet card dan BOOT Lan Memiliki log file sehingga dapat dilihat sewaktu-waktu penyebab error dengan melihat logfile tersebut. 2. Responsive Layout dan 12-column grid system. Dengan Responsive Layout maka aplikasi web yang didesain dengan menggunakan Bootstrap akan langsung menyesuaikan dengan lebar dari media perambahnya. 3. tampilan web akan tetap rapi dibuka dengan media apapun baik itu handphone, tablet, laptop ataupun PC desktop.  Kelemahan bootstrap Harus dilakukan secara manual sehingga resiko menimbulkan masalah cukup besar. Pengiriman pesan yang tidak dapat diandalkan karena menggunakan UDP. OS sekarang misalnya Windows sudah tidak memasukkan BOOTP dalam konfigurasi jaringannya.
  • 8. FRAMEWORK FOUNDATION Foundation adalah framework untuk membuat disain web responsive dengan cepat. mengetahui dasar HTML dan CSS akan sangat membantu menggunakan framework ini,foundation ini cuma ready made CSS dan javascript untuk membantu para disainer.
  • 9. KELEBIHAN DAN KEKURANGAN  Kelebihan Foundation  Grid sistem yang baik  Komponen dan fitur lebih banyak  Baik untuk penggunaan Gambar  Kekurangan Foundation  Template yang menggunakan foundation lebih berat ketimbang yang menggunakan bootstrap, hal ini mungkin ditimbulkan dari komponen foundation yang lebih banyak dari bootstrap.  Dokumentasi terbatas