HTML 5

introduction

Who's that ?


  • +10 years in #webdev
  • RIA & mobile web development
  • Open source supporter
  • Beer drinker


Julien Bouquillon / @revolunet

History bits

1990

Tim Berners-Lee

creates the internet and HTML 1.0 at French CERN

awesome websites



(1991)

1994

Tim Berners-Lee

funds the W3C at Boston MIT

awesome websites



(1994)

awesome websites



(1998)

HTML EARLY DAYS



  • 1995 : HTML 2
  • 1996 : HTML 3
  • 1997 : HTML 4
  • 2001 : XHTML 1.1
  • 2002 : XHTML 2.0

  • #FAIL

XHTML FAILURE



It is necessary to
evolve HTML incrementally
The attempt to switch to XML didn't work.

Tim Berners Lee, 2004

HTML REBIRTH



  • 2004

  • Apple + Opera + Mozilla
  • WHATWG dissidents group

  • HTML5 FUTURE

HTML5 IS NOT


CSS3 nor SVG

JAVASCRIPT

FINISHED

HTML5 IS


A Working draft

Backward + Forward compatible

made for the modern web

and its various devices

What's

NEW ?

Syntax


  • New elements
  • header, footer, section, article, nav...

  • New / enhanced attributes
  • data-*, contenteditable, accesskey, draggable/dropzone, spellcheck...

  • Easier than ever

HTML5 structure


<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML5 Paris meetup</title>
	</head>
	<body>
		<header>
			<nav>
				<a href='/home'>Home</a>
				<a href='/contact'>Contact</a>
			</nav>
		</header>
		<section>
			<article>blablabla</article>
		</section>
		<footer>copyright 2012</footer>
	</body>
</html>

Semantic


  • Microdata (ex microformats)
  • Give more sense to your markup
  • googlebot friendly (rich snippets)
  • standards friendly

  • ARIA
  • Accessibility
  • role, tabindex, state & properties

New features


  • Offline access (mobile)

  • Storage & Device access

  • Multimedia & graphics

  • Communications

  • Better forms

HTML5 form example


<!doctype html>
<meta charset="utf-8">
<style>
	// inputs styling
	input[required] { background:#DDD; }
	input[required]:invalid { border: 1px solid red; }
	input[required]:valid { border: 3px solid green; }
	// validation styling
	::-webkit-validation-bubble-message{
		border:2px solid green;
		background: -webkit-gradient(linear, left top,....;
	}
</style>
<form>
  <input type="text" placeholder="Nom & prénom" title="Nom ET Prénom SVP" pattern="\w+\s+\w+">
  <br>
  <input type="email" required  placeholder="Votre email">
  <br>
  <input type="tel" placeholder="Téléphone" pattern="[\d\s\.]+">
  <br>
  <input type="range" min="1" max="100" value="28" >
  <br>
  <input type="submit" >
</form>

Awesome HTML5 form


Javascript APIs


  • Canvas 2D/3D

  • Drag & Drop

  • History API

  • Geolocation

  • Web Workers, Web Sockets
  • ...

10 secs geolocation


<script >
function geolocate() {
  navigator.geolocation.getCurrentPosition(success, error);
}
function success(result) {
  var co = result.coords;
  document.getElementById('result').innerText = co.latitude + ',' + co.longitude;
}
function error(result) {
  document.getElementById('result').innerHTML = "geolocation failed :/";
}
</script>
<h1>Geolocation example</h1>
<button onclick="geolocate()">geolocate me !</button>
<h3 id="result"></h3>

HTML5 examples



Apps

Offline gmail



Offline manifest, Web SQL Database, localStorage...

Youtube HTML5



Audio, Video, Fullscreen, localStorage

Body Browser



WebGL 3D

GlobeTweeter



WebGL 3D, WebSockets, geolocation
by @trigrou

HTML5 examples



GAMES

Zynga



Offline, WebSockets, CSS3...

Quake 2 GWT



WebGL, WebSockets, WebStorage...

MarbleSoccer



WebGL, Gyroscope, Fullscreen...
by @jetienne

Angry birds



Offline, Canvas, Storage

HTML5 QuickStart


  • Start with HTML5 Boilerplate

  • Or Initializr (lighter)

  • Good practices, graceful degradation
  • Server configs, htaccess, jQuery
  • Modernizr, default icons, reset CSS...

Tips


  • Avoid IE<9 to prevent headeaches

  • Replace presentational tags with CSS

  • Use <div> only when necessary

  • Load polyfills if needed (yepnope.js)

  • For IE : Html5shiv, Modernizr, CSS3pie...

Links

THE END

Thanks !


reveal.js by Hakim El Hattab / hakim.se
John / HTML5 meetup