Enrichissement
de sites web
Cyril Doussin, Paris Web 2008

yeah

WTF?

importance
• productivité: bien utiliser les outils
disponibles
• utilisabilité: maximiser et satisfaire
son audience
• maintenance et flexibilité
• “play nice”: envers les utilisateurs,
collègues et le reste du web

autres avantages
• clarté conceptuelle (facile à
expliquer)
• accessibilité
• business: économies de temps à
moyen et long terme, et donc
d’argent

dégradation grâcieuse
mega-super-dynamicajolistique
ok autant que possible le
reste du temps

enrichissement
mega-super-dynamicajolistique
le reste du temps
implémenter les fonctionalités de
base: marche tout le temps, pour
tout le monde

analogie foireuse (1)

analogie foireuse (2)

analogie foireuse (3)

méthode
planning design implémentation

méthode
planning design implémentation
enrichissement progressif

types de contenu à enrichir
texte
• illustrer
• appliquer un ou plusieurs styles
pour améliorer la lisibilité

types de contenu à enrichir
images
• ajouter une légende
• améliorer la présentation
(lightbox)

types de contenu à enrichir
listes de texte et/ou images
• donner du contexte
• alterner la présentation
(carousel)

types de contenu à enrichir
autres contenus «riches» par plugins
• Flash/Silverlight/Java etc.
• assurer une intégration aussi
facile que possible avec le reste
du contenu sur la page

types de contenu à enrichir
applicable au site dans son ensemble
définir une identité («look ‘n feel»)
créer une expérience, marque

rôles des technologies
HTML
définit la structure de la page,
metadata etc.
fourni le contenu textuel, presque
toujours contenu de base

rôles des technologies
HTML: importance de la sémantique
Sémantique
l’étude du sens en communication
balises HTML = outils sémantiques
Donnez du sens à vos documents!

rôles des technologies
CSS
présenter…
…pour tous les media

rôles des technologies
Javascript
comportement dynamique de
l’interface (eg. carousel)
interactions non supportées par
défaut par les contrôles HTML
(eg. drag and drop)

rôles des technologies
plugins (Flash, Silverlight, Java, Gears etc.)
ajouter des fonctionalités non
supportées par les navigateurs
exemples: video, animations
vectorielles, stockage de données

rôles des technologies
aggrégation (ou «syndication») (RSS, Atom et dérivés)
aggregation de contenu
ajoute un niveau peu reconnu:
la réutilisation

techniques
utiliser les technologies
comme prévu

techniques
découverte et propriétés de page: head
informations de base: title
informations de SEO: title, meta (charset, description,
keyword)
inclusion d’autres documents: CSS, Javascript,
RSS/Atom, icônes etc.

techniques
HTML (1)
structurer ses documents
utiliser les éléments pour leurs valeur sémantique
http://openweb.eu.org/articles/respecter_semantique
interaction: ancres, formulaires

techniques
HTML (2)
microformats: API incluse dans le document
énorme bonus pour:
• utilisation
• réutilisation
• indexation
• potentiellement
l’accessibilité

techniques
µF (1)
<ul>
<li>
<a href=\"http://microformats.org/\">microformats.org</a>
</li>
<li>
<a href=\"http://technorati.com/\">Technorati</a>
</li>
<li>
<a href=\"http://www.w3.org/\">World Wide Web Consortium</a>
(W3C)
</a>
</li>
</ul>

