#المشروع RSS ملقم المشروع » قاعة العار: مواقع لا تستخدم لون للخلفية خلاصة التعليقات المشروع نظره على اشهر انواع ثغرات المواقع 10 مجموعات من أيقونات مواقع اجتماعية لمدونتك 8 أدوات لقياس مدى قابلية الوصول لموقعك * مقالات * دروس * أدوات * مجانيات * معروضات ابحث عن: _________________ ابدأ البحث المشروع - كل ما يتعلق بتطوير المواقع http://www.almashroo.com/ انضم للكتّاب قاعة العار: مواقع لا تستخدم لون للخلفية مدرج تحت قسم: معروضات 28 سبتمبر 2009 قاعة العار: مواقع لا تستخدم لون للخلفية أقضي معظم وقتي عند التصفح على Firefox. ولعل أهم مميّزات هذا المتصفح هي السهولة في التعديل والتغيير على خصائصه وشكله، ومن حين لآخر أحب أن أغير شكل المتصفح لما أحبه وأراه مناسبا لي، كما يحب الآخرون تغيير شكل سطح المكتب على سبيل المثال، وعند إضافة أي موضوع Theme جديد للمتصفح تتغير معه أغلب ألوانه الإفتراضية. وهنا تبدأ معاناتي مع الجزء البسيط من هذه المواقع التي سأذكرها، والقائمة تطول ولكني اختصرتها في 23 موقع. على غرار قاعة الشهرة أو Hall of fame، في هذا المعرض، سنعرض المواقع التي دخلت وبكل جدارة في قاعة العار أو Hall of shame لإعادة لون خلفياتها. شرح المشكلة للأسف، القيم الافتراضية لخواص CSS ليست موثّقة بالشكل الواضح، لذلك نجد اختلافاً كبيراً بين المتصفحات عند تطبيق بعض القيم الافتراضية لهذه الخواص، ولذلك من المهم جدا على المصمم أن ينتبه لهذه المشكلة. أحد الحلول المقترحة هي إعادة خواص CSS لقيمها الافتراضية التي تريدها للمستند عن طريق استخدام أحد طرق إعادة CSS. نجد أن أغلب الشيفرات الموجودة في ملفات إعادة خواص CSS تدرج خاصية تغيير الخلفية background-color إلى اللون الأبيض لعنصر المحتوى body أو عنصر html، وهذا بالطبع اللون افتراضي لأغلب المتصفحات، ولكن يتم أيضا تحديده بوضوح في ملف CSS لإعادة تعريف هذه الخاصية وعدم ترك أي مجال للافتراض. المواقع التالي ذكرها، وللأسف، افترضت أن كل المتصفحات ستعرض الخلفية باللون الأبيض لدى كل المستخدمين، ونصيحتي لك أيها المصمم، لا تترك مساحة للإفتراضات، حاول أن تعرّف الخواص بوضوح حتى لا ينتهي المطاف بموقعك إلى الدخول إلى قاعة العار. المواقع العالمية 1. Google Analytics نجد أن شركة Google، قد سرقت كل أضواء القاعة، فلا نجدها قد أعرت الموقع من خلفيته في خدمة إحصائيات المواقع Analytics وحسب، بل في عدد كبير من صفحات خدماتها. google-analytics 2. Google Firefox Page مرة أخرى، أضواء القاعة تُسلّط على شركة Google، ولكن هذه المرّة، تشاركها شركة Mozilla، في صفحة البدء الإفتراضية لمتصفح Firefox. mozilla-firefox-google-start-page 3. Yahoo! أعيب وبشدّة على شركة Yahoo، فمع أنها طرحت إحدى حلول إعادة القي الافتراضية للمتصفحات، ولكنها وللأسف، لا تطبقها على موقعها الرئيس، لذلك وبكل شرف تدخل القاعة. yahoo-home 4. Yahoo! Log in page يبدو أن شركة Yahoo بدأت تسلب بعض أضواء القاعة الآن، بعد دخول صفحتها للدخول إلى أي من خدماتها إلى هذه القاعة. yahoo-login 5. userstyles.org ربما يجب عليّ أن أكتب User Style جديدة لي لعرض هذا الموقع، قد يعرف بعضكم هذا الموقع، فهو يوفر لمستخدمي إضافة Stylish على متصفح Firefox إمكانية تغيير شكل الموقع الذي يزورونه، ولكن هذه المرة ينقلب السحر على الساحر. userstyles 6. Smashing Magazine “ما هكذا تؤكل الكتف” يا Smashing، لا أخفيكم سرّاً، فأنا من المتابعين لهذا الموقع، وانصدمت عندما وجدته لا يحدد لوناً لخلفيته على جانبيه، لذلك أنا أءسف لدخوله هذه القاعة. smashing-magazine 7. eBay افتراض شركة المزايدة eBay قد زاد عن حدّه، وافترض أن خلفيتي بيضاء. ebay 8. Facebook error page الموقع الاجتماعي الشهير Facebook قد دخل وبحياء القاعة في صفحة واحدة فقط، وهي صفحة الخطأ. facebook-error 9. VISA نجد شركة البطاقات الإئتمانية قد فقدت إئتمان زوّارها، ودخلت إلى القاعة وبكل شرف. visa 10. BBC Good Food الطعام الجيّد يجب أن يقدّم بطريقة جيّدة للزوّار، وهذا بالضبط عكس ما تفعله شركة BBC، وبهذا نرحّب بآخر أعضاء قاعة العار من المواقع العالمية. bbcfood-home-page المواقع العربية 1. إجابات Google نعم، ومن غيرها، شركة Google يبدو أنها لن تتنازل عن إعتلاء قمّة أعضاء القاعة، مرحبا بعودتك يا Google، افتقدناكِ لوهلة، ولكن ما لبثتِ أن تعودي وتسطلي عليك الأضواء من جديد، هذه المرة بنسخة عربية. google-ejabat-page 2. مكتوب بأغلب صفحات خدماتها، نجد شركة مكتوب قد دخلت وبقوّة القاعة، لتسلب كل الأضواء. maktoob-home-page 3. صفحة الدخول لخدمات مكتوب “إنه لأشبه به من التمرة بالتمرة” وخصوصا بعد عملية استحواذ Yahoo، نجد مكتوب مرة أخرى، ولكن بصفحة الدخول، وبذلك يكون الدخول الثاني للقاعة. maktoob-login-page 4. الجزيرة نت قد وردنا هذا الخبر العاجل: “صفحة الخبر لدى الجزيرة نت افترضت أن لون خلفيات زوّارها بيضاء، والأخبار تتابع بأن موقع الجزيرة نت قد دخل رسميّا إلى القاعة”. aljazeera-news-item-page 5. إسلام ويب “إنّ الله جميل يحب الجمال”، فلا تُقبّحوا صفحاتكم بافتراض أن الخلفية لونها بيضاء لدى زوّاركم، وخصوصاً أن الموقع من أهم المصادر لديننا الحنيف. islamweb-home-page 6. جيران من أبسط حق الجار على جاره، ألّا يؤذيه، ويبدو أن “جيران” يؤذي جيرانه وزوّاره بافتراض الخلفية. jeeran-home-page 7. موقع قناة الجزيرة الرياضية الجزيرة يبدو أنها تُسلط عليها الأضواء من جديد، فبعد الجزيرة نت تأتي الرياضية من خلفها لتكون من أعضاء القاعة. aljazeerasport-home-page 8. محرك بحث “عربي” نتيجةً لعدم البحث جيّداً في كيفية إعادة قيم خواص CSS، يدخل “عربي” إلى قائمة الأعضاء. araby-home-page 9. إكبس ikbis يبدو أن مصمم الموقع نسي أن “يكبس” بعض أزرار لوحة المفاتيح ليعيد لون الخلفية، ولكننا لن ننسى “كبسكم” من ضمن المدعوّين لهذه القاعة. ikbis-home-page 10. كاش يو cashU يُستخدم حساب كاش يو للدفع الآمن [...] حيث أنه يشبه كثيراً بطاقة الائتمان المدفوعة مسبقاً، ولكن أكثر أماناً. لا يوحي لي موقعكم بأنه آمن، خصوصا مع الخلفية الصفراء التي أريدها، ولكن أتفق أن الخدمة تشبه بطاقة الائتمان، لذلك تفضلوا بالجلوس بالقرب من شبيهكم موقع VISA. cashu-home-page أعضاء الشرف 1. الخطوط الجوية القطرية qatarairways-home-page 2. شبكة أوربت وشوتاي orbit-home-page 3. صحيفة الجزيرة السعودية al-jazeerah-home.page تحديث: لم أتوقع أن يُثير هذا المقال الكثير من الجدل، سواء حول التسمية أو المحتوى، حيث مقالات Hall of shame تستخدمها الكثير من المواقع الكبيرة. ولكني لم أتكلم إلا لشدة حرصي على ضبط المعايير القياسية، ربما لم يحالفني التوفيق في أسلوب التقديم. فإن كُنت قد تسببت في جرح مشاعر أي شخص، فأنا أقدم اعتذاري. عن الكاتب عبدالرحمن العتيبة أحد مؤسسي ورئيس التحرير في موقع المشروع، يهوى برمجة وتطوير الويب بكافة أنواعها، وله خبرة تتعدى 10 سنوات في هذا المجال، يعتبر نفسه من "أشد" مناصري المصادر المفتوحة، وأنها "في يوم ما" ستقضي على كل برنامج محتكر ومغلق مصدره. يعتقد بوجود القمر، ولكنه للأسف لم يصل إليه إلى الآن. يمكنك متابعته على twitter وعلى مدونته. الوسوم: CSS ، قاعة العار ، معرض ، نقد * Share/Bookmark التعليقات (13) على ”قاعة العار: مواقع لا تستخدم لون للخلفية“ 1. ahmed-araby 28 سبتمبر 2009 هل حاولت اخبارهم بهذا :) ? 2. Hunikal 28 سبتمبر 2009 اسامي مواقع كبيرة و الخطء يعتبر بسيط جدا بالنسبة لهم ,غريبة !! طب ما هو اسم الـ Theme اللي انت استعملتة ؟ 3. ??? 28 سبتمبر 2009 بداية الموضوع كانت جميلة وتكفي لكن اسمح لي ان اقول ان المشروع اكبر من مثل هذه المواضيع التي ليس لها اي معنى … وكأن الموضوع مجرد تعبئة >> مجرد رأي اتمنى لا يكون فيه اي ازعاج :] 4. فراس 28 سبتمبر 2009 الفكرة هي أنه يجب على المُصمم و المُبرمج دائماً عدم ترك شيء للصدفة ! فمثلاً مرة من المرات برمجت برنامج على الـ C++ ليحل مُعادلة من الدرجة الثانية ! و وضعت فقط حل في حال كان المُميز (دلتا) يساوي الصفر و أكبر من الصفر ! و نسيت الحل الثالث و بالتالي عندما قدمته للدكتور رفضه ! و منذ ذاك الوقت أُحاول دائماً أن أُعامل اليوزر على أنه آلة ! رُبما مثالي بعيد قليلاً عن فكرتك و لكن الفكرة نفسها :) تحياتي فراس 5. حسين عادل 28 سبتمبر 2009 السلام عليك اخي الكريم عنوان التدوينة إلي حدما مزعج وايضا يدل علي شئ خارق !! ولم دخلت توقعت شئ اخر ..والغالب تصميم صفحات الويب ان الخلفية تكون بيضاء والمستعرضات بشكل كبير تعرض الصفحة بلون ابيض عند عدم تحديد الألوان للخلفية فما أين اتيت بهذا اللون وايضا ما نوع المتصفح الذي تستخدمه فنحن نستخدم فيرفوكس و IE 7, 8 وكروم و سفاري لم ياتي بهذه النتيجة اعتقد كل هذه المواقع العالمية لم يأتي علي بالها موضوع اللون والعار انهم نسوا وضع قيمه له مكونه من ثلاث حروف بالسداسي عشر !! #FFF أتمني منك حسن اختيار العنوان ولا تفهمني كلامي بمحمل اخر لأني تفاجئت وفكرة شئ خطير ولكن الأمور ابسط من هنا فهذا ليس بخطأ عضال وايضا يمكنك مراسلتهم او توصيح العلاج بدل من وضع المواقع المختلفة كأنها صنعت شئ مشين :( ولكن الأمر ابسط من هذا كله .. بالتوفيق لك 6. عبدالرحمن العتيبة 28 سبتمبر 2009 @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 قد أعطى حلاً. أي أنها تعلم أن هناك مشكلة، ولكن، هل العجز والكسل هما من أخّر التعديلات على الموقع؟ وبالمناسبة هذا الموضوع متداول منذ زمن بعيد على القوائم البريدية المهتمة بالمعايير القياسية، ولعلّي قمت بتحريك الماء الراكد في هذا الموضوع. 7. Mr.PhP iRaQ 29 سبتمبر 2009 مقالة جميلة لكن الا ترى شئ غريب؟ اكبر المواقع نفس الشئ..! ما معنى هذا؟؟ اليس هنالك معنى لهذا الشي؟ هل يعقل ان تكون مواقع كبيرة مثل هذه نست وضع كود لا يتجاوز 10 حروف وارقام؟؟! لخصت ما اريد قوله بالأستفهام.. 8. عزوز الحسني 29 سبتمبر 2009 أرى هذا الموضوع تنطّع في التصميم، وما أدرانا عن ذلك حتى نحسب له حساب؟ إن كتابة السطر background-color: #FFF; يستهلك 23 بايت وأريد توفيره من ترافيك الموقع، لذا فلن أضيفه .. :) 9. نواف 1 أكتوبر 2009 انت وضعت ثيم يفترض على الموقع background color غير FFF وهذا لا يجب أن يفعله متصفح ولو فعل هذا الاكسبلورر لقامت الدنيا ولم تقعد ! لا أعلم إن كانت W3 قد وضعت هذا في حسبانها لكن لا اعتقد أنه يجب ذلك فالمسلمات لا توجب التنويه لها ! 10. cssbit 1 أكتوبر 2009 اصبح التوجه الان في التطوير هو استعمال خلفيات بيضاء فارغة دون ألوان، خصوصا ان كنت لن تستعمل صورا في الخلفية (انظر موقع vimeo) معظم مواقع ويب 2.0 تستعمل مساحات بيضاء فارغة لانه اضحى توجها جديدا في تطوير المواقع لدواعي البساطة والوضوح وتجربة الاستخدا كما أن معايير قابلية الوصول والاستخدام تنادي بعدم استعمال ألوان للخلفية مخيفة كاللون الأصفر 11. عبدالرحمن العتيبة 1 أكتوبر 2009 @نواف وضعت اللون الأصفر فقط للتوضيح. أما بالنسبة لمنظمة W3C فقد عرّفت أنه يجب على background-color للعناصر أن تكون شفافة، ولكن اللبس والغموض يأتي عند الخلط بين القيمة الابتدائية والقيمة الافتراضية للمتصفح User-Agent. ولكن، وكما قلت في تعليقي السابق أن هناك قيمتين لخواص CSS عند المتصفحات. Initial Value: وهي القيمة الابتدائية، والتي يتم وضعها وتعريفها من منظمة W3C. Default Value: وهي القيمة الافتراضية، والتي تعتمد على المتصفح ولا يمكن للمنظمة التحكم بها. وهنا تكمن المشكلة! في هذه الخواص يمكنني تعريف ما شئت، ولا يجب على الصفحة المصممة باحترافية التأثر لهذا التغيير، لأنها لا يجب أن تعتمد على ماهية المتصفح User-Agent وإنما الاعتماد على ماتُعرّفه المنظمة من قيمة ابتدائية للخواص. المصممون لا ينتبهون لتعريف هذه الخواص لدى المنظمة، ولعل المتصفحات أيضاً ألبست عليهم بتعريفها للقيمة الافتراضية باللون الأبيض، فاعتقدوا أن كل المتصفحات تأتي معرّفة افتراضياً باللون الأبيض للخلفية، وهنا يكمن الخطأ. @cssbit أشكر لك مرورك وتعقيبك الكريمين. أنا كما وضحت أني استخدمت اللون الأصفر فقط للتوضيح، واستخدمت هذه الخاصية في القيمة الافتراضية Default value للمتصفح User-Agent ولم أستخدم اللون في القيمة الابتدائية Initial value حيث هذا سيكون مخالفة واضحة لقواعد W3C ولن يكون نقدي ذو معنى لأنه سيُبنى على حقائق واهية. 12. mohamed 1 أبريل 2010 جربها على هذا الموقع المشروع طب دى هنا فضيحة body { background:red none repeat scroll 0 0; } لا اعتقد ان هذا خطا 13. محمد قاس 10 مايو 2010 نيال الفاضي أضف تعليقك اضغط هنا لإلغاء الرد. الاسم * ___________________________________ البريد الألكتروني (لن يتم نشره) * ___________________________________ الموقع ___________________________________ يمكنك استخدام الوسوم التالية في التعليق:
التعليق _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ * حقول مطلوبة [_] هل تريد الحصول على جديد التعليقات حول هذا الموضوع عن طريق البريد الالكتروني؟ موافق « 8 أدوات لقياس مدى قابلية الوصول لموقعك 10 مجموعات من أيقونات مواقع اجتماعية لمدونتك » * اشترك في خدمة RSS تابعنا بإستخدام RSS أو البريد الألكتروني * تابعنا على twitter * مقالات عشوائية + ما هي هندسة البرمجيات؟ - مقدمة + الاستضافة المجانية، مميزاتها وعيوبها + الفيديو أكثر فعالية + الرسائل الدعائية Spam + 15 مجموعة جديدة من أيقونات مواقع اجتماعية + [php] دالة التاريخ الميلادي باللغة العربية + افتتاح DevPedia - مجتمع مطوّري المواقع + البرمجيات العربية إلى أين [2] + تعلم برمجة إضافات وردبريس [الجزء الثاني] + حيلة مع ال GET ربما تنفعك ! * الأكثر شعبية + [php] دالة استخراج صيغة الملفات والصور + الخوارزميات، مدخلك إلى عالم البرمجة + ما هي هندسة البرمجيات؟ - مقدمة + أساسيات تصميم الشعارات + تسريع تحميل الصفحة باستخدام data URI + 7 من أجمل مدونات مطوري المواقع العرب + علماء ومفكرين أسهموا في تطوير الإنترنت العربي + 12 إضافة WordPress بأيدي عربية + مفضلتنا الدورية #2 من ‎@almashroo + أنواع العملاء (2) * كتّاب المشروع + عبدالرحمن العتيبة + عبد الواحد البشيري + فراس اللو + دوت مجاك + ابو خالد + عبدالعزيز الزرعوني + Dev.Moh Sh + EbNCaNa + keepondev.com * معرض الأوسمة .htaccess .NET AJAX Apache ASP ASP.NET CSS HTML JavaScript MySQL PHP Silverlight XHTML XML المشروع المعايير القياسية تجارة الكترونية ترميز تصميم ثغرات جداول خوادم دوال عام قابلية الإستخدام قابلية الوصول كائنات مشاريع مشاريع ناشئة وسائط متعددة * الرئيسة * عن المشروع * انضم إلينا * مراسلة الإدارة * ادعمنا * اتفاقية النقل والاستخدا