UPORABA IN PODPORA JAVASCRIPT KNJIŽNIC V SISTEMU ZA UPRAVLJANJE VSEBIN WORDPRESS

UNIVERZA V MARIBORU FAKULTETA ZA ELEKTROTEHNIKO, RAČUNALNIŠTVO IN INFORMATIKO David Gojković UPORABA IN PODPORA JAVASCRIPT KNJIŽNIC V SISTEMU ZA UPRAVLJANJE VSEBIN WORDPRESS Diplomsko delo Maribor, september 2018

UNIVERZA V MARIBORU FAKULTETA ZA ELEKTROTEHNIKO, RAČUNALNIŠTVO IN INFORMATIKO David Gojković UPORABA IN PODPORA JAVASCRIPT KNJIŽNIC V SISTEMU ZA UPRAVLJANJE VSEBIN WORDPRESS Diplomsko delo Maribor, september 2018

UPORABA IN PODPORA JAVASCRIPT KNJIŽNIC V SISTEMU ZA UPRAVLJANJE VSEBIN WORDPRESS Diplomsko delo Študent: Študijski program: David Gojković Univerzitetni študijski program 1. stopnje Informatika in tehnologije komuniciranja Smer: Mentor: Somentor: Lektorica: Informacijski sistemi doc. dr. Marko Hölbl asist. Luka Hrgarek, mag. inž. inf. in tehnol. kom. mag. Petra Kunc i

ZAHVALA Iskreno se zahvaljujem mentorju doc. dr. Marku Hölblu in somentorju asist. Luki Hrgareku za strokovno pomoč in vodenje pri izdelavi diplomske naloge. Še posebej se zahvaljujem moji družini, ki mi je omogočila študij in me pri tem nenehno podpirala. Zahvaljujem se tudi sošolcem, ki so mi pomagali tekom študija. ii

Uporaba in podpora JavaScript knjižnic v sistemu za upravljanje vsebin Wordpress Ključne besede: WordPress, Javascript knjižnice, oblikovanje spletnih strani, sistem za upravljanje vsebin UDK: 004.774.6(043.2) Povzetek Večina spletnih strani danes stremi k čim večji funkcionalnosti in hkrati k dobremu estetskemu videzu. Pri zmanjševanju količine programiranja le-teh nam pripomorejo sistemi za upravljanje vsebin in knjižnice programskih jezikov. V diplomskem delu so opisani takšni sistemi in posamezne knjižnice ter ogrodja v programskem jeziku JavaScript. S pomočjo statističnih podatkov je prikazano, katere knjižnice se najbolj uporabljajo in podano je, kako se lahko te integrirajo v sistem za upravljanje vsebin WordPress. Na praktičnem primeru je prikazano, da lahko aplikacija, spisana s pomočjo ogrodja Angular, prikaže podatke iz sistema WordPress, ki jih pridobimo prek formata JSON. Podan je sklep, da JavaScript in knjižnice predstavljajo koristen dodatek sistemu, vendar za namenske spletne strani obstajajo boljše rešitve. iii

Use and support of JavaScript libraries in WordPress content management system Key words: system WordPress, Javascript libraries, website design, content management UDK: 004.774.6(043.2) Abstract Most of the websites today are aiming to have better functionality and at the same time a better aesthetic look. To reduce the amount of programming we use the help of content management systems and libraries of various programming languages. In this diploma thesis we describe such systems, individual libraries and frameworks of the programming language JavaScript. With the help of statistical data we view which libraries are used the most and we show how they can be integrated into the content management system, WordPress. On a straightforward practical example we demonstrate that an application written in Angular can show data from the system WordPress, acquired with the JSON data format. We conclude that JavaScript and it s libraries represent a useful addition to the system, although there are better solutions to purposive web sites. iv

KAZALO 1 UVOD... 1 2 SISTEMI ZA UPRAVLJANJE VSEBIN... 3 2.1 Sistemi za upravljanje vsebin... 4 2.2 Izbira primernega CMS... 5 2.3 WORDPRESS... 7 3 JAVASCRIPT KNJIŽNICE... 10 3.1 jquery... 10 3.2 Razlika med knjižnico in ogrodjem... 12 3.3 Ogrodje Angular... 13 3.4 React... 14 3.5 Ember.js... 16 3.6 Vue.js... 17 3.7 Podpora JavaScript knjižnic v sistemu WordPress... 19 3.7.1 WordPress REST API... 20 4 UPORABA JAVASCRIPT KNJIŽNIC... 21 4.1 Razvijalsko okolje... 21 4.1.1 Vgrajeni urejevalnik v sistemu WordPress... 22 4.2 Spletne aplikacije... 22 4.3 Predloga ali ustvarjanje nove... 23 4.4 Javascript in smernice oblikovanja... 26 4.5 Primer uporabe REST API... 27 5 SKLEP... 32 VIRI IN LITERATURA... 34 v

KAZALO SLIK IN TABEL Slika 2.1: Porazdeljenost uporabe CMS (v %) za prvih 1 000 000 strani... 5 Slika 3.1: Primer arhitekture z REST API... 12 Slika 3.2: Delovanje Angular aplikacije... 14 Slika 3.3: Primer MVC arhitekture z dodatkom ReactJS... 15 Slika 3.4: Diagram delovanja Ember.js aplikacije... 17 Slika 3.5: Hitrosti knjižnic v primerjavi z navadnim JavaScript (manjše število pomeni večjo hitrost)... 18 Slika 3.6: Število prostih mest za razvijalce JavaScript knjižnic... 19 Slika 4.1: Primerjava med»tradicionalnim«in sodobnim spletnim modelom... 23 Slika 4.2: Mnogim dobro znan izgled Material Designa... 27 Slika 4.3: Vtičnik za generiranje vsebine... 28 Slika 4.4: Vmesnik z ukazno vrstico... 29 Slika 4.5: Ustvarjena Angular aplikacija, ki nam prikaže prispevke s strani WordPress... 31 Tabela 2.1 : Primerjava nekaterih najbolj priljubljenih sistemov... 6 vi

1 UVOD Ustvarjanje spletnih strani je časovno zahteven postopek, ki zahteva tudi tehnično znanje. Čas pa lahko prihranimo s programsko kodo, ki je že ustvarjena in jo lahko znova uporabimo. Skupek takšnih funkcij in virov imenujemo knjižnice (ang. libraries). Prav tako so pri ustvarjanju in urejanju spletnih strani vedno bolj priljubljeni sistemi za upravljanje vsebin (ang. content management system, CMS), ki omogočajo spreminjanje elementov (besedilo, slike ipd.) brez znanja programskih in označevalnih jezikov, kot je HTML (ang. Hyper Text Markup Language). Takšni sistemi se osredotočajo predvsem na vsebino in manj na oblikovanje. Zaradi tega se uporabljajo oblikovne predloge (ang. template), ki so pogosto napisane v programskem jeziku JavaScript, enem od najpopularnejših programskih jezikov, ko gre za obdelavo informacij s strani odjemalca (ang. client-side). Namen diplomske naloge je raziskava korelacije med sistemom za upravljanje vsebin WordPress (temelji na programskem jeziku PHP) in JavaScript knjižnicami, ki so namenjene ustvarjanju t. i. čelnega dela (ang. front-end) spletnih strani. Glavni cilji, ki smo jih želeli doseči, so naslednji: ustvarjanje aplikacije s pomočjo sistema WordPress in knjižnic, ki bodo najbolj ustrezale po uporabnosti in podprtosti ter dostopnosti dokumentacije; analiza, kako se takšen sodoben pristop primerja s klasičnim ustvarjanjem strani; opredelitev tega, kaj so sistemi za upravljanje vsebin in katere vrste JavaScript knjižnic poznamo; analiza načina, s pomočjo katerega WordPress podpira JavaScript knjižnice (React, jquery ) in ogrodja (Angular, Ember, Vue.js ). 1

