Adobe Muse CC

Планирование

Среда планирования сайта

Интерфейс Muse поделен на пять разделов: Plan, Design, Preview, Publish и Manage — в соответствии с логикой и этапностью разработки. В режиме планирования мы имеем дело с окном, где вверху располагаются страницы, внизу — мастера. Да-да, это прямо как в InDesign: мастера можно присваивать страницам и другим мастерам простым перетаскиванием на миниатюру страницы или другого мастера. Страницы добавляются по бокам от существующих, а также вниз. Получается иерархическая карта сайта. 

Разделы Muse

Вы можете задавать модульную сетку с прилипанием к ней объектов за счёт знакомой по другим «адобовским» программам функции Smart Guide. «Умные направляющие» напоминают таковые из InDesign и чрезвычайно полезны в работе. На мастерах можно добавлять, кроме прочего, элементы, которые не будут прокручиваться и смогут находиться ниже или выше прокручиваемых элементов на странице. Кроме того, в режиме планирования можно (в дополнение к основному макету) создавать версии для планшета и смартфона со связанным и синхронизируемым контентом между всеми версиями сайта. 

Надо отметить, что проект разработки сайта представляет из себя один файл .muse (и набор графики к нему), содержимое которого при публикации конвертируется на лету в HTML, CSS, JS, PNG с добавлением картинок к файлам для скачивания (ZIP, PDF и т. п.).

Импорт графики

Простым двойным щелчком по миниатюре страницы переходим в режим её редактирования. Переключение между режимами планирования, редактирования, предпросмотра и т. п. происходит также с помощью простых горячих клавиш. Так, сочетание , десятилетиями означавшее печать, здесь присвоено команде Preview.

Предполагается, что дизайн, хотя его можно делать и в самой программе, приносится из Photoshop или Illustrator. Пока поддержка Photoshop реализована лучше, но понятно, что будущее — за векторной графикой. Подобный подход был в свое время реализован в (светлой памяти) Flash Catalyst. Вначале тоже лучше поддерживался Photoshop, но затем была проработана интеграция с Illustrator, который и стал в дальнейшем основным средством графической поддержки Fc.

Кроме использования в Muse обычной нарезки из графических редакторов есть несколько интересных решений. Так, Muse позволяет импортировать файлы PSD-картинкой или по слоям. Идея заключается в том, что дизайнер ставит макет, сделанный в Photoshop, фоновой картинкой. Потом импортирует этот файл ещё раз по слоям и расставляет их на фоновой картинке, удаляя её после полного восстановления макета в Muse. Такого рода файлы программа будет экспортировать как PNG или JPEG — по собственному усмотрению. Растрирование элементов было опробовано ещё в InDesign для создания ePub и DPS-проектов. Будем надеяться, что в будущих релизах Muse нам позволят управлять выбором формата и параметрами растрирования. А там и создание SD- и HD-контента из одного оригинала не за горами...

Мало того, в Muse совершенно нормально поставить картинку, уменьшить, маскировать, если надо, инструментом Crop, и так оставить. Программа сама создаст из PNG или JPEG изображение финального размера и экранного разрешения. Таким образом, создавая, скажем, галерею изображений, уже не обязательно отдельно возиться с миниатюрами. 

Дизайн графических и текстовых элементов

Из собственных инструментов в Muse имеются: прямоугольник, возможность задавать ему и импортированной графике контур, градиент, закруглённые углы, прозрачность, три эффекта. Все перечисленные параметры, а также настройки обтекания объекта и полей вокруг него (padding) можно сохранить как Graphic Style. Прямо как в InDesign или Illustrator — выбрав образец и щёлкнув по кнопке на соответствующей палитре. При изменении объекта, присвоенного к стилю, напротив последнего появляется знак +. Дизайнер может убрать изменения командой Clear Overrides (как в InDesign) или может нажать на стиль с плюсом правой кнопкой мыши и сделать Redefine Style, обновив стиль и изменив характеристики присвоенных ему объектов в масштабе всего сайта.

А ещё к вашим услугам палитры Transform и Align. Куда без них? Последняя функционально практически идентична таковой в Illustrator. Передвижение, вращение объектов, их размеры — всё в пикселях. Пока не реализовано задание относительных величин (процентов или Em). Зато есть прикрепление объектов к верхнему, нижнему краям браузера и по углам. Можно также задать прозрачность и выбрать эффекты: тень, фаска, свечение и параллакс-прокручивание. Последнее добавлено уже в СС-версии (я начинал работать с программой ещё до эпохи CC) и представляет из себя возможность задать разную скорость передвижения объектов при вертикальном прокручивании страницы. Таким образом, прокручивание основного материала страницы может двигаться с одной скоростью, а, скажем, фоновые элементы с более низкой, создавая что-то вроде стереоскопического эффекта.

Уже реализованы возможности работы с типографикой. Хотя ещё нет таких простых функций, как изменение регистра в прописные, — текст приходится перенабирать или копировать в нужном регистре из InDesign. Muse может работать с тремя типами шрифтов: Web Safe Fonts, Web Fonts и System Fonts.

Web Safe Fonts — список шрифтов, установленных на всех системах. Это то, на что мы полагались от начала эпохи «развитого» интернета.

Web Fonts — подключаемые шрифты. В Muse доступна библиотека бесплатных шрифтов Adobe Edge Web Fonts, включающая в себя и некоторые шрифты из Adobe Typekit и Google Web Fonts. Коммерческие шрифты из библиотеки включенного в Creative Cloud сервиса Adobe Typekit можно также использовать и в Muse, но пока это не стандартная возможность и выполняется с помощью несложной манипуляции с кодом.

System Fonts — остальные установленные шрифты; будут экспортированы как растровый файл.

Ну и, конечно же, текст сохраняется в стилях. Подобно другим «адобовским» программам, имеются два типа стилей: Paragraph и Character Styles. Стиль создается очень просто: делается пример и сохраняется в палитре. Редакция стиля (Redefine Style) делается методом, описанным выше. Из опций стиля есть только список присвоенных ему атрибутов, имя и тэг. Имена всех типов стилей желательно (хоть и не обязательно) набирать строчными буквами. С пробелами система справится сама, заменив их на дефисы в CSS. В абзацных и символьных стилях есть определённый выбор тегов. Однако, даже если вы ничего не понимаете в HTML, на установках по умолчанию это всё равно будет работать (<p> для абзацных и <span> для символьных). И наконец, еще раз подчеркну, что система стилей глобальная, работает на уровне всего проекта.

Интерактивность и виджеты

У каждого объекта (не только у кнопок) может быть четыре состояния: Normal, Rollover, Mouse Down и Active. Можно делать несколько тем оформления ссылок. Внутренние ссылки создаются простым выбором страниц сайта из выпадающего меню, где они представлены в соответствии с иерархией сайта. Также есть возможность легко и просто расставлять якоря и ссылки к ним.

Редакция компонента навигации

Кроме ссылок есть готовые модели навигации. В палитре Widget Library, раздел Menus есть заготовки вертикальной и горизонтальной панелей навигации. Суть этих панелей в том, что они умеют работать с иерархией сайта. Причём дизайнер сам решает, показывать ли только первый уровень или выпадающие меню подразделов. Также можно исключать страницы из навигационного меню.  Упомянутая палитра Widget Library по сути — библиотека готовых интерактивных компонентов: несколько типов слайдшоу, формы (бланк с заполняемыми полями), два типа меню, аккордеон, панель вкладок (Tabbed Panel), презентации, лента новостей и пр. Можно предположить, что Adobe будет не только расширять список, но, возможно, даст подключать сторонние компоненты. 

Выбор интерактивнных компонент в палитре Widgets Library

Редакция готового компонента: замена картинок, текстов, изменение относительного местоположения и настроек

Несколько слов по поводу бланков. Набор заполняемых полей требует поддержки сервера. В Muse это решено с помощью сервиса Business Catalyst, доступ к которому получают все, у кого есть абонемент на Creative Cloud (а значит, и Muse). В текущей версии Muse CC электронные заполняемые формы могут быть «завязаны» не только с хостингом Business Catalyst, но и с любым другим хостингом, главное, чтобы хостинг поддерживал PHP.  

Внедрение HTML и метаданных

Можно ставить и другие решения для форм. Технически это будет выглядеть как вставка HTML-фрагмента. Сервис, например, Wufoo, на котором вы собрали форму, отдает её в качестве HTML-кода, который вставляется в Muse командой Insert HTML. Этим способом можно принести массу компонентов, которых нет в Muse в готовом виде: виджет карт, YouTube-виджет, код Google Analytics и т. п. В программе везде есть возможность задавать метаданные для элементов и страниц, что помогает SEO-оптимизации.

У Adobe есть ещё одна перспективная разработка — анимационный редактор Edge Animate. Как и Muse — это совершенно новая программа, создающая анимацию и интерактивный контент в формате HTML/CSS/JS визуальным методом, почти или совсем без ручного кодирования. Кроме прочего, она прямо предназначена для работы с Muse. Из Edge анимация экспортируется как файл OAM (Edge Animate Deployment Package) и вставляется в Muse как картинка. Просто, как открыть дверь холодильника!

Предпросмотр и публикация

На любом этапе дизайнер может нажать на панели сверху кнопку Preview и посмотреть, как будет выглядеть страница и весь сайт. Другой вариант — на лету сгенерировать код и открыть сайт или страницу в браузере. В плане публикации предлагается три варианта: можно сохранить как HTML-код вместе с используемыми изображениями и ресурсами, опубликовать на любой хостинг с помощью прямой загрузки на FTP или использовать для публикации сервис Business Catalyst. Выше сервис Business Catalyst упоминался в связи с формами. Кроме форм и хостинга он предоставляет решение по статистике посещаемости и возможность дать клиенту править тексты и картинки прямо в браузере! Впоследствии дизайнер сможет в Muse синхронизировать отредактированные клиентом данные в Business Catalyst со своим проектом.

Вердикт

Я перестроил свой сайт kletsel.com с помощью Muse. Имеющееся представление о веб-разработке помогло мне сделать более корректное с точки зрения браузера решение. Но в Muse можно легко обойтись и без «подкручивания» — в этом суть и преимущество нового редактора.  Все прошлые программы генерации HTML грешили генерацией путанных файлов с массой мусорного кода. Поэтому я попросил опытного веб-программиста посмотреть, что там нагенерировал Muse. К изумлению публики в моём лице программист отметил, что код на удивление чист и прост и (внимание!) вполне пригоден для последующей редакции человеком. В дополнение к перечисленным возможностям публикации, в Muse есть возможность экспорта сайта как папки со всеми HTML, стилями, скриптами, картинками и пр. Проще говоря, дизайнер теперь сам может оформить и сверстать сайт без обязательных знаний HTML-вёрстки. Не чудо ли?

Прошло лет пятнадцать (а это ничто по сравнению с вечностью) с момента появления Microsoft FrontPage — первого WYSIWYG-редактора сайтов, как дизайнеры получили действительно удобный и простой инструмент веб-разработки. Он позволяет не заниматься тегами, структурой и валидацией, а сконцентрироваться на том, что дизайнеры умеют лучше всего, — дизайне.

Об авторе: Алексей Клецель (www.kletsel.com, alexey@kletsel.com, Холон, Израиль), сертифицированный эксперт и инструктор по Adobe DPS, InDesign и Illustrator.