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

ЛИЧНЫЙ КАБИНЕТ 

 

Здравствуйте гость!

 

Логин:

Пароль:

 

Запомнить

 

 

Забыли пароль? Регистрация

Повышение уникальности

Предлагаем нашим посетителям воспользоваться бесплатным программным обеспечением «StudentHelp», которое позволит вам всего за несколько минут, выполнить повышение уникальности любого файла в формате MS Word. После такого повышения уникальности, ваша работа легко пройдете проверку в системах антиплагиат вуз, antiplagiat.ru, etxt.ru или advego.ru. Программа «StudentHelp» работает по уникальной технологии и при повышении уникальности не вставляет в текст скрытых символов, и даже если препод скопирует текст в блокнот – не увидит ни каких отличий от текста в Word файле.

Результат поиска


Наименование:


лабораторная работа Директивно-диалоговая форма взаимодействия с программной системой Интерфейс командной строки (Command Line Interface - CLI)

Информация:

Тип работы: лабораторная работа. Добавлен: 29.04.2012. Сдан: 20 Н. Страниц: 21. Уникальность по antiplagiat.ru: < 30%

Описание (план):


Лабораторная  работа  №1
Тема: «Директивно-диалоговая форма взаимодействия  с программной системой
      Интерфейс командной строки (Command Line Interface - CLI)»
Цель  работы: Изучение и приобретение навыков разработки директивно-диалоговых форм взаимодействия с программной системой на основе командных файлов.
В данной работе на примере командных файлов рассматривается командно-директивная  форма взаимодействия. Данная форма  диалогового взаимодействия, как  правило, предназначена для подготовленного пользователя и требует знания алгоритмов выполнения программы, так и отдельных команд и их параметров. Запуск программ или выполнение отдельных директив проводится с командной строки.
В диалоговом взаимодействии пользователя с программной  системой выделяются 2 типа сообщений: входные сообщения, порождаемые пользователем с помощью средств ввода информации и выходные сообщения, формируемые системой с помощью средств вывода и отображения информации. Первый шаг диалога чаще всего начинается с выдачи системой одного или нескольких выходных сообщений. Выходные сообщения, как правило, отражают результаты выполнения процедурной части, либо состояние системы и диалога. Последовательности диалога в свою очередь, делятся на последовательности, где инициатива может принадлежать системе и пользователю. Существует также и третий тип инициативы – смешанная инициатива, предполагающая периодическое перераспределение инициативы с помощью управляющих сигналов. Директивная форма взаимодействия требует определенных знаний системы и управляющих команд операционной системы.
Задание к работе
Выполнение  данной работы состоит в создании четырех командных файлов, реализующих  директивно-диалоговую форму взаимодействия пользователя с программной системой.
При выполнении работы необходимо создать следующие командные файлы (bat-файлы):
    вариант - с параметрами символами;
    вариант - с параметрами, использующие имена файлов;
    вариант - с использованием внешней команды “CHOICE” (директивно-диалоговая форма взаимодействия).
    вариант – с использованием нескольких параметров.
Количество  используемых параметров и функции, исполняемые командными файлами, выбираются самим обучающимся.
Рассмотрим  примеры таких файлов.
              1 вариант
Здесь при использовании параметра  “р” производится просмотр содержимого  каталога “stud”.
@echo off
if -%1= =- goto konez
if %1== p goto work
: work
dir c:\stud
pause
goto konez
: konez
echo Вы  хотите закончить работу?
pause
goto exit
: exit
              2 вариант
В этом случае при использовании в качестве параметра существующего файла a.txt производится просмотр содержимого этого файла.
@echo off
if -%1==- goto konez
if not exist %1 goto mess
echo просмотр файла
type %1
pause
goto konez
: mess
echo файл не найден
pause
goto konez
: konez
echo Вы  хотите закончить работу?
pause
goto exit
: exit
              3 вариант
В этом примере рассматривается диалогово-директивная  форма взаимодействия, в данном случае командный файл выполняет следующие  функции: при выборе альтернативы “y”  просматривается каталог “stud”, при выборе альтернативы “n”- выход  из программы, если же пользователь не производит никакого выбора, ПЭВМ через 10 секунд сама осуществляет выбор, в данном случае производится завершение работы.
@echo off
echo Если  вы хотите просмотреть каталог  “stud” нажмите “Y”
choice /c:YN /t:N,10
if errorlevel 2 goto vyhod
dir C:\stud
pause
goto exit
: vyhod
echo Конец  работы
pause
:exit
4 вариант  (несколько параметров)
@ECHO OFF
if /%1==/ goto konez
if not exist %1 goto error
if %2==u goto udal
if %2==c goto copu
if /%2==/ goto konez
:copu
md AAA
echo Katalog cozdan
pause
copy %1 AAA
pause
goto exit
:udal
del %1
pause
goto konez
:error
echo file ne ukazan
:exit
Содержание  отчета
а) Привести краткие сведения о формах диалогового  взаимодействия.
б) Привести основные сведения о командных файлах и их практическом использовании  для организации диалога пользователя с программной системой.
в) Привести тексты созданных bat-файлов.
Примечание 1. Отчет должен быть представлен  в соответствии с требованиями принятыми  в ВУЗе.
Примечание 2. Коды программ должны быть оригинальными  у каждого студента.
Примечание 3. К защите лабораторной работы студент  допускается, после проверки преподавателем работоспособности программ.
 

Лабораторная  работа 2
Тема: «Пользовательский интерфейс на основе HUI (Hand User Interface)»
Введение 
Данный  вид пользовательского интерфейса используется в основном для карманных компьютеров, для которых характерен дисплей небольшого размера. В таких системах применяются объекты пользовательского интерфейса учитывающие эту особенность.
Данная  работа посвящена отработке навыков использования гиперссылок в документах в формате HTML. Гиперссылки являются компонентами пользовательского интерфейса в определенной степени учитывающие требования к проектированию "Hand User Interface".
Задание:
Спроектировать  и реализовать логически организованную группу гипертекстовых документов (HTML-файлов), систему ссылок внутри документов, представляющими пользователю удобную и интуитивно понятную навигацию по гипертексту.
Примечание: В отчете, кроме обязательных компонент, должна быть представлена навигационная структура по группе гипертекстовых документов (HTML-файлов).
Все созданные  файлы должны быть размещены на WEB-сервере. В этой работе и других, связанных  с WEB-интерфейсами, необходимо использование WEB-сервера. (для отладки WEB-проектов используется технология "петли- (loop back)", броузер и сервер размещаются на одном компьютере.)
Инструктивные материалы и краткая  теоретическая часть.
Термин  “гипертекстовый” означает, что такой  документ состоит из нескольких относительно самостоятельных частей. Последовательность переходов от одной части к другой определяется двумя обстоятельствами:
• организацией логической связи между частями  документа, которая устанавливается  его создателем;
• интересами пользователя, который может пользоваться имеющимися ссылками в произвольном порядке.
Благодаря этому свойству гипертекст позволяет  заменить жесткую линейную последовательность просмотра информации, характерную  для других форм электронных документов, гибким алгоритмом, напоминающим работу с печатными изданиями, но значительно более эффективным в реализации.
Во многих случаях гипертекстовый документ имеет  полносвязную структуру, то есть от одной  его части можно перейти за один или несколько шагов к  любой другой его части.
Например, на рис. 1. показана структура гипертекстового документа, описывающего работу кухонного комбайна.
 
