HTML5 et CSS3 : les outils pour un site moderne

Bonjour à tous,

J’ai commencé (il y a 1 semaine, 6 jours) la rédaction d’un tutoriel dont l’intitulé est HTML5 et CSS3 : les outils pour un site moderne.

J’aimerais obtenir un maximum de retour sur celui-ci, sur le fond ainsi que sur la forme, afin de proposer en validation un texte de qualité.

Si vous êtes intéressé, cliquez ci-dessous

Le tutoriel n’est pas encore très avancé, mais j’aimerais bien avoir des avis pour savoir si je pars dans la bonne direction ou non - c’est la première fois que je tente ce type d’exercice.

Merci d’avance pour votre aide

Bonjour

C'est une super idée de tuto, et les partie I.1 et I.2 ressemble fort à ce que nous voulions faire Bat' et moi par là mais que nous n'avons pas nécessairement avancer depuis un an

De ce fait, je me demandais si nos tuto n'étaient pas mutualisables ? En effet, il y a un certain nombre de point que tu abordes et qui nécessiterais, à mon sens, un peu plus d'explications, notamment la partie sur les CMS.

En premier lieu il existe des CMS produisant des sites statiques comme Pelican, Jeckyll et d'autres (swx, programmé par Thuban) dont tu ne fais pas mention, et qui vont plus se rapprocher des sites pur HTML/CSS dont tu va parler par la suite que les CMS produisant des sites dynamiques.

Ensuite, à mon sens, toujours, même en utilisant des CMS, une connaissance minimale de HTML/CSS est nécessaire, ne serait-ce que pour modifier un tout petit peu les templates (couleur, bannière …).

Donc, cette phrase, la phrase de transition entre CMS et la suite

En revanche, si vous souhaitez comprendre ce que vous faites et concevoir un site qui ressemble exactement à l'idée que vous vous en faites, il va falloir mettre les mains dans le cambouis.

devrait plutôt ressembler à

Et même dans ce cas, si vous voulez modifier même très faiblement l'aspect des sites produits par des CMS, il faut connaître un minimum de ce qui va nous occuper ici : le HTML/CSS

Pour le reste, je n'ai pas (encore) lu en détail, mais je m'y met dès que j'ai le temps.

Et si une collaboration de n'importe quelle nature te semble intéressante, n'hésite pas à le faire savoir

Salut,

Merci pour ta réponse. Malheureusement, je n'ai pas accès au lien que tu m'as donné, je ne peux donc pas te répondre quant à une éventuelle mutualisation.

Quant aux CMS, je dois avouer que je les ai traités en tant que moyen de créer un site web sans toucher au code - ce que font la majorité des gens qui les utilisent.

J'ai regardé rapidement les deux liens que tu me donnes, ça ne me semble pas être des CMS mais plutôt des générateurs de contenu. J'avoue que ça me gène un peu de les mettre au même niveau que les CMS que je présente car ceux-ci sont réputés pour être utilisables sans savoir programmer.

La phrase que tu cites est effectivement peut-être mal écrite, je te remercie de me l'avoir fait remarquer, cependant elle ne concerne pas les CMS mais plutôt le développement en HTML / CSS comme je l'expose dans la partie suivante. Une reformulation plus correcte pourrait être celle-ci :

En revanche, si vous souhaitez comprendre ce que vous faites et concevoir un site qui ressemble exactement à l'idée que vous vous en faites, il va falloir abandonner l'idée du CMS et développer ce site vous même en mettant les mains dans le cambouis.

Est-ce que ça te paraît plus clair ainsi ?

Concernant une éventuelle collaboration : je suis ouvert à toute proposition quelle que soit sa nature. À toi de me dire ce qui te motive le plus : relire et faire des remarques, discuter de la suite ou plutôt rédiger le tutoriel à mes côtés. Je ne refuse aucune aide, bien au contraire.

En tout cas, je te remercie sincèrement pour ton retour et j'espère avoir pu répondre correctement à tes remarques.

Hum, désolé pour le lien, celui là devrait-être mieux https://zestedesavoir.com/tutoriels/beta/507/faire-un-site-web/

