Национального чемпионата WorldSkills Russia

Национального чемпионата WorldSkills Russia

по компетенции Веб­дизайн

Соревнование проводится в течение трех дней и состоит из последовательного выполнения шести разных модулей с заданием: по два модуля в день. Оценка результата работы конкурсантов проводится экспертами каждый день, окончательный результат доводится до участников в конце соревнований. Итоговая оценка работы каждого участника формируется согласно следующим критериям.

A.Графический дизайн.

B. Верстка HTML.

C. Программирование на стороне сервера.

D.Программирование на стороне клиента.

Общая структура модулей с заданием и их распределение по критериям оценки.

День	Критерий	Максимальный балл	Время, ч.
	Модуль 1. Графический дизайн. Разработка дизайна страниц сайта для компании
Модуль 2. Графический дизайн. Разработка дизайна страницы в стиле «Целевая страница»
	Модуль 3. Верстка HTML. Верстка HTML5/CSS3 по дизайн-макету
Модуль 4. Верстка HTML. Восстановление CSS по скриншоту
	Модуль 5. Программирование на стороне сервера. Автоматизация работы сайта средствами РНР
Модуль 6. Программирование на стороне клиента. Анимированный баннер
Итого

Внимание!

Исходные данные для модулей 1, 3, 4 и 6 будут выбраны на собрании экспертов за день до начала соревнований путем поиска подходящего сайта в Интернете. Также на собрании все модули задания (тема, пункты задания и критерии) будут изменены не менее чем на 30%.

Модуль 1. Графический дизайн.

Разработка дизайна страниц сайта для компании

Вступительная часть

Компания ООО «Товары и услуги», старейшая и известнейшая в своем регионе, решила идти в ногу со временем и наконец-то сделать себе Веб-сайт. Этому немало способствовал приход нового директора по маркетингу фирмы, который разработал структуру двух страниц. Непосредственно верстка и разработка HTML-страниц также будут осуществлена внутренними ресурсами компании.

Задание

Разработать дизайн для сайта компании, используя вводные данные и требования. Дизайн вашего сайта должен эффективно поддерживать цели сайта – вы должны выбирать цвета, шрифты, графические элементы исходя из сферы деятельности организации (например, сине-голубая гамма цветов ассоциируется с корпоративным стилем).

Также, дизайн должен использовать принцип единообразия в структуре страниц:

- единый размер элементов;

- одинаковая высота навигационных кнопок;

- единообразное оформление заголовков, подзаголовков и основного текста;

- единообразное оформление ссылок и изображений для всех страниц сайта.

Дизайн главной страницы и страницы-каталога с набором товаров или услуг должен полностью соответствовать предоставленным прототипами страниц (Mockup).

К дизайну мобильной версии для просмотра на телефонах с touchscreen и разрешением 320х480 специальных требований по расположению элементов на странице не предъявляется, но необходимо учитывать размер экрана и способ навигации по странице.

Вводные данные

Вам предоставляется:

- название и уточненная сфера деятельности компании;

- логотип фирмы;

- краткое описание компании;

- список товаров или услуг, их краткое описание и фотографии;

- структура двух страниц (главной и страницы с товарами или услугами);

- набор случайных изображений и текстов по сфере деятельности компании;

- изображения стандартных социальных сервисов;

- шрифты;

- вспомогательная графика.

Не требуется использовать все изображения и текст. Текст можно писать самостоятельно.

Выходные данные

Три файла формата PSD с дизайн-макетами страниц сайта: главная страница, страница с набором товаров или услуг, мобильная версия главной страницы.

Время выполнения

3 часа

Модуль 1. Графический дизайн. Разработка дизайна страниц сайта для компании

Субкритерии и аспекты оценки

