أفضل الممارسات لمطوري الويب الأمامية

اشرح أي شعبة ستغلقها

معظم الوقت عندما كنت أشاهد مصدر موقع على شبكة الانترنت ، وأرى ، في أسفل الصفحة ، وقائمة لا نهاية لها تقريبا من إغلاق العلامات. في الواقع ، يعتقد العديد من المبتدئين أن لديهم فقط استخدام divs بدلاً من الجداول لإنتاج رمز الجودة. DIVS هي منظفات من الجداول ، ولكن من دون التنظيم رمز السليم ، يمكن أن يكون (أو حتى في بعض الأحيان أكثر) فوضوي كما الجدول القائم على رمز.

استخدام المسافة البادئة هو بداية جيدة. ولكن نصيحة التي يمكن أن تجعل بالتأكيد يمكنك توفير الكثير من الوقت هو التعليق على كل علامة div كنت إغلاق، كما هو مبين في المثال أدناه:

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

استخدام إعادة ضبط CSS

إلا إذا كنت مبتدئا أو إذا كنت في إجازة على جزيرة صحراوية على مدى السنوات ال 6 الماضية، قد تعرف بالفعل كيف مفيدة CSS إعادة تعيينها. لأنه بشكل افتراضي، المستعرضات لا تطبق نفس التصميم الافتراضي لعناصر HTML، إعادة ضبط CSS سوف تضمن أن كل عنصر ليس له نمط معين بحيث يمكنك تحديد الخاصة بك دون المخاطرة من العديد من عبر المتصفح تقديم القضايا.

