0
HTML5 Introduction
  Presentation @ OSC 2010 Hokkaido
   by Tomoya Asai (aka. dynamis)
HTML5&CSS3   http://people.opera.com/danield/html5/vuvuzela/
Agenda:
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
Birth of HTML5...
Birth of HTML5...
This specification evolves HTML
  and its related APIs to ease the
authoring of Web-based applications.




              ...
http://whatwg.org/html5 - Abstract
Range of HTML5...
Range of HTML5...
HTML5 Markup               Forms
    WebFonts         The WebSockets API
   Canvas 2D       Cross-document Messaging
     ...
ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
HTML5                        HTML5
    Semantic Elements           Semantic Elements
   Multimedia Elements          Multi...
HTML5                           HTML5
  Elements, Events, APIs          Elements, Events, APIs

Canvas 2D Graphics Context...
HTML5                       HTML5
  Elements, Events, APIs      Elements, Events, APIs

Canvas 2D Graphics Context   HTML ...
HTML5 Markup               Forms
    WebFonts         The WebSockets API
   Canvas 2D       Cross-document Messaging
     ...
HTML5 Markup                  Forms
    WebFonts         The WebSockets API
   Canvas 2D       Cross-document Messaging
  ...
Practical HTML5...
IE6   Canvas
            uupaa    uuCancas.js
SVG
Web
      Reference
Technology Status
CSS, Image, Fonts...
Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
CSS                       : http://css-tricks.com/ex...
Firefox3.6~ http://dev.w3.org/csswg/css3-images/#gradients-
http://people.mozilla.org/~blizzard/2009-11-gradient-button/sample.html
Firefox3.5~ http://www.alistapart.com/articles/cssatten
Japanese Web Fonts Service by Seesaa http://decomoji.jp/
Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face
sample css style rules




          Firefox3.5~ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
JS APIs for Web Apps...
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              ...
SVG Test Suite   : http://www.codedread.com/svg-support.php
http://people.mozilla.com/~dynamis/demo/smil/
Firefox 4~ http://www.khronos.org/webgl/wiki/Demo_Repository
Firefox 4~ 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
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...
Web Only Contents   (   ).
Firefox.3.5~ https://developer.mozilla.org/en/Using_native_JSON
https://developer.mozilla.org/ja/Using_native_JSON




                                 
Firefox.3.5~ http://hacks.mozilla.org/category/video/
http://hacks.mozilla.org/2009/12/autobuffering-video-in-firefox/
Firefox.3.6~ https://developer.mozilla.org/en/CSS/pointer-events
http://demos.hacks.mozilla.org/openweb/pointer-events/
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://caniuse.com/
http://caniuse.com/#cats=HTML5&statuses=rec,pr,cr,wd,ietf


http://wiki....
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 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
Upcoming SlideShare
Loading in...5
×

HTML5 Introduction

6,891

Published on

