&

< Bertrand Hubert /> // 2012

Au sommaire

Prsentation sur les possibilits du HTML5 et CSS3

De quoi parle-t-on ?
Ce qui va changer
Les enjeux
Play HTML : Exemples
Orienter les projets web vers
Ressources

I - De quoi parle-t-on ?

< GENESE HTML />

I - De quoi parle-t-on ?
HTML : HyperText Markup language / Langage de balisage hypertexte
Langage invent par Tim Berners-Lee (1989) pour lier ensemble des documents
lectroniques avec des options de mise en forme limites.

HTML est un langage pour dcrire lagencement dune page et les lier entre
elles.
Grce lHTML on a :
Un web puissant et pratique (# ligne de commande)
Un systme relativement simple de code de texte en clair (affichage
de la structure)
Une explosion du web et des documents mis en ligne par les
utilisateurs

< Les pages web deviennent universelles />

I - De quoi parle-t-on ?

< LES NAVIGATEURS />

I - De quoi parle-t-on ?
La guerre des navigateurs
Apparition dune multitude de navigateurs avec lmergence de fonctionnalits propres

1993 : Mosaic (possibilit dinsrer des images)

1994 : Netscape Navigator Navigateur web succs
Cration du W3C (1994) pour travailler sur une norme (Crateur Tim Berners-lee)
1995 : Arrive dInternet Explorer

Dbut dune lutte pour imposer une vision propritaire du web sans prise en considration (ou trs
peu) de la norme W3C
Mais aussi volution : HTLM2 (95) // HTML3 (97) // HTML4 (98)
En 2002 : Internet Explorer reprsentait 95% des utilisateurs (IE6)
< Microsoft maitrise lavenir de lHTML />

I - De quoi parle-t-on ?
Le libre contre-attaque
mergence de nouveaux navigateurs

2004 : Firefox
avec le respect des normes W3C & fonctionnalits innovantes

mais aussi Safari, Opra

2007 : Netscape disparait en 2007

2008 : arrive de Google via son navigateur Chrome

I - De quoi parle-t-on ?
Le retour de la norme
Bilan dune dcennie de concurrence de visions web :
Vision propritaire (Microsoft) VS Navigateurs respect W3C (Firefox)
Rsultat : Microsoft se doit dvoluer vers les normes W3C
www.evolutionofweb.appspot.com

I - De quoi parle-t-on ?
Information : Rpartition des navigateurs sur les quipements
(Fixe & Mobile)

I - De quoi parle-t-on ?
< HTML4 />

< HTML5 />

I - De quoi parle-t-on ?
De lHTML4. vers lHTML5
1 - Aujourdhui HTML 4 est inapte supporter les dveloppements du web moderne (scurits, fonctionnalits,
applications). Il nest dsormais plus satisfaisant pour lagencement des pages et la gestion des polices.
2 En 2002, le W3C introduit le XHTML (HTML adhrent aux normes de lXML) mais sans ladhsion des
navigateurs (trop tolrants la mauvaise syntaxe).
Succs des plugins et usage populaire des applets Java et du Flash
Cration dun nouveau groupe de travail indpendant : WHATWG
(Web hypertext Application Technology Working Group) - Mozilla, Opra, Apple, .
Objectif : dveloppement de nouvelles technologies destines faciliter l'criture et le dploiement
d'applications travers le Web
Le W3C abandonne le projet XHTML2 et rejoint le WHATWG pour participer au travail en cours sur HTML5
(07/2009).
OBJECTIF HTML5 : cration dun cadre pour dvelopper des applications web.

I - De quoi parle-t-on ?

< HTML /> + <CSS />

I - De quoi parle-t-on ?
Rappel sur HTML // CSS : le fond et la forme
/> HTML
/> CSS

= le contenu
= la prsentation

- Les CSS sont apparus lors de la guerre des navigateurs (un CSS utilisant les normes
du navigateur).
Le W3C associa rapidement le CSS1 HTML.
volution en CSS2 (positions, accessibilit )

linstar de lHTML5, le CSS3 fait lobjet dun travail

en ce qui concerne sa norme.

FIN DE LHISTOIRE

II Ce qui va changer

< HTML />

Web de demain

II Ce qui va changer
Avant de commencer
Le W3C a annonc que la version finale de HTML5 ne sappellera pas HTML5 mais simplement HTML.
Objectif dune norme finalise et universelle
HTML5 est, au final, lintgration de plusieurs technologies diffrentes :

HTML, CSS, JAVASCRIPT et des technologies ct serveur

Ce qui nous attend avec cette norme

Un langage simple
Un balisage bas sur la smantique (= se baser sur la signification plutt que le dtail // ex : <h1> )
Utilisation du CSS pour les dtails de style
Les pages sont souvent des applications (Ex formulaire + dinteraction internaute)
Javascript est central

SO WHATS NEW ?

II Ce qui va changer
DOCUMENT
Dclaration de document :

Avant
<!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">

---------------------------Aprs

<!DOCTYPE html>

II Ce qui va changer
CODE OPTIMIS
Caractristiques :

lments smantiques

lments mdias

Nouveaux formulaires

Applications

lments redfinis

Suppression dlments
+ Accessibilit
+ Rfrencement
+ Chargement rapide des pages
+ Mobilit (3G / 4G)
Exemple : les nouveaux sites pourront adopter les balises telles
que <header> pour remplacer les <div id= "header"> que l'on trouve sur la
plupart des sites construits actuellement.

Utiliser uniquement HTML en natif, au lieu d'y implmenter toute

une srie de plugins JavaScript voire d'extensions propritaires.

II Ce qui va changer
CODE

II Ce qui va changer
<VIDEO>
Formats : OGG, MP4, WebM
Syntaxe simple :
<video controls src="video.ogv">Ici la description alternative</video>

Accs des sources multiples

On peut galement proposer plusieurs sources dans plusieurs
formats diffrents en indiquant les formats :
<video width="400" height="222" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
Ici l'alternative la vido : un lien de tlchargement, un message, etc.
</video>

+ Alternative au Flash
- Pas de protection du fichier au tlchargement
+ Plus dinfos : http://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html

II Ce qui va changer
<AUDIO>
Format : OGG, MP3, WAV
Syntaxe simple :
<audio src="elvis.ogg" controls preload="auto"autobuffer></audio>

Accs des sources multiples

On peut galement proposer plusieurs sources dans plusieurs formats
diffrents en indiquant les formats :
<audio controls preload="auto" autobuffer>
<source src="elvis.mp3" />
<source src="elvis.ogg" />
</audio>

+ Alternative au Flash
- Pas de protection du fichier au tlchargement
+ Plus dinfos : http://html5doctor.com/native-audio-in-the-browser/

II Ce qui va changer
<FORMULAIRE>

Amliorer l'aide la saisie et les contrles disponibles pour

l'utilisateur.

Des attributs simples mettre en place amliorent la prise en

charge des formulaires.

Se passer de JavaScript.

II Ce qui va changer
<APPLICATION>
Le canvas : L'lment <canvas> a t introduit afin de pouvoir crer des
lments graphiques 2D en Javascript. Il permet de mettre en place une zone
pour les dessins ou les applications graphiques ou complexes.

Des applications web hors-ligne (Offline & Storage)

Une API permet d'activer les applications web hors connexion.
Exemple : lecture ou usage dun blog en cache

Drag n Drop : glisser-dposer des lments

http://www.script-tutorials.com/demos/255/index.html

II Ce qui va changer
<GEOLOCALISATION>
Nouvelles fonctionnalits introduites par la mobilit
Ses usages sont nombreux et souvent relis des bases
de donnes de renseignements gographiques :

Plans interactifs
Renseignements locaux en mobilit
Recherche contextualise sur les moteurs
Mta-informations jointes aux photos vidos

DIS MOI O TU ES, JE TE DIRAI CE QUE JE PEUX TE VENDRE

Possibilit dinterfacer cette fonction avec des API (Ex : API Google)
Prise en charge de la confidentialit de la golocalisation (navigateur ou mobile)

+ Plus dinfos : http://www.alsacreations.com/tuto/lire/926-geolocalisation-geolocation-html5.html

II Ce qui va changer
<CSS3 STYLE>
Amliorer les rendus graphiques qui ncessitaient jusqu prsent lutilisation dimages.

Gain de productivit :
- Code simple rapide codage
Gain de maintenance
- Changement de style
Gain de bande passante
- Mobilit (code/images)
Quelques exemples :
1. Border Radius
2. Border Image
3. Box Shadow and Text Shadow
4. Easy Transparency with RGBA and Opacity
5. Custom Web Fonts with @Font-Face

II Ce qui va changer
<CSS3 STYLE>
Automatiser des effets visuels qui ncessitaient jusqu
prsent lutilisation :

dimages,
de scripts
ou de modifications du code HTML.

Exemple en ligne :
http://designlovr.com/examples/dynamic_stack_of_index_cards/

Dautres nouveauts CSS3 en 20 exemples :

http://www.jonathan-menet.fr/blog/2010/08/07/les-nouveautesde-css3-en-20-exemples/

III Les enjeux

< FOCUS ON/>

III Les enjeux

1 // DES PROJETS DE PLUS EN PLUS ACCESSIBLES
Mettre le web et ses services la disposition de tous les individus, quels
que soient leur matriel ou logiciel, leur infrastructure rseau, leur langue
maternelle, leur culture, leur localisation gographique ou leurs aptitudes
physiques ou mentales.
Tim Berners Lee

http://www.journaldunet.com/developpeur/client-web/accessibilite-web-de-html5/

III Les enjeux

2 // UN RFRENCEMENT AMLIOR
Un code pour une meilleure lisibilit des rfrenceurs
(Robot crawling compatibility)

III Les enjeux

3 // DES PROJETS RESPONSIVE WEB DESIGN
Une nouvelle philosophie de cration de site
www.slideshare.net/agencedagobert/le-responsive-design-par-dagobert

Prvoir des projets, HTML5/CSS3, cest rendre accessible lexprience utilisateur sur les
moyens daccs actuels (Ordinateur, Tablette, Smartphone, Liseuse)

III Les enjeux

4 // DES PROJETS REPONDANT AUX DEMANDES VISUELLES
DES COMMUNICANTS

Que les apparences soient belles car on ne juge que par elles
Roger de Bussy-Rabutin (17e sicle)
http://www.ultranoir.com/fr/

III Les enjeux

5 // MOBILITE : UNE NAVIGATION PLUS RAPIDE (3g & 4g)
Navigation lente
Exprience non satisfaisante
(Objectif 4G : Accs Mdias)

Explosion de la mobilit
Nomobophobie
no mobile phobia

IV PLAY HTML

< EXEMPLES />

IV PLAY HTML
VOIR SUR LE WEB : LES AWARDS
www.awwwards.com
HTML5 : http://www.awwwards.com/tag/html5
CSS3 : http://www.awwwards.com/tag/css3

The awards for design, creativity and innovation on the Internet,

which recognize and promote the best web designers in the world

IV PLAY HTML

HTML5. 3D interactive world & WebGL

// Les objets de la vido ragissent la
fois la musique comme aux
instructions utilisateurs

http://www.ro.me/

IV PLAY HTML

http://www.ultranoir.com/fr/

IV PLAY HTML

http://naturevalleytrailview.com

IV PLAY HTML

http://www.marcusthomasllc.com

IV PLAY HTML

http://www.loisjeans.com/web2012/es

IV PLAY HTML
DES RESSOURCES EN LIGNE

http://beta.rdsign.net/exemple/CSS3FullscreenSlideshow/

V Orienter les projets web

vers

< Y ALLER ? />

V Orienter les projets web

vers
PASSER A HTML5 ?

http://ishtml5readyyet.com/

V Orienter les projets web

vers
PASSER A HTML5 ?...... NON

Pourquoi ?

- Code non finalis

- Peu dapplications (vs flash)
- Inadapt selon les demandes (scurit, tlchargement)
- Problmatique des navigateurs
- Mise niveau des dveloppeurs

http://ishtml5readyyet.com/

V Orienter les projets web

vers
PASSER A HTML5 ?

OUI
The future is already here.
Its not very evenly distributed.

Le futur est dj l. Tout le monde ny a pas encore accs.

William Gibson
Ecrivain Amricain de science fiction des annes 70
Fonde le Le courant Cyberpunk , univers o le dingue d'informatique et le rocker se rejoignent dans un bouillon de culture.

V Orienter les projets web

vers
PASSER A HTML5 ?...... OUI
- Un code plus rapide que ses prdcesseurs (moins d'images, moins de code,
moins de fichiers flash)
- Des formulaires galement plus efficaces et plus faciles utiliser pour les
internautes

- Une alternative Adobe Flash, Google Gears ou encore Microsoft silverlight

pour mettre des animations sur son site
- Un code harmonis pour laccs selon les supports (smartphones) et leurs
applications
- Une syntaxe facile acqurir pour les dveloppeurs

V Orienter les projets web

vers
PASSER A HTML5 ?...... retenir
HTML5 propose de nouveaux lments trs pratiques qui ont pour objectif
d'harmoniser les mdias et de structurer la mise en page par des lments plus
"smantiques".
Il permettra galement de faciliter sensiblement l'accessibilit au contenu et
l'interoprabilit tant donn que les formats propritaires tels que Flash ou
SilverLight pourraient tre concurrencs par des lments tels que <audio> ou
<video>.
De plus, l'analyse des pages par des robots ou par des synthtiseurs vocaux sera
facilite par les lments <header>,<nav>.

DES SITES INTERNET DE QUALIT

V Orienter les projets web

vers
Mais surtout
Rester en amont de la vague
tre dans le coup

V Orienter les projets web

vers
> POINT SUR LES NAVIGATEURS
Parmi les 130 proprits et 35 slecteurs nouveaux, une
majorit est dj reconnue par les navigateurs actuels :

Firefox 4+
Chrome 10+
Opra 11+
Safari 5+
Internet Explorer 10

Zoom sur IE et CSS3

IE6 : 4% des proprits et 0% des slecteurs
IE7 : 5% des proprits et 5% des slecteurs
IE8 : 6% des proprits et 5% des slecteurs
IE9 : 16% des proprits et 50% des slecteurs
IE10 : 50% des proprits et 80% des slecteurs

V Orienter les projets web

vers
> RAPPEL SUR
LES NAVIGATEURS

ESTIMATION
34% des sites
utilisent des
lments HTML5

V Orienter les projets web

vers
> POINT SUR LES MEDIAS

VI voir sur le net

< RESSOURCES />

VI voir sur le net

Valider son code
http://validator.w3.org

Gnrateur instantan et multi-navigateurs d'effets CSS3

www.CSS3please.com

Analyser son site, HTML5 est il risqu

http://html5please.com/

Reconnaissance de HTML5 et CSS3 sur les navigateurs

www.findmebyip.com/litmus

Compatibilit des navigateurs mobiles

http://mobilehtml5.org/

HTML5 Convertissez vos vidos et uploadez les.

http://korben.info/easy-html5-video.html
http://korben.info/migration-html5-video.html

HTML 5 Doctor
http://html5doctor.com/
HTML 5 W3C Working Draft
http://dev.w3.org/html5/spec/Overview.html
Web Forms 2.0 spec
http://www.whatwg.org/specs/web-forms/currentwork/

Astuces navigateurs
http://docteurhtml5.com/html5/comment-fairefonctionner-le-html5-dans-ie-et-firefox/

< MERCI />

bnsa@aquitaine.fr

facebook.com/BnsAquitaine

@bnsaquitaine
< Bertrand Hubert /> // 2012