Бакалавриат
2020/2021
Web-визуализация
Лучший по критерию «Новизна полученных знаний»
Статус:
Курс по выбору (Медиакоммуникации)
Направление:
42.03.05. Медиакоммуникации
Кто читает:
Институт медиа
Где читается:
Факультет креативных индустрий
Когда читается:
3-й курс, 1, 2 модуль
Формат изучения:
без онлайн-курса
Преподаватели:
Тржемецкий Глеб Борисович
Язык:
русский
Кредиты:
4
Контактные часы:
50
Программа дисциплины
Аннотация
Дисциплина знакомит студентов с методами создания визуально богатых веб-страниц, включающих анимацию, приемы и библиотеки визуализации данных на веб-страницах, создание интерактивных страниц и визуализаций. Дисциплина дает студентам представление о языке Java Script и его возможностях, а также о продвинутых свойствах CSS.
Цель освоения дисциплины
- Познакомить с приемами и инструментами создания визуально богатых интерактивных веб-сайтов.
- Освоение языков CSS и JavaScript.
- Формирования понятийного аппарата, связанного с визуальным анализом и представлением данных.
- Формирование навыков подбора подходящего вида визуализации исходя из структуры и характер данных, создания визуальных проектов.
Планируемые результаты обучения
- Создает интерактивное изображение с активными областями и всплывающими окнами.
- Создает анимированные элементы HTML (вращающиеся, перемещающиеся, пульсирующие, переворачивающиеся, меняющие цвет/форму).
- Создает элементы страницы, появляющиеся или изменяющиеся при скроллинге, движущиеся с разной скоростью.
- Создает визуализации на карте (точки, окружности, линии, маршруты, области, тепловые карты).
- Подготавливает данные и размещает их на странице.
- Настраивает внешний вид визуализации.
- Использует инструменты программной библиотеки d3.js.
- Создает интерактивную визуальную игру на основе существующего примера или программной библиотеки.
- Выбирает подходящий вид графика.
- Использует библиотеку на языке javascript.
Содержание учебной дисциплины
- Интерактивные изображения.Активные области поверх изображений (hotspots). Отслеживание нажатий. Всплывающие окна в веб-страницах. Изображения в формате SVG. Области на изображениях. Карты в формате SVG.
- Анимация в CSSПеремещение элементов. Переходы в CSS. Трансформация элементов в CSS. Анимация в CSS.
- Анимация при скроллингеСкроллителлинг: анимация элементов страницы при скроллинге. Вертикальный скроллинг. Горизонтальный скроллинг. Фиксированные элементы. Эффект параллакса. Программные библиотеки для работы со скроллингом. Скроллинг и SVG.
- Визуализации на картахУстройство карт в web. Картографические сервисы и их API. Виды визуализаций на картах. Приемы создания визуализаций на картах. Панорамы.
- Визуализации числовых данныхПрограммные библиотеки для построения графиков. Выбор вида графика в зависимости от данных. Принципы и рекомендации по оформлению внешнего вида графиков и диаграмм.
- Визуализация связей и графовПрограммные библиотеки для построения графов. Виды визуализаций связей и отношений. Принципы и рекомендации по оформлению внешнего вида графов. Интерактивные визуализации связей.
- Динамические визуализации. Библиотека 3D.jsПостроение анимированных визуализаций. Библиотека 3D.js — принципы, примеры, практики работы.
- Интерактивные визуализации и браузерные игрыОбзор примеров событийных мини-игр в медиа. Разбор кейсов. Программные библиотеки для интерактивного взаимодействия визуальными элементами (выделение, перемещение, установка связей, рисование, стирание и т.п.)
Элементы контроля
- Посещаемость
- Интерактивное изображение
- Анимация в CSS
- Анимация при скроллинге
- Визуализации на картах
- Визуализация числовых данных
- Визуализация связей и графов
- Динамические визуализации. Библиотека 3D.js
- Интерактивные визуализации и браузерные игры
Промежуточная аттестация
- Промежуточная аттестация (2 модуль)0.1 * Анимация в CSS + 0.1 * Анимация при скроллинге + 0.1 * Визуализации на картах + 0.1 * Визуализация связей и графов + 0.1 * Визуализация числовых данных + 0.1 * Динамические визуализации. Библиотека 3D.js + 0.1 * Интерактивное изображение + 0.1 * Интерактивные визуализации и браузерные игры + 0.2 * Посещаемость
Список литературы
Рекомендуемая основная литература
- Диков А.В. - Клиентские технологии веб-дизайна. HTML5 и CSS3: учебное пособие - Издательство "Лань" - 2019 - 188с. - ISBN: 978-5-8114-3822-8 - Текст электронный // ЭБС ЛАНЬ - URL: https://e.lanbook.com/book/122174
- Рининсланд Э., Теллер С. - Визуализация данных с помощью библиотеки D3.js 4.x - Издательство "ДМК Пресс" - 2017 - 298с. - ISBN: 978-5-97060-569-1 - Текст электронный // ЭБС ЛАНЬ - URL: https://e.lanbook.com/book/105837
Рекомендуемая дополнительная литература
- - Основы работы с CSS - Национальный Открытый Университет "ИНТУИТ" - 2016 - 195с. - ISBN: - Текст электронный // ЭБС ЛАНЬ - URL: https://e.lanbook.com/book/100327
- Компьютерная графика и web-дизайн : учеб. пособие / Т.И. Немцова, Т.В. Казанкова, А.В. Шнякин ; под ред. Л.Г. Гагариной. — М. : ИД «ФОРУМ» : ИНФРА-М, 2020. — 400 с. + Доп. материалы [Электронный ресурс; Режим доступа: http://new.znanium.com]. — (Среднее профессиональное образование).
- Сидерхолм Д. - CSS3 для веб-дизайнеров - Издательство "Манн, Иванов и Фербер" - 2013 - 144с. - ISBN: 978-5-91657-595-8 - Текст электронный // ЭБС ЛАНЬ - URL: https://e.lanbook.com/book/62388