SlideShare a Scribd company logo
1 of 10
TUGAS 6-KU-0316(INDIVIDU)
REKAYASA WEB
NAMA : HIDAYATUL ICHWAN
NIM : 1311511529
UNIVERSITAS BUDILUHUR
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 dengan karakter
Responsive Web Design.
Perbandingan framework yang telah
mengimplementasikan Responsive Web
Design
• Bootstrap
• Foundation
• Semantic-UI
• Less Framework 4
• MQFramework
• Golden Grid System
• Amazium
• Namun ada dua framework yang paling ternama saat ini,
yang paling banyak pengguna nya, yaitu Twitter
Bootstrap dan Foundation.
• Framework adalah kumpulan tools atau library untuk
membuat website dan aplikasi mobile. Paket Framework
termasuk file dan folder dari kode standar (HTML, CSS,
JS, dll) sebagai dasar untuk memulai membangun
sebuah situs website.
• Secara sepintas kita bisa melihat bootstrap sedikit
unggul dibanding foundation, misal nya bootstrap
tersedia dalam bentuk less dan sass, sedangkan
foundation hanya sass, dari segi komunitas juga
bootstrap lebih besar dibanding foundation.
• Bootstrap
• Bootstrap bisa dibilang cukup populer dikalangan
desainer web atau mobile karena kemudahan dalam
menggunakannya dan memiliki hasil yang menarik.
Front-end framework yang dibuat oleh Twitter ini adalah
framework yang dapat digunakan untuk membangun
website dinamis dengan menggunakan bahasa script
CSS.
• Dengan Bootstrap, para desainer bisa membuat
tampilan website yang responsif. Selain itu, para
desainer tidak perlu membuat CSS sendiri agar tampilan
web menarik karena kita hanya perlu memanggil class
yang tersedia di Bootstrap.
• Foundation
Framework bertenaga ini dapat digunakan oleh para
desainer web untuk membuat template pada website
yang modern. Fitur yang dimiliki Foundation ini sangat
kaya seperti yang dimiliki Bootstrap. Framework yang
satu ini biasanya digunakan para desainer web untuk
membuat template premium yang ada di market themes
seperti ThemeForest.
• Semantic-UI
Semantic-UI ini disebut-sebut sebagai pesaing ketat dari
Bootstrap karena framework yang satu ini memberikan
desain web yang sangat modern. Pada pembaruan
terbarunya Semantic-UI sudah terintegrasi dengan
Angular, Ember, dan Meteor sehingga sangat cocok
untuk digunakan pada proyek yang besar dan kompleks.
• Foundation
Framework bertenaga ini dapat digunakan oleh para
desainer web untuk membuat template pada website
yang modern. Fitur yang dimiliki Foundation ini sangat
kaya seperti yang dimiliki Bootstrap. Framework yang
satu ini biasanya digunakan para desainer web untuk
membuat template premium yang ada di market themes
seperti ThemeForest.
• Semantic-UI
Semantic-UI ini disebut-sebut sebagai pesaing ketat dari
Bootstrap karena framework yang satu ini memberikan
desain web yang sangat modern. Pada pembaruan
terbarunya Semantic-UI sudah terintegrasi dengan
Angular, Ember, dan Meteor sehingga sangat cocok
untuk digunakan pada proyek yang besar dan kompleks.

More Related Content

What's hot

Tugas individu pertemuan 06 (19042016)
Tugas individu pertemuan 06 (19042016)Tugas individu pertemuan 06 (19042016)
Tugas individu pertemuan 06 (19042016)Novia Indahsari
 
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 SaputraDicodingEvent
 
Mendandani Blog dengan Widget
Mendandani Blog dengan WidgetMendandani Blog dengan Widget
Mendandani Blog dengan WidgetYulef Dian
 
Framework 1411510744 azhar krisna pratama
Framework 1411510744 azhar krisna pratamaFramework 1411510744 azhar krisna pratama
Framework 1411510744 azhar krisna pratamaAzhar Krisna
 
Tutorial WordPress: Kenapa Memilih WordPress?
Tutorial WordPress: Kenapa Memilih WordPress?Tutorial WordPress: Kenapa Memilih WordPress?
Tutorial WordPress: Kenapa Memilih WordPress?Medidu
 

What's hot (9)

Tugas individu pertemuan 06 (19042016)
Tugas individu pertemuan 06 (19042016)Tugas individu pertemuan 06 (19042016)
Tugas individu pertemuan 06 (19042016)
 
