HTML & Browsers

"HTML5" & Browsers Slides @ OSC 2011 Oita by Tomoya ASAI (dynamis)

Agenda

Key point HTML5What "HTML5" is?

This specification evolves HTML and its related APIs to ease theauthoring of Web-based applications.

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

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 WHATWG Microdata CSS3 Transitions Canvas HTML5 XPath ECMAScript 5th

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

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 WHATWG W3C HTML5

IE8 IE9

Web BrowsersBrowsers Evolution...

Firefox Input : http://heatmap.mozillalabs.com/

Firefox

JavaScript (Kraken) JavaScript (SunSpider) JavaScript (V8) jQuery 1.5 next() Map ZoomingTransform (HWACCEL) FishIE Tank (500ﬁsh)DOM (absolute div ) Firefox 3.6 Firefox Beta 10 Win7 MBA-late2010

IE8 ( ) IE9pp7 Fx3.6 Safari5 WebKit Chrome 9b Chrome canary Fx4 b10 (crankshaft)2/6 Kraken Benchmark IE8 Win7 MBA-late2010

PC ...

"Firefox"

Web TechnologiesHTML5 and more...

StylingMore CSS...

IE9 ...

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/

TypographyFont Control...

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

http://decomoji.jp/http://fontsquirrel.com/fontface/generator 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/

AnimationCanvas, SMIL...

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

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

SVG Test Suite : http://www.codedread.com/svg-support.php

http://people.mozilla.com/~dynamis/demo/smil/

MultimediaAudio, Video...

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

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/

3D GraphicsWebGL with GPU...

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

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

Device SensorHardware Sensors...

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

OtherMore and More...

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

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

https://developer.mozilla.org/ja/http://r.dynamis.jp/fx4http://r.dynamis.jp/fx3.6

http://r.dynamis.jp/mozhacks

StylingMore CSS...

Firefox3.5~ http://hacks.mozilla.org/2009/06/text-shadow-spotlight/

http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html

Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-ﬁrefox-36/CSS : http://css-tricks.com/examples/ButtonMaker/

http://dynamis.jp/demo/css-gradients/

Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-ﬁrefox-36/

http://hacks.mozilla.org/2009/11/css-gradients-ﬁrefox-36/

Device SensorHardware Sensors...

Firefox3.5~ https://developer.mozilla.org/ja/Using_geolocation

http://r.dynamis.jp/geolocationdemo

Firefox3.6~ http://r.dynamis.jp/oryzeademo

Multi DeviceAndroid, iPhone, iPad...

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

Interactionfor GUI Applications...

photo by californiaAmy http://www.ﬂickr.com/photos/amyandthomas/3865411819/

Firefox3.6~ https://developer.mozilla.org/en/Using_ﬁles_from_web_applications

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

http://hacks.mozilla.org/2009/12/uploading-ﬁles-with-xmlhttprequest/

Firefox.3.6~ https://developer.mozilla.org/en/CSS/pointer-events

http://demos.hacks.mozilla.org/openweb/pointer-events/

One Point Q&A

Theora Firefox 3.5~, WebM Firefox4~

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/

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

Referencesfor more information...

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

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://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

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

http://www.appcelerator.com/products/titanium-mobile-application-development/http://phonegap.com/

http://hacks.mozilla.org/category/performance/https://developers.facebook.com/blog/post/460http://dt.deviantart.com/blog/38471599/http://mozilla.jp/blog/entry/5927/

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?

HTML & Browsers

by dynamis . on Mar 21, 2011

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 12

Statistics

HTML & Browsers Presentation Transcript

http://s.deeeki.com	6
http://paper.li	5
http://localhost	1