12
Комбинированные Веб сервисы (Специализированные социальные
сети) — например, MySpace.[23]
По природе содержимого:
Статические — сайт изначально наполнен содержимым(контентом).
Посетитель сайта видит файлы в том виде, в котором они были загружены на
сервер.
Динамические — наполнение сайта генерируют специальные
скрипты (программы) на основе других данных из различных
источников.[22]
1.2. Технологии разработки веб-сайтов
1.2.1. Статические сайты и динамические сайты
Технологии HTML и CSS считаются базовыми и основными при
создании веб-страниц. С их использованием можно создавать достаточно
красивые и несложные информационные сайты, но страницы этих сайтов
будут статичными. Вероятнее всего, пользователям таких сайтов будет не
хватать интерактивности, а сами сайты могут покажутся скучными, несмотря
на возможность присутствия Flash-заставок, роликов, анимации и т. п. Также
стоит отметить, что и функциональная составляющая таких сайтов довольно
низкая.
Основой статического веб-сайта являются статические веб-страницы,
созданные с помощью стандартной HTML-технологии, которые хранятся в
виде HTML-кода в файловой системе сервера.
Основной отличительной особенностью статического сайта является
то, что web-страницы сайта создаются заранее. Чтобы изменить информацию
и сделать какие-либо обновления такого сайта страницы нужно
модифицировать вручную, с использованием HTML-редактора, и затем
перезагружать их на сайт (Рисунок 1).
Такие сайты подходят в том случае, если содержимое сайта не
13
требуется регулярно изменять. В противном случае неизбежны серьёзные
трудозатраты на администрирование статического сайта.
Рисунок 1 - Статический сайт
Несмотря на то, что затраты на разработку и техническую поддержку
статического сайта дешевле, значительно страдает оперативность
публикации новой информации и трудоемкость внесения изменений. [32]
Динамический сайт – это сайт с динамическим информационным
содержанием. Динамические страницы аналогично статическим
формируются с использованием HTML, но эти страницы обновляются
регулярно, зачастую при каждом новом обращении. Основой динамический
сайтов являются статические данные и HTML-разметка, и дополнительно
содержится программная часть – это скрипты, благодаря которым страница
«собирается» из отдельных фрагментов в режиме реального времени. Это
позволяет сделать сайт гибким в подборе и отображении информации,
соответствующей запросам пользователя сайта.[34]
Итак, динамический сайт включается в себя некоторое количество
«строительных блоков» динамических страниц – шаблонов дизайна,
контента, хранящихся в виде отдельных файлов скриптов. Динамическая
web-страница формируется из страницы-шаблона и отдельно
расположенного информационного содержимого по запросу (Рисунок 2).
Обычно для отображения однотипных страниц используется один шаблон, в
который подгружается содержимое, отображаемое в обозревателе посетителя
сайта.
14
Рисунок 2 - Динамический сайт (генерация страниц на стороне
сервера)
Динамичность состоит в том, что для изменения страницы нужно
изменить только ее информационное содержание, а механизм формирования
и отображения страницы остается неизменным.
Помимо информационного наполнения, динамически могут быть
созданы элементы навигации по web-сайту. Во время обновления
содержимого сайта, нужно только добавить текстовое содержание новой
страницы, которое в свою очередь вставляется в базу данных с
использованием определенного механизма. В итоге получается, что web-сайт
как будто бы сам себя обновляет.
Динамические сайты отличаются в зависимости от применяемых для
их создания технологий. Процесс получения динамических страниц также
может различаться:
1. Генерация на стороне сервера (осуществляется серверными
скриптами на языках Perl, PHP, ASP.NET, Java, Python и др., а
информационное наполнение хранится в базах данных).Выполняются и
обрабатываются они на сервере, после чего возвращают клиенту HTML - код,
используя клиентские технологии.
2. Генерация на стороне клиента (CSS , HTML/XML, JavaScript/AJAX,
Java/JavaFX, Silverlight, Flex/Flash, ActiveX, VBScript, DHTML и т.д).
3. Комбинированная генерация (чаще всего на практике встречается
именно комбинация первых двух методов).[2]
Программы, разработанные с использованием клиентских языков,
15
обрабатываются на стороне пользователя с помощью браузера. Существует
достаточно большое количество браузеров, работающие на различных
платформах. Из-за этого выполнения программы может быть неоднозначной.
Основной проблемой браузеров является то, что один и тот же скрипт может
отображаться по-разному в различных браузерах или даже версиях браузера.
Из-за того, что клиентские программы выполняются на стороне клиента, они
значительно снижают нагрузку на сервер, так как не всегда обращаются к
нему.
Недостатком клиентских технологий является то, что с их
использованием невозможно обратиться к базам данных или сформировать
другой html-код. Они дают возможность создать удобный и привлекательный
сайт.
С использованием серверных технологий можно создать web-страницы
и отобразить их пользователю. При этом работа серверных технологий для
пользователя не заметна. [18]
1.2.2. Технологии серверного программирования
Итак, сначала отметим, что серверные технологии выполняются на
стороне сервера. Их работа заключается в следующем: пользователь
посылает с помощью своего браузера на сервер запрос, а в свою очередь
сервер обрабатывает его с использованием специальной программы,
называемой скриптом. Запрос пользователя, после обработки на сервере
отсылает полученные данные пользователю.
Благодаря серверным технологиям можно создать форумы, опросы,
блоги, поисковые системы, почтовые службы. Без применения серверных
технологий не обходится ни один динамический сайт.
Невозможно обойтись без серверного программирования и в том
случае, если есть необходимость менять и сохранять какую-либо
информацию на сервере. Без использования серверных скриптов невозможно
создать гостевые книги, чаты, форумы, опросы, счетчики посещений,
голосования или другие компоненты, которые активно взаимодействуют с
16
базами данных.
Серверное программирование даёт возможность решить такие задачи,
как регистрация и авторизация пользователей, управление аккаунтом
(например, почтовых web-системах, соц. сетях и др.), поиск информации по
базе данных, функционирование интернет-магазина и т. п.[30]
Большие функциональные возможности перед программистом
открывают серверные языки программирования. Нас сегодняшний день
очень часто сайты представляют собой довольно сложные программно-
информационные системы, которые решают значительное количество
разного рода задач, и в теории способны дублировать функции
подавляющего большинства бизнес-приложений.
Работа серверных скриптов зависима от платформы, то есть от
технологий, поддерживающихся сервером, на котором находится сайт. К
примеру, основной технологией, поддерживаемой компанией Microsoft
является ASP.NET (ASP), другие серверы могут поддерживать языки Python,
PERL, PHP.
Perl – это интерпретируемый динамический язык программирования
высокого уровня общего назначения. Он является одним из наиболее старых
языков, применяемых для написания серверных скриптов.
Во многих отношениях Perl – простой язык. Не требуется особых
навыков, чтобы скомпилировать программу на Perl - её можно выполнить как
пакетный файл или сценарий оболочки. Типы и структуры Perlпросты в
понимании и использовании. [17] Perl не налагает ограничения на данные –
массивы и строки могут быть сколь угодно велики, лишь бы хватило
оперативной памяти, и их организация позволяет им легко увеличиваться по
мере надобности. Perlне требует изучения новых синтаксиса и семантики, в
значительной мере заимствуя их из других языков, с которыми вы можете
быть знакомы (например, С, awk,BASIC, Python, английский и греческий). На
практике почти любой программист сможет прочесть хорошо написанный
код на Perlи составить себе представление о том, что он делает.[26] По
17
популярности Perl очень уступает более лёгкому языку - PHP. В настоящее
время используются бесплатные технологии EmbPerl и mod_perl,
позволяющие обрабатывать html-страницы со вставленными скриптами на
языке Perl. Обработчик реализуется как CGI-программа или модуль
расширения сервера (Apache, MS IIS).
PHP – это широко используемый язык сценариев общего назначения с
открытым исходным кодом.
Говоря проще, PHP это язык программирования, специально
разработанный для написания web-приложений (сценариев), исполняющихся
на Web-сервере. [10]
Аббревиатура PHP означает “HypertextPreprocessor (Препроцессор
Гипертекста)". Синтаксис языка берет начало из C, Java и Perl. PHP
достаточно прост для изучения. Преимуществом PHP является
предоставление web-разработчикам возможности быстрого создания
динамически генерируемых web-страниц [27].
Использование PHP существенно упрощает встраивание средств,
придающих веб-страницам динамические свойства. Когда страницам
присваивается расширение PHP, у них появляется прямой доступ к языку
сценариев. C использованием PHP становится доступным средство
управления своим веб-сервером с неограниченными возможностями. Если
понадобится на лету внести изменения в HTML, обработать данные
кредитной карты, добавить сведения о пользователе в базу данных или
извлечь информацию из стороннего сайта, все это можно будет сделать из
тех же самых PHP-файлов, в которых находится и сам код HTML. [4]
1.2.3. Технологии клиентского программирования
HTML (HyperTextMarkupLanguage — «язык гипертекстовой разметки»)
— стандартный язык разметки документов во Всемирной паутине. С
помощью этого языка создаются все web-страницы.
Cоздать web-страницу на языке HTML можно в простом блокноте или
программе MicrosoftWord. Текстовые редакторы удобно использовать только
18
тем, кто хорошо владеет языком HTML. Разработать сайт можно без особых
знаний HTML, так как тексты HTML можно создавать посредством
различных специально предназначенных редакторов и конвертеров.
Все коды в языке HTML заключаются в теги, или команды, которые
заключены в скобки вида: “< “ и “>”. С помощью HTML-тегов можно
отформатировать документы для их представления с использованием линий,
шрифтов, цветов и прочих графических элементов.
Теги могут быть открывающими, закрывающими и одинарными.
Элементы, заключённые в теги, могут иметь большое количество атрибутов.
Атрибуты служат для определения свойства элементов, записываются после
открывающегося тега и состоят из имени и значения. Нечисловые значения
необходимо записывать в кавычки.
CSS (каскадные таблицы стилей) — формальный язык, который
используется для описания внешнего вида документа. Он определяет
свойства элементов и указывает, как элементы будут отображаться в
браузере.
Есть несколько стандартов CSS. CSS-1 – первый стандарт таблиц
стилей. В этом стандарте допускается использование css-селекторов,
осуществляющих выбор элемента или группы элементов, для назначения
какого-то определённого стиля; осуществляющих создание блоков для
работы с параметрами шрифтов, отступов, рамок и полей; выполняющих
позиционирование блоков; позволяющих управлять стилями и фоном текста,
а также создавать маркированные и нумерованные списки. [19]
CSS-2 - это второй стандарт. Этот стандарт каскадных таблиц стилей
основан на CSS-1, и дополняет его рядом свойств. Добавлена возможность
выбора элемента, к которому должен быть применён стиль, а точнее,
появилась возможность добавить оформление элементу, к потомкам
элемента, а также к нескольким элементам, относящихся к одной группе.
Появилась возможность скачивать новые шрифты с сервера, это
способствовало значительному расширению возможности работы со
19
шрифтами. Это позволило сократить количество графических элементов на
странице, надписей, написанных нестандартными шрифтами. Чтобы
оформить надпись в виде текста, нужно просто скачать необходимый шрифт.
Одним из новшеств CSS-2 является изменение внешнего вида курсора.
Стало возможным использовать собственные графические элементы в виде
курсора вместо стандартного вида курсора. [18]
Стандарт CSS-3 значительно расширяет возможности прошлых
стандартов. Стала возможна модуляризация–возможность разделять таблицы
стилей на модули. Для применения появилось большое количество функций:
создание градиента, теней, анимации, визуальных эффектов, скругление
углов. [3]
Чтобы сделать web-страницу более «живой», добавить динамические
эффекты, задать реакции на действия пользователя, можно воспользоваться
скриптовым языком программирования JavaScript. JavaScript –объектно-
ориентированный язык, который используется для обработки ввода и
просмотра информации на web-страницах. Скрипты внедряют в web-
страницу или связывают с ней, и после загрузки страницы с сервера
выполняются браузером на стороне клиента. С помощью языка JavaScript
можно создавать интерактивные web-страницы. Этот язык позволяет
управлять окнами браузера, стилями CSS и элементами HTML-документов.
JavaScript поддерживается всеми современными браузерами. [6]
JavaScript зачастую используется в клиентской части web-приложений.
Веб-приложение – это интернет-приложение с архитектурой «клиент-
сервер». Клиентом служит браузер, сервером — веб-сервер. Связь
происходит посредством сети. По сути, веб-приложение — это любой сайт с
элементами интерактива. Это значит, что посетитель может
взаимодействовать с материалом, функциями: нажимать кнопки, заполнять
формы, запрашивать прайс, совершать покупки. Практически любой
интернет-ресурс входит в их число. Это поисковые системы, видео сервисы
типа youtube, соцсети, любые веб-сайты с функциями аутентификации
20
пользователя, покупки, заказа, бронирования, калькуляторы кредитов. В
современной действительности практически любой сайт можно отнести к
веб-приложению, т.к. практически во всех из них присутствуют элементы
интерактива.
Так как передача информации в web-приложениях осуществляется по
сети, клиент не зависит от определённой операционной системы
пользователя. При разработке веб-приложений нет необходимости писать
отдельные версии для Windows, Linux, Mac OS и других операционных
систем, вследствие чего web-приложения становятся кроссплатформенными
сервисами. Для запуска веб-приложения пользователю не нужно
устанавливать никаких дополнительных программ, оно запускается на любом
устройстве с браузером и с доступом в интернет.
Основные компоненты клиентской части проектирования web-
приложений:
браузер (обозреватель) – инструмент просмотра web-страниц;
язык разработки web-страниц (HTML/XHTML и CSS);
языки сценариев (JavaScript);
клиентские расширения, такие как элементы управления ActiveX,
Java апплеты, подключаемые модули (plugin, плагины), такие как
плееры Macromedia Flash или Silverlightит. д.;
технология Ajax.
Ajax— подход к построению интерактивных пользовательских
интерфейсов веб-приложений, заключающийся в «фоновом» обмене
данными браузера с веб-сервером. В результате, при обновлении данных веб-
страница не перезагружается полностью, и веб-приложения становятся
быстрее и удобнее. [14]
Выводы. В первой главе были рассмотрены основные понятия и
термины связанный с веб-сайтами и веб-приложениями. В частности, в
главер описано, что веб-сайт – это информационный ресурс, который состоит
21
из связанных друг с другом гипертекстовых документов (веб-страниц). Он
размещен на веб-сервере и имеет индивидуальный адрес. Просмотреть веб-
сайт имеет возможность любой человек, имеющий компьютер и доступ в
Internet. Так же для просмотра веб-сайта используются специальные
программы – веб-браузеры.
Была проведена классификация по ряду критериев: по доступности
сервисов, по природе содержимого, по типу макета, по физическому
расположению. Помимо этого, были рассмотрены динамические и
статические сайты, а так же описаны различия между ними.
В главе рассмотрены технологии создания сайтов: клиентские и
серверные. Проведён обзор наиболее исползуемых языков
программирования и разработки сайтов, таких как HTML, CSS, JavaScript,
PHP, Perl.