HTML5 and Beyond

HTML5 & Beyond Presentation @ JSiSE at Hokkaido by Tomoya ASAI (aka. dynamis) Fractal Firefox Background Image: http://r.dynamis.jp/fractalfx

Agenda

(References)

Share and Active Users

Browser MarketShare Graph by AXIIS http://www.axiis.org/examples/BrowserMarketShare.html

Stats by NetApplications http://marketshare.hitslink.com/

http://weblogs.mozillazine.org/asa/archives/2010/05/ﬁrefox_and_chrome_u.html

: http://www.w3b.org/nutzungsverhalten/ﬁrefox-3-dominiert-internet-explorer-8.html

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

http://whatwg.org/html5 - Abstract

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

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: IE6 implements 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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset-utf-8"/> ... XHTML ...

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> ... HTML5

div class="section" <div> class

<article> <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup> <p>The apple is the pomaceous fruit of the apple tree.</p> <section> <h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p> </section> <section> ... </section> </article> http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html

Microformats

name=dynamis, twitter=http://twitter.com/dynamitter

DOM Storage

<!DOCTYPE html> <html manifest="myapp.manifest" lang="ja"> myapp.manifest

<input type="text" required> <input type="email"> <input type="range"> <input type="color"> <input type="datetime"> <input type="search" placeholder= " "> type UI

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

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="" CSS3 XPath timed track HTML→Atom SVG MathML Next Generation of HTML Web Workers Device Orientation 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 Parser Canvas 2D Graphics Context HTML Canvas 2D Context Microdata HTML5 Microdata Microdata vocabularies Cross-document messaging HTML5 Web Messaging Channel messaging 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 API Drag & Drop API Ofﬂine Events File API Web Storage Geolocation 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 API Drag & Drop API Ofﬂine Events File API Web Storage Geolocation API Web Workers Microformats WebM (VP8) Codec Microdata WHATWG CSS3 Transitions Canvas HTML5 XPath ECMAScript 5th

One Point Q&A

: http://standards.mitsue.co.jp/resources/mm_comic/

Theora Firefox 3.5~, WebM Firefox4~

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

Indexed DB Firefox 4

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

”HTML5” FAQ

WHATWG : http://whatwg.org/html5

http://caniuse.com/

http://acid3.acidtests.org/

Modernizr: http://www.modernizr.com/

IE6 : http://ie6funeral.com/

StatCounter: http://gs.statcounter.com/ NetApplications: http://marketshare.hitslink.com/

http://d.hatena.ne.jp/uupaa/20100728/1280253779

HTML5 : http://w3g.jp/blog/studies/html5report

CSS, Image, Fonts...

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

Firefox3.5~ https://developer.mozilla.org/ja/CSS/Text-shadow

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/

Firefox3.6~ http://dev.w3.org/csswg/css3-images/#gradients-

http://people.mozilla.org/~blizzard/2009-11-gradient-button/sample.html

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

Firefox3.6~ https://developer.mozilla.org/ja/Using_gradients

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

Firefox3.5~ http://www.alistapart.com/articles/cssatten

Japanese Web Fonts Service by Seesaa http://decomoji.jp/

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

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

JS APIs for Web Apps...

photo by 5500 http://www.ﬂickr.com/photos/5500/303849123/

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

Web Sockets API

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

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

https://developer.mozilla.org/en/Using_ﬁles_from_web_applications

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

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

Firefox3.5~ https://developer.mozilla.org/Ja/DragDrop/Drag_and_Drop

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/

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

http://r.dynamis.jp/geolocationdemo

http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html

https://dev.mozilla.jp/hacksmozillaorg/ﬁrefox-4-the-html5-parser-inline-svg-speed-and-more/

Video, Animation, 3D ...

Firefox.3.5~ http://hacks.mozilla.org/category/video/

http://hacks.mozilla.org/2009/12/autobuffering-video-in-ﬁrefox/

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

http://media.24ways.org/2009/14/5/index.html

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

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

Firefox 4~ http://www.khronos.org/webgl/wiki/Demo_Repository

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

https://developer.mozilla.org/en/WebGL/Getting_started_with_WebGL

Future Web Platform

: http://vocamus.net/dave/?p=974

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

Firefox3.6~ http://hacks.mozilla.org/2009/10/orientation-for-ﬁrefox/

https://developer.mozilla.org/en/Detecting_device_orientation

https://wiki.mozilla.org/Firefox/Projects/Multitouch_Polish

http://www.mgalli.com/development/drawing/demoapp.html https://wiki.mozilla.org/Firefox/Projects/Multitouch_Polish/DOM_Events/Examples

for more information...

http://hacks.mozilla.org/ https://dev.mozilla.jp/hacksmozillaorg/ https://developer.mozilla.org/en/ Upcoming_Firefox_features_for_developers https://developer.mozilla.org/ja/Firefox_3.6_for_developers http://www.whatwg.org/html5 http://w3g.jp/blog/studies/html5report

http://www.slideshare.net/myakura/presentations http://www.slideshare.net/myakura/microdata-a-primer http://people.mozilla.org/~jdaggett/webfontsfuture.pdf http://www.slideshare.net/beltzner/ﬁrefox- roadmap-2010-0510

http://www.whatwg.org/html5 http://caniuse.com/ http://caniuse.com/#cats=HTML5&statuses=rec,pr,cr,wd,ietf http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers http://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/

http://html5gallery.com/ http://www.scribd.com/doc/30964170/Scribd-in-HTML5 http://280slides.com/ http://www.youtube.com/html5 http://benﬁrshman.com/projects/jsnes/

http://tools.mozilla.com/ http://processingjs.org/ http://azarask.in/projects/algorithm-ink/ http://code.google.com/p/contextfree/source/browse/trunk/ contextfree.js 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/webfonts http://typekit.com/ http://decomoji.jp/ http://www.fontsquirrel.com/fontface/generator

https://cvs.khronos.org/svn/repos/registry/trunk/public/ webgl/doc/spec/WebGL-spec.html https://developer.mozilla.org/en/WebGL http://learningwebgl.com/cookbook/ http://www.khronos.org/webgl/ http://www.khronos.org/webgl/wiki/Demo_Repository

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_API https://developer.mozilla.org/en/DOM/ window.onmozorientation

http://www.w3.org/Style/CSS/current-work https://cvs.khronos.org/svn/repos/registry/trunk/public/ webgl/doc/spec/TypedArray-spec.html http://www.whatwg.org/specs/web-apps/current-work/ multipage/introduction.html#is-this-html5?

HTML5 and Beyond

by dynamis . on Aug 26, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

HTML5 and Beyond — Presentation Transcript