Html 5 - Tương Lai Web
10:58AM 26/05/2010, Lập trình web
HTML5 cho phép tạo ra các trang web có thể hoạt động tốt trên nhiều trình duyệt khác nhau của bất kỳ thiết bị nào. Không những vậy, HTML5 còn đem đến cho người dùng những trải nghiệm về tốc độ truy cập web nhanh hơn, tốt hơn, tài nguyên phong phú hơn.
Hiện nay, công nghệ dành cho thiết bị di động ngày càng phát triển. Nếu như trước đây, bạn phải dùng chiếc máy tính để bàn (MTĐB) cồng kềnh cùng trình duyệt web IE (Internet Explorer) để lướt web, thì giờ đây với máy tính xách tay (MTXT), điện thoại thông minh (ĐTTM) cùng rất nhiều trình duyệt khác (Firefox, Opera…) bạn có thể dễ dàng lướt “net” ở bất kỳ đâu. Tuy nhiên với các thiết bị, trình duyệt web khác nhau, nội dung hiển thị trên màn hình sẽ khác nhau. Chẳng hạn, trên máy tính bạn xem trang web này rất tốt, nhưng trên ĐTTM thì giao diện và cấu trúc trang bị xáo trộn. Hay bạn có thể xem phim rất tốt với IE nhưng với Firefox thì không.
Vậy giải pháp nào để người dùng có thể sử dụng bất
kỳ trình duyệt trên bất kỳ thiết bị nào cũng có thể xem được đầy đủ,
trọn vẹn nội dung, thông tin trên internet.
HTML5 cho phép nhà phát
triển, lập trình web tạo ra các trang web có thể hoạt động tốt trên
nhiều trình duyệt khác nhau của bất kỳ thiết bị nào – từ MTĐB, MTXT cho
đến ĐTTM. Không những vậy, HTML5 còn đem đến cho người dùng những trải
nghiệm về tốc độ truy cập web nhanh hơn, tốt hơn, tài nguyên phong phú
hơn.
Một số phần tử mới
HTML5 vẫn giữ lại các cấu trúc cơ bản như < HEADER >, <'FOOTER'>, nhưng được bổ sung các phần tử mới, chẳng hạn <'CANVAS'>, <'AUDIO'>.
Các phần tử trong cấu trúc mới
• <'HEADER'>: chứa thông tin giới thiệu của một phần hay một trang hoặc bất cứ thông tin gì của tiêu đề tài liệu hay tiêu đề nội dung của một bảng.
• <'NAV'>: chứa đường liên kết đến trang khác hoặc phần khác trên cùng trang, không nhất thiết chứa tất cả liên kết, chỉ cần đường chuyển hướng chính.
• <'SECTION'>: đại diện cho một phần tài liệu hay ứng dụng, cách thức hoạt động tương tự <'DIV'>.
• <'ARTICLE'>: đại diện một phần của trang, có thể đứng độc lập, chẳng hạn blog post, forum entry… hay bất kỳ thành phần nội dung đứng độc lập nào.
• <'ASIDE'>: đại diện cho nội dung có liên quan đến phần tài liệu chính hay các đoạn trích dẫn.
• <'FOOTER'>: đánh dấu không chỉ cuối trang hiện hành mà còn mỗi phần có trong trang. Vì vậy, <'FOOTER'> có thể dùng nhiều lần trong một trang.
Hình bên dưới sẽ giúp bạn thấy rõ hơn cấu trúc mới:
<'HEADER'>, <'FOOTER'> không chỉ đại diện cho phần đầu, phần cuối của trang hiện hành, mà còn là đại diện phần đầu, phần cuối của một phần tài liệu, hơn nữa, bạn có thể dùng <'THEAD'>, <'TFOOT'> trong các bảng dữ liệu. Việc sử dụng cấu trúc với các phần tử mới này giúp việc lập trình thuận tiện hơn.
Một số đặc điểm mới
Với sự đóng góp, cải tiến của các nhà phát triển trình duyệt như Google (trình duyệt Chrome), Apple (Safari), Mozilla (Firefox),…; HTML5 giờ đây đang dần hoàn thiện và có nhiều đặc tính khá tinh tế:
Lưu trữ ngoại tuyến (offline): cho phép lưu trữ dữ liệu liên tục hay từng phần mà không cần cài đặt tính năng bổ sung (plug-in), tương tự như Google Gears.
Miền vẽ (canvas drawing) cho phép tương tác trực tiếp với hình ảnh, biểu đồ, các đối tượng trong game (game component) thông qua các mã lập trình và tương tác người dùng – không cần Flash hay các plug-in.
Truyền nhận hình ảnh (video) và âm thanh (audio) trung thực: hiện đang trong quá trình hoàn thiện và thống nhất các chuẩn định dạng. Đến một ngày nào đó, YouTube và Pandora có thể sẽ không cần đến Flash nhưng vẫn đem đến cho bạn những đoạn video, âm thanh hấp dẫn.
Định vị người dùng (geolocation): HTML5 có thể giúp xác định vị trí của bạn và dùng nó để thực hiện cho một công việc nào đó, chẳng hạn phục vụ cho các kết quả tìm kiếm, cập nhật Twitter hay dùng cho các thiết bị định vị. HTML5 không giới hạn API của nhà cung cấp hay công cụ trình duyệt nào.
Mẫu nhập thông minh (smarter form): hộp tìm kiếm, dòng nhập thông tin, vùng thông tin hợp lệ… sẽ` được kiểm soát tốt hơn, ít gây phiền toái cho người dùng khi họ điền thông tin, dữ liệu.
Tiếp cận các ứng dụng web dễ dàng (web application focus): chẳng hạn như việc xây dựng các trang wiki, công cụ kéo thả, bảng thảo luận, chat thời gian thực. Việc thực hiện các ứng dụng này sẽ nhanh chóng hơn và chúng có thể làm việc như nhau trên các trình duyệt.
Lợi ích mà HTML5 đem lại
Lợi ích to lớn nhất mà HTML5 đem lại là khả năng hỗ trợ API (Application Programming Interface - giao diện lập trình ứng dụng) và DOM (Document Object Model – mô hình đối tượng tài liệu hay cây cấu trúc dữ liệu).
HTML5 cho phép mở rộng dễ dàng với API. Điều này sẽ
giúp các nhà phát triển tự do hơn trong việc sáng tạo các ứng dụng thân
thiện hơn với người dùng khi mà họ còn lệ thuộc vào nền tảng Flash -
lưu trữ dữ liệu và trình diễn ảnh động. Cùng với việc hỗ trợ bộ nhớ ứng
dụng (application cache) và khả năng offline, HTML5 sẽ mở ra nhiều cơ
hội tương lai cho các ứng dụng web. Khả năng offline có thể hình dung
như việc Thunderbird, Outlook cho phép bạn kiểm tra email ngay cả khi
bạn làm việc offline nhưng với HTML5 bạn sẽ thực hiện điều này qua
trình duyệt. Đây là cầu nối quan trọng để mối “lương duyên” giữa máy
tính cá nhân và môi trường web sớm hiện thực hơn. Google Gears cho
chúng ta khả năng lưu trữ dữ liệu offline, Flash đem đến cho người dùng
những trải nghiệm về sức mạnh của bộ nhớ ứng dụng (Pandora dùng nó để
lưu trữ thông tin người dùng). Với HTML5, những khả năng này hiện đã
sẵn sàng và có thể dễ dàng mở rộng với JavaScript.
Một lợi ích nữa, với HTML5, nhà phát triển chỉ cần
lập trình một lần là có thể dùng được trên nhiều hệ thống, không như
Flash hay các plug-in khác luôn cần có nhiều phiên bản khác nhau dành
cho mỗi nền tảng.
Mặc dù Flash, SilverLight… vẫn là các plug-in đang
hoạt động tốt, nhưng các nhà phát triển vẫn ra sức ủng hộ HTML5. Đơn
giản vì: thứ nhất, tuy Flash hoạt động tốt nhưng đôi khi nó gây ra hiện
tượng rò bộ nhớ (memory leak) hay làm nghẽn hệ thống (crash); thứ hai,
HTML5 giúp tập trung, quản lý các phần tử tương tác trên trang web một
cách tự nhiên, dựa vào các đoạn mã; thứ 3, HTML5 giúp JavaScipt hiện
thực dễ dàng hơn. Một điểm nữa cho HTML5 là khả năng hỗ trợ nhà lập
trình chuyển đổi từ XHTML.
Một khi có nhiều trình duyệt và nhiều nhà phát triển hỗ trợ các chuẩn tương tác video, audio của HTML5, thì ý tưởng về một cửa hàng cung cấp ứng dụng dùng được trên nhiều thiết bị, nền tảng – ĐTTM, MTĐB, MTXT, Windows, Mac, Linux – sẽ trở thành hiện thực.
Ứng dụng
HTML5 hiện đang được sử dụng trên một số điện thoại có trình duyệt nền tảng Webkit như Palm Pre, iPhone 3Gs, Google Android. Gần đây, Google cũng đã tích hợp sẵn HTML5 vào Wave nhằm xây dựng ứng dụng tất cả trong một từ blog, wiki, IM (instant messaging), e-mail cho đến giao tiếp đồng bộ. Trình duyệt Firefox 3.5 cũng đã hỗ trợ HTML5 với các thẻ <'VIDEO'> và <'AUDIO'>, theo định dạng .ogg.
HTML5 vẫn đang còn là bản dự thảo, nhưng với sự hỗ trợ mạnh mẽ từ các nhà phát triển trình duyệt Google, Apple, Mozilla… thì nó có khả năng “khuynh đảo” thị trường ứng dụng web, và sớm trở thành chuẩn web chính thức. Một số trình duyệt có hỗ trợ HTML5 (tùy mức độ): Firefox, Chrome, Safari, Opera.