Используя ссылки, пользователь может  ознакомиться с соответствующей  информацией как последовательно (“Технические характеристики” — “Обслуживание” — “Насадки” — “Рецепты”), так

и “перескакивая” с одной страницы на другую, чтобы  уточнить тот или иной момент. Cвязь между частями документа реализуется посредством так называемых гиперссылок.
Гиперссылка (Hypertext Reference) — это интерактивная область документа, щелчок мышью на которой приводит к выполнению заданной операции перехода. Переход может выполняться как внутри текущего документа, так и на любой другой информационный ресурс.
В качестве гиперссылки может использоваться слово, фраза или некоторый графический элемент документа. В связи с этим необходимо отметить, что понятие “гипертекстовый” совершенно не ограничивает содержимое документа только текстовой информацией. Его компоненты могут быть реализованы в виде графических изображений, видеоклипов или звукового ряда. Такой широкий диапазон форм представления информации возможен благодаря особенностям языков гипертекстовой разметки.
Язык  гипертекстовой разметки, или язык разметки документов (Markup Language), — это специальный язык программирования, предназначенный для описания структуры информационного наполнения документа. Другими словами, такой язык позволяет указать, что вот здесь, например, должен быть текст, здесь — картинка, а вот там должна появляться реклама.
Таким образом, любой гипертекстовый документ, описанный с помощью языка  разметки, представляет собой программу, результатом выполнения которой  является отображение информационной части документа на экране монитора.
С точки зрения пользователя гиперссылка представляет собой интерактивную область документа, обеспечивающую динамический переход между его частями. Однако каждая гиперссылка имеет и оборотную сторону: для создателя HTML-документа это прежде всего адрес ресурса, включенного им в состав документа.
Необходимо  отметить, что само понятие ресурса  имеет достаточно абстрактный характер. В общем случае его используют для обозначения той информации или данных, которые представляют (или могут представлять) интерес  для пользователя. Соответственно, объем и “способ существования” ресурса могут изменяться в очень широком диапазоне. Например, если посетитель Интернета — любитель футбола, то для него ресурсом будет Web-сайт, посвященный ходу чемпионата Европы по этому виду спорта, если же посетитель сам является Web-дизайнером, то его может интересовать один-единственный файл, содержащий описание какого-нибудь необычного элемента страницы. Общим для всех ресурсов является то, что каждый из них имеет адрес, однозначно идентифицирующий его среди других ресурсов. Адрес ресурса, представленный в символьном виде, называется Uniform Resource Locator (универсальный указатель ресурса), сокращенно URL. Поскольку физическим носителем (точнее, хранителем) ресурса является компьютер, то основу URL составляет доменное имя этого компьютера. Однако для обращения к ресурсу-файлу требуется учитывать организацию файловой системы компьютера. Поэтому URL может быть дополнен описанием маршрута доступа к необходимому файлу. Очень часто наряду с собственно адресом ресурса URL содержит также наименование протокола, который должен использоваться при работе с этим ресурсом. Таким образом, в общем виде структуру URL можно представить так:
[тип  протокола]://[доменное имя компьютера]/[маршрут  доступа].
В лабораторной работе мы будем использовать усеченное понятие URL, т.к. работа выполняется на локальном компьютере, это будет HTML-файл находящийся на другом диске (логическом или физическом) или, даже документ в другом (не текущем) каталоге.
Иллюстративный  пример навигационной схемы по группе HTML-файлов приводится на рис.2
рис.2

Кратко  о HTML?

HTML не  является языком программирования, это язык разметки текстовых  документов. В нем необязательно точное соответствие синтаксису, объявление переменных, описание процедур и классов и прочих атрибутов "обычных" языков программирования. Если вы не укажете такой важный элемент как TITLE или BODY, то броузер просто будет использовать соответствуещее значение по умолчанию. Если вы сделаете синтаксическую ошибку, самое страшное, что случится - искажение вида документа в окне броузера, при котором ошибку легко найти и исправить.
Термин HTML (HyperText Markup Language) означает "язык маркировки гипертекстов". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли. Со времени создания первой версии HTML претерпел некоторые изменения.
Для освоения HTML вам понадобятся две вещи:
    Любой браузер, т.е., программа, пригодная для просмотра HTML-файлов - Internet Explorer или Netscape Navigator.
    Любой редактор текстовых файлов, поддерживающий русский язык в выбранной Вами кодировке. Если на Вашем компьютере установлен Windows, вполне подойдет Notepad или Блокнот.
Мы будем  использовать текстовый редактор для  подготовки HTML-файлов, а браузер  — как инструмент контроля за сделанным. Свои первые HTML-файлы Вы будете разрабатывать  у себя на локальном диске. Другими  словами, компьютер, на котором Вы будете заниматься, может и не иметь подключения к Интернет

Как устроен HTML-документ?

HTML-документ  — это просто текстовый файл  с расширением *.htm, *.html. Вот самый  простой HTML-документ:
<html>
<head>
<title>
Пример 1
</title>
</head>
<body>
<H1>
Привет!
</H1>
<P>
Это простейший пример HTML-документа.
</P>
<P>
Этот *.htm-файл может  быть одновременно открыт
и в Notepad (Блокноте), и в Internet Explorer. Сохранив изменения  в Notepad(Блокнот),
просто нажмите  кнопку Reload ('обновить') в Internet Explorer ,
чтобы увидеть  эти изменения реализованными в HTML-документе.
</P>
</body>
</html>
Для удобства чтения здесь введены дополнительные отступы, однако в HTML это не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть и вот так:
<html>
<head>
<title>Пример 1</title>
</head>
<body>
<H1>Привет!</H1>
<P>Это простейший  пример HTML-документа.</P>
<P>Этот *.htm-файл  может быть одновременно открыт и в Notepad (Блокноте), и в Internet Explorer или Netscape.
Сохранив изменения  в Notepad, просто нажмите кнопку Reload ('обновить')
в Netscape, чтобы  увидеть эти изменения реализованными в HTML-документе.</P>
</body>
</html>
Как видно  из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html>) называется меткой (по-английски — tag, читается "тэг"). Большинство HTML-меток — парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением "/". Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY> и <Body> будут восприняты браузером одинаково. Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В нашем простейшем документе, однако, нет ни одного атрибута.

Обязательные  метки

<html> ... </html>

Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ.

<head> ... </head>

