Tiểu luận môn phát triển ứng dụng web ngôn ngữ lập trình HTML5

 Trong phiên bản HTML5, form đã có nhiều cải tiến về cách thức chuyển dữ liệu hỗ trợ thêm PUT, GET cũng như thêm rất nhiều các điều khiển nhập liệu mới datetime, color, nu

GVHD: Ths Mai Xuân Hùng

Sinh viên thực hiện: Lê Trọng Phát

Nguyễn Văn Hưởng

Nguyễn Văn Khánh

Multimedia với Video và Audio

Opera 10.5 trở lên

Chrome 3.0 trở lên

Safari 3.0 trở lên

Multimedia với Video và Audio

dạng OGG và

MP4

duyệt hỗ trợ

HTML 5

Multimedia với Video và Audio

Thuộc tính Giá trị Ý nghĩa

autoplay autoplay Tự động chạy video ngay sau khi load

trang web xong.

controls controls Hiển thị bảng điều khiển (play/pause,

volume, timeline).

height pixels Chiều cao của video player.

width pixels Chiều rộng của video player

preload preload Load video ngay lúc load trang web (Bị

bỏ qua nếu autoplay đã được đặt)

Multimedia với Video và Audio

Multimedia với Video và Audio

Opera 10.5 Trở lên

Chrome 3.0 Trở lên

Safari 3.0 Trở lên

Multimedia với Video và Audio

Audio

Thuộc tính Giá trị Ý nghĩa

autoplay autoplay Tự động chạy audio ngay sau khi load

trang web xong.

controls controls Hiển thị bảng điều khiển (play/pause,

volume, timeline).

preload preload Load audio ngay lúc load trang web

(Bị bỏ qua nếu autoplay đã được đặt)

Vẽ đồ họa dùng canvas

Canvas

• Thẻ canvas định nghĩa một vùng chữ nhật mà có thể làm việc được các

pixel trên hình chữ nhật đó.

• Cấu trúc của một Canvas:

<canvas id="myCanvas“ width="200"

height="100"></canvas>

Vẽ đồ họa dùng canvas

Canvas

• Thẻ canvas không thể tự vẽ các thẻ

con mà ta phải dùng đến Javascript.

• Để lấy một vùng canvas và thực hiện vẽ trên đó ta thực hiện như sau:

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

Form

 Form là một thành phần của HTML

dùng để tạo ra biểu mẫu lấy thông tin nhập vào từ người dùng và chuyển

lên server

 Trong phiên bản HTML5, form đã có

nhiều cải tiến về cách thức chuyển dữ

liệu (hỗ trợ thêm PUT, GET) cũng

như thêm rất nhiều các điều khiển

nhập liệu mới (datetime, color,

number,…).

Form

 Form là một thành phần của HTML

dùng để tạo ra biểu mẫu lấy thông tin nhập vào từ người dùng và chuyển

lên server

 Trong phiên bản HTML5, form đã có

nhiều cải tiến về cách thức chuyển dữ

liệu (hỗ trợ thêm PUT, GET) cũng

như thêm rất nhiều các điều khiển

nhập liệu mới (datetime, color,

number,…).

Form

accept MIME_type Bị loại bỏ khỏi HTML5

autocomplete on | off Nếu on , trình duyệt sẽ lưu các giá trị người dùng đã nhập, và sẽ

hiển thị lại chúng nếu người dùng quay lại trang đó.

method get | post | put |

novalidate novalidate Nếu được chỉ định sẽ không kiểm tra tính đúng đắn của dữ liệu

nhập trong form khi submit.

 Những thay đổi so với HTML4

 HTML5 được bổ sung thêm rất nhiều

và phong phú các điều khiển Input.

 Giúp dễ dàng nhập liệu.

 Đảm bảo tính hợp lệ dữ liệu.

 Các thuộc tính mới:

autocomplete on | off Nếu on , trình duyệt sẽ lưu lại giá trị được nhập trong

điều khiển và hiển thị lại nếu trang được mở lại.

form tên form Xác định một hoặc nhiều form mà điều khiển này

thuộc về.

list id của một datalist Xác định danh sách dữ liệu mà điều khiển này hiện xổ

xuống khi người dùng nhập liệu.

max number Giá trị lớn nhất mà người dùng có thể nhập vào điều

khiển này.

 Các thuộc tính mới:

min number Giá trị lớn nhỏ mà người dùng có thể nhập vào điều

khiển này.

pattern Javascript Pattern Định ra mẫu mà người dùng phải tuân theo Ví dụ mẫu:

“[0-9]”, tức là người dùng chỉ được nhập 1 số từ 0 đến 9.

placeholder text Dòng chữ hiển thị trên điều khiển khi người dùng chưa nhập

gì Dùng để hướng dẫn người dùng nhập dữ liệu đúng.

required required Người dùng bắt buộc phải nhập dữ liệu vào điều khiển này

khi submit.

spellcheck true | false Kiểm tra chính tả khi người dùng nhập liệu.

step number

Bước nhảy của mỗi giá trị Được áp dụng cho các điều khiển

date , datetime , datetime - local , month , week , time , number , và

range

 Các thuộc tính mới:

tabindex number Thứ tự được focus của điều khiển khi người dùng nhấn tab.

type

button checkbox color date datetime datetime-local email

file hidden image month number password radio range reset search submit tel text time url week

Xác định kiều điều khiển Các kiểu mới của HTML5:

color : Chọn màu.

date : Chọn ngày, tháng, năm.

datetime : Chọn ngày, tháng, năm, giờ, múi giờ.

datetime-local : Chọn ngày, tháng, năm, giờ.

email : Nhập email.

image : Chọn ảnh.

month : Chọn tháng.

number : Chọn số.

