Belajar Mengenal HTML ( Bag 5 selse )

HTML5 Intro

HTML 5 dibuat lebih sederhana, ciri - cirinya <!DOCTYPE html> dan meta charset utf-8
Terdapat beberapa tag yang muncul di HTML Versi 5 ini, antara lain :
  • Semantik < header >,< footer >,< section >,dan< article >
  • Kontrol baru seperti nomor, tanggal, waktu, kalender, dan jangkauan.
  • Grafid < svg >,< canvas >
  • Multimedia < video >,< audio >

HTML5 Dukungan

HTML5 didukung di semua browser modern.
Selain itu, semua browser, lama dan baru, otomatis menangani elemen yang belum diakui sebagai elemen inline.


HTML5 Elemen

Beberapa elemen baru yang ditambahkan pada HTML5
TagDescription
<article>Defines an article in the document
<aside>Defines content aside from the page content
<bdi>Defines a part of text that might be formatted in a different direction from other text
<details>Defines additional details that the user can view or hide
<dialog>Defines a dialog box or window
<figcaption>Defines a caption for a <figure> element
<figure>Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer>Defines a footer for the document or a section
<header>Defines a header for the document or a section
<main>Defines the main content of a document
<mark>Defines marked or highlighted text
<menuitem> Defines a command/menu item that the user can invoke from a popup menu
<meter>Defines a scalar measurement within a known range (a gauge)
<nav>Defines navigation links in the document
<progress>Defines the progress of a task
<rp>Defines what to show in browsers that do not support ruby annotations
<rt>Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby>Defines a ruby annotation (for East Asian typography)
<section>Defines a section in the document
<summary>Defines a visible heading for a <details> element
<time>Defines a date/time
<wbr>Defines a possible line-break

Elemen form yang baru

TagDescription
<datalist>Defines pre-defined options for input controls
<keygen>Defines a key-pair generator field (for forms)
<output>Defines the result of a calculation

Form input yang baru

New Input TypesNew Input Attributes
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

HTML5 Semantik

Elemen HTML yang bersifat semantik adalah
  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

HTML5 Migrasi

Migrasi dari HTML4 ke HTML5
Bab ini sepenuhnya tentang bagaimana untuk bermigrasi dari halaman HTML4 khas ke halaman HTML5 khas.
Bab ini menunjukkan bagaimana mengkonversi halaman HTML4 yang ada ke dalam halaman HTML5, tanpa merusak apapun dari konten asli atau struktur.
Tipe HTML4Tipe HTML5
<div id="header"><header>
<div id="menu"><nav>
<div id="content"><section>
<div id="post"><article>
<div id="footer"><footer>

HTML5 Style Guide

Pengembang web sering tidak pasti tentang gaya coding dan sintaks untuk digunakan dalam HTML.
Antara tahun 2000 dan 2010, banyak pengembang web dikonversi dari HTML ke XHTML.
Dengan XHTML, pengembang dipaksa untuk menulis sah dan "well-formed" kode.
HTML5 adalah sedikit lebih ceroboh ketika melakukan kode validasi.
Dalam penulisan tag HTML, usahakan sesuai aturan, semisal tag yang aslinya besar maka ditulis besar begitu sebaliknya tag yang aslinya kecil ditulis kecil, serta jangan lupa untuk menutup jika tag merupakan jenis berpasangan .

HTML5 Form

tag HTML untuk form adalah < form >< /form>
Didalam form akan ada beberapa input, yaitu
<form action="action_page.php" method="GET/POST">
Nama depan:<br>
<input type="text" name="firstname">
<br>
Nama akhir:<br>
<input type="text" name="lastname"> <br>

Jenis Kelamin <br>
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female <br>


Hobi <br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car <br>

Pilih <br>

<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

<br>



Password:<br>
<input type="password" name="psw">

<br>
Pekerjaan <br>

<select name="pekerjaan">
<option value="SWASTA">SWASTA</option>
<option value="PNS">PNS</option>
<option value="Wiraswasta">Wiraswasta</option>			
</select>
<br>
<br>
<input type="file" name="foto"> <br>
<br>
<input type="submit" value="Submit"><br>
</form>
Nama depan:
 
