معربا عن تكنولوجيا المعلومات

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

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

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

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

مفاتيح إعادة تدوير CSS:

استخدام اصطلاحات التسمية

هذا يجب أن يكون العامل الأكثر أهمية في جعل المغلق / HTML إعادة استخدامها. إعطاء أسماء ثابتة لعناصر الصفحة يتيح إعادة استخدام مكونات الصفحة وأساليبها مع القليل أو ادخال تعديلات عليها. تماشيا مع هذا الرأي، حتى HTML5، في تغيير تغيير كبير على سابقاتها، هو إدخال بعض بمعنى به الهيكلي. <article>، <section>، <header>، <aside>، و<nav> [ ما الذي جلب HTML5؟ ]. حتى مع HTML 4 (أو أقل)، فمن الأفضل لتسمية أقسام مستوى صفحتك consistanly كما هو الحال في مثال بسيط أدناه ...

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

  <div id="container">
    <div id="header"> ... </ div> المصدر:
    <div id="nav"> ... </ div> المصدر:
    <div id="sidebar"> ... </ div> المصدر:
    <div id="footer"> ... </ div> المصدر:
   </ div> المصدر: 

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

  الجسم، وشعبة، دل، DT، DD، UL، OL، لى،
  H1، H2، H3، H4، H5، H6،
  ما قبل، شكل، fieldset، المدخلات، وحدد محتويات صندوق الكتابة،
  ف، اقتباس فقرة، الجدول، والعشرون، TD
  {
    الحدود: 0px؛
    هامش: 0؛
    الحشو: 0؛
  } 

تعيين افتراضيات (أنماط الأساس) لعناصر:

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

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

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

  HTML {حجم الخط: 77٪؛ الخط بين أفراد الأسرة: ارييل، بلا الرقيق؛}
 قوي، H1، H2، H3، H4، H5، H6 {الخط الوزن: جريئة؛} 

أنماط مجردة عن مكونات HTML المشترك وفئات المشتركة:

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

