Paris Web

2,446 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,446
On SlideShare
0
From Embeds
0
Number of Embeds
47
Actions
Shares
0
Downloads
27
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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/

×