Nama akhir:
 
Jenis Kelamin 
Male Female 
Hobi 
I have a bike 
I have a car 
Pilih 
 
Password:
 
Pekerjaan 
 




AttributeDescription
accept-charsetSpecifies the charset used in the submitted form (default: the page charset).
actionSpecifies an address (url) where to submit the form (default: the submitting page).
autocompleteSpecifies if the browser should autocomplete the form (default: on).
enctypeSpecifies the encoding of the submitted data (default: is url-encoded).
methodSpecifies the HTTP method used when submitting the form (default: GET).
nameSpecifies a name used to identify the form (for DOM usage: document.forms.name).
novalidateSpecifies that the browser should not validate the form.
targetSpecifies the target of the address in the action attribute (default: _self).

HTML Graphics

HTML Canvas

Apa Canvas?

Kanvas adalah media untuk lukisan cat minyak. Salah satu minyak paling awal di atas kanvas adalah Madonna Perancis dari 1410. kanvas biasanya membentang di bingkai kayu.
Pada kanvas HTML, Anda dapat menarik semua jenis grafis, dari garis sederhana, objek grafis yang kompleks.

HTML < canvas > Elemen

HTML < canvas > elemen (diperkenalkan di HTML5) merupakan wadah untuk grafis kanvas.
Kanvas HTML adalah area persegi pada halaman HTML.
Kanvas memiliki beberapa metode untuk menggambar jalan, kotak, lingkaran, teks, dan gambar grafis.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>

HTML SVG

Apa itu SVG?

SVG adalah singkatan dari Scalable Vector Graphics
SVG digunakan untuk mendefinisikan grafis untuk Web
SVG adalah rekomendasi W3C
HTML < svg > Elemen
HTML < svg > elemen (diperkenalkan di HTML5) merupakan wadah untuk grafis SVG.< /svg >
SVG memiliki beberapa metode untuk menggambar jalan, kotak, lingkaran, teks, dan gambar grafis.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
Maaf, browser anda tidak support inline SVG.
</svg>

<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
Maaf, browser tidak support
</svg>
SVG

Perbedaan Antara SVG dan Canvas

SVG adalah bahasa untuk menggambarkan grafis 2D dalam XML.
Kanvas menarik grafis 2D, on the fly (dengan JavaScript).
SVG adalah berbasis XML, yang berarti bahwa setiap elemen tersedia dalam SVG DOM. Anda dapat melampirkan JavaScript event handler untuk elemen.
Di SVG, setiap bentuk digambar dikenang sebagai objek. Jika atribut dari sebuah objek SVG berubah, browser dapat secara otomatis kembali membuat bentuk.
Kanvas diberikan pixel dengan pixel. Dalam kanvas, setelah grafik ditarik, telah dilupakan oleh browser. Jika posisinya harus diubah, seluruh adegan perlu digambar ulang, termasuk benda yang mungkin telah ditutupi oleh grafik.

Perbandingan Canvas dan SVG

Tabel di bawah ini menunjukkan beberapa perbedaan penting antara kanvas dan SVG:
CanvasSVG
  • Resolution dependent
  • No support for event handlers
  • Poor text rendering capabilities
  • You can save the resulting image as .png or .jpg
  • Well suited for graphic-intensive games
  • Resolution independent
  • Support for event handlers
  • Best suited for applications with large rendering areas (Google Maps)
  • Slow rendering if complex (anything that uses the DOM a lot will be slow)
  • Not suited for game applications

HTML Media

Multimedia di web, adalah suara, musik, video, film, dan animasi.

Apa Multimedia?

Multimedia datang dalam berbagai format. Hal ini dapat hampir apapun yang Anda bisa mendengar atau melihat.
Contoh: Gambar, musik, suara, video, catatan, film, animasi, dan banyak lagi.
Halaman web sering berisi elemen-elemen multimedia jenis dan format yang berbeda.
Dalam bab ini Anda akan belajar tentang format multimedia yang berbeda.

Dukungan Browser

