Технический департамент Конкурсное задание ВВЕДЕНИЕ

II Чемпионат Воронежской области
Технический департамент
Конкурсное задание
17
WEB-DESIGN (Веб-дизайн)
ВВЕДЕНИЕ
Задание рассчитано на 2,5 дня. В первый день – конкурсные задания начинаются с обеда;
остальные дни – по два временных блока с перерывом на обед. Каждый временной блок
рассчитан на выполнение одного модуля.
Модуль 1.
Графический дизайн
Время выполнения:
4 часа.
Вводные данные:
Расположены на общем сервере в папке “Media”:
Название фирмы - “______________________________________, логотип, mockup двух
страниц (главная со списком товаров и страница товара с подробным описанием), краткое
описание, список товаров или услуг с фотографиями и описанием, набор случайных
изображений и текста на тему фирмы, блок изображений стандартных социальных
сервисов и шрифты.
Выходные данные:
Три дизайн-макета сайта в photoshop-формате и JPG-формате: для главной, страницы,
страницы с описанием товара или услуги и мобильной версии главной страницы.
Ваша задача - разработать дизайн для сайта _________________________
_________________________________, используя вводные данные и требования. Дизайн
вашего сайта должен эффективно поддерживать цели сайта – вы должны выбирать цвета,
шрифты, графические элементы исходя из сферы деятельности организации (например,
сине-голубая гамма цветов ассоциируется с корпоративным стилем).
Дизайн сайта должен использовать принцип единообразия в структуре страницы:
единый размер элементов, одинаковую высоту навигационных кнопок, оформление
заголовков, подзаголовков и основного текста, оформления ссылок и изображений для
всех страниц сайта.
Требуется разработать дизайн сайта в соответствии с предоставленными
прототипами страниц (Mockup). А также дизайн мобильной версии страницы для
просмотра на телефонах с touchscreen и разрешением 320х480. Специальных требований
по расположению элементов на странице не предъявляется, но необходимо учитывать
Технический департамент WSR
1
II Чемпионат Воронежской области
разрешение и способ навигации по странице.
Оценка данного модуля будет осуществляться по следующим критериям:
№
А1
Аспект
Балл
Суб-критерий: соответствие представленному Mockup - при оценке работ необходимо
руководствоваться понятиями взаимное расположение элементов : до, после, над, под,
рядом, внутри, на. За каждое несоответствие - штраф 0,5 балла
A1O1
элементы Шапка, Подвал и Меню представлены на всех страницах сайта
1
A1O2
элемент Таблица товаров соответствует представленным прототипам
1
A1O3
элемент Шапка соответствует представленным прототипам
1
A1O4
элемент Подвал соответствует представленным прототипам
1
A1O5
элемент Меню соответствует представленным прототипам
1
А2
Суб-критерий: стилистика и графические решения
А2О1
все основные цвета предоставленного логотипа используются в дизайне сайта
(учитываются базовые цвета без оттенков)
1
А2О2
все страницы
интерфейс
1
А2S1
дизайн сайта соответствует профилю деятельности фирмы
1,5
А2S2
общее впечатление о дизайне сайта
1,5
А2S3
использованное графическое оформление элементов страницы
подчеркивает их взаимосвязь и улучшает восприятие информации.
А2S4
выбрано оптимальное соотношение яркости (контраст) между текстом и фоном
1,5
А2S5
однородность текста и равномерность распределения пустых мест на всем сайте
1
A3
сайта
имеют
одинаковый
графический
пользовательский
(блоков)
1,5
Суб-критерий: мобильная версия главной страницы
A3О1
размер дизайн-макета соответствует требованиям задания
0,5
A3О2
цветовая схема и дизайн мобильного макета соответствует основному
0,5
A3О3
на мобильном макете представлены все блоки из основного прототипа
0,5
A3S1
общее впечатление и удобство использования главной страницы на мобильном
телефоне
A4
A4O1
1
Суб-критерий: общие требования
Исходные файлы размещены на сервере в представленных форматах
Технический департамент WSR
0,5
2
II Чемпионат Воронежской области
Модуль 2.
Верстка HTML5/CSS3
Время выполнения:
один временной блок, 4 часа.
Вводные данные:
Дизайн макеты главной страницы: макета PC
Выходные данные:
Адаптивная HTML страница со стилями CSS
Ваша задача - сверстать html-файл по дизайн макету. Весь текст на странице сайта
должен быть выделяемым курсором мыши.
Оценка данного модуля будет осуществляться по следующим критериям:
№
B3
Аспект
Балл
оформление блоков идентично заданному макету
B3O1
Шаблон PC соответствует предоставленному дизайн макету. Штраф за
каждую ошибку 0,6 баллов
6
B3O2
идентичное отображение страниц сайта в браузерах Firefox, Chrome.
1
В3О3
Валидность HTML (не более двух ошибок валидации)
1
B4
суб-критерий: адаптивная верстка главной страницы
B4О1
Применяется блочная структура
используются только в контенте
на основе тэгов div, а таблицы
B4О2
Изменение разрешения не создает горизонтальных скроллбаров
2
B4С1
Качество реализации процесса изменения каркаса при различных
разрешениях до 800х600px
2
B4C2
Качество реализации процесса изменения взаимного расположения
элементов каркаса при разрешении после 320х480px
2
1
Модуль 3.
Верстка CSS
Время выполнения:
один временной блок, 4 часа.
Вводные данные:
Сайт в формате HTML с удаленным CSS-файлом и частичный скриншот данного сайта до
момента удаления CSS.
Технический департамент WSR
3
II Чемпионат Воронежской области
Выходные данные:
набор файлов в формате CSS.
Запрещено:
редактировать HTML-файлы.
Ваша задача - воссоздать удаленный css-файл используя структуру оставшегося
HTML-файла и снимка экрана с данным сайтом, когда его структура была еще цела.
Оценка данного модуля будет осуществляться по следующим критериям:
№
B5
Аспект
Балл
оформление блоков идентично заданному макету (скриншот)
B5O1
размер и расположение “Шапки” сайта соответствуют скриншоту
0,5
B5O2
цвет, форма, тени “Шапки” сайта соответствуют скриншоту
0,5
B5O3
размер и расположение “Объекта 1” сайта соответствуют скриншоту
0,5
B5O4
цвет, форма, тени “Объекта 1” сайта соответствуют скриншоту
0,5
B5O5
размер и расположение “Объекта 2” сайта соответствуют скриншоту
0,5
B5O6
цвет, форма, тени “Объекта 2” сайта соответствуют скриншоту
0,5
B5O7
размер и расположение “Объекта 3” сайта соответствуют скриншоту
0,5
B5O8
цвет, форма, тени “Объекта 3” сайта соответствуют скриншоту
0,5
B5O9
размер и расположение “Объекта 4” сайта соответствуют скриншоту
0,5
B5O10 цвет, форма, тени “Объекта 4” сайта соответствуют скриншоту
0,5
B5O11 размер и расположение “Объекта 5” сайта соответствуют скриншоту
0,5
B5O12 цвет, форма, тени “Объекта 5” сайта соответствуют скриншоту
0,5
В5С1
B6
общее впечатление о точности восстановления сайта
2
техническая реализация
В6О1
валидность CSS3 (не более двух ошибок валидации)
1
В6О2
шрифты используются корректно в пределах страницы
1
Технический департамент WSR
4
II Чемпионат Воронежской области
Модуль 4
PHP - программирование на стороне сервера
Время выполнения:
один временной блок, 4 часа
Вводные данные:
html-файл с версткой страницы сайта, разработанный в рамках выполнения задания
Модуля 1, необходимые графические, текстовые файлы.
Выходные данные:
сайт в HTML5+CSS3+PHP
Ваша задача – реализовать указанный функционал. В качестве исходной страницы
используется html-файл, полученный в результате поиска в сети Интернет. Необходимо
реализовать систему регистрации и авторизации администраторов и пользователей. Вся
создаваемая текстовая информация, в том числе данные аккаунтов, должна храниться в
базе данных.
1. Видеопортал
1.1 В режиме пользователя:
1.1.1. Просмотр видеоролика стандартными средствами браузера;
1.1.2. Написание отзыва (без регистрации);
1.1.3 Защита от автоматических написаний отзывов реализована с помощью
механизма CAPTCHA;
1.2 В режиме администратора:
1.2.1. Загрузка видеофайлов;
1.2.2. Редактирование названия, описания файла;
1.2.3. Модерирование (подтверждение или удаление комментария к видеофайлу);
2. Новости
2.1 В режиме пользователя (анонимно, регистрация не требуется):
2.1.1. Возможность выбрать тематику (возможна реализация с помощью списка,
вкладок и пр.);
2.1.2. Просмотр новостей соответствующей тематики;
2.1.3. При загрузке страницы загружаются новости тематики, которая
просматривалась пользователем последней в прошлую сессию;
2.1.4. Рядом с анонсом новости размещена миниатюра изображения;
2.1.5. Заголовок новости - гиперссылка, при переходе по которой в новой вкладке
отображается заголовок новости, ее текст, изображение.
2.2. В режиме администратора:
2.2.1. Создание новостей: заголовок, текст новости, тематика, загрузка 1
изображения к каждой новости.
2.2.2. Защита от автоматического создания реализована с помощью
механизма CAPTCHA;
2.2.3. Возможность редактирования новостей, созданных ранее.
3. Каталог интернет-магазина
3.1 В режиме пользователя:
3.1.1. Возможность регистрации и авторизации пользователя (указание логина, email);
Технический департамент WSR
5
II Чемпионат Воронежской области
3.1.2.
Защита от автоматических регистраций реализована с помощью
механизма CAPTCHA;
3.1.3. Отправка приветственного сообщения на e-mail, указанный при регистрации
с данными (логин, автоматически сгенерированный пароль);
3.1.3. Отображение товаров в виде таблицы N x 3, где 3 - количество столбцов.
Содержимое ячеек по строкам и количество строк определяется
автоматически в зависимости от общего количества товаров;
3.1.4. Каждая ячейка содержит следующую информацию о товаре
(услуге):
а)
Фото;
б)
Наименование товара (услуги);
в)
Стоимость;
3.1.5. Изображение - гиперссылка, переход по которой открывает новое
окно
с
Названием,
описанием,
стоимостью,
рейтингом
и
соответствующим изображением.
3.2. В режиме администратора
3.2.1. Возможность добавления новых позиций товара (услуги) с указанием
наименования, описания товара (услуги), стоимости, принадлежности к
одной из трех заранее определенных категорий. Выбор категории
осуществляется из выпадающего списка, данные в который заносятся из
базы данных;
3.2.2. Изображения автоматически обрезаются до размеров 200 х 200 px. В
дальнейшем используются только полученные изображения.
Оценка данного модуля будет осуществляться по следующим критериям:
№
С1
С1С1
С1С2
С2
С2О1
С2О2
С2О3
С2О4
С2О5
С2О6
Аспект
Выполнение общих требований
Корректное использование комментариев
Выполнение общих требований
Реализация видеопортала
На странице пользователя выводится список всех загруженных
видеофайлов с указанием даты загрузки
По переходу по соответствующей гиперссылке в новой вкладке
реализовано воспроизведение загруженного ролика средствами
браузера (с поддержку функций «Пауза», «Воспроизведение», «Стоп»)
В окне воспроизведения видеофайла
отображаются: Название ролика
Описание видеофайла
Имя комментирующего
Комментарий
В окне воспроизведения видеофайла реализована возможность
форматирования сообщения: выделение текста полужирным, курсивом,
подчеркиванием конструкциями вида [b][/b],
[u][/u]
соответственно
Валидация средствами php заполнения полей Имя, Текст отзыва, e-mail
(непустые значения). Если поля заполнены некорректно, происходит
переадресация на страницу со списком загруженных видеороликов.
Валидация средствами php корректности содержимого поля e-mail
Технический департамент WSR
Балл
1,5
1,5
1
1
1
(по 0,25 за
пункт)
1
1
2
6
II Чемпионат Воронежской области
С2О7
Реализована возможность авторизации администратора. Логин: admin,
1
пароль: admin
С2О8 В режиме администратора реализована возможность загрузки
2
видеофайла
С2О9 В режиме администратора реализована возможность создания Названия
1
и Описания видеоролика
С2О10
Защита от автоматических регистраций реализована с помощью
7 (2 за
механизма CAPTCHA, для которой справедливо:
каждый пункт
•
используется не менее 4 полос случайных цветов,
+ 1 за
•
символы русского алфавита и цифры,
корректную
•
длина строки - от 4 до 7 символов, определяется
работу
случайным образом, CAPTCHA регистроНЕзависима.
механизма)
С2О11 В режиме администратора реализована возможность редактирования
1
Названия, Описания видеофайла
С2О12 В режиме администрирования реализована возможность
1
модерирования - подтверждения или удаления комментария
(0,5 за каждое
действие)
С3
Модуль «Новости»
С3О1 Реализована возможность выбора одной из трех представленных
1
тематик
С3О2 В разделе отображаются только новости выбранной тематики
1
С3О3
Заголовок новости - гиперссылка, при переходе по которой в новой
2
вкладке отображается заголовок новости, ее текст, оригинал
изображения
С3О4 При загрузке страницы загружаются новости тематики, которая
3
просматривалась пользователем последней в прошлую сессию
С3О5 Рядом с анонсом новости размещена миниатюра изображения размером
1
80 х 80px.
С3О6 Реализована авторизация администратора. Логин: admin, пароль: admin
0,5
С3О7 В режиме администратора реализована возможность создания новости с
2 (0,5 за
указанием заголовка, текста новости, ее тематики, загрузки 1
каждый пункт)
изображения. Выбор тематики происходит из предопределенного
списка.
С3О8 При создании новости автоматически генерируются миниатюры
2
размером 80 х 80px для последующего отображения в модуле новостей
С3О9 В режиме администратора реализована возможность редактирования
1,5
заголовка, текста новости, ее тематики
С3О10
Защита от автоматических публикаций новостей реализована с
7 (2 за
помощью механизма CAPTCHA, для которой справедливо:
каждый пункт
•
используется не менее 4 полос случайных цветов,
+ 1 за
•
символы русского алфавита и цифры,
корректную
•
длина строки - от 4 до 7 символов, определяется
работу
случайным образом, CAPTCHA регистроНЕзависима.
механизма)
С3О11 В режиме администратора реализована функция предпросмотра
1
новости
С4
Каталог интернет-магазина
С4О1 Реализована возможность регистрации пользователя (указание логина,
1
пароля, e-mail)
Технический департамент WSR
7
II Чемпионат Воронежской области
С4О2
С4О3
С4О4
С4О5
С4О6
С4О7
С4О8
С4О9
С4О10
С4О11
С4О12
Защита от автоматических регистраций реализована с помощью
7 (2 за
механизма CAPTCHA, для которой справедливо:
каждый пункт
•
используется не менее 4 полос случайных цветов,
+ 1 за
•
символы русского алфавита и цифры,
корректную
•
длина строки - от 4 до 7 символов, определяется
работу
случайным образом, CAPTCHA регистроНЕзависима.
механизма)
Отправка приветственного сообщения на e-mail, указанный при
1
регистрации, уникальной ссылки для активации аккаунта. При
генерации ссылки используются данные текущей сессии.
При активации аккаунта при переходе по ссылке, полученной на e-mail,
2
проверяется идентичность ссылки текущей сессии
Отображение товаров в виде таблицы N x 3, где 3 - количество
1
столбцов. Содержимое ячеек по строкам и количество строк
определяется автоматически в зависимости от общего количества
товаров
Содержимое ячеек таблицы расположено в алфавитном порядке (по
1
наименованию) слева направо, сверху вниз
Для не авторизованного пользователя каждая ячейка содержит
1
следующую информацию о товаре (услуге):
а)
Фото;
б)
Наименование товара (услуги);
Для авторизованного пользователя каждая ячейка содержит
1
следующую информацию о товаре (услуге):
а)
Фото;
б)
Наименование товара (услуги);
в)
Стоимость
Изображение - гиперссылка, переход по которой открывает новое окно с
1
указанием названия, описания, стоимости, соответствующим
изображением.
В режиме администратора реализована возможность добавления новых
2
позиций товара (услуги) с указанием наименования, описания товара
(услуги), стоимости, принадлежности к одной из трех заранее
определенных категорий. Выбор категории осуществляется из
выпадающего списка, данные в который заносятся из базы данных
В режиме администратора реализована возможность редактирования
1
существующих позиций товара (услуги) с изменением наименования,
описания товара (услуги), стоимости, принадлежности к одной из трех
заранее определенных категорий.
В режиме администратора автоматически генерируются миниатюры,
1
соответствующие товару или услуге размером 120 х 120px для
последующего отображения в каталоге.
Модуль 5
Программирование на стороне клиента JS + анимация
Время выполнения: 4 часа
Вводные данные:
название фирмы по продаже товаров или услуг, логотип, краткое описание, список
товаров или услуг с фотографиями и описанием, набор случайных изображений и текста
Технический департамент WSR
8
II Чемпионат Воронежской области
на тему фирмы__________________.
Выходные
набор файлов в формате HTML5, CSS3 и JS.
данные:
Ваша задача – создать анимированный баннер, используя HTML5, CSS3 и JavaScript, для
рекламы и повышения прибыли от сайта. Вам необходимо использовать один из
следующих стандартных размеров:
●
●
Вертикальный – 160 х 600 px
Горизонтальный – 468 х 120 px
Требования к баннеру:
● Использовать логотип фирмы
● Использовать минимум одну картинку
● Реализовать интерактивные функциональные возможности (при наведении, при
нажатии и т.д.)
● Предусмотреть механизм перехода на целевой сайт (переход на пустую страницу).
Сайт должен открываться в новой вкладке
Требования к анимации
● Реализовать анимацию, длительностью не менее 5 секунд, т.е. не мгновенное
изменение состояния объекта
● Анимация должна состоять минимум из трех сцен
● На каждой сцене должно быть не менее двух активных, взаимодействующих
объектов
● Переход к последующей сцене осуществляется или по результатам взаимодействия
объектов на сцене или в результате интерактивных действий пользователя
Дополнительные условия: использовать только HTML5\CSS3\JS\jQuery. Можно
создавать собственные графические объекты, но нельзя использовать gif-анимацию или
AdobeFlash. Варианты “слайдеров” запрещены.
Оценка данного модуля будет осуществляться по следующим критериям:
№
Аспект
Балл
D1
Общие требования
D1О1
Размер баннера соответствует одному из предложенных вариантов
1
D1О2
В баннере используется логотип фирмы и минимум одна картинка (штраф за
каждый отсутствующий элемент)
1
Технический департамент WSR
9
II Чемпионат Воронежской области
D1О3
Реализованы интерактивные функциональные возможности
3
D1О4
Через баннер реализован механизм перехода на целевой сайт (рекламируемый
продукт). Сайт должен открываться в новой вкладке
1
D2
Алгоритм работы
D2О1
На каждой сцене присутствует минимум два взаимодействующих объекта
(штраф за каждую сцену, не подходящую под критерий)
3
D2С1
Нелинейность, сложность перехода к следующей сцене, который происходит
по результатам взаимодействия объектов или в результате интерактивных
действий пользователя
4
E1
Анимация
E1О1
Длительность анимации не менее 5 секунд
1
E1О2
Анимация состоит минимум из трёх сцен
2
E1С1
Оригинальность баннера
2
E1С2
Баннер способствует продвижению товара
2
Технический департамент WSR
10
II Чемпионат Воронежской области
СХЕМА НАЧИСЛЕНИЯ БАЛЛОВ
День
№
Критерий
Сумма
1
А
Графический дизайн страниц
17
2,3
B
Верстка страниц
40
2
С
Программирование на стороне сервера
23
1
D
Программирование на стороне клиента
20
итого
100
Для уточнения критериев оценивания смотри отдельный документ «Схема оценок»
(выдаётся перед началом соревнования)
ИНСТРУКТАЖ УЧАСТНИКОВ
Соревнования длятся 2,5 дня. Каждый модуль представляет собой новое задание. По
завершении выполнения модуля, работа оценивается экспертами и не может быть
более изменена. Для каждого дня предусмотрен план выполнения.
Сохраняйте свои работы в специальных папках на сервере, так чтобы «индексные»
файлы были в «корне» (день 1_xx\index.html), а все исходные файлы в отдельной
папке:
• День 1_А
• День 1_Б
• День 2_А
• День 2_Б
• День 3_А
где «хх» - номер рабочего места. Только файлы, которые расположены на сервере будут
учитываться экспертами.
Технический директор WSR
Эксперты WSR
Решетников Дмитрий Сергеевич
Эксперт WorldSkills Russia: Web Design
vet.root@mail.ru
Технический департамент WSR
11