html، الجسم، DIV، تمتد، التطبيق الصغير، كائن، iframe،
h1، h2، h3، h4، h5، h6، p، blockquote، قبل،
أ، abbr، اختصار، عنوان، كبير، يستشهد، رمز،
ديل، dfn، م، الخط، img، ins، kbd، س، ق، سامب،
صغيرة، إضراب، قوية، دونية، سوب، tt، فار،
ب، ش، ط، وسط،
DL، dt، DD، رأ، ul، لي،
مجموعة الحقول، النموذج، التسمية، وسيلة الإيضاح،
الجدول ، التسمية التوضيحية ، tbody ، tfoot ، thead ، tr ، th ، td {
	الهامش: 0؛ 1.
	الحشو: 0؛ 0؛ 0؛ 0؛ 0؛ 0؛
	الحدود: 0؛
	الخطوط العريضة: 0؛ 0؛ 0؛ 0؛
	حجم الخط: 100٪
	عمودي- محاذاة: خط أساس;
	الخلفية: شفافة؛
}
الجسم {
	خط الارتفاع: 1؛
}
رأ، ul {
	قائمة على غرار: لا شيء؛
}
اقتباس كتلة، q {
	علامات الاقتباس: لا شيء؛
}
blockquote:before، blockquote:after،
q:before، q:بعد {
	المحتوى: '''؛'؛
	المحتوى: لا شيء؛
}

/ * تذكر لتحديد أنماط التركيز! */
التركيز {
	الخطوط العريضة: 0؛ 0؛ 0؛ 0؛
}

/ * تذكر لتسليط الضوء على إدراج بطريقة أو بأخرى! */
ins {
	زخرفة النص: لا شيء؛
}
ديل {
	النص الديكور: خط من خلال؛
}

/ * الجداول لا تزال بحاجة 'cellspacing = "0" في العلامات * /
الجدول {
	انهيار الحدود: انهيار;
	تباعد الحدود: 0؛ 0؛ 0؛ 0؛ 0؛ 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 أبطأ بكثير من الطريقة الأخرى لتضمين أوراق الأنماط في مستند 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/

"Smush" صورك

كونه مطور ، وجدت دائما أن تحسين صوري للويب لم يكن سهلا. حاولت جيدة القديمة "حفظ على شبكة الإنترنت" فوتوشوب القيادة ، ولكن في معظم الأحيان ، انتهى بي الأمر مع الصور التي كانت إما كبيرة جدا أو من دون نوعية كافية.
ونتيجة لذلك ، كان لي عادة سيئة من استخدام الصور غير المبهمة على مواقع الويب الخاصة بي. هذه ليست مشكلة عندما لم يكن لديك لرعاية عرض النطاق الترددي لموقعك ، ولكن بعد بلدي التبديل الأخيرة على بلدي vps.net خادم خاص الظاهري ، كان علي أن أكون حذرا مع أحجام الصور.

في هذا الوقت، وجدت أداة باردة جدا اسمه Smush It: يمكنك إدخال عنوان URL الصورة غير timtimized الخاص بك، وSmush فإنه سيتم إنشاء صورة الأمثل تماما بالنسبة لك. يمكنك حفظ ما يصل إلى 70٪ من حجم الملف، مع الحفاظ على الجودة الأصلية. على سبيل المثال ، تم جميع الصور من قائمتي من المحررين رمز على الانترنت "smushed".

لا تخلط مع CSS HTML

كلغة ترميز، الاستخدام الصحيح لـ HTML هو تنظيم المستندات عن طريق تعريف رأس، تذييل، قوائم، blockquotes، إلخ. منذ بعض الوقت ، ومطوري الويب الأمامية غالبا ما تستخدم الآن سمات HTML مهملة لنمط عنصر معين.
في الوقت الحاضر ، سمة النمط يسمح للمطورين لإدراج CSS مباشرة في وثيقة HTML. هذا مفيد جداً للاختبار أو عندما تكون في عجلة من أمرك. ولكن سمة النمط هو ممارسة سيئة ، التي تذهب تماما ضد فلسفة CSS.

يوضح المثال التالي كيف يمكن أن تصبح قذرة و الصعب قراءة سطر بسيط من التعليمات البرمجية مع سمة النمط:

<a href="http://www.catswhocode.com" style="background:#069;padding:3px;font-weight:bold;color:#fff;">القطط الذين رمز</a>

لا تخلط جافا سكريبت مع HTML

تماما مثل خلط التعليمات البرمجية الخاصة بك مع المغلق هو ممارسة سيئة ، يجب أن لا تستخدم أي جافا سكريبت في مستندات HTML. يوضح الممارسة غير صحيح التالية حدث onclick:

<a id="cwc" href="http://www.catswhocode.com" onclick="alert('I love this site!');">القطط الذين رمز</a>

ويمكن تحقيق نفس النتيجة باستخدام جافا سكريبت دون عائق. في هذا المثال ، أنا باستخدام إطار مسج شعبية :

$(مستند). ready(دالة() {
  $('#cwc').انقر فوق(دالة() {
    تنبيه ('أنا أحب هذا الموقع');
  });
});

قد يبدو هذا أصعب قليلاً في البداية، خاصة بالنسبة للمبتدئين. ولكن بالتأكيد ليس كذلك، وسوف تبقي وثيقة HTML الخاصة بك نظيفة.

استخدام التعليقات الشرطية

أنت تعرف ذلك ، IE تمتص ، وبعض العملاء تمتص أكثر من ذلك من خلال مطالبة لك لإنشاء صفحات الويب التي تتوافق مع هذا المتصفح عفا عليها الزمن. لاستهداف إصدارات محددة من IE ، يمكنك استخدام الخارقة IE المعروفة ، كما هو موضح أدناه:

ارتفاع: 200px؛ / * المتصفحات العادية * /
_height: 300px; / * IE6 * /
.الارتفاع: 250px؛ / * IE7 * /
* الارتفاع: 350px؛ / * كافة الكيانات الدولية * /

هذه الخارقة مفيدة للغاية في بعض الأحيان ، لكنها ليست أفضل طريقة لاستهداف إصدار محدد من 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′ق/أوائل 2000′ق لوضع ملفات جافا سكريبت داخل<head>و</head>العلامات. المشكلة هي أنه سيتم تحميل ملفات جافا سكريبت أولاً ، وبالتالي سيتم تحميل المحتوى الخاص بك بعد.

من خلال وضع ملفات جافا سكريبت في أسفل المستندات الخاصة بك، عليك أن تضمن أن ملفات JS سيتم تحميلها فقط عندما يتم عرض المحتوى بشكل صحيح.

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

استخدام HTML بشكل دلالي

HTML ليست لغة برمجة. وهي لغة ترميز، تستخدم لإنشاء مستندات منظمة عن طريق الإشارة إلى دلالات هيكلية للنص مثل العناوين والفقرات والقوائم والمزيد.
إذا كنت بدأت لإنشاء مواقع في 90 جيدة القديمة أو في بداية القرن، أنت تعرف كيف القذرة العلامات كان في ذلك الوقت. ولكن لحسن الحظ ، فقد تطورت.
من بين أمور أخرى، من المهم استخدام عنصر html بشكل دلالي. كمثال، يجب أن تكون قائمة التنقل قائمة غير مرتبة:

<ul>
  <li><a href="#">المنزل</a></li>
  <li><a href="#">عن</a></li>
  <li><a href="#">الاتصال</a></li>
  <li><a href="#">بلوق</a></li>
</ul>

اختبار أثناء إنشاء لتجنب مشكلات المستعرضات المشتركة

واحدة من أكبر خطأ من أي وقت مضى عندما قدمت أأكد النامية ، المغلق ، وجافا سكريبت ، وليس لاختبار صفحاتي على متصفح متعددة بينما كنت أكتب لهم. بدلا من ذلك ، اعتدت على كتابة كل ما بي من التعليمات البرمجية وعرض فقط في فايرفوكس لنرى كيف تم تقديمها.