Web browser pertama memiliki dukungan untuk teks saja, terbatas pada font tunggal dalam satu warna.
Kemudian datang browser dengan dukungan untuk warna dan font, dan bahkan dukungan untuk gambar!
Dukungan untuk suara, animasi, dan video ditangani secara berbeda oleh berbagai browser. Berbagai jenis dan format yang didukung, dan beberapa format membutuhkan program pembantu tambahan (plug-in) untuk bekerja.
Mudah-mudahan ini akan menjadi sejarah. HTML5 multimedia menjanjikan masa depan yang lebih mudah untuk multimedia.

Format Multimedia

Elemen multimedia (seperti suara atau video) disimpan dalam file media.
Cara yang paling umum untuk menemukan jenis file, adalah dengan melihat ekstensi file. Ketika browser melihat ekstensi .htm file atau html, itu akan memperlakukan file sebagai file HTML. Perpanjangan xml menunjukkan file XML, dan ekstensi css menunjukkan file style sheet. Gambar diakui oleh ekstensi seperti .gif, .png dan .jpg.
File multimedia juga memiliki format sendiri dan ekstensi yang berbeda seperti: swf, .wav, .mp3, .mp4, mpg, wmv, avi dan.

Video Format umum

Videoformats MP4 adalah format baru dan mendatang untuk video internet.
MP4 direkomendasikan oleh YouTube.
MP4 didukung oleh Flash gamers
MP4 didukung oleh HTML5.
FormatFileDescription
MPEG.mpg
.mpeg		MPEG. Developed by the Moving Pictures Expert Group. The first popular video format on the web. Used to be supported by all browsers, but it is not supported in HTML5 (See MP4).
AVI.aviAVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers.
WMV.wmvWMV (Windows Media Video). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers.
QuickTime.movQuickTime. Developed by Apple. Commonly used in video cameras and TV hardware. Plays well on Apple computers, but not in web browsers. (See MP4)
RealVideo.rm
.ram		RealVideo. Developed by Real Media to allow video streaming with low bandwidths. It is still used for online video and Internet TV, but does not play in web browsers.
Flash.swf
.flv		Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in web browsers.
Ogg.oggTheora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.
WebM.webmWebM. Developed by the web giants, Mozilla, Opera, Adobe, and Google. Supported by HTML5.
MPEG-4
or MP4		.mp4MP4. Developed by the Moving Pictures Expert Group. Based on QuickTime. Commonly used in newer video cameras and TV hardware. Supported by all HTML5 browsers. Recommended by YouTube. 

Format suara

MP3 adalah format terbaru untuk kompresi rekaman musik. Istilah MP3 telah menjadi identik dengan musik digital.
Jika situs Web Anda tentang rekaman musik, MP3 adalah pilihan.
FormatFileDescription
MIDI.mid
.midi		MIDI (Musical Instrument Digital Interface). Main format for all electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital notes that can be played by electronics. Plays well on all computers and music hardware, but not in web browsers.
RealAudio.rm
.ram		RealAudio. Developed by Real Media to allow streaming of audio with low bandwidths. Does not play in web browsers.
WMA.wmaWMA (Windows Media Audio). Developed by Microsoft. Commonly used in music players. Plays well on Windows computers, but not in web browsers.
AAC.aacAAC (Advanced Audio Coding). Developed by Apple as the default format for iTunes. Plays well on Apple computers, but not in web browsers.
WAV.wavWAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems. Supported by HTML5.
Ogg.oggOgg. Developed by the Xiph.Org Foundation. Supported by HTML5.
MP3.mp3MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. Combines good compression (small files) with high quality. Supported by all browsers.
MP4.mp4MP4 is a video format, but can also be used for audio. MP4 video is the upcoming video format on the internet. This leads to automatic support for MP4 audio by all browsers.

HTML Video

HTML video hanya support dengan 3 format yaitu mp4,ogg,dan webm.
BrowserMP4WebMOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESNONO
OperaYES (from Opera 25)YESYES

HTML Audio

HTML Audio hanya support dengan format mp3,wav,ogg
BrowserMP3WavOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESYESNO
OperaYESYESYES
<!DOCTYPE html>
<html>
<body>

