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

أعلن YUI 3.1.0

يسر فريق YUI أن تعلن الافراج عن YUI 3.1.0 .

ويبرز هذا البيان ما يلي:

• البنية الأساسية عنصر - إن البنية التحتية للYUI القطعة 3 هو الآن إلى حد كبير في المكان. وقد تركز Satyen ديساي في هذا العمل على مدى الأشهر القليلة الماضية، و على النهج الذي نوقش في YUICONF 2009 هو الآن أدرك تماما مثل قاعدة ، سمة ، البرنامج المساعد ، و القطعة وحدات في مجموعة البنية التحتية للمركز مكون GA متناول اليد. وقد وفرت Satyen 1 دليل المطور مفصلة للراغبين في تعلم المزيد حول البنية التحتية للعنصر.

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

  

• وقد تحسنت آدم مور محمل YUI 3 لدعم أفضل ل- التحسينات محمل 3 YUI معرض . كما من 3.1.0، يمكنك الآن تحميل أي الصور النمطية التي تم شحنها قبل 3.1.0 بدون تكوين إضافية ببساطة عن طريق الرجوع إلى الوحدة الخاصة بك في use() بيان.
• مدد آدم من قوة - YUI 2 في 3 use() إلى أبعد من ذلك مع YUI 2 في 3 مشروع . مع الافراج عن 3.1.0، يمكنك تضمين الآن YUI 2 وحدات مباشرة من حسابك use() بيان، وبذلك نسخة سندبوإكسد تماما من YUI 2 إلى 3 YUI مثيل. هذا العمل يدعم المطورين الذين يبذلون الانتقال إلى YUI 3، ولكن لا تزال تعتمد على بعض المكونات التي تعتبر فريدة من نوعها لYUI 2، بما في ذلك شعبية DataTable 2 YUI .
• فائدة قابل للفرز جديد - قابل للفرز هو أداة جديدة من الزجاج بضاف التي تعزز وإفلات لتنفيذ قوائم للفرز. ويقدم الدعم للقوائم واحدة أو قوائم متعددة والتي يمكن سحب العناصر من قائمة واحدة إلى أخرى.

  

• عملت البصرية مصمم جيف Conniff مع مهندس YUI لوك سميث على - العلاجات البصرية لالمتزلج المتزلج للمكون 3.1.0، والنتيجة التي كان سلسلة من العلاجات البديلة لالمتزلج البصرية. وقد استكملت لوقا أيضا المتزلج على الاستفادة من التحسينات التي طرأت على البنية التحتية العامة القطعة.

  

• وأضاف لوقا - جديد API لخلق الاصطناعية أحداث DOM Y.Event.define() طريقة لتجعل من السهل للمطورين لتعريف جديد أحداث DOM في النظام الإيكولوجي 3 YUI. استخدام هذا لملء الثغرات الموجودة في قائمة الأصلي الحدث DOM أو غير ذلك تسمية تفاعل المستخدم لحظات مشتركة، والاشتراك وإلغاء الاشتراك بعد ذلك كما تفعل مع أي حدث آخر.

كما هو الحال دائما، وقد وفرت YUI مدير برنامج Georgiann بوكيت 1 التغيير الشامل ل3.1.0 YUI إطلاق - تشير إلى أن وثيقة للحصول على معلومات مفصلة حول ما الذي تغير في جميع أنحاء العائلة 3 YUI.

ماذا بعد؟

بين الافراج عن 3.0.0 و 3.1.0 YUI، تم إضافة أكثر من 50 حرة ومفتوحة المصدر وحدات لل معرض 3 YUI . اليوم، كل ذلك محتوى يمكن الوصول إليك من أي مثيل 3.1.0 YUI . كما نبدأ في عملنا من أجل YUI 3.2.0، والمكتبة نفسها أن تكون أي شيء ولكن ثابت - في الوقت الراهن، YUI 3 ينمو بسرعة أكبر من المساهمات من المجتمع من عمل الفريق الأساسي، وهذه المساهمات يمكن الوصول إليها على نطاق غير مسبوق.

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

في هذه الأثناء، فإننا نتطلع إلى تعليقاتك على YUI 3.1.0. الانضمام الينا في منتديات YUILibrary.com وعلينا أن نعرف من خلال تعقب علة إذا كنت اكتشاف القضايا في الافراج عنهم.

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

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

صناعة المؤتمرات القادمة

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

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

