Региональный чемпионат
2017
|
Конкурсное задание
|
|
Компетенция«Web-дизайн»
Возрастная категория «14+»
«Создание Web-сайта»
Конкурсное задание включает в себя следующие разделы:
2. ФОРМЫ УЧАСТИЯ В КОНКУРСЕ 3
3. ЗАДАНИЕ ДЛЯ КОНКУРСА 3
4. МОДУЛИ ЗАДАНИЯ И НЕОБХОДИМОЕ ВРЕМЯ 4
5. Критерии оценки 5
6. ОБЩИЕ ИНСТРУКЦИИ К ВЫПОЛНЕНИЮ МОДУЛЕЙ 6
7. НЕОБХОДИМЫЕ ПРИЛОЖЕНИЯ 9
Количество часов на выполнение задания:10 ч.
Утверждаю главный эксперт JuniorSkills
|
________________
|
/ Насонов Н.В. /
|
Согласовано: технический директор WSR
|
________________
|
/Тымчиков А.Ю./
|
Согласовано: главный эксперт
|
________________
|
/ Ковина Т.П./
|
Страна: Россия
-
ВВЕДЕНИЕ
1.1. Название и описание профессиональной компетенции.
1.1.1 Название профессиональной компетенции: Web-дизайн
1.1.2. Описание профессиональной компетенции.
Web-дизайн является динамичной, постоянно меняющейся профессией, сферой деятельности которой является создание и поддержание работы Web-страниц. Web-дизайнеры используют для создания Web-страниц программы html и CSS-верстки, графические элементы, текст и фото, клиентские и серверные технологии. Компьютерные программы, заготовки и открытые электронные библиотеки используются в качестве технической базы. В своей работе дизайнеры и разработчики сайтов обязаны обращать внимание на закон об авторском праве и этические вопросы.
Web-дизайнер должен быть осведомлен как в области технологий, так и в художественной отрасли. На сайтах технологии используются для автоматизации функций и помощи в управлении контентом. Творческие способности нужны дизайнерам при подборе цветов, шрифтов и графики, а также при разработке структуры сайта. Хорошо спланированный пользовательский интерфейс гарантирует хороший поток посетителей. Web-дизайнер также обязан знать основы проектной работы, продукцию, которой посвящен контент сайта, и основы управления сайтом. Совместимость конечного продукта со стандартными браузерами, программами и устройствами обязательна.
1.2. Область применения
1.2.1. Каждый Эксперт и Участник обязан ознакомиться с данным Конкурсным заданием.
1.3. Сопроводительная документация
1.3.1. Поскольку данное Конкурсное задание содержит лишь информацию, относящуюся к соответствующей профессиональной компетенции, его необходимо использовать совместно со следующими документами:
• «JuniorSkills», Техническое описание. Web-дизайн;
• «JuniorSkills», Правила проведения чемпионата
• Принимающая сторона – Правила техники безопасности и санитарные нормы.
2. ФОРМЫ УЧАСТИЯ В КОНКУРСЕ
Командный конкурс (2 участника).
3. ЗАДАНИЕ ДЛЯ КОНКУРСА
Конкурсное задание преследует своей целью показать навыки конкурсантов в области Web-дизайна, знания ими технологий создания сайтов и управления контентом, а также показать творческие способности при подборе цветов, шрифтов и графики при оформлении сайтов.
Конкурсное задание состоит из 4-х самостоятельных модулей, которые выполняются в течение 2 дней, в каждый по два временных блока с перерывом на обед. Каждый временной блок расчитан на выполнение одного модуля. Задание охватывает следующие технологии:
модуль 1 графический дизайн и верстка(33 балла);
модуль 2 верстка CSS (17 баллов);
модуль 3 программирование на стороне сервера PHP (35 баллов);
модуль 4 программирование на стороне клиента JS (15 баллов).
Порядок выполнения модулей очень важен, т.к. результаты работы предыдущего модуля используются в следующем.
Некоторые модули требуют дополнительных вводных данных для начала соревнований, которые публикуются на закрытом форуме накануне чемпионата.
4. МОДУЛИ ЗАДАНИЯ И НЕОБХОДИМОЕ ВРЕМЯ
Модули и время сведены в таблице 1
Таблица 1.
№ п/п
|
День
|
Наименование модуля
|
Рабочее время
|
Время на задание
|
1
|
1
|
Модуль 1: Графический дизайн и верстка страниц.
|
10.00-13.00
|
3 часа
|
2
|
1
|
Модуль 2: Верстка CSS
|
14.00-16.00
|
2 часа
|
3
|
2
|
Модуль 3: Программирование на стороне сервера
|
10.00-13.00
|
3 час
|
4
|
2
|
Модуль 4: Программирование на стороне клиента
|
14.00-16.00
|
2 часа
|
Модуль 1: Графический дизайн и верстка HTML
Это задание является основным и адаптировано для детей возраста 14+. В рамках задания конкурсанты должны сверстать сайт по заранее разработанному дизайнером шаблону. Верстка сайта должна быть резиновая. В шапке макета должна быть галерея товаров, в которой,при наведении на любой элемент галереи, элементы плавно смещаются с анимацией влево. При наведении на кнопки они изменяют свой цвет. Используются определенные шрифты и ссылки.
Модуль 2: Верстка CSS
Для созданного сайта необходимо создать удаленный CSSфайл, используя скриншотзаданного сайта.
Модуль 3: Программирование на стороне сервера
Необходимо добавить авторизацию и регистрацию на главной странице и произвести программирование панели администратора для управления контентом продающей страницы (LandingPage). Для этого необходимо создать базу данных, внести в нее элементы контента и создать страницу для управления контентом.
Модуль 4: Программирование на стороне клиента
Создать анимированный баннер, используя HTML5, CSS3 и JavaScript (можно jQuery), для рекламы и повышения прибыли от сайта, разработанного в предыдущих модулях. Баннер должен содержать логотип фирмы и кнопку перехода на сайт, созданный в модуле 1.
5. Критерии оценки
В данном разделе определены критерии оценки и количество начисляемых баллов (субъективные и объективные) таблица 2. Общее количество баллов задания/модуля по всем критериям оценки составляет 100.
Оценка задания должна осуществляться по следующим критериям
Таблица 2.
Раздел
|
Критерий
|
Объект
|
Субъект
|
Сумма
|
А
|
Графический дизайн и верстка страниц
|
33
|
0
|
33
|
B
|
Верстка CSS
|
17
|
0
|
17
|
С
|
Программирование на стороне сервера
|
35
|
0
|
35
|
D
|
Программирование на стороне клиента
|
15
|
0
|
15
|
Итого
|
100
|
0
|
100
|
Субъективные оценки - Не применимо.
Окончательные аспекты критериев оценки уточняются членами жюри.
Время и детали конкурсного задания в зависимости от конкурсных условий могут быть изменены членами жюри.
Конкурсное задание должно выполняться помодульно. Оценка также происходит от модуля к модулю.
6. ОБЩИЕ ИНСТРУКЦИИ К ВЫПОЛНЕНИЮ МОДУЛЕЙ
Инструкция для Модуля 1: Графический дизайн и верстка HTML
Модуль представляет собой верстку сайта по заданному макету.
В рамках задания конкурсанты должны
Сверстать сайт по заранее разработанному дизайнером шаблону.
Верстка сайта должна быть резиновая, то есть все блоки и элементы сайта должны сохранять свои позиции и относительные размеры при изменении размеров окна (до 1200px).
В шапке макета должна быть галерея товаров, которую необходимо реализовать из пяти изображений. При наведении на любой элемент галереи, элементы плавно смещаются с анимацией влево (появляется пятое изображение, а первое скрывается).
-
При наведении на кнопки «Где купить» они изменяют свой цвет.
Функционал кнопок «Где купить» переводит на блок с картой.
Все остальные гиперссылки и кнопки – пустой указатель (#).
В макете используются следующие шрифты: robotobold, robotolight, roboto_condensedbold.
В качестве альтернативного шрифта можно использовать sans-serif.
В шапке и подвале макета логотип со слоганом являются пустой ссылкой (#).
Инструкции для Модуля 2: Верстка CSS
Модуль представляет собой оформление сайта, созданного в модуле 1, с помощью внешнего файла со стилями CSS. Оформление должно быть идентичным заданному макету (скриншоту).
-
В рамках задания необходимо:
размер, расположение, цвет, форма, тени “Шапки” сайта соответствует макету;
оформление блоков идентично заданному макету;
размер, расположение, цвет, форма, тени “Подвала” сайта соответствует макету;
CSS-код должен быть сгруппирован и содержать комментарии;
идентичное отображение страниц сайта в браузерах Firefox, Chrome;
файл CSS3 должен быть валидным.
Инструкции для Модуля 3: Программирование на стороне сервера
В данном модуле необходимо создать базу данных, реализовать авторизацию и регистрацию пользователей, создать панель администратора сайта по управлению контентом.
-
В рамках задания необходимо:
Создать базу данных;
Реализовать авторизацию (логин и пароль берется из базы данных);
Добавить регистрацию пользователей (фамилия, имя, пароль и логин заносится в базу);
Реализовать следующий функционал панели администратора, которая должна позволять добавлять, удалять, редактировать элементы, отображаемые на сайте:
Реализовать возможность удаления пользователя;
Возможность изменить номер телефона в шапке сайта;
Заголовок (название товара) может меняться;
Описание товара(до 500 символов с пробелами) может меняться;
Особенности товара, их может быть любое количество (на сайте это блок с галочками )
Заслуги товара (блок со звездочками )может добавляться или удаляться
Изображение товара может меняться;
Возможность заменить изображение с картой;
Можно задавать цвет фона блока;
Цвета кнопки «Где купить?», в двух состояниях (при наведении и неактивная) также можно задавать;
Поле для указания приоритета отображения товара на странице (сортировка);
Названия городов и представительств можно добавлять и удалять.
Инструкция для Модуля 4: Программирование на стороне клиента
Модуль представляет собой создание анимированного баннера для рекламы товаров фирмы.
Требования к баннеру:
Использовать логотип фирмы;
Использовать минимум одну картинку;
Реализовать интерактивные функциональные возможности (при наведении, при нажатии и т.д.);
Предусмотреть кнопку для перехода на сайт, созданный в модуле 1. Сайт должен открываться в новой вкладке.
реализовать анимацию, длительностью не менее 5 секунд, т.е. не мгновенное изменение состояния объекта;
-
анимация должна состоять минимум из трех сцен;
на каждой сцене должно быть не менее двух активных, взаимодействующих объектов;
переход к последующей сцене осуществляется или по результатам взаимодействия объектов на сцене, или в результате интерактивных действий пользователя.
7. НЕОБХОДИМЫЕ ПРИЛОЖЕНИЯ
В данном разделе приведены основные чертежи, фото, эскизы необходимые для визуального понимания задания.
Приложение №1 (Макет (скриншот) исходного сайта )
Приложение №2 (Рисунок с видом кнопки до и после наведения)
Приложение №3 (Файлы с необходимыми шрифтами)
Приложение №4 (Рисунки с картой «Контакты дилеров»)
Дирекция JuniorSkills
|