TIỂU LUẬN MÔN MÃ NGUỒN MỞ Thuyết trình HTML5

Thuyết trình HTML5
O
Nhóm : 11
O
GVHD: Phạm Đình Sắc
O
SVTH : Phạm Văn Ngọc – Trần Thế Quỳnh
O
Phân công :
O
Phạm Văn Ngọc – Trần Thế Quỳnh
1Trần Thế Quỳnh 0973 556 107
2Trần Thế Quỳnh 0973 556 107
Lịch sử phát triển công nghệ web
3Trần Thế Quỳnh 0973 556 107
Những ưu điểm của HTML5
 Giảm bớt sự phụ thuộc những công nghệ ứng
dụng độc quyền.
 Tốc độ truy cập web nhanh hơn
 Tài nguyên phong phú hơn
 Các ứng dụng web và các trang web hấp dẫn
hơn.
4Trần Thế Quỳnh 0973 556 107
Những hạn chế của HTML5
 Quá ít trình duyệt hỗ trợ
 Ngôn ngữ lập trình mới
 Tốn chi phí nâng cấp từ HTML lên HTML5
5Trần Thế Quỳnh 0973 556 107
Các Thành Phần Mới
Của HTML5
6Trần Thế Quỳnh 0973 556 107

Những Điểm Nổi Bật Của HTML5

HTML5 phát triển các phần tử ngữ nghĩa mới. Cải tiến biểu mẫu
Web. một số trong đó được triển khai thực hiện bằng cách sử dụng
phần tử <input>

HTML5 cung cấp phần tử <canvas> và các JavaScript API vẽ 2D
mới quan trọng mà bạn có thể sử dụng để tạo hình dạng, văn bản,
các hình ảnh động, các chuyển cảnh, và nhiều hơn nữa.

Ngoài ra còn có các phần tử <audio> và <video> mới dự kiến thay
thế sự phụ thuộc hiện tại của trang Web vào Flash như một nền
tảng phân phối đa phương tiện.
7Trần Thế Quỳnh 0973 556 107
Cấu trúc của trang web
dùng các thẻ mới của
HTML5
HTML5 Xu Hướng Thiết Kế Mới
8Trần Thế Quỳnh 0973 556 107
HTML5 Xu Hướng Thiết Kế Mới

<header> Định nghĩa khu vực đầu trang web.

<footer> Định nghĩa khu vực cuối trang web.

<nav> Định nghĩa khu vực link danh mục.

<aside> Định nghĩa khu vực bên ngoài nội
dung chính (thường là sidebar).


<section> Định nghĩa một khu vực (vùng bao).
Tương tự thẻ <div>.

<article> Định nghĩa một bài viết
9Trần Thế Quỳnh 0973 556 107
HTML5
Xu
Hướng
Thiết
Kế Mới
Một số thẻ mới
của HTML5
10Trần Thế Quỳnh 0973 556 107
HTML5
Xu
Hướng
Thiết
Kế Mới
11Trần Thế Quỳnh 0973 556 107
Các Cải Tiến Về Biểu Mẫu Web
12Trần Thế Quỳnh 0973 556 107
HTML5 Bộ Mặt Mới Cho Các Biểu Mẫu Web
Nếu bạn đã tạo các ứng dụng Web từ trước, bạn có khả năng quen hơn với
tập các nút điều khiển biểu mẫu của HTML, một số trong đó được triển khai
thực hiện bằng cách sử dụng các phần tử của thẻ <input>.

button (nút ấn)

checkbox (hộp kiểm tra)


radio (nút tròn)

file (tệp)

image (hình ảnh)
13Trần Thế Quỳnh 0973 556 107
HTML5 Bộ Mặt Mới Cho Các Biểu Mẫu Web

password (mật khẩu)

reset (thiết lập lại)

submit (trình lên)

text (văn bản)
14Trần Thế Quỳnh 0973 556 107
HTML5 Bộ Mặt Mới Cho Các Biểu Mẫu Web

