Josephj Yui Nctu 2

2,658 views
2,564 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,658
On SlideShare
0
From Embeds
0
Number of Embeds
75
Actions
Shares
0
Downloads
38
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Josephj Yui Nctu 2

  1. 1. 3/24 2009 Yahoo! Course @ NCTU
  2. 2. Agenda • Homework • Sharing • *Simple* JS Architecture • YUI AJAX / Chart / Uploader • Semantic Web • Accessibility 2009 Yahoo! Course @ NCTU
  3. 3. Homework 2009 Yahoo! Kimo Campus Recruiting
  4. 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. 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. 6. http://tw.knowledge.yahooapis.com/v1/SEARCH?appid=Fbn2UILIkYoPqtaNTG6aFYgkHY9piA2A8A-- &p=ipod&format=json&callback=getData 2009 Yahoo! Course @ NCTU
  7. 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. 8. Sharing 2009 Yahoo! Kimo Campus Recruiting
  9. 9. 3/22 http://www.slideshare.net/secret/ Mq3W9SHxniXLN3 2009 Yahoo! Kimo Campus Recruiting
  10. 10. Yahoo! ... http://www.slideshare.net/secret/DqGOKP0GLsI4Lk 2009 Yahoo! Course @ NCTU
  11. 11. ... • Done • title • • • • Todo • • Static File Build Process 2009 Yahoo! Course @ NCTU
  12. 12. *Simple* JS Architecture JavaScript 2009 Yahoo! Kimo Campus Recruiting
  13. 13. • • JavaScript • 30 JavaScript
  14. 14. masthead nav article ad relate-link ykpiht
  15. 15. CSS JavaScript
  16. 16. JavaScript HTML i9/class.js
  17. 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. 18. YUI Library AJAX / Charts / Uploader 2009 Yahoo! Kimo Campus Recruiting
  19. 19. 1. YUI AJAX Web 2.0 http://josephj.com/training/nctu2/sample/yui-ajax.html
  20. 20. YUI AJAX YUI AJAX Connection Manager 2. Request 1. Request A 3. A 4.
  21. 21. YUI AJAX AJAX 2. Request 1. JavaScript Request A 3. A 4.
  22. 22. 3 YUI Connection http://josephj.com/training/nctu2/sample/yui-ajax.html
  23. 23. 2. YUI Charts JavaScript Flash http://josephj.com/training/nctu2/sample/yui-chart.html
  24. 24. 3. YUI Uploader Flash http://josephj.com/training/nctu/yui-uploader.html
  25. 25. YUI Uploader
  26. 26. Semantic Web 2009 Yahoo! Kimo Campus Recruiting
  27. 27. Semantic vs. HTML
  28. 28. • • • Dreamweaver • Search Engine Optimization
  29. 29. • HTML <table/ > • HTML • HTML
  30. 30. Layered Semantic Markup HTML JavaScript CSS
  31. 31. Semantic • HTML • HTML • CSS JavaScript • Dreamweaver Frontpage
  32. 32. HTML
  33. 33. • http://www.w3schools.com/html/ •
  34. 34. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> </body> </html>
  35. 35. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> </body> </html> DOCTYPE X HTML
  36. 36. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> </body> </html>
  37. 37. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> </body> </html>
  38. 38. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> </body> </html>
  39. 39. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> </body> </html>
  40. 40. • • <h1> ~ <h6> • h1
  41. 41. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> <h1>1 HTML</h1> <p>HTML </p> <h2>HTML </h2> <p> </p> <h3> </h3> <p> </p> </body> </html>
  42. 42. <p>~</p> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> <h1>1 HTML</h1> <p>HTML </p> <h2>HTML </h2> <p> </p> <h3> </h3> <p> </p> </body> </html>
  43. 43. <em>~</em> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> <h1>1 HTML</h1> <p> HTML <em>Semantic </em> </p> </body> </html>
  44. 44. <strong>~</strong> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http:// www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> <h1>1 HTML</h1> <p> HTML <strong>Semantic </strong> </p> </body> </html>
  45. 45. <div>~</div> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/ strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <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. 46. <span>~</span> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/ strict.dtdquot;> <html> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;> <title> </title> </head> <body> <div> <h1> </h1> <div> <span> </span> <a href=”...”>Yahoo! </a> </div> </div> </body> </html>
  47. 47. Orz | |○ 这样 ( )
  48. 48. <dl> <dt>Orz</dt> <dd> | |○ </dd> 这样 <dt> </dt> <dd> ( ) </dd> </dl>
  49. 49. Nike Dphiten Nike Dry Fit Nike Casio Nike Adidas Sony Cybershot Dakine
  50. 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. 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. 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. 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. 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. 55. id class class <ol class=quot;bibliographyquot;> <li> <cite>quot;Colorimetry, Second Editionquot;, CIE Publication 15.2-1986, ISBN 3-900-734-00-3.</cite> </li> <li> <cite>quot;Cascading Style Sheets, level 1quot;, H. W. Lie, B. Bos, 17 December 1996.</cite> </li> <li> <cite>quot;Cascading Style Sheets, level 2, CSS2 Specificationquot;, B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998</cite> </li> </ol> id id=”navigation”, id=”relate-site”, id=”login”
  56. 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. 57. Accessibility 2009 Yahoo! Kimo Campus Recruiting
  58. 58. Agenda 1. About 2. Accessibility 3. Usability & AJAX 4. Act Now 5. Conclusion
  59. 59. 1. About
  60. 60. http://www.flickr.com/photos/phploveme/2675997575/in/set-72157606174033384/ 2008/7 UK YDN International Summit
  61. 61. 1
  62. 62. Artur Ortega • • • User Testing
  63. 63. :p Artur
  64. 64. • Ated
  65. 65. • chph + No Script js ... YUI js
  66. 66. • Joshua Yahoo
  67. 67. YDN Evangelist Christian Heilmann 2 Accessibility Hack Day
  68. 68. Accessibility Hack Day http://scriptingenabled.org/ Web 9/19 Hacker User 9/20 London Held by Christian Heilmann
  69. 69. ! Yahoo!
  70. 70. 2. Accessibility
  71. 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. 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. 73. 2.1 JS
  74. 74. JS Work • • • • • • Error
  75. 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. 76. JS
  77. 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. 78. JavaScript 2 <form> ... <input type=”reset” onclick=”history.go(-1);” value=” ”> </form> Submit PHP Redirection
  79. 79. JavaScript 3 href <a href=”javascript:createWork('20080916');”>2008/09/16</a> JavaScript #
  80. 80. 2.2
  81. 81. • • •
  82. 82. RD
  83. 83. • tabindex Tab • accesskey • JS • • YUI TabView • YUI Menu
  84. 84. Google Calendar
  85. 85. Library YUI Menu
  86. 86. Library YUI Tabview
  87. 87. JavaScript
  88. 88. 2.3 Screen Reader
  89. 89. Screen Reader • • Screen Reader http://blog.yam.com/twacc/article/10271539 • • • JAWS •
  90. 90. • • •
  91. 91. http://tw.youtube.com/watch?v=AmUPhEVWu_E
  92. 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. 93. HTML • • alt • • • <img src=”...” alt=” ”> http://twiki.corp.yahoo.com/view/Devel/AccessibilityGuidelines Image
  94. 94. 3. Usability User
  95. 95. User Testing Lab
  96. 96. Usability • = User Ability •= • •
  97. 97. AJAX & Usability
  98. 98. AJAX • • Refresh Page • JavaScript • •
  99. 99. AJAX means loading information and updating an interface partially. - Christian Heilmann, Again with Accessibility Usability • •
  100. 100. Awesome AJAX! • AJAX • AJAX • • Usability • User
  101. 101. Danger! Don’t build your website based on assumption!
  102. 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. 103. Back Button
  104. 104. Bookmark
  105. 105. Inform the User
  106. 106. Accessibility Accessibility Usability Usability
  107. 107. • SEO • • • User
  108. 108. Usability Accessibility Accessibility Usability
  109. 109. 4. Act Now Accessibility
  110. 110. Audio Captcha
  111. 111. Audio Captcha
  112. 112. Audio Captcha • •
  113. 113. Hacking for Good! Easy YouTube
  114. 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. 115. Accessibility in Yahoo! Messenger Yahoo! Accessibility Program Manager ,Victor Tsaran http://video.yahoo.com/watch/329037/2145363 <button> OffScreen Flash
  116. 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. 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. 118. • Iframe • Web 2.0 TabView • <label/> •
  119. 119. Conclusion
  120. 120. Yahoo!
  121. 121. 0.1%
  122. 122. Customer Fixation
  123. 123. Maximize Our Profit
  124. 124. Maximize Our Users
  125. 125. It’s up to you to make things better. - Christian Heilmann, Again with Accessibility
  126. 126. Thank You! Ps. Adam Wang 2009 Yahoo! Course @ NCTU http://www.flickr.com/photos/adamp3

×