20100626 OSC Hokkaido での講演スライド end と書いたページ以降に講演で使わなかったおまけスライドや参照 URL 集があります

1. HTML5 Introduction
Presentation @ OSC 2010 Hokkaido
by Tomoya Asai (aka. dynamis)

4. HTML5&CSS3 http://people.opera.com/danield/html5/vuvuzela/

5. Agenda:

6. Share and Active Users

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

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

11. Stats by NetApplications
http://marketshare.hitslink.com/

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

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

15. Birth of HTML5...

16. Birth of HTML5...

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

24. http://whatwg.org/html5 - Abstract

25. Range of HTML5...

26. Range of HTML5...

28. 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) Codec CSS3 Selectors
Microdata CSS3 Transitions
XPath ECMAScript 5th

29. ref. http://whatwg.org/html5 - 1.1 Is this HTML5?

30. HTML5 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
WHATWG HTML5

31. HTML5 HTML5
Elements, Events, APIs Elements, Events, APIs
Canvas 2D Graphics Context HTML Canvas 2D Context
Microdata HTML5 Microdata
Microdata vocabularies
Cross-document messaging HTML5 Web Messaging
Channel messaging
device element
ping attribute
timed track model
converting HTML to Atom
Next Generation of HTML
WHATWG HTML5

32. HTML5 HTML5
Elements, Events, APIs Elements, Events, APIs
Canvas 2D Graphics Context HTML Canvas 2D Context
Microdata HTML5 Microdata
Microdata vocabularies
Cross-document messaging HTML5 Web Messaging
Channel messaging
<device> ping="" Web Storage
timed track HTML→Atom 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
HTML5

33. 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) Codec CSS3 Selectors
Microdata CSS3 Transitions
XPath ECMAScript 5th

34. 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) Codec CSS3 Selectors
Microdata WHATWG
CSS3 Transitions
Canvas HTML5
XPath ECMAScript 5th

36. Practical HTML5...

39. IE6 Canvas
uupaa uuCancas.js
SVG

40. Web
Reference

41. Technology Status

43. CSS, Image, Fonts...

44. Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
CSS : http://css-tricks.com/examples/ButtonMaker/

45. Firefox3.6~ http://dev.w3.org/csswg/css3-images/#gradients-

46. http://people.mozilla.org/~blizzard/2009-11-gradient-button/sample.html

47. Firefox3.5~ http://www.alistapart.com/articles/cssatten

48. Japanese Web Fonts Service by Seesaa http://decomoji.jp/

49. Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face

50. sample css style rules
Firefox3.5~ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/

51. JS APIs for Web Apps...

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

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

54. Web Sockets API

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

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

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

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

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

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

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

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

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

64. Video, Animation, 3D ...

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

66. Theora Firefox 3.5~, WebM Firefox4~

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

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

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

71. Firefox 4~ http://www.khronos.org/webgl/wiki/Demo_Repository

72. Firefox 4~ https://developer.mozilla.org/en/WebGL

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

74. Future Web Platform

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

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

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

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

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

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

86. Web Only Contents ( ).

87. Firefox.3.5~ https://developer.mozilla.org/en/Using_native_JSON

88. https://developer.mozilla.org/ja/Using_native_JSON

89. Firefox.3.5~ http://hacks.mozilla.org/category/video/

90. http://hacks.mozilla.org/2009/12/autobuffering-video-in-firefox/

91. Firefox.3.6~ https://developer.mozilla.org/en/CSS/pointer-events

92. http://demos.hacks.mozilla.org/openweb/pointer-events/

93. for more information...

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

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

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

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

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

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

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