Tugas 8 rekayasa web
16
TUGAS 8 - REKAYASA WEB IKA SULISTIYANI – KI - 0316 1412510629
-
Upload
ikasulistiyani -
Category
Design
-
view
60 -
download
0
Transcript of Tugas 8 rekayasa web
TUGAS 8 - REKAYASA WEB
IKA SULISTIYANI – KI - 03161412510629
1. Jelaskan mengenai HTML5 ! Berikan perbedaan-perbedaan dengan versi HTML sebelumnya dan berikan contoh web yang telah mengimplementasikan HTML5 1.Pengertian HTML 5
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.
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.
HTML5 adalah versi terbaru dari HTML (HyperText Markup Language) yang mana dikembangkan oleh W3C atau Word Wide Web Consortium. Semantic web adalah bahasa pemrograman yang mempunyai penanda khusus dalam implementasinya dengan tujuan agar mampu mendeskripsikan apa yang terkandung dalam website tersebut. Web semantic ini bukan hanya dikembangkan di Web 2.0, namun sudah ke Web 3.0 bahkan akan berkembang ke Web 4.0.
Tujuan dibuatnya HTML5 antara lain:
Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript. Mengurangi kebutuhan untuk plugin eksternal (seperti Flash). Penanganan kesalahan yang lebih baik. Lebih banyak markup untuk menggantikan scripting. HTML5 merupakan perangkat mandiri.
Fitur baru dalam HTML5:
Unsur kanvas untuk menggambar. Video dan elemen audio untuk media pemutaran. Dukungan yang lebih baik untuk penyimpanan secara offline. Elemen konten yang lebih spesifik, seperti artikel, footer, header,
navigation, section. Bentuk kontrol form seperti kalender, tanggal, waktu, e-mail, URL, search.
Kelebihan yang dimiliki HTML 5 :
Fitur kanvas untuk menggambar menggunakan script code Fitur video dan audio untuk media pemutar file multimedia Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya Integrasi (‘inline’) dengan doctype yang lebih sederhana Penulisan kode yang lebih efisien Penanagan kesalahan yang lebih baik Mengurangi kebutuhan untuk plugin eksternal Lebih markup untuk menggantikan scripting Tag Baru seperti header, footer, nav, section, asidedll memungkinkan browser untuk
mengakses konten dengan mudah. Sebelumnya, kita hanya menentukan hal tersebut dengan tag dan menggunakan atribut id ataupun class.
Kekurangan yang dimiliki HTML 5 :
Saat ini HTML5 masih dalam pengembangan, sehingga hanya beberapa browser yang sudah mendukung HTML5, seperti fitur-fitur pada HTML 5 tidak semuanya bisa berfungsi dengan baik pada beberapa browser. Beberapa browser yang sudah mendukung HTML 5 seperti Safari, Chrome, Firefox, dan Opera. Namun kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5.
Fitur keamanan yang ditawarkan HTML5 masih terbatas
Perbedaan HTML 5 dengan versi sebelumnya adalah
Penulisan doctipe pada HTML5 lebih sederhana. Penulisan Doctype atauDTD pada HTML5 menjadi lebih sederhana: <!DOCTYPE html>.
Penulisan type atribut untuk tag <style> dan <script> tidak diperlukan pada HTML5. Penulisan meta tag karakter set (charset) pada HTML5 menjadi lebih
sederhana: <meta charset=”utf-8″>, dibandingkan versi sebelumnya: <meta http-equiv=”content-type” content=”text/html;charset=UTF-8″ />.
Pada HTML5, tag yang berdiri sendiri (void element) tidak harus ditutup seperti dalam XHTML. Penulisan tag <br> (break) dapat ditulis dengan <br> maupun <br />.
Walaupun tidak dianjurkan, sebuah tag pada HTML5 boleh ditulis tanpa tag awal atau tanpa tag akhir. Sebagai contoh, kita tidak perlu menutup tag <p> dengan tag </p>.
Penulisan tag dan atribut adalah case-insensitive di dalam HTML5, sehingga tag <p> dan tag<P> akan dianggap sama. Hal ini berbeda dengan XHTML yang mengharuskan seluruh tag ditulis dalam huruf kecil.
Penulisan atribut tidak harus di dalam tanda kutip. Sebagai contoh: <p class=satu> adalah valid. Jika nilai atribut terdiri dari karakter spasi, maka tetap harus menggunakan tanda kutip, seperti: <p class=”satu dua tiga”>.
HTML5 mendukung multimedia secara langsung menggunakan tag <audio> dan <video>, sehingga kita tidak perlu tergantung kepada aplikasi pihak ke-3 seperti flash player.
HTML 5 hanya memiliki 1 versi, tidak seperti pendahulunya yang memiliki 3 versi (pada HTML 4 dan XHTML, anda akan menemukan versi strict, transitional, dan frameset).
Penambahan elemen baru:
Section serupa seperti h1-h6 Article bisa berupa entri blog atau tulisan konten Aside menyajikan konten pelengkap header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat
digunakan untuk menyajikan percakapan Penggunaan elemen figure, video, audio, source, embed, canvas, dan elemen terkait
berkas multimedia lainnya.
Penambahan atribut baru:
atribut media, ping pada elemen pranala autofocus, placeholder, required, autocomplete, dan sebagainya, terkait elemen input
dan formreversed pada elemen ol untuk urutan besar ke kecil.
Contoh web yang telah mengimplementasikan HTML5 :1. Robby Leonardi (http://www.rleonardi.com/interactive-resume/)
Robby Leonardi adalah desainer yang berbasis di New York City. Dia mengkhususkan diri dalam bidang ilustrasi, desain grafis, animasi, dan web design. Website Portfolionya ini sangat atraktif, seperti seolah-olah kita sedang bermain game supermario.
Contoh web yang telah mengimplementasikan HTML5 :2. Lizzie Seymour (http://lizz.es/)
Lizzie Seymour adalah seorang desainer yang suka mencoba-coba dalam membuat desain karakter, ilustrasi, coding, dan animasi. Website Portfolio ini dibuat dengan tema dan karakter yang lucu.
Contoh web yang telah mengimplementasikan HTML5 :3. Bjorn meier (http://bjoernmeier.com/)
Desain indah minimalis dan mudah dinavigasi menjadikan Portfolio dari Bjorn Meier ini menarik untuk dilihat.
Contoh web yang telah mengimplementasikan HTML5 :4. Stereo Creative (http://stereocreative.com/)
Stereo Creative adalah jasa yang menyediakan layanan membuat sebuah brand atau logo perusahaan.
2. Apa yang anda ketahui tentang WebSocket pada HTML5, berikan contoh applikasinya !
WebSocket adalah standar baru untuk komunikasi realtime pada Web dan aplikasi mobile. WebSocket dirancang untuk diterapkan di browser web dan server web, tetapi dapat digunakan oleh aplikasi client atau server.
WebSocket adalah protokol yang menyediakan saluran komunikasi full-duplex melalui koneksi TCP tunggal. Protokol WebSocket sudah di standarisasi oleh IETF sebagai RFC 6455 pada tahun 2011, dan API WebSocket di Web IDL sedang distandarisasi oleh W3C.
Pada spesifikasinya, WebSocket didefinisikan sebagai sebuah Application Programming Interfaces (API) yang membuat koneksi "socket" antara web browser dan server. Dalam kata polos: Ada sebuah koneksi tetap antara klien dan server, dan kedua pihak dapat memulai mengirim data kapan saja.
WebSocket merupakan bagian dari HTML5. WebSocket menghadirkan pengurangan besar dalam lalu-lintas jaringan yang tidak penting dan latency dibandingkan dengan solusi polling dan long-polling yang telah digunakan untuk mensimulasikan koneksi dua arah dengan cara menjaga dua koneksi tetap terhubung.
HTML5 WebSocket memperhitungkan bahaya jaringan seperti proxy dan firewall, sehingga memungkinkan streamingmelalui koneksi apapun, dan dengan kemampuan untuk mendukung komunikasi hulu dan hilir melalui koneksi tunggal, aplikasi berbasis WebSocket mengurangi beban pada server, memungkinkan mesin yang telah ada untuk mendukung banyak koneksi yang berbarengan. Gambar diatas memperlihatkan arsitektur dasar berbasis WebSocket yang mana beberapa browser menggunakan koneksi WebSocket untuk komunikasi langsung, dua arah dengan host remot.
Manfaat WebSocket :
1. Websocket memungkinkan server untuk mendorong data kepada klien yang terhubung
2. Mengurangi traffic atau lalu lintas jaringan yang tidak perlu dan latency menggunakan full duplex melalui koneksi tunggal (bukan dua).
3. Streaming melalui proxy dan firewall, mendukung komunikasi simultan hulu dan hilir.4. Kompatibel dengan pre-WebSocket dunia dengan cara beralih dari koneksi HTTP ke
WebSockets.
Cara Kerja Websocket.
Cara kerja aplikasi yang menggunakan TCP.
Detail dari proses tersebut adalah :1. Untuk bisa melakukan koneksi client server, program server harus
berjalan terlebih dahulu2. Di sisi server disediakan sebuah socket, yang disebut welcoming socket yang
fungsinya untuk mendeteksi adanya permintaan koneksi dari sisi client. 3. Di sisi client terdapat client socket. Jika ingin menghubungi server,
maka melalui client socket-nya, client membuat inisialisai koneksi ke welcoming socket milik server, dengan mode three-way handshake.
4. Setelah welcoming socket menerima inisialisasi koneksi dari client socket, aplikasi server akan membuat connection socket di sisi server. Dengan connection socket ini, client socket dan connection socket berinteraksi satu sama lain untuk mengirim dan menerima data.
5. Client membaca data yang dikirim oleh server dari client socket-nya. Kemudian menampilkan data tersebut di monitor.
Cara Kerja Websocket.
Cara kerja Pemrograman Socket Menggunakan UDP.
Contoh aplikasi untuk UDP socket berikut ini menggunakan kasus yang sama dengan kasus yang digunakan oleh TCP socket, yaitu :
1. Client membaca inputan dari keyboard, kemudian mengirimkan hasilnya ke server melalui socket-nya.
2. Server membaca data yang dikirim oleh client di connection socket3. Server mengubah data menjadi huruf besar4. Server mengirimkan data yang telah diubah menuju client melalui socket-
nya.5. Client membaca data yang dikirim oleh server dari client socket-
nya. Kemudian menampilkan data tersebut di monitor.
Perbedaan utama antara aplikasi berbasis TCP dengan aplikasi berbasis UDP adalah di aplikasi UDP tidak ada welcoming socket. Pada UDP tidak ada socket khusus untuk permintaan inisialisai koneksi. Setiap data yang datang ditangani lansung oleh server socket.
Adapun beberapa contoh komponen server untuk WebSocket yaitu:
1. Socket.IO (Javascript)2. SignalR (.Net)3. Jetty (JVM)4. Event Machine (Ruby)5. Tornado (Python)
Bahasa yang disebutkan pada daftar di atas adalah bahasa yang digunakan pada sisi server.
