Некоммерческое акционерное общество

АЛМАТИНСКИЙ УНИВЕРСИТЕТ ЭНЕРГЕТИКИ И СВЯЗИ

Кафедра компьютерных технологий 

 

 

 

ИНТЕРФЕЙСЫ КОМПЬЮТЕРНЫХ СИСТЕМ 

Методические указания к выполнению лабораторных работ для студентов

всех форм обучения специальности 5В070400 – Вычислительная техника и программное обеспечение (часть 1)

 

 

Алматы 2011

СОСТАВИТЕЛИ: Мусатаева Г.Т., Конуспаева А.Т., Байжанова Д.О. Интерфейсы компьютерных систем. Методические указания к выполнению лабораторных работ для студентов всех форм обучения специальности 5В070400 – Вычислительная техника и программное обеспечение (часть 1). - Алматы: АУЭС, 2011. - 24 с.

 

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

Методические указания предназначены для студентов всех форм обучения специальности 5В070400 – Вычислительная техника и программное обеспечение.

Библиография – 6 названий. 

 

Рецензент: канд. физ.-мат. наук, доцент Б. М. Шайхин.

 

Печатается по плану издания некоммерческого акционерного общества «Алматинский университет энергетики и связи» на 2011 г. 

 

© НАО «Алматинский университет энергетики и связи», 2011 г.

 

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

 

Цель работы: изучение и приобретение навыков разработки директивно-диалоговых форм взаимодействия с программной системой на основе командных файлов.

 

Задания:

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

         1) вариант - с параметрами символами;

         2) вариант - с параметрами, использующие имена файлов;

         3) вариант - с использованием внешней команды “CHOICE” (директивно-диалоговая форма взаимодействия).

         4) вариант – с использованием нескольких параметров.

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

 

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

Неграфический пользовательский интерфейс командной  строки (Command Line Interface - CLI) предназначен для подготовленного пользователя, регулярно работающим с приложением. Пользователь взаимодействует с  приложением  с  помощью команд (директив), имеющих определенную жестко заданную внутреннюю структуру. Код  команды однозначно идентифицирует функцию приложения, исполняемую  по данной команде. Код  команды отражает название функции и записывается в виде слова на естественном языке, либо его сокращения или мнемокода. Команды дают  возможность опытному  пользователю  сразу  специфицировать необходимую функцию вместо того, чтобы отвечать на  серию  запросов системы.

В прикладной диалоговой системе можно выделить два функциональных компонента:

- собственно прикладную систему, с которой работает пользователь;

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

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

 

Методические указания к выполнению работы

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

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

Рассмотрим примеры таких файлов.

 

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)

 

Цель работы: изучение и приобретение навыков разработки пользовательского интерфейса на основе HUI (Hand User Interface).

 

Задания:

1) Спроектировать логически организованную группу гипертекстовых документов (HTML-файлов).

2) Реализовать систему ссылок внутри документов, представляющими пользователю удобную и интуитивно понятную навигацию по гипертексту.

3) Созданные файлы должны быть размещены на WEB-сервере (для отладки WEB-проектов использовать технологию «петли(loop back)», броузер и сервер размещаются на одном компьютере).

 

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

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

HUI-интерфейс обеспечивает некоторые возможности GUI-интерфейса, а именно пиктограммы, меню и аналогичное поведение указателя. В окне устройства одновременно отображается один объект. Общий стиль для HUI-интерфейса можно назвать SIMP-стилем (Screen - экран, Icon - пиктограмма, Menu - меню и Pointer - указатель). При этом обеспечиваются многие свойства GUI-интерфейса, некоторые из них приведены ниже:

а) Пиктограммы используются во многих PDA, их разрешающая способность изменяется в соответствии с типом устройства отображения. Как и в GUI-интерфейсе, пиктограммы применяются для представления объектов, дейст­вий и атрибутов.

