menu

ابزار های توسعه دهنده ی مدرن وب

HTML5 Boilerplate

سه شنبه 16 شهریور 1395

به عنوان اولین قسمت از این مجموعه، میریم تا با اولین ابزار خودمون آشنا بشیم.

اسم این ابزار هست HTML5 Biolerplate

اما این چی هست؟

HTML5 Biolerplate یک ساختار و یک قالب (template) براساس HTML5 در اختیار ما میزاره که وب سایتمون را بر اساس اون بسازیم. خیلی خیلی شبیه به twitter bootstrap ولی با تفاوت هایی

مهم ترین تفاوت هم اینه که بوت استراپ بر اساس ایجاد یک ساختار ریسپانسیو ساخته شده، اما HTML5 Biolerplate وظیفه اش اینه که به ما یه ساختار اصولی برای سایتمون بر اساس HTML5 تحویل بده.

و برای این کار هم توی ساختار های خودش کتابخونه هایی را داره که در ادامه اونها را هم بررسی میکنیم

همینطور یه سری قالب هایی هم هستند که بر اساس قالب HTML5 Biolerplate نوشته شده اند که میتونین توی پروژه هاتون از اونا هم استفاده کنین.

بهتره اول از همه، یه سری به خود وب سایت اون ها بزنیم :

بهتره اولین پروژه ی خودمون را با HTML5 biolerplate front-end template شروع کنیم!

فرض کنید که یه وب سایت داریم با یه تگ title و 6 تا تگ h (از هر کدوم یه دونه!) و یه تگ P که یه class خاص داره و اون class توی css ها، رنگش به رنگ قرمز تغییر کرده!

بزارید این پروژه ی ساده را با استفاده از HTML5 Biolerplate راه اندازی کنیم

اول از همه، به وب سایت اونها که توی عکس بالا میبینیدش و روی دکمه ی دانلود که وسط صفحه هست کلیک میکنیم!

بعد از دانلود، فایل را از حالت فشرده (zip) در میاریم

همونطور که میبینید، ساختار سایت ما بر اساس HTML5 Biolerplate الان آماده است!

فقط کافیه کدهای خودمون را که میخوایم توی سایت نمایش داده بشه را وارد کنیم و برای این کار هم، ابتدا تک تک فایل هایی که درون قالب HTML5 Biolerplate هست را توضیح میدم

برای شروع، بهتره از فایل index.html شروع کنیم.

اون را توی یه ویرایشگر متن باز میکنیم

بیاین خط به خط بررسی کنیم ببینیم که توی این فایل چه کدهایی وجود داره

اول از همه میرسیم به کد html و کدهای درون head

اولین کدی که اینجا موجوده کد

<!doctype html>
<html class="no-js" lang="">

هست. این دو خط کد که معرف تگ html صفحه هستند، برای مرورگر تعیین میکنند که زبانی که این صفحه بر اساس اون نوشته شده و استاندارد های این صفحه، استاندارد های HTML5 هستند و این صفحه باید بر اساس HTML5 پردازش بشه

بعد از اون ما تگ head را داریم که اطلاعات این صفحه درون این تگ قرار داره

میریم به درون تگ head

اولین کد

<meta charset="utf-8">

هست که Character Encoding صفحه را تنظیم میکنه. قرار نیست وارد بحث کاراکتر ست ها بشیم. برای اطلاعات بیشتر میتونید به اینجا مراجعه کنید.

میرسیم به خط بعدی

<meta http-equiv="x-ua-compatible" content="ie=edge">

این خط هم مخصوص مایکروسافته و IE هاش (اصا این IE ها تموم دنیای وب را تحت تاثیر خودشون قرار داده ان!)

این خط، مرورگر های IE را مجبور میکنه که پردازش و render کردن صفحه را، بر اساس موتور مرورگر edge رندر (render) کنن و یه جورایی صفحه ی ما را از مصیبت هایی که هر کدوم از اینترنت اکسپلورر ها سر پردازش صفحه دارند حفظ میکنه. خیلی راحت به جناب مرورگر مایکروسافت میگه برو این صفحه را طبق آخرین موتور خودت render کن (دقیق ترش طبق Edge Render Motor)

میریم سراغ خط بعدی

خط بعدی تگ title هست که مقدار اون خالیه. اینجا ما میتونیم عنوان صفحه ی خودمون را تنظیم کنیم.

خط بعدی هم یه meta tag دیگه هست

<meta name="description" content="">

این meta tag از ما میخواد که توضیحات صفحه ی فعلیمون را اینجا وارد کنیم. توصیه میکنم که حتما یه توضیح کوچولو از صفحه تون را توی این meta tag وارد کنید. چون که برای مرورگر ها خیلی مهمه و موتور های جستجو، این تگ را توی نتایج جستجوشون نمایش میدن. همونطور که اینجا میبینین

