Conception générale de sites web

J'ai lu la traduction française du livre « Responsive Web Design avec HTML 5 et CSS 3 » de Bain Frain.

Ce petit livre est une introduction au Responsive Web Design. Il explique les objectifs de cette conception et les notions sous-jacentes : grille d'affichage flexible qui ne dépend pas d'une définition donnée, médias flexibles qui ne débordent pas de leur conteneur et ensemble de règles CSS basées sur Media Queries pour appliquer des règles CSS suivant certaines conditions.

Le point fort du livre, c'est l'exemple de site qui sert de fil conducteur tout au long des différents chapitres. J'ai particulièrement aimé la transformation d'un design fixe en design proportionnel.

Le point faible, ce sont quelques erreurs au niveau de certaines propriétés CSS et certains choix de l'auteur qui sont discutables, mais rien de rédhibitoire pour le lecteur qui sait prendre un peu de recul.

En conclusion, si vous souhaitez découvrir l'adaptation d'un site concret en Responsive Web Design, ce livre devrait vous intéresser.

Depuis la mise sur le marché de l'iPhone d'Apple, le développement croissant de la navigation mobile est allé de pair avec une sophistication accrue des appareils, de sorte qu'il est aujourd'hui naturel de consulter n'importe quel site web indifféremment depuis son ordinateur de bureau à écran large ou son téléphone portable.

Les fabricants de navigateurs mobiles ont pris cette réalité en compte en faisant en sorte que ces derniers réduisent proportionnellement aux dimensions de l'appareil une page web supposée conçue pour un grand écran. Cependant, une telle fonctionnalité n'est qu'un pis-aller qui ne permet pas d'offrir à l'utilisateur une expérience satisfaisante (chap. 1 §1).

La solution idéale, au dire de l'auteur, réside dans le développement d'un « site web mobile » tirant profit de toutes les possibilités techniques de l'appareil (chap. 1 §2). Celle-ci présente néanmoins l'inconvénient majeur d'être complexe et coûteuse à mettre en œuvre.

Si le budget est limité, le meilleur compromis consistera à réaliser un site au design fluide s'adaptant à toutes les largeurs d'écran (chap. 1 §5 et 10). En outre, le recours aux dernières versions des standards du Web, autrement dit HTML5 et CSS3, permettra de réduire le nombre et la taille des ressources à charger pour les appareils mobiles, dont la bande passante est limitée (chap. 1 §4).

La description de cette stratégie en deux parties constitue le cœur du livre qui s'attache également à nous montrer comment tirer profit des autres fonctionnalités introduites par HTML5 et CSS3.

Construire pour tous les écrans

L'article fondateur d'Ethan Marcotte, publié en 2010, sur lequel le livre s'appuie, combine trois techniques pour rendre un design fluide (chap. 1 §3).

Partant du principe qu'un dessin vaut mieux qu'un long discours, l'auteur a choisi de nous montrer comment fonctionnent ces dernières en les appliquant directement à un exemple en vraie grandeur, celui d'une authentique page d'accueil (d'un site humoristiquement oscaro-sceptique !) (chap. 2 §4).

Abordant le problème de manière volontairement empirique, l'auteur part d'une maquette réalisée pour un grand écran à l'aide d'une grille CSS (chap. 3 §8) qu'il désire, avant toute chose, adapter à une tablette (chap. 2 §6 et 7) en recourant aux media queries (chap. 2 §1).

À cette occasion, il n'oublie pas de nous avertir de désactiver l'auto-redimensionnement des pages web effectué par défaut par les navigateurs mobiles. La déclaration à insérer dans le fichier HTML est particulièrement bien décrite. En revanche, son équivalent CSS n'est que rapidement évoqué dans une note, celui-ci ne bénéficiant, à la date de rédaction du livre, que d'un support limité (chap. 2 §5).

Mais les media queries utilisées seules ne permettent de définir un design que pour un nombre limité d'appareils (chap. 2 §8).

La conversion, dans un deuxième temps, des unités fixes en unités proportionnelles, grâce à une formule simple que l'auteur applique aux dimensions des différentes zones constitutives de la page d'accueil (chap. 3 §3), nous permet d'obtenir un design véritablement universel, s'ajustant à merveille à l'ensemble des écrans dont la largeur est située entre deux points de rupture (chap. 3 §1 et 2).

La méthode d'explication par l'exemple adoptée par l'auteur se révèle particulièrement efficace lorsqu'il s'agit de nous montrer les résultats que permettent d'obtenir les unités proportionnelles appliquées aux tailles des caractères (chap. 3 §4).

