تصميم موقع سردال - 1

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

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

إن لم يظهر لك التصميم الجديد للصفحة الرئيسية فاضغط على CTRL+F5، سترى صفحة بيضاء مع مجموعة روابط مختلفة.

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

أهوى الكتابة وأشارك الآخرين بأفكاري من خلال مدونتي الشخصية - لزيارة مدونتي اضغط هنا - أو من خلال 140 حرفاً في تويتر - لرؤية حسابي في تويتر اضغط هنا - أمارس بين حين وآخر التصوير الفوتوغرافي - اضغط هنا لرؤية صوري في فليكر - ولدي مدونة منوعات أجمع فيها أفكاراً مختلفة من هنا وهناك، اضغط هنا لرؤية مدونتي في تمبلر.

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

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



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

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

الخطوط المتوفرة عربياً قليلة، أعني الخطوط المتوفرة على أنظمة التشغيل، خذ ويندوز على سبيل المثال، يحوي عدة خطوط مثل Arial وVerdana وTimes New Roman وهذه كلها خطوط تكاد تكون متطابقة، هناك Tahoma وهو الأشهر والأفضل لقراءة المحتويات من الشاشة لكنه خط لا يصلح إلا بمقاسات صغيرة من 13 إلى 9 بكسل.

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

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

إن كنت تعرف أي شيء عن الموضوع فلا تبخل بتعليق تعلمني فيه عن مشكلة الخطوط هذه.



نقطة ثالثة، توسيط المحتويات في منتصف الصفحة تماماً احتاج مني لإعادة تعلم طريقة لفعل ذلك من خلال CSS، هناك مساحة (div) تحوي كل المحتويات وسميتها Container، ولكي أوسط هذه المساحة في منتصف الصفحة استخدمت هذه الحصائص في CSS:

#container {
    position:absolute;
    top:50%;
    height:320px;
    margin-top:-160px;
    width: 750px;
    right: 50%;
    margin-right: -375px;
    }

خاصية position تعني الموضع أو المكان وفيمة absolute تعني مطلق أو حاسم، بمعنى آخر موقع مساحة container ستكون ثابتة بغض النظر عن أي متغيرات أخرى سواء حجم الشاشة أو حجم نافذة المتصفح.

الخاصية top تعني المسافة بين مساحة container ورأس الصفحة وقد اعطيتها القيمة 50% أي أن التباعد بين رأس الصفحة والمساحة سيكون بمقدار 50% من ارتفاع نافذة المتصفح، لكن ارتفاع مساحة المحتويات هو 320 بكسل وهذا يعني أن كل المحتويات ستأتي بعد منتصف الصفحة وليس على منتصف الصفحة، وبما أن ارتفاع مساحة المحتويات هو 320 بكسل علي تقسيم هذه القيمة على 2 ثم وضع النتيجة بالسالب لخاصية margin-top، هكذا جعلت المساحة تقف في منتصف الصفحة عمودياً.

كررت الأمر مرة أخرى أفقياً، الخاصية right تعني المسافة بين المساحة ويمين الصفحة، عرض المساحة 750 بكسل ولكي أوسطها أفقياً علي أن أعطي قيمة سالبة بمقدار 375 بكسل للقيمة margin-right.

لا أدري إن كان شرحي للموضوع سهل الفهم، ربما علي أن أضع رسماً يشرح هذه النقاط بشكل أبسط.

هذا الأسلوب لتوسيط المحتويات في منتصف الصفحة تماماً مدعوم من معظم المتصفحات الحديثة والقديمة، أو على الأقل هذا ما أذكره، هل تعرف سلبياتها؟ هل تعرف طريقة أفضل؟ شاركني.

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

هذا كل شيء اليوم، الموضوع التالي: مقالة مصورة عن رحلتي، لم يبقى إلا القليل :-)