שיפור Yui יישומים מבוססי עם אודיו

30 יוני 2009 בשעה 08:41 על ידי סקוט שילר | ב פיתוח | 4 תגובות

סקוט שילר Aboot המחבר: סקוט שילר ( @ שיל ) הוא מהנדס החזיתי בפליקר שהצטרפו Yahoo! בשנת 2005, יוצאי קנדה. SoundManager 2 הוא אחד שלו לצד פרויקטים אישיים. כמו DJ של Flickr העצמית המוצהרת תושב, הוא אפשר לראות אותו מנגן במסיבה מזדמנים Web 2.0 בין התעסקות עם זמן לשגות וידאו וצילום דברים לשיתוף באינטרנט. סקוט אתר ניסיוני DHTML מתעדכן באופן לא סדיר. במאמר זה, סקוט מראה לך כיצד להשתמש SoundManager לקשור אפקטים קוליים לפעולות המשתמש ספציפיים או אירועים Yui.

סאונד הוא אחד החושים העיקריים חלק מרכזי בחיי היומיום, אך הוא התעלם במידה רבה באינטרנט. מפתחי אינטרנט יודע כי כאשר מדובר ב-HTML, שמע לא קל כמו להוסיף לאתר אינטרנט כמו שצריך. למה זה? להלן כמה מחשבות על בעיות היסטוריות עם קול הטבעה, כמה רעיונות וכמה הדגמות של הטבעה ושליטה צליל Javascript עם Yui.

הדגמות

אם אתה אוהב אותי, אתה כנראה רוצה לראות כמה דברים כיפיים-up מול כי הקריאה היא לעבוד, לעבוד משעמם! ;) תרגיש חופשי לשחק עם הדגמות הראשון ולאחר מכן לקרוא את הפרטים.

היסטוריה קצרה של HTML ו "מולטימדיה"

האינטרנט הוא די טוב מצגת ויזואלית. קל ליצור, לעצב להטביע תמונות, טקסט, קישורים במסמכי HTML. מתוך פורמטי המדיה הנתמכים באופן מקורי היום ב-HTML 4, אודיו ווידאו - או ליתר דיוק, <audio> ו <video> - הם חסרים באופן בולט.

HTML 5 אמור להביא אודיו ווידאו הטבעה קרוב הפשטות של <img /> בעתיד הלא כל כך רחוק. בינתיים, יש לנו לנקוט לעקוף יצירתי כדי לקבל HTML-5-כמו אודיו / וידאו פונקציונליות על פני סולם של HTML משותף של היום 4-תמיכה בדפדפנים.

הבעיה (HTML 4) עם אודיו והטבעה

עבור אודיו באתרי האינטרנט היום, מפתחים לעתים קרובות להציג רשימה של קישורי HTML ישירות קבצי MP3. שיטה זו היא פשוטה, אוניברסלית מובנות לאינדקס של מנועי החיפוש, אך גורם לחוויית גלישה מבלבלים ולא עקביים כברירת מחדל.

משתמשים תתבקש בדרך כלל באמצעות לחצן העכבר הימני, "שמירה בשם" ולבסוף לפתוח את הקובץ משולחן העבודה שלהם, או לחץ על הקישור יש להוריד את הדפדפן שלהם, לפתוח את קובץ MP3. "לחץ" רגילים בדרך כלל נפתח דף חדש עם השחקן מוטבע או משיקה יישום חיצוני כמו QuickTime או Windows Media Player.

לא רק "עירום" קישורים MP3 עבודה נוספת ומבלבלת עבור המשתמש, השיטה של ​​הדפדפן הטיפול בהם הוא הסחת דעת ולוקח אותם מניסיונם של האתר שלך.

שימוש <object> / <embed> דרך אחרת הגנרית ישירות להטביע תוכן MP3 או אחרות, אבל שוב סובלת מבעיה של חוסר עקביות, היזם לא יודע מה עשוי להראות באזור זה של דף האינטרנט, נתון המשתמש יכול יש לך מערך של יישומים אשר עשויים לטעון על מנת להתמודד עם זה סוג הקובץ - במקרה זה, סביר QuickTime זהה או של Windows Media Player אשר יטפל הורדות ישירות יוצגו במקום, בדף שלך. שוב, לא פתרון נהדר.

יישומונים פלאש משמשים לעתים כפתרון להטבעת תוכן MP3, אבל UI ועורות נוטים להיות 100% מבוסס פלאש במקום HTML ו-CSS מבוססי ולכן קשה יותר עבור מפתחי אינטרנט כדי להתאים אישית ביותר. HTML 5 צריך לשנות את זה עם מבוססות תקנים, CSS ו-skinnable scriptable אודיו / וידאו אלמנטים.

בינתיים, כמה פתרונות יצירתיים שניתן להשתמש בהם כדי לקבל יותר "Web Developer ידידותי" יישומונים עבור אודיו.

יצירת קישורים MP3 "רק עבודה": Yui + SoundManager 2

