Люди, которые работают в индустрии веб-дизайна, сравнивают разработку интерфейсных сайтов с трехногой табуреткой. Эти три этапа — три уровня веб-разработки — составляют структуру, стиль и поведение сайта.
Почему вы должны разделить слои?
Когда вы создаете веб-страницу, ее структура должна быть привязана к вашему HTML, визуальные стили — к CSS , а поведение — к скриптам. Некоторые из преимуществ разделения слоев:
- Общие ресурсы . Когда вы пишете внешний файл CSS или JavaScript, любая страница на сайте может использовать этот файл. Если вам нужно внести изменения в этот файл, возможно, для обновления некоторых типографских стилей на веб-сайте, каждая страница, которая использует эту таблицу стилей, получит это изменение. Нет необходимости редактировать каждую страницу веб-сайта индивидуально, что может быть трудным делом для большого веб-сайта.
- Ускоренная загрузка : после того, как клиент впервые загрузил скрипт или таблицу стилей, он кэшируется веб-браузером. Поскольку эти общие ресурсы теперь содержатся в кэше браузера , другие страницы, запрашиваемые в браузере, загружаются быстрее, что повышает общую скорость и производительность страницы.
- Команды из нескольких человек . Если на веб-сайте одновременно работает несколько человек, используйте системы контроля версий, которые позволяют проверять и проверять файлы, чтобы все работали с последними версиями . Этот процесс намного сложнее, если стили и поведение переплетаются со структурными документами.
- SEO : сайт, который демонстрирует четкое разделение стиля и структуры, вероятно, будет работать лучше для поисковых систем, потому что они могут сканировать этот контент более эффективно и понимать страницу, не увязая в визуальном стиле и информации о поведении.
- Доступность : внешние таблицы стилей и файлы сценариев более доступны для людей и для браузеров. Программное обеспечение, такое как программы чтения с экрана, может легче обрабатывать контент со структурного уровня, не имея дело со стилями, которые они все равно не могут использовать.
- Обратная совместимость : сайт, который разработан с отдельными уровнями разработки, с большей вероятностью будет обратно совместим, поскольку браузеры и устройства, которые не могут использовать определенные стили CSS или у которых отключен JavaScript, могут по-прежнему просматривать HTML. Затем вы можете постепенно улучшать свой веб-сайт с помощью функций браузеров, которые их поддерживают.
HTML: слой структуры
Структура или уровень содержимого веб-страницы является базовым HTML- кодом этой страницы. Подобно тому, как каркас дома создает прочную основу, на которой строится остальная часть дома, прочная основа HTML создает платформу для создания веб-сайта.
Слой структуры — это место, где вы храните весь контент, который ваши клиенты хотят прочитать или посмотреть. Структура HTML может состоять из текста и изображений и включает в себя гиперссылки, которые посетители будут использовать для навигации по сайту. Эта информация кодируется в соответствии со стандартами HTML5 и может включать в себя текст, изображения и мультимедиа (видео, аудио и т. Д.).
Каждый аспект содержимого сайта должен быть представлен на структурном уровне. Это разделение позволяет клиентам, у которых отключен JavaScript или которые не могут просматривать CSS-доступ ко всему сайту, если не ко всем его функциям.
CSS: слой стилей
Этот слой определяет, как структурированный HTML-документ будет выглядеть для посетителей сайта, и определяется CSS (каскадными таблицами стилей). Эти файлы содержат стилистические инструкции о том, как документ должен отображаться в веб-браузере. Слой стиля обычно включает в себя медиа-запросы, которые изменяют отображение сайта в зависимости от размера экрана и устройства .
Все визуальные стили для веб-сайта должны находиться во внешней таблице стилей. Вы можете использовать несколько таблиц стилей, но каждый файл CSS требует HTTP-запрос для его получения, что влияет на производительность сайта .
JavaScript: уровень поведения
Уровень поведения делает веб-сайт интерактивным, позволяя странице реагировать на действия пользователя или изменяться в зависимости от ряда условий. JavaScript является наиболее часто используемым языком для уровня поведения, но CGI и PHP также очень часто используются.
Когда разработчики ссылаются на уровень поведения, большинство из них имеют в виду уровень, который активируется непосредственно в веб-браузере. Используйте этот слой для непосредственного взаимодействия с объектной моделью документа. Написание корректного HTML в слое контента важно для взаимодействия DOM в слое поведения. Когда вы создаете слой поведения, вы должны использовать внешние файлы сценариев, как и в CSS, для оптимизации скорости и производительности.