Инфографика как способ визуализации учебной информации
Жаннетта Евгеньевна Ермолаева,
кандидат филологических наук, доцент кафедры русского языка и культуры речи Академии государственной противопожарной службы МЧС России, zhannetta13@gmail.com
Оксана Витальевна Лапухова,
директор Учебно-консультационного центра «Олимп», г. Москва Ирина Николаевна Герасимова,
подполковник внутренней службы, старший преподаватель кафедры экологической безопасности Академии государственной противопожарной службы МЧС России, meegend@mail.ru
• инфографика • наглядность • визуализация • PowerPoint •
В условиях организации высшего образования в России на основе компетентностно-i го подхода и информатизации образования стремление разработать более эффективные способы представления учебной информации обучающимся является злободневной научной задачей.
Примеры наглядности и визуализации всегда широко применялись в образовании: опорные схемы и таблицы, оперативные схемы действий, семантические модели, фреймовые модели, дидактические наглядные пособия, «педагогический рисунок» на доске, метапланы.
Проблемами методологии наглядности и визуализации учебной информации занимались классики мировой и отечественной дидактики: Я.А. Коменский, Дж. Дьюи, К.Д. Ушинский, И.Я. Лернер, М.И. Махмутов. Вопросы проектирования визуально-информационной модели рассмотрены в пе-
1 Аранова С.В. К методологии визуализации учебной информации. Интеграция художественного и // Вестник Адыгейского государственного университета. Сер. 3: Педагогика и психология . 2011. № 2. С.18-24; Вербицкий А.А. Активное обучение в высшей школе: контекстный подход. — М.: Высш. шк., 1991. 207 с.; Мамардашвили М.К. Проблема сознания и философское призвание // Как я понимаю философию. 2-е изд. — М., 1992.
дагогических трудах М.К. Мамардашвили, С.В. Арановой, А.А. Вербицкого и теоретика визуальных исследований Дж. Митчелла1.
Процесс визуализации, по словам А. Вербицкого, — это «свёртывание мыслительных содержаний в наглядный образ; будучи воспринятым, образ может быть развёрнут и служить опорой адекватных мыслительных и практических действий».
Главная задача обучения — это формирование и развитие познавательной активности учащихся. Именно поэтому сегодня учёные пытаются развести понятия «наглядный» и «визуальный». Значение понятия «наглядный» всегда означало «демонстративный». То есть в процессе обучения учитель показывает/демонстрирует готовый объект, процесс, явление. А «визуальный» предполагает представление в виде образа. То есть в процессе обучения педагог предлагает осмыслить информацию и представить её в виде фигуры, объекта, картинки. Сам процесс визуализации — это свёртывание мыслительных содержаний в наглядный образ; будучи воспринятым, образ может быть развёрнут и служить опорой адекватных мыслительных и практических действий.
ШЖШ.......У.......МША
Одним из способов визуализации информации является инфографика. Инфографи-ка активно используется в печатных и интернет СМИ, в рекламе, маркетинге и PR.
В последнее время она стала популярна и в образовании. Визуальное представление сложной учебной информации ясно, содержательно, эстетически привлекательно, становится требованием современности.
Проблемы рассмотрения способа информатизации и визуализации изучались такими учёными, как Д. Желязны, Э. Тафти, Д. Ланков, В. Лаптев и другими2.
Что же такое инфографика? Более полное определение даёт В. Лаптев: «Инфографика — это область коммуникативного дизайна, в основе которой лежит графическое представление информации, связей, числовых данных и знаний». На наш взгляд, ин-фографика представляет собой синтетическую форму организации информационного материала, включающего в себя, во-первых, визуальные элементы, а во-вторых, тексты, которые поясняют эти визуальные элементы.
Основная цель инфографики — информирование о какой-либо проблеме, явлении, о ряде фактах. Основное отличие инфогра-фики от других видов визуализации информации — в её метафоричности. То есть это не просто график, диаграмма, построенные на основе большого количества данных, это график, в который вставлена визуальная информация, аналогии из жизни, предметы обсуждения.
Типы инфографики
Существует три типа инфографики:
• статичная — чаще всего одиночный слайд без анимированных элементов. Наиболее простой и распространённый вид инфогра-фики;
• интерактивная — содержит анимирован-ные элементы, пользователи могут (в той или иной степени) взаимодействовать с динамическими данными. Этот вид инфогра-фики позволяет визуализировать большее количество информации в одном интерфейсе;
• видеоинфографика — представляет собой короткий видеоряд, в котором сочетаются визуальные образы данных, иллюстрации и динамический текст.
Примеры различных видов инфографики можно посмотреть на сайте Ыодга3.
Технология и принципы создания инфографики
Принципы создания инфографики: актуальность и востребованность темы; простота и краткость; креативность; образность; точность и организованность информации; эстетическая привлекательность.
Технология создания инфографики:
1-й шаг — определите цели и задачи, которые необходимо достичь с помощью инфог-рафики (в зависимости от предметной сферы). Стоит принять во внимание, что «в графике очень легко отображать существующее в реальности, значительно труднее перенести в визуальную плоскость отвлеченные понятия и почти невозможно — мнения и комментарии»4.
2-й шаг — разбейте информацию на разделы, части, пункты. Каждый раздел представьте отдельным изображением или графиком. Подберите нужные визуальные образы, которые знакомы и часто используются вашей аудиторией.
3-й шаг — создайте фокус, то есть придумайте историю, основную визуальную метафору, вокруг которой будет строиться инфографика. Она должна быть простой и всем известной.
2 Желязны Д. Говори на языке диаграмм.— М.: Манн, Иванов и i Фербер, 2012. 320 с.; Лаптев В. Изобразительная статистика. — М.: ЭйдОс, 2012. 180 с.; Lankow J., Ritchie J., Crooks R. Infographics: the Power iof Visual Storytelling. — New Jersey: John Wiley&Sons Inc. 2012. 263 p.; i Tufte E. Beautiful Evidence. — Cheshire: Graphic Press, 2006. 213 p.; Mitchell W.J.T. What is visual culture?, in Irvin Lavin, ed. Meaning in the Visual Arts: Views from the Outside (Princeton, N.J.: Institute for Advanced Study, 1995).
3 Infogra: [сайт]. М., 2014. URL: http:/infogra.ru (Дата обращения: 21.10.2014).
4 Некляев С.Э. Инфографика: принципы визуальной журналистики. Современное журналистское образование: технологии и особенности преподавания / под ред. С. 138.
Е.Л. Вартановой.
М.: Медиа-Мир, 2008.
Применение инфографики в обучении
Учебная информация активно воспринимается тогда, когда у учащихся возникает необходимость в её восприятии. Одно и то же содержание изучаемого предмета одинаковой степени сложности может усваиваться по-разному, в зависимости от метода его представления, мотивов восприятия и интереса учеников.
Как организовать эффективное и результативное обучение учеников с помощью инфографики? Как учителю построить процесс обучения так, чтобы активизировать творческий потенциал своих учеников?
Инфографика как один из методов визуализации учебной информации может использоваться на уроках для создания проблемных ситуаций и организации эффективной поисковой деятельности.
Рассмотрим применение метода инфогра-фики на практическом занятии в курсе «Обществознание» при подготовке к написанию части С в рамках ЕГЭ.
Фрагмент плана:
1-й этап. Демонстрируем инфографику «Люди и банки под ударом мирового экономического кризиса» и просим учеников выделить тезис, цель, проблему, аргументы, которые отражает данная инфограмма.
Рис. 1
ШЖШ.......У.......ШШШ
2-й этап. Распределяем между учениками роли (или позиции): обычный россиянин, политик, бизнесмен. Роли могут меняться в зависимости от предложенной для анализа визуальной информации.
3-й этап. Просим проанализировать инфог-рафику с точки зрения своей роли (позиции): как эти данные повлияют на дальнейшее изменение жизни? Как данный финансовый расклад может оказать влияние на развитие международных отношений? Какую выгоду эти данные могут принести стране и как на него повлиять?
4-й этап. Просим учащихся создать собственную инфографику в защиту своей позиции.
Полезно, чтобы ученики не только использовали готовую инфографику, но и создавали собственную: рисовали взаимосвязи, алгоритмы и схемы, придумывали символы к идеям. В процессе выполнения инфогра-фики учащиеся должны самостоятельно добывать необходимые сведения и также самостоятельно их обрабатывать; не только систематизировать факты, но и наглядно представлять результат их систематизации.
Активное участие учеников в создании ин-фографики и научение анализу инфогра-фических моделей и схем — первый важный аспект применения визуализации на занятии. Например, с помощью инфог-рафики можно реализовать работу с понятиями при подготовке к Единому государственному экзамену: предложите ученикам из текста, предложенного для анализа, вычленить основные понятия и составить простейшую инфограмму, отражающую связи между понятиями и терминами.
Применяя данный метод, надо точно понимать цель, которую преследует педагог, прибегая к инфографике: вызвать эмоцию, развлечь, показать портфолио или фото, сделать конспект, подготовить к экзамену и т.д.
Следует помнить, что инфографика должна быть точно согласована с содержанием материала. Используя различные виды инфог-рафики, не стоит увлекаться её чрезмерным количеством: это рассеивает внимание учеников и мешает восприятию главного.
Инструменты для создания инфографики
Прежде чем приступать к работе, обязательно создайте прототип вашей будущей инфограммы. Схему элементов можно нарисовать от руки. Затем необходимо определиться с программой, которая поможет вам в создании инфографики. Выделим оптимальные критерии при выборе такой программы:
• доступность. Желательно, чтобы используемая программа была бесплатной и не требовала сложной установки на компьютере;
• простота и удобство использования. Программа должна подходить для человека, не обладающего профессиональными дизайнерскими навыками;
• возможность создавать инфографику быстро: наличие большого количества шаблонов, готовых графических элементов и т.п.;
• поддержка кириллицы в различных шрифтах.
Например, можно использовать доступную программу Powerpoint (пакет Microsoft Office). В ней имеются различные макеты и темы для создания слайдов, однако проще всего воспользоваться шаблонами, специально разработанными для создания ин-фографики в этой программе. Например, на сайте Hubspot5 представлено пять типов таких шаблонов:
• для создания 4-цветной инфографики;
• для создания инфографики с данными статистики;
• для создания сравнительной инфографики;
• для создания плиточной инфографики в духе сайта «Pinterest»;
• базовый шаблон для инфографики.
В последних версиях PowerPoint (2010, 2013 гг.) имеются рисунки SmartArt (вкладка Вставка — кнопка SmartArt). По сути это инструмент для структурирования текстовой информации и _
представления её в графическом виде (в виде понятных схем). Рисунки
5 Hubspot: [сайт]. HubSpot, Inc.., 2014. URL: http://offers.hubspot.com/how-to-easily-create-five-fabulous-infographics-in-powerpoint (Дата обращения: 21.10.2014).
Рисунок SmartArt
Факторы производства
2з)
'4
» 1 ш Л р е д п ри нимательские способности
Рис.2 Образец рисунка SmartArt и инфографики «Факторы производства» (подготовка к ЕГЭ по»Обществознанию»)
SmartArt также можно с успехом использовать как «заготовки» для инфографики. Преподаватель может изменять их по своему усмотрению и добавлять необходимую информацию. На сайте производителя можно найти подробный урок по работе со SmartArt6. Приведём пример инфографики, созданной на основе такого рисунка (рис. 2).
В отличие от презентации, предполагается что инфографика — это один слайд, на котором нужно уместить всю необходимую информацию по теме. Поэтому слайд-основа для инфографики очень часто имеет вид длинного прямоугольника, на котором последовательно расположены все элементы. Размер слайда в PowerPoint можно настроить так: вкладка Дизайн — кнопка Параметры страницы. Мы рекомендуем размер: 10x13 дюймов.
В инфографику, создаваемую в PowerPoint, можно добавить диаграммы, графики, различные иллюстрации и необходимые графические элементы. В программе имеются собственные инструменты для создания графиков и рисования простых объектов, а также довольно большая библиотека готовых картинок (вкладка Вставка — кнопка Картинка). Можно добавить иллюстрации и с внешних источников
6 Microsoft Office: [сайт]. Корпорация Майкрософт! (Microsoft Corporation), 2014. URL: http://office.microsoft.com/ru-ru/ powerpoint-help/RZ102673181.aspx?CTT = 1 (Дата обращения: 21.10.2014).
(вкладка Вставка — кнопка Рисунок).
Таким образом, преподаватель вполне
может воспользоваться PowerPoint для создания инфографики, особенно если хорошо владеет этой программой. Однако имеется ряд затруднений:
• PowerPoint предназначен для создания презентаций. Поэтому все макеты и стилевые темы подходят именно для этой цели. Требуются дополнительные усилия для их переработки под инфографику;
• дизайн шаблонов, графиков и диаграмм, а также рисунков SmartArt необходимо существенно дополнять — для того, чтобы создать достаточно качественную работу;
• панель управления PowerPoint довольно сложная. Для создания инфографики многие инструменты и функции являются просто лишними и утяжеляют работу с программой, тогда как часть необходимых инструментов отсутствует.
Удобнее создавать инфографику в специализированных программах. Можно воспользоваться следующими онлайн-сервисами: Easel.ly, Piktochart.com и Infogr.am.
Преподавателю-новичку в деле создания инфографики можно рекомендовать программу Easel.ly.
Её основные преимущества:
• наличие довольно большого количества бесплатных дизайнерских шаблонов (по сравнению с другими программами);
• возможность изменять любой шаблон по собственному усмотрению: удалять или добавлять элементы, менять их размер, местоположение, цветовую гамму и т.п.;
• обладание сервисом довольно широким функционалом при простом управлении;
• возможность сохранять созданную ин-фографику на компьютер в jpeg. или pdf. форматах или поделиться своей работой в социальных сетях;
• присутствие технологии Drag-and-drop;
• возможность (на данный момент) пользоваться сервисом абсолютно бесплатно.
Основной недостаток программы (и весьма существенный) — нет редактора для построения графиков и диаграмм на основе ре-
ютзоггсз ТРАДИЦИОННАЯ
1ЖГ1-1М> яогомксшоют*
Рис 3. Инфографика, созданная на основе шаблона в Easel.Lу («Основы экономики» курс «Обществознание»)
Рис 4. Мастер диаграмм и графиков в Pictochart.com
альных данных. Однако, на данный момент сервис ЕаэеМу находится в стадии Ьэ1а-тес-тирования и продолжает развиваться: добавляются новые функции, шаблоны, работы пользователей, в том числе планируется реализация мастера диаграмм и графиков (рис. 3).
Онлайн-сервис Piktochart.com (рис. 4), позволяет создавать качественную инфогра-фику, в том числе и на основе шаблонов (часть из них бесплатные). Все шаблоны поддаются редактированию. Имеется удобный мастер диаграмм и графиков с большим количеством визуальных вариантов
отображения данных. Вводить конкретные значения для графиков можно как вручную, так и экспортировав уже существующие таблицы в форматах CSV, XLS и XLSX.
По сравнению с Easel.ly сервис имеет более широкий функционал. Однако освоение данной программы займёт некоторое время. Кроме того, для полноценной работы с сервисом потребуется покупка «Pro-акка-унта». Полученную инфографику можно сохранить на компьютере, разместить на сайте или поделиться ею в социальных сетях.
Онлайн-сервис Infogr.am позволит преподавателю попрактиковаться в создании ин-фографики с интерактивными элементами (диаграммы, графики и карты). Кроме того, программа даёт возможность добавлять в инфограмму такие элементы как текст, изображение, видео. Данный онлайн-сер-вис находится в стадии разработки и пока его возможности довольно ограничены. Следует также отметить, что сохранение получившейся инфографики возможно только в случае покупки «Pro-аккаунта». На сегодняшний момент Infogr.am продолжает активно развивать свой функционал и в ближайшее время на нём появится возможность создания видеоинфографики.
Примеры интерактивных работ, созданных с помощью этого сервиса: http://infogr.am/ featured7.
Иллюстрации для инфографики
Часто для создания качественной инфографики требуются определённые фотографии, объекты и элементы, то есть клипарт. Выделяют два основных вида клипарта:
• векторный рисунок — это рисунок, который состоит из отдельных элементарных геометрических объектов: точек, линий, многоугольников и т.п. Чаще всего векторные рисунки представляют собой довольно простые изображения в формате svg.;
• растровый рисунок — это сетка пикселей. Разность цветов этих пикселей образует графический образ, воспринимаемый человеческим глазом как единая картина. Все изображения, создаваемые фотоаппаратами, сканерами, являются растровыми. Основные растровые форматы: jpeg, gif, png, bmp, tif8.
В описанных выше программах имеются собственные библиотеки клипарта, однако их недостаточно для воплощения всех идей.
Рис. 5. Пример векторной и растровой графики
7 Infogr.am: [сайт]. Infogram, 2014. URL: http://infogr.am/featured (Дата обращения: 21.10.2014).
8 Там же.
Ресурсы для поиска векторных и растровых изображений
Ресурс Описание
Openclipart Большая коллекция бесплатных векторных объектов и элементов. Все изображения переданы авторами в общественное пользование и доступны для свободного скачивания. Работы представлены в форматах.эуд ^png, имеются ссылки для вставки выбранных объектов на сайт. Сегодня в хранилище находится более 50 000 клипартов.
Freepik Ресурс, который позволяет искать бесплатные и платные векторные рисунки, обычные фотографии. Следует обращать внимание на условия использования контента.
Stockvault Ресурс, на котором содержится большое количество бесплатных качественных фотографий. Изображения не могут быть использованы в коммерческих целях. Регистрации не требуется.
Flickr Сервис, предназначенный для хранения фотографий и видеороликов. Можно найти фотографии на любую тему. Часть изображений предоставлены для свободного скачивания — обращайте внимание на условия использования, которые определены автором фотографии (см. значки лицензии в правом нижнем углу фотографии).
Coogle Поисковая система. Для более точного поиска изображений удобно задавать расширение файла. Если вы ищете векторное изображение собаки, то запрос необходимо писать так: dog «svg.». Кроме того, изображения можно отфильтровать по условиям использования: раздел Images — вкладка Search Tools — кнопка Usage rights — фильтр labeled for noncommercial reuse (только для некоммерческого использования).
Istockphoto Известное платное хранилище векторной и растровой графики
Как можно обеспечить инфографику необходимыми объектами? Например, преподаватель может воспользоваться бесплатными и платными хранилищами изображений, различными поисковыми ресурсами и даже создать необходимый клипарт самостоятельно (табл.).
Создать или отредактировать клипарт самостоятельно, преподаватель может в различных графических редакторах. Для работы с векторными рисунками можно порекомендовать следующие программы: Inkscape, Inkpad (для Ipad), CorelDraw, Adobe Illustrator. Для работы с растровыми изображениями — Paint, Adobe Photoshop.
Лицензия Creative Commons
При скачивании изображений из различных источников, будьте внимательны, чтобы не нарушить авторских прав. На изображениях можно встретить значки лицензий Creative Commons (далее — СС), которые сгруппированы различным способом. В настоящий момент используется шесть основных лицензий СС, с различным набором прав. Все они содержат требования указания авторства и могут содержать другие
ограничения, однако все разрешают свободное копирование оригинальной работы в некоммерческих целях. Более подробно ознакомиться с лицензиями СС можно на официальном сайте некомерческой организации Сгеа^е Соттопэ8.
Таким образом, инфографика — это современный метод обучения, позволяющий хорошо усвоить учебную информацию, способствующий развитию поисковой деятельности и формированию позиционного мышления. Применение данного метода даёт возможность организовать интересную совместную работу на занятиях, а также способствует _
повышению уровня подготовки специалистов в вузе. □
8 Creative Commons: [сайт]. URL: http:// creativecommons.org (Дата обращения: 21.10.2014).