Analysis and comparison of modern software tools for the development of flexible and interactive web interfaces

Full text

(1)UNIVERZA V MARIBORU FAKULTETA ZA ELEKTROTEHNIKO, RAČUNALNIŠTVO IN INFORMATIKO. Urška Arzenšek. ANALIZA IN PRIMERJAVA SODOBNIH PROGRAMSKIH ORODIJ ZA RAZVOJ PRILAGODLJIVIH INTERAKTIVNIH SPLETNIH VMESNIKOV. Diplomsko delo. Maribor, september 2018.

(2) UNIVERZA V MARIBORU FAKULTETA ZA ELEKTROTEHNIKO, RAČUNALNIŠTVO IN INFORMATIKO. Urška Arzenšek. ANALIZA IN PRIMERJAVA SODOBNIH PROGRAMSKIH ORODIJ ZA RAZVOJ PRILAGODLJIVIH INTERAKTIVNIH SPLETNIH VMESNIKOV. Diplomsko delo. Maribor, september 2018.

(3) ANALIZA IN PRIMERJAVA SODOBNIH PROGRAMSKIH ORODIJ ZA RAZVOJ PRILAGODLJIVIH INTERAKTIVNIH SPLETNIH VMESNIKOV Diplomsko delo. Študent(ka):. Urška Arzenšek. Študijski program:. Univerzitetni študijski program Medijske komunikacije. Smer:. Medijska produkcija. Mentor:. doc. dr. Boštjan Šumak , univ. dipl. inž. rač. in inf.. Lektor(ica):. dr. Aleksandra Gačič, univ. dipl. prof. zgo. in slov.. I.

(4) Zahvala Zahvaljujem. se. mentorju. doc.. dr.. Boštjanu Šumaku za pomoč in vodenje pri izdelavi diplomskega dela. Posebna zahvala gre mojim domačim, ki so me podpirali in spodbujali skozi ves čas študija.. II.

(5) Analiza in primerjava sodobnih programskih orodij za razvoj prilagodljivih interaktivnih spletnih vmesnikov. Ključne besede: spletno programsko ogrodje, Semantic UI, UIkit, Skeleton. UDK:. 004.774.6(043.2). Povzetek. Pri izdelavi spletnih rešitev so v veliko pomoč spletna programska ogrodja, ki prihranijo čas razvoja in močno olajšajo delo, saj že vsebujejo vnaprej pripravljeno kodo. V diplomski nalogi so podrobneje predstavljena ogrodja Semantic UI, UIkit in Skeleton. Namen diplomskega dela je bil analizirati in primerjati spletna programska ogrodja na primeru izgradnje spletne strani. S pomočjo omenjenih ogrodij smo izdelali vizualno podobne spletne strani in analizirali ter primerjali naslednje kriterije: osnovni elementi (navigacija, obrazci, gumbi), dokumentacija, skupnost, podpora in aktivni razvoj, čas učenja, statična analiza programske kode, ter ogrodja na podlagi teh kriterijev tudi ocenili. Ugotovili smo, da je za izdelavo spletnih strani najprimernejše ogrodje Semantic UI, predvsem z vidika podpore uporabnikom in dokumentacije, kar pa smo tudi potrdili s statično analizo kode, saj ogrodje Semantic UI vsebuje največ predpripravljenih datotek CSS in Javascript, ki vsebujejo veliko stilov in funkcij, ki so na voljo za oblikovanje spletnih strani.. III.

(6) Analysis and comparison of modern software tools for the development of flexible and interactive web interfaces. Key words: web framework, Semantic UI, UIkit, Skeleton. UDK:. 004.774.6(043.2). Abstract. Web based software frameworks are very helpful in developing web pages, because they save us development time and make our work much easier, as they already contain preprogrammed code. In the diploma Semantic UI, UIkit and Skeleton are presented in more detail. The purpose of the diploma was to analyze and compare web based software frameworks through building a website. Using these frameworks, we have created visually similar web pages and analyzed and compared the following criteria: basic elements (navigation,. forms,. buttons),. documentation,. community,. support. and. active. development, time spent on learning, static analysis of program code. Based on this criteria we also rated the frameworks. The analysis showed that the most suitable framework is Semantic UI, especially from the point of user support and documentation, which was confirmed through static code analysis. Semantic UI contains the most files with pre-configured CSS and JavaScript, which contain many styles and functions that are available for designing websites.. IV.

(7) VSEBINA 1. 2. 3. UVOD .............................................................................................................................. 1 1.1. Predstavitev osrednjega predmeta diplomskega dela ........................................... 1. 1.2. Cilji diplomskega dela ............................................................................................. 4. 1.3. Metode diplomskega dela ...................................................................................... 5. SPLETNA PROGRAMSKA OGRODJA ................................................................................ 6 2.1. Klasifikacija ogrodij ................................................................................................. 6. 2.2. Prednosti in slabosti ogrodij ................................................................................... 6. 2.3. Aplikacijska ogrodja ................................................................................................ 7. ANALIZA IN PREDSTAVITEV IZBRANIH SPLETNIH PROGRAMSKIH OGRODIJ ................ 10 3.1. Ogrodje Semantic UI ............................................................................................. 10. 3.1.1. Mrežni sistem ................................................................................................ 13. 3.1.2. Navigacija ....................................................................................................... 14. 3.1.3. Obrazci ........................................................................................................... 15. 3.1.4. Gumbi ............................................................................................................ 17. 3.1.5. Prednosti in slabosti ...................................................................................... 18. 3.2. Ogrodje UIkit ......................................................................................................... 19. 3.2.1. Mrežni sistem ................................................................................................ 20. 3.2.2. Navigacija ....................................................................................................... 21. 3.2.3. Obrazci ........................................................................................................... 22. 3.2.4. Gumbi ............................................................................................................ 23. 3.2.5. Prednosti in slabosti ...................................................................................... 24. 3.3. Ogrodje Skeleton .................................................................................................. 25. 3.3.1. Mrežni sistem ................................................................................................ 25 V.

(8) 3.3.2. Navigacija ....................................................................................................... 27. 3.3.3. Obrazci ........................................................................................................... 27. 3.3.4. Gumbi ............................................................................................................ 28. 3.3.5. Prednosti in slabosti ...................................................................................... 29. 4. PREGLED SORODNIH ŠTUDIJ ........................................................................................ 31. 5. PRIMERJAVA IZBRANIH SPLETNIH PROGRAMSKIH OGRODIJ ....................................... 37 5.1. Navigacija .............................................................................................................. 37. 5.2. Obrazci .................................................................................................................. 42. 5.3. Gumbi.................................................................................................................... 43. 5.4. Dokumentacija ogrodij.......................................................................................... 44. 5.5. Skupnost in podpora uporabnikom ter dejavni razvoj ......................................... 44. 5.6. Čas učenja ogrodij ................................................................................................. 45. 5.7. Statična analiza programske kode ........................................................................ 45. 5.8. Ovrednotenje ogrodij............................................................................................ 47. 6. IZDELAVA PRIMERA SPLETNE STRANI Z OGRODJI SEMANTIC UI, UIKIT IN SKELETON . 51. 7. SKLEP ............................................................................................................................ 60. 8. VIRI IN LITERATURA ...................................................................................................... 63. VI.

(9) KAZALO SLIK Slika 3.1: Pred zagonom kode - seznam vsebuje elemente, določene v zgornji kodi HTML (povzeto iz [21]) ................................................................................................................... 12 Slika 3.2: Po zagonu kode - vrnjene vrednosti, ki so določene v zgornji kodi JavaScript (povzeto iz [21]) ................................................................................................................... 12 Slika 3.3: Videz definiranega vsebnika in stolpcev .............................................................. 14 Slika 3.4: Videz definiranih vrstic ......................................................................................... 14 Slika 3.5: Videz spustnega okna, ki je ustvarjen z zgornjo kodo (povzeto iz [21]) .............. 16 Slika 3.6: Gumbi v ogrodju Semantic UI (povzeto iz [21]) ................................................... 17 Slika 3.7: Različne velikosti, barve in stili, ki jih lahko določimo gumbom .......................... 18 Slika 3.8: Primer videza mreže............................................................................................. 20 Slika 3.9: Primer videza različnih vnosnih polj..................................................................... 23 Slika 3.10: Različne vrste gumbov (povzeto iz [26]) ............................................................ 24 Slika 3.11: Različne velikosti in stili gumbov........................................................................ 24 Slika 3.12: Primer videza mreže pri ogrodju Skeleton ......................................................... 27 Slika 3.13: Primer videza vnosnih polj obrazca v ogrodju Skeleton .................................... 27 Slika 3.14: Različni gumbi ogrodja Skeleton (povzeto iz [23]) ............................................. 29 Slika 4.1: Shema meril analize ............................................................................................. 33 Slika 5.1: Videz menija z uporabo ogrodja Semantic UI ...................................................... 38 Slika 5.2: Videz menija z uporabo ogrodja UIkit .................................................................. 40 Slika 5.3: Videz menija z uporabo ogrodja Skeleton ........................................................... 41 Slika 5.4: Videz vnosnih polj (levo – Semantic UI, sredina – UIkit, desno – Skeleton) ........ 42 Slika 5.5: Uporabljeni gumbi na spletnih straneh (levo – Semantic UI, sredina – UIkit, desno – Skeleton) ................................................................................................................ 43 Slika 6.1: Načrt začetne strani ............................................................................................. 51 Slika 6.2: Načrt podstrani Top 2017/Top 2018 .................................................................... 52 Slika 6.3: Načrt podstrani z opisi filmov .............................................................................. 53 Slika 6.4: Načrt podstrani za vnos filmov ............................................................................ 54. VII.