المؤتمرات المهنية

ويب 2.0 معرض مدينة نيويورك 2010

الموعد النهائي للتقديم: 12 أبريل 2010
ويب 2.0 تقديم NYC اكسبو الصفحة
تاريخ المؤتمر: 18 - أكتوبر 21nd 2010
الموقع: نيويورك، مدينة نيويورك، الولايات المتحدة الأمريكية

EuroPython 2010

الموعد النهائي للتقديم: 30 أبريل 2010
EuroPython تقديم الصفحة
تاريخ المؤتمر: 19 - 22 يونيو 2010
الدولة: برمنغهام الكونسرفتوار، برمنغهام، المملكة المتحدة

Barcamps

• 3 أبريل - MobileCamp بوسطن
• 10 أبريل - BarCamp روتشستر
• 10 أبريل - BarCamp شارلوت
• 17-18 أبريل - BarCamp بوسطن
• 1 مايو - BarCamp ميسولا
• 25 سبتمبر - BarCamp جونزبورو

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

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

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

في معرض 3 YUI: البرنامج المساعد مات باركر تغيير الحجم

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

النتيجة: بلادي YUI تغيير حجم الصور 3 المساعد . مصدر متاح في GitHub ، و هنا مثال وظيفية .

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

لاستخدام تغيير الحجم، وتشمل التعليمات البرمجية في الصفحة الخاصة بك:

 <النصي

ذات مرة كنت قد حصلت على وحدة في الصفحة، مما يجعل من resizeable عنصر سهلا كما هو توصيله في:

 YUI (). استخدام ("معرض، تغيير الحجم"، وظيفة (ص) {
   Y.one ("elementId #") قابس (Y.Plugin.Resize)؛
 })؛

ويبدو أنه من المهم جدا لي أن التكوين وAPI من الإصدارات 3 YUI من المكونات التي توجد في YUI 2 يجب ان يكون مماثلا، على الأقل، أو بقدر ما يمكن أن يكون في إطار النهج 3 YUI. بحيث يمكنك استخدام نفس الكائنات التكوين مع هذا البرنامج المساعد كما هو الحال مع الإصدار 2 YUI، ولقد وفرت وسائل API نفسه. كتبت رمز البرنامج المساعد من الصفر، ولكن يتم نسخ CSS مباشرة من YUI 2، فقط تغيير بادئة من yui- إلى yui3- . وهذا من شأنه التقليل من منحنى التعلم لجعل الناس YUI 2 إلى 3 YUI التي تمر بمرحلة انتقالية.

إليك مثال على ذلك مع بعض الخيارات أكثر من ذلك، مرت ككائن كما الوسيطة الثانية إلى plug() :

 YUI (). استخدام ("معرض، تغيير الحجم"، وظيفة (ص) {

   Y.one ("elementId #")
    . قابس (Y.Plugin.Resize،
          {draggable: صحيح،
             نسبة: كاذبة،
             الطول: 150،
             الوكيل: صحيح،
             شبح: صحيح،
             تنشيط: صحيح،
             autoRatio: صحيح،
             مقابض: ["T"، "ب"، "L"، "ص"، "TL"، "آر"، "از"، "ر"]،
             hiddenHandles: كاذبة،
             تحوم: صحيح،
             knobHandles: صحيح،
             useShim: صحيح،
             الحالة: صحيح،
             / / هذا هو الجديد: محدد للعثور على العناصر التابعة داخل elementId #
             / / وجوب تغيير حجمها بما يتناسب مع المجمع.
             wrappedEls: "IMG"،
             / / ذلك هو هذا: يجب أن "عناق" المجمع عنصر ملفوفة؟
             / / هذا سوف يعمل فقط مع العناصر الملفوفة واحدة.
             hugWrappedEl: صحيح
              })؛
  })؛

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

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

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

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

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

أندرو Bialecki يفوز 3 YUI معرض المسابقة عام 2010، مع وحدة الآثار

تهنئة إلى أندرو Bialecki ( @ abialecki على تويتر )، الذي Scriptaculous مستوحاة من تأثيرات وحدة فاز المسابقة YUI معرض 3 2010 .

وأندرو، الذي يعيش في منطقة واشنطن العاصمة، سيحضر JSConf 2010 الشهر المقبل، وتذكرة سفر مجانية من ياهو! المطور الشبكة . (شكرا، ydn @ !)

