Penerapan HTML (Part 18)
I.Latar Belakang.
Latar belakang kali ini kita masih mengenal sintag tentang HTML apa saja yang di butuhkan untuk membuat web dasar
II.Alat dan Bahan.
Laptop / PC
W3SCHOOLS
Sublime text
III.Tujuan.
untuk mengetahui langkah dasar untuk membuat web yang sederhana.
IV.Penjelasan.
HTML5 Geolocation
Cari Posisi Pengguna
HTML Geolocation API digunakan untuk mendapatkan posisi geografis pengguna.Karena ini bisa kompromi privasi, posisi ini tidak tersedia kecuali pengguna menyetujuinya.
Menggunakan Geolocation HTML
getCurrentPosition () metode yang digunakan untuk mengembalikan posisi pengguna.Contoh:
Maka outputnya :
Contoh menjelaskan:
- Periksa apakah Geolocation didukung
- Jika didukung, menjalankan metode getCurrentPosition (). Jika tidak, menampilkan pesan ke pengguna
- Jika metode getCurrentPosition () berhasil, ia mengembalikan koordinat keberatan dengan fungsi yang ditentukan dalam parameter (showPosition)
- The showPosition () fungsi output Lintang dan Bujur
Penanganan Kesalahan dan Penolakan
Parameter kedua metode getCurrentPosition () digunakan untuk menangani kesalahan. Ini menentukan fungsi untuk menjalankan jika gagal untuk mendapatkan lokasi penggunaContoh :
Maka outputnya :
Menampilkan Hasil dalam Peta
Untuk menampilkan hasilnya dalam peta, Anda memerlukan akses ke layanan peta, seperti Google Maps.Pada contoh di bawah ini, garis lintang dan bujur kembali digunakan untuk menunjukkan lokasi di Google Map (menggunakan gambar statis)
Contoh :
Maka outputnya :
Informasi spesifik lokasi
Halaman ini telah menunjukkan bagaimana untuk menunjukkan posisi pengguna pada peta.Geolocation juga sangat berguna untuk informasi lokasi-spesifik, seperti:
- Up-to-date informasi lokal
- Menampilkan Poin-of-bunga di dekat pengguna
- Turn-by-turn navigasi (GPS)
Geolocation Object - Metode menarik lainnya
Objek Geolocation juga memiliki metode menarik lainnya:- watchPosition () - Mengembalikan posisi saat pengguna dan terus kembali posisi diperbarui sebagai pengguna bergerak (seperti GPS di mobil).
- clearWatch () - Menghentikan metode watchPosition ().
HTML5 Drag dan Drop
Drag dan Drop
Drag dan drop adalah fitur yang sangat umum. Ini adalah ketika Anda "ambil" sebuah objek dan tarik ke lokasi yang berbeda.Dalam HTML5, drag dan drop merupakan bagian dari standar: Setiap elemen dapat diseret.
Drag HTML dan Drop Contoh
Contoh :
Maka outputnya :
Membuat Elemen Draggable
Pertama-tama: Untuk membuat elemen draggable, mengatur atribut draggable untuk benar:
<img draggable="true">
Apa yang harus Tarik - ondragstart dan setData ()
Kemudian, tentukan apa yang harus terjadi ketika elemen diseret.Dalam contoh di atas, atribut ondragstart panggilan fungsi, drag (event), yang menentukan data apa yang akan diseret.
The dataTransfer.setData () metode menetapkan jenis data dan nilai data diseret:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
Dalam hal ini, jenis data "text" dan nilai adalah id dari elemen diseret ( "drag1").Dimana untuk Drop - ondragover
Acara ondragover menentukan di mana data menyeret dapat dijatuhkan.Secara default, data / unsur tidak dapat dijatuhkan dalam elemen lainnya. Untuk memungkinkan drop, kita harus mencegah penanganan default dari elemen.
Hal ini dilakukan dengan memanggil event.preventDefault () metode untuk acara ondragover:
event.preventDefault()
Melakukan Drop - ondrop
Ketika data menyeret dijatuhkan, peristiwa penurunan terjadi.Dalam contoh di atas, atribut ondrop panggilan fungsi, drop (event):
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Kode menjelaskan:- Sebut preventDefault () untuk mencegah penanganan default browser dari data (default terbuka sebagai link pada drop)
- Mendapatkan data diseret dengan metode dataTransfer.getData (). Metode ini akan mengembalikan data yang ditetapkan untuk jenis yang sama di setData () metode
- Data yang diseret adalah id dari elemen diseret ( "drag1")
- Menambahkan elemen diseret ke elemen penurunan
Drag gambar bolak-balik
Cara tarik (dan drop) gambar bolak-balik antara dua <div> elemenContoh :
Maka outputnya :
HTML5 Penyimpanan Lokal
Apa itu HTML Penyimpanan lokal?
Dengan penyimpanan lokal, aplikasi web dapat menyimpan data secara lokal dalam browser pengguna.Sebelum HTML5, data aplikasi harus disimpan dalam cookies, 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 jauh lebih besar (setidaknya 5MB) dan informasi yang tidak pernah ditransfer ke server.
penyimpanan lokal adalah per asal (per domain dan protokol). Semua halaman, dari satu asal, dapat menyimpan dan mengakses data yang sama.
HTML Penyimpanan Lokal Objects
HTML penyimpanan lokal menyediakan dua objek untuk menyimpan data pada klien:- window.localStorage - menyimpan data tanpa tanggal kedaluwarsa
- menyimpan data untuk satu sesi (data hilang ketika tab browser ditutup) - window.sessionStorage
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
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 menjelaskan:
- Buat nama localStorage / nilai pasangan dengan nama = "nama belakang" dan value = "Smith"
- Mengambil nilai dari "nama belakang" dan masukkan ke dalam elemen dengan id = "hasil"
// 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: pasang Nama / nilai selalu disimpan sebagai string. Ingatlah untuk mengkonversikannya ke format lain bila diperlukan!
Contoh :
Maka outputnya :
sessionStorage Object
sessionStorage objek sama dengan objek localStorage, kecuali bahwa itu menyimpan data hanya untuk satu sesi. Data tersebut dihapus ketika pengguna menutup tab browser tertentu.Contoh :
Maka outputnya :
HTML5 Aplikasi Cache
Apa Aplikasi Cache?
HTML5 memperkenalkan tembolok aplikasi, yang berarti bahwa aplikasi web-cache, dan dapat diakses tanpa koneksi internet.Cache aplikasi memberikan sebuah aplikasi tiga keuntungan:
- Browsing offline - pengguna dapat menggunakan aplikasi ini ketika mereka sedang offline
- Kecepatan - sumber cache memuat lebih cepat
- Mengurangi beban server - browser hanya akan mendownload update / sumber berubah dari server
HTML Cache Manifest Contoh
Contoh di bawah ini menunjukkan sebuah dokumen HTML dengan manifest cache (untuk browsing offline)Contoh :
Cache Manifest Dasar
Untuk mengaktifkan aplikasi cache, termasuk atribut manifest di <html> tag dokumen ini:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
Setiap halaman dengan atribut manifest ditentukan akan di-cache ketika pengguna mengunjungi itu. Jika atribut manifes tidak ditentukan, halaman tidak akan di-cache (kecuali halaman ditentukan langsung dalam file manifest).ekstensi file yang direkomendasikan untuk file manifest adalah: ".appcache"
Manifest Berkas
File manifest adalah file teks sederhana, yang memberitahu browser apa untuk cache (dan apa yang tidak pernah Cache).File manifest memiliki tiga bagian:
- CACHE MANIFEST - Files terdaftar di bawah header ini akan di-cache setelah mereka di-download untuk pertama kalinya
- NETWORK - Files terdaftar di bawah header ini membutuhkan koneksi ke server, dan tidak akan pernah cache
- Fallback - Files terdaftar di bawah header ini menentukan halaman fallback jika halaman tidak bisa diakses
CACHE MANIFEST
Baris pertama, CACHE MANIFEST, diperlukan:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
File manifest di atas berisi tiga sumber: file CSS, gambar GIF, dan file JavaScript. Ketika file manifest dimuat, browser akan men-download tiga file dari direktori root dari situs web. Kemudian, setiap kali pengguna tidak terhubung ke internet, sumber daya akan tetap tersedia.JARINGAN
Bagian NETWORK bawah menentukan bahwa file "login.asp" tidak boleh cache, dan tidak akan tersedia secara offline:
NETWORK:
login.asp
Tanda bintang dapat digunakan untuk menunjukkan bahwa semua sumber daya lainnya / file membutuhkan koneksi internet:
NETWORK:
*
fallback
Bagian fallback bawah menetapkan bahwa "offline.html" akan disajikan di tempat semua file di / html / katalog, dalam hal koneksi internet tidak dapat dibangun:
FALLBACK:
/html/
/offline.html
Catatan: The URI pertama adalah sumber daya, yang kedua adalah fallback.Memperbarui Cache Setelah aplikasi di-cache, tetap cache sampai salah satu dari berikut terjadi:
- Pengguna membersihkan cache browser
- File manifest dimodifikasi (lihat tip di bawah ini)
- Cache aplikasi pemrograman diperbarui
Contoh - Complete Cache Manifest Berkas
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/
/offline.html
Catatan tentang Aplikasi Cache
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 browser update cache, Anda perlu mengubah file manifest.
Catatan: Browser mungkin memiliki batas ukuran yang berbeda untuk data cache (beberapa browser memiliki batas 5MB per situs).
HTML5 Pekerja Web
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, secara independen dari script lainnya, tanpa
mempengaruhi kinerja halaman. Anda dapat terus melakukan
apa pun yang Anda inginkan: mengklik, memilih hal-hal, dll, sementara
pekerja web berjalan di latar belakang.
HTML Web Workers Contoh
Contoh :
Maka outputnya:
Lihat Dukungan Web Worker
Sebelum membuat seorang pekerja web, memeriksa apakah browser pengguna mendukung itu:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
}
else {
// Sorry! No Web Worker support..
}
Buat File Web Worker
Sekarang, mari kita membuat pekerja web kami di JavaScript eksternal.
Di sini, kita buat script yang penting. script disimpan di "demo_workers.js" file:
var i = 0;
function timedCount()
{
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
Bagian penting dari kode di atas adalah postMessage () metode - yang digunakan untuk mengirim pesan kembali ke halaman HTML.
Catatan: pekerja web Biasanya tidak digunakan untuk script sederhana seperti, tapi untuk lebih CPU intensif tugas.
Buat Object Web Worker
Sekarang bahwa kita memiliki file web worker, kita perlu menyebutnya dari halaman HTML.
Baris berikut memeriksa apakah pekerja sudah ada, jika
tidak - itu menciptakan objek pekerja web baru dan menjalankan kode di
"demo_workers.js":
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
Maka kita bisa mengirim dan menerima pesan dari pekerja web.
Tambahkan "onmessage" pendengar acara untuk pekerja web.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Ketika tulisan pekerja web pesan, kode dalam acara pendengar dijalankan. Data dari pekerja web disimpan dalam event.data.
Hentikan Pekerja Web
Jika benda pekerja web dibuat, akan terus mendengarkan pesan (bahkan setelah skrip eksternal selesai) sampai diakhiri.
Untuk mengakhiri pekerja web, dan sumber informasi gratis browser / komputer, menggunakan metode mengakhiri ():
w.terminate();
Menggunakan kembali Pekerja Web
Jika Anda mengatur variabel pekerja untuk undefined, setelah itu telah dihentikan, Anda dapat menggunakan kembali kode:
w = undefined;
Penuh Web Worker Contoh Kode
Kami telah melihat kode Pekerja dalam file js. Berikut ini adalah kode untuk halaman HTML
Contoh :
Maka outputnya :
Pekerja web dan DOM
Karena pekerja web dalam file eksternal, mereka tidak memiliki akses ke objek JavaScript berikut:
- Jendela objek
- Objek dokumen
- Induk objek
HTML5 Server-Sent Events
rver-Sent Events - One Way Messaging
Sebuah peristiwa server mengirim adalah ketika sebuah halaman web secara otomatis mendapatkan update dari server.
Ini juga mungkin sebelum, tetapi halaman web harus bertanya jika ada update yang tersedia. Dengan event server-mengirim, update datang secara otomatis.
Contoh: Facebook / Twitter update, update harga saham, feed berita, hasil olahraga, dll
Menerima Server-Sent Pemberitahuan Kegiatan
Objek EventSource digunakan untuk menerima pemberitahuan acara server mengirim
Contoh :
Maka outputnya :
contoh menjelaskan:
- Membuat objek EventSource baru, dan menentukan URL dari halaman mengirimkan update (dalam contoh ini "demo_sse.php")
- 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 tryit atas ada beberapa baris tambahan kode untuk memeriksa dukungan browser untuk event server-terkirim:
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
}
else {
// Sorry! No server-sent events support..
}
Server-Side Kode Contoh
Misalnya di atas untuk bekerja, Anda memerlukan server yang dapat mengirim update data (seperti PHP atau ASP).
Server-side sintaks aliran acara sederhana. Mengatur "Content-Type" header "text / event-stream". Sekarang Anda dapat mulai mengirim aliran acara.
Kode 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()
%>
Kode menjelaskan:
- Mengatur "Content-Type" header "text / event-stream"
- Menentukan bahwa halaman tidak harus cache
- Output data untuk mengirim ( Selalu mulai dengan "Data:")
- Menyiram output data kembali ke halaman web
V.Kesimpulan.
dapat kita simpulkan bahwa trik trik dasar itu harus kita pelajari agar kita dapat membuat suatu web sederhana yang maximal.
VI.Refrensi.
http://www.w3schools.com/htm
Komentar
Posting Komentar