في تويتر وعند استعراض التغريدات يظهر في مربع التغريدة في اقصى الجهة اليسرى من الاعلى (للواجهة العربية) قيمة تدل تاريخ نشر التغريدة بصورة اكثر دلالة على الوقت فبدلا من ان نقول 1-1-2014 الساعة 11:20 مساء يكتفي تويتر بكتابة 1د لتشير الى ان التغريدة نشرت قبل دقيقة من الان. كما في الصورة ادناه:

وبنظرة برمجية بسيطة نعتقد ان كلمة 1د قد طبعتها ملفات البرمجة الاساسية ولكن بعد تفحص لثواني نجد ان هذه القيمة تتغير دون حتى تحديث الصفحة ، فبمجرد بقائنا في الصفحة من دون تحديث ومع مرور الوقت سوف نشاهد تغير القيمة 1د الى 2 د .. 10د … 1س وهكذا.

اذا بنظرة بسيطة نجد ان تغيير هذة القيمة يتم عن طريق الجافا سكربت وبعد بحثي في الانترنت عن كيفية تنفيذ هذا الامر وجدت اضافة خاصة بال jquery اسمها jquery-timeago حيث ان هذه الاضافة تقوم بتغيير التاريخ من تاريخ يفهمه الكمبيوتر (تاريخ طويل) الى تاريخ اكثر فهما من قبل الانسان ويعبر عن حالة زمنية، والجميل في الموضوع ان هناك توافق مع اللغة العربية لهذة الاضافة حيث يتوفر ملف التعريب.

لماذا نحتاج لهذه الاضافة عن طريق جافا سكربت؟

في المواقع التي تقوم بتحميل محتوياتها دون الحاجة لتحديث الصفحة والتي يتم من خلالها جلب بيانات وكتابتها في الصفحة مع كتابة تاريخ نشر او تاريخ التحديث او ما شابه فاننا قد نرغب بكتابة التاريخ بصورة اكثر فهما من قبل البشر لتبدوا بصورة اكثر ذكاء وتفاعلا مع المستخدم. فطباعة التاريخ بصورته المتعارفة قد يربك المستخدم مثلا كان نقول 1-1-2014 الساعة 12:10 بتوقيت جرينتش ، فمع ان العبارة صحيحة ولا غبار عليها الا انها اشغلت حيزا كبيرة من التصميم بالاضافة الى انها صعبة الفهم للانسان مقارنة بالعبارة (قبل ساعة) مثلا. وبالتالي تاتي حاجتنا لكتابة مثل هذه التواريخ.
وان قمنا على تمرير هذه الكلمات (قبل ساعة) من خلال البرمجة وتم طباعتها في الصفحة فانها سوف تبقى كما هي دون تحديث بمعنى لو ان المستخدم جلس ساعة في الصفحة سوف تبقى كلمة (قبل ساعة) بجانب المحتوى وهذا كلام غير منطقي حيث يفترض بهذا التاريخ ان يحدث ليصبح (قبل ساعتين)، من هنا تاتي الحاجة للجافا سكربت وتحديدا للاضافة jquery timeago حيث انها تعمل بشكل تلقائي كل دقيقة على تغيير التواريخ المطلوبة في الصفحة الى تاريخ مناسب.

كيفية استخدام الاضافة

طبعا كغيرها من الاضافات فان الاضافة تتوقع وجود دلالات توضح للاضافة تاريخ النشر او تاريخ التحديث الذي سوف تتعامل معه الاضافة وذلك باضافة الوسم title الى ال DIV او ال SPAN الذي سوف يحتوي على التاريخ ، مثلا لو كان لدينا DIV وسوف يحتوي على تاريخ نشر المقال فبالوضع الطبيعي سوف يكون مكتوبا بهذا الشكل

<div id="something">2014-1-1 20:25:59</div>

ولكن حتى نستطيع استخدام الاضافة فانه يجب علينا اضافة الوسم title الى ال DIV اعلاه مع وضع قيمة التاريخ المطلوب بمعيار ISO 8601 وبالتالي يصبح ال DIV بالشكل التالي

<div class="timeago" id="something" title="2014-1-1T20:25:59Z+00:00">2014-1-1</div>

وبالتالي فان القيمة الموجودة بداخل title تعبر عن التاريخ الفعلي للنشر بمعيار ISO 8601 وهي هنا 2014-1-1T20:25:59Z+00:00 اي يوم 1 من شهر 1 لعام 2014 الساعة 8 مساء و 25 دقيقة و 59 ثانية بتوقيت جرينتش. وهنا الاضافة timeago سوف تفهم هذا التاريخ وتترجمه الى تاريخ يفهمه الانسان (تاريخ مختصر) وتطبعه في ال DIV بدلا من التاريخ القصير 1-1-2014 المطبوع اصلا في محتويات DIV. كما ان الاضافة timeago سوف تحول التاريخ بناء على المنطقة الزمنية للمستخدم الحالي بناء على اعدادات جهازه لهذا لا داعي للقلق حيال هذا الامر كل ما عليك هو تزويد الاضافة بالتاريخ مع تحديد المنطقة الزمنية لهذا التاريخ وهي ستتكفل بالباقي.

لمشاهدة مثال حي على استخدام الاضافة راجع الرابط التالي.

تلميحات

للعلم في لغة البرمجة PHP يمكنك استخدام الدالة date في اعادة التاريخ بمعيار ISO_8601 كما يلي:

$ISO_8601_date = date('c',strtotime($mysqldatetime));
//عندما يكون
//$mysqldatetime
//هو وقت من نوع mysql مثلا
//وهكذا

ايضا في كثير من الاعمال التي تتم في jquery لاحظت انه مثلا عند كتابة اي قيم من خلال jquery مثلا كتابة قسم تاتي من خلال اجاكس فانه يحدث مشكلة في التعرف على القيم المكتوبة مثلا لو كان div يحمل id معين وقمنا بكتابته عن طريق الجافا سكربت في document فانه سوف يصعب على jquery الاستدلال عليه عن طريق مناداة ID الخاص به والحل هو استخدام on في jquery ولكن اضافة jquery time ago لا تعاني من هذه المشكلة حيث انني قمت في المثال اعلاه استخدام محاكاة كتابة  نص بداخل ال document من خلال الجافا سكربت وتم تعديل التوقيت الخاص به. ولكن بكل تاكيد يجب عليك ان تنادي الامر

jQuery("div.timeago").timeago();

ليتم تعديل التوقيت في جميع ال DIV التي تحمل كلاس timeago في الصفحة بعد ان تقوم بكتابة اي محتويات في ال document عن طريق الجافا سكربت.

لا تتردد من التواصل معي ان واجهتك اي مشكلة حيال هذا الامر.