Troisième pilier du responsive web design, les images fluides sont particulièrement bien traitées dans l'ouvrage. Celui-ci démontre, en effet, que dans certains cas, il est pertinent d'affecter une valeur (en pourcentage, voire en pixels) différente de celle de 100% que l'on attribue usuellement à la propriété max-width pour que l'image recouvre toute la largeur de son contenant (chap. 3 §5).

De plus, l'ouvrage ne s'arrête pas aux images puisqu'il nous montre comment appliquer la même règle afin de redimensionner les vidéos hébergées localement (élément video) ou le plugin jQuery FitVids à l'intention de celles hébergées à distance (élément iframe) (chap. 4 §9).

Enfin, en allant un peu plus avant dans l'exploration des media queries, on découvrira que la souplesse de ces dernières rend possibles les ajustements les plus subtils (chap. 3 §7) ou la prise en compte d'autres caractéristiques des appareils telles que la résolution de l'écran (chap. 2 §2 et 3, chap. 9 §5).

Tenir compte des capacités limitées des appareils

Si la réalisation d'un design fluide constitue une étape essentielle dans l'adaptation d'un site web aux appareils mobiles, elle ne répond cependant pas à l'ensemble des contraintes imposées par ces derniers. En effet, la taille réduite de l'écran n'est pas la seule limitation inhérente à ces appareils : la bande passante nettement inférieure à celle des ordinateurs de bureau nécessite de diminuer autant que possible le nombre et le poids des ressources externes.

En contradiction avec ce dernier principe, la technique des images fluides, cependant essentielle, comme on vient de le voir, à l'échafaudage d'un design fluide : celle-ci impose, en effet, aux appareils mobiles de charger des images plus grandes que nécessaire sous peine de voir celles-ci agrandies dans les écrans plus larges avec, pour conséquence, une netteté amoindrie. Un script comme Adaptive images, dont l'auteur nous détaille, étape par étape, l'installation et le paramétrage, contourne cette difficulté en permettant le chargement automatisé d'images à la taille adéquate pour les différentes dimensions d'écran (chap. 3 §6).

Quant aux images d'arrière-plan, on peut dorénavant s'en passer, purement et simplement : les valeurs-fonctions linear-gradient et radial-gradient, dont l'auteur nous livre les clés, exemples et illustrations à l'appui, pour réaliser des motifs simples (chap. 6 §6, 7 et 9) ont été adoptées par des designers professionnels qui ont su en exploiter toutes les ressources pour produire des motifs aussi sophistiqués qu'élégants à partir de quelques lignes de code (moins d'1 Ko pour la plupart d'entre eux !) disponibles sur la Toile (chap. 6 §8).

Les nouvelles propriétés CSS3 peuvent de même suppléer les images pour apporter une touche esthétique aux différents éléments d'une page web : l'auteur nous dévoile son propre paramétrage pour, avec text-shadow, obtenir un efficace effet relief (chap. 6 §1 à 4) ; la propriété box-shadow permettra de créer une ombre ou un effet vignette (chap. 6 §5) ; enfin, usant de ces deux propriétés à la fois, alliées à des propriétés CSS plus classiques, l'auteur nous montre, dans le détail, comment habiller un bouton de formulaire (chap. 6 §10).

Une dernière application des images, celle dédiée à la création de polices typographiques personnalisées, est aujourd'hui supplantée par la technique consistant à télécharger celles-ci via la règle @font-face (chap. 5 §8) qui peut aussi être utilisée, selon le même principe, pour importer des icônes (chap. 6 §13). Cependant, dans le premier cas, le résultat obtenu ne correspond pas toujours à celui attendu, mais l'auteur, qui a lui-même été confronté à cette difficulté, nous explique comment la surmonter en une ligne de code (chap. 5 §9).

Certains contenus ou effets requérant jusqu'à présent l'emploi de code JavaScript ou de technologies tierces sont si naturellement présents dans les pages web qu'ils ont depuis été pris en compte par HTML ou CSS et sont aujourd'hui gérés par ces derniers de manière native. Il s'agit en particulier du multimédia (chap. 4 §7 et 8), des interfaces de saisie et mécanismes de validation des champs de formulaire (chap. 8 §1, 2, 3 et 5), et des animations : si l'auteur présente quelques transformations et animations 2D (chap. 7 §1, 2 et 4), il n'aborde, en revanche, les transformations 3D que sous la forme d'un exemple, celui de l'affichage du verso d'une image au survol de souris (chap. 7 §3).

Les économies rendues possibles par les dernières évolutions des standards du Web portent non seulement sur les ressources externes mais également sur le code HTML lui-même.

