Программирование на стороне клиента
Для отборочных соревнований по методике
WorldSkills Russia
Компетенции Веб-дизайн
Общие данные
Задание рассчитано на 2 дня, три временных блока с перерывом на обед. Каждый временной блок рассчитан на выполнение одного модуля. Таким образом, задание состоит из трех модулей и охватывает следующие технологии.
● Модуль 1 – дизайн (10 баллов) и верстка (35 баллов);
● Модуль 2 - программирование на стороне клиента (25 баллов);
● Модуль 3 - программирование на стороне сервера (40 баллов);
| День | № | Критерий | Объект | Субъект | Сумма |
| А | Дизайн | ||||
| B | Верстка | ||||
| C | Программирование на стороне клиента | ||||
| D | Программирование на стороне сервера | ||||
| Итого |
Порядок выполнения модулей очень важен, так как результаты работы предыдущего модуля используются в следующем.
Модуль 1
Графический дизайн + Верстка
Время выполнения: 4 часа
Выходные данные:
Набор файлов в формате HTML и CSS
Задание:
Вам предоставлены: логотип и название фирмы по продаже товаров, прототипы двух страниц, краткое описание фирмы, список товаров с фотографиями и описанием.
Ваша задача - разработать сайт для интернет-магазина «Эгоист» по продаже чая, кофе и сопутствующих товаров, используя вводные данные и требования. Дизайн вашего сайта должен эффективно поддерживать цели сайта – вы должны выбирать цвета, шрифты, графические элементы исходя из сферы деятельности организации (например, сине-голубая гамма цветов ассоциируется с корпоративным стилем).
Дизайн сайта должен использовать принцип единообразия в структуре страницы: единый размер элементов, одинаковую высоту навигационных кнопок, оформление заголовков, подзаголовков и основного текста, оформления ссылок и изображений для всех страниц сайта.
Требуется разработать сайт в соответствии с предоставленными прототипами страниц. Страницы должны быть сверстаны с учетом просмотра её на различных устройствах с разными разрешениями, то есть:
● иметь резиновую верстку для просмотра на компьютере при различных разрешениях до 1024px;
● иметь мобильную версию для просмотра на телефонах и планшетах вплоть до минимального разрешения – 320px. Специальных требований по расположению элементов на странице не предъявляется, но необходимо учитывать разрешение и способ навигации по странице.
Обязательные элементы сайта:
1. Логотип;
2. Шапка
3. Вертикальное меню (категории товаров);
4. Подвал;
5. Таблица вывода товаров.
| № | Критерий | Балл |
| A1 | Дизайн | |
| O1 | Все основные цвета предоставленного логотипа используются в дизайне сайта | |
| O2 | Выбрано оптимальное соотношение яркости между текстом и фоном | |
| O3 | Однородность текста и равномерность распределения пустых мест | |
| O4 | Все страницы сайта имеют одинаковый пользовательский интерфейс и выполнены в одном стиле (минус 0.5 за нарушение) | |
| S1 | Дизайн сайта соответствует профилю деятельности фирмы | |
| S2 | Общее впечатление о дизайне сайта | |
| B1 | Соответствие прототипам | |
| O1 | Количество страниц сайта соответствует количеству прототипов | |
| O3 | Шапка соответствует прототипу | |
| O4 | Вертикальное меню (категории товаров) соответствует прототипу | |
| O5 | Отображение товаров соответствует представленному прототипу | |
| O6 | Подвал соответствуют представленному прототипу | |
| O7 | Заглушка вместо баннера встроена в сайт в соответствии с пртотипом | |
| O8 | Стили для сайта хранятся в отдельном файле (нет inline стилей) | |
| O9 | Идентичное отображение страниц сайта в браузерах Firefox, Chrome, IE11 (минус 0.5 за отличие) | |
| B2 | Верстка | |
| O1 | Применяется блочная верстка | |
| O2 | Изменение разрешения не создает горизонтальных скроллбаров | |
| O3 | У всех интеркативных элементов на странице присутствуют три состояния: покой, наведение, нажатие | |
| O4 | Валидность HTML (минус 0.5 за ошибку валидации) | |
| O5 | Валидность CSS (минус 0.5 за ошибку валидации) | |
| S1 | Общее впечатление и удобство использования мобильной версии | |
| Итого |
Модуль 2
Программирование на стороне клиента
Время выполнения: 3 часа
Результат:
Сайт из Модуля 1 с встроенным в старницы баннером.
Задача:
Ваша задача – создать анимированный баннер, используя HTML5, CSS3 и JavaScript, для рекламы и повышения прибыли от сайта, разработанного в модуле 1. Вам необходимо использовать один из двух следующих размеров:
● Небоскреб – 120х600
● Широкий небоскреб – 160х600
Требования к баннеру:
● Использовать логотип фирмы
● Использовать минимум одну картинку
● Реализовать интерактивные функциональные возможности (при наведении, при нажатии и т.д.)
● Предусмотреть кнопку для перехода на страницу рекламируемого товара. Страница должна открываться в новой вкладке
Требования к анимации:
● Реализовать анимацию, длительностью не менее 15 секунд
● Анимация должна состоять минимум из трех сцен
● На каждой сцене должно быть не менее двух активных, взаимодействующих объектов
Дополнительные условия:
использовать только HTML5, CSS3, js. Можно создавать собственные графические объекты, но нельзя использовать gif-анимацию или Adobe Flash.
| № | Критерий | Балл |
| C1 | Соответствие требованиям | |
| O1 | Код js выделен в отдельный файл | 0.5 |
| O2 | Размер баннера соответствует одному из предложенных вариантов | 0.5 |
| O3 | В баннере используется логотип фирмы | 0.5 |
| O4 | В баннере используется минимум одна картинка | 0.5 |
| O5 | Присутствует ссылка для перехода на сайт и открывается в новой вкладке | |
| O6 | Общая длительность анимации не менее 15 секунд | |
| O7 | Использовано минимум 3 сцены с минимум двумя взаимодейтсвующими объектами на каждой | |
| S1 | Баннер выполняет свою роль - рекламирует и способствует повышению прибыли от сайта, побуждает к действию | |
| C2 | Функциональность и оригинальность | |
| O1 | Быстродействие, отсутствие «тормозов» и «дерганий» анимации | |
| O2 | Реализация простой интерактивности, помимо перехода по ссылке | |
| S1 | Сложность и оригинальность интерактивных возможностей | |
| S2 | Общая привлекательность баннера | |
| Итого |
Модуль 3