Что такое статическая веб страница

Статический сайт

Статический сайт — это сайт, который состоит из неизменяемых веб-страниц. Исходный код таких страниц состоит только из HTML и возможно ещё CSS и JavaScript. Чтобы обновить или дополнить информацию на статичной веб-странице, нужно самостоятельно вручную внести изменения в её исходный код.

Когда веб-сервер получает запрос от клиента на какой-нибудь ресурс (изображение, HTML документ и др.), он находит этот ресурс и просто отправляет его клиенту:

Плюсы статического сайта:

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

Минусы статического сайта:

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

С этой темой смотрят:

• Динамический сайт
• Введение в html
• Введение в CSS
• JavaScript: Возможности и ограничения

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Статические и динамические веб страницы

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

По поведению документа в браузере пользователя, различают:

• Статические html страницы
  Статические — означает, что страница выглядит всегда одинаково, на зависимо от действий пользователя. Например, меню организованно ссылками на отдельные страницы, а не выпадающим списком.
• Динамические html страницы
  Эти страницы уже могут реагировать на действия пользователя и изменяться. Например, при щелчке по тексту может показываться всплывающий блок текста с переводом слова. Кстати, именно так реализован один из плугинов-переводчиков для браузера Firefox.

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

Это может звучать несколько запутано, но не переживайте. Когда вы с этим столкнетесь — все будет проще.

Самый распространенный язык для создания динамики веб страниц — это JavaScript. (Не путайте с языком программирования Java. Это две совершенно разные сущности.)
Реже используется VBscript(visual basic script). (Microsoft как всегда пошла своим путем.)

По способу создания документы делят опять на статические и динамические.

Статическими называют страницы, если они лежат на сервере в html виде.
А динамическими называют те, которые генерируются «на лету» по запросу браузера.

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

Если ваш сайт содержит часто меняющийся контент ( content — информация на сайте), то вам на помощь придут скрипты, выполняющиеся на сервере . И это ключевое отличие этих скриптов, от описанных ранее (тех, что написаны на JavaScript). Работает это следующим образом:

1. Браузер запрашивает у сервера документ
2. Сервер определяет, что документ является скриптом и запускает его на выполнение
3. Скрипт генерирует html страницу
4. Сервер отправляет сгенерированную страницу браузеру, так что тот и не догадывается, что на сервере отработал скрипт

Существует несколько языков программирования, на которых могут писать скрипты, которые генерируют «динамические» страницы. Самые распространенные из них:

1. Perl
2. SSI
3. PHP
4. ASP
5. Python
6. Java
7. Бинарный код (программа на Си или С++ скомпилированная в исполняемый код)

Каждый из этих языков имеет свои особенности применения. Писать скрипты можно на любом языке. Главное знать его сильные и слабые стороны и использовать их эффективно. Я еще расскажу об этих языках поподробнее на страницах нашей рассылки. А пока, важно знать, что существуют различные языки программирования, на которых программируются сайты с часто меняющимся контентом.

Как правило если вы видите, что адрес страницы заканчивается на .html или .htm, то это обычная статическая страница. (Можно конечно настроить сервер так, чтобы он исполнял скрипты, которые заканчиваются на эти же окончания, только это не практично. Все таки .html и .htm — это стандарт и переопределять эти окончания не стоит.) Если же вы видите любое другое окончание, то это скорее всего скрипт. Например, скрипты на языке PHP имеют обычно расширение .php, на языке Perl — .pl, ASP — .aspx
Если же адрес не содержит имени страницы , то сервер будет использовать документ заданный по умолчанию (обычно это либо index.html либо index.htm либо index.php).

Надо сказать, что сейчас все больше набирает силу гибридная система. Название у нее, как у голландского футбольного клуба — AJAX, что означает: Asyncronous JavaScript And XML (Как расшифровывается название голландского клуба я не знаю:)). Эта технология позволяет скриптам на JavaScript обращаться к какому либо скрипту на сервере и получать информацию с сервера. Это в свою очередь, дает пользователю гибкость и позволяет перезагружать только часть содержимого страницы, а не всю ее полностью (что значительно экономит трафик).

Выводы

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

Если же у вас на сайте часто меняющаяся информация, то выбор следует остановить на использовании скриптов.
Вот расхвалил вам скрипты. Однако, у скриптов есть один минус: они требуют дополнительных ресурсов от сервера для своей работы. Если html страничку надо просто прочитать с сервера и отправить браузеру, то скрипт надо сначала запустить и выполнить. К тому же, очень часто скрипты используют систему управления базой данных ( СУБД ) для хранения изменяющихся данных, что создает дополнительную нагрузку.

http://webarticles.neomoon.ru

Добавить в закладки:

В Интернет сотни миллионов страниц с информацией. Проблема в том, как найти именно ту информацию, которая вам нужна. . Читать дальше.

Как найти и отличить ваш сайт среди многих других? Вы заказали оптимизацию ресурса в поисковых системах, технические спе. Читать дальше.