№	Аспект	Максимальный балл
А1	Соответствие страниц прототипам
А1О1	Структура и взаимное расположение элементов соответствуют макету главной страницы
А1О2	Структура и взаимное расположение элементов соответствуют макету страницы с товарами/услугами
А2	Дизайн основных страниц сайта
А2О1	Цветовое решение сайта использует все цвета логотипа (базовые цвета без учета оттенков)	0.5
А2О2	Все страницы имеют одинаковый графический пользовательский интерфейс	0.5
А2О3	Однотипные элементы макета (ссылки, кнопки и т.д.) оформлены одинаково	0.5
А2С1	На макетах размещен «осмысленный» контент	0.25
А2С2	Дизайн сайта соответствует области деятельности компании	0.5
А2С3	Дизайн всех страниц согласован между собой	0.5
А2С4	Дизайн привлекателен и гармоничен
А2С5	Графическое оформление элементов страницы (блоков) подчеркивает их взаимосвязь и улучшает восприятие информации	0.5
А2С6	Оптимальное соотношение яркости (контраст) между текстом и фоном	0.5
А2С7	Однородность текста и равномерность распределения пустых мест на всем сайте	0.5
А3	Дизайн мобильной страницы сайта
А3О1	На мобильном макете представлены все блоки главной страницы	0.5
А3О2	Дизайн согласован с основной версией сайта	0.5
А3О3	Размер макета соответствует требованиям задания	0.5
А3С1	На макете размещен «осмысленный» контент	0.25
А3С2	Дизайн привлекателен и гармоничен	1.5
А3С3	Дизайн удобен для использования на мобильном телефоне	0.5
Итого максимально:

Вступительная часть

Москва – один из красивейших городов нашей родины. В нем огромное количество памятников архитектуры, зеленых парков, современных зданий, достопримечательностей, памятников и музеев. Не секрет, что в столицу ежегодно приезжает масса туристов, со всех уголков мира. И каждый хочет увидеть в этом городе что-то свое, интересное, запоминающееся.

Задание

Разработать дизайн «Целевой страницы» для компании, предоставляющей услуги персональных и групповых гидов по Москве. особенностью компании является возможность разработки и проведения индивидуальных экскурсий на заданную тему.

Дизайн сайта должен эффективно поддерживать цели сайта – вы должны выбирать цвета, шрифты, графические элементы исходя из тематики.

Дизайн вашего сайта должен использовать принцип единообразия в структуре страницы:

- единый размер элементов;

- одинаковая высота навигационных кнопок;

- единообразное оформление заголовков, подзаголовков и основного текста;

- единообразное оформление ссылок и изображений для всех страниц сайта.

Подробная информация о принципах дизайна страниц в стиле «Целевая страница» размещена в Интернет по адресу http://habrahabr.ru/post/143923/.

Вводные данные

Предоставляется текст, изображения, шрифты и вспомогательная графика для создания страницы. Не требуется использовать все изображения и текст. Дизайн должен определять количество контента на странице.

Выходные данные

Файл landing_page.html, а также набор других необходимых для корректного отображения страницы в браузерах файлов.

Время выполнения

3 часа

Модуль 2. Графический дизайн. разработка дизайна страницы в стиле «Целевая страница».

Субкритерии и аспекты оценки

№	Аспект	Максимальный балл
А4	Влияние на действие пользователя
А4О1	Наличие дополнительной информации помогающей пользователю предпринять необходимое действие (текстовые блоки или ссылки с уточняющей информацией)	0.5
А4О2	Использование графических элементов, помогающих пользователю предпринять необходимое действие (наличие стрелки, пути перемещения, маркеры, яркие картинки и т.п.)	0.5
А4О3	Наличие графических и/или текстовых объектов, позволяющих усилить интерес пользователя предпринять необходимое действие (время акции, скидки, количество оставшихся товаров и т.п.)	0.5
А4О4	Наличие на странице элементов доверия (комментарии положительных отзывов, сертификация, счетчики покупок)	0.5
А4О5	Использование релевантных слов в заголовках	0.5
А4С1	Использование простых и коротких заголовков, привлекающих внимание пользователя (не более 7 слов, включая предлоги)	0.25
А5	Структура и элементы страницы
А5О1	Наличие иконок социальных сетей	0.25
А5О2	Наличие на страницы формы комментариев	0.5
А5О3	Наличие на странице функциональных кнопок (ссылок) – не более двух	0.5
А5С1	Наличие и качество главного элемента на странице, цель которого заключается в том, что пользователю необходимо выполнить одно единственное действие
А5С2	Каждый элемент страницы подталкивает пользователя совершить необходимое действие (четкая взаимосвязь блоков страницы. Траектория взгляда должна быть хорошо продуманной)
А6	Дизайн
А6О1	Контент на странице соответствует теме сайта	0.5
А6О2	Не менее четырех визуально разделенных областей	0.75
А6О3	Весь текст выделяется (в том числе и на кнопках)	0.25
А6С1	Контрастная цветовая гамма (основные элементы выделены яркими цветами)	0.5
А6С2	Хорошая компоновка графики и текста	0.25
А6С3	Цветовая гамма и дизайн соответствует тематике сайта
А6С4	Страница не перегружена блоками	0.5
А6С5	Однородность текста и равномерное распределение свободного пространства	0.25
Итого максимально:

Вступительная часть

Профессиональный дизайнер создал концепцию веб-страницы для вымышленного онлайн-магазина музыкальных дисков. Дизайн автоматически адаптируется под ширину демонстрационного окна в зависимости от устройства пользователя и размеров браузера.

Задание

Сверстать соответствующую представленному дизайн-макету страницу в HTML5/CSS3. Весь текст на странице сайта должен быть выделяемым курсором мыши.

Окончательная верстка должна быть адаптивной: дизайн страницы автоматически адаптируется под ширину окно отображения в зависимости от устройства пользователя и размеров браузера. Все изменения на странице должны происходить плавно, без «дерганий».

В скриншотах следует обращать особое внимание на дополнительные изображения, которые показывают, как должны выглядеть некоторые блоки при наведении, фокусе и т.д.

Вводные Данные

Предоставляются готовые скриншоты, показывающие как страница выглядит при ширинах экрана 1280, 720 и 480px. Контрольная точка различий между узким и широким экраном составляет 800px.

Дополнительно также предоставляется скриншот показывающий, как выглядит страница при ширине 1280px с разметкой в системе 12-columns grid.

Выходные Данные

Файл design_page.html, а также набор других необходимых для корректного отображения страницы в браузерах файлов.

Время Выполнения

3 часа

Модуль 3. «Верстка HTML. верстка HTML5/CSS3 по дизайн-макету».

Субкритерии и аспекты оценки

№	Аспект	Максимальный балл
B1	Соответствие страницы макету
B1O1	Разметка макета «Широкий экран» соответствует предоставленному скриншоту
B1O2	Разметка макета «Узкий экран» соответствует предоставленному скриншоту
B1O3	Разметка макета «Мобильный экран» соответствует предоставленному скриншоту
B1O4	Страница выглядит абсолютно одинаково в браузерах Firefox и Chrome
B2	Верстка страницы
B2O1	Валидный код HTML. Штраф -0.25 за каждый тип ошибки.
B2O2	Используется блочная структура на основе тегов div
B2O3	Весь текст выделяется, включая текст «ON SALE» и «Preview»
B2O4	Все тени и закруглённые углы реализованы с помощью CSS3
B2O5	Все кнопки, включая «Add to Cart»и «Play», созданы с использованием HTML-элементов и CSS (не картинки)
B2C1	Макет в момент изменения размеров окна изменяется плавно
B3	Интерактивные эффекты
B3O1	При нажатии на верхнюю правую иконку (Title bar) на узком и мобильном экране происходит переход на нижнее навигационное меню. При нажатии на кнопку «Back to Top» скроллинг возвращается наверх.
B3O2	Реализована контрольная точка различия между узким и широким экраном 800px.
Итого максимально:

Указан максимальный балл. Аспекты.

O – объективные,

С – субъективные.

Вступительная часть

При разработке сайта для ОЧЕНЬ ВАЖНОГО ПРОЕКТА произошел компьютерный сбой, в результате чего часть файлов оказалось потерянной. К счастью, исходные материалы проекта и эскиз сайта были сохранены в архиве. Необходимо срочно восстановить сайт, не трогая существующие файлы. По возможности можно заодно и несколько улучшить визуальный вид страницы за счет изменения гарнитуры используемых шрифтов и добавления эффектов.

Задание

Необходимо воссоздать потерянный CSS-файл, используя структуру оставшихся HTML-файлов и снимка экрана с данным сайтом, когда его структура была еще цела.

К сожалению, компьютерный сбой затронул и скриншот – поэтому информация на нем также частично потеряна.

Редактировать можно только заранее подготовленный файл style.css (остальные будут восстановлены перед проверкой экспертами).

Возможно создавать папки, добавлять в них и ранее существующие любые файлы, но их использование возможно только через восстанавливаемый CSS-файл.

Необходимо обращать внимание на такие аспекты как стиль, цвет, схема разметки, типография, диаграммы, изображения, анимационные эффекты и user-friendly интерфейс в вашем проекте.

Вводные данные

Сайт в формате HTML с удаленным CSS-файлом и частичный скриншот данного сайта до момента удаления CSS, шрифты, изображения.

Выходные Данные

Соответствующий спецификациям CSS3 CSS-файл.

Время Выполнения

3 часа

Модуль 4. «ВерсткА HTML. Восстановление CSS по скриншоту».

Субкритерии и аспекты оценки