(10) Slika 6.5: Videz datotek ob naložitvi (levo – ogrodje Semantic UI, sredina – ogrodje Skeleton, desno – ogrodje Semantic UI) ............................................................................. 55 Slika 6.6: Videz začetne spletne strani, narejene z ogrodjem UIkit .................................... 56 Slika 6.7: Videz začetne spletne strani, narejene z ogrodjem Semantic UI......................... 58 Slika 6.8: Videz začetne spletne strani, narejene z ogrodjem Skeleton .............................. 59. KAZALO KOD Koda 3.1: Uporaba jezika HTML (povzeto iz [21]) ............................................................... 11 Koda 3.2: Koda ob zagonu izbere želene vrednosti (povzeto iz [21]) ................................. 12 Koda 3.3: Primer kode definiranega vsebnika in stolpcev .................................................. 13 Koda 3.4: Eksplicitne in implicitne vrstice ........................................................................... 14 Koda 3.5: Primer kode spustnega okna (povzeto iz [21]) .................................................... 16 Koda 3.6: Koda mreže, ki je prikazana na sliki ..................................................................... 21 Koda 3.7: Vnosna polja obrazca (povzeto iz [26]) ............................................................... 23 Koda 3.8: Definirani vsebnik, vrstice in stolpci .................................................................... 26 Koda 3.9: Koda vnosnih polj, ki so prikazana na zgornji sliki ............................................... 28 Koda 3.10: Koda, uporabljena za zgornje gumbe (povzeto iz [23]) ..................................... 29 Koda 5.1: Koda, uporabljena za navigacijo – ogrodje Semantic UI ..................................... 37 Koda 5.2: Koda, uporabljena za navigacijo – ogrodje UIkit ................................................. 39 Koda 5.3: Koda, uporabljena za navigacijo – ogrodje Skeleton .......................................... 41 Koda 5.4: Kode uporabljenih gumbov ................................................................................. 43 Koda 6.1: Implementacija kartic z ogrodjem Uikit .............................................................. 56 Koda 6.2: implementacija »kartic« z ogrodjem Semantic UI .............................................. 57 Koda 6.3: Implementacija »kartic« z ogrodjem Skeleton.................................................... 59. VIII.

(11) KAZALO GRAFOV Graf 1.1: Število všečkov ogrodij (povzeto s spletne strani Github [11]) .............................. 2. KAZALO TABEL Tabela 4.1: Pogoji za ocenitev osnovnih elementov ogrodij ............................................... 34 Tabela 4.2: Pogoji za ocenitev dokumentacije ogrodij ........................................................ 35 Tabela 4.3: Pogoji za ocenitev skupnosti, podpore in dejavnosti ogrodij ........................... 36 Tabela 5.1: Podatki, povzeti s spletne strani GitHub .......................................................... 44 Tabela 5.2: Statična analiza programske kode ogrodja Semantic UI .................................. 46 Tabela 5.3: Statična analiza programske kode ogrodja UIkit .............................................. 46 Tabela 5.4: Statična analiza programske kode ogrodja Skeleton ........................................ 46 Tabela 5.5: Pregled parametrov, ki so upoštevani pri ocenjevanju osnovnih elementov .. 47 Tabela 5.6: Pregled parametrov, ki so upoštevani pri ocenjevanju dokumentacije ........... 48 Tabela 5.7: Podane ocene ogrodij na podlagi določenih pogojev meritev ......................... 49. IX.

(12) 1 UVOD 1.1 Predstavitev osrednjega predmeta diplomskega dela. Pred nekaj desetletji so spletne strani delovale in bile videti precej drugače kot danes. Iz najprej statičnih spletnih strani, ki uporabniku niso omogočale interakcije, so se začele razvijati vse bolj dinamične spletne strani z večjim številom podatkov, ki so bili predstavljeni na najrazličnejše načine. Takšne spletne strani so uporabnikom omogočale interakcijo z drugimi spletnimi uporabniki in možnost soustvarjanja vsebine. Danes je splet dosegljiv na vsakem koraku, do spletnih strani pa lahko dostopamo z veliko različnih naprav, kot so računalniki, tablice, mobilni telefoni in številne druge. V preteklosti so bile spletne strani zgrajene samo za prikaz na računalnikih, ker pa so zasloni omenjenih naprav različnih dimenzij in resolucij, so se začele razvijati odzivne spletne strani, ki so uporabnikom zagotovile primerno uporabniško izkušnjo. Odzivne spletne strani so torej oblika spletnih strani, katerih vsebina se prilagodi velikosti naprav, s katerih dostopamo do spletne strani. Ključni elementi takšnih strani so prilagodljiva razporeditev na podlagi mreže, prilagodljive slike in mediji ter medijske poizvedbe [17]. Da razvijalcem ni treba izdelovati več različic spletnih strani, torej za vsako napravo posebej, si lahko pomagajo s spletnimi programskimi orodji, ki poenostavijo izdelavo spletne strani. Spletna programska orodja so »kombinacija vnaprej določenih datotek, ki se uporabljajo za podporo razvoja statičnih ali dinamičnih spletnih mest« [20]. Z uporabo teh orodij lahko izdelamo spletno stran, ki se prilagodi vsem napravam. Danes obstaja krepko čez sto različnih spletnih programskih ogrodij, med katerimi pa po priljubljenosti prednjačita ogrodji Bootstrap in Foundation, ki sta tudi največkrat uporabljeni ogrodji [1]. Vendar pa je to, da imamo na voljo tolikšno število različnih ogrodij, hkrati prednost in slabost. Dobro je, da imamo tako veliko izbiro in se lahko odločimo za najprimernejše ogrodje, hkrati pa predstavlja to tudi slabost, saj lahko prevelika izbira predstavlja težavo in se težje odločimo. Ogrodjema Bootstrap in. 1.

(13) Foundation v primerjavi z njima sledijo malo manj priljubljena ogrodja, kot so Material UI, Pure, Skeleton, Materialize, Semantic UI, Susy, UIkit itd. Podatki, povzeti s spletne strani Github, prikazujejo, koliko sledilcev oziroma všečkov (stars) ima deset najbolj priljubljenih ogrodij (Graf 1.1) [11][28].. Število všečkov 140.000 120.000 100.000 80.000 60.000 40.000 20.000 0. Število všečkov. Graf 1.1: Število všečkov ogrodij (povzeto s spletne strani Github [11]). Vsako izmed teh ogrodij ima tako prednosti kot tudi slabosti, zato so v nadaljevanju predstavljene največje prednosti in slabosti prvih treh najbolj priljubljenih spletnih programskih ogrodij z zgornjega seznama. Največja prednost ogrodja Bootstrap je ravno njegova priljubljenost, saj to pomeni, da je zanj na voljo veliko več dokumentacije, kot so razni članki, tutoriali, vtičniki in tako dalje, kot za druga ogrodja. Čeprav je največkrat uporabljeno ogrodje, to še ne pomeni, da je tudi najboljše, saj tega ne moremo sklepati samo glede na priljubljenost. Eni izmed večjih slabosti ogrodja Bootstrap sta velikost datotek in veliko število razredov HTML in elementov DOM, kar je za uporabnike lahko moteče. Ogrodje Semantic UI je nekoliko novejše kot ogrodje Bootstrap, zato ima na voljo tudi nekoliko manj dokumentacije. Glavna prednost ogrodja je njegova preprostost in za njegovo uporabo ni potrebno pretirano znanje programiranja, hkrati prednjači tudi v 2.

(14) velikosti datotek, saj so te manjše kot pri drugih ogrodjih in krajšem času nalaganja vsebin. Hkrati je ravno preprostost tudi slabost tega ogrodja, saj ni najprimernejši za kompleksnejše oblikovanje in razvijanje. Tako kot Bootstrap tudi Foundation nudi veliko več dokumentacije kot druga ogrodja, kar predstavlja prednost pri uporabi. Ogrodje Foundation je priljubljeno pri uporabnikih tudi zaradi tega, ker se uporablja na znanih straneh, kot so Facebook, eBay, Yahoo! in Mozilla. Kot pri ogrodju Bootstrap je tudi pri ogrodju Foundation težava velikost datotek, ki so dosti večje kot pri drugih ogrodjih, in kompleksnost, kar pomeni, da ni najprimernejši za začetnike. [28] Drugi viri med pet najbolj priljubljenih ogrodij uvrščajo tudi ogrodji UIkit in Skeleton [22]. Ogrodje UIkit je zbirka preprostih komponent, enostavnih za prilagajanje, kar je tudi njegova prednost. Kljub manjši priljubljenosti nudi enako funkcionalnost in kakovost kot njegovi konkurenti, vendar je na voljo manj dokumentacije, saj gre za dokaj novo ogrodje. Pri ogrodju Skeleton gre za ogrodje manjše velikosti, kar pomeni, da so spletne strani lahko razvite v zelo kratkem času, kar je velika prednost. Ogrodje je zelo preprosto in uporabno za manjše projekte. Vendar pa to predstavlja slabost, če potrebujemo širši nabor oblikovnih komponent, kot jih omogočajo večja ogrodja. [28] Osrednji predmet diplomskega dela je predstaviti spletna programska ogrodja Semantic UI, UIkit in Skeleton, jih analizirati in primerjati na primeru izgradnje spletne strani za pregled in vnos filmov. Za analizo nismo izbrali kar prvih treh najbolj priljubljenih ogrodij (Bootstrap, Foundation, Semantic UI), saj je o ogrodjih Bootstrap in Foundation napisanega že precej, opravljenih je bilo že veliko več analiz in primerjav kot za druga ogrodja. Osredotočili se bomo tako na ogrodja, ki jima po nekaterih virih sledijo po priljubljenosti, torej ogrodja Semantic UI, UIkit in Skeleton. Omenjena ogrodja do zdaj še niso bila velikokrat omenjena oziroma analizirana v diplomskih delih, zato se zdi smiselno, da se osredotočimo na tista, o katerih še ni na voljo toliko informacij in lahko o njih ugotovimo kaj novega. Ustvarili bomo spletno stran in jo preizkusili z omenjenimi ogrodji. Analizirali in primerjali bomo različna merila ogrodij in tako ugotovili, kateri je najuspešnejši pri izgradnji strani ter s tem tudi prednosti in slabosti uporabe omenjenih ogrodij. Kot merila analize bomo. 3.

