html5
TRANSCRIPT
![Page 2: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/2.jpg)
The HTML5 Ecosystem
HTML5 CSS3
new JavaScript APIs
![Page 3: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/3.jpg)
XHTML
![Page 4: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/4.jpg)
![Page 5: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/5.jpg)
HTML
![Page 6: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/6.jpg)
Going Semantic
![Page 7: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/7.jpg)
<nav> <ul> <li><a href=“/”>Home</a></li> <li><a href=“/about”>About Us</a></li> <li> <a href=“/faq”> Frequently Asked Questions </a> </li> </ul></nav>
![Page 8: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/8.jpg)
<section id=“magazine”>
<article>
<header>
<h1>Semantic Markup Rules!</h1>
<p>An overview of new elements</p>
</header>
<p>Lorem ipsum dolor set amet…</p>
<aside>For more details, see…</aside>
</article>
</section>
![Page 9: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/9.jpg)
<big>
<center>
<font>
<strike>
<u>
<tt>
<frame>
<tablealign=“left”bgcolor=“#ff0”border=“1px”cellpadding=“2px”cellspacing=“2px”
/>
![Page 10: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/10.jpg)
<input type="tel" />
![Page 11: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/11.jpg)
<input type="url" />
![Page 12: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/12.jpg)
<input type="email" />
![Page 13: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/13.jpg)
<input type="number" />
![Page 14: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/14.jpg)
<form action="/newAttributes">
<input type=text autofocus />
<input type=email
placeholder="[email protected]" />
<input type=email required />
<input type=text pattern="^[1-9]+[0-
9]*$" />
</form>
![Page 15: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/15.jpg)
<img draggable="true" />
function drag(ev) { ev.dataTransfer.setData
("Text",ev.target.id); }
function allowDrop(ev) { ev.preventDefault(); }
function drop(ev) {
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(d
ata));
ev.preventDefault();
}
![Page 16: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/16.jpg)
Multimedia
Audio
Video
Canvas
SVG
![Page 17: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/17.jpg)
<video width="320" height="240”
controls="controls">
<source src="movie.mp4"
type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
![Page 18: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/18.jpg)
http://www.kaltura.org/apis/html5lib/kplayer-examples/Player_Themable.html
![Page 19: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/19.jpg)
http://www.effectgames.com/demos/canvascycle/
![Page 20: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/20.jpg)
SVG
![Page 21: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/21.jpg)
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
*
<html manifest="demo.appcache">
![Page 22: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/22.jpg)
CSS
![Page 23: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/23.jpg)
CSS3 Selectorsp:nth-of-type(2n+1) {color: red;}
p:nth-child(2n+1) {color: red;}
#content {
column-count: 2;
column-gap: 20px;
column-rule: 1px solid #ddccb5;
}
span.weight:after { content: "lbs"; color: #bbb; }
![Page 24: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/24.jpg)
<style media="only all and (max-
width: 480)" />
![Page 25: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/25.jpg)
CSS3 Transforms
• Rotate
• Scale
• Skew
• Matrix
![Page 26: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/26.jpg)
@font-face {
font-family: AwesomeFont;
src:
url(http://example.com/awesomeco.ttf)
;
font-weight: bold;
}
![Page 27: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/27.jpg)
JavaScript
![Page 28: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/28.jpg)
localStorage.awesome = "true";
alert(sessionStorage.coolness);
JavaScript Engine
localstorage
sessionstorage
![Page 29: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/29.jpg)
![Page 30: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/30.jpg)
![Page 31: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/31.jpg)
More JavaScript
• Browser history
• Web workers
• File APIs
• Cross document messaging
• Touch events
![Page 32: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/32.jpg)
http://caniuse.com
![Page 33: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/33.jpg)
http://html5readiness.com/
![Page 34: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/34.jpg)
HTML5 compatible
phones to top
1 billion
in
2013
Looking to the Future…
![Page 35: HTML5](https://reader035.vdocuments.net/reader035/viewer/2022070317/5563296cd8b42a61348b4e30/html5/thumbnails/35.jpg)