SlideShare a Scribd company logo
1 of 9
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[1]) 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.
Berikut tujuan dibuatnya HTML5 :
 Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
 Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
 Penanagan kesalahan yang lebih baik
 Lebih markup untuk menggantikan scripting
 HTML5 merupakan perangkat mandiri
 Proses pembangunan dapat terlihat untuk umum
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, nav, section
 Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.

Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera.
Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5.
 Perbedaan-perbedaan dengan versi HTML sebelumnya
 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
yang fenomenal adalah 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 form
reversed pada elemen ol untuk urutan besar ke kecil.~ Perubahan makna elemen:
Elemen b dilegalkan sebagai tipografi penegas, seperti pada kata kunci yang ingin
ditonjolkan, tidak ‘deprecated’ (bukan fitur yang dianggap usang). Tidak lebih dari itu.
Jadi tetap tidak bermakna semantik tertentu. Hal yang sama berlaku pula untuk
elemen i
Elemen strong menegaskan level kepentingan, bukan sekadar penekanan emphasis
lagi
Elemen hr dapat digunakan untuk memisahkan level paragraf sesuai pokok pikirannya
dan lain-lain.~ Elemen dan atribut yang tidak digunakan:
center
font
strike, u, big
frame, frameset, noframes
acronym
longdesc
scope pada td
dan sebagainya.
 Contoh Web yang telah
mengimplementasikan HTML5 1
 Beberapa contoh website yang menggunakan
HTML 5, seperti dibawah ini:
 Adobe – The Expressive Web
 Orange Spocket
 Har Du Det I Deg
 HTC
 BeerCamp 2012
 Web Socket HTML5
a) HTML5 WebSocket, bringing socket to the
web
b) 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.
c) 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 2.1 memperlihatkan
arsitektur dasar berbasis WebSocket yang mana beberapa browser menggunakan
koneksi WebSocket untuk komunikasi langsung, dua arah dengan host remot.
i. Satu dari sekian banyak fitur unik yang disediakan WebSocket adalah kemampuannya
untuk melintasi proxy dan firewall, yang mana merupakan wilayah yang umumnya
bermasalah untuk kebanyakan aplikasi. Aplikasi berbasis Comet biasanya
menggunakan long-polling sebagai garis pertahanan yang belum sempurna untuk
mempertahankan diri dari firewall dan proxy. Teknik tersebut efektif, tapi tidak cocok bila
diterapkan untuk aplikasi yang memiliki latency dibawah 500 milidetik atau membutuhkan
haluan keluaran (Throughput) yang tinggi. Teknologi berbasis plugin seperti Adobe Flash,
juga menyediakan beberapa level dari dukungan socket, namun sejak lama telah
dibebani oleh masalah dengan kemampuannya untuk melewati proxy dan firewall yang
mana kini telah dipecahkan oleh WebSocket.
A. WebSocket mendeteksi kehadiran proxy server dan secara otomatis membuat
sebuah tunnel untuk dapat melewati proxy tersebut. Tunnel dibuat dengan cara
mengeluarkan sebuah pernyataan HTTP CONNECT kepada proxy server, yang mana
meminta proxy server untuk membuka koneksi TCP/IP ke host dan port spesifik.
Setelah tunnel selesai dibuat, komunikasi dapat mengalir dengan leluasa melalui proxy.
Karena HTTP/S juga bekerja dengan cara yang sama, secure WebSocket melalui SSL
juga dapat menggunakan teknik HTTP CONNECT yang sama.
B. WebSocket menggunakan standard protokol RFC6455 untuk handshake dan komunikasi
antara klien dan server. Web browser seperti Google Chrome untuk Android sepenuhnya
telah mendukung RFC6455 termasuk pesan biner.
 Beberapa contoh aplikasinya
WebSocket pada HTML5
 NodeJS adalah framework Javascript yang mengimplementasikan multiple WebSocket
Servers, dengan menggunakan server-side JavaScript dengan model asynchronous
event-driven. Hal tersebut memungkinkan Node.js memiliki performance terbaik untuk
mendukung arsitektur di semua aplikasi internet.
Felix Geisendörfer menjelaskan dengan sederhana apa itu NodeJS:
Sebuah command line tool. Anda mengunduh tarball, melakukan proses compile dan
install.
 Berkerja pada program Javascript dengan mengetikkan ‘node my_app.js’ di Terminal