میریم سراغ خط بعدی index.html

خط بعدی دوباره یه meta ی دیگه اس

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

این متا تگ، برای ما قابلیت های ریسپانسیو بودن صفحه را میاره و باعث میشه که وب سایت ما توی دیوایس های مختلف، واکنش پذیر باشه و توی دیوایس های مختلف، توی width اون اسکرول نخوره

خب انگار meta tag های ما تموم شد!

میریم سراغ ادامه اش

<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->

این خط هم برای تنظیم آیکون صفحه ی ما هست. البته این خط تنها آیکون صفحه را توی دستگاه های apple تعیین میکنه. توی نسخه های قدیمی تر HTML5 Biolerplate یه خط اضافه تر هم بود که آیکون صفحه را برای مرورگر های دیگه تعیین میکرد که انگار توی نسخه های جدید از اون خبری نیس. پس اگه خواستید میتونید خودتون یه خط دیگه اضافه کنین تا آیکون را برای بقیه ی مرورگرا هم تعیین کنین

یه نکته ی دیگه هم که باید اینجا اضافه کنم اون هم فایل های favicon ما هست

توی دایرکتوری HTML5 Biolerplate دو تا فایل هست

یکی favicon.ico

یکی هم apple-touch-icon.png

اگه میخواید که آیکون خودتون را قرار بدید، کافیه این دو تا فایل را تغییر بدید یا فایل های خودتون را به جا این دو تا فایل بزارید

میریم سراغ خط بعد

<link rel="stylesheet" href="css/normalize.css">

این خط یکی از کتابخونه های معروف سی اس اس به اسم normalize را توی صفحه ی ما بارگزاری میکنه

بزارید یه سری به وب سایت این کتابخونه بزنیم

کاری که این سی اس اس انجام میده خیلی ساده اس. این سی اس اس، باعث میشه که تمامی المنت های ما توی صفحه، توی تمام مرورگر ها شبیه به هم باشن. 

هر مرورگر، استایل های پیشفرض خودش را داره و وقتی یه وب سایت را لود میکنه، یه سری سی اس اس که خود مرورگر داره را هم اعمال میکنه

کار normalize اینه که اون سی اس اس ها را با دادن سی اس اس جدید بی تاثیر کنه تا صفحه ی ما توی تمام مرورگر ها یکسان دیده بشه

البته Reset stylesheet های دیگه ای هم هستن مثل HTML5 Doctor و...

ولی خود من normalize را ترجیح میدم

میریم سراغ خط بعد

<link rel="stylesheet" href="css/main.css">

باز هم یه سی اس اس دیگه! اما این یکی مخصوص طراح سایته!

توی این فایل css، یه قسمتی هست که شما میتونین کدهای css خودتون را اونجا اعمال کنین

دقیقا اینجا:

و در نهایت میرسیم به آخرین کد موجود در تگ head

<script src="js/vendor/modernizr-2.8.3.min.js"></script>

یه کتابخونه ی معروف جاوا اسکریپت

اسم این کتابخونه modernizr هست. نمیخوام زیاد وارد جزئیاتش بشم چون که این کتابخونه جزئیات زیاد داره! ولی یه خلاصه ای از کاری که میکنه میدم!

این کتابخونه، کاری که انجام میده شناسایی قابلیت هایی هست که مرورگر پشتیبانی میکنه یا نمیکنه. از اونجایی که این صفحه ی ما بر اساس html5 و css3 نوشته شده، خیلی از قابلیت های اون ممکنه توی مرورگر های قدیمی پشتیبانی نشه. اینجاس که modernizr وارد عمل میشه

خب. انگار head ما تموم شد. میریم سراغ body

اولین کدی که داریم اینه:

<!--[if lt IE 8]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

این کد مخصوص اینترنت اکسپلورر 8 هست که اگه کسی با چنین مرورگر قدیمی اومد توی سایت، بهش میگه که بره و مرورگرش را به روز کنه

کد بعدی، یه تگ P هست

<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>

اینجا جایی هست که ما محتوی خودمون را وارد میکنیم. کافیه تگ p را پاک کنیم و به جاش div ها، h ها و بقیه ی المنت هایی که میخوایم توی صفحه نمایش داده بشه را جایگزین کنیم

میریم سراغ ادامه اش:

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>

این کد هم میاد و کتابخونه ی معروف جی کوئری را برای ما وارد میکنه. کتابخونه ای که باهاش خیلی کارها میشه کرد و خیلی هم محبوب هس.( حتی وبلاگ من هم باهاش نوشته شده!)

اگه توی سایت خودتون از جی موئری استفاده نمیکنین، میتونین اون را پاک کنین

کد بعدی باز یه فایل جاوا اسکریپت را وارد میکنه

<script src="js/plugins.js"></script>

