Your SlideShare is downloading. ×
  • Like
Josephj Yui Nctu 2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Josephj Yui Nctu 2

  • 2,170 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,170
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
38
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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 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. <!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. <!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. <!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. <!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. <!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. • • <h1> ~ <h6> • h1
  • 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. <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. <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. <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. <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. <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. 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=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. • 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