بهترین شیوه ها برای توسعه دهندگان وب جلو پایان

توضیح دهید که کدام غواصی را می بسته ای

بیشتر اوقات که من در حال مشاهده یک منبع وب سایت ، من می بینم ، در پایین صفحه ، یک لیست تقریبا بی پایان از برچسب های بسته شدن. در واقع بسیاری از مبتدیان فکر می کنند که فقط باید به جای جداول از غواصان برای تولید کد کیفیت استفاده کنند. Divs پاک کننده نسبت به جداول هستند، اما بدون سازمان کد مناسب، می تواند به عنوان (یا حتی گاهی اوقات بیشتر) کثیف به عنوان کد جدول مبتنی بر.

استفاده از دندانه دار شدن شروع خوبی است. اما نوک است که قطعا می تواند شما را صرفه جویی در زمان زیادی این است که نظر هر برچسب غواصی شما در حال بسته شدن، همانطور که در مثال زیر نشان داده شده است:

<div id="header">
  <div id="sub">...  </div><!-- #sub.first.left -->
</div><!-- #header -->

استفاده از تنظیم مجدد CSS

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

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, مخفف, آدرس, بزرگ, استناد, کد,
del, dfn, em, font, img, ins, kbd, q, s, s, samp,
کوچيک .
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	حاشیه: 0;
	padding: 0;
	مرز: 0;
	طرح کلی: 0;
	فونت اندازه: 100%;
	عمودی تراز: پایه;
	سابقه و هدف: شفاف;
}
body {
	خط ارتفاع: 1;
}
ol, ul {
	لیست سبک : هیچ ؛
}
blockquote, q {
	نقل قول: هیچ;
}
blockquote:before, blockquote:after,
q:before, q:after {
	محتوا: '';
	محتوا: هیچ؛
}

/* به یاد داشته باشید برای تعریف سبک های تمرکز! */
:focus {
	طرح کلی: 0;
}

/* به یاد داشته باشید برای برجسته کردن درج به نحوی! */
ins {
	متن دکوراسیون : هیچ ؛
}
del {
	متن دکوراسیون : خط را از طریق ؛
}

/* جداول هنوز هم نیاز به 'cellspacing="0"' در نشانه گذاری */
table {
	مرز فروپاشی: فروپاشی;
	مرز فاصله: 0;
}

منبع:http://meyerweb.com/eric/tools/css/reset/index.html

از اون استفاده @import

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

<style type="text/css>
  @import url('a.css');
  @import url('b.css');
</style>

در حالی که کار می @import دستورالعمل بسیار کندتر از راه دیگر برای شامل stylesheets را به یک سند html:

<link rel='stylesheet' type='text/css' href='a.css'>
<link rel='stylesheet' type='text/css' href='proxy.css'>

این تفاوت در وب سایت های کم ترافیک را ندارد، اما اگر شما شانس خود را به یک وب سایت محبوب، زمان بازدید کننده خود را با استفاده از یک وب سایت هدر @import.
منبع:http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

"اسموش" تصاویر شما

توسعه دهنده بودن، من همیشه متوجه شدم که بهینه سازی تصاویر من برای وب آسان نیست. من سعی کردم خوب قدیمی "ذخیره برای وب" فرمان فتوشاپ ، اما بیشتر اوقات ، من به پایان رسید تا با تصاویری که یا بیش از حد بزرگ و یا بدون کیفیت کافی است.
در نتیجه عادت بدی داشتم که از تصاویر unoptimized در وب سایت هایم استفاده کنم. این یک مشکل نیست زمانی که شما لازم نیست که در مورد پهنای باند سایت خود را مراقبت, اما پس از سوئیچ اخیر من در سرور خصوصی مجازی vps.net من, من تا به حال مراقب باشید با اندازه تصویر.

در این زمان، من در بر داشت یک ابزار بسیار سرد به نام Smush It: شما آدرس تصویر بهینه نشده خود را وارد کنید، و Smush آن را یک تصویر کاملا بهینه سازی شده برای شما ایجاد کنید. شما می توانید ذخیره کنید تا 70٪ از اندازه فایل, در حالی که حفظ کیفیت اصلی. به عنوان مثال، تمام تصاویر از لیست من از ویرایشگرهای کد آنلاین شده اند "smushed".

