IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Les feuilles de style CSS

16 livres et 20 critiques, dernière mise à jour le 4 septembre 2022 , note moyenne : 4.6

  1. CSS 3 Flexbox
  2. CSS3 - Pratique du design web
  3. CSS3 pour les web designers - A Book Apart n°2
  4. Sass pour les web designers - A Book Apart n°10
  5. CSS avancées - Vers HTML5 et CSS3
  6. CSS3 pour les Web designers
  7. Css: The Missing Manual
  8. Conception de sites Web avec les CSS
  9. CSS par l'exemple
  10. CSS - Techniques professionnelles pour une mise en page moderne
  11. CSS - La référence
  12. Le Zen des CSS
  13. Transcender CSS - Sublimez le design web !
  14. Pratique de CSS et Javascript
  15. XHTML et CSS - Cours et exercices
  16. Pratique de CSS et Javascript
couverture du livre CSS 3 Flexbox

Note 5 drapeau
Détails du livre
Sommaire
Critiques (1)
0 commentaire
 
 

CSS 3 Flexbox

de
Public visé : Expert

Résumé de l'éditeur

Flexbox est en passe de révolutionner de manière profonde et pérenne notre façon de concevoir des designs et des composants en CSS. Pourquoi y consacrer un ouvrage ? Car, bien utilisé, Flexbox permet de faciliter la tâche de bon nombre de développeurs web.

Un ouvrage de référence pour les webdesigners et intégrateurs

« Flexible Box Layout Module », mieux connue sous le nom de « Flexbox », est une spécification CSS 3 du W3C qui définit un nouveau modèle de boîte et de positionnement jusqu’alors inédit. Il intègre une gestion naturelle de la fluidité des éléments et du Responsive, et rend caduc l’usage de grilles d’affichage complexes, voire de frameworks – véritables usines à gaz où l’on n'exploite qu’à peine 10% de l’outil. Oubliez donc tout ce que vous aviez appris sur CSS et, comme moi, tombez amoureux de Flexbox !

Outre la simplification des schémas de positionnement, Flexbox apporte des solutions parfaites à une problématique bien ancrée dans notre époque : le Responsive Webdesign. Le design d’éléments flexibles, la réorganisation des blocs ainsi que la faculté à basculer très aisément d’un mode d’affichage horizontal vers un mode vertical en font un allié formidable dans nos projets d’adaptation aux tablettes et smartphones.

Une spécification CSS 3 novatrice

Flexbox a été pensé et optimisé pour faire table rase de toutes les techniques bancales historiques de positionnement et des contournements de propriétés qui pullulent dans nos projets web. Les « anciennes » méthodes encore (mal) utilisées de nos jours pour aligner ou placer des éléments ne sont souvent rien d’autre que du bricolage empirique : « tiens, à quoi peut bien servir ce position : relative ? », « pas grave, je mets une classe .clearfix partout ! », « oh ! mais pourquoi ça ne veut pas rentrer ? », etc.

Flexbox est conçu pour mettre de l’ordre dans tout ce maelström de bidouilles et revenir enfin aux bases d'un positionnement propre et adapté aux besoins actuels. Cet ouvrage vous permettra de découvrir et de tirer parti de toutes les nouveautés apportées par cette spécification CSS 3, notamment à travers six travaux pratiques…

À qui s’adresse cet ouvrage ?
  • Aux webdesigners et intégrateurs avancés ou experts qui souhaitent appréhender et maîtriser en production ce nouveau modèle de positionnement excitant.
  • Aux développeurs et chefs de projet web soucieux de découvrir les rouages d’une technologie qui facilitera assurément la vie de leurs projets.
  • À quiconque est impatient de laisser tomber toutes les bidouilles ancestrales de CSS et d’ouvrir ses horizons à des modèles bien plus intuitifs.

Édition : Eyrolles - 134 pages, 1re édition, 18 février 2016

ISBN10 : 221214363X - ISBN13 : 9782212143638

19 cm x 23 cm ; 408 g ; couleurs

Commandez sur www.amazon.fr :

19.90 € TTC (prix éditeur 19.90 € TTC)
  • Une brève histoire de Flexbox
  • Les bases du design avec Flexbox
  • TP : réordonner des éléments
  • Trois astuces utiles
  • TP : une navigation Responsive
  • TP : un gabarit simple
  • TP : une galerie d'images
  • Les principes fondamentaux
  • TP : un formulaire fluide
  • La propriété flex en détail
  • Modèles de design
  • TP : construction de grilles
  • Encore plus loin avec Flexbox
  • Performances et compatibilité
  • Flexbox contre Grid Layout ?
  • Ressources utiles
  • Annexe – Mémo des propriétés
Critique du livre par la rédaction David Bleuse le 9 mars 2022
Tout entier consacré à un module spécifique de CSS, le livre se présente comme un ouvrage spécialisé destiné à un public ayant déjà de solides connaissances dans ce langage : les études de cas détaillées ont notamment recours aux media queries, aux pseudo-classes et pseudo-éléments, à la valeur-fonction calc, au compteur, aux instructions SASS et LESS.

Il n’est pas rébarbatif pour autant grâce à un « ton […] volontairement léger » (Avant-propos) et un juste dosage des développements théoriques qu’une sélection pertinente de ressources de différentes natures (chapitre 16) permettra en outre au lecteur d’approfondir.

À cela s’ajoute le fait que le livre – et c’est sans doute là sa plus grande originalité – a pris le parti de privilégier l’explication par l’exemple. Par le biais de travaux pratiques proposant la création d’effets esthétiques, la répartition de composants dans un bloc ou l’organisation de blocs au sein d’une page, l’auteur démontre la grande polyvalence de Flexbox.

Si la construction d’une grille adaptable constitue l’aboutissement des exercices qui l’ont précédée, l’auteur reconnaît que Flexbox doit ici céder le pas à Grid Layout, que ce dernier surpasse dans ce genre de tâches. Il nous en présente les principales propriétés en fin d’ouvrage, ouvrant ainsi la réflexion aux autres possibilités offertes récemment par CSS en matière de positionnement.

Alors qu’il est censé les prendre en charge à parts égales, CSS a toujours mis à notre disposition un ensemble de propriétés bien plus réduit et moins efficace pour la mise en page de la page web que pour sa mise en forme.

Jusqu’à une date récente, le positionnement dans la page web des éléments la constituant n’a pu être obtenu qu’au prix d’un détournement de leur finalité première de techniques telles que les flottants ou les tableaux CSS. Ce qui, à première vue, ressemble à une extension ingénieuse des possibilités du langage devrait plus modestement être considéré comme du « bricolage empirique » (Avant-propos).

Premier pilier d’une refonte complète des méthodes de positionnement en CSS (l’autre étant Grid Layout), Flexbox remise au placard les « bidouillages » historiques et rend aux propriétés sur lesquelles reposaient ces derniers leur fonction propre.

Si la réponse apportée dès 2003 par Safari au problème du positionnement démontre que la nécessité d’une remise à plat des techniques utilisées dans ce domaine est depuis longtemps dans les consciences des acteurs du Web, il aura fallu attendre près de dix années supplémentaires avant de bénéficier d’une solution décrite dans une spécification suffisamment stable (chap. 1 Introduction).

Publié peu de temps après, le livre nous dévoile les grandes lignes de Flexbox tout en privilégiant l’enseignement par l’exemple.

La spécification en condensé

Par les choix retenus quant à son sujet et à la manière de le traiter, le livre suscite déjà notre intérêt : il se focalise sur une technologie particulière ; il l’aborde à travers la résolution de problèmes concrets. Ce constat en deux points étant posé, il convient cependant d’en nuancer le dernier. En effet, l’étude formelle de Flexbox n’est pas pour autant laissée de côté. Plutôt que de limiter celle-ci à quelques rappels et restreindre par conséquent son lectorat aux seuls intégrateurs web ayant déjà des connaissances en la matière, l’auteur a choisi de s’adresser à un public plus large auquel il fournit tous les éléments nécessaires à une correcte prise en main de ce nouvel outil. Commençant par les bases, il décrit le rôle et les valeurs de chacune des propriétés ayant trait à l’alignement, la taille et le classement (chap. 2).

La spécification a néanmoins ses subtilités. En renvoyant leur examen au milieu et à la fin de l’ouvrage, l’auteur, d’une part, évite d’assommer d’entrée son lecteur avec une partie théorique trop imposante et, d’autre part, fidèle à son intention originelle, conserve aux applications pratiques la priorité.

On en apprend à cette occasion davantage sur le calcul des tailles : lorsque celles-ci sont autorisées à grandir (chap. 10 §5) ou à rétrécir (chap. 10 §6) ou quand entrent en conflit leurs différentes définitions (chap. 8 §2).

On comprend mieux également les interactions de Flexbox avec son environnement : contexte d’empilement (chap. 13 §5), animations (chap. 13 §7) et lecteurs d’écran (chap. 13 §8).

Parce qu’à la date de publication du livre, Flexbox faisait encore figure d’innovation, un chapitre consacré à sa compatibilité avec les différents navigateurs web s’imposait. C’est moins le cas aujourd’hui : Flexbox bénéficie désormais d’un large support ; si des bogues persistent, malgré tout, chez Internet Explorer 10 et 11 (chap. 14 §3), ils ont moins d’impact depuis que le navigateur historique de Microsoft ne détient plus qu’une part de marché insignifiante.

Flexbox doit néanmoins être utilisé avec discernement ; en dépit de l’apport indéniable qu’il représente en matière de positionnement, il soutient les autres propriétés (display, position, etc.) dédiées à ce domaine sans les remplacer pour autant (chap. 15 §1).

De plus, « Flexbox est prévu pour des modules dans une dimension, pas vraiment pour des gabarits complets ou des grilles à plusieurs dimensions » (chap. 15 §1). La gestion de ces derniers a été assurée tant bien que mal par Flexbox jusqu’à ce que Grid Layout, qui a été spécifiquement conçu pour cette tâche, prenne le relais. L’auteur nous en présente, dans un chapitre dédié, d’une part, les principales propriétés et, d’autre part, les effets, à partir de quelques exemples (chap. 15 §2). Devenu une technologie mature, Grid Layout s’est depuis vu consacrer un ouvrage entier, signé par le même auteur et publié dans la même collection que ce livre-ci auquel il fait pendant.

Les applications in extenso

Appliqué aux composants récurrents des pages web, Flexbox demeure une arme efficace. L’auteur nous en fait la démonstration en choisissant comme sujet d’étude un menu de navigation (chap. 5) et un formulaire (chap. 9). Nous sommes plus encore convaincus lorsqu’il s’attaque aux problèmes complexes consistant à construire de toutes pièces une fenêtre modale ou un écran affichant successivement les différentes étapes d’une transaction (« tunnel d’achat ») (chap. 13 §9).

Flexbox s’avère également une réponse pertinente à la création d’effets esthétiques. Si le premier exercice du livre, portant sur l’emplacement d’une photo par rapport à son texte environnant (chap. 3) ne constitue qu’une mise en jambes, la création d’une ligne horizontale traversant un titre ou reliant, en pointillés, dans une liste, un item à la valeur qui lui est associée (« points de conduite ») (chap. 13 §9) sont autant de solutions astucieuses à des problèmes classiques. Les propositions constituant ces différents exemples d’application ne se réduisent pas à la partie centrale du code. L’auteur s’attache, en effet, à rendre celles-ci compatibles avec l’ensemble des appareils existants. Il a systématiquement recours au responsive web design, même quand ce dernier ne nécessite pas l’utilisation de Flexbox (chap. 5 §3), au risque, parfois, d’enfreindre la règle du « mobile first » (chap. 3 §3, chap. 5 §6). Il garde également en tête les problèmes d’accessibilité, par exemple en fournissant aux lecteurs d’écran la traduction textuelle d’un logo cliquable (chap. 5 §2).

Plus ambitieux, le projet de construction d’une mosaïque ne déformant pas les photos de dimensions diverses la composant et maintenant entre elles des gouttières d’égale largeur (chap. 7 Intro.) me semble à la fois le plus spectaculaire et le plus abouti. La solution mise en avant a le double intérêt, d’une part, de montrer un cas d’utilisation des propriétés object-fit et object-position (chap. 7 §4), non évoquées jusqu’ici, et, d’autre part, de ne pas être triviale ! Aussi, dans un souci de pédagogie, l’auteur nous présente, dans un premier temps, des tentatives plus intuitives et nous explique, dans la foulée, en quoi elles sont imparfaites (chap. 7 §2 et 3).

La majorité des cas pratiques du livre est néanmoins consacrée au domaine d’application d’origine de Flexbox : l’organisation de la page web. Les plus simples d’entre eux expliquent comment recouvrir cette dernière avec deux blocs d’information (chap. 4 §1) ou une série d’éléments homogènes (chap. 11).

Ils démontrent également la formidable aisance avec laquelle Flexbox vient à bout de problèmes réputés jusque-là presque insolubles : le centrage vertical (chap. 4 §2) ; le Holy Grail (autrement dit, « Saint-Graal »), désignant, pour faire simple, un gabarit à la partie centrale fluide et aux parties latérales de dimensions fixes (chap. 6).

Ces différentes propositions d’agencement rigide servent de base à la construction d’une grille modulable qui est à ces dernières ce que le puzzle reconstitué est aux pièces qui le composent. Elle s’inspire de KNACSS : conçue et mise librement à disposition par l’agence web Alsacréations – dont l’auteur est le fondateur et codirigeant –, elle s’inscrit dans la lignée des grilles basées sur Flexbox, dont les principales sont énumérées dans l’ouvrage (chap. 12 §2). Les techniques entrant en jeu sont décrites une à une, notamment « une astuce devenue un grand classique » pour éviter l’apparition inopportune d’une gouttière à gauche de l’écran, quelle que soit la dimension de celui-ci (chap. 12 §5). Soucieux d’efficacité, l’auteur, comme il l’a d’ailleurs fait dans un précédent exercice (chap. 11 §2), détaille les instructions à soumettre à un préprocesseur CSS afin de faciliter et automatiser l’écriture du code (chap. 12 §6 et 7).

N’oublions pas, cependant, comme il a été dit précédemment, que Flexbox n’est pas l’outil le mieux adapté pour organiser une page web dans sa globalité.

Enfin, la facilité avec laquelle les grilles permettent de réaliser un design fluide est contrebalancée par le fait qu’en reposant sur des classes traduisant des options de mise en page, elles ne respectent pas l’une des règles fondamentales du développement web : la séparation du fond et de la forme. Ceci est néanmoins un autre débat, débordant du cadre de ce livre…




 Commenter Signaler un problème

Avatar de David Bleuse David Bleuse - Membre expérimenté https://www.developpez.com
l 24/04/2022 à 21:48


Flexbox est en passe de révolutionner de manière profonde et pérenne notre façon de concevoir des designs et des composants en CSS. Pourquoi y consacrer un ouvrage ? Car, bien utilisé, Flexbox permet de faciliter la tâche de bon nombre de développeurs web.

Un ouvrage de référence pour les webdesigners et intégrateurs

« Flexible Box Layout Module », mieux connue sous le nom de « Flexbox », est une spécification CSS 3 du W3C qui définit un nouveau modèle de boîte et de positionnement jusqu’alors inédit. Il intègre une gestion naturelle de la fluidité des éléments et du Responsive, et rend caduc l’usage de grilles d’affichage complexes, voire de frameworks – véritables usines à gaz où l’on n'exploite qu’à peine 10% de l’outil. Oubliez donc tout ce que vous aviez appris sur CSS et, comme moi, tombez amoureux de Flexbox !

Outre la simplification des schémas de positionnement, Flexbox apporte des solutions parfaites à une problématique bien ancrée dans notre époque : le Responsive Webdesign. Le design d’éléments flexibles, la réorganisation des blocs ainsi que la faculté à basculer très aisément d’un mode d’affichage horizontal vers un mode vertical en font un allié formidable dans nos projets d’adaptation aux tablettes et smartphones.

Une spécification CSS 3 novatrice

Flexbox a été pensé et optimisé pour faire table rase de toutes les techniques bancales historiques de positionnement et des contournements de propriétés qui pullulent dans nos projets web. Les « anciennes » méthodes encore (mal) utilisées de nos jours pour aligner ou placer des éléments ne sont souvent rien d’autre que du bricolage empirique : « tiens, à quoi peut bien servir ce position : relative ? », « pas grave, je mets une classe .clearfix partout ! », « oh ! mais pourquoi ça ne veut pas rentrer ? », etc.

Flexbox est conçu pour mettre de l’ordre dans tout ce maelström de bidouilles et revenir enfin aux bases d'un positionnement propre et adapté aux besoins actuels. Cet ouvrage vous permettra de découvrir et de tirer parti de toutes les nouveautés apportées par cette spécification CSS 3, notamment à travers six travaux pratiques…

À qui s’adresse cet ouvrage ?

  • Aux webdesigners et intégrateurs avancés ou experts qui souhaitent appréhender et maîtriser en production ce nouveau modèle de positionnement excitant.
  • Aux développeurs et chefs de projet web soucieux de découvrir les rouages d’une technologie qui facilitera assurément la vie de leurs projets.
  • À quiconque est impatient de laisser tomber toutes les bidouilles ancestrales de CSS et d’ouvrir ses horizons à des modèles bien plus intuitifs.


