CC BY
87
УДК 004.915+004.4'27
РАЗРАБОТКА ИНСТРУМЕНТОВ НАВИГАЦИИ ДЛЯ ЭЛЕКТРОННОГО ИЗДАНИЯ-ПУТЕВОДИТЕЛЯ
Лазарева Ольга Юрьевна
ассистент кафедры информатики и информационных технологий Московский государственный университет печати имени Ивана Федорова 127550 Россия, г. Москва, ул. Прянишникова, д. 2А 1а2агеуаоу@^таИ. ги
Боломутова Марина Сергеевна
студентка института принтмедиа и информационных технологий Московский государственный университет печати имени Ивана Федорова 127550 Россия, г. Москва, ул. Прянишникова, д. 2А таг1паЪо1отШоуа@уапйех. ги
Аннотация. Рассматривается способ создания интерактивной политической карты мира в качестве альте-ративного метода реализации инструментов навигации по электронному изданию-путеводителю.
Ключевые слова: электронные издания, мобильные издания, Adobe Digital Publishing Solution, D3.js, инструменты навигации.
Стремительно развивающиеся информационные технологии не обошли стороной печатные издания [1-3]. В настоящее время издатели стараются выпускать свою продукцию в двух версиях — печатной и электронной. Электронные версии изданий сочетают различные формы визуальной и текстовой информации, кроме того, для расширения читательской аудитории используются интерактивные элементы, чтобы читатель мог взаимодействовать с электронным изданием.
Среди таких интерактивных элементов можно выделить инструменты навигации по электронному изданию. Классическими примерами инструментов навигации являются кнопки «Вперед», «Назад» и содержание по разделам электронного издания в виде
гипертекстовых переходов. В электронном издании-путеводителе по странам в качестве инструментов навигации по статьям о странах, помимо классических инструментов навигации, можно реализовать интерактивную политическую карту мира (рис. 1). То есть при запуске электронного издания-путеводителя пользователь видит карту мира, на которой прорисованы все страны с соответствующими границами. Пользователь может изменять уровень приближения карты на главном экране. Он нажимает на выбранную им страну, и приложение показывает название данного государства, его флаг и предложение о переходе к статье о данном государстве. При выборе определенной страны происходит ее подсветка определенным цветом.
¥ * *
ифсйш I iTiru 'liMMtiiia*
Рис. 1. Страница навигации по электронному изданию-путеводителю
Для внедрения разработанной политической карты мира в структуру уже готового электронного мобильного издания могут использоваться инструменты программного пакета Adobe Digital Publishing Solution. Именно благодаря использованию инструментов программного пакета Adobe Digital Publishing Solution может быть достигнута кроссплатформенность разрабатываемой системы навигации по изданию. Adobe Digital Publishing Solution (сокр. DPS, ранее Digital Publishing Suite) — это платформа компании Adobe для персональных компьютеров, которая позволяет создавать и публиковать приложения под различные мобильные платформы iOS, Android и Windows [4, 5]. В Adobe Digital Publishing Solution реализовано добавление сложного функционала при помощи HTML-врезок. Благодаря поддержке HTML-врезок осуществляется внедрение интерактивной политической карты мира в электронное мобильное издание. Перед тем как производить внедрение карты мира в уже готовое электронное издание, необходимо разработать html-страницу, в которой будет реализован весь функционал, обеспечивающий навигацию по статьям со странами внутри издания-путеводителя.
Для создания html-страницы используется стандарт HTML5 и CSS3, а также библиотека D3.js. Библиотека D3.js (Data-Driven Documents) — библиотека на языке JavaScript, предназначена для создания интерактивной веб-визуализации данных [6, 7]. С помощью данной библиотеки происходит создание элементов вебстраницы на основании какого-то массива данных. В отличие от других подобных библиотек, D3.js использует SVG (векторная графика) вместо canvas, так как применение SVG обеспечивает создание элементов с более насыщенной графикой, в которой присутствует анимация и возможность взаимодействия (интерактивность). По сравнению с пиксельной графикой SVG обладает рядом преимуществ. В частности, SVG основан на xml, что делает его более читабельным. Кроме того, код SVG более легковесный по сравнению файлами изображений, что позволит в итоге уменьшить размер электронного издания [8].
Отрисовка политической карты с границами стран будет происходить с помощью библиотеки D3.js, которая будет визуализировать TopoJSON-файле, в котором хранятся координаты, описывающие периметр стран, их стран, кроме того, в файле каждой стране назначается цвет, который будет подсвечивать выбранную пользователем страну. TopoJSON-файл — это оптимизация GeoJSON-файла, который в свою очередь служит для хранения географических структур данных. В TopoJSON-файле кодируемая геометрия географических структур представлена не дискретно, а в виде геометрических форм, сшитых из общих отрезков, которые называются дугами. Использование TopoJSON-файла, а не GeoJSON-файла обуславливается тем, что TopoJSON устраняет избыточность, предлагая более компактные представления геометрии, чем GeoJSON, TopoJSON-файлы на 80% меньше, чем их эквиваленты GeoJSON [8].
Визуализация данных TopoJSON-файла происходит с помощью раздельных элементов «путь» и «кар-
тографическая проекция». Картографическая проекция — это способ для отображения географической системы координат на плоской карте. Очень важно выбрать правильную картографическую проекцию, чтобы проекция Земли на карте выглядела красиво и в тоже время не искажала размер и форму Земли. В рамках реализации политической карты мира была выбрана проекция Меркатора. Проекция Меркатора
— это одна из популярных в наше время и часто используемых для навигационных карт. Данный вид проекции сохраняет без искажения углы и формы малых объектов, зато в них резко деформируются длины и площади объектов. В контексте библиотеки D3.js projection (проекция) — это просто функция, которая переводит географические координаты (широту и долготу) в координаты на экране. Переменная path (путь) — это функция, которая переводит описание страны из GeoJSON в строку, подходящую для отображения в svg. Для растягивания проекции нужно указать параметр scale (масштаб), который по умолчанию равен 150. Все соотношения меняются от проекции к проекции, поэтому нужно просто посчитать параметры для используемой проекции Меркатора.
Для того чтобы иметь возможность увеличивать и уменьшать масштаб карты, необходимо прописать обработчик для события zoom. В D3.js существует возможность сохранения параметров события, для этого в библиотеке специально создается объект d3.event. При инициализации события zoom требуется сохранять два параметра: translate — смещение карты и scale — текущее увеличение. После получения этих параметров накладывается ограничение на смещение, чтобы пользователь не мог сдвинуть карту дальше ее границ. Затем новое смещение снова записывается в объект zoom: без этого он будет продолжать считать, что текущее смещение другое и сообразно обрабатывать новые события от мыши. И последнее действие
— применить новые параметры смещения и увеличения к карте: нужно, чтобы картинка менялась соответственно нашим действиям [8].
Для создания предложения о переходе к статье при выборе интересующей пользователя страны необходимо учитывать особый синтаксис, который используется внутри электронного издания при обращении к разным статьям. Так как верстка макета электронного издания происходила с помощью инструментов программной платформы Adobe Digital Publishing Solution, то для обращения к статьям по гипрссылкам используется метод navto://. Таким образом, в html-коде необходимо прописать в качестве url статьи сточку по следующему шаблону 'navto://'+ имя выбранной пользователем страны.
БИБЛИОГРАФИЧЕСКИЙ СПИСОК
1. Попов Д.И., Арсентьев Д.А., Демидов Д.Г. Программные продукты и технологии для подготовки и создания электронных изданий // Университетская книга: традиции и современность : материалы научно-практической конференции. — Ростов
н/Д: Изд-во Южного федерального ун-та, 2015. — С. 102-111.
2. Арсентьев Д.А. Оформление и дизайн электрон- 7. ных изданий. — М.: Изд-во Моск. гос. унт-та печати, 2010. — 174 с. 8.
3. Демидов Д.Г., Федоренко Н.М. Введение в электронные издания. — М.: Изд-во Моск. гос. унт- 9. та печати, 2009. — 150 с.
4. Лазарева О.Ю., Боломутова М.С. Обзор платформ для разработки и публикации электронных мобильных изданий // Вестник МГУП име- 10. ни Ивана Федорова. — 2015. — № 5. — С. 1416.
5. Лазарева О.Ю., Ложкина Д.Д.Возможности платформы Adobe Digital Publishing Solution // 11. Вестник МГУП имени Ивана Федорова. —
2015. — № 5. — С. 22-24.
6. Лазарева О.Ю., Грушина Т.С. Выбор библиотеки для разработки веб-сервиса визуализации ко-
гнитивной карты // Вестник МГУП имени Ивана Федорова. — 2015. — № 1. — С. 116-122. D3js [Электронный ресурс]. URL: https://d3js.org/ (Дата обращения: 19.03.2016). Mastering D3.js. Pablo Navarro Castillo — Packt
Publishing Ltd, 2014.-352 p.
Демидов Д.Г., Виноградов Д.В. Использование TinCan API в электронном обучении // Вестник МГУП имени Ивана Федорова. — 2013 — № 9. — С. 32-33.
Программные и аппаратные средства систем мультимедиа. Ч. 1. Аппаратные средства / Демидов Д.Г., Васьковский А.М., Николаев А.Б. [и др.] — М.: МГУП, 2014. — 78 с. Попов Д.И., Арсентьев Д.А., Демидов Д.Г. Программные продукты и технологии для подготовки и создания электронных изданий // В сборнике: Университетская книга: традиции и современность материалы научно-практической конференции. — 2015. — C. 102-110.
THE DEVELOPMENT OF NAVIGATION INSTRUMENTS FOR ELECTRONIC GUIDE PUBLICATIONS
Olga Yurievna Lazareva
Moscow State University of Printing Arts 127550Russia, Moscow, Pryanishnikova st., 2A
Marina Sergeevna Bolomutova
Moscow State University of Printing Arts 127550 Russia, Moscow, Pryanishnikova st., 2А
Annotation. This paper deals with how to create an interactive political map of the world as the alternative method of implementation of the navigation tools in electronic guide publication.
Keywords: electronic publishing, mobile publications, Adobe Digital Publishing Solution, D3.js, navigation tools.