כדי לקבל "בהדרגה משופרת" קישורים MP3s כי ישחק במקום שלחיצה עליו משהו חייב ליירט פעולה להוריד נורמלי של הדפדפן ולאחר מכן לטפל בבקשה, על ידי שילוב של Javascript ו-Flash כדי להתמודד עם טעינה לנגן תוכן MP3, זה יכול להיעשות ביעילות רבה.

בחיפוש אישי כדי לקבל לדפדפנים בקרת שמע למשחק DHTML בחזרה בשנת 2002, פיתחתי + JS פלאש אודיו API בשם SoundManager. לאחר מאז התפתח לכלול וידאו, SoundManager 2 מיישמת ומרחיב API קול מקורית של Flash וחושף אותו Javascript. התוצאה היא אודיו cross-browser/platform פונקציונליות תסריט שיכול לעזור לגשר על הפער עבור קול JS מונחה עד HTML 5 נתמך באופן נרחב.

על ידי שילוב SoundManager 2 עם Yui של DOM ו אירוע עזר, יש לך פתרון יעיל להטבעת ושליטה אודיו שיכולה בחן לבזות להוריד דפדפן או נגן מוטבעת.

דוגמה מעשית: קישורים MP3 הנתמכים

ההדגמה הבאה משתמשת Yui ו SoundManager 2 כדי לשפר את הקישורים MP3, מה שהופך אותם מוטבעות לשחק. שירות אירוע של Yui ליירט קליקים על קישורים המפנים קבצי MP3 ואז להשתמש ב-API SoundManager לטעון ולהפעיל את כתובת האתר הרלוונטיים לפני החזרה "שקר", ולמנוע מן הדפדפן טוען את הקישור. לחיצות עוקבות יהיה לעבור לשחק / מדינה הפסקה.

במקרה Javascript / פלאש אינם נוכחים או אם משהו אחר משתבש, הדפדפן פשוט נופלים דרך לטעון את הקישור MP3 כרגיל.

הוספת שמע UI שלך

תופעות Javascript מבוססי אנימציה, המעבר והתנועה להוסיף נזילות לעצב ממשק אינטרנט הופכים נפוצים יותר. בזריזות, להחיל אודיו יכולים להשלים ולשפר עוד יותר את ממשק המשתמש, מה שהופך את החוויה למשמעותית יותר.

ביישומים מסוימים, צליל בצורה של משוב UI יכול להיות מתאים מועיל חוויית המשתמש. אפקטים קוליים נפוצים מבוסס פלאש אתרים מבוססי אינטרנט משחקים, אודיו המשחקים שולחן העבודה הוא בדרך כלל חלק מרכזי לספר את הסיפור.

.. אבל אל Over-Do It

חשוב לדעת מתי להפסיק. נזכיר אנימציה "האתר בבנייה". GIFs? מה דעתך על תג למצמץ? טקסט Marquee? יש דברים שעדיף לא לבד. לא כל דף HTML חייב לזוז, למצמץ שקופיות, פלאש להיות רועש באותו הזמן, אפילו "כיף" מוחל הטובות ביותר מתינות. משתמשים מעצבן שלך עם המוזיקה אוטומטי או רעש יכול לשחק במהירות להוביל לנטישה של האתר שלך.

יש כנראה סיבה טובה לכך רכיבי HTML סטנדרטיים כגון בקרים וכדומה אין אפקטים קוליים או הודעות הקשורים בהם. אולי "שתיקה שווה זהב", וזה הטוב ביותר באינטרנט להיות מקום שקט כברירת מחדל, כדי לא להיות מעצבן וגם מפריע.

ככל חריג אחד ראוי לציון את הנושא "שקט האינטרנט", Internet Explorer בדרך כלל משמיע צליל "קליק" כאשר דף ניווט מתרחשת, ככל הנראה כדי ליידע את המשתמש כי הפעולה החלה. זו הפכה להיות מושתק יותר בתקופה האחרונה, אבל עדיין קיים ועדיין נראה לעצבן כמה משתמשים עד היום.

דוגמה "כיף": DOM רועשות

למרות הטענות על שתיקה, להלן דוגמה של מה זה יכול להיות כמו להיות "רועש" אלמנטים בטופס, לחצנים אלמנטים DOM אשר מספקים משוב נשמע כמו שהם בשימוש. החידוש הוא בהחלט להתפוגג מהר, אבל זה מוסיף אלמנט של כיף ילדותי אל ממשק המשתמש.

מבט קדימה: HTML 5

<audio> Native ותמיכה <video> יהיה אומר שזה יהיה הרבה יותר קל להטמיע ולשלוט יותר פורמטים של מדיה בתוך הדפדפן מבלי להסתמך על צד שלישי plugins. יתר על כן, נרחב Javascript API לעודד למפתחים ליצור חוויות יותר ויותר חדשניים.

מצא את שיחות: Bloglines | technorati

שתף להרחיב: הפוך עם del.icio.us | digg זה! | reddit!

בטבע במשך 29 יוני 2009

