Your SlideShare is downloading. ×
HTML5 and Beyond
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 and Beyond

3,777
views

Published on

JSiSE 2010 での講演資料 …

JSiSE 2010 での講演資料
後半は当日使用していない参考資料

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,777
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 & Beyond Presentation @ JSiSE at Hokkaido by Tomoya ASAI (aka. dynamis) Fractal Firefox Background Image: http://r.dynamis.jp/fractalfx
  • 2. Agenda
  • 3. (References)
  • 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. : http://www.w3b.org/nutzungsverhalten/firefox-3-dominiert-internet-explorer-8.html
  • 11. : http://www.w3b.org/nutzungsverhalten/firefox-3-dominiert-internet-explorer-8.html
  • 12. This specification evolves HTML and its related APIs to ease the authoring of Web-based applications. http://whatwg.org/html5 - Abstract
  • 13. http://whatwg.org/html5 - Abstract
  • 14. http://whatwg.org/html5 - Abstract
  • 15. http://whatwg.org/html5 - Abstract
  • 16. http://whatwg.org/html5 - Abstract
  • 17. 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
  • 18. Tim Berners-Lee : http://dig.csail.mit.edu/breadcrumbs/node/166
  • 19. 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
  • 20. Drag & Drop API IE6 Safari Firefox Ian Hickson http://twitter.com/Hixie/status/4075253361
  • 21. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset-utf-8"/> ... XHTML ...
  • 22. <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> ... HTML5
  • 23. div class="section" <div> class
  • 24. <article> <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup> <p>The apple is the pomaceous fruit of the apple tree.</p> <section> <h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p> </section> <section> ... </section> </article> http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html
  • 25. UI
  • 26. Microformats
  • 27. Microformats
  • 28. name=dynamis, twitter=http://twitter.com/dynamitter
  • 29. DOM Storage
  • 30. <!DOCTYPE html> <html manifest="myapp.manifest" lang="ja"> myapp.manifest
  • 31. <input type="text" required> <input type="email"> <input type="range"> <input type="color"> <input type="datetime"> <input type="search" placeholder= " "> type UI
  • 32. ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
  • 33. ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
  • 34. WHATWG - HTML5 Web Storage Forms Indexed Database API The WebSockets API Canvas 2D Graphics Context Server-Sent Events Microdata Microdata vocabularies XMLHttpRequest Level 2 Cross-document messaging Geolocation API Channel messaging Audio Data API <device> ping="" CSS3 XPath timed track HTML→Atom SVG MathML Next Generation of HTML Web Workers Device Orientation The WebSocket protocol Touch Events : WHATWG Spec W3C Spec Non Standard
  • 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 HTML5
  • 36. 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
  • 37. 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 WHATWG CSS3 Transitions Canvas HTML5 XPath ECMAScript 5th
  • 38. One Point Q&A
  • 39. : http://standards.mitsue.co.jp/resources/mm_comic/
  • 40. : http://standards.mitsue.co.jp/resources/mm_comic/
  • 41. Theora Firefox 3.5~, WebM Firefox4~
  • 42. Theora Firefox 3.5~, WebM Firefox4~
  • 43. 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/
  • 44. Indexed DB Firefox 4
  • 45. Indexed DB Firefox 4
  • 46. Wave : http://atnd.org/events/6995
  • 47. Wave : http://atnd.org/events/6995
  • 48. ”HTML5” FAQ
  • 49. WHATWG : http://whatwg.org/html5
  • 50. WHATWG : http://whatwg.org/html5
  • 51. http://caniuse.com/
  • 52. http://caniuse.com/
  • 53. http://acid3.acidtests.org/
  • 54. http://acid3.acidtests.org/
  • 55. Modernizr: http://www.modernizr.com/
  • 56. Modernizr: http://www.modernizr.com/
  • 57. IE6 : http://ie6funeral.com/
  • 58. IE6 : http://ie6funeral.com/
  • 59. IE6 : http://ie6funeral.com/
  • 60. IE6 : http://ie6funeral.com/
  • 61. StatCounter: http://gs.statcounter.com/ NetApplications: http://marketshare.hitslink.com/
  • 62. StatCounter: http://gs.statcounter.com/ NetApplications: http://marketshare.hitslink.com/
  • 63. StatCounter: http://gs.statcounter.com/ NetApplications: http://marketshare.hitslink.com/
  • 64. http://d.hatena.ne.jp/uupaa/20100728/1280253779
  • 65. http://d.hatena.ne.jp/uupaa/20100728/1280253779
  • 66. http://d.hatena.ne.jp/uupaa/20100728/1280253779
  • 67. ë
  • 68. HTML5 : http://w3g.jp/blog/studies/html5report
  • 69. HTML5 : http://w3g.jp/blog/studies/html5report
  • 70. HTML5 : http://w3g.jp/blog/studies/html5report
  • 71. HTML5 : http://w3g.jp/blog/studies/html5report
  • 72. CSS, Image, Fonts...
  • 73. Firefox3.5~ http://hacks.mozilla.org/2009/06/text-shadow-spotlight/
  • 74. Firefox3.5~ https://developer.mozilla.org/ja/CSS/Text-shadow
  • 75. http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html
  • 76. Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ CSS : http://css-tricks.com/examples/ButtonMaker/
  • 77. Firefox3.6~ http://dev.w3.org/csswg/css3-images/#gradients-
  • 78. http://people.mozilla.org/~blizzard/2009-11-gradient-button/sample.html
  • 79. Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
  • 80. Firefox3.6~ https://developer.mozilla.org/ja/Using_gradients
  • 81. http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
  • 82. Firefox3.5~ http://www.alistapart.com/articles/cssatten
  • 83. Japanese Web Fonts Service by Seesaa http://decomoji.jp/
  • 84. Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face
  • 85. sample css style rules Firefox3.5~ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
  • 86. JS APIs for Web Apps...
  • 87. photo by 5500 http://www.flickr.com/photos/5500/303849123/
  • 88. https://dev.mozilla.jp/hacksmozillaorg/websockets-in-firefox/
  • 89. Web Sockets API
  • 90. photo by californiaAmy http://www.flickr.com/photos/amyandthomas/3865411819/
  • 91. Firefox3.6~ https://developer.mozilla.org/en/Using_files_from_web_applications
  • 92. https://developer.mozilla.org/en/Using_files_from_web_applications                                 
  • 93. Firefox3.6~ http://r.dynamis.jp/fontdropdemo
  • 94. 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
  • 95. Firefox3.5~ https://developer.mozilla.org/Ja/DragDrop/Drag_and_Drop
  • 96. http://hacks.mozilla.org/2009/12/uploading-files-with-xmlhttprequest/
  • 97. Firefox.3.6~ https://developer.mozilla.org/en/CSS/pointer-events
  • 98. http://demos.hacks.mozilla.org/openweb/pointer-events/
  • 99. Firefox3.5~ https://developer.mozilla.org/ja/Using_geolocation
  • 100. http://r.dynamis.jp/geolocationdemo
  • 101. http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html
  • 102. https://dev.mozilla.jp/hacksmozillaorg/firefox-4-the-html5-parser-inline-svg-speed-and-more/
  • 103. Video, Animation, 3D ...
  • 104. Firefox.3.5~ http://hacks.mozilla.org/category/video/
  • 105. http://hacks.mozilla.org/2009/12/autobuffering-video-in-firefox/
  • 106. Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
  • 107. Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
  • 108. http://media.24ways.org/2009/14/5/index.html
  • 109. SVG Test Suite : http://www.codedread.com/svg-support.php
  • 110. http://people.mozilla.com/~dynamis/demo/smil/
  • 111. Firefox 4~ http://www.khronos.org/webgl/wiki/Demo_Repository
  • 112. Firefox 4~ https://developer.mozilla.org/en/WebGL
  • 113. https://developer.mozilla.org/en/WebGL/Getting_started_with_WebGL                                
  • 114. Future Web Platform
  • 115. : http://vocamus.net/dave/?p=974
  • 116. Firefox3.6~ http://r.dynamis.jp/oryzeademo
  • 117.   Firefox3.6~ http://hacks.mozilla.org/2009/10/orientation-for-firefox/
  • 118. https://developer.mozilla.org/en/Detecting_device_orientation                                              
  • 119.   https://wiki.mozilla.org/Firefox/Projects/Multitouch_Polish
  • 120. http://www.mgalli.com/development/drawing/demoapp.html   https://wiki.mozilla.org/Firefox/Projects/Multitouch_Polish/DOM_Events/Examples
  • 121. for more information...
  • 122. 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://w3g.jp/blog/studies/html5report
  • 123. 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
  • 124. 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
  • 125. http://hacks.mozilla.org/ http://html5rocks.com/ http://developer.apple.com/safaridemos/ http://ie.microsoft.com/testdrive/ http://twitter.com/paulrouget/
  • 126. http://html5gallery.com/ http://www.scribd.com/doc/30964170/Scribd-in-HTML5 http://280slides.com/ http://www.youtube.com/html5 http://benfirshman.com/projects/jsnes/
  • 127. 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://d.hatena.ne.jp/uupaa/searchdiary?word=*[uupaa.js]
  • 128. http://raphaeljs.com/ http://g.raphaeljs.com/ Cappuccino: http://objective-j.org/ Sproutcore: http://www.sproutcore.com/ JavaScriptMVC: http://javascriptmvc.com/ Ample SDK: http://www.amplesdk.com/ Gianduia
  • 129. http://www.w3.org/TR/css3-fonts/ http://code.google.com/webfonts http://typekit.com/ http://decomoji.jp/ http://www.fontsquirrel.com/fontface/generator
  • 130. 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
  • 131. 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
  • 132. http://www.w3.org/Style/CSS/current-work 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?