Графическая информация в Интернет

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
О значении иллюстраций
в публикациях:
Задействуется
правополушарные
образные механизмы
мышления и памяти
Графическая культура становится
второй грамотностью, одной из составляющих профессиональной компетентности современного инженера

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
О значении иллюстраций (2014):
Визуальное сопровождение увеличивает желание
читать текст
на 80%

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
О значении иллюстраций:
Задействуется правополушарные образные (быстрые) механизмы мышления и памяти

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
О значении иллюстраций
в публикациях:
Задействуется
правополушарные
образные механизмы
мышления и памяти
Примеры важных иллюстраций

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
О значении технической анимации:
Задействуется
правополушарные
образные механизмы
мышления и памяти

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Динамическая
инфо-
графика:
Рост числа
пользователей Интернет на 100 жителей

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Визуализация математических абстракций обещает революцию в научном познании
Александр Александрович Зенкин
(профессор, Вычислительный центр РАН):
«Когнитивная компьютерная графика»
(М.: Наука, 1991)
«Когнитивная графика изображает, визуализирует знание… и способствует процессу человеческого познания…»
Лейбниц: «Рисование есть очень полезное средство против неопределенности слов».

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Рекомендуемая методика
подготовки публикаций
для Интернет:
1. Разработка основных идей и плана публикации
2. Разработка визуального ряда в виде
статических и динамических
(не более 1-2 на документ) иллюстраций
3. Написание текста
4. Оптимизация иллюстраций
5. Окончательное оформление публикации

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Основные требования
к оформлению
иллюстраций:
Информативность
Соразмерность
Качественность реализации
Наличие содержательной подписи
(для анимации включаются и
технические параметры: количество кадров и циклов повторения, объем)
5. Содержательный альтернативный текст

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Основные способы создания
динамических иллюстраций:
Простейший: GIF89a + специальная программа
Комплексные: Adobe (Macromedia) Flash
+ Action Script
Программные: JavaScript, Java…
Комбинированные

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Основные требования к параметрам
тега вставки анимированных иллюстраций:
alt =“Схема функционирования веб-сервера" hspace=12 vspace=10
align=left
border=0>

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Методика подготовки
динамических иллюстраций:
Выбирается базовое статическое изображение и/или сюжет анимации (для этого может использоваться поиск изображений в Интернет)
Разрабатывается сценарий анимации и последовательность отдельных кадров (мин 3-5), для чего можно использовать свободно распространяемую программу PhotoFiltre или стандартный графический редактор MS Paint.

Графическая информация в Интернет
Статические и динамические иллюстрации
Разработка
отдельных кадров:
MS Paint
PhotoFiltre

Графическая информация в Интернет
Статические и динамические иллюстрации

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Методика подготовки динамических иллюстраций:
С помощью специальной программы последовательность кадров объединяется в единое динамическое изображение. Для этого может использоваться свободно распространяемая программа MP GIF Animator или аналогичная
Полученная анимация оптимизируется (в том числе минимизируется по объему) путем подбора наилучшего сочетания параметров и доработки отдельных кадров.

Графическая информация в Интернет
Статические и динамические иллюстрации
MP
Gif Animator
Создание
динамического
изображения
из отдельных
кадров

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Такие иллюстрации
для научных
и технических текстов НЕ характерны

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
В какую сторону вращается?
Где анимация
действительно
необходима?

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
В какую сторону вращается?

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Проекты «вечных двигателей»

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Примеры удачных анимаций:
первая рисованная
анимация
(конец XIX в.)

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Самая первая рисованная
анимация:
Иран, конец
IV тыс. до н.э.

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Египет,
конец III тыс.
до н.э.

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Примеры удачных анимаций

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Примеры удачных анимаций
Как работает
«застежка-молния»

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Примеры удачных анимаций
Как работают «муравьиные» алгоритмы

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Примеры удачных анимаций
Динамика
движения
Луны

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Теория растущей Земли
Примеры удачных анимаций

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Теория растущей Земли
Примеры удачных анимаций

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Примеры удачных анимаций
Вулкан
2010

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Примеры удачных анимаций
July 19 2001 more than 359 000 computers were infected with the Code-Red worm in less than 14 hours

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Примеры удачных анимаций
2006 Nyxem virus is a 95 kb Visual Basic executable that infects a computer when an unwary user runs an executable email attachment

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Примеры удачных анимаций

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Примеры неудачных анимаций
на портале магистров

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Примеры недоработанных анимаций

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Примеры недоработанных анимаций

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Примеры удачных анимаций
Рис. 1 - Процесс нахождения равновесной цены с помощью паутинообразной модели ценообразования (gif-анимация, 11 кадров, 6 циклов повторения, объем 76 Кб, реализована в программе MP GIF Animator)
Моспан А.А.,
Факультет КНТ
2010 г.

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Примеры удачных анимаций
Рисунок 2 – Схема работы прогностического комплекса
(анимация: объем - 67,3 КБ; размер - 600x300; количество кадров - 11; бесконечное число циклов повторения; задержка между кадрами - 1,3 мс; задержка между последним и первым кадром - 1,3 мс)
Сивяков А.С.,
Факультет КНТ
2010 г.

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Примеры удачных анимаций
Рисунок 1 - Анимированный процесс определения дефекта шахтного подъемного каната (количество кадров - 74; количество повторений - 10; объем - 95 кб.)
Поздняков Е.А.
Факультет КИТА
2010 г.

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Примеры удачных анимаций
Рисунок 1 — Схема котлоагрегата НТКС с использованием ПТС
(анимация: объем: 134 КБ; размер: 760х450; количество кадров — 20; задержка между кадрами — 1500 мс; задержка между первым и последним кадром — 2000 мс)
Гавриленко Д.А.
Факультет КИТА
2010 г.

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Примеры удачных анимаций
Изобретение японского психиатра
Акиоши Китаока

Лекция 8 Графическая информация в Интернет
Статические и динамические иллюстрации
Варианты тематики индивидуального раздела:
Описание собственного опыта профессиональной или прочей трудовой деятельности, если такой опыт имеется;
Описание опыта своих творческих или спортивных достижений;
Опыт участия в каких-либо значимых мероприятиях (международные конференции, олимпиады, конкурсы, дальние командировки);