Anda.
JS dieksekusi oleh V8 javascript engine (mesin yang membuat Google
Chrome berkerja cepat).
Node menyediakan sebuah JavaScript API untuk mengakses Network dan File System.
o Selain Node.js, ada beberapa pilihan Server WebSocket, antara lain:
a. jWebSocket (Java)
b. web socket Ruby (Ruby)
c. Socket IO-Node (NodeJS)
d. WebSocket-Node (Pure JS client & server implementation of the lastest draft-10)
e. Kaazing WebSocket Gateway (Java-based WebSocket Gateway)
f. mod_pyWebSocket (Python-based extension for the Apache HTTP Server)
g. Netty (Java network framework which includes WebSocket support)
h. wsproxy (WebSockets to generic TCP socket proxy)
i. websocket (Python)
j. websockify (Python, C, Node.js)
k. txWebSocket (Python/Twisted, hixie-76 handshake)
l. [plack socketio middleware] (Perl Rack/WSGI-like middleware)
Anda dapat menemukan contoh-contoh script untuk mengimplementasikan NodeJs
ataupun framework lainnya yang mendukung WebSocket, bahkan Anda bisa
memulainya dengan Native Script dari Websocket.org

More Related Content

What's hot

Tugas8 ku-0316-debbiemistikaweni-1412510982
Tugas8 ku-0316-debbiemistikaweni-1412510982Tugas8 ku-0316-debbiemistikaweni-1412510982
Tugas8 ku-0316-debbiemistikaweni-1412510982debbie95
 
Tugas8 rekweb ku 0316-1212511008 ismailaluwi
Tugas8 rekweb ku 0316-1212511008 ismailaluwiTugas8 rekweb ku 0316-1212511008 ismailaluwi
Tugas8 rekweb ku 0316-1212511008 ismailaluwiISMAIL ALUWI
 
Tugas 8 Rekayasa Web 0316
Tugas 8 Rekayasa Web 0316Tugas 8 Rekayasa Web 0316
Tugas 8 Rekayasa Web 0316sapatati
 
Tugas 1 rekayasa web 1412511519 - andhika desta permana
Tugas 1 rekayasa web   1412511519 - andhika desta permanaTugas 1 rekayasa web   1412511519 - andhika desta permana
Tugas 1 rekayasa web 1412511519 - andhika desta permanaAndhika Desta Permana
 
Makalah html5
Makalah html5Makalah html5
Makalah html5argud
 
Makalah internet dan html
Makalah internet dan htmlMakalah internet dan html
Makalah internet dan htmlShinta Ta'Cuco
 
Pengenalan web design dan programming
Pengenalan web design dan programmingPengenalan web design dan programming
Pengenalan web design dan programmingFrisianlllllllFlag
 

What's hot (18)

Tugas 8 rekweb
Tugas 8   rekwebTugas 8   rekweb
Tugas 8 rekweb
 
Tugas 8 rekayasa web
Tugas 8   rekayasa webTugas 8   rekayasa web
Tugas 8 rekayasa web
 
Html 5
Html 5Html 5
Html 5
 
Tugas8 ku-0316-debbiemistikaweni-1412510982
Tugas8 ku-0316-debbiemistikaweni-1412510982Tugas8 ku-0316-debbiemistikaweni-1412510982
Tugas8 ku-0316-debbiemistikaweni-1412510982
 
Tugas 8 – rekayasa web
Tugas 8 – rekayasa webTugas 8 – rekayasa web
Tugas 8 – rekayasa web
 
Tugas8 rekweb ku 0316-1212511008 ismailaluwi
Tugas8 rekweb ku 0316-1212511008 ismailaluwiTugas8 rekweb ku 0316-1212511008 ismailaluwi
Tugas8 rekweb ku 0316-1212511008 ismailaluwi
 
Tugas 8
Tugas 8Tugas 8
Tugas 8
 