Эта пара меток указывает на начало и конец  заголовка документа. Помимо наименования документа (см. описание метки <title> ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.

<title> ... </title>

Все, что  находится между метками <title> и </title>, толкуется браузером как  название документа. Internet Explorer , например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.

<body> ... </body>

Эта пара меток указывает на начало и конец  тела HTML-документа, каковое тело, собственно, и определяет содержание документа.

<H1> ... </H1> — <H6> ... </H6>

Метки вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных  уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.

<P> ... </P>

Такая пара меток описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац. Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например:
<H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1>
или
<P ALIGN=RIGHT>Образец  абзаца с выравниванием по  правому краю</P>
Подытожим все, что мы знаем, с помощью примера 2:
<html>
<head>
<title>Пример 2</title>
</head>
<body>
<H1 ALIGN=CENTER>Привет!</H1>
<H2>Это чуть более сложный пример HTML-документа</H2>
<P>Теперь  мы знаем, что абзац можно  выравнивать не только влево, </P>
<P ALIGN=CENTER>но  и по центру</P> <P ALIGN=RIGHT>или  по правому краю.</P>
</body>
</html>
С этого  момента Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно от начала до конца. В следующем разделе мы поговорим, как можно улучшить наш простой HTML-документ. Начнем с малого — с абзаца.

Непарные  метки

В этом разделе мы поговорим о метках, которые не подчиняются двум основным правилам HTML: все они непарные, а некоторые (так называемые &-последовательности) к тому же должны вводиться только маленькими буквами.

<BR>

Эта метка  используется, если необходимо перейти  на новую строку, не прерывая абзаца. Очень удобно при публикации стихов.
<html>
<head>
<title>Пример 3</title>
</head>
<body>
<H1>Стихи</H1>
<H2>Автор</H2>
<P>Строка1<BR>
Строка2<BR>
Строка3<BR>
Строка4</P>
<P>Строка5<BR>
Строка6<BR>
Строка7<BR>
Строка7</P>
</body> </html>

<HR>

Метка <HR> описывает вот такую горизонтальную линию:  

Метка может дополнительно включать атрибуты SIZE (определяет толщину линии в  пикселах) и/или WIDTH (определяет размах линии в процентах от ширины экрана). В примере 4 приведена небольшая  коллекция горизонтальных линий.
<html>
<head>
<title>Пример 4</title>
</head>
<body>
<H1>Коллекция  горизонтальных линий</H1>
<HR SIZE=2 WIDTH=100%><BR>
<HR SIZE=4 WIDTH=50%><BR>
<HR SIZE=8 WIDTH=25%><BR>
<HR SIZE=16 WIDTH=12%><BR>
</body>
</html>

&-последовательности

Поскольку символы "<" и ">" воспринимаются браузерами как начало и конец HTML-меток, возникает вопрос: а как показать эти символы на экране? В HTML это делается с помощью &-последовательностей (их еще называют символьными объектами или эскейп-последовательностями). Браузер показывает на экране символ "<", когда встречает в тексте последовательность &lt; (по первым буквам английских слов less than — меньше, чем). Знак ">" кодируется последовательностью &gt; (по первым буквам английских слов greater than — больше, чем). Символ "&" (амперсанд) кодируется последовательностью &amp; Двойные кавычки (") кодируются последовательностью &quot; Помните: точка с запятой — обязательный элемент &-последовательности. Кроме того, все буквы, составляющие последовательность, должны быть в нижнем регистре (т.е., маленькие). Использование меток типа &QUOT; или &AMP; не допускается. Вообще говоря, &-последовательности определены для всех символов из второй половины ASCII-таблицы (куда, естественно, входят и русские буквы). Дело в том, что некоторые серверы не поддерживают восьмибитную передачу данных, и поэтому могут передавать символы с ASCII-кодами выше 127 только в виде &-последовательностей.

Комментарии

Браузеры  игнорируют любой текст, помещенный между <!-- и -->. Это удобно для размещения комментариев.
<!-- Это комментарий  -->

Форматирование  шрифта

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

Физические  стили

Под физическом стилем принято понимать прямое указание браузеру на модификацию текущего шрифта. Например, все, что находится между метками <B> и </B>, будет написано жирным шрифтом. Текст между метками <I> и </I> будет написан наклонным шрифтом. Несколько особняком стоит пара меток <TT> и </TT>. Текст, размещенный между этими метками, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа.

Логические  стили

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

<EM> ... </EM>

От английского emphasis — акцент.

<STRONG> ... </STRONG>

От английского strong emphasis — сильный акцент.

<CODE> ... </CODE>

Рекомендуется использовать для фрагментов исходных текстов.

<SAMP> ... </SAMP>

От английского sample — образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами.

<KBD> ... </KBD>

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

<VAR> ... </VAR>

От английского variable — переменная. Рекомендуется  использовать для написания имен переменных.

Пример

Подытожим наши знания о логических и физических стилях с помощью примера 5. Заодно Вы сможете увидеть, как Ваш браузер  показывает те или иные логические стили.
<html>
<head>
<title>Пример 5</title>
</head>
<body>
<H1>Шрифтовое  выделение фрагментов текста</H1>
<P>Теперь  мы знаем, что фрагменты текста  можно выделять 
<B>жирным</B> или <I>наклонным</I> шрифтом.  Кроме того, можно 
включать в текст фрагменты с фиксированной шириной символа
<TT>(имитация  пишущей машинки)</TT></P>
<P>Кроме того, существует ряд логических стилей:</P>
<P><EM>EM - от  английского emphasis - акцент </EM><BR>
<STRONG>STRONG - от английского strong emphasis - сильный акцент </STRONG><BR>
<CODE>CODE - для  фрагментов исходных текстов</CODE><BR>
<SAMP>SAMP - от  английского sample - образец </SAMP><BR>
<KBD>KBD - от  английского keyboard - клавиатура</KBD><BR>
<VAR>VAR - от  английского variable - переменная </VAR></P>
</body>
</html>

Создание  внешних и внутренних ссылок (связывание). /данный раздел наиболее тесно  связан с заданием лабораторной работы/

Как уже  упоминалось в самом начале, сокращение HTML означает "язык маркировки гипертекстов". Прежде всего, что же такое гипертекст? В отличие от обыкновенного текста, который можно читать только от начала к концу, гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Системы помощи многих популярных программных продуктов устроены именно по гипертекстовому принципу. При нажатии левой кнопкой мыши на некоторый выделенный фрагмент текущего документа происходит переход к некоторому заранее назначенному документу или фрагменту документа. В HTML переход от одного фрагмента текста к другому задается с помощью метки вида:
<A HREF="[адрес  перехода]">выделенный фрагмент  текста</A>
В качестве параметра [адрес перехода] может  использоваться несколько типов  аргументов. Самое простое — это  задать имя другого HTML-документа, к  которому нужно перейти. Например:
<A HREF="pr.htm">Перейти  к оглавлению</A>
Такой фрагмент HTML-текста приведет к появлению  в документе выделенного фрагмента Перейти к оглавлению, при нажатии на который в текущее окно будет загружен документ pr.htm. Обратите внимание: если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога. Если в адресе перехода не указан сервер, переход будет выполнен на текущем сервере. Из этого следует одно очень важное практическое соображение. Если Вы подготовили к публикации некоторую группу HTML-документов, которые ссылаются друг на друга только по имени файла и находятся в одном каталоге на Вашем компьютере, вся эта группа документов будет работать точно так же, если ее поместить в любой другой каталог на любом другом компьютере, на локальной сети или... в Интернет! Таким образом, у Вас появляется возможность разрабатывать целые коллекции документов без подключения к Интернет, и только после окончательной готовности, подтвержденной испытаниями, помещать коллекции документов на Интернет целиком. На практике, однако, часто бывает необходимо дать ссылку на документ, находящийся на другом сервере. Например, если Вы хотите дать ссылку на это руководство со своей странички, Вам придется ввести в свой HTML-документ примерно такой фрагмент:
<A HREF="KSU.com/home/pr.htm">ПРИМЕР</A>
При необходимости  можно задать переход не просто к  некоторому документу, но и к определенному  месту внутри этого документа. Для  этого необходимо создать в документе, к которому будет задан переход, некоторую опорную точку, или анкер. Разберем это на примере. Допустим, что необходимо осуществить переход из файла 1.htm к словам "Переход закончен" в файле 2.htm (файлы находятся в одном каталоге). Прежде всего, необходимо создать вот такой анкер в файле 2.htm:
<A NAME="AAA">Переход  закончен</A>
Слова "Переход закончен" при этом никак не будут выделены в тексте документа. Затем в файле 1.htm (или  в любом другом) можно определить переход на этот анкер:
<A HREF="2.htm#AAA">Переход  к анкеру AAA</A>
Кстати  говоря, переход к этому анкеру можно определить и внутри самого документа 2.htm — достаточно только включить в него вот такой фрагмент:
<A HREF="#AAA">Переход  к анкеру AAA</A>
На практике это очень удобно при создании больших документов. В начале документа можно поместить оглавление, состоящее из ссылок на анкеры, расположенные в заголовках разделов документа. Во избежание недоразумений рекомендуется задавать имена анкеров латинскими буквами. Следите за написанием имен анкеров: большинство браузеров отличают большие буквы от маленьких. Если имя анкера определено как AAA, ссылка на анкер aaa или AaA не выведет Вас на анкер AAA, хотя документ, скорее всего, будет загружен корректно. Пока что мы обсуждали только ссылки на HTML-документы. Однако возможны ссылки и на другие виды ресурсов:
<A HREF="ftp://server/directory/file.ext">Выгрузить файл</A>
Такая ссылка, если ей воспользоваться, запустит протокол передачи файлов и начнет выгрузку файла file.ext, находящегося в каталоге directory на сервере server, на локальный диск пользователя.
<A HREF="mailto:user@mail.box">Послать письмо</A>
Если  пользователь совершит переход по такой  ссылке, у него на экране откроется  окно ввода исходящего сообщения  его почтовой программы. В строке To: ("Куда") окна почтовой программы будет указано user@mail.box. Разберем все, что мы знаем о связывании, с помощью примера :
<HTML>
<HEAD>
<TITLE>Пример</TITLE>
</HEAD>
<BODY>
<H1>Связывание </H1>
<P>С  помощью ссылок можно переходить к другим файлам
(например, к <A HREF="pr.htm">оглавлению этого 
руководства</A>).</P>
<P>Можно  выгружать файлы (например,
<A HREF="ftp://KSU.com/home/html-pr.doc">это
файл</A>) по FTP.</P>
<P>Можно  дать пользователю возможность  послать почту (например,
<A HREF="mailto:a@ksu.com">послать письмо</A>).</P>
</BODY>
</HTML>

Изображения в HTML-документе

Встроить  изображение в HTML-документ очень  просто. Для этого нужно только иметь это самое изображение  в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg) и одну строчку в HTML-тексте. Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif, находящийся в одном каталоге с HTML-документом. Тогда строчка будет вот такая:
<IMG SRC="picture.gif">
Метка <IMG SRC="[имя файла]"> может  также включать атрибут ALT="[текст]", например:
<IMG SRC="picture.gif" ALT="Картинка">
Встретив  такую метку, браузер покажет  на экране текст Картинка и начнет загружать на его место картинку из файла picture.gif. Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении к Интернет это делается для экономии времени). Файл, содержаций изображение, может находиться в другом каталоге или даже на другом сервере. В этом случае стоит указать его полное имя. Разберем все, что мы знаем об изображениях, с помощью примера
<HTML>
<HEAD>
<TITLE>Пример</TITLE>
</HEAD>
<BODY>
<H1>Изображения  </H1>
<P>Изображение  можно встроить очень просто: </P>
<P><IMG SRC="picture.gif"></P>
<P>Кроме того, изображение можно сделать "горячим", то есть 
осуществлять  переход при нажатии на изображение:</P>
<P><A HREF="pr.htm"><IMG SRC="picture.gif"></A></P>
</BODY>
</HTML>
Обратите  внимание на вторую часть примера. Если ссылка на изображение находится  между метками <A HREF="..."> и </A>, изображение фактически становится кнопкой, при нажатии на которую  происходит переход по ссылке.
При подготовке лабораторной работы использовалась литература:
1.Гультяев  А.К.,Машин В.А.Уроки WEB-мастера.Технология  и инструменты:Практическое пособие.-СПб.:КОРОНА  принт,2001.
2.Торрес  Роберт Дж. Практическое руководство  по проектированию и разработке  пользовательского интерфейса.Пер с англ. –М.: Издательский дом “Вильямс”,2002.
 

