HTML5 Introduction

HTML5 Introduction Presentation @ OSC 2010 Hokkaido by Tomoya Asai (aka. dynamis)

HTML5&CSS3 http://people.opera.com/danield/html5/vuvuzela/

Agenda:

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

Birth of HTML5...

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

Range of 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 WebM (VP8) Codec CSS3 Selectors Microdata CSS3 Transitions XPath ECMAScript 5th

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

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

HTML5 HTML5 Elements, Events, APIs Elements, Events, APIs Canvas 2D Graphics Context HTML Canvas 2D Context Microdata HTML5 Microdata Microdata vocabularies Cross-document messaging HTML5 Web Messaging Channel messaging device element ping attribute timed track model converting HTML to Atom Next Generation of HTML WHATWG HTML5

HTML5 HTML5 Elements, Events, APIs Elements, Events, APIs Canvas 2D Graphics Context HTML Canvas 2D Context Microdata HTML5 Microdata Microdata vocabularies Cross-document messaging HTML5 Web Messaging Channel messaging <device> ping="" Web Storage timed track HTML→Atom Indexed Database API Next Generation of HTML The WebSockets API Web Workers Server-Sent Events The WebSocket protocol Geolocation API MathML SVG XMLHttpRequest Level 2 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 WebM (VP8) Codec CSS3 Selectors 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 WebM (VP8) Codec CSS3 Selectors Microdata WHATWG CSS3 Transitions Canvas HTML5 XPath ECMAScript 5th

Practical HTML5...

IE6 Canvas uupaa uuCancas.js SVG

Web Reference

Technology Status

CSS, Image, Fonts...

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

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 ...

Xiph.Org On2 Tech. Google VP3 Ogg Theora VP4 Vorbis VP5 VP6 WebM VP7 Matroska VP8 VP8 Vorbis

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/

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

Web Only Contents ( ).

Firefox.3.5~ https://developer.mozilla.org/en/Using_native_JSON

https://developer.mozilla.org/ja/Using_native_JSON

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

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

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

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

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://www.slideshare.net/myakura/presentations

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://tools.mozilla.com/ http://processingjs.org/ http://azarask.in/projects/algorithm-ink/ http://code.google.com/p/contextfree/source/browse/trunk/ contextfree.js http://code.google.com/p/uupaa-js-spinoff/

http://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://blog.espol.edu.ec	4
https://twimg0-a.akamaihd.net	2
http://www.iweb34.com	1
http://www.slideshare.net	1

HTML5 Introduction

by dynamis .

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 8

Statistics

HTML5 Introduction Presentation Transcript