HTML5boilerplate là gì ? Tại sao lại dùng ?

HTML5 Boilerplate: Template được sử dụng phổ biến nhất cho dân Web Front-End.

HTML5boilerplate là gì ?

HTML5 Boilerplate là một front-end template chuyên nghiệp, dùng để build những ứng dụng web 1 cách nhanh chóng, mạnh mẽ và có độ tương thích cao với các trình duyệt cũ và mới. Nhất là tính usability cực tốt.

HTML5 Boilerplate-la-gi

 

Các thành phần có trong HTML5 Boilerplate

  • HTML
  • CSS
  • JavaScript
  • .htaccess (Apache web server configuration)
  • Crossdomain.xml
  • Miscellaneous

 

Tại sao phải dùng HTML5 Boilerplate?

Template HTML5 Boilerplate có độ tương thích cao giữa các trình duyệt với nhau. Ví dụ chạy được trên IE6, IE7, IE8, IE9, Firefox 3.x, Firefox 4.x, Firefox 5.x, Google Chrome 9, Google Chrome 10, …. Nó không làm biếng dạng các TAG khi trình duyệt đó không hổ trợ HTML5 từ đó, mọi thứ chúng ta làm trên các trình duyệt được đồng bộ hơn và ít tốn thời gian sữa lỗi sau này.

tai-sao-dung-html5-bolerplate

 

Ngoài ra, dùng Template để có thể xây dựng khung cho 1 dự án web trước khi bắt đầu.

HTML5 Boilerplate có những thành phần nào, cách nhận biết?

#1. Định hình cho toàn bộ document (phân này dùng để phân biệt các trình duyệt IE với các version khác nhau và với trình duyệt khác IE)

<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

 

#2. Khai báo các tag meta

– Với IE version 8 trở về sau thì có dùng tag X-UA-Compatible để yêu cầu web browser trả về key ETag (key mã hóa content của website) trong phần header để browser check vào những thông số này xem phần content có thay đổi hay không, nếu có thay đổi thì load lại toàn bộ content, nếu không có thay đổi thì dừng và lấy từ cache của trình duyệt ra.

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

– Với thiết bị như mobile thì có thêm tag sau đây

<meta name="viewport" content="width=device-width, initial-scale=1.0">

#3. Phần chính yếu là đoạn code về js và css của template này

<link rel="stylesheet" href="css/style.css?v=2">

File CSS này nó có các thành phần như CSS Reset, Media queries.Trong mỗi trình duyệt có các thuộc tính css cho từng tag HTML là khác nhau.

Ví dụ : tag TD của IE thì default text-align là center, còn Firefox là left.

Chính vì sự khác nhau này mà bạn cần làm cho nó giống nhau về giá trị các thuộc tính này cho mọi trình duyệt và đó là điều mà CSS Reset cần làm.

Khi view website của bạn bằng nhiều thiết bị khác nhau như trình duyệt, và khi xem thấy thích muốn in ra 1 bản giấy và các media này khác nhau nên cần phải có media queries để định riêng cho 1 số thiết bị khác nhau đó (Ví dụ có media = screen, media = print – máy in -, media all – mọi loại thiết bị-)

<script src="js/libs/modernizr.min.js"></script>

– File JS này modernizr.min.js có nhiệm vụ gì? và tại sao nó lại nằm ở trên phần tag head của document và lại nằm trên các JS của khác của document?

Đáp : modernizr.min.js dùng để chạy trước tiên khi event load của document xảy ra thì nó sẽ làm nhiệm vụ wrapper các tag của HTML5 nếu như trình duyệt đó chưa hỗ trợ HTML5 và giao diện của website không bị bể khi gặp các tag HTML5 này (vẫn render 1 cách bình thường như hầu hết các tag khác của HTML)

– Vì sao include file JS này trước tiên và các file JS khác của bạn nằm dưới footer hoặc dưới cái file này? Đáp : Lưu ý là đoạn này phải thực hiện trước hết thì code JS của bạn bên dưới mới có thể chạy được tốt.

Ví dụ : các event của các tag HTML5 nhưng trên IE6, IE7, IE8 không hổ trợ thì nó được hide đi và chỉ thể hiện nội dung text chứa bên trong tag đó mà thôi. Khi modernizr.min.js được chạy trước thì nó làm cho các tag HTML5 này có các chức năng gần như 1 trình duyệt hổ trợ HTML5.

#4. Nội dung trong tag BODY của document