Lire la suite



 
couverture du livre CSS3

Note 5 drapeau
Détails du livre
Sommaire
Critiques (1)
1 commentaire
 
 

CSS3

Pratique du design web

de
Public visé : Intermédiaire

Résumé de l'éditeur

Vingt ans après sa conception, le langage CSS n'en est plus à ses balbutiements et n'est plus optionnel en ce qui concerne la conception web moderne. Sans le moindre concurrent en vue, CSS a encore de belles années devant lui. Et pour cause, il est toujours en perpétuelle évolution !

Ce livre n'a pas pour prétention d'être le guide ultime de l'intégrateur dans la mesure où il ne reprend pas les bases. Il offre simplement une mise à niveau en levant le voile sur tous les modules CSS, afin d'offrir dès aujourd'hui les connaissances nécessaires à la réalisation de sites et d'applications web. En effet, les enjeux comme les objectifs ne sont plus les mêmes qu'il y a quelques années, aussi est-il important que les intégrateurs, designers et développeurs s'arment face aux nouvelles problématiques que sont le Responsive Web Design, le rétrécissement de l'écart entre le Web et le natif, et la course à la performance.

Qu'il s'agisse de mise en page avec Flexbox ou Grid Layout, d'embellissement des interfaces, d'élaboration d'animations ou même de design fluide avec les Media Queries, vous devriez être capable de maîtriser tous ces sujets au sortir de votre lecture.

Au-delà de l'aspect purement didactique de l'ouvrage, vous trouverez un grand nombre d'exemples et de mises en pratique, ainsi que tout ce que vous devez savoir vis-à-vis du support des fonctionnalités par les navigateurs. Pour finir, vous découvrirez dans les annexes la liste des valeurs par défaut des propriétés CSS, celle des propriétés que l'on peut animer et une bibliographie pour aller plus loin.

Édition : Eyrolles - 354 pages, 4e édition, 26 février 2015

ISBN10 : 2212140231 - ISBN13 : 9782212140231

19 cm x 23 cm ; 958 g ; quadri

Commandez sur www.amazon.fr :

34.90 € TTC (prix éditeur 34.90 € TTC)
  • L'état actuel du W3C et des standards CSS
    • Une évolution implacable
    • Un tour d'horizon des navigateurs d'aujourd'hui
    • L'état actuel des standards
    • L'aventure des préfixes constructeurs
    • La standardisation des CSS
       
  • Les sélecteurs : l'accès au DOM
    • Les opérateurs
    • Les sélecteurs d'attribut
    • Les pseudo-classes de position
    • Les pseudo-classes de contexte
    • Les pseudo-classes de formulaire
    • Les pseudo-éléments

     
  • Positionnement et layout : les nouvelles techniques de mise en page
    • Le modèle de boîte : retour aux sources avec box-sizing
    • Le multicolonne
    • Les modèles de boîtes flexibles avec Flexbox
    • Le Grid Layout
    • La position « sticky »
    • Les régions
    • Les masques de forme en CSS

     
  • Interfaces graphiques et amélioration visuelle
    • Des couleurs plus colorées
    • L'opacité
    • Des bords arrondis en CSS
    • Des ombres avec box-shadow
    • Des ombres de texte avec text-shadow
    • Des dégradés
    • Un meilleur contrôle des arrière-plans
    • Les filtres CSS
    • pointer-events
    • Des images comme bordures

     
  • De nouvelles unités et valeurs
    • Le Saint-Graal des calculs : calc
    • Root em : l'évolution de l'unité em
    • Une unité pour la largeur d'un caractère : ch
    • Les unités relatives au viewport
    • Les dimensions intrinsèques

     
  • Contrôle du texte
    • La gestion des débordements avec overflow-wrap
    • La gestion des espaces avec white-space
    • Les débordements de texte et text-overflow
    • Les césures avec hyphens
    • Les césures agressives avec word-break
    • La gestion des tabulations avec tab-size
    • Une ponctuation plus élégante avec hanging-punctuation
    • De meilleurs alignements avec text-align-last
    • La restriction de caractères avec unicode-range
    • Cas pratique : des blocs de code qui donnent envie

     
  • Variables natives
    • Comment ça marche ?
    • La syntaxe
    • Les variables invalides
    • Les valeurs de recours en cas d'invalidité
    • Cas particuliers et clarifications
    • La compatibilité des navigateurs pour les variables natives

     
  • Styles conditionnels
    • Feature Queries
    • Media Queries

     
  • Transformations : un nouveau monde en 2D et en 3D
    • À quoi servent les transformations CSS ?
    • Les transformations 2D
    • L'origine de transformation
    • L'ordre des transformations
    • Les transformations 3D
    • Cas pratique : effet card flip

     
  • Animations et transitions : pour des interfaces moins statiques
    • À quoi servent les animations ?
    • Animation ou transition ?
    • À propos de l'accélération matérielle
    • JavaScript ou CSS ?
    • Les transitions
    • Les animations

     
  • Annexe A – Liste des propriétés CSS et de leur valeur par défaut
     
  • Annexe B – Liste des propriétés CSS qui peuvent être animées
    • Notes
    • Ce que l'on aimerait pouvoir animer

     
  • Annexe C – Ressources et liens
    • Sites francophones
    • Sites anglophones
    • Newsletters
    • Comptes Twitter
    • Bibliographie

Critique du livre par la rédaction David Bleuse le 26 février 2019
« CSS est à la fois très simple et très compliqué » (Préface).

Chris Coyier, auteur de la préface de l'ouvrage, nous rappelle, en effet, que la simplicité de l'anatomie d'une feuille de styles – une succession de règles composées de déclarations, chacune définie comme un couple propriété/valeur – tend à faire oublier la complexité bien réelle de son fonctionnement.

Au cours des années récentes, profitant, sans doute, de l'impulsion donnée par la restructuration opérée au sein des organes de standardisation (chapitre 1 §3), CSS a connu une évolution impressionnante, s'enrichissant de fonctionnalités nouvelles toujours plus nombreuses et sophistiquées, au point que le W3C a décidé de spécifier ces dernières et de regrouper les spécifications déjà existantes au sein de modules dédiés, venant se substituer à la spécification globale, dont la version 2.1 est l'ultime. À cet égard, de l'aveu même des auteurs du livre, le titre qu'ils ont choisi de lui attribuer est ironique : « CSS 3 n'existe pas » ! (chap. 1 §5.)

L'époque actuelle semble être marquée par un plus strict respect des spécifications qu'au cours de la période qui a précédé, où les implémentations non conformes et les fonctionnalités propriétaires étaient monnaie courante. De fait, on assiste aujourd'hui à une certaine « stabilisation » (chap. 1 §1). Mais celle-ci est, à vrai dire, relative ; en effet, face au rythme soutenu des innovations amenées par les spécificateurs, l'implémentation de ces dernières s'effectue avec plus ou moins de réactivité selon les moteurs de rendu, d'où des prises en charge pouvant différer d'un navigateur à l'autre.

Gérer la compatibilité inter-navigateurs, mais aussi « produire du code lisible et maintenable dans la durée » et « gagner en performance », font partie des tâches que l'intégrateur web doit plus que jamais prendre en compte, dans le cadre d'un projet passé de l'âge de l'artisanat à celui de l'« industrialisation », et devenu, par conséquent, plus complexe (chap. 1 §1).

L'ajout de fonctionnalités spécifiques et l'appui d'outils dédiés ont permis à CSS d'assurer cette transition, de même qu'il a su accompagner l'avènement du « Web mobile » (chap. 1 §1) grâce à l'intégration de modules supplémentaires permettant à la page web de s'adapter aux écrans de taille réduite. Cependant, moyennant l'utilisation de quelques autres propriétés, c'est une complète gestion de l'espace que CSS nous propose de réaliser.

Une stabilisation relative

Offrir une expérience utilisateur équivalente à l'ensemble des internautes est un défi pour le développeur web, quand on considère que les navigateurs dont ces derniers sont équipés ne sont pas tous au même niveau au regard de l'interprétation des spécifications.

Prenant le relais de JavaScript (JS) et de sa bibliothèque Modernizr, la directive @supports permet de vérifier directement dans la feuille de styles si telle propriété est, ou non, prise en charge (chap. 8 §1). Si ce n'est pas le cas, on pourra éventuellement recourir à une solution propriétaire, à l'image des quatre filtres spécifiques à Internet Explorer, dont les auteurs nous présentent non seulement la syntaxe, mais aussi les limites (chap. 4 §2, 6, 7 et chap. 9 §2). Si ces derniers n'hésitent pas, ainsi, à nous conseiller l'usage de propriétés non standardisées en vue de pallier les lacunes des anciennes versions des navigateurs, ils nous dissuadent, au contraire, d'utiliser celles introduites par un éditeur en position dominante (chap. 1 §2) dans le seul but de concurrencer des propriétés déjà existantes (chap. 8 §1).

Tester, à l'inverse, une nouvelle propriété avant sa complète finalisation a été, jusqu'à présent, le rôle des préfixes constructeurs, employés dans leur code par les développeurs web ; mais en raison du mésusage que ces derniers en ont fait, ils sont désormais remis en cause par les navigateurs qui se sont attribués, par l'intermédiaire d'un flag, la charge des tests (chap. 1 §4). On devra néanmoins se contenter de la méthode historique en attendant que l'utilisation de ce dernier se généralise.

Les auteurs ont mis un soin particulier à nous préciser, pour chacune des fonctionnalités décrites dans l'ouvrage, les préfixes constructeurs requis pour que celle-ci fonctionne dans les principaux navigateurs (cinq dédiés aux ordinateurs de bureau, sept aux appareils mobiles) qui les supportent et les versions de ces derniers à partir desquelles ils ne sont plus nécessaires. De plus, dans le cas où une fonctionnalité n'est supportée qu'imparfaitement par un ou plusieurs navigateurs, les auteurs ont poussé la précision jusqu'à détailler, pour chacun d'eux, en quoi consistent leurs limites.

Un code simplifié

La fin programmée des préfixes constructeurs, en outre, partage avec d'autres avancées de CSS l'avantage de simplifier la production du code et de rendre celui-ci plus lisible.

Des erreurs de programmation sont parfois dues à une mauvaise compréhension, de la part des développeurs, de la façon dont les navigateurs interprètent certaines propriétés. L'exemple le plus emblématique est celui du modèle de boîte, où la propriété width désigne la largeur non de la boîte proprement dite, mais de son seul contenu. La propriété box-sizing a pour ambition de résoudre ces difficultés en offrant la possibilité au développeur, s'il le souhaite, de basculer en mode Quirks, modèle inventé, jadis, par Microsoft, et selon lequel la largeur définie pour un élément correspond à celle de l'élément tout entier (chap. 3 §1).

Quant à l'unité rem, elle simplifie la définition des forces de corps en ne la faisant pas dépendre – contrairement à em, qu'elle se propose de remplacer – des tailles de caractères définies au niveau des éléments ascendants (chap. 5 §2).

Lorsqu'il s'agit de sélectionner un élément du DOM à une position fixe, les pseudo-classes de position (chap. 2 §3) s'acquittent de leur tâche aussi bien que les opérateurs d'adjacence directe (chap. 2 §1), mais avec une syntaxe incomparablement plus synthétique.

Le gain en clarté est encore plus flagrant avec la pseudo-classe :matches dans le cas d'un sélecteur devant combiner plusieurs éléments (chap. 2 §4).

Les couleurs sont définies de manière plus claire et intuitive par l'intermédiaire de leurs teinte, saturation et luminosité, ou plus directement par celui d'un simple nom extrait d'un nuancier, qui existe, certes, depuis les débuts de CSS, mais qui est désormais étoffé (chap. 4 §1).

Une couleur n'y figurant pas pourra néanmoins, elle aussi, être identifiée par un nom. La stratégie ici évoquée repose sur l'utilisation de variables ; elle se généralise, bien sûr, aux valeurs de toute nature et offre, surtout, les avantages d'éviter certaines redondances dans le code et d'en faciliter la maintenance (chap. 7). Le livre ne se contente pas de nous en décrire un cas d'usage standard, mais nous explique comment sont gérées les erreurs : valeur invalide (chap. 7 §4), référence circulaire (chap. 7 §5).

Une variable est particulièrement bien adaptée pour contenir le résultat d'un calcul impliquant des valeurs exprimées dans des unités différentes. Celui-ci peut dorénavant être effectué directement dans CSS grâce à la fonction calc (chap. 5 §1).

Les innovations majeures que constituent les variables et les calculs viennent combler certaines des lacunes qui furent à l'origine de l'invention des préprocesseurs CSS (chap. 1 §1). Ceux-ci conservent néanmoins toute leur utilité, notamment quand il s'agit de générer automatiquement des lignes de code qu'il serait trop long ou pénible d'écrire à la main, ainsi qu'il est montré à différents endroits du livre avec des procédures SASS prêtes à l'emploi.

Des performances accrues

De la même façon qu'il commence à s'affranchir des préprocesseurs, CSS prend désormais à sa charge des tâches qui étaient jusqu'à présent du ressort de JS. Il est ainsi capable de gérer quelques opérations conditionnelles rudimentaires : mettre en forme différemment un champ de formulaire selon qu'il est ou non correctement renseigné (chap. 2 §5) ; éditer des points de suspension à la place de la partie tronquée d'un message débordant de son conteneur (chap. 6 §3) ; arrimer un élément au sommet de l'écran dès qu'il a atteint cette position, suite à un défilement (chap. 3 §5).

Cependant, c'est sans doute dans la gestion d'actions temporelles que réside une des évolutions récentes de CSS les plus significatives : si le recours à JS reste pertinent pour des réalisations complexes (chap. 10 §4), CSS peut en revanche effectuer des animations simples de manière autonome.

S'il convient de distinguer l'animation à proprement parler de la transition (chap. 10 §2), toutes deux, cependant, exploitent les transformations (chap. 9), elles-mêmes de deux sortes : 2D (chap. 9 §2) et 3D (chap. 9 §5). Ces dernières sont abordées essentiellement à travers une application concrète produisant un effet « retourné de carte » (chap. 9 §6).

L'ouvrage nous montre, en outre, comment une transition peut aider l'utilisateur à anticiper un changement de vue (chap. 10 §1), et nous détaille un cas pratique permettant d'obtenir un tel résultat (chap. 10 §5).

Plusieurs autres extraits de code, utilisant cette fois-ci des animations, se proposent de construire de véritables applications telles qu'un « anti-spoiler », mettant en œuvre, de manière particulièrement subtile, une grande partie des possibilités offertes par CSS, et concluant le chapitre en beauté (chap. 10 §6) !

Non content de prendre le relais de JS quand il s'agit de gérer des animations ou interactions de base, CSS sait dorénavant se passer des images, jadis indispensables, pour la réalisation de graphismes sophistiqués. Il en va ainsi de différents effets tels que les éléments ombrés (chap. 4 §4), le texte en relief (chap. 4 §5), les dégradés (chap. 4 §6) ou les bordures personnalisées (chap. 4 §10).

Le modèle de boîte sur lequel repose, depuis toujours, CSS impose une forme rectangulaire au conteneur. Une application astucieuse des bords arrondis permet cependant de donner à celui-ci l'apparence d'un cercle (chap. 4 §3).

Si les pseudo-éléments (chap. 2 §6) ont pour mission première d'ajouter un complément d'information à un contenu textuel – comme on peut le voir sur quelques exemples où ils sont associés à des sélecteurs d'attribut (chap. 2 §2) –, les auteurs nous montrent, prenant pour illustration l'ingénieuse réalisation d'un « step wizard », qu'ils peuvent aussi servir à créer des éléments aux bords biseautés (chap. 9 §2).

Plus généralement, les masques de forme nous libèrent des rectangles en conférant à un conteneur n'importe quelle forme géométrique simple (chap. 3 §7).

CSS ne saurait évidemment remplacer une image complexe telle qu'une photo, mais en appliquant directement sur celle-ci les transformations nécessaires, il évite d'en charger les variantes (chap. 4 §8).

L'économie des ressources externes réalisée par CSS ne se limite pas au code JS et aux images : la propriété unicode-range rend possible le chargement conditionnel de polices de caractères (chap. 6 §9).

Les gains en performance que procurent les nouvelles fonctionnalités CSS sont observables non seulement lors du chargement des fichiers, mais également au moment de l'exécution du code, en appelant la GPU en renfort (chap. 10 §3) et en soulageant le CPU de calculs superflus (chap. 4 §9 et chap. 9 §2).

Un espace optimisé

Avec un tel progrès réalisé sur le plan des performances, CSS démontre, une fois de plus, sa faculté d'adaptation aux nouveaux modes de connexion à Internet, puisqu'il répond ainsi à la contrainte de limitation de bande passante caractéristique des appareils mobiles, tandis que, depuis sa deuxième version, les Media Queries prennent en compte celle liée au manque d'espace disponible sur leur écran. La largeur de celui-ci est le premier critère sur lequel elles s'appuient, mais elles sont aussi capables de le combiner avec l'orientation de l'appareil ou son ratio hauteur/largeur (chap. 8 §2).

Les nouvelles unités relatives au viewport viennent en soutien des Media Queries, comme elles peuvent, au contraire, nous en dispenser pour des mises en forme simples, ainsi que l'illustrent deux judicieux exemples présentés dans le livre (chap. 5 §4).

