The HTML5 Landscape - Confoo 2012

The HTML5 Landscape Andrew Lombardi Owner, Tech Evangelist Mystic Coders,
LLC andrew AT mysticcoders DOT com kinabalu @ irc://irc.freenode.net - ##wicket, ##java kinabalu @ twitter Saturday, March 3, 12

Saturday, March 3, 12

12 Years in business Saturday, March 3, 12

Software Consultants 12 Years in business Saturday, March 3, 12

Software Consultants International Speaker 12 Years in business Saturday, March
3, 12

Software Consultants International Speaker Training 12 Years in business Saturday,
March 3, 12

Software Consultants International Speaker Training 12 Years in business HTML5
Hopeful Saturday, March 3, 12

To our success! Software Consultants International Speaker Training 12 Years
in business HTML5 Hopeful Saturday, March 3, 12

Steve Jobs Saturday, March 3, 12

Al Gore Steve Jobs Saturday, March 3, 12

Al Gore Steve Jobs High Performance Computing and Communications Act
of 1991 “Information Superhighway” Saturday, March 3, 12

Tim Berners-Lee Saturday, March 3, 12

Tim Berners-Lee Steve Jobs Saturday, March 3, 12

250 million as of October 2011 Saturday, March 3, 12

A BRIEF HISTORY OF TIME Saturday, March 3, 12

A BRIEF HISTORY OF TIME 1991 - First version of
HTML Saturday, March 3, 12

HTML 1994 - HTML2 is born Saturday, March 3, 12

HTML 1994 - HTML2 is born 1996 - CSS1 + JavaScript Saturday, March 3, 12

HTML 1994 - HTML2 is born 1996 - CSS1 + JavaScript 1996 - First “developer” mistakes JavaScript for Java Saturday, March 3, 12

A BRIEF HISTORY OF TIME 1997 - HTML4 Saturday, March
3, 12

A BRIEF HISTORY OF TIME 1997 - HTML4 1998 -
CSS2 Saturday, March 3, 12

CSS2 2000 - XHTML is hatched Saturday, March 3, 12

CSS2 2000 - XHTML is hatched 2000 - Malformed HTML writers are burned at stake Saturday, March 3, 12

A BRIEF HISTORY OF TIME 2002 - Tableless Web Design

2002 - Average HTML page creation 5x longer Saturday, March 3, 12

2002 - Average HTML page creation 5x longer 2005 - AJAX is born Saturday, March 3, 12

2009 - HTML5 A BRIEF HISTORY OF TIME 2002 -
Tableless Web Design 2002 - Average HTML page creation 5x longer 2005 - AJAX is born Saturday, March 3, 12

2009 - HTML5 A BRIEF HISTORY OF TIME 2002 -
Tableless Web Design 2002 - Average HTML page creation 5x longer 2005 - AJAX is born 2011 - HTML5 gets a logo! Saturday, March 3, 12

What is ? Saturday, March 3, 12

HTML5 is a replacement for HTML 4.01, XHTML 1.0, and
XHTML 1.1 is... Saturday, March 3, 12

WHATWG vs W3C deathmatch Saturday, March 3, 12

WHATWG vs W3C deathmatch Draconian Error Handling Saturday, March 3,
12

WHATWG vs W3C deathmatch Backwards Compatibility Draconian Error Handling Saturday,
March 3, 12

Why ? Saturday, March 3, 12

Support coming in 2012? http://ie.microsoft.com/testdrive/ Saturday, March 3, 12

The Setup Saturday, March 3, 12

The Old Way <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> Saturday, March 3, 12

The New Way <!DOCTYPE html> Saturday, March 3, 12

The New Way <!DOCTYPE html> Miss the DOCTYPE and get
Quirks mode Saturday, March 3, 12

The Old Way <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> Saturday, March 3,
12

The New Way <html lang="en"> Saturday, March 3, 12

The Old Way <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Saturday, March 3,
12

The New Way <meta charset="utf-8"> Saturday, March 3, 12

Typing is so 2009 Saturday, March 3, 12