Tugas rekayasa web
Tugas rekayasa webTugas rekayasa web
Tugas rekayasa web
 
e-bussinies
e-bussiniese-bussinies
e-bussinies
 
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
 
05 rw
05 rw05 rw
05 rw
 
Mendandani Blog dengan Widget
Mendandani Blog dengan WidgetMendandani Blog dengan Widget
Mendandani Blog dengan Widget
 
Framework 1411510744 azhar krisna pratama
Framework 1411510744 azhar krisna pratamaFramework 1411510744 azhar krisna pratama
Framework 1411510744 azhar krisna pratama
 
Tutorial WordPress: Kenapa Memilih WordPress?
Tutorial WordPress: Kenapa Memilih WordPress?Tutorial WordPress: Kenapa Memilih WordPress?
Tutorial WordPress: Kenapa Memilih WordPress?
 
Cms
CmsCms
Cms
 

Viewers also liked

Tugas 6 rekayasa web
Tugas 6 rekayasa webTugas 6 rekayasa web
Tugas 6 rekayasa webrizkyripai
 
Tugas 6 ku 0316 1311511529
Tugas 6 ku 0316 1311511529Tugas 6 ku 0316 1311511529
Tugas 6 ku 0316 1311511529Iich-oNe Hidayat
 
Tugas 1 Rekayasa Web 0316
Tugas 1 Rekayasa Web 0316Tugas 1 Rekayasa Web 0316
Tugas 1 Rekayasa Web 0316sapatati
 
Tugas 6 Rekayasa Web 0316
Tugas 6 Rekayasa Web 0316Tugas 6 Rekayasa Web 0316
Tugas 6 Rekayasa Web 0316sapatati
 
Fgv 2012-oab-exame-de-ordem-unificado-viii-segunda-fase-direito-civil-prova
Fgv 2012-oab-exame-de-ordem-unificado-viii-segunda-fase-direito-civil-provaFgv 2012-oab-exame-de-ordem-unificado-viii-segunda-fase-direito-civil-prova
Fgv 2012-oab-exame-de-ordem-unificado-viii-segunda-fase-direito-civil-provaPatricia Silva
 
10 tips incentive-infographic
10 tips incentive-infographic10 tips incentive-infographic
10 tips incentive-infographicIncentive Inc
 
Έλληνες μετανάστες στο νέο κόσμο,Γ.Παναγιωτόπουλος
Έλληνες μετανάστες στο νέο κόσμο,Γ.ΠαναγιωτόπουλοςΈλληνες μετανάστες στο νέο κόσμο,Γ.Παναγιωτόπουλος
Έλληνες μετανάστες στο νέο κόσμο,Γ.ΠαναγιωτόπουλοςIliana Kouvatsou
 
Oeuvres de napoléon bonaparte iii-v clan9 empire dragon hussard armée imper...
  Oeuvres de napoléon bonaparte iii-v clan9 empire dragon hussard armée imper...  Oeuvres de napoléon bonaparte iii-v clan9 empire dragon hussard armée imper...
Oeuvres de napoléon bonaparte iii-v clan9 empire dragon hussard armée imper...freemens
 
