استخدام الـ Microformats في موقعك

إن فكرة وجود الـMicroformats فكرة بسيطة وجميلة، تكمن في أن نقوم باستخدام وسوم ومواصفات ال XHTML، HTML الموجودة حاليا بطريقة تمكننا من وضع وصف لبعض البيانات الهامة، بدون اللجوء إلى وسوم جديدة،. ولعل الفكرة غريبة بعض الشيء في البداية، ولكن حين النظر إلى فائدة توجيه بعض البيانات ستجد العديد من المزايا، وها هو تفصيل هذه التقنية.

إن البيانات الموجهة (حسبما أرى فإنها أدق تعريب للـ Microformats )، مفيدة إذا أردنا أن نحدد بعض البيانات في الصفحة لكي يفهمها المتصفح ومحرك البحث مثل : العنوان ، التقويم، الإحداثيات الجغرافية، بيانات الاتصال بشخص… إلخ. وبعد تحديد هذه البيانات يمكن لمحرك البحث أو أي برنامج مخصص أن يقوم باستخراجها من الصفحة بسهولة.
إن توصيف البيانات بهذه الطريقة لا تحتاج للغة جديدة، بل إن هذا الأسلوب مفترض منذ بضع سنين، إلا أن المشكلة الوحيدة التي واجهتني سابقا هو عدم وجود متصفح يفهمها، ولكن حاليا إنترنت إكسبلورر 8 ، وفايرفوكس 3 يدعمان هذه الأسلوب بالكامل، وهنالك الكثير  من التوجيهات أتوقع قد رآها الجميع مثل rel=nofollow.

تستخدم البيانات الموجهة 3 مواصفات في الوسوم هامة وهي:
class
– rel
– rev
هنالك معايير خاصة ومسميات معينة يتوجب علينا استخدامها عند توجيه البيانات حسب بنود معينة، فمثلا البيانات المتعلقة بالاحداثيات الجغرافية لها أسماء هذه  الclass  في الوسوم (geo, latitude , longitude)، و لتوجيه بيانات خاصة ببطاقة اتصال يمكن استخدام  الclass الخاصة vcard وهذا مثال على ذلك

لنفرض أنه لدينا البيانات التالية

Code

<div>
    <div>خليل سليم</div>
    <div>شركة مطورو دوت نت</div>
    <div>00970599331236</div>
    <a href="http://developers.ps">http://developers.ps</a>
</div>

هذه بيانات وصف بشخص معين يعمل في شركة وله رقم هاتف ورابط الشركة
يمكن توجيهها بهذه الطريقة

Code

<div class="vcard">
    <div class="fn">خليل سليم</div>
    <div class="org">شركة مطورو دوت نت</div>
    <div class="tel">00970599331236</div>
    <a class="url" href="http://developers.ps">http://developers.ps</a>
</div>

إن هذه الفئات يمكن بناءها عبر ال css بالشكل الذي تريده، ولكن يجب أن يكون اسمها بهذا الترتيب.
حيث fn اختصار لـformatted name وorg لـorganisation وtel لـtelephone وurl لرابط الموقع

هذا مثال لوصف إحداثيات جغرافية وهي إحداثيات مدينة القدس المباركة

Code

<span class="geo">
    <span class="latitude">31° 47′ North </span>
    <span class="longitude">35° 13′ East</span>
</span>

وهذه  قائمة ببعض التوجيهات

Code

– hAtom: لخلاصات المواقع
– hCalendar:  للأحداث
– hCard: لبيانات الاتصال وتتضمن:
    – adr: للعنوان
    – geo: للإخداثيات الجغرافية(latitude, longitude)
– hNews: لمحتوى الأخبار
– hProduct: للمنتجات
– hResume: للسير الذاتية
– hReview: للمراجعات
– hTrademark: لحقوق الملكية
– rel-directory: للمجلدات الموزعة
– rel-enclosure: للوسائط المتعددة المتضمة في موقعك
– rel-license: معايير الترخيص وحقوق الطبع
– rel-nofollow: لمنع عناكب المحركات من تتبع زيارة الموقع وهي مفيدة مثلا لسبام المدونات
– rel-tag: for decentralized tagging -Folksonomy
– xFolk: for tagged links
– XHTML Friends Network (XFN): لمواقع العلاقات الاجتماعية كالفيس بوك وغيرها
– XOXO: لقوائم الملاحظات
– hAudio: لملفات الصوت المتضمنة في موقعك
– hRecipe
– citation: لمراحع المدن
– currency: لكميات النقود والعملات
– figure: لإضافة عناوين للصور
– geo extensions: لإحداثيات جغرافية خاصة مثل إحداثيات على القمر والمريخ والمشتري
– species: لفصائل الكائنات الحية
– measure: للكميات القياسية والكميات الفيزيائية

إن محركات البحث الكبيرة تخصص في خوارزميتها فحصا دقيقا لهذه التوجيهات وتخزنها لديها، كما أن المتصفحات الكبرى تخصص بعض الملحقات مثل الـOomph في الإكسبلورر 8 وOperator  في الفايرفوكس، وإذا كنت تستخدم Yahoo! Query Language ستجد العديد من الدوال لاستخراج هذه البيانات الموجهة، بل حتى خرائط جوجل يمكنها أن تستفيد من الإحداثيات الجغرافية في الموقع

هذه هي البيانات الموجهة باختصار وإن شاء الله لي عودة في مقالات عديدة حولها

وفق الله الجميع

About the author

خليل سليم

Leave a Comment

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.