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.
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ẻ
`
… ` – 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.. }
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()
HTML 5 Audio tag và Video tag
Tag
