Thiết kế web HTML5

Thiết kế website bằng ngôn ngữ mới HTML5 là một bước đột phá trong sự lựa chọn. Nó càng có ý nghĩa hơn sau khi Adopt tuyên bố khai tử và không phát triển Flash, vì thế sự tiện ích trong thời đại mới sẽ sự lựa chọn của mọi người trên toàn thế giới. Nó là giải pháp nhanh, gọn, đẹp và đặc biệt là sự tương thích cho các thiết bị di động - Một cộng đồng vẫn luôn được mở rộng ở hiện tại và tương lai.

 

Ngôn ngữ của tương lai

 


HTML5 là gì?

HTML5 sẽ là một tiêu chuẩn mới cho ngôn ngữ cơ bản HTML. Như chúng ta đã biết, có các phiên bản trước đây, đó là HTML và HTML 4.01 hình thành vào năm 1999. Các trang web đã thay đổi rất nhiều kể từ sau thời gian đó.

Cho đến này, ngôn ngữ HTML5 vẫn còn là một công việc đang được tiến hành và hoàn thiện. Tuy nhiên, các trình duyệt đã có sự hỗ trợ nhiều cho các yếu tố HTML5 mới và các APIs.

HTML5 được hình thành như thế nào?

 


HTML5 được hình thành bởi sự hợp tác giữa Consortium World Wide Web (W3C) và Nhóm công nghệ ứng dụng web siêu văn bản (WHATWG).

WHATWG đã làm việc với những sự hình thành web và các ứng dụng, và W3C đã làm việc với XHTML 2.0. Trong năm 2006, họ đã quyết định hợp tác và tạo ra một phiên bản mới của HTML.

Một số quy tắc cho HTML5 đã được thành lập:


- Các tính năng mới phải dựa trên HTML, CSS, DOM, và JavaScript
- Làm giảm nhu cầu cho các plugins bên ngoài (như Flash)
- Xử lý lỗi tốt hơn
- Đánh dấu để thay thế kịch bản
- HTML5 nên được thiết lập độc lập
- Quá trình phát triển nên được hiển thị cho công chúng
 


 

 

Top 10 lý do sử dụng HTML5 đúng


Để tiếp tục làm sáng tỏ HTML5 và giúp những quan điểm về thiết kế và phát triển nhằm đưa vào một giai đoạn mới. Chúng tôi đưa những nội dung sau đây vào mười lý do lý do tại sao tất cả chúng ta đều nên được sử dụng HTML5 ngay bây giờ.

Trong một số trường hợp, bạn vẫn không muốn sử dụng HTML5? Chúng tôi đoán bạn có thể có lý do riêng nào đó của bạn. Nó không hoàn toàn được thông qua thông qua, nó không làm việc trong phiên bản IE cũ, bạn chỉ là say đắm trong sự đam mê với văn bản mã XHTML nghiêm ngặt. HTML5 là cuộc cách mạng các trang web cần thiết. Và thực tế là, nó là tương lai cho dù bạn có thích hay không. HTML5 không phải là khó để sử dụng hoặc hiểu mặc dù nó không hoàn toàn thông qua, vẫn còn rất nhiều lý do để bắt đầu sử dụng nó ngay bây giờ - như ngay sau khi bạn nhận được khi thực hiện đọc bài viết này. Thậm trí, bạn có thể dùng nhiều
trình soạn thảo HTML5 có ích, nó sẽ giúp bạn có được những trải nghiệm tuyệt vời.
Có rất nhiều các bài báo giới thiệu về việc sử dụng HTML5 và ca ngợi những lợi ích của nó. Với tất cả những bài viết, với của Apple đẩy nó; với Adobe, họ xây dựng sản phẩm mới xung quanh nó, và với rất nhiều các trang web dành cho nó; bên cạnh đó, lại có nhiều trang web khác vẫn ủng hộ nó. Tôi nghĩ rằng vấn đề chính là, nó vẫn có vẻ giống như một thực thể bí ẩn đối với nhiều người.
Để tiếp tục làm sáng tỏ HTML5 , chúng tôi sẽ giúp bạn hiểu rõ hơn với 10 nội dung đếm ngược:

10 - KHẢ NĂNG TIẾP CẬN