Лабораторная  работа N 3

Тема: «Компоненты пользовательского интерфейса на основе WUI (Web user interface)»

Цель: Отработать навыки создания в HTML-документе компонентов, позволяющих создавать интерактивное взаимодействие пользователя с WWW-сервером (HTTP - сервер).
Программное обеспечение: стандартное (HTML-броузер).
Пояснения: Компоненты пользовательского интерфейса на основе WUI обеспечивают взаимодействие пользователя в сетевых программных приложениях (например в Интернет).К одной из важнейших функций WEB-страниц (при наличии объектов WUI), помимо непосредственного отображения информации для пользователей, относится возможность посылать на WEB - узел определенные данные и производить их обработку на сервере. Для этих целей в код страницы включаются специальные тэги, определяющие в HTML - странице специальные объекты-формы, с помощью которых можно создавать интерактивный интерфейс.
При создании формы ее содержимое заключается  между тегами <FORM></FORM>. После открывающегося тега <FORM>, может быть указан сценарий или программа, которая будет обрабатывать запрос. Это определяется с помощью атрибута ACTION.
Например:
<FORM ACTION="/cgi-bin/primer.pl"> -для CGI
<FORM ACTION="/primer.php">
С помощью  атрибутов METHOD определяется способ передачи данных на сервер.
Например:
<FORM ACTION="/cgi-bin/primer.pl" METHOD = "POST" >
<FORM ACTION="/primer.php" METHOD = "GET" >
При использовании  метода GET информация из формы добавляется  в конец URL, который был указан в описании заголовка формы. CGI-программа (CGI-скрипт) получает данные из формы в виде параметра переменной среды QUERY_STRING. При POST вся информация о форме передается после обращения к указанному URL и CGI-программа получает данные из формы в стандартный поток ввода (STDIN). Сервер не пересылает сообщение об окончании пересылки данных. Вместо этого, используется переменная окружения CONTENT_LENGTH для определения количества переданных данных. Данные считываются из стандартного потока ввода.(Программный интерфейс взаимодействия по протоколу HTTP броузер-сервер будет рассмотрен более подробно в последующих лабораторных работах,рекомендуется разработанные по этому заданию программы сохранить для дальнейшего использования)
Когда пользователь заполняет форму и активизирует кнопку SUBMIT - специальный тип кнопки, информация, введенная пользователем в форму, посылается HTTP-серверу для обработки. Рассмотрим элементы формы, обеспечивающие ввод данных и отправку их на сервер. Основные элементы формы определяются атрибутами шести типов:
    Кнопки
    Однострочное текстовое поле
    Текстовые блоки
    Меню
    Флажки
    Переключатели
