Adobe Edge - это новый продукт от компании Adobe, предназначенный для работы с HTML5. Это визуальный редактор, в котором вы можете создать не только статическую веб-страницу с использованием новых возможностей HTML5 и CSS3, но и добавить этой странице анимационные эффекты (это достигается за счёт использования программой JavaScript-а и, конкретно, движка jQuery). Да, на данный момент этот редактор умеет создавать только html-страницы, но в будущем, скорее всего, список возможностей программы будет расширяться.

Внешне программа довольно сильно напоминает старую-добрую Adobe Flash. Давайте рассмотрим основные элементы редактора Adobe Edge.

Интерфейс программы:

Центральное место в программе отведено рабочему столу. Рабочий стол имеет свой набор свойств, которые мы можем изменять: размер, цвет и т.д..

Панель инструментов:

Панель инструментов включает основные инструменты, используемые при работе в программе: инструмент выделения, инструмент рисования прямоугольника с закруглёнными краями и простого прямоугольника, инструмент работы с текстом. Да, выбор небогатый...

Панель свойств:

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

Временная шкала:

Временная шкала в программе используется для создания анимационных эффектов на веб-страницах. Анимация создаётся за счёт использования JavaScript-а (движка jQuery). Конечно, jQuery - штука хорошая. Но создать действительно сложную анимацию на jQuery - это задача крайне непростая и трудоёмкая.

Дерево элементов:

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

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

И ещё парочка важных замечаний.

Во-первых, не стоит забывать, что HTML5 поддерживается далеко не всеми браузерами. Да и с поддержкой JavaScript порой возникают проблемы. Увы, но это так...

Во-вторых, результат работы программы Adobe Edge - это не только html-страница, но ещё и куча других файлов: css-стили, несколько js-файлов (в том числе и jQuery-библиотеки) и файл с расширением EDGE (это файл необходим для того, чтобы вы могли в дальнейшем редактировать свою веб-страницу, созданную в Adobe Edge). Не знаю как вам, но мне это кажется не очень удобным. Особенно, если это сравнивать с Flash, где результат - это один-единственный swf-файл.

Ну а под конец, приведём небольшой пример. Есть у html-верстальщиков актуальная тема - создание блоков с закруглёнными краями. Решений этой задачи было разработано множество и далеко не самых простых. А вот в Adobe Edge это делается абсолютно просто и в визуальном режиме. Блоку DIV просто указывается радиус закругления краёв через панель свойств. И всё. Смотрите сами:

Кстати, знаете сколько "весит" данный пример? А "весит" он почти 200 kb! Можете сами скачать и проверить мои слова - исходник здесь (для просмотра исходника сама программа не нужна, а нужен только современный браузер и/или любой текстовый редактор).

Вот вам и "убийца" Flash-а :-)