Ainsi, certains effets esthétiques ne pouvaient jusqu'alors être obtenus sans l'insertion, à cette seule fin, dans le fichier HTML, d'éléments dépourvus de valeur sémantique. Reposant sur ce principe, la technique des « portes coulissantes », servant à créer des coins arrondis (chap. 1 §7), ou celle utilisant des containers pour insérer plusieurs images d'arrière-plan peuvent dorénavant être avantageusement remplacées par une simple mise en application des propriétés CSS respectives border-radius (chap. 1 §8 et chap. 5 §3) et background dans sa version améliorée (chap. 6 §11).

De même, les propriétés CSS3 de multicolonnage permettent de créer un design qui ne pouvait naguère être obtenu sans le recours à des balises HTML superflues (chap. 5 §4) ; les nouveaux sélecteurs CSS3 de sélectionner plus finement les composants de la page web que l'on souhaite styler, sans qu'il soit besoin d'y faire référence à l'aide de classes, voire de balises créées dans cet unique but (chap. 5 §5 à 7).

Ces économies de code sont sans doute plus significatives et pertinentes que celles que procure la syntaxe allégée autorisée par HTML5 (chap. 1 §6), laquelle a en outre pour inconvénient de pécher par manque de lisibilité (chap. 4 §2).

Tirer profit de fonctionnalités nouvelles

L'introduction par HTML5 de nouveaux éléments de structure rend à présent inutile le code boursouflé servant à restituer la même sémantique que ces derniers à l'aide de balises div génériques, classes et commentaires associés. Il s'agit, là encore, d'une appréciable économie de lignes de code, mais plus important est le gain réalisé en termes de lisibilité au profit aussi bien des développeurs que des navigateurs, lesquels seront ainsi capables de reproduire, à partir de ces éléments, un plan de la page web (chap. 4 §3 et 4).

En outre, ceux-ci pourront, à l'intention des lecteurs d'écran, être complétés par des attributs WAI-ARIA dont l'auteur ne nous montre cependant qu'un seul exemple d'application (chap. 4 §6).

L'enrichissement sémantique d'HTML s'étend aux éléments en ligne, dont la fonction de ceux utilisés à l'origine pour appliquer des styles a été redéfinie (chap. 4 §5).

La distinction entre le fond et la forme est ainsi renforcée, et cette dernière plus que jamais dévolue à CSS (chap. 5 §2) qui, outre les propriétés évoquées plus haut, acquiert dans sa dernière version des fonctionnalités supplémentaires (chap. 6 §12) telles que de nouvelles méthodes pour définir les couleurs (chap. 5 §10).

Enfin, la gestion elle-même des ressources est optimisée grâce à la mise en cache de ces dernières – pilotée par un fichier de paramétrage (manifest), dont le contenu est particulièrement bien détaillé dans l'ouvrage – pour une mise à disposition hors connexion (chap. 4 §10).

Ces différents apports d'HTML5 et CSS3, pour enthousiasmants qu'ils soient, souffrent d'un manque de support par les navigateurs les plus anciens. Pour pallier cet inconvénient, on peut envisager dans un premier temps la mise en place d'une alternative simple lorsque cela est possible (chap. 4 §8, chap. 5 §10), ou le recours à la stratégie de dégradation gracieuse (chap. 9 §1), à condition toutefois que les fonctionnalités non prises en charge ne constituent pas des composantes essentielles de la page web (chap. 5 §1).

Ces solutions se traduisant généralement par un rendu de la page web légèrement différent d'un navigateur à l'autre, il sera peut-être nécessaire, avant de les mettre en œuvre, de convaincre le client que cette imperfection est plus que compensée par le gain en temps de développement qu'elles procurent (chap. 1 §1 et 11). Si, en dépit des efforts déployés pour obtenir l'assentiment du client, ce dernier reste attaché à l'idée d'un design parfaitement identique pour tous les navigateurs, ou si la fonctionnalité en cause a sur le comportement de la page web un impact trop important, l'utilisation de polyfills (chap. 1 §9) deviendra incontournable (chap. 9 §2). L'un d'eux, nommé Webshims Lib, corrige la non prise en charge du contrôle des valeurs saisies dans les champs de formulaire en s'appuyant, pour cela, sur le script Modernizr (chap. 8 §4). Utilisé seul, ce dernier, dont la finalité est de détecter le support des différentes fonctionnalités par les navigateurs, assure en outre celui des éléments de structure HTML5 avec le concours d'un autre script, HTML5 shim, qu'il embarque sur demande (chap. 4 §1).

Les polyfills sont nombreux et, associés à Modernizr, c'est autant de fonctionnalités défaillantes que ces derniers peuvent restaurer, les media queries étant l'exemple le plus notable.

