šolsko leto 2024/25
Interaktivni sistemi – uvod (povezava)
* Predstavitev
* pojasnitev imena predmeta (SSKJ, Wikipedia)
* na hitro:
- o nastanku področja - zgodovina
- kaj področje zajema
* kdo se s področjem ukvarja, zakaj, v kakšnih kontekstih in s kakšnimi sredstvi (tehnologije)
Načrtovanje interaktivnih sistemov – združevanje različnih znanj 1. del (povezava)
* Raznolikost interaktivnih sistemov - z nekaj tipičnimi primeri * Tehnologija, ki jo vedno pogosteje srečamo - umetno življenje
Načrtovanje interaktivnih sistemov – združevanje različnih znanj 2. del (povezava)
* S čim se načrtovanje interaktivnih sistemov ukvarja:
- dizajn
. kaj je in kako poteka
- tehnologije
. katere lastnosti definirajo interaktivne tehnologije
- ljudje in njihove aktivnosti
. razlike med ljudmi in stroji/računalniki
. primerjava uporabniško-centričnega in strojno-centričnega pristopa
. kaj je in kakšen je pomen uporabniškega vmesnika
Načrtovanje interaktivnih sistemov – združevanje različnih znanj 3. del (povezava)
* Naš digitalni svet:
- trenutno stanje
- kako smo prispeli do sem - pregled razvoja po II. svetovni vojni
- dodatni vidiki:
. Moorov zakon
. kakšna je uspešna naprava za obdelavo informacij - lastnosti
. za uspeh tehnologije je potreben tudi pravi trenutek
. Komu oz. čemu v tem digitalnem svetu zaupati?
Načrtovanje interaktivnih sistemov – združevanje različnih znanj 4. del (povezava)
* Veščine in znanja načrtovalcev interaktivnih sistemov
- interdisciplinarnost - znanja iz različnih ved in področij:
. poznavanje ljudi
(sociologija, antropologija, psihologija, ergonomija...)
. poznavanje tehnologij
(strojna in programska oprema, načini komunikacije, inženirske metode, programski jeziki...)
. aktivnosti in konteksti
(poslovne skupnosti, pomen uvajanja novih tehnologij...)
. dizajn
(pristopi iz različnih področij oblikovanja in
njihova nadgradnja v uspešen razumljiv, estetski, sprejemljiv dizajn)
* Pomembnost uporabniško centričnega razmišljanja:
- Kaj pridobimo z uporabniško-centričnim razmišljanjem?
. povrnitev stroškov
. varnost
. etika
. trajnostnost
Interaktivne spletne strani 1. del (povezava)
* Kaj je DHTML - krovni izraz za zbirko tehnologij (HTML, CSS, JS, DOM)
* Kaj so dinamične spletne strani
* Mehanizem postavitve (HTML -> DOM + vizualna predstavitev)
* Drevesna struktura Objektnega modela dokumenta (DOM)
* Kako na DOM vplivamo s skriptnim jezikom (npr. JS)
* Kaj je API (vmesnik za programiranje aplikacij)
* HTML - uvod in nekaj funkcionalnosti s primeri
- oznake - začetne in končne
- kje lahko HTML urejamo - besedilni in WYSIWYG urejevalniki
- elementi imajo lastnosti (atribute) in vsebino, lahko pa so le pomenski oz. semantični
- kaj vse lahko HTML dokument vsebuje:
. skripte
. kaskadne stilske podloge
. znakovne podatke
(slog kot podatek, JS programski ukazi kot podatek ...)
. znakovne reference (zapis posebnih znakov)
- naslovi (<h1>, <h2>, ...)
- uporaba slogov za okrasitev videza dokumentov
- slogi so lahko:
. znotraj vrstice,
. znotraj HTML kode, a zbrani na enem mestu
. v zunanji datoteki
Interaktivne spletne strani 2. del (povezava)
* dodatni elementi HTML:
- povezave (<a>)
- slike (<img>)
. mapiranje slike (<map>)
- tabele (<table>)
. oblikovanje tabele (robovi, odmik, barve polj)
- seznami-neurejeni in urejeni <ul>, <ol>)
Interaktivne spletne strani 3. del (povezava)
* kaskadne stilske predloge CSS
- določanje lastnosti videza:
. glede na vrsto elementa (h1, p, ...)
. glede na ime posameznega elementa (atribut id="ime_elementa")
. glede na pripadnost elementa nekemu razredu
- kje določamo videz oz navedemo stilsko podlogo:
. z zunanjim CSS
. z notranjim CSS
. z opisom sloga v vrstici (npr. <h1 style="color:green...")
- zakaj uporabljati zunanjo CSS?
. večja preglednost, konsistentnost, lažje vzdrževanje, prihranek časa
preglednost: poenostavitev HTML dokumenta
konsistentnost: več HTML dokumentov laho uporablja isto CSS
lažje vzdrževanje: enostavnejše urejanje videza v ločeni datoteki
prihranek časa: enstavna zamenjava formata dokumenta glede na napravo
- pregled razvoja standarda CSS - sedaj že verzija CSS 3
. možno spreminjati preko 230 lastnosti videza
. novejši brskalniki podpirajo večino ali vse, starejši manj
- primeri načinov izbire elementov v CSS
- uporaba nekaterih funkcij pri definiciji CSS
- dodatne funkcionalnosti (npr. izbira glasu pri bralnikih, animacija, merske enote)
* JavaScript
- interpreterski programski jezik
. objektno programiranje
. ukazni programski jezik
. funkcijski programski jezik
- kje se uporablja in zakaj (ne le v spletnih brskalnikih, tudi skripti v
različnih programskih paketih in operacijskih sistemih, programiranje mikrokrmilnikov itd.)
- sintaksa
- kako oz. iz katerih sestavin so sestavljeni ukazi
- tipi podatkov
- različni načini izpisa rezultatov
Interaktivne spletne strani 4. del (povezava)
* programski ukazi JS teoretično:
- struktura stavkov oz programskih ukazov:
. IF, SWITCH-CASE, WHILE, DO WHILE, FOR rezloženih z diagrami poteka
- funkcije - smisel, definicija, uporaba
- izvrševanje JavaScripta ob dogodkih
- pogosto uporabljani dogodki
* praktični primeri JS skript (kar znotraj HTML):
- značka <script>...</script>, sintaksa, komentarji
- operatorji aritmetike
- podatkovni tipi - defijicija in ugotavljanje
- funkcije
- opis oz. programiranje objekta - navedba lastnosti in metode
- programiranje dogodka
- pogojni stavek IF-ELSE (v skripti)
- pogojni stavek SWITCH-CASE (v skripti)
- zanka FOR (v skripti)
- zanka WHILE (v skripti)
Interaktivne spletne strani 5. del (povezava)
* JavaScript knjižnice - olajšajo programiranje:
- omogočajo npr.:
. manipulacije z elementi HTML oz. DOM
. animacijo
. klice AJAX
* veliko različnih knjižnic (preko 80)
- za različne namene (vizualizacija, animacija, dostop do baz podatkov,
formularji, uporabniški vmesnik, matematika itd.)
- omenimo nekaj najpopularnejših, npr. jQuery, React, YUI oz. Yahoo!UserInterface...
* nekaj več o jQuery knjižnici...
- kaj omogoča
- kako jo vključimo v naš projekt
- sintaksa
. izbiranje elementov
- in nekaj primerov:
. harmonika
. samodejno dokončanje besed
. video v ozadju spletne strani
. galerija slik in videa
. animacija barve in širine elementa na strani
PACT – okvir za načrtovanje interaktivnih sistemov 1. del (povezava)
* Kot načrtovalce IS nas zanimajo:
- Ljudje, aktivnosti, konteksti in tehnologije
- sprememba tehnologije povzroči spremembo aktivnosti in
spremembe aktivnosti ustvarjajo zahteve za nove tehnologije
- nekaj primerov povezanega spreminjanja narave dejavnosti in spreminjanja tehnologije
PACT – okvir za načrtovanje interaktivnih sistemov 2. del (povezava)
* Ljudje (P act)
- fizične razlike + 5 čutil -> upoštevati pri načrtovanju IS
. Ergonomija - kaj je, zakaj je pomembna za načrtovanje IS
Antropometrija
spreminjanje vloge palca
Fittov zakon
- psihološke razlike
. kulturne in jezikovne
. razlike med posamezniki
. splošne značilnosti ljudi
. miselni (mentalni) modeli - kaj so, kakšni so
pomembni so za stopnjo razumevanja sistema
uporabnik naj si zgradi dober miselni model sistema
- socialne razlike
. uporaba IS z različno stopnjo motivacije, razlogov in ciljev
. začetniki, strokovnjaki, neopredeljeni=potencialni uporabniki
. homogene, heterogene skupine uporabnikov
PACT – okvir za načrtovanje interaktivnih sistemov 3. del (povezava)
* Aktivnosti (p A ct) - 10 vidikov:
- 4 časovni vidiki (pogostost/občasnost, časovna kritičnost, ne-pretrganost, odzivnost sistema)
- sodelovanje uporabnikov (posamično, skupinsko delo)
- kompleksnost (jasno definirana dejavnost, nejasna oz. zapletena dejavnost)
- vidiki varnosti - načrtovalec naj napake predvidi in jih prepreči/omili
- narava podatkovne vsebine (podatkovna zahtevnost, medijske zahteve)
* Konteksti (pa C t) - 3 vidiki
- kot fizično okolje
- družbeni vidik
- organizacijski vidik
* Tehnologije (pac T)
- vhodni sistemi
PACT – okvir za načrtovanje interaktivnih sistemov 4. del (povezava)
* Tehnologije (pac T)
- izhodni sistemi - temeljijo na vidu, sluhu, otipu
. tehnologije prikaza npr. QLED, OLED, MicroLED, projektorji
. zvok - pretvorba besedila v govor
. tiskalniki in ploterji
. 3D tiskalniki
. haptični izhodni sistemi - posredovanje povratne sile
- komunikacije
. žične - modem, ethernet, hitrosti
. brezžične:
Wifi: prednosti/slabosti
mobilno omrežje - prednost - deluje na večji razdalji
. internet - kako deluje
. Bluetooth, NFC (near field communication)
- informacijske vsebine
. njihov pomen:
kvalitativni pomen
tehnološki
vsebinski
funkcijski
. posredovanje:
na zahtevo/potisne
. lastnosti podatkov pogojujejo način vnosa
. način pretoka:
konstanten oz. pretočen/v paketih
* Uokvirjenje problema z analizo PACT
- primer - nedzor vstopa v laboratorij na fakulteti
∼°∼