Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. <!doctype html>
  2. <html lang=fr>
  3. <head>
  4. <!-- Always define the charset before the title -->
  5. <meta charset=utf-8>
  6. <title>Critique du livre Redesign Web 2.0 — Biologeek — David Larlet</title>
  7. <!-- Define a viewport to mobile devices to use - telling the browser to assume that the page is as wide as the device (width=device-width) and setting the initial page zoom level to be 1 (initial-scale=1.0) -->
  8. <meta name="viewport" content="width=device-width, initial-scale=1"/>
  9. <!-- Fake favicon, to avoid extra request to the server -->
  10. <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  11. <link type="application/atom+xml" rel="alternate" title="Feed" href="/david/log/" />
  12. <link rel="manifest" href="/manifest.json">
  13. <link rel="stylesheet" href="/static/david/css/larlet-david-_J6Rv.css" data-instant-track />
  14. <noscript>
  15. <style type="text/css">
  16. /* Otherwise fonts are loaded by JS for faster initial rendering. See scripts at the bottom. */
  17. body {
  18. font-family: 'EquityTextB', serif;
  19. }
  20. h1, h2, h3, h4, h5, h6, time, nav a, nav a:link, nav a:visited {
  21. font-family: 'EquityCapsB', sans-serif;
  22. font-variant: normal;
  23. }
  24. </style>
  25. </noscript>
  26. <!-- Canonical URL for SEO purposes -->
  27. <link rel="canonical" href="https://larlet.fr/david/biologeek/archives/20060615-critique-du-livre-redesign-web-20">
  28. </head>
  29. <body>
  30. <div>
  31. <header>
  32. <nav>
  33. <p>
  34. <small>
  35. Je suis <a href="/david/" title="Profil public">David Larlet</a>, <a href="/david/pro/" title="Activité professionnelle">artisan</a> du web qui vous <a href="/david/pro/accompagnement/" title="Activité d’accompagnement">accompagne</a><span class="more-infos"> dans l’acquisition de savoirs pour concevoir des <a href="/david/pro/produits-essentiels/" title="Qu’est-ce qu’un produit essentiel ?">produits essentiels</a></span>. <span class="more-more-infos">Discutons ensemble d’une <a href="/david/pro/devis/" title="En savoir plus">non-demande de devis</a>.</span> Je partage ici mes <a href="/david/blog/" title="Expériences bienveillantes">réflexions</a> et <a href="/david/correspondances/2017/" title="Lettres hebdomadaires">correspondances</a>.
  36. </small>
  37. </p>
  38. </nav>
  39. </header>
  40. <section>
  41. <h1 property="schema:name">Critique du livre Redesign Web 2.0</h1>
  42. <article typeof="schema:BlogPosting">
  43. <div property="schema:articleBody">
  44. <img src="/static/david/biologeek/images/logos/livre_redesign_web.png" alt="vignette" style="float:left; margin: 0.5em 1em;" property="schema:thumbnailUrl" />
  45. <p>C'est le livre à lire absolument si vous êtes chef de projet ou si vous ambitionnez de l'être. Il décrit point par point une méthode concrête et illustrée de nombreux exemples pertinents de redesigns de sites web.</p>
  46. <p>Tous les aspects du design web s'y trouvent, de la rédaction des cahiers des charges aux inévitables dérapages en passant par l'aspect ergonomique d'un site ou la motivation d'une équipe. Pour Kelly Goto et Emily Cotler, une refonte de site s'effectue en 5 étapes majeures&nbsp;:</p>
  47. <h2>La définition du projet</h2>
  48. <p>C'est l'étape la plus importante. Si ces bases ne sont pas sûres et les dates butoirs clairement établies, votre projet va irrémédiablement s'enliser. En connaissance de cause les auteurs proposent de nombreux supports que vous retrouverez sur le <a href="http://www.web-redesign.com/">site officiel du livre</a> (ça commence à devenir un standard et c'est pas plus mal ça) ou traduit en français sur le <a href="http://www.editions-eyrolles.com/Livre/9782212115796/redesign-web-2-0">site des Éditions Eyrolles</a>, enfin de nombreuses ressources sont <a href="http://www.gotomedia.com/resources.html">diponibles sur le site Gotomedia</a>. Ces documents constituent de véritables supports de travail et sont d'une grande aide pour vous mais aussi pour votre client à qui vous saurez poser les bonnes questions. Les profils utilisateurs sont un bonus très intéressant, je me demande bien ce que donneraient les profils-types sur ce site ;-).</p>
  49. <h2>Le développement de la structure du site</h2>
  50. <p>Ici les principales questions sont qu'est ce qu'on va mettre et où&nbsp;? Normalement le contenu est du ressort du client donc c'est plus dans l'agencement sur les pages et la création de gabarit qu'il va y avoir du boulot à abattre. Le tout doit être validé assez souvent par le client et en accord avec les scenarii utilisateurs créés pour l'occasion.</p>
  51. <h2>La conception de l'interface graphique</h2>
  52. <p>Design, design, design&nbsp;: ici on laisse la main à l'artiste, on recadre avec les objectifs initiaux si nécessaire et on laisse au final décider le client. C'est l'étape où le chef de projet à le moins de travail. En fait heureusement car le développement se fait généralement en parallèle et c'est lui qui doit jongler entre les deux 15 fois par jour.</p>
  53. <h2>La production et l'intégration</h2>
  54. <p>C'est le moment de faire un bilan sur les attentes du client, le travail réalisé jusqu'à présent y répond-il favorablement&nbsp;? Oui, bon passons à l'intégration. À partir des modèles issus de la conception graphique, il faut faire des pages bien sauCiSSonnées et optimisées. Et ensuite les tester, encore et encore, et encore, et encore (tiens ça finit par passer sous <abbr title="Internet Explorer">IE</abbr> !) et encore, et encore (oui bon on va essayer de s'arrêter à 5.5). Bref, la tâche quotidienne de l'intégrateur. Un petit bémol à ce niveau, alors que cette nouvelle version devait mettre en avant les standards du web, on trouve encore des &lt;H1&gt; et autres &lt;IMG&gt; dans les exemples qui font vraiment old-school, c'est dommage.</p>
  55. <h2>Le lancement et la maintenance</h2>
  56. <p>On finit avec la mise en ligne du site et la nuit blanche qui suit, bon ok ça c'est pas dans le bouquin mais je sais comment ça se passe ;-). L'accent est mis sur le passage de flambeau en cas d'intervention d'une équipe externe (ce qui est généralement le cas). Ici encore tout est carré, presque un peu trop mais bon il n'y a pas à dire on sent l'expérience et la maturité de la méthode comme à chaque étape décrite au cours de cet ouvrage.</p>
  57. <p>Au final, ce livre est une véritable partition pour chef de projet. Vous pouvez avoir les meilleurs musiciens, vous n'arriverez à rien si vous n'arrivez pas à les accorder et à leur faire suivre la même mélodie. Tel un métronome, le tic-tac des différentes phases de cet ouvrage devrait vous amener à votre chef-d'œuvre en ligne. Néanmoins, cette méthode s'applique aux orchestres et rien ne vaut une bonne impro lorsqu'on est entre potes, personnelement je me sens beaucoup plus proche actuellement des <a href="https://gettingreal.37signals.com/">méthodes de Getting Real</a> et des libertés qu'elles offrent, mais ce sera l'objet d'un prochain billet, ce n'est plus vraiment le même domaine.</p>
  58. <p>Vous pouvez <a href="https://larlet.fr/david/biologeek/archives/20060219-critiques-de-livres-aux-editions-eyrolles/">consulter l'ensemble de mes critiques de livres</a>.</p>
  59. </div>
  60. </article>
  61. <footer>
  62. <h6 property="schema:datePublished">— 15/06/2006</h6>
  63. </footer>
  64. </section>
  65. <section>
  66. <div>
  67. <h3>Articles peut-être en rapport</h3>
  68. <ul>
  69. <li><a href="/david/biologeek/archives/20070321-critique-du-livre-javascript-pour-le-web-20/" title="Accès à Critique du livre Javascript pour le web 2.0">Critique du livre Javascript pour le web 2.0</a></li>
  70. <li><a href="/david/biologeek/archives/20070218-critique-du-livre-uml-2-pour-les-developpeurs/" title="Accès à Critique du livre UML 2 pour les développeurs">Critique du livre UML 2 pour les développeurs</a></li>
  71. <li><a href="/david/biologeek/archives/20060219-critique-du-livre-le-zen-des-css/" title="Accès à Critique du livre le Zen des CSS">Critique du livre le Zen des CSS</a></li>
  72. </ul>
  73. </div>
  74. </section>
  75. <section>
  76. <div id="comments">
  77. <h3>Commentaires</h3>
  78. <div class="comment" typeof="schema:UserComments">
  79. <p class="comment-meta">
  80. <span class="comment-author" property="schema:creator">Xavier</span> le <span class="comment-date" property="schema:commentTime">16/06/2006</span> :
  81. </p>
  82. <div class="comment-content" property="schema:commentText">
  83. <p>Je suis allé voir les extraits de l'ouvrage, et effectivement c'est très détaillé et de bonne facture : je l'ai commandé :) Un bon livre de chevet, je pense !<br />
  84. <br />
  85. Merci pour le conseil et la belle critique !<br />
  86. <br />
  87. xavier</p>
  88. </div>
  89. </div>
  90. <div class="comment" typeof="schema:UserComments">
  91. <p class="comment-meta">
  92. <span class="comment-author" property="schema:creator">Jangkun</span> le <span class="comment-date" property="schema:commentTime">30/12/2006</span> :
  93. </p>
  94. <div class="comment-content" property="schema:commentText">
  95. <p>Voilà un livre plus qu'intéressant. Ile me le faut =D<br />
  96. Vive Eyrolles et ses livres ;)</p>
  97. </div>
  98. </div>
  99. <div class="comment" typeof="schema:UserComments">
  100. <p class="comment-meta">
  101. <span class="comment-author" property="schema:creator">creation sites web Dijon</span> le <span class="comment-date" property="schema:commentTime">18/10/2010</span> :
  102. </p>
  103. <div class="comment-content" property="schema:commentText">
  104. <p>Bien que le livre commence à dater et que certaines choses ne sont plus trop d&#39;actualités, les bases sont toujours les mêmes et ca reste un très bon ouvrage que je conseille vivement à tous les chefs de projet et webmaster.</p>
  105. </div>
  106. </div>
  107. <div class="comment" typeof="schema:UserComments">
  108. <p class="comment-meta">
  109. <span class="comment-author" property="schema:creator">Myob</span> le <span class="comment-date" property="schema:commentTime">24/07/2011</span> :
  110. </p>
  111. <div class="comment-content" property="schema:commentText">
  112. <p>C’est sympa votre article, avec tous les etapes encore une exception qui confirme la règle, tout simplement, que le Web 2.0 est une plateforme d’échange, fermé ou ouvert ! tout a un prix.</p>
  113. </div>
  114. </div>
  115. <div class="comment" typeof="schema:UserComments">
  116. <p class="comment-meta">
  117. <span class="comment-author" property="schema:creator">Erp</span> le <span class="comment-date" property="schema:commentTime">05/09/2011</span> :
  118. </p>
  119. <div class="comment-content" property="schema:commentText">
  120. <p>Je suis d&#39;accord que les bases sont toujours actuelle et même si ce livre n&#39;est pas si nouveau il y a pleine d&#39;info utile pour la réalisation du projet. </p>
  121. </div>
  122. </div>
  123. </div>
  124. </section>
  125. <footer>
  126. <nav>
  127. <p>
  128. <small>
  129. Je réponds quasiment toujours aux <a href="m&#x61;ilto:d&#x61;vid%40l&#x61;rlet&#46;fr" title="Envoyer un email">emails</a> (<a href="/david/signature/" title="Ma signature actuelle avec possibilité de chiffrement">signés</a>) et vous pouvez me rencontrer à Montréal. <span class="more-infos">N’hésitez pas à <a href="/david/log/" title="Être tenu informé des mises à jour">vous abonner</a> pour être tenu informé des publications récentes.</span>
  130. </small>
  131. </p>
  132. </nav>
  133. </footer>
  134. </div>
  135. <script src="/static/david/js/larlet-david-3ee43f.js" data-no-instant></script>
  136. <script data-no-instant>InstantClick.init()</script>
  137. </body>
  138. </html>