Transcript PowerPoint slides of Peter`s presentation

HTML5 Overview
Peter Traeg
1/25/2011
1
Agenda



What is HTML5?
Demos and lots of ‘em
Does HTML5 kill Flash or Silverlight?
HTML5 Areas of Focus





Javascript
HTML
CSS
Some are browser-specific features, others
are not always fully implemented in some
browsers.
Pretty much all of what is shown here does
NOT work in IE6/7/8. Much of it will work in
IE9.
Just because people call it
HTML5 does not make it so

Many demonstrations of “HTML5” are of features not truly in the W3C HTML5
spec.

Technologies often called part of HTML5 that aren't (from the Mozilla HTML5 Developer center):












WebGL
FileReader
XMLHttpRequest
querySelector(All)
Geolocation
ECMAScript5
CSS3
XBL2
Web Workers
Web Sockets
Faster JavaScript
Moral: be careful when someone says HTML5 – what exactly are they talking
about? For most people it’s just a basket of features – not a spec.
HTML5 History/Status

Started by WHATWYG (Web Hypertext Application
Technology Working Group) in 2004. Most of these
folks were from Webkit (Safari, Apple).

Adopted by W3C as part of a working group in 2007.

Hoped that a full W3C recommendation will be
reached by late 2010.

Lots of frustration amongst the members of the
working group in trying to get the spec. approved.
Javascript – Selection of Elements

New methods to get all elements that match
on a class name:
var el = document.getElementById('section1');
var els = document.getElementsByTagName('div');
var els = document.getElementsByClassName('section');

Or find elements based on CSS selectors
var els = document.querySelectorAll("ul li:nth-child(odd)");
var els = document.querySelectorAll("table.test > tr > td");
Javascript – Local Storage

New localStorage property on the window
object lets you save data by key/value pair.
// use localStorage for persistent storage
// use sessionStorage for per tab storage
textarea.addEventListener('keyup', function () {
window.localStorage['value'] = area.value;
window.localStorage['timestamp'] = (new
Date()).getTime();
}, false);
textarea.value = window.localStorage['value'];

Surprise - Supported in IE8! 
Javascript – Web SQL Database
var db = window.openDatabase("Database Name", "Database Version");
db.transaction(function(tx) { tx.executeSql("SELECT * FROM test",
[], successCallback, errorCallback); });


Only supported in Chrome and Safari.
Demo link
Javascript – Offline Support

Offline caching of resources

Cache manifest file lists resources that the browser
should make available even if it’s offline.

Fallback sections let you substitute files if the offline
app requests a resource that’s not available offline.

window.applicationCache fires events to tell you
when all the resources in a manifest have
successfully downloaded or failed. If one resource
fails the whole thing is considered bad.
Javascript – Web Workers


Ability to create background “threads” for long
running processes so they don’t block the UI
thread.
Workers can’t access the DOM directly.
main.js:
var worker = new Worker('extra_work.js');
worker.onmessage = function(event) { alert(event.data); };
extra_work.js:
self.onmessage = function(event) { // Do some work.
self.postMessage(some_data);
}
Javascript – Web Sockets

Supports sending messages over a TCP
socket.
var socket = new WebSocket(location);
socket.onopen = function(event) {
socket.postMessage(“Hello, WebSocket”);
}
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert(“closed”); }

Not supported on Firefox
Javascript - Notifications



Webkit specific feature – only in Chrome
Pops up notification dialogs
Like the notification dialogs that appear from
the Windows system tray.
if (window.webkitNotifications.checkPermission() == 0) {
// you can pass any url as a parameter
window.webkitNotifications.createNotification(tweet.picture,
tweet.title,
tweet.text).show();
} else {
window.webkitNotifications.requestPermission();
}
Javascript – Drag/Drop



New “dragStart” event on elements
Data you want to drag is placed into a dataTransfer
object
The drag target must listen to these events:
dragEnter, dragOver, and drop



DragEnter decides if the user can drop the item on this
target
DragOver shows the appropriate UI feedback to illustrate
that a drop is possible.
Drop fires when the user actually drops the item on the
target.
Javascript – Drag/Drop
document.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', 'Customized text');
event.dataTransfer.effectAllowed = 'copy';
}, false);

Demo link
Javascript - Geolocation


Lets you obtain latitude/longitude based on the
user’s location.
User must “OK” the request.
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);
});
}
Javascript – File API






HTML <input type=“file”> can supply a reference to
a file object
A DIV can act as a drop target to allow a user to
drag/drop files on it. This can be used for uploading
multiple files.
The File object lets you read the file contents as a
binary string, a data URL, or as text.
Once you have the file contents you can POST them
to a server via XmlHttp request.
Demo - http://html5demos.com/file-api
https://developer.mozilla.org/en/Using_files_from_w
eb_applications
HTML Features



Mostly changes around new HTML elements
designed to create more semantic markup.
Also new attributes on existing elements to
create more types of <input> elements.
Older browsers (IE6/7/8) just ignore elements
they don’t understand.
HTML Doctype

The doctype for xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The doctype for HTML5:
<!DOCTYPE html>
HTML – New Semantic Elements

<header>



<nav>
<section>





<hgroup> : groups a set of h1-h6 elements when the
heading has multiple levels
<article>
 <header>
<aside>
<footer>
<time>
<mark>
HTML – Semantic Elements


Elements don’t have a specific style. They
are designed to group content semantically.
You use CSS to apply the style you want.
Even IE6 can recognize these new elements
via a Javascript trick. See http://diveintohtml5.org/semantics.html
HTML – New Input Types













<input type="search"> for search boxes
<input type="number"> for spinboxes
<input type="range"> for sliders
<input type="color"> for color pickers
<input type="tel"> for telephone numbers
<input type="url"> for web addresses
<input type="email"> for email addresses
<input type="date"> for calendar date pickers
<input type="month"> for months
<input type="week"> for weeks
<input type="time"> for timestamps
<input type="datetime"> for precise, absolute date+time stamps
<input type="datetime-local"> for local dates and times
Demo: http://www.ilovecolors.com.ar/wp-content/uploads/html5-new-input-types.html
HTML – More Input Attributes









Autocomplete
Readonly
Multiple
Placeholder – ghosted text prompt
Pattern – regex validation
Required (opera only)
Datalist (opera only)
For number types: min, max, step
CSS attributes for visual display when the control contains invalid
data. :invalid pseudo-class
HTML – Audio / Video






New <audio> and <video> elements
Safari plays H.264 video
Chrome plays H.264 and WebM (VP8)
Firefox plays Ogg Theora (VP3) and WebM
(Firefox4)
IE9 – H.264 video and AAC audio
Attributes to show/hide video controls, loop
playback, autoplay, etc.
HTML – Audio/Video Tags
<audio src="sound.mp3" controls></audio>
document.getElementById("audio").muted = false;
<video src="movie.mp4" autoplay controls></video>
document.getElementById("video").play();
HTML – Canvas Element






Bitmap drawing construct
This is not vector based. If you want to
rescale you really need to redraw.
Once an object is drawn you can’t manipulate
it. You have to draw it again.
Performance is quite good
Fairly wide browser support – since Safari 3,
Firefox 3, and Chrome 3.
Third party explorercanvas library for IE.
HTML – Canvas Example
<canvas id="canvas" width="838" height="220"></canvas>
<script>
var canvasContext =
document.getElementById("canvas").getContext("2d");
canvasContext.fillRect(250, 25, 150, 100);
canvasContext.beginPath();
canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
canvasContext.lineWidth = 15;
canvasContext.lineCap = 'round';
canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
canvasContext.stroke();
</script>
HTML – Canvas Drawing






Rectangles – filled, stroked (borders)
Arcs – use to draw a circle
Paths – moveTo(), lineTo(), stroke()
Gradients – linear, and radial
Text – fonts, horizontal text alignment,
baselines
Images – scaling, drawing a portion of an
image.
HTML – Canvas 3D


Largely experimental, browser specific
No defined spec from the W3C or WHATWG
as of yet.
HTML – SVG Element







<svg> element
Part of HTML5 spec
Firefox 4 supports a new SVG inline option.
Unlike <canvas> this is true vector based drawing.
Excellent JS library - http://raphaeljs.com/
Supported on most browsers, including the iPhone
Not supported in Android 
CSS






New selectors
Fonts
Text Handling
Columns
Transitions
Animations
CSS – Selectors



CSS3
Can select every nth-child – useful for zebra
striped displays (like an old green-bar report)
First-child
CSS Font Support


Can dynamically load fonts into the browser!
Supported in canvas as well (not sure about
SVG)
@font-face {
font-family: 'LeagueGothic';
src: url(LeagueGothic.otf);
}
CSS – Font Support





Different Browsers support different font
types: OTF, TTF, SVG, WOFF, EOT.
Even IE5+ supports @font-face but with a
proprietary format – EOT
Supported in Firefox 3.5+, Chrome 4+, Safari
3+
iOS supports SVG fonts, Android 2,2
supports OTF/TTF formats
http://www.html5rocks.com/tutorials/webfonts/quick/
CSS – Text Overflow

Three ways to deal with text overflow



text-overflow: hidden
text-overflow: no-wrap
text-overflow: elipsis
CSS – Multi column support


Allows you to take a series of paragraphs and
flow the content along multiple columns.
CSS attributes on a DIV:



column-Count:
column-rule:
column-gap:
Additional Attributes



Text Stroke (outline) size and color
Ability to set the opacity of the foreground
and background colors independently
HSLA Color spec: Hue, Saturation,
Luminance, Alpha
CSS – Rounded Corners


-webkit-border-radius, -moz-border-radius,
border-radius attribute
Progressive enhancement - going forward
this is how we will add rounded corners to
boxes rather than the current nested DIV
approach we currently use. IE 6/7/8 users
will see square corners.
CSS Gradients



Both linear and radial gradients
Supported in FF 3.6+
-webkit-linear-gradient, -moz-linear-gradient,
-webkit-radial-gradient, -moz-radial-gradient
CSS Shadows/Reflections




Can now add drop shadows to text and box
elements
text-shadow and box-shadow attributes
-webkit-box-reflect – build your own coverflow
display with CSS!
I believe -moz-box-reflect is in FF4.
CSS Backgrounds


Can now control background size to always
cover or contain the background in an
element
Multiple backgrounds – can layer multiple
background images on one another
CSS Flexible Box Layout



A way to proportionally size boxes in relation
to another.
A great way to center content vertically and
horizontally.
Supported in Firefox 3+, Chrome, Safari,
Mobile Safari (iOS), Android. Not in IE9!!

http://www.html5rocks.com/tutorials/flexbox/quick/

http://www.ie7nomore.com/fun/flexiblenav/
CSS Transitions





Lets you apply an animated transition when
changing the value of a CSS property.
Mostly webkit, but coming in Firefox 4
Works on iOS but not Android
GPU accelerated in iOS
Cool transition demo at http://www.apple.com/html5/showcase/transitions/
CSS Transforms

Scale
Rotate
Perspective
Firefox 3.5+

https://developer.mozilla.org/En/CSS/-moz-transform



CSS - Animations



Allows you specify from / to property values
in CSS.
Duration, repetition, etc. all controlled via
CSS.
Already in webkit, in FF 3.7+
What about Flash?









Lots of stuff that HTML5 leaves out for us:
Font metrics
Bitmap manipulation
Audio manipulation
More flexible security model (cross-domain). However new
browsers support some of this in XmlHttpRequest
3D support – hardware acceleration
Actionscript language
Desktop client support (AIR)
Totally cross-browser/cross-platform. With HTML5
Where to learn more









HTML5Rocks
Apple HTML5 Demo
Dive Into HTML5
HTML5 Peeks, Pokes, and Pointers
HTML5Demos
Can I Use? HTML5 Compatibility Tables
Mozilla Developer Center HTML5
W3C Working Draft
WHATWG Working Draft