GIÁO TRÌNH HTML5

69 65 0
GIÁO TRÌNH HTML5

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

Giáo trình HTML5 MỤC LỤC Giới thiệu giáo trình HTML5 (1) HTML5 tag ( Thẻ HTML5) (2) HTML5 Attribute ( thuộc tính HTML5) (3) HTML5 Graphics (HTML5Giao diện đồ họa ) (4)HTML5 Media (Đa phương tiện HTML5) (5) HTML API HTML5 Tag (thẻ ) (1) Các thẻ định nghĩa nhóm nội dung (2) Các thẻ định nghĩa nội dung cụ thể, control html (1) Thẻ details : (2) Thẻ datalist (3) Thẻ dialog (4) Thẻ embed (5) Danh sách thẻ HTML5 định nghĩa nội dung (3) Các thẻ đặc biệt khác 10 (4) Những Tag không HTML5 hỗ trợ 11 HTML5 Attribute ( thuộc tính HTML5) 11 3.1 Attribute hỗ trợ nhập liệu 12 3.2 Attribute hỗ trợ kiểm tra nhập liệu 12 3.3Các ví dụ 13 (1) Form nhập liệu 13 (2) Xây dựng biểu thức qui (Regular) kiểm tra nhập liệu HTML5 16 (3) Form tự động điền với Autocomplete 18 (4) Thuộc tính form 19 HTML đồ họa Canvas - SVG 20 4.1 HTML5 Canvas 20 (1) Vẽ đường thẳng canvas 20 (2) Vẽ đường tròn canvas : 21 (3) Vẽ ảnh canvas 23 (4) Di chuyển ảnh canvas 26 (5) Viết chữ lên canvas 27 CuuDuongThanCong.com https://fb.com/tailieudientucntt (6) Vẽ đường cong bậc hai Quadratic Curve 28 (7) Vẽ đường cong Bizier Curve 30 (8) Vẽ đường Canvas Path 31 (9) Vẽ đường tùy chỉnh (Sharp) 32 (10) Xây dựng thư viện lập trình OOP JavaScript hỗ trợ lập trình HTML5 33 (11) Lập trình cờ tướng canvas HTML5 34 4.2 HTML5 SVG 47 HTML đa phương tiện (Media) 48 5.1 Phát Video HTML5 48 (1) Trình xem video mặc định 48 (2) Tùy chỉnh trình mở video 49 5.2 Phát nhạc HTML5 50 HTML5 API 50 6.1 Xác định vùng địa lý với HTML5 Geolocation 50 (1) Giới thiệu Geolocation 50 (2) Hàm xử lý lỗi cho Geolocaltion 52 (3) Hiển thị vị trí người dùng lên đồ google maps 54 6.2 HTML5 Drag Drop (kéo - thả HTML5) 55 (1) Kéo thả chiều 55 (2) Kéo thả chiều 56 6.3 HTML5 Web Storage(lưu trữ liệu Client HTML5) 59 (1) Đối tượng Web Storage 59 (2) Đối tượng localStorage 60 (3) Đối tượng sessionStorage 60 (4) Lưu trữ mảng đối tượng vào web Storage 61 6.4 Bộ nhớ Cache cho ứng dụng HTML5 62 HTML5 Web Worker 63 Tổng kết HTML5 thay Flash, Silverlight HTML5 65 Phụ lục tag HTML5 65 CuuDuongThanCong.com https://fb.com/tailieudientucntt Giới thiệu giáo trình HTML5 - HTML5 mở cách mạng lập trình giao diện web , từ giao diện đồ họa ,API, nhập liệu,tag … - Đó lý đáng để học HTML5 để áp dụng vào website thay cho công nghệ truyền thống flash , silverlight - Tài liệu cung cấp đầy đủ tính công nghệ HTML5 thời điểm (HTML5 nghiên cứu hoàn thiện phát triển ) Chúng cung cấp kiến thức tổng quan , cốt lõi để bạn hiểu áp dụng vào ứng dụng - Ngồi tảng HTML5 lớn Tài liệu cung cấp khái niệm tag HTML5 , HTML5 API , HTML Media , HTML5 Attribute để bạn áp dụng vào thực tiễn - Với tảng HTML5 đồ họa ( canvas , svg) cung cấp khái niệm chi tiết Cuối chương chúng tơi cung cấp chi tiết thiết kế ứng dụng game cờ tướng HTML5 Tuy nhiên mã javascript nặng cần thiết cho bạn tìm hiểu HTML5 game dùng thêm thư viện bên Vấn đề phát triển game với HTML5 rộng bạn đọc có nhu cầu tìm hiểu đọc tài liệu thiết kế game với HTML5 chúng tơi - HTML cung cấp số tính sau : (1) HTML5 tag ( Thẻ HTML5) - HTML5 cung cấp thêm thẻ (tag) để định nghĩa nội dung tài liệu HTML : main , nav ,aside , datalist , progress… - Các thẻ datalist , progress … thực Control HTML giúp xây dựng giao diện tương tác người dùng tốt - Các thẻ main , nav , aside … lại thẻ trung tính thẻ div Chúng đời với mục đích chuẩn hóa tài liệu HTML.Như trang nhình vào tag HTML nội dung (mai) , đâu điều hướng menu ( nav ) hay nội dung liên quan (aside) Các thẻ có ý nghĩa lớn việc thiết kế website theo chuẩn SEO Các cỗ máy tìm kiếm google , binding dễ dàng index nội dung website Do thẻ thay đáng áp dụng việc thiết kế layout website thay cho thẻ div (2) HTML5 Attribute ( thuộc tính HTML5) - HTML5 cung cấp số atttribute hỗ trợ nhập liệu cho thẻ form : number , email , datetime… - Đây tính mạnh Trong lập trình web thường phải tạo form nhập liệu để người dùng nhập gửi liệu lên server xử lý - Trong nhập nhiệu chất dùng ô textbox nhập liệu Tuy nhiên vài yêu cầu muốn hỗ trợ người dùng nhập liệu kiểu liệu màu sắc , ngày tháng trước thường dùng thư viện Javascript tạo datetime Control , Color Control Nhưng HTML5 hỗ trợ nhiều thẻ nhập liệu giúp không cần phải dùng thêm thư viện bên CuuDuongThanCong.com https://fb.com/tailieudientucntt - Ngoài nhập liệu có u cầu kiểm tra nhập liệu (client validation) xem người dùng nhập có kiểu liệu khơng : ô phải nhập liệu , ô nhập liệu số , email Trước để làm điều phải viết biểu thức qui (Regular Expression) javascript để kiểm tra nhập liệu Hoặc dùng thêm thư viện javascript jquery validate , kedo ui … Nhưng HTML5 hỗ trợ biểu thức qui đầy đủ (3) HTML5 Graphics (HTML5Giao diện đồ họa ) - HTML5 cung cấp kỹ thuật đồ họa thông qua thẻ canvas svg - canvas hệ thống giao diện đồ họa pixcel Dùng javascript để vẽ - svg hệ thống giao diện đồ họa vecto dùng xml để vẽ - Với canvas svg vẽ thứ web : Điểm , đường thẳng , đường cong , hình ảnh - Đồng thời kết hợp với kỹ thuật lập trình hồn tồn tạo nên di chuyển đồ họa ( thực di chuyển việc biến đổi vị trí hình ảnh) - Do html5 canvas , svg hứa hẹn tạo nên tảng lập trình game tốt thay cho flash , silverlight (4)HTML5 Media (Đa phương tiện HTML5) - HTML5 cung cấp thẻ video audio phéo mở nhạc video tảng web - Ngoài kết hợp với HTML5 API tùy biến trình nghe nhạc , xem mang phong cách riêng - Các bạn xem việc trình diễn video dùng HTML5 từ trang http://www.yutube.com nhận hồn tồn tự xây dựng lên Control xem nhạc , video từ HTML5 (5) HTML API - Application Programming Interface :Giao diện ứng dụng lập trình - API hàm , phương thức ứng dụng bên ngồi gọi , tương tác để trao đổi thơng tin , tính toán - Việc trao đổi giúp nhà lập trình tạo service hỗ trợ lập trình viên khác tương tác với ứng dụng - Hiện web dịch vụ google , facebook cung cấp nhiều api để lập trình viên xây dựng tương tác website họ với google ,facebook - Mỗi phần mềm có cung cấp API để ứng dụng khác tương tác với - HTML5 cung cấp nhiều API dạng đối tượng javascript để tương tác với ứng dụng web - Với HTML5 API có tương tác xử lý lưu liệu client ( Web Storage) , cache , kéo thả đối tượng … HTML5 Tag (thẻ ) - HTML5 cung cấp nhiều thẻ html với ý nghĩa : CuuDuongThanCong.com https://fb.com/tailieudientucntt +) Thẻ dùng để qui định nội dung hiển thị : main , nav , aside +) Thẻ dùng tạo Control :datalist,progress - Việc dùng Control giúp tạo nhiều kiểu trình bày nội dung làm website thêm sinh động - Các thẻ qui định nội dung để làm code html trở nên rõ ràng , mạch lạc đặc biệt giúp ích nhiều cho cơng cụ tìm kiếm Đó lợi làm SEO website với HTML5 (1) Các thẻ định nghĩa nhóm nội dung HTML5 Mô tả Tag header Thể nội dung Thường tiêu đề website , tiêu đề nội dung footer Thể nội dung cuối Chân trang website , nội dung cuối tài liệu nav Nơi chứa link điều hướng website Menu website thường đặt thẻ aside Định nghĩa phần cố định,nội dung (menu dọc) Ta hiểu aside phần ghi , phần nội dung phụ Aside thường chứa nội dung bên ngồi nội dung (thường phần sidebar) article Định nghĩa nội dung độc lập riêng biệt ,có thể chứa nhiều section ngược lại section Chứa nội dung cụ thể website hgroup Định nghĩa nhóm tiêu đề - Chúng ta làm ví dụ dùng thẻ HTML5 để xây dựng Layout ( khung) giao diện website - Trước tất nội dung thường dùng thẻ div để nhóm khối Việc dùng ý nghĩa lập trình khơng vấn đề Nhưng code trở nên khó đọc khơng thân thiện với cơng cụ tìm kiếm - Dĩ nhiên thẻ header , footer ,aside dùng thiết kế layout cho nội dung website dùng cho thiết kế phần nhỏ nội dung cho website - Ta tạm hiểu thẻ qui định tiêu đề , chân tiêu đề , nội dung , nội dung cố định nội dung tài liệu html Trong tài liệu HTML lại chia thành tài liệu , ta lại dùng thẻ định nghĩa cho nội dung Dựng layout HTML5: Mã HTML : Tiêu đề wesite Trang Chủ Giới Thiệu Liên Hệ CuuDuongThanCong.com https://fb.com/tailieudientucntt

