HTML5, just another presentation :)

Belgacom Skynet, 2011 - François Massart

Summary
1. A brief history of markup
2. The design of HTML5
3. Rich Media
4. Web Forms 2.0
5. Semantics
6. Using HTML5 today

Untitled document

• First document “HTML Tags” in 1991

• Evolutions like the <img> tag in HTML 2.0

• HTML 4.01 published in 1999

• XHTML 1: HTML as XML
No new element, just stricter syntax

XHTML 1 Rules
• Considered as “Best practice”
• Everything in lowercase
<H2>Wrong</H2>
<h2>Correct</h2>

• Attribute values between quotes
<p class=intro>Yaaak</p>
<p class=”intro”>Yep!</p>
<p class=”intro success”>Yep!</p>

XHTML 2

• HTML is replaced by XML
• Not backward compatible, hum...
• Disaster...

• Pure standards ideology vs Real world
• Representatives from Opera, Apple and
Mozilla were unhappy
• Rebels formed the Web Hypertext
Application Technology Work Group

WHATWG
• Discuss issues like the W3C but ﬁnal
decision is made by the editor (Ian
Hickson)...
• In theory: less democratic process
• In practice: faster decisions
• They created...
Web Forms 2.0 and Web Apps 1.0

Let’s cook...
Web Forms 2.0
+
Web Apps 1.0
=
HTML5

The reuniﬁcation
• XHTML 2 was going nowhere (and slowly!)
• WHATWG works can be used as basis
for next versions of HTML...
• Confusing situation with 3 technologies:
XHTML 2, HTML 5 and HTML5...
• Only keep HTML5

Current state of
HTML5
• 2 groups working on HTML5
• WHATWG “Commit then review”
• W3C “Review then commit”
• Should become a “proposed
recommendation” in 2022
• “Candidate recommendation” in 2012

Ready to use?
• Speciﬁcations due in 2012
• Depends on browsers support
• There won’t be a single point in
time at which we can declare that
the language is ready to use.

• You are already using HTML5

HTML5
Specs

Users Browsers

Simple principles

• Support existing content :)
• Do not reinvent the wheel
• Don’t go extreme, keep it real

Priority of
constituencies
In case of conﬂict, consider users over authors over
implementers over speciﬁers over theoretical purity.

Error handling
• Defined in the specifications
• For the first time!
• Browsers makers can focus on new
features instead of errors
• How to deal with malformed documents?
• Very ambitious

New HTML DocType

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/
strict.dtd">

• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict //EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-strict.dtd">

• <!DOCTYPE html>

<!DOCTYPE html>

• Very pragmatic
• Need to support existing content
• Browsers support features, not doctypes
• DTD are meant for validators
• Quirks mode vs Standards mode

Keep it simple

• <meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">

• <meta charset="UTF-8">

• <script type="text/javascript" src="file.js"></
script>

• <link rel="stylesheet" type="text/css"
href="file.css">

Syntax rules get lazy

• You are free to enforce a particular style of
writing (lowercase, uppercase, quotes...)
• Chose your syntax and hold on it!
• My recommandation: keep XHTML syntax
• But drop the value for Boolean attributes

New JavaScript APIs

• No real specification until now
• HTML5 will finally document all its APIs
• Ensure compatibility through all browsers
• What’s up? Undo manager, offline storage,
drag and drop...

Filling the gaps

• HTML + CSS + JavaScript = Application
• Almost...
• You need a plug-in’s for video and audio
• Closed technologies
• Native is better :)

Canvas

• Environment for creating dynamic images via
JavaScript drawing API
• Simple, elegant and fallback enabled
<canvas id="my-first-canvas" width="360" height="240">
<p>No canvas support? Ignore it and use its children:</p>
<img src="puppy.jpg" alt="a cute puppy"/>
</canvas>

Audio

• Available options: autoplay, loop, controls...

• Simple as:
<audio src="witchitalineman.mp3" loop></audio>

• Can be controlled by JavaScript:
document.getElementById('player').pause();

Big deal on codecs?

• Some format costs money (MP3, H264...)
• Others are free of charge
<audio controls>
<source src="witchitalineman.ogg" type="audio/ogg">
<source src="witchitalineman.mp3" type="audio/mpeg">
</audio>

• Online demo

Bulletproof example

<audio controls="">
<source src="witchitalineman.ogg" type="audio/ogg">
<source src="witchitalineman.mp3" type="audio/mpeg">
<object type="application/x-shockwave-flash"
data="player.swf?soundFile=witchitalineman.mp3">
<param name="movie" value="player.swf?
soundFile=witchitalineman.mp3">
<a href="witchitalineman.mp3">Download the song</a>
</object>
</audio>

Video
• Very similar to audio tag...
• Full example:
<video controls width="360" height="240"
poster="placeholder.jpg">
<source src="movie.ogv" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<object type="application/x-shockwave-flash"
width="360" height="240" data="player.swf?
file=movie.mp4">
<param name="movie" value="player.swf?file=movie.mp4">
<a href="movie.mp4">Download the movie</a>
</object>
</video>

<input> revisited

