24
FAJAR SATRIO HTML5 1102412060 TEKNOLOGI INFORMASI DAN KOMUNIKASI ROMBEL 3

Fajar satrio Html5

Embed Size (px)

DESCRIPTION

info tentang html5

Citation preview

Page 1: Fajar satrio Html5

FAJAR SATRIOHTML5

1102412060

TEKNOLOGIINFORMASI DAN KOMUNIKASI

ROMBEL 3

Page 2: Fajar satrio Html5

Sejarah HTML5Kelompok Kerja Teknologi Aplikasi Web Hyperteks (Web

Hypertext Application Technology Working Group, WHATWG) mulai menjalankan standar baru ini pada tahun 2004 ketika Konsortium W3C sedang fokus dalam pengembangan XHTML 2.0 di masa depan, sementara HTML 4.01 belum pernah diperbarui sejak tahun 2000. Sejak tahun 2009, W3C dan WHATWG bekerja sama dalam pengembangan HTML5 setelah W3C mengakhiri Kelompok Kerja Pengembangan XHTML 2.0.

Meskipun HTML5 sudah dikenal luas oleh para pengembang web sejak lama, HTML5 baru muncul sebagai primadona pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengungkapkan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi sebagai media untuk menyaksikan video atau menyaksikan konten apapun di web."

Page 3: Fajar satrio Html5

Proses standardisasi w3c

Markup

Api Baru

First Public Working Draft

Last Call

Calon Rekomendasi

Page 4: Fajar satrio Html5

Proses standardisasi w3c

Kelompok kerja untuk teknologi aplikasi web hypertext (WHATWG) mulai menspesifikasikan HTML5 pada bulan juni 2004 dengan nama Web Applications 1.0. sampai pada bulan maret 2010 spesifikasi ini masuk ke bagian draft standar di WHATWG, dan ke dalam bagian pengurusan draft di W3C. Ian Hickson mewakili Google ,Inc menjadi editor HTML5.

Page 5: Fajar satrio Html5

MarkupDalam HTML 5 diperkenalkan beberapa elemen baru dan atribut yang merefleksikan tipikal penggunaan website modern. Beberapa diantaranya adalah pergantian yang bersifat semantik pada blok yang umum digunakan: yaitu elemen (<div>) dan inline (<span>), sebagai misalnya (<span>) (sebagai blok navigasi website) dan <footer> (biasanya dikaitkan pada bagian bawah suatu website atau baris terakhir dari kode html).

Page 6: Fajar satrio Html5

Api BaruSebagai penambah keluwesan pemformatan, dalam HTML5 sudah dispesifikasikan pengkodean application programming interfaces (APIs). Antarmuka document object model (DOM) yang ada dikembangkan dan fitur de facto didokumentasikan.

Page 7: Fajar satrio Html5

First Public Working Draft

WHATWG mengeluarkan Pertama Kerja Draft Publik spesifikasi pada 22 Januari 2008. Bagian dari HTML5 telah dilaksanakan di browser walaupun semua spesifikasi belum mencapai status Rekomendasi akhir.

Page 8: Fajar satrio Html5

Last CallPada tanggal 14 Februari 2011, W3C. Pada Mei 2011 , kelompok kerja canggih HTML5 untuk "Last Call", undangan kepada masyarakat dalam dan di luar W3C untuk mengkonfirmasi kesehatan teknis dari spesifikasi. W3C sedang mengembangkan tes lengkap, sebagai pencapaian interoperabilitas luas untuk spesifikasi lengkap pada tahun 2014, yang sekarang tanggal target Rekomendasi.

Page 9: Fajar satrio Html5

Calon RekomendasiPada bulan Juli 2012, WHATWG dan W3C memutuskan dalam tingkat pemisahan. W3C akan melanjutkan HTML5 spesifikasi pekerjaan, berfokus dalam standar definitif tunggal, yang dianggap sebagai "snapshot" oleh WHATWG. Organisasi WHATWG akan melanjutkan pekerjaannya dengan HTML5 sebagai "Standar Hidup". Konsep standar hidup merupakan bahwa hal itu tidak pernah lengkap dan selalu diperbarui dan ditingkatkan.

Page 10: Fajar satrio Html5

Pengertian HTML5HTML5 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 sampai bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah sebagai perbaikan teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

Page 11: Fajar satrio Html5

Tujuan Dibuatnya HTML5

1.Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript.

2.Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).

3.Penanganan kesalahan yang lebih baik.4.Lebih banyak markup untuk

menggantikan scripting.5.HTML5 merupakan perangkat mandiri

Page 12: Fajar satrio Html5

Unsur-unsur identifikasi konstruksi HTML5

Section

Header

