Содержимое / функциональность ASP.NET против дизайна / макета / стиля - PullRequest
1 голос
/ 16 февраля 2009

При разработке веб-приложения с использованием ASP.NET, есть ли у вас какие-либо советы о том, как отделить разработку контента / функциональности от дизайна, чтобы их можно было разрабатывать отдельно и параллельно?

Ситуация такова:

  • Клиент согласился с тем, какую функциональность он хочет
  • Заказчик меняет свое мнение о внешнем виде (оформлении и оформлении) страниц
  • Веб-дизайнер не является экспертом:
    • Не разрабатывает чистый CSS-макет с нуля
    • Использует различные макеты на основе таблиц (с CSS) от сторонних сайтов, чтобы использовать их в качестве примера / прототипа макета для обсуждения с клиентом

Учитывая это, как начать кодирование функциональности до того, как макет на основе таблицы будет завершен?

Я думал, что один из способов сделать это может быть:

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

Это единственный или лучший способ сделать это? Какие еще есть способы? Любые советы, подсказки или хитрости, чтобы сделать это проще?

Ответы [ 4 ]

4 голосов
/ 17 февраля 2009

Всегда хорошо иметь визуальную «скелетную» компоновку на месте, прежде чем начинать какое-либо кодирование. Причина в том, что если у вас есть прототип макета, то вы можете многократно предлагать вашему клиенту обратную связь с макетом. Если бы я был тобой, я бы полностью отказался от макета таблицы. Причина в том, что в веб-формах, если вы не используете главную страницу, вам придется редактировать каждую страницу по отдельности (или создавать множество элементов управления вокруг одного и того же реплицированного макета). Есть несколько способов сделать это:

Если вы знаете, что собираетесь использовать CSS (подсказка, подсказка), я бы посмотрел на различные доступные варианты: Макеты Ironmyers CSS , Гала-макет (40 таблиц стилей CSS) и мой любимый CSS-макеты веб-дизайна с открытым исходным кодом , и выберите тот, который, по вашему мнению, будет «ближе всего» к макету, который вы собираетесь использовать. Это не обязательно должно быть идеально, это должен быть только скелет.

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

Вам не нужно быть экспертом, чтобы сделать это; но он даст вам быстрое и грязное представление о том, как будет выглядеть ваш веб-сайт и как части будут сочетаться друг с другом.

Существуют различные преимущества использования макета на основе CSS для создания прототипов:

  • Вы можете найти / заменить идентификатор класса CSS, чтобы изменить его, если вы измените макет (или используете свой любимый язык сценариев, чтобы сделать это за вас)
  • Вы можете потратить очень мало времени на манипуляции с макетом при разработке бэкэнда
  • Уже созданные макеты позволяют редактировать CSS и нажимать кнопку Обновить, чтобы сразу увидеть изменения; без необходимости рисовать с HTML.

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

1 голос
/ 17 февраля 2009

В основном я работаю так, как вы определили здесь:

Код функциональности (которая включает в себя создание активных элементов на каждом страница) не заботясь о (указав) их макет и стиль

Затем, в конце, после того, как дизайнер и заказчик договорились на дизайн, а затем вырезать и вставить активные элементы в конструктор страницы прототипа.

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

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

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

РЕДАКТИРОВАТЬ (НАЧАЛО):

Сначала я взял повторяющиеся части и разделил их на пользовательские элементы управления. и я добавляю мастер-страницы в качестве контейнеров. Я добавляю пользовательские элементы управления в главные страницы. тогда среда готова.

Затем я начинаю добавлять ссылки на мастер-страницы к своим активным страницам и добавляю ссылки CSS или другие элементы HTML на активные страницы, если это необходимо. Я имею в виду, я не переписываю свои активные страницы. Большая часть работы выполнена с помощью мастер-страниц и пользовательских элементов управления. Я только добавляю таблицу и некоторые ссылки CSS на мои активные страницы.

РЕДАКТИРОВАТЬ (КОНЕЦ)

Я использую CSS , Темы ASP.NET , Мастер-страницы и Пользовательские элементы управления , чтобы упростить дизайн и свести к минимуму связанный с ним дизайн. файлы.

1 голос
/ 16 февраля 2009

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

*
{
   margin: 0;
   padding: 0;
}

body
{
   background-color:#827575;
   color: #c6d3d5;
   font: 75%/1.5em Verdana, Helvetica, Geneva, "Helvetica Neue", sans-serif;
} 

`#container
{
    margin-top: 30px;
    text-align: left;   
    margin-right: auto;
    margin-left: auto; 
}

`#content
{ 
    margin-right: auto;
    margin-left: auto;
    width: 850px;
    margin-top: 10px;
}

Поместите div контейнера и внутри него div контента на главной странице - вокруг основного заполнителя контента. Теперь у вас есть с чем поработать. Ваш парень теперь может использовать таблицы на страницах контента и применять там встроенные стили, если необходимо, , сейчас . Позже, другой дизайнер с лучшими знаниями может прийти и перенести весь CSS в таблицу стилей. Просто практическое предложение, чтобы оно продолжалось: -)

1 голос
/ 16 февраля 2009

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...