Perkembangan Teknologi Web HTML5

Standarisasi W3C

Keberadaan WHATWG mulai menspesifikasikan HTML5 pada bulan juni 2004 dengan nama Web Applications 1.0., hingga 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.
Pada tahun 2007 Spesifikasi HTML5 diadopsi sebagai pekerjaan permulaan untuk grup baru yang mengurus HTML di World Wide Web Consorsium (W3C). Grup ini pertama kali mempublikasikan hasil draft pekerjaan pertama mereka pada tanggal 22 januari 2008.Spesifikasi ini berstatus dalam tahap pengerjaan, dan diperkirakan akan tetap demikian selama bertahun-tahun, meskipun sebagian dari HTML5 sudah dalam tahap penyelesaian dan diimplementasikan pada penjelajah web sebelum keseluruhan spesifikasinya mencapai status rekomendasi final.
Berdasarkan pada jadwal kerja W3C, HTML5 diperkirakan menjadi kandidat rekomendasi pada akhir tahun 2010. Namun, publikasi pertama draft HTML 5 meleset selama 8 bulan. Permintaan dokumen terakhir dan tahap kandidat rekomendasi diharapkan dapat dicapai pada tahun 2008, tetapi hingga bulan Juli 2010 HTML 5 masih dalam tahapan draft pengerjaan di W3C.WHATWG telah meminta penyelesaian terakhir untuk HTML5 sejak bulan oktober tahun 2009.
Editor HTML5, Ian Hickson, berharap spesifikasi HTML5 dapat mencapai tahap kandidat rekomendasi pada tahun 2012. Kriteria di W3C agar sebuah spesifikasi dapat berstatus - Direkomendasikan - adalah "yang kedua: 100% selesai dan penerapannya dapat dilakukan pada dua atau lebih sistem yang berbeda". Pada wawancaranya dengan TechRepublic, Hickson memperkirakan hal ini baru akan terjadi pada tahun 2022 atau setelahnya. Meski demikian, banyak bagian dari spesifikasi sudah stabil dan telah dapat diterapkan pada produk.

Penanaman API Baru

Untuk menambah keluwesan pemformatan, pada HTML5 telah dispesifikasikan pengkodean application programming interfaces (APIs). Antar muka document object model (DOM) yang ada dikembangkan dan fitur de facto didokumentasikan. Beberapa APIs terbaru pada HTML5 antara lain :

Elemen canvas, sebagai mode untuk menggambar object dua dimensi (2D). Lihat spesifikasi 1.0 untuk canvas 2D. Elemen kanvas adalah bagian dari HTML5 dan memungkinkan untuk dinamis, skrip render bentuk 2D dan gambar bitmap. Ini adalah tingkat rendah, model prosedural yang update bitmap dan tidak memiliki grafik adegan built-in.
Timed media playback
Media penyimpanan luring (aplikasi web luring)/ Web Storage. Adalah aplikasi perangkat lunak berbasis web dan protokol yang digunakan untuk menyimpan data pada sebuahpenjelajah web. Media ini mendukung penyimpanan data secara persistent, sama dengan konsep cookies.
Penyuntingan dokumen
Drag and Drop Drag dan drop adalah gerakan perangkat penunjuk di mana pengguna memilih objek virtual dengan "meraih" dan menyeretnya ke lokasi yang berbeda atau ke benda virtual lain. Secara umum, dapat digunakan untuk memanggil berbagai jenis tindakan, atau membuat berbagai jenis asosiasi antara dua benda abstrak. Sebagai fitur, drag-and-drop dukungan tidak ditemukan di semua perangkat lunak, meskipun kadang-kadang dengan teknik cepat dan mudah untuk belajar. Namun, tidak selalu jelas bagi pengguna bahwa item dapat menyeret dan menjatuhkan, yang dapat menurunkan kegunaan.
Cross-document messaging. Mencegah serangan cross-site scripting ketika asal dan data divalidasi. untuk alasan keamanan dan privasi, mencegah dokumen dalam domain yang berbeda dari mempengaruhi satu sama lain, yaitu, cross-site scripting adalah batasan. Walaupun ini merupakan fitur keamanan yang penting, mencegah halaman dari domain yang berbeda dari berkomunikasi bahkan ketika halaman tersebut tidak bermusuhan. Bagian ini memperkenalkan sistem messaging yang memungkinkan dokumen untuk berkomunikasi satu sama lain terlepas dari domain sumber mereka, dengan cara yang dirancang untuk tidak mengaktifkan serangan cross-site scripting.
Manajemen sejarah kunjungan penjelajah web
Tipe MIME dan penanggung jawab protokol registrasi. Tidak semua teknologi di atas dimasukkan pada spesifikasi