Concernant les CMS, il me semble justement pour en avoir déployé un ou deux, que ça permet à des gens sans compétences techniques particulières de publié du contenu sur le web … si une autre personne avec quelques compétences techniques met en place ce CMS. Et cette personne là à besoin, entre autres, de quelques connaissance en HTML/CSS, même pour faire des modifications minimes sur un gabarit. Bref, ça me semble illusoire de laisser penser qu'on peut publier de A à Z un site web sans toucher au code d'une manière ou d'une autre. Dans ce cas, il vaut mieux utiliser les réseaux sociaux ou les plate-formes de blog.

Et cela m'amène à une collaboration possible, puisque l'idée du tuto que nous avions commencé avec Bat' était de recenser les différentes solution possible pour publier un site web. Or, comme tu peux le constater, le plan de ce que tu as écris est pratiquement identique à notre projet, et c'est bien écris. Je te propose donc d'intégrer cette première partie à notre projet (ce qui me redonnera un peu de motivation pour le poursuivre peut-être ) et de renvoyer vers ton tuto pour les explications sur le HTML/CSS que nous avions commencé.)

Cela ne m'empêche pas de continuer à relire ton tuto et donner mes impressions de débutant en HTML/CSS

Pas tout à fait d'accord sur certains points:

En premier lieu il existe des CMS produisant des sites statiques comme Pelican, Jeckyll et d'autres (swx, programmé par Thuban) dont tu ne fais pas mention, et qui vont plus se rapprocher des sites pur HTML/CSS dont tu va parler par la suite que les CMS produisant des sites dynamiques.

Les générateurs de sites statiques ne sont aps des CMs pour moi et ca ne rentre pas non plus dans la défintion de Wikipédia

Ensuite, à mon sens, toujours, même en utilisant des CMS, une connaissance minimale de HTML/CSS est nécessaire, ne serait-ce que pour modifier un tout petit peu les templates (couleur, bannière …).

A l'heure actuelle, si tu déploies un Wordpress avec un thème payant un minimum bien fait, tu ne touche pas du tout au code HTML/CSS, tu as une interface graphique fourni avec Wordpress pour l'agencement de tes élèments, ce n'est pas le cas de tous les CMS, mais je pense que c'est ce vers quoi veut tendre la plupart des CMS : toucher le moins possible au code.

