Using HTML5 For a Great Open Web - Valtech Tech Days
•
6 likes•7,385 views
HTML5 provides many new features for building rich and engaging web applications, including improved multimedia, graphics, and offline capabilities. It defines new semantic elements like <header>, <nav>, <article>, and <aside> that help structure and outline pages. HTML5 also introduces form input types for color picking, date/time selection, email, URL and more. Additional APIs allow creation of offline web applications using the Cache Manifest, storing persistent data locally with Web Storage, and manipulating browser history. HTML5 brings powerful new capabilities for embedding video, using <canvas> for drawing, and 3D graphics with WebGL.
More Related Content
What's hot
What's hot (20)
Similar to Using HTML5 For a Great Open Web - Valtech Tech Days
Similar to Using HTML5 For a Great Open Web - Valtech Tech Days (20)
More from Robert Nyman
More from Robert Nyman (20)
Recently uploaded
Recently uploaded (20)
Using HTML5 For a Great Open Web - Valtech Tech Days
- 1. Using HTML5 For a Great Open Web
- 3. Why HTML5?
- 5. <DIV>A monkey</DIV> <p id=john>John’s P</p> <input type=text> <input type="text"> <input type="text" />
- 7. As XHTML <?xml version="1.0"?> <html xmlns="http://www.w3.org/1999/xhtml"> MUST be application/xhtml+xml or application/xml <noscript>Not in XHTML</noscript>
- 8. <audio> <aside> <nav> <section> <hgroup> <article> <figure> <time> <header> <video> <figcaption> <footer>
- 9. <input type="color"> <input type="range"> <input type="number"> <input type="email"> <input type="time"> <input type="search"> <input type="month"> <input type="tel"> <input type="date"> <input type="datetime"> <input type="week"> <input type="datetime-local"> <input type="url">
- 11. Web Storage
- 16. var sarahPalin = { "contest" : "Miss Alaska pageant", "Talent" : "Flute playing" }; localStorage.setItem("sarah", JSON.stringify(sarahPalin)); console.log(typeof JSON.parse(localStorage.getItem("sarah")));
- 20. CACHE MANIFEST # VERSION 10 CACHE: offline.html base.css FALLBACK: online.css offline.css NETWORK: /live-updates
- 21. History API
- 22. var url = "http://robertnyman.com", title = "My blog", state = { address : url }; window.history.pushState(state.address, title, url);
- 24. Video
- 26. <video controls> <source src="nasa.mp4"></source> <source src="nasa.webm"></source> </video>
- 31. Canvas
- 32. Apple even creates open standards for the web -Steve Jobs
- 34. http://craftymind.com/factory/html5video/ CanvasVideo.html
- 35. WebGL
- 41. Flight of the Navigator
- 46. Robert Nyman robertnyman.com/speaking/ robertnyman.com/html5/ Twitter: @robertnyman Pictures: Star Wars Awesome: http://jacobcharlesdietz.com/#/awesome/ Internet hole: http://cheezburger.com/View/3194058752 Robocop: http://www.meh.ro/2010/04/01/murphy-as-robocop/ History: http://animatedtv.about.com/od/fgmultimedia/ig/-Family-Guy-- Royal wedding: http://twitpic.com/4r3mes Pictures/Griffin-Family-History.htm Storage fail: http://failfun.com/funny-pictures/gangsta-fail/ Canvas: http://www.ioffer.com/c/Drawings-1000407 Cookie monster: http://honestviewsfromhonestman.blogspot.com/2009/09/cookie- 3D apple: http://3dst.de/typo3temp/pics/974e4144fc.jpg monster.html Go where I've never been: http://musicisart.ws/diane-arbus/ You suck: http://www.crunchgear.com/2009/04/22/gadgets-sucks/ Anything is possible: http://www.elektrodrop.com/2009/12/straight-out-of- china/?quick_view=1 Super Mario Video: http://www.archive.org/details/Mario1_507
- 47. We can’t change history, but we can change the future. Be nice to each other.