Belgacom Skynet, 2011 - François Massart
HTML5, just another presentation :)
Jan 18, 2015
I based my presention on the great "HTML5 for Web designers" by Jeremy Keith. Awesome and pragmatic book, the way I like it. Get your copy on: http://books.alistapart.com/products/html5-for-web-designers
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
A brief history of markup
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 XMLNo 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...
XHTML 2
XHTML2 HAS FAILED!
• 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 final 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 reunification
• XHTML 2 was going nowhere (and slowly!)
• WHATWG works can be used as basisfor 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?
• Specifications 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
Users Browsers
HTML5Specs
The design of HTML5
Simple principles
• Support existing content :)
• Do not reinvent the wheel
• Don’t go extreme, keep it real
Priority of constituencies
In case of conflict, consider users over authors over implementers over specifiers 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">
• type="text/javascript"
• type="text/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...
Rich Media
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>
Web Forms 2.0
<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”
• type=”range”
• type=”number”
• type=”date”
• type=”color”
• custom (type) pattern=”[\d]{5}(-[\d]{4})”
<input>’s new types
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
Semantics
<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.)
StructureIt’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: pullquotesNice 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>
<footer>
<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>
<section>
<header>
<footer>
<nav>
<aside>
<article>
<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!
Using HTML5 today
Styling
• Browsers won’t apply default styling on “New elements”, define 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 filters
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
Related Documents
