JuniorSkills/Конкурсное задание_по компетенции Веб

реклама
Открытый городской Фестиваль технического творчества «ТехноКакТУС»
Конкурсное задание
Компетенция «Веб-дизайн»
Время выполнения
На выполнение задания отводится 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 год.
Скачать