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

Пользовательский интерфейс – это значит общение между человеком и компьютером.

Интерфейс пользователя компьютерного приложения включает:

средства отображения информации, отображаемую информацию, форматы и коды;
командные режимы, язык «пользователь - интерфейс»;
устройства и технологии ввода данных;
диалоги взаимодействия и транзакции между пользователем и компьютером, обратную связь с пользователем;
поддержку принятия решений в конкретной предметной области.

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

специального языка HyperTextMarkupLanguage (HTML), то есть, Язык Разметки Гипертекста. Документ, написанный на HTML, представляет собой текстовый файл, который содержит собственно текст, несущий информацию читателю, и флаги разметки. Последние представляют собой определенные последовательности символов, которые являются инструкциями для программы просмотра; в соответствии с этими инструкциями программа располагает текст на экране, включает в него рисунки, которые сохраняются в отдельных графических файлах, и формирует гиперсвязи с другими документами или ресурсами Internet. Таким образом, файл на языке HTML приобретает вид WWW-документа только тогда, когда он интерпретируется программой просмотра.

Metacharset- Указывает кодировку документа. Атрибут введен в HTML5 и предназначен для сокращения формы тега <meta>, которая задавала кодировку в предыдущих версиях HTML и XHTML.

Rel -Атрибут rel определяет отношения между текущим документом и файлом

Элемент <title> не является частью документа и не показывается напрямую на веб-странице. В операционной системе Windows текст заголовка ...

Тег <script> предназначен для описания скриптов, может содержать ссылку ... src: Адрес скрипта из внешнего файла для импорта в текущий документ. Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов <nav> ...

Тег <header> задает «шапку» сайта или раздела, в которой обычно ... InternetExplorer до версии 8.0 включительно игнорирует тег < header>, ...

Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода. Значение 0s или 0ms запускает анимацию сразу же.

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

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

Рисунок 7.1-Главная форма

Для создания кнопок быстрого доступа используется компонент. Маркированного списка а так же для создания главного меню. Пунктами меню являются: Главная, палитра цветов, галерея, оформить заказ, контакты. Для вывода всех таблиц используется section->div.

Рисунок 7.2-Форма заполнения о оформлении заказа

Выбор типа продукта для заказа (компонент input->radio), ввод Фио покупателя, контактного телефона, адреса, пожеланий (компонент input->text), отправка данных для оформления заказа (компонент input-submit)

Рисунок 7.3-Форма настроек главной страницы сайта на панели администрирования

Осуществляется ввод следующих данных:

Названия заголовка страницы и информацию о компании, продукции (компонент input->text), отправка данных для оформления заказа (компонент input-submit)

Рисунок 7.4- Форма палитры цветов