HTML5 in Firefox4

"HTML5" in Firefox4 Slides @ HTML5 NadoNado in Fukui by Tomoya ASAI (aka. dynamis) Fractal Firefox Background Image: http://r.dynamis.jp/fractalfx

Agenda

This specification evolves HTML and its related APIs to ease theauthoring of Web-based applications. http://whatwg.org/html5 - Abstract

http://whatwg.org/html5 - Abstract

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

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. Ian Hickson http://twitter.com/Hixie/status/4075253361

Drag & Drop API IE6 Safari Firefox Ian Hickson http://twitter.com/Hixie/status/4075253361

ref. http://whatwg.org/html5 - 1.1 Is this HTML5?

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 Ofﬂine Events File API Web StorageGeolocation API Web Workers Microformats WebM (VP8) Codec Microdata CSS3 Transitions XPath ECMAScript 5th

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 Ofﬂine Events File API Web StorageGeolocation API Web Workers Microformats WebM (VP8) Codec Microdata WHATWG CSS3 Transitions Canvas HTML5 XPath ECMAScript 5th

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

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

WHATWG - HTML5 W3C - HTML5 Semantic Elements Semantic Elements Multimedia Elements Multimedia Elements HTML5 Forms HTML5 Forms Event model & APIs Event model & APIs Ofﬂine Events Ofﬂine 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 HTML5

Web DesignCSS, Image, Fonts...

Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face

http://decomoji.jp/

Firefox3.5~ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/

: http://people.mozilla.org/~jdaggett/webfontsfuture.pdf

http://hacks.mozilla.org/2009/10/font-control-for-designers/

Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions

http://hacks.mozilla.org/2010/07/ﬁrefox4-beta2/

http://hacks.mozilla.org/2010/06/css3-calc/

http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/

http://hacks.mozilla.org/2010/08/mozelement/

http://webkit.org/blog/176/css-canvas-drawing/

JS mozSetImageElement()

http://hacks.mozilla.org/2010/08/mozelement/

Native MultimediaVideo, Audio, 3D ...

Firefox <video>VLC Web Browser Plugin: http://www.videolan.org/vlc/download-macosx.html

autobuffer preload

http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-ﬁrefox-4/

http://shaver.off.net/diary/2010/08/27/free-as-in-smokescreen/ OSS

http://www.w3.org/2005/Incubator/audio/

http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-ﬁrefox-4/

http://twitter.com/cherenkov/status/21614170698

http://www.khronos.org/webgl/

http://webos-goodies.jp/archives/getting_started_with_webgl.html

Firefox 4~ https://developer.mozilla.org/en/WebGL

Application PlatformJS APIs for Web Apps...

http://d.hatena.ne.jp/javascripter/20100404/

http://host/path?query#fragment

https://dev.mozilla.jp/hacksmozillaorg/websockets-in-ﬁrefox/

http://hacks.mozilla.org/2010/08/ﬁrefox-4-http-strict-transport-security-force-https/

http://hacks.mozilla.org/2009/10/multi-touch/

http://r.dynamis.jp/mozhacks

One Point Q&A

Theora Firefox 3.5~, WebM Firefox4~

Xiph.Org On2 Tech. Google VP3 OggTheora VP4Vorbis VP5 VP6 WebM VP7 Matroska VP8 VP8 Vorbis Container Video Audio WebM FAQ: http://www.webmproject.org/about/faq/

Wave : http://atnd.org/events/6995

Referencesfor more information...

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

http://www.slideshare.net/myakura/presentationshttp://www.slideshare.net/myakura/microdata-a-primerhttp://people.mozilla.org/~jdaggett/webfontsfuture.pdfhttp://www.slideshare.net/beltzner/ﬁrefox-roadmap-2010-0510

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

http://hacks.mozilla.org/http://html5rocks.com/http://developer.apple.com/safaridemos/http://ie.microsoft.com/testdrive/http://twitter.com/paulrouget/ Web

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://benﬁrshman.com/projects/jsnes/http://www.dextrose.com/en/projects/aves-enginehttp://www.kesiev.com/akihabara/ Web

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/

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

http://www.w3.org/TR/css3-fonts/http://code.google.com/webfontshttp://typekit.com/http://decomoji.jp/http://www.fontsquirrel.com/fontface/generator

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/

http://www.w3.org/TR/FileAPI/http://www.w3.org/TR/ﬁle-writer-api/http://www.w3.org/TR/geolocation-API/https://wiki.mozilla.org/Audio_Data_APIhttps://developer.mozilla.org/en/DOM/window.onmozorientation

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?

http://20kaido.com	7898
http://www.onlydoo.com	6
http://takeshaaan.posterous.com	5
http://www.iweb34.com	4
http://s.deeeki.com	3
http://www.google.co.jp	1
http://webcache.googleusercontent.com	1

HTML5 in Firefox4

by dynamis .

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 7,918

Statistics