Тема 2. Статический или динамический сайт?

4
3062

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

Когда у вас на сайте всего 10-20 страниц, объединенных одной index.html страницей с меню в шапке, то проблема не стоит так, как если бы вы хотели управлять более содержательным сайтом. Например, сайт с относительно большим количеством страниц рано или поздно нужно будет редактировать: создать/модифицировать/удалить страницу или пункт меню, заполнить уникальные для каждой страницы метатеги, что будет достаточно сложно если ваш сайт – не динамический! Далее разберемся в понятиях, что такое статический, а что такое динамический сайт?

Особенности статического сайта

статический или динамический сайт

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


resume penguin

Тут следует пояснить процесс генерации сайта исполненного на подобной технологии. Дело в том, что HTML – это просто разметка страницы посредством расстановки тегов, CSS – это надстройка, позволяющая разнообразить внешний облик страницы, сюда включено все то, чего нет в HTML, или есть, но правильнее реализовать это через каскадные таблицы стилей (CSS). Когда вы создадите подобную страницу и откроете ее в веб-браузере, сам браузер сгенерирует ваш сайт. Отмечу, что ни HTML, ни CSS — не являются языками программирования!


Для реализации динамических элементов страниц или элементарной шаблонизации — потребуется PHP (как вариант), или готовая система управления контентом на базе PHP.

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

динамический или статический сайт

Вы наверняка встречали в Интернете утверждения о необходимости отделять логику от представления в программном коде. Это целая методика при проектировании и создании сайта, но суть ее в том, чтобы отображаемый в браузере сайт незаметно для пользователя генерировался управляющим скриптом (его еще называют «движок сайта»). Цель — проста: «вилки с вилками», «ложки с ложками», «ножи с ножами», «тарелки с тарелками», все это потом собирается в одно целое и мы получаем в браузере «блюдо» под названием — динамически сгенерированный сайт.

Приведу условный пример с условной последовательностью действий: дизайн сайта создается в графических редакторах, потом верстается HTML страница, в которую добавляется вызов каких-либо функций (создается шаблон для движка сайта), которые в свою очередь вынесены в отдельный файл и все это выводится в браузере — мы видим сайт! В данном примере функции могут быть стандартными, например, include() в языке PHP, или специфическими, часто уникальными для конкретного движка (CMS, фреймворк). Чтобы понять эти процессы вам не помешает немного теории программирования.

Немного из основ программирования

Предположим, что у нас есть программа написанная на определенном компилируемом языке программирования (например Си). Программный код, написанный в соответствии с синтаксисом языка, хранится в файле xxx.c, но результат работы программы мы получаем только после компиляции данного исходника и запуска получившегося в результате файла (этот файл исполняется операционной системой). Сам это процесс трансляции и компиляции – достаточно сложный и описывать его как процедуру я не буду. Но помимо компилируемых языков программирования, которые не могут показать результат работы приложения без установленного в системе компилятора (специальной программы), есть – интерпретируемые языки программирования (есть и гибридные варианты, но сейчас не об этом). Этим языкам, а вернее программам составленным на их основе, для выполнения результата требуется интерпретатор. Например программа (под этим словом можно и подразумевать пару строчек в коде сайта) составленная на языке программирования JavaScript в качестве интерпретатора использует ваш браузер! То-есть то, что хотел получить программист на выходе – исполняет сам браузер. Страница с кодом –> открываем в браузере –> получаем результат. Да, именно так, как и HTML с CSS, но в отличии от них JavaScript – это язык программирования со всеми вытекающими. JavaScript – это не компилируемый (скриптовый) язык программирования исполняемый на стороне клиента. При создании динамических сайтов часто используют язык PHP – тоже интерпретируемый и не смотря на то, что вывод результата мы получим в браузере, сама программа обрабатывается на стороне сервера.


resume professor

Теперь вы, наверное, догадываетесь почему многие программисты в своем общении на форумах в понятие дизайн включают: графику, HTML, CSS и даже JavaScript, то-есть не только графику как таковую но и верстку. Потому что все эти технологии могут функционировать только за счет браузера пользователя, который загрузил ваш сайт, и служат в основном для построения «каркаса» сайта (шаблона, дизайна, темы оформления).


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

4 КОММЕНТАРИИ

  1. Когда только начинал свою деятельность, создал статический сайт (просто на html), занимался продвижением, регился в каталогах, посетителей набрал очень мало, хотя наполнение делал по всем правилам. Затем спустя 2 года решил сделать на субдомене аналог в виде блога на WP. Наполнял статьями, гораздо удобнее подразделы и рубрики создавать, и самое интересное, что виджеты и плагины, которые предоставляются в динамических движках (на примере ВП) позволяют более удобно продвигать сайт. В итоге посетителей в день стало столько же, сколько на статике было в месяц. Ну, собственно и итог — на динамке сайт легче продвигать, раскручивать и гораздо удобнее. Хотя есть минус — хотелось бы отключить комментарии к страница (не рубрикам), а не получилось, в итоге переделал первый статический сайт в тот же статический в другом дизайне и по другим правилам, но итог остался тот же. Я за динамику.

  2. Статья, сама по себе, полезная, эдакий очень краткий очерк по данным типам сайтов, но, по-моему, пора заканчивать с рассмотрением использования статичных сайтов в реальной жизни, а упоминать о них только в прошедшем времени. Статичный сайт можно сделать локально, чтобы немного научиться работать с html и css. А дальше надо либо изучать по-серьёзному сайтостроение, где и php и javascript и всё остальное, естественно, на основе какой-либо cms, либо брать шаблоны, заточенные под ту же cms и не париться.

  3. Наконец, мне стало понятно, зачем в WordPress под полем "Добавить комментарий" присутствуют теги-кракозябры. Мне всегда казалось, что это какие-то проблемы с CMS. Оказывается они могут-таки кому-то пригодиться! Тогда на месте программистов я бы обязательно делала небольшую ссылку-комментарий ("хелп") — зачем они эти две строки символов, для чего нужны. А то ведь, я уверена, что 95% всех веб-мастеров их чикают)

  4. В зависимости от поставленных целей и назначения сайта выбирается его дизайн и собственно сама CMS (система управления содержимым). Если у вас обычный сайт минимально информирующий пользователя о услугах, товаре, контактах и т.д., вам безусловно подойдёт статический сайт, свёрстанный из нескольких страничек. Сверстать такой сайтик не представляет труда, стоит ознакомиться с начальными уроками по HTML (язык размётки документов) и CSS (таблицы стилей). Преимущества данного сайта в его мгновенной загрузке и дешевизне хостинга. Сайты с ежедневным обновлением контента, регистрацией пользователей, комментариями и всеми остальными прелестями интерактивного общения обязательно будут формироваться на основе одной из многочисленных систем управления. По-другому никак.))