26
время этот язык является основным для описания документов в Internet. HTML
является производным от универсального языка разметки SGML (Standard
Generalized Markup Language, стандартный язык разметки документов),
разработанного для обмена документами между различными платформами.
Синтаксис HTML полностью описывается с помощью SGML DTD (Document
Type Definition). Поэтому большинство программ, поддерживающих SGML,
может применяться для написания HTML-документов.
При помощи HTML фрагменты веб-страниц, представляющие собой
простой текст, помещаются внутрь тегов (угловых скобок, например: <h1
align="center">...текст для отображения...</h1>), отвечающих за разметку
страницы. Эти теги считываются браузером, но не отображаются на экране.
Вместо этого отображается текст, рисунок или анимация, оформленные в
соответствии с данным тегом и его атрибутами.
Изначально предполагалось, что текст с разметкой HTML должен
одинаково воспроизводиться на различном оборудовании (цветной монитор
компьютера, маленький экран мобильного телефона или планшета,
монохромный экран органайзера). С течением времени потребности в
мультимедийном и графическом оформлении вынудили отказаться от идеи
платформонезависимости языка HTML [20]. HTML-код должен пониматься
большинством браузеров примерно одинаково, и должны быть предусмотрены
случаи неправильного отображения или не отображения информации
некоторыми из них.
Поскольку в настоящее время в Интернет встречаются документы
различных версий HTML (HTML 4.0.1, HTML 5, XHTML 1.0, XHTML 1.1), для
"понимания" браузером, согласно какому стандарту отображать веб-страницу,
необходимо в первой строке кода задать тег <!DOCTYPE> (таблица 1).
Таблица 1 - Допустимые DTD
DOCTYPE
Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Строгий синтаксис HTML.
27
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Переходный синтаксис HTML
(допускаются непарные теги без
слеша в конце и т.п.).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Документ состоит из набора
фреймов (полей, в которые
подгружаются отдельные
страницы).
HTML 5
<!DOCTYPE html>
Для всех документов.
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">
Документ состоит из набора
фреймов.
XHTML 1.1
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Предполагается, что XHTML 1.1
постепенно вытеснит HTML.
Синтаксис XHTML подчиняется
четким правилам и не имеет
модификаций.
Тег DOCTYPE разработан в составе языка SGML для пояснения браузеру,
что документ будет отображен в соответствии с определенной спецификацией
HTML.
В настоящее время, при передаче HTML-документа на некоторое
устройство гарантируется только неизменность его логической структуры, но
не отображения на экране. Это связано с тем, что заранее неизвестны
возможности устройства, принимающего документ. Оно может "не уметь"
отображать графику или цвет, либо "не понимать" некоторых тегов. В таких
случаях теги просто игнорируются устройством. В связи с этим, на
современного веб-дизайнера возлагается особая ответственность за
отображение информации на создаваемых им страницах [11].
Каскадные таблицы стилей (CSS, Cascading Style Sheets) – это
формальный язык описания внешнего вида HTML-документа, который
28
используется веб-дизайнерами для задания внешнего вида элементов,
расположения отдельных блоков, задания фона и т.п. на веб-страницах [16].
CSS разрабатывались с целью отделить логическую структуру веб-
документа от тонкостей оформления его отдельных элементов. В результате
такого разделения код HTML становится проще и понятнее, а внешний вид
документа можно быстро изменить, подключив к странице соответствующие
наборы стилей, хранящиеся в отдельных файлах. Опять же, для изменения
внешнего вида при таком подходе нет необходимости менять код HTML, а
достаточно поработать со стилями, хранящимися отдельно. Это избавляет от
возможных ошибок в логической структуре документа в результате правки,
которые могут привести к неверному отображению веб-страницы, либо вообще
к ее не отображению. В настоящее время принято разрабатывать несколько
наборов стилей для различных способов вывода одного документа: на экран, на
принтер или, например, на устройства, воспроизводящие шрифт Брайля [31].
Также механизм CSS позволяет устройствам вывода определять, какие стили
должны применяться в зависимости от размеров, разрешения и глубины
цветности экрана.
Идея языка сценариев JavaScript заключается в том, что операции в
программе на JavaScript выполняются над заранее разработанными и
задокументированными объектами, такими как элементы рабочей области
браузера и контейнеры языка HTML. Язык содержит классы с набором свойств
и методов для работы с объектами этих классов. Кроме методов существуют и
другие функции, которые позволяют работать со стандартными
математическими типами или управлять процессом выполнения программы.
В JavaScript есть возможность обрабатывать события, которые
отслеживает браузер, такие как щелчок мыши, нажатие кнопки, изменение
состояния загрузки страницы, смена значений в элементах формы, получение и
потеря фокуса и т.п. Существует также возможность управлять многооконным
интерфейсом. Все типы данных и операторов, которые поддерживаются
29
обычными языками программирования, реализованы в JavaScript, что облегчает
его изучение и понимание [21].
JavaScript поддерживает работу с объектной моделью документа
(Document Object Model, DOM), что позволяет динамически создавать, удалять,
перемещать и менять практически любой элемент страницы. Поддерживается
также связь с объектом класса XMLHttpRequest для получения данных с
сервера без перезагрузки страницы (в результате асинхронных запросов,
технология Ajax).
Язык JavaScript отличает от других языков программирования,
используемых в веб-разработке то, что он не является собственностью какой-
либо организации [6].
Стоит заметить, что кроме JavaScript существует еще несколько языков
для написания веб-сценариев. Например, компанией Microsoft был разработан
аналогичный язык - VBScript, основанный на Visual Basic. Но этот язык не
завоевал большой популярности, т.к. изначально поддерживался только в
браузере Internet Explorer фирмы Microsoft, и к тому же, его конструкции
несколько более громоздки по сравнению с JavaScript.
Сначала JavaScript применялся лишь для придания веб-страницам
интерактивности, т.е. реакции на действия пользователя, но багодаря
возможности хранить код этого языка отдельно от HTML документов, в
отдельных текстовых файлах, и подключать их к веб-страницам по мере
необходимости, стали появляться библиотеки, значительно облегчающие веб-
разработку на JavaScript. JS-библиотеки включают в себя большинство часто
используемых, рутинных функций и методов языка, благодаря чему
разработчику нет необходимости писать их заново, а достаточно
воспользоваться короткими командами вызова этих функций. Эти библиотеки
легли в основу многих программных платформ для веб-разработки, называемых
фреймворками.
Наиболее распространенные библиотеки, которые сохраняют свою
актуальность и развиваются и по сей день: jQuery (https://jquery.com), Knockout
30
(http://knockoutjs.com), Prototype JS (http://prototypejs.org), MooTools
(http://mootools.net).
Наиболее часто из них применяется jQuery, т.к. она покрывает все
основные потребности среднестатистического веб-проекта и на сегодняшний
день включена в базовый набор инструментов некоторых фреймворков для веб-
разработки. Фреймворки отвечают за «клиентскую» часть веб-разработки.
Скорость работы веб-проекта, основанного на фреймворке, существенно
увеличивается, т.к. все необходимые JS-библиотеки загружаются при первом
посещении главной страницы сайта, а далее веб-серверу для работы только
передаются данные, обычно в специальном сжатом формате JSON [44].
В качестве ярких представителей таких фреймворков можно выделить:
- Angular 2 (https://angularjs.org);
- Bootstrap 3 (http://getbootstrap.com);
- Ember (http://emberjs.com);
- Express (http://expressjs.com).
Каждый фреймворк следует собственной идеологии в определенных
областях разработки и отличается от других по стилю разработки.
1.2.2.2. Серверный инструментарий
Работа серверных приложений не видна для конечного пользователя. Он
видит лишь результаты этой работы, полученные браузером в виде HTML-
документа и отображенные на экране монитора.
Серверы делятся на front-end и back-end. К серверам типа front-end можно
отнести http-сервер (Nginx, Apache, IIS и т.п.), который получает данные
непосредственно от браузера пользователя и решает, какому back-end серверу
их отправить для обработки, после чего полученные от back-end результаты
преобразует в приемлемую для браузера форму и отправляет в запросивший их
браузер. Это общее описание всего процесса, и все перечисленные выше этапы
следует разбить на несколько промежуточных, каждый из которых
сопровождается различными настройками, конфигурациями и т.п. [3]
К back-end серверам можно отнести серверы СУБД, почты,
интерпретаторы и трансляторы языка сценариев, и т.п.
31
Работа типичного веб-проекта показана на рисунке 2.
Рисунок 2 – Общая схема работы веб-проекта
Следует отметить, что помимо настроек веб-серверов для запуска веб-
проекта необходимо организовать его бизнес-логику, для чего требуется знание
одного из языков программирования на стороне сервера. На данный момент
существует множество таких языков, например Perl, PHP, Python, ASP.NET и
др.
Одним из наиболее популярных языков для разработки динамических
веб-сайтов на стороне сервера является PHP (http://php.net). Он был разработан
в 1995 году Расмусом Лердорфом. Этот язык используется в самых разных
проектах: от простого блога до сложнейших веб-приложений. На PHP работают
такие сайты, как NASA, Yahoo, Google и Facebook.
Коды на этом языке легко встраиваются в HTML при помощи
специальных тегов "<?php" и "?>". При считывании такого кода
интерпретатором, всё за пределами этих тегов остается неизменным, тогда как
изнутри передается результат обработки кода PHP, а не сам код [18].
Для оптимизации передачи данных и снижения нагрузки на сервер при
помощи PHP можно организовывать кеш динамического содержания,
расположенный на стороне сервера [24].
32
В наше время ни один серьезный сайт не строится без системы
управления содержимым (Content Management System или CMS). Современные
интерактивные развивающиеся сайты состоят из двух частей: пользовательской
(front-end) и администраторской (back-end). Причем, front-end такого сайта
является лишь верхушкой айсберга. Вся работа по настройке внешнего вида,
созданию страниц, рубрикации, оптимизации для поисковых систем, контролю
доступа к содержимому, управлению веб-приложениями и т.п. выполняется в
back-end. Написание подобного сайта "с нуля" предполагает огромные затраты
труда и времени на создание именно полноценного back-end. Такие жертвы
требуются только в случае необходимости максимальной защиты информации
на сайте. Если же сайт не содержит сверхсекретной информации, и вовремя
создаются его резервные копии, гораздо более приемлемым способом является
разработка только некоторой части front-end в среде уже предустановленной
CMS.
Как правило, структура CMS устроена так, что разработчику front-end нет
необходимости менять код ядра системы или веб-приложений, не теряя при
этом гибкости оформления внешнего вида и интерактивности страниц. Вполне
достаточно бывает создать свой шаблон представления страницы и подключить
его к CMS, или доработать какой-либо шаблон из уже имеющихся в системе,
что многократно сокращает время разработки и снижает требования к
квалификации разработчика как программиста.
В основе большинства CMS заложен принцип MVC (Model-View-
Controller или "Модель-Вид-Контроллер") [27] - когда модель приложения
(Model), механизм взаимодействия с системой (Controller) и веб-интерфейс
пользователя (View) разделены на три отдельных компонента так, чтобы
разработка каждого из этих компонентов минимально влияла на
функциональность остальных. Компонент Controller при этом является
посредником между моделью приложения и пользователем (рисунок 3). Такая
идеология проектирования послужила отправной точкой для разработки
33
архитектурного каркаса многих CMS, служащих для облегчения перехода от
теории к реализации в конкретной предметной области. [30]
Рисунок 3 – Общая схема работы MVC-идеологии
1.3. Основные виды коммерческих веб-сайтов
Любой коммерческий проект предполагает заработок денег в обмен на
поставку предлагаемых товаров или услуг. На просторах Интернет существует
множество коммерческих сайтов, которые можно разделить на:
- визитные карточки компаний и рекламные сайты;
- интернет-магазины;
- электронные торговые площадки;
- социальные сети [14];
- игровые порталы;
- поисковые системы и т.п., платно размещающие объявления.
Многие сайты являют собой некоторые комбинации перечисленных
вариантов. Рассмотрим подробнее наиболее распространенные виды
коммерческих веб-сайтов.
1.3.1. Визитные карточки и рекламные сайты
Сайты – визитные карточки являют собой наиболее простые решения для
публичного предоставления контактной информации и краткого описания
деятельности фирмы, разместившей такой сайт. Визитные карточки
размещаются чаще всего индивидуальными предпринимателями и фирмами, не
34
нуждающимися в рекламе. Создать сайт – визитку не составляет труда даже
простому пользователю, т.к. на сегодняшний день очень многие провайдеры
интернет-хостинга предлагают на своих площадках конструкторы сайтов,
работа с которыми основывается на принципе WYSIWYG (от англ. What You
See Is What You Get) - когда разработчик сразу видит, как будет выглядеть веб-
страница и может помещать на страницу объекты нажатием кнопок или
перетаскиванием пиктограмм, не прибегая к написанию кода.
Рекламные сайты несколько сложнее сайтов-визиток, т.к. используют
более сложный веб-дизайн и маркетинговые ходы для привлечения внимания
посетителей. Эти сайты, в самых простых случаях, могут также создаваться при
помощи конструкторов сайтов, но нередко вместо этого используют разработку
статических уникально оформленных веб-страниц, содержащих красивую
графику, анимацию, слоганы и т.п. для привлечения внимания.
В случаях обоих видов описанных выше сайтов оплата за услуги
напрямую не предусматривается. Предоставляется только контактная
информация для последующего взаимодействия с поставщиком товаров (услуг)
с целью заключения договора, в котором прописываются порядок и условия
оплаты.
В остальных случаях возможны варианты оплаты посредством систем
безналичных расчетов, либо выставление денег на специально заведенный счет,
с которого они будут сняты автоматически после предоставления услуги, либо
отправка товара почтой с оплатой наложенным платежом по факту получения.
Существует и множество других вариантов.
1.3.2. Интернет-магазины
Спрос на товары на рынках ЭК и развивающиеся веб-технологии дали
повод и возможности для реализации веб-проектов специфического типа,
называемых интернет-магазинами (ИМ). Благодаря многообразию товаров и
услуг, специфике их реализации и многим другим факторам появилось
множество ИМ различных типов.
35
Каждый тип ИМ имеет свои особенности и предназначен для выполнения
задач, присущих этому типу. Поэтому для описания понятия "интернет-
магазин" необходима некоторая классификация этого субъекта ЭК. В
экономической, технической и юридической литературе не существует на
сегодняшний день единой классификации этого явления. В связи с этим, в
настоящей работе предлагается классификация, разработанная автором в
процессе ознакомления с различными литературными источниками (таблица 2).
Таблица 2 - Классификация интернет-магазинов
1. По типу платформы
1.1. Веб-конструктор
Для разработки предоставляется инструментарий хостинг-провайдера,
не требующий знания HTML и языков программирования. Очень
ограничены возможности по функционалу и дизайну. Применяется, в
основном, для создания небольших интернет-витрин (см. п. 4.1.).
1.2. Бесплатные CMS
В настоящее время в Интернет существует множество бесплатных
CMS и появляются новые. Многие из них, такие как Joomla! и
Wordpress, уже много лет пользуются спросом у разработчиков
мелких веб-сайтов. Сторонними разработчиками для таких CMS
написана масса плагинов и компонент, в том числе уже готовые
интернет-магазины, установка которых не требует больших затрат
времени и труда. Недостатки таких CMS заключаются в низкой
производительности и уязвимости кода, но для небольших сайтов, не
требующих конфиденциальности, они являются оптимальным
решением.
1.3. Платные CMS
Более оптимизированы для работы загруженных сайтов, более
защищены от атак и взломов, имеют более гибкие настройки, что в
совокупности способствует реализации сравнительно крупных веб-
проектов. Недостатки: потребность в окупаемости и типичность кода,
позволяющая хакерам изучать уязвимости.
1.4. Индивидуальная
разработка
Наиболее надежный и гибкий способ реализации веб-проекта.
Недостатки: высокая стоимость, большие затраты труда и времени для
разработки. Наиболее быстро и дешево можно изготавливать только
интернет-витрины (см. п. 4.1.). Преимущества: оптимальная
функциональность для конкретного проекта, максимальная
защищенность от атак и взломов, высокая производительность.
2. По ассортименту
2.1. Специализированные
Предлагающие один товар или товары одного типа.
2.2. Супермаркеты
Предлагающие очень широкий ассортимент товаров, что способствует
привлечению максимального числа посетителей.
3. По типу продаж
3.1. Оптовые
Продающие товары партиями, но не штучно. Цена за единицу товара,
как правило, ниже розничной цены.
3.2. Розничные
Товары продаются поштучно, как в обычных магазинах.
3.1. Смешанные
Как правило, мелкий опт и розничная продажа.