Everything you need to know about HTML5 in 15 min

Everything you need to know
about HTML5 in 10 min

@edgarparada

5 Things you should know
about HTML5

1. It’s not one big thing
2. You don’t need to throw anything away
3. It’s easy to get started
4. It already works
5. It’s here to stay

Timeline of HTML from
1997 to 2004
First draft of
W3C published XHTML
XHTML Extended
HTML 4.0 Modularization
forms
1997 1999 2001

1998 2000 2003

W3C XHTML 1.0 HTML Working
reformulated published as a Group published
HTML into XML W3C the ﬁrst version of
(XHTML 1.0) recomendation XForms 1.0

Timeline of HTML from
2004 and beyond...
Workshop on W3C adopts HTML5 specs to
Web Apps and WHATWG’s reach candidate
Compound Docs work (HTML5) status (projected)
2004 2007 2012

2005 2009 2022

Web Applications Last call issued for HTML5 to reach
1.0 Working Draft the HTML5 recommendation
published Working Draft status (projected)

Public Interest in
HTML5 increases

We are on 2012, so is
HTML5 ready yet?

WHAT Working Group?

The Web Hypertext Applications Technology
Working Group is a loose, unofﬁcial, and open
collaboration of Web browser manufacturers and
interested parties.

Video
HTML5 deﬁnes a new element called <video> for embedding video in your web pages.
Embedding video used to be impossible without third-party plugins such as Apple
QuickTime or Adobe Flash.

The <video> element is designed to be usable without any detection scripts. You can
specify multiple video ﬁles, and browsers that support HTML5 video will choose one based
on what video formats they support.

Flash & HTML5 Fallback

FLV fallback is used to provide a regular FLV video for those Flash clients that do not
support support HTML5 video. MP4 support was added to Flash in version 9.115 and
lower versions can only play FLV ﬁles.

You should note that the FLV format is not a bad format. It provides a small ﬁle size
with relatively good quality. the FLV format can be optimized with a technology called "on2"

Local Storage
HTML5 storage provides a way for
web sites to store information on your
computer and retrieve it later.

The concept is similar to cookies, but it’s
designed for larger quantities of
information. Cookies are limited in size,
and your browser sends them back to
the web server every time it requests a
new page (which takes extra time and
precious bandwidth).

HTML5 storage stays on your
computer, and web sites can access it
with JavaScript after the page is loaded.

Web Workers
Web Workers provide a standard way for browsers to run JavaScript in the background.
With web workers, you can spawn multiple “threads” that all run at the same time, more
or less. (Think of how your computer can run multiple applications at the same time, and
you’re most of the way there.)

These “background threads” can do complex mathematical calculations, make network
requests, or access local storage while the main web page responds to the user scrolling,
clicking, or typing.

Geolocation
Geolocation is the art of ﬁguring out
where you are in the world and
(optionally) sharing that information
with people you trust.

There is more than one way to ﬁgure
out where you are — your IP address,
your wireless network connection, which cell
tower your phone is talking to, or dedicated
GPS hardware that calculates latitude and
longitude from information sent by
satellites in the sky.

Modernizr, an HTML5
detection library
Modernizr is an open source, MIT-licensed JavaScript library that detects
support for many HTML5 & CSS3 features. At the time of writing, the latest
version is 1.5.You should always use the latest version. To use it, include the
following <script> element at the top of your page.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dive Into HTML5</title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>

Input Types

You know all about web forms, right? Make a
<form>, add a few <input type="text">
elements and maybe an <input
type="password">, and ﬁnish it off with an
<input type="submit"> button.

You don’t know the half of it. HTML5 deﬁnes
over a dozen new input types that you can use
in your forms.

search, number, range, color, tel, url, email, date,
month, week, time datetime, datetime-local

Canvas
HTML5 defines the <canvas> element
as “a resolution-dependent bitmap canvas that
can be used for rendering graphs, game
graphics, or other visual images on the fly.”

A canvas is a rectangle in your page where
you can use JavaScript to draw anything
you want. HTML5 defines a set of
functions (“the canvas API”) for drawing
shapes, defining paths, creating gradients,
and applying transformations.

Canvas what’s good for?
Analysis, planning & prototypes

Product strategy, user-centered workﬂow
design, concept demos and UI prototypes

Brand, visual & infographics

Brand and identity, visual and icon system
design, data visualization and infographicst:

Website and application UI
design

Website and application information
architecture, system modeling, and
detailed user interface design

CSS3 Today
CSS3 is actually a series of modules that are
designed to be implemented separately and
independently from each other.

This segmented approach has enabled portions of
the spec to move faster (or slower) than others,
and has encouraged browser vendors to
implement the pieces that are further along before
the entirety of CSS3 is considered ﬁnished.

The beneﬁt here for us web designers is that along
with experimentation and faster release cycle
comes the ability to use many CSS3
properties before waiting until they become
Candidate Recommendations.

Everything you need to know
about HTML5 in 15 min

@edgarparada

Everything you need to know about HTML5 in 15 min

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Everything you need to know about HTML5 in 15 min

Similar to Everything you need to know about HTML5 in 15 min (20)

More from Edgar Parada

More from Edgar Parada (17)

Recently uploaded

Recently uploaded (20)

Everything you need to know about HTML5 in 15 min

Editor's Notes