Development of web page with materialize CSS framework

Full text

(1)UNIVERZA V MARIBORU FAKULTETA ZA ELEKTROTEHNIKO RAČUNALNIŠTVO IN INFORMATIKO. JOVAN DRAŠKOVIĆ. RAZVOJ SPLETNE STRANI Z OGRODJEM MATERIALIZE CSS. DIPLOMSKO DELO. Maribor, december 2019.

(2) UNIVERZA V MARIBORU FAKULTETA ZA ELEKTROTEHNIKO RAČUNALNIŠTVO IN INFORMATIKO. JOVAN DRAŠKOVIĆ. RAZVOJ SPLETNE STRANI Z OGRODJEM MATERIALIZE CSS. DIPLOMSKO DELO. Maribor, december 2019.

(3) RAZVOJ SPLETNE STRANI Z OGRODJEM MATERIALIZE CSS DIPLOMSKO DELO. Študent:. Jovan Drašković. Študijski program:. Univerzitetni študij Medijske komunikacije. Smer:. Vizualna komunikacija. Mentor:. doc. dr. Sašo Karakatič. i.

(4) ZAHVALA. Zahvaljujem se doc.dr. Sašu Karakatiču, za strokovno pomoč in razumevanje, ne samo skozi izdelavo diplomskega dela, ampak tudi skozi celoten študij. Zahvaljujem se državi Sloveniji ter Univerzi v Mariboru, za priložnost za brezplačen študij in izjemno življenjsko izkušnjo, ki mi je odprlo množico novih življenjskih poti. Zahvaljujem se prijateljem, ki so mi polepšali čas, in ustvarili mi nepozabne spomine. Največ se zahvaljujem svoji družini, ki je, z brezpogojno podporo, razlog da sem z lahkoto premagal ovire in postal človek, ki sem danes.. Zahvalio bih se docentutu dr. Sašu Karakatiču, za stručnu pomoć i potpuno razumijevanje, ne samo u toku izrade diplomskog rada, nego i u toku studiranja. Zahvalio bih se državi Sloveniji i Univerzitetu u Mariboru, za pružanje besplatnog studiranja i izvanrednog životnog iskustva, koje mi je otvorilo mnoge druge putanje. Zahvalio bih se prijateljima, koji su mi uljepšali vrijeme, učinili ga boljim i trajnijim.. Najbitnija zahvalnica mojoj porodici, bez koje ne bih bio to što sam danas, bez čije podrške ne bih prešao mnoge prepreke. Beskrajno zahvalan šuncu, koje je naišlo i vječno me ogrijalo.. Hvala. ii.

(5) RAZVOJ SPLETNE STRANI Z OGRODJEM MATERIALIZE CSS. Ključne besede: ogrodje, oblikovanje, CSS, HTML, spletna stran, Materialize CSS, Bootstrap. Povzetek:. V diplomski nalogi je predstavljeno ogrodje Materialize CSS in razvoj spletne aplikacije s pomočjo letega. Prvi del diplomske naloge opisuje ustvarjanje in razvoj ogrodja Materialize CSS, način delovanja na podlagi vizualnega jezika Material Design in komponente ogrodja. Predstavljena je primerjava ogrodja Materialize CSS z ogrodjem Bootstrap, ki je eno od vodilnih na področju razvoja spletnih strani in aplikacij. Izpostavljene so prednosti in slabosti obeh ogrodij. Primerjava ogrodij je pokazala, da je izbira primernega ogrodja odvisna od potreb uporabnika, čeprav sta obe ogrodji kakovostni in ponujata dobre možnosti za razvoj vizualne podobe v primeru spletnih in mobilnih aplikacij.. iii.

(6) DEVELOPMENT OF WEB PAGES WITH A FRAMEWORK MATERIALIZE CSS. Key words: framework, design, CSS, HTML, website, Materialize CSS, Bootstrap. Abstract:. The diploma thesis presents the Materialize CSS framework and the development of a web application with Materialize CSS framework and its Material Design visual language. The first part of the diploma thesis describes the creation and development of web page with the Materialize CSS framework, development principles based on visual language Material Design and the component of the framework itself. A comparison of the Materialize CSS framework and the Bootstrap framework, as one of the leaders in website and application development, is presented. The advantages and disadvantages of both frames, Materialize CSS and Bootstrap, are also presented. When testing and studying both frameworks, it is concluded that everything depends on the developer and his habits, although both frameworks offer good support in developing the visual appearance of websites and mobile applications.. iv.

(7) KAZALO VSEBINE 1. 2. UVOD .............................................................................................................................................. 1 1.1. Predstavitev ciljev .................................................................................................................... 2. 1.2. Predstavitev uporabljenih metod ............................................................................................. 2. TEORETIČNI DEL ............................................................................................................................... 3 2.1. Zgodovina razvoja spletnih strani pred ogrodji ......................................................................... 3. 2.1. Nastanek in razvoj ogrodja Materialize CSS .............................................................................. 4. 2.2. Komponente ............................................................................................................................ 6. 2.2.1. Značke (angl. Badges) ....................................................................................................... 6. 2.2.2. Gumbi (angl. Buttons) ....................................................................................................... 6. 2.2.3. Navigacijska zrna (angl. Breadcrumbs) .............................................................................. 7. 2.2.4. Kartice (angl. Cards).......................................................................................................... 8. 2.2.5. Zbirke (angl. Collections) ................................................................................................... 9. 2.2.6. Noga (angl. Footer) ........................................................................................................... 9. 2.2.5. Ikone (angl. Icons)........................................................................................................... 10. 2.2.6. Navigacijska vrstica (angl. Navbar).................................................................................. 11. 2.2.7. Številčenje strani (angl. Pagination) ................................................................................ 11. 2.2.8. Prednalagalnik (angl. Preloader) ..................................................................................... 12. 2.3. CSS ......................................................................................................................................... 13. 2.3.1. Mreža (angl. Grid)........................................................................................................... 13. 2.3.2. Barve .............................................................................................................................. 14. 2.3.3. Pomoč (angl. Helpers) ..................................................................................................... 15. 2.3.4. Mediji ............................................................................................................................. 16. 2.3.5. Utripanje (angl. Puls) ...................................................................................................... 17. 2.3.6. Sass (angl. Syntactically awesome style sheets) .............................................................. 17. 2.3.7. Sence ............................................................................................................................. 18. 2.3.8. Tabele ............................................................................................................................ 19. 2.4. Javascript ............................................................................................................................... 20. 2.4.1. Tekoči trak (angl. Carousel)............................................................................................. 20. 2.4.2. Odkrivanje značilnosti (angl. FeatureDiscovery) .............................................................. 21. 2.4.3. Namigi (angl. Tooltips) .................................................................................................... 21. 2.6. HTML 5 .................................................................................................................................. 23 v.

(8) 3. 2.7. CSS 3 ...................................................................................................................................... 23. 2.8. JavaScript ............................................................................................................................... 24. PRIMERJAVA OGRODJA MATERIALIZE CSS IN OGRODJA BOOTSTRAP.............................................. 25 3.1. Ključne razlike ........................................................................................................................ 25. 3.2. Nastavitev .............................................................................................................................. 25. 3.2.1. Nastavitev ogrodja Materialize CSS................................................................................. 25. 3.2.2. Nastavitev ogrodja Bootstrap ......................................................................................... 27. 3.4 4. Slabosti .................................................................................................................................. 30. PRAKTIČNI PRIMER ........................................................................................................................ 31 4.1. Predstavitev implementirane spletne strani ........................................................................... 31. 4.2. Prikaz razlik in rezultati........................................................................................................... 32. 4.3. Delovanje na različnih napravah ............................................................................................. 36. 4.4. Primerjava razvoja.................................................................................................................. 41. 5. ZAKLJUČEK ..................................................................................................................................... 44. 6. VIRI IN LITERATURA ....................................................................................................................... 45. vi.

