تجربة خدمة RedHat OpenShift

تجربة خدمة RedHat OpenShift

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله -صلى الله عليه وسلم- وعلى آله وصحبه ومن والاه بإحسان إلى يوم الدين..

إذا كنت في بدء مشوارك مع تصميم وتطوير الويب وبعد أن تكتمل جميع تجاربك على السيرفر المحلي localhost فقد تحتاج إلى تجربة تطبيقاتك على سيرفرات حقيقية على الويب ، توفر شركة الريدهات المعروفة RedHat استضافة سحابية من خلال خدمة PaaS مجانية وتعني Platform as a Service.. بإمكانك استخدام Python , Java, Ruby , PHP وغيرها في هذه الاستضافة.

لتجربة هذه الخدمة سنختار لغة PHP حيث سنرى إن شاء الله كيفية إعداد موقع بسيط باستخدام ووردبريس WordPress ( نظام إدارة محتوى CMS مكتوب بلغة بي اتش بي PHP ) كنموذج لتطبيق هذه الخدمة.

التسجيل

سنبدأ بإنشاء حساب في OpenShift بملئ هذا النموذج وإرساله.

signup

 

سيتم إرسال رسالة إلى بريدك الإلكنروني لتنشيط الحساب، قم بالضغط على Verify Your Account

step2.2

 

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

 

step3

 

بعد الموافقة على الشروط ستظهر رسالة ترحيب ، قم بالضغط على Create your first application now لبدء العمل :

step4 welcome

اختيار التطبيق :

توفر هذه الخدمة العديد من الأدوات المعدة للاستخدام لتقليل المجهود على المطوّر، الصورة التالية توضح جانب منها :

apps
جانب من التطبيقات المتوفرة على موقع OpenShift

 

إعدادات التطبيق :

سنقوم باختيار WordPress وذلك بالضغط على اسم ووردبريس WordPress الموجود في القائمة.

لماذا ووردبريس؟

ببساطة لأن إعداده واسخدامه سهل. وهو بلا منازع الأوسع انتشاراً ويتوفر له عدد هائل من الدروس والمقالات على الويب.

ستظهر نافذة لاختيار بعض الإعدادات :

سنقوم بملئ الفراغ الاول باسم wp (بإمكانك ملئ اي اسم) والفراغ الثاني باسمك أو اي اسم آخر، سنتخطى الخيار التالي (إلا إذا كان لديك موقع ووردبريس موجود على Git فبإمكانك استخدامه) ونستمر حتى آخر الصفحة:

إعدادات التطبيق
إعدادات التطبيق

 

 

سنقوم بالضغط على Create Application لإنشاء التطبيق :

إعدادات التطبيق
إعدادات التطبيق

 

سيقوم بسؤالنا إذا ما كنا نرغب في عمل تعديلات على شفرة ( code) التطبيق، ووردبريس عادة لا يحتاج تغييرات على الشفرة مباشرة لأن أغلب العمل يتم من شاشة الإدارة ، سنضغط Not Now , Continue :

 

 

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

 

 

إعداد ووردبريس :

بعد ذلك سنقوم بالذهاب إلى الموقع الذي قمنا بإعداده عن طريق الضغط على الرابط لإكمال عملية الإعداد:

openshift-2

ستظهر خيارات اللغة، قم باختيار ما يناسبك ثم اضغط continue :

اختيار اللغة
اختيار اللغة

 

 

ستظهر نافذة أخرى لاختيار إعدادات اسم الموقع واسم المستخدم الرئيسي (المشرف) Administrator والبريد الإلكتروني ، سنقوم بملئ البيانات ثم نختار تنصيب ووردبريس:

الإعدادات الأساسية لووردبريس
الإعدادات الأساسية لووردبريس

 

 

نكون بذلك قد انتهينا من عملية التنصيب وإعذداد موقع ووردبريس على خدمة RedHat OpenShift سنقوم بالدخول إلى شاشة الإدارة.

wp-3

 

تسجيل الدخول
تسجيل الدخول
شاشة إدارة ووردبريس
شاشة إدارة ووردبريس

 

أنت الآن في شاشة الإدارة، بإمكانك إضافة صفحات، رفع قوالب وإضافات، إضافة تدوينات والعديد من الأشياء الأخرى.

شكرا لحسن المتابعة!

وصلى اللهم وسلم وبارك على سيدنا محمد والحمدلله رب العالمين.

البي أتش بي من الصفر: الدرس السادس المصفوفات

البي أتش بي من الصفر الدرس السادس المصفوفات

بسم الله والصلاة والسلام على رسول الله.

هذا الدرس جزء من سلسلة البي أتش بي من الصفر:

نبدأ اليوم الدرس السادس في سلسلة تعلم البي أتش بي من الصفر.

أقسام الدرس:

  • ما هي المصفوفة وفائدتها.
  • فائدة المصفوفات.
  • كيفية تعريف المصفوفة.
  • شروط تسمية المفاتيح.
  • قراءة القيم المخزنة.
  • تعديل القيم المخزنة.
  • حذف القيم المخزنة.
  • بعض الدوال المفيدة

ما هي المصفوفة وفائدتها:

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

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

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

<?php

//غير مجدية ومضيعة للوقت

$color1 = "red";

$color2 = "green";

$color3 = "yellow";

$color4 = "pink";

$color5 = "blue";

$color6 = "black";

$color7 = "brown";

$color8 = "gray";

$color9 = "white";

$color10 = "purple";

$color11 = "orange";

$color12 = "violet";

?>

أنواع المصفوفات:

يوجد ثلاثة أنواع رئيسية للمصفوفات

1-      المصفوفة المفهرسة (Indexed Arrays): وهي أبسط أنواع المصفوفات تحتوى على قيم مخزنة وتكون قيم المفاتيح رقمية فقط.

2-      المصفوفة الترابطية (Associative Arrays): تختلف من المصفوفة المفهرسة في أن قيم المفاتيح الخاصة بها قد تكون سلاسل نصية أو أرقام ونصوص.

3-      المصفوفة متعددة الأبعاد (Multidimensional Arrays): وهي عبارة عن مصفوفة ولكن أحد القيم المخزنة فيها أو أكثر تكون من نوع مصفوفة أيضا.

