مدونة مبدع

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

يوفر الووردبريس عبر الوثائق المتعلقة به صفحة خاصة بترجمة البرنامج وأدواته، وسأعرض خلال هذا الموضوع طريقة ترجمة أدوات الووردبريس بأكثر من لغة حسب تجربتي مع إضافة ePermissions التي أنشأتها قبل أيام.

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

مطوري الووردبريس إختاروا أن يستخدموا إطار GNU gettext والذي يستخدم على نحو واسع في ترجمة برامج مفتوحة المصدر. ملفات gettext قسمة إلى ثلاثة أنواع وهي تمثل خطوات الترجمة أيضاً ويمكن أن تكون منشئة مسبقاً و مستخدمة في أدوات الترجمة المتاحة وهي:

• POT: إختصار لـ Portable Object Template وهي الخطوة الأولى من عملية الترجمة، يتم البحث في الشفرة المصدرية Source Code الخاصة بأداة الووردبريس المراد ترجمتها وإلتقاط أي رسالة ممررة بإستخدام دالة __() و _e().
• PO: إختصار لـ Portable Object الخطوة الثانية في عملية الترجمة يقوم البرنامج أو التقنية المستخدمة والتي تتعامل مع إطار GNU gettext بترجمة جميع الرسائل من ملف POT إلى اللغة المستهدفة وحفظ كل من اللغة الأصلية واللغة المراد إضافتها (المقترحة) في ملف واحد بصيغة PO.
• MO: إختصار لـ Machine Object أما الخطوة الأخيرة في عملية الترجمة هي أن يتم إستخدام ملف PO (الملف الذي ستضيف فيه المفردات المترجمة) في عرضه إلى المرحلة النهائية لرؤية نتيجة الترجمة على أداة الووردبريس ولا يكون ذلك إلا بتحويله إلى ملف بصيغة MO وهي الصيغة التي نستخدمها في عرض المفردات بشكل مباشر على الصفحة.

البرامج المستخدمة في التعامل مع ملفات gettext

هناك عدة برامج تستخدم للتعامل مع أنواع ملفات gettext التي كتبتها في الأعلى، كمثال يمكن أيضاً التعامل مع ملف PO الخاص باللغة العربية لبرنامج الووردبريس للمساهمة في تعريب البرنامج في النسخ القادمة إذا إحتاج الأمر إلى ذلك بالتعاون مع موقع عرب ووردبريس، برامج مثل:

• Launchpad
• Pootle
• poEdit (البرنامج الذي أستخدمه)
• KBabel
• GNU Gettext (أداة الرسمية للإطار وتحتوي على أداة سطر الأوامر لإنشاء ملفات POT و PO و MO)

العمل على الترجمة أثناء كتابة إضافة/قالب ووردبريس

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

في البداية، يجب الإعتماد على إسم معين يسمى النطاق أو domain في ترجمة الكلمات لتكون مرتبطة بملف أو ملفات الترجمة وإستدعائها إلى الأداة التي تريد ترجمتها، لتحميل ملفات الترجمة يجب تعريف مسارهم عبر أحد هذه الدوال التي توفرها الووردبريس:

• load_plugin_textdomain($domain,$path): يستخدم في تحميل النصوص إلى الملف إذا كنت تعمل على إضافة ووردبريس.
• load_theme_textdomain($domain,$path): يستخدم في تحميل النصوص إلى ملفات القالب إذا كنت تعمل على قالب ووردبريس.

لدينا متغيرين في كل دالة بحيث يكون المتغير $domain هو الإسم المعتمد في إستدعاء كافة النصوص أو المفردات المترجمة إلى الملف والآخر وهو المتغير $path وفيه نكتب عنوان مسار ملفات الترجمة. الدالتين السابقتين تحوي ثلاثة متغيرات ولكن نستطيع أن نكتفي بإثنين.

كما أن هناك دوال أخرى مثل load_textdomain و load_default_textdomain، لكني لم أجربها من قبل فالدوال الموجودة في القائمة السابقة خاصة بالإضافات والقوالب فقط.

أيضاً، الووردبريس يوفر دالتين في تحديد النص المراد ترجمته سواءاً للكلمات أو الجمل، الأولى هي دالة ()__ وتستخدم للنصوص التي يتم تمريرها عن طريق المتغيرات وليست للعرض مباشرةً، الثانية هي دالة ()e_ لكتابة النصوص إلى الصفحة مباشرةً، لشرح الدوال أكثر:

