Archive for Tháng Mười Một, 2010
Tìm hiểu về HTML5 – Phần II
Sử dụng các thẻ mới trong HTML5
Những ai đã từng viết web hẳn đều đồng ý rằng hầu hết các trang web thường có chung những thành phần bố cục: header, body, footer… Hình dưới đây minh họa một cấu trúc website phổ biến:
Một cách truyền thống để hiện thực cấu trúc trên trong các phiên bản HTML trước đây là sử dụng các tag <div> với thuộc tính id=”header”, id=”nav”… Cách này vừa khó quản lý (đối với các trang phức tạp, số lượng tag <div> có thể rất nhiều), vừa không mô tả tự nhiên ý nghĩa của từng thành phần (không thể biết <div> nào đánh dấu header, <div> nào đánh dấu body nếu không nhìn vào thuộc tính id hoặc nội dung bên trong). Để giải quyết vấn đề này, HTML5 đưa ra các thẻ mới, với tên gọi phản ánh chính xác vai trò của nó. Hãy xem qua đoạn code khung của trang web ở trên trong HTML5:
<head>
<meta charset=”utf-8”/>
<title>Worm Page</title>
</head>
<body>
<header> </header>
<navigation> </navigation>
<section> </section>
<footer> </footer>
</body>
</html>
Đoạn code trên có nhiều điểm đáng lưu ý. Trong đó điều đầu tiên đập vào mắt bạn có lẽ là khai báo DOCTYPE, trước đây vốn dài dòng và khó nhớ, nay đã được rút gọn tối đa. Cùng với đó là thẻ meta dùng để chỉ định tập kí tự (character set) cũng được tinh giản. Để tiện tham khảo, đây là dòng code tương đương trong HTML4:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Tuy nhiên, sự khác biệt lớn nhất nằm trong thẻ body, với hàng loạt các thành viên mới: <header>, <navigation>, <section>, <footer>. Có thể thấy rằng bố cục một trang HTML5 đã được minh bạch hóa đáng kể: các thẻ <header>, <footer>… đều tự nói lên nội dung mà chúng chứa đựng. Hơn thế nữa, các thẻ này còn mang lại lợi ích từ việc tối ưu hóa search engine. Một lưu ý nhỏ là để đoạn code trên hoạt động đúng, bạn sẽ cần một trình duyệt hỗ trợ HTML5. Nếu đang sử dụng IE8, bạn có thể sẽ thấy đoạn mã sau “bị” hiển thị lên trình duyệt, mà nguyên nhân chính là do IE8 hỗ trợ HTML5 chưa hoàn chỉnh:
<meta charset="utf-8”/>
Thẻ <header> và <footer> đánh dấu phần mở đầu và kết thúc của một trang web, đây là nơi thích hợp để đặt các banner, logo hình ảnh và thông tin bản quyền. Ví dụ sau minh họa cách sử dụng <header> và <footer>:
<footer>
<p>Copyright 2010 WormTech.</p>
</footer>
Thẻ <section> chia nội dung trang web ra thành nhiều phần chính. Mỗi <section> lại có thể có nhiều <article>. Một <article> có thể xem như một bài viết cụ thể (chẳng hạn như một blog entry rất thích hợp để đặt trong một <article>). Cuối cùng, thẻ <aside> thường đóng vai trò như một sidebar cung cấp các thông tin liên quan cho <article> chứa nó (thực tế thì bạn sẽ cần đến CSS nếu muốn hiển thị thẻ <aside> này như một sidebar. Như đã đề cập trong bài viết trước, HTML5 cố gắng tách biệt hai phần nội dung và trình bày nên các thẻ HTML5 không quy định sẵn cách thức hiển thị mà nhường lại công việc đó cho CSS. Tuy vậy, việc sử dụng các thẻ mới vẫn giúp cho code HTML dễ đọc hơn và hỗ trợ tối ưu công cụ tìm kiếm)
Thẻ <dialog> cũng là một bổ sung thú vị, thẻ này cho phép đánh dấu một cuộc đàm thoại giữa nhiều người trên mạng. Trong đó <dt> xác định người nói và <dd> chứa nội dung đàm thoại.
Ngoài ra, HTML5 còn rất nhiều thẻ mới hữu dụng. Một vài cái tên có thể kể ra như <time>, <progress>, <figure>… Nhưng trong khuôn khổ hạn hẹp, bài viết chỉ trình bày những nét cơ bản nhất, phần còn lại xin nhường cho các bạn yêu thích công nghệ tự khám phá, không chừng các bạn sẽ cảm thấy thích thú hơn! Phần cuối cùng của bài này xin tập trung nói về những thay đổi của form trong HTML5.
Form 2.0 – cải tiến đáng giá trong HTML5
Có lẽ Form 2.0 – một tên gọi khác của form trong HTML5, là một trong những thành phần hấp dẫn nhất. Form 2.0 có nhiều bổ sung đáng giá cho các phần tử <input>, khiến chúng trở nên mạnh mẽ và đáp ứng được các yêu cầu thiết kế phức tạp mà không cần đến một giải pháp công nghệ bên ngoài nào như Flash và Silverlight. Hãy thử xem qua ví dụ sau:
<button type=submit>Submit</button>
Có lẽ bạn sẽ dễ dàng nhận ra sự xuất hiện nhiều thuộc tính mới trong thẻ <input>: thuộc tính required đánh dấu một field là bắt buộc, placeholder sẽ hiện một dòng text mờ trên textbox (dòng text này sẽ biến mất khi click vào textbox) và autofocus xác định phần tử nhận focus đầu tiên trên form. Với HTML4, việc hiện thực các tính năng này đều yêu cầu kĩ năng lập trình JavaScript, nhưng nay thì chúng đã được xây dựng trực tiếp trong HTML5!
Bên cạnh đó, thuộc tính type của <input> cung cấp nhiều kiểu control mới cho form. Chẳng hạn như ta có thể dễ dàng tạo một date control để lựa chọn ngày tháng bằng cách set thuộc tính type=”date”. HTML5 thậm chí còn có sẵn các field được thiết kế riêng cho địa chỉ email hoặc điện thoại. Cái hay ở chỗ HTML5 cho khả năng tương thích ngược khá tốt. Khi bạn thử đoạn code trên trên một trình duyệt không hỗ trợ HTML5 thì các field sẽ được hiển thị như các textbox thông thường mà không gây ra lỗi khó chịu nào. Tất cả các hỗ trợ này khiến cho việc xây dựng form trở nên dễ dàng hơn bao giờ hết.
Thẻ (tag) là nét đặc trưng của một ngôn ngữ đánh dấu (markup language). Bài viết này đã giới thiệu khái quát về cách sử dụng một số thẻ mới trong HTML5. Dù chỉ ở mức cơ bản, tôi hi vọng các bạn đã phần nào nhận ra tiềm năng của công nghệ mới này. Trong các phần tiếp theo, chúng ta sẽ cùng tìm hiểu CSS3 và các API cho HTML5.
* Source code:
Download file HTML hoàn chỉnh chứa các đoạn code trong bài ở đây
* Mục lục:
Tìm hiểu về HTML5 – Phần I
Sau bài viết HTML5 và Silverlight: Những khác biệt, tôi nhận thấy có rất nhiều nguời quan tâm đến HTML5 vì đây là một công nghệ khá “nóng” mà tài liệu tiếng Việt trên mạng lại ít (đa số bài viết về HTML5 là những bài báo theo kiểu giới thiệu). Vì vậy, tôi quyết định bắt đầu viết về chủ đề này, vừa là một cách giải lao sau giờ làm việc, vừa tranh thủ học hỏi ôn lại kiến thức. Silverlight cũng hay nhưng chắc đành để khi khác, bởi Silverlight trên các diễn đàn, website nhiều quá rồi, và lâu lâu đổi gió sang HTML5 cũng cảm thấy mới mẻ thú vị hơn!
Bài viết tìm hiểu về HTML5 dự tính chia thành nhiều kì, trong đó phần đầu tiên giới thiệu về tổng quan công nghệ.
Tổng quan công nghệ
1. Từ HTML đến HTML5:
HTML ra đời từ những năm 1989, do Tim Berners-Lee phát triển, sau đó nhanh chóng phổ biến nhờ tính dễ học và dễ sử dụng. HTML sử dụng các tag để đánh dấu từng đoạn văn bản. Một ví dụ đơn giản như:
<p> This is a paragraph </p>
Phiên bản HTML đầu tiên của Tim Berners-Lee rất khác với những gì chúng ta đang sử dụng ngày nay, chẳng hạn như thiếu hẳn các chức năng định dạng văn bản. Tuy nhiên nhờ sự đơn giản của các tag này mà HTML được chấp nhận rộng rãi, và được đưa lên thành chuẩn. Trong vòng tám năm (1989 – 1997), HTML đã phát triển qua bốn cột mốc chính, với phiên bản gần đây nhất là HTML4. Phiên bản này cũng đánh dấu việc CSS1 được công nhận là chuẩn để định dạng trang web, và DOM trở thành chuẩn cho phép các ứng dụng JavaScript chạy thống nhất trên mọi trình duyệt.
Với sự tăng trưởng ngày càng mạnh mẽ của Internet, các thuật ngữ như Web 2.0 và RIA (Rich Internet Application) hầu như hiện diện ở khắp nơi. Người sử dụng, được trang bị phần cứng nhanh hơn và băng thông mạng tốt hơn, cũng thường xuyên đặt ra những yêu cầu phức tạp. Web hiện đại không phải chỉ là để sử dụng được, mà còn phải bắt mắt và giàu khả năng tương tác.
Trước thực tế đó, rõ ràng HTML cũng cần phải thay đổi, và sự thay đổi đó là cả một quá trình dài! Hơn 13 năm kể từ khi HTML4 xuất hiện, HTML5 mới đang tập tễnh những bước đi đầu tiên! Mặc dù vậy, HTML5 mang trong mình đủ sức hấp dẫn để gây nên sự chú ý (hảy thử search google để xem có bao nhiêu kết quả về HTML5). HTML5 được xây dựng để thỏa mãn bốn tiêu chí sau:
a. Khả năng tương thích: đây là một tin vui cho những ai đã quen thuộc với việc sử dụng HTML: bạn không cần phải học lại gì cả! HTML5 vẫn giữ lại các cú pháp truyền thống trước đây, và nếu một vài tính năng mới nào đó của HTML5 chưa được trình duyệt hỗ trợ thì nó phải có một cơ chế fall back để render trong các trình duyệt cũ. Đương nhiên là, HTML5 không thể xóa bỏ tất cả những gì đã có suốt hơn 20 năm chỉ trong một ngày. Mặc dù điều này cũng không đồng nghĩa với việc HTML5 hỗ trợ tất cả các trình duyệt, nhưng nếu bạn có một trình duyệt đủ cũ để không tương thích với HTML5, có lẽ đã đến lúc bạn nâng cấp trình duyệt mới!
b. Tính tiện dụng: đặt người dùng lên hàng đầu nên cú pháp của HTML5 khá thoải mái (dù chưa được chặt chẽ như XHTML), thiết kế hỗ trợ sẵn bảo mật, và sự tách biệt giữa phần nội dung và trình bày ngày càng thể hiện rõ: công việc định dạng hầu hết do CSS đảm nhiệm, HTML5 không còn hỗ trợ phần lớn các chức năng định dạng trong các phiên bản HTML trước đây.
c. Khả năng hoạt động xuyên suốt giữa các trình duyệt: HTML5 cung cấp các khai báo đơn giản hơn và một API mạnh mẽ. Một ví dụ dễ thấy là khai báo DOCTYPE:
HTML4: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd“>
HTML5: <!DOCTYPE html>
So với các phiên bản trước, đặc tả HTML5 dài hơn đáng kể nhằm chi tiết hóa mọi hành vi để đảm bảo chúng thống nhất giữa các trình duyệt khác nhau.
d. Khả năng truy xuất rộng rãi: HTML5 mang lại sự hỗ trợ tốt hơn cho các ngôn ngữ và cho người khuyết tật, đồng thời cũng có thể hoạt động trên các thiết bị và nền tảng khác nhau.
Vậy HTML5 đem lại những gì?
Điểm đặc trưng đầu tiên của một ngôn ngữ đánh dấu (markup language) là các thẻ. Và ở mặt này thì HTML5 được bổ sung rất nhiều cái mới, từ các thẻ tổ chức nội dung (article, aside, title…) đến các thẻ hỗ trợ tương tác và multimedia (video, audio…). Trong HTML5 cũng xuất hiện một khái niệm gọi là semantic markup, tức là các thẻ có mang ngữ nghĩa. Các thẻ này ra đời từ việc khảo sát các trang web và nhận diện một số thói quen đặt tên phổ biến (một số phần của trang web thường luôn được đặt một cái tên như “header”, “footer”, “nav”). Ngoài sự rõ ràng, sử dụng các semantic markup còn có thể đem lại lợi thế khi các công cụ tìm kiếm trong tương lai tận dụng chúng để phân loại kết quả.
Bên cạnh đó, thẻ <form> của HTML5 cũng được xem là một cải tiến lớn. Giờ đây với Form 2.0 (một cách gọi form trong HTML5), tất cả những chức năng mà bạn cần (định dạng, validate data…) đã được xây dựng trực tiếp vào trong HTML. Bạn không còn cần đến Ajax, Flash hay các công nghệ hỗ trợ để làm công việc này nữa!
Không chỉ dừng lại ở các tag, HTML5 bao gồm một tập các API hấp dẫn. Vài API thú vị có thể kể đến như:
- Canvas
- Geolocation
- WebSocket
- Web Storage
- WebWorkers
- …
Một số các API này sẽ được nói đến trong các phần tiếp theo.
2. CSS3 và JavaScript:
Sẽ là thiếu sót nếu nhắc tới HTML mà bỏ quên CSS hoặc JavaScript. Cũng như HTML5, CSS3 vẫn đang trong giai đoạn phát triển, nhưng những tính năng của nó đã làm cho nhiều người phải háo hức. CSS3 cho phép thực hiện một cách dễ dàng những điều mà trước đây phải tốn rất nhiều công sức, chẳng hạn như các đường viền (border) với các góc cạnh được bo tròn, hay thậm chí là xoay đối tượng theo các hướng khác nhau. HTML5 và CSS3 có nhiều tiềm năng sẽ trở thành một cặp đôi ăn ý, nhất là khi mà HTML5 đang đi theo hướng tách biệt giữa nội dung và giao diện. Trách nhiệm trình bày một trang web sẽ từ từ được nhường lại cho CSS3.
Song song với chuyện đó, DOM trong HTML5 cũng được hoàn thiện với bộ Selectors API mới đơn giản hơn, cung cấp nhiều phương thức truy xuất chính xác đến từng phần tử trên trang web mà không cần các vòng lặp phức tạp duyệt qua từng phần tử như trước. Cộng với việc các trình duyệt hiện đại đã tăng tốc thực thi JavaScript đáng kể, hơn nữa còn cung cấp các công cụ debug tiện lợi, việc phát triển ứng dụng với JavaScript đã trở nên nhẹ nhàng hơn bao giờ hết.
3. Kết luận:
Một trong những khó khăn ngăn cản việc phổ biến HTML là trình duyệt Internet Explorer, hiện chiếm thị phần lớn nhất thế giới, vốn không có mấy quan tâm đến việc tương thích chuẩn này. Tuy nhiên, với việc Microsoft chính thức tuyên bố hỗ trợ HTML5 trong IE9 (các kết quả thử nghiệm gần đây cho thấy tốc độ HTML5 trên IE9 rất khả quan), có thể nói rằng tất cả các trình duyệt lớn đều đã sẵn sàng chào đón HTML5. Điều đó vừa cho thấy sức cuốn hút công nghệ mới này, đồng thời hứa hẹn một tương lai tốt đẹp cho HTML5 cất cánh.
HTML5 dự kiến sẽ ra mắt chính thức vào năm 2012, và đạt đến mức tương thích giữa các trình duyệt vào năm 2022. Dù chặng đường có thể còn dài, nhưng những lợi ích mà HTML5 đem lại có thể đảm bảo cho nó một thành công không kém các phiên bản trước. HTML5 được dự đoán sẽ phổ biến như HTML4 hiện nay vào một ngày không xa. Dù không thể kết luận rằng HTML5 sẽ thay thế các công nghệ hiện tại (Silverlight, Flash…) như nhiều nguồn tin đang đồn thổi, đây vẫn sẽ là một công nghệ đáng để ta học hỏi!
