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

CSS نصيحة سريعة : كيفية منع حدوث "تراجع تعويم" في IE6

28 أكتوبر 2010 في الساعة 01:52 من قبل Koblentz تييري | في CSS 101 ، التنمية | 4 تعليقات

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

ما الذي يجعل IE 6 تبرز هي أن هذا المتصفح لا يدعم بشكل كامل width الممتلكات (أو height لهذه المسألة). وبالتالي ، فإنه يتيح نمو الحاويات لاستيعاب مضمونها. هذا هو النمو الذي يخلق هذا التراجع ، لأن مربع لا يمكن أن تندرج في مجالها المصممة.

عادة ، على الجناة من العناصر التي لا التفاف (الصور على سبيل المثال ، عناوين المواقع ، الخ) ، ولكن التصميم الخط (على سبيل المثال ، والمائل IE ) قد تكون مسؤولة أيضا.

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

الإصلاحات المعتاد :

word-wrap: break-word;

سلاسل التفاف عن طريق كسر في الحافة اليمنى من المربع.

wbr مع wbr:after {content:"\00200B"} للأوبرا

و wbr العنصر يمثل فرصة كسر الخط. إدراج wbr سلاسل ليالي طويلة داخل يسمح للمتصفح لإضافة خط فاصل إذا لزم الأمر.

overflow-x:hidden;

أي محتوى أوسع من الحاوية قطع على الحافة اليمنى من المربع المذكور.

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

عندما تفشل الإصلاحات المعروفة قصيرة

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

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

جعل IE 6 تتصرف مثل الكبار

خدعة لجعل IE 6 تتصرف مثل أي المتصفحات الحديثة هناك هو نمط مربع مع ​​هامش حق سلبي (زائد position:relative ).

يعيش تجريبي

من دون إصلاح

لقطة لأولئك الذين لا يرون في هذه الصفحة IE 6.

مع الإصلاح

.fixMe { margin-right:-100px; position:relative; }
.fixMe { margin-right:-100px; position:relative; } 

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

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

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

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

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

وتوسيع حصة : المرجعية مع متواجد حاليا | مراجعته ذلك! | reddit!

jQuery و YUI 3 : قصة اثنين من مكتبات جافا سكريبت

27 أكتوبر 2010 في الساعة 02:08 من قبل مارك RALL | في التنمية ، تطبيقات YUI | 5 تعليقات

كان لي الفرصة مؤخرا لبناء بلدي أمام أول تطبيق جافا سكريبت النهاية. ما يلي هو قصة قصيرة من اكتشاف والتطور الذي يأتي حول عند محاولة استخدام الأدوات التي ليست مناسبة لهذه المهمة في متناول اليد. فمن حساب المكتسبة من التعلم من خلال تطوير الواجهة الأمامية باستخدام نفس التطبيق مكتبتين مختلفة جدا ، jQuery و YUI 3. وقد تم تفاصيل العميل والمشروع أغفل عمدا.

نظرة عامة

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

ينطوي مفهوم لتطوير واحد من عرض ما يمكن أن يكون التطبيق المكتملة. تألفت من :

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

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

أول محاولة

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

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

• المتكاملة ، وتطوير التطبيقات القائمة على الإرث بما في ذلك دعم السمة وإدارة الصف.
• حل طويل المدى :
  • دعم المعايير وسهولة الوصول إليها.
  • تموله كبيرة معروفة ياهو ، والتنظيم
  • ترتبط أسماء محترمة مثل Crockford دوغلاس ، Zakas نيكولاس ، و ستويان ستيفانوف .
• الأداء الأمثل :
  • الأولي ملف بذور 7KB فقط.
  • كسول وحدات محملة على الطلب.
  • كندي التسليم.
• وثائق متنوعة وشاملة :
  • ياهو شبكة مطوري
  • YUI الوثائق API 3
  • YUI مسرح
  • مكتبة YUI
  • YUI المدونة
• ناضجة ، وتطور متناسقة بين الإصدارات.
• أدوات متكاملة في ضاغط YUI ، YUIDoc ، منشئ YUI ، و حدة التحكم .
• لا جافا سكريبت للتو ، إطارا CSS جدا.

يستغرق عامين

جلبت دمج YUI 3 العديد من الفوائد المباشرة وغير المباشرة للمشروع :

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

كانت النتيجة النهائية عميل سعيدة والمنتج النهائي مع أوقات تحميل الفرعي الثاني (تذكر أنه استغرق 8 ثوان لتحميل الدليل الأولي لمفهوم).

الدروس المستفادة

حدد الأداة المناسبة للحصول على الوظيفة

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

حاد منحنى التعلم

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

تحميل المحتوى فقط عند الحاجة إليها

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

التفاعل مع DOM أقل قدر ممكن

هذه النقطة لا تتصل مكتبة معينة المستخدمة. بواسطة التخزين المؤقت المطلوبة والاستفادة من عناصر DOM قوالب HTML أكثر من ذلك ، انخفضت بشكل كبير واجهة المستخدم يجعل الوقت. يمكن أن يكون مؤقتا العقد باستخدام Y.one () ، في حين يمكن التقاط عقدة باستخدام قوائم Y.all (). وكان أيضا Y.Node.create () مفيدة جدا في تحويل سلاسل نصية بكفاءة كبيرة من عناصر HTML DOM قبل الإدراج.