والفائز: الآثار

مشروع أندرو يبني على الرسوم المتحركة YUI 3 عنصر، مشيرا إلى أن طبقة السكر مستوحاة من API Scriptaculous. فإن فكرة أن يكون على دراية (وترحيب) واحدة لأحد استخدامها لهذا النوع من بناء الجملة:

  . Y.one ("# main_demo") انتقال ({س: 300}) تتلاشى ()؛. 

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

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

يمكننا أن نرى gallery-effects تظهر في الكثير من use() تصريحات في المستقبل، وأنه كان واحدا من العوامل الحاسمة. مفيد، معبرة، وتوثيقها بشكل مقنع - في هذه الحالة، على تركيبة فائزة.

بفضل أندرو لتقديمها له. اطلع على كل المساهمات معرض أندرو على YUILibrary.com .

مشرف التي تستحق

جعل جودة وحدات نحن التحكيم في المهرجان هذا الاختيار صعبا - هناك الكثير من العمل للاهتمام في هذه المجموعة. نحن خص بها عدد قليل مقالات بارزة أخرى تستحق الثناء بصفة خاصة:

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

16 وحدات في 17 يوما

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

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

شكرا لكل من قدم وحدات. أندرو، والمتعة في JSConf!

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

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

أدا لافليس اليوم 2010: جولي لندن، ديانا ليو، هيلينا راجان، شويتا Hayatnagarkar، وبيتي تسو من ياهو!

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

جولي لندن

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

أحب هندسة الواجهة لأنني أحب أن تتحدى وأنا أحب أن حل الألغاز. وظيفتي هي أبدا مملة. المشهد يتحول باستمرار، وعلى التفوق لديك للحفاظ على التعلم.

يعمل في ياهو يحافظ الأنا بلدي في الاختيار. أنا أعمل مع الناس رائعة على موقع الذي يتم استخدامه من قبل الملايين من الناس.

ديانا ليو

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

ياهو توفر تدريبا مكثفا في مجال تكنولوجيات الواجهة، ولها أيضا على مستوى عال لرمز أن نكتب. ياهو يدفعنا إلى كتابة تعليمات برمجية للوصول. بالنسبة لي، هو مجزيا جدا أن نعرف أن المعوقين قادرون على الوصول إلى الميزات من ياهو! المالية لأنني كتابة التعليمات البرمجية التي تدعم التقنيات المساعدة.

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

هيلينا راجان

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

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

شويتا Hayatnagarkar

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

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

ياهو هو مكان رائع ليكون مهندس الواجهة. البنية التحتية والواجهة تتطور باستمرار البحوث الواجهة، ناهيك عن الملايين من المستخدمين لدينا، ويجعل النامية في ياهو 1 الأكثر إثارة للاهتمام، الخبرة في العمل الصعبة ومرضية.

بيتي تسو

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

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

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

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

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

أدا لافليس اليوم 2010: صدف Shahsahebi من ياهو! شبكة مطوري

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

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

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

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

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

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

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

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

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

في معرض 3 YUI: مدير جون لندال في الشكل

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

قبل التحقق من صحة هو مجرد جانب واحد من الأشكال، ولكن. دورة كاملة هو:

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

عندما يقترن YUI 3 IO ، وحدة YUI معرض 3 مدير نموذج يدعم هذه الدورة الكاملة. يمكنك ان تلعب مع وظيفة من جانب العميل هنا .

التهيئة

الخطوة الأولى، قبل ملء استمارة مع القيم الافتراضية، هو بطبيعة الحال القيام به أفضل من خلال تحديد القيم مباشرة في العلامات، وذلك لأن هذا يعمل حتى عندما يتم تشغيل جافا سكريبت الخروج. ومع ذلك، يمكنك أيضا تمرير خريطة من القيم الافتراضية، مرتبطا على أسماء عناصر النموذج، إلى نموذج البناء مدير. عند استدعاء prepareForm() ، فإنه يدمج القيم الافتراضية من DOM مع القيم الافتراضية التي تم تمريرها إلى المنشئ، مع المنشئ القيم أخذ الأسبقية. يتم حفظ النتيجة حتى يمكنك بسهولة إعادة تعيين إلى هذه القيم عن طريق الاتصال بالرقم populateForm() . يمكنك أيضا تعديل هذه الافتراضيات المخزنة: setDefaultValues() ، setDefaultValue() ، أو saveCurrentValuesAsDefault() . (لاحظ أن هذا يختلف من المستعرض الأم reset وظيفة، منذ أن يستخدم قيم المشفرة فقط في DOM. مدير نموذج يوفر clearForm() ومجمع ل reset .)

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

