0
HTML5 & Web Platform
      Presentation @ SwapSkills
   by Tomoya Asai (aka. dynamis)
Download Please! http://r.dynamis.jp/swapskills
Agenda:




   Download Please! http://r.dynamis.jp/swapskills
Share and Active Users
Browser MarketShare Graph by AXIIS
http://www.axiis.org/examples/BrowserMarketShare.html
Browser MarketShare Graph by AXIIS
http://www.axiis.org/examples/BrowserMarketShare.html
Stats by NetApplications
http://marketshare.hitslink.com/
http://weblogs.mozillazine.org/asa/archives/2010/05/firefox_and_chrome_u.html
http://weblogs.mozillazine.org/asa/archives/2010/05/firefox_and_chrome_u.html
HTML5 is...
photo by Horia http://www.flickr.com/photos/horiavarlan/4273168957/
photo by Horia http://www.flickr.com/photos/horiavarlan/4273168957/
This specification evolves HTML
  and its related APIs to ease the
authoring of Web-based applications.




              ...
HTML5
         Forms

Canvas 2D Graphics Context
        Microdata
  Microdata vocabularies
Cross-document messaging
   Ch...
HTML5
          Forms

Canvas 2D Graphics Context
        Microdata
  Microdata vocabularies
Cross-document messaging
   C...
HTML5
          Forms

Canvas 2D Graphics Context
        Microdata
  Microdata vocabularies
Cross-document messaging
   C...
HTML5                                 HTML5
          Forms                                 Forms

Canvas 2D Graphics Cont...
HTML5 Markup               Forms
   WebFonts         The WebSockets API
  Canvas 2D       Cross-document Messaging
    Web...
HTML5 Markup               Forms
   WebFonts         The WebSockets API
  Canvas 2D       Cross-document Messaging
    Web...
Web
      Reference
Technology Status
CSS, Image, Fonts...
...
...
✴



✴



✴



✴



✴

    ... http://r.dynamis.jp/firefox.next
✴



✴



✴



✴



✴

    ... http://www.slideshare.net/dynamis
JS APIs for Web Apps...
photo by Aron http://www.flickr.com/photos/aarongustafson/2491839081/
: https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms
https://wiki.mozilla.org/User:Mounir.lamouri/
HTML5_Forms
             : https://wiki.mozilla.org/User:Mounir.lamouri/HTML...
photo by 5500 http://www.flickr.com/photos/5500/303849123/
https://dev.mozilla.jp/hacksmozillaorg/websockets-in-firefox/
Web Sockets API
photo by californiaAmy http://www.flickr.com/photos/amyandthomas/3865411819/
Firefox3.6~ https://developer.mozilla.org/en/Using_files_from_web_applications
https://developer.mozilla.org/en/Using_files_from_web_applications


                                                      ...
Firefox3.6~ http://r.dynamis.jp/fontdropdemo
The drag-and-drop API is horrible,
but it has one thing going for it: IE6
implements it, as do Safari and Firefox.



    ...
Firefox3.5~ https://developer.mozilla.org/Ja/DragDrop/Drag_and_Drop
http://hacks.mozilla.org/2009/12/uploading-files-with-xmlhttprequest/
http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html
https://dev.mozilla.jp/hacksmozillaorg/firefox-4-the-html5-parser-inline-svg-speed-and-more/
Video, Animation, 3D ...
Xiph.Org   On2 Tech.   Google
             VP3
 Ogg
Theora       VP4
Vorbis       VP5
             VP6         WebM
      ...
Theora   Firefox 3.5~, WebM   Firefox4~
Xiph.Org          On2 Tech.               Google
                    VP3
 Ogg
Theora              VP4
Vorbis              ...
Firefox.next~ http://24ways.org/2009/going-nuts-with-css-transitions
Firefox.next~ http://24ways.org/2009/going-nuts-with-css-transitions
http://media.24ways.org/2009/14/5/index.html
SVG Test Suite   : http://www.codedread.com/svg-support.php
http://people.mozilla.com/~dynamis/demo/smil/
Firefox.next~ http://www.khronos.org/webgl/wiki/Demo_Repository
Firefox.next~ https://developer.mozilla.org/en/WebGL
https://developer.mozilla.org/en/WebGL/Getting_started_with_WebGL
                                      

                ...
Future Web Platform
: http://vocamus.net/dave/?p=974
Audio API
URL
Firefox3.6~ http://r.dynamis.jp/oryzeademo
 




Firefox3.6~ http://hacks.mozilla.org/2009/10/orientation-for-firefox/
https://developer.mozilla.org/en/Detecting_device_orientation




                            
                           ...
 




https://wiki.mozilla.org/Firefox/Projects/Multitouch_Polish
http://www.mgalli.com/development/drawing/demoapp.html
        




     https://wiki.mozilla.org/Firefox/Projects/Multito...
for more information...
http://hacks.mozilla.org/
https://dev.mozilla.jp/hacksmozillaorg/


https://developer.mozilla.org/en/
Upcoming_Firefox_fea...
http://www.whatwg.org/html5


http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers


http://www.codedread.com/svg-s...
http://tools.mozilla.com/


http://processingjs.org/


http://azarask.in/projects/algorithm-ink/
http://code.google.com/p/...
http://raphaeljs.com/


Cappuccino: http://objective-j.org/
Sproutcore: http://www.sproutcore.com/
JavaScriptMVC: http://j...
http://www.w3.org/TR/css3-fonts/


http://code.google.com/webfonts


http://typekit.com/
http://decomoji.jp/


http://www....
https://cvs.khronos.org/svn/repos/registry/trunk/public/
webgl/doc/spec/WebGL-spec.html


https://developer.mozilla.org/en...
http://www.w3.org/TR/FileAPI/
http://www.w3.org/TR/file-writer-api/


http://www.w3.org/TR/geolocation-API/


https://wiki....
HTML5 and web platform
HTML5 and web platform
HTML5 and web platform
HTML5 and web platform
HTML5 and web platform
HTML5 and web platform
HTML5 and web platform
HTML5 and web platform
HTML5 and web platform
HTML5 and web platform
HTML5 and web platform
HTML5 and web platform
HTML5 and web platform
HTML5 and web platform
HTML5 and web platform
HTML5 and web platform
HTML5 and web platform
HTML5 and web platform
HTML5 and web platform
HTML5 and web platform
HTML5 and web platform
Upcoming SlideShare
Loading in...5
×

HTML5 and web platform

2,845

Published on

20100530
SwapSkills での講演スライド

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

No Downloads
Views
Total Views
2,845
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
20
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×