Phần :Nội dung website

Phần :Nội dung website

Nội dung sidebar Link 1 Link 2 Link 3 Chân trang website Mã CSS : main{ display:table; width:95%; } main{ width:70%; display:table-cell; background:#b6ff00; } aside{ width:30%; display:table-cell; background:#00ffff; } Chạy ứng dụng kết hình sau : - Ta thấy mã html5 định dạng layout đơn giản, ta thêm class thẻ chứa nội dung - Ở ta dùng thuộc tính display:table để định dạng Layout Cũng thuộc tính display:inlineblock chưa trình duyệt cũ hỗ trợ CuuDuongThanCong.com https://fb.com/tailieudientucntt - Để nhiều trình duyệt hỗ trợ ta dùng thuộc tính float:left để định dạng layout - Với CSS3 ta có kỹ thuật làm layout động , mềm dẻo dùng thuộc tính display:box - Các bạn xem tài liệu CSS3 để hiểu hết tất kỹ thuật làm layout CSS - Chú ý thẻ main chưa trình duyệt IE (Internet Explorer) hỗ trợ Do nên thay chúng thẻ article thẻ article ta thay thẻ section sau : Tiêu đề wesite Trang Chủ Giới Thiệu Liên Hệ

Phần :Nội dung website

Phần :Nội dung website

Nội dung sidebar Link 1 Link 2 Link 3 Chân trang website - Thông qua việc định nghĩa layout bạn thấy tài liệu HTML5 định nghĩa tag có ý nghĩa cụ thể , dễ đọc code.Không phải thuộc tính chung chung trước ! (2) Các thẻ định nghĩa nội dung cụ thể, control html - Ngồi tag gom nhóm có ý nghĩa mơ tả nội dung bên , HTML5 hỗ trợ tag định nghĩa nội dung cụ thể , hay control để tăng tính tương tác trực quan html - Chúng tơi ví dụ mẫu vài thẻ (1) Thẻ details : - Tag details dùng tạo Control gồm phần tiêu đề nội dung.Mặc định phần nội dung bị ẩn Khi click vào tiêu đề nội dung chi tiết - Tag summary tag details để mơ tả tiêu đề cho tag details Ví dụ : Xem Chi Tiết

Nội dung xem chi tiết

Thẻ detail hỗ trợ Chrome, Opera,Safari

CuuDuongThanCong.com https://fb.com/tailieudientucntt Chạy ví dụ kết hình sau : - Khi Click vào biểu tượng tiêu đề hiển thị nội dung chi tiết sau : (2) Thẻ datalist - Thẻ datalist tương tự thẻ select , dùng hiển thị danh sách nhập liệu (ComboBox) - Thẻ datalist thường dùng form nhập liệu (input form) HTML : Chọn trình duyệt: Chạy ví dụ kết hình sau : - Click vào nhập liệu hiển thị danh sách hình sau : CuuDuongThanCong.com https://fb.com/tailieudientucntt (3) Thẻ dialog -Thẻ dialog cho phép đánh dấu đàm thoại nhiều người mạng Trong xác định người nói chứa nội dung đàm thoại HTML : Bạn A: Xin chào bạn.Tôi A Bạn B Xin chào bạn.Tôi B - Chạy ví dụ kết hình sau : (4) Thẻ embed - Thẻ embed dùng để nhúng plugin cho ứng dụng web Giải sử với thẻ embed chèn flash , silverlight vào trang web ví dụ sau : scr định khai báo tới file flash (5) Danh sách thẻ HTML5 định nghĩa nội dung - Ngoài thẻ hay dùng chúng tơi ví dụ , HTML5 cung cấp nhiều thẻ Các bạn tham khảo bảng Tag Mô tả Xác định thêm chi tiết điều khiển ẩn hiển thị theo yêu cầu CuuDuongThanCong.com https://fb.com/tailieudientucntt Xác định tiêu đề cho thành phần details, sử dụng để mô tả chi tiết tài liệu, phận tài liệu.Tag summary với tag details Định nghĩa danh sách tùy chọn, sử dụng thành phần với thành phần input Định nghĩa dialog box window Xác định text dài tự động xuống hàng (không tràn layout) Xác định nội dung nhúng plugin.Thường dùng để chèn flash , silverlight … Xác định thích cho tag figure Xác định nội dung liên quan mạch lạc với nhau, hình ảnh, sơ đồ, code, Xác định cặp trường khóa sử dụng cho form Xác định văn đánh dấu, sử dụng muốn làm bật văn mình.Như đánh dấu nội dung lặp lặp lại cuấn sách để làm bật chúng : HTML5cung cấp nhiều tính mạnh mẽ HTML5) mở nhiều kỹ thuật lập trình web Định nghĩa phép đo Sử dụng cho phép đo với giá trị tối thiểu tối đa Đại diện cho kết phép tính (giống thực script) Định nghĩa nút lệnh, giống nhưmột button, Radiobutton, hộp kiểm Mô tả tiến trình làm việc 33% Hiển thị nội dung bên trình duyệt khơng hỗ trợ ruby Định nghĩa lời giải thích cách phát âm ký tự (đối với kiểu chữ Đơng Á) Định nghĩa thích ruby (đối với kiểu chữ Đơng Á) Chú thích Ruby sử dụng khu vực Đông Á, hiển thị cách phát âm ký tự Đông Á Xác định thời gian, ngày tháng, năm sinh 5:35 P.M on April 23rd (3) Các thẻ đặc biệt khác HTML5 cung cấp số thẻ đặc biệt khác : canvas: Vẽ đối tượng đồ họa pixcel lên website (dùng javascript) svg : Vẽ đối tượng đồ họa vecto lên website (dùng xml) video : trình xem video audio : trình xem nhạc source : Xác định nguồn cho media ( kèm thẻ video , audio) Đây thẻ đặc biệt có ý nghĩa lớn tảng HTML5 , khảo sát chi tiết thẻ phần tới CuuDuongThanCong.com https://fb.com/tailieudientucntt - Click vào button kết hình sau : 6.2 HTML5 Drag Drop (kéo - thả HTML5) - Kéo thả tính thú vị HTML5 - Chúng ta kéo thả đối tượng : hình ảnh , thẻ div vào khung chứa - Để làm điều đối tượng kéo thả cần khai báo thuộc tính draggable true (1) Kéo thả chiều - Ví dụ sau khai báo kéo thẻ div vào thẻ div HTML : Thả vào đây

Nhấn kéo thả

- Ta định dạng chút CSS để dễ hình dung sau : #id1 { width:200px; height:200px; background:#cbfafa; border:1pxsolid#aaaaaa;} #id2{ width:100px; height:100px; background:#ff0000; } - Javascript : function allowDrop(ev) { ev.preventDefault(); } CuuDuongThanCong.com https://fb.com/tailieudientucntt 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)); } - Chạy ví dụ kết hình sau : - Ta chọn kéo div (màu đỏ) vào vùng màu xanh kết hình sau: - Ta có kéo đối tượng ( kể ảnh ) (2) Kéo thả chiều - Phần trước ta kéo thả đối tượng vào vị trí , khơng kéo trả lại vị trí cũ - Ví dụ tạo đối tượng kéo thả đối tượng trở vị trí cũ : HTML : Thả vào đây CuuDuongThanCong.com https://fb.com/tailieudientucntt

Nhấn kéo thả

CSS : #id1 { width: 200px; height: 200px; background: #cbfafa; border: 1pxsolid#aaaaaa; } #id2 { width: 100px; height: 100px; background: #ff0000; } #id3 { width: 200px; height: 200px; background: #f5e07c; border: 1pxsolid#aaaaaa; } Javascript 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)); } - Chạy ví dụ kết hình sau : CuuDuongThanCong.com https://fb.com/tailieudientucntt - Ta kéo thả chuyển đổi vị trí ( đối tượng có đỏ) - Kéo sang vị trí Kéo trở vị trí cũ CuuDuongThanCong.com https://fb.com/tailieudientucntt 6.3 HTML5 Web Storage(lưu trữ liệu Client HTML5) (1) Đối tượng Web Storage HTML5 cung cấp tính lưu trữ liệu client với dung lượng giới hạn lớn nhiều so với cookie Tính gọi Web Storage chia thành hai đối tượng localStorage sessionStorage - Trước sử dụng tính ta có câu lệnh JavaScript để kiếm tra trình duyệt có hơ trợ Web Storage hay khơng sau : if (typeof (Storage) !== "undefined") { // Code for localStorage/sessionStorage } else { // Sorry! No Web Storage support } - Đối tượng localStorage sessionStorage có thành viên mô tả Interface sau: interface Storage { // số lượng cặp key/value có đối tượng readonly attribute unsigned long length; //trả tên key thứ n danh sách DOMString? key(unsigned long index); // trả value gắn với key getter DOMString getItem(DOMString key); // thêm gán cặp key/value vào danh sách setter creator void setItem(DOMString key, DOMString value); // xóa cặp key/value khỏi danh sách deleter void removeItem(DOMString key); // xóa tồn liệu danh sách void clear(); }; CuuDuongThanCong.com https://fb.com/tailieudientucntt - Từ thành viên Interface dễ dàng hình dung tạo quản lý localStorage hay sessionStorage - Việc sử dụng localStorage sessionStorage tương tự , khác thời gian lưu trữ liệu - Dữ liệu lưu localStorage SessionStorage lớn ( từ - 10 MB) tùy trình duyệt - Do dùng localStorage hay SessionStorage giải pháp thay cho cookies (2) Đối tượng localStorage - window.localStorage : Lưu trữ liệu không giới hạn thời gian ( khơng có ngày hết hạn ).localStorage truy xuất lẫn cửa sổ trình duyệt - Ví dụ sau tạo localStorage ,sau đọc giá trị localStorage ghi lên hình localStorage.Hello = "hello world"; document.write(localStorage.Hello); Chạy ví dụ kết hình sau : - Ngồi tạo (set) đọc (get) giá trị localStorage theo khóa Key sau: - Ví dụ sau dùng phương thức setItem("key","value") getItem("key") để đặt lấy giá trị cho localStorage, kết đạt ví dụ trước : localStorage.setItem("Hello","Hello world") document.write(localStorage.getItem("Hello")); - Chú ý cặp name/value ln có kiểu string , bạn cần chuyển đổi sang dạng khác bạn cần ! - Chúng ta xóa localStorage sau : localStorage.removeItem("Hello"); (3) Đối tượng sessionStorage - Đối tượng sessionStorage tương tự đối tượng localStorage , khác biệt chút liệu lưu sessionStorage bị trình duyệt bị đóng ( kết thúc phiên làm việc ) - Ta có ví dụ tương tự phần localStorage lưu câu chào vào sessionStorage sessionStorage.setItem("Hello","Hello world") document.write(sessionStorage.getItem("Hello")); - Chạy ví dụ ta kết tương tự phần localStorage CuuDuongThanCong.com https://fb.com/tailieudientucntt Một điểm khác biệt trang web , ta truy vấn biến localStorage nhiều nơi khác không bị đóng trình duyệt.Tức người dùng tắt trình duyệt , mở trình duyệt nên giá trị localStorage tồn mà không cần khởi tạo - Ngược lại với sessionStorage đóng trình duyệt lng liệu lưu (4) Lưu trữ mảng đối tượng vào web Storage - Chúng ta gán giá trị mảng cho đối tượng localStorage hay sessionStorage ( đối tượng có cặp key , value để string ) - Một giải pháp để lưu mảng vào localStorage hay sessionStorage dùng đối tượng JSON convert mảng sang chuỗi lưu localStorage hay sessionStorage sử dụng việc conver đối tượng string đối tượng mảng - Ví dụ lưu mảng cho đối tượng localStorage ( với đối tượng sessionStorage làm tương tự ) function Product(_id,_name) { this.ID = _id; this.Name = _name; } var Products = [new Product("1", "Product 1"), new Product("2", "Product 2"), new Product("3", "Product 3"), new Product("4", "Product 4") ]; localStorage["Products"] = JSON.stringify(Products); var Productslocal = JSON.parse(localStorage["Products"]); Productslocal.forEach(function (item) { document.write("

"+item.ID +"-"+item.Name+"

"); }); - Ví dụ ta tạo lớp Product , mảng danh sách Product - Lưu mảng danh sách Product vào localStorage - Đọc giá trị localStorage hiển thị lên hình - Chạy ví dụ kết hình sau : CuuDuongThanCong.com https://fb.com/tailieudientucntt 6.4 Bộ nhớ Cache cho ứng dụng HTML5 - Bộ nhớ cache HTML5 dùng để lưu trữ ứng dụng web truy cập chúng mà khơng cần kết nối Internet - Bộ nhớ cache HTML5 có lợi ích sau : +) Người dùng sử dụng ứng dụng oficeline ( không cần kết nối Internet) +) Tốc độ tải tài nguyên nhanh +) Giảm tải cho máy chủ , trình duyệt tải tài nguyên thay đổi yêu cầu máy chủ trả thông tin thay đổi nên giảm nhiều công việc cho máy chủ - HTML5 cung cấp tính để tạo phiên Officeline ứng dụng web cách tạo file manifest cho nhớ cache Ví dụ trình bày trang HTML dùng cache manifest (khơng có kết nối internet): The content of the document…… Để 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 lưu lại nhớ cache người dùng truy cập đến Nếu trang web khơng thiết lập thuộc tính manifest khơng lưu cache trừ file manifest có dòng lệnh thiết lập thuộc tính cho Phần mở rộng files manifest là: ".appcache" Lưu ý: Bạn phải cấu hình máy chủ "text/cache-manifest" để chạy file manifest - Chúng ta cần bật tính cache trang web thuộc tính manifest Tất trang khai báo thuộc tính manifest lưu trữ lại người dùng truy cập Tệp manifest - Tệp Manifest tệp tin văn thông báo với trình duyệt lưu khơng lưu nhớ cache trang web - Tệp gồm phần : +) CACHE MANIFEST : gồm file nguồn javaScript (.js) , CSS ( css) hay file ảnh ( jpg , gif , png …) Khi file Manifest nạp trình duyệt tải lưu file thư mục gốc website.Và khơng có kết nối Internet tệp tin sử dụng +) NETWORK : Các tệp tin kết nối tới máy chủ không lưu trữ file: CuuDuongThanCong.com https://fb.com/tailieudientucntt NETWORK: login.asp Một khai báo dấu hoa thị sau để biểu diễn tất tệp tin cần kết nối Internet NETWORK: * FALLBACK : Xác định trang dự phòng thư mục Trong trường hợp khơng có kết nối mạng trang dự phòng dùng để hiển thị Cập nhật nhớ Cache - Trình duyệt đọc thông tin từ tệp tin nhớ cache vấn đề sau xảy : +) Người sử dụng xóa nhớ cache trình duyệt +) File manifest bị sửa đổi +) Bộ nhớ Cache cập nhật theo ứng dụng Tức ứng dụng định cập nhật nhớ cache theo thời gian định Chú ý sử dụng nhớ Cache cho ứng dụng bạn - Các thông tin , tệp tin lưu trư nhớ cache nên trình duyệt ln hiển thị phiên lưu trữ Server có thay đổi thơng tin Do người lập trình cần thêm đoạn code thông báo thay đổi nội dung , tệp tin server để người dùng cập nhật hay tự động cập nhật Để đảm bảo trình duyệt cập nhật nhớ cache bạn cần thay đổi file manifest - Các trình duyệt có giới hạn khác cho nhớ Cache Một số trình duyệt giới hạn MB nhớ Cache cho website HTML5 Web Worker - Với mã kịch JavaScript chạy trang web bị khóa lại kịch chạy xong web mở thao tác tiếp - HTML5 web worker đoạn mã javascript chạy chế độ , độc lập với kịch khác mà không ảnh hưởng tới tương tác hiệu suất trang Chúng ta làm việc khác (tương tác ) với website : click , select ,trong mã web worker chạy ngầm - Đối tượng Web Worker tạo thực thi thread độc lập chạy chế độ nên không ảnh hưởng đến giao diện tương tác trang web với người dùng Với đặc điểm này, bạn sử dụng Web Workert cơng việc đòi hỏi thời gian xử lý lâu nạp liệu, tạo cache,… - Điểm hạn chế Web Worker truy xuất thành phần DOM, đối tượng window, document hay parent Mã lệnh công việc cần thực thi phải cách ly tập tin script - Chúng ta thường áp dùng tính web worker trường hợp cần chạy đoạn Script làm công việc nặng nhọc post liệu lên server xử lý liệu server , cache CuuDuongThanCong.com https://fb.com/tailieudientucntt nội dung Khi đoạn ma javascript âm thầm chạy , người dùng vân tương tác với website cách thông thường - Hay trường hợp bạn xử dụng việc kiếm tra đăng nhập hệ thống Trong trường hợp server tải thường dùng kỹ thuật TimeOut , với web worker bạn âm thâm kiểm tra thông tin đăng nhập người dùng lướt website bạn , âm thầm xác nhận việc đăng nhập, khơng thành cơng nên có thơng báo cho người dùng Ví dụ - Ví dụ sau tạo đếm số vô hạn Trong đếm số , người dùng tương tác với website.Ta hiểu tương tác tức click , select … nội dung website Tạo file demo_workers.js có code sau : var i = 0; function timedCount() { i = i + 1; postMessage(i); setTimeout("timedCount()", 500); } timedCount(); - Mã HTML :

Đếm số:

Bắt đầu đếm Dừng việc đếm var w; function startWorker() { if (typeof (Worker) !== "undefined") { if (typeof (w) == "undefined") { // khai báo trỏ tới file javascript tạo bước trước w = new Worker("demo_workers.js"); } w.onmessage = function (event) { document.getElementById("result").innerHTML = event.data; }; } else { document.getElementById("result").innerHTML = "Trình duyệt khơng hỗ trợ web worker"; } } function stopWorker() { w.terminate(); } Chạy ví dụ kết hình sau : CuuDuongThanCong.com https://fb.com/tailieudientucntt - Nhấn vào bắt đầu đếm , ma javascript bắt đầu chạy ngầm Khi ta tương tác làm việc khác với website Khi muốn dừng nhấn vào button dừng việc đếm Tổng kết HTML5 thay Flash, Silverlight HTML5 - Chúng ta qua tất thành phần HTML5 Và bạn hiểu thứ mà HTML5 làm khơng thể làm.Và tất nhiên trả lời câu hỏi HTML5 có đáng cơng nghệ lập trình web thay công nghệ flash , Silverlight hay không ? - Và chừng mực bạn hiểu chất cơng nghệ HTML5 định hình nên áp dụng vào project phần , khơng áp dụng phần - Các thẻ , tính đa phương tiện (video , audio), kéo thả tính mà có lẽ nên dung vào website - Phần HTML5 canvas , svg phần mạnh HTML5, điều mà kỳ vọng xây dựng giao diện tương tác web thay cho công nghệ Flash , Silverlight - HTML5 công nghệ web Client , để áp dụng vào thực tế bạn cần kết hợp với công nghệ web server asp.net , php - Nhưng dù hiểu chất công nghệ Client quan Bạn cần hiểu Client hiểu thơng tin , hiển thị , xử lý kiểu liệu gì,để từ lập trình nên hệ thống tương tác client - server cách nhịp nhàng , mềm dẻo - Các kiến thức HTML5 tag , HTML5 API , HTML5 Media , HTML5 Web Storage , HTML5 web worker bạn vận dụng từ từ áp dụng lượng thích hợp vào website - Riêng HTML5 canvas (svg) mảng rộng lớn tảng HTML5 Trong tài liệu chúng tơi trình bày dài thể nói hết khía cạnh kỹ thuật.Chúng giới thiệu kỹ thuật xây dựng xử lý giao diện game cờ tướng HTML5 với thẻ canvas.Tuy nhiên để xây dựng game hồn chỉnh đòi hỏi phải gia cơng thêm đoạn code Còn phần kỹ thuật thuật tốn để game cờ tướng chạy Mời bạn quan tâm tới HTML5 game trở lại đọc tài liệu phát triển game HTML5 - Trong phần xây dựng website thực HTML5 bạn đón đọc tài liệu xây dựng ứng dụng web MVC HTML5 để bạn thực thấy tương tác lập trình Client server có sử dụng kỹ thuật giao diện HTML5 Phụ lục tag HTML5 - Dưới bảng tất thẻ HTML5 , để bạn tìm hiểu HTML5 dễ dàng tra cứu Tag Description CuuDuongThanCong.com https://fb.com/tailieudientucntt CuuDuongThanCong.com Defines a comment Defines the document type Defines a hyperlink Defines an abbreviation Not supported in HTML5 Use instead Defines an acronym Defines contact information for the author/owner of a document Not supported in HTML5 Use instead Defines an embedded applet Defines an area inside an image-map Defines an article Defines content aside from the page content Defines sound content Defines bold text Specifies the base URL/target for all relative URLs in a document Not supported in HTML5 Use CSS instead Specifies a default color, size, and font for all text in a document Isolates a part of text that might be formatted in a different direction from other text outside it Overrides the current text direction Not supported in HTML5 Use CSS instead Defines big text Defines a section that is quoted from another source Defines the document's body Defines a single line break Defines a clickable button Used to draw graphics, on the fly, via scripting (usually JavaScript) Defines a table caption Not supported in HTML5 Use CSS instead Defines centered text Defines the title of a work Defines a piece of computer code Specifies column properties for each column within a element Specifies a group of one or more columns in a table for formatting Specifies a list of pre-defined options for input controls Defines a description/value of a term in a description list Defines text that has been deleted from a document https://fb.com/tailieudientucntt Defines additional details that the user can view or hide Defines a definition term Defines a dialog box or window Not supported in HTML5 Use
    instead Defines a directory list Defines a section in a document Defines a description list Defines a term/name in a description list Defines emphasized text Defines a container for an external (non-HTML) application Groups related elements in a form Defines a caption for a element Specifies self-contained content Not supported in HTML5 Use CSS instead Defines font, color, and size for text Defines a footer for a document or section Defines an HTML form for user input Not supported in HTML5 Defines a window (a frame) in a frameset Not supported in HTML5 Defines a set of frames Defines HTML headings Defines information about the document Defines a header for a document or section Defines a thematic change in the content Defines the root of an HTML document Defines a part of text in an alternate voice or mood Defines an inline frame Defines an image Defines an input control Defines a text that has been inserted into a document Defines keyboard input Defines a key-pair generator field (for forms) Defines a label for an element Defines a caption for a element Defines a list item Defines the relationship between a document and an external resource (most used to link to style sheets) Specifies the main content of a document Defines a client-side image-map Defines marked/highlighted text Defines a list/menu of commands to
  • CuuDuongThanCong.com https://fb.com/tailieudientucntt Defines a command/menu item that the user can invoke from a popup menu Defines metadata about an HTML document Defines a scalar measurement within a known range (a gauge) Defines navigation links Not supported in HTML5 Defines an alternate content for users that not support frames Defines an alternate content for users that not support client-side scripts Defines an embedded object Defines an ordered list Defines a group of related options in a drop-down list Defines an option in a drop-down list Defines the result of a calculation Defines a paragraph Defines a parameter for an object Defines preformatted text Represents the progress of a task Defines a short quotation Defines what to show in browsers that not support ruby annotations Defines an explanation/pronunciation of characters (for East Asian typography) Defines a ruby annotation (for East Asian typography) Defines text that is no longer correct Defines sample output from a computer program Defines a client-side script Defines a section in a document Defines a drop-down list Defines smaller text Defines multiple media resources for media elements ( and ) Defines a section in a document Not supported in HTML5 Use instead Defines strikethrough text Defines important text Defines style information for a document Defines subscripted text Defines a visible heading for a element Defines superscripted text Defines a table

      CuuDuongThanCong.com https://fb.com/tailieudientucntt Groups the body content in a table Defines a cell in a table Defines a multiline input control (text area) Groups the footer content in a table Defines a header cell in a table Groups the header content in a table Defines a date/time Defines a title for the document Defines a row in a table Defines text tracks for media elements ( and ) Not supported in HTML5 Use CSS instead Defines teletype text Defines text that should be stylistically different from normal text Defines an unordered list Defines a variable Defines a video or movie Defines a possible line-break

        CuuDuongThanCong.com https://fb.com/tailieudientucntt ... lập trình OOP JavaScript hỗ trợ lập trình HTML5 33 (11) Lập trình cờ tướng canvas HTML5 34 4.2 HTML5 SVG 47 HTML đa phương tiện (Media) 48 5.1 Phát Video HTML5. .. https://fb.com/tailieudientucntt Giới thiệu giáo trình HTML5 - HTML5 mở cách mạng lập trình giao diện web , từ giao diện đồ họa ,API, nhập liệu,tag … - Đó lý đáng để học HTML5 để áp dụng vào website thay... 61 6.4 Bộ nhớ Cache cho ứng dụng HTML5 62 HTML5 Web Worker 63 Tổng kết HTML5 thay Flash, Silverlight HTML5 65 Phụ lục tag HTML5 65 CuuDuongThanCong.com

Ngày đăng: 27/12/2019, 19:14

Từ khóa liên quan

Tài liệu cùng người dùng

Tài liệu liên quan