HTML5 làm cho việc tạo ra các trang web truy cập dễ dàng hơn vì hai lý do chính: ngữ nghĩa và ARIA. Một số thẻ mới như <header>, <footer>, <nav>, <section>, <aside>, cho phép các trình đọc màn hình để dễ dàng truy cập nội dung. Trước đây, người đọc màn hình của bạn không có cách nào để xác định những gì một thẻ như <div> đưa ra là ngay cả khi bạn đã gán một ID hay Class. Với thẻ ngữ nghĩa trình đọc màn hình tốt hơn có thể kiểm tra các tài liệu HTML và tạo ra một kinh nghiệm tốt hơn cho những người sử dụng chúng.
ARIA là một chuẩn của W3C mà chủ yếu được sử dụng để chỉ định cụ thể "vai trò" đến các yếu tố trong một tài liệu HTML cơ bản tạo ra các mốc quan trọng trên trang: Header, footer, chuyển hướng hoặc bài viết, thông qua vai trò của các thuộc tính. Điều này cũng đã được bỏ qua và rộng rãi được sử dụng chủ yếu là do thực tế là nó không hợp lệ. Tuy nhiên, HTML5 sẽ xác nhận các thuộc tính.

9 - HỖ TRỢ VIDEO VÀ AUDIO


Hãy quên về Flash Player và các máy nghe nhạc như bên thứ ba khách, nó làm video và âm thanh của bạn thực sự tiếp cận với các <video>. HTML5 và các thẻ mới <audio> là phương tiện truyền thông của bạn để chơi một cách chính xác; yếu tố này đã luôn luôn là khá nhiều "những cơn ác mộng", bạn phải sử dụng các thẻ <embed> và <object> và chỉ định một danh sách rất lớn của các thông số chỉ để có được những điều có thể nhìn thấy và làm việc một cách chính xác. Thẻ phương tiện truyền thông của bạn chỉ trở nên khó chịu với khối rất lớn của các phân đoạn mã khó hiểu. Các thẻ HTML5 video và âm thanh về cơ bản xử lý với chúng giống như hình ảnh; <video src="url"/>. Nhưng những gì về tất cả những thông số như chiều rộng, chiều cao và autoplay? Tuy nhiên, bạn không phải lo lắng, bởi vì chỉ cần xác định những thuộc tính trong thẻ giống như bất kỳ phần tử HTML khác: <video src="url" width="640px" height="380px" autoplay/>.
Nó thực sự là đơn giản, nhưng bởi vì những trình duyệt không phổ biến sẽ không thích ngôn ngữ này, bạn sẽ cần phải thêm mã hơn một chút để có được chúng làm việc một cách chính xác... nhưng mã này là gần như lộn xộn như các tags <object> và <embed>:
<video poster="myvideo.jpg" controls>
 <source src="myvideo.m4v" type="video/mp4" />
 <source src="myvideo.ogg" type="video/ogg" />
 <embed src="/to/my/video/player"> </ embed>
</ Video>

8 - DOCTYPE

<DOCTYPE html>
Đó là loại tài liệu, không hơn, không kém. Khá đơn giản phải không bạn? Không cắt và dán một số đường dài đọc của mã và không có thẻ đầu với đầy các thuộc tính DOCTYPE. Bạn chỉ đơn giản và dễ dàng có thể gõ nó ra và được điều mình muốn. Điều thực sự tuyệt vời về nó mặc dù, quá đơn giản, là nó hoạt động trong mọi trình duyệt rõ ràng và quay trở lại sự sợ hãi đối với IE6.

7 - MÃ CLEANER


Nếu bạn có đam mê đơn giản, thanh lịch, dễ dàng để đọc mã HTML5. Ngôn ngữ này cho phép bạn viết mã rõ ràng và mô tả mã ngữ nghĩa cho phép bạn dễ dàng tách biệt ý nghĩa từ phong cách và nội dung. Hãy xem xét mã tiêu đề điển hình và đơn giản với các menu:
1
2
3
4
5
<div id="header">
 <h1>Header Text</h1>
 <div id="nav">
  <ul>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
  </ul>
 </div>
</div>

Vì vậy, mã này là khá "sạch sẽ và đơn giản". Tuy nhiên, với HTML5, bạn có thể làm sạch nó lên nhiều hơn và đồng thời đánh dấu của bạn có ý nghĩa hơn:
1
2
3
4
5
<header>
 <h1>Header Text</h1>
 <nav>
  <ul>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
  </ul>
 </nav>
