human-computer interaction curs 2 - facultatea de ...arthur/hci/lecture notes/curs.02.pdf ·...

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O

Dispozitive deintrare

Dispozitive deiesire

Memoria

Procesarea

Human-Computer InteractionCurs 2

Arthur Molnar

Universitatea Babes-Bolyai

[email protected]

March 10, 2015

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Overview

1 Recapitulare

2 CalculatorulCanalele de I/ODispozitive de intrareDispozitive de iesireMemoriaProcesarea

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Recapitulare

Introducere

Evolutia conceptului de HCIElemente fundamentaleModel Human Processor

Omul

VedereaAuzulSimtul tactilMiscareaMemoriaGandirea

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Componentele interactiunii om-calculator

Omul

Canale de I/OMemoriaProcesarea

Calculatorul


Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Model Human Processor

Dezvoltat de Card, Moran si Newell (1989)

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea


Omul


Calculatorul


Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Canalele de I/O

http://xkcd.com/722/

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Canalele de I/O

Dispozitive de intrare

TastaturaScrisul de manaRecunoasterea vorbiriiRecunoasterea priviriiDispozitive de pozitionare, indicare, desenareEcranul tactil

Dispozitive de iesire

EcranulHartia digitalaSuneteTactile

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Tastatura

Incepem cu ceva ”simplu” - tastatura numerica

Dispuneri diferente - telefon si calculator

Cum e pe telefonul vostru? - implementare (probabil)software

Intrebarea importanta: V-ati gandit vreodata?

Sursa - Google, cautare ”calculator”

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Tastatura

http://en.wikipedia.org/wiki/QWERTY

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Tastatura

Dispunerea QWERTY a fost introdus de ChristopherLatham Sholes

El a fost inventatorul primei masini de scris functionale

Primul model avea dispunerea de mai jos


Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Tastatura

Problemele primului model

Caracterele erau montate pe brate metalice care se puteaublocaOperatorul nu vedea imediat caracterele scrise si nudescoperea problemele


Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Tastatura

Solutia gasita - QWERTY

Incurajeaza scrisul rapid prin alternarea mainilor

Seriile comune de caractere (th, st) nu sunt alaturate -blocaje mai rare

Alte probleme

Proiectat pentru limba engleza

Nu tine cont de alternanta specifica e literelor in limba

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Tastatura

Tastatura QWERTY

De ce nu este ideala pentru tastare?

Dispozitia tastelor este mostenita de la vechile masini descris tastele care apar cel mai frecvent in combinatii incadrul cuvintelor sunt situate la extremitatile tastaturiipentru a permite tastarea cu ambele maini

De ce nu a fost inlocuita? multa lume ar trebui sa seobisnuiasca cu noile tastaturi

Utilizarea tastaturii indelungat poate cauza afectiuni aletendoanelor

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Tastatura

Alternativa la QWERTY - AZERTY, QWERTZ

Proiectate pentru limba franceza, germana

Tasta AltGr - Alt Graphic permite scrierea de caracterespeciale

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Tastatura

Raspandirea dispunerilor bazate pe caractere latine

Sursa: Ljuboslov Ezykin - Windows Keyboard Layouts.Licensed under CC BY-SA 3.0 via Wikimedia Commons

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Tastatura

Alternativa la QWERTY, AZERTY, QWERTZ - Dvorak

Inventat de Dr. August Dvorak si Dr. William DealeyImbunatatiri propuse

Miscari mai naturale a degetelor pentru tastareCombinatiile comune de litere sa nu sara peste home rowAlternarea mainilor in scrierea de cuvinte comuneFolosirea pe larg a mainii dominante (statistic este ceadreapta)

Sursa: KB United States Dvorak”. Licensed under PublicDomain via Wikimedia Commons

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Tastatura

Dar limbile care nu sunt bazate pe caractere ? Scurt studiu decaz - limba chineza

Limba logosilabica - fiecare caracter reprezinta o silaba

Caracterele sunt construite din parti ce pot defini obiectesau notiuni

Alfabetizarea presupune memorarea a in jur de 4000 decaractere

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Tastatura

Cum traducem 4000 de caractere folosind o tastatura cu 100taste?

Metoda Cangjie

Metoda Pinyin

Metoda Q9 (similar T9 pentru caractere latine)

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Tastatura

Metoda Cangjie