(15) vzeli osnovne elemente, ki jih omogočajo vsa tri izbrana ogrodja. Tako bomo upoštevali naslednja merila: navigacija, tabele, obrazci, gumbi in odzivne slike. Za vsakega izmed teh meril bomo analizirali, kako se uporabljajo in obnašajo v določenem ogrodju, kako se prilagajajo za različne velikosti zaslonov, ali je za njih posebej vnaprej pripravljena koda, ali se lahko brez težavi ustvari vizualno podoben element s pomočjo vseh treh ogrodij itd. Podali bomo tudi ocene ogrodij in na podlagi rezultatov ugotovili, katero je najprimernejše za uporabo.. 1.2 Cilji diplomskega dela. Namen diplomskega dela je analizirati in primerjati spletna programska ogrodja na primeru izgradnje spletne strani. V teoretičnem delu diplomskega dela bomo naprej predstavili spletna programska ogrodja, kaj to sploh so in kakšen je njihov pomen, nato bomo podrobneje predstavili ogrodja Semantic UI, UIkit in Skeleton, kaj so njihove prednosti in slabosti ter morebitne težave, s katerimi se razvijalci srečajo pri njihovi uporabi. V nadaljevanju bomo s pomočjo ustvarjene spletne strani, ki jo bomo preizkusili z vsemi tremi ogrodji, analizirali in primerjali njihova različna merila. Na podlagi analiziranih meril bomo definirali merske lestvice, s pomočjo katerih bomo ovrednotili ogrodja. Glavni cilji, ki jih želimo doseči v diplomskem delu, so: . spoznati delovanje spletnih programskih ogrodij,. . podrobneje spoznati ogrodja Semantic UI, UIkit in Skeleton,. . izdelati spletno stran z vsemi omenjenimi ogrodji,. . raziskati različna merila spletnih ogrodij ter. . ugotoviti prednosti in slabosti posameznih ogrodij.. 4.

(16) 1.3 Metode diplomskega dela. Pri izdelavi diplomskega dela si bomo pomagali predvsem s tujimi viri iz različnih medijev in lastnimi izkušnjami. Pripravili smo tudi seznam metod, ki jih nameravamo uporabiti pri proučevanju tematike diplomskega dela: . študija literature in virov,. . zbiranje literature in virov o spletnih programskih ogrodjih,. . izdelava spletne strani s programskimi ogrodji ter. . analiza in primerjava različnih meril ogrodij.. 5.

(17) 2 SPLETNA PROGRAMSKA OGRODJA »Programsko ogrodje je množica razredov in/ali komponent, ki vključujejo abstraktni načrt rešitev za družino povezanih problemov« [14]. Programsko ogrodje je platforma, osnova, na kateri so zgrajene pripravljene programske rešitve in je namenjeno podpori oziroma vodenju skozi izgradnjo rešitve [35].. 2.1 Klasifikacija ogrodij. Obstaja več različnih klasifikacij programskih ogrodij, največkrat pa je uporabljena delitev glede na domeno, za katero so bila razvita [18]: . aplikacijska ogrodja (angl. Application Framework) – gre za precej obsežna ogrodja, ki zajemajo funkcionalnosti, uporabne za različne domene (npr. ogrodja za grafične uporabniške vmesnike),. . domenska ogrodja (angl. Domain Framework) – osredotočajo se le na strokovno znanje določenih problemskih domen (npr. ogrodja za multimedijo),. . podporna ogrodja (angl. Support Framework) – nudijo sistemske storitve na nižji ravni (npr. gonilniki naprav, dostop do datotek).. 2.2 Prednosti in slabosti ogrodij. Prednosti [18]: . ogrodja imajo že vnaprej pripravljeno kodo, kar pomeni prihranek pri času in olajšano delo, saj kode ni treba pisati od začetka,. . omogočena je ponovna uporaba kode in oblikovanja,. 6.

(18) . izboljšano je vzdrževanje, saj se ob popravku napake v ogrodju ta napaka popravi tudi v aplikaciji,. . kakovost programske opreme je boljša.. Potencialne slabosti so [7][18]: . razvoj kakovostnega ogrodja je zapleten, saj zahteva bogate izkušnje s področja arhitekturne zasnove aplikacij, posledično, ob pomanjkanju znanja, je za učenje uporabe ogrodja potrebno veliko več časa,. . dokumentacija ogrodij je pomembna za razvijalce aplikacij, saj gre za kompleksna ogrodja, in če ogrodja ne bodo ustrezno dokumentirana, jih razvijalci aplikacij ne bodo uporabljali,. . zahteve glede aplikacij se pogosto spreminjajo in hkrati se spreminjajo tudi ogrodja. Z razvojem ogrodij se morajo razvijati tudi aplikacije.. 2.3 Aplikacijska ogrodja. Aplikacijsko ogrodje je knjižnica programske opreme, ki zagotavlja osnovno strukturo za podporo razvoju aplikacij za določeno okolje. Bolj jasno je aplikacijsko ogrodje opredeljeno kot paket, sestavljen iz datotek in map standardizirane kode, kot so dokumenti HTML, CSS, JavaScript, jQuery, komponente PHP itd., ki se uporabljajo za razvoj spletnih rešitev. Katere datoteke sestavljajo ogrodje, je odvisno od tega, ali gre za ogrodje za uporabniški vmesnik ali za ogrodje za logiko. Namen spletnih ogrodij je zagotoviti skupno strukturo, saj ima večina spletnih strani podobno strukturo, to pa razvijalcem močno olajša delo, saj jim ni treba vedno znova pisati kode od začetka. [10] Aplikacijska ogrodja torej ločimo na ogrodje za uporabniški vmesnik (angl. Frontend Framework) in ogrodje za logiko (angl. Backend Framework). Ogrodje za logiko je običajno sestavljeno iz strežnika, aplikacije in baze podatkov. Za uspešno komunikacijo med strežnikom, aplikacijo in podatkovno bazo je potrebna uporaba skriptnih jezikov, ogrodja 7.

(19) za razvijanje programske opreme in ogrodja za upravljanje s podatkovnimi bazami, ki najdejo, shranijo ali spreminjajo podatke ter jih pošljejo nazaj uporabnikom [15]. Ogrodje za uporabniški vmesnik je sestavljeno iz pripravljenih komponent, ki jih razvijalec uporablja in jih je, če je to potrebno, mogoče spremeniti ali prilagoditi trenutnim potrebam [19]. Te komponente običajno vključujejo izvorno kodo CSS za ustvarjanje mrežnega sistema, katere glavna naloga je vizualno oblikovanje spletne strani, tipografijo za elemente HTML, ki omogoča različne sloge besedila, in standardne razrede CSS, ki jih je mogoče uporabiti za oblikovanje naprednih komponent uporabniškega vmesnika [34]. V tem diplomskem delu se bomo osredotočili na ogrodja za uporabniški vmesnik. Uporaba ogrodij zahteva izbiro ogrodja in upoštevanje dveh osnovnih elementov za uporabo ogrodij. Pri izbiri ogrodja se moramo vprašati, katero ogrodje je najboljše za naše potrebe in katero ogrodje je najboljše kakovosti, kar pomeni, katero je najbolj prilagodljivo, uporabno in razširljivo. Osnovna elementa, ki ju je treba upoštevati pri katerem koli ogrodju, sta sledenje dokumentaciji in prepisovanje izvorne kode. Zelo pomembno je, da sledimo dokumentaciji, saj je ravno napaka uporabnika in razvijalca drugi najpogostejši vir težav s kakovostjo ogrodij in del, ki so bila ustvarjena z njimi. Prepisovanje oziroma spreminjanje izvorne kode ima lahko nepredvidene posledice in povzroči težave s prihodnjimi posodobitvami, zato je boljše, da izvorno kodo pustimo takšno, kot je [19: 14–17]. Uporaba ogrodij prav tako prihaja z lastnimi težavami. Najpogostejše težave pri uporabi ogrodij so obširne kode, krivulja učenja in manj fleksibilnosti. Težava obširnih kod se nanaša na to, da ogrodja prihajajo s številnimi dodatnimi slogi, ki jih uporabnik za svoje spletno mesto morda ne bo potreboval. Sicer je možno sloge razvrstiti in jih tudi odstraniti, vendar pa lahko ta proces vzame veliko časa. Krivulja učenja pomeni, da ko prvič uporabljamo določeno ogrodje, obstaja verjetnost, da bomo morali nekaj časa posvetiti učenju, kako ogrodje sploh deluje, vključno s preizkusom razredov CSS, ID in imeni ter pravilno strukturiranim HTML. Ogrodja imajo že skoraj vse preddefinirano, vključno s širino mreže, slogi gumbov in polmerom robov ter sledijo standardu njihovih razvijalcev, kar pomeni manj fleksibilnosti. V primeru, da stvari ne delujejo tako, kot bi. 8.

(20) želeli, bi vzelo veliko časa, da bi vpeljali spremembe, in če se te ne bi pravilno izvajale, bi lahko to uničilo vse druge strukture kode [17].. 9.

(21) 3 ANALIZA. IN. PREDSTAVITEV. IZBRANIH. SPLETNIH. PROGRAMSKIH OGRODIJ Na voljo imamo številna različna spletna programska ogrodja, ki so namenjena uporabniškemu vmesniku, vendar smo za analizo izbrali le tri, in sicer ogrodja Semantic UI, UIkit in Skeleton. Na odločitev je seveda delno vplivalo to, da smo med iskanjem različnih ogrodij in njihovimi primerjavami, takoj za ogrodjem Bootstrap in ogrodjem Foundation, največkrat naleteli ravno na omenjena tri ogrodja. Vendar to, kolikokrat se ogrodje pojavi med najdenimi zadetki na spletu, ni bil zadosten razlog za izbiro. Nadaljevali smo s preučevanjem ogrodij, saj smo se za izbiro ogrodij lažje odločili na podlagi enostavnosti uporabe ogrodij in podpore uporabnikom. Pomembno je bilo, da ogrodje ne zahteva veliko predznanja, ampak je dovolj le nekaj izkušenj na področju oblikovanja spletnih strani in seveda, da se ga ni težko naučiti. Podpora uporabnikom je bila prav tako pomemben dejavnik pri odločitvi, saj je pomembno, da ogrodja uporabnikom nudijo zadostne količine dokumentacije, kjer je predstavljena uporaba ogrodij in da so še vedno dejavna na spletnih straneh, kot je na primer spletna stran Github. Do vseh teh podatkov smo lahko prišli med iskanjem različnih ogrodij na spletu, pri čemer smo dostopali do podatkov o ogrodjih in izkušnjah, ki jih imajo drugi uporabniki z le-temi.. 3.1 Ogrodje Semantic UI. Ogrodje Semantic UI je razvil Jack Lukic, namen pa je bil oblikovati skupen jezik, ki ga je mogoče razumeti, in sicer tako, da bi zamenjali razrede CSS z naravno opisnim jezikom. Na uradni spletni strani je ogrodje Semantic UI opisano kot ogrodje, ki pomaga oblikovati čudovite, odzivne postavitve z uporabo človeku prijaznega jezika HTML [21]. Javnosti je bilo ogrodje predstavljeno leta 2013, najnovejša različica (različica 2.3.2) pa je bila objavljena 18. junija 2018. Gre za eno izmed preprostejših ogrodij, ki so na voljo. 10.

(22) uporabnikom in je zato primerno tudi za začetnike brez večjih izkušenj na področju uporabe spletnih ogrodij. Zaradi preprostosti je oblikovanje spletnih strani hitrejše, a kljub temu lahko ustvarimo lepe spletne strani, kot bi jih na primer z drugimi ogrodji. Za predprocesorje ogrodje Semantic UI uporablja jezik LESS. Ogrodje je podprto v naslednjih brskalnikih: Firefox, Chrome, Safari Mac, IE 11+, Android 4.4+, Ios Safari 7+, Microsoft Edge 12+ [27]. Kot je napisano na spletni strani Semantic UI, uporabniški vmesnik obravnava besede in razrede kot zamenljive koncepte. Spodnja koda (Koda 3.1) prikazuje uporabo jezika HTML in njegovo preprostost, kjer razredi uporabljajo sintakso iz naravnih jezikov, kot so razmerja samostalnika, besednega reda in pluralnosti, ki intuitivno povezujejo koncepte [17]. <div class="ui three buttons"> <button class="ui active button">One</button> < button class="ui button">Two</button> < button class=" ui button ">Three</button> </div> Koda 3.1: Uporaba jezika HTML (povzeto iz [21]). Za ustvarjanje kode JavaScript ogrodje uporablja preproste fraze, imenovane vedenja, ki sprožijo funkcionalnost. Vsaka samovoljna odločitev v komponenti je vključena kot nastavitev, ki jo lahko razvijalci spremenijo. Prikazana je koda, ki ob zagonu izbere želene vrednosti (Koda 3.2) in sliki, ki prikazujeta, kako je videti zagon kode (Slika 3.1 in Slika 3.2).. 11.

(23) $('select.dropdown') .dropdown('set selected', ['meteor' , 'ember']) ;. <select name="skills" multiple="" class=ui fluid dropdown"> <option value="">Skills</option> <option value ="angular">Angular</option> <option value="css">css</option> <option value="ember">Ember</option> <option value="html">HTML</option> <option value="javascript">Javascript</option> <option value="meteor">Meteor</option> <option value="node">NodeJS</option> </select> Koda 3.2: Koda ob zagonu izbere želene vrednosti (povzeto iz [21]). Slika 3.1: Pred zagonom kode - seznam vsebuje elemente, določene v zgornji kodi HTML (povzeto iz [21]). Slika 3.2: Po zagonu kode - vrnjene vrednosti, ki so določene v zgornji kodi JavaScript (povzeto iz [21]). Ob uporabi ogrodja Semantic UI je poenostavljeno tudi razhroščevanje. Ogrodje Semantic UI že samo uporabnikom omogoča izslediti tako imenovana ozka grla (ozko grlo predstavlja povezavo med pomnilnikom in centralno procesno enoto oziroma krajše CPE, ko je za branje iz pomnilnika porabljeno več časa, medtem ko je za izvedbo ukaza v CPE. 12.

(24) porabljeno manj časa [33]), ne da bi morali pregledati precejšnje število elementov, da bi odkrili težavo [5] [27].. 3.1.1 Mrežni sistem. Z mrežnimi sistemi na spletnih straneh usklajujemo bel oziroma prazen prostor v postavitvi, posledično se zdi, da vsebina na straneh poteka bolj naravno. Vsak mrežni sistem ima določeno število stolpcev, ki so dovoljeni v posamezni vrstici. Ogrodje Semantic UI deluje na načelu 16 stolpcev. Najprej je treba definirati »grid«, znotraj katerega bodo vrstice in znotraj njih stolpci, katerih skupno število bo šestnajst (Slika 3.3). [13] Primer kode, ki prikazuje definiranje vsebnika in stolpcev (Koda 3.3): <div class="ui grid"> <div class="four wide column"> <div class="ui inverted segment"></div></div> <div class="four wide column"> <div class="ui inverted segment"></div></div> <div class="four wide column"> <div class="ui inverted segment"></div></div> <div class="four wide column"> <div class="ui inverted segment"></div></div> <div class="eight wide column"> <div class="ui inverted segment"></div></div> <div class="eight wide column"> <div class="ui inverted segment"></div></div> <div class="six wide column"> <div class="ui inverted segment"></div></div> <div class="two wide column"> <div class="ui inverted segment"></div></div> <div class="eight wide column"> <div class="ui inverted segment"></div></div> </div></div> Koda 3.3: Primer kode definiranega vsebnika in stolpcev. 13.

(25) Slika 3.3: Videz definiranega vsebnika in stolpcev. Vrstice so lahko definirane na dva načina, in sicer eksplicitno in implicitno. Eksplicitno pomeni, da jih posebej označimo z dodatnim elementom »row«, implicitno pa, da se samodejno pojavijo, ko zmanjka prostora v prejšnji vrstici (Slika 3.4) [21]. Primer kode, ki prikazuje eksplicitne in implicitne vrstice (Koda 3.4): <div class="ui three column grid"> <div class="column"><div class="ui inverted segment"></div></div> <div class="column"><div class="ui inverted segment"></div></div> <div class="column"><div class="ui inverted segment"></div></div> <div class="row"> <div class="column"><div class="ui inverted segment"></div></div> <div class="column"><div class="ui inverted segment"></div></div> </div> </div> Koda 3.4: Eksplicitne in implicitne vrstice. Slika 3.4: Videz definiranih vrstic. 3.1.2 Navigacija. Glavna funkcija navigacije je, da uporabniki enostavno in hitro najdejo vsebino, ki jih zanima. Na vodoravno usmerjenih zaslonih, ki so dovolj veliki, da prikažejo celotno navigacijo, se le-ta po navadi nahaja vodoravno zgoraj ali pa na levi strani spletne strani.. 14.

(26) Drugače je na mobilnih straneh, saj kmalu ugotovimo, da navigacije ne bomo mogli prikazati tako kot na primer na zaslonu računalnika. Ravno pri tej težavi lahko pomagajo ogrodja, saj imajo v svojih datotekah že pripravljeno kodo, ki vpliva na to, kako se navigacija obnaša na različnih napravah. V nadaljevanju bo predstavljeno, kako navigacijo ustvarimo z različnimi ogrodji. [22: 30] Ogrodje Semantic UI ponuja zelo pester izbor predpripravljene programske kode za navigacijo. V dokumentaciji pod kategorijo »Menu«, do katere lahko dostopamo na spletni strani https://semantic-ui.com/collections/menu.html, so na voljo različni primeri menijev, ki jih lahko uporabimo. Prikazani so primeri, zraven pa je zapisana tudi programska koda primerov, ki jo lahko prekopiramo in prilagodimo svoji spletni strani. Preprosto navigacijo v primeru ogrodja Semantic UI v kodo implementiramo tako, da elementu »<div>« dodamo razred »ui menu« in znotraj tega elementa dodamo druge elemente menija v elemente »<a>«. Tako imamo na voljo preprost vodoraven meni, navpičen meni, spustni meni, elementi menija so lahko obarvani ali pa kot elemente vsebuje samo ikone in tako dalje [21].. 3.1.3 Obrazci. Obrazci so namenjeni vnosu podatkov s strani končnega uporabnika, ki so nato poslani na strežnik in ta jih potem tam obdela. Obstajajo različne vrste obrazcev, najpogostejše pa so na primer izdelava uporabniškega računa, pošiljanje povpraševanja o določeni stvari in drugi podatki, ki jih avtorji na spletnih straneh zahtevajo ali pa želijo pridobiti. Obrazci uporabnikom zelo poenostavijo vnašanje podatkov, saj je veliko lažje izpolniti vnaprej določen obrazec in ni treba razmišljati o tem, kaj vnesti. Obrazci so sestavljeni iz polj in vsako polje je namenjeno enemu podatku [22: 72–73]. Z ogrodjem Semantic UI obrazec ustvarimo tako, da najprej definiramo element »<form>«, ki mu dodamo razred »ui form«. Znotraj tega elementa nato vstavimo element »<div class="field">«, s katerim ustvarimo posamezno vnosno polje. Znotraj tega. 15.

(27) elementa potem določimo, kar želimo, da je v vnosnem polju. Obrazec lahko tako vsebuje preprosto vnosno polje, ki ga definiramo z elementom »<input type="text">«. Vnosna polja so lahko tudi eno poleg drugega tako, da ustvarimo nov element »<div class="fields">« in znotraj tega potem vstavimo element »<div class="field">« in znotraj tega elemente »<input type="text">«. Če zahtevamo vnos daljšega besedila, to v obrazcu definiramo z elementom »<textarea></textarea>«. Za dodajanje potrditvenih oken v kodo dodamo element »<div class=»"ui checkbox">« in znotraj tega še element »<input type="checkbox" ter morebitne druge lastnosti. [21] Obrazec lahko vsebuje tudi spustna okna, primer kode preprostega spustnega okna (Koda 3.5) in njegov videz (Slika 3.5) sta prikazana spodaj: <div class="ui form"> <div class="field"> <label>Gender</label> <div class="ui selection dropdown"> <input type="hidden" name="gender"> <i class="dropdown icon"></i> <div class="default text">Gender</div> <div class="menu"> <div class="item" data-value="1">Male</div> <div class="item" data-value="0">Female</div> </div> </div> </div> </div> Koda 3.5: Primer kode spustnega okna (povzeto iz [21]). Slika 3.5: Videz spustnega okna, ki je ustvarjen z zgornjo kodo (povzeto iz [21]). 16.

(28) Obrazec lahko vsebuje tudi sporočila uporabniku, na primer, če je prišlo do kakšnih težav. Takšno vnosno polje vnesemo z elementom »<div class="ui message". Obrazcu pa lahko nato spreminjamo tudi velikost, širino vnosnih polj, ali je polje obvezno, ali je oznaka polja nad poljem ali poleg njega in tako dalje. [21]. 3.1.4 Gumbi. Gumbi so na vsaki spletni strani in morajo biti oblikovani tako, da vizualno pritegnejo uporabnika, da klikne nanj. Namesto gumba je na spletnih straneh lahko uporabljena tudi povezava, ki nas pošlje oziroma preusmeri na kakšno drugo podstran ali stran. Vsa tri analizirana ogrodja imajo predpripravljeno kodo za oblikovanje gumbov in spletnih povezav [22: 49]. Ogrodje Semantic UI ponuja veliko razredov, s katerimi lahko oblikujemo lepe in moderne gumbe ter povezave. Standardni gumb oblikujemo z elementom »<button>«, ki mu dodamo razred »ui button«, takšen gumb je sive barve s temno sivim napisom. Če želimo določen gumb poudariti, to storimo z razredom »ui primary button«, gumb je obarvan modro ali pa z razredom »ui secondary button«, gumb je obarvan črno (Slika 3.6). [21]. Slika 3.6: Gumbi v ogrodju Semantic UI (povzeto iz [21]). Namesto gumba lahko uporabimo tudi samo ikono, in sicer tako, da definiramo element »<button class="ui icon button">« in znotraj njega na primer element »<i class="cloud icon">«. Namesto standardnega gumba pa lahko uporabimo osnovni gumb, ki je manj izrazit, z razredom »<button class="ui basic button">«, ki mu lahko določimo tudi različne barve.. 17.

(29) Gumbe lahko tudi grupiramo, da so drug poleg drugega, in sicer tako, da jih združimo v elementu »<div class="ui buttons">«. Gumbom lahko seveda spreminjamo tudi velikost, barvo, ali je poravnan na levo ali desno in tako dalje [21]. Na Slika 3.7 so prikazane različne velikosti, barve in stili, ki smo jih uporabili pri ustvarjanju gumbov.. Slika 3.7: Različne velikosti, barve in stili, ki jih lahko določimo gumbom. 3.1.5 Prednosti in slabosti. Prednosti so naslednje [6] [9] [25] [28]: . imena razredov so poimenovana semantično in ne zahtevajo posebnega znanja, kar je primerno tudi za začetnike, ki niso tako vešči uporabe spletnih programskih ogrodij, saj je koda bolj berljiva in razumljiva;. . besede in razredi so obravnavani kot zamenljive komponente, omogoča pa tudi preprosto odpravljanje napak in izstopa z intuitivnim programskim jezikom JavaScript;. . ogrodje vsebuje datoteke majhnih velikosti in omogoča minimalni čas nalaganja, saj je uporabnikom omogočeno, da lahko naložijo samo komponente, ki jih potrebujejo;. . enostavno prilagajanje zaradi vsestranskih elementov;. . dokumentacija je enostavna za uporabo, jasno razumljiva, na spletni strani pa lahko najdemo tudi primere z izvornimi kodami.. 18.

(30) Slabosti so naslednje [5] [27] [29]: . v primerjavi z drugimi ogrodji vsebuje zelo velike datoteke;. . na voljo je majhno število razredov;. . ni najbolj primerno za zahtevnejše uporabnike, ki imajo bolj kompleksne potrebe pri načrtovanju in razvoju;. . številne funkcije v ogrodju uporabljajo programski jezik JavaScript, zato je zahtevano poznavanje le-tega, kar pa lahko predstavlja težavo za čiste začetnike.. 3.2 Ogrodje UIkit. Ogrodje UIkit je lahko in modularno ogrodje za razvoj hitrih in zmogljivih spletnih vmesnikov [30]. Ogrodje je bilo razvito pri podjetju YOOtheme in objavljeno leta 2013. Gre za sicer malo manj priljubljeno ogrodje v primerjavi z drugimi, vendar vseeno ponuja enako funkcionalnost, oblikovanje spletnih strani pa je enostavno. Ogrodje je primerno tako za preprostejše kot tudi kompleksnejše projekte, vendar pa je zaradi pomanjkanja virov bolj primerno za izkušenejše uporabnike. Kar je najbolj izstopajoče pri omenjenem ogrodju, je, da za predprocesorje uporablja tako LESS kot tudi SASS. Ogrodje UIkit ponuja obsežno zbirko hitrih, odzivnih komponent HTML, CSS in JavaScript, z doslednimi konvencijami poimenovanja, ki so preproste za uporabo, enostavne za prilagajanje in razširljivost. Ogrodje Semantic UI vključuje navigacijske komponente, kot so stranski navigacijski meniji, elemente, kot so HTML obrazci in tabele, komponente JavaScript, kot so pojavna okna, običajne elemente, kot so gumbi, značke in prekrivne elemente, vključno s tekočim, popolnoma odzivnim mrežnim sistemom [27] [28].. 19.

(31) 3.2.1 Mrežni sistem. Spletno ogrodje UIkit uporablja »mobile-first« način oblikovanja spletne strani, kar pomeni, da videz strani najprej oblikujemo za mobilni telefon in nato za druge velikosti zaslonov. Ogrodje UIkit v primerjavi z ogrodjem Semantic UI uporablja slog desetih stolpcev, ki so v vrsti. Širino stolpcev določajo enote z vnaprej določenimi razredi znotraj vsake mreže. Da ustvarimo okvir mreže, je tudi tu najprej treba definirati razred »ukgrid«, znotraj katerega dodamo razrede »uk-width-*«, s katerimi definiramo, kako široki bodo stolpci. Mrežo lahko razdelimo na 1, 2, 3, 4, 5, 6 ali 10 stolpcev (Slika 3.8). Koda 3.6 prikazuje kodo mreže, ki je prikazana na spodnji sliki. [26]. Slika 3.8: Primer videza mreže. 20.

(32) <div class="uk-grid"> <div class="uk-width-1-1"> <div class="uk-card uk-card-secondary uk-card-body"></div></div> <div class="uk-width-1-2"> <div class="uk-card uk-card-secondary uk-card-body"></div></div> <div class="uk-width-1-2"> <div class="uk-card uk-card-secondary uk-card-body"></div></div> <div class="uk-width-1-4"> <div class="uk-card uk-card-secondary uk-card-body"></div></div> <div class="uk-width-1-4"> <div class="uk-card uk-card-secondary uk-card-body"></div></div> <div class="uk-width-1-4"> <div class="uk-card uk-card-secondary uk-card-body"></div></div> <div class="uk-width-1-4"> <div class="uk-card uk-card-secondary uk-card-body"></div></div> </div> Koda 3.6: Koda mreže, ki je prikazana na sliki. Ogrodje UIkit omogoča tudi, da lahko določimo različne širine razredov stolpcev, ki se obnašajo kot običajni razredi širine, vendar so prednastavljeni in se začnejo uporabljati le pri določenih točkah. Tako lahko določimo naslednje širine razredov: »small«, »medium« in »large«. Če širine ne določimo, potem razred »uk-width« vpliva na vse širine naprav, stolpci pa ostanejo drug ob drugem. »Small« vpliva na naprave s širino 480 slikovnih pik ali več, »medium« vpliva na naprave s širino 768 slikovnih pik, »large« pa vpliva na naprave s širino 960 slikovnih pik ali več, v vseh treh primerih pa se stolpci zožijo na manjše velikosti [12].. 3.2.2 Navigacija. Ogrodje UIkit ponuja kar nekaj predpripravljene kode za ustvarjanje navigacije. Na spletni strani https://getuikit.com/docs/navbar lahko tako dostopamo do primerov menijev, ki so na voljo. Tako imamo v dokumentaciji ponujene različne menije, ki jih lahko uporabimo na svoji spletni strani, poleg vsakega primera pa je podana tudi programska koda, ki jo lahko 21.

(33) samo prekopiramo in vstavimo v svojo spletno stran. Na začetku dokumentacije, ki je namenjena oblikovanju navigacije, imamo najprej razloženo uporabo, torej, kako navigacijo implementiramo v kodo, in sicer tako, da elementu »<nav>« dodamo atribut »uk-navbar« ali pa, da elementu »<ul>« dodamo atribut ».uk-navbar-nav«, elemente »<a>« v tem primeru uporabimo kot elemente menija znotraj seznama. Temu sledi še razlaga za stvari, kot je poravnava navigacije levo, na sredino ali desno in tako dalje. Nato sledijo različni primeri menijev, ki so na voljo in jih lahko izberemo [26].. 3.2.3 Obrazci. Tako kot pri drugih ogrodjih, tudi tu najprej definiramo element »<form>«, znotraj katerega potem vstavljamo želene elemente. Elementi, ki jih v tem primeru lahko vstavljamo, so: »<input>«, »<select>«, »<textarea>«, »<input type="radio">«, »<input type="checkbox">«,. »<input. type="range">«,. »<input. type="fieldset">«,. »<input. type="legend">«. Tem elementom nato dodajamo ustrezne razrede. Tudi tu lahko spreminjamo velikosti vnosnih polj z razredoma ».uk-form-large« in ».uk-form-large«, širine vnosnih polj z razredi: ».uk-form-width-large« (nastavi širino na 500px), ».uk-formwidth-medium« (nastavi širino na 200px), ».uk-form-width-small« (nastavi širino na 130px) in ».uk-form-width-xsmall« (nastavi širino na 40px), ali so oznake nad poljem ali poleg njega, ikone polj in tako dalje. Z razredoma ».uk-form-danger>« in ».uk-formsuccess>« lahko uporabniku sporočimo, ali je bil vnos uspešen ali ne. Spodaj sta prikazana primer kode vnosnih polj (Koda 3.7) in njihov videz (Slika 3.9) [26].. 22.

(34) <form class="uk-form"> <fieldset data-uk-margin> <legend>...</legend> <input type="text" placeholder=""> <input type="password" placeholder=""> <select> <option>...</option> <option>...</option> </select> <button class="uk-button">...</button> <label><input type="checkbox"> ...</label> </fieldset> </form> Koda 3.7: Vnosna polja obrazca (povzeto iz [26]). Slika 3.9: Primer videza različnih vnosnih polj. 3.2.4 Gumbi. Tudi ogrodje UIkit ponuja kar nekaj izbire glede gumbov. Gumb v kodi implementiramo tako, da elementu »<button>« ali elementu »<a>« dodamo razred »uk-button« in modifikator, kot na primer »uk-button-default«. Če želimo gumb onemogočiti, to storimo tako, da elementu »<button>« dodamo »disabled«. Gumbom lahko določimo različne stile. Z razredom »uk-button-default« določimo privzet slog gumba, razred »uk-buttonprimary« označuje primarno dejanje, razred »uk-button-secondary« označuje pomembno dejanje, razred »uk-button-danger« označuje negativno dejanje, razred »uk-button-text« določi alternativni, tipografski slog gumba, z razredom »uk-button-link« pa dobi gumb videz elementa »<a>« (Slika 3.10). [26]. 23.

(35) Slika 3.10: Različne vrste gumbov (povzeto iz [26]). Gumbom lahko tudi spreminjamo velikost in širino (Slika 3.11), z uporabo razreda »ukwidth-1-1« bo gumb zavzel celotno širino, lahko jih tudi grupiramo, in sicer tako, da gumbe združimo v element »<div>«, ki mu dodamo razred »uk-button-group« [26].. Slika 3.11: Različne velikosti in stili gumbov. 3.2.5 Prednosti in slabosti. Prednosti so naslednje [26] [31] [32]: . gre za visoko prilagodljivo ogrodje, ki ima urejevalnik HTML, Flex in druge dodatke ter edinstvene komponente;. . je izjemno modularen, kar pomeni, da lahko dodajamo komponente, ne da bi s tem negativno vplivali na celoten slog;. . omogočeno je ustvarjanje naprednih uporabniških vmesnikov;. . ima že nekaj vgrajenih možnosti animacij, ki jih lahko uporabimo za animacijo različnih komponent;. . vsebuje dve predlogi spletnih strani za lažji začetek.. 24.

(36) Slabosti so naslednje [3] [27] [28]: . ker gre za relativno novo ogrodje, razen uradne dokumentacije zanj skoraj ni drugih virov, iz katerih bi se lahko učili in je zaradi tega primerno za bolj izkušene razvijalce;. . razredi kode so neurejeni, zaradi česar lahko postanejo ugnezdeni razredi zapleteni za branje;. . mrežni sistem, razdeljen na 10 stolpcev, je lahko moteč za tiste, ki so navajeni na mrežni sistem z 12 stolpci;. . vnaprej izdelane predloge so plačljive, zato je priporočljiva uporaba predlog Joomla! in Wordpress, ki so brezplačne.. 3.3 Ogrodje Skeleton. Ogrodje Skeleton je razvil Dave Gamache in ga prvič objavil leta 2012. Glede na število vrstic kode in velikosti datotek gre za preprosto ogrodje, saj v primerjavi z drugimi vsebuje samo 400 vrstic kode in je zaradi tega primerno predvsem za manjše, preproste projekte, pri katerih ne potrebujemo vseh nepotrebnih elementov, ki so prisotni pri drugih orodjih. Vsebuje najosnovnejše elemente, kot so gumbi, seznami, tabele, obrazci in tako dalje. Ob prenosu datotek s spletne strani www.getskeleton.com dobimo naslednje datoteke: »index.html«, za lažji začetek, dve datoteki CSS »skeleton.css« in »normalize.css« ter pod mapo slike še »favicon.ico«. Najpomembnejši datoteki sta datoteki CSS [23].. 3.3.1 Mrežni sistem. Ogrodje Skeleton uporablja drugačen sistem stolpcev kot prejšnja dva. Deluje na načelu dvanajstih stolpcev, maksimalna širina vsebnika pa je 960 slikovnih pik, ki se ob. 25.

(37) pomanjšanju okna temu primerno prilagodi, ob povečanju pa se ne povečuje, ampak ostane na isti velikosti. Če je treba, je to maksimalno širino mogoče tudi spremeniti s pomočjo kode. Tako kot pri prejšnjih ogrodjih je tudi tu najprej treba definirati razred »container«, znotraj katerega bomo definirali in postavili vrstice, znotraj njih pa stolpce, katerih skupno število bo dvanajst (Slika 3.6). Tudi tukaj so vrstice definirane z besedo »row«, stolpci pa z besedo »column«. Vendar pa je posebnost pri ogrodju Skeleton ta, da je občutljiv na ednino in množino in moramo zato biti pozorni pri poimenovanju stolpcev. Če definiramo samo en stolpec, ga moramo poimenovati »column«, če pa definiramo dva ali več stolpcev, pa jih moramo poimenovati »columns«, kar je vidno tudi v spodnji kodi (Koda 3.8) [23]. Spodaj sta prikazana primer definiranja vsebnika, vrstic in stolpcev (Koda 3.8) ter videz mreže (Slika 3.12): <div class="container"> <div class="row"> <div class="eleven columns box"></div> <div class="one column box"></div> </div> <div class="row"> <div class="six columns box"></div> <div class="six columns box"></div> </div> <div class="row"> <div class="three columns box"></div> <div class="nine columns box"></div> </div> </div> Koda 3.8: Definirani vsebnik, vrstice in stolpci. 26.

(38) Slika 3.12: Primer videza mreže pri ogrodju Skeleton. 3.3.2 Navigacija. Ogrodje Skeleton v primerjavi s prvima dvema predstavljenima ogrodjema nima predpripravljene programske kode za navigacijo in moramo zato meni ustvariti sami. Posledično tudi ogrodje ne omogoča odzivnega menija.. 3.3.3 Obrazci. Tako kot pri drugih analiziranih elementih tudi tu ogrodje Skeleton nima posebej predpripravljene kode in stilov za obrazce, kot na primer drugi dve ogrodji. Za obrazce uporablja, tako kot tudi druga ogrodja, mrežni sistem za postavitev elementov, kar omogoča, da se vsebina prilagodi širini brskalnega okna. Koda obrazca je tudi tu znotraj elementa »<form>«. Spodaj sta prikazana videz (Slika 3.13) in koda vnosnih polj (Koda 3.9), ki jih ogrodje Skeleton ponuja v svoji dokumentaciji [23]:. Slika 3.13: Primer videza vnosnih polj obrazca v ogrodju Skeleton. 27.

(39) <form> <div class="four columns"> <select class="u-full-width" id="exampleRecipientInput"> <option value="Option 1">1</option> <option value="Option 2">2</option> <option value="Option 3">3</option> </select> </div> <div class="four columns"> <input class="u-full-width" type="email" placeholder="Email"> </div> <textarea class="u-full-width" placeholder="Explain..."></textarea> <label class="check"> <input type="checkbox"> <span class="label-body">Check</span> </label> </form> Koda 3.9: Koda vnosnih polj, ki so prikazana na zgornji sliki. 3.3.4 Gumbi. Ogrodje Skeleton v primerjavi z drugima dvema ogrodjema ponuja le dve različni vrsti gumbov. Prvi je standardni gumb, ki ga v kodo vključimo z razredom »<button>« in je bele barve, besedilo in rob okoli njega pa sta črne barve. Če gumb uporabljamo za spletno povezavo, potem elementu »<a>« dodamo razred »button«. Če uporabimo element »<input>«, potem uporabimo atribut »type«, ki pa lahko zavzame vrednost »button« ali »submit«, odvisno, čemu je namenjen, saj je videz gumbov v obeh primerih enak. Vrednost »submit« je namenjena potrjevanju obrazca, medtem ko gumb z vrednostjo »button« tega ne naredi. Druga vrsta gumbov deluje na isti način kot standardni gumb, razlikujeta se le v barvi, saj je ta svetlo modre barve, besedilo gumba pa je bele barve. Za uporabo tega gumba moramo v vsakem primeru v razred zapisati »button-primary« [23]. Spodaj so prikazani različni gumbi ogrodja Skeleton (Slika 3.14):. 28.

(40) Slika 3.14: Različni gumbi ogrodja Skeleton (povzeto iz [23]). Koda, ki je uporabljena za prikazane gumbe (Koda 3.10):  <a class="button" href="#">Anchor button</a> <button>Button element</button> <input type="submit" value="submit input"> <input type="button" value="button input">  <a class="button button-primary" href="#">Anchor button</a> <button class="button-primary">Button element</button> <input class="button-primary" type="submit" value="submit input"> <input class="button-primary" type="button" value="button input"> Koda 3.10: Koda, uporabljena za zgornje gumbe (povzeto iz [23]). 3.3.5 Prednosti in slabosti. Prednosti so naslednje [8] [28] [34]: . gre za izjemno lahko ogrodje, kar predstavlja prednost za začetnike;. . najbolj ustreza napravam z manjšimi ločljivostmi;. . predvsem je uporaben za manjše projekte in je bolj preprost.. 29.

(41) Slabosti pa so naslednje [2] [28]: . v primerjavi z večjimi ogrodji ne vsebuje širokega nabora sestavnih komponent;. . zahteva več časa za razvoj v primerjavi z drugimi ogrodji;. . ima zelo omejen CSS;. . že dve leti ni dejavnega razvoja na ogrodju.. 30.

(42) 4 PREGLED SORODNIH ŠTUDIJ Iskanja sorodnih študij smo se najprej lotili tako, da smo pregledali diplomska dela, ki so že preučevala temo, podobno naši. V iskalnik Google smo vnesli naslednje besedne zveze: primerjava ogrodij, primerjava ogrodij Bootstrap (ker smo vedeli, da je ogrodje Bootstrap najbolj priljubljeno med ogrodij in da se največkrat pojavlja v diplomskih delih), primerjava ogrodij CSS (angl. Cascading Style Sheets, sl. kaskadne stilske predloge), ogrodja za odzivno oblikovanje. Na takšen način smo našli več različnih diplomskih del, ki so analizirala oziroma primerjala ogrodja na podoben ali pa svoj način. Ker najdene analize in primerjave v diplomskih delih niso bile narejene tako obsežno, smo se lotili iskanja analiz in primerjav še v angleškem jeziku. Tako kot za iskanje v slovenskem jeziku smo tudi za iskanje v angleškem jeziku uporabili iskalnik Google, v katerega smo vnesli naslednje besedne zveze: Frameworks Comparison, CSS Frameworks Comparison, Bootstrap vs Foundation. V angleškem jeziku smo našli veliko več rezultatov kot v slovenskem, vendar pa je bila večina primerjav narejena zelo na kratko, največkrat samo primerjava osnovnih informacij o ogrodjih ali pa primerjava prednosti in slabosti ogrodij. Pri iskanju sorodnih študij smo našli študijo, ki med seboj primerja ogrodja Bootstrap, Foundation in Skeleton. Kocina [16] je v svojem diplomskem delu za analizo izbral naslednja merila: navigacija, tabela, obrazci in gumbi. Ta merila je nato analiziral za posamezno orodje in jih primerjal med sabo ter podal tudi svoje mnenje. Za vsakega izmed njih je podal primer, kako je videti na spletni strani in kako je videti koda, ki jo je uporabil. Za navigacijo je prišel do ugotovitev, da imata tako ogrodje Bootstrap kot tudi ogrodje Foundation že predpripravljeno kodo za navigacijo, kar močno olajša izdelavo menija, saj je lahko v obeh primerih izdelal po videzu in funkciji enak meni. Drugače pa je pri ogrodju Skeleton, saj ta nima predpripravljene kode in je treba posebej izdelati meni in prilagoditi njegov dizajn. Po njegovem mnenju je za izdelavo navigacije najboljše ogrodje Bootstrap, saj omogoča več predpripravljenih primerov in ga je tudi lažje implementirati v kodo. Pri analizi tabel je najprej pri vsakem ogrodju napisal, kako so definirane tabele v kodi. Ugotovil je, da imata ogrodji Bootstrap in Foundation na voljo več različnih tabel, ne. 31.

(43) samo osnovne, medtem ko ima ogrodje Skeleton na voljo samo osnovno tabelo, za katero je v datoteki CSS določeno, kakšen rob ima in kje je postavljen ter kako se obnaša besedilo znotraj tabele. Prišel je do zaključka, da glede videza tabel prednjačita ogrodji Bootstrap in Foundation. Temu je sledila analiza obrazcev, kjer je za vsako ogrodje napisano, kako so obrazci definirani v kodi in kako postavljamo elemente. Ponovno imata ogrodji Bootstrap in Foundation predpripravljeno kodo za obrazce, ogrodje Skeleton pa za postavitev elementov v obrazcu uporablja mrežni sistem. Sledilo je avtorjevo mnenje, v katerem je zapisal, da je pričakoval precej več od vseh ogrodij na področju obrazcev, sploh glede raznih dodatkov pri videzu, in da ga je izmed vseh treh navdušil samo modri rob okoli izbranega vnosnega okna pri ogrodju Bootstrap. Zadnja stvar, ki jo je analiziral, so bili gumbi. Vsa tri ogrodja uporabniku ponujajo predpripravljene kode za gumbe. Ogrodje Bootstrap omogoča največ razredov za oblikovanje lepih in modernih gumbov, in sicer kar 13, ogrodje Foundation omogoča pet razredov za oblikovanje videza gumbov, ogrodje Skeleton pa samo dva razreda. Vsa tri ogrodja so avtorja pozitivno presenetila, saj omogočajo veliko različnih gumbov in s tem uporabnikom tudi prihranijo čas [16]. Na spletni strani Keycdn je objavljen članek o primerjavi ogrodij Bootstrap in Foundation. Jackson je v članku najprej predstavil, kaj so to ogrodja CSS, kaj so prednosti in slabosti uporabe ogrodij ter nato predstavil še ogrodji Bootstrap in Foundation, temu je nato sledila primerjava obeh ogrodij. Predstavil je razlike v sintaksi ogrodij, in sicer sintakso razreda enega stolpca, vsebnik, medijske poizvedbe, ugnezdene stolpce, »offset« stolpce. Za vsako izmed teh je podal primer videza kode pri obeh ogrodjih in na koncu primerjal še njun dejavni razvoj [4]. Tudi Temere je v svoji študiji analiziral in primerjal ogrodji Bootstrap in Foundation. Analiziral je uporabniške vmesnike, optimizacijo učinkovitosti projektnih spletnih strani, skupnost in podporo uporabnikom, preizkušanje brskalnikov in hitrost nalaganja spletnih strani [24]. Tako bomo tudi v svojem diplomskem delu kot merila analize vzeli osnovne elemente, in sicer navigacijo, obrazce in gumbe, saj lahko te elemente najdemo povečini na vsaki spletni strani. Analizirali bomo njihovo delovanje in prikaz na spletnih straneh, ali je za. 32.