CSS را با HTML مخلوط نکنید

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

مثال زیر نشان می دهد که چگونه کثیف و سخت برای خواندن یک خط ساده از کد می تواند تبدیل شود، با ویژگی سبک:

<a href="http://www.catswhocode.com" style="background:#069;padding:3px;font-weight:bold;color:#fff;">گربه هایی که کد</a>

جاوا اسکریپت را با HTML مخلوط نکنید

درست مانند مخلوط کردن کد اچ تی ام ال شما با css عمل بدی است، شما نباید از هیچ جاوا اسکریپتی در اسناد html خود استفاده کنید. تمرین بد زیر یک رویداد onclick را نشان می دهد:

<a id="cwc" href="http://www.catswhocode.com" onclick="alert('I love this site!');">گربه هایی که کد</a>

همین نتیجه را می توان با استفاده از جاوا اسکریپت بدون پرده به دست آورد. در این مثال از چارچوب محبوب jQuery استفاده می کنم:

$(document).ready(function() {
  $('#cwc').click(function() {
    alert('I love this website');
  });
});

این ممکن است کمی سخت تر به نظر می رسد در ابتدا, به خصوص برای مبتدیان; اما قطعا نیست، و آن را به سند متنی خود را تمیز نگه دارید.

استفاده از نظرات مشروط

شما آن را می دانید، IE بمکد، و برخی از مشتریان خورد حتی بیشتر با نیاز به شما برای ایجاد صفحات وب که سازگار با این مرورگر منسوخ شده است. برای هدف قرار دادن نسخه های خاص از IE، شما می توانید هک به خوبی شناخته شده IE استفاده کنید، همانطور که در زیر نشان داده شده است:

ارتفاع: 200px; /* مرورگرهای معمولی */
_height: 300px; /* IE6 */
.height: 250px; /* IE7 */
*ارتفاع: 350px; /* All IEs */

این هک بسیار مفید هستند گاهی اوقات, اما آنها بهترین راه برای هدف قرار دادن یک نسخه خاص از IE نیست, و آن را اعتبار CSS خود را به شکست.

در عوض، شما باید از نظر مشروط نشان داده شده در زیر برای هدف قرار دادن IE6 استفاده کنید.

<link href="style.css" rel="stylesheet" type="text/css" />

<!--[if lte IE 6]>
  <link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

قرار دادن فایل جاوا اسکریپت در پایین

تمرین محبوب از اواخر 90′s / اوایل 2000′s بود به جای فایل های جاوا اسکریپت در داخل<head>و</head>Tags. مشکل این است که فایل های جاوا اسکریپت خود را برای اولین بار لود خواهد شد ، و در نتیجه محتوای خود را پس از لود خواهد شد.

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

    ...    <script type='text/javascript' src='jquery.js?ver=1.3.2'></script>
  

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

HTML یک زبان برنامه نویسی نیست. این یک زبان نشانه گذاری است، برای ایجاد اسناد ساخت یافته با اشاره به معنای ساختاری برای متن مانند سرفصل ها، پاراگراف ها، لیست ها، و بیشتر استفاده می شود.
اگر شما شروع به ایجاد وب سایت در خوب قدیمی 90′s و یا در آغاز قرن, شما می دانید که چگونه کثیف نشانه گذاری در آن زمان بود. اما با خوشحالی تکامل یافته است.
در میان چیزهای دیگر، استفاده از عنصر html به صورت معنایی مهم است. به عنوان مثال، یک منوی ناوبری همیشه باید یک لیست بدون جهت باشد:

<ul>
  <li><a href="#">خانه</a></li>
  <li><a href="#">مورد</a></li>
  <li><a href="#">تماس</a></li>
  <li><a href="#">وبلاگ</a></li>
</ul>

تست در حالی که شما ساخت برای جلوگیری از مسائل متقابل مرورگر

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