Freecodecamp: [BETA] Angewandtes visuelles Design vermittelt eine schlechte Vorstellung von Semantik

@ Facundo-Corradini Du hast recht - danke, dass du das gemeldet hast. Werden Sie es bequem haben, dies zu beheben? Wenn ja, lesen Sie bitte unsere Richtlinien für Applied Visual Design: Use the em Tag to Emphasize Text umbenennen.

Ich würde gerne bei diesem Problem helfen, wenn nötig

@manuhdez Das ist großartig. Bitte lesen Sie unsere Richtlinien für
@raisedadead , @systimotic Sollen wir dies implementieren?

Hallo @ Facundo-Corradini, vielen Dank, dass Sie die Besorgnis geäußert und sich die Zeit genommen haben, die Herausforderung zu überprüfen.

Können Sie uns bitte mit einigen Änderungsvorschlägen helfen, die an der Aussprache vorgenommen werden sollten, um die Bedeutung dieses Unterschieds zu verdeutlichen?

Ich bin damit einverstanden, dass die aktuelle Sprache möglicherweise ein falsches Konzept für das Lernen enthält.

Sichere Sache. Lassen Sie mich an einem Vorschlag arbeiten, dann lade ich ihn hoch und wenn Sie zustimmen, kann ich an den Änderungen arbeiten.

Es ist nicht so einfach, da sich der Abschnitt tatsächlich mit visuellem Design befasst, nicht mit Semantik. Vielleicht sollten wir den Abschnitt "Text kursiv schreiben" nennen und den Anwendungsfall für jedes Tag erläutern

Hallo @ Facundo-Corradini! Wie gehts?

Hallo Leute,

Ich habe darüber nachgedacht, wie ich damit umgehen soll, und den Lehrplan durchgearbeitet, um herauszufinden, wo er besser passen würde. Aber es gibt keinen wirklich einfachen Ausweg. Jedes Tag, das wir auswählen würden, lässt Anwendungsfälle für die anderen aus, und der Versuch, die verschiedenen Fälle für jeden Stil bei einer einzelnen Herausforderung zusammenzudrücken, wird sich eng anfühlen. Der Abschnitt befasst sich sowieso mit angewendetem visuellem Design, nicht mit Semantik.

Da einige der strukturellen Semantiken im Abschnitt zur Barrierefreiheit behandelt werden, ist es möglicherweise der richtige Weg, einige Semantiken auf Textebene hinzuzufügen. Oder vielleicht als Zeitüberschreitung später im Abschnitt über angewandtes visuelles Design. Aber ich bin mir nicht sicher, ob wir noch pünktlich zu Lehrplanänderungen sind (ich glaube, wir sind es nicht, oder?)

Optionen wären also:

0 - Lass die Herausforderung wie sie ist

1- Ändern Sie den Titel in "Text hervorheben ..." und erklären Sie, dass es andere Möglichkeiten gibt, Text kursiv zu machen
--- 1.A - wird später im Abschnitt über die hypothetische neue Semantik auf Textebene behandelt
--- 1.B - Verknüpfen Sie einfach eine gute Quelle zur Semantik auf Textebene

2- Ändern Sie alle visuellen Design-Herausforderungen in Bezug auf Textstil wie Unterstreichungen, Durchstreichen, Schriftgröße und Kursivschrift in ein neutrales Tag wie span und verwandeln Sie sie in CSS-basierte Herausforderungen, um zu erklären, dass es verschiedene Tags gibt, die das anwenden Stil standardmäßig, die wieder
--- 2.A - wird später im Abschnitt über die hypothetische neue Semantik auf Textebene behandelt
--- 2.B - Verknüpfen Sie einfach eine gute Quelle zur Semantik auf Textebene

Ich bin geneigt zu glauben, dass die beste Lösung 2A ist, wobei 1A ein wirklich guter Kompromiss ist.

Da es jedoch realistisch ist, ist wahrscheinlich 1B der richtige Weg. Ein Titel, der Sinn macht, mit einer Beschreibung, die das Problem anspricht, und einem Link für die besten Camper, in die sie eintauchen können ... ohne dass die tatsächlichen Herausforderungen oder der Lehrplan geändert werden müssen

