Основные принципы создания сайта.

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

    Единой классификации сайтов нет. К основным типам сайтов относят: 

• Интернет-магазины. Они являются сайтами для продажи товаров. Обычно здесь представлен большой ассортимент. Мы можем заказывать товар с доставкой прямо из дома. 
• Сайт-визитка. Обычный сайт от 3 до 5 страниц, где размещаются контакты, адреса и полезная информация о компании. 
• Порталы. Это сайты, напоминающие городские порталы, где есть ленты новостей, форумы и полезные сервисы (погода, почта, поиск). 
• Landing Page. Является одностраничным сайтом, целевой посадочной страницей с оформлением товара или услуги. Цель этого сайта заключается в продаже одного товара/услуги или небольшой группы товаров/услуг. 
• Сайт-каталог. Его предназначение заключается в рекламе своей продукции в сети интернета. Здесь имеется каталог и подкатегории, можно скачивать прайс-листы. 
• Корпоративный сайт и сайт компании. Предоставляет возможности для того, чтобы разместить новости, акции, разделы и подразделы услуг, портфолио и отзывы. 
• Блог. Является личным сайтом по интересам или на какую-то тему. Тематика может быть любой. Схож с информационным сайтом. 
• Сайт-галерея, портфолио. Относится к простым сайтам, где размещаются фотоработы. Подойдет для художника, фотографа и отдельного мастера. 
• Информационные сайты. Может быть общая тематика и узкотематичная. Темы самые разные: игры, здоровье, машины и т. д. 
• Форумы и сообщества. Могут быть оформлены частью сайтов или отдельным ресурсом. Зачастую располагаются на портале или на сайте информационном. 
• Агрегаторы и маркетплейсы (сайты-посредники). Являются каталогами товаров или услуг, которые предоставляют разные владельцы бизнеса. Могут быть платными и бесплатными. Бесплатные варианты имеют ограниченные возможности. 

    Можно выделить и другие типы сайтов, но их смысл будет располагаться в уже представленных рамках.

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

    Выделим следующие этапы создания сайта:

    Шаг 1. Определяем цели.

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

    Шаг 2. Выбираем домен и хостинг.

    Название сайта и хостинговую компанию лучше выбрать заранее. 

    Хостинг – это тот самый дом, где «живет» ваш сайт. Это место на одном из компьютеров (серверов) хостинговой компании, где физически лежат файлы вашего сайта – html-страницы, скрипты, картинки и прочее (в точности так же, как на вашем домашнем компьютере лежат в отдельной папке, например, ваши фотографии).

    К папке на вашем компьютере доступ имеете только вы, а к папке с вашим сайтом – все пользователи сети Интернет. Но как браузер узнаёт, из какой именно папки и какого хостинга нужно взять файлы сайта, чтобы показать их пользователю? Вспомните про дом – к вам могут прийти гости, но только в том случае, если вы скажете им адрес этого дома.

    Домен – это адрес вашего сайта. Например, домен для нашего сайта – https://emkelektron.cms.webnode.page/.

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

    Шаг 3. Составляем техническое задание.

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

Выделим основные разделы:

• Описание цели и назначения сайта, а также краткая информация о целевой аудитории.

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

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

• Требования к системе управления контентом. Определите список основных возможностей для администратора сайта, например, добавление фотографий в портфолио или изменение текстов на страницах, создание новых разделов или изменение структуры и т. д.

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

    Шаг 4. Создание прототипов.

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

    CMS (Content Management System) – это специализированное программное обеспечение, которое базируется на определенных сценариях (скриптах) и позволяет управлять контентом веб-сайта. Этот англоязычный термин переводится как «система управления контентом».

    Шаг 5. Написание текстов.

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

• Главная страница. Обязательно подготовьте данный текст до разработки сайта, чтобы увидеть, как он будет выглядеть рядом с другими блоками. Возможно информацию придется дополнить графическими элементами или разделить на части. 

• Страница услуги или карточка товара. Напишите текст для одной типовой страницы, чтобы затем по аналогии заполнить остальные. 

