Экспорт из InDesign в HTML5: потрясающий бесплатный скрипт

  1. Эта проблема
  2. Сторонние решения
  3. А теперь ... бесплатный скрипт
  4. Навигация по страницам
  5. Куда ты это положил?

О, если бы у меня был только доллар за каждый раз, когда кто-то спрашивал меня: как мне экспортировать мой документ InDesign в виде HTML, сохраняя геометрию страницы (как выглядит страница), анимацию, интерактивные функции и все остальное!

Ну, вы просили об этом, вы получили это ... и вам это понравится!

Сначала немного предыстории ...

Эта проблема

InDesign предлагает встроенный экспорт в HTML (используя «Файл»> «Экспорт»), но экспортирует только текст и графику, а не геометрию страницы! Таким образом, результат не похож на вашу созданную страницу. Он был разработан для перемещения активов документов в Dreamweaver или предоставления веб-разработчику для форматирования.

Поскольку пользователям явно нужна опция прямого доступа к HTML, Adobe разработала несколько новых вариантов экспорта. Во-первых, они построили экспорт EPUB с фиксированной разметкой (FXL). Многие люди не понимают, что FXL EPUB полностью написан на HTML5. Но вы можете открыть файл epub (на самом деле это просто тип файла .zip) и найти файлы HTML и CSS. Однако файлы EPUB работают только в специальных устройствах чтения EPUB, и не у всех есть устройство чтения EPUB, которое может работать с FXL.

Затем Adobe создала инструмент под названием Публиковать в Интернете , Это очень классный сервис CC, где пользователи InDesign могут очень легко экспортировать весь документ для размещения на серверах Adobe. Хотя я люблю публиковать в Интернете, он требует, чтобы вы использовали серверы Adobe. И, конечно же, поскольку HTML-код запрещен, вы не можете его редактировать или помещать на свой сайт, в приложение или что-то в этом роде.

Сторонние решения

Несколько лет назад Джастин Путни из Ajar Productions разработал плагин InDesign под названием in5 который экспортирует HTML5 из ​​InDesign, с не только геометрией страницы, но и интерактивными элементами и многим другим. Более того, in5 предоставляет широкий спектр дополнительных функций для экспорта, например, навигацию по мобильному телефону, и позволяет легко перемещать экспортированный HTML-код в веб-приложение или даже в полное приложение (с помощью PhoneGap, Baker Framework, Amazon Marketplace, так далее.).

Еще один коммерческий инструмент экспорта HTML BakerExport от Kerntiff, который выглядит интересно, но я верю, что все еще находится в разработке.

Кен Джонс Циркуляр Программное обеспечение также разработал несколько умных способов размещения мультимедийных файлов EPUB с фиксированной компоновкой на веб-сервере и функционирование в окне браузера. Требуется некоторая настройка, но он показал мне пример (включая текст для чтения вслух) в недавнем Конференция InDesign и это было чертовски удивительно.

А теперь ... бесплатный скрипт

Хорошо, вот кикер ... в прошлом году Кит Гилберт обнаружил недокументированный метод экспорта HTML из InDesign CC со скриптом и написал об этом здесь , В то время это было действительно более интригующее развлечение, и мы не чувствовали, что вы многого захотите.

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

Навигация по страницам

Вот проблема: обычные методы перехода с одной страницы на другую не работают при экспорте HTML с помощью этого сценария. То есть кнопки «Перейти на страницу» или гиперссылки, которые ведут на привязку текста или что-то в этом роде ... все эти интерактивные функции ломаются при экспорте в HTML. Причина в том, что при экспорте в формате HTML каждая страница вашего документа InDesign становится отдельной страницей HTML.

Например, вот простой двухстраничный файл InDesign с интерактивными элементами:

Например, вот простой двухстраничный файл InDesign с интерактивными элементами:

И вот что вы получаете, когда экспортируете его как HTML с помощью скрипта Кейта:

И вот что вы получаете, когда экспортируете его как HTML с помощью скрипта Кейта:

Вы можете видеть, что первая страница документа экспортируется точно так же, как документ InDesign, но с расширением html. Вторая страница имеет «-1» после имени и так далее. Для тех из вас, кто интересуется, вот что находится внутри папки «ресурсы»:

Для тех из вас, кто интересуется, вот что находится внутри папки «ресурсы»:

Вы заметите, что здесь есть несколько файлов, которые вы можете настроить, если хотите - особенно экспортированный файл CSS!

Итак, вернемся к проблеме навигации по страницам ... обычные функции навигации по страницам (такие как кнопки «перейти на следующую страницу») предполагают, что конечный документ представляет собой один файл (например, один файл PDF). Но здесь вам действительно нужно перейти с одного HTML-документа на другой.

Поэтому для перехода с одной страницы на другую необходимо создать гиперссылку (на панели «Гиперссылки») на эту конкретную страницу. Есть два способа сделать это. Сначала вы можете создавать текстовые привязки на каждой странице, а затем создавать гиперссылки на них.

Или, во-вторых, вы можете просто сделать свои собственные гиперссылки, что требует, чтобы вы знали, как будет названа страница. Кит упростил этот процесс, создав второй сценарий под названием «Добавить кнопки страницы». При запуске он создает пустые рамки на каждой странице и назначает гиперссылки с именами. Вам не нужно использовать этот скрипт, но он, безусловно, помогает. Тем не менее, помните, что вам нужно будет переименовать гиперссылки (или перезапустить скрипт), если вы когда-нибудь измените имя файла InDesign (потому что, опять же, файлы HTML основаны на имени файла INDD).

Куда ты это положил?

После экспорта HTML вы можете опубликовать его на своем собственном сервере, поместить в Dropbox или что-то еще, что вы хотели бы сделать с ним. Например, вот приведенный выше двухстраничный тестовый файл ,

Так что это невероятно, но я хочу пояснить, что этот бесплатный скрипт далеко не так мощен, как один из сторонних инструментов, таких как in5. Существуют также некоторые критические ограничения при использовании этого сценария… например, объекты, которые попадают на монтажную панель, не обрезаются, поэтому они полностью видны в экспортированном HTML. Он также будет хорошо работать только с односторонними (неориентированными) документами.

Скачать: сценарий Кита называется «Экспорт FXL HTML», и вы можете найти его здесь , Я настоятельно рекомендую вам прочитать Read_me.pdf перед запуском скрипта. Там много более важной информации!

Если вам нужна помощь в установке скриптов, см. Эту статью. После того, как вы установили его, он появится на панели «Сценарии» следующим образом:

После того, как вы установили его, он появится на панели «Сценарии» следующим образом:

Помните, что сценарий распространяется по принципу «как есть»… это означает, что ни Кит, ни я не гарантируем, что он будет работать для вас. Сохраните свою работу перед использованием. Тем не менее, это сработало очень хорошо для меня с ограничениями, которые я упомянул.

Если вы используете его для своих документов, поделитесь URL-адресом ниже, чтобы мы могли проверить их!

Дэвид Блатнер является соучредителем Creative Publishing Network, журналом InDesign, а также автором или соавтором 15 книг, включая Real World InDesign. Его видео InDesign на Lynda.com являются одними из самых популярных тренингов InDesign в мире. Вы можете найти больше информации о Дэвиде на 63p.com.

Куда ты это положил?

Новости

Как сбалансировать юзабилити и дизайн при создании сайта — User House
Красота или уродство в веб-дизайне всегда связаны с восприятием конкретного человека. То, что для одного «красиво», может быть «ужасным» для другого и наоборот. Но как же так получается, что многие популярные

Чем лучше юзабилити сайта – тем больше лояльных клиентов


Знакомство с юзабилити-тестированием сайта. // webknowledge.ru
Перевод статьи:   An Introduction To Website Usability Testing. Автор:   Thomas Churm. При создании нового сайта необходимо учитывать множество факторов. Для того чтобы у посетителей возникло

Специалист по web-usability – боец невидимого фронта
Ярослав Перевалов Что такое usability engineering? Часто ли вы, бродя по Сети, обращаете внимание на то, насколько качественно структурирована информация на сайте и насколько удобно устроена навигация?

Гид по UX исследованиям для начинающих
В индустрии, в основе которой лежит использование людьми наших продуктов, услуг и приложений, исследования просто необходимы. Мы задаем вопросы. Мы делаем пометки. Мы стараемся узнать все, что возможно,

25 советов как улучшить юзабилити (usability) вашего сайта. | Блог об интернет деятельности и трудовых буднях Максима Вячеславовича
Доброго времени суток, дорогие друзья! Сегодня мы поговорим с вами о такой важной вещи как U sability (юзабилити) сайта , о том, как улучшить данный фактор, зная его основные принципы и правила.

Что такое юзабилити и зачем оно нужно
Юзабилити включает простоту, удобство в пользовании, тестирование, проведение аудита проекта. Юзабилити сайтов, интернет-магазинов — это неотъемлимая часть выгодного ведения бизнеса. Задача юзабилити

Юзабилити тестирование сайта турагентства
«Когда информации много и она дешева, дорогим становится внимание». James Gleick Представим сайт, владелец которого считает его достаточно хорошим, удобным и привлекательным. Он размещает рекламные объявления

Юзабилити
Юзабилити (от англ. слова «usability» – практичность, простота использования) – это весьма распространенное ныне понятие объединяет максимальное удобство использования сайта и полезность информации, на

5 шагов для успешного юзабилити-тестирования приложения
Представьте: вы придумали и разработали мобильное приложение с приятным, на ваш взгляд, дизайном, удобным функционалом, полезными опциями, выпустили релиз продукта, но… Несмотря на мощную маркетинговую

Карта