• __($message, $domain): يمكن تمرير الرسالة عبر أي متغير لإستخدامها لاحقاً، ويتم إستخدام دالة echo في لغة php لعرضها.
• _e($message, $domain): يتم كتابة الرسالة دون إستخدام دالة echo، تعرض على الصفحة مباشرةً.

بالنسبة لمتغيرات الدوال السابقة لدينا متغير $message وهي المفردات أو النصوص التي تريد أن تترجمها سواء كانت جملة أو كلمة، أما متغير $domain فهو إسم النطاق الذي تم كتابته عن طريق دالة التحميل الخاصة بالترجمة (شرحتها قبل القائمة السابقة مثل دالة load_plugin_textdomain و load_theme_textdomain).

بعد تحديد النصوص بإستخدام الدوال موجودة في القائمة السابقة، وتحديد مسار ملفات، تأكد أن ملف الترجمة الذي ستصدره يبدأ بإسم النطاق أي يكون إسم الملف في البداية هو إسم النطاق، فإذا كان إسم النطاق abc وإستخدمت دالة مثل load_plugin_textdomain كما توضح الشفرة التالية:

<?php
load_plugin_textdomain('abc','/wp-content/plugins/ePermissions/lang/');
?>

فإن إسم الملف يجب أن يكون بهذه الطريقة

abc_x.mo

// ملف خاص باللغة الفرنسية:
abc_fr.mo

ولإستعمال إسم النطاق أثناء برمجة الإضافة أو تصميم القالب سيكون بهذا الشكل:

// _e() في حال إستخدام دالة
<span><?php _e('وصف خاص لشيء معين', 'abc'); ?></span>

// __() في حال إستخدام دالة
$description = __('وصف خاص لشيء معين','abc');

إستخدام برنامج poEdit لإنشاء ملف الترجمة

سأستخدم برنامج poEdit لشرح الخطوة الأخيرة من الترجمة وهي إنشاء ملفات gettext والوصول إلى الملف النهائي بصيغة MO الذي سنستخدمه في عرض المفردات على الصفحة مباشرةً. وبرنامج poEdit هو البرنامج الذي أستخدمه والمفضل لدي.

لنفرض أنك أكملت إضافة المفردات أو النصوص إلى دالة __() و _e() في ملف الإضافة أو ملفات القالب والإعتماد على إسم معين مرجعي يشير إلى الترجمة الخاصة بالأداة، في البداية يجب أن يكون إسم الملف الذي ستصدره إلى صيغة MO يبدأ بالإسم الذي إعتمدته في دالة load_plugin_textdomain لترجمة إضافة ووردبريس أو دالة load_theme_textdomain لترجمة إضافة قالب ووردبريس (ذكرت هذه النقطة سابقاً).

عند البدأ بعمل ترجمة جديدة في البرنامج، ننشيء قائمة مفردات جديدة (عن طريق File->New Catalog)، ستظهر نافذة جديدة بثلاثة ألسنة، اللسان الاول حول الإضافة أو القالب الذي تريده ترجمته (معلومات عامة ليست مهمة) مثل ما توضح الصورة:

في الصورة السابقة يفضل أن تختار  اللغة التي تريد إضافتها إلى أداة الووردبريس، من خلال تعبئة النموذج الموجود على الصورة السابقة أريد إضافة ملف خاص باللغة العربية.

نأتي إلى الخطوة الثانية وهي تحديد مسار الملفات الأداة (ملفات القوالب أو ملف الإضافة)، من خلال إضافة ePermissions أنشأت مجلد بإسم lang ووضعت فيه ملف اللغة وبذلك سيكون ملف PHP الخاص بالإضافة خارج المجلد.

إذا كان الملف المراد ترجمته خارج المجلد نستخدم إشارة النقطتين ( .. ) أما إذا كان بجانب ملف اللغة فنكتفي بنقطة واحدة ( . )، الصورة التالية هي الأخيرة لإعداد الملف الجديد وبها اللسان الأخير Keywords حيث يجب تحديد الكلمات التي مرّرت عليها المفردات المراد ترجمتها وهي دالة _e() و دالة __()، كما توضح الصورة التالية:

