SlideShare a Scribd company logo
1 of 6
 Desain Web Responsive membuat halaman
web anda terlihat baik di semua perangkat
(dektop,tablet, dan telepon).
 Desain Web Responsive adalah tentang
menggunakan CSS dan HTML untuk mengubah
ukuran , menyembunyikan , mengecilkan,
memperbesar, atau memindahkan konten untuk
membuatnya terlihat bagus di setiap layar.
 Kelebihan atau keunggulan Bootstrap
 Waktu pembuatannya yang lebih cepat : karena elemen-elemen yang biasa ada dalam
sebuah website pada umunya sudah dibuatkan class-nya oleh bootstrap ini, jadi kita
tinggal memanggilanya dalam theme.
 Template yang memnggunakan Bootstrap lebih rapi : mungkin ini isedikit relatif , karena
kebiasaan masing-masing developer membuat coding pasti berbeda-beda. Namunn pada
dasarnya , karena bootstrap sudah terstruktur, unutk memodifikasi class dan penambahan
class memang sebaiknya mempertahankan kerapihan code yang sudah ada terlebih
dahulu.
 Template yang menggunakan Bootstrap lebih ringan .
 Responsive : ya , dengan sedikit memodifikasi tempalte , kita bisa memilih antara
mengaktifkan siffat ‘rensponsive’.
 Banyak template bootstrap gratis.
 Twitter Bootstrap juga memiliki code yang cukup mudah dipelajari.
 Kekurangan atau kelemahan Bootstrap
o Salah satu kemampuan bootstrap adalah minim gambar karen amemanfaatkan css3,
disaat itu adalah keunggulam css3 namunn disisi itu pula kekurangan bootstrap , css3
yang dikembangkan twitter dll.
 Keuntungan Menggunakan framework css foundation
 Grid sistem yang baik : foundation memberikan anda kenyamanan daklam didalam dua
belas grid yang di sediakan dimana grid foundation lebih respon dengan baik oleh browser
ketika menjalankan media query . Dengan foundation kita dapat memilih antara fluid kolom
dan statis kolom yang lebih baik direspon oleh browser bila dibandingakan dengan grid
yang ada dalam bootstrap dan framework lain, hal tersebut membuat foundation melalukan
pergeseran /scrolling lebih sempurna di respon oleh browser.
 Komponen dan fitur lebih banyak : foundation menyediakan komponen yang lebih banyak
bila dibandingkan dengan bootstrap . Itu bisa dilihat dari button yang relative lebih banyak
jenisnya serta penggunaan effek javascript yang lebih dinamis. Dengan demikian kita
ditawarkan banyak pilihan ketika sedang mendesign interface dari tempallate websitte yang
sedang dikerjakan.
 baik untuk pengguna Gambar: foundation memiliki fungsi class untuk memaksimalkan
anda menggunakan gambar dalam sebuah website , hal ini menjadi salah satu pembeda
ketika anda membandingkan dengan boostrap yang memang lebih minim dalam
pengelolaan gamabar.
 Kekurangan framework Css Foundation
o Template yang menggunakan foundation lebih berat ketimbang yang menggunakan
bootstrap, hal ini mungkin ditimbulkan dari komponen foundation yang lebih banyak dari
bootstrap .
o Dokumentasi terbatas : apabila dibandingkan dengan framework css Bootstrap ,
dokumentasi foundation memang lebih dikatakan terbatas . Ketika kita melakukan
pencarian tutorial foundation di mesin pencari , akan sedikit sulit untuk menemukan
dokumentasi dan tutorial penggunaan foundation apabila dibandingkan dengan bootstrap.
Tugas 6 rekweb

More Related Content

What's hot

Presentation1
Presentation1Presentation1
Presentation1
esuctudy
 

What's hot (15)

Blogger dan wordpress
Blogger dan wordpressBlogger dan wordpress
Blogger dan wordpress
 
tugas 6 - 0316 (individu)
tugas 6 - 0316 (individu)tugas 6 - 0316 (individu)
tugas 6 - 0316 (individu)
 
Tugas 6 rekweb 0316
Tugas 6 rekweb 0316Tugas 6 rekweb 0316
Tugas 6 rekweb 0316
 
Presentation1
Presentation1Presentation1
Presentation1
 
Tugas 6
Tugas 6Tugas 6
Tugas 6
 
Tugas 6 rekayasa web
Tugas 6 rekayasa webTugas 6 rekayasa web
Tugas 6 rekayasa web
 
