razvoj predloge spletne straniin integracijo funkcij programske opreme in aplikacij v okolje...

Diplomsko delo visokošolskega strokovnega študija Organizacija in management informacijskih sistemov

RAZVOJ PREDLOGE SPLETNE STRANI

Mentor: izr. prof. dr. Uroš Rajkovič Kandidat: Žan Vodnjov

Kranj, avgust 2017

ZAHVALA Zahvaljujem se mentorju izr. prof. dr. Urošu Rajkoviču za vse nasvete in usmeritve pri izdelavi diplomske naloge. Iskreno se zahvaljujem tudi družini za omogočanje študija in za vso pomoč, spodbudo ter podporo pri študiju. Hvala tudi vsem ostalim, ki ste v času študija kakorkoli pripomogli.

POVZETEK

V okviru diplomske naloge sem raziskoval razvoj izdelave spletnega mesta, ki lahko konkurira na današnjem digitalnem trgu. Osredotočil sem se na celoten proces izdelave sodobnega spletišča. Izbral sem ustrezen CMS sistem, na katerem bo tekla končna rešitev. V celotnem procesu sem izdelal lastno predlogo spletne strani, ki tako programersko, kot grafično ustreza zahtevam sodobnega digitalnega trga. Spletna rešitev bo v nadaljevanju razvoja implementirana v vsakdanjo produkcijsko rabo, z zakupom domene in gostovanja ter s selitvijo na svetovni splet. Končna rešitev je prijazna tako namiznim, kot tudi mobilnim napravam. Produkt pomaga zagonu konkretnega podjetja iz prakse, ki je trenutno še v fazi razvoja. Ravno zaradi tega menim, da je nova spletna stran več kot dobrodošla, saj že pripomore k razvoju novega podjetja.

KLJUČNE BESEDE:

- spletna stran - predloga spletne strani - wordpress - sistem za upravljanje vsebin - bootstrap

ABSTRACT The thesis deals with the exploration and development of website template creation, that is able to compete in today's digital market. We were focusing on the whole process of developing a modern website. Throughout the process we chose the appropriate CMS system, on which the final solution runs. The solution is based on webpage template developed from scratch. The template both programmatically and graphically fit modern digital market standards. In the continuation of the development, the web solution will also be implemented into everyday production environment and will be friendly to both desktop and mobile devices. We believe that the prototype will help start a concrete business from a start-up company and will for this reason really contribute to the development of the growing company.

KEYWORDS:

- webpage - webpage template - wordpress - content management system - bootstrap

KAZALO 1. UVOD ............................................................................................................. 1

1.1. Predstavitev problema ............................................................................... 1

1.2. Predpostavke in omejitve .......................................................................... 1

1.3. Metode dela ............................................................................................... 2

2. TEORETIČNA IZHODIŠČA ................................................................................. 3

2.1. Wordpress okolje ....................................................................................... 3

2.2. Prednosti odprtokodnega sistema .............................................................. 3

2.3. Razvoj odzivne (ang. responsive) WordPress predloge .............................. 5

3. RAZVOJ PROTOTIPA ....................................................................................... 8

3.1. Konfiguracija okolja za razvoj WordPress predloge ................................... 8

3.2. Hierarhija WordPress predlog .................................................................. 12

3.3. Uporabljeni programski jeziki za razvoj odzivne predloge ...................... 14

3.3.1. Jezik HTML5 (Hyper Text Markup Language) .................................... 14

3.3.2. Jezik CSS 3 (Cascading Style Sheets) ................................................ 15

3.3.3. Jezik JavaScript ................................................................................ 19

3.3.4. Jezik PHP (Hypertext Preprocessor) ................................................. 19

3.4. Zgradba odzivne WordPress predloge ...................................................... 20

3.4.1. Datoteka Style.css ............................................................................. 20

3.4.2. Datoteka Index.php........................................................................... 20

3.4.3. Datoteka Header.php ........................................................................ 22

3.4.4. Datoteka Footer.php ......................................................................... 22

3.4.5. Datoteka 404.php .............................................................................. 23

3.4.6. Datoteka Page-testimonials.php ....................................................... 23

3.4.7. Datoteka Functions.php .................................................................... 24

3.5. Uporabljene spletne tehnologije ............................................................. 25

3.5.1. Vtičnik Advanced Custom Fields ....................................................... 25

3.5.2. Google Zemljevidi ............................................................................. 26

4. TESTIRANJE PROTOTIPA ............................................................................... 31

4.1. Pregled vtičnikov ..................................................................................... 31

4.1.1. Napredni urejevalnik - Bootstrap Shortcodes .................................... 31

4.1.2. Vtičnik Better WordPress Minify ........................................................ 31

4.2. Objavljanje vsebine ................................................................................. 32

4.3. Izgled prototipa z vnešeno vsebino .......................................................... 34

4.3.1. Ciljna stran ....................................................................................... 34

4.3.2. Ponudba storitev ............................................................................... 35

4.3.3. Galerija ............................................................................................. 36

4.3.4. Mnenja strank ................................................................................... 37

4.3.5. Kontaktni podatki ............................................................................. 37

4.3.6. Končni izgled prototipa ..................................................................... 38

5. ZAKLJUČEK .................................................................................................. 40

VIRI IN LITERATURA ................................................................................................ 41

KAZALO SLIK ........................................................................................................... 42

POJMOVNIK ............................................................................................................ 43

KRATICE IN AKRONIMI ............................................................................................. 43

Univerza v Mariboru – Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

Žan Vodnjov: Razvoj predloge spletne strani stran 1

1. UVOD

1.1. PREDSTAVITEV PROBLEMA Uspešnost in digitalno prepoznavnost podjetja danes v veliki večini krojijo spletne strani. Postala so standard, s čimer se potrošnik prepriča o pristnosti in kvaliteti organizacije. Za dosego standardov in konkurenčnost, se tako v digitalnem svetu soočamo z izredno širokim spektrom CMS (ang. Content management system) orodij (WordPress, Joomla!, Drupal …) za izdelavo spletnih strani. Vsa bazirajo na pripadajočih predlogah oziroma temah. Zavedamo se, da je v povezavi s tem na voljo že precej izdelanih predlog, vendar smo se zaradi lastnih preferenc odločili obiti obstoječe, ter ustvariti novo, lastno predlogo. Za izpolnitev ciljev načrtujemo izdelavo nove predloge za izbran CMS sistem. Ta bo izdelana po lastnih preferencah, ter potrebah podjetja, kateremu bo končna rešitev namenjena. Prototip bo v kasnejših fazah implementiran v vsakodnevno rabo, dostopen bo na spletu in tako v podporo strankam, hkrati pa bo bistven faktor pri razvoju podjetja. Predloga, namenjena tako namiznim, kot mobilnim napravam, bo razvita za odprtokodni sistem za upravljanje vsebin WordPress, za potrebe končne stranke, torej salona za nego živali. Namen razvite predloge je zagotoviti:

• sodobni, konkurenčni digitalni videz,

• enostavno in efektivno uporabniško izkušnjo,

• implementacijo socialnih omrežij (Facebook, Instagram …),

• odprte možnosti za nadaljnji razvoj in razširitev spletne strani,

• združljivost z ostalimi informacijskimi okolji, predvsem za potrebe marketinga, analize in prodaje,

• stranki prijazen sistem, z možnostjo enostavnega urejanja in ažuriranja spletišča.

1.2. PREDPOSTAVKE IN OMEJITVE Glede na trenutne trende in potrebe naročnika, smo se odločili za uporabo odprtokodne rešitve WordPress 4.8 – sistem za upravljanje vsebin. Poznamo ga kot visoko prilagodljiv in zanesljiv sistem. Omogoča tudi raznovrstne opcije nadgradnje in vzdrževanja, kar nam je izredno pomembno za prihodnost. Pri razvoju WordPress predloge bomo pozorni tudi na odzivnost spletnega mesta (ang. responsive web design), kar bomo zagotovili s spletno arhitekturo Bootstrap in elementi HTML (ang. Hyper Text Markup Language), CSS (ang. Cascading Style Sheets) in JS (ang. JavaScript).