Obstaja več popularnih sistemov za upravljanje vsebin, kot sta Joomla in WordPress, vendar slednji poganja več kot 60 milijonov spletnih strani in ima največji delež uporabnikov ter ima precej obsežnejšo dokumentacijo, zato smo se omejili na sistem za upravljanje vsebin WordPress in peščico določenih odprtokodnih knjižnic JavaScript, ki so najpopularnejše glede na statistične podatke. Kljub določenim razlikam smo v pojem knjižnic vključili tudi ogrodja. V diplomski nalogi in praktičnem primeru smo zato pod terminom knjižnice razumeli vsa ogrodja in knjižnice, spisane z namenom oblikovanja spletnih strani. V analizo programske kode odprtokodnih rešitev se nismo poglabljali, saj to ni osrednja tema te diplomske naloge. Uporabili smo tudi vnaprej postavljene predloge in primerjali njihovo uporabo z ustvarjanjem rešitev»iz nič«. Predpostavili smo, da WordPress podpira JavaScript in knjižnice v določeni meri, vendar ne v popolnosti. Predpostavili smo tudi to, da obstaja boljši način uporabe le-teh, ter da v zasnovi spletne strani ne igrajo ključne vloge. Pri izdelavi diplomske naloge in spletne strani smo pregledali spletno literaturo oziroma dokumentacijo posameznih programskih rešitev in knjižnic. Pregledali smo tudi forume za razvijalce v skupnostih za WordPress in JavaScript knjižnice. Na podlagi pridobljenega znanja smo izbrali primerne knjižnice in jih v skladu s smernicami oblikovanja uporabili za izdelavo aplikacije, ki uporablja podatke iz sistema WordPress. Metode dela, ki smo jih uporabili so: zbiranje in pregled/analiza podatkov, analiza obstoječih rešitev in delo na praktičnem primeru. 2

2 SISTEMI ZA UPRAVLJANJE VSEBIN Sistemi za upravljanje vsebin (ang. Content Management Systems, CMS) so vrsta programske opreme, ki pomaga uporabnikom ustvarjati, upravljati in urejati vsebine (na spletnih straneh) brez potrebe po posebnemu tehničnemu znanju (Rouse, 2016). Namesto grajenja lastnega sistema za ustvarjanje spletnih strani, shranjevanje datotek in ostalih funkcij sistem za upravljanje vsebin poskrbi za osnovno infrastrukturo, tako da se lahko osredotočimo na tako imenovani čelni del naše spletne strani (ang. front end). Poleg sistemov, namenjenih spletnim stranem, obstajajo tudi takšni, ki se osredotočajo na druge funkcionalnosti, kot je upravljanje z dokumenti (Pick-a-web, 2018). Kot primer si poglejmo, kako se ustvari stran v izbranem CMS (WordPress). Brez podobnega sistema bi morali napisati HTML dokument in ga prenesti na strežnik. Namesto nas sistem opravi ta prenos s pomočjo vmesnika, ki je bolj uporabniško prijazen kot namenska orodja za FTP. V sistemu za upravljanje vsebin, kot je WordPress, uporabimo vmesnik in vnesemo želeno vsebino. Zelo podoben vmesnik najdemo pri vstavljanju datotek, kjer lahko uporabimo že naložene datoteke, ki se prikažejo v knjižnici medijev (ang. media library). V osnovi je sistem za upravljanje vsebin razdeljen na dva ključna dela: aplikacija za upravljanje z vsebino (ang. content management application, CMA ) del, kjer dejansko dodajamo in upravljamo vsebinski del z vmesniki, kot smo videli prej; aplikacija za dostavo vsebine (ang. content delivery application, CDA) del, kjer se v ozadju zgodijo procesi, ki poskrbijo za prenos in hrambo vsebine naložene v CMA (GoodRich, 2013). 3

2.1 Sistemi za upravljanje vsebin Sistem WordPress, ki smo ga delno že prikazali, je eden od primerov popularnega sistema za upravljanje vsebin. Najpogostejši tipi CMS sistemov so namenjeni izgradnji blogov in spletnih trgovin. WordPress ima približno 60 odstotkov tržnega deleža na spletnih straneh z znanim sistemom za upravljanje vsebin (W3Techs, 2018). Poleg programskih rešitev, ki izvirajo iz WordPressa, med priljubljenimi sistemi za upravljanje vsebin najdemo še (Mening, 2017): Joomla, Drupal, Magento, Squarespace. Obstaja še mnogo drugih podobnih komercialnih sistemov, ki se ponujajo večjim podjetjem (posledično je cena temu primerna) (Sudhir, 2016). Sistemi za upravljanje vsebin so danes zelo prilagodljivi. Nekateri so osredotočeni na določeno področje (npr. Magento in področje spletnih trgovin), vendar večina tovrstnih sistemov omogoča izgradnjo številnih vrst spletnih strani. Na primer WordPress se uporablja za: statične spletne strani, bloge, spletne trgovine, forume, portfelj (najpogosteje umetniki). 4

2.2 Izbira primernega CMS Tako kot pri mnogo programskih rešitvah, ne obstaja vsesplošna rešitev, ki je primerna za vsa okolja in situacije. Večina ljudi ima svojo subjektivno preferenco, vendar je težko najti objektivni razlog, ki nam pove, zakaj je določena rešitev najboljša. Pokazatelj kakovosti je lahko število uporabnikov in tržni delež. Omenili smo že, da na področju sistemov za upravljanje kakovosti prevladuje WordPress, kar je tudi vidno na sliki 2.1. Za večino vrst spletnih strani ponuja uporabniško prijazen vmesnik, ki se ga lahko prilagodi z vtičniki. Ni vedno najboljša rešitev, vendar je najboljša rešitev v večini primerov, saj najdemo za vsak namen primerno že ustvarjeno podlago. Porazdeljenost uporabe CMS 5 3 WordPress 41 51 Ostali Drupal Joomla Slika 2.1: Porazdeljenost uporabe CMS (v %) za prvih 1 000 000 strani (BuiltWith, 2018) 5

Tabela 2.1 : Primerjava nekaterih najbolj priljubljenih sistemov WordPress TYPO3 Joomla! Drupal Contao Licenca GNU GPLv2+ GPL GNU GPL v2 GPL LGPL Operacijski Cross- Cross- Cross- Cross- Cross- sistem platform platform platform platform platform Podprti spletni Strežnik s Apache, Apache, Strežnik s Strežnik s strežniki PHP in NGINX, MS IIS Nginx, MS IIS PHP podporo PHP in MySQL MySQL podporo podporo Podprte MySQL, MySQL, MySQL, MS MySQL, MySQL podatkovne MariaDB PostgreSQL, SQL Server, MariaDB, baze Oracle, PostgreSQL, PostgreSQL, Firebird, MS MariaDB SQLite SQL Server Vmesni PHP PHP, SQL, PHP PHP PHP sistemi JavaScript Dodatni vtičniki in razširitve Back-end na osnovi spletnega brskalnika 6

