Search

Josephj Yui Nctu 2

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    1 Favorite

    Josephj Yui Nctu 2 - Presentation Transcript

    1. 3/24 2009 Yahoo! Course @ NCTU
    2. Agenda • Homework • Sharing • *Simple* JS Architecture • YUI AJAX / Chart / Uploader • Semantic Web • Accessibility 2009 Yahoo! Course @ NCTU
    3. Homework 2009 Yahoo! Kimo Campus Recruiting
    4. http://josephj.com/entry.php?id=224 http://140.113.88.2/wsa_hw2.htm YUI GET YUI Grids Meta charset script </body> YAHOO.util.Event http://140.113.214.2/~windsp/YHW/index.html IE6 Quirks Mode Code JavaScript http://140.113.214.2/~cltsai/hw2/ http://www.cs.nctu.edu.tw/~limc/yahoo/yahoo_hw2.html 2009 Yahoo! Course @ NCTU
    5. • + API http://tw.developer.yahoo.com/knowledge/api.php#SEARCH ipod: http://tw.knowledge.yahooapis.com/v1/SEARCH?appid=Fbn2UILIkYoPqtaNTG6aFYgkHY9piA2A8A-- &p=ipod&format=json&callback=getData 2009 Yahoo! Course @ NCTU
    6. http://tw.knowledge.yahooapis.com/v1/SEARCH?appid=Fbn2UILIkYoPqtaNTG6aFYgkHY9piA2A8A-- &p=ipod&format=json&callback=getData 2009 Yahoo! Course @ NCTU
    7. http://josephj.com/training/nctu/homework-1.html YUI GET http://josephj.com/training/nctu/homework-2.html + http://developer.yahoo.com/yql/console 2009 Yahoo! Course @ NCTU
    8. Sharing 2009 Yahoo! Kimo Campus Recruiting
    9. 3/22 http://www.slideshare.net/secret/ Mq3W9SHxniXLN3 2009 Yahoo! Kimo Campus Recruiting
    10. Yahoo! ... http://www.slideshare.net/secret/DqGOKP0GLsI4Lk 2009 Yahoo! Course @ NCTU
    11. ... • Done • title • • • • Todo • • Static File Build Process 2009 Yahoo! Course @ NCTU
    12. *Simple* JS Architecture JavaScript 2009 Yahoo! Kimo Campus Recruiting
    13. • • JavaScript • 30 JavaScript
    14. masthead nav article ad relate-link ykpiht
    15. CSS JavaScript
    16. JavaScript HTML i9/class.js
    17. http://140.113.87.169/~joseph/nctu2/ #masthead $ cp -R /home/josephj/public_html/nctu2 ~/public_html/. $ vim ~/public_html/nctu2/i9/class.js setTimeout(function() { var oAnim = new YAHOO.util.ColorAnim(‘this’, { backgroundColor:{ to:#ff0000 } }; oAnim.animate(); }, 1000) Ps. VIM WinScp http://winscp.net/download/winscp421.exe 2009 Yahoo! Course @ NCTU
    18. YUI Library AJAX / Charts / Uploader 2009 Yahoo! Kimo Campus Recruiting
    19. 1. YUI AJAX Web 2.0 http://josephj.com/training/nctu2/sample/yui-ajax.html
    20. YUI AJAX YUI AJAX Connection Manager 2. Request 1. Request A 3. A 4.
    21. YUI AJAX AJAX 2. Request 1. JavaScript Request A 3. A 4.
    22. 3 YUI Connection http://josephj.com/training/nctu2/sample/yui-ajax.html
    23. 2. YUI Charts JavaScript Flash http://josephj.com/training/nctu2/sample/yui-chart.html
    24. 3. YUI Uploader Flash http://josephj.com/training/nctu/yui-uploader.html
    25. YUI Uploader
    26. Semantic Web 2009 Yahoo! Kimo Campus Recruiting
    27. Semantic vs. HTML
    28. • • • Dreamweaver • Search Engine Optimization
    29. • HTML <table/ > • HTML • HTML
    30. Layered Semantic Markup HTML JavaScript CSS
    31. Semantic • HTML • HTML • CSS JavaScript • Dreamweaver Frontpage
    32. HTML
    33. • http://www.w3schools.com/html/ •
    34. <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http:// www.w3.org/TR/html4/strict.dtd\"> <html> <head> <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\"> <title> </title> </head> <body> </body> </html>
    35. <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http:// www.w3.org/TR/html4/strict.dtd\"> <html> <head> <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\"> <title> </title> </head> <body> </body> </html> DOCTYPE X HTML
    36. <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http:// www.w3.org/TR/html4/strict.dtd\"> <html> <head> <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\"> <title> </title> </head> <body> </body> </html>
    37. <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http:// www.w3.org/TR/html4/strict.dtd\"> <html> <head> <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\"> <title> </title> </head> <body> </body> </html>
    38. <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http:// www.w3.org/TR/html4/strict.dtd\"> <html> <head> <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\"> <title> </title> </head> <body> </body> </html>
    39. <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http:// www.w3.org/TR/html4/strict.dtd\"> <html> <head> <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\"> <title> </title> </head> <body> </body> </html>
    40. • • <h1> ~ <h6> • h1
    41. <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http:// www.w3.org/TR/html4/strict.dtd\"> <html> <head> <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\"> <title> </title> </head> <body> <h1>1 HTML</h1> <p>HTML </p> <h2>HTML </h2> <p> </p> <h3> </h3> <p> </p> </body> </html>
    42. <p>~</p> <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http:// www.w3.org/TR/html4/strict.dtd\"> <html> <head> <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\"> <title> </title> </head> <body> <h1>1 HTML</h1> <p>HTML </p> <h2>HTML </h2> <p> </p> <h3> </h3> <p> </p> </body> </html>
    43. <em>~</em> <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http:// www.w3.org/TR/html4/strict.dtd\"> <html> <head> <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\"> <title> </title> </head> <body> <h1>1 HTML</h1> <p> HTML <em>Semantic </em> </p> </body> </html>
    44. <strong>~</strong> <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http:// www.w3.org/TR/html4/strict.dtd\"> <html> <head> <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\"> <title> </title> </head> <body> <h1>1 HTML</h1> <p> HTML <strong>Semantic </strong> </p> </body> </html>
    45. <div>~</div> <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/ strict.dtd\"> <html> <head> <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\"> <title> </title> </head> <body> <div> <a href=”about.html”> </a> <a href=”forum.php”> </a> </div> <div> <h1> </h1> <p> josephj.com <p> </div> </body> </html>
    46. <span>~</span> <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/ strict.dtd\"> <html> <head> <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\"> <title> </title> </head> <body> <div> <h1> </h1> <div> <span> </span> <a href=”...”>Yahoo! </a> </div> </div> </body> </html>
    47. Orz | |○ 这样 ( )
    48. <dl> <dt>Orz</dt> <dd> | |○ </dd> 这样 <dt> </dt> <dd> ( ) </dd> </dl>
    49. Nike Dphiten Nike Dry Fit Nike Casio Nike Adidas Sony Cybershot Dakine
    50. <h2> </h2> <ul> <li>Nike </li> <li> </li> <li>Dphiten </li> <li>Nike Dry Fit </li> <li>Nike </li> <li> </li> <li>Casio </li> <li> </li> <li>Nike </li> <li>Adidas </li> <li>Sony Cybershot </li> <li>Dakine </li> </ul>
    51. 4:00 (Energy-in + ) 5:00 GPS 5:00 ~ 10:00 ( , ) 11:00 ~ 12:00 13:00 ~ 16:00 16:00 ~ 19:00 , , 19:00 ~ 21:00 21:30
    52. <h2> </h2> <ol> <li>4:00 (Energy-in + )</li> <li>5:00 GPS </li> <li>5:00 ~ 10:00 ( , ) </li> <li>11:00 ~ 12:00 </li> <li>13:00 ~ 16:00 </li> <li>16:00 ~ 19:00 , , </li> <li>19:00 ~ 21:00 </li> <li>21:30 </li> </ol>
    53. <table></table> 120G + 1G RAM Eee PC 8G + 1G RAM Intel 800MHz / 120G HDD / 1G RAM Intel Mobile / 8G HDD (Flash) / 1G RAM 29,900 14,490 Vista XP 130 30 Web
    54. <table></table> <h3> </h3> <table> <tr> <th></th><th> 120G + 1G RAM </th><th> Eee PC 8G + 1G RAM </th> </tr> <tr> <th> </th><td>Intel 800MHz / 120G HDD / 1G RAM</td><td>Intel Mobile / 8G HDD (Flash) / 1G RAM</td> </tr> <tr> <th> </th><td>29,900</td><td>14,490</td> </tr> <tr> <th> </th><td>Vista</td><td>XP</td> </tr> <tr> <th> </th><td>130 </td><td>30 Web </td> </tr> <tr> <th> </th><td> </td><td> </td> </tr> <tr> <th> </th><td> </td><td> </td> </tr> <tr> <th> </th><td> </td><td> </td> </tr> </table>
    55. id class class <ol class=\"bibliography\"> <li> <cite>\"Colorimetry, Second Edition\", CIE Publication 15.2-1986, ISBN 3-900-734-00-3.</cite> </li> <li> <cite>\"Cascading Style Sheets, level 1\", H. W. Lie, B. Bos, 17 December 1996.</cite> </li> <li> <cite>\"Cascading Style Sheets, level 2, CSS2 Specification\", B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998</cite> </li> </ol> id id=”navigation”, id=”relate-site”, id=”login”
    56. • The Elements of Meaningful XHTML http://tantek.com/presentations/ 2005/09/elements-of-xhtml/ • Bring on the tables http://www.456bereastreet.com/ archive/200410/ bring_on_the_tables/
    57. Accessibility 2009 Yahoo! Kimo Campus Recruiting
    58. Agenda 1. About 2. Accessibility 3. Usability & AJAX 4. Act Now 5. Conclusion
    59. 1. About
    60. http://www.flickr.com/photos/phploveme/2675997575/in/set-72157606174033384/ 2008/7 UK YDN International Summit
    61. 1
    62. Artur Ortega • • • User Testing
    63. :p Artur
    64. • Ated
    65. • chph + No Script js ... YUI js
    66. • Joshua Yahoo
    67. YDN Evangelist Christian Heilmann 2 Accessibility Hack Day
    68. Accessibility Hack Day http://scriptingenabled.org/ Web 9/19 Hacker User 9/20 London Held by Christian Heilmann
    69. ! Yahoo!
    70. 2. Accessibility
    71. Accessibility means that your pages remain accessible to anyone, under all circumstances, especially when the user suffers from a condition she cannot change, for instance diminished eyesight, or has a browser that does not support (sufficient) JavaScript PPK on JavaScript
    72. • Jackie JAWS Windows/IE • Michael 56K Links Opera Dive Into Accessibility • Bill http://dia.z6i.org Red Hat + Mozilla Tab • Lilian IE Java JavaScript ActiveX Flash CNN.com • Marcus AT&T Marcus Marcus Lynx
    73. 2.1 JS
    74. JS Work • • • • • • Error
    75. JS • • JS • JS • RD JS • IE Web Accessibility Toolbar http://www.visionaustralia.org.au/info.aspx?page=1569 • FF Web Developer Extension https://addons.mozilla.org/en-US/firefox/addon/60
    76. JS
    77. JavaScript 1 JS PHP <script> function formSubmit() { var f = this; f[‘date’].value = f[‘year’].value + ‘/’ + f[‘month’].value + ‘/’ + f[‘day’].value; } </script> <form onSubmit=”formSubmit”> <select name=”year”>...</select> <select name=”month”>...</select> <select name=”day”>...</select> <input type=”hidden” name=”date”> </form> Accessibility Maintenance
    78. JavaScript 2 <form> ... <input type=”reset” onclick=”history.go(-1);” value=” ”> </form> Submit PHP Redirection
    79. JavaScript 3 href <a href=”javascript:createWork('20080916');”>2008/09/16</a> JavaScript #
    80. 2.2
    81. • • •
    82. RD
    83. • tabindex Tab • accesskey • JS • • YUI TabView • YUI Menu
    84. Google Calendar
    85. Library YUI Menu
    86. Library YUI Tabview
    87. JavaScript
    88. 2.3 Screen Reader
    89. Screen Reader • • Screen Reader http://blog.yam.com/twacc/article/10271539 • • • JAWS •
    90. • • •
    91. http://tw.youtube.com/watch?v=AmUPhEVWu_E
    92. HTML • • <font size=”6”> </font> • <titile>Yahoo! </title> • <h1>Yahoo! </h1> • <h2> </h2> • <h3> Mac </h3> • <h2> </h2> http://twiki.corp.yahoo.com/view/Devel/AccessibilityGuidelines Page Structure
    93. HTML • • alt • • • <img src=”...” alt=” ”> http://twiki.corp.yahoo.com/view/Devel/AccessibilityGuidelines Image
    94. 3. Usability User
    95. User Testing Lab
    96. Usability • = User Ability •= • •
    97. AJAX & Usability
    98. AJAX • • Refresh Page • JavaScript • •
    99. AJAX means loading information and updating an interface partially. - Christian Heilmann, Again with Accessibility Usability • •
    100. Awesome AJAX! • AJAX • AJAX • • Usability • User
    101. Danger! Don’t build your website based on assumption!
    102. Why Danger? The World Wide Web (W3) initiative links related information throughout the globe. HTML provides one simple format for providing linked information, and all W3 compatible programs are required to be capable of handling HTML. W3C Team Director Tim Berners-Lee • •
    103. Back Button
    104. Bookmark
    105. Inform the User
    106. Accessibility Accessibility Usability Usability
    107. • SEO • • • User
    108. Usability Accessibility Accessibility Usability
    109. 4. Act Now Accessibility
    110. Audio Captcha
    111. Audio Captcha
    112. Audio Captcha • •
    113. Hacking for Good! Easy YouTube
    114. Accessibility in Yahoo! Messenger Yahoo! Accessibility Program Manager ,Victor Tsaran http://video.yahoo.com/watch/329037/2145363 Flash Video Player CSS OffScreen Flash
    115. Accessibility in Yahoo! Messenger Yahoo! Accessibility Program Manager ,Victor Tsaran http://video.yahoo.com/watch/329037/2145363 <button> OffScreen Flash
    116. Photo epileptic user Mobile disabled user Yahoo! Live Accessibility Testing http://produce.yahoo.com/mquoc/YLive_UR/ http://twiki.corp.yahoo.com/view/Devel/UserResearchForAPG#User_2_Alva
    117. Y! Accessibility Guidelines • • <img/> alt • • <title/>, <h1/>~</h6/> <label/> • • <table/> HTML summary scope • CSS id headers summary • • JS • JS • • • http://twiki.corp.yahoo.com/view/Devel/AccessibilityGuidelines
    118. • Iframe • Web 2.0 TabView • <label/> •
    119. Conclusion
    120. Yahoo!
    121. 0.1%
    122. Customer Fixation
    123. Maximize Our Profit
    124. Maximize Our Users
    125. It’s up to you to make things better. - Christian Heilmann, Again with Accessibility
    126. Thank You! Ps. Adam Wang 2009 Yahoo! Course @ NCTU http://www.flickr.com/photos/adamp3

    + Joseph ChiangJoseph Chiang, 8 months ago

    custom

    649 views, 1 favs, 4 embeds more stats

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 649
      • 587 on SlideShare
      • 62 from embeds
    • Comments 0
    • Favorites 1
    • Downloads 21
    Most viewed embeds
    • 39 views on http://josephj.com
    • 21 views on http://140.113.87.169
    • 1 views on http://localhost
    • 1 views on http://josephjiang.com

    more

    All embeds
    • 39 views on http://josephj.com
    • 21 views on http://140.113.87.169
    • 1 views on http://localhost
    • 1 views on http://josephjiang.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved