HTML5
20
HTML5 j By: zaini maftukhin Pembimbing : Septia Lutfi
-
Upload
ucienmapcu -
Category
Presentations & Public Speaking
-
view
67 -
download
0
Transcript of HTML5
HTML5
j
By: zaini maftukhin Pembimbing : Septia Lutfi
Latar Belakang• Seiring dengan kemajuan perkembangan jaman, maka
banyak sekali yang sudah berubah di bumi ini. Banyak iilmuwan yang menemukan berbagai peralatan yang ditujukan untuk mempermudah tugas dan kewajiban manusia. Missal penemuan listrik, penemuan televise, lampu pijar bahkan sampai penemuan telepon, dan penemuan internet. Sekarang ini perkembangan internet sedang mengalami kemajuan yang pesat tentang pemrogramannya. Mulai dari HTML1, sampai HTML5.. Disini kita akan membahas lebih lanjut mengenai HTML5
Pengertian HTML5
• HTML5 adalah suatu spesifikasi sebagai hasil perbaikan dari standard HTML(Hypertext Markup Language) sebelumnya yang dikeluarkan oleh W3C( world Wide Web Consurtium) dan partner kerjanya yaitu Web Hypertext Application technology Working Group. Tujuan adanya revisi yang semula HTML menjadi HTML5 adalah untuk meningkatkan bahasa pada system multimedia yang sedang in yang dengan mudah dapat terbaca oleh manusia dan dimengerti oleh computer itu sendiri sebagai perangkat.
Sejarah HTML5• HTML5 merupakan perbaikan kelima dari HTML yang
pertama kali dibuat pada tahun 1990 dan terakhir kalinya versi HTML4 dirilis tahun 1997. Para kelompok kerja Teknologi Aplikasi Web Hyperteks memulai standar baru HTML5 ini pada tahun 2004, dan pada tahun 2009 W3C dan WHATWG bersatu dalam pengembangan HTML5. Konsep pertamanya sudah dipublikasikan pada tahun 2008, tetapi tidak banyak yang menggunakannya hingga tahun 2011. Pada tahun 2011, HTML 5 diterbitkan sepenuhnya dan orang-orang mulai menulis dan menggunakannya, namun penerapannya pada masing-masing browser yang berbeda masih bisa dibilang buruk.
• Hari ini, seluruh browser utama (Chrome, Safari, Firefox, Opera, IE) dapat mendukung HTML5, sehingga teknologi HTML terbaru dapat digunakan dengan sebaik-baiknya. HTML5 mulai dikenal oleh masyarakat pada tahun 2010 meskipun sudah dikenal sejak lama oleh para pengembang web. Dengan adanya pengembangan HTML5, adobe flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau konten apapun di web.
Kelebihan dan kekurangan HTML5+ Kelebihan :• Cleaner code, karena sebagian besar kode telah termasuk
di dalam sintaks html5, maka kode nampak terlihat lebih sederhana daripada penggabungan antara html, css dan java script.
• Greater consistency, HTML5 telah melakukan banyak sekali penambahan sintaks yang dibuat dalam struktur lebih baik dan lebih sederhana daripada sintaks-sintaks sebelumnya. Hal ini membuat developer terbantu dalam meningkatkan konsistensi dalam membangun sebuah web.
• Improve Semantics, dengan berbagai elemen kode di dalam html5 yang telah distandarisasi, maka nilai semantik dari sebuah web dapat lebih ditingkatkan. Itu berarti bahwa bagian-bagian dari web seperti header, nav, footer dan beberapa bagian lainnya terdefinisi dengan jelas maksud serta tujuannya selain itu juga terbentuk dalam sebuah “machine readible format”
• Improved Accessibility, dengan teknologi HTML5 yang memudahkan struktur pembangunan sebuah web, maka developer dapat membangun pemahaman yang lebih detil mengenaik halaman web.
- Kekurangan• Kekurangan utama yang dimiliki oleh HTML5 ini adalah
versi ini hanya support untuk browser modern/terbaru• Karena bahasa HTML5 ini masih dalam perkembangan,
jadi beberapa elemen yang ada bisa saja berubah• Fitur keamanan yang ditawarkan HTML5 masih terbatas• HTML5 tidak dapat diandalkan dalam hal format karena
web browser yang berbeda disebabkan mereka tidak mendukung salah satu format tunggal.
Atribut baru HTML5
•Atribut Event Window Peristiwa (event) yang dipicu objek window (berlaku untuk tag <body>)
•Atribut Event FormEvent dipicu oleh tindakan dalam form HTML (berlaku untuk hampir semua elemen HTML5, namun yang paling banyak digunakan dalam elemen form)
• Atribut Event Keyboard• Atribut Event Mouse• Atribut Events Media
Event dipicu oleh media seperti video, gambar dan audio (berlaku untuk semua elemen HTML5, namun paling sering terjadi pada unsur-unsur media, seperti audio, embed, img, objek, dan video):
Fitur baru dalam HTML5• Canvas
Canvas adalah media yang bisa dicoret-coret langsung dan tidak memerlukan plugin khusus. Canvas memberikan pilihan kepada para penggunanya. Dulu, saat ingin menggambar di halaman web maka harus menggunakan applet Java atau flash namun sekarang dapat menggunakan canvas, dengan cara menambahkan canvas dan javascript saja maka kita sudah dapat menggambar di halaman web.
• Video dan AudioKarena sudah ada tag <audio> dan <video> maka kita tidak memerlukan flash lagi untuk memutar audio. Untuk masuk di dalamnya dapat menggunakan berbagai format, yang paling menonjol adalah Ogg Theora dan H.264. namun sampai sekarang penggunaan kode masih dipertanyakan kembali.
• Local storageFitur ini merupakan standard dalam HTML5. Fitur ini dapat menyimpan data yang memiliki kapasitas besar dibanding yang lain tanpa harus mengimplementasikan trik dengan cookie atau flash.
• Web workersKita sebelumnya pernah menikmati fitur ini dalam Google gears. Web workers ini mempunyai kelebihan dibanding dengan javascript, missal saja saat kita mengoperasikan computer dengan javascript maka akan menyebabkan computer melambat, nah ini yang membedakan dengan web workers.
•SemanticsFitur ini sangatlah cocok bagi para perancang yang sering meng-abuse div dan span sebagian elemen nav, fret no more. Semantic ini bermanfaat sekali, karena bukan hanya untuk mencari informasi namun juga dapat melakukan seperti yang dijelaskan diatas.
Atribut baru di HTML5
1. Atribut media, ping pada elemen pranala2. Autofocus, placeholder, required,
autocomplete dan sebagainya3. Reversed•Browser pendukung dari HTML51. Operasi web browser2. Safari ( versi 3.1 )3. Firefox ( firefox 3)4. Google chrome ( versi 3 )5. Internet explore ( versi 8 )
•HTML5 Semantic Merupakan tag baru yang dikeluarkan pada HTML5 guna mendukung perubahan struktur halaman agar terlihat lebih rapi, selain itu juga untuk mengurangi pemakaian tag <div>
•HTML5 AudioHTML5 mengeluarkan salah satu fitur yang sangat keren yaitu dengan adanya tag baru yang nantinya digunakanuntuk pemutaran audio tanpa menggunakan plugin tambahan seperti flash player.
•HTML5 VideoSelama ini jika kita ingin memutar video maka diharuskan menggunakan flash palyer terlebih dahulu, namun sekarang sudah tidak lagi seperti itu
•HTML5 CanvasCanvas mempermudah kita dalam menginput objek 2D atau 3D ke dalam halaman web. Canvas sistemnya tidak dapat bekerja sendiri, canvas membutuhkan javascript untuk membuat objek di dalamnya, baik 2D maupun 3D.
manfaat dan kegunaan HTML5• pemberian pertolongan
Untuk meningkatkan kegunaan, web designer saat membuat website yang sangat interaktif dengan memasukkan memutar musik dan pilihan streaming video, animasi cairan dan situs jejaring sosial seperti Twitter dan Facebook di situs tersebut. Namun, sebelum HTML5 debut, mereka hanya bisa melakukannya dengan menggunakan Silverlight atau Flash, JavaScript atau Flex alat yang tidak hanya membuat aplikasi web lebih rumit, tetapi juga dikonsumsi banyak waktu.
Namun, HTML5 Desain membuatnya lebih mudah untuk menanamkan audio dan video, animasi berkualitas tinggi, grafik dan gambar nyaman tanpa perlu menggunakan program pihak ketiga lainnya atau plugin.
• peningkatan semanticBerkat HTML5, sekarang mudah untuk melihat header, footer, nav dan bagian lain dari halaman web sebagai tag sekarang lebih spesifik dan memahami tujuan utama mereka dan makna seluruh format yang. Kode desain web sangat standar sehingga meningkatkan semantik.
• kode peningkatanDengan menggunakan HTML5, web designer dan pengembang menikmati bekerja dengan rapi dan kode bersih dengan menghapus sebagian besar tag div di situs.
• KonsistensiSebagai website mengadopsi unsur-unsur baru dari HTML5, hal ini membantu untuk mencapai konsistensi yang lebih besar ketika datang untuk menggunakan HTML dalam pengkodean halaman web. Dengan demikian, HTML5 Desain jauh lebih mudah dan dimengerti dan desainer dapat dengan mudah mengetahui struktur dari halaman web.
• Bentuk eleganWeb desainer dapat menggunakan bentuk pengujian dan HTML5 juga membuat validasi bentuk asli ke HTML, meningkatkan antarmuka pengguna dan mengurangi kebutuhan untuk javascript dalam pengembangan website
• Manfaat utama lainnya yang terkait dengan HTML5 yang seperti dukungan Geolocation dan meningkatkan aksesibilitas dari halaman web. Ini hanya menyoroti manfaat dari HTML5 dan para ahli percaya bahwa HTML5 akan berkembang menjadi bahasa pengembangan secara online penting dalam waktu dekat.