(9) KAZALO SLIK. Slika 2.1 Izvirni predlog Tima Barnersa ..................................................................................................... 4 Slika 2.2 Primer značk .............................................................................................................................. 6 Slika 2.3 Primer gumbov .......................................................................................................................... 7 Slika 2.4 Primer navigacijskih zrn ............................................................................................................. 8 Slika 2.5 Primer kartic .............................................................................................................................. 8 Slika 2.6 Primer zbirke ............................................................................................................................. 9 Slika 2.7 Primer noge ............................................................................................................................. 10 Slika 2.8 Primer različnih velikosti ikon................................................................................................... 11 Slika 2.9 Primer navigacijskih vrstic ........................................................................................................ 11 Slika 2.10 Primer številčenja strani......................................................................................................... 12 Slika 2.11 Primer prednalagalnika .......................................................................................................... 13 Slika 2.12 Primer palete barv ................................................................................................................. 15 Slika 2.13 Primer senc z oznako z-depth................................................................................................. 18 Slika 2.14 Primer tabele ......................................................................................................................... 19 Slika 2.15 Primer namiga od spodaj ....................................................................................................... 22 Slika 3.1 Podpora brskalnikov ogrodja Bootstrap ................................................................................... 28 Slika 4.1 Spletna aplikacija, narejena z ogrodjem Materialize CSS .......................................................... 32 Slika 4.2 Prikaz aplikacije za primerjanje ogrodja ................................................................................... 33 Slika 4.3 Prikaz vsebine aplikacije, narejene z ogrodjem Materialize CSS ................................................ 34 Slika 4.4 Spletna aplikacija, narejena z ogrodjem Bootstrap ................................................................... 35 Slika 4.5 Prikaz vsebine aplikacije, narejene z ogrodjem Bootstrap......................................................... 36 Slika 4.6 Videz aplikacije na mobilnih napravah v primeru ogrodja Materialize CSS ................................ 37 Slika 4.7 Videz aplikacije na napravah velikosti zaslona od 600 px .......................................................... 38 Slika 4.8 Videz aplikacije za naprave do 576 px pri ogrodju Bootstrap .................................................... 39 Slika 4.9 Videz aplikacije za naprave od 576 px do 992 px pri ogrodju Bootstrap .................................... 40 Slika 4.10 Sistem mreže 12 stolpcev....................................................................................................... 41 Slika 4.11 Postavitve za popoln videz aplikacije na vseh velikostih zaslona ............................................. 41 Slika 4.12 Bootstrapov mrežni sistem .................................................................................................... 42. vii.

(10) 1 UVOD. Z nastankom vse več ogrodij za oblikovanje spletnih strani sta se oblikovanje in implementacija olajšala, razširila in se v zadnjih nekaj letih pospešeno razvijala. Glede na to, da je ogrodje tista osnova, povezava in tudi prvi stik, ki se prikaže uporabniku, je zelo pomembna izbira ogrodja, saj vsako ogrodje ponuja številne prednosti in slabosti. S proučevanjem ogrodja Materialize CSS želim prikazati lastnosti, pa tudi prednosti in slabosti tega ogrodja. Poleg tega je namen prikazati tudi primerjavo z enim od trenutno najpogosteje uporabljenih ogrodij za spletno oblikovanje, Bootstrapom. Materialize CSS in Bootstrap sta ogrodji, ki pomagata, da delo opravimo bolje in hitreje. Ogrodja zagotavljajo šablono za ustvarjanje popolne vizualizacije in postavitve spletne aplikacije. Dajejo osnovno strukturo, v katero vpisujemo kodo, da bi dosegli večjo funkcionalnost sistema. V ogrodjih so vnaprej določene zagonske stvari, datoteke za samodejno nalaganje, datoteke sej ter nekatere datoteke vstopne spletne strani, ki prihranijo čas ustvarjanja aplikacije. Druga možnost je, da vse naredimo ročno, kar nam po nepotrebnem odvzame čas, ki ga lahko uporabimo za razvoj funkcionalnosti aplikacije. Materialize CSS in Bootstrap omogočata, da ne začnemo aplikacije ustvarjati iz nič, in vedno sledita najnovejši tehnologiji in vzorcem ter omogočata ponovno uporabo napisane kode in s tem prihranek časa in denarja.. 1.

(11) 1.1. Predstavitev ciljev. Cilj končnega izdelka, diplomske naloge, je pokazati, kako deluje in za kaj je ogrodje Materialize CSS uporabno, prikazati ponujene funkcionalnosti, odzivnost in pomanjkljivosti ogrodja Materialize CSS v primerjavi z ogrodjem Bootstrap. Prav tako je cilj diplomskega dela implementacija in razvoj spletne strani z ogrodjem Materialize CSS, da se razvoj s tem ogrodjem preizkusi in ovrednoti. V diplomski nalogi je prikazana uporabnost vizualnega jezika Material Design, na katerem temelji ogrodje Materialize CSS.. 1.2. Predstavitev uporabljenih metod. Za teoretični del diplomskega dela sem uporabil deskriptivno metodo oz. analizo spletne literature v angleškem jeziku na temo uporabe in implementacije ogrodja Materialize CSS v kombinaciji z vizualnim jezikom Material Design. Pri praktičnem delu sem uporabil deduktivno metodo, ki bo produkt lastnih rešitev in spoznanj pri ustvarjanju spletne strani s pomočjo ogrodja Materialize CSS. Svoje rezultate sem primerjal z že obstoječimi rešitvami pregleda in uporabe ogrodja Materialize CSS. Praktični preizkus bo opisal vse podrobnosti ogrodja Materialize CSS ter njegove funkcionalnosti in pomanjkljivosti v primerjavi z ogrodjem Bootstrap.. 2.

(12) 2 TEORETIČNI DEL 2.1. Zgodovina razvoja spletnih strani pred ogrodji. Razvoj spletnih straneh se je začel okoli leta 1980. Kot vsi drugi računalniški sistemi in aplikacije je bil potreben grafični vmesnik, da je splošna populacija začela razumeti potencial interneta. Kot pri vsaki novi stvari na spletu obstaja začetna skeptičnost, zato so uporabniki na začetku potrebovali čas, da razbijejo predsodke pred svetovnim spletom (angl. World Wide Web), dokler se v začetku devetdesetih let ni pojavil spletni brskalnik kot dokaz o delovanju. In čeprav je prišlo do dramatičnih izboljšav spletne tehnologije in estetike, nekatere najzgodnejše tehnike spletnega oblikovanja vztrajajo še vse od takrat. [3] Svetovni splet se je znatno razvil z uvedbo brskalnika Mosaic. Kmalu zatem so podjetja začela prepoznavati komercialni potencial spleta. Omrežna infrastruktura je rasla, da bi lahko sprejela velik priliv spletnih aktivnosti. [3] Leta 1989 je Sir Tim Berners-Lee (takratni sodelavec v laboratoriju CERN v Evropi) naredil svoj koncept računalniške platforme, ki bi lahko olajšala sodelovanje med raziskovalci, ki se nahajajo na različnih koncih sveta. To je leta 1990 privedlo do izuma jezika za označevanje hiperbesedila (angl. HTML – Hypertext Markup Language). Hiperbesedilo, zasnovan na močnem standardnem splošnem označevalnem jeziku (angl. SGML – Standard Generalized Markup Language), je postal temelj svetovnega spleta in ostal jedro njegovega kodiranja in infrastrukture. Standard je omogočil postavitev elementov spletnih strani, ki jih je mogoče razumeti in na njih vplivati preko povezanih omrežij. [3]. Večji del spleta je bil sestavljen iz besedila in tabel. Čeprav ni bil prvi brskalnik, je Mosaic definiral kombiniranje slik in besedila in določil pot prihodnosti spletnega oblikovanja. Od hierarhije menijev do številnih pisav in barvnih shem je spletno oblikovanje preraslo v umetniško obliko, ki je združila tehnologijo z estetsko občutljivostjo. [3] 3.