PPT HTML5
PPT HTML5PPT HTML5
PPT HTML5
 
Tugas 8 Rekayasa Web 0316
Tugas 8 Rekayasa Web 0316Tugas 8 Rekayasa Web 0316
Tugas 8 Rekayasa Web 0316
 
Pbw week 01 basics
Pbw week 01   basicsPbw week 01   basics
Pbw week 01 basics
 
Makalah html 5
Makalah html 5Makalah html 5
Makalah html 5
 
Html to-blog
Html to-blogHtml to-blog
Html to-blog
 
Tugas01
Tugas01Tugas01
Tugas01
 
Tugas 1 rekayasa web 1412511519 - andhika desta permana
Tugas 1 rekayasa web   1412511519 - andhika desta permanaTugas 1 rekayasa web   1412511519 - andhika desta permana
Tugas 1 rekayasa web 1412511519 - andhika desta permana
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Laporan tugas besar website_PBW
Laporan tugas besar website_PBWLaporan tugas besar website_PBW
Laporan tugas besar website_PBW
 
Makalah internet dan html
Makalah internet dan htmlMakalah internet dan html
Makalah internet dan html
 
Pengenalan web design dan programming
Pengenalan web design dan programmingPengenalan web design dan programming
Pengenalan web design dan programming
 

Viewers also liked

Оптимизация технологий санаторно-курортного лечения с использованием полифено...
Оптимизация технологий санаторно-курортного лечения с использованием полифено...Оптимизация технологий санаторно-курортного лечения с использованием полифено...
Оптимизация технологий санаторно-курортного лечения с использованием полифено...Александр Ст
 
Práctica google docs
Práctica google docsPráctica google docs
Práctica google docsynunnez
 
Teen girls and technology
Teen girls and technologyTeen girls and technology
Teen girls and technologyapeck1976
 
Интеграция научных разработок для создания современных медицинских технологий...
Интеграция научных разработок для создания современных медицинских технологий...Интеграция научных разработок для создания современных медицинских технологий...
Интеграция научных разработок для создания современных медицинских технологий...Александр Ст
 
Ventajas y desventajas del uso del internet en la educación universitaria Ecu...
Ventajas y desventajas del uso del internet en la educación universitaria Ecu...Ventajas y desventajas del uso del internet en la educación universitaria Ecu...
Ventajas y desventajas del uso del internet en la educación universitaria Ecu...Genesis Bagua
 
Nutritional benefits of smoothies
Nutritional benefits of smoothiesNutritional benefits of smoothies
Nutritional benefits of smoothiesSteve Saffhill
 
Diapositivas componentes de_un_ordenador
Diapositivas componentes de_un_ordenadorDiapositivas componentes de_un_ordenador
Diapositivas componentes de_un_ordenadorlamariazoraida
 

Viewers also liked (12)

Planificacion 1
Planificacion 1Planificacion 1
Planificacion 1
 
Оптимизация технологий санаторно-курортного лечения с использованием полифено...
Оптимизация технологий санаторно-курортного лечения с использованием полифено...Оптимизация технологий санаторно-курортного лечения с использованием полифено...
Оптимизация технологий санаторно-курортного лечения с использованием полифено...
 
Práctica google docs
Práctica google docsPráctica google docs
Práctica google docs
 
Teen girls and technology
Teen girls and technologyTeen girls and technology
Teen girls and technology
 
Windows 8
Windows 8Windows 8
Windows 8
 
Интеграция научных разработок для создания современных медицинских технологий...
Интеграция научных разработок для создания современных медицинских технологий...Интеграция научных разработок для создания современных медицинских технологий...
Интеграция научных разработок для создания современных медицинских технологий...
 
Ventajas y desventajas del uso del internet en la educación universitaria Ecu...
Ventajas y desventajas del uso del internet en la educación universitaria Ecu...Ventajas y desventajas del uso del internet en la educación universitaria Ecu...
Ventajas y desventajas del uso del internet en la educación universitaria Ecu...
 
Nutritional benefits of smoothies
Nutritional benefits of smoothiesNutritional benefits of smoothies
Nutritional benefits of smoothies
 
