Летние обновления курса веб-дизайна CodeHS 2022 г.
Семантические теги, обновление Bootstrap и многое другое!
Мы рады сообщить, что команда по учебной программе CodeHS работает над пересмотренной версией веб-дизайна. Эта версия будет отражать изменения в HTML5 с момента выпуска исходного курса и учитывать отзывы наших преподавателей, сохраняя при этом компоненты курса, которые сделали его таким популярным среди преподавателей и студентов. Эта новая версия будет выпущена после лета и будет доступна учителям для использования в осеннем семестре 2022–2023 годов.
Обратите внимание, что этот пересмотренный курс будет запущен как новый курс — текущая версия нашего веб-дизайна (Picasso) по-прежнему будет доступна для учителей, которые предпочитают продолжать ее использовать.
Вот обзор изменений, которые вы увидите в исправленной версии нашего курса веб-дизайна, которую мы выпускаем для использования в предстоящем учебном году.
Семантические теги HTML5
Что такое семантические теги?
Теги HTML5 делятся на две категории: несемантические и семантические. Теги ‹div› и ‹span› являются примерами несемантических тегов. Они полезны для создания структуры и макета веб-страницы, но не предоставляют поисковым системам и инструментам доступности описание типа контента, который они форматируют на странице. Семантические теги HTML5 были частично созданы на основе идентификаторов и классов ‹div›, которые часто использовались веб-дизайнерами и разработчиками для организации структуры веб-страницы.
Семантические теги HTML5, такие как ‹nav›, ‹main›, ‹section› и ‹footer›, помогают опишите тип и назначение содержания, традиционно в теге ‹div›. Дополнительные семантические теги мультимедиа также помогают определить типы мультимедиа и то, как они должны быть представлены на веб-странице. Некоторые семантические теги, такие как ‹blockquote›, используют стили CSS, поддерживаемые современными веб-браузерами. Хотя некоторые из этих семантических тегов HTML5 представлены в текущем курсе веб-дизайна, осеннее обновление предоставит учащимся и преподавателям дополнительные рекомендации и инструкции по использованию этих тегов.
Более описательный, чем ‹div›
В то время как веб-дизайнеры и разработчики продолжают использовать несемантические теги для разделения содержимого веб-страницы, следующие семантические теги предоставляют веб-браузерам более точную информацию о макете содержимого страницы и ее назначении. Это помогает поисковым системам получать более точные данные о веб-страницах, повышает удобство работы пользователей и повышает доступность веб-сайтов.
Некоторые семантические теги HTML5 не определяют большую часть структуры страницы, но дают больше информации о том, как следует форматировать тип контента внутри контейнера. Например, тег ‹em› указывает веб-браузеру выделять или выделять текст курсивом. Тег ‹blockquote› изменяет текст с отступом, добавляет вертикальную черту слева от цитаты и может настраивать форматирование текста. Тег ‹mark› выделяет текст внутри контейнера.
Другие теги относятся к типам медиа или контента, связанного с медиа. Тег ‹picture› обозначает изображение, которое должно отображаться, но также позволяет разработчикам обращаться к различным источникам изображений по мере необходимости. Тег ‹figure› можно использовать для определения изображения, диаграммы, диаграммы или других визуальных элементов, связанных с содержимым страницы. Под тегом ‹figure› веб-дизайнер может добавить тег ‹figcaption›, чтобы определить текст, который должен сопровождать рисунок в качестве подписи.
Ищите более широкое включение семантических тегов HTML5 в обновленный курс веб-дизайна этой осенью.
Начальная загрузка v5
Обновленный курс веб-дизайна обновит шаблон Bootstrap, включив в него последнюю версию фреймворка Bootstrap CSS. Переходя с версии 3 на версию 5, последняя версия Bootstrap реструктурирует то, как она выполняется на бэкэнде. Bootstrap больше не зависит от jQuery и теперь использует чистый JavaScript на своем сервере, чтобы быстрее предоставлять стили и компоненты браузерам пользователей. Хотя эти изменения не окажут заметного влияния на то, как учащиеся используют Bootstrap в своих веб-проектах, ниже приведены несколько заметных изменений, которые будут отражены в этом обновлении.
- Добавлен новый вариант .carousel-dark для темного текста, элементов управления и индикаторов (отлично подходит для более светлого фона).
- Добавлен новый вариант .dropdown-menu-dark и связанные переменные для темных раскрывающихся списков по требованию.
- Отброшен компонент jumbotron, так как его можно воспроизвести с помощью утилит. Для демонстрации см. новый пример Jumbotron от Bootstrap.
- Для панелей навигации теперь требуется контейнер внутри (чтобы радикально упростить требования к интервалам и CSS).
- Переименованы несколько утилит, чтобы использовать имена логических свойств вместо имен направлений. (Пример: переименование .border-left и .border-right в .border-start и .border-end.)
- Добавлена новая точка останова xxl для 1400px и выше. Никаких изменений для всех других точек останова. Это доводит отзывчивый веб-дизайн с Bootstrap до шести возможных точек останова.
- Увеличен коэффициент цветовой контрастности с 3:1 до 4,5:1 и обновлены синий, зеленый, голубой и розовый цвета, чтобы обеспечить контрастность WCAG 2.1 AA. Также изменен цвет цветового контраста с $gray-900 на $black.
Источник: Документы Bootstrap
Веб-доступность
Когда учащиеся разрабатывают веб-сайты и приложения, важно учитывать интересы всех пользователей. В то время как текущий курс демонстрирует методы, которые могут сделать веб-проекты более доступными для пользователей с ограниченными возможностями, обновленный курс будет включать в себя больше возможностей для студентов попрактиковаться в реализации этих методов веб-дизайна и соответствовать Рекомендациям по доступности веб-контента (WCAG).
Дизайн для навигации с помощью клавиатуры и программ чтения с экрана
Не все веб-пользователи перемещаются с помощью мыши. Некоторые пользователи с ограниченными возможностями могут перемещаться по веб-странице с помощью переключателя или клавиатуры. Чтобы упростить навигацию для этих пользователей, необходимы описательные метки кнопок и продуманные последовательности вкладок. Студенты будут выполнять новые упражнения в обновленном курсе, чтобы улучшить навигацию с помощью клавиатуры и средства чтения с экрана в своих проектах веб-дизайна.
Обновленный курс веб-дизайна даст студентам возможность помочь им выявить и исправить проблемы доступности в своих веб-проектах. К ним относятся альтернативный текст, добавленный к изображениям, цветовой контраст, прошедший тесты WCAG, и описательные веб-ссылки. Поощряя учащихся к универсальной разработке веб-проектов с учетом доступности, эти новые возможности обучения помогут учащимся улучшить пользовательский опыт своих сайтов и приложений для всех.
Общие улучшения и обновления
Мы также будем вносить общие улучшения и обновления в курс, опять же, многие из них основаны на комментариях учителей на протяжении многих лет. Это может включать в себя такие вещи, как: более четкие описания действий и шаблоны, обновленные критерии тестового примера для упражнений, новые темы в дополнительном содержании, дополнительные ресурсы для уроков и многое другое.
Есть ли какие-либо обновления, которые вы хотели бы видеть в нашей учебной программе? Мы будем рады вашим отзывам: codehs.hellonext.co/b/Curriculum