29 יוני 2009 בשעה 09:07 על ידי אריק Miraglia | בשנת בטבע | 3 תגובות

החדשות הגדולות מהצוות Yui בשבוע שעבר על שחרורו של Yui 3.0.0 בטא 1 , נע Yui 3 צעד אחד קרוב יותר חשוב GA. להלן כמה חדשות השני מגיע מהקהילה Yui בשבועות האחרונים. כמו תמיד, אנא השתמש בסעיף ההערות כדי שנדע מה פספסנו.

מצא את שיחות: Bloglines | technorati

שתף להרחיב: הפוך עם del.icio.us | digg זה! | reddit!

Yui 3.0.0 בטא 1 זמין להורדה

24 יוני 2009 בשעה 02:35 על ידי אריק Miraglia | ב פיתוח | 19 תגובות

Yui 3.0.0 בטא 1 עכשיו היא זמינה להורדה YUILibrary.com .

מהדורה זו לוקחת Yui 3 מתוך בשלב התצוגה המקדימה שלו ומביא-API שלה למצב כמעט סופי. עבור אלה מתוך כוונה ליישם Yui 3, 1 3.0.0 גירסת ביטא הוא מקום טוב להתחיל את המעבר. אם אתה כבר עובד עם שחרורו המקדימה האחרונה, ג'ורג' Puckett סיפקה מקיף 3.0.0 בטא 1 changelog כדי להדריך אותך. אנו מצפים לשמוע את המשוב שלך כמו שאתה מתחיל לעבוד עם 3.0.0 בטא 1, ואנחנו נעבוד קשה כדי לטפל כי משוב כפי שאנו מתכוננים לשחרר GA בחודשים הקרובים.

בילינו הרבה זמן במחזור הזה לשחרר זיקוק האלמנטים המרכזיים של Yui 3 - Yui , צומת , ואת האירוע - כדי להבטיח שיש לנו את הזכות API הולך קדימה. הביצועים השתפרו, ואנחנו מעודן המודול שלנו / מבנה submodule. במקרים מסוימים הוספנו תכונות חדשות משמעותיות, כולל תמיכה עבור משלחת אירוע מהותי בחבילה אירוע, עם זאת, הדגש הוא על העברת ספריית בסיס איכות הייצור.

מספר Yui רכיבים 2.x לעשות Yui 3 הבכורה שלהם במהדורה זו:

  1. Datasource : נתונים של Yui שכבת הפשטה מספקת ממשק סטנדרטי לתוך ערכות נתונים, ללא קשר למוצאו של נתונים (מקומית, XHR, XSS וכו ') בפורמט (JSON, XML, CSV, וכו');
  2. ImageLoader : ImageLoader מאפשר לך לדחות את טעינה של תמונות שאינן ב viewport כאשר הדף צבעים, השימוש ברוחב הפס ויסות ושיפור ביצועים;
  3. היסטוריה : המרכיב היסטוריה נותן לך שליטה על מקש ה-Back של לדפדפן בהקשר של יישום בודד דף אינטרנט;
  4. Stylesheet : stylesheet מקלה ליצור ולשנות כללי CSS על לטוס, ומאפשר לך דינמי רכיבי הדף עם סגנון צובעת מחדש פחות.

במסגרת האריזה פרטנית יותר codeline החדש, יצרנו נפרד Yui 3 מודולים של פונקציונליות הבית כי Yui 2 היה יחד עם רכיבים אחרים. מטמון , סוג הנתונים ואת DataSchema הבכורה במהדורה זו, כל אחד מהם היה אמור להיות חלק Datasource.

הכרת Yui 3

הדרך הטובה ביותר להתחיל עם Yui 3 הוא לצלול אל תוך תיעוד ו דוגמאות - בעיקר דוגמאות הליבה Yui , צומת ועל אירוע רכיבים.

בנוסף, אנו ממליצים להקדיש קצת זמן Satyen דסאי, אשר טק לדבר על מטרות העיצוב Yui של 3 ואדריכלות מספק סקירה מצויינת של codeline החדש. הווידאו מוטבע להלן; גרסה HD, יחד עם תעתיק, זמין באתר תיאטרון Yui .


Satyen דסאי: "Yui 3: מטרות לעיצוב ואדריכלות" @ Yahoo! וידאו

רשתות ה-CSS ו Yui 3

אלה מכם להשתמש ב-CSS רכיבים Yui עשוי להבחין כי הסרנו הפניות Yui CSS רשתות של תיעוד 3.0.0 בטא 1, למרות רשתות נשאר נוכח להוריד את (וגם, כמובן, אתה יכול להמשיך להשתמש Yui 2.7 גרסה 0.0 של רשתות ).

אנחנו כבר מיושן יישום רשתות אשר נכלל משחרר המקדימה, ואנו מצפים משמעותית להנדס מחדש רכיב זה לפני reintroducing אותו כחלק Yui 3.

מפת הדרכים

