tugas6 rekweb-ku-0316-ismailaluwi-1212511008[1]

11
REKAYASA WEB TUGAS 6 Nama : Ismail Aluwi NIM : 1212511008

Upload: ismail-aluwi

Post on 16-Apr-2017

74 views

Category:

Internet


0 download

TRANSCRIPT

Page 1: Tugas6 rekweb-ku-0316-ismailaluwi-1212511008[1]

REKAYASA WEBTUGAS 6

Nama : Ismail AluwiNIM : 1212511008

Page 2: Tugas6 rekweb-ku-0316-ismailaluwi-1212511008[1]

Apa itu 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.

Page 3: Tugas6 rekweb-ku-0316-ismailaluwi-1212511008[1]

Kelebihan dan KekuranganResponsive Web Design

Teknik ini sudah mulai banyak digunakan dikalangan web desainer luar maupun lokal dan memiliki beberapa keuntungan, salah satunya adalah penghematan penggunaan sub domain, yang tadinya kalau mengakses harus menggunakan kata “mobile” atau “m” didepan domainnya, sekarang cukup dengan mengetik nama domainnya saja dan tampilan akan menyesuaikan dengan device yang digunakan. Keuntungan yang paling utama tentu saja dapat mengurangi jumlah development menjadi satu saja untuk dipakai semua devices. Lalu kelemahan dari teknik ini adalah jika digunakan pada website yang bertujuan untuk menampilkan gambar saja, seperti website fotografi misalnya. Resource gambar yang diload oleh device kita akan sama dengan yang diload dikomputer kita. Untuk itu kita perlu memperhatikan apakah website yang kita buat cocok untuk dipakaikan teknik Responsive ini.

Page 4: Tugas6 rekweb-ku-0316-ismailaluwi-1212511008[1]

Contoh Responsive Web Design (1)

Page 5: Tugas6 rekweb-ku-0316-ismailaluwi-1212511008[1]

Contoh Responsive Web Design (2)

Page 6: Tugas6 rekweb-ku-0316-ismailaluwi-1212511008[1]

Framework BootstrapBootstrap 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.

Page 7: Tugas6 rekweb-ku-0316-ismailaluwi-1212511008[1]

Kelebihan Bootstrap 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.

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.

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

template, kita bisa memilih antara mengaktifkan sifat ‘responsive’ dan tidak ‘responsive’.

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.

Page 8: Tugas6 rekweb-ku-0316-ismailaluwi-1212511008[1]

Kekurangan Bootstrap 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.

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.

Page 9: Tugas6 rekweb-ku-0316-ismailaluwi-1212511008[1]

Framework FoundationFoundation 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.

Page 10: Tugas6 rekweb-ku-0316-ismailaluwi-1212511008[1]

Kelebihan Foundation 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.

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.

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.

Page 11: Tugas6 rekweb-ku-0316-ismailaluwi-1212511008[1]

Kekurangan Foundation Template yang menggunakan foundation lebih berat

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

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.