Naslov
Dizajn i razvoj osobnog web sjedišta primjenom modernih web tehnologija i alata
(Design and development of a personal web site using modern web technologies and tools)

Autori
Brakus, Bruna

Vrsta, podvrsta i kategorija rada
Ocjenski radovi, diplomski rad, preddiplomski

Fakultet
Sveučilište Sjever

Mjesto
Varaždin

Datum
20.11

Godina
2018

Stranica
37

Mentor
Tomiša, Mario

Ključne riječi
web ; PWA ; HTML ; SCSS ; JavaScript ; Preact ; Webpack ; responzivnost
(web ; PWA , HTML ; CSS ; JavaScript ; Preact ; Webpack ; responsiveness)

Sažetak
Moderna programska rješenja sve češće se razvijaju u obliku web aplikacija, a rjeđe kao tzv. nativne aplikacije (engl. native apps) namijenjene određenom operacijskom sustavu. Razlog tome ogleda se u dostupnosti web aplikacija izravno kroz web preglednik, pri čemu su jedini ograničavajući čimbenici brzina internet veze, hardverske performanse uređaja i mogućnosti web preglednika. Kako bi se eliminirala navedena ograničenja razvijena je specifikacija progresivnih web aplikacija (PWA), te sukladno s njom i tehnologije koje omogućuju realizaciju. Najvažnije karakteristike progresivnih web aplikacija ogledaju se u responzivnosti korisničkog sučelja i raznim tehnikama realizacije korisničkog iskustva u web okruženju kako bi bilo što sličnije onome pri korištenju nativne aplikacije, s velikim naglaskom na performansama. Završni rad objašnjava metodologiju responzivnog web dizajna i koncept progresivnih web aplikacija te kritički razmatra razloge njihove primjene u modernom web dizajnu. U kontekstu promatranih tema, opisane su tehnologije i alati koji omogućuju njihovu praktičnu realizaciju. Preact je JavaScript radni okvir koji se koristi za realizaciju dijelova korisničkog sučelja konceptom komponenti. SCSS preprocessor omogućava modularizaciju CSS-a kakvu inače CSS ne podržava. Webpack bundler se koristi za automatizaciju povezivanja izvornog koda, prevođenje izvornog koda koji koristi Preact u nativni JavaScript kod podržan od strane pretraživača, te optimizaciju veličine sadržaja. U praktičnom dijelu završnog rada prikazan je proces dizajniranja te praktične realizacije osobnog web sjedišta koje zadovoljava svojstva responzivnosti, brzog učitavanja sadržaja i brzog prividnog učitavanja medijskih datoteka, koje su navedene PWA specifikacije. Koristeći Figma web aplikaciju izrađeno je korisničko sučelje, a opisanim tehnologijama i alatima realizirano je responzivno web sjedište visokih performansi u smislu brzog učitavanja klijentskog sadržaja, te brzog odgovora na interakciju korisnika sa sučeljem.

Izvorni jezik
Hrvatski

Znanstvena područja
Grafička tehnologija, Informacijske i komunikacijske znanosti

POVEZANOST RADA