سنقوم بشرح المصفوفات المفهرسة والترابطية في هذا الدرس وطرق التعامل معهما.

*يجدر الإشارة أن البي أتش بي لا تفرق بين المصفوفات المفهرسة والمصفوفات الترابطية.

كيفية إنشاء مصفوفة:

لكي نقوم بإنشاء مصفوفة في بي أتش بي نستخدم الدالة array();، وتقوم هذه الدالة بإستقبال أي عدد من القيم مع مفاتيحها مفصولة بعلامة فاصلة “,” ومخرجات هذه الدالة هي مصفوفة بالقيم التي تم تزويدها بها وفي حالة عدم تحديد قيم للمفاتيح تقوم بإسناد مفتاح لكل قيمة بداية من صفر إلى عدد القيم -1.

<?php
$colors = array("red","green","yellow","pink","blue","black","brown","gray","white","purple","orange","violet");
var_dump($colors);
?>

إبتداء من PHP 5.4 يمكننا إستخدم الصيغة المختصرة لإنشاء المصفوفة. فبدلا من إستخدام الدالة array() يمكننا الآن إستخدام الأقواس “[ ]” فقط فيصبح المثال السابق بالشكل التالي

<?php
$colors = ["red","green","yellow","pink","blue","black","brown","gray","white","purple","orange","violet"];

var_dump($colors);
?>

في المثالين السابقين قمنا بإنشاء مصفوفة مفهرسة أي مصفوفة تخزن قيم وتكون كافة قيم المفاتيح رقمية. ماذا لو أردنا إنشاء مصفوفة ترابطية كيف سيتم هذا؟ سنقوم بإستخدام نفس الدالة array() ولكن في هذه المرة سنقوم بتحديد قيم المفاتيح التي نرغب فيها. فلو أردنا تخزين أسماء السيارات التي يقودها عدة أفراد يمكننا إستخدام إسم الشخص كمفتاح و يكون نوع السيارة التي يقودها هو القيمة. مثال:

<?php

$cars = array("Mohamed" => "Porsche", "Ahmed" => "BMW", "Ali" => "Lamborghini");

var_dump($cars);

?>

تسمية مفاتيح المصفوفة:

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

  • المفاتيح دائما تكون إما رقم صحيح أو نص فقط.
  • في حالة كانت قيمة المفتاح رقم صحيح ولكن تم كتابته كنص فسيتم تحويله تلقائيا لرقم مثلا “623” سيتم تحويلها إلى 623 كرقم، ولكن “0623” ستظل كما هي ولن يتم تحويلها إلى رقم.
  • الأرقام التي تحتوي على فاصة عشرية سيتم دائما تحويلها إلى أرقام صحيحة بإسقاط الفاصلة العشرية والإبقاء على الرقم الصحيح مثلا 3.24 ستصبح 3.
  • المفاتيح من نوع المنطقي true أو false سيتم تحويلها إلى رقم حيث أن true=1 و false=0.
  • القيمة Null عند إستخدامها كمفتاح سيتم تحويلها إلى نص خالي “”.
  • لايمكن إستخدام المصفوفات والكائنات كمفاتيح وإستخدامها سينتج عنه تحذير من نوع “Illegal offset type”.
  • عند إستخدام نفس المفتاح في المصفوفة مع أكثر من قيمة فقط آخر قيمة تم إسنادها لهذا المفتاح سيتم تخزينها.
  • عند توليد المفاتيح الرقمية تلقائيا من قبل بي أتش بي يبدأ توليد القيم الرقمية من أكبر رقم تم إستخدامه من قبل في المصفوفة +1 –حتى إذا تم حذفه-. فإذا كانت المصفوفة جديدة أو لم يتم إستخدام مفتاح رقمي فيها من قبل يبدأ التوليد من الرقم صفر، أما إذا كانت مصفوفة قد تم إستخدام مفاتيح رقمية من قبل فيبدأ التوليد من أكبر رقم+1 حتى إذا تم مسحه، بمعنى لو كان لدينا قيمة ويشير إليها المفتاح رقم 71 أكبر مفتاح حاليا في المصفوفة وقمنا بحذف القيمة والمفتاح فعند توليد مفتاح رقمي جديد من قبل البي أتش بي يكون 72.

قراءة القيم المخزنة:

لتتمكن من قراءة القيم المخزنة في المصفوفة نقوم بإستخدام إسم المتغير وتحديد قيمة المفتاح للقيمة المخزنة بين قوسين “[]” أو “{}” فإذا أردنا قراءة أول لون في مصفوفة الألوان التي قمنا بإنشاءها في المثال السابق:

<?php

echo $colors[0];

?>

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

<?php

for($i=0; $i<count($colors); $i++)

{

echo $colors [$i].’<br />’;

}

?>

قد تنفع الحلقة التكرارية for في قراءة قيم المصفوفة في حالة كانت قيم مفاتيح المصفوفة رقمية ومتتالية لكن كيف سنتصرف إذا كانت القيم غير رقمية. نصية على سبيل المثال؟ أو رقمية ولكن غير متتالية؟ في هذه الحالة نستخدم الحلقة التكرارية foreach لقراءة قيم المفاتيح والمصفوفة معا. مثال:

<?php

foreach($cars as $key => $car)

{

echo ‘name = ‘. $key .’ and car = ‘. $car .’ <br />’;

}

?>

في المثال السابق تقوم الحلقة التكرارية foreach بقراءة قيمة من المصفوفة في كل دورة وتخزين قيم المفتاح “إسم الشخص” في المتغير $key وتخزين القيمة الفعلية “إسم السيارة في المثال” في المتغير $car ويمكننا قراءة القيم من هذه المتغيرات وإستخدامها بالطريقة التي نريد، طباعتها مثلا!.

تعديل القيم المخزنة:

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

<?php

$cars[‘Mohamed’] = “Mercedes-Benz”;

?>

حذف القيم المخزنة:

لحذف المفتاح والقيمة المخزنة في المصفوفة أو حذف كامل المصفوفة نستخدم الدالة unset() وتستقبل الدالة إما المتغير الذي يحتوى على المصفوفة لوحده لحذف كامل المصفوفة أو المتغير مع تحديد المفتاح لحذف المفتاح والقيمة المخزنة معه فقط. فلو إفترضنا أن أحمد قد قام ببيع سيارته ولا يملك أي سيارة حاليا وأردنا حذفه من المصفوفة نقوم بالآتي:

