Your SlideShare is downloading. ×
0
"HTML5" & Browsers     Slides @ OSC 2010 Fukuoka  by Tomoya ASAI (aka. dynamis)          Fractal Firefox Background Image:...
Agenda
This specification evolves HTML  and its related APIs to ease theauthoring of Web-based applications.                     ...
http://whatwg.org/html5 - Abstract
http://whatwg.org/html5 - Abstract
http://whatwg.org/html5 - Abstract
http://whatwg.org/html5 - Abstract
It is necessary to evolve HTMLincrementally. The attempt to   get the world to switch toXML, ... all at once didnt work.  ...
Tim Berners-Lee   : http://dig.csail.mit.edu/breadcrumbs/node/166
The drag-and-drop API is horrible,but it has one thing going for it: IE6implements it, as do Safari and Firefox.          ...
Drag & Drop API                          IE6                          Safari  Firefox            Ian Hickson    http://twi...
ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
HTML5 Markup               Forms   WebFonts         The WebSockets API  Canvas 2D       Cross-document Messaging    WebGL ...
HTML5 Markup                  Forms   WebFonts         The WebSockets API  Canvas 2D       Cross-document Messaging    Web...
Web                (             "HTML5")  Web Applications 1.0                           (CSS)   WHATWG - HTML5          ...
WHATWG - HTML5                     Web Storage          Forms                    Indexed Database API                     ...
WHATWG - HTML5                      W3C - HTML5    Semantic Elements                Semantic Elements   Multimedia Element...
"HTML5"                            by Bruce Lawsonhttp://www.brucelawson.co.uk/2010/meet-newt-new-exciting-web-technologies/
11   VMWare   (   )
(   )
...
PC   ...
"Firefox"
Nokia Maemo
IE8 on Atom PC   Kraken Bench   Firefox
http://hacks.mozilla.org/2010/12/websockets-disabled-in-firefox-4/
http://www.adambarth.com/experimental/websocket.pdf
http://www.adambarth.com/experimental/websocket.pdf
1   (   )
Web DesignCSS, Image, Fonts...
Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face
http://decomoji.jp/
Firefox3.5~ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
: http://people.mozilla.org/~jdaggett/webfontsfuture.pdf
http://hacks.mozilla.org/2009/10/font-control-for-designers/
Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
http://hacks.mozilla.org/2010/07/firefox4-beta2/
http://hacks.mozilla.org/2010/06/css3-calc/
http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
http://hacks.mozilla.org/2010/08/mozelement/
http://webkit.org/blog/176/css-canvas-drawing/
http://webkit.org/blog/176/css-canvas-drawing/
JS   mozSetImageElement()
http://hacks.mozilla.org/2010/08/mozelement/
http://hacks.mozilla.org/2010/08/mozelement/
http://www.w3.org/2005/Incubator/audio/
http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/
http://twitter.com/cherenkov/status/21614170698
Native MultimediaVideo, Audio, 3D ...
Firefox   <video>VLC Web Browser Plugin: http://www.videolan.org/vlc/download-macosx.html
autobuffer               preload
          	             	  	                    	      	                	        	         	          	                   ...
http://shaver.off.net/diary/2010/08/27/free-as-in-smokescreen/                         OSS
http://www.w3.org/2005/Incubator/audio/
http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/
http://twitter.com/cherenkov/status/21614170698
http://www.khronos.org/webgl/
                                                        	       	                     	           	     	                 ...
Firefox 4~ https://developer.mozilla.org/en/WebGL
Application PlatformJS APIs for Web Apps...
http://d.hatena.ne.jp/javascripter/20100404/
http://host/path?query#fragment
https://dev.mozilla.jp/hacksmozillaorg/websockets-in-firefox/
http://hacks.mozilla.org/2010/08/firefox-4-http-strict-transport-security-force-https/
                	                	               	     	         	  	 	 	                   	  	 	  	 	 	 	 	 	 	 	 	 	 	 ...