Si la technique utilisée pour sélectionner la mise en page adaptée à chaque type d'appareil reste donc la même, les méthodes permettant de construire cette dernière ont, en revanche, avec CSS 3, connu une véritable révolution ! Grid Layout répartit les grandes zones du design au sein des cellules d'un tableau fictif (chap. 3 §4), tandis que l'alignement de leurs composants est géré par Flexbox (chap. 3 §3). Une mise en page sous forme de grille, plus simple, quoique moins flexible, est également réalisable à l'aide d'une mise en application originale du multicolonne (chap. 3 §2).

La souplesse apportée par les récents modules de CSS profite non seulement aux éléments structurant la page web, mais également à leur contenu : possibilité lui est, en effet, offerte par le module Regions de se redistribuer de différentes manières au sein de ces derniers (chap. 3 §6).

S'il s'agit d'un contenu textuel, le manque d'espace au cœur du conteneur est désormais géré plus efficacement à l'aide de retours à la ligne (chap. 5 §5) ou de coupures au sein des mots avec (chap. 6 §4 et 5) ou sans (chap. 6 §1) césures. À l'inverse, l'espace disponible peut être converti de diverses façons (chap. 6 §2, 6, 7, 8 et 10).

La solution idéale consisterait évidemment à construire un conteneur dont la taille s'ajuste automatiquement à la largeur du contenu, ce que les auteurs sont parvenus à faire pour un champ de texte, grâce à l'unité ch et un peu de JS (chap. 5 §3).

Si les résultats les plus significatifs obtenus en termes d'optimisation de l'espace sont dus, avant tout, à la capacité des Media Queries d'évaluer la taille de l'écran que nous regardons ou tenons entre nos mains, on peut légitimement penser qu'en généralisant les tests supportés par ces dernières, nos possibilités d'amélioration du design s'en trouveront accrues d'autant. On peut déjà le constater avec celui touchant à la résolution, moins avec d'autres, concernant notamment la luminosité ou le système de pointage, pour des raisons précises et pertinentes exposées dans l'ouvrage (chap. 8 §2). Quoi qu'il en soit, ces récentes évolutions augurent un CSS futur en mesure d'offrir une expérience utilisateur en adéquation toujours plus parfaite avec les spécificités de l'appareil !

En conclusion

Comme son titre l'indique, le livre n'est ni un guide exhaustif, ni un manuel de premier apprentissage de CSS. À l'exception des Media Queries (dans leur première version) et d'une poignée de sélecteurs, aucune des propriétés existant depuis au moins la deuxième version du langage n'y est, en effet, abordée. Le livre peut, en revanche, prétendre au qualificatif d'ouvrage de référence en « CSS 3 » : en choisissant de se focaliser sur les seules fonctionnalités nouvellement introduites dans le langage, il dispose de toute la place nécessaire pour traiter celles-ci de manière très complète, ajoutant à sa présentation des informations complémentaires – syntaxe formelle, valeur par défaut des propriétés CSS (Annexe A) et liste de celles pouvant être animées (Annexe B), support des navigateurs et description précise de leurs limites en cas de prise en charge imparfaite –, tout en prenant une longueur d'avance en s'intéressant aux modules non encore, ou à peine (à la date de parution du livre, en tout cas), implémentés dans les navigateurs (Grid Layout, Regions, masques de forme, variables).

Pour autant, le livre ne s'arrête pas à la théorie : les paragraphes consacrés aux différentes fonctionnalités sont accompagnés, parfois de conseils quant à leur bon usage (remise en cause de la pertinence de la règle des 62,5% dans chap. 5 §2 ; de celle de certaines Media Queries de « niveau 4 » dans chap. 8 §2), presque toujours d'un ou de plusieurs exemples d'application, décrivant le plus souvent un composant complet directement utilisable dans une page web (galerie d'images avec placeholders, carrousel, pour ne citer que ces deux exemples).

Enfin, les bonnes pratiques de développement et la mise en œuvre de CSS dans un cadre plus global pourront être approfondies à l'aide de quelques-uns des livres indiqués dans la bibliographie sélective qui conclut l'ouvrage (Annexe C §5).




 Commenter Signaler un problème

Avatar de Community Management Community Management - Community Manager https://www.developpez.com
l 22/03/2019 à 11:24
Bonjour chers membres du club,

Je vous invite à lire la critique de David Bleuse au sujet du livre :



« CSS est à la fois très simple et très compliqué » (Préface).
Chris Coyier, auteur de la préface de l'ouvrage, nous rappelle, en effet, que la simplicité de l'anatomie d'une feuille de styles – une succession de règles composées de déclarations, chacune définie comme un couple propriété/valeur – tend à faire oublier la complexité bien réelle de son fonctionnement.
Au cours des années récentes, profitant, sans doute, de l'impulsion donnée par la restructuration opérée au sein des organes de standardisation (chapitre 1 §3), CSS a connu une évolution impressionnante, s'enrichissant de fonctionnalités nouvelles toujours plus nombreuses et sophistiquées, au point que le W3C a décidé de spécifier ces dernières et de regrouper les spécifications déjà existantes au sein de modules dédiés, venant se substituer à la spécification globale, dont la version 2.1 est l'ultime. À cet égard, de l'aveu même des auteurs du livre, le titre qu'ils ont choisi de lui attribuer est ironique : « CSS 3 n'existe pas » ! (chap. 1 §5.)
L'époque actuelle semble être marquée par un plus strict respect des spécifications qu'au cours de la période qui a précédé, où les implémentations non conformes et les fonctionnalités propriétaires étaient monnaie courante. De fait, on assiste aujourd'hui à une certaine « stabilisation » (chap. 1 §1). Mais celle-ci est, à vrai dire, relative ; en effet, face au rythme soutenu des innovations amenées par les spécificateurs, l'implémentation de ces dernières s'effectue avec plus ou moins de réactivité selon les moteurs de rendu, d'où des prises en charge pouvant différer d'un navigateur à l'autre. Lire la suite de la critique...
Bonne lecture .
Avatar de Community Management Community Management - Community Manager https://www.developpez.com
l 22/03/2019 à 11:02


CSS3

Pratique du design web


Vingt ans après sa conception, le langage CSS n'en est plus à ses balbutiements et n'est plus optionnel en ce qui concerne la conception web moderne. Sans le moindre concurrent en vue, CSS a encore de belles années devant lui. Et pour cause, il est toujours en perpétuelle évolution !
Ce livre n'a pas pour prétention d'être le guide ultime de l'intégrateur dans la mesure où il ne reprend pas les bases. Il offre simplement une mise à niveau en levant le voile sur tous les modules CSS, afin d'offrir dès aujourd'hui les connaissances nécessaires à la réalisation de sites et d'applications web. En effet, les enjeux comme les objectifs ne sont plus les mêmes qu'il y a quelques années, aussi est-il important que les intégrateurs, designers et développeurs s'arment face aux nouvelles problématiques que sont le Responsive Web Design, le rétrécissement de l'écart entre le Web et le natif, et la course à la performance.
Qu'il s'agisse de mise en page avec Flexbox ou Grid Layout, d'embellissement des interfaces, d'élaboration d'animations ou même de design fluide avec les Media Queries, vous devriez être capable de maîtriser tous ces sujets au sortir de votre lecture.
Au-delà de l'aspect purement didactique de l'ouvrage, vous trouverez un grand nombre d'exemples et de mises en pratique, ainsi que tout ce que vous devez savoir vis-à-vis du support des fonctionnalités par les navigateurs. Pour finir, vous découvrirez dans les annexes la liste des valeurs par défaut des propriétés CSS, celle des propriétés que l'on peut animer et une bibliographie pour aller plus loin.

Lire la suite



 
couverture du livre CSS3 pour les web designers

Note 3.5 drapeau
Détails du livre
Sommaire
Critiques (1)
0 commentaire
 
 

CSS3 pour les web designers

A Book Apart n°2

de
Traducteurs : Charles Robert
Public visé : Intermédiaire

Résumé de l'éditeur

Les CSS sont aujourd'hui un incontournable pour tous les web designers ; des sélecteurs avancés à la génération de contenu, en passant par les web fonts, les dégradés, les ombres et les arrondis, jusqu'aux animations les plus complètes, CSS3 offre tout un univers de possibilités créatrices.

Nul ne pouvait mieux vous guider à travers ces galaxies que le web designer de renom, auteur et superstar des CSS, Dan Cederholm, qui dans cette nouvelle édition mise à jour, vous présente de nouvelles propriétés et techniques, avec notamment un tout nouveau chapitre sur les mises en page à petite échelle (agencement en multicolonnes, Flexbox).

Découvrez avec lui ce qui marche, comment ça marche et que faire quand ça ne marche pas !

Édition : Eyrolles - 152 pages, 2e édition, 22 septembre 2016

ISBN10 : 2212117655 - ISBN13 : 9782212117653

Traduction du livre CSS3 for Web Designers, 2nd edition publié en 2014 aux éditions A Book Apart LLC ; 14 cm x 21,5 cm ; 305 g ; quadri

Commandez sur www.amazon.fr :

12.00 € TTC (prix éditeur 12.00 € TTC)
  • Utiliser CSS3 aujourd'hui
    • Mais ne lisez pas la spécification
    • Tout le monde peut utiliser CSS3
    • Principales propriétés CSS3 utilisables aujourd'hui
    • Préfixes de navigateur
  • Comprendre les transitions CSS
    • La queue qui remue le chien
    • Mais que sont ces transitions CSS ?
    • Un exemple simple
    • La fonction de timing (ou : « J'aurais vraiment dû suivre ces cours de maths »)
    • Différer la transition
    • Transitions abrégées
    • Interopérabilité
    • Empiler les transitions
    • États de transition
    • Appliquer une transition à plusieurs propriétés
    • Appliquer une transition à toutes les propriétés potentielles
    • Quelles sont les propriétés CSS compatibles avec les transitions ?
    • Pourquoi ne pas plutôt utiliser JavaScript ?
    • Soyez malin, soyez subtil
  • Broder avec CSS3
    • Notre étude de cas
    • Surprise et émerveillement
    • Les sites web doivent-ils offrir exactement la même expérience dans tous les navigateurs ?
    • Parcourir la Lune
    • Effet de survol simple et flexible avec la propriété opacity
    • Brodez la toile
  • Transformer le message
    • Transformation d'échelle
    • Transformer l'expérience
    • rotate, skew et translate
    • Différentes transformations au service du message
    • Transformer la Lune
    • Répétez après moi : intelligent et subtil
  • Arrière-plans multiples
    • Défilement parallaxe
    • La vieille méthode : des balises superflues
    • La nouvelle méthode : arrière-plans multiples via CSS3
    • Utiliser les arrière-plans multiples aujourd'hui
  • Enrichir les formulaires
    • Programmation d'un simple formulaire d'inscription
    • Style des éléments fieldset et label
    • Style des champs de saisie
    • Les dégradés CSS
    • Un vrai bouton en CSS3
    • Et les autres navigateurs ?
    • Utilisation de box-shadow pour créer des états focus
    • Ajout d'animations CSS pour enrichir l'interactivité du formulaire
    • Misez sur l'interaction
  • Mises en page à petite échelle
    • Mise en page multicolonnes
    • Flexboxer le futur
    • Le futur, c'est maintenant
  • Conclusion
  • Lectures et ressources complémentaires
Critique du livre par la rédaction David Bleuse le 10 septembre 2018
Après la période de vive effervescence intellectuelle qui a suivi la publication de sa deuxième version, « CSS faisait de moins en moins parler de lui » (chap. 1 Introduction). Afin de pallier autant les limitations du langage que sa prise en charge incomplète par les navigateurs, les développeurs front-end avaient, en effet, réussi à mettre au point des techniques détournées ou à mettre en œuvre des technologies supplétives : hacks destinés à corriger les bogues, exploitation de l'ensemble des possibilités offertes par la propriété float pour la mise en page, recours à JavaScript ou à Adobe Flash pour l'animation.

Outre le fait qu'il apporte de nouveaux styles plus élaborés, CSS3 permet désormais de gérer de manière native et satisfaisante ces deux pans essentiels de l'habillage d'une page web.

L'étendue des propriétés introduites par CSS3 et la résurgence de problèmes de compatibilité inter-navigateurs ont conduit l'auteur à ne traiter, dans son livre au format de poche, qu'une partie du langage. Comme il l'indique dans chap. 1 §3, il n'aborde pas les techniques suivantes : media queries, régions, web fonts. Contrairement à ce qui est écrit, il consacre, en revanche, un paragraphe au multicolonnage (chap. 7 §1). Quant aux nouveaux sélecteurs, il en donne un rapide aperçu à travers :last-child (chap. 6 §2). Ajoutons, en outre, que la mise en page, telle qu'elle est couverte par le livre, ne s'intéresse qu'aux petites échelles (Flexbox) et pas aux grilles (Grid Layout) et que, si les transformations 2D sont bien traitées, ce n'est pas le cas de leur pendant tridimensionnel.

L'auteur explique pourquoi les éléments du langage CSS3 qu'il choisit, finalement, de décrire sont précisément ceux qui doivent, aujourd'hui, être privilégiés, puis montre, à travers différents exemples, dans quels contextes il convient de les mettre en œuvre.

CSS3 : où, quand, comment ?

Au-delà de son lot d'avancées techniques, CSS3 introduit une innovation majeure en ce qui concerne son élaboration même : remettant en cause la procédure qui prévalait jusqu'alors, selon laquelle la spécification ne pouvait être implémentée, en tout ou en partie, avant d'être entièrement finalisée, la structure de CSS3 en modules indépendants favorise le dialogue entre les auteurs de la spécification et les fabricants de navigateurs (chap. 1 §1). Ces derniers ont, en effet, la possibilité d'intégrer des fonctionnalités dès le premier stade de leur conception (statut « brouillon »), voire, à l'instar des propriétés de transition, transformation et animation, d'en proposer de nouvelles aux spécificateurs (chap. 2 §1). Les différences d'implémentation se traduisent alors dans le nom de la propriété à l'aide d'un préfixe de navigateur (chap. 1 §4), dont la raison d'être se justifie pleinement lorsque les syntaxes diffèrent selon les moteurs de rendu (chap. 6 §4).

Si de nouveaux paramètres associés au navigateur pourraient, à terme, se substituer au système de préfixage (chap. 1 §4), ce dernier reste aujourd'hui indispensable pour utiliser les nouvelles propriétés CSS3. Sa mise en œuvre sera facilitée par le recours à un préprocesseur CSS (chap. 1 §4) ou à un des générateurs de code dont l'auteur nous donne une liste en fin d'ouvrage.

« J'ai tellement hâte d'utiliser CSS3… quand il sera supporté par tous les navigateurs » (chap. 1 §2) est une réflexion qui, selon l'auteur, se fait aujourd'hui beaucoup entendre dans le monde des web designers. Ainsi voilà posée, après la question du « comment », celle du « quand ». Or, lorsqu'il s'agit d'appliquer une nouvelle propriété CSS3, l'universalité de son support importe moins que son contexte d'utilisation, ou dit autrement la question du « quand » doit s'effacer devant celle du « où » (chap. 1 §2).

Les différentes strates visuelles d'une page web ne revêtent pas la même importance : l'auteur en fait la liste dans un tableau distinguant celles que l'on doit considérer comme critiques de celles que l'on juge, au contraire, comme ne l'étant pas (chap. 1 §2).

La stratégie appliquée par l'auteur tout au long du livre consiste, d'une part à retenir comme terrain d'expérimentation de CSS3 celles appartenant à cette deuxième catégorie, nommée par lui « couche d'expérience » (chap. 1 §2), d'autre part à ne fournir aucune solution de recours à l'intention des navigateurs non compatibles : l'effet recherché n'étant pas essentiel à l'expérience utilisateur, celle-ci demeurera tout à fait acceptable chez ces derniers, en application du principe de dégradation élégante (chap. 2 §13, chap. 3 §3 et 6, chap. 4 §2, chap. 5 §4, chap. 6 §6 et 9, chap. 7 §3).

La pertinence d'une telle solution sera évidemment d'autant plus probante que cette dernière sera mise en pratique avec les propriétés CSS3 bénéficiant du meilleur support : l'auteur nous conseille ainsi de privilégier les propriétés border-radius, text-shadow, box-shadow, box-sizing, opacity, RGBA et background dans sa version images multiples (chap. 1 §3).

Enfin, on devra garder à l'esprit que si une telle stratégie permet de préserver l'utilisabilité de notre site web, un recours abusif aux propriétés CSS3 risque de mettre en péril son identité visuelle (chap. 2 §14, chap. 4 §4 et 6). Bien employées, en revanche, ces dernières peuvent améliorer significativement l'expérience utilisateur.

Enrichir la couche d'expérience

Exception faite des transitions dont la présentation théorique et détaillée se justifie par leur grande complémentarité avec les autres propriétés CSS3 (chap. 2 §2 à 12), l'auteur choisit d'aborder ces dernières de manière concrète à partir d'exemples d'application extraits, pour la plupart, d'un authentique site web construit pour l'occasion (chap. 3 §1).

Améliorer l'expérience utilisateur d'un site web consiste, avant toute chose, à en faciliter l'usage pour l'internaute. Flexbox permettra ainsi d'étendre la zone de texte d'un formulaire de recherche sur toute la largeur disponible de la page web afin d'en rendre le contenu plus lisible (chap. 7 §2).

L'espace à disposition pourra, de même, être optimisé, dans le cas d'un formulaire présentant de nombreuses cases à cocher, en offrant le maximum d'entre elles directement à la vue de l'internaute, grâce à une application originale et efficace du multicolonnage (chap. 7 §1).

La lisibilité des images, quant à elle, sera améliorée en affectant à ces dernières une taille appropriée : par une nouvelle utilisation de Flexbox dans le cas d'une slat (image accompagnée de texte) (chap. 7 §2) ; grâce à une transformation scale au survol si l'on a affaire à des images composant une galerie (chap. 4 §1).

Si le curseur de la souris doit, sur un grand écran, rester discret, on sera, en revanche, autorisé à mettre en avant une zone de texte recevant le focus ou bien des liens survolés, en ayant recours à la propriété box-shadow ou à une animation pour la première (chap. 6 §7 et 8), à l'opacité pour les seconds (chap. 3 §4 et 5).

Tout en réalisant cette dernière démonstration au profit de liens de navigation, l'auteur prend le temps de nous montrer comment habiller ceux-ci à l'aide de propriétés text-shadow et border-radius (chap. 3 §4). L'esthétique entre en compte, en effet, dans l'amélioration de l'expérience utilisateur en rendant, pour ce dernier, le site web agréable à utiliser.

Les composants des formulaires (champs de saisie, étiquettes) sont traités avec le même soin que les liens de navigation (chap. 6 §1 à 4). C'est tout particulièrement le cas des boutons dont la mise en forme complète est détaillée étape par étape (chap. 6 §5).

Une touche d'innovation dans la mise en forme peut apporter une véritable personnalité au site web, comme le montre l'auteur en prenant pour exemple un blog qui utilise la transformation rotate pour donner à ses billets l'allure de véritables feuilles de papier physiques (chap. 4 §3).

Une audace stylistique poussée au point de créer un effet de surprise sera encore plus profitable au site web dont le souvenir imprégnera durablement la mémoire de l'internaute. L'auteur en donne un très bon exemple à travers le site personnel d'un designer où les liens vers les réseaux sociaux se transforment au survol de manière à la fois spectaculaire et élégante (chap. 3 §2). Il met à son tour en pratique les transformations CSS3 au bénéfice du site web servant au livre de fil rouge, de façon simple mais efficace, afin de créer chez l'internaute une émotion identique (chap. 4 §5).

Les différents effets précédemment décrits existaient, certes, avant CSS3, mais ce dernier a le mérite de relayer avantageusement les technologies naguère indispensables pour les mettre en œuvre. C'est en particulier le cas du défilement parallaxe, technique créant un effet de profondeur à l'aide d'arrière-plans superposés défilant à des vitesses différentes, mise au point au début des années 1980 pour les besoins d'un jeu vidéo (chap. 5 §1), et que la fonctionnalité CSS3 d'arrière-plans multiples améliore (chap. 5 §3) en rendant inutile l'emboîtement de containers div qui était, jusqu'à présent, nécessaire à son fonctionnement dans un site web (chap. 5 §2).

En conclusion

CSS3 est un bien trop vaste sujet pour tenir dans un livre de taille aussi réduite, ou même dans un seul livre tout court ! Pour cette raison, et aussi afin de fournir des solutions directement applicables, l'auteur a choisi de ne traiter que les propriétés CSS3 les mieux implémentées, aujourd'hui, dans les navigateurs.

Des répétitions, même si elles concernent le message essentiel que l'auteur a voulu faire passer, auraient cependant pu être évitées, libérant ainsi de l'espace pour des développements plus utiles : on dénombre ainsi pas moins de huit paragraphes indiquant, chacun, que la ou les propriétés CSS3 mises en pratique dans les paragraphes précédents se dégradent harmonieusement chez les navigateurs ne les supportant pas !

On regrettera également, à l'heure du responsive web design, l'utilisation systématique du pixel pour définir les tailles des éléments ainsi que, par endroits, un certain manque de rigueur dans l'écriture du code (identifiant précédé d'un sélecteur dans chap. 4 §5).

