Successfully reported this slideshow.
Web 2.0
                  YUI



http://www.slideshare.net/josephj/josephj-yui-nctu

                                     ...
@josephj6802
     http://josephj.com
josephj@yahoo-inc.com
Hi!   josephj




                          @josephj6802
                     http://josephj.com
                josephj@y...
Hi!   josephj




• 2.5   F2E




                                        @josephj6802
                                   ...
Hi!   josephj




• 2.5   F2E

• 0.5         Evangelist




                                         @josephj6802
        ...
Hi!    josephj




• 2.5   F2E

• 0.5         Evangelist

•                    SDE

                                      ...
2008.5
ITHome   http://farm4.static.flickr.com/3251/3017901989_9252512e77_o.jpg
Yahoo! Course
Yahoo! Course
YDN       3/13 @


• + API
•          API

• YAP
Agenda
Agenda


•        F2E
Agenda


•              F2E
•        YUI
Agenda


•              F2E
•        YUI
•
Front-end Engineer
•   HTML / CSS / JavaScript
•   HTML / CSS / JavaScript
•
•   HTML / CSS / JavaScript
•
•
SOUNDS SIMPLE!
no.
server
(X)HTML




 server
(X)HTML

          Specification




 server
(X)HTML

           Specification
          Implementation




 server
(X)HTML

           Specification
          Implementation
               Bugs




 server
(X)HTML

              Specification
             Implementation
                  Bugs
          [ Theory / Practice ]



...
CSS

                          BOM API
(X)HTML    DOM                      JavaScript
                          DOM API

 ...
Safari    Firefox    Opera   IE5, 6, 7    Firefox   Opera       10,000+ UAs
         Macintosh                       Windo...
Safari    Firefox    Opera               Firefox   Opera        10,000+ UAs
                             IE5, 6, 7
       ...
Safari    Firefox    Opera               Firefox   Opera        10,000+ UAs
                             IE5, 6, 7
       ...
usability, internationalization,
    localization, visual design,
  accessibility, information
   architecture, security, ...
Yahoo
Yahoo
CSS Sprites
Yahoo
CSS Sprites
TabView   JavaScript
No Image Not Loaded
Screen
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;.../i8/ykp_qack_min_20080707.cssquot; media=quot;s...
Print
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;.../i8/ykp_print_min_20080707.cssquot; media=quot;p...
15
from Lifted
©2007 Pixar Animation Studios
...
http://developer.yahoo.com/yui
UI
UI   YUI    UI
UI
                        UI    YUI    UI

        Button    Def. But.


         Menu
Label

         Text Field
Label

...
UI
                        UI    YUI    UI

        Button    Def. But.


         Menu
Label

         Text Field
Label

...
UI
                        UI    YUI    UI

        Button    Def. But.


         Menu
Label

         Text Field
Label

...
UI
                        UI    YUI    UI

        Button    Def. But.


         Menu
Label

         Text Field
Label

...
UI
                        UI    YUI    UI

        Button    Def. But.


         Menu
Label

         Text Field
Label

...
UI
                        UI    YUI    UI

        Button    Def. But.


         Menu
Label

         Text Field
Label

...
UI
                        UI    YUI    UI

        Button    Def. But.


         Menu
Label

         Text Field
Label

...
UI
                        UI    YUI    UI

        Button    Def. But.


         Menu
Label

         Text Field
Label

...
UI
                        UI    YUI    UI

        Button    Def. But.


         Menu
Label

         Text Field
Label

...
UI
                        UI    YUI    UI

        Button    Def. But.


         Menu
Label

         Text Field
Label

...
UI
                        UI    YUI    UI

        Button    Def. But.


         Menu
Label

         Text Field
Label

...
UI
                        UI    YUI    UI

        Button    Def. But.


         Menu
Label

         Text Field
Label

...
UI
                        UI    YUI    UI

        Button    Def. But.


         Menu
Label

         Text Field
Label

...
UI
                        UI    YUI    UI

        Button    Def. But.


         Menu
Label

         Text Field
Label

...
UI
                        UI    YUI    UI

        Button    Def. But.


         Menu
Label

         Text Field
Label

...
UI
                        UI    YUI    UI

        Button    Def. But.


         Menu
Label

         Text Field
Label

