Модуль 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 – объективные,

С – субъективные.