Un script représente cependant une ressource supplémentaire, et son chargement un gaspillage de la bande passante pour les navigateurs bien dotés auxquels il est inutile. Ce dernier problème est heureusement résolu grâce à un autre script, YepNope.js (chap. 9 §3), qui permet de charger les solutions correctives de manière conditionnelle, et dont l'auteur nous montre un exemple d'application détaillé (chap. 9 §4).

En conclusion

Parti pris plutôt original et grande force du livre, les principes du responsive web design et les nouveautés introduites par HTML5 et CSS3 nous sont présentés et expliqués directement à travers leur mise en application dans une page web dont on suit la construction tout au long de l'ouvrage. Les erreurs volontairement commises par l'auteur qui se met dans la peau du développeur novice permettent de mieux mettre en lumière l'importance de certaines règles : la réalisation hâtive de designs aux dimensions figées destinés à deux seuls types d'appareils sera corrigée dans un second temps par l'introduction d'unités proportionnelles.

En passant, l'auteur nous fait part de ses choix ou paramétrages personnels (nombres non arrondis, effet relief) afin de nous aider à tirer des fonctionnalités présentées le plus grand profit.

Un autre mérite important du livre est de ne pas réduire la problématique de la conception d'un design multi-appareils à une simple question de largeurs d'écrans : l'auteur exploite au mieux les capacités d'HTML5 et CSS3, tout en s'aidant de quelques scripts, afin de limiter la quantité de ressources à charger.

On appréciera tout autant le fait que l'auteur, d'une part ne perde pas de vue les contraintes du monde réel – budget et délais serrés, client n'ayant qu'une maquette en tête – qui font qu'une stratégie de responsive web design s'avère plus délicate à mettre en œuvre en pratique qu'en théorie, et que, d'autre part, il nous invite à y répondre avec pragmatisme (grilles CSS, dégradation gracieuse) et pédagogie.

Les « rustines » présentées dans l'ouvrage s'adressant plus précisément à Internet Explorer, elles sont, compte tenu de l'actuelle quasi-disparition de ce dernier du monde des navigateurs, moins indispensables aujourd'hui. L'exposé a néanmoins le mérite de nous inciter à rester vigilants quant à la possible diversité de prise en charge par les navigateurs des fonctionnalités à venir, dans un univers du Web où les spécifications évoluent constamment.

En revanche, les paragraphes traitant des nouveaux éléments HTML5 et propriétés CSS3 sans rapport direct avec le responsive web design, sujet central du livre, devraient, selon moi, être retirés de ce dernier au profit de références à des ouvrages qui leur sont entièrement consacrés, rassemblées dans une rubrique « Bibliographie » dont on regrette l'actuelle totale absence.

On déplorera plus encore le manque de soin apporté à cette édition française : espaces intempestives au sein du code et des URL, traductions françaises indésirables de contenus textuels dans le code et de morceaux d'URL (!), variation dans les commentaires HTML entre deux extraits d'un même code, citations et expressions encadrées par des guillemets droits au lieu de chevrons, etc.

De plus, l'impression en noir et blanc ne permet pas d'apprécier correctement les effets d'opacité et d'ombre illustrés dans le livre.

Ces défauts quant à la forme ne sont cependant pas rédhibitoires – les erreurs d'impression et de traduction sont aisément corrigeables par le lecteur – et compensés autant par le style, qui mettra en confiance le lecteur intimidé par cette méthode nouvelle de conception d'un site web, que par le contenu, où le développeur ayant déjà de bonnes notions du responsive web design trouvera, avec les fonctionnalités CSS3 avancées et certains scripts, de quoi enrichir ses connaissances.

Ce livre est destiné à tous ceux qui souhaitent appréhender et comprendre le HTML et les feuilles de style CSS. Il est divisé en deux grandes parties : une partie consacrée au langage HTML, et comme vous auriez pu le deviner, une autre partie pour les feuilles de style CSS.

Dans la première partie du livre, l'auteur nous fait redécouvrir les bases du langage HTML, le tout, accompagné de nombreux exemples de code complets illustrés par des captures d'écran. L'auteur s'applique à faire le parallèle entre le HTML4.0 et le HTML5, mettant en évidence ses nouveautés telles que le dessin 2D, les nouvelles balises sémantiques ou encore la géolocalisation, sans oublier de nous rappeler qu'il s'agit d'une technologie qui n'en est qu'à ses débuts.

La seconde partie du livre, dédiée au CSS, suit le même schéma. Allant des notions déjà présentes avant l'apparition du CSS3 jusqu'à ses nouveautés (les nouveaux sélecteurs, les bords arrondis, les polices personnalisées, etc.), là encore, des exemples de code sont également présents tout au long de cette partie afin d'illustrer chaque élément abordé.

En conclusion, j'ai vraiment pris du plaisir à lire ce bon livre que je recommande fortement à tous.

