REKAYASA WEBTugas 6 Individu

Nama : Alvin YosuaNIM : 1411510454

1. Apa yang anda ketahui tentang Responsive Web Design?berikan beberapa contoh web dengan karakter Responsive Web Design!

• Desain Web Responsif (Responsive Web Design (RWD)) adalah sebuah metode atau pendekatan sistem web desain yang bertujuan memberikan pengalaman berselancar yang optimal dalam berbagai perangkat, baik mobile maupun Personal Computer (PC). Dengan metode ini, web akan beradaptasi jika dibuka dari perangkat mobile berukuran kecil maupun perangkat komputer dengan ukuran monitor besar. Ukuran huruf, user interface, gambar dan tata letak akan menyesuaikan dengan lebar layar dan resolusi layar monitor yang tersedia. Hasilnya pengguna akan merasakan pengalaman mudah membaca, nyaman dan melihat informasi web tersebut sama dengan jika ia melihat melalui perangkat komputer.

• Beberapa ciri web dengan Design Web Responsive :1. User interface-nya beradaptasi di berbagai perangkat berbeda.2. Ukuran huruf, tata letak dan gambarnya beradaptasi di berbagai

ukuran layar yang berbeda.3. Umumnya menggunakan scrolling dan swipe untuk bernavigasi di

perangkat mobile.4. Lintas platform

Berikut beberapa contoh web dengan karakter Responsive Web Design!

• http://www.beoplay.com/products/beoplayh2#at-a-glance

• http://www.markeluk.com/portals/direct/graphic/index.html

• http://www.lexus-int.com/magazine/issue4/element/

• http://sampedro.dk/en/

2. Bandingkan beberapa contoh framework yang telah mengimplementasikan Responsive web design, seperti

Bootstrap, Foundation,dll !

• 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. Karena banyak situs memiliki struktur yang sama — Framework membuatnya jadi lebih mudah sehingga developer tidak perlu memulai dari awal untuk ngoding, tentunya menghemat waktu dan usaha.

• Berapa perbandingan antara Bootstrap dan Foundation :

• Bootstrap adalah sebuah framework yang dikembangkan pengembang Twitter pada pertengahan tahun 2010. Sebelum menjadi kerangka kerja open-source, Bootstrap dikenal sebagai Twitter Blueprint. Dan terus berkembang sampai saat ini dan Bootstrap telah menjadi salah satu front-end framework yang paling populer dan merupakan proyek open source di dunia.

• Keunggulan Framework Bootstrap :1. Waktu pembuatan yang lebih cepat : Karena elemen-elemen yang biasa ada

dalam sebuah website pada umumnya sudah dibuatkan class-nya oleh Bootstrap ini, jadi kita tinggal memanggilnya dalam theme.

2. Template yang menggunakan Bootstrap lebih rapi : Mungkin ini akan sedikit relatif, karena kebiasaan masing-masing developer membuat coding pasti berbeda-beda. Namun pada dasarnya, karena bootstrap sudah terstruktur, untuk modifikasi class dan penambahan class memang sebaiknya mempertahankan kerapihan code yang sudah ada lebih dulu.

3. Template yang menggunakan Bootstrap lebih ringan.4. Responsive dan tidak responsive : Ya, dengan sedikit modifikasi template, kita

bisa memilih antara mengaktifkan sifat ‘responsive’ dan tidak ‘responsive’.5. Dokumentasi Lengkap : twitter bootstrap memiliki keunggulan dalam hal

dokumentasi nya, sehingga pengembang tidak perlu repot-repot untuk mempelajari. Dan hal ini menjadikan framework bootstrap lebih dikenal daripada framework lainnya.

• Kekurangan Framework Bootstrap :1. Minim gambar : salah satu kekurangan bootstrap adalah minim

dalam fasilitas mengelolaan gambar, karena memang sebenarnya framework bootstrap dibuat untuk dapat meminimalisasi gambar karena kebanyakan dari bootstrap lebih memanfaatkan scrpit css.

2. Mudah dikenali : Itulah salah satu hal buruk ketika sesuatu telah menjadi terkenal, semakin banyak orang yang mudah mengenali hal tersebut. tidak terkecuali dengan bootstrap.mungkin bagi para pengembang front end website akan cukup merasa familiar ketika melihat sebuah template yang dibuat dengan bootstrap. Dan akan terlihat sedikit seragam dengan template lain yang dibuat dengan bootstrap, hal ini akan menjadi sedikit permasalahan ketika kita dituntut untuk membuat sebuah template yang berbeda dari kebanyakan.

• Foundation adalah framework css yang dikembangkan oleh ZURB pada tahun 2011. Edisi pertama framework css Foundation adalah versi 2.0 dan hingga saat ini foundation telah mengalami beberapa kali pengembangan hingga muncul versi 5 nya. Dari awal pembuatanya ZURB mengusung sebuah misi untuk membuat framework yang lebih cepat dan lebih baik untuk membuat tampilan sebuah website. Dan sama seperti bootstrap, foundation pun mengusung responsive fitur didalamnya.

• Keunggulan Framework Foundation :1. Grid sistem yang baik : Foundation memberikan anda kenyamanan

dalam didalam dua belas grid yang di sediakan dimana grid foundation lebih direspond dengan baik oleh browser ketika menjalankan media query. ( untuk lebih jelas tentang media query dalam css sahabat dapat membaca artikel berikut ini : belajar media query dalam css. ) dengan foundation sahabat dapat memilih antara fluid kolom dan statis kolom yang lebih baik direspon oleh browser bila dibandingkan dengan grid yang ada dalam bootstrap dan framework lain . hal tersebut membuat foundation melakukan pergeseran / scrolling yang lebih sempurna di respon oleh browser.

2. Komponen dan fitur lebih banyak : foundation menyediakan komponen yang lebih banyak bila dibandingkan denga bootstrap. Itu bisa dilihat dari button yang relative lebih banyak jenisnya serta penggunaan effek javascript yang lebih dinamis. Dengan demikian sahabat ditawarkan banyak pilihan ketika sedang mendesign interface dari template website yang sedang dikerjakan.

3. Baik untuk penggunaan Gambar : Foundation memiliki fungsi class untuk memaksimalkan anda menggunakan gambar dalam sebuah website, hal ini menjadi salah satu pembeda ketika anda membandingkan dengan bootstrap yang memang lebih minim dalam pengelolaan gambar.

• Kekurangan Framework Foundation :1. Template yang menggunakan foundation lebih berat ketimbang yang

menggunakan bootstrap, hal ini mungkin ditimbulkan dari komponen foundation yang lebih banyak dari bootstrap.

2. Dokumentasi terbatas : apabila dibandingkan dengan framework css Bootstrap, dokumentasi foundation memang lebih dikatakan lebih terbatas. Ketika sahabat melakukan pencarian tutorial foundation di mesin pencari, akan sedikit sulit untuk menemukan dokumentasi dan tutorial penggunaan foundation apabila di bandingkan dengan bootstrap.