Организация стока поверхностных вод: Наибольшее количество влаги на земном шаре испаряется с поверхности морей и океанов (88‰)...
Опора деревянной одностоечной и способы укрепление угловых опор: Опоры ВЛ - конструкции, предназначенные для поддерживания проводов на необходимой высоте над землей, водой...
Топ:
Проблема типологии научных революций: Глобальные научные революции и типы научной рациональности...
Особенности труда и отдыха в условиях низких температур: К работам при низких температурах на открытом воздухе и в не отапливаемых помещениях допускаются лица не моложе 18 лет, прошедшие...
Интересное:
Лечение прогрессирующих форм рака: Одним из наиболее важных достижений экспериментальной химиотерапии опухолей, начатой в 60-х и реализованной в 70-х годах, является...
Искусственное повышение поверхности территории: Варианты искусственного повышения поверхности территории необходимо выбирать на основе анализа следующих характеристик защищаемой территории...
Что нужно делать при лейкемии: Прежде всего, необходимо выяснить, не страдаете ли вы каким-либо душевным недугом...
Дисциплины:
2017-10-16 | 552 |
5.00
из
|
Заказать работу |
|
|
Вступительная часть
Профессиональный дизайнер создал концепцию веб-страницы для вымышленного онлайн-магазина музыкальных дисков. Дизайн автоматически адаптируется под ширину демонстрационного окна в зависимости от устройства пользователя и размеров браузера.
Задание
Сверстать соответствующую представленному дизайн-макету страницу в 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 – объективные,
С – субъективные.
Модуль 4. Верстка HTML. Восстановление CSS по скриншоту
Вступительная часть
При разработке сайта для ОЧЕНЬ ВАЖНОГО ПРОЕКТА произошел компьютерный сбой, в результате чего часть файлов оказалось потерянной. К счастью, исходные материалы проекта и эскиз сайта были сохранены в архиве. Необходимо срочно восстановить сайт, не трогая существующие файлы. По возможности можно заодно и несколько улучшить визуальный вид страницы за счет изменения гарнитуры используемых шрифтов и добавления эффектов.
Задание
Необходимо воссоздать потерянный 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 – объективные,
С – субъективные.
|
|
|
Археология об основании Рима: Новые раскопки проясняют и такой острый дискуссионный вопрос, как дата самого возникновения Рима...
Состав сооружений: решетки и песколовки: Решетки – это первое устройство в схеме очистных сооружений. Они представляют...
Своеобразие русской архитектуры: Основной материал – дерево – быстрота постройки, но недолговечность и необходимость деления...
История развития пистолетов-пулеметов: Предпосылкой для возникновения пистолетов-пулеметов послужила давняя тенденция тяготения винтовок...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!