techniques
µF (2)
<ul>
<li class=\"vcard\">
<a class=\"fn org url\" href=\"http://microformats.org/\">microformats.org</a>
</li>
<li class=\"vcard\">
<a class=\"fn org url\" href=\"http://technorati.com/\">Technorati</a>
</li>
<li class=\"vcard\">
<a class=\"fn org url\" href=\"http://www.w3.org/\">World Wide Web Consortium</a>
(<span class=\"nickname\">W3C</span>)
</a>
</li>
</ul>

techniques
CSS
layout: construit à partir du contenu
porter plus attention sur typographie (très importante)
style fonctionel: eg. cursor:pointer sur labels etc.
la déco
• couleurs, fonds, images etc.
• coins arrondis, gradients et autres joyeusetés

techniques
CSS
Un site web peut avoir des interfaces/designs
différents sur des agents différents.
Mais aucune détection d’agent/version/moteur
de rendu ne doit être faite.
La détection de capacité est la seule technique
valable, maintenable, «future-proof».

techniques
Javascript (1)
si des éléments du design
ne peuvent fonctionner
qu’avec Javascript, ils
doivent impérativement
être insérer dans le
document par Javascript.

techniques
Javascript (2)
gare à l’obtrusion!
function maFonction() { ... }
var MonProduit = { }
MonProduit.maFonction = { ... }
le code pour une fonctionnalité ne doit pas
modifier le code ou markup pour une autre
fonctionnalité!

techniques
AJAX
organiser son code correctement… côté serveur
http://example.com/resource
<!DOCTYPE html>
<html>
<head>…</head>
<body>resource</body>
</html>
http://example.com/resource?ajax=1
resource

techniques
autres
«style switching»
présentations alternatives (par exemple
utile pour aider les personnes avec
problèmes visuels)
ou juste pour la frime…
technos propriétaires
• icônes Apple
• Microsoft webslices (= Firefox webchunks)

mauvais exemples
malheureusement
faciles à trouver…

mauvais exemples
Facebook (1)

mauvais exemples
Facebook (2)

mauvais exemples
Facebook (2)

mauvais exemples
Facebook (3)

mauvais exemples
Facebook (4)

mauvais exemples
France2 (1)

mauvais exemples
France2 (2)

mauvais exemples
CNN (1)

mauvais exemples
CNN (2)

mauvais exemples
Scriptaculous: Rails helpers demo

mauvais exemples
Digg

mauvais exemples
Apple MobileMe & SproutCore (1)

mauvais exemples
Apple MobileMe & SproutCore (2)

bons exemples
Yahoo! (Euro)sport (1)

bons exemples
Yahoo! (Euro)sport (2)

bons exemples
Yahoo! (Euro)sport (3)

bons exemples
Yahoo! (Euro)sport (4)

bons exemples
BBC (1)

bons exemples
BBC (2)

bons exemples
BBC (3)

bons exemples
Yahoo! TV (1)

bons exemples
Yahoo! TV (2)

bons exemples
Yahoo! TV (3)

bons exemples
Yahoo! TV (4)

bons exemples
Graphs automatiques

bons exemples
Google Maps (1)

bons exemples
Google Maps (2)

bons exemples
Pubs (Yahoo!)
Message de fin avec ou
Avec Javascript
sans Javascript

outils
le développeur
DU CALME!

outils
librairies Javascript et «patterns»
Yahoo! GBS: Graded Browser Support (Strategy)
• respecter l’enrichissement
• supporter différents agents avec
un nombre de types de contenus
différent

outils
«autres» navigateurs et agents

outils
«autres» navigateurs et agents

outils
«autres» navigateurs et agents

outils
«autres» navigateurs et agents
LYNX

outils
«autres» navigateurs et agents
LYNX
mobiles

outils
«autres» navigateurs et agents
LYNX
mobiles
(lecteurs d’écran?)

outils
toolbars et débuggage
… et beaucoup d’autres

outils
Operator

outils
Operator

outils
Operator

outils
processus de création
méthodologie applicable à la conception du
produit
composants sociaux et intéractifs («riches»)
ajoutés progressivement

fin & liens
MERCI
• http://developer.yahoo.com/yui/articles/gbs/
• http://yuiblog.com/blog/2008/01/17/tables-and-charts/
• http://openweb.eu.org/articles/respecter_semantique
• https://addons.mozilla.org/en-US/firefox/addon/4106
• https://addons.mozilla.org/en-US/firefox/addon/60
• http://lynx.isc.org/
• http://www.flickr.com/photos/ooh_food/2417021106/
• http://www.flickr.com/photos/telstar/2333652125/
• http://www.flickr.com/photos/darkbrilliance/233311705/