التعديل على مدونات بلوجر ليس صعبا، لكن لا يمكنك تعديل كل شيء

مقدمة:

كتبت في مواضيع كثيرة في هذه المدونة عن تعديلي لأكوادها لتتناسب مع ذوقي وأيضا مع تعليمات محركات البحث SEO على قدر الإمكان، من هذه المواضيع على سبيل المثال (مرتبة من الأحدث للأقدم):

1. تحديثات جديدة في تصميم وبرمجة هذه المدونة
2. عام ونصف مع برمجة مواقع الإنترنت
3. رجوعي إلى إستخدام قالب simple من بلوجر والتعديل عليه 

اضافة تدوينات ذات صلة في نسخة الموبايل:

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

اضافة باقي الاضافات المهمة لنسخة الموبايل:

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

1. ابحث في هذه المدونة
2. تابعني عبر البريد الالكتروني
3. المشاركات الشائعة في كل الأوقات
4. المشاركات الشائعة في آخر شهر
5. للتواصل معي
6. الوسوم وعدد الموضوعات لكل وسم

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

ملحوظة:

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

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

والى أن نلتقي، دمتم سعداء..

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

كنت قد كتبت تدوينتين صغيرتين في منصة يومي، تفصلان العنوان "من فوائد معرفة تصميم الويب عند تصفح المواقع" تحت عناوين "من فوائد البرمجة والتصميم" و "من فوائد البرمجة والتصميم 2" وها أنا أعيد نشرهما هنا، لتعميم الفائدة لديكم زوار المدونة الكرام.

من فوائد البرمجة والتصميم:

حاجة من الحاجات الرائعة اللي استفدتها من البرمجة والتصميم هي إني لما أجي أقرا مقال والاقي الألوان هتتعبني، أقوم بسرعة مغيرها ألوان الخلفية للأسود والكلام للأبيض، وبكده المشكلة إتحلت I feel like: Mission Impossible

من فوائد البرمجة والتصميم 2:

2: ﻷنه ثاني موضوع قصير لي بهذا العنوان..

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

.body {

direction : rtl;

text-align: right;

}

وبهذين السطرين فقط، أستمتع بالموقع الذي أستعمله بدون أي مشاكل تذكر!
ومازلت أشعر بأنه: Mission Impossible!

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

وإلى أن نلتقي،، دمتم سعداء..

تحديثات جديدة في تصميم وبرمجة هذه المدونة

مقدمة:

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

تعديلات التصميم:

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

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

تعديلات البرمجة:

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

وإلى أن نلتقي،، دمتم سعداء..

مشكلتي العويصة مع معرض أعمالي

مقدمة:

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

المشكلة:

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

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

$counter =0;

أسباب عدم وجود معرض أعمال برمجة لدي:

1. أحد المواقع التي قمت ببرمجتها، هو هذا ، لقد غير صاحب الموقع فيما يبدو بيانات الدخول إلى قاعدة البيانات، فحتى لو أتيح لي إخفاء الأخطاء الظاهرة فيه، لن يعمل الموقع جيدا، لأنه يعتمد بالتمام والكمال على قواعد البيانات، ومن أين له هذا الآن؟ لذا لن يصلح هذا الموقع لتضمينه في معرض أعمالي، لذا سيظل العداد يساوي صفرا ولن يزيد.
2. أكبر السكريبتات التي قمت ببرمجتها على الإطلاق وأعقدها، هو سكريبت إدارة مستشفى خيرية في مركز دير مواس بمحافظة المنيا بمصر، لكن هذا السكريبت الضخم والذي إضطررت لطلب مساعدة أحد أصدقائي المبرمجين على الفيس بوك للقيام بتنفيذ بعض الأجزاء فيه وأنا الأجزاء الاخرى حتى أستطيع الإلتزام بميعاد التسليم، أقول هذا السكريبت الضخم لم يظهر على الإنترنت على الإطلاق، وربما لا يظهر أبدا، فما فائدة إظهار سكريبت كهذا على الإنترنت، لذلك لا يمكنني أن أضمنه أيضا في معرض أعمالي، وللأسف الشديد سيظل ال counter آسفا الجلوس هناك بلا قيمة (صفر)!
3. من أصعب الأشياء علي هو الكذب، فأن أكذب وأقول أن هذا السكريبت الذي قمت بالتعديل عليه هو من معرض أعمالي أو أنا الذي قمت بتنفيذه، فهذا أمر لا يطاق، ولن أحترم نفسي ما حييت بعد هذه الفعلة النكراء، وما أكثر الإسكريبتات التي عدلت عليها، وبهذا يظل معرض أعمالي فارغا!
4. في بداية عملي كمبرمج مستقل، كنت أقوم ببرمجة أو تصميم المواقع، لكني لم أهتم قط بما ستؤول إليه هذه المواقع، أو أين أجدها على الإنترنت، حتى أرجع إليها فيما بعد (وياليتني كنت أهتممت!) وبهذا السبب سيظل عدادنا العزيز حزينا وقيمته ستظل صفرا!

