Vous êtes ici > CSS Débutant | Paris-Web | Plus belle la vie avec HTML5 et CSS3

ParisWeb 2010 : Atelier « Plus belle la vie avec HTML5 et CSS3 »

Cet atelier d'1h30 s'est déroulé le 16 octobre 2010 lors de la cinquième édition de Paris Web, chez Télécom ParisTech.

Animateurs


© Izo

Diaporama de la présentation

Exercices d'application à partir d'idées reçues

Le HTML5, c'est encore trop tôt ! (diapos 3 à 11)

Exercice 1 : Doctype html5

Consigne : Il s'agit simplement de modifier les 2 premières lignes du fichier html proposé afin de modifier le doctype.

<!DOCTYPE html>
<html lang="fr">

Trop dur... ;-)

Même sans utiliser des balises spécifiques au html5, ce doctype peut être utilisé dés à présent. Il convient quelque soit la version du navigateur, et ne fait même pas passer IE6 en mode Quirks. Dingue nan ?

Haut

Exercice 2 : Le HTML5 et IE

Pour que IE (jusqu'à la version 8 incluse) reconnaisse les balises <header>, <aside>, <footer>, etc., il faut lui coller un petit script javascript dans un commentaire conditionnel adapté. Pas compliqué le script (même moi je le comprends, c'est dire !), mais l'inconvénient est évidement pour l'internaute qui utilise IE avec le javascript désactivé.

<!--[if IE]>
 <script src="/html5-ie.js"></script>
<![endif]-->

Extrait du contenu du fichier js :

document.createElement("header");
document.createElement("aside");
document.createElement("footer");

Pour les autres navigateurs, ces éléments sont par défaut de type inline. Il faudra donc les déclarer de type block dans la feuille de style.

 header, footer {
 display:block;
 }

Consignes :

  1. Dans le HTML, remplacer les div id="header", id="aside" et id="footer" par leurs équivalents fonctionnels en HTML5
  2. Les afficher correctement sur tous les navigateurs (display: block)
  3. Pour IE, créer ou appeler le script http://html5shiv.googlecode.com/svn/trunk/html5.js

Haut

Le HTML5, c'est juste de nouvelles balises ! (diapos 12 à 16)

Exercice 3 : éditer du contenu

A l'aide de l'attribut contenteditable à laquelle on applique la propriété true, on permet au visiteur d'éditer et de modifier le contenu de l'élément ciblé. Ce nouveau contenu sera gardé en mémoire... jusqu'au prochain changement.

<p contenteditable="true">Ce contenu peut être modifié</p>

Consigne : Rendre le texte du titre (h1) éditable.

Haut

La vidéo

Contre-exercice : il n'y a rien à faire... qu'admirer ;-)

Le code utilisé :

<video width="400" height="222" controls="controls"> 
 <source src="http://www.nicolas-hoffmann.net/animations/Cavernae_Terragen2.mp4" type="video/mp4" />
 <source src="http://www.nicolas-hoffmann.net/animations/Cavernae_Terragen2.webm" type="video/webm" />
 <source src="http://www.nicolas-hoffmann.net/animations/Cavernae_Terragen2.theora.ogv" type="video/ogg" /> 
 <object type="application/x-shockwave-flash" width="400" height="222" data="http://www.youtube.com/v/HVMoJqg41Bw"> 
 <param name="movie" value="http://www.youtube.com/v/HVMoJqg41Bw" />
 <param name="wmode" value="transparent" />
 <!--[if lte IE 6 ]>
 <embed src="http://www.youtube.com/v/HVMoJqg41Bw" type="application/x-shockwave-flash" allowscriptaccess="always"
 allowfullscreen="true" width="400" height="222"></embed>
 <![endif]-->
 <p>Vous n'avez pas de navigateur moderne, ni flash d'installé sur Internet Explorer... 
 suivez les liens ci-dessous pour télécharger les vidéos.</p>
 </object> 
</video>

Haut

CSS est trop jeune, encore inutilisable (diapos 20 à 25)

Exercice 5 : utiliser des polices exotiques

Avec @font-face, qui permet d'utiliser autre chose que les polices couramment installées sur les ordinateurs, on serait plutôt dans le registre du vieux puisque cela existe depuis... les CSS2 !
Pour l'utiliser, 2 solutions :

  1. Aller sur Font Squirrel avec sa police de caractère (libre de droit ou duement achetée) qui va vous donner tout ce qu'il faut comme code et fichiers à copier-coller,
  2. Utiliser la Google Font Directory.

Consigne : Appliquez la police Lobster au titre principal à l'aide du code fourni par Google Font Directory

Haut

CSS3, c'est que de la déco, nan ? (diapos 26 à 30)

Exercice 6 : les medias-queries

Les medias-queries permettent d'adapter l'apparence d'une page en fonction de divers critères comme la taille de l'écran, le type de média ou l'orientation de celui-ci (dans le cas de smartphone), etc.

La syntaxe est du type :

@media only screen and (max-width:800px) {
 body {
 background-color:black;
 color:white
 }
}

Consignes : Modifier le design selon la taille du média

  1. Lorsque la taille de la fenêtre est inférieure à 640 pixels, la partie "aside" doit revenir dans le flux au-dessus du bloc "content".
  2. Lorsque la taille de la fenêtre est inférieure à 640 pixels, la couleur de l'arrière-plan des paragraphes doit devenir noire, la couleur des textes doit devenir jaune.

Haut

Exercice 7 : faites des enfants

À l'aide de la pseudo-classe nth-child, on peut appliquer des styles, à des éléments enfants, définis de façon arithmétique (ah oui, j'ai dit arithmétique. Z'avez pas fini d'en baver avec les maths).

Pour rendre rouge toutes les cellules de colonnes paires d'un tableau, par exemple, la syntaxe sera la suivante :

td:nth-child(2n) {	
background-color:red;
}

Consigne : Dans le tableau : colorer les cellules des lignes (tr) impaires (2n+1) du tableau en #eee et les cellules des lignes paires (2n) en #ddd

Haut

Contact : pascale at mammouthland.net

Creative Commons License

En cas de reproduction (partielle ou totale) de cet article, prière de faire un lien vers la page originale : http://css.mammouthland.net/parisweb/html5-css3-plus-belle-la-vie.php