IDE специально для верстки и дизайна обычных веб-приложений?

Введение

Я использую CSS уже много лет, и, не заблуждайтесь, он имеет огромное значение для отделения ответственности за представление от HTML в отдельный уровень спецификации.

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

Технические характеристики

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

Что-то вроде ненавистных WYSIWYG-редакторов, которые мы иногда использовали в начале 2000-х или когда бы то ни было, но с единственным упором на дизайн и верстку . Перетаскивайте элементы. Привязать к сетке. Привязать элементы друг к другу. Управление и визуализация соотношения семантических и стилистических элементов и их назначение. И так далее.

Конечно, инструмент должен быть совместим с обычным процессом разработки, как в случае, когда я разрабатываю обычное приложение .NET ASP MVC в Visual Studio, но затем обращаюсь к этому инструменту для работы над макетом и стилем содержимого. Конечно, было бы глупо предполагать, что полное разделение этих двух факторов возможно, но это соединение, по крайней мере, было бы ясным и управляемым. (И, конечно же, инструмент теоретически может быть расширением для VS или других IDE — решение подобных проблем, но, возможно, усложнение всей среды.)

Таким образом, хотя реализация инструмента может быть довольно широкой, я думаю, что основная функция здесь заключается в следующем:

  1. Обеспечьте более высокие абстракции в отношении дизайна и макета веб-приложения (или любой графической системы, если вы хотите философствовать).
  2. Обеспечить графический интерфейс, который позволяет дизайнеру эффективно выражать свои намерения по стилю и переводу этой спецификации в «исполняемый» CSS (/JS).
  3. Занимайтесь только макетом и стилем веб-приложения и хорошо работайте вместе с нашими обычными рабочими процессами и инструментами для реализации серверной части веб-приложения.

Существует ли какой-либо инструмент, похожий на то, что я описал?

Любая ОС представляет интерес, но Windows была бы наиболее удобной.

Вы пробовали Expression Web? Поскольку вы используете Visual Studio, если я не ошибаюсь, Expression Web хорошо интегрируется с Visual Studio.
@scubaFun Спасибо за ваше предложение, но похоже, что это обычная IDE для веб-разработки - что-то вроде VS, но более легкое и ориентированное больше на внешний интерфейс. Я ищу инструмент, который представляет новые высокоуровневые абстракции в макете и дизайне, позволяет пользователю эффективно использовать их для определения стиля и макета контента в веб-приложении, а затем автоматически генерирует соответствующий CSS и возможный стиль/ JavaScript, ориентированный на макет. Я не вижу этого здесь вообще.
ой извините за это. Раньше я использовал Expression Blend, и что касается абстракции высокого уровня, это то, о чем вы спрашиваете. Но Expression Blend предназначен для приложений WPF и Silverlight, а не для веб-разработки. Я думал, что Expression Web будет таким же, как Expression Blend для веб-приложений.
@scubaFun Blend for Web определенно звучит красиво, будем надеяться, что что-то подобное появится среди нас в какой-нибудь славный день.
Adobe Edge Reflow звучит похоже, хотя сам я им не пользовался.
Раньше я использовал Google Web Toolkit (GWT) Designer, который делал некоторые вещи, которые вы описали выше. Я считаю, что Sencha взял многие элементы GWT и значительно их отполировал. Конечно, эти функции очень высокого уровня и инкапсулированы в концепцию виджетов пользовательского интерфейса. Это что-то слишком далекое от рамок вопроса?
Вы нашли что-нибудь? Мне бы хотелось что-то подобное, особенно с адаптивным дизайном.
Вы можете использовать визуальный код студии. Он предназначен для веб-разработчиков и легче, чем Visual Studio.

Ответы (1)

Новые редакторы WYSIWYG

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

Macaw , Sketch , Pinegrow или даже Photoshop + скобки

  • ✔ Обеспечьте более высокие абстракции в отношении дизайна и макета веб-приложения.
  • ✔ Обеспечьте графический интерфейс, который позволяет дизайнеру эффективно выражать свои намерения по стилю.
  • ✔ Перевести эту спецификацию в «исполняемый» css(/js)
  • ✔ Заботьтесь только о макете и стиле.
  • ✘ Хорошо сочетаются с нашими обычными рабочими процессами

Эта часть программного обеспечения хороша для начального макетирования и дизайна. Но работа с существующим приложением (т. е. импорт html, выражение стилей и экспорт изменений) работает не очень хорошо.

К сожалению, у них те же проблемы, что и у WYSIWYG-редакторов: они могут импортировать самостоятельно сгенерированный код, но плохо справляются со сторонним или модифицированным кодом.

IDE для веб-разработки

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

TweakStyle , Espresso , Brackets , Dreamweaver , ... (есть много других. Я решил перечислить эти четыре, потому что они предлагают предварительный просмотр в реальном времени.)

  • ✘ Обеспечьте более высокие абстракции в отношении дизайна и макета веб-приложения.
  • ✘ Обеспечить графический интерфейс, который позволяет дизайнеру эффективно выражать свои намерения по стилю.
  • ✔ Перевести эту спецификацию в «исполняемый» css(/js)
  • ✔ Заботьтесь только о макете и стиле.
  • ✔ Хорошо сочетаются с нашими обычными рабочими процессами

Это редакторы кода с полезными инструментами для интерфейса и веб-дизайна, такими как предварительный просмотр в реальном времени или Override (TweakStyle и Espresso). Они, вероятно, будут хорошо работать с вашим рабочим процессом, но им может не хватать абстракции, чтобы позволить дизайнерам думать, и они могут быть немного техническими для использования некоторыми дизайнерами.

Лучшим решением, вероятно, будет использовать инструмент для рисования, чтобы продумать дизайн (Photoshop, Gimp или просто бумага и ручка). Затем примените его к существующему приложению, используя одну из следующих IDE.

Отказ от ответственности: я создатель TweakStyle

Что касается ваших потребностей, вас может заинтересовать функция Override в TweakStyle. Это позволяет перемещаться по удаленному бэкэнду, предварительно просматривая изменения, внесенные в статические ресурсы. Также он работает безупречно с sass и меньше.

Не стесняйтесь добавлять ссылки на другие программы в комментариях.