20100530 SwapSkills での講演スライド

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

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. Stats 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. This specification evolves HTML
and its related APIs to ease the
authoring of Web-based applications.
http://whatwg.org/html5 - Abstract

22. HTML5
Forms
Canvas 2D Graphics Context
Microdata
Microdata vocabularies
Cross-document messaging
Channel messaging
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
device element
ping attribute
Next Generation of HTML
ref. http://whatwg.org/html5 - 1.1 Is this HTML5?

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

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

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

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

32. Web
Reference

33. Technology Status

34. CSS, Image, Fonts...

35. ...
...

36. ✴
✴
✴
✴
✴
... http://r.dynamis.jp/firefox.next

37. ✴
✴
✴
✴
✴
... http://www.slideshare.net/dynamis

38. JS APIs for Web Apps...

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

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

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

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

44. https://dev.mozilla.jp/hacksmozillaorg/websockets-in-firefox/

45. Web Sockets API

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

47. Firefox3.6~ https://developer.mozilla.org/en/Using_files_from_web_applications

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

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

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

51. Firefox3.5~ https://developer.mozilla.org/Ja/DragDrop/Drag_and_Drop

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

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

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

55. Video, Animation, 3D ...

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

57. Theora Firefox 3.5~, WebM Firefox4~

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

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

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

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

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

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

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

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

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

70. Future Web Platform

71. : http://vocamus.net/dave/?p=974

73. Audio API
URL

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

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

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

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

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

83. for more information...

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

85. http://www.whatwg.org/html5
http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers
http://www.codedread.com/svg-support.php

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

87. http://raphaeljs.com/
Cappuccino: http://objective-j.org/
Sproutcore: http://www.sproutcore.com/
JavaScriptMVC: http://javascriptmvc.com/
Ample SDK: http://www.amplesdk.com/
Gianduia

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

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

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