Spletni arhiv za novomedijsko umetnost

(1)

Fakulteta za računalništvo in informatiko

Aljaž Škulj

Spletni arhiv za novomedijsko umetnost

DIPLOMSKO DELO

UNIVERZITETNI ŠTUDIJSKI PROGRAM PRVE STOPNJE

RAČUNALNIŠTVO IN INFORMATIKA

Mentor : izr. prof. dr. Narvika Bovcon

Ljubljana, 2022

(2)

sedilo, slike, grafi in druge sestavine dela kot tudi rezultati diplomskega dela lahko prosto distribuirajo, reproducirajo, uporabljajo, priobčujejo javnosti in predelu- jejo, pod pogojem, da se jasno in vidno navede avtorja in naslov tega dela in da se v primeru spremembe, preoblikovanja ali uporabe tega dela v svojem delu, lahko distribuira predelava le pod licenco, ki je enaka tej. Podrobnosti licence so dostopne na spletni strani creativecommons.si ali na Inštitutu za intelektualno lastnino, Streliška 1, 1000 Ljubljana.

Izvorna koda diplomskega dela, njeni rezultati in v ta namen razvita programska oprema je ponujena pod licenco GNU General Public License, različica 3 (ali novejša). To pomeni, da se lahko prosto distribuira in/ali predeluje pod njenimi pogoji. Podrobnosti licence so dostopne na spletni strani http://www.gnu.org/

licenses/.

Besedilo je oblikovano z urejevalnikom besedil L^ATEX.

(3)

Spletni arhiv za novomedijsko umetnost

Vrsta naloge: Diplomska naloga na univerzitetnem programu prve stopnje Računalništvo in informatika

Mentor: izr. prof. dr. Narvika Bovcon

Opis:

Dostopnost multimedijskih gradiv na spletu je pomembno vplivala na po- znavanje kulturne dediščine. Spletni arhivi omogočajo iskanje po zbirkah digitaliziranih umetnin. Kot primer takega arhiva v diplomski nalogi izde- lajte podatkovno bazo s kategorijami festivali, razstave, projekti in avtorji ter oblikujte vmesnik, ki omogoča pregledovanje vsebin po kategorijah in skozi čas. Predstavite izdelavo zalednega in čelnega dela spletnega arhiva ter možnosti nadaljnjega urejanja vsebine.

Title: Online archive for new-media art Description:

Multimedia content available online has had a significant impact on the knowledge of cultural heritage. Online archives allow users to explore di- gitized art collections. As an example of such an archive, in the diploma thesis, create a database with the categories of festivals, exhibitions, projects and authors, and design an interface that allows to view content by category and over time. Present the creation of the back and front end of the online archive and the possibilities of further editing the content.

(4)

(5)

Povzetek Abstract

1 Uvod 1

2 Teoretične osnove 3

2.1 Pregled gradiva . . . 3 2.2 Metode izdelave spletnih strani . . . 17 2.3 Programska oprema in tehnologije . . . 19

3 Izdelava spletne strani 23

3.1 Zahteve spletne strani . . . 23 3.2 Zasnova spletne strani . . . 26 3.3 Izgled in funkcionalnosti spletne strani . . . 39

4 Zaključek 53

Knjige 55

Spletne strani 57

Celotna literatura 61

(6)

(7)

kratica angleško slovensko HTML Hyper Text Markup Langu-

age

hipertekstovni označevalni jezik

CSS Cascading Style Sheets kaskadne stilske podloge MVC Model-View-Controller model-pogled-kontroler DOM Document Object Model objektni model dokumenta

V/I input/output vhod-izhod

DIRT Data Intensive Real-time Applications

podatkovno intenzivne aplikacije v realnem času

JSON JavaScript Object Notation JavaScript objektna notacija API Application Programming In-

terface

aplikacijski programski vmesnik

W3C World Wide Web Consortium konzorcij za svetovni splet ECMA European Computer Manu-

facturers Association

Evropsko združenje proizva- jalcev računalnikov

(8)

(9)

Naslov: Spletni arhiv za novomedijsko umetnost Avtor: Aljaž Škulj

Spletni dostop do multimedijskih vsebin omogoča široki populaciji ljudi, da se na enostaven način in prek različnih naprav seznani z novo-medijsko ume- tnostjo. V diplomski nalogi je predstavljena izdelava dinamične in odzivne spletne strani, ki opravlja vlogo arhiva oz. virtualne galerije. Čelni del sistema je realiziran s knjižnico React, HTML5, CSS3 in JavaScript. Zaledni del pa temelji na uporabi NodeJS okolja in na datotečnem sistemu za upra- vljanje relacijskih podatkov. V arhivu so shranjena dela iz obdobja 15-ih let, zato je implementiran interni iskalnik prilagojen specifični multimedij- ski vsebini. Z izdelano spletno stranjo je novo-medijska umetnost društva ArtNetLab dolgoročno shranjena in dostopna z uporabo sodobnih spletnih tehnologij.

Ključne besede: spletna stran, spletni arhiv, novo-medijska umetnost, mediji, oblikovanje, uporabniška izkušnja, uporabniški vmesniki.

(10)

(11)

Title: Online archive for new-media art Author: Aljaž Škulj

Online access to multimedia content allows a wide population of people to get acquainted with new media art in an easy way and through various devices.

The diploma thesis presents the creation of a dynamic and responsive website, which acts as an archive or a virtual gallery. Frontend of the system is realized with the library React, HTML5, CSS3 and JavaScript. The backend is based on the use of NodeJS environment and a file system for managing relational data. Fifteen years of work is stored in the archive, so the implemented internal search engine is adapted to specific multimedia content. With the created website, the new media art of the ArtNetLab association is stored for longevity and is accessible using modern web technologies.

Keywords: web page, web archive, new media art, media, design, user experience, user interface.

(12)

(13)

Uvod

Danes si lahko večino multimedijskih vsebin na enostaven način in prek raz- ličnih naprav ogledamo s pomočjo interneta. Spletne strani so glavni posre- dovalnik informacij na spletu. Že od nekdaj so me zanimale tehnologije in kaj vse natančno stoji v čelnem in zalednem delu spletnih sistemov. Zato smo se odločili izdelati dinamično in odzivno spletno stran, ki bo delovala kot spletni arhiv novo-medijske umetnosti. V arhivu so shranjena dela iz obdobja 15-ih let, na katerih bo velik poudarek na samem izgledu, uporabniški izkušnji in postavitvi del, ki jih hočemo posredovati obiskovalcu. V diplomski nalogi je opisan postopek izdelave spletne strani vse od sprejema zahtev do gostovanja na spletnem strežniku in tehnologije, ki so bile uporabljene za izdelavo spletnega arhiva.

1

(14)

(15)

Teoretične osnove

2.1 Pregled gradiva

Pred izdelavo našega spletnega arhiva smo si ogledali primere drugih spletnih arhivov s podobno tematiko in funkcionalnostjo. Iz zanimivih spletnih arhivov smo izluščili izstopajoče elemente in jih podrobneje analizirali. Poudarek smo podali predvsem formatu in postavitvi elementov po strani.

2.1.1 TodaysArt

“TodaysArt je kulturno produkcijska agencija, specializirana za ustvarjanje prelomnih izkušenj, ki združujejo umetnost in tehnologijo. V zadnjih 15 letih je bil TodaysArt katalizator inovacij in ustvarjalnosti ter predstavlja najboljše v sodobni avdio-vizualni in potopitveni umetnosti. Dejavnosti TodaysArt s sedežem v Haagu na Nizozemskem obsegajo letni festival, umetniški labora- torij in številne ustvarjalne projekte [28].”

Spletna stran je dostopna na spletni povezavi https://todaysart.org/

[29].

Stran odlično uporabi kontrastnost barv. S pomočjo črne in bele barve, ter barvitimi slikami se predstavi na zelo minimalističen način (Slika 2.1).

Navigacijska vrstica ima le pet glavnih zavihkov, kar omogoča enostavno navigacijo do želene vsebine. Vrstica ima belo ozadje, katera se od vsebine

3

(16)

vedno loči s kontrastno barvo. Zavihek Projekti (angl. Projects) na spletni strani nas popelje do čiste in strukturirane predstavitve elementov. Elementi oz. v tem primeru projekti so predstavljeni s premišljeno izbrano sliko in naslovom. Med sabo so ločeni z manjšim presledkom, tako da ne pride do zmede med identifikacijo projektov (Slika 2.2). Klik na željen projekt nam prikaže dodatne podrobnosti: besedilo, ki projekt bolj temeljito opiše, slike projekta in ostalih medijev povezanih s projektom (Slika 2.3).

Slika 2.1: Začetna stran spletne strani TodaysArt.

(17)

Slika 2.2: Zavihek Projekti spletne strani TodaysArt.

(18)

Slika 2.3: Podrobnosti projekta spletne strani TodaysArt.

(19)

2.1.2 Pioneer Works

“Pioneer Works gradi skupnost skozi umetnost in znanost, da ustvari odprt in navdihnjen svet. Spodbuja radikalno razmišljanje v različnih disciplinah, tako da izvajalcem zagotavlja prostor za delo, orodja za ustvarjanje in platformo za izmenjavo idej, ki so brezplačne in odprte za vse. Pioneer Works ceni radovednost, kritično mišljenje, ustvarjalnost in vključenost, ter si pri- zadeva izboljšati, kako razumeti in upoštevati drug drugega in svet [24].”

Spletna stran je dostopna na spletni povezavi https://pioneerworks.

org/[25].

Pioneer Works izstopa po minimalistični in čisti razporeditvi elementov in formatu prikazanih podatkov na spletni strani (Slika 2.4). Z različnimi velikostmi in stili pisave loči elemente med sabo in na ta način osredotoči pozornost bralca na pomembno vsebino. Zaradi črno bele predstavitve barvna slika še bolj izstopa in poživi spletno stran. Poudarili bi tudi spremembo oblike navigacijskih povezav v meniju, ki na inovativen način pokaže, na kaj je bralec premaknil miškin kazalec (Slika 2.5).

(20)

Slika 2.4: Razstave spletne strani Pioneer Works.

(21)

Slika 2.5: Meni spletne strani Pioneer Works.

(22)

2.1.3 Whitney

“Kot najpomembnejša ustanova, posvečena umetnosti Združenih držav Ame- rike, Whitney muzej ameriške umetnosti predstavlja celotno paleto ameriške umetnosti dvajsetega stoletja in sodobne ameriške umetnosti, s posebnim poudarkom na delih živih umetnikov. Whitney je posvečena zbiranju, ohra- njanju, interpretaciji in razstavljanju ameriške umetnosti, njena zbirka - ver- jetno najboljša zbirka ameriške umetnosti dvajsetega stoletja na svetu - je ključni vir muzeja. Vodilna muzejska razstava, bienale, je vodilna raziskava v državi o najnovejših dogodkih v ameriški umetnosti [34].”

Spletna stran je dostopna na spletni povezavi https://whitney.org/

[35].

Whitney zelo dobro izkorišča velikost pisave, ki na podoben način kot spletne strani Pioneer Works in TodaysArt, loči element in poudari ter usmeri bralčevo pozornost. Uporablja minimalističen pristop s črno in belo pisavo ter barvnimi slikami (Slika 2.6). Velik del ločevanja vsebine so tudi tanke črte, ki jih vidimo predvsem med naslovi, podnaslovi in besedili (Slika 2.7).

Črte služijo kot odlična, bolj direktna ločnica med deli predstavljene vsebine in omogočajo lažjo navigacijo po celotni spletni strani.

(23)

Slika 2.6: Začetna stran spletne strani Whitney.

(24)

Slika 2.7: Preseki s tankimi črtami spletne strani Whitney.

(25)

2.1.4 Ostali primeri spletnih arhivov

Poleg zgoraj opisanih spletnih strani so pri sestavi funkcionalnosti in dizajna pripomogle še naslednje strani.

Spletna stran Unit London (https://unitlondon.com/) [30] pod zavihkom razstave (angl. exhibitions) predstavi dela v obliki časovnice, na kateri so predstavljene le osnovne informacije del, kot je naslov dela, avtorji in datum, ter sliko dela. Ta način poleg pregleda vsebine del ponudi tudi občutek časa, kdaj so bila dela predstavljena (Slika 2.8).

ll’Editions (https://lleditions.se/) [16] predstavi dela na zanimiv in ne vsakdanji način. Skozi celotno spletno stran uporablja okvirje za ločitev vsebine, ki delujejo kot element urejenosti na unikaten način (Slika 2.9).

Mutek (https://montreal.mutek.org/) [19] na odličen način prikaže vsebino, tako da ohrani bralčevo pozornost in poudari pomembne stvari z velikostjo pisave. Elementi na strani so postavljeni v obliki črke ‘F’, kar je dokazano eden izmed vzorcev, kateremu bralec sledi najbolje (Slika 2.10) [6].

(26)

Slika 2.8: Časovnica spletne strani Unit London.

(27)

Slika 2.9: Ločitev vsebine z okvirji spletne strani ll’Editions.

(28)

Slika 2.10: Uporaba velikosti pisave in F vzorca na spletni strani Montreal.

(29)

2.2 Metode izdelave spletnih strani

2.2.1 Dinamične spletne strani

V svetu spletnih strani poznamo statične in dinamične spletne strani. Na splošno so statične strani mirujoče in se na spletnem brskalniku prikažejo natanko tako, kot so shranjene na strežniku. Za izdelavo statičnih spletnih strani se ni potrebno ubadati s podatkovnimi bazami in spletnim programi- ranjem, le z izgledom, za kar sta primerni tehnologiji HTML in CSS. Take strani se v glavnem osredotočijo na manjšo količino vsebine, saj pri velikem številu strani postane vzdrževanje zamudno in nepraktično [27].

Dinamične strani pa delujejo na večjih količinah podatkov, ki se glede na zastavljene pogoje ustrezno postrežejo obiskovalcu spletne strani. Taki pogoji so lahko na primer jezik vsebine spletne strani, obiskovalci, čas dneva itd. Spreminjanje pogojev sproži zaledni del sistema, ki na podlagi teh pogojev pridobi ustrezno vsebino iz podatkovne baze in spletno stran ustrezno posodobi. Dobri primeri dinamične spletne strani so spletne trgovine, ki na podlagi vpisanega podatka v iskalno polje prikažejo le relevantno vsebino.

Glavne prednosti take oblike spletne strani so povečana funkcionalnost in lažje vzdrževanje. Pridejo pa z večjo ceno gostovanja storitev, počasnejšo predstavitvijo spletne strani v primerjavi s statično in več potrebnega znanja za vzdrževanje in sam razvoj strani [27, 5].

2.2.2 Odzivne spletne strani

Pred odzivno obliko spletnih strani smo v veliki meri izdelovali in uporabljali spletne strani s fiksno resolucijo prikaza vsebine strani, saj na trgu ni bilo veliko zaslonov z različnimi dimenzijami. To se je izkazalo za težavo po pojavu mobilnih telefonov, ki so imeli možnost brskanja po spletu, saj vsebina ni bila primerno skalirana za tako majhne naprave. Zato so začeli izdelovati spletne strani izključno za mobilne telefone, kar pa je prineslo kar nekaj problemov razvijalcem teh strani, kot je vzdrževanje večih spletnih strani in sama po-

(30)

stavitev pomembnih vsebin na različne velikosti zaslonov. Koncept odzivne spletne strani je bil predstavljen kot rešitev za te probleme. Odzivnost v tem primeru pomeni, da se bo spletna stran odzvala na širino zaslona katerekoli naprave in elemente vsebine spletne strani primerno prikazala uporabniku. S pomočjo CSSa je možno na enostaven način vsebino prilagoditi uporabnikovi napravi. Od razvoja koncepta odzivnosti spletne strani se je izkazalo, da je zelo pomembna sama postavitev elementov vsebine na spletni strani, saj je na manjših zaslonih možno prikazati veliko manj vsebine na vizualno berljiv način, kot na večjih. Poleg tega je poudarek tudi na uporabniški izkušnji in razvrstitvi podatkov po pomembnosti, saj ni vsak obiskovalec pripravljen pregledati vsega, kar je na spletni strani. Zaradi teh razlogov je priporočljivo začeti z oblikovanjem spletne strani od najmanjše širine zaslona naprave, ki jo bo ta spletna stran podpirala, do največje in prikazati pomembno vsebino spletne strani na začetku [8, 23].

(31)

2.3 Programska oprema in tehnologije

2.3.1 ReactJS

ReactJS je odprtokodna JavaScript knjižnica, z glavnim namenom biti hi- tra, razširljiva in preprosta. Ustvaril jo je programski inženir Jordan Walke.

Knjižnico sedaj vzdržuje Facebook in skupnost individualnih razvijalcev in podjetij. To tehnologijo, poleg Facebooka, uporabljajo tudi druga velika podjetja, kot so Instagram, Netflix, Alibaba [26, 22].

Uporablja se za gradnjo uporabniških vmesnikov pri razvoju enostran- skih ali mobilnih aplikacij, ter omogoča ustvarjanje komponent uporabni- škega vmesnika za večkratno uporabo. ReactJS rešuje problem pogleda, oz.

po angleško view, v ogrodju MVC. Temelji na ideji, da je manipulacija z DOM draga operacija in jo je treba minimizirati. Problem reši tako, da da razvijalcu virtualni DOM za upodobitev namesto realnega DOM in nato ugo- tovi razliko med DOM-oma ter izvede najmanjše število potrebnih operacij za dosego novega stanja. ReactJS osveži stran oz. posamezno komponento takrat, ko zazna spremembo v stanju [31].

2.3.2 NodeJS

Ryan Dahl je leta 2009 razvil strežniško platformo, zgrajeno na brskalniku JavaScript Chrome (V8 Engine) poimenovano NodeJS. Njegove glavne lastnosti so asinhrono izvajanje, zelo performančno eno-nitno, vendar zelo ska- labilno izvajanje in izvajanje brez medpomnenja. NodeJS je osredotočen na preprosto gradnjo hitrih in razširljivih omrežnih aplikacij. Je idealen za podatkovno intenzivne aplikacije, ki se izvajajo v realnem času in na porazde- ljenih sistemih, saj se izvaja na podlagi dogodkov z uporabo neblokirajočega V/I modela. Poleg samega izvajalnega okolja NodeJS sestavljajo tudi bogate knjižnice različnih JavaScript modulov, ki v veliki meri poenostavljajo razvoj spletnih aplikacij [21, 20].

Kar nekaj velikih podjetij, kot so eBay, Microsoft, PayPal, Yahoo! upo-

(32)

rablja platformo NodeJS. Večina projektov in aplikacij je osredotočenih na V/I vezane aplikacije, DIRT aplikacije, JSON API aplikacije, enostranske aplikacije in tokovne aplikacije, kjer se izkaže da je NodeJS perfektna izbira tehnologije [21].

2.3.3 HTML5

HTML ali Hypertext Markup Language je koda, ki se uporablja za struk- turiranje spletne strani in njene vsebine. Ustvaril ga Tim Berners-Lee leta 1991 s prvo javno različico HTML1, objavljeno 1993. Različice se stopnjujejo po ena in danes uporabljamo najnovejšo različico HTML5, predstavljeno leta 2014 [11].

HTML je kombinacija hiperteksta in označevalnega jezika. Hipertekst definira povezavo med spletnimi stranmi, označevalni jezik pa opiše, kako naj se vsebina dokumenta predstavi oziroma upodobi. V samem dokumentu se uporabljajo značke, ki objemajo neko vsebino (npr. <p>Neka vsebina</p>) in jo na ta način označijo tako, da jo naprava razume in ustrezno prikaže.

Struktura dokumenta HTML je sestavljena iz glave in telesa, ki sta zajeta v dokumentnem tipu HTML (med značkama <html> in </html>). V glavi (med značkama <head> in </head>) so elementi, ki opisujejo dokument in niso vidni v čelnem delu. V telesu dokumenta (med značkama <body> in

</body>) so pa značke, ki manipulirajo s prikazom vsebine, ki je vidna v čelnem delu. Glavne prednosti HTMLja so podpora na vseh brskalnikih ter integracija s CSSom in JavaScriptom. Ima pa tudi slabosti, kot so slaba varnost in statičen prikaz spletnih strani [11, 10].

(33)

2.3.4 CSS3

CSS ali Cascading Style Sheets je jezik, ki se uporablja za opis in oblikovanje elementov dokumentov. Ustvaril ga je konzorcij World Wide Web (W3C) leta 1996, ki ga še danes vzdržuje. Od leta 2016 uporabljamo najnovejšo različico CSS 2.1. Uporablja se v kombinaciji z označevalnimi jeziki, med katerimi je najbolj pogost HTML [1].

Z uporabo CSSa prihranimo veliko časa, saj se napisan slog elementa lahko ponovno uporabi in posledično dobimo manj napisane kode, kar omo- goča hitrejše nalaganje strani z dokumentom. Zelo pomembna je tudi zdru- žljivost z večino naprav, saj ni potrebno pisati različnih slogov za vsako posamezno napravo. Glavna in najpomembnejša lastnost pisanja CSSa pa je izboljšanje samega izgleda dokumenta in, če gre za spletno stran, uporabniške izkušnje [33, 1].

2.3.5 JavaScript

JavaScript je lahek visokoravenski skriptni programski jezik, ki je zasnovan za ustvarjanje omrežno usmerjenih aplikacij. Jezik, uradno poimenovan ECMA- Script, je izumil Brendan Eich leta 1995, ki je dve leti pozneje postal ECMA standard. Splošno jedro jezika so vgradili v popularne spletne brskalnike, kot so Netscape, Internet Explorer, kasneje tudi Google Chrome, Firefox in druge [14, 15].

JavaScript spada med najpogostejše spletne tehnologije, s pomočjo katere lahko ustvarimo čelni in zaledni del spletnih strani. Uporablja se na strani odjemalca kot tudi na strani strežnika. Na strani odjemalca lahko z uporabo popularnih knjižnic, kot so ReactJS, AngularJS, VueJS in drugih, ustvarimo dinamične in odzivne spletne strani. Na strani strežnika pa je najpopular- nejša strežniška platforma nodeJS, ki omogočajo komunikacijo z bazo podatkov in zagotavljajo neprekinjenost informacij klicev. Poleg razvoja spletnih in strežniških aplikacij, se JavaScript uporablja tudi pri ustvarjanju iger, umetnosti in strojnem učenju [15, 13].

(34)

2.3.6 Docker

Docker je odprto-kodna programska platforma za hitro izdelavo, testiranje in uvajanje aplikacij. Razvijalcem omogoča enostavno pakiranje aplikacij v vsebnike z vsemi potrebnimi knjižnicami operacijskega sistema, sistemskimi orodji, kodo, ter odvisnostmi, ki so potrebne za izvajanje te kode. Z uporabo Dockerja lahko aplikacije hitro namestimo in prilagodimo v kakršno koli okolje z garancijo, da se bo zapakirana koda izvajala [2, 3].

Vsebnike je možno uporabljati zaradi zmožnosti izolacije procesov in vir- tualizacije na operacijskem sistemu Linux. Podobno kot navidezni računalnik virtualizira strežniško strojno opremo, vsebniki virtualizirajo operacijski sistem strežnika. Omogočajo vse prednosti in funkcionalnosti navideznih raču- nalnikov brez dodatne obremenitve operacijskega sistema in hipernadzornika [2, 3].

(35)

Izdelava spletne strani

3.1 Zahteve spletne strani

Arhiv je bil izdelan na začetku 21. stoletja in vsebuje 15 let elementov, katere smo razdelili na projekte, razstave in festivale (Slika 3.1). Te posamezne elemente smo nato razdelili na skupne lastnosti, kot so naslov, avtorji, opis itd.. Na podlagi razdelanih podatkov, pregledanih spletnih strani arhivov in glavnih zahtev, smo zasnovali glavne funkcionalnosti in izgled naše spletne strani. Izdelali smo tudi zaslonske maske (Slika 3.2), s pomočjo orodja za oblikovanje vmesnikov Figma, ki so bile v pomoč pri vizualizaciji projekta [7].

Glavne zahteve, ki so vplivale na arhitekturo projekta:

• Enostavno dodajanje podatkov v podatkovno bazo.

• Enostavno urejanje podatkov v podatkovni bazi.

• Enostavno gostovanje spletnega arhiva.

• Avtentikacija do dodatne vsebine (mediji).

• Hitro iskanje po arhivu s pomočjo filtracije.

• Samoumevna navigacija po arhivu.

23

(36)

• Povezanost in navigacija med elementi.

• Odzivnost in dinamičnost spletne strani.

Slika 3.1: Povezave med elementi arhiva.

(37)

Slika 3.2: Izdelava prototipa v orodju Figma.

(38)

3.2 Zasnova spletne strani

Do tu smo si ogledali spletne strani, ki so nam pomagale pri zasnovi specifi- kacij spletnega arhiva. Opisali smo tehnologije, ki so nam omogočile izpolniti zahteve funkcionalnosti in izgleda. Pri zasnovi smo se osredotočili predvsem na uporabniško izkušnjo obiskovalca strani, urednika podatkov in gostitelja spletnega arhiva. Poleg tega smo ciljali tudi na razširljivost in ponovno uporabo komponent rešitve. Med samim izvajanjem smo posamezne dele aplikacije večkrat spremenili, zato je spodaj navedena le končna rešitev spletnega arhiva.

3.2.1 Struktura projekta

Veliko časa smo posvetili sami strukturi projekta, ki obkljuka vse naše spe- cificirane zahteve spletnega arhiva. Aplikacijo smo razdelili na tri dele, na podatkovno bazo, zaledni del in čelni del (Slika 3.3).

Čelni del poskrbi za odlično uporabniško izkušnjo in razumljivo predstavitev arhiva. Zaledni del je zaposlen za samo gostovanje aplikacije in pri iskanju ter dostavi podatkov čelnemu delu za prikaz. Podatkovna baza pa hrani vsebino arhiva in informacije, s katerimi lahko urejevalec arhiva kon- trolira prikaz podatkov.

Za projekt smo se odločili zapakirati čelni in zaledni del v eno enoto in se izogniti mikro-storitveni arhitekturi. Razlog za to odločitev je lažje gostovanje, lažje vzdrževanje omrežja in manj varnostnih težav. Eden glavnih problemov monolitne arhitekture, kot je naša, pa je, če pride do spremembe kode čelnega ali zalednega dela, to zahteva ponovno grajenje in gostovanje celotne aplikacije.

V datotečni strukturi je ’spletni-arhiv-novomedijske-umetnosti’ korenska mapa projekta. Mapa ’back’ predstavlja zaledni del, ’front’ pa čelni del sistema. Podatkovna baza ’config’ v projektu dejansko ne obstaja, je pa dodana navidezno pri gostovanju aplikacije.

(39)

Datotečna struktura projekta:

spletni-arhiv-novomedijske-umetnosti back

src

package.json front

public src

package.json config

assets resources Dockerfile package.json

Podatkovna baza gostuje podatke v obliki datotek, ki se kot disk pred gostovanjem pripnejo na aplikacijo. To omogoča, da baza deluje na bolj dinamičen način, saj omogoča spreminjanje in dodajanje podatkov na zelo enostaven način brez ponovnega gostovanja ali ponovnega pripenjanja.

(40)

Slika 3.3: Skica strukture spletnega arhiva in vstopnih/izstopnih točk.

(41)

3.2.2 Struktura podatkovne baze

Pri gradnji podatkovne baze smo se osredotočili na enostavnost uporabe s strani urednika in gostitelja. Glavne naloge urednika so dodajanje in urejanje podatkov v podatkovni bazi. Gostitelju smo pa poenostavili gostovanje aplikacije in povezavo s podatkovno bazo.

Odločili smo se za datotečno strukturo podatkovne baze, saj ta obkljuka vse glavne zahteve, kar se tiče gostovanja podatkov. Za urejanje in dodajanje podatkov se lahko uporablja poljuben operacijski sistem in poljuben program za urejanje tekstovnih datotek. Podatkovno bazo h gostovani aplikaciji pri- klopimo, kar s pomočjo predpomnenja podatkov v aplikaciji omogoča delo s podatki brez zaustavitve ali prekinitve delovanja sistema.

Datoteke v podatkovni bazi so v strukturi YML. To je človeku berljiv jezik za serializacijo podatkov [36]. V naši aplikaciji se uporablja pri opisu delovanja aplikacije in shranjevanju podatkov, kot so projekti, festivali, razstave in avtorji. V bazi lahko hranimo tudi slike, videe in druge medije. Za prikaz teh medijev pa je zaenkrat podprt le format slike.

Kot večina podatkovnih baz ima tudi naša določeno strukturo. Glavna ali korenska mapa se imenuje ’config’. Razdeljena je na dve podmapi, ’assets’, kjer se shranjuje medije, in ’resources’, kjer se shranjuje informacije o prikazu elementov in medijev.

(42)

Vse mape in datoteke v naši strukturi podatkovne baze, ki so označene z zvezdico (’*’), morajo imeti enako ime, kot je navedeno spodaj:

config*

assets*

images summary

summary_images.jpg ...

main_images.jpg ...

resources*

authors*

...

exhibitions*

sl*

...

en*

...

festivals*

sl*

...

en*

...

projects*

sl*

...

en*

...

auth.yml*

config.yml*

mainpage.yml*

(43)

Mapa ’assets’ se uporablja za shranjevanje medijev projektov, razstav in festivalov. Struktura map in datotek v tej mapi je proste oblike, kar pomeni, da jo je mogoče strukturirati po želji. Spodaj sta navedena dva primera, kako je lahko vsebina navedena.

assets*

images summary

main_images.jpg ...

assets*

images 2002

summary

2002_images.jpg ...

2003

summary

2002_images.jpg ...

2004 ...

Mediji se v tej mapi uporabijo pri krajši predstavitvi oz. povzetku elementa in pri bolj podrobnem opisu elementa. Eden glavnih medijev so slike.

Pri povzetku elementa se ena izmed slik uporabi kot predogledna sličica (angl.

(44)

thumbnail). Te sličice so lahko poljubne velikosti, vendar se zaradi lepšega izgleda uporabijo slike v razmerju 1, 2 : 5, 6, 7 višina : širina (Slike 3.4). Pri daljšem in bolj podrobnem opisu elementa se lahko uporabi več slik poljubnih velikosti.

Slika 3.4: Primer velikosti slike z razmerjem višine in širine 1 : 5.

Mapa ’resources’ vsebuje tri YML datoteke, ’auth.yml’, ’mainpage.yml’ in

’config.yml’, ki vsebujejo informacije, kako naj se aplikacija vede. Poleg tega vsebuje še štiri podmape, ki služijo kot zbirke avtorjev, projektov, festivalov in razstav.

Datoteka ’auth.yml’ vsebuje samo en ključ poimenovan users (slo. upo- rabniki). Vrednost v tem ključu je lista nizov. Vsak element liste predstavlja elektronski naslov uporabnika, ki se lahko prijavi v aplikacijo. Ta lista mora biti enaka listi, ki je registrirana na firebase projektu. Na tak način nezaže- lenim uporabnikom ne dovolimo registracije in vpisa do dodatne vsebine.

users:

- "my.email@gmail.com"

- "someone.else@email.com"

Datoteka ’mainpage.yml’ vsebuje dva ključa poimenovana sl in en. Vre- dnost ključa sl je niz, napisan v slovenskem jeziku, en pa niz, napisan v angleščini. Eno ali drugo se prikaže na glavni strani spletnega arhiva odvisno od nastavitve jezika. Besedilo je lahko oblikovano z Markdown sintakso.

(45)

sl:

- |

# Prva stran

To je *text*, ki se bo prikazan na **glavni strani**.

en:

- |

# First page

This is *text* which will be shown on **main page**.

Datoteka ’config.yml’ vsebuje samo en ključ poimenovanyears. Vrednost v tem ključu je lista celih števil, ki predstavljajo leta, katera se prikažejo na spletni strani. Na primer, če datoteka vsebuje samo leta 2007, 2008 in 2012, bo prikazana le vsebina znotraj teh let.

years:

- 2007 - 2008 - 2012

V mapi ’resources’ so štiri podmape ’authors’, ’exhibitions’, ’festivals’ in

’projects’. Vse te mape razen ’authors’ vsebujejo podmape ’sl’ in ’en’.

Mapa ’authors’ vsebuje ’.yml’ datoteke avtorjev, ki so prikazane na spletnem mestu pod zavihkom ’Avtorji’ (angl. Authors). Vsaka datoteka ima samo en ključ poimenovan ’fullname’, z vrednostnim tipom niz. Vrednost sledi vrstnem redu ’<priimek> <ime>’avtorja.

fullname: Škulj Aljaž

Mapa ’exhibitions’ vsebuje ’.yml’ datoteke razstav, ki so prikazane na spletni strani pod zavihkom ’Razstave’ (angl. Exhibitions). Mapa ’festivals’

(46)

vsebuje ’.yml’ datoteke festivalov, ki so prikazane na spletni strani pod zavihkom ’Festivali’ (angl. Festivals). Mapa ’projects’ pa vsebuje ’.yml’ datoteke projektov, ki so prikazane na spletni strani pod zavihkom ’Projekti’ (angl.

Projects). Vse datoteke v omenjenih mapah imajo angleško in slovensko vsebino. Datoteke v angleščini so postavljene v podmapo ’en’, slovenske pa v

’sl’ mapo. Taka razdelitev omogoča enostavno menjavo vsebine po jezikovni nastavitvi na spletni strani.

Datoteke, ki opisujejo festivale in razstave, si delijo enake kjuče. Primer datoteke za razstavo:

title: "Exhibition of examples"

year: 2015

date: "15.06 - 16.07.2015"

place: "Ljubljana, Slovenia"

description:

- |

One of the best example descriptions for this festival.

image: "assets/images/summary/exhibition-of-examples.png"

authors:

- "Surname1 Name1"

- "Surname2 Name2"

- "Surname3 Name3"

projects:

- "2015-example1"

- "2015-example2"

- "2015-example3"

- "2015-example4"

- "2015-example5"

content:

- |

The actual description of the exhibition with images, links and markdown styled text.

(47)

- type: image

src: "assets/images/exhibition-of-examples.png"

description: "Optional description"

- |

Text between the images.

- type: image

src: "assets/images/exhibition-of-examples.png"

Primer datoteke projekta pa izgleda tako:

title: "Project title"

description:

- |

Short summary of this project

image: "assets/images/summary/project1.jpg"

year: 2015 authors:

- "Surname1 Name1"

- "Surname2 Name2"

content:

- |

The actual description of this project with images, links and markdown styled text.

- type: image

src: "assets/images/project1.jpg"

- |

Text between the images.

- type: image

src: "assets/images/project1.jpg"

(48)

V naslednji tabeli (3.2.2) so opisani ključi, ki so uporabljeni v ’.yml’

datotekah.

Tabela 3.1: Tabela ključev uporabljenih v mapi ’resources’.

Ključ Tip

vrednosti Opis

title niz Naslov elementa

year celo število Leto, v katerem je bil element predstavljen date niz Datum, kdaj bil element predstavljen place niz Kraj, kjer je bil element predstavljen description niz Kratek opis elementa

image niz Pot do slike v mapi ’assets’, katera bo predstavljena s krajšim opisom

authors niz[ ] Priimek in ime avtorjev, ki so predstavili element

projects niz[ ] Projekti, ki so povezani z elementom (imena datotek v mapi ’projects’)

content niz[ ] objekt[ ]

Nizi predstavljajo besedilo, ki opisuje razstavo.

Objekt ‘{type, src, description}‘ vstavi medijsko vsebino med besedilom.

Ključ ’content’ vsebuje listo nizov in objektov. Nizi predstavljajo besedilo, ki opisuje element in ga je mogoče oblikovati s sintakso Markdown.

Objekti ‘type, src, description‘ vstavijo medijsko vsebino med besedilo. Ključ

’type’ pove, katero medijsko vsebino je treba vstaviti (zaenkrat je podprta edina vrsta ’image’), ‘src‘ je pot do te vsebine v mapi sredstev ’assets’ in

’description’ je neobvezno besedilo, ki je prikazano pod sliko.

(49)

3.2.3 Varnost spletne strani

Avtentikacija

Spletni arhiv ponuja tekstovno in medijsko vsebino, kot so npr. slike. Ker nismo hoteli, da je medijska vsebina dosegljiva vsem, smo uporabili avtentika- cijo za dostop do te medijske vsebine. Za avtentikacijsko funkcionalnost smo uporabili Google Firebase (https://firebase.google.com/)[9], ker omo- goča odlično varnost prijavnih podatkov in upošteva najsodobnejše varno- stne protokole. Naša aplikacija preprečuje registracijo obiskovalcem, dovoli pa prijavo le tistim, ki so na beli listi. V avtentikacijskem delu Firebase-a smo sestavili to listo uporabnikov, ki imajo dostop do dodatne vsebine. Tako od- ločitev smo sprejeli, ker ne pričakujemo veliko uporabnikov s privilegiranim dostopom.

Vrivanje kode

Vrivanje kode je izraz, ki se uporablja za opis napadov, ki vrinejo kodo v aplikacijo. Ta vrinjena koda lahko spremeni izvajanje aplikacije. Ta vrsta napada izkorišča slabo ravnanje z nezaupljivimi podatki [32]. Temu smo se v naši aplikaciji izognili s sanitizacijo vhodnih podatkov. Ena izmed funkcionalnosti je iskanje in filtriranje določene vsebine. Te podatke pred procesira- njem pregledamo in če so varni sprocesiramo. Podobno naredimo pri prikazu vsebine na strani, saj je vsebina napisana s sintakso Markdown, ki se nato transformira v stilizirano HTML kodo. S pomočjo knjižnice za sanitizacijo HTML kodo prečistiomo in nato prikažemo na strani.

Podatkovna baza

Naša aplikacija in podatkovno baza si delita strežnik in aplikacija ima nepo- sreden dostop do podatkovne baze. S tem smo zavarovali dostop do vsebine na stopnji gostiteljevega strežnika. Vsebina baze je dostopna obiskovalcem, ki preko aplikacije kličejo prikaz vsebine na spletnem arhivu, in administra- torjem strežnika. Poleg tega je podatkovna baza strukturirana na podlagi

(50)

datotečnega sistema in onemogoča dostop do drugih bolj občutljivih datotek izven korenske mape podatkovne baze.

3.2.4 Grajenje in gostovanje spletne strani

Za gradnjo in gostovanje aplikacije smo se odločili za programsko platformo Docker. Pred gostovanjem smo morali zgraditi tako imenovano ’sliko’ (angl.

image). Za to smo potrebovali datoteko Dockerfile, ki vsebuje navodila za izdelavo slike [4].

Dockerfile za izgradnjo slike naše aplikacije:

FROM node:lts-alpine

RUN mkdir -p /app WORKDIR /app

COPY . .

RUN npm run build

EXPOSE 8080 CMD npm start

Ukaz ’FROM node:lts-alpine’ pove dockerju, da želimo graditi iz že prej zgrajene osnove node:lts-alpine. Nato zažene ukaz ’RUN mkdir -p /app’, ki v prej zgrajeni osnovi zažene ukaz mkdir -p /app, s katerim ustvari novo mapo poimenovano ’app’. Z ’WORKDIR /app’ postavimo novo ustvarjeno mapo ’/app’ kot korensko mapo. Ukaz ’COPY . .’ kopira vse datoteke iz projekta, (razen elemente, ki so označeni v ’.dockerignore’ datoteki) kjer se nahaja Dockerfile, v korensko mapo ’/app’. Nato se zažene ukaz RUN npm

(51)

run build, ki zažene skripto, imenovano ’build’, opisano v prekopirani datoteki ’package.json’. Z ukazom EXPOSE 8080 pa izpostavimo vrata (angl.

port) 8080 za vsebnik. Ukaz ’CMD npm start’ je ukaz, ki zažene ’npm start’

pri zagonu oz. gostovanju vsebnika. Za gradnjo smo uporabili spodnji ukaz.

S tem ukazom smo zagnali gradnjo slike z navodili Dockerfile-a in ji dali ime, s pomočjo značke ’-t’.

docker build -t <repozitorij>/<ime>:<verzija> . Po gradnji smo zagnali sliko z naslednjim ukazom:

docker run -d --name <ime-vsebnika> -p 8080:8080 -v

<lokacija-pb>:/app/config/ <repozitorij>/<ime>:<verzija>

Z značko ’–name’ smo poimenovali vsebnik, v katerem se nahaja naša aplikacija. Značka ’-p’ je izpostavila vrata (angl. port). Zelo pomembna je značka

’-v’, s katero smo povezali našo podatkovno bazo z aplikacijo. Najprej smo podali pot do podatkovne baze na strežniku gostitelja in nato, po dvopičju, pa lokacijo, kje se bo podatkovna baza nahajala znotraj vsebnika.

3.3 Izgled in funkcionalnosti spletne strani

Pri predstavitvi spletnega arhiva nam je bilo zelo pomembno predstaviti stran na minimalističen in uporabniku prijazen način. Minimalizem je umetniški stil, ki sledi citatu "do more with less"(slo. naredi več z manj). Glavna načela minimalizma v spletnem oblikovanj so prijazen uporabniški vmesnik, skrita navigacija, največ tri barve hkrati, veliko praznega prostora, omejeno eksperimentiranje s pisavami, brez presežnih podrobnosti in brez dodatnih gumbov [18].

Ideje o izgledu smo dobili predvsem iz pregleda drugih spletnih arhivov, ki so se nam zdeli zanimivi, in s pomočjo smernic sistemov oblikovanja ‘Material design’, ter ‘Apple design’ [17, 12]. Za boljšo uporabniško izkušnjo smo pri izdelavi spletnega arhiva upoštevali tudi metode odzivnosti in dinamičnosti.

(52)

3.3.1 Navigacijska vrstica

Ena izmed najpomembnejših komponent vsake spletne strani je navigacijska vrstica. Na naši spletni strani je postavljena na vrhu strani in je kontrastno ločena od prikazane vsebine. Navigacijska vrstica se prilagaja velikosti naprave oz. širini okna brskalnika, na kateri je vidna spletna stran.

Na večjih napravah, kot so npr. namizni računalniki, prenosni računal- niki ali pa večje tablice, je pregled na navigacijski vrstici bolj odprt (Slika 3.5). Na levi strani navigacijske vrstice imamo pet glavnih zavihkov, ki nas preusmerijo na vsebino povezano z naslovom zavihka. Malo manj očiten, a prepoznaven, je prvi zavihek, ki ima namesto naslova logotip ArtNetLab-a in nas popelje na začetno stran. Na desni strani pa imamo gumb za izbiro jezika med slovenskim in angleškim jezikom, ki primerno spremeni vsebino na spletni strani. Nato pa sledi še ikona ključavnice, ki odpre modalno okno za prijavo na spletno stran (Slika 3.6).

Navigacijska vrstica deluje na manjših napravah enako kot pri večjih, le prikaz zavihkov je predstavljen v obliki spustnega menija (Slika 3.7 in 3.8).

Za bolje uporabljen prostor je bila izbira jezika prestavljena v spustni meni, pod ključavnico.

Pri oblikovanju navigacijske vrstice smo posvetili veliko pozornosti upo- rabniški izkušnji. Predvsem smo pazili na samoumevnost uporabe in mini- malističen izgled. Pri kliku na posamezen zavihek, izbiro jezika ali ključav- nico smo dodali povratno informacijo uporabniku za lažje navigiranje. Pri zavihkih na večjih zaslonih spremenimo velikost naslova zavihka in s tem pou- darimo, kateri je trenutno aktiven. Na manjših zaslonih se po kliku na željen zavihek spremeni aktivni naslov na meniju. Za izbiro jezika smo aktiven jezik poudarili s pomanjšanjem neaktivnega jezika in povečanjem aktivnega. Po kliku za spremembo jezika se velikosti zamenjata. Klik na ključavnico pa preusmeri pozornost na modalno okno za prijavo v sistem.

(53)

Slika 3.5: Navigacijska vrstica na širših zaslonih.

Slika 3.6: Modalno okno za prijavo na spletno stran.

(54)

Slika 3.7: Navigacijska vrstica na ožjih zaslonih.

(55)

Slika 3.8: Odprt meni na navigacijski vrstici na ožjih zaslonih.

(56)

3.3.2 Časovnica

Glaven cilj je bil predstaviti petnajst let arhiva društva ArtNetLab na enostaven in berljiv način. Zaradi velike količine del smo se odločili razdeliti arhiv na tri glavne dele, na festivale, razstave in projekte. Te smo predstavili po letih v obliki časovnice. To omogoča obiskovalcu enostavnejše iskanje del in doda občutek časa, kako je nastajal ta arhiv. Pri oblikovanju časovnice je bila posvečena pozornost predvsem enostavnosti in uporabnosti arhiva (Slika 3.9).

Časovnico lahko razdelimo na dva glavna dela, na predstavitev leta in na predstavitev del posameznega leta. Na časovnici so vidna le leta, ki vsebujejo dela. Vsako leto deluje kot spustni meni (Slika 3.10). Klik na meni sproži klice do podatkovne baze, kjer poiščemo primerna dela, ki ustrezajo iskalnim kriterijem. Dela poiščemo na podlagi naslova zavihka in leta odprtega s spustnim menijem. Ta način je deloval kot paginacija za nalaganje del, saj podatkov za posamezno leto ni veliko. Ker se pa del lahko nabere in iskanje dela lahko poteka dlje časa, smo implementirali filtracijo po letu in ali po naslovu dela (Slika 3.11). Pri filtraciji po naslovu dela ni potrebno napisati celotnega naslova, saj sistem poišče vsa dela, ki se delno ujemajo z napisanim v filtru. Filtracija po letu pa najde le dela, ki spadajo pod filtrirano leto.

Posamezno delo je pod letom sestavljeno iz pomembnih informacij, kot so naslov in avtorji ter povzetek dela. Če ima delo povezave na druge projekte, se te povezave vidi na dodatnem spustnem meniju, na dnu elementa. Če ima element dodano sliko, jo lahko le prijavljen obiskovalec vidi nad naslovom dela. Podrobnejše informacije o delu dobimo s klikom na sliko ali naslov. Ta nas popelje na novo stran s podrobnejšim opisom dela. Klik na posameznega avtorja pa prikaže stran z vsemi deli, pri katerih je sodeloval izbrani avtor.

(57)

Slika 3.9: Časovnica razstav arhiva ArtNetLab.

(58)

Slika 3.10: Element časovnice.

(59)

Slika 3.11: Filtracija vseh festivalov po naslovu.

(60)

3.3.3 Prikaz podrobnosti elementa

Stran podrobnosti elementa je sestavljena iz dveh delov, iz podrobnejšega opisa elementa in krajših opisov pod-elementov, ki imajo neposredno povezavo z glavnim elementom (npr. element festival, ki ima kot pod-elemente projekte pove, da so bili ti projekti del festivala).

Na strani se vidi naslov izbranega elementa (Slika 3.12), ki služi tudi kot gumb za nazaj na časovnico tipa elementa (festival, razstava ali projekt).

Pod naslovom sledita datum elementa in kraj, kje je bil element predstavljen.

Nato so vidni vsi avtorji in sodelujoči. Njihova imena delujejo kot povezava na del spletne strani, kjer se prikažejo vsi elementi, pri katerih je avtor sodeloval oz. delal. Pod avtorji pa vidimo podrobnejši opis elementa. Sestavljen je iz kombinacije besedila in medijev. Besedilo je napisano v Markdown sin- taksi, ta se prevede v HTML, ki se očisti škodljive kode, ter nato prikaže na strani. Vso vsebino si je možno ogledati v angleškem ali slovenskem jeziku, odvisno od jezikovne nastavitve na navigacijski vrstici. Med besedilom so postavljene slike, ki dodatno opisujejo element. Te slike so vidne, le če je uporabnik prijavljen, drugače je pa viden prostornik (angl. placeholder) za sliko.

Na dnu strani se nahajajo pod-elementi (Slika 3.13), ki prikazujejo povezavo z glavnim elementom. Ti pod-elementi so treh vrst, festivali, razstave in projekti. Teh pod-elementov je lahko poljubno veliko. Vsak ima naslov, avtorje in krajši opis. Če ima pod-element sliko, se tudi ta prikaže na dnu kot predogledna sličica. Klik na naslov ali sliko nas popelje na podrobnosti pod-elementa, klik na na avtorja, pa kot pri glavnem elementu na stran avtorja in vseh njegovih del (Slika 3.14).

(61)

Slika 3.12: Podrobnosti festivala 8. Mednarodni festival Računalniških umetnosti, Maribor.

(62)

Slika 3.13: Pod-elementi festivala 8. Mednarodni festival Računalniških umetnosti, Maribor.

(63)

Slika 3.14: Zbirka vseh elementov, pri katerih je delal avtor.

(64)

(65)

Zaključek

V diplomski nalogi smo izdelali spletno stran za prikaz arhiva društva ArtNe- tLab. Spletna stran ponuja obiskovalcem pregled festivalov, razstav in projektov novo-medijske umetnosti skozi 15 letno obdobje. Omogoča enostavno iskanje del v slovenščini in angleščini. Poleg tega prikažemo vse podatke o delu in povezave z njim na eni strani, kar omogoča hitrejše in bolj učinkovito brskanje po arhivu. Pri izdelavi smo se predvsem osredotočili na enostavnost uporabe s strani dodajanja in urejanja podatkov, ter gostovanja aplikacije.

Zelo pomembna je bila tudi uporabniška izkušnja, s samoumevno navigacijo po strani, minimalističnim izgledom, ter z dinamičnim in odzivnim dizajnom strani. Delo na projektu nam je dalo boljši vpogled v načrtovanje in izdelavo spletnih aplikacij iz zalednega in čelnega dela.

53

(66)

(67)

[8] Ben Frain. Responsive web design with HTML5 and CSS3. Packt Pu- blishing Ltd, 2012.

[23] Clarissa Peterson. Learning responsive web design: a beginner’s guide.

"O’Reilly Media, Inc.", 2014.

[31] AM Vipul in Prathamesh Sonpatki.ReactJS by Example-Building Mo- dern Web Applications with React. Packt Publishing Ltd, 2016.

55

(68)

(69)

[1] CSS. url: https : / / en . wikipedia . org / wiki / CSS (pridobljeno 23. 6. 2022).

[2] Docker.url:https://aws.amazon.com/docker/(pridobljeno 24. 11. 2021).

[3] Docker. url: https://www.ibm.com/in- en/cloud/learn/docker (pridobljeno 24. 11. 2021).

[4] Docker. url: https : / / docs . docker . com / engine / reference / builder/(pridobljeno 24. 11. 2021).

[5] Dynamic web page.url:https://en.wikipedia.org/wiki/Dynamic_

web_page(pridobljeno 24. 6. 2021).

[6] F-pattern. url: https://creativehandles.com/blog-posts/79/4- types-of-eye-tracking-patterns-how-people-don-t-read-on- web(pridobljeno 24. 11. 2021).

[7] Figma. url: https://www.figma.com/(pridobljeno 24. 11. 2021).

[9] Google Firebase. url: https://firebase.google.com/ (pridobljeno 24. 11. 2021).

[10] HTML. url: https://en.wikipedia.org/wiki/HTML (pridobljeno 22. 6. 2022).

[11] HTML Introduction. url: https://www.geeksforgeeks.org/html- introduction/(pridobljeno 22. 6. 2022).

[12] Human Interface Guidelines. url: https://developer.apple.com/

design/(pridobljeno 24. 11. 2021).

57

(70)

[13] Introduction to JavaScript. url: https://www.geeksforgeeks.org/

introduction-to-javascript/(pridobljeno 23. 6. 2022).

[14] JavaScript. url: https : / / en . wikipedia . org / wiki / JavaScript (pridobljeno 23. 6. 2022).

[15] JavaScript - Overview. url: https : / / www . tutorialspoint . com / javascript/javascript_overview.htm(pridobljeno 23. 6. 2022).

[16] ll’Editions. url:https://lleditions.se/ (pridobljeno 24. 11. 2021).

[17] Material Design.url:https://material.io/(pridobljeno 24. 11. 2021).

[18] Minimalism. url: https://medium.muz.li/best- practices- for- minimalist-website-design-9e8ea07e17c2(pridobljeno 24. 11. 2021).

[19] Mutek.url:https://montreal.mutek.org/(pridobljeno 24. 11. 2021).

[20] Node.js. url: https : / / en . wikipedia . org / wiki / Node . js (pridobljeno 22. 6. 2022).

[21] Node.js - Introduction. url: https : / / www . tutorialspoint . com / nodejs/nodejs_introduction.htm(pridobljeno 22. 6. 2022).

[22] Nitin Pandit. Slovar, Razpoznavanje vzorcev. url: https://www.c- sharpcorner . com / article / what - and - why - reactjs/ (pridobljeno 22. 6. 2022).

[24] Pioneer Works. url: https : / / pioneerworks . org / about/ (pridobljeno 24. 11. 2021).

[25] Pioneer Works.url:https://pioneerworks.org/(pridobljeno 24. 11. 2021).

[26] React (JavaScript library). url: https://en.wikipedia.org/wiki/

React_(JavaScript_library)#Basic_usage(pridobljeno 22. 6. 2022).

[27] The Difference Between Dynamic and Static Websites. url: https : //www.hughesandco.ca/blog/the-difference-between-dynamic- and-static-websites(pridobljeno 24. 6. 2021).

[28] TodaysArt.url:https://todaysart.org/about/(pridobljeno 24. 11. 2021).

[29] TodaysArt. url:https://todaysart.org/ (pridobljeno 24. 11. 2021).

(71)

[30] Unit London.url:https://unitlondon.com/(pridobljeno 24. 11. 2021).

[32] Vrivanje kode.url:https://www.contrastsecurity.com/knowledge- hub/glossary/code-injection(pridobljeno 24. 11. 2021).

[33] What is CSS? url: https://www.tutorialspoint.com/css/what_

is_css.htm (pridobljeno 23. 6. 2022).

[34] Whitney.url:https://whitney.org/about(pridobljeno 24. 11. 2021).

[35] Whitney.url: https://whitney.org/(pridobljeno 24. 11. 2021).

[36] YAML. url: https://yaml.org/ (pridobljeno 24. 11. 2021).

(72)

(73)

[1] CSS. url: https : / / en . wikipedia . org / wiki / CSS (pridobljeno 23. 6. 2022).

[2] Docker.url:https://aws.amazon.com/docker/(pridobljeno 24. 11. 2021).

[3] Docker. url: https://www.ibm.com/in- en/cloud/learn/docker (pridobljeno 24. 11. 2021).

[4] Docker. url: https : / / docs . docker . com / engine / reference / builder/(pridobljeno 24. 11. 2021).

[5] Dynamic web page.url:https://en.wikipedia.org/wiki/Dynamic_

web_page(pridobljeno 24. 6. 2021).

[6] F-pattern. url: https://creativehandles.com/blog-posts/79/4- types-of-eye-tracking-patterns-how-people-don-t-read-on- web(pridobljeno 24. 11. 2021).

[7] Figma. url: https://www.figma.com/(pridobljeno 24. 11. 2021).

[8] Ben Frain. Responsive web design with HTML5 and CSS3. Packt Pu- blishing Ltd, 2012.

[9] Google Firebase. url: https://firebase.google.com/ (pridobljeno 24. 11. 2021).

[10] HTML. url: https://en.wikipedia.org/wiki/HTML (pridobljeno 22. 6. 2022).

[11] HTML Introduction. url: https://www.geeksforgeeks.org/html- introduction/(pridobljeno 22. 6. 2022).

61

(74)