قاعة العار: مواقع لا تستخدم لون للخلفية
مدرج تحت قسم: معروضات
أقضي معظم وقتي عند التصفح على Firefox. ولعل أهم مميّزات هذا المتصفح هي السهولة في التعديل والتغيير على خصائصه وشكله، ومن حين لآخر أحب أن أغير شكل المتصفح لما أحبه وأراه مناسبا لي، كما يحب الآخرون تغيير شكل سطح المكتب على سبيل المثال، وعند إضافة أي موضوع Theme جديد للمتصفح تتغير معه أغلب ألوانه الإفتراضية. وهنا تبدأ معاناتي مع الجزء البسيط من هذه المواقع التي سأذكرها، والقائمة تطول ولكني اختصرتها في 23 موقع.
على غرار قاعة الشهرة أو Hall of fame، في هذا المعرض، سنعرض المواقع التي دخلت وبكل جدارة في قاعة العار أو Hall of shame لإعادة لون خلفياتها.
شرح المشكلة
للأسف، القيم الافتراضية لخواص CSS ليست موثّقة بالشكل الواضح، لذلك نجد اختلافاً كبيراً بين المتصفحات عند تطبيق بعض القيم الافتراضية لهذه الخواص، ولذلك من المهم جدا على المصمم أن ينتبه لهذه المشكلة. أحد الحلول المقترحة هي إعادة خواص CSS لقيمها الافتراضية التي تريدها للمستند عن طريق استخدام أحد طرق إعادة CSS.
نجد أن أغلب الشيفرات الموجودة في ملفات إعادة خواص CSS تدرج خاصية تغيير الخلفية background-color إلى اللون الأبيض لعنصر المحتوى body أو عنصر html، وهذا بالطبع اللون افتراضي لأغلب المتصفحات، ولكن يتم أيضا تحديده بوضوح في ملف CSS لإعادة تعريف هذه الخاصية وعدم ترك أي مجال للافتراض.
المواقع التالي ذكرها، وللأسف، افترضت أن كل المتصفحات ستعرض الخلفية باللون الأبيض لدى كل المستخدمين، ونصيحتي لك أيها المصمم، لا تترك مساحة للإفتراضات، حاول أن تعرّف الخواص بوضوح حتى لا ينتهي المطاف بموقعك إلى الدخول إلى قاعة العار.
المواقع العالمية
- Google Analytics
نجد أن شركة Google، قد سرقت كل أضواء القاعة، فلا نجدها قد أعرت الموقع من خلفيته في خدمة إحصائيات المواقع Analytics وحسب، بل في عدد كبير من صفحات خدماتها.
- Google Firefox Page
مرة أخرى، أضواء القاعة تُسلّط على شركة Google، ولكن هذه المرّة، تشاركها شركة Mozilla، في صفحة البدء الإفتراضية لمتصفح Firefox.
- Yahoo!
أعيب وبشدّة على شركة Yahoo، فمع أنها طرحت إحدى حلول إعادة القيم الافتراضية للمتصفحات، ولكنها وللأسف، لا تطبقها على موقعها الرئيس، لذلك وبكل شرف تدخل القاعة.
- Yahoo! Log in page
يبدو أن شركة Yahoo بدأت تسلب بعض أضواء القاعة الآن، بعد دخول صفحتها للدخول إلى أي من خدماتها إلى هذه القاعة.
- userstyles.org
ربما يجب عليّ أن أكتب User Style جديدة لي لعرض هذا الموقع، قد يعرف بعضكم هذا الموقع، فهو يوفر لمستخدمي إضافة Stylish على متصفح Firefox إمكانية تغيير شكل الموقع الذي يزورونه، ولكن هذه المرة ينقلب السحر على الساحر.
- Smashing Magazine
“ما هكذا تؤكل الكتف” يا Smashing، لا أخفيكم سرّاً، فأنا من المتابعين لهذا الموقع، وانصدمت عندما وجدته لا يحدد لوناً لخلفيته على جانبيه، لذلك أنا أءسف لدخوله هذه القاعة.
- eBay
افتراض شركة المزايدة eBay قد زاد عن حدّه، وافترض أن خلفيتي بيضاء.
- Facebook error page
الموقع الاجتماعي الشهير Facebook قد دخل وبحياء القاعة في صفحة واحدة فقط، وهي صفحة الخطأ.
- VISA
نجد شركة البطاقات الإئتمانية قد فقدت إئتمان زوّارها، ودخلت إلى القاعة وبكل شرف.
- BBC Good Food
الطعام الجيّد يجب أن يقدّم بطريقة جيّدة للزوّار، وهذا بالضبط عكس ما تفعله شركة BBC، وبهذا نرحّب بآخر أعضاء قاعة العار من المواقع العالمية.
المواقع العربية
- إجابات Google
نعم، ومن غيرها، شركة Google يبدو أنها لن تتنازل عن إعتلاء قمّة أعضاء القاعة، مرحبا بعودتك يا Google، افتقدناكِ لوهلة، ولكن ما لبثتِ أن تعودي وتسطلي عليك الأضواء من جديد، هذه المرة بنسخة عربية.
- مكتوب
بأغلب صفحات خدماتها، نجد شركة مكتوب قد دخلت وبقوّة القاعة، لتسلب كل الأضواء.
- صفحة الدخول لخدمات مكتوب
“إنه لأشبه به من التمرة بالتمرة” وخصوصا بعد عملية استحواذ Yahoo، نجد مكتوب مرة أخرى، ولكن بصفحة الدخول، وبذلك يكون الدخول الثاني للقاعة.
- الجزيرة نت
قد وردنا هذا الخبر العاجل: “صفحة الخبر لدى الجزيرة نت افترضت أن لون خلفيات زوّارها بيضاء، والأخبار تتابع بأن موقع الجزيرة نت قد دخل رسميّا إلى القاعة”.
- إسلام ويب
“إنّ الله جميل يحب الجمال”، فلا تُقبّحوا صفحاتكم بافتراض أن الخلفية لونها بيضاء لدى زوّاركم، وخصوصاً أن الموقع من أهم المصادر لديننا الحنيف.
- جيران
من أبسط حق الجار على جاره، ألّا يؤذيه، ويبدو أن “جيران” يؤذي جيرانه وزوّاره بافتراض الخلفية.
- موقع قناة الجزيرة الرياضية
الجزيرة يبدو أنها تُسلط عليها الأضواء من جديد، فبعد الجزيرة نت تأتي الرياضية من خلفها لتكون من أعضاء القاعة.
- محرك بحث “عربي”
نتيجةً لعدم البحث جيّداً في كيفية إعادة قيم خواص CSS، يدخل “عربي” إلى قائمة الأعضاء.
- إكبس ikbis
يبدو أن مصمم الموقع نسي أن “يكبس” بعض أزرار لوحة المفاتيح ليعيد لون الخلفية، ولكننا لن ننسى “كبسكم” من ضمن المدعوّين لهذه القاعة.
- كاش يو cashU
يُستخدم حساب كاش يو للدفع الآمن [...] حيث أنه يشبه كثيراً بطاقة الائتمان المدفوعة مسبقاً، ولكن أكثر أماناً.
لا يوحي لي موقعكم بأنه آمن، خصوصا مع الخلفية الصفراء التي أريدها، ولكن أتفق أن الخدمة تشبه بطاقة الائتمان، لذلك تفضلوا بالجلوس بالقرب من شبيهكم موقع VISA.
أعضاء الشرف
تحديث: لم أتوقع أن يُثير هذا المقال الكثير من الجدل، سواء حول التسمية أو المحتوى، حيث مقالات Hall of shame تستخدمها الكثير من المواقع الكبيرة. ولكني لم أتكلم إلا لشدة حرصي على ضبط المعايير القياسية، ربما لم يحالفني التوفيق في أسلوب التقديم. فإن كُنت قد تسببت في جرح مشاعر أي شخص، فأنا أقدم اعتذاري.
عن الكاتب
عبدالرحمن العتيبة أحد مؤسسي ورئيس التحرير في موقع المشروع، يهوى برمجة وتطوير الويب بكافة أنواعها، وله خبرة تتعدى 10 سنوات في هذا المجال، يعتبر نفسه من "أشد" مناصري المصادر المفتوحة، وأنها "في يوم ما" ستقضي على كل برنامج محتكر ومغلق مصدره. يعتقد بوجود القمر، ولكنه للأسف لم يصل إليه إلى الآن. يمكنك متابعته على twitter وعلى مدونته.
هل حاولت اخبارهم بهذا :) ?
اسامي مواقع كبيرة و الخطء يعتبر بسيط جدا بالنسبة لهم ,غريبة !!
طب ما هو اسم الـ Theme اللي انت استعملتة ؟
بداية الموضوع كانت جميلة وتكفي
لكن اسمح لي ان اقول ان المشروع اكبر من مثل هذه المواضيع
التي ليس لها اي معنى …
وكأن الموضوع مجرد تعبئة
>> مجرد رأي اتمنى لا يكون فيه اي ازعاج :]
الفكرة هي أنه يجب على المُصمم و المُبرمج دائماً عدم ترك شيء للصدفة ! فمثلاً مرة من المرات برمجت برنامج على الـ C++ ليحل مُعادلة من الدرجة الثانية ! و وضعت فقط حل في حال كان المُميز (دلتا) يساوي الصفر و أكبر من الصفر ! و نسيت الحل الثالث و بالتالي عندما قدمته للدكتور رفضه ! و منذ ذاك الوقت أُحاول دائماً أن أُعامل اليوزر على أنه آلة ! رُبما مثالي بعيد قليلاً عن فكرتك و لكن الفكرة نفسها :)
تحياتي
فراس
السلام عليكم
اخي الكريم عنوان التدوينة إلي حدما مزعج وايضا يدل علي شئ خارق !! ولم دخلت توقعت شئ اخر ..والغالب تصميم صفحات الويب ان الخلفية تكون بيضاء والمستعرضات بشكل كبير تعرض الصفحة بلون ابيض عند عدم تحديد الألوان للخلفية فما أين اتيت بهذا اللون وايضا ما نوع المتصفح الذي تستخدمه فنحن نستخدم فيرفوكس و IE 7, 8 وكروم و سفاري لم ياتي بهذه النتيجة
اعتقد كل هذه المواقع العالمية لم يأتي علي بالها موضوع اللون والعار انهم نسوا وضع قيمه له مكونه من ثلاث حروف بالسداسي عشر !! #FFF
أتمني منك حسن اختيار العنوان ولا تفهمني كلامي بمحمل اخر لأني تفاجئت وفكرة شئ خطير ولكن الأمور ابسط من هنا فهذا ليس بخطأ عضال وايضا يمكنك مراسلتهم او توصيح العلاج بدل من وضع المواقع المختلفة كأنها صنعت شئ مشين :( ولكن الأمر ابسط من هذا كله ..
بالتوفيق لك
@ahmed-araby
نعم، أخبرت بعض المواقع العربية، وهناك من قام بمراسلة شركة Google أعرفهم شخصياً، وفي إحدى المرات عرضت على أحد هذه المواقع العمل والتعاون معهم مجّاناً، ولم يصلني أي جواب منهم.
@Hunikal
يمكنك تحميل أي موضوع لمتصفح Firefox من موقع الإضافات، وجرّب موضوعاً يكون أسوداً لبيان الفرق، وأنا في مثالي هذا أردت توضيح الصورة أكثر فاستخدمت اللون الأصفر عمداً عن طريق الذهاب إلى صفحة about:config ومن ثم إيجاد خاصية
browser.display.background_color وتغيير لونها، وهذا بالضبط ما تفعله Firefox Themes.
@???
أشكرك على التعليق أخي الكريم، ورأيك قد أخذته لدي، ولكن ياحبذا لو في المرة القادمة أن تستخدم اسمك بدلا من علامات الاستفهام، حتى أستطيع مناداتك باسمك.
@فراس
هذه بالضبط هي فكرة المقالة هنا، وأنا قصدي توضيح أنه قد يكون نسيانك لتعريف خاصية أو متغير قد يؤدي بموقعك إلى الهلاك، وأمثلة هذا كثيرة ولا يحتاج لذكرها.
@حسين عادل
وعليكم السلام، مرحبا بكم أخي الكريم وسرّني مناقشتكم لي. في البداية أتفق معك تماماً حين قلت: “الخلفية تكون بيضاء والمستعرضات بشكل كبير تعرض الصفحة بلون ابيض”، وهذا بالضبط ما أردت توضيحه في المقال، أنّ على المُصمم أن لا يترك مجالاً للافتراضيات، وأن لا يترك “الباقي” -وهو بالمناسبة عدد لا يستهان به إذا أخذت في اعتبارك من يحمّلون Themes على Firefox- من المتصفحات تعرض لون الشاشة حسب ما تريد.
بالمناسبة أخي حسين، هل تعلم أن متصفح Firefox لا يعطي الخلفية اللون الأبيض أساساً؟ إنما يعطيها اللون الشفاف. ستسألني من أين أتى اللون الأبيض إذاً! وهنا تكمن المشكلة، عليك أن تعلم أن هناك نوعان من القيم، القيمة الإبتدائية Initial value، والقيمة الافتراضية Defaul value، وأن أغلب هذه المتصفحات التي تحدثت عنها تعتمد اللون الأبيض في القيمة الافتراضية وليست القيمة الإبتدائية في خاصية background-color.
يعتبر لون وشكل المتصفح من حريات المستخدم أن يحددها هو لا الصفحة التي يزورها، المتصفح في النهاية يكون برنامجاً يتحكم به المستخدم كيفما يشاء، وعند التحكم به لا يجب على الصفحة أن تتأثر بهذا التحكم، وهو ما يطلق عليه في العادة Bulletproof Designs أي تصاميم مضادة للرصاص إن جاز التعبير الحرفي.
لنأخذ مثالاً أبسط قليلاً، عند إنشاء مستند HTML لا يحتوي على CSS، وقمت بإدراج بعض التوصيف markup في داخله، أي كعناصر الترويسات H1، وH2، سترى الاختلاف الواضح جداً بين المتصفحات في حجم وطريقة عرض هذه الترويسات. لذلك وللتغلب على هذه المشكلة تم العمل على CSS Resets -السابق ذكرها- وذلك لإعادة هذه القيم الافتراضية إلى قيم موحدة يقوم بتحديدها المُصمم.
لا تستهين بالأمر أخي حسين، فالأمر جد خطير، جرب أن تحمل موضوع Theme لمتصفح Firefox وشاهد هذه العيوب بنفسك.
هل عليّ أن أحرم نفسي من حريّتي الشخصية كمستخدم في اختيار لون متصفحي؟
أم على المصمم “المحترف” الذي يعمل في هذه الشركة أن يعلم هذه المشاكل؟
ومثل Yahoo قد أعطى حلاً. أي أنها تعلم أن هناك مشكلة، ولكن، هل العجز والكسل هما من أخّر التعديلات على الموقع؟
وبالمناسبة هذا الموضوع متداول منذ زمن بعيد على القوائم البريدية المهتمة بالمعايير القياسية، ولعلّي قمت بتحريك الماء الراكد في هذا الموضوع.
مقالة جميلة
لكن الا ترى شئ غريب؟
اكبر المواقع نفس الشئ..! ما معنى هذا؟؟
اليس هنالك معنى لهذا الشي؟
هل يعقل ان تكون مواقع كبيرة مثل هذه نست وضع كود لا يتجاوز 10 حروف وارقام؟؟!
لخصت ما اريد قوله بالأستفهام..
أرى هذا الموضوع تنطّع في التصميم، وما أدرانا عن ذلك حتى نحسب له حساب؟ إن كتابة السطر
background-color: #FFF;
يستهلك 23 بايت وأريد توفيره من ترافيك الموقع، لذا فلن أضيفه .. :)
انت وضعت ثيم يفترض على الموقع background color غير FFF وهذا لا يجب أن يفعله متصفح ولو فعل هذا الاكسبلورر لقامت الدنيا ولم تقعد !
لا أعلم إن كانت W3 قد وضعت هذا في حسبانها لكن لا اعتقد أنه يجب ذلك فالمسلمات لا توجب التنويه لها !
اصبح التوجه الان في التطوير هو استعمال خلفيات بيضاء فارغة دون ألوان، خصوصا ان كنت لن تستعمل صورا في الخلفية (انظر موقع vimeo)
معظم مواقع ويب 2.0 تستعمل مساحات بيضاء فارغة لانه اضحى توجها جديدا في تطوير المواقع لدواعي البساطة والوضوح وتجربة الاستخدام
كما أن معايير قابلية الوصول والاستخدام تنادي بعدم استعمال ألوان للخلفية مخيفة كاللون الأصفر
@نواف
وضعت اللون الأصفر فقط للتوضيح. أما بالنسبة لمنظمة W3C فقد عرّفت أنه يجب على background-color للعناصر أن تكون شفافة، ولكن اللبس والغموض يأتي عند الخلط بين القيمة الابتدائية والقيمة الافتراضية للمتصفح User-Agent.
ولكن، وكما قلت في تعليقي السابق أن هناك قيمتين لخواص CSS عند المتصفحات.
Initial Value: وهي القيمة الابتدائية، والتي يتم وضعها وتعريفها من منظمة W3C.
Default Value: وهي القيمة الافتراضية، والتي تعتمد على المتصفح ولا يمكن للمنظمة التحكم بها. وهنا تكمن المشكلة! في هذه الخواص يمكنني تعريف ما شئت، ولا يجب على الصفحة المصممة باحترافية التأثر لهذا التغيير، لأنها لا يجب أن تعتمد على ماهية المتصفح User-Agent وإنما الاعتماد على ماتُعرّفه المنظمة من قيمة ابتدائية للخواص.
المصممون لا ينتبهون لتعريف هذه الخواص لدى المنظمة، ولعل المتصفحات أيضاً ألبست عليهم بتعريفها للقيمة الافتراضية باللون الأبيض، فاعتقدوا أن كل المتصفحات تأتي معرّفة افتراضياً باللون الأبيض للخلفية، وهنا يكمن الخطأ.
@cssbit
أشكر لك مرورك وتعقيبك الكريمين. أنا كما وضحت أني استخدمت اللون الأصفر فقط للتوضيح، واستخدمت هذه الخاصية في القيمة الافتراضية Default value للمتصفح User-Agent ولم أستخدم اللون في القيمة الابتدائية Initial value حيث هذا سيكون مخالفة واضحة لقواعد W3C ولن يكون نقدي ذو معنى لأنه سيُبنى على حقائق واهية.
جربها على هذا الموقع المشروع طب دى هنا فضيحة
body {
background:red none repeat scroll 0 0;
}
لا اعتقد ان هذا خطا
نيال الفاضي