Pour ce qui est du tutoriel, tu fais souvent la confusion Web/Internet, dès le début tu parles du "web des objets connectés", il s'agit en fait de l'Internet des objets, le web utilise Internet, c'est une surcouche, ce n'est pas equivalent. Tu utilises souvent l'expression usine à gaz, c'est un peu repetitif et legerement pejoratif pour les IDE (5 minutes pour PHPStorm en passant, tu serais pas un peu marseillais IDEA s'ouvre en 10 bonnes secondes maxi chez moi). La partie "balise pour les geeks" me dérange un peu, surtout que tu présente la balise code "qui ne sert pas souvent" ben en fait, ca dépend beaucoup de ce que tu fais, et tu parles à de futurs développeurs, il y a fort à parier qu'il l'utilise un jour. Tu répètes plusieurs fois ça : la balise <pre>, la balise <i> (fourre tout, n'est pas vraiment approprié d'ailleurs)… De la ême façon tu indiques souvent que des balises affiches la mêmes choses mais sont différentes, il serait interessant d'expliquer la sémantique des balises peut-être.

bendia > Avec plaisir. Comme tu l'auras peut-être noté, le tutoriel est placé sous la licence CC-0 avec toute la liberté que cela implique pour ceux qui le lisent.

Si votre tutoriel aboutit, il est certain qu'il pourra mieux expliquer et surtout plus en détails les différentes façons de créer un site web. C'est avec plaisir que je le placerai en prérequis.

grurgu > Merci d'avoir confirmé la différence entre CMS et générateur de site, c'était mon impression également.

Pour ce qui est du tutoriel, tu fais souvent la confusion Web/Internet, dès le début tu parles du "web des objets connectés", il s'agit en fait de l'Internet des objets, le web utilise Internet, c'est une surcouche, ce n'est pas equivalent.

Exact, merci de l'avoir noté, je vais corriger ça.

Tu utilises souvent l'expression usine à gaz, c'est un peu repetitif et legerement pejoratif pour les IDE (5 minutes pour PHPStorm en passant, tu serais pas un peu marseillais IDEA s'ouvre en 10 bonnes secondes maxi chez moi).

D'accord, je vais changer d'expression. Quant au temps d'ouverture de PHPStorm, je t'assure que si j'exagère c'est de peu. Il est plus proche de 3-4 minutes chez moi que de 10 secondes. Après, mon ordinateur est un vieux coucou un peu usé. Je vais modifier cette phrase pour prendre ne pas que l'on pense que ça fait la même chose sur tous les ordinateurs.

La partie "balise pour les geeks" me dérange un peu, surtout que tu présente la balise code "qui ne sert pas souvent" ben en fait, ca dépend beaucoup de ce que tu fais, et tu parles à de futurs développeurs, il y a fort à parier qu'il l'utilise un jour.

C'est exact, après quand je disais « ne sert pas souvent» c'est justement par rapport à d'autres balises qui sont indispensables quel que soit le thème du site. Je vais toutefois modifier la phrase pour indiquer qu'elles peuvent être utiles aux développeurs.

Tu répètes plusieurs fois ça : la balise <pre>, la balise <i> (fourre tout, n'est pas vraiment approprié d'ailleurs)…

Les répétitions te paraissent gênantes ? Quant à la signification de <i>, je m'appuie sur le site du W3C qui dit :

Use the <i> element only when there is not a more appropriate semantic element, such as: <em> (emphasized text), <strong> (important text), <mark> (marked/highlighted text), <cite> (the title of a work), <dfn> (a definition term).

Tu penses à une meilleure façon de décrire cette balise ?

De la ême façon tu indiques souvent que des balises affiches la mêmes choses mais sont différentes, il serait interessant d'expliquer la sémantique des balises peut-être.

C'est pourtant ce que j'essaye de faire sur chacune des balises. Pourrais-tu m'indiquer celles pour lesquelles ça n'est pas clair ?

Merci beaucoup pour tes remarques !

C'est vrai que ce n'etait peut etre pas tout à fait clair, en fait le coté dérangeant vient de ton parti pris pour certaines choses: usine à gaz, fourre-tout, sert pas souvent…

Je sais pas si tu comprends ce que je veux dire, mais c'est je pense important de laisser le lecteur se faire sa propre opinion et juste donner des arguments mais éviter les conclusions directes ?

Pour les balises en double je parlais de la partie sur <del>, <s>… ou tu dis que ça barre le texte, ce serait bien d'introduire la notion de sémantique, car le lecteur doit se dire que finalement c'est le rendu qui compte et donc c'est pas grave alors que HTML5 ajoute surtout de la sémantique à la syntaxe et au rendu.

Pour la balise <i>, j'aurais précisé l'importance typographique d'une mise en forme différente du <b>, avec un exemple : un terme anglais par exemple dans un texte en français.

Je dis que c'est généralisé car tu passes beaucoup de temps à expliquer le rendu des élèments alors que HTML5 a surtout souhaité mettre l'accent sur la sémantique des élèments avant leur rendu.

C'est vrai que ce n'etait peut etre pas tout à fait clair, en fait le coté dérangeant vient de ton parti pris pour certaines choses: usine à gaz, fourre-tout, sert pas souvent…

Je vois ce que tu veux dire, je vais tâcher d'être plus neutre.

Pour les balises en double je parlais de la partie sur <del>, <s>… ou tu dis que ça barre le texte, ce serait bien d'introduire la notion de sémantique, car le lecteur doit se dire que finalement c'est le rendu qui compte et donc c'est pas grave alors que HTML5 ajoute surtout de la sémantique à la syntaxe et au rendu.

Je pensais l'avoir fait, mais visiblement pas assez. Je vais insister dessus.

Pour la balise <i>, j'aurais précisé l'importance typographique d'une mise en forme différente du <b>, avec un exemple : un terme anglais par exemple dans un texte en français.

C'est ce que je croyais avoir fait avec mon exemple (une locution latine dans une phrase en français). Je vais tenter d'insister sur cet aspect.

Merci pour tes retours !

au passage, <strong> est différent de <b> et <em> de <i>, c’est à mon sens un point à insister.

Je croyais l'avoir fait, mais vu que visiblement vous êtes plusieurs à me faire la remarque, je vais insister plus.

Merci pour ton retour !