Документ описывает создание мобильного приложения с использованием платформы magtoapp, включая основные функции, такие как кроссплатформенная совместимость, интерактивные элементы и различные типы контента. В нем также подробно рассматриваются инструменты для импорта материалов и настройки внешнего вида приложения, таких как видео, аудио, слайд-шоу и карты. Кроме того, предоставлены инструкции по коммуникации и поддержке пользователей через контактную информацию.

1. 1!
Создание
мобильного
приложения с
Magtoapp!

2. 2!
Основные возможности Magtoapp!
• Кроссплатформенное решение – Android, iOS7
• Обновления журнала– новые выпуски ( загрузка PDF, PNG)!
• Обновление информации – автоматически обновляемая новостная лента в
реальном времени (RSS лента)!
• Навигация между страниц – переход из содержания выпуска на статьи или
любые внутренние страницы; миниатюры страниц внизу – быстрый переход
на любую страницу.!
• Добавление интерактивных элементов – звук, видео, слайд-шоу, карты. !
• Добавление сложного функционала при помощи HTML врезок. !
• Покупка одного номера или подписки. !
• Ваш журнал в Newsstand (киоск журналов Apple)!
• Push-уведомления об обновлении приложения!
Создание мобильных приложений!

3. Процесс создания приложения!
Вам потребуется PDF или PNG файл
для создания мобильного приложения с
использованием Magtoapp . !
!
Эти файлы – основа вашего будущего
приложения. !
!
Вы можете загрузить в редактор
журналы, брошюры, каталоги товаров,
инструкции и т. д. в формате PDF или
PNG. !
!
Подробности о подготовке файлов
читайте на сайте. !
!
Создание мобильных приложений!

4. 4!
Составные части решения Magtoapp!
• Magtoapp Editor – программа для компьютеров на базе Windows;
используется для импорта PDF файла, добавления интерактивных объектов
в выпуск, управления публикациями. !
Ссылка на загрузку!
!
• Magtoapp Viewer – программа для планшетов на базе iOS и Android;
используется для закрытого тестирования мобильного приложения,
управления публикациями. !
Ссылка на загрузку Android и iOS. !
!
Создание мобильных приложений!

5. 5!
Пример приложения на базе Android!
Создание мобильных приложений!

6. 6!
Пример приложения на базе iOS!
Создание мобильных приложений!

7. 7!
Подробно об импорте PDF в Magtoapp Editor!
Окно импорта предложит вам разные
настройки: !
• импортировать только выбранные
страницы PDF документа;!
• импортировать выбранные страницы
из двух или более PDF документов;!
• выбрать настройки отображения
страниц: одна страница на экране или
две на экране!
• а самое главное! Выбрать
ориентацию отображения на
планшете: альбомная или портретная.!
!
Создание мобильных приложений!

8. 8!
Создание интерактивного приложения!
Вы можете создать интерактивное приложение. Для этого достаточно
добавить 1) видео 2) аудио 3) слайд-шоу 4) карты 5) HTML врезку или 6)
ссылки с использованием редактора Magtoapp. !
!
!
!
!
!
!
Добавление этих объектов происходит в визуальном редакторе. Вам не нужно
знать программирование. Достаточно нажать на соответствующую кнопку,
задать параметры, например, ширина и высота проигрывателя видео. !
Создание мобильных приложений!

9. 9!
Добавление видео!
Внешний вид видео проигрывателя:!
1. Задать изображение для предпросмотра.!
2. Выбрать черный экран с кнопкой Play для
проигрывателя.!
3. Добавить/Убрать кнопку Play поверх
проигрывателя.!
4. Установить размеры проигрывателя.!
5. Прозрачная зона запуска видео.!
Если на вашем компьютере установлен QuickTime,
размеры видео устанавливаются автоматически. !
!
Требования к видео файлам - контейнер .mp4,
видеокодек H.264, FPS 30 или 25, аудиокодек
ААС.!
Создание мобильных приложений!

10. 10!
Добавление аудио!
Внешний вид аудио проигрывателя: !
1. Задать изображение, по клику на
которое будет воспроизводиться звук
(любой объект или кнопка Play).!
2. Размеры проигрывателя и его
нахождение относительно границ
страницы.!
3. Изображение, которое будет
использоваться при нажатии на кнопку
Стоп. !
!
Редактор поддерживает файлы формата
MP3, кодек AAC.!
!
Создание мобильных приложений!

11. 11!
Добавление слайд-шоу!
Возможности слайд-шоу – смена
фотографий при движении пальцем по
экрану справа налево или наоборот,
полноэкранный режим при однократном
нажатии пальцем на фотографию. !
!
Управление порядком фотографий,
которые используются в слайд-шоу,
происходит в окне «Свойства слайд-шоу». !
!
Если в дизайне страницы уже
предусмотрено изображение, которое будет
являться первым в слайд-шоу, то поставьте
галочку «Прозрачная область запуска». !
Создание мобильных приложений!

12. 12!
Добавление карты!
Добавление карты начинается с ввода точки на
карте; введите адрес объекта или координаты
(широту и долготу).!
!
Внешний вид карты: !
• Использовать заранее подготовленное
изображение для точки на карте.!
• Полноэкранный режим просмотра карты/
просмотр карты в указанных рамках.!
• Использовать заранее подготовленное
изображение для запуска карты.!
!
!
Создание мобильных приложений!

13. 13!
Добавление инфоблока!
Инфоблок – частично скрытое окно во втором
слое, которое «вытягивается» пальцем. !
!
Для того чтобы открыть инфоблок пользователь
тянет его в сторону. !
!
Вы можете использовать этот функционал для
размещения рекламы или формы обратной связи.!
!
В текущей версии блок задается с помощью
изображения, например, PNG файла.!
!
Создание мобильных приложений!

14. 14!
Добавление ссылок!
Внутренние ссылки нужны для переходов
внутри журнала или каталога, например,
для перехода на статьи из оглавления. !
!
Внешняя ссылка используется для
переходов на сайт, при этом пользователь
переходит из приложения в браузер. !
!
Область ссылки бывает прозрачной, когда в
дизайне страницы предусмотрена иконка
или знак ссылки. Вы также можете
использовать изображение, по нажатию на
которое будет происходит переход по
ссылке.!
!
Создание мобильных приложений!

15. 15!
Добавление HTML врезки!
Существует 2 вида HTML-врезок:
внутренний и внешний.!
!
Внутренняя HTML-врезка используется для
реализации функционала внутри
приложения, например, опросы среди
читателей, специальные плееры, даже
миниигры на HTML5.!
!
В других случаях содержимое HTML блока
будет подгружаться из внешнего источника,
например актуальный курс валют или
фрейм с прогнозом погоды. !
Создание мобильных приложений!

16. 16!
Добавление текстового блока!
Текстовые блоки используются для
удобного чтения длинных статей или
документов. !
!
Это блок запускается по нажатию на
специальный значок на странице,
открывается во втором слое, при этом не
содержит никакие элементы кроме текста.!
!
Текст вносится вручную в редакторе –
заполняете поля: заголовок, подзаголовок,
текст. !
!
В редакторе предусмотрена возможность
добавить свое оформление текстового
блока. !
Создание мобильных приложений!

17. 17!
Настройки «Документ»!
Если изначально файл PDF создавался для печати, то при отображении
страницы на устройстве могут оставаться незаполненные места. В программе мы
предусмотрели соответствующие настройки.!
!
Настройка цвета фона страницы отвечает за заполнение пустых мест. Черный
символизирует выключенный экран, белый – продолжение страницы. !
!
Вариант растягивания страницы на весь экран рекомендуется использовать
только для iPad, а также в ситуациях когда небольшое изменение пропорций
экрана непринципиально.!
Создание мобильных приложений!

18. 18!
Увеличение и уменьшение размера файла!
Вы также можете задать нужную степень
сжатия фонов страниц, что в итоге влияет на
размер загружаемого на устройство журнала.!
По умолчанию применяются настройки для отображения страниц на Retina-
дисплеях: 2048 px и JPEG (95). Такая настройка позволяет по умолчанию
добиться хорошего качества даже при масштабировании журналов формата A3.!
!
Если конечный размер файла критичен, то можно задать другой максимальный
размер фона страницы (1536 или 1024 px). !
!
В этом случае размер архива будет наименьшим, но начнутся видимые изменения
качества, особенно при увеличении и при наличии мелкого текста.!
!
Создание мобильных приложений!

19. 19!
Управление качеством отображения страницы!
Создание мобильных приложений!
Для файлов с большим количеством
мелкого текста предусмотрена настройка
«Формат страницы». При выборе PDF в
архив с журналом будут добавлены PDF-
файлы страниц и именно они будут
отображаться на устройстве.!
!
Выберите PNG в случае, если требуется
наилучшее качество отображения. !

20. 20!
Есть вопросы?!
!
Кудашев Алексей!
+7 (499) 638-86-59!
info@magtoapp.ru !
!