Diapositivas componentes de_un_ordenador
Diapositivas componentes de_un_ordenadorDiapositivas componentes de_un_ordenador
Diapositivas componentes de_un_ordenador
 
Innovacion en femenino
Innovacion en femeninoInnovacion en femenino
Innovacion en femenino
 
Mesopotâmia
MesopotâmiaMesopotâmia
Mesopotâmia
 
394 (1)
394 (1)394 (1)
394 (1)
 

Similar to Tugas 8 rekayasa web 1312510231 rostarina

Similar to Tugas 8 rekayasa web 1312510231 rostarina (18)

Ppt html5
Ppt html5Ppt html5
Ppt html5
 
Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt
 
Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt
 
02 Teknologi Web
02 Teknologi Web02 Teknologi Web
02 Teknologi Web
 
Html 5
Html 5Html 5
Html 5
 
HTML5
HTML5HTML5
HTML5
 
Ppt html5
Ppt html5Ppt html5
Ppt html5
 
Ppt html5 rully_amrizal_1102412020
Ppt html5 rully_amrizal_1102412020Ppt html5 rully_amrizal_1102412020
Ppt html5 rully_amrizal_1102412020
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Ristianawati 2114 r0800 html5
Ristianawati 2114 r0800 html5Ristianawati 2114 r0800 html5
Ristianawati 2114 r0800 html5
 
Makalah html
Makalah htmlMakalah html
Makalah html
 
Html power point
Html power pointHtml power point
Html power point
 
Choirul vbnet-01
Choirul vbnet-01Choirul vbnet-01
Choirul vbnet-01
 
Tugas 6 rekayasa web
Tugas 6 rekayasa webTugas 6 rekayasa web
Tugas 6 rekayasa web
 
storyboard pemrograman web.pptx
storyboard pemrograman web.pptxstoryboard pemrograman web.pptx
storyboard pemrograman web.pptx
 
1989249
19892491989249
1989249
 
Html5
Html5 Html5
Html5
 

More from osta92

Tugas 7 rekayasa web 1312510231 Rostarina
Tugas 7 rekayasa web 1312510231 RostarinaTugas 7 rekayasa web 1312510231 Rostarina
Tugas 7 rekayasa web 1312510231 Rostarinaosta92
 
Tugas 6 rekayasa web 1312510231 rostarina
Tugas 6 rekayasa web 1312510231 rostarinaTugas 6 rekayasa web 1312510231 rostarina
Tugas 6 rekayasa web 1312510231 rostarinaosta92
 
Tugas 5 rekayasa web
Tugas 5 rekayasa webTugas 5 rekayasa web
Tugas 5 rekayasa webosta92
 
Tugas 4 rekayasa web 1312510231 rostarina.h
Tugas 4 rekayasa web 1312510231 rostarina.hTugas 4 rekayasa web 1312510231 rostarina.h
Tugas 4 rekayasa web 1312510231 rostarina.hosta92
 
Tugas 3 rekayas web 1312510231 rostarina
Tugas 3 rekayas web 1312510231 rostarinaTugas 3 rekayas web 1312510231 rostarina
Tugas 3 rekayas web 1312510231 rostarinaosta92
 
Tugas rekayasa web 2_1312510231 _Rostarina.H._KI
Tugas rekayasa web 2_1312510231 _Rostarina.H._KITugas rekayasa web 2_1312510231 _Rostarina.H._KI
Tugas rekayasa web 2_1312510231 _Rostarina.H._KIosta92
 
Tugas Rekayasa Web 0316
Tugas Rekayasa Web 0316Tugas Rekayasa Web 0316
Tugas Rekayasa Web 0316osta92
 

More from osta92 (7)

Tugas 7 rekayasa web 1312510231 Rostarina
Tugas 7 rekayasa web 1312510231 RostarinaTugas 7 rekayasa web 1312510231 Rostarina
Tugas 7 rekayasa web 1312510231 Rostarina
 
Tugas 6 rekayasa web 1312510231 rostarina
Tugas 6 rekayasa web 1312510231 rostarinaTugas 6 rekayasa web 1312510231 rostarina
Tugas 6 rekayasa web 1312510231 rostarina
 