(13) Slika 2.1 Izvirni predlog Tima Barnersa Vir: https://webfoundation.org/about/vision/history-of-the-web/. 2.1 Nastanek in razvoj ogrodja Materialize CSS Materialize CSS je ogrodje za razvijanje spletnih strani, ki temelji na vizualnem jeziku Material Design. Oblikovali in ustvarili so ga pri podjetju Google leta 2014. Material Design združuje načela uspešnega oblikovanja s tehnologijo. Googlov cilj je bil, razviti sistem oblikovanja, ki omogoča enotno uporabniško izkušnjo v vseh izdelkih na kateri koli platformi. Google je izpopolnil animacije in prehode, da bi uporabnikom omogočil lažjo izkušnjo. [1] Metafora material določa odnos med prostorom in gibanjem. Ideja je, da se tehnologija navdihuje s papirjem in črnilom, da bi se olajšalo inovacijo in ustvarjanje.. 4.

(14) Površine in robovi nudijo znane vizualne napotke, ki uporabnikom omogočajo hitro razumevanje tehnologije zunaj fizičnega sveta. Elementi ustvarjajo občutek hierarhije in osredotočenosti. Gibanje elementov omogoča uporabniku vzporednico med tistim, kar vidi na zaslonu, in resničnim svetom. Ta način omogoča uporabniku, da začuti površino in se poglobi v neznano tehnologijo. [1] Materialize CSS je knjižnica komponent, ki je ustvarjena s pomočjo CSS, JavaScripta in HTML. Materialize CSS spoštuje sodobna načela spletnega oblikovanja, neodvisnost naprave in degradiranje. Materializacija je po zasnovi zelo minimalna in naravna. Podpira sence in veliko paleto barv. Barve in odtenki ostajajo enaki na vseh platformah in napravah. [1] Materialize CSS ima vgrajeno odzivnost za različne naprave in je uporaben na vseh brskalnikih. Vsebuje izboljšane in specializirane funkcije, kot so: kartice, zavihki, navigacijska zrna, značke, pozdravi ... Ponuja nove različice običajnih kontrol, kot so: gumbi, potrditvena polja in besedilna polja. Ima vgrajeno odzivno oblikovanje, da se spletna stran, ustvarjena z ogrodjem Materialize CSS, preoblikuje po velikosti naprave. Spletna mesta, ustvarjena z ogrodjem Materialize CSS, so popolnoma kompatibilna z računalniki, tabličnimi računalniki in mobilnimi napravami. [1]. 5.

(15) 2.2 Komponente 2.2.1 Značke (angl. Badges) Značke vas lahko obvestijo, da obstajajo nova ali neprebrana sporočila ali obvestila. Lahko jih prilagajamo in spreminjamo po velikosti, barvi in pomembnosti. [2]. Slika 2.2 Primer značk Vir: https://materializecss.com/badges.html. <ul class="collection"> <a href="#!" class="collectionitem"><span class="badge">2</span>Jovan</a> <a href="#!" class="collectionitem"><span class="new badge">16</span>Milica</a> <a href="#!" class="collection-item">Aleš</a> <a href="#!" class="collectionitem"><span class="badge">250</span>Drago</a> </ul>. 2.2.2 Gumbi (angl. Buttons) V vizualnem jeziku Material Design so opisane 3 glavne tipke gumbov. Dvignjeni gumb je standardni gumb, ki označuje dejanja in daje globino ravni strani. Plavajoči gumb krožnega delovanja je namenjen zelo pomembnim funkcijam. Ravni gumbi se običajno uporabljajo znotraj elementov, ki že imajo globino, kot so kartice ali modali. [2]. 6.

(16) Dvignjeni gumb (angl. Raised button): <a class="waves-effect btn">Gumb 1</a>. Plavajoči gumb (angl. Floating button): <a class="btn-floating btn-large"> <i class="material-icons">dodaj</i></a>. Ravni gumbi (angl. Flat buttons): <a class="waves-effect btn">Gumb 3</a>. Ravni gumbi se uporabljajo za zmanjševanje prekomernega plastenja, da ne bi prišlo do preveč prekrivajočih se senc. [2]. Slika 2.3 Primer gumbov Vir: https://materializecss.com/buttons.html. 2.2.3 Navigacijska zrna (angl. Breadcrumbs) Navigacijska zrna so dober način za prikaz trenutne lokacije na spletni strani ali v aplikaciji. Običajno se uporabljajo, če imamo več plasti vsebine: [2] <nav> <div class="nav-wrapper"> <div class="col"> <a href="#!" class="breadcrumb">Prvi</a> <a href="#!" class="breadcrumb">Drugi</a> <a href="#!" class="breadcrumb">Tretji</a> </div> </div> </nav>. 7.

(17) Slika 2.4 Primer navigacijskih zrn Vir: https://materializecss.com/breadcrumbs.html. 2.2.4 Kartice (angl. Cards) Kartice so priročno sredstvo za prikaz vsebine. Prav te so primerne za predstavitev podobnih predmetov, katerih velikost ali podprta dejanja se lahko razlikujejo, kot so npr. fotografije z napisi spremenljive dolžine: [2] <div class="row"> <div class="col m6"> <div class="card "> <div class="card-content white-text"> <span class="card-title">Naslov kartice</span> <p>Besedilo znotraj kartice ...</p> </div> <div class="card-action"> <a href="#">Povezava 1</a> <a href="#">Povezava 2</a> </div> </div> </div> </div>. Slika 2.5 Primer kartic Vir: https://materializecss.com/cards.html 8.

(18) 2.2.5 Zbirke (angl. Collections) Omogočajo, da izberemo z liste predmetov: [2] <ul class="collection"> <li class="collection-item">Drago</li> <li class="collection-item">Milica</li> <li class="collection-item">Simon</li> <li class="collection-item">Grega</li> </ul>. Slika 2.6 Primer zbirke Vir: https://materializecss.com/collections.html. 2.2.6 Noga (angl. Footer) Noga je odličen način za organizacijo številnih navigacij po straneh in informacij na koncu strani. Uporabnik bo jo pogledal, ko bo končal z uporabo trenutne strani ali ko bo poiskal dodatne informacije o spletnem mestu: [2] <footer class="page-footer red"> <div class="container"> <div class="row"> <div class="col l12"> <h5 class="white-text">Vsebina noge</h5> <p class="white-text ">Za urejanje besedila lahko uporabljamo vrstice in stolpce.</p> </div> <div class="col offset-l2 l12"> <h5 class="white-text">Povezave</h5> <ul> 9.

