مغامراتي البسيطة في التكويد! 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 أعلاه.

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