salima
10-31-2013, بتوقيت غرينيتش 03:42 AM
http://www.dzbatna.com/images/icons/iconrote.gif ط´ط±ط* ط¬ط¹ظ„ ط§ط³طھط§ظٹظ„ ظ…ظ†طھط¯ط§ظƒ ظ…ط·ط§ط¨ظ‚ ظ„ظ„ظ…ظˆط§طµظپط§طھ ط¨ط¯ظˆظ† ط£ط®ط·ط§ط، ط¨ط±ظ…ط¬ظٹط© w3c validator (http://www.dzbatna.com/t1522731/)
http://i46.tinypic.com/hrzm02.gif
http://advphp.com/tuts/7r/w3c/poster.jpg
(http://advphp.com)
اليوم سوف نتحدث عن موضوع قد يهم الكثير من أصحاب المواقع والمنتديات , وهو كيفية جعل موقعك
واستايل style منتداك متوافق للمواصفات القياسية حسب w3c validitor (http://validator.w3.org) وهى الأداة التى تقيم أخطاء موقعك
فى أكواد تصميمه
الموضوع سهل للغاية , وتقدر بنفسك كصاحب موقع منتدى ان تحل هذه المشكلة بدون الأستعانة باحد
لتتقن هذا الموضوع لابد ان تكون ملم بشيئين:
1-اللغة الانجليزية وقدرتك على قراءة الخطأ وتعرف المطلوب منه حتى تصححه برمجيا
2-خلفية ولو بسيطة عن ال html والcss
والنقطة الثانية هذه سوف أراجع معاكم الأساسيات والأخطاء الشائعة التى نجدها فى اى تصميم للاسف
وهذا بسبب اعتماد معظم المصممين على البرامج الجاهزة فى التصميم كالفرونت بيج وووالخ
وعدم النظر لكود code التصميم
تخيل انك ممكن ان تجد كود code مثلا لوسم مكرر أكثر من 50 مرة بسبب هذه البرامج, والسبب ان المصمم لا يلتفت لكود code التصميم وهذا عيب, فالمصمم لابد ان يكون لدية خلفية برمجية ولو بسيطة, حتى يخرج شغله مظبوط ودقيق ومنظم , يستطيع اى شخص اخر يقدر يعدل عليه فيما بعد
نبدأ على بركة الله أساس الموضوع:
اولا: تذكير بالقواعد الأسايقة والأخطاء التى يقع فيها معظم المصممين والتى سببها استخدام البرامج الجاهزة:
1-عدم اغلاق الأوسمة : وهذه أكبر مشكلة شائعة والتى تسبب ظهور الاخطاء فى تقييم الw3c لكود code تصميم موقعك
نضرب أمثلة عملية :
1- عدم اغلاق وسم html كالاتى:
رمز Code:
<html>الكود code </html>
كثير جدا فى كود code الهيدر header للاستايل style مثلا ينسوا فى نهاية الكود code اغلاق الوسم </html> وهذه مشكلة
2- عدم اغلاق وسم الصورة img
رمز Code:
< img src="رابط الصورة" />
برامج جاهزة كثيرة تنسى وضع علامة الأغلاق للوسم /
3- عدم اغلاق الاوسمة الاخرى كtd, tr .....الخ
رمز Code:
<table></table> <td> </td> <tr> </tr>
4-استخدام أمر داخل الوسم لا يستخدم أصلا داخل هذا الوسم لانه لا يطابق xhmtl ولكن يطابق html فقط :
مثال:
رمز Code:
<td background="رابط الخلفية"> </td>
لو تلاحظ الأمر background , سوف تجد ان هذه العبارة خطأ استخدامها فى xhtml ويصح استخدامها فى html, وكلنا نعلم ان الw3c معتمدة الxhtml
ملاحظة: هذا الخطأ شائع لابد الحدود, ولو جبت كل استايل styleات العرب كلها http://www.dzbatna.com/images/smilies/nosweat.gif, راح تجدها
لسبب بسيط ان الجميع فى تصميم الهيدر header يقوم بأضافة نقطة تمدد للخلية, وطبعا كلنا نعلم نقطة التمدد
عبارة عن خلفية تتمدد, لذلك تجد البرنامدج كالفرونت بيج يقوم بإضافتها كخلفية http://www.dzbatna.com/images/smilies/thumbdown.gif اعععععععع
ويوجد الكثير من الأخطاء لو جلست للصبح مش هخلصها, وكل السبب فى ذلك , التصميم فقط بدون فكر برمجى سليم http://www.dzbatna.com/images/smilies/cupidarrow.gif
الحين لانكم تحبون الأمثلة العملية , سوف اضرب لكم مثال عملى من أحد المنتديات وسوف
نأخذ نشوف الأخطاء اللى فيه ونحاول نصلح بعضها واحدة واحدة
1- هذا منتدى متواضع لى كنت فاتحة من سنين : الحين افتح الرابط لتشوف الاخطاء اللى فيه
اضغــــــط هــــنـــــــا (http://validator.w3.org/check?uri=http%3A%2F%2Fvista25.com%2Fvb&charset=%28detect+automatically%29&doctype=Inline&group=0)
راح تجد 362 خطأ
http://advphp.com/tuts/7r/w3c/resultbefore.png
الحين نبدأ نشوف الأخطاء ونصحهها واحدة واحدة وأخلوكم تشوفوا كيف راح تخف الأخطاء بالصور
1- شوف صورة هذا الخطأ:
http://advphp.com/tuts/7r/w3c/ex1.png
الخطأ بيقولك انك ياشاطر ما اغلقت وسم img
أنا قمت بأغلاقة ...........
نشوف عدد الأخطاء صار كام الحين:
http://advphp.com/tuts/7r/w3c/ex2.png
--------------------------------------------------------------
2- شوف الخطأ بهذه الصورة:
http://advphp.com/tuts/7r/w3c/resultbefore.png
الخطأ يقول انك ما اغلقت وسم html
نشوف بعد ما اغلقنا وسم الhtml
http://advphp.com/tuts/7r/w3c/ex4.png
---------------------------------------------------------------
شوف كيف الاخطاء نزلت كثير....
وهكذا..............
معظم الأخطاء راح تجدها هيك............
بهيك يكون انتهى درس مفصلنا لليوم
ترقبوا أحد دروس موقعى المتواضع advphp.com لتعلم البرمجة بسهولة ويسر http://www.dzbatna.com/images/smilies/nosweat.gif
أخوكم vista-design
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
http://i46.tinypic.com/hrzm02.gif
http://advphp.com/tuts/7r/w3c/poster.jpg
(http://advphp.com)
اليوم سوف نتحدث عن موضوع قد يهم الكثير من أصحاب المواقع والمنتديات , وهو كيفية جعل موقعك
واستايل style منتداك متوافق للمواصفات القياسية حسب w3c validitor (http://validator.w3.org) وهى الأداة التى تقيم أخطاء موقعك
فى أكواد تصميمه
الموضوع سهل للغاية , وتقدر بنفسك كصاحب موقع منتدى ان تحل هذه المشكلة بدون الأستعانة باحد
لتتقن هذا الموضوع لابد ان تكون ملم بشيئين:
1-اللغة الانجليزية وقدرتك على قراءة الخطأ وتعرف المطلوب منه حتى تصححه برمجيا
2-خلفية ولو بسيطة عن ال html والcss
والنقطة الثانية هذه سوف أراجع معاكم الأساسيات والأخطاء الشائعة التى نجدها فى اى تصميم للاسف
وهذا بسبب اعتماد معظم المصممين على البرامج الجاهزة فى التصميم كالفرونت بيج وووالخ
وعدم النظر لكود code التصميم
تخيل انك ممكن ان تجد كود code مثلا لوسم مكرر أكثر من 50 مرة بسبب هذه البرامج, والسبب ان المصمم لا يلتفت لكود code التصميم وهذا عيب, فالمصمم لابد ان يكون لدية خلفية برمجية ولو بسيطة, حتى يخرج شغله مظبوط ودقيق ومنظم , يستطيع اى شخص اخر يقدر يعدل عليه فيما بعد
نبدأ على بركة الله أساس الموضوع:
اولا: تذكير بالقواعد الأسايقة والأخطاء التى يقع فيها معظم المصممين والتى سببها استخدام البرامج الجاهزة:
1-عدم اغلاق الأوسمة : وهذه أكبر مشكلة شائعة والتى تسبب ظهور الاخطاء فى تقييم الw3c لكود code تصميم موقعك
نضرب أمثلة عملية :
1- عدم اغلاق وسم html كالاتى:
رمز Code:
<html>الكود code </html>
كثير جدا فى كود code الهيدر header للاستايل style مثلا ينسوا فى نهاية الكود code اغلاق الوسم </html> وهذه مشكلة
2- عدم اغلاق وسم الصورة img
رمز Code:
< img src="رابط الصورة" />
برامج جاهزة كثيرة تنسى وضع علامة الأغلاق للوسم /
3- عدم اغلاق الاوسمة الاخرى كtd, tr .....الخ
رمز Code:
<table></table> <td> </td> <tr> </tr>
4-استخدام أمر داخل الوسم لا يستخدم أصلا داخل هذا الوسم لانه لا يطابق xhmtl ولكن يطابق html فقط :
مثال:
رمز Code:
<td background="رابط الخلفية"> </td>
لو تلاحظ الأمر background , سوف تجد ان هذه العبارة خطأ استخدامها فى xhtml ويصح استخدامها فى html, وكلنا نعلم ان الw3c معتمدة الxhtml
ملاحظة: هذا الخطأ شائع لابد الحدود, ولو جبت كل استايل styleات العرب كلها http://www.dzbatna.com/images/smilies/nosweat.gif, راح تجدها
لسبب بسيط ان الجميع فى تصميم الهيدر header يقوم بأضافة نقطة تمدد للخلية, وطبعا كلنا نعلم نقطة التمدد
عبارة عن خلفية تتمدد, لذلك تجد البرنامدج كالفرونت بيج يقوم بإضافتها كخلفية http://www.dzbatna.com/images/smilies/thumbdown.gif اعععععععع
ويوجد الكثير من الأخطاء لو جلست للصبح مش هخلصها, وكل السبب فى ذلك , التصميم فقط بدون فكر برمجى سليم http://www.dzbatna.com/images/smilies/cupidarrow.gif
الحين لانكم تحبون الأمثلة العملية , سوف اضرب لكم مثال عملى من أحد المنتديات وسوف
نأخذ نشوف الأخطاء اللى فيه ونحاول نصلح بعضها واحدة واحدة
1- هذا منتدى متواضع لى كنت فاتحة من سنين : الحين افتح الرابط لتشوف الاخطاء اللى فيه
اضغــــــط هــــنـــــــا (http://validator.w3.org/check?uri=http%3A%2F%2Fvista25.com%2Fvb&charset=%28detect+automatically%29&doctype=Inline&group=0)
راح تجد 362 خطأ
http://advphp.com/tuts/7r/w3c/resultbefore.png
الحين نبدأ نشوف الأخطاء ونصحهها واحدة واحدة وأخلوكم تشوفوا كيف راح تخف الأخطاء بالصور
1- شوف صورة هذا الخطأ:
http://advphp.com/tuts/7r/w3c/ex1.png
الخطأ بيقولك انك ياشاطر ما اغلقت وسم img
أنا قمت بأغلاقة ...........
نشوف عدد الأخطاء صار كام الحين:
http://advphp.com/tuts/7r/w3c/ex2.png
--------------------------------------------------------------
2- شوف الخطأ بهذه الصورة:
http://advphp.com/tuts/7r/w3c/resultbefore.png
الخطأ يقول انك ما اغلقت وسم html
نشوف بعد ما اغلقنا وسم الhtml
http://advphp.com/tuts/7r/w3c/ex4.png
---------------------------------------------------------------
شوف كيف الاخطاء نزلت كثير....
وهكذا..............
معظم الأخطاء راح تجدها هيك............
بهيك يكون انتهى درس مفصلنا لليوم
ترقبوا أحد دروس موقعى المتواضع advphp.com لتعلم البرمجة بسهولة ويسر http://www.dzbatna.com/images/smilies/nosweat.gif
أخوكم vista-design
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