Inventata in 1976, denumita dupa inventatorul mitologic alsistemului de scriere chinez.

Bazat pe grafologia caracterelor chineze

Cele 24 de unitati de baza (radicali) sunt mapate petastele literale

Keyboard layout Cangjie. Licensed under CC BY-SA 3.0 viaWikimedia Commons

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Canalele de I/O





Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Scrisul de mana

Activitate comuna si familiara atractiva pentruintroducerea de text

Tehnologia este inca imprecisa

Problema: Diferentele individuale intre scrisul persoanelorsunt enorme

Limitare importanta - viteza de scriere

Hand writing: 25 wpmDecent typist: 50 wpm

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Scrisul de mana

Unde intalnim scrierea de mana (2015) ?

Dispozitive mobile cu stylus

Permit luarea de notite, adnotarea pozelor

Exemplu:

Sursa: http://tech.firstpost.com/reviews/galaxy-note-4-review-if-you-love-the-stylus-this-samsung-smartphone-is-for-you-243621.html

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Scrisul de mana

Alte utilizari ...

Autentificarea electronica a semnaturii

Utilizeaza diferentele dintre modul in care oamenii scriuacelasi text

Permite identificarea elementelor comune ale uneisemnaturi traditionale

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Canalele de I/O





Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Recunoasterea vorbirii

Domeniu foarte promitator de multi ani, insa de tot atattimp a ramas ... promitator

Limbajul natural este ambiguu: Am vazut fata cutelescopul.

Dezambiguarea prin context este dificila algoritmic

Fiecare persoana vorbeste diferit: tonalitate, raceala,emotie ...

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Recunoasterea vorbirii

Starea artei:

Recunoastere in proportie de 97%

Asta inseamna insa o eroare la 6 cuvinte

Exemple de sisteme cu recunoastere a vorbirii?

O evaluare comparativa:http://www.translationjournal.net/journal/61dictating.htm

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Canalele de I/O





Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Recunoasterea privirii

Dispozitive care permit controlul sistemelor prinintermediul privirii

Necesita folosirea unor ochelari speciali sau a unuidispozitiv minuscul montat pe cap

Un mic fascicul laser este reflectat de retina

Sursa - ”EyeFixationsReading” by Hans-Werner34 at en.wikipedia. Licensed under CC BY-SA 3.0

via Wikimedia Commons

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea


Unghiul de reflexie se schimba odata cu miscarile ochiuluisi astfel este identificat punctul de pe ecran la care privim

Folosit in sistemele de comunicare pentru persoanele cudizabilitati

Folosite in marketing pentru a identifica comportamentulvizual al cumparatorului

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea


Exemplu: dispozitivul Eye Tracking Device

Dezvoltat de Agentia Spatiala GermanaExperimente pe Statia Spatiala InternationalaScopul este de a determina adaptarile la lipsa de gravitatiein miscarea ochilor

Sursa - ”Eye Tracking Device 003” by Chronos Vision GmbH. Licensed under GPL via Wikimedia Commons

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Canalele de I/O





Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Dispozitive de pozitionare, indicare, desenare

Cele mai populare implementari:

Mouse

Joystick

Tabletele grafice

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea


Mouseul:

Inventat de Douglas C. Engelbart ( 1964)

Primul prototip utiliza doua rotite a caror miscare eracompusa

Avea avantajul de a permite miscarea precisa intr-osingura directie

”Firstmouseunderside” by Cern Courier. Licensed under Fair use via Wikipedia

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea


Mouseul mecanic

”Mouse mechanism diagram” by Jeremykemp. Licensed under Attribution via Wikimedia Commons

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea


Elementele mouseului mecanic

Miscarea mouseului roteste bila

Rotitele pe cele doua axe transfera miscarea

LEDuri cu lumina infrarosie detecteaza miscarea prindiscurile gaurite

Pulsurile de lumina sunt transferate in coordonate X si Y.

”Firstmouseunderside” by Cern Courier. Licensed under Fair use via Wikipedia

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea


The footmouse

Dispozitiv operat folosind piciorul

Omul are precizie mai mica in utilizarea pricioarelor decata mainilor

In principiu pentru persoane cu dizabilitati

Mai lent si mai putin precis decat mouse-ul traditional

Desi multe aparate sunt operate cu piciorul, acesta arerolul de a porni/opri dispozitivul.

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea


Joystick

Termenul e originar din pionieratul aviatiei

Maneta care pivoteaza si transmite unghiul in doua sautrei dimensiuni

Are butoane cu stari

Utilizat in aviatie (eng: ”control column”), avioane farapilot

Unele notebook-uri au o implementare in miniatura

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea


Joystick - ca dispozitiv asistiv

Utilizat de cei suferinzi de probleme motorii (paraliziecerebrala) sau musculare

Poate inlocui mouse-ul sau ghida caruciorul electric

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea


Joystick

Maneta de control de la un Boeing 737

In mijloc este tiparita lista de verificari efectuate inainteadecolarii

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea


Tabletele grafice (eng. Digitizing tablet)

Au aparut in 1957

Permit desenarea cu mana

Folosite pentru preluarea de semnaturi

Compuse dintr-o suprafata plana si un stilou imagineaeste vizibila pe un ecran, nu pe suprafata pe care scriem

”Wacom Intuos3 A5” by Cyrotux - Own work. Licensed under CC BY-SA 3.0

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Canalele de I/O





Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Ecranul tactil

De fapt tot un dispozitiv de pozitionare

Elimina obiectul intermediar (mouse, joystick, ...)

Utile in medii ostile (mai putine lucruri se pot strica)

Intuitive

Doua tipuri: Rezistiv si Capacitiv

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Ecranul tactil

Rezistiv (eng. Resistive)

Compus din mai multe straturi suprapusePrimul strat este suflat cu un material conductor pe parteade dedesubtLa fel cu al doilea strat pe partea de deasupraCand ecranul este apasat, cele doua straturi se intalnesc(modificare de rezistenta electrica)Avantaje:Ieftin de fabricatPot fi utilizate cu orice (manusi, stylus)Dezavantaje:Nu suporta gesturi multi-touchNu sunt foarte sensibile

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Ecranul tactil

Capacitiv (eng. Capacitive)

Bazat pe idee ca corpul este un conductor electricAtingerea ecranului determina schimbarea campuluielectrostaticUltimele tehnologii permit includerea de condensatori inacelasi strat cu ecranulAvantaje:Foarte sensibil, nu are nevoie de stylusSuporta multi-touchDezavantaje:Nu functioneaza prin hainePret ridicat

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Canalele de I/O





Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Ecranul

Reprezinta cel mai comun dispozitiv de iesire

Exemple de sisteme deosebite: sisteme audio, alarme sauautomotive - nu folosesc neaparat ecran ca si iesirestandard

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Ecranul

Toate ecranele de calculator folosesc un bitmap

Constau dintr-o matrice de puncte colorate (sau alb/negru,sau nuante de gri) aranjate pe orizontala si verticala

Numarul de culori afecteaza cerinta de memorie:

Exemplul unui ecran FullHD (1920x1080)Alb-negru: 1920x1080x1 bit = 259,200 bytes16 niveluri de gri: 1920x1080x4 biti = 1,036,800 bytes”True color”: 1920x1080x32 biti = 8,294,400 bytes

RGB, fiecare are cate 8 biti. Dar ... 8+8+8=24

Exista si monitoare cu 30,36 sau mai multi bpp

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Ecranul

Tehnologii comune

Tubul catodic (ecranele CRT)

Ecrane cu cristale lichide

Ecrane OLED (eng: organic light emitting diode)

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Ecranul


Mult timp a fost cea mai comuna tehnologie

Componente principale

Tun de electroniTub vidatEcran cu un strat de fosfor

Functionare

Fasciculul de electroni baleiaza pe suprafata ecranuluiFosforul lovit de electroni straluceste, formand imagineaEfectul este de scurta durata, asa ca este reluat

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Ecranul


Aspecte caracteristice

Cat de des este ”lovit” acelasi fosor de fasciculul deelectroni

Rata de reaamprospatare (eng. refresh rate)Prea mic, deranjant pentru ochiUtilizarea unui fosfor ce straluceste mai mult timp =¿probleme la afisarea animatiilor

Posibile riscuri pentru sanatate

Emisii de raze X in mare parte absorbite de ecran (dar nuin spate)Radiatii in gamele invizibile (ultravioleta si infrarosie)Camp electromagnetic ce creeaza un curent electric(inclusiv in corpul uman)

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea



”CRT color enhanced” by grmwnr (homewiki) Licensed under CC BY-SA 3.0

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Ecranul


Componentele in detaliu

1 Tunuri de electroni (cate unul pentru fiecare din RGB)2 Fasciculele de electroni3 Bobine de focalizare4 Bobine pentru pozitionarea pe ecran5 Masca pentru fiecare canal de culoare6 Stratul de fosfor ce acopera ecranul

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea


Litera ”e”

”Shadow mask closeup cursor” by Seluk Oral (drumex) - Own work. Licensed under CC BY-SA 3.0

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea


Pointerul mouse-ului

”Aperture grille closeup teletext” by Seluk Oral (drumex) - Own work. Licensed under CC BY-SA 3.0

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Ecranul


Utilizate in cadrul primelor calculatoare portabile

Au caracteristici ergonomice care au facut ca ele sa preiadominatia de la ecranele CRT

Majoritatea ecranelor de astazi folosesc tehnologii LCD

Aceste ecrane nu emit lumina proprie

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea


”LCD layers”. Licensed under CC BY-SA 3.0

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Ecranul


Componentele

1 Filtru polarizant2 Electrozi (aici se formeaza formele vizibile)3 Cristal lichid4 Filtru polarizant5 Oglinda (sau sursa de lumina pentru ecrane

retro-iluminate)

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Ecranul


Caracteristici

1 Tehnologia permite construirea de ecrane subtiri2 Consumul de curent este mic (in special cu retroiluminare

LED)3 Nu emite radiatii4 Mai multe tipuri de tehnologii care variaza intre cost scazut

si reproducere fidela a culorii, unghiuri mari de vizibilitate

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Ecranul

Ecrane OLED (eng: organic light emitting diode)

Materie organica = Care provide din plante, animale

Compus organic = O clasa de compusi a caror moleculacontine carbon

Dioda = componenta electronica prin care curentul poatecircula intr-o singura directie

AvantajePixelii negri cu consuma curentContrast infinit (?)Este posibila dezvoltarea de ecrane flexibile (nu e necesararetroiluminarea)

DezavantajeSe degradeaza cu utilizareaContrast infinit (?)Consum mare de curent pentru afisarea de imaginiluminoase

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Ecranul

”Nexus one screen microscope” by Matthew Rollings at en.wikipedia. Licensed under CC BY 3.0

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Canalele de I/O





Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Hartia digitala

Hartia digitala

Lumina este reflectata, imita hartia

Nu au nevoie de curent pentru a afisa o imagine statica.Curentul este aplicat doar pentru a schimba culoarea unuipixel

Exista posibilitatea de a introduce retroiluminarea

Utile pentru etichete, eReadere

Exemple de ceasuri, telefoane?

Provocarea curenta - hartia electronica color

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Hartia digitala

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Hartia digitala

Varianta grayscale

”Electrophoretic display 001” by Senarclens - self-made using Inkscape. Licensed under CC BY-SA 3.0

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Hartia digitala

Implementare color

”Epd color” by Gerald Senarclens de Grancy - Own work. Licensed under CC BY 3.0

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Hartia digitala

Implementare color

”Kindle 3 texture (crop)” by HorsePunchKid - Own work. Licensed under CC BY-SA 3.0 via Wikimedia

Commons

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Canalele de I/O





Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Sunete

Cel mai des utilizate impreuna cu un output vizual (ecran)

Combinarea mai multor canale de feedback (vizual,auditiv) ajuta la o mai buna interactiune cu un sistem

Noi abordari in accesibilitate

Sunetul este foarte important pentru nevazatoriIdeea 1: Navigarea prin senzori care transforma mediulinconjurator in suneteDisonanta dintre vaz - auz (e greu de interpretat sursa amai mult de 3-5 sunete)Ideea 2: Reprezentarea prin sunete a elementelor GUIFace parte din accesibilitate, vom reveni in cursurileurmatoare

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Canalele de I/O





Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Tactile

Dispozitivele sunt dotate cu force feedback furnizeazadiferite niveluri de rezistenta in functie de starea operatieivirtuale

”Stick shaker”-ul din aviatie, mecanism pentru avertizareapilotului odata ce unghiul de atac cauzeaza pierdereaportantei

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Tactile

eReader Braille

”Braille e-book” by Source. Licensed under Fair use via Wikipedia

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