Funkcije Potreben je Potreben je Potreben poročanja vtičnik vtičnik je vtičnik (npr. za podatkovno rudarjenje) XML vmesnik Potreben je Potreben je Potreben je Potreben je Potreben vtičnik vtičnik vtičnik vtičnik je vtičnik Integracija Potreben je lastnih skript vtičnik Upoštevanje standardov (W3C) 2.3 WORDPRESS WordPress je odprtokodna programska oprema, s pomočjo katere se ustvarjajo spletne strani, namenjene različnih uporabnikom (blog, spletna trgovina ipd.). Zaradi preproste uporabe in prilagodljivosti je z razlogom najbolj priljubljen sistem za upravljanje vsebin. Najpogosteje je asociiran z blogi, čeprav podpira tudi ostale tipe spletnih strani. Prva izdaja WordPress sistema je bila na voljo 27. maja 2003 kot nadaljevanje b2/cafeloga, kjer sta bila glavna razvijalca Matt Mullenweg in Mike Little. Preveden je v več kot 50 jezikov, med katerimi je tudi slovenščina. Za delovanje potrebujemo strežnik, ki vsebuje podatkovno bazo (MySQL ali MariaDB), PHP in podpira HTTPS in na katerem je nameščen programski paket WordPress.org (WordPress, 2018). 7

Eden od glavnih razlogov, da se mnogi odločajo za uporabo WordPress sistema, je odprtokodnost, kar pomeni, da poleg glavnih razvijalcev lahko pri razvoju tega sodeluje kdor koli. Zaradi tega, ker je odprtokodni projekt, je sistem WordPress brezplačen. WordPress je prilagodljiv in razširljiv. Trenutno obstaja 56 tisoč vtičnikov, ki omogočajo preprosto spreminjanje izgleda spletne strani in dodajanje novih funkcionalnosti, kot so galerije slik in spletne trgovine (WordPress.org, 2018). Za ustvarjanje spletne strani z WordPressom ne potrebujemo tehničnega znanja, ker ima uporabniško prijazen vmesnik. Vmesnik za dodajanje nove vsebine je podoben urejevalnikom besedil, kot je Microsoft Word, ki je del programskega paketa Office, katerega uporablja več kot milijarda uporabnikov (Callaham, 2016). Zaradi priljubljenosti in razširjenosti lahko lažje poiščemo odgovore na vprašanja v povezavi s tem sistemom za upravljanje vsebin, ker obstaja ogromno število vodičev in dokumentacije. V pomoč so tudi forumi, na katerih sodeluje veliko število razvijalcev in oblikovalcev. Obstajajo tudi uradni forumi, ki jih najdemo na spletnem naslovu https://wordpress.org/support/. Poleg zgoraj naštetih razlogov je treba upoštevati tudi SEO (Search Engine Optimization). Ob namestitvi imamo že možnost optimizacije naše spletne strani, tako da nas spletni iskalniki lažje najdejo. Matt Cutts, nekdanji glavni vodja Google ekipe za spam, je javno hvalil, kako je WordPress učinkovit pri prej omenjeni optimizaciji za spletne iskalnike (Cutts, 2013). Poleg razlogov, podanih v poglavju 3.1, bomo opredelili še nekaj prednosti, ki jih ponuja sistem WordPress, in sicer: Stroškovna učinkovitost Nižja cena urejanja in vzdrževanja spletne strani. Zaradi preprostosti uporabe se lahko odločimo, da stran ustvarimo sami in brez razvijalca. Dostopnost Stran lahko spreminjamo kjer koli smo, dokler imamo dostop do spleta. Lažja optimizacija za spletne iskalnike Poleg že dane optimizacije lahko dodamo še vtičnike, ki ponujajo dodatno 8 funkcionalnost za ta namen. Primer takšnega vtičnika je Yoast SEO.

Predloge in odzivna spletna stran (ang. Responsive web design) Število mobilnih naprav in njihov promet je presegel število namiznih, zato je danes odzivna spletna stran skoraj že nujna. Že vključene predloge so primer odzivne spletne strani. Preprosta integracija z družbenimi mediji Obstaja veliko število vtičnikov, ki skrbijo, da so naše objave vidne tudi na vedno bolj popularnih družbenih medijih. Varnost Pogoste posodobitve pomenijo manjšo možnost vdora. Lažji prehod Novi razvijalci lažje nadomestijo stare, ker je dosti manj programske kode. Čeprav je sistem WordPress najbolj priljubljen, ima tudi nekaj napak: Hrošči Zaradi posodobitev tako v WordPress sistemu kot v vtičnikih pride do neželenih težav. Zmogljivost WordPress sam po sebi ni počasen, vendar lahko pride do upočasnitve, ko dodamo večje število vtičnikov. To se lahko omili s pomočjo vtičnikov za predpomnilnik, ampak to ni trajna rešitev. Ni primerno za vsakogar Slabost odprtokodnih sistemov je v tem, da podpora ni zagotovljena. Večja podjetja se zaradi tega odločajo za plačljive rešitve, ker lahko pričakujejo pomoč, ko pride do težav. Priljubljenost Zaradi popularnosti pride posledično do največ poskusov vdora. 9

3 JAVASCRIPT KNJIŽNICE»Knjižnica (ang. library) ali tudi programska knjižnica je v računalništvu zbirka podprogramov (oziroma funkcij) za pomoč pri izdelavi oziroma razvoju programske opreme. Knjižnice vsebujejo kodo in podatke, ki se jih da uporabiti v neodvisnih programih. Zaradi tega se programi izmenjujejo in spreminjajo modularno. Nekatere izvršne datoteke so lahko oboje, samostojni programi ali knjižnice, vendar večina knjižnic ni izvršljivih«(khan Academy, 2018). Obstaja več razlogov, zakaj bi želeli dodati JavaScript v WordPress spletno stran in prav tako več načinov implementacije, vendar moramo biti pri tem pozorni, saj lahko pride do ranljivosti sistema samega. Obstaja možnost, da ne najdemo WordPress vtičnika za želeno funkcionalnost (npr. predvajanje specifičnih videoposnetkov) in to lahko vključimo s pomočjo JavaScripta. JavaScript knjižnic je mnogo in vsaka ima svoj namen. V naslednjih poglavjih si bomo ogledali najbolj priljubljene in njihovo uporabo. 3.1 jquery jquery je preprosta odprtokodna JavaScript knjižnica, katere glavni namen je»pisati manj, narediti več«. Trenutno podpira naslednje brskalnike (jquery, 2018): Chrome: (trenutna verzija 1) in trenutna verzija, Edge: (trenutna verzija 1) in trenutna verzija, Firefox: (trenutna verzija 1) in trenutna verzija, ESR, Internet Explorer: 9+, Safari: (trenutna verzija 1) in trenutna verzija, Opera: trenutna verzija. Uporabna je za preproste naloge, ki ponavadi zahtevajo več vrstic programske kode in metod, ker jih poenostavi in zaradi tega jih lahko kličemo v eni sami vrstici. Poenostavi 10

tudi zahtevnejše stvari, za katere se uporablja JavaScript, kot so AJAX in DOM manipulacija (W3schools, 2018). V sodobnem spletnem razvoju igra veliko vlogo v dodajanju funkcionalnosti, ki delujejo s strani odjemalca, kar posledično zmanjša količino prenosa podatkov in izboljša uporabniško izkušnjo. Med primeri uporabe jquery najdemo tudi drsnike, pojavna okna, animacije ipd. Tukaj je mišljena možnost dinamičnega prikazovanja le-teh in ne ustvarjanje. Razvijalci lahko z uporabo jquery izvajajo nekatere dejavnosti brez vnovičnega nalaganja spletne strani, kot so premikanje po spletni strani, klici AJAX skript in upravljanje z dogodki, ko uporabnik klikne na določeni element. jquery je že v vključen v WordPress in vsebuje tudi nekaj ključnih pomožnih knjižnic. Razvijalci tem in vtičnikov lahko preprosto kličejo jquery metode in jih vključijo v lastne jquery skripte. Če želimo uporabiti to knjižnico v naši temi, moramo dodati lastno skripto v čakalno vrsto (WordPress queue). Dodamo lahko kateri koli del jquery Core ali kateri koli vtičnik, ki je že vključen v WordPress. Primer programske kode, kjer smo dodali JavaScript po meri: Izsek programske kode 3.1 : Primer uporabe jquery v WordPress <?php wp_enqueue_script('nasa_skripta', get_stylesheet_directory_uri(). '/js/nasa_skripta.js', array( 'jquery' ));?> 11

