Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a HTML5: Introduction
Similar a HTML5: Introduction (20)
Más de Guillermo Paz
Último
Último (20)
HTML5: Introduction
- 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!
- 8. HTML5 HTML CSS JavaScript
- 9. Collection of tools • Semantics • Offline & Storage • Devices Access • Connectivity • Multimedia • 3D, Graphics & Effects • Performance & Integration
- 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>
- 18. HTML 4
- 19. HTML5
- 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)
- 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. Session Storage = Local Storage limited to the time span where the current window is open once the window is shut will be invalid
- 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
- 55. Who is using Multimedia? • Youtube • Vimeo • GrooveShark
- 56. Video Audio
- 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. WebGL http://helloracer.com/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 Webfonts Text wrapping • Animations Columns • Transforms Opacity • Gradients Backgrounds • Rounded corners CSS selectors • Flexible Box Model Shadows • Multi-column
- 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!