3.0.0 1 הביתא מהווה ציון דרך חשוב עבור Yui. בנקודה זו, אנו מעודדים כל מיישמים Yui להשתמש Yui 3 עבור פרויקטים חדשים, בעיקר בפרויקטים שאינם עושים שימוש כבד של יישומונים.

תשומת הלב שלנו עכשיו פונה להביא Yui 3 למעמד GA. אנו מצפים שזה יקרה ב Q3, עת את הרכיבים הבאים יהיו לדרגת GA:

  • Core: Yui, צומת, אירוע
  • בסיס רכיב:, תכונה הבסיס, Plugin
  • כלי עזר:, אנימציה קוקי, גרור ושחרר, קבל, היסטוריה, ImageLoader, IO, JSON, תור, stylesheet
  • CSS: איפוס הבסיס, גופנים

לאחר GA 3.0.0, המהדורה העיקרית הבאה יהיה 3.1.0, מתוכננת כיום Q4. שחרור 3.1.0 תביא את הבסיס יישומון GA, כולל את המרכיבים הבאים:

  • יישומון יסוד: הרחבות ו יישומון יישומון
  • כלי עזר: Datasource, DataSchema, סוג הנתונים, מטמון

במהלך מחזור 3.1.0 שחרור, נצטרך גם להתחיל להציג ווידג'טים ספציפיים בנויה על codeline Yui 3. שים לב, ווידג'ט, הרחבות שלה, ואת יישומונים מדגם משלוח עם 3.0.0 בטא 1 צפויים להתפתח באופן משמעותי בחודשים הקרובים, כאשר אנו מתחילים להתמקד יותר תשומת לב על החלק הזה של הספרייה.

לפרטים מלאים על מפת הדרכים, עיין 3.x Yui מפת הדרכים על YUILibrary.com . בדף זה הזמן הנוכחי עם המידע העדכני ביותר על התוכניות שלנו ואת ההתקדמות. 3.x Yui לוח המחוונים הוא גם משאב שימושי עבור אלה שרוצים לעקוב אחר ההתקדמות שלנו לעבר מרכזי Yui 3 משחרר.

מצא את שיחות: Bloglines | technorati

שתף להרחיב: הפוך עם del.icio.us | digg זה! | reddit!

פלאש SOL: נתונים מתמיד עם SharedObjects מקומי

23 יוני 2009 בשעה 01:05 על ידי אלאריך קול | ב פיתוח | 5 תגובות
אלאריך קול, Yahoo! מהנדס Flash Platform

אודות המחבר: אלאריך קול עובדת פלאש מאז כניסתו של ActionScript וכיום הוא מפתח בנבחרת Flash הפלטפורמה של יאהו. אפשר לומר שהוא גדל עם השפה. בטח, הוא הניח את ידו על סרטים עצמאיים . כן, הוא כתב שאף אחד ספר . אבל טקס יום חול שלו עדיין מרמה על עם פלאש.

כאשר הוא לא כרע על המחשב, אתה עלול למצוא אותו רכיבה בלמים המיסיון.

אני כבר עובד עם מאט סניידר של Mint.com לפתח שירות חדש לאחסון מקומי Yui . השירות יהיה להשתמש במערכת אחסון מדורגים לגלות את הדרך הטובה ביותר כדי לאחסן מידע באמצעות הדפדפן, המאפשר מפתח כדי לאחסן נתונים בצורה יעילה יותר מאשר עוגיה דפדפן טיפוסי - ועל כמויות גדולות יותר. אחד המנגנונים אחסון מעסיקה את נגן הפלאש של Adobe , וזה במקרה לשימוש הייתה המוקד של העבודה האחרונה שלי.

פלאש מובנה במערכת האחסון מתמשך בשם SharedObjects , אשר יכול להיחשב "סופר עוגיות", המאפשר מפתח לחנות, כברירת מחדל, 100KB - או יותר, אם המשתמש מאפשר. אחד היתרונות של SharedObjects, מלבד היכולת שלהם, היא שהם יכולים לאחסן ActionScript סוגי הליבה, כיתות שלמות אישית אפילו, בפורמט בינארי על הכונן הקשיח של המשתמש. SharedObjects להשתמש תבנית הודעה ActionScript (AMF), מה שהופך אותם יעיל וקומפקטי.

SharedObjects אלה לא מוצפנים, ולכן בעוד קשים לקריאה, הם לא מה שאתם מכנים אחסון מאובטח. לא היינו ממליצים לאחסן נתונים חשובים כגון שמות משתמש, סיסמאות, נתונים או פרטיים אחרים באמצעות SharedObject אלא אם שתיישם את מנגנון ההצפנה שלך. כמו כן, SharedObjects שונים עוגיה בדרכים יותר קיבולת - SharedObjects הם בדרך כלל לא קשור לדפדפן מסוים אלא מאוחסנים באופן עצמאי.