б) Строка меню и сами меню отображаются по требованию и обладают обычным для таких компонентов поведением.

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

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

Основные проблемы проектирования HUI-ориентированных приложений это: а) упрощение требований к пользователю по вводу данных и взаимодействию и б) использование ограниченной области дисплея.

 

Методические указания к выполнению работы

Данная работа посвящена отработке навыков использования гиперссылок в документах в формате HTML. Гиперссылки являются компонентами пользовательского интерфейса в определенной степени учитывающие требования к проектированию «Hand User Interface».

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

- организацией логической связи между частями документа, которая устанавливается его создателем;

- интересами пользователя, который может пользоваться имеющимися ссылками в произвольном порядке.

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

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

 

Примеры:

1) Простейший  HTML-документ – это просто текстовый файл с расширением  ИМЯ.htm. Можно набрать следующий самый простой HTML-документ в блокноте:

<html>

<head>Лабораторная работа №

<title> Пример 1  </title>

</head>

<body>

<H1>

HelloWorld

</H1>

<P> Это простейший пример HTML-документа. </P>

<P>

               Этот *.htm-файл может быть одновременно открыт

               ив Notepad, ив Internet Explorer. Сохранив изменения в Notepad,

               просто нажмите кнопку Обновить в Internet Explorer,

               чтобы увидеть эти изменения реализованными в HTML-документе.

</P>

</body>

</html>

Теперь нужно этот текст сохранить на Рабочем столе  под именем, напри­мер, PROBA.HTM, далее его нужно закрыть. Для просмотра этого текста как в Интернете, нужно загрузить с рабочего стола снова файл PROBA. HTM.  Загру­зит­ся этот текст в броузере Internet Explorer.

Результат этого фрагмента HTML-программы на экране:

 

 

2) HTML-страница, создающая два фрейма, в общем случае может выглядеть следующим образом:

<html>

<frameset rows="50%,50%">

<frame src="1 файл.htm">

<frame src="2 файл.htm">

</frameset>

</html>

<html>

<frameset rows="50%,50%">

<frame src="dog.jpg">

<frame src="cat.jpg">

</frameset>

</html>

 

В результате будут созданы два фрейма. Вы можете заметить, что во фрейме <frameset> мы используем атрибут строк rows. Это означает, два наших фрейма будут расположены друг над другом. В верхний фрейм будет загружена HTML-страница 1файл.htm, а в нижнем фрейме разместится документ 2 файл.htm. Окончательно созданная структу­ра фреймов будет выглядеть следующим образом:

 

Рисунок 1 - Горизонтальные фреймы

 

Все рамки предполагаются прямоугольными. Установка атрибута rows определяет число рамок по горизонтали, а атрибут cols задает число рамок по вертикали. Таким образом, задается сетка рамок. Если атрибут rows не задан, каждая колонка занимает всю длину страницы. Если атрибут cols не задан, каждый ряд занимает всю ширину страницы. Если не заданы оба атрибута, на странице присутствует одна рамка, занимающая всю страницу.

HTML-страница, создающая три вертикальных фрейма выглядит следующим образом:

<frameset cols="33%,33%,*">

<frame src="1 фрейм-столбец.htm">

<frame src="2 фрейм-столбец.htm">

<frame src="3 фрейм-столбец.htm">

</frameset>

<frameset cols="33%,33%,* ">

<frame src="dog.jpg">

<frame src="animals/dog04.jpg">

<frame src="animals/dog05.jpg">

</frameset>

 

 

 

 

 

 

 

 

 

Рисунок 2 - Вертикальные фреймы

         3) Соответствующий серверный сценарий

 

<html>

<head>

<title>НОВОСТИ</title>

<style type="text/css">P.just{text-align: justify;}</style>

</head>

<body bgcolor='#00007b' text="white">

<center><h2>HOBOCTИ</h2></center><hr>

<table border=’1’cellspacing="0" cellpadding="10">

