20110225 名古屋新事業センター「ITベンチャー支援セミナー」で使用したスライド

1. Change by HTML5
Slides @ New-Biz Seminar
by Tomoya ASAI (dynamis)
Fractal Firefox Background Image: http://r.dynamis.jp/fractalfx

5. Agenda

9. Key point HTML5
What "HTML5" is?

12. This specification evolves HTML
and its related APIs to ease the
authoring of Web-based applications.

20. It is necessary to evolve HTML
incrementally. The attempt to
get the world to switch to
XML, ... all at once didn't work.
Tim Berners-Lee : http://dig.csail.mit.edu/breadcrumbs/node/166

21. Tim Berners-Lee : http://dig.csail.mit.edu/breadcrumbs/node/166

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

24. Drag & Drop API
IE6 Safari
Firefox
Ian Hickson http://twitter.com/Hixie/status/4075253361

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
Microformats WebM (VP8) Codec
Microdata CSS3 Transitions
XPath ECMAScript 5th

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
Microformats WebM (VP8) Codec
WHATWG
Microdata CSS3 Transitions
Canvas HTML5
XPath ECMAScript 5th

29. Web ( "HTML5")
Web Applications 1.0 (CSS)
Next Generation of HTML
WHATWG - HTML5 CSS Images (Gradients ...)
CSS 2D Transforms
Microdata ( ) CSS Media Queries
Events & Messaging ( ) Web Fonts
Web ...
SVG SMIL
device , ping ... MathML WebGL
Web Workers
Web Storage Indexed Database API
Web Sockets Audio Data API

35. WHATWG - HTML5 W3C - 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 W3C HTML5

38. IE8 IE9

40. Styling
More CSS...

41. Firefox3.5~ http://hacks.mozilla.org/2009/06/text-shadow-spotlight/

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

43. Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

44. http://hacks.mozilla.org/2010/08/mozelement/

45. Typography
Font Control...

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

47. http://decomoji.jp/
http://fontsquirrel.com/fontface/
generator
http://decomoji.jp/

48. : http://people.mozilla.org/~jdaggett/webfontsfuture.pdf

49. http://hacks.mozilla.org/2009/10/font-control-for-designers/

50. Animation
Transisions, SMIL...

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

53. Multimedia
Audio, Video...

54. http://www.w3.org/2005/Incubator/audio/

55. http://twitter.com/cherenkov/status/21614170698

56. Firefox <video>
VLC Web Browser Plugin: http://www.videolan.org/vlc/download-macosx.html

57. 3D Graphics
WebGL with GPU...

58. http://www.khronos.org/webgl/

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

60. Device Sensor
Hardware Sensors...

61. Firefox3.5~ https://developer.mozilla.org/ja/Using_geolocation

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

64. Multi Device
Android, iPhone, iPad...

69. http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px) { /* Styles
*/ }
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* Styles
*/ }
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* Styles */ }
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) { /* Styles */ }
/* Large screens ----------- */
@media only screen and (min-width : 1824px) { /* Styles */ }
/* iPhone 4 and high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }
cm

72. Performance
Faster and Faster...

74. IE8 ( ) IE9pp7 Fx3.6 Safari5 WebKit Chrome 9b Chrome canary Fx4 b10
(crankshaft)
2/6 Kraken Benchmark IE8 Win7 MBA-late2010

75. Facebook https://developers.facebook.com/blog/post/460

76. Other
More and More...

80. http://hacks.mozilla.org/2010/12/websockets-disabled-in-firefox-4/

81. http://r.dynamis.jp/mozhacks

88. ë

93. WHATWG : http://whatwg.org/html5

95. http://caniuse.com/

96. http://caniuse.com/

97. http://acid3.acidtests.org/

98. Modernizr: http://www.modernizr.com/

99. One Point Q&A

101. Theora Firefox 3.5~, WebM Firefox4~

102. Xiph.Org On2 Tech. Google
VP3
Ogg
Theora VP4
Vorbis VP5
VP6 WebM
Ogg
VP7 Matroska
VP8 VP8
Vorbis
Container
Video
Audio
WebM FAQ: http://www.webmproject.org/about/faq/

103. http://shaver.off.net/diary/2010/08/27/free-as-in-smokescreen/
OSS

110. References
for more information...

111. http://hacks.mozilla.org/
https://dev.mozilla.jp/hacksmozillaorg/
https://developer.mozilla.org/ja/Firefox_4_for_developers
https://developer.mozilla.org/ja/Firefox_3.6_for_developers
http://www.whatwg.org/html5
http://developers.whatwg.org/
http://w3g.jp/blog/studies/html5report

112. http://www.slideshare.net/myakura/presentations
http://www.slideshare.net/myakura/microdata-a-primer
http://people.mozilla.org/~jdaggett/webfontsfuture.pdf
http://www.slideshare.net/beltzner/firefox-
roadmap-2010-0510

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

114. http://hacks.mozilla.org/
http://html5rocks.com/
http://developer.apple.com/safaridemos/
http://ie.microsoft.com/testdrive/
http://twitter.com/paulrouget/
Web

115. http://html5gallery.com/
http://www.scribd.com/doc/30964170/Scribd-in-HTML5
http://280slides.com/
http://www.youtube.com/html5

116. https://gaming.mozillalabs.com/
http://www.canvasdemos.com/type/games/
http://benfirshman.com/projects/jsnes/
http://www.dextrose.com/en/projects/aves-engine
http://www.kesiev.com/akihabara/
Web

117. 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/cakejs/

118. ë
http://raphaeljs.com/
http://g.raphaeljs.com/
http://graph.tk/
http://senchalabs.github.com/philogl/
http://d.hatena.ne.jp/uupaa/searchdiary?word=*[uupaa.js]
IE Canvas

119. Cappuccino: http://objective-j.org/
Sproutcore: http://www.sproutcore.com/
JavaScriptMVC: http://javascriptmvc.com/
Ample SDK: http://www.amplesdk.com/
jQuery Mobile: http://jquerymobile.com/
Sencha Touch: http://www.sencha.com/products/touch/
jQTouch: http://www.jqtouch.com/
Gianduia

120. http://www.appcelerator.com/products/titanium-mobile-
application-development/
http://phonegap.com/

121. http://hacks.mozilla.org/category/performance/
https://developers.facebook.com/blog/post/460
http://dt.deviantart.com/blog/38471599/
http://mozilla.jp/blog/entry/5927/

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

123. http://www.khronos.org/webgl/
http://www.khronos.org/webgl/wiki/Demo_Repository
https://developer.mozilla.org/en/WebGL
http://www.gatk.net/webgl/
http://webos-goodies.jp/archives/
getting_started_with_webgl.html
http://learningwebgl.com/cookbook/

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

125. http://www.w3.org/Style/CSS/current-work
https://cvs.khronos.org/svn/repos/registry/trunk/public/
webgl/doc/spec/WebGL-spec.html
https://cvs.khronos.org/svn/repos/registry/trunk/public/
webgl/doc/spec/TypedArray-spec.html
http://www.whatwg.org/specs/web-apps/current-work/
multipage/introduction.html#is-this-html5?