<audio controls>
<source src="http://ayoberbisnis.co.id/_free/Syahnan%20Palipi%20-%20Budaya%20Bisnis.ogg" type="audio/ogg">
<source src="http://ayoberbisnis.co.id/_free/Syahnan%20Palipi%20-%20Budaya%20Bisnis.mp3" type="audio/mpeg">
Browser anda tidak support dengan elemen ini
</audio>

</body>
</html>

HTML Plug-in

Tujuan dari plug-in, adalah untuk memperluas fungsionalitas dari browser HTML.

HTML Pembantu (Plug-in)

Aplikasi pembantu adalah program komputer yang memperluas fungsionalitas standar web browser.
Aplikasi bantuan juga disebut plug-in
Contoh terkenal plug-in yang applet Java.
Plug-in dapat ditambahkan ke halaman web dengan < object > tag atau < embed > tag.< /object >
Plug-in dapat digunakan untuk berbagai tujuan: peta display, memindai virus, memverifikasi id bank Anda, dll
Catatan : Untuk menampilkan video dan audio: Gunakan < video > dan < audio > tag. < Object > Elemen
< Object > elemen didukung oleh semua browser.
< Object > mendefinisikan sebuah objek tertanam dalam dokumen HTML.
Hal ini digunakan untuk menanamkan plug-in (seperti applet Java, pembaca PDF, Flash Player) dalam halaman web.
Contoh
< object width="400" height="50" data="bookmark.swf">< / object>
< Object> elemen juga dapat digunakan untuk memasukkan HTML dalam HTML:
Contoh
< object width="100%" height="500px" data="snippet.html">< /object>
Atau gambar jika Anda suka:
Contoh
< object data="audi.jpeg">< /object>
Catatan Perhatikan bahwa < embed > elemen tidak memiliki tag penutup. Tidak dapat berisi teks alternatif.

HTML YouTube

Cara termudah untuk memutar video dalam HTML, adalah dengan menggunakan YouTube.
<!DOCTYPE html>
<html>
<body>

<iframe width="560" height="315" src="https://www.youtube.com/embed/wdM8NA6gNXs" frameborder="0" allowfullscreen></iframe>

</body>
</html>

HTML APIs

HTML Geolocation

Cari Posisi Pengguna

HTML Geolocation API digunakan untuk mendapatkan posisi geografis pengguna.
Karena ini bisa kompromi privasi pengguna, posisi tidak tersedia kecuali pengguna menyetujuinya.
Internet Explorer 9 +, Firefox, Chrome, Safari dan Opera mendukung Geolocation.
Catatan: Geolocation jauh lebih akurat untuk perangkat dengan GPS, seperti iPhone.

Menggunakan HTML Geolocation

Gunakan metode getCurrentPosition () untuk mendapatkan posisi pengguna.
Contoh di bawah ini adalah contoh sederhana Geolocation kembali garis lintang dan bujur dari posisi pengguna:
<!DOCTYPE html>
<html>
<body>

<p>klik untuk mendapatkan lokasi</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else { 
x.innerHTML = "Geolocation is not supported by this browser.";
}
}

function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude + 
"<br>Longitude: " + position.coords.longitude;	
}
</script>

</body>
</html>

HTML Drag/Drop

Drag dan drop adalah fitur yang sangat umum. Ini adalah ketika Anda "ambil" objek dan tarik ke lokasi yang berbeda.
Support dengan browser : Internet Explorer 9 +, Firefox, Opera, Chrome, dan Safari dukungan drag dan drop.
Catatan: Drag and drop tidak bekerja di Safari 5.1.7 dan versi sebelumnya.
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag the NOMOR1 image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

HTML Local Storage

Apa HTML Penyimpanan Lokal?

Dengan penyimpanan lokal, aplikasi web dapat menyimpan data secara lokal dalam browser pengguna.
Sebelum HTML5, data aplikasi harus disimpan dalam cookie, termasuk dalam setiap permintaan server. Penyimpanan lokal lebih aman, dan sejumlah besar data dapat disimpan secara lokal, tanpa mempengaruhi kinerja website.
Tidak seperti cookies, batas penyimpanan yang jauh lebih besar (setidaknya 5MB) dan informasi tidak pernah ditransfer ke server.
Penyimpanan lokal adalah per domain. Semua halaman, dari satu domain, dapat menyimpan dan mengakses data yang sama.
Penyimpanan lokal didukung di Internet Explorer 8+, Firefox, Opera, Chrome, dan Safari.
Catatan: Internet Explorer 7 dan versi sebelumnya, tidak mendukung Penyimpanan Web.

