SlideShare a Scribd company logo
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
 
Tugas rekayasa web
Tugas rekayasa webTugas rekayasa web
Tugas rekayasa web
Muhamad Fahrul Azis
 
e-bussinies
e-bussiniese-bussinies
e-bussinies
Newbie Masih
 
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
DicodingEvent
 
05 rw
05 rw05 rw
Mendandani Blog dengan Widget
Mendandani Blog dengan WidgetMendandani Blog dengan Widget
Mendandani Blog dengan Widget
Yulef Dian
 
Framework 1411510744 azhar krisna pratama
Framework 1411510744 azhar krisna pratamaFramework 1411510744 azhar krisna pratama
Framework 1411510744 azhar krisna pratama
Azhar 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 web
rizkyripai
 
Tugas 6 ku 0316 1311511529
Tugas 6 ku 0316 1311511529Tugas 6 ku 0316 1311511529
Tugas 6 ku 0316 1311511529
Iich-oNe Hidayat
 
Tugas 1 Rekayasa Web 0316
Tugas 1 Rekayasa Web 0316Tugas 1 Rekayasa Web 0316
Tugas 1 Rekayasa Web 0316
sapatati
 
Tugas 6 – rekayasa web
Tugas 6 – rekayasa webTugas 6 – rekayasa web
Tugas 6 – rekayasa web
Aditya Indraprasti
 
Tugas 6 Rekayasa Web 0316
Tugas 6 Rekayasa Web 0316Tugas 6 Rekayasa Web 0316
Tugas 6 Rekayasa Web 0316
sapatati
 
Tugas 5 ku– 0316
Tugas 5   ku– 0316Tugas 5   ku– 0316
Tugas 5 ku– 0316
Iich-oNe Hidayat
 
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
Patricia Silva
 
10 tips incentive-infographic
10 tips incentive-infographic10 tips incentive-infographic
10 tips incentive-infographic
Incentive Inc
 
Έλληνες μετανάστες στο νέο κόσμο,Γ.Παναγιωτόπουλος
Έλληνες μετανάστες στο νέο κόσμο,Γ.ΠαναγιωτόπουλοςΈλληνες μετανάστες στο νέο κόσμο,Γ.Παναγιωτόπουλος
Έλληνες μετανάστες στο νέο κόσμο,Γ.Παναγιωτόπουλος
Iliana Kouvatsou
 
Tugas 2 rekayasa web
Tugas 2   rekayasa webTugas 2   rekayasa web
Tugas 2 rekayasa web
Mohammad Arief
 
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
 
Tugas 4 ku– 0316
Tugas 4   ku– 0316Tugas 4   ku– 0316
Tugas 4 ku– 0316
Iich-oNe Hidayat
 
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 -- clan9
freemens
 
Aristote. traité de l'âme - clan9
Aristote. traité de l'âme   - clan9Aristote. traité de l'âme   - clan9
Aristote. traité de l'âme - clan9
freemens
 
Debbiemistikaweni 1412510982 tugas5
Debbiemistikaweni 1412510982 tugas5Debbiemistikaweni 1412510982 tugas5
Debbiemistikaweni 1412510982 tugas5
debbie95
 
Tugas 4 rekayasa web
Tugas 4 rekayasa webTugas 4 rekayasa web
Tugas 4 rekayasa web
Mohammad Arief
 
Tugas 4 Rekayasa Web 0316
Tugas 4 Rekayasa Web 0316Tugas 4 Rekayasa Web 0316
Tugas 4 Rekayasa Web 0316
sapatati
 
Tugas 5 rekayasa web
Tugas 5   rekayasa webTugas 5   rekayasa web
Tugas 5 rekayasa web
faisalawai
 
333
333333
333
acan16
 

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 Tugas 6 ku 0316 1311511529

Tugas6.rekweb
Tugas6.rekwebTugas6.rekweb
Tugas6.rekweb
Ummi khairani
 
Tugas 6 rekayasa web 1312510231 rostarina
Tugas 6 rekayasa web 1312510231 rostarinaTugas 6 rekayasa web 1312510231 rostarina
Tugas 6 rekayasa web 1312510231 rostarina
osta92
 
Tugas rekayasa web 6
Tugas rekayasa web 6Tugas rekayasa web 6
Tugas rekayasa web 6
art david
 
Tugas 6 rekweb 0316
Tugas 6 rekweb 0316Tugas 6 rekweb 0316
Tugas 6 rekweb 0316
alchdila boyda kuasa
 
Bab 1 pengantar desain web
Bab 1   pengantar desain webBab 1   pengantar desain web
Bab 1 pengantar desain web
YUSRA 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.pptx
ivanwahyur79
 
Rekayasa web
Rekayasa webRekayasa web
Rekayasa web
Elisanendes
 