HTML5 W3C, meski teknologi tersebut telah termaktub dalam spesifikasi milik WHATWGHTML. Beberapa teknologi yang juga terkait namun tidak dijadikan bagian dalam spesifikasi HTML5 W3C dan WHATWG HTML5 adalah :

Geolocation
Web SQL Database, media penyimpanan database lokal.
API Database terindeks, mode penyimpanan hierarkis key-value (WebSimpleDB). Web Speech APIm

Mark Up HTML5

Pada HTML 5 diperkenalkan beberapa elemen baru dan atribut yang merefleksikan tipikal penggunaan website modern. Beberapa diantaranya adalah pergantian yang bersifat semantik, semantic adalah cabang linguistik yang mempelajari arti/makna yang terkandung pada suatu bahasa, kode, atau jenis representasi lain. Dengan kata lain, Semantik adalahpembelajaran tentang makna. Semantik biasanya dikaitkan dengan dua aspek lain: sintaksis, pembentukan simbol kompleks dari simbol yang lebih sederhana, serta pragmatika, penggunaan praktis simbol oleh komunitas pada konteks tertentu.

MarkUp pada blok yang umum digunakan yaitu:

Elemen ( ) dan inline (), sebagai contoh () (sebagai blok navigasi website) dan (biasanya dikaitkan pada bagian bawah suatu website atau baris terakhir dari kode html). Banyak elemen lain yang memberikan kegunaan baru melalui antar muka yang telah distandarkan, seperti elemen multimedia

Semantik Mark Up HTML5

Markup Semantik merupakan penandaan kata. HTML5 mempunyai struktur elemen baru yang akan memudahkan para developer untuk membedakan isi dari sebuah dokumen web. Menggunakan metode markup baru HTML5 tidakakan berpengaruh secara langsung kepada pengguna, namun markup baru ini dapat menyederhanakan penulisan halaman pada struktur isi HTML.

Terlebih lagi, markup baru ini akan membuat halaman HTML menjadi lebih mudah dibaca oleh mesin, tentunya juga mudah diakses. Sebagai contoh, pencarian dan sindikasi mesin pencari pasti akan mengambil beberapa unsur seperti sistem crawl yang mencari halaman indeks.

Google dan Opera menganalisis jutaan halaman dan menemukan pengulangan nama“id” pada tag DIV Cascading Style Sheet (CSS). Sebagai contoh, para developer menggunakan untuk mengindikasikan bahwa bagian ini adalah untuk footer.HTML5 menyediakan set elemen bagian baru yang dapat digunakan dalam browser modern sekarang. Berikut adalah tabel yang telah saya buat sebagai 6 pembagian elemen-elemen baru HTML5

tentang CSS

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan styl lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas.Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Penanganan Kesalahan Pada HTML5

Sebuah peramban web HTML5 (text/html) akan fleksiblel dalam menangani kesalahan sintaks. HTML5 telah didesain agar peramban web lama dapat dengan aman mengabaikan konstruksi HTML5 yang baru. Perbedaan mendasar dengan HTML 4.01 adalah spesifikasi HTML5 memberikan aturan detail untuk meleksikalkan dan memecah-mecah suatu rangkaian sebagai persyaratan agar berbagai peramban web tetap memberikan hasil yang sama saat terjadi kesalahan sintaks.Meskipun HTML5 telah memiliki perilaku konsisten untuk menangani dokumen-dokumen "Tag Soup", dokumen seperti ini tidak dapat dikatakan telah memenuhi standar HTML5.