הבדלים אלו של מערכת אחסון פלאש לספק מספר יתרונות על היזם ועל המשתמש הסופי. עם זאת, בעוד נוח מאוד, הם יכולים גם להטעות את המשתמש הממוצע, רבים להיות מודעים לכך נתונים כאלה אפילו קיים במחשב שלהם. למרות מאמצים רבים ננקטו כדי לספק שקיפות ושליטה על המידע הפרטי למשתמשים באמצעות הדפדפן שלהם (Firefox ו-Safari בפרט במתן סט נחמד של כלים כדי להציג, לערוך ולהסיר עוגיות באתרים שונים), מערכת אחסון פלאש, בשל אל הטבע תוסף שלה, מאחסן מידע במיקום נפרד. משמעות הדבר היא כי ניקוי עוגיות הדפדפן שלך אינו ברור SharedObjects אלה.

אם אתה מעוניין צפייה אלה פיסות של אחסון במחשב שלך, אתה יכול לבדוק במקומות הבאים:

לינוקס: 

  / .macromedia / Flash_Player /

Mac: 

  / Library / העדפות / Macromedia / Flash Player /

חלונות: 

  / Application Data / Macromedia / Flash Player /

SharedObjects מאוחסנים בדרך כלל במקומות אלה תחת בתיקיות נפרדות, בספריות עם שמות תיאוריים כגון 8GKWKDQM ו 227MDWL4 . תחת תיקיות כאלה המשנה המתאימים לתחום שבו SharedObject באו.

הקבצים בפועל יש *.sol הרחבה, וייתכנו יותר מפעם אחת עבור כל תחום. למשל, מצאתי את שלושת הקבצים SharedObject נפרד במחשב שלי תחת התיקיה youtube.com. הם לא קריא האדם, כפי שהם מאוחסנים בינארי.

כאשר פיתוח שירות זה אחסון, אני רוצה להיות מסוגל לראות את הנתונים בפועל מאוחסן בצורה הגלם שלה - אבל לא היה לי את הזמן כדי לנתח את כל זה באמצעות ByteArray, לכן חיפשתי כלי שיעשה את העבודה. מצאתי יישום AIR שימושי נקרא מינרווה , אשר יכול לפתוח *.sol קובץ ולהציג מידע שלה. בעת כתיבת שורות אלה, הגרסה הנוכחית אינה מאפשרת עריכת הערכים המאוחסנים בפועל, אך ייתכנו כמה יישומים אחרים שם בחוץ, כי לא מצאתי.

תמונת מסך של יישום מינרבה

אם אתה רוצה להסיר חלק או את כל אלה "עוגיות Flash", אתה יכול פשוט למחוק את הקבצים או ספריות לפי הצורך. שים לב, עם זאת, חלק מהאתרים עושים שימוש נרחב SharedObjects, כך הסרתם עלולה לגרום להתנהגות בלתי צפויה. מוסדות פיננסיים בפרט לנצל אותם כדי לסייע לביטחונה של האתרים שלהם. אז לוודא שאתה יודע מה אתה עושה, או ליצור גיבוי לפני שעושה שמות.

חלופה גלישה באמצעות ספריות היא להשתמש בהגדרות של Adobe מנהל . זהו כלי מבוסס פלאש עם הרשאות מיוחדות שיאפשרו לך להציג מידע אודות אחסון במחשב שלך, להסיר חלק או את כל החנויות, ולהגדיר הגבלות על אחסון בעתיד.

אז, בפעם הבאה שאתה רוצה שולחן נקי של הדפדפן שלך, זכור כי ייתכנו כמה מידע נוסף אורב במחשב שלך כי הדפדפן לא יכול להגיע.

מצא את שיחות: Bloglines | technorati

שתף להרחיב: הפוך עם del.icio.us | digg זה! | reddit!

צימוד Yui ו YQL לבנות יישומונים Dynamic

17 יוני 2009 בשעה 11:14 על ידי יונתן לבלנק | ב פיתוח | 14 תגובות

Yahoo! Developer Network מטיף יונתן לבלנק אודות המחבר: יונתן לבלנק (האתר: jcleblanc ) עובד עם קבוצת שילוב שותף ב -Yahoo! Developer Network בתור מטיף בכיר מהנדס תוכנה / טכנולוגיה. התמקדות ביחסים שותף והדרכה, כמו גם אינטגרציה מפתח חיצוני, יונתן עובד עם ומקדם טכנולוגיות מתפתחות כדי לסייע באימוץ ושימוש בטכניקות חדשות ההתפתחות החברתית. כמהנדס תוכנה, יונתן עובד בהרחבה פיתוח אינטראקציה חברתית באינטרנט, פיתוח שיטות חדשות לקישור רשתות חברתיות להסיע את האידיאל של האינטרנט פתוח. לפני יאהו, עבד יונתן בתוך הייצור הן בתקשורת מוצר פנטזיה צוותי פיתוח ב CBSSports.com, שם פיתח על מוצרים כגון עטורת הפרסים של האמי טירוף לצעוד על נגן וידאו לפי דרישה. נולד וגדל בקנדה, סיים ג'ונתן מן אלגונקווין במכללה לאמנויות וטכנולוגיה יישומית עם תואר במדעי המחשב וכיום מתגוררת בדבלין, קליפורניה עם אשתו.