• Страница о компании. Аналогично Главной стоит подготовить текст заранее и продумать визуальные акценты.

    При создании текстов помним о том, что они должны быть уникальными. Мы ранее писали о том, что такое уникальность и как защитить тексты от копирования для Яндекса и Google.

    Еще тексты должны быть оптимизированными. Поэтому перед написанием текста необходимо составить список ключевых слов, или семантическое ядро, которые затем нужно будет распределить по тексту. Также в тексте следует указать теги Title, Description и заголовки h1-h3. 

    Шаг 6. Дизайн.

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

    Шаг 7. Оптимизация.

    Теперь перейдем к оптимизации всего сайта. Базовый список работ, который необходимо выполнить:

• Составление карты релевантности. На основе собранного ранее семантического ядра создаем план распределения ключевых слов между страницами сайта. Подробный туториал на эту тему.

• Регистрация сайта в Яндекс.Вебмастере и Google Search Console, чтобы настроить отображение информации о сайте для поисковых систем. 

• Добавление карты сайта (sitemap.xml), которая поможет ускорить индексацию сайта. Статья на эту тему.

• Создание robots.txt. Файл с инструкциями для поисковых роботов, какие страницы нужно или не нужно индексировать. 

• Настройка 404 страницы. Поможет перенаправить пользователей с пустых разделов на работающие страницы сайта. 

• Подключение SSL-сертификата, если, например, на вашем сайте планируется личный кабинет и/или форма заказа.

• Прописание тегов и метатегов. Необходимы, чтобы страницы привлекательно отображались в поиске. 

    Шаг 8. Верстка сайта.

    На самом деле данный этап выполняется почти одновременно с предыдущим, но для облегчения восприятия информации выделим его в отдельный шаг.

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

    Шаг 9. Наполнение контентом.

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

    Например, в разделы типа «Блог» или «Новости» разместите для начала несколько материалов (только если у вас не информационный портал), чтобы разделы не были пустыми. В идеале у вас не должно остаться пустых разделов, чтобы клиенты видели, что сайт рабочий и они могут сделать заказ.

    Шаг 10. Подключение веб-аналитики.

    Чтобы понимать, насколько эффективен ваш сайт и понятен ли он пользователям, необходимо установить счетчики веб-аналитики. Наиболее удобные и распространенные системы – Яндекс.Метрика и Google Analytics. 

    Еще стоит рассмотреть такие понятия, как  HTTP, URL и доменное имя.

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

    URL-адрес ведет к определенному файлу или странице, а имя домена помогает узнать, какой IP-адрес у ресурса.

    Доменные имена - ключевая составляющая инфраструктуры Интернета. Они предоставляют человеко-читаемые адреса веб-серверов, доступных в Интернете.

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

    URL обозначает Uniform Resource Locator. URL это лишь адрес, который выдан уникальному ресурсу в интернете. В теории, каждый корректный URL ведёт на уникальный ресурс. Такими ресурсами могут быть HTML-страница, CSS-файл, изображение и т.д. На практике, существуют некоторые исключения, когда, например, URL ведёт на ресурс, который больше не существует или который был перемещён. Поскольку ресурс, доступный по URL, а также сам URL обрабатываются веб-сервером, его владелец должен внимательно следить за размещаемыми ресурсами и связанными с ними URL.

    Вот несколько примеров URL:

https://developer.mozilla.org

https://developer.mozilla.org/ru/docs/Learn/

https://developer.mozilla.org/ru/search?q=URL

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

    URL состоит из различных частей, некоторые из которых являются обязательными, а некоторые - факультативными. Рассмотрим наиболее важные части на примере:

https://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument

    Каждый URL может быть напечатан напрямую в адресной строке браузера, чтобы сразу получить запрошенный ресурс.

    HTML (стандартный язык разметки документов) позволяет активно использовать URL для:

• создания ссылок на другие документы с помощью тега <a>;
• связывания документа с его дополнительными файлами, например с помощью тегов <link> или <script>;
• отображения медиа-элементов, например изображений (с помощью тега <img>), видео (с помощью тега <video>), звуков и музыки (с помощью тега <audio>) и так далее;
• отображения других HTML-документов внутри текущего с помощью тега <iframe>.

    Другие технологии, такие как CSS или JavaScript, также активно используют URL.