Gedanken?

@ Facundo-Corradini, welche Quelle haben Sie für die Semantik auf Textebene im Sinn?

@raisedadead ,
Ich denke, die fraglichen Herausforderungen sind folgende:

Stellen Sie die Schriftgröße für Elemente mit mehreren Überschriften ein
Stellen Sie die Schriftgröße für Elemente mit mehreren Überschriften ein
Stellen Sie die Schriftgröße des Absatztextes ein
Stellen Sie die Zeilenhöhe von Absätzen ein

Bis wir eine gute Lösung finden, sollten wir sie bis nach der Beta unterscheiden.
Ich könnte eine PR erstellen und sie aus dem Samen entfernen.

Ich könnte eine PR erstellen und sie aus dem Samen entfernen.

Meinen Sie, entfernen Sie sie jetzt, wenn ja. Ich denke, sie bleiben am besten so, wie es ist, damit wir mehr Feedback sammeln können.

@raisedadead entfernt sie

@ahmadabdolsaheb Entschuldigung, irgendwie habe ich die Benachrichtigungen verpasst

Die von Ihnen angegebenen (Schriftgröße, Schriftgröße und Zeilenhöhe) stehen nicht in direktem Zusammenhang mit der Semantik. Außer wenn Sie etwas Seltsames tun, z. B. alle Ihre Texte als <p> -Tags haben und die Schriftgröße anpassen, wenn Sie versuchen, einige als Überschriften anzugeben. Diese Klarstellung wird jedoch in der Einführung der Elemente <h> und <p> im ersten Abschnitt perfekt berücksichtigt und in _Applied Visual Design: Anpassen der Größe eines Headers im Vergleich zu a weiter erläutert Absatz Tag_:

Die Schriftgröße von Header-Tags (h1 bis h6) sollte im Allgemeinen größer sein als die Schriftgröße von Absatz-Tags. Dies erleichtert dem Benutzer das visuelle Verständnis des Layouts und der Wichtigkeit aller Elemente auf der Seite. Mit der Eigenschaft font-size können Sie die Größe des Texts in einem Element anpassen.

Die herausgeforderten Abschnitte sind:

- Verwenden Sie das starke Tag, um Text fett zu machen: Das Element <strong> steht für Inhalte, die von größerer Bedeutung sind (z. B. eine Warnung), während das Element <b> verwendet wird, um die Aufmerksamkeit auf Text ohne Text zu lenken zeigt an, dass es wichtiger ist. Beide sind standardmäßig einfach fett gedruckt, aber ihre Bedeutung ist nicht dieselbe

- Verwenden Sie das u-Tag, um Text zu unterstreichen: Dies ist wahrscheinlich das komplizierteste. Zitiert die W3C-Empfehlung:

Das u-Element stellt eine Textspanne mit einer nicht artikulierten, jedoch explizit gerenderten, nicht textuellen Anmerkung dar, z. B. die Kennzeichnung des Textes als Eigenname im chinesischen Text (eine chinesische Eigennamenmarke) oder die Kennzeichnung des Textes als falsch geschrieben. (...) In den meisten Fällen ist ein anderes Element wahrscheinlich angemessener

Soweit ich weiß, möchten wir in den meisten Sprachen nur Unterstreichungen für Überschriften und dergleichen, und dies sollte mit dem Styling des <h(x)> -Tags behoben werden. Rechtschreibfehler sind ein weiterer Anwendungsfall, aber wir wären selten in einem Szenario wie dem absichtlichen Schreiben und Markieren von Rechtschreibfehlern ...

- Verwenden Sie das em-Tag, um Text kursiv zu schreiben:
<em> Tag dient zur Hervorhebung. Wenn zum Beispiel jemand Textsemantik mag, aber kein Experte ist (: p), können Sie sagen "Ich bin nicht _das_ in Textsemantik". Die Betonung des "jenen" Wortes macht klarer, dass es, obwohl es daran interessiert ist, es nicht davon abhält, ab und zu falsche Dinge zu verwenden.
<em> ist standardmäßig kursiv geschrieben, aber nichts hindert uns daran, dem <em> -Tag den gewünschten Stil zu geben. Normalerweise füge ich auch etwas kühnere Schriftgröße hinzu.
Ebenso soll nicht jeder kursiv geschriebene Text hervorheben. Denken Sie an Definitionen, technische Wörter oder solche, die in einer Fremdsprache geschrieben sind (normalerweise lateinische Ausdrücke). Das sind Szenarien, in denen die
<i> Tag ist die richtige Wahl.
Oder sogar <cite> Elemente sind der richtige Weg, um kursiven Text zu präsentieren, wenn auf den Namen eines Werks oder Autors verwiesen wird, der normalerweise zusammen mit <q> oder <blockquote>