3.2 Razlika med knjižnico in ogrodjem Pogosto pride do zmede, ko se govori o JavaScript knjižnicah, ker so pogosto narobno označene kot ogrodja (ang. frameworks), čeprav obstajajo razlike. Ogrodje je vrsta knjižnice, vendar deluje nekoliko drugače. Ogrodja uporabimo za izgradnjo aplikacij ali spletnih strani v celoti. Tukaj lahko povlečemo vzporednico in lahko rečemo, da so ogrodja glede na namen podobna sistemu WordPress, ker ponujajo podlago za izgradnjo danega projekta. V primerjavi s klasičnimi knjižnicami so ogrodja dosti bolj strukturirana. Ogrodja lahko razdelimo v več kategorij: ogrodja za čelni del (ang. front-end), ogrodja za hrbtni del (ang. back-end) in ogrodja za polno izgradnjo (ang. full-stack). Čelni del skrbi za interakcijo z uporabnikom, hrbtni del skrbi za stvari v ozadju in full-stack kombinira oba dela. Ogrodja se lahko v sistemu WordPress uporabijo kot dodatek, kjer se CMS uporabi kot podlaga in aplikacija se nato gradi»povrhu«(slika 3.1). Slika 3.1: Primer arhitekture z REST API (Arunesh, 2015) 12

3.3 Ogrodje Angular Angular (pogosto znan pod imenom Angular 2+) je odprtokodna platforma za izgradnjo čelnega dela spletnih aplikacij in temelji na TypeScriptu (Microsoftova nadgradnja JavaScripta). Razvoj Angular vodi namenska ekipa pri Googlu in skupnost posameznikov ter podjetij. Platforma je popolna prenova produkta od ekipe, ki je razvila AngularJS. Razvijalci vidijo v Angular platformo, s katero preprosto gradimo aplikacije znotraj spleta in vsebuje integrirane prakse za reševanje težav pri razvoju (Angular, 2018). Na sliki 3.2 vidimo delovanje takšne aplikacije. Ko govorimo o platformi Angular, govorimo o JavaScript ogrodju, kot smo že omenili v prejšnjem poglavju. Uporablja se za izgradnjo t. i. aplikacij na eni strani (ang. Single Page Applications, SPA). SPA aplikacije navadno uporabljajo JavaScript okolje v brskalniku, da lahko oponašajo vedenje klasičnih spletnih strani. Ker niso popolnoma odvisne od strežnika, lahko počnejo stvari, ki jih običajno vidimo le v»native«aplikacijah. Poleg tega je komunikacija s strežnikom minimalna, kar posledično pomeni odzivnejšo aplikacijo. S pomočjo tehnologij, kot je Googlov Lighthouse, lahko te aplikacije postanejo skoraj nerazpoznavne v primerjavi z mobilnimi aplikacijami (npr. na Android sistemih). Odzivne aplikacije oziroma spletne strani so nuja, kajti 53 odstotkov uporabnikov bo zapustilo stran, če traja več kot 3 sekunde, da se naloži. Poleg tega pričakujejo, da bo premikanje gladko in brez upočasnitev (Google, 2018). Angular je bil prvotno namenjen za uporabo s programskimi jeziki JavaScript, TypeScript in Dart. Skozi čas je najbolj priljubljen jezik postal TypeScript. Ne samo zaradi boljše dokumentacije, ampak tudi zaradi pogostejših posodobitev. Sčasoma so razvijalci tega ogrodja izdelali orodja, ki skupaj delujejo kot dobro organizirana celota. Orodja, kot sta Angular-Cli in Angular Material, dodajo funkcionalnost, ki olajšajo delo. Primer takšnih funkcionalnosti so hitra generacija projektov, upodabljanje na strani strežnika in lepše komponente uporabniškega vmesnika. Zaradi tega lahko obravnavamo Angular ne le kot ogrodje, temveč tudi kot platformo. 13

Slika 3.2: Delovanje Angular aplikacije (Presa, 2015) 3.4 React React je JavaScript knjižnica, namenjena izgradnji uporabniških vmesnikov. Avtor je Jordan Walke, vendar razvoj nadaljuje ekipa pri Facebooku in skupnost individualnih razvijalcev ter podjetij. Uporabi se lahko tudi kot osnova za izgradnjo prej omenjenih SPA ali mobilnih aplikacij. Lastnosti, ki to knjižnico razlikuje od podobnih, so: Deklarativen jezik Ustvarimo lahko dizajn za posamezna stanja in zaradi tega se ob spremembi podatkov spremenijo le specifične komponente vmesnika. Posledica tega je programska koda, ki je lažja za branje in razumevanje. Osnove so komponente Gradimo gnezdene komponente, ki nadzorujejo lastna stanja, in jih združimo, da lahko ustvarimo kompleksnejše uporabniške vmesnike. Logika komponent bazira na JavaScriptu in posledično pride do lažjega prehoda informacij skozi aplikacijo oziroma spletno stran. Obširnost React je pogosto le del večjega sklopa knjižnic, ki gradijo spletno stran oziroma aplikacijo, zato je pomembno, da obstaja možnost dodajanja novih funkcionalnosti 14

brez vnovičnega pisanja že obstoječe programske kode. React se lahko tudi izvaja na strani strežnika s pomočjo Node.js okolja ali pa poganja mobilne aplikacije, kar se doseže s pomočjo React Native (Facebook-Github, 2018). React lahko opišemo kot pogled v arhitekturi Model-Pogled-Kontroler (ang. Model-View- Controller, MVC), kar je vidno tudi na sliki 3.3. Ogrodja, kot je Angular, že imajo lastne strukture za pogled v takšni arhitekturi, zato zamenjava ni potrebna. React ni nujno zamenjava, ampak le nadgradnja določenih delov uporabniškega vmesnika, ki se lahko znova uporabijo (ang. refactoring oziroma reusing). Slika 3.3: Primer MVC arhitekture z dodatkom ReactJS (Deutcsh, 2017) 15

3.5 Ember.js Ember.js je MVC (Model-View-Controller) JavaScript ogrodje, ki ga vzdržuje ekipa Ember Core (Yehuda Katz, Tom Dale in ostali). Razvijalcem omogoča razvoj SPA aplikacij, ki se grajene na osnovi REST arhitekture. Ember se uporablja na mnogih popularnih spletnih mestih, kot so LinkedIn, Vine, Nordstrom in Twitch.tv. Poleg tega da omogoča razvoj SMA, je možno s pomočjo Ember ustvariti tudi namizne in mobilne aplikacije. Primer namizne aplikacije, grajene s tem ogrodjem, je Apple Music. Elementi, ki jih najdemo v ogrodju Ember (slika 3.4), so: Route Route objekt predstavlja stanje aplikacije in je vezan na URL. Model Vsak route objekt ima na sebe vezan Model, ki vsebuje podatke, asociirane s trenutnim stanjem aplikacije. View View se uporabi za upravljanje z uporabniško sproženimi dogodki ali pa za dodajanje elementov v predlogo oziroma vnovično uporabo le-teh. Component Posebna oblika View je namenjena ustvarjanju elementov, ki se nato lahko znova uporabijo. 16