(19) <li><a class="white-text href="#!">Povezava 1</a></li> <li><a class=" white-text " href="#!">Povezava 2</a></li> <li><a class=" white-text " href="#!">Povezava 3</a></li> <li><a class=" white-text " href="#!">Povezava 4</a></li> </ul> </div> </div> </div> <div class="footer-copyright"> <div class="container"> © 2014 Copyright Text <a class=" white-text" href="#!">Več povezav ...</a> </div> </div> </footer>. Slika 2.7 Primer noge Vir: https://materializecss.com/footer.html. 2.2.5 Ikone (angl. Icons) Google je dal na voljo 932 ikon. Če želite uporabljati te ikone, morate povezavo za ikone vključiti v <head> svoje HTML kode: [2] <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel ="stylesheet">. Če želite uporabiti te ikone, uporabite razred material-icons in kot besedilno vsebino podajte ime ikone v angleškem jeziku, kot je podano na uradni spletni strani: [2]. 10.

(20) <i class="material-icons">assessment</i>. V tem primeru pomeni assessment ime ikone.. Slika 2.8 Primer različnih velikosti ikon Vir: https://materializecss.com/icons.html. 2.2.6 Navigacijska vrstica (angl. Navbar) Navigacijska vrstica je prikazana z oznako HTML5 <nav>. Znotraj priporočenega zabojnika sta dva glavna dela navigacijske vrstice: logotip ali povezava do blagovne znamke in povezave za krmarjenje. Te povezave lahko poravnate na levo ali na desno: [2] <nav> <div class="nav-wrapper red" style="padding-left: 0.625rem;"> <a href="#" class="brand-logo">Logo</a> <ul id="nav" class="right"> <li><a href="sass.html">Sass</a></li> <li><a href="komponente.html">Komponente</a></li> <li><a href="javascript.html">JavaScript</a></li> </ul> </div> </nav>. Slika 2.9 Primer navigacijskih vrstic Vir: https://materializecss.com/navbar.html. 2.2.7 Številčenje strani (angl. Pagination). 11.

(21) Dodajte povezave na strani, ki bodo pomagale razdeliti dolgo vsebino na krajše in lažje razumljive sklope: [2] <ul class="pagination"> <li class="enabled"> <a href="#!"><i class="material-icons">chevron_left</i></a> </li> <li class="active"><a href="#!">1</a></li> <li class="waves-effect"><a href="#!">2</a></li> <li class="waves-effect"><a href="#!">3</a></li> <li class="waves-effect"><a href="#!">4</a></li> <li class="waves-effect"><a href="#!">5</a></li> <li class="waves-effect"> <a href="#!"><i class="material-icons">chevron_right</i></a> </li> </ul>. Slika 2.10 Primer številčenja strani Vir: https://materializecss.com/pagination.html V tem primeru, chevrolet_left pomeni ime ikone ki je uporabljamo.. 2.2.8 Prednalagalnik (angl. Preloader) Če imate vsebino, ki se bo dolgo nalagala, morate uporabnikom posredovati povratne informacije. Zaradi tega se uporablja prednalagalnik: [2]. <div class="progress"> 12.

(22) <div class="determinate" style="width: 40%"></div> </div>. Slika 2.11 Primer prednalagalnika Vir: https://materializecss.com/preloader.html. 2.3 CSS 2.3.1 Mreža (angl. Grid) Materialize CSS uporablja 12-stolpčni mrežni sistem. Mreža pomaga urediti stran na urejen in preprost način. Razred container ni izključno del mreže, vendar je pomemben pri postavitvi vsebine. Omogoča centriranje strani, tako da nastavi stran na 70 % širine okna. [2] Zaradi standardne mreže 12 stolpcev bo ne glede na velikost brskalnika vsak od teh stolpcev enake širine. [2] Koda za uporabo 12-stolpčne mreže: <div class="row"> <div class="col <div class="col <div class="col <div class="col <div class="col <div class="col <div class="col <div class="col <div class="col <div class="col <div class="col <div class="col </div>. s1">1</div> s1">2</div> s1">3</div> s1">4</div> s1">5</div> s1">6</div> s1">7</div> s1">8</div> s1">9</div> s1">10</div> s1">11</div> s1">12</div>. 13.

(23) To je primer, kako ustvariti postavitve za vse velikosti zaslona: <div class="row"> <div class="grid-example col l12"> <span class="flow-text">Vedno polna širina (col l12).</span> </div> <div class="grid-example col s6"> <span class="flowtext">Polna širina na mobilnih napravah (col s6).</span> </div> </div>. 2.3.2 Barve Materialize CSS ima lastno barvno paleto, ki temelji na osnovnih barvah Material Designa. Vsaka od teh barv je določena z osnovnim barvnim razredom in neobveznim razredom za zatemnitev in osvetlitev. [2]. 14.

(24) Za primer: paleta barv za rdečo, roza in vijolično:. Slika 2.12 Primer palete barv Vir: https://materializecss.com/color.html. <div class="card-panel pink darken-4">kartica, obarvana s teal lighten2</div>. 2.3.3 Pomoč (angl. Helpers) Materialize CSS ima vgrajene pomočnike, ki omogočajo lažjo in hitrejšo izdelavo spletnih strani ter uskladitev strani. Omogočajo tudi prijaznejšo uporabo spletne strani ali aplikacije. Stvari lahko preprosto centriramo vertikalno in horizontalno. [2] <div> <h5 class="left-align">Tole bi moralo biti poravnano levo.</h5> </div> <div>. 15.

(25) <h5 class="right-align"> Tole bi moralo biti poravnano desno.</h5> </div> <div> <h5 class="center-align"> Tole bi moralo biti poravnano sredinsko.</h5> </div> </div>. Stvari hitro premaknemo na eno stran, levo ali desno (angl. float): <div class="left">...</div> <div class="right">...</div>. Enostavni razredi za skrivanje/prikazovanje vsebine na določenih velikostih zaslona: [2] .hide. Skrito za vse naprave. .hide-on-small-only. Skrito samo za mobilne naprave. .hide-on-med-only. Skrito za tablične računalnike. .hide-on-med-and-down. Skrito za tablične računalnike in manjše naprave. 2.3.4 Mediji Slike lahko organiziramo na različne načine. Če želite, da se slike prilagodijo velikosti na širino strani, lahko dodate razred responsive-img v svojo slikovno oznako. Takrat bo slika vedno imela največjo širino: 100 % in višino: samodejno. Če želite, da so slike krožne, jim preprosto dodajte razred circle. [2]. 16.

