TỔNG QUAN VỀ HTML5
Khi lần đầu tiên tìm hiểu về thiết kế web, bạn sẽ đối mặt với một số khó khăn về các thuật ngữ, đây là lý do tại sao bạn nên tập trung vào việc tìm hiểu các ngôn ngữ và kỹ thuật này một cách cụ thể. Nếu bạn đang học cách thiết kế web hoặc phát triển nó trong một thời gian gần đây hay thậm chí bạn ...
Khi lần đầu tiên tìm hiểu về thiết kế web, bạn sẽ đối mặt với một số khó khăn về các thuật ngữ, đây là lý do tại sao bạn nên tập trung vào việc tìm hiểu các ngôn ngữ và kỹ thuật này một cách cụ thể.
Nếu bạn đang học cách thiết kế web hoặc phát triển nó trong một thời gian gần đây hay thậm chí bạn là một chuyên gia trong lĩnh vực web, chắc chắn bạn đã nghe nghe mọi người nhắc đến HTML5 ở một nơi nào đó. Vậy HTML5 là gì?
Bài viết dưới đây sẽ cung cấp cho bạn một cái nhìn tổng quan về những gì HTML đang cố gắng đạt được và nơi bạn có thể tìm kiếm thông tin chi tiết về ngôn ngữ này.
Thời gian phát triển của công nghệ web
| 1991 | 1994 | 1996 | 1997 | 1998 | 2000 | 2002 | 2005 | 2009 |
|---|---|---|---|---|---|---|---|---|
| HTML | HTML 2 | CSS 1 + JavaScript | HTML 4 | CSS 2 | XHTML 1 | Tableless Web Design | AJAX | HTML 5 |
HTML 5 là gì?
Về cơ bản, HTML 5 là một phiên bản mới sửa đổi thứ 5 của ngôn ngữ World Wide Web: the Hypertext Markup Language (HTML).HTML 5 sẽ cho phép một lớp ứng dụng web mới ra đời, hỗ trợ nội dung đa phương tiện và các chức năng offline mà không cần đến những công nghệ độc quyền đi kèm.
HTML 5 ~= HTML + CSS + JS
HTML 5 Web Storage
Với HTML5, trang web có thể lưu dữ liệu ở local bằng trình duyệt web của người dung. Trước đây việc lưu trữ local của cookies, tuy nhiên Web Strorage bảo mật và chạy nhanh hơn. Dữ liệu không gửi lên server nên do đó chỉ người dùng có thể truy cập được khi dung. Nó có thể lưu một lượng dự liệu lớn mà không làm ảnh hưởng đến hiệu suất của website. Dữ liệu được lưu thành một cặp khóa / giá trị, và trang web chỉ có thể truy xuất đến dữ liệu chính nó tạo ra nghĩa là trang nào chỉ thấy dữ liệu trang web đó.
Ví dụ một ứng dụng tra cứu sách trực tuyến, các sách đã được tra sẽ được lưu lại trên máy của người dung. Khi cần tra lại, máy người dung sẽ không cần kết nối đến server để tải lại những dữ liệu cũ.
Web Storage được hỗ trợ trên trình duyệt Internet Explorer 8 +, Firefox, Opera, Chrome, Safari.
Đối tượng localStorage: stores data không thời hạn. Dữ liệu sẽ không bị xóa khi tắt trình và nó luôn luôn có sẵn khi ta cần truy xuất.
Ví dụ dưới đây đếm số lần click chuột vào nút button. Trong đoạn code sau có phần chuyển chuỗi thành số để cộng dồn vào kết quả.
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).";
Đối tượng sessionStorage: stores data cho một seesion, dữ liệu được lưu chỉ trong 1 phiên làm việc và bị xóa đi khi tắt trình duyệt. Ví dụ :
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.";
HTML 5 Application Cache
- Với HTML 5 bạn dễ dàng tạo ra ứng dụng web offline mà không cần đến kết nối internet.
- Application cache có ba lợi thế sau:
- Duyệt web offline: người dùng có thể dùng ứng dụng web offline mà không cần kết nối internet.
- Tốc độ: cache có tốc độ nhanh.
- Giảm tải cho server: trình duyệt chỉ cần tải những cập nhật từ server.
Cơ bản về Cache Manifest
- Để kích hoạt application cache, chèn thuộc tính manifest vào thẻ <html>
`<!DOCTYPE HTML>
<html manifest="demo.appcache"> ... </html> ` - Một trang có thuộc tính manifest sẽ được lưu lại trong bộ nhớ cache khi người dùng truy cập đến nó. Phần mở rộng của files manifest là : “.appcache”. Lưu ý: bạn phải cấu hình máy chủ “/text/cache-manifest” để chạy được file manifest.File Manifest:
-
Là một file đơn giản, nó báo cho trình duyệt web những gì cần lưu cache.
-
File manifest có ba thành phần:
-
CACHE MANIFEST: danh sách những file sẽ cache sau khi truy cập qua.
#—từ khóa cần khai báo CACHE MANIFEST /theme.css /logo.gif /main.js
-
NETWORK: danh sách file bắt buộc phải có kết nối internet và không bao giờ lưu vào cache.
NETWORK: login.asp # yêu càu các trang phải có kết nối internet*
-
FALLBACK: liệt kê danh sách những trang dự phòng khi trang mong muốn không truy cập được. Ví dụ dưới đây cho quy định file “offline.html” chạy trong trường hợp không có kết nối interner.
FALLBACK: /html/ /offline.html
-
Cập nhật Cache
Nếu một ứng dụng đã được cache thì ứng dụng đó vẫn còn cache cho tới khi gặp một trong các việc sau:
- Người dùng xóa cache
- File manifest bị chỉnh sửa
- Ứng dụng cache là một chương trình cập nhật.
- Bạn muốn xóa cache thì sử dụng lệnh:
- chrome://appcache-internals/
- Note: Bạn phải cẩn thận khi thao tác với cache. Một file bị cache thì trình duyệt sẽ tiếp tục hiển thị phiên bản cache trước đó, cho dù bạn thay đổi file trên server thì máy trạm vẫn hiện bản cache cũ. Do đó, muốn cache được cập nhật thì bạn phải thay đổi file manifest.
HTML 5 Web Workers
Khi thực thi một scripts trong trang HTML thì trang sẽ không thực hiện giao tiếp với server cho đến khi script hoàn thành. Một web workers là một Javascript chạy dưới nền web, độc lập với các script khác và không làm ảnh hưởng đến hiệu suất của trang. Bạn có thể làm mọi thứ như click chuột, quét chọn… trong khi web worker đang chạy.
Web worker được hỗ trợ bởi hầu hết các trình duyệt, ngoại trừ Internet Explorer. Kiểm tra trình duyệt có hỗ trợ Web Worker
if(typeof(Worker)!=="undefined") { // Có hỗ trợ // Viết code..... } else { // Xin lỗi! không hỗ trợ rồi.. }
** Ví dụ:**
- Tạo một file demo_workers.js
var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount();
- Phương thức postMessage() dùng để gửi thông tin đến trang HTML. Kiểm tra worker có hay chưa, nếu chưa tạo web worker mới
if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); }
- Sau đó có thể gửi và nhận thông tin từ web worker
w.onmessage=function(event){ document.getElementById("result").innerHTML=event.data; };
- Hủy work worker
w.terminate();
- Code hoàn chỉnh
<!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(); } </script>
HTML 5 Geolocation (Định vị người dùng)
-
HTML 5 Geolocation API được sử dụng để định vị vị trí địa lý người dùng. Việc xác định vị trí người dùng là thỏa thuận giữa hai bên, do đó nếu người đung không chấp thuận cho biết vị trí của mình thì ta không biết được.
-
Lấy vị trí người dùng sử dụng hàm
getCurrentPosition()
-
Định vị đơn giản trả về các vĩ dộ và kinh độ của vị trí người sử dụng
<script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } } </script>
- Hiển thị kết quả trên bản đồ
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="";
}
HTML 5 Audio tag và Video tag
- Tag <audio> định nghĩa âm thanh như nhạc hay trường audio khác.
- Tag <video> xác định một video, chẳng hạn như một phim hoặc một trường video.
- Thường dùng với tag <source> để hiển thị được nhiều nội dung hơn.
<audio src = “đường dẫn tới file audio” controls = “controls”>Your browser does not support the audio tag</audio> >video src = “đường dẫn tới file video” controls = “controls”> Your brower does not support the video tag</video>
- Dòng text nằm giữa <audio> </audio> sẽ hiển thị khi trình duyệt không hỗ trợ tag <audio>
- Trình duyệt hỗ trợ: Internet Explorer 9+, Firefox, Opera, Chrome, Safari.
- Định dạng của file audio
| Format | Mime-Type |
|---|---|
| Mp3 | |
| Ogg | |
| Wav |
- Định dạng file video
|Format|Mime-type| |-||-| |Mp4||Video/mp4| |webM||Video/webm| |Ogg||Video/ogg|
|Thuộc tính Audio|Giá trị|Ví dụ|Mô tả| |-||-||-||-| |Autoplay||Autoplay||Autoplay = “autoplay”||Âm thanh tự động chạy| |Controls||Controls||Controls = “controls”||Hiển thị tính năng điều khiển| |Lopp||Lopp||Loop = “loop”||Hiển thị chức năng lặp lại khi chạy xong đoạn âm thanh| |Preload||Auto, Metadata, None||Preload = “auto”||Xác định âm thanh có chạy không khi tải lại trang| |Src||URL||Src = “media/audio.mp3”||Xác định đường dẫn tới file âm thanh|
