Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Similar a Html5
Similar a Html5 (20)
Último
Último (20)
Html5
- 2. 2/ HTML5 Learn & Share / 12/1/2011
- 3. What is HTML5? • Joint effort between W3C and WHATWG • The next major revision of HTML and XHTML • Documentation of previously undocumented APIs (“DOM Level 0”) • A snapshot of an evolving standard • “It’s not one big thing” 3/ HTML5 Learn & Share / 12/1/2011
- 4. An Evolving Standard • HTML4 reached “W3C Recommendation” status in 1997 • HTML5 draft started in 2004 • Some features already available, others in progress • Timeline for HTML5 Recommendation set for 2022 4/ HTML5 Learn & Share / 12/1/2011
- 5. New Features
- 6. <canvas> • By itself, a blank box. With JavaScript, a drawing surface • Basic drawing support: lines, gradients, embedded images, basic shapes • Potential future support for 3D canvases 6/ HTML5 Learn & Share / 12/1/2011
- 7. <video> • Standardized way to embed video without QuickTime, Flash, RealPlayer, etc… • <video> tag does not specify codec/container type 7/ HTML5 Learn & Share / 12/1/2011
- 8. Geolocation API • Scripting solution for detecting user latitude, longitude, altitude • W3C standard requires it be opt-in • Specification of “high accuracy” and “low accuracy” modes 8/ HTML5 Learn & Share / 12/1/2011
- 9. New Form Content • Placeholder text • Autofocus • Required fields • New input types: email, URL, numbers, sliders, date pickers, color pickers, search boxes 9/ HTML5 Learn & Share / 12/1/2011
- 10. Drag and Drop • Defines a “draggable” attribute for any element • Dragenter, dragover, drop events (and associated elements for assigning handlers) • Support for different effect types: “none,” “copy,” “link” and “move” 10 / HTML5 Learn & Share / 12/1/2011
- 11. Local Storage • Provide data storage for web apps without plugins or browser-dependence • Store key-value pairs of anything JavaScript supports • Event listener support to detect changes 11 / HTML5 Learn & Share / 12/1/2011
- 12. …and more • MathML and SVG support • <section>, <header>, <nav>, <figure>… • Form elements independent of the form itself • Spellcheck, contextmenu, and hidden attributes • Removal of many elements now handled by CSS 12 / HTML5 Learn & Share / 12/1/2011
- 13. Recommended Reading W3C Working Draft: http://www.w3.org/TR/html5/ WHATWG “Living Standard”: http://www.whatwg.org/specs/web- apps/current-work/multipage/ Free online O’Reilly text: http://diveintohtml5.org Google guides and tutorials: http://www.html5rocks.com/ 13 / HTML5 Learn & Share / 12/1/2011
Notas del editor
- W3C – World Wide Web ConsortiumWHATWG – Web Hypertext Application Technology Working GroupDOM Level 0 – DOM as it existed as of IE/Netscape 3.0
- W3C Recommendation – What makes it an official standard. Working Draft -> Candidate Recommendation -> Proposed Recommendation -> W3C RecommendationHTML5 Recommendation features exhaustive testing not done before for any prior standardsFeature support entirely browser-dependent, but Opera, Firefox, Safari, and (upcoming) IE9 all implement a number of different new features.
- Could accept user input and allow them to draw; could also draw entirely based on scriptsCoordinate-based system
- A way around Flash video, as described in the news article seen earlierUnfortunately, kind of a non-standardized standardWhich type of video is supported very browser-dependent – to hit them all, need to provide different types
- Beneficial for mobile devicesHigh accuracy typically means GPS, low means triangulation
- Autofocus – avoid scripting issues wherein focus is grabbed after images load (caused by timing of onload event typically used for setting focus)iPhone screen shots show the benefit of using “email” or “number” input typesIf the new input types are supported, it reverts to type=text… this is standard for everyone, even IE6, so no reason not to use the new types now
- Based on original Microsoft implementation (supposedly?)JavaScript-heavy, but native support in the browser will make it much easier to implement
- A number of attempted hacks in the past – MS-specific solution, “Flash cookies,” etc.Some worked, but all were eventually browser- or plugin-dependent, with varying limitations and APIsUp to 5 MB at this point, with no real mechanism for requesting more