2.3 Конструирование пользовательского интерфейса

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

1) Наглядность, простота и удобство в использовании;

2) Соответствие внешнего вида кнопок, списков, полей ввода текста, таблиц своему функциональному содержанию;

3) Применение стандартных шрифтов, цвета и указателей мыши.

4) Полнота и краткость отображаемой информации.

При разработке пользовательского интерфейса использовались язык разметки гипертекста HTML 4.1 и каскадные таблицы стилей CSS 2.

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

CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. [1] Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). [2] Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля. [3]

Для конструирования форм и других элементов интерфейса пользователя использовались следующие HTML теги: table, form, input, div и несколько других.

Любой пользователь, зашедший на сайт может осуществлять навигацию по его страница с помощью меню, показанного на рисунке 2.3.1.

Рисунок 2.3.1 - Навигационное меню для неавторизованного пользователя

После авторизации меню применяет вид, показанный на рисунке 2.3.2

Рисунок 2.3.2 - Навигационное меню для авторизованного пользователя

Если же в систему вошел администратор (суперпользователь), то для него будет отображаться персональное меню, со ссылкой на страницу администрирование сервиса

Рисунок 2.3.3 - Навигационное меню для авторизованного пользователя

Для входа в систему представлена форма с 2 полями input со значением атрибута type=”text”, и кнопкой, созданной с помощью тега input с атрибутом type=”submit”

Рисунок 2.3.4 - Форма для авторизации пользователя

После авторизации вместо формы пользователь увидит текст приветствия.

Рисунок 2.3.5 - Приветствие авторизованного пользователя

Все новости доступны для просмотра на странице news. php, которая имеет следующий вид.

Рисунок 2.3.6 - Вид вывода новостей

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

Список групп создан с помощью тега select, элементы option которого формируются функцией на сервере.

Рисунок 2.3.7 - Форма регистрации нового студента

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

Рисунок 2.3.8 - Выбор группы для просмотра расписания

После выбора группы пользователь увидит таблицу с расписанием.

Рисунок 2.3.9 - Расписание для выбранной группы

По клике на ссылку Замены, пользователь увидит таблицу с заменами на следующий учебный день.

Рисунок 2.3.10 - Список замен

Административный раздел, и раздел управления новостями выглядят следующим образом.

Рисунок 2.3.11 - Панель администратора

Кликнув на ссылку Добавить новость администратор попадет на страницу добавления новости, на которой 2 основных компонента: input для ввода заголовка и textarea для текста новости и кнопки добавления новости.

Рисунок 2.3.12 - Панель администратора

При удалении новости пользователь получает предупреждение. Новость будет удалена только в случае подтверждения пользователем.

Рисунок 2.3.13 - Подтверждение удаления новости

Для формирования списка замен была написана JavaScript функция, позволяющая добавлять и удалять новые строки в редактируемой таблице замен.

Рисунок 2.3.14 - Формирование списка замен

При нажатии на кнопку "+" добавляется пустая строка для редактирования. При нажатии на кнопку "-" удаляется лишняя строка.