HTML5 and web platform

3,126 views

Published on

20100530
SwapSkills での講演スライド

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

No Downloads
Views
Total views
3,126
On SlideShare
0
From Embeds
0
Number of Embeds
59
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML5 and web platform

  1. 1. HTML5 & Web Platform Presentation @ SwapSkills by Tomoya Asai (aka. dynamis)
  2. 2. Download Please! http://r.dynamis.jp/swapskills
  3. 3. Agenda: Download Please! http://r.dynamis.jp/swapskills
  4. 4. Share and Active Users
  5. 5. Browser MarketShare Graph by AXIIS http://www.axiis.org/examples/BrowserMarketShare.html
  6. 6. Browser MarketShare Graph by AXIIS http://www.axiis.org/examples/BrowserMarketShare.html
  7. 7. Stats by NetApplications http://marketshare.hitslink.com/
  8. 8. http://weblogs.mozillazine.org/asa/archives/2010/05/firefox_and_chrome_u.html
  9. 9. http://weblogs.mozillazine.org/asa/archives/2010/05/firefox_and_chrome_u.html
  10. 10. HTML5 is...
  11. 11. photo by Horia http://www.flickr.com/photos/horiavarlan/4273168957/
  12. 12. photo by Horia http://www.flickr.com/photos/horiavarlan/4273168957/
  13. 13. This specification evolves HTML and its related APIs to ease the authoring of Web-based applications. http://whatwg.org/html5 - Abstract
  14. 14. HTML5 Forms Canvas 2D Graphics Context Microdata Microdata vocabularies Cross-document messaging Channel messaging ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
  15. 15. HTML5 Forms Canvas 2D Graphics Context Microdata Microdata vocabularies Cross-document messaging Channel messaging device element ping attribute Next Generation of HTML ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
  16. 16. HTML5 Forms Canvas 2D Graphics Context Microdata Microdata vocabularies Cross-document messaging Channel messaging Web SQL Database device element Web Storage ping attribute Indexed Database API Next Generation of HTML The WebSockets API Web Workers Server-Sent Events The WebSocket protocol Geolocation API MathML SVG XMLHttpRequest Level 2 ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
  17. 17. HTML5 HTML5 Forms Forms Canvas 2D Graphics Context HTML Canvas 2D Context Microdata HTML5 Microdata Microdata vocabularies Cross-document messaging HTML5 Web Messaging Channel messaging device element Web Storage ping attribute Indexed Database API Next Generation of HTML The WebSockets API Web Workers Server-Sent Events The WebSocket protocol Geolocation API MathML SVG XMLHttpRequest Level 2 ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
  18. 18. HTML5 Markup Forms WebFonts The WebSockets API Canvas 2D Cross-document Messaging WebGL Server-Sent Events SVG XMLHttpRequest Level 2 Event Listener Indexed Database API Drag & Drop API Offline Events File API Web Storage Geolocation API Web Workers WebM (VP8) CSS3 Selectors Microdata CSS3 Transitions XPath ECMAScript 5th
  19. 19. HTML5 Markup Forms WebFonts The WebSockets API Canvas 2D Cross-document Messaging WebGL Server-Sent Events SVG XMLHttpRequest Level 2 Event Listener Indexed Database API Drag & Drop API Offline Events File API Web Storage Geolocation API Web Workers WebM (VP8) CSS3 Selectors Microdata CSS3 Transitions XPath ECMAScript 5th
  20. 20. Web Reference
  21. 21. Technology Status
  22. 22. CSS, Image, Fonts...
  23. 23. ... ...
  24. 24. ✴ ✴ ✴ ✴ ✴ ... http://r.dynamis.jp/firefox.next
  25. 25. ✴ ✴ ✴ ✴ ✴ ... http://www.slideshare.net/dynamis
  26. 26. JS APIs for Web Apps...
  27. 27. photo by Aron http://www.flickr.com/photos/aarongustafson/2491839081/
  28. 28. : https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms
  29. 29. https://wiki.mozilla.org/User:Mounir.lamouri/ HTML5_Forms : https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms
  30. 30. photo by 5500 http://www.flickr.com/photos/5500/303849123/
  31. 31. https://dev.mozilla.jp/hacksmozillaorg/websockets-in-firefox/
  32. 32. Web Sockets API
  33. 33. photo by californiaAmy http://www.flickr.com/photos/amyandthomas/3865411819/
  34. 34. Firefox3.6~ https://developer.mozilla.org/en/Using_files_from_web_applications
  35. 35. https://developer.mozilla.org/en/Using_files_from_web_applications                                 
  36. 36. Firefox3.6~ http://r.dynamis.jp/fontdropdemo
  37. 37. The drag-and-drop API is horrible, but it has one thing going for it: IE6 implements it, as do Safari and Firefox. Ian Hickson http://twitter.com/Hixie/status/4075253361
  38. 38. Firefox3.5~ https://developer.mozilla.org/Ja/DragDrop/Drag_and_Drop
  39. 39. http://hacks.mozilla.org/2009/12/uploading-files-with-xmlhttprequest/
  40. 40. http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html
  41. 41. https://dev.mozilla.jp/hacksmozillaorg/firefox-4-the-html5-parser-inline-svg-speed-and-more/
  42. 42. Video, Animation, 3D ...
  43. 43. Xiph.Org On2 Tech. Google VP3 Ogg Theora VP4 Vorbis VP5 VP6 WebM VP7 Matroska VP8 VP8 Vorbis
  44. 44. Theora Firefox 3.5~, WebM Firefox4~
  45. 45. Xiph.Org On2 Tech. Google VP3 Ogg Theora VP4 Vorbis VP5 VP6 WebM VP7 Matroska VP8 VP8 Vorbis Container Video Audio WebM FAQ: http://www.webmproject.org/about/faq/
  46. 46. Firefox.next~ http://24ways.org/2009/going-nuts-with-css-transitions
  47. 47. Firefox.next~ http://24ways.org/2009/going-nuts-with-css-transitions
  48. 48. http://media.24ways.org/2009/14/5/index.html
  49. 49. SVG Test Suite : http://www.codedread.com/svg-support.php
  50. 50. http://people.mozilla.com/~dynamis/demo/smil/
  51. 51. Firefox.next~ http://www.khronos.org/webgl/wiki/Demo_Repository
  52. 52. Firefox.next~ https://developer.mozilla.org/en/WebGL
  53. 53. https://developer.mozilla.org/en/WebGL/Getting_started_with_WebGL                                
  54. 54. Future Web Platform
  55. 55. : http://vocamus.net/dave/?p=974
  56. 56. Audio API URL
  57. 57. Firefox3.6~ http://r.dynamis.jp/oryzeademo
  58. 58.   Firefox3.6~ http://hacks.mozilla.org/2009/10/orientation-for-firefox/
  59. 59. https://developer.mozilla.org/en/Detecting_device_orientation                                              
  60. 60.   https://wiki.mozilla.org/Firefox/Projects/Multitouch_Polish
  61. 61. http://www.mgalli.com/development/drawing/demoapp.html   https://wiki.mozilla.org/Firefox/Projects/Multitouch_Polish/DOM_Events/Examples
  62. 62. for more information...
  63. 63. http://hacks.mozilla.org/ https://dev.mozilla.jp/hacksmozillaorg/ https://developer.mozilla.org/en/ Upcoming_Firefox_features_for_developers https://developer.mozilla.org/ja/Firefox_3.6_for_developers http://www.whatwg.org/html5 http://www.slideshare.net/myakura/presentations
  64. 64. http://www.whatwg.org/html5 http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers http://www.codedread.com/svg-support.php
  65. 65. http://tools.mozilla.com/ http://processingjs.org/ http://azarask.in/projects/algorithm-ink/ http://code.google.com/p/contextfree/source/browse/trunk/ contextfree.js http://code.google.com/p/uupaa-js-spinoff/
  66. 66. http://raphaeljs.com/ Cappuccino: http://objective-j.org/ Sproutcore: http://www.sproutcore.com/ JavaScriptMVC: http://javascriptmvc.com/ Ample SDK: http://www.amplesdk.com/ Gianduia
  67. 67. http://www.w3.org/TR/css3-fonts/ http://code.google.com/webfonts http://typekit.com/ http://decomoji.jp/ http://www.fontsquirrel.com/fontface/generator
  68. 68. https://cvs.khronos.org/svn/repos/registry/trunk/public/ webgl/doc/spec/WebGL-spec.html https://developer.mozilla.org/en/WebGL http://learningwebgl.com/cookbook/ http://www.khronos.org/webgl/ http://www.khronos.org/webgl/wiki/Demo_Repository
  69. 69. http://www.w3.org/TR/FileAPI/ http://www.w3.org/TR/file-writer-api/ http://www.w3.org/TR/geolocation-API/ https://wiki.mozilla.org/Audio_Data_API https://developer.mozilla.org/en/DOM/ window.onmozorientation

×