Кнопка Submit (Отправить) используется для передачи всех вводимых данных из полей формы.
    <INPUT TYPE = "SUBMIT" VALUE = "SUBMIT" NAME = "SUBMIT">
Кнопка RESET (Сброс) используется для очистки  полей формы.
    <INPUT TYPE = "RESET" VALUE = "RESET" NAME = "RESET">
Здесь VALUE - надпись на кнопках , NAME - имя, которое  передается сценарию.

Вид кнопок в  броузере
Однострочное  текстовое поле.
Пример.
<INPUT TYPE = "TEXT" NAME = "NAME" VALUE = "TEXT"
SIZE = "20" MAXLENGTH = "30" >

Вид в броузере
Здесь атрибут TYPE = "TEXT" - указывает броузеру, что это однострочное текстовое  поле; VALUE - может содержать некоторый  текст в поле ввода ; NAME - имя, которое передается сценарию в качестве уникального идентификатора; MAXLENGTH - указывает максимальное число символов, которое можно вводить в текстовое поле; SIZE - устанавливает значение ширины поля в символах. Если TYPE = "PASSWORD" все вводимые данные отображаются в виде звездочек.

Вид в броузере
Если TYPE = "HIDDEN", поле данного типа не отображается броузером и не дает пользователю возможность изменять присвоенные данному полю значение. Это поле используется для передачи в CGI-программу статической информации, например пароля или другой информации.
Текстовые блоки. Прокручиваемое текстовое поле.
<TEXTAREA NAME = "INFORMATION" ROWS = "4" COLS = "30" WRAP = "virtual">текст в поле ввода</ TEXTAREA >  

Вид в броузере
Здесь NAME - имя, которое передается сценарию в качестве уникального идентификатора; ROWS - определяет значение высоты поля в  виде количества строк, которые будут  отображаться на экране одновременно (до приведения в действие механизма  строк). COLS - определяет ширину поля в символах. WRAP = " virtual ", в этом случае текст будет заполнятся построчно. По достижении предельного значения длины строки, указанной атрибутом COLS, текст будет переходить на новую строку автоматически. Переход на новую строку возможен также с помощью клавиши "ENTER". Наличие символов между тегами <TEXTAREA ></ TEXTAREA > указывает, что в прокручиваемом поле имеется заранее введенный текст.
Меню. Данный вид поля формы отображается в виде однострочного поля с небольшой стрелкой в правой части. Если щелкнуть по стрелке, развернется все меню (пример 1).
Пример 1.
<SELECT NAME = "NAME" SIZE = "1">
<OPTION SELECTED VALUE = "Pentium3">Компьютеры</OPTION>
<OPTION VALUE = "Pentium2"> Pentium2</OPTION>
<OPTION VALUE = "Pentium3"> Pentium3</OPTION>
<OPTION VALUE = "Pentium4"> Pentium4</OPTION>
<OPTION VALUE = "Atlon"> Atlon</OPTION>
</ SELECT >

Вид в броузере
Пример 2 (применение атрибута MULTIPLE).
<SELECT NAME = "NAME" SIZE = "5" MULTIPLE>
<OPTION SELECTED VALUE = "Pentium3">Компьютеры</OPTION>
<OPTION VALUE = "Pentium2"> Pentium2</OPTION>
<OPTION VALUE = "Pentium3"> Pentium3</OPTION>
<OPTION VALUE = "Pentium4"> Pentium4</OPTION>
<OPTION VALUE = "Atlon"> Atlon</OPTION>
</ SELECT >

Вид в броузере
Здесь атрибут SELECT указывает броузеру, что следует создать окно меню, атрибут NAME используется в качестве идентификатора данного поля ввода данных, атрибут SIZE указывает сколько будет отображаться строк сначала. Тег OPTION используется для объявления каждой опции, которую необходимо поместить в меню. Атрибуту VALUE присваивается идентификатор для конкретного варианта опции. Атрибут MULTIPLE разрешает выбрать более одной опции меню.
Флажки. Данный тип элементов формы позволяет  пользователю выделить несколько опций в наборе флажков.
Пример.
<INPUT TYPE = "CHECKBOX" NAME = "CHECKBOX_1" VALUE = "ON">обычный флажок <BR>
<INPUT TYPE = "CHECKBOX" NAME = "CHECKBOX_2" VALUE = "ON" CHECKED>выделенный флажок <BR>
<INPUT TYPE = "CHECKBOX" NAME = "CHECKBOX_3" VALUE = "ON" DISABLED>выключенный флажок
Вид в броузере
Здесь TYPE = "CHECKBOX" определяет тип элемента формы. Атрибут NAME используется в качестве уникального идентификатора при передаче данной информации сценарию. Если указан атрибут CHECKED для поля INPUT, то он будет иметь статус выбранного. Если указан атрибут DISABLED для поля INPUT, то пользователь не может установить этот флажок. VALUE = "ON" назначается переменной определенной в NAME и затем передается сценарию.
Переключатели. Этот тип элементов формы позволяет пользователю выбрать только одну опцию из предлагаемого набора.
Пример.
<INPUT TYPE = "RADIO" VALUE = "FALSE" NAME = "CHECK" CHECKED>выбран<BR>
<INPUT TYPE = "RADIO" VALUE = "TRUE" NAME = "CHECK">невыбран <BR>
<INPUT TYPE = "RADIO" VALUE = "TRUE" NAME = "CHECK" DISABLED>недоступен
  

