Aymeric Jacquet, Me, Myself and I…

Appel à contribution : bien débuter l’étude des comportements CSS

J’ai reçu un email ce matin d’un visiteur du blog qui m’a posé une question très intéressante :

Par quoi commencer l’étude des feuilles de style CSS ?

Pour bien répondre à Loic, je vais donc préparer un « plan de formation » sous la forme d’un billet à venir, mais vos avis m’intéressent aussi grandement pour voir nos divergences ou convergences.

Pour ma part, pour bien commencer, je conseillerai de débuter par… l’html/xhtml. Bien connaitre les balises, leurs interactions, leur type (en-ligne, bloc), leurs différences d’affichage par défaut dans les principaux navigateurs du marché.

Puis, j’attaquerai les CSS par les positionnements qui sont surement ce qui demande le plus de travail et d’expérimentation.

Le tout organisé autour d’un projet directeur, la création d’un site internet personnel, par exemple, un CV en ligne.

Et vous ?

Aymeric Jacquet

, , , ,

15 réponses à “Appel à contribution : bien débuter l’étude des comportements CSS”

  1. Il serait intéressant de savoir, également, comment TOI tu as fait pour en devenir un expert ?! Allez, c’est TON blog après tout, tu peux TOUT y dire du croustillant stp !.

  2. Commencer par le HTML, oui. Pas la peine d’aller tout de suite vers les formulaires, les object, et autres subtilités. Mais les div, p, hN, ul et ol, et quelques autres, pour pouvoir faire un document textuel minimal.

    Ensuite, avant d’attaquer le positionnement, je commencerais plus en douceur par une prise en main de la syntaxe CSS via de la mise en forme moins problématique, par exemple la mise en forme du texte, le dimensionnement des blocs, les padding et margin, les border, et les couleurs et images de fond.

    Le positionnement CSS ne viendrait alors que dans un troisième temps, une fois que les bases de (X)HTML et de la syntaxe CSS sont acquises.

    Et pour compléter, je me servirais du billet suivant : Quelle démarche suivre pour intégrer une maquette en page HTML/CSS ?.

  3. Certainement pas par du positionnement, malheureux ! Ce serait le meilleur moyen de le dégoûter par excès de complexité (y’a-t-il une structure trois colonnes simple et admise par tout le monde ?) ou d’incohérence entre les navigateurs (pourquoi ça marche pas sous IE ?). Ou alors, il faut commencer très doucement (flotter une image à droite d’un texte) pour que les concepts rentrent et passer progressivement à des designs plus complexes.

    En fait, tout dépend d’où il vient. Pour les anciens (pré-2000), le CSS a d’abord consisté à remplacer les balises FONT ou les attributs border, et les images « spacer.gif » pour les marges et le padding. Après, on a dû désapprendre les tables pour passer au positionnement, et ça a pris de longues années (on n’en est pas encore sorti). Mais à l’époque tout le monde n’était pas convaincu de l’intérêt des CSS, qui ont fait leurs preuves depuis.

    S’il est plus récent, il n’aura pas de mauvaise habitude, donc on pourra peut-être attaquer par le concept de boîte en lui faisant faire un design simple (linéaire) avec quelques DIV (entete, nav, contenu, basdepage) et un contenu bien balisé (h1, h2, p, ul, li…) qu’il va styler/disposer au fur et à mesure par des itérations très simples.

  4. Mike : je ne suis pas un expert, je laisse ça à d’autres, je suis juste un utilisateur « averti ». ;)

    Florent et Damien : je m’attendais un peu à cette réponse à vrai dire.

    J’explique mon choix bien sur.

    Soyons bien d’accord, une fois la logique de séparation de la mise en forme via CSS comprise, les notions de base « d’habillage » sont simples, même si elles contiennent des petites subtilités au niveau de l’héritage parent/enfant.

    La réelle complexité de l’usage des CSS vient bien des positionnements (avec ce qu’ils impliquent au niveau du layout des éléments) car ils remettent parfois en cause, souvent du fait des divergences de rendu des navigateurs, les bases même de l’habillage/décoration via CSS :
    Les problèmes inhérents aux positionnements flotants (doublement de marge…), les problemes au niveau du flux html des éléments en positionnement absolut (parent/enfant), les problèmes de fond pour les éléments en positionnement relatif, etc, etc, etc.

    Certes, ce n’est pas commencer par le plus simple, mais les bugs engendrés par les modes de positionnement en fonction des navigateurs, peuvent avoir un effet très négatif sur des apprentissages de base que l’apprenant pouvait légitimement considérer comme acquis.

  5. Hello,

    Y’avais la série d’articles de pompage « on reprend tout à zéro », que j’ai trouvé vraiment pas mal foutus. Allez hop, ça commence par là:

  7. Salut,

    En dehors de la question du squelette du document html qui doit bien être posé dès le départ :

    doctype
    <html>
    <head>
    <title>
    <meta content>
    </head>
    <body>

    </body>
    </html>

    Je pense qu’il est préférable de partir du contenu (texte uniquement) que des éléments html. Dit autrement, ceci :

    <body>
    <p>Hello world !</p>
    </body>

    est un exemple catastrophique.

    Quand je dis « contenu » je parle de vrai contenu, quelque chose qui lu sur le papier ait du sens et un peu de complexité (de richesse).
    A titre d’anecdote, je me suis toujours dit, que si j’avais à trouver ce genre de support, j’utiliserais des recettes de cuisine. C’est parfait car on y trouve du blabla sur le plat, les ingrédients dont il y a besoin, les étapes de la recette.

    Ensuite introduire les éléments html de manière didactiquement logique et efficace.

    1. <p>
    2. <hn>

    faire une pose

    3. <ul> (et éventuellement <ol>)

    Et stop, il y a déjà de quoi faire.
    Réserver les <div> pour plus tard. Perso je mettrais aussi de coté les balises inline parce que j’ai tendance à considérer que faire comprendre ce qu’est une balise inline c’est faire comprendre en quoi elle n’est pas block.

    Les css maintenant :

    Tu dis : « Puis, j’attaquerai les CSS par les positionnements qui sont surement ce qui demande le plus de travail et d’expérimentation. »

    Mmm, tout dépend ce qu’on appelle commencer, il y a quand même quelques petites choses à prévoir dans un premier temps.
    Je verrais donc les choses plutôt ainsi :

    1. Présentation du couple propriété/valeur
    2. Mise en oeuvre très simples (couleur et taille du texte par exemple) via l’attribut style dans les balises (Ouè, ouè, il faut se débrouiller à faire passer la notion d’attribut sans s’y attarder)
    3. Externalisation des css du body = élément style dans le head.
    4. Introduire les notions de id et de class.

    Stop ! Ne pas parler de fichier.css liés tant que l’apprenant ne travaille pas sur plusieurs documents html concernés.

    Sinon je suis d’accord avec toi pour l’angle d’attaque, sauf que parlerais de mise en page plutôt que de positionnement.

  8. Ah zut, j’avais préparé mon message précédent sous logiciel texte et dans le copier/coller mes retours de chariots n’ont pas été interprétés.

    Je suis désolé :(

    Si tu peux arranger ça, parce que là mon post n’est vraiment pas lisible.

  11. Je disais donc :

    A titre d’anecdote, je me suis toujours dit, que si j’avais à trouver ce genre de support, j’utiliserais des recettes de cuisine. C’est parfait car on y trouve du blabla sur le plat, les ingrédients dont il y a besoin, les étapes de la recette.

    Et bien banco finalement, l’idée est venue aussi à d’autres :

    http://rgaa.referentiels.modernisation.gouv.fr/index.php/front/web/points_de_controle/3_6

    PS :

    Rien à faire, en previsu les liens ne fonctionnent pas, donc je préfère envoyer en mode texte simple.

  12. Pour information, je suis en train de compiler vos idées et ressources pour préparer un article de réponse plus complet, désolé pour le retard, mais je suis pas mal occupé en ce moment.

  13. Tu fais bien de commenter, ça fait remonter ce billet dans mon agrégateur (je m’étais dit : tiens faudra que j’y revienne !), procrastination quand tu nous tiens…

    Je crois que je commencerais par une page complète mais très simple : une colonne avec un titre, du texte, quelques intertitres, une ou deux images. Sur la base de ce document, on étudie le xhtml (head et body) puis le positionnement des grands blocs et un poil de présentation (fontes, couleurs, liens…).

    Etape 2 : on complexifie la structure (deux colonnes fixes, header et footer), on améliore la présentation (couleurs ou fontes plus ciblées, règles différentes selon l’état des liens…)

    etc. en complexifiant de plus en plus.

    Vala vala, mes deux zeurocents.

  14. Bien débuter l’étude des comportements CSS : synthèse de vos contributions

    Avec un peu de retard pour cause d’actualité professionnelle surchargée, je vais donc faire une première synthèse des idées et pistes que vous avez proposé.

    Appel à…