</header>
Với HTML5, bạn cuối cùng có thể chữa khỏi "divitis" và "classitis" bằng cách sử dụng các header ngữ nghĩa và HTML để mô tả nội dung của bạn. Trước đây, người lập trình sẽ thường chỉ cần sử dụng div cho mỗi khối nội dung hơn là thả một id hoặc lớp trên nó để mô tả nội dung của nó, nhưng với những tags mới như <section>, <article>, <header>, <footer>, <aside> và <nav >, HTML5 cho phép bạn mã đánh dấu của bạn sạch hơn cũng như giữ CSS của bạn tổ chức tốt hơn và đẹp hơn.

6 - Lưu trữ thông minh hơn

Một trong những điều thú vị nhất về HTML5 là các tính năng lưu trữ địa phương. Đó là một chút của một chéo giữa cookie thường xuyên cũ và một cơ sở dữ liệu phía máy khách. Đó là tốt hơn so với các tập tin cookie bởi vì nó cho phép lưu trữ trên nhiều cửa sổ, nó có bảo mật tốt hơn và hiệu suất và dữ liệu sẽ vẫn tồn tại ngay cả sau khi trình duyệt được đóng lại. Bởi vì đó là bản chất là một cơ sở dữ liệu phía khách hàng, bạn không phải lo lắng về việc người sử dụng xóa các tập tin cookie và được thông qua bởi tất cả các trình duyệt phổ biến.
Lưu trữ địa phương là rất tốt cho nhiều điều, nhưng nó là một công cụ của HTML5 đang làm cho các ứng dụng web có thể có mà không cần bổ sung của bên thứ ba. Có khả năng lưu trữ dữ liệu trong trình duyệt của người sử dụng cho phép bạn dễ dàng tạo ra những tính năng ứng dụng như: Thông tin người dùng lưu trữ, khả năng để cache dữ liệu, và khả năng để tải trạng thái ứng dụng trước đó của người dùng.

5 - TƯƠNG TÁC TỐT HƠN


Quả thực, tất cả chúng ta đều muốn tương tác tốt hơn, tất cả chúng ta đều muốn có một trang web năng động hơn đáp ứng cho người sử dụng và cho phép người dùng tận hưởng do tương tác nội dung của bạn thay vì chỉ nhìn vào nó. Nhập <canvas>, HTML5 vẽ tag cho phép bạn làm hầu hết khả năng tương tác và linh hoạt hơn so với các nền tảng ứng dụng phong phú trước trên internet như Flash.
Ngoài <canvas>, HTML5 cũng đi kèm với hàng loạt các APIs cho phép bạn xây dựng một kinh nghiệm người dùng tốt hơn và ứng dụng web năng động hơn - đây là một danh sách nhanh chóng của các API bản địa:
- Kéo và thả (DnD)
- Cơ sở dữ liệu lưu trữ trực tuyến
- Quản lý lịch sử trình duyệt
- Chỉnh sửa tài liệu
- Đặt thời gian phát lại phương tiện truyền thông

4 - PHÁT TRIỂN TRÒ CHƠI


Vâng, đó là chính xác, bạn có thể phát triển các trò chơi bằng cách sử dụng tag <canvas> HTML5. HTML5 cung cấp một cách tuyệt vời, thân thiện với điện thoại di động để phát triển tốt hơn, trò chơi tương tác. Nếu bạn đã xây dựng trò chơi Flash trước đây, bạn sẽ yêu thích trò chơi nếu được xây dựng bởi HTML5.
Hướng dẫn Script gần đây đã được cung cấp một loạt phần bốn của bài học tập trung vào đầu trò chơi HTML5, phát triển trên hơn và kiểm tra một số các công cụ mà đã được tạo ra
Phát triển HTML5 Gaming bài một
Phát triển HTML5 Gaming bài hai
HTML5 Gaming Phát triển bài ba
HTML5 Gaming Phát triển bài bốn
...

3 - Hỗ trợ trình duyệt Kế thừa / ngang qua