Tugas 5 rekayasa web
Tugas 5 rekayasa webTugas 5 rekayasa web
Tugas 5 rekayasa web
 
Tugas 4 rekayasa web 1312510231 rostarina.h
Tugas 4 rekayasa web 1312510231 rostarina.hTugas 4 rekayasa web 1312510231 rostarina.h
Tugas 4 rekayasa web 1312510231 rostarina.h
 
Tugas 3 rekayas web 1312510231 rostarina
Tugas 3 rekayas web 1312510231 rostarinaTugas 3 rekayas web 1312510231 rostarina
Tugas 3 rekayas web 1312510231 rostarina
 
Tugas rekayasa web 2_1312510231 _Rostarina.H._KI
Tugas rekayasa web 2_1312510231 _Rostarina.H._KITugas rekayasa web 2_1312510231 _Rostarina.H._KI
Tugas rekayasa web 2_1312510231 _Rostarina.H._KI
 
Tugas Rekayasa Web 0316
Tugas Rekayasa Web 0316Tugas Rekayasa Web 0316
Tugas Rekayasa Web 0316
 

Recently uploaded

Modul 1.2.a.8 Koneksi antar materi 1.2.pdf
Modul 1.2.a.8 Koneksi antar materi 1.2.pdfModul 1.2.a.8 Koneksi antar materi 1.2.pdf
Modul 1.2.a.8 Koneksi antar materi 1.2.pdfSitiJulaeha820399
 
Lembar Observasi Pembelajaran di Kelas.docx
Lembar Observasi Pembelajaran di  Kelas.docxLembar Observasi Pembelajaran di  Kelas.docx
Lembar Observasi Pembelajaran di Kelas.docxbkandrisaputra
 
AKSI NYATA NARKOBA ATAU OBAT TERLARANG..
AKSI NYATA NARKOBA ATAU OBAT TERLARANG..AKSI NYATA NARKOBA ATAU OBAT TERLARANG..
AKSI NYATA NARKOBA ATAU OBAT TERLARANG..ikayogakinasih12
 
Aksi Nyata Modul 1.1 Calon Guru Penggerak
Aksi Nyata Modul 1.1 Calon Guru PenggerakAksi Nyata Modul 1.1 Calon Guru Penggerak
Aksi Nyata Modul 1.1 Calon Guru Penggeraksupriadi611
 
PPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptxPPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptxnerow98
 
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptxKONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptxawaldarmawan3
 
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdfTUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdfElaAditya
 
Materi Pertemuan Materi Pertemuan 7.pptx
Materi Pertemuan Materi Pertemuan 7.pptxMateri Pertemuan Materi Pertemuan 7.pptx
Materi Pertemuan Materi Pertemuan 7.pptxRezaWahyuni6
 
tugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SDtugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SDmawan5982
 
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptxBAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptxJamhuriIshak
 
Tugas 1 ABK di SD prodi pendidikan guru sekolah dasar.docx
Tugas 1 ABK di SD prodi pendidikan guru sekolah dasar.docxTugas 1 ABK di SD prodi pendidikan guru sekolah dasar.docx
Tugas 1 ABK di SD prodi pendidikan guru sekolah dasar.docxmawan5982
 
Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5KIKI TRISNA MUKTI
 
Dampak Pendudukan Jepang.pptx indonesia1
Dampak Pendudukan Jepang.pptx indonesia1Dampak Pendudukan Jepang.pptx indonesia1
Dampak Pendudukan Jepang.pptx indonesia1udin100
 
Perumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxPerumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxadimulianta1
 
Kelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfKelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfCloverash1
 
Aksi nyata Malaikat Kebaikan [Guru].pptx
Aksi nyata Malaikat Kebaikan [Guru].pptxAksi nyata Malaikat Kebaikan [Guru].pptx
Aksi nyata Malaikat Kebaikan [Guru].pptxsdn3jatiblora
 
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptxRefleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptxIrfanAudah1
 
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5ssuserd52993
 
11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptx
11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptx11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptx
11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptxMiftahunnajahTVIBS
 
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdf
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdfBab 6 Kreatif Mengungap Rasa dan Realitas.pdf
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdfbibizaenab
 

