المساعد الشخصي الرقمي

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



Eng Amr Adel
23-08-2010, 14:42
https://www.rise.company/forum/imgcache/1036.imgcache.gif


(http://advphp.com/)https://www.rise.company/forum/imgcache/1037.imgcache
(http://advphp.com/)




اليوم سوف نتحدث عن موضوع قد يهم الكثير من أصحاب المواقع والمنتديات , وهو كيفية جعل موقعك
واستايل منتداك متوافق للمواصفات القياسية حسب w3c validitor (http://validator.w3.org/) وهى الأداة التى تقيم أخطاء موقعك
فى أكواد تصميمه

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

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

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


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



ويوجد الكثير من الأخطاء لو جلست للصبح مش هخلصها, وكل السبب فى ذلك , التصميم فقط بدون فكر برمجى سليم https://www.rise.company/forum/imgcache/1038.imgcache.gif



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

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

اضغــــــط هــــنـــــــا (http://validator.w3.org/check?uri=http%3A%2F%2Fvista25.com%2Fvb&charset=%28detect+automatically%29&doctype=Inline&group=0)


راح تجد 362 خطأ

https://www.rise.company/forum/imgcache/1039.imgcache



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

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


https://www.rise.company/forum/imgcache/1040.imgcache.gifهذه الصورة تم تصغيرها تلقائيا . إضغط هنا لمشاهدة الصورة بحجمها الطبيعى 820x136.https://www.rise.company/forum/imgcache/1041.imgcache

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

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

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

https://www.rise.company/forum/imgcache/1042.imgcache


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


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



https://www.rise.company/forum/imgcache/1039.imgcache


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

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



https://www.rise.company/forum/imgcache/1043.imgcache

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

Eng Amr Adel
23-08-2010, 14:42
على الرقم من توفير موقع W3 (http://www.w3.org/) للمستخدمين ثلاثة وسائل للإختبار المواقع وفق المعايير القياسية للأسف ماذالت الموقع العربية مليئة بالاخطاء ، والمحذن إن هنالك إستايلات مدفوعة مليئة بالاخطاء ومأطرة بالجداول وليس بلغة الـ 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) اضغط على "التحكم بالاستايلات":
https://www.rise.company/forum/imgcache/1044.imgcache.gif
2- بعد دخول القسم، افتح الاستايل المراد التعديل عليه بالضغط على زر "اذهب" دون تغيير أي شيء:
https://www.rise.company/forum/imgcache/1046.imgcache.gif
3- ستظهر لك الكثير من الخيارات.. انزل قليلاً فقط لترى النموذج التالي:

https://www.rise.company/forum/imgcache/1047.imgcache.gif
سترى الكود التالي في النموذج :




<!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">

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


https://www.rise.company/forum/imgcache/1048.imgcache.gif


4- انتهينا.. العملية سهلة جداً ^_^
تأكد من المدقق، ولاحظ الفرق
ادخل هنا:
http://validator.w3.org/ (http://www.gulfson.com/vb/?gsr=http%3A%2F%2Fvalidator.w3.org%2F)
ضع رابط موقعك في أول خانة واضغط
"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
نزل تحت شوية هنلاقي الكلمة دي
https://www.rise.company/forum/imgcache/1049.imgcache.gif اقتباس: https://www.rise.company/forum/imgcache/1050.imgcache.gif

https://www.rise.company/forum/imgcache/1051.imgcache.gif



Validation Output: 142 Errors
https://www.rise.company/forum/imgcache/1052.imgcache.gif
https://www.rise.company/forum/imgcache/1053.imgcache.gif
اللى بعدها هيا الاخطاء بتعتنا
نشتغل على اول واحد مثلا

طيب ادي اول واحد مثلا
شايفين ايه
كود معينhttps://www.rise.company/forum/imgcache/1054.imgcache.gif

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

https://www.rise.company/forum/imgcache/1055.imgcache.jpg

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


طيب نظلل الكود كلو زي المثال اللى في الصورة دي كدا
https://www.rise.company/forum/imgcache/1056.imgcache.jpg
وبعد كدا نروح لملف ال Xml بتاع الاستايل اللى احنا نزلناه في الاول ونفتحو
ببرنامج Notepad
هنضغط Ctrl +F يظهرلنا مربع
نلصق فيه الكود اللى احنا نسخنا
ونضغط
Find Next

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

نحذف الرمز اللى كان طالعلنا في الخطأ
مثلا طلع الكود هكذا
https://www.rise.company/forum/imgcache/1049.imgcache.gif اقتباس: https://www.rise.company/forum/imgcache/1050.imgcache.gif

https://www.rise.company/forum/imgcache/1051.imgcache.gif



<script language="**********">
https://www.rise.company/forum/imgcache/1052.imgcache.gif
https://www.rise.company/forum/imgcache/1053.imgcache.gif
والخطأ في هذه العلامة
https://www.rise.company/forum/imgcache/1049.imgcache.gif اقتباس: https://www.rise.company/forum/imgcache/1050.imgcache.gif

https://www.rise.company/forum/imgcache/1051.imgcache.gif



>
https://www.rise.company/forum/imgcache/1052.imgcache.gif
https://www.rise.company/forum/imgcache/1053.imgcache.gif
نقوم بحذفها