HTML 5 overview

Use the arrow keys to show the next slide or the navgation links at the top.

About the demo

This presentation is a showcase of new features in HTML, CSS and JavaScript.

If an example doesn't work in your browser it isn't because it can't or there isn't an equivelent fall back. Everything displayed here will either have a similar equivelent or can degrade gracefully, a you would currently do when embedding flash.

Credits

Some examples have been pulled in from else where, all credit to:

  • Benjamin Joffe for his canvas example

HTML 5 overview

HTML 5

HTML 5 is a new document type

<!DOCTYPE html>

HTML 5

A brief history of html

HTML 5 is a new version of HTML and XHTML.

The HTML 5 specification defines new markup to solve issues found in previous iterations of HTML and addresses the needs of Web Applications.

It is the first major revision and roll out of changes to html for ten years.

Web Applications

The working title for what is now known as HTML 5 was Web Applications 1.0, which is a better reflection of what these new features are designed for.

The biggest change is the end of versioning. There will not be a point where html 5 stops and html 6 begins but the spec and features will be continually refined and improved on.

HTML 5

What is it?

HTML 5 has become an all encompassing term for new browser features and ways of sharing information.

HTML 5 consists of new features in HTML and nothing else.

Apple and Google are treating (and hyping) the term HTML5 and it's going the way of Web 2.0. The Apple 'HTML5' demo page is really just JavaScript and CSS3.

HTML 5

New tags

There are, amongst others, the following new tags added with HTML 5:

	<address>
	<article>
	<aside>
	<audio>
	<canvas>
	<footer>
	<header>
	<hgroup>
	<mark>
	<nav>
	<section>
	<source>
	<svg>
	<video>
		

Most of these are just nicer, and more semantic, ways of coding. The exciting tags are <audio>, <canvas>, <svg> and <audio>.

HTML 5

audio/video

Play audio and video files in the browser without the need to use flash. This means content will work on iphones (etc) and other platforms which don't support flash.

<audio>

<video>

HTML 5

canvas

Draw vector shapes in the browser. This is used for simple to complex images.

HTML 5

canvas animations

These can also be animated

HTML 5

interactive canvas

Canvas elements are also interactive. This is a demo from 2005.

HTML 5

interactive canvas

Searchlight.

HTML 5

SVG

Not entirely new to HTML Scalable Vector Graphics (SVG) offers similar effects as canvas but allows for more control over elements.

SVG is similar to illustrator, allowing for the same manipulation effects such as clipping and filters.

HTML 5

SVG

HTML 5

input types

There are new input type definitions for forms. These help define what content should be entered as well as setting the keyboard type for mobile devices. This includes:

  • email

  • number

  • url

  • tel

  • range

  • placeholder text

If the browser can't display these features it reverts back to a text box.

The HTML 5 family

Web Applications

Alongside HTML 5 there are a lot of new features for CSS and JavaScript. CSS is also undergoing a major revision with many new features added in CSS 3.

We call these the HTML 5 family. These are not HTML 5. When people ask for HTML 5 it is more than likely they want something they have seen in CSS or JavaScript.

This includes a whole array of new features for web applications. The initial term for what is now being called HTML 5 was Web Applications 1.0

This includes new features in in existing platforms:

  • jQuery

  • Facebook

  • Sencha

  • Maps/GeoLocation

  • Modernizer

jquery Facebook sencha geolocation modernize

JavaScript

Web Storage

This is used like a cookie but stores information per browser.

It can be used to store form information in case the browser crashes.

JavaScript

Geolocation

Especially useful for sites on mobiles (where the location is more accurate).

CSS

font support

Using @font-face to add fonts to pages means we don't have to use font replacement techniques (like cĂșfon and sFIR). This means we can add non web fonts to body text without slowing the page load.

The headings of this presentation are using @font-face.

Fonts used this way must be licensed for this kind of use as this method links directly to the .otf/.ttf file.

Delicious-Bold.otf

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSS

Columns

Columns:1;

In March 1936, an unusual confluence of forces occurred in Santa Clara County.

A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.

Instead, by the billions, they all burst open at once. Seemingly overnight, the ocean of green that was the Valley turned into a low, soft, dizzyingly perfumed cloud of pink and white. Uncounted bees and yellow jackets, newly born, raced out of their hives and holes, overwhelmed by this impossible banquet.

Then came the wind.

It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. A tidal bore of warm air, it tore along the columns of trees, ripped the blossoms apart and carried them off in a fluttering flood of petals like foam rolling up a beach.

This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley. It froze traffic, as drivers found themselves lost in a soft, muted whiteout. Only the streetcar, its path predetermined, passed on

CSS

opacity

Opacity:0.2

Key

CSS

Rounded corners

border-radius:1

Key

CSS

Gradients

CSS

Shadows

text-shadow:

3px

0px

0px

text shadows example

Reflections

(currently on in Safari/Chrome)

Can we use HTML 5 and other parts of the HTML 5 Family now?

Yes.

As long is it doesn't prevent people from accessing content if they can't access these features.

We are already using some of these features in our work.

Build web based mobile apps.

Using JavaScript libraries such as jQuery and Sencha we can optimise sites for Android and iOS devices. This can be as simple as page transitions, like sliding from the left, to more complex use of touch.

Taylor design to each browser.

The most important part of a site is content and structure. What comes after aids interaction and encourages use.

Content should react and behave differently for each device or browser. A site on IE6 should not be expected to behave the same as on IE9. A site on Chrome should not act the same as on an iphone.

Progressive enhancement.

Central to our approach to accessibility is progressive enhancement. Progressive enhancement focuses on content and structure first and all other layers of presentation later. This means that users will always be able to view the content (the most important part of any site) and, dependent on what is installed or enabled, be presented with a more content rich experience.

By supporting progressive enhancement we are allowing for future compatibility and graceful degradation in terms of current capabilities without preventing or limiting access to content or form based actions.

Support

Browser use, 2010

May

January

Internet Explorer 8

34.60%

24.07%

Internet Explorer 7

19.59%

34.13%

Internet Explorer 6

7.57%

11.42%

Firefox 3.6

7.24%

-

Firefox 3.5

9.28%

9.09%

Firefox 3

2.91%

8.97%

Safari 4

9.10%

3.92%

Safari 3

0.62%

0.98%

Chrome 5

0.38%

-

Chrome 4

4.81%

-

Chrome 3

1.02%

2.14%

Opera

1.49%

1.94%

Other

1.38%

1.58%

Source: iris Digital browser stats

The browsers hightlighted all support these new features. That's 40% of users.

If we're making sites work in IE6 (7.5%) then we should definately be supporting browsers that support these new features.

HTML5 Family roadmap

We should stage the introduction of this over three parts:

  1. Explore new features and start supplementing sites with HTML5 and CSS3 to enhance, but not limit, the user experience.

  2. Building Web Apps, targeting supported browsers and devices, such as iOS and Andriod.

  3. Full integration into all sites following IE9 launch.

Myths explained

HTML5 Family vs Flash?

There is no contest, it's like comparing a fork and a spoon. Each have their own advantages, where hybrid sites can ustilise the best of both.

HTML5 Family or Web Apps

A more correct term for all things new. Don't let HTML5 become the new Web 2.0 or AJAX.

Any questions?