Как работает веб-сайт со стороны пользователя выглядит довольно просто: это всего лишь набор отображаемых в браузере страниц с элементами навигации, баннеров, новостей и прочей информации.
На самом деле, если заглянуть по другую сторону страницы отображаемой браузером, все эту информацию выводит в окне браузера специальные языки программирования (php), разметки (html, xhtml), стилей (css), скриптов (JavaScript) и отвечают за динамическое содержимое.
Информация от пользователя в виде нажатия на ссылку или ввода определенного запроса в окно поиска, поступает на сервер, где обрабатывается и выводится, уже в готовом виде и посетителю сайта абсолютно все равно, какое программное обеспечение установлено на сервере и как оно работает.
Техническая сторона работы веб – сайта
Что такое клиент
Клиентом является программа-браузер (opera, google, mozilla), которая работает на вашем компьютере или любом другом девайсе (телефон, часы, ноутбук и пр.)
Что такое сервер
Под сервером понимают две вещи:
Веб-приложение и веб-сайт: разница за 8 минут
Во-первых – это главный компьютер, на котором все работает. Он расположен в дата-центре, в какой-то интернет-компании.
И с другой стороны – под сервером понимают приложение, которое работает на этом компьютере. Т. есть, приложение называют веб-сервером.
Клиент – это браузер, сервер – это веб-сервер.
Сам сайт хранится на стороне сервера. Клиент обращается к серверу, открывает сетевое соединение, отправляет запрос, веб-сервер отвечает на этот запрос и возвращает в браузер HTML-страничку.
Другими словами – сама html-страница хранится на веб-сервере, клиент получает её от сервера по сети.
Важно понимать, что веб-сайты (веб-приложения) работают в режиме запрос – ответ. Как правило, на каждый запрос открывается одно сетевое соединение.
Что такое ресурс
Кусочки информации в вебе называются ресурсами:
- Веб-страница – это ресурс;
- Картинка, которая хранится на сервере – это тоже ресурс.
У каждого ресурса есть уникальный идентификатор – URL.
Браузер обращается к серверу, открывает сетевое соединение, отправляет идентификатор ресурса (имя ресурса, которое он хочет получить), веб-сервер возвращает через это же соединение ему этот ресурс.
Иными словами, происходит запрос – происходит ответ. После чего сетевое соединение закрывается.
Идея очень простая.
Браузер – это программа для просмотра ресурсов. Ресурсы бывают разными, например, html-странички. Браузер получает этот ресурс и пытается отобразить по определенным правилам.
Если есть текст – он отображает текст, если это картинка, он отображает картинку, гиперссылку и т. далее.
Один ресурс может содержать в себе другие. Например, вы загружаете веб-страницу, она может содержать в себе картинки.
В таком случае, браузер проанализирует страницу, поймет, что она содержит в себе картинки, их идентификаторы и ссылки (URL), после этого он запросит с веб-сервера недостающие ему ресурсы. И когда все ресурсы будут загружены, браузер может целиком отобразить страницу.
Это цикл работы веб-приложений. После того, как пользователь делает какое-то действие, цикл повторяется.
К примеру, пользователь нажимает на ссылку переходит на другую страницу, браузер все действия повторяет.
Как это происходит более подробно, или с чего все начинается?
Пользователь вбивает в адресной строке некоторые слова, как правило, это доменное имя (mail.ru, вконтакте). Первое что нужно сделать – это преобразовать доменное имя в IP-адрес.
Система DNS
Каждая машина (компьютер) сети интернет имеют уникальную адресацию. Адрес каждой машины называют IP-адресом, который представляется в виде набора чисел.
Сейчас существует две версии айпи-адресов:
IP в версии 4, состоящие из 4-х байт и IP версии 6. Понятно, что запоминать все IP-адреса, всех веб-серверов – это не реально, поэтому для этого используется система DNS – распределённая база данных, которая хранит в себе отображение имён на IP-адреса.
Распределённая она по причине того, что все записи хранить в одной машине невозможно, слишком большая нагрузка и объём данных.
Поэтому система DNS иерархическая. Все доменные имена разделены точками. Самая правая часть – это домен верхнего уровня.
Какая-то группа машин, которая называется корневыми серверами DNS, хранит информацию о доменах верхнего уровня:
.ru – Россия
.de – Германия
.kz – Казахстан
Браузер вначале обращается именно к этим DNS-серверам, эти машины уже отправляют его туда, где хранятся DNS-сервера более низкого уровня (mail.ru).
Браузер по очереди, с помощью какой-то библиотеки, опрашивает все сервера и в конечном итоге находит сервер, который выдает ему нужный IP-адрес.
Другими словами, система DNS преобразует доменное имя понятное и запоминаемое в IP-адрес.
Что происходит после того, как браузер получил IP-адрес?
Он устанавливает сетевое соединение. В свою очередь, сетевое соединение (IP-соединение) для браузера выглядит фактически как файл, в который он может что-то записать и с которым может что-то прочитать, называется socket.
Браузер открывает socket, который устанавливает сетевое соединение с удаленной машиной. Далее, по этому сокету передает какой-то запрос и получает ответ.
В каком формате передавать запрос?
Протокол передачи данных
Протоколов передачи данных множество. Для повсеместной работы в основном используются два вида протокола:
HTTP (англ. «протокол передачи гипертекста») — сетевой протокол верхнего уровня для передачи гипертекстовых и произвольных данных в интернете.
При помощи HTTP браузер получает данные от веб-серверов и может отображать их в понятном виде. Точно также происходит и обратный процесс — отправку пользовательских данных обратно, на сервер (например, при регистрации).
HTTPS (HyperText Transfer Protocol Secure) – это расширенный HTTP – протокол, поддерживающий шифрование.
Более подробно об этих протоколах можно узнать в документации microsoft
Поисковые системы, в первую очередь, отдают предпочтения сайтам с протоколом HTTPS (https://starting-constructor.ru).
Как работает веб – сайт созданный на cms
Сайт, на котором часто обновляется информация, требует мобильного управления.
Страницы, которые часто изменяются, называются динамическими и для создания динамических страниц необходим движок, или говоря современным языком, система управления содержимым (Content Management System, CMS).
Именно движок формирует веб-страницы в соответствии с запросами пользователя.
В CMS-системах есть два интерфейса:
пользовательский и администраторский.
Пользовательский — сторона сайта, которую видят пользователи.
Администраторский — внутренняя сторона сайта, доступ к которой выдает администратор.
Все управление сайтом производится из администраторского раздела: добавление страниц, статей, различных модулей, управление пользователями, рассылками, баннерами, созданием ссылок,
В данном уроке разберемся с базовым понятием — веб-сайт. Также поговорим для чего он нужен, как работает web сайт, как его создать (сделать) бесплатно, не имея никаких специальных навыков.
Определение — Что означает веб сайт?
Веб-сайт (Web-site), сокращенно сайт (site) — совокупность общедоступных взаимосвязанных веб-страниц, которые используют одно доменное имя. Веб-сайты могут создаваться и поддерживаться отдельным лицом, группой, бизнесом или организацией для различных целей. Вместе все общедоступные веб-сайты составляют всемирную паутину.
Если говорить простым языком, сайт – это адрес расположенный в интернете, на котором находится какая-нибудь информация (текста, видео, фотографии, документы, музыка и прочее). А интернет – это получается сборник таких адресов.
Или так: сейчас вы находитесь в браузере на веб-странице и читаете эту информацию, также вы можете перейти на другие страницы и все страницы в совокупности (в приделах данного веб-проекта) и есть сайт.
Элементы сайта
Замечательный прогресс в технологиях создания веб-сайтов и безграничные возможности человеческого воображения определили огромное разнообразие веб-сайтов, которые мы видим сегодня в Интернете, когда задаем вопросы yandex, google и другим поисковым системам. Однако все они содержат некоторые базовые элементы, которые делают их легко узнаваемыми пользователями с точки зрения функциональности — домашняя страница (также известная как индексная), первая страница, которую мы видим при входе на web проект; меню — состоящее из гиперссылок (ссылки на основные страницы или разделы); основной контент (содержимое), область нижнего колонтитула (footer или подвал) с важными ссылками, информацией об авторских правах и тому подобное. С помощью гиперссылок посетитель перенаправляется с одной веб-страницы проекта на другую.
Типы сайтов
Веб-сайтов на данный момент большое разнообразие: образовательные, новостные, порнографические, форумы, социальные сети, сайты электронной коммерции (интернет магазины), блоги, лендинги и прочие.
Из чего состоит сайт
Доменное имя (домен) – адрес, например: web-revenue.ru, здесь .ru – является доменной зоной.
Сервер (хостинг) – компьютеры / сервера подсоединенные к всемирной паутине, на которых располагаются файлы веб ресурса.
Файлы – обычно это CMS (системы управления сайтами), при помощи которых удобно создавать и управлять web страницами. Либо это может быть просто одна или набор статических html страниц (с картинками, css, js), которые необходимо редактировать в ручную.
Контент – содержимое веб-страниц: изображения, видео, текст и прочие файлы.
На заметку: оптимизация контента – один из важнейших этапов продвижения сайта.
Как работает web сайт (видео)
Довольно нудная лекция института, кто хочет копнуть глубже: сокеты, протоколы и т.п., смотрите.
Можно ли создать сайт самостоятельно и нужны для этого какие-нибудь знания (навыки)
Когда я учился делать сайты (начало 2010 г.), не знал что существуют CMS системы (они уже были в то время, но их было мало, русской документации не было). Чтобы создать простенький сайт состоящий из 5 страниц (с картинками, меню, прочими элементами), мне пришлось освоить HTML (гипертекстовая разметка), CSS (каскадные таблицы стилей – отвечают за внешний вид сайта), на это у меня ушло 3 недели (освоил не до уровня гуру – за это время) – следовательно на создание убого сайта ушло 3 недели, это при условии что я не плохо работал с редакторами изображений) + в дальнейшем осваивал js и php.
Сейчас 2020 год, сайт может создать любой человек (хоть школьник 3 класса) без каких-либо специальных знаний и даже бесплатно. Для этого сейчас существует множество интернет сервисов и CMS систем.
Примечание! Это все касается типовых шаблонных сайтов (лендинги, визитки, блоги, даже соц. сети и интернет магазины с базовым функционалом). Если нужны не стандартные (уникальные) решения, придется обращаться к помощи специалистов.
Обзор двух инструментов для самостоятельного создания сайта
Конструктор Тильда + Видео-обзор основных функций.
http://tilda.cc/ru/ (откроется в новом окне)
С вордпресс немного по сложнее, но если вы хотите больше функций и гибкости, то лучше воспользоваться им.
На самом деле бесплатных сервисов, движков, десктопных программ, фреймферков огромное количество. В рамках обучения по созданию и продвижению сайтов я буду рассказывать про WordPress и MODX (для более продвинутых).
Надеюсь я доходчиво все объяснил, если остались вопросы, задавайте, с радостью отвечу.
Источник: web-revenue.ru