(26) 2.3.5 Utripanje (angl. Puls) Uporabnika lahko opozorimo na svoje gumbe z utripanjem. Svojemu gumbu preprosto dodamo razred utripanje. Opomba: To je mišljeno za plavajoče gumbe, zato morda ne deluje popolnoma pri vsaki komponenti. [2] <a class="btn-floating pulse"><i class="material-icons">menu</i></a>. 2.3.6 Sass (angl. Syntactically awesome style sheets) Ko uporabljate Sass, lahko zelo hitro spremenite barvno shemo svojega spletnega mesta: [2] $primary-color: color("materialize-teal", "darken-2") !default; $primary-color-light: false !default; $primary-color-dark: false !default; @if not $primary-color-light { $primary-color-light: lighten($primary-color, 45%); } @if not $primary-color-dark { $primary-color-dark: darken($primary-color, 25%); } $secondary-color: color("blue", "lighten-1") !default; $success-color: color("green", "base") !default; $error-color: color("black", "base") !default; $link-color: color("light-pink", "lighten-4") !default;. Na voljo imamo 3 vnaprej pripravljene poizvedbe za 3 standardne velikosti zaslona, ki jih lahko uporabimo v datotekah Sass. [2] Majhni zasloni so opredeljeni tako, da imajo največjo širino 600 px. Srednji zasloni imajo največjo širino 992 px in veliki zasloni imajo največjo širino 993 px. Zelo velik zaslon ima opredeljeno najmanjšo širino 1200 px. [2] @media #{$small-and-down} { // za majhne zaslone in navzdol @media #{$medium-and-up} { // srednji in večji zasloni } @media #{$medium-and-down} { // za srednje zaslone in navzdol } 17.

(27) @media #{$large-and-up} { // za velike zaslone in gor } @media #{$extra-large-and-up} { // styles for extra large screens and up }. 2.3.7 Sence V vizualnem jeziku Material Design mora vse imeti določeno z-globino in senco, ki določa, koliko je dvignjen element glede na stran. [2] Učinek sence lahko preprosto nastavimo s HTML oznako razreda z-depth: [2]. Slika 2.13 Primer senc z oznako z-depth Vir: https://materializecss.com/shadow.html <div class="col s12 m2"> <p class="z-depth-1">sence-1</p> </div> <div class="col s12 m2"> <p class="z-depth-2"> sence-2</p> </div> <div class="col s12 m2"> <p class="z-depth-3"> sence-3</p> </div> <div class="col s12 m2"> <p class="z-depth-4"> sence-4</p> </div> <div class="col s12 m2"> <p class="z-depth-5"> sence-5</p> </div>. 18.

(28) 2.3.8 Tabele Tabele so lep način za organizacijo velikih količin podatkov. Pri mobilnih napravah so vse tabele samodejno centrirane ter prilagojene širini zaslona mobilne naprave. Materialize CSS ponuja: črtaste, označene, centrirane in odzivne tabele. [2]. Slika 2.14 Primer tabele Vir: https://materializecss.com/shadow.html. <table> <thead> <tr> <th>Ime</th> <th>Starost</th> <th>Višina</th> </tr> </thead> <tbody> <tr> <td>Marko</td> <td>25 let</td> <td>188 cm</td> </tr> <tr> <td>Drago</td> <td>23 let</td> <td>191 cm</td> </tr> <tr> 19.

(29) <td>Tina</td> <td>26 let</td> <td>178 cm</td> </tr> </tbody> </table>. 2.4 Javascript Googlova ekipa je razvila različne kode Javascripta za različne funkcije, zaradi katerih je spletno mesto bolj funkcionalno in uporabniku prijaznejše. V nadaljevanju je nekaj teh kod predstavljenih. [2] 2.4.1 Tekoči trak (angl. Carousel) Tekoči trak je robusten in vsestranski sestavni del, ki je lahko drsnik slike, vrtiljak predmeta ali prijazna izkušnja na začetku spletnega mesta. Omogočen je premik na dotik, zaradi česar je uporaba na mobitelu še posebej gladka. [2] <div class="carousel"> <a class="carouselitem" href="#dva"><img src="https://something.com/250/narava"></a> <a class="carouselitem" href="#tri"><img src="https://something.com/250/narava"></a> <a class="carouselitem" href="#štiri"><img src="https://something.com/250/narava"></a > <a class="carouselitem" href="#pet"><img src="https://something.com/250/narava"></a> </div>. Inicializacija: document.addEventListener('DOMContentLoaded', function() { var elems = document.querySelectorAll('.carousel'); var instances = M.Carousel.init(elems, options); }); // Ali z jQuery kodo $(document).ready(function(){. 20.

(30) $('.carousel').carousel(); });. 2.4.2 Odkrivanje značilnosti (angl. FeatureDiscovery) Zagotavlja vrednost in spodbuja povratne obiske, tako da uporabnike seznani z novimi funkcijami v relevantnih trenutkih. [2] Odkrivanje značilnosti ima večji učinek, ko se v relevantnih trenutkih predstavijo pravim uporabnikom. Če se predstavijo v napačnem trenutku napačnim uporabnikom, so lahko vsiljivi in moteči. [2] <a id="menu" class="waves-effect " > <i class="material-icons">menu</i> </a>  <div class="tap-target" data-target="menu"> <div class="tap-target-content"> <h5>Naslov</h5> <p>Besedilo</p> </div> </div>. Inicializacija: <!—Prikaz elementa --> <a id="menu" class="waves-effect " > <i class="material-icons">menu</i> </a>  <div class="tap-target" data-target="menu"> <div class="tap-target-content"> <h5>Naslov</h5> <p>Besedilo</p> </div> </div>. 2.4.3 Namigi (angl. Tooltips). 21.

(31) Namigi so majhni, interaktivni, besedilni namigi za večinoma grafične elemente. Ko uporabljate ikone za dejanja, lahko uporabite namig, da ljudem pojasnite njihovo funkcijo. [2].  <a class="btn tooltipped" data-position="bottom" datatooltip="I am a tooltip">Prekrij z miško za namig<a>. Inicializacija: document.addEventListener('DOMContentLoaded', function() { var elems = document.querySelectorAll('.tooltipped'); var instances = M.Tooltip.init(elems, options); }); // Ali z jQuery kodo $(document).ready(function(){ $('.tooltipped').tooltip(); });. Slika 2.15 Primer namiga od spodaj Vir: https://materializecss.com/tooltips.html. 22.

(32) 2.6. HTML 5. HTML pomeni Hyper Text Markup Language in se uporablja za oblikovanje spletnih strani z označevalnim jezikom. HTML je kombinacija hiperbesedila in označevalnega jezika. Določa povezave med elementi, ki jih vsebuje spletna stran, in strukturo spletne strani. HTML5 je peta in trenutna različica HTML-ja. Ima izboljšan označevalni jezik, ki uvaja programske vmesnike (API-je) in objektni model dokumenta (angl. DOM – Document Object Model). [4]. 2.7. CSS 3. Stilne predloge (angl. CSS – Cascading Style Sheets) so jezik, ki opisuje stil dokumenta HTML. CSS opisuje, kako naj bodo prikazani elementi HTML-ja. CSS je poleg HTML-ja in JavaScript kode temeljna tehnologija pri oblikovanju spletnih in mobilnih aplikacij in temelj svetovnega spleta. Preden je nastal CSS, so HTML oznake vsebovale skoraj vse predstavitvene atribute. Vse barve, pisave, poravnave elementov, meje in velikosti so morali biti v HTML-ju opisani. CSS omogoča avtorjem, da te podatke premaknejo v drugo, neodvisno datoteko. S tem nastane precej enostavnejši HTML dokument. [5] Specifikacije CSS vzdržuje svetovni konzorcij svetovnega spleta (W3C). Na primer: element naslova, definiran z modrim besedilom, je napisan kot: <h1><font color="purple"> Poglavje </font></h1>. Povezava CSS datoteke s HTML datoteko: <head> <link rel="stylesheet" type="text/css" href="mojstil.css"> </head>. 23.

