Web-визуализация

2019/2020

Учебный год

RUS

Обучение ведется на русском языке

4

Кредиты

Кто читает:

Институт медиа

Статус:

Курс по выбору

Когда читается:

3-й курс, 2, 3 модуль

Преподаватель

Куприянов Юрий Владимирович

Программа дисциплины

Аннотация

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

Цель освоения дисциплины

• Познакомить с приемами и инструментами создания визуально богатых интерактивных веб-сайтов.
• Освоение языков CSS и JavaScript.
• Формирования понятийного аппарата, связанного с визуальным анализом и представлением данных.
• Формирование навыков подбора подходящего вида визуализации исходя из структуры и характер данных, создания визуальных проектов.

Планируемые результаты обучения

• Создает интерактивное изображение с активными областями и всплывающими окнами.
• Создает анимированные элементы HTML (вращающиеся, перемещающиеся, пульсирующие, переворачивающиеся, меняющие цвет/форму).
• Создает элементы страницы, появляющиеся или изменяющиеся при скроллинге, движущиеся с разной скоростью.
• Создает визуализации на карте (точки, окружности, линии, маршруты, области, тепловые карты).
• Подготавливает данные и размещает их на странице.
• Выбирает подходящий вид графика.
• Использует библиотеку на языке javascript.
• Настраивает внешний вид визуализации.
• Использует инструменты программной библиотеки d3.js.
• Создает интерактивную визуальную игру на основе существующего примера или программной библиотеки.

Содержание учебной дисциплины

• Интерактивные изображения.
  Активные области поверх изображений (hotspots). Отслеживание нажатий. Всплывающие окна в веб-страницах. Изображения в формате SVG. Области на изображениях. Карты в формате SVG.
• Анимация в CSS
  Перемещение элементов. Переходы в CSS. Трансформация элементов в CSS. Анимация в CSS.
• Анимация при скроллинге
  Скроллителлинг: анимация элементов страницы при скроллинге. Вертикальный скроллинг. Горизонтальный скроллинг. Фиксированные элементы. Эффект параллакса. Программные библиотеки для работы со скроллингом. Скроллинг и SVG.
• Визуализации на картах
  Устройство карт в web. Картографические сервисы и их API. Виды визуализаций на картах. Приемы создания визуализаций на картах. Панорамы.
• Визуализации числовых данных
  Программные библиотеки для построения графиков. Выбор вида графика в зависимости от данных. Принципы и рекомендации по оформлению внешнего вида графиков и диаграмм.
• Визуализация связей и графов
  Программные библиотеки для построения графов. Виды визуализаций связей и отношений. Принципы и рекомендации по оформлению внешнего вида графов. Интерактивные визуализации связей.
• Динамические визуализации. Библиотека 3D.js
  Построение анимированных визуализаций. Библиотека 3D.js — принципы, примеры, практики работы.
• Интерактивные визуализации и браузерные игры
  Обзор примеров событийных мини-игр в медиа. Разбор кейсов. Программные библиотеки для интерактивного взаимодействия визуальными элементами (выделение, перемещение, установка связей, рисование, стирание и т.п.)

Элементы контроля

• Посещаемость
• Интерактивное изображение
• Анимация в CSS
• Анимация при скроллинге
• Визуализации на картах
• Визуализация числовых данных
• Визуализация связей и графов
• Динамические визуализации. Библиотека 3D.js
• Интерактивные визуализации и браузерные игры

Промежуточная аттестация

• Промежуточная аттестация (3 модуль)
  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