I/O in lumea inconjuratoare

In locuri publice: usi si robinete cu senzori, dispensoare deprosoape

In lumea automotive: heads-up display, feedback tactil

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea


Omul


Calculatorul


Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Tactile

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Memoria

Mai multe nivele, similar cu memoria umana

Fiecare nivel are mai mult spatiu de stocare, dar acces mailent

Tipurile de memorie

Registrii CPUMemoria cacheMemoria RAMMemoria non-volatila

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Memoria

Memoria volatila - de ”scurta” durata

Registrii CPU

Memoria cache

Memoria RAM

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Memoria

Registrii CPU

Datele pe care se efectueaza calcule trebuie aduse inregistrii

Timp de access aproximativ 1 ciclu de ceas

Registrii 16/32/64 bit pentru x86

AL/AH/AX/EAX/RAX

BL/BH/BX/EBX/RBX

CL/CH/CX/ECX/RCX

DL/DH/DX/EDX/RDX

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Memoria

Registrii x86 de uz general

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Memoria

Registrii x86 - tabloul complet

”Table of x86 Registers svg” by Immae - Own work. Licensed under CC BY-SA 3.0 via Wikimedia Commons

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Memoria

Memoria cache

Def: cache = a collection of items of the same type storedin a hidden or inaccessible place

Utilizat pentru a reduce timpul de access dintre CPU simemoria RAM

Memoria cache duplica anumite zone ale memoriei RAM

De doua tipuri: de date si instructiuni

Dimensiune mica, timp de access extrem de mic

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Memoria

Memoria cache - cum functioneaza?

Cand are nevoie sa acceseze memoria, procesorul verificadaca datele exista in cache

Doua cazuri

Exista - cache hitNu exista - cache miss

In caz de cache miss, datele sunt aduse din RAM sicopiate in cache

Ce se intampla in cazul unui cache miss?

Abordari: Out of order execution, simultaneousmultithreading

Optimizarea accesului la cache, preocupare constanta atatpe partea de hardware, cat si software (compilatoare,interpretoare)

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Memoria

Memoria cache - exemplu CPU modern

L1 - 64Kb per nucleu (˜4 cicluri)

L2 - 256Kb per nucleu (˜11 cicluri)

L3 - 2- 20 Mb partajati (˜28 cicluri)

RAM - ˜28 cicluri + ˜50 nanosecunde

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Memoria

Memoria non-volatile - de ”lunga” durata

Medii de stocare

Magnetice: dischete, hard-discuriOptice: CD, DVD, BLU-RAYNAND: USB Flash, Solid State Drives

Capacitate mare

Viteza de access - milisecunde, microsecunde

Uneori este nevoie de transfer din memoria de scurtadurata in cea de lunga durata (sau invers)

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Memoria

Memoria non-volatile - de ”lunga” durata

Medii magnetice - scrierea/citirea se face printr-un ac caretrece deasupra suprafetei discului

Dischete - intre 300kb si 1.44MbHDD - ?

Medii optice - scrierea/citirea se face printr-un laser ce areo anumita lungime de unda (Blu-Ray)

CD, DVD, Blu-Ray

Medii electronice - scrierea/citirea se face in celule dememorie non-volatila (memorie flash, NAND)

Stick-uri USB, unitati SSD

Avantaje/dezavantaje?

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Memoria

Componente principale HDD

”Hard drive-en” by I, Surachit. Licensed under CC BY-SA 3.0 via Wikimedia Commons

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Memoria

Care din aceste componente se reprezinta in interfatagrafica?

Care sunt reprezentarile intalnite?

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea


Omul


Calculatorul


Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Procesarea

”Haswell Chip” by Intel Free Press - Flickr: Haswell Chip. Licensed under CC BY 2.0

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Procesarea

Calculatoarele ce pot rula programe interactive proceseazamai multe de 100 milioane instructiuni/secunda(aproximativ Intel 80486+)

Aspect important din punct de vedere al HCI, influenteazaanaliza si proiectarea sistemelor software

Viteza de reactie a programului trebui corelata cu cea aoperatorului:

Cand procesarea se realizeaza prea incet (sistemul faceceea ce trebuie, dar feedback-ul e prea lent)Cand procesarea este intrerupta - razboiul iconitelorutilizatorul actioneaza un control, nu primeste raspunsactioneaza un nou control apoi toate click-urile suntinterpretate rapid

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Procesarea

