Let's Start To Work in HTML5

Let's Start To Work in HTML5: Overview

It’s been a while now that HTML5 has started to be hyped in technology news. Some say that HTML5 might mean the end of Flash, other say that it won’t change a lot. It is now time to look seriously at what HTML5 brings to the table. In this presentation, we are going to look at the new elements and functionality in HTML5 and where and when we should start using them in our work. Also, because it is always better to look at real code, even if we don’t have a lot of time, we are going to try to bring parts of a Wordpress theme to HTML5.

  1. Obligatory introduction
  2. New semantic elements
  3. Media elements
  4. Web graphics
  5. Local / Offline storage
  6. Web Forms
  7. Semantic Web and extensibility
  8. Interactive elements
  9. Geolocation and more
  10. Accessibility
  11. Doctypes, serialization

A little history of HTML (and friends)

1991:
HTML is born
1993:
Mosaic: the first graphical browser
1995:
HTML 2, Javascript, Netscape 2.0 beta
1996:
CSS 1, Netscape 3, Internet Explorer 3
1997:
HTML 3.2, Netscape 4, Internet Explorer 4
1998:
HTML 4, CSS 2
1999:
Internet Explorer 5

A little history of HTML (and friends)

2000:
XHTML 1, Internet Explorer 5.5
2001
The end of the browser wars: Internet Explorer 6
2002-2007
Evangelist years, no more tables please!
2004
WHATWG (Web Forms 2.0 and Web Applications 1.0 initiative)
2005
Ajax!
2007
CSS 2.1
2009-2011
HTML5, Firefox 3 + Internet Explorer 9, Safari 4+, Chrome +, CSS 3

Evolution or revolution?

But What is HTML5 ?

More than just markup ?

New semantic elements

Structure
<section>, <article>, <aside>, <figure>
Text level
<time>, <ruby>, <mark>, <i> , <b>

Helps maintain, repurpose, accessibility, SEO, etc.

<section>


 <section>
	<h1 Section 1 </h1>
	<section>
		<h1 Section 1.1 </h1>	
		<section>
			<h1 Section 1.1.1 </h1>		
		</section>								
	</section>	
 </section>
 <section>
	<h1 Section 2 </h1>
	<section>
		<h1 Section 2.1 </h1>	
		<p>Lorem Ipsum Dolor Sit Amet.<p>
	</section>
	<section>
		<h1 Section 2.2 </h1>	
		<p>Lorem Ipsum Dolor Sit Amet.<p>
	</section>							
 </section>

<article>


 
 	<article>
		<h1 Article heading </h1>
		<section>
			<h1 Section 1 </h1>	
			<section>
				<h1 Section 1.1 </h1>		
			</section>								
		</section>	
 	</article>

<nav>


	
	<nav>
		<ul>
			<li <a> href="#">Home 1</a> </li>
			<li <a> href="#">FAQ 1</a> </li>
			<li <a> href="#">About Us 1</a> </li>
			<li <a> href="#">Our products 1</a> </li>			
		</ul>
	</nav>

<header>


	<header>
		<h1><img src="logo.png" alt="Our Company"></h1>
		<ul>
			<li <a> href="#">Home <a> </li>
			<li <a> href="#">FAQ <a> </li>
			<li <a> href="#">About Us<a> </li>
			<li <a> href="#">Our products<a> </li>		
		</ul>
		<form action="search.do">
			<input type="search" placeholder="search" value="search">
			<input type="submit" value="go!">
		</form>
	</header>

<footer>


	<footer>
		<p>This article was written by the 14th doctor. 
		Copyright © Theta Sigma Corp. Most rights reserved</p>
		<ul>
			<li <a> href="#">Home </a></li>
			<li <a> href="#">Previous article </a></li>
			<li <a> href="#">Next article</a></li>
			<li <a> href="#">Top 1</a></li>
		</ul>
		<p>Share with your friends : </p>
		<ul>
			<li <a> href="#">Twitter 1</a></li>
			<li <a> href="#">Facebook 1</a></li>
			<li <a> href="#">Friendfeed</a></li>
			<li <a> href="#">Whatever1</a></li>
		</ul>	
	</footer>

<hgroup>


	<header>
		<hgroup>
			<h1><img src="logo.png" alt="Our Company"></h1>
			<h2>Our most convincing slogan!</h2>
		<hgroup>
		<ul>
			<li <a> href="#">Home <a> </li>
			<li <a> href="#">FAQ <a> </li>
			<li <a> href="#">About Us<a> </li>
			<li <a> href="#">Our products<a> </li>				
		</ul>
		<form action="search.do">
			<input type="search" placeholder="search" value="search">
			<input type="submit" value="go!">
		</form>
	</header>

<aside>


	<article>
		<h1> Article heading </h1>
		<section>
			<h1 Section 1 </h1>
		</section>
		<aside>
			<h1>Glossary</h1>
			<dl>
				<dt>Sonic Screwdriver</dt>
				<dd>Lorem Ipsum Dolor Sit Amet</dd>
				<dt>The Shadow Proclamation</dt>
				<dd>Lorem ipsum dolor sit amet</dd>
			</dl>
		</aside>
	</article>