Вид в броузере
Здесь TYPE = "RADIO" определяет тип элемента формы. Атрибут NAME используется в качестве уникального идентификатора при  передаче данной информации сценарию. Переключатель автоматически устанавливается, если указан атрибут CHECKED. Если указан атрибут DISABLED для поля INPUT, то пользователь не может установить этот переключатель. Значение в VALUE назначается переменной определенной в NAME и затем передается сценарию.
Задание
1. Составить код HTML-страницы с включением тегов FORM со всеми компонентами, которые формируют интерактивный интерфейс пользователя с программным приложением.
2. Составить  код HTML-страницы с определенной  смысловой нагрузкой, выбрать  компоненты форм, определяющие вводимую информацию.
Примечание: Посылка данных и запросов на сервер в этой работе не предусматривается.
 

Лабораторная  работа № 4 

Тема: «Состав  интерфейса программ, разработанных в
среде визуального программирования»  

Цель  работы:  Изучение элементов интерфейса.   

Краткие теоретические сведения  

Элементы  управления  

Начать  разговор об элементах управления удобно с самого простого, а именно с  кнопок.
Кнопки
Кнопкой называется элемент управления, всё  взаимодействие пользователя с которым  ограничивается одним действием – нажатием. Эта формулировка, кажущаяся бесполезной и примитивной, на самом деле очень важна, поскольку переводит в гордое звание кнопок многие элементы управления, которые как кнопки по большей части не воспринимаются.
Нажатие на  кнопку запускает какое-либо явное действие, поэтому правильнее называть такие кнопки «кнопками прямого действия». С другой стороны, из-за тяжеловесности этого словосочетания им всегда пренебрегают.   


Рис. 1. Всё  это командные кнопки, они же кнопки прямого действия (включая гипертекстовую ссылку справа).  

Чекбоксы  и радиокнопки
Первое, что необходимо сказать про чекбоксы и радиокнопки, это то, что они  являются кнопками отложенного действия, т. е. их нажатие не должно инициировать какое-либо немедленное действие. С их помощью пользователи вводят параметры, которые скажутся после, когда действие будет запущено иными элементами управления. Нарушать это правило опасно, поскольку это серьезно нарушит сложившуюся ментальную модель пользователей. В этом заключается общность чекбоксов и радиокнопок. Теперь поговорим о различиях. Главное различие заключается в том, что группа чекбоксов даёт возможность пользователям выбрать любую комбинацию параметров, радиокнопки же позволяют выбрать только один параметр. Это сближает эти элементы со списками множественного и единственного выбора соответственно.  


Рис. 2. Пример радиокнопок и чекбоксов.  

Из этого  различия проистекают все остальные. Например, в группе не может быть меньше двух радиокнопок (как можно  выбрать что-либо одно из чего-либо одного?). Еще одно следствие заключается в том, что у чекбокса есть три состояния (выбранное, не выбранное, смешанное), а у радиокнопки только два, поскольку смешанного состояния у неё быть просто не может (нельзя совместить взаимоисключающие параметры). Но это было знание вообще. Теперь перейдем к алгоритму его использования. В группе радиокнопок как минимум одна радиокнопка должна быть проставлена по умолчанию. Всякий раз, когда пользователю нужно предоставить выбор между несколькими параметрами, можно использовать либо чекбоксы, либо радиокнопки (или списки, но о них позже). Если параметров больше двух, выбор прост: если параметры можно комбинировать, нужно использовать чекбоксы (например, текст может быть одновременно и жирным и курсивным); если же параметры комбинировать нельзя, нужно использовать радиокнопки (например, текст может быть выровнен или по левому, или по правому краю). Если же параметров всего два и при этом параметры невозможно комбинировать (т. е. либо ДА, либо НЕТ), решение более сложно. Дело в том, что группу из двух радиокнопок часто можно заменить одним чекбоксом.  

Пиктограммы
Уже довольно давно в ПО нет технических  проблем с выводом в списках  пиктограмм отдельных элементов. Однако практически никто этого не делает. Это плохо, ведь пиктограммы обеспечивают существенное повышение субъективной привлекательности интерфейса и сканируются быстрее «голого» текста.  

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

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


Рис. 3. Список единственного выбора. Обратите внимание, что в ситуациях, когда все
элементы  помещаются в список без пролистывания, список работает в точности как
группа  радиокнопок.  

Списки  множественного выбора
С точки  зрения дизайна интерфейсов, списки множественного выбора интересны, прежде всего, тем, что их фактически нет в Интернете. Технически создать список множественного выбора непроблематично, для этого в HTML есть даже специальный тег.
Проблема  в том, что такой список в браузере будет выглядеть как список единственного выбора, более того, чтобы выбрать несколько элементов пользователю придется удерживать клавишу Ctrl. Это значит, что воспользоваться таким списком сможет только малая часть аудитории (и даже наличие подсказки у списка положения не исправит). Из-за такой убогой реализации списков браузерами, использовать их, как правило, оказывается невозможно. Приходится использовать чекбоксы.  


Рис. 4. Список множественного выбора с чекбоксами.   

Комбобоксы
Комбобоксами (combo box), называются гибриды списка с полем ввода: пользователь может выбрать существующий элемент, либо ввести свой.
Комбобоксы  бывают двух видов: раскрывающиеся и  расширенные. Оба типа имеют проблемы.   


Рис. 5. Раскрывающийся комбобокс с установленным фокусом  ввода (слева)
и расширенный  комбобокс (справа).  

У раскрывающегося  комбобокса есть проблемы. Во-первых, такие  комбобоксы выглядят в точности как  раскрывающиеся списки, визуально отличаясь  от них только наличием индикатора фокуса ввода (да и то, только тогда, когда элемент выделен). Это значит, что полноценно пользоваться ими могут только сравнительно продвинутые пользователи. В этом нет особой проблемы, поскольку комбобоксом все равно можно пользоваться, как обычным списком. Во-вторых, что гораздо хуже, раскрывающиеся комбобоксы отсутствуют в интернете как класс. Поддержки их нет ни в браузерах, ни в HTML.
Проблемы  расширенных комбобоксов, напротив, совершенно иные. Их с трудом, но можно  реализовать в интернете (через JavaScript). Они имеют уникальный вид, отличающий их от остальных элементов управления. Зато их сравнительно трудно (хотя и гораздо легче, чем в Интернете) реализовать в ПО. При этом расширенный комбобокс потребляет много места на экране.  

Крутилки 
Крутилка (spinner, little arrow) есть поле ввода, не такое  универсальное, как обычное, поскольку не позволяет вводить текстовые данные, но зато обладающее двумя полезными возможностями.   


Рис. 6. Крутилка   