http://r.dynamis.jp/mozhacks
One Point Q&A
Theora   Firefox 3.5~, WebM   Firefox4~
Xiph.Org          On2 Tech.               Google                    VP3 OggTheora              VP4Vorbis              VP5 ...
Referencesfor more information...
http://hacks.mozilla.org/https://dev.mozilla.jp/hacksmozillaorg/https://developer.mozilla.org/en/Upcoming_Firefox_features...
http://www.slideshare.net/myakura/presentationshttp://www.slideshare.net/myakura/microdata-a-primerhttp://people.mozilla.o...
http://www.whatwg.org/html5http://caniuse.com/http://caniuse.com/#cats=HTML5&statuses=rec,pr,cr,wd,ietfhttp://wiki.whatwg....
http://hacks.mozilla.org/http://html5rocks.com/http://developer.apple.com/safaridemos/http://ie.microsoft.com/testdrive/ht...
http://html5gallery.com/http://www.scribd.com/doc/30964170/Scribd-in-HTML5http://280slides.com/http://www.youtube.com/html5
https://gaming.mozillalabs.com/http://www.canvasdemos.com/type/games/http://benfirshman.com/projects/jsnes/http://www.dextr...
http://tools.mozilla.com/http://processingjs.org/http://azarask.in/projects/algorithm-ink/http://code.google.com/p/context...
http://d.hatena.ne.jp/uupaa/searchdiary?word=*[uupaa.js]http://raphaeljs.com/http://g.raphaeljs.com/Cappuccino: http://obj...
http://www.w3.org/TR/css3-fonts/http://code.google.com/webfontshttp://typekit.com/http://decomoji.jp/http://www.fontsquirr...
http://www.khronos.org/webgl/http://www.khronos.org/webgl/wiki/Demo_Repositoryhttps://developer.mozilla.org/en/WebGLhttp:/...
http://www.w3.org/TR/FileAPI/http://www.w3.org/TR/file-writer-api/http://www.w3.org/TR/geolocation-API/https://wiki.mozilla...
http://www.w3.org/Style/CSS/current-workhttps://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec....
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
HTML5 and Browsers
Upcoming SlideShare
Loading in...5
×

HTML5 and Browsers

3,834

Published on

20101211
OSC Fukuoka で使用したスライド(公開用に若干修正)

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