Yui יש רשימה עשירה להפליא של מניפולציה של נתונים ושירותים UI בספרייה שלו, אבל לבוא עם נתונים עשיר לא פחות מעניין הוא בדרך כלל האחריות שלך לפועל. באותה מידה, YQL יש להביא נתונים עשיר ויכולת אינטראקציה, אך היא חסרה כלי ויזואליזציה של Yui. אם ניקח את הדמיית ותכונות שליטה Yui צימוד אותם עם צינור את הנתונים הגולמיים של YQL, אנו יכולים לבנות עשיר להפליא, יישומונים אינטראקטיביים ללא צורך ליצור כל אחד חזותיים או נתונים מנגנוני אחסון עצמנו.

אני אתן לך סיור של שני יישומונים בנוי עם Yui ו YQL בפוסט זה. אחת מציג תוכן זמין לציבור ואת בונה אחרים על יישומון כי המקורי עם מרכיב PHP בצד השרת כדי להציג נתונים על ידי המשתמש הפרטי לאימות עם OAuth.

גישה לנתונים אישי

שימוש Yui קבל השירות , אנו מסוגלים לבצע פניות הציבור YQL כתובת שאילתה ללא צורך את הכאב של התמודדות עם סוגיית מדיניות מאותו מוצא שבדרך כלל מונע מאיתנו לעשות XHR מבוססי בקשות לשרת שאינו על תחום זהה לבקשה מקוריים. להלן דוגמת קוד קטן אשר מציג איך היית קורא YQL באמצעות Yui קבלת השירות : 
 <script type="text/javascript">
 var getYQLData הפונקציה = (שאילתה) {
     / / להכין את ה-URL עבור Yui GET בקשה:
     yqlPublicQueryURL var = "http://query.yahooapis.com/v1/yql?";
     var sURL = yqlPublicQueryURL + "q =" + שאילתה
         + "& = פורמט JSON & callback = yqlWidget.getYQLDataCallback";
        
     / / לעשות GET בקשה YQL עם השאילתה המסופק
     transactionObj var = YAHOO.util.Get.script (sURL, {
         onSuccess: onYQLReqSuccess,
         onFailure: onYQLReqFailure,
         היקף: זו
     });

     לחזור transactionObj;
 }
 </ Script>

כתובת האתר שאילתה ( sURL ) הוא מורכב מחלקים שונים כדי לפצות את הבקשה. yqlPublicQueryURL המשתנה מכיל את URI הציבור להכנת בקשות YQL. ישנם גם שלושה פרמטרים שאילתה שאנו עוברים יחד לאורי זה. q פרמטר היא שאילתה YQL כי אנו משתמשים לבקשתנו (למשל select * from flickr.photos.search where text="YDN" ), format הוא פורמט אנחנו רוצים להחזיר (JSON או XML) של הבקשה, ואם אנחנו רוצה לעטוף JSON חזרו הנתונים פונקציה (a la JSONP ) אנו יכולים להגדיר פונקציה התקשרות באמצעות callback פרמטר. כאשר פונקציה זו מפעילה את השירות קבל יגרום בקשה query.yahooapis.com עם שאילתה שצוין. על ההצלחה, מסר באגים יוצג onSuccess התקשרות עבור השירות קבל אז התקשרות מוגדר בשאילתה YQL ייקרא לנתח את התוצאות חזרו JSON.

הגדרת זה יישומון באתר שלך או בבלוג הוא פשוט כמו להוריד את הקוד מ js-yql-display תיקייה github ב http://github.com/jonleblanc/yql-utilities/tree/master ו את הפעלת יישומון כמו זו: 

 <- קובץ יישומון כוללים ->
 <script type="text/javascript" src="yql_js_widget.js"> </ script>

 <-! סגנונות יישומון ->
 <style>
 div.imgCnt {גבול: 1px solid rgb (96, 96, 96); 
     שולי: 5px 5px 5px 0pt; float: עזבו;
	 צבע הרקע: rgb (241, 241, 241); רוחב: 100px;
	 גובה: 140px;}
 div.imgCnt img {border: 0; שוליים: 5px;}
 div.imgCnt div.imgTitle {padding: 5px; font-size: 11px;
     text-align: מרכז;}
 </ Style>

 <script type="text/javascript">
 var config = {"באגים": נכון};
 var פורמט = '<div class="imgCnt" align="center"> "
     + "<A href =" http://www.flickr.com/photos/ {בעל} / {id} / "
     + "Target =" _blank "> <img src =" http://farm3.static. "
     + 'Flickr.com / {שרת} / {id} _ {סוד}. Jpg? V = 0 "
     + 'רוחב גובה = "80" = "80" /> </ a> "
     + '<div Class="imgTitle"> "
     + "<A href =" http://www.flickr.com/photos/} {בעל / '
     + '{Id }/">{ כותרת} </ a> "
     + '</ Span> </ span> ";
 var yqlQuery =
     "SELECT * FROM flickr.photos.search שבו הטקסט =" YDN "';
 insertEl var = 'widgetContainer';
 yqlWidget.push (yqlQuery, config, פורמט, insertEl);
 </ Script>