Во-первых, чтобы ввести значение в крутилку, пользователю не обязательно бросать  мышь и переносить руку на клавиатуру (в отличие от обычного поля ввода). Поскольку перенос руки с место на место занимает сравнительно большое время (в среднем почти половину секунды, к тому же ещё и сбивает фокус внимания, отсутствие нужды в клавиатуре оказывается большим благом. Во всяком случае, ввод значения в крутилку с клавиатуры достаточно редок, т. е. пользователи воспринимают крутилки целиком и полностью положительно. Во-вторых, при вводе значения мышью система может позволить пользователям вводить только корректные данные, причем, что особенно ценно, в корректном формате. Это резко уменьшает вероятность человеческой ошибки. Таким образом, использование крутилок для ввода любых численных значений более чем оправдано.
К сожалению, в интернете нет специального элемента для крутилки. Сделать элемент, похожий на крутилку, можно без труда, создав список множественного выбора высотой в один элемент, но ввод в него с клавиатуры будет невозможен. К счастью, крутилку можно с относительно небольшими затратами сделать в Macromedia Flash.  

Ползунки
Как и  ранее описанные элементы управления, ползунки позволяют пользователям  выбирать значение из списка, не позволяя вводить произвольное значение. Возникает  резонный вопрос: зачем нужен ещё  один элемент управления, если аналогичных  элементов уже полно. Ответ прост: ползунки незаменимы, если пользователям надо дать возможность выбрать значение, стоящее в хорошо ранжирующемся ряду, если:
¦ значений в ряду много (см. рис. 7)
¦ нужно  передать пользователям ранжируемость  значений.

Рис. 7. Примеры  ползунков. Видно, что количество параметров в ползунке может быть весьма значительным.
¦ необходимо дать возможность пользователям  быстро выбрать значение из большого их количества (в таких случаях  ползунок оказывается самым эффективным  элементом, хотя и опасен возможными человеческими ошибками).
Ползунки  имеют интересный аспект. Их можно  также использовать для выбора текстовых  параметров, но только в случаях, когда  эти параметры можно понятным образом отранжировать. Случаев  таких немало, например, «завтрак», «обед» и «ужин», при отсутствии внешней связи ранжированию поддаются вполне.   

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


Рис. 8. Стандартное  раскрывающееся меню.  

Соответственно, диалоговое окно с несколькими кнопками (и без единого поля ввода) также является меню.  


Рис. 9. Это  тоже меню.
В настоящее  время систем, которые не использовали бы меню в том или ином виде, практически  не осталось. Объясняется это просто. Меню позволяет снизить нагрузку на мозги пользователей, поскольку для выбора команды не надо вспоминать, какая именно команда нужна и как именно её нужно использовать – вся (или почти вся) нужная информация уже содержится на экране. Вдобавок, поскольку меню ограничивает диапазон действий пользователей, появляется возможность в значительной мере изъять из этого диапазона ошибочные действия. Более того: меню показывает пользователям объем действий, которые они могут совершить благодаря системе, и тем самым обучают пользователей (в одном из исследований было даже обнаружено, что меню является самым эффективным средством обучения). Таким образом, в большинстве систем меню является объективным благом (они неэффективны, в основном, в системах с внешней средой или течением времени).  

Типы  меню
Существуют  несколько различных таксономий меню, но основной интерес представляют только две из них. Первая таксономия делит меню на два типа:
¦ Статические  меню, т. е. меню, постоянно присутствующие на экране. Характерным примером такого типа меню является панель инструментов.
¦ Динамические меню, в которых пользователь должен вызвать меню, чтобы выбрать какой-либо элемент. Примером является обычное  контекстное меню.
В некоторых  ситуациях эти два типа меню могут  сливаться в один, могут работать и как статические (пользователи нажимают на кнопки) и как динамические (пользователи вызывают меню).
Вторая  таксономия также делит меню на два  типа:
¦ Меню, разворачивающиеся в пространстве (например, обычное раскрывающееся меню). Всякий раз, когда пользователь выбирает элемент нижнего уровня, верхние элементы остаются видимыми.
¦ Меню, разворачивающееся во времени. При  использовании таких меню элементы верхнего уровня (или, понимая шире, уже пройденные элементы) по тем  или иным причинам исчезают с экрана.
Каждый  тип меню в обеих таксономиях имеет определенные недостатки. Статические меню из первой таксономии, как правило, обеспечивают высокую скорость работы, лучше обучают пользователей, но зато занимают место на экране. С динамическими меню ситуация обратная. Во второй таксономии первый тип (меню, разворачивающиеся в пространстве) обеспечивает большую поддержку контекста действий пользователей, но эта поддержка обходится в потерю экранного пространства. Второй тип более бережно использует пространство, но зато хуже поддерживает контекст.
Поэтому очень полезно научиться анализировать  влияние и взаимопроникновение  разных типов меню, а также осознавать их место в интерфейсе. Например, контекстное меню на ином уровне абстракции оказывается временным (т. е. динамическим) диалоговым окном, только с нестандартной структурой. Понимание этой структуры позволяет определить, какие элементы управления, помимо кнопок, можно использовать в таком меню, чтобы оно обрело как достоинства меню, так и достоинства диалогового окна. К сожалению, объем этой книги не позволяет более полно описать эту тему. Поэтому в этом разделе будут описаны только главные и контекстные меню.  

Устройство  меню
На эффективность  меню наибольшее влияние оказывают  устройство отдельных элементов  и их группировка. Несколько менее  важны другие факторы, такие как выделение элементов и стандартность меню.
Устройство  отдельных элементов. Самым важным свойством хорошего элемента меню является его название. Название должно быть самым эффективным из возможного. В отличие от кнопок в диалоговых окнах, элементы главного меню практически никогда не несут на себе контекста действий пользователя, просто потому, что в любой момент времени доступны все элементы. Это значит, что к наименованию элементов меню нужно подходить весьма тщательно, тщательней, нежели ко всему остальному. Впрочем, помимо тщательности (и таланта, к слову говоря) нужно ещё
кое-что. Обязательно нужно убедиться, что  выбранное название понятно целевой  аудитории. Сделать это просто –  пользователю нужно сообщить название элемента и попросить его сказать, что этот элемент меню делает.
Нелишне заметить, что функциональность, не отраженная названием элемента, с  большой степенью вероятности не будет найдена значительной частью аудитории. Поэтому не стоит умещать  в диалоговое окно какую-либо функцию, если её существование в этом окне невозможно предсказать,
глядя на соответствующий элемент меню.
Не делайте  элементов меню, часть функциональности которых не влезает в текст  элемента. Особо стоит остановиться на склонении текста. В отличие  от диалоговых окон, в которых кнопки прямого и отложенного действия выглядят и действуют по-разному, в меню нет четкой разницы между этими элементами. Единственным способом разграничения этих элементов является текст, так что нужно очень тщательно подходить к тому, чтобы элементы, запускающие действия, были глаголами в форме инфинитива (как командные кнопки). Впрочем, часто глагол приходится выкидывать вообще, чтобы переместить значимое слово ближе в начало текст элемента. Нужно это, чтобы повысить скорость распознавания. Повысить её можно всего одним способом: главное (т. е. наиболее значимое) слово в элементе должно стоять в элементе первым. Обратите внимание, что короткий текст элемента, без сомнения, быстро читаясь, совершенно необязательно быстро распознается. Поэтому не стоит безудержно сокращать текст элемента: выкидывать нужно все лишнее, но не более.   

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

Переключаемые элементы
Особого внимания заслуживают случаи, когда  меню переключает какие-либо взаимоисключающие  параметры, например, показывать или  не показывать палитру. Тут есть несколько возможных способов. Можно поместить перед переключателем галочку, показывая, что он включен (если же элемент снабжен пиктограммой, можно её утапливать). Заранее скажу, что это лучший метод. Можно не помещать галочку, зато инвертировать текст элемента: например, элемент Показывать сетку превращается в Не показывать сетку. Это плохо по многим причинам. Во-первых, в интерфейсе желательно не употреблять ничего негативного: в меньшей степени потому, что негативность слегка снижает субъективное удовлетворение; в большей степени потому, что она снижает скорость распознавания текста (главное слово не первое, нужно совершить работу, чтобы из отрицания вычислить утверждение). Во-вторых, если изъять «не» и переформулировать одно из состояний элемента, пользователям будет труднее осознать, что два разных элемента на самом деле есть один элемент. Таким образом, галочка предпочтительнее. Всегда формулируйте текст в интерфейсе без использования отрицаний.  

Предсказуемость действия
Пользователей нужно снабжать чувством контроля над системой. Применительно к меню это значит, что по виду элемента пользователи должны догадываться, что произойдет после выбора. Сделать это неимоверно трудно, поскольку на экране нет места под такие подсказки. Можно сделать только одно, но сделать это нужно обязательно: нужно показать пользователям, какой элемент запускает действие или меняет параметр, а какой открывает окно c продолжением диалога. Почти во всех ОС стандартным индикатором продолжения диалога является многоточие после текста элемента, так что пользоваться этим признаком стоит везде, включая Интернет. Также необходимо показывать, какой элемент срабатывает сразу, а какой открывает элементы меню нижнего уровня (в любой ОС это делается автоматически, в Интернете нужно не забывать делать это вручную).
Это же правило касается и гипертекстовых ссылок вообще (они тоже меню). Пользователи испытывают значительно большее  чувство контроля, когда имеют  возможность предсказать, куда их ссылка приведет (при этом снижается количество ошибочных переходов). Таким образом, нестандартные ссылки (т. е. ссылки на другой сайт, на почтовый адрес, на файл, на узел FTP, на долго загружающуюся страницу и т.д.) полезно снабжать характерными для них признаками, например, ссылку на почтовый адрес пиктограммой письма.  

Группировка элементов
Второй  составляющей качества меню является группировка его элементов. В  большинстве меню группировка оказывает  не меньшее значение при поиске нужного  элемента, нежели само название элемента, просто потому, что даже идеальное название не сработает, если элемент просто нельзя найти. Чтобы уметь эффективно группировать элементы в меню, нужно знать ответы на три вопроса: зачем элементы в меню нужно группировать, как группировать элементы и как разделять группы между собой.  

Зачем элементы в меню нужно  группировать. Меню, группы элементов в котором разделены, сканируется значительно быстрее обычного, поскольку в таком меню больше «точек привязки» (так же, как и в меню с пиктограммами). К тому же наличие явных разделителей многократно облегчает построение ментальной модели, поскольку не приходится гадать, как связаны между собой элементы. Наконец, в объемных меню группировка элементов облегчает создание кластеров в кратковременной памяти, благодаря чему всё меню удается пометить в КВП. По этой же причине не рекомендуется что-либо делать со строкой статуса, в Интернете это практически единственный способ узнать, куда приведет ссылка, не идя по ней.  

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

Как разделять группы между собой. Существует два основных способа разделять группы: между группами можно помещать пустой элемент (разделитель) или же размещать отдельные группы в разных уровнях иерархии. Второй способ создает более четкое разделение: в меню Файл, например все элементы более близки друг другу (несмотря на разделители), чем элементы других меню. В то же время выбор конкретного способа диктуется результатами карточной сортировки, так что интерес представляет только вопрос «как должны выглядеть и действовать разделители».
Для разграничения  групп традиционно используют полоски. Это надежное, простое решение, другой разговор, что с дизайнерской точки зрения полоски плохи, поскольку представляют собой визуальный шум. Гораздо правильнее, но и труднее, использовать только визуальные паузы между группами, как это сделано, например, в MacOS X.  

Глубина меню. Наличие многих уровней вложенности в меню приводит к там называемым «каскадным ошибкам»: выбор неправильного элемента верхнего уровня неизбежно приводит к тому, что все следующие элементы также выбираются неправильно. При этом широкие меню больше нравятся пользователям. Поэтому большинство разработчиков интерфейсов стараются создавать широкие, а не глубокие меню.
К сожалению, у широких меню есть недостаток: они занимают много места. Это  значит, что, начиная с определенного  количества элементов, меню физически  не сможет оставаться широким, оно начнет расти в глубину. Возникает проблема, которую надо решать. Итак, проблема заключается в том, что велика вероятность каскадных ошибок. Чтобы снизить их число, нужно повысить вероятность того, что пользователи будут правильно выбирать элементы верхних уровней. Чтобы повысить эту вероятность, нужно заранее снабдить пользователей контекстом.
При перемещении  по меню пользователь действует по определенному алгоритму:
1 Выбирая  элемент первого уровня, он выбирает  элемент, «нужность» которого кажется ему максимальной.
2 После  выбора он видит список элементов  второго уровня, при этом он  оценивает вероятность соответствия  всех элементов второго уровня  его задаче и выбирает наиболее  вероятный элемент. При этом  в уме он держит контекст, т. е. название элемента первого уровня.
3 Если  ни один из элементов не  кажется пользователю достаточно  вероятным, пользователь возвращается  на первый уровень.
4 Если  какой-то элемент удовлетворяет  пользователя, он выбирает его  и получает список элементов третьего уровня. Действия из второго и третьего шагов повторяются с новыми элементами меню.
Видно, что действия пользователя при поиске нужного элемента отчетливо цикличны, при этом на каждом шаге есть вероятность  ошибок. С каждым новым уровнем  меню объем контекста, который приходится держать в голове, непрерывно возрастает. При этом, если пользователь всё-таки не находит нужного элемента, весь этот контекст оказывается ненужным. Хранение же контекста, даже не засчитывая усилия, затрачиваемые на выбор элемента, есть довольно существенная работа. Её объем лучше уменьшить.
и т.д.................


Перейти к полному тексту работы


Скачать работу с онлайн повышением уникальности до 90% по antiplagiat.ru, etxt.ru или advego.ru


Смотреть полный текст работы бесплатно


Смотреть похожие работы


* Примечание. Уникальность работы указана на дату публикации, текущее значение может отличаться от указанного.