| 
            Региональный чемпионат
 
 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
 
 
 
 
 
 
 
 |