Freecodecamp: [BETA] La conception visuelle appliquée donne une mauvaise idée de la sémantique

@ Facundo-Corradini Vous avez raison - merci d'avoir signalé cela. Serez-vous à l'aise de résoudre ce problème? Si oui, veuillez consulter nos directives de contribution . Vous pouvez renommer le titre en Applied Visual Design: Use the em Tag to Emphasize Text .

J'aimerais aider avec ce problème si nécessaire

@manuhdez C'est génial. Veuillez consulter nos Consignes de contribution .
@raisedadead , @systimotic Devrions-nous implémenter cela?

Salut @ Facundo-Corradini merci d'avoir soulevé la question et d'avoir pris le temps de passer en revue le défi.

Pouvez-vous nous aider avec quelques suggestions de changements qui devraient être apportés au verbiage qui aide à clarifier l'importance de cette différence?

Je suis d'accord, le verbiage actuel peut mettre en place un concept incorrect dans l'apprentissage.

Chose sûre. Laissez-moi travailler sur une proposition, puis je la téléchargerai et si vous êtes d'accord, je peux travailler sur les modifications.

Ce n'est pas si simple, car la section traite en fait de la conception visuelle, pas de la sémantique. Alors peut-être devrions-nous simplement appeler la section "mettre le texte en italique" et expliquer le cas d'utilisation de chaque balise

Salut @ Facundo-Corradini! Comment ça se passe?

Salut les gars,

J'ai réfléchi à la façon de procéder et j'ai travaillé sur le programme pour voir où il s'intégrerait mieux. Mais il n'y a pas de moyen vraiment facile de s'en sortir. Toute balise que nous sélectionnerions laissera de côté les cas d'utilisation pour les autres, et essayer de presser les différents cas pour chaque style sur un seul défi se sentira à l'étroit. La section traite de toute façon de la conception visuelle appliquée, pas de la sémantique.

Étant donné que certaines des sémantiques structurelles sont couvertes dans la section sur l'accessibilité, peut-être que l'ajout d'une sémantique au niveau du texte serait la voie à suivre. Ou peut-être comme un délai d'attente plus tard dans la section de conception visuelle appliquée. Mais je ne sais pas si nous sommes toujours à l'heure pour les changements de programme (je pense que non, n'est-ce pas?)

Les options seraient donc:

0 - Laissez le défi tel quel

1- Changez le titre en "mettre en valeur le texte ..." et expliquez qu'il existe d'autres moyens de mettre le texte en italique, ce qui
--- 1.A - sera abordé plus tard dans la section hypothétique de la nouvelle sémantique au niveau du texte
--- 1.B - Reliez simplement une bonne source sur la sémantique au niveau du texte

2- Changer tous les défis de conception visuelle concernant le style du texte tels que les soulignements, les barrés, l'épaisseur de la police et l'italique en une balise neutre telle que span, et les transformer en défis basés sur CSS, en expliquant qu'il existe différentes balises qui appliquent le style par défaut, qui encore
--- 2.A - sera traité plus tard dans la section hypothétique de la nouvelle sémantique au niveau du texte
--- 2.B - Reliez simplement une bonne source sur la sémantique au niveau du texte

J'ai tendance à penser que la meilleure solution est 2A, 1A étant un très bon compromis.

Pourtant, étant réaliste, probablement 1B est la voie. Un titre qui a du sens, avec une description qui aborde le problème, et un lien pour les meilleurs campeurs à plonger ... sans avoir besoin de changer les défis réels ou le programme

Pensées?

@ Facundo-Corradini, quelle source avez-vous en tête pour la sémantique au niveau du texte?

@raisedadead ,
Je pense que les défis en question sont les suivants:

Définir la taille de la police pour plusieurs éléments de titre
Définir l'épaisseur de la police pour plusieurs éléments d'en-tête
Définir la taille de la police du texte de paragraphe
Définir la hauteur de ligne des paragraphes

Jusqu'à ce que nous trouvions une bonne solution, je pense que nous devrions les différer jusqu'après la version bêta.
Je pourrais créer un PR et les supprimer de la graine.

Je pourrais créer un PR et les supprimer de la graine.

Voulez-vous dire les supprimer maintenant, si oui. Je pense qu'il vaut mieux les laisser tels quels pour que nous puissions recueillir davantage de commentaires.

@raisedadead les supprimant pour l'instant et les ajoutant après la version bêta lorsqu'ils sont reformulés ou classés plus précisément. S'ils donnent une mauvaise idée de la sémantique, peut-être ne devrions-nous pas laisser les campeurs les parcourir et apprendre les concepts de manière incorrecte :)

@ahmadabdolsaheb désolé j'ai manqué les notifications

Ceux que vous avez cités (font-size, font-weight et line-height) ne sont pas directement liés à la sémantique. Sauf si vous faites quelque chose de bizarre, comme avoir tous vos textes sous forme <p> balises <h> et <p> sur la première section, ainsi que clarifiée dans _Applied Visual Design: Ajuster la taille d'un en-tête par rapport à un Balise de paragraphe_:

La taille de police des balises d'en-tête (h1 à h6) doit généralement être supérieure à la taille de police des balises de paragraphe. Cela permet à l'utilisateur de mieux comprendre visuellement la mise en page et le niveau d'importance de tout ce qui se trouve sur la page. Vous utilisez la propriété font-size pour ajuster la taille du texte dans un élément.

