In depth with html5 java2days 2010

In depth with HTML5

Andrew LombardiOwner, Tech EvangelistMystic Coders, LLCandrew AT mysticcoders DOT com

kinabalu @ irc://irc.freenode.net - ##wicket, ##javakinabalu @ twitter

Friday, October 8, 2010


10 Years in business


Software Consultants




International Speaker





Training





Training


Apache Wicket Contributor


To our success!



Training


Apache Wicket Contributor




What is HTML5?


A brief history of time (HTML)



1991 - First version of HTML



1991 - First version of HTML1994 - HTML2 is born



1991 - First version of HTML1994 - HTML2 is born1996 - CSS1 + JavaScript



1991 - First version of HTML1994 - HTML2 is born1996 - CSS1 + JavaScript1996 - First “developer” mistakes Javascript for Java





1997 - HTML4



1997 - HTML4 1998 - CSS2



1997 - HTML4 1998 - CSS22000 - XHTML is hatched



1997 - HTML4 1998 - CSS22000 - XHTML is hatched2000 - Malformed HTML writers are burned at stake





2002 - Tableless Web Design



2002 - Tableless Web Design2002 - Average HTML page creation 5x longer



2002 - Tableless Web Design2002 - Average HTML page creation 5x longer2005 - AJAX



2002 - Tableless Web Design2002 - Average HTML page creation 5x longer2005 - AJAX2009 - HTML5


HTML5 is a replacement for HTML 4.01, XHTML 1.0, and XHTML 1.1

HTML5 is...


WHATWG vs W3C deathmatch



Draconian Error Handling



Draconian Error Handling

Backwards Compatibility


What we’ll cover


1. The Setup

What we’ll cover


1. The Setup2. Video and Audio

What we’ll cover


1. The Setup2. Video and Audio3. Canvas

What we’ll cover


1. The Setup2. Video and Audio3. Canvas4. Forms

What we’ll cover


1. The Setup2. Video and Audio3. Canvas4. Forms5. Local Storage

What we’ll cover


1. The Setup2. Video and Audio3. Canvas4. Forms5. Local Storage6. Web Workers

What we’ll cover


1. The Setup2. Video and Audio3. Canvas4. Forms5. Local Storage6. Web Workers7. Geolocation

What we’ll cover


The Cooking show model


Why HTML5?




Support coming in 2015


The Setup


The Old Way

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>


http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

The New Way

<!DOCTYPE html>


The New Way

<!DOCTYPE html>

Miss the DOCTYPE and get Quirks mode


The Old Way

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


http://www.w3.org/1999/xhtml

http://www.w3.org/1999/xhtml

The New Way

<html lang="en">


The Old Way

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


The New Way

<meta charset="utf-8">


Typing is so 2009


Typing is so 2009

<link rel="stylesheet" href="style.css" type="text/css" />

<script type="text/javascript"> ... </script>

Instead of


Typing is so 2009



Instead of

Just do<link rel="stylesheet" href="style.css" />

<script> ... </script>


Typing is so 2009



Instead of

Just do<link rel="stylesheet" href="style.css" />

<script> ... </script>

We know what you mean.


Boolean Types in Tags

<input type="text" name="email" required />


Boolean Types in Tags

If you reference it in the markup, it’s true.

<input type="text" name="email" required />


Browser Support


Browser Support


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


HTML5 Video

Ogg - Not patent encumbered but quality is 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


HTML5 Video

Ogg - Not patent encumbered but quality is 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


HTML5 Video

<video ! id=”video”! width="640" ! height="360" ! src="big_buck_bunny.mp4" ! controls ! poster="poster.jpg"></video>

document.getElementById("video").play();


autoplay - video starts playing as soon as it’s ready

controls - browser-specific 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


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>


HTML5 Video


Video Support

Internet Explorer Mozilla Firefox Apple Safari Google Chrome

Flash only Ogg H.264 H.264 + Ogg


Video Support


9.0 3.5 3.2 4.0


Checking Video Support

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


Modernizr Library

if(Modernizr.video) {! // let's play some video!}


Modernizr Library

if(Modernizr.video) {! // let's play some video!}


HTML5 Audio

<audio ! id="audio"! src="elvis.mp3" ! controls ! autobuffer />

document.getElementById("audio").play();


autoplay - audio starts playing as soon as it’s ready

controls - browser-specific controls for audio displayed

Audio Attributes

loop - replay audio on end

src - location of audio

preload - should browser preload audio? if autoplay -ignored


HTML5 Audio

<audio controls autobuffer>! <source src="elvis.ogg" />! <source src="elvis.mp3" /></audio>


Audio Support


Flash only Ogg, WAV MP3 Ogg, MP3


Audio Support


9.0 3.5 3.2 4.0


Nothing to do with HTML5 Canvas but who’s complaining?


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);


Canvas<canvas id="j2dlogo"><p>Your browser doesn't support canvas.</p></canvas>

<script>

var canvas = document.getElementById('j2dlogo');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 = "j2dlogo.png";!

}

</script>


Canvas Extreme

http://www.nihilogic.dk/labs/wolf/




Canvas Browser Support


9.0 3.0 3.2 4.0


Forms in Wicket allow you to accept, process and validate user input.


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


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 field with saved data

required Boolean value for semantically and functionally marking a field 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)


New Form Tags Browser Support


? 4.0 4.0 4.0


Semantic markup in HTML5 identifies based on meaning rather than layout


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


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)


Semantic Browser Support


9.0 3.0 3.2 4.0


Semantic Tag Browser Support




Semantic Tag Browser Support




Local Storage allows you to save up to 5MB of data for your web application


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




Local Storage Browser Support


8.0 3.0 4.0 4.0


Workers at it’s simplest enable performing computationally expensive tasks without interrupting the user interface


<!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


Web Workersvar 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);}


Web Workersvar 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




Web Workers Browser Support


Unknown 3.5 4.0 4.0


Geolocation let’s you tell the browser where you are


Geolocation

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


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+')');! });}




Geolocationif (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);! });}


Geolocation Browser Support


Unknown 3.5 5.0 5.0


application cache - specify with a cache.manifest files you’d like the browser to eagerly cache for offline use

More HTML5

web database - embedded SQL database which most browsers have chosen to use sqlitecross document messaging - allows documents to communicate regardless of source domain (no XSS script attacks)drag and drop - allows elements to be draggable and droppable


More HTML5webgl - provides an API for writing web applications utilizing hardware accelerated 3D graphics web notifications - provides an API for alerting users outside of a web page via notifications


More websites for HTML5 knowledge

RESOURCES


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://validator.nu

http://validator.nu

http://validator.w3.org

http://validator.w3.org



http://html5doctor.com

http://html5doctor.com

http://diveintohtml5.org









HTML5 Rocks!!


Q&AThanks for listening!

Andrew LombardiOwner, Tech EvangelistMystic Coders, LLCandrew AT mysticcoders DOT com

kinabalu @ irc://irc.freenode.net - ##wicket, ##java

Technology

In depth with html5 java2days 2010