Your SlideShare is downloading. ×
0
Change by HTML5   Slides @ New-Biz Seminar  by Tomoya ASAI (dynamis)        Fractal Firefox Background Image: http://r.dyn...
Agenda
Key point HTML5What "HTML5" is?
This specification evolves HTML  and its related APIs to ease theauthoring of Web-based applications.
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...
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)Next Generation of HTML...
WHATWG - HTML5                      W3C - HTML5    Semantic Elements                 Semantic Elements   Multimedia Elemen...
IE8   IE9
StylingMore CSS...
Firefox3.5~ http://hacks.mozilla.org/2009/06/text-shadow-spotlight/
Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/CSS                       : http://css-tricks.com/exa...
Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
http://hacks.mozilla.org/2010/08/mozelement/
TypographyFont Control...
Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face
http://decomoji.jp/http://fontsquirrel.com/fontface/generator                        http://decomoji.jp/
: http://people.mozilla.org/~jdaggett/webfontsfuture.pdf
http://hacks.mozilla.org/2009/10/font-control-for-designers/
AnimationTransisions, SMIL...
Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
MultimediaAudio, Video...
http://www.w3.org/2005/Incubator/audio/
http://twitter.com/cherenkov/status/21614170698
Firefox   <video>VLC Web Browser Plugin: http://www.videolan.org/vlc/download-macosx.html
3D GraphicsWebGL with GPU...
http://www.khronos.org/webgl/
Firefox 4~ https://developer.mozilla.org/en/WebGL
Device SensorHardware Sensors...
Firefox3.5~ https://developer.mozilla.org/ja/Using_geolocation
Firefox3.6~ http://r.dynamis.jp/oryzeademo
Multi DeviceAndroid, iPhone, iPad...
http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries   /* iPads (portrait and landscape) ----------- */@...
PerformanceFaster and Faster...
IE8 (   )   IE9pp7    Fx3.6   Safari5     WebKit   Chrome 9b Chrome canary   Fx4 b10                                      ...
Facebook   https://developers.facebook.com/blog/post/460
OtherMore and More...
http://hacks.mozilla.org/2010/12/websockets-disabled-in-firefox-4/
http://r.dynamis.jp/mozhacks
ë
WHATWG   : http://whatwg.org/html5
http://caniuse.com/
http://caniuse.com/
http://acid3.acidtests.org/
Modernizr: http://www.modernizr.com/
One Point Q&A
Theora   Firefox 3.5~, WebM   Firefox4~
Xiph.Org          On2 Tech.               Google                    VP3 OggTheora              VP4Vorbis              VP5 ...
http://shaver.off.net/diary/2010/08/27/free-as-in-smokescreen/                               OSS
Referencesfor more information...
http://hacks.mozilla.org/https://dev.mozilla.jp/hacksmozillaorg/https://developer.mozilla.org/ja/Firefox_4_for_developersh...
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://raphaeljs.com/http://g.raphaeljs.com/http://graph.tk/http://senchalabs.github.com/philogl/http://d.hatena.ne.jp/uu...
Cappuccino: http://objective-j.org/Sproutcore: http://www.sproutcore.com/JavaScriptMVC: http://javascriptmvc.com/Ample SDK...
http://www.appcelerator.com/products/titanium-mobile-application-development/http://phonegap.com/
http://hacks.mozilla.org/category/performance/https://developers.facebook.com/blog/post/460http://dt.deviantart.com/blog/3...
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....
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Change by HTML5
Upcoming SlideShare
Loading in...5
×

Change by HTML5

2,603

Published on

