Чемпионат Чувашской Республики WorldSkills Russia 2015

Чемпионат Чувашской Республики WorldSkills Russia
2015
WorldSkills Russia
Версия 1.01
Технический департамент
Конкурсное задание
17 Веб-дизайн
1. ВВЕДЕНИЕ
1.1. Название и описание профессиональной компетенции
1.1.1. Название профессиональной компетенции: Веб-дизайн
1.1.2. Описание профессиональной компетенции:
Веб-дизайн является динамичной, постоянно меняющейся профессией,
сферой деятельности которой является создание и поддержание работы вебстраниц.
1 .2. Область применения
1.2.1. Каждый Эксперт и Участник обязан ознакомиться с данным
Конкурсным заданием.
1.3. Сопроводительная документация
1.3.1. Поскольку данное Конкурсное задание содержит лишь
информацию, относящуюся к соответствующей профессиональной
компетенции, его необходимо использовать совместно со следующими
документами:
• «WorldSkills Russia», Техническое описание. Веб-дизайн;
• «WorldSkills Russia», Правила проведения чемпионата
• Принимающая сторона – Правила техники безопасности и санитарные
нормы.
Чемпионат Чувашской Республики WorldSkills Russia
2015
2. ОПИСАНИЕ ПРОЕКТА И МОДУЛЕЙ
Модуль
Описание
Время
A
Создание 3-х страниц web – сайта и логотипа 2 часа
портала
B
Разработка дизайна web – сайта в 2 часа
тематическом стиле
C
4 часа
Верстка страницы в HTML5/CSS3 из
предоставленных изображений.
Украшение галереи слайдером с эффектной
анимацией. Улучшение дизайна страницы
Разработка сайта для риелторской компании
Разработка
информационного
сайта.
Оформление дизайна сайта через написание
стилевого файла style.css.
Итого
D
Е
F
4 часа
4 часа
4 часа
20 часов
МОДУЛЬ А
День 1
ВСТУПИТЕЛЬНАЯ ЧАСТЬ
ЧЕБОКСАРЫ – современный молодежный город. По инициативе начальника
управления молодежной политики создается городской информационный
портал «МЫ Студенты». Портал станет инструментом для активной,
неравнодушной молодежи, для тех, кто любит свой город и хочет
участвовать в его развитии.
Портал будет предоставлять возможность:
Получать информацию о новостях молодежного портала Чувашской
Республики.


Сообщать о выявленных нарушениях в учебных учреждениях города.

Сообщать о молодежных мероприятиях города.

Предлагать дополнительное трудоустройство во время каникул.

Оценивать работу учебных учреждений.
Чемпионат Чувашской Республики WorldSkills Russia
2015
Подтверждать или опровергать ответы администрации учебных
заведений на актуальные вопросы.

ОПИСАНИЕ ПРОЕКТА И МОДУЛЯ
Ваше задание заключается в разработке дизайна web – сайта и логотипа
портала.
Вам предоставили контент, состоящий из текста, изображений и
вспомогательной графики, для создания сайта. Вам не требуется
использовать все изображения и текст. Ваш дизайн должен определять
количество контента на странице.
Дизайн вашего сайта должен эффективно поддерживать цели сайта – вы
должны выбирать цвета, шрифты, графические элементы исходя из сферы
деятельности организации (например, сине-голубая гамма цветов
ассоциируется с корпоративным стилем).
Дизайн вашего сайта должен использовать принцип единообразия в
структуре страницы: единый размер элементов, одинаковую высоту
навигационных кнопок, оформление заголовков, подзаголовков и основного
текста, оформления ссылок и изображений для всех страниц сайта.
Модуль А включает в себя создание трёх страниц веб-сайта и логотипа для
портала “МЫ Студенты ”.
Дизайн логотипа для портала “ МЫ Студенты ” должен отражать цели и
направленность деятельности организации.
Логотип должен быть частью дизайна с учётом концепции (общего
представления) веб-сайта.

Ваш логотип должен раскрывать цели и направленность деятельности
портала.

Логотип должен включать в себя текст “ МЫ Студенты ” и хотя бы один
дополнительный графический элемент

Главная страница должна включать следующие элементы:

Логотип портала “ МЫ Студенты ”.
Ссылку на страницу с регистрацией в проекте.

Возможность для входа в систему (поля для ввода имени пользователя
и пароля, кнопка).

Чемпионат Чувашской Республики WorldSkills Russia
2015
Навигация по порталу должна включать:





Главная
Карта проблем
Результаты
Новости
О портале
В структуре
информация:



главной
страницы
должна
быть
отражена
мобильная
о возможностях портала
о новостях портала
о результатах работы портала
Каждый блок должен включать в себя:




Изображение
Кнопку перехода
Заголовок
Описание
Страница регистрации в данном проекте
следующие элементы:






должна включать в себя
Логотип портала “МЫ Студенты ”.
Следующие поля для ввода:
Электронный адрес
Пароль и подтверждение пароля
Указание Имя и Фамилии
Кнопка - Зарегистрироваться
Страница Результаты должна включать следующие элементы:


Логотип портала “МЫ Студенты ”.
Название страницы – Результаты работы портала.
Страница должна содержать информацию о не менее трех решенных
проблемах. Блоки информации, дающие представление о проблеме:

Фото проблемы;

Адрес (ссылка);

Категория проблемы (мусор в зоне отдыха, шумные мероприятия, не
хватка спортивных секций, проблемы с учебой и т.п.);

Дата публикации.

Чемпионат Чувашской Республики WorldSkills Russia
2015
Информация внутри блока должна быть представлена с иерархически
(заголовок, подзаголовок).

Функция комментирования проблемы, где пользователи могут
оставлять комментарии и вопросы, касающиеся данной проблемы (текстовое
поле и кнопка).

Опции, позволяющие поделиться информацией в социальных сетях,
таких как Facebook, Twitter and Google+.

Используйте предоставленные изображения. (content/icon)

ИНСТРУКЦИИ ДЛЯ УЧАСТНИКА
Сохраняйте свои работы в специальных папках на сервере, так чтобы
«индексные» файлы были в «корне» (day1_xx\index.html), а все исходные
файлы в отдельной папке (day1_part1_xx\source_files_xx\):






day1_xx
day2_part1_xx
day2_part2_xx
day3_part1_xx
day3_part2_xx
где «хх» - номер рабочего места. Только файлы, которые расположены на
сервере будут учитываться экспертами.

Ваша работа должна состоять из трех файлов. (PNG, JPG)
Один отдельный файл, содержащий дизайн главной страницы “МЫ
Студенты ”.

Один отдельный файл, содержащий дизайн страницы регистрации в
проекте.

Один отдельный файл, содержащий дизайн страницы с результатами
работы портала.

Файл с Вашей главной страницей должен называться “XX_index” пример:
XX_index.png

Файл с Вашей страницей регистрации в проекте должен называться
“XX_portal_enrollment” пример: XX_project_enrollment.jpg

Файл с Вашей страницей с результатами работы портала должен
называться “XX_portal_results” пример: XX_ portal_results. jpg

Сохраните исходные файлы изображений в папке "XX_source_files" внутри
папки "XX_Module_A". Исходные файлы – это файлы, содержащие слои.
(PSD, XCF, ID).

Чемпионат Чувашской Республики WorldSkills Russia
2015
МОДУЛЬ B
День 1
ВСТУПИТЕЛЬНАЯ ЧАСТЬ
Имя легендарного земляка Андриана Григорьевича Николаева широко
известно всем жителям Чувашии, в его честь названы улицы, парки, школа, а
в его родном селе открыт музей космонавтики. А.Г.Николаев - советский
космонавт № 3, дважды Герой Советского Союза, Генерал-майор авиации,
первый космонавт, который работал на орбите без скафандра, первый
космонавт, который участвовал в военном эксперименте в космосе. Андриан
Григорьевич родился в селе Шоршелы Чувашской Республики.
ОПИСАНИЕ ПРОЕКТА И МОДУЛЯ
Ваше задание заключается в разработке дизайна web – сайта для знакомства с
биографией и героическим жизненным путём космонавта А.Г.Николаева.
Вам следует создать тематический сайт в космическом стиле.
Вам предоставили контент, состоящий из текста, изображений и
вспомогательной графики, для создания сайта. Вам не требуется
использовать все изображения и текст. Ваш дизайн должен определять
количество контента на странице.
Дизайн вашего сайта должен использовать принцип единообразия в
структуре страницы: единый размер элементов, одинаковую высоту
навигационных кнопок, оформление заголовков, подзаголовков и основного
текста, оформления ссылок и изображений для всех страниц сайта.
Структура содержания сайта:







Главная страница
Биография
Звания и награды
Первый полет
Второй полет
Книги о А.Г.Николаеве
Мемориальный комплекс
ИНСТРУКЦИИ ДЛЯ УЧАСТНИКА

Сохраняйте свои работы в специальных папках на сервере, так чтобы
«индексные» файлы были в «корне» (day1_xx\index.html), а все исходные
файлы в отдельной папке (day1_part2_xx\source_files_xx\):
 day1_xx
Чемпионат Чувашской Республики WorldSkills Russia




2015
day2_part1_xx
day2_part2_xx
day3_part1_xx
day3_part2_xx
где «хх» - номер рабочего места. Только файлы, которые расположены на
сервере будут учитываться экспертами.

Ваша работа должна состоять из нескольких файлов (PNG, JPG) всех
страниц сайта.
МОДУЛЬ C
День 2
ВСТУПИТЕЛЬНАЯ ЧАСТЬ
Дизайнер создал концепцию веб-страницы для вымышленного онлайнмагазина ШКОЛЬНЫХ ПРИНАДЛЕЖНОСТЕЙ. Дизайн автоматически
адаптируется под ширину демонстрационного окна в зависимости от
устройства пользователя и размеров браузера. В этом задании от Вас
требуется сверстать страницу в HTML5/CSS3 из предоставленных
изображений.
ОПИСАНИЕ ПРОЕКТА И МОДУЛЯ
Вы найдёте скриншоты под именами 1280.png, 720.png и 480.png, которые
показывают, как дизайн выглядит при ширине экрана 1280px, 720px и 480px.
Контрольная точка различий между узким и широким экраном составляет
800px.
Дизайнер также предоставил 1280-grid.png, чтобы показать, как разметка
смотрится в системе 12-ти колоночная сетка (columns grid).
Обратите внимание на дополнительные изображения, которые показывают,
как должны выглядеть некоторые блоки при наведении, фокусе и т.д.
Все изменения должны происходить плавно, без «дерганий».
Используемые шрифты: Veronica script One, Ekaterina Velikaya One и
Rosamunda Two.
ИНСТРУКЦИИ ДЛЯ УЧАСТНИКА
Чемпионат Чувашской Республики WorldSkills Russia
2015
Сохраняйте свои работы в специальных папках на сервере, так чтобы
«индексные» файлы были в «корне» (day2_xx\index.html), а все исходные
файлы в отдельной папке (day2_part1_xx\source_files_xx\):






day1_xx
day2_part1_xx
day2_part2_xx
day3_part1_xx
day3_part2_xx
где «хх» - номер рабочего места. Только файлы, которые расположены на
сервере будут учитываться экспертами.

Ваша работа должна состоять из html-фала index.html
МОДУЛЬ D
День 2
ВСТУПИТЕЛЬНАЯ ЧАСТЬ
Для города. Чебоксары был разработан макет сайта с каталогом памятников и
достопримечательностей города. Заказчик попросил украсить галерею
слайдером с эффектной анимацией. Также вы получили предложение
улучшить дизайн страницы в фирменных цветах города Чебоксары,
используя официальную символику города.
ОПИСАНИЕ ПРОЕКТА И МОДУЛЯ
Редактировать можно только заранее подготовленный файл index.html
(остальные будут восстановлены перед проверкой экспертами), но можно
подключать любые библиотеки и css файлы.
Во
время
разработки,
пожалуйста,
обращайте
внимание
работоспособность слайдера и соответствию остальному дизайну.
на
Законченный CSS файл должен соответствовать спецификациям CSS3.
Сайт должен выглядеть одинаково как в Google Chrome, так и в Firefox.
ИНСТРУКЦИИ ДЛЯ УЧАСТНИКА

Сохраняйте свои работы в специальных папках на сервере, так чтобы
«индексные» файлы были в «корне» (day2_xx\index.html), а все исходные
файлы в отдельной папке (day2_part2_xx\source_files_xx\):
 day1_xx
 day2_part1_xx
Чемпионат Чувашской Республики WorldSkills Russia
2015
 day2_part2_xx
 day3_part1_xx
 day3_part2_xx
где «хх» - номер рабочего места. Только файлы, которые расположены на
сервере будут учитываться экспертами.

Ваша работа должна состоять из CSS-файла style.css
МОДУЛЬ E
День 3
ВСТУПИТЕЛЬНАЯ ЧАСТЬ
Риэлторской компании требуется разработать сайт.
Задачи сайта:
1.
Информирование посетителей о районе и предложениях о продаже
2.
Демонстрация интерактивной карты района
3.
Возможность расчета ежемесячного платежа по ипотеке
4.
Возможность отправки сообщений на почту риэлторской компании
ОПИСАНИЕ ПРОЕКТА И МОДУЛЯ
Сайт должен содержать следующие страницы:
1.
2.


3.
4.
Главная страница (1);
Страница «О районе» (2);
Ссылка на страницу «Карта района» (3);
Ссылка на страницу «Предложения о продаже» (4);
Страница «Ипотечный калькулятор»(5);
Страница «Контакты» (6);
Правила работы Сайта:
1.
Главная страница (1) содержит:
1.1.Баннер с эффектом «Параллакс»
1.2.Текстовое описание компании
1.3.Меню (пункты)

Главная

О районе

Ссылка на страницу 3 «Карта района»

Ссылка на страницу 4 «Предложения о продаже»

Калькулятор

Контакты
Чемпионат Чувашской Республики WorldSkills Russia
2015
2.



Страница 2 «О районе» содержит:
Шапка
Описание района
Блок текстовой и графической информации
3.


4.

дом;
Страница 3 «Предложения о продаже» содержит:
Блок текстовой и графической информации
Слайд шоу с предложениями о продаже
Страница 4 «Карта района» содержит:
Интерактивная карта с всплывающими подсказками при наведении на
5.
Страница 5 «Ипотечный калькулятор содержит»:
 Форма для заполнения:
 Стоимость квартиры
 Первоначальный взнос
 Процентная ставка
 Срок кредита

Анимированный график и таблица ежегодных выплат с выводом
информации о расчетах.
6.






Страница 6 «Контакты содержит»:
Контактная информация
Форма обратной связи:
Имя
E-mail
Телефон
Текст сообщения
7. Пояснение к заданию

Требуется разработать дизайн-макет главной и последующих страниц.

Параллакс-эффект
– это специальная техника, когда фоновое
изображение в перспективе двигается медленнее, чем элементы переднего
плана. Заказчик требует чтобы двигался только фон при движении мышкой в
области банера. Фото лежит в папке заданий – parallax.jpg

Текст для страницы «описание района» находится в папке задания

Карта располагается в папке с заданием под именем map.jpg.

При наведении на какие-либо дома, расположенные на карте требуется
вывести номер дома и количество этажей (любые значения), вывести как
минимум 3 всплывающие подсказки.

Форма обратной связи должна отправлять сообщения на e-mail
администратора.
Чемпионат Чувашской Республики WorldSkills Russia
2015

На странице «Предложения о продаже» требуется

В блок текстовой и графической информации все данные загружать из
файлов программно (на 3 квартиры).

Фотографии и тексты находятся в папке с заданиеми → «Квартиры»

Из фотографий для каждой квартиры сделать слайдшоу с применением
различных эффектов перехода (Фотографии с префиксом kv1 – относятся к
квартире 1)

Расчет ежемесячного платежа происходит по формуле:
К примеру если брать кредит 120 тыс на 12 месяцев по ставке 10%, то
постоянная часть дифференцированного платежа будет равна
120 000 /12 = 10 000 рублей.
Теперь рассчитаем переменную часть, которая зависит от суммы
основного долга. Сумма основного долга также является переменной во
времени и зависит от номера платежа.
Вот формула переменной части
Эта часть идет в погашение процентов
Рассчитаем сумму в погашение процентов для первого платежа
120 000 * 10/(100 * 12) = 1000 рублей.
Первый платеж по дифференцированному займу таким образом будет
равен постоянная часть + переменная часть =
10 тыс + 1 тыс = 11 тыс. рублей.
Рассчитаем
второй
платеж
по
кредиту.
Постоянная часть у нас получится та же, 10 тыс. рублей.
Рассчитаем сумму основного долга после первого платежа
120 тыс – 10 тыс = 110 тыс.
Исходя из новой суммы основного долга посчитаем проценты по
кредиту
110 000 * 10/(100 * 12) = 916,67
Второй платеж по дифференцированному займу равен
10000 + 916.67 = 10916.67
Далее можно продолжить аналогично – посчитать сумму основного
долга для третьего платежа и рассчитать третий платеж.
Текст и изображения для работы с сайта: http://www.but-park.ru/
ИНСТРУКЦИИ ДЛЯ УЧАСТНИКА
Чемпионат Чувашской Республики WorldSkills Russia
2015

Сохраняйте свои работы в специальных папках на сервере, так чтобы
«индексные» файлы были в «корне» (day3_xx\index.html), а все исходные
файлы в отдельной папке (day3_part2_xx\source_files_xx\):





day1_xx
day2_part1_xx
day2_part2_xx
day3_part1_xx
day3_part2_xx
где «хх» - номер рабочего места. Только файлы, которые расположены на
сервере будут учитываться экспертами.
МОДУЛЬ F
День 3
ВСТУПИТЕЛЬНАЯ ЧАСТЬ
Столицу Чувашии называют «Жемчужиной Поволжья». «Чебоксары –
лучший город России! И это не только наше мнение. Чебоксары имеют свой
информационный сайт. Однако, предлагаем Вам разработать другую версию
сайта г. Чебоксары.
Имеется шаблон для создания сайта, исходные тексты, фотографии. Ваша
работа состоит в том, чтобы на основе шаблона и исходных материалов,
находящихся в папке Site, разработать сайт «Чебоксары – Жемчужина
Поволжья». Дизайн сайт должен быть оформленным через написание
стилевого файла style.css.
ОПИСАНИЕ ПРОЕКТА И МОДУЛЯ
1. В папке Site имеется шаблон index.php для создания сайта
2. Используя текстовые файлы и рисунки (выборочно) из папки TEXT
создайте 10 .html файлов по следующему шаблону:
<h1-h6>Заголовок</h1-h6>
<p></p>
…
…
...
3. При просмотре файла в браузере при ширине окна в 600 рх файл должен
занимать не более двух страниц
4.
Созданные файлы сохраните в папке files
Чемпионат Чувашской Республики WorldSkills Russia
2015
5. Создайте файл vvedenie.html, в котором дается краткое описание г.
Чебоксары
6. Используя средства PHP на основе файлов папки files разработайте
сайт, в котором:

в блоке left автоматически создается меню из заголовков файлов папки
files, которые являются ссылками на соответствующие файлы

при выборе пункта меню содержимое файла выводится в блоке content

при добавлении файлов, соответствующих вышеприведенному шаблону,
заголовки файлов автоматически появляются в меню сайта

при открытии сайта содержимое файла vvedenie.html выводится на
главной странице в блоке content

в меню должен быть пункт «Главная», при выборе которого в блоке
content выводится содержимое файла vvedenie.html

в меню не должен присутствовать заголовок файла vvedenie.html

автоматически создается меню в блоке right на основе файлов папки
NEWS:

выводится заголовок файла (не имя файла)
 выводятся первые 50 символов файла, затем слово «далее», которое
является ссылкой на основной файл в папке NEWS

основной файл выводится в новом окне
7. В блок images случайным образом
фотографии из папки images
вставьте горизонтально три
◦ при обновлении страницы фотографии случайным образом должны
заменяться на новые из папки images
8.
Создайте в отдельном файле форму для голосования.
Результаты голосования сохраните в текстовом файле
Предусмотрите возможность вывода на экран результатов голосования
9.
Создайте гостевую книгу
Отзывы сохраните в текстовом файле
Предусмотрите возможность вывода на экран записей из гостевой книги.
10. Создайте страницу «Контакты», которая содержит ваши контактные
данные
11. Оформите стилевой файл style.css
12. Проверьте работу всех ссылок
Чемпионат Чувашской Республики WorldSkills Russia
2015
13. Ваше приложение должно быть совместимо с браузерами Firefox и
Internet Explorer.
ИНСТРУКЦИИ ДЛЯ УЧАСТНИКА

Сохраняйте свои работы в специальных папках на сервере, так чтобы
«индексные» файлы были в «корне» (day3_xx\index.html), а все исходные
файлы в отдельной папке (day3_part2_xx\source_files_xx\):

day1_xx

day2_part1_xx

day2_part2_xx

day3_part1_xx

day3_part2_xx
где «хх» - номер рабочего места. Только файлы, которые расположены на
сервере будут учитываться экспертами.
5. ОЦЕНКА
5.1.Оценка выполнения практического задания выполняется по объективным
и субъективным критериям. Общая суммарная оценка критериев -100 баллов
Критерий
Графический дизайн
страниц
Верстка страниц
Программирование на
стороне клиента
Программирование на
стороне сервера
Анимация
Итого
Субъективная
(если это
применимо)
15
Оценки
Объективная
Общая
5
20
5
5
15
20
20
25
5
20
25
5
35
5
65
10
100