От автора: создать сайт, владея веб-технологиями — простая задача. Намного сложнее сделать продукт, который будет одинаково хорош как для пользователя, так и для поискового робота. Именно потому разработка веб структуры является одним из ключевых этапов создания приложений и сайтов. Некоторые недооценивают этот момент, считая его рудиментарным наследием устаревшей модели работы поисковика. Это не совсем так. Проектирование структуры — разносторонний процесс, требующий научного подхода и понимания принципов работы Интернета.
Приложение и сайт: есть ли разница в структуре
Многие продвинутые пользователи сети до сих пор не могут определить, чем отличается приложение от сайта. Наверное, это один из самых распространенных запросов относительно веб-разработки, которые вбивают юзеры. И правда, разница размыта настолько, что даже сам создатель перед проектированием не всегда знает, что он будет разрабатывать. Самый распространённый ответ: это почти одно и тоже. Только сайт не всегда приложение, а приложение всегда сайт. Если вы знакомы с кругами Эйлера, то такой рисунок сможет вам немного прояснить ситуацию.
И правда, некоторые веб-сайты являются веб-приложениями, в то время как все приложения — сайты. Их отличие можно определить тем, что сайт — это информационная страница. На ней размещены данные для чтения и ограниченный функционал, который обеспечивает доставку этой информации пользователю. При создании структуры сайта-НЕприложения внимание уделяется лишь тому, чтобы пользователь нашел страницу в сети и при использовании чувствовал себя комфортно.
По сути, с веб-приложением все так же. Но, проектируя приложение, нельзя забывать, что оно должно выполнять и определенные бизнес-функции. Например, покупка цветов, заказ услуг и прочее. Для приложения характерна динамика — страница в браузере изменяется соответственно с личностью пользователя и его поведенческими реакциями. Для этого нужно правильно обустроить архитектуру системы «вопрос-ответ», которая и будет частью web-структуры, о которой поговорим сегодня.
Но динамический веб-сайт — норма для нашего времени. «Статика» используется лишь на сайтах-визитках, но даже их пытаются украсить динамическими элементами. Конечно, если есть динамика, построенная на HTML-файлах, которые ссылаются друг на друга, это можно называть «чистым» сайтом. Но в целом, если говорить о современной web-структуре, настоящей разницы между сайтом и приложением просто не существует.
Все же зыбкая линия разграничений принята у веб-разработчиков. Считается, что приложение характеризует более широкая функциональность. То есть, чем больше сайту добавлено различных возможностей при проектировании, тем больше он становится приложением. Так что, если раньше вы не видели никакой разницы, теперь знаете, что ее фактически не существует и на самом деле.
Многогранная структура
Итак, определились, что для приложения и сайта будем описывать одинаковую web-структуру. Более правильно для восприятия можно сказать, что та архитектура, которая применима для приложения, подходит для описания сайта. Но нельзя сказать, что web-структура состоит из одного только SEO наполнения. Потому рассмотрим весь сайт полностью, включая основные его компоненты.
Все, из чего состоит сайт
…или приложение, если так удобнее. Несмотря на то, что подходы в разработке совершенно разные, как и инструменты, которыми пользуется создатель, можно выделить три основных элемента при проектировании:
клиентская часть, или фронтенд. Сюда входит и GUI для пользователя, и весь интерактив страницы. Как правило, с него начинается создание проекта, его концепт. Сначала автор видит у себя в голове внешность сайта и то, что он будет выполнять. Тем более, что для визиток разработкой фронтенда может закончиться создание страницы;
бэкенд, или серверная сторона. По сути, это программное обеспечение для сайта, которое расположено на сервере и выполняет функцию ответа на запрос. Допустим, вы играете на сайте в игру: своими действиями пользователи отправляют запросы, которые обрабатываются на игровом сервере. После обработки программа генерирует скрипт для кода, который получит каждый игрок в виде результата или дальнейшего этапа игры;
система управления базой данных. Это компонент web-структуры, который хранит всю необходимую информацию для работы приложения. Новичкам сложно понять, для чего он нужен: можно ведь просто создать папку с нужными файлами и ссылаться на них в коде. Но если бы такой подход использовали при создании ВКонтакте, вы бы увидели этот сайт примерно в 2028 году. К тому же, работал бы он медленно и не всегда корректно. СУБД позволяет не только оперативно работать с готовыми данными, но и постоянно пополнять базу. Наиболее популярными СУБД являются MySQL и MariaDB.
Все эти элементы взаимодействуют между собой при работе веб-приложения. Пользователь при помощи браузера взаимодействует с сервером. Браузер, получив данные от юзера, отправляет соответствующий запрос на сервер. Сервер запрашивает соответствующую программу, которая решает, как поступать с данным запросом. Если ей нужно дать информативный ответ, она вызывает СУБД и получает его. Имея достаточное количество данных, серверная программа генерирует HTML-код и отправляет браузеру для отображения на пользовательском девайсе.
Для каждой из сторон этого процесса характерны свои языки программирования. Для фронтенда это формальные HTML/CSS + JavaScript. Для серверной части все гораздо разнообразнее. По сути, на «бэке» можно использовать любой из языков общего назначения, но, как правило, это PHP, Java, Python, Ruby и С-подобные PL.
Семантическая структура
Именно ее понимают под проектированием структуры сайта чаще всего. Для создания не нужно глубинных познаний в веб-программировании. Лишь элементарная логика и понимание того, как работает поисковик. Несмотря на то, что роботы Google развиваются, и создавать web-структуру становится сложнее, семантическое ядро и структура страниц остаются на первых позициях в проектировании.
Семантическая структура — единственный из элементов, вид которого нужно подбирать согласно тому, какое предназначение имеет сайт или приложение. К примеру, web-структура интернет-магазина и блога — радикально разные вещи.
Самым простым примером логической структуры является линейная. Все понятно, как 2х2: одна страница ссылается на следующую и так далее, словно книга. Но такой подход не совсем то, что представляет человек под веб-сайтом. Работать с такой структурой не очень удобно, потому вы, возможно, никогда таких страниц и не видели. Они создаются для нужд компании или предпринимателя: для презентаций, портфолио, каталогов и прочего. Существуют и линейные структуры с ответвлениями. Но и это не лучший вариант: для того же портфолио с изюминкой 
. К таким же трудночитаемым структурам относят и блочную, где все страницы зациклены вокруг равнозначных им в плане родства с главной.
Наиболее распространенной является древовидная структура. Видели генеалогическое древо? Схема точно такая же, только «родитель» один — главная страница. Здесь все подразделы логически распределены. Такое проектирование наиболее предпочтительно для всех веб-проектов. Даже если у вас простая визитка и несколько ссылок в меню — лучше создавать ее на основе «дерева». Например, у вас сайт тату-салона. Логично будет поделить блоки на мастеров, им дать ссылки на эскизы и работы, а остальные ветки распределить на ценовую политику и отзывы на работу.
Хотя подобные сайты-визитки уже можно делать в форме одностраничников, это не значит, что для них не нужно проектировать будущую структуру. Она будет проста: главная страница и все остальные. Но таким образом вам будет легче работать со смысловой наполненностью web-структуры.
Коммерческие сайты — это те же лендинги, только с ответвлениями у подчиненных блоков. Цель у сайта все та же — представить продукт или услугу. Но, как показала практика, лучше не изобретать велосипед и создать простой одностраничник.
Наиболее сложно подчиненную структуру имеют социальные сети и интернет-магазины. Но и их очень легко организовать, если слушать голос логики. При создании web-структуры подобных сайтов нужно обратить внимание на смысловую нагрузку каждого блока. Тогда у вас не возникнет трудностей при отнесении информации к каждому из них.
Файлы в системе
Это та часть web-структуры, над оптимизацией которой трудятся программисты. Не то, чтобы это был критический момент, но когда над продуктом работает не один создатель, то файловая структура определяет львиную долю скорости разработки. При ее проектировании нужно учитывать потребности каждого специалиста, который участвует в разработке.
Как вы уже понимаете, здесь находятся различные мультимедийные файлы, которые будет отображать сайт, а также все остальные документы, с которых он состоит. Здесь и HTML/CSS разметка, и клиентские сценарии, с которыми взаимодействуют пользователи.
На самом деле, не существует универсального совета по созданию толковой структуры для сайта. Но некоторым принципам все же нужно следовать. Для начала необходимо распределить данные по категориям. Не стоит хранить музыкальное оформление, иллюстрации и видеоролики в «корне» вместе с index.html. Будет намного лучше, если для каждого вида данных вы создадите отдельную папку. Еще лучше, если внутри таких папок вы создадите еще и подвиды.
При проектировании приложения становится понятно, что все изображения нельзя хранить в одном месте. Некоторые из них вы будете использовать при создании «каркаса» продукта. Сюда входят фоновые изображения, логотип, «менюшки», если они нарисованы, и прочее. Также будут и «контентные» изображения. К примеру, для оформления статьи — фотографии создателя и прочие иллюстрации.
Толковая web-структура отличается также и тем, что имена папок и файлов в ней несут смысловую нагрузку. Ни к чему называть каталог «one» и помнить его содержание. Если есть возможность разгрузить голову — сделайте это. Тем более, если после вас с проектом будет работать другой разработчик. Ему безымянное проектирование доставит немало хлопот. Также стремитесь называть все английскими словами. Русскоязычный человек без труда поймет, что находится в папке predriyatiye. Но для иностранца это будет бессмысленный набор символов, который он не сможет перевести без посторонней помощи.
Структурный помощник
Для человека, который никогда не работал с web-структурой, ее написание кажется непосильным логическим трудом, особенно если есть трудности с объектным мышлением. Но, как уже говорилось в одной из наших статей, выдумка велосипеда — порок веб-разработчика. Если что-то уже написано до вас — лучше использовать это решение (совершенствуйте его!).
К примеру, вы создаете приложение и знаете, что у конкурента оно уже есть и хорошо работает. Подсмотрите структуру у него! Для таких целей существует специальное ПО, которое скачивает сайт со всеми его элементами. Примером такой программы может служить Teleport Pro для Windows, которая успела себя хорошо зарекомендовать. От аналогов ее отличает корректность скачивания и высокая скорость. Так что некогда придуманную структуру можно рассмотреть и применить для своего кейса.
На этом заканчиваем нашу статью о создании web-структуры. Помните, что правильно структурированный сайт убивает сразу двух зайцев: его легче продвигать и просматривать. Поисковик хорошо индексирует страницы, если они находятся в четкой иерархии. Ну, а если вы, отбросив бритву Оккама, сделаете все сложным, Google просто проигнорирует сайт. Точно так же поступит и пользователь: зачем ему ходить по неудобным страницам, если он может чувствовать себя комфортно на сайте у конкурента? Создавайте простые и удобные продукты!