Конкурсное задание
Для Отборочного чемпионата
«Молодые профессионалы» (WorldSkills Russia)
По компетенции «Веб-дизайн»
ВГУЭС, Декабрь 2016
Общие данные
Задание рассчитано на 1 неполный день (6 часов).
Задание состоит из двух модулей и охватывает следующие технологии:
● Модуль 1 – графический дизайн + верстка (25 баллов) – 3 часа;
● Модуль 2 – программирование на стороне клиента (25 баллов) – 3 часа;
| День | № | Критерий | Объект | Субъект | Сумма |
| А | Графический дизайн + верстка | ||||
| D | Программирование на стороне клиента | ||||
| Итого |
Модуль 1
Графический дизайн + верстка
Время выполнения: 3 часа
Вводные данные:
Тематика проекта – сайт «Туры по Приморскому краю», логотип, мокапы (макеты) главной страницы, страницы туров с подробным описанием, бриф (краткое описание сайта), набор случайных изображений и текста на тему сайта, блок изображений стандартных социальных сервисов и шрифты.
Выходные данные:
Набор файлов в формате HTML и CSS.
Задание:
Ваша задача - используя вводные данные и требования, разработать сайт, предлагающий туры по Приморскому краю. Дизайн вашего сайта должен эффективно поддерживать цели сайта – вы должны выбирать цвета, шрифты, графические элементы исходя из сферы деятельности.
Дизайн сайта должен использовать принцип единообразия в структуре страницы: единый размер элементов, одинаковую высоту навигационных кнопок, оформление заголовков, подзаголовков и основного текста, оформления ссылок и изображений для всех страниц сайта.
Требуется разработать сайт в соответствии с предоставленными мокапами (макетами) страниц.
Страницы должны быть кроссплатформенны, т.е. сверстаны с учетом их просмотра на различных устройствах с разными разрешениями, т.е.
● быть кроссбраузерными — отображаться и работать во всех популярных браузерах (Opera, Google Chrome, Mozilla Firefox) идентично.
● иметь адаптивную верстку для просмотра на компьютере при различных разрешениях.
● иметь мобильную версию для просмотра на смартфонах с разрешением 320х480. Специальных требований по расположению элементов на странице не предъявляется, но необходимо учитывать разрешение и способ навигации по странице.
| № | Аспект | Балл |
| B1 | суб-критерий: соответствие представленному макету | |
| B1O1 | элементы “Шапка”, “Подвал” и “Меню” представлены на всех страницах сайта | 0,5 |
| B1O2 | элемент “Меню” соответствует представленным прототипам | 0,5 |
| B1O3 | элемент “Шапка” соответствует представленным прототипам | 0,5 |
| B1O4 | элемент “Подвал” соответствует представленным прототипам | 0,5 |
| B1O5 | представлены все 3 страницы сайта | 0,5 |
| B1O6 | элементы главной страницы и их размещение соответствуют прототипу | |
| B1O7 | элементы второй страницы и их размещение соответствуют прототипу | |
| B1O8 | элементы мобильной страницы и их размещение соответствуют прототипу | |
| B1O9 | кроссбраузерность страниц сайта (за отсутствие идентичности в одном из браузеров – штраф 0,5 балла) | |
| B2 | суб-критерий: адаптивная верстка главной страницы | |
| B2О1 | применяется блочная верстка на основе элементов HTML5 | 0,5 |
| В2O2 | размеры контейнеров элементов страниц изменяются при изменении разрешения | |
| B2О3 | контент масштабируется при изменении разрешения | |
| А1 | суб-критерий: стилистика и графические решения | |
| А1О1 | все основные цвета выбранного логотипа используются в дизайне сайта (учитываются базовые цвета без оттенков) | |
| А1О2 | все страницы сайта имеют одинаковый графический пользовательский интерфейс | |
| А1О3 | шрифты и размер текста используются корректно в пределах страницы | |
| А1С1 | дизайн сайта соответствует профилю деятельности фирмы | |
| А1С2 | оформление и использование изображений (картинок, фотографий) | |
| А1С3 | использованное графическое оформление элементов страницы (блоков) подчеркивает их взаимосвязь и улучшает восприятие информации | |
| А1С4 | выбрано оптимальное соотношение яркости (контраст) между текстом и фоном | |
| А1С5 | однородность текста и равномерность распределения пустых мест на всем сайте | |
| А1С6 | оформление заголовков и подзаголовков | |
| А1С7 | общее впечатление о дизайне сайта |
Модуль 2.
Программирование на стороне клиента (JavaScript)
Время выполнения: 3 часа
Необходимо реализовать следующие интерактивные возможности на сайте, который был сделан в модуле 1:
1. Сделать небольшой интерактивный анимированный элемент, каким-то образом привлекающий посетителя сайта сделать заказ путевки или позвонить в фирму. У этого элемента должно быть 2 состояния: 1) Пассивное – он отображается на экране и показывает какую-нибудь непрерывную анимацию, привлекая внимание, но не раздражая посетителя. 2) Активное – пользователь навел на него мышку. В этом случае должна быть показана какая-то другая более активная анимация.
2. Сделать интерактивный элемент «карусель». Задача этого элемента заключается в том, чтобы время от времени автоматически прокручивать «горячий список туров» (фотографии туров) с какой-нибудь анимацией перемещения. У карусели должны быть также сделаны стандартные кнопки «вперед» и «назад», однако, в обычном состоянии этих кнопок не видно, они должны появляться только тогда, когда пользователь навел мышку на карусель. Список туров (фотографий) должен включать более 6-10 единиц. При этом одновременно на экране отображается только 4 тура. Если при прокручивании вперед (назад) достигнут конец списка, то перемещать список в начало (в конец). При наведении мышкой на любой из элементов карусели необходимо как-то красиво его выделить среди остальных (например, подсветить, или увеличить)
3. Сделать один произвольный интерактивный элемент на сайте по собственному усмотрению.
Примечание. Для реализации интерактивных возможностей разрешено использовать HTML, CSS, Javascript, JQuery, JQuery UI. Другие Javascript-библиотеки использовать нельзя.
| № | Аспект | Балл |
| D1 | Общие требования | |
| D1О1 | Реализовано пассивное состояние элемента №1 (привлекающий сделать заказ или звонок) | |
| D1О2 | Реализовано активное состояние элемента №1 (привлекающий сделать заказ или звонок) | |
| D1О3 | Реализовано пассивная прокрутка элемента №2 (карусель) | |
| D1O4 | Реализована активная прокрутка элемента №2 (карусель) | |
| D1O5 | Реализован интерактивный элемент №3 (произвольный элемент) | |
| D1O6 | Кнопки карусели появляются только в активном состоянии | |
| D1O7 | Изменение объектов карусели сделано с анимацией (эффектом) | |
| D1O8 | При нажатии на элемент №1 открывается страница с оформлением заказа | |
| D1O9 | При нажатии на тур из карусели открывается страница с информацией по соответствующему туру | |
| D1O10 | Приложение работает без ошибок JavaScript. Код хорошо читаем и структурирован. | |
| E1 | Анимация | |
| E1О1 | В процессе анимации присутствуют движущиеся объекты, увеличивающиеся или уменьшающиеся в размере, не менее 2 объектов | |
| E1О2 | Хотя бы в одном из интерактивных элементов используется нарисованная собственноручно картинка | |
| E1С1 | Темп анимации по умолчанию оптимален для восприятия | |
| E1С2 | Внешний вид объектов и анимации привлекает внимание | |
| E1С3 | Общее впечатление от реализации элемента №1 | |
| Е1С4 | Общее впечатление от реализации элемента №2 | |
| Е1С5 | Общее впечатление от реализации элемента №3 |