HTML5
&
CSS3

~1991 : HTML1

~1993 : HTML2

~1995 : HTML3

~1999 : HTML4

~2000 : XHTML1

...

~2008 : HTML5

Nouveaux éléments

Formulaires avancés

Audio et vidéo

Play
Pause
Accès direct

Filtres SVG

Démo Mozilla

Contenu modifiable

Un paragraphe normal

Un paragraphe éditable

Drag and drop

File API

Démo Mozilla

Accélération matérielle

Démo Microsoft

Canvas

Démo deviantART Démo Blob

Canvas 3D

Démo Maths Démo Photos Démo spectre audio

Géolocalisation

Démo Google Maps

Et j'en oublie...

CSS3 !

Coins arrondis

Sans modifier
le HTML

Ombres portées

Pas besoin d'image non plus

Dégradés dynamiques

Et en plus c'est extensible !

Animations

Cliquez moi !

Background dynamique

Démo reflets

@font-face

Pur texte

Toujours pas d'images !

Text shadow

Ombres dynamiques

Media Queries

Résolution, orientation...

Démo A List Apart Démo dConstruct

Texte en colonnes

1
2
3
4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque justo tortor, posuere ac gravida id, rutrum at diam. Aliquam eu tortor sit amet magna ultrices porta non sed purus. Sed sit amet dictum magna. Suspendisse pulvinar imperdiet lorem sit amet suscipit. Vivamus sit amet adipiscing magna. Aenean lacus erat, adipiscing sit amet venenatis vel, mattis ac justo. Proin consequat commodo nibh, in convallis arcu convallis at. Phasellus ac mauris vel felis laoreet pulvinar. Aliquam sodales imperdiet ante, ut suscipit sem placerat eu. Nam tempor tellus adipiscing lectus hendrerit vel sagittis turpis bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque justo tortor, posuere ac gravida id, rutrum at diam. Aliquam eu tortor sit amet magna ultrices porta non sed purus. Sed sit amet dictum magna. Suspendisse pulvinar imperdiet lorem sit amet suscipit. Vivamus sit amet adipiscing magna. Aenean lacus erat, adipiscing sit amet venenatis vel, mattis ac justo. Proin consequat commodo nibh, in convallis arcu convallis at. Phasellus ac mauris vel felis laoreet pulvinar. Aliquam sodales imperdiet ante, ut suscipit sem placerat eu. Nam tempor tellus adipiscing lectus hendrerit vel sagittis turpis bibendum.

Avantages

Productivité

Exemple : ombres

à l'ancienne

  • 8 balises HTML
  • 8 lignes CSS
  • 8 images

En CSS3

  • 1 balise HTML
  • 1 ligne CSS
  • 0 image

Flexibilité

Maintenance

Exemple : Twitter

Performances

Prêt pour le mobile

Oui, mais...

Le cas Internet Explorer

La guerre des navigateurs

Faciliter la transition

Hacks

Amélioration progressive
&
Dégradation maîtrisée

Twitter sur IE

Twitter sur Firefox

Google Maps

Internet Explorer

FF, Chrome, Safari...

Support du HTML5

html5readiness.com

Microsoft

Mozilla

Google

Apple

Opera

THE END

 

Plus de démos sur :

hacks.mozilla.org

chromeexperiments.com

 

Réalisé avec DZ Slides