Tingkatkan Pengalaman Pengguna dengan Matrik Web Vitals - Dimas Maulana Dwi S...
Tingkatkan Pengalaman Pengguna dengan Matrik Web Vitals - Dimas Maulana Dwi S...Tingkatkan Pengalaman Pengguna dengan Matrik Web Vitals - Dimas Maulana Dwi S...
Tingkatkan Pengalaman Pengguna dengan Matrik Web Vitals - Dimas Maulana Dwi S...
 
Mulok
MulokMulok
Mulok
 
Power point it afdal
Power point it afdalPower point it afdal
Power point it afdal
 
Tugas 6 rekayasa web
Tugas 6  rekayasa webTugas 6  rekayasa web
Tugas 6 rekayasa web
 
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
 
Presentation1 rekweb
Presentation1 rekwebPresentation1 rekweb
Presentation1 rekweb
 
Tugas 6 rekayasa web_ nasrul akbar 1412510552
Tugas 6  rekayasa web_ nasrul akbar 1412510552Tugas 6  rekayasa web_ nasrul akbar 1412510552
Tugas 6 rekayasa web_ nasrul akbar 1412510552
 
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
 

Viewers also liked

Print based media production
Print based media productionPrint based media production
Print based media production
bubblybubbly
 

Viewers also liked (7)

Descubriendo mi región y distrito (Ate vitarte, Lima - Perú)
Descubriendo mi región y distrito (Ate vitarte, Lima - Perú)Descubriendo mi región y distrito (Ate vitarte, Lima - Perú)
Descubriendo mi región y distrito (Ate vitarte, Lima - Perú)
 
625-HCD-2016 Proyecto de Comunicación: Colocación de rampas en la calle Indep...
625-HCD-2016 Proyecto de Comunicación: Colocación de rampas en la calle Indep...625-HCD-2016 Proyecto de Comunicación: Colocación de rampas en la calle Indep...
625-HCD-2016 Proyecto de Comunicación: Colocación de rampas en la calle Indep...
 
Seminario vii
Seminario viiSeminario vii
Seminario vii
 
Resume March 2016
Resume March 2016Resume March 2016
Resume March 2016
 
Tweets by rahul pandita on 19 jan2014 about #kp exodus
Tweets by rahul pandita on 19 jan2014 about #kp exodusTweets by rahul pandita on 19 jan2014 about #kp exodus
Tweets by rahul pandita on 19 jan2014 about #kp exodus
 
%w(map reduce).first - A Tale About Rabbits, Latency, and Slim Crontabs
%w(map reduce).first - A Tale About Rabbits, Latency, and Slim Crontabs%w(map reduce).first - A Tale About Rabbits, Latency, and Slim Crontabs
%w(map reduce).first - A Tale About Rabbits, Latency, and Slim Crontabs
 
Print based media production
Print based media productionPrint based media production
Print based media production
 

Similar to Tugas 6 rekweb

Dapatkan awal yang baik dalam desain web
Dapatkan awal yang baik dalam desain webDapatkan awal yang baik dalam desain web
Dapatkan awal yang baik dalam desain web
ConradsenFoley6
 

Similar to Tugas 6 rekweb (20)

bootstrap.pptx
bootstrap.pptxbootstrap.pptx
bootstrap.pptx
 
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
 
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
 
Adi prasetya 1511510370 tugas2
Adi prasetya 1511510370 tugas2Adi prasetya 1511510370 tugas2
Adi prasetya 1511510370 tugas2
 
Tugas6.rekweb
Tugas6.rekwebTugas6.rekweb
Tugas6.rekweb
 
Tugas 6 rekweb
Tugas 6   rekwebTugas 6   rekweb
Tugas 6 rekweb
 
Penjelasan bootstrap
Penjelasan bootstrapPenjelasan bootstrap
Penjelasan bootstrap
 
Frame work php
Frame work phpFrame work php
Frame work php
 
Introduction to Tailwind CSS - Berkenalan dengan Tailwind CSS.pptx
Introduction to Tailwind CSS - Berkenalan dengan Tailwind CSS.pptxIntroduction to Tailwind CSS - Berkenalan dengan Tailwind CSS.pptx
Introduction to Tailwind CSS - Berkenalan dengan Tailwind CSS.pptx
 
Bootstrap latihan
Bootstrap latihanBootstrap latihan
Bootstrap latihan
 
