Под знаменем HTML5

Большинство читателей журнала традиционно связаны в первую очередь с технологиями бумажных публикаций, однако не заметить серьёзный прогресс интернет-технологий сложно. Многие хотя бы пару часов в день проводят в Сети и замечали ставший более привлекательным интерфейс популярных сайтов.

Нередко эти перемены связаны с появлением HTML5. «Пятёрка» — это не продолжатель языка разметки гипертекста, а новая открытая платформа для создания веб-приложений, активно использующих аудио, видео, сложную графику, анимацию и многое другое. Толчок развитию платформы дала политика Apple, руководство которой отказалось от Flash-графики в своих устройствах. С учётом рыночной доли использующих iOS мобильных устройств и масштаба распространения Flash такое решение значительно изменило рынок.

Активный переход на HTML5 породил всплеск интереса к соответствующему ПО. Adobe деятельно участвовала в процессе, разрабатывая приложения, учитывающие особенности целевой аудитории, отнюдь не стремящейся погружаться в дебри программирования. Речь идёт о группе редакторов для дизайнеров, объёдиненных общим названием Edge: в первую очередь — Edge Animate (позволяет создавать сложную анимацию, не уступающую Flash, но на HTML5), упрощённый HTML-редактор Edge Muse и сопутствующие инструменты — Edge Inspect (бывший Shadow) для предварительного просмотра сайтов на мобильных устройствах и Edge Reflow, упрощающий создание макетов с адаптивной сеткой (responsive design). Может показаться, что редактор кода Edge Code в линейке не совсем уместен. Но создатели считают его включение обоснованным, поскольку Edge Code – не просто редактор кода, а интегрированная среда разработки. Приложение тесно связано с браузером (и результаты изменений моментально можно увидеть через браузер), интегрировано с Phone Gap Build, Edge Web Fonts и т. д. Это продолжение одного из Open-Source проектов Adobe – Brackets. Отсюда все плюсы открытой технологии. Проект ещё молодой, но активно развивается.

Большое значение компания придаёт решениям для технических специалистов. Adobe внимательно мониторила рынок и скупала все интересные разработки. В результате пополнила свой актив утилитой PhoneGap Build для упаковки мобильных приложений в «нативные» и Typekit для решения вопросов использования коммерческих шрифтов.

Эти программы, а также давно хорошо известный дизайнерам Dreamweaver вместе с коллекцией Edge есть в Adobe Creative Cloud, который наконец-то стал доступен в России (см. тему номера).

Все решения интересны по-своему, но поскольку аудитория Publish — в основном не специалисты по веб-технологиям, основное внимание уделим редакторам из линейки Edge, генерирующим HTML5-коды без программирования. Начнём с самого интересного и долгожданного — Edge Animate. Он призван заполнить нишу, образовавшуюся после того, как технология Flash перестала быть желанным гостем в устройствах под управлением iOS.

Edge Animate

В Adobe подчёркивают, что он не призван стать заменой Flash – у каждой технологии остаётся своя ниша. Edge Animate предоставляет удобный пользовательский интерфейс для задания параметров анимации через каскадные стили. Поскольку все современные браузеры для воспроизведения CSS-анимации используют GPU (графический сопроцессор), это снижает нагрузку на центральный процессор и даёт существенный (в разы!) выигрыш в производительности, позволяя создавать сложные и насыщенные динамикой игры.

Неизменными остались структура меню, элементы пользовательского интерфейса и сам подход. Работа в редакторе построена по тому же принципу, что и в Adobe Flash: на временной панели отображаются ключевые кадры анимации каждого объекта. Есть масса библиотечных заготовок. Например, плавный въезд/выезд, вращение, отскок и т. п. Для удобства у каждого ключевого кадра сразу же отображаются координаты объекта, поддерживается внедрение собственного javascript-кода. Для работы ПО необходим установленный Adobe AIR.

Первоначальная стоимость была 15 долл./месяц (здесь и далее — цены в США), но недавно Adobe решила предоставлять его бесплатно, однако с одним условием: вы обязаны стать членом Creative Cloud *.

Таким образом, эта копия Adobe Flash позволяет реализовывать сложную анимацию средствами CSS. Миграция должна пройти без каких-либо проблем, особенно приятно, что Edge Animate наконец-то стал бесплатным.

Muse

Редактор веб-страниц не менее интересен, поскольку сочетает концепцию WYSIWYG с поддержкой современных технологий, для работы с которыми ранее необходим был javascript-код. Что-то вроде осовремененного Microsoft FrontPage. Находка для тех, кто ранее редко сталкивался с дизайном веб-страниц.

Работать просто и удобно. Сначала задаётся структура сайта, после чего каждую страницу наполняют содержимым. Можно импортировать дизайн из Photoshop: поддерживается даже послойность PSD-файлов, да ещё связи с оригинальными файлами сохраняются. Для обновления графики на сайте потребуется лишь пара щелчков мышкой. Можно задать ограничение импортируемой графики по размерам, чтобы элементы не выходили за пределы заданных областей. Для делающих первые шаги есть полезные советы и обучающие материалы (http://www.adobekb.com).

Поскольку при разработке дизайна клиент обязательно хочет видеть результат в динамике, важно продемонстрировать его в полном объёме. Здесь вопросы интерактивности продуманы бесподобно — специально для тех, кто сосредоточен на дизайне. Удобные палитры, простое управление, интуитивная работа прекрасно подойдут творческим людям.

Большинство функций в Muse реализованы интуитивно, поддерживается идеология мастер-страниц

Традиционный набор органов управления сводится к нескольким типам: интерактивные элементы, реагирующие на курсор (Interactions); элементы управления (всплывающие окна, подсказки и т. п.) для расширения функциональности браузера (widgets) и визуальные эффекты (анимация объекта — Effects).

Элементы Interactions реализованы великолепно. Исключение составляют такие механизмы, как перенос объектов мышкой (drag-n-drop), изменение их размеров и некоторые другие. Впрочем, это дополнительные возможности, просто не нужные людям творческим, которым главное — дать заказчику общее впечатление о сайте.

Упор сделан на поддержку виджетов — графических модулей с широкой функциональностью. Они разбиты на несколько типов: compositions (объединяют подачу графического материала и текста), forms (сложные формы), menus (горизонтальные/вертикальные, в т. ч. многоуровневые), panels (способы отображения блоков информации — Accordion, tabbed panels, известные специалистам из библиотек twitter bootstrap и jQuery UI), slideshows. Набор позволит уверенному пользователю, не прибегая к специалистам, создать интерфейс, выглядящий современно и дорого.

Не менее разнообразно реализованы визуальные эффекты. Можно менять (в т. ч. анимировать) атрибуты элементов, например, с ускорением, замедлением и т. п., что повысит презентабельность сайта.

Muse имеет массу утилитарных функций, например, адаптацию сайтов для разных мобильных платформ. Сложность здесь в том, что консорциум W3C — организация инертная, не успевающая за стремительным развитием интернета, которое она, по идее, должна направлять. Разработчикам браузеров приходится самостоятельно придумывать способы реализации того или иного функционала. В результате каждый предложил собственный синтаксис (к примеру, для CSS-анимации), а о совместимости нет и речи.

Расплачиваться приходится разработчикам: для корректного отображения в любом браузере каждое свойство должно иметь префиксы «webkit-, mz-, opera-, ms-». Вручную добавлять их нудно, поэтому часто операция перекладывается на сторонние решения. Muse использует библиотеку jQuery, и это гарантирует корректную работу сайта в любом окружении (популярность jQuery обеспечивает поддержка всех браузеров, в т. ч. таких реликтовых, как MS Explorer до 8-й версии).

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

А теперь представим, что заготовка сайта с базовой (презентационной) функциональностью дизайнером создана в редакторе. Что дальше? Зачастую макет передаётся другим специалистам, и уже им придётся разбираться со всем, что было создано программой в автоматическом режиме. Это может стать ночным кошмаром для тех, кто будет поддерживать такой сайт. Muse, кроме jQuery, использует свою библиотеку UI-функций. Поэтому перед разработчиками встанет вопрос: опираться на технологии open-source либо продолжать использовать методы Muse (придётся изучать Muse API). Ситуация неоднозначна по перспективам и затрачиваемым ресурсам.

Статичные страницы постепенно уходят в небытие, замещаясь динамическими (AJAX), что избавляет от дублирования кода и снижает нагрузку на систему. Muse, как и старый добрый FrontPage, генерирует исключительно статичные страницы и каждую смену стиля текста оформляет в виде CSS-стиля, генерируя соответствующий класс. Зачастую это значительно усложняет читабельность и последующую поддержку кода.

Пока Muse можно рекомендовать скорее для создания некоммерческих сайтов вроде домашних страниц, а также (при условии, что сами будете поддерживать сайты или найдёте соответствующую фирму) для мелкого и среднего бизнеса. В Adobe же считают, что Muse предназначен для широкого спектра проектов. Реализованных проектов уже тысячи. Некоторые можно увидеть здесь: http://muse.adobe.com/site-of-the-day.

Dreamweaver

Появившийся более десятка лет назад пакет сейчас достаточно приемлем для дизайна HTML-страниц и наполнения их функциональностью (PHP, JavaScript). Его используют как WYSIWYG-решение творческие люди, далёкие от программирования. А технарям он даёт удобный доступ к коду, позволяя создателям сайта балансировать между «хочу» и «можно».

В последней версии появилась возможность задания объекту нескольких стилей, что позволяет гибко управлять объектами, а значит, создавать страницы с минимумом затрат. Очень понравилось, что вместо генерирования стиля форматирования прямо в тексте страницы программа создаёт CSS-стили. В результате код сайта не теряет читабельности, а управляемость повышается

Интерфейс программы очень похож на остальные продукты компании: основу составляет панель свойств выбранного элемента, в которой собраны все параметры, доступные в данный момент, в т. ч. присвоенный класс CSS (аналог стиля абзаца/символа в издательских системах). Для удобства ориентации в сложном документе есть панель навигации, в которой отображается его структура и положение текущего элемента. Незаменимое подспорье для начинающих, особенно если страница сложная. Панель для задания свойств стилей хорошо продумана.

Среди других возможностей последней версии — внедрение HTML5 видео; улучшенная поддержка библиотеки jQuery mobile (упрощает разработку сайтов, просматриваемых через мобильные устройства); новая панель CSS Transitions (в ней собраны все возможные типы анимации и различных эффектов — например, задание прозрачности, отбрасывание тени, размытие краёв и др.). Поддерживается упаковка веб-приложения в «нативное» через Phonegap: вы создаёте веб-приложение в виде обычного сайта, тестируете его в webkit-браузерах Safari и Chrome, убеждаетесь, что всё работает как надо, и делаете его доступным для установки в смартфон/планшет.

Поддержка «резиновой» сетки (fluid grid) незаменима при разработке сайтов для просмотра на различных мобильных устройствах. Концепция пришла на смену традиционному макетированию страницы, позволяя менять количество колонок пропорционально ширине экрана. К примеру, если страница просматривается на экране монитора, то она отображается традиционно (допустим, на сайте 10 расположенных в ряд кнопок), но если вы пользуетесь мобильным устройством, то при расположении экрана горизонтально в строке останется 6 кнопок, остальные перейдут на следующую строку, а при повороте экрана вертикально кнопок в одной строке будет и вовсе 4, а все займут целых три строки. Такой подход позволяет сохранить читабельность текста и полностью сохранить функциональность сайта.

Не забыли разработчики и о программистах — для них приготовлено много мелочей, значительно упрощающих работу: автоподсказка при написании свойств и методов; генерирование структуры документа; конвертирование стилевых свойств, записанных в HTML, в виде CSS-стиля; поддержка задаваемых пользователем фрагментов кода (сниппетов). Увы, не развита подсветка цветом свойств и методов внешних библиотек, что серьёзно затрудняет работу над серьёзными проектами. Стоимость редактора — 20 долл./месяц (240 долл. за 2 года).

TypeKit

Подчеркните индивидуальность сайта уникальным сочетанием шрифтов

До недавнего времени дизайнеры сайтов страдали без художественных шрифтов. Приходилось опираться лишь на гарантированно присутствующие у всех и набившие оскомину Courier, Arial, Verdana, Georgia, Impact, Times и, конечно же, Comic Sans. Техническая проблема подключения на страницу дополнительных шрифтов несколько лет назад была решена, и издания, особенно крупные, получили возможность сохранить свою шрифтовую идентификацию. Однако для остальных проблемы остались актуальными — ведь коммерческие разработки имеют ограничения на использование. Как и положено лидеру, Google первой сделала шаг вперёд и по своей инициативе начала создавать и предоставлять интернет-сообществу коллекции бесплатных шрифтов, в результате чего даже мелкие издатели смогли подчеркнуть свою уникальность.

Adobe не могла оставаться в стороне, тем более что это «её территория», и, купив компанию TypeKit, продолжила работу в этом направлении. На момент написания статьи в коллекции профессионально выполненных шрифтов Adobe TypeKit насчитывалось 92 кириллических (в коллекции Google Fonts их вдвое меньше — 46). Латинских, конечно же, гораздо больше: Adobe заключила контракт с крупнейшим разработчиком шрифтов MonoType и предлагает их разработки в составе своей коллекции TypeKit.

Adobe предлагает 4 вида лицензий TypeKit: Personal, Portfolio, Performance, Business, соответственно за 24, 50, 100 долл./год (на последнюю цена определяется индивидуально). Personal позволяет использовать до 10-ти шрифтов на двух сайтах. Остальные лицензии такого ограничения не имеют и отличаются только количеством показов страниц, где они используются (соответственно 500 тыс., 1 млн и более).

А кому достаточно шрифтов коллекции Google Fonts, могут пользоваться ими через сервис Edge WebFonts, состоящий из более чем 900 шрифтов, собранных Google, и… парочки, разработанной собственно Adobe.

Выводы

Недавний выход Adobe в Cloud ознаменовал новую эпоху для компании, когда приоритет отдан веб-технологиям. Чем это не повод задуматься над расширением кругозора специалистам по подготовке бумажных изданий?

Стремительный рост функциональности сайтов постепенно превращает их в полноценные веб-приложения, адаптированные и к просмотру с мобильных устройств. Для построения новых и перевода старых на новую платформу нужны специалисты, а чтобы быть «в теме», понадобится время.

Поэтому пробовать можно уже сейчас.

Adobe предоставляет решения практически для всех областей, связанных с интернетом, — от разработки концепции до обработки статистических данных об активности пользователей. Особого внимания заслуживает коллекция Edge, в которой собраны инструменты, созданные специально для людей творчества и не умеющих работать с кодом.

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

Об авторе: Михаил Борисов (bmike68b@gmail.com), независимый автор, готовит для Publish полезные советы в области допечатной подготовки и обзоры ПО.

* Можно предположить, что так компания пытается отбить клиентов у Sencha — мощного игрока на рынке серьёзных пользовательских интерфейсов (та продвигает свой аналог Flash — Sencha Animator). Sencha и Apache Cordova (последняя недавно стала собственностью Adobe) предлагают упаковщики мобильных приложений: например, создав обычное javascript-приложение, вы можете упаковать его в «нативный» вид для любой платформы — Android, iOS, Blackberry или Windows Mobile (на финальной стадии необходима регистрация как разработчика). С учётом масштаба рынок просто огромный и доминирование на нём — вопрос стратегический.