HTML5: Introduction

F8a70e01eddbadc5e4f9876ff34494fa?s=47 Guille Paz
November 02, 2012

HTML5: Introduction

F8a70e01eddbadc5e4f9876ff34494fa?s=128

Guille Paz

November 02, 2012
Tweet

Transcript

  1. HTML5 Everything changes...

  2. HTML5 is awesome!

  3. HTML 4 <h2>Título de un artículo</h2> <p> <strong>Había una vez...<strong>

    un ninja que <em>estaba sólo</em>. </p>
  4. HTML5 <h2>Título de un artículo</h2> <p> <strong>Había una vez...<strong> un

    ninja que <em>estaba sólo</em>. </p>
  5. HTML5 <h2>Título de un artículo</h2> <p> <strong>Había una vez...<strong> un

    ninja que <em>estaba sólo</em>. </p>
  6. Thanks!

  7. HTML5 is awesome!

  8. HTML5 HTML CSS JavaScript

  9. Collection of tools • Semantics • Offline & Storage •

    Devices Access • Connectivity • Multimedia • 3D, Graphics & Effects • Performance & Integration
  10. Semantics & Markup

  11. Semantics • More meaningful elements • Better semantic tags and

    attributes • Semantic structure • Microdata / Microformats • ARIA attributes • New form types • More simple and cool
  12. Doctype

  13. Doctype • Switch the content into standards mode • Prevent

    quirks mode • Case-insensitive
  14. <!DOCTYPE html PUBLIC"-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN""http:/ /www.w3.org/TR/xhtml1/

    DTD/xhtml1-transitional.dtd">
  15. <!DOCTYPE html PUBLIC"-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN""http:/ /www.w3.org/TR/xhtml1/

    DTD/xhtml1-transitional.dtd">
  16. <!DOCTYPE html>

  17. Better semantic tags

  18. HTML 4

  19. HTML5

  20. Custom data attribute

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

    JavaScript (getAttribute method) * = custom attributes: user, name, phone, id, chico, meli, etc...
  22. data-* <a id="CATEG:1039" href="/camaras">Cámaras</a>

  23. data-* <a data-id="CATEG:1039" href="/camaras">Cámaras</a>

  24. Mircrodata • Semantic attributes and properties • Search engines, Web

    crawlers, Browsers • Provide a richer browsing experience for users
  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>
  26. ARIA

  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)
  28. <a href=”/buy” role=”button”>Comprar</a>

  29. <div role=”tooltip”>For Nerds, by Nerds</div>

  30. Forms

  31. New forms • Semantic types and attributes • Mobile compatibility

    • Validation engine • Custom patterns • More control
  32. <input type=”email”> <input type=”tel”>

  33. <input type=”date”> <input type=”range”> <input type=”color”>

  34. <input type=“text” placeholder=”Search Bookmarks and His”> <input type=“text” required=“required”>

  35. Offline & storage

  36. Web Storage • Local storage / Session storage • IndexedDB

    • Application Cache (offline apps)
  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)
  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>
  39. Session Storage = Local Storage

  40. limited to the time span where the current window is

    open once the window is shut will be invalid Session Storage = Local Storage
  41. IndexDB

  42. IndexDB • Web SQL database must die! • Object Store

    • http://www.html5rocks.com/en/ tutorials/indexeddb/todo/
  43. AppCache

  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
  45. <html manifest="chico.appcache"> CACHE MANIFEST # v0.11 CACHE: versions/latest/chico.css versions/latest/jquery.js versions/latest/chico.js

    src/assets/ninja.png NETWORK: *
  46. Device Access

  47. Device Access • Geolocation API • Camera / Microphone •

    Local Data (contacts and events) • Device Orientation • Device Motion • Vibration • Notification
  48. Device Access • Geolocation API • Camera / Microphone •

    Local Data (contacts and events) • Device Orientation • Device Motion • Vibration • Notification
  49. Connectivity

  50. Connectivity • Web Sockets • Server-sent events • Real time

  51. Web Sockets • JavaScript API • Real time connections •

    Bi-directional communications
  52. Who is using Web Sockets? • Facebook (chat, notifications, comments)

    • Gmail • Twitter
  53. Multimedia

  54. Multimedia •Video •Audio

  55. Who is using Multimedia? • Youtube • Vimeo • GrooveShark

  56. Video Audio

  57. None
  58. 3D, Graphics, Effects

  59. 3D, Graphics, Effects • SVG • Canvas • WebGL •

    CSS3 3D
  60. SVG • Scalable Vector Graphic • Language for rich graphical

    content like as: • Pie charts, • Two-dimensional graphs
  61. <svg id="svgelem" height="200" xmlns="http:/ /www.w3.org/2000/ svg"> ! <circle id="redcircle" cx="50"

    cy="50" r="50" fill="red" /> </svg>
  62. Canvas • HTML Element • Draw graphics (with JavaScript) •

    Control every pixel
  63. Canvas

  64. WebGL • Web-based Graphics Library • Interactive 3D graphics •

    Canvas 3D • JavaScript API
  65. http:/ /helloracer.com/webgl/ WebGL

  66. Performance & Integration

  67. Performance & Integration •Web Workers •XMLHttpRequest2

  68. Web Workers •JavaScript API •Load JS file dynamically •Process code

    in a background •Multi JavaScript thread
  69. XMLHttpRequest2 •Ajax •Uploading progress events (progress tag) •Working with files

    (file system api) •FormData •CORS (cross domain request)
  70. CSS3

  71. CSS3 • Transitions • Animations • Transforms • Gradients •

    Rounded corners • Flexible Box Model • Multi-column Webfonts Text wrapping Columns Opacity Backgrounds CSS selectors Shadows
  72. Transforms, Transitions and Animations http:/ /leaverou.github.com/animatable/ http:/ /cubic-bezier.com/#.17,.67,.83,.67

  73. Gradients btn.primary { background-image: linear-gradient(top, #BACDFF, #4055A5 3%, #283077); }

  74. Rounded corners btn.primary { border-radius: 5px; }

  75. CSS selectors p:nth-child(3) { } input:checked { } p:first-of-type {

    } p ~ ul { }
  76. Thanks!