المشروع

تسريع تحميل الصفحة باستخدام data URI

عبدالرحمن العتيبة — Thu, 10 Dec 2009 06:30:16 +0000

لعل أحد أهم النصائح لتحسين سرعة تحميل صفحات الويب هي التقليل من معدل طلبات HTTP للخادم، في الواقع، هذه النصيحة هي أول نصائح ياهوو لأفضل الممارسات لتسريع المواقع. كلما قلت الطلبات على خادم الموقع، كلما ساعد في تحسين سرعة الموقع.

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

وسائل التغلب على مشكلة تعدد طلبات HTTP

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

ماهي data: URI

data URI هي وسيلة لإدراج البيانات ضمنياً في صفحات الموقع بدلاً من استدعائها خارجياً. البيانات تشمل، على سبيل المثال لا الحصر، الصور، ملفات CSS، ملفات جافاسكربت، وهي من تعريف اللجنة الخاصة بنظام الإنترنت IETF في RFC 2397.

طريقة التنسيق هي كالتالي:

data:[][;charset=][;base64],

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

data، البروتوكول الذي يجب استخدامه ليفهمه المتصفح، وهنا تم استخدام data للتعريف بأنها عبارة عن بيانات.
mime type، نوع ملف الوسائط الذي سيتم إدراجه، على سبيل المثال لإدراج صورة PNG يتم استخدام image/png. إذا لم يتم استخدام أي قيمة هنا، فإن القيمة الافتراضية هي النص text/plain;charset=US-ASCII.
charset، نوع الترميز المستخدم للنصوص، واستخدامه يكون خاص فقط للنصوص. يمكن تركه فارغاً للملفات الأخرى.
base64، نوع ترميز البيانات، على عكس charset المستخدم للنصوص، فإن نوع الترميز هنا يعني الترميز الخاص بالبيانات التي سيتم إدراجها. افتراضياً وعند عدم تحديد أي قيمة هنا، يتم استخدام الترميز الخاص بروابط الإنترنت URL encoding، والذي يكون في العادة حروف آسكي ASCII اللاتينية، وأي حروف أخرى خارج أسكي يتم استبدالها بالحروف %xx حيث x يكون عدد ستعشري Hexdecimal. عندما يتم استخدام ترميز Base64، يجب أن تكون البيانات أيضاً مرمّزة بهذا الترميز.
encoded data، هنا يتم وضع البيانات، ويجب وضع البيانات مرمّزة حسب الترميز المختار في النقطة السابقة.

ترميز Base64

يساعد ترميز Base64 على تحويل البيانات الثنائية binary data إلى نصوص بحيث يسهل نقلها عبر الإنترنت. يتم ذلك عبر تحويل البيانات إلى بت bits، ومن ثم جمعها وتحويلها إلى حروف Base64. هذه الحروف تتكون من الأبجدية الإنجليزية الكبيرة والصغيرة A-Z a-z والأرقام 0-9 بالإضافة إلى “+” و “/”. أيضاً يتم استخدام “=” في النهاية لمعرفة وجود حشوة padding.

مثال نص

الشيفرة
هذا نص كلمة “مرحبا” مرمّز بطريقة Base64.

data:text/plain;charset=utf-8;base64,2YXYsdit2KjYpw==

مثال صورة

الشيفرة
هذه صورة أيقونة “عدسة مكبرة” بحجم ١٦ بيكسل.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAI6SURBVDjLpZJbaJJxGMaHgdcFXURdBLtZrGitiFh0uhjRVRTVWI1as7mQakhjyyEkRAcaHSCrj0xrWGuuoVsr25qzfeYObh6yJJdzavoZs3Sy8PhJ8vR9EoHkotXFA/+b3+//vC9vEYCi/8mvh8H7nTM8kyF0LpoacCazLxzxbM/bb1S3OUo8GQtz/iggGfi1O0NaAzS8kQwCURqBORrTX9LQf5jHQ3KWlA1RnAUFeneGsATSoKIZOGdTsAWSMPuTsFNJeL7SEOoF4GtrUKuuShUUvJpKUd4wnYMtDDj5KQGTN4FRTyInOvH8MDonL6BKuRcFBey8fqYyC0/4Ehhn4JGZOBp1AtT1VkOkrYfMKIKgsxq7b+zErssV0TyBxjaf9UVomBh4jPnVyMCG6ThbGfKRVtwebsK1wdO4+JIPce8xbBGXI0+gMkWoqZ/137jjIBlY/zEGnqoO+2R7wGvfj/N9x3FAWonNojKUCUtTeQKlMUT02+fgCqVzs7OwzhnLyd4HU2xlCLsOYlPz+sI7uK8Pcu4O+EnNRAhWfwKOzym8Y2LyxCAf9GGHZDvKm9Zha2NptudcRUnBQ7rZ5+G0aVzEpS4nJelwZMXt9myL3Bpskyq9FmUzQuZu2B63QCXcEH50ak3Jb4KF0i+p5D5r3aYeJeoRNCgwfq8BCv7q8F8L2Dw9u5HbcWateuj6IXi0V0HUrsCiBGweNBRzZbxVasXJYkhrll1ZtIDNnaPLl9w6snRlwSX+a34AgPPwSZzC+6wAAAAASUVORK5CYII=

مثال صورة في HTML و CSS

شيفرة صورة خلفية باستخدام CSS

.div-bg
{
	background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAI6SURBVDjLpZJbaJJxGMaHgdcFXURdBLtZrGitiFh0uhjRVRTVWI1as7mQakhjyyEkRAcaHSCrj0xrWGuuoVsr25qzfeYObh6yJJdzavoZs3Sy8PhJ8vR9EoHkotXFA/+b3+//vC9vEYCi/8mvh8H7nTM8kyF0LpoacCazLxzxbM/bb1S3OUo8GQtz/iggGfi1O0NaAzS8kQwCURqBORrTX9LQf5jHQ3KWlA1RnAUFeneGsATSoKIZOGdTsAWSMPuTsFNJeL7SEOoF4GtrUKuuShUUvJpKUd4wnYMtDDj5KQGTN4FRTyInOvH8MDonL6BKuRcFBey8fqYyC0/4Ehhn4JGZOBp1AtT1VkOkrYfMKIKgsxq7b+zErssV0TyBxjaf9UVomBh4jPnVyMCG6ThbGfKRVtwebsK1wdO4+JIPce8xbBGXI0+gMkWoqZ/137jjIBlY/zEGnqoO+2R7wGvfj/N9x3FAWonNojKUCUtTeQKlMUT02+fgCqVzs7OwzhnLyd4HU2xlCLsOYlPz+sI7uK8Pcu4O+EnNRAhWfwKOzym8Y2LyxCAf9GGHZDvKm9Zha2NptudcRUnBQ7rZ5+G0aVzEpS4nJelwZMXt9myL3Bpskyq9FmUzQuZu2B63QCXcEH50ak3Jb4KF0i+p5D5r3aYeJeoRNCgwfq8BCv7q8F8L2Dw9u5HbcWateuj6IXi0V0HUrsCiBGweNBRzZbxVasXJYkhrll1ZtIDNnaPLl9w6snRlwSX+a34AgPPwSZzC+6wAAAAASUVORK5CYII=") no-repeat;
	width: 16px;
	height: 16px;
}

شيفرة صورة في HTML

ترميز URL

ويسمى أيضاً بالترميز المئوي، حيث يعتمد الترميز على جدول أسكي ASCII للمحارف، وأي محرف يقع خارج هذا الجدول يتم ترميزه باستخدام UTF-8، ومن ثم تحويله إلى رقمه المئوي.

لا ينصح باستخدام هذا الترميز لنقل البيانات، وخصوصاً الكبيرة منها لحجمه الكبير مقارنة بترميز Base64.

مثال نص

الشيفرة
هذا نص كلمة “مرحبا” مرمّز بطريقة URL encoding.

data:text/plain;charset=utf-8,%D9%85%D8%B1%D8%AD%D8%A8%D8%A7

مثال صورة

الشيفرة
هذه صورة أيقونة “عدسة مكبرة” بحجم ١٦ بيكسل.

data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%10%00%00%00%10%08%06%00%00%00%1F%F3%FFa%00%00%00%04gAMA%00%00%AF%C87%05%8A%E9%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%02%3AIDAT8%CB%A5%92%5Bh%92q%18%C6%87%81%D7%05%5DD%5D%04%BBY%ACh%AD%88Xt%BA%18%D1U%14%D5X%8DZ%B3%B9%90jHc%CB%21%24D%07%1A%1D%20%AB%8FLkXk%AE%A1%5B%2B%DB%9A%B3%7D%E6%0En%1E%B2%24%97sj%FA%19%B3t%B2%F0%F8I%F2%F4%7D%12%81%E4%A2%D5%C5%03%FF%9B%DF%EF%FF%BC%2Fo%11%80%A2%FF%C9%AF%87%C1%FB%9D3%3C%93%21t.%9A%1Ap%26%B3%2F%1C%F1l%CF%DBoT%B79J%3C%19%0Bs%FE%28%20%19%F8%B5%3BCZ%034%BC%91%0C%02Q%1A%819%1A%D3_%D2%D0%7F%98%C7Cr%96%94%0DQ%9C%05%05zw%86%B0%04%D2%A0%A2%198gS%B0%05%920%FB%93%B0SIx%BE%D2%10%EA%05%E0kkP%AB%AEJ%15%14%BC%9AJQ%DE0%9D%83-%0C8%F9%29%01%937%81QO%22%27%3A%F1%FC0%3A%27%2F%A0J%B9%17%05%05%EC%BC%7E%A62%0BO%F8%12%18g%E0%91%998%1Au%02%D4%F5VC%A4%AD%87%CC%28%82%A0%B3%1A%BBo%EC%C4%AE%CB%15%D1%3C%81%C66%9F%F5Eh%98%18x%8C%F9%D5%C8%C0%86%E98%5B%19%F2%91V%DC%1En%C2%B5%C1%D3%B8%F8%92%0Fq%EF1l%11%97%23O%A02E%A8%A9%9F%F5%DF%B8%E3%20%19X%FF1%06%9E%AA%0E%FBd%7B%C0k%DF%8F%F3%7D%C7q%40Z%89%CD%A22%94%09KSy%02%A51D%F4%DB%E7%E0%0A%A5s%B3%B3%B0%CE%19%CB%C9%DE%07Sle%08%BB%0EbS%F3%FA%C2%3B%B8%AF%0Fr%EE%0E%F8I%CDD%08V%7F%02%8E%CF%29%BCcb%F2%C4%20%1F%F4a%87d%3B%CA%9B%D6akci%B6%E7%5CEI%C1C%BA%D9%E7%E1%B4i%5C%C4%A5.%27%25%E9pd%C5%ED%F6l%8B%DC%1Al%93%2A%BD%16e3B%E6n%D8%1E%B7%40%25%DC%10%7EtjM%C9o%82%85%D2%2F%A9%E4%3Ek%DD%A6%1E%25%EA%114%280%7E%AF%01%0A%FE%EA%F0_%0B%D8%3C%3D%BB%91%DBqf%ADz%E8%FA%21x%B4WA%D4%AE%C0%A2%04l%1E4%14se%BCUj%C5%C9bHk%96%5DY%B4%80%CD%9D%A3%CB%97%DC%3A%B2te%C1%25%FEk%7E%00%80%F3%F0I%9C%C2%FB%AC%00%00%00%00IEND%AEB%60%82

مثال صورة في HTML و CSS

شيفرة صورة خلفية باستخدام CSS