L'ouvrage s'adresse donc, avant tout, à un lecteur souhaitant aborder CSS3 en douceur, possédant néanmoins de bonnes bases en HTML et en CSS 2.1 car le livre ne prodigue, à propos de ces derniers, aucun rappel.

Le lecteur ayant déjà de premières connaissances en CSS3 restera sur sa faim mais pourra tirer profit des exemples de mise en forme des éléments de formulaire, à travers lesquels l'auteur démontre tous ses talents de designer.




 Commenter Signaler un problème

Avatar de Malick Malick - Community Manager https://www.developpez.com
l 05/09/2018 à 12:08
CSS3 pour les web designers
A Book Apart n°2

Les CSS sont aujourd'hui un incontournable pour tous les web designers ; des sélecteurs avancés à la génération de contenu, en passant par les web fonts, les dégradés, les ombres et les arrondis, jusqu'aux animations les plus complètes, CSS3 offre tout un univers de possibilités créatrices.

Nul ne pouvait mieux vous guider à travers ces galaxies que le web designer de renom, auteur et superstar des CSS, Dan Cederholm, qui dans cette nouvelle édition mise à jour, vous présente de nouvelles propriétés et techniques, avec notamment un tout nouveau chapitre sur les mises en page à petite échelle (agencement en multicolonnes, Flexbox).

Découvrez avec lui ce qui marche, comment ça marche et que faire quand ça ne marche pas !

[Lire la suite]




Retrouvez tous les meilleurs livres CSS

 
couverture du livre Sass pour les web designers

Note 5 drapeau
Détails du livre
Sommaire
Critiques (1)
1 commentaire
 
 

Sass pour les web designers

A Book Apart n°10

de
Traducteurs : Charles Robert
Public visé : Débutant

Résumé de l'éditeur

Soyons réalistes : les CSS, c'est dur. Nos feuilles de styles sont plus complexes que jamais et nous avons exploité la spécification actuelle jusqu'aux limites de ses capacités. Heureusement, nous pouvons désormais compter sur Sass pour nous venir en aide et optimiser nos CSS.

Alors qu'il était réticent au départ, Dan Cederholm nous raconte ici pourquoi et comment il a fini par adopter ce préprocesseur CSS populaire puis nous montre la voie à suivre pour mieux maîtriser notre code, tout en conservant nos habitudes de travail.

Des notions les plus élémentaires aux techniques plus avancées, Dan Cederholm vous aide à faire évoluer vos feuilles de styles et à commencer à tirer parti de la puissance de Sass dès la fin de votre lecture.

Édition : Eyrolles - 96 pages, 1re édition, 26 février 2015

ISBN10 : 2212141475 - ISBN13 : 9782212141474

Traduction du livre SASS for web designers publié en 2013 aux éditions A Book Apart LLC ; 14 cm x 21,5 cm ; 206 g ; quadri

Commandez sur www.amazon.fr :

12.00 € TTC (prix éditeur 12.00 € TTC)
  • Pourquoi Sass ?
    • Sass en quelques mots
    • CSS, c'est compliqué
    • Qu'est-ce que Sass ?
    • Syntaxe de Sass
    • Mythes sur Sass

  • Workflow Sass
    • Installer Sass sur un Mac
    • Installer Sass sous Windows
    • Définir les fichiers à surveiller
    • Utiliser une application à la place de la ligne de commande
    • Choisir un style de formatage
    • N'éditez pas le fichier converti !
    • Nous avons un workflow, alors au travail !

  • Utiliser Sass
    • Règles d'imbrication
    • Imbrication de propriétés composites
    • Référencer les sélecteurs parents avec &
    • Commenter dans Sass
    • Variables
    • Mixins
    • CSS3 adore les mixins
    • Créer une bibliothèque de mixins

  • Sass et les media queries
    • Media queries imbriquées
    • « Rétiniser » les images d'arrière-plan HiDPI

Critique du livre par la rédaction David Bleuse le 3 juillet 2018
Si la simplicité de CSS a rendu possible la large adoption de ce dernier au sein de la communauté des développeurs web, elle est aujourd'hui une contrainte à la réalisation de projets toujours plus complexes (chap. 1 §2).

Apportant une nouvelle « couche d'abstraction » – pour reprendre l'expression de Chris Coyier, qui signe la préface de ce livre – un préprocesseur CSS vise à pallier les insuffisances inhérentes au langage CSS.

Pour se faire une place aux côtés de CSS dans la panoplie du développeur web, le préprocesseur CSS doit à son tour réussir à s'imposer comme un outil indispensable. C'est ce à quoi est parvenu le préprocesseur Sass auprès de l'auteur de ce livre, développeur CSS chevronné, qui était au départ fortement attaché à ses méthodes de conception personnelles autant que sceptique devant les perspectives dessinées par ce nouvel outil.

Le succès de Sass tient à deux de ses principaux atouts : d'une part, il ne bouleverse pas les règles d'écriture des feuilles de styles ; d'autre part, il enrichit CSS de nouvelles possibilités.

La transition en douceur

Sass, à l'instar de tout préprocesseur CSS, est une application qui génère automatiquement une feuille de styles CSS à partir d'instructions qu'on lui aura fournies sous la forme d'un fichier (chap. 1 §3). Celui-ci peut être écrit en respectant une des deux syntaxes suivantes : d'une part, la syntaxe originelle, dépouillée, où l'indentation est un élément du langage à part entière (à l'image des langages de programmation Ruby et Python) ; d'autre part, la syntaxe SCSS qui est un surensemble de CSS (chap. 1 §4). Cette précision essentielle permet de faire tomber un des mythes sur Sass que l'auteur résume par la formule : « Je ne veux pas changer ma façon d'écrire en CSS ! » (chap. 1 §5). En effet, CSS étant lui-même du code SCSS, cette dernière syntaxe nous permet de migrer sans plus attendre, au sein des fichiers inputs, l'ensemble de nos fichiers CSS réalisés sans l'aide d'un préprocesseur, avant d'y intégrer progressivement, afin de tirer le meilleur profit des possibilités qu'elles peuvent offrir, les fonctionnalités spécifiques à Sass (chap. 1 §3).

La gestion des fichiers CSS outputs est alors entièrement déléguée à ce dernier (chap. 2 §6) qu'il est d'ailleurs parfaitement capable de formater selon les désirs de l'utilisateur afin de respecter des contraintes de style ou de performance (minification) (chap. 2 §5). On n'attendra pas de Sass, en revanche, qu'il corrige les erreurs ou maladresses de conception imputables à celui-ci, ce que précise l'auteur à propos d'un autre mythe qu'il intitule : « Je ne veux pas que Sass change ma façon de concevoir ! » (chap. 1 §5).

Après nous avoir expliqué brièvement l'installation de Sass sous Mac (chap. 2 §1) et Windows (chap. 2 §2) – on regrettera au passage que les adeptes de Linux soient oubliés ! –, l'auteur nous montre comment le mettre en route, battant en brèche par la même occasion un dernier mythe traduit ainsi : « J'ai peur de la ligne de commande ! » (chap. 1 §5). Si la génération des fichiers CSS est en effet programmée à l'aide d'une ligne de commande, celle-ci est simple au point que l'auteur, qui annonce d'emblée : « Je ne suis pas un expert de la ligne de commande » (chap. 1 §5), parvient à utiliser sans difficulté ! (chap. 2 §3). En outre, à l'intention des irréductibles, l'auteur offre une alternative sous la forme d'interfaces dont quatre nous sont présentées : Scout, CodeKit, LiveReload, Compass.app (chap. 2 §4).

Dans un deuxième temps, on pourra commencer à utiliser les constructions syntaxiques introduites par Sass, permettant de simplifier certaines écritures (chap. 3 §2) ou de mieux refléter la structure du fichier HTML, à travers les sélecteurs (chap. 3 §1) ou les media queries (chap. 4 §1). Une application concrète de cette dernière technique, faisant en outre appel au sélecteur parent (chap. 3 §3), est très bien détaillée par l'auteur en fin d'ouvrage (chap. 4 §2).

La voie ouverte à un code efficace

La principale limite de CSS réside dans la duplication de valeurs de propriétés ou de déclarations au sein d'un même fichier, en contradiction avec le principe DRY (« Don't Repeat Yourself »), avec pour conséquence un code difficile à lire et à maintenir (chap. 1 §2). Les deux principaux piliers de Sass que constituent les variables et les mixins permettent de définir en un seul endroit du code respectivement les valeurs de propriétés (chap. 3 §5) et les blocs de déclarations (chap. 3 §6). L'application de ces techniques au fichier input permet de faire de ce dernier une feuille de définition de styles à la structure irréprochable.

Le fichier output demeure, en revanche, un fichier CSS traditionnel rempli de redondances. L'utilisation de la directive @extend permet cependant de réduire celles-ci en regroupant dans une même règle les sélecteurs partageant un même bloc de déclarations (chap. 3 §8).

La règle @import, en autorisant un fichier input à faire référence à des fichiers externes, rend possible la création d'une bibliothèque de règles et nous permet ainsi de franchir un pas supplémentaire dans l'écriture d'un code efficace (chap. 3 §8).

Un fichier regroupant en son sein des variables définissant des couleurs ou des polices typographiques constituera un guide de style (chap. 3 §5). Les propriétés préfixées, associées aux différentes implémentations d'une même propriété CSS3 par les navigateurs, pourront être invoquées dans le code à l'aide d'un nom unique grâce à des mixins rassemblés dans un même fichier (chap. 3 §7). Celui-ci, ainsi qu'un autre fichier distinct contenant les règles (notamment le reset CSS) communes à l'ensemble des projets seront ainsi tenus à la disposition de ces derniers (chap. 3 §8).

Une bibliothèque a, entre autres avantages, celui d'améliorer la performance liée à l'application des styles à la page web. En effet, les fichiers qui la constituent sont autant de fichiers CSS génériques, et donc de connexions HTTP, d'économisés (chap. 3 §8). De même, la taille du fichier output sera maîtrisée en limitant le contenu de ce dernier au strict nécessaire, les règles inutilisées de la bibliothèque, à l'instar des placeholder employés par la directive @extend (chap. 3 §8), n'apparaissant pas dans le fichier final, tout comme les commentaires qui permettent de documenter en détail l'ensemble des règles présentes dans la bibliothèque (chap. 3 §4).

Enfin, dernière étape dans l'industrialisation de la conception des feuilles de styles CSS, les bibliothèques de règles peuvent servir de base à la construction d'un framework CSS, à l'image de ceux que l'auteur nous invite à découvrir : Compass et Bourbon (chap. 3 §8).

En conclusion

Si un livre, en général, doit beaucoup à l'expertise et à la pédagogie de son auteur, c'est particulièrement le cas de celui-ci. En plus d'être un expert reconnu en CSS, Dan Cederholm présente l'avantage, pour le lecteur, d'avoir, par rapport à Sass, fait partie des sceptiques ! Ses arguments pour adopter ce dernier n'en sont donc que plus convaincants et ses explications d'autant plus claires qu'il a éprouvé face à cette technologie nouvelle les mêmes difficultés que celles auxquelles pourront être confrontés des développeurs web habitués à écrire leurs feuilles de styles sans l'appui d'aucun outil.

La clarté du propos, soutenue par un plan très bien structuré et de nombreux exemples détaillés pas à pas, rend le livre parfaitement accessible à tout développeur web ayant, bien sûr, une première expérience en CSS, sans pour autant être nécessairement un expert dans ce langage, et étant disposé à découvrir un nouvel outil pour coder plus efficacement.

Si ce livre au format de poche ne prétend évidemment pas faire le tour du sujet, il enseigne cependant l'essentiel de ce qu'il faut connaître sur Sass. Il mentionne en outre quelques projets qui en sont issus (frameworks et bibliothèques), et les ressources en fin d'ouvrage offrent une liste de liens sélective mais suffisante permettant d'aller plus loin.

En se concluant par l'évocation de deux autres préprocesseurs CSS (LESS et Stylus), le livre élargit son sujet en même temps qu'il finit de donner au lecteur les clés lui permettant de tirer le meilleur profit de cette nouvelle génération d'outils.




 Commenter Signaler un problème

Avatar de Malick Malick - Community Manager https://www.developpez.com
l 10/07/2018 à 15:16
Bonjour à chers membres du Club,

Je vous invite à lire la critique de David Bleuse au sujet du livre Sass pour les web designers.

Bonne lecture
Avatar de Malick Malick - Community Manager https://www.developpez.com
l 28/06/2018 à 12:05
Sass pour les web designers

Soyons réalistes : les CSS, c'est dur. Nos feuilles de styles sont plus complexes que jamais et nous avons exploité la spécification actuelle jusqu'aux limites de ses capacités. Heureusement, nous pouvons désormais compter sur Sass pour nous venir en aide et optimiser nos CSS.
Alors qu'il était réticent au départ, Dan Cederholm nous raconte ici pourquoi et comment il a fini par adopter ce préprocesseur CSS populaire puis nous montre la voie à suivre pour mieux maîtriser notre code, tout en conservant nos habitudes de travail.
Des notions les plus élémentaires aux techniques plus avancées, Dan Cederholm vous aide à faire évoluer vos feuilles de styles et à commencer à tirer parti de la puissance de Sass dès la fin de votre lecture.





Retrouvez les meilleurs livres pour apprendre CSS

 
couverture du livre CSS avancées

