Ma présentation sur l'enrichissement de site web à Paris Web 2008.

1. Enrichissement
de sites web
Cyril Doussin, Paris Web 2008

2. yeah

3. WTF?

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

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

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

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

8. analogie foireuse (1)

9. analogie foireuse (2)

10. analogie foireuse (3)

11. méthode
planning design implémentation

12. méthode
planning design implémentation
enrichissement progressif

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

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

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

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

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

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

19. 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!

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

21. 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)

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

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

24. techniques
utiliser les technologies
comme prévu

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

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

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

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

29. techniques
µF (2)
<ul>
<li class=quot;vcardquot;>
<a class=quot;fn org urlquot; href=quot;http://microformats.org/quot;>microformats.org</a>
</li>
<li class=quot;vcardquot;>
<a class=quot;fn org urlquot; href=quot;http://technorati.com/quot;>Technorati</a>
</li>
<li class=quot;vcardquot;>
<a class=quot;fn org urlquot; href=quot;http://www.w3.org/quot;>World Wide Web Consortium</a>
(<span class=quot;nicknamequot;>W3C</span>)
</a>
</li>
</ul>

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

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

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

33. 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é!

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

35. 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)

36. mauvais exemples
malheureusement
faciles à trouver…

37. mauvais exemples
Facebook (1)

38. mauvais exemples
Facebook (2)

39. mauvais exemples
Facebook (2)

40. mauvais exemples
Facebook (3)

41. mauvais exemples
Facebook (4)

42. mauvais exemples
France2 (1)

43. mauvais exemples
France2 (2)

44. mauvais exemples
CNN (1)

45. mauvais exemples
CNN (2)

46. mauvais exemples
Scriptaculous: Rails helpers demo

47. mauvais exemples
Digg

48. mauvais exemples
Apple MobileMe & SproutCore (1)

49. mauvais exemples
Apple MobileMe & SproutCore (2)

50. bons exemples
Yahoo! (Euro)sport (1)

51. bons exemples
Yahoo! (Euro)sport (2)

52. bons exemples
Yahoo! (Euro)sport (3)

53. bons exemples
Yahoo! (Euro)sport (4)

54. bons exemples
BBC (1)

55. bons exemples
BBC (2)

56. bons exemples
BBC (3)

57. bons exemples
Yahoo! TV (1)

58. bons exemples
Yahoo! TV (2)

59. bons exemples
Yahoo! TV (3)

60. bons exemples
Yahoo! TV (4)

61. bons exemples
Graphs automatiques

62. bons exemples
Google Maps (1)

63. bons exemples
Google Maps (2)

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

65. outils
le développeur
DU CALME!

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

67. outils
«autres» navigateurs et agents

68. outils
«autres» navigateurs et agents

69. outils
«autres» navigateurs et agents

70. outils
«autres» navigateurs et agents
LYNX

71. outils
«autres» navigateurs et agents
LYNX
mobiles

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

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

74. outils
Operator

75. outils
Operator

76. outils
Operator

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

78. 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/