Tugas 6 Rekayasa Web 0316
•Download as PPT, PDF•
0 likes•186 views
Dokumen tersebut membahas tentang responsive web design, yaitu teknik desain yang membuat website dapat tampil dengan baik di berbagai perangkat dengan ukuran layar yang berbeda-beda. Ia menjelaskan 3 langkah dasar pembuatan responsive web design yakni mendefinisikan viewport, menentukan struktur HTML, dan membuat media query. Diberikan pula contoh website yang bersifat responsive dan situs untuk menguji responsivitas sebuah website.
More Related Content
Similar to Tugas 6 Rekayasa Web 0316
Similar to Tugas 6 Rekayasa Web 0316 (20)
Recently uploaded
Recently uploaded (20)
Tugas 6 Rekayasa Web 0316
- 2. 1412511667 SRI HARTATIK 2 * Pengertian Responsive Web Design * Responsive Web Design atau yang sering disebut juga dengan Desain Web Responsive merupakan suatu tehnik desain yang membuat website dapat tampil dengan baik di berbagai browser dengan ukuran layar ( ukuran pixel ) yang berbeda beda. Istilah Responsive Web Design dicetuskan oleh Ethan Marcotte dalam sebuah artikelnya di ListApart.
- 3. 1412511667 SRI HARTATIK 3 Dalam artikel tersebut Ethan Marcotte mengulas 3 tehnik yang telah ada yaitu : -Flexible Grid Layout -Flexible Images -Media and Media Queries Ketiga tehnik tersebut di masukan ke dalam satu pendekatan dan dinamakan dengan Responsive Design.
- 4. 1412511667 SRI HARTATIK 4 * 3 Langkah dasar Pembuatan RWD * Biasanya Tag Viewport digunakan untuk memberitahu browser untuk menggunakan lebar perangkat sebagai viewport dan menonaktifkan skala awal. Meta Tag ini di bagian <head> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> o Mendefinisikan Meta Tag Desain Responsif Biasanya struktur umum adalah menentukan header, content, sidebar dan footer. o Menentukan Struktur HTML o Membuat Media Query
- 5. 1412511667 SRI HARTATIK 5 Contoh Website yang berkarakter Responsive Web Design o Pikiran Rakyat : http://www.pikiran-rakyat.com/ o Trivago : http://www.trivago.co.id o Bitfoundry : http://bitfoundry.ca/ o Ethan Marcotte : http://ethanmarcotte.com/ o CSS Tricks : http://css-tricks.com/
- 7. 1412511667 SRI HARTATIK 7 Situs yang dapat memeriksa Sebuah Web Responsive atau tidak oHalgatewood Responsif http://halgatewood.com/responsive/ oMatt Kersley http://mattkersley.com/responsive/ oScreenQueries http://screenqueri.es/ oResponsive.is http://responsive.is/ oStudioPress http://www.studiopress.com/responsive/ oiPad Peek http://ipadpeek.com/ oUji responsif http://responsivetest.net/
- 8. 1412511667 SRI HARTATIK 8 Bootstrap Foundation Waktu Pembuatan yang lebih cepat Grid Sistem yang Baik Template pada Bootstrap lebih rapi dan ringan Template pada Foundation lebih berat Dokumentasi lengkap ( Lebih dikenal) Dokumentasi Terbatas ( tidak terlalu dikenal ) Minim Fasilitas Gambar Terdapat fungsi class untuk memaksimalkan penggunaan Gambar Komponen dan Fitur terbatas Komponen Dan Fitur lebih banyak Responsive dan Not Responsive dapat dipilih sesuai keinginan