• A
  • A
  • A
  • АБB
  • АБB
  • АБB
  • А
  • А
  • А
  • А
  • А
Обычная версия сайта
Бакалавриат 2019/2020

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

Статус: Курс по выбору (Медиакоммуникации)
Направление: 42.03.05. Медиакоммуникации
Когда читается: 3-й курс, 2, 3 модуль
Формат изучения: Full time
Язык: русский
Кредиты: 4

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

Аннотация

Дисциплина знакомит студентов с методами создания визуально богатых веб-страниц, включающих анимацию, приемы и библиотеки визуализации данных на веб-страницах, создание интерактивных страниц и визуализаций. Дисциплина дает студентам представление о языке 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 - ISBN: 978-5-8114-3822-8 - Текст электронный // ЭБС Лань - URL: https://e.lanbook.com/book/122174
  • - Рининсланд Э., Теллер С. — Визуализация данных с помощью библиотеки D3.js 4.x - Издательство "ДМК Пресс" - 2017 - ISBN: 978-5-97060-569-1 - Текст электронный // ЭБС Лань - URL: https://e.lanbook.com/book/105837

Рекомендуемая дополнительная литература

  • - Основы работы с CSS - Национальный Открытый Университет "ИНТУИТ" - 2016 - ISBN: - Текст электронный // ЭБС Лань - URL: https://e.lanbook.com/book/100327
  • - Сидерхолм Д. — CSS3 для веб-дизайнеров - Издательство "Манн, Иванов и Фербер" - 2013 - ISBN: 978-5-91657-595-8 - Текст электронный // ЭБС Лань - URL: https://e.lanbook.com/book/62388
  • Компьютерная графика и web-дизайн : учеб. пособие / Т.И. Немцова, Т.В. Казанкова, А.В. Шнякин ; под ред. Л.Г. Гагариной. — М. : ИД «ФОРУМ» : ИНФРА-М, 2020. — 400 с. + Доп. материалы [Электронный ресурс; Режим доступа: http://new.znanium.com]. — (Среднее профессиональное образование).