• placeholder attribute
<input type=”text” placeholder=”Keywords?” />

• autofocus attribute (Boolean)
<input type=”text” autofocus />

• required attribute (Boolean)
<input type=”text” required />

<input> revisited

• autocomplete attribute (on/off)
• <form action="/send.php" autocomplete="on">

• <input type="text" name="captcha"
autocomplete="off" />

<datalist>

• Crossbreed between <input> and <select>
• Sample code:
<input type="text" list="planets"/>
<datalist id="planets">
<option value="Mercury">
...
<option value="Neptune">
</datalist>

<input>’s new types
• type=”search”
• type=”email”
• type=”url”
• type=”tel” (try this in Mobile Safari)
• If unsupported fallback to default:
type=”text”

<input>’s new types

• type=”range”
• type=”number”
• type=”date”
• type=”color”
• custom (type) pattern=”[d]{5}(-[d]{4})”

Nice! Can I style them?

• NO:-PE
• Web is NOT about control
• The user is used to his native browser UI
elements...
• Browsers will probably make them nicer

<mark>keyword</mark>

• Give importance to content in a special
context (e.g. search results)
• Instead of <em> or <strong>

<time>

• Today using microformats:
<abbr class="dtstart" title="1992-01-12">
January 12th, 1992
</abbr>

• Soon:
<time class="dtstart" datetime="1992-01-12">
January 12th, 1992
</time>

<meter>

• Markup measurements, part of a scale
(min/max values):
<meter>9 out of 10 stars</meter>

<meter max="10">9 stars</meter>

<meter low="-273" high="100" min="12" max="30"
optimum="21" value="25">
It's quite warm for this time of year.
</meter>

<progress>

• Markup measurement that is changing...
Your profile is <progress>60%</progress> complete.

<progress min="0" max="100" value="60"></progress>

• Great with JavaScript ! (File uploads, etc.)

Structure
It’s the content that matters, not the position.

• <section>
• <header>
• <footer>
• <aside>
• <nav>
• <article>

<section>

• Grouping together thematically-related
content vs <div> which have no semantic.
<section>
<h1>DOM Scripting</h1>
<p>The book is aimed at designers rather
than programmers.</p>
<p>By Jeremy Keith</p>
</section>

<header>
• It is NOT the “master head”.
• Described as “a group of introductory or
navigational aids.”
<section>
<header>
<h1>DOM Scripting</h1>
</header>
<p>...</p>
</section>

<footer>
• NOT describing a position but...
• “should contain information about its
containing element:
author, copyright information, links to related content, etc.”
<section>
...
<footer>
<p>Powered by Belga</p>
</footer>
</section>

<aside>

• Once again, it’s the content that matters,
not the position.
• Example: pullquotes
Nice to have, but you can remove them
without affecting the main content.

Pop quiz !
• What new structure markup element
should contain the author’s infos ?
• <section>

• <header>

• <footer>

• <aside>

• <nav>

• <article>

<nav>
• As expected: containing navigation
informations.
• Usually a list of links
• Use it for site-wide links
• Often inside <header> which contains
“navigational aids”

<article>

• <article> a specialized kind of <section>.
• Self contained...
• Now what is “self contained”... Think of it
as in a RSS feed.
• <article> vs <section>... Tricky task!

Styling

• Browsers won’t apply default styling on
“New elements”, deﬁne yours!
section, article,
header, footer, nav, aside, hgroup
{ display: block;}

• Internet Explorer cannot handle it!
You need an extra JavaScript...

Validation

• Just a tool, use it wisely
• http://validator.nu/ will be used when
doctype is HTML5...
• Even from our old friend
http://validator.w3.org/

Feature detection

• Testing feature support
• Provide a JavaScript alternative
• Don’t re-invent the wheel!
• You can use Modernizr

Modernizr

• www.modernizr.com
if (!Modernizr.inputtypes.color)
{
// JavaScript fallback goes here.
}

Get on it!

• Dependable features
• Roughly usable features
• Experimental features
• Edge features

Dependable features
• doctype <!DOCTYPE html>
• charset <meta charset="UTF-8">
• self-closed tags (+optional quotes)
• no more type attributes type="text/css"
• new semantics <article>, <section>, ...
• data-* attributes <p data-timer="5">...
• contenteditable

Roughly usable features
• <audio> & <video>
• <canvas> demo
• SVG
• geolocation
• web sockets
• drag and drop
• input autofocus
• input placeholder

Experimental features
• form input types
• <meter> & <progress>
• web SQL database
• web storage
• web workers
• WebGL
• File API
• history.pushState

Edge features

• hardware acceleration
• IndexedDB
• orientation
• <device>
• audio data API
• <input speech>
• SVG ﬁlters

Go to and learn!
• Learn through books, websites, Google
Reader, etc.
• HTML5 is a living standard...
It’s alive ! Stay on your toes.
• Links:
! http://html5rocks.com/
! http://html5doctor.com/
! http://whatwg.org/html5

HTML5, just another presentation :)

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (10)

Similaire à HTML5, just another presentation :)

Similaire à HTML5, just another presentation :) (20)

HTML5, just another presentation :)