Il existe de nombreux ouvrages sur html et css mais celui-ci est le plus beau que j'ai pu voir. Ce n'est donc pas étonnant que son édition originale ait reçu l'Awwward 2012 dans la catégorie Livre. La mise en forme est vraiment la plus-value du livre ; elle le rend très agréable à lire.

Chaque chapitre commence par une présentation du thème abordé et se termine par un résumé qui rappelle les points essentiels. Des doubles pages au style identique structurent le contenu ; on identifie immédiatement les exemples, les pages de référence ou les pages de contexte.

Il est regrettable que quelques coquilles se soient glissées dans le code, surtout que l'ouvrage est clairement destiné à des néophytes qui devront garder un oeil critique s'ils remarquaient des incohérences. Espérons que ce soit corrigé dans de futures éditions, car ce type d'ouvrage très visuel est plutôt rare et mériterait d'être appliqué à d'autres sujets techniques.

Vu la qualité de l'ouvrage et son prix, il constitue en cette période de fin d'année un cadeau idéal pour les personnes qui envisagent d'améliorer leurs connaissances dans la création de contenus pour le Web.

Avec la prise en charge de plus en plus généralisée de HTML5 et CSS 3 par les navigateurs, beaucoup de livres sont consacrés à ces technologies émergentes. Cela n'est pas injustifié, car ces nouvelles moutures des spécifications apportent énormément de nouveautés qu'il est important de documenter.
Pour autant, il semble que les débutants soient les grands oubliés de cette évolution. En effet, à force de vouloir couvrir l'ensemble de ce qui a été ajouté (et donc de façon partielle puisque les spécifications ne cessent d'évoluer, de se préciser et la prise en charge réelle par les navigateurs est progressive) on en oublierait presque que HTML5 et CSS 3 reprennent aussi les précédentes versions.
De ce fait, un vide assez profond s'est creusé dans la « littérature » entre débuter dans la conception Web et se maintenir à niveau.
C'est précisément ce vide que tente de combler Jon Duckett dans « HTML&CSS. Design et création web ».

Le livre s'adresse aux débutants qui souhaitent apprendre les bases pour créer leur propre site Web, que ce soit en l'écrivant eux-mêmes ou en se basant sur un CMS ou un moteur de blog.

Il commence donc naturellement en présentant les notions de base du HTML : à quoi correspond la notion de balisage, quelle est la différence entre le balisage et le rendu puis une présentation progressive des différentes balises du langage. Le tout étant regroupé en différents thèmes qui permettent d'avancer progressivement dans l'apprentissage et de nombreuses illustrations concrétisant visuellement les points abordés. L'auteur n'hésite pas à présenter d'anciennes façons de coder aujourd'hui obsolètes, mais expliquant pourquoi il est possible de les rencontrer en examinant des sites existants.

Vient ensuite la partie sur CSS. Là encore, l'apprentissage se veut progressif, thématique et visuel grâce à de nombreuses captures d'écran. Malheureusement, passer en revue l'ensemble des capacités et des concepts rendrait le livre trop volumineux, mais l'essentiel y est pour permettre de comprendre le fonctionnement général des feuilles de style.

La dernière partie du livre revient sur les nouveaux éléments de structuration en HTML5 puis à l'étude de certains concepts de Webdesign, en particulier le découpage d'une page sous forme de grille et l'utilisation de bibliothèques CSS basées sur ce concept, avec divers exemples pour appuyer le propos.

Dans l'ensemble, le livre fait bien la part des choses entre les notions fondamentales de HTML et de CSS, les différents éléments de chaque langage et les évolutions récentes de ceux-ci. Si bien que le lecteur se trouve correctement armé pour approfondir son apprentissage.
Bien que facile à lire et bien adapté à son objectif, j'ai quand même déploré certains manques.
Par exemple, les notions d'encodage, pourtant essentielles ne sont pas évoquées. De même, bien que les aspects HTML5 et CSS 3 soient fréquemment rappelés, ils sont abordés de façon trop limitée alors que des concepts anciens (même présentés comme tels) semblent trop présents. Enfin, concernant la partie CSS, quelques points importants sont absents ou trop lacunaires. Si les notions de cascade et d'héritage sont correctement abordées, en revanche rien n'est dit sur le poids d'une déclaration, qui conditionne pourtant beaucoup de choses. De même, un aspect assez complexe de CSS, le positionnement, est décrit de façon un peu trop succincte.

Le livre est donc à conseiller aux débutants. Les thèmes sont abordés de façon didactique et progressive. Quant à l'écriture, manifestement soignée, elle est rendue par une traduction efficace.

