Download PowerPoint slides of Peter's presentation - Visual ...

tacitmarigoldInternet and Web Development

Jan 25, 2014 (3 years and 2 months ago)

401 views

1

HTML5 Overview

Peter Traeg

1/25/2011

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>


<hgroup> : groups a set of h1
-
h6 elements when the
heading has multiple levels


<nav>


<section>


<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