HTML Penyimpanan Lokal Objects

HTML penyimpanan lokal menyediakan dua objek untuk menyimpan data pada klien:
window.localStorage - menyimpan data tanpa tanggal kedaluwarsa
window.sessionStorage - menyimpan data untuk satu sesi (data hilang ketika tab ditutup)
Sebelum menggunakan penyimpanan lokal, periksa dukungan browser untuk localStorage dan sessionStorage:
if(typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage. 
} else {
// Sorry! No Web Storage support..
}

The localStorage Object

Objek localStorage menyimpan data tanpa tanggal kedaluwarsa. Data tidak akan dihapus ketika browser ditutup, dan akan tersedia pada hari berikutnya, minggu, atau tahun.
Contoh
<div id="result"></div>

<script>
// Check browser support
if (typeof(Storage) != "undefined") {
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>
Keterangan
Buat nama localStorage / nilai pasangan dengan name = "nama belakang" dan value = "Smith" Ambil nilai "nama belakang" dan masukkan ke dalam elemen dengan id = "hasil"
Contoh di atas juga bisa ditulis seperti ini:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
Sintaks untuk menghapus "nama belakang" item localStorage adalah sebagai berikut:
localStorage.removeItem("lastname");
Catatan: Nama / nilai pasangan selalu disimpan sebagai string. Ingatlah untuk mengkonversikannya ke format lain bila diperlukan!
Contoh berikut menghitung berapa kali pengguna telah mengklik tombol. Dalam kode ini string nilai dikonversi menjadi angka untuk dapat meningkatkan counter:
Contoh
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button><p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>

The sessionStorage Object

Objek sessionStorage sama dengan objek localStorage, kecuali bahwa itu menyimpan data hanya untuk satu sesi. Data akan dihapus saat pengguna menutup jendela browser.
Contoh berikut menghitung berapa kali pengguna telah mengklik tombol, dalam sesi saat ini:
Contoh
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
</body>
</html>

HTML App Cache

Dengan aplikasi tembolok mudah untuk membuat versi offline aplikasi web, dengan membuat file manifest tembolok.
Apa Aplikasi Cache?
HTML5 memperkenalkan Cache aplikasi, yang berarti bahwa aplikasi web cache, dan dapat diakses tanpa koneksi internet.
Cache aplikasi memberikan sebuah aplikasi tiga keuntungan:
  - Offline browsing - pengguna dapat menggunakan aplikasi ini ketika mereka sedang offline
  - Kecepatan - cache sumber memuat lebih cepat
  - Mengurangi beban server - browser hanya akan mendownload update / mengubah sumber daya dari server
<!DOCTYPE html>
<html manifest="demo_html.appcache">
<body>

<script src="demo_time.js"></script>

<p id="timePara"><button onclick="getDateTime()">Get Date and Time</button></p>

<p><img src="img_logo.gif" width="336" height="69"></p>

<p>Try opening <a href="tryhtml5_html_manifest.htm" target="_blank">this page</a>, then go offline, and reload the page. The script and the image should still work.</p>

</body>
</html>
Setiap halaman dengan atribut manifest ditentukan akan di-cache ketika pengguna mengunjungi itu. Jika atribut nyata tidak ditentukan, halaman tidak akan di-cache (kecuali halaman ditentukan langsung dalam file manifest).
Ekstensi file yang dianjurkan untuk file manifest adalah: ".appcache"
Catatan :Sebuah file manifest perlu disajikan dengan jenis media yang benar, yaitu "text / cache-manifest". Harus dikonfigurasi pada server web.
The Manifest Berkas
File manifest adalah file teks sederhana yang memberitahu browser apa untuk cache (dan apa yang harus pernah Cache).
File manifest memiliki tiga bagian:
CACHE MANIFEST - File terdaftar di bawah header ini akan di-cache setelah mereka di-download untuk pertama kalinya
NETWORK - File terdaftar di bawah header ini membutuhkan koneksi ke server, dan tidak akan pernah cache
Cadangan - File terdaftar di bawah header ini menentukan halaman mundur jika halaman tidak bisa diakses
Hati-hati dengan apa yang Anda cache.
Setelah file cache, browser akan terus menunjukkan versi cache, bahkan jika Anda mengubah file di server. Untuk memastikan update browser cache, Anda perlu mengubah file manifest.
Catatan: Browser mungkin memiliki batas ukuran yang berbeda untuk data cache (beberapa browser memiliki batas 5MB per situs).

HTML Web Workers

Seorang pekerja web adalah JavaScript yang berjalan di latar belakang, tanpa mempengaruhi kinerja halaman.
Apa yang dimaksud dengan Pekerja Web?
Ketika menjalankan skrip di halaman HTML, halaman menjadi tidak responsif sampai script selesai.
Seorang pekerja web adalah JavaScript yang berjalan di latar belakang, independen dari script lain, tanpa mempengaruhi kinerja halaman. Anda dapat terus melakukan apa pun yang Anda inginkan: mengklik, memilih hal-hal, dll, sedangkan pekerja web berjalan di latar belakang.
HTML Web worker support dengan semua browser
<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"> </output>  </p>
<button onclick="startWorker()">Start Worker</button>>
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<script>
var w;

function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
}
}

