[Mac App Store] Hype. Инструмент для работы с HTML5

Опубликовано

При всех своих достоинствах в виде шикарного вида, больших возможностей интерактивного взаимодествия с пользователем, использования красивейшей анимации и пр., сайты, созданные с использованием технолгии Flash, имеют два достаточно весомых недостатка — размер сайтов получается достаточно весомым, а для возможности их просмотра необходим специальный flash-плагин. Но прогресс не стоит на месте и теперь у Flash имеется альтернатива в виде HTML5 — пятой версии языка разметки HTML. Данный стандарт уже поддерживается последними версиями всех основных веб-браузеров и предлагает практически такие же возможности, что и Flash, при более меньшем размере получаемого контента и отсутствии необходимости устанавливать какие-либо плагины для его просмотра. Сегодня мы хотим рассказать об одном из приложений, позволяющих вести разработку на HTML5, которое называется Hype.

Hype является легким в использовании WYSIWYG-редактором для создания интерактивных веб-сайтов, анимации и многого другого, основной фишкой которого является автоматическая кодировка в HTML5 при экспорте готового материала.

Программа имеет локализацию только на английском языке, что, впрочем, совсем не помешает освоению приложения российскими пользователями — настолько интерфейс прост и интуитивен. При запуске приложения, пользователю, по умолчанию, будет показаны окно WISIWYG-редактора и панель Инспектора. Дополнительно к этому в разделе Tools меню программы можно открыть панель Media Browser и еще одно небольшую панель Javascripts.

WISIWYG-РЕДАКТОР

WISIWYG является аббревиатурой от английского выражения What You See Is What You Get, которое можно перевести, как «что видишь, то и получишь». И действительно, работа в редакторе происходит таким образом, что содержание отображается в процессе редактирования и выглядит максимально похожим на то, что пользователь увидит в конечном продукте. Полностью удовлетворяя требованиям WISIWYG, Hype позволяет создавать анимацию и интерактивные сайты, не требуя при этом знания исходного кода.

Окно редактора состоит из основной панели, на которой, собственно и создается сайт, а также панели Timeline, предназначенной для создания анимации.

В верхней части окна расположилась панель инструментов, на которую выведены инструменты для работы со сценами (страницами сайта), добавления из выпадающего меню целого ряад элементов (Box, Text, Button, Textured Button, Image, Video), а также реализована возможность просмотра результата работы в штатном веб-браузере системы. Отдельным блоком стоят кнопки управления показом дополнительных панелей с инструментарием (Инспектор, Цвета, Шрифты).

ИНСПЕКТОР

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

  • Document. Задание размеров проекта и управлениями некоторыми функциями его показа. Отдельно хочется отметить функцию автоматической проверки совместимости создаваемого проекта с некоторыми версиями основных веб-браузеров (включая мобильные версии последних на android- и apple-девайсах). В случае найденных проблем с совместимостью, программа даст рекомендации по их устранению.

  • Scene. Вкладка с параметрами анимаций, создаваемых в приложении. На любое доступное действие (6 вариантов) с объектом анимации, можно назначить то или иное событие (перейти на другую страницу, проиграть анимацию, запустить javascript или перейти по веб-ссылке).
  • Metrics. Управление размерами и вращением любого выбранного элемента проекта.
  • Element. Управление визуальным отображением элементов проекта (фон, рамка, прозрачность, отражение, тень).

  • Text. Управление форматированием текста, используемыми шрифтами, интервалами и пр.
  • Mouse Action. Выбор и управление событиями, происходящими при том или ином действии с выбранным элементом проекта. Набор событий аналогичен тому, что доступен во вкладке Scene. Как и в других вкладках, при возникновении проблем с совместимостью появится соответствующий значок, клик на котором вызовет дополнительное окно с описанием проблемы.

  • Identity. Общая информация об выбранном элементе.

МЕДИАБРАУЗЕР

Медиабразер позволяет импортировать в проект фото-, видео- и аудиоматериалы из таких приложений, как Aperture, iPhoto, iTunes, GarageBand, а также из некоторых заданных папок. Причем, что интересно, количество папок жестко не задано, и пользователь может добавить свои папки к уже имеющимся. Для этого достаточно перетащить выбранную папку на окно медиабраузера. Отображение материалов в библиотеке выбранного приложения или в папке может осуществляться в трех режимах, на панели также присутствуют средства поиска того или иного файла по его названию, результаты поиска выводятся моментально, по мере ввода поискового запроса. Импорт материалов из браузера в проект также осуществляется перетаскиванием.

JAVASCRIPTS

Совсем небольшая панель позволяет работать со скриптами (создавать, редактировать), а потом добавлять их в проект.

Принцип работы в Hype примерно такой же, как и во многих видеоредакторах: пользователь расставляет ключевые кадры, настраивает свойства объектов, а затем экспортирует готовый проект, получая на выходе папку с медиафайлами, используемыми в проекте и обычным javascript’ом.

Конечно, на самом деле все происходит не так быстро, как было описано в предыдущих строках. Например, создание покадровой анимации может осуществляться двумя способами: вручную или с помощью опции записи приложения. Режим записи как раз таки предоставляет возможность назначить, например, ключевые позиции перемещаемого элемента проекта, а переходы для создания анимации перемещения из одной точки в другую Hype сделает сам.

Практический пример: вращение логотипа AppStudio.org в тестовом примере интерактивной веб-страницы.

С помощью пункта Insert Elements на панели инструментов (как вариант, простым перетаскиванием на окно редактора) добавляем в проект графический файл с логотипом. Выделив логотип, запускаем процесс записи кнопкой Record Animation, расположенной на панели Timeline, затем в Инспекторе (в разделе Rotation вкладки Metrics), выставляем величину угла вращения (от 0° до 360°). После этого останавливаем запись, а приложение автоматически сделает переходы для создания анимации вращения.

Как уже говорилось выше, готовый проект можно экспортировать в HTML5 формате, причем в плане экспорта поддерживается интеграция с  Dropbox, что предусматривает автоматическую публикацию созданной веб-страницы в публичной папке Dropbox и позволяет сразу после создания поделиться ссылкой с другими людьми (интеграция с Dropbox будет работать только в том случае, если у пользователя имеется соответствующий аккаунт).

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

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

При всех своих достоинствах Hype вряд ли можно назвать «взрослым», серьезным редактором, позволяющим создавать анимацию и интерактивный веб-контент любой сложности.

Тем, кто действительно хочет создать полноценные, качественные сайты, советуем воспользоваться специализированными инструментами вроде Dreamweaver или Coda 2, либо услугами профессиональных студий, например, www.inclouds.ru.

Тем не менее, программа может помочь в создании не очень сложной анимации типа анимированных логотипов, интерактивных элементов сайта, сайтов-визиток и пр, причем созданный проект будет весить в разы меньше, чем аналогичный, но исполненный на Flash. Hype можно приобрести только в Mac App Store по цене 29.99$, которая достаточно высока, учитывая не слишком обширный функционал программы. Советуем также посмотреть в сторону других визуальных HTML5-редакторов, например свободного (и бесплатного) Maqetta.