(33) 2.8. JavaScript. Poleg HTML in CSS kode je JavaScript ena od temeljnih tehnologij svetovnega spleta. JavaScript omogoča interaktivne spletne strani in je bistveni del spletnih aplikacij. Večina spletnih strani ima motor za izvedbo JavaScript kode. JavaScript je skriptni programski jezik, ki omogoča izvajanje kompleksnih dejanj na spletni strani. [6] JavaScript lahko: –. shrani uporabne vrednosti znotraj spremenljivke,. –. zažene kodo kot odziv na določene interakcije na spletni strani,. –. izvede operacije na delih besedila (v programiranju znanih kot String),. –. pomaga pri ustvarjanju iger in aplikacij, ki temeljijo na brskalniku,. –. pomaga pri ustvarjanju interaktivnih spletnih elementov,. –. pomaga pri ustvarjanju umetniških stvaritev,. –. pomaga pri ustvarjanju aplikacij za pametne ure,. –. spremeni barvo gumba, ko premaknemo miško nad gumb.. Pri tem je pomembna funkcionalnost, zasnovana na jeziku JavaScript, na strani odjemalca. To so tako imenovani vmesniki za programiranje aplikacij (API-ji), ki nudijo dodatne super moči za uporabo v JavaScript kodi. API-ji tretjih oseb so pripravljeni nabori gradnikov, ki razvijalcu omogočajo izvajanje programov, ki bi jih sicer bilo težko ali nemogoče implementirati. JavaScript kodo implementiramo na naslednji način točno pred zaključnim elementom <head>: [6] <script> // JavaScript se piše tukaj </script>. 24.

(34) 3 PRIMERJAVA OGRODJA MATERIALIZE CSS IN OGRODJA BOOTSTRAP 3.1. Ključne razlike. Bootstrap in Materialize CSS sta ogrodji za razvijanje čelnega dela sistema (angl. frontend). Bootstrap je ogrodje, ki temelji na HTML, CSS in JavaScript kodi, Materialize CSS pa temelji na CSS, predvsem pa na Googlovem vizualnem jeziku in materialnem dizajnu (angl. Material Design). Glavna razlika je v tem, da Bootstrap omogoča več svobode in nadzora nad elementi UX. Materialize CSS se bolj ukvarja s tem, kako naj se elementi UX obnašajo in kako naj izgledajo, kar je za pričakovati, glede na to, da je ogrodje Materialize CSS nastalo na podlagi vizualnega jezika Material Design. [7] Obe knjižnici uporabljata predprocesorje SASS in obe imata komponente z dobro dokumentacijo in primeri. [7] Materialize CSS temelji predvsem na prijazni animaciji in globinah. Tako Bootstrap kot Materialize CSS uporabljata mrežni sistem za razporejanje elementov v prostoru. [7]. 3.2. Nastavitev 3.2.1. Nastavitev ogrodja Materialize CSS. Materialize CSS imamo v dveh različnih oblikah. Izberemo lahko, katero različico želimo, odvisno od želje in strokovnega znanja. [8] Različica Materialize je standardna in ima priložen CSS ter JavaScript začetno datoteko. Ta možnost je namenjena uporabnikom, ki niso seznanjeni s Sassom. [8] Različica Sass vsebuje izvirno datoteko SCSS. Z izbiro te različice imate več možnosti in boljši nadzor nad komponentami, ki jih želite vključiti. V primeru te možnosti boste potrebovali prevajalnik Sass. [8]. 25.

(35) HTML nastavitev: [8] <!DOCTYPE html> <html> <head>  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" re l="stylesheet">  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>  <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body>  <script type="text/javascript" src="js/materialize.min.js"></script> </body> </html>. Omrežje za pošiljanje vsebin (angl. CDN – Content Delivery Network):  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mat erialize/1.0.0/css/materialize.min.css">  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/j s/materialize.min.js"></script>. Materialize CSS ponuja začetne predloge, s katerimi lahko preprosto začnemo s projektom. [8]. 26.

(36) 3.2.2. Nastavitev ogrodja Bootstrap. Bootstrap ima nekaj enostavnih načinov za začetek projekta, od katerih je vsak odvisen od sposobnosti uporabnika in njegovih želja. Ima enako možnost namestitve z Bowerjem: [9] $ bower install bootstrap. Bootstrap lahko namestimo z npm-jem: $ npm install bootstrap@3. Vsi vtičniki za JavaScript zahtevajo vključitev jQueryja, kot je prikazano v predlogi za zagon: [9] <!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initialscale=1, shrink-to-fit=no">  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstr ap/4.3.1/css/bootstrap.min.css" integrity="sha384ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" cross origin="anonymous"> <title>Pozdravljeni</title> </head> <body> <h1>Pozdravljeni<h1>   <script src="https://code.jquery.com/jquery3.3.1.slim.min.js" integrity="sha384q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" cross origin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/um d/popper.min.js" integrity="sha384UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" cross origin="anonymous"></script>. 27.

(37) <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/boot strap.min.js" integrity="sha384JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" cross origin="anonymous"></script> </body> </html>. Bootstrap za sestavljanje CSS in JavaScript kode uporablja Grunt (izvajalec JavaScripta) s priročnimi metodami za delo z ogrodjem. [9] Bootstrap tudi ponuja predloge, ki spodbujajo uporabnike, da prilagodijo projekt potrebam svojih uporabnikov. [9] Bootstrap ima veliko skupnost, na katero se lahko vedno zanesemo pri iskanju rešitev. Podpira tudi večino brskalnikov: [9]. Slika 3.1 Podpora brskalnikov ogrodja Bootstrap Vir: https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/ Internet Explorer 8 in 9 sta prav tako podprta, vendar nekatere brskalniške lastnosti CSS3 in elementi HTML 5 niso podprti v celoti. Internet Explorer 8 poleg tega zahteva uporabo Respond.js, da omogoči podporo medijskim poizvedbam. [9]. 3.3 Prednosti posameznega ogrodja Materialize CSS: [7] –. Zaradi vizualnega jezika Material Design lahko Materialize CSS simulira, kako naj deluje uporabniški vmesnik, če je izdelan iz fizičnega materiala.. –. Podrobnejše in natančnejše barvne palete za ustvarjanje elementov.. –. Novejši, boljša uporaba CSS in JavaScript kod za animacijo in prehode.. –. Ne potrebuje jQueryja. 28.

(38) –. Fokusiran na UI (angl. user interface) komponente.. –. Privzete funkcije zaslona na dotik.. –. Bolj osredotočen na to, kako se elementi UX obnašajo in kako izgledajo, kar je za pričakovati, glede na to, da je nastal na podlagi vizualnega jezika „Material Design“.. Bootstrap: [7] –. Starejši, bolj priljubljen in veliko bolj znan uporabnikom.. –. Ima veliko skupnost za učenje in reševanje težav.. –. Vključuje jQuery.. –. Na spletu je enostavno najti rešitve in podporo.. –. Omogoča več svobode in nadzora nad elementi UX (angl. User Experience).. –. Manj usmerjan k temu, kako naj bi izgledali elementi uporabniškega vmesnika, daje nam moč, da se sami o tem odločimo.. –. Dober za razvijalce, ki potrebujejo določene spremembe uporabniškega vmesnika, vendar ne poznajo dobro jezikov HTML in CSS.. 29.

(39) 3.4. Slabosti. Bootstrap: –. Uporablja vtičnike za animacije, Materialize CSS ima vgrajene animacije.. –. Uporablja jQuery.. –. Paleta barv omejena.. Materialize CSS: –. Ni najboljši za začetnike. Komponente JavaScripta so nekoliko kritične, z njimi se ne moremo igrati kot pri ogrodju Bootstrap.. –. Trenutna podpora za ogrodje Materialize CSS je slabša kot pri ogrodju Bootstrap.. –. Materialize CSS je zavrnil uporabo Flexboxa, kar ima za posledico slabšo združljivost z Internet Explorerjem 10+.. 30.

(40) 4 PRAKTIČNI PRIMER 4.1. Predstavitev implementirane spletne strani. V okviru ŠIPK projekta je nastala spletna aplikacija SOS Slovenščina/SOS Slovene. Kot sodelavec sem bil zadolžen za oblikovanje in razvijanje čelnega dela spletne aplikacije. Aplikacija je bila namenjena učencem slovenskega jezika, posebej še za tuje študente za učenje tujega jezika na osnovni ravni (A1). Izkoristil sem priložnost in za izdelavo spletne aplikacije preizkusil ogrodje Materialize CSS. Izkoristil sem tudi poznavanje ogrodja Bootstrap iz študentskih dni in primerjal ogrodji med seboj primerjal. Izkazalo se je, da je Materialize CSS dobra izbira pri gradnji spletnih aplikacij, kot je SOS Slovene. V tem primeru sem za pomoč pri izdelavi spletne strani izkoristil zmogljivosti vizualnega jezika Material Design. Prav tako sem izkoristil napotke, ki jih je podal Google za ustvarjanje vizualnega jezika Material Design in ogrodja Materialize CSS. Ta navodila podrobno razlagajo, kako ustvariti ilustracije in okolje spletne aplikacije za popolno izkušnjo uporabnika. Priložena slika prikazuje končno verzijo spletne aplikacije, ki je dosegljiva na naslovu: http://sosslovene.ff.um.si/. [10]. 31.

(41) Slika 4.1 Spletna aplikacija, narejena z ogrodjem Materialize CSS Vir: http://sos-slovene.ff.um.si/. 4.2 Prikaz razlik in rezultati Za diplomsko nalogo sem uporabil pomembnejše dele spletne aplikacije SOS Slovene, da bi dopolnil svoje delo in prikazal razlike med ogrodjem Materialize CSS in ogrodjem Bootstrap. 32.

(42) Del strani sem za nadaljnjo primerjavo izdelal s pomočjo obeh ogrodij. Uporabil sem raziskavo delovanja obeh ogrodij, teoretičnega dela in informacij, zbranih s področja prednosti in slabosti obeh ogrodij, pa tudi iz lastnih izkušenj in izkušenj drugih uporabnikov. Za prikaz testne strani sem uporabil preprost razred carousel-slider, ki ga ponuja Materialize CSS. Posebej primeren je za mobilne naprave zaradi možnosti drsenja. Pri prikazu poglavja sem v primeru območja slovarja uporabil razred gallery, ki omogoča simetrično razporeditev zavihkov, ki že na prvi pogled vsebujejo dodatne informacije o tem, kaj se odpre ob kliku na zavihek.. Slika 4.2 Prikaz aplikacije za primerjanje ogrodja. V vsebini kartice sem uporabil razred collapsible, ki ponuja elemente, ki se lahko razširijo ob kliku nanje. Omogočajo skrivanje vsebine, ki za uporabnike na prvi pogled ni pomembna. Omogočajo tudi preglednost in načrtovanje. Vgrajena animacija omogoča intuitiven prikaz in udoben občutek za uporabnike aplikacije. 33.

(43) Slika 4.3 Prikaz vsebine aplikacije, narejene z ogrodjem Materialize CSS. Prav tako sem uporabil osnovno zasnovo glave (angl. header) in noge (angl. footer). V primeru ogrodja Bootstrap sem poskušal narediti spletno aplikacijo čim bolj podobno in jo primerjati s prvo. Tako kot ogrodje Materialize CSS ima tudi ogrodje Bootstrap podobno postavitev, vendar z nekoliko drugačnimi funkcijami. Ogrodje Bootstrap ponuja enako funkcionalnost kot ogrodje Materialize CSS, s poudarkom na prilagajanju in urejanju funkcionalnosti elementov UX, medtem ko se Materialize CSS osredotoča na vizualno izkušnjo uporabnika.. 34.

(44) Prikaz spletne aplikacije, narejene z ogrodjem Bootstrap:. Slika 4.4 Spletna aplikacija, narejena z ogrodjem Bootstrap. Bootstrap omogoča tudi uporabo kartic kot galerije ali za postavitev strani (kot v tem primeru). Omogoča urejanje funkcionalnosti elementov spletne aplikacije, vendar nima vgrajene animacije kot Materialize CSS, ki so bistvenega pomena za vtis in občutek uporabe aplikacije. Po drugi strani pa omogoča urejanje elementov na nekoliko bolj zapleten način, in sicer z urejanjem odprte kode.. 35.

(45) Slika 4.5 Prikaz vsebine aplikacije, narejene z ogrodjem Bootstrap. 4.3 Delovanje na različnih napravah Obe ogrodji za urejanje strani uporabljata 12-stolpčni sistem. Materialize CSS uporablja razred container, ki ni strogo del urejevalnega sistema, vendar je osnova in stran postavi tako, da jo. prilagodi na 70 % njene širine ob vsaki spremembi širine zaslona. Koda za razred container: <body> <div class="container"> <!—Vsebina strani tukaj --> </div> </body>. 36.

(46) V primeru ogrodja Materialize CSS je videz aplikacij na mobilnih zaslonih, tj. napravah s širino zaslona < 600 px, naslednji:. Slika 4.6 Videz aplikacije na mobilnih napravah v primeru ogrodja Materialize CSS. 37.

(47) V primeru tabličnega računalnika, tj. zaslonov širine od 600 px do namiznih zaslonov, aplikacija zavzema od 70 % do 85 % širine:. Slika 4.7 Videz aplikacije na napravah velikosti zaslona od 600 px. Zasloni velikosti 992 px in več so prikazani v poglavju 4.2.. 38.

(48) Primer prikaza za naprave do 576 px pri ogrodju Bootstrap:. Slika 4.8 Videz aplikacije za naprave do 576 px pri ogrodju Bootstrap. 39.

(49) Videz za naprave velikosti od 576 px do 992 px pri ogrodju Bootstrap:. Slika 4.9 Videz aplikacije za naprave od 576 px do 992 px pri ogrodju Bootstrap. Primer za naprave velikosti nad 992 px pri ogrodju Bootstrap je prikazan v poglavju 4.2.. 40.

(50) 4.4 Primerjava razvoja Obe ogrodji imata podoben način razvijanja. Za razvoj in postavitev elementov v prostoru tako Materialize CSS kot Bootstrap uporabljata mrežni sistem z 12 stolpci, vendar z nekoliko drugačnimi pravili.. Materialize CSS – mrežni sistem: Sistem mrežnih 12 stolpcev bo vedno enako razporejen, ne glede na velikost zaslona. [11]. Slika 4.10 Sistem mreže 12 stolpcev Vir: https://materializecss.com/grid.html. Naslednja slika prikazuje, kako uporabljati postavitve za popoln videz aplikacije v vseh velikostih zaslona. [11]. Slika 4.11 Postavitve za popoln videz aplikacije na vseh velikostih zaslona Vir: https://materializecss.com/grid.html. 41.

