parisweb 2006 - Mammouthland

1, 2, 3, CSS !
PARIS WEB 2006
Présentation
Pascale Lambert-Charreteur
Enseignante dans l'académie de Rouen,
Formatrice TICE et webmestre,
Rédactrice des cours « CSS débutant » de Mammouthland,
Cofondatrice de la liste de discussion « Pompeurs-CSS »,
Membre du collectif OpenWeb.
PARIS WEB 2006
Un peu d'histoire...
1989 : Invention du WEB par Tim Berners Lee,
chercheur au CERN.
1990 : Sortie de WorldWideWeb (NEXUS), le premier
navigateur.
1993 : Diffusion de MOSAIC le premier navigateur
grand public.
1994 : Fondation du World Wide Web Consortium
(W3C) et publication des premières recommandations.
PARIS WEB 2006
Un peu d'histoire...
1996 : Sortie des premières
recommandations CSS 1.
1998 : Recommandations
CSS 2.
2000 : Début du
développement des
recommandations CSS 3.
1996 : Netscape 3 et MSIE 3
voient le jour.
1997 : Sortie des versions 4 de
Netscape et de MSIE. Le support
des CSS 1 est partiel.
1999 : Sortie de MSIE 5 qui
améliore son support des CSS.
Fin 2000 : Sortie de Netscape 6
prenant en charge les CSS2
PARIS WEB 2006
Et depuis l'an 2000 ?
2001 : Lancement de MSIE 6 – Toujours en distribution
sous cette version.
2002 : Lancement de Mozilla 1.0 – Version actuelle 1.7.x
2003 : Lancement de Opéra 7 – Version actuelle 9.x.
Lancement de Safari (pour Mac) – Version actuelle 2
2004 : Lancement de Firefox 1.0 – Version actuelle 1.5.
Tous ces navigateurs supportent les CSS2, même si l'on
constate des différences de comportement entre eux.
PARIS WEB 2006
Les CSS, pourquoi ?
CSS
HTML
HTML
HTML
HTML
HTML
L'utilité d'une feuille de style est de séparer le contenu et la présentation.
Cela implique en premier lieu d'utiliser un code sémantiquement correct et
d'éviter la mise en page par tableaux.
PARIS WEB 2006
Les CSS, pourquoi ?
CSS
HTML
HTML
HTML
HTML
HTML
Conséquences :
Code html plus léger, plus clair :
➔ maintenance plus aisée pour le webmestre
➔ page plus rapide à charger donc plus de confort pour l'usager
➔ économie de bande passante, donc réduction des coûts
Possibilité d'adapter le rendu des pages à différents périphériques (écrans de différentes
résolutions, lecteurs braille ou à synthèse vocale, imprimante...)
Un seul fichier à modifier pour le design plutôt que chaque page du site.
PARIS WEB 2006
Etude de cas
http://www.education.gouv.fr/
PARIS WEB 2006
Etude de cas
Fichiers :
➔ Version HTML : HTML 4.01
➔ Fichier HTML : 33 ko
➔ Images dans le code HTML : 23 fichiers (74ko)
➔ Présence d'une feuille de style
Rapport de vitesse :
➔ 56K : 23,8 s
➔ ADSL 128 K : 7,4 s
Validation W3C : Document non valide (élements obsolètes, textes alternatifs
manquants, attributs non correctement utilisés...)
Accessibilité : Page n'atteignant pas le niveau d'accessibilité A (WCAG priorité 1)
PARIS WEB 2006
Etude de cas
CSS1 :
En tête
➔
Polices de
caractère (titres,
paragraphes, liens)
➔
Couleurs (titres,
paragraphes, liens,
bordures)
Rubriques
Actualités
➔
Aspect des listes
➔
Certaines images
(images de fond,
puces)
CSS2 :
➔
Positionnement
PARIS WEB 2006
Etude de cas
Etape 1 : le code HTML
<table width="50" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4" class="fondBarre"><spacer type="block" width="1" height="1"></td>
<td width="1" rowspan="112" class="fondBarre"><img src="/_gfx/trans5.gif" alt="" width="1" height="1" border="0"></td>
</tr>
<tr>
<td width="11" class="puceSection"><img src="/_gfx/puc_titre_section0.gif" alt="rubrique" width="10" height="17" border="0"></td>
<td colspan="3"><a class="titreSection" href="/ministere.htm" >&nbsp;&nbsp;Ministère&nbsp;</a></td>
</tr>
.liensSection {
<tr>
font:8pt height="1"></td>
verdana, sans-serif;
<td class="fondTitreClair"><spacer type="block" width="1"
color:#990033;
<td colspan="2" class="fondTitre"><spacer type="block"
width="1" height="1"></td>
vertical-align:top;
</tr>
}
<tr>
<td class="puceSection">&nbsp;</td>
<td width="40" class="petite">&nbsp;</td>
<td class="liensSection" colspan="2"><a href="/ministre/default.htm" ><img src="/_gfx/puc_type1.gif" alt="" width="8" height="9"
border="0">le ministre</a> : <a href="ministre/agenda_ministre.htm">agenda</a> - <a
href="ministre/de_robien/deplacement/default.htm">l'actu en images</a><a href="/ministre/francois_goulard.htm" > <img
src="/_gfx/puc_type1.gif" alt="" width="8" height="9" border="0">le ministre délégué</a> <br>
<a href="/syst/organigramme.htm" ><img src="/_gfx/puc_type1.gif" alt="" width="8" height="9" border="0">organigramme</a> <a
href="/histoire/visite/default.htm" ><img src="/_gfx/puc_type1.gif" alt="" width="8" height="9" border="0">visite virtuelle</a> <a
href="/histoire/default.htm" ><img src="/_gfx/puc_type1.gif" alt="" width="8" height="9" border="0">historique</a></td>
</tr>
<div id="rubriques">
<h2><a href="ministere.htm">&nbsp;&nbsp;Ministère&nbsp;</a></h2>
<ul>
<li><a href="/ministre/default.htm">le ministre</a> : <a href="ministre/agenda_ministre.htm">son agenda</a> - <a
href="ministre/de_robien/deplacement/default.htm">l'actu en images</a></li>
<li><a href="/ministre/francois_goulard.htm">le ministre délégué</a></li>
<li><a href="/syst/organigramme.htm">organigramme</a></li>
<li><a href="/histoire/visite/default.htm">visite virtuelle</a></li>
<li><a href="/histoire/default.htm">historique</a></li>
</ul>
PARIS WEB 2006
Etude de cas
Etape 2 : disposition des cadres
Etape 3 : mise en forme
/*En tête*/
#header {
width:760px
}
/*section rubriques*/
#rubriques h2
{
background:url(puc_titre_section0.gif) no-repeat 0 50%;
padding-left:11px;
margin:0;
font-size:80%;
border-bottom:1px solid #D1DD69;
width:60%;
padding-bottom:1px;
}
#rubriques h2 a {
color:#909F14;
text-decoration:none;
border-bottom: 2px solid #D1DD69;
}
#rubriques ul {
margin-top:0;
border-bottom:1px solid
#D1DD69;
margin-left:50px;
}
#rubriques li {
background:url(puc_hp_liens.gif) no-repeat 0% 50%;
padding-left:10px;
display:inline;
font-size:70%;
color:#990033;
line-height:13px;
margin:1px;
}
#rubriques li a, a {
color:#990033;
text-decoration:none;
}
/*section rubriques*/
#rubriques {
background:#FFFFF7 url(fond-rub.gif);
position:absolute;
width:505px;
border:solid #B2C705;
border-width:1px 1px 1px 0px;
margin-top:20px;
padding-bottom:20px;
z-index:2;
}
/*section actualités*/
#news {
background:url(bac_E.gif) no-repeat 100% 0;
position:absolute;
width:175px;
left:502px;
z-index:1;
padding-top:20px;
}
PARIS WEB 2006
Etude de cas : le bilan
Images
Fichiers html
(html + CSS)
(ko)
ko
Version originale
Version CSS
Gain
Validation W3C
33
11
67%
Temps de connection
74
51
31%
56K (s)
23,8
13,4
44%
128K (s)
7,4
4,3
42%
: Document valide xhtml 1.0 strict
Accessibilité : Page atteignant le niveau d'accessibilité AA (WCAG priorité 2)
PARIS WEB 2006
Le résultat
Version
originale
CSS
PARIS WEB 2006
Les CSS alternatives
CSS
alternative
HTML
HTML
CSS
print
CSS
HTML
HTML
HTML
On peut créer des feuilles de style alternatives :
feuille de style alternative de design (différents positionnements, couleurs, etc.)
feuille alternative pour d'autres médias :
➔ feuille de style auditive,
➔ feuille de style pour un écran de portable,
➔ feuille de style pour imprimante,
➔ ...
PARIS WEB 2006
L'impression
La mise en page pour un écran est rarement adaptée à
l'impression.
La feuille de style d'impression permet d'adapter la mise en
forme de la page à une version papier.
Aperçu
d'impression
originale
PARISpage
WEB
2006
Avec feuille
de style
PARISd'impression
WEB 2006
Résumé des fonctions CSS2
Les positionnements (absolus, relatifs ou fixes),
Les types de médias (aural, braille, handled, print, projection, screen,
tty, tv),
Combinateurs descendants, enfants, adjacents ; sélecteurs d'attributs
Mise en forme des tableaux (aspect des bordures, alignement du texte
dans les cellules...),
Pseudo classes (:hover, :focus, :after, :before, :lang, :first-child ),
Largeurs et hauteurs minimales ou maximales d'un élément,
Compteurs à numérotation automatique,
Aspect de curseurs,
Prise en compte des textes bidirectionnels,
...
PARIS WEB 2006
Nouveautés CSS3
Plus de sélecteurs (combinateurs, pseudo-classes),
Médias queries (feuille de style adaptée à la résolution de l'écran par ex.)
Multicolonnage,
Plusieurs images de fond pour le même élément,
Coins arrondis,
Plus de sortes de bordures, bordures en images,
Possibilité de donner une apparence d'onglets,
Adaptation d'une image de fond dans une boite (fit),
Nouveau comportement des éléments flottants,
Nouvelles puces pour les listes (□ ; ; , -, ...),
Apparences diverses (pour les éléments d'un formulaire par exemple)
Nouveaux curseurs,
Aspect de relief des caractères,
Défilement de texte (marquee),
...
PARIS WEB 2006