Лучшая IDE для веб-разработки

Предыстория

Лично для меня удобство работы значит очень много. Писать код можно и в блокноте, но, согласно практике, это гораздо трудозатретнее, нежели с использованием специального софта. В поисках удобного редактора я перебрал почти все, что только можно, Aptana Studio 3, Bluefish Editor, Quanta Plus, Dreamweaver, Microsoft Visual Studio, Geany, NetBeans, NeonHtml, Web Development Studio 2.0, Notepad++ и многие другие. Должен признать, что из всех перечисленных мне больше всего понравился NeonHtml, потом я с него перешел на Notepad++, а после начал использовать параллельно Microsoft Visual Studio. Какие были критерии?
1. Удобство
2. Удобство работы с HTML
3. Желательно — одновременная подсветка нескольких синтаксисов (например, на странице есть html и css — они должны адекватно подсвечиваться)
4. Так же было бы неплохо наличие внутреннего валидатора
5. Возможность предпросмотра (желательно — с движком на выбор)
6. Симпатичный дизайн. Комфортное окружение значит все же немало.
7. Быстродействие.
8. Неплохо — понимание HTML5 и CSS 3
Это основные критерии. NeonHTML умел многое из этого списка, но проект, к сожалению, завис несколько лет назад, мир праху его. Отсутствие адекватной подсветки HTML5 удручало.
Как следствие — я перешел на Notepad++, которым, кстати, до сих пор очень часто пользуюсь. Он легких, подсветка синтаксиса есть, он вполне адекватно заменяет обычный блокнот, но в виде бонуса в нем есть блекджек и несколько шлюх.
Потом в поисках я наткнулся на Microsoft Visual Studio. Штука прикольная, весьма удобная, за исключением некоторой тяжеловесности и все же заточненности именно под программистов, а не под верстальщиков. Так что я стал искать дальше.

И вот — найден победитель конкурса, получающий приз зрительских симпатий — Microsoft Expression Studio. Подробности — ниже.

Что это такое?

Как говорит всезнающая,

Microsoft Expression Studio — пакет программ компании Майкрософт, предназначенных для разработчиков и дизайнеров.
В состав Microsoft Expression Studio входят продукты:
Microsoft Expression Web — визуальный редактор HTML.
Microsoft Expression Blend — WYSIWYG-инструмент для проектирования пользовательского интерфейса приложений, создаваемых на основе Windows Presentation Foundation. Blend также можно рассматривать как эффективный визуальный редактор для формата XAML.
Microsoft Expression Design — профессиональный инструмент для графического дизайна и подготовки иллюстраций, который позволяет создавать элементы пользовательского интерфейса для настольных и web-приложений.
Microsoft Expression Media — Специальное приложение для создания каталогов медиафайлов.
Microsoft Expression Encoder — средство кодирования видео.

Рассмотрим поближе

Самая интересная фича — это SuperPreview. Это нечто вроде «предпросмотра» в WYSIWYG, но не совсем. Эта штука позволяет посмотреть страницу в нескольких браузерах сразу. На данный момент доступны движки Internet Explorer 6-9 и Firefox 3.6. Да, налицо дискриминация (слышал такую историю: на какой-то выставке разработчиков Майкрософтовцы бегали и кричали на людей, настраивающих аппаратуру для презентации «вы что нам поставили!!! на этом не будут видны преимущества IE9 перед Firefox’ом!!!), но хоть что-то. Программисты, взломайте прогу, добавьте туда Chrome и Opera:)
Выглядит эта штука по идее так:
Microsoft Expression Studio - SuperPreview
Как видно, слева показано как страницу отрисовывает Firefox 3.6, морально устаревший (и не только морально), а справа — «офигенно крутой» IE 9. Да, суперсовременный браузер рисует страницу так же, как и старенькая лисичка) Но это не важно. В качестве бесплатного бонуса мы можем наблюдать в левом верхнем углу доказательство того, что Mail.ru продался Корпорации Зла.
Microsoft Expression Studio - SuperPreview
А на этой картинке виден очень замечательный режим — наложение. Одно отображение накладывается на другое, и мы наблюдаем сколь убого отрисовывает страницы IE6 по сравнению с Firefox 3.6.22.
Один из браузеров можно выбрать «каноническим», и тогда при выборе элемента показывается красным светом «отклонение» от «канонического» варианта (в окошке с размерами и свойствами). Короче — это такой «типа firebug», только без возможности править код.
разумеется, сам код можно просмотреть, и очень удобно вычленить где находятся разночтения:
Microsoft Expression Studio - SuperPreview

Теперь обратимся к самому редактору — Microsoft Expression Web.

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

Фича номер раз

Microsoft Expression Web
Это режим, именующийся Split. Суть режима в том, что экран делится напополам, в одной половинке мы видим итоговый вид страницы, а в другой код. Но это фигня. Фича в том, что жамкнув на каком-то элементе в итоговом виде страницы нам любезно выберут код этого фрагмента. Microsoft получает +1 балл. Молодцы, очень удобно.

Фича номер два

Microsoft Expression Web
Присмотритесь к картинке повнимательнее. Черт, я опять забыл прикрутить увеличение картинок, они ужимаются. Не суть. Присмотритесь,
1. Подсвечивается и HTML код, и CSS, и JavaScript. Удобно. На мой взгляд так же очень удобно что они подсвечиваются однотипно.
2. Желтым выделены строки с багами (или фичами?). Если навести мышку нам любезно объяснят, почему автор — мудак. Внизу есть специальная кнопочка для перехода к следующей ошибке. Удобно, в общем это организовано, и разумно. Корпорация зла забирает еще 2 балла.

Фича номер три

Microsoft Expression Web
Здесь мы можем наблюдать целый ряд фич, связанных со стилями. Слева — мы наблюдаем список примененных к выбранному элементу свойств. Справа — как я понял — возможность прикрутить один из уже имеющихся стилей. Надо разобраться,но по идее — весьма удобно. Хотя руками такие вещи надежнее все же делать. Но удобно.

Фича номер четыре

Microsoft Expression Web может из любого говнокода сделать конфетку (разумеется, чисто визуально).
Вот два скриншота: на первом ужасное говно, написанное на заре моей деятельности, нихрена не структурированное, а на второй — результат нажатия 1 кнопки.

Можно было найти пример и получше, но тот говнокод я так и не нашел.

Статья будет дополняться по мере появления у меня времени, но общее представление о редакторе уже можно составить)

comments powered by HyperComments