تعلم بالقدوة ، واستخدام كندي

في استخدام المكتبة YUI لتسليم كندي قررنا تسليم جميع الموجودات في المشروع عبر كندي. ربما كان هذا العامل القادم أكبر المساهمة في تحسين الأداء.

حانة ، دون هرج ومرج

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

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

دمج أفضل الممارسات في سير العمل الخاص

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

YUI التعلم على الوظيفة

رغم أن الجميع لديه اسلوب التعلم المختلفة ، واعتقدت حصة الموارد ما كنت لتعلم YUI مع هدف محدد في الاعتبار.

• مشاهدة المسرح YUI الحلقات ذات الصلة للحصول على لمحة عامة عن المكتبة أو وحدة تعلم محددة. ويمكنني أن أوصي بدءا من :
  • اريك ومرحبا بكم في Miraglia YUI 3
  • تود Kloots على سكر 3 YUI
  • مات سويني YUI 3 الأداء
  • لوقا سميث في تصحيح YUI 3
  • اسحق Schlueter على حل المشاكل مع YUI 3
  • اريك Ferraiuolo على تطبيق الويب التنمية مع YUI 3
  • تطورت الأحداث لوقا سميث
• تقرأ على YUI على ياهو! شبكة مطور . وأنا أحاول أن أقرأ قليلا كل اسبوع وتعلم المزيد في كل مرة أعيد قراءتها.
• قراءة API الوثائق. إذا لم تتمكن من العثور على مسرح YUI أو على شبكة مطوري ، وحفر في API. حتى أنه يدفع لقراءة رمز مباشرة.
• قراءة ونشر الأسئلة إلى منتدى حول YUILibrary.com .
• لعب الكثير والمتعة!

اختتام

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

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

وتوسيع حصة : المرجعية مع متواجد حاليا | مراجعته ذلك! | reddit!

YUIConf 2010 يبيع خارج ؛ الإعلان عن حدثين السهرة الخاصة

26 أكتوبر 2010 في 03:35 بواسطة جيني دونيلي | في التنمية ، YUI أحداث | تعليقات فاقيإ

YUIConf 2010 يباع خارجا! شكرا لكل الذين سجلوا -- نحن نتطلع الى رؤية كل منكم في نوفمبر تشرين الثاني. نحن الآن نضع اللمسات الاخيرة على جدول أعمالنا ، ولكن يمكنك أن تأخذ نظرة خاطفة على ما لدينا هنا في المحل : http://yuilibrary.com/yuiconf2010/schedule.php .

يسلط الضوء على ما يلي :

• مسار Node.js حيث يمكنك منحدر على جميع الأشياء مثيرة يحدث مع الخادم الجانب جافا سكريبت. لدينا Node.js المبدع ريان داهل تقديم والجلوس على لوحة حول مستقبل الهندسة الواجهة ، ونحن لدينا في YUI DAV الزجاج ، واحدة من أولى لإظهار عقدة المستندة إلى التحسين التدريجي باستخدام الجاهزه مكتبة المكونات (من YUI 3) ، وتظهر ما يبدو المستقبل.
• مسار YQL لتحصل على سرعة تصل إلى كيفية الاستفادة من YQL الوصول إلى البيانات من أي مكان على شبكة الإنترنت. سيقوم فريق YQL نفسه سيكون على يد لأقول لك عن عمل آخر لهم.
• دراسات الحالة التي تكشف عن مدى واقعية تنفيذ مشاريع YUI في بيئات الإنتاج. والمهندسين من فليكر وياهو! تكون في متناول اليد ، واريك Ferraiuolo -- الفائز بجائزة PayPalX لعمله الأخير -- سوف يكون هنا للحديث عن تلميح ويب ، وآخر له YUI 3 القائم على المشروع.
• العروض الثاقبة حول كيفية تقديم الخبرات المحمول / اللمس.
• الغوص العميق على وحدات YUI ، من الإكمال التلقائي لشبكات CSS لمساهمات معرض.

سيتم أرشفة جميع الجلسات على الفيديو والمتوفرة على مسرح YUI بعد وقت قصير من المؤتمر.

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

مناقشة YUIConf الفريق عام 2010 : "إن مستقبل الشبكة العالمية للتنمية" التي يديرها بن غالبريث وAlmaer ديون
8 نوفمبر 2010 ، 6:30 حتي 8:00

بالتسجيل لحضور حلقة نقاش في http://www.meetup.com/BayJax/calendar/15239592/ .