Footer

Nav

Article

Unsur

Page 13: Fajar satrio Html5

Arsitektur HTML5

Arsitektur dasar dari HTML5 sebenarnya sama dengan versi HTML sebelumnya, karena HTML5 merupakan hasil upgrade dari HTML sebelumnya, dan tidak ada perubahan arsitektur dari HTML versi sebelumya. HTML5 dibuat untuk mengatasi masalah yang di alami oleh HTML versi sebelumnya yakni masalah ketergantungan terhadap plug-in yang dapat membuat kinerja dari CPU menjadi lambat.

Page 14: Fajar satrio Html5

Tag HTML5Contoh Tag HTML5:1. <!DOCTYPE HTML>2. <html>3. <head>4. <meta http-equiv="Content-Type" content="text/html;

charset=UTF-8" />5. <title>Your Website</title>6. </head>7. <body>8. <header>9. <nav>10. <ul>11. <li>Your menu</li>12. </ul>13. </nav>

Page 15: Fajar satrio Html5

Fitur HTML5

Native Audio dan Video

Canvas

Offline Support

Drag & Drop

Akses Hardware

Fitur

input type & Validasi Form

Page 16: Fajar satrio Html5

input type & Validasi Form

Sebelum HTML5, sangat susah memvalidasi Form. Misalkan sebuah input tidak boleh kosong, input harus angka dan input yang valid diantara 1 sampai 100. Untuk membuat validasi tersebut kita menggunakan javascript atau PHP di server yangmana masing masing programmer dan framework mempunyai caranya sendiri sendiri. Dengan adanya HTML5 maka validasi sudah langsung ditangani oleh HTMl5.

Page 17: Fajar satrio Html5

Native Audio dan Video

Sejak era 2000-an, audio dan video di internet tidak mempunyai standar. Kebanyakan audio menggunakan plugin itunes atau realplayer sedangkan video player menggunakan Flash atau silverLight . Era plugin sudah berakhir, HTML5 menghadirkan Native audio dan Video Codec langsung didalam browser. Tidak ada lagi namanya udpate plugin atau browser crash karena plugin error.

Page 18: Fajar satrio Html5

CanvasCanvas adalah fitur yang menarik. Bahasa mudahnya, dengan canvas kita bisamengambar atau menampilkan animasi langsung di browser. Lihat demonya disini.

Page 19: Fajar satrio Html5

Offline Support

Salah satu kelemahan dari aplikasi web adalah harus selalu online. HTML5 bisa bekerja walaupun tidak ada koneksi. Silahkan coba menggunakan beberapa aplikasi di Google chrome webstore seperti Google Docs dan Aplikasi Note. Dua aplikasi web ini bisa tetap berjalan walaupun tidak tersedia koneksi internet.

Page 20: Fajar satrio Html5

Drag & Drop

Kelebihan dari desktop adalah kemampun memindah atau mengkopi file cukup dengan “drag & drop”. Sekarang Web bisa melakukan hal yang dulu hanya bisa dilakukan di Desktop. Salah satu web yang sudah menggunakan fitur ini adalah dropbox. Untuk mencobanya, buat akun di dropbox dan silahkan di upload image dengan cara mendrag file didesktop ke Halaman Dropbox, maka secara otomatis file akan terupload.

Page 21: Fajar satrio Html5

Akses Hardware

Sebagian orang tidak mau membuat aplikasi web karena web tidak punya akses ke hardware. Yakin? sekarang bisa. HTML5 bisa mengakses Mic, Kamera dan Filesystem , Orientasi device (landscape atau potrait) dan Lokasi GPS langsung tanpa perlu plugin.

Page 22: Fajar satrio Html5

Kelebihan HTML51. Dapat ditulis dalam sintaks HTML (dengan tipe media

text/HTML) danXML.2. Integrasi ('inline') dengan doctype yang lebih

sederhana.3. Penulisan kode yang lebih efisien.4. Konten yang ada di situs lebih mudah terindeks oleh

search engine.5. Cleaner code6. Greater consistency7. Improve Semantics8. Improved Accessibility9. Client-side Database10. Geolocation11. Offline Aplication Cache12. Smarter Forms

Page 23: Fajar satrio Html5

Kekurangan HTML51. Saat ini HTML5 masih dalam

pengembangan2. Kekurangan utama yang dimiliki oleh

HTML5 ini adalah versi ini hanya support untuk browser modern/terbaru

3. Karena bahasa HTML5 ini masih dalam perkembangan, jadi beberapa elemen yang ada bisa saja berubah

4. Fitur keamanan yang ditawarkan HTML5 masih terbatas

Page 24: Fajar satrio Html5

TERIMA KASIH