20110225 名古屋新事業センター「ITベンチャー支援セミナー」で使用したスライド

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • j,ai choisi hTML5 TOUT EN ESPERANT QU?IL VA M.AIDER SURTOUT POUR YOUTUBE CAR DES FOIS J.AI UN PROBLEME DE PLUGIN QUI M.EMPECHE LIRE DES VIDEOS
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,603
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Change by HTML5"

  1. 1. Change by HTML5 Slides @ New-Biz Seminar by Tomoya ASAI (dynamis) Fractal Firefox Background Image: http://r.dynamis.jp/fractalfx
  2. 2. Agenda
  3. 3. Key point HTML5What "HTML5" is?
  4. 4. This specification evolves HTML and its related APIs to ease theauthoring of Web-based applications.
  5. 5. 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
  6. 6. Tim Berners-Lee : http://dig.csail.mit.edu/breadcrumbs/node/166
  7. 7. 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
  8. 8. Drag & Drop API IE6 Safari Firefox Ian Hickson http://twitter.com/Hixie/status/4075253361
  9. 9. 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
  10. 10. 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
  11. 11. Web ( "HTML5") Web Applications 1.0 (CSS)Next Generation of HTML WHATWG - HTML5 CSS Images (Gradients ...) CSS 2D Transforms Microdata ( ) CSS Media QueriesEvents & Messaging ( ) Web FontsWeb ... SVG SMIL device , ping ... MathML WebGL Web Workers Web Storage Indexed Database API Web Sockets Audio Data API
  12. 12. 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 W3C HTML5
  13. 13. IE8 IE9
  14. 14. StylingMore CSS...
  15. 15. Firefox3.5~ http://hacks.mozilla.org/2009/06/text-shadow-spotlight/
  16. 16. Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/CSS : http://css-tricks.com/examples/ButtonMaker/
  17. 17. Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
  18. 18. http://hacks.mozilla.org/2010/08/mozelement/
  19. 19. TypographyFont Control...
  20. 20. Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face
  21. 21. http://decomoji.jp/http://fontsquirrel.com/fontface/generator http://decomoji.jp/
  22. 22. : http://people.mozilla.org/~jdaggett/webfontsfuture.pdf
  23. 23. http://hacks.mozilla.org/2009/10/font-control-for-designers/
  24. 24. AnimationTransisions, SMIL...
  25. 25. Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
  26. 26. MultimediaAudio, Video...
  27. 27. http://www.w3.org/2005/Incubator/audio/
  28. 28. http://twitter.com/cherenkov/status/21614170698
  29. 29. Firefox <video>VLC Web Browser Plugin: http://www.videolan.org/vlc/download-macosx.html
  30. 30. 3D GraphicsWebGL with GPU...
  31. 31. http://www.khronos.org/webgl/
  32. 32. Firefox 4~ https://developer.mozilla.org/en/WebGL
  33. 33. Device SensorHardware Sensors...
  34. 34. Firefox3.5~ https://developer.mozilla.org/ja/Using_geolocation
  35. 35. Firefox3.6~ http://r.dynamis.jp/oryzeademo
  36. 36. Multi DeviceAndroid, iPhone, iPad...
  37. 37. http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries /* iPads (portrait and landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles*/ }/* iPads (landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles*/ }/* iPads (portrait) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ }/* Desktops and laptops ----------- */@media only screen and (min-width : 1224px) { /* Styles */ }/* Large screens ----------- */@media only screen and (min-width : 1824px) { /* Styles */ }/* iPhone 4 and high pixel ratio devices ----------- */@mediaonly screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } cm
  38. 38. PerformanceFaster and Faster...
  39. 39. IE8 ( ) IE9pp7 Fx3.6 Safari5 WebKit Chrome 9b Chrome canary Fx4 b10 (crankshaft)2/6 Kraken Benchmark IE8 Win7 MBA-late2010
  40. 40. Facebook https://developers.facebook.com/blog/post/460
  41. 41. OtherMore and More...
  42. 42. http://hacks.mozilla.org/2010/12/websockets-disabled-in-firefox-4/
  43. 43. http://r.dynamis.jp/mozhacks
  44. 44. ë
  45. 45. WHATWG : http://whatwg.org/html5
  46. 46. http://caniuse.com/
  47. 47. http://caniuse.com/
  48. 48. http://acid3.acidtests.org/
  49. 49. Modernizr: http://www.modernizr.com/
  50. 50. One Point Q&A
  51. 51. Theora Firefox 3.5~, WebM Firefox4~
  52. 52. 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/
  53. 53. http://shaver.off.net/diary/2010/08/27/free-as-in-smokescreen/ OSS
  54. 54. Referencesfor more information...
  55. 55. http://hacks.mozilla.org/https://dev.mozilla.jp/hacksmozillaorg/https://developer.mozilla.org/ja/Firefox_4_for_developershttps://developer.mozilla.org/ja/Firefox_3.6_for_developershttp://www.whatwg.org/html5http://developers.whatwg.org/http://w3g.jp/blog/studies/html5report
  56. 56. 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
  57. 57. 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
  58. 58. http://hacks.mozilla.org/http://html5rocks.com/http://developer.apple.com/safaridemos/http://ie.microsoft.com/testdrive/http://twitter.com/paulrouget/ Web
  59. 59. http://html5gallery.com/http://www.scribd.com/doc/30964170/Scribd-in-HTML5http://280slides.com/http://www.youtube.com/html5
  60. 60. 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
  61. 61. 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/
  62. 62. ëhttp://raphaeljs.com/http://g.raphaeljs.com/http://graph.tk/http://senchalabs.github.com/philogl/http://d.hatena.ne.jp/uupaa/searchdiary?word=*[uupaa.js] IE Canvas
  63. 63. Cappuccino: http://objective-j.org/Sproutcore: http://www.sproutcore.com/JavaScriptMVC: http://javascriptmvc.com/Ample SDK: http://www.amplesdk.com/jQuery Mobile: http://jquerymobile.com/Sencha Touch: http://www.sencha.com/products/touch/jQTouch: http://www.jqtouch.com/ Gianduia
  64. 64. http://www.appcelerator.com/products/titanium-mobile-application-development/http://phonegap.com/
  65. 65. http://hacks.mozilla.org/category/performance/https://developers.facebook.com/blog/post/460http://dt.deviantart.com/blog/38471599/http://mozilla.jp/blog/entry/5927/
  66. 66. http://www.w3.org/TR/css3-fonts/http://code.google.com/webfontshttp://typekit.com/http://decomoji.jp/http://www.fontsquirrel.com/fontface/generator
  67. 67. 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/
  68. 68. 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
  69. 69. 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.

×