range : Chọn số trong một khoảng xác định.

search : Nhập giá trị cần tìm kiếm.

tel : Nhập số điện thoại.

time : Chọn giờ.

url : Nhập đường dẫn.

week : Chọn tuần.

width pixels, % Xác định chiều rộng của điều khiển.

Form

Form Output Output

output:

Thuộc tính Giá trị Mô tả

mà trường ouput liên quan

ouput lệ thuộc vào

name name Đặc tả tên đối tượng (dùng khi form được

submit)

Form Output Output

Thuộc tính toàn cục

người dùng có thể trực tiếp sửa đổi nội

dung trong thẻ đó

ContentEditable

Thuộc tính toàn cục

Draggable

sự trợ giúp của các API được xây dựng sẵn trong HTML

<span id="drg" draggable="true"

style="cursor:move">DRAG ME</span>

<div id="drp" style="width:150px; height:100px; background:#999">DROP HERE</div>

Thuộc tính toàn cục

SpellCheck

Enter your text here:

Lưu trữ dữ liệu cục bộ ngoại tuyến

trữ các thông tin tạm thời vào các biến

session, hoặc lưu trữ lâu dài vào Local

Storage

bảng và truy vấn

Lưu trữ dữ liệu cục bộ ngoại tuyến

chủ bình thường

được, dữ liệu được lưu trữ cục bộ

được chuyển lên CSDL máy chủ

Kiểm tra tình trạng trực tuyến

Lưu trữ dữ liệu cục bộ ngoại tuyến

một hình thức lưu trữ tạm thời trên RAM

và chỉ có tác dụng trên một tab duy

nhất Tức là giá trị lưu trữ trong session

chỉ tồn tại trong tab đó, không thể chia

sẻ với tab khác và sẽ kết thúc khi tab đó

bị đóng

Lưu trữ tạm thời với Sesion Storage

sessionStorage.setItem("key", value);value = sessionStorage.getItem("key");

Lưu trữ dữ liệu cục bộ ngoại tuyến

hình thức lưu trữ lâu dài trên ổ cứng và

được chia sẻ công khai

bị mất đi cả khi đóng trình duyệt và có

thể được truy xuất bởi các tab khác,

thậm chí cả các trang HTML khác

Lưu trữ lâu dài với Local Storage

localStorage.setItem("key", value);

localStorage.setItem("key", value);

Lưu trữ dữ liệu cục bộ ngoại tuyến

(database) dựa trên đặc tả của CSDL

SQLite được xây dựng sẵn trong

HTML5

bảng, thêm, sửa xoá dữ liệu, truy vấn

ngay trong mã nguồn tài liệu HTML

cục bộ

Lưu trữ và truy vấn với Web SQL Database

Thẻ ngữ nghĩa

nào đến hình thức, bố cục của tài liệu

HTML

dàng phân biệt được nội dung chính

của trang web

Các thuộc tính mới

Ứng dụng quan trọng của

HTML5 với Web 3D

giao thức, ngôn ngữ, định dạng tập tin và

các công nghệ khác được dùng để truyền

tải nội dung 3D vào web

xuất bởi tổ chức Web3D Consortium

Khái quát

Ứng dụng quan trọng của

HTML5 với Web 3D

mã hóa

khối hình học và những khả năng xử lý của VRML

Ứng dụng quan trọng của

• Root tag : Vùng thao tác với các đối tượng 3D, ta dùng thẻ

<X3d> </X3d> bao bọc các đối tượng

Ứng dụng quan trọng của

HTML5 với Web 3D

thẻ <Shape> </Shape> bao bọc các thẻ

Ứng dụng quan trọng của

HTML5 với Web 3D

Ứng dụng quan trọng của

HTML5 với Web 3D

Ứng dụng quan trọng của

HTML5 với Web 3D

<Material> Định nghĩa bề mặt đối tượng đã được khai báo trong tập tin X3D.

<ImageTexture> Dùng hình ảnh để “ốp” lên các đối tượng đã khai báo trước đó

<MovieTexture> sử dụng các tập tin video để ốp lên bền mặt các đối tượng đã khai

báo trước đó

<PixelTexture> Để ốp hình ảnh bằng các màu sắc được khai báo dưới dạng mã bit

Định dạng dữ liệu hình ảnh này dựa trên một loại trường trong X3D gọi là SFImage.

SFImage chứa 3 số nguyên đại diện cho chiều rộng, chiều cao và số lượng các thành phần màu sắc trong hình ảnh

Ứng dụng quan trọng của

HTML5 với Web 3D

<object name='Tên đối tượng'

Ứng dụng quan trọng của

HTML5 với Web 3D

hợp HTML5 và nội dung 3D vào trong trang web

trong HTML DOM của bạn mà cho phép bạn tính toán nội dung 3D bằng cách chỉ

thêm/xóa hoặc thay đổi các thành phần

DOM Nó cũng hỗ trợ các sự kiện HTML

như là “onclick” trên các đối tượng 3D

Ứng dụng quan trọng của

HTML5 với Web 3D

 Cấu trúc X3DOM: X3DOM là thể hiện sự tích hợp hài hòa giữa HTML và X3D nên cấu trúc của

X3DOM hoàn toàn tương tự cấu trúc của một tập

tin html thông thường.

 Có thể bổ sung thêm 2 tập tin là x3dom.css,

x3dom.js Tập tin x3dom.css dùng để hỗ trợ phần

giao diện cho các ứng dụng X3DOM chuyên biệt,

giúp chúng có cách hiển thị tốt hơn Tập tin

x3dom.js là tập tin chứa các hàm javascript dùng để thao tác, xử lý cho các sự kiện phát sinh với nội

dung 3D trong X3DOM.

Thank You !