Downloaded 24 times
Uploaded byGuillermo Paz
HTML5: Introduction
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.
More Related Content
Similar to HTML5: Introduction
![ES6 in Production [JSConfUY2015]](https://cdn.slidesharecdn.com/ss_thumbnails/es6inproduction1-150430082007-conversion-gate01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
HTML5: Introduction
- 1.
- 2.
- 3. HTML 4 <h2>Título deun 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 unartículo</h2> <p> <strong>Había una vez...<strong> un ninja que <em>estaba sólo</em>. </p>
- 5. HTML5 <h2>Título de unartículo</h2> <p> <strong>Había una vez...<strong> un ninja que <em>estaba sólo</em>. </p>
- 6.
- 7.
- 8. HTML5 HTML CSS JavaScript
- 9. Collection of tools •Semantics • Offline & Storage • Devices Access • Connectivity • Multimedia • 3D, Graphics & Effects • Performance & Integration
- 10.
- 11. Semantics • More meaningfulelements • Better semantic tags and attributes • Semantic structure • Microdata / Microformats • ARIA attributes • New form types • More simple and cool
- 12.
- 13. Doctype • Switch thecontent 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.
- 17.
- 18.
- 19.
- 20.
- 21. Custom data attribute data-* insideHTML 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 attributesand properties • Search engines, Web crawlers, Browsers • Provide a richer browsing experience for users
- 25. <p itemscope> I’mgoing 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.
- 27. ARIA attributes • Improvethe accessibility of RIAs • JavaScript components • Helps with dynamic content • Semantic attributes and properties: • roles (tree, navigation, presentation) • properties (aria-selected, aria-hidden)
- 28.
- 29. <div role=”tooltip”>For Nerds,by Nerds</div>
- 30.
- 31. New forms • Semantictypes 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=”SearchBookmarks and His”> <input type=“text” required=“required”>
- 35.
- 36. Web Storage • Localstorage / Session storage • IndexedDB • Application Cache (offline apps)
- 37. Local Storage • JavaScriptAPI • 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.
- 42. IndexDB • Web SQLdatabase must die! • Object Store • http://www.html5rocks.com/en/ tutorials/indexeddb/todo/
- 43.
- 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.
- 47. Device Access • GeolocationAPI • Camera / Microphone • Local Data (contacts and events) • Device Orientation • Device Motion • Vibration • Notification
- 48. Device Access • GeolocationAPI • Camera / Microphone • Local Data (contacts and events) • Device Orientation • Device Motion • Vibration • Notification
- 49.
- 50. Connectivity • Web Sockets •Server-sent events • Real time
- 51. Web Sockets • JavaScriptAPI • Real time connections • Bi-directional communications
- 52. Who is usingWeb Sockets? • Facebook (chat, notifications, comments) • Gmail • Twitter
- 53.
- 54.
- 55. Who is using Multimedia? • Youtube • Vimeo • GrooveShark
- 56. Video Audio
- 58.
- 59. 3D, Graphics, Effects •SVG • Canvas • WebGL • CSS3 3D
- 60. SVG • Scalable VectorGraphic • 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.
- 64. WebGL • Web-based GraphicsLibrary • 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 • JavaScriptAPI • Load JS file dynamically • Process code in a background • Multi JavaScript thread
- 69. XMLHttpRequest2 • Ajax • Uploadingprogress events (progress tag) • Working with files (file system api) • FormData • CORS (cross domain request)
- 70.
- 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 andAnimations 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.