<tr>

< td align="left” valign="top” width='400’Постоянный контент: </td>

< td align="lefl" valign="top">

<IFRAME  SRC=nhttp://127.0.0.1/cgi-bin/111.pl"   HSPACE="0" VSPACE="0"

FRAMEBORDER="0" MARGINHEIGHT="0" MARGINWIDTH="0" WIDTH=”320"

HEIGHT=”100”>

</IFRAME>

</td

</tr

</table>

</body>

</html>

 

Используя ссылки, пользователь может ознакомиться с соответствующей информацией как последовательно (“Технические характеристики” — “Обслуживание” — “Насадки” — “Рецепты”), так и “перескакивая” с одной страницы на другую, чтобы уточнить тот или иной момент. Cвязь между частями документа реализуется посредством так называемых гиперссылок.

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

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

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

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

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

[тип протокола]://[доменное имя компьютера]/[маршрут доступа].

 

3 Лабораторная работа. Компоненты пользовательского интерфейса на основе WUI (Web user interface)

 

Цель работы: отработать навыки создания в HTML-документе компонентов, позволяющих создавать интерактивное взаимодействие пользователя с WWW-сервером (HTTP - сервер).

 

Задания:

1) Составить код HTML-страницы с включением тегов FORM со всеми компонентами, которые формируют интерактивный интерфейс пользователя с программным приложением.

2) Составить код HTML-страницы с определенной смысловой нагрузкой, выбрать компоненты форм, определяющие вводимую информацию.

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

 

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

Базовый WUI-стиль (Web User Interface) весьма схож с меню иерархической структуры, которые пользователи знают по опыту работы в средах с неграфическим интерфейсом за исключением более наглядного представления и использования гипер­ссылок. Необходимая навигация выполняется в рамках одного или нескольких при­ложений с использованием текстовых или визуальных гиперссылок. В зависимости от структуры гиперссылок приложения навигация в пределах WUI-интерфейса приво­дит к отображению Web-страниц в иерархии приложения  по одной за раз внутри одного окна. Ниже приводятся основные особенности приложения, использующего WUI-стиль:

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

- броузер обеспечивает меню для Web-приложения;

- выбор действий ограничен, так как меню, обеспечивающее обращение к функциям, не является легкодоступным для приложения;

- Web-страница обладает небольшой степенью внутреннего контроля над клиентской областью для открытия специализированных всплывающих меню;

- создание специализированных меню требует дополнительной работы по программированию;

- клиентская область не содержит традиционных пиктограмм;

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

- броузер и приложения обеспечивают возможности отключения графики, содержащейся в Web-страницах, так что на экране отображается только их текстовая версия;

- поддержка указателя осуществляется в основном для выбора с помощью одного щелчка мышью или выбора по навигационным ссылкам. Технология "drag and drop" ("перетащить и поместить") не поддерживается за исключением случаев  специального программирования в определенных средах. Действия кнопки 2, мыши также ограничены.

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

 Web-броузер обеспечивает базовые возможности навигации для перемещения по Web-узлам и в пределах Web-узлов линейным способом с помощью кнопок панели инструментов Back (Назад) и Forward (Вперед). Навигация от одной страницы приложе­ния к другой в пределах одного и того же Web-узла приложения выполняется с ис­пользованием гиперссылок, схемы Web-узла, кнопок и навигационной панели. Основное назначение Web-страницы заключается в обеспечении полезной информацией, включая навигационную структуру в организацию Web-узла. Web-страницы составлены из одной или нескольких конст­рукций, представляющих собой сочетание бесчисленных мозаик цветных графических элементов. По сравнению с GUI-ориентированными приложениями WUI-ориентированные приложения включают несчетное количество элементов поведения, которые не вызываются пользователем, например, анимационных.