Après le précédent livre de Garr Reynolds nommé "Presentation Zen", j'étais impatient de lire "Presentation Zen Design". Encore une fois, on se retrouve avec un livre assez joli, avec énormément d'exemples avant/après, et facile à lire.

On commence par nous expliquer l'importance du design, suivi d'une description des quatorze principes d'un bon design. Puis l'auteur fait un parallèle avec l'art japonais et en déduit une définition du zen à un design (aller à l'essentiel, sans fioriture). Le tout est résumé à la fin du chapitre. Chaque chapitre sera résumé, ce qui est très pratique.

Ensuite, on passe directement au concret avec le début de notre apprentissage sur les composants élémentaires avec la police de caractères. Le tout de manière concrète avec une liste de polices de caractères après les explications théoriques (taille, espace, crénage, interligne).
Puis de la même manière, l'utilisation de la couleur nous est présentée.
L'ajout de photos et de vidéos à une diapo suit avec, encore une fois, énormément de conseils (top 10 des erreurs, format d'image, cadrage).
Notre apprentissage sur les composants élémentaires s'achève avec le chapitre 5 sur la simplification des diapos avec des chiffres.
Commence alors l'étude des principes de création d'une bonne diapo avec un cours sur comment utiliser l'espace et comment raconter une histoire lors de nos présentations. Et ainsi de suite.

Lors de ces chapitres, un certain nombre de pages sont rédigées par des intervenants extérieurs afin d'approfondir certains points (comment faire/choisir une bonne photo).

On se retrouve avec un livre agréable à lire, avec de nombreux conseils pratiques et exemples. Par rapport à son premier livre, je trouve que celui-ci approfondit plus les bases et permet de mieux les assimiler et donc je conseille de le lire en premier et ensuite de lire son premier livre qui va plus loin.

Andy Budd, fondateur de "Clear Left" (www.clearleft.com) nous propose un vrai livre digne d'intérêt sur CSS.
Il est destiné à des développeurs déjà confirmés, car les techniques sont avancées, même si le premier chapitre donne des rappels très utiles et très importants pour organiser notre code.
Tout est donc bien séparé, ce qui permet de ne pas forcément lire ce livre dans l'ordre des pages.
Les indications sont claires et accompagnées de nombreux exemples simples, ce qui rend ce livre didactique et facile à comprendre et surtout à mettre en place.
Chaque chapitre nous explique une spécificité.

• Les boutons (liens) ;
• Le modèle de la Box ;
• Les backgrounds ;
• Les différents layouts (fixes, élastiques, liquides, etc.) ;
• Les menus ;
• Formulaires et tables ;
• Et enfin comment résoudre les bugs, souvent liés à IE.

Pour finir, 2 cas d'études (2 sites en entier) vraiment complets pour mettre en oeuvre tout ce qui a été appris tout au long du livre. jQuery est aussi utilisé ou plutôt survolé dans ces 2 cas. Toutes les sources sont téléchargeables.

Comme les autres "guides de survie" de Pearson, XHTML et CSS2 - L'essentiel du code et des commandes est un livre en format poche (11,5 x 18,5 cm), simple et pratique à transporter. Ce livre a pour objectif de livrer "l'ensemble des lignes du code XHTML et CSS 2 dont vous avez besoin pour réaliser un site web bien construit".

Construit sous la forme de mini-recettes classées par grands thèmes (textes, mise en page, tableaux, images, etc.), ce guide n'est pas exhaustif, seuls les éléments les plus "classiques" du XHTML et du CSS sont étudiés. Quelques exceptions subsistent, comme les effets visuels spécifiques à IE applicables à du texte ou des images. J'aurai apprécié à la place une approche sémantique des balises XHTML, et un approfondissement de certains aspects CSS, comme par exemple les problèmes de positionnement selon les navigateurs. Certaines astuces présentées sont tout de même intéressantes et pourront apporter un plus au design de votre site.

Au final, cet ouvrage me semble difficile d'accès pour un débutant, malgré un rapide rappel des bases dans le premier chapitre. Plus abordable que la documentation du W3C, il peut par contre s'avérer utile pour un développeur de niveau intermédiaire, connaissant déjà le XHTML et le CSS, mais pas au point de maîtriser les balises et les propriétés.

Dans cet ouvrage, l'auteur s'attaque aux trois piliers du Design Web :

• le (X)HTML
• les feuilles de style
• les images