Typing is so 2009 <link rel="stylesheet" href="style.css" type="text/css" /> <script
type="text/javascript"> ... </script> Instead of Saturday, March 3, 12

type="text/javascript"> ... </script> Instead of Just do <link rel="stylesheet" href="style.css" /> <script> ... </script> Saturday, March 3, 12

type="text/javascript"> ... </script> Instead of Just do <link rel="stylesheet" href="style.css" /> <script> ... </script> We know what you mean. Saturday, March 3, 12

Boolean Types in Tags <input type="text" name="email" required /> Saturday,
March 3, 12

Boolean Types in Tags If you reference it in the
markup, it’s true. <input type="text" name="email" required /> Saturday, March 3, 12

Browser Support Saturday, March 3, 12

Video and Audio in HTML5 has a lot of promise,
but patent hippos get in the way Saturday, March 3, 12

HTML5 Video Saturday, March 3, 12

HTML5 Video Ogg - Not patent encumbered but quality is
not there Saturday, March 3, 12

not there H.264 - Only pay royalties if end-user video is not free Saturday, March 3, 12

not there H.264 - Only pay royalties if end-user video is not free WebM / VP8 - Google released as royalty free after purchasing from On2 Saturday, March 3, 12

not there H.264 - Only pay royalties if end-user video is not free WebM / VP8 - Google released as royalty free after purchasing from On2 Patent landscape for video is unclear Saturday, March 3, 12

HTML5 Video <video ! id=”video” ! width="640" ! height="360" !
src="big_buck_bunny.mp4" ! controls ! poster="poster.jpg"> </video> document.getElementById("video").play(); Saturday, March 3, 12

autoplay - video starts playing as soon as it’s ready
controls - browser-speciﬁc controls for video displayed height - height of video Video Attributes width - width of video loop - replay video on end src - location of video poster - image to show before video plays Saturday, March 3, 12

HTML5 Video <video width="640" height="360" controls poster="poster.jpg"> ! <source src="big_buck_bunny.mp4"
type="video/mp4" /> ! <source src="big_buck_bunny.webm" type="video/webm" /> ! <source src="big_buck_bunny.ogv" type="video/ogg" /> ! <object width="640" height="384" type="application/x-shockwave-flash" data="player.swf"> ! ! <param name="movie" value="player.swf" /> ! ! <param name="flashvars" value="controlbar=over&image=poster.jpg&file=big_buck_bunny.mp4" /> ! ! <img src="poster.jpg" width="640" height="360" alt="Big Buck Bunny" ! ! title="No video playback capabilities, please download the video below" /> ! </object> </video> Saturday, March 3, 12

HTML5 Video native controls! Saturday, March 3, 12

Video Support Internet Explorer Mozilla Firefox Apple Safari Google Chrome
H.264 Ogg + WebM H.264 *H.264 + Ogg + WebM iOS Android H.264 * Will be dropped in v17 *H.264 + WebM * Magical incantation required Saturday, March 3, 12

Video Support Internet Explorer Mozilla Firefox Apple Safari Google Chrome
9.0 3.5 3.2 4.0 iOS Android 3.2 2.3 Saturday, March 3, 12

Checking Video Support function supports_video() { ! return !document.createElement('video').canPlayType; }

Modernizr Library if(Modernizr.video) { ! // let's play some video!
} Saturday, March 3, 12

HTML5 Audio <audio ! id="audio" ! src="elvis.mp3" ! controls !
autobuffer /> document.getElementById("audio").play(); Saturday, March 3, 12

autoplay - audio starts playing as soon as it’s ready
controls - browser-speciﬁc controls for audio displayed Audio Attributes loop - replay audio on end src - location of audio preload - should browser preload audio? if autoplay -ignored Saturday, March 3, 12

HTML5 Audio <audio controls autobuffer> ! <source src="elvis.ogg" /> !
<source src="elvis.mp3" /> </audio> Saturday, March 3, 12

Audio Support Internet Explorer Mozilla Firefox Apple Safari Google Chrome
MP3 Ogg, WAV MP3, WAV Ogg, MP3, WAV iOS Android MP3, WAV No Saturday, March 3, 12