.div-bg
{
	background: transparent url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%10%00%00%00%10%08%06%00%00%00%1F%F3%FFa%00%00%00%04gAMA%00%00%AF%C87%05%8A%E9%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%02%3AIDAT8%CB%A5%92%5Bh%92q%18%C6%87%81%D7%05%5DD%5D%04%BBY%ACh%AD%88Xt%BA%18%D1U%14%D5X%8DZ%B3%B9%90jHc%CB%21%24D%07%1A%1D%20%AB%8FLkXk%AE%A1%5B%2B%DB%9A%B3%7D%E6%0En%1E%B2%24%97sj%FA%19%B3t%B2%F0%F8I%F2%F4%7D%12%81%E4%A2%D5%C5%03%FF%9B%DF%EF%FF%BC%2Fo%11%80%A2%FF%C9%AF%87%C1%FB%9D3%3C%93%21t.%9A%1Ap%26%B3%2F%1C%F1l%CF%DBoT%B79J%3C%19%0Bs%FE%28%20%19%F8%B5%3BCZ%034%BC%91%0C%02Q%1A%819%1A%D3_%D2%D0%7F%98%C7Cr%96%94%0DQ%9C%05%05zw%86%B0%04%D2%A0%A2%198gS%B0%05%920%FB%93%B0SIx%BE%D2%10%EA%05%E0kkP%AB%AEJ%15%14%BC%9AJQ%DE0%9D%83-%0C8%F9%29%01%937%81QO%22%27%3A%F1%FC0%3A%27%2F%A0J%B9%17%05%05%EC%BC%7E%A62%0BO%F8%12%18g%E0%91%998%1Au%02%D4%F5VC%A4%AD%87%CC%28%82%A0%B3%1A%BBo%EC%C4%AE%CB%15%D1%3C%81%C66%9F%F5Eh%98%18x%8C%F9%D5%C8%C0%86%E98%5B%19%F2%91V%DC%1En%C2%B5%C1%D3%B8%F8%92%0Fq%EF1l%11%97%23O%A02E%A8%A9%9F%F5%DF%B8%E3%20%19X%FF1%06%9E%AA%0E%FBd%7B%C0k%DF%8F%F3%7D%C7q%40Z%89%CD%A22%94%09KSy%02%A51D%F4%DB%E7%E0%0A%A5s%B3%B3%B0%CE%19%CB%C9%DE%07Sle%08%BB%0EbS%F3%FA%C2%3B%B8%AF%0Fr%EE%0E%F8I%CDD%08V%7F%02%8E%CF%29%BCcb%F2%C4%20%1F%F4a%87d%3B%CA%9B%D6akci%B6%E7%5CEI%C1C%BA%D9%E7%E1%B4i%5C%C4%A5.%27%25%E9pd%C5%ED%F6l%8B%DC%1Al%93%2A%BD%16e3B%E6n%D8%1E%B7%40%25%DC%10%7EtjM%C9o%82%85%D2%2F%A9%E4%3Ek%DD%A6%1E%25%EA%114%280%7E%AF%01%0A%FE%EA%F0_%0B%D8%3C%3D%BB%91%DBqf%ADz%E8%FA%21x%B4WA%D4%AE%C0%A2%04l%1E4%14se%BCUj%C5%C9bHk%96%5DY%B4%80%CD%9D%A3%CB%97%DC%3A%B2te%C1%25%FEk%7E%00%80%F3%F0I%9C%C2%FB%AC%00%00%00%00IEND%AEB%60%82") no-repeat;
	width: 16px;
	height: 16px;
}

شيفرة صورة في HTML

أدوات التحويل إلي data: URI

يوجد الكثير من الأدوات التي يمكنها تحويل الوسائط المتعددة إلى بيانات مرمّزة بترميز Base64.

DataURLMaker، خدمة على الويب تتيح تحويل الصور إلى بيانات URI باستخدام ترميز Base64، ووضعها تلقائياً في وسم .
data: URI Generator، خدمة على الويب أيضاً. تقبل جميع أنواع الملفات وليست محددة بالصور.
The data: URI kitchen، خدمة أخرى على الويب، ولكن تتيح تحكم أكثر بنوع البيانات، على سبيل المثال، إدخال HTML والتحويل مباشرة.

استخدام شاشة الأوامر بلغة PHP.

$ php -r "echo base64_encode(file_get_contents('example.png'));"

استخدام برنامج uuencode على اللينكس والماك (يأتي افتراضياً على أغلب التوزيعات)
```
$ uuencode -m example.png
```

دعم المتصفحات

يتم دعم بيانات data: URI من قبل جميع المتصفحات الحديثة:

Firefox
Opera
Chrom
Safari
Internet Explorer v8 – فقط للصور، للنسخ الأقل من النسخة ٨ يمكن استخدام MHTML.

تعلم برمجة إضافات وردبريس [الجزء الثاني]

فراس اللو — Mon, 23 Nov 2009 06:30:51 +0000

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

وظيفة الإضافة

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

تحميل

البداية

سنُطلق على هذه الإضافة اسم randfriendb و هي اختصار Random Friend’s Blogs أي المدونات الصديقة العشوائية. نذهب إلى مُجلد الإضافات wp-content/plugins ونقوم بإنشاء مُجلد باسم randfriendb، ندخل الآن إلى داخل المُجلد ونُنشأ ملف php بنفس اسم المُجلد randfriendb.php، نفتح الملف الآن -كما اتفقنا في الدرس السابق يجب علينا أن نضع الشيفرة التي نُعرّف فيها الإضافة من حيث اسمها و رقم الإصدار والمبرمج و موقع الإضافة … إلخ- و ستكون شيفرتنا اليوم على الشكل التالي:

/*
Plugin Name:  RandFriendB
Plugin URI: http://www.almashroo.com
Description: إضافة لعرض مدونة عشوائية من المدونات الصديقة في المدونة
Version: 1.0
Author: المشروع
Author URI: http://www.almashroo.com
*/

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

__("النص هُنا");

// أو

_e("النص هُنا");

الفرق بين الدالتين كما يلي: الأولى تحتفظ بالنص في داخلها وتحتاج لأمر echo أو print لكي تقوم بطباعته، أما الثانية فتقوم بالطباعة فوراً. وقُمت بإستخدامهم من أجل موضوع تعدد اللغات، وسأعود لشرحهم بشكل مُفصّل عندما ننتهي من البرمجة.

دالة لوحة التحكم

دعونا نُناقش ما الذي يجب أن نكتبه ضمن دالة لوحة التحكم، في البداية يجب أن يكون هُناك قسم من أجل إضافة مدونة جديدة، وقسم آخر من أجل إستعراض المدونات الموجودة -لا ضرورة لأكثر من ذلك- الآن نأتي لتحليل القسم الأول: القسم الأول عبارة عن نموذج (فورم) يحتوي على حقل لإدخال عنوان المدونة، وحقل ثاني لإدخال عنوان المدونة وحقل لكتابة وصف مُختصر عن المدونة. القسم الثاني: يقوم بعرض المدونات الموجودة مع وجود خيار حذف واحدة منهم، الآن نبدأ بالبرمجة:

سأطلق على دالة لوحة التحكم اسم randfriendb_admin وستحتوي في بدايتها على شرط للتأكد من وجود الجدول الخاص بالإضافة في قاعدة البيانات، فإذا لم يكن موجوداً فسيقوم بإنشاء جدول، أما إذا كان موجوداً سينتقل ليرى ماهو العمل الذي نُريد أن نقوم به، سنحتاج لدالة لكي نتأكد من وجود الجدول قُمت بكتابة واحدة:

function table_exists ($table, $db) {
        $tables = mysql_list_tables ($db);
        while (list ($temp) = mysql_fetch_array ($tables)) {
                if ($temp == $table) {
                        return TRUE;
                }
        }
        return FALSE;
}

الآن نبدأ بتعريف دالة لوحة التحكم وبداخلها دالة التأكد من وجود الجدول وبعدها الشرط الذي تحدثنا عنه:

