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.
Đang xem: Boilerplate là gì
Các thành phần có trong HTML5 Boilerplate
HTMLCSSJavaScript.htaccess (Apache web server configuration)Crossdomain.xmlMiscellaneous
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.
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)
#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.
– Với thiết bị như mobile thì có thêm tag sau đây
#3. Phần chính yếu là đoạn code về js và css của template nàyFile 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ị-)
– 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.
Xem thêm: Giấy Chứng Nhận Certificate Of Free Sale Là Gì ? Cơ Quan Nào Cấp
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: … Main:
Footer: … Trong phần Footer sẽ chèn các đoạn jQuery bên dưới :
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 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 độ.
Xem thêm: Gift Code Lmht Mới Nhất 2021, Cách Nhập Code Lmht Mới Nhất 2021
.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)