أضرار عدم وجود معرض أعمال:

1. لم أكف عن الشكوى (على الأقل على مستوى الداخلي، أي شكوى إلى نفسي وليس إلى إنسان آخر)  أنه لم يتم توظيفي كمبرمج في موقع Upwork، والذي قمت فيه ببعض أعمال الترجمة ولي سجل أعمال جيد هناك، ولم يتم توظيفي أيضا في موقع مستقل  بسبب أنه لا يوجد لدي معرض أعمال، ليس الخطأ خطأ أصحاب المشاربع بالطبع، في الحقيقة لا أدري خطأ من هو!
2.  حتى في موقع خمسات، يسألوني بعض الزبائن عن معرض أعمالي، وأقول لهم بأنه لا يوجد للأسف، وأستعيض بذلك بسجل التقييمات الإيجابية لي في الموقع هناك على خدماتي البرمجية. بعضهم يقبل ذلك ونبدأ العمل، ولكن ربما يتأفف بعضهم داخل نفسه ويقولون: مبرمج بلا معرض أعمال؟! ياللقرف! ويطيرون بعيدا..

خاتمة:

 طيب: ما الذي أريده الآن؟ لا شيء، لكن لماذا كتبت هذا الموضوع؟ للأسباب التالية:

1. لتعريف زبائني أسباب عدم توفري على معرض أعمال.
2. للتسويق لخدماتي على المواقع المختلفة (صريح أنا، صحيح؟)
3. للعودة إلى هذا المقال فيما بعد (ربما بعد خمس سنوات مثلا) حينما تقتلني النوستالجيا لأراجع ما كتبته في الماضي، وأقول ياه! كنت مبرمجا يائسا فيما يبدو في الماضي..

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

عام ونصف مع برمجة مواقع الإنترنت

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

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

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

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

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

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

عندما تصبح البرمجة عشقا

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

كنت أتعلم في الكلية العديد من المواد التي ليست لها علاقة مباشرة جدا بالبرمجة، أما عن مواد البرمجة فتعلمت كورس لغة سي C وكورس آخر للغة سي بلص بلص C++، ولا أدري أو لا أتذكر جيدا ما هي الأسباب المباشرة لعدم تحصيلي جيدا لهذه اللغات، لكني أتذكر أنني كنت أترك مذاكرتها في منزلي وأقرأ عن وأذاكر برمجة الويب، ربما عاودت مذاكرة لغات C++ وبايثون Python في المنزل (بعد فصلي من الجامعة) لكن لم يكن تواتري عليهما بنفس تواتري على تصميم وبرمجة الويب HTML, CSS, PHP, MYSQL وأحيانا قليلة JavaScript، لكن يعاودني الان الحنين أحيانا لمعاودة دراسة بايثون وC++.

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

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

أما الآن، فشاءت الظروف أنني تمكنت من اللغات الأساسية لبرمجة مواقع الإنترنت وهي PHP, MYSQL, HTML, CSS بل وقمت بتنفيذ العديد من المشاريع بهم وربحت منهم مالا جيدا الحمدلله، والآن في طور تعلم لغة جافا سكريبت JavaScript مع أني أراها بالنسبة لل PHP كاللغة الألمانية بالنسبة للغة الإنجليزية: أصعب بكثير، وليست مفيدة جدا أو ضرورية مثلها.. لكن سوق العمل يطلبها ولا أظن أن هناك مواقع كثيرة لا تعتمد عليها لكي تخرج التصميم متفاعلا.. (منها المواقع التي قمت ببرمجتها أنا)

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

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

أهدافي قبل نهاية 2016

مقدمة:

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

الهدف:

