tugas 6 rekayasa web

13
TUGAS 6 REKAYASA WEB IKA SULISTIYANI - 1412510529

Upload: ikasulistiyani

Post on 15-Apr-2017

87 views

Category:

Internet


0 download

TRANSCRIPT

Page 1: Tugas 6 rekayasa web

TUGAS 6 REKAYASA WEB

IKA SULISTIYANI - 1412510529

Page 2: Tugas 6 rekayasa web

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

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 komputer meja. Dengan metode ini, web akan beradaptasi jika dibuka dari perangkat mobile berukuran kecil maupun perangkat komputer meja 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 meja.

Page 3: Tugas 6 rekayasa web

Contoh web dengan karakter Responsive Web Design

Page 4: Tugas 6 rekayasa web

Contoh web dengan karakter Responsive Web Design

Page 5: Tugas 6 rekayasa web

Contoh web dengan karakter Responsive Web Design

Page 6: Tugas 6 rekayasa web

2. Bandingkan beberapa contoh framework yang telah mengimplementasikan Responsive web design, seperti Bootstrap, Foundation, dll !Framework adalah kumpulan dari fungsi-fungsi/prosedur-prosedur dan class-class untuk tujuan tertentu yang sudah siap digunakan. Sehingga bisa mempermudah dan mempercepat pekerjaan seorang programmer, tanpa harus membuat fungsi atau class dari awal. Jadi, dengan adanya framework, pekerjaan kita akan lebih tertata dan terorganisir. Sehingga dalam pencarian kesalahan dalam pembuatan program akan lebih mudah dideteksi. Intinya, framework merupakan pondasi awal kita sebelum menentukan memakai bahasa pemrograman apa yang akan kita pakai. Setelah kita menentukan mau pakai framework apa, baru kita bangun programnya diatas framework itu.

Page 7: Tugas 6 rekayasa web

Contoh framework yang telah mengimplementasikan Responsive web design, seperti Bootstrap, Foundation, dll !

1. Bootstrap 

Twitter Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.

Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun menggunakan JavaScript.

Page 8: Tugas 6 rekayasa web

Kelebihan BootstrapKelebihan dari menggunakan Bootstrap adalah kerangka ini dibangun menggunakan Less, sebuah teknologi CSS yang sederhana dan mudah untuk digunakan. Less juga menawarkan lebih banyak kekuatan dan fleksibilitas dari CSS pada umumnya. Dengan Less, pengembang dapat mengakses dengan mudah informasi dan fungsi warna, variabel, dan operasi penggunaan. 

Kekurangan BootstrapSalah satu kemampuan bootstrap adalah minim gambar karena memanfaatkan CSS3, namun disisi itu pula kekurangan dari bootstrap, CSS3 yang dikembangkan twitter dan yang lain, belum mampu menghasilkan tampilan yang seragam di berbagai peramban halaman web.

Page 9: Tugas 6 rekayasa web

Bootstrap

Page 10: Tugas 6 rekayasa web

2. Foundation 

Foundation merupakan framework front-end responsive terpopuler lainnya. Dengan framework HTML5 yang modern ini, Anda dapat mendekati desain web juga untuk mobile, atau menampilkan dari ukuran layar besar ke ukuran mobile.

Foundation ini bisa dipergunakan untuk situs yang responsive, email dan aplikasi sehingga terlihat begitu menakjubkan pada setiap perangkat. Sehingga foundation ini dapat dijadikan pilihan yang profesional bagi desainer, developer dan dikerjakan secara tim.

Page 11: Tugas 6 rekayasa web

Foundation

Page 12: Tugas 6 rekayasa web

3. HTML5

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web.

Page 13: Tugas 6 rekayasa web

Kelebihan dan kekurangan HTML 5

Beberapa kelebihan yang dijanjikan pada HTML 5:- Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML.- Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya.- Integrasi (’inline’) MathML dan SVG dengan doctype yang lebih sederhana.- Penulisan kode yang lebih efisien.- Dapat dimengerti oleh peramban lawas (backwards compatible). Sehingga istilah ‘deprecated’ tidak akan diperlukan lagi.

Yang masih diperdebatkan dalam pengembangan HTML 5:- Makna semantik beberapa elemen presentasioal.- Fitur aksesibilitasnya. Seperti atribut alt dan summary