...
UI
                        UI    YUI    UI

        Button    Def. But.


         Menu
Label

         Text Field
Label

...
iPhone   YUI
http://blogs.computerworld.com/nytimes_iphone_browser_marketshare



         iPhone                                  YUI
http://marketshare.hitslink.com/report.aspx?sample=21&qprid=43&qpcustom=Chrome+0.2




    Google Chrome                  ...
http://marketshare.hitslink.com/report.aspx?sample=21&qprid=43&qpcustom=Chrome+0.2




    Google Chrome                  ...
http://marketshare.hitslink.com/report.aspx?sample=21&qprid=43&qpcustom=Chrome+0.2




    Google Chrome                  ...
Button + Menu + Container + ... = RTE Editor
Accessbility
YUI   YUI
CSS


  YUI   YUI
1. YUI
YAHOO.util.* :   Web 2.0
1. YUI
   YAHOO.util.* :          Web 2.0

• AJAX
   AJAX             JSON
1. YUI
    YAHOO.util.* :          Web 2.0

• AJAX
    AJAX             JSON


•
1. YUI
       YAHOO.util.* :            Web 2.0

• AJAX
        AJAX              JSON


•

•
    Cookie     Selector
Browser History Manager
          AJAX
 http://tw.knowledge.yahoo.com/my/my_trace?show=AC00668153
SEO
AJAX
AJAX




  SEO
AJAX
2. YUI
YAHOO.widget.* :

      •            •
      •            •
      •            • HTML
      •            • Slider
 ...
3. YUI
YUI Compressor
YUI Compressor
YUI Compressor
Y! Slow
http://developer.yahoo.com/yslow
4. YUI CSS
4. YUI CSS
• Reset
4. YUI CSS
• Reset


• Fonts
4. YUI CSS
• Reset


• Fonts


• Grids
          DIVs+CSS
reset.css
fonts.css


reset.css
grids.css


   fonts.css


reset.css
950px




                   240px




50%, 50%
doc3 = 989px
.yui-t6 = Right, 300px
doc4 = 974px
.yui-t3 = Left, 300px
YUI
Library
Developer Network Home   Help                                                                                             ...
YUI   300
[more videos   ]
Yahoo! UI Library                                                                                        ...
-debug
-min
API
YUI
              50
       YUI
developer.yahoo.com/yui/theater
YUI
YUI
      OSDC
Carousel
+
YUI
YUI
Q&A
YUI
YUI   BSD License
Open Source ?
• Fasten Improvement
• Fasten Improvement
• Fun
• Fasten Improvement
• Fun
• Innovation
• Fasten Improvement
• Fun
• Innovation
• Recruiting
• Fasten Improvement
• Fun
• Innovation
• Recruiting
•
• Fasten Improvement
• Fun
• Innovation
• Recruiting
•
•                      YUI Contributor
jQuery   Prototype   Dojo   GWT
•   JavaScript
•   JavaScript
•
•   JavaScript
•
•       JavaScript
•   JavaScript
•
•       JavaScript
•
•   JavaScript
•
•       JavaScript
•
•
•   JavaScript
•
•       JavaScript
•
•
•           QA
•   JavaScript
•
•       JavaScript
•
•
•           QA
•
IDE
IDE
      ...
Aptana
no.
•

    • ASP, PHP, RoR, Python, JAVA...

•

•        3rd Party
YUI
YUI



http://www.wallpapergate.com/wallpaper22725.html




                     http://josephj.com/training/nctu/
1. HTML
 Yahoo!
<div id=”nav”>
    <div class=”hd”>
        <h2>    </h2>
    </div>
    <div class=”bd”>
        <p>    </p>
    </div>
 ...
<div id=”nav”>
    <div class=”hd”>
        <h2>    </h2>
    </div>
    <div class=”bd”>
        <p>    </p>
    </div>
 ...
<div id=”nav”>
         <div class=”hd”>
             <h2>    </h2>
         </div>
         <div class=”bd”>
ID
         ...
<div id=”nav”>
         <div class=”hd”>
             <h2>    </h2>
         </div>
         <div class=”bd”>
ID          ...
yhtw_masthead




ykpmt

ykpsb


ykpimt                   ykpadv




ykpimqa         ykpimr




                         y...
ykpsb


