20 قطعه اساسی برای HTML5 Boilerplate
منابع و ابزار


من اخیرا، همانطور که بسیاری از طراحان وب و توسعه دهندگان آن را داشته باشند، از یک منبع فوق العاده که توسط توسعه دهنده وب Paul Irish و Divya Manian ساخته شده است، آگاه شدند. HTML5 Boilerplate ، همانطور که آنها آن را نامگذاری کرده است، یک نقطه شروع قدرتمند برای هر وب سایت یا برنامه کاربردی وب است .
همانطور که پل ایرلندی آن را توصیف می کند: "اساسا یک نمونه خوب از HTML و CSS است و یک ساختار پوشه ای است که کار می کند، اما پخته شده به سال ها از بهترین شیوه ها از متخصصان توسعه حرفه ای است."
HTML

ما با چک کردن برخی از قطعه های HTML استفاده شده در منبع شروع خواهیم کرد. همه اینها بخش هایی از کد هستند که ممکن است لزوما تنها اچ تی ام باشند، اما اگر در مورد آنها استفاده شود، قطعا در فایل های HTML شما قرار می گیرد.

فاویکون امروزه بسیار طبیعی است. بیت جالب در اینجا سیب لمسی آیکون است که اگر شما یک نشانه را به صفحه اصلی خود را بر روی یک دستگاه لمسی سیب مانند iPad یا آی فون استفاده می شود استفاده می شود. به اندازه کافی جالب است، اندروید همچنین از استفاده از آن پشتیبانی می کند.
تا اندازه ای که می توانم بگویم، اندازه سیب-لمسی آیکن 60 پیکسل با 60 پیکسل است. همانطور که نظر می گوید، اگر آیکون های شما در ریشه دامنه شما باشند، این لینک ها مورد نیاز نیست.

هک نظریه شرطی خالی استفاده می شود که اساسا عملکرد سایت شما را افزایش می دهد. برای مثال، اگر نظر شرطی در سایت شما مورد استفاده قرار می گیرد، برای مثال برای سبک stylesheet ie6، بارگیری بیشتر را تا زمانی که فایل های CSS به طور کامل دانلود می شوند، در نتیجه افزایش زمان بارگذاری.

برای حل این مسئله، نظریه شرطی خالی مانند زیر، قبل از اینکه هر سند در سند بارگذاری شود، مورد استفاده قرار می گیرد و مشکل حل خواهد شد! برای خواندن بیشتر، این مقاله را ببینید.

اینترنت اکسپلورر بسیاری از موتورهای رندر را برای استفاده آماده می کند. آنچه این خط کد اساسا انجام می دهد، IE را مجبور می کند تا از آخرین موتور رندر تا به امروز استفاده کند تا صفحات شما به همان اندازه امکان پذیر باشد. سپس در مورد Frame Frame صحبت می کند. Chrome Frame پلاگین برای IE6، 7 و 8 است که تمام رندر و قدرت جی اس ام گوگل کروم را برای IE به ارمغان می آورد.

اگر کاربر آن را نصب کرده است، ما سایت خود را با استفاده از آن ارائه می دهیم. برای کسب اطلاعات بیشتر در مورد Chrome Frame و نحوه استفاده از آنها حتی بدون آن برای نصب آن، هدف اینجا را بررسی کنید.

این قطعه اصلی اصلی پاول ایرلندی است و به شما اجازه می دهد مرورگرهای اینترنت اکسپلورر را به طور خاص بدون نیاز به اضافه کردن یک درخواست اضافی HTTP با یک شیوه جداگانه دیگر به شما بسپارید.
اساسا، بسته به مرورگر IE که کاربر استفاده می کند، یک کلاس به تگ بدن اضافه می شود. اگر کاربر از اینترنت اکسپلورر استفاده نکند، یک برچسب بدن بدون کلاس استفاده می شود. این به شما اجازه می دهد تا مرورگرهای خاص خود را در CSS خود بدون نیاز به استفاده از هک CSS و یا شیوه های بیشتر استفاده کنید. برای خواندن بیشتر، مقاله اصلی را در این قسمت بررسی کنید.

اکثر سایت های امروز از کتابخانه جی کوئری جاوا اسکریپت استفاده می کنند. اکثریت قریب به اتفاق از نسخه میزبان گوگل از کتابخانه نیز برای سرعت بارگذاری سریعتر و ذخیره بهتر سایت استفاده می کنند. با این حال، اگر یک مشکل وجود داشته باشد و جی کوئری از Google بارگیری نمی شود؟ خوب اینجا پشتیبان شما است.

آنچه که اساسا انجام می دهد این است که آیا جی کوئری از Google بارگیری شده است. اگر نه، پس از آن ما آن را به صورت محلی از نسخه ی ما از jQuery بارگذاری می کنیم.

گوگل آنالیز یک ابزار بسیار محبوب برای ردیابی رفتار کاربر و بازدید شما از وبسایت شما است.

این به سادگی یک نسخه بهینه شده از قطعه ردیابی ناهمزمان Google است. برای یادگیری آنچه که بهینه شده است و دلیل آن سریعتر از نسخه گوگل است، این مقاله را بخوانید.
CSS

حرکت به CSS، این است که در آن اکثریت قریب به اتفاق از قطعه های عالی مراقبت می شود یافت می شود. از برخی از خطوط یکنواخت نگذارید؛ آنها به همان اندازه مفید و عالی هستند که برخی از قطعه های بزرگتر یافت می شوند.

