HTML5: Introduction

F8a70e01eddbadc5e4f9876ff34494fa?s=47 Guille Paz
November 02, 2012

HTML5: Introduction

F8a70e01eddbadc5e4f9876ff34494fa?s=128

Guille Paz

November 02, 2012
Tweet

Transcript

  1. 6.
  2. 9.

    Collection of tools • Semantics • Offline & Storage •

    Devices Access • Connectivity • Multimedia • 3D, Graphics & Effects • Performance & Integration
  3. 11.

    Semantics • More meaningful elements • Better semantic tags and

    attributes • Semantic structure • Microdata / Microformats • ARIA attributes • New form types • More simple and cool
  4. 12.
  5. 18.
  6. 19.
  7. 21.

    Custom data attribute data-* inside HTML elements Parse them using

    JavaScript (getAttribute method) * = custom attributes: user, name, phone, id, chico, meli, etc...
  8. 24.

    Mircrodata • Semantic attributes and properties • Search engines, Web

    crawlers, Browsers • Provide a richer browsing experience for users
  9. 25.

    <p itemscope> I’m going to the <a itemprop="url" href="http:/ /www.saltercane.com/">Salter

    Cane</a> gig <data itemprop="date" datetime="2010-07-18">next week</data>. Excited!</p>
  10. 26.
  11. 27.

    ARIA attributes • Improve the accessibility of RIAs • JavaScript

    components • Helps with dynamic content • Semantic attributes and properties: • roles (tree, navigation, presentation) • properties (aria-selected, aria-hidden)
  12. 30.
  13. 31.

    New forms • Semantic types and attributes • Mobile compatibility

    • Validation engine • Custom patterns • More control
  14. 36.
  15. 37.

    Local Storage • JavaScript API • Cliente-side database • Key-value

    notation (JSON) • Stored in users browsers • 5 MB (per domain) • the data persists (after the browser is shutdown or the session is closed)
  16. 38.

    <ul id="tree1" role="tree" tabindex="0" aria-labelledby="label_1"> <li role="treeitem" tabindex="-1" aria- expanded="true">Fruits</li>

    <li role="group"> <ul> <li role="treeitem" tabindex="-1">Oranges</li> <li role="treeitem" tabindex="-1">Pineapples</li> ... </ul> </li> </ul>
  17. 40.

    limited to the time span where the current window is

    open once the window is shut will be invalid Session Storage = Local Storage
  18. 41.
  19. 42.

    IndexDB • Web SQL database must die! • Object Store

    • http://www.html5rocks.com/en/ tutorials/indexeddb/todo/
  20. 43.
  21. 44.

    AppCache • Offline First • Chache manifest (*.appcache => file)

    • Load from local cache (HTML, CSS, JS and images) • mimetype: text/cache-manifest • 5MB (chrome = unlimitedStorage) • window.applicationCache
  22. 47.

    Device Access • Geolocation API • Camera / Microphone •

    Local Data (contacts and events) • Device Orientation • Device Motion • Vibration • Notification
  23. 48.

    Device Access • Geolocation API • Camera / Microphone •

    Local Data (contacts and events) • Device Orientation • Device Motion • Vibration • Notification
  24. 57.
  25. 60.

    SVG • Scalable Vector Graphic • Language for rich graphical

    content like as: • Pie charts, • Two-dimensional graphs
  26. 63.
  27. 69.

    XMLHttpRequest2 •Ajax •Uploading progress events (progress tag) •Working with files

    (file system api) •FormData •CORS (cross domain request)
  28. 70.
  29. 71.

    CSS3 • Transitions • Animations • Transforms • Gradients •

    Rounded corners • Flexible Box Model • Multi-column Webfonts Text wrapping Columns Opacity Backgrounds CSS selectors Shadows
  30. 76.