Компоненты WUI-интерфейса. К наиболее распространенным компо­нентам WUI-интерфейса относятся баннеры (заголовки), навигационные панели и визуальные или текстовые гиперссылки, упорядоченные различными способами. Также применяются разнообразные подходы к использованию графики, анимации и цвета:

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

- навигационная панель - это список вариантов выбора гиперссылок, обес­печивающих доступ к информации;

- гиперссылка представляет собой вариант выбора, который отображает сле­дующую страницу информации или перемещает фокус отображения на другую область той же страницы;

- броузер - типичный броузер обладает заголовком, навигационной панелью областью, отображаемой в пределах экрана;

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

- поиск и результаты поиска - один или несколько элементов управления, с помощью  которых  пользователь осуществляет ввод или выбор критерия поиска информации, результаты поиска отображаются в том же и другом окне Web- броузера;

- документ - во многом похожий на свой бумажный двойник Web-документ отображает текстовую информацию вместе со ссылками на дополнительные источники или развернутое представление информации;

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

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

 

Методические указания к выполнению работы

 

Программное обеспечение: стандартное (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" >

 

Пример 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 разрешает выбрать более одной опции меню.

 

Флажки

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

 

Пример 3.

<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 и затем передается сценарию.

 

Переключатели

Этот тип элементов формы позволяет пользователю выбрать только одну опцию из предлагаемого набора.

 

Пример 4.

<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>недоступен

 

Вид в броузере

 

При использовании метода GET информация из формы добавляется в конец URL, который был указан в описании заголовка формы. CGI-программа (CGI-скрипт) получает данные из формы в виде параметра переменной среды QUERY_STRING. При POST вся информация о форме передается после обращения к указанному URL, и CGI-программа получает данные из формы в стандартный поток ввода (STDIN). Сервер не пересылает сообщение об окончании пересылки данных. Вместо этого, используется переменная окружения CONTENT_LENGTH для определения количества переданных данных. Данные считываются из стандартного потока ввода.(Программный интерфейс взаимодействия по протоколу HTTP броузер-сервер будет рассмотрен более подробно в последующих лабораторных работах, рекомендуются разработанные по этому заданию программы сохранить для дальнейшего использования).

 

 

4 Лабораторная работа. Состав интерфейса программ, разработанных в среде визуального программирования

 

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

 

Задания:

Разработать программу с «дружелюбным» интерфейсом, включающим не менее 10 элементов интерфейса согласно варианту.

 

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

 

Элементы управления. Кнопки

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

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

 

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

 

Чекбоксы и радиокнопки

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

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

 

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

 

Методические указания к выполнению работы

 

Пример 1. Ввод данных

<html>

<head>

<title>ВВОД</title>

</head>

<body bgcolor=”#FFEFFF”>

<?php

$username="";

$password="";

$database=DBNAME";

$table="news";

$host=nlocalhostn;

if(isset($submit)):

mysql_connect($host,$username,$password)or die(mysql_error());

mysql_select_db($database)or die(rnysql_error());

$date = date("Y-m-d");

$sql = "INSERT INTO news

VALUES(NULL,,$heading';$body,;$date,;$auth'/$auth„email')"; mysql_query($sql);

print("<h2>ДАННЫЕ ВВЕДЕНЫ</h2>\n");

print("<h2> МОЖНО ВВЕСТИ ДОПОЛНИТЕЛЬНО</h2>\n”);

endif;

?>

<р><hЗ>ВВЕДИТЕ ВАШУ ИНФОРМАЦИЮ В БАЗУ ДАННЫХ</hЗ>

<form action="datain.php" method="posf >

ИМЯ ABTOPA:<br><input type=,ltext" name="auth"><p>

Email:<br><jnput type="text" name="auth_email"><p>

НАЗВАНИЕ CTATЬИ:<br><lnput type~"text" name="headsng',><p>

СОДЕРЖАНИЕ:<br>

<textarea cols=40 rows=20 name="body">

</textarea><p>

<input type="submit" name="submit" value="BBECTH?n>

</form>

</body>

</html>

 

Пример 2. Вывод и поиск данных

<html>

<head>

<titе>ВЫВОД ДАННЫХ</titlе>

</head>

<body bgcolor="#FFEFFF">

<h1>HOBOCTИ</h1>

ВЫВЕСТИ ДАННЫЕ

<a href="dataoutphp?orderby=date">c датой</а>

<a href="dataout.php?orderby=heading">c заголовком</а> или

<a href=="dataout.php?orderby=author">c именем авторов</а>

<p>

<form action="dataoutphp" method="POST">

поиск статей написанных (<i> введите имя автора</i>):

<input type-“text”name=”author”>

<input type=”submit”name=”submit”value=”Послать!”>

</form>

<table border=”1” cellpadding=”3”>

<?php

/*Эта программа позволяет получить заметки из базы данных*/

$db=mysql_connect(“localhost”,”root”);

//mysql_select_db(“php”,$db);

Mysql_select_db(DBNAME,$db);

if($orderby==’date’):

$sql=”select*from news order by ‘date’”;

elseif($orderby==’author’):

$sql=”select*from news order by ‘author_name”’;

elseif($orderby==’heading’):

$sql=”select*from news order by ‘heading”’;

elseif(isset($submit)):

$sql=”select*from news where author_name=’$author”’;

else:

$sql=”select*from news”;

endif;

$resalt=mysql_query($sql);

while($row=mysql_fetch_array($result))

{

print(“<tr><tr bgcolor=\”#003399\”><b>”);

print(“<font color=\”while\”>%s</font></b></td></tr>\n”,

$row[“author_email”], $row[“author_name”]);

print(“<br>Послано:%s<hr>\n”,

$row[“date”]);

print(“%s</td></tr>\n”,

$row[“date”]);

print(“%s</td></tr>\n”,

$row[“body”]);

}

?>

</table>

</body>

</html>

 

 

Рисунок 3 - Пример мастера

 

Требования к отчету

1) Тема и цель работы.

2) Изучение теоретического материала.

3) Формы разработанного интерфейса.

4) Ответы на контрольные вопросы.