Dans la première partie, l'auteur explique les fondements des pages HTML : les balises, leurs sémantiques, leurs fonctions. Elle prend notamment soin à détailler chaque fois que cela est nécessaire les différences (de syntaxe) entre le HTML et le XHTML. Elle s'efforce également de faire comprendre l'intérêt de respecter les standards.
Une fois les bases posées, elle traite les feuilles de style pour donner forme à nos pages. Là encore, elle détaille les principes fondateurs des CSS comme les notions de sélecteurs, l'héritage ou non des propriétés, les différents médias, etc. De nombreuses propriétés sont expliquées avec illustrations pour bien comprendre. Tout y est clair.
Enfin, elle s'attarde sur une partie généralement peu traitée d'ordinaire, me semble-t-il : la gestion des images pour le web. Quels sont les différents formats ? Lesquels utiliser ? Dans quelles circonstances ? Comment optimiser les images ? Autant de questions qui trouveront des réponses dans cet ouvrage.
L'auteur reste volontairement simple dans ses explications, ce qui la conduit à utiliser des "raccourcis" qui pourraient déranger les puristes mais la compréhension du débutant n'en est que meilleure.
Bref un livre clair et détaillé qui conviendra parfaitement à tous les débutants.
Juste un petit regret, les références faites aux solutions des grands éditeurs (Adobe Dreamweaver, Microsoft Expression Web... pour les créations de pages, Adobe Photoshop, Paint Shop Pro ... pour les images) qui sont à mon avis sans intérêt pour la compréhension du livre et de ses concepts. Ces solutions sont bien souvent trop onéreuses pour un simple web designer débutant alors que des solutions alternatives suffisantes pour débuter et surtout gratuites (Gimp ou Paint.net, par exemple, pour la gestion des images) existent.

Cet ouvrage débute par un long exposé s'appuyant sur un historique de la publication sur le web qui vous convaincra du bien fondé de l'utilisation des standards. Même si vous êtes déjà convaincu, cette première partie vous fournira des arguments et des exemples intéressants et concrets si vous devez convaincre à votre tour.

Ce livre intéressera les débutants qui veulent partir du bon pied avec les standards, mais le public visé reste essentiellement les designers de la vieille école qui auraient acquis de tenaces habitudes aujourd'hui obsolètes.

La deuxième partie de cet ouvrage introduit rapidement le XHTML puis le CSS avant de s'intéresser à des cas concrets (montage de designs). Ces études de cas constituent un fil rouge tout au long de cette partie et fournissent l'occasion d'aborder de nombreuses techniques en avançant pas à pas.

Cet ouvrage ne prétend pas constituer une référence pour les langages XHTML et CSS, mais nous pouvons tout de même regretter l'absence d'annexes. En effet, le ton léger, voir comique, de Jeffrey Zeldman ainsi que les nombreuses digressions qui nous mènent d'une technique à l'autre rendent ce livre agréable à lire de manière linéaire, mais difficile à exploiter si vous voulez, par la suite, retrouver rapidement une astuce.

Dans la nouvelle édition de son ouvrage, Jeffrey Zeldman, met à jour ses données pour les rendre d'autant plus aptes à convaincre le lecteur sur les bienfaits du respect des standards Web 3 (W3C).

Ce livre n'a pas pour but de vous enseigner directement l'utilisation des feuilles de style CSS. Il va tout d'abord vous renseigner (persuader) sur le pourquoi de la question.
Ainsi, si vous souhaitez apprendre rapidement à user des CSS pour créer votre site, ce livre n'est pas pour vous, ou du moins vous ne serez intéressé que d'une petite partie.
Si au contraire, vous avez soif de connaître l'histoire des CSS, de comprendre chacun de leurs bienfaits sur des exemples brillament choisis, de faire le tour des questions que l'on peut se poser quant aux CSS, avant d'entamer une seconde partie de cours peu linéaires car débordants d'astuces utiles mais cependant efficaces, alors vous trouverez votre compte dans l'ouvrage de Zedman.

L'auteur n'a pas froid aux yeux et touche dans son ouvrage à de nombreuses facettes (trop souvent ignorées ou négligées) de la création de sites internet : l'accessibilité, la typographie, DOM, les doctypes, et bien d'autres...

En conclusion,Si vous êtes ancien ou débutant dans le monde du web et désireux de comprendre pourquoi « 99,9% des sites sont encore et toujours « obsolètes », pourquoi certains navigateurs affichent mieux les sites (bien conçus) que d'autres, comment rendre un site « accessible » à diverses plateformes (dont certaines prévues pour les personnes handicapées), comment faire du travail propre, ré-exploitable...
Alors Zedman saura sans doute répondre à vos questions dans ce livre.

Suite à la lecture de ce livre, le premier mot qui me vient à l'esprit : apologie. En effet, ce livre est une belle apologie des standards du web. Voulant m'auto-former aux technologies du web, j'ai pensé que ce livre était parfait pour commencer. Vous aurez donc ici, la critique d'un néophyte.

Facile à lire, ce livre est à la fois complet et amusant.