function randfriendb_admin()
{
	// دالة للتأكد من وجود جدول مُحدد في قاعدة البيانات
		function table_exists ($table, $db=DB_NAME) {
		$tables = mysql_list_tables ($db);
		while (list ($temp) = mysql_fetch_array ($tables)) {
			if ($temp == $table) {
				return TRUE;
			}
		}
		return FALSE;
	}

	if (!table_exists("wp_randfb"))
	{
		$create = mysql_query("
			CREATE TABLE `wp_randfb` (
			`id` INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
			`blog_title` VARCHAR(200) NOT NULL,
			`blog_url` VARCHAR(200) NOT NULL,
			`blog_desc` VARCHAR(200) NOT NULL
			)
		");

		if ($create)
		{
			echo ''.__("تم إنشاء الجدول بنجاح","randfriendb").'

'.__("يُرجى الإنتظار ...","randfriendb");
			echo '';
		}else{
			echo ''.__("خطأ","randfriendb").'';
			echo mysql_error();
		}

	}else{
	// لاتفعل شيء !! :D
	}
}// نهاية دالة لوحة التحكم

سأقوم بشرح سريع للشيفرة الموجودة في الأعلى، لاحظوا بعدما قُمنا بتعريف الدالة وضعنا بعدها مُباشرة دالة للتأكد من وجود الجدول -يُمكنكم وضع هذه الدالة قبل تعريف دالة لوحة التحكم لا مُشكلة في ذلك- ومن ثم تأكدنا من وجود الجدول على إفتراض اسميناه wp_randfb، فإذا لم يكن موجوداً قُمنا بإنشاءه، وبعدها تأكدنا من نجاح عملية الإنشاء من عدمها. أما إذا كان موجوداً فقُلت له لاتفعل شي بشكل مؤقت حتى نُتابع شرحنا.

الآن نأتي للعمل الجدّي، سنحذف عبارة لاتفعل شيء و نأتي لتحليل ما الذي يحب كتابته. الآن نحن اتفقنا أن هناك بالقسم الثاني قسم لإضافة مدونة جديدة و قسم لعرض المدونات الموجودة، إذاً سنستخدم مصفوفة GET لنأخذ الفعل الذي سنقوم به، و سنأخذ المؤشر action ضمن مصفوفة GET لنحدد وجهتنا أي:

$_GET['action'];

سنكتب في برنامجنا سطور تُعبّر عن مايلي: إذا كانت قيمة المصفوفة عند المؤشر action فارغة فسنعتبر أن الفعل هو إضافة مدونة جديدة، وغير ذلك يذهب البرنامج إلى حسب تعليماته:

if (!isset($_GET['action']) || $_GET['action'] == "add"){
	//الحالة الأولى
}elseif($_GET['action'] == "edit"){
	// الحالة الثانية
}elseif($_GET['action'] == "del"){
	// الحالة الثالثة
}elseif($_GET['action'] == "insert"){
	// الحالة الرابعة
}// نهاية مُعالجة الحالات

بعد استبدال كلمة لاتفعل شيء بالشيفرة الموجودة في الأعلى، نجد أن هُناك حالات، الحالة الأولى والثانية … إلخ، الآن نبدأ بكتابة الحالات، لنبدأ بالحالة الأولى وهي حالة الإضافة، ما الذي يجب علينا كتباته في هذه الحالة؟ شيفرة HTML تعرض لنا نموذج فيه حقول اتفقنا عليه مُسبقاً استبدل كلمة الحالة الأولى بالشيفرة التالية:

echo '
	
		'.__("إضافة مدونة جديدة","randfriendb").'


			
				
					'.__("عنوان المدونة","randfriendb"). '
					
				
				
					'.__("رابط المدونة","randfriendb").'
					
				
				
					'.__("كلمات عن المدونة","randfriendb").' 
					
				
			

			
				
			
		
	
';

'.__("عنوان المدونة","randfriendb"). '
'.__("رابط المدونة","randfriendb").'
'.__("كلمات عن المدونة","randfriendb").'

كما تُلاحظون النموذج يأخذكم إلى الفعل insert وهي الحالة الرابعة ضمن الحالات التي نُعالجها، إذاً انتيهنا من الحالة الأولى وسنذهب مُباشرةً للرابعة من أجل كتابة شيفرة الإضافة. في البداية نتحقق من أن جميع القيم مُعبئة، ومن ثم تقوم بعملية الإضافة و ستكون الشيفرة على الشكل التالي:

if(empty($_POST['blog_title']) || empty($_POST['blog_url']) || empty($_POST['blog_desc']))
{
	echo ''.__("يُرجى تعبئة كافة المعلومات","randfriendb").'';
}else{
	global $wpdb;
	$insert = $wpdb->query("INSERT INTO `wp_randfb` VALUES(NULL,'" . $_POST['blog_title'] . "','" . $_POST['blog_url'] . "','" . $_POST['blog_desc'] . "')");
	if ($insert)
	{
		echo ''.__("تمت إضافة المدونة بنجاح","randfriendb").'

'.__("يُرجى الإنتظار ...","randfriendb");
		echo '';
	}else{
		echo ''.__("حدث خطأ","randfriendb").'

';
	}
}

لاحظوا أننا استخدمنا الكائن wpdb وهو كائن جاهز يحتوي على دوال في داخله حيث يُفضّل استخدامه من أجل تجنب الثغرات. الآن وبعد أن انتهينا من الحالة الرابعة نأتي للحالة الثانية وهي عرض المدونات الموجودة ضمن قاعدة البيانات، نستبدل كلمة الحالة الثانية بالشيفرة التالية:

global $wpdb;
$blogs = $wpdb->get_results("SELECT * FROM `wp_randfb`",ARRAY_A);
if ($blogs)
{
echo '
	
';
foreach($blogs as $blog){
	echo '';
	echo '';
	echo '';
	echo '';
}
echo '
	
		
			
				'.__("عنوان المدونة","randfriendb").'
				'.__("رابط المدونة","randfriendb").'
				'.__("كلمات عن المدونة","randfriendb").'
				'.__("حذف","randfriendb").'
			
		
	'.$blog['blog_title'].' '.$blog['blog_url'].' '.$blog['blog_desc'].' '.__("حذف","randfriendb").'

	
		
	
	
	
';
}else{
	echo ''.__("لا يوجد مدونات","randfriendb").'';
}

'.__("عنوان المدونة","randfriendb").'	'.__("رابط المدونة","randfriendb").'	'.__("كلمات عن المدونة","randfriendb").'	'.__("حذف","randfriendb").'
'.$blog['blog_title'].'	'.$blog['blog_url'].'	'.$blog['blog_desc'].'	'.__("حذف","randfriendb").'

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

global $wpdb;
$id = intval($_GET['id']);
$del = $wpdb->query("DELETE FROM `wp_randfb` WHERE id='" . $id . "'");
if ($del)
{
	echo ''.__("تم حذف المدونة بنجاح","randfriendb").'

'.__("يُرجى الإنتظار ...","randfriendb");
	echo '';
}else{
	echo ''.__("حدث خطأ","randfriendb").'

';
}

الآن وبعد أن إنتهينا من برمجة كل شيء يتعلق بلوحة التحكم، سنُضيف إلى قائمة لوحة التحكم خيارات لكي نتحكم بهذه الإضافة، يُقدم لنا برنامج وردبريس دوال جاهزة لإضافة أزرار إلى قائمة لوحة التحكم والدالة هي :

add_menu_page()

و يلحق بهذه الدالة دوال أُخرى لكي نُنشىء قائمة فرعية من القائمة الرئيسية:

add_submenu_page

إذاً الآن نقوم بكتابة دالة تحتوي على هذه الدوال التي تُنشىء قائمة خاصة بإضافتنا و لكن قبل ذلك دعوني أشرح لكم الدالة كيف تعمل:

add_menu_page("الأيقونة","الدالة", "الملف", "المقدرة","اسم الصفحة في القائمة","عنوان الصفحة");
add_submenu_page("الدالة", "الملف", "المقدرة", "اسم الصفحة في القائمة","عنوان الصفحة","الصفحة الرئيسية");
add_action('admin_menu','randfriendb_add_admin');

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

الآن تُشاهدون القيم التي قُمت بتمريرها للدالتين،دعوني أشرحها لكم:

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

دعونا نُضيف هذه الشيفرة إلى ملف الإضافة.

function randfriendb_add_admin() {
	add_menu_page(__("مدونات صديقة","randfriendb"),__("مدونات صديقة","randfriendb"), 8, __FILE__, "randfriendb_admin");
	add_submenu_page(__FILE__, __("إضافة مدونة جديدة","randfriendb"), __("إضافة مدونة جديدة","randfriendb"), 8,__FILE__ , "randfriendb_admin");
	add_submenu_page(__FILE__, __("التحكم بالمدونات","randfriendb"), __("التحكم بالمدونات","randfriendb"), 8, __FILE__ ."&action=edit", "randfriendb_admin");
}

add_action('admin_menu', 'randfriendb_add_admin');

لاحظوا وجود دالة جديدة في نهاية الشيفرة وهي الدالة المسؤولة عن تنفيذ الدالة التي تُضيف لنا القائمة، و النتيجة الأخيرة سوف تكون كما هو موضّح في الصورة التالية:

صناعة مربع جانبي للقائمة Widget

الآن وكما نُلاحظ في الدوال التي استخدمناها من أجل إنشاء القائمة، في المسقط الأخير هُناك هذه الجملة randfriendb_admin، وهي عبارة عن دالة لوحة التحكم التي قُمتا ببرمجتها. الآن كل شيء تمام، مارأيكم أن نبدأ بكتابة الدالة التي تعرض لنا المدونات الصديقة في الموقع؟ الدالة بسيطة جداً وهي كالتالي:

// دالة عرض المدونات الصديقة
function randfriendb_main($args)
{
	extract($args);
	global $wpdb;
	$get_blogs = $wpdb->get_results("SELECT * FROM `wp_randfb` order by rand() limit 0,1",ARRAY_A);
	foreach($get_blogs as $get_blog){
		echo $before_widget;
		echo $before_title;
		_e("مدونات صديقة","randfriendb");
		echo $after_title;
		echo ''.$get_blog['blog_title'].''.$get_blog['blog_desc'].''.$after_widget;
	}
}

لم نفهم شيء صحيح؟ و أنا مثلكم في البداية ولكن دعوني أشرح لكم. في البداية عرّفنا دالة باسم randfriendb_main، ولاحظوا أننا مررنا لها المتغير args. ماهو هذا المتغير؟ هذا المتغير عبارة عن مصفوفة تحمل بداخلها 4 مُتغيرات هي before_widget، before_title، after_title، وafter_widget. طيب ماهي هذه المتغيرات؟

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

بعد ذلك إستخدمنا الأمر extract لكي ننشر مُحتويات المصفوفة على شكل مُتغيرات نتعامل معها، بعدها قُمنا باستعلام من قاعدة البيانات، يختار لنا مدونة بشكل عشوائي من الجدول الذي أنشأناه، ومن ثم قُمنا بطباعتها من خلال دالة foreach، لأنه عندما نستخدم الدالة get_results في الوردبريس، نستخرج محتويات المصفوفة الناتجة من خلال دالة foreach. لاحظوا داخل دالة foreach بعد أن مررنا لها القيم أننا قُمنا بطباعة المتغيرات before_widget، before_title، وبعدها طبعنا عنوان المُربع الجانبي، ومن ثم طبعنا قيمة المتغير after_title. رُبما لم نفهم كثيراً موضوع المتغيرات الأربعة والصور ستوضّح لكم:

هل لاحظتم أنه يعرض لنا المُربع Widget ولكن بشكل مُتناسق مع الشكل العام للمدونة؟ هذه هي الفائدة من المتغيرات الأربعة. الآن يبقى لنا سطر واحد فقط من أجل أن يتعرف النظام على هذا المُربع ويضعه ضمن المُربعات الجانبية والسطر هو:

register_sidebar_widget(__("مدونات صديقة","randfriendb"),'randfriendb_main');

دالة register_sidebar_widget هي دالة تأخذ مسقطين أو ثلاثة، الأول يحتوي على عنوان المُربع، والثاني الدالة التي سينُفذها و هنا استخدمنا دالة randfriendb_main التي وظيفتها طباعة المدونة العشوائية. لو ذهبنا الآن إلى المُربعات الجانبية سنجدها موجودة.

كل ماعليك الآن هو سحبها ووضعها في القائمة الجانبية 1 كما في الصورة، واذهب للرئيسية في موقعك ستجدها موجودة.

تدويل الإضافة (i18n)

للأسف انتهينا من البرمجة، ولكن الآن نأتي للخطوة الأهم وهي الترجمة والتدويل، كما لاحظتم أننا خلال البرمجة وضعنا أي مُتغير نصّي ضمن:

__("النص هنا")

// أو

_e("النص هنا")

لماذا وضعناها هكذا؟ يستخدم وردبريس نظام GNU gettext، وهذا النظام لتدويل النصوص (i18n) لسهولة ترجمة الإضافة لاحقاً إلى عدة لغات. دعونا قبل أي شيء أن نُضيف هذا السطر في بداية برنامجنا قبل دالة لوحة التحكم. وظيفة هذه الدالة هي إضافة مجال نصّي في البرنامج لكي يستخرج منه ترجمة النصوص.

load_plugin_textdomain('randfriendb', "/wp-content/plugins/randfriendb/");

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

مُلاحظة لمستخدمي نظام الويندوز: يُرجى تثبيت البرنامج على محرك القرص الصلب C مُباشرةً و ليس داخل مُجلد Programm files في حال كان السيرفر الشخصي لديك مُثبت على C. أما إذا كان على المحرك D فنفس الشيء يجب أن يكون على D مُباشرةً، لماذا؟ لأنه لن يتمكن من إيجاد ملف الإضافة في هذه الحالة. وحقيقة هذه مُشكلة عانيت منها لمدة 7 أيام وهذا سبب تأخر طرح الدرس.

بعد تثبيت البرنامج،نفتح البرنامج ونختار من قائمة file خيار New Catalog.

تظهر لنا الآن نافذة نفوم بتعبئة معلومات عن الإضافة مثل: اسم الإضافة و المُبرمج و البريد الإلكتروني واللغة والترميز كماهو موضّح في الصورة.

ومن ثم ننتقل إلى اللسان (Tab) الثاني وهو المسؤول عن ربط ملف الإضافة كما في الصورة:

طبعاً AppServ هو السيرفر الشخصي الذي أعمل عليه، والباقي أعتقد أنه واضح. الآن ننتقل للسان الأخير وهو عبارة عن الدوال التي يجب على البرنامج أن يأخذ منها العبارات النصية و نحن هنا استخدمنا الدوال __() و _e().

الآن وبعد الضغط على OK سيطلب منك البرنامج تسمية الملف، قُم بتسميته باسم “الإضافة-اللغة”، أي في مثالنا هذا randfriendb-en.po.

ومن ثم سيعرض لك النصوص الموجودة ضمن الدالتين لكي تقوم بترجمتهم.

الآن بعد حفظ الملف نبدأ بالترجمة وعندما ننتهي يُمكننا تجربة نجاح العملية من خلال التعديل على ملف wp-config الموجود في المجلد الرئيسي للوردبريس، نبحث عن:

define ('WPLANG', 'ar');

و نستبدلها بــ

define ('WPLANG', 'en');

جرّب الآن بنفسك و ستجد اللغة قد تغيرت.

هذا كل شيء، أتمنى أن تكونوا قد فهمتم كل شيء وأي استفسار أنا جاهز.

مقالات ذات صلة:

7 وسائل للتغلب على مشكلة شفافية PNG على IE6

عبدالرحمن العتيبة — Thu, 19 Nov 2009 13:29:51 +0000

عندما قرأت رسالة أخي عبدالعزيز الزرعوني بعنوان ”فلنهجر متصفح Internet Explorer 6“، والتي وزرعها عبر البريد الإلكتروني، وكتبها الأخ أحمد الكثيري. انتابني مزيج من الشعور بخيبة الأمل، وعدم الاستغراب. فلازالت نسبة ليست بالمستهانة من المتصفحين العرب يستخدمون الإنترنت اكسبلورر ٦. وقد يكون لأسباب كثيرة لا أود التطرق إليها في هذا المقال. وعدم الاستغراب لأن نسبة كبيرة من مستخدمي الإنترنت بشكل عام لايفرقون بين المتصفح ومحرك البحث.

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

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

اختبار الشفافية

عرض

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

للأسف لم تنجح أي وسيلة بنسبة ١٠٠% في هذا الاختبار، ولكن تفاوتت نسبة النجاح بين هذه الوسائل. كما سنرى لاحقاً.

١. IE PNG Fix

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

ايجابيات

سهولة التطبيق، بحيث يمكننا إدراج عدد قليل من السطور في مستند HTML، ومن ثم يتم التحديد عبر CSS.
نجاح في ٧ من أصل ٨ اختبارات، وهذه أعلى نسبة نجاح لتقنية قمت بتجربة الاختبار عليها.
حفاظ على تطبيق تكرار وتموضع صور الخلفية، باستخدام ملف جافاسكربت iepngfix_tilebg.js لدعم هذه الخاصية.

سلبيات

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

طريقة التطبيق

عرض

تحميل

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

بعد تحميل الملف المضغوط من الموقع، تقوم بفك ضغطه. ستحتاج إلى ملفات blank.gif، وiepngfix.htc، وأخيراً إن كنت تحتاج إلى التحكم بتكرار وتموضع صور الخلفية ستحتاج إلى ملف iepngfix_tilebg.js. تحتاج إلى تعديل ملف iepngfix.htc إذا كان مسار الصورة blank.gif ليس في نفس المجلد مع الملف.

// * An absolute path like:  '/images/blank.gif'
// * A path relative to this HTC file like:  thisFolder + 'blank.gif'
var thisFolder = document.URL.replace(/(\\|\/)[^\\\/]*$/, '/');
IEPNGFix.blankImg = thisFolder + 'blank.gif';

الآن تضع شيفرة الإدراج في مستند HTML التي تود عرض الصور فيه، ويجب الانتباه هنا إلى أننا نود استهداف متصفح IE6 وأقل، لذا سنضع شيفرة الإدراج بين الجملة الشرطية لهذا المتصفح، مما يساعدنا أيضاً على تخطي محقق W3C بنجاح. يتم بعدها استهداف الصور عبر محددات CSS Selectors، ومن ثم إدراج ملف جافاسكربت الاختياري لدعم عرض تكرار وتموضع صور الخلفية بالشكل التالي.

بالمناسبة، يمكننا إدراج ملف HTC بهذه الطريقة، أو عبر إدراجه في ملف CSS منفصل على سبيل المثال.

٢. DD_belatedPNG

على عكس أغلب الوسائل التي تعتمد على مرشح مايكروسوفت الاحتكاري AlphaImageLoader Filter، تعتمد DD_belatedPNG على تطبيق مايكروسوفت للغة توصيف الرسوميات المتجهية VML.

ايجابيات

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

سلبيات

لا يمكن تطبيق الشفافية على صورة في عنصر الإدخال، فعند استخدمنا للصورة على شكل زر لإرسال النموذج . يتم تجاهل تطبيق الشفافية.
لا يمكن تطبيق تمدد الصورة عبر HTML، وهذه ربما ليست بالمشكلة الكبيرة، حيث لا ينصح بتمدد الصورة الأصلية بهذه الطريقة. ولكن بعض المواقع تستخدمها مثلاً لتكبير أو تصغير الصورة.
ظهور شريط تمرير أفقي على صفحات RTL، ويمكن إخفائه بسهولة عبر تطبيق شيفرة CSS لإخفائه.
```
html {overflow-x:hidden;}
```

طريقة التطبيق

عرض

تحميل

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

يجب التنويه إلى أنه يجب عليك إدراج فئة Class على عناصر الصور التي تريد تطبيق الشفافية عليها، ومن ثم تحديدها كما فعلنا في الشيفرة السابقة عبر محددات CSS.

٣. jquery.pngFix.js

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

ايجابيات

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

سلبيات

نجاح في ٥ من أصل ٨ اختبارات، وهذه تعتبر نسبة ليست بالجيدة.
سلوك غير متوقع للصور عند عدم تحديد الأبعاد، فعندما يتم تخزين الصورة في الملفات المؤقتة cache للمتصفح، يتم إظهار الصورة بشكل صحيح. ولكن عند عمل تحديث للصفحة لا يمكنها معرفة الأبعاد، وبالتالي تظهر بشكل سيء.
تمدد صورة الخلفية المتكررة، فعند إدراج الصورة كخلفية متكررة خلف تقسيمة، تتمدد الصورة بحسب أبعاد التقسيمة.
تمدد صورة الخلفية المتموضعة، فعند إدراج الصورة كخلفية متموضعة، تتمدد أيضاً الصورة حسب أبعاد التقسيمة. مما يؤدي إلى عدم جدواها عند استخدام صورة PNG للموقع بتقنية CSS Sprites.

طريقة التطبيق

عرض

تحميل

بعد تحميل الملف المضغوط من الموقع، وفك ضغطه، ستحتاج إلى ملفين هما jquery.pngFix.js أو إذا كنت تريد النسخة المضغوطة منه jquery.pngFix.pack.js، والصورة blank.gif.

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

ويمكن أيضاً تحديد العناصر التي تحتوي على صور PNG شفافة باستخدام محددات CSS بالطريقة التالية.

$(function(){
	$('div.examples').pngFix();
});

ربما تحتاج إلى تعديل الخصائص إذا كان مسار الصورة الفارغة blank.gif ليس في نفس المجلد مع الملف.

$(function(){
	$('div.examples').pngFix( { blankgif:'ext.gif' } );
});

٤. IE7.js

تقوم مكتبة IE7 للجافاسكربت بتغير سلوك الإنترنت إكسبلورر ٦ ليصبح موافقاً للمعايير القياسية. تصلح الكثير من مشاكل HTML وCSS، بالإضافة إلى إصلاح مشكلة الشفافية لصور PNG على IE6 وIE5.

ايجابيات

ترقية متصفح IE6 ليصبح موافقاً للمعايير القياسية، حيث لا تتغلب على مشكلة الشفافية في صور PNG فحسب، بل تصلح مشاكل كثيرة على المتصفح.

سلبيات

نجاح في ٤ من أصل ٨ اختبارات، وهذه تعتبر نسبة ليست بالجيدة.
صعوبة التطبيق، يجب إعادة تسمية كل صورة PNG شفافة بحيث ينتهي الاسم بعبارة “-trans”. مثل “png-trans.png”.
سلوك غير متوقع للصور عند عدم تحديد الأبعاد، حيث عندما يتم تخزين الصورة في الملفات المؤقتة cache للمتصفح، يتم إظهار الصورة بشكل صحيح. ولكن عند عمل تحديث للصفحة لا يمكن معرفة الأبعاد، وبالتالي تظهر بشكل سيء.
تمدد الصورة عند إدراج حشوة، حيث ستحدث مشكلة عند تطبيق هذه التقنية عند استخدام نمط على الصورة بحشوة.
عدم تطبيق الشفافية على صورة الخلفية المتكررة، فعند إدراج الصورة كخلفية متكررة خلف تقسيمة، لا يتم تطبيق الشفافية عليها.
عدم تطبيق الشفافية على صورة الخلفية المتموضعة، فعند إدراج الصورة كخلفية متموضعة، لا يتم تطبيق الشفافية عليها.

طريقة التطبيق

عرض

تحميل

تحتاج إلى إعادة تسمية كل صورة PNG شفافة تود تطبيق تأثير الشفافية عليها، بحيث ينتهي الاسم بعبارة “-trans”. وهذا ربما شيء متعب لو كان لديك الكثير من الصور. بعد إعادة التسمية عليك بإدراج المكتبة، ويمكنك إدراجها مباشرة عبر خوادم شركة قوقل. ولا حاجة لتحميل الملفات على الخادم الشخصي.

٥. Unit PNG Fix

تقنية أخرى تعتمد على مرشح مايكروسوفت AlphaImageLoader Filter عبر الجافاسكربت. ولكني رأيتها من أسوء الوسائل لتطبيق شفافية PNG، فقد فشلت في ٥ اختبارات من ٨ لتطبيق الشفافية. وهناك سبب، هو أن مطوري المكتبة عمدوا عدم دعم بعض أنماط معينة عند تطبيق الشفافية.

ايجابيات

سهولة التطبيق، بحيث يمكننا إدراج سطر واحد لتطبيق الشفافية.

سلبيات

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

طريقة التطبيق

عرض

تحميل

تحتاج بعد تحميل وفك ضغط الملف من الموقع، إلى استخراج ملفان، هما unitpngfix.js، والصورة الفارغة clear.gif. يجب تحديد مسار الصورة الفارغة في ملف unitpngfix.js إذا كان مساراً مختلفاً عن مسار ملف الجافاسكربت.

var clear="clear.gif"; //path to clear.gif

الآن وبكل سهولة، يمكنك إدراج ملف الجافاسكربت على مستند HTML، في جملة الإنترنت إكسبلورر الشرطية كالتالي.

وسائل أخرى تستحق الذكر

PNGHack، تعتمد على الجافاسكربت، وسهلة نسبياً في تطبيقها.
Supersleight jQuery، إضافة أخرى لمكتبة jQuery لتطبيق الشفافية باستخدام تقنية SuperSleight.

كيفية استخدام reCAPTCHA في التطبيقات لمحاربة السخام

عبدالرحمن العتيبة — Sun, 15 Nov 2009 06:30:26 +0000

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

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

سأقوم في هذا المقال بشرح طريقة تطبيق رﻱكابتشا باستخدام 3 طرق مختلفة. أولاً باستخدام PHP، وبعدها بتطبيق شكل مخصص ليتلائم أكثر مع شكل الموقع المراد إدراج الخدمة فيه، وأخيراً باستخدام تقنية أجاكس AJAX.

كيف تساعد رﻱكابتشا على تحويل الكتب القديمة إلى كتب رقمية؟

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

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

كيفية استخدام رﻱكابتشا

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

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

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

استخدام رﻱكابتشا مع PHP

عرض

تحميل

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

الخطوة 1: إدراج المكتبة والمفاتيح

require_once('recaptchalib.php');

//استبدل XXXX مع المفاتيح التي موجودة على http://recaptcha.net/api/getkey
$publickey = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
$privatekey = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

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

الخطوة 2: تعريب رسائل الخطأ في مصفوفة

$error_ar = array(
	'invalid-site-public-key' => 'المفتاح العلني للموقع غير صحيح.',
	'invalid-site-private-key' => 'المفتاح الخاص للموقع غير صحيح.',
	'invalid-request-cookie' => 'عامل التحدي للتحقق غير صحيح.',
	'incorrect-captcha-sol' => 'حل كابتشا غير صحيح.',
	'verify-params-incorrect' => 'عوامل التحقق كانت غير صحيحة.',
	'invalid-referrer' => 'المحيل غير صحيح.',
	'recaptcha-not-reachable' => 'خطأ من الخادم.'
);

قمت بتعريب بعض رسائل الأخطاء التي تظهر عند عدم التحقق من رﻱكابتشا، ووضعها في مصفوفة لاستدعائها لاحقاً.

الخطوة 3: التحقق من مدخلات رﻱكابتشا ومطابقتها

$resp = null;

if ($_POST["submit"])
{
	if (empty($_POST["name"]) || empty($_POST["recaptcha_response_field"]))
	{
		echo "بعض الحقول تركت فارغة!";
	}
	else
	{
		$resp = recaptcha_check_answer ($privatekey,
						$_SERVER["REMOTE_ADDR"],
						$_POST["recaptcha_challenge_field"],
						$_POST["recaptcha_response_field"]);

		if ($resp->is_valid)
		{
			echo "مبروك يا " . $_POST["name"] . "، لقد أجبت إجابة صحيحة!";
		}
		else
		{
			echo $error_ar[$resp->error];
		}
	}
	echo ' إعادة المحاولة.';
}

في البداية نتأكد أولاً إذا كان النموذج قد تم إرساله واستقباله في PHP عبر المتغير $_POST["submit"]. حيث هذا المتغير سيكون مسجلاً إذا تم الإرسال عبر الضغظ على زر “موافق” لأنه يحمل الخاصية name تساوي submit.

إذا تم ترك أحد الحقول فارغة، سواء الاسم عبر متغير $_POST["name"] أو حقل جواب رﻱكابتشا $_POST["recaptcha_response_field"]. سيتم إظهار رسالة توضيحية “بعض الحقول تركت فارغة!”. وإذا كانت الحقول معبئة، سيتم متابعة التحقق.

الآن، سيتم إنشاء كائن باسم $resp عبر استخدام دالة الإنشاء recaptcha_check_answer والتي تم إدراجها عبر ملف recaptchalib.php. تهتم هذه الدالة بالاتصال بخادم رﻱكابتشا والتحقق منها. تقبل عدد من المتغيرات. الأول هو المفتاح الخاص، الثاني هو عنوان IP الخاص بالمستخدم، الثالث هو حقل معرفة نوع التحدي لرﻱكابتشا، والأخير هو الجواب لتحدي رﻱكابتشا من قبل المستخدم.

بعدها نقوم بالتحقق من جواب الخادم، فإذا كان جواباً صحيحاً، سيحمل متغير is_valid في كائن $resp قيمة صحيحة true. أما إذا كان غير ذلك، فسيتم إرجاع خطأ للمستخدم وتعريبه حسب نوعه باستخدام مصفوفة التعريب التي سبق إنشاءها.

أخيراً، نقوم بعرض رابط لإعادة المحاولة، وهو عبارة عن رابط فارغ فقط لإعادة تحميل الصفحة.

الخطوة 4: عرض أو عدم عرض النموذج




	
		* ما هو اسمك؟
		
	

	
		* هل أنت انسان؟
		
	

	* كل الحقول مطلوبة!

ستلاحظ في البداية السؤال عن متغير $_POST["submit"] عن ما إذا كان يحمل قيمة. فإذا لم يكن يحمل أي قيمة، فمعناه أن المستخدم يعرض النموذج لأول مرة ولم يتم إرساله من قبل. وإذا كان لا يحمل قيمة، فمعناه أن النموذج تم إرساله، لذلك سيتم إخفاءه. ما يساعدنا على معرفة ذلك هو خاصية action في عنصر النموذج form الفارغة. وهي حيلة بسيطة لإعادة تحميل نفس الصفحة عند إرسال النموذج، وبعدها يتم تسجيل المتغيرات المطلوبة والتي تم شرحها في الخطوات السابقة.

يتم إدراج رﻱكابتشا بطريقة ديناميكية عبر دالة المساعدة recaptcha_get_html والتي تعرض الشيفرة المطلوبة لعرض رﻱكابتشا وكافة ملحقاتها.

الخطوة 5: تعريب رﻱكابتشا

var RecaptchaOptions = {
	lang: 'ar',
	custom_translations : {
				visual_challenge : "احصل على تحدي مرئي",
				audio_challenge : "احصل على تحدي مسموع",
				refresh_btn : "احصل على تحدي جديد",
				instructions_visual : "اكتب الكلمتين:",
				instructions_audio : "اكتب ما تسمعه:",
				help_btn : "مساعدة",
				play_again : "إعادة تشغيل الصوت مرة أخرى",
				cant_hear_this : "تحميل الصوت بصيغة MP3",
				incorrect_try_again : "خطأ. أعد المحاولة."
				}
};

سنضيف بعض الشيفرات الخاصة بتعريب محتوى رﻱكابتشا عن طريق الجافاسكربت في أعلى الصفحة.

.recaptchatable label.recaptcha_input_area_text
{
	text-align:right !important;
	direction:rtl !important;
}

ومن ثم نضيف الشيفرات المتعلقة بالمظهر الجمالي بواسطة CSS أيضاً في الأعلى.

استخدام رﻱكابتشا بشكل مخصص

عرض

تحميل

سنرى الآن كيف يمكننا تخصيص شكل رﻱكابتشا بشكل يتلائم أكثر مع الموقع المراد إدراجه فيه. ولأنها نفس طريقة الاستخدام مع PHP، فلن يتم إعادة شرح عمل الإرسال والتحقق.

الخطوة 1: تعديل خيارات رﻱكابتشا

var RecaptchaOptions = {
	theme: 'custom',
	lang: 'ar',
	custom_theme_widget: 'recaptcha_widget',
	custom_translations : {
				visual_challenge : "احصل على تحدي مرئي",
				audio_challenge : "احصل على تحدي مسموع",
				refresh_btn : "احصل على تحدي جديد",
				instructions_visual : "اكتب الكلمتين:",
				instructions_audio : "اكتب ما تسمعه:",
				help_btn : "مساعدة",
				play_again : "إعادة تشغيل الصوت مرة أخرى",
				cant_hear_this : "تحميل الصوت بصيغة MP3",
				incorrect_try_again : "خطأ. أعد المحاولة."
				}
};

لا شيء جديد هنا، سوى خيارين، الخيار الأول theme يجب أن يحتوي على custom ومعناها التخصيص. والخيار الآخر custom_theme_widget يجب أن يحتوي على اسم المعرّف للتقسيمة التي ستحتوي على رﻱكابتشا.

الخطوة 2: عناصر التخصيص لكل جزئية


	
		* ما هو اسمك؟
		
	
	
		* هل أنت انسان؟
		
			
			
				خطأ الرجاء المحاولة مرة أخرى
				أدخل الكلمات الموجودة في المربع:
				أدخل الأرقام التي تسمعها:
				
				احصل على كابتشا آخر
				احصل على كابتشا مسموعة
				احصل على كابتشا مرئية
				مساعدة
			
			
			
		
		
	* كل الحقول مطلوبة!

ستلاحظ إدراج العديد من التقاسيم والعناصر، وذلك لتخصيص الشكل تماماً بما يناسب الموقع الذي تريد إدراج رﻱكابتشا فيه.

التقسيمة التي ستحتوي على رﻱكابتشا والتي لها معرّف id باسم recaptcha_widget ستكون مخفية مبدأياً. وسيتم إظهارها باستخدام الجافاسكربت.

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

عنصرا noscript وiframe يمكنانا من الرجوع بأمان إلى رﻱكابتشا بطريقة iframe عند عدم تفعيل الجافاسكربت لدى المستخدم.

استخدام رﻱكابتشا مع الأجاكس AJAX

عرض

تحميل

الخطوة 1: إنشاء ملف الوكيل لطلب معلومات رﻱكابتشا من الخادم

 'المفتاح العلني للموقع غير صحيح.',
	'invalid-site-private-key' => 'المفتاح الخاص للموقع غير صحيح.',
	'invalid-request-cookie' => 'عامل التحدي للتحقق غير صحيح.',
	'incorrect-captcha-sol' => 'حل كابتشا غير صحيح.',
	'verify-params-incorrect' => 'عوامل التحقق كانت غير صحيحة.',
	'invalid-referrer' => 'المحيل غير صحيح.',
	'recaptcha-not-reachable' => 'خطأ من الخادم.'
);

