Your SlideShare is downloading. ×
0
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 and Browsers

3,780

Published on

20101211 …

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

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

No Downloads
Views
Total Views
3,780
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
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?

×