بزارید یه نگاهی به این فایل بندازیم ببینیم چی توش هست

همونطور که میبینید این فایل از یه تابع ساده تشکیل شده که از نمایش ارور ها و خروجی های روی کنسول مرورگر جلوگیری میکنه

همینطور ته این فایل یه قسمتی هس که شما میتونید اگه از پلاگین خاصی از جی کوئری استفاده میخواید بکنید، کد های مربوط به اون پلاگین را اینجا وارد کنید

برگردیم سراغ فایل index.html خودمون

خط بعدی دوباره یه فایل جاوااسکریپت دیگه را وارد میکنه

<script src="js/main.js"></script>

ولی این فایل خالیه!

اینجا همون جایی هست که شما میتونید کدهای JS خودتون را توش وارد کنید

و میرسیم به آخرین کد درون body

<!-- 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='https://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>

این کد هم، کد معروف گوگل آنالیتیکز هست. شما میتونید توی خود گوگل آنالیتیکز روی generation code کلیک کنید و کد را جایگزاری کنید، یا خیلی ساده قسمت UA-XXXXX-X را توی کد بالا تغییر بدید

کد های داخل index.html همین ها بود و تموم شد

ولی بد نیس برگردیم و بقیه ی فایل ها و ساختار HTML5 Biolerplate را بررسی کنیم

اولین پوشه ای که توی تصویر بالا میبینین css هس، جایی که همون فایل های css مربوط به normalizer و main قرار داره

پوشه ی بعدی doc هست که توش یه سری داکیومنتیشن درباره ی HTML5 Biolerplate نوشته شده. به نظر من بعد از اینکه صفحه تون را ساختید پاکش کنید

پوشه ی بعدی هم img هس که میتونین توش تصاویرتون را ذخیره کنین (توجه داشته باشید که مهم ترین کار HTML5 Biolerplate اینه که به شما یه ساختار و چهارچوب بده تا کارتون را تمیز تر و سریع تر انجام بدید)

پوشه ی بعدی هم js هست که توضیح دادمش

میریم سراغ فایل ها

اولین فایل .editorconfig هست که توش نوع کد زدن ما را مشخص میکنه. این کار مزیتش اینه که کسایی که بعدا میان تا کدهای مارا بخونن، راحت تر میتونن اون را بخونن و با شیوه ی نوشتاری ما آشنا میشن و همینطور IDE ها هم بهتر کدهای مارا نمایش میدن

اطلاعات بیشتر در اینجا!

دو تا فایل بعدی .gitattributes و .gitinore هست. اگه از git control میخواید استفاده کنین بزارید همینطوری بمونن. اگه نمیخواین استفاده کنید میتونید پاکشون کنید

فایل بعدی هم .htaccess معروف هست! این فایل که مخصوص apache هست یه سری خواص و قواعد داره که به وب سرور میگه این صفحه را چجوری پردازش کنه. مثلا میتونه تعیین کنه که صفحات ما را Gzip کنه و نمایش بده، Cache کنه، و برای Cache ها life time تعیین کنه و خیلی کارهای دیگه!

اگه وب سرور شما Apache نیس میتونین به اینجا  و اینجا سری بزنین که تنظیمات مخصوص بقیه ی وب سرور ها را داره

فایل بعدی 404.html هست که یه صفحه ی 404 خوشگل در اختیار ما میزاره که میتونین توی وب اپلیکیشن خودتون ازش استفاده کنید

دو تا فایل مربوط به favicon را هم قبلا توضیح دادم

فایل های بعدی browserconfig.xml و crossdomain.xml هست

این دو تا فایل معمولا وقتی کاربرد دارند که شما از یه External Plugin مثل Flash استفاده کنید. ولی در غیر این صورت کارآیی خاصی ندارند و شما میتونید اونها را حذف کنید

فایل بعدی humans.txt هست(از این فایل خیلی خوشم میاد!)

همونطور که اینجا میبینید این یه فایل ساده ی txt هست که توی اون میتونیم تمام تیم ها و افرادی را که توی این پروژه دخیل بوده اند را معرفی کنیم. همینطور میتونیم توش به معرفی تکنولوژی هایی که توی پروژه ی ما به کار رفته بپردازیم و یا از افرادی که از ما حمایت کرده اند و به ما کمک کرده اند تشکر کنیم.

فایل بعدی هم LICENSE.txt هست که مجوز ها و لایسنس های این پروژه را نشون میده

و در نهایت هم آخرین فایل، فایل robot.txt هست که تعیین میکنه که ربات هایی که به صفحه ی ما میان (مثل ربات گوگل) چجوری رفتار کنند و به چه صفحه هایی دسترسی داشته باشند و ....

فک کنم این قسمت هم تموم شد

امیدوارم توی پروژه هاتون از HTML5 Boilerplate استفاده کنید و لذت ببرید