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

Eng Ahmed

ادارة المنتدى
9 مارس 2008
3,318
11
38
www.support-ar.com
hrzm02.gif



poster.jpg






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

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

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

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

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

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

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

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

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

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

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

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

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

كود:
      < img src="رابط الصورة"[COLOR=Red] /[/COLOR]>
برامج جاهزة كثيرة تنسى وضع علامة الأغلاق للوسم /


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

كود:
<table></table>
<td> </td>
<tr> </tr>

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

مثال:

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


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



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



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


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

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


راح تجد 362 خطأ

resultbefore.png




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

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


ex1.png


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

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

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

ex2.png



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


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



resultbefore.png



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

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



ex4.png



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


الشرح اعداد الاخ vista-design



 

mbcbaba

:: متميز ::, بقسم النسخ والتعاريب
21 يناير 2009
520
5
0
www.azza2.com
بارك الله فيك أخى الكريم
على الرقم من توفير موقع W3 للمستخدمين ثلاثة وسائل للإختبار المواقع وفق المعايير القياسية للأسف ماذالت الموقع العربية مليئة بالاخطاء ، والمحذن إن هنالك إستايلات مدفوعة مليئة بالاخطاء ومأطرة بالجداول وليس بلغة الـ CSS ، أن المشكلة الكبرى هى عدم تقبلنا للتطور أو ربما وفأنا لبرنامج الفروم بيج والتخلى عن كل ماهو جديدمثل الدريم ويفر واكسبريشن 3 ، وتكاد تخلو المواقع العربية عن دروس الدريم ويفر واكسبريشن 3
وأدعوكم أخوتى لزيارة هذا الموقع الرائع الثرى بالدروس لكل اللغات حتى برنامج الفوتوشوب
tutsplus
واتمنى لكل من يجيد اللغة الإنجليزية إن يقوم بتعريب بعض الدروس وإرفاقها فى هذا المنتدى
لمساعدة الأخوة وحثهم للتوجه لأفق أرحب فى عالم اللغات والبرنامج الحديثة.
 

Eng Ahmed

ادارة المنتدى
9 مارس 2008
3,318
11
38
www.support-ar.com
بارك الله فيك أخى الكريم
على الرقم من توفير موقع W3 للمستخدمين ثلاثة وسائل للإختبار المواقع وفق المعايير القياسية للأسف ماذالت الموقع العربية مليئة بالاخطاء ، والمحذن إن هنالك إستايلات مدفوعة مليئة بالاخطاء ومأطرة بالجداول وليس بلغة الـ CSS ، أن المشكلة الكبرى هى عدم تقبلنا للتطور أو ربما وفأنا لبرنامج الفروم بيج والتخلى عن كل ماهو جديدمثل الدريم ويفر واكسبريشن 3 ، وتكاد تخلو المواقع العربية عن دروس الدريم ويفر واكسبريشن 3
وأدعوكم أخوتى لزيارة هذا الموقع الرائع الثرى بالدروس لكل اللغات حتى برنامج الفوتوشوب
tutsplus
واتمنى لكل من يجيد اللغة الإنجليزية إن يقوم بتعريب بعض الدروس وإرفاقها فى هذا المنتدى
لمساعدة الأخوة وحثهم للتوجه لأفق أرحب فى عالم اللغات والبرنامج الحديثة.
افضل برنامج فعلا الان Microsoft Expression Web 2
واقوم الان بتنزيله وبنحاول بقدر المستطاع شرحه بالمنتدى بإذن الله
لانه افضل بكثيييييييييييير جدا من الفرونت بيج بالتعامل مع css و php بشكل كامل

 

Fakis.net

عضو جديد
27 مايو 2010
6
0
0
33
Mــصر
www.fakis.net
[بسم الله الرحمن الرحيم]
. . . . .
ماشاء الله
شرح رائغع ووافي
جعله الله في موازين حسناتك
. . . . .
[في رعاية الله]
 

يحي الصبحي

عضو جديد
28 مايو 2010
14
0
0
طيب سؤل أنت تقول يقولك ماقفلت انت تقفل أيش ياليت توضح أكثر حيث اني وضعت رابط منتدى ويقول لديك
2377 خطاء تكفي أوريد استفيد ساعدنسي الله يحفظك
 

croook

عضو جديد
2 يوليو 2010
11
0
0
يعطيك الف عافيه وسلمت الايادي ياالغلا
 

Mr.AtSh

:: مسؤول :: , :: وملقى دورة حماية المنتديات ::
Coder/Designer
1 يوليو 2010
167
3
0
تسلم يا غالى شرح وافي​