html5, le nouveau buzzword

Collège ISI - 2011-07-27

Frédéric Harper

HTML5, le nouveau buzzword

Le type en avant

Frédéric Harper

Évangéliste aux développeurs @ Microsoft

fredh@microsoft.com

Blogues, réseaux sociaux, contact…

http://fredericharper.com

Les règles

#1 – Présentation de style camp

#2 – La loi des deux pieds

La présentation

1. Qu’est-ce qu’HTML5?

2. À titre d’étudiant, dois-je m’en soucier?

HTML5 et vous

A. Vous l’utilisez

B. Vous connaissez et vous allez l’utiliser

C. … et vous n’allez pas l’utiliser

D. Vous ne savez pas de quoi je parle

HTML5

• Standard Web

• La version suivante d’HTML4 (Je sais, je suis si brillant)

• Brouillon

• 9 nouvelles structures de tags

• 16 nouveaux éléments HTML

• 13 nouveau type d’entrées (input types)

Démo

header, footer, nav,

aside, figure,

section, article

<div id=“header”>

<div id=“footer”>

<div id=“sidebar”>

<div id=“nav”>

<div id=“article”>

<div id=“article”>

<div id=“media”>

<div id=“section”>

Site Web traditionnel

<header>

<footer>

<aside>

<nav>

<article>

<article>

<figure>

<section>

Site Web HTML5 (sémantique++)

svg

Démo

Code

<svg width="400" height="200">

<rect fill="red" x="20" y="20" width="100"

height="75" />

<rect fill="blue" x="50" y="50" width="100"

height="75" />

</svg>

canvas

Démo

Code

<canvas id=“monCanvas" width="200" height="200">

Désolé, votre navigateur ne supporte pas HTML5

</canvas>

<script type="text/javascript">

var exemple = document.getElementById(“monCanvas");

var contexte = exemple.getContext("2d");

contexte.fillStyle = "rgb(255,0,0)";

contexte.fillRect(30, 30, 50, 50);

</script>

video, audio

Démo

Code

<video src="video.mp4" id=“tagVideo">

<source src="video.webm" />

<a href="http://videolink.com/">

Désolé, votre navigateur ne supporte

pas HTML5

</a>

<!– Vidéo Flash/Silverlight ici -->

</video>

Code

<audio src="audio.mp3" id=“tagAudio"

autoplay controls>

<!– Audio Flash/Silverlight ici -->

</audio>

Géolocalisation

Démo

Code

function getLocation() {

if (navigator.geolocation != undefined) {

navigator.geolocation.getCurrentPosition(callBack);

}

}

function callBack(position) {

var accuracy = position.coords.accuracy;

var latitude = position.coords.latitude;

var longitude = position.coords.longitude;

}

Web Open Font

Format aka WOFF

Démo

Code

<style type="text/css">

@font-face {

font-family: MonFont;

src: url('Font.woff');

}

</style>

<div style="font: 24pt MonFont, sans-serif;">

J’ajoute mon texte ici comme d’habitude

</div>

CSS3 Media

Queries

Démo

Code

<link href="mobile.css" rel="stylesheet"

media="screen and (max-width:480px)“

type="text/css" />

<link href="netbook.css" rel="stylesheet“

media="screen and (min-width:481px) and (max-

width: 1024px)“ type="text/css" />

<link href="laptop.css" rel="stylesheet"

media="screen and (min-width:1025px)“

type="text/css" />

Libérez la vrai

puissante du Web

Alors, est-ce qu’HTML5 est prêt?

OUI et NON

Une solution, les polyfills

Un correctif qui imite une API future,

offrant des fonctionnalités de secours

pour les navigateurs plus anciens.

Je suis un étudiant

Vous utilisez probablement déjà HTML

Pensez site Web ET mobile

Surveillez les nouvelles technologies

Une façon de sortir du lot

Prochaines étapes

Essayez le

Lisez sur le sujet

Faire un projet extraordinaire

Ayez du plaisir!

Ressources

http://www.w3.org/TR/html5/

http://caniuse.com

http://makeawesomeweb.com

http://html5gallery.com

http://html5labs.interoperabilitybridges.com/

http://www.beautyoftheweb.com

Questions? Commentaires?

Frédéric Harper Évangéliste aux développeurs @ Microsoft

fredh@microsoft.com

Blogues, réseaux sociaux, contact…

http://fredericharper.com

http://linkedin.com/in/fredericharper

http://twitter.com/fharper

http://facebook.com/fharper