Naslov Dizajn i razvoj osobnog web sjedišta primjenom modernih web tehnologija i alata Naslov (engleski) Design and development of personal website using modern web technologies and tools Autor Bruna Brakus Mentor Mario Tomiša (mentor)Član povjerenstva Dean Valdec (predsjednik povjerenstva)Član povjerenstva Robert Geček (član povjerenstva)Član povjerenstva Mario Tomiša (član povjerenstva)Ustanova koja je dodijelila Sveučilište Sjever Datum i država obrane 2018-11-20, Hrvatska Znanstveno / umjetničko TEHNIČKE ZNANOSTI 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.
Sažetak (engleski) Modern software solutions are more often being developed in the form of web applications, and less frequently as native applications intended for a particular operating system. The reason for this is reflected in the accessibility of web applications directly through the web browser, with only limits being internet connection speed, hardware performance of devices, and browser capabilities. In order to eliminate these limitations, the specification of Progressive Web Applications (PWA) has been developed, as well as the technologies that enable it's implementation.
The most important features of progressive web applications are reflected in the responsiveness of the user interface and the various web experience realization techniques to be more similar to those used in native application, with a great focus on performance.
This work explains the methodology of responsive web design and the concept of progressive web applications. It critically considers the reasons for their application in modern web design. It also describes tools and technologies (SCSS, Preact, Webpack) which enable the practical implementation of these concepts.
Practical part of the work shows the process of designing and implementing a personal web site which satisfies the characteristics of the PWA specification - responsiveness, fast content loading and fast perceived loading of media files. User interface was realised using the Figma web application. Described technologies and tools have been used to implement the responsive and high performance web site.
Ključne riječi
web
PWA
HTML
SCSS
JavaScript
Preact
Webpack
responzivnost
osobno web sjedište
Ključne riječi (engleski)
web
PWA
HTML
CSS
JavaScript
Preact
Webpack
responsiveness
web portfolio
Jezik hrvatski URN:NBN urn:nbn:hr:122:396866 Studijski program Naziv: Multimedija, oblikovanje i primjena Vrsta resursa Tekst Način izrade datoteke Izvorno digitalna Prava pristupa Otvoreni pristup Uvjeti korištenja Datum i vrijeme pohrane 2018-11-27 12:58:42