"tag soup" mengacu pada pemformatan bahasa markah yang ditulis untuk halaman web yang sangat mirip sekali dengan HTML, tetapi tidak memiliki susunan sintaks HTML dan struktur dokumen yang benar. Karena peramban web menyimpan rekaman kesalahan sintaks dan struktur HTML secara moderat, maka para web developer ditekankan agar mengikuti standar spesifikasi W3C, oleh karena itu pula peramban web akan menerima dan memperbaiki halaman web yang terlihat seperti "tag soup" baik itu dari sisi kesalahan sintaks ataupun struktur.

HTML Media

Canvas HTML

<canvas> di HTML5 adalah elemen yang digunakan untuk menggambar grafik, object di website yg umumnya melalui script javascript. <canvas> hanya merupakan wadah untuk menggambar, dan untuk menggambarnya anda harus menggunakan script, misal javascript. <canvas> memiliki beberapa metode untuk menggambar Garis, kotak, lingkaran, karakter, dan menambahkan gambar. Berikut cara membuat canvas :

Media canvas berbentuk persegi yang secara default memiliki border dan isi.
Menggambar canvas dengan javascript :
Koordinat Canvas. Kanvas adalah grid dua dimensi. Sudut kiri atas kanvas memiliki koordinat (0,0) Jadi, fillRect () metode di atas memiliki parameter (0,0,150,75). Ini berarti: Mulai di pojok kiri atas (0,0) dan menggambar piksel persegi panjang 150×75. itik origin koordinat canvas dimulai dari sudut kiri atas, dengan sumbu x ke kanan semakin besar, dan sumbu y ke bawah semakin besar pula.
Canvas – Path Untuk menggambar garis lurus di atas kanvas, kita akan menggunakan dua metode berikut: moveTo (x, y) mendefinisikan titik awal baris lineto (x, y) mendefinisikan titik akhir baris Untuk benar-benar menarik garis, kita harus menggunakan salah satu dari methtod tinta (ink), seperti stroke (). Tentukan titik awal dalam posisi (0,0), dan titik akhir pada posisi (200.100). Kemudian gunakan stroke () metode untuk menarik garis: contoh :
Menggambar lingkaran pada canvas Menggambar lingkaran pada kanvas menggunakan method arc();
Canvas – Text Untuk menggambar teks pada kanvas, properti dan metode yang paling penting adalah: Font – mendefinisikan properti font untuk teks fillText (teks, x, y) – Mengisi teks pada kanvas strokeText (teks, x, y) - Meletakkan teks pada kanvas (tidak mengisi).
Canvas – Gradients Gradien dapat digunakan untuk mengisi persegi panjang, lingkaran, garis, teks, dll Bentuk pada kanvas tidak terbatas pada warna solid.Ada dua jenis gradien:createLinearGradient (x, y, x1, y1) – Menciptakan gradien linier dan createRadialGradient (x, y, r, x1, y1, r1) Membuat gradien radial / melingkarSetelah kita memiliki objek gradien, kita harus menambahkan dua atau lebih warna. Method addColorStop () digunakan untuk menentukan berhentinya warna, dan posisinya di sepanjang gradien. Posisi gradien dapat di mana saja antara 0 sampai dengan 1.Untuk menggunakan gradien, mengatur fillStyle atau strokeStyle properti untuk gradien, dan kemudian menggambar bentuk, seperti persegi panjang, teks, atau garis.
Canvas – Images Untuk menggambar sebuah gambar pada kanvas, kami akan menggunakan metode berikut: drawImage (gambar, x, y) Dengan adanya canvas sangat membantu dalam pembuatan game berbasis web.

HTML5 Video

HTML5 video dimaksudkan oleh penciptanya untuk menjadi cara standar baru untuk menampilkan video di web tanpa plugin, tetapi telah terhambat oleh kurangnya kesepakatan untuk yang format video harus didukung dalam browser web.

HTML5 merupakan sebuah standar untuk menstrukturkan dan menampilkan isi pada World Wide Web. Standar bahasa tersebut memperkenalkan fitur baru seperti memutar video serta drag and drop. Sebelumnya fitur tersebut bergantung pada plugins pihak ketiga di penjelajah web seperti Adobe Flash dan Microsoft Silverlight. Pada HTML5 jika ingin menyisipkan video, gunakan tag <video>.

Berikut contoh pengguna script tag vido pada HTML5:

