HTML5 and Browsers
1 like2,254 views
This document discusses upcoming features in HTML5 and browsers. It provides an overview of new HTML5 specifications being developed by the WHATWG including forms, canvas, video, audio and APIs for offline applications, geolocation, drag and drop. It also covers progress on implementing these features in browsers like Firefox, Safari, Chrome and IE. Links are provided to specifications and resources for further information.
![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](https://image.slidesharecdn.com/html5andbrowsers-101211003235-phpapp02/85/HTML5-and-Browsers-153-320.jpg)
HTML5 and Browsers
- 1. "HTML5" & Browsers Slides @ OSC 2010 Fukuoka by Tomoya ASAI (aka. dynamis) Fractal Firefox Background Image: http://r.dynamis.jp/fractalfx
- 7. Agenda
- 15. This specification evolves HTML and its related APIs to ease the authoring of Web-based applications. http://whatwg.org/html5 - Abstract
- 29. It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML, ... all at once didn't work. Tim Berners-Lee : http://dig.csail.mit.edu/breadcrumbs/node/166
- 30. Tim Berners-Lee : http://dig.csail.mit.edu/breadcrumbs/node/166
- 32. The drag-and-drop API is horrible, but it has one thing going for it: IE6 implements it, as do Safari and Firefox. Ian Hickson http://twitter.com/Hixie/status/4075253361
- 33. Drag & Drop API IE6 Safari Firefox Ian Hickson http://twitter.com/Hixie/status/4075253361
- 36. ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
- 37. HTML5 Markup Forms WebFonts The WebSockets API Canvas 2D Cross-document Messaging WebGL Server-Sent Events SVG XMLHttpRequest Level 2 Event Listener Indexed Database API Drag & Drop API Offline Events File API Web Storage Geolocation API Web Workers Microformats WebM (VP8) Codec Microdata CSS3 Transitions XPath ECMAScript 5th
- 38. HTML5 Markup Forms WebFonts The WebSockets API Canvas 2D Cross-document Messaging WebGL Server-Sent Events SVG XMLHttpRequest Level 2 Event Listener Indexed Database API Drag & Drop API Offline Events File API Web Storage Geolocation API Web Workers Microformats WebM (VP8) Codec WHATWG Microdata CSS3 Transitions Canvas HTML5 XPath ECMAScript 5th
- 39. Web ( "HTML5") Web Applications 1.0 (CSS) WHATWG - HTML5 CSS Images (Gradients ...) CSS 2D Transforms Microdata ( ) CSS Media Queries Events & Messaging ( ) Web Fonts Web ... SVG SMIL device , ping ... Next Generation of HTML MathML WebGL Web Workers Web Storage Indexed Database API Web Sockets Audio Data API
- 40. WHATWG - HTML5 Web Storage Forms Indexed Database API The WebSockets API Canvas 2D Graphics Context Server-Sent Events Microdata Microdata vocabularies XMLHttpRequest Level 2 Cross-document messaging Geolocation API Channel messaging Audio Data API <device> ping="" Device Orientation Event timed track HTML→Atom CSS3 XPath Next Generation of HTML SVG MathML Web Workers The WebSocket protocol Touch Events : WHATWG Spec W3C Spec Non Standard
- 41. 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 Parser Canvas 2D Graphics Context HTML Canvas 2D Context Microdata HTML5 Microdata Microdata vocabularies Cross-document messaging HTML5 Web Messaging Channel messaging WHATWG HTML5 W3C
- 43. "HTML5" by Bruce Lawson http://www.brucelawson.co.uk/2010/meet-newt-new-exciting-web-technologies/
- 60. 11 VMWare ( )
- 62. ( )
- 63. ...
- 68. PC ...
- 77. "Firefox"
- 78. Nokia Maemo
- 81. IE8 on Atom PC Kraken Bench Firefox
- 87. 1 ( )
- 88. Web Design CSS, Image, Fonts...
- 91. Firefox3.5~ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
- 106. JS mozSetImageElement()
- 113. Native Multimedia Video, Audio, 3D ...
- 114. Firefox <video> VLC Web Browser Plugin: http://www.videolan.org/vlc/download-macosx.html
- 115. autobuffer preload
- 116. http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/
- 124. Application Platform JS APIs for Web Apps...
- 135. One Point Q&A
- 137. Theora Firefox 3.5~, WebM Firefox4~
- 138. Xiph.Org On2 Tech. Google VP3 Ogg Theora VP4 Vorbis VP5 VP6 WebM Ogg VP7 Matroska VP8 VP8 Vorbis Container Video Audio WebM FAQ: http://www.webmproject.org/about/faq/
- 153. 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