# the response from reCAPTCHA
$resp = null;

# was there a reCAPTCHA response?
if (empty($_POST["recaptcha_response_field"]))
{
	echo "حقل الكابتشا مطلوب!";
}
else
{
	$resp = recaptcha_check_answer ($privatekey,
					$_SERVER["REMOTE_ADDR"],
					$_POST["recaptcha_challenge_field"],
					$_POST["recaptcha_response_field"]);

	if ($resp->is_valid)
	{
		echo "مبروك، لقد أجبت إجابة صحيحة!";
	}
	else
	{
		echo $error_ar[$resp->error];
	}
}
echo ' إعادة المحاولة.';
?>

سيتم إنشاء ملف مساعد للأجاكس نسميه ajax.recaptcha.php يهتم بطلب المعلومة من خادم رﻱكابتشا وتقديم المعلومة. والسبب في إنشاء ملف كهذا يعمل بمثابة الوكيل Proxy بين الأجاكس في موقعنا وخوادم رﻱكابتشا، هو أنه لأسباب أمنية في المتصفحات، يتم منع طلب المعلومات مباشرة بطريقة الأجاكس بين نطاقات مختلفة Cross domain.

ستلاحظ أنه لا اختلاف جذري بين هذا الملف، وملف رﻱكابتشا باستخدام PHP. سوى أنه تم الاستغناء عن عناصر HTML، وذلك لأننا نريد فقط أن نأخذ معلومة بسيطة.