- Verwenden Sie das del-Tag, um den Text durchzustreichen :
<del> ist für gelöschte Inhalte vorgesehen, z. B. wenn Inhalte, die aus einer früheren Version eines Dokuments gelöscht wurden, wie z. B. git (Hub), mit einem durchgestrichenen und einem roten Hintergrund gegenüber dem nicht durchgestrichenen und markiert werden grüner Hintergrund für die neuen / geänderten Teile.
Die Standardausgabe für <del> ist ein Durchgestrichen, aber Sie sollten <del> jedes Mal verwenden, wenn Sie Text durchstreichen möchten.
Beispielsweise möchten Sie möglicherweise das Element <s> stattdessen für Dinge verwenden, die nicht mehr relevant sind, z. B. wenn Sie den regulären Referenzpreis auf einem reduzierten Produktpreisschild markieren.
Oder gehen Sie einfach mit einem <span> und stylen Sie es als durchgestrichen, wenn die obigen Definitionen nicht auf Ihren speziellen Grund zutreffen, einen Text durchzustreichen.

Alle diese Abschnitte sind jedoch für Applied Visual Design unerlässlich.

Meine Empfehlung lautet also nicht, sie zu löschen oder zu verschieben, sondern sie unverändert zu lassen und ein wenig Klarheit über die gefährdeten Abschnitte zu schaffen, die möglicherweise mit einer externen Quelle zur Semantik auf Textebene verknüpft sind.

Meine Lieblingsquelle für Semantik auf Textebene ist die W3C-Empfehlung.
https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html
Zum Beispiel MDN-Erläuterungen zu Anwendungsfällen für jedes Tag
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

Könnte allerdings etwas zu technisch sein, sodass ich mich um die Suche nach neuen Optionen für Neulinge kümmern oder selbst eine auf dem freeCodeCamp-Blog schreiben kann, wenn Sie möchten :)

Ich denke, der Titel der Herausforderung und die Verwendung von <em> zum Kursivschreiben ist völlig falsch und sollte umbenannt werden in:
Angewandtes visuelles Design: Verwenden von Kursivschrift zur Kursivschrift von Text

Und ändern Sie den Text von:

Um Text hervorzuheben, können Sie das em-Tag verwenden. Dadurch wird Text kursiv angezeigt, da der Browser das CSS im Schriftstil anwendet: kursiv; zum Element.

zu

Um Text kursiv zu schreiben, wenden Sie die CSS-Regel _font-style: italic_ auf das Element an, das Sie kursiv anzeigen möchten.

Daher könnte die Verwendung von <em> im Bereich Angewandte Barrierefreiheit mit einer eigenen Herausforderung angemessener erscheinen.

Vielen Dank an alle für Ihr Feedback. Wir werden uns vom fachbasierten Lehrplan entfernen und freuen uns auf eine bessere Beschreibung der Semantik im kommenden projektbasierten Lehrplan.

@scissorsneedfoodtoo , Gedanken?

Vielen Dank an Facundo-Corradini für Ihre detaillierten Erklärungen und andere für das Abwägen. Viele der Projekte befinden sich noch in der Entwicklung und werden nach dem Testen fortlaufend veröffentlicht. Es könnte sich lohnen, dieses Problem vorerst offen zu halten, falls jemand die Beschreibungen in den aktuellen Herausforderungen des visuellen Designs aktualisieren kann.

Schließen Sie dies als abgestanden. Wenn jemand das Gespräch fortsetzen möchte, kann er gerne eine Nachricht hinterlassen, und wir können diese erneut öffnen. Vielen Dank und viel Spaß beim Codieren 🎉