1.3. METODE DELA Za uspešno implementacijo rešitve v produkcijsko okolje z zanesljivo funkcionalnostjo se moramo poslužiti nekaterih metod. Za pridobitev moramo najprej preučiti relevantno literaturo o sodobnih načinih razvoja spletnih strani. Izredno pomembna nam bo tudi literatura s področja programskih rešitev, predvsem specifična, namenjena razvoju spletnih rešitev z odprtokodnim sistemom WordPress. Naš cilj je tudi ustrezna struktura in posledično delovanje celotnega prototipa, zato se moramo podučiti tudi o programskih jezikih, pomembnih pri razvoju spletnih rešitev. Govorimo o jezikih:

• HTML,

• CSS,

• JavaScript,

• PHP. Ob pridobitvi zadostne količine znanja, bomo izdelali predlogo spletne strani za sistem WordPress, ki bo ustrezala modernim spletnim standardom. V razvoj prototipne rešitve bomo implementirali tudi željene vsebine, ki bodo pripomogle k razvoju podjetja, kateremu je prototip namenjen. Na različna dela smo ločili tudi celoten razvoj in testiranje, saj smo mnenja, da čeprav pri razvoju vedno poizkušamo zajeti vse končne funkcionalnosti rešitve, na koncu nikoli ni tako. Med fazo testiranja prototipa se vedno pokažejo še potrebe po dodatni funkcionalnosti in prilagoditvi prototipa za večjo ustreznost. Realizacija prototipne rešitve je bila zagotovljena z uporabo programske opreme, razvojnih okolij in ostalih spletnih rešitev:

• Sublime Text 3,

• WordPress 4.8,

• Bootstrap 3.3.7,

• Advanced Custom Fields,

• Google Maps,

• Font Awesome,

• ScrollReveal,

• jQuery,

• Apache Web Server.



2. TEORETIČNA IZHODIŠČA

2.1. WORDPRESS OKOLJE Danes izredno priljubljen odprtokodni sistem za upravljanje vsebin svoje začetke uvršča v leto 2003. Svojo priljubljenost je začel skromno, ter bil v osnovi namenjen le oblikovanju in urejanju vsebine, dodatne funkcionalnosti pa so prišle z razvojem. V osnovi je bil namenjen uporabnikom, ki so želeli postaviti pregledno in funkcionalno blog okolje, z razvojem pa se je mejnik precej premaknil. Danes njegova uporabnost sega izven »blog spletišča«, saj je nemalokrat uporabljen tudi za ostale produkcijske spletne strani. Velika zasluga za tako hiter razvoj sistema je njegova odprtokodnost, saj k razvoju projekta tako lahko pripomore na tisoče ljudi po svetu. Omembe vredna je tudi celotna skupnost in dokumentacija na voljo na spletnih straneh wordpress.org/support in codex.wordpress.org. Za svoje delovanje potrebuje namestitev na spletnem strežniku, z uporabo storitve internetnega gostovanja (ang. internet hosting service) ali omrežnega gostitelja (ang. network host). Za potrebe razvoja in testiranja se velikokrat uporablja namestitev na lokalnem strežniku (ang. local host), kjer je vsebina dostopna iz diskovnih pogonov naprave, kjer je spletni strežnik nameščen. Največkrat se uporablja orodja:

• XAMPP (https://www.apachefriends.org/),

• MAMP (https://www.mamp.info/),

• WAMP SERVER (http://www.wampserver.com/),

• SERVER PRESS (https://serverpress.com/). Okolje danes uporablja skoraj 75 milijonov spletnih strani, kar je več kot 25% vseh svetovnih spletišč in zavzema skoraj 60% tržni delež. (Munford, 2016)

2.2. PREDNOSTI ODPRTOKODNEGA SISTEMA Pri uporabi precej CMS orodij se srečamo z bolečo izkušnjo, kjer je vsebina spletnih strani zavita v velike HTML datoteke, z dodanimi selektorji in imeni razredov (ang. class name). Da lahko iz teh velikih datotek razberemo pomen vseh razredov in pripadajočih ID-jev, da bi lahko po meri ustvarili CSS pravila, tako porabimo izredno veliko časa. WordPress smo izbrali zaradi tega, ker se njegove funkcionalnosti ločijo že v samem začetku, strukturi, ter se od ostalih sistemov za upravljanje vsebin razlikujejo. WordPress za objavljanje tako uporablja samo dve stvari:

• tekstovno vsebino strani – tekst, ki ga vnesemo skozi administrativni panel,

• dodatno vsebino strani - gradniki (ang. widget), pasice (ang. banner) in meniji (ang. menu), zaviti v »div«, »li«, »nav« oznake (ang. tag) glede na programiranje predloge.

Kulminacija vseh odločitev za oblikovanje in prikazovanje, povezanimi z oznakami predloge, tako združi vsebino spletnega mesta z oblikovanjem, ki ga predstavlja WordPress predloga. (McCollin in Blakeley Silver, 2013)

https://wordpress.org/support/https://codex.wordpress.org/https://www.apachefriends.org/https://www.mamp.info/http://www.wampserver.com/https://serverpress.com/



Bistvena prednost pred konkurenco je tudi ogromna skupnost, ki jo WordPress ponuja. Znano nam je, da se pri programiranju na določeni točki vedno pojavijo problemi, katere nam je v interesu rešiti na kar se da optimalen način. Ker obstaja velika verjetnost, da nismo prvi, ki smo naleteli na problem, se v veliki večini samo z iskanjem preko ključnih besed lahko najde rešitev. V nasprotnem primeru, bi bili prepuščeni sami sebi, in bi bilo lahko že iskanje preproste rešitve kar velik zalogaj. Vsebuje tudi boljšo kodo, ker projekt vsebuje več tisoč podpornikov iz celotnega sveta, ki kodo vsak dan testirajo in izboljšujejo. Pomembna je tudi za samo pozicioniranje, saj je povezana s hitrostjo strani in odzivnostjo. Sistem je pomembno tudi stalno nadgrajevati. WordPress ponuja konstantne brezplačne nadgradnje, ki so v osnovi pomembne zaradi dodanih funkcionalnosti in izboljšav na področju uporabniške izkušnje. S stalnim posodabljanjem se odstranijo tudi varnostne luknje, ter se na ta način možnosti vdora skoraj izničijo. Lasti si tudi veliko knjižnico razširitev, ki so nam v fazi razvoja v veliko pomoč. Ponavadi gre za razne dodatke spletnih strani, ki nam olajšajo delo in lasten razvoj. Za večino stvari obstajajo točno takšne rešitve, kot jih potrebujemo, z možnostjo prilagoditve. Večina jih je tudi brezplačnih, če ne celotnih, vsaj z omejeno funkcionalnostjo, ki nam v veliki večini zadošča. (Lavtar, 2014) Najnaprednejša in zadnje čase najbolj popularna noviteta vključuje integracije z drugimi programi. Vmesnik za namensko programiranje, API (ang. Application Programming Interface), je množica protokolov in orodij za povezovanje s programi in integracijo funkcij programske opreme in aplikacij v okolje WordPress. Njegovo uporabnost potrjujejo tudi nekatera velika, znana podjetja, ki temeljijo na WordPress platformi (WordPress Codex, 2017):

• The New York Times (https://www.nytimes.com/),

• CNN (http://edition.cnn.com/),

• Forbes (https://www.forbes.com/),

• UPS (https://longitudes.ups.com/),

• eBay (https://www.ebayinc.com/),

• Sony (https://blog.us.playstation.com/),

• IBM Jobs (https://blog.ibm.jobs/),

• Microsoft News (https://news.microsoft.com/).

https://www.nytimes.com/http://edition.cnn.com/https://www.forbes.com/https://longitudes.ups.com/https://www.ebayinc.com/https://blog.us.playstation.com/https://blog.ibm.jobs/https://news.microsoft.com/



2.3. RAZVOJ ODZIVNE (ANG. RESPONSIVE) WORDPRESS PREDLOGE Odzivna oblika razvoja predloge spletne strani targetira optimalno izkušnjo uporabnikov, pri čemer ni pomembno iz kakšne vrste naprave dostopajo do določene spletne strani. Obenem poskrbi tudi za boljšo uporabniško izkušnjo, saj uporabnik za pravilen prikaz spletne strani ne potrebuje obračati ekrana, približevati in se premikati levo in desno za prikaz željene vsebine. Povzamemo lahko, da se oblika odzivnega spletišča (ang. responsive web page) prilagaja glede na napravo, iz katere dostopamo do njega (slika 1).

Slika 1: Odzivno oblikovanje spletne strani

Potreba po odzivnem oblikovanju (ang. responsive design) se je pojavila iz izredno preprostega razloga. Še nedolgo nazaj smo ljudje do spletnih strani dostopali izključno iz računalnika, z razvojem pametnih prenosnih mobilnih naprav pa se je delež obiskov precej porazdelil. Vedno večji delež obiskov spletnih strani se tako zgodi iz mobilnih naprav, zato morajo biti spletna mesta na to pripravljena, in za mobilne naprave čim bolj optimizirana, saj se bodo v nasprotnem primeru uporabniki mobilnim napravam neprijaznim spletnim stranem izognili. (Williams, Damstra in Stern, 2013)



Za lažji pregled spletišč mobilne naprave velikokrat tudi obračamo, da si zagotovimo čim boljšo izkušnjo, ter si olajšamo delo. V primeru, da odzivno oblikovanje ne bi obstajalo, bi tako avtorji spletnih strani morali izdelati veliko različnih spletnih strani, da bi pokrili vse vrste različnih naprav in njihove resolucije (slika 2).

Slika 2: Odzivno oblikovanje spletne strani glede na rotacijo zaslona

Pri implementaciji odzivnega oblikovanja v spletno stran se srečamo z določenimi prednostmi:

• Izboljšana prijaznost uporabnikom Odzivno spletišče je v primerjavi s klasičnim uporabnikom veliko bolj prijazno. Ker živimo v času, ko se mobilne naprave razvijajo z nepredstavljivim tempom, ter se med seboj izredno razlikujejo, je toliko bolj pomembno, da se naša spletna stran kar se da optimalno prikazuje na vseh vrstah naprav.

• Analitični pregled segmentov Ker imamo namesto več ločenih spletnih strani za pokritost čim večjega števila naprav sedaj samo eno, imamo nad njo boljši pregled prometa. Pridobljeni podatki so ključni za analizo in še boljšo izpopolnitev spletne strani.

• SEO (ang. search engine optimization) – optimizacija za iskalnike Zavedamo se, da so iskalniki vsak dan boljši ter se še izpopolnjujejo. Ker so že zmožni najti povezavo med spletnimi mesti namenjenimi določenim tipom naprav, je bolje, da imamo le eno spletno stran, in ne eno za vsak posamezen tip naprav.

• Potrebuje »manj« vzdrževanja V primeru uporabe odzivnega oblikovanja spletne strani, moramo izdelati in urejati le eno spletno stran, saj nam le-ta pokriva različne vrste naprav. Podobno je tudi z njenim vzdrževanjem. Prednost vidimo tudi v tem, da ne potrebujemo uporabljati nobenih preusmeritev, saj se gre v končni fazi le za eno spletno mesto, ki se obnaša primerno glede na vrsto naprave.



Nobena noviteta nima le pozitivnih lastnosti, temveč tudi določene slabosti:

• Čas nalaganja spletnega mesta se poveča Največji problem pri nalaganju so slike, saj glede na velikost zasedejo največ. Imeti morajo dovolj dobro resolucijo, da so lepo prikazane na velikih zaslonih. Obenem se morajo pomanjšati, če so odprte na manjšem zaslonu.

• Otežena optimizacija za iskalnike SEO temelji na dejavnikih, kot so ključne besede in naslov, uporabniki pa za iskanje na mobilnih napravah uporabljajo druge ključne besede, kot na računalnikih. V takih primerih nam odzivno oblikovanje povzroča problem, saj je izredno težko nastaviti ključne besede, ki bodo zadovoljile potrebe tako uporabnikov na računalnikih, kot ostalih mobilnih napravah.

• Dolgotrajnejši razvoj Ker moramo zajeti več faktorjev, nam izdelava odzivne spletne strani vzame precej več časa, kot klasične.

• Otežen oblikovalski razvoj Videz spletne strani po navadi oblikujemo za glavne vrste in dimenzije naprav, ker bi nam razvoj za vmesne verzije vzel preveč časa. V tem primeru lahko ugotovimo, da na določenih napravah videz ni najbolj optimalen. (Lavtar, 2013) Vsekakor ob tehtnem razmisleku in primerjavi pozitivnih in negativnih lastnosti lahko trdimo, da je danes izredno pomembno, da je spletno mesto optimalno prikazano na čim širšem spektru naprav. Torej tako na računalnikih, kot tudi prenosnikih, tablicah, mobilnih telefonih. Zato smo mnenja, da je neglede na vse slabosti, pozitivnih lastnosti več in je odzivno oblikovanje spletnih mest prihodnost, ki se bo v naslednjih fazah vedno bolj izpopolnjevala.



3. RAZVOJ PROTOTIPA

3.1. KONFIGURACIJA OKOLJA ZA RAZVOJ WORDPRESS PREDLOGE WordPress je izredno dobro poznan tudi zaradi poenostavljene namestitve na računalnik. V našem primeru bo namestitev potekala lokalno, na spletni strežnik XAMPP. Namestitev je v veliki večini primerov uspešna že v manj kot petih minutah. Preden pričnemo z namestitvijo, moramo urediti naslednje:

• dostop do spletnega strežnika – v našem primeru lokalni strežnik,

• možnost ustvarjanja baz podatkov – dostop do MySQL baze preko HeidiSQL,

• urejevalnik besedila – uporabili bomo Sublime Text 3,

• FTP klient – uporabili bomo orodje FileZilla,

• spletni brskalnik – uporabili bomo Google Chrome. Zadnjo verzijo WordPress okolja si prenesemo iz spletnega mesta https://sl.wordpress.org/. Preneseno ».zip« datoteko razširimo in s pomočjo FTP klienta prenesemo na spletni strežnik. (WordPress Codex, 2017)

Slika 3: Privzeta WordPress struktura datotek

WordPress izvorna koda (ang. source code) vsebuje različne datoteke z vsebino PHP, JavaScript in CSS kode. Vsak del služi svojemu namenu, koda se povezuje in skupaj tvori zaključeno celoto. Ker je omenjeni CMS odprtokoden, pomeni, da imamo dostop do vse njegove kode, ki jo lahko raziskujemo in si tako lažje predstavljamo kako celoten sistem funkcionira.

https://sl.wordpress.org/



Kot je razvidno iz strukture datotek (slika 3), WordPress privzeto vsebuje tri različne direktorije:

• wp-admin,

• wp-content,

• wp-includes. Datoteke, ki tvorijo jedro sistema (ang. core files), se nahajajo v direktorijih »wp-admin« in »wp-includes«, ter v korenu (ang. root) direktorija. V direktoriju »wp-content« se nahajajo vse datoteke po meri, ki skrbijo za tvorbo predlog, vtičnikov in večpredstavnosti. Rečemo, da vsebina tega direktorija vsebuje kodo, ki nadzira vsebino in predstavnost WordPress-a. (Williams et al, 2013) Vsa vsebina je shranjena v MySQL bazi podatkov, ki jo v fazi konfiguracije kreiramo preko »phpmyadmin« vmesnika. Ustvarimo novo bazo s pripadajočim uporabniškim imenom in geslom, ki ima polna dovoljenja za dostop in urejanje. Ko imamo vse urejeno, preko FTP odjemalca odpremo datoteko »wp-config-sample.php«, jo preimenujemo v »wp-config.php« ter popravimo vnose, s katerimi bomo dostopali do baze (slika 4).

Slika 4: Vsebina datoteke "wp-config.php", pomembna za dostop do baze

V datoteki »wp-config.php« so definirani vsi podatki za dostop do baze MySQL in vsi unikatni ključi.



Po konfiguraciji odpremo URL našega spletnega mesta in nadaljujemo z namestitvijo (slika 5). Skozi namestitev WordPress v naši MySQL bazi kreira vse potrebne tabele (slika 6).

Slika 5: WordPress namestitev



Slika 6: Potrebne tabele za delovanje WordPress-a

Po uspešni konfiguraciji se lahko prijavimo v WordPress-ov administrativni panel in pričnemo z urejanjem (slika 7). Ker je naš prvotni cilj izdelava WordPress predloge, se z namestitvijo osnovnega WordPress-a vse šele dobro začne.

Slika 7: WordPress nadzorna plošča



3.2. HIERARHIJA WORDPRESS PREDLOG Vprašamo se, kako se WordPress glede na vse datoteke, ki jih ima na voljo za svoje delovanje odloči, katere bo izbral? Odgovor je preprost, saj je v osnovi sistem precej bister. Pregleda URL naslov, ter glede na to določi, kakšna vrsta vsebina je bila željena. Izhaja iz specifičnosti uporabljene predloge, kjer izbere datoteko, ki mu glede na kriterije najbolj ustreza. Ne glede na odprto datoteko, se vedno vrača na »index.php«. To je najbolje prikazano s spodnjim diagramom poteka, povzetem po WordPress Codex-u (slika 8).

Slika 8: Hierarhija WordPress predlog (povzeto po: Professional WordPress Design and Development, 2013)



Razvidno je, da je odločitveno drevo izredno fleksibilno. Ne glede na gostoto drevesne strukture, vse teme za svoje delovanje ne potrebujejo vseh datotek. Za primer našega prototipa so uporabljene datoteke iz drevesne strukture, razvidne v spodnjem prikazu (slika 9).

Slika 9: Datoteke uporabljene za delovanje predloge



3.3. UPORABLJENI PROGRAMSKI JEZIKI ZA RAZVOJ ODZIVNE PREDLOGE 3.3.1. JEZIK HTML5 (HYPER TEXT MARKUP LANGUAGE) Jezik za označevanje nadbesedila v osnovi niti ni programski jezik, vendar gre za opisni jezik. S pomočjo značk, ki ga zaznamujejo, spletnemu besedilu podajamo navodila, v kakšnem zaporedju in strukturi naj značke prikaže. Med najbolj osnovne značke za oblikovanje besedila spadajo:

• - definira tip dokumenta,

• - definira tip dokumenta, kot »html«,

• - vsebuje informacije o dokumentu,

• - definira naslov dokumenta,

• - vsebuje vsebino spletne strani,

• do - definira HTML naslove glede na velikost,

•

- značka za definicijo odstavka,

•
- značka za vnos enovrstičnega presledka,

• - definira tematsko spremembo vsebine.

Vsaka spletna stran, ki si jo ogledamo, je pisana v HTML jeziku. Predstavljamo si lahko, da je HTML kot »okostje«, ki vsakem spletišču določa strukturo. (Krebelj, 2015) HTML5 je naslednik jezika za označevanje nadbesedila HTML, in je bil objavljen oktobra 2014, iz strani konzorcija za svetovni splet (W3C), predvsem z razlogom izboljšave podpore najsodobnejšim multimedijskim vsebinam. Vsebuje procesne modele, ki spodbujajo sodobne implementacije. Izboljšuje in racionalizira oznake, ki so na voljo dokumentom, ter obenem uvaja podporo za vmesnike aplikacijskega programiranja (API), ki so potrebni predvsem pri bolj zapletenih spletnih aplikacijah. Vsebuje tudi precej novih sintaks za obdelavo multimedijske in grafične vsebine:

• - omogoča vgradnjo video vsebin v spletno stran,

• - omogoča vgradnjo avdio vsebin v spletno stran,

• - omogoča risanje/prikaz grafike na spletni strani. Omogoča tudi podporo za prilagodljive vektorske grafike - SVG (ang. scalable vector graphic) in MathML (ang. Mathematical Markup Language) za vnos matematičnih formul. Prav tako so dodane značke za novo strukturo elementov in bogatitev dokumentov:

• - zaznamuje glavno vsebino dokumenta, obstaja lahko samo en tak element,

• - definira sekcije elementov, kot so poglavja, glave, noge …,

• - oznaka označuje neodvisno vsebino,

• - predstavlja vsebnik za uvodno vsebino,

• - predstavlja nogo dokumenta ali sekcije,

• - definira vsebino izven vsebine, kjer je umeščen,

• - oznaka določa niz navigacijskih povezav,



• - oznaka določa samostojno vsebino, kot npr. ilustracije, fotografije, diagrami, seznami …

3.3.2. JEZIK CSS 3 (CASCADING STYLE SHEETS) Poleg osnovne zasnove spletne strani, vedno potrebujemo še nekaj več, »piko na i«. Večino lahko odpravimo z zagotovitvijo ustreznega oblikovanja. To dosežemo s kaskadnimi stilskimi predlogami. Te so predstavljene v obliki preprostega slogovnega jezika, katerih namen je željena prezentacija spletnih strani. Z njimi lahko določamo praktično vse oblikovne lastnosti HTML dokumentov:

• barve,

• velikosti,

• odmike,

• poravnave,

• pozicije,

• obrobe,

• nadziranje uporabniških aktivnosti – npr. prekritje povezave z miško. Namen CSS pravil je bil v osnovi ločitev strukture strani med označevalnim jezikom z vso vsebino in njeno predstavitvijo. S tem dosežemo predvsem lažje urejanje stilov in njihovo dodajanje. Zagotovimo tudi večjo preglednost dokumentov, ki temeljijo na sintaksi HTML. Ker lahko CSS elemente v kodi kličemo večkrat na različnih predelih, s tem precej zmanjšamo tudi ponavljanje kode, ter zmanjšamo velikost dokumentov. (W3schools, 2017) Vse CSS verzije uporabljajo določen temeljni koncept sintakse. Gre za relativno enostavno sestavo, saj vključuje angleške ključne besede, ki so zadolžene za poimenovanje stilskih lastnosti HTML elementa. Blok deklaracije vsebuje eno ali več deklaracij, ki so med seboj ločene s podpičji. V telesu deklaracijskega bloka zapišemo lastnost, kateri sledi dvopičje, ter nato vrednost, ki definira določen atribut. Splošen zapis CSS pravil izgleda sledeče (slika 10).

Slika 10: Prikaz splošne CSS sintakse (w3schools.com, 2017)



Selektor elementa Izbirnik elemente izbere glede na ime elementa. S spodnjo sintakso bomo določili poravnavo vseh elementov odstavka na sredino z modrim besedilom (slika 11).

Slika 11: Prikaz CSS kode za selektor elementa

ID selektor Določa oblikovanje glede na »ID« atribute HTML elementov. Znotraj strani mora biti unikaten, da lahko določa delovanje samo ene vrste elementov. Praktično pred »ID atribut« dodamo še »#«. Spodnja sintaksa določa poravnavo in barvo besedila za element z ID-jem »odstavek1« (slika 12).

Slika 12: Prikaz CSS kode za ID selektor

Selektor razreda (ang. Class selector) Določajo oblikovanje elementom s specifičnim atributom razredov. Definiramo jih s pisanjem pike (.), ki jo spremlja ime razreda. V našem primeru bo vsebina

razreda (class="center") sredinsko poravnana in modre barve. Določimo lahko tudi, da bo oblikovanje razreda vplivalo samo na določene oblike HTML elementov. V spodnjem primeru samo na

elemente, torej odstavke (slika 13).

Slika 13: Prikaz CSS kode za selektor razreda



Elementi HTML so lahko oblikovani tudi z lastnostmi več razredov, kot vidimo v spodnjem primeru (slika 14).

Slika 14: Prikaz CSS kode z lastnostmi več razredov

Združevanje selektorjev V primeru, da imamo elemente z enakimi lastnostmi oblikovanja, jih je z razlogom čim večje minimizacije kode, bolje združiti (slika 15).

Slika 15: Prikaz CSS kode razdruženih selektorjev

Za združitev, selektorje ločimo z vejicami (,) (slika 16).

Slika 16: Prikaz CSS kode združenih selektorjev



Komentarji znotraj CSS sintaks Za razlago kode z dodanimi komentarji, ki nam lahko prihrani veliko časa pri urejanju kode v prihodnosti uporabimo »/*« za začetek in »*/« za konec komentarja (slika 17).

Slika 17: Prikaz CSS kode za vnos komentarjev



3.3.3. JEZIK JAVASCRIPT Objektni skriptni programski jezik, je bil razvit s strani Netscape-a, z željo po pomoči spletnim programerjem pri ustvarjanju interaktivnih spletnih strani. Danes ga podpirajo vsi novejši spletni brskalniki. Pri razvijanju spletnih mest je več kot nujen za pridobitev dodatnih funkcionalnost. V našem primeru je bil uporabljen tudi za dodatne funkcionalnosti spletišča, za Google zemljevid, ter animacijo vsebine. Kot več-paradigmatski JS (JavaScript) podpira različne sloge programiranja in vsebuje API za delo z besedilom, tabelami, nizi, regularnimi izrazi … 3.3.4. JEZIK PHP (HYPERTEXT PREPROCESSOR) Programski jezik je bil v osnovi zamišljen kot niz makrov, ki bi piscem kode pomagali pri vzdrževanju osebnih domačih strani. Z razvojem jezika in izboljšavami njegovih možnosti, se je bistveno večala tudi njegova priljubljenost. Bistvena prednost je, da z njim lahko poganjamo velika spletna okolja, ki jih poganjajo zbirke podatkov. Uradno je znan kot Hypertext Preprocessor (hiperbesedilni predprocesor). Strežniški jezik je pogosto uporabljen skupaj s HTML-jem, za razliko od HTML-ja, je PHP sposoben skript razčleniti sam. S to kodo lahko poizvedujemo po zbirkah podatkov, beremo in zapisujemo datoteke in komuniciramo z oddaljenimi strežniki. Kot rezultat ustvari povezavo med kodo PHP in HTML, ter jo v obliki skripte pošlje uporabniku. (Zandstra, 2004) Za naš končni produkt bomo uporabljali PHP verzije 7.1.1. V WordPress okolju deluje na način, da ob uporabniški zahtevi na spletnem mestu, ki vsebuje PHP kodo, to kodo procesira PHP modul nameščen na spletnem strežniku. PHP-jev predprocesor nato generira HTML, ki je prikazan na zaslonu uporabniškega brskalnika. V WordPress-u imajo PHP datoteke običajno ».php« končnico. PHP predprocesor procesira samo kodo, ki se nahaja med značko za odprtje »« PHP bloka. V spodnjem PHP bloku vidimo delovanje PHP-ja v WordPress okolju, ki dinamično prebere in prikaže ime naslova (slika 18).

Slika 18: Prikaz PHP kode za izpis naslova strani



3.4. ZGRADBA ODZIVNE WORDPRESS PREDLOGE Pravilno delovanje WordPress predlog je pogojeno z urejenostjo in povezanostjo datotek, ki jo tvorijo. V prejšnjem poglavju smo si že ogledali, katere elemente glede na WordPress hierarhijo predloga lahko vsebuje in na kakšen način se povezujejo. Našo predlogo bomo razvili popolnoma po meri (ang. from scratch). Da bi to dosegli, moramo med seboj povezati določene PHP, JavaScript in CSS dokumente. 3.4.1. DATOTEKA STYLE.CSS To datoteko WordPress uporablja za sklicevanje na določeno temo, in je potrebna za pravilno delovanje. Ob kreiranju nove »style.css« datoteke, moramo najprej vključiti informacije o temi, za katero izdelujemo predlogo. Te podatke potem WordPress uporabi za prikaz na administrativnem panelu in za vse nadaljnje sklicevanje. Prvih nekaj vrstic kode mora izgledati sledeče.

/* THEME NAME: Ime teme THEME URI: http://potdomojeteme.si/ DESCRIPTION: Opis teme za spletno stran VERSION: 1.0 AUTHOR: Žan Vodnjov AUTHOR URI: http://potdoavtorjevedomene.si/ License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: dark, light, orange, responsive, flexible-width, featured-image-header, featured-images, full-width-template */

Navedene informacije so pregledne in lahko razumljive. Paziti moramo, da je ime teme unikatno. Za informativnimi podatki lahko začnemo vnašati CSS pravila predloge, ter s tem spremenimo minimalno oblikovanje v profesionalni izgled spletne strani.

3.4.2. DATOTEKA INDEX.PHP Omenjena datoteka je privzeta predloga spletne strani. WordPress si lasti vgrajeno orodje za odločanje o tem, kateri tip informacij obiskovalec išče, in skladno s tem prikaže predlogo z željeno vsebino. Kot smo omenili že v poglavju o hierarhiji predlog, je datoteka »index.php« privzeta oziroma predloga, ki se jo uporabi v primeru, da ni primernejše, oziroma druge po meri ustvarjene predloge. Če torej CMS preceni, da ni primernejše predloge, je »index.php« vedno na voljo. Običajno omenjena datoteka vsebuje standardno WordPress zanko (ang. loop), ki je uporabljena za prikazovanje vsebine prispevkov (ang. posts) ali strani (ang. pages). V primeru, da določene objave ni mogoče najti, se pojavi ustrezen napis, ki je razviden iz spodnje programske kode (slika 19).



Slika 19: PHP koda osnovne WordPress zanke

V primeru razvoja našega prototipa se nismo poslužili uporabe zanke, temveč smo za sestavo vsebine uporabili vtičnik Advanced Custom Fields, s katerimi kličemo vsebino, ki jo vnašamo preko administrativnega panela strani (slika 20).

Slika 20: Prikaz vsebine datoteke index.php

Glede na to, da je končni produkt enostranska (ang. one-page) spletna stran, smo vsebino razdelili na različne sekcije, s čimer bomo ločevali vsebino. Kot primer vzamemo sekcijo storitev (ang. services), ki ima v osnovi definiranih nekaj CSS pravil glede ozadja, pisave in postavitve. Primer prikaže, kako naložiti vsebino iz polj »service_id« iz objavljene strani z ID=169, torej strani za urejanje storitev.



3.4.3. DATOTEKA HEADER.PHP Vsebuje vse pomembne informacije na vrhu strani, do območja z vsebino. V osnovi je to lahko nekoliko zavajajoče, saj pravilno oblikovan HTML dokument vsebuje svoj »« predel z informacijami. Ta del ostane tudi v omenjeni datoteki, ter ima navadno vlogo hranjenja logotipa spletne strani in navigacije. Vsebuje lahko tudi dodatne elemente na vrhu strani , kot npr. polje za iskanje vsebine. Ob kreiranju »header.php« datoteke, moramo paziti tudi na vključitev pomembne funkcije: »wp_head()«, ki WordPress-u omogoča določeno funkcionalnost spletne strani, ter je uporabljena s strani vtičnikov. Vsebino datoteke kličemo s pomočjo naslednje kode: »«. V našem primeru je uporabljena samo na začetku »index.php« datoteke, saj se vsa vsebina združuje tam.

Slika 21: Prikaz strukture navigacijskega menija

S pomočjo prikazane kode zgradimo menijsko vrstico, ki nas na željeno vsebino pripelje s pomočjo funkcionalnosti drsenja strani (slika 21). 3.4.4. DATOTEKA FOOTER.PHP Podobno, kot v datoteki glave, mora biti vse pod območjem vsebine ločeno v datoteki »footer.php«. Še ne dolgo nazaj je bila omenjena datoteka namenjena samo vnosu avtorskih pravic (ang. copyright) in kontaktnih podatkov, z razvojem se standardi razvijajo in spreminjajo. Danes ni več čisto nič nenavadnega, če v polje noge spletne strani vstavimo določene vtičnike, navigacijske menije in podobno. Paziti moramo le, da v »footer.php« vstavimo funkcijo: »wp_foot()«, ki WordPress-u omogoča klicanje predloge iz drugih datotek, z ukazom: »«.



3.4.5. DATOTEKA 404.PHP Lahko se izredno trudimo in poskušamo na spletni strani predstavljati le ažurno vsebino, ter skrbimo, da je spletna stran vedno sodobna, vendar se izredno pogosto dogaja, da obiskovalci iščejo vsebino, ki ne obstaja ali je zastarela. V tem primeru potrebujemo datoteko »404.php«, s katero se nam WordPress pomaga izogniti omenjenim težavam in obiskovalcem omogoča preusmeritev. Običajno take datoteke vsebujejo okno za iskanje in ostale najbolj iskane strani oziroma prispevke, kot referenco. Ker gre v našem primeru za enostransko spletno stran, smo se odločili vsa obiskovalčeva iskanja, ki ne predstavljajo zadetkov, preusmeriti na domačo stran, saj v nikakršnem primeru ne želimo, da bi ob morebitni iskani vsebini, ki ne obstaja, tam obiskovalec obstal, temveč ga želimo preusmeriti nazaj, ter mu ponuditi iskane informacije. Neveljavno spletno stran s pomočjo spodnje programske kode preusmerimo na URL domače strani (slika 22).

Slika 22: Preusmeritev neveljavnega zadetka na spletni strani

3.4.6. DATOTEKA PAGE-TESTIMONIALS.PHP Dokument »page-testimonials.php« je ustvarjen popolnoma po meri, in je namenjen prikazovanju mnenju preteklih strank. Prikazan je na spletni strani, za povečanje interaktivnosti z obiskovalci. Deluje na podoben način, kot vsa vsebina v »index.php«, ki se na spletni strani prikazuje s pomočjo funkcionalnosti vtičnika Advanced Custom Fields. Ločena je zaradi njene same velikosti in lažje preglednosti. Njeno vsebino kličemo znotraj »index.php« datoteke s »« funkcijo (slika 23).

Slika 23: Vključitev datoteke “page-testimonials.php” v “index.php”



3.4.7. DATOTEKA FUNCTIONS.PHP Omenjena predloga ni namenjena prikazu, vendar je vsekakor izredno pomembna, saj omogoča vnos kode, ki jo potrebujemo v različnih predlogah. Omogoča dodajanje funkcionalnosti WordPress spletni strani. Lahko jo uporabimo za klicanje drugih funkcij ali definiranje lastnih. Obnaša se kot vtičnik in se tako avtomatično naloži v spletne strani. Nahaja se znotraj mape predloge, ki smo jo razvili za prototip. Uporabljamo jo za klicanje stilov predloge in JavaScript datotek za povečanje funkcionalnosti (slika 24). Skozi funkcije kličemo tudi Google pisavo, definirali smo tudi lastno funkcijo, ki nam skrije administrativno vrstico na vrhu ob urejanju spletne strani.

Slika 24: Vsebina datoteke functions.php



3.5. UPORABLJENE SPLETNE TEHNOLOGIJE 3.5.1. VTIČNIK ADVANCED CUSTOM FIELDS Vtičnik ACF deluje kot sloj za polja po meri. Z njim lahko obidemo privzeto vnašanje vsebine v WordPress okolju, ter si ustvarimo svoja. Bistvena prednost je v tem, da s pomočjo vtičnika določimo le tiste funkcionalnosti, ki jih potrebujemo, ter s tem omogočimo večjo preglednost (slika 25). Vtičnik omogoča:

• ustvarjanje lastnih vnosnih polj,

• izbor vnosnih tipov – besedilo, wysiwyg urejevalnik, slika, datoteka, hiperpovezava, zemljevid, galerija …,

• uporabniku prijazen vmesnik,

• enostavno vnašanje vsebine na različne strani,

• … V primeru si lahko ogledamo primer dodajanja polja za vnos zemljevida, s prikazom enostavnega urejanja. (ACF, 2017)

Slika 25: Prikaz delovanja vtičnika ACF



3.5.2. GOOGLE ZEMLJEVIDI Vsaka predstavitvena spletna stran podjetja, ki se ukvarja s storitveno dejavnostjo, danes poleg suhoparnega naslova potrebuje tudi prikaz lokacije na zemljevidu. Ker smo želeli razviti spletno mesto s čim manj vtičniki, smo se za implementacijo zemljevidov odločili uporabiti Google Maps API. Za svoje delovanje potrebuje celotno JavaScript datoteko, v kateri so definirane vse funkcije delovanja. Shraniti jo je potrebno na lokacijo znotraj predloge spletne strani, da je ves čas na voljo (slika 26). (Google Developers, 2017)

(function($) {

/* * new_map * * This function will render a Google Map onto the selected jQuery element * * @type function * @date 8/11/2013 * @since 4.3.0 * * @param $el (jQuery element) * @return n/a */ function new_map( $el ) { // var var $markers = $el.find('.marker'); // vars var args = { zoom : 16, center : new google.maps.LatLng(0, 0), mapTypeId : google.maps.MapTypeId.ROADMAP }; // create map var map = new google.maps.Map( $el[0], args); // add a markers reference map.markers = []; // add markers $markers.each(function(){ add_marker( $(this), map ); }); // center map center_map( map ); // return return map; }

Slika 26: Google-maps.js – ustvarjanje novega zemljevida



Za kreiranje lokacijske točke na zemljevidu uporabljamo spodnji del JavaScript kode (slika 27):

/* * add_marker * * This function will add a marker to the selected Google Map * * @type function * @date 8/11/2013 * @since 4.3.0 * * @param $el (jQuery element) * @param map (Google Map object) * @return n/a */ function add_marker( $marker, map ) { // var var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') ); // create marker var marker = new google.maps.Marker({ position : latlng, map : map }); // add to array map.markers.push( marker ); // if marker contains HTML, add it to an infoWindow if( $marker.html() ) { // create info window var infowindow = new google.maps.InfoWindow({ content : $marker.html() }); // show info window when marker is clicked google.maps.event.addListener(marker, 'click', function() { infowindow.open( map, marker ); }); } }

Slika 27: Google-maps.js – ustvarjanje lokacijske točke



Pomembno je tudi, da je zemljevid sredinsko poravnan, kar dosežemo s sledečim JavaScript vnosom (slika 28):

/* * center_map * * This function will center the map, showing all markers attached to this map * * @type function * @date 8/11/2013 * @since 4.3.0 * * @param map (Google Map object) * @return n/a */ function center_map( map ) { // vars var bounds = new google.maps.LatLngBounds(); // loop through all markers and create bounds $.each( map.markers, function( i, marker ){ var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() ); bounds.extend( latlng ); }); // only 1 marker? if( map.markers.length == 1 ) { // set center of map map.setCenter( bounds.getCenter() ); map.setZoom( 16 ); } else { // fit to bounds map.fitBounds( bounds ); } }

Slika 28: Google-maps.js - sredinska poravnava zemljevida



Poleg vseh gradnikov moramo za uspešno delovanje na koncu zemljevid še prikazati, kar se zgodi s pomočjo naslednje kode (slika 29):

/* * document ready * * This function will render each map when the document is ready (page has loaded) * * @type function * @date 8/11/2013 * @since 5.0.0 * * @param n/a * @return n/a */ // global var var map = null; $(document).ready(function(){ $('.acf-map').each(function(){ // create map map = new_map( $(this) ); }); }); })(jQuery);

Slika 29: Google-maps.js – prikazovanje zemljevida



Nato jo kličemo s pomočjo funkcij z naslednjimi ukazi (slika 30):

function theme_js() { wp_enqueue_script('google-map', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDgxswQDL5WPgAnUSI5dgAhaLZZLG9YLws', array(), '3', true ); wp_enqueue_script( 'google-map-init', get_template_directory_uri() . '/js/google-maps.js', array('google-map', 'jquery'), '0.1', true ); } add_action( 'wp_enqueue_scripts', 'theme_js'); //Update Google API Key function my_acf_init() { acf_update_setting('google_api_key', 'AIzaSyDgxswQDL5WPgAnUSI5dgAhaLZZLG9YLws'); } add_action('acf/init', 'my_acf_init'); ?>

Slika 30: Klicanje Google Zemljevidov znotraj functions.php

Zemljevide v spletno stran vključimo s spodnjo programsko kodo. Uvrstimo jih pod svojo sekcijo, ter jim dodamo spremenljivke, s katerimi se povežejo z vtičnikom (slika 31).

Slika 31: Klicanje Google zemljevidov za prikaz, znotraj index.php



4. TESTIRANJE PROTOTIPA

4.1. PREGLED VTIČNIKOV 4.1.1. NAPREDNI UREJEVALNIK - BOOTSTRAP SHORTCODES Vtičnik je v veliko pomoč pri oblikovanju besedila znotraj administrativnega panela. Poleg osnovnega oblikovanja ponuja razširitveni model, katerega glavne funkcionalnosti so (slika 32):

• ustvarjanje mreže – s popolnoma odrivnimi vrsticami in stolpci,

• kreiranje tabel,

• dodajanje gumbov z določanjem funkcionalnosti,

• vstavljanje zavihkov,

• dodajanje label,

• vstavljanje različnih ikon,

• … Dostopen je preko urejevalnika strani, kot razširitveni meni.

Slika 32: Vtičnik Bootstrap Shortcodes

4.1.2. VTIČNIK BETTER WORDPRESS MINIFY Bistveno pomaga pri optimizaciji in hitrosti nalaganja spletne strani, z omogočanjem minimiziranja CSS in JS datotek (slika 33). Uporablja PHP knjižnico Minify in privzete funkcionalnosti WordPress sistema, s čimer izboljšuje združljivost z drugimi vtičniki in temami. Uporabili smo ga z razlogom enostavne uporabe in velike hitrostne spremembe pri nalaganju spletne strani glede na Google PageSpeed Insights test.

Slika 33:Pregled minimiziranih JavaScript datotek



4.2. OBJAVLJANJE VSEBINE Vsebina spletnega mesta se objavlja s pomočjo dodane funkcionalnost vtičnika Advanced Custom Fields, s katerim kreiramo vnosna polja. Ta tvorijo vez med datoteko »index.php«, preko katere se celotno spletno mesto sestavi v celoto in stranmi v WordPress administrativnem panelu, kjer dodajamo vsebino (slika 34).

Slika 34: Pregled polj vtičnika Advance Custom Fields

Vrednost polj, oziroma celoten obrazec lahko sestavimo brez, oziroma z minimalnim pisanjem kode. Programski del zajema le vnos funkcije, s katero WordPress ve, katero stran pozicionirati v kateri predel spletišča (slika 35). To dosežemo z implementacijo naslednje vrstice kode:

Slika 35: Funkcija povezave zalednega (ang.backend) sistema z grafičnim vmesnikom

V panelu moramo nato določiti nova polja, ter jim pripisati določena unikatna imena, preko katerih se povezujejo z objavljenimi stranmi in prikazujejo vsebino. Glede na to, da smo se odločili za razvoj predloge za enostransko spletno stran, vsebino ločimo glede na sekcije (slika 36). Podobno poteka tudi urejanje, kar lahko vidimo na spodnjem prikazu (slika 37).



Slika 36: Prikaz strani za vnašanje in spreminjanje vsebine

Slika 37: Primer vnašanja in urejanja vsebine za ciljno stran (ang. Landing page)



4.3. IZGLED PROTOTIPA Z VNEŠENO VSEBINO 4.3.1. CILJNA STRAN Ciljna stran (ang. Landing page) je iz vidika vzbujanja zanimanja v obiskovalcu najbolj pomembna, saj predstavlja prvo povezano vsebino, ki jo ob obisku spletnega mesta zagleda. Odločili smo se za minimalističen besedilni videz, z navedenimi le najpomembnejšimi podatki in menijsko vrstico, ter veliko sliko, ki obiskovalca povabi k nadaljevanju brskanja po strani (slika 38). Prikaz na mobilnih napravah se nekoliko razlikuje in se prilagodi glede na velikost zaslona (slika 39).

Slika 38: Prikaz ciljne strani

Slika 39: Prikaz ciljne strani na mobilnih napravah



4.3.2. PONUDBA STORITEV Sledi kratka predstavitev salona in razlaga storitev. Zaradi izboljšanja uporabniške izkušnje smo se odločili za dvobarvno kombinacijo, ter sredinsko poravnavo besedila, ki pride do izraza na različnih vrstah naprav. Pri pregledu storitev smo s pomočjo knjižnice ScrollReveal za doseganje standardov modernih spletnih mest v prikaz implementirali tudi animacijo ikon (slika 40). Ker je predloga razvita s podporo odzivnega oblikovanja, se na napravah z manjšimi zasloni predstavitvena mreža odzivno prilagodi (slika 41).

Slika 40: Prikaz osnovnih informacij in storitev

Slika 41: Prikaz odzivne prilagoditve mreže glede na napravo



4.3.3. GALERIJA Predel je namenjen predstavitvi preteklih urejenih štirinožcev. Odločili smo se za preprosto odzivno predstavitev, saj smo mnenja, da slike povedo več kot besede. Ob postavitvi miške na sliko, se pokaže še dodana funkcionalnost, kjer sliko prekrije napis z nazivom pasme in imenom živali (slika 42).

Slika 42: Pregled galerije

Glede na velikost naprave, se odzivno prilagodi tudi pregled galerije (slika 43).

Slika 43: Pregled odzivnega oblikovanja galerije



4.3.4. MNENJA STRANK V storitvenih dejavnostih je izrednega pomena tudi zadovoljstvo strank, saj brez njih storitvene dejavnosti niti ne bi mogle obstajati. Zato smo se v predlogo odločili vključiti tudi del, kjer objavljamo mnenja preteklih strank, ki so v veliko pomoč tudi potencialnim novim strankam, ter omogočijo večjo dinamičnost spletnega mesta (slika 44).

Slika 44: Pregled mnenj strank

4.3.5. KONTAKTNI PODATKI Obdobje, kjer je za definiranje lokacije funkcionalne organizacije zadoščal samo naslov je že davno končano. Danes je velik poudarek na grafičnem oblikovanju in slikovnem prikazu, ter minimalizmu besedila. Iz tega vidika smo se odločili izbrati sredinsko, vendar v vseh pogledih moderno pot. Poleg suhoparnega naslova smo dodali še interaktivno vsebino v obliki zemljevida. Sestavlja ga API Google Zemljevidov in deluje popolnoma samostojno, neodvisno od vtičnikov. Služi lažji predstavljivosti o lokaciji storitvene dejavnosti, ter ima možnost spremembe prikaza terena in premikanja po zemljevidu (slika 45).

Slika 45: Prikaz kontaktnih informacij



4.3.6. KONČNI IZGLED PROTOTIPA Razčlenjeni pregled in razlago smo predstavili že v prejšnjem poglavju. V priloženih posnetkih zaslona vam predstavljamo še izgled spletnega mesta v celoti. Za lažji pregled smo spletno mesto razdelili v dva ločena dela (slika 46 in slika 47).

Slika 46: Prikaz prototipne rešitve 1.del



Slika 47: Prikaz prototipne rešitve 2.del



5. ZAKLJUČEK V diplomskem delu so predstavljeni najpomembnejši pojmi, povezani s sodobnim razvojem spletnih mest. Povzeli smo, kako pripraviti okolje WordPress do funkcionalne ravni na lokalnem strežniku. Definirali smo tudi uporabljene programske jezike in ostale sodobne spletne tehnologije, implementirane v končni prototip. Uporabili smo HTML, CSS, PHP in JavaScript, katere smo na praktičnih primerih tudi predstavili, ter tako poskušali dejstva predstaviti iz bolj funkcionalnega zornega kota. Celotna predloga je bila razvita popolnoma po meri (ang. from scratch) za potrebe končnega naročnika. Ker smo se že v osnovi zavedali težav, ki bi jih lahko povzročala nekompatibilnost med različnimi napravami (računalnik, mobilni telefoni …), smo uporabili okolje WordPress 4.8, s podporo Bootstrap-a 3.3.7. za zagotavljanje oblikovne odzivnosti spletnega mesta. Tako smo izdelali moderno in privlačno spletno mesto, ki podpira ustreza vsem sodobnim spletnim standardom. Prototip poleg možnosti osnovne spletne predstavitve organizacije ponuja še precej dodatnih funkcionalnost. Uporabljen je bil API za Google zemljevide, s pomočjo katerega brez dodatnih vtičnikov prikazujemo lokacijo, kjer bo podjetje opravljalo storitve. Implementirali smo tudi področje, kjer prikazujemo mnenja preteklih strank in galerijo njihovih zadovoljnih štirinožcev. Da bo drsenje po spletni strani še bolj gladko, smo uporabili knjižnico ScrollReveal, s katero animiramo določene gumbe in ikone. Spletna stran je grajena uporabniku prijazno, kar pomeni, da so željene informacije na voljo takoj, brez nepotrebnega brskanja in premikanja po spletišču in raznovrstnih menijih. Prizadevali smo si ponuditi enako kvalitetno uporabniško izkušnjo, ne glede na to, ali za ogled uporabnik uporablja računalnik, mobilni telefon, tablico, oziroma katero koli drugo mobilno napravo. Mnenja smo, da so nam zadani cilji uspeli, ter je predloga, iz katere se je razvila spletna stran pripravljena na selitev v produkcijsko okolje. Menimo, da smo glede na zastavljene cilje, pričakovanja več kot zadovoljivo izpolnili. S tem napovedujemo tudi prihodnji razvoj, pri čemer bomo pričeli z registracijo domene, zakupom gostovanja in selitvijo t.i. prototipa na produkcijsko okolje, na splet. Za nadaljnji razvoj predloge trenutno ne načrtujemo ničesar, saj menimo, da predloga več kot zadošča trenutnim potrebam. Vsekakor se strinjamo, da se bodo z razvojem podjetja pokazale tudi potrebe po dodatni funkcionalnosti spletne strani, katere bomo v nadaljevanju z veseljem implementirali. Razvojni del je z zaključkom diplomske naloge zaključen. Predviden je še izobraževalni del stranke, za uspešno uporabo in nadaljnje urejanje spletne strani, ter upravljanja vtičnikov. Vsekakor smo v dogovoru s stranko še naprej pripravljeni sodelovati pri nadaljnjem razvoju, podpori in vzdrževanju obstoječe rešitve.



VIRI IN LITERATURA ACF Documentations (24. 7. 2017). Advancedcustomfields.com. Pridobljeno 24. 7. 2017 na https://www.advancedcustomfields.com/resources/ Google Developers (25. 7. 2017). Google Maps for every platform. Developers.google.com. Pridobljeno 25. 7. 2017 na https://developers.google.com/maps/ Krebelj, P. (2015). HTML in CSS za začetnike. Ljubljana: Narodna in univerzitetna knjižnica Lavtar, M. (21. 2. 2013). Responsive design. Optiweb.com. Pridobljeno 22. 7. 2017 na https://www.optiweb.com/responsive-design/ Lavtar, M. (14. 2. 2014). Zakaj odprtokodni sistem?. Optiweb.com. Pridobljeno 21. 7. 2017 na https://www.optiweb.com/blog/zakaj-odprtokodni-sistem/ McCollin, R. in Blakeley Silver, T. (2013). WordPress Theme Development Beginner's Guide (3rd. ed.). Birmingham: Prackt Publishing Ltd. Munford, M. (22. 12. 2016). How WordPress Ate The Internet in 2016… And The World in 2017. Forbes.com. Pridobljeno 21. 7. 2017 na https://www.forbes.com/sites/montymunford/2016/12/22/how- wordpress-ate-the-internet-in-2016-and-the-world-in-2017/#6afeb671199d W3schools (20. 7. 2017). CSS Tutorial. W3schools.com. Pridobljeno 20. 7. 2017 na https://www.w3schools.com/css/ Williams, B., Damstra, D. in Stern, H. (2013). Professional WordPress: Design and Development (2nd. ed.). Indianapolis: John Wiley & Sons Inc. WordPress Codex (26. 7. 2017). Codex.wordpress.org. Pridobljeno 26. 7. 2017 na https://codex.wordpress.org/ WordPress Codex (25. 7. 2017). WordPress Lessons. Codex.wordpress.org. Pridobljeno 25. 7. 2017 na https://codex.wordpress.org/WordPress_Lessons WordPress Codex (25. 7. 2017). Plugin API. Codex.wordpress.org. Pridobljeno 25. 7. 2017 na https://codex.wordpress.org/Plugin_API WordPress Codex (26. 7. 2017). Theme Development. Codex.wordpress.org. Pridobljeno 26. 7. 2017 na https://codex.wordpress.org/Theme_Development Zandstra, M. (2004). Naučite se PHP. Ljubljana: Pasadena.

https://www.advancedcustomfields.com/resources/https://developers.google.com/maps/https://www.optiweb.com/responsive-design/https://www.optiweb.com/blog/zakaj-odprtokodni-sistem/https://www.forbes.com/sites/montymunford/2016/12/22/how-%09wordpress-ate-the-internet-in-2016-and-the-world-in-2017/#6afeb671199dhttps://www.forbes.com/sites/montymunford/2016/12/22/how-%09wordpress-ate-the-internet-in-2016-and-the-world-in-2017/#6afeb671199dhttps://www.w3schools.com/css/https://codex.wordpress.org/https://codex.wordpress.org/WordPress_Lessonshttps://codex.wordpress.org/Plugin_APIhttps://codex.wordpress.org/Theme_Development



KAZALO SLIK Slika 1: Odzivno oblikovanje spletne strani 5 Slika 2: Odzivno oblikovanje spletne strani glede na rotacijo zaslona 6 Slika 3: Privzeta WordPress struktura datotek 8 Slika 4: Vsebina datoteke "wp-config.php", pomembna za dostop do baze 9 Slika 5: WordPress namestitev 10 Slika 6: Potrebne tabele za delovanje WordPress-a 11 Slika 7: WordPress nadzorna plošča 11 Slika 8: Hierarhija WordPress predlog (povzeto po: Professional WordPress Design and Development, 2013) 12 Slika 9: Datoteke uporabljene za delovanje predloge 13 Slika 10: Prikaz splošne CSS sintakse (w3schools.com, 2017) 15 Slika 11: Prikaz CSS kode za selektor elementa 16 Slika 12: Prikaz CSS kode za ID selektor 16 Slika 13: Prikaz CSS kode za selektor razreda 16 Slika 14: Prikaz CSS kode z lastnostmi več razredov 17 Slika 15: Prikaz CSS kode razdruženih selektorjev 17 Slika 16: Prikaz CSS kode združenih selektorjev 17 Slika 17: Prikaz CSS kode za vnos komentarjev 18 Slika 18: Prikaz PHP kode za izpis naslova strani 19 Slika 19: PHP koda osnovne WordPress zanke 21 Slika 20: Prikaz vsebine datoteke index.php 21 Slika 21: Prikaz strukture navigacijskega menija 22 Slika 22: Preusmeritev neveljavnega zadetka na spletni strani 23 Slika 23: Vključitev datoteke “page-testimonials.php” v “index.php” 23 Slika 24: Vsebina datoteke functions.php 24 Slika 25: Prikaz delovanja vtičnika ACF 25 Slika 26: Google-maps.js – ustvarjanje novega zemljevida 26 Slika 27: Google-maps.js – ustvarjanje lokacijske točke 27 Slika 28: Google-maps.js - sredinska poravnava zemljevida 28 Slika 29: Google-maps.js – prikazovanje zemljevida 29 Slika 30: Klicanje Google Zemljevidov znotraj functions.php 30 Slika 31: Klicanje Google zemljevidov za prikaz, znotraj index.php 30 Slika 32: Vtičnik Bootstrap Shortcodes 31 Slika 33:Pregled minimiziranih JavaScript datotek 31 Slika 34: Pregled polj vtičnika Advance Custom Fields 32 Slika 35: Funkcija povezave zalednega (ang.backend) sistema z grafičnim vmesnikom 32 Slika 36: Prikaz strani za vnašanje in spreminjanje vsebine 33 Slika 37: Primer vnašanja in urejanja vsebine za ciljno stran (ang. Landing page) 33 Slika 38: Prikaz ciljne strani 34 Slika 39: Prikaz ciljne strani na mobilnih napravah 34 Slika 40: Prikaz osnovnih informacij in storitev 35 Slika 41: Prikaz odzivne prilagoditve mreže glede na napravo 35 Slika 42: Pregled galerije 36 Slika 43: Pregled odzivnega oblikovanja galerije 36 Slika 44: Pregled mnenj strank 37 Slika 45: Prikaz kontaktnih informacij 37 Slika 46: Prikaz prototipne rešitve 1.del 38 Slika 47: Prikaz prototipne rešitve 2.del 39

file:///C:/Users/Žan%20Vodnjov/Documents/1._Faks/3.%20letnik/Diplomska%20naloga/razvojPredlogeSpletneStrani.docx%23_Toc490751744



POJMOVNIK

Banner: pasica, prikazana na spletni strani

Core files: jedrne datoteke

FTP klient: orodje za dostop do datotek na strežniku

JavaScript: objektni skriptni programski jezik

PHP: programski jezik, ki se uporablja za razvoj dinamičnih spletnih vsebin

Responsive: odzivno oblikovanje spletnih strani za prikaz na različnih napravah

Root: korenski direktorij

Selector: definira katerim elementom pripadajo določena CSS pravila

Source code: izvorna koda

Widget: gradnik znotraj spletne strani

WordPress loop: PHP koda uporabljena za prikaz WordPress vsebine

Wysiwyg Editor: privzeti WordPress urejevalnik besedila

KRATICE IN AKRONIMI

API: Application programming interface: vmesnik za namensko Programiranje

CMS: Content management system: sistem za upravljanje vsebin

MathML: Mathematical Markup Language: matematični označevalni jezik

SQL: Standard query language: standardni povpraševalni jezik

SVG: Scalable vector graphic: prilagodljive vektorske grafike

W3C: World Wide Web Consortium: konzorcij za svetovni splet