HTML5 and web platform
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5 and web platform

on

  • 3,872 views

20100530

20100530
SwapSkills での講演スライド

Statistics

Views

Total Views
3,872
Views on SlideShare
3,816
Embed Views
56

Actions

Likes
2
Downloads
18
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 Presentation Transcript

  • 1. HTML5 & Web Platform Presentation @ SwapSkills by Tomoya Asai (aka. dynamis)
  • 2. Download Please! http://r.dynamis.jp/swapskills
  • 3. Agenda: Download Please! http://r.dynamis.jp/swapskills
  • 4. Share and Active Users
  • 5. Browser MarketShare Graph by AXIIS http://www.axiis.org/examples/BrowserMarketShare.html
  • 6. Browser MarketShare Graph by AXIIS http://www.axiis.org/examples/BrowserMarketShare.html
  • 7. Stats by NetApplications http://marketshare.hitslink.com/
  • 8. http://weblogs.mozillazine.org/asa/archives/2010/05/firefox_and_chrome_u.html
  • 9. http://weblogs.mozillazine.org/asa/archives/2010/05/firefox_and_chrome_u.html
  • 10. HTML5 is...
  • 11. photo by Horia http://www.flickr.com/photos/horiavarlan/4273168957/
  • 12. photo by Horia http://www.flickr.com/photos/horiavarlan/4273168957/
  • 13. This specification evolves HTML and its related APIs to ease the authoring of Web-based applications. http://whatwg.org/html5 - Abstract
  • 14. HTML5 Forms Canvas 2D Graphics Context Microdata Microdata vocabularies Cross-document messaging Channel messaging ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
  • 15. 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?
  • 16. 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?
  • 17. 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?
  • 18. 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
  • 19. 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
  • 20. Web Reference
  • 21. Technology Status
  • 22. CSS, Image, Fonts...
  • 23. ... ...
  • 24. ✴ ✴ ✴ ✴ ✴ ... http://r.dynamis.jp/firefox.next
  • 25. ✴ ✴ ✴ ✴ ✴ ... http://www.slideshare.net/dynamis
  • 26. JS APIs for Web Apps...
  • 27. photo by Aron http://www.flickr.com/photos/aarongustafson/2491839081/
  • 28. : https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms
  • 29. https://wiki.mozilla.org/User:Mounir.lamouri/ HTML5_Forms : https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms
  • 30. photo by 5500 http://www.flickr.com/photos/5500/303849123/
  • 31. https://dev.mozilla.jp/hacksmozillaorg/websockets-in-firefox/
  • 32. Web Sockets API
  • 33. photo by californiaAmy http://www.flickr.com/photos/amyandthomas/3865411819/
  • 34. Firefox3.6~ https://developer.mozilla.org/en/Using_files_from_web_applications
  • 35. https://developer.mozilla.org/en/Using_files_from_web_applications                                 
  • 36. Firefox3.6~ http://r.dynamis.jp/fontdropdemo
  • 37. 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
  • 38. Firefox3.5~ https://developer.mozilla.org/Ja/DragDrop/Drag_and_Drop
  • 39. http://hacks.mozilla.org/2009/12/uploading-files-with-xmlhttprequest/
  • 40. http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html
  • 41. https://dev.mozilla.jp/hacksmozillaorg/firefox-4-the-html5-parser-inline-svg-speed-and-more/
  • 42. Video, Animation, 3D ...
  • 43. Xiph.Org On2 Tech. Google VP3 Ogg Theora VP4 Vorbis VP5 VP6 WebM VP7 Matroska VP8 VP8 Vorbis
  • 44. Theora Firefox 3.5~, WebM Firefox4~
  • 45. 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/
  • 46. Firefox.next~ http://24ways.org/2009/going-nuts-with-css-transitions
  • 47. Firefox.next~ http://24ways.org/2009/going-nuts-with-css-transitions
  • 48. http://media.24ways.org/2009/14/5/index.html
  • 49. SVG Test Suite : http://www.codedread.com/svg-support.php
  • 50. http://people.mozilla.com/~dynamis/demo/smil/
  • 51. Firefox.next~ http://www.khronos.org/webgl/wiki/Demo_Repository
  • 52. Firefox.next~ https://developer.mozilla.org/en/WebGL
  • 53. https://developer.mozilla.org/en/WebGL/Getting_started_with_WebGL                                
  • 54. Future Web Platform
  • 55. : http://vocamus.net/dave/?p=974
  • 56. Audio API URL
  • 57. Firefox3.6~ http://r.dynamis.jp/oryzeademo
  • 58.   Firefox3.6~ http://hacks.mozilla.org/2009/10/orientation-for-firefox/
  • 59. https://developer.mozilla.org/en/Detecting_device_orientation                                              
  • 60.   https://wiki.mozilla.org/Firefox/Projects/Multitouch_Polish
  • 61. http://www.mgalli.com/development/drawing/demoapp.html   https://wiki.mozilla.org/Firefox/Projects/Multitouch_Polish/DOM_Events/Examples
  • 62. for more information...
  • 63. 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
  • 64. http://www.whatwg.org/html5 http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers http://www.codedread.com/svg-support.php
  • 65. 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/
  • 66. http://raphaeljs.com/ Cappuccino: http://objective-j.org/ Sproutcore: http://www.sproutcore.com/ JavaScriptMVC: http://javascriptmvc.com/ Ample SDK: http://www.amplesdk.com/ Gianduia
  • 67. http://www.w3.org/TR/css3-fonts/ http://code.google.com/webfonts http://typekit.com/ http://decomoji.jp/ http://www.fontsquirrel.com/fontface/generator
  • 68. 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
  • 69. 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