Yahoo! Open Technologies @NCU

2,077 views

Published on

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,077
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
48
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Yahoo! Open Technologies @NCU

  1. 1. NSYSU MIS 2009/3/5 josephj
  2. 2. Hi! josephj • 2.5 F2E • 0.5 Evangelist • RD @josephj6802 http://josephj.com josephj6802@gmail.com
  3. 3. 2008.5
  4. 4. Question 1
  5. 5. Open APIs Yahoo!
  6. 6. Open API AJAX API Open API
  7. 7. Yahoo! Format Flickr
  8. 8. http://www.flickr.com/photos/tags/
  9. 9. http://api.flickr.com/services/feeds/photos_public.gne? tags= &lang=en-us&format=rss_200
  10. 10. http://api.flickr.com/services/feeds/photos_public.gne? tags= &lang=en-us&format=php
  11. 11. <script src=”http://api.flickr.com/services/feeds/photos_public.gne? &format=json&jsoncallback=getFlickrData ”></script> tags=
  12. 12. http://api.flickr.com/services/feeds/photos_public.gne? tags=twopenhack08&format=lol
  13. 13. API Feed Schema
  14. 14. Service ...
  15. 15. JavaScript HTML ...
  16. 16. Schema Code
  17. 17. Pipes Remix Feed
  18. 18. RSS Feed Union
  19. 19. ... CLI
  20. 20. YQL Yahoo! Query Language
  21. 21. Yahoo!
  22. 22. Question 2
  23. 23. YUI Library Web2.0
  24. 24. UI UI YUI UI Button Def. But. Menu Label Text Field Label Label Label Text Area click me
  25. 25. YUI
  26. 26. Library
  27. 27. Developer Network Home Help Site Search Design Pattern Library Yahoo! Developer Network > Design Pattern Library > Auto Complete Auto Complete QUICK JUMP Problem Summary Solution The user needs to enter an item into a text box which could ambiguous or hard to Rationale remember and therefore has the potential to be mis-typed. Accessibility EXAMPLE: RELATED PATTERNS Calendar Picker AS USED ON YAHOO! Yahoo! Mail Beta Yahoo! Maps Beta Yahoo! My Web 2 BLOG Blog Article Y! UI CODE EXAMPLES Auto Complete Component Auto completion of contacts in Yahoo! Mail Beta Y! Search (JSON) Y! Search (XML) Use When In-Memory (array) In-Memory (function) The suggestions can be pulled from a manageable set of data. Flickr (XML) The input item can be entered in multiple ways. Flat data Playground The input item can be matched with a specific data item in the system. Speed and accuracy of entry is an important goal. Show with revisions The total number of items would be too large or inconvenient for displaying in a standard drop down box. Solution This work is licensed under a Creative Commons Attribution 2.5 License. Layout Use a standard text box for input. Label the text box to match the user's expection of what field will be searched against. Interaction As the user types, display a list of suggested items that most closely match what the user has typed. Continue to narrow or broaden the list of suggested items based on the user's input. Display the suggested items list in a drop down box directly underneath the text box. The suggested items list may be based on the complete set of data or more narrowly based on other criteria such as each item's frequency of use. When available, show multiple fields of information for each suggested item. In the Yahoo! Mail example above, two fields are presented: the contact's full name and the contact's email address. Highlight the closest matching item within the suggested items list. Show the matched item as first in the list. Highlight the background of the matched item. When multiple fields are shown for each suggested item the match may occur with the initial characters of any of the fields presented. For each suggested item in the suggest items list show the characters that exactly match the user's input. When multiple fields are shown in a suggested item the matching characters may appear in any of the fields presented. In the example below, the characters 'Yu' have been typed by the user. The match is on three items. Notice that the first item matched on the contact's email address '<yuiblogger.com>' whereas the second and third items are matched on the contact's name (e.g., 'Yusef Jones'.) Allow the user to delete a character of input and display the previous suggested items list. Allow the user to complete the input field by pressing the Tab key or Enter; key. The current matched item in the suggested items list will be accepted as the value for the input field. Allow the user to optionally highlight an item of their choice from the suggested item list with the mouse or with the up and down arrow keys. Allow the user to cancel the suggested items list by pressing the Esc key. The drop down list will close. Subsequently pressing the Tab key or Enter key will accept the value from the input field. However, typing more characters after hitting the Esc key will restart the auto completion behavior displaying the suggested items list. If multiple input items are allowed in a single input field, allow the user to use the Comma key to separate each input item. Pressing the comma key will complete an individual item match. The auto complete behavior restarts when the user begins typing characters for the next input item. Rationale Reducing the number of keystrokes allows for faster user input. Showing additional formatting information in the suggested items list (like the email address in the example above) removes ambiguity. Continual feedback helps the user narrow in on the correct choice. Accessibility Label the text box to match the user's expection of what field will be searched against. Allow the user to highlight a desired match either using a mouse or navigating to it with the up or down arrow keys. Allow the user to complete the form by pressing the Tab or Enter keys. Allow the user to cancel suggestions by pressing the Esc key. Allow the input field to receive keyboard focus by pressing the Tab key. Once the edit field is in focus make sure that the focus stays in the edit field during autocomplete. Do not send any page refreshes when updating the field (page refreshes will signal assistive technology to start reading the page again.) The insertion cursor should move as the left/right arrow keys are pressed in the text field. Copyright © 2005-2007 Yahoo! Inc. All rights reserved. Privacy Policy - Terms of Service - Copyright Policy - Job Openings
  28. 28. YUI 300
  29. 29. YUI Web OSDC
  30. 30. Carousel
  31. 31. +
  32. 32. YUI
  33. 33. YUI
  34. 34. http://blogs.computerworld.com/nytimes_iphone_browser_marketshare iPhone YUI
  35. 35. http://marketshare.hitslink.com/report.aspx?sample=21&qprid=43&qpcustom=Chrome+0.2 Google Chrome ;)
  36. 36. Rich Text Editor
  37. 37. Accessbility
  38. 38. YUI
  39. 39. 1. HTML Yahoo!
  40. 40. <div id=”nav”> <div class=”hd”> <h2> </h2> </div> <div class=”bd”> ID .hd, .bd, .ft <p> </p> header body footer </div> <div class=”ft”> <a href=”...”> ... </a> </div> </div>
  41. 41. yhtw_masthead ykpmt ykpsb ykpimt ykpadv ykpimqa ykpimr ykpug ykpiht ykpiht
  42. 42. ykpsb • ykp + prefix • sb search box • inc/search_box.php
  43. 43. id CSS namespace form .extra [CSS] [HTML] <style> <div id=”ykpsb”> #ykpsb { <div class=”bd clearfix”> margin-bottom:10px; <form ...> } ... #ykpsb form { </form> float:left; <div class=”extra”> } ... #ykpsb .extra { </div> float:right; </div> } </div> </style>
  44. 44. 1 HTML 3 Mins http://josephj.com/training/yzu/html-module.html 1. id 2. hd, bd, ft class 3. CSS font:bold 16px; background:#ffe; color:#369;
  45. 45. 2. YUI Grids DIV + CSS
  46. 46. 950px 240px 50%, 50%
  47. 47. YUI Grid Builder http://developer.yahoo.com/yui/grids/builder/
  48. 48. 3. YUI AJAX Web 2.0 http://josephj.com/training/yzu/yui-ajax.html
  49. 49. YUI AJAX YUI AJAX Connection Manager 2. Request 1. Request A 3. A 4.
  50. 50. YUI AJAX AJAX 2. Request 1. JavaScript Request A 3. A 4.
  51. 51. 3 YUI Connection http://josephj.com/training/yzu/yui-ajax.html
  52. 52. 4. YUI Get Utility http://josephj.com/training/yzu/yui-get.html
  53. 53. <script src=” http://api.flickr.com/services/feeds/photos_public.gne?tags=yzu&lang=en-us&format=json“></script>
  54. 54. 4 YUI Get http://josephj.com/training/yzu/yui-get.html
  55. 55. 5. YUI
  56. 56. 5 YUI http://josephj.com/training/yzu/yui-menu.html 1. new YAHOO.widget.MenuBar([ id]); YUI 2. render()
  57. 57. 5 YUI http://josephj.com/training/yzu/yui-menu.html (true false) autosubmenudisplay hidedelay n (true false) lazyload
  58. 58. 6. YUI UI
  59. 59. YUI Button HTML YUI Button
  60. 60. 6 YUI http://josephj.com/training/yzu/yui-button.html 1. new YAHOO.widget.Button([ id]);
  61. 61. 7. YUI Web 2.0
  62. 62. YUI Container YAHOO.widget.Dialog YAHOO.widget.Panel YAHOO.widget.Panel YAHOO.widget.SimpleDialog
  63. 63. 7 YUI http://josephj.com/training/yzu/yui-panel.html 1. var oPanel = new YAHOO.widget.Panel([ id], [ ]); #panel 2. oPanel.render(document.body) append 3. oButton.addListener(‘click’, onButtonClick) onButtonClick oPanel.show();
  64. 64. 7 YUI http://josephj.com/training/yzu/yui-panel.html close fixedcenter modal underlay shadow’, ‘matte’ visible width { 1: 1, 2: 2}
  65. 65. YUI Compressor
  66. 66. YUI
  67. 67. YUI
  68. 68. YUI BSD License
  69. 69. Open Source ?
  70. 70. • Fasten Improvement • Fun • Innovation • Recruiting • • YUI Contributor
  71. 71. jQuery Prototype Dojo GWT
  72. 72. • JavaScript • • JavaScript • • • QA •
  73. 73. IDE ...
  74. 74. IDE Aptana
  75. 75. no.
  76. 76. • • ASP, PHP, RoR, Python, JAVA... • • 3rd Party
  77. 77. Open at Yahoo!
  78. 78. ... Google Maps ... Yahoo! Map http://www.bnext.com.tw/LocalityView_6980
  79. 79. Yahoo! 3rd Party
  80. 80. Social
  81. 81. ilove7388 ... orz...
  82. 82. ilove7388
  83. 83. Social =
  84. 84. + Social
  85. 85. Social Platform
  86. 86. Following
  87. 87. Follower
  88. 88. Social Open Social
  89. 89. 2007/5/24 Facebook F8 http://www.flickr.com/photos/kk/2327597086/
  90. 90. Social Facebook FQL FBML FBJS
  91. 91. ..
  92. 92. OpenSocial Social Applications API Spec
  93. 93. OpenSocial
  94. 94. Yahoo! OpenSocial
  95. 95. 10/17 Yahoo! Profile
  96. 96. Social Directory Profile Contacts Address Book Messenger Relationship User Status Updates / http://developer.yahoo.com/social/
  97. 97. Twitter Twitter ? Yahoo! Messenger Updates
  98. 98. MyBlogLog Twitter Y!M http://manage.community.yahoo.com/ vitality/
  99. 99. / /
  100. 100. Next?
  101. 101. Application Platform YAP
  102. 102. Yahoo!
  103. 103. Mail/Contact API Local Yahoo!
  104. 104. Yahoo! Pat Jameson Pat Jameson Pat Jameson
  105. 105. Y!Sports Yahoo! +
  106. 106. YAP Developer Studio YAP
  107. 107. View Small View Application Lightbox View Sever-side Script Application 760px YAP Web Server User App HTML YML Small View 300px+ 250px Yahoo! User App Application
  108. 108. App HTML CSS JavaScript YML YQL
  109. 109. HTML + CSS + JavaScript YAP YML YQL
  110. 110. YML Yahoo! Markup Language Text <!-- --> <yml:friend-selector uid=quot;viewerquot;/> YML UI
  111. 111. YAP SDK
  112. 112. PHP SDK Text OAuth YQL Social API
  113. 113. Connection Social Networking
  114. 114. Yahoo! Cool
  115. 115. YAP Open • OpenSocial • Hadoop • OpenID • oAuth
  116. 116. BluePrint
  117. 117. SearchMonkey
  118. 118. Fire Eagle
  119. 119. OpenID SSO BBAuth Retire ...
  120. 120. Quick Summary • Open APIs Yahoo! • Social • YAP Y Yahoo! Powerful
  121. 121. Questions? http://www.flickr.com/photos/phploveme/2847931240/

×