Recently uploaded (20)

Modul 1.2.a.8 Koneksi antar materi 1.2.pdf
Modul 1.2.a.8 Koneksi antar materi 1.2.pdfModul 1.2.a.8 Koneksi antar materi 1.2.pdf
Modul 1.2.a.8 Koneksi antar materi 1.2.pdf
 
Lembar Observasi Pembelajaran di Kelas.docx
Lembar Observasi Pembelajaran di  Kelas.docxLembar Observasi Pembelajaran di  Kelas.docx
Lembar Observasi Pembelajaran di Kelas.docx
 
AKSI NYATA NARKOBA ATAU OBAT TERLARANG..
AKSI NYATA NARKOBA ATAU OBAT TERLARANG..AKSI NYATA NARKOBA ATAU OBAT TERLARANG..
AKSI NYATA NARKOBA ATAU OBAT TERLARANG..
 
Aksi Nyata Modul 1.1 Calon Guru Penggerak
Aksi Nyata Modul 1.1 Calon Guru PenggerakAksi Nyata Modul 1.1 Calon Guru Penggerak
Aksi Nyata Modul 1.1 Calon Guru Penggerak
 
PPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptxPPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptx
 
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptxKONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
 
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdfTUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
 
Materi Pertemuan Materi Pertemuan 7.pptx
Materi Pertemuan Materi Pertemuan 7.pptxMateri Pertemuan Materi Pertemuan 7.pptx
Materi Pertemuan Materi Pertemuan 7.pptx
 
tugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SDtugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SD
 
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptxBAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
 
Tugas 1 ABK di SD prodi pendidikan guru sekolah dasar.docx
Tugas 1 ABK di SD prodi pendidikan guru sekolah dasar.docxTugas 1 ABK di SD prodi pendidikan guru sekolah dasar.docx
Tugas 1 ABK di SD prodi pendidikan guru sekolah dasar.docx
 
Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5
 
Dampak Pendudukan Jepang.pptx indonesia1
Dampak Pendudukan Jepang.pptx indonesia1Dampak Pendudukan Jepang.pptx indonesia1
Dampak Pendudukan Jepang.pptx indonesia1
 
Perumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxPerumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptx
 
Kelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfKelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdf
 
Aksi nyata Malaikat Kebaikan [Guru].pptx
Aksi nyata Malaikat Kebaikan [Guru].pptxAksi nyata Malaikat Kebaikan [Guru].pptx
Aksi nyata Malaikat Kebaikan [Guru].pptx
 
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptxRefleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
 
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
 
11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptx
11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptx11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptx
11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptx
 
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdf
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdfBab 6 Kreatif Mengungap Rasa dan Realitas.pdf
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdf
 

