القسم ->

المجموعة: html

نشر في الإثنين, 14 آذار 2011 03:59

كتب بواسطة أيمن السيد محمود

الزيارات: 189

تقييم المستخدم

لماذا صلاحية صفحتك دائما ما تكون invalid

W3C ليست متسامحة فى أى حال قمت باختبار صلاحية صفحتك من خلالها. فهى تُظهر لك أخطاء التكويد التى وقعت فيها أثناء بنائك صفحتك. قد يبدوا لك الأمر غير مجدي إذا اكتشفت أن هناك بعض الأخطاء فى صفحتك ولكنها تظهر بشكل طبيعي فى متصفحك اللذى تقوم بإجراء تجاربك عليه مثل انترنت إكسبلورر أو فاير فوكس .. ولكن اليوم أود أن أنصحك بأن تعتمد دائما على متابعة اختبار صفحتك من خلال W3C …

فالأخطاء اللتى اكتشفها الاختبار تتنوع تقنية تمييزها على أنها أخطاء لوجود اختلافات جذرية فى بنية برمجة متصفحات الانترنت المتعددة .. فقد يرى متصفح تاج غير مغلق وقد لا يراه آخر أو قد يراه ولا يعتد به ويمر عليه مرور الكرام وهذا يأتي فى صالحك أما المتصفح اللذى يكتشفه ولا يتناساه قد يضر بأسلوب عرض صفحتك ضرراً بالغاً فتظهر الصفحة متقطعة تماما أو على الأقل قد تظهر على غير مرادك.. وهكذا

بداية هناك أمور يجب مراعاتها قبل اتخاذ خطوة التعديل على الأخطاء بعد اكتشافها
- إذا كانت نتيجة الاختبار قد اكتشفت مثلا 20 خطأ و 80 تحذير فيجب هنا أن تقلق على كمية الأخطاء أكثر من التحذيرات
- لا تقلق أيضا من كمية الأخطاء إذا كانت كبيرة جدا مثلا 120 خطأ ولا تحاول أن تصلح كل الأخطاء دفعة واحدة فقد يتوقف عدد كبير جدا من هذه الأخطاء على تاج لم يغلق فإذا قمت بإغلاقه وقمت بإعادة الاختبار ستجد أن معظم الأخطاء قد تلاشت وهذا لان مجرد تاج لم يغلق تقع بقية الاكواد فى بئر من عدم الاتزان. نأتى الآن لتحجيم أخطاء التكويد كى لا تقع فيها، و ماهى الأخطاء الشائعة فى تكويد صفحات الانترنت

w3c

وجود وسم DIV لم يغلق

من أكثر الأخطاء شيوعا ويأتي فى المركز الأول لعدم صلاحية أي صفحة من صفحات الانترنت وهو وجود وسم div غير مغلق وهو سبب رئيسي لاختلاف التصميم فى المتصفحات ..
أنصحك لحل هذه المشكلة استخدام محرر متميز وتعديل إعداداته بحيث يرى أى وسم غير مغلق ويخبرك به مثل الدريم ويفر – وإذا كنت تعمل على النوت باد ++ فأنصحك باستخدام الاستايل الأسمر الغامق Deep Black وتستطيع أن تقوم باختياره من خلال شريط القوائم تبويب sittings ثم style configurator واختر من select theme الاستايل الأسمر Deep Black
سوف يعمل هذا الثيم بتظليل بداية الوسم ونهايته بحيث أن لم يجد للوسم نهايه لن يتم تظليله
واخترت هذا اللون بالتحديد لأنه مميز فى رؤية الكود وتفريقه وهين على العين أن تجد بسرعة الألوان المختلفة الأخرى

وجود علامة أو وسم embed شاذ