Можно ли ускорить сегодняшний Internet чисто программным способом, не используя более дорогие каналы каналы связи? Можно. Читать дальше.

Как же быть? Где грань между красотой и функциональностью? Что важнее? Важнее в сайте контент и удобство. Вот представьт. Читать дальше.

Почему статические сайты удобнее динамических?

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

Поделиться
Поделиться

Какие бывают сайты

Веб-сайт может быть динамическим или статическим. В первом случае при запросе пользователя страница собирается в момент запроса, а затем отображаются в браузере. Во втором — на сервере хранятся уже готовые страницы. Работу динамических сайтов обеспечивают CMS или движки — WordPress, Joomla, ModX, Битрикс и т. д. Их интерфейс обычно не сложнее, чем у текстового редактора — для публикации контента достаточно самых общих знаний html. Главный минус динамических сайтов — большие затраты системных ресурсов: при каждом обращении пользователя взаимодействуют веб-сервер, приложения для генерации страниц и база данных. Резкий рост количества посетителей или запросов означает, что скорость загрузки сайта падает. Кэширование частично снимает это неудобство, но его можно использовать не всегда и не везде. Потребление системных ресурсов открывает уязвимость для DDoS-атак — большое количество запросов выбивает их из эфира. В большинстве случаев движки — системы c открытым кодом, поэтому найти и использовать уязвимости может любой желающий. Наверняка вы уже слышали о том, как можно сломать комментарием WordPress, а через HTTP-заголовки на Joomla! можно получить доступ к базе данных сайта. Статические сайты состоят из готовых страниц (HTML, JS, графика, шрифты), загруженных на сервер. Важные достоинства статических сайтов: скоростная загрузка страниц и повышенная устойчивость ко взлому. Кроме того, сайты из статических страниц без проблем выдерживают гораздо большую посещаемость, чем их динамические «коллеги». Неудобством статики считается необходимость генерировать сайт заново даже для внесения самых незначительных изменений в содержание сайта. Ускорить и облегчить этот процесс призваны разнообразные генераторы статических сайтов. Сайты-визитки, блоги, каталоги товаров, документацию к программным продуктам и техническим устройствам удобнее делать статическими. Для таких сайтов может потребоваться динамическая часть — комментарии, поиск, личный кабинет пользователя, создание страниц. Динамическую часть помогут реализовать сторонние инструменты или расширения к генераторам.

Обзор генераторов статических сайтов

• MiddleMan отличается подробной документацией, написанной простым и понятным языком. Для MiddleMan написано немало расширений и плагинов, список которых постоянно обновляется. Поддерживается развертывание с помощью FTP, SFTP, rsync, git.

• Hugo — простой и популярный генератор с высокой скоростью сборки сайтов. Для Hugo нет расширений и плагинов, но это компенсируется возможностями контентной модели: возможно задавать тип записей, группировать их в каталоги, выводить теги и метки. Форматирование контента происходит с помощью формата Markdown. Результат выгружается с помощью FTP.

• Jekyll — дефолтный движок для статических сайтов на основе GitHub Pages; часто используется для ведения блогов. Jekyll поддерживает разметку Liquid, используя конструкции исключительно языка разметки, а не языка программирования. Опубликовано много расширений для блогов — добавление облака тегов, полнотекстовый поиск по блогу и даже специализированный плагин для научных и образовательных блогов. Поддерживает FTP, rsync и git.

• Octopress — по сути, надстройка Jekyll c плагинами и шаблонами для более удобного ведения блогов. В качестве формата разметки постов по умолчанию используется Markdown, но можно использовать и обычный HTML. Octopress поддерживает переезд с других площадок: все записи из блога на WordPress переносятся с помощью 1 скрипта. Блог можно интегрировать с социальными сетями, есть плагины для вставки календарей, списка похожих постов, облака тегов и так далее. Работает с git, rsync, можно настроить деплой по FTP.

• Hyde — полный аналог Jekyll, только написанный на другом языке — отсюда название, отсылающее к «Странной истории доктора Джекилла и мистера Хайда». По функционалу Hyde не отличается от MiddleMan и Jekyll. Проект находится в стадии активной разработки, поэтому документация представлена лаконично, а плагинов и расширений существуют мало. Поддерживается деплой с помощью FTP, rsync, git.

• Pelican обладает широким набором функций: работа с черновиками, интеграция с социальными сетями, добавление изображений, конвертация HTML-страниц в PDF, поддержка многоязычности и многое другое. Хорошо подходит для ведения блогов: посты можно писать на Markdown, reStructuredText и Asciidoc. Устанавливается через pip, проект разворачивается по FTP или SSH.