Slika 3.4: Diagram delovanja Ember.js aplikacije (Sehgal, 2018) 3.6 Vue.js Vue.js (v nadaljevanju Vue) je odprtokodno JavaScript ogrodje, ki je namenjeno izgradnji uporabniških vmesnikov. Integracija v projekte, ki vsebujejo ostale JavaScript knjižnice, naj bi bila lažja, saj je Vue ustvarjen z namero preproste integracije. Vue lahko funkcionira tudi kot ogrodje za izgradnjo Single Page aplikacij (SPA), vendar za to obstajajo boljše in hitrejše rešitve. Vue kot ogrodje ni najbolj priljubljeno, saj se številčno ne more primerjati s knjižnicami, kot je jquery, vendar je definitivno v vzponu. Vzrokov za to je več. Mnogi za to ogrodje niso niti slišali in Vue ni bil uporabljan pri razvoju aplikacij širšega obsega. Čeprav za sabo nima velike korporacije kot npr. Angular, se vseeno pojavi med najbolj obiskanimi repozitoriji na spletnem mestu GitHub (Motroc, 2018). 17

Razlogov za izbiro tega ogrodja je več, vendar so najpogostejši naslednji: Preprostost učenja Za začetek dela s tem ogrodjem potrebujemo le osnovno znanje HTML in JavaScripta. Pomaga tudi, da prevajalnik (ang. compiler) ni obvezen. Mnogi priporočajo to ogrodje kot začetno točko začetnikom pri delu z JavaScript ogrodji (Vue, 2018). Hitrost Vsa novejša ogrodja in knjižnice so hitre, saj je hitrost danes skoraj že pogoj, kar smo že omenili. V primerjavi z ostalimi ogrodji, kot je npr. React, se izkaže, da je Vue hitrejši, kar vidimo tudi na sliki 3.5 (Krause, 2018). Skupnost Ko delamo na projektu s pomočjo ogrodij, lahko naletimo na težavo in potrebujemo pomoč. Omenili smo že, da je repozitorij Vue zelo priljubljen in posledično lahko najdemo veliko skupnost razvijalcev, med katerimi je še vedno aktiven kreator tega ogrodja Evan You. 2,5 2 1,5 1 0,5 0 Navaden Javascript Vue 2.0 React 15.3 Angular 2.0.0 Vue 1.0.26 Slika 3.5: Hitrosti knjižnic v primerjavi z navadnim JavaScript (manjše število pomeni večjo hitrost) (You, 2016) 18

3.7 Podpora JavaScript knjižnic v sistemu WordPress Določene JavaScript knjižnice niso direktno podprte in jih pogostokrat niti ne potrebujemo. Ne potrebujemo back-end knjižnic oziroma ogrodij, saj za to poskrbi osnovna struktura WordPressa. Knjižnice, ki se mnogo bolj uporabljajo, so knjižnice, namenjene front-end delu naše spletne rešitve. Tukaj lahko tudi štejemo knjižnice za DOM (ang. Document Object Model) manipulacijo. Jezik, v katerem je sistem WordPress napisan, je PHP, ki je sam po sebi kompleksen in zmožen mnogih funkcionalnosti. JavaScript in knjižnice PHP kodo s strežnika prikažejo na vizualno privlačnejši način, saj je to pogosto tudi namen JavaScripta. Razvijalci vmesnikov delujejo na več področjih, med katerimi so tudi sistemi za upravljanje vsebin in število delovnih mest je temu primerno, kar vidimo tudi na sliki 3.6. Slika 3.6: Število prostih mest za razvijalce JavaScript knjižnic (Paul, 2018) 19

3.7.1 WordPress REST API Od različice 4.7 naprej je v WordPress vključen aplikacijski programski vmesnik (ang. application programming interface, API) za REST storitve (ang. Representational State Transfer). To pomeni, da nismo več odvisni od vtičnikov in ne potrebujemo zahtev prek PHP, temveč jih lahko pošiljamo skozi JavaScript. Praktično to pomeni, da lahko dostopamo do podatkov v back-end delu skozi zahtevke v čelnem delu, kar izboljšuje odzivni čas in povečuje funkcionalnost. Če želimo podatke o npr. člankih, preprosto pošljemo GET zahtevek (WordPress REST Doc, 2018). Izsek programske kode 3.2: Primer zahtevka po podatkih $response = wp_remote_get( 'http://spletna-stran/wp-json/wp/v2/posts') Za določene knjižnice obstajajo tudi vtičniki za lažje povezovanje, kar nam prihrani čas, ki bi ga potrebovali za pisanje programske kode. Dokumentacija je včasih pomanjkljiva in se zgodi, da moramo pregledati skozi repozitorij ter preizkusiti, na kakšen način deluje določena metoda. 20

4 UPORABA JAVASCRIPT KNJIŽNIC 4.1 Razvijalsko okolje Ko pride do potrebe po urejanju WordPress datotek, kot so na primer podlage, imamo na voljo dva različna načina spreminjanja. WordPress ima vgrajen urejevalnik (ang. built-in editor), ki nam omogoča urejanje prek spleta, v katerem koli spletnem brskalniku. Druga možnost je lokalno spreminjanje datotek, ki jih nato naložimo na našo spletno stran s pomočja FTP klienta (ang. File Transfer Protocol) (WordPress.org, 2018). WordPress urejevalnik je dovolj dober za osnovno spreminjanje, vendar je lažje in bolj smiselno, da uporabimo orodja, ki nam omogočajo več. Veliko razvijalcev uporablja integrirana razvojna okolja (ang. Integrated Development Enviroment, IDE). Najprej se moramo vprašati, za kateri programski jezik potrebujemo IDE. V našem primeru je to PHP zaradi sistema WordPress ter seveda JavaScript zaradi knjižnic. Vprašati se moramo tudi po namenu uporabe, ceni in funkcionalnostih. Najpomembnejša pa je seveda osebna preferenca. IDE programska oprema ima veliko zmožnosti, ampak včasih ne potrebujemo vseh. Takrat se odločimo za uporabo urejevalnikov, ki jih po izbiri nadgradimo. 21

4.1.1 Vgrajeni urejevalnik v sistemu WordPress WordPress vsebuje dva vgrajena urejevalnika, ki omogočata urejanje datotek direktno prek spletnega brskalnika. Imenujeta se Theme editor in Plugin editor. Do njiju dostopamo prek menija Administration: Za Theme editor: Administration Appearence Editor. Za Plugin editor: Administration Plugins Editor. Vrste datotek, ki jih lahko urejamo s pomočjo urejevalnika v WordPress, so (WordPress.org, 2018): HTML, PHP, CSS in TXT. Urejevalnika, ki sta vključena v WordPress, sta zelo osnovna po funkcijah in zato je priporočena uporaba drugih. Manjkajo funkcionalnosti, ki so za nekatere nepogrešljive. Primeri takšnih so iskanje oziroma zamenjava, označevanje sintakse in samodejno dokončevanje. 4.2 Spletne aplikacije Z izbranim sistemov za upravljanje vsebin WordPress lahko preprosto ustvarjamo spletne strani in v večini primerov, kjer želimo dodati ogrodje, kot je Angular, preidemo v razvoj spletne aplikacije. Zaradi povečanja števila mobilnih naprav, ki dostopajo do spleta, so v zadnjem času postale priljubljene spletne aplikacije. Spletne strani predstavljajo klasični razvoj, medtem ko spletne aplikacije predstavljajo sodobnejši pristop (slika 4.1). V času, preden so obstajale trgovine za aplikacije, je pojem aplikacije predstavljal programsko opremo z interaktivnim uporabniškim vmesnikom, vendar smo to programsko opremo morali posebej namestiti. V primerjavi s klasičnim spletom, kot so na primer blogi, spletne aplikacije predstavljajo bogatejšo uporabniško izkušnjo (ang. user experience, UX) in dostop do naprednih zmogljivosti spletnega brskalnika (Borodescu, 2013). 22

