Download as PDF, PPTX
![ë 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](https://image.slidesharecdn.com/changebyhtml51-1-110224212947-phpapp02/75/Change-by-HTML5-118-2048.jpg)
Uploaded bydynamis
Change by HTML5
The document summarizes key features of HTML5 including updated markup, forms, multimedia elements, APIs, and specifications. It discusses the evolution of HTML in an incremental way to ease authoring of web applications. Specific HTML5 features covered include forms, Canvas, WebSockets, and APIs for drag-and-drop, geolocation, offline events, and more. Browser support for HTML5 is also addressed.
Change by HTML5
- 1. Change by HTML5 Slides @ New-Biz Seminar by Tomoya ASAI (dynamis) Fractal Firefox Background Image: http://r.dynamis.jp/fractalfx
- 5.
- 9. Key point HTML5 What"HTML5" is?
- 12. This specification evolvesHTML and its related APIs to ease the authoring of Web-based applications.
- 20. It is necessaryto 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 APIis 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 & DropAPI 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.
- 41.
- 42. Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ CSS : http://css-tricks.com/examples/ButtonMaker/
- 43.
- 44.
- 45.
- 46.
- 47. http://decomoji.jp/ http://fontsquirrel.com/fontface/ generator http://decomoji.jp/
- 48.
- 49.
- 50.
- 51.
- 53.
- 54.
- 55.
- 56. Firefox <video> VLC Web Browser Plugin: http://www.videolan.org/vlc/download-macosx.html
- 57. 3D Graphics WebGL withGPU...
- 58.
- 59.
- 60.
- 61.
- 62.
- 64.
- 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.
- 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.
- 80.
- 81.
- 88.
- 93. WHATWG : http://whatwg.org/html5
- 95.
- 96.
- 97.
- 98.
- 99.
- 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.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 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.
- 121.
- 122.
- 123.
- 124.
- 125.