بعد ذلك تكون إنتهيت من إنشاء الملف وسيخبرك عن مكان الملف الذي ستضعه فيه إختر المكان الذي حددته في لسان Paths وفور حفظ الملف سيتم إستدعاء كافة المفردات والجمل أو النصوص إلى البرنامج لترجمتها، هذا مثال على قائمة المفردات والجمل من إضافة ePermissions قبل تعريبها:

بعد التعريب تقوم بتحديث الملف ويتم تصديره مباشرة في نفس مسار الملف الحالي PO إلى ملف بصيغة MO وتكون رؤية الترجمة جاهزة في صفحة الإضافة أو صفحات القوالب عند تصفح المدونة باللغة التي إخترتها، صورة بعد ترجمة جميع الكلمات خلال عملي بإضافة ePermissions:

إستخدم القائمة العليا في البرنامج لإجراء التحديثات وتأكيد ترجمة المفردات دائماً فهي أسهل طريقة للوصول إلى وظائف البرنامج، وصف سريع للقائمة العليا الخاصة ببرنامج poEdit:

بهذا أكون إنتهيت من شرح البرنامج، تبقى لنا جزئية بسيطة جداً وهي في حال وجود نص تريد ترجمته ولكن يحتوي على متغير PHP (أي أنك أضفت شفرة البرمجة إلى النص الذي تريد ترجمته) إستخدم دالة مثل printf في فصل المتغير عن النص، مثلاً هذا إستخدام خاطيء لترجمة الكلمات وبإستخدام دالة __() في ترجمة عنوان صفحة حذف التصريح:

<h2><?php echo __('Do you want delete (' . $permission_name . ') permission?','editors_permissions') ?></h2>

نستخدم دالة printf في كتابة النص وتحديد مكان المتغير وهي الإشارة %s لإستبدالها لاحقاً بالمتغير $permission_name كما توضح الشفرة التالية:

<h2><?php printf(__('Do you want delete (%s) permission?','editors_permissions'), $permission_name); ?></h2>

وبهذه الطريقة تستطيع ترجمة أداة الووردبريس بأكثر من لغة، ومن الجميل أن يكون لديك عدة لغات إذا كانت إضافتك قوية أو قالبك جميل وإحترافي فهذا يجذب مستخدمين يتحدثون بمختلف لغات العالم كما ذكرت، أتمنى أن يكون قد أفادكم الدرس .

تحدثت في الموضوع سابق حول توافق متصفحات الويب بإستخدام JQuery، وعن إستخدام خاصية browser في تحديد متصفح الويب الذي يستعمله المستخدم أو تحديد المحرك الخاص بمتصفح الويب، وأنا أفضل إستخدامه في حالات إختلاف بين متصفحات تدعم المعايير القياسية مثل إختلاف بسيط جداً بين محرك Webkit و Mozilla/Gecho أما عن الإكسبلورر يمكن تحديده إما عن طريق الخاصية التي سأشرحها اليوم أو بطرق أخرى مثل التعليقات الشرطية Conditional comment.

الجزء الثاني من الموضوع سيتحدث عن إستخدام كائن support في توافق متصفحات الويب بتحديد دعم المتصفحات لخصائص CSS و DOM، كما أن موقع jQuery الرسمي يوصي بإستخدامها بدلاً من خاصية browser، من ناحيتي أرى الأخيرة أفضل وأسهل في التحديد وستكون موجودة في النسخ القادمة لمكتبة jQuery.

• مثال على الدرس
• تحميل المرفقات

أما كائن support فهي جديدة وتم إضافتها في نسخة 1.3 من مكتبة jQuery، وتستخدم في تطوير إضافات وبنية jQuery.

كائن Support

يحتوي الكائن Support على عدد من الخصائص، تفيد في تحديد ما إن كان المتصفح يدعمها أم لا، ويكتب الكائن Support في مكبتة jQuery بهذا الشكل:

$.support

أما عن الخصائص التي يوفر الكائن في متعلقة بخصائص CSS وخصائص DOM، وترجع قيمة true في حال دعم المتصفح الخاصية المستخدمة في الكائن، قائمة الخصائص هي:

