HTML5 Boilerplate: Template được sử dụng phổ biến nhất cho dân Web Front-End.
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.
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.
<!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]-->
– 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">
<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.
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 :
[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.
Some of the links shared in this post are affiliate links. If you click on the link & make any purchase, we will receive an affiliate commission at no extra cost of you.
Xin chào cả nhà, Thiện đây. Do là nay, có nhiều bạn hỏi về việc…
HƯỚNG DẪN UPLOAD WEBSITE LÊN SOMEE.COM 1. Giới thiệu Somee.com là một trang cung cấp…
TerraLeads là trung tâm CPA đầu tiên tự sản xuất các sản phẩm chất lượng…
Trong những nội dung trước, Dinos Việt Nam đã giúp bạn “điểm mặt chỉ tên”…
Thẻ thành viên ACCESSTRADE, tấm thẻ tiên phong mở ra vũ trụ siêu quyền lợi…
Jvzoo là gì và làm cách nào để những người không có nhiều kinh nghiệm…
View Comments
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.
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!
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
Wow, amazing blog layout! How long have you been blogging for?
you make blogging look easy. The overall look of your web site is great, as well as the content!
ModaBet, geniş bir slot oyunları koleksiyonuyla casino tutkunlarını cezbetmektedir.Çeşitlilik gösteren temalarda ve kazanç potansiyeli yüksek slot makineleriyle dolu bir dünyaya sahiptir.
BahisSenin, geniş bir slot oyunları koleksiyonuyla casino tutkunlarını karşılayan öncü bir platformdur. Eğlenceli temalardan ilham alan, yüksek kaliteli grafiklere ve çarpıcı ses efektlerine sahip olan bu slot oyunları, kullanıcılarına benzersiz bir deneyim sunuyor.
Elevate your brand's visibility with MediaMind's tailored solutions.
Ciprobet, geniş bir spor bahisleri yelpazesi, canlı casino oyunları ve heyecan verici fırsatlar sunan öncü bir online bahis platformudur. Kullanıcılarına yüksek oranlarla spor bahisleri, canlı bahisler, çeşitli casino oyunları ve canlı casino deneyimi sunar.
Güvenilir ödeme yöntemleri ve kullanıcı memnuniyetine odaklı müşteri hizmetleriyle MaksatBahis, heyecan verici bir casino deneyimi vaat eder. Klasik meyve makinelerinden modern temalara, popüler slot oyunlarından jackpot seçeneklerine kadar çeşitli seçenekler sunar.
Falcon Flooring Reno: Where quality meets affordability.