قبل التحقق من صحة

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

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

yiv-required

يجب أن تكون القيمة فارغة.

yiv-length:[x,y]

يجب أن تكون السلسلة في أحرف على الأقل x و أحرف على الأكثر ذ. يجب أن يتم تحديد واحد على الأقل من x و y.

yiv-integer:[x,y]

يجب أن تكون القيمة عدد صحيح، وقيمة يجب أن تكون على الأقل في معظم x و Y. x و y هما اختياري.

yiv-decimal:[x,y]

يجب أن تكون القيمة عشري، وقيمة يجب أن تكون على الأقل في معظم x و Y. لا يسمح للالدعاه. x و y هما اختياري.

على سبيل المثال، إذا يجب أن يتم تعبئة حقل في، وأنه لا يقبل إلا ما بين 6 و 10 حرفا، فإن فئة CSS يكون yiv-required yiv-length:[6,10] .

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

إذا كنت بحاجة إلى استخدام تعبير منتظم للتحقق من صحة حقل، تسجيله من خلال الدعوة setRegex() . عن أي شيء آخر، يمكنك إرفاق وظيفة إلى حقل من خلال الدعوة setFunction() . إذا كنت في حاجة لإجراء الاختبارات التي تشمل مجالات متعددة، يمكنك تجاوز postValidateForm() في لديك مثيل Y.FormManager .

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

عرض أخطاء

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

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

 <div class=" formmgr-row>
   ... عنصر التسمية ...
   <span class=" formmgr-message-text "> </ SPAN>
   ... العنصر شكل ملحوظ مع فئة CSS formmgr الميدان ...
 </ div> المصدر:

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

ولكن هذا هو مجرد تفضيل بلدي. You can arrange the DOM elements any way you want inside the container marked by formmgr-row , as long as somewhere inside is another container marked by formmgr-message-text , and the field itself is marked by formmgr-field .

Message Types

One important point is that displayMessage() requires a message type. The supported types are stored in Y.FormManager.status_order in order of precedence. The default is [ 'error', 'warn', 'success', 'info' ] , but you can modify this to suit your needs. The ordering is important because, if you call displayMessage() with a higher precedence type and the field is already displaying a message with a lower precedence, then the new message will replace the original message. Similarly, a lower precedence message will be ignored if a higher precedence message is already displayed. This allows you to toss messages at each field with abandon, secure in the knowledge that errors will override warnings.

When a message is displayed, the container marked with formmgr-row and the field marked with formmgr-field both get an extra CSS class: formmgr-has type , where type is the message type. This allows you to style the message, field, label, etc. in a different way for each message type. In addition, the fieldset containing the form field also gets the same class. This can be used to direct the user's attention when the form is large. (If several fields within a fieldset have different types of messages, the highest precedence type is set on the fieldset.)

رسائل

Form Manager includes a default set of error messages for all the validations that can be encoded in CSS. These strings are stored in Y.FormManager.Strings , so you can modify and/or localize them.

You can also specify custom messages for individual fields by calling setErrorMessages() .

Note that there is no default message for a regular expression validator, because anything generic like The value does not match the required pattern. is utterly meaningless to the user. If you do not set a message for the type regex before setting the regular expression itself, Form Manager will log an error to remind you.

Submitting the Form

Regardless of whether you submit the data synchronously (via form.submit() ) or asynchronously (via Y.io ), you will probably want to disable the form while the data is being processed. Form Manager automatically finds all buttons inside the <form> element. If you have additional buttons elsewhere on the page, you can register them by calling registerButton() . All known buttons will be disabled when you call disableForm() . (If you use XHR, call enableForm() after you receive the response from the server!)

If you submit the form synchronously, then you will serve the same page again if there are errors. In order to work without JavaScript, you should write the errors directly into the DOM, the same way that Form Manager does it.

If you submit via XHR, then you know that JavaScript is enabled, so you can use displayMessage() to highlight the values which the server rejected. Obviously, this requires that the response from the server include detailed error information!

As a final note, if the form is in an overlay, then you should only close the overlay if the server response with success ; ie, display errors in the overlay, but display a success message somewhere prominent on the main page.

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

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