HTML5 Introduction
5 likes4,102 views
This document provides an overview and introduction to HTML5. It begins with a discussion of browser market share statistics and the birth of HTML5 by the WHATWG organization. It then outlines the wide range of new HTML5 markup, elements, events, APIs and technologies including forms, canvas, web sockets, and more. The remainder of the document discusses the status and implementation of these HTML5 features across modern browsers like Firefox, and provides references to HTML5 test suites, specifications, implementations and demos.
HTML5 Introduction
- 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
- 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
- 23. This specification evolves HTML and its related APIs to ease the authoring of Web-based applications. http://whatwg.org/html5 - Abstract
- 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
- 39. IE6 Canvas uupaa uuCancas.js SVG
- 40. Web Reference
- 44. Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ CSS : http://css-tricks.com/examples/ButtonMaker/
- 48. Japanese Web Fonts Service by Seesaa http://decomoji.jp/
- 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/
- 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
- 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
- 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
- 82. http://www.mgalli.com/development/drawing/demoapp.html https://wiki.mozilla.org/Firefox/Projects/Multitouch_Polish/DOM_Events/Examples
- 86. Web Only Contents ( ).
- 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