Exemplu:

Multe jocuri gandite pentru 386/486 masoara timpul incicluri de ceas si nu in ”timp real”.

Ele pot fi jucate pe un CPU modern doar printr-unprogram interfata, altfel actiunea ar decurge (mult, mult,mult) prea repede

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Procesarea

Mitul masinii de viteza infinita (eng: The myth of the infinitelyfast machine)

Proiectantii presupun implicit ca masina care executacomenzile raspunde instantaneu

Masina ar trebui sa ofere feedback asupra momentuluicand input-ul este preluat (ex: beep-uri cand se apasatastele telefonului, feedback haptic)

Exista eforturi de a formaliza aceste aspecte:http://alandix.com/academic/papers/hci87/

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Procesarea

”Legea” lui Moore

In 1965, denumita dupa ce Gordon Moore, co-fondator alIntel a observat un sablon

Viteza procesoarelor e strans legata de numarul detranzistori, care s-a dublat la fiecare 18 luni

In 1987, CPU de 1.47Mhz, in 2002, un sistem de 1.5 Ghz -asadar in 15 ani (10 x 18 luni), o viteza de aproximativ1000 ori mai mare (210 ori).

Un lucru similar se observa si la memorii

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Procesarea

”Transistor Count and Moore’s Law - 2011” by Wgsimon - Own work. Licensed under CC BY-SA 3.0 via

Wikimedia Commons

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Procesarea

”Legea” lui Moore

Efectele acestei observatii sunt extrem de importante

Multe din imbunatatirile ce tin de HCI sunt legate directde legea lui Moore

Categorii noi de dispozitive (de la microcalculatoare in ...jos?)Interfete grafice cu utilizatorulI/O bazat pe sunete, voceCulori, animatii

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Procesarea

Sfarsitul ”legii” lui Moore?

Mai multe informatii

http://www.intel.com/content/www/us/en/history/museum-gordon-moore-law.html

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Procesarea

Cum se fabrica un procesor?

De la nisip la silicon

http://newsroom.intel.com/docs/DOC-2476

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea

Limitari de performanta in sisteme interactive

Generate de mai multi factori

Computationali

Ale sistemului de stocare

Ale sistemului grafic

Ale retelei

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea


Factori computationali

In cazul sistemelor care fac procesari a caror durata eobservabila

Exemplu: Cautarea intr-un fisier text mare (¿100 Mb)

Interactiunea trebuie proiectata astfel ca sistemul sa nufaca procesari in timpul ei

Trebuie indicat ca procesarea a inceput si cat va dura inmomentul declansarii

Afisati un progress bar care sa indice lucrul deja efectuat

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea


Un exemplu... creativ, mai multe se gasesc urmand linkul demai jos

Sursa: http://www.viktorhertz.com/50714/2154528/home/work-in-progress-bars

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea


Un alt exemplu...

http://xkcd.com/612

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea


Factori ce tin de sistemul de stocare

Marea majoritate a programelor fac un troc intre memoriesi puterea de procesarea

Exemplu: Compresia datelor

Bazat pe faptul ca procesorul si memoria sunt mult mairapide ca si sistemul I/O

Interactiunea trebuie proiectata astfel ca scenariile celemai comune sa functioneze fara intreruperi

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea


Factori ce tin de sistemul grafic

Output-ul trebuie sa fie corelat cu puterea de calcul adispozitivelor tinta

Exemplu: Cum a evoluat grafic sistemul de operareWindows?

”Windows Classic”LunaWindows Aero (sau Windows Basic, SAU Windows Classic)Windown Modern

Aceeasi tendinta se poate observa si in dispozitivele mobile

Observam o detasare de la reprezentarea obiectelor,texturilor din lumea reala (eng. skeuomorphism) si oorientare spre interfete ”plate”, simple

Cursul 02

Arthur Molnar

Recapitulare

Calculatorul

Canalele de I/O



Memoria

Procesarea


Factori ce tin de retea

Proiectarea trebuie sa tina cont de retele de mai multeviteze, latente

Exemplu: Cum implementati comunicarea asincronaintr-un program cu GUI?

human-computer interaction curs 2 - facultatea de ...arthur/hci/lecture notes/curs.02.pdf ·...

Documents