HTML5 Boilerplate là 1 template dành cho DEV về HTML5 nhưng vẫn chạy được trên các trình duyệt chưa hổ trợ các TAG của HTML5. 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
HTML5 Boilerplate 1. HTML5 Boilerplate là gì? Tại sao phải dùng HTML5 Boilerplate? - HTML5 Boilerplate là 1 template dành cho DEV về HTML5 nhưng vẫn chạy được trên các trình duyệt chưa hổ trợ các TAG của HTML5 - 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 Link download: http://github.com/paulirish/html5-boilerplate/zipball/v1.0stripped 2. HTML5 Boilerplate gồm có những thành phần nào? - HTML5 Boilerplate các thành phần chính như sau: 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. Phần 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"> Peter: Cai nay la de bao cho IE biet la phai dung cai rendering engine moi nhat http://html5boilerplate.com/docs/#The-markup★make-sure-the-latest-version- of-ie-is-used - 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 a. <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. Mr Henry Nguyen - 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ị-) b. <script - File JS này modernizr-1.7.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? - modernizr-1.7.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? 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-1.7.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. Phần nội dung trong tag BODY của document gồm có 3 phần chính a. Header: <header> … </header> b. Main: <div id=”main” role=”main”> ….</div> Phần này bạn có thể tách nó ra thành từng phần nhỏ nữa tùy theo mục đích sử dụng <div id=”content”> <nav id=”breadcrumbs” role=”navigation”> </nav> <div id=”main” role=”main”> … <div role="contentinfo”> … </div> <div role=”article”> ….</div> Mr Henry Nguyen </div> </div> c. Footer: <footer> … </footer> d. Load javascript footer <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] > <script> var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]]; // Change UA-XXXXX-X to be your site's ID (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t) [0];g.async=1; g.src=("https:"==location.protocol?"//ssl":"//www")+".google- analytics.com/ga.js"; s.parentNode.insertBefore(g,s)}(document,"script")); </script> 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 // Mr Henry Nguyen Bằng thực nghiệm load cái file js này bằng 1 cái web 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) - Load google analytic cuối cùng ⇐ dùng cho google raw content của bạn về cache của Google để khi người dùng tìm kiếm thì google trả kết quả về 1 cách chính xác hơn Notes: Nội dung này có 1 attribute khá quan trọng đó là role=” ”. Vậy attribute này dùng để làm gì? - Nó dùng để cho Google SEO làm việc hiệu quả nhất với content của bạn cần Google SEO raw (tốt hơn cho việc tìm kiếm từ Google). Bạn có thể tìm hiểu thêm về attribute role của HTML5 tại đây http://www.accessibleculture.org/research/html5-aria/ (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” để raw 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 hight performent .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) Mr Henry Nguyen . hiểu thêm về attribute role của HTML5 tại đây http://www.accessibleculture.org/research /html5- aria/ (Với sự hiểu biết của mình thì role= ”main”, role= ”contentinfo”, role= ”article” sẽ giúp Google. HTML5 Boilerplate 1. HTML5 Boilerplate là gì? Tại sao phải dùng HTML5 Boilerplate? - HTML5 Boilerplate là 1 template dành cho DEV về HTML5 nhưng vẫn chạy được trên. trình duyệt đó không hổ trợ HTML5 Link download: http://github.com/paulirish /html5- boilerplate/zipball/v1.0stripped 2. HTML5 Boilerplate gồm có những thành phần nào? - HTML5 Boilerplate các thành