כל מספר של שאילתות YQL הציבורי יכולה להתבצע באמצעות בדוגמה לעיל - כל התיעוד עבור אופן את התסריט עובד תצורה ניתן למצוא באתר github . אם נוכל להפעיל את הקוד הנ"ל אנחנו יכולים בקלות להציג את התמונות האחרונות שלנו Flickr:

Flickr תמונה להציג

אז למה כל הרעש הזה סביב באמצעות YQL ו Yui יחד כזה? ובכן, לי הכלים הללו להביא לי די קרוב סוג המסורתית (Model View Controller) MVC של תבנית עיצוב. YQL היא צבירת נתונים נפלאים כלי מניפולציה, אבל בסוף היום זה רק נתונים. אנו להכניס את הפונקציונליות בקר באמצעות כלי עזר Yui כגון קבלת השירות או מנהל החיבורים , ואז נוכל לבנות שכבת מצגת שלנו על גבי זה באמצעות יישומונים כמו DataTable ו תרשימים .

עדכון פרטית זרם

גישה לנתונים פרטיים משתמש

בואו לבחון את ההתאמה של Yui ו YQL עוד קצת על ידי לקיחת יסוד מובנה יישומון ג'אווה סקריפט הציבור שאילתה הצמדת רכיב צד השרת כדי לאמת ולאחסן מושב OAuth. באמצעות Y! OS PHP SDK , אנו יכולים להרחיב את יישומון ג'אווה סקריפט כדי להציג את זרם לעדכן פרטים תג אישי של המשתמש מאומת במקור יישומון. מכיוון שאנחנו באמצעות SDK PHP על תחום זהה יישומון שלנו כדי לבצע שיחות מאומתים שלנו YQL, אנחנו כבר לא צריכים לדאוג לגבי אותו המוצא סוגיות מדיניות. פירוש הדבר כי אנחנו יכולים להחליף את השימוש של השירות Yui קבל עם מנהל החיבורים Yui . היתרון לשימוש מנהל החיבורים כאן הוא שאנחנו יכולים להשתמש בקשת תקן ajax ואת מטפלים באירועים של כלי במקום איתות בתוך השאילתה YQL. פונקציה בקשה חדשה שלנו ייראה משהו כזה: 

 <script type="text/javascript">
 var getYQLData הפונקציה = (שאילתה) {
     / / להכין URL & לפרסם נתוני POST מנהל Yui חיבור:
     sURL var = "private_data_fetch.php";
     postData var = "q =" + השאילתה;

     / / להגדיר את מנהל החיבורים callbacks האירוע
     var התקשרות = {
         הצלחה: parseYQLResults,
         כישלון: onYQLReqFailure
     };
		
     / / להפוך את בקשת POST כדי YQL עם השאילתה המסופק
     var transactionObj = YAHOO.util.Connect.asyncRequest ("POST",
	     sURL, התקשרות, postData);
		
     לחזור transactionObj;
 }
 </ Script>

The Connection Manager is used to make AJAX requests to the PHP SDK (whose references are housed in private_data_fetch.php within the above code) with the query as a POST parameter. The SDK in turn makes an authenticated request for the user's personal data and dumps out a JSON string as the return of the request. Then all you need to do is parse the JSON string using the YUI JSON Utility ; after you've called YAHOO.util.JSON.parse() on the transaction results, your data can be treated in the same manner as the data in the first example.

Since YQL generates results when the request is called, there is no need to house this data for yourself. YQL can pull data from any available source so you can build widgets such as these to display dynamic results with each refresh.

Both of the widgets showcased in this post are freely available for download and contribution on github at http://github.com/jonleblanc/yql-utilities/tree/master . These widgets are:

  • js-yql-display : JavaScript widget to display public YQL data
  • php-yql-display : JavaScript / PHP widget to display private YQL data

מצא את שיחות: Bloglines | technorati

שתף להרחיב: הפוך עם del.icio.us | digg זה! | reddit!

Implementation Focus: Squarespace

June 9, 2009 at 8:08 am by Jenny Donnelly | In YUI Implementations | 2 Comments

Squarespace.com started in the dorm room of Anthony Casalena and has grown into a sizable company and a formidable service that serves the needs of tens of thousands of customers every day — including Mark Ecko and Kevin Rose. Squarespace allows its customers to create and manage their web sites using a polished interface without having to install software — it's all done through the browser. Squarespace is defined by our insistence on software that provides an unparalleled user experience from a robust core. Every pixel of Squarespace's software is engineered and animated to be flawless.

Members of Squarespace team: (From left to right) Paolo DeDios, Erica Reitman, Dane Atkinson, Jonathan Snook, Anthony Casalena, Tyler Thompson, Davin Chew, Rolando Berrios.