Tugas 8 rekayasa web 1312510231 rostarina

  • 1.
  • 2. 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[1]) 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. Berikut tujuan dibuatnya HTML5 :  Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript  Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )  Penanagan kesalahan yang lebih baik  Lebih markup untuk menggantikan scripting  HTML5 merupakan perangkat mandiri  Proses pembangunan dapat terlihat untuk umum 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, nav, section  Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.  Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5.
  • 3.  Perbedaan-perbedaan dengan versi HTML sebelumnya  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 yang fenomenal adalah 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 form reversed pada elemen ol untuk urutan besar ke kecil.~ Perubahan makna elemen: Elemen b dilegalkan sebagai tipografi penegas, seperti pada kata kunci yang ingin ditonjolkan, tidak ‘deprecated’ (bukan fitur yang dianggap usang). Tidak lebih dari itu. Jadi tetap tidak bermakna semantik tertentu. Hal yang sama berlaku pula untuk elemen i Elemen strong menegaskan level kepentingan, bukan sekadar penekanan emphasis lagi Elemen hr dapat digunakan untuk memisahkan level paragraf sesuai pokok pikirannya dan lain-lain.~ Elemen dan atribut yang tidak digunakan: center font strike, u, big frame, frameset, noframes acronym longdesc scope pada td dan sebagainya.
  • 4.  Contoh Web yang telah mengimplementasikan HTML5 1  Beberapa contoh website yang menggunakan HTML 5, seperti dibawah ini:  Adobe – The Expressive Web  Orange Spocket  Har Du Det I Deg  HTC  BeerCamp 2012
  • 5.  Web Socket HTML5 a) HTML5 WebSocket, bringing socket to the web b) 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. c) 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.
  • 6. 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 2.1 memperlihatkan arsitektur dasar berbasis WebSocket yang mana beberapa browser menggunakan koneksi WebSocket untuk komunikasi langsung, dua arah dengan host remot.
  • 7. i. Satu dari sekian banyak fitur unik yang disediakan WebSocket adalah kemampuannya untuk melintasi proxy dan firewall, yang mana merupakan wilayah yang umumnya bermasalah untuk kebanyakan aplikasi. Aplikasi berbasis Comet biasanya menggunakan long-polling sebagai garis pertahanan yang belum sempurna untuk mempertahankan diri dari firewall dan proxy. Teknik tersebut efektif, tapi tidak cocok bila diterapkan untuk aplikasi yang memiliki latency dibawah 500 milidetik atau membutuhkan haluan keluaran (Throughput) yang tinggi. Teknologi berbasis plugin seperti Adobe Flash, juga menyediakan beberapa level dari dukungan socket, namun sejak lama telah dibebani oleh masalah dengan kemampuannya untuk melewati proxy dan firewall yang mana kini telah dipecahkan oleh WebSocket. A. WebSocket mendeteksi kehadiran proxy server dan secara otomatis membuat sebuah tunnel untuk dapat melewati proxy tersebut. Tunnel dibuat dengan cara mengeluarkan sebuah pernyataan HTTP CONNECT kepada proxy server, yang mana meminta proxy server untuk membuka koneksi TCP/IP ke host dan port spesifik. Setelah tunnel selesai dibuat, komunikasi dapat mengalir dengan leluasa melalui proxy. Karena HTTP/S juga bekerja dengan cara yang sama, secure WebSocket melalui SSL juga dapat menggunakan teknik HTTP CONNECT yang sama. B. WebSocket menggunakan standard protokol RFC6455 untuk handshake dan komunikasi antara klien dan server. Web browser seperti Google Chrome untuk Android sepenuhnya telah mendukung RFC6455 termasuk pesan biner.
  • 8.  Beberapa contoh aplikasinya WebSocket pada HTML5  NodeJS adalah framework Javascript yang mengimplementasikan multiple WebSocket Servers, dengan menggunakan server-side JavaScript dengan model asynchronous event-driven. Hal tersebut memungkinkan Node.js memiliki performance terbaik untuk mendukung arsitektur di semua aplikasi internet. Felix Geisendörfer menjelaskan dengan sederhana apa itu NodeJS: Sebuah command line tool. Anda mengunduh tarball, melakukan proses compile dan install.  Berkerja pada program Javascript dengan mengetikkan ‘node my_app.js’ di Terminal Anda. JS dieksekusi oleh V8 javascript engine (mesin yang membuat Google Chrome berkerja cepat). Node menyediakan sebuah JavaScript API untuk mengakses Network dan File System.
  • 9. o Selain Node.js, ada beberapa pilihan Server WebSocket, antara lain: a. jWebSocket (Java) b. web socket Ruby (Ruby) c. Socket IO-Node (NodeJS) d. WebSocket-Node (Pure JS client & server implementation of the lastest draft-10) e. Kaazing WebSocket Gateway (Java-based WebSocket Gateway) f. mod_pyWebSocket (Python-based extension for the Apache HTTP Server) g. Netty (Java network framework which includes WebSocket support) h. wsproxy (WebSockets to generic TCP socket proxy) i. websocket (Python) j. websockify (Python, C, Node.js) k. txWebSocket (Python/Twisted, hixie-76 handshake) l. [plack socketio middleware] (Perl Rack/WSGI-like middleware) Anda dapat menemukan contoh-contoh script untuk mengimplementasikan NodeJs ataupun framework lainnya yang mendukung WebSocket, bahkan Anda bisa memulainya dengan Native Script dari Websocket.org