بسیاری از شما قبل از این از تنظیم مجدد CSS Eric Meyer استفاده کرده اند. این در بسیاری از چارچوب ها و غیره، مانند 960 ق.م، گنجانده شده است. این یک نسخه اصلاح شده از آن بازنشانی است، که آن را با پشتیبانی کامل از HTML5 در حال حاضر به ارمغان می آورد. این تمام تگ های ساختاری جدید را به عنوان سطح بلوک تنظیم می کند و تمام ظاهر پیش فرض خود را به صورت پیش فرض بازنشانی می کند.

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

اساسا اندازه فونت خود را از طریق درصد که می توانید در اینجا پیدا کنید تنظیم کنید.

این ضد عرق کردن برای مرورگرهای وبکیت است، متأسفانه تنها در Mac OSX. این اساسا متن شما را بهتر می سازد و آن را قابل خواندن تر می کند، بدون این که همه چیزهایی که در گذشته دیده ایم را نادیده بگیریم. برای مطالعه بیشتر مقاله Tim Van Damme را بررسی کنید.

بعضی اوقات، صفحات می توانند کوتاهتر از مرور port view باشند، و هنگامی که یک صفحه را در همان سایت با محتویات طولانی تر بارگذاری می کنید و از یک اسکرول استفاده می کنید، محتوا می تواند به سمت سمت راست حرکت کند. با اعمال یک نوار اسکرول بدون توجه به ارتفاع محتوای ما، ما این مسئله کوچک، اما آزار دهنده را متوقف می کنیم.

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

تراز کردن برچسب ها با ورودی های مربوطه می تواند یک وظیفه وحشتناک برای دستیابی به مرورگرهای قدیمی باشد. این قطعه برای ما سازگار است در مرورگرها!

به دلایلی، اکثر مرورگرها اشاره گر اشاره گر را به بعضی ورودی های قابل کلیک قابل استفاده نمی کنند تا اکنون کاربر بتواند این مورد را کلیک کند، بنابراین ما این را با انجام این کار خودمان حل می کنیم.
این قطعه اساسا به بهترین وجه از هر دو جهان به ما می دهد، که بهترین استفاده را در هنگام اتصال به خطوط برای هر دو صفحه نمایش داده شده از طریق لینک ها و کاربران ماوس ارائه می دهد.
Ie7 به طور پیش فرض از یک الگوریتم تغییر اندازه تصویر استفاده می کند که بدین معنی است که تصاویر کوچک شده می توانند دور از عالی باشند. برای حل این، ما به سادگی یک الگوریتم تغییر اندازه بسیار بهتر که در Ie7 موجود است، تولید می کند که نتایج مشابه آنچه که بیشتر از نرمافزار ویرایش تصویر می خواهید انتظار می رود.
هر یک از سایت های مناسب و معقول باید آماده چاپ باشند، هرچند که ما در یک زمان تکنولوژیکی زندگی می کنیم، مردم هنوز هم دوست دارند یک نسخه کپی از برخی اطلاعات داشته باشند. این قطعه در ابتدا از یک بیانیه رسانه ای CSS استفاده می کند، به شما این امکان را می دهد که این را در شیوه اصلی خود قرار دهید و نیازی به پیوند دیگر در سر سند خود نیست.
این مزایا زمان بارگذاری را به همراه دارد، حتی زمانی که صفحه نصب می شود، مرورگر همیشه این فایل CSS اضافی را ایجاد می کند و یک درخواست اضافی HTTP ایجاد می کند. قطعه بعد شامل برخی از سبک های چاپ مفید مانند چاپ آدرس لینک ما و غیره است.
این فقط دو پرس و جو رسانه ای CSS است که شما می توانید برای توسعه وب سایت خود استفاده کنید. با داشتن تعداد زیادی تلفن هوشمند و قرص هایی که می توانند صفحه های خود را از چشم انداز به عمودی هدایت کنند، ممکن است بخواهید سبک های مختلف را برای هر یک از آنها وارد کنید. این چگونگی دستیابی به این هدف است.
.htaccess

یکی از نکاتی که این قالب شروع می کند این است که دیگر قالب های نقطه شروع معمولا انجام نمی شود، فایل های سرور است. این بخش های بسیار جذاب .htaccess را بررسی کنید که به راحتی می تواند سایت شما را بهبود بخشد.

این همان نسخه HTML که در بالا ذکر شد، مجبور کردن آخرین موتور رندر در اینترنت اکسپلورر و Chrome Frame در صورت وجود. مزیت شامل این موارد در فایل .htaccess شما این است که صرفه جویی در شما را مجبور به اعلام این در سر هر کدام از سند HTML شما تولید کنید.
فشرده سازی Gzip به ما امکان می دهد که حجم فایل ها را به شدت کاهش دهیم. این snippet .htaccess gzipping برای ما است.

هنگامی که ما فایل های خود را در دستگاه کاربر پنهان می کنیم، ممکن است بخواهیم مشخص کنیم که چه مدت آنها در آنجا باقی می ماند، بسته به اینکه اغلب ما خودمان را تغییر می دهیم. این قطعه زمان های اولیه برای انواع فایل های معمولی را فراهم می کند، که بعضی از آنها ممکن است بخواهید برای سایت خود تغییر دهید.
افکار بیشتر

من به شدت پیشنهاد می کنم که وب سایت خود را چک کنید. این یک منبع فوق العاده است که تمام این نکات و موارد دیگر را در اختیار شما قرار می دهد. من مطمئن هستم که مفید خواهد بود.
src = "0.jpg