Za večino uporabnikov pojem spletne strani vključuje tudi spletne aplikacije, kar je tudi smiselno. Do obeh dostopamo s pomočjo spletnega brskalnika in potrebujemo le URL naslov. Kljub temu lahko razlikujemo spletne strani od aplikacij po interaktivnosti. Če spletno mesto vsebuje le statične podatke, tedaj lahko govorimo o spletni strani. 23 Slika 4.1: Primerjava med»tradicionalnim«in sodobnim spletnim modelom (Techsith.com, 2018) 4.3 Predloga ali ustvarjanje nove Spletne strani, ustvarjene v sistemu WordPress oziroma s pomočjo katerega drugega sistema za upravljanje vsebin, so lahko grajene po meri, kjer je stran zgrajena iz ničesar za določeno stranko/podjetje, da odgovarja njihovim potrebam. Obstaja pa tudi možnost uporabe že vnaprej narejene predloge oziroma»teme«kupljene s spleta ali pridobljene s spleta. Podobno velja za gradnjo aplikacij v ogrodju, kot je Googlov Angular. Obe metodi imata svoje prednosti in slabosti, vendar je v veliki meri odvisno od ciljev, potreb in seveda razpoložljivih sredstev. Spletna stran, grajena s predlogo (ang. template), je pogosto dobra izbira za manjše in preproste projekte. Prednosti so lahko naslednje: Cenovno ugodnejše Uporaba predloge pomeni, da je večina spletne strani že napisana in razvijalec ima posledično manj dela. Zaradi tega so strani s predlogami cenejše, čeprav mora razvijalec vseeno vložiti nekaj časa, da predlogo prilagodi.

Hitrejša implementacija Večina kode spletne strani je že napisane. Odvisno od vsebine je lahko spletna stran hitro pripravljena za uporabo. Glede na kompleksnost potrebujemo dosti več časa za izgradnjo strani po meri. Sodobnost predlog Najboljše predloge so tiste, ki so dobro zasnovane, omogočajo prilagajanje in sledijo sodobnim smernicam razvoja. Število slabosti je lahko večje, če razvijalec nima dovolj znanja oziroma izkušenj na tem področju. Generičnost Preprosto povedano, lahko pride do tega, da spletna stran izgleda preveč podobna drugi, kar lahko odvrne uporabnike. Dober razvijalec lahko to prepreči s kreativno uporabo grafičnih elementov in prilagajanjem predloge vsebini. Omejenost Določena mera prilagodljivosti obstaja, še posebej pri dražjih komercialnih predlogah, vendar smo vseeno omejeni pri parametrih znotraj predloge same. Težave pri parametrih so lahko preproste narave, kot je omejena izbira ikon, ali pa bolj kompleksne, kar nam otežuje dodajanje funkcionalnosti, ki si jih želimo. Redke posodobitve Večina predlog danes je odzivnih (ang. responsive design), kar pomeni, da se prilagodijo napravi in velikosti zaslona. WordPress se pogosto posodablja, kar ne moremo reči za nekatere predloge. Zna se zgoditi, da predloga ne deluje z najnovejšo verzijo sistema in smo prisiljeni uporabiti starejšo, kar lahko pomeni ranljivost spletne strani. Varnost Ljudje, ki pišejo škodljivo kodo, vidijo v spletnih mestih s predlogami dobro priložnost za vdor, ker lahko vdrejo v več strani naenkrat z manj truda, kajti napaka je lahko v predlogi sami. 24

Strani grajene po meri ali vsaj tiste, ki imajo po meri izdelano predlogo, večinoma nimajo nekaterih od slabosti, ki smo jih navedli za vnaprej pripravljene predloge. Najpomembnejše pri izdelavi takšnih strani je, da se dizajn prilagodi nam in ne obratno, kjer se moramo prilagoditi izbrani predlogi. Ostale prednosti vključujejo: manj omejitev kar si zamislimo, se lahko tudi realizira; pogoj je seveda cena; prilagodljivost in možnost sprememb skozi čas lahko ugotovimo, da ne potrebujemo le nov dizajn, ampak tudi nove funkcionalnosti; za razliko od strani s pripravljenimi predlogami, nimamo potrebe po tem, da bi začeli vse znova; lažje posodobitve ker imamo razvijalca za našo spletno stran, je spreminjanje lažje, ker že pozna način, kako je stran postavljena; boljši SEO optimizacija za spletne iskalnike je pogosto ena izmed znanj, ki jih imajo razvijalci rešitev za splet. 25

4.4 Javascript in smernice oblikovanja Oblikovanje in posledično izgled spletne strani je subjektiven. Vsaka spletna stran oziroma informacijska rešitev nasploh je posledica odločitev, ki so jo sprejeli razvijalci, in ena izmed pomembnejših je seveda izgled. Te odločitve ne moremo soditi in definitivno ločiti med napačnimi in pravilnimi. Obstajajo smernice, ki nam te odločitve olajšajo, vendar na njih ne smemo gledati kot na pravila. Seveda obstajajo načela, ki so do neke mere objektivna, ker temeljijo na človeškem dojemanju umetnosti. Primer tega je pravilo tretjin, ki ga pogosto videvamo v fotografiji. Razvijalci se ne ukvarjajo pogosto z načrtovanjem oblikovanja, vendar iščejo zgled v že obstoječih rešitvah. Veliko smernic nas opozarja, da mora oblikovanje biti povsod isto. Čas lahko prihranimo s pomočjo tako imenovanih sistemov za oblikovanje (ang. design systems), ki nam povedo, na kakšen način moramo implementirati določene gradnike. Predstavljajo enotno zalogo virov, ki so isti na vseh platformah. Google je razvil svoj lastni dizajn sistem, ki so ga poimenovali Material Design (slika 4.2). Opisali so ga kot»enotni sistem, ki združuje teorije, vire in orodja za izdelavo digitalnih izkušenj«(karthikeyan, 2018). Z uporabo Material Designa, izkoristimo skupek znanja in izkušenj korporacije, kot je Google. Na takšen način je možnost za napake manjša in pomeni, da prihranimo ogromno časa, ker nam ni treba razvijati lastne vizualne izkušnje. Večji razlog za uporabo je za mnoge subtilen. Uporabniki podzavestno asociirajo našo spletno mesto z Googlom, kar lahko pomeni večji nivo zaupanja ter občutka varnosti. Nekateri seveda tega ne želijo, saj je dizajn subjektiven, kar smo že omenili na začetku poglavja. Uporaba sistemov za oblikovanje je odvisna od programskega jezika oziroma ogrodij. Implementacija vseh pravil dizajn sistema, kot je Material Design, je dolgotrajen postopek, zato se odločimo za že ustvarjene rešitve. To je seveda odvisno od ogrodja, ki smo ga izbrali. Za ogrodje Angular obstaja rešitev Angular Material, kar ni presenetljivo, saj je produkt razvoja pri Googlu. Ostala ogrodja pa imajo komponente za Material Design 26

v rešitvah, ki jih je ustvarila skupnost. Primer priljubljene rešitve je Material-UI za knjižnico React. Slika 4.2: Mnogim dobro znan izgled Material Designa 4.5 Primer uporabe REST API Na praktičnem primeru želimo prikazati, kako deluje aplikacija (ustvarjena s pomočjo JavaScript ogrodja/knjižnice) v povezavi s sistemom za upravljanje vsebin WordPress. Želimo se osredotočiti na prenos podatkov prek REST API-ja in ne toliko na aplikacijo samo. Uporabili smo odprtokodne rešitve in z njimi ustvarili preprost projekt. Za strežnik in delovno okolje smo uporabili WAMP, ki je sposoben gostiti dinamične strani. Sistem za upravljanje vsebin je seveda WordPress in izbrano JavaScript ogrodje je Angular. Ustvarili smo spletno aplikacijo, ki prikazuje prispevke s spletne strani, napisane v WordPress. Najprej smo vzpostavili strežnik in sistem za upravljanje vsebin. Nato smo skozi NPM, ki je upravitelj paketov (ang. package manager) za JavaScript, zgradili našo aplikacijo. Ker nas zanima interakcija med sistemom WordPress in izbrano Angular aplikacijo, smo skozi REST API oziroma JSON pridobili podatke o vsebini. Za začetek smo potrebovali strežnik in delovno okolje. Tukaj smo se odločili za WampServer. V namestitev strežnika in sistema za upravljanje vsebin nismo podrobneje 27

posegali, saj to ni osrednja tema te diplomske naloge. Namestitev ni težavna, ker skozi to vodi namestitveni čarovnik. Preden namestimo WordPress, najprej potrebujemo novo zbirko podatkov v podatkovni bazi MySQL. Pri praktičnem primeru bomo v Angular aplikaciji prikazali prispevke, ki jih bomo ustvarili v sistemu WordPress s pomočjo vtičnika (slika 4.3). Slika 4.3: Vtičnik za generiranje vsebine Za tem smo ustvarili novo aplikacijo v Angular, ki uporablja Sass za oblikovanje. Uporabili smo Angular Command Line Interface in z ukazom, vidnim na sliki 4.4, ustvarimo novo aplikacijo. 28

V aplikacijo smo dodali še Angular Material. Slika 4.4: Vmesnik z ukazno vrstico S pomočjo Sublime Text smo ustvarili nov modul, kjer smo uporabili elemente Angular Materiala. Moduli so sestavljeni iz več komponent, ki smo jih omenili v poglavju 3.3. const materialmodules = [ MatToolbarModule, MatCardModule, MatButtonModule, ]; @NgModule({ imports: materialmodules, exports: materialmodules }) Izsek programske kode 4.1: Modul za Material Design Urediti moramo še datoteko app.module.ts in dodati prejšnji modul v imports sekcijo. Omenjeni modul je krovni modul, kjer moramo dodati vse ostale module, ki jih želimo uporabiti. 29