• ykp      +    prefix
• sb    search box
•       inc/search_box.php
id          CSS              namespace
form                               .extra



                                 [CSS]...
1        HTML                            3 Mins
http://josephj.com/training/nctu/html-module.html

           1.          ...
2. YUI Grids
               DIV + CSS

http://developer.yahoo.com/yui/grids/builder/
YUI Grid Builder




http://developer.yahoo.com/yui/grids/builder/
950px




                   240px




50%, 50%
3. YUI AJAX
                Web 2.0
http://josephj.com/training/nctu/yui-ajax.html
YUI AJAX
YUI       AJAX   Connection Manager




      A
YUI AJAX
YUI       AJAX        Connection Manager



                 1.   Request




      A
YUI AJAX
YUI       AJAX        Connection Manager


                                2.       Request

                 1. ...
YUI AJAX
YUI       AJAX             Connection Manager


                                     2.       Request

          ...
YUI AJAX
YUI            AJAX             Connection Manager


                                          2.       Request

...
YUI AJAX

AJAX




  A
YUI AJAX

AJAX


        1.   JavaScript   Request




  A
YUI AJAX

AJAX
                                    2.       Request

        1.   JavaScript   Request

                  ...
YUI AJAX

AJAX
                                    2.       Request

        1.   JavaScript   Request

                  ...
YUI AJAX

AJAX
                                      2.       Request

          1.   JavaScript   Request

              ...
3    YUI Connection
http://josephj.com/training/nctu/yui-ajax.html
4. YUI Get Utility
 http://josephj.com/training/nctu/yui-get.html
JavaScript
JavaScript
    AJAX
http://tw.yahoo.com     http://tw.lifestyle.yahoo.com
JavaScript
    AJAX
http://tw.yahoo.com     http://tw.lifestyle.yahoo.com


<script src=”...”></script>
JavaScript
    AJAX
http://tw.yahoo.com            http://tw.lifestyle.yahoo.com


<script src=”...”></script>




http://...
JavaScript
         AJAX
     http://tw.yahoo.com                       http://tw.lifestyle.yahoo.com


     <script src=”...
JavaScript
         AJAX
     http://tw.yahoo.com                       http://tw.lifestyle.yahoo.com


     <script src=”...
JavaScript
          AJAX
     http://tw.yahoo.com                       http://tw.lifestyle.yahoo.com


     <script src=...
JavaScript


             “   ”
http://api.flickr.com/services/rest/?
method=flickr.photos.search&api_key=d498ec869768ecea276a7cb3906241d9&text=
     &forma...
<script src=”http://api.flickr.com/services/rest/?
             method=flickr.photos.search&api_key=d498ec869768ecea276a7cb3...
YUI Get Utility
YUI Get Utility
     <script/>
•
YUI Get Utility
         <script/>
•
• YAHOO.util.Get.script(url)
YUI Get Utility
              <script/>
•
• YAHOO.util.Get.script(url)
    • ex1.                YUI   jQuery...
YUI Get Utility
              <script/>
•
• YAHOO.util.Get.script(url)
    • ex1.                YUI   jQuery...
    • ex2...
YUI Get Utility
              <script/>
•
• YAHOO.util.Get.script(url)
    • ex1.                YUI   jQuery...
    • ex2...
YUI Get Utility
              <script/>
•
• YAHOO.util.Get.script(url)
    • ex1.                YUI   jQuery...
    • ex2...
YUI Get Utility
              <script/>
•
• YAHOO.util.Get.script(url)
    • ex1.                YUI   jQuery...
    • ex2...
4     YUI Get Utility
http://josephj.com/training/nctu/yui-get.html
5. YUI
5     YUI
http://josephj.com/training/nctu/yui-menu.html

  1.    new
     YAHOO.widget.MenuBar([          id]);
         ...
5   YUI
http://josephj.com/training/nctu/yui-menu.html



                          (true   false)
  autosubmenudisplay


...
6. YUI
         UI
YUI Button
HTML

            YUI Button
6     YUI
http://josephj.com/training/nctu/yui-button.html

   1.     new YAHOO.widget.Button([
        id]);
6     YUI
http://josephj.com/training/nctu/yui-button.html

   1.     new YAHOO.widget.Button([
        id]);
