HTML5: Introduction

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
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!