الثلاثاء، 4 مايو 2010

تصميم موقع سردال - 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.

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

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

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

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

9 تعليقات:

مريم يقول...

ممتع جدا إعادة تصميم صفحات الويب..

هناك طريقة أخرى لتوسيط المساحة div بإمكانك تجربتها:
margin: 0 auto

غير معرف يقول...

شكرا جزيلا على المعلومات المفيدة

أسامة عزام يقول...

مشكلة الخطوط ستُحل إن شاء الله مع css3، أظن الآن فايرفوكس يدعمها بشكل معقول
راجع هذه: http://www.css3.info/preview/web-fonts-with-font-face/

وأما بخصوص Typography وجميع أمور التخطيط والتصميم: أنا ريّحت مخي منذ فترة وصرت أستعمل إطار blueprintcss

سهل وميسّر، وشكل الخطوط والألوان والتنسيق العام للصفحة جيد، فقط أقوم بتغيير الخط لما يناسبني (غالبًا Tahoma) وأقلب اتجاه الإطار rtl

عبدالله المهيري يقول...

@مريم: الطريقة في ردك صحيحة لتوسيط المحتويات أفقيا، ماذا لو أردت توسيط المحتويات أفقياً وعمودياً؟ الطريقة في المقالة تصلح لذلك.

@Sonnet: شكراً.

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

حسن يحيى يقول...

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

@font-face{
font-family: 'هنا ضع اسم الخط';
src: url('هنا مسار ملف الخط') format('truetype');
}

و بعد ذلك كل ما عليك هو استدعاء الخط في المكان الذي تريده على سبيل المثال:


.Title {
font-family : 'Al-Arabia' , arial , tahoma;
}

أتمنى أن أكون قد أفدتك ^_^، الطريقة جربتها من قبل و هي تعمل بشكل رائع و لكن عليك اختيار الخط المناسب.

بالتوفيق، تقبل فائق احترامي.

عبد الهادي اطويل يقول...

السلام عليكم ورحمة الله وبركاته..
بادرة طيبة منك أخي عبد الله، وإن شاء الله سوف يستفيد منها كل مهتم بمجال تطوير وتصميم المواقع..
بالنسبة لمسألة توسيط محتوى معين في الصفحة عموديا وأفقيا، فالطريقة التي تتبعتها أخي عبد الله هي صحيحة لكن لها عيوب تظهر حينما نقوم بتصغير حجم الشاشة إلى أقل من الحيز الذي يشمل المحتوى، حيث تظهر مشكلة اختفاء جزء من المحتوى يصبح متعذرا علينا قراءته حتى بإزاحة الأشرطة الانزلاقية الجانبية، وهذا هو عيب هذه الطريقة، لذلك وجدت تصحيحات لهذا المشكل من خلال توفير حلول بديلة أقترح عليكم متابتعها بتفصيل ممتع من خلال الرابط التالي:
http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/
كما أقترح عليكم طرقا أخرى لتوسيط المحتوى من خلال الرابطين التاليين:
http://d-graff.de/fricca/center.html
http://bluerobot.com/web/css/center1.html
ملاحظة: هناك مشكل مرتبط بمتصفح أوبرا الذي أستخدمه ظهر في صحفة سردال، حيث إنه يجعل من السطر التالي:
"أهوى الكتابة وأشارك الآخرين بأفكاري من خلال مدونتي الشخصية أو من خلال 140 حرفاً في تويتر، أمارس بين"
كله رابطا واحدا نحو حسابك في تويتر أخي عبد الله ولا يظهر أثر لرابط مدونتك، علما أن الأمر طبيعي حتى في متصفح الأنترنت أكسبلورر، ولعل المشكل مرتبط بطريقة التوسيط والله أعلم، إذ يجب التحقق من الأمر (للإشارة فقد قمت بإعادة تحديث الصفحة والمشكل نفسه استمر)..
بالتوفيق ومني لكم أرق تحية..

غير معرف يقول...

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

عمران عماري يقول...

السلام عليكم، أهلا عبد الله
1. للتوسيط العمودي من مدونة المصنع (كتوم سابقا)
http://almsn3.blogspot.com/2009/03/vertical-centering-with-css.html

2. للتوسيط الأفقي، هناك طريقتين في هذا الموضوع، في النقطة الثالثة
http://wpaon.com/?p=200

أسامة عزام يقول...

دعم المتصفحات سيأتي تباعًا بإذن الله، يعني أتصور بعد عامين على الأكثر -إن شاء الله- ستكون كل المتصفحات قد دعمت css3، ساعتها سنفكر في css4 إن شاء الله (-:

بخصوص المسائل القانونية: لماذا لا نستخدم الخطوط (الحرة)؟ اذهب لموقع (عرب آيز) وستجد مجموعة ممتازة من الخطوط العربية الجميلة الحرة