Audio Support Internet Explorer Mozilla Firefox Apple Safari Google Chrome
9.0 3.5 3.2 4.0 iOS Android 4.0 No codecs Saturday, March 3, 12

Nothing to do with HTML5 Canvas but who’s complaining? Saturday,
March 3, 12

Canvas <canvas id="someshape" width="150" height="150"></canvas> var shape = document.getElementById('someshape'); var
context = shape.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(0, 0, 150, 150); Saturday, March 3, 12

Canvas <canvas id="confoologo"> <p>Your browser doesn't support canvas.</p> </canvas> <script>
var canvas = document.getElementById('confoologo'); if(canvas.getContext) { ! ! var context = canvas.getContext('2d'); ! ! var myImage = new Image(); ! ! myImage.onload = function() { ! ! canvas.setAttribute('width', myImage.width); ! ! canvas.setAttribute('height', myImage.height); ! ! context.drawImage(myImage, 0, 0); } ! } ! myImage.src = "confoologo.png";! } </script> Saturday, March 3, 12

Canvas Extreme http://www.nihilogic.dk/labs/wolf/ Saturday, March 3, 12

Canvas Browser Support Internet Explorer Mozilla Firefox Apple Safari Google
Chrome 9.0 3.0 3.2 4.0 iOS Android 3.2 2.1 Saturday, March 3, 12

Forms in HTML5 allow you to accept, process and validate
user input. Saturday, March 3, 12

Tag Description type=”date” Represents a UTC formatted date type=”color” Represents
a hexadecimal RGB color value type=”number” Represents a numeric value type=”search” Simple text box but browser can choose to provide custom control type=”email”, type=”url”, type=”tel” Represents contact details. Browser can choose to represent our handle input differently (i.e. Mobile Safari) type=”range” Represents a range of values with min/max HTML5 Forms Saturday, March 3, 12

Tag Description pattern=”some.regex” Use a regex to validate against the
input without requiring Javascript involvement placeholder=”Insert placeholder text here” Attached to input type=”text” to show placeholder text before user clicks autofocus Boolean value used only once per page identifying the form component that should receive immediate focus after page load autocomplete on/off switch used to tell browser if it’s okay to autocomplete this ﬁeld with saved data required Boolean value for semantically and functionally marking a ﬁeld as requiring input before valid submission <datalist> A combo box allowing selection via preselected values or entering custom placeholder=”Insert placeholder text here” Attached to input type=”text” to show placeholder text before user clicks HTML5 Forms (more) Saturday, March 3, 12

New Form Tags Browser Support Internet Explorer Mozilla Firefox Apple
Safari Google Chrome 10.0 4.0 4.0 4.0 iOS Android 5.0 ???? Saturday, March 3, 12

Semantic markup in HTML5 identiﬁes based on meaning rather than
layout Saturday, March 3, 12

Tag Description <section> A generic section of a document or
application, a grouping of content typically with a header <nav> Used to identify major navigation links on the page, usually in the header of a page <article> A reusable, independently distributable composition in a document, page, application or site <aside> Tangentially related content to the main article (sidebars, pull quotes, advertising) <hgroup> Used to group h1-h6 elements when heading has multiple levels <header> Represents a group of introductory or navigational aids New Semantic Tags Saturday, March 3, 12

Tag Description <footer> Represents a footer for its nearest ancestor
sectioning content or root element. Bottom of a page as well as <section>’s of a page are relevant here <time> Represents time on a 24-hour clock, or precise date optionally with timezone <mark> Represents a run of text in one document marked or highlighted for reference purposes <meter> Can be used to mark up measurements, part of a scale with min/max values <progress> Markup denoting a value that is in the process of changing New Semantic Tags (more) Saturday, March 3, 12

Semantic Browser Support Internet Explorer Mozilla Firefox Apple Safari Google

Semantic Tag Browser Support  Saturday, March 3, 12

Local Storage allows you to save up to 5MB of
data for your web application Saturday, March 3, 12

Local Storage textarea.addEventListener('keyup', function () { ! window.localStorage['value'] = area.value;
! window.localStorage['timestamp'] = (new Date()).getTime(); }, false); textarea.value = window.localStorage['value']; http://www.mysticcoders.com/html5/webstorage.html Saturday, March 3, 12