Note 5 drapeau
Détails du livre
Sommaire
Critiques (1)
1 commentaire
 
 

CSS avancées

Vers HTML5 et CSS3

de
Public visé : Expert

Résumé de l'éditeur

Incontournable du design Web moderne, les feuilles de styles CSS sont en pleine révolution avec l'adoption des nouveaux standards HTML5 et CSS3. Familier de CSS2, allez plus loin en maîtrisant les techniques avancées déjà  approuvées dans CSS2.1 et découvrez les multiples possibilités de CSS3 !

Chaque jour mieux prises en charge par les navigateurs, les CSS sont sans conteste un gage de qualité dans la conception d'un site Web élégant, fonctionnel et accessible, aussi bien sous Mozilla Firefox, Google Chrome, Opéra ou Safari que sous Internet Explorer ou les navigateurs mobiles.

Vous croyiez tout savoir sur les CSS ? Grâce à la deuxième édition de ce livre de référence, enrichie et mise à jour, vous irez encore plus loin ! Vous apprendrez à faire usage tout autant des technologies avant-gardistes de CSS3 et HTML5 que de pratiques avancées, concrètes et mal connues déjà utilisables en production, et ce, pour l'ensemble des médias reconnus par les styles CSS (écrans de bureau ou mobiles, messageries, mais aussi impression, médias de restitution vocale, projection et télévision). Maîtrisez tous les rouages du positionnement en CSS2.1, exploitez les microformats, optimisez les performances d'un site, gérez efficacement vos projets ou contournez les bogues des navigateurs (hacks, commentaires conditionnels, HasLayout...). Enfin, profitez dès aujourd'hui des nouveautés de CSS3 : typographie, gestion des césures, colonnes, arrière-plans, dégradés, ombres portées, redimensionnement, rotations, transitions et autres effets animés, sans oublier les Media Queries, qui permettent d'adapter le site à son support de consultation.

Conseils méthodologiques, bonnes pratiques, outils, tests, exemples avec résultats en ligne, quizzes et exercices corrigés, tableaux récapitulatifs... Rien ne manque à ce manuel du parfait designer Web !

À qui s'adresse cet ouvrage ?
  • À tous les concepteurs de sites qui souhaitent exploiter les CSS au maximum de leurs possibilités ;
  • Aux designers, développeurs et intégrateurs Web impatients de découvrir et d'utiliser CSS3.

Édition : Eyrolles - 385 pages, 2e édition, 2 février 2012

ISBN10 : 2212134053 - ISBN13 : 9782212134056

Commandez sur www.amazon.fr :

38.50 € TTC (prix éditeur 38.50 € TTC)
  • État des lieux
  • Tirer le meilleur de CSS
    • Exploiter les possibilités de CSS2.1
    • Gestion de projet et performance
    • Le positionnement en CSS
    • Positionnement avancé
    • Résolution d'erreurs
  • HTML5 et CSS3 : l'innovation en marche
    • La révélation HTML5
    • En route vers CSS3
  • CSS et applications spécifiques
    • CSS pour le Web mobile
    • CSS pour l'impression
    • CSS et les messageries
    • Et les autres périphériques ?
  • Annexes
    • Liste de toutes les propriétés CSS (CSS1, 2 et 3)
    • Prise en charge de HTML5 et CSS3
    • Ressources