Alain de benoist les idees a l'endroit (clan9 europe nouvelle droite national...
Alain de benoist les idees a l'endroit (clan9 europe nouvelle droite national...Alain de benoist les idees a l'endroit (clan9 europe nouvelle droite national...
Alain de benoist les idees a l'endroit (clan9 europe nouvelle droite national...freemens
 
Aristote la protreptique -- clan9
Aristote   la protreptique -- clan9Aristote   la protreptique -- clan9
Aristote la protreptique -- clan9freemens
 
Aristote. traité de l'âme - clan9
Aristote. traité de l'âme   - clan9Aristote. traité de l'âme   - clan9
Aristote. traité de l'âme - clan9freemens
 
Debbiemistikaweni 1412510982 tugas5
Debbiemistikaweni 1412510982 tugas5Debbiemistikaweni 1412510982 tugas5
Debbiemistikaweni 1412510982 tugas5debbie95
 
Tugas 4 Rekayasa Web 0316
Tugas 4 Rekayasa Web 0316Tugas 4 Rekayasa Web 0316
Tugas 4 Rekayasa Web 0316sapatati
 
Tugas 5 rekayasa web
Tugas 5   rekayasa webTugas 5   rekayasa web
Tugas 5 rekayasa webfaisalawai
 

Viewers also liked (20)

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 1 Rekayasa Web 0316
Tugas 1 Rekayasa Web 0316Tugas 1 Rekayasa Web 0316
Tugas 1 Rekayasa Web 0316
 
Tugas 6 – rekayasa web
Tugas 6 – rekayasa webTugas 6 – rekayasa web
Tugas 6 – rekayasa web
 
Tugas 6 Rekayasa Web 0316
Tugas 6 Rekayasa Web 0316Tugas 6 Rekayasa Web 0316
Tugas 6 Rekayasa Web 0316
 
Tugas 5 ku– 0316
Tugas 5   ku– 0316Tugas 5   ku– 0316
Tugas 5 ku– 0316
 
Fgv 2012-oab-exame-de-ordem-unificado-viii-segunda-fase-direito-civil-prova
Fgv 2012-oab-exame-de-ordem-unificado-viii-segunda-fase-direito-civil-provaFgv 2012-oab-exame-de-ordem-unificado-viii-segunda-fase-direito-civil-prova
Fgv 2012-oab-exame-de-ordem-unificado-viii-segunda-fase-direito-civil-prova
 
10 tips incentive-infographic
10 tips incentive-infographic10 tips incentive-infographic
10 tips incentive-infographic
 
Έλληνες μετανάστες στο νέο κόσμο,Γ.Παναγιωτόπουλος
Έλληνες μετανάστες στο νέο κόσμο,Γ.ΠαναγιωτόπουλοςΈλληνες μετανάστες στο νέο κόσμο,Γ.Παναγιωτόπουλος
Έλληνες μετανάστες στο νέο κόσμο,Γ.Παναγιωτόπουλος
 
Tugas 2 rekayasa web
Tugas 2   rekayasa webTugas 2   rekayasa web
Tugas 2 rekayasa web
 
Oeuvres de napoléon bonaparte iii-v clan9 empire dragon hussard armée imper...
  Oeuvres de napoléon bonaparte iii-v clan9 empire dragon hussard armée imper...  Oeuvres de napoléon bonaparte iii-v clan9 empire dragon hussard armée imper...
Oeuvres de napoléon bonaparte iii-v clan9 empire dragon hussard armée imper...
 
Tugas 4 ku– 0316
Tugas 4   ku– 0316Tugas 4   ku– 0316
Tugas 4 ku– 0316
 
Alain de benoist les idees a l'endroit (clan9 europe nouvelle droite national...
Alain de benoist les idees a l'endroit (clan9 europe nouvelle droite national...Alain de benoist les idees a l'endroit (clan9 europe nouvelle droite national...
Alain de benoist les idees a l'endroit (clan9 europe nouvelle droite national...
 
Aristote la protreptique -- clan9
Aristote   la protreptique -- clan9Aristote   la protreptique -- clan9
Aristote la protreptique -- clan9
 
Aristote. traité de l'âme - clan9
Aristote. traité de l'âme   - clan9Aristote. traité de l'âme   - clan9
Aristote. traité de l'âme - clan9
 
Debbiemistikaweni 1412510982 tugas5
Debbiemistikaweni 1412510982 tugas5Debbiemistikaweni 1412510982 tugas5
Debbiemistikaweni 1412510982 tugas5
 
Tugas 4 rekayasa web
Tugas 4 rekayasa webTugas 4 rekayasa web
Tugas 4 rekayasa web
 
Tugas 4 Rekayasa Web 0316
Tugas 4 Rekayasa Web 0316Tugas 4 Rekayasa Web 0316
Tugas 4 Rekayasa Web 0316
 
Tugas 5 rekayasa web
Tugas 5   rekayasa webTugas 5   rekayasa web
Tugas 5 rekayasa web
 
333
333333
333
 

Similar to RWD-Framework-Pilihan

Tugas 6 rekayasa web 1312510231 rostarina
Tugas 6 rekayasa web 1312510231 rostarinaTugas 6 rekayasa web 1312510231 rostarina
Tugas 6 rekayasa web 1312510231 rostarinaosta92
 
Tugas rekayasa web 6
Tugas rekayasa web 6Tugas rekayasa web 6
Tugas rekayasa web 6art david
 
Bab 1 pengantar desain web
Bab 1   pengantar desain webBab 1   pengantar desain web
Bab 1 pengantar desain webYUSRA FERNANDO
 
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...Kanaidi ken
 
Sesi 2 - Pemanfaatan Framework Bootstrap.pptx
Sesi 2 - Pemanfaatan Framework Bootstrap.pptxSesi 2 - Pemanfaatan Framework Bootstrap.pptx
Sesi 2 - Pemanfaatan Framework Bootstrap.pptxivanwahyur79
 
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptxDeniHidayat46
 
Pengenalan dreamweaver
Pengenalan dreamweaverPengenalan dreamweaver
Pengenalan dreamweaverimanprasetyo
 
Materi 10-rekayasa-web-tahapan-proyek
Materi 10-rekayasa-web-tahapan-proyekMateri 10-rekayasa-web-tahapan-proyek
Materi 10-rekayasa-web-tahapan-proyekYan Bali
 
Pertemuan 3 Modelling Web Aplication.pptx
Pertemuan 3 Modelling Web Aplication.pptxPertemuan 3 Modelling Web Aplication.pptx
Pertemuan 3 Modelling Web Aplication.pptxfauzandika
 
THE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL B
THE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL BTHE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL B
THE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL BSyahraniAdrianty
 
#10 CSS Framework.pdf
#10 CSS Framework.pdf#10 CSS Framework.pdf
#10 CSS Framework.pdfItishomupgris
 
Tugas 3 0317 (individu)
Tugas 3  0317 (individu)Tugas 3  0317 (individu)
Tugas 3 0317 (individu)RiaWahyuni5
 

Similar to RWD-Framework-Pilihan (20)

Tugas6.rekweb
Tugas6.rekwebTugas6.rekweb
Tugas6.rekweb
 
Tugas 6 rekayasa web 1312510231 rostarina
Tugas 6 rekayasa web 1312510231 rostarinaTugas 6 rekayasa web 1312510231 rostarina
Tugas 6 rekayasa web 1312510231 rostarina
 
Tugas rekayasa web 6
Tugas rekayasa web 6Tugas rekayasa web 6
Tugas rekayasa web 6
 
Tugas 6 rekweb 0316
Tugas 6 rekweb 0316Tugas 6 rekweb 0316
Tugas 6 rekweb 0316
 
Bab 1 pengantar desain web
Bab 1   pengantar desain webBab 1   pengantar desain web
Bab 1 pengantar desain 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...
 
Sesi 2 - Pemanfaatan Framework Bootstrap.pptx
Sesi 2 - Pemanfaatan Framework Bootstrap.pptxSesi 2 - Pemanfaatan Framework Bootstrap.pptx
Sesi 2 - Pemanfaatan Framework Bootstrap.pptx
 
Rekayasa web
Rekayasa webRekayasa web
Rekayasa web
 
Kelompok 3.pptx
Kelompok 3.pptxKelompok 3.pptx
Kelompok 3.pptx
 
Tugas 6 – rekayasa web
Tugas 6 – rekayasa webTugas 6 – rekayasa web
Tugas 6 – rekayasa web
 
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
 
Frame work php
Frame work phpFrame work php
Frame work php
 
Pengenalan dreamweaver
Pengenalan dreamweaverPengenalan dreamweaver
Pengenalan dreamweaver
 
Tugas 6 rekayasa web
Tugas 6 rekayasa webTugas 6 rekayasa web
Tugas 6 rekayasa web
 
Tugas 6 rekweb
Tugas 6 rekwebTugas 6 rekweb
Tugas 6 rekweb
 
Materi 10-rekayasa-web-tahapan-proyek
Materi 10-rekayasa-web-tahapan-proyekMateri 10-rekayasa-web-tahapan-proyek
Materi 10-rekayasa-web-tahapan-proyek
 
Pertemuan 3 Modelling Web Aplication.pptx
Pertemuan 3 Modelling Web Aplication.pptxPertemuan 3 Modelling Web Aplication.pptx
Pertemuan 3 Modelling Web Aplication.pptx
 
THE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL B
THE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL BTHE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL B
THE FUTURE OF WORK BY SYAHRANI ADRIANTY - INTERPERSONAL SKILL B
 
#10 CSS Framework.pdf
#10 CSS Framework.pdf#10 CSS Framework.pdf
#10 CSS Framework.pdf
 
Tugas 3 0317 (individu)
Tugas 3  0317 (individu)Tugas 3  0317 (individu)
Tugas 3 0317 (individu)
 

More from Iich-oNe Hidayat

More from Iich-oNe Hidayat (7)

Tugas 8 ku - 0316 1311511529
Tugas 8   ku - 0316 1311511529Tugas 8   ku - 0316 1311511529
Tugas 8 ku - 0316 1311511529
 
Tugas 7 ku– 0316 1311511529
Tugas 7   ku– 0316 1311511529Tugas 7   ku– 0316 1311511529
Tugas 7 ku– 0316 1311511529
 
Tugas 7 ku– 0316 1311511529
Tugas 7   ku– 0316 1311511529Tugas 7   ku– 0316 1311511529
Tugas 7 ku– 0316 1311511529
 
Tugas 3 – 0316
Tugas 3 – 0316Tugas 3 – 0316
Tugas 3 – 0316
 
Tugas 2 – 0316
Tugas 2 – 0316Tugas 2 – 0316
Tugas 2 – 0316
 
Tugas rekayasa web
Tugas rekayasa webTugas rekayasa web
Tugas rekayasa web
 
Tugas rekayasa web
Tugas rekayasa webTugas rekayasa web
Tugas rekayasa web
 

Recently uploaded

Modul Ajar Bahasa Indonesia Kelas 4 Fase B
Modul Ajar Bahasa Indonesia Kelas 4 Fase BModul Ajar Bahasa Indonesia Kelas 4 Fase B
Modul Ajar Bahasa Indonesia Kelas 4 Fase BAbdiera
 
442539315-ppt-modul-6-pend-seni-pptx.pptx
442539315-ppt-modul-6-pend-seni-pptx.pptx442539315-ppt-modul-6-pend-seni-pptx.pptx
442539315-ppt-modul-6-pend-seni-pptx.pptxHendryJulistiyanto
 
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
 
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
 
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptxKONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptxawaldarmawan3
 
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
 
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdf
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdfBab 6 Kreatif Mengungap Rasa dan Realitas.pdf
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdfbibizaenab
 
ppt-modul-6-pend-seni-di sd kelompok 2 ppt
ppt-modul-6-pend-seni-di sd kelompok 2 pptppt-modul-6-pend-seni-di sd kelompok 2 ppt
ppt-modul-6-pend-seni-di sd kelompok 2 pptArkhaRega1
 
Kesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptx
Kesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptxKesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptx
Kesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptxDwiYuniarti14
 
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptxBAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptxJamhuriIshak
 
Wawasan Nusantara sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...
Wawasan Nusantara  sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...Wawasan Nusantara  sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...
Wawasan Nusantara sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...MarwanAnugrah
 
Paparan Refleksi Lokakarya program sekolah penggerak.pptx
Paparan Refleksi Lokakarya program sekolah penggerak.pptxPaparan Refleksi Lokakarya program sekolah penggerak.pptx
Paparan Refleksi Lokakarya program sekolah penggerak.pptxIgitNuryana13
 
PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...
PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...
PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...Kanaidi ken
 
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
 
Materi Pertemuan Materi Pertemuan 7.pptx
Materi Pertemuan Materi Pertemuan 7.pptxMateri Pertemuan Materi Pertemuan 7.pptx
Materi Pertemuan Materi Pertemuan 7.pptxRezaWahyuni6
 
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKAMODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKAAndiCoc
 
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
 
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
 
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
 
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...
PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...Kanaidi ken
 

Recently uploaded (20)

Modul Ajar Bahasa Indonesia Kelas 4 Fase B
Modul Ajar Bahasa Indonesia Kelas 4 Fase BModul Ajar Bahasa Indonesia Kelas 4 Fase B
Modul Ajar Bahasa Indonesia Kelas 4 Fase B
 
442539315-ppt-modul-6-pend-seni-pptx.pptx
442539315-ppt-modul-6-pend-seni-pptx.pptx442539315-ppt-modul-6-pend-seni-pptx.pptx
442539315-ppt-modul-6-pend-seni-pptx.pptx
 
Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)
 
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
 
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptxKONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
 
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
 
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdf
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdfBab 6 Kreatif Mengungap Rasa dan Realitas.pdf
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdf
 
ppt-modul-6-pend-seni-di sd kelompok 2 ppt
ppt-modul-6-pend-seni-di sd kelompok 2 pptppt-modul-6-pend-seni-di sd kelompok 2 ppt
ppt-modul-6-pend-seni-di sd kelompok 2 ppt
 
Kesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptx
Kesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptxKesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptx
Kesebangunan Segitiga matematika kelas 7 kurikulum merdeka.pptx
 
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptxBAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
 
Wawasan Nusantara sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...
Wawasan Nusantara  sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...Wawasan Nusantara  sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...
Wawasan Nusantara sebagai satu kesatuan, politik, ekonomi, sosial, budaya, d...
 
Paparan Refleksi Lokakarya program sekolah penggerak.pptx
Paparan Refleksi Lokakarya program sekolah penggerak.pptxPaparan Refleksi Lokakarya program sekolah penggerak.pptx
Paparan Refleksi Lokakarya program sekolah penggerak.pptx
 
PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...
PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...
PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...
 
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
 
Materi Pertemuan Materi Pertemuan 7.pptx
Materi Pertemuan Materi Pertemuan 7.pptxMateri Pertemuan Materi Pertemuan 7.pptx
Materi Pertemuan Materi Pertemuan 7.pptx
 
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKAMODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA
 
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
 
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
 
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
 
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...
PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...
 

RWD-Framework-Pilihan

  • 1. TUGAS 6-KU-0316(INDIVIDU) REKAYASA WEB NAMA : HIDAYATUL ICHWAN NIM : 1311511529 UNIVERSITAS BUDILUHUR
  • 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.
  • 3. Contoh web dengan karakter Responsive Web Design.
  • 4.
  • 5.
  • 6. Perbandingan framework yang telah mengimplementasikan Responsive Web Design • Bootstrap • Foundation • Semantic-UI • Less Framework 4 • MQFramework • Golden Grid System • Amazium
  • 7. • Namun ada dua framework yang paling ternama saat ini, yang paling banyak pengguna nya, yaitu Twitter Bootstrap dan Foundation. • Framework adalah kumpulan tools atau library untuk membuat website dan aplikasi mobile. Paket Framework termasuk file dan folder dari kode standar (HTML, CSS, JS, dll) sebagai dasar untuk memulai membangun sebuah situs website. • Secara sepintas kita bisa melihat bootstrap sedikit unggul dibanding foundation, misal nya bootstrap tersedia dalam bentuk less dan sass, sedangkan foundation hanya sass, dari segi komunitas juga bootstrap lebih besar dibanding foundation.
  • 8. • Bootstrap • Bootstrap bisa dibilang cukup populer dikalangan desainer web atau mobile karena kemudahan dalam menggunakannya dan memiliki hasil yang menarik. Front-end framework yang dibuat oleh Twitter ini adalah framework yang dapat digunakan untuk membangun website dinamis dengan menggunakan bahasa script CSS. • Dengan Bootstrap, para desainer bisa membuat tampilan website yang responsif. Selain itu, para desainer tidak perlu membuat CSS sendiri agar tampilan web menarik karena kita hanya perlu memanggil class yang tersedia di Bootstrap.
  • 9. • Foundation Framework bertenaga ini dapat digunakan oleh para desainer web untuk membuat template pada website yang modern. Fitur yang dimiliki Foundation ini sangat kaya seperti yang dimiliki Bootstrap. Framework yang satu ini biasanya digunakan para desainer web untuk membuat template premium yang ada di market themes seperti ThemeForest. • Semantic-UI Semantic-UI ini disebut-sebut sebagai pesaing ketat dari Bootstrap karena framework yang satu ini memberikan desain web yang sangat modern. Pada pembaruan terbarunya Semantic-UI sudah terintegrasi dengan Angular, Ember, dan Meteor sehingga sangat cocok untuk digunakan pada proyek yang besar dan kompleks.
  • 10. • Foundation Framework bertenaga ini dapat digunakan oleh para desainer web untuk membuat template pada website yang modern. Fitur yang dimiliki Foundation ini sangat kaya seperti yang dimiliki Bootstrap. Framework yang satu ini biasanya digunakan para desainer web untuk membuat template premium yang ada di market themes seperti ThemeForest. • Semantic-UI Semantic-UI ini disebut-sebut sebagai pesaing ketat dari Bootstrap karena framework yang satu ini memberikan desain web yang sangat modern. Pada pembaruan terbarunya Semantic-UI sudah terintegrasi dengan Angular, Ember, dan Meteor sehingga sangat cocok untuk digunakan pada proyek yang besar dan kompleks.