السلام عليكم ورحمة الله وبركاته،،
الإنتشار الواسع والسريع في تقنيات وبرمجيات الأنترنت في السنوات الأخيرة جعل الكثير من المصممين يغفلون عن بعض الأساسيات إما بداعي العجلة أو النسيان. في هذه العجالة، سنستعرض أبرز الأخطاء الشائعة والتي يقع فيها الكثير منا عند تصميم صفحات أو مواقع على الشبكة العنكبوتية.
مقدمة:
إحدى أهم المشاكل التي تواجه العديد من المصممين هي تطويع لغة HTML لتلائم جميع المتصفحات وليس انترنت اكسبلوور فقط. فهذا المتصفح يقوم بمحاولة عرض جميع ما يكتب في الصفحة بغض النظر عن مدى دقة المحتوى وهذه هي أهم عيوب هذا المتصفح بالنسبة للمبتدأين والذين يعتقدون أن الكود الذي قاموا بكتابته صحيح لأنه تم عرضه بشكل صحيح.
إذا يجب أن لا ننسى أن هناك العديد من المتصفحات وبيئات عمل مختلفة وهناك العديد من المعايير التي يجب إتباعها عند كتابة أي كود برمجي. فمن العبث أن نقوم بتصميم قالب جميل ونصرف ساعات من التعديل والتغيير لنفاجأ بعدها أن ما قمنا بعمله لم يعرض بالطريقة الصحيحة في متصفحات أخرى أو بيئات عمل مختلفة. وهذا ما يدفهنا للحديث عن ماهية صفحة الـ HTML .
صفحة الـ HTML
صفحة الـ HTML الصحيحة يجب أن تحتوي على برتوكول نوعية أو محتوى الصفحة ويسمى
DOCTYPE. هذا البرتوكول يحدد نوعية محتوى الصفحة والنكهة العامة للصفحة وكيف يقوم المتصفح بعرض هذه الصفحة. يعنى بالمختصر المفيد هي مفتاح الصفحة بالنسبة للمتصفح. النقطة الثانية والتي يتم إغفالها من قبل الكثيرين هي تحديد خواص اللغة وإتجاه العرض للكتابة (يمين - يسار).
كما يجب أن لا نهمل علامات الترميز الواقعة بين علامتي التنصيص HEAD والتي تضم فيما بينها خواص اللغة ومسار ملف CSS ونوعية الروابط والكلمات الرئيسة التي تساعد المتصفح في فهم نوعية الصفحة.
عند نهاية علامة التنصيص HEAD تبدأ علامة التنصيص BODY والتي يجب أن يكون محتوى الصفحة ضمنها وليس في أي مكان آخر. فالنصوص والصور والروابط يجب أن تكون ضمن علامة التنصيص BODY ولا ننسى أن نقوم بإقفالها.
الكود التالي يوضح الشكل الصحيح لما يجب أن تكون عليه صفحة الـ HTML :
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>[/HTML]
الأخطاء الشائعة:
1- تحاشى أن تخلط ماء وزيت 
ونقصد بذلك تحاشي استخدام الحروف والكبيرة والصغيرة في علامات التنصيص مثل <P></p> أو <Table></TABLE> بل يجب أن نستخدم دوما الحروف الصغيرة حتى نحصل على تناسق نمطي وتسلسل منطقي.
2- يجب أن تكون جميع المتغيرات بالحروف الصغيرة يعني lowercase وأن تكون القيم المرتبطة بهم values بين علامتي ( " " ) فنحن نعلم أنه من السهل أن نقوم بكتابة التالي:
كود PHP:
echo "<p class=main>style</p>";
بدلا من
كود PHP:
echo "<p class=\"main\">style</p>";
بل من الأفضل أن تكون جميع أوامر الطباعة بيم علامتي ( ' ) وهذا يعطي الشكل النسقي التالي:
كود PHP:
echo '<p class="main">style</p>';
ولنتحاشى أيضا أن تكون الخلط في المتغيرات بحروف كبيرة مرة ومرة صغيرة يعني مثل onMouseOver بل يجب كتابتها بالشكل التالي onmouseover يعني كلها حروف صغيرة.
3- الروابط الميتة
الوباء القاتل في تصميم وبرمجة المواقع. وهو ينتج نتيجة التسرع أو عدم المعرفة الكاملة بوظائف الأكواد. فعلى سبيل المثال الجافا سكريبت هي ليست برتوكول برمجي ويجب التعامل معها على هذا الاساس. خذ على سبيل المثال الكود التالي:
[HTML]<a href="javascript
pen('abc.html')">abc</a>[/HTML]
فهذا كود ميت أو غير فعّال عندما يكون الجافا سكريبت غير موجود والصحيح هو التالي:
[HTML]<a href="abc.html" onclick="open(this.href);return false">abc</a>[/HTML]
حيث سيكون الرابط فعّلا حتى عندما تكون الجافا سكريبت غير موجودة وذلك لأن return false ستمكننا من تفعيل الرابط حتى بعدم وجود الجافا سكريبت.
4- المساحات الخالية أو الفارغة
عادة هي لا تؤثر على كود الـ HTML ولكن في مكونات CSS و الجافا سكريبت ستكون لها دور مدمر وقد تسبب مشاكل كبيرة أنت في غنى عنها. حيث أننا نضع فراغات أو أسطر فارغة حتى يتسنى لنا كبشر قراءة الكود بشكل صحيح ولكن ذلك لا ينطبق على المتصفح
5- فعالية الكود
لقد تغيرت أشياء كثيرة جدا في ترميز صفحات الـ HTML فعلى سبيل المثال:
• لون خلفية الصفحة bgcolor يجب أن يكون في ستايل شيت CSS ويتم اضافة CLASS بدلا عنه وبالتالي يصبح الكود <td bgcolor="blue"> هكذا <td class="highlight"> ونقوم بتعريف هذا الـ CLASS في CSS بالشكل التالي:
[HTML]td.highlight{color:blue;}[/HTML]
• تحاشى استخدام التأثيرات STYLE داخل كود الـ HTML واستعض عنها بالـ CLASS في الـ CSS
• هذا الكود للخط الغامق <b></b> استبدله بـ <strong></strong>
• ايضا ادراج الأكواد التالية <font></font> و <center></center> دوما في الـ CSS
وهناك موقع أكثر من رائع اسمه
HTMLDOG يعطيك مقدمة في هذه الاساسيات ومالذي يمكنك استخدامه ومالذي لا يمكنك استخدامه.
6- تعليقات الإيضاح
هل صادفت يوما أنك عملت على كود ما لمدة ثم انشغلت عنه فترة وعندما عدت نسيت لماذا وضعت هذا أو فعلت هذا؟ إن هذا من الأمور التي تحدث للمبرمجين الجدد والذين يدفعهم حماسهم الى ترك خاصية وضع الايضاح على الاكواد التي يعملون عليها. وطبعا نقصد بعلامة الايضاح هذه: <!-- -->
فعلامات الايضاح تساعدك في الرجوع الى بداية الكود ونهايته وكذلك تساعدك في معرفة فائدة الكود خصوصا اذا كان الكود عندك بعشرات الاسطر وكذلك عندما ترسل هذا الكود لزميل لك لعملية تصحيح او استشارة. ومثال على ذلك الكود التالي:
[HTML]<!-- replace all %xxxx% with the real data -->
<table summary="results year %year%">
<tfoot>
<tr>
<th scope="row">Overall</th><td>%overall value%</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="col">Client</th>
<th scope="col">% of satisfaction</th>
</tr>
<!-- Loop over all sellers and populate this data -->
<tr>
<td>%sellername%</td>
<td>%percentage%</td>
</tr>
<!-- end Loop -->
</tbody>
</table>[/HTML]
وفي الأخير أتمنى أن تعرضوا الكود النهائي على مدقق الـ HTML وهو مجاني ويمكنكم الوصول له عبر
w3c HTML validator.
أتمنى أن أكون وفقت في توصيل هذه المعلومات وأن تكون ذات فائدة للجميع.
تحياتي
هل انت مصمم مواقع؟ اذن انتبهة من هذة الاخطاء
النمط المتتابع