№	Аспект	Максимальный балл
B4	Идентичность верстки скриншоту
В4О1	Размер и расположение «Шапки», а также взаимное расположение и внешний вид ее элементов соответствуют скриншоту (используются понятия «над», «в», «под», «слева», «справа» и т.д.). Штраф - 0.5 за каждый несоответствующий внешнему виду или расположению элемент.
В4О2	Размер и расположение «Подвала», а также взаимное расположение и внешний вид его элементов соответствуют скриншоту (используются понятия «над», «в», «под», «слева», «справа» и т.д.). Штраф -0.5 за каждый несоответствующий внешнему виду или расположению элемент.
В4О3	Размер, расположение, внешний вид «Главного меню» при совпадении размера экрана со скриншотом абсолютно точно ему соответствует (в том числе и тексты)
В4О4	Шапка всегда прижата к верху страницы и не реагирует на скроллинг	0.5
В4С1	Расположение «Основные блоки» соответствует скриншоту
В4С2	Расположение «Дополнительные блоки» соответствует скриншоту
В4С3	Общее впечатление о точности восстановления и улучшении сайта
B5	Техническая реализация
B5O1	Валидный код CSS. Штраф -0.25 за каждый тип ошибки.
B5O2	Страница выглядит абсолютно одинаково в браузерах Firefox и Chrome
B5O3	Структура страницы не нарушается при отключении изображений	0.5
В5С1	Шрифты сочетаются с дизайном и темой страницы	0.5
В5С2	Добавленные эффекты подчеркивают тему сайта и допустимы для нее	0.5
Итого максимально:

Указан максимальный балл. Аспекты.

O – объективные,

С – субъективные.

Вступительная часть

Компания ООО «Постоянные новости» много лет назад разработала статический веб-сайт. Каждый день, специально обученный администратор, добавлял в статическую верстку сайта текущие новости, но неожиданно уволился. Менеджер, которому поручили вести новостную ленту, не знает HTML и не понимает, как верстать страницы сайта.

Задание

Вам поручается автоматизировать процесс добавления новостей на сайт и разработать для этого специальную панель администратора. Вся создаваемая текстовая информация, в том числе данные аккаунтов, должна храниться в базе данных.

Каждая новость состоит из:

- заголовка;

- даты;

- аннотации;

- текста;

- одной или нескольких фотографий;

- адреса ссылки на внешний ресурс;

- текста ссылки на внешний ресурс.

Новостная лента на главной странице сайта представляет собой список из ограниченного количества свежих новостей, для каждой из которых выводится:

- заголовок;

- дата;

- аннотация.

В ленте выводятся только актуальные новости, после них размещаются две ссылки:

- все новости;

- архив новостей.

При переходе по первой ссылке загружается HTML-страница «Новости» со всеми актуальными новостями, для каждой из которых выводится:

- заголовок;

- дата;

- текст;

- все фотографии (если они есть);

Дизайн страницы соответствует дизайну сайта и содержит его основные элементы навигации. Для удобства работы, выводимые новости разбиваются на страницы – внизу страницы формируется соответствующий навигационный блок.

При переходе по ссылке «Архив новостей», выводятся только новости из архива. Форма вывода, навигация и функционал страницы абсолютно совпадает со страницей «Актуальные новости».

Каждая новость в ленте новостей главной страницы оформляется как ссылка, ведущая на соответствующую страницу страницы «Все новости». Если новостей нет – лента и ссылки не выводятся.

Панель администратора должна позволять:

- авторизовать администратора;

- добавлять новость;

- изменять любую актуальную новость, в том числе добавлять или удалять ее фотографии;

- перемещать любую актуальную новость в архив;

- удалять любую новость из архива;

- переносить любую новость из архива в актуальные новости;

- изменять максимальное количество новостей в ленте на главной странице сайта;

- изменять количество новостей на одной странице при выводе всех актуальных и архивных новостей;

- принудительно отключать вывод новостной ленты на главной странице.

Все изменения новостей в панели администратора немедленно отображаются в ленте и архиве новостей.

Вводные данные

Сайт в формате HTML (главная страница).

Выходные данные

Работающий сайт формата HTML5/CSS3 с PHP-программой, реализующей указанный функционал.

Время выполнения

3 часа

Модуль 5. «Программирование на стороне сервера. автоматизация работы сайта средствами РНР».

Субкритерии и аспекты оценки