Local Storage Browser Support Internet Explorer Mozilla Firefox Apple Safari
Google Chrome 8.0 3.0 4.0 4.0 iOS Android 3.2 2.1 Saturday, March 3, 12

Workers at it’s simplest enable performing computationally expensive tasks without
interrupting the user interface Saturday, March 3, 12

<!DOCTYPE HTML> <html> <head> <title>Worker example: One-core computation</title> </head> <body>
<p>The highest prime number discovered so far is: <output id="result"></output></p> <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { document.getElementById('result').textContent = event.data; }; </script> </body> </html> Web Workers Saturday, March 3, 12

Web Workers var n = 1; search: while (true) {
n += 1; for (var i = 2; i <= Math.sqrt(n); i += 1) if (n % i == 0) continue search; // found a prime! postMessage(n); } Saturday, March 3, 12

Web Workers var n = 1; search: while (true) {
n += 1; for (var i = 2; i <= Math.sqrt(n); i += 1) if (n % i == 0) continue search; // found a prime! postMessage(n); } http://www.mysticcoders.com/html5/worker-example.html Saturday, March 3, 12

Web Workers Browser Support Internet Explorer Mozilla Firefox Apple Safari
Google Chrome 10.0 3.5 4.0 4.0 iOS Android 5.0 2.1 yes, 2.2 - 4.0, no Saturday, March 3, 12

Geolocation let’s you tell the browser where you are Saturday,
March 3, 12

Geolocation if (navigator.geolocation) { ! navigator.geolocation.getCurrentPosition(function(position) { ! var lat
= position.coords.latitude; ! var lng = position.coords.longitude; ! alert('Your currently @ ('+lat+', '+lng+')'); ! }); } Saturday, March 3, 12

Geolocation http://www.mysticcoders.com/html5/geolocation.html if (navigator.geolocation) { ! navigator.geolocation.getCurrentPosition(function(position) { ! var
lat = position.coords.latitude; ! var lng = position.coords.longitude; ! alert('Your currently @ ('+lat+', '+lng+')'); ! }); } Saturday, March 3, 12

Geolocation if (navigator.geolocation) { ! navigator.geolocation.getCurrentPosition(function(position) { ! var lat
= position.coords.latitude; ! var lng = position.coords.longitude; ! var options = { position: new google.maps.LatLng(lat, lng) } ! var marker = new google.maps.Marker(options); ! marker.setMap(map); ! }); } Saturday, March 3, 12

Geolocation Browser Support Internet Explorer Mozilla Firefox Apple Safari Google

application cache - specify with a cache.manifest ﬁles you’d like
the browser to eagerly cache for ofﬂine use More HTML5 web database - embedded SQL database which most browsers have chosen to use sqlite cross document messaging - allows documents to communicate regardless of source domain (no XSS script attacks) drag and drop - allows elements to be draggable and droppable Saturday, March 3, 12

More HTML5 webgl - provides an API for writing web
applications utilizing hardware accelerated 3D graphics web notiﬁcations - provides an API for alerting users outside of a web page via notiﬁcations Saturday, March 3, 12

More websites for HTML5 knowledge RESOURCES Saturday, March 3, 12

http://validator.nu http://validator.w3.org/ http://www.brucelawson.co.uk/category/html5/ http://html5doctor.com/ http://diveintohtml5.org/ http://whatwg.org/html5 http://www.modernizr.com/ http://code.google.com/p/html5shiv/ http://html5rocks.com Saturday,
March 3, 12

HTML5 Rocks!! Saturday, March 3, 12

Q&A Thanks for listening! Andrew Lombardi Owner, Tech Evangelist Mystic
Coders, LLC andrew AT mysticcoders DOT com kinabalu @ irc://irc.freenode.net - ##wicket, ##java Saturday, March 3, 12

The HTML5 Landscape - Confoo 2012

The HTML5 Landscape - Confoo 2012

More Decks by kinabalu

Other Decks in Technology

Featured

Transcript