HTML5 Boilerplate

เริ่ม Project ใหม่ครั้งนี้ด้วย Front-end Template ที่แข็งแกร่งที่สุดในปฐพี HTML5 Boilerplate

การเริ่มต้น Project website หรือ web application ใหม่ๆก็เหมือนกับการตั้งค่าลงโปรแกรมใหม่ตั้งแต่เริ่ม คือสร้าง Folder ต่างๆขึ้นโครงสร้าง HTML  สร้างไฟล์ต่างๆที่เกี่ยวข้อง บางครั้งถ้าต้องทำแบบนั้นบ่อยๆก็เป็นเรื่องน่าเบื่อได้ไม่น้อย และบางทีเราอาจจะทำได้ไม่ดีพอแบบที่ควรจะเป็นอีกด้วย งั้นมาดูเครื่องมือดีๆอย่าง HTML5 Boilerplate กันดีกว่า

HTML5 Boilerplate

HTML5 Boilerplate

HTML5 Boilerplate คืออะไร? นี่คือ template สำหรับการเริ่มต้นทำ Project website หรือ web application ที่มีการเตรียมไฟล์ต่างๆให้เราอย่างครบครันและจะทำให้เราทำงานได้เร็วขึ้น แข็งแกร่ง ยืดหยุ่น และสมบูรณ์แบบมากขึ้น

HTML5 Boilerplate มีอะไรเตรียมไว้ให้เราบ้าง ขอไล่เป็นลำดับๆเลยแล้วกันนะครับ เพราะมันมีเยอะมาก

html5boilerplate basic structure

html5boilerplate basic structure

เริ่มตั้งแต่ folder แรกกันก่อนเลยคือ folder css เพื่อให้เราไว้ใช้เก็บไฟล์ css ที่พัฒนาขึ้นมา ซึ่งด้านในนั้นมีการเตรียมไฟล์ main.css ซึ่งเป็นไฟล์ที่เหมือนการ reset ค่าต่างๆไว้ให้เราในนั้นมีการตั้งค่าแบบเป็นกลางๆเอาไว้ให้เราสะดวกต่อการใช้งาน และยังมีการเตรียมค่ารองรับ media print  ไว้ให้ด้วย ลองดูตัวอย่าง Code ในไฟล์นี้กันหน่อย

html {
     color: #222;
     font-size: 1em;
     line-height: 1.4;
}
.hidden {
    display: none !important;
    visibility: hidden;
}
.invisible {
    visibility: hidden;
}
ส่วนอีกไฟล์เป็น normalize.css ซึ่งมีหน้าที่ Reset Css ใหม่อีกทีที่นิยมใช้กันมาก
อีก Folder ก็จะเป็น Folder เก็บ Doc หรือเอกสารต่างของ Project เอาไว้ซึ่งมีคู่มืออยู่สามารถเปิดอ่านได้
ถัดมาเป็น Folder img เอาไว้เก็บไฟล์รูปภาพที่จะใช้งานในเว็บไซต์ต่างๆ
Folder สุดท้ายเป็น js เก็บไฟล์ javascript ต่างๆของเอาไว้ด้านในประกอบไปด้วยไฟล์ main.js ให้เราไว้เขียน javascript แล้วไฟล์ plugins.js ซึ่งเตรียมเอาไว้ให้เราเขียน js ร่วมกับ plugins อื่นๆ และด้านในยงมี folder ชื่อ vendor อีกด้วยซึ่งภายในเก็บไฟล์ ่jquery และ modernizr เอาไว้ซึ่งเจ้าไฟล์ modernizr นี่มีความสามารถในการ Detect Browser ต่างและปรับปรุง Element บางอย่างให้รองรบ HTML5 มากยิ่งขึ้น
ถัดมาก็เป็นไฟล์ควบคุมการเข้าถึงอย่าง .htaccess ที่มีการเขียนอย่างเต็มประสิทธิภาพไว้ด้านใน
ถัดมาอีกก็มีไฟล์ 404.html page not found มาไว้ให้ด้วย
มี favicon.ico และไฟล์รูปภาพต่างๆเตรียมไว้ให้
มีไฟล์อย่าง humans.txt บอกรายละเอียดในการพัฒนาอีกด้วย ใครยังไม่รู้จักเจ้าไฟล์นี้ไปดูได้ที่ humanstxt.org
ซึ่งแน่นอนต้องมาคู่กันกับ robots.txt ดูรายละเอียดได้ที่ robotstxt.org
ส่วนไฟล์สุดท้ายสำคญสุดไม่พูดไม่ได้เพราะมันคือไฟล์ index.html นั้นเอง เราจะมาเริ่มต้นสร้างงานของเรากันตรงนี้นี่แหละ
ภายในไฟล์นี้มีโครงสร้างทุกอย่างที่เราต้องการอยู่ครบแล้ว มาถึงเราก็เริ่มงานกันได้เลย
ตัวอย่าง Code ในไฟล์
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.0.min.js"></script>
ส่วนของการใส่เนื้อหา
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
และในไฟล์นี้ยังมีการเรียก Google Analytic เอาไว้รอด้วยสะดวกจริงๆ
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
ใครที่สนใจสามารถเข้าไป Download มาใช้งานกันได้เลยนะครับ

Link :: HTML5 Boilerplate

 

 

rapido admin template

rapido admin template