Freecodecamp: [BETA] Прикладной визуальный дизайн плохо понимает семантику

@ Факундо-Коррадини Вы правы - спасибо, что сообщили об этом. Вам будет удобно это исправить? Если да, перейдите к нашим правилам участия . Вы можете переименовать заголовок в Applied Visual Design: Use the em Tag to Emphasize Text .

Я хотел бы помочь с этой проблемой, если это необходимо

@manuhdez Замечательно . Пожалуйста, ознакомьтесь с нашими рекомендациями по участию .
@raisedadead , @systimotic Стоит ли это реализовать?

Привет @ Факундо-Коррадини благодарит за то, что поднял вопрос и нашел время, чтобы рассмотреть проблему.

Не могли бы вы помочь нам с некоторыми предлагаемыми изменениями, которые следует внести в словоблудие, помогающее прояснить важность этого различия?

Я согласен, нынешнее словоблудие может привести к неправильному пониманию обучения.

Конечно. Позвольте мне поработать над предложением, затем я загружу его, и, если вы согласитесь, я смогу внести изменения.

Это не так просто, потому что этот раздел посвящен визуальному дизайну, а не семантике. Так что, возможно, нам следует просто назвать раздел «выделение текста курсивом» и объяснить вариант использования для каждого тега.

Привет, @ Факундо-Коррадини! Как дела?

Эй, ребята,

Думала, как с этим справиться, и прорабатывала учебную программу, чтобы понять, где она лучше всего подходит. Но по-настоящему простого выхода из этого нет. Любой тег, который мы выберем, оставит варианты использования для других, и попытка сжать разные варианты для каждого стиля в одной задаче будет стеснена. В любом случае, этот раздел касается прикладного визуального дизайна, а не семантики.

Поскольку некоторая структурная семантика описана в разделе доступности, возможно, добавление некоторой семантики текстового уровня поможет. Или, возможно, в качестве тайм-аута позже в разделе прикладного визуального дизайна. Но я не уверен, что мы все еще вовремя вносим изменения в учебный план (я думаю, что нет, не так ли?)

Итак, варианты будут:

0 - Оставьте задачу как есть

1. Измените заголовок на «выделить текст ...» и объясните, что есть другие способы выделить текст курсивом, которые
--- 1.A - будет рассмотрено позже в разделе гипотетической новой семантики текстового уровня.
--- 1.B - Просто дайте ссылку на хороший источник по семантике текстового уровня

2- Измените все проблемы визуального дизайна, касающиеся стиля текста, такие как подчеркивание, зачеркивание, начертание шрифта и курсив, на нейтральный тег, такой как span, и превратите их в задачи на основе CSS, объяснив, что существуют разные теги, которые применяют стиль по умолчанию, который снова
--- 2.A - будет рассмотрено позже в разделе гипотетической новой семантики текстового уровня.
--- 2.B - Просто дайте ссылку на хороший источник семантики текстового уровня.

Я склонен думать, что лучшим решением будет 2А, а 1А - действительно хороший компромисс.

Тем не менее, если быть реалистом, вероятно, 1B - это выход. Разумное название с описанием проблемы и ссылкой для лучших участников лагеря, в которую они могут погрузиться ... без необходимости изменять фактические задачи или учебный план.

Мысли?

@ Факундо-Коррадини, какой источник вы имеете в виду для семантики текстового уровня?

@raisedadead ,
Я думаю, что речь идет о следующих проблемах:

Установите размер шрифта для нескольких элементов заголовка
Установите начертание шрифта для нескольких элементов заголовка
Установите размер шрифта для текста абзаца
Установите высоту строки абзацев

Пока мы не найдем хорошее решение, я думаю, мы должны различать их до окончания бета-тестирования.
Я мог бы создать PR и удалить их из семян.

Я мог бы создать PR и удалить их из семян.

Вы имеете в виду удалить их сейчас, если да. Я думаю, что их лучше оставить как есть, чтобы мы могли собрать больше отзывов.

@raisedadead удаляет их на данный момент и добавляет их после бета-тестирования, когда они изменяются или классифицируются более точно. Если они дают неправильное представление о семантике, может быть, мы не должны позволять участникам лагеря проходить их и неправильно изучать концепции :)

@ahmadabdolsaheb извини, я пропустил уведомления

Те, которые вы указали (размер шрифта, вес шрифта и высота строки), не имеют прямого отношения к семантике. За исключением случаев, когда вы делаете что-то странное, например, когда все ваши тексты имеют теги <p> и настраивают размер шрифта при попытке указать некоторые в качестве заголовков. Но это уточнение прекрасно учтено во введении элементов <h> и <p> в первом разделе, а также дополнительно разъясняется в _Applied Visual Design: Adjust the Size of a Header Versus a Пункт Tag_:

Размер шрифта тегов заголовков (от h1 до h6) обычно должен быть больше, чем размер шрифта тегов абзаца. Это облегчает пользователю визуальное понимание макета и уровня важности всего на странице. Вы используете свойство font-size, чтобы настроить размер текста в элементе.

Спорные разделы:

- Используйте сильный тег, чтобы <strong> текст полужирным: элемент <strong> предназначен для содержимого, имеющего большее значение (например, предупреждения), а элемент <b> используется для привлечения внимания к тексту без указывая, что это более важно. Оба они по умолчанию выделены жирным шрифтом, но их значение не одно и то же.

- Используйте тег u для подчеркивания текста: это, вероятно, самый сложный вариант ... цитирую рекомендацию W3C:

Элемент u представляет собой отрезок текста с неартикулированной, но явно визуализированной нетекстовой аннотацией, такой как маркировка текста как имени собственного в китайском тексте (знак китайского имени собственного) или маркировка текста как написанного с ошибкой. (...) В большинстве случаев другой элемент может быть более подходящим

Насколько мне известно, в большинстве языков нам нужны только подчеркивания для заголовков и тому подобное, и это следует решать с помощью стиля тега <h(x)> . Орфографические ошибки - это еще один вариант использования, но мы редко попадаем в такой сценарий, как преднамеренное написание и пометка орфографических ошибок ...

- Используйте тег em для выделения текста курсивом:
Тег <em> предназначен для акцента, например, если кому-то нравится семантика текста, но он не является экспертом (: p), вы можете сказать: «Я не _that_ в семантике текста». Акцент на этом слове проясняет, что, хотя он заинтересован в нем, это не помешает ему время от времени использовать неправильные вещи.
<em> по умолчанию выделено курсивом, но ничто не мешает нам присвоить тегу <em> любой стиль, который мы хотим. Я обычно добавляю к нему более жирный шрифт.
Точно так же не каждый текст, выделенный курсивом, предназначен для выделения. Подумайте об определениях, технических словах или словах, написанных на иностранном языке (обычно латинских выражениях). Это сценарии, в которых
<i> tag - правильный выбор.
Или даже элементы <cite> могут быть правильным способом продемонстрировать текст, выделенный курсивом, при ссылке на имя работы или автора, которые обычно используются вместе с <q> или <blockquote>

-Используйте тег del для зачеркивания текста :
<del> предназначен для удаленного содержимого, например, при пометке содержимого, которое было удалено из предыдущей версии документа, например, git (hub), делает зачеркнутым и красным фоном по сравнению с незачеркнутым и зеленый фон для новых / измененных деталей.
Вывод по умолчанию для <del> - зачеркнутый, но вы не должны использовать <del> каждый раз, когда хотите зачеркнуть текст.
Например, вы можете захотеть использовать элемент <s> вместо этого для вещей, которые больше не актуальны, например, при отметке справочной обычной цены на ценнике продукта со скидкой.
Или просто используйте <span> и сделайте его зачеркнутым, если приведенные выше определения не относятся к вашей конкретной причине, чтобы вычеркнуть какой-то текст.

Тем не менее, все эти разделы необходимы для прикладного визуального дизайна.

Поэтому я рекомендую не удалять и не откладывать, но оставьте их как есть и добавьте небольшое разъяснение по скомпрометированным разделам, возможно, связанным с внешним источником семантики текстового уровня.

Мой любимый источник семантики на уровне текста - это рекомендация W3C.
https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html
А также разъяснения MDN по вариантам использования для каждого тега, например
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

Возможно, это будет слишком технически, поэтому я могу позаботиться о поиске еще нескольких вариантов, удобных для новичков, или написать один сам в блоге freeCodeCamp, если хотите :)

Я считаю, что название задачи и использование <em> курсивом совершенно неверны и должны быть переименованы в:
Прикладной визуальный дизайн: использование курсивного шрифта для выделения текста курсивом

И измените текст с:

Чтобы выделить текст, вы можете использовать тег em. Текст отображается курсивом, поскольку браузер применяет CSS font-style: italic; к элементу.

к

Чтобы выделить текст курсивом, примените правило css _font-style: italic_ к элементу, который вы хотите отобразить курсивом.

Таким образом, использование <em> могло бы иметь более адекватное представление в разделе «Прикладная доступность» со своей собственной проблемой.

Спасибо всем за отзывы. Мы будем отходить от учебной программы, основанной на предметах, и надеемся получить лучшее описание семантики в предстоящей учебной программе, основанной на проектах.

@scissorsneedfoodtoo , мысли?

Спасибо @ Facundo-Corradini за подробные объяснения и другим за то, что они взвесили. Многие из проектов все еще находятся в стадии разработки и будут выпускаться на постоянной основе после их тестирования. Возможно, стоит пока оставить эту проблему открытой, на случай, если кто-то сможет обновить описания в текущих задачах визуального дизайна.

Закрытие как устаревшее. Если кто-то хочет продолжить беседу, не стесняйтесь оставлять сообщение, и мы можем снова открыть его. Спасибо и счастливого кодирования