• boxModel: متعلقة بدعم المتصفح لنموذج W3C CSS Box Model، تساوي true إذا كانت الصفحة تظهر خصائص CSS المكونة من هذا النموذج. (متصفح الإكسبلورر 6 و 7 لا يدعمون هذا النموذج) – (خصائص CSS Box Model هي margin و padding و border والخصائص المتعلقة بها مثل margin-left,margin-right, .. وغيرها من خصائص Box Model)
• cssFloat: متعلقة بخاصية float في تقنية CSS، بحيث تساوي true إذا كان المتصفح يدعم كتابة خاصية style.cssFloat ضمن شفرة Javascript. (لا يدعم متصفح الإكسبلورر هذه الخاصية، ينصح بإستخدام styleFloat بدلاً من منها)
• hrefNormalized: تساوي true إذا كانت طريقة getAttribute في Javascript يمكن أن تسترجع خاصية href الخاصة بعنصر HTML. (ليست مدعومة في متصفح الإكسبلورر)
• htmlSerialize: تساوي true إذا كان المتصفح قادر على إدخال سلسلة من عنصر <link> بإستخدام خاصية innerHTML ضمن شفرة Javascript. ( ليست مدعومة في متصفح الإكسبلورر)
• leadingWhitespace: تساوي true في حال كان المتصفح يسمح بالمحافظة على الفرغات أثناء الكتابة بخاصية innerHTML. (ليست مدعومة في متصفح الإكسبلورر 6 إلى 8 )
• noCloneEvent: تساوي true إذا كانت عناصر DOM منسوخة بدون أن يتم نسخ الاحداث أيضاً. (ليست مدعومة في متصفح الإكسبلورر)
• objectAll: تساوي true إذا كانت الخاصية getElementsByTagName ترجع كافة عناصر الوسم المحدد التابعة للعنصر الحالي. (ليست مدعومة في متصفح الإكسبلورر 7 و 8 )
• opacity: تساوي true إذا المتصفح الحالي يستطيع تفسير خاصية opacity الموجودة في CSS. (ليست مدعومة في متصفح الإكسبلورر، يتم إستخدام المرشح Filter بدلاً من خاصية opacity)
• scriptEval: تساوي true إذا كان إدخال النص بواسطة طرق المعالجة في DOM مثل appendChild و createTextNode ممكناً. (ليست مدعومة في متصفح الإكسبلورر)
• style: تساوي true إذا تم إسترجاع خاصية style في أي وسم من أوسمة HTML بواسطة getAttribute ( مثل getAttribute(’style’)) ). (ليست مدعومة في متصفح الإكسبلورر، ويتم إستخدام cssText بدلاً من style)
• tbody: تساوي true إذا كان الوسم table يمكن أن يبقى بدون وجود الوسم tbody. (ليست مدعومة في متصفح الإكسبلورر، حيث يتم إستخدام tbody لإبقاء الجدول)

مثال عملي على كائن support

هذا مثال بسيط على إستخدام كائن support و سأعطي مثال على خاصية cssFloat فهي غير مدعومة في متصفح الإكسبلورر (جميع الإصدارات لا تدعم هذه الخاصية حالياً) ويتم إستخدام خاصية styleFloat بدلاً منها، نضع عنصرين واحد في اليمين والثاني في اليسار وسنستعمل خاصية float فيما بعد لتحديد الجهة، هذه شفرة HTML:

<div id="content">
    <div id="right">
        <p>Right Side</p>
        <span>float: right;</span>
    </div>
    <div id="left">
        <p>Left Side</p>
        <span>float: left;</span>
    </div>
</div>

أما عن إستخدام مكتبة JQuery والتي سنتأكد من خلالها عن دعم المتصفح لخاصية cssFloat سأضيف هذه الخاصية إلى كل من الصنف right# و left# وتحديد قيمة float لكل منهم في هذه الشفرة:

$(function(){
    var right = $('#right')[0];
    var left = $('#left')[0];

    if($.support.cssFloat) {
        right.style.cssFloat = 'right';
        left.style.cssFloat = 'left';
    } else {
        right.style.styleFloat = 'right';
        left.style.styleFloat = 'left';
    }
});

خلاصة الشفرة أنه إذا كان المتصفح يدعم خاصية cssFloat يتم تطبيقها بشكل مباشر على عناصر HTML، غير ذلك يتم إستخدام styleFloat في تحديد قيمة float لكل جهة، وهنا إشارة إلى متصفح الإكسبلورر أنه لا يدعم خاصية cssFloat فإن لم يتم إستخدام styleFloat لن يتمكن مستخدمي الإكسبلورر من رؤية العنصرين معاً أحدهم في الجهة اليمنى والآخر في الجهة اليسرى، الشكل النهائي للمثال:

