HTML5 Introduction
Upcoming SlideShare
Loading in...5
×
 

HTML5 Introduction

on

  • 7,018 views

20100626 OSC Hokkaido での講演スライド

20100626 OSC Hokkaido での講演スライド
end と書いたページ以降に講演で使わなかったおまけスライドや参照 URL 集があります

Statistics

Views

Total Views
7,018
Slideshare-icon Views on SlideShare
7,010
Embed Views
8

Actions

Likes
5
Downloads
88
Comments
0

4 Embeds 8

http://blog.espol.edu.ec 4
https://twimg0-a.akamaihd.net 2
http://www.iweb34.com 1
http://www.slideshare.net 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 Introduction HTML5 Introduction Presentation Transcript

    • 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
    • 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/firefox_and_chrome_u.html
    • http://weblogs.mozillazine.org/asa/archives/2010/05/firefox_and_chrome_u.html
    • Birth of HTML5...
    • 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...
    • 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 Offline 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 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
    • 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 Offline 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 Offline 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-firefox-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.flickr.com/photos/5500/303849123/
    • https://dev.mozilla.jp/hacksmozillaorg/websockets-in-firefox/
    • Web Sockets API
    • photo by californiaAmy http://www.flickr.com/photos/amyandthomas/3865411819/
    • Firefox3.6~ https://developer.mozilla.org/en/Using_files_from_web_applications
    • https://developer.mozilla.org/en/Using_files_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-files-with-xmlhttprequest/
    • http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html
    • https://dev.mozilla.jp/hacksmozillaorg/firefox-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-firefox/
    • 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-firefox/
    • 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/file-writer-api/ http://www.w3.org/TR/geolocation-API/ https://wiki.mozilla.org/Audio_Data_API https://developer.mozilla.org/en/DOM/ window.onmozorientation