شرح جعل استايل منتداك مطابق للمواصفات بدون أخطاء برمجية w3c validator

**Eng Amr Adel** · 23-08-2010, 14:42

اليوم سوف نتحدث عن موضوع قد يهم الكثير من أصحاب المواقع والمنتديات , وهو كيفية جعل موقعك
واستايل منتداك متوافق للمواصفات القياسية حسب w3c validitor وهى الأداة التى تقيم أخطاء موقعك
فى أكواد تصميمه

الموضوع سهل للغاية , وتقدر بنفسك كصاحب موقع منتدى ان تحل هذه المشكلة بدون الأستعانة باحد

لتتقن هذا الموضوع لابد ان تكون ملم بشيئين:

1-اللغة الانجليزية وقدرتك على قراءة الخطأ وتعرف المطلوب منه حتى تصححه برمجيا
2-خلفية ولو بسيطة عن ال html والcss

والنقطة الثانية هذه سوف أراجع معاكم الأساسيات والأخطاء الشائعة التى نجدها فى اى تصميم للاسف
وهذا بسبب اعتماد معظم المصممين على البرامج الجاهزة فى التصميم كالفرونت بيج وووالخ
وعدم النظر لكود التصميم

تخيل انك ممكن ان تجد كود مثلا لوسم مكرر أكثر من 50 مرة بسبب هذه البرامج, والسبب ان المصمم لا يلتفت لكود التصميم وهذا عيب, فالمصمم لابد ان يكون لدية خلفية برمجية ولو بسيطة, حتى يخرج شغله مظبوط ودقيق ومنظم , يستطيع اى شخص اخر يقدر يعدل عليه فيما بعد

نبدأ على بركة الله أساس الموضوع:

اولا: تذكير بالقواعد الأسايقة والأخطاء التى يقع فيها معظم المصممين والتى سببها استخدام البرامج الجاهزة:

1-عدم اغلاق الأوسمة : وهذه أكبر مشكلة شائعة والتى تسبب ظهور الاخطاء فى تقييم الw3c لكود تصميم موقعك

نضرب أمثلة عملية :

1- عدم اغلاق وسم html كالاتى:

كود:

<html>الكود  </html>

كثير جدا فى كود الهيدر للاستايل مثلا ينسوا فى نهاية الكود اغلاق الوسم </html> وهذه مشكلة

2- عدم اغلاق وسم الصورة img

كود:

 	      < img src="رابط الصورة" />

برامج جاهزة كثيرة تنسى وضع علامة الأغلاق للوسم /

3- عدم اغلاق الاوسمة الاخرى كtd, tr .....الخ

كود:

 	<table></table>
<td> </td>
<tr> </tr>

4-استخدام أمر داخل الوسم لا يستخدم أصلا داخل هذا الوسم لانه لا يطابق xhmtl ولكن يطابق html فقط :

مثال:

كود:

 	

 	<td background="رابط الخلفية"> </td>

لو تلاحظ الأمر background , سوف تجد ان هذه العبارة خطأ استخدامها فى xhtml ويصح استخدامها فى html, وكلنا نعلم ان الw3c معتمدة الxhtml

ملاحظة: هذا الخطأ شائع لابد الحدود, ولو جبت كل استايلات العرب كلها , راح تجدها
لسبب بسيط ان الجميع فى تصميم الهيدر يقوم بأضافة نقطة تمدد للخلية, وطبعا كلنا نعلم نقطة التمدد
عبارة عن خلفية تتمدد, لذلك تجد البرنامدج كالفرونت بيج يقوم بإضافتها كخلفية اعععععععع

ويوجد الكثير من الأخطاء لو جلست للصبح مش هخلصها, وكل السبب فى ذلك , التصميم فقط بدون فكر برمجى سليم

الحين لانكم تحبون الأمثلة العملية , سوف اضرب لكم مثال عملى من أحد المنتديات وسوف
نأخذ نشوف الأخطاء اللى فيه ونحاول نصلح بعضها واحدة واحدة

