In depth with html5 java2days 2010

In depth with HTML5

Andrew Lombardi
Owner, Tech Evangelist
Mystic Coders, LLC
andrew AT mysticcoders DOT com

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

Friday, October 8, 2010

10 Years in business


Software Consultants


International Speaker


Training


Training
Apache Wicket Contributor


Training
Apache Wicket Contributor

To our success!


What is HTML5?


A brief history of time (HTML)



1991 - First version of HTML



1994 - HTML2 is born



1996 - CSS1 + JavaScript



1996 - CSS1 + JavaScript
1996 - First “developer”
mistakes Javascript for Java



1997 - HTML4



1997 - HTML4
1998 - CSS2



1997 - HTML4
1998 - CSS2
2000 - XHTML is hatched



1997 - HTML4
1998 - CSS2
2000 - XHTML is hatched
2000 - Malformed HTML
writers are burned at stake



2002 - Tableless Web Design



2002 - Average HTML page
creation 5x longer



creation 5x longer
2005 - AJAX



creation 5x longer
2005 - AJAX
2009 - HTML5


HTML5 is...

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


WHATWG vs W3C deathmatch



Draconian Error Handling



Draconian Error Handling
Backwards Compatibility


What we’ll cover


What we’ll cover
1. The Setup


What we’ll cover
1. The Setup
2. Video and Audio


What we’ll cover
1. The Setup
2. Video and Audio
3. Canvas


What we’ll cover
1. The Setup
2. Video and Audio
3. Canvas
4. Forms


What we’ll cover
1. The Setup
2. Video and Audio
3. Canvas
4. Forms
5. Local Storage


What we’ll cover
1. The Setup
2. Video and Audio
3. Canvas
4. Forms
5. Local Storage
6. Web Workers


What we’ll cover
1. The Setup
2. Video and Audio
3. Canvas
4. Forms
5. Local Storage
6. Web Workers
7. Geolocation


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


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


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
Instead of
<link rel="stylesheet" href="style.css" type="text/css" />

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


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

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

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


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


Video Attributes
autoplay - video starts playing as soon as it’s ready
controls - browser-speciﬁc controls for video displayed
height - height of video
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!
}


HTML5 Audio

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

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


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


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.


HTML5 Forms

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”, Represents contact details. Browser can choose to represent our handle input differently (i.e.
type=”tel” Mobile Safari)

type=”range” Represents a range of values with min/max


HTML5 Forms (more)

Tag Description

pattern=”some.regex” Use a regex to validate against the input without requiring Javascript involvement

placeholder=”Insert
Attached to input type=”text” to show placeholder text before user clicks
placeholder text here”

Boolean value used only once per page identifying the form component that should receive
autofocus immediate focus after page load

autocomplete on/off switch used to tell browser if it’s okay to autocomplete this ﬁeld with saved data

Boolean value for semantically and functionally marking a ﬁeld as requiring input before valid
required submission

<datalist> A combo box allowing selection via preselected values or entering custom

placeholder=”Insert
Attached to input type=”text” to show placeholder text before user clicks
placeholder text here”


New Form Tags Browser Support


? 4.0 4.0 4.0


Semantic markup in HTML5 identiﬁes
based on meaning rather than layout


New Semantic Tags

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 (more)

Tag Description

Represents a footer for its nearest ancestor sectioning content or root element. Bottom of a
<footer> 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


Semantic Browser Support


9.0 3.0 3.2 4.0


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


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


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


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
! alert('Your currently @ ('+lat+', '+lng+')');
! });
}

http://www.mysticcoders.com/html5/geolocation.html


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


More HTML5
application cache - specify with a cache.manifest ﬁles you’d like
the browser to eagerly cache for ofﬂine use
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


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


More websites for
HTML5 knowledge
C E S
U R
E SO
R

http://whatwg.org/html5

http://validator.nu

http://validator.w3.org/

http://www.brucelawson.co.uk/category/html5/

http://html5doctor.com/

http://diveintohtml5.org/

http://www.modernizr.com/

http://code.google.com/p/html5shiv/


HTML5
Rocks!!


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

In depth with html5 java2days 2010

Recommended

Recommended

More Related Content

Similar to In depth with html5 java2days 2010

Similar to In depth with html5 java2days 2010 (20)

More from Mystic Coders, LLC

More from Mystic Coders, LLC (6)

Recently uploaded

Recently uploaded (20)

In depth with html5 java2days 2010