SwapSkills2010 vol.3 浅井智也 1. HTML5 のホントとウソ 2. いま使える技術、次に来る技術 3. アプリケーションプラットフォーム 4. ネイティブマルチメディア機能 5. HTML5 の彼方に

1. HTML5 & Web Platform
Presentation @ SwapSkills
by Tomoya Asai (aka. dynamis)

3. Agenda:

4. Share and Active Users

6. Browser MarketShare Graph by AXIIS
http://www.axiis.org/examples/BrowserMarketShare.html

7. Browser MarketShare Graph by AXIIS
http://www.axiis.org/examples/BrowserMarketShare.html

9. Browser MarketShare Data by NetApplications
http://marketshare.hitslink.com/

10. http://weblogs.mozillazine.org/asa/archives/2010/05/firefox_and_chrome_u.html

11. http://weblogs.mozillazine.org/asa/archives/2010/05/firefox_and_chrome_u.html

12. HTML5 is...

15. photo by Horia http://www.flickr.com/photos/horiavarlan/4273168957/

18. photo by Horia http://www.flickr.com/photos/horiavarlan/4273168957/

21. HTML5
Forms
Canvas 2D Graphics Context
Microdata
Microdata vocabularies
Cross-document messaging
Channel messaging
ref. http://whatwg.org/html5 - 1.1 Is this HTML5?

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

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

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

25. This specification evolves HTML and
its related APIs to ease the authoring
of Web-based applications.
http://whatwg.org/html5 - Abstract

31. Technology Status

32. CSS, Image, Fonts...

34. ✴
✴
✴
✴
✴
... https://developer.mozilla.org/en/Upcoming_Firefox_features_for_developers

35. ✴
✴
✴
✴
✴
... https://developer.mozilla.org/en/Upcoming_Firefox_features_for_developers

36. JS APIs for Web Apps...

37. photo by Aron http://www.flickr.com/photos/aarongustafson/2491839081/

39. : https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms

40. https://wiki.mozilla.org/User:Mounir.lamouri/
HTML5_Forms
: https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms

41. photo by 5500 http://www.flickr.com/photos/5500/303849123/

42. ( ) ...

43. Web Sockets API

44. photo by californiaAmy http://www.flickr.com/photos/amyandthomas/3865411819/

46. https://developer.mozilla.org/en/Using_files_from_web_applications

47. Firefox3.6~ http://r.dynamis.jp/fontdropdemo

49. http://hacks.mozilla.org/2009/12/uploading-files-with-xmlhttprequest/

50. http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html

51. https://dev.mozilla.jp/hacksmozillaorg/firefox-4-the-html5-parser-inline-svg-speed-and-more/

52. Video, Animation, 3D ...

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

54. Theora Firefox 3.5~, WebM Firefox4~

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

56. Firefox.next~ http://24ways.org/2009/going-nuts-with-css-transitions

57. Firefox.next~ http://24ways.org/2009/going-nuts-with-css-transitions

58. http://media.24ways.org/2009/14/5/index.html

60. SVG Test Suite : http://www.codedread.com/svg-support.php

61. http://people.mozilla.com/~dynamis/demo/smil/

62. Firefox.next~ http://www.khronos.org/webgl/wiki/Demo_Repository

63. Firefox.next~ https://developer.mozilla.org/en/WebGL

64. https://developer.mozilla.org/en/WebGL/Getting_started_with_WebGL

65. Future Web Platform

68. Firefox3.6~ http://r.dynamis.jp/oryzeademo

69.
Firefox3.6~ http://hacks.mozilla.org/2009/10/orientation-for-firefox/

70. https://developer.mozilla.org/en/Detecting_device_orientation

72.
https://wiki.mozilla.org/Firefox/Projects/Multitouch_Polish

73. http://www.mgalli.com/development/drawing/demoapp.html
https://wiki.mozilla.org/Firefox/Projects/Multitouch_Polish/DOM_Events/Examples

76. for more information...

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

78. http://tools.mozilla.com/
http://processingjs.org/
http://code.google.com/p/uupaa-js/
Cappuccino: http://objective-j.org/
Sproutcore: http://www.sproutcore.com/
JavaScriptMVC: http://javascriptmvc.com/

79. http://www.w3.org/TR/css3-fonts/
http://code.google.com/webfonts
http://typekit.com/
http://decomoji.jp/
http://www.fontsquirrel.com/fontface/generator

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

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