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

مع إطلاق الآي باد وافتقاره إلى دعم الفلاش، ظهرت على السطح مناقشات عدة فيما يخص مستقبل الفلاش. مع أخذ هذا الأمر بالاعتبار، أعتقد أنه من الحكمة بناء برمجيات مصغرة widgets وبسيطة مثل عارض الصور المنزلقة باستخدام HTML/CSS/Javascript وترك التطبيقات الأكثر تفاعلية للفلاش عند الحاجة. سيكون للـ image slider المعتمد على لغة الـ HTML فوائده من حيث تحسين الظهور في محركات البحث SEO والتخلص برشاقة من المنزلقات التي تعتمد أو لا تعتمد على الجافا سكريبت.

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

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

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

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