– технология jQuery;

– язык программирования PHP на базе OpenServer для программирования серверной части;

– система управления базами данных (СУБД) MySQL.

1.3.1 Язык гипертекстовой разметки и каскадные таблицы стилей

Для того, чтобы создать структуру любого HTML-документа (web-страницы), необходимо «сверстать» документ на языке разметки гипертекста HTML [5].

HTML – это система верстки веб-страниц, которая определяет, какие элементы и как должны располагаться в документе. Подобные документы открываются под управлением браузера [6].

Тег – это специальный символ разметки, который применяется для вставки различных элементов на веб-страницу таких как: рисунки, таблицы, ссылки и др. и для изменения их вида. Для обозначения тегов используется символ <тег>. Теги нечувствительны к регистру, поэтому запись <B> и <b> эквивалентна [7].

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

CSS – это набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид [9].

Таким образом, с помощью HTML в связке с CSS можно создать визуально оформленную web-страницу с необходимой информацией.

1.3.2 Язык программирования JavaScript и технология jQuery

JavaScript – это язык программирования, с помощью которого веб-страницам придается интерактивность. С его помощью создаются приложения, которые включаются в HTML-код (например, анкеты или формы регистрации, которые заполняются пользователем) [10].

С помощью JavaScript можно изменять страницу, изменять стили элементов, удалять или добавлять теги. С его помощью можно узнать о любых манипуляциях пользователя на странице (прокрутка страницы, нажатие любой клавиши, клики мышкой, увеличение или уменьшение рабочей области экрана) Через него можно к любому элементу HTML-кода получить доступ и делать с этим элементом множество манипуляций. Можно загружать данные не перезагружая страницу, выводить сообщения, считывать или устанавливать cookie и выполнять множество других действий.

jQuery – это полностью бесплатный javascript фреймворк (framework) (фреймворк – это набор готовых функций для облегчения решения типовых задач).

jQuery упрощает доступ к DOM-модели (объектной модели документа), а также умеет не только обращаться, но и манипулировать ими.

1.3.3 Серверный язык PHP

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

PHP – язык программирования, созданный для генерирования HTML-страниц на веб-сервере и работы с базами данных [11].

PHP обладает всем необходимым набором средств разработки:

– автоматическое извлечение POST и GET-параметров, а также переменных окружения веб-сервера в предопределённые массивы;

– взаимодействие с большим количеством различных систем управления базами данных (MySQL, MySQLi, SQLite, PostgreSQL, Oracle (OCI8), Oracle, Microsoft SQL Server, Sybase, ODBC, mSQL, IBM DB2, Cloudscape и Apache Derby, Informix, Ovrimos SQL, Lotus Notes, DB++, DBM, dBase, DBX, FrontBase, FilePro, Ingres II, SESAM, Firebird / InterBase, Paradox File Access, MaxDB, Интерфейс PDO);

–автоматизированная отправка HTTP-заголовков;

– работа с HTTP-авторизацией;

– работа с cookies и сессиями;

– работа с локальными и удалёнными файлами, сокетами;

– обработка файлов, загружаемых на сервер;

– работа с XForms [12].

1.3.4 Система управления базами данных MySQL

Поскольку сайт института имеет новостную ленту и форму обратной связи, необходимо хранить все данные в какой-либо базе данных. Однако для начала необходимо дать определение базы данных и СУБД.

База данных (БД) – набор сведений, хранящихся некоторым упорядоченным способом. Иными словами, база данных – это хранилище данных.

Система управления базами данных – совокупность языковых и программных средств, предназначенных для создания, ведения и совместного использования БД многими пользователями.

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

Альтернативой SQLite выбрана СУБД MySQL.

MySQL – это одна из самых популярных и самых распространенных СУБД (система управления базами данных) в интернете. Она не предназначена для работы с большими объемами информации, но ее применение идеально для сайтов, как небольших, так и достаточно крупных [13].

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

Немаловажным фактором является ее бесплатность. MySQL распространяется на условиях общей лицензии GNU (GPL, GNU Public License).

GNU General Public License (в переводе Универсальная общественная лицензия GNU, Универсальная общедоступная лицензия GNU или Открытое лицензионное соглашение GNU) – лицензия на свободное программное обеспечение, созданная в рамках проекта GNU в 1988 г., по которой автор передаёт программное обеспечение в общественную собственность.

Цель GNU GPL – предоставить пользователю права копировать, модифицировать и распространять (в том числе на коммерческой основе) программы.

2 Проектирование функционала сайта

2.1 Особенности проектирования web-сайтов

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

Первое, что необходимо сделать – составить список критериев, которыми следует руководствоваться при просмотре сайтов. Критерии – это наиболее выраженные составляющие сайта, с которыми сталкивается их посетитель, такие как навигация, дизайн, удобство нахождения информации и другое. Список критериев может варьироваться в зависимости от тематики и направленности сайта [14]. Приведем некоторые общие характеристики для оценки сайтов с краткими комментариями:

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

Организация данных в виде упорядоченной структуры должна сообщать посетителю, какую информацию он может обнаружить на сайте и где ее искать [15]. Информация должна быть организована таким образом, чтобы посетитель знал, что его ждет на следующей странице уже по названию ссылки, на которую он нажимает.

Хорошая структура и навигация – признаки эффективности и организованности сайта.

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

Читабельность – тексты на сайте должны быть более лаконичными и разбиты при необходимости на несколько страниц. Следует, также, учитывать целевую аудиторию, на которую рассчитан сайт [16].

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

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

Используемые технологии – не все современные технологии, такие как Flash, DHTML и другие применяют обоснованно, но их использование может придать сайту большую выразительность и удобство. В каждом случае следует учитывать уместность и производимый эффект. Технологии могут быть реализованы по-разному в различных браузерах, поэтому сайт рекомендуется просматривать в нескольких, самых популярных браузерах, не только последних версий. Технологии должны применяться к месту и отвечать предполагаемой аудитории [17].

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

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

– использование обозначений;

– уместность;

– единообразие;

– разделение на части.

Дадим пояснения этим принципам.

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

Уместность – разделы сайта должны содержать информацию и элементы, которые соответствуют данной части или фрагменту сайта. Элементы, которые не отвечают данному принципу, должны быть перенесены в другое место или удалены.

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

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

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

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

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

К особенностям проектирования сайтов можно отнести следующее:

– избыток информации;

– люди не читают веб-страницы, а просматривают;

– пользователи избегают медленно загружающихся сайтов;

– люди плохо ориентируются в большом количестве информации;

– ограниченность кратковременной памяти человека;

– трудности чтения с экрана монитора.

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

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

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