Шаблон дизайн-макета рабочей страницы 1

Примерное конкурсное задание (исправленное 19.02.2016 на
встрече группы экспертов)
для республиканского чемпионата
WorldSkills Russia
по компетенции Веб­дизайн
Общие данные:
Задание рассчитано на 2,5 дня с перерывом на обед. Задание состоит из 4 модулей
и охватывает следующие технологии:
●
●
●
●
модуль 1 ­ верстка CSS (12 баллов);
модуль 2 ­ графический дизайн и верстка (30 баллов);
модуль 3 ­ программирование на стороне сервера PHP (23 баллов);
модуль 4 ­ программирование на стороне клиента JS+анимация (12
баллов);
Порядок выполнения модулей очень важен, т.к. результаты работы
предыдущего модуля используются в следующем. Исключением является 1 модуль,
который можно исключить из задания при ограничении времени на выполнение
работ.
Некоторые модули требуют дополнительных вводных данных для начала
соревнований, которые публикуются на закрытом форуме накануне чемпионата.
Оценка задания должна осуществляться по следующим критериям
День
№
Критерий
Объект
Субъект
Сумма
1
А Восстановление CSS
10
1
11
2
B Графический дизайн и верстка
21
11
30
С Программирование на стороне сервера PHP
22
2
24
программирование на стороне клиента
JS+анимация
8
3
11
61
17
78
3
D
ИТОГО
Для критериев оценки применяются следующая кодировка:
Например А1O1 – где:
А – код модуля;
1- порядковый номер критерия для модуля А;
О – объективный критерий (С – субъективный критерий);
1- порядковый номер объективного (субъективного) критерия.
БЛОК А – Вёрстка веб-страниц CSS
Время выполнения: 3,5 часа.
Вводные данные:
Сайт в формате HTML с удаленным CSS­файлом и скриншот данного сайта до момента
удаления CSS.
Выходные данные:
набор файлов в формате CSS.
Запрещено:
редактировать HTML­файлы.
Ваша задача ­ воссоздать удаленный css­файл используя структуру оставшихся
HTML­файлов и снимка экрана с данным сайтом, когда его структура была еще
цела.
Оценка данного модуля будет осуществляться по следующим критериям:
№
Критерий
Комментарий
Балл
А1 Подкритерий: оформление блоков идентично скриншоту сайта до повреждения
А1O1
А1O2
А1O3
А1O4
А1O5
А1O6
А1O7
А1O8
А1С1
А2
размер и расположение “Шапки” сайта
соответствуют скриншоту
Цвет, форма, тени, шрифты “Шапки” сайта
соответствуют скриншоту
размер и расположение “Подвала” сайта
соответствуют скриншоту
цвет, форма, тени, шрифты “Подвала” сайта
соответствуют скриншоту
размер и расположение “Главного меню” сайта
соответствуют скриншоту
цвет, форма, тени, шрифты “Главного меню” сайта
соответствуют скриншоту
размер и расположение “ ” “Содержательный блок”
сайта соответствуют скриншоту
цвет, форма, тени, шрифты “Содержательный блок”
сайта соответствуют скриншоту
общее впечатление о точности восстановления
сайта
1
За отсутствие параметра штраф
0,25
За отсутствие параметра штраф
0,5
За отсутствие параметра штраф
0,25
За отсутствие параметра штраф
0,5
За отсутствие параметра штраф
0,25
За отсутствие параметра штраф
0,25
За отсутствие параметра штраф
0,5
1
1
1
1
1
1
1
1
Подкритерий: техническая реализация
А2О1 Валидность CSS3 (не более двух ошибок валидации)
А2О2
За отсутствие параметра штраф
0,5
Идентичное отображение страниц сайта в браузерах
Firefox, Chrome.
2 ошибки – 1 балл, более 2-х
ошибок – 0 баллов
1
1
БЛОК B – Графический дизайн + Вёрстка веб-страниц CSS3 + HTML5
Время выполнения: 6,5 часов.
Введение
Вам, как перспективному дизайнеру, от руководства поступило техническое задание на разработку
дизайна макета сайта электронной библиотеки колледжа, используя предоставленный шаблон. Заказчик
предоставляет на усмотрение исполнителя выбор цветовой гаммы и графических материалов,
предложенных в подборке заказчиком.
Шаблон дизайн-макета главной страницы
Шаблон дизайн-макета рабочей страницы 1
/Регистрация

Добавить макет страницы входа, регистрации, личного кабинета (то есть создать все
страницы, которые будут использоваться в следующем блоке в php).
Шаблон дизайн-макета мобильной версии сайта
Уточнить мобильная
версия это отдельный
сайт или это
адаптивная страница из
главной
Указать размер
мобильной версии
Инструкции для участников
Ваша задача - разработать графический дизайн (графический макет) сайта электронной библиотеки
для главной страницы и других разделов сайта, используя необходимые материалы и информацию.
Вы должны быть уверены, что выбранные вами материалы в полной мере отражают цель сайта.
Описание задания
Ваша работа должна отвечать следующим требованиям:
1. ·Предоставить Каркас / зонирование главной страницы (разбиение на блоки)
2. ·Весь текст должен быть соответственно однородным, учитывая шрифт, размер и цвет.
3. ·Главное меню(горизонтальное), вспомогательное меню (вертикальное) и подвал должны
соответствовать друг другу.
4. ·Пустое пространство (Whitespace), баланс текста и изображений должны быть обдуманными.
5. ·Вы так же должны разработать логотип сайта для использования корпоративного стиля. Он
должен соответствовать дизайну сайта и представлению о его целях и задачах, размещаться на
каждой странице.
Основные блоки главной страницы
1. Шапка + Логотип + Поисковая строка
2. Главное (горизонтальное меню),
3. Вспомогательное меню (вертикальное),
Форма авторизации,
Рекламный баннерный блок,
Кнопки (Иконки) социальных сетей, нет на макете!!
Слайдер,
Основной контент в формате блога (каталога),
Подвал (информация о владельце и разработчиках сайта, счетчик посещаемости) Должны
ли студенты вносить эту информацию???
Основные блоки рабочей страницы 1
4.
5.
6.
7.
8.
9.
1. Шапка+Лого+Поисковая строка
2. Главное (горизонтальное меню),
3. Вспомогательное меню (вертикальное),
4. Форма авторизации,
5. Кнопки социальных сетей,
6. Основной контент в формате страницы книги
7. Комментарии,
8. Рейтинг книги,
9. Ссылка (кнопка) для скачивания) книги
10. Подвал (информация о владельцах и разработчиках сайта, счетчик посещаемости)
Основные блоки мобильной версии сайта
1. Шапка+Лого,
2. Поисковая строка,
3. Форма авторизации,
4. Главное (горизонтальное меню) - сэндвич,
5. Основной контент - обложка книги и описание,
6. Кнопки социальных сетей,
7. Комментарии,
8. Рейтинг книги,
9. Ссылка (кнопка) для загрузки скачивания?? книги
10. Подвал (информация о владельцах и разработчиках сайта, счетчик посещаемости)
№
В1
Аспект
Комментарий
Подкритерий: соответствие представленному шаблону дизайн-макета
Логотип включает и текст и графический элемент на
главной и рабочей странице
Логотип включает графический элемент на мобильной
версии странице
Полное соответствие представленному макету в целом
Главная страница содержит шапку сайта с логотипом
Главная страница содержит блок горизонтального
меню
Балл
В1O5
Главная страница содержит блок вертикального меню
1
В1O6
В1O7
В1O8
В1O9
Главная
Главная
Главная
Главная
1
1
1
1
В1O1
В1O2
В1O3
В1O4
страница
страница
страница
страница
содержит рекламный блок
содержит блок слайдера
содержит блок контента
содержит блок подвала
1
1
4
1
1
В1O10
В1O11
В1O12
В1O13
В1O14
В1С1
В1O15
В1С2
В1С3
Главная страница содержит функцию авторизации и
регистрации пользователя (Ссылки)
Страница авторизации соответствует макету
Страница регистрации соответствует макету
Корректное отображение шрифта в формах ввода
Рабочая страница содержит предоставленные иконки
социальных сетей не менее 4 на выбор
На главной странице информация содержит заголовок
и подзаголовок (в содержательном модуле).
Наличие поисковой строки
(Текстовое поле и кнопка найти)
Штраф (0.5) за каждый отсутствующий
элемент
1
1
1
Штраф (0.25) за каждый отсутствующий
элемент.
1
Разница между размерами шрифтов
1
Штраф (0.5) за каждый отсутствующий
элемент.
1
Дизайн сайта имеет единообразие в структуре и
оформлении изображений и текста
Пустое пространство используется эффективно для
понимания дизайна.
Каковые современные тенденции?
Использование современных тенденций в веб-дизайне Нужно ли уточнять кто как их
понимает?
Логотип должен соответствовать дизайну и тематике
В1С5
сайта.
В1O16 Рабочая страница содержит блок информационного
контента о книге и комментариях к ней.
В1С4
В1O17
Идентичное отображение страниц сайта в
браузерах Firefox, Chrome.
1
4
2
3
1
1
1
БЛОК C – SERVER-SIDE ПРОГРАММИРОВАНИЕ НА PHP / MYSQL
Время выполнения: 3,5 часа.
ВВЕДЕНИЕ
В настоящее время электронные библиотеки обрели широкую популярность. Для
возможности доступа к книгам в электронном виде было решено создать электронную библиотеку.
ОПИСАНИЕ ЗАДАНИЯ
Реализация функционала пользователей сайта библиотеки колледжа с помощью базы
данных MySQL и PHP, HTML.
Должно быть реализовано 3 роли:
1. Гость
2. Пользователь
3. Администратор
Гость - любой посетитель сайта, который может просмотреть информацию, предложенную
на сайте. Для гостя авторизация не требуется.
Функционал:
1. Просмотр каталога книг, просмотр комментариев к книге.
2. Может зарегистрироваться на сайте, чтобы получить роль «Пользователь» после авторизации
Пользователь – зарегистрированный посетитель сайта, прошедший авторизацию.
Функционал:
1. Просмотр каталога книг, просмотр комментариев к книге.
2. Имеет возможность оставлять комментарии к книгам.
3. Имеет возможность видеть кнопку для скачивания файла книги.
4. Имеет возможность выставить рейтинг книге.
Администратор – зарегистрированный привилегированный пользователь сайта, прошедший
авторизацию
Функционал:
1. Просмотр каталога книг, просмотр комментариев к книге.
2. Имеет возможность добавлять, удалять и редактировать комментарии к книгам.
3. Имеет возможность видеть кнопку для загрузки файла книги
4. Имеет возможность выставить рейтинг книге.
5. Имеет доступ к личному кабинету, где может добавлять, удалять и редактировать информацию о книгах,
загружать (добавлять) файл книги.
6. Имеет доступ к личному кабинету, где может добавлять, удалять и редактировать информацию о
пользователях
№
С1
С1O1
С1O2
С1O3
С1O4
С1O5
С1O6
С1O7
С1O8
Аспект
Комментарий
Реализация функционала пользователей сайта библиотеки
Реализовано хранение информации в базе
данных
Не менее 3 позиций
Заполнение базы данных книгами
Реализована функция авторизации
пользователей
Реализована функция регистрация
пользователей
Реализован функционал личного кабинета
Штраф 1 балл за каждую
администратора
нереализованную функцию
Штраф 1 балл за каждую
нереализованную функцию
Реализован функционал пользователя
согласно заданию
Соблюдение уникальности логина с выводом
сообщения об ошибке
Выводится приветственное сообщение на
экран с данными (логин, автоматически
сгенерированный пароль) один раз, сразу
после регистрации.
Добавление книги должно подтверждаться
уведомлением
Балл
3
1
1
1
6
4
1
1
1
С1O9 Выставление рейтинга книге
С1O10 Сортировка книг по рейтингу
1
С1O11 По умолчанию загружается страница гостя
Шрифты, цвета, оформление текстов,
С1С1
выводимого из таблиц
1
1
2
БЛОК D CLIENT-SIDE ПРОГРАММИРОВАНИЕ - JAVASCRIPT
Время выполнения: один временной блок, 3 часа.
ВВЕДЕНИЕ
Важный элемент для успешной работы сайта – динамический слайдер – анимационный
блок на странице. Его цель – привлечь внимание посетителей сайта.
ОПИСАНИЕ ЗАДАНИЯ
Создание анимированного слайдера для верхней части сайта.
Необходимо создать слайдер (4-5 изображений на усмотрение разработчика).
Требования:
1. Переключение между слайдами должно осуществляться как автоматически, так и в ручном
режиме.
2. Посетитель должен видеть, какой слайд является текущим
3. количество слайдов не должно быть меньше 4
4. формат рисунка на усмотрение участника
5. различные эффекты смены слайдов для каждого третьего второго слайда
6. Показ слайдов начинается не мгновенно, а через 5 секунд после загрузки страницы
7. исполнение модуля с помощью javascript
ВНИМАНИЕ!!! GIF анимация и adobe flash, Silverlight не учитывается
Комментарий
№
Аспект
Балл
D1
Подкритерий: Реализация слайдера
Переключение между слайдами должно
1 балл за реализацию переключения в
D1O1 осуществляться как автоматически, так и в ручном ручном режиме,
режиме.
1 балл - в автоматическом режиме
Посетитель должен видеть, какой слайд является Реализация соответствующего
D1O2
текущим
наглядного элемента
Количество слайдов должно быть не меньше 4
Переход к первому слайду после последнего
D1O4
автоматический
Pre-loader используется при загрузке анимации
Показ слайдов начинается через 5 секунд после
D1O6
загрузки страницы
Автоматическая смена слайдов реализована
D1С7
плавно
D1С1
Подборка картинок соответствует тематике сайта
1
1
D1O3
D1O5
2
2
Например, в виде изображения по
теме сайта
1
1
1
1
Внешнее оформление функционала слайдера
D1С2 (конопок ручного переключения, информация
о текущем слайде)
1