Các trình duyệt phổ biến hiện đại của bạn, tất cả đã hỗ trợ HTML5 (Chrome, Firefox, Safari IE9 và Opera); và các DOCTYPE HTML5 được tạo ra để tất cả các trình duyệt, ngay cả những người thực sự cũ và gây phiền nhiễu, như IE6 có thể sử dụng nó. Nhưng chỉ vì trình duyệt cũ công nhận loại tài liệu đó không có nghĩa họ có thể sử dụng tất cả các thẻ HTML5 và các tính năng mới. May mắn thay, HTML5 đang được xây dựng để làm cho mọi việc dễ dàng hơn; và nhiều hơn nữa, qua trình duyệt thân thiện để trong những trình duyệt IE cũ mà không thích các thẻ mới, chúng ta có thể chỉ đơn giản là thêm một Shiv Javascript mà sẽ cho phép chúng sử dụng các yếu tố mới:
1
2
3
<!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<[Endif] ->
Một số tài nguyên có giá trị kiểm tra ra:
HTML5 & CSS3 SẴN SÀNG
Khi tôi có thể sử dụng
HTML5 Chữ thập Trình duyệt Polyfills
Modernizr

2 - MOBILE


Gọi nó là một linh cảm, nhưng tôi nghĩ rằng công nghệ di động đang trở thành phổ biến hơn những ngày này. Tôi biết, đó là một giả định và một số bạn có thể nghĩ điện thoại di động chỉ là một mốt... phải. Thiết bị di động đang dùng trên toàn thế giới. Việc thông qua các thiết bị di động tiếp tục phát triển rất nhanh và điều này có nghĩa là nhiều người dùng hơn và nhiều hơn nữa sẽ được sử dụng các trình duyệt di động của họ để xem các trang web hoặc ứng dụng của bạn. HTML5 là công cụ sẵn sàng di động nhất cho việc phát triển các trang web và các ứng dụng di động. Với Adobe công bố cái chết của điện thoại di động flash, bây giờ bạn sẽ được tính trên HTML5 để làm điện thoại di động phát triển ứng dụng web của bạn.
Trình duyệt di động có đầy đủ để có thể duyệt HTML5. Để tạo ra các dự án đối với điện thoại di động là sẵn sàng và dễ dàng như việc thiết kế và xây dựng cho các màn hình nhỏ hơn màn hình cảm ứng của chúng. Do đó, sự phổ biến của thiết kế Responsive và có một số thẻ meta cũng cho phép bạn tối ưu hóa dành cho điện thoại di động:
Viewport: cho phép bạn xác định khung nhìn chiều rộng và các cài đặt zoom
Toàn màn hình trình duyệt: Giá trị cụ thể của IOS cho phép thiết bị của Apple để hiển thị trong chế độ toàn màn hình
Các biểu tượng màn hình của trang chủ: như favicons trên máy tính để bàn, các biểu tượng này được sử dụng để thêm yêu thích màn hình chủ của một IOS và thiết bị di động Android

1 - Nó là tương lai và sự thành công!

Có một lý do tại sao bạn nên bắt đầu sử dụng HTML5 ngày hôm nay là: Đó là sự phố biến hơn của tương lai; bắt đầu sử dụng nó ngay bây giờ để bạn không bị bỏ lại phía sau. HTML5 không phải là đi bất cứ nơi nào và khi ngày càng nhiều các yếu tố được áp dụng nhiều hơn và nhiều hơn nữa công ty sẽ bắt đầu phát triển trong HTML5. Ngôn ngữ này là về cơ bản chỉ là HTML, nó không phải là đáng sợ, nó không phải là bất cứ điều gì bạn thực sự cần phải tìm ra hoặc học lại. Nếu bạn đang phát triển XHTML chặt chẽ bây giờ, bạn đã phát triển được trong HTML5 dễ dàng, vậy tại sao không tận dụng lợi thế đầy đủ các năng lực hiện tại của nó.
Bạn thực sự không có bất cứ lời bào chữa không thông qua HTML5 và bắt đầu một sự khởi nguồn mới của bạn với nó. Quả thật, lý do duy nhất tôi thích sử dụng HTML5 chỉ là để viết mã sạch hơn, tất cả những lợi ích khác và các tính năng thú vị tôi đã thậm chí không thực sự nhảy vào, nhưng đó là điều tuyệt vời về nó, bạn chỉ có thể bắt đầu sử dụng nó ngay bây giờ và thậm chí thay đổi cách bạn thiết kế. Vì vậy, bắt đầu sử dụng nó ngay bây giờ, cho dù bạn chỉ là đơn giản hóa và làm cho việc đánh dấu của bạn nhiều ngữ nghĩa hoặc bạn sẽ xây dựng một số trò chơi mới trên điện thoại di động trên toàn thế giới.

Hỗ trợ trực tuyến
Fanpage Việt Song Phát