جلبت YUIConf معا هذا الفريق حاليا على استكشاف المستقبل القريب من الانضباط في وقت التغيير الكبير. وتشمل المشاركين من المقرر يري الين ، مؤسس ومهندس في الواجهة ميبو ؛ Crockford دوغلاس ، وجافا سكريبت مهندس في ياهو! ؛ Tantek سيليك ، تقني ، ومؤلف كتاب ؛ ريان داهل ، خالق Node.js ؛ جو هيويت من الفيسبوك ، خالق الحرائق واحدة من معظم التطبيقات المتنقلة التحميل من كل وقت (الفيسبوك لIOS) ، وتوماس شا ، YUI المؤسس في ياهو.

YUIConf 2010 رئيسية : "مستقبل المشروع" من قبل دوغلاس Crockford
10 نوفمبر 2010 ، 6:30 حتي 8:00

التوقيع على حضور رئيسي في http://www.meetup.com/BayJax/calendar/15239717/ .

في مجال تطوير البرمجيات ، ونحن نحلم العمارة. هذه هي القصة الحقيقية لهذه الرؤيا.

المقاعد محدودة لهذه المناسبات الخاصة ، لذا يجب التأكد من التوقيع قريبا!

صور CC :

• ديون Almaer : http://www.flickr.com/photos/seanosh/3306058997/
• Tantek سيليك : http://www.flickr.com/photos/thomashawk/409672754/
• ريان داهل : http://www.flickr.com/photos/blank22763/4089950858/
• الين يري : http://www.flickr.com/photos/drewm/3016944830/
• بن غالبريث : http://www.flickr.com/photos/seanosh/3306056383/

الصور المستخدمة من قبل إذن نوع :

• دوغلاس Crockford : http://www.flickr.com/photos/allenr/4482834276/
• دوغلاس Crockford : http://www.flickr.com/photos/allenr/4341338168/

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

وتوسيع حصة : المرجعية مع متواجد حاليا | مراجعته ذلك! | reddit!

أعلن YUI 2.8.2 -- هام تحديث الأمان لجميع مستخدمي YUI 2.4.0-2.8.1

25 أكتوبر 2010 في 11:34 بواسطة Miraglia اريك | في التنمية | 6 تعليقات

فريق YUI سراح YUI 2.8.2 اليوم. هذا الإصدار يصحح الخلل الأمن ذات الصلة التي تم تقديمها في بداية YUI فلاش 2 البنية التحتية مكون مع إصدار 2.4.0 YUI. يسمح هذا العيب المراد إنشاؤها يستغل حقن ضد جافا سكريبت المجالات التي تستضيف YUI المتضررة .swf الملفات. زيارة نشرة الأمن لYUI 2.8.2 للحصول على تفاصيل كاملة حول كيفية تحديد واستبدال الملفات المتأثرة .

إذا كان موقعك يستضيف 2 YUI التوزيع بين النسخة 2.4.0 و 2.8.1 يتضمن هذه الملفات ، ويتأثر بهذا الضعف.

إذا كان موقعك الأحمال YUI 2 من ياهو كندي ( yui.yahooapis.com ) أو من غوغل كندي ( ajax.googleapis.com لا استضافت) ، والملفات على المجال الخاص بك ، وأنت لا تتأثر. لا يتأثر YUI 3 في هذه المسألة.

يمكنك تحميل YUI 2.8.2 (والإصدارات مصححة من YUI 2.4.0-2.8.1) من الصفحة التنزيلات YUILibrary.com .

راجع نشرة الأمن للحصول على معلومات حول كيفية تحديد ما إذا كان يتأثر موقعك ، وكيفية معالجة هذه المشكلة ، وكيفية التحقق من الإصلاح.

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

وتوسيع حصة : المرجعية مع متواجد حاليا | مراجعته ذلك! | reddit!

في معرض YUI 3 : ملحقات SVG ، أنشاء لنجاح باهر SVG!

18 أكتوبر 2010 في 11:18 قبل هاردي فنسنت | في التنمية ، YUI 3 معرض | 2 تعليقات

مقدمة

SVG ( قابلة للتطوير الرسومات الموجهة ) على بناء جملة التعريفي للرسومات المتحركة التفاعلية ، 2D : الأشكال والصور والنصوص. SVG الدعم هو جزء من و 5 HTML مواصفات ويتم تنفيذه من قبل جميع SVG المتصفحات الرئيسية ، بما في ذلك برنامج Internet Explorer مايكروسوفت في الإصدار 9 .

و SVG - wow.org موقع على شبكة الإنترنت تعرض ما يمكن القيام به مع SVG اليوم. تم إنشاء العروض على هذا الموقع ل فتح SVG المؤتمر ، حيث SVG نجاح باهر! وقد تم تقليد دورات لعدة سنوات. وSVG واو! وقد بدأت الدورات جاكسون عميد ، ثم بالتعاون مع نفسي ومن ثم استمرار إريك دالستروم . وقد collorated اريك وأنا على الدورة ل 2009 و 2010 طبعات من المؤتمر.

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

سأبدأ مع نظرة عامة على SVG سريعة ومن ثم مناقشة نوع من العروض التي YUI بدعم و ملحقات لقد أضيف إلى معرض YUI 3 لجعلها تعمل مع SVG. (هذه الملحقات هي الآن حرة في استخدام بموجب شروط الترخيص للYUI BSD ).

