Paris Web

Enrichissementde sites webCyril Doussin, Paris Web 2008

yeah

WTF?

• 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

importance

• clarté conceptuelle (facile à expliquer)

• accessibilité

• business: économies de temps à moyen et long terme, et donc d’argent

autres avantages

mega-super-dynamicajolistique

dégradation grâcieuse

ok autant que possible le reste du temps

implémenter les fonctionalités de base: marche tout le temps, pour tout le monde

enrichissement

mega-super-dynamicajolistique le reste du temps

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 à enrichirtexte

• illustrer

• appliquer un ou plusieurs styles pour améliorer la lisibilité

types de contenu à enrichirimages

• ajouter une légende

• améliorer la présentation (lightbox)

types de contenu à enrichirlistes de texte et/ou images

• donner du contexte

• alterner la présentation (carousel)

types de contenu à enrichirautres 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 à enrichirapplicable au site dans son ensemble

définir une identité («look ‘n feel»)

créer une expérience, marque

rôles des technologiesHTML

fourni le contenu textuel, presque toujours contenu de base

définit la structure de la page, metadata etc.

rôles des technologiesHTML: importance de la sémantique

l’étude du sens en communication

Sémantique

balises HTML = outils sémantiques

Donnez du sens à vos documents!

rôles des technologiesCSS

…pour tous les media

présenter…

rôles des technologiesJavascript

interactions non supportées par défaut par les contrôles HTML (eg. drag and drop)

comportement dynamique de l’interface (eg. carousel)

rôles des technologiesplugins (Flash, Silverlight, Java, Gears etc.)

exemples: video, animations vectorielles, stockage de données

ajouter des fonctionalités non supportées par les navigateurs

rôles des technologiesaggrégation (ou «syndication») (RSS, Atom et dérivés)

ajoute un niveau peu reconnu: la réutilisation

aggregation de contenu

techniques

utiliser les technologies comme prévu

techniquesdécouverte et propriétés de page: head

informations de SEO: title, meta (charset, description, keyword)

informations de base: title

inclusion d’autres documents: CSS, Javascript, RSS/Atom, icônes etc.

techniquesHTML (1)

utiliser les éléments pour leurs valeur sémantique

structurer ses documents

http://openweb.eu.org/articles/respecter_semantique

interaction: ancres, formulaires

techniquesHTML (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>

techniquesCSS

porter plus attention sur typographie (très importante)

layout: construit à partir du contenu

la déco

• couleurs, fonds, images etc.

• coins arrondis, gradients et autres joyeusetés

style fonctionel: eg. cursor:pointer sur labels etc.

techniquesCSS

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».

techniquesJavascript (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.

techniquesJavascript (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é!

techniquesAJAX

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

techniquesautres

présentations alternatives (par exemple utile pour aider les personnes avec problèmes visuels)

«style switching»

technos propriétaires

• icônes Apple

• Microsoft webslices (= Firefox webchunks)

ou juste pour la frime…

mauvais exemples

malheureusement faciles à trouver…

mauvais exemplesFacebook (1)

mauvais exemplesFacebook (2)

mauvais exemplesFacebook (2)

mauvais exemplesFacebook (3)

mauvais exemplesFacebook (4)

mauvais exemplesFrance2 (1)

mauvais exemplesFrance2 (2)

mauvais exemplesCNN (1)

mauvais exemplesCNN (2)

mauvais exemplesScriptaculous: Rails helpers demo

mauvais exemplesDigg

mauvais exemplesApple MobileMe & SproutCore (1)

mauvais exemplesApple MobileMe & SproutCore (2)

bons exemplesYahoo! (Euro)sport (1)

bons exemplesYahoo! (Euro)sport (2)

bons exemplesYahoo! (Euro)sport (3)

bons exemplesYahoo! (Euro)sport (4)

bons exemplesBBC (1)

bons exemplesBBC (2)

bons exemplesBBC (3)

bons exemplesYahoo! TV (1)

bons exemplesYahoo! TV (2)

bons exemplesYahoo! TV (3)

bons exemplesYahoo! TV (4)

bons exemplesGraphs automatiques

bons exemplesGoogle Maps (1)

bons exemplesGoogle Maps (2)

bons exemplesPubs (Yahoo!)

Avec Javascript Message de fin avec ou sans Javascript

outilsle développeur

DU CALME!

outilslibrairies 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

LYNXmobiles

outils«autres» navigateurs et agents

LYNX

(lecteurs d’écran?)

mobiles

outilstoolbars et débuggage

… et beaucoup d’autres

outilsOperator

outilsOperator

outilsOperator

outilsprocessus 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/