Как абстрагировать данные от дизайна на веб-страницах?

Question

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

Answer 1

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

Ответ прост: просто не используйте inline CSS (например, style="color:red"), но используйте его в полностью отдельной таблице стилей, которую вы включаете в HTML head. Дайте HTML-элементам разумные идентификаторы и / или имена классов. Вы можете позволить CSS подключиться к этому. Также используйте HTML мудро и семантически. Разделите содержимое в позиционируемых элементах блока. Не используйте таблицы для разметки.

Конечно, зацените CSS Zen Garden , как кто-то уже упоминал до меня. Он использует один и тот же контент (HTML-код) во многих различных стилях, которые вы можете выбрать из меню.

Для более интересных блогов / ссылок вы можете найти эти поиски Google полезными:

• семантика html
• Соглашения об именах CSS

Кстати, эта же история применима и к JavaScript. Не используйте встроенный код JS, но просто поместите его в полностью отдельный файл и используйте ненавязчивый Javascript как можно больше. То есть Ваш веб-сайт все еще должен использоваться без Javascript. Библиотека jQuery является идеальным выбором для этого. Его селекторы также основаны на наличии разумных идентификаторов и / или имен классов.

Answer 2

Взгляните на CSS Zen Garden и используйте функцию просмотра исходного кода.

Я воспринимаю этот вопрос как «предоставить пользователям возможность настраивать макет».
Такова работа CSS, чтобы обеспечить «стиль» отдельно от HTML «разметки».

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

Это не сложно, я делал это несколько раз в нескольких редизайнах.
Вам просто нужно как можно больше придерживаться семантики.

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

Answer 3

Наиболее распространенным подходом в наши дни является использование шаблона Model-View-Controller .

Answer 4

Ответы, предлагающие использовать шаблон MVC, на 100% верны, и я призываю вас принять его тоже.
Более конкретно, технология, обычно используемая для получения того, что вы ищете, - это использование системы шаблонов (например, Smarty , если вы используете php, например).
Платформа веб-приложений (например, Cakephp , Rails или Django ) может помочь вам начать работу и добиться правильного разделения, обычно без особых усилий.
Единственным недостатком является то, что может потребоваться изменение подхода и / или менталитета:)

Answer 5

Как сказал Дэвид, используйте шаблон MVC. Но самая большая помощь - это раннее проектирование системы, чтобы избежать проблем с привязкой ваших данных (источников) к вашему интерфейсу. Создайте свои интерфейсы, чтобы вы могли быстро их менять и т. Д.