Depuis l'apparition de ce livre dans sa version originale, beaucoup de choses on changées. Je n'ai jamais autant entendu parler ( entendre lire ) des standard du web ( XHTML, CSS, DOM, XML ) ces deux dernières années. Concernant le livre, il faut aussi avouer qu'il est surtout destiné aux webmasters de la vieille école, puisqu'il traite essentiellement de transition vers les standards.

Pour les néophytes comme moi, on y apprend énormément de choses tout au long de la lecture. Cependant, j'attire l'attention aux futurs lecteurs dans le même cas. Ayez au préalable de bonnes base sur HTML principalement et le web en général.

Pour ceux de la vieille école, ce bouquin est, je pense, idéal pour bien comprendre les enjeux des standards, et pour vous apprendre à passer en douceur cette transition. Mais la lecture de ce livre ne suffira pas, un apprentissage des langages XHTML et CSS, voire aussi XML, sera fortement nécessaire.

Pour les pros du web déjà concernés et initiés aux standards, je ne pense pas que ce livre leur apportera grand chose, et techniquement parlant, il ne leur en apprendra pas plus.

Il n'y a pas d'exercices dans ce livre, cela n'est pas le but, même si cela aurait été un vrai plus, mais l'épaisseur aurait certainement doublé, voire plus. Il faudra donc se pencher sur d'autres bouquins en critiques ici par ailleurs. On notera aussi que les images ne sont pas en couleur, ce qui est dommage, même si ce n'est pas une nécessité absolue.

Ayant vu quelques critiques sur le site de l'éditeur du genre : « on passe du coq à l'âne sans arrêt ». J'aimerais ajouter que ce n'est pas le sentiment que j'ai eu en le lisant. En effet, beaucoup de sujets se recoupent au fur et à mesure de la lecture, ce qui est normal puisque tout est lié. L'auteur a bien fait attention de nous rappeler, à chaque fois que cela était nécessaire, les autres chapitres et notions fondamentales concernés. Au lecteur de juger si cela est nécessaire de relire ou pas les passages mentionnés.

En bref : nous avons un auteur qui sait de quoi il parle, ses informations sont pertinentes. Un livre agréable à lire. Il nous apprend les bonnes notions de base de design, des standards et de l'accessibilité. Peut être que pour certains le fil du livre leur semblera un peu " fouillis ". Ce livre devrait avoir pour effet une prise de conscience de la part du lecteur et l'obliger à continuer d'explorer et d'apprendre les standards du web.

Une mine d'or sur HTML et CSS.

Facile à lire, ce livre est à la fois complet et amusant.

Complet en ce sens qu'il présente toutes les facettes de CSS. On retrouve ainsi les avantages, les contraintes, les techniques à utiliser pour permettre l'utilisation d'un CSS fonctionnel Quels que soient le ou les navigateurs ciblés et aussi des exemples s'y rapportant.

Amusant car le livre est écrit dans un langage très proche du langage parlé. Ainsi, il se lit comme un roman avec des moments sérieux - heureusement - et des moments d'humour - on s'écarte même parfois du sujet avant de le retrouver assez vite -.

Après quelques jours de lecture, on est aussi satisfait d'avoir lu ce livre que si on avait lu le dernier Harry Potter. On en ressort par ailleurs d'autant plus satisfait que nos connaissances ont augmentés et que notre approche du web a été remise dans le droit chemin. Un seul regret: ce livre nous donne envie de retravailler toutes nos pages qui ne respectent pas les règles présentées dans le livre.

Refaire le design d'un site ne consiste pas seulement à changer quelques images et à modifier sa charte graphique. Bien au contraire, ce "re-design" doit être l'occasion d'une vaste réflexion sur le site, sur ce que l'on en attend, sur ce que l'on souhaite mettre en avant ...
Dans ce livre, les auteurs abordent toutes les phases qui doivent nous conduire à la refonte du site et nous proposent une méthodologie pour mener à bien cette entreprise : Collecter des informations sur les clients, gérer le budget, établir un planning, développer le gabarit du site, établir des tests utilisateurs, séparer la phase design de la phase développement ... autant de thèmes abordés dans ce livre afin de nous guider tout au long de notre travail et nous permettre de réaliser un site web performant et adapté aux attentes du client.
Chaque phase cruciale est abordée, illustrée par des exemples et des images pour faciliter notre compréhension, enrichie de questionnaires afin de cerner les besoins des clients, etc. Par ailleurs, les auteurs ont su s'entourer d'acteurs reconnus du Web tel Eric Meyer qui nous font profiter, dans leur domaine respectif, de leurs conseils avisés.
Bref, un livre à posséder par tous ceux qui sont ou seront amener à se poser la question du redesign web