html5
TRANSCRIPT
The HTML5 Ecosystem
HTML5 CSS3
new JavaScript APIs
XHTML
HTML
Going Semantic
<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>
<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>
<big>
<center>
<font>
<strike>
<u>
<tt>
<frame>
<tablealign=“left”bgcolor=“#ff0”border=“1px”cellpadding=“2px”cellspacing=“2px”
/>
<input type="tel" />
<input type="url" />
<input type="email" />
<input type="number" />
<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>
<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();
}
Multimedia
Audio
Video
Canvas
SVG
<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>
http://www.kaltura.org/apis/html5lib/kplayer-examples/Player_Themable.html
http://www.effectgames.com/demos/canvascycle/
SVG
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
*
<html manifest="demo.appcache">
CSS
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; }
<style media="only all and (max-
width: 480)" />
CSS3 Transforms
• Rotate
• Scale
• Skew
• Matrix
@font-face {
font-family: AwesomeFont;
src:
url(http://example.com/awesomeco.ttf)
;
font-weight: bold;
}
JavaScript
localStorage.awesome = "true";
alert(sessionStorage.coolness);
JavaScript Engine
localstorage
sessionstorage
More JavaScript
• Browser history
• Web workers
• File APIs
• Cross document messaging
• Touch events
http://caniuse.com
http://html5readiness.com/
HTML5 compatible
phones to top
1 billion
in
2013
Looking to the Future…
