• Like
  • Save
HTML5 and web platform
Upcoming SlideShare
Loading in...5
×
 

HTML5 and web platform

on

  • 3,769 views

20100530

20100530
SwapSkills での講演スライド

Statistics

Views

Total Views
3,769
Views on SlideShare
3,713
Embed Views
56

Actions

Likes
2
Downloads
16
Comments
0

1 Embed 56

http://www.slideshare.net 56

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

    • HTML5 & Web Platform Presentation @ SwapSkills by Tomoya Asai (aka. dynamis)
    • Download Please! http://r.dynamis.jp/swapskills
    • Agenda: Download Please! http://r.dynamis.jp/swapskills
    • 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
    • HTML5 is...
    • photo by Horia http://www.flickr.com/photos/horiavarlan/4273168957/
    • photo by Horia http://www.flickr.com/photos/horiavarlan/4273168957/
    • This specification evolves HTML and its related APIs to ease the authoring of Web-based applications. http://whatwg.org/html5 - Abstract
    • HTML5 Forms Canvas 2D Graphics Context Microdata Microdata vocabularies Cross-document messaging Channel messaging ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
    • HTML5 Forms Canvas 2D Graphics Context Microdata Microdata vocabularies Cross-document messaging Channel messaging device element ping attribute Next Generation of HTML ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
    • HTML5 Forms Canvas 2D Graphics Context Microdata Microdata vocabularies Cross-document messaging Channel messaging Web SQL Database device element Web Storage ping attribute 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 ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
    • HTML5 HTML5 Forms Forms Canvas 2D Graphics Context HTML Canvas 2D Context Microdata HTML5 Microdata Microdata vocabularies Cross-document messaging HTML5 Web Messaging Channel messaging device element Web Storage ping attribute 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 ref. http://whatwg.org/html5 - 1.1 Is this 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) 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) CSS3 Selectors Microdata CSS3 Transitions XPath ECMAScript 5th
    • Web Reference
    • Technology Status
    • CSS, Image, Fonts...
    • ... ...
    • ✴ ✴ ✴ ✴ ✴ ... http://r.dynamis.jp/firefox.next
    • ✴ ✴ ✴ ✴ ✴ ... http://www.slideshare.net/dynamis
    • JS APIs for Web Apps...
    • photo by Aron http://www.flickr.com/photos/aarongustafson/2491839081/
    • : https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms
    • https://wiki.mozilla.org/User:Mounir.lamouri/ HTML5_Forms : https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms
    • 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/
    • Firefox.next~ http://24ways.org/2009/going-nuts-with-css-transitions
    • Firefox.next~ 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.next~ http://www.khronos.org/webgl/wiki/Demo_Repository
    • Firefox.next~ 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
    • Audio API URL
    • 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://www.slideshare.net/myakura/presentations
    • http://www.whatwg.org/html5 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