Обзор Adobe Dreamweaver CC 2015: возвращение к форме

Проблема Dreamweaver всегда заключалась в том, чтобы идти в ногу с Интернетом. Это может показаться странным, учитывая, что это приложение для создания веб-сайтов — либо с помощью ручного кодирования, либо с помощью различных инструментов и представлений, ориентированных на макетирование, — но веб-технологии никогда не остаются на месте надолго. Чтобы оставаться актуальными, вы не можете представить в своем программном обеспечении новый интересный инструмент, который был нужен всем два года назад, но сейчас он в целом устарел.

Поэтому в последнее время удивительно, насколько легкими были некоторые обновления Dreamweaver, до такой степени, что вы начали задаваться вопросом, станет ли «изящный новый значок» в конечном итоге хедлайнером. Однако в Creative Cloud 2015 кажется, что возможности Dreamweaver и то, что от него требуется современным веб-дизайнерам, наконец-то совпадают.

Адаптивная сеть

Наличие «создания адаптивных веб-сайтов» в качестве флагманской функции этого обновления, вероятно, достаточно, чтобы заставить большинство веб-дизайнеров подавиться дорогим латте. Это не значит, что Adobe только что открыла для себя адаптивный веб-дизайн (всего через пять лет после остальной части отрасли); просто с этим обновлением кажется, что компания наконец-то «получила» адаптивный дизайн – и предоставила несколько полезных инструментов для его реализации.

Например, в режиме интерактивного просмотра над веб-страницей теперь отображаются панели запросов Visual Media с цветовой кодировкой: зеленые для запросов с использованием максимальной ширины; фиолетовый для запросов с минимальной шириной; и синий для запросов с обоими. Щелчок по панели автоматически изменяет размер вашей страницы в режиме интерактивного просмотра до соответствующей точки останова, а также имеется полоса прокрутки для ручного перетаскивания макета, как при тестировании в браузере.

При проектировании с нуля интеграция с Bootstrap теперь дает вам преимущество, и есть шесть шаблонов на выбор. Демонстрационный сайт Adobe, Vermilion, особенно хорошо демонстрирует преимущества этого подхода: столбцы можно перетаскивать, что позволяет изменять их размер, не создавая ужасный беспорядок в коде. (Возьмите это, Dreamweaver примерно 2005 года!)

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

Время тестирования

Еще одна важная новая функция, которая должна вас порадовать, — это предварительный просмотр на нескольких устройствах. У Adobe есть форма в этой области. С помощью Adobe Edge Inspect вы можете загрузить сайт в Google Chrome, запустить его на нескольких устройствах, а затем повозиться с инспектором кода; все это время вы можете следить за обновлениями результатов вашей работы в реальном времени.

Фактически, теперь вы можете делать все это прямо из Dreamweaver. Для всех устройств, которые подключены к сети и вошли в ваш Adobe ID, вы либо сканируете QR-код, либо вводите URL-адрес в браузер. Когда вы впоследствии обновите свой макет в Dreamweaver, он обновится на всех ваших устройствах примерно через секунду.

Предположительно, это было разработано с учетом мобильных устройств — для тестирования незавершенных сайтов на iPad, iPhone и устройствах Android — но оно имеет более широкую сферу применения. Можно использовать тот же URL-адрес в браузере настольного компьютера на втором дисплее и/или на виртуальной машине под управлением альтернативной ОС. Это значительная экономия времени и единственная причина для перехода – или, по крайней мере, если вы уже являетесь пользователем Dreamweaver, возврата приложения в свой набор инструментов.

Кодируйте быстрее

Дизайнеры, которых в первую очередь интересует представление кода, также получают приличные обновления. Имеется поддержка линтинга кода для устранения ошибок в режиме реального времени, а также Emmet. Последняя представляет собой систему, которая позволяет вам набрать что-то вроде «#menu>ul>li*5», нажать Tab, а затем ваше сокращение расширится до полного кода (в данном случае неупорядоченного списка из пяти элементов внутри элемента div, который имеет значение идентификатора «меню»). Существует кривая обучения, но после освоения Эммет становится чрезвычайно мощным, и приятно видеть встроенную поддержку.

Два дополнительных обновления представления кода особенно привлекли мое внимание. Первый — это один из «предварительных просмотров технологий» Adobe (или «незавершенных фрагментов»), который выделяет все случаи, когда дважды щелкнул термин. Хотя он полезен для быстрого обнаружения определенных элементов или значений классов, он наиболее удобен для быстрого поиска терминов в тексте страницы. Новые возможности предварительного просмотра также оказываются полезными: всплывающее окно отображается при наведении курсора на изображение или ссылку на цвет. Однако всплывающие окна немного малы, и в конечном итоге мне хотелось, чтобы эта функция работала с множеством других вещей, таких как ссылки. Возможно, в 2016 году.

Больше того же

В других местах изменения более тонкие и изменчивые. Панель «Извлечение» теперь автоматически сохраняет несколько изображений из PSD-файлов для соответствия различным разрешениям экрана, но для этого требуется загрузить PSD-файл в Creative Cloud. Это не очень поможет, когда вы в пути или у вас нет безумно быстрого широкополосного доступа. Также есть интеграция Adobe Stock, торговой площадки и некоторые незначительные изменения в интерфейсе.

Наиболее заметным изменением пользовательского интерфейса является новая панель DOM, которая напоминает аналогичные функции в духе Coda. Вы можете использовать его, чтобы быстро просмотреть структуру документа и изменить ее. Однако на самом деле это могло бы быть сделано с помощью средств для расширения и сжатия всех вложенных элементов внутри элемента одним щелчком мыши. Он также кажется тесным и загроможденным, и это критика, которую можно адресовать Dreamweaver в целом. Хотя многие из новых функций довольно хороши, пользоваться ими не так уж и приятно. Его стиль «Adobe OS» по-прежнему кажется чуждым как OS X, так и Windows.

Вердикт

Во многих отношениях Dreamweaver остается самым амбициозным приложением для веб-дизайна, стремящимся привлечь всех желающих. В нем есть инструменты для заядлых программистов, а также дизайнеров, которые предпочитают работать более визуально. Хотя устаревшие хламы по-прежнему прочно приварены к приложению — представление «Дизайн» по-прежнему скрывается за Live, как неприятный запах, напоминая вам о старых недобрых временах веб-дизайна — здесь явно предпринимаются попытки перенести Dreamweaver в настоящее.

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