وبصرف النظر عن تحديد الأساليب التي يمكن إعادة استخدامها تعريفات لمكونات أتش تي أم أل المشتركة، فإننا لا يمكن مجردة أساليب الفصول المتعلقة اللون، الطباعة أو تخطيط حتى. أنا نفسي تميل استخدام ... الطبقات المشتركة مثل Clearfix، Font08، FontGrey، AlignL، DisplayB الخ

  المدخلات شكل {الحدود: 0px؛ خلفية: # FFFFFF؛ الحشو: 0px 10px؛ _padding: 0px 0px؛ الطول: 26px؛ اللون: # 000000؛ خط الطول: 30px؛ الخط الحجم: 1.1em؛}
 محتويات صندوق الكتابة شكل {الحدود: 0px؛ خلفية: # FFFFFF؛ اللون: # 000000؛ حجم الخط: 0.9 م؛ خط الطول: 1.5em؛ فيض: مرئية؛}
 . fbold {الخط الوزن: جريئة؛ اللون: # CCCCCC؛}
 . fgrey {لون: # 666666؛}
 . flightgrey {لون: # BBBBBB؛}
 . clearfix {واضحة: على حد سواء؛}
 . مقسم {الحدود بين كبار: 1px الصلبة # 647B06؛ الحدود القاع: 1px الصلبة # 9CC00A؛ الارتفاع: 0px؛}
 . displayb {العرض: كتلة؛}. displayn {عرض: لا شيء؛}
 . alignr {مواءمة النصوص: حق}. alignc {مواءمة النصوص: مركز}
 . floatr {تعويم: الحق؛}. floatl {تعويم: غادر؛} 

الإصلاحات لالمراوغات متصفح مشترك

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

تذكر، تبقى هذه الخارقة / تصحيحات مفيد

  / * التكبير التالية: 1 القاعدة هي على وجه التحديد لIE6 + IE7.  * /
    * HTML. clearfix،
    *: أول طفل + HTML clearfix {
           التكبير: 1؛
      } 

الاستمرار في تنقيح CSS لديك

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

نظرة على أطر CSS

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

• 960 نظام الشبكة : نظام الشبكة 960 هو محاولة لتبسيط سير العمل على شبكة الإنترنت التنمية من خلال توفير الأبعاد تستخدم عادة، بناء على عرض من 960 بكسل. هناك ثلاثة أنواع: 12، 16 وأعمدة 24، والتي يمكن استخدامها بشكل منفصل أو بالتوازي. لا شيء فكر أنه لا يمكنك إنشاء واحد لوحدك ما يكفي بسهولة، ويوفر الإطار قوالب شبكة للطباعة في شكل قوات الدفاع الشعبي، أن واحدة يمكن استخدامها لرسم designs.Bet صفحتك، وسيجعل انطباع المهنية، وإذا كنت تحمل بضع ورقات عندما تذهب إلى عميل لجمع المتطلبات واجهة المستخدم. كما يوفر قوالب الشبكة الأساسية لتصميم البرمجيات شعبية مثل الألعاب النارية، فلاش، فإن InDesign، المصور، فوتوشوب، برنامج Visio، وما إلى ذلك توفير "بداية لمدة عشر" لبدء العمل الخاص بك تصميم.
• مخطط : مخطط يوفر تصنيفها بوضوح ملفات CSS ليعيد، شبكات، أشكال، الطباعة، الطباعة، ملحقات للأزرار، علامات والعفاريت وما إلى ذلك كما تقدم الدعم لشركة آي إي باعتبارها منفصلة تشمل.
• SenCSs : وخلافا للالمذكورتين أعلاه، SenCSs (الحاسة وضوحا)، ليس لديها تعريفات CSS للتخطيط. انها لا تشمل الخطوط، الفوصل، وهوامش، والجداول، والقوائم، ورؤوس، blockquotes والأشكال وأكثر من ذلك.
• BlueTrip : مطالبتها الأصلية إلى الشهرة وكان ذلك، فإنه كان مزيجا من أفضل الميزات التي تقدمها الأطر الأخرى مثل غيرهم اولى الطباعة، الرحلة الأزرق ... من أين يحصل على اسمها. مجموعة من الخصائص ويشمل 24 عمود الشبكة، وأساليب الطباعة، وأساليب ORM، والطباعة، وأزرار الخ.
• YUI الشبكات : يوجه اليكم من شبكة مطوري Yahooo، ويدعم سائل العرض (100٪) وكذلك تخطيطات مسبقا تخطيطات عرض ثابت في 950px، 750px، 974px و، والقدرة على تخصيص بسهولة إلى أي رقم. كما ترون، ولها من الناحية الفنية فقط تخطيط مكونات. YUI كما قدمت HTML / CSS مجموعات لعناصر الصفحة الأخرى
• YAML (آخر على تخطيط متعدد العمود)
• Emastic

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

مع بلدي محدود مجموعة من المهارات مع أدوات مثل Photoshop والمصور، ويمكنني أن أعترف بصراحة أن المطور أنا أفضل من أنا مصمم. لكنها كانت خلفيتي مع الأساسية (جانب الخادم) مع تطوير جافا / PHP / COBOL، له تأثير إيجابي جدا على تطوير مهاراتي واجهة المستخدم. ما أعنيه هو، في حين خلق تصاميم بلدي، وكلما أفعل أي تصميم، أفكر كيف يمكن تصميم أفضل تحويلها إلى HTML-CSS وبينما يفعل HTML، CSS، أعطي فكرة عن تكنولوجيا الخلفية وتأكد بشكل معقول ويمكن أن أتش تي أم أل تنفيذها بسهولة في الحلقات XSL أو PHP قصاصات الخ.

على مدى سنوات، ونزح أنا وجها لوجه على التصاميم من قبل مصممي واجهة المستخدم الذي ربما متأكدا لديه أدنى فكرة عما HTML أو CSS هي. كل هذه السنين لقد تم التفكير بأنني سوف يطلبون أكثر من اللازم، وإذا كنت تتوقع فقط المصمم، الذي يحاول shov له "من المستحيل على رمز" تصميم أسفل رقبتي، ولكي نفهم قليلا ما سيتم تحويل تصميمه في. وسيساعد ذلك الحق؟

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

تشكر إليوت الأسهم جاي ... أشعر بالارتياح!

هنا بعض مقتطفات من مقالة Elliots .

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

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

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

نحصل على "الويب" تصاميم أرسلت في المصور، 300DPI، من المستحيل رمز، لا اتساق / قابليتها للاستخدام.
~ آمي ماهون

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

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

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

أمس، بعد أن واجه قضية أنا مع إعادة تعيين CSS في جوجل كروم ... فكرت في حفر أعمق قليلا في مجال الأوراق المستخدم نمط وكيل ...
وجدت هذا الجدول على القيم الافتراضية من CSS2.1 صفائح العضو نمط وكيل ... (للذين يجهلون ما هي "ورقة النمط المستخدم وكيل" هو اتباع ما هو ورقة نمط وكيل المستخدم (مواصفات) .

للحصول على قائمة كاملة من وكيل المستخدم CSS 2.1 التخلف المتراصة فوق هنا

أمس، مثل كل الآخرين "يوم الأرض خنزير"، كنت أعمل في بعض تخطيطات المغلق / tableless. كل يسير على ما يرام في IE 7، 3 فرنك فرنسي، وكروم، درج نقود فجأة، رأيت بعض الهوامش من الامم المتحدة وتجاهلها ينظر فقط في جوجل كروم. على الرغم من الغريب جدا وworring، وكان بعض العدد الجديد علة / أنني قد حان تزوجنا، كان هناك أخيرا بعض التوابل في عملي الدنيوية. حزين (ولكن لطيفة) حصلت على إصلاحه في غضون دقائق قليلة من لجنة التحقيق ...

في الأساس، بدا وكأنه جوجل كروم تجاهل لي CSS يعيد (هامش: 0px). انه في الواقع كان سببها المستخدم الأنماط وكيل (-بكت، الحشو البدء: 40px). لذا كان الحل لإعادة تعيين هذا النمط من خلال وضع الحشو: 0 العناصر الفاسقة.
وهناك طريقة جيدة لمنع هذه المشكلة من الحدوث إلى أي عنصر من استخدام بقية CSS العالمي على النحو التالي

* {هامش: 0؛ الحشو: 0؛}

ما هو ورقة نمط وكيل المستخدم (مواصفات)؟
أخذ المقتطف التالي من http://meiert.com/en/blog/20070922/user-agent-style-sheets/ صلة، اتبع لقراءة المزيد على أوراق النمط المستخدم وكيل

CSS 1 يقدم الفكرة بالقول إن كل عامل المستخدم (UA، غالبا ما يكون "متصفح ويب" أو "ويب عميل ') سيكون لها ورقة الأنماط الافتراضية التي تقدم الوثائق في فترة زمنية معقولة - ولكن يمكن القول الدنيوية - الطريقة. CSS 2 يقول ان وكلاء المستخدم المطابقة يجب تطبيق ورقة النمط الافتراضي (أو تتصرف كما لو فعلوا)، وذلك ورقة وكيل المستخدم النمط الافتراضي أن تقدم به عناصر من لغة وثيقة بطرق تلبية التوقعات عرض عام للغة الوثيقة؛ CSS 3 من المرجح أن يكون للعقل نفسه.

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

لا أنا جديد جدا على واجهة المستخدم (UI) تنمية ولا أنا محارب قديم، وكما قلت دائما وضع ذلك، وأنا تنسجم مع الملف من واجهة المستخدم المطورة أكثر من ذلك من مصمم، مع غير نادم. أوه حسنا! ما كنت أكتب عنه؟ ... لفترة من الوقت (يجب أن تكون في أي سنة لا أقل) الآن، بين الحين والآخر عندما لا نصل الى شيء من تصميم واجهة المستخدم (عندما مصمم المهنية قد ذهب في يوم عطلة)، وأنا غير قادر على وقف دائما أفكر ما إذا كان ينبغي تصميمي يكون complient بشكل صحيح أم لا (بصدق، لا يمكنني أن achive 100٪ الامتثال للمعايير، وإذا أردت أيضا). ثم أقول لنفسي، ما حماقة! ... وينبغي أن يكون التصميم بسيط، لطيف، ويبدو في المقام الأول صالحة للاستعمال، فإنه لا ينبغي أن يجعل الزوار يهرب ... أو ترتد (لتكون التقنية). ما هو نفع لطيفة تخطيط CSS tableless يكون للزائر، وهو مدرك لجميع التشعبي الذكية ورقة الأنماط المتتالية تحت الجلد من صفحة الويب الخاصة بك ... اللاشيء!
يجب أن تبدو لطيفة ويكون سهل الاستخدام ... ثم تأتي الاشياء جميع المعايير.

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

جيسون فرايد: "هناك الكثير من الطريق نتحدث عن CSS و XHTML والمعايير، وإمكانية الوصول وعدم التحدث بما فيه الكفاية عن الناس. المغلق والمعايير المتوافقة مع قانون ليست سوى أدوات - عليك أن تعرف ما لبناء مع هذه الأدوات. عظيم، وأنا سعيد واجهة المستخدم الخاص بك لا تستخدم الجداول. ماذا في ذلك؟ من يهتم إذا كان لا يزال لا ندع الناس في تحقيق أهدافهم. معايير الويب كبيرة، ولكن المعايير الناس الخاصة وتشمل إنجاز الأمور (وهذا أمر لا يزال من الصعب جدا القيام به على الانترنت).

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

الخروج جيسون فرايد في المقال كاملا

DISCALIMER: وهذا لا يعني أننا يجب أن لا يكلف نفسه عناء حول المعايير على الإطلاق. معايير جيدة لديها والالتزام بها قدر المستطاع. نحن لا نملك إلا أن نفهم أن تصميم واجهة المستخدم جيد لا يعني دائما 100٪ معايير Complience أو العكس بالعكس ....

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

1. اعتني المستخدمين. يمكن للمستخدمين ان تجعل كسر او موقعك. متأكدا جعلها تبدو وكأنها المستخدم idoit الكلي، جعله عاجزا تماما عن استخدام موقع الويب الخاص بك. ما هو سيء!

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

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

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

5. تناسق في التصميم الخاص بك والتفاعل مهم جدا. متأكدا تخلط بين المستخدم الخاص بك مع التفاعلات لا يمكن التنبؤ بها والأدوات.

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

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

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

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

10. الجلوس والتفكير في مثل المستخدم في بعض الأحيان.

هل رأيت animoto.com؟ حسنا! هذه ليست ميلادي، أنا حقا أحب ذلك! وأنها قبلة واجهة المستخدم ASS في الواقع

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

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

وقد اطلع ... http://animoto.com/ ... وتسجيل واللعب معها ... عندها فقط يمكن أن نقدر لكم عبقرية.

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

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

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

شهرة اريك!

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

لاختبار عدد من عناصر DOM في صفحة HTML الخاصة بك، فقط اكتب ما يلي في وحدة التحكم في الحرائق: document.getElementsByTagName('*').length

ليس هناك معيار تحديد لكيفية العديد من عناصر DOM هي كثيرة جدا. فحص صفحات أخرى مشابهة لها markup.Eg جيد. ياهو! الصفحة الرئيسية هي صفحة مشغول جدا وتحت لا يزال 700 عنصر (علامات HTML).

استخدم الحصول على لطلبات أجاكس

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

تجنب متزامن تطلب اجاكس

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

تحسين الصور

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

• تحويل GIF لبابوا نيو غينيا حيث ممكن، ومعرفة ما اذا كان هناك وفرا. في أكثر الأحيان، وهناك. لا تتردد في استخدام وبابوا نيو غينيا، والتي تحظى بدعم كامل من قبل معظم المتصفحات استخداما. نتوقع من قدرات الرسوم المتحركة 1 PNG يمكن أن تفعل ما يفعل GIF، بما في ذلك شفافية.

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

• إذا كنت تستخدم favicon.ico، ويبقيه الصغيرة، ويفضل أن يكون تحت 1K.

استخدم تحجيمها بشكل صحيح / تصغير هذه الصورة.

حاول دائما واستخدام الصور حجمها، أي لا تستخدم صورة أكبر مما تحتاج فقط لأنك يمكن أن يحدد العرض والارتفاع في HTML. إذا كنت في حاجة لعرض صورة X 100px 100px على الصفحة، ثم لا تستخدم مصغر صورة 200x200px.

استخدام صور التقدمي

متصفح ويب يجعل بالفعل صور تدريجيا. أن تفعل حتى أفضل، ببساطة حفظ GIF أو بابوا نيو غينيا الصور مع خيار "المتداخلة"، أو الصور JPEG مع خيار "التقدمية".

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