The document outlines key aspects and the evolution of HTML5, emphasizing that it is not a single entity but a set of features beneficial for web development. It introduces new elements like <video> and <canvas>, details storage capabilities with HTML5 storage, and explains web workers for background processing. Additionally, it highlights the introduction of new input types and the modular nature of CSS3, providing a concise overview of HTML5's significance and functionality in modern web applications.

1. Everything you need to know
about HTML5 in 10 min
@edgarparada

2. 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

3. 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 first version of
(XHTML 1.0) recomendation XForms 1.0

4. 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

5. We are on 2012, so is
HTML5 ready yet?

6. WHAT Working Group?
The Web Hypertext Applications Technology
Working Group is a loose, unofficial, and open
collaboration of Web browser manufacturers and
interested parties.

7. Video
HTML5 defines 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 files, and browsers that support HTML5 video will choose one based
on what video formats they support.

8. 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 files.
You should note that the FLV format is not a bad format. It provides a small file size
with relatively good quality. the FLV format can be optimized with a technology called "on2"

9. 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.

10. 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.

11. Geolocation
Geolocation is the art of figuring out
where you are in the world and
(optionally) sharing that information
with people you trust.
There is more than one way to figure
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.

12. 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>

13. 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 finish it off with an
<input type="submit"> button.
You don’t know the half of it. HTML5 defines
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

14. New Semantic Elements

15. 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.

16. Canvas what’s good for?
Analysis, planning & prototypes
Product strategy, user-centered workflow
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

17. 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 finished.
The benefit 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.

18. Extra tips...

19. Everything you need to know
about HTML5 in 15 min
@edgarparada