53
Interakcija človek-računalnik ČLOVEK Input / output informacij Vidne, slušne, tipne, premikanje Informacija shranjena v spominu Senzorni, kratkoročni (delovni), dolgoročni Obdelava in uporaba informacij Sklepanje, reševanje problemov, veščine, napake Čustva vplivajo na človekove sposobnosti Ljudje smo si različni Kako poteka proces zaznave? Čutnice (v očesu – čepki in paličice; v ušesu – slušne celice v notranjem ušesu; v nosu – vohalne čutnice; v koži; na jeziku – okušalne čutnice) zaznajo dražljaj (stimulus) Dražljaj je lahko svetlobni (vid), mehanski (sluh, tip), kemični (vonj, okus) Čutnice pretvarjajo različne oblike dražljajev v živčne impulze Ti se po živcih prenašajo do ustreznih centrov v možganih, kjer prihaja do nadaljnje obdelave (procesiranja) Vid Dve stopnji: Fizična zaznava dražljaja (signala) Obdelava (procesiranje) in interpretacija dražljaja 1

Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Interakcija človek-računalnikČLOVEK

Input / output informacij

Vidne, slušne, tipne, premikanje

Informacija shranjena v spominu

Senzorni, kratkoročni (delovni), dolgoročni

Obdelava in uporaba informacij

Sklepanje, reševanje problemov, veščine, napake

Čustva vplivajo na človekove sposobnosti

Ljudje smo si različni

Kako poteka proces zaznave?Čutnice (v očesu – čepki in paličice; v ušesu – slušne

celice v notranjem ušesu; v nosu – vohalne čutnice; v koži; na jeziku – okušalne čutnice)

zaznajo dražljaj

(stimulus)

Dražljaj je lahko svetlobni (vid), mehanski (sluh, tip), kemični (vonj, okus)

Čutnice pretvarjajo različne oblike dražljajev v živčne impulzeTi se po živcih prenašajo do ustreznih centrov v možganih, kjer prihaja do nadaljnje

obdelave (procesiranja)

VidDve stopnji:

Fizična zaznava dražljaja (signala)

Obdelava (procesiranje) in interpretacija dražljaja

Izredna kakovost in kontinuirnost podob sveta, ki ga vidimo, sta posledica nenehnega

posadabljanja slik oz. vidnih vtisov s strani našega vidnega aparata (oči + možgani)

Posodobitve – gibanje, barve, podrobnosti, itd. – so

tako pogoste in popolne, da skoraj nikoli ne zaznamo “digitalne prevare”

Oko – fizična zaznava dražljaja

1

Page 2: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Mehanizem za sprejemanje svetlobe in njeno pretvorbo v živčni impulz (električno

energijo)

Svetloba se od predmetov odbija

Na mrežnico se projicirajo obrnjene slike predmetov

Mrežnica vsebuje paličice za gledanje pri šibki svetlobi in čepke za barvni vid

Ganglijske celice v možganih odkrivajo vzorce in gibanje

Interpretacija signala:Velikost in globina

Vidni kot pove, kolikšen del vidnega polja zavzema predmet (odvisen od velikosti

predmeta in oddaljenosti od očesa)

Ostrina vida je sposobnost zaznavanja podrobnosti (omejena)

Znani predmeti se nam zdijo vedno enako veliki (kljub drugačnemu vidnemu kotu

oddaljenih predmetov)

Pripomočki kot je prekrivanje nam pomagajo pri ocenjevanju velikosti in globine

Svetlost

Subjektivna reakcija na različno jakost (intenziteto) svetlobe

Nanjo vpliva količina od predmeta odbite svetlobe – luminanca

Barva

Sestavljena iz treh komponent – barvnega tona (odtenka), intenzitete in nasičenja

Čepki so občutljivi na valovne dolžine svetlobe

Najnižja je ostrina vida (občutljivost) za modro svetlobo

8% moških in 1% žensk je barvno slepih

Vidni sistem izvaja korekcije upoštevaje

Gibanje

Spreminjanje luminance predmetov

V dvoumnih primerih se vključi razumevanje konteksta

Optične prevare se včasih pojavijo kot rezultat “nadkompenzacije”

Branje

2

Page 3: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Več stopenjZaznavanje vidnega vzorca

Dekodiranje s pomočjo interne predstavitve jezika

Interpretacija na podlagi poznavanja sintakse, semantike, pragmatike

Branje – sakade in fiksacije

Do zaznave prihaja v trenutkih fiksacije

Za prepoznavanje je pomembna oblika črk oz. besed

Močan kontrast izboljša branje z računalniškega monitorja

SluhPodaja informacije o okoljuRazdalje, smeri, predmeti, itd.

Slušni organ je sestavljen iz treh delovZunanje uho: ščiti notranje dele in ojača zvok

Srednje uho: prenaša zvočne valove v obliki vibracij do notranjega ušesa

Notranje uho: pretvarja zvočne valove v živčne impulze, ki se po slušnem živcu prenašajo

v možgane

ZvokFrekvenca (pitch): višina

Amplituda (loudness): glasnost

Barva (timbre, tone quality): razlika v tonu dveh različnih glasbenih instrumentov, ki

zaigrata isto noto

Ton – zvok, sestavljen iz ene same frekvence

Ljudje lahko slišimo frekvence med 20 Hz in 20 kHz

Slušni aparat filtrira zvoke “Cocktail party” fenomen

TipDaje pomembno povratno informacijo o okolju

Običajno glavno čutilo pri osebah s prizadetim vidom

V koži obstajajo različni receptorji

Termoreceptorji – vroče/hladno

Nocireceptorji – bolečina

Mehanoreceptorji – pritisk

Nekatera področja so občutljivejša od drugih (npr. prstne blazinice)

Kinestetika – zavedanje položaja telesa in njegovih delov

Premikanje

3

Page 4: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Čas potreben za odziv na dražljaj: reakcijski čas + čas premika

Čas premika je odvisen od starosti, treninga, itd.

Reakcijski čas je odvisen od vrste dražljaja:

Vidni: ~ 250 ms

Slušni: ~ 150 ms

Bolečina: ~ 700 ms

Fitts-ov zakon – čas potreben da zadenemo tarčo: Mt = a + b log2(D/S + 1)

a, b ... empirično določeni konstanti

Mt ... čas premika

D ... razdalja do tarče

S ... velikost tarče

Tarča naj bo čim večja, oddaljenost od nje čim manjša

SpominTri vrste spomina

SENZORIČNI

KRATKOTRAJNI (DELOVNI)

DOLGOTRAJNI

Senzorični (ultrakratkotrajni) spominPufer za različne dražljaje, ki jih prejmemo skozi čutila (vidne, slušne, tipne)

Primeri:

Sparkler trail

Stereo zvok

Senzorični spomin se neprestano prepisuje z novimi vtisi

Informacija, ki ostane v senzoričnem spominu vsaj ~20 sekund, se prenese v kratkotrajni

spomin

Kratkotrajni spomin

4

Page 5: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Beležka za začasno pomnjenje

Hiter dostop: 700 ms

Hiter pozaba: 200 ms

Omejena kapaciteta: 7 ± 2 enoti

Informacija, ki ostane v kratkotrajnem spominu vsaj 20min, se prenese v dolgotrajni

spomin

Dolgotrajni spomin Skladišče vsega našega znanja

Počasen dostop – 1/10 s in počasna pozaba

Pozabljanje je odvisno od pogostosti uporabe in zapomnljivosti informacije

Velika oz. neomejena kapaciteta

Dve obliki:

Epizodni-serijski spomin na dogodke

Semantični – strukturirani spomin o dejstvih,… Semantični spomin izhaja iz

epizodnega. Omogoča dostop do informacij in predstavlja odnose med posameznimi

koščki informacij. Podpira sklepanje na podlagi nasledstva.

Mišljenje Sklepanje (utemeljevanje): Dedukcija, indukcija, abdukcija

Reševanje problemov

Deduktivno sklepanje- Dedukcija: izvajanje logično nujnih zaključkov iz danih postavk:

PRIMER: - Če je danes ponedeljek bom šel v službo

- Danes je ponedeljek

- Sklep: šel bom v službo

- Včasih pride do spora med resnico in logično pravilnostjo:

PRIMER: - nekateri ljudje so otroci

- nekateri ljudje jočejo

- Sklep: nekateri ljudje jočejo

Induktivno sklepanje- Indukcija: posploševanje iz konkretnega primera na splošno pravilo

PRIMER: Vsi sloni, ki smo jih videli, imajo rilce, torej imajo vsi sloni rilce

- Uporaben, čeprav nezanesljiv način sklepanja (možno je dokazati le zmoto,ne

pa pravilnost argumentiranja)

5

Page 6: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Abduktivno sklepanje- Abdukcija: sklepanje iz posledice na vzrok

PRIMER: - Lojze vozi hitro kadar je pijan

- Če vidim Lojzeta voziti hitro sklepam da je pijan

- Nezanesljiva, lahko vodi do napačnih sklepov

Reševanje problemovReševanje neznanih problemov: različne teorije(Geštalt, teorija problemskega polja),

različni pristopi (uporaba analogije, pridobivanje veščin ali spretnosti)

Napake in mentalni modeli- Vrste napak: nenamerne napake (pravilen namen), prave napake (napačen

namen)

Čustva- Različne teorije o delovanju čustev:

- James - Lange (čustvo je naša interpretacija fiziološkega odziva na dražljaj)

- Cannon (čustvo je psihološki odziv na dražljaj)

- Schacter – Singer (čustvo je rezultat naše ocene naših fizioloških odzivov v

luči celotne situacije)

- Biološki odziv na fizični dražljaj imenujemo afekt, ki vpliva na naš odziv v

določeni situaciji.

- Pomen čustev v zvezi z zasnovo in oblikovanjem uporabniškega vmesnika:

- Stres otežuje reševanje problemov

- Sproščeni uporabniki bodo manj kritični do pomanjkljivosti pri oblikovanju

vmesnika

- Estetsko dovršeni in prijetni vmesniki povečujejo pozitivni afekt

Individualne razlike Dolgoročne: spol, fizične in intelektualne sposobnosti

Kratkoročne: učinek stresa ali utrujenosti

Spremenljive: starost uporabnikov

Psihologija in zasnova interaktivnega umesnika

6

Page 7: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

- Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

podrobnosti te barve NE uporabimo)

RAČUNALNIKRačunalniški sistem je sestavljen iz različnih elementov

Vsak od njih vpliva na interakcijo

Vhodne naprave: vnos besedila, kazalne naprave

Izhodne naprave: zaslon, digitalni papir

Navidezna resničnost: posebne naprave za interakcijo in prikaz

Fizična interakcija: zvok, tip, biosenzorji

Papir: kot izhodna (tiskanje) ali vhodna (skeniranje) enota

Pomnilnik: začasno (RAM) hranjenje in trajni mediji, kapaciteta in dostop

Procesiranje: hitrost, omrežja

Interakcija z računalnikomDa bi razumeli interakcijo človek-računalnik, moramo dobro poznati in razumeti računalnik!

Monitor (računalniški zaslon) z okni

Tipkovnica

Miška

Ohišje računalnika

Variacije:

Namizni računalnik

Prenosni računalnik (laptop)

PDA (dlančnik, ročni računalnik)

Od vrste uporabljene naprave je odvisno, kakšna bosta uporabniški vmesnik ter oblika oz.

način interakcije

Koliko je računalnikov …

7

Page 8: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Pri vas doma:

Osebni računalnik

Kabelska/satelitska TV, videorekorder, HiFi stolp, DVD predvajalnik

Kuhalnik, mikrovalovna pečica, pralni stroj, pomivalni stroj

Centralno ogrevanje

Varnostni sistem

V vaši torbi/žepu:

Mobilni telefon, PDA

Digitalni fotoaparat/kamera

Pametna kartica (plačilna, zdravstvena kartica)

USB pomnilniški ključ

Avtomobilski ključ z daljinskim zaklepanjem

Kako je z interaktivnostjo?Pred davnimi časi…paketna obdelava podatkov

Gore luknjastih kartic, velike podatkovne datoteke

Dolgo čakanje na rezultat obdelave, izpis z matričnim tiskalnikom

Ob – pogostih – napakah ponovitev celotnega postopka

Danes: interaktivnost

Hitra povratna informacija, kratki odzivni časi

Upravljanje in nadzor sistema večino časa v rokah uporabnika

Delovanje namesto razmišljanja: Ali je hitreje vedno tudi bolje ?

Naprave za vnos besedilaTipkovnica (QWERTY itd.)

Vnos črk/številk na telefonih, mobilnih napravah

Rokopis

Govor

TipkovnicaNajbolj razširjena naprava za vnos besedila v osebni računalnik

Izkušenemu uporabniku omogoča hiter vnos besedila in številk

S pritiskom na tipko pošljemo ustrezno znakovno kodo

Z računalnikom običajno povezana s kablom, lahko pa tudi brezžično

8

Page 9: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Tipkovnica QWERTYStandardizirana razporeditev tipk, toda…

Ne-alfanumerični znaki razporejeni različno

Za različne pisave oz. jezike potrebni posebni simboli (č, š, ž, ö, å, ñ)

Manjše razlike med nacionalnimi tipkovnicami (QWERTZ, QZERTY,

AZERTY,itd.)

QWERTY razporeditev za tipkanje ni optimalna

Alternativne razporeditve tipk omogočajo hitrejše tipkanje, a se zaradi vsesplošne

razširjenosti QWERTY tipkovnic ne morejo uveljaviti

Alternativne razporeditve tipkAbecedna

Tipke razvrščene po abecedi

Tipkanje ni hitrejše ne za izkušene uporabnike ne za začetnike

Dvorakova

Pogosteje uporabljane črke oz. znaki so lažje dosegljivi (v sredini tipkovnice in

pod močnejšimi prsti)

Desna roka več v uporabi – večina ljudi je desničarjev

Tipkanje pogostejših črkovnih kombinacij poteka izmenično z levo in desno roko

10-15% hitrejše tipkanje in manjša utrujenost

Posebne tipkovniceRazvite za zmanjšanje utrujenosti (RSI !)

Enoročne tipkovnice (npr. Maltronova)

Akordična tipkovnica

Majhno število tipk (do pet)

Vnos znakov s pritiskanjem različnih kombinacij tipk

Strma krivulja učenja

Idealno za mobilne naprave (wearable computers !)

Vnos besedila v mobilne telefoneEn- ali večkratni pritisk numerične tipke

2 – a b c 6 – m n o

3 – d e f 7 – p q r s

4 – g h i 8 – t u v

5 – j k l 9 – w x y z

9

Page 10: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Npr. zivjo = 99994448885666 – dokaj hitro!

Vnos T9

Zgolj enkratni pritisk za vsako črko

Vgrajeni slovar pomaga “uganiti” pravo besedo

Zivjo = 94856 Vnos besedila v računalnik s pomočjo posebnega pisala in na pritisk občutljive pisalne

površine

Naravna interakcija

Tehnične težave

Ločevanje besedila na posamezne črke

Interpretacija posameznih črk

Upoštevanje različnih slogov rokopisov oz. pisav

Uporaba v PDA in tabličnih računalnikih

Tipkovnica ni več potrebna

Prepoznavanje govoraHiter razvoj

Uspešno ob izpolnjenih določenih pogojih:

En sam uporabnik; učenje (trening) sistema o posebnostih uporabnikovega govora

Omejen besedni zaklad

Težave

Moteči zunanji zvoki, hrup

Nejasna oz. nenatančna izgovorjava

Obširen besedni zaklad

Različni govorci

Numerična tipkovnicaHiter vnos številk

Kalkulator, tipkovnica na osebnem računalniku

Razpored številk na telefonih običajno drugačen (Telefon, bankomat Kalkulator, PC)

Pozicioniranje, kazanje, risanjeMiška (mouse)

10

Page 11: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Sledilna ploščica (touchpad)

Igralna palica (joystick)

Sledilna kroglica (trackball)

Zaslon na dotik (touch screen)

Pisalo (stylus)

Grafična tablica (tablet)

Sledenje pogledu (eye tracking)

Smerne tipke (cursors)

MiškaRočna kazalna naprava

Zelo razširjena, enostavna za uporabo

Natančen, hiter odziv

Značilnosti

Ravninsko gibanje

Gumbi – eden do trije, namenjeni za izbiranje predmetov na zaslonu, odpiranje menijev,

risanje, itd.

Miška (2)Leži na mizi

Zavzema prostor

Roka se ne utrudi

Zaznava le posredno gibanje

Miškino gibanje premika kazalec na zaslonu

Miška – premikanje v (x,y) smeri, kazalec – premikanje v (x,z) smeri

Včasih težave s koordinacijo roka-oči pri začetnikih

Delovanje miškeDve možnosti zaznavanja gibanja

Mehansko:

- Ob premikanju se vrti kroglica na spodnji strani miške

- Deluje na praktično vsaki ravni površini

Optično:- Svetleča dioda (LED) na spodnji strani miške

11

Page 12: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

- Relativno gibanje v (x,z) ravnini se izračuna na podlagi zaznanih sprememb v

intenziteti reflektirane svetlobe

- Manj občutljiva na prah in umazanijo kot mehanska

Sledilna ploščicaMajhna na dotik občutljiva ploščica

Kazalec na zaslonu premikamo z drsenjem po ploščici in s “tapkanjem”

Večinoma v uporabi v prenosnikih

Pomembne nastavitve:

Jakost pritiska za klik

Hitrost dvoklika

Igralna palicaPosredno delovanje

Pritisk na palico ustreza hitrosti premikanja

Gumbi

Nameščeni na vrhu ali spredaj (sprožilec)

Pogosto v uporabi za računalniške igre, 3D navigacijo

Kazalna paličica (pointing stick) – pomanjšana igralna palica na prenosnikih

Na dotik občutljiv zaslonZazna prisotnost prsta ali pisala na zaslonu:

I/O naprava, možen hkraten vnos podatkov in prikaz informacij

Neposredna kazalna naprava

Prednosti:

Hitrost, ni potrebe po posebnem kazalcu (kurzorju)

Primeren za menijsko izbiranje

Uporaben v “sovražnem” okolju – čist, manjša nevarnost poškodbe

Pomanjkljivosti:

Prsti lahko umažejo zaslon

Nenatančen – težko izbrati majhna območja, natančno risati

Običajno potrebno premikanje cele roke

Pisalo

12

Page 13: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Peresu podobna naprava za vnos podatkov:

Risanje neposredno po zaslonu

Lahko uporablja na dotik občutljivo površino ali magnetno detekcijo

Razširjen v PDA, tabličnih računalnikih, ipd.

Neposredna, enostavna uporaba

Ob pisanju/risanju zakrije zaslon

Sledenje pogleduVmesnik, ki deluje na principu sledenja smeri pogleda:

Npr. s tem, ko pogledamo element menija, ga izberemo

Laserski žarek nizke intenzitete se odbije od mrežnice

Prihodnost: kontrola brez uporabe rok (hands-free)

Za večjo natančnost potreben naglavni sistem z očali (headset)

Področja uporabe: raziskave na področju spletne uporabnosti (web usability) in

oglaševanja, oblikovanje embalaže, itd.

Smerne Smerne / pozicionirne tipkeŠtiri tipke na tipkovnici: levo, desno, gor, dol:

Le za osnovne funkcije premikanja (po besedilu, tabeli)

Najpogostejša razporeditev obrnjene črke T

V telefonih, TV/VCR/DVD daljinskih upravljalnikih, itd.:

Kurzorski gumbi ali mini igralne palice

V glavnem za menijsko izbiranje

Prikazovalne naprave

Monitor (katodna cev (CRT), tekoči kristali (LCD), plazma, drugo)

Digitalni papir

MonitorjiZaslon monitorja je “sestavljen” iz velikega števila obarvanih točk

13

Page 14: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Ločljivost in barvna globinaPojem ločljivosti se – nedosledno – uporablja za:

Število točk na zaslonu (Š x V) - npr. XGA: 1024 x 768, PDA: 240 x 400

Gostoto točk – št. točk na enoto dolžine (dpi) - tipično med 72 in 96 dpi

Razmerje širina:višina (aspect ratio)

4:3 ali 16:9 (širokozaslonski monitorji, HDTV)

Barvna globina

Št. bitov oz. možnih barv za vsako točko (ČB, sivinska, barvna slika)

8 bitov za R/G/B 2563 = 16,7 mio barv (24-bitna Truecolor)

CRT MONITOR:

Curek elektronov se zaleti v prikazovalno površino, ki je premazana s fosforjem, ki ob

stiku zažari.

Uporablja se pri televizorjih in monitorjih.

LCD:

Je manjši, lažji in nima težav s sevanjem. Uporablja se ga pri televizijah, monitorjih,

mobitelih, ...

VELIKI PRIKAZOVALNIKI:

Uporablja se jih za razne sestanke, seminarje,...Poznamo različne tehnologije: plazma,

video stene, projekcija, vzratna projekcija.

Digitalni papirJe tanek, upogljiv list, ki se elektronsko posodablja. Deluje na principu obračanja krogljic ali

kanalov z obarvano tekočino in kontrastnimi krogljicami.

Tisk Slika sestavljena iz majhnih točk

Kritični dejavniki:

- Ločljivost (velikost in razdalja med točkami), merjena v točkah na palec (dots

per inch,dpi)

- Hitrost (običajno merjena v št. strani na minuto)

- Cena oz. stroški tiska

Tehnologije tiskanja:

14

Page 15: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

- Matrični tiskalnik (uporabljajo trak s črnilom, tipična ločljivost-80-120dpi,

zastarela tehnologija)

- Brizgalni (ink-jet) tiskalnik (tiskalna glava pošilja majhne kapljice črnila na

papir, ločljivost je od 300dpi naprej)

- Laserski tiskalnik (na elektronsko nabito površino bobna se odlagajo delci

tonerja, ki se nato prenesejo na papir in tam termično fiksirajo, ločljivost od

600dpi naprej)

Skenerji Pretvorba iz analogne slike v digitalno

Delimo na dve glavni skupini:

- Ploski (dokument položimo na stekleno ploščo, celotna stran se pretvori v

rastersko sliko

- Ročni (s skenerjem gremo čez dokument)

Uporaba:

- namizno založništvo

- sistem za shranjevanje dokumentov

- posebni skenerji za diapozitive in foto. neg.

- optično prepoznavanje znakov

Pisave Pisava (font) – slog oz. tip besedila (Times, Helvetica, Arial,....)

Velikost pisave merjena v pikah in odraža višino znakov

Širina črk (pitch):

- Konstantna (vsi znaki imajo enako širino – npr. Courier New)

- Spremenljiva (nekateri znaki so širši od drugih – npr. Times New Roman)

Neserifna ali serifna pisava. Za branje z zaslona so boljše neserifne pisave

Čitljivost: male črke (lažje prepoznavanje oblike črk) in velike črke (bolj pomembne za

kratice oz. posamezne črke)

Shranjevanje podatkovNOTRANJI POMNILNIK

Bralno-pisalni pomnilnik: RAMo dostopni čas: 100ns

o izbris podatkov ob izklopu rač.

15

Page 16: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

o hitrost prenosa podatkov: 100MB/s

o kapaciteta (PC): 256MB-2GB

Bralni pomnilnik: ROMo Obstojen, podatki se ob izklopu ne izbrišejo

o Za shranjevanje zagonskih podatkov (BIOS), bliskovni pomnilnik, ...

ZUNANJI POMNILNIKMagnetni disk:

o Trdi disk- kapaciteta od 40 pa do 100GB, hitrost prenosa do 100kB/s

o Gibki disk- kapaciteta do 1,4MB in je zastarela teh.

Optični disk:

o Uporaba laserja za branje in pisanje

o CD-ROM, CD-R(W), DVD-ROM, DVD+R(W)

Stiskanje podatkov

Zmanjšanje količine potrebnega pomnilnika

Poznamo dva načina:

o Brezizgubno (lossless) stiskanje:

Povrne prvotno obliko slike ali besedila-npr. GIF, ZIP,... Gre za iskanje

skupnik značilnosti: AAABBCCCC- 3A, 2B, 4C

o Izgubno (lossy) stiskanje:

Delna povrnitev originalnih podatkov-npr. JPEG, MP3

Formati za shranjevanjeBESEDILO:

ASCII- 7bitni binarni sistem omogoča kodiranje 128 znakov

UTF-8- 8 bitno kodiranje 16-bitnega nabora znakov

RTF (rich text format)

SGML (dokument kot strukturirani objekti

XML (extended markup language-poenostavljena verzija SGML za spletne aplikacije)

MEDIJI:

16

Page 17: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Grafika (PostScript, GIF, JPEG, TIFF,...)

Audio/video (MPEG, WAV, QuickTime,...)

Uporabniški vmesnik –načrtovanje in izdelavaNačrtovanje uporabniškega vmesnika (UV)Načrtovanje oz. zasnova UV (User interface design or engineering) je načrtovanje

računalnikov in ostalih informacijsko-komunikacijskih naprav,

programskih aplikacij in spletnih strani z osredotočanjem na uporabnikovo izkušnjo (User

experience) in interakcijo.

V predavanju bo govora predvsem o UV za programsko opremo (software)

O spletnem UV prihodnjičuporabnost spletne predstavitve (Web usability)

Uporabniški vmesnikUV mora biti zasnovan tako, da bo ustrezal nivoju znanja, izkušnjam in pričakovanjem

uporabnika

Uporabnik pogosto ocenjuje sistem po njegovem UV in ne po njegovi funkcionalnosti

Zaradi slabo zasnovanega in izdelanega UV lahko uporabnik naredi daljnosežne in

usodne napake

Večina poslovne programske opreme temelji na uporabi grafičnega UV (Graphical user

interface – GUI)

Včasih se uporablja tudi znakovni oz. vmesnik z ukazno vrstico (Command line interface –

CLI)

17

Page 18: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Prednosti grafičnega UVUčenje in njegova uporaba sta enostavna

Uporabnik brez predznanja se lahko hitro nauči in privadi uporabljati nov sistem.

Uporabnik lahko hitro preklaplja med opravili in dela z različnimi programi oz.

aplikacijami

Informacija ostane vidna v svojem lastnem oknu, ko se pozornost zamenja

Hitra, celozaslonska interakcija s takojšnjim dostopom kjerkoli na zaslonu

Človeški dejavniki pri zasnovi UVOmejen kratkotrajni spomin

Ljudje si v povprečju trenutno zapomnimo do 7 elementov informacije. Če je

podatkov več, se verjetnost, da bomo delali napake, poveča.

Ljudje delamo napakeOb napaki lahko zaradi neustreznih programskih obvestil in alarmov in

posledičnega stresa naredimo še več napak.

Ljudje smo si različni

18

Page 19: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Razlikujemo se po fizičnih, intelektualnih in ostalih sposobnostih, kar morajo

razvijalci programske opreme upoštevati.

Pravila načrtovanja UVDomačnost uporabniku (User familiarity)

UV naj temelji na pojmih, ki so blizu uporabniku in ne na računalniških konceptih.

Primer: uporaba pojmov kot so pisma, dokumenti, mape, itd. namesto direktorijev,

datotek, ipd. v pisarniških sistemih.

Doslednost (Consistency)

Primerljive operacije naj se izvedejo na podoben način.

Ukazi in meniji naj imajo vedno enako obliko.

Minimalno presenečenje (Minimum surprise)

Obnašanje sistema ne sme uporabnika nikdar presenetiti.

Če nek ukaz deluje na znan način, bo znal uporabnik predvideti učinek oz. delovanje

podobnih ukazov.

Odpornost na napake (Recoverability)

Sistem mora biti prožen oz. odporen na morebitne napake uporabnika in mora le-temu

omogočiti, da sistem vrne v stanje pred napako.

Primeri: možnost ‘Razveljavi’, potrditev potencialno nevarnega dejanja, koš za začasno

brisanje datotek.

Pomoč uporabniku (User guidance)

Vmesnik mora nuditi smiselno povratno informacijo v primeru uporabnikove napake in

razne oblike pomoči.

Primeri: kontekstualna pomoč, on-line priročnik, FAQ.

Raznolikost uporabnikov (User diversity)

Podprti morajo biti različni načini interakcij za razne profile uporabnikov sistema.

Primer: večje črke za vidno prizadete.

Postopek izdelave UV

19

Page 20: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Izdelava UV je interaktivni proces, kjer je ključno tesno sodelovanje med izdelovalci in

uporabniki

Tri glavne aktivnosti tega procesa so:

o Analiza uporabnika: razumevanje, kaj uporabniki pričakujejo od sistema.

Metode: analiza opravila, intervjuji in vprašalniki, etnografija (opazovalec

spremlja uporabnike pri njihovem delu in jih o njem sprašuje)

o Izdelava prototipov sistema: razvoj več prototipov UV.

o Evalvacija (ovrednotenje) UV: preizkušanje teh prototipov skupaj z

uporabniki

Oblike interakcijDirektna manipulacija

Primeri uporabe: video igre, CAD sistemi.

Prednosti: hitra in intuitivna interakcija, enostavno učenje.

Pomanjkljivosti: včasih težavna implementacija (programiranje), uporabno le v primerih,

kjer obstajajo vidne prispodobe (metafore) za naloge in predmete.

Menijsko izbiranje

Primeri uporabe: večina splošno-namenskih sistemov.

Prednosti: zelo majhna možnost napake uporabnika, potrebno malo tipkanja.

Pomanjkljivosti: počasno za izkušene uporabnike, v primeru številnih opcij lahko postane

kompleksno – zahtevno.

Vnašanje v obrazec

Primeri uporabe: spremljanje gibanja delnic, procesiranje osebnega posojila.

Prednosti: enostaven vnos podatkov, hitro učenje, preverljivost.

Pomanjkljivosti: zamudno, zasede veliko zaslonskega prostora, problemi, kadar

uporabnikove opcije ne sovpadajo s polji obrazca.

Ukazni jezik

Primeri uporabe: operacijski sistemi, nadzorni sistemi.

Prednosti: moč, fleksibilnost.

Pomanjkljivosti: dolgotrajno učenje, težavno odkrivanje in popravljanje napak.

Naravni jezik

Primeri uporabe: sistemi iskanja informacij (podatkovne baze, splet).

Prednosti: primeren za občasne uporabnike, zlahka razširljiv.

Pomanjkljivosti: potrebno več tipkanja, sistemi za razumevanje naravnega jezika so

danes še nezanesljivi

20

Page 21: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Predstavitev informacijKako predstaviti oz. prikazati informacijo – rezultat računalniške obdelave – uporabniku

sistema?

Predstavljena je lahko neposredno (npr. kot besedilo v urejevalniku besedila) ali pa je na

nek način pretvorjena (npr. v grafično obliko).

I

DEJAVNIKI:Ali uporabnika zanima podrobna informacija ali pa razmerja in trendi v podatkih?

Kako hitro se spreminjajo vrednosti podatkov? Ali morajo biti spremembe prikazane takoj,

ko do njih pride?

Ali se mora uporabnik na spremembe odzvati?

Ali omogoča vmesnik neposredno manipulacijo?

Ali je informacija besedilna ali številčna? Ali so pomembne relativne vrednosti?

Analogna vs. digitalna predstavitev DIGITALNA PREDSTAVITEV:

o zgoščena – zavzame malo prostora, možno je podajanje natančnih vrednosti

ANALOGNA PREDSTAVITEV

o primernejša za podajanje splošnega vtisa o vrednostih ali trendih

o Možen prikaz relativnih vrednosti.

o lažje opazimo iztopajoče vrednosti.

Uporaba barv pri pikazu informacij Barva doda vmesniku novo dimenzijo in lahko pomaga razumeti kompleksne

informacijske strukture

Z njo lahko označimo izjemne dogodke ali postavke

Običajne napake uporabe barv: pretirana uporaba barve, uporaba barv za sporočanje

pomena

21

Page 22: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Uporabnost spletne predstavitve in uporabniška izkušnja (Web usability & User experience)Funkcionalnost spletne predstavitveFunkcionalnost spletne predstavitve = koristnost + uporabnost

Koristnost je sposobnost spletne predstavitve, da predstavi informacije, ki jih uporabnik

potrebuje, in omogoči opravljanje funkcij za izpolnjevanje zadanih nalog

Uporabnost spletnega mesta oz. predstavitve (Web usability) pove, kako hitro in/ali

enostavno lahko uporabnik najde iskane informacije oz. opravi zadano

nalogo

Koristnost je povezana predvsem z uspešnostjo, uporabnost pa z učinkovitostjo!

Atributi uporabnostiUporabnost – večdimenzionalna lastnost (spletnega) uporabniškega vmesnika, povezana

z atributi:

Učljivost (Learnability)

Učinkovitost (Efficiency)

Enostavnost pomnjenja (Memorability)

Napake (Errors)

Subjektivno zadovoljstvo (Satisfaction)

Učljivost in učinkovitostUčljivost pove, kako hitro se uporabnik nauči uporabljati sistem – spletno mesto oz.

predstavitev.

Sistemi z dobro učljivostjo naredijo dober “prvi vtis” – pomembno zaradi hude konkurence

med spletnimi predstavitvami

Ključno vlogo igra intuitivnost sistema

Z učinkovitostjo opredelimo, kako hitro lahko uporabnik opravi določeno nalogo

Merimo jo v časovnih enotah ali številu potrebnih operacij

Enostavnost pomnjenja in napakeEnostavnost pomnjenja je sposobnost sistema, da uporabniku ostane v spominu

22

Page 23: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

V idealnem primeru uporabnik nemoteno, brez sprememb uporablja sistem ne glede na

čas, ki je pretekel od njegove zadnje uporabe

Napake so sestavni del vsakega sistema

Merimo, kako sistem preprečuje pojavljanje napak, kako enostavno jih je možno odkriti, in

kako odpraviti

Subjektivno zadovoljstvoNa uporabnost sistema močno vpliva tudi subjektivno zadovoljstvo uporabnika

Zlasti pomembno pri nedelovnih okoljih, zabavi namenjenih sistemih in tam, kjer je

najvažnejša uporabnikova izkušnja (User experience)

Učinkovitost vs. čas uporabeSistemi za eksperta zahtevajo več časa in energije za spoznavanje sistema, vendar

omogočajo doseganje večje učinkovitosti

Dobri sistemi se prilagajajo tipu uporabnika – poosebljanje UV (avtomatizirano, s pomočjo

urednika strani)

Posebnosti spletnega UVZačetni del krivulje mora biti čim bolj strm – zaradi hude konkurence obstaja nevarnost, da

bo uporabnik spletno mesto oz. stran prenehal uporabljati

Pri “klasični” programski opremi zaradi prevelikih stroškov in zahtevnosti zamenjave

sistema ter porabe časa ta možnost ni tako verjetna

Krivulja se običajno ne začne v izhodišču koordinatnega sistema

Osnovni elementi večine spletnih strani so si podobni in jih uporabniki – razen popolnih

začetnikov – poznajo, npr. način premikanja znotraj strani in med njimi, klikanje na povezave

Na poznavanje uporabe in učinkovitost spletnega sistema vplivajo ne samo kakovost

spletne strani, ampak tudi individualne značilnosti uporabnika

Motiviran uporabnik bo želel čimprej priti čim bližje zgornji meji oz. doseči večjo

učinkovitost

Metode za ocenjevanje spletnih predstavitevMetode za ocenjevanje (evalvacijo) kakovosti spletnega mesta oz. spletnega UV:

Vprašalniki

23

Page 24: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Intervjuji

Hevristično vrednotenje

Sprehod skozi spletno predstavitev

Prototipi

Analiza konkurence

Analiza nalog

Testiranje z uporabniki

Opazovanje

Psihofizične metode

Metoda razvrščanja kart

Pregled upoštevanja standardov

Beleženje uporabe

Tehnična analiza

Slikanje zaslona

Skrivnostni obiskovalec

Analiza uporabe prostora

Analiza vplivnosti

Dostopnost spletne predstavitve

Metode za avtomatizirano vrednotenje uporabnosti

Kriteriji ocenjevanja kakovostiTri skupine kriterijev – večkriterijski model CUT (Lindič, 2003)

Vsebina (C – Content)

Uporabnost (U – Usability)

Tehnologija (T – Technology)

Ekspertni sistem za večkriterijsko odločanje – odločitvena drevesa

Delo s kvalitativnimi spremenljivkami približa uporabo modela odločevalcem

Končne ocene so oblikovane s pomočjo odločitvenih pravil “če-potem” in ne na podlagi

formul

Vsebinski kriterijiVsebina so podatki in informacije, ki sestavljajo spletno predstavitev in

storitve, ki jih uporabnik na njej lahko opravi

24

Page 25: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

V predstavljenem primeru sta vsebinska kriterija vrednost informacij in vrednost

komunikacije

Kriteriji uporabnostiNajvečkrat je moč uporabnost razčleniti na pet atributov oz. kriterijev:

Učljivost

Učinkovitost

Zapomnljivost

Napake

Zadovoljstvo

Včasih je primernejše drugačno strukturiranje uporabnosti, npr. oblika, struktura, kakovost

interakcije

Tehnološki kriterijiTehnologijo lahko vrednotimo s tremi kriteriji – tehnološka neodvisnost,

uporaba tehnologij in kakovost izvedbe

Končna ocenaVsak kriterij ovrednotimo z oceno (npr. od 1 do 5)

Končna ocena je rezultat združevanja ocen posameznih (skupin) kriterijev z upoštevanjem

pomembnosti – teže – vsakega kriterija

Npr. Vsebina = utežni faktor 0,4; Uporabnost = 0,3; Tehnologija = 0,3

Značilnosti uporabe spletne strani- Enostavna navigacija:

o logotip organizacije se nahaja v levem zgornjem kotu, klik odpre njeno

domačo stran

o navigacija je na vsaki strani na enakem mestu

o utripajoči elementi (animacije) običajno pomenijo oglase oz. komercialna

sporočila

- Hitro odpiranje:o za postavitev svoje strani uporabljaj prekrivne sloge namesto tabel

o navigacijske elemente prav tako izdelaj s pomočjo CSS (prekrivni slogi)

namesto slik

o v HTML naj bo čim manj praznega prostora, komentarjev

25

Page 26: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

- Uporabnika ne smemo omejevati:o Dopustiti mu moramo, da brska po spletu na njemu domač, ustaljen način

(npr. uporaba gumba NAZAJ)

- Hiter zajem informacij:Za razliko od tiskane oblike vsebine spletnih strani ne prebiramo, vendar jih

»skeniramo«, zato moramo biti pozorni na :

o naslove

o hiperbesedilo

o krepko besedilo

o sezname

o besedilo nam pade v oči pred slikami, zato naj te ne vsebujejo

najpomembnejših informacij

Uporabniška izkušnja (UX=user experience)- Je izraz za celotno izkušnjo in zadovoljstvo uporabnika, ki uporablja nek izdelek ali

sistem.

- UX temelji na na uporabnika osredotočenem načrtovanju. Vključuje vse vidike

uporabnikove interakcije s proizvodom: kako ga občutiti, spoznava in uporablja

- Kako meriti UX: 1. PREPOZNAVNOST:o spletno mesto obiskovalca pritegne, zato si ga zapomni

o vidi vtis spletnega mesta sovpada z identiteto predstavljenega izdelka

o dodano vrednost predstavljajo grafika, zvok, večpredstavnost

o pri predstavitvi so kar najbolj izkoriščene značilnosti medija

2. FUNKCIONALNOST: obiskovalci oz. uporabniki prejmejo odgovore na svoja vprašanja ali zahteve v

primernem času

spletno mesto in aplikacije povezujejo skupni standardi varnosti in zasebnosti

On-line funkcije so integrirane z off- line poslovnimi procesi

spletno mesto vsebuje administratorska orodja, ki povečujejo administratorjevo

učinkovitost

3. UPORABNOST:

26

Page 27: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

spletno mesto preprečuje morebitne napake pri uporabi in pomaga uporabniku, da si

od njih opomore

zahtevnost strani je prilagojena glavni ciljni populaciji obiskovalcev

spletno mesto pomaga obiskovalcem pri izvajanju običajnih nalog

spletno mesto je notranje konsistentno in se drži lastnih standardov

omogočeno je delo uporabnikom s posebnimi potrebami

4. VSEBINA: povezave do drugih spletnih mest so jasne, navigacija enostavna

vsebina je strukturirana tako, da omogoča dosegaje uporabnikovih ciljev

vsebina je točna in redno posodabljana

vsebina usterza potrebam uporabnika

Oblikovanje in razvoj spletnihpredstavitev(Web design & Web development)

Spletno mesto in spletna stranSpletno mesto (Web site) je zbirka spletnih strani (Web pages), slik, zvočnih, video in

drugih vsebin

Spletna mesta oz. strani se nahajajo na spletnih – HTTP – strežnikih (Web servers), do

njih dostopamo s spletnim brskalnikom (browser) – t.i. HTTP odjemalcem

Napisana so v jeziku HTML

Statična spletna mesta: strani so shranjene na strežniku v taki obliki, kot si jih bo

uporabnik ogledal

Dinamična spletna mesta: informacije se pogosto posodabljajo in spreminjajo vsakič,

ko je neka spletna stran zahtevana

Spletna aplikacijaSpletna aplikacija je program, do katerega dostopamo preko omrežja (internet, intranet)

Običajno je sestavljena iz odjemalca, strežnika (spletnega, aplikacijskega) in podatkovne

baze.

Uporaba: spletna pošta, spletna prodaja, sistemi Wiki, spletni forumi, blogi, on-line video

igre, itd.

27

Page 28: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Pri načrtovanju in izdelavi spletne aplikacije je poudarek na zagotavljanju učinkovite in čim

hitrejše rešitve zadane naloge ali problema, manj na obliki (dizajnu)

Sistem za upravljanje Sistem za upravljanje spletne vsebineSistem za upravljanje vsebine (Content Management System, CMS) je spletni program

za ustvarjanje, urejanje, vzdrževanje, objavljanje in arhiviranje vsebine spletnih mest

Spletno mesto urejajo in vzdržujejo (osvežujejo) uporabniki, brez pomoči podjetja ali

osebe, ki je CMS izdelalo

Primeren za skupinsko delo (Collaborative content creation)

Veliko število prostih in odprtokodnih (GPL) programov: MediaWiki, TYPO3, itd.

Oblikovanje spletnih mestNamen oblikovanja (Web design) je ustvarjanje spletnega mesta, strani ali aplikacije

Postavljanje enostavnejših elementov – besedilo, točkovne slike, obrazci – na spletno

stran poteka s pomočjo HTML / XHTML / XML značk (tags)

Za prikaz kompleksnejših vsebin – predmetna grafika, animacije, video, zvok – so

praviloma potrebni dodatki (plug-ins), npr. Flash, QuickTime, JRE (Java Runtime

Environment).

Razvijanje Razvijanje spletnih mestRazvijanje spletnih mest (Web development) predstavlja širši pojem v primerjavi z

njihovim oblikovanjem

Vključuje grafično oblikovanje strani, njihovo kodiranje, programiranje “back-end”

sistemov, konfiguriranje spletnih strežnikov, itd.

Stopnje razvoja spletnega mesta podobne razvojnim fazam programske opreme

Analiza zahtev

Konceptualni dizajn

Modeliranje in izdelava prototipov

Izdelava

Objava

Vzdrževanje

Spletne tehnologije

28

Page 29: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Na strani odjemalca običajno potekata oblikovanje in postavitev, na strani strežnika pa

skrb za funkcionalnost in “back-end” sisteme spletnega mesta

Tehnologije na strani odjemalca

HTML oz. XHTML

CSS

JavaScript

VBScript

Tehnologije na strani strežnika

PHP

ASP.Net

SQL

Java

HTMLHTML (Hypertext Markup Language) – označevalni jezik za oblikovanje

večpredstavnostnih dokumentov – spletnih strani

S pomočjo značk (tags) določa vsebino in izgled spletne strani, ki jo prikaže brskalnik

HTML dokument – besedilna datoteka s končnico .htm ali .html, sestavljena iz značk

HTML datoteko lahko ustvarimo in urejamo s preprostim urejevalnikom besedila – npr. MS

Beležnica – ali z uporabniku prijaznim grafičnim WYSIWYG programom – npr. Adobe

Dreamweaver

HTML elementiHTML elementom lahko določimo lastnosti – atribute in vsebino

HTML elementi predstavljajo naslove, odstavke, hiperbesedilne povezave, sezname,

tabele, slike, vgrajene (embedded) večpredstavnostne programe, itd.

29

Page 30: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

HTML hiperpovezave<a href="http://www2.ntf.uni-lj.si/ot/">Spletna stran OT NTF!</a>

<a href="mailto:[email protected]">Pošlji pošto na:</a>

<a href=“kazalo_strani.htm"><img border="0"

src="buttonnext.gif" width="65" height="38"></a>

Lastnost href določa ime (npr. URL naslov) ciljne datoteke, ki se odpre, ko uporabnik

klikne na povezavo. Ciljna datoteka je lahko spletna stran, slika, zvočna datoteka, film ali e-

poštni naslov. Značka (anchor) za ustvarjanje povezave do drugega dokumenta.

Povezava do ciljne datoteke je lahko tudi slika

XHTMLXHTML je označevalni jezik, sestavljen iz HTML 4.01 in XML

XML (eXtensible Markup Language) je namenjen opisovanju, HTML pa prikazovanju

podatkov

XHTML omogoča zapis "well-formed" dokumentov, ki bodo pravilno prikazani v vseh

brskalnikih in na vseh napravah (osebni računalniki, mobilni telefoni, PDA)

Najpomembnejše razlike med HTML in XHTML

XHTML elementi morajo biti pravilno gnezdeni

XHTML elementi morajo vedno biti zaključeni

XHTML elementi morajo biti zapisani z malimi črkami

XHTML dokumenti morajo imeti en korenski element

Gnezdenje elementov :<b><i>Danes dežuje.</b></i> <b><i>Danes dežuje.</i></b>

Zaključevanje elementov:

<p>To je prvi odstavek... <p>To je prvi odstavek...</p>

<p>to je drugi odstavek. <p>to je drugi odstavek.</p>

30

Page 31: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Tule sledi nova vrstica:<br> Tule sledi nova vrstica:<br />

CSSCSS (Cascading Style Sheets) – prekrivni slogi: predloge slogov (style sheets) na spletni

strani, v katerih je zapisana oblika spletne strani

S slogi določimo, kako bodo prikazani HTML elementi

S pomočjo zunanjih slogovnih predlog lahko spreminjamo izgled in postavitev vseh naših

spletnih strani, tako da urejamo zgolj en sam CSS dokument

JavaScript Skriptni jezik, ki omogoča dodajanje interaktivnosti HTML stranem

Nezahteven programski jezik, ki NI v povezavi z Javo

Običajno vključen neposredno v HTML stran

Uporaba je brezplačna

Izvaja različna opravila oz. dejanja (vstavljanje dinamičnega besedila, branje in pisanje

HTML elementov, ustvarjanje piškotkov,...)

PHP in ASP PHP- skriptni jezik, ki omogoča ustvarjanje dinamičnih in interaktivnih spletnih mest

skripte se izvedejo v strežniku

brezplačno programiranje

PHP datoteka lahko vsebuje HTML značke in skripte

pogosto uporabljeno skupaj z Apache na različnih operacijskih sistemih

ASP.NET. microsoftov skriptni jezik za ustvarjanje dinamičnih in interaktivnih spletnih

mest

SQL in JAVA SQL- programski jezik za dostopanje in upravljanje s sistemi podatkovnih baz kot so

Oracle, DB2,...

JAVA- objektivno orientiran programski jezik soroden C in C++, lahko je kot samostojen

program ali kot vgrajena aplikacija

31

Page 32: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Flash večpredstavnostni grafični program za ustvarjanje interaktivnih in animiranih spletnih

mest

ima vektorsko geafiko in je enostaven za učenje

predvajanje Flah vsebin s spletnim brskalnikom, ki ima nameščen dodatek Adobe Flash

Player

Spletnik (SIOL) Izgradnja spletne strani v sedmih preprostih korakih

vstavljanje lastnih vsebin

spreminjanje barv

določanje pisav

izbira predloge

dodajanje večpredstavnostnih vsebin

24-urni dostop do spletne strani in možnosti njenega urejanja

Objava Postavitev na spletni strežnik – FTP

Gostovanje (Hosting) spletne predstavitve: spletna aplikacija se prenese na namenski

računalnik, ki je povezan v spletno omrežje, od koder obiskovalci dosegajo spletno

predstavitev

Strežnik običajno ponuja tudi gruge storitve: možnost ustvarjanja poljubnega števila

elektronskih pošznih predalov, statistiko obiska na spletnih straneh, protivirusno zaščito,

itd.

Oblikovanje za spletLOČLJIVOST: ZASLONSKA (običajno med 72 in 96ppi, velikost zaslona: 1024x768 oz. 800x600 pikslov)

LOČLJIVOST SLIKE (št. točk ki sestavljajo sliko, prostorska ločljivost je dodločena s št.

točk na palec)

BRSKALNIK: Različni brskalniki lahko isto vsebino prikažejo različno

Samodejno prilagajanje: besedilo se prilagodi razpoložljivemu prostoru

32

Page 33: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

BARVE:Spletno varne barve (barve se prikazujejo enako neglede na vrsto brskalnika in

operacijskega sistema)

FORMATI IN STISKANJE SLIK: namen stiskanja slik za splet je zagotoviti, da bo slika ustreznih barv, velikosti in

formata

največkrat se za splet uporabljajo trije formati: GIF, JPEG, PNG

GIF (najbolj uporaben pri rasterskih slikah, barvna globina 1-8 bitna, podpora

prosojnosti, 20-90% originalne velikosti)

JPEG (primeren za kompleksnejše foto in barve vzorce, kakovost slike določimo v

odstotkih, velikost datoteke 5-20% originalne velikosti)

PNG (naslednjik GIF formata, podpora spremenljivni prosojnosti, slike stisne na 5-

25%)

PISAVE: obstajajo »varni« tipi pisav za splet, kar zagotavlja njihov pravilen prikaz

CSS generične družine pisav (arial, tahoma, times new roman, verdana,...)

če želimo zagotoviti vedno enak prikaz določenega tipa pisave, uporabimo grafično

datoteko

Večpredstavnost (multimedija)Kaj je večpredstavnostVečpredstavnost – multimedija pomeni predstavitev oz. posredovanje računalniških

informacij v obliki slike, zvoka, videa, animacije, interaktivnosti in tradicionalnih medijev

(besedila in grafike)

Linearna Linearna in nelinearna večpredstavnostLinearna večpredstavnost

Udeleženec nima nadzora nad potekom, npr. kinematografska predstava

Nelinearna večpredstavnost (interaktivna multimedija)

Omogoča uporabniško interaktivnost, npr. svetovni splet,računalniške igre,

računalniške simulacije ali trening

Hiperpredstavnost (hypermedia) – sistem vodenja uporabnika preko povezav do

sorodnih datotek z grafiko, zvokom, animacijami ali videom na podoben način kot pri

hiperbesedilu

33

Page 34: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Računalniško podprta večpredstavnostDva ali več različnih medijev

Računalniška večpredstavnost

Veččutna (multisenzorna) izkušnja – podobnost z resničnim svetom

Veččutno pomnjenje

Izobraževanje – možni različni pristopi k učenju

Hiperbesedilo in hiperpredstavnost

Prednosti in slabostiPrednostiGloboka (popolna) vključenost uporabnika

Veččutnost

Ustvarjanje povezav znanja

Individualiziranost

Soustvarjanje učitelja in učenca

SlabostiIzgubljenost v kiberprostoru

Pomanjkanje strukture

Včasih enosmerna, neinteraktivna – ni povratne informacije

Kompleksno ustvarjanje vsebine

Potreben precejšen miselni napor pri uporabi

Področja uporabeZabavna industrija (posebni učinki v filmih in animacijah, računalniške in video igre)

Izobraževanje (računalniško podprto učenje, enciklopedije; edutainment)

Industrija (interna ali eksterna predstavitev informacij, trening, prodaja, oglaševanje)

Znanost in tehnika (modeliranje, simulacije)

Medicina (navidezne kirurške operacije)

Komponente večpredstavnostiBesedilo

Digitalne slike

Točkovna (rastrska), predmetna (vektorska) grafika

Digitalni audio

Digitalni video

Pretočni video

34

Page 35: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Frekvenca vzorčenjaŠtevilo vzorcev, ki jih pretvorimo v bite v določeni časovni enoti pove, kolikokrat v sekundi je

zvok vzorčen

Nyquistov teorem – za kakovostno zvočno reprodukcijo mora biti zvočni signal vzorčen s

frekvenco, ki je vsaj dvakrat višja od njegove najvišje

Človeško uho zaznava frekvence med 20 Hz in 22.000 Hz, zato so za frekvenco

vzorčenja, ki se uporablja pri glasbi na CD zgoščenkah, določili vrednost 44.100 Hz –

Audio CD kakovost

Kakovost zvočnega zapisaFrekvenca vzorčenja

Ločljivost – število bitov za posamezen vzorec

16-bitni (običajno) ali 24-bitni zapis

Dinamika (Dynamic range) – razmerje med signalom in

šumom (Signal-to-noise)

Dinamika kakovostnega zvoka > 80 dB

Analogno-digitalna pretvorbaMikrofon pretvori zvok v električni signal

Analogno/digitalni konverter (ADC) meri – vzorči – amplitudo analognega signala in

pošilja v procesor zaporedje številk

Digitalno/analogni konverter (DAC) spreminja zaporedje številk v stopničasti analogni

signal

Filter zgladi stopničasti signal

35

Page 36: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Shranjevanje digitalnega zvokaKoličina podatkov, potrebna za zapis enominutne zvočne predstavitve:

Zaradi velike količine podatkov se dostikrat uporablja stiskanje oz. zgoščevanje zapisa

Skladba 32 MB (WAV) ~ 3 MB (MP3)

44.100 x 2 x 2 x 60 = 10.584.000 B ~ 10 MB

WAV in MP3WAV – zapis nestisnjenih zvočnih podatkov

Zapis CD glasbe na trdi disk

Datoteke v tem formatu zasedejo veliko prostora, je pa zvok skoraj popolnoma enak

originalu

Uporablja se zlasti v okolju Windows

MP3 (MPEG 1 Audio Layer 3) – stisnjeni zvočni podatki

1/10 velikosti WAV datoteke

Prenos po internetu (Napster), shranjevanje na prenosnih napravah (mp3

predvajalniki)

Še močnejše stiskanje podatkov pri enaki kakovosti predvajanja: WMA (Windows

Media Audio), Ogg Vorbis

Kako deluje MP3Zmanjšanje števila bitov brez opaznejšega poslabšanja kakovosti zvoka se doseže z:

odstranitvijo mehkih zvokov, ki jih prekrivajo glasnejši zvoki

odstranitvijo frekvenc, ki so izven človekovega slišnega

območja

Odstranitev frekvenc, ki jih ne slišimo dobro

Uporaba naprednih metod stiskanja podatkov

Predvajanje glasbeZvočna kartica skrbi za pretvorbo podatkov (bitov),shranjenih v zvočni datoteki, v glasbo

Urejanje zvočnih predstavitev Digitalno ustvarjanje, snemanje, mešanje, obdelava in predvajanje zvoka

36

Page 37: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Programi za urejanje in izdelavo zvočnih predstavitev: snemalni program, programski

studii, navidezna glasbila, notatorji, ojačevalniki, predvajaniki,...

Programi za večstezno montažo

Digitalni video Podatki o barvi in svetlosti vsakega video posnetka se shranjujejo v obliki bitov

Različne vrste digitalnega videa (DVD, PDA, namizni video, spletni video)

Digitalne kamere shranjujejo posnetke kot zaporedje bitov

Analogne pa v obliki kontinuiranega zapisa magnetnih vzorcev

Spletne kamere se pritrdijo na računalnik

Zajemanje- Zajemanje poteka s pomočjo programske opreme

- Imamo različne možnosti programa (stiskanje podatkov, zmanjšanje velikosti,...)

Urejanje videa LINEARNO urejanje: posamezne kadre zlagamo po vrsti. Potrbna sta vsaj dva VCR.

NELINEARNO: potrebujemo računalniški trdi disk in program za urejanje videa.

Pretočni video/audio Prenos večpredstavnostnih podatkov preko interneta

Predvajanje video/audio vsebin že med njihovim prenašanjem

Dve obliki: 1. Pretočnost na zahtevo in 2. Pretočnost v živo

Strežnik Postavitev streaming stržnika

Ustvarjanje avdio/video vsebin

kodiranje

Postavitev vsebin na strežnik

Vzpostavitev omrežja za dostop

37

Page 38: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Protokoli Klasični internetni protokoli – TCP/IP, HTTP – za prenos časovno odvisnih medijev niso

primerni

Omrežni protokoli:

UDP

RTP

RTSP

SDP

Programska opremaDružina izdelkov podjetja Adobe

Splet Splet 2.0 in socialna omrežjaTim O’Reilly: konferenca Web 2.0 (2004)

“Druga generacija” na spletu temelječih skupnosti in spletnih storitev

Spletni dnevniki (blogi), spletne skupnosti, podcasting, wiki, RSS viri, itd.

Omogočanje in spodbujanje ustvarjalnosti, sodelovanja, deljenja (sharing) med uporabniki

Ne gre za nadgradnjo spleta v tehničnem smislu, temveč za spremembo v njegovem

zaznavanju in uporabi!

Značilnosti spleta 2.0

38

Page 39: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Splet kot platformaDostop do storitev preko spletnega brskalnika: Writely, Flickr, del.icio.us, Kiko...

Personalizirana, dinamična, “data driven”, funkcijsko bogata spletna mesta

Kontinuirni razvoj (večne ‘beta’ verzije)

Odprtokodna programska oprema in odprti standardi

Izkoriščanje kolektivne inteligenceModrost množic

Različnost mnenj

Neodvisnost

Decentraliziranost

Združevanje

Uporaba značk (tagging)

Flickr

Del.icio.us

Podatki enako pomembni Podatki enako pomembni kot funkcionalnostIzkoristi svoje edinstvene podatke…

Amazon – personalizirana priporočila

Google …in jih deli z drugimi

Web Services & APIs - REST, SOAP, etc

Millenials / Y Generation / iGenMladi, rojeni med poznimi 70-imi in sredino 90-ih let 20. st.

39

Page 40: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Vizualno obdelovanje informacij

Večopravilnost (multitasking)

Množična uporaba Web 2.0 aplikacij (social software)

“Nomadska” uporaba tehnologij najrazličnejših platform (kadarkoli, kjerkoli)

Spletni dnevniki - blogiObjava tekstov, slik in drugih vsebin na spletu v obliki dnevnika, ki ga lahko bere vsakdo

Prijazna uporaba tako do avtorja kot do obiskovalcev

Avtorji opisujejo lastni, subjektivni pogled na svet, obiskovalci podajajo svoja mnenja

Decembra 2007 iskalnik blogov Technorati indeksiral več kot 112 mio blogov

RSSTehnologija na podlagi XML-a, ki omogoča samodejno obveščanje o naročenih temah

RSS opozori o novem članku ali novici, ne da bi bilo potrebno obiskati spletno stran

Odjemalec – program – za RSS datoteke izpisuje informacije, ki jih pridobi iz raznih RSS

kanalov oz. virov (šport, zabava, tehnologija, itd.)

RSS Bandit

Feedreader

Živi zaznamki (Live bookmarks) – Mozilla Firefox

Navidezne skupnosti in socialna omrežjaRačunalniki povezani med seboj s pomočjo omrežja (npr. internet) omogočajo različne

oblike socialnih interakcij in on-line druženja

Spletna mesta, ki jih ustvarjajo oz. soustvarjajo uporabniki (UGC - User generated

content) – interaktivnost !

www.classmates.com – prva socialna spletna skupnost (1995)

Pomaga članom pri iskanju, povezovanju in ohranjanju stikov s prijatelji in znanci iz

njihovega življenja

Možnosti soustvarjanja vsebin insodelovanja uporabnikovDvosmerna komunikacija

40

Page 41: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Dodajanje komentarjev

Sodelovanje na forumih

Dodajanje slik, video posnetkov

Ocenjevanje prispevkov

Označevanje (tagging) vsebine

Povezovanje z ostalimi obiskovalci spletnega mesta

Izmenjava mnenj

Gradnja mreže kontaktov

Oblike navideznih skupnosti Usenet (novičarske skupine)

Elektronska oglasi deska (BBS)

Spletni dnevniki (blogi): MySpace, Blogger,...

Navidezni svetovi: Second life

Trenutno sproščanje: ICQ, Messenger,...

MMORPG: World of Warcraft, EverQuest

Omrežje vsak z vsakim: Kazaa, BitTorrent,...

Wiki: Wikipedia

Svetovni splet: eBay, GeoCities

Internetna trgovina: Amazon.com

Socialna omrežja – portali oz. storitve Bebo

MySpace,

YouTube

Facebook

...

SKUPNE ZNAČILNOSTI: Ustvarjanje profila, profil se poveže z drugimi

PODROBNOSTI PROFILA: Osebni podatki (ime pa lalala....)

Kontaktni podatki (elektonski naslov, tel. št.,...)

Osebne značilnosti (hobiji, znanja, interesi,...)

Družbeno ozadje (šola, tečaji, zaposlitev)

41

Page 42: Interakcija človek-računalnik  · Web viewPsihologija in zasnova interaktivnega umesnika. Nekatere neposredne aplikacije (zaznavanje modre barve pri človeku je šibko, zato za

Splet 3.0Prihodnost spleta:

semantični splet (Semantic web)

vseprisotna povezljivost

inteligentne aplikacije

42