Gồm 3 phần chính của 1 HTML Template.

Header: <header> … </header>
Main: <div id=”main” role=”main”> ….</div>

<div id=”content”>
<nav id=”breadcrumbs” role=”navigation”>.... </nav>
<div id=”main” role=”main”>
…
<div role="contentinfo”> … </div>
...
<div role=”article”> ….</div>
</div>
</div>

Footer: <footer> … </footer>
Trong phần Footer sẽ chèn các đoạn jQuery bên dưới :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>

<!-- scripts concatenated and minified via ant build script-->
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<!-- end scripts-->

<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script>DD_belatedPNG.fix("img, .png_bg");</script>
<![endif]-->

Phần nội dung JS này bao gồm

– Load thư viện jquery ⇐ trước hết load từ //ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js nếu như không kết nối được với google thì load tiếp ở local <script>window.jQuery || document.write(“<script src=’js/libs/jquery-1.5.1.min.js’>\x3C/script>”)</script> của website bạn đang build. Vì sao phải load từ google? Để tăng tốc độ load cho website (giảm request về ứng dụng web này) của bạn

Vì sao load jquery từ google nhưng không có http: phía trước dấu // ( có cũng được mà không cũng được )

Bằng thực nghiệm load file js này từ localhost thu được kết quả:

Load: //ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js chỉ mất 31ms

Trong khi load: http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js tốn số ms >= so với không có http:

Theo suy đoán của mình thì

– Load plugins.js ⇐ dùng khi trình duyệt của bạn không có firebug nhưng vẫn gọi các method của firebug như log, debug, warning, … vẫn không bị báo lỗi

– Load script.js ⇐ load nội dung JS của bạn cần viết thêm cho ứng dụng

– Load dd_belatedpng.js nếu trình duyệt của bạn là IE6 (không hỗ trợ transparent cho hình PNG).
SEO trong HTML5 :

– Nội dung HTML này có 1 attribute khá quan trọng đó là role=”…”. Vậy attribute này dùng để làm gì?

Đáp : Nó dùng để cho việc SEO với content của bạn (tốt hơn cho việc tìm kiếm từ Google cũng như các thiết bị di động nhận biết). Bạn có thể tìm hiểu thêm về attribute role của HTML5 tại đây .

Với sự hiểu biết của mình thì role=”main”, role=”contentinfo”, role=”article” sẽ giúp Google SEO định vị để phân tích nội dung chính của website trong tag này trước và  định vị role=”navigation” để crawl các link của website tiếp theo.

Bên cạnh các thành phần này còn có thêm các phần hổ trợ khác để website của bạn được tối ưu tốc độ.

.htaccess need enable Apache module (hight performance).

• mod_setenvif.c (setenvif_module)
• mod_headers.c (headers_module)
• mod_deflate.c (deflate_module)
• mod_filter.c (filter_module)
• mod_expires.c (expires_module)
• mod_rewrite.c (rewrite_module)

Nếu bạn muốn biết rõ hơn về .htAccess, bạn nên tham khảo kiến thức tại đây.

Nếu bạn muốn học thêm về HTML5 & CSS3, bạn nên tham khảo bài viết này :

Bắt đầu với HTML5 & CSS3

[icon type=”glyphicon glyphicon-hand-right”] CodeSchool – Nơi Tốt Nhất Để Học Các Ngôn Ngữ Lập Trình

Chúc bạn thành công!

AnhThien8’s Blog.

 

4 thoughts on “HTML5boilerplate là gì ? Tại sao lại dùng ?”

  1. With havin so much content and articles do you ever run into any problems
    of plagorism or copyright infringement? My website has a lot
    of completely unique content I’ve either authored myself or outsourced but it looks
    like a lot of it is popping it up all over the web without my permission. Do you know any ways to
    help protect against content from being stolen? I’d certainly appreciate it.

  2. Wonderful blog! Do you have any recommendations for aspiring
    writers? I’m hoping to start my own blog soon but I’m a little lost on everything.

    Would you advise starting with a free platform like WordPress
    or go for a paid option? There are so many options out there that I’m completely overwhelmed ..
    Any suggestions? Kudos!

  3. I have noticed that your blog needs some fresh content.
    Writing manually takes a lot of time, but there is tool for this boring task, search for; Wrastain’s
    tools for content

Bạn có thắc mắc ?

Get it Now!

NHẬN NGAY EBOOK KIẾM TIỀN TỪ AFFILIATE

%d bloggers like this: