Interakcija lovek­raunalnik

ČlovekInput / output informacijVidne, slušne, tipne, premikanjeInformacija shranjena v spominuSenzorni, kratkoročni (delovni), dolgoročniObdelava in uporaba informacijSklepanje, reševanje problemov, veščine, napakeČustva vplivajo na človekove sposobnostiLjudje smo si različni

Kako poteka proces zaznave?Čutnice (v očesu – čepki in paličice; v ušesu – slušnecelice v notranjem ušesu; v nosu – vohalne čutnice; vkož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 vmožganih, kjer prihaja do nadaljnje obdelave (procesiranja)

VidDve stopnjiFizična zaznava dražljaja (signala)Obdelava (procesiranje) in interpretacija dražljajaIzredna kakovost in kontinuirnost podob sveta, ki gavidimo, sta posledica nenehnega posadabljanja slikoz. vidnih vtisov s strani našega vidnega aparata (oči+ možgani)Posodobitve – gibanje, barve, podrobnosti, itd. – sotako pogoste in popolne, da skoraj nikoli ne zaznamo“digitalne prevare”

Oko – fizina zaznava dražljajaMehanizem za sprejemanje svetlobe in njenopretvorbo v živčni impulz (električno energijo)Svetloba se od predmetov odbijaNa mrežnico se projicirajo obrnjene slike predmetovMrežnica vsebuje paliice za gledanje pri šibkisvetlobi in epke za barvni vidGanglijske celice v možganih odkrivajo vzorce ingibanje

Interpretacija signalaVelikost in globinaVidni kot pove, kolikšen del vidnega polja zavzemapredmet (odvisen od velikosti predmeta inoddaljenosti od očesa)Ostrina vida je sposobnost zaznavanja podrobnosti(omejena)Znani predmeti se nam zdijo vedno enako veliki (kljubdrugačnemu vidnemu kotu oddaljenih predmetov)Pripomočki kot je prekrivanje nam pomagajo priocenjevanju velikosti in globine

Interpretacija signalaSvetlostSubjektivna reakcija na različno jakost (intenziteto)svetlobeNanjo vpliva količina od predmeta odbite svetlobe –luminancaBarvaSestavljena iz treh komponent – barvnega tona (odtenka),intenzitete in nasičenjaČepki so občutljivi na valovne dolžine svetlobeNajnižja je ostrina vida (občutljivost) za modro svetlobo8% moških in 1% žensk je barvno slepih

Interpretacija signalaVidni sistem izvaja korekcije upoštevajeGibanjeSpreminjanje luminance predmetov

V dvoumnih primerih se vključi razumevanjekontekstaOptične prevare se včasih pojavijo kot rezultat“nadkompenzacije”

BranjeVeč stopenjZaznavanje vidnega vzorcaDekodiranje s pomočjo interne predstavitve jezikaInterpretacija na podlagi poznavanja sintakse, semantike,pragmatikeBranje – sakade in fiksacijeDo zaznave prihaja v trenutkih fiksacijeZa prepoznavanje je pomembna oblika črk oz. besedMočan kontrast izboljša branje z računalniškegamonitorja

SluhPodaja informacije o okoljuRazdalje, smeri, predmeti, itd.Slušni organ je sestavljen iz treh delovZunanje uho: ščiti notranje dele in ojača zvokSrednje uho: prenaša zvočne valove v obliki vibracijdo notranjega ušesaNotranje uho: pretvarja zvočne valove v živčneimpulze, ki se po slušnem živcu prenašajo v možgane

SluhZvokFrekvenca (pitch): višinaAmplituda (loudness): glasnostBarva (timbre, tone quality): razlika v tonu dvehrazličnih glasbenih instrumentov, ki zaigrata isto notoTon – zvok, sestavljen iz ene same frekvenceLjudje lahko slišimo frekvence med 20 Hz in 20 kHzZaznavanje višjih frekvenc bolj jasno od nižjihSlušni aparat filtrira zvoke“Cocktail party” fenomen

TipDaje pomembno povratno informacijo o okoljuObičajno glavno čutilo pri osebah s prizadetim vidomV koži obstajajo različni receptorjiTermoreceptorji – vroče/hladnoNocireceptorji – bolečinaMehanoreceptorji – pritiskNekatera področja so občutljivejša od drugih (npr.prstne blazinice)Kinestetika – zavedanje položaja telesa in njegovih delov

PremikanjeČ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žljajaVidni: ~ 250 msSlušni: ~ 150 msBolečina: ~ 700 ms

PremikanjeFitts-ov zakon – čas potreben da zadenemo tarčo:Mt = a + b log2(D/S + 1)a, b ... empirično določeni konstantiMt ... čas premikaD ... razdalja do tarčeS ... velikost tarčeTarča naj bo čim večja, oddaljenost od nje čim manjša

SpominTri vrste spominaSENZORIČNI –(pozornost)KRATKOTRAJNI (DELOVNI) --(trening)DOLGOTRAJNI

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

Sparkler trail, Stereo zvokSenzorični spomin se neprestano prepisuje z novimivtisiInformacija, ki ostane v senzoričnem spominu vsaj~20 sekund, se prenese v kratkotrajni spominKratkotrajni spomin“Beležka” za začasno pomnjenjeHiter dostop: ~ 700 ms Hitra pozaba: ~ 200 msOmejena kapaciteta: ~ 7 ± 2 enoteInformacija, ki ostane v kratkotrajnem spominu vsaj ~20 minut, se prenese v dolgotrajni spomin

Dolgotrajni spominSkladišče vsega našega znanjaPočasen dostop – ~ 1 / 10 s – in počasna pozabaPozabljanje odvisno od pogostosti uporabe – ponavljanja – in zapomnljivosti informacijeVelika oz. neomejena kapacitetaDve oblikiEpizodni – serijski spomin na dogodkeSemantični – strukturirani spomin o dejstvih, konceptih, veščinah, ipd.Semantični spomin izhaja iz epizodnega

Semantini spominStruktura semantičnega spominaOmogoča dostop do informacijPredstavlja odnose med posameznimi koščki informacijPodpira sklepanjeModel semantične mreže (Semantic network, s. map)Dedovanje – nasledniki podedujejo lastnosti starševJasne povezave med podatki – enotami informacijPodpira sklepanje na podlagi nasledstva

Dolgoroni spominShranjevanje informacij – pomnjenjePremik informacij iz kratkoročnega v dolgoročni spominKoličina pomnjene snovi je sorazmerna času učenja (treninga)Učenje lahko razdelimo ali raztegnemo na daljše časovno obdobjeLažje pomnjenje informacij, ki so strukturirane, imajo pomen in so nam vsaj delno znanePozabljanjePostopno, a zelo počasnoVpliv čustev: lahko se podzavestno “odločimo”, da nekaj pozabimo

MišljenjeSklepanje (utemeljevanje) Dedukcija, indukcija, abdukcijaReševanje problemov

Reševanje problemovKako najti rešitev neznanega problema z uporabo znanjaRazlične teorijeGeštaltTeorija problemskega poljaRazlični pristopi k reševanjuUporaba analogijePridobivanje veščin ali spretnosti

Napake in mentalni modeliVrste napakNenamerne napake (lapsusi)Pravilen namenVzroki: nespretnost, nepozornost, ipd.Prave napakeNapačen namenVzrok: napačno razumevanje

ČustvaBiološki odziv na fizični dražljaj imenujemo afektAfekt vpliva na naš odziv v določeni situacijiPozitivni a.: ustvarjalno reševanje problemovNegativni a.: ozkogledost“Negative affect can make it harder to do even easy tasks; positive affect can make it easier to do difficult tasks” (Donald Norman)Kakšen je pomen čustev v zvezi z zasnovo in oblikovanjem uporabniškega vmesnika?Stres otežuje reševanje problemovSproščeni uporabniki bodo manj kritični do pomanjkljivosti pri oblikovanju vmesnika

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

Individualne razlikeDolgoročneSpol, fizične in intelektualne sposobnostiKratkoročneUčinek stresa ali utrujenostiSpremenljiveStarost uporabnikovPri zasnovi uporabniškega vmesnika je potrebno paziti, da ne bi izločili kakega segmenta populacije !Psihologija in zasnova interaktivnega vmesnikaNekatere neposredne aplikacijeZaznavanje modre barve pri človeku je šibko, zato te barve ne smemo uporabiti pri pomembnih podrobnostihZa pravilno aplikacijo sta v splošnem potrebna razumevanje konteksta v psihologiji in razumevanje konkretnih eksperimentalnih pogojev

Uporabniška izkušnjaTehnični proizvodi, kjer je potrebna interakcija oz. sodelovanje uporabnika, so (bili) večinoma zasnovani zgolj kot sistemi, ki morajo izvesti predpisan niz operacij – inženirski pogledPri zasnovi oz. načrtovanju interaktivnih izdelkov je potrebno imeti v mislih končnega uporabnika – na uporabnika osredotočeni načrt (User centred design)Bistvena je pozitivna uporabniška izkušnja (Userexperience)

Dober vs. slab dizajnKaj lahko očitamo desnemu daljincu?Katere so oblikovne prednosti daljinca na levi?Ergonomična oblika (podolgovata oblika se prilega dlani)Logičen razpored tipk, barvno kodiranje, različne tipkeTipke hitro najdemo

Uporabniški vmesnikInteraktivnost lahko najpopolneje izkusimo in najbolje ocenimo z uporabo (opazovanje vs. vožnja z avtomobilom)

Interaktivni medijiInteraktivni mediji omogočajo aktivno sodelovanje uporabnika interaktivnost, dvosmerna komunikacijaDigitalni – elektronski – medijiAnalogni medijiJezik (govor) TiskInternetne storitve (splet, e-pošta, trenutno sporočanje, …)Video igre Mobilna telefonijaDigitalni video Interaktivna TV Elektronske knjige

RAČUNALNIK

RaunalnikRačunalniški sistem je sestavljen iz različnih elementovVsak od njih vpliva na interakcijoVhodne naprave: vnos besedila, kazalne napraveIzhodne naprave: zaslon, digitalni papirNavidezna resničnost: posebne naprave za interakcijo in prikazFizična interakcija: zvok, tip, biosenzorjiPapir: kot izhodna (tiskanje) ali vhodna (skeniranje) enotaPomnilnik: začasno (RAM) hranjenje in trajni mediji, kapaciteta in dostopProcesiranje: hitrost, omrežja

Interakcija z raunalnikomDa bi razumeli interakcijo človek-računalnik,moramo dobro poznati in razumeti računalnik!Kaj vstopa in izstopa? naprave, papir, senzorji, itd.Kaj omogoča? pomnjenje, obdelavo, omrežno delo

Tipini raunalniški sistemMonitor (računalniški zaslon) z okni, Tipkovnica, Miška, Ohišje računalnika, VariacijeNamizni računalnikPrenosni računalnik (laptop)PDA (dlančnik, ročni računalnik)Od vrste uporabljene naprave je odvisno, kakšna bostauporabniški vmesnik ter oblika oz. način interakcije

Kako je z interaktivnostjo?Pred davnimi časi…paketna obdelava podatkovGore luknjastih kartic, velike podatkovne datotekeDolgo čakanje na rezultat obdelave, izpis z matričnim tiskalnikomOb – pogostih – napakah ponovitev celotnega postopkaDanes: interaktivnostHitra povratna informacija, kratki odzivni časiUpravljanje in nadzor sistema večino časa v rokah uporabnikaDelovanje namesto razmišljanja Ali je hitreje vedno tudi bolje ?

Naprave za vnos besedilaTipkovnica (QWERTY itd.)Vnos črk/številk na telefonih, mobilnih napravahRokopisGovor

TipkovnicaNajbolj razširjena naprava za vnos besedila v osebni računalnikIzkušenemu uporabniku omogoča hiter vnos besedila in številkS pritiskom na tipko pošljemo ustrezno znakovno kodoZ računalnikom običajno povezana s kablom, lahko pa tudi brezžično

Tipkovnica QWERTYStandardizirana razporeditev tipk, toda…Ne-alfanumerični znaki razporejeni različnoZa 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šnerazširjenosti QWERTY tipkovnic ne morejo uveljaviti

Alternativne razporeditve tipkAbecednaTipke razvrščene po abecediTipkanje ni hitrejše ne za izkušene uporabnike ne za začetnikeDvorakovaPogosteje 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čarjevTipkanje pogostejših črkovnih kombinacij poteka izmenično z levo in desno roko10-15% hitrejše tipkanje in manjša utrujenost

Posebne tipkovniceRazvite za zmanjšanje utrujenosti (RSI !)Enoročne tipkovnice (npr. Maltronova)Akordična tipkovnicaMajhno število tipk (do pet)Vnos znakov s pritiskanjem različnih kombinacij tipkStrma krivulja učenjaIdealno za mobilne naprave (wearable computers !)Akordična, tipkovnica GKOS, Maltronova, desnoročna tipkovnica

Vnos besedila v mobilne telefoneEn- ali večkratni pritisk numerične tipkeVnos T9Zgolj enkratni pritisk za vsako črkoVgrajeni slovar pomaga “uganiti” pravo besedoZivjo = 94856

Prepoznavanje rokopisaVnos besedila v računalnik s pomočjo posebnega pisala in na pritisk občutljive pisalne površineNaravna interakcijaTehnične težaveLočevanje besedila na posamezne črkeInterpretacija posameznih črkUpoštevanje različnih slogov rokopisov oz. pisavUporaba v PDA in tabličnih računalnikihTipkovnica ni več potrebna

Prepoznavanje govoraHiter razvojUspešno ob izpolnjenih določenih pogojihEn sam uporabnik; učenje (trening) sistema o posebnostih uporabnikovega govoraOmejen besedni zakladTežaveMoteči zunanji zvoki, hrupNejasna oz. nenatančna izgovorjavaObširen besedni zaklad

Različni govorci

Numerina tipkovnicaHiter vnos številkKalkulator, tipkovnica na osebnem računalnikuRazpored številk na telefonih običajno drugačen

Pozicioniranje, kazanje, risanjeMiška (mouse)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 napravaZelo razširjena, enostavna za uporaboNatančen, hiter odzivZnačilnostiRavninsko gibanjeGumbi – eden do trije, namenjeni za izbiranjepredmetov na zaslonu, odpiranje menujev, risanje, itd.

Miška (2)Leži na miziZavzema prostorRoka se ne utrudiZaznava le posredno gibanjeMiškino gibanje premika kazalec na zaslonuMiška – premikanje v (x,y) smeri, kazalec –premikanje v (x,z) smeriVčasih težave s koordinacijo roka-oči pri začetnikih

Delovanje miškeDve možnosti zaznavanja gibanjaMehansko- Ob premikanju se vrti kroglica na spodnji strani miške- Deluje na praktično vsaki ravni površiniOptično- Svetleča dioda (LED) na spodnji strani miške- Relativno gibanje v (x,z) ravnini se izračuna na podlagizaznanih sprememb v intenziteti reflektirane svetlobe- Manj občutljiva na prah in umazanijo kot mehanska

Sledilna plošicaMajhna na dotik občutljiva ploščicaKazalec na zaslonu premikamo z drsenjem poploščici in s “tapkanjem”Večinoma v uporabi v prenosnikihPomembne nastavitveJakost pritiska za klik Hitrost dvoklika

Igralna palicaPosredno delovanjePritisk na palico ustreza hitrosti premikanjaGumbiNameščeni na vrhu ali spredaj (sprožilec)Pogosto v uporabi za računalniške igre, 3D navigacijoKazalna paličica (pointing stick) – pomanjšanaigralna palica na prenosnikih

Na dotik obutljiv zaslonZazna prisotnost prsta ali pisala na zaslonuI/O naprava, možen hkraten vnos podatkov in prikaz informacijNeposredna kazalna napravaPrednostiHitrost, ni potrebe po posebnem kazalcu (kurzorju)Primeren za menijsko izbiranjeUporaben v “sovražnem” okolju – čist, manjša nevarnost poškodbe

PomanjkljivostiPrsti lahko umažejo zaslonNenatančen – težko izbrati majhna območja, natančno risatiObičajno potrebno premikanje cele roke

PisaloPeresu podobna naprava za vnos podatkovRisanje neposredno po zaslonuLahko uporablja na dotik občutljivo površino ali magnetno detekcijoRazširjen v PDA, tabličnih računalnikih, ipd.Neposredna, enostavna uporabaOb pisanju/risanju zakrije zaslon

Sledenje pogleduVmesnik, ki deluje na principu sledenja smeri pogledaNpr. s tem, ko pogledamo element menija, ga izberemoLaserski žarek nizke intenzitete se odbije od mrežnicePrihodnost: 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, dolLe za osnovne funkcije premikanja (po besedilu, tabeli)Najpogostejša razporeditev obrnjene črke TV telefonih, TV/VCR/DVD daljinskih upravljalnikih, itd.Kurzorski gumbi ali mini igralne paliceV glavnem za menijsko izbiranje

Prikazovalne napraveMonitorKatodna cev (CRT), Tekoči kristali (LCD), Plazma, DrugoDigitalni papir

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

Loljivost in barvna globinaPojem loljivosti se – nedosledno – uporablja za:Število točk na zaslonu (Š x V)- npr. XGA: 1024 x 768, PDA: 240 x 400Gostoto točk – št. točk na enoto dolžine (dpi)- tipično med 72 in 96 dpiRazmerje š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)

Digitalni papirTanki upogljivi listiElektronsko posodabljanje vsebineZaslon se ne menjaObračanje kroglic ali kanali z obarvano tekočino in kontrastnimi kroglicamiHitro razvijajoče se področjeNavidezna resninost in 3D interakcijaNR: Interagiranje uporabnika z računalniško ustvarjenim – simuliranim okoljemPozicioniranje v 3D prostoruPremikanje in prijemanje predmetov3D gledanje

3D pozicioniranjePilotska kabina in navidezni krmilnikiVolan, krmilo, gumbi, prikazovalniki, ipd.3D miškaŠest prostostnih stopenj: x, y, z, + rotacije okoli teh osiPodatkovna rokavicaOptična vlakna za določanje položaja prstovNR čeladaZaznava premikanje glave in včasih tudi smer pogleda

3D prikazovanjeNamizna NRNavaden rač. zaslon, miška s tipkovnico

Perspektiva in gibanje ustvarita 3D učinekPravo 3D gledanjeUporaba stereoskopskega vidaNR čeladaZaslon, zatemnjena očala, itd.

SimulatorjiLetenje, plovba, tehnološki procesiNa steno projicirano dogajanjeRealistično okoljeKrmilne ročice, gumbi, itd.Drugi ljudjeMerilniki in senzorjiPosebni prikazovalniki in merilnikiZvok, otip, vonjBiosenzorji

Ostali utiZvočni signaliZvonenje, brnenje, žvižgi, itd.V uporabi za signaliziranje napake ali potrditev dejanja (npr. pritisk tipke)Otip in dotikPomembna pri igrah (vibracije) in simulacijah (kirurški instrumenti)Haptične napraveVonj, okusTehnologija še zelo omejena

Papir – tiskanje in skeniranjeTehnologije tiskanjaPisave,WYSIWYGSkeniranje, optično prepoznavanje znakov (OCR)

TiskSlika sestavljena iz majhnih točkTehnologija omogoča tiskanje poljubnega zaporedja znakov ali slikeKritični dejavnikiLoč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 minutoCena oz. stroški tiskanja

Tehnologije tiskanjaMatrični tiskalnikiUporabljajo trak s črnilom (podobno kot pri pisalnem stroju)Tipična ločljivost: 80-120 dpiZastarelo, le za posebne nameneBrizgalni (ink-jet) tiskalnikiTiskalna glava pošilja majhne kapljice črnila na papirLočljivost: od 300 dpi navzgorLaserski tiskalnikiPodobnost s fotokopiranjem: na elektrostatsko nabito površino bobna se odlagajo delci tonerja (praškasto črnilo), ki se nato prenesejo na papir in tam termično fiksirajoLočljivost: od 600 dpi navzgor

Prikaz slike: zaslon vs. papirWYSIWYG“What you see is what you get”Cilj urejevalnikov besedil, ipd.Toda...Monitor: ~72 dpi, ležeča (landscape) slikaOdtis: 600+ dpi, pokončna usmerjenost (portrait)Prikaza slike na zaslonu in izpisu ne bosta nikoli popolnoma enakaPotreba po različnih oblikovalskih pristopih, grafiki, itd.

SkenerjiPretvorba iz analogne – slika/besedilo – v digitalno (rastrsko oz. bitno) oblikoDve glavni skupiniPloski: dokument položimo na stekleno ploščo, celotna stran se pretvori v rastrsko slikoRočni: s skenerjemgremo čez dokument, skenirni pas 7-10 cmZaznavanje intenzitete svetlobe, ki se odbije od papirjaTipična ločljivost: 600-2400 dpiUporabaNamizno založništvo (DTP) – vključevanje fotografij in drugih slik v publikacijeSistemi za digitalno shranjevanje dokumentov, odpade (?!) potreba po hranjenju v papirni obliki

Posebni skenerji za diapozitive in fotografske negativeOptično prepoznavanje znakov (OCR)Postopek pretvorbe bitne slike besedila v besedilo, ki ga je mogoče obdelovati z urejevalnikombesedilaTežave z enakostjo pisav, postavitvijo besedila, itd.

Shranjevanje podatkovZačasni in trajni zapis podatkovHitrost, kapaciteta, stiskanje (kompresija) podatkovFormati

Hitrost in kapacitetaNekaj številk (kapaciteta: brez stiskanja podatkov)…Knjiga (besedilo): ~320.000 besed, 2 MBSveto pismo: 4,5 MBDigitalna fotografija: ~10 MB- 2-4 mio točk, 24-bitna barvna globinaSkenirana stran: ~128 MB- A4 format, 1200 dpi, 8-bitna sivinska slikaVideo: ~10 MB na sekundo- 512x512, 12-bitna barvna globina, 25 okvirjev/s

Stiskanje podatkovZmanjšanje količine potrebnega pomnilnika – prostora za shranjevanjeBrezizgubno (lossless) stiskanjePovrne prvotno obliko besedila ali slike – npr. GIF, ZIPIskanje skupnih značilnosti oz. podobnosti- besedilo: AAAAABBBBCCCCCCC 5A 4B 7C- video: primerjava zaporednih okvirjevIzgubno (lossy) stiskanjeDelna povrnitev originalnih podatkov – npr. JPEG, MP3Izkorišča lastnosti človeške zaznave- JPEG: izguba ostrih prehodov med točkami in nekaterih barv- MP3: manjša točnost težko zaznavnih tonov

Formati za shranjevanje ­ medijiGrafikaŠtevilni formati: PostScript, GIF, JPEG, TIFF, itd.Različne metode (algoritmi) stiskanja slikAudio / VideoVeliko formatov: MPEG,WAV, QuickTime, itd.Stiskanje tu še pomembnejšePretočni (streaming) formati za distribucijo preko omrežja: SWF, RM, itd.

Uporabniški vmesnik – nartovanje   in  izdelava

Nartovanje 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 zosredotoč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 spletnepredstavitve (Web usability)

Uporabniški vmesnikUV mora biti zasnovan tako, da bo ustrezal nivojuznanja, izkušnjam in pričakovanjem uporabnikaUporabnik pogosto ocenjuje sistem po njegovem UVin ne po njegovi funkcionalnostiZaradi slabo zasnovanega in izdelanega UV lahkouporabnik naredi daljnosežne in usodne napakeVečina poslovne programske opreme temelji nauporabi grafičnega UV (Graphical user interface – GUI)Včasih se uporablja tudi znakovni oz. vmesnik zukazno vrstico (Command line interface – CLI)

Znailnost Opis

Prednosti grafinega UVUčenje in njegova uporaba sta enostavnaUporabnik brez predznanja se lahko hitro nauči inprivadi uporabljati nov sistem.Uporabnik lahko hitro preklaplja med opravili in delaz različnimi programi oz. aplikacijamiInformacija ostane vidna v svojem lastnem oknu, ko se pozornost zamenjaHitra, celozaslonska interakcija s takojšnjimdostopom kjerkoli na zaslonu

Človeški dejavniki pri zasnovi UVOmejen kratkotrajni spominLjudje 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čniRazlikujemo se po fizičnih, intelektualnih in ostalih sposobnostih, kar morajo razvijalci programske opreme upoštevati.

Pravila nartovanja 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.

Pravila nartovanja UV (2)Minimalno presenečenje (Minimum surprise)Obnašanje sistema ne sme uporabnika nikdar presenetiti.Če nek ukaz deluje na znan način, bo znal uporabnikpredvideti 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.

Pravila nartovanja UV (3)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 razneprofile uporabnikov sistema.Primer: večje črke za vidno prizadete.

Oblike interakcijDirektna manipulacijaPrimeri 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 izbiranjePrimeri 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.

Oblike interakcij (2)Vnašanje v obrazecPrimeri 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 jezikPrimeri uporabe: operacijski sistemi, nadzorni sistemi.Prednosti: moč, fleksibilnost.Pomanjkljivosti: dolgotrajno učenje, težavno odkrivanje in popravljanje napak.

Oblike interakcij (3)Naravni jezikPrimeri 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

Predstavitev informacijKako predstaviti oz. prikazati informacijo – rezultatrač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).INFORMACIJA PROGRAMSKAOPREMA

Dejavniki predstavitve informacijAli uporabnika zanima podrobna informacija ali parazmerja 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 sopomembne relativne vrednosti?

Analogna vs. digitalna predstavitevDigitalna predstavitev informacijZgoščena – zavzame malo prostora na zaslonu.Možno je podajanje natančnih vrednosti.Analogna predstavitev informacijPrimernejša za podajanje splošnega vtisa o vrednostih ali trendih.Možen prikaz relativnih vrednosti.Lažje opazimo izstopajoče vrednosti.

Vizualizacija informacijKako prikazati velike količine informacij?Vizualizacija lahko odkrije povezave in trende v podatkihPrimeri vizualizacij:Vremenske informacije Stanje telefonskega omrežja Tlaki, temperature

Sporoila o napakahOblikovanje sporočila o napaki je zelo pomembnoZaradi neustreznih sporočil ob napakah lahko uporabnik sistemzavrne, namesto da bi ga uporabljalSporočila morajo biti vljudna, kratka in jedrnata, dosledna in konstruktivnaPri oblikovanju sporočil je potrebno upoštevati zlasti ozadje in izkušnje uporabnikov sistema

Postopek izdelave UVIzdelava UV je iterativni proces, kjer je ključno tesno sodelovanje med izdelovalci (razvijalci) in uporabnikiTri glavne aktivnosti tega procesa so:Analiza uporabnika: razumevanje, kaj uporabniki pričakujejo od sistema.Izdelava prototipov sistema: razvoj več prototipov UV.Evalvacija UV: preizkušanje teh prototipov skupaj z uporabniki.

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 nalogUporabnost spletnega mesta oz. predstavitve (Web usability) pove, kako hitro in/ali enostavno lahko uporabnik najde iskane informacije oz. opravi zadano nalogoKoristnost 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)

Uljivost in uinkovitostUčljivost pove, kako hitro se uporabnik nauči uporabljatisistem – spletno mesto oz. predstavitev.Sistemi z dobro učljivostjo naredijo dober “prvi vtis” – pomembno zaradi hude konkurence med spletnimi predstavitvamiKljučno vlogo igra intuitivnost sistemaZ učinkovitostjo opredelimo, kako hitro lahko uporabnikopravi določeno nalogoMerimo jo v časovnih enotah ali številu potrebnih operacij

Enostavnost pomnjenja in napakeEnostavnost pomnjenja je sposobnost sistema, da uporabniku ostane v spominuV idealnem primeru uporabnik nemoteno, brez sprememb uporablja sistem ne glede na čas, ki je pretekel od njegove zadnje uporabeNapake so sestavni del vsakega sistemaMerimo, kako sistem preprečuje pojavljanje napak, kako enostavno jih je možno odkriti, in kako odpraviti

Subjektivno zadovoljstvoNa uporabnost sistema močno vpliva tudi subjektivnozadovoljstvo uporabnikaZlasti pomembno pri nedelovnih okoljih, zabavi namenjenih sistemih in tam, kjer je najvažnejša uporabnikova izkušnja (User experience)

Uinkovitost vs. as uporabeSistemi za eksperta zahtevajo več časa in energije za spoznavanje sistema, vendar omogočajo doseganje večje učinkovitostiDobri sistemi se prilagajajo tipu uporabnika – poosebljanjeUV (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 verjetnaKrivulja se običajno ne začne v izhodišču koordinatnega sistemaOsnovni 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, ipd.

Posebnosti spletnega UV (2)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 spletnegamesta oz. spletnega UV

Vprašalnik IntervjujiHevristično vrednotenje Sprehod skozi spletno predstavitevPrototipi Analiza konkurenceAnaliza nalog Testiranje z uporabnikiOpazovanje Psihofizične metodeMetoda razvrščanja kart Pregled upoštevanja standardovBeleženje uporabe Tehnična analizaSlikanje zaslona Skrivnostni obiskovalecAnaliza uporabe prostora Analiza vplivnostiDostopnost spletne predstavitve Metode za avtomatiziranovrednotenje 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 drevesaDelo s kvalitativnimi spremenljivkami približa uporabo modela odločevalcemKonč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 opraviV predstavljenem primeru sta vsebinska kriterija vrednost informacij in vrednost komunikacije

Kriteriji uporabnostiNajvečkrat je moč uporabnost razčleniti na pet atributov oz. kriterijev:UčljivostUčinkovitostZapomnljivostNapakeZadovoljstvoVč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

Konna 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 kriterijaNpr. Vsebina = utežni faktor 0,4; Uporabnost = 0,3; Tehnologija = 0,3

Znailnosti uporabne spletne strani

Enostavna navigacija – uporabniki vedno bolj navajeni na določena pravila glede postavitve elementov in izrazov na spletni strani:Logotip organizacije oz. podjetja se nahaja v levem zgornjemkotu, klik odpre njeno domačo stranKlik na hiperpovezavo “O nas” vodi do informacij o organizacijiNavigacija na vsaki strani na enakem mestu poleg glavnega besedila (vsebine)Utripajoči elementi (animacije!) običajno pomenijo oglase oz. komercialna sporočila

Hitro odpiranje – uporabniki čakajo največ nekaj sekund, da se v njihovem brskalniku prikaže želena spletna stran, zato:Za postavitev svoje spletne strani uporabljaj prekrivne sloge (CSS = Cascading Style Sheet) namesto tabel Navigacijske elemente prav tako izdelaj s pomočjo CSS namesto z uporabo slikV HTML programski kodi naj bo čim manj praznega prostora, komentarjev (command tags), ipd.

Hiter zajem informacij – za razliko od tiskane vsebine spletnih strani ne prebiramo, temveč jih “skeniramo”, zato smo pozorni zlasti na:NasloveHiperbesedilo - besedilo, ki vsebuje povezave na druga besedilaKrepko besediloSezname – zlasti z vrstičnimi oznakamiBesedilo nampade v oči pred slikami, zato naj te ne vsebujejo najpomembnejših informacij!

Uporabnika ne smemo omejevati – dopustiti mu moramo, da brska po internetu na njemu domač, ustaljen način, zato:Namesto v novem naj se hiperpovezava odpre v istem oknu60% uporabnikov uporablja za navigacijo po spletnih straneh gumb “Nazaj”, ki je na novi strani onemogočenNa svoji spletni strani ne uporabljaj okvirjev (frames), saj ti povzročajo vrsto težav z uporabnostjo:Onemogočajo gumb “Nazaj”Onemogočajo shranjevanje spletne strani med priljubljene (bookmarking)Ni možno pošiljanje povezave do strani po e-pošti Problemi s tiskanjem, itd.

Uporabniška izkušnjaUporabniška izkušnja (UX = User eXperience) je izraz za celotno izkušnjo in zadovoljstvo uporabnika, ki uporablja nek izdelek ali sistemUX temelji na na uporabnika osredotočenem načrtovanju (User-centered design) – vključuje vse vidike uporabnikove interakcije s proizvodom: kako ga občuti, spoznava in uporablja

Oblikovanje  in razvoj  spletnih predstavitev(Web design & Web development)

Spletno mesto in spletna stran

Spletno mesto in spletna stranSpletno mesto (Web site) je zbirka spletnih strani(Web pages), slik, zvočnih, video in drugih vsebinSpletna mesta oz. strani se nahajajo na spletnih – HTTP– strežnikih (Web servers), do njih dostopamo s spletnim brskalnikom (browser) – t.i. HTTP odjemalcemNapisana so v jeziku HTMLStatina spletna mesta: strani so shranjene na strežniku v taki obliki, kot si jih bo uporabnik ogledalDinamina 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.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 (ContentManagement System, CMS) je spletni program za ustvarjanje, urejanje, vzdrževanje, objavljanje in arhiviranje vsebine spletnih mestSpletno mesto urejajo in vzdržujejo (osvežujejo) uporabniki, brez pomoči podjetja ali osebe, ki je CMS izdelaloPrimeren 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 aplikacijePostavljanje 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 oblikovanjemVključuje grafično oblikovanje strani, njihovo kodiranje, programiranje “back-end” sistemov, konfiguriranje spletnih strežnikov, itd.Stopnje razvoja spletnega mesta podobne razvojnim fazam programske opremeAnaliza zahtevKonceptualni dizajnModeliranje in izdelava prototipovIzdelavaObjavaVzdrževanje

Spletne tehnologijeNa strani odjemalca običajno potekata oblikovanje in postavitev, na strani strežnika pa skrb za funkcionalnost in “back-end” sisteme spletnega mestaTehnologije na strani odjemalcaHTML oz. XHTML, CSS, JavaScript, VBScript, …Tehnologije na strani strežnikaPHP, ASP.Net, SQL, Java, …

HTMLHTML (Hypertext Markup Language) – označevalni jezik za oblikovanje večpredstavnostnih dokumentov – spletnihstraniS pomočjo značk (tags) določa vsebino in izgled spletne strani, ki jo prikaže brskalnikHTML dokument – besedilna datoteka s končnico .htm ali .html, sestavljena iz značkHTML datoteko lahko ustvarimo in urejamo s preprostimurejevalnikom besedila – npr. MS Beležnica – ali z uporabniku prijaznim grafičnim YSIWYG programom – npr. Adobe Dreamweaver

HTML elementiHTML elementom lahko določimo lastnosti – atribute in vsebinoHTML elementi predstavljajo naslove, odstavke, hiperbesedilne povezave, sezname, tabele, slike, vgrajene (embedded) večpredstavnostne programe..

HTML hiperpovezave<a href="http://www2.ntf.uni-lj.si/ot/">Spletna stran OT NTF!</a><a href="mailto:webmaster@example.com">Pošlji pošto na:</a><a href=“kazalo_strani.htm"><img border="0" src="buttonnext.gif" width="65" height="38"></a>Lastnost href doloa ime (npr. URL naslov) ciljne datoteke, ki se odpre, ko uporabnikklikne na povezavo Ciljna datoteka je lahko spletna stran, slika, zvona datoteka, film ali e-poštni naslov Znaka (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 podatkovXHTML 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 XHTMLXHTML elementi morajo biti pravilno gnezdeniXHTML elementi morajo vedno biti zaključeniXHTML elementi morajo biti zapisani z malimi črkamiXHTML dokumenti morajo imeti en korenski element

XHTML (2)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>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 straniS slogi določimo, kako bodo prikazani HTML elementiS pomočjo zunanjih slogovnih predlog lahkospreminjamo izgled in postavitev vseh naših spletnihstrani, tako da urejamo zgolj en sam CSS dokument

JavaScriptJavaScript – skriptni jezik, ki omogoča dodajanje interaktivnosti HTML stranemNezahteven programski jezik; NI povezan z JavoObičajno vključen (embedded) neposredno v HTML stranUporaba JavaScripta je brezplačnaIzvaja različna opravila oz. dejanjaVstavljanje dinamičnega besedila v HTML stranBranje in pisanje HTML elementovPrepoznavanje vrste uporabnikovega brskalnikaUstvarjanje piškotkov, itd.

PHP in ASPPHP (Hypertext Preprocessor) – skriptni jezik, ki omogoča ustvarjanje dinamičnih in interaktivnih spletnih mestSkripte se izvedejo na strežniku (server-side scripting)Odprtokodno brezplačno programjePHP datoteka lahko vsebuje besedilo, HTML značke in skriptePogosto uporabljen skupaj z Apache (spletni strežnik) na različnih operac.sist.ASP.NET (Active Server Pages) – Microsoftov skriptni jezik za ustvarjanje dinamičnih in interaktivnih spletnih mest

SQL in JAVASQL (Structured Query Language) – programski jezik za dostopanje in upravljanje s sistemi podatkovnih baz kot so Oracle, Sybase, SQL Server, DB2, Access in drugeJAVA – Objektno orientiran programski jezik soroden C in C++Razvit v zgodnjih 90-ih 20. stoletja v podjetju Sun MicrosystemsKot samostojni programali kot vgrajena aplikacija (applet), ki jo poženemo iz spletnega brskalnika

LAMPprogramska oprema za spletne strežnike, ki omogoča gostovanje dinamičnih spletnih straniLinux – operacijski sistemApache – programza spletni strežnikMySQL – sistemza upravljanje z relacijskimi podatkovnimi bazami (DBMS)PHP, Perl in/ali Python – skriptni jeziki

Ustvarjanje spletnih mestHTML urejevalniki: Beležnica,Word, itd.WYSIWYG urejevalniki: Adobe Dreamweaver, MS FrontPagePredloge (templates)

Spletnik (SiOL)Izgradnja spletne strani v sedmih preprostih korakihVstavljanje lastnih vsebin (slike, zvoki)Spreminjanje barvDoločanje pisavIzbira barvne in oblikovne osnove (predloge)Dodajanje večpredstavnostnih vsebin (npr. Flash animacije)24-urni dostop do spletne strani in možnosti njenega urejanja

ObjavaPostavitev na spletni strežnik – FTPGostovanje (Hosting) spletne predstavitve: spletna aplikacija se prenese na namenski računalnik (strežnik), ki je povezan v spletno omrežje, od koder obiskovalci dosegajo spletno predstavitev.

Strežnik običajno ponuja tudi druge storitve: možnost ustvarjanja poljubnega števila elektronskih poštnih predalov, statistiko obiska na spletnih straneh, protivirusno zaščito, itd.

Oblikovanje za spletLočljivostBrskalnikiBarve (Web-safe colours)Slike (formati, kompresija)Pisave

Zaslonska loljivostLočljivost zaslona: običajno med 72 in 96 ppiVelikost (“ločljivost”) zaslona: največkrat 1024 x 768 oz. 800 x 600 slikovnih točk (pikslov)

BrskalnikRazlični brskalniki lahko isto spletno stran prikažejo različnoSam brskalnik zasede določeno količino prostora, ki zato ni na voljo za prikaz vsebine spletne straniSamodejno prilagajanje (Percentage-based design): besedilo se prilagodi razpoložljivemu prostoru

BarveSpletno varne (Web-safe) barve: nabor barv, ki se prikazujejo enako neglede na vrsto brskalnika in operacijskega sistema Pri oblikovanju spletnih strani je priporočljivo uporabljati le barve iz palete 216 spletno varnih barv

Formati in stiskanje slikNamen stiskanja (kompresije) slik za splet je zagotoviti, da bo slika ustreznih barv, velikosti in formata za prikaz v brskalnikuNajvečkrat se za splet uporabljajo trije formati: GIF, JPEG, PNGGIF (Graphics Interchange Format)Najbolj uporaben pri rastrskih slikah, skicah ali slikah z veliko površino ene barveBarvna globina od 1-bitne (2 barvi) do 8-bitne (256 barv) Podpora prosojnosti (transparentnosti) in omejeni animacijiTipična velikost datoteke 20 – 90 % originalne velikosti

Formati in stiskanje slik (2)JPEG (Joint Photographic Experts Group)Primeren za fotografije, kompleksnejše foto-realistične slike in barvne vzorceKakovost slike lahko določimo v odstotkihTipična velikost datoteke 5 – 20 % originalne velikostiPNG (Portable Network Graphics)Razvit kot naslednik formata GIF z namenom njegove zamenjavePodpora spremenljivi prosojnosti, prepletanju, itd.Slike stisne 5 – 25 % bolje kot GIFPočasno uveljavljanje formata, vsi brskalniki ne podpirajo vseh njegovih možnosti

PisavePodobno kot varne barve obstajajo tudi “varni” tipi pisav (fonti) za spletUporaba teh pisav na spletnih straneh zagotavlja njihov pravilen prikaz v uporabnikovembrskalniku ne glede na vrsto operacijskega sistema ali tip brskalnikaCSS generične družine pisav Sans serif – npr. Arial, Tahoma, VerdanaSerif – npr. Times New Roman, Century SchoolbookMonospace – npr. Courier New, OCR A ExtendedCursive, Fantasy (pogojno!)Če želimo zagotoviti vedno enak prikaz določenega tipa pisave, uporabimo grafično datoteko

Vepredstavnost    (mult imedija)Kaj je vepredstavnostVepredstavnost – 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 vepredstavnostLinearna večpredstavnostUdeleženec nima nadzora nad potekom, npr. kinematografska predstavaNelinearna večpredstavnost (interaktivna multimedija)Omogoča uporabniško interaktivnost, npr. svetovni splet,računalniške igre, računalniške simulacije ali treningHiperpredstavnost (hypermedia) – sistem vodenja uporabnika preko povezav do sorodnih datotek z grafiko, zvokom, animacijami ali videom na podoben način kot prihiperbesedilu

Raunalniško podprta vepredstavnostDva ali več različnih medijevRačunalniška večpredstavnostVeččutna (multisenzorna) izkušnja – podobnost z resničnim svetomVeččutno pomnjenjeIzobraževanje – možni različni pristopi k učenjuHiperbesedilo in hiperpredstavnost

Prednosti in slabostiGloboka (popolna) vključenost uporabnikaVeččutnostUstvarjanje povezav znanjaIndividualiziranostSoustvarjanje učitelja in učencaIzgubljenost v kiberprostoruPomanjkanje struktureVčasih enosmerna,neinteraktivna – ni povratneinformacijeKompleksno ustvarjanjevsebinePotreben precejšen miselninapor pri uporabi

Podroja 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 vepredstavnostiBesediloDigitalne slikeTočkovna (rastrska), predmetna (vektorska) grafikaDigitalni audioDigitalni videoPretočni video

Frekvenca vzorenja število vzorcev, ki jih pretvorimo v bite v določeni časovni enotiPove, kolikokrat v sekundi je zvok vzorčen

Frekvenca vzorenjaNyquistov 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 zvonega zapisaFrekvenca vzorčenjaLoljivost – število bitov za posamezen vzorec 16-bitni ali 24-bitni zapisDinamika (Dynamic range) – razmerje med signalom in šumom (Signal-to-noise)Dinamika kakovostnega zvoka > 80 dB

Analogno­digitalna pretvorbaMikrofon pretvori zvok v električni signalAnalogno/digitalni konverter (ADC) meri – vzorči – amplitudoanalognega signala in pošilja v procesor zaporedje številkDigitalno/analogni konverter (DAC) spreminja zaporedje številkv stopničasti analogni signalFilter zgladi stopničasti signal

Shranjevanje digitalnega zvokaKoličina podatkov, potrebna za zapis enominutne zvočnepredstavitve:Zaradi velike količine podatkov se dostikrat uporabljastiskanje oz. zgoščevanje zapisaSkladba 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 diskDatoteke v tem formatu zasedejo veliko prostora, je pa zvokskoraj popolnoma enak originaluUporablja se zlasti v okolju WindowsMP3 (MPEG 1 Audio Layer 3) – stisnjeni zvočni podatki1/10 velikosti WAV datotekePrenos po internetu (Napster), shranjevanje na prenosnihnapravah (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šanjakakovosti zvoka se doseže z: odstranitvijo mehkih zvokov, kijih prekrivajo glasnejši zvoki odstranitvijo frekvenc, ki soizven človekovega slišnega območjaOdstranitev frekvenc, ki jih ne slišimo dobroUporaba naprednih metod stiskanja podatkov

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

Splet Splet  2.0 in socialna omre ž ja

Splet 2.0Tim O’Reilly: konferenca Web 2.0 (2004)“Druga generacija” na spletu temelječih skupnosti inspletnih storitevSpletni dnevniki (blogi), spletne skupnosti,podcasting, wiki, RSS viri, itd.Omogočanje in spodbujanje ustvarjalnosti,sodelovanja, deljenja (sharing) med uporabnikiNe gre za nadgradnjo spleta v tehničnem smislu,temveč za spremembo v njegovem zaznavanju inuporabi !

Znailnosti spleta 2.0

Splet kot platformaDostop do storitev preko spletnega brskalnika:Writely, Flickr, del.icio.us, Kiko...Personalizirana, dinamična, “data driven”, funkcijskobogata spletna mestaKontinuirni razvoj (večne ‘beta’ verzije)Odprtokodna programska oprema in odprti standardi

Izkorišanje kolektivne inteligenceModrost množicRazličnost mnenj NeodvisnostDecentraliziranost ZdruževanjeUporaba značk (tagging)- folksonomiesFlickr Del.icio.us

Podatki enako pomembni Podatki enako pomembni kot funkcionalnostIzkoristi svoje edinstvene podatke…Amazon – personalizirana priporočilaGoogle …in jih deli z drugimiWeb Services & APIs - REST, SOAP, etc

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

Vizualno obdelovanje informacijVeč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 oblikidnevnika, ki ga lahko bere vsakdoPrijazna uporaba tako do avtorja kot do obiskovalcevAvtorji opisujejo lastni, subjektivni pogled na svet, obiskovalci podajajo svoja mnenjaDecembra 2007 iskalnik blogov Technorati indeksiral več kot 112 mio blogov

RSSTehnologija na podlagi XML-a, ki omogočasamodejno obveščanje o naročenih temahRSS opozori o novem članku ali novici, ne da bi bilopotrebno obiskati spletno stranOdjemalec – program – za RSS datoteke izpisujeinformacije, ki jih pridobi iz raznih RSS kanalov oz.virov (šport, zabava, tehnologija, itd.)RSS BanditFeedreaderŽ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 socialnihinterakcij in on-line druženjaSpletna mesta, ki jih ustvarjajo oz. soustvarjajouporabniki (UGC - User generated content) –interaktivnost !www.classmates.com – prva socialna spletnaskupnost (1995)Pomaga članom pri iskanju, povezovanju in ohranjanjustikov s prijatelji in znanci iz njihovega življenja

Možnosti soustvarjanja vsebin insodelovanja uporabnikovDvosmerna komunikacijaDodajanje komentarjevSodelovanje na forumihDodajanje slik, video posnetkovOcenjevanje prispevkovOznačevanje (tagging) vsebinePovezovanje z ostalimi obiskovalci spletnega mestaIzmenjava mnenjGradnja mreže kontaktov

Oblike navideznih skupnosti – Social softwareUsenet (novičarske skupine)Ena prvih (1979) decentraliziranih, porazdeljenih arhitektur diskusijskih skupinElektronska oglasna deska (Bulletin Board System, BBS)Dostopanje do datotek in uporaba konferenc, povezovanje uporabnikov s pomočjo modemaAktualno od začetka 80-ih do sredine 90-ih, ko se razširi svetovni splet

Oblike navideznih skupnosti (2)Spletni dnevniki (blogi) MySpace Blogger LiveJournalNavidezni svetovi/mesta Second LifeTrenutno sporočanje (Instant messaging, IM)

MMORPG (Massively multiplayer on-line roleplayinggame)World ofWarcraft Omrežje vsak z vsakim (Peer-to-peer, P2P)Napster BitTorrentWiki WikipediaSvetovni splet eBay GeoCitiesInternetna trgovina Amazon.com

Skupne znailnosti socialnih omrežijUstvarjanje profilaVečina storitev zahteva vnos e-naslovaPovezava do in uporaba računa pri Googlu ali YahoojuUstvarjanje uporabniškega imena in gesla za bodočeuporabe te storitveProfil se poveže z drugimiProfil na ogled drugimuporabnikomRazlični nivoji dostopa do informacij vsebovanih v profilu

Podrobnosti profilaOsebni podatkiIme in priimek, starost, spol, višina, etnična pripadnost, kraj bivanjaEna ali več osebnih fotografijSpolna usmerjenost, zakonski stan, verska opredeljenostKontaktni podatkiElektronski naslovNaslov(i) za trenutno sporočanje – IRC, ICQ, SkypeŠt. mobilnega in stacionarnega telefona

Podrobnosti profila (2)Osebnostne značilnostiAktivnosti, interesi Koga želimspoznati? Priljubljena glasba / filmi / knjige / TV oddaje Spretnosti, znanjaDružbeno ozadje (networking background)Šola / fakulteta Pretekla / trenutna zaposlitev TečajiStrokovno samoovrednotenje (self-tagging)

Družbeni vidiki internetaVedno večji pomen slehernega posameznikapri:izmenjavi informacijvplivu na medijesooblikovanju informacijske dobe

Splet 3.0Prihodnost svetovnega spletaSemantični splet (Semantic web)Vseprisotna povezljivost – mobilni internetni dostop, mobilne napraveInteligentne aplikacije – procesiranje naravnegajezika, avtonomni agenti

Mobilne komunikaci je   in brez ž ina omrež ja

Mobilna telefonijaMobilni telefon je elektronska naprava dolgega dosega, ki se uporablja za mobilno glasovno ali podatkovno komunikacijo in temelji na omrežju specializiranih baznih postajNovembra 2007 že 3,3 milijarde naročnikov (~ uporabnikov) mobilne telefonije – polovica človeštva!Mobilni telefon je najbolj razširjena elektronska naprava na svetu

NMT1G: Nordic Mobile Telephone: Skandinavija (Ericsson, Nokia), BeneluxAnalogni prenos govora oz. zvokaPrenos podatkov ni bil moženNaročniki so lahko komunicirali zgolj znotraj svojih državnih meja

GSM2G: Global System for Mobile CommunicationsDigitalni prenos govora in podatkov: analogni signal se pretvori v digitalnega (vzorčenje in kodiranje)Frekvenčna območja: 900, 1800 MHz (Evropa, Azija, Avstralija), 1900 MHz (Amerika, Afrika)Najbolj razširjen 2G sistem na svetuŠtevilne izboljšave in nove možnostiMožnost gostovanja v tujih omrežjih (roaming)Visoko kakovostne in varne glasovne in podatkovne storitve

Delovanje (1)Vsako geografsko področje je razdeljeno na posamezne celice, ki imajo vsaka svojo bazno postajoSignal potuje od mobilnega terminala preko bazne postaje do centrale, ki signal sprejme in ga posreduje drugi bazni postajiPovezava med terminalom in bazno postajo temelji na radijski povezaviBazna postaja je s centralo povezana z optičnimi vlakni, radijskimi zvezami ali žičnimi povezavami

Delovanje (2)Ko vklopimo svoj mobilni terminal, ta poišče bazno postajo, v območju katere se nahajamoBazna postaja to naprej sporoči centraliV primeru, da nas nekdo pokliče, centrala poskrbi za to, da bazni postaji (v kateri se nahajamo) posreduje klic, ki nam je namenjenČe kličemo mi, terminal sporoči bazni postaji, kdo smo, le ta pa informacijo prenese centrali. Centrala mobilniku določi prosti kanal, mobilnik nanj napoti in od njega dobi informacijo, koga kličemo. Natocentrala poskrbi za vzpostavitev zveze z osebo, ki jo kličemoČe se med pogovorom premikamo in prehajamo iz območja ene bazne postaje v drugo, si te med seboj podajajo naš signal in omogočajo nemoten pogovor

HSCSD, EDGE, GPRS2.5G: Nadgradnje sistema GSM

UMTS3G: Universal Mobile Telecommunications SystemEden od petih sistemov razvitih v skladu s priporočili Mednarodnega telekomunikacijskega združenja(ITU)Hitrejši (prenos do max. 2 Mbit/s) in bolj kakovosten prenos podatkovŠtevilne nove možnosti

Storitve mobilne telefonijeGovorne (zvočne) in podatkovneTelefonski pogovor SMS, MMSPrenos datotek (besedilo, audio, video) Internet: splet, e-poštaVideoigre VideotelefonijaRadio, TV GPSElektronska denarnica (plačevanje parkirnine, naročanje pijače iz avtomata, nakup vozovnice za vlak)Prihodnost ???

Brezžina omrežjaOmrežja kratkega dosega: IR, Bluetooth, NFCOmrežja dolgega dosega: satelitske povezave,Wi-Fi,WiMAX

IrDAKomunikacijski standard (protokol) za izmenjavo podatkov med napravami na majhnih razdaljah na podlagi infrardečega (IR) valovanjaSlabost: potreben neoviran prostor med napravama, ki komunicirata (direct line of sight)Uporaba v mobilnih telefonih, PDA napravah, prenosnikihDanes zastarela tehnologija, hitro jo izpodrivata zlasti Bluetooth in WLAN

BluetoothBrezžični protokol za izmenjavo podatkov na kratkih razdaljah – max 1, 10 ali 100 mUporablja nizkofrekvenčne radijske valove (mikrovalovi): 2,4 GHzPovezovanje elektronskih naprav za osebne namene (mobilni telefoni, prenosniki, vhodne naprave, tiskalniki)Raznolikost uporabe: pošiljanje elektronske pošte, prostoročno telefoniranje, prenašanje datotek, igranje igric, brskanje po spletu, tiskanje

NFCTehnologija temelječa na visokofrekvenčnih radijskih valovih (3-30 MHz) za izmenjavo podatkov med napravami Uporabna na razdaljah cca. 10 cmHitrejše povezovanje in manjši doseg kot pri Bluetoothu (varnost!)Perspektivna teh: mobilna telefonija, brezkontaktne kartice, nadzor dostopa, elektronske vstopnice, elektronski denar, osebni dokumenti

Wi­Fi (WLAN)Skupina IEEE 802 standardov za brezžič.lokalno omrežje (WLAN):802.11b do 11 Mbit/s 802.11g do 54 Mbit/s 802.11n do 600 Mbit/s (?)

Za povezovanje morajo biti naprave “WiFi enabled”Omejen dosegWi-Fi omrežij (~50 m)Problemi z varnostjo:WEP,WPA,WPA2

Wi­Fi (WLAN)Priročnost (omogoča uporabo s katerekoli lokacje pokrite s signalom)Prenosnost (uporabniki lahko dostopajo do interneta tudi izven njihovega delovnega okolja) Storilnost (ves čas povezani na internet)Postavitev (ni kablov in žic) Razširljivost (dodajanje uporabnikov ne zahteva dodatne strojne opreme)Cena (malo dražja od običajne opreme)

Varnost (signale lahko prejema vsakdo v območju pokritosti) Doseg (30m, za večje razdalje potrebujemo ponavljalnik) Zanesljivost (vplivi okolja) Hitrost (najbolj pogosto brezžično omrežje 802.11g deluje pri 54 Mbit/s,

ožičeno pri 100 Mbit/s)

WiMAXWorldWide Interoperability Microwave AccessNapredna tehnologija za brezžični prenos podatkovTemelji na standardu IEEE 802.16Zametki širokopasovnega brezžičnega (broadband wireless) povezovanja