بإختصار وكي أستطيع إنهاء هذا المقال قبل حدوث أي شيء يمنعني من ذلك :D سأقوم إن شاء الله بتقوية نفسي في مجال تطوير الويب، تطوير الواجهات الأمامية تحديدا، بكل ما يحمله بين طياته من لغات وبعض أطر عملها، فمثلا سأقوم بإتقان البوتستراب Bootstrap كإطار عمل للغة CSS وسأقوم بإتقان النسخة الحديثة من لغة HTML وهي HTML 5، سأقوم أيضا بإتقان الووردبريس والجافاسكريبت JavaScript وربما أتطرق إلى إحدى مكتباتها مثل Jquery!

المعرفة السابقة والأهداف المرجوة:

كل أو معظم ما ذكرته أعلاه لي به معرفة سواء أتت بالممارسة أو بالدرس، فجافاسكريبت JavaScript مثلا قمت بدراستها ومارستها قليلا في موقعي اﻵخر وفي موقع آخر أقوم بتكويده حاليا مقابل أجر. لكن هذا مجرد إستخدام بسيط وغير متعمق لجافاسكريبت JavaScript ومكتبتها Jquery. فما أطمح له اﻵن هو إتقانهما. أيضا إستخدمت في تكويد الموقع المذكور أعلاه إطار العمل بوتستراب Bootstrap لجعل الموقع متوافق مع كافة الأجهزة مثل اللابتوب، التابلت والموبايل، وإستخدمته أيضا في مشروع بسيط قمت بتكويده مقابل أجر أيضا لنفس السبب وهو التوافق والتجاوب مع أجهزة الهواتف الذكية والتابلت. إذن الأمر ليس جديدا علي، لكن كما ذكرت، هدفي هو إتقان هذه الأدوات. أما عن ووردبريس، فقد قمت والحمد لله في الأشهر الأخيرة من العام الماضي بتكويد قالب ووردبريس من الصفر، وجعلته متجاوب لكن بدون إستخدام بوتستراب بل إستعنت بتقنية ال media queries! وكان قالبا كاملا إلا من الأشياء القليلة جدا والتي سأقوم بإتقانها وإتقان الووردبريس بأكمله قبل حلول نهاية 2016 إن شاء الله.

ما هي خطتي للأمد البعيد:

ربما تعرفون كما ذكرت في مقالات سابقة أكثر من مرة أن معظم العمل الحر الذي أقوم به هو الترجمة، فقط قمت مؤخرا بإضافة بعض الخدمات التي تنحصر بين كلا من الترجمة والبرمجة أو تطوير الويب، مثل تعريب القوالب أو تعريب ملفات po! وقمت أيضا بإضافة خدمة يتيمة  لتطوير الويب حصرا وهي إنشاء وتعديل صفحات HTML و CSS ، أطمح في إنحسار خدمات الترجمة وفي زيادة خدمات تطوير الويب شيئا فشيئا إلى أن يكون إعتمادي كله على تطوير الويب ليس الترجمة، ﻷني أحب تطوير الويب أكثر من الترجمة، صحيح أحب الترجمة، خاصة القصص والمقالات الشائقة، وتعريب القوالب وتطبيقات الهواتف الذكية وغيرها، لكن مردود الترجمة المادي ليس جيدا بما فيه الكفاية، بالطبع أحمد الله وأشكر فضله كثيرا على النعم التي أنا بها اﻵن، لكن تطوير النفس مطلب ليس حراما أو عيبا! أليس كذلك؟

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

مغامراتي البسيطة في التكويد! HTML و CSS

أولا: تكويد قالب PSD

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

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

ثانيا: تكويد قائمة منبثقة drop-down menu

