‘Designin’n’rollin

منذ فترة أود أن أكتب عن تراك تصميم المواقع الذي أنهيته مؤخراً بنجاح الحمدلله، و أخيراً بما أنه أصبح حدث من العام الماضي قررت ترك الكسل و الكتابة عنه قبل أن أنسى رغبتي تلك!.

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

البداية كانت بأخذ القواعد البسيطة الخاصة بالـ HTML، و تلى ذلك أمر قيادي من شيماء -المدربة- بتصميم أول موقع على أن يحتوي صفحة مليء بيانات + تركيب صورة شخصية لنا على صورة أخرى، فمن الغرور قمت بالتأكيد بتصميم موقع عن نفسي =D، الصورة أعلاه هي الصفحة لأولى للموقع –Intro-، بينما الصورة بالأسفل للصفحة الرئيسية و لمن يعرفني سيُلاحظ أنني كُنت دائماً أحد أبطال The Lord of the rings سراً -الصف الأعلى بالمنتصف- ، لم أجيد الإضاءة بالتعديل لكن أظنني أجدت الشعر، فقط لا تدققوا النظر كثيراً =P.

ثم بعد هذا دراسة قصيرة لعدة برامج مثل الـ Photoshop و الـ Fireworks فقط للتعرف على نقاط متفرقة نظراً لأن جميعنا درسناهم سابقاً بأية حال، و أنتقلنا بعد ذلك إلى الـ Dream weaver،..

و لأن البرنامج يُقدم إمكانيات عدة لا يوفرها الـ HTML -على الأقل بشكل بسيط- فقد أراد كلاً منا الإستفادة منه بأكبر شكل في تصميم الموقع القائم عليه، لذا قٌمت بصنع Intro متحركة Gif تصاحبها موسيقى قصيرة، لن أضع صورتها هنا للأسف لكن يتلو الصفحة الإفتتاحية صفحة الخريطة تلك، عند فتح الصفحة تكون الخريطة مغلقة ثم تتدحرج بالتدريج لتظهر كرسالة قديمة تُفتح، و نظراً لأنها خريطة قديمة قٌمت بإستخدام شُعلة تصاحب الماوس –Java Script– تشبه تلك التي بموقع Enya، و لأن الخريطة صورة متحركة أستخدمت الـ Image map لوضع الروابط عليها بدون قطعها لأجزاء مختلفة.

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

و هنا صفحة الألبومات، القائمة على اليسار تظهر بشكل لا أُكثر من مدح نفسي إن قلت أنه رائع –Gif أيضاً- ، و منها ننتقل للألبومات حيث أستخدمت سماح شيماء لنا بإستخدام أكواد جافا و فلاشات جاهزة لوضع زر Play بسيط من أحد المواقع التي تُوفره مجاناً لوضع الأغاني.

بعد الإنتهاء من كل هذا جاء دور الـ Flash، بعد مقدمة بسيطة عنه قام كلاً منا بتصميم Intro فلاشي متحرك لموقع الـ Dream weaver، فقمت بصنع هذا التصميم للباب يهتز بطريقة أكتشفت لاحقاً أنها تُشبه أفلام الرعب، ثم يفتح و يحدث تأثير يوحي بالدخول عبر الباب و الوصول لجدار عليه الموقع.

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

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

و لأن شيماء أعجبتها الفكرة كثيراً لم تطالبني بمشروع نهائي و أعتبرت هذا مشروعي النهائي، فشاركت جيهان صديقتي مشروعها النهائي، الذي تم إنهاءه بالكامل في ساعة و نصف، بالإضافة إلى 5 دقائق بالبداية تكرم بها القائم على الصيانة للحصول على بعض المصادر من النت =D، لكن لأني بدرجة ما أخجل منه -من التصميم- فلن أريكم سوى تلك الكلمة، أعجبني كثيراً مظهرها لذا، هي كل ما ستروه من هذا التصميم الأخير =P.

بأية حال كل ما سبق كان بالنهاية لتحصيل تلك :