№	Аспект	Максимальный балл
С1	Добавление новости
С1О1	Форма добавления новости охватывает все атрибуты	0.25
С1О2	Новость полностью добавляется в базу данных
С1О3	Реализована возможность одновременной загрузки нескольких фото	0.5
С2	Изменение новости
С2О1	Любая новость может быть изменена	0.5
С202	Реализована возможность добавлять фото новости	0.5
С2О3	Реализована возможность удалять любое фото новости	0.5
С204	При удалении фото запрашивается подтверждение	0.5
С3	Функционирование архива новостей
С3О1	Любую новость можно переместить в архив. Все атрибуты новости, в том числе ее фото, сохраняются
С3О2	Любую новость из архива можно восстановить. Все атрибуты новости, в том числе ее фото, сохраняются
С3О3	Любая новость из архива может быть удалена
С3О4	При удалении новости удаляются все ее фото	0.5
С3О5	При удалении новости запрашивается подтверждение	0.5
С4	Настройки новостной ленты
С4О1	Реализована возможность настройки количества новостей на главной странице сайта; на одной странице пагинации в разделе «Новости»; на одной странице пагинации раздела «Архив новостей».	0.5
С4О2	Реализована возможность временного отключения новостной ленты на сайте.	0.25
С5	Общие требования к администрированию новостей
С5O1	Реализована авторизация по логину и паролю
С5О2	Фотографии при добавлении копируются в отдельную папку с новым уникальным именем файла или в БД	0.5
С5О3	Весь функционал недоступен без авторизации	0.25
С5О4	Все текстовые атрибуты новости могут содержать любые печатные символы	0.5
С5О5	Для отображения новостей используется постраничная пагинация
С5О6	Списки актуальных новостей и архива новостей разделены	0.25
С5О7	Добавлена и работает кнопка «Выход»	0.25
C5C1	Панель администратора удобна для работы
С6	Отображение новостей на сайте
С6О1	На главной странице сайта отображаются только актуальные новости(заголовок, дата, аннотация)
С6О2	Реализованы ссылки «Все новости» и «Архив новостей»	0.25
С6О3	Страница «Новости» отображает все актуальные новости (заголовок, дата, текст, фото, ссылка)	0.5
С6О4	На странице «Новости» используется постраничная пагинация	0.5
С6О5	Страница «Архив новостей» отображает все архивные новости(заголовок, дата, текст, фото, ссылка)
С6О6	На странице «Архив новостей» используется постраничная пагинация	0.5
С6О7	Реализован режим вывода «Все новости»	0.25
С6О8	У новостей отображаются все их и только их фотографии	0.5
С6О9	Ссылки отображаются и работают только если они есть	0.25
С6О10	Новости на главной странице оформлены как ссылки, ведущие в раздел «Новости» на соответствующую страницу пагинации. После перехода по ней новость видна на мониторе.
С6О11	Настройки новостной ленты влияют на отображение новостей	1.5
С6С1	Новостная лента гармонично встроена в дизайн сайта	0.5
С6С2	Разделы «Новости» и «Архив новостей» соответствуют дизайну сайта	0.5
Итого максимально:

Указан максимальный балл. Аспекты.

O – объективные,

С – субъективные.

Анимированный баннер

Вступительная часть

Компания ООО «Уныние», в связи с предстоящим переименованием и сменой корпоративного стиля, решила разработать ряд анимированных баннеров для своего сайта. Для этого она объявила тендер, победитель которого получит контракт на их разработку. Для участия в тендере необходимо предоставить на конкурс пример своей работы на заданную тему.

Задание

Создать анимированный баннер, используя HTML5, CSS3 и JavaScript, для размещения на сайте заказчика и повышающий интерес посетителей к переходу на внутренние страницы сайта. Можно выбрать один из двух вариантов размера баннера:

- вертикальный 160х600px;

- горизонтальный 468х120px.

- Созданный баннер должен отвечать следующим требованиям к содержанию и функционалу:

- использовать логотип фирмы;

- использовать минимум одно самостоятельно нарисованное в векторном редакторе изображение;

- реализовывать интерактивные функциональные возможности (при наведении, при нажатии и т.д.)

- иметь механизм перехода на другую страницу сайта или иной сайт (открывается в новой вкладке).

Анимация баннера должна соответствовать следующим критериям:

- длительность эффектов не менее 10 секунд;

- плавный переход от сцены к сцене длительностью не менее 2 сек;

- отсутствие мгновенных изменений состояния объектов, даже при действиях пользователя;

- минимум три сцены в баннере;

