1.4. Веб-программирование
Любой динамический сайт состоит из двух компонентов — база данных и «движок» — набор скриптов, который в зависимости от действий и запросов пользователя ищет в базе данных нужную информацию и отображает ее на экране.
База данных хранится на сервере баз данных. Для работы с ней используется система управления базой данных. Чаще всего используется бесплатная СУБД MySQL, хотя возможно использование и других серверных продуктов — Microsoft SQL Server, Oracle и т.д.
1.4.1. Система управления базами данных MySQL
MySQL — это система управления базами данных. База данных представляет собой структурированную совокупность данных. Эти данные могут быть любыми — от простого списка предстоящих покупок до перечня экспонатов картинной галереи или огромного количества информации в корпоративной сети. Для записи, выборки и обработки данных, хранящихся в компьютерной базе данных, необходима система управления базой данных, каковой и является ПО MySQL. Поскольку компьютеры замечательно справляются с обработкой больших объемов данных, управление базами данных играет центральную роль в вычислениях. Реализовано такое управление может быть по-разному — как в виде отдельных утилит, так и в виде кода, входящего в состав других приложений.
MySQL — это система управления реляционными базами данных. В реляционной базе данных данные хранятся не все скопом, а в отдельных таблицах, благодаря чему достигается выигрыш в скорости и гибкости. Таблицы связываются между собой при помощи отношений, благодаря чему обеспечивается возможность объединять при выполнении запроса данные из нескольких таблиц. SQL как часть системы MySQL можно охарактеризовать как язык структурированных запросов плюс наиболее распространенный стандартный язык, используемый для доступа к базам данных.
Программное обеспечение MySQL — это ПО с открытым кодом. ПО с открытым кодом означает, что применять и модифицировать его может любой желающий. Такое ПО можно получать по Internet и использовать бесплатно. При этом каждый пользователь может изучить исходный код и изменить его в соответствии со своими потребностями. Использование программного обеспечения MySQL регламентируется лицензией GPL (GNU General Public License), http://www.gnu.org/licenses/, в которой указано, что можно и чего нельзя делать с этим программным обеспечением в различных ситуациях. Если работа в рамках GPL вас не устраивает или планируется встраивание MySQL-кода в коммерческое приложение, есть возможность купить коммерческую лицензированную версию у компании MySQL AB. [18]
Базой данных MySQL можно управлять через командную строку, а также при помощи графических оболочек. Для управления базой данных веб-сайта чаще всего используется утилита PhpMyAdmin, которая включена в набор базового программного обеспечения виртуального хостинга (рис. 1). Он позволяет управлять базой данных, используя браузер.
Рис. 1. Скриншот PhpMyAdmin
При помощи PhpMyAdmin можно создавать и удалять базы данных, таблицы, вносить в них информацию. Также есть возможность формировать вручную запросы на языке SQL и делать выборку данных по заданным критериям.
Создание базы данных — первый этап разработки веб-сайта. После того как база данных создана, нужно позаботиться о «движке» сайта — именно он будет играть роль транслятора действий пользователя в запросы к базе данных и обработчика ее ответов.
«Движок» сайта включает в себя две разновидности скриптов, различающиеся по способу выполнения:
- Скрипты, выполняющиеся на стороне сервера (серверные скрипты)
- Скрипты, выполняющиеся на стороне клиента (клиентские скрипты)
Серверные скрипты создаются на языках Java, PHP, Perl, ASP.NET, Ruby и других. Наиболее часто используется язык PHP. Клиентские скрипты в подавляющем большинстве случаев пишутся на языке Javascript. [11]
1.4.2. Язык программирования PHP
PHP (рекурсивный акроним словосочетания PHP: Hypertext Preprocessor) — это распространённый язык программирования общего назначения с открытым исходным кодом. PHP сконструирован специально для ведения Web-разработок и его код может внедряться непосредственно в HTML.
Вместо рутинного вывода HTML-кода командами языка (как это происходит, например, в Perl или C), скрипт PHP содержит HTML с вкраплениями кода. Код PHP отделяется специальными начальным и конечным тегами <?php и ?>, которые позволяют «переключаться» в «PHP-режим» и выходить из него.
PHP-скрипты выполняются на сервере и генерируют HTML-код, который посылается клиенту. PHP прост для освоения, но вместе с тем способен удовлетворить запросы профессиональных программистов. [19]
В сети Интернет имеется большое количество справочных материалов по языку программирования PHP.
Для создания скриптов на PHP можно использовать любой текстовый редактор, в том числе «Блокнот». Сложность состоит в том, что скрипты PHP не могут выполняться на компьютере разработчика, если на нем не установлено программное обеспечение, эмулирующее веб-сервер с поддержкой PHP. [20]
1.4.3. Язык программирования JavaScript
JavaScript изначально создавался для того, чтобы сделать web-странички «живыми». Программы на этом языке называются скриптами. В браузере они подключаются напрямую к HTML и, как только загружается страничка — тут же выполняются.
Программы на JavaScript — обычный текст. Они не требуют какой-то специальной подготовки. В этом плане JavaScript сильно отличается от другого языка, который называется Java.
Во все основные браузеры встроен интерпретатор JavaScript, именно поэтому они могут выполнять скрипты на странице. Но, разумеется, JavaScript можно использовать не только в браузере. Это полноценный язык, программы на котором можно запускать и на сервере, и даже в стиральной машинке, если в ней установлен соответствующий интерпретатор. [13]
Большинство возможностей JavaScript в браузере ограничено текущим окном и страницей.
JavaScript не может читать/записывать произвольные файлы на жесткий диск, копировать их или вызывать программы. Он не имеет прямого доступа к операционной системе. Современные браузеры могут работать с файлами, но эта возможность ограничена специально выделенной директорией — «песочницей». Возможности по доступу к устройствам также прорабатываются в современных стандартах и частично доступны в некоторых браузерах.
JavaScript, работающий в одной вкладке, не может общаться с другими вкладками и окнами, за исключением случая, когда он сам открыл это окно или несколько вкладок из одного источника (одинаковый домен, порт, протокол). Есть способы это обойти, и они раскрыты в учебнике, но они требуют специального кода на оба документа, которые находятся в разных вкладках или окнах. Без него, из соображений безопасности, залезть из одной вкладки в другую при помощи JavaScript нельзя.
Из JavaScript можно легко посылать запросы на сервер, с которого пришла страница. Запрос на другой домен тоже возможен, но менее удобен, т.к. и здесь есть ограничения безопасности.
1.5. Системы управления содержимым
Система управления содержимым (контентом) (англ. Content management system, CMS) — информационная система или компьютерная программа, используемая для обеспечения и организации совместного процесса создания, редактирования и управления контентом (то есть содержимым). [11]
Основные функции CMS
- Предоставление инструментов для создания содержимого, организация совместной работы над содержимым,
- Управление содержимым: хранение, контроль версий, соблюдение режима доступа, управление потоком документов и т. п.,
- Публикация содержимого,
- Представление информации в виде, удобном для навигации, поиска.
В системе управления содержимым могут находиться самые различные данные: документы, фильмы, фотографии, номера телефонов, научные данные и так далее. Такая система часто используется для хранения, управления, пересмотра и публикации документации. Контроль версий является одним из основных её преимуществ, когда содержимое изменяется группой лиц [1].
В отличие от создания сайта вручную на PHP, использование CMS может значительно ускорить и удешевить процесс разработки веб-сайта, поэтому данный способ создания веб-сайтов имеет огромную популярность.
Также большим достоинством CMS является простота в использовании — для создания сайта не обязательно иметь навыки программирования и верстки HTML-страниц, достаточно ознакомиться с документацией к CMS, которой в Интернете очень много как текстовом виде так и в форме обучающих видеоуроков.
Недостатком CMS можно назвать то, что возможности технического расширения сайта ограничены лишь существующими модулями и расширениями, которые не всегда бесплатные. Для решения некоторых специфических задач исходный код CMS должен быть серьезно модифицирован, что предъявляет повышенные требования к навыкам веб-программирования. Известно, что свой писать гораздо проще, чем разбираться в чужом.
В настоящее время существует огромное количество CMS как бесплатных (распространяемых по лицензии GNU), так и коммерческих.
Логично предположить, что бесплатные CMS с открытым кодом получили большее распространение в сети Интернет. Они имеют большое количество доступных шаблонов оформления, плагинов и модулей расширения. Любой программист может создать свой модуль расширения и распространять его совершенно официально. Однако, в этом кроется основной недостаток бесплатных CMS — никто не может поручиться за квалификацию автора того или иного программного компонента. Теоретически возможна ситуация, что установка «безобидного» модуля может вывести сайт из строя. При этом разработчик не несет никакой ответственности.
Коммерческие CMS имеют определенную фирму-производителя, которая делает сам движок и все расширения к нему. Это дает некоторую гарантию того, что программный код написан грамотно и установка нового компонента не вызовет краха системы. Если же это произойдет, есть служба технической поддержки, которая восстановит сайт (разумеется, в том случае, если CMS приобретена официально и не истек срок действия лицензии).
Коммерческие CMS, как правило, имеют бесплатную «облегченную» версию, в которой присутствуют функциональные ограничения. Это удобно для небольших проектов — когда фирма небольшая и ее запросы к сайту невелики, вполне можно использовать надежную CMS от проверенного производителя. В случае роста запросов к функциональности сайта можно приобрести расширенную платную версию продукта.
Как уже было сказано выше, создание сайта при помощи CMS — занятие несложное. Имея определенный навык можно создать полноценный сайт за 1 рабочий день. Сравнительный анализ и выбор программного обеспечения для создания сайта, а также процесс его создания будет подробно описан во второй главе. Сейчас остановимся на еще одном важном вопросе, который должен быть решен разработчиком веб-сайта — удобство его в использовании, или юзабилити.
1.6. Юзабилити
Международный стандарт ISO 9241-11 определяет юзабилити как «степень, с которой продукт может быть использован определенными пользователями при определенном контексте использования для достижения определенных целей с должной эффективностью, продуктивностью и удовлетворенностью».
В нашем случае юзабилити – это степень, с которой прикладные решения являются простыми в использовании и хорошо подходят для людей, которые их используют.
Юзабилити – это также и набор методов, помогающих увидеть проблемы, которые делают решение непригодным для использования. В этой книге как раз предлагаются конкретные приемы, которые позволят избежать таких проблем.
Что такое хороший интерфейс? Пытаясь, определить это, два зарубежных юзабилити-эксперта – Якоб Нильсен (Jakob Nielsen) и Бэн Шнейдерман (Ben Shneiderman) – практически одновременно пришли к выводу, что хороший интерфейс обладает следующими характеристиками:
- Скорость обучения. Насколько быстро пользователь освоится в программе, сможет понять ее навигацию, приемы и последовательность действий при решении своих задач.
- Скорость работы. Насколько быстро пользователь сможет выполнять свою работу в программе.
- Запоминаемость. Например, сможет ли пользователь без проблем повторить операцию, выполненную неделю назад.
- Количество человеческих ошибок. Как часто пользователь ошибается при работе с программой, насколько серьезны эти ошибки и насколько долгий процесс их исправления.
- Удовлетворенность пользователей. В какой мере пользователю нравится работать с программой. Испытывает ли он чувство раздражения или полностью доволен. [14]
Все перечисленное выше справедливо и для веб-сайтов. Веб-сайт должен быть в первую очередь удобен для посетителя.
Юзабилити веб-сайта считается высокой, если впервые попав на сайт, клиент сразу же понимает, как им пользоваться. Еще один признак: клиент без труда запоминает и легко ориентируется на сайте, попав сюда второй раз. Третий признак больше из разряда психологического, но так же важен: пользователю должно быть приятно пользоваться сайтом. Как критерий хорошего юзабилити можно считать и отсутствие ошибок при пользовании сайтом. Это особенно важно, когда речь идет о больших развернутых порталах с требованиями регистрации, заполнениями анкет, интерактивными опросами, играми. В этом отношении сайты с играми особенно показательны: клиент, зайдя на сайт не в состоянии понять, как играть, с чего начинать, сделав несколько попыток, уходит с сайта. [27]
Улучшить юзабилити можно постоянным тестированием сайта реальными пользователями, ведением учета, чем и занимаются профессиональные разработчики сайтов, аудиторы и оптимизаторы.
Выводы по главе 1
В данной главе были рассмотрены теоретические моменты, касающиеся создания веб-сайтов и размещения их в сети Интернет. Дано определение хостинга и доменного имени, приведены достоинства и недостатки платного и бесплатного хостинга. Уделено внимание средствам разработки статических и динамических веб-сайтов. Рассмотрены основные категории программного обеспечения для разработки веб-сайта. Дано определение понятия юзабилити и обозначены критерии его оценки.
ГЛАВА 2. РАЗРАБОТКА И ВНЕДРЕНИЕ ВЕБ-САЙТА УЧЕБНОГО ЦЕНТРА (НА ПРИМЕРЕ НОУ АВТОШКОЛЫ «ФАВОРИТ-НН»)
2.1. Описание организации
Заказчиком является автошкола Фаворит-НН. Эта образовательная организация осуществляет подготовку водителей категории B.
В данном разделе представлена схема организационной структуры компании, в соответствии с которой организована работа компании на данный момент.
Рис. 2. Организационная схема автошколы Фаворит-НН.
Директор наделён полномочиями выбора стратегии развития компании, работы с кадрами, определения финансовых потоков предприятия. Бухгалтерия занимается аккумулированием данных об имуществе организации и обязательствах. Бухгалтерия также является источником документально обоснованной и структурированной экономической информации, необходимой для принятия управленческих решений в целях обеспечения эффективного хозяйствования. Учебный отдел занимается непосредственно работой с курсантами — преподаватели проводят занятия по теории, инструкторы — по практике. Автошкола располагает собственным гаражом, в котором учебные автомобили проходят профилактический ремонт и диагностику и автодромом, на котором курсанты осваивают базовые приемы вождения автомобиля. Сотрудники технического отдела отвечают за бесперебойное функционирование информационной системы образовательной организации, включающей себя локальную вычислительную сеть с доступом в Интернет, веб-сайт, компьютерный класс из 12 компьютеров. и специализированные тренажеры для обучения вождению.
2.2. Техническое задание
2.2.1. Название разработки
Официальный сайт автошколы Фаворит-НН
2.2.2. Цели разработки
Создание веб-представительства учебного центра в сети интернет. Реклама услуг образовательной организации в сети Интернет. Привлечение новых клиентов.
2.2.3. Основание разработки
Данное техническое задание, составленное на основании требований заказчика.
2.2.4. Выбор средства разработки
Выбор программного обеспечения для разработки веб-сайта осуществляется на усмотрение разработчика. Программное обеспечение должно удовлетворять следующим требованиям:
- Сайт должен иметь привлекательный внешний вид и соответствовать концепции Web0
- Панель управления сайтом должна иметь простой и интуитивно понятный интерфейс.
- Поддержка и обновление информации на веб-сайте не должно требовать от пользователя каких-либо особых знаний и навыков, за исключением навыков работы в стандартных Windows-приложениях.
- Программное обеспечение должно быть актуальной версии и обновляемым.
- Программное обеспечение должно быть бесплатным (распространяемым по лицензии GNU).
- Программное обеспечение должно обеспечивать базовый уровень защиты информации — разграничение доступа между простыми посетителями и администраторами, отсутствие необходимости использовать стороннее программное обеспечение для загрузки информации на веб-сайт (например, FTP-клиент).
2.2.5. Функциональные требования
Веб-сайт должен предоставлять информацию об услугах организации-заказчика пользователям сети Интернет.
Веб-сайт должен иметь следующие разделы:
- Главная страница
- Образовательные услуги
- Новости
- Материально-техническеая база
- Контакты
- Обратная связь
Веб-сайт должен знакомить пользователей с новостями в рамках своей тематики.
Веб-сайт должен иметь страницу с контактной информацией и формой обратной связи.
Веб-сайт должен иметь средства интеграции с социальными сетями.
2.2.6. Эксплуатационные требования
Веб-сайт должен работать 24 часа в сутки 7 дней в неделю. Допускается кратковременная (не более 15 минут за 1 месяц) остановка работы сайта с целью проведения технических работ.
2.2.7. Требования к безопасности
Веб-сайт должен иметь 2-факторную авторизацию при доступе к панели управления с целью повышения защиты от автоматического подбора логина и пароля.
Веб-сайт должен иметь актуальную версию программного обеспечения. Должно быть предусмотрено средство оповещения администратора о наличии обновлений программного обеспечения. Обновления должны устанавливаться автоматически по запросу пользователя.
Должна быть предусмотрена возможность своевременного обнаружения вредоносного кода на сайте, чтобы избежать заражения компьютеров клиентов, а также санкций со стороны поисковых систем.
2.2.8. Требования к интерфейсам
Веб-сайт должен иметь адаптивный интерфейс и корректно отображаться при разрешениях от 240*320 пикселей (на мобильных устройствах) до 1920*1080 пикселей (мониторы FullHD). В зависимости от разрешения экрана допускается перегруппировка и изменение информационных блоков и модулей страницы.
Дизайн веб-сайта должен быть максимально простым для восприятия. Количество графических элементов оформления должно быть сведено к разумному минимуму.
При подборе цветовой гаммы следует придерживаться следующих рекомендаций:
- Фон страницы белый
- Текст основного контента — черный
- Цвет текстовой ссылки — синий, при наведении — оранжевый
- Элементы оформления страницы — оттенки зеленого и оттенки оранжевого
Размер шрифтов должен позволять без напряжения читать текст при любом из разрешений экрана от 240*320 до 1920*1080 пикселей включительно.
Рекомендуемые семейства шрифтов — Arial (для основного текста), Times New Roman (для заголовков).
2.3. Выбор программного обеспечения
Среди свободно распространяемого программного обеспечения существует множество различных вариантов, приемлемых для создания сайта, удовлетворяющего требованиям Технического задания.
Не будем ставить целью провести исчерпывающее сравнение всех программных продуктов, остановимся лишь на самых популярных:
- WordPress0 — CMS, изначально предназначенная для создания автономных блогов, но впоследствии ее функциональность была серьезно расширена.
- Joomla3.3 — универсальная CMS, при помощи которой можно создавать самые разные сайты начиная от одностраничника, заканчивая веб-порталом.
- PHP4 + MySQL 5.6 — средства для разработки веб-сайта вручную посредством веб-программирования. Может стать средством разработки собственной CMS.
Сведем основные характеристики систем управления содержимым в одну сравнительную таблицу, выполним ее анализ и выберем оптимальное решение для создания веб-сайта автошколы «Фаворит НН» (табл.1)
В данном сравнении участвовали две бесплатных CMS — WordPress и Joomla, а также связка PHP+MySQL. В таблице приведены основные характеристики продуктов с точки зрения как разработчика, так и пользователя, обслуживающего веб-сайт.
Проведем сравнительный анализ программных продуктов.
В принципе, для решения поставленной практической задачи можно использовать любой из приведенных в таблице программных продуктов. Результат в конечном счете будет очень близким. Основными вопросами, которые нужно решить — это время изготовления веб-сайта (а, следовательно, и зарплата разработчика), а также простота в использовании и обслуживании сайта, которое будет осуществляться не самим разработчиком, а сотрудником фирмы, не имеющим навыков программирования и верстки веб-страниц. PHP 5.4 и MySQL 5.6 в связке дают практически ничем не ограниченный простор для творчества как программисту, так и верстальщику, однако такой подход оправдан лишь для решения нетипичных задач, к коим нельзя причислить сайт, создаваемый по обозначенному выше техническому заданию.
Таблица 1 Сравнительные характеристики программного обеспечения
| Параметр для сравнения | WordPress 4.0 | Joomla 3.3.3 | PHP 5.4 + MySQL 5.6 |
| Распространяется | Бесплатно | Бесплатно | Бесплатно |
| Шаблоны\темы оформления | Имеются несколько встроенных шаблонов, большое количество красивых шаблонов можно бесплатно скачать из Интернет. Есть платные шаблоны. | Имеются несколько встроенных шаблонов. Имеется большое количество шаблонов, но красивые и функциональные чаще всего платные. | Создается вручную средствами HTML, CSS, Javascript |
| Дополнительные расширения | Огромное количество расширений. Можно создавать свои собственные. | Огромное количество расширений. Можно создавать свои собственные. | Создаются преимущественно вручную. Существуют готовые решения, но для их внедрения почти всегда требуется работа с программным кодом |
| Стандартная комплектация | Для простых проектов (сайт-визитка) | Для проектов средней величины | Область применения не ограничена, но все компоненты должны создаваться «с нуля» |
| Требования к навыкам веб-мастера | Базовое владение ПК | Продвинутое владение ПК | Владение языком программирования PHP и знание команд SQL |
| Русификация
| Есть русифицированные версии большинства программных компонентов | Реализуется вручную | |
| Мультимедиа | Есть средства вставки в страницы мультимедийного контента — фото, аудио, видео | Есть средства вставки в страницы мультимедийного контента — фото. Для вставки аудио и видео, в т.ч. со сторонних ресурсов требуется изменение политики безопасности. | WYSIWYG-редактор отсутствует, контент вставляется при помощи HTML-кода |
| Форум | При помощи внешних компонентов | При помощи внешних компонентов | Пишется вручную |
| Скорость работы сайта | Средняя | Выше средней | Максимальная (при грамотно написанном коде) |
Бесспорно, при грамотном написании кода, веб-сайт будет работать очень быстро, иметь большой запас по потреблению ресурсов сервера, то есть, потенциально может выдерживать огромную посещаемость, не вызывая перегрузок. Однако, время, потраченное на создание подобного веб-сайта (и панели управления к нему) будет неоправданно велико, к тому же для создания подобного решения требуется высоко квалифицированный веб-программист. Это неизбежно скажется на объеме затрат и существенно увеличит срок окупаемости проекта. Учитывая выше сказанное, вариант PHP + MySQL снимаем с рассмотрения как неэффективный для данной задачи. Учитывая относительно невысокую посещаемость сайта (не как у новостного или развлекательного портала), вполне можно остановиться на системе со средней скоростью работы.
WordPress 4.0 и Joomla 3.3.3 — системы немного разных концепций, но обе из них вполне пригодны для решения поставленной задачи. В данном случае одним из ключевых моментов является простота обслуживания веб-сайта. Лично я имел опыт работы и с той и с другой системой и на основании этого могу сказать, что если не ставить каких-то «сверхзадач» то сайт на WordPress обслуживать проще, чем на Joomla. WordPress уступает Joomla в функциональности, но это заметно только при создании крупных проектов, к коим создаваемый в рамках данной работы веб-сайт отнести нельзя.
На основании проведенного выше сравнительного анализа делаем вывод, что оптимальным выбором программного обеспечения для выполнения поставленной задачи будет WordPress 4.0.
2.4 Структурная и функциональная схемы веб-сайта
После завершения этапа концептуального проектирования, по итогам которого было сформулировано техническое задание, приступаем к этапу логического проектирования. Будет составлено две схемы — функциональная (рис. 3) и структурная (рис. 4).
Рис. 3. Функциональная схема веб-сайта
В данном случае веб-сайт выступает в роли средства обмена информацией между фирмой и клиентами. Автошкола размещает на веб-сайте информацию о своих образовательных услугах и рекламирует сайт в сети Интернет. Реклама привлекает на сайт посетителей, заинтересованных в том, чтобы выучиться на права категории B. На сайте приведена подробная информация об услугах и контактные данные фирмы. Если посетителя удовлетворяют условия, он становится клиентом фирмы. В итоге, фирма получает доход от продажи услуги, а клиент получает саму услугу.
Приведенная выше функциональная схема (см. рис.3) описывает место веб-сайта в коммерческой и образовательной деятельности организации-заказчика. Для того, чтобы повысить конверсию, нужно заранее позаботиться о том, чтобы структура сайта была простой и понятной — это будет гарантировать низкий процент отказов.
Структурная схема веб-сайта представлена на рисунке 4.
Рис. 4. Структурная схема веб-сайта
Главная страница содержит приветствие для посетителя, а также ссылки на последние новости фирмы.
Информация о автошколе — страница, но которой размещена основная информация об автошколе «Фаворит-НН».
Услуги и цены — страница с информацией об образовательных услугах и их стоимости.
Материально-техническая база — на этой странице можно посмотреть фотографии автодрома и учебных автомобилей.
Новости и мероприятия — новостная лента, в которой размещается информация о планируемых событиях, а также отчеты о событиях прошедших.
Контакты — страница с контактной информацией, адресом и телефоном.