7. YUI
  Web 2.0
YUI Container
YUI Container

YAHOO.widget.Panel
YUI Container
                     YAHOO.widget.Dialog

YAHOO.widget.Panel
YUI Container
                     YAHOO.widget.Dialog

YAHOO.widget.Panel




YAHOO.widget.Panel
YUI Container
                       YAHOO.widget.Dialog

YAHOO.widget.Panel




YAHOO.widget.Panel

                     ...
7        YUI
http://josephj.com/training/nctu/yui-panel.html
  1.     var oPanel = new YAHOO.widget.Panel([       id], [  ...
7        YUI
http://josephj.com/training/nctu/yui-panel.html

           close
      fixedcenter
           modal
         ...
Questions?
Thank You




http://developer.yahoo.com/yui/
     josephj@yahoo-inc.com
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
YUI Introduction @ NCTU
Upcoming SlideShare
Loading in …5
×

YUI Introduction @ NCTU

4,267 views

Published on

Published in: Technology, Design
  • Be the first to comment

YUI Introduction @ NCTU

  1. 1. Web 2.0 YUI http://www.slideshare.net/josephj/josephj-yui-nctu 2009/3/10 @ NCTU josephj
  2. 2. @josephj6802 http://josephj.com josephj@yahoo-inc.com
  3. 3. Hi! josephj @josephj6802 http://josephj.com josephj@yahoo-inc.com
  4. 4. Hi! josephj • 2.5 F2E @josephj6802 http://josephj.com josephj@yahoo-inc.com
  5. 5. Hi! josephj • 2.5 F2E • 0.5 Evangelist @josephj6802 http://josephj.com josephj@yahoo-inc.com
  6. 6. Hi! josephj • 2.5 F2E • 0.5 Evangelist • SDE @josephj6802 http://josephj.com josephj@yahoo-inc.com
  7. 7. 2008.5 ITHome http://farm4.static.flickr.com/3251/3017901989_9252512e77_o.jpg
  8. 8. Yahoo! Course
  9. 9. Yahoo! Course
  10. 10. YDN 3/13 @ • + API • API • YAP
  11. 11. Agenda
  12. 12. Agenda • F2E
  13. 13. Agenda • F2E • YUI
  14. 14. Agenda • F2E • YUI •
  15. 15. Front-end Engineer
  16. 16. • HTML / CSS / JavaScript
  17. 17. • HTML / CSS / JavaScript •
  18. 18. • HTML / CSS / JavaScript • •
  19. 19. SOUNDS SIMPLE!
  20. 20. no.
  21. 21. server
  22. 22. (X)HTML server
  23. 23. (X)HTML Specification server
  24. 24. (X)HTML Specification Implementation server
  25. 25. (X)HTML Specification Implementation Bugs server
  26. 26. (X)HTML Specification Implementation Bugs [ Theory / Practice ] server
  27. 27. CSS BOM API (X)HTML DOM JavaScript DOM API Specification Data Transport data: custom, xml, mixed: new xhtml Implementation json behavior: js Bugs [ Theory / Practice ] server
  28. 28. Safari Firefox Opera IE5, 6, 7 Firefox Opera 10,000+ UAs Macintosh Windows Linux, Unix, Mobile CSS BOM API (X)HTML DOM JavaScript DOM API Specification Data Transport data: custom, xml, mixed: new xhtml Implementation json behavior: js Bugs [ Theory / Practice ] server
  29. 29. Safari Firefox Opera Firefox Opera 10,000+ UAs IE5, 6, 7 Macintosh Windows Linux, Unix, Mobile CSS BOM API (X)HTML DOM JavaScript DOM API Specification data: custom, xml, mixed: new xhtml, Data Transport Implementation behavior: js json Defects [ Theory / Practice ] server
  30. 30. Safari Firefox Opera Firefox Opera 10,000+ UAs IE5, 6, 7 Macintosh Windows Linux, Unix, Mobile knowledge areas: 7 CSS dimensions: xJavaScript 4 BOM API (X)HTML DOM DOM API platforms: x 3 Specification data: custom, xml, mixed: new xhtml, platform: x 4 browsers perDefects Data Transport Implementation behavior: js json rendering modes: x 2 [ Theory / Practice ] server =672
  31. 31. usability, internationalization, localization, visual design, accessibility, information architecture, security, build processes, performance, benchmarking, devices, portability
  32. 32. Yahoo
  33. 33. Yahoo CSS Sprites
  34. 34. Yahoo CSS Sprites
  35. 35. TabView JavaScript
  36. 36. No Image Not Loaded
  37. 37. Screen <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;.../i8/ykp_qack_min_20080707.cssquot; media=quot;screenquot;>
  38. 38. Print <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;.../i8/ykp_print_min_20080707.cssquot; media=quot;printquot;>
  39. 39. 15
  40. 40. from Lifted ©2007 Pixar Animation Studios
  41. 41. ...
  42. 42. http://developer.yahoo.com/yui
  43. 43. UI UI YUI UI
  44. 44. UI UI YUI UI Button Def. But. Menu Label Text Field Label Label Label Text Area click me
  45. 45. UI UI YUI UI Button Def. But. Menu Label Text Field Label Label Label Text Area click me
  46. 46. UI UI YUI UI Button Def. But. Menu Label Text Field Label Label Label Text Area click me
  47. 47. UI UI YUI UI Button Def. But. Menu Label Text Field Label Label Label Text Area click me
  48. 48. UI UI YUI UI Button Def. But. Menu Label Text Field Label Label Label Text Area click me
  49. 49. UI UI YUI UI Button Def. But. Menu Label Text Field Label Label Label Text Area click me
  50. 50. UI UI YUI UI Button Def. But. Menu Label Text Field Label Label Label Text Area click me
  51. 51. UI UI YUI UI Button Def. But. Menu Label Text Field Label Label Label Text Area click me
  52. 52. UI UI YUI UI Button Def. But. Menu Label Text Field Label Label Label Text Area click me
  53. 53. UI UI YUI UI Button Def. But. Menu Label Text Field Label Label Label Text Area click me
  54. 54. UI UI YUI UI Button Def. But. Menu Label Text Field Label Label Label Text Area click me
  55. 55. UI UI YUI UI Button Def. But. Menu Label Text Field Label Label Label Text Area click me
  56. 56. UI UI YUI UI Button Def. But. Menu Label Text Field Label Label Label Text Area click me
  57. 57. UI UI YUI UI Button Def. But. Menu Label Text Field Label Label Label Text Area click me
  58. 58. UI UI YUI UI Button Def. But. Menu Label Text Field Label Label Label Text Area click me
  59. 59. UI UI YUI UI Button Def. But. Menu Label Text Field Label Label Label Text Area click me
  60. 60. UI UI YUI UI Button Def. But. Menu Label Text Field Label Label Label Text Area click me
  61. 61. iPhone YUI
  62. 62. http://blogs.computerworld.com/nytimes_iphone_browser_marketshare iPhone YUI
  63. 63. http://marketshare.hitslink.com/report.aspx?sample=21&qprid=43&qpcustom=Chrome+0.2 Google Chrome ;)
  64. 64. http://marketshare.hitslink.com/report.aspx?sample=21&qprid=43&qpcustom=Chrome+0.2 Google Chrome ;)
  65. 65. http://marketshare.hitslink.com/report.aspx?sample=21&qprid=43&qpcustom=Chrome+0.2 Google Chrome ;)
  66. 66. Button + Menu + Container + ... = RTE Editor
  67. 67. Accessbility
  68. 68. YUI YUI CSS YUI YUI
  69. 69. 1. YUI YAHOO.util.* : Web 2.0
  70. 70. 1. YUI YAHOO.util.* : Web 2.0 • AJAX AJAX JSON
  71. 71. 1. YUI YAHOO.util.* : Web 2.0 • AJAX AJAX JSON •
  72. 72. 1. YUI YAHOO.util.* : Web 2.0 • AJAX AJAX JSON • • Cookie Selector
  73. 73. Browser History Manager AJAX http://tw.knowledge.yahoo.com/my/my_trace?show=AC00668153
  74. 74. SEO AJAX
  75. 75. AJAX SEO AJAX
  76. 76. 2. YUI YAHOO.widget.* : • • • • • • HTML • • Slider • • • • • • •
  77. 77. 3. YUI
  78. 78. YUI Compressor
  79. 79. YUI Compressor
  80. 80. YUI Compressor
  81. 81. Y! Slow http://developer.yahoo.com/yslow
  82. 82. 4. YUI CSS
  83. 83. 4. YUI CSS • Reset
  84. 84. 4. YUI CSS • Reset • Fonts
  85. 85. 4. YUI CSS • Reset • Fonts • Grids DIVs+CSS
  86. 86. reset.css
  87. 87. fonts.css reset.css
  88. 88. grids.css fonts.css reset.css
  89. 89. 950px 240px 50%, 50%
  90. 90. doc3 = 989px .yui-t6 = Right, 300px
  91. 91. doc4 = 974px .yui-t3 = Left, 300px
  92. 92. YUI
  93. 93. Library
  94. 94. 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
  95. 95. YUI 300
  96. 96. [more videos ] Yahoo! UI Library YUI Theater The Yahoo! User Interface Library (YUI) Home Nate Koechley — quot;The YUI CSS YUIBlog Foundationquot; The Yahoo! User Interface (YUI) Library is a set of utilities and YUI Discussion Forum controls, written in JavaScript, for building richly interactive web YUI on Sourceforge applications using techniques such as DOM scripting, DHTML and API Documentation AJAX. The YUI Library also includes several core CSS resources. All YUI Examples Gallery components in the YUI Library have been released as open source Powered by YUI under a BSD license and are free for all uses. YUI Theater YUI License Download YUI version 2.3.1, including full API documentation and more than 200 functional examples YUI Articles from Sourceforge. YUI FAQ Graded Browser Support The library's developers blog at the YUI Blog and the YUI Library community Skinning YUI exchanges ideas at YDN-JavaScript on Yahoo! Groups. Bug Reports/Feature Requests Serving YUI Files from Yahoo! Security Best Practices Using YUI: YUI Core: YUI Library Controls/Widgets: FAQ The YAHOO YUI Components Global Object AutoComplete Animation Getting Started (base requirement Button Control AutoComplete Licensing for all YUI Calendar Browser History Manager Articles components) Color Picker Button Cheat Sheets Senior YUI engineer Nate Koechley guides you DOM Collection Calendar Container Support & through the YUI CSS foundation in this October 2007 (convenience (including Module, Color Picker Community tech talk. methods for DOM Overlay, Panel, Connection Manager Filing Bugs & interactions) Tooltip, Dialog, Container Feature Requests Event Utility (event SimpleDialog) DataSource normalization and Yahoo! User Interface Blog Searchable API DataTable DataTable tools) Documentation: Logger In the Wild for November 30th Dom API docs are availabe Menu Nate Koechley 11/30/07 19:45:25 YUI Library Utilities: Drag & Drop for every YUI Rich Text Editor Animation Utility Element Implementation Focus: TripIt component. You can Event Browser History Eric Miraglia 11/14/07 11:22:42 search the API Slider Manager ImageLoader [experimental] documentation with Caridy Patiño Mayea’s Bubbling Library Updated TabView Logger Connection instant filtering on the Eric Miraglia 11/07/07 09:23:45 TreeView Manager (for Menu main API page. Implementation Focus: Nestoria XHR/Ajax) Rich Text Editor Eric Miraglia 11/06/07 17:58:27 YUI Library CSS The YUI Compressor: DataSource Utility Slider Tools: Using the Yahoo Global Object to Manage Object The YUI Compressor is TabView CSS Reset Inheritance and Composition: Four New YUI a build-process Drag and Drop TreeView (neutralizes Examples component that helps Utility Yahoo Global Object browser CSS Eric Miraglia 11/06/07 17:54:03 you minify your Element Utility YUI Loader styles) JavaScript and CSS. ImageLoader Utility YUI Test CSS Base (applies Documentation and [experimental] Reset CSS consistent style download information The YUILoader YUI Forum on Yahoo! Groups Base CSS foundation for are available here. Utility Fonts CSS common elements) Using DataTable with Drag and Drop The YUI Test Grids CSS CSS Fonts guiltyspark05 12/03/07 21:52:02
  97. 97. -debug
  98. 98. -min
  99. 99. API
  100. 100. YUI 50 YUI developer.yahoo.com/yui/theater
  101. 101. YUI
  102. 102. YUI OSDC
  103. 103. Carousel
  104. 104. +
  105. 105. YUI
  106. 106. YUI
  107. 107. Q&A
  108. 108. YUI
  109. 109. YUI BSD License
  110. 110. Open Source ?
  111. 111. • Fasten Improvement
  112. 112. • Fasten Improvement • Fun
  113. 113. • Fasten Improvement • Fun • Innovation
  114. 114. • Fasten Improvement • Fun • Innovation • Recruiting
  115. 115. • Fasten Improvement • Fun • Innovation • Recruiting •
  116. 116. • Fasten Improvement • Fun • Innovation • Recruiting • • YUI Contributor
  117. 117. jQuery Prototype Dojo GWT
  118. 118. • JavaScript
  119. 119. • JavaScript •
  120. 120. • JavaScript • • JavaScript
  121. 121. • JavaScript • • JavaScript •
  122. 122. • JavaScript • • JavaScript • •
  123. 123. • JavaScript • • JavaScript • • • QA
  124. 124. • JavaScript • • JavaScript • • • QA •
  125. 125. IDE
  126. 126. IDE ...
  127. 127. Aptana
  128. 128. no.
  129. 129. • • ASP, PHP, RoR, Python, JAVA... • • 3rd Party
  130. 130. YUI
  131. 131. YUI http://www.wallpapergate.com/wallpaper22725.html http://josephj.com/training/nctu/
  132. 132. 1. HTML Yahoo!
  133. 133. <div id=”nav”> <div class=”hd”> <h2> </h2> </div> <div class=”bd”> <p> </p> </div> <div class=”ft”> <a href=”...”> ... </a> </div> </div>
  134. 134. <div id=”nav”> <div class=”hd”> <h2> </h2> </div> <div class=”bd”> <p> </p> </div> <div class=”ft”> <a href=”...”> ... </a> </div> </div>
  135. 135. <div id=”nav”> <div class=”hd”> <h2> </h2> </div> <div class=”bd”> ID <p> </p> </div> <div class=”ft”> <a href=”...”> ... </a> </div> </div>
  136. 136. <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>
  137. 137. yhtw_masthead ykpmt ykpsb ykpimt ykpadv ykpimqa ykpimr ykpug ykpiht ykpiht
  138. 138. ykpsb • ykp + prefix • sb search box • inc/search_box.php
  139. 139. 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>
  140. 140. 1 HTML 3 Mins http://josephj.com/training/nctu/html-module.html 1. id 2. hd, bd, ft class 3. CSS font-weight:bold; font-size:16px; background:#ffe; color:#369;
  141. 141. 2. YUI Grids DIV + CSS http://developer.yahoo.com/yui/grids/builder/
  142. 142. YUI Grid Builder http://developer.yahoo.com/yui/grids/builder/
  143. 143. 950px 240px 50%, 50%
  144. 144. 3. YUI AJAX Web 2.0 http://josephj.com/training/nctu/yui-ajax.html
  145. 145. YUI AJAX YUI AJAX Connection Manager A
  146. 146. YUI AJAX YUI AJAX Connection Manager 1. Request A
  147. 147. YUI AJAX YUI AJAX Connection Manager 2. Request 1. Request A A
  148. 148. YUI AJAX YUI AJAX Connection Manager 2. Request 1. Request A 3. A
  149. 149. YUI AJAX YUI AJAX Connection Manager 2. Request 1. Request A 3. A 4.
  150. 150. YUI AJAX AJAX A
  151. 151. YUI AJAX AJAX 1. JavaScript Request A
  152. 152. YUI AJAX AJAX 2. Request 1. JavaScript Request A A
  153. 153. YUI AJAX AJAX 2. Request 1. JavaScript Request A 3. A
  154. 154. YUI AJAX AJAX 2. Request 1. JavaScript Request A 3. A 4.
  155. 155. 3 YUI Connection http://josephj.com/training/nctu/yui-ajax.html
  156. 156. 4. YUI Get Utility http://josephj.com/training/nctu/yui-get.html
  157. 157. JavaScript
  158. 158. JavaScript AJAX http://tw.yahoo.com http://tw.lifestyle.yahoo.com
  159. 159. JavaScript AJAX http://tw.yahoo.com http://tw.lifestyle.yahoo.com <script src=”...”></script>
  160. 160. JavaScript AJAX http://tw.yahoo.com http://tw.lifestyle.yahoo.com <script src=”...”></script> http://josephj.com/training/ncu-tsung/script.html
  161. 161. JavaScript AJAX http://tw.yahoo.com http://tw.lifestyle.yahoo.com <script src=”...”></script> <script src=”http://www.josephjiang.com/training/ncu-tsung/data.js “></script> http://josephj.com/training/ncu-tsung/script.html
  162. 162. JavaScript AJAX http://tw.yahoo.com http://tw.lifestyle.yahoo.com <script src=”...”></script> var outputString = ‘hello’; getData(outputString); <script src=”http://www.josephjiang.com/training/ncu-tsung/data.js “></script> http://josephj.com/training/ncu-tsung/script.html
  163. 163. JavaScript AJAX http://tw.yahoo.com http://tw.lifestyle.yahoo.com <script src=”...”></script> <script> function getData (data) { var outputString = ‘hello’; alert(data); getData(outputString); } </script> <script src=”http://www.josephjiang.com/training/ncu-tsung/data.js “></script> http://josephj.com/training/ncu-tsung/script.html
  164. 164. JavaScript “ ”
  165. 165. http://api.flickr.com/services/rest/? method=flickr.photos.search&api_key=d498ec869768ecea276a7cb3906241d9&text= &format=json
  166. 166. <script src=”http://api.flickr.com/services/rest/? method=flickr.photos.search&api_key=d498ec869768ecea276a7cb3906241d9&text= &format=json “></script>
  167. 167. YUI Get Utility
  168. 168. YUI Get Utility <script/> •
  169. 169. YUI Get Utility <script/> • • YAHOO.util.Get.script(url)
  170. 170. YUI Get Utility <script/> • • YAHOO.util.Get.script(url) • ex1. YUI jQuery...
  171. 171. YUI Get Utility <script/> • • YAHOO.util.Get.script(url) • ex1. YUI jQuery... • ex2. JSON
  172. 172. YUI Get Utility <script/> • • YAHOO.util.Get.script(url) • ex1. YUI jQuery... • ex2. JSON <link/> •
  173. 173. YUI Get Utility <script/> • • YAHOO.util.Get.script(url) • ex1. YUI jQuery... • ex2. JSON <link/> • • YAHOO.util.Get.css(url)
  174. 174. YUI Get Utility <script/> • • YAHOO.util.Get.script(url) • ex1. YUI jQuery... • ex2. JSON <link/> • • YAHOO.util.Get.css(url) • ex.
  175. 175. 4 YUI Get Utility http://josephj.com/training/nctu/yui-get.html
  176. 176. 5. YUI
  177. 177. 5 YUI http://josephj.com/training/nctu/yui-menu.html 1. new YAHOO.widget.MenuBar([ id]); YUI 2. render()
  178. 178. 5 YUI http://josephj.com/training/nctu/yui-menu.html (true false) autosubmenudisplay hidedelay n (true false) lazyload
  179. 179. 6. YUI UI
  180. 180. YUI Button HTML YUI Button
  181. 181. 6 YUI http://josephj.com/training/nctu/yui-button.html 1. new YAHOO.widget.Button([ id]);
  182. 182. 6 YUI http://josephj.com/training/nctu/yui-button.html 1. new YAHOO.widget.Button([ id]);
  183. 183. 7. YUI Web 2.0
  184. 184. YUI Container
  185. 185. YUI Container YAHOO.widget.Panel
  186. 186. YUI Container YAHOO.widget.Dialog YAHOO.widget.Panel
  187. 187. YUI Container YAHOO.widget.Dialog YAHOO.widget.Panel YAHOO.widget.Panel
  188. 188. YUI Container YAHOO.widget.Dialog YAHOO.widget.Panel YAHOO.widget.Panel YAHOO.widget.SimpleDialog
  189. 189. 7 YUI http://josephj.com/training/nctu/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();
  190. 190. 7 YUI http://josephj.com/training/nctu/yui-panel.html close fixedcenter modal underlay shadow’, ‘matte’ visible width { 1: 1, 2: 2}
  191. 191. Questions?
  192. 192. Thank You http://developer.yahoo.com/yui/ josephj@yahoo-inc.com

×