• В основу Grow лег принцип — «конфигурация, а не код». Для установки генератора нужно скачать скрипт с официального сайта — необходимые пакеты будут установлены в автоматическом режиме. Чтобы создать новый проект, нужно клонировать на локальную машину тему-репозиторий на GitHub. Тема включает набор файлов, которые описывают архитектуру сайта. Никакого программного кода при этом писать не нужно. Контент хранится в формате Markdown или HTML. Поддерживает FTP, rsync и git.

• DocPad чаще всего используется для блогов, но реальные возможности его применения гораздо шире. DocPad можно использовать и как генератор, и как движок, и как шаблонизатор. Оснащен удобным API, а на официальном сайте опубликованы «скелеты» — заготовки, на основе которых пользователи могут создавать собственные сайты. Для DocPad написано большое количество плагинов и опубликованы скрипты, автоматизирующие деплой через FTP, rsync и git.

Хостинг статических сайтов

После создания сайта встает вопрос его размещения. Динамические сайты из-за требований к ресурсам размещаются на виртуальных или выделенных серверах. Для работы статического сайта нужно гораздо меньше системных ресурсов, поэтому в качестве площадки можно использовать любое виртуальное хранилище, которое позволяет раздавать контент пользователям. Возможности специализированных платформ для хранения статики примерно одинаковы, основное отличие — в стоимости хранения и раздаче контента. Облачное хранилище Selectel стоит от 4 рублей в месяц и, кстати, промосайт хранилища — чистая статика, размещенная в самом хранилище.

Имели дело со статическими сайтами? Расскажите в комментариях, какими вы пользовались генераторами и где размещали сайт.

Публикуется на правах рекламы

Статические и динамические сайты — в чем разница и что выбрать.

Любые сайты в интернете, можно разделить на два типа: статические и динамические.

Вроде всё просто, пока не начнешь глубже копать эту тему. Например, сайт может быть динамичным, но при этом содержать статические элементы, а может быть наоборот, статичный сайт с динамическими элементами.

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

Что может быть статическим или динамическим?

При обсуждении, является ли сайт статичным или динамичным, вначале нужно определить, какой аспект сайта вы обсуждаете. Эти аспекты можно разделить на три вида:

Код

Код веб-страницы может быть статическим или динамическим. Это довольно просто: статический контент — это контент, который жестко запрограммирован на странице. Динамические страницы получаются на ходу, после запроса пользователя путем обращения к CMS или какой-либо внешней базе данных.

Доставка

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

Браузер клиента

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

Основные различия между динамическими (серверный рендеринг) и статическими (рендеринг на стороне клиента) сайтами

Вначале использования Интернета, все веб-страницы отображали одинаковый контент для каждого пользователя. Со временем многие веб-сайты стали использовать базы данных и такие серверные языки программирования, как Python, PHP, ASP, Ruby, Java и другие. Это позволило сайтам стать динамическими и отображать контент для пользователя в зависимости от настроек или ввода определенной информации.

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

Что такое динамический веб-сайт?

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

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

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

Преимущества динамических сайтов

Работа с базой данных

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

Использование CMS

Использование базы данных означает, что вы также можете использовать CMS. Контент, хранящийся в CMS, может быть разнообразным. То есть, сюда относится основное содержимое сайта: текст, картинки, видео и аудио контент. И вспомогательное содержимое: макет и настройки сайта, возможность размещения дополнительного программного кода, например, JavaScript кода для размещения рекламы и так далее.

Всё это обеспечивает гибкость при создании сайтов, а также CMS часто позволяют работать с сайтом сразу нескольким пользователям, (SEOшники, авторы, редакторы и прочие). И что самое интересное, пользователи могут управлять сайтом, не вдаваясь в программирование.

Низкая стоимость текущего обслуживания

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

Недостатки динамических сайтов.

Ограничения на дизайн

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

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

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

В зависимости от CMS может быть сложно применить сразу несколько дизайнов на одном сайте, чтобы отобразить разный тип контента на одном сайте. К примеру, вы не сможете сделать сильно отличную страницу с информацией о заказе, со страницей оплаты товара.

Динамичный сайт, может потребовать больших затрат.

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

Но как только нужно что-то уникальное, то это уже обойдется дороже. Например, вы решили внедрить какой-то уникальный виджет на сайте. Если программисты и дизайнеры будут разрабатывать его специально под вашу распространенную CMS, то им придется еще думать и о том, как внедрить его на сайте, и чтобы это не сломалось при следующем обновлении CMS.

Что такое статический сайт.

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

У выбора статичного сайта также есть свои преимущества и недостатки.

Преимущества.

Гибкость

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

Стоимость

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

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

Время загрузки

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

Недостатки.

Более сложное обновление.

Создать статический сайт можно с помощью различных инструментов, наподобие Adobe XD, но вот редактировать такой сайт, будет уже намного сложнее. И если вы не знакомы с HTML, CSS и с веб программированием, то весьма вероятно, вам придется просить других специалистов, чтобы они внесли даже простые изменения.

Более сложное масштабирование.

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

Стоимость.

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

Так что выбрать?

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

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

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

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