HTML5: Introduction
•
3 likes•649 views
The document discusses the features and capabilities of HTML5. It covers new semantic elements, forms, offline storage, device access, multimedia, 3D graphics, performance improvements, and CSS3 features. Key points include more meaningful tags, custom data attributes, offline application caching, geolocation, cameras, web sockets, and canvas/WebGL for graphics.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to HTML5: Introduction
Similar to HTML5: Introduction (20)
More from Guillermo Paz
Recently uploaded
Recently uploaded (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!