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

الجنرال · #1 07-27-2010, 11:55 AM

اليوم سوف نتحدث عن موضوع قد يهم الكثير من أصحاب المواقع والمنتديات , وهو كيفية جعل موقعك
واستايل منتداك متوافق للمواصفات القياسية حسب 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- هذا منتدى متواضع له كنت فاتحة من كم شهر : الحين افتح الرابط لتشوف الاخطاء اللى فيه
اضغــــــط هــــنـــــــا

راح تجد اخطأ قليليه وبعد التعديل على الاستايل او الهاكات بتروح

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

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

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

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

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

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

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

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

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

شوف كيف الاخطاء نزلت كثير
وهكذا.

معظم الأخطاء راح تجدها هيك
بهيك يكون انتهى درسنا لليوم

**Ahmed** · 07-27-2010, 08:13 PM

ممتاز جدا موضوع مهم ومفيد جدا

بارك الله فيك اخي الجنرال
وبالنسبه للصور اللي بالشكل هذا

كود PHP:


			
<img src="imges/img.gif" />

لا بد من وضع لها alt
لتصبح

كود PHP:


			
<img src="http://www.mad3om.com/images/img.gif" alt="" />

وكذلك بخصوص الحروف الكبيره (Capital) يفضل كتابتها حروف صغيره (small)
يعني مثلا بدل

كود PHP:


			
<DIV class="md">
</DIV>

نخليها

كود PHP:


			
<div class="md">
</div>

وكذلك

تحياتي الطيبه لك اخي الكريم

THE PUNISHER · 07-27-2010, 08:26 PM

مشكور جداً اخى العزيز الجنرال ع الموضوع

وان شاء الله الجميع يستفيد منه

تحياتى لك ,,

الجنرال · 07-28-2010, 12:34 AM

اقتباس:

المشاركة الأصلية كتبت بواسطة Ahmed

ممتاز جدا موضوع مهم ومفيد جدا

بارك الله فيك اخي الجنرال
وبالنسبه للصور اللي بالشكل هذا

كود PHP:


			
<img src="imges/img.gif" />

لا بد من وضع لها alt
لتصبح

كود PHP:


			
<img src="http://www.mad3om.com/images/img.gif" alt="" />

وكذلك بخصوص الحروف الكبيره (Capital) يفضل كتابتها حروف صغيره (small)
يعني مثلا بدل

كود PHP:


			
<DIV class="md">
</DIV>

نخليها

كود PHP:


			
<div class="md">
</div>

وكذلك

تحياتي الطيبه لك اخي الكريم

يعطيك ربى العافيه

تسلم ياغالى على الاضافه والتواجد المستمر

تحياتى بكل حب وموده للجميل

الجنرال · 07-28-2010, 12:35 AM

اقتباس:

المشاركة الأصلية كتبت بواسطة the punisher

مشكور جداً اخى العزيز الجنرال ع الموضوع

وان شاء الله الجميع يستفيد منه

تحياتى لك ,,

هلا بيك ياغالى نورت الموضوع

اتمنى التوفيق للجميع

Just Smile · 07-30-2010, 01:20 PM

بارك الله فيك اخي الكريم

معلومات مميزه وموضوع مميز

فتى الذهب · 08-03-2010, 06:00 PM

مشكووووووووووور الجنرال على الطريقة

الجنرال · 08-10-2010, 04:33 PM

هلا بيكم ونورتو الموضوع

يعطيكم العافيه

pcabd · 08-13-2010, 09:55 PM

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

لاني شايف ومش عارف وين مكان الخطأ لو سمحتوا مساعدة

pcabd · 08-13-2010, 10:19 PM

انا بكون شاكر الكم وهي رابط اخطاء المنتدى

http://validator.w3.org/check?uri=ht...2F1.1#line-353

07-27-2010, 08:13 PM	#2
Ahmed ~}ṢỊĿẸŅṬ تاريخ التسجيل: Aug 2008 الدولة: مصر المشاركات: 909 التقييم: 1057	ممتاز جدا موضوع مهم ومفيد جدا بارك الله فيك اخي الجنرال وبالنسبه للصور اللي بالشكل هذا كود PHP: `<img src="imges/img.gif" />` لا بد من وضع لها alt لتصبح كود PHP: `<img src="http://www.mad3om.com/images/img.gif" alt="" />` وكذلك بخصوص الحروف الكبيره (Capital) يفضل كتابتها حروف صغيره (small) يعني مثلا بدل كود PHP: `<DIV class="md"> </DIV>` نخليها كود PHP: `<div class="md"> </div>` وكذلك تحياتي الطيبه لك اخي الكريم التوقيع [ الذكي ] .. لايبحث عن فرص , بل يصنعـها !!

07-30-2010, 01:20 PM	#6
Just Smile ї'àM ĽóŠŦ ŴÍťĤÖü† ŸŐÜ تاريخ التسجيل: Aug 2008 المشاركات: 1,653 التقييم: 66	بارك الله فيك اخي الكريم معلومات مميزه وموضوع مميز التوقيع Just Smile and The Rain Is Gone

08-03-2010, 06:00 PM	#7
فتى الذهب :: عضو مبدع :: تاريخ التسجيل: Nov 2008 الدولة: السعودية المشاركات: 124 التقييم: 50	مشكووووووووووور الجنرال على الطريقة التوقيع منتديات عروس الذهب

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

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
استايل نادي مدعوم الثاني بـ 4 الوان خفيف + خالي من الصور و مطابق للمعاير القياسيه	Ahmed	[ صالة ] الإستايلات للجيل الثالث [ vB 3 ]	8	10-07-2011 02:41 PM
RegDoctor 2.14 لتحديد أخطاء الرجستري وتحسين أداء النظام في نسخة جديدة	THE PUNISHER	[ صالة ] البرامج العامة والمشروحة	0	06-07-2009 07:12 PM
هــــاك تصغير الصور المميز والأنيق من دون أخطاء ولا مشاكل	THE PUNISHER	[ صالة ] تطوير منتديـــــ vb3.6.X ــات	0	06-01-2009 04:05 PM
تغييرات مهمة في سكريبت validator و keygen ابتداءا من النسخة المرتقبة 3.8.0 Alpha 1	tato	[ صالة ] مناقشات وشروحات عامه	2	10-13-2008 01:01 PM

خدمات

فيبيولتن

vBulletin

روابط اعلانية

07-27-2010, 08:26 PM	#3
THE PUNISHER مشرف تاريخ التسجيل: Sep 2008 الدولة: Egypt المشاركات: 1,155 التقييم: 1072	مشكور جداً اخى العزيز الجنرال ع الموضوع وان شاء الله الجميع يستفيد منه تحياتى لك ,,

08-10-2010, 04:33 PM	#8
الجنرال :: عضو مبدع :: تاريخ التسجيل: Jul 2010 المشاركات: 117 التقييم: 1051	هلا بيكم ونورتو الموضوع يعطيكم العافيه

08-13-2010, 09:55 PM	#9
pcabd :: عضو جديد :: تاريخ التسجيل: Jun 2010 المشاركات: 3 التقييم: 50	سوال لو سمحت كيف اعرف الخطأ في اي قالب من قوالب المنتدى لاني شايف ومش عارف وين مكان الخطأ لو سمحتوا مساعدة

08-13-2010, 10:19 PM	#10
pcabd :: عضو جديد :: تاريخ التسجيل: Jun 2010 المشاركات: 3 التقييم: 50	انا بكون شاكر الكم وهي رابط اخطاء المنتدى http://validator.w3.org/check?uri=ht...2F1.1#line-353

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)