<?php

unset($cars[“Ahmed”]);

?>

ولو قام الجميع ببيع سياراتهم وأردنا حذف المصفوفة بالكامل نقوم بالتالي:

<?php

unset($cars);

?>

بعض الدوال المفيدة:

هناك بعض الدوال المفيدة عند التعامل مع المصفوفات سنقوم بذكر البعض منها هنا:

count():

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

<?php

echo count($colors);

//النتيجة 12 عدد الألوان المخزنة في المصفوفة في الأمثلة السابقة.

?>

in_array():

تستقبل هذه الدالة معطيان، الأول عبارة عن قيمة معينة، الثاني عبارة عن مصفوفة وتقوم هذه الدالة بالبحث عن هذه القيمة داخل المصفوفة فإذا وجدت القيمة تقوم بإرجاع true وإذا لم توجد يتم إرجاع القيمة false.

<?php

if(in_array(“red”, $colors))

{

echo “The color is found in this array”;

}

else

{

echo “the color in not found in this array”;

}

?>

array_key_exist():

هذه الدالة تقوم بنفس ما تقوم به الدالة in_array() ولكن بدل البحث في القيم المخزنة تقوم بالبحث في المفاتيح عن مفتاح معين وتقوم بإرجاع true في حالة إيجاد المفتاح و false في حالة عدم إيجاده

<?php

if(array_key_exist (13, $colors))

{

echo “The key is found in this array”;

}

else

{

echo “the key in not found in this array”;

}

?>

array_unique():

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

<?php

$duplicate_array = array(“first Duplicate” => “1”, “Second Duplicate” => “1”);

$unique_array = array_unique($duplicate_array);

var_dump($unique_array);

?>

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

 

بهذا نكون قد وصلنا إلى ختام درسنا، ترقبو الدرس القادم عن إستلام البيانات من المتصفح POST & GET.

كيف تحصل على استضافة لموقع ونطاق بإسمك بأقل تكلفة!

بسم الله والحمدلله والصلاة والسلام عل ىسيدنا رسول الله -صلى الله عليه وسلم- وعلى آله وصحبه ومن والاه بإحسان إلى يوم الدين..

يتمنى الكثير منا الحصول على موقع خاص بإسمه أو اسم شركته ليضعه على بطاقة العمل Business Card الخاصة به أو ليكتب فيه مقالات وينشرها أو غيرها من الاسباب، هناك الكثير من الشركات التي تعطيك استضافة مجانية ولكنها تقيّدك بنطاق خاص بها أي أنه سيكون اسما مركّبا مثلا comli.com أو bl.ee أو eys.es .. مثلا http://sudanewscast.bl.ee أو wdalhaj.comli.com .. هدفنا سيكون الحصول على الاستضافة المجانية وربطه مع نطاقك الشخصي.. com ، info، org ، الخ..  مثلا http://mohdali.com أو http://mmahgoub.com ، الموضوع حقيقة أبسط مما تتخيل واليوم سأقدم لكم طريقة سهلة لفعل ذلك.. تابعو معي الخطوات.

الخطوة الأولى: شراء النطاق

بالتأكيد يتوجب عليك دفع بعض المال للحصول على نطاق بإسمك! ولكن التكاليف إلى حدٍّ ما بسيطة وستدفعها مرة كل سنة. لشراء النطاق لدينا خيارين إما أن نشتريه من الجمعية السودانية للإنترنت ومقرها في برج الاتصالات في المنشية شارع النيل وستحصل على نطاق sd وستكلفك حوالي 100 جنيه سوداني ،  أو أن تشتريه من اي شركة توفّر هذه الخدمة وسنذهب مع الخيار الثاني ثم نشرح طريقة نطاق sd لاحقا.

هناك العديد من الشركات في السودان بإمكانك شراء نطاق واستضافة عن طريقها ولكن من الشركات المميّزة شركة سوفتويكس Softwex ،  الجميل في هذه الشركة هو انه لا يتوجب عليك أن تذهب إلى مكتب الشركة لتحصل على الخدمة ، يكفي أن تحصل على بطاقة شحن من أقرب نقطة بيع تابعة للشركة وستحصل كل على الخدمات من حاسبك الآلي في مكتبك أو منزلك أو أي مكان باستخدام هاتفك الذكي ما يميزهم أيضا أن أسعارهم ممتازة . سنقوم الآن بإنشاء حساب جديد في موقع سوفتويكس ثم نشحن الحساب وذلك بشراء كرت أو بطاقة شحن بـ 150جنيها سودانيّا حيث أن تكلفة النطاق لمدة عام هي حوالي 120جنيهاً سودانياً (أو أكثر، إذا أردت الاشتراك لمدة سنتين قم بشراء كرت آخر ب 100ج حيث أن مجمل رسوم النطاق لسنتين هو حوالي 240ج ) من أقرب نقطة بيع وتنزيله في My Account > Softwex Account > Recharge Account .

1

recharg

الخطوة التالية هي اختيار النطاق وشراؤه :

من صفحة My Account سنختار  Order > New Domain فتنتقل بنا إلى هذه الصفحة نقوم بإدخال اسم النطاق المطلوب، ربما يكون النطاق الذي اخترته قد تم اختياره من قبل، لا بأس قم باختيار نطاق آخر.

2

 

 

3

 

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

 

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

الخطوة الثانية: الحصول استضافة مجانية

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

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

new hosting

 

ثم سنختار الخطة المجّانية :

hostinger

 

ستظهر لنا صفحة لاختيار نوع النطاق (الدومين) وكلمة السر

domain type

 

 

ثم تكتب اسم النطاق الخاص بك وكلمة السر وتختار متابعة :

domain type 2

 

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

 

domain last

لدينا الآن حساب استضافة من Hostinger ونطاق domain من سوفتويكس Softwex

final domain

سيتم إرسال رسالة إلى بريدك الإلكتروني فيها تفاصيل الدخول للوحة التحكم ومعلومات أخرى مثل FTP وإعدادات البريد SMTP .. وغيرها.

ما يهمّنا هنا هو أسماء الخوادم: وهي كالآتي

  • ns1.hostinger.ae
  • ns2.hostinger.ae
  • ns3.hostinger.ae
  • ns4.hostinger.ae

الخطوة الأخيرة

سنعود الآن إلى شاشة إدارة النطاق في موقع سوفتويكس Softwex :

My Account > iHost > My Domains

ونختار Manage

 

dom

 

ستظهر الصفحة الخاصة بإدارة النطاق :

dns

 

سنختار منها Change Nameservers والتي ستنقلنا إلى صفحة أخرى يمكننا من خلالها أن نغيير في Nameservers ليقوم بالتوجيه إلى شركة الاستضافة :

كما تلاحظون سنقوم بملئ الفراغات بأسماء الخودام التابعة لشركة الاستضافة ثم نضغط زر Change Namesevers .

 

 

dn

 

 

 

بعد ذلك تظهر لنا هذه الصفحة موضّحا فيها التغيير الذي قمنا به ونلاحظ التنويه الذي يقول بأن التغييرات على أسماء الخوادم قد تأخذ حتى 72 ساعة ليتم تطبيق التغييرات.

 

final dns change

 

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

#

ختاماً أرجو أن أكون قد وفّقت في عرض المعلومات وتقديم الفائدة.

وصلى الله وسلم وبارك على سيدنا محمد -صلى الله عليه  وسلم – وعلى آله وصحبه والحمدلله رب العالمين.

 

البي أتش بي من الصفر: الدرس الخامس الحلقات التكرارية

البي أتش بي من الصفر الدرس الخامس الحلقات التكرارية

بسم الله والصلاة والسلام على رسول الله.

 

هذا الدرس جزء من سلسلة البي أتش بي من الصفر:

 

نبدأ اليوم الدرس الخامس في سلسلة تعلم البي أتش بي من الصفر.

أقسام الدرس:

  • الحلقة التكرارية while.
  • الحلقة التكرارية do .. while.
  • الحلقة التكرارية for.
  • الحلقة التكرارية foreach.

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

الحلقة التكرارية while:

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

<?php
while (condition)
{
code to be executed;
}
?>

حيث تقوم أولا بإختبار شرط التكرار فإذا قام الشرط بإرجاع القيمة TRUE يتم تنفيذ الكود داخل الحلقة وعند إنتهاء الكود يتم إختبار الشرط مرة أخرى فإذا أرجع القيمة TRUE يتم تكرار الكود مرة أخرى وهكذا… حتى يقوم الشرط بإرجاع القيمة FALSE حينها يتوقف تنفيذ الكود داخل الحلقة. مثال للتوضيح:

قم بإنشاء ملف جديد وتسميته while.php وضع بداخله الكود التالي:

<html>
<body>
<?php
$i=1;
while($i<=5)
{
echo "The number is " . $i . "<br>";
$i++;
}
?>
</body>
</html>

يقوم هذا الكود بطباعة الأرقام من 1 إلى 5. يبدأ التنفيذ بإختبار الشرط ونسبة لأن المتغير $i يحمل القيمة 1 وعند إختبار الشرط فإن 1 أصغر من 5 فعليه يتم إرجاع القيمة TRUE وتنفيذ الكود يتم أولا طباعة قيمة المتغير $i ومن ثم زيادته بـ1 وعليه عند إختبار الشرط للمرة الثانية تكون قيمة المتغير 2 ويتم تنفيذ الكود للمرة الثانية وهكذا تستمر الحلقة حتى تصبح قيمة المتغير 6 وعندها يتم إختبار الشرط ويكون ناتج الإختبار FALSE ويتوقف تنفيذ الحلقة التكرارية while.

الحلقة التكرارية dowhile:-

تشبه الحلقة التكرارية dowhile الحلقة التكرارية السابقة while في كل شيء إلا إنها تقوم بتنفيذ الكود المراد تكراره مرة واحدة على الأقل وبنيتها كالتالي:

<?php
do
{
code to be executed;
}
while (condition);
?>

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

قم بإنشاء ملف جديد وتسميته dowhile.php وضع بداخله الكود التالي:

<html>
<body>
<?php
$i=6;
do
{
$i++;
echo "The number is " . $i . "<br>";
}
while ($i<=5);
?>
</body>
</html>

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

الحلقة التكرارية for:-

الحلقة التكرارية for هي أكثر الحلقات تعقيدا، وتستخدم غالبا عند معرفة عدد مرات تكرار تنفيذ الكود. وبنيتها كالتالي:

for (init; condition; increment)
{
code to be executed;
}

هنالك ثلاثة أجزاء في الحلقة التكرارية for وهي:
Init: أول جزئية في بنية الحلقة التكرارية for ويتم تنفيذه مرة واحدة فقط عند بداية الحلقة ويستخدم غالبا لضبط العداد الذي ستستخدمه الحلقة التكرارية ولكن يمكن وضع أي كود هنا.
Condition: الجزئية الثانية في بنية الحلقة التكرارية for ويتم تنفيذ هذه الجزئية في بداية كل دورة في الحلقة وهي عبارة عن شرط يتم إختباره في كل دورة فإذا كانت نتيحة الإختبار TRUE يتم المواصلة في تنفيذ الحلقة، أما إذا كانت FALSE فيتم إيقاف تنفيذ الحلقة التكرارية. يمكننا ترك هذه الجزئية فارغة وسيعني هذا أن نتيجة الشرط هي TRUE في كل مرة.
Increment: الجزئية الثالثة والأخيرة في الحلقة التكرارية for ويتم تنفيذ هذه الجزئية في نهاية كل دورة في الحلقة، وغالبا تقوم بزيادة العداد بقيمة معينة في كل دورة، ولكن يمكننا وضع أي كود هنا. مثال للتوضيح:
قم بإنشاء ملف جديد وتسميته for.php وضع بداخله الكود التالي:

<html>
<body>

<?php
for ($i=1; $i<=10; $i++)
{
echo "The number is " . $i . "<br>";
}
?>

</body>
</html>

يقوم هذا الكود بطباعة العدد $i فعليه سيتم طباعة الأرقام من 1 حتى الرقم 10. هيا نتابع تنفيذ الكود: عند تنفيذ الحلقة لأول مرة قمنا بتنفيذ الجزئية الأولى والتي قامت بضبط قيمة العداد وهو المتغير $i بالقيمة 1، وبعد ذلك تم تنفيذ الجزئية الثانية وهي مقارنة العداد $i بالقيمة 10 وبما أن 1 أقل من 10 فإن تنفيذ الحلقة سيستمر. تم تنفيذ الحلقة والتي قامت بطباعة قيمة العداد $i وهي القيمة 1 في أول تنفيذ للحلقة. بعد ذلك تم تنفيذ آخر جزئية في قيمة الحلقة والتي قامت بزيادة قيمة العداد بـ1. في الدورة الثانية يبدأ تنفيذ الحلقة من الجزئية الثانية والتي هي شرط المقارنة حيث أنه كما ذكرنا الجزئية الأولى يتم تنفيذها مرة واحدة بداية الحلقة فقط. ويستمر التنفيذ هكذا حتى تصبح قيمة العداد 11 عندها في الدورة رقم 11 يتم تنفيذ الجزئية الثانية وهي شرطة المقارنة ويتم إرجاع القيمة FALSE ويتم إيقاف الحلقة والخروج منها.

الحلقة التكرارية foreach:-

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

<html>
<body>

<?php
foreach ($array as $value)
{
code to be executed;
}
?>

</body>
</html>

هناك جزءان أساسيان في الحلقة foreach:
$array: وهو المصفوفة التي نريد نمر على عناصرها بإستخدام الحلقة foreach.
$value: وهو القيمة المحفوظة في الخانة الحالية في المصفوفة.
طريقة عمل الحلقة foreach بسيطة جدا، هي تقوم بالمرور على كل عناصر المصفوفة $array بالترتيب وفي كل مرة تقوم بوضع قيمة العنصر في المتغير $value لنقوم بإستخدام هذه القيمة في الكود المراد تنفيذه.
قم بإنشاء ملف جديد وتسميته foreach.php وضع بداخله الكود التالي:

<html>
<body>
<?php
$colors = array("red","green","blue","yellow");
foreach ($colors as $value)
{
echo "$value <br>";
}
?>
</body>
</html>

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

 

بهذا نكون قد وصلنا إلى ختام درسنا، ترقبو الدرس القادم عن المصفوفات.

التحميل الزائد لدوال جافاسكربت JavaScript Functions Oveloading

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله -صلى الله عليه وسلم- وعلى آله وصحبه ومن والاه.

نقدم لكم اليوم مرورا سريعا على موضوع التحميل الزائد في دوال جافاسكربت JavaScript Functions/Methods Overloading ونعني بذلك إمكانية أن تقبل الدالة عدداً من المتغيرات كـ Parameters بعدد مساوي أو أقل من الـ Parameters المحدد عند إنشائها، وقد يشمل المفهوم أيضاً أن تكون أنواع هذه المتغيرات مختلفة ( Number, Float, Double ،String, Object , Array … وغيرها) .

هذا المفهوم هو مفهوم برمجي عام ويوجد في لغات برمجة أخرى مثل ( Ada, C++, C#, D, and Java ) .

نلاحظ المثال التالي حيث لدينا الدالة welcome تستقبل اسم الشخص واسم المدينة وتقوم بعرض رسالة ترحيب.
هذه هي الدالة :

function welcome (PersonName,CityName) {

// سنقوم هنا باختبار صلاحية ما استقبلته الدالة
// PersonName و CityName
    PersonNameIsValid=(PersonName!=undefined)&&(PersonName!='');//returns true or false
    CityNameIsValid=(CityName!=undefined)&&(CityName!='');//returns true or false

//اسم الشخص والمدينة
    if(PersonNameIsValid&&CityNameIsValid)
        alert('Welcome '+ PersonName +' to '+CityName+'!');
//اسم الشخص فقط
    else if(PersonNameIsValid)
        alert('Welcome '+ PersonName +'!');
//اسم المدينة فقط
    else if(CityNameIsValid)
        alert('Welcome to '+CityName+'!');

//Parameters  بدون 
    else alert('Welcome!!!');
}//end welcome func

//******* tests الاختبارات ********
// welcome('ali','khartoum');//  welcome ali to khartoum!

// welcome('ali');//  welcome ali!
// welcome('ali','');//  welcome ali!

// welcome('','khartoum');  welcome to khartoum!
// welcome(khartoum');  welcome khartoum! نلاحظ هنا اعتبر ان الخرطوم هو اسم الشخص لأنه تم إمراره على أنه المتغير الأول

// welcome('','');//  welcome!
// welcome();//  welcome!

ما فائدة Overload ؟
هذه الخاصية تتيح لك استخدام نفس الدالة لمهام عديدة ، وتوفر مجهود إنشاء دوال أخرى.

يمكن إجراء اختبار النوع باستخدام الدالة typeof حيث تقوم بكشف نوع المتغير الذي تم إمراره كـParameter .

لتجربة الدالة قوموا بفتح أدوات المطور في قوقل كروم وافتحوا ال console ثم قوموا بنسخ الدالة welcome ولصقها في ال console ثم مفتاح Enter.
الآن قومو بكتابة welcome() في الــ Console ثم غيروا ال parameters .

console

عموما كانت هذه نبذة سريعة عن التحميل الزائد في دوال جافاسكربت..أتمنى أن تكونوا استفدتم.. 🙂

———————————-
المصادر:
John Resig – JavaScript Method Overloading
http://stackoverflow.com – Function overloading in Javascript – Best practices
مصدر الصورة

وصلى الله وسلم وبارك على سيدنا محمد -صلى الله عليه وسلم – والحمدلله رب العالمين
#

أدوات المطوّر في قوقل كروم – Developer Tools ؟ (الجزء 1)

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله -صلى الله عليه وسلم-

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

  • Firebug و يعمل في Firefox
  • DragonFly يعمل في متصفح Opera
    تحديث في 17.7.2013 : Opera الآن يعمل بمحرك Blink (مبني على Webkit) أي أنه صار مثل الكروم 28+ ويتوقف العمل بالـ DragonFly في الإصدارة الحالية Opera 15 مع احتمال عودته مجدداً في الإصدارات القادمة.
  • Developer Tools ويعمل في IE8 فما فوق.
  • وأخيراً Webkit Dev Tools يعمل في Google Chrome و Apple Safari .. و Opera 15+

على الرغن من أنه تم عمل إصدارة Firebug خصيصاً لـ Google Chrome ، إلا أنها ليست بنفس فعالية الإصدارة الأصلية في Firefox .

المتصفحّات وأدوات التطوير

حديثنا في هذه السلسلة سيكون حول أدوات تطوير في قوقل كروم Chrome Developer Tools وكيفية استخدامها لمساعدة المصمم والمطور في تسهيل وتسريع وتصميم تطوير مواقع الويب، ربما نتطرق إلى بقية الأدوات لباقي المتصفحات في وقت لاحق.

واجهة أدوات التطوير

بداية نستخدم F12 أو Ctrl+Shift+i لإظهار أدوات التطوير، تتكون الواجهة من ألسنة Tabs تحتوي أيقونات الوصول للأدوات المختلفة وهي :

1. Elements : غالب العمل سيكون في هذا الجزء الذي يقوم بإظهار عناصر الصفحة في الجهة اليسرى من الشاشة وتفاصيل كل عنصر في الجهة اليمنى.

1-elements

 

2. Resources : وتحتوي هذه النافذة على جميع محتويات الصفحة ، مثل frames والصور وملفات الجافاسكربت والخطوط وملفات الستايل والـ Cookies في الجهة اليسرى وتفاصيل كل جزء في الجهة اليمنى.

2-resources

 

3. Network : تقوم هذه النافذه بإظهار الطلبات Requests الخارجة من هذه الصفحة وتفاصيل كل طلب.3-network

 

 

4. Sources : من هذه النافذة يمكن عرض وتحرير ملفات CSS و JavaScript مباشرة في المتصفح، كما يمكن متابعة وفحص وتحليل عمل الـ JavaScript في الصفحة .

4-source

5. و 6. Timeline, Profiles : كما في نافذة Network ، تعطيك هذه النوافذ معلومات دقيقة حول الأشياء التي تحدث في الصفحة مثلا من سرعة التحميل ، تفاصيل تنفيذ دوال جافاسكربت، حركة مؤشر الماوس، تقريباً جميع الأحداث Events التي تحدث في الصفحة يتم تسجيلها بصورة متسلسة ومتزامنة ، لا أذكر أني استخدمت هذه النوافذ من قبل! ولكن سنتحدّث عنها في وقت لاحق إن شاء الله.

 

7. Audits : تقوم هذه الأداة بتحليل صفحتك من ناحية استخدام الـ CSS والـ Cookies و تفاصيل عن الـ Caching وتقوم إعطاءك معلومات ونصائح حول ما يجب عليك عمله لتحسين أداء الصفحة.

5-audit

 

 

8. Console : يمكن تصنيفه كـ Command Line Tool للمتصفح ، يمكن من خلاله التفاعل مباشرة مع الصفحة من خلال الجافاسكربت .

مثال :

إذا قمنا بكتابة document.title فسيعرض عنوان الصفحة الحالية.

مثال آخر

  window.scrollTo(0,900)

سيقوم بعمل  scroll على بعد 900 بكسل من أعلى الصفحة

الصورة التالية فيها بعض الأمثلة :

6-console

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

وصلى الله وسلم وبارك على سيدنا محمد والحمد لله رب العالمين.

#

مشكلة Vanilla.js مع إضافة Event Listener للعناصر ذات Class

مشكلة Vanilla.js مع إضافة Event Listener للعناصر ذات Class

بسم الله والحمدلله والصلاة والسلام على رسول الله – صلى الله عليه وسلم – .

أثناء العمل على صفحة ويب احتجت أن أضيف بعض التفاعلية مع المستخدم ، مثل الاستجابة لضغطة الماوس (mouse click event) على عنصر معين ، ولكن واجهتني مشكلة عند استخدامي لـ Vanilla.js (فانلا هي اسم رمزي للجافاسريبت كما هي plain !) لإنشاء Event Listener لعدة عناصر من نفس التصنيف لهذا الحدث وإليكم السيناريو:

  • لدي عدة عناصر من نفس التصنيف Class وأريد أن أنفذ دالة معينة عند مرور مؤشر الماوس فوق أي من تلك العناصر.
  • مثلا ظهور صندوق Alert() فيه محتويات العنصر
  • توفر الجافاسكربت إمكانية عمل listener ولكن فقط باستخدام ID الخاص بالعناصر ولا يمكن استخدام Class ..
  • Vanilla.js تمكنك من إضافة Listener ولكن باستخدام الـ ID ولا يمكن ذلك باستخدام الـ Class  كالآتي :

    singleItem=document.getElementById('onlyOne');
    singleItem.addEventListener('mouseover',doTheAction);
    
    

    نلاحظ أن الحدث Event هو مرور مؤشر الماوس والنتيجة هي تنفيذ الدالة doTheAction.
  • ولكن كما ذكرنا سابقا ينطبق ذلك فقط على ID وليس مع الClass

الاستماع للجميع

الاستماع للجميع.. هذا هو العدل.. ولكن لكي يكون صوتك مسموعاً يجب أن يكون لديك هوية..

الحل هو إضافة ID للعناصر ثم إضافة مستمع Listener لكل عنصر على حدة :

نفترض أن هذه هي العناصر

<div class="colors">Green</div>
<div class="colors">Yellow</div>
<div class="colors">Blue</div>

بداية يجب أن نتحصل علها

all_elements=document.getElementsByClassName('colors');

ثم سنقوم بالمرور على مجوعة العناصر باستخدام حلقة التكرار for loop ثم نضيف ID لكل عنصر وبذلك يكون جاهزاً ليتم ربطه مع مستمع Event Listener

for (var i =0;  i <= all_elemnts.length - 1; i++) {

// هنا يحصل العنصر على رقم هوية جديد 
// ID
all_elemnts[i].id="el"+i;

//نضعه في متغير
el=document.getElementById('el'+i);

//الآن أصبح للعنصر  
// ID
// ويمكننا ربطه
el.addEventListener('mouseover',doTheAction);
}//endForLoop

//والدالة :
function doTheAction(){
// ستعرض محتوى العنصر
alert(this.innerHTML);
}

بالإمكان استخدام مكتبة جيكويري jQuery لهذه المهمة ولكن الموضوع أبسط من تضمين المكتبة بكاملها (91Kb) لصفحة صغيرة!
سنعرض الآن الحل الذي تجنبنا استخدامه بالجيكويري jQuery :
وهو عبارة عن سطر واحد فقط!!

$('.colors').on('mouseover',doTheAction);

الحل بسيط كما ذكرنا مسبقاً ولكنه مكلف من ناحية سرعة تحميل الصفحة.

ملحوظة

Vanilla.js ليست مكتبة، ليست إطار عمل، إنه مصطلح أُطلق على الجافاسكربت كما هي بدون تعديلات Plain .. وتم إطلاق هذا الاسم لجذب الاهتمام.. حيث أصبح المطورين يبحثون عن مكتبات الجافاسكربت وربما لا يعرف أحدهم شيئا عن صيغة Syntax الجافاسكريبت وماهيتها.. هم فقط يعرفون صيغة المكتبات مثل الجيكويري وغيرها.. للتوضيح الجافاسكريبت للجيكويري مثل البي اتش بي للكودإجنايتر… مافي أبسط من كده!

احصل على المثال

روابط مفيدة لتعلم الجافاسريت :

ختاما نتمنى لكم أوقاتا ممتعة مع الجافاسكربت.
#

وصلى الله وسلم وبارك على سيدنا محمد صلى الله عليه وسلم والحمدلله رب العالمين

تجربة تغيير الخطوط الإفتراضية لجوجل كروم!!

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله -صلى الله عليه وعلى آله وصحبه وسلم تسليما كثيرا إلى يوم الدين..

سريعاً سنلقي نظرة على كيفية تغيير الإعدادات للخطوط في جوجل كروم.. فقد قمت بتغيير الخط اﻹفتراضي إلى Droid Arabic Naskh وأعجبتني الفكرة فأحببت أن أشارككم !!

الخطوات :

 

نفتح صفحة الإعدادات في جوجل كروم :
قائمة جوجل كروم

 

ثم نبحث عن خيارات تغيير الخطوط :
customize

 

نقوم بتغيير القيم الافتراضية للخيار الأول Standard Font والخيار الثالث Sans-Serif font  إلى أي خط ملائم ومريح للقراءة..في هذه الحالة قمت باختيار Droid Arabic Naskh :
change font

 

final
تغيير شكل الخط في تويتر

أخيراً كيف ستظهر الخطوط الجديدة؟ لدينا مثال هو تويتر و موقع المدونة

final2
تغيير شكل الخط في المدوّنة

 

الأمر بسيط!

أتمنى أن يكون تلميحاً مفيداً.. شكرا للمتابعة! دمتم بود..

وصلى الله وسلم وبارك على سيدنا محمد -صلى الله عليه و سلم- والحمدلله رب العالمين..

كيف تستخدم jQuery Colorbox مع معرض صور ووردبريس

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله وعلى آله و صحبه و من والاه بإحسان إلى يوم الدين.

– يوفر ووردبريس إمكانية إضافة معرض صور في الصفحات أو التدوينات.

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

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

سنقوم إن شاء لله باستخدام إضافة jQuery Colorbox في قالب ووردبريس لصنع معرض صور يدعم تكبير الصور وبدون استخدام أي إضافة من إضافات وردبريس وسيتم التطبيق في قالب ووردبريس 2011 (twentyeleven) وهو القالب الافتراضي المُفعّل في إصدارة ووردبريس 3.5 .

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

إضافة معرض وسائط

ثم نقوم بإضافة صور من الجهاز أو من تلك الموجودة في مكتبة الصور :

إضافة ملفات وسائط

ثم نقوم بتحديد جميع الصور و الضغط على زر إنشاء معرض جديد والموجود في زاوية الشاشة اليسرى أسفل الشاشة :

إنشاء معرض الصور

ستظهر شاشة أخرى تعرض خيارات للصور (تغيير ترتيب عرض الصور وإضافة وصف لكل صورة) وأيضا خيارات للمعرض يسار الشاشة (تحديد عدد الأعمدة -يعني عرض الصور في عمودين ، ثلاثة.. الخ- وتحديد رابط الصورة).
نقوم باختيار 3 أعمدة ثم نختار من القائمة المنسدلة خيار “رابط لـ ملف الوسائط” ثم نختار زر إدراج المعرض :

إعدادات معرض الصور

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

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

معرض الصور في التدوينة

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

استخدام jQuery Colorbox في المعرض :

سنقوم بوضع ملف jquery.colorbox.js في مجلّد js وملف colorbox.css في مجلّد inc .
ثم سنقوم بتضمين الملفيّن في ملف الترويسة header.php داخل وسم head وقبل إغلاق الوسم مباشرة:
(قبل ذلك سنقوم بتضمين ملف مكتبة jQuery لأنه ضروري لعمل الـ colorbox).

<link rel="stylesheet" href="<?php bloginfo("stylesheet_directory");?>/inc/colorbox.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="<?php bloginfo("stylesheet_directory");?>/js/jquery.colorbox.js"></script>


هناك أيضا ملفات صور تجدونها في مجلد images والموجود داخل مجلد الخاص بالـ colorbox ، أيضا يجب نسخ هذا المجلد و وضعه في مجلد inc الموجود في قالب twentyeleven .

تفعيل colorbox لعرض الصور :

لكي يعمل الـ colorbox بصورة صحيحة فإن الصورة المراد تكبيرها يجب أن تكون داخل عنصر anchor (أي وسم a).
.
للتوضيح أكثر لاحظ الآتي :
هذه هي طريقة استخدام الـ colorbox :

  $('.x').colorbox();
ويتم تطبيقه على :
<a class="x" href="مسار الصورة الكاملة">
    <img src="مسار الصورة المصغّرة"/>
</a>

لكن في حالتنا فإن الصور موجودة و الروابط موجودة..ونحتاج فقط لمعرفة class وسم الـ anchor الذي يحوي الصور و نضعه مكان ( x. ) الموجود في المثال أعلاه.

ولكن كيف سنعرفه؟
سنقوم بفتح كود الصفحة لمعرفة كيف سنصل للرابط و ذلك باستخدام أدوات تطوير قوقل كروم (أو ما يوازيها مثل Firebug في فايرفوكس أو Dragonfly في أوبرا ).

في نفس صفحة التدوينة سنقوم بالضغط بزر الفأرة الأيسر على أي صورة من المعرض ونختار Inspect Element .
سيظهر في النصف السفلي (أو الأيمن) من الشاشة نافذة تحتوي كود الصفحة الحالية.

الكود المظلل بالأزرق الخفيف هو وسم الصورة التي ضغطنا عليها بالفأرة:

كود الصورة

الآن نرصيد أن نصل للرابط باستخدام الجيكوري ولكن المشكلة هي أن العنصر (الرابط a) الذي يحتوي الصورة (لا يوجد فيه class) و لذلك سنستخدم العنصر الأعلى منه (dt) للوصول إلبه وهو الـ class الموجود فيه هو gallery-icon :
(يتم وضع الكود التالي بعد في ملف header.php قبل وسم إغلاق head مباشرة)

<script>
$(function () {

  $(".gallery-icon a").colorbox(); /* دالة تفعيل الإضافة*/

});
</script>

نقوم بإغلاق أدوات التطوير ثم نقوم بإعادة تحميل الصفحة Refresh وذلك بالضغط على F5 .
ثم نقوم بتجربة المعرض مرة أخرى.. colorbox يعمل!!
معرض صور colorbox - غير مترابط

ولكن هناك مشكلة..كل صورة تعرض في صندوق colorbox على حدة وليست على شكل معرض مترابط ( أزرار التالي و السابق ومفاتيح يمين و يسار في لوحة المفاتيح للتنقل بين الصور ).

يوفر colorbox خيار أن تكون الصور مترابطة ولكن يجب أن يكون جميع وسوم الروابط التي تحوي الصور لها نفس الـ class لذلك سنقوم بإضافة التصنيف cbox يدوياً إلى الروابط :

$(".gallery-icon a").addClass('cbox');/* لتكون الصور مترابطة يجب أن يكون لها نفس التصنيف */

و سنقوم بتعديل طفيف على دالة تفعيل الـ colorbox حيث سنضيف خيار معرض الصور المترابطة كالآتي :

$(".gallery-icon a").colorbox({rel:'cbox'}); /* دالة تفعيل الإضافة*/

ليكون الكود بالكامل هو:

<link rel="stylesheet" href="<?php bloginfo("stylesheet_directory");?>/inc/colorbox.css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script src="<?php bloginfo("stylesheet_directory");?>/js/jquery.colorbox.js"></script>

<script>
$(function () {
    $(".gallery-icon a").addClass('cbox');
    $(".gallery-icon a").colorbox({rel:'cbox'}); /* دالة تفعيل الإضافة*/

});

</script>

ثم نقوم بتجربة المعرض مرة أخرى :
معرض صور colorbox

تعمل بصورة جيدة!!

المصادر:
مكتبة jQuery Colorbox
الصور من Radhia-Dz في فلكر
#

وصلى اللهم وسلم وبارك على سيدنا محمد و على آله و صحبه و من اتبع هداه إلى يوم الدين و الحمدلله رب العالمين.

تعلم كيف تستخدم Stylish لإخفاء اقتراحات فيسبوك!

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله و على آله و صحبه و من والاه بإحسان إلى يوم الدين.

هل أزعجك عمود الاقتراحات الجانبي في فيسبوك؟ إليك طريقة سريعة و سهلة لإخفاءه!
سنتسخدم اليوم إضافة رائعة لمتصفحيْ قوقل كروم و فايرفوكس تقوم بإضافة style يحدده المستخدم لكل أو لبعض صفحات الويب.. بالرغم من أنه بالإمكان استخدامها كـ Ad Blocker كما في المثال الأول إلا أنها تكون فعالة أكثر في تحسين واجهات المواقع لتلائم مزاجك كما سنرى في المثال الثاني.

 

  المثال الأول و هو إزالة اقتراحات فيسبوك:

الخطوات كالتالي :

    1. سنقوم بتركيب الإضافة (Stylish) في متصفحك من متجر تطبيقات كروم إذا كنت تستخدم قوقل قروم أو من مركز إضافات موزيلا  إذا كنت تستخدم فايرفوكس.
    2. ثم نقوم بفتح شاشة خيارات الإضافة Options كما نلاحظ في النقطة 1 و نضيف style جديد عن طريق Add New Style لاحظ مكان النقطة 2.general1
    3. تظهر لنا شاشة أخرى نقوم بكتابة الكود التالي في صندوق الـ style :
      .ego_section{
      display:none;
      }

      – نقوم بكتابة مجال تطبيق الـ style في الصندوق الصغير بالأسفل facebook.com ونختار URLs on the domain .
      – ثم نذهب للقسم الأيسر من الشاشة ونكتب اسم الـ style الجديد ونقوم بتفعيله عن طريق التأشير على Enabled ونضغط حفظ save .

      style_writing

    4. تصفحا سعيداً!!

 

المثال الثاني :استخدام Stylish لتحسين واجهة موقع ويب:

استخدم إضافة Stylish لتحسين طريقة عرض التدوينة المفردة في موقع رؤوف شبايك لأتمكن من قراءة المقالات بصورة سهلة 😉

موقع شبايك (تدوينة مفردة single post) بصورته العادية:

موقع شبايك بصورته العادية

موقع شبايك (تدوينة مفردة single post) بعد استخدام Stylish :

موقع شبايك (تدوينة مفردة) بعد استخدام Stylish

 

.post_content{
padding: 0 20px;
line-height: 33px;
text-align: justify;
font-size: 18px
}

.sidebar {display:none;}

.main {
float:none;
width: 801px;
margin: 0 auto; /* لتوسيط الصندوق في وسط الصفحة */
}

.post {
overflow: hidden;
background: #2B2B2B;
color: white;
}

.post .post_title {
color: #333;
}

هنالك العديد من الـ Styles المختلفة والجاهزة للتنزيل والاستخدام تجدونها في موقع userstyles.

#

دمتم بود 🙂

وصلى اللهم و سلم و بارك على سيدنا محمد وعلى آله وصحبه و سلم و الحمدلله رب العالمين