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
March 10, 2015
Cursul 02
Arthur Molnar
Recapitulare
Calculatorul
Canalele de I/O
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Overview
1 Recapitulare
2 CalculatorulCanalele de I/ODispozitive de intrareDispozitive de iesireMemoriaProcesarea
Cursul 02
Arthur Molnar
Recapitulare
Calculatorul
Canalele de I/O
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Recapitulare
Introducere
Evolutia conceptului de HCIElemente fundamentaleModel Human Processor
Omul
VedereaAuzulSimtul tactilMiscareaMemoriaGandirea
Cursul 02
Arthur Molnar
Recapitulare
Calculatorul
Canalele de I/O
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Componentele interactiunii om-calculator
Omul
Canale de I/OMemoriaProcesarea
Calculatorul
Canale de I/OMemoriaProcesarea
Cursul 02
Arthur Molnar
Recapitulare
Calculatorul
Canalele de I/O
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Model Human Processor
Dezvoltat de Card, Moran si Newell (1989)
Cursul 02
Arthur Molnar
Recapitulare
Calculatorul
Canalele de I/O
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Componentele interactiunii om-calculator
Omul
Canale de I/OMemoriaProcesarea
Calculatorul
Canale de I/OMemoriaProcesarea
Cursul 02
Arthur Molnar
Recapitulare
Calculatorul
Canalele de I/O
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Canalele de I/O
http://xkcd.com/722/
Cursul 02
Arthur Molnar
Recapitulare
Calculatorul
Canalele de I/O
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Tastatura
http://en.wikipedia.org/wiki/QWERTY
Cursul 02
Arthur Molnar
Recapitulare
Calculatorul
Canalele de I/O
Dispozitive deintrare
Dispozitive deiesire
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
http://en.wikipedia.org/wiki/QWERTY
Cursul 02
Arthur Molnar
Recapitulare
Calculatorul
Canalele de I/O
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Tastatura
Problemele primului model
Caracterele erau montate pe brate metalice care se puteaublocaOperatorul nu vedea imediat caracterele scrise si nudescoperea problemele
http://en.wikipedia.org/wiki/QWERTY
Cursul 02
Arthur Molnar
Recapitulare
Calculatorul
Canalele de I/O
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Recunoasterea privirii
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Recunoasterea privirii
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Dispozitive de pozitionare, indicare, desenare
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Dispozitive de pozitionare, indicare, desenare
Mouseul mecanic
”Mouse mechanism diagram” by Jeremykemp. Licensed under Attribution via Wikimedia Commons
Cursul 02
Arthur Molnar
Recapitulare
Calculatorul
Canalele de I/O
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Dispozitive de pozitionare, indicare, desenare
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Dispozitive de pozitionare, indicare, desenare
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Dispozitive de pozitionare, indicare, desenare
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Dispozitive de pozitionare, indicare, desenare
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Dispozitive de pozitionare, indicare, desenare
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Dispozitive de pozitionare, indicare, desenare
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Ecranul
Tubul catodic (ecranele CRT)
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Ecranul
Tubul catodic (ecranele CRT)
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Dispozitive de pozitionare, indicare, desenare
Tubul catodic (ecranele CRT)
”CRT color enhanced” by grmwnr (homewiki) Licensed under CC BY-SA 3.0
Cursul 02
Arthur Molnar
Recapitulare
Calculatorul
Canalele de I/O
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Ecranul
Tubul catodic (ecranele CRT)
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Dispozitive de pozitionare, indicare, desenare
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Dispozitive de pozitionare, indicare, desenare
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Ecranul
Ecrane cu cristale lichide
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Dispozitive de pozitionare, indicare, desenare
”LCD layers”. Licensed under CC BY-SA 3.0
Cursul 02
Arthur Molnar
Recapitulare
Calculatorul
Canalele de I/O
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Ecranul
Ecrane cu cristale lichide
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Ecranul
Ecrane cu cristale lichide
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Hartia digitala
Cursul 02
Arthur Molnar
Recapitulare
Calculatorul
Canalele de I/O
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Componentele interactiunii om-calculator
Omul
Canale de I/OMemoriaProcesarea
Calculatorul
Canale de I/OMemoriaProcesarea
Cursul 02
Arthur Molnar
Recapitulare
Calculatorul
Canalele de I/O
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Tactile
Cursul 02
Arthur Molnar
Recapitulare
Calculatorul
Canalele de I/O
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Memoria
Memoria volatila - de ”scurta” durata
Registrii CPU
Memoria cache
Memoria RAM
Cursul 02
Arthur Molnar
Recapitulare
Calculatorul
Canalele de I/O
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Memoria
Registrii x86 de uz general
Cursul 02
Arthur Molnar
Recapitulare
Calculatorul
Canalele de I/O
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Componentele interactiunii om-calculator
Omul
Canale de I/OMemoriaProcesarea
Calculatorul
Canale de I/OMemoriaProcesarea
Cursul 02
Arthur Molnar
Recapitulare
Calculatorul
Canalele de I/O
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Limitari de performanta in sisteme interactive
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Limitari de performanta in sisteme interactive
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Limitari de performanta in sisteme interactive
Un alt exemplu...
http://xkcd.com/612
Cursul 02
Arthur Molnar
Recapitulare
Calculatorul
Canalele de I/O
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Limitari de performanta in sisteme interactive
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Limitari de performanta in sisteme interactive
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
Dispozitive deintrare
Dispozitive deiesire
Memoria
Procesarea
Limitari de performanta in sisteme interactive
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?