materi 5 Cloud Computing.docx
materi 5 Cloud Computing.docxmateri 5 Cloud Computing.docx
materi 5 Cloud Computing.docx
 
Dapatkan awal yang baik dalam desain web
Dapatkan awal yang baik dalam desain webDapatkan awal yang baik dalam desain web
Dapatkan awal yang baik dalam desain web
 
Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt
 
Tugas-4 REKAYASA WEB
Tugas-4 REKAYASA WEBTugas-4 REKAYASA WEB
Tugas-4 REKAYASA WEB
 
Prasta adriansyah
Prasta adriansyahPrasta adriansyah
Prasta adriansyah
 
Materi SPL Berbasis Web
Materi SPL Berbasis WebMateri SPL Berbasis Web
Materi SPL Berbasis Web
 
Rian saputa 1211510639 tugas2
Rian saputa 1211510639 tugas2Rian saputa 1211510639 tugas2
Rian saputa 1211510639 tugas2
 
Styled Design (2).pptx
Styled Design (2).pptxStyled Design (2).pptx
Styled Design (2).pptx
 

More from yuyun kuratu (7)

Tugas 7 rekayasa web
Tugas 7 rekayasa webTugas 7 rekayasa web
Tugas 7 rekayasa web
 
Tugas 5 rekweb
Tugas 5 rekwebTugas 5 rekweb
Tugas 5 rekweb
 
Rekayasa web tugas 4
Rekayasa web  tugas 4Rekayasa web  tugas 4
Rekayasa web tugas 4
 
Tugas 3
Tugas 3Tugas 3
Tugas 3
 
Tugas 1
Tugas 1Tugas 1
Tugas 1
 
Tugas 2
Tugas 2Tugas 2
Tugas 2
 
Blank(1)
Blank(1)Blank(1)
Blank(1)
 

Recently uploaded

Contoh PPT Seminar Proposal Teknik Informatika.pptx
Contoh PPT Seminar Proposal Teknik Informatika.pptxContoh PPT Seminar Proposal Teknik Informatika.pptx
Contoh PPT Seminar Proposal Teknik Informatika.pptx
IvvatulAini
 
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
 
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdfAksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
JarzaniIsmail
 
Bab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptx
Bab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptxBab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptx
Bab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptx
ssuser35630b
 

Recently uploaded (20)

SOAL PUBLIC SPEAKING UNTUK PEMULA PG & ESSAY
SOAL PUBLIC SPEAKING UNTUK PEMULA PG & ESSAYSOAL PUBLIC SPEAKING UNTUK PEMULA PG & ESSAY
SOAL PUBLIC SPEAKING UNTUK PEMULA PG & ESSAY
 
Contoh PPT Seminar Proposal Teknik Informatika.pptx
Contoh PPT Seminar Proposal Teknik Informatika.pptxContoh PPT Seminar Proposal Teknik Informatika.pptx
Contoh PPT Seminar Proposal Teknik Informatika.pptx
 
vIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsxvIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsx
 
Kanvas BAGJA prakarsa perubahan Ahyar.pdf
Kanvas BAGJA prakarsa perubahan Ahyar.pdfKanvas BAGJA prakarsa perubahan Ahyar.pdf
Kanvas BAGJA prakarsa perubahan Ahyar.pdf
 
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
 
Modul Ajar Bahasa Inggris - HOME SWEET HOME (Chapter 3) - Fase D.pdf
Modul Ajar Bahasa Inggris - HOME SWEET HOME (Chapter 3) - Fase D.pdfModul Ajar Bahasa Inggris - HOME SWEET HOME (Chapter 3) - Fase D.pdf
Modul Ajar Bahasa Inggris - HOME SWEET HOME (Chapter 3) - Fase D.pdf
 
PPT Mean Median Modus data tunggal .pptx
PPT Mean Median Modus data tunggal .pptxPPT Mean Median Modus data tunggal .pptx
PPT Mean Median Modus data tunggal .pptx
 
Pengenalan Figma, Figma Indtroduction, Figma
Pengenalan Figma, Figma Indtroduction, FigmaPengenalan Figma, Figma Indtroduction, Figma
Pengenalan Figma, Figma Indtroduction, Figma
 
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
 
