Tóm tắt: Kể từ khi Mạng toàn cầu (World Wide Web) xuất hiện vào đầu
những năm 1990, HTML đã phát triển để trở thành một ngôn ngữ đánh dấu tương
đối mạnh mẽ, có thể được sử dụng để tạo các trang Web và các ứng dụng trực
quan tuyệt đẹp và tương tác, trong khi vẫn nhận được tài trợ của các đối tác
gần gũi của nó JavaScript và CSS. Hướng dẫn này là một giới thiệu năng động về
HTML5 và CSS3. Nó cung cấp thông tin về chức năng và cú pháp cho nhiều phần tử
mới và các API mà HTML5 phải cung cấp, cũng như các bộ chọn mới, các hiệu ứng,
và các tính năng mà CSS3 mang đến cho bảng. Cuối cùng, nó sẽ cho bạn thấy cách
phát triển một trang Web mẫu sử dụng nhiều các tính năng mới này. Khi hoàn
thành hướng dẫn này, bạn sẽ sẵn sàng để xây dựng các trang Web hoặc các ứng
dụng riêng của mình được được vẫn hành bằng HTML5 và CSS3.
Trước khi bạn bắt đầu
Hướng dẫn này thừa nhận một số kinh nghiệm cơ bản với HTML, CSS, và
JavaScript. Nó cho rằng bạn đã biết rõ một phần tử hoặc thẻ HTML là
gì, một thuộc tính có nghĩa là gì, cú pháp cơ bản của ngôn ngữ đánh
dấu HTML, cấu trúc chung của một trang Web, và v.v. Về CSS, hướng dẫn
này cho rằng bạn đã quen với các bộ chọn dựa trên phần tử, lớp và mã
định danh (ID), cú pháp của một đặc tính CSS, và cách bao gồm CSS
trong các trang Web của bạn bằng cách sử dụng các bảng định tuyến nội
tuyến hoặc bên ngoài. Cuối cùng, hướng dẫn này cũng giả định rằng bạn
có một số kiến thức làm việc của JavaScript, chẳng hạn như biến, hàm,
câu lệnh if và vòng lặp là gì, cũng như cách đưa mã JavaScript vào các
trang Web của bạn. Nếu bạn cảm thấy rằng bạn cần phải xem lại bất kỳ
một trong các công nghệ này trước khi bạn bắt đầu, hãy nhảy qua phần
đầu đến phần Tài nguyên với một số hướng
dẫn và các bài viết có ích sẽ giúp bạn nhanh chóng nắm được những kiến
thức cơ bản về phát triển HTML, CSS, và JavaScript.
Về hướng dẫn này
Trên mười năm qua hay cũng chừng ấy, các khái niệm như Web 2.0, Rich
Internet Applications (RIA - Các ứng dụng Internet phong phú), và
Semantic Web (Web ngữ nghĩa) tất cả đã đẩy HTML, CSS, và JavaScript
đến và vượt quá các giới hạn của chúng, thường dựa vào các trình cắm
thêm chẳng hạn như Adobe® Flash để thúc đẩy các thành phần như
video và âm thanh, cũng như các ứng dụng tương tác và đồ họa ở mức độ
cao. Khung công tác phát triển Adobe Flex, nền tảng Silverlight của,
Microsoft® và JavaFX tất cả đều quan tâm chu đáo đến sự hỗ trợ mà
ở đó các điểm yếu của HTML làm cho các nhà phát triển thực hiện rất
khó khăn. Tuy nhiên, với HTML5, ngôn ngữ đánh dấu đang gây ấn tượng
trở lại, với sự hỗ trợ đa phương tiện đầy đủ, lưu trữ cục bộ và sự hỗ
trợ ứng dụng không nối mạng, API vẽ 2D nguyên gốc, và một loạt của các
API phát triển ứng dụng mới, tất cả được đưa ra với mục đích chứng tỏ
rằng HTML, CSS, và JavaScript có thể cung cấp đầu vào phong phú cho
các trang Web và các ứng dụng của bạn.
Nhiều người coi HTML5 là một trong những công nghệ mới quan trọng nhất
được dự kiến xuất hiện vào năm 2010, và đã có một số cuốn sách được
viết về đề tài này, một số trong đó được dự kiến xuất bản sớm vào
tháng Ba năm nay. Trong nhiều năm, Web đã dựa vào các trình cắm thêm
bên ngoài để phân phối các tính năng mà trình duyệt Web vốn không thể
hỗ trợ được, cụ thể là về vẽ 2D, hình ảnh động, và đa phương tiện. Các
phiên bản mới nhất của đặc tả HTML và CSS đều nhằm mục đích loại bỏ
yêu cầu phải có các thành phần trình duyệt bổ sung này để tạo điều
kiện thuận lợi cho các tính năng như vậy, cũng như làm giảm số lượng
mã JavaScript cần thiết (hoặc loại bỏ hoàn toàn yêu cầu phải có mã
JavaScript, trong một số trường hợp) cho những tính năng ít quan trọng
như là kéo và thả hàng, phân chia hàng, và nhiều hơn nữa. Hãy làm theo
hướng dẫn này để tìm hiểu cách lợi dụng HTML5.
Các điều kiện tiên
quyết
HTML5 là một đặc tả tương đối mới mẻ, và kết quả là, sự hỗ trợ của
trình duyệt khá hạn chế (tại thời điểm viết bài này). Mã được trình
bày trong hướng dẫn này được xây dựng càng tương thích giữa các trình
duyệt với nhau càng tốt, nhưng có một số tính năng sẽ không hoạt động
trong tất cả các trình duyệt. Bất kỳ tính năng nào hiện là riêng cho
trình duyệt sẽ được xác định rõ trong hướng dẫn này. Để đảm bảo rằng
bạn có thể trải nghiệm tất cả các tính năng mới này, điều quan trọng
là bạn nên cài đặt các phiên bản mới nhất của các trình duyệt Web sau
đây trên hệ thống của bạn khi đang phát triển các ứng dụng HTML5 và
CSS3:
- Mozilla Firefox (phiên bản 3.5+)
- Apple Safari (phiên bản 4.0+)
- Opera (phiên bản 10.0+)
- Google Chrome (phiên bản 3.0+)
Bạn không cần bất kỳ phần mềm cụ thể nào để viết mã HTML và CSS; trình
soạn thảo văn bản cơ bản bất kỳ sẽ làm (chẳng hạn như Notepad, vi,
emacs, và v.v..). Trong hướng dẫn này, giả định rằng mã nguồn được lưu trữ trong một thư mục
trên máy tính cục bộ của bạn — bạn không cần phải sử
dụng một máy chủ Web hoặc tải lên các tệp vào một dịch vụ lưu trữ trên
máy chủ Web.
Các tính năng mới trong HTML5
Trong phần này, bạn sẽ khám phá một số trong các tính năng mới quan trọng mà HTML5 cần phải cung cấp. Trước tiên, bạn sẽ tìm hiểu về các phần tử ngữ nghĩa mới nhằm mục đích cung cấp nghĩa cho các phần khác nhau của một trang Web hiện đại: các tiêu đề (header), các chân trang (footer), các thanh chuyển hướng, các thanh phụ, và v.v.. Tiếp theo, bạn sẽ tìm hiểu về 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. Tiếp theo, bạn sẽ thấy cách 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. Tiếp nữa, bạn sẽ được giới thiệu về các API lưu trữ cục bộ và sự hỗ trợ cho các ứng dụng không nối mạng, sẽ tiếp tục làm cho các ứng dụng Web phù hợp với các bản sao trên máy tính để bàn của chúng về chức năng, ngay cả khi không kết nối vào mạng hoặc Internet. Phần này được hoàn tất bằng một tổng quan tóm tắt về các phần tử, các thuộc tính, và các API mới khác được đề xuất trong đặc tả HTML5 hiện nay.
Các phần tử ngữ nghĩa
Đặc tả HTML5 bao gồm một loạt các phần tử ngữ nghĩa mới được sử dụng để đưa ra một số nghĩa cho các phần hoặc các bộ phận khác nhau của một trang Web, chẳng hạn như tiêu đề, chân trang, chuyển hướng, và v.v.. Trong các phiên bản trước của HTML, bạn thường sử dụng các phần tử <div> để tạo những bộ phận này, sử dụng ID hoặc các thuộc tính lớp để phân biệt chúng với nhau. Vấn đề là điều này không có nghĩa ngữ nghĩa, vì không có các quy tắc nghiêm ngặt quy định phải chỉ rõ các tên lớp hoặc các ID nào được sử dụng, làm cho việc xác định vùng cụ thể nào đang làm việc trở nên vô cùng khó khăn đối với phần mềm. HTML5 giúp làm giảm bớt những vấn đề này, làm cho việc phân tích cú pháp cấu trúc ngữ nghĩa của một tài liệu trở nên dễ dàng hơn đối với các trình duyệt Web.
Thật đáng giá để nói rằng việc tiếp tục sử dụng các phần tử <div> trong HTML5 là hoàn toàn hợp lệ, nhưng để công việc của bạn được nâng cấp dễ dàng, điều quan trọng là bạn sử dụng các phần tử ngữ nghĩa ở nơi có liên quan. Mặt khác, điều cần thiết là bạn tránh sử dụng các phần tử mới cho các mục đích khác hơn so với dự định của chúng. Ví dụ, không nên sử dụng phần tử <nav> cho nhóm các liên kết bất kỳ; nó được dự kiến để bao quanh khối chuyển hướng chính trên trang đó.
Các phần tử ngữ nghĩa chính mà HTML5 giới thiệu là:
Phần tử <canvas>
Phần tử <canvas> (khung nền ảnh) được Apple® phát triển để sử dụng trong các widget (tiện ích) của Mac OS X Dashboard và trong Safari, nhưng sau đó đã được Mozilla® và Opera® chấp nhận trong các trình duyệt Web của họ. Phần tử này đã được tiêu chuẩn hóa và đã bao gồm trong đặc tả HTML5, cùng với một loạt các API vẽ 2D có thể được sử dụng để tạo các hình dạng, văn bản, các chuyển cảnh, và hình ảnh động bên trong phần tử này.
Nhiều người tin rằng phần tử <canvas> là một trong những khía cạnh quan trọng nhất của HTML5 do nó tạo điều kiện sản xuất các biểu đồ, các trò chơi tương tác, các ứng dụng vẽ, và các đồ họa khác đang hoạt động mà không cần cần các trình cắm thêm bên ngoài, chẳng hạn như Adobe Flash.
Chính phần tử <canvas> là khá cơ bản, định nghĩa chiều rộng, chiều cao, và mã định danh (ID) duy nhất cho đối tượng. Sau đó nhà phát triển phải sử dụng một loạt các JavaScript API để thực sự vẽ các đối tượng trên khung nền ảnh (canvas), thường khi trang Web đã hoàn tất dựng hình. Những API này cho phép nhà phát triển vẽ hình dạng và các đường kẻ, phết màu, độ mờ đục và các gradient (độ dốc); tạo văn bản; chuyển đổi các đối tượng khung nền ảnh; và thể hiện hình ảnh động. Các API cũng cho phép phần tử <canvas> tương tác và đáp ứng với đầu vào người dùng chẳng hạn như các sự kiện chuột và các sự kiện bàn phím, tạo điều kiện thuận lợi cho việc sản xuất các trò chơi và các ứng dụng Web trên khung nền ảnh. Bạn sẽ thấy một ví dụ về phần tử <canvas> đang hoạt động trong trang Web HTML5/CSS3 mẫu sau trong hướng dẫn này.
Phát <audio> và <video>
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.
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. Một số trình duyệt, gồm có Mozilla Firefox, Apple Safari, Google Chrome, đã bắt đầu hỗ trợ các phần tử mới này và cung cấp các nút điều khiển phát lại của trình duyệt chuẩn, nên chắc là người dùng sẽ chọn sử dụng chúng. Ngoài ra, một tập hợp các JavaScript API chuẩn đã được cung cấp để cho phép các nhà phát triển tạo các nút điều khiển phát lại riêng của họ, chắc là họ muốn làm như vậy. Một lợi thế quan trọng để phát lại đa phương tiện nguyên gốc là về mặt lý thuyết nó đòi hỏi ít tài nguyên CPU hơn, điều này cho phép tiết kiệm năng lượng.
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 từng trình duyệt hỗ trợ và các vấn đề cấp phép bằng sáng chế thường đi cùng với các bộ mã hóa/giải mã (codec) khác nhau dùng để mã hóa các tệp này. Mozilla và Opera muốn sử dụng các thùng chứa video Theora và codec mã nguồn mở, không đòi hỏi cấp giấy phép bằng sáng chế để bao gồm các codec đó trong trình duyệt Web. Mặt khác, Apple và Google không hài lòng với chất lượng của Theora, cụ thể đối với việc phân phối các nội dung độ nét cao (HD) trên những trang Web giống như YouTube. Họ thích codec H.264, thường có trong các tệp MP4, MOV, hoặc MKV.
Tuy nhiên, 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ó.
Có rất nhiều quyết định được đưa ra về các phần tử <video> về <audio> của HTML5 trong tương lai gần, và sẽ rất thú vị để xem các codec và các định dạng nào được đơn giản hóa theo khuyến cáo cuối cùng. Trong khi đó, bạn có thể cố gắng hỗ trợ tất cả các trình duyệt bằng cách làm cho video có sẵn theo một loạt các định dạng và bằng cách cung cấp video Flash như là một sự thay thế. Chúng ta hãy hy vọng rằng quyết định cuối cùng được thực hiện, và nó không để cho các nhà cung cấp trình duyệt quyết định hỗ trợ các định dạng nào, vì điều đó về cơ bản sẽ làm cho những phần tử mới này vô dụng.
Một lần nữa, bạn sẽ thấy phần tử <video> đang hoạt động sau nữa trong hướng dẫn này.
Các ứng dụng không nối mạng và lưu trữ cục bộ
Các nhà phát triển Web có truyền thống sử dụng các cookie để lưu trữ thông tin trên máy tính cục bộ của khách truy cập, cho phép một trang Web đọc lại thông tin này tại một điểm sau đó. Trong khi các cookie rất có ích để lưu trữ dữ liệu cơ bản, thì chúng lại bị hạn chế bởi thực tế là các trình duyệt Web thường không cần thiết giữ lại hơn 20 cookie cho mỗi một máy chủ Web hoặc nhiều hơn 4KB dữ liệu cho mỗi cookie (bao gồm cả tên và giá trị). Ngoài ra, chúng được gửi đến máy chủ Web với mọi yêu cầu HTTP, gây ra lãng phí tài nguyên.
HTML5 cung cấp một giải pháp cho các vấn đề này bằng các Local Storage API (API lưu trữ cục bộ ), được trình bày trong một đặc tả riêng với tài liệu HTML5 chính. Tập các API này cho phép các nhà phát triển lưu trữ thông tin trên máy tính của khách truy cập trong khi vẫn có cơ sở để tin chắc rằng chúng vẫn có ở đó sau này. Ngoài ra, thông tin có thể truy cập ở bất kỳ điểm nào (ngay cả sau khi trang đã được đưa ra) và không được tải tự động với mỗi yêu cầu HTTP. Đặc tả này gồm có các hạn chế cùng nguồn gốc (same-origin), để ngăn cản các trang Web khỏi bị các trang Web khác đọc hoặc thay đổi dữ liệu đã lưu.
Hầu hết các trình duyệt đều lưu trữ các trang Web trong bộ nhớ nhanh cục bộ, cho phép xem chúng ngay cả khi người dùng không nối mạng. Việc này hoạt động tốt với các trang tĩnh, nhưng nó không có sẵn cho nội dung động thường dựa vào cơ sở dữ liệu, chẳng hạn như Gmail, Facebook, Twitter. HTML5 cung cấp sự hỗ trợ cho các ứng dụng không nối mạng, ở đây trình duyệt tải tất cả các tệp cần thiết để sử dụng không cần nối mạng ứng dụng, và khi người dùng sử dụng không nối mạng ứng dụng, trình duyệt có thể cho phép các thay đổi bất kỳ được thực hiện trong quá trình này được tải lên máy chủ khi chúng kết nối lại vào mạng Internet.
Cải tiến 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 phần tử <input>. Trong HTML 4, các kiểu đầu vào sau đây đã được hỗ trợ:
Để 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:
Ngoài các kiểu đầu vào mới, HTML5 cũng hỗ trợ hai tính năng chính mới cho các trường biểu mẫu. Tính năng đầu tiên trong số này là trọng tâm tự động, để ra lệnh cho một trình duyệt tự động tập trung vào một trường biểu mẫu cụ thể khi trang được biểu thị, mà không đòi hỏi mã JavaScript làm như vậy. Tính năng nâng cao thứ hai là thuộc tính giữ chỗ, cho phép nhà phát triển định nghĩa văn bản sẽ xuất hiện trong một nút điều khiển có dạng hộp văn bản khi nội dung của nó rỗng. Một ví dụ về điều này là một hộp tìm kiếm ở đó nhà phát triển không muốn sử dụng một nhãn bên ngoài hộp cho chính nó. Thuộc tính giữ chỗ cho phép nhà phát triển định rõ văn bản sẽ hiển thị khi giá trị của nút điều khiển rỗng, và nút điều khiển đó không tập trung vào. Một ví dụ về điều này được thể hiện trong Hình 1.
Hình 1. Thuộc tính giữ chỗ đang hoạt động
Như Hình 1 cho thấy, văn bản giữ chỗ của địa chỉ e-mail và số điện thoại xuất hiện với màu xám, khi trường này rỗng và không tập trung vào. Ảnh chụp màn hình này cũng cho thấy một ví dụ về một kiểu đầu vào phạm vi, ở đây được biểu diễn bằng một thanh trượt trong trình duyệt Safari. Ảnh chụp màn hình này được chụp từ trang Web mẫu được thảo luận sau nữa trong hướng dẫn này.
Trong phần này, bạn sẽ khám phá một số trong các tính năng mới quan trọng mà HTML5 cần phải cung cấp. Trước tiên, bạn sẽ tìm hiểu về các phần tử ngữ nghĩa mới nhằm mục đích cung cấp nghĩa cho các phần khác nhau của một trang Web hiện đại: các tiêu đề (header), các chân trang (footer), các thanh chuyển hướng, các thanh phụ, và v.v.. Tiếp theo, bạn sẽ tìm hiểu về 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. Tiếp theo, bạn sẽ thấy cách 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. Tiếp nữa, bạn sẽ được giới thiệu về các API lưu trữ cục bộ và sự hỗ trợ cho các ứng dụng không nối mạng, sẽ tiếp tục làm cho các ứng dụng Web phù hợp với các bản sao trên máy tính để bàn của chúng về chức năng, ngay cả khi không kết nối vào mạng hoặc Internet. Phần này được hoàn tất bằng một tổng quan tóm tắt về các phần tử, các thuộc tính, và các API mới khác được đề xuất trong đặc tả HTML5 hiện nay.
Các phần tử ngữ nghĩa
Đặc tả HTML5 bao gồm một loạt các phần tử ngữ nghĩa mới được sử dụng để đưa ra một số nghĩa cho các phần hoặc các bộ phận khác nhau của một trang Web, chẳng hạn như tiêu đề, chân trang, chuyển hướng, và v.v.. Trong các phiên bản trước của HTML, bạn thường sử dụng các phần tử <div> để tạo những bộ phận này, sử dụng ID hoặc các thuộc tính lớp để phân biệt chúng với nhau. Vấn đề là điều này không có nghĩa ngữ nghĩa, vì không có các quy tắc nghiêm ngặt quy định phải chỉ rõ các tên lớp hoặc các ID nào được sử dụng, làm cho việc xác định vùng cụ thể nào đang làm việc trở nên vô cùng khó khăn đối với phần mềm. HTML5 giúp làm giảm bớt những vấn đề này, làm cho việc phân tích cú pháp cấu trúc ngữ nghĩa của một tài liệu trở nên dễ dàng hơn đối với các trình duyệt Web.
Thật đáng giá để nói rằng việc tiếp tục sử dụng các phần tử <div> trong HTML5 là hoàn toàn hợp lệ, nhưng để công việc của bạn được nâng cấp dễ dàng, điều quan trọng là bạn sử dụng các phần tử ngữ nghĩa ở nơi có liên quan. Mặt khác, điều cần thiết là bạn tránh sử dụng các phần tử mới cho các mục đích khác hơn so với dự định của chúng. Ví dụ, không nên sử dụng phần tử <nav> cho nhóm các liên kết bất kỳ; nó được dự kiến để bao quanh khối chuyển hướng chính trên trang đó.
Các phần tử ngữ nghĩa chính mà HTML5 giới thiệu là:
- <header (tiêu đề)>
- Phần tử này được sử dụng để định nghĩa một tiêu đề cho một số phần của một trang Web, có thể là toàn bộ trang, một phần tử <article>, hoặc một phần tử <section>.
- <footer (chân trang)>
- Giống như phần tử <header>, phần tử mới này định nghĩa một chân trang cho một số phần của một trang. Một chân trang không cần ở cuối của một trang, một phần tử article (bài viết), hoặc một phần tử section (phần), như nó thường làm.
- <nav (chuyển hướng)>
- Đây là một thùng chứa cho các liên kết chuyển hướng ban đầu trên một trang Web. Phần tử này không được dự kiến sử dụng với tất cả các nhóm các liên kết và chỉ nên được dùng cho các khối chuyển hướng lớn. Nếu bạn có một phần tử <footer> có chứa các liên kết chuyển hướng, thì bạn không cần bọc các liên kết này trong một phần tử <nav>, do phần tử <footer> cũng sẽ đáp ứng cho riêng nó.
- <article (bài viết)>
- Phần tử <article> được sử dụng để định nghĩa một mục độc lập trên trang có thể dùng cho riêng nó, chẳng hạn như một mục tin tức, bài viết trên blog, hoặc nhận xét. Thường sử dụng các nguồn cung cấp RSS để cung cấp các mục này.
- <section (phần)>
- Phần tử này đại diện cho một phần của một tài liệu hoặc ứng dụng, chẳng hạn như một chương hoặc một phần của một bài viết hoặc hướng dẫn. Ví dụ, phần bạn đang đọc bây giờ có thể được bao quanh bởi một phần tử <section> trong HTML5. Các phần tử <section> thường có một tiêu đề, mặc dù cũng không cần thiết lắm. Ví dụ, tiêu đề cho phần bạn đang đọc bây giờ sẽ chứa văn bản "Các phần tử ngữ nghĩa".
- <aside (nhận xét)>
- Phần tử mới này có thể được sử dụng để đánh dấu một thanh phụ hoặc một số nội dung khác được cho là có phần tách rời với nội dung xung quanh nó. Một ví dụ về điều này có thể là các khối quảng cáo.
- <hgroup>
- Trong một số trường hợp, một trang, bài viết, hoặc một phần có thể cần nhiều hơn một tiêu đề, chẳng hạn như ở đây bạn có một tiêu đề và phụ đề. Ví dụ, hướng dẫn này có tiêu đề "Tạo các trang Web hiện đại sử dụng HTML5 và CSS3" và phụ đề "Triển khai các phần tử canvas và video trong HTML5". Bạn có thể bọc tiêu đề và phụ đề này trong phần tử <hgroup> , bằng cách sử dụng một phần tử <h1> cho tiêu đề chính và một phần tử <h2> cho phụ đề.
Phần tử <canvas>
Phần tử <canvas> (khung nền ảnh) được Apple® phát triển để sử dụng trong các widget (tiện ích) của Mac OS X Dashboard và trong Safari, nhưng sau đó đã được Mozilla® và Opera® chấp nhận trong các trình duyệt Web của họ. Phần tử này đã được tiêu chuẩn hóa và đã bao gồm trong đặc tả HTML5, cùng với một loạt các API vẽ 2D có thể được sử dụng để tạo các hình dạng, văn bản, các chuyển cảnh, và hình ảnh động bên trong phần tử này.
Nhiều người tin rằng phần tử <canvas> là một trong những khía cạnh quan trọng nhất của HTML5 do nó tạo điều kiện sản xuất các biểu đồ, các trò chơi tương tác, các ứng dụng vẽ, và các đồ họa khác đang hoạt động mà không cần cần các trình cắm thêm bên ngoài, chẳng hạn như Adobe Flash.
Chính phần tử <canvas> là khá cơ bản, định nghĩa chiều rộng, chiều cao, và mã định danh (ID) duy nhất cho đối tượng. Sau đó nhà phát triển phải sử dụng một loạt các JavaScript API để thực sự vẽ các đối tượng trên khung nền ảnh (canvas), thường khi trang Web đã hoàn tất dựng hình. Những API này cho phép nhà phát triển vẽ hình dạng và các đường kẻ, phết màu, độ mờ đục và các gradient (độ dốc); tạo văn bản; chuyển đổi các đối tượng khung nền ảnh; và thể hiện hình ảnh động. Các API cũng cho phép phần tử <canvas> tương tác và đáp ứng với đầu vào người dùng chẳng hạn như các sự kiện chuột và các sự kiện bàn phím, tạo điều kiện thuận lợi cho việc sản xuất các trò chơi và các ứng dụng Web trên khung nền ảnh. Bạn sẽ thấy một ví dụ về phần tử <canvas> đang hoạt động trong trang Web HTML5/CSS3 mẫu sau trong hướng dẫn này.
Phát <audio> và <video>
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.
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. Một số trình duyệt, gồm có Mozilla Firefox, Apple Safari, Google Chrome, đã bắt đầu hỗ trợ các phần tử mới này và cung cấp các nút điều khiển phát lại của trình duyệt chuẩn, nên chắc là người dùng sẽ chọn sử dụng chúng. Ngoài ra, một tập hợp các JavaScript API chuẩn đã được cung cấp để cho phép các nhà phát triển tạo các nút điều khiển phát lại riêng của họ, chắc là họ muốn làm như vậy. Một lợi thế quan trọng để phát lại đa phương tiện nguyên gốc là về mặt lý thuyết nó đòi hỏi ít tài nguyên CPU hơn, điều này cho phép tiết kiệm năng lượng.
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 từng trình duyệt hỗ trợ và các vấn đề cấp phép bằng sáng chế thường đi cùng với các bộ mã hóa/giải mã (codec) khác nhau dùng để mã hóa các tệp này. Mozilla và Opera muốn sử dụng các thùng chứa video Theora và codec mã nguồn mở, không đòi hỏi cấp giấy phép bằng sáng chế để bao gồm các codec đó trong trình duyệt Web. Mặt khác, Apple và Google không hài lòng với chất lượng của Theora, cụ thể đối với việc phân phối các nội dung độ nét cao (HD) trên những trang Web giống như YouTube. Họ thích codec H.264, thường có trong các tệp MP4, MOV, hoặc MKV.
Tuy nhiên, 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ó.
Có rất nhiều quyết định được đưa ra về các phần tử <video> về <audio> của HTML5 trong tương lai gần, và sẽ rất thú vị để xem các codec và các định dạng nào được đơn giản hóa theo khuyến cáo cuối cùng. Trong khi đó, bạn có thể cố gắng hỗ trợ tất cả các trình duyệt bằng cách làm cho video có sẵn theo một loạt các định dạng và bằng cách cung cấp video Flash như là một sự thay thế. Chúng ta hãy hy vọng rằng quyết định cuối cùng được thực hiện, và nó không để cho các nhà cung cấp trình duyệt quyết định hỗ trợ các định dạng nào, vì điều đó về cơ bản sẽ làm cho những phần tử mới này vô dụng.
Một lần nữa, bạn sẽ thấy phần tử <video> đang hoạt động sau nữa trong hướng dẫn này.
Các ứng dụng không nối mạng và lưu trữ cục bộ
Các nhà phát triển Web có truyền thống sử dụng các cookie để lưu trữ thông tin trên máy tính cục bộ của khách truy cập, cho phép một trang Web đọc lại thông tin này tại một điểm sau đó. Trong khi các cookie rất có ích để lưu trữ dữ liệu cơ bản, thì chúng lại bị hạn chế bởi thực tế là các trình duyệt Web thường không cần thiết giữ lại hơn 20 cookie cho mỗi một máy chủ Web hoặc nhiều hơn 4KB dữ liệu cho mỗi cookie (bao gồm cả tên và giá trị). Ngoài ra, chúng được gửi đến máy chủ Web với mọi yêu cầu HTTP, gây ra lãng phí tài nguyên.
HTML5 cung cấp một giải pháp cho các vấn đề này bằng các Local Storage API (API lưu trữ cục bộ ), được trình bày trong một đặc tả riêng với tài liệu HTML5 chính. Tập các API này cho phép các nhà phát triển lưu trữ thông tin trên máy tính của khách truy cập trong khi vẫn có cơ sở để tin chắc rằng chúng vẫn có ở đó sau này. Ngoài ra, thông tin có thể truy cập ở bất kỳ điểm nào (ngay cả sau khi trang đã được đưa ra) và không được tải tự động với mỗi yêu cầu HTTP. Đặc tả này gồm có các hạn chế cùng nguồn gốc (same-origin), để ngăn cản các trang Web khỏi bị các trang Web khác đọc hoặc thay đổi dữ liệu đã lưu.
Hầu hết các trình duyệt đều lưu trữ các trang Web trong bộ nhớ nhanh cục bộ, cho phép xem chúng ngay cả khi người dùng không nối mạng. Việc này hoạt động tốt với các trang tĩnh, nhưng nó không có sẵn cho nội dung động thường dựa vào cơ sở dữ liệu, chẳng hạn như Gmail, Facebook, Twitter. HTML5 cung cấp sự hỗ trợ cho các ứng dụng không nối mạng, ở đây trình duyệt tải tất cả các tệp cần thiết để sử dụng không cần nối mạng ứng dụng, và khi người dùng sử dụng không nối mạng ứng dụng, trình duyệt có thể cho phép các thay đổi bất kỳ được thực hiện trong quá trình này được tải lên máy chủ khi chúng kết nối lại vào mạng Internet.
Cải tiến 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 phần tử <input>. Trong HTML 4, các kiểu đầu vào sau đây đã được hỗ trợ:
- button (nút ấn)
- checkbox (hộp kiểm tra)
- file (tệp)
- hidden (ẩn)
- image (hình ảnh)
- password (mật khẩu)
- reset (thiết lập lại)
- radio (nút tròn)
- submit (trình lên)
- text (văn bản)
Để 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:
- color (màu)
- date (ngày)
- datetime (ngày giờ)
- datetime-local (ngày giờ địa phương)
- email (thư điện tử)
- month (tháng)
- number (số)
- range (phạm vi)
- search (tìm kiếm)
- tel (điện thoại)
- time (thời gian)
- url (địa chỉ)
- week (tuần)
Ngoài các kiểu đầu vào mới, HTML5 cũng hỗ trợ hai tính năng chính mới cho các trường biểu mẫu. Tính năng đầu tiên trong số này là trọng tâm tự động, để ra lệnh cho một trình duyệt tự động tập trung vào một trường biểu mẫu cụ thể khi trang được biểu thị, mà không đòi hỏi mã JavaScript làm như vậy. Tính năng nâng cao thứ hai là thuộc tính giữ chỗ, cho phép nhà phát triển định nghĩa văn bản sẽ xuất hiện trong một nút điều khiển có dạng hộp văn bản khi nội dung của nó rỗng. Một ví dụ về điều này là một hộp tìm kiếm ở đó nhà phát triển không muốn sử dụng một nhãn bên ngoài hộp cho chính nó. Thuộc tính giữ chỗ cho phép nhà phát triển định rõ văn bản sẽ hiển thị khi giá trị của nút điều khiển rỗng, và nút điều khiển đó không tập trung vào. Một ví dụ về điều này được thể hiện trong Hình 1.
Hình 1. Thuộc tính giữ chỗ đang hoạt động
Như Hình 1 cho thấy, văn bản giữ chỗ của địa chỉ e-mail và số điện thoại xuất hiện với màu xám, khi trường này rỗng và không tập trung vào. Ảnh chụp màn hình này cũng cho thấy một ví dụ về một kiểu đầu vào phạm vi, ở đây được biểu diễn bằng một thanh trượt trong trình duyệt Safari. Ảnh chụp màn hình này được chụp từ trang Web mẫu được thảo luận sau nữa trong hướng dẫn này.
Các tính năng mới
khác
HTML5 bao gồm rất nhiều tính năng mới; không thể trình bày tất cả chúng trong hướng dẫn này. Phần này đưa ra một cái nhìn tổng quan ngắn gọn về một số các cải tiến khác trong đặc tả này.
HTML5 bao gồm rất nhiều tính năng mới; không thể trình bày tất cả chúng trong hướng dẫn này. Phần này đưa ra một cái nhìn tổng quan ngắn gọn về một số các cải tiến khác trong đặc tả này.
- Web worker (Các trình làm việc trên nền Web)
- Tính năng này cho phép mã JavaScript được thiết lập để chạy trong một quá trình nền đang tạo điều kiện thuận lợi cho sự phát triển của các ứng dụng đa luồng. Lợi ích chủ yếu mà Các trình làm việc trên nền Web (Web workers) cung cấp cho các nhà phát triển là có thể xử lý tính toán tập trung trong nền mà không ảnh hưởng đến tốc độ của giao diện người dùng.
- Geolocation (Định vị địa lý)
- HTML5 có một API định vị địa lý cho phép một ứng dụng Web xác định vị trí địa lý hiện tại của bạn, giả sử thiết bị mà bạn đang nhắm tới cung cấp các tính năng để tìm kiếm các thông tin như vậy (ví dụ, GPS trên điện thoại di động). Nếu bạn không có một thiết bị hỗ trợ tính năng này (chẳng hạn như một điện thoại thông minh iPhone hoặc Android 2.0), bạn có thể sử dụng Firefox và tải về một trình cắm thêm để cho phép bạn thiết lập vị trí của mình bằng tay.
- Kéo và thả
- Một tính năng thú vị khác chứa trong một API kéo và thả. Cho đến nay, việc thực hiện kéo và thả không có các trình cắm thêm đã lệ thuộc vào một số mã JavaScript rất phức tạp hoặc sử dụng một thư viện JavaScript như script.aculo.us.
- Tạo tin nhắn giữa các tài liệu
- Tính năng này cho phép các tài liệu trong các cửa sổ khác nhau (và với iframes khác nhau) gửi và nhận tin nhắn với nhau. Tính năng này đã chứng tỏ rất có ích cho sự phát triển của các widget và các ứng dụng được lưu trữ trên các máy chủ khác với máy chủ của trang Web ban đầu (tương tự như các ứng dụng Facebook).
- Và nhiều tính năng khác
- Các tính năng khác mới được HTML5 giới thiệu bao gồm các kiểu MIME và đăng ký trình xử lý giao thức, vì vậy các ứng dụng Web có thể được đăng ký như các ứng dụng mặc định với một kiểu tệp hoặc giao thức cụ thể; quản lý lịch sử trình duyệt, mà cho đến bây giờ vẫn cần phải được thực hiện thủ công hoặc bằng cách sử dụng một khung công tác JavaScript bên ngoài; và một loạt các phần tử và các thuộc tính mới khác làm cho các nhà phát triển Web thực hiện dễ dàng hơn.
0 comments:
Post a Comment