Paginator:

في عملي أقوم بتوفير خاصية pagination سواء في لوحة التحكم أو في واجهة الموقع Front End كي يسهل على المدير تحرير البيانات والتنقل بينها بسلاسة.

وجدت أنني أعيد كتابة نفس الأسطر في كل عمل جديد، وفي الأخير طورت أكواد CSS وحسنتها ثم احتفظت بها في ملف ك Snippet لأقوم فقط بتغيير: الحجم، لون الخلفية أو الإطار، نوع الخط، الاتجاه (عربي / انجليزي) ..

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

اختبرت الملف على IE6, IE7, Chrome, Safari, Opera, Firefox وكتبت Fix عبارة عن سطر واحد لمتصفح IE وبالتالي أصبح لدي ملف pagination جاهز لادراجه في أي مشروع جديد. وكي يسهل علي إجراء أي تعديلات او تحسينات رفعت الملف على  GitHub

لتحميل الملف من GitHub

Form:

النماذج البريدية جزء أساسي من عملي اليومي، فلا يوجد تطبيق لا يحتوي على أكثر من 3 أو 4 نماذج بريدية، ونفس الشيء وجدته يتكرر في النماذج فأنا أقضي بل أضيع وقتا ثمينا في كتابة نفس الأسطر كل مرة، فأنشأت ملفا لتنسيق النماذج، يمكنني تعديله وتغيير أي شيء فيه بسهولة وسرعة كبيرة جدا، إذ يمكن تغيير شكل النموذج 360 درجة بتعديل 4 أو 5 أسطر، كما في المثال الآتي:

لتحميل الملف من GitHub

ملاحظات:

• الملفان يستعملان reset لتصفير الإعدادات، لذلك لم أضف list-style .. وبعض الخصائص إليهما.
• لاستعمال الملفين بالعربية يجب تعديل الاتجاه: float, padding, margin .. من اليسار الى اليمين.
• يمكن حذف بعض الأوامر الخاصة بالحروف الاتينية مثل text-transform.

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

13 صورة لأماكن عمل Workplace من مفضلتي Flickr

1

2

3

4

5

6

7

8

9

للشركة المبدعة kyanmedia

10

11

12

13

اعجبتني الصورة رقم 12 .. مكان ملهم وغير عادي.

أبدأ دوما ببرمجة لوحة التحكم Admin, Dashboard, Wp-admin لأي موقع أو تطبيق، إن كان الموقع يحتوي على: نظام عضويات، تعليقات، مقالات .. أبرمج هذه Modules وأشغلها بحيث يمكنني الإضافة والحذف وإجراء باقي Query على قواعد البيانات.

بعد الانتهاء من ملفات CSS أعود إليها لتنسيقها وحذف الاكواد الزائدة واختصار أخرى واستبدال Class لتكون أكثر فهما ووضوحا للزائر الفضولي الذي سيستعرض ملفات Source ، نفس الأمر أقوم به على مستوى XHTML لدي رغبة ملحة لأن يكون Semantic Code حتى وان كان العمل بدون مقابل مادي، فأنا لا أقوم بهذا لمن يدفع أكثر ..

في CSS كنت أستعمل عرضا محددا للصفحة لا يقل عن 769 بيكسل، بحيث تكون الصفحة Fixed، حاليا أصبحت أستعمل اي قياس أرغب به 800 او 900 px مع امكانية أن تكون الصفحة Fluid

أستعمل بعض الايقونات بأحجام مختلفة، لتنسيق بعض الصفحات UI وجميع لوحات التحكم التي برمجتها حتى الان استعملت فيها ألوانا متناسقة وايقونات جميلة لتسهيل وتوضيح العمل لصاحب الموقع، طوال الفترة الماضية كنت أقتبس أفكارا من لوحات تحكم المواقع الأجنبية مثل Drupal, Joomla ولوحة تحكم WordPress وتطبيقات ويب 2.0 كثيرة مررت عليها، وكنت أسجل فيها لتجربة لوحة التحكم والانتباه الى التفاصيل، وشيئا فشيئا صبحت تتكون لدي افكار شخصية أطبقها في عملي ..

لا استعمل إطار عمل Framework، وأكتب كل شيء من البداية، بدءا من تصميم جدول table ب Sql ثم كتابة الاستعلامات Suery ومرورا بانشاء صفحات HTML لهذا Module: لتعديل وحذف وعرض المحتويات: page_list.tp, page_edit.tpl, page_add.tpl هذا الامتداد اختياري واحيانا أضع امتداد .html

لم أعد أصمم لوحة التحكم بنفس النسق، أصبحت متمردا – إن صح التعبير – في توزيع المحتويات وقد أستغني عن header و footer او sidebar واظهر الاقسام بطريقة مختلفة، Flickr 1 و Flickr 2 و Flickr 3

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

روابط ذات صلة:

• حوار مع مطور ويب
• نبذة عن أعمالي من Flickr
• boagworld مدونة تستحق المتابعة، تعجبي طريقة تفكير صاحبها، ونظرته للتطوير
• مفضلتي في Flickr طالما كانت حافزا لي في الأوقات الصعبة

الأدوات:

• CSS & XHTML
• PHP OOP
• MySQL
• JQUERY
• IE6, IE7, FF, Opera, Safari

رمضان كريم وكل عام وأنتم بخير

Captcah لكن بطريقة بسيطة:

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

قدم يد المساعدة:

مع أن المواقع الحديثة، تتجه إلى تقليل عدد الحقول (input, checkbox, textarea) ما أمكن، (أنظر صفحة الاشتراك في writeboard) إلا أنه يحدث أن يتطلب الاشتراك في خدمة معينة، تعبئة صفحة طويلة من هذه الحقول .. في هذه الحالة، من الضروري أن تحدد الأخطاء للمستخدم، فعبارة: حدثت أخطاء أثناء التسجيل، عبارة عامة مبهمة، حدد أماكن الخطأ بنجمة حمراء أو بتغيير لون Border الخاص بكل حقل، أو حتى بإظهار العبارة الملائمة (كلمة المرور قصيرة، اسم المستخدم محجوز ..) ودائما يمكنك الاستعانة بإحدى Frameworks لاظهار الأخطاء في الحين وأثناء انتقال المستخدم من حقل لآخر حتى قبل الضغط على زر الإرسال، جرب خدمة التسجيل في موقع mint.

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

الخطأ ليس جريمة، نبه بأسلوب لطيف:

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

لا تحضرني هنا كل رسائل الأخطاء التي رأيتها في مواقع عديدة ..

Password Input:

إظهار حقول Password، نعم هناك أوساط تنادي بإظهار كلمة المرور في حقل Input، لأسباب عديدة .. فالناس غالبا ما تخطئ في كلمة المرور، خصوصا إن كانت لوحة المفاتيح بلغة أخرى، كأن تكتب Symbols بدل Letters، شخصيا لم أقتنع بهذه الفكرة بعد، وما زلت أستعمل type = password

.. إلى النهاية

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