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