Слайд 2
Основные задачи человеко-компьютерного взаимодействия
Какой должна быть интерактивная система,
чтобы быть понятной и удобной в применениии, восприимчивой к
потребностям пользователей?
Как измерить степень удобства применения интерфейса (его юзабилити)?
История проектирования интерактивных систем связана с рядом парадигм HMI.
Слайд 3
Парадигмы HMI
История появления. Принципы.
Слайд 4
Первоначальная парадигма
пакетная обработка
Impersonal computing
Слайд 5
(Research and Development )— американский стратегический исследовательский центр –
«фабрика мысли» (think
tank) http://www.rand.org..
основан в конце 1945 г. генералами армии США
Арнольдом, Боулесом, Норстадом, ЛеМэем, Реймондом, Коллбомом и Дугласом в рамках Авиационной компании «Дуглас» в Санта-Монике (Калифорния, США) в целях охраны национальной безопасности страны.
линейное программирование, динамическое программирование, определение очередности проблем, нелинейное программирование, метод Монте-Карло, теория игр и т.д.
Слайд 7
Древо родственных связей ранних компьютеров
50-х и 60-х
годов. Корень - ENIAC
Слайд 8
Eniac (1943)
Electronic Numerical Integrator» («Электронный числовой интегратор»),
позднее к названию было добавлено «and Computer» («и компьютер»)
Общий
вид ENIAC, первой в мире ЭВМ.
Слайд 9
Характеристики Eniac (1943)
На создание ENIAC ушло 200 000
человеко-часов и 486 804,22 доллара США. Всего комплекс включал в
себя 17 468 ламп 16 различных типов, 7200 кремниевых диодов, 1500 реле, 70 000 резисторов и 10 000 конденсаторов.
Вес — 27 тонн.
Объём памяти — 20 число-слов.
Потребляемая мощность — 174 кВт
Вычислительная мощность — 357 операций умножения или 5000 операций сложения в секунду.
Тактовая частота — 100 кГц, то есть один импульс каждые 10 микросекунд. Основной вычислительный такт состоял из 20 импульсов и занимал 200 микросекунд. Сложение выполнялось за 1 такт, умножение — за 14 тактов. Умножение заменялось многократным сложением, так что 1 умножение равнялось 14 операциям сложения и выполнялось, соответственно, за 2800 микросекунд.
Устройство ввода-вывода данных — табулятор перфокарт компании IBM: 125 карт/минуту на ввод, 100 карт/минуту на вывод.
Слайд 10
Mark I (1944)
первый американский программируемый компьютер.
Разработан IBM и молодым гарвардским математиком Говардом
Эйкеном и ещё четырьмя инженерами этой компании на основе
идей Чарльза Бэббиджа.
Компьютер оперировал 72 числами, состоящими из 23 десятичных разрядов, делая по 3 операции сложения или вычитания в секунду. Умножение выполнялось в течение 6 секунд, деление — 15,3 секунды, на операции вычисления логарифмов и выполнение тригонометрических функций требовалось больше минуты.
Слайд 11
IBM SSEC (1948)
IBM Selective Sequence Electronic
Calculator
Собственная система команд и правила разработки программы.
гибрид вакуумных трубок
и электромеханических реле.
Память была организована 19-разрядных десятичных чисел.
Слайд 13
Пример смены парадигм
Пакетная обработка
Работа пользователей в режиме разделения
времени
Interactive computing
Слайд 14
Работа пользователей в режиме разделения времени (Time-sharing)
1940 and
1950 – развитие вычислительных технологий
1960s – развитие каналов
передачи данных
д-р Ликлайдер (J.C.R. Licklider) at ARPA (Defense Advanced Research Projects Agency, ранее ARPA) — Управление перспективных исследований Министерства обороны США )
Поддержка одного компьютера группы пользователей
Слайд 15
РАФОС (RT-11 Real Time — в режиме реального времени)
небольшая
однопользовательская операционная система реального времени фирмы DEC для 16-битных компьютеров серии PDP-11. Впервые
была запущена в 1970 году и широко использовалась для систем реального времени, управления процессами и сбора данных.
Слайд 16
Тетрис на ДВК-2 - клоне PDP-11, Tetris on
PDP-11
http://www.youtube.com/watch?v=SDB7LG_rGGM
Слайд 17
Фотогалерея старых компютеров
http://www.tis.kz/oldpc.php
Устройства ввода-вывода
Слайд 18
Пример смены парадигм
Пакетная обработка
Работа пользователей в режиме разделения
времени
Сетевое взаимодействие пользователей
Community computing
Слайд 19
Пример смены парадигм
Пакетная обработка
Работа пользователей в режиме разделения
времени
Сетевое взаимодействие пользователей
Графический дисплей
% foo.bar
ABORT
dumby!!!
C…P… filename
dot star… or was
it R…M?
Move this file here,
and copy this to there.
Direct manipulation
Слайд 20
Устройства видео отображения
Более удобны чем бумага
1962 – Альбом
Ивана Сазерленда
(http://www.youtube.com Ivan Sutherland : Sketchpad Demo)
Альбом работает
с световым пером и блоком с кнопками (под левую руку). Четыре черные ручки управляют положением экрана и масштабом изображения.
Компьютер для отображения и управления данными.
Вклад одного человека кардинально изменил историю вычислительной техники !
Слайд 21
Инструменты
программирования
Работы Дугласа Энгельбарта (Стэнфордский исследовательский институт)
Демонстрация Augment
системы NLS (oN-Line System) станция в 1967 году. В правой руке
держит мышь, и под его левой руке пять пальцев chording ключей.
Слайд 22
NLS (oN-Line System)
Дисплей NLS, клавиатура и мышь
Слайд 23
Появление первой (деревянной! мыши). Изобретатели -Дуглас Энгельбарт и
Билл
Оригинальная мышь небольшой деревянный ящик, который «построен из
двух потенциометров, установленных ортогонально, каждый из которых имеет колесо, прикрепленное к его валу» [Ibid., 2d2]. Движение мыши на столе интерпретируется как перемещение курсора на экране. Кнопка на верхней используется для выбора функции.
Слайд 24
Пример смены парадигм
Пакетная обработка
Работа пользователей в режиме разделения
времени
Сетевое взаимодействие пользователей
Графический дисплей
Микропроцессоры и ПК
Personal computing
Слайд 25
Персональные компьютеры (ПК)
1970 - LOGO Пейперта- язык для
простого графического программирования для детей
ПК является более мощными, и
становится легче для освоения пользователями.
Будущее компьютеризации в небольших, мощных ПК, которые находятся по рукой у пользователя
Алан Кей (центр Xerox PARC ) задался целью снабдить каждого ребенка своим личным компьютером. Ввел термин - персональный компьютер
Слайд 26
Принцип - Метафора
Реализуется в интерфейсе связыванием вычислительной и
управляющей деятельности с ее реальными прототипами
Перетаскивание логотипов
Папки в файл-менеджере
и управление ими
Работа с таблицами по страницам
Удаление файлов (корзина), и т.д.
Проблема
Некоторые данные не укладываются в метафоры
Слайд 27
Алан Кей и его Dynabook (динамическая книга)
По
сути, она должна быть похожа— на субноутбук, скорее даже
на нетбук, с оговоркой, что сети в то время не было. Dynabook материализовалась в последние годы.
Кей был первым, кто описал персональный компьютер.
в 1971 году он создал первый объектно-ориентированный язык программирования Smalltalk-71. Следы этого языка обнаруживаются в C++ и Java.
В версии Smalltalk-76 был уже не просто языком программирования, а средой с развитым оконным графическим интерфейсом.
Слайд 28
Smalltalk
Smalltalk представлял собой графическую среду разработки (как современные
IDE), но он не только был средой разработки, но
и средой исполнения.
Как будто бы Microsoft разработала Visual Studio – единое приложение, представляющее собой сразу и Windows.
Слайд 29
Оконные системы и WIMP интерфейс
1981 - Xerox Star
первая коммерческая система управления окнами. Окна, пиктограммы, меню и
указатели появились знакомые механизмы взаимодействия
http://www.youtube.com Xerox Star пользовательский интерфейс (1982) 1 из 2, Xerox Star Профессиональная рабочая станция (1981)
Слайд 30
Принцип -Манипулирования данными
1982 – Shneiderman описал подход HMI,
основанный на графическом представлении
Визуализация объектов
Синтаксический подход к действиям
Замена языковых
команд действиями
Поддержка обратной связи взаимодействия
1984 – Apple Macintosh
Модель мира пользователя на основе метафор
What You See Is What You Get (WYSIWYG)
Слайд 31
“Apple Computer” (1976)
(Steve Jobs,Steve Wozniak)
Первопроходцы – GUI
популярный компьютер
Apple, отображающий графику и текст, но все еще в
стиле командной строки.
компьютером следующего поколения Lisa от Apple (1979-1983).
Lisa базировалась на интерфейсе, основанном на иконках: каждая иконка символизировала документ или приложение.
впервые было разработано выпадающее меню, где все меню находились в самом верху экрана.
Трехкнопочная мышка, которая лишилась одной кнопки. Появляется идея двойного клика- “дабл-клик”
идея drag-n-drop, - идея перетаскивания файлов
идея "ветвей ресурсов" ("resource forks")
идея "классов создателей", означающая, что с каждым файлом может быть ассоциировано приложение, запускающееся по двойному щелчку на файле.
Слайд 32
Lisa от Apple
Базовая конфигурация
32-битный процессор Motorola 68000 с
тактовой частотой 5 МГц и 24-битной адресацией, такой же
как в «больших» компьютерах и рабочих станциях того времени, и целый мегабайт оперативной памяти (расширяемый, за доплату, до 2 мегабайт). Лизу можно было оснастить жёстким диском ёмкостью в 5 мегабайт.
Черно-белый дисплей с диагональю в 12 дюймов (30,5 см), два дисковода Apple FileWare (в просторечии — Twiggy) для 5 1/4 дюймовых (13,3 см) двухсторонних «гибких дисков» объёмом в 871 килобайт.
Первая модель стоила 9995 тогдашних долларов США. (25000 –сегодня!!!)
Слайд 33
Операционная система
Lisa Office System (Lisa OS)
Набор из
семи офисных программ, таких как LisaWrite, LisaCalc, LisaDraw, LisaGraph,
LisaProject, LisaList и LisaTerminal.
Операционная система опережала своё время лет на 10.
Среда разработки со специальной операционной системой Lisa Workshop продавалась отдельно.
http://www.youtube.com Технология: Apple Lisa Demo (1984)
Технология: Apple Lisa {25} лет спустя
Слайд 34
В январе 1985 года на базе Лизы был
создан Macintosh XL, где XL означало «ex-Lisa»
Раздавленные останки
2
700 Лиз
Полигон Логан, 1989 год
Слайд 36
OS/2
1988 году вышла первая версия – проект, призванный
заменить DOS — совместный проект IBM и Microsoft.
Слайд 37
Windows 3 был первым популярным интерфейсом для PC
Слайд 38
Windows 95 окончательно закрепил лидирующие позиции Microsoft в
GUI. Она побила все рекорды по продажам и стала
самым популярным GUI всех времен.
Слайд 39
Пример смены парадигм
Пакетная обработка
Работа пользователей в режиме разделения
времени
Сетевое взаимодействие пользователей
Графический дисплей
Микропроцессоры и ПК
WWW
Global information
Слайд 40
Первая концепция - Гипертекста
1945 - Ванневар Буш (Vannevar
Bush, 1890–1974), научный советник президента Ф. Д. Рузвельта впервые
дал описание гипертекста в своей статье "Как мы можем думать".
Memex -происходящее от слов memory(память) и index (индекс, список), — это концепция идеального запоминающего и категоризирующего устройства, которое могло бы помочь упорядочить всю имеющуюся информацию независимо от её объема и разнородности.
Слайд 42
Особенности Memex [ Bush 1945]
Коллекция документов на микрофильмах.
Рабочая
станция, содержит документы на микрофильмах, в том числе страницы
с индивидуальными заметками. Эти документы можно вызвать в любой момент.
Возможность добавления новых записей, в том числе рукописных.
Возможность выбрать документ путем набора определенного кода. Для часто используемых документов код может быть мнемоническим.
Использование ассоциативных связей. Буш придерживался низкого мнения об индексации и схемах классификации.
Слайд 43
Если пользователь желает получить определенную книгу, он набирает
на клавиатуре ее код и получает на экране титульную
страницу. При этом для часто используемых документов код может быть мнемоническим. Отклоняя специальный рычаг вправо, пользователь просматривает книгу постранично или передвигаясь сразу на много страниц (например, через 10 страниц). Отклоняя рычаг влево, можно вернуться назад. Специальная клавиша позволяет вернуться на первую страницу. Пользователь может добавить заметки на полях и комментарии, которые будут записаны с помощью одного из методов сухой фотографии [Bush 1945].
Слайд 44
Теодор Нельсон
(Theodor Holm Nelson)
(1937-)
середина 1960-х - Нельсон описывает
гипертекст как нелинейный просмотр структуры
придумал термины «гипертекст», «гиперсреда» или
«гипермедиа» (hypermeia).
Под “гипертекстом” я понимаю непоследовательную запись. Обычно процесс письма осуществляется последовательно по следующим двум причинам. Во-первых, потому, что он является производным от речи…, которая не может быть последовательной (так как у нас для этого только один канал), и, во-вторых, книги неудобно читать иначе как последовательно. Однако мысли образуют структуры, которые не являются последовательными – они связаны многими возможными переходами.
Т. Нельсон
Слайд 45
Под “гипертекстом” я понимаю …
Макет of transpointing windows
(окна с взаимными связями), [Nelson 1972]
Авторская диаграмма связей между
текстами 1965 г.
Слайд 46
проект Xanadu (1960)
Xanadu -Гипертекстовая система, описанная в книгах
«Computer Lib» и «Dream Machines»
«Руководствуясь идеями, характер которых
литературный, а не технический, мы создали систему для хранения и поиска текста, в котором введены взаимосвязи и "окна". Наша фундаментальная единица, документ, может иметь "окна" на любые другие документы. "Информационное тело" системы эволюционирует, непрерывно расширяясь без изменения своей основы. Новые связи и новые "окна" постоянно добавляют новые пути доступа к старому материалу».
Xanadu являлась вдохновением для создания World Wide Web, XML
Слайд 47
Основные черты Xanadu
Необрабатываемые связи.
Простое и легкое управление авторскими
правами (COPYRIGHT).
Связь с оригиналом – все цитаты и выписки
остаются связанными с оригиналом.
Двунаправленные ссылки – любой читатель может присоединить комментарий к любой странице.
Любой байт в любом документе имеет уникальный адрес.
Взаимное сравнение соединенных документов, показываемое двунаправленными связями.
Полное управление версиями: документ может быть изменен, но предыдущие версии остаются доступными, версии могут ветвиться.
Хранение версий осуществляется в динамическом режиме.
Новые изменения могут быть внесены авторами без обрыва старых связей.
Слайд 48
Копия экрана программы CosmicBook, построенной по технологии Xanadu.
Ссылки между разными окнами показаны линиями. Программа выложена на
сайте Xanadu [http://xanadu.com/Cosbk/index.htm].
последний прототип на YouTube -http://www.youtube.com/watch?v=En_2T7KH6RA
Слайд 49
HTML – это точно то, что мы пытались
предотвратить
Постоянно обрывающиеся связи.
Связи, идущие в одну сторону.
Цитаты, которые не
могут найти оригинала.
Отсутствие управления версиями.
Отсутствие управления правами авторов.
Слайд 50
World Wide Web
ENQUIRE Enquire (1980-1990) -проект, созданный в
CERN (Европейском центре ядерных исследований), для построения распределенной гипермедиа-системы.
Любое слово в гипертекстовом документе может быть указателем или ссылкой (link) на другой документ.
Стандарты XML, HTML
IP адресация
Протокол TCP/IP
Копия экрана первого браузера Тима Бернерс-Ли на машине
Next Cube
Слайд 51
Гипертекстовая система ENQUIRE Enquire,
1980 Бернерс-Ли (Tim Berners-Lee).
"В
Enquire я мог ввести в страницу информации о людях,
устройствах
и программах. Каждая страница была узлом программы, небольшим как индексная карточка. Единственный путь создать новый узел был создать ссылку из старого узла. Ссылки из- и в узел могли быть показаны как список внизу каждой страницы, как лист ссылок в конце каждой статьи. Единственный путь найти информацию состоял в движении по ссылкам, начиная со стартовой страницы."
(Тим Бернерс-Ли)
Слайд 52
Тим Бернерс-Ли разработал
язык для разметки текстов HTML (Hypertext
Markup Language)
Коммуникационный стандарт HTTP (Hypertext Transfer Protocol)
адресную схему
для размещения сайтов URL (Uniform Resource Locator).
Первый элементарный браузер
Получившуюся систему он назвал World Wide Web (www). Перевод на русский звучит как всемирная паутина.
1994г. норвежский инженер Хокон Виум Ли предложил концепцию каскадных таблиц стилей CSS. Они позволяют задать единый стиль для каждого элемента в документе.
Слайд 53
Рост числа web-сайтов, начиная с декабря 1990г. (когда
сайт был один -Тима Бернеса-Ли)
Слайд 54
История БРАУЗЕРОВ. Интерфейсы
Марк Адрисен (Marc Andreessen) и Эрик
Бина (Eric Bina) разработали первый графический браузер 1993 г.
– Mosaic (UNIX, Apple и PC).
Особенности Mosaic
Ориентрован на непрофессионалов
Позволял загружать в одно окно текст графку
Свободно распространялся через Интернет
Первоначально браузер был разработан для UNIX, а затем
перенесен на Apple и PC
Mosaic стал критическим элементом, обеспечившим взрывной рост Web«
(Тим Бернерс-Ли).
Web прошлого - NCSA Mosaic
http://www.youtube.com/watch?v=stPpkPK6rY0
Слайд 55
История БРАУЗЕРОВ. Интерфейсы.
1994г. Netscape , Microsoft, IBM, Sun
Microsystem создали World Wide Web Consortium (W3C). Возглавил консорциум
Тим Бернес-Ли.
1994г. NCSA продала лицензии на данную технологию Mosaic нескольким компаниям, включая Microsoft.
1994г. - Mosaic стала Netscape Communication Corp.(Mosaic Netscape, Netscape Navigator)
Цена Netscape -39 долларов
Netscape Navigator 2.01
http://www.youtube.com/watch?v=iJm4OOfgApA
Слайд 56
"Приливная волна Интернет”
"Я присваиваю Интернет наивысший уровень важности.
Этой запиской я хочу довести до всех, что ориентация
на Интернет жизненно важна для всех аспектов нашего бизнеса. Интернет - наиболее важная отдельная разработка, которая появлялась с создания IBM PC в 1981г. Это даже более значимо, чем появление графического интерфейса пользователя”
Апрель 1995г. Билл Гейтс, письмо, озаглавленное
"Приливная волна Интернет”
Microsoft предложила поделить рынки браузеров
Слайд 57
Microsoft съедает рынок Netscape.
Слайд 58
Лидеры БРАУЗЕРОВ
1995 г. Microsoft выпустила операционную систему Windows 95 с
Internet Explorer3.0
1995 г появился браузер Opera
2004 г появился браузер Mozilla
Firefox
2008 г появился браузер Google Chrome
2012 г. Yandex. Browser
Слайд 59
Самые распространённые браузеры (октябрь 2012):
Internet Explorer
Google Chrome
Firefox
Opera
Слайд 63
ИНТЕРФЕЙСНЫЕ ТЕХНОЛОГИИ В БРАУЗЕРАХ
автоматическое восстановление вкладок после сбоя;
«ускорители»
— быстрые команды, доступные из контекстного меню: поиск на
карте, отправка по почте, перевод на другой язык, добавление в онлайн-закладки и ряд других;
WebSlices (веб-фрагменты) — подписка пользователей на отдельные участки страниц;
«умная адресная строка» — при вводе адреса браузер возвращает результат, основанный не только на URL ранее посещённого вами сайта, но и на заголовке страницы и других её свойствах;
приватный режим работы InPrivate, позволяющий заходить на сайты, не оставляя следов в истории браузера;
Слайд 64
ИНТЕРФЕЙСНЫЕ ТЕХНОЛОГИИ В БРАУЗЕРАХ
блокировка всплывающих окон;
поддержка вкладок (несколько страниц в
одном окне);
встроенная панель поиска в поисковых машинах и словарях;
так
называемые «Живые закладки» — механизм интеграции RSS-потоков;
почти неограниченные возможности по настройке поведения и внешнего вида, в том числе за счёт использования расширений, тем и стилей;
быстрое полностраничное масштабирование (управляется нажатием клавиши Ctrl и вращением колёсика мыши);
Озвучивание текста в инструментах (приложениях)
Речевой ввод поисковых запросов
Слайд 65
Semantic Web
Идея Семантической Сети (Semantic Web)
в 2001 Тим
Бернерс-Ли (создатель World Wide Web).
Обработкой и обменом информации должны
заниматься интеллектуальные агенты (программы, размещенные в Сети).
агенты, должны иметь общее (разделяемое всеми) формальное представление предметной области - онтологию.
Semantic Web - Найджел Shadbolt
http://www.youtube.com/watch?v=BDVkV9OU9aw&feature=related
Слайд 66
История опиcания семантики в WEB
1997 – W3C определил
спецификацию RDF (Resource Description Framework).
1999 - язык описания структурированных
словарей для RDF – RDF Schema (RDFS).
2004 - язык GRDDL (Gleaning Resource Descriptions form Dialects of Languages).
В области создания библиотек классов и построения логических выводов над RDF-графами была создана библиотека Jena Framework.
редакторы онтологий стали поддерживать RDF.
2004- язык OWL (Web Ontology Language).
Слайд 67
История описания семантики в WEB
2005 году началась работа
над форматом обмена правилами – RIF (Rule Interchange Format).
язык
SPARQL. Это – язык запросов к RDF-хранилищам. Синтаксически он похож на SQL.
Слайд 69
Пример смены парадигм
Применение сочетания физического и виртуального мира
в повседневной деятельности.
Пакетная обработка
Работа пользователей в режиме разделения времени
Сетевое
взаимодействие пользователей
Графический дисплей
Микропроцессоры и ПК
WWW
Распределенные вычисления
Слайд 70
Агентно-ориентированные интерфейсы
Original interfaces
Commands given to computer
Language-based
Direct Manipulation/WIMP
Commands performed
on “world” representation
Action based
Agents - return to language by
instilling proactivity and “intelligence” in command processor
Avatars, natural language processing
Слайд 71
Sensor-based and Context-aware Interaction
Humans are good at recognizing
the “context” of a situation and reacting appropriately
Automatically sensing
physical phenomena (e.g., light, temp, location, identity) becoming easier
How can we go from sensed physical measures to interactions that behave as if made “aware” of the surroundings?
Слайд 72
Paradigms for usability
Language versus Action
actions do not always
speak louder than words
DM – interface replaces underlying system
language paradigm
interface as mediator
interface acts as intelligent agent
programming by example is both action and language