<figure> and <figcation>


	<figure>
		<img src="vacation1.png" alt="Family at the beach">
		<img src="vacation2.png" alt="Family in the forest">
		<img src="vacation3.png" alt="Family at the amusement park">
		<figcaption>
			Our best vacation photos	
		<figcaption>		
	</figure>

<time>


	<article>
		<header>
			<h1> Article heading </h1>
			<p>Published: 
			  <time pubdate datetime="2010-05-27">27th May, 2010</time</p>
		<header>
		<section>
			<h1> Section 1 </h1>	
			<section>
				<h1> Section 1.1 </h1>		
			</section>
		</section>	
	</article>

<mark>


	<p>You searched this page for the text <mark>test</mark> : </p>
	<section>
		<h1> Section title </h1>
		This page is a <mark>test</mark>. 
		Because it is always good to <mark>test</mark>
		before going to production!
	</section>

New semantics for <i>, <b>, <small> and <hr>

<i>:
alternative voice (ex: foreign words for pronounciation, technical terms, )
<b>:
span of text offset from its surrounding content without conveying any extra importance
(from W3C specification), (ex: keywords, product names)
<small>:
side comments and small print
<hr>:
paragraph-level thematic break

<ruby>, <rt> and <rp>

Annotations used for pronunciation guidance in Chinese, Japanese and Korean languages

Media elements

No more plug-ins! Yay!

Oh is it really that ? Let's go to the fine print

<video>

<video>

Big Buck Bunny trailer with the video element

<video>

Continued...


  <article id="bigbuckbunny">
	<h1>Big Buck Bunny trailer with the video element</h1>
	<video controls>
		<source src="http://mirror.cessen.com/blender.org/peach/trailer/trailer_iphone.m4v">
		<source src="http://download.blender.org/peach/trailer/trailer_400p.ogg">
	</video>
	<footer>
		<p>(c) copyright Blender Foundation |
			<a href="http://www.bigbuckbunny.org">www.bigbuckbunny.org</a></p>
	</footer>
  </article>

<audio>

My own failed attempt at making music

© Copyright Benoit Piette 1997

	<article>
		<h1>My own failed attempt at making music</h1>
		<audio controls>
			<source src="..media/minedenuit.ogg">
		</audio>
		<footer>© Copyright Me 1997</footer>
	</article>

The codec debate

What about DRM ?

Apple vs Google vs Adobe vs Microsoft vs Opera vs Mozilla

App store applications vs Open Web vs something in the middle

Web graphics

The canvas element and 2D API


	<canvas id="myCanvas" width="400" height="120">
	</canvas>
	<script type="text/javascript">
		if (Modernizr.canvas) {
			var canvasCtx = document.getElementById("myCanvas").getContext("2d");
			canvasCtx.fillStyle = "rgb(0,100,0)";
			canvasCtx.translate(150, 50);						
			canvasCtx.rotate(45 * Math.PI / 180);  	
			canvasCtx.fillRect(0,0,50,50);
		}
	</script>

SVG in HTML


	<?xml version="1.0" standalone="no"?>
	<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
		"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
	<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<g transform="translate(50, 0)">
		<g transform="rotate(45)">
			<rect width="50" height="50" style="fill:rgb(0,100,0);"/>
		</g>
	</g>
	</svg>

Local / Offline storage

Session storage
Storage available to a session in a window / tab
sessionStorage.setItem(key, stringValue); //(the value must be a string, so serialize objects with JSON)
sessionStorage.getItem(key);
sessionStorage.removeItem(key);
Local storage
Storage available for the current domain
localStorage.setItem(key, stringValue); //(the value must be a string, so serialize objects with JSON)
localStorage.getItem(key);
localStorage.removeItem(key);
IndexedDB / Web SQL Database
Database available in the browser (with SQL and transactions)

Offline application caching


				CACHE MANIFEST
				/images/spacer.gif
				
				NETWORK:
				ajaxresponder.cgi
				
				FALLBACK
				dynamicimage.cgi staticimage.png

Web Forms: New input types

<progress>

Represents the prgress of a task (ex: mutiple page form entry, multiple ajax calls) 


		<section>
			<h1>Form completion progress</h1>
			<p><progress value="10" max="100">10%</progress></p>
		</section>

<meter>


	<meter min="0" max="150" value="50">3/5 of this presentation is done</meter>

Semantic Web and distributed extensibility

Microdata


  <section itemscope itemtype="http://programmeurspolyglottes.net/sociallinks>
    <h1>Social media profiles links</h1>
    <section>
      <h1> itemprop="name">Benoit Piette</h1&>
      <ul>
        <li><a itemprop="twitter" href="http://twitter.com/benoitpiette">Twitter</a>
        <li><a itemprop="identi.ca" href="http://identi.ca/benoitpiette">Identi.ca</a>
        <li><a itemprop="facebook" href="http://www.facebook.com/benoitpiette">Facebook</a>
        <li><a itemprop="linkedin" 
                          href="http://ca.linkedin.com/pub/benoit-piette/6/2aa/571">LinkedIn</a>
      </ul>
    </section>
  </section>

