أكتب إليكم هذه التدوينة بعد ملاحظتي ..أثناء متابعة بعض المواقع العربية أجد بالفوتر بأسفل xhtml Validated or css Validated أي أنه مطابق للمعايير كـ xhtml,css وطبعا أفرح بهذا الأمر لأنه سيعني أنتشار وعي كبير بين الناس بمدي أهمية مطابقة المعايير ليس لمجرد ركوب الموجة والتقليد وأن الموقع مطابق للمعايير وأنظمة الويب 2.0 …ولكن هذا المعايير ومدي مطابقة موقعك لها ..تستفيد منها بعدة أشياء منها ..
سرعة تصفح الموقع
- التوافقية مع أغلب المتصفحات مثل IE , Firefox, Safari , Google Chrome …etc
- ايضا التوافق مع المعايير يجعل موقعك صديق مع محركات البحث أكتر ..لو اتبعت بعض الأرشادات ..في xhtml
وهذا ينطبق علي موقعك أيا كان نوعه ..منتدي ، مجلة محتوي ، سكربيت ، موقع ثابت أو ببرمجة خاصة .. سيكون سهل تحديثه مستقبلا ..واضافة اي تنسيقات مختلفة ، ولكن ما اره هو بعض اصحات المواقع والمنتديات يضع لوحة تحت أو أيقونه تدل علي أن موقعه مطابق للمعايير وتدخل تفحص تلاقي بلاوي ..مثلا فوق 600 خطأ بـ xhtml, وايضا أخطاء كتير بـ css فلماذا تضع هذه العلامة اذن ..هل لجهل وعدم وعي !!؟ وهذا ما سأوضحه هنا …أو مجرد تقليد وروشنة ونضيف اي ايقونات حلوة يا معلم …تضبط التصميم .. 
كيف تفحص موقع ما ..هناك عدة طرف لفحص الموقع ومدي مطابقته للمعايير سواء كـ xhtml,css …من خلال موقع : http://validator.w3.org/ لفحص xhtml أو موقع http://jigsaw.w3.org/css-validator/ لفحص …css
1- ستذهب إلي الموقع الأول ..الخاص بفحص كود xhtml من هنا ..
2- ستجد الموقع يحتوي علي عدة تبويبات ..هنا
- التبويب الأول ..يمكنك من خلاله فحص الموقع بالعنوان ..مثلا .. www.msn.com أو www.google.com ..أي رابط الموقع أو رابط السكربيت أو المنتدي ..علي حسب www.site.com/vb ، wwww.site.com/blog
- التبويب الثاني : يمكنك من خلاله فحص الموقع من خلال رفع ملف html المراد فحصه ..مثلا تنشي موقع علي جهازك الشخصي ..وتريد فحصه ..من خلال رفعك لملف html إلي الموقع سيقوم بفحصه وإعطاءك النتيجة ..
- التبويب الثالث ..من خلال كتابة الكود مباشرة داخل صندوق نصي …أي فحص مباشرة للكود وهذا غير مستحب لأنك لن تكتب الكود أونلاين علي الموقع ..ولكن أحيانا تريد فحص جزء معين ..من الكود فتنسخه وتلصقه بهذا ..وسيعرض لك النتيجة ..
ومن خلال هذه التبويبات المختلفة تتيح لك ..فحص موقعك ..أما من خلال الرابط للموقع أو من خلال رفع الملف ..أو من خلال الكتابة بشكل مباشرة ..والشائع منها بواسطة الرابط ..ومنها تحصل علي نتيجة موقعك من خلال xhtml هل هو مطابق ام لا ، وليس هذا فحسب بل الموقع يتيح لك ..بعض التحذيرات ..وعلاج الأخطاء ..مثلا عدم قفل وسم معين ، أو غلق وسم قبل مكانه ..أي يوضح لك الأخطاء وعلاجها ..ومن خلال الممارسة ومتابعة الأخطاء ستحصل علي كود نظيف …وتري هذه الصورة ..
من خلال هذا الجزء أستعرضنا فحص كود xhtml …ايضا سنتعلم فحص كود css
- يمكنك فحص كود css ومدي مطابقته للمعايير من خلال هذا الرابط ….
ومن خلال ..زيارتك للموقع ستجد تشابه كبير بينه وبين نفس فحص xhtml من خلال التبويبات الثلاثة …
من خلال هذه التبويبات الثلاثة تستيطع فحص …كود الـ css
1- التبويب الأول بواسطة العنوان …مثلا
من خلال هذا التبويب يمكنك كتابة مسار ملف الـ css مثلا : http://www.egydes.com/style.css …وهذا هو مسار ملف السي اس اس بموقعك او اي موقع أخر ..اذن لو موقع اخر كيف ستعرف مسار ملف الـ سي اس اس css …أو وضع رابط الموقع مباشرة إذا كان ملف الcss يتواجد داخل كود html …أي كود Inline or Embded أم في حالة ملف خارجي فينصح وضع الرابط ..
من خلال ..رؤية مصدر الصفحة أو View Source ..تعرض لك كود الصفحة كاملاً كـ xhtml ويمكنك بالتدقيق ورؤية المحتوي بين تاجي معرفة مسار الـ css للموقع ..مثلا بالصورة بالأعلي ..نجد مسار ملف css هو style/style.css اذن المسار الكامل هوه www.sitename.com/style/style.css وتستبدل sitename بإسم الموقع ..
2- التبويب الثاني ..من خلال رفع ملف css وهو نفس طريقة ..html اي ترفع ملف الcss بإمتداد .css في المربع الذي يظهر لك بعد تحديد مكانة علي قرصك الصلب من خلال Browse
3- التبويب الثالث والأخير ..ايضا نفس طريقة html يمكنك كتابة كود الcss مباشرة وفحصه ..ومعرفة النتيجة
ومن خلال هذه الطرق الثلاث يمكنك فحص كود css ومعرفة هل مطابق أم لا وكذلك معرفة عدد الأخطاء ..وتزكيات الموقع w3c لحلها ..وتتبع الأخطاء حتي تري شاشة الفحص وأن موقع سليم ..
* مثال ..للنتيجة ونري أن ملف الcss به أخطاء وعددها 9 ونري تزكيات الموقع لحلها ..وأيضا أرقام السطور ..التي بها أخطاء لتسهيل الأمر
ومن خلال متابعة كل خطأ ستحصل علي كود نظيف وتري هذه الشاشة
وفي النهاية ..ستجد أن موقعك أو رابط اي موقع تريد فحصه …ستجد النتيجة أمامك ..سواء xhtml,css ..سواء مطابق ، أم غير مطابق ..وستعرف عدد الأخطاء وأماكنها وتزكيات الموقع لعلاجها …
ليست هناك تعليقات :
إرسال تعليق