اختيار العناصر الجمالية المناسبة عامل مهم في شد الزائرين . مراحل تصميم الموقع في انترنت ... النصوص والصور والرسوم والقيمة العملية

مع انتشار شبكة انترنت الواسع والنجاح المدهش الذي سجله نسيج العنكبوت العالمي، بدأنا نشهد ظاهرة تشبه تلك التي شاهدناها في الايام الاولى لظهور النشر المكتبي باستخدام الكومبيوتر. ففي تلك الايام، ومع ظهور برامج النشر المكتبي اعتقد الكثيرون ان بإمكانهم تصميم الوثائق بشكل مهني بالاكتفاء بما تقدمه هذه البرامج من وظائف. فأصبح المبتدئ يرمي كل ما تقع عليه يده على الصفحة من صور ورسوم وانماط خطوط دون اعتماد اي مقياس نابع من العنصر البشري من حسن ذوق ومعرفة بفنون النشر وغيرها. ولم تتحسن الاوضاع الا عندما تأكد هؤلاء من ان ما ينشرونه يبقى لهم وحدهم اذ ان احداً لم يكلف نفسه النظر الى هذه المطبوعات الرديئة، فاضطر الناشرون الهواة للاستعانة بمصممين مهنيين لإنجاح مطبوعاتهم.
والتاريخ يعيد نفسه مع انترنت، فمع ظهور برامج تصميم صفحات لنسيج العنكبوت تعتمد مبدأ "ما تراه تحصل عليه" WYSIWYG تحول جميع الناس الى مصممي صفحات. وبالفعل، نفذت هذه البرامج وعدها وكان ما رأيناه قد حصلنا عليه فعلاً على شكل عشرات الآلاف من مواقع العنكبوت رديئة التصميم لا تستأهل حتى الزيارة الاولى لها.
ويشكل التواصل نواة التصميم بحيث يتم تحديد المسألة وابتكار الحل الذي يوازي بين المعلومات والاسلوب الجمالي الذي يقدمها. ولا يتوقف هذا التوازن بين الشكل والوظيفة على تطور تقنيات الوسيط اي نسيج العنكبوت بل يشكل نموذجاً مهماً لمعالجة مشاكل تصميم الموقع. وفي هذا الوسيط الذي لا يزال يعتبر حديث العهد، هناك روابط متينة بين المحتوى والتصميم والتفاعل مع المستخدم. فالنصوص والصور والرموز البرمجية التي تعرضها تتلازم لدرجة ان تجاهل اي منها يؤدي الى فشل واضح في استغلال طبيعة نسيج العنكبوت.
ويؤدي ادراك التقنية التي تحرك النسيج الى استخدامه بشكل سليم وتفادي المفاجآت غير السارة للحصول على محتوى ذكي تقدمه وسائل عرض مناسبة.
فالتصميم الجيد ليس للزينة فقط وبفضل الرموز البرمجية المكتوبة بشكل سليم يبسط الهرمية المربكة للبيانات ويرشد الزائر عبر طبقات المعلومات المكدسة الى الخواص الذي يريدها. لذلك يتحتم على مصمم الصفحات المهني الاطلاع قدر المستطاع على كل مجالات النشر على النسيج. فالمصمم الجيد سيدرك مثلاً امكانات لغة جافاسكريبت وكيفية استخدامها لحل مشاكل تصميم المعلومات وعرضها. وينطبق ذلك على كل عضو من اعضاء فريق تطوير الصفحات حتى لو اقتصر هذا الفريق على شخص واحد.
لذلك نتوجه هنا الى الذين ينوون البدء بتصميم صفحات للنسيج لنعطيهم بعض النصائح المستقاة من خبرة المصممين الاقدم واخطائهم لعلهم يعتمدون البداية السليمة في هذا النشاط المشوق. ولن نعرض كيفية تصميم رسوم الموقع وصوره لأن هذا الموضوع معالج في مكان آخر من هذا الملحق، الا اننا سنتطرق سريعاً الى موضوع الرسوم وكيفية الحصول على افضل النتائج التي تناسب العرض على النسيج.
اذاً قررت انك تملك معلومات تريد عرضها على الآخرين. وقد تكون هذه المعلومات سيرتك الشخصية او دليل منتجات شركتك او اي موضوع تعتبره مهماً وتريد ان يشاركك فيه الآخرون. وبما ان كلفة نشر هذه المعلومات في نسيج العنكبوت اصبحت في متناول الجميع سيكون من السهل انشاء موقع يعرض هذه المعلومات ويلاقي اهتمام عدد من الزائرين.
وقد يكون الاعتماد على فريق متخصص في التصميم والتطوير اكثر ما يساهم في زيادة كلفة المشروع لذلك قد تقرر، اذا كنت تتقن بعض برامج الرسم وتملك خيال واسع وذوق مرهف، ان تتكفل بهذه المهمة بنفسك. اما تطوير الموقع فيتطلب القليل من الصبر وجهاز كومبيوتر واتصال بشبكة انترنت مع ان هذا الاتصال ليس ضرورياً لعملية التطوير بحد ذاتها اضافة الى اطلاع بسيط على لغة هايبرتكست التي تستخدم علامات معينة لوصف الصفحة لدى عرضها في برنامج التصفح.
البرامج الضرورية
اول ما تحتاج اليه في عملية التطوير هو البرامج. قد يقول البعض انه لا حاجة لتعلم لغة هايبرتكست مع وجود برامج مثل مايكروسوفت فرونت بيج او ادوبي بيج ميل او كلاريس هوم بيج تقوم بإدخال علامات هذه اللغة تلقائياً لدى وضع العناصر على الصفحة. الا ان هذه البرامج لا تتيح للمستخدم التحكم بعلامات اللغة فضلاً عن انها تدخل عليها علامات خاصة بها لا تتفق وتوصيات تجمع نسيج العنكبوت من جهة، ومن جهة اخرى تتسبب في تغيير عرض الصفحة في بعض برامج التصفح. لذلك يشكل التعامل المباشر مع علامات لغة هايبرتكست افضل وسيلة لتطوير صفحات تظهر في برامج التصفح المختلفة كما يريد مؤلفها تماماً. اما حجة صعوبة تعلم هذه اللغة، فهي واهية ولا قيمة لها اذ ان العملية لا تتطلب اكثر من فهم بضع عشر علامة وليس من الضروري حفظها عن ظهر قلب بل فهم ما تعني كل منها. واذا لم يكن الراغب في التطوير مستعداً لبذل هذا الجهد الخفيف فالافضل له ان يبقى زائراً للمواقع لا مطوراً لها.
يقول الصفائيون ان افضل برامج لتطوير الصفحات هي معالجات الكلمات البسيطة مثل نوت باد او سيمبل تكست حيث يتم ادخال كل العلامات يدوياً. ولكن لن نذهب الى هذا الحد، فمعرفة لغة هايبرتكست لا تفرض كتابتها يدوياً وهناك برامج عديدة تتيح ادخال هذه العلامات بالنقر على بعض الازرار او باختيارها من قوائم جاهزة. ولعل افضل هذه البرامج برنامج هوم سايت www.allaire.com لويندوز وبرنامج بي.بي.اديت web.barebones.com لماكنتوش. ويتيح هذان البرنامجان ادخال العلامات على الصفحة دون التدخل مطلقاً فيها. ويكفي لاستخدامهما معرفة لغة هايبرتكست لمعرفة اي من العلامات يجب ادخاله وفي اي موقع. واذا كان لا بد من استخدام برنامج تطوير رسومي للصفحات المعقدة مثلاً، يبقى برنامج دريم ويفر www.macromedia.com الافضل لأنه ينتج انظف علامات برمجية بين البرامج الرسومية فضلاً عن انه لا يقوم بإدخال رموز خاصة به على ان بعض اوامر جافاسكريبت التي ينتجها معقدة جداً ويمكن لمتقن هذه اللغة كتابة رموز افضل منها انظر الاشكال 1 و2 و3.
المخطط
اول عمل يجب القيام به هو رسم مخطط للموقع، وهو رسم بياني على ورقة يبين الصفحات المكونة للموقع وترتيبها وما تحتويه من نصوص وصور وروابط بين الصفحات وبينها وبين مواقع اخرى. يبقى رسم المخطط اليدوي اسهل الطرق الا ان هناك من يستخدم برامج مخصصة بالمخططات والرسوم البيانية الشكل 4. ويساعد رسم المخطط في تكوين فكرة واضحة عن الموقع بكامله مع ان هذا الموقع قد يتغير في ما بعد، بإضافة صفحات جديدة مثلاً لأن هذا الوضوح هو الكفيل بإنشاء افضل الوسائل التفاعلية التي تسهل على الزائر تصفح الموقع والحصول على ما يفيد من المعلومات.
النصوص
بعد اخذ فكرة وافية عن مخطط الموقع يبدأ العمل الفعلي فيه. والخطوة الاولى هنا هي ادخال النصوص. ولا جديد في هذا الموضوع اذ يكفي صف المادة في اي معالج نصوص مثل نوت باد او سيمبل تكست كما يمكن صفها مباشرة في برنامج تصميم الصفحات. وتجدر الاشارة هنا الى ان عملية الصف تتم دون اي تنسيق للنص. فيمكن صفه على شكل سطر واحد طويل او على شكل كلمة واحدة في كل سطر دون ان يؤثر ذلك على تنسيق النص في الصفحة النهائية لأن علامات التنسيق تدخل عليه في ما بعد في برنامج التصميم. ونعني بذلك ان الضغط على مفتاح الادخال مثلاً، خلال الصف للبدء بفقرة جديدة لن ينشئ هذه الفقرة في الصفحة النهائية حيث نحصل على فقرة جديدة عندما ندخل علامة الفقرات.
الصور والرسوم
يستحسن دائماً انشاء صور ورسوم الموقع قبل الشروع ببرمجة صفحاته. ويمكن تنفيذ هذه الرسوم بأي برنامج مخصص لذلك مثل ادوبي فوتوشوب او كورل فوتوبينت او بينت شوب برو. اما العامل الاهم في انشاء الرسوم فهو الادراك ان معظم الزائرين لا يملكون اتصالاً سريعاً بالشبكة من نوع الخطوط المتخصصة او ISDN. فمعظم الاتصالات تتم بواسطة اجهزة مودم تبلغ اقصى سرعاتها النظرية 56 كيلوبت في الثانية. لذلك يتحتم على الرسوم ان تأتي بملفات صغيرة ليتم تحميلها بسرعة في المتصفح. ويكون دائماً من الافضل خفض حجم ملف الصورة الى ادنى حد ممكن مما يدفع المصمم الى التأرجح دائماً في توازن دقيق بين حجم الملف وجودة الصورة خاصة اذا كانت تحتوي على الوان كثيرة ويجب بالتالي حفظها بتنسيق JPEG المضغوط الذي يفقد من تفاصيلها كلما رفعنا من معدل ضغطه.
وهنا نميز طبعاً بين نوعين من تنسيقات ملفات الصور هي الاكثر استخداماً على النسيج. فإذا كانت الصورة تحتوي على اقل من 256 لون يستحسن دائماً حفظها بتنسيق GIF لأنه يحافظ على مساحات اللون الواحد بشكل افضل من تنسيق JPEG. وينطبق ذلك على رسوم الازرار والخلفيات ذات اللون الواحد واشرطة العناوين وصور النصوص.
اما اذا كانت الصورة تحتوي على اكثر من 256 لون كالصور الفوتوغرافية مثلاً، فيشكل تنسيق JPEG افضل وسيلة لحفظها لأنه يضغطها بنسب كبيرة دون ان تفقد الكثير من جودتها. وهنا بالطبع يجب تكرار التجارب على الصورة للعثور على افضل توازن بين جودتها وحجم ملفها. وكشفت الخبرة ان برامج معالجة الصور مثل فوتوشوب او فوتوبينت ليست افضل ما يمكن استخدامه للضغط بتنسيق JPEG لأنها في حال الحفاظ على جودة الصورة تنتج ملفات كبيرة جداً. لذلك ظهر عدد من البرامج المساعدة والملحقات المتخصصة في ضغط الصور بتنسيقي GIF وJPEG يتم استخدامها بعد اتمام تصميم الصورة في برنامج معالجة الصور. ووجدت شخصياً ان افضل برنامج متخصص في ضغط الصور هو ويب فايز توتاليتي www.autofx.com اذ انه يضغط الصور بنسب كبيرة جداً مع الحفاظ بشكل مدهش على جودتها الشكل 5. ويأتي البرنامج على شكل تطبيق قائم بذاته او كملحق لبرامج معالجة الصور المعروفة. ويمكنه ضغط JPEG وGIF مع عرض معلومات حول حجم الملف النهائي وسرعة تحميله بواسطة كل انواع اجهزة المودم فضلاً عن توفيره وظائف ادخال دمغة على الصورة watermark او تحسين محاكاة الالوان dithering.
تحرير هايبرتكست
بعد تحضير النصوص والصور وفرز كل عناوين النسيج والبريد الالكتروني التي ستدخل على الموقع، يبدأ العمل الجدي في تحرير علامات لغة هايبرتكست وادخال اوامر جافاسكريبت في حال الحاجة اليها. ونكرر هنا ان افضل طريقة لتحرير العلامات واكثرها مهنية هي باستخدام محرر علامات والابتعاد قدر الامكان عن البرامج الرسومية. فعدا عن التشويهات التي تدخلها هذه الاخيرة على الرموز والتي تحدثنا عنها سابقاً، يمنع استخدامها المطور من السيطرة على رموزه.
ولنضرب مثلاً صغيراً عما نتحدث عنه، فيمكن اخذ مثال انشاء فقرات النص او وضع الصور على اسطر متتابعة. فمن المعروف ان هناك علامتين في لغة هايبرتكست تتكفل بهذه المهمة هما علامة العودة الى اول السطر br وعلامة الفقرات p. وتختلف هاتان العلامتان في حجم المساحة الفارغة التي تفتحاها بين العنصر والعنصر الذي يليه فقرات نص او صور. الا ان البرامج الرسومية تفرض هي العلامة التي يجب ادخالها عادة p دون السماح للمطور باختيار ايهما يريد، بينما تترك برامج تحرير العلامات الحرية كاملة للمطور لاختيار العلامة الذي يريد ادخالها.
تصميم الصفحة
يجب التذكير بأن علامات لغة هايبرتكست ليست ادوات تصميم صفحات بقدر ما هي وصف لمحتوى الصفحة لذلك لا يمكن الاكتفاء به اذا اردنا ادخال تصميمات معقدة على الصفحة. وهنا تتوسع اللغة لادخال عناصر جديدة مثل الجداول والاطارات مع ان الاستخدام الكثيف لهذه الاخيرة غير محبذ والطبقات واوراق الانماط وغيرها. على ان استخدام كل هذه التقنيات يجب ان يكون حذراً لأن كل برامج التصفح لا تدعمها، ومن مهمات المصمم المهني الاخذ دائماً في الاعتبار هذا الواقع اذا اراد فتح موقعه الى اوسع جمهور ممكن مما يقودنا الى الكلام عن توافق الموقع مع اكبر عدد من الزائرين.
التوافق
قد يكون اول متطلبات تطوير مواقع للنسيج الادراك ان الاجهزة تتنوع بتنوع المستخدمين. واذا لم يكن الموقع مخصصاً لشبكة انترانت داخلية حيث يعرف المصمم كل الاجهزة المرتبطة، عليه الاخذ بالاعتبار كل انواع الاجهزة والشاشات واصدارات برامج التصفح وسرعات الاتصال للمستخدمين الذين قد يزورون موقعه.
وتنقسم مسألة التوافقية الى نوعين: توافقية الشاشات وتوافقية برامج التصفح.
اما في ما يتعلق بالشاشات فيبدأ التفكير فيها من وضح تخطيط الموقع. وعندما يعرف المصمم ماذا سيضع في صفحاته عليه بتصميم هذه الصفحات لتظهر بشكل جيد على اكبر عدد ممكن من شاشات الكومبيوتر. وقد يكون القاسم المشترك لهذه الشاشات هو حجم اصغر شاشة متوافرة حالياً لدى المستخدمين وهي شاشة بدقة 640 × 480 نقطة ما يعادل شاشة 14 بوصة. لذلك فعلى المطور ان يصمم صفحاته لتظهر كاملة في هذه المساحة. واذا كانت الصفحة تحتوي معلومات اكثر من مساحة الشاشة الصغيرة يمكنه زيادة حجم صفحته الى مساحة ونصف المساحة كحد اقصى. على انه يجب دائماً التقيد بعرض الصفحة اذا لم يمكن التقيد بطولها. فقد اظهرت الدراسات ان ظهور شريط تحريك افقي يبعد الزائر بسرعة، كما يبعده شريط تحريك عمودي طويل جداً.
وهناك برامج عدة تساعد المصمم الذي لا يملك الا شاشة واحدة في اختبار صفحاته على مساحات مختلفة من الشاشة نذكر منها براوزر سايزر BrowserSizer لويندوز الشكل 6 وسمول سكرين Small Screen لماكنتوش الشكل 7، ويمكن تحميل البرنامجين من www.shareware.com. ويقوم البرنامج الاول بتحجيم المتصفح لكي يبدو كما لو انه على شاشة 14 بوصة، اما الثاني فيرسم حدود شاشة 14 بوصة مما يتيح معاينة ما يقع داخلها او خارجها.
واما التوافق بين برامج التصفح فيتم بتنفيذ ما يسمى بالانحلال الانيق degrade gracefully. وتعني الصفحات المنحلة ان هذه الصفحات تظهر بشكل جيد على اي جهاز وباستخدام اي برنامج تصفح حسب توصيات تجمع نسيج العنكبوت. ولا يتم ذلك الا بفضل مطوري صفحات اذكياء تعهدوا بعدم اقصاء اي زائر عن الموقع. وكما قلنا فإن التصميم يجب ان يخضع للمحتوى، فإذا كان لا بد من استخدام اوراق الانماط مثلاً التي تدعمها احدث اصدارات برامج التصفح فقط يجب الاطلاع على عدد الذين يمكنهم مشاهدتها. وهناك العديد من المواقع على النسيج التي توفر احصاءات عن انواع برامج التصفح المستخدمة نذكر منها www.thecounter.com/stats/. وكذلك اذا كانت احدى الصفحات تعتمد كثيراً على اوامر جافاسكريبت التي يدعمها بعض البرامج ولا يدعمها البعض الآخريفرض الانحلال الانيق تحسس برنامج الزائر وتوجيهه الى نسخة الصفحة الخالية من هذه الاوامر الشكل 8.
نصائح اخيرة
اخيراً ننهي هذا التجوال ببعض النصائح المفيدة:
- وضع مخطط للموقع
- ابقاء الصفحة ضمن حدود اصغر شاشة افقياً وشاشة ونص عمودياً
- تجنب الجمل والفقرات الطويلة
- تدقيق الاملاء اكثر من مرة ويفضل مرات
- ابقاء النص الاساسي اسود على خلفية بيضاء
- عدم الاكثار من الالوان
- تبسيط الموقع وتوضيح الروابط الى ابعد حد
- وضع نسخة نصية من الروابط الرسومية في اسفل الصفحة
- تحديث الموقع دائماًً
- تقطيع الصور الكبيرة
- تجنب الاطارات قدر المستطاع
- خاصة تجنب وضع رمز "قيد البناء" وعدم نشر الموقع اذا لم يكن منتهياً
كلام صور:
الاشكال 1 و2 و3: يشكل هوم سايت ويندوز وبي.بي. اديت ماكنتوش افضل برامج تطوير الصفحات واذا لا بد من استخدام برنامج رسومي فيبقى دريم ويفر افضلها.
الشكل 4: المهمة الاولى في تطوير الموقع هي رسم مخططه على ورقة او استخدام برنامج مخططات.
الشكل 5: هناك العديد من البرامج المخصصة في ضغط الصور مثل ويب فايز توتاليتي.
الشكلان 6 و7: يتيح براوزر سايزر ويندوز وسمول سكرين ماكنتوش امكان معاينة الصفحات اذا ظهرت على شاشات صغيرة.
الشكل 8: صفحة تعتمد على الطبقات وجافاسكريبت كما تبدو في برنامج يدعم هاتين التقنيتين...
الشكل 9: والصفحة نفسها كما تبدو في برنامج لا يدعم التقنيات الحديثة نافيغيتر 2 حيث لم تفقد من محتواها لأنها تنحل بأناقة.