Enrichissement
 de sites web
 Cyril Doussin, Paris Web 2008
yeah
WTF?
importance

• productivité: bien utiliser les outils
  disponibles
• utilisabilité: maximiser et satisfaire
  son audience...
autres avantages

• clarté conceptuelle (facile à
  expliquer)
• accessibilité
• business: économies de temps à
  moyen et...
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 ...
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 l...
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
 (carou...
types de contenu à enrichir
     autres contenus «riches» par plugins

• Flash/Silverlight/Java etc.
• assurer une intégra...
types de contenu à enrichir
     applicable au site dans son ensemble



définir une identité («look ‘n feel»)
créer une ex...
rôles des technologies
                 HTML

définit la structure de la page,
metadata etc.
fourni le contenu textuel, pre...
rôles des technologies
    HTML: importance de la sémantique


            Sémantique
l’étude du sens en communication

ba...
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 su...
rôles des technologies
  plugins (Flash, Silverlight, Java, Gears etc.)

ajouter des fonctionalités non
supportées par les...
rôles des technologies
aggrégation (ou «syndication») (RSS, Atom et dérivés)



   aggregation de contenu


   ajoute un n...
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 (cha...
techniques
                HTML (1)


structurer ses documents


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

http:...
techniques
                 HTML (2)

microformats: API incluse dans le document

énorme bonus pour:
     •   utilisation
...
techniques
                       µF (1)

<ul>
<li>
 <a href=quot;http://microformats.org/quot;>microformats.org</a>
</li>...
techniques
                                µF (2)


<ul>
<li class=quot;vcardquot;>
 <a class=quot;fn org urlquot; href=qu...
techniques
                      CSS

layout: construit à partir du contenu

porter plus attention sur typographie (très i...
techniques
                     CSS
Un site web peut avoir des interfaces/designs
différents sur des agents différents.

M...
techniques
        Javascript (1)

si des éléments du design
ne peuvent fonctionner
qu’avec Javascript, ils
doivent impéra...
techniques
                Javascript (2)

gare à l’obtrusion!

function maFonction() { ... }


var MonProduit = { }

MonP...
techniques
                    AJAX
organiser son code correctement… côté serveur

http://example.com/resource

<!DOCTYPE ...
techniques
                      autres

«style switching»
       présentations alternatives (par exemple
       utile pou...
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
        ...
outils
 le développeur




DU CALME!
outils
      librairies Javascript et «patterns»


Yahoo! GBS: Graded Browser Support (Strategy)
       • respecter l’enri...
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...
fin & liens

                                               MERCI
•   http://developer.yahoo.com/yui/articles/gbs/

•   htt...
Prochain SlideShare
Chargement dans…5
×

Paris Web

2 371 vues

Publié le

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

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 371
Sur SlideShare
0
Issues des intégrations
0
Intégrations
47
Actions
Partages
0
Téléchargements
27
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Paris Web

  1. 1. Enrichissement de sites web Cyril Doussin, Paris Web 2008
  2. 2. yeah
  3. 3. WTF?
  4. 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. 5. autres avantages • clarté conceptuelle (facile à expliquer) • accessibilité • business: économies de temps à moyen et long terme, et donc d’argent
  6. 6. dégradation grâcieuse mega-super-dynamicajolistique ok autant que possible le reste du temps
  7. 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. 8. analogie foireuse (1)
  9. 9. analogie foireuse (2)
  10. 10. analogie foireuse (3)
  11. 11. méthode planning design implémentation
  12. 12. méthode planning design implémentation enrichissement progressif
  13. 13. types de contenu à enrichir texte • illustrer • appliquer un ou plusieurs styles pour améliorer la lisibilité
  14. 14. types de contenu à enrichir images • ajouter une légende • améliorer la présentation (lightbox)
  15. 15. types de contenu à enrichir listes de texte et/ou images • donner du contexte • alterner la présentation (carousel)
  16. 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. 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. 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. 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. 20. rôles des technologies CSS présenter… …pour tous les media
  21. 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. 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. 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. 24. techniques utiliser les technologies comme prévu
  25. 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. 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. 27. techniques HTML (2) microformats: API incluse dans le document énorme bonus pour: • utilisation • réutilisation • indexation • potentiellement l’accessibilité
  28. 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. 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. 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. 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. 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. 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. 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. 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. 36. mauvais exemples malheureusement faciles à trouver…
  37. 37. mauvais exemples Facebook (1)
  38. 38. mauvais exemples Facebook (2)
  39. 39. mauvais exemples Facebook (2)
  40. 40. mauvais exemples Facebook (3)
  41. 41. mauvais exemples Facebook (4)
  42. 42. mauvais exemples France2 (1)
  43. 43. mauvais exemples France2 (2)
  44. 44. mauvais exemples CNN (1)
  45. 45. mauvais exemples CNN (2)
  46. 46. mauvais exemples Scriptaculous: Rails helpers demo
  47. 47. mauvais exemples Digg
  48. 48. mauvais exemples Apple MobileMe & SproutCore (1)
  49. 49. mauvais exemples Apple MobileMe & SproutCore (2)
  50. 50. bons exemples Yahoo! (Euro)sport (1)
  51. 51. bons exemples Yahoo! (Euro)sport (2)
  52. 52. bons exemples Yahoo! (Euro)sport (3)
  53. 53. bons exemples Yahoo! (Euro)sport (4)
  54. 54. bons exemples BBC (1)
  55. 55. bons exemples BBC (2)
  56. 56. bons exemples BBC (3)
  57. 57. bons exemples Yahoo! TV (1)
  58. 58. bons exemples Yahoo! TV (2)
  59. 59. bons exemples Yahoo! TV (3)
  60. 60. bons exemples Yahoo! TV (4)
  61. 61. bons exemples Graphs automatiques
  62. 62. bons exemples Google Maps (1)
  63. 63. bons exemples Google Maps (2)
  64. 64. bons exemples Pubs (Yahoo!) Message de fin avec ou Avec Javascript sans Javascript
  65. 65. outils le développeur DU CALME!
  66. 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. 67. outils «autres» navigateurs et agents
  68. 68. outils «autres» navigateurs et agents
  69. 69. outils «autres» navigateurs et agents
  70. 70. outils «autres» navigateurs et agents LYNX
  71. 71. outils «autres» navigateurs et agents LYNX mobiles
  72. 72. outils «autres» navigateurs et agents LYNX mobiles (lecteurs d’écran?)
  73. 73. outils toolbars et débuggage … et beaucoup d’autres
  74. 74. outils Operator
  75. 75. outils Operator
  76. 76. outils Operator
  77. 77. outils processus de création méthodologie applicable à la conception du produit composants sociaux et intéractifs («riches») ajoutés progressivement
  78. 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/

×