Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html5不只是个传说

3,769 views

Published on

Html5不只是个传说

Published in: Technology
  • Be the first to comment

Html5不只是个传说

  1. 1. HTML5 不只是个传说 钟志 百度前端研发 QQ:772637 新浪微博: http://t.sina.com.cn/zhongzhi 邮箱: [email_address] 2010 年 Webrebuild 年会广州站
  2. 2. 2022
  3. 3. HTML5 到 2022 年才会成为 推荐标准。 HTML5 规范主编 Ian Hickson http://blogs.techrepublic.com.com/programming-and-development/?p =718
  4. 4. 那时 哥 早已不在江湖…
  5. 5. 各浏览器厂商的态度
  6. 6. Apple likes HTML5 http://www.apple.com/html5/
  7. 7. Google likes HTML5 http://www.html5rocks.com/
  8. 8. Mozilla (Firefox) likes HTML5 https://developer.mozilla.org/en/HTML/HTML5
  9. 9. Opera likes HTML5 http://www.opera.com/docs/specs/presto25/html5/
  10. 10. Microsoft likes HTML5 http://ie.microsoft.com/testdrive/
  11. 11. 我真的只做个旁观者? 反思:
  12. 12. Canvas
  13. 13. DEMO
  14. 14. 学习 HTML5 ! 顿悟:
  15. 15. http://joshduck.com/periodic-table.html
  16. 16. http://joshduck.com/periodic-table.html
  17. 17. <!DOCTYPE html>
  18. 18. <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot; http://www.w3.org/1999/xhtml &quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;/>
  19. 19. <!DOCTYPE html> <html lang=&quot;en&quot;> <head> <meta charset=utf-8&quot;/>
  20. 20. <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style>
  21. 21. 标签升级
  22. 24. 国内浏览器市场占有率 观看在线效果
  23. 25. 最 大 障碍
  24. 26. document.createElement 解决方案?
  25. 27. document.createElement('article'); document.createElement('nav'); document.createElement('section'); document.createElement('header'); document.createElement('footer'); ...
  26. 28. <!DOCTYPE html> <html> <head> <meta charset=&quot;utf-8&quot; /> <title>HTML 5 demo</title> <!--[if IE]> <script src=&quot;http://html5shiv.googlecode.com/svn/trunk/html5.js&quot;> </script> <![endif]--> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <!-- we’re ready for HTML 5 goodness now --> </body> </html>
  27. 29. JavaScript APIs <ul><li>Canvas </li></ul><ul><li>Drag & Drop </li></ul><ul><li>History </li></ul><ul><li>Inline Editing </li></ul><ul><li>Messaging </li></ul><ul><li>Offline Apps </li></ul><ul><li>Video & Audio </li></ul><ul><li>Geolocation </li></ul><ul><li>Local Storage </li></ul><ul><li>Selectors </li></ul><ul><li>Server Events </li></ul><ul><li>Web Sockets </li></ul><ul><li>Workers </li></ul>
  28. 30. 在项目中使用 HTML5 实战:
  29. 31. canvas 在新浪微博中的应用 IE 浏览器使用 filter 滤镜或者 excanvas
  30. 32. HTML5 在 WebIM 中的应用 <ul><li>localStorage </li></ul><ul><li>postMessage </li></ul><ul><li>window.navigator.onLine </li></ul><ul><li>userData </li></ul><ul><li>window.opener </li></ul><ul><li>js onError </li></ul>IE 的处理方式
  31. 33. Form2.0 在 Mobile 开发中的应用
  32. 34. geolocation 在 Mobile 开发中的应用
  33. 35. 总结 今天我们回顾了 HTML5 新增的语义化标签、简单介绍了 HTML5 APIs 的一些应用以及在项目中对 HTML5 的实践
  34. 36. 相关资源 <ul><li>http://html5doctor.com/ </li></ul><ul><li>http://html5demos.com/ </li></ul><ul><li>http://ie.microsoft.com/testdrive/ </li></ul><ul><li>http://diveintohtml5.org/ </li></ul><ul><li>http://dev.w3.org/html5/html-author/ </li></ul><ul><li>http://joshduck.com/periodic-table.html </li></ul>
  35. 37. 谢谢大家 QQ:772637 新浪微博: http:// t.sina.com.cn/zhongzhi 邮箱: [email_address]

×