نظرة عامة على SVG

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

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

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

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

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

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

SVG و HTML

مع HTML5 ، يمكن inlined SVG في مستندات HTML دون مزيد من اللغط. مستعرضات بدأت لدعم هذه الميزة (مثل فايرفوكس 4 ). في الوقت الحاضر ، وجميع المتصفحات الرئيسية دعم SVG inlined في XHTML ، والذي يوفر الوظيفة نفسها. SVG في XHTML يتطلب فقط تم تعريفها بشكل صحيح أن مساحات.

 <htmlxmlns="http://www.w3.org/1999/xhtml">
     <HEAD>
         ....
     </ رئيس>
     <BODY>
         <h1>تحليل سطري SVG </ H1>

         <SVG xmlns = "http://www.w3.org/2000/svg" الإصدار = "1.1"
          xmlns : xlink = "http://www.w3.org/1999/xlink"
          العرض = "100 ٪" ذروة = "100 ٪" معرف = "backgroundSVG">
             <--! محتوى SVG هنا -->
         </ SVG>
     </ BODY>
 </ HTML>
        

جميع نماذج التعليمات البرمجية في هذه الصفحة استخدام هذه الطريقة في رمز مصدر SVG في XHTML.

وSVG YUI

SVG يدعم الصور المتحركة التعريفي. على سبيل المثال ، يمكنك تحريك شعاع من <circle> عنصر من هذا القبيل :

 <circlecx="50" cy="100" r="40">
     <animateattributeName="r" values="40،60،20،40" dur="1.5s" />
 </ دائرة>
       

و <animate> هو استعار من علامة SMIL المواصفات و، جنبا إلى جنب مع عناصر الحركة الأخرى ، فإنه يوفر محرك قوي جدا للرسوم المتحركة SVG.

للأسف ، حتى وقت قريب ، كان دعم المتصفح للرسوم المتحركة SVG متفرق. تحسنت على مدى العامين الماضيين ، ولكن مايكروسوفت أوضحت أنها لن تدعم الرسوم المتحركة SVG التعريفي في IE 9.

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

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

موحية مع SVG YUI

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

الدورية النص والأشكال	تحوير الأشكال
مرونة طبلة يدق

التالي يوضح كيفية YUI يأتي في متناول اليد لتحريك الرسومات ومعالجتها ببساطة SVG.

موحية SVG transform السمة

جميع العناصر الرسومية SVG يملك transform السمة. هذه السمة يحدد 2D أفيني التحول على العناصر التي يمكن استخدامها لالنطاق ، تحرف ، تدوير أو ترجمة.

وSVG - wow.org ملحقات YUI للسماح SVG موحية transform سمة مثل هذا :

 فار أنيم = Y. جديدة تبث ({
     العقدة : '# circleA' ،
     من : {
         تحويل : {تكساس : 0 ، تاي : 0 ، SX : 2 ، سي : 2}
     } ،
     إلى : {
         تحويل : {تكساس : 20 ، تاي : 20 ، SX : 1 ، سي : 1}
     } ،
     transformTemplate : "ترجمة (# TX ، # تاي) النطاق (SX # # سي)" ،
     المدة : 1
 }) ؛
        

راجع تحويل الرسوم المتحركة الاختبارات.

عليك ملاحظة أن يتم تعريف القيم من حيث تحويل "مكونات" (مثل tx أو ty ) التي يتم الجمع بين لتشكيل قيمة باستخدام transformTemplate العثور على كائن الرسوم المتحركة التكوين.

القالب هو آلية مرنة لبناء القيم في حين تحويل مكونات منفصلة تجعل من السهل على حساب القيم المتحركة. هذا هو مثال نموذجي حيث الرسوم المتحركة YUI يسمح بمزيد من المرونة (وأكثر تعبيرا عن القوة) من عنصر SVG الرسوم المتحركة SMIL ( animateTransform ). من أجل خلق الرسوم المتحركة المذكورة أعلاه ، لكان قد تم الإعلان يعادل SMIL :

 <circle...>
     <animateTransform attributeName = "تحويل" نوع = "ترجمة"
                       من "0،0" ل=> / = "20،20" الدر = "1S" بدء = "scaleAnim.begin"
     <animateTransform ID = "scaleAnim" attributeName = "تحويل" نوع = "النطاق"
                       من "2،2" = إلى = "1،1" الدر = "1S" بدء = "إلى أجل غير مسمى"> /
 </ دائرة>
        

نلاحظ كيف المقتطف أعلاه يتطلب عدة animateTransform العناصر التي يجب أن تكون متزامنة : في begin هو السمة مجموعة من الرسوم المتحركة أول scaleAnim.begin لمزامنة بداية الرسوم المتحركة اثنين. وهناك ميزة جميلة للمحرك الرسوم المتحركة YUI هي التي يمكن أن تكون مشتركة في توقيت للرسوم المتحركة (أي بداية ونهاية ومدتها) لتطبيق خصائص عنصر متعددة.

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

موحية الهندسة

الهندسة الأساسية