معظم المتصفحات مثل انترنت إكسبلورر ونت سكاب تتعرف على أنواع الخطوط الشاذة أو الفريدة الغير مصرح بها للعرض من خلال المتصفح على أنها غير قياسيه وذلك عادة ما يكون فى تطبيقات الفلاش خاصة إذا ما اخترت نوعية خط من خطوط الويندوز أو غيره غير مصرح بعرضها على الانترنت وبالتالى للأسف فان W3C لن تدع هذا النوع من الوسوم يمر بسلام خلال الاختبار حتى لو كانت معظم المواقع فى العالم تستخدمها .
أنصحك إذا كنت تريد صلاحية عرض صفحتك بشكل سليم فى كل المستعرضات DOCTYPE validation أن تتخلص من تضمين ‘embed’ فى صفحاتك
أما إذا كنت تريد تضمين ملفات ميديا أو فلاش فى صفحتك ولابد فأنصحك بأن تجرب تقنية Flash Satay method – بكل بساطه هذا هو اسم التقنية المسموح بها فى صفحتك وتأتى بنتائج ايجابيه فى حالة اختبار صفحتك
والمطلوب هو أن تضع ملف الميديا أو الفلاش داخل هذا الكود

    <object width="200" height="100" type="application/x-shockwave-flash
    data=" c="" swf="" path="movie.swf"" name="movie" value="c.swf?path=movie.swf" img="" alt="" data="noflash.gif">
    

    </object>

فقط سوف يطلب هذا الكود من المستعرض إذا لم يكن قادرا على تشغيل ملف الفلاش shockwave-flash أن يستخدم البديل الثانى وهى الصورة img والتى يمكنك أن تقوم بعمل تصميم مناسب لها ببيانات طلب التحديث أو يمكنك أن تضع رابطا عليها للذهاب مباشرة لموقع Adobe وطلب تنصيب برنامج مشغل الفلاش
ولا أجد حرجا فى أن تطلب من زوارك تنصيب برنامج مشغل الفلاش

نوع ملف DOCTYPE خاطئ أو عدم وجود نوعية الملف فى رأس الصفحة.

خطأ آخر وهو عدم التصريح بنوعية ملفك أو صفحتك للمستعرض أو إعطاؤه بيانات DOCTYPE خاطئة غير صحيحة فى رأس الصفحة.. (فى التقنية الحديثة للـ HTML5 تم الغاء هذا النوع من التعريف بنوعية ملفك)
عدم وجود بيانات نوعية ملفك وتقديمه للمتصفح يشعره بهزة ثقة حيث أنه يحاول أن يفهم بنية الصفحة ولكنه فى معظم الأحوال يفشل ويتم بعثرة محتويات صفحتك عشوائيا كردّة فعل من المتصفح
أنصحك بوضعه فى رأس صفحاتك حيث يصبح شكل اى صفحه لديك كالتالى

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>عنوان الصفحة</title>
</head>
 
<body>
محتوى الصفحة
</body>
 
</html>

الزائدة المائلة ” / “

بعض الأخطاء الصريحة والواضحة هى عدم إنهاء بعض الوسوم بهذه الزائدة المائلة .. مثال

       <img src="/blog/" alt="" />

والصحيح

       <img src="/blog/" alt="" />

محاذاة النص Align مع وسم من الوسوم مثل

إذا كنت تستخدم صلاحية نوع ملف transitional فى رأس صفحتك فلا مانع من استخدام محاذاة النصوص أو ما بداخل الوسوم أو الوسم نفسه … أما إذا كنت تستخدم أى نوع آخر غير transitional فأنصحك بتفادي أية محاذاة داخل صفحتك واستبدل محاذاة النصوص بتوسيطه مثلا من خلال الأمر text-align:center أو محاذاته لليمين أو اليسار وذلك من خلال ملفات الأنماط الانسايبيه CSS
فقط قم بإعطاء الوسم id أو class لتتمكن من التحكم فيه من خلال ال css

أكواد الجافا سكربت javascript

أيضا هنا إذا كنت تستخدم نوع ملف transitional فالأمر عادى أما إذا كنت تستخدم نوعيات أخرى لملفاتك فلابد أن تقوم بتصنيف CDATA بالعلامتين /* */ كالتالى

<script type="text/javascript">
 
/* <![CDATA[ */
 
// أكواد الجافا سكربت javascript
 
};
 
/* ]]> */
 
</script>

لاتنسى أن تعطى الصور وسم بديل ” alt “

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

            <img src="/blog/رابط الصورة" alt="النص البديل" />

علامة المعيّة &

معظم مصممي صفحات الانترنت يستخدمون حرف المعية & فمثلا 3dmax & aftereffect is the power ، أنصحك إذا كنت تريد لاختبار صفحتك أن يمر بنجاح أن تستخدم الكود الصحيح لـ & وذلك لكى تنبه المتصفح أن يفرق بين علامة & التى هى بمعنى and وبين علامة & التى تستخدم فى لغة php مثل هذه الجملة

( trigger_error("Restricted access", E_USER_ERROR) && exit() );

الخطأ