(44) posamezni element že pripravljena koda in koliko različnih možnosti videza elementa je omogočeno ter kako določen element implementiramo v kodo. Merila, ki jih bomo analizirali, bodo tudi količina, kakovost in razumljivost dokumentacije, ki je na voljo za vsako ogrodje. Analizirali bomo tudi skupnost in podporo uporabnikom ter dejavni razvoj, in sicer tako, da bomo primerjali dejavnost vseh ogrodij na spletni strani GitHub, torej koliko ima posamezno ogrodje ogledov, koliko ima všečkov, koliko prenosov ter število težav, ki jih imajo uporabniki z ogrodjem. Eno izmed meril, ki jih bomo analizirali, bo tudi čas, ki ga namenjamo učenju posameznega ogrodja, ta čas pa bo obsegal tako čas učenja uporabe ogrodja kot tudi čas razvoja rešitve z določenim ogrodjem. Izvedli bomo tudi statično analizo programske kode, s katero bomo imeli pregled nad številom datotek in številom vrstic kode, ki jih ogrodje vsebuje. Merila, ki jih bomo analizirali, so vizualno prikazana v spodnji shemi (Slika 4.1).. Merila analize Osnovni elementi. Dokumentacija. Skupnost, podpora in dejavni razvoj. Navigacija. Ogledi. Obrazci. Všečki. Gumbi. Prenosi. Čas učenja. Statična analiza programske kode. Težave. Slika 4.1: Shema meril analize. Na podlagi zgornjih meril (z izjemo statične analize kode) bomo tudi ovrednotili ogrodja. Pridobljene ocene ogrodij nam bodo podale informacije o tem, katero ogrodje je najboljša 33.

(45) izbira. Na osnovi opravljene analize ogrodij v prejšnjem poglavju smo za osnovne elemente in dokumentacijo definirali merski lestvici za ocenitev ogrodij. Tako smo pri osnovnih elementih (navigacija, obrazci, gumbi) upoštevali naslednje parametre: ali ogrodje ponuja opis elementov, navodila za uporabo elementov, slikovne primere, več različnih stilov oblikovanja elementov ter kodo za implementacijo prikazanih primerov elementov. Glede na te parametre smo nato sestavili pogoje, ki jim morajo ogrodja ustrezati, oziroma temu primerne ocene (Tabela 4.1).. Tabela 4.1: Pogoji za ocenitev osnovnih elementov ogrodij Ocena. Opis ocene. 1 – nezadostno. Ogrodje ne ponuja opisa, navodil za uporabo, slikovnih primerov, več različnih stilov oblikovanja in kod za implementacijo prikazanih primerov osnovnih elementov ogrodij.. 2 – zadostno. Ogrodje ponuja kratke opise in kratka navodila za uporabo osnovnih elementov s kratkimi primeri kod za uporabo osnovnih elementov.. 3 – dobro. Ogrodje ponuja kratke opise in kratka navodila za uporabo osnovnih elementov s kratkimi primeri kod za uporabo osnovnih elementov in slikovnimi primeri.. 4 – prav dobro. Ogrodje ponuja osnovni opis elementov z navodili za uporabo in slikovnimi primeri ter kodo za implementacijo prikazanih primerov.. 5 – odlično. Ogrodje ponuja podrobne opise in podrobna navodila za uporabo osnovnih elementov, predstavljeni so slikovni primeri osnovnih elementov in več različnih stilov oblikovanja, vključno s kodo za implementacijo prikazanih primerov.. Za ocenitev dokumentacije smo definirali podobno lestvico (Tabela 4.2), upoštevali pa smo, kdaj je bila dokumentacija nazadnje posodobljena, ali so vključeni opisi osnovnih in naprednih funkcionalnosti, ali so vključeni različni stili oblikovanja in slikovni primeri. 34.

(46) uporabe funkcionalnosti ter primeri kod za implementacijo funkcionalnosti. Na podlagi upoštevanih parametrov smo zapisali pogoje in temu primerne ocene.. Tabela 4.2: Pogoji za ocenitev dokumentacije ogrodij Ocena. Opis ocene. 1 – nezadostno. Ogrodje ne vsebuje dokumentacije, opisov funkcionalnosti in njihove uporabe ter primerov implementacije kod. Dokumentacija se ne posodablja.. 2 – zadostno. Ogrodje vsebuje dokumentacijo z osnovnimi funkcionalnostmi, ki so predstavljene na kratko in s kratkimi primeri uporabe. Dokumentacija se ne posodablja.. 3 – dobro. Ogrodje vsebuje dokumentacijo z osnovnimi funkcionalnostmi, dodani so primeri uporabe funkcionalnosti, z vključenimi slikovnimi primeri in primeri kod za implementacijo. Dokumentacija se redko posodablja.. 4 – prav dobro. Ogrodje vsebuje dokumentacijo tako z osnovnimi funkcionalnostmi kot tudi naprednimi, predstavljeni so opisi in uporaba, predstavljeni so slikovni primeri in primeri kod za implementacijo. Dokumentacija se redno posodablja.. 5 – odlično. Ogrodje vsebuje dokumentacijo tako z osnovnimi funkcionalnostmi kot tudi naprednimi, predstavljeni so podrobnejši opisi in uporaba, predstavljeni si slikovni primeri in primeri kod za implementacijo, predstavljeni so tudi različni stili oblikovanja. Dokumentacija se redno posodablja.. Skupnost, podporo in dejavni razvoj ogrodij bomo ocenili na podlagi pridobljenih rezultatov v nadaljevanju. Pri ocenjevanju bomo upoštevali, katero ogrodje ima največ ogledov, všečkov in prenosov (Tabela 4.3).. 35.

(47) Tabela 4.3: Pogoji za ocenitev skupnosti, podpore in dejavnosti ogrodij Ocena. Opis ocene. 3 – dobro. Ogrodje z največjim številom ogledov, všečkov in prenosov.. 4 – prav dobro. Ogrodje s srednjim številom ogledov, všečkov in prenosov.. 5 – odlično. Ogrodje z najmanjšim številom ogledov, všečkov in prenosov.. Za ocenjevanje časa učenja ogrodij nismo izdelali merske lestvice, saj bomo v rezultatih analize podali čas, ki smo ga sami namenili učenju in delu z ogrodji. Takšna analiza namreč ne prikaže realnih rezultatov, zato bomo oceno podali subjektivno.. 36.

(48) 5 PRIMERJAVA. IZBRANIH. SPLETNIH. PROGRAMSKIH. OGRODIJ Na osnovi sheme, ki smo jo ustvarili v prejšnjem poglavju, bomo primerjali ogrodja Semantic UI, UIkit in Skeleton po merilih, ki smo jih določili za analizo.. 5.1 Navigacija. Primerjali smo implementacijo in videz izdelane navigacije z vsemi tremi izbranimi ogrodji. Za navigacijo na spletni strani, ustvarjeni z ogrodjem Semantic UI, smo izbrali preprost meni, kjer se po določeni širini vsebina postavi ena pod drugo. Ogrodje Semantic UI namreč ne ponuja takšnega odzivnega menija, kjer bi lahko vsebino skrili v gumb in bi se ta po določeni širini prikazal. Koda, ki smo jo uporabili za navigacijo (Koda 5.1): <div class="ui secondary stackable menu"> <a class="active item" href="index.html">DOMOV</a> <a class="item" href="top2017.html">TOP 2017</a> <a class="item" href="top2018.html">TOP 2018</a> <a class="item" href="vnos_filmov.html">VNOS FILMOV</a> </div> Koda 5.1: Koda, uporabljena za navigacijo – ogrodje Semantic UI. Beseda »stackable« v kodi pomeni, da se bo vsebina menija ob določeni širini postavila druga pod drugo, kar je že določeno v datoteki CSS. Videz menija, ki je uporabljen na spletni strani, je prikazan spodaj (Slika 5.1):. 37.

(49) Slika 5.1: Videz menija z uporabo ogrodja Semantic UI. Meni, ki smo ga izbrali na spletni strani, ustvarjeni z ogrodjem UIkit, je takšen, da se po določeni širini vsebina skrije, pojavi pa se gumb, ob kliku nanj pa se navzdol pojavi vsebina menija. Koda, ki smo jo uporabili za navigacijo (Koda 5.2):. 38.

(50) <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar> <div class="uk-navbar-left"> <ul class="uk-navbar-nav"> <li class="uk-active ad_navtext_toggle"><a href="index.html">Domov</a></li> <li class="uk-parent ad_navtext_toggle"><a href="top2017.html">Top 2017</a></li> <li class="uk-parent ad_navtext_toggle"><a href="top2018.html">Top 2018</a></li> <li class="uk-parent ad_navtext_toggle"><a href="vnos_filmov.html">Vnos filmov</a></li> <li class="ad_navicon_toggle"><a href="" uk-icon="icon: menu"></a></li> <div uk-dropdown="mode: click"> <ul class="uk-nav uk-dropdown-nav"> <li class="uk-nav-header"><a href="index.html">Domov</a></li> <li class="uk-nav-divider"></li> <li class="uk-nav-header"><a href="top2017.html">Top 2017</a></li> <li class="uk-nav-divider"></li> <li class="uk-nav-header"><a href="top2018.html">Top 2018</a></li> <li class="uk-nav-divider"></li> <li class="uk-nav-header"><a href="vnos_filmov.html">Vnos filmov</a></li> <li class="uk-nav-divider"></li> </ul> </div> </ul> </div> </nav> Koda 5.2: Koda, uporabljena za navigacijo – ogrodje UIkit. Prvi del kode predstavlja meni, ki se prikaže na večjih zaslonih, drugi del, ki vsebuje razred z imenom »uk-nav uk-dropdown-nav«, pa predstavlja meni, ki se prikaže kot gumb na manjših napravah, znotraj katerega je vsebina menija. Spodaj je prikazan videz menija na spletni strani (Slika 5.2).. 39.

(51) Slika 5.2: Videz menija z uporabo ogrodja UIkit. Za ogrodje Skeleton smo izdelali meni, ki ima podobno postavitev in videz kot pri drugih dveh ogrodjih, ob določeni širini pa se elementi menija postavijo v spodnjo vrstico (Slika 5.3). Meni smo izdelali z uporabo seznama. Koda, ki smo jo uporabili za navigacijo (Koda 5.3):. 40.

No results found