Инфографика как способ визуализации учебной информации
Международная
публикация
Ж.
Е. ЕрмолаеваБиблиографическое описание статьи для цитирования:
Ермолаева
Ж.
Е.,
Герасимова
И.
Н.,
Лапухова
О.
В. Инфографика как способ визуализации учебной информации // Научно-методический электронный журнал «Концепт». –
2014. – № 11 (ноябрь). – С.
26–30. – URL:
http://e-koncept.ru/2014/14302.htm.
Аннотация. Статья посвящена применению инфографики как одного из методов визуализации учебного материала в процессе обучения учащихся, студентов, курсантов и слушателей. Рассмотрены типы инфографики. Даны примеры её применения на занятиях. Представлен анализ инструментов для создания качественной инфографики в процессе подготовки к учебным занятиям.
Текст статьи
Ермолаева Жаннетта Евгеньевна,кандидат филологических наук, доцент кафедры русского языка и культуры речи ФГБОУ ВПО «Академия Государственной противопожарной службы Министерства Российской Федерации по делам гражданской обороны, чрезвычайным ситуациям и ликвидации последствий стихийных бедствий», г. Москваzhannetta13@gmail.com
Лапухова Оксана Витальевна,директор НОУ ДПО «УчебноКонсультационный центр “Олимп”», г. Москваoksanalapuhova@mail.ru
Герасимова Ирина Николаевна,подполковник внутренней службы, старший преподаватель кафедры экологической безопасности ФГБОУ ВПО «Академия Государственной противопожарной службы Министерства Российской Федерации по делам гражданской обороны, чрезвычайным ситуациям и ликвидации последствий стихийных бедствий»,г.Москваmeegera@mail.ru
Инфографика как способ визуализации учебной информации
Аннотация.Статья посвящена применению инфографики как одногоиз методов визуализации учебного материала в процессе обучения учащихся, студентов, курсантови слушателей. Рассмотрены типы инфографики.Даны примеры её применения на занятиях. Представлен анализ инструментов для создания качественной инфографики в процессе подготовки к учебным занятиям. Ключевые слова: инфографика, метод, визуализация, процесс обучения. Раздел: (01)педагогика; история педагогики и образования; теория и методика обучения и воспитания (по предметным областям).
В условиях организации высшего образования в России на основе компетентностного подхода и информатизации образованиястремление разработать более эффективные способы представления учебной информации обучающимся является злободневной научной задачей.Примеры наглядности и визуализации всегда широко применялись в образовании: опорные схемы и таблицы, оперативные схемы действий, семантические и фреймовые модели, дидактические наглядные пособия, «педагогический рисунок» на доске, метапланы. Проблемами методологии наглядностии визуализации учебной информации занимались классики мировой и отечественной дидактики Я.А. Коменский, Дж.Дьюи, К.Д. Ушинский, И.Я. Лернер, М.И. Махмутов. Вопросы проектирования визуальноинформационной модели рассмотрены в педагогических трудах С.В.Арановой, А.А. Вербицкого, М.К. Мамардашвилии теоретика визуальных исследований Дж. Митчелла [1–4].Проблемы рассмотрения способа информатизации и визуализации изучались такими учеными,как Д. Желязны, В.Лаптев, Д. Ланков, Э.Тафти и другие [5–9].
Сегодня ученые пытаются развести понятия «наглядный» и «визуальный». Значение понятия «наглядный» всегда означало демонстративный, то есть в процессе обучения преподаватель показывает/демонстрирует готовый объект, процесс, явление. А «визуальный» предполагает представление в виде образа. Другими словами,в процессе обучения преподаватель предлагает осмыслить информацию и представить её в видефигуры, объекта, картинки. Сампроцесс визуализации –это свертывание мыслительных содержаний в наглядный образ; будучи воспринятым, образ может быть развернут и может служить опорой адекватных мыслительных и практических действий [10].
Одним из способов визуализации информации является инфографика. Инфоргафика активно используется в печатных изданиях и интернетСМИ, в рекламе,в маркетингеи PR.
В последнее время она стала популярна и в образовании. Визуальное представление сложной учебной информации ясно, содержательно, эстетически привлекательно,становится требованием современности. Что же такое инфографика? Более полное определение дает В. Лаптев: «Инфографика –это область коммуникативного дизайна, в основе которой лежит графическое представление информации, связей, числовых данных и знаний»[11]. На наш взгляд, инфографика представляет собой синтетическую форму организации информационного материала, включающуюв себя, вопервых, визуальные элементы, а вовторых, тексты, которые поясняют эти визуальные элементы. Основная цель инфографики –информирование о какойлибо проблеме, явлении, о ряде фактов. Основное отличие инфографики от других видов визуализации информации –её метафоричность, то есть это не просто график, диаграмма, построенные на основе большого количества данных, это график, в который вставлена визуальная информация, аналогии из жизни, предметы обсуждения.Существует три типа инфографики:статичная –чаще всего одиночныйслайд без анимированных элементов. Наиболее простой и распространенный вид инфографики;интерактивная –содержит анимированные элементы, пользователи могут (в той или иной степени) взаимодействовать с динамическими данными. Этот вид инфографики позволяет визуализировать большее количество информации в одном интерфейсе;видеоинфографика –представляет собой короткий видеоряд, в котором сочетаются визуальные образы данных, иллюстрации и динамический текст. Примеры различных видов инфографики можнопосмотреть на сайте Infogra [12]. Принципы создания инфографики: актуальность и востребованность темы; простота и краткость; креативность; образность; точность и организованность информации; эстетическая привлекательность.Технология создания инфографики:1йшаг –определите цели и задачи, которые необходимо достичь с помощью инфографики (в зависимости от предметной сферы).Стоит принять во внимание, что «в графике очень легко отображать существующее в реальности, значительно труднее перенести в визуальную плоскость отвлеченные понятия и почти невозможно–мнения и комментарии»[13].2йшаг –разбейте информацию на разделы, части, пункты. Каждый раздел представьте отдельным изображением или графиком. Подберите нужные визуальные образы, которые знакомы и частоиспользуются вашей аудиторией.3йшаг –создайте фокус, то есть придумайте историю, основную визуальную метафору, вокруг которой будет строиться инфографика. Она должна быть простой и всем известной.Учебная информация активно воспринимается тогда, когдау обучающихся возникает необходимость в её восприятии. Одно и то же содержание изучаемого предмета одинаковой степени сложности может усваиваться поразному в зависимости от метода его представления, мотивов восприятия и интереса студентов. Как организовать эффективное и результативное обучение студентов, курсантов и слушателей с помощью инфографики? Как преподавателю построить процесс обучения так, чтобы активизировать творческий потенциал слушателей?Инфографика как один из методов визуализации учебной информации может использоваться на лекционных, лабораторных и практических занятиях для создания проблемных ситуаций и организации эффективной поисковой деятельности. Рассмотримприменениеметода инфографики на практическом занятии в курсе «Русский язык и культура речи» по теме«Русский язык в современном мире,его значение». Фрагмент плана1й этап: демонстрируем инфографику «Самые популярные языки мира» и просим обучающихся выделить: тезис, цель, проблему, которую отражает данная инфограмма(рис. 1).
Рис.1. Самые популярные языки мира
2йэтап: распределяем между курсантами/студентами роли (или позиции): лингвист, политик, бизнесмен. Роли могут меняться в зависимости от предложенной для анализа визуальной информации. 3йэтап: просим проанализировать инфографику с точки зрения своей роли (позиции): как эти данные повлияют на дальнейшее изменение языковой ситуации? Как данный языковой расклад может оказать влияние на развитие международных отношений? Какую выгоду эти данные могут принести бизнесуи как на него повлиять?4йэтап: просим обучающихся создать собственную инфографику в защиту своей позиции. Полезно, чтобы студенты не только использовали готовую инфографику, но и создавали собственную: рисовали взаимосвязи, алгоритмы и схемы, придумывали символы к идеям. В процессе создания инфографики обучающиеся самостоятельно должны добывать необходимые сведения и также самостоятельно их обрабатывать. Не только систематизировать факты, но и наглядно представлять результат их систематизации.
Активное участие обучающегося в создании инфографики и научение анализу инфографических моделей и схем –первый важный аспект применения визуализации на занятии. Например, с помощью инфографики можно реализовать работу с понятиями: предложите студентам изпрофессионального текста (речь/статья/видео) вычленить основные понятия и составить простейшую инфограмму, отражающую связи между понятиями и терминами. Применяя данный метод, надо точнопонимать цель, которую преследует преподаватель, прибегая к инфографике: вызвать эмоцию, развлечь, показать портфолио или фото, сделать конспект и т.д.Следует помнить, что инфографика должна быть точно согласована с содержанием материала. Используя различные виды инфографики, не стоит увлекаться её чрезмерным количеством: это рассеивает внимание обучающихся и мешает восприятию главного.Прежде чем приступать к работе,обязательно создайте прототип вашей будущей инфограммы.Схему элементов можно нарисовать от руки. Затем необходимо определиться с программой, которая поможет вам в создании инфографики. Выделим оптимальные критерии при выборе такой программы:доступность. Желательно, чтобы используемая программа была бесплатной и не требовала сложной установки на компьютере;простота и удобство использования. Программа должнаподходить человеку, не обладающемупрофессиональными дизайнерскими навыками;возможность создавать инфографику быстро: наличие большого количества шаблонов, готовых графических элементов и т.п.;поддержка кириллицы в различных шрифтах.Например, можно использовать доступную программу PowerРoint (пакет Microsoft Office). В ней имеются различные макеты и темы для создания слайдов, однако проще всего воспользоваться шаблонами, специально разработанными для создания инфографики в этой программе. Например, на сайте Hubspot[14] представлены пять типов таких шаблонов:для создания 4цветной инфографики;инфографики с данными статистики;сравнительной инфографики;плиточной инфографики в духе сайта “Pinterest”;базовый шаблон для инфографики.В последних версиях PowerPoint (2010, 2013 гг.) имеются рисунки SmartArt (вкладка Вставка –кнопка SmartArt). По сути,это инструмент для структурирования текстовой информации и представления ее в графическом виде (в виде понятных схем). Рисунки SmartArt также можно с успехомиспользовать как «заготовки»для инфографики. Преподаватель может изменять их по своему усмотрению и добавлять необходимую информацию. На сайте производителя можно найти подробный урок по работе со SmartArt [15]. Приведем пример инфографики, созданной на основе такого рисунка (см. рис. 2, курс «Основы экономики»).В отличие от презентации, предполагается,что инфографика –это один слайд, на котором нужно уместить всю необходимую информацию по теме. Поэтому слайдоснова для инфографики очень часто имеет вид длинного прямоугольника, на котором последовательно расположены все элементы. Размер слайда в PowerPoint можно настроить так: вкладка Дизайн –кнопка Параметры страницы. Мы рекомендуем размер10×13 дюймов.Рис.2.Образец рисунка SmartArt и инфографики «Факторы производства»
В инфографику, создаваемую в PowerPoint, можно добавить диаграммы, графики, различные иллюстрации и необходимые графические элементы. В программе имеются собственные инструменты для создания графиков и рисования простых объектов, а также довольно большая библиотека готовых картинок (вкладка Вставка–кнопка Картинка). Можно добавить иллюстрации и с внешних источников (вкладка Вставка –кнопка Рисунок).Таким образом, преподаватель вполне может воспользоваться PowerPoint для создания инфографики, особенно если хорошо владеет этой программой. Однако имеется ряд затруднений:PowerPoint предназначен для создания презентаций. Поэтому все макеты и стилевые темы подходят именно для этой цели. Требуются дополнительные усилия для их переработки под инфографику;дизайн шаблонов, графиков и диаграмм, а также рисунков SmartArt необходимо существенно дополнять, для тогочтобы создать достаточно качественную работу;панель управления PowerPoint довольно сложная. Для создания инфографики многие инструменты ифункции являются просто лишними и утяжеляют работу с программой, тогда как часть необходимых инструментов отсутствует.
Удобнее создавать инфографику в специализированных программах. Можно воспользоваться следующими онлайнсервисами: Easel.ly, Piktochart.com и Infogr.am.Преподавателюновичку в деле создания инфографики можно рекомендовать программуEasel.ly. Ее основные преимущества:наличие довольно большого количества бесплатных дизайнерских шаблонов (по сравнению с другими программами);любой шаблон можно изменять по собственному усмотрению: удалять или добавлять элементы, менять их размер, местоположение, цветовую гамму и т.п.;сервис обладает довольно широким функционаломпри простом управлении;возможность сохранять созданную инфографикуна компьютер в jpegили pdfформатах или поделиться своей работой в социальных сетях;присутствует технология Draganddrop;возможность (на данный момент) пользоваться сервисом абсолютно бесплатно.Основной недостаток программы (и весьма существенный) –нет редактора для построения графиков и диаграмм наоснове реальных данных. ОднакосейчассервисEasel.ly находится в стадии betaтестирования и продолжает развиваться: добавляются новые функции, шаблоны, работы пользователей, в том числе планируется реализация мастера диаграмм и графиков(рис. 3).
Рис.3.Инфографика, созданная на основе шаблона в Easel.Lу (курс «Основы экономики»)
Онлайнсервис Piktochart.com позволяет создавать качественную инфографику, в том числе и на основе шаблонов (часть из них бесплатные). Все шаблоны поддаются редактированию. Имеется удобный мастер диаграмм и графиков с большим количеством визуальных вариантов отображения данных. Вводить конкретные значения для графиков можно как вручную, так и экспортировав уже существующие таблицы в форматах CSV, XLS и XLSX. По сравнению с Easel.ly,сервис имеет более широкий функционал. Однако освоение данной программы займет некоторое время. Кроме того, для полноценной работы с сервисом потребуется покупка «Proаккаунта». Полученную инфографику можно сохранить на компьютере, разместить на сайте илиподелиться ею в социальных сетях(рис. 4).
Рис.4. Мастер диаграмм и графиков в Pictochart.comОнлайнсервис Infogr.am позволит преподавателю попрактиковаться в создании инфографики с интерактивными элементами (диаграммы, графики и карты). Кроме того, программадает возможность добавлять в инфограмму такие элементы,как текст, изображение, видео. Данный онлайнсервис находится в стадии разработки,и пока его возможности довольно ограничены.Следуеттакже отметить, что сохранение получившейся инфографики возможнотолько в случае покупки «Proаккаунта».На сегодняшний момент Infogr.am продолжает активно развивать свой функционал,и в ближайшее время на нем появится возможность создания видеоинфографики. Примеры интерактивных работ,созданных с помощью этого сервиса: http://infogr.am/featured[16].Часто для создания качественной инфографики требуются определенные фотографии, объекты и элементы, т.е.клипарт. Выделяют два основных вида клипарта:векторный рисунок–это рисунок, который состоит из отдельных элементарных геометрических объектов: точек, линий, многоугольников и т.п.Чаще всего векторные рисунки представляют собой довольно простые изображения в формате svg;растровый рисунок–это сетка пикселей. Разность цветов этих пикселей образует графический образ, воспринимаемый человеческим глазом как единая картина. Все изображения, создаваемые фотоаппаратами, сканерами и т.п., являются растровыми. Основные растровые форматы: jpeg, gif, png, bmp, tif[17](рис. 5).
Рис.5.Пример векторной и растровой графики
В описанных выше программах имеются собственные библиотеки клипарта, однако их недостаточно для воплощения всех идей. Как можно обеспечить инфографику необходимыми объектами? Например, преподаватель может воспользоваться бесплатными и платными хранилищами изображений, различными поисковыми ресурсами и даже создать необходимый клипарт самостоятельно.Создать или отредактировать клипарт самостоятельнопреподаватель может в различных графических редакторах. Для работы с векторными рисунками можно порекомендовать следующие программы: Inkscape,Inkpad(для Ipad) , CorelDraw, Adobe Illustrator. Для работы с растровыми изображениями–Paint, Adobe Photoshop.
Ресурсы для поиска векторных и растровых изображений
РесурсОписаниеOpenclipartБольшая коллекция бесплатных векторных объектов и элементов. Все изображения переданы авторами в общественное пользование и доступны для свободного скачивания. Работы представлены в форматах svgи png, имеются ссылки для вставки выбранных объектов на сайт. На сегодняшнийдень в хранилище находится более 50000 клипартовFreepikРесурс, который позволяет искатьбесплатные и платные векторные рисунки,обычные фотографии. Следует обращать внимание на условия использования контентаStockvaultРесурс, на котором содержится большое количество бесплатных качественных фотографий. Изображения не могут быть использованы в коммерческих целях. Регистрация не требуетсяFlickrCервис, предназначенный для хранения фотографий и видеороликов. Можно найти фотографии на любую тему. Часть изображений предоставленадля свободного скачивания –обращайте вниманиена условия использования, которые определены автором фотографии (см. значки лицензии вправом нижнем углу фотографии)CoogleПоисковая система. Для более точного поискаизображений удобно задавать расширение файла. Если вы ищете векторное изображение собаки, то запрос необходимо писать так: dog “svg”. Кроме того,изображения можно отфильтровать по условиям использования: раздел Images –вкладка Search Tools–кнопка Usage rights –фильтрlabeled for noncommercial reuse («только для некоммерческого использования»)IstockphotoИзвестное платное хранилище векторной и растровой графики
При скачивании изображений из различных источниковбудьте внимательны, чтобы не нарушить авторских прав. На изображениях можно встретитьзначки лицензий Creative Commons (далее–СС), которые сгруппированы различным способом. В настоящий момент используется шесть основных лицензий ССс различным набором прав. Все они содержат требования указания авторства и могут содержать другие ограничения, однако все разрешают свободное копирование оригинальной работы в некоммерческих целях. Более подробно ознакомиться с лицензиями CC можно на официальном сайте некоммерческой организации Сreative Commons [18].Таким образом, инфографика –это современный метод обучения, позволяющий хорошо усвоить учебную информацию, способствующий развитию поисковой деятельности и формированию позиционного мышления. Применение данного метода дает возможность организовать интересную совместную работу на занятиях, а также способствует повышению уровня подготовки специалистов в вузе.
Ссылки на источники1.Аранова С.В. К методологии визуализации учебной информации. Интеграция художественного и логического // ВестникАдыгейского государственного университета. Серия 3: Педагогика и психология. –2011. –№2. –С.18–24.2.ВербицкийА. А. Активное обучение в высшей школе: контекстный подход. –М.: Высш. шк., 1991. –207 с.3.Желязны Д. Говори на языке диаграмм. –М.: Манн, Иванов и Фербер, 2012. –320 с.4.Lankow J., Ritchie J., Crooks R. Infographics: the Power of Visual Storytelling. –New Jersey: John Wiley&Sons Inc,2012. –263 p.5.Желязны Д.Указ. соч. 6.Лаптев В. Изобразительная статистика. –М.: Эйдос, 2012. –180 с.1.Мамардашвили М.К. Проблема сознания и философское призвание //Как я понимаю философию. Изд. 2е. –М., 1992.7.НекляевС.Э.Инфографика: принципы визуальной журналистики. Современное журналистское образование: технологии и особенности преподавания / под ред. Е.Л.Вартановой.–М.: МедиаМир, 2008.–248с.Mitchell W.J.T. What is visual culture?//Irvin Lavin, ed. Meaning in the Visual Arts: Views from the Outside. –Princeton, N.J.: Institute for Advanced Study, 1995.9.Tufte E. Beautiful Evidence. –Cheshire: Graphic Press,2006. –213 p.10.ВербицкийА. А.Указ. соч.11.Лаптев В.Указ. соч. –С. 7.12.Infogra. –М., 2014. –URL: http:/infogra.ru (дата обращения: 21.10.2014).13.Некляев С.Э.Указ. соч. –С. 138.14.Hubspot. –HubSpot, Inc., 2014. –URL: http://offers.hubspot.com/howtoeasilycreatefivefabulousinfographicsinpowerpoint(дата обращения: 21.10.2014).15.MicrosoftOffice/Корпорация Майкрософт (MicrosoftCorporation), 2014. –URL: http://office.microsoft.com/ruru/powerpointhelp/RZ102673181.aspx?CTT=1(дата обращения: 21.10.2014).16.Infogr.am. –Infogram, 2014. –URL: http://infogr.am/featured(дата обращения: 21.10.2014).17.Графинг 2.1–работа с векторной графикой. –М., 2010–2014. –URL:http://graphing.ru/i/rastandvector/(дата обращения: 21.10.2014)18.Сreative Сommons. –URL: http://creativecommons.org(дата обращения: 21.10.2014).
Zhannetta Ermolaeva, CandidateofPhilologicalSciences,Associate ProfessoratthechairoftheRussian Language and Standardsof Speech, Academy of Public Fire Service of the Russian Emergency Ministry, MoscowZhannetta13@gmail.comIrina Gerasimova, Lieutenantcolonelofinternalservice,seniorlectureratthechair ofEcological Safety, Academy of Public Fire Service of the Russian Emergency Ministry, Moscowmeegera@mail.ruOksanaLapukhova,
Director of Training and Consulting Center "Olympus", Moscowoksanalapuhova@mail.ruInfographics as a way of educational information rendering Abstract.The paperis devoted to the use of infographics as one of the visualization methods of educational material in the learning process. The paper considers types of infographics and the examples of thierapplication in the classroom. There is theanalysis of tools for creating highquality infographics in preparation for training.
Keywords:infographics, method, visualization, learning process.References1.Aranova, S. V. (2011) «K metodologii vizualizacii uchebnoj informacii. Integracija hudozhestvennogo i logicheskogo», Vestnik Adygejskogo gosudarstvennogo universiteta. Serija 3: Pedagogika i psihologija, № 2, pp.18–24(in Russian).2.Verbickij, A. A. (1991) Aktivnoe obuchenie v vysshej shkole: kontekstnyj podhod, Vyssh. shk., Moscow,207 p.(in Russian).3.Zheljazny, D. (2012) Govori na jazyke diagramm,Mann, Ivanov i Ferber, Moscow,320 p.(in Russian).4.Lankow, J., Ritchie,J. & Crooks, R. (2012) Infographics: the Power of Visual Storytelling,John Wiley&Sons Inc, New Jersey, 263 p.(in English).5.Zheljazny, D. (2012) Op. cit.6.Laptev, V. (2012) Izobrazitel'naja statistika,Jejdos, Moscow,180 p.(in Russian).1.Mamardashvili, M. K. (1992) «Problema soznanija i filosofskoe prizvanie»,in Kak ja ponimaju filosofiju. Izd. 2e,Moscow (in Russian).7.Nekljaev, S. Je. & Vartanova, E. L. (ed.) (2008) Infografika: principy vizual'noj zhurnalistiki. Sovremennoe zhurnalistskoe obrazovanie: tehnologii i osobennosti prepodavanija,MediaMir, Moscow,248 p.(in Russian).8.Mitchell, W. J. T. (1995) «What is visual culture?», in Irvin Lavin(ed.)Meaningin the Visual Arts: Views from the Outside,Princeton, Institute for Advanced Study,N.J.(in English).9.Tufte, E. (2006) Beautiful Evidence,Graphic Press,Cheshire, 213 p.(in English).10.Verbickij, A. A. (1991) Op. cit.11.Laptev, V. (2012)Op. cit.,p. 7.12.Infogra(2014) Moscow.Available at: http:/infogra.ru (data obrashhenija: 21.10.2014)(in Russian).13.Nekljaev, S. Je. & Vartanova, E. L. (ed.) (2008) Op. cit.,p. 138.14.Hubspot, HubSpot, Inc., 2014.Available at: http://offers.hubspot.com/howtoeasilycreatefivefabulousinfographicsinpowerpoint (data obrashhenija: 21.10.2014)(in English).Ермолаева Ж. Е., Лапухова О. В., Герасимова И. Н. Инфографика как способ визуализации учебной информации // Концепт. –2014. –№11(ноябрь).–ART14302. –0,5п. л. –URL: http://ekoncept.ru/2014/14302.htm. –Гос. рег. Эл№ФС 7749965.–ISSN 2304120X.
Microsoft Office,Korporacija Majkrosoft (Microsoft Corporation), 2014.Available at: http://office.microsoft.com/ruru/powerpointhelp/RZ102673181.aspx?CTT=1 (data obrashhenija: 21.10.2014)(in English).16.Infogr.am, Infogram, 2014/Available at: http://infogr.am/featured (data obrashhenija: 21.10.2014)(in English).17.Grafing 2.1 –rabota s vektornoj grafikoj,Moscow, 2010–2014/Available at: http://graphing.ru/i/rastandvector/ (data obrashhenija: 21.10.2014)(in Russian).18.SreativeSommons.Available at: http://creativecommons.org (data obrashhenija: 21.10.2014)(in English).
Рекомендованокпубликации:
Горевым П. М., кандидатом педагогических наук, главным редактором журнала «Концепт»
Лапухова Оксана Витальевна,директор НОУ ДПО «УчебноКонсультационный центр “Олимп”», г. Москваoksanalapuhova@mail.ru
Герасимова Ирина Николаевна,подполковник внутренней службы, старший преподаватель кафедры экологической безопасности ФГБОУ ВПО «Академия Государственной противопожарной службы Министерства Российской Федерации по делам гражданской обороны, чрезвычайным ситуациям и ликвидации последствий стихийных бедствий»,г.Москваmeegera@mail.ru
Инфографика как способ визуализации учебной информации
Аннотация.Статья посвящена применению инфографики как одногоиз методов визуализации учебного материала в процессе обучения учащихся, студентов, курсантови слушателей. Рассмотрены типы инфографики.Даны примеры её применения на занятиях. Представлен анализ инструментов для создания качественной инфографики в процессе подготовки к учебным занятиям. Ключевые слова: инфографика, метод, визуализация, процесс обучения. Раздел: (01)педагогика; история педагогики и образования; теория и методика обучения и воспитания (по предметным областям).
В условиях организации высшего образования в России на основе компетентностного подхода и информатизации образованиястремление разработать более эффективные способы представления учебной информации обучающимся является злободневной научной задачей.Примеры наглядности и визуализации всегда широко применялись в образовании: опорные схемы и таблицы, оперативные схемы действий, семантические и фреймовые модели, дидактические наглядные пособия, «педагогический рисунок» на доске, метапланы. Проблемами методологии наглядностии визуализации учебной информации занимались классики мировой и отечественной дидактики Я.А. Коменский, Дж.Дьюи, К.Д. Ушинский, И.Я. Лернер, М.И. Махмутов. Вопросы проектирования визуальноинформационной модели рассмотрены в педагогических трудах С.В.Арановой, А.А. Вербицкого, М.К. Мамардашвилии теоретика визуальных исследований Дж. Митчелла [1–4].Проблемы рассмотрения способа информатизации и визуализации изучались такими учеными,как Д. Желязны, В.Лаптев, Д. Ланков, Э.Тафти и другие [5–9].
Сегодня ученые пытаются развести понятия «наглядный» и «визуальный». Значение понятия «наглядный» всегда означало демонстративный, то есть в процессе обучения преподаватель показывает/демонстрирует готовый объект, процесс, явление. А «визуальный» предполагает представление в виде образа. Другими словами,в процессе обучения преподаватель предлагает осмыслить информацию и представить её в видефигуры, объекта, картинки. Сампроцесс визуализации –это свертывание мыслительных содержаний в наглядный образ; будучи воспринятым, образ может быть развернут и может служить опорой адекватных мыслительных и практических действий [10].
Одним из способов визуализации информации является инфографика. Инфоргафика активно используется в печатных изданиях и интернетСМИ, в рекламе,в маркетингеи PR.
В последнее время она стала популярна и в образовании. Визуальное представление сложной учебной информации ясно, содержательно, эстетически привлекательно,становится требованием современности. Что же такое инфографика? Более полное определение дает В. Лаптев: «Инфографика –это область коммуникативного дизайна, в основе которой лежит графическое представление информации, связей, числовых данных и знаний»[11]. На наш взгляд, инфографика представляет собой синтетическую форму организации информационного материала, включающуюв себя, вопервых, визуальные элементы, а вовторых, тексты, которые поясняют эти визуальные элементы. Основная цель инфографики –информирование о какойлибо проблеме, явлении, о ряде фактов. Основное отличие инфографики от других видов визуализации информации –её метафоричность, то есть это не просто график, диаграмма, построенные на основе большого количества данных, это график, в который вставлена визуальная информация, аналогии из жизни, предметы обсуждения.Существует три типа инфографики:статичная –чаще всего одиночныйслайд без анимированных элементов. Наиболее простой и распространенный вид инфографики;интерактивная –содержит анимированные элементы, пользователи могут (в той или иной степени) взаимодействовать с динамическими данными. Этот вид инфографики позволяет визуализировать большее количество информации в одном интерфейсе;видеоинфографика –представляет собой короткий видеоряд, в котором сочетаются визуальные образы данных, иллюстрации и динамический текст. Примеры различных видов инфографики можнопосмотреть на сайте Infogra [12]. Принципы создания инфографики: актуальность и востребованность темы; простота и краткость; креативность; образность; точность и организованность информации; эстетическая привлекательность.Технология создания инфографики:1йшаг –определите цели и задачи, которые необходимо достичь с помощью инфографики (в зависимости от предметной сферы).Стоит принять во внимание, что «в графике очень легко отображать существующее в реальности, значительно труднее перенести в визуальную плоскость отвлеченные понятия и почти невозможно–мнения и комментарии»[13].2йшаг –разбейте информацию на разделы, части, пункты. Каждый раздел представьте отдельным изображением или графиком. Подберите нужные визуальные образы, которые знакомы и частоиспользуются вашей аудиторией.3йшаг –создайте фокус, то есть придумайте историю, основную визуальную метафору, вокруг которой будет строиться инфографика. Она должна быть простой и всем известной.Учебная информация активно воспринимается тогда, когдау обучающихся возникает необходимость в её восприятии. Одно и то же содержание изучаемого предмета одинаковой степени сложности может усваиваться поразному в зависимости от метода его представления, мотивов восприятия и интереса студентов. Как организовать эффективное и результативное обучение студентов, курсантов и слушателей с помощью инфографики? Как преподавателю построить процесс обучения так, чтобы активизировать творческий потенциал слушателей?Инфографика как один из методов визуализации учебной информации может использоваться на лекционных, лабораторных и практических занятиях для создания проблемных ситуаций и организации эффективной поисковой деятельности. Рассмотримприменениеметода инфографики на практическом занятии в курсе «Русский язык и культура речи» по теме«Русский язык в современном мире,его значение». Фрагмент плана1й этап: демонстрируем инфографику «Самые популярные языки мира» и просим обучающихся выделить: тезис, цель, проблему, которую отражает данная инфограмма(рис. 1).
Рис.1. Самые популярные языки мира
2йэтап: распределяем между курсантами/студентами роли (или позиции): лингвист, политик, бизнесмен. Роли могут меняться в зависимости от предложенной для анализа визуальной информации. 3йэтап: просим проанализировать инфографику с точки зрения своей роли (позиции): как эти данные повлияют на дальнейшее изменение языковой ситуации? Как данный языковой расклад может оказать влияние на развитие международных отношений? Какую выгоду эти данные могут принести бизнесуи как на него повлиять?4йэтап: просим обучающихся создать собственную инфографику в защиту своей позиции. Полезно, чтобы студенты не только использовали готовую инфографику, но и создавали собственную: рисовали взаимосвязи, алгоритмы и схемы, придумывали символы к идеям. В процессе создания инфографики обучающиеся самостоятельно должны добывать необходимые сведения и также самостоятельно их обрабатывать. Не только систематизировать факты, но и наглядно представлять результат их систематизации.
Активное участие обучающегося в создании инфографики и научение анализу инфографических моделей и схем –первый важный аспект применения визуализации на занятии. Например, с помощью инфографики можно реализовать работу с понятиями: предложите студентам изпрофессионального текста (речь/статья/видео) вычленить основные понятия и составить простейшую инфограмму, отражающую связи между понятиями и терминами. Применяя данный метод, надо точнопонимать цель, которую преследует преподаватель, прибегая к инфографике: вызвать эмоцию, развлечь, показать портфолио или фото, сделать конспект и т.д.Следует помнить, что инфографика должна быть точно согласована с содержанием материала. Используя различные виды инфографики, не стоит увлекаться её чрезмерным количеством: это рассеивает внимание обучающихся и мешает восприятию главного.Прежде чем приступать к работе,обязательно создайте прототип вашей будущей инфограммы.Схему элементов можно нарисовать от руки. Затем необходимо определиться с программой, которая поможет вам в создании инфографики. Выделим оптимальные критерии при выборе такой программы:доступность. Желательно, чтобы используемая программа была бесплатной и не требовала сложной установки на компьютере;простота и удобство использования. Программа должнаподходить человеку, не обладающемупрофессиональными дизайнерскими навыками;возможность создавать инфографику быстро: наличие большого количества шаблонов, готовых графических элементов и т.п.;поддержка кириллицы в различных шрифтах.Например, можно использовать доступную программу PowerРoint (пакет Microsoft Office). В ней имеются различные макеты и темы для создания слайдов, однако проще всего воспользоваться шаблонами, специально разработанными для создания инфографики в этой программе. Например, на сайте Hubspot[14] представлены пять типов таких шаблонов:для создания 4цветной инфографики;инфографики с данными статистики;сравнительной инфографики;плиточной инфографики в духе сайта “Pinterest”;базовый шаблон для инфографики.В последних версиях PowerPoint (2010, 2013 гг.) имеются рисунки SmartArt (вкладка Вставка –кнопка SmartArt). По сути,это инструмент для структурирования текстовой информации и представления ее в графическом виде (в виде понятных схем). Рисунки SmartArt также можно с успехомиспользовать как «заготовки»для инфографики. Преподаватель может изменять их по своему усмотрению и добавлять необходимую информацию. На сайте производителя можно найти подробный урок по работе со SmartArt [15]. Приведем пример инфографики, созданной на основе такого рисунка (см. рис. 2, курс «Основы экономики»).В отличие от презентации, предполагается,что инфографика –это один слайд, на котором нужно уместить всю необходимую информацию по теме. Поэтому слайдоснова для инфографики очень часто имеет вид длинного прямоугольника, на котором последовательно расположены все элементы. Размер слайда в PowerPoint можно настроить так: вкладка Дизайн –кнопка Параметры страницы. Мы рекомендуем размер10×13 дюймов.Рис.2.Образец рисунка SmartArt и инфографики «Факторы производства»
В инфографику, создаваемую в PowerPoint, можно добавить диаграммы, графики, различные иллюстрации и необходимые графические элементы. В программе имеются собственные инструменты для создания графиков и рисования простых объектов, а также довольно большая библиотека готовых картинок (вкладка Вставка–кнопка Картинка). Можно добавить иллюстрации и с внешних источников (вкладка Вставка –кнопка Рисунок).Таким образом, преподаватель вполне может воспользоваться PowerPoint для создания инфографики, особенно если хорошо владеет этой программой. Однако имеется ряд затруднений:PowerPoint предназначен для создания презентаций. Поэтому все макеты и стилевые темы подходят именно для этой цели. Требуются дополнительные усилия для их переработки под инфографику;дизайн шаблонов, графиков и диаграмм, а также рисунков SmartArt необходимо существенно дополнять, для тогочтобы создать достаточно качественную работу;панель управления PowerPoint довольно сложная. Для создания инфографики многие инструменты ифункции являются просто лишними и утяжеляют работу с программой, тогда как часть необходимых инструментов отсутствует.
Удобнее создавать инфографику в специализированных программах. Можно воспользоваться следующими онлайнсервисами: Easel.ly, Piktochart.com и Infogr.am.Преподавателюновичку в деле создания инфографики можно рекомендовать программуEasel.ly. Ее основные преимущества:наличие довольно большого количества бесплатных дизайнерских шаблонов (по сравнению с другими программами);любой шаблон можно изменять по собственному усмотрению: удалять или добавлять элементы, менять их размер, местоположение, цветовую гамму и т.п.;сервис обладает довольно широким функционаломпри простом управлении;возможность сохранять созданную инфографикуна компьютер в jpegили pdfформатах или поделиться своей работой в социальных сетях;присутствует технология Draganddrop;возможность (на данный момент) пользоваться сервисом абсолютно бесплатно.Основной недостаток программы (и весьма существенный) –нет редактора для построения графиков и диаграмм наоснове реальных данных. ОднакосейчассервисEasel.ly находится в стадии betaтестирования и продолжает развиваться: добавляются новые функции, шаблоны, работы пользователей, в том числе планируется реализация мастера диаграмм и графиков(рис. 3).
Рис.3.Инфографика, созданная на основе шаблона в Easel.Lу (курс «Основы экономики»)
Онлайнсервис Piktochart.com позволяет создавать качественную инфографику, в том числе и на основе шаблонов (часть из них бесплатные). Все шаблоны поддаются редактированию. Имеется удобный мастер диаграмм и графиков с большим количеством визуальных вариантов отображения данных. Вводить конкретные значения для графиков можно как вручную, так и экспортировав уже существующие таблицы в форматах CSV, XLS и XLSX. По сравнению с Easel.ly,сервис имеет более широкий функционал. Однако освоение данной программы займет некоторое время. Кроме того, для полноценной работы с сервисом потребуется покупка «Proаккаунта». Полученную инфографику можно сохранить на компьютере, разместить на сайте илиподелиться ею в социальных сетях(рис. 4).
Рис.4. Мастер диаграмм и графиков в Pictochart.comОнлайнсервис Infogr.am позволит преподавателю попрактиковаться в создании инфографики с интерактивными элементами (диаграммы, графики и карты). Кроме того, программадает возможность добавлять в инфограмму такие элементы,как текст, изображение, видео. Данный онлайнсервис находится в стадии разработки,и пока его возможности довольно ограничены.Следуеттакже отметить, что сохранение получившейся инфографики возможнотолько в случае покупки «Proаккаунта».На сегодняшний момент Infogr.am продолжает активно развивать свой функционал,и в ближайшее время на нем появится возможность создания видеоинфографики. Примеры интерактивных работ,созданных с помощью этого сервиса: http://infogr.am/featured[16].Часто для создания качественной инфографики требуются определенные фотографии, объекты и элементы, т.е.клипарт. Выделяют два основных вида клипарта:векторный рисунок–это рисунок, который состоит из отдельных элементарных геометрических объектов: точек, линий, многоугольников и т.п.Чаще всего векторные рисунки представляют собой довольно простые изображения в формате svg;растровый рисунок–это сетка пикселей. Разность цветов этих пикселей образует графический образ, воспринимаемый человеческим глазом как единая картина. Все изображения, создаваемые фотоаппаратами, сканерами и т.п., являются растровыми. Основные растровые форматы: jpeg, gif, png, bmp, tif[17](рис. 5).
Рис.5.Пример векторной и растровой графики
В описанных выше программах имеются собственные библиотеки клипарта, однако их недостаточно для воплощения всех идей. Как можно обеспечить инфографику необходимыми объектами? Например, преподаватель может воспользоваться бесплатными и платными хранилищами изображений, различными поисковыми ресурсами и даже создать необходимый клипарт самостоятельно.Создать или отредактировать клипарт самостоятельнопреподаватель может в различных графических редакторах. Для работы с векторными рисунками можно порекомендовать следующие программы: Inkscape,Inkpad(для Ipad) , CorelDraw, Adobe Illustrator. Для работы с растровыми изображениями–Paint, Adobe Photoshop.
Ресурсы для поиска векторных и растровых изображений
РесурсОписаниеOpenclipartБольшая коллекция бесплатных векторных объектов и элементов. Все изображения переданы авторами в общественное пользование и доступны для свободного скачивания. Работы представлены в форматах svgи png, имеются ссылки для вставки выбранных объектов на сайт. На сегодняшнийдень в хранилище находится более 50000 клипартовFreepikРесурс, который позволяет искатьбесплатные и платные векторные рисунки,обычные фотографии. Следует обращать внимание на условия использования контентаStockvaultРесурс, на котором содержится большое количество бесплатных качественных фотографий. Изображения не могут быть использованы в коммерческих целях. Регистрация не требуетсяFlickrCервис, предназначенный для хранения фотографий и видеороликов. Можно найти фотографии на любую тему. Часть изображений предоставленадля свободного скачивания –обращайте вниманиена условия использования, которые определены автором фотографии (см. значки лицензии вправом нижнем углу фотографии)CoogleПоисковая система. Для более точного поискаизображений удобно задавать расширение файла. Если вы ищете векторное изображение собаки, то запрос необходимо писать так: dog “svg”. Кроме того,изображения можно отфильтровать по условиям использования: раздел Images –вкладка Search Tools–кнопка Usage rights –фильтрlabeled for noncommercial reuse («только для некоммерческого использования»)IstockphotoИзвестное платное хранилище векторной и растровой графики
При скачивании изображений из различных источниковбудьте внимательны, чтобы не нарушить авторских прав. На изображениях можно встретитьзначки лицензий Creative Commons (далее–СС), которые сгруппированы различным способом. В настоящий момент используется шесть основных лицензий ССс различным набором прав. Все они содержат требования указания авторства и могут содержать другие ограничения, однако все разрешают свободное копирование оригинальной работы в некоммерческих целях. Более подробно ознакомиться с лицензиями CC можно на официальном сайте некоммерческой организации Сreative Commons [18].Таким образом, инфографика –это современный метод обучения, позволяющий хорошо усвоить учебную информацию, способствующий развитию поисковой деятельности и формированию позиционного мышления. Применение данного метода дает возможность организовать интересную совместную работу на занятиях, а также способствует повышению уровня подготовки специалистов в вузе.
Ссылки на источники1.Аранова С.В. К методологии визуализации учебной информации. Интеграция художественного и логического // ВестникАдыгейского государственного университета. Серия 3: Педагогика и психология. –2011. –№2. –С.18–24.2.ВербицкийА. А. Активное обучение в высшей школе: контекстный подход. –М.: Высш. шк., 1991. –207 с.3.Желязны Д. Говори на языке диаграмм. –М.: Манн, Иванов и Фербер, 2012. –320 с.4.Lankow J., Ritchie J., Crooks R. Infographics: the Power of Visual Storytelling. –New Jersey: John Wiley&Sons Inc,2012. –263 p.5.Желязны Д.Указ. соч. 6.Лаптев В. Изобразительная статистика. –М.: Эйдос, 2012. –180 с.1.Мамардашвили М.К. Проблема сознания и философское призвание //Как я понимаю философию. Изд. 2е. –М., 1992.7.НекляевС.Э.Инфографика: принципы визуальной журналистики. Современное журналистское образование: технологии и особенности преподавания / под ред. Е.Л.Вартановой.–М.: МедиаМир, 2008.–248с.Mitchell W.J.T. What is visual culture?//Irvin Lavin, ed. Meaning in the Visual Arts: Views from the Outside. –Princeton, N.J.: Institute for Advanced Study, 1995.9.Tufte E. Beautiful Evidence. –Cheshire: Graphic Press,2006. –213 p.10.ВербицкийА. А.Указ. соч.11.Лаптев В.Указ. соч. –С. 7.12.Infogra. –М., 2014. –URL: http:/infogra.ru (дата обращения: 21.10.2014).13.Некляев С.Э.Указ. соч. –С. 138.14.Hubspot. –HubSpot, Inc., 2014. –URL: http://offers.hubspot.com/howtoeasilycreatefivefabulousinfographicsinpowerpoint(дата обращения: 21.10.2014).15.MicrosoftOffice/Корпорация Майкрософт (MicrosoftCorporation), 2014. –URL: http://office.microsoft.com/ruru/powerpointhelp/RZ102673181.aspx?CTT=1(дата обращения: 21.10.2014).16.Infogr.am. –Infogram, 2014. –URL: http://infogr.am/featured(дата обращения: 21.10.2014).17.Графинг 2.1–работа с векторной графикой. –М., 2010–2014. –URL:http://graphing.ru/i/rastandvector/(дата обращения: 21.10.2014)18.Сreative Сommons. –URL: http://creativecommons.org(дата обращения: 21.10.2014).
Zhannetta Ermolaeva, CandidateofPhilologicalSciences,Associate ProfessoratthechairoftheRussian Language and Standardsof Speech, Academy of Public Fire Service of the Russian Emergency Ministry, MoscowZhannetta13@gmail.comIrina Gerasimova, Lieutenantcolonelofinternalservice,seniorlectureratthechair ofEcological Safety, Academy of Public Fire Service of the Russian Emergency Ministry, Moscowmeegera@mail.ruOksanaLapukhova,
Director of Training and Consulting Center "Olympus", Moscowoksanalapuhova@mail.ruInfographics as a way of educational information rendering Abstract.The paperis devoted to the use of infographics as one of the visualization methods of educational material in the learning process. The paper considers types of infographics and the examples of thierapplication in the classroom. There is theanalysis of tools for creating highquality infographics in preparation for training.
Keywords:infographics, method, visualization, learning process.References1.Aranova, S. V. (2011) «K metodologii vizualizacii uchebnoj informacii. Integracija hudozhestvennogo i logicheskogo», Vestnik Adygejskogo gosudarstvennogo universiteta. Serija 3: Pedagogika i psihologija, № 2, pp.18–24(in Russian).2.Verbickij, A. A. (1991) Aktivnoe obuchenie v vysshej shkole: kontekstnyj podhod, Vyssh. shk., Moscow,207 p.(in Russian).3.Zheljazny, D. (2012) Govori na jazyke diagramm,Mann, Ivanov i Ferber, Moscow,320 p.(in Russian).4.Lankow, J., Ritchie,J. & Crooks, R. (2012) Infographics: the Power of Visual Storytelling,John Wiley&Sons Inc, New Jersey, 263 p.(in English).5.Zheljazny, D. (2012) Op. cit.6.Laptev, V. (2012) Izobrazitel'naja statistika,Jejdos, Moscow,180 p.(in Russian).1.Mamardashvili, M. K. (1992) «Problema soznanija i filosofskoe prizvanie»,in Kak ja ponimaju filosofiju. Izd. 2e,Moscow (in Russian).7.Nekljaev, S. Je. & Vartanova, E. L. (ed.) (2008) Infografika: principy vizual'noj zhurnalistiki. Sovremennoe zhurnalistskoe obrazovanie: tehnologii i osobennosti prepodavanija,MediaMir, Moscow,248 p.(in Russian).8.Mitchell, W. J. T. (1995) «What is visual culture?», in Irvin Lavin(ed.)Meaningin the Visual Arts: Views from the Outside,Princeton, Institute for Advanced Study,N.J.(in English).9.Tufte, E. (2006) Beautiful Evidence,Graphic Press,Cheshire, 213 p.(in English).10.Verbickij, A. A. (1991) Op. cit.11.Laptev, V. (2012)Op. cit.,p. 7.12.Infogra(2014) Moscow.Available at: http:/infogra.ru (data obrashhenija: 21.10.2014)(in Russian).13.Nekljaev, S. Je. & Vartanova, E. L. (ed.) (2008) Op. cit.,p. 138.14.Hubspot, HubSpot, Inc., 2014.Available at: http://offers.hubspot.com/howtoeasilycreatefivefabulousinfographicsinpowerpoint (data obrashhenija: 21.10.2014)(in English).Ермолаева Ж. Е., Лапухова О. В., Герасимова И. Н. Инфографика как способ визуализации учебной информации // Концепт. –2014. –№11(ноябрь).–ART14302. –0,5п. л. –URL: http://ekoncept.ru/2014/14302.htm. –Гос. рег. Эл№ФС 7749965.–ISSN 2304120X.
Microsoft Office,Korporacija Majkrosoft (Microsoft Corporation), 2014.Available at: http://office.microsoft.com/ruru/powerpointhelp/RZ102673181.aspx?CTT=1 (data obrashhenija: 21.10.2014)(in English).16.Infogr.am, Infogram, 2014/Available at: http://infogr.am/featured (data obrashhenija: 21.10.2014)(in English).17.Grafing 2.1 –rabota s vektornoj grafikoj,Moscow, 2010–2014/Available at: http://graphing.ru/i/rastandvector/ (data obrashhenija: 21.10.2014)(in Russian).18.SreativeSommons.Available at: http://creativecommons.org (data obrashhenija: 21.10.2014)(in English).
Рекомендованокпубликации:
Горевым П. М., кандидатом педагогических наук, главным редактором журнала «Концепт»