function stopWorker() { 
w.terminate();
w = undefined;
}
</script>

</body>
</html>

Hasil

Count numbers:
  

HTML SSE

Server-Sent Events memungkinkan halaman web untuk mendapatkan update dari server.

Server-Sent Events - One Way Pesan

Sebuah peristiwa-server dikirim adalah ketika sebuah halaman web secara otomatis mendapatkan update dari server.
Hal ini juga mungkin sebelumnya, tetapi halaman web harus bertanya jika ada update yang tersedia. Dengan peristiwa-server dikirim, update datang secara otomatis.
Contoh: update Facebook / Twitter, update harga saham, feed berita, hasil olahraga, dll

Browser yang support

Server-Sent Events didukung di semua browser utama (Firefox,Opera,Google Chrome,Safari), kecuali Internet Explorer.
Menerima Server-Sent Pemberitahuan Acara
Objek EventSource digunakan untuk menerima pemberitahuan event-server dikirim:
<!DOCTYPE html>
<html>
<body>

<h1>Getting server updates</h1>
<div id="result"></div>

<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "
";
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>

</body>
</html>
  • Membuat objek EventSource baru, dan menentukan URL dari halaman pengiriman update
  • Setiap kali update diterima, acara onmessage terjadi
  • Ketika acara onmessage terjadi, menempatkan data yang diterima ke dalam elemen dengan id = "hasil"

Periksa Server-Sent Events Dukungan

Pada contoh di atas tryit ada beberapa baris tambahan kode untuk memeriksa dukungan browser untuk acara-server dikirim:
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code..... 
} else {
// Sorry! No server-sent events support..
}
Server-Side Kode Contoh
Sebagai contoh di atas untuk bekerja, Anda memerlukan server yang mampu mengirimkan update data (seperti PHP atau ASP).
Server-side sintaks aliran acara sederhana. Mengatur "Content-Type" header "text / event-stream". Sekarang Anda dapat mulai mengirim event stream.
Kode di PHP (demo_sse.php):
< ?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
? >
Kode di ASP (VB) (demo_sse.asp):
< %
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
% >

Keterangan:

Mengatur "Content-Type" header "text / event-stream"
Tentukan bahwa halaman tidak harus cache
Output data untuk mengirim (Selalu mulai dengan "Data:")
Siram data output kembali ke halaman web
The EventSource Object
Dalam contoh di atas kita menggunakan event onmessage untuk mendapatkan pesan. Tapi acara lainnya juga tersedia:
EventsDescription
onopenKetika koneksi ke server dibuka
onmessageKetika pesan diterima
onerrorKetika terjadi kesalahan
Diposting oleh

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)