موحية الهندسة SVG مع YUI بسيط جدا. على سبيل المثال ينعش بعد <rect> العنصر العرض والارتفاع والزاوية كعبرة :

 فار أنيم = Y. جديدة تبث ({
     العقدة : '# المستقيمات ،
     من : {
         العرض : 200 ،
         الطول : 100 ،
         RX : 5 ،
         راي : 5
     } ،
     إلى : {
         العرض : 300 ،
         الطول : 100 ،
         RX : 10 ،
         راي : 10 ؛
     } ،
     المدة : 2 ،
     تخفيف : Y.Easing.elasticOut
 }) ؛
        

انظر الشكل المتحركة الاختبارات.

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

و <path> 'ق d السمة

سمة واحدة هندسة قليلا خاصا : d السمة على <path> عنصر. و <path> يستخدم عنصر للهندسة معقدة بصورة تعسفية. A <path> يمكن أن تصف أي شكل. ل d سمة يصف الهندسة من حيث القطاعات التي يمكن أن تكون مسار خطوط ، أقواس ، أو تربيعية مكعب بيزيير منحنيات (هناك أوامر قليلة ، ولكنها جميعا الخريطة لبيزيير المنحنيات).

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

 فار أنيم = Y. جديدة تبث ({
     العقدة : "# pathA"
     من : {د : "0 0 0 M C 50 100 50 100 100 50 100 C 0 50 0 0 Z"} ،
     إلى : {د : "0 0 0 C 100 M 100 0 100 100 0 100 0 100 C 0 0 Z"} ،
     مدة 1S ،
     تخفيف : Y.Easing.bounceBack
 }) ؛
        

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

و يقتبس غاندي تجريبي يستخدم هذا الأسلوب من موحية d السمة على الأشكال يتحول الرقم غاندي.

سمات أخرى موحية SVG

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

 / / مقتطف SVG
 <تصفية..
     <feGaussianBlur ID = "blurFilter" stdDeviation = "10 10"...  />
 </ تصفية>

 / / جافا سكريبت الرسوم المتحركة
 فار أنيم = Y. جديدة تبث ({
     العقدة : '# blurFilter' ،
     من : {stdDeviation : [0 ، 20]} ،
     إلى : {stdDeviation : [0 ، 0]}
 }) ؛
        

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

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

موحية خصائص CSS

مثل HTML ، SVG عناصر لها سمات وخصائص CSS أيضا. SVG لديه بعض خصائص CSS معينة . يمكن لهذه الخصائص أن تكون متحركة ، وأحيانا لخلق تأثيرات مدهشة. على سبيل المثال ، و stroke-dashoffset يمكن استخدام الخاصية لمحاكاة رسم الشكل.

 / / مقتطف SVG
 <rectid="rectA" width="100" height="50" /> stroke-dasharray="300 300" stroke-dashoffset="300"

 / / سكريبت
 فار أنيم = Y. جديدة تبث ({
     العقدة : "# المستقيمات"
     إلى : {'السكتة الدماغية dashoffset' : 0} ،
     المدة : 0.25
 }) ؛
        

راجع السكتة الرسوم المتحركة الاختبارات.

و graffitis تجريبي يستخدم هذه التقنية (حتى ولو بدون YUI الرسوم المتحركة) وهكذا يفعل الكاميرا التجريبي (هذه المرة مع الحركة YUI).

YUI و SVG : تحت غطاء محرك السيارة

الموقع الشبكي SVG - wow.org يستخدم كل YUI 2 و 3 و YUI وقد SVG ملحقات محددة على حد سواء. المقطع التالي من هذه المقالة تركز على ملحقات YUI 3.

وهناك حاجة إلى التمديد إلى :

• YUI جعل العمل مع خصوصيات DOM SVG في
• مراعاة الفروق التنفيذ
• إضافة دعم لأنواع السمة الجديدة مثل يحول SVG
• إضافة توقيت إضافية للرسوم المتحركة وميزات مزامنة

المحاسبة عن خصوصيات DOM SVG

كما هو موضح سابقا ، يمكن أن تكون متحركة مع عناصر سمات SVG التعريفي مثل <animate> . نموذج لدعم SVG الرسوم المتحركة ، والقيم السمة SVG عقد كلا من الرسوم المتحركة والقيمة الأساسية. على سبيل المثال ، r السمة على <circle> العنصر هو SVGAnimatedLength تعرف على النحو التالي :

 {واجهة SVGAnimatedLength
   السمة للقراءة فقط SVGLength baseVal ؛
   السمة للقراءة فقط animVal SVGLength ؛
 } ؛

نتيجة لذلك ، حتى في التطبيقات التي لا تدعم الحركة التعريفي ، ونحن بحاجة للوصول إلى أسفل إلى baseVal لقراءة قيمة سمة في :

 دائرة فار = document.getElementById ('# myCircle') ؛
 فار = rValue circle.getAttribute ('R') baseVal.value.

وهناك حاجة إلى تمديد السماح للمحرك الرسوم المتحركة لحساب النموذج سمات SVG 'قيمة غير عادية. Thankfully, YUI 3 has a concept of animation behaviors . Behaviors are essentially attribute-specific hooks, and it was fairly easy to add support to handle SVG attribute values. For example, SVGAnimatedLength attributes are handled like so:

var lengthBehavior = {
    set: function (anim, att, from, to, elapsed, duration, fun) {
        // SVG specific handling
    },

    get: function (anim, attr) {
        // SVG specific handling
     }
 } ؛

// Handle <circle>'sr attribute
Y.Animate.behaviors.r = lengthBehavior;

There are more extensions for other SVG attributes values such as the transform attribute, color attribute values (like fill , stroke or stop-color ) and attributes such as stdDeviation mentioned earlier.

A few similar tweaks were required, for example in the Y.Node.prototype.toString method, again to account for SVG's baseVal (this time on the className node property). Another example is the default node setter in the Node module.

Accounting for browser differences

While the previous extensions are required because of specification differences between HTML and SVG, the following are required because of implementation variations between browsers.

SVG has a special category of attributes called presentation attributes . In implementations also supporting CSS styling (which all browsers support), these presentation attributes are really just another way to specify a CSS property with a low specificity . From the SVG specification:

The presentation attributes thus will participate in the CSS2 cascade as if they were replaced by corresponding CSS style rules placed at the start of the author style sheet with a specificity of zero. In general, this means that the presentation attributes have lower priority than other CSS style rules specified in author style sheets or 'style' attributes.

Unfortunately, some browsers do not implement the specification correctly and window.getComputedStyle does not always account for all possible sources for setting the SVG CSS properties: CSS selectors, style attribute and presentation attributes.

YUI came to the rescue thanks to the Node module which could be extended to hide these browser differences. The Y.DOM.CUSTOM_STYLES and the Y.Node.prototype.getComputedStyle could be extended to offer a uniform way to read SVG style properties.

Extending Y.DOM

YUI wraps all DOM access through the Node interface. As a result, some SVG specific DOM methods, such as getBBox (used to compute the bounds of an SVG element), are not accessible on the wrapped object.

To make things easier to program for SVG, extensions to the default Y.DOM module (which Node uses) were added to either expose SVG DOM features or add convenience methods, commonly needed when manipulating content:

• firstElement/lastElement/prevElement/nextElement/removeAllChildren (not SVG specific)
• getMatrix/setMatrix . Provides an easy way to manipulate transforms on SVG elements, something notoriously difficult with the standard SVG DOM
• getBBox/getViewportBBox provide simple ways to access bounding box in the element's coordinate system or in viewport space.
• loadContent . A utility to insert a DOM fragment described using a JavaScript object literal. على سبيل المثال :

  myNode.loadContent({
      tag: 'g',
      fill: 'red',
      stroke: 'none',
      children: [{
          tag: "rect",
          x: 10,
          y: 10,
          width: 200,
          height: 300
      }, {
          tag: 'circle',
          r: 10,
          cx: 105,
          cy: 155
      }, {
          tag: 'image',
          'xlink:href': 'images/photo.png',
          width: 200,
          height: '300px'
      }, prevSibling);
          

  is a shorthand for making various DOM calls (such as createElementNS , setAttributeNS and appendChild ) to create a g element and its children and inserting it before prevSibling under myNode . The utility deals with namespaces for attributes and elements.

Additions to the Animation engine for timing and synchronization

Many, if not most effects involving animation require multiple choreographed animation instances. Typically, several animations are required to create a desired effect, and the start or end of animations depend on each other, sometimes with a time offset: animations need to be synchronized.

For example, if you have a set of shapes which need to fade in one after the other, you will need to create a fade animation for each element and then chain their start time with a slight offset.

var chained = Y.all('#chained circle'),
    firstAnim, previousAnim;

chained.each(function (circle) {
    var anim = new Y.Animate({
        node: circle,
        from: {'fill': 'white'},
        to: {'fill': 'gray'},
        duration: 0.25
     }) ؛
    if (previousAnim !== undefined) {
        // Synchrnoize the start of anim to be 0.15 seconds after the begining
        // of the previous circle's animation (previousAnim).
        previousAnim.onBegin(anim, 0.15);
     } {آخر
        firstAnim = anim;
     }
    previousAnim = anim;
 }) ؛

// Start the first animation 1s after a click on any of the circles.
// Note that this is an extension to the default YUI run method which does not
// take a time offset.
chained.on('click', function () {
    firstAnim.run(1);
 }) ؛

See the time offsets tests.

The method onBegin makes it easy to synchronize the start of two animations, with an optional time offset. Actually, onBegin can also invoke a function with a time offset. Likewise, the onEnd extension makes it easy to synchronize with the end of an animation.

By default, YUI animations have events which provide a way to synchronize. The onBegin and onEnd methods express the synchronization more concisely (a similar example of conciseness is shown below).

In addition, it is sometime necessary to synchronize an animation with an event, again with a time offset. The beginOn and endOn extensions allow us to express that. على سبيل المثال :

anim.beginOn(Y.one('#button'), 'click', 0.5);

will start the animation 0.5s after the element with id 'button' was clicked. This is a short-hand for:

Y.one('#button').on('click', function () {
    setTimeout(500 /* ms */, function () {anim.run();});
 }) ؛

A final extension made to the animation class was the ability to make an animation object apply its first frame's state before it was actually started. This is often needed when creating animation effects involving multiple animations which start at different time offsets.

var anim = new Y.Animate({
    node: Y.one('#button'),
    from: {r: 30, 'fill-opacity': 0, color: 'crimson'},
    to: {r: 80, 'fill-opacity': 1, color: 'gold'},
    duration: 0.25
 }) ؛

// the following will set the desired state on the target object prior to
// actually starting the animation.
anim.applyStartFrame();
anim.run(2);

The picture shuffle demo uses animation offsets for the effect that spreads the stack of pictures or puts the pictures back in a stack.

اختتام

Working with SVG and YUI, and in particular YUI 3, has been a very enjoyable experience: a lot of the YUI functionality applies to SVG right out of the box and YUI's extensible architecture made it possible to work around occasional issues and to add desired functionality.

Of course, increased standard support for SVG in YUI would be helpful, in particular making YUI work with stand alone SVG documents and making the Node class wrap SVG elements without workarounds.

There are also a few enhancements that would be helpful. For example, it would help if animations could target multiple elements. Likewise, supporting multiple values (as in the <animate> SVG element for example) would be helpful to create more sophisticated effects.

The demos on svg-wow.org were written for YUI 3.1 and ported to 3.2 for the purpose of this blog. In 3.2, transitions were introduced which make use of native CSS transitions if available in the browser. It might be possible for the YUI animation engine to similarly leverage SMIL animation where available (Opera, Firefox and WebKit at the time of this writing) which should also yield performance improvements.

The SVG extensions on the svg-wow.org web site are available as a YUI 3 Gallery module for those who want to enjoy the fun of working with YUI and SVG.

مراجع

• SVG Wow!
• SVG Specification
• SVG Tutorial
• Adobe's SVG Zone (a little dated, but still has good examples)
• carto.net examples
• KevLinDev

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

وتوسيع حصة : المرجعية مع متواجد حاليا | مراجعته ذلك! | reddit!

In the Wild for October 15, 2010

October 15, 2010 at 10:03 am by Eric Miraglia | In In the Wild | 2 Comments

YUIConf 2010 is right around the corner , and we continue to have our heads down working on that event and the upcoming YUI 3.3.0 release. In the meantime, here's what we've noted in the community in the past few weeks. Let us know @yuilibrary (or in the comments below) what we missed!

• Andrew Wooldridge, “Learning YUI: Pt. 2 – Community, Logging, and the Console” : Andrew Wooldridge (@triptych) is back with part 2 of his new “Learning YUI” blog series. I particularly like (and agree with) his take on the YUI community: “In a word, community is really what makes YUI stand out to me as a javascript library. If you need help working with YUI, there are community forums , an IRC channel , as well as Open Hours that allow you to talk directly with YUI developers. I would recommend that you get connected early on in your learning experience, especially with the IRC channel because you will discover a helpful group of smart folks hang out there and are willing to answer any question, no matter how seemingly mundane. You also should follow yuilibrary on twitter as you will be tapped into the latest YUI news there.” Check out the full blog post for more . I covered part one in a previous “In the Wild” column . #
  
• Andrew Burgess's “Crash Course” on YUI 2 Grids on NetTuts : Andrew Burgess's “Crash Course” on YUI 2 Grids, which we first noted in May last year , has been picked up by NetTuts and is bringing a new wave of attention to what has historically been one of YUI's most popular projects. #
  
• Create a BlogRoll with Google Spreadsheets and YUI3 : Andrew Wooldridge (@triptych) continues his series of YUI 3-focused articles with a new entry that ties together YUI 3 and Google Docs. “I admit it: I was inspired by this article by Codeinfront.com. The idea of creating a snippet of code that anyone can share, update, and learn from is just extremely compelling and gratifying. So, I offer to you something that you may have never thought of. You can use Google Spreadsheets as a JSON data source. YUI3′s JSONP module talks very nicely to this JSON data source and allows you to essentially create sites that can be data driven and yet never require you to have a complicated PHP MyAdmin setup or MYSQL database. You can do it all via client-side technologies and some help from Google Spreadsheets. If you combine this with the Forms ability in G Spreadsheets, you could even create a cool report page based on some survey you create. Let's get down to code.” Get down to code with the full blog post here #
  
• Video Remixing Site Dragontape Using YUI 3 : Video remixing site Dragontape is making extensive use of YUI 3. Here's how the site's authors describe the project: “Dragontape is a webapp that enables you to create mixtapes of your favorite online videos, so you can watch them as a continuous show. The tapes you create are accessed through a single URL, so you can easily share with friends or embed them in a webpage. The source clips remain in their original locations, Dragontape simply remembers where to find them.” #
  
• Erik Eldridge, “Simple YUI 3 Module for Yahoo! Login” : YDN evangelist Erik Eldrige has written up a nice tutorial on his personal blog that shows you how to leverage YUI 3 and Yahoo!'s OpenID system simply and efficiently. Writes Erik: “Looking at the OpenID landing page on the YDN site might give the impression that logging users into a site with a Yahoo! ID is difficult. Given the following conditions, however, adding Yahoo! login to your site can be quite simple:
  1. Because we're only targeting Yahoo! accounts, we can preset the login location to https://open.login.yahooapis.com/openid/op/auth
  2. If we log users in via a popup, but manage everything via JavaScript on the parent page, we can skip validation of the response coming back from Yahoo!”
  You can find the full tutorial here . #
  
• Upstage, a New YUI 3-powered HTML5 Presentation System by Reid Burke : @Reid is just getting this project underway, but there's a lot to like already. Following in the footsteps of a series of standards-based presentation tools that have launched in the last few years, Upstage puts a YUI 3 twist on the genre. Code is on GitHub — download, fork, and have fun. ( Original source. ) #
  
• A Simple Twitter Widget with YUI 3 and YQL (by @codeinfront) : @codeinfront has posted a new tutorial on using YUI 3 and YQL in a Twitter mashup. “While in between projects I've been playing around with JavaScript dates including conversion to relative time. This then lead me to testing the function within a Twitter widget context. I ended up with a Twitter widget using YUI 3 and YQL. The code below explores a couple of interesting concepts…” Check out the blog post for full details . #
  
• “YUI, How Dare You Make Me Rethink…” : Michigan Techie writes that YUI 3 is designed to break bad habits and challenges him to find new, hopefully better coding patterns. “When you use YUI3 you have a YUI().use() and everything gets encapsulated within that bit of code. So if I were to just move the MyApp code into the YUI block I'm no longer able to access it from the page of content I want to run JS on. So this is good, no JS globals, but it's bad…not the way I've been doing things.” You can see MT's full epiphany here . #
  
• Jeez.eu on Building a Custom Search Engine with YUI : Jeez.eu's tutorial on building a custom search engine relies heavily on YUI 2 widgets and utilities. #
  
• Node.js Resource List from @codeinfront Includes Crockford, Dav Glass : Blogger Mark Rall (@codeinfront) has compiled a set of his favorite Node.js-related resources. Key among them are two recent YUI Theater talks from Douglas Crockford and Dav Glass. For his other favorites, head over to his blog . #
• ErisDS Has Updated Her Carousel Custom-navigation Example for 2.8.x : Northampton blogger ErisDS has updated her work on custom navigation for YUI 2 Carousel to support YUI 2.8.x. “Last year I published two parts of a three part tutorial (doh) on the YUI2 Carousel Widget which worked with YUI Carousel 2.7.0. Since that time, a new couple of new versions of the YUI2: Carousel widget have been released (2.8.0 and 2.8.1), and it seems my examples do not work with the updated code. This post covers the issues, the reasons why they occur and how to resolve them.” Check out the full post here . #
  
• Tweet of the Week : From @bartt : “Being able to use #YUI on both client & server is so nice. JavaScript + my favorite library on both sides of the fence == !context switch.” #
  

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

وتوسيع حصة : المرجعية مع متواجد حاليا | مراجعته ذلك! | reddit!

YUIConf 2010: Early-bird registration ends this week

October 7, 2010 at 9:03 am by Jenny Donnelly | In Development , YUI Events | 2 Comments

An awesome lineup is in place for YUIConf 2010 , which will be held at Yahoo!'s Sunnyvale, CA campus this November 8-10. Douglas Crockford will be back with a new talk entitled “Project Future”, and Dion Almaer and Ben Galbraith will be moderating a panel on the future of the discipline. We have a stellar lineup of speakers, including Christian Heilmann, Dav Glass, and Nicholas Zakas, taking the podium this year on topics spanning YQL, NodeJS, and YUI:

• An Introduction to YQL
• YQL + YUI: Building End-to-End Applications
• Building YQL Open Data Tables with YQL Execute
• Using (Not Abusing) YQL for Caching, Filtering and Collating Data
• NodeJS + YUI 3
• Using NodeJS and YUI 3 for Server or Browser Side View Rendering
• Avoiding Spaghetti Code with Server-Side JavaScript
• Understanding Progressive Enhancement with YUI: Write Less, Achieve More
• Internationalizing Applications Using YUI 3
• Editor: The Next Generation
• AutoComplete: Deep Space Nine
• The Journey from Idea to Functioning Widget in YUI 3
• Finger Tips: Lessons Learned From Building a Touch-Based Experience
• وأكثر من هذا بكثير!

Be sure to sign up this week to receive the early-bird rate of $35. After October 8, tickets cost $50.

For folks traveling from outside the Bay Area, we have made available Yahoo! rates at a couple nearby hotels. Check out http://yuilibrary.com/yuiconf2010/ for more details.

CC photo of Dion Almaer by seanosh on Flickr.

Update: The early-bird price was incorrect. Tickets cost $35 through October 8.

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

وتوسيع حصة : المرجعية مع متواجد حاليا | مراجعته ذلك! | reddit!