الخطوة 2: إنشاء دوال المساعدة في طلب واستقبال الأجاكس

function createRequestObject()
{
	var req;
	if(window.XMLHttpRequest)
	{
		req = new XMLHttpRequest();
	}
	else if(window.ActiveXObject)
	{
		req = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else
	{
		alert('حصل خطأ في طلب الصفحة...الرجاء المحاولة مرة أخرى وإذا لم تنفع جرب أن تنزل نسخة جديدة من المتصفح');
	}
	return req;
}

var http = createRequestObject();

function sendRequestPost(recaptcha_challenge_field, recaptcha_response_field)
{
	http.open('post', 'ajax.recaptcha.php');
	http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	http.onreadystatechange = handleResponse;
	http.send('recaptcha_challenge_field='+recaptcha_challenge_field+'&recaptcha_response_field='+recaptcha_response_field);
}

function handleResponse()
{
	document.getElementById("ajaxResp").style.display = 'block';
	document.getElementById("dynamic_recaptcha").style.display = 'none';
	document.getElementById("submitDiv").style.display = 'none';
	var ajaxTest = document.getElementById("ajaxResp");
	ajaxTest.innerHTML = 'جاري التحقق...';
	if(http.readyState == 4 && http.status == 200)
	{
		var response = http.responseText;
		if(response)
		{
			ajaxTest.innerHTML = response;
		}
	}
}

function getAnswer()
{
	sendRequestPost(Recaptcha.get_challenge(), Recaptcha.get_response());
}

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

الخطوة 3: إعادة إنشاء رﻱكابتشا بتقنية الأجاكس

function showRecaptcha(element)
{
	//استبدل XXXX مع المفاتيح التي موجودة على http://recaptcha.net/api/getkey
	Recaptcha.create("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", element, {
		theme: 'blackglass',
		lang: 'ar',
		custom_translations : {
					visual_challenge : "احصل على تحدي مرئي",
					audio_challenge : "احصل على تحدي مسموع",
					refresh_btn : "احصل على تحدي جديد",
					instructions_visual : "اكتب الكلمتين:",
					instructions_audio : "اكتب ما تسمعه:",
					help_btn : "مساعدة",
					play_again : "إعادة تشغيل الصوت مرة أخرى",
					cant_hear_this : "تحميل الصوت بصيغة MP3",
					incorrect_try_again : "خطأ. أعد المحاولة."
					},
		callback: Recaptcha.focus_response_field
	});
	document.getElementById("dynamic_recaptcha").style.display = 'block';
	document.getElementById("ajaxResp").style.display = 'none';
	document.getElementById("submitDiv").style.display = 'block';
}

يتم إنشاء رﻱكابتشا بالأجاكس عبر استدعاء كائن Recaptcha.create. حيث يستقبل الكائن عدد من المتغيرات، أولاً المفتاح العلني، ثانياً اسم المعرّف Id للعنصر المراد إدراج رﻱكابتشا فيه، وأخيراً الخيارات.

الخيارات تكون مشابهة تماماً للخيارات التي سبق شرحها باستخدام PHP. ولكن هناك خيار جديد وهو callback. ويتيح هذا الخيار استدعاء دالة بعد الإنتهاء من تحميل رﻱكابتشا.

في نهاية الدالة نقوم بإخفاء بعض العناصر وإظهار البعض الآخر لتحسين قابلية الاستخدام.

الخطوة 4: عرض النموذج في HTML


	أظهر الكابتشا!

في عنصر النموذج form، تم استخدام حدث عند الإرسال onsubmit نستدعي دالة getAnswer() والتي تهتم بطلب المعلومة من الخادم وعرضها. من المهم إلحاق استدعاء الدالة بإرجاع خطأ return false، والسبب هو أننا لا نريد أن يتم إرسال النموذج بطريقة HTML، إنما بطريقة الأجاكس. وإرجاع الخطأ يوقف الإرسال عن طريق HTML.

في عنصر الرابط، سنرى إدراج الحدث عند النقر onclick، نستدعي الدالة showRecaptcha وذلك لإظهار رﻱكابتشا في تقسيمة div التي لها معرّف dynamic_recaptcha.

الخلاصة

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

إذا طبقتم الدرس في مواقع تديرونها، الرجاء منكم مشاركتنا إياها في التعليقات.

مقالات ذات صلة:

أفضل 10 خدمات لتلوين ومشاركة الشيفرات على الويب

عبدالرحمن العتيبة — Mon, 09 Nov 2009 09:01:24 +0000

هل أردت مشاركة شيفرة أو جزء منها مع أشخاص آخرين؟ أو ربما واجهتك مشكلة في جزئية معينة في الشيفرة وأردت طلب المساعدة من الغير، ولكن لم تعرف كيف تعرضها عليهم؟

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

Codepad

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

Pastie

خدمة Pastie تمكن من تلوين وحفظ الشيفرات، ولكن لعل أهم ما يميزها هو أتاحة اختيار الألوان بطرق مختلفة باستخدام المواضيع Themes لكل شكل. وأيضاً التكامل مع Ruby on Rails، لأن هذه الأداة مبنية عليها. وتتيح إمكانية لصق الشيفرة ضمنياً بين المحتوى على الموقع أو المدونة embedded code. لذا إن كان لديك مدونة مجانية على سبيل المثال، وأردت إدراج الشيفرات الملونة لشرح الأمثلة، فهذه الخدمة ستسهل عليك الكثير.

gist.github

أداة gist من مطوري مستودعات github للتحكم بالمراجعات revision control، وبما أنها جاءت من مطورين لهم باع طويل في إدارة الشيفرات المصدرية، فهل حزرتم أهم ميزة في هذه الأداة؟ نعم، هي فكرة المستودع لكل شيفرة. فبمجرد لصق شيفرة معينة وحفظها يتم إنشاء مستودع لها، مما يمكن المطورين من التعديل عليها في وقت لاحق، ومشاهدة الإختلافات بين المراجعات المختلفة باستخدام diff لعمل الترقيعات patches.

snipt.org

snipt.org توفر واجهة لبرمجة التطبيقات API، والتي بالتالي تمكن من استخدام خدمة التلوين ومشاركة الشيفرات عبر البرامج والتطبيقات الأخرى. لدى المطورين تطبيق على Adobe Air لرؤية عمل الواجهة، ولديهم أيضاً إضافة لوردبريس. وكخدمة Pastie السابق ذكرها، تمكنك هذه الخدمة أيضاً من تضمين الشيفرات على الموقع، واختيار الألوان التي تراها مناسبة.

slexy

تتيح خدمة slexy لصق الشيفرات عبر الويب كالخدمات الأخرى، ولكن تتميز بإمكانية استخدام شاشة الأوامر CLI باستخدام برنامج Patebinlt. وبالإمكان أرشفة الشيفرات، وحفظها بخصوصية، والمشاركة، والرد على الشفرات بشفرات أخرى لتوضيح الفروقات.

PasteHTML

ليست بالخدمة التي تتيح لصق الشيفرات بعدة لغات وتلوينها كالخدمات السابق ذكرها، ولكنها مميزة. تمكنك PasteHTML من كتابة شيفرات HTML ومن ثم حفظها وإمكانية عرضها كمستند HTML ومشاركته مع الآخرين. أحد الاستخدامات ممكن أن تكون مشاركة المطورين الآخرين بشيفرة JavaScript أو CSS لا تعمل بالشكل المطلوب، وأردت حلاً لها. فيمكنك بالتالي لصقها هناك. توفر واجهة لبرمجة التطبيقات، وأيضاً bookmarklet للحفظ السهل عبر المتصفح لمستندات HTML.

MathBin.net

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

LodgeIt

لدى خدمة LodgeIt واجهة جميلة ومرتبة. بالإضافة إلى هذا الترتيب الجميل لواجهة الاستخدام، لدى الخدمة العديد من المزايا، منها المميزات المعروفة من تلوين، ومشاركة الشيفرات، والمميزات الأخرى، كالاستعلام عن بعد باستخدام XML-RPC أو JSON لجلب كل المعلومات بالنسبة للشيفرة، والمقارنة بين المراجعات باستخدام diff.

pastebin.ca

ليست بأكثر الواجهات جذابةً، ولكنها تؤدي الغرض. حيث توفر خدمة pastebin.ca التكامل مع IRC عبر بوت خاص للصق الشيفرات، وتوفر واجهة لبرمجة التطبيقات. وهناك بعض التطبيقات التي تستخدم هذه الواجهة.

Bespin

يطلق على هذه الخدمة الشيفرة في السحاب Code in the cloud، ومعنى السحاب هنا أي مجموعة الخوادم التي يتم تخزين الشيفرات عليها، وتقديمها لمن يطلبها. هي خدمة من موزيلا، عبارة عن محرر شيفرات على الويب للمطورين باستخدام التقنيات الحديثة في HTML 5 كعنصر canvas. المثير في هذه الأداة هو إمكانية التشارك المباشر مع المطورين الآخرين، وتحرير الشيفرات وتلوينها، ومن ثم حفظ الملفات على الخوادم، كل هذا باستخدام لا شيء سوى المتصفح. ولكنها لوقت كتابة هذا المقال، للأسف لا تدعم اللغة العربية.

أي من الخدمات أعجبتكم أكثر من غيرها؟ الرجاء مشاركتنا رأيكم في التعليقات.

مفضلتنا الدورية #2 من ‎@almashroo

عبدالرحمن العتيبة — Fri, 06 Nov 2009 13:00:02 +0000

في هذه السلسة من المقالات الدورية، سنقوم بعرض أفضل ما نقوم بتدوينه ومشاركته على حساب المشروع على تويتر twitter.

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

أفضل طريقة للحفاظ على متابعة هذه الموارد، هي متابعتنا عن طريق حسابنا على تويتر، وإن كان قد فاتكم شيء، ففي هذا المقال سنقوم بعرض أفضل ما عرضناه في الفترة القليلة السابقة.

لكي لا يفوتكم شيء مما نعرضه في المستقبل، ببساطة تابعونا على @almashroo.

أكثر من 50 درس تصميم أيقونات عالية الجودة

45 تصميم لشعارات ذكية وذات معنى

10 إضافات رائعة لمكتبة JQuery لتحسين النماذج‬

44 مثال لمواقع استوحت من الطبيعة في تصميمها

20‬ درس إليستراتور ‫illustrator‬ لعمل شخصيات كرتونية مرحة

أكثر من 70 خلفية مستوحاة من أبل ‫Apple

الخطوط العربية : قواعد ، أفكار و حيل

30 تصميم لمواقع تستخدم الألوان بدرجة مفرطة‬

قائمة أدواتي كمصممة حرة .. فعالية أكبر ووقت أقل

‫30 موقع بالأبيض والأسود للإستلهام

‬

تخطيط وتصميم موقع أنيق ومليء بالألوان باستخدام Photoshop‬

25 أداة مجانية لمصممي ومطوري الويب

أفضل ممارسات صفحة “اتصل بنا” مع دراسة 22 حالة‬

40 قالب جميل لمستخدمي مدونات Blogger

كيف تخلق نصاً ثلاثي الأبعاد يلفت الأنظار باستخدام Photoshop‬

30 خلفية وخامة ورقية مجانية

طرق لتحسين أداء CSS بواسطة jQuery – جزء 1

تصميم بطاقة عمل جاهزة للطبع باستخدام الفوتوشوب

أكثر من 200 أيقونة مجانية لخدمة RSS‬

‫11 من أكثر البرامج المفتوحة المصدر شعبية في كل الأوقات

تفاصيل أكثر عن نماذج HTML

‫30 إعلان مبدع لشركة أديداس

مقالات ذات صلة:

مفضلتنا الدورية #1 من ‎@almashroo

التحميل الكسول في جافاسكربت

عبدالرحمن العتيبة — Tue, 03 Nov 2009 07:00:34 +0000

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

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

من أهم استخدامات تقنية التحميل الكسول في لغة جافاسكربت، هي تأخير استدعاء الملفات الخارجية External Scripts، أو الصور، في مستند HTML إلى وقت حاجة المستخدم لها. على سبيل المثال، في الصفحات التي تحتوي صوراً كثيرة، يمكن استخدام هذه التقنية لتأخير تحميل الصور التي تكون في الأسفل والغير مرئية حالياً من قبل المستخدم لعدم كونها في مساحة الرؤية visible area للمتصفح إلى حين نزول المستخدم إليها لرؤيتها.

لماذا التحميل الكسول في جافاسكربت؟

هناك 3 أسباب حقيقة تفيد عند استخدام تقنية التحميل الكسول:

تحسين سرعة تحميل الصفحة
تخفيف حمل الصفحة
تقليل استهلاك معدل نقل البيانات Bandwidth

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

بعض الأمثلة التطبيقية لتحميل الصور تحميلاً كسولاً

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

المثال بدون استخدام التقنية

عرض

تحميل

هذا مثال يتم عرض عدد من الصور المأخوذة من فليكر بترخيص Creative Commons بدون استخدام أي تقنية للتحميل الكسول. وسيتم استخدام نفس المثال لاحقاً ولكن باستخدام التحميل الكسول لمعرفة الفرق بينهم في السرعة وحمل الصفحة.

مثال باستخدام مكتبة YUI

عرض

تحميل

تستخدم مكتبة ياهوو YUI 3 التحميل المتأخر للصور عن طريق أداة ImageLoader. وسنستخدم مثال تأخير تحميل الصور تحت الطيّة Below the fold.

إدراج المكتبة الأساسية

يجب علينا في البداية إدراج المكتبة الأساسية YUI، وعن طريقها يتم تحميل أداة ImageLoader، وسوف نقوم بإدراجها مباشرة من خوادم شركة ياهوو.

تسجيل الصور

var foldGroup = new Y.ImgLoadGroup({ name: 'fold group', foldDistance: 25 });
foldGroup.registerImage({ domId: 'img1', srcUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg' });
foldGroup.registerImage({ domId: 'img2', srcUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg' });
foldGroup.registerImage({ domId: 'img3', srcUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg' });
foldGroup.registerImage({ domId: 'img4', srcUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg' });
foldGroup.registerImage({ domId: 'img5', srcUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/japan.jpg' });

نقوم بتسجيل الصور في مجموعة باسم fold group، ونقوم بتسجيل كل صورة على حسب المعرف domId في HTML ومصدر الصورة srcUrl. أما بالنسبة لشفرة HTML فستكون كالتالي:

هناك العديد من الخيارات التي يمكنكم التحكم بها، على سبيل المثال، متغير foldDistance يهتم بمقدار المسافة قبل الطيّة لبدء تحميل الصور، وقد حددناه بمقدار 25 بيكسل.

لدى هذه المكتبة في نظري قصور من ناحية قابلية الاستخدام، فهي تقوم بتسجيل وتحميل الصور باستخدام الجافاسكربت، ولكن ماذا لو كان المستخدم لديه الجافاسكربت معطلة؟

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

مثال باستخدام مكتبة jQuery

عرض

تحميل

استوحت من مكتبة ياهوو YUI للتحميل المتأخر، إضافة Lazy Load لمكتبة jQuery تقوم بعمل رائع للتحميل الكسول للصور، حيث أن طريقة استخدامها سهلة وبسيطة.

إدراج المكتبة الأساسية

سنقوم بإدراج المكتبة الأساسية jQuery مباشرة من خوادم شركة قوقل، وبعدها نقوم بإدراج إضافة Lazy Load.

بعد هذا نقوم بأخذ كل الصور الموجودة في مستند HTML، وتسجيلها في كائن lazyload().

$(function() {
	$("img").lazyload();
});

الآن أصبحت كل الصور الغير مرئية (تحت الطيّة) في مستند HTML ستُحمّل لاحقاً عند نزول المستخدم إليها. وعند تعطيل الجافاسكربت، فلا يهم! لأن الصور ستحمل بالطريقة العادية.

لدى الإضافة العديد من الخيارات، فمثلاً يمكننا إضافة بعض التأثيرات قبل ظهور الصور كتأثير التلاشي FadeIn.

$(function() {
	$("img").lazyload({
		placeholder : "grey.gif",
		effect : "fadeIn"
	});
});

مثال باستخدام مكتبة MooTools

عرض

تحميل

لدى مكتبة MooTools للجافاسكربت أيضاً إضافة Lazy Load من تطوير David Walsh أحد مطوري لب MooTools.

إدراج المكتبة الأساسية

نقوم بإدراج المكتبة الأساسية MooTools أيضاً من خوادم شركة قوقل، وبعدها ندرج ملف إضافة Lazy Load السابق ذكرها.

بعدها وبكل بساطة، عندما يكون مستند HTML جاهزاً، نقوم باستدعاء كائن LazyLoad().

window.addEvent('domready',function() {
	var lazyloader = new LazyLoad();
});

مشكلة محرك ويبكيت WebKit

أمثلة مكتبات jQuery وMooTools يعانون من مشكلة في المتصفحات التي تعتمد على محرك WebKit كمتصفحات سفاري، وكروم، لأنها لا تدعم تقنية التحميل الكسول للصور. وهذا في تصميمها كما أوضح ديف هايت في مشكلة: #6656.

مقاييس كفاءة الأداء Benchmark

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

var from_time = new Date();
from_time = from_time.getTime();

function benchmark_loading_time()
{
	var to_time = new Date();
	to_time = to_time.getTime();
	var msecs = (to_time - from_time);

	alert('تم تحميل الصفحة في ' + msecs + ' جزء من الثانية');
}

ومن ثم مناداتها عند الإنتهاء من تحميل مستند HTML في عنصر body باستخدام حدث عند التحميل “onload”، كالتالي:

النتائج

لأكون عادلاً استخدمت آخر النسخ (عند تاريخ كتابة المقال) لمتصفحات فايرفوكس، انترنت اكسبلورر، وأوبرا، واستثنيت المتصفحات التي تعتمد على WebKit. وجربت فتح صفحة التجارب لكل مكتبة 10 مرات، ومن ثم أخذت المتوسط. وكانت بعض النتائج على غير المتوقع.

الطريقة العادية

YUI 3

MooTools

jQuery

تحميل الصور بطريقة عادية

نستطيع أن نرى أن متصفح أوبرا كان أبطىء المتصفحات في التحميل بالطريقة العادية بمتوسط 3468 جزء من الثانية، بينما نجد متصفح انترنت اكسبلورر يأتي أولاً بمتوسط سرعة 2271 جزء من الثانية. ومتوسط سرعة فايرفوكس كان 2353 جزء من الثانية.

تحميل الصور باستخدام ImageLoader مع مكتبة YUI 3

نلاحظ هنا تحسناً قليلاً باستخدام التحميل المتأخر لياهوو، حيث جاء متصفح فايرفوكس أولاً بمتوسط 1720 جزء من الثانية، بينما انترنت اكسبلورر جاء ثانياً بمتوسط 2289 حزء من الثانية. وأخيراً أوبرا بمتوسط 3289 جزء من الثانية.

تحميل الصور باستخدام Lazy Load مع مكتبة MooTools

هنا كان الفرق واضحاً، فباستخدام التحميل الكسول لمكتبة MooTools نرى فرقاً شاسعاً في وقت التحميل يصل إلى -60% في متصفح فايرفوكس، حيث نزل المتوسط إلى 930 جزءاً من الثانية، أما عن انترنت اكسبلورر وأوبرا فقد شهدا أيضا وقت أقصر في التحميل بمعدل -57% و –20% على التوالي.

تحميل الصور باستخدام Lazy Load مع مكتبة jQuery

كان التحميل الكسول لمكتبة jQuery الأبطىء في تحميل الصفحة، حيث كان هدفنا هو تقليل وقت تحميل الصفحة، فارتدت النتيجة بعكس ما كنت أتصور. زاد وقت تحميل الصفحة عن ماكانت عليه باستخدام الطريقة العادية لتحميل الصور بمقدار +14% في متصفح أوبرا، وأيضاً في انترنت اكسبلورر +13%، وفايرفوكس +9%.

الخلاصة

كما رأينا كيف يمكننا التقليل من استهلاك معدل نقل البيانات Bandwidth، وتخفيف حمل الصفحة وتسريعها باستخدام أدوات بسيطة لجعل الصور تُحمّل لاحقاً. ولكن هناك بعض السلبيات أيضاً، فكما ذكرت مشكلة محرك WebKit مع مكتبات jQuery وMooTools، ولكن تبقى في نظري أفضل من مشكلة تسجيل الصور باستخدام الجافاسكربت التي تستخدمها مكتبة YUI.

أيضاً أثبتت مكتبة MooTools تفوقها في السرعة والأداء عند استخدام تقنية التحميل الكسول على نظرائها. مع العلم أنها أكبر المكتباب من ناحية المساحة 65 KB، بينما مكتبة jQuery وYUI 3 مساحتهم 55.9 KB و14.9 KB على التوالي. وأيضاً دهشت بنتائج متصفح أوبرا البطيئة في تحميل الصور بالطريقة الكسولة.

مقالات ذات صلة:

تعلم برمجة إضافات وردبريس [الجزء الأول]

فراس اللو — Sat, 31 Oct 2009 16:12:53 +0000

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

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

قبل البدء بكيفية البرمجة، أنصحكم باستخدام برنامج Notepad++ من أجل التخلص من مشاكل التراميز كما أنه يُسّهل عملية البرمجة من خلال تلوين الشفرات.

ما ستقوم بعمله هذه الإضافة

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

تحميل

إنشاء ملف الإضافة

طبعاً بعد تنصيب الوردبريس لديك، ندخل إلى مُجلد wp-content ومن ثم مُجلد plugins. نقوم الآن بإنشاء مُجلد باسم الإضافة و ليكن مثلاً almashroo و داخل هذا المُجلد نُنشىء ملف php باسم almashroo.php مثلاً و نفتح هذا الملف، مُلاحظة صغيرة بعد فتح الملف، إذا كُنتم تستخدمون برنامج Notepad++، من قائمة Format نختار Encoding in UTF-8 without BOM من أجل تجنب مشاكل الترميز باللغة العربية. الآن سنبدأ بأول شفرة في الإضافة‪.‬

كما تُلاحظون هذه الشفرة هي عبارة عن تعليق فقط لأنه موجود ضمن محارف التعليق التالية:

/*

*/

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

الآن لو قُمنا بحفظ الملف فقط بوجود هذه السطور و ذهبنا إلى إدارة الإضافات في لوحة تحكم البرنامج سنجد أن الإضافة موجودة! إذا كما تُلاحظون أن هذه الأسطر ضرورية جداً من اجل تعريف البرنامج بوجود الإضافة و كذلك وصف عنها.

تعريف دالة طباعة النص وربطها بالأحداث

الآن نأتي للمرحلة الأهم و هي كتابة الشفرة التي تعرض لنا أي جملة نُريدها، و لكن قبل ذلك أُريد أن أُخبركم، أن الإضافة في الوردبريس هي عبارة عن دوال functions. فمثلاً في حالتنا هُنا، إذا أردنا طباعة جملة فقط مايلزمنا هو دالة بسيطة! ولتكن كالتالي:

function print_stat()
{
	return "هذه أول إضافة لي في الوردبريس";
}

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

add_action('wp_head', print_stat);

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

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

استدعاء دالة طباعة النص في الصفحات

جميل جداً، الآن إنتهينا من كل شيء و قُمنا بتعريف الإضافة في النظام، ولكن الآن كيف سنستدعي الإضافة؟ أو كيف سنستفيد منها في الوقت الراهن؟

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

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

مُلاحظة

يجب أن يكون اسم الإضافة مُميز و يعبّر عن محتوى الإضافة، لأن هناك الآلاف من الإضافات، فتخيل لو كانت كل إضافة حسبما يُريد مٌبرمجها! لذا يُفضّل أن يكون اسم الإضافة مُعبراً عن وظيفتها و بالتالي اسم المجلد الذي ستضع الإضافة فيه سيحمل نفس اسم الإضافة و هذا ما سيميزه عن غيره.

في مثالنا اسمينا المجلد باسم المشروع وكذلك ملف PHP بداخله أيضاً بنفس الاسم. ولكن لنفرض أننا نُريد تغيير اسمه لاسم يُعبر عن وظيفة الإضافة، فمثلاً اسم print_statment هو اسم الإضافة، فنُسمي المجلد عوضاً عن almashroo باسم print_statment والملف الذي بداخل المُجلد و هو عبارة عن ملف الإضافة باسم مُختصر وليكن printstat.php.

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

مقالات ذات صلة:

علماء ومفكرين أسهموا في تطوير الإنترنت العربي

عبدالرحمن العتيبة — Wed, 28 Oct 2009 07:00:28 +0000

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

وتقديراً منّا لجهودهم وإبداعاتهم في هذا المجال، قررنا عرض بعض منهم لكم، لتتعرفوا عليهم، وعلى إسهاماتهم في مجال الإنترنت العربي.

نجيب التونسي

مدير ومؤسس مكتب إئتلاف الشبكة المعلوماتية العالمية W3C بالمغرب. ومحاضر في المدرسة المحمدية للمهندسين بجامعة محمد الخامس أگدال.

إسهاماته

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

يُلقي العديد من المحاضرات والندوات في مختلف المحافل العربية والدولية، ويساهم بشكل فعّال في توصيل وإرساخ معلومات ونشاطات إئتلاف W3C العالمية وما تهدف إليه إلى الشعب العربي.

يقوم أيضاً بكتابة وترجمة المقالات التي تهم مطوري الويب على موقع المكتب على الشبكة.

طلال أبو غزالة

لدى السيد أبو غزالة العديد من المناصب القيادية والشرفية في كثير من المجالات، أما بالنسبة لما هو متعلق بالتكنولوجيا والإنترنت. فهو المؤسس والرئيس التنفيذي لمجموعة طلال أبو غزالة الدولية، والتي لها عدد من الخدمات المتعلقة بتقنية المعلومات، ورئيس معهد العالم العربي للإنترنت، وهو أول رئيس لمجلس إدارة فريق خبراء أسماء النطاقات العربية. وعُيّن مؤخراً كرئيس للتحالف الدولي لتكنولوجيا الاتصالات والمعلومات UN GAID خلفاً لرئيس شركة “انتل” كريج باريت.

إسهاماته

بحكم منصب الأستاذ أبو غزالة كأول رئيس لإئتلاف أسماء النطاقات العربية AINC، فقد ساهم في صياغة الاتفاقية المبرمة بين الإئتلاف العربي والإئتلاف العالمي للنطاقات المتعددة اللغات MINC.

تقوم مجموعة أبوغزالة أيضاً بحجز النطاقات العربية والنطاقات العليا للدول ccTLD عبر خدماتها.

ميشيل قصّار

المدير التقني لدى إئتلاف الشفرة الموحدة يونيكود Unicode. عمل سابقاً كرئيس أول لبرنامج البنية التحتية للعولمة وتقنية الخطوط لدى شركة مايكروسوف Microsoft، وقبلها عمل لدى شركة HP لمدة 24 سنة وكان آخر مناصبه هو مدير العولمة للشركة.

إسهاماته

لعب السيد قصّار دوراً واضحاً وكبيراً في مجتمع إئتلاف يونيكود، فقد أسهم في إدارة ووضع الخوارزمية ثنائية الاتجاه ليونيكود Unicode Bidirectional Algorithm لدعم اللغات التي تكتب من اليمين كالعربية.

وساهم أيضاً في تأليف كتب معايير يونيكود النسخة 3 والنسخة 4.

د. عبدالعزيز الزومان

أستاذ باحث مشارك في مدينة الملك عبدالعزيز للعلوم التقنية، ومدير المركز السعودي لمعلومات الشبكة بوحدة خدمات الإنترنت في مدينة الملك عبدالعزيز للعلوم التقنية.

إسهاماته

يعتبر الدكتور الزومان أحد روّاد تعريب أسماء النطاقات Domain names العربية، حيث أسهم في إنشاء المشروع التجريبي لأسماء النطاقات العربية بتوصية من جامعة الدول العربية، وهو الآن يرأس اللجنة التوجيهية لهذا المشروع.

خالد فتّال

الرئيس والمدير التنفيذي للإئتلاف الدولي لأسماء النطاقات متعددة اللغات MINC. وعضو مؤسس ومدير تنفيذي لإئتلاف النطاقات العربية AINC. وعضو اللجنة الإستشارية لرئاسة الآيكان ICANN لأسماء النطاقات الدولية.

إسهاماته

للسيد خالد فتّال إسهامات كثيرة في مجال الإنترنت، وخصوصاً في مجال تدويل أسماء النطاقات Internationalized Domain Names. حيث من خلال عمله لدى إئتلاف الآيكان منذ إنطلاقته الأولى، حرص على هذه النقطة، وضرورة تدويل النطاقات بحيث يمكن لأي مستخدم للإنترنت أن يستخدم لغته الأم عند كتابة اسم النطاق.

في عام 2004، قامت منظمة NASK البولندية، وهي المنظمة المسؤولة عن حجز أسماء النطاقات البولندية .pl، بنشر جدول المحارف العربية وإرسالها إلى منظمات الآيكان ICA NN والأيانا IANA، مما أثار حفيظة العرب على الإنترنت، واحتجاجاً واسعاً لنشر المحارف العربية من قبل جهة أجنبية. وكان من بين أهم ردود الأفعال، هي رسالة وجهها فتّال إلى هذه المنظمة والمنظمات العالمية موضحاً فيها خطورة مثل هذا العمل، لما فيه من سلب لحقوق العرب في الحفاظ والسيطرة على لغتهم، وقد أثمرت عن اعتذار هذه المنظمة لهذا التصرف، وسحب الجدول ليتم إرساله بشكل رسمي عبر منظمة عربية.

د. يوسف نصير

رئيس شعبة تقنية المعلومات والاتصال في لجنة الأمم المتحدة الإقتصادية والإجتماعية لغربي آسيا UN-ESCWA.

إسهاماته

قبل توليه رئاسة شعبة تقنية المعلومات والاتصال في UN-ESCWA. قام الدكتور نصير بإنشاء المركز الوطني الأردني لتفنية المعلومات في عام 1993 وقام برئاسته إلى عام 2006. قام أيصاً بقيادة الجهود للحكومة الأردنية لإنشاء مجتمع المعلومات للدولة. دائماً ما يسوّق لمشاركة التقنيين العرب في المحافل الدولية ويلقي المحاضرات والندوات حول هذا الجانب.

عادل علاوي

المالك والمدير العام لشركة ديوان للبرمجيات المحدودة Diwan Software Limited.

إسهاماته

يشارك السيد عادل بنشاط في مؤتمرات IUC للتدويل Internationalization والشفرة الموحدة يونيكود Unicode، وله إسهامات كثيرة في مجالات عديدة، منها، خوارزمية ثنائية الاتجاه BiDi، الشفرة الموحدة Unicode، الخطوط العربية على الحاسوب ومنها خط Geeza Pro الشهير على الماك، برمجة وتعريب التطبيقات.

يدعم وبشكل كبير تطوير برمجيات المصادر الحرة، ويشارك في القوائم البريدية التطويرية لهذه البرمجيات، ويساعدها في تدويلها وتعريبها، من هذه البرمجيات، Google Web Toolkit (GWT)، تطبيقات شركة موزيلا Mozilla، تطبيقات المكتب المفتوح OpenOffice.

لشركة ديوان وصاحبها السيد عادل، الفضل الكبير في تطوير اللغة العربية على نظام الماك Mac بالتعاون مع شركة أبل Apple.

د. نبيل العيايده

باحث في منظمة INRIA، وعضو خبير في إئتلاف W3.

إسهاماته

ينسب للدكتور العيايده اختراع تقنية SMIL والتي نرى تطبيقها الواضح اليوم فيما يعرف برسائل الوسائط المتعددة MMS على الهواتف المحمولة. حيث وضعت رسالته لنيل شهادة الدكتوارة “The Design of Structured Language for Multimedia Documents for the Web” وتعني بالعربية “التصميم للغة هيكلية لمستندات الوسائط المتعددة للويب” أساس تقنية SMIL.

وتم أول تطبيق لتقنية SMIL على برنامج كتبه الدكتور العيايده لبرهان نظريته، اسماه Madeus.

يشارك في العديد من المحافل العربية والدولية في مجال التكنولوجيا والإنترنت، وقد كان لي شخصياً شرف مقابلته، وإجراء مقابلة معه قد تم نشرها سابقاً على المشروع، على هامش “مؤتمر الدوحة للعلماء المغتربين“.

خالد قوبعة

رئيس معهد العالم العربي للإنترنت AW2I، وعضو الاتحاد العربي لجمعيات الانترنت، وعضو مكتب تسجيل المصلحة العامة، والذي يهتم بتسجيل نطاقات .org، وأيضاً عضو سابق في الآيكان ICANN.

إسهاماته

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

كمال منصور

مدير المنتجات الغير-لاتينية لدى شركة Monotype Imaging Inc.، وكان سابقاً محاضراً في جامعة ستانفورد في علم اللغات.

إسهاماته

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

ينسب إليه أيضاً مشاركته في تصميم خط Arial Unicode MS والمستخدم في أنظمة تشغيل مايكروسوفت ويندوز، وفي آخر نسخ نظام تشغيل أبل ماك، حيث أصبح الخط يأتي افتراضياً مع نظام التشغيل.

Thomas Milo (توماس ميلو)

رئيس DecoType، يعمل أيضاً كمستشار لدى جامعة كامبريدج، ماساشوسيتس. وحاصل على جائزة Bulldog التي يقدمها إئتلاف يونيكود لإسهاماته العظيمة.

إسهاماته

يعمل السيد توماس منذ عام 1982 في مجال الكتابة والخطوط العربية. وقامت شركة ديكوتايب بتطوير أول حلول الكتابة العربية معتمداً على الأبحاث العميقة في الخط الإسلامي التقليدي.

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

عمل مع شركة WinSoft في تطوير برنامج Tasmeem والذي أحدث ثورة في النشر المكتبي، وذلك بدقة وجمال الخطوط العربية المستخدمة فيه.

تحويل اتجاه النص تلقائياً حسب اللغة في النماذج

عبدالرحمن العتيبة — Sat, 24 Oct 2009 08:01:31 +0000

‎ربما رأيتم هذا التأثير مستخدم في مواقع شركة قوقل Google خصوصاً في خدمة الترجمة Google Translate، وموقع يوتيوب YouTube. عند تحويل اللغة في مدخلات النماذج Forms Input إلى اللغة العربية والبدء في كتابة الأحرف، يتم وبشكل تلقائي تحويل اتجاه النص إلى اليمين ليتماشى مع اللغة. وعند تحويل لغة النص إلى الإنجليزية، يتم تغيير الاتجاه إلى اليسار.

‎في هذا الدرس، سأقوم بشرح طريقة محاكاة نفس هذا التأثير في النماذج. طبعاً، وكما هي عادتنا في المشروع، الشفرة البرمجية في هذا المقال مطروحة بشكل مجاني وحر (مفتوحة المصدر) للاستخدام الشخصي أو التجاري بترخيص غنو GNU GPL v2.

مثال

‎مثل هذا التأثير يتم باستخدام لغة الجافاسكربت JavaScript لمعرفة المحارف المدخلة في النماذج، وبالتالي تحويل الاتجاه بشكل آلي إلى اليمين أو اليسار حسب اللغة المدخلة.

الشفرة البرمجية كاملة

‎//العربية - المدى
//0600–06FF
var rtlChars	 = '\u0600-\u06FF';
‎//العربية الملحقة - المدى
//0750–077F
rtlChars		+= '\u0750-\u077F';
‎//نماذج التقديم العربية - أ - المدى
//FB50–FDFF
rtlChars		+= '\uFB50-\uFDFF';
‎//نماذج التقديم العربية - ب - المدى
//FE70–FEFF
rtlChars		+= '\uFE70-\uFEFF';

‎//علامات ترقيم وتحكم آسكي - المدى ASCII
//0000-0020
var controlChars = '\u0000-\u0020';
‎//علامات ترقيم وتحكم عامة - المدى
//2000-200D
controlChars 	+= '\u2000-\u200D';

‎//ابدأ سحر التعبير القياسي Regular Expression
var reRTL     = new RegExp('^[' + controlChars + ']*[' + rtlChars + ']');
var reControl = new RegExp('^[' + controlChars + ']*$');

function detectDirection(input)
{
‎	//تسجيل القيمة الموجودة في المدخل النصي في متغير
	var value = input.value;
‎	//يتم تحويل اتجاه المدخل النصي إذا كان أحد المحارف يتبع اللغة العربية
	if ( value.match(reRTL) )
	{
		input.dir = 'rtl';
	}
‎	//لا يتم عمل شيء إذا كانت قيمة المدخل تتبع علامات الترقيم أو التحكم
	else if( value.match(reControl) )
	{
		return false;
	}
‎	//يتم تحويل اتجاه المدخل النصي لأي محرف آخر غير العربية وعلامات الترقيم والتحكم
	else
	{
		input.dir = 'ltr';
	}
}

‎يجب أن يكون مستند HTML مرمّز بترميز الشفرة الموحدة أو ما يطلق عليها يونيكود Unicode.

الخطوة ١: تعريف محارف يونيكود الخاصة باللغة العربية في متغير باستخدام التعبير القياسي Regular Expression

var rtlChars	 = '\u0600-\u06FF';
rtlChars		+= '\u0750-\u077F';
rtlChars		+= '\uFB50-\uFDFF';
rtlChars		+= '\uFE70-\uFEFF';

‎في البداية، نقوم بتعريف جميع محارف يونيكود الخاصة باللغة العربية في متغير سنسميه rtlChars، لنتمكن من التحقق من مدخلات المستخدم لاحقاً ومقارنتها بما هو موجود لدينا. وقد أخذت هذه المحارف من موقع يونيكود.

‎طريقة التعريف تتم باستخدام نظام التعبير القياسي، حيث نقوم بتعريف المدى لهذه المحارف، فعلى سبيل المثال، المدى المحجوز لمحارف اللغة العربية الأساسية هي من U+0600 إلى U+06FF. ومن ثم نضيف المحارف الأخرى الخاصة والمحجوزة للغة العربية.

الخطوة ٢: تعريف محارف يونيكود الخاصة بعلامات الترقيم والتحكم باستخدام التعبير القياسي Regular Expression

var controlChars = '\u0000-\u0020';
controlChars 	+= '\u2000-\u200D';

‎بطريقة مشابهة للخطوة ١، نقوم بتعريف المحارف الخاصة بعلامات الترقيم والتحكم الخاصة بنظام ترميز أسكي ASCII في متغير سنسميه controlChars. علامات الترقيم والتحكم التي سندرجها هنا هي على سبيل المثال، مسافات spaces، هروب esc، تحكم ctrl.

‎سيُعيننا تعريفها هنا لاحقاً في التفريق بين هذه المحارف، والمحارف الخاصة باللغة العربية. مرة أخرى، أخذت هذه المحارف من موقع يونيكود.

الخطوة ٣: تسجيل التعبير القياسي Regular Expression

var reRTL     = new RegExp('^[' + controlChars + ']*[' + rtlChars + ']');
var reControl = new RegExp('^[' + controlChars + ']*$');

‎بعد تعريفنا لهذه المحارف في المتغيرات السابقة، سنقوم بتسجيلها في كائن التعبير القياسي الخاص بلغة الجافاسكربت RegExp كل على حدى.

var reRTL     = new RegExp('^[' + controlChars + ']*[' + rtlChars + ']');
var reControl = new RegExp('^[' + controlChars + ']*$');

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

‎أما المتغير reControl فسيحمل كائن التعبير القياسي الخاص بمحارف علامات الترقيم والتحكم المراد فحصها.

الخطوة ٤: إنشاء دالة التحقق من المدخلات

function detectDirection(input)
{
	var value = input.value;

	if ( value.match(reRTL) )
	{
		input.dir = 'rtl';
	}
	else if( value.match(reControl) )
	{
		return false;
	}
	else
	{
		input.dir = 'ltr';
	}
}

‎الآن سيبدأ السحر الحقيقي للجافاسكربت. سنقوم بإنشاء دالة التحقق من محارف اللغة المدخلة، ومن ثم تحويل اتجاه النص تلقائياً في عناصر الادخال الخاصة بالنماذج. سنسمي الدالة detectDirection وستأخذ متغير نسميه input حيث سيكون عنصر الادخال Form Input.

‎في بداية الدالة، سنقوم بتسجيل القيمة الموجودة داخل عنصر الادخال في متغير، وسنسميه value.

‎الآن ستبدآ عملية التحقق والتحويل، حيث في جملة if الشرطية الأولى، سنقوم بالتحقق ما إذا كانت القيمة المدخلة تساوي أحد المحارف العربية، فإذا تحقق الشرط، سنقوم بتحويل العنصر إلى اليمين باستخدام خاصية dir.

‎إذا لم تتحقق الجملة الشرطية الأولى، وإذا كانت القيمة المدخلة من أحد محارف علامات الترقيم والتحكم، فلا نفعل شيئاً.

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

الخطوة ٥ والأخيرة: إدراج حدث “عند رفع المفتاح” أو OnKeyUp لمدخلات النماذج وربطه بالدالة

‎تبقى لدينا ربط التحقق مع عناصر المدخلات الخاصة بالنماذج. طريقة ربط دالة التحقق تتم بواسطة الأحداث Events. حيث سيكون حدث “عند رفع المفتاح” أو OnKeyUp لدى عناصر الادخال هو المسؤول عن مناداة الدالة الخاصة بالتحقق من المحارف المدخلة. وبالتالي تغيير اتجاه العنصر على حسب اللغة المدخلة.

افتراضات الشفرة

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

دعم المتصفحات

‎تم تجربة هذه الشفرة على المتصفحات القياسية التالية، وتعمل عليها بالشكل الصحيح.

كروم Chrome النسخة 3
فايرفوكس Firefox النسخة 3.5.3
انترنت اكسبلورر Internet Explorer النسخة 7
سفاري Safari النسخة 4
أوبرا Opera النسخة 10

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

مقالات ذات صلة:

تشفير الروابط والنصوص بواسطة الترميز UTF-8