Ngoài ra, có một số các phần tử mới được HTML5 hỗ trợ, sử dụng trong các biểu
mẫu web giúp tạo ra được tính thẩm mỹ và tiện lợi. Các nút điều khiển của biểu mẫu
này cung cấp nhiều chức năng cho các trường biểu mẫu cơ bản như tên, số điện
thoại, và địa chỉ — giống như bạn có thể thấy trên một biểu mẫu liên hệ.

Để cung cấp các kiểu nút điều khiển này, các nhà phát triển cần sử dụng một thư
viện JavaScript bên ngoài để cung cấp các thành phần giao diện người dùng (UI),
hoặc sử dụng một khung công tác phát triển thay thế khác như Adobe Flex,
Microsoft Silverlight, JavaFX. HTML5 nhằm mục đích lấp đầy một số các khoảng
trống do phiên bản trước của nó để lại trong lĩnh vực này bằng cách cung cấp toàn
bộ các kiểu đầu vào khác nhau của biểu mẫu mới:
15Trần Thế Quỳnh 0973 556 107

HTML5 Bộ Mặt Mới Cho Các Biểu Mẫu Web

datetime (ngày giờ)

datetime-local (ngày giờ địa phương)

month (tháng)

time (thời gian)

week (tuần)
16Trần Thế Quỳnh 0973 556 107
HTML5 Bộ Mặt Mới Cho Các Biểu Mẫu Web

color (màu)

email (thư điện tử)

number (số)

range (phạm vi)

search (tìm kiếm)

tel (điện thoại)
17Trần Thế Quỳnh 0973 556 107
Demo Một Số Kiểu Type Mới Của <Input>

Kiểu datetime-local (ngày giờ địa phương)
18Trần Thế Quỳnh 0973 556 107

Demo Một Số Kiểu Type Mới Của <Input>

Kiểu color
19Trần Thế Quỳnh 0973 556 107
Demo Một Số Kiểu Type Mới Của <Input>

Biểu mẫu Web đơn giản
20Trần Thế Quỳnh 0973 556 107
Demo Một Số Kiểu Type Mới Của <Input>

Biểu mẫu Web đơn giản
21Trần Thế Quỳnh 0973 556 107
Ứng Dụng Media
22Trần Thế Quỳnh 0973 556 107
Ứng Dụng Media Trên HTML5

Trong những năm gần đây, tính phổ biến của các trang Web chia sẻ
video như YouTube và các nền tảng phân phối nội dung như Hulu đã
chứng kiến một sự bùng nổ to lớn trong việc sử dụng Web để tạo luồng
đa phương tiện. Thật không may, người ta không thể xây dựng được
Web với nội dung theo ý đồ này, và kết quả là, định dạng tệp Flash
Video (.flv) và các nền tảng Adobe Flash nhìn chung đã làm đơn giả
hóa việc cung cấp các video và âm thanh.
23Trần Thế Quỳnh 0973 556 107
Ứng Dụng Media Trên HTML5

Tuy nhiên, HTML5 bao gồm cả sự hỗ trợ cho hai phần tử mới, <audio>
và <video>, cho phép các nhà phát triển Web bao gồm các nội dung đa
phương tiện mà không cần người dùng cài đặt các trình cắm thêm của
trình duyệt.

24Trần Thế Quỳnh 0973 556 107
Ứng Dụng Media Trên HTML5

Tuy nhiên, một vấn đề quan trọng với các phần tử đa phương tiện mới này là các
định dạng tệp được mã hóa/giải mã (codec) khác nhau trên từng trình duyệt.

Vấn đề không chỉ với video, do có các vấn đề tương tự với các codec âm thanh.
Các định dạng MP3 và AAC bị hạn chế bởi các bằng sáng chế, trong khi định
dạng Vorbis thì không. Vấn đề với âm thanh Vorbis là nó không được sử dụng
rộng rãi, do các máy phương tiện di động và nhiều ứng dụng phần mềm phương
tiện không hỗ trợ nó.
25Trần Thế Quỳnh 0973 556 107