• Save
HTML5 and Beyond
Upcoming SlideShare
Loading in...5
×
 

HTML5 and Beyond

on

  • 4,309 views

JSiSE 2010 での講演資料

JSiSE 2010 での講演資料
後半は当日使用していない参考資料

Statistics

Views

Total Views
4,309
Views on SlideShare
4,309
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

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 and Beyond HTML5 and Beyond Presentation Transcript

  • 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
  • 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
  • : http://www.w3b.org/nutzungsverhalten/firefox-3-dominiert-internet-explorer-8.html
  • : http://www.w3b.org/nutzungsverhalten/firefox-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
  • http://whatwg.org/html5 - Abstract
  • 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
  • UI
  • Microformats
  • 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?
  • 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 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 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 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 Offline 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/
  • : http://standards.mitsue.co.jp/resources/mm_comic/
  • Theora Firefox 3.5~, WebM Firefox4~
  • 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
  • Indexed DB Firefox 4
  • Wave : http://atnd.org/events/6995
  • Wave : http://atnd.org/events/6995
  • ”HTML5” FAQ
  • WHATWG : http://whatwg.org/html5
  • WHATWG : http://whatwg.org/html5
  • http://caniuse.com/
  • http://caniuse.com/
  • http://acid3.acidtests.org/
  • http://acid3.acidtests.org/
  • Modernizr: http://www.modernizr.com/
  • Modernizr: http://www.modernizr.com/
  • IE6 : http://ie6funeral.com/
  • IE6 : http://ie6funeral.com/
  • IE6 : http://ie6funeral.com/
  • IE6 : http://ie6funeral.com/
  • StatCounter: http://gs.statcounter.com/ NetApplications: http://marketshare.hitslink.com/
  • StatCounter: http://gs.statcounter.com/ NetApplications: http://marketshare.hitslink.com/
  • StatCounter: http://gs.statcounter.com/ NetApplications: http://marketshare.hitslink.com/
  • http://d.hatena.ne.jp/uupaa/20100728/1280253779
  • http://d.hatena.ne.jp/uupaa/20100728/1280253779
  • http://d.hatena.ne.jp/uupaa/20100728/1280253779
  • ë
  • HTML5 : http://w3g.jp/blog/studies/html5report
  • HTML5 : http://w3g.jp/blog/studies/html5report
  • HTML5 : http://w3g.jp/blog/studies/html5report
  • 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-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.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
  • Firefox3.6~ https://developer.mozilla.org/ja/Using_gradients
  • http://hacks.mozilla.org/2009/11/css-gradients-firefox-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.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/
  • 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/firefox-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-firefox/
  • Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
  • 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-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
  • 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/firefox- 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://benfirshman.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/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
  • 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?