HTML5 + RDFa


  <section typeof="sl:Profiles" xmlns:sl="http://programmeurspolyglottes.net/sociallinks>
     <h1>Social media profiles links</h1>
     <section>
       <h1 property="sl:name">Benoit Piette</h1&>
       <ul>
         <li><a rel="sl:twitter" href="http://twitter.com/benoitpiette">Twitter</a>
         <li><a rel="sl:identi.ca" href="http://identi.ca/benoitpiette">Identi.ca</a>
         <li><a rel="sl:facebook" href="http://www.facebook.com/benoitpiette">Facebook</a>
         <li><a rel="sl:linkedin" 
              href="http://ca.linkedin.com/pub/benoit-piette/6/2aa/571">LinkedIn</a>
       </ul>
     </section>
  </section>

data- attributes


	<p>Who has the shortest straw?</p>
	<ul>
		<li data-length="12">Ben's straw
		<li data-length="5">Dave's straw
		<li data-length="10">Ken's straw
	</ul>

Interactive elements

<details> and <summary>


	<details>
		<summary>More Info:</summary>
		<p>More information about somethiing</p>
	</details>

<command> and <menu>

The <command> element defines a command widget in a Web application, similar to a link or button, but specific to a client side application (not an url or a form action)

The <menu< element defines a list of commands, that can be a toolbar, a contextual menu or a simple list of commands. Do not confuse with <nav> (urls) 


	<menu type="toolbar">
		<command type="command" label="New" icon="new.png">
		<command type="command" label="Save" icon="save.png">
		<command type="command" label="Load" icon="load.png">
	</menu>

Geolocation


	<script type="text/javascript">
		function showCoords(position) {
			document.getElementById("coordtest").innerHTML = 
				("<p>Coords: " + position.coords.latitude + 
					", " + position.coords.longitude + "</p>"); 
		}
		if (navigator.geolocation != undefined) {
			navigator.geolocation.getCurrentPosition(showCoords);
		} else {
			document.getElementById("coordtest").innerHTML = 
					"<p>Geolocation not available</p>";
		}
	</script>

Web Sockets

Web Workers


	var myWorker = new Worker("worker-test.js");
	
	myWorker.onmessage = function(evt) {
		document.getElementById("myID").innerHTML = evt.data;
	}	
			
	myWorker.postMessage(500);

From worker-test.js : 


	onmessage = function (evt) {
		// do something intensive with evt.data
		// send a message back with the results 
		postMessage(result);
	}

Drag and Drop and File API

Drag a text file here (Firefox 3.6+)

Accessibility and WAI-ARIA

ARIA roles

Examples of ARIA roles:

main
defines the main content of the site
navigation
defines a collection of links
tree and treeitem
defines trees (ex: explorer left pane type interface)

	<section role="main">
		Lorem ipsum dolor sit amet
	</section>

ARIA states and properties

State and properties provide specific information about an object (Supported state and properties WAI-ARIA)

Here are a couple of examples of aria states and properties

aria-describedby
Provides additional details / description to an element
aria-labeledby
Provides information on what the element does
aria-live
Defines an element that can be updated (ex: via AJAX)
aria-grabbed
if set to true, means that en element has been grabbed (set to false when dropped)

	<!-- The div is updated by scripts / ajax and assistive
					technology should announce the update -->
	<div id="updatedInfo" aria-live="polite">
	</div>

HTML5 Doctype

<!DOCTYPE html>

It's there just to trigger standard mode rendering in browsers

Not necessery in the XHTML serialization

HTML5 Serialization

text/html
HTML5
application/xml+xhtml
XHTML5
  • XHTML 2 may be not be maintained anymore, but XHTML lives on in XHTML5 serialization
  • No more appendix C (cannot send XHTML as text/html)
  • HTML accept XHTML syntax for self closing elements (<br />) to ease transition from XHTML 1.x
  • XHTML cannot have <noscript>, document.write in javascript, etc
  • Polyglot documents have the same serialization (XHTML and HTML)

Other things of interest

No longer in HTML

A word on CSS3

Rounded corners !!
padding:5px;
width:50%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
Text Shadow
text-shadow: 4px 4px 4px #555;
Web Fonts
@font-face {font-family: 'FuroreRegular'; src: url('Furore-webfont.eot');}
Selectors
Attributes selectors ([attribute^=value], [attribute$=value], [attribute*=value])
Box Shadow
box-shadow: 15px 15px 15px #555; + (don't forget prefix for browser -webkit, -moz, etc)

Multiple columns, generated content, overflow-x, overflow-y

What can I use right now!

On all browsers with significant share
Stuff that degrades well (CSS rounded corners), ARIA, data- attributes, microdata, block level links, doctype, xhtml like notation, contenteditable
Internet Explorer 8 and up
Local storage, more CSS
Internet Explorer 9+
CSS3, SVG and more ?
Webkit based mobile Web (+Opera)
Local storage, canvas, geolocation
On technical blogs
Semantic elements

Further reading

Comments? Questions?

Thank You!

Demo Time: Canvas, Contenteditable, Web Worker, getElementsByClassName and Local Storage Demo

One more thing: let's change a WordPress template live!