1- هذا منتدى متواضع لى كنت فاتحة من سنين : الحين افتح الرابط لتشوف الاخطاء اللى فيه

اضغــــــط هــــنـــــــا

راح تجد 362 خطأ

الحين نبدأ نشوف الأخطاء ونصحهها واحدة واحدة وأخلوكم تشوفوا كيف راح تخف الأخطاء بالصور

1- شوف صورة هذا الخطأ:

هذه الصورة تم تصغيرها تلقائيا . إضغط هنا لمشاهدة الصورة بحجمها الطبيعى 820x136.

الخطأ بيقولك انك ياشاطر ما اغلقت وسم img

أنا قمت بأغلاقة ...........

نشوف عدد الأخطاء صار كام الحين:

--------------------------------------------------------------

2- شوف الخطأ بهذه الصورة:

الخطأ يقول انك ما اغلقت وسم html

نشوف بعد ما اغلقنا وسم الhtml

تابع الردود فانها هامة جدا
-------------------------------------

**Eng Amr Adel** · 23-08-2010, 14:42

على الرقم من توفير موقع W3 للمستخدمين ثلاثة وسائل للإختبار المواقع وفق المعايير القياسية للأسف ماذالت الموقع العربية مليئة بالاخطاء ، والمحذن إن هنالك إستايلات مدفوعة مليئة بالاخطاء ومأطرة بالجداول وليس بلغة الـ CSS ، أن المشكلة الكبرى هى عدم تقبلنا للتطور أو ربما وفأنا لبرنامج الفروم بيج والتخلى عن كل ماهو جديدمثل الدريم ويفر واكسبريشن 3 ، وتكاد تخلو المواقع العربية عن دروس الدريم ويفر واكسبريشن 3

**Eng Amr Adel** · 23-08-2010, 14:43

افضل برنامج فعلا الان
Microsoft Expression Web 2 انتهى عصر الفرنت بيج Front Page ابداع يامايكروسوفت
لانه افضل بكثيييييييييييير جدا من الفرونت بيج بالتعامل مع css و php بشكل كامل

**Eng Amr Adel** · 23-08-2010, 14:45

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

مشكلة االسرعة ولأخطاء في الـHTML والمعايير
رأيت بعض الأخوة يشكون أن منتدياتهم تحوي الكثير من الأخطاء عند عرضها في مدقق الـHTML وأنه بعيد كل البعد عن المعايير القياسية والثبات..
فحصت منتديات الفي بي الرئيسية.. فرأيتها تتناسب مع المعايير وأن كل شي فيها جيد..
ورأيت أيضاً أن لغة القوالب في الفي بي هي الـXHTML (لم أرى البرامج الأخرى لأحكم عليها)، إذاً فما سبب هذه الأخطاء؟
عرفت الجواب مباشرة عند فحص أحد المنتديات العربية .. نه الاختلاف بين XHTML و HTML..
كيف؟؟

كل مافي الأمر، أن الفي بي يعتمد لغة الـXHTML في القوالب، فيضع DocType الـXHTML .. وهذا وظيفته أن الزائر عند دخوله للمنتدى سيتم تعريف المتصفح مباشرة
أن اللغة هي XHTML..
لكن مصممي الاستايلات لدينا، يستخدمون الفرونت بيج وأمثاله في صنع الاستايلات، فالأكواد الناتجة تكون في العادة HTML ..
ما معنى هذا؟

عندما يدخل المتصفح للمنتدى يرى دوك تايب الـXHTML فيعتمد الصفحة على انها XHTML ويسهّل عليه فتح الصفحة، لكنه يفاجأ عند رؤيته لأكواد الـHTML
(الناتجة من فرونت بيج) بدلاً من XHTML.. وعندها يقوم بالبحث عن أوسمة الإغلاق والأشياء التي يجب وجودها في XHTML ..
وهذا يؤخر فتح الصفحة قليلاً لدى كل عضو ويؤثر بشكل عام على الجميع
وعند فحص المنتدى بالمدقق ستجد الأخطاء كثيرة وربما بالمائت.. وستقول أن الموقع لايوافق المعايير القياسية، والصحيح عكس ذلك،
كل مافي الأمر أن المدقق يرى المنتدى من الدوكتايب أن لغته هي XHTML ثم يرى الأكواد هي أشياء أخرى فيعتبرها كلها أخطاء..
فالحل إذاً فقط بأن نغير الدوك تايب إلى دوكتايب الـHTML لأن الأكواد التي صنعناها بالفرونت بيج والتصميم هي HTML