Kelompok 3.pptx
Kelompok 3.pptxKelompok 3.pptx
Kelompok 3.pptx
2141006JESSICAALTHEA
 
Tugas 6 – rekayasa web
Tugas 6 – rekayasa webTugas 6 – rekayasa web
Tugas 6 – rekayasa web
Gilbert Abednego
 
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
DeniHidayat46
 
Pengenalan dreamweaver
Pengenalan dreamweaverPengenalan dreamweaver
Pengenalan dreamweaverimanprasetyo
 
Tugas 6 rekayasa web
Tugas 6 rekayasa webTugas 6 rekayasa web
Tugas 6 rekayasa web
muhamad arsyan
 
Tugas 6 rekweb
Tugas 6 rekwebTugas 6 rekweb
Tugas 6 rekweb
yuyun kuratu
 
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.pptx
fauzandika
 
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
SyahraniAdrianty
 
#10 CSS Framework.pdf
#10 CSS Framework.pdf#10 CSS Framework.pdf
#10 CSS Framework.pdf
Itishomupgris
 
Tugas 3 0317 (individu)
Tugas 3  0317 (individu)Tugas 3  0317 (individu)
Tugas 3 0317 (individu)
RiaWahyuni5
 

Similar to Tugas 6 ku 0316 1311511529 (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

Tugas 8 ku - 0316 1311511529
Tugas 8   ku - 0316 1311511529Tugas 8   ku - 0316 1311511529
Tugas 8 ku - 0316 1311511529
Iich-oNe Hidayat
 
Tugas 7 ku– 0316 1311511529
Tugas 7   ku– 0316 1311511529Tugas 7   ku– 0316 1311511529
Tugas 7 ku– 0316 1311511529
Iich-oNe Hidayat
 
Tugas 7 ku– 0316 1311511529
Tugas 7   ku– 0316 1311511529Tugas 7   ku– 0316 1311511529
Tugas 7 ku– 0316 1311511529
Iich-oNe Hidayat
 
Tugas 3 – 0316
Tugas 3 – 0316Tugas 3 – 0316
Tugas 3 – 0316
Iich-oNe Hidayat
 
Tugas 2 – 0316
Tugas 2 – 0316Tugas 2 – 0316
Tugas 2 – 0316
Iich-oNe Hidayat
 
Tugas rekayasa web
Tugas rekayasa webTugas rekayasa web
Tugas rekayasa web
Iich-oNe Hidayat
 
Tugas rekayasa web
Tugas rekayasa webTugas rekayasa web
Tugas rekayasa web
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

RUBRIK OBSERVASI KINERJA KEPALA SEKOLAH.docx
RUBRIK OBSERVASI KINERJA KEPALA SEKOLAH.docxRUBRIK OBSERVASI KINERJA KEPALA SEKOLAH.docx
RUBRIK OBSERVASI KINERJA KEPALA SEKOLAH.docx
kinayaptr30
 
SOAL SHB PKN SEMESTER GENAP TAHUN 2023-2024.docx
SOAL SHB PKN SEMESTER GENAP TAHUN 2023-2024.docxSOAL SHB PKN SEMESTER GENAP TAHUN 2023-2024.docx
SOAL SHB PKN SEMESTER GENAP TAHUN 2023-2024.docx
MuhammadBagusAprilia1
 
PPT Observasi Praktik Kinerja PMM SD pdf
PPT Observasi Praktik Kinerja PMM SD pdfPPT Observasi Praktik Kinerja PMM SD pdf
PPT Observasi Praktik Kinerja PMM SD pdf
safitriana935
 
Paparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdf
Paparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdfPaparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdf
Paparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdf
SEMUELSAMBOKARAENG
 
Kisi-kisi soal pai kelas 7 genap 2024.docx
Kisi-kisi soal pai kelas 7 genap 2024.docxKisi-kisi soal pai kelas 7 genap 2024.docx
Kisi-kisi soal pai kelas 7 genap 2024.docx
irawan1978
 
Modul Projek - Modul P5 Kearifan Lokal _Menampilkan Tarian Daerah Nusantara_...
Modul Projek  - Modul P5 Kearifan Lokal _Menampilkan Tarian Daerah Nusantara_...Modul Projek  - Modul P5 Kearifan Lokal _Menampilkan Tarian Daerah Nusantara_...
Modul Projek - Modul P5 Kearifan Lokal _Menampilkan Tarian Daerah Nusantara_...
MirnasariMutmainna1
 
Bab 3 Sejarah Kerajaan Hindu-Buddha.pptx
Bab 3 Sejarah Kerajaan Hindu-Buddha.pptxBab 3 Sejarah Kerajaan Hindu-Buddha.pptx
Bab 3 Sejarah Kerajaan Hindu-Buddha.pptx
nawasenamerta
 
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBIVISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
gloriosaesy
 
Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdfTugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
muhammadRifai732845
 
Modul Ajar PAI dan Budi Pekerti Kelas 2 Fase A Kurikulum Merdeka
Modul Ajar PAI dan Budi Pekerti Kelas 2 Fase A Kurikulum MerdekaModul Ajar PAI dan Budi Pekerti Kelas 2 Fase A Kurikulum Merdeka
Modul Ajar PAI dan Budi Pekerti Kelas 2 Fase A Kurikulum Merdeka
Fathan Emran
 
Pi-2 AGUS MULYADI. S.Pd (3).pptx visi giru penggerak dan prakrsa perubahan bagja
Pi-2 AGUS MULYADI. S.Pd (3).pptx visi giru penggerak dan prakrsa perubahan bagjaPi-2 AGUS MULYADI. S.Pd (3).pptx visi giru penggerak dan prakrsa perubahan bagja
Pi-2 AGUS MULYADI. S.Pd (3).pptx visi giru penggerak dan prakrsa perubahan bagja
agusmulyadi08
 
tugas modul 1.4 Koneksi Antar Materi (1).pptx
tugas  modul 1.4 Koneksi Antar Materi (1).pptxtugas  modul 1.4 Koneksi Antar Materi (1).pptx
tugas modul 1.4 Koneksi Antar Materi (1).pptx
d2spdpnd9185
 
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdfINDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
NurSriWidyastuti1
 
Koneksi Antar Materi modul 1.4 Budaya Positif
Koneksi Antar Materi modul 1.4 Budaya PositifKoneksi Antar Materi modul 1.4 Budaya Positif
Koneksi Antar Materi modul 1.4 Budaya Positif
Rima98947
 
Program Kerja Kepala Sekolah 2023-2024.pdf
Program Kerja Kepala Sekolah 2023-2024.pdfProgram Kerja Kepala Sekolah 2023-2024.pdf
Program Kerja Kepala Sekolah 2023-2024.pdf
erlita3
 
PI 2 - Ratna Haryanti, S. Pd..pptx Visi misi dan prakarsa perubahan pendidika...
PI 2 - Ratna Haryanti, S. Pd..pptx Visi misi dan prakarsa perubahan pendidika...PI 2 - Ratna Haryanti, S. Pd..pptx Visi misi dan prakarsa perubahan pendidika...
PI 2 - Ratna Haryanti, S. Pd..pptx Visi misi dan prakarsa perubahan pendidika...
agusmulyadi08
 
Patofisiologi Sistem Endokrin hormon pada sistem endokrin
Patofisiologi Sistem Endokrin hormon pada sistem endokrinPatofisiologi Sistem Endokrin hormon pada sistem endokrin
Patofisiologi Sistem Endokrin hormon pada sistem endokrin
rohman85
 
SEMINAR PPG DAN PPL ppg prajabatan 2024.pptx
SEMINAR PPG DAN PPL ppg prajabatan 2024.pptxSEMINAR PPG DAN PPL ppg prajabatan 2024.pptx
SEMINAR PPG DAN PPL ppg prajabatan 2024.pptx
bobobodo693
 
Permainan Wiwi Wowo aksi nyata berkebhinekaan
Permainan Wiwi Wowo aksi nyata berkebhinekaanPermainan Wiwi Wowo aksi nyata berkebhinekaan
Permainan Wiwi Wowo aksi nyata berkebhinekaan
DEVI390643
 
LK 1 - 5T Keputusan Berdampak PERMATA BUNDA.pdf
LK 1 - 5T Keputusan Berdampak PERMATA BUNDA.pdfLK 1 - 5T Keputusan Berdampak PERMATA BUNDA.pdf
LK 1 - 5T Keputusan Berdampak PERMATA BUNDA.pdf
UditGheozi2
 

Recently uploaded (20)

RUBRIK OBSERVASI KINERJA KEPALA SEKOLAH.docx
RUBRIK OBSERVASI KINERJA KEPALA SEKOLAH.docxRUBRIK OBSERVASI KINERJA KEPALA SEKOLAH.docx
RUBRIK OBSERVASI KINERJA KEPALA SEKOLAH.docx
 
SOAL SHB PKN SEMESTER GENAP TAHUN 2023-2024.docx
SOAL SHB PKN SEMESTER GENAP TAHUN 2023-2024.docxSOAL SHB PKN SEMESTER GENAP TAHUN 2023-2024.docx
SOAL SHB PKN SEMESTER GENAP TAHUN 2023-2024.docx
 
PPT Observasi Praktik Kinerja PMM SD pdf
PPT Observasi Praktik Kinerja PMM SD pdfPPT Observasi Praktik Kinerja PMM SD pdf
PPT Observasi Praktik Kinerja PMM SD pdf
 
Paparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdf
Paparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdfPaparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdf
Paparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdf
 
Kisi-kisi soal pai kelas 7 genap 2024.docx
Kisi-kisi soal pai kelas 7 genap 2024.docxKisi-kisi soal pai kelas 7 genap 2024.docx
Kisi-kisi soal pai kelas 7 genap 2024.docx
 
Modul Projek - Modul P5 Kearifan Lokal _Menampilkan Tarian Daerah Nusantara_...
Modul Projek  - Modul P5 Kearifan Lokal _Menampilkan Tarian Daerah Nusantara_...Modul Projek  - Modul P5 Kearifan Lokal _Menampilkan Tarian Daerah Nusantara_...
Modul Projek - Modul P5 Kearifan Lokal _Menampilkan Tarian Daerah Nusantara_...
 
Bab 3 Sejarah Kerajaan Hindu-Buddha.pptx
Bab 3 Sejarah Kerajaan Hindu-Buddha.pptxBab 3 Sejarah Kerajaan Hindu-Buddha.pptx
Bab 3 Sejarah Kerajaan Hindu-Buddha.pptx
 
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBIVISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
 
Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdfTugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
 
Modul Ajar PAI dan Budi Pekerti Kelas 2 Fase A Kurikulum Merdeka
Modul Ajar PAI dan Budi Pekerti Kelas 2 Fase A Kurikulum MerdekaModul Ajar PAI dan Budi Pekerti Kelas 2 Fase A Kurikulum Merdeka
Modul Ajar PAI dan Budi Pekerti Kelas 2 Fase A Kurikulum Merdeka
 
Pi-2 AGUS MULYADI. S.Pd (3).pptx visi giru penggerak dan prakrsa perubahan bagja
Pi-2 AGUS MULYADI. S.Pd (3).pptx visi giru penggerak dan prakrsa perubahan bagjaPi-2 AGUS MULYADI. S.Pd (3).pptx visi giru penggerak dan prakrsa perubahan bagja
Pi-2 AGUS MULYADI. S.Pd (3).pptx visi giru penggerak dan prakrsa perubahan bagja
 
tugas modul 1.4 Koneksi Antar Materi (1).pptx
tugas  modul 1.4 Koneksi Antar Materi (1).pptxtugas  modul 1.4 Koneksi Antar Materi (1).pptx
tugas modul 1.4 Koneksi Antar Materi (1).pptx
 
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdfINDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
 
Koneksi Antar Materi modul 1.4 Budaya Positif
Koneksi Antar Materi modul 1.4 Budaya PositifKoneksi Antar Materi modul 1.4 Budaya Positif
Koneksi Antar Materi modul 1.4 Budaya Positif
 
Program Kerja Kepala Sekolah 2023-2024.pdf
Program Kerja Kepala Sekolah 2023-2024.pdfProgram Kerja Kepala Sekolah 2023-2024.pdf
Program Kerja Kepala Sekolah 2023-2024.pdf
 
PI 2 - Ratna Haryanti, S. Pd..pptx Visi misi dan prakarsa perubahan pendidika...
PI 2 - Ratna Haryanti, S. Pd..pptx Visi misi dan prakarsa perubahan pendidika...PI 2 - Ratna Haryanti, S. Pd..pptx Visi misi dan prakarsa perubahan pendidika...
PI 2 - Ratna Haryanti, S. Pd..pptx Visi misi dan prakarsa perubahan pendidika...
 
Patofisiologi Sistem Endokrin hormon pada sistem endokrin
Patofisiologi Sistem Endokrin hormon pada sistem endokrinPatofisiologi Sistem Endokrin hormon pada sistem endokrin
Patofisiologi Sistem Endokrin hormon pada sistem endokrin
 
SEMINAR PPG DAN PPL ppg prajabatan 2024.pptx
SEMINAR PPG DAN PPL ppg prajabatan 2024.pptxSEMINAR PPG DAN PPL ppg prajabatan 2024.pptx
SEMINAR PPG DAN PPL ppg prajabatan 2024.pptx
 
Permainan Wiwi Wowo aksi nyata berkebhinekaan
Permainan Wiwi Wowo aksi nyata berkebhinekaanPermainan Wiwi Wowo aksi nyata berkebhinekaan
Permainan Wiwi Wowo aksi nyata berkebhinekaan
 
LK 1 - 5T Keputusan Berdampak PERMATA BUNDA.pdf
LK 1 - 5T Keputusan Berdampak PERMATA BUNDA.pdfLK 1 - 5T Keputusan Berdampak PERMATA BUNDA.pdf
LK 1 - 5T Keputusan Berdampak PERMATA BUNDA.pdf
 

Tugas 6 ku 0316 1311511529

  • 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.