هذا الشيء الأول الذي أحب أن أشارككم به، الشيء الثاني عبارة عن إنجاز أكثر بساطة - ربما تكونوا قد لاحظتم بالفعل أن إنجازاتي كلها بسيطة، وهذا سبب إختياري للعنوان: مغامراتي البسيطة في التكويد - الإنجاز الثاني هو مقدرتي أخيرا على إنشاء قوائم منبثقة إحترافية drop-down menus في موقعي البسيط هذا، كنت قد أنشأت تلك القوائم ربما من خمسة أيام، لكني إستخدمت في تكويدها لغة Javascript، ولم تكن هي الحل العملي، وعرفت هذا أثناء التكويد لكنني قلت سأنهي ما بدأته كمحاولة للتعرف على javascript عن كثب، وبعدها من الممكن إستخدام CSS لعمل نفس الشيء، وقد تم! فمنذ أسبوع كنت أحاول إنشاء قوائمي المنبثقة في شريط التنقل Nav-Bar بإستخدام جافاسكريبت وكان الأمر صعبا فعلا، أسطر كثيرة من الكود بطريقة لا يمكنك تنظيمها وإلا يحدث خطأ في تشغيل الكود، وفي نفس الوقت لم تخرج تلك القائمة في صورة حسنة، بل كل ما إستطعت فعله هو أنه عند التنقل من جزء ﻵخر في القائمة الرئيسية بزر الفأرة عن طريق hover تظهر القوائم المنبثقة وتختفي، لكن إن خرجت من القائمة المنبثقة لباقي محتويات الصفحة نفسها، ستظل القائمة المنبثقة ظاهرة وهذا عيب كبير، إلى أن جربت CSS اليوم.

بإختصار ستكتب هذين السطرين وستجد كل شيء أصبح لطيفا ورائعا:

#main-nav > ul > li:hover > ul { display:block; }

#main-nav > ul > li > ul { display:none; }

بمقارنة الكود أعلاه بكود جافاسكريبت الذي إضطررت كتابته لعمل نصف ما يعمله هذا الكود، سنجد أن السطرين أعلاه سطرين رائعين، ﻷنني فعلا تعبت من كتابة أسطر جافاسكريبت ودوالها والأحداث المرتبطة بها في لغة HTML مثل onmouseleave(), onmouseout(), onmouseover(), والكثير من أكواد الدوال التي تخصص النتائج المترتبة على هذه الأحداث، كان كابوسا حقيقيا، سرعان ما تحول إلى التنزه في جنة غناء بعدما إستبدلت كود جافا سكريبت بكود CSS أعلاه.

حسنا هذه هي مغامراتي اليوم، مع اللقاء في مغامرات أخرى!

رجوعي إلى إستخدام قالب simple من بلوجر والتعديل عليه

لدي مشاغلي الكثيرة حيث أنني كما تعرفون موظف صباحا بوزارة الصحة ومستقل بعد الظهر، ورغم أني حاليا بينما أحدثكم ورائي المزيد من المهام التي يجب أن أؤديها، إلا أنني قررت أن أوثق لكم تلك اللحظات التي قد تبدو غير مهمة اﻵن، لكن عند قراءتها في المستقبل سأشعر كم هي مهمة.

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

style='overflow-x: hidden';

وقد إستفدت منها أيضا في القالب الحالي والذي كان به نفس العيب أيضا.

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

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

مثلا غيرت المسافة بين السطور وحجم الخط ونوعه في المقالات عبر هذه التعليمات:

font-size: 15px;

line-height: 2;

font-family: Droid Arabic Naskh, Droid Arabic Kufi; 

وغيرت أيضا في المسافة بين حدود صندوق التعليق وآخر الأحرف بالتعليق عبر السطر التالي:

padding-left: 10px;

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

font-size: 15px;

line-height: 2;

font-family: Droid Arabic Naskh, Droid Arabic Kufi; 

كما أنني خصصت نوع الخط Droid Arabic Kufi لكلا من عنوان المدونة والعناوين الرئيسية سواء في المقالات أو في رءوس قوائم الشريط الجانبي.

أعتقد أن القالب اﻵن جاهز ﻷدون عليه بكل إحترافية، ينقصه شيء أو إثنان أو ثلاثة على الأكثر وهم:

1. حذف الفوتر
2. تعديل خط قائمة التنقل
3. لا أدري اﻵن ما رقم 3! تذكرته: عرض مقتطفات فقط من المقالات في الصفحة الرئيسية.

وهذه الثلاث أشياء سأعمل على أدائها ما أن تحين الفرصة.

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

أخيرا أحب أن أقول لكم: دمتم سعداء ..

التعديل على أكواد قالب مدونتي - تعديل التعليقات والتدوينات

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

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

.comments .comments-content .comment-content

{

text-align: right;
direction: rtl;
font-size: 15px;
line-height: 2em;

}

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

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

أذكرك صديقي، إن كنت تريد التعديل على قالب مدونتك والتعديل على مظهره، يمكنك طلب هذه الخدمة مني مقابل 5 دوﻻرات عن طريق هذا الرابط

إلى اللقاء! حتى المرة المقبلة :)