Программирование

Три слоя веб-дизайна

Люди, которые работают в индустрии веб-дизайна, сравнивают разработку интерфейсных сайтов с трехногой табуреткой. Эти три этапа — три уровня веб-разработки — составляют структуру, стиль и поведение сайта.

Почему вы должны разделить слои?

Когда вы создаете веб-страницу, ее структура должна быть привязана к вашему HTML, визуальные стили — к CSS , а поведение — к скриптам. Некоторые из преимуществ разделения слоев:

  • Общие ресурсы . Когда вы пишете внешний файл CSS или JavaScript, любая страница на сайте может использовать этот файл. Если вам нужно внести изменения в этот файл, возможно, для обновления некоторых типографских стилей на веб-сайте, каждая страница, которая использует эту таблицу стилей, получит это изменение. Нет необходимости редактировать каждую страницу веб-сайта индивидуально, что может быть трудным делом для большого веб-сайта.
  • Ускоренная загрузка : после того, как клиент впервые загрузил скрипт или таблицу стилей, он кэшируется веб-браузером. Поскольку эти общие ресурсы теперь содержатся в кэше браузера , другие страницы, запрашиваемые в браузере, загружаются быстрее, что повышает общую скорость и производительность страницы.
  • Команды из нескольких человек . Если на веб-сайте одновременно работает несколько человек, используйте системы контроля версий, которые позволяют проверять и проверять файлы, чтобы все работали с последними версиями . Этот процесс намного сложнее, если стили и поведение переплетаются со структурными документами.
  • SEO : сайт, который демонстрирует четкое разделение стиля и структуры, вероятно, будет работать лучше для поисковых систем, потому что они могут сканировать этот контент более эффективно и понимать страницу, не увязая в визуальном стиле и информации о поведении.
  • Доступность : внешние таблицы стилей и файлы сценариев более доступны для людей и для браузеров. Программное обеспечение, такое как программы чтения с экрана, может легче обрабатывать контент со структурного уровня, не имея дело со стилями, которые они все равно не могут использовать.
  • Обратная совместимость : сайт, который разработан с отдельными уровнями разработки, с большей вероятностью будет обратно совместим, поскольку браузеры и устройства, которые не могут использовать определенные стили CSS или у которых отключен JavaScript, могут по-прежнему просматривать HTML. Затем вы можете постепенно улучшать свой веб-сайт с помощью функций браузеров, которые их поддерживают.

HTML: слой структуры

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

Слой структуры — это место, где вы храните весь контент, который ваши клиенты хотят прочитать или посмотреть. Структура HTML может состоять из текста и изображений и включает в себя гиперссылки, которые посетители будут использовать для навигации по сайту. Эта информация кодируется в соответствии со стандартами HTML5 и может включать в себя текст, изображения и мультимедиа (видео, аудио и т. Д.). 

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

CSS: слой стилей

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

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

JavaScript: уровень поведения

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

Похожие посты
Программирование

Что такое канал RSS? (И где его взять)

Программирование

7 причин, почему изображения не загружаются на ваш сайт

Программирование

Запустите агент SQL Server: настройте SQL Server 2012

Программирование

15 лучших бесплатных обоев дня Святого Патрика