Sampai saat ini, tidak pernah ada sebuah standar untuk menampilkan video pada halaman web.saat ini, video yang paling akan ditampilkan melalui plugin (seperti flash). Namun, tidak semua browser memiliki plugin yang sama. Maka HTML5 menetapkan cara standar untuk memasukkan video, dengan elemen video Format video Saat ini, ada 3 format video yang didukung untuk elemen video:

· Ogg = Ogg file dengan codec video Theora dan Vorbis audio codec

· MPEG4 = MPEG 4 file dengan codec H.264 video dan AAC audio codec

· WebM = WebM file dengan VP8 codec video dan audio codec Vorbis

Cara Bekerja Untuk menampilkan video dalam HTML5, ini adalah semua yang Anda butuhkan:

HTML5 Audio

Cara Bekerja Untuk memutar file audio di HTML5, ini adalah semua yang Anda butuhkan:

Atribut kontrol untuk menambahkan play, pause, dan kontrol volume. Sisipkan konten antara <audio> dan </audio> tag untuk browser yang tidak mendukung elemen audio:

Contoh di atas menggunakan file ogg, dan akan bekerja di Firefox, Opera dan Chrome.Untuk membuat karya audio di Internet Explorer dan Safari, menambahkan file audio jenis MP3.Elemen elemen audio memungkinkan beberapa sumber. Sumber elemen dapat link ke file audio yang berbeda. Browser akan menggunakan format diakui pertama:

Semua Atribut

Microdata HTML5

Microdata adalah spesifikasi HTML WHATWG digunakan untuk metadata sarang dalam konten yang ada pada halaman web. Search engine, web crawler, dan browser dapat mengekstrak dan memproses Microdata dari halaman web dan menggunakannya untuk memberikan pengalaman browsing yang lebih kaya bagi pengguna. Search engine sangat merasakan manfaat dari akses langsung ke data ini terstruktur karena memungkinkan mesin pencari untuk memahami informasi pada halaman web dan memberikan hasil yang lebih relevan bagi pengguna. Microdata menggunakan kosakata yang mendukung untuk menggambarkan item dan nama-nilai pasangan untuk memberikan nilai pada sifat-sifatnya. Microdata merupakan upaya untuk menyediakan cara sederhana annotating elemen HTML dengan tag dapat dibaca mesin daripada pendekatan serupa menggunakan RDFa dan Microformats.

1. Microdata vocabularies

Microdata kosakata menyediakan semantik, atau makna dari Item. Web developer dapat merancang kosakata kustom atau menggunakan kosakata yang tersedia di web. Sebuah koleksi yang umum digunakan kosakata markup disediakan oleh skema Schema.org yang meliputi: Orang, Event, Organisasi, Produk, Review, Review-agregat, Breadcrumb, Penawaran, Penawaran-agregat. Operator mesin pencari besar seperti Google, Microsoft dan Yahoo! mengandalkan markup ini untuk meningkatkan hasil pencarian. Untuk beberapa tujuan, kosakata yang ad-hoc memadai. Bagi yang lain, kosakata akan perlu dirancang. Bila memungkinkan, penulis didorong untuk kembali menggunakan kosakata yang ada, karena hal ini membuat konten lebih mudah digunakan kembali.

2. Microdata Glogal Attributes

§ Itemscope - Membuat Item dan menunjukkan bahwa keturunan elemen ini berisi informasi tentang hal itu.

§ Itemtype - Sebuah URL yang valid dari sebuah kosa kata yang menjelaskan barang dan sifat konteksnya.

§ Itemid - Menunjukkan pengenal unik item.

§ Itemprop - Menunjukkan bahwa tag mengandung yang memegang nilai properti item tertentu. Sifat nama dan konteks nilai dijelaskan oleh kosakata. Nilai properti biasanya terdiri dari nilai string, tetapi juga dapat menggunakan URL menggunakan elemen dan atribut href nya, elemen img dan atribut src-nya, atau elemen lain yang link ke atau menanamkan sumber daya eksternal.

§ Itemref - Properti yang tidak keturunan elemen dengan atribut itemscope dapat dikaitkan dengan item menggunakan atribut ini. Menyediakan daftar id elemen (tidak itemids) dengan sifat tambahan di tempat lain dalam dokumen.

Cari Blog Ini

KeceBongers