ملاحظات حول كائن support

نتيجة إستخدام هذا الكائن ستشير إلى أن متصفح الإكسبلورر لا يدعم الخصائص المذكورة، ولكن وجود إختلافات بسيطة بين المتصفحات التي تدعم المعايير القياسية وخصائص CSS مثل خصائص CSS3 الجديدة يمكن حلها بإستخدام خاصية browser. لقلة الخصائص التي يوفرها هذا الكائن، هناك مكتبة صغيرة وهي مكتبة Modernizr تدعم عدة خصائص للكشف عن دعم المتصفحات لخصائص CSS3 و HTML5.

لماذا يوصي موقع jQuery بإستخدام هذا الكائن بدلاً من خاصية browser؟ أعتقد أنه يريد من المطورين الإعتماد على الكشف عن المتصفح للتأكد من دعمه لمثل هذه الخصائص سواء كان متصفح Opera, Safari, Firefox أو Internet Explorer أو غيره لأن مع ظهور إصدار جديد ومتصفح جديد إحتمال أن يتم إضافة علم flag جديد لخاصية browser مثل علم webkit في الإصدار 1.4 من مكتبة jQuery وهو إشارة إلى محرك webkit لتحديد متصفح مثل Safari و Chrome.

• مثال على الدرس
• تحميل المرفقات

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

في هذا الموضوع سأتحدث عن كيفية عمل التوافق مع متصفحات الويب بإستخدام مكتبة jQuery سواء كان في خصائص CSS أو التأكد من تحديث إصدار المتصفح أو أي شيء آخر، لدينا خاصيتين في هذه المكتبة وسنشرح كل واحدة منها.

• مثال على الدرس
• تحميل المرفقات

.. أكمل قراءة بقية الموضوع »

هذا هو الموضوع الثاني حول إستخدام الأجاكس في مكتبات Javascript ضمن سلسلة الأجاكس بسهولة، في المرة سابقة تحدثنا عن إستخدام الأجاكس في مكتبة jQuery وفي الحقيقة مع الإمكانيات التي توفرها هذه المكتبة تعتبر كتابة الشفرة فيها سواء كان كتابة شفرة أجاكس أو غيرها سهلة ولا تحتاج إلى تعقيد.

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

• مثال على الدرس
• تحميل المرفقات

.. أكمل قراءة بقية الموضوع »

القوائم التي تأتي على شكل ألسنة معروفة لدى الجميع ويأتي الشكل من مفهوم Tabs أو الألسنة ونجدها في أكثر من تطبيق سواء كان تطبيق ويب أو سطح المكتب، يمكن بالتأكيد عملها بتقنية HTML و CSS وبمساعدة لغة javascript.

اليوم سوف نتعرف على كيفية عمل قائمة ألسنة Tabs بإستخدام مكتبة jQuery وتأتي الألسنة بشكل أفقي وتحتها يكون صندوق المحتويات، وبنفس أسلوب درس القوائم المنزلقة سوف أشرح الدرس بإستخدام الصور لطرح فكرة الدرس.

• مثال على الدرس
• تحميل المرفقات

.. أكمل قراءة بقية الموضوع »

يعجبني هذا النوع من القوائم والتي تعتمد على تأثير مثل Slide ضمن تأثيرات jQuery وهي قد لا تكون قوائم من حيث البنية ولكنها على شكل قوائم ويكون الشكل عمودي وليس أفقي.

هذا الدرس يشرح كيفية عمل قائمة منزلقة بإستخدام مكتبة jQuery بسهولة وبشكل عمودي وسأستخدم صور سريعة لطرح فكرة الدرس، قبل أيام عرضت عدة مصادر سريعة حول مكتبة jQuery بدلاً من كتابة تفاصيل تجدها بسهولة عند بحثك في جوجل أو حتى طريقة عمل هذا الدرس.

• مثال على الدرس
• تحميل المرفقات

.. أكمل قراءة بقية الموضوع »

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

البعض يفضل ذلك لسبب أنه يستخدم المكتبة معينة لتطبيق معين ويريد إستخدام الأجاكس في نفس التطبيق وبما أن المكتبة التي يستخدمها موجودة يفضل إستخدامها ليتجنب إعادة ما يريد كتابته من الصفر.

• مثال على الدرس
• تحميل المرفقات

.. أكمل قراءة بقية الموضوع »