Your SlideShare is downloading. ×
0
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Paris Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Paris Web

1,676

Published on

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

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
1,676
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×