(51) Bootstrap – mrežni sistem: [12]. Slika 4.12 Bootstrapov mrežni sistem. Vir: https://getbootstrap.com/docs/4.0/layout/grid/. Eden od glavnih razredov, ki ga uporablja Bootstrap, je container-fluid, ki zagotavlja odzivno širino aplikacije, ki je 100 % širine za vse zaslone. [12] Obe ogrodji imata nabor funkcij za razporeditev elementov znotraj omrežnega sistema, ki omogoča urejanje strani na zahtevo odjemalca in uporabnika. [12] V primeru kartic v poglavju galerije obe ogrodji uporabljata razred card, ki vsebuje elemente, v okviru ogrodja Bootstrap je to card-body, ki vsebuje elemente kartice, in v primeru ogrodja Materialize CSS je to razred card-contenet, ki ima enako funkcijo. [12] <div class="card" style="width: 100px;"> <img class="card-img-top" src="..." alt="kartica"> <div class="card-body"> <h5 class="card-title">Naslov kartice</h5> <p class="card-text">Vsebina kartice ...</p> <a href="#" class="btn btn-primary">Povezava ...</a> </div> </div>. 42.

(52) Materialize CSS ima implementirane osnovne kartice, ki omogočajo odpiranje zavihkov in vsebine iz njih. Aktiviramo jih z uporabo razreda card-reveal in z dodajanjem razreda activator elementu znotraj kartice. [2] <div class="card"> <div class="card-image waves-effect waves-block waves-light"> <img class="activator" src="slika1.jpg"> </div> <div class="card-content"> <span class="card-title activator grey-text text-darken4">Naslov kartice in ikona<i class="materialicons ">more_vert</i></span> <p><a href="#">Povezava</a></p> </div> <div class="card-reveal"> <span class="card-title grey-text text-darken4">Naslov kartice<i class="material-icons right">close</i></span> <p>Več informacij ...</p> </div> </div>. Vsebina kartice je v primeru spletne aplikacije napolnjena s stavki in besedami ter s prevodom iz angleškega v slovenski jezik. Materialize CSS uporablja JavaScript element za odpiranje elementa znotraj kartice z razredom „collapsible“. Ti elementi so primerni za vsebino, ki za uporabnika na prvi pogled ni pomembna, vendar so nujni za kasnejšo uporabo. Ta element je mogoče aktivirati s kodo JavaScrip ali jQuery. [2] document.addEventListener('DOMContentLoaded', function() { var elems = document.querySelectorAll('.collapsible'); var instances = M.Collapsible.init(elems, options); }); // Ali z jQuery kodo $(document).ready(function(){ $('.collapsible').collapsible(); });. 43.

(53) V primeru ogrodja Bootstrap sem uporabil JavaScript modalni vtičnik (modal), v našem primeru za odpiranje vsebine zavihka s klikom na gumb. Element modal je sestavljen iz CSS, HTML in JavaScript kode. Pri odpiranju je postavljen nad vsemi elementi. Bootstrap lahko enkratno odpre samo en modal. Ob aktiviranju imajo uporabniku prijazno osnovno animacijo. [9]. 5 ZAKLJUČEK Namen diplomske naloge je bil prikazati funkcionalnost ogrodja Materialize CSS in ga primerjati z vodilnim ogrodjem Bootstrap, da se ugotovijo prednosti in slabosti obeh ogrodij. Pri pregledu ogrodij in izdelavi primera se je izkazalo, da ima Bootstrap večjo podporo na internetu, zato je lažje priti do rešitve v primeru težav. Vendar sem pri ustvarjanju spletne aplikacije ugotovil, da je Materialize CSS zelo kvaliteten za uporabnike, ki poznajo osnove CSS, HTML in JavaScript kode, kot tudi za uporabnike, ki se prvič srečajo z ogrodjem za razvoj sprednjega dela mobilne ali spletne aplikacije. Velik problem je izbrati primerno ogrodje za ustvarjanje spletnih in mobilnih aplikacij, čeprav jih večina ponuja podobne funkcije z nekaj razlikami. Ugotovil sem, da je Materialize CSS zaradi svoje povezanosti z vizualnim jezikom Material Design bolj odprt za delo s prostorom in oblikami, saj elementi in njihovo vedenje vplivajo na človeško psiho in počutje pri uporabi aplikacij. Zaključimo lahko, da je vse odvisno od uporabnika in njegovih dosedanjih izkušenj, pa tudi želje po učenju novih stvari. Kot sem že omenil v diplomski nalogi, je Bootstrap starejši in širše uporabljan na področju razvoja in prilagajanja elementov UX. Uporabnikom je bolj znan in je zato priljubljen. Po drugi strani je Materialize CSS, ki ga je ustvaril Google, s svojim povezovanjem vedenja resničnih materialov z virtualnimi namenjen izboljšanju uporabniške izkušnje. Prav zaradi tega predvidevam, da se bo ogrodje Materialize CSS v prihodnosti še bolje in večkrat uporabljalo, s tem pa bosta rastla tudi njegova podpora in razvoj.. 44.

(54) 6 VIRI IN LITERATURA [1] Javatpoint (2011–2018). What is Materialize CSS. Dostopno na Materialize CSS tutorial – javatpoint:. https://www.javatpoint.com/materialize-css-tutorial [3. 10. 2019]. [2] Materialize (2014–2019). A modern responsive front-end framework based on Material Design. Dostopno na: https://materializecss.com/ [5. 10. 2019]. [3] Foundation (2008–2019). History of the Web – World Wide Web. Dostopno na: https://webfoundation.org/about/vision/history-of-the-web/ [10. 10. 2019]. [4] HTML 5 (2019). What is HTML 5 standard? Dostopno na: https://html.spec.whatwg.org/#tocintroduction [13. 10. 2019]. [5]. MDN. web. docs. (2019).. Modules. and. the. standardization. process.. Dostopno. na:. https://developer.mozilla.org/en-US/docs/Archive/CSS3 [15. 10. 2019]. [6]. MDN. web. docs. (2019).. JavaScript.. Dostopno. na:. https://developer.mozilla.org/en-. US/docs/Web/JavaScript [15. 10. 2019]. [7] Stackshare (2019). Bootstrap vs Materialize. Dostopno na: https://stackshare.io/stackups/bootstrapvs-materialize [16. 10. 2019]. [8] Materialize CSS (2014–2019). Getting started. Dostopno na: https://materializecss.com/gettingstarted.html [17. 10. 2019]. [9]. Bootsrap. (2019).. Introduction.. Dostopno. na:. https://getbootstrap.com/docs/4.3/getting-. started/introduction/ [17. 10. 2019]. [10] SOS Slovene (2019). Spletna plikacija SOS Slovenščina. Dostopno na: http://sos-slovene.ff.um.si/ [18. 10. 2019]. [11] Materialize CSS (2014–2019). Standard 12 column fluid responsive grid system. Dostopno na: https://materializecss.com/grid.html [20. 10. 2019]. [12] Bootstrap (2019). Grid system. Dostopno na: https://getbootstrap.com/docs/4.3/layout/grid/ [22. 10. 2019].. 45.

(55)

No results found