Izsek programske kode 4.2: Import sekcija v app.module imports: [ BrowserModule, BrowserAnimationsModule, AppMaterialModule ], Če želimo pridobiti podatke iz WordPressa, moramo najprej implementirati funkcionalnost za http, kar dosežemo z dodajanjem modula Angular HttpClient. V glavnem modulu dodamo naslednje in podobno kot prej dodamo izbrani modul v imports. Izsek programske kode 4.3: Uvoz modula za HTTP import { HttpClientModule } from '@angular/common/http' S pomočjo Angular Command Line Interface dodamo novo service datoteko za WordPress, ki ji dodamo naslov za JSON podatke. S pomočjo metode getposts pridobimo JSON podatke iz naslova, ki ga podamo kot parameter. Izsek programske kode 4.4: Metoda getposts getposts(): Observable<any[]> { return this.http.get<any[]>('http://localhost/wordpress/wpjson/wp/v2/posts?_embed', { params: { per_page: '6' } Za tem moramo urediti še html datoteko za prikaz. Tukaj smo uporabili element matcard za prikaz naslova prispevkov in vsebine. Izsek programske kode 4.5: HTML komponente za mat-card 30 <mat-card-header> <mat-card-title>{{ post.title.rendered }}</mat-card-title> <mat-card-subtitle>{{ post.date_gmt date }}</mat-card-subtitle> </mat-card-header> <img matcardimage

[src]="post['_embedded']['wp:featuredmedia'][0]['media_details'].sizes['m edium'].source_url"> <mat-card-content [innerhtml]="post.excerpt.rendered"></mat-cardcontent> <mat-card-actions align="start"> <a mat-button [href]="post.link">ogled</a> </mat-card-actions> </mat-card> Na sliki 4.5 vidimo, da so na strežniku z Angular aplikacijo prikazani prispevki s spletne strani, ustvarjene z WordPress. Slika 4.5: Ustvarjena Angular aplikacija, ki nam prikaže prispevke s strani WordPress 31

5 SKLEP Število uporabnikov na spletu vsak dan narašča. Vprašati se moramo, na kakšen način lahko največ uporabnikov privabimo s pomočjo vizualnih elementov. Videli smo, da je veliko število spletnih strani ustvarjenih s pomočjo sistemov za upravljanje vsebine, kjer prevladuje WordPress. V podobnih sistemih smo omejeni, ko pride do vizualnega oblikovanja spletnega mesta. Tedaj nastopijo JavaScript in razne knjižnice. Knjižnice in ogrodja so v veliki večini odprtokodne narave, kar je prednost, ko pride do pridobivanja znanja. S pomočjo privlačne spletne strani uporabnika privabimo, vendar je na koncu najpomembnejša vsebina. Diplomsko delo smo razdelili na dva dela, na teoretični in praktični del. V teoretičnem delu smo opisali izbrani sistem za upravljanje vsebin ter zapisali, zakaj ima na tržišču prevladujoč delež. Pogledali smo si tudi najbolj priljubljene JavaScript knjižnice, kjer smo vključili tudi ogrodja, ki smo jih tudi opisali ter primerjali z ostalimi. Ugotovili smo, da obstaja mnogo knjižnic, ki imajo vsaka svoj namen. Pogledali smo si tudi razlike med knjižnicami in ogrodji, ker jih mnogokrat napačno enačijo. Nato smo opisali način, s pomočjo katerega se lahko enostranske aplikacije povezujejo z izbranim sistemom za upravljanje vsebin. Podali smo tudi opis urejevalnikov, katere smo uporabili pri praktičnem delu, ter primerjali sodobni način razvijanja spletnih strani s klasičnim. Pri praktičnem delu smo vzpostavili delovno okolje s pomočjo programske opreme WampServer in namestili sistem za upravljanje vsebin, kjer smo s pomočjo vtičnika dodali vsebino. Ustvarili smo Angular aplikacijo ter jo prilagodili za prikaz vsebine, ki smo jo pridobili skozi WordPressov REST API. Uporabili smo Angular CLI (Command Line Interface), s pomočjo katerega smo ustvarili novo aplikacijo. Zaradi oblikovanja smo dodali tudi Angular Material. Komponente le-tega smo uvozili v aplikacijo samo. Za podatke smo dodali Angular modul za HTTP HTTPClient. Za tem smo ustvarili nov service, kjer smo ustvarili metodo getposts, v kateri smo dodali naslov, kjer se nahajajo JSON podatki. Za konec smo prilagodili HTML datoteko zaradi boljšega oblikovanja. 32

Ugotovili smo, da je generiranje aplikacij dokaj preprosto, saj imamo na voljo ogromno orodij in moramo le vnesti ukaze v ukazno vrstico. Čeprav nismo imeli strokovnega znanja iz ogrodja Angular, smo lahko zlahka našli koristne informacije v skupnosti ostalih razvijalcev in v uradni dokumentaciji. Težava, s katero smo se pogosto srečevali, je zastarelost podatkov, kajti uporabljene programske rešitve se pogosto posodabljajo in temu se je bilo treba prilagoditi. Težava je tudi v količini podatkov, kajti knjižnic je ogromno in s tem tudi dokumentacije. Pri podatkih smo pogosto naleteli na subjektivna mnenja, kot so opisi»najboljših«knjižnic. Objektivno ne moremo podati, katera knjižnica je najboljša, saj imajo različne cilje in različne metode za dosego le-teh. Področje spletnega razvoja se nenehno spreminja in s tem tudi sistemi za upravljanje vsebin. Če želimo biti konkurenčni, se moramo nenehno izobraževati. Čeprav je ogromno tehničnega dela, spoznamo, da je izdelava spletnih mest do določene mere tudi umetnost. WordPress in nekatere JavaScript knjižnice, kot je ogrodje Angular, bodo na tržišču verjetno še nekaj časa, ker za njimi stojijo ogromne skupnosti razvijalcev, ki bodo te rešitve tudi posodabljali. Vprašanje, ki se bo pojavilo v prihodnosti, je zmogljivost oziroma sposobnost umetne inteligence, ki bi lahko nadomestila razvijalce spletnih strani. Kot smo videli v diplomski nalogi, je oblikovanje spletnih mest do neke mere tudi subjektivno. Obstaja že nekoliko rešitev, ki s pomočjo umetne inteligence posnemajo priljubljene spletne strani in s tem tudi njihovo oblikovanje. Za nadaljnje delo bi se morda lahko osredotočili na pridobivanje izkušenj in znanja na področju knjižnic, omenjenih v tem diplomskem delu. Kot smo videli, je povpraševanje po takšnih razvijalcih veliko. Pogledali bi si lahko, kako deluje skupinski razvoj aplikacije v izbrani knjižnici in na kakšen način se uporabljajo sistemi za nadzor verzij. 33

VIRI IN LITERATURA [1] 1&1 Digital Guide. 1 & 1 Digital Guide, 2018. Dostopno na: https://www.1and1.com/digitalguide/hosting/cms/cms-comparison-a-review-ofthe-five-best-platforms/ [6. 5. 2018]. [2] Alsudani, F. in Casey, M., The Effect of Aesthetics on Web Credibility. People and Computers XXIII,(2009), str. 512 519. [3] Angular. Angular docs, 2018. Dostopno na: https://angular.io/docs [9. 8. 2018]. [4] Arunesh, P. wisdmlabs, 2015. Dostopno na: https://wisdmlabs.com/blog/demystifying-project-calypso-and-wordpress-comsnew-architecture/ [21. 8. 2018]. [5] Atom Discuss. Atom Discuss Forum, 2018. Dostopno na: https://discuss.atom.io/t/why-is-atom-so-slow/11376 [5. 8. 2018]. [6] Atom. Atom.io, 2018. Dostopno na: https://atom.io/packages [14. 8. 2018]. [7] Be.Mydo. bemydo.com, 2018. Dostopno na: https://www.bemydo.com/takingcontrol/wordpress-theme/ [24. 8. 2018]. [8] Borodescu, C. Slash Data, 2013. Dostopno na: https://www.slashdata.co/blog/2013/07/web-sites-vs-web-apps-what-theexperts-think [18. 8. 2018]. [9] BuiltWith. Trend BuiltWith, 2018. Dostopno na: https://trends.builtwith.com/cms [24. 8. 2018]. [10] Callaham, J. Windows Central, 2016. Dostopno na: https://www.windowscentral.com/there-are-now-12-billion-office-users-60- million-office-365-commercial-customers [27. 8. 2018]. 34

[11] Cutts, M. WordPress & CEO, 2013. Dostopno na : https://www.youtube.com/watch?v=3p-m2cbcjsk [1.9.2018] [12] Deutcsh, D. Medium.com, 2017. Dostopno na: https://medium.com/of-all-thingstech-progress/understanding-mvc-architecture-with-react-6cd38e91fefd [25. 8. 2018]. [13] Facebook-Github. GitHub, 2018. Dostopno na: https://github.com/facebook/react [13. 8. 2018]. [14] GoodRich, R. Business News Daily, 2013. Dostopno na: https://www.businessnewsdaily.com/5148-content-management-systems.html [22. 8. 2018]. [15] Google. Developers Google, 2018. Dostopno na: https://developers.google.com/web/progressive-web-apps/ [4. 8. 2018]. [16] jquery. jquery.com, 2018. Dostopno na: https://jquery.com/browser-support/ [24. 8. 2018]. [17] Kang, Y. in Kim, Y. Designing emotionally evocative homepages: an empirical study of the quantitative relations between design factors and emotional dimensions.. International Journal of Human-Computer Studies, (2003), str. 899 940. [18] Karthikeyan. Medium.com, 2018. Dostopno na: https://medium.com/beginners- guide-to-mobile-web-development/a-guide-to-google-material-design- 977315149ea5 [24. 7. 2018]. [19] Khan Academy. Khan Academy, 2018. Dostopno na: https://www.khanacademy.org/computing/computer-programming/html-cssjs/using-js-libraries-in-your-webpage/a/whats-a-js-library [4. 9. 2018]. [20] Krause, S.. StefanKrause, 2018. Dostopno na: https://stefankrause.net/jsframeworks-benchmark4/webdriver-ts/table.html [11. 8. 2018]. 35

[21] Mcfarlin, T. TomMcfarlin Practical WordPress development, 2016. Dostopno na: https://tommcfarlin.com/atom-packages-for-wordpress/ [8. 8. 2018]. [22] Mening, R. WebsiteSetup.org, 2017. Dostopno na: https://websitesetup.org/popular-cms/ [7. 8. 2018]. [23] Motroc, G.. JaxEnter, 2018. Dostopno na: https://jaxenter.com/github-trendingtensorflow-vuejs-142382.html [9. 8. 2018]. [24] Paul, A.. CubetTech, 2018. Dostopno na: https://www.cubettech.com/blog/areyou-using-javascript-technologies-top-5-things-to-expect-in-2018/[13. 8. 2018]. [25] Pick-a-web. Pick A Web, 2018. Dostopno na: https://www.pickaweb.co.uk/kb/what-is-a-content-management-system/ [4. 5. 2018]. [26] Presa, A. AlfonsoPresa, 2015. Dostopno na: https://alfonsopresa.wordpress.com/2015/08/29/creating-angular-2-applicationswith-plain-old-javascript-es5/ [10. 8. 2018]. [27] Rouse, M. WhatIs.com, 2016. Dostopno na: https://searchcontentmanagement.techtarget.com/definition/contentmanagement-system-cms [5. 8. 2018]. [28] Sehgal, K.. Medium.com, 2018. Dostopno na: https://medium.com/karunasehgal/discovering-ember-js-2e92e8d32e36 [3. 8. 2018]. [29] Sudhir, N. PixelMatic, 2016. Dostopno na: https://www.pixelmattic.com/blog/commercial-cms-for-publishers/ [11. 8. 2018]. [30] Techsith.com. TECHSITH = Technology Simple Intuitive Tutorial Home, 2018. Dostopno na: http://techsith.com/what-is-the-difference-between-a-website-anda-web-application/ [30. 5. 2018]. [31] Vue. Vue.js docs, 2018. Dostopno na: https://vuejs.org/v2/guide/ [11. 8. 2018]. 36