Your SlideShare is downloading. ×
0
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
HTML5 Introduction
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 Introduction

6,861

Published on

20100626 OSC Hokkaido での講演スライド …

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

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,861
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
97
Comments
0
Likes
5
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 Introduction Presentation @ OSC 2010 Hokkaido by Tomoya Asai (aka. dynamis)
  • 2. HTML5&CSS3 http://people.opera.com/danield/html5/vuvuzela/
  • 3. Agenda:
  • 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. Birth of HTML5...
  • 11. Birth of HTML5...
  • 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. Range of HTML5...
  • 15. Range of HTML5...
  • 16. 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
  • 17. ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 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
  • 22. 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
  • 23. Practical HTML5...
  • 24. IE6 Canvas uupaa uuCancas.js SVG
  • 25. Web Reference
  • 26. Technology Status
  • 27. CSS, Image, Fonts...
  • 28. Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ CSS : http://css-tricks.com/examples/ButtonMaker/
  • 29. Firefox3.6~ http://dev.w3.org/csswg/css3-images/#gradients-
  • 30. http://people.mozilla.org/~blizzard/2009-11-gradient-button/sample.html
  • 31. Firefox3.5~ http://www.alistapart.com/articles/cssatten
  • 32. Japanese Web Fonts Service by Seesaa http://decomoji.jp/
  • 33. Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face
  • 34. sample css style rules Firefox3.5~ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
  • 35. JS APIs for Web Apps...
  • 36. photo by 5500 http://www.flickr.com/photos/5500/303849123/
  • 37. https://dev.mozilla.jp/hacksmozillaorg/websockets-in-firefox/
  • 38. Web Sockets API
  • 39. photo by californiaAmy http://www.flickr.com/photos/amyandthomas/3865411819/
  • 40. Firefox3.6~ https://developer.mozilla.org/en/Using_files_from_web_applications
  • 41. https://developer.mozilla.org/en/Using_files_from_web_applications                                 
  • 42. Firefox3.6~ http://r.dynamis.jp/fontdropdemo
  • 43. 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
  • 44. Firefox3.5~ https://developer.mozilla.org/Ja/DragDrop/Drag_and_Drop
  • 45. http://hacks.mozilla.org/2009/12/uploading-files-with-xmlhttprequest/
  • 46. http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html
  • 47. https://dev.mozilla.jp/hacksmozillaorg/firefox-4-the-html5-parser-inline-svg-speed-and-more/
  • 48. Video, Animation, 3D ...
  • 49. Xiph.Org On2 Tech. Google VP3 Ogg Theora VP4 Vorbis VP5 VP6 WebM VP7 Matroska VP8 VP8 Vorbis
  • 50. Theora Firefox 3.5~, WebM Firefox4~
  • 51. 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/
  • 52. SVG Test Suite : http://www.codedread.com/svg-support.php
  • 53. http://people.mozilla.com/~dynamis/demo/smil/
  • 54. Firefox 4~ http://www.khronos.org/webgl/wiki/Demo_Repository
  • 55. Firefox 4~ https://developer.mozilla.org/en/WebGL
  • 56. https://developer.mozilla.org/en/WebGL/Getting_started_with_WebGL                                
  • 57. Future Web Platform
  • 58. : http://vocamus.net/dave/?p=974
  • 59. Firefox3.6~ http://r.dynamis.jp/oryzeademo
  • 60.   Firefox3.6~ http://hacks.mozilla.org/2009/10/orientation-for-firefox/
  • 61. https://developer.mozilla.org/en/Detecting_device_orientation                                              
  • 62.   https://wiki.mozilla.org/Firefox/Projects/Multitouch_Polish
  • 63. http://www.mgalli.com/development/drawing/demoapp.html   https://wiki.mozilla.org/Firefox/Projects/Multitouch_Polish/DOM_Events/Examples
  • 64. Web Only Contents ( ).
  • 65. Firefox.3.5~ https://developer.mozilla.org/en/Using_native_JSON
  • 66. https://developer.mozilla.org/ja/Using_native_JSON      
  • 67. Firefox.3.5~ http://hacks.mozilla.org/category/video/
  • 68. http://hacks.mozilla.org/2009/12/autobuffering-video-in-firefox/
  • 69. Firefox.3.6~ https://developer.mozilla.org/en/CSS/pointer-events
  • 70. http://demos.hacks.mozilla.org/openweb/pointer-events/
  • 71. for more information...
  • 72. 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
  • 73. 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
  • 74. 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/
  • 75. http://raphaeljs.com/ Cappuccino: http://objective-j.org/ Sproutcore: http://www.sproutcore.com/ JavaScriptMVC: http://javascriptmvc.com/ Ample SDK: http://www.amplesdk.com/ Gianduia
  • 76. http://www.w3.org/TR/css3-fonts/ http://code.google.com/webfonts http://typekit.com/ http://decomoji.jp/ http://www.fontsquirrel.com/fontface/generator
  • 77. 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
  • 78. 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

×