OPTIMALISASI KOMUNITAS BELAJAR DI SEKOLAH.pptx
OPTIMALISASI KOMUNITAS BELAJAR DI SEKOLAH.pptxOPTIMALISASI KOMUNITAS BELAJAR DI SEKOLAH.pptx
OPTIMALISASI KOMUNITAS BELAJAR DI SEKOLAH.pptx
 
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
 
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
 
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
 
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdfAksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
 
E-modul Materi Ekosistem untuk kelas X SMA
E-modul Materi Ekosistem untuk kelas X SMAE-modul Materi Ekosistem untuk kelas X SMA
E-modul Materi Ekosistem untuk kelas X SMA
 
Bab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptx
Bab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptxBab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptx
Bab 7 - Perilaku Ekonomi dan Kesejahteraan Sosial.pptx
 
MODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdf
MODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdfMODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdf
MODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdf
 
7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptx
7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptx7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptx
7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptx
 
Prov.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdf
Prov.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdfProv.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdf
Prov.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdf
 
Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...
Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...
Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...
 

Tugas 6 rekweb

  • 1.
  • 2.  Desain Web Responsive membuat halaman web anda terlihat baik di semua perangkat (dektop,tablet, dan telepon).  Desain Web Responsive adalah tentang menggunakan CSS dan HTML untuk mengubah ukuran , menyembunyikan , mengecilkan, memperbesar, atau memindahkan konten untuk membuatnya terlihat bagus di setiap layar.
  • 3.
  • 4.  Kelebihan atau keunggulan Bootstrap  Waktu pembuatannya yang lebih cepat : karena elemen-elemen yang biasa ada dalam sebuah website pada umunya sudah dibuatkan class-nya oleh bootstrap ini, jadi kita tinggal memanggilanya dalam theme.  Template yang memnggunakan Bootstrap lebih rapi : mungkin ini isedikit relatif , karena kebiasaan masing-masing developer membuat coding pasti berbeda-beda. Namunn pada dasarnya , karena bootstrap sudah terstruktur, unutk memodifikasi class dan penambahan class memang sebaiknya mempertahankan kerapihan code yang sudah ada terlebih dahulu.  Template yang menggunakan Bootstrap lebih ringan .  Responsive : ya , dengan sedikit memodifikasi tempalte , kita bisa memilih antara mengaktifkan siffat ‘rensponsive’.  Banyak template bootstrap gratis.  Twitter Bootstrap juga memiliki code yang cukup mudah dipelajari.  Kekurangan atau kelemahan Bootstrap o Salah satu kemampuan bootstrap adalah minim gambar karen amemanfaatkan css3, disaat itu adalah keunggulam css3 namunn disisi itu pula kekurangan bootstrap , css3 yang dikembangkan twitter dll.
  • 5.  Keuntungan Menggunakan framework css foundation  Grid sistem yang baik : foundation memberikan anda kenyamanan daklam didalam dua belas grid yang di sediakan dimana grid foundation lebih respon dengan baik oleh browser ketika menjalankan media query . Dengan foundation kita dapat memilih antara fluid kolom dan statis kolom yang lebih baik direspon oleh browser bila dibandingakan dengan grid yang ada dalam bootstrap dan framework lain, hal tersebut membuat foundation melalukan pergeseran /scrolling lebih sempurna di respon oleh browser.  Komponen dan fitur lebih banyak : foundation menyediakan komponen yang lebih banyak bila dibandingkan dengan bootstrap . Itu bisa dilihat dari button yang relative lebih banyak jenisnya serta penggunaan effek javascript yang lebih dinamis. Dengan demikian kita ditawarkan banyak pilihan ketika sedang mendesign interface dari tempallate websitte yang sedang dikerjakan.  baik untuk pengguna Gambar: foundation memiliki fungsi class untuk memaksimalkan anda menggunakan gambar dalam sebuah website , hal ini menjadi salah satu pembeda ketika anda membandingkan dengan boostrap yang memang lebih minim dalam pengelolaan gamabar.  Kekurangan framework Css Foundation o Template yang menggunakan foundation lebih berat ketimbang yang menggunakan bootstrap, hal ini mungkin ditimbulkan dari komponen foundation yang lebih banyak dari bootstrap . o Dokumentasi terbatas : apabila dibandingkan dengan framework css Bootstrap , dokumentasi foundation memang lebih dikatakan terbatas . Ketika kita melakukan pencarian tutorial foundation di mesin pencari , akan sedikit sulit untuk menemukan dokumentasi dan tutorial penggunaan foundation apabila dibandingkan dengan bootstrap.