HTML & Browsers

2,849 views

Published on

20110319 OSC 2011 Oita で使用したスライド
http://www.ospn.jp/osc2011-oita/

後半は当日使用しなかった参考資料

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

No Downloads
Views
Total views
2,849
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML & Browsers

  1. 1. "HTML5" & Browsers Slides @ OSC 2011 Oita by Tomoya ASAI (dynamis)
  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. Web BrowsersBrowsers Evolution...
  15. 15. Firefox Input : http://heatmap.mozillalabs.com/
  16. 16. Firefox
  17. 17. Firefox
  18. 18. ...
  19. 19. JavaScript (Kraken) JavaScript (SunSpider) JavaScript (V8) jQuery 1.5 next() Map ZoomingTransform (HWACCEL) FishIE Tank (500fish)DOM (absolute div ) Firefox 3.6 Firefox Beta 10 Win7 MBA-late2010
  20. 20. IE8 ( ) IE9pp7 Fx3.6 Safari5 WebKit Chrome 9b Chrome canary Fx4 b10 (crankshaft)2/6 Kraken Benchmark IE8 Win7 MBA-late2010
  21. 21. ( )
  22. 22. ...
  23. 23. PC ...
  24. 24. "Firefox"
  25. 25. Web TechnologiesHTML5 and more...
  26. 26. StylingMore CSS...
  27. 27. IE9 ...
  28. 28. http://hacks.mozilla.org/2010/06/css3-calc/
  29. 29. http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
  30. 30. http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
  31. 31. http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
  32. 32. http://hacks.mozilla.org/2010/08/mozelement/
  33. 33. http://webkit.org/blog/176/css-canvas-drawing/
  34. 34. http://webkit.org/blog/176/css-canvas-drawing/
  35. 35. JS mozSetImageElement()
  36. 36. http://hacks.mozilla.org/2010/08/mozelement/
  37. 37. http://hacks.mozilla.org/2010/08/mozelement/
  38. 38. TypographyFont Control...
  39. 39. Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face
  40. 40. http://decomoji.jp/http://fontsquirrel.com/fontface/generator http://decomoji.jp/
  41. 41. Firefox3.5~ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
  42. 42. : http://people.mozilla.org/~jdaggett/webfontsfuture.pdf
  43. 43. http://hacks.mozilla.org/2009/10/font-control-for-designers/
  44. 44. http://hacks.mozilla.org/2009/10/font-control-for-designers/
  45. 45. AnimationCanvas, SMIL...
  46. 46. Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
  47. 47. http://hacks.mozilla.org/2010/07/firefox4-beta2/
  48. 48. SVG Test Suite : http://www.codedread.com/svg-support.php
  49. 49. http://people.mozilla.com/~dynamis/demo/smil/
  50. 50. MultimediaAudio, Video...
  51. 51. http://www.w3.org/2005/Incubator/audio/
  52. 52. http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/
  53. 53. http://twitter.com/cherenkov/status/21614170698
  54. 54. Firefox <video>VLC Web Browser Plugin: http://www.videolan.org/vlc/download-macosx.html
  55. 55. autobuffer preload
  56. 56.     http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/
  57. 57. 3D GraphicsWebGL with GPU...
  58. 58. http://www.khronos.org/webgl/
  59. 59. Firefox 4~ https://developer.mozilla.org/en/WebGL
  60. 60. Device SensorHardware Sensors...
  61. 61.   http://hacks.mozilla.org/2009/10/multi-touch/
  62. 62. OtherMore and More...
  63. 63. http://d.hatena.ne.jp/javascripter/20100404/
  64. 64. http://hacks.mozilla.org/2010/08/firefox-4-http-strict-transport-security-force-https/
  65. 65. https://developer.mozilla.org/ja/http://r.dynamis.jp/fx4http://r.dynamis.jp/fx3.6
  66. 66. http://r.dynamis.jp/mozhacks
  67. 67. StylingMore CSS...
  68. 68. Firefox3.5~ http://hacks.mozilla.org/2009/06/text-shadow-spotlight/
  69. 69. http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html
  70. 70. Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/CSS : http://css-tricks.com/examples/ButtonMaker/
  71. 71. http://dynamis.jp/demo/css-gradients/
  72. 72. Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
  73. 73. http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
  74. 74. Device SensorHardware Sensors...
  75. 75. Firefox3.5~ https://developer.mozilla.org/ja/Using_geolocation
  76. 76. http://r.dynamis.jp/geolocationdemo
  77. 77. Firefox3.6~ http://r.dynamis.jp/oryzeademo
  78. 78.    
  79. 79.                                          
  80. 80. Multi DeviceAndroid, iPhone, iPad...
  81. 81. 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
  82. 82. Interactionfor GUI Applications...
  83. 83. photo by californiaAmy http://www.flickr.com/photos/amyandthomas/3865411819/
  84. 84.                        Firefox3.6~ https://developer.mozilla.org/en/Using_files_from_web_applications
  85. 85. 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
  86. 86. Drag & Drop API IE6 Safari Firefox Ian Hickson http://twitter.com/Hixie/status/4075253361
  87. 87. http://hacks.mozilla.org/2009/12/uploading-files-with-xmlhttprequest/
  88. 88. Firefox.3.6~ https://developer.mozilla.org/en/CSS/pointer-events
  89. 89. http://demos.hacks.mozilla.org/openweb/pointer-events/
  90. 90. One Point Q&A
  91. 91. Theora Firefox 3.5~, WebM Firefox4~
  92. 92. 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/
  93. 93. http://shaver.off.net/diary/2010/08/27/free-as-in-smokescreen/ OSS
  94. 94. Referencesfor more information...
  95. 95. 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
  96. 96. 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
  97. 97. 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
  98. 98. http://hacks.mozilla.org/http://html5rocks.com/http://developer.apple.com/safaridemos/http://ie.microsoft.com/testdrive/http://twitter.com/paulrouget/ Web
  99. 99. http://html5gallery.com/http://www.scribd.com/doc/30964170/Scribd-in-HTML5http://280slides.com/http://www.youtube.com/html5
  100. 100. 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
  101. 101. 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/
  102. 102. ë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
  103. 103. 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
  104. 104. http://www.appcelerator.com/products/titanium-mobile-application-development/http://phonegap.com/
  105. 105. http://hacks.mozilla.org/category/performance/https://developers.facebook.com/blog/post/460http://dt.deviantart.com/blog/38471599/http://mozilla.jp/blog/entry/5927/
  106. 106. http://www.w3.org/TR/css3-fonts/http://code.google.com/webfontshttp://typekit.com/http://decomoji.jp/http://www.fontsquirrel.com/fontface/generator
  107. 107. 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/
  108. 108. 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
  109. 109. 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?

×