لم تفهم شيئاً؟
لا بأس.. قم بتطبيق الخطوة التالية ولاتهتم بما سبق

اجعل أخطاء منتداك قليلة بأسهل الطرق
الآن.. كيف يمكنك تغيير الدوك تايب لتتجنب كل هذه الأخطاء وتسرّع منتداك قليلاً؟

(التطبيق للفي بي فقط)
ابدأ باسم الله:
1- بعد الدخول للوحة تحكم الإدارة
(Admincp) اضغط على "التحكم بالاستايلات":

2- بعد دخول القسم، افتح الاستايل المراد التعديل عليه بالضغط على زر "اذهب" دون تغيير أي شيء:

3- ستظهر لك الكثير من الخيارات.. انزل قليلاً فقط لترى النموذج التالي:

سترى الكود التالي في النموذج :

كود:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

قم بحذفه كاملاً.. وضع هذا:

كود:

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

اضغط زر الحفظ
عد للصفحة من جديد، إن تغير لون الكلام للبرتقالي كما في الصورة التالية فقد تمت العملية بنجاح:

4- انتهينا.. العملية سهلة جداً ^_^
تأكد من المدقق، ولاحظ الفرق
ادخل هنا:
http://validator.w3.org/
ضع رابط موقعك في أول خانة واضغط
"check"
انظر لعدد الأخطاء..
قم الآن بتطبيق الشرح الوارد في موضوعنا.. وقم بالتدقيق مرة أخرى ولاحظ الفرق الآن في عدد الأخطاء..

**Eng Amr Adel** · 23-08-2010, 14:51

برنامج الفرونت بيج 2003 يصمم الصفحة بال Html ومنتديات ال vb صفحاتها xhtml ولذلك كل الاخطاء بالمنتديات تظهر بسبب توزيع الستايل بالفرونت بيج

مختصر كلامي اي وسم فردي مثل <br> لا بد ان يغلق فى ال xhtml فيكتب بهذه الطريقة

كود:

<br />

وتكتب الاكواد بالحروف الصغيرة
وأى وسم اخر لا بد ان يغلق
وكتسهيل على نفسك يمكنك اعادة توزيع الستايل باستخدام Microsoft Expression web

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
لأنه افتراضيا يقوم بكتابة الصفحة

وسوف اقوم بوضع كافة الوسوم الصحيحة وما عليكم الا استبدال الوسوم الخاطئة بالوسوم الجديدة

**Eng Amr Adel** · 23-08-2010, 14:55

نزل تحت شوية هنلاقي الكلمة دي
اقتباس:

Validation Output: 142 Errors

اللى بعدها هيا الاخطاء بتعتنا
نشتغل على اول واحد مثلا

طيب ادي اول واحد مثلا
شايفين ايه
كود معين

الخطأ بتاعنا طبعا هو دا

الخطأ في العلامة <

طيب نظلل الكود كلو زي المثال اللى في الصورة دي كدا

وبعد كدا نروح لملف ال Xml بتاع الاستايل اللى احنا نزلناه في الاول ونفتحو
ببرنامج Notepad
هنضغط Ctrl +F يظهرلنا مربع
نلصق فيه الكود اللى احنا نسخنا
ونضغط
Find Next

هيجبلنا الكود باين باللون الازرق

نحذف الرمز اللى كان طالعلنا في الخطأ
مثلا طلع الكود هكذا
اقتباس:

<script language="**********">

والخطأ في هذه العلامة
اقتباس:

>

نقوم بحذفها