HTML5 and Browsers

  • 3,649 views
Uploaded on

20101211 …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,649
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
40
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. "HTML5" & Browsers Slides @ OSC 2010 Fukuoka by Tomoya ASAI (aka. dynamis) Fractal Firefox Background Image: http://r.dynamis.jp/fractalfx
  • 2. Agenda
  • 3. This specification evolves HTML and its related APIs to ease theauthoring of Web-based applications. http://whatwg.org/html5 - Abstract
  • 4. http://whatwg.org/html5 - Abstract
  • 5. http://whatwg.org/html5 - Abstract
  • 6. http://whatwg.org/html5 - Abstract
  • 7. http://whatwg.org/html5 - Abstract
  • 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. Tim Berners-Lee : http://dig.csail.mit.edu/breadcrumbs/node/166
  • 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. Drag & Drop API IE6 Safari Firefox Ian Hickson http://twitter.com/Hixie/status/4075253361
  • 12. ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
  • 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. 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. 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. 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. 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. "HTML5" by Bruce Lawsonhttp://www.brucelawson.co.uk/2010/meet-newt-new-exciting-web-technologies/
  • 19. 11 VMWare ( )
  • 20. ( )
  • 21. ...
  • 22. PC ...
  • 23. "Firefox"
  • 24. Nokia Maemo
  • 25. IE8 on Atom PC Kraken Bench Firefox
  • 26. http://hacks.mozilla.org/2010/12/websockets-disabled-in-firefox-4/
  • 27. http://www.adambarth.com/experimental/websocket.pdf
  • 28. http://www.adambarth.com/experimental/websocket.pdf
  • 29. 1 ( )
  • 30. Web DesignCSS, Image, Fonts...
  • 31. Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face
  • 32. http://decomoji.jp/
  • 33. Firefox3.5~ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
  • 34. : http://people.mozilla.org/~jdaggett/webfontsfuture.pdf
  • 35. http://hacks.mozilla.org/2009/10/font-control-for-designers/
  • 36. Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
  • 37. http://hacks.mozilla.org/2010/07/firefox4-beta2/
  • 38. http://hacks.mozilla.org/2010/06/css3-calc/
  • 39. http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
  • 40. http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
  • 41. http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
  • 42. http://hacks.mozilla.org/2010/08/mozelement/
  • 43. http://webkit.org/blog/176/css-canvas-drawing/
  • 44. http://webkit.org/blog/176/css-canvas-drawing/
  • 45. JS mozSetImageElement()
  • 46. http://hacks.mozilla.org/2010/08/mozelement/
  • 47. http://hacks.mozilla.org/2010/08/mozelement/
  • 48. http://www.w3.org/2005/Incubator/audio/
  • 49. http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/
  • 50. http://twitter.com/cherenkov/status/21614170698
  • 51. Native MultimediaVideo, Audio, 3D ...
  • 52. Firefox <video>VLC Web Browser Plugin: http://www.videolan.org/vlc/download-macosx.html
  • 53. autobuffer preload
  • 54.     http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/
  • 55. http://shaver.off.net/diary/2010/08/27/free-as-in-smokescreen/ OSS
  • 56. http://www.w3.org/2005/Incubator/audio/
  • 57. http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/
  • 58. http://twitter.com/cherenkov/status/21614170698
  • 59. http://www.khronos.org/webgl/
  • 60.               http://webos-goodies.jp/archives/getting_started_with_webgl.html
  • 61. Firefox 4~ https://developer.mozilla.org/en/WebGL
  • 62. Application PlatformJS APIs for Web Apps...
  • 63. http://d.hatena.ne.jp/javascripter/20100404/
  • 64. http://host/path?query#fragment
  • 65. https://dev.mozilla.jp/hacksmozillaorg/websockets-in-firefox/
  • 66. http://hacks.mozilla.org/2010/08/firefox-4-http-strict-transport-security-force-https/
  • 67.   http://hacks.mozilla.org/2009/10/multi-touch/
  • 68. http://r.dynamis.jp/mozhacks
  • 69. One Point Q&A
  • 70. Theora Firefox 3.5~, WebM Firefox4~
  • 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. Referencesfor more information...
  • 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. 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. 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. http://hacks.mozilla.org/http://html5rocks.com/http://developer.apple.com/safaridemos/http://ie.microsoft.com/testdrive/http://twitter.com/paulrouget/ Web
  • 77. http://html5gallery.com/http://www.scribd.com/doc/30964170/Scribd-in-HTML5http://280slides.com/http://www.youtube.com/html5
  • 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. 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. 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. http://www.w3.org/TR/css3-fonts/http://code.google.com/webfontshttp://typekit.com/http://decomoji.jp/http://www.fontsquirrel.com/fontface/generator
  • 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. 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. 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?