No Downloads
Views
Total Views
3,834
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
40
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 and Browsers"

  1. 1. "HTML5" & Browsers Slides @ OSC 2010 Fukuoka by Tomoya ASAI (aka. dynamis) Fractal Firefox Background Image: http://r.dynamis.jp/fractalfx
  2. 2. Agenda
  3. 3. This specification evolves HTML and its related APIs to ease theauthoring of Web-based applications. http://whatwg.org/html5 - Abstract
  4. 4. http://whatwg.org/html5 - Abstract
  5. 5. http://whatwg.org/html5 - Abstract
  6. 6. http://whatwg.org/html5 - Abstract
  7. 7. http://whatwg.org/html5 - Abstract
  8. 8. It is necessary to evolve HTMLincrementally. The attempt to get the world to switch toXML, ... all at once didnt work. Tim Berners-Lee : http://dig.csail.mit.edu/breadcrumbs/node/166
  9. 9. Tim Berners-Lee : http://dig.csail.mit.edu/breadcrumbs/node/166
  10. 10. The drag-and-drop API is horrible,but it has one thing going for it: IE6implements it, as do Safari and Firefox. Ian Hickson http://twitter.com/Hixie/status/4075253361
  11. 11. Drag & Drop API IE6 Safari Firefox Ian Hickson http://twitter.com/Hixie/status/4075253361
  12. 12. ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
  13. 13. HTML5 Markup Forms WebFonts The WebSockets API Canvas 2D Cross-document Messaging WebGL Server-Sent Events SVG XMLHttpRequest Level 2 Event Listener Indexed Database APIDrag & Drop API Offline Events File API Web StorageGeolocation API Web Workers Microformats WebM (VP8) Codec Microdata CSS3 Transitions XPath ECMAScript 5th
  14. 14. HTML5 Markup Forms WebFonts The WebSockets API Canvas 2D Cross-document Messaging WebGL Server-Sent Events SVG XMLHttpRequest Level 2 Event Listener Indexed Database APIDrag & Drop API Offline Events File API Web StorageGeolocation API Web Workers Microformats WebM (VP8) Codec WHATWG Microdata CSS3 Transitions Canvas HTML5 XPath ECMAScript 5th
  15. 15. Web ( "HTML5") Web Applications 1.0 (CSS) WHATWG - HTML5 CSS Images (Gradients ...) CSS 2D Transforms Microdata ( ) CSS Media QueriesEvents & Messaging ( ) Web FontsWeb ... SVG SMILdevice , ping ...Next Generation of HTML MathML WebGL Web Workers Web Storage Indexed Database API Web Sockets Audio Data API
  16. 16. WHATWG - HTML5 Web Storage Forms Indexed Database API The WebSockets APICanvas 2D Graphics Context Server-Sent Events Microdata Microdata vocabularies XMLHttpRequest Level 2Cross-document messaging Geolocation API Channel messaging Audio Data API <device> ping="" Device Orientation Eventtimed track HTML→Atom CSS3 XPath Next Generation of HTML SVG MathML Web Workers The WebSocket protocol Touch Events : WHATWG Spec W3C Spec Non Standard
  17. 17. WHATWG - HTML5 W3C - 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 ParserCanvas 2D Graphics Context HTML Canvas 2D Context Microdata HTML5 Microdata Microdata vocabulariesCross-document messaging HTML5 Web Messaging Channel messaging WHATWG HTML5 W3C
  18. 18. "HTML5" by Bruce Lawsonhttp://www.brucelawson.co.uk/2010/meet-newt-new-exciting-web-technologies/
  19. 19. 11 VMWare ( )
  20. 20. ( )
  21. 21. ...
  22. 22. PC ...
  23. 23. "Firefox"
  24. 24. Nokia Maemo
  25. 25. IE8 on Atom PC Kraken Bench Firefox
  26. 26. http://hacks.mozilla.org/2010/12/websockets-disabled-in-firefox-4/
  27. 27. http://www.adambarth.com/experimental/websocket.pdf
  28. 28. http://www.adambarth.com/experimental/websocket.pdf
  29. 29. 1 ( )
  30. 30. Web DesignCSS, Image, Fonts...
  31. 31. Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face
  32. 32. http://decomoji.jp/
  33. 33. Firefox3.5~ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
  34. 34. : http://people.mozilla.org/~jdaggett/webfontsfuture.pdf
  35. 35. http://hacks.mozilla.org/2009/10/font-control-for-designers/
  36. 36. Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
  37. 37. http://hacks.mozilla.org/2010/07/firefox4-beta2/
  38. 38. http://hacks.mozilla.org/2010/06/css3-calc/
  39. 39. http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
  40. 40. http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
  41. 41. http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
  42. 42. http://hacks.mozilla.org/2010/08/mozelement/
  43. 43. http://webkit.org/blog/176/css-canvas-drawing/
  44. 44. http://webkit.org/blog/176/css-canvas-drawing/
  45. 45. JS mozSetImageElement()
  46. 46. http://hacks.mozilla.org/2010/08/mozelement/
  47. 47. http://hacks.mozilla.org/2010/08/mozelement/
  48. 48. http://www.w3.org/2005/Incubator/audio/
  49. 49. http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/
  50. 50. http://twitter.com/cherenkov/status/21614170698
  51. 51. Native MultimediaVideo, Audio, 3D ...
  52. 52. Firefox <video>VLC Web Browser Plugin: http://www.videolan.org/vlc/download-macosx.html
  53. 53. autobuffer preload
  54. 54.     http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/
  55. 55. http://shaver.off.net/diary/2010/08/27/free-as-in-smokescreen/ OSS
  56. 56. http://www.w3.org/2005/Incubator/audio/
  57. 57. http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/
  58. 58. http://twitter.com/cherenkov/status/21614170698
  59. 59. http://www.khronos.org/webgl/
  60. 60.               http://webos-goodies.jp/archives/getting_started_with_webgl.html
  61. 61. Firefox 4~ https://developer.mozilla.org/en/WebGL
  62. 62. Application PlatformJS APIs for Web Apps...
  63. 63. http://d.hatena.ne.jp/javascripter/20100404/
  64. 64. http://host/path?query#fragment
  65. 65. https://dev.mozilla.jp/hacksmozillaorg/websockets-in-firefox/
  66. 66. http://hacks.mozilla.org/2010/08/firefox-4-http-strict-transport-security-force-https/
  67. 67.   http://hacks.mozilla.org/2009/10/multi-touch/
  68. 68. http://r.dynamis.jp/mozhacks
  69. 69. One Point Q&A
  70. 70. Theora Firefox 3.5~, WebM Firefox4~
  71. 71. Xiph.Org On2 Tech. Google VP3 OggTheora VP4Vorbis VP5 VP6 WebM Ogg VP7 Matroska VP8 VP8 Vorbis Container Video Audio WebM FAQ: http://www.webmproject.org/about/faq/
  72. 72. Referencesfor more information...
  73. 73. http://hacks.mozilla.org/https://dev.mozilla.jp/hacksmozillaorg/https://developer.mozilla.org/en/Upcoming_Firefox_features_for_developershttps://developer.mozilla.org/ja/Firefox_3.6_for_developershttp://www.whatwg.org/html5http://w3g.jp/blog/studies/html5report
  74. 74. http://www.slideshare.net/myakura/presentationshttp://www.slideshare.net/myakura/microdata-a-primerhttp://people.mozilla.org/~jdaggett/webfontsfuture.pdfhttp://www.slideshare.net/beltzner/firefox-roadmap-2010-0510
  75. 75. http://www.whatwg.org/html5http://caniuse.com/http://caniuse.com/#cats=HTML5&statuses=rec,pr,cr,wd,ietfhttp://wiki.whatwg.org/wiki/Implementations_in_Web_browsershttp://www.codedread.com/svg-support.php
  76. 76. http://hacks.mozilla.org/http://html5rocks.com/http://developer.apple.com/safaridemos/http://ie.microsoft.com/testdrive/http://twitter.com/paulrouget/ Web
  77. 77. http://html5gallery.com/http://www.scribd.com/doc/30964170/Scribd-in-HTML5http://280slides.com/http://www.youtube.com/html5
  78. 78. https://gaming.mozillalabs.com/http://www.canvasdemos.com/type/games/http://benfirshman.com/projects/jsnes/http://www.dextrose.com/en/projects/aves-enginehttp://www.kesiev.com/akihabara/ Web
  79. 79. http://tools.mozilla.com/http://processingjs.org/http://azarask.in/projects/algorithm-ink/http://code.google.com/p/contextfree/source/browse/trunk/contextfree.jshttp://code.google.com/p/cakejs/
  80. 80. http://d.hatena.ne.jp/uupaa/searchdiary?word=*[uupaa.js]http://raphaeljs.com/http://g.raphaeljs.com/Cappuccino: http://objective-j.org/Sproutcore: http://www.sproutcore.com/JavaScriptMVC: http://javascriptmvc.com/Ample SDK: http://www.amplesdk.com/ Gianduia
  81. 81. http://www.w3.org/TR/css3-fonts/http://code.google.com/webfontshttp://typekit.com/http://decomoji.jp/http://www.fontsquirrel.com/fontface/generator
  82. 82. http://www.khronos.org/webgl/http://www.khronos.org/webgl/wiki/Demo_Repositoryhttps://developer.mozilla.org/en/WebGLhttp://www.gatk.net/webgl/http://webos-goodies.jp/archives/getting_started_with_webgl.htmlhttp://learningwebgl.com/cookbook/
  83. 83. 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_APIhttps://developer.mozilla.org/en/DOM/window.onmozorientation
  84. 84. http://www.w3.org/Style/CSS/current-workhttps://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.htmlhttps://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/TypedArray-spec.htmlhttp://www.whatwg.org/specs/web-apps/current-work/multipage/introduction.html#is-this-html5?
  1. A particular slide catching your eye?

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

×