Members of the Squarespace team: (From left to right) Paolo DeDios, Erica Reitman, Dane Atkinson, Jonathan Snook, Anthony Casalena, Tyler Thompson, Davin Chew, Rolando Berrios.

Can you provide a background of projects where you've used YUI? What problems are you trying to solve for users?

Squarespace has two different audiences that have to be served in different ways. We have Squarespace customers who use the tools that we provide and we have the people who visit the sites that our customers create. YUI is used to drive a lot of the functionality that we provide to our customers and do that in a way that works reliably cross-browser. If we don't provide a reliable in-browser experience, we'll hear about it with support requests.

We also have YUI available for our customers to use on the sites that they build (although it's never been a requirement). Our customers get to rely on a stable and reliable library for any of their own site-building needs.

Screenshot of Squarespace overview page.

You chose YUI's JavaScript library to help drive the UI. What led you to make that choice?

At the time the decision was made, YUI was the best choice. YUI is a well-designed library that considered the requirements of multiple scenarios, not limiting itself to one or two use cases. It was also one of the few libraries that had an integrated and supported set of widgets.

Also, the fact that YUI is actively maintained and tested so extensively with the Yahoo! homepage is a massive win. No other library we looked at was receiving that sort of extensive testing and coverage. When we have run into speed issues, it's turned out to be cross-browser issues unrelated to our use of YUI.

What YUI components are in use on which projects?

Of course the standard DOM and Event stuff along with Drag and Drop , Animation , and Connection Manager . On the widget side of things, we take advantage of Calendar , ColorPicker , and Slider .

Design and interface quality are huge differentiators for startups. What are the features you have prioritized in your interfaces and what have you build on top of YUI?

For Squarespace, design and interface quality is a big part of our success. We really work to create a polished in-browser experience so that customers can design and manage their sites all from one place. We're trying to replace desktop tools. The browser and YUI have allowed us to do that.

We pull in dynamic overlays allowing our customers to move content around, edit content on the spot, or add new content without requiring a page refresh. Squarespace also allows them to edit the look and feel of their sites dynamically. Change colours, images, or other CSS properties from the interface or have direct access to specify whatever CSS you want. It's really quite flexible, and we're very proud of how well it has been received.

Screenshot of Squarespace design view page.

What are the next interface challenges you are tackling for upcoming releases?

We have some great features that we're working on right now that will increase the flexibility that our customers will have to modify their content and design right from the browser but the challenge with doing more stuff within the browser is ensuring that you're creating a snappy and responsive interface. We definitely don't want them to be sitting there while we load up large assets. We want them to be able to jump in and play with their sites as quickly and easily as possible.

We plan to stick with YUI and will be watching the progress of YUI 3 very closely to see how it'll fit into our future plans.

מצא את שיחות: Bloglines | technorati

שתף להרחיב: הפוך עם del.icio.us | digg זה! | reddit!

YUI Theater — Charles McCathieNevile: “Opera Dragonfly”

June 1, 2009 at 9:04 am by Eric Miraglia | In YUI Theater | Comments Off

Charles McCathieNevile of Opera; May 26, 2009, at Yahoo!

One of the first YUI Theater videos years ago was published after Joe Hewitt came to Yahoo! to talk about the 1.0 release of Firebug , and back in those days Firebug was a paradigm shift — it had a convenient interface that combined DOM inspection and debugging, and it allowed developers to finally put the venerable Venkman on the shelf.

The Firebug model has penetrated into other browser families today, and today IE8 and Safari both have capable developer tools while Firebug soldiers on in service to Firefox. None of the tools is perfect, but Firebug has served as a good proof-of-concept for what a multipurpose, extensible inspector/debugger toolkit can do.

Opera is now innnovating on this front as well, and Charles McCathieNevile, Chief Standards Officer, stopped by Yahoo! on May 26 to tell us about their latest effort : Opera Dragonfly . Dragonfly will work with Opera 9.5 and later, and it's a novel approach — implemented as a widget using JavaScript and CSS and proposing a new “Scope API” that (if agreed upon by browser makers) could allow for a common debugging platform. Dragonfly is fully open-sourced.

Slides from Charles's talk are available as zipped HTML files .

The embed from Yahoo Video follows; a higher-resolution version, along with a transcript, is available from the YUI Theater site .


Charles McCathieNevile: "Opera Dragonfly" @ Yahoo! וידאו

להוריד (m4v)

במידה שלא נענו ...

כמה קטעי וידאו אחרים מן האחרונים תיאטרון Yui סדרה :

רישום כמנוי Yui תיאטרון:

מצא את שיחות: Bloglines | technorati

שתף להרחיב: הפוך עם del.icio.us | digg זה! | reddit!

מאוכסן על ידי יאהו!

כל הזכויות שמורות © 2006-2011 Yahoo! Inc כל הזכויות שמורות. פרטיות - תנאי השירות

מופעל על ידי וורדפרס על יאהו אירוח .