Les sections contestées sont:

- Utilisez la balise forte pour rendre le texte en gras: l' élément <strong> est destiné au contenu qui est plus important (comme un avertissement), tandis que l'élément <b> est utilisé pour attirer l'attention sur le texte sans indiquant que c'est plus important. Les deux sont simplement en gras par défaut, mais leur signification n'est pas la même

- Utilisez la balise u pour souligner le texte: c'est probablement la plus compliquée. Citant la recommandation du W3C:

L'élément u représente une étendue de texte avec une annotation non textuelle non articulée, bien que rendue explicitement, telle que l'étiquetage du texte comme étant un nom propre dans le texte chinois (une marque de nom propre chinois) ou l'étiquetage du texte comme étant mal orthographié. (...) Dans la plupart des cas, un autre élément sera probablement plus approprié

Autant que je sache, dans la plupart des langues, nous ne voulons que des soulignements pour les en-têtes et autres, et cela devrait être résolu en stylisant la balise <h(x)> . Les fautes d'orthographe sont un autre cas d'utilisation, mais nous serions rarement dans un scénario comme l'écriture et le marquage délibérés d'erreurs d'orthographe ...

- Utilisez la balise em pour mettre le texte en italique:
<em> tag est pour l'emphase, par exemple, si quelqu'un aime la sémantique du texte mais ce n'est pas un expert (: p), vous pouvez dire "je ne suis pas _que_ dans la sémantique du texte". L'accent mis sur le mot «ça» montre plus clairement que, même si on s'y intéresse, cela ne l'empêchera pas d'utiliser des choses incorrectes de temps en temps.
<em> est en italique par défaut, mais rien ne nous empêche de donner à la balise <em> style que nous voulons. J'y ajoute généralement un poids de police plus audacieux.
De la même manière, tous les textes en italique ne sont pas destinés à mettre l'accent. Pensez aux définitions, aux mots techniques ou à ceux écrits dans une langue étrangère (normalement des expressions latines). Ce sont des scénarios où le
<i> tag est le bon choix.
Ou même les éléments <cite> peuvent être le bon moyen de mettre en valeur le texte en italique, lors du référencement du nom d'une œuvre ou d'un auteur, normalement utilisé avec un <q> ou <blockquote>

-Utilisez la balise del pour barrer le texte :
<del> est destiné au contenu supprimé, par exemple, lors du marquage du contenu qui a été supprimé d'une version précédente d'un document, comme le fait git (hub) avec un barré et un fond rouge par rapport au non barré et fond vert pour les pièces nouvelles / modifiées.
La sortie par défaut pour <del> est barrée, mais vous ne devez pas utiliser <del> chaque fois que vous souhaitez barrer du texte.
Par exemple, vous pouvez utiliser l'élément <s> place pour des choses qui ne sont plus pertinentes, par exemple, lorsque vous marquez le prix régulier de référence sur une étiquette de prix de produit à prix réduit.
Ou utilisez simplement un <span> et mettez-le en forme de barré si les définitions ci-dessus ne s'appliquent pas à votre raison particulière de barrer du texte.

Toutes ces sections sont néanmoins essentielles pour la conception visuelle appliquée.

Ma recommandation n'est donc pas de supprimer ni de reporter, mais de les conserver telles quelles et d'ajouter un peu de clarification sur les sections compromises, peut-être liées à une source externe sur la sémantique au niveau du texte.

Ma source préférée pour la sémantique au niveau du texte est la recommandation du W3C.
https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html
Ainsi que des clarifications MDN sur les cas d'utilisation pour chaque tag, par exemple
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

Cela peut être un peu trop technique, alors je peux me charger de rechercher des options plus adaptées aux débutants, ou en écrire une moi-même sur le blog freeCodeCamp si vous le souhaitez :)

Je pense que le titre du défi et l'utilisation de <em> pour mettre en italique est complètement faux et devrait être renommé en:
Conception visuelle appliquée: utilisation du style de police italique pour mettre du texte en italique

Et changez le texte de:

Pour mettre en valeur le texte, vous pouvez utiliser la balise em. Cela affiche le texte en italique, car le navigateur applique le CSS de style de police: italique; à l'élément.

à

Pour mettre du texte en italique, appliquez la règle css _font-style: italic_ à l'élément que vous souhaitez afficher en italique.

Et ainsi, l'utilisation de <em> pourrait avoir une apparence plus adéquate dans la section d'accessibilité appliquée avec son propre défi.

Merci à tous pour vos commentaires. Nous nous éloignerons du programme basé sur la matière et nous espérons avoir une meilleure description de la sémantique dans le prochain programme basé sur le projet.

@scissorsneedfoodtoo , des pensées?

Merci @ Facundo-Corradini pour vos explications détaillées et d'autres pour votre pesée. Beaucoup de projets sont encore en cours de développement et seront publiés sur une base continue une fois qu'ils auront été testés. Cela pourrait valoir la peine de garder ce problème ouvert pour le moment, au cas où quelqu'un pourrait mettre à jour les descriptions dans les défis de conception visuelle actuels.

Fermer cela comme périmé. Si quelqu'un veut continuer la conversation, n'hésitez pas à laisser un message et nous pourrons le rouvrir. Merci et bon codage à tous 🎉