5) Результат проделанной работы.

Контрольные вопросы:

1) Назовите основные элементы интерфейса.

2) В каких случаях применяются списки, чекбоксы, радиокнопки и комбобоксы?

3) В чем преимущества и недостатки использования пиктограмм?

4) Когда применяются последовательные окна?

5) Типы окон. Дайте характеристику элементам окон.

6) Что представляет собой элемент управления меню, типы меню. Какими должны быть меню?

7) Опишите элементы интерфейса и их роль: курсор, цвет, звук.

 


Список литературы

 

1. Гультяев А.К.,Машин В.А.Уроки WEB-мастера. Технология и инструменты: Практическое пособие. - СПб.: Корона принт, 2001.

2. Торрес Роберт Дж. Практическое руководство по проектированию и разработке пользовательского интерфейса. Пер с англ. – М.: Издательский дом “Вильямс”, 2002.

3. Соловейчик И.Е. Дисплеи в системах ЭВМ. - М.: СовРадио, 1979.

4. Делиза Д.О. Дисплеи. Под ред. Панкова Г.М. - М.: Мир, 1982.

5. Шeрр Сол. Электронные дисплеи. - М.: MMD, 1982.

6. Каган Б. К., Каневский М. М. Цифровые вычислительные машины и системы. - М.: Энергия, 1973.

 

Содержание

 

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

3

2 Лабораторная работа. Пользовательский интерфейс на основе HUI (Hand User Interface)

6

3 Лабораторная работа. Компоненты пользовательского интерфейса на основе WUI (Web user interface)

12

4 Лабораторная работа. Состав интерфейса программ, разработанных в среде визуального программирования)

18

Список литературы

23

 

Сводный план 2011 г. поз. 250