Using HTML5 For a Great Open Web - Valtech Tech Days
-
Upload
robert-nyman -
Category
Technology
-
view
5.729 -
download
1
description
Transcript of Using HTML5 For a Great Open Web - Valtech Tech Days
![Page 1: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/1.jpg)
Using HTML5 For a Great Open Web
![Page 2: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/2.jpg)
![Page 3: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/3.jpg)
Why HTML5?
![Page 4: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/4.jpg)
<!DOCTYPE html>
![Page 5: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/5.jpg)
<DIV>A monkey</DIV><p id=john>John’s P</p>
<input type=text><input type="text"><input type="text" />
![Page 6: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/6.jpg)
![Page 7: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/7.jpg)
<?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>
As XHTML
![Page 8: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/8.jpg)
<article>
<video>
<time>
<section><nav>
<hgroup>
<header>
<footer>
<audio>
<aside>
<figcaption>
<figure>
![Page 9: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/9.jpg)
<input type="tel">
<input type="search">
<input type="url">
<input type="email">
<input type="datetime">
<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime-local">
<input type="number">
<input type="range"><input type="color">
![Page 10: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/10.jpg)
![Page 11: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/11.jpg)
Web Storage
![Page 12: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/12.jpg)
![Page 13: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/13.jpg)
![Page 14: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/14.jpg)
sessionStorage.setItem("FU", "Sarah Palin");console.log(sessionStorage.getItem("FU"));
![Page 15: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/15.jpg)
localStorage.setItem("Job", "Politician");
![Page 16: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/16.jpg)
var sarahPalin = { "contest" : "Miss Alaska pageant", "Talent" : "Flute playing"};
localStorage.setItem("sarah", JSON.stringify(sarahPalin));
console.log(typeof JSON.parse(localStorage.getItem("sarah")));
![Page 17: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/17.jpg)
Web SQL
IndexedDB
![Page 18: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/18.jpg)
Offline Web Applications
![Page 19: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/19.jpg)
<!DOCTYPE html><html manifest="offline.appcache"><head>...
![Page 20: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/20.jpg)
CACHE MANIFEST
# VERSION 10
CACHE:offline.htmlbase.css
FALLBACK:online.css offline.css
NETWORK:/live-updates
![Page 21: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/21.jpg)
History API
![Page 22: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/22.jpg)
var url = "http://robertnyman.com", title = "My blog", state = { address : url };
window.history.pushState(state.address, title, url);
![Page 23: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/23.jpg)
window.history.replaceState(state.address, title, url);
![Page 24: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/24.jpg)
Video
![Page 25: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/25.jpg)
<video controls src="nasa.webm"></video>
![Page 26: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/26.jpg)
<video controls> <source src="nasa.mp4"></source> <source src="nasa.webm"></source></video>
![Page 29: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/29.jpg)
<video src="http://vid.ly/4w2g7d?content=video" controls></video>
![Page 30: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/30.jpg)
![Page 31: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/31.jpg)
Canvas
![Page 32: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/32.jpg)
Apple even creates open standards for the web
-Steve Jobs
![Page 33: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/33.jpg)
![Page 34: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/34.jpg)
http://craftymind.com/factory/html5video/CanvasVideo.html
![Page 35: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/35.jpg)
WebGL
![Page 36: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/36.jpg)
http://code.google.com/p/webglsamples/
![Page 37: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/37.jpg)
![Page 39: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/39.jpg)
![Page 40: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/40.jpg)
![Page 41: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/41.jpg)
Flight of the Navigator
![Page 42: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/42.jpg)
![Page 43: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/43.jpg)
![Page 44: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/44.jpg)
![Page 45: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/45.jpg)
![Page 46: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/46.jpg)
Robert Nymanrobertnyman.com/speaking/robertnyman.com/html5/Twitter: @robertnyman
Pictures:
Star Wars Awesome: http://jacobcharlesdietz.com/#/awesome/Robocop: http://www.meh.ro/2010/04/01/murphy-as-robocop/Royal wedding: http://twitpic.com/4r3mesStorage fail: http://failfun.com/funny-pictures/gangsta-fail/Cookie monster: http://honestviewsfromhonestman.blogspot.com/2009/09/cookie-monster.htmlYou suck: http://www.crunchgear.com/2009/04/22/gadgets-sucks/
Internet hole: http://cheezburger.com/View/3194058752History: http://animatedtv.about.com/od/fgmultimedia/ig/-Family-Guy--Pictures/Griffin-Family-History.htmCanvas: http://www.ioffer.com/c/Drawings-10004073D apple: http://3dst.de/typo3temp/pics/974e4144fc.jpgGo where I've never been: http://musicisart.ws/diane-arbus/Anything is possible: http://www.elektrodrop.com/2009/12/straight-out-of-china/?quick_view=1Super Mario Video: http://www.archive.org/details/Mario1_507
![Page 47: Using HTML5 For a Great Open Web - Valtech Tech Days](https://reader038.fdocuments.in/reader038/viewer/2022103114/55514feeb4c905c6268b5541/html5/thumbnails/47.jpg)
We can’t change history, but we can change the future.Be nice to each other.