المدونة ياهو واجهة المستخدم (YUIBlog)

الخدع الحدود المغلق مع صناديق منهارة

8 مارس 2011 في 03:23 بواسطة Koblentz تييري | في CSS 101 ، تصميم ، تطوير | 8 التعليقات

وهذه الحيل تساعدك على تحقيق التصاميم من دون اللجوء الى استخدام الصور، والتدرج CSS3 أو العلامات دخيلة. بواسطة انهيار صناديق صفر مع line-height ، و height قيم، يمكننا عرض محتوى من خارج منطقة الجزاء المحتوى، وعلى الحدود.

ثنائي لون الخلفية

هذا المثال لا يتضمن IE 6/7 الحلول (مراجعة شفرة المصدر من هذه الصفحة عرض لإصلاحات IE).

 .parent { display:inline-block; text-align: center; border: 1px solid #cecece; } .child { display:inline-block; line-height: 0; height: 0; border-top: 1em solid #ffc; border-bottom: 1em solid #fdcf46; padding:0 .6em; vertical-align:bottom; } <ul id="menuBar-A"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> 

النقاط وأنابيب بين عناصر قائمة

هذا المثال يوضح بشكل صحيح عبر المتصفحات بعد بعض الإصلاحات IE بسيط.

 ul.one, ul.two { margin-left:0; display:inline-block; *display:inline; zoom:1; height:12px; line-height:12px; padding:0; } li { float:left; display:inline; height:2px; line-height:2px; position:relative; top:.3em; } ul.two {border-left:1px solid #333;} ul.one li {border-left:2px solid #333;} ul.two li {border-right:2px solid #333;} ul.one li.first-child, ul.two li.last-child { border:0; } a { color:#000; padding:.4em .9em; *position:relative; } <div id="menuBar-B"> <ul class="us"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> </ul> <ul class="ourOffer"> <li class="services"><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> </div> 

اليسار واليمين، يشير إلى مثلثات

هذا المثال لا يتضمن IE 6/7 الحلول (مراجعة شفرة المصدر من هذه الصفحة عرض لإصلاحات IE).

 #box { line-height: 0; height: 0; border: .4em solid transparent; border-left-color: #333; border-right-color: #333; padding: 0 .3em; display: inline-block; } <ul id="menuBar-C"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> 

IE 6 والشفافية الحدود

IE 6 لا يعتمد الكلمة " transparent "للون الحدود. عند استخدام هذه القيمة، IE 6 يرسم الحدود السوداء.

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

 #Box { height: 0; width: 0; border: 10px solid transparent; font-size: 0; _border-color: pink; _filter: chroma(color="pink"); border-left-color: #333; } 

إعلان حجم الخط هو آخر للمشكلة من أجل IE 6. هذا هو للتأكد من هذا المتصفح لا يزيد ارتفاع مربع.

! وقف المطابع تعلمت مجرد خدعة جديدة (شكرا Chungho فانغ):

سحر [لخلق شفافية الحدود في شركة آي إي] هو تحديد "الحدود على غرار" لمتقطع أو منقط

---

هذا كل شيء! هذا هو واحد فقط أكثر وسيلة لاستخدام الحدود لتحقيق صورة أقل تصميم.

لمزيد من القراءة

• دراسة لمضلعات منتظمة
• slantastic
• الميول

العثور على المحادثات: المدونات | technorati

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!

للملكية CSS الموقع

14 ديسمبر 2010 في الساعة 7:35 من قبل Koblentz تييري | في CSS 101 ، تصميم ، تطوير | 6 تعليقات

هذه الخاصية تنطبق على جميع العناصر. كان لديه خمس القيم الممكنة:

• static
• relative
• absolute
• fixed
• inherit

الموقف: ثابت

في الفترة من 9 قسم نموذج التنسيق المرئي :

مربع هو مربع عادي، وضعت وفقا ل تدفق طبيعي . و top ، right ، bottom ، و left خصائص لا تنطبق.

الأشياء لاحظت في هذا العرض

• المربع الثاني يدل تماما حيث أنه سيكون من دون إعلان موقف.
• القيمة المعطاة إلى top لا يطبق لأنه في سياق "ثابت"، القيمة المحسوبة من تعويضات الصندوق هو دائما auto .

الأشياء لتذكر

• إذا كان position الملكية عنصر له قيمة static ، وليس هذا العنصر وقال ان وضعه.
• لأنه static هو القيمة الأولية (القيمة الافتراضية)، ليست هناك حاجة لتشمل التصميم هذه في كتلة الإعلان إلا إذا كان للكتابة قيمة مختلفة.

الموقف: النسبية

في الفترة من 9 قسم نموذج التنسيق المرئي :

ويحسب موقف مربع وفقا لالتدفق الطبيعي (ويسمى هذا الموقف في التدفق الطبيعي ). ثم يقابل مربع نسبة إلى وضعها الطبيعي. عندما يتم وضع نسبيا B مربع، وتحسب على موقف مربع التالية كما لو كانت لا تعوض ب.

الأشياء لاحظت في هذا العرض

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

الأشياء لتذكر

• وتترك دائما القيم المحسوبة = اليمين وأعلى = القاع. إذا كان direction من كتلة تحتوي على غير ltr ، قيمة الفوز "اليسار" و "الحق" يصبح - 'اليسار'. إذا direction كتلة المحتوية هو rtl يتم تجاهل، "حق" انتصارات و "اليسار". ويمكن الاستفادة من الكتاب لكيفية عمل الأشياء من خلال تحديد قيمة متساوية للممتلكات الآخر.
• وخلافا للنموذج "المطلق"، top ، right ، bottom ، و left يمكن أن الخصائص لا تمدد ولا تقلص مربع (انهم لا يستطيعون تغيير حجمه).

الموقف: المطلقة

في الفترة من 9 قسم نموذج التنسيق المرئي :

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

الأشياء لاحظت في هذا العرض

• لأنه لم يتم تحديد خانة تعويض، ولم مربع 'اثنين' لا تتحرك من موقعها الأصلي، ولكن إذا كنا قد تستخدم top:0;left:0; على سبيل المثال، أن الصندوق سيكون في أعلى الزاوية اليسرى من إطار العرض .
• تخطيط حكيم، هو مثل تم نصب مربع '2' مع display:none . تمت إزالة مربع من التدفق.
• مع خروج مربع "2" للتدفق، انتقلت مربع "الثلاثة" ضد مربع 'واحد' (الفقرات التي تليها).
• مثل جميع العناصر إزالتها من التدفق، ومربع "2" وأفقيا يتقلص الملفوفة.

الأشياء لتذكر

• عن أي عنصر من عناصر "مطلق" أو "ثابت" في وضع القيمة المحسوبة لل display هو block .
• عن أي عنصر من عناصر "مطلق" أو "ثابت" في وضع القيمة المحسوبة ل float هو none .
• 'كتلة تحتوي على' A هو المربع الذي يحدد سياق تحديد المواقع. ومن المعترف به من قبل أقرب سلف مع موقف ' من 'المطلق'، 'النسبية' أو 'ثابت'. وهذا يعني أن صندوق الأم قد لا تكون كتلة المحتوية .
• الموضع الافتراضي من مربع في موقع على الاطلاق ليست دائما كما لو كان على غرار ذلك مع أعلى: 0؛ اليسار: 0؛ (في سياق LTR). وهذا لسببين:
  1. تم تأسيس الكتلة التي تحتوي على لمربع وضعه من قبل أقرب سلف وضعه، وإذا كان هناك لا شيء، في حاوية المرجعية هي العنصر الجذر. كتلة تحتوي فيه عنصر جذر ودعا حياة عبارة عن مستطيل كتلة الأولية التي تحتويها. وسائل الإعلام المستمر، فإن لديها أبعاد المعاينة (نافذة أو غيرها من مساحة العرض على الشاشة)، ويرتكز على أصل قماش. هذا المثال يوضح مربع وضعه بالنسبة إلى منفذ العرض (كتلة الافتراضية التي تحتوي على).
  2. يتم وضع العنصر في إشارة إلى مربع الحشو، وليس مربع محتوى ولا مربع الحدود للكتلة التي تحتوي على. هذا مثال جديد يوضح فيه مربع "2" سيكون إذا حواف مربع الحشو لم يلمس حواف مربع المحتوى (كتلة تحتوي على كونها body ).
• قد يكون حجم مربع يكون نتيجة لل top ، right ، bottom ، و left قيم العقارات. فعلى سبيل المثال، سوف التصفير من كل المواصفات تجعل من مربع تمتد لتتناسب مع أبعاد مربع من الحشو الذي يتضمن كتلة. انظر التصفير من كل إزاحة مربع (ملاحظة: IE6 لا يمتد مربع).
• لخلق غطاء القناع الذي لا انتقل مع وثيقة (كما في المثال السابق )، إما استخدام fixed بدلا من absolute أو نمط body مع position:relative في كتلة لتحديد المواقع الأولية هو منفذ العرض (التصميم html لن يجدي نفعا في IE) . حيث ان هذا العرض تراكب معارض.
• position:absolute مشغلات haslayout .

أهم شيء ان نتذكر

لأن هذا النظام لتحديد المواقع يزيل صناديق من التدفق، ويعتبر pratice سوء استخدامه للتخطيط.

الموقف: ثابت

في الفترة من 9 قسم نموذج التنسيق المرئي :

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

الأشياء لاحظت في هذا العرض :

• منذ تحديد المواقع الثابتة هو فئة فرعية من الموضع المطلق، كل ما كان صحيحا ل 'المطلق' ينطبق أيضا على "ثابت" (العنصر يتقلص، يلف، وإزالته من تدفق، وغيرها).
• يتم وضع مربع في ما يتعلق منفذ العرض، فإنه لا التمرير مع الصفحة.
• في IE 6، يظهر مربع على شكل مربع ثابت ، ولكن هناك "مضحك" الحل البديل لذلك.
• عند طباعة المستند، مربع 'اثنين' تظهر في كل صفحة واحدة.

الأشياء لنتذكر:

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

    @ {وسائل الإعلام المطبوعة 
     # شعار {الموقف: ثابت؛}
   } 

• مثل position:absolute ، position:fixed من شأنه أن يؤدي haslayout في آي إي.

الموقف: وراثة

إذا position:inherit المحدد لمربع معين، وبعد ذلك سوف تأخذ نفس القيمة المحسوبة والممتلكات لأصل مربع و.

لاحظ أن IE 6 و 7 لا تدعم هذه الكلمة إلا عندما تستخدم مع direction و visibility (انظر قيمة الملكية المغلق وراثة ).

الأشياء في الاعتبار

صندوق التعويضات

أن تدرك أن للمطلقة وثابتة في وضع مربعات، القيم التي تم تعيينها في النسبة المئوية لل top ، right ، bottom ، و left يتم حسابها وفقا للأبعاد كتلة تحتوي على (والتي قد لا تكون خانة الأصل).

موقف 'و' تجاوز '

مربع على غرار مع overflow:hidden وسوف مقطع عناصر نسبيا وضعه (مربعات متداخلة)، لكنه لن يخفي دائما تلك المتمركزة على الاطلاق. هذا هو الأصل لأن مربع ليست دائما كتلة تحتوي على (أقرب سلف مع موقف ' من 'المطلق'، 'النسبية' أو 'ثابت').

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

الهوامش

ويمكن استخدام هوامش الكتاب على العناصر بغض النظر عن نظام تحديد المواقع الخاصة بهم.

حالة IE

في آي إي، قد "تحديد المواقع" مربع يكون نعمة أو نقمة:

• في IE6، position:relative (with haslayout) يمكن استخدامها لمنع مربع على غرار مع هوامش سلبية من يتم قطعها من قبل الحاوية الأصل (انظر كيف وضع مربع حل هذه القضية).
• قد المواقع عنصر "زعزعة" كومة صناديق الطريقة في IE 6 و 7 لأن هذا قد وضع إطار جديد التراص (رؤية حالة اختبار ).

التراص النظام والتراص مستوى

• وفقا للتسلسل في شفرة المصدر، وصناديق وضعه تأتي أمام العوامات ومربعات في التدفق الطبيعي.
• يمكن للمؤلفين تحديد مستويات كومة من خلال خاصية "Z-مؤشر" فقط على مربعات وضعه.
• في IE6 و 7، يمكن للحقيقة بسيطة لتحديد المواقع مربع تأسيس السياق التراص (انظر أعلاه، " في حالة اي ").

أجهزة الجوال

قراءة المادة PPK، و الموقف [6] قيمة ، لمعرفة لماذا البائعين متصفح المحمول لا يمكن أن نؤيد حقا position:fixed .

مزيد من القراءات

• التنسيق المرئية نموذج
• موقف (CSS الممتلكات)
• موقف إعلان

ألف "شبح" قياسا بواسطة DrLangbhani:

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

العثور على المحادثات: المدونات | technorati

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!

نصيحة سريعة: تخصيص الحنفية موبايل سفاري لون الضوء

1 أكتوبر 2010 الساعة 11:34 صباحا من قبل غروف ريان | في التصميم ، التطوير | 3 تعليقات

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

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

والخبر السار هو أن موبايل سفاري تؤيد تمديد CSS دعا -webkit-tap-highlight-color ، والتي يمكنك استخدامها لتخصيص لون من تسليط الضوء على الصنبور أو إخفائه تماما.

و -webkit-tap-highlight-color الملكية يقبل أي لون المغلق معيار قيمة، ولكن عليك ربما تريد توفير قيمة RGBA من أجل السيطرة على شفافية ألفا. تعطيل تسليط الضوء على الصنبور بسيطة مثل تحديد قيمة ألفا إلى 0 ، كما يلي:

 #container { -webkit-tap-highlight-color: rgba(0,0,0,0); } 

اطلاق النار حتى الجهاز دائرة الرقابة الداخلية المفضلة و عرض هذا عرض بسيط لمعرفة ما بنقرة وتفويض يبدو وكأنه على حد سواء مع ودون تسليط الضوء على الصنبور. لمزيد من التفاصيل حول -webkit-tap-highlight-color وغيرها من ملحقات مفيدة موبايل سفاري CSS، راجع CSS سفاري المرجعي .

العثور على المحادثات: المدونات | technorati

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!

البديل جلود للالمتزلج 3.1.0 YUI

6 أبريل 2010 في 6:03 صباحا بواسطة Conniff جيف | في التصميم ، التطوير | 1 تعليق

قررنا اتخاذ YUI المتزلج 3 القطعة الجلود فوق خدش البصرية لYUI 3.1.0. وكانت هذه الأهداف لدينا:

1. تحسين طعم حلو عموما البصرية وظهور 3-D
2. تقدم مجموعة واسعة من الجلود الإبهام والسكك الحديدية
3. توفير مجموعتين جلود لخدمة الظلام، فضلا عن الخلفيات صفحة ضوء
4. توفير مجموعة كاملة من الابهام والقضبان الرأسية للاستخدام، فضلا عن أفقي
5. تجعل من السهل على مزيج المباراة والابهام مع أنماط مختلفة السكك الحديدية
6. تقديم أصول فوتوشوب للمطورين المساعدات في تعديل الصور المنزلق لتتوافق مع أي لون الخلفية

قارن جلود YUI المنزلق 2 مع تلك التي YUI 3 أدناه. مجموعة جديدة تضم أكثر تنوع وينبغي أن تكون مجموعة واسعة من صفحات والأساليب.

الجلود YUI المتزلج 2:

الجلود YUI المتزلج 3:

نحن لم تحد من الابهام إلى مستطيلات وزوايا 45 درجة. طرحت هذه بعض التحديات مع الحد من التعرجات. ال 2 الابهام YUI لها ظلال دمجها في صورة عامة، لذلك هم رمادية اللون الصلبة. لقد قمنا بتحسين هذا من خلال جعل الكائن الظل الذي هو منفصل عن صورة الإبهام. الظل و opacity: 0.15 . وهذا يعني أنها تبدو طبيعية كما ظل يسقط على السكك الحديدية وعلامات التجزئة.

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

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

إلقاء نظرة على هذه الأمثلة رمز العمل من المتزلجون جديد. اطلب من وراء الكواليس عمل مفصلة للصور الجلد وCSS.

نحن نأمل أن تكون هذه المنزلقات الجديدة ستكون بالإضافة إلى لطيفة البصرية لحقيبتك من الحيل.

العثور على المحادثات: المدونات | technorati

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!

ثلاثة أنماط تصميم ملاحة جديد

22 فبراير 2010 في 16:56 بواسطة المسيحي Crumlish | في التصميم | 5 تعليقات

على مدى الشهور القليلة الماضية أجريت مراجعة لأنماط في داخلي ياهو تصميم مكتبة نمط، مع العين في اتجاه نشر أكبر عدد ممكن منهم في مكتبة مفتوحة في YDN . لماذا؟ حسنا، لشيء واحد، للحصول على مزيد من مقل العيون عليها، لجمع مزيد من ردود الفعل ومواصلة تحسين أنماط. أيضا، منذ أنماط قليلة جدا في مكتبة تحتوي على ياهو معلومات محددة، وعملية البديل هو الآن في مكان لفحص المتطلبات المحددة لشبكة ياهو ومكونات العلامة التجارية، ويمكن للجمع نمط تصميم الآن بسهولة أكبر التركيز على (نسبيا) مبادئ التصميم العالمي لتطبيقات الويب.

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

أول دفعة من أنماط للخروج من عملية المراجعة تتعلق أشرطة التنقل . هناك ثلاثة أنماط حتى الآن في هذه المجموعة: التنقل العلوي ، ملاحة اليسار ، و شريط التقدم . سؤال واحد هو ما إذا كان المشروع القضبان NAV أعلى واليسار لا تزال هي الطريقة الأفضل أو الأكثر الحالية للانتقال إلى موقع والعثور على المحتوى؟ لا نزال نجد أمثلة كثيرة منها عبر شبكة الإنترنت، والاستخدام في ياهو حتى الآن سأقول نعم، لكنه يستحق التفكير.

حيثما كان ذلك ممكنا وأنا أحاول أن ربط أنماط العودة إلى مكتبة YUI ، وعند الاقتضاء، إلى رمز آخر وحلول التنفيذ. YUI لديه دعما كبيرا لnavbars والأمثلة القائمة. ربما كان أفضل مكان للبدء هو القطعة القائمة .

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

الرجاء تحقق من هذه الأنماط الجديدة وعلينا أن نعرف رأيك!

العثور على المحادثات: المدونات | technorati

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!

الستينسلات تصميم اي فون في مكتبة نمط

17 ديسمبر 2009 في 14:11 بواسطة المسيحي Crumlish | في التصميم | 1 تعليق

العثور على المحادثات: المدونات | technorati

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!

نتائج مسح نمط الأكورديون

26 أكتوبر 2009 في 14:44 بواسطة Crumlish المسيحي | في التصميم ، التطوير | تعليقات فاقيإ قبل بضعة أشهر تشاطرنا تفكيرنا الحالي على عنصر "أكورديون" الملاحة ، ودعا المجتمع من مطوري الويب والمصممين الذين قرأوا هذا بلوق لاتخاذ إجراء مسح لمساعدتنا على تحديد الافتراضات، والممارسات الحالية، وغيرها من المبادئ التوجيهية لإدماج الى الأكورديون نمط وتوفير مدخلات أكورديون YUI عنصر. لقد كان بعض الوقت لمراجعة ودراسة النتائج وكنت أرغب في مشاركتها مع المجتمع كما نكتب انشاء "بيتا" نسخة من نمط والاستعداد لمشاركته، وذلك دون مزيد من داعا، وهنا النتائج حددت (لاحظ أنه لا ينبغي أن يعتبر هذا الاستطلاع العلمي البحت) الذين استجابوا المستجيبون أنفسهم بالطرق التالية:

• مصمم 21.4٪
• المطور 32.1٪
• هجين (كلاهما مصمم ومطور) 42.3٪
• أي من 4.2٪ فوق

المصطلحات المتفق عليها الفروق الأغلبية الساحقة عبر جميع المشاركين أن

• الأكورديون والقائمة الأكورديون تعني الشيء نفسه (73٪)
• الأكورديونات وضوابط شجرة هما شيئان مختلفان (89٪)

ووصف العديد من المعلقين الفرق بين الأكورديونات والأشجار على طول هذه الخطوط: "شجرة التحكم ينطوي عموما على عمق التسلسل الهرمي ليست عادة الحالي مع الأكورديون". أصغر أغلبية قال أن الأكورديون وقابل للانهيار لوحات تشير إلى الشيء نفسه (60٪) . كانت هذه الأغلبية متناسقة عبر أدوار. عرض الأكورديونات أغلبية الصلبة (68٪)، وقال أنه يمكن وضع الأكورديونات خارج أفقيا وكذلك رأسيا (في واقع الأمر على ما يرام نمط يشهد على شبكة الإنترنت). واقترح أن الناس يجب أن تتم كتابة التسميات على الأكورديون أفقي عموديا و / أو تدويرها. وقالت أغلبية أكبر (72٪) أن الأكورديونات يمكن أن يكون لها مستويين فقط (وهذا ينسجم مع التمييز بين الأكورديونات والأشجار): وقالت أغلبية ضئيلة (53٪) التي قد تكون متداخلة الأكورديونات ضمن الأكورديونات الأخرى. اقترح تعليقات مكتوبة أن صيغة السؤال قاد بعض للرد على هذا الأمر بالتأكيد ممكن ولكن غير مرغوب فيه بالضرورة، تقديم اقتراحات مثل: "إذا كنت مزراب كافية لهم، وهذا لن يكون ممكنا، ولكن عموما فكرة رهيبة - نوع من مثل استخدام علامات كثيرة جدا وجود لهم التفاف إلى صفوف متعددة ". وكان هذا أحد الأسئلة التي من يصفون أنفسهم مصممين ومطوري البرامج استغرق الجانبين المتقابلين. وافق 57٪ من المطورين والهجائن التي قد تكون متداخلة الأكورديونات، في حين أن 64٪ من المصممين وقالت انها قد لا تكون. (أي من Aboves تقسيم 50/50!) إذا اضطررت الى تخمين، وأنا أقول أن المطورين (والهجينة)، وأكثر ارتباطا وثيقا تتصل كيف من سبب قد يكون التعبير عن أكثر من "هل يمكن أن تفعل ذلك ... "منظور، في حين أن المصممين قد تم التعبير عن أكثر من" ... ولكن يجب أن لا "وجهة نظر. كيف ينبغي أن يتصرف الأكورديونات أغلبية ضئيلة (54٪) تعتقد أن الأكورديونات ينبغي أن يسمح لأكثر من لوحة واحدة لتكون مفتوحة في الوقت. ويمكن الاطلاع على كل السلوكيات على الانترنت، وذلك الانطباع لدينا هو أن هذا السلوك قد تعتمد أكثر على القيود من مساحة التصميم والغرض من الأكورديون من التركيز على طريقة بطانية قاعدة واحدة أو أخرى. هذا السؤال أيضا على طول خطوط تقسيم الهوية، ولكن بطريقة غامضة. فضل الهجينة في لوحة واحدة، في وقت واحد في حكم بأغلبية ضئيلة، في حين أن مصممين ومطوري البرامج وأي من Aboves اتفق على أن لوحات متعددة على ما يرام بأغلبية أكبر قليلا. أغلبية أكبر من ذلك بكثير (73٪) تعتقد أن أكورديون يمكن أن يكون له دولة مغلقة تماما (وهذا يعني، أنه ليس من الضروري أن تكون هناك دائما لوحة واحدة مفتوحة). والخارجة الوحيد هو أن لا أحد من Aboves كسر 60٪ عن الموقف الذي يجب أن يكون هناك دائما لوحة واحدة مفتوحة. واقترح العديد من المعلقين أنه هو ممارسة جيدة أن يكون لوحة واحدة مفتوحة افتراضيا، ولهذا الفريق إما أن يكون أول واحد، واحدة تستخدم في الآونة الأخيرة. آخر أغلبية كبيرة (76٪) تعتقد حجم أكورديون الشاملة يمكن أن تتغير حسب الحاجة، بدلا من أن تكون مقيدة إلى حجم ثابت. (وبطبيعة الحال، هناك السياقات، مثل شاشة جهاز محمول، والذي قد يكون خيارا صالحا أو حتى قيد التصميم الذي أكورديون حفاظ على حجم ثابت.) واقترح أغلبية ضئيلة جدا (51٪) أن الأكورديونات يجب أن تفتح على فوق (على العكس من يوم تحوم) وأقلية كبيرة مثل ما يقرب من (45٪) وقال ان هذا الامر يعتمد. ومن المثير للاهتمام، وكانت أقل من 4٪ على استعداد لتبين الأكورديونات يجب أن تفتح في التحويم كقاعدة. تقدم تعليقات مكتوبة حول هذه المسألة الكثير من الطعام الجيد للفكر، مثل:

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

تعتمد على تكوين كل الأكورديون. أنا وضعت هذه الأمثلة معا [ متعددة ، تجديد ]، لذلك يمكن للمطور استخدام في الواقع "أفضل مناسبا" لكل حالة الاستخدام. أيضا، يجب أن يكون هناك خيار استخدام التمديد مع قواعد مختلفة: (واحد من معظم تكون مفتوحة) أو (يجب فتح عناصر في تمرير الماوس فقط).

لاستخدامات المتقدمة، ويجب على الأكورديون فتح في التحويم خلال عمليات السحب والإفلات. في أي ظرف آخر، لا يمكن على ثقة من أن تحوم غير مقصود.

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

أعتقد أنه من الأسلم أن نفترض أن هذا التفاعل هو تفاعل الأكورديون المتقدمة. يمكن أن الكثير من المشاكل تنشأ إمكانية الوصول.

1. مخفيا وراء محتوى لوحات من الناس قد لا يجدون.
2. اعتمادا على حجم المنطقة القابلة للنقر أو على الزناد لفتح / إغلاق الألواح يمكن أن تكون هناك مشاكل مع البراعة اليدوية اللازمة.

يجب فتح جميع لوحات الأكورديونات إذا جافا سكريبت غير متوفر (على الرغم من أن قد تنتج "وميض" لذوي جافا سكريبت).

ذلك يعتمد على ما إذا كان المحتوى في لوحات خفية موجودة في DOM أو يتم استردادها عند فتح لوحة. إذا كان يتم استرجاعها، والتركيز يجب أن يوضع على لوحة افتتح حديثا.

حسنا، أعتقد حقا أن يكون العنوان ويمكن النقر عليها، خاصة إذا سيتم تحميل محتوى العنصر باستخدام أجاكس (تماما مثل نهج tabview)، ولكن الواقع هو أنه في بعض الأحيان المطور (ينبغي أن يكون) / (يريد) السيطرة على تخصيص هذا السلوك. وهنا لائحة من الأمثلة التي أنشأت لتنفيذ الأكورديون القطعة استنادا إلى الإصدار 2.x YUI، انها على الارجح واحدة من أهم المكونات المستخدمة من محتدما YUI التمديد.

كان لدينا حالة ما إذا كان "العلامة" من الأكورديون وكان وجود صلة لبلوق وظيفة كاملة، ولذا لا يمكن أن يكون الأكورديون للنقر. في هذه الحالة، كتبنا رمز في مصدر مع شبيبة للقيام بهذه المهمة. قدمت رمز كبير بما فيه الكفاية و / أو يأتي مع accesskey، وأنا لا أرى صعوبة كبيرة ...

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

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

الافراج عن خطة مشروع وتساءل أحد المعلقين على القيود المصطنعة للمسح (شرطي عادل، اذا سألتني):

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

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

العثور على المحادثات: المدونات | technorati

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!