html5 - what's it all about?
DESCRIPTION
HTML5 is the newest version of HTML and lots of people are talking about it. What is it? Where did it come from? This talk gives an overview of HTML5 and discusses a few of the new features. May 2011. For more about Elisabeth Robson visit http://elisabethroson.com and http://wickedlysmart.comTRANSCRIPT
Wednesday, May 25, 2011
I have a vision... every Web page will be valid XML and full
of semantic meaning.
Wednesday, May 25, 2011
2004
?WHAT WG
Wednesday, May 25, 2011
Pave the cowpaths
Wednesday, May 25, 2011
W3C WHAT WG
Wednesday, May 25, 2011
HTML 4.01 XHTML 1.0 XHTML 1.1 XHTML 2.0
HTML 5 ?
HTML: The Living Standard ?
Wednesday, May 25, 2011
Browser Wars Standards Wars
All I know is I want my Web apps to work in everyone’s browser!
Wednesday, May 25, 2011
<script src="../global/modernizr-1.6.js"></script><script>window.onload = loadMovie;
function loadMovie() { var video = document.getElementById("video"); if (Modernizr.video) { console.log("supports video!"); if (Modernizr.video.h264) { console.log("supports mp4!"); video.src = "myMovie.mp4"; } else if (Modernizr.video.ogg) { console.log("supports ogg!"); video.src = "myMovie.ogv"; } }}<script>
Wednesday, May 25, 2011
$(document).ready(function(){ // Your code here });
Wednesday, May 25, 2011
Wednesday, May 25, 2011
Wednesday, May 25, 2011
IE 9.0 beta
IE 8.0
IE 7.0
IE 6.0
Firefox 4.0 beta
Firefox 3.5
Firefox 3.1
Chrome
Safari
Opera
Others
IE (all)
Firefox (all)
Mobile
0 10 20 30 40 50
November ‘10February ‘11
Data from StatsCounter via Wikipedia
Desktop
Wednesday, May 25, 2011
Wednesday, May 25, 2011
Opera Mini
iPhone
Nokia
Black Berry
Android
Other
0 10 20 30 40 50
November ‘10February ‘11
Data from StatsCounter via Wikipedia
Mobile
Wednesday, May 25, 2011
What is HTML5?
Wednesday, May 25, 2011
• New doctype
• Semantic HTML tags
• Data attributes
• Media tags
• Form input types and validation
• Canvas
• Local Storage
• Geolocation
• Web-workers
• Web sockets
tags
JavaScrip
t APIs
Wednesday, May 25, 2011
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html>
Wednesday, May 25, 2011
Structure and Semantics
Wednesday, May 25, 2011
<div id=”header”>
<div id=”nav”>
<div id=”section”> <div id=”aside”>
<div id=”footer”>
div soup
Wednesday, May 25, 2011
<header>
<nav>
<section> <aside>
<footer>
Wednesday, May 25, 2011
<p>
<h1>, <h2>
“small print”, e.g. for comments<small>?
<time> Represents a date or time
redefined
new
Wednesday, May 25, 2011
What’s cool about HTML5?
Wednesday, May 25, 2011
<video>
Wednesday, May 25, 2011
<video src=”myawesomevideo.mp4”>Your browser doesn’t support video</video>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"></embed></object>
The old way
The new way
http://www.mediafront.org/Wednesday, May 25, 2011
<canvas>
Wednesday, May 25, 2011
function drawSmileyFace() { var canvas = document.getElementById("smiley"); var context = canvas.getContext("2d");
// face context.beginPath() context.arc(300, 300, 200, 0, 2*Math.PI, true); context.fillStyle = "#ffffcc"; context.fill(); context.stroke();
// left eye context.beginPath(); context.arc(200, 250, 25, 0, 2*Math.PI, true); context.stroke();
// right eye context.beginPath(); context.arc(400, 250, 25, 0, 2*Math.PI, true); context.stroke();
// nose context.beginPath(); context.moveTo(300, 300); context.lineTo(300, 350); context.stroke();
// mouth context.beginPath(); var angle = degreesToRadians(20); context.arc(300, 350, 75, angle, Math.PI-angle, false);
context.stroke();}
Wednesday, May 25, 2011
http://9elements.com/io/projects/html5/canvas/Wednesday, May 25, 2011
Wednesday, May 25, 2011
<video> + <canvas>
Wednesday, May 25, 2011
http://www.craftymind.com/factory/html5video/CanvasVideo.htmlWednesday, May 25, 2011
Wednesday, May 25, 2011
<canvas> + libraries
Wednesday, May 25, 2011
http://fizz.bloom.io/
Processing.js
Wednesday, May 25, 2011
Wednesday, May 25, 2011
http://mrdoob.github.com/three.js/examples/canvas_geometry_cube.html
Three.js
Wednesday, May 25, 2011
localStorage
Wednesday, May 25, 2011
Like cookies, but better
localStorage
Wednesday, May 25, 2011
5MB
localStorage.setItem(“note1”, “wash cat”);
note1 = localStorage.getItem(“note1”);
Wednesday, May 25, 2011
CSS3
Wednesday, May 25, 2011
Wednesday, May 25, 2011
Browser Tools
Wednesday, May 25, 2011
Wednesday, May 25, 2011
Mobile
Wednesday, May 25, 2011
Mobile Web app libraries
XUI
jQtouch
Sencha Touch
jQuery Mobile
Wednesday, May 25, 2011
Mobile libraries for HTML/CSS -> native
PhoneGap
Titanium
Rhodes (HTML+Ruby)
Wednesday, May 25, 2011
PhoneGap supported features by platform
Wednesday, May 25, 2011
Wednesday, May 25, 2011
