
- •Введение
- •1 Понятие пользовательского интерфейса
- •1.1 Популярные стили пользовательского интерфейса
- •1.2 Критерии эффективного интерфейса
- •1.3 Модели пользовательского интерфейса
- •1.4 Контрольные вопросы
- •2 Психология человека и пэвм
- •2. 1 Психология пользователей
- •2.2 Восприятие и внимание человека
- •2.3 Информационные процессы человека
- •2.4 Контрольные вопросы
- •3 Проектирование пользовательского интерфейса
- •3.1 Особенности графического интерфейса
- •3.2 Объектный подход к проектированию интерфейса
- •3.3 Компоненты графического интерфейса
- •3.4 Взаимодействие пользователя с приложением
- •3.5 Общие правила взаимодействия с объектами
- •3.6 Операции пересылки и создания объектов
- •3.7 Метод прямого манипулирования
- •3.8 Контрольные вопросы
- •4 Правила проектирования пользовательского интерфейса
- •4.1 Принципы проектирования пользовательского интерфейса
- •4.2 Контрольные вопросы
- •5 Этапы проектирования пользовательского интерфейса
- •5.1 Коллективный подход к разработке
- •5.2 Разработка, ориентированная на обучение
- •5.3 Четыре этапа разработки
- •5.4 Примеры результатов выполнения работ на этапах разработки пользовательского интерфейса
- •5.5 Контрольные вопросы
- •6 Инструментарий разработчика интерфейсов
- •6.1 Передача информации визуальным способом
- •6.2 Использование цвета в интерфейсе
- •6.3 Использование звука в пользовательском интерфейсе
- •6.4 Использование анимации в пользовательском интерфейсе
- •6.5 Управляющие элементы разработки интерфейса
- •6.6 Основные проблемы удобства применения гпи и опи
- •6.7 Контрольные вопросы
- •7 Тестирование пользовательского интерфейса
- •7.1 Понятие удобства применения программного продукта
- •7.2 Важность тестирования на удобство применения программного обеспечения
- •7.3 Цели и задачи тестирования
- •7.4 Преимущества тестирования на удобство применения
- •7.5 Привлечение к работе когнитивных психологов и специалистов по удобству применения
- •7.6 Условие успеха программных продуктов
- •7.7 Отчетные результаты теста
- •7.8 Контрольные вопросы
- •8 Особенности разработки web – интерфейса
- •8.1 Пользовательский интерфейс web-приложений
- •8.3 Пользовательский интерфейс системы реального времени
- •8.4 Средства разработки web-документов
- •8.5 Контрольные вопросы
- •9 Практика
- •9.1 Лабораторная работа №1
- •Методические указания к выполнению работы
- •Постановка задачи к лабораторной работе
- •6. Разработать полную схему экранов системы.
- •9.2 Лабораторная работа №2
- •Методические указания к выполнению работы
- •В радиокнопках и чекбоксах должны нажиматься не только визуальный индикатор переключения, т.Е. Кружок или квадратик, но ещё и подпись.
- •Элементы в меню нужно группировать максимально логично. Можно между группами помещать пустой элемент (разделитель) или же размещать отдельные группы в разных уровнях иерархии.
- •Постановка задачи к лабораторной работе
- •9.3 Лабораторная работа №3
- •Методические указания к выполнению работы
- •Постановка задачи к лабораторной работе
- •9.4 Лабораторная работа №4
- •Методические указания к выполнению работы
- •Значения временных интервалов
- •Постановка задачи к лабораторной работе
- •1. Тестирование
- •2. Проектирование основных экранов
- •3. Финальное тестирование
- •40. Какие методы предотвращения ошибок бывают?
- •3. Повышение разборчивости и заметности индикаторов
- •44. Какие среды передачи обучающих материалов бывают?
- •Ответы на вопросы тестов
- •Список использованных источников
8.4 Средства разработки web-документов
Практически для всех областей применения программных продуктов характерна одна и та же закономерность: технологии создания продуктов, принципы их внешнего оформления и концепции взаимодействия с пользователем развиваются одновременно. Не является исключением в этом отношении и Интернет.
Web-узлы прошли в своем развитии три стадии, и наиболее современные из них относятся к третьему поколению. Такая градация напрямую связана с эволюцией тех инструментов, с помощью которых создавались представители каждого поколения.
Для Web-узлов первого поколения была характерна однотипная структура – обычный сайт состоял из одной линейной страницы, представлявшей собой последовательность текста и «картинок». При этом графические элементы создавались с помощью обычных графических редакторов, ориентированных на жесткие требования издательского дела, вследствие этого изображения получались очень высокого качества, но были весьма требовательны к имеющимся вычислительным ресурсам. Странички писали на «чистом» HTML (Hypertext Markup Language – язык разметки гипертекста) с использованием простейших редакторов, так как текстовые процессоры с их внутренними форматами документов не годились для Интернета, главными требованиями которого были и остаются компактность и переносимость на другие платформы. Наиболее популярным в это время был редактор Notepad (Блокнот), входящего в набор стандартных приложений MS Windows.
Страницы узлов второго поколения уже содержали интерактивные элементы, обеспечивавшие более активное участие пользователя в формировании облика просматриваемого Web-документа. Простейшими из таких элементов были ссылки с контактными почтовыми адресами, обеспечивавшими вызов программы электронной почты. Позже появились страницы, которые генерировались сценариями, выполнявшимися по запросам пользователей. Такие изменения стали возможны благодаря расширениям HTML и его совместного использования с другими технологиями (PERL, CGI и т.п.). Тем не менее, основными инструментами создания страниц по-прежнему оставались текстовые редакторы. В результате сайты второго поколения были так же трудно управляемы, как и их предшественники, и так же ненадежны. Заслугой этого поколения узлов явилось то, что они продемонстрировали практически безграничные возможности языков разметки – HML и XML (eХtensible Маrcuр Language) – в формировании облика Web-страниц. Нужны были инструменты, которые позволили бы свести к минимуму ручной труд и тем самым превратить Web-дизайн в разновидность народного творчества.
Возможности Интернет породили спрос на разработку Web-материалов. И они появившись в большом количестве и разнообразии, что без их классификации трудно обойтись. В основу классификации могут быть положены следующие средств разработки:
требуемый уровень конечного продукта, то есть что должно стать результатом применения соответствующего инструмента (элементы страниц, отдельные страницы, сайты, серверы);
степень автоматизации процесса разработки и использования технологии WYSIWYG (What You See Is What You Get – что видишь, то и получишь);
диапазон поддерживаемых Интернет-технологий (имеются в виду технологии представления информации и обмена ею между пользователем и Web-ресурсом).
Первый вариант классификации подразумевает разделение средств разработки по признаку целевой направленности. Основными группами в этой классификации являются:
узкоспециализированные программы (утилиты), ориентированные на реализацию отдельных элементов Web-документов, которые предназначены для генерации специфичных частей страниц (списков, таблиц, фреймов, форм и т.п.) или механизмов (счетчиков, гостевых книг). Многие утилиты обеспечивают реализацию интерфейсных элементов, которые затем легко встраиваются в HTML-страницы. Часто так реализуют кнопки, сенсорные карты, анимационную графику. Достаточно большая группа утилит предназначена для конвертирования файлов различных типов в HTML-текст;
программы (как правило, простые текстовые редакторы, не дополняющие вводимый текст элементами форматирования), предназначенные для создания отдельных страниц или небольших узлов на языке HTML;
развитые HTML-редакторы, обеспечивающие поддержку всего процесса разработки – от проектирования до размещения готового сайта на сервере. Во многих случаях такие средства разработки поддерживают возможность сопровождения сайта, предоставляют некоторые инструменты для администрирования сервера.
По уровню наглядности средства разработки можно разделить на три категории:
не обеспечивающие никаких средств визуализации результатов разработки и требующие просмотра разрабатываемых страниц во внешнем браузере (Notepad);
обеспечивающие автоматическое форматирование и «подсветку» синтаксиса НTML-текста, а также предоставляющие возможность просмотра результата разработки (в ходе ее выполнения) собственными средствами (НotDog, Arachnofilia, HomeSite);
визуальные редакторы, обеспечивающие работу в режиме WYSIWYG, которые не требуют просмотра во внешнем браузере, а иногда даже не предусматривают работу с «чистым» HTML-текстом (Netscape Composer, MS FrontPage, Macromedia Dreamweaver).
Широта охвата Интернет-технологий – характеристика достаточно условная. Самые сложные и современные технологии теоретически могут быть реализованы и в Notepad. Все определяется трудоемкостью реализации этих технологий.
О любой из технологий можно сказать, поддерживается ли она каким-то средством разработки. Часто именно это является одним из основных критериев выбора инструмента. Каждый из Web-дизайнеров постепенно формирует собственный набор инструментов, оттачивает мастерство владения ими и на практике совершенствует опыт создания качественных страниц. Приведенная схема (рисунок 8.3) показывает постоянно расширяющиеся инструменты создания Web-материалов.