[درس مفصل] حل خطأ الصورة وتوافقه مع W3c والمقاييس العالمية

[loulou ange]

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

أولا أنت سترى الصفحة حسب متصفحك وكما تعلم فكل منا له متصفح خاص به
فمثلا من يستخدم Explorer 6 سيرى الصفحة بطريقة و الذي يستخدم Explorer 8 سيرى



الصفحة على شكل آخر ومن يستخدم فاير فوكس مثلا سيراها على شاكلة أخرى وكذلك متصفح كروم.

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


على سبيل المثال

اردنا عمل تصميم يحمل 100 صورة من قوائم وقوالب وغيرها سنحصد اقل شيء 100 خطأ !

مثال اردنا وضع هذه الصورة .... http://bent-palestine.com/logo.gif

http://bent-palestine.com/Programs/Test-Web/alt.html

لنشاهد الاختبار مع المقياس العالمي W3c

النتيجة => http://validator.w3.org/check?uri=ht...idator%2F1.654 (http://validator.w3.org/check?uri=http%3A%2F%2Fbent-palestine.com%2FPrograms%2FTest-Web%2Falt.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654)

لقد حصلنا على خطأ واحد وهو خطأ الصورة

مثال على وضع الصورة بالطريقة الصحيحة
http://bent-palestine.com/Programs/Test-Web/alt=.html

نتيجة الاختبار مع المقياس العالمي w3c

النتيجة => http://validator.w3.org/check?uri=ht...idator%2F1.654 (http://validator.w3.org/check?uri=http%3A%2F%2Fbent-palestine.com%2FPrograms%2FTest-Web%2Falt%3D.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654)


لا يوجد أخطاء! فهذه الصفحة تستحق وسام http://validator.w3.org/images/valid_icons/valid-xhtml10-blue


الهدف من هذا الدرس مفصل البسيط هو استخدام
رمز PHP:

<code style="white-space:nowrap"> <code> alt=""
</code> </code>

قبل أي صورة في أي تصميم كي يفهمها محرك البحث Search Engine و جميع المتصفحات.

الطريقة الخاطئـــة
رمز PHP:

<code style="white-space:nowrap"> <code> <img src="رابط الصورة" /></p>
</code> </code>

الطريقة الصحيحة
رمز PHP:

<code style="white-space:nowrap"> <code> <img alt="" src="رابط الصورة" /></p>
</code> </code>

الهدق من هذا الدرس مفصل التقليل من الأخطاء واستخدام وسم
رمز PHP:

<code style="white-space:nowrap"> <code> alt=""
</code> </code>

قبل أي صورة في أي تصميم. لتقليل الأخطاء ولتوافق الصفحات مع المقاييس العالمية
+ فهم محركات البحث لهذه الصور من خلال الوسم alt قبل الصورة




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

http://validator.w3.org/check?uri=ht...idator%2F1.654 (http://validator.w3.org/check?uri=http%3A%2F%2Fbent-palestine.com%2Fvb%2Fshowthread.php%3Ft%3D5&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654)

جميع صفحات المواضيع ايضا خالية من الأخطاء

المصدر http://bent-palestine.com/vb/showthread.php?t=5

تحياتي




https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©