JuniorSkills/Конкурсное задание_по компетенции Веб
advertisement
Открытый городской Фестиваль технического творчества «ТехноКакТУС» Конкурсное задание Компетенция «Веб-дизайн» Время выполнения На выполнение задания отводится 4 часа. Содержание задания Ваша задача - разработать веб-сайт, посвященного 55-летию первого полета человека в космос. Тема сайта: «Международная космическая станция». Задание состоит из трех частей: 1. На основе предоставленных скиншотов сайта создать html-страницы, полностью повторяющие структуру и дизайн: месторасположение всех блоков, меню; отступы внутри блоков; отступы снаружи блоков; цветовая схема блоков, текста, ссылок; цветовая схема пунктов верхнего и нижнего меню; обязательно использование в тексте изображений (минимум 2), у разных изображений должно быть различное выравнивание (местоположение: справа и слева) (минимум в одной странице); обязательно использование в тексте маркированных и нумерованных списков (минимум в одной странице); обязательно использование в тексте таблиц (минимум в одной странице); дизайн сайта должен использовать принцип единообразия в структуре страницы: единый размер элементов, одинаковую высоту навигационных кнопок, оформление заголовков, подзаголовков и основного текста, оформления ссылок и изображений для всех страниц сайта; все каскадные таблицы стилей должны храниться в одном отдельном файле и подключаться к html-страницам; главная страница должна быть сверстана с учетом просмотра её при различных разрешениях экрана компьютера (980, 1120, 1200 пикселей), т.е. иметь адаптивную («резиновую») верстку. 2. Наполнение контента сайта. Конкурсное задание. Санкт-Петербург 2016 год. при размещении материалов на странице должен быть указан источник информации; в меню должно быть не менее 6 пунктов; название пунктов меню выбираются участником самостоятельно, в соответствие с предоставленными материалами и тематикой сайта; задание будет считаться выполненным, если полностью заполнены минимум три страницы с учетом всех требований п.1.; пункты меню для которых нет контента, должны быть оформлены однотипно и вместо контента используется фраза «Данный раздел находится в разработке»; все страницы должны быть доступны через верхнее и нижнее меню сайта; при размещении логотипа предусмотреть переход на главную страницу сайта по щелчку левой кнопки мыши; предусмотреть механизм перехода с баннера на официальный сайт МКС (http://www.mcc.rsa.ru/mks.htm), сайт должен открываться в новой вкладке. 3. Анимация. Разработать анимированный баннер размером (350 x 200px); Анимация должна быть не менее 5 сек; Анимация должна состоять минимум из трех кадров. Вводные данные: Название темы сайта, логотип, краткое описание темы, список тем страниц, текстуальное содержание каждой темы с иллюстративным материалом и его описанием, набор случайных изображений и текста на тему сайта, скриншоты всех страниц сайта. Выходные данные: Сайт (набор файлов в формате HTML и CSS). Анимированный логотип на всех страницах. Рекламный баннер на главной странице. Оценка сайта будет осуществляться по следующим критериям: № критерия Критерий Оценка в баллах Объективная Судейская Сумма A Верстка web-страницы (HTML) 49 6 55 B Верстка web-страниц (CSS) 13 8 21 C Графический дизайн и web-графика 12 2 14 D Анимация 8 2 10 Итого 82 18 100 Конкурсное задание. Санкт-Петербург 2016 год. Критерии оценки № Критерий к р и те р и я A Верстка webстраницы (HTML) № субкри тер ия Субкритерий № аспек та Аспект A1 Структура сайта A1O1 Материалы сайта структурированы по папкам 2 2 A1O2 Стартовый файл index.htm или index.html В именах файлов отсутствует кириллица Все каскадные таблицы стилей вынесены в отдельный файл Наличие тега <!Doctype html> или аналогичных для других версий HTML Элементы Подвал, Подвал и Меню представлены на всех страницах сайта 2 2 2 2 2 2 2 2 2 2 A2O3 Запись в теге <TITLE> соответствует названию страницы. 2 2 A2O4 Метаданные «keywords» имеются на каждой странице и соответствуют содержанию страницы Метаданные «description» имеются на каждой странице и соответствуют содержанию страницы Валидность HTML-кода http://validator.w3.org Идентичное отображение страниц сайта в браузерах Firefox, Chrome Правильная работа гиперссылок. Удобство навигации Применяется блочная структура на основе тегов 2 2 2 2 2 2 A1O3 A1O4 A2 Структура документа A2O1 A2O2 A2O5 A2O6 A2S1 A3 A4 Интерфейс Адаптивна я верстка A3O1 A3S1 A4O1 Конкурсное задание. Санкт-Петербург 2016 год. Оценка в баллах Объе Суд Сум ктивн ейск ма ая ая 2 2 2 2 2 2 2 2 главной страницы A4O2 A4O3 A4O4 A4O5 A4S1 A5 Структура текста A5O1 div, а таблицы используются только при размещении содержания страницы Размеры блоков меняются при изменении разрешения Каркас сайта создан на основе таблиц Изменение разрешения до 980 px не создает горизонтальной полосы прокрутки Изображения масштабируются при изменении разрешения Качество реализации процесса изменения каркаса при различных разрешениях (980, 1120, 1200 px) Заголовки (Hn) 2 2 1 1 2 2 2 2 2 2 2 2 A5O2 Абзацы на основе <p>, а не <br> 2 2 A5O3 Применяются элементы логического, а не физического форматирования Учтены авторские права (есть информация откуда взяты все заимствованные материалы) Использование нумерованных списков (использованы/не использованы) Использование маркированных списков (использованы/не использованы) Использование в тексте таблиц Ячейки таблицы правильно объединены В тексте имеются картинки выравненные и по левому и по правому краю (за каждый тип выравнивания – 1 балл) 2 2 2 2 2 2 2 2 2 2 2 2 2 2 A5O4 A5O5 A5O6 A5O7 A5O8 A5O9 Конкурсное задание. Санкт-Петербург 2016 год. B Верстка web-страниц (CSS) B1 Оформлен ие блоков идентично заданному макету (скриншот) B1O1 Отступ от шапки до основного документа соответствует скриншоту 2 2 B1O2 Отступ внутри и снаружи блоков Отступ от изображения 1 1 1 1 Цвет, форма «Шапки» сайта соответствует скриншоту Цвет, форма «Подвала» сайта соответствует скриншоту Цвет, форма «Главное меню» сайта соответствует скриншоту Валидность CSS 1 1 2 2 2 2 4 4 B1O3 B1O4 B1O5 B1O6 B1O7 B1S1 B1S2 B1S3 B1S4 C Графически й дизайн и web-графика C1 Графическ C1O1 ие решения C1O2 C1O3 C1S1 C1S2 Общее впечатление о точности восстановления сайта Пропорции и расположение «Шапки» сайта соответствуют скриншоту Пропорции и расположение «Подвала» сайта соответствуют скриншоту Пропорции и позиционирование «Главного меню» сайта соответствуют скриншоту Все страницы сайта имеют одинаковый графический пользовательский интерфейс Все основные цвета должны соответствовать цветовой гамме скриншота Цвет ссылок должен соответствовать скриншоту Общее впечатление о дизайне сайта Выбрано оптимальное соотношение яркости (контраста) между текстом и фоном Конкурсное задание. Санкт-Петербург 2016 год. 2 2 2 2 2 2 2 2 2 2 2 2 2 2 1 1 1 1 C2 Webграфика Реальный размер изображения не превышает примененный на сайте более чем на 50% Элементы интерфейса собственной разработки (кнопки) Альтернативный текст (атрибуты alt, title) Имеется рекламный баннер, в котором использованы элементы логотипа 2 2 2 2 2 2 2 2 Размер баннера соответствует одному из предложенных При щелчке по баннеру обеспечивается переход на официальный сайт МКС. 2 2 2 2 D2O4 Официальный сайт МКС открывается в новом окне (вкладке) 2 2 D2S1 Оригинальность баннера C2O1 C2O2 C2O3 D Анимация D2 Баннер D2O1 D2O2 D2O3 Итого 82 Конкурсное задание. Санкт-Петербург 2016 год. 2 2 18 100 Макет главной страницы Конкурсное задание. Санкт-Петербург 2016 год. Макет текущей страницы Конкурсное задание. Санкт-Петербург 2016 год.