20100626 OSC Hokkaido での講演スライド
end と書いたページ以降に講演で使わなかったおまけスライドや参照 URL 集があります

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,891
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
99
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 Introduction"

  1. 1. HTML5 Introduction Presentation @ OSC 2010 Hokkaido by Tomoya Asai (aka. dynamis)
  2. 2. HTML5&CSS3 http://people.opera.com/danield/html5/vuvuzela/
  3. 3. Agenda:
  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. Birth of HTML5...
  11. 11. Birth of HTML5...
  12. 12. This specification evolves HTML and its related APIs to ease the authoring of Web-based applications. http://whatwg.org/html5 - Abstract
  13. 13. http://whatwg.org/html5 - Abstract
  14. 14. Range of HTML5...
  15. 15. Range of HTML5...
  16. 16. 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) Codec CSS3 Selectors Microdata CSS3 Transitions XPath ECMAScript 5th
  17. 17. ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
  18. 18. HTML5 HTML5 Semantic Elements Semantic Elements Multimedia Elements Multimedia Elements HTML5 Forms HTML5 Forms Event model & APIs Event model & APIs Offline Events Offline Events Drag & Drop API Drag & Drop API HTML5 Parser HTML5 Parser Canvas 2D Graphics Context HTML Canvas 2D Context Microdata HTML5 Microdata Microdata vocabularies Cross-document messaging HTML5 Web Messaging Channel messaging WHATWG HTML5
  19. 19. HTML5 HTML5 Elements, Events, APIs Elements, Events, APIs Canvas 2D Graphics Context HTML Canvas 2D Context Microdata HTML5 Microdata Microdata vocabularies Cross-document messaging HTML5 Web Messaging Channel messaging device element ping attribute timed track model converting HTML to Atom Next Generation of HTML WHATWG HTML5
  20. 20. HTML5 HTML5 Elements, Events, APIs Elements, Events, APIs Canvas 2D Graphics Context HTML Canvas 2D Context Microdata HTML5 Microdata Microdata vocabularies Cross-document messaging HTML5 Web Messaging Channel messaging <device> ping="" Web Storage timed track HTML→Atom 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 HTML5
  21. 21. 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) Codec CSS3 Selectors Microdata CSS3 Transitions XPath ECMAScript 5th
  22. 22. 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) Codec CSS3 Selectors Microdata WHATWG CSS3 Transitions Canvas HTML5 XPath ECMAScript 5th
  23. 23. Practical HTML5...
  24. 24. IE6 Canvas uupaa uuCancas.js SVG
  25. 25. Web Reference
  26. 26. Technology Status
  27. 27. CSS, Image, Fonts...
  28. 28. Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ CSS : http://css-tricks.com/examples/ButtonMaker/
  29. 29. Firefox3.6~ http://dev.w3.org/csswg/css3-images/#gradients-
  30. 30. http://people.mozilla.org/~blizzard/2009-11-gradient-button/sample.html
  31. 31. Firefox3.5~ http://www.alistapart.com/articles/cssatten
  32. 32. Japanese Web Fonts Service by Seesaa http://decomoji.jp/
  33. 33. Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face
  34. 34. sample css style rules Firefox3.5~ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
  35. 35. JS APIs for Web Apps...
  36. 36. photo by 5500 http://www.flickr.com/photos/5500/303849123/
  37. 37. https://dev.mozilla.jp/hacksmozillaorg/websockets-in-firefox/
  38. 38. Web Sockets API
  39. 39. photo by californiaAmy http://www.flickr.com/photos/amyandthomas/3865411819/
  40. 40. Firefox3.6~ https://developer.mozilla.org/en/Using_files_from_web_applications
  41. 41. https://developer.mozilla.org/en/Using_files_from_web_applications                                 
  42. 42. Firefox3.6~ http://r.dynamis.jp/fontdropdemo
  43. 43. 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
  44. 44. Firefox3.5~ https://developer.mozilla.org/Ja/DragDrop/Drag_and_Drop
  45. 45. http://hacks.mozilla.org/2009/12/uploading-files-with-xmlhttprequest/
  46. 46. http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html
  47. 47. https://dev.mozilla.jp/hacksmozillaorg/firefox-4-the-html5-parser-inline-svg-speed-and-more/
  48. 48. Video, Animation, 3D ...
  49. 49. Xiph.Org On2 Tech. Google VP3 Ogg Theora VP4 Vorbis VP5 VP6 WebM VP7 Matroska VP8 VP8 Vorbis
  50. 50. Theora Firefox 3.5~, WebM Firefox4~
  51. 51. 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/
  52. 52. SVG Test Suite : http://www.codedread.com/svg-support.php
  53. 53. http://people.mozilla.com/~dynamis/demo/smil/
  54. 54. Firefox 4~ http://www.khronos.org/webgl/wiki/Demo_Repository
  55. 55. Firefox 4~ https://developer.mozilla.org/en/WebGL
  56. 56. https://developer.mozilla.org/en/WebGL/Getting_started_with_WebGL                                
  57. 57. Future Web Platform
  58. 58. : http://vocamus.net/dave/?p=974
  59. 59. Firefox3.6~ http://r.dynamis.jp/oryzeademo
  60. 60.   Firefox3.6~ http://hacks.mozilla.org/2009/10/orientation-for-firefox/
  61. 61. https://developer.mozilla.org/en/Detecting_device_orientation                                              
  62. 62.   https://wiki.mozilla.org/Firefox/Projects/Multitouch_Polish
  63. 63. http://www.mgalli.com/development/drawing/demoapp.html   https://wiki.mozilla.org/Firefox/Projects/Multitouch_Polish/DOM_Events/Examples
  64. 64. Web Only Contents ( ).
  65. 65. Firefox.3.5~ https://developer.mozilla.org/en/Using_native_JSON
  66. 66. https://developer.mozilla.org/ja/Using_native_JSON      
  67. 67. Firefox.3.5~ http://hacks.mozilla.org/category/video/
  68. 68. http://hacks.mozilla.org/2009/12/autobuffering-video-in-firefox/
  69. 69. Firefox.3.6~ https://developer.mozilla.org/en/CSS/pointer-events
  70. 70. http://demos.hacks.mozilla.org/openweb/pointer-events/
  71. 71. for more information...
  72. 72. 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
  73. 73. http://www.whatwg.org/html5 http://caniuse.com/ http://caniuse.com/#cats=HTML5&statuses=rec,pr,cr,wd,ietf http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers http://www.codedread.com/svg-support.php
  74. 74. 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/
  75. 75. http://raphaeljs.com/ Cappuccino: http://objective-j.org/ Sproutcore: http://www.sproutcore.com/ JavaScriptMVC: http://javascriptmvc.com/ Ample SDK: http://www.amplesdk.com/ Gianduia
  76. 76. http://www.w3.org/TR/css3-fonts/ http://code.google.com/webfonts http://typekit.com/ http://decomoji.jp/ http://www.fontsquirrel.com/fontface/generator
  77. 77. 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
  78. 78. 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.

×