Модуль 3. Верстка HTML. Верстка HTML5/CSS3 по дизайн-макету
Вступительная часть
Профессиональный дизайнер создал концепцию веб-страницы для вымышленного онлайн-магазина музыкальных дисков. Дизайн автоматически адаптируется под ширину демонстрационного окна в зависимости от устройства пользователя и размеров браузера.
Задание
Сверстать соответствующую представленному дизайн-макету страницу в HTML5/CSS3. Весь текст на странице сайта должен быть выделяемым курсором мыши.
Окончательная верстка должна быть адаптивной: дизайн страницы автоматически адаптируется под ширину окно отображения в зависимости от устройства пользователя и размеров браузера. Все изменения на странице должны происходить плавно, без «дерганий».
В скриншотах следует обращать особое внимание на дополнительные изображения, которые показывают, как должны выглядеть некоторые блоки при наведении, фокусе и т.д.
Вводные Данные
Предоставляются готовые скриншоты, показывающие как страница выглядит при ширинах экрана 1280, 720 и 480px. Контрольная точка различий между узким и широким экраном составляет 800px.
Дополнительно также предоставляется скриншот показывающий, как выглядит страница при ширине 1280px с разметкой в системе 12-columns grid.
Выходные Данные
Файл design_page.html, а также набор других необходимых для корректного отображения страницы в браузерах файлов.
Время Выполнения
3 часа
Модуль 3. «Верстка HTML. верстка HTML5/CSS3 по дизайн-макету».
Субкритерии и аспекты оценки
| № | Аспект | Максимальный балл |
| B1 | Соответствие страницы макету | |
| B1O1 | Разметка макета «Широкий экран» соответствует предоставленному скриншоту | |
| B1O2 | Разметка макета «Узкий экран» соответствует предоставленному скриншоту | |
| B1O3 | Разметка макета «Мобильный экран» соответствует предоставленному скриншоту | |
| B1O4 | Страница выглядит абсолютно одинаково в браузерах Firefox и Chrome | |
| B2 | Верстка страницы | |
| B2O1 | Валидный код HTML. Штраф -0.25 за каждый тип ошибки. | |
| B2O2 | Используется блочная структура на основе тегов div | |
| B2O3 | Весь текст выделяется, включая текст «ON SALE» и «Preview» | |
| B2O4 | Все тени и закруглённые углы реализованы с помощью CSS3 | |
| B2O5 | Все кнопки, включая «Add to Cart»и «Play», созданы с использованием HTML-элементов и CSS (не картинки) | |
| B2C1 | Макет в момент изменения размеров окна изменяется плавно | |
| B3 | Интерактивные эффекты | |
| B3O1 | При нажатии на верхнюю правую иконку (Title bar) на узком и мобильном экране происходит переход на нижнее навигационное меню. При нажатии на кнопку «Back to Top» скроллинг возвращается наверх. | |
| B3O2 | Реализована контрольная точка различия между узким и широким экраном 800px. | |
| Итого максимально: |
Указан максимальный балл. Аспекты.
O – объективные,
С – субъективные.
Модуль 4. Верстка HTML. Восстановление CSS по скриншоту
Вступительная часть
При разработке сайта для ОЧЕНЬ ВАЖНОГО ПРОЕКТА произошел компьютерный сбой, в результате чего часть файлов оказалось потерянной. К счастью, исходные материалы проекта и эскиз сайта были сохранены в архиве. Необходимо срочно восстановить сайт, не трогая существующие файлы. По возможности можно заодно и несколько улучшить визуальный вид страницы за счет изменения гарнитуры используемых шрифтов и добавления эффектов.
Задание
Необходимо воссоздать потерянный CSS-файл, используя структуру оставшихся HTML-файлов и снимка экрана с данным сайтом, когда его структура была еще цела.
К сожалению, компьютерный сбой затронул и скриншот – поэтому информация на нем также частично потеряна.
Редактировать можно только заранее подготовленный файл style.css (остальные будут восстановлены перед проверкой экспертами).
Возможно создавать папки, добавлять в них и ранее существующие любые файлы, но их использование возможно только через восстанавливаемый CSS-файл.
Необходимо обращать внимание на такие аспекты как стиль, цвет, схема разметки, типография, диаграммы, изображения, анимационные эффекты и user-friendly интерфейс в вашем проекте.
Вводные данные
Сайт в формате HTML с удаленным CSS-файлом и частичный скриншот данного сайта до момента удаления CSS, шрифты, изображения.
Выходные Данные
Соответствующий спецификациям CSS3 CSS-файл.
Время Выполнения
3 часа
Модуль 4. «ВерсткА HTML. Восстановление CSS по скриншоту».
Субкритерии и аспекты оценки
| № | Аспект | Максимальный балл |
| B4 | Идентичность верстки скриншоту | |
| В4О1 | Размер и расположение «Шапки», а также взаимное расположение и внешний вид ее элементов соответствуют скриншоту (используются понятия «над», «в», «под», «слева», «справа» и т.д.). Штраф - 0.5 за каждый несоответствующий внешнему виду или расположению элемент. | |
| В4О2 | Размер и расположение «Подвала», а также взаимное расположение и внешний вид его элементов соответствуют скриншоту (используются понятия «над», «в», «под», «слева», «справа» и т.д.). Штраф -0.5 за каждый несоответствующий внешнему виду или расположению элемент. | |
| В4О3 | Размер, расположение, внешний вид «Главного меню» при совпадении размера экрана со скриншотом абсолютно точно ему соответствует (в том числе и тексты) | |
| В4О4 | Шапка всегда прижата к верху страницы и не реагирует на скроллинг | 0.5 |
| В4С1 | Расположение «Основные блоки» соответствует скриншоту | |
| В4С2 | Расположение «Дополнительные блоки» соответствует скриншоту | |
| В4С3 | Общее впечатление о точности восстановления и улучшении сайта | |
| B5 | Техническая реализация | |
| B5O1 | Валидный код CSS. Штраф -0.25 за каждый тип ошибки. | |
| B5O2 | Страница выглядит абсолютно одинаково в браузерах Firefox и Chrome | |
| B5O3 | Структура страницы не нарушается при отключении изображений | 0.5 |
| В5С1 | Шрифты сочетаются с дизайном и темой страницы | 0.5 |
| В5С2 | Добавленные эффекты подчеркивают тему сайта и допустимы для нее | 0.5 |
| Итого максимально: |
Указан максимальный балл. Аспекты.
O – объективные,
С – субъективные.