Critique du livre par la rédaction David Bleuse le 23 janvier 2015
Si le livre aborde HTML5 et CSS3, son principal intérêt est ailleurs. Web designer confirmé et fondateur d'un site Web communautaire axé sur la promotion des standards du Web, l'auteur partage avec le lecteur sa maîtrise des bonnes pratiques de CSS acquises à travers son expérience et ses échanges avec ses confrères. Le livre ne se limite pas aux applications de CSS pour les seuls navigateurs d'ordinateurs de bureau. Cependant, les autres agents utilisateurs sont traités plus brièvement, soit parce qu'ils nécessiteraient un ouvrage dédié (c'est le cas des appareils mobiles traités dans des livres spécialisés dont l'auteur de celui-ci propose une sélection), soit parce que leur compréhension de CSS est extrèmement limitée (c'est le cas des clients de messagerie et des imprimantes). Par ailleurs, le livre ne traite pas spécifiquement de certains aspects tels que l'accessibilité et le référencement.

Ce livre n'est ni une introduction aux technologies Web côté client, ni une description exhaustive et approfondie des propriétés CSS existantes et à venir. Il s'adresse à un lecteur ayant au moins des connaissances de base en HTML4.01 et CSS2.1. Néanmoins, un paragraphe rappelle les principaux sélecteurs et pseudo-éléments CSS2.1 tandis qu'une partie entière est consacrée à HTML5 et CSS3. De nouveaux éléments liés à la sémantique, aux formulaires et aux applications (vidéo, API, etc.) ainsi que de nouveaux sélecteurs, pseudo-classes, éléments et propriétés sont présentés successivement et accompagnés systématiquement d'un exemple de code et parfois d'une illustration graphique. Cette présentation est complétée en annexe par la liste exhaustive des propriétés CSS (versions 1 à 3).

Partant du constat que les difficultés rencontrées par les Web designers sont dues avant tout à une méconnaissance de certains mécanismes présents dans la version actuelle de CSS, l'auteur revient dans un premier temps sur ces derniers. Après un rappel sur la terminologie, l'auteur explique le modèle de boîte et les règles de priorité, élucide les mystères des positionnements absolu et flottant et dévoile une méthode tabulaire se substituant avantageusement aux techniques habituelles de positionnement.

Le second écueil auquel les concepteurs de site Web sont confrontés est imputable aux agents utilisateurs. Un rappel historique détaillé (ch. 1, ch. 9 §1, ch. 11 §1, 2, 3) permet de mettre le doigt sur l'hétérogénéité des applications clientes et les décalages subsistant actuellement dans leur prise en compte des spécifications. Chaque propriété introduite fait l'objet d'un encart indiquant précisément quelles versions de navigateurs la comprennent ainsi que les bugs résultant d'une prise en charge imparfaite. Ces informations sont complétées en annexe par un tableau exhaustif s'intéressant aux éléments HTML5 et propriétés CSS3. Afin de contourner les lacunes des navigateurs ainsi mises en lumière, l'auteur présente, lorsque cela est possible, une recette universelle. Pour les autres cas, il expose dans un premier temps deux méthodes générales de détection des navigateurs posant problème : l'une fondée sur les insuffisances de ces derniers (hacks et sélecteurs avancés ; présentés dans ch. 6 §2), l'autre sur un ciblage explicite (commentaires conditionnels ; ch. 6 §3), puis offre une solution à chaque difficulté rencontrée, sous la forme soit d'un code CSS alternatif ou complémentaire (problème délicat du « layout » spécifique à Internet Explorer, traité dans un paragraphe dédié), soit d'un lien vers un outil correctif en ligne, généralement développé en JavaScript (émulateurs HTML5 / CSS3, notamment).

Une fois enseignée la rédaction d'un code correct et reconnu par les navigateurs, l'auteur livre à la fois quelques règles et outils (sprites, « minification », etc.) pour en accroître la performance. La qualité du code passant également par la mise en oeuvre d'une démarche rigoureuse, l'auteur n'hésite pas à reprendre l'ensemble des étapes nécessaires à la conception d'une feuille de styles pour chaque type d'agent utilisateur sous la forme d'une méthodologie prête à l'emploi ou d'une check-list. Il présente également de bonnes règles de structuration de la feuille de styles inspirées de sa pratique personnelle (ordre des déclarations) ou adoptées par la communauté des développeurs (classes et identifiants génériques, commentaires CSSDoc). Quant à la phase de validation, elle est abordée à travers bonnes pratiques, outils et méthodologie de correction des bugs.

Afin de faciliter la tâche du développeur, sont également présentés à la fois des outils de génération automatique de code (éditeurs HTML, frameworks, zen coding) et des templates.

Soucieux de faire partager avant tout son expérience de « terrain », l'auteur a un regard objectif sur les nouvelles technologies offertes au Web designer : conscient du manque de maturité d'HTML5 et CSS3 (à la date de rédaction de l'ouvrage, en tout cas), il indique clairement celles de leurs innovations pouvant être mises en oeuvre sans danger et celles qui, au contraire, présentent de sérieux risques. De même, il met en garde contre la tentation de puiser largement parmi les nombreuses propriétés de restitution vocale lorsque les applications qui les emploient sont trop spécialisées pour être manipulées par des non-experts. Il démontre que les hacks sont loin d'être la panacée et prévient contre les risques d'altération de la rigueur et de la lisibilité du code ou du rendu visuel consécutifs à un usage immodéré des frameworks, outils de « minification » et reset. Souvent présentés sous la forme d'« exercices pratiques », les exemples donnés dans l'ouvrage sont de vrais cas concrets, parfois tirés des propres sites Web administrés par l'auteur (cf. paragraphe conclusif du ch. 9 consacré à l'adaptation d'un site Web pour appareils mobiles). Les références à des outils ou des sources d'information, en nombre impressionnant (une centaine pour les premiers, une soixantaine pour les seconds !) sont systématiquement commentées.

Le livre est d'autant plus agréable à lire que le texte est écrit dans un style clair et précis, qu'il est accompagné d'illustrations utiles, que les coquilles y sont rares (je n'en ai dénombré en tout et pour tout qu'une vingtaine, mineures pour la plupart) et que la mise en page fait parfaitement ressortir les extraits de code et les commentaires de l'auteur. Seuls pourraient être ajoutés des exercices supplémentaires (on en trouve uniquement à la fin des ch. 2 et 4) ainsi qu'une conclusion qui parachèverait un ouvrage par ailleurs fort bien structuré.

En résumé, de par son point de vue éminemment pragmatique, ce livre est le complément indispensable à n'importe quel ouvrage qui serait focalisé sur la description des éléments du langage. Alors que le second décrit les outils, celui-ci apprend à les utiliser !




 Commenter Signaler un problème

Avatar de vermine vermine - Expert éminent sénior https://www.developpez.com
l 23/01/2015 à 14:17
CSS avancées
Vers HTML5 et CSS3


Incontournable du design Web moderne, les feuilles de styles CSS sont en pleine révolution avec l'adoption des nouveaux standards HTML5 et CSS3. Familier de CSS2, allez plus loin en maîtrisant les techniques avancées déjà approuvées dans CSS2.1 et découvrez les multiples possibilités de CSS3 !

Chaque jour mieux prises en charge par les navigateurs, les CSS sont sans conteste un gage de qualité dans la conception d'un site Web élégant, fonctionnel et accessible, aussi bien sous Mozilla Firefox, Google Chrome, Opéra ou Safari que sous Internet Explorer ou les navigateurs mobiles.

Vous croyiez tout savoir sur les CSS ? Grâce à la deuxième édition de ce livre de référence, enrichie et mise à jour, vous irez encore plus loin ! Vous apprendrez à faire usage tout autant des technologies avant-gardistes de CSS3 et HTML5 que de pratiques avancées, concrètes et mal connues déjà utilisables en production, et ce, pour l'ensemble des médias reconnus par les styles CSS (écrans de bureau ou mobiles, messageries, mais aussi impression, médias de restitution vocale, projection et télévision).

[Lire la suite]


Avatar de vermine vermine - Expert éminent sénior https://www.developpez.com
l 23/01/2015 à 14:20


David Bleuse nous propose une critique positive de ce livre !

Lisez les critiques.

N'hésitez pas à nous faire pas de votre propre critique.

 
couverture du livre CSS3 pour les Web designers

Note 4.5 drapeau
Détails du livre
Sommaire
Critiques (1)
1 commentaire
 
 

CSS3 pour les Web designers

de
Public visé : Débutant

Résumé de l'éditeur

Les feuilles de styles CSS sont devenues un outil incontournable pour tous les web designers. Des sélecteurs avancés à la génération de contenu, en passant par le grand retour des web fonts, les dégradés, les ombres et les arrondis, jusqu'aux animations les plus complètes, CSS3 offre tout un univers de possibilités créatrices.

Nul ne pouvait mieux vous guider à travers ces galaxies que le designer de renom, auteur et superstar du CSS, Dan Cederholm. Découvrez avec lui ce qui marche, comment ça marche, et que faire quand ça ne marche pas !

Édition : Eyrolles - 132 pages, 1re édition, 20 janvier 2011

ISBN10 : 2212129874 - ISBN13 : 9782212129878

Livre (broché) - 14 x 21 cm

Commandez sur www.amazon.fr :

11.04 € TTC (prix éditeur 12.00 € TTC)
  • Avant-propos de Jeffrey Zeldman
  • Utiliser CSS3 aujourd'hui
  • Comprendre les transitions CSS
    • La fonction de timing
    • Différer la transition
    • Transitions abrégées
    • Interopérabilité
    • Empiler les transitions
    • États de transition
    • Appliquer une transition à plusieurs propriétés
    • Appliquer une transition à toutes les propriétés potentielles
    • Propriétés CSS compatibles avec les transitions
  • Broder avec CSS3
    • Effet de survol simple et flexible avec la propriété opacity
    • DBrodez la toile
  • Transformer le message
    • Transformation d'échelle
    • Transformer l'expérience
    • Rotate, skew et translate
    • Différentes transformations au service du message
  • Arrière-plans multiples
    • Défilement parallaxe
    • La vieille méthode : des balises superflues
    • La nouvelle méthode : arrière-plans multiples via CSS3
  • Enrichir les formulaires
    • Programmation d'un simple formulaire d'inscription
    • Style des éléments fieldset et label
    • Style des champs de saisie
    • Les dégradés CSS3
    • Un vrai bouton en CSS3
    • Et les autres navigateurs ?
    • Utilisation de box-shadow pour créer des états focus
    • Ajout d'animations CSS pour enrichir l'interactivité du formulaire
  • Conclusion - Le futur de CSS3
Critique du livre par la rédaction Didier Mouronval le 20 février 2013
« CSS3 pour les Webdesigners » est un petit livre de la collection « A Book Apart ». Comme pour les autres livres de cette série, celui-ci ne prétend pas vous faire découvrir l'ensemble des spécifications de CSS3, il s'adresse surtout à tous ceux (et ils sont nombreux) qui souhaitent mettre en place certaines fonctionnalités de CSS3 sur leur site sans pour autant aspirer à devenir un expert de cette technologie. Les Webdesigners d'abord, mais aussi tous ceux qui possèdent un site personnel dont ils veulent améliorer l'apparence.
Attention toutefois, des connaissances élémentaires en HTML et CSS sont nécessaires pour tirer profit de ce livre qui n'aborde que les spécificités de CSS3, pas l'apprentissage de CSS.
Ce livre est volontairement succinct et n'aborde que les aspects qui ont paru les plus utiles à l'auteur. Mais CSS3 étant encore en cours d'évolution, vouloir être exhaustif serait illusoire. Mais l'auteur a su faire une sélection suffisante de propriétés utiles, tout en donnant les pistes nécessaires pour pouvoir aller plus loin.

Sur tous ces points, je considère que le but est largement atteint : l'ouvrage est facile à lire, drôle même parfois, les explications sont très claires, progressives et concrètes, basées sur des exemples largement commentés et abordables. L'auteur (sans oublier non plus le traducteur) est très pédagogue ce qui rend le livre particulièrement agréable à lire.
Même s'il date un peu, ce qui, au vu des évolutions des navigateurs, peut faire penser à un livre dépassé, ce n'est pas le cas. En l'achetant, vous ferez vos premiers pas réussis dans l'univers de CSS3.

Seul petit bémol à mon sens, le livre, probablement faute de place, manque d'annexes récapitulatives et les références au site « A List Apart » un peu trop nombreuses.
Pour finir, ce livre est un complément idéal à « HTML5 pour les Webdesigners » dans la même collection pour appréhender ces deux piliers de la programmation Web.




 Commenter Signaler un problème

Avatar de Bovino Bovino - Rédacteur https://www.developpez.com
l 20/02/2013 à 8:56


Je vous propose une critique du livre CSS3 pour les Web designers.



Cet ouvrage décrit de manière claire et succincte la dernière évolution des spécifications CSS afin de faire partager l'essentiel de CSS3 aux designers web. Découvrez avec Dan Cederholm - designer de renom, auteur et superstar du CSS - ce qui marche, comment ça marche, et que faire quand ça ne marche pas !
Si vous aussi vous l'avez lu et apprécié (ou pas ) n'hésitez pas à faire part de vos remarques et commentaires.
Vous pouvez aussi poser vos questions sur ce livre (qui ne seraient pas abordées dans la critique) afin de vous aider à guider votre choix si vous souhaitez l'acheter.

CSS3 pour les Web designers.
Avatar de johnrock johnrock - Membre régulier https://www.developpez.com
l 18/03/2013 à 17:34
Le livre « CSS3 pour les Webdesigners » est un bon petit livre de la collection « A Book Apart ». Je trouve qu'il ne ne fait découvrir l'ensemble des spécifications de CSS3. Il parle beaucoup plus à ceux qui souhaitent mettre en place certaines fonctionnalités de CSS3 sur leur site sans pourtant aspirer à devenir un expert de la technologie. Il s’adresse aussi à ceux veulent améliorer l'apparence de leurs sites mais, tout en ne citant que les bases sans préciser l'ensemble des dernières évolutions des spécifications de CSS3.

Apparemment je pense la même chose que le premier.

 
couverture du livre Css: The Missing Manual

Note 4.5 drapeau
Détails du livre
Sommaire
Critiques (1)
 
 

Css: The Missing Manual

de

Résumé de l'éditeur

Cascading Style Sheets can turn humdrum websites into highly-functional, professional-looking destinations, but many designers merely treat CSS as window-dressing to spruce up their site's appearance. You can tap into the real power of this tool with CSS: The Missing Manual. This second edition combines crystal-clear explanations, real-world examples, and dozens of step-by-step tutorials to show you how to design sites with CSS that work consistently across browsers. Witty and entertaining, this second edition gives you up-to-the-minute pro techniques.

You'll learn how to:
  • Create HTML that's simpler, uses less code, is search-engine friendly, and works well with CSS
  • Style text by changing fonts, colors, font sizes, and adding borders
  • Turn simple HTML links into complex and attractive navigation bars -- complete with rollover effects
  • Create effective photo galleries and special effects, including drop shadows
  • Get up to speed on CSS 3 properties that work in the latest browser versions
  • Build complex layouts using CSS, including multi-column designs
  • Style web pages for printing


With CSS: The Missing Manual, Second Edition, you'll find all-new online tutorial pages, expanded CSS 3 coverage, and broad support for Firebox, Safari, and other major web browsers, including Internet Explorer 8. Learn how to use CSS effectively to build new websites, or refurbish old sites that are due for an upgrade.

Édition : O'Reilly UK - 558 pages, 2e édition, 1er septembre 2009

ISBN10 : 0596802447 - ISBN13 : 9780596802448

Commandez sur www.amazon.fr :

24.05 € TTC (prix éditeur 28.00 € TTC)
Part One: CSS Basics
  • Rethinking HTML for CSS
  • Creating Styles and Style Sheets
  • Selectors: Identifying What to Style
  • Saving Time with Style Inheritance
  • Managing Multiple Styles: The Cascade


Part Two: Applied CSS
  • Formatting Text
  • Margins, Padding, and Borders
  • Adding Graphics to Web Pages
    vSprucing Up Your Site's Navigation
  • Formatting Tables and Forms


Part Three: CSS Page Layout
  • Introducing CSS Layout
  • Building Float-Based Layouts
  • Positioning Elements on a Web Page


Part Four: Advanced CSS
  • CSS for the Printed Page
  • Improving Your CSS Habits
  • CSS 3: CSS on the Edge


Appendixes
  • CSS Property Reference
  • CSS in Dreamweaver CS4
  • CSS Resources
Critique du livre par la rédaction Eusebe le 1er décembre 2009
CSS : the missing manual se présente sous la forme d'un véritable manuel d'apprentissage du langage CSS. C'est un livre très clair, bien écrit, très pédagogique. Chaque chapitre se termine par l'application des concepts étudiés dans un ou plusieurs tutoriels aboutissant à chaque fois à une page différente parfaitement mise en valeur (même dans les premiers chapitres, bien que les propriétés CSS utilisées n'aient pas encore été vues).
Reprenant les concepts du CSS à la base, ce livre est bien adapté aux personnes souhaitant découvrir ce langage. Mais c'est également une véritable mine d'informations qui pourra aider les utilisateurs occasionnels du CSS à se rapprocher d'un développement professionnel.
Pour chaque exemple, les différences existant entre les navigateurs sont présentées, expliquées et résolues (eh oui, les bogues d'IE 6 ne sont pas une fatalité !). Un chapitre est consacré aux nouveautés du standard CSS 3 déjà utilisables, avec les navigateurs qui les implémentent et les solutions pour obtenir le même rendu dans ceux qui ne le font pas (quand c'est possible). Quelques notions de design sont également abordées, comme par exemple la meilleure utilisation des différents types de police.
Bref, un livre à mettre entre toutes les mains de développeurs web désirant approfondir leurs connaissances du CSS.


couverture du livre Conception de sites Web avec les CSS

Note 5 drapeau CD-Rom
Détails du livre
Sommaire
Critiques (1)
 
 

Conception de sites Web avec les CSS

de
Public visé : Débutant

Résumé de l'éditeur

Ces exercices pratiques, agrémentés d'astuces et d'illustrations en couleur, enseignent les dernières techniques de conception des sites Web en CSS (Cascading Style Sheets ou feuilles de style en cascade). Les CSS permettent de contrôler facilement l'apparence des sites Web en décrivant dans un document séparé la présentation visuelle des pages HTML ou XML. En un tour de main, vous pourrez opérer aussi bien des changements mineurs des sites qu'entreprendre une restructuration complète de votre site. Grâce à cet ouvrage, vous découvrirez dans un premier temps les notions fondamentales des CSS, puis vous apprendrez à créer des systèmes de navigation et des mises en pages efficaces, avant de passer au travail avec la typographie, les couleurs, les arrière-plans et l'espace blanc.

Édition : Campus Press - 435 pages, 1re édition, 14 novembre 2008

ISBN10 : 2744023124 - ISBN13 : 9782744023125

Broché, 992 x 102 x 811

Commandez sur www.amazon.fr :

23.66 € TTC (prix éditeur 24.09 € TTC)
  • Prise en main
  • Comprendre les css
  • Sélecteurs et cascade
  • Utiliser des css pour affecter la mise en page
  • Définir les propriétés de premier plan et d'arrière-plan
  • Définir la typographie
  • Utiliser des marges et des bordures pour créer de l'espace et des séparations
  • Mettre en forme des tableaux
  • Mise en forme pour l'impression
  • Assembler les éléments du puzzle
Critique du livre par la rédaction RideKick le 15 avril 2009
Le titre du livre aurait pu porter la mention «par l'exemple », en effet à travers une page web fournie vous apprendrez toutes les notions indispensables du CSS. Positionnement des DIV, marges, bordures, placement du texte, des images, toutes les caractéristiques techniques des polices, des couleurs mais aussi les différentes utilisations du CSS : style pour une page web à l'écran, imprimable, pour terminaux mobiles. A l'appui des scripts fournis avec le livre, vous modifierez pas à pas et au travers des chapitres les éléments de la page. Ce livre peut tout aussi bien servir de bible pour ceux qui maîtrisent déjà un peu le CSS, que de livre «tremplin » pour ceux qui n'en ont jamais fait. L'auteur est clair et précis et les chapitres se lisent de manière très agréable.

Le CD fourni contient tous les scripts nécessaires afin de ne pas avoir à taper les exemples à la main, ainsi que des vidéos de présentation vraiment sympas pour appuyer les différents cours donnés.

Pour conclure : je conseille ce livre à ceux qui veulent apprendre le CSS facilement sans prise de tête comme à ceux qui souhaitent parfaire leur technique ou avoir un livre « mémo » à portée de main.


couverture du livre CSS par l'exemple

Note 4 drapeau
Détails du livre
Sommaire
Critiques (1)
 
 

CSS par l'exemple

de
Traducteurs : Hervé Soulard

Résumé de l'éditeur

Les CSS (Cascading Style Sheets) permettent d'enrichir et de contrôler très précisément la présentation des pages Web. Si la plupart des navigateurs les prennent en charge, quelques différences subsistent encore. CSS par l'exemple se propose, sur le modèle " un problème / une solution / une discussion " de répondre aux questions que tout concepteur de pages Web ne manquera pas de se poser.

Au travers de nombreux exemples, l'auteur montre comment changer rapidement le look d'une page web ; quelques modifications dans la feuille de style suffisent pour obtenir des pages vraiment différentes. Des exemples complets de conception de feuilles de styles illustrent les différents chapitres.

Les solutions proposées couvrent un large éventail, allant du plus simple au plus complexe. Pour ne citer que quelques-unes des recettes de cet ouvrage :
  • Typographie : définir une lettrine, contrôler la taille des polices, supprimer l'espace entre les titres et les paragraphes ;
  • Les images : placer des bordures, jouer avec la transparence, utiliser les techniques des angles arrondis, des portes
  • coulissantes et des sommets montagneux ;
  • La page : éliminer les marges, placer une bordure, ajouter une lightbox ;
  • Listes : les indenter, modifier leur format ; utiliser de grandes images comme marqueurs de liste ;
  • Liens et navigation : faire clignoter le texte, créer des menus contextuels, changer les couleurs des liens dans différentes parties d'une page, insérer des caractères spéciaux avant les liens ;
  • Formulaires : créer des boutons de formulaires, appliquer des styles différents aux éléments de saisie d'un formulaire ;
    Tableaux : définir l'espacement entre les cellules, concevoir un calendrier, saisir des données comme dans un tableur, alterner
  • les couleurs d'arrière-plan des lignes d'un tableau ;
  • Mise en pages : exploiter toutes les possibilités des colonnes et créer des mise en pages asymétriques ;
  • Impression : créer une page et des formulaires faciles à imprimer ;
  • Astuces : installer plusieurs versions d'Internet Explorer pour Windows sur un ordinateur, tester un site web dans un
  • navigateur textuel ;
  • Conception : utiliser les images panoramiques ou les bulles de texte, utiliser les CSS dans Adobe Dreamweaver ou Microsoft Expression Web Designer.


Cet ouvrage (qui couvre CSS 2.1) donnera au concepteur de pages web, quel que soit son niveau, les moyens de maîtriser les feuilles de style et d'obtenir des pages attrayantes et faciles à modifier.

Édition : O'Reilly - 493 pages, 2e édition, 22 mars 2007

ISBN10 : 2841774325 - ISBN13 : 9782841774326

Broché, 945 x 102 x 693

Commandez sur www.amazon.fr :

42.75 € TTC (prix éditeur 45.00 € TTC)
  • Généralités
  • Typographie pour le Web
  • Images
  • Eléments de page
  • Listes
  • Liens et navigation
  • Formulaires
  • Tableaux
  • Mise en pages
  • Impression
  • Astuces, solutions de rechange et dépannage
  • Conception avec CSS
  • Ressources
  • Propriétés CSS 2.1 et extensions particulières
  • Sélecteurs, pseudo-classes et pseudo-éléments CSS 2.1
  • Styler les éléments de formulaire
Critique du livre par la rédaction RideKick le 13 mars 2008
Comme son nom l'indique, l'approche pédagogique du livre s'oriente sur l'exemple, chaque chapitre comporte son lot de «problèmes » qui sont résolus. L'auteur prend aussi le temps d'expliquer ses choix technologiques pour chaque problème posé. On apprend donc utilement à se servir du CSS et pour ceux qui désireraient approfondir leur connaissance, ils trouveront certains exemples plus qu'efficaces. Les annexes ne comportent pas une liste exhaustive de toutes les propriétés, mais la multitude de liens proposés au fil de la lecture guideront le lecteur dans sa quête de la propriété perdue ^^. L'approche du livre se veut donc plus proche de la mise en service rapide que du bagage théorique et c'est ce qui fait sa force.
En résumé un bon livre pour débuter le css et apprendre quelques astuces du design web.


couverture du livre CSS

Note 5 drapeau
Détails du livre
Sommaire
Critiques (1)
 
 

CSS

Techniques professionnelles pour une mise en page moderne

de
Traducteurs : Laurence Chabard
Public visé : Intermédiaire

Résumé de l'éditeur

Donnez plus de place aux CSS (Cascading Style Sheets) dans la conception de vos sites Web !

Vous vous intéressez aux CSS ? Vous préférez un apprentissage basé sur la pratique plutôt que sur la théorie ? Ce livre est pour vous ! Au travers de projets concrets, vous y découvrirez notamment comment résoudre certains problèmes de mise en page. Éric Meyer, le maître du design en CSS, vous propose ici dix exercices extrêmement utiles, conçus pour vous inciter à exploiter davantage les vertus des CSS dans la réalisation de vos sites : vos mises en page deviendront plus flexibles et vous y gagnerez en accessibilité grâce à un poids réduit tout en y introduisant de très beaux effets visuels !

Chaque projet se présente comme un exercice : facile à suivre, formaté en couleur et jalonné de notes, astuces et avertissements, ils vous aideront à maîtriser les CSS. Parmi les sujets abordés, on compte :

  • La conversion d'une page HTML en une mise en page par positionnement CSS
  • La mise en forme d'une galerie de photos
  • L'emploi d'images d'arrière-plan pour un effet de transparence compatible sous tous les navigateurs
  • L'emploi de listes de liens pour créer des onglets et des menus déroulants sans recours à JavaScript
  • La création d'un design pour le site CSS Zen Garden

Édition : Campus Press - 260 pages, 1er février 2005

ISBN10 : 2744018341 - ISBN13 : 9782744018343

Commandez sur www.amazon.fr :

30.40 € TTC (prix éditeur 32.00 € TTC)
  • Conversion d'une page HTML
  • Mise en forme d'une série de photos
  • Mise en forme d'un rapport financier
  • Positionnement en arrière-plan
  • Menus en liste
  • Menus déroulants en CSS
  • Navigation par onglets esthétiques
  • Mise en forme d'un weblog
  • Design d'une page perso
  • Un design Zen Garden
Critique du livre par la rédaction giminik le 1er février 2005
Encore un classique de Eric Meyer sur les CSS. Ce livre est d'une qualité exceptionnelle tant au niveau du contenu textuel que de la finition du livre lui-même. Le papier est agréable au toucher et les illustrations sont en couleur, ce qui donne envie d'aller plus loin dans la lecture. Avec cet ouvrage, vous suivrez par l'exemple, et pas à pas, la réflexion de l'auteur sur la transformation d'une mise en page par tableaux vers le même rendu en CSS pur. Je pense qu'il est plus efficace et facile d'apprendre et de comprendre une telle démarche en testant les exemples devant son écran d'ordinateur.
Ce livre touche à peu près toutes les techniques du CSS à travers divers chapitres (un exemple par chapitre). J'ai fortement apprécié celui concernant la conception d'un design pour le site CSS Zen Garden. Je le conseille donc à tous ceux qui ne veulent pas se noyer dans une documentation de référence.


couverture du livre CSS

Note 5 drapeau
Détails du livre
Sommaire
Critiques (2)
 
 

CSS

La référence

de
Traducteurs : Hervé Soulard

Résumé de l'éditeur

CSS (Cascading Style Sheets) est un standard du W3C permettant d'enrichir et de contrôler finement la présentation de pages web. Aujourd'hui supporté par la grande majorité des navigateurs, il s'érige en standard. Cet ouvrage vous présente tout ce qu'il y a à connaître sur les feuilles de style. Étayé de nombreux exemples, il se propose de vous mener progressivement vers une implémentation parfaite des feuilles de style et de rendre ainsi vos pages web attrayantes et faciles à maintenir. Vous trouverez, parmi d'autres sujets, dans cet ouvrage :

  • Des explications quant à la structure de CSS : ce qu'est une cascade, comment CSS et XHTML peuvent cohabiter, les règles de bases de CSS.
  • La manière de bien utiliser les polices, les marges, les couleurs, les arrière-plans, les propriétés de texte, etc.
  • L'art du positionnement des éléments, des tables, des listes
  • Comment faire des présentations sonores, pour des médias différents
  • Des annexes qui récapitulent les différentes propriétés de CSS, ainsi que ces sélecteurs, pseudo-classes et pseudo-éléments.


CSS - La référence est un ouvrage exhaustif qui s'adresse tout aussi bien au webmaster qu'au designer. Abordant CSS2 et 2.1, et les premiers éléments de CSS3, il constitue une véritable encyclopédie pour ceux qui souhaitent apporter à leurs sites web les techniques de présentation modernes.

Édition : O'Reilly - 520 pages, 2e édition, 1er avril 2005

ISBN10 : 2841773574 - ISBN13 : 9782841773572

Commandez sur www.amazon.fr :

45.06 € TTC (prix éditeur 48.00 € TTC)
  • CSS et les documents
  • Sélecteurs
  • Structure et cascade
  • Valeurs et unités
  • Polices de caractères
  • Propriétés de texte
  • Mise en forme visuelle de base
  • Espacements, bordures et marges
  • Couleurs et arrière-plans
  • Flottement et positionnement
  • Mise en forme des tables
  • Listes et contenu généré
  • Interface utilisateur
  • Autres médias


Annexes

  • Référence des propriétés
  • Référence des sélecteurs, des pseudo-classes et des pseudo-éléments
  • Exemple de feuille de style HTML 4
Critique du livre par la rédaction BrYs le 1er avril 2005
Maintenant que les standards web commencent à rentrer dans les m?urs, O'reilly nous propose un ouvrage complet pour comprendre et utiliser les feuilles de style, outil indispensable à la mise en page.

Ecrit par un membre de la W3C, Eric A. Meyer nous explique la puissance des CSS. Il nous fait comprendre très simplement que bon nombre de balises encore utilisées sont totalement obsolètes et l'avantage à utiliser les feuilles de style. Centraliser la mise en page d'un site Internet, par exemple. Les développeurs de la vieille école comprendront aisément que la balise "font", ou l'imbrication de balises "table" n'a plus lieu d'être, et que tout peut être simplifié.

Grâce à cet ouvrage, vous saurez tout sur les CSS, les classes, les structures de document, et, sûrement la chose la plus complexe à comprendre, le système d'héritage qui peut exister entre les différents styles.

Autant pour débutants que pour experts, ce livre porte bien son nom, il est de loin la référence sur les CSS.
Critique du livre par la rédaction giminik le 1er avril 2005
Avec l'évolution grandissante des technologies Internet, les concepteurs de sites web sont de plus en plus à profiter de la flexibilité qu'apporte un document bien structuré, et ceci grâce aux feuilles de style CSS (Cascading Style Sheets). CSS est un des standards dictés par le w3c (http://www.w3.org) dont l'auteur du livre, Eric A. Meyer fait partie. Si CSS avait un Dieu, ce serait bien lui...
Que vous soyez débutant ou expert en conception de sites web, cet ouvrage est fait pour vous ! Si vous êtes débutant, la pédagogie excellente de l'auteur vous fera rapidement progresser. Si vous êtes plutôt expert, il vous apportera sans aucun doute un apport d'informations, notamment au niveau du contenu généré, du positionnement ou encore des feuilles de style auditives.
Après un bref rappel sur les inconvénients qu'apportent une mise en page en pur HTML (balises font, attribut color, bgcolor...), l'auteur nous prouve en quelques lignes que cette façon de travailler est belle et bien dépassée : CSS est de loin beaucoup plus flexible et puissant que la mise en page à l'ancienne. Il permet de diminuer le temps de travail, facilite la maintenance du site et permet de gagner de la bande passante... Il ne suffit alors de ne modifier qu'un seul document - la feuille de style - pour que l'ensemble des pages du sites soient affectées par la modification. Toutes les propriétés sont ensuite présentées dans différentes parties thématiques. Elles sont généralement accompagnées d'exemples simples permettant de les expliquer de manière concrête. Certaines propriétés font même l'objet d'un petit paragraphe indiquant leur compatibilité avec tel navigateur. CSS la référence couvre CSS 2 et CSS 2.1 : vous y découvrirez les différences très subtiles non négligeables entre ces deux versions.

Au programme, vous saurez tout sur les sélecteurs, en passant par les pseudo-classes et les pseudo-éléments avec toujours un petit mot sur la compatibilité. Vous connaîtrez également tous les secrets de la structure et cascade d'un document. J'y ai appris une notion jusqu'alors inconnue pour moi - la règle de spécificité - qui permet notamment de prévoir par quelle propriété un élément sera affecté en cas de conflit de sélecteurs.

Les livres de l'éditeur O'Reilly sont excellents avec du contenu toujours intéressant. Dommage toutefois que les illustrations ne soient pas en couleurs. C'est bien entendu une référence comme l'indique son titre, mais il ne vous guidera pas dans la transformation d'un site HTML avec tableaux en un site (x)HTML avec CSS. Ce livre est uniquement basé sur la théorie, donc si vous voulez la pratique, cet ouvrage ne s'adresse pas à vous. Je le recommande donc à toute personne désirant se lancer dans la conception de sites web, ou désirant détenir un aide mémoire efficace à portée de mains.


couverture du livre Le Zen des CSS

Note 4 drapeau
Détails du livre
Sommaire
Critiques (2)
 
 

Le Zen des CSS

de

Résumé de l'éditeur

Le design en CSS est-il forcément synonyme de design rébarbatif ? Persuadé du contraire, Dave Shea a voulu mettre fin aux idées reçues en prouvant que les CSS pouvaient être un allié de poids pour les designers, tant en matière de créativité, que d'efficacité et de flexibilité. En mai 2003, il lance le site CSS Zen Garden (www.csszengarden.com). L'idée est simple et élégante : proposer un code HTML bien écrit à des designers pour qu'ils exercent leur talent et mettent en oeuvre leur imagination pour créer des designs en CSS, puis mettre ces réalisations en ligne à la disposition de tous.

Depuis ses modestes débuts, Zen Garden a bien grandi et compte aujourd'hui plus de 150 designs reçus du monde entier. Le site s'est imposé comme la référence du design de haute qualité en CSS dans toute la communauté des développeurs et designers web.

Dans le Zen des CSS, Dave Shea et Molly Holzschlag vous font voyager à travers 36 des meilleures contributions à Zen Garden en détaillant le processus d'élaboration, les outils et le code utilisé derrière chaque design.

Vous y découvrirez :
  • de superbes exemples de designs web en CSS
  • des astuces pour égayer un design à l'aide de la typographie
  • de judicieux détournements et des techniques pour assurer la pérennité de vos CSS
  • de précieux conseils pour réduire le temps de téléchargement des images
  • le secrets des CSS des plus grands noms du design et développement web.

Édition : Eyrolles - 296 pages, 1re édition, 1er novembre 2005

ISBN10 : 2212116993 - ISBN13 : 9782212116991

Commandez sur www.amazon.fr :

28.41 € TTC (prix éditeur 29.09 € TTC)
  • Introduction
  • Chapitre 1 : Code Source
  • Chapitre 2 : Design
  • Chapitre 3 : Mise en page
  • Chapitre 4 : Images
  • Chapitre 5 : Typographie
  • Chapitre 6 : Effets spéciaux
  • Chapitre 7 : Reconstruction
  • Le mot de la fin
  • Index
Critique du livre par la rédaction freegreg le 1er novembre 2005
Comprendre les feuilles de style par l'exemple, tel pourrait être le sous titre de ce livre. Tout tourne autour de l'exemple, tout est motif à explications.
Dans un style très clair, précis et détaillé, les auteurs nous décortiquent quelqu'unes des nombreuses contributions au site www.csszengarden.com, site de référence en matière de design CSS.
Ce livre peut se lire de toutes les manières : attentivement ou en diagonale, dans l'ordre des chapitres ou en ordre dispersé à partir de l'index très détaillé. A vous de venir picorer des idées, astuces ici et là.
Il ne faut, cependant, surtout à pas s'attendre à trouver ici une référence en matière de CSS, tel n'est pas le but.
Ce livre est à recommander vivement à tous ceux qui trouvent austères les sites developpés à l'aide de feuilles de style mais aussi à tous les chefs de projets et développeurs web pour leur faire prendre conscience des nombreux avantages que l'on peut tirer à bien concevoir un site avec un code conforme aux standards, où le fond est séparé de la forme, etc.
Critique du livre par la rédaction arnaud le 1er novembre 2005
Excellent livre !
J'ai adoré lire ce livre, d'une part de par son design que je trouve très original et d'une lecture vraiment très facile. J'ai vraiment beaucoup apprécié les notes, astuces et images situés sur les côtés de chaque page pour les séparer du contenu principal.

En ce qui concerne les CSS, ce n'est pas ce livre qui vous apprendra à les maîtriser, mais plutôt à bien vous en servir pour des situations données dans l'étape de création d'un design, et ceci grâce aux nombreux designers qui ont contribués au site www.csszengarden.com . Il faudra donc, de préférence, avoir déjà de bonnes bases pour mieux appréhender les passages purement techniques décrites dans les pages.

Mais ce n'est pas tout, il ne faut pas oublier que ce livre est axé sur le « Design ». Vous apprendrez donc quelques des notions élémentaires de design appliqué au web. Cela donne même envie d'approfondir le sujet.

A noter tout de même que tous les bons conseils avisés gravitent autour des CSS.


couverture du livre Transcender CSS

Note 4.5 drapeau
Détails du livre
Sommaire
Critiques (2)
 
 

Transcender CSS

Sublimez le design web !

de

Résumé de l'éditeur

Alors que le Web évolue pour intégrer de nouveaux standards et que les derniers navigateurs ouvrent de nouvelles voies créatives, l'art du design web est aussi en pleine mutation. Cependant, rares sont les designers web également expérimentés en programmation. Résultat : ils ne peuvent exploiter pleinement toutes les ressources à disposition, car balisage sémantique et CSS sont un frein à leur élan créatif. Andy Clarke a su identifier les difficultés auxquelles sont confrontés ces designers web à la sensibilité plus graphique que technique ; il propose ici aux artistes du Web une approche progressive afin de conjuguer créativité, fonctionnalité et accessibilité dans la conception de leurs sites. Pour cela, les CSS offrent un cadre indispensable, mais il s'agit de s'en affranchir pour les transcender.

Dans cet ouvrage révolutionnaire, unique en son genre, vous découvrirez comment implémenter des designs originaux, tout en mettant à profit les possibilités créatives du balisage et des feuilles de style. Vous apprendrez à mettre en place un nouveau workflow, construire des prototypes, utiliser efficacement des grilles, visualiser les balises, etc. Vous "transcenderez" CSS, qu'il s'agisse d'employer les derniers navigateurs prenant en charge la troisième version de cette norme, de collaborer efficacement avec les membres de l'équipe, ou bien plus encore.

Écrit et relu par les "gourous" du domaine que sont Andy Clarke et Molly E. Holzschlag, cet ouvrage :
  • adopte une approche visuelle pour mieux vous enseigner les techniques de programmation ;
  • propose de nombreux exemples de sites web, de photographies et d'autres sources d'inspiration donnant aux artistes des idées pour visualiser leur code ;
  • évoque en avant-première les avancées techniques des nouveaux navigateurs et de la spécification CSS 3, en cours d'élaboration.

Édition : Eyrolles - 366 pages, 20 août 2007

ISBN10 : 2212121075 - ISBN13 : 9782212121070

Commandez sur www.amazon.fr :

30.40 € TTC (prix éditeur 32.00 € TTC)
  • DECOUVERTE
    • Transcender CSS, mais encore ?
    • Les principes permettant de transcender CSS
    • Pourquoi est-il désormais possible de transcender CSS ?
    • Un design s'appuyant sur les contenus
    • La sémantique, c'est le Sens
    • Baliser le monde entier
  • PROCESSUS
    • Identifier le workflow idéal
    • Rassembler les contenus
    • Travailler avec des squelettes de mise en page
    • Améliorer l'approche par la méthode de la boîte grise
    • Créer des designs statiques
    • Utiliser des prototypes interactifs
    • Les conseils des pros en matière de prototypes interactifs
    • Mettre le processus en pratique
  • INSPIRATION
    • Introduction au design reposant sur des grilles
    • Les grilles dans le design web contemporain
    • Chercher des grilles en dehors du Web
    • Introduire de nouvelles grilles dans le design web
    • Trouver l'inspiration dans les endroits les plus inattendus
    • Activités artistiques
    • Le design web vu comme un bel art
  • TRANSCENDENCE
    • Transcender CSS
    • CSS 3 (la troisième fois sera la bonne)
    • Mises en page complexes
Critique du livre par la rédaction pyrrha le 7 mai 2009
Si vous vous attendez à rester dans les mises en page austères des livres de programmation, vous serez probablement agréablement surpris. En effet, c'est un véritable livre d'Art que nous offrent les éditions Eyrolles sous le titre bien engageant qu'est « Transcender CSS, sublimez le design web !».
Comment transcender CSS ? L'auteur construit son livre en 4 étapes :
Découverte : où l'on redécouvre CSS et ses nouvelles possibilités (différents navigateurs, messageries électroniques...)
Processus : où l'on aborde l'optimisation du workflow par l'utilisation de CSS, les prototypes interactifs et la mise en pratique du processus de création.
Inspiration : où l'on découvre où trouver l'inspiration, dans les méthodes de conceptions existantes mais aussi en dehors du Web, dans les magazines, l'architecture...
Transcendance : où l'on apprend à exprimer sa créativité en usant des forces de CSS (positionnements), des nouveautés de CSS 3, et des mises en page complexes.
La première lecture s'ensuivra d'une satisfaction manifeste, le livre tient ses promesses et déroule sous nos yeux des analyses des dernières méthodes de conception CSS. Il aborde également les problématiques actuelles auxquelles répond le CSS, c'est à dire les questions d'accessibilité, d'ergonomie, d'émotion du visiteur...
Andy Clarke s'appuie sur son expérience et son savoir-faire pour nous plonger dans la bonne conception CSS, et nous amener à appréhender le web en perspective de renouveau.
Critique du livre par la rédaction MasterOfChakhaL le 30 août 2007
Andy Clarke, l'auteur de cet ouvrage, est un webdesigner anglais dont la réputation n'est plus à faire. Aujourd'hui membre du World Standard Project et participant à l'élaboration de ce que sera le CSS3 dans un groupe de travail du W3C, il a toujours eu à coeur de concilier créativité, accessibilité et respect des standards.
Nous sommes arrivés à une époque où les navigateurs modernes implémentent de mieux en mieux les recommandations du W3C concernant les CSS. La conséquence est que de plus en plus de designers qui n'ont pas forcément de fortes compétences en programmation se sont tournés vers cette technologie. Aujourd'hui, pour utiliser le potentiel du CSS, il ne suffit plus de transposer des connaissances qui auraient pu être acquises sur d'autres média que le web (maîtrise de la typographie et des positionnements par exemple). Ce serait se priver de nombreuses possibilités.
C'est dans ce contexte, après avoir convaincu de la possibilité de transcender CSS et de l'intérêt que cela présente, qu'Andy Clarke nous présente ces méthodes de travail. Il ne s'agit pas de s'initier au CSS, ce n'est pas un ouvrage pour les débutants. La connaissance des propriétés principales du CSS est un pré-requis et le webdesigner qui est ciblé s'est déjà initié aux aspects techniques du CSS.
Le résumé de l'éditeur indique que cet ouvrage est plutôt destiné à des designers n'ayant pas de compétences particulières en programmation. Je pense qu'il pourrait également s'adresser à un public de développeurs pour lesquels la technique n'est pas forcément un problème mais qui souhaiteraient explorer plus avant le processus du design.
En s'appuyant sur des exemples concrets où il faudra soit transposer un design prévu pour le média papier soit concevoir un design pour transmettre un contenu, Andy Clarke vous exposera toutes les phases de l'analyse qui permettront d'extraire la structure. Ainsi un large chapitre est consacré à la prise en compte du contenu en se focalisant sur le sens sans pour autant biaiser son analyse par des considérations de design qui n'interviendront que plus tard.
Ensuite, l'auteur consacre un autre chapitre au processus de production d'un design à travers les différentes étapes qui permettent de construire au fur et à mesure un design dans un contexte professionnel. Il propose différents niveaux de conception (squelette de pages, utilisation de symboles...) mais aussi des conseils facilitant la réutilisation du travail déjà fait.
Vient ensuite l'aspect plus créatif de ce livre. Andy Clarke vous aide à trouver l'inspiration là où on ne la chercherait pas forcément. Que ce soit grâce au média papier qui est plus mature que le média web, ou simplement en levant le nez quand vous vous balader dans la rue, l'auteur essaiera d'affuter votre regard afin que vous soyez en mesure de retirer des idées de votre expérience du quotidien. Il propose aussi quelques petites activités qui permettent d'attiser la créativité.
Enfin, ce livre se termine en présentant certains des aspects les plus prometteurs de CSS3. Ce chapitre ne sera certainement pas exploitable pour des projets concrets mais il aura l'avantage de vous faire rêver en attendant que la recommandation CSS3 soit achevée et que les navigateurs l'aient implémentées correctement.
Au delà du fond de cet ouvrage qui est écrit dans un style très clair et très facile à lire, il faut noter que la présentation est réellement très soignée. Tout en couleur et illustré de nombreuses photos et montages, d'une forme carrée peu habituelle, ce livre se rapproche d'un ouvrage d'art et gardera forcément une place particulière dans votre bibliothèque.


couverture du livre Pratique de CSS et Javascript

Note 5 drapeau
Détails du livre
Sommaire
Critiques (1)
0 commentaire
 
 

Pratique de CSS et Javascript

de

Résumé de l'éditeur

Web 2.0 ou pas, quand il s'agit de construire rapidement des pages dynamiques, agréables à consulter et susceptibles de servir de briques à des applications web toujours plus complexes, il est indispensable de maîtriser JavaScript et les CSS, les deux éléments fondamentaux du Web côté client. Pour la deuxième édition de son best-seller, Éric Sarrion a choisi de développer largement les parties consacrées à JavaScript. La grande nouveauté de cette nouvelle édition est une analyse exhaustive des bibliothèques Prototype et Scriptaculous, utilisées par toutes les applications Web 2.0, et que les autres ouvrages sur le sujet se contentent généralement de survoler. La partie I, consacrée aux feuilles de style, montre les différentes manières de styler une page HTML et progresse jusqu'à obtenir des mises en page avec menu ou en arborescence, uniquement à l'aide des CSS 2, la dernière version des CSS compatible avec tous les navigateurs. La partie II se concentre sur les bases de JavaScript, un langage très puissant, mais beaucoup plus simple à apprendre qu'on ne le croit généralement. La fameuse API DOM (Document Object Model), incluse dans tous les navigateurs modernes, est étudiée dans la partie III. Elle permet au programmeur d'accéder et de modifier à volonté n'importe quel élément de la page. La partie IV est consacrée aux communications AJAX. Vous y trouverez aussi des exemples de code côté serveur en Java et Ruby. La partie V détaille la bibliothèque Prototype, ainsi que la notation JSON, qui permet d'alléger le code JavaScript de façon spectaculaire. Enfin, la partie VI passe en revue, exemples à l'appui, toutes les classes, méthodes et propriétés de la bibliothèque d'effets Scriptaculous. Impossible de trouver plus complet sur le sujet ! À l'heure où les applications Web mobilisent les principaux acteurs de l'Internet, ce livre, dont les nombreux exemples ont tous été testés avec les derniers navigateurs (y compris Firefox 2 et Internet Explorer 7), accompagnera les webmasters et les développeurs pour qui le Réseau est un nouvel espace de créativité.

Édition : O'Reilly - 643 pages, 2e édition, 1er mars 2007

ISBN10 : 2841774538 - ISBN13 : 9782841774531

Commandez sur www.amazon.fr :

42.75 € TTC (prix éditeur 42.75 € TTC)
  • Feuilles de style
  • Javascript
  • Document Object Model
  • Ajax
  • Bibliothèque Prototype
  • Bibliothèque Scriptaculous
  • Annexes
Critique du livre par la rédaction bigboomshakala le 9 août 2007
Voilà un ouvrage qui remplit parfaitement ses objectifs :
  • si vous débutez il vous donne de solides bases de javascript et vous inculque les bonnes manières en matière de CSS
  • si vous êtes déjà à l'aise avec les concepts présentés ici, ce livre vous remettra en mémoire quelques pièges et autres astuces bien utiles
  • et quelque soit votre niveau vous apprécierez pleinement les deux parties consacrées aux bibliothèques Prototype et Scriptaculous


Ce livre ne prétend pas être une référence en matière de CSS ou de Javascript. Il n'est pas exhaustif concernant l'API Javascript standard ou les propriétés CSS, il n'a pas été écrit pour ça. Par contre il enseigne ce qu'il faut savoir pour bien commencer dans la programmation de sites web :
  • facilement modifiables et puissants (DOM)
  • attractifs (CSS, Javascript, Scriptaculous)
  • dynamiques (Ajax)
  • crossbrowsers (IE, Netscape-like)


L'organisation du livre est claire et bien pensée. Les explications sont très bien illustrées par des exemples simples de styles CSS ou de scripts et des impressions d'écran de ce qui est obtenu (avec comparaison entre les navigateurs si différences il y a).
Ici on vous précise la compatibilité des scripts avec les navigateurs et on vous propose des règles simples pour que vos scripts aient le même effet partout. Vous avez le droit à une introduction à Ajax, introduction car il ne s'agit pas de l'objet de cet ouvrage mais qu'il est indispensable de connaître cette technologie et ses possibilités si vos sites utilisent des bases de données et que vous voulez éviter certains désagréments aux utilisateurs (cf. l'asynchronisme d'Ajax contre le synchronisme des sites avec BDD sans Ajax). Apprenez et exploitez toute la puissance de l'utilisation du DOM (Document Object Model) qui vous permettra de gérer vos pages en Javascript et de les rendre plus dynamiques.
Et, cerise sur le gâteau, quand vous aurez acquis toutes les règles du savoir-vivre CSS/Javascript alors vous pourrez profiter pleinement de la description complète des bibliothèques Prototype et Scriptaculous, point (très) fort de ce livre.
La bibliothèque Prototype est un ensemble d'objets et de fonctions qui vous simplifierons la vie :
  • en vous proposant de nouvelles fonctionnalités : combien de fois avez-vous dû réinventer la roue et implémenter des fonctions utilitaires pour gérer les tableaux, les chaînes de caractères, etc. Et bien Prototype propose des extensions de l'API Javascript qui gère tout ça pour vous, et crossbrowser en plus !
  • en vous proposant des alternatives crossbrowser (i.e. compatible avec tous les navigateurs) : aïe ! Les évènements ne sont pas gérés de la même façon sous IE et Firefox ! C'est la galère si je veux rendre mes scripts compatibles avec ces deux navigateurs. Prototype met à votre disposition l'objet Event, un exemple parmi d'autres.
  • en vous proposant des classes liées à Ajax : et oui Ajax c'est bien, mais ça ne s'utilise pas tout à fait pareil sur tous les navigateus (sic!) et il faut encapsuler ses scripts pour définir les différentes étapes (envoi de la requête, action en cas de réussite, d'échec, etc.). Là encore merci Prototype !


La bibliothèque Scriptaculous utilise Prototype et vous offre tout un panel de possibilités pour que vos sites "en jettent" :
  • Des effets visuels assez impressionnants et tellement simples à mettre en place avec ses outils,
  • du Drag'n'Drop (Glisser/Déplacer),
  • de l'auto-complétion (avec Ajax)
  • et une extension du DOM pour une utilisation simplifiée.

Tout cela mis ensemble et vos pages web ne seront plus les mêmes. Mais pour y arriver encore faut-il trouver une bonne documentation, et ce livre fait parfaitement l'affaire.




 Commenter Signaler un problème

Avatar de forum forum - Robot Forum https://www.developpez.com
l 02/06/2014 à 20:20
Bonjour,

Pratique de CSS et Javascript


Web 2.0 ou pas, quand il s'agit de construire rapidement des pages dynamiques, agréables à consulter et susceptibles de servir de briques à des applications web toujours plus complexes, il est indispensable de maîtriser JavaScript et les CSS, les deux éléments fondamentaux du Web côté client. Pour la deuxième édition de son best-seller, Éric Sarrion a choisi de développer largement les parties consacrées à JavaScript. La grande nouveauté de cette nouvelle édition est une analyse exhaustive des bibliothèques Prototype et Scriptaculous, utilisées par toutes les applications Web 2.0, et que les autres ouvrages sur le sujet se contentent généralement de survoler. La partie I, consacrée aux feuilles de style, montre les différentes manières de styler une page HTML et progresse jusqu'à obtenir des mises en page avec menu ou en arborescence, uniquement à l'aide des CSS 2, la dernière version des CSS compatible avec tous les navigateurs. La partie II se concentre sur les bases de JavaScript, un langage très puissant, mais beaucoup plus simple à apprendre qu'on ne le croit généralement. La fameuse API DOM (Document Object Model), incluse dans tous les navigateurs modernes, est étudiée dans la partie III. Elle permet au programmeur d'accéder et de modifier à volonté n'importe quel élément de la page. La partie IV est consacrée aux communications AJAX. Vous y trouverez aussi des exemples de code côté serveur en Java et Ruby. La partie V détaille la bibliothèque Prototype, ainsi que la notation JSON, qui permet d'alléger le code JavaScript de façon spectaculaire. Enfin, la partie VI passe en revue, exemples à l'appui, toutes les classes, méthodes et propriétés de la bibliothèque d'effets Scriptaculous. Impossible de trouver plus complet sur le sujet ! À l'heure où les applications Web mobilisent les principaux acteurs de l'Internet, ce livre, dont les nombreux exemples ont tous été testés avec les derniers navigateurs (y compris Firefox 2 et Internet Explorer 7), accompagnera les webmasters et les développeurs pour qui le Réseau est un nouvel espace de créativité.

[Lire la suite]

  • Avez-vous lu ce livre ou pensez-vous le lire ?
  • Souhaitez-vous ajouter une critique de ce livre sur la page de la rubrique ?
  • Avez-vous un commentaire à faire ?



 
couverture du livre XHTML et CSS

Note 5 drapeau
Détails du livre
Sommaire
Critiques (2)
 
 

XHTML et CSS

Cours et exercices

de

Résumé de l'éditeur

Un seul livre pour apprendre l'XHTML et les CSS

Il n'est plus concevable aujourd'hui de développer un site Web professionnel en HTML, et tout étudiant en informatique ou en design Web se doit de maîtriser les langages XHTML et CSS. Bien utilisés, ces deux standards du Web permettent de construire des sites compatibles avec tous les navigateurs et terminaux portables, alliant rapidité d'affichage et richesse de mise en page grâce à une parfaite séparation du contenu et de la présentation.

Vous découvrirez dans cet ouvrage à l'exposé clair et rigoureux toutes les subtilités de la syntaxe de ces deux langages, et apprendrez à concevoir des documents XHTML et des feuilles de style CSS 2 conformes aux standards les plus récents du W3C. Vous découvrirez en particulier comment réaliser des mises en pages sophistiquées sans recourir aux tableaux, grâce aux puissantes techniques de dimensionnement et de positionnement de CSS.

Édition : Eyrolles - 508 pages, 1re édition, 1er mars 2006

ISBN10 : 2212116373 - ISBN13 : 9782212116373

Commandez sur www.amazon.fr :

28.41 € TTC (prix éditeur 29.90 € TTC) livraison gratuite !
Les styles CSS
  • Introduction à XHTML
  • Structure d'un document XHTML
  • Créer du texte et des listes
  • Insérer des images et du multimédia
  • Créer des liens
  • Créer des tableaux
  • Créer des formulaires
  • Créer des cadres
  • Introduction à CSS

Les styles CSS
  • Introduction à CSS
  • Couleurs et image de fond
  • Créer des bordures, marges, espacements et contours
  • Le style du texte et des liens
  • Créer une mise en page : le dimensionnement et le positionnement
  • Le style des tableaux
  • Le style des listes
  • Les médias écrits

Annexes
  • Référence des éléments XHTML
  • Référence CSS 2
  • Codes des couleurs
  • Les entités de caractères
  • Bibliographie et adresses utiles
Critique du livre par la rédaction freegreg le 15 août 2006
Dans un même livre, Jean Engels arrive avec succès à traiter à la fois l'XHTML et les feuilles de style CSS. Dans un style clair et simple, il nous amène au coeur du développement web. L'auteur, sans prendre parti (comme c'est souvent le cas), nous décrit tout l'état de l'art.

Dans la première partie consacrée à l'XHTML, l'auteur décrit de manière exhaustive la structure des pages Web et notamment la signification des différentes balises. Aussi, tout en nous précisant qu'il s'agit d'éléments ou de méthodes obsolètes et/ou déconseillées, il aborde également les principes de la présentation par tableaux et même le fonctionnement par cadres qui sont encore (malheureusement) couramment employés.

Dans la deuxième partie, l'auteur traite des feuilles de style, de leur fonctionnement, de leur utilisation, là aussi de manière exhaustive. Ainsi, il lui arrive fréquemment de nous décrire le fonctionnement de propriétés mal ou pas encore employées par nos navigateurs web préférés. Espérons que cela sera rapidement le cas, pour profiter pleinement de ces fonctionnalités intéressantes.

Enfin dans une troisième partie consacrée aux annexes, l'auteur nous fait un résumé sur l'emploi des divers éléments XHTML, des différentes propriétés CSS existantes mais aussi sur les codes caractères et codes couleur employés sur le web (important pour le daltonien que je suis )

Pour conclure, je conseillerai ce livre très complet à quiconque souhaite se lancer ou même se perfectionner dans le développement web. Pour moi, il est inutile de tout retenir, il suffit de savoir que cela existe et de facilement pouvoir retrouver ce que l'on cherche. Ainsi, il restera à portée de main comme aide-mémoire.
Critique du livre par la rédaction arnaud le 29 décembre 2006
La critique précédente étant déjà très claire, je vais être bref tout en y ajoutant mes impressions.

C'est un très bon livre pour toute personne souhaitant apprendre et comprendre le XHTML ainsi que le CSS.

Les cours sont plus orientés "encyclopédie" mais restent quand même très efficaces. Quant aux exercices, ils permettent de passer rapidement à la pratique et de vérifier les acquis. À noter la présence d'annexes qui s'avèrent d'une très grande utilité.

En résumé, c'est un livre accessible à tous, du débutant à l'expert, ce qui en fait une très bonne référence à garder près de soi comme aide mémoire.


couverture du livre Pratique de CSS et Javascript

Note 3 drapeau
Détails du livre
Sommaire
Critiques (1)
0 commentaire
 
 

Pratique de CSS et Javascript

de

Résumé de l'éditeur

Les pages Web sont aujourd'hui omniprésentes et servent aussi bien à construire des sites consultables sur l'Internet que des interfaces pour toutes sortes d'applications qui se doivent d'être à la fois performantes et élaborées au plan graphique.

Pour ceux qui veulent prendre part à cette évolution, il devient indispensable de maîtriser les CSS 2.0, et des connaissances minimales en JavaScript ne sont plus superflues.

C'est dans cette optique qu'Éric Sarrion a conçu un ouvrage à la fois complet et compact, qui montre, exemples à l'appui, comment styler une page Web avec CSS et comment la rendre auto-modifiable en fonction du contexte, grâce à JavaScript :

  • La partie I consacrée aux feuilles de style, explique les différentes manières de styler une page HTML et progresse jusqu'à obtenir des mises en page avec menu ou en arborescence, uniquement à l'aide des CSS.
  • La partie II se concentre sur les bases de JavaScript, qui s'avère être un langage beaucoup plus simple qu'on ne le croit généralement.
  • Couplé à la fameuse API DOM ( Document Object Model ) incluse dans les navigateurs modernes et étudiée dans la partie III , JavaScript permet de rendre vos pages HTML entièrement dynamiques.


À l'heure où les applications Web mobilisent les principaux acteurs de l'Internet, ce livre consacré au côté client, accompagnera bien sûr les designers, mais aussi les webmasters et les développeurs pour qui le réseau est un nouvel espace de créativité.

Édition : O'Reilly - 305 pages, 1re édition, 1er novembre 2005

ISBN10 : 2841773817 - ISBN13 : 9782841773817

Commandez sur www.amazon.fr :

30.40 € TTC (prix éditeur 32.00 € TTC)
  • Feuilles de style
    • Qu'est-ce qu'un style?
    • Propriétés des éléments HTML
    • Exemples de feuilles de style
  • JavaScript
    • Ecrire et déboguer du code JavaScript
    • Syntaxe du langage
    • Classes et opérateurs JavaScript
    • Gestion des événements en JavaScript
    • Expressions régulières
  • Document Object Model
    • Objet window
    • Objet document
    • API DOM
    • Conclusion
  • Annexe
  • Index
Critique du livre par la rédaction denisC le 1er novembre 2005
Ce livre est un bonheur pour les gens qui cherchent à passer du HTML au DHTML en ajoutant tout ce qui est en rapport avec le D ( Dynamic ).
La première partie du livre est consacrée aux feuilles de style. Elle présente de façon très factuelle l'ensemble des effets possibles grâce au feuille de styles CSS. De nombreux exemples permettent de se rendre compte visuellement de l'effet obtenu.
La seconde partie passe au JavaScript, et présente, là aussi de façon factuelle et assez exhaustive l'ensemble des opérations possibles grâce à l'utilisation du JavaScript (sur la base du standard EcmaScript). Les exemples sont très nombreux et permettent de bien suivre le fonctionnement des différentes instructions.
La troisième partie vous propose d'aller encore plus loin en introduisant l'API DOM qui permet. De nombreux exemples permettent de se bien prendre contact avec cette norme du W3C.
Ce livre présente de façon très exhaustive l'ensemble des possibilités, à grand renfort d'exemples. Si son aspect encyclopédique en fait un livre très difficile à lire d'un bout à l'autre, il reste une référence où l'on trouvera très facilement la solution à un problème donné.
Autres petits regrets concernant ce livre:
  • Son aspect très encyclopédique, présentant les choses de façon factuelle ne permet pas du tout de se donner une idée générale sur les techniques du DHTML et sur leurs domaines d'utilisation respectifs
  • Les technologies présentées sont des technologies qui commencent à vieillir. Ce livre n'est donc pas à conseiller à ceux qui cherchent les toutes dernières tendances du développement Web. Les techniques du Web 2.0 (comme Ajax) ne sont pas abordées


En conclusion, ce livre est une précieuse référence technique. Il permettra à ceux qui ont une vague idée de l'utilité du CSS et du JavaScript de trouver facilement et rapidement la façon de le mettre en application.
Il n'est en revanche, à mon avis, pas à conseiller à des gens n'ayant pas la moindre notion sur ces domaines, car il se concentre exclusivement sur la technique, sans aucun commentaire sur la logique ou l'organisation des choses.




 Commenter Signaler un problème

Avatar de khayyam90 khayyam90 - Rédacteur https://www.developpez.com
l 02/06/2014 à 20:23
Bonjour,

Pratique de CSS et Javascript


Les pages Web sont aujourd'hui omniprésentes et servent aussi bien à construire des sites consultables sur l'Internet que des interfaces pour toutes sortes d'applications qui se doivent d'être à la fois performantes et élaborées au plan graphique.

Pour ceux qui veulent prendre part à cette évolution, il devient indispensable de maîtriser les CSS 2.0, et des connaissances minimales en JavaScript ne sont plus superflues.

C'est dans cette optique qu'Éric Sarrion a conçu un ouvrage à la fois complet et compact, qui montre, exemples à l'appui, comment styler une page Web avec CSS et comment la rendre auto-modifiable en fonction du contexte, grâce à JavaScript :

  • La partie I consacrée aux feuilles de style, explique les différentes manières de styler une page HTML et progresse jusqu'à obtenir des mises en page avec menu ou en arborescence, uniquement à l'aide des CSS.
  • La partie II se concentre sur les bases de JavaScript, qui s'avère être un langage beaucoup plus simple qu'on ne le croit généralement.
  • Couplé à la fameuse API DOM ( Document Object Model ) incluse dans les navigateurs modernes et étudiée dans la partie III , JavaScript permet de rendre vos pages HTML entièrement dynamiques.


À l'heure où les applications Web mobilisent les principaux acteurs de l'Internet, ce livre consacré au côté client, accompagnera bien sûr les designers, mais aussi les webmasters et les développeurs pour qui le réseau est un nouvel espace de créativité.

[Lire la suite]

  • Avez-vous lu ce livre ou pensez-vous le lire ?
  • Souhaitez-vous ajouter une critique de ce livre sur la page de la rubrique ?
  • Avez-vous un commentaire à faire ?