تجربة خدمة 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

 

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

 

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

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

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

تصميم قالب ووردبريس – الجزء 2 – التخطيط

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

قد يمر التصميم بعدّة مراحل ابتداء من الرسم بالورقة والقلم Sketch ثم التخطيط الأولي Wireframe ثم التخطيط المفصل Mockup ، ونواصل اليوم الجزء الثاني من سلسة كيفية تصميم قالب ووردبريس وسنقوم في هذا الجزء إن شاء لله بعمل التخطيط الأوّلي للموقع (Wireframe) وهو تخطيط سريع للموقع تحدد فيه المعالم الرئيسية لشكل الموقع و كيفية توزيع العناصر فيه . يجب أن لا يستغرق التخطيط الأولي وقتا طويلا فالغرض هنا هو كما ذكرنا مسبقاً تحديد الشكل العام والذي هو الأساس الذي سيُبنى عليه التصميم .

 

المراحل المحتملة لتصميم واجهة موقع للويب :

لا توجد طريقة واحدة يعمل بها مصممو الويب ولا توجد خطوات ثابته مُتّبعة. أنت تعمل بالطريقة التي تُمكِّنك من تقديم جودة عالية في أقل وقت ممكن و بأقل تكاليف.

 

ولأننا لن نقوم بالخطوة الأولى ، أردت أن أعرض نموذجا لعملية Sketching  لموقع.

مثال لسكيتش Sketch :

 

الصورة مأخوذة  من   markotaali

 

Moqups !

 

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

(!) رغم أن هذه الأداة تسمى Moqups و هي أقرب إلى Mockup فإني أعتبرها أداة للـ Wireframing . لا أريد أن يلتبس عليك الأمر!

 

واجهة الموقع:

 

moqups_home

واجهة الموقع بسيطة  وتنقسم إلى ثلاثة أقسام :

الجزء العلوي :
يحوي عدد من ادوات التحكم في منطقة العمل (الصفحات ، قياسات منطقة العمل ، ترتيب العناصر عموديا..الخ) و خصائص الحساب الشخصي .

الجزء الكبير في المنتصف:
من الواضح أن هذه هي منطقة العمل!

الجزء الأيسر :
يحوي العناصر التي من خلالها يتم بناء التخطيط. و تعمل بطريقة السحب والإسقاط Drag n Drop ، حيث يقوم المستخدم بسحب العنصر من القائمة اليسرى إلى منطقة العمل.

الآن إلى العمل!!..قمت بإعداد تخطيط سريع مبسط لموقع يتكون من عمودين .

وكانت النتيجة! :

لا يبدو سيئا أليس كذلك؟! ستتضح المعالم الرئيسية وسيتم إضافة المزيد من التفاصيل في الجزئية المتعلقة بالـ Mockup باستخدام الفوتوشوب إن شاء الله..

 

الخاتمة :

إن خطوات تصميم المواقع تحتلف من شخص لآخر فهنالك من يسبق خطوة التصميم الأولي بعمل سكيتش sketch أو مسودّة سريعة للموقع على الورق. وهنالك من يبدأ في كتابة الكود مباشرة ويستخدم طريقة Rapid Prototyping حيث يكون التخطيط الأولي هو تصميم حي مبسط للموقع ( صفحة ويب  : HTML ،CSS و Javascript ) يتم إضافة المزيد من التفاصيل إليه لاحقا ليكون هو المنتج النهائي ،  وهنالك الكثير من الأدوات المستخدمة في هذا النوع ولكن أشهرها TwitterBootstrap ، Foundation وربما Gumby .

الأدوات السابقة ليست فقط من أجل Rapid Prototyping و لكن يمكن ايضا استخدامها مع التخطيط المفصّل ( Mockup ) حيث يوفر بعضها ملفات جاهزة تحوي خطوط إرشادية و عناصر واجهة مستخدم جاهزة ( User Interface Elements) لرسم الموقع بالفوتوشوب أو بأي برنامج آخر حسب نوع الملف.

 

الفكرة من التصميم والتخطيط الأولي و المفصّل هو أن تضع المنتج النهائي نصب عينيك (Begin with end in mind) الشيء الذي يساعدك على المضي قدماً.

 

نواصل في الجزء إن شاء الله لنبدأ مرحلة التخطيط النهائي (Mockup) والذي يكون عادة باستخدام الفوتوشوب أو ما يوازيه من البرامج الأخرى التجارية مثل Fireworks أو Illustrator أو حتى المجانية مثل GIMP أو Inkscape والذي يجب تكون الصورة فيه قريبة من التصميم الفعلي للموقع بنسبة كبيرة +95%.

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

تصميم قالب ووردبريس – الجزء 1 – الأدوات

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

 

الأجزاء :

  1. الجزء 1 – الأدوات.
  2. الجزء 2 – تخطيط الموقع.
  3. الجزء 3 – رسم الموقع على Photoshop / Gimp .
  4. الجزء 4 – تحويل التصميم لـ HTML/CSS .
  5. الجزء 5 – الجافاسكريبت .
  6. الجزء 7 – تحويل HTML/CSS لقالب ووردبريس.

الأدوات المطلوبة :

برنامج التخطيط :

خدمة Moqups المجانية (تطبيق ويب Web based application) .

يوفر لك إمكانية عمل تخطيط سريع للمواقع (wireframe) ويدعم تعدد الصفحات ورفع صورك الخاصة و العديد من المزايا الأخرى.

رابط الموقع

 

برنامج الرسم وتحرير الصور :

برنامج الفوتوشوب Adobe Photoshop CS5 ME أو CS6 .

ربما يفضل البعض البرامج مفتوحة المصدر مثل  Gimp أو Inkscape  !

 

برنامج لتحرير النصوص Text-Editor :

أي محرر نصوص موجّه للبرمجة سيفي بالغرض عموما يفضل استخدام Notepad Plus Plus.

يمكنكم تنزيله من الموقع الرسمي

المتصفح:

متصفح قوقل كروم Google Chrome أي إصدارة و لكن يفضّل الإصدارة 20 فما فوق. أو فايرفوكس Firefox . إذا كنت من محبي السفاري Safari فبإمكانك استخدامه الإصدارة 5 فما فوق.

 

الخادم (السيرفر) :

سيرفر xampp الشهير . يمكنكم تنزيله من صفحة المشروع في سورسفورج sourceforge .

بالإمكان تنزيل محرر النصوص والمتصفحات وبرامج الرسم من موقع Ninite وقد كنا تحدثنا عن هذا الموقع في تدوينة سابقة  بهذا نكون قد قمنا بالاستعداد للبدء بالعمل! نواصل في وقت لاحق إن شاء الله.

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