- на каждой сцене должно быть не менее двух активных, взаимодействующих объектов;

- переход к последующей сцене осуществляется или по результатам взаимодействия объектов на сцене или в результате интерактивных действий пользователя.

При создании баннера допускается использовать только HTML5\CSS3\JS\jQuery. Можно создавать собственные графические объекты, но нельзя использовать gif-анимацию или технологию Adobe Flash.Варианты“слайдеров”запрещены.

Вводные данные

Для работы над баннером предоставляются:

- название, логотип и краткое описание компании;

- список, описание и фото товаров или услуг, компании;

- набор случайных изображений и текста по сфере деятельности компании;

- шрифты и вспомогательная графика;

- библиотека JQuery.

Выходные данные

Набор созданных HTML5, CSS3 и JS файлов с баннером.

Время выполнения

3 часа

Модуль 6. «Программирование на стороне клиента.

Анимированный баннер».

Субкритерии и аспекты оценки

№	Аспект	Максимальный балл
D1	Общие требования
D1O1	Размер баннера соответствует одному из предложенных вариантов	0.5
D1O2	В баннере используется логотип	0.5
D1O3	В баннере используется самостоятельно нарисованное в векторном редакторе изображение	0.5
D1O4	На каждой сцене как минимум один элемент баннера реагирует на наведение мыши и/или на ее нажатие. Штраф -0.5 за каждую не подходящую под аспект сцену.	1.5
D1O5	Реализован механизм перехода на другие страницы сайта или на другой сайт	0.5
D1O6	При переходе с баннера страница открывается в новом окне	0.5
D1C1	Гарнитура и кегль шрифтов соответствуют логотипу и товару	0.5
D2	Алгоритм работы
D2O1	На каждой сцене минимум два взаимодействующих объекта. (штраф -0.5 за каждую не подходящую под аспект сцену)	1.5
D2O2	Переход к каждой последующей сцене осуществляется по результатам взаимодействия ее объектов или согласно действиям пользователя. Штраф -0.5 за каждую не подходящую под аспект сцену.	1.5
D2C1	Нелинейность, сложность, логичность переходов к следующей сцене
D3	Анимация
D3O1	Длительность всех сцен баннера вместе не менее 10 секунд	0.5
D3O2	Баннер состоит минимум из трех сцен	0.5
D3O2	На разных сценах используются разные объекты
D3O3	Плавный переход между сценами, длительность не менее 2 секунд. Штраф -0.5 за каждый не подходящую под аспект переход.
D3O4	На каждой сцене минимум 3 объекта Штраф -0.5 за каждый не подходящую под аспект переход.	1.5
D3C1	Оригинальность баннера
D3C2	Баннер способствует продвижению товара
D3C3	Темп анимации не замедлен и не ускорен
D3C4	Количество объектов на всех сценах достаточно, но не чрезмерно
D3C5	Плавное изменение состояния объектов, даже при интерактивных действиях пользователя
Итого максимально:

Указан максимальный балл. Аспекты.

O – объективные,

С – субъективные.

Национального чемпионата WorldSkills Russia

по компетенции Веб­дизайн

Соревнование проводится в течение трех дней и состоит из последовательного выполнения шести разных модулей с заданием: по два модуля в день. Оценка результата работы конкурсантов проводится экспертами каждый день, окончательный результат доводится до участников в конце соревнований. Итоговая оценка работы каждого участника формируется согласно следующим критериям.

A.Графический дизайн.

B. Верстка HTML.

C. Программирование на стороне сервера.

D.Программирование на стороне клиента.

Общая структура модулей с заданием и их распределение по критериям оценки.

День	Критерий	Максимальный балл	Время, ч.
	Модуль 1. Графический дизайн. Разработка дизайна страниц сайта для компании
Модуль 2. Графический дизайн. Разработка дизайна страницы в стиле «Целевая страница»
	Модуль 3. Верстка HTML. Верстка HTML5/CSS3 по дизайн-макету
Модуль 4. Верстка HTML. Восстановление CSS по скриншоту
	Модуль 5. Программирование на стороне сервера. Автоматизация работы сайта средствами РНР
Модуль 6. Программирование на стороне клиента. Анимированный баннер
Итого

Внимание!

Исходные данные для модулей 1, 3, 4 и 6 будут выбраны на собрании экспертов за день до начала соревнований путем поиска подходящего сайта в Интернете. Также на собрании все модули задания (тема, пункты задания и критерии) будут изменены не менее чем на 30%.