-

Organizacija in management informacijskih sistemov IZDELAVA SPLETNE STRANI ZA PODJETJE PHPSOS Mentor: doc. dr. Borut Werber Kandidat: Mirko MrĎa Kranj, februar 2017

ZAHVALA Zahvaljujem se mentorju prof. doc. dr. Borutu Werberju za strokovno pomoč in mentorstvo pri izdelavi diplomskega dela. Hvala tudi druţini in prijateljem za pomoč in nasvete pri izdelavi diplomskega dela.

POVZETEK V diplomskem delu smo opisali razvoj dinamične spletne strani za podjetje PHPsos. Predstavili smo sistem za upravljanje vsebin Joomla, v katerem smo naredili stran, pri čemer smo uporabili ustrezne vtičnike in komponente. Stran smo testirali na lokalnem računalniku s pomočjo spletnega streţnika WAMP. Grafično predlogo smo uredili z urejevalnikom besedila Notepad++. V diplomskem delu smo opisali izvajanje optimizacije spletne strani, ki pripomore k višji uvrstitvi spletne strani v iskalnikih. Predstavili in opisali smo spletno oglaševanje na Facebooku in Google Adwordsu, ki je najbolj učinkovit način oglaševanja, ter orodje Google Analytics, s pomočjo katerega spremljamo spletne statistike. V zaključku so podani SWOT-analiza ter predlogi za morebitni nadaljnji razvoj spletne strani. KLJUČNE BESEDE: - Sistem za upravljanje vsebin - Joomla - WAMP - Optimizacija spletne strani - Spletno oglaševanje ABSTRACT In my thesis, I have described the development of a dynamic website for the company PHPsos. We have introduced the system for managing contents, named Joomla, inside which we have created the website and used compatible plug-ins and components. It was tested on a local computer with a help of the web server WAMP. We have edited the graphics proposal with the text editor Notepad++. The thesis contains the description and implementation of optimization of our website, which contributes to higher ranking among websites in web browsers. We have introduced and described web advertising on Facebook and Google Adwords, which is the most efficient way of advertising, and also the Google Analytics tool, which we use to track and monitor web statistics. To conclude my thesis, I have provided a SWOT analysis, with further potential development of the website. KEYWORDS: - Content Management System - Joomla - Wamp - Website optimization - Online advertising

KAZALO 1. Uvod... 1 1.1. Predstavitev problema... 1 1.2. Predstavitev okolja... 1 1.3. Predpostavke in omejitve... 1 1.4. Metode dela... 1 2. Teoretične osnove... 3 2.1. Internet... 3 2.2. Spletna stran... 3 2.3. Varnost spletnih strani... 4 2.3.1. Vzdrţevanje spletnega mesta... 4 2.3.2. Zlorabe spletnega mesta... 4 3. Obstoječe stanje in procesi v podjetju... 6 3.1. Posnetek stanja... 6 3.2. Ugotovitve iz analize spletnih strani... 6 3.3. Kritična analiza... 9 3.3.1. Opredelitev smernic na podlagi pregleda zgledov iz prakse... 10 4. Tehnologija za izdelavo spletne strani... 10 4.1. Wamp... 10 4.2. Apache... 10 4.3. MySql... 10 4.4. Html... 10 4.5. Css... 11 4.6. Notepad++... 11 4.7. Mobilna spletna stran... 12 4.7.1. Odziven dizajn... 15 5. Cms... 16 5.1. Začetni stroški... 17 5.2. Prednosti CMS sistema... 17 6. Joomla... 17 6.1. Strukturna zasnova Joomle... 18 6.1.1. Komponente... 18 6.1.2. Moduli... 18 6.1.3. Vtičniki... 18 6.1.4. Grafične predloge... 18 6.2. Varnost spletne strani... 18

7. Namestitev programskega orodja... 20 7.1. Namestitev wamp streţnika... 20 7.2. Namestitev orodja joomla... 21 8. Izdelava spletne strani... 23 8.1. Namestitev grafične predloge... 23 8.2. Uporabljene razširitve... 24 8.3. Kreiranje menija... 26 8.4. Začetna stran... 27 8.5. Izdelava bloga... 30 8.6. Kreiranje novega poloţaja v grafični predlogi... 32 9. Optimizacija... 33 9.1. Kaj je optimizacija spletnih strani... 33 9.2. Nastavitve optimizacije... 33 9.2.1. Ne-www na www preusmeritev... 33 9.2.2. Meta oznake... 34 9.2.3. Meta naslov... 34 9.2.4. Meta opis... 34 9.2.5. Meta ključne besede... 34 9.2.6. Meta robots... 35 9.2.7. Zemljevid spletnega mesta... 35 9.2.8. Robots.txt datoteka... 35 9.2.9. Optimizacija slik... 36 9.2.10. Povratne povezave... 36 9.3. Google Analytics... 37 10. Spletno oglaševanje... 38 10.1. Facebook ads... 38 10.1.1. Postavitev Facebook oglaševalskega računa... 38 10.1.2. Ustvarjanje Facebook oglasa... 40 10.2. Google Adwords... 42 10.3. Načrtovalnik ključnih besed... 44 11. Zaključek... 45 11.1. Swot analiza... 45 Literatura in viri... 47 Kazalo slik... 49 Kazalo tabel... 50 Kratice in akronimi... 50

1. UVOD 1.1. PREDSTAVITEV PROBLEMA Primarni problem v podjetju PHPSOS s. p. je neprepoznavnost na trgu, kar je značilno za skoraj vsa nova podjetja. Ta problem je izrazit predvsem pri spletnih agencijah, saj se je število ponudnikov z enakimi storitvami močno povečalo, poleg tega pa nam delo»kradejo«tudi študentje, ki se učijo in delajo od doma preko napotnice za relativno zelo nizke cene in jim podjetja ne morajo konkurirati. Zaradi tega bomo rešitev poskušali najti z izdelavo spletne strani, oglaševanjem preko druţabnih omreţij in optimizacijo spletne strani. Poleg tega bomo dejavni na raznih forumih, kjer uporabniki iščejo izvajalce za spletne storitve, na primer Internet mojster najbolj poznani slovenski forum za spletne storitve. Poleg tega je pomembno pridobivanje novih strank, predvsem pa, da stare pri nas ostanejo. Zato se trudimo imeti konkreten, profesionalen odnos z vsemi naročniki. Treba se je drţati dogovorov in rokov ter kdaj priznati tudi kakšno napako, če se ta pojavi. Zaradi dobrih odnosov obstoječe stranke naše storitve priporočajo svojim znancem. 1.2. PREDSTAVITEV OKOLJA Podjetje PHPSOS se ukvarja z izdelavo spletnih strani. Je dokaj mlado podjetje, kar pomeni, da razvitost e-poslovanja te organizacije ni na visoki ravni. Stranke pridobiva preko e-pošte, foruma, nekaterih druţabnih omreţij, torej ima učinkovito komunikacijo. Naslednja stopnja je predstavitev podjetja na trgu s pomočjo spletne strani. Torej je izdelava nove spletne strani tisto, kar podjetje potrebuje, vendar pa ni edina rešitev. Mislimo, da bomo z aktivnejšo prisotnostjo na druţabnih omreţjih pripomogli k reševanju tega problema. 1.3. PREDPOSTAVKE IN OMEJITVE Glede na obstoječe stanje informacijske tehnologije v podjetju smo se odločili, da spletno stran izdelamo v odprtokodnem sistemu, zaradi pomanjkanja finančnih sredstev. Trenutno je to najbolj optimalna izbira, sčasoma pa bo potrebna nadgradnja oziroma prenova. 1.4. METODE DELA Pri izdelavi diplomskega dela smo uporabili naslednje metode: pregled konkurenčnih podjetij oziroma njihovih spletnih strani, analiza strokovne literature, za razvoj spletne strani smo uporabili spletni streţnik WAMP, Notepad++, PHP, CMS sistem Joomla, CSS in HTML jezik, SWOT-analiza. Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 1

Uporabili smo metodologijo prototipa, ki je primerna za nadaljnji razvoj. Prototip bo moţno razširiti oziroma nadgraditi v spletno trgovino, ki bo omogočala prodajo modulov za slovenski in tuji trg. Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 2

2. TEORETIČNE OSNOVE 2.1. INTERNET Internet je računalniško omreţje, katerega namen je povezovanje več omreţij skupaj. Sestavlja ga več deset tisoč računalniških omreţij, ki povezujejo več milijonov računalnikov s celega sveta. Sistem uporablja način paketno preklopljivih komunikacijskih protokolov TCP/IP. Tako se največje medmreţje enostavno imenuje internet. Spretnost povezovanja omreţij na ta način se imenuje internetno delovanje. V razširjenem izraţanju se izraz internet velikokrat nanaša na storitve, kot so svetovni splet (WWW), elektronska pošta in neposredni klepet (Ojsteršek, 2015). Internet omogoča večjo fleksibilnost delovnega časa in lokacije, predvsem zaradi dostopnosti in hitrih povezav. Danes je na voljo skoraj povsod in do njega dostopamo na različne načine, brez večjih teţav. 2.2. SPLETNA STRAN Na njej so prikazane različne informacije, podatki, slikovne vsebine, video posnetki, programi,... Jezik za opis spletnih strani je HTML (ang. Hyper Text Markup Language) in predstavlja osnovo spletnega mesta oziroma dokumenta. Pišemo ga lahko v vsakem urejevalniku besedil in je dokaj preprost, zato ga lahko kombiniramo tudi s PHP-jem in drugimi programskimi jeziki (Ivić, 2009). Več spletnih strani je povezano v celoto z enotnim URL-jem. Unikaten naslov spletnega mesta predstavlja domena, preko katere uporabniki dostopajo do spletne strani. Uporabljajo jih podjetja, organizacije, skupine in posamezniki. Namen spletne strani: prodaja in oglaševanje izdelkov, promoviranje podjetja, predstavitev informacij, na katerem podjetje deluje, komuniciranje s strankami,... Spletna stran mora biti moderna, uporabniku prijazna, z odzivnim oblikovanjem. Izbrati je treba ustrezne ključne besede, na podlagi katerih jo bodo obiskovalci našli, ko bodo iskali storitev (Ivić, 2009). Spletne strani lahko med seboj razlikujemo po različnih merilih. Razlikovati jih je moţno po: načinu delovanja (dinamične, pasivne streţniške strani), večpredstavnosti (statične, dinamične spletne strani), prilagojenosti za različne naprave in sisteme (Nonkovič, 2014). Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 3

Spletni portali so posebej oblikovane spletne strani z enotno prijavo, ki uporabnikom omogoča dostop do tistih vsebin, ki jih zanimajo. Poznamo običajne spletne portale (spletne strani, prilagojene za posameznega uporabnika ali skupino uporabnikov), podjetniške ali poslovne portale (znotraj organizacij) in spletne imenike. Spletni portal vključuje e-pošto, iskalnik, povezave do sorodnih spletnih strani in uporabnikom prilagojeno vsebino (Čeh, 2009). 2.3. VARNOST SPLETNIH STRANI Skoraj vsa podjetja se predstavljajo na spletu, veliko od njih svoje izdelke prodaja po celem svetu. Internet uporabljamo vsak dan, tudi za storitve spletnega bančništva. Podjetja na svojih spletnih straneh objavljajo novice, posamezniki in društva razne vtise in mnenja, torej potekata komunikacija in sodelovanje z drugimi člani, podjetji... Poskrbeti je treba za redno posodabljanje spletnega streţnika in nameščenega sistema za urejanje vsebin, pametno izbrati gesla ter prijave na streţnik omejiti na običajne internetne lokacije (Si-cert, 2014). Močno geslo, ki ne sme biti preveč enostavno oziroma pogosto. Priporočljivo je, da je sestavljeno iz različnih znakov (velike črke, male črke, števila, simboli) in dolgo najmanj osem znakov. Zanesljiv sistem, kar pomeni, da se za urejanje spletnega mesta prijavimo le iz zaupanja vrednih sistemov. Pogoste so namreč zlorabe, ki so posledica prijav iz okuţenih javno dostopnih sistemov, kot so na primer knjiţnice. Z rednim posodabljanjem streţnika in sistema za upravljanje z vsebinami poskrbimo za zaščito pred veliko večino napadov. Spletno stran je treba redno spremljati. Varnostna obvestila proizvajalca sistema za upravljanje vsebin je treba jemati resno. V tem primeru smo odgovorni sami ali pogodbeni vzdrţevalec (Si-cert, 2014). 2.3.1. Vzdrţevanje spletnega mesta Ključni pomen varnosti spletnega mesta je redno vzdrţevanje. Zaradi slabega ali neobstoječega vzdrţevanja pride do zlorab, ki imajo hude posledice. Za odpravo teh sta potrebna določen čas in denar. V primeru spletne trgovine bo stran nedostopna, dokler se teţave ne odpravijo. Izgubimo lahko potencialne stranke, kar vpliva na naše poslovanje. Splet je dinamično okolje in njegovemu razvoju moramo slediti tudi s svojim spletnim mestom. Če je v podjetju IT-osebje, se seznani s sistemom za upravljanje z vsebinami in prevzame skrb za vzdrţevanje. Sicer se je treba dogovoriti bodisi z izdelovalcem spletne strani, ponudnikom gostovanja bodisi s tretjim partnerjem. Vsekakor je dobro, da za redno vzdrţevanje spletnega mesta skrbi zanesljiv in strokoven izvajalec (Si-cert, 2014). 2.3.2. Zlorabe spletnega mesta Kraja gesel (ang. phishing) je v računalništvu nezakonit način zavajanja uporabnikov z namenom pridobivanja tujih osebnih podatkov. Napadalci uporabljajo»phishing«tehniko tudi za krajo drugih podatkov: gesel Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 4

elektronske pošte, številk kreditnih kartic, uporabniških računov (Si-cert, 2014). Zlonamerna programska oprema: Spletno mesto napadalci izkoristijo za širjenje zlonamerne kode: virusov, trojanskih konjev in računalniških črvov. Napadalec okuţi računalnik in nato prikrito spremlja njegovo delovanje, pri čemer izkorišča ranljivost operacijskega sistema. Onemogočanje spletnih mest pomeni, da je spletno mesto nedosegljivo zaradi porazdeljenega napada (ang. Distributed Denial of Service).»DDoS«napad je, ko nekdo pošlje streţniku veliko število zahtevkov za preobremenitev sistema ter posledično onemogoči delovanje spletne vsebine (Besal, 2015). Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 5

3. OBSTOJEČE STANJE IN PROCESI V PODJETJU 3.1. POSNETEK STANJA Na spodnji sliki (slika 1) procesa je razvidno, da se vse začne s stikom stranke z direktorjem. Stranka mu poda vse potrebne informacije za izdelavo spletne storitve. Direktor stranki posreduje prvotno ponudbo, na podlagi katere se stranka odloči, ali storitve potrebuje ali ne. Če stranka ţeli še kakšne dodatne storitve ali popravke, mu to sporoči in direktor dodela ponudbo. Stranka se na podlagi nove ponudbe odloči, ali jo sprejme ali zavrne. Če jo sprejme, podjetje izstavi račun. V primeru neplačane storitve nastane konflikt, ki se v najslabšem primeru rešuje s civilno toţbo. Slika 1: Procesi in podprocesi v proučevani organizaciji 3.2. UGOTOVITVE IZ ANALIZE SPLETNIH STRANI Pri analizi in pregledu spletnih strani konkurence je mogoče ugotoviti zelo raznoliko kakovost spletnih strani. Tabela 1 prikazuje, da ima konkurenčna stran A predstavitev organizacije, katalog izdelkov, storitev, cenik izdelkov/storitev, iskanje in naročanje izdelkov v katalogu ter prodajne aktivnosti, povezavo z druţabnimi omreţji, kot so Facebook in Twitter. Konkurenčna stran A na spletni strani nima poslovnega bloga, ima pa e-novice. Ponuja 14-dnevni brezplačni preizkus samostojne izdelave spletne strani. Konkurenčna stran B ima predstavitev podjetja, nima pa večjezične spletne strani. Ima poslovni blog, kjer objavljajo aktualne novice in s tem privabljajo obiskovalce. Stran vsebuje katalog in cenik Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 6

storitev. V podjetju so aktivni na Facebooku, Twitterju, YouTubu in Google+. Njihova stran je prilagojena različnim napravam in uporabniku prijazna. V iskalniku je na vrhu med zadetki, kjer imajo zakupljene nekatere ključne besede. Konkurenčna stran C nima večjezične spletne strani in povezave z druţabnimi omreţji, vendar je, po spletni strani sodeč, sledila modernejši tehnologiji. Nima poslovnega bloga, ampak svoje stranke o novih proizvodih in izdelkih obvešča preko e-novic. Na spletni strani ponujajo katalog in cenik izdelkov in storitev. V primerjavi s konkurenčno stranjo A je veliko bolj moderna in pregledna, vendar v iskalniku ni med prvimi zadetki. Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 7

Organizacij a Vpišite: Stopnje razvitosti Predstavite v organizacij e Izbira različnih jezikov (vpišite) Katalog izdelkov/st oritev Cenik izdelkov/st oritev Poslovni blog Naročanje izdelkov/st oritev Plačevanje izdelkov/st oritev Poprodajne aktivnosti Ostalo Konkurenčna stran A http:///www.s pletnestrani.si/ Konkurenčna stran B http://www.sple tnik.si/ Konkurenčna stran C http:// www.netart.si/ DA NE DA NE DA NE X x x x x x X x x X x x x x x X x x x x x X x x FB Twitter FB Twitter Google + YouTube x Tabela 1: Analiza konkurenčnih spletnih strani Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 8

3.3. KRITIČNA ANALIZA Podjetje ţal ne more biti brez spletne strani in to predstavlja velik plus. Spletna stran mora biti pregledna, urejena in predvsem moderna ter prijazna očem strank oziroma naročnikov. Za organizacijo, ki se ukvarja s tako dejavnostjo, to ne bi smel biti prevelik problem, niti strošek. Seveda bi morali oglaševati na čim več druţabnih omreţjih, kjer bi morali biti aktivni. Pregledali smo tudi ponudbo izdelave spletnih strani na druţabnem omreţju Facebook. Na sliki 2 je prikazanih nekaj ponudnikov spletnih storitev. Konkurenca je ogromna. Nekateri izmed ponudnikov, ki ima največ všečkov: Izdelava spletnih strani novisplet.com (http://www.facebook.com/spletne.strani) Izdelava spletnih strani Optiweb (https://www.facebook.com/optiweb) Izdelava spletnih strani 1AINTERNET (http://www.facebook.com/izdelava.spletnih.strani) Slika 2: Pregled ponudbe na Facebooku Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 9

3.3.1. Opredelitev smernic na podlagi pregleda zgledov iz prakse Glede na to, da ima skoraj vsaka organizacija, ki se ukvarja s to dejavnostjo, spletno stran, jo moramo imeti tudi mi. Spletna stran mora biti kakovostna in postavljena v čim hitrejšem času. Z njo in z oglaševanjem na druţabnih omreţjih lahko pridobimo več potencialnih strank. Spletna stran ima lahko tudi izbiro različnih jezikov, kar nam omogoča razširiti prodajo na druge oziroma tuje trge. Na podlagi zgledov iz prakse smo se odločili, da mora imeti spletna stran poslovni blog, kjer bodo objavljene aktualne novice. S tem bomo na spletno stran privabljali obiskovalce. Naš cilj je tudi optimizirati spletno stran, saj je to tudi eden od ključnih dejavnikov za pridobivanje naročnikov. Kasneje bomo uporabljali tudi e-novice, saj bomo svoje trţenjske aktivnosti usmerili neposredno na določene skupine obiskovalcev oziroma strank. 4. TEHNOLOGIJA ZA IZDELAVO SPLETNE STRANI 4.1. WAMP Kratica WAMP označuje skupek odprtokodne programske opreme, ki teče na najbolj razširjenem operacijskem sistemu Windows in skupaj z njim tvori popolnoma delujoč spletni streţnik, ki je sposoben gostiti dinamične spletne strani. Sistem sestavljajo: Windows kot operacijski sistem, Apache kot spletni streţnik, MySQL kot streţnik podatkovne baze, PHP kot skriptni jezik (Volarič, 2013). 4.2. APACHE Apache je spletni streţnik, namenjen širjenju spleta. Je najbolj popularen HTTP streţnik. Aplikacija je odprtokodna in redno vzdrţevana ter omogoča, da se prilagajamo našim potrebam (Apache, 2016). 4.3. MYSQL MySQL je odprtokodni sistem za upravljanje zbirk podatkov. Najbolj uporabljen jezik je SQL. Deluje po načelu odjemalec streţnik. Namestimo ga, kot sistem in je razdeljen na več streţnikov. Do podatkovne baze MySQL dostopamo z različnimi odjemalci, zbirkami ukazov in programskimi vmesniki (MySql, 2015). 4.4. HTML HTML (ang. Hyper Text Markup Language) je jezik, ki opisuje spletne strani. To počne s pomočjo značk ali etiket. Značke so velikokrat v paru, znotraj dveh značk pa je vsebina elementa. Prva značka lahko vsebuje tudi atribute (HTML, 2016). Na sliki 3 je prikazan osnovni primer HTML kode v Notepadu++. Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 10

Slika 3: Primer HTML kode 4.5. CSS CSS (ang. Cascading Style Sheets) so kaskadne slogovne predloge, ki jih določamo za vsak element v HTML. Shranjeni so v slogovnih predlogah. Z uporabo stilov CSS elementom določimo različne vrste oblikovnih lastnosti. Spreminjamo lahko barve, robove, ozadja, pisavo, poravnavo, razmike in odmike. Podloge so bile razvite z namenom konsistentnega načina podajanja informacij o stilu spletnim dokumentom (CSS, 2015). Na sliki 4 je prikazan primer naše CSS kode. Nekaj različnih vidikov CSS3 so funkcije, kot so:»radiusi«robnih mej,»box«sence, več slik za ozadje, tekst sence, večstolpiča postavitev, prosojnost CSS3 naredi animacije preproste in lahke (Gregag, 2016). Slika 4: Primer CSS kode Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 11

4.6. NOTEPAD++ Notepad++ je urejevalnik besedila, sposoben prikazati sintakso velikega števila programskih jezikov. Urejevalnik besedila omogoča, da lahko naenkrat gledamo in urejamo več dokumentov (Vessoft, 2016). Glavne lastnosti: sintaksa priljubljenih programskih jezikov, sintaksa poudarjanje in označevanje, makri podpora, sposobnost povezovanja vtičnikov, minimalna poraba sistemskih virov. 4.7. MOBILNA SPLETNA STRAN Mobilna spletna stran je povzetek spletne strani, prilagojen za ogled na mobilnih napravah in tabličnih računalnikih. Več kot polovica uporabnikov internet uporablja preko mobilnih naprav in ne preko namiznih in prenosnih računalnikov. Slika 5 prikazuje graf oziroma odstotek uporabnikov, ki pričakujejo brezhibno delovanje spletnih strani na vseh napravah. Kot prikazuje spodnja slika, se 61 % teh uporabnikov ne bo nikoli več vrnilo na spletno mesto, če se bodo pri njegovem nalaganju pojavile teţave. Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 12

Slika 5: Statistika delovanja mobilnih spletnih strani (Rus, 2016) Prednosti mobilne spletne strani: veliki gumbi, klikljiva telefonska številka (po kliku na telefonsko številko je moţno izbrati opcijo»pokliči«, stran mora biti odzivna), klikljiv naslov (po kliku na naslov se odpre zemljevid lokacije, s pomočjo katerega je moţno najti navodila za pot), krajši, prilagojen meni, ki vključuje le glavne menijske postavke, ki so za obiskovalca pomembne, preglednost ponudbe, galerij, tabel, moţnost za oddajo povpraševanja (Ogrinc, 2014). Na sliki 6 je prikazana naša začetna stran na mobilnih napravah. Slika 7 prikazuje prilagojen meni in druţabna omreţja. Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 13

Slika 6: Prikaz naše mobilne spletne strani Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 14

Slika 7: Prikaz menija v odzivnem oblikovanju 4.7.1. Odzivno oblikovanje Pri odzivnem oblikovanju se oblika oziroma velikost spletne strani prilagaja napravi, preko katere dostopamo. Namen takega oblikovanja je, da se pripravi le ena spletna stran, ki je primerna za več naprav (mobilni telefon, tablica, ipad). Z uporabo odzivnega oblikovanja povečamo vidljivost na spletni strani in pripomoremo k hitrejšemu nalaganju spletne strani na manjših napravah (Ogrinc, 2014). Slika 8 prikazuje, kakšne ločljivosti se uporabljajo za različne naprave. Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 15

Slika 8: Ponazoritev odzivnega oblikovanja (Lavtar, 2013) 5. CMS Sistemi za upravljanje vsebin (ang. Content Managament System) uporabniku na prijazen način omogočajo ustvarjanje, upravljanje in objavljanje različnih vsebin. Te programske rešitve omogočajo, da administrator pripravi osnovno predlogo spletne strani, uporabniki (posamezni uredniki) pa potem objavljajo vsebine v skladu s pravicami, ki jim jih dodeli administrator. Lastnosti in funkcionalnosti sistemov za upravljanje z vsebinami so si med seboj zelo podobne, saj delujejo po podobnem principu. Večina jih je zasnovanih modularno, kar pomeni, da so zelo fleksibilni v smislu spreminjanja in dodajanja novih modulov (Šalamun, 2014). Pomembne funkcionalnosti CMS sistemov so: oblikovanje in urejanje vsebin brez predhodnega znanja, moţnost integracije zunanjih CSS stilov, kar je z vidika samostojnega oblikovanja podobe spletne strani še kako pomembno, enostavno dodajanje slik, tabel, grafov in drugih povezav, urejanje strukture spletne strani, enostavno dodajanje dokumentov in datotek na spletno stran (.pdf,.zip datoteke ), moţnost uvoza in izvoza podatkov (v Word, Excel, ), kreiranje meta oznak, ki so pomembne za optimizacijo spletne strani, dodeljevanje upravljavskih pravic, moţnost administracije uporabnikov, večjezična podpora (Šalamun, 2014). Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 16

5.1. ZAČETNI STROŠKI Začetnih stroškov pri uporabi CMS sistema ni, saj je uporaba te programske opreme brezplačna. Stroški so pri vzpostavitvi, vzdrţevanju in nadgrajevanju spletne strani. 5.2. PREDNOSTI CMS SISTEMA Prednosti CMS sistemov so: enostavno in preprosto oblikovanje ter urejanje vsebin, povečini dodelana uporabniška izkušnja, pri izdelavi nismo omejeni s številom strani in menijev, zagotovljena podpora, cenejše vzdrţevanje, saj sami upravljamo spletno mesto, do njega dostopamo kadarkoli, potrebujemo le internet, omogoča dodeljevanje pravic upravljanja. 6. JOOMLA Joomla je eden najbolj popularnih odprtokodnih večjezičnih CMS sistemov na svetu, ki temelji na odprtokodni osnovi (spletni streţnik Apache, podatkovna baza MySql in podpora skriptnemu programskemu jeziku PHP). Aplikacija je dostopna pod GNU/GPL licenco. Sistem Joomla je sestavljen iz grafične predloge, komponent, modulov in vtičnikov. Grafičnih predlog je veliko za vse vrste storitev, njihova uporaba je zelo enostavna. V ozadju Joomle dodajamo razširitve in s tem na spletni strani omogočamo nove funkcionalnosti, kot so: predstavitev spletnih multimedijskih gradiv, galerija slik, spletni forum in klepetalnica, spletni dnevniki (blog), skladišča različnih vsebin, spletni koledarji, spletne trgovine, objavljanje aktualnih novic in spletnih anket (Šalamun, 2014). Joomla temelji na odprtokodni osnovi, kar pomeni, da aplikacijo lahko vsak uporabnik prilagodi svojim zahtevam. Za spreminjanje izvorne kode ne potrebuje dovoljenja in ima prost dostop. Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 17

6.1. STRUKTURNA ZASNOVA JOOMLE 6.1.1. Komponente Komponente so največje razširitve, ki lahko vsebujejo module in vtičnike. Sestavljene so iz dveh delov, administratorskega in osrednjega dela. Vidne so kot mini aplikacije in imajo v ozadju v zgornjem meniju svojo menijsko postavko (Joomla, 2016). 6.1.2. Moduli Moduli so bolj fleksibilne in lahke razširitve, ki poskrbijo za funkcionalnost spletne strani. Za razliko od komponent imamo na eni strani lahko več modulov, ki jih postavimo na katerikoli poloţaj spletne strani. S pomočjo upravitelja jih lahko urejamo, premikamo, objavljamo, dodajamo nove. Vsakemu modulu lahko dodamo pravice, naslov in poloţaj, kjer bo objavljen (Joomla 2015). 6.1.3. Vtičniki Vtičniki skrbijo za številne popestritve, vendar niso nikjer prikazani. Pri izvajanju katerega izmed delov Joomle (jedro, modul, komponenta) se sproţi dogodek. Vtičniki, ki so registrirani za aplikacijo za upravljanje tega dogodka, se izvedejo, ko je dogodek sproţen (Joomla, 2015). 6.1.4. Grafične predloge Predloga je v osnovi oblikovanje Joomla spletne strani. Z njo lahko spremenimo videz spletne strani. Z namestitvijo Joomle se namestijo tudi nekatere privzete predloge. Veliko predlog najdemo na drugih spletnih straneh; nekatere so brezplačne, ostale plačljive. Vsaki dodajamo komponente in module. Predloge ne vsebujejo vsebine in jih lahko izdelamo tudi sami, brez uporabe kodiranja in programiranja (Šalamun, 2014). 6.2. VARNOST SPLETNE STRANI Vsake toliko časa je treba izdelati varnostno kopijo, saj s tem preprečimo izgubo večjih količin podatkov ob vdoru na spletno stran. Uporabili smo komponento Akeeba Backup, ki omogoča izdelavo varnostne kopije na enostaven način. Slika 9 prikazuje uspešno izdelavo varnostne kopije naše spletne strani. S pomočjo Akeebe Kickstart varnostno kopijo lahko namestimo nazaj. Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 18

Slika 9: Izdelava varnostne kopije Posodabljanje Joomle je obvezno, saj starejše različice postanejo ranljive. Prav tako je treba preverjati, katere dodatke nalagamo, saj ravno preko njih najpogosteje pride do napada na spletno stran. Vse starejše komponente, ki jih ne uporabljamo več, je treba odstraniti. Na spodnji sliki (slika 10) je prikazano opozorilo, ki nas obvešča o novejših verzijah dodatkov. CMS sistem nas sam opozarja na posodobitev dodatkov. Slika 10: Obvestilo o posodobitvah Da bi preprečili oziroma blokirali pogoste napade na Joomlo, je potrebno preimenovati privzeto datoteko htaccess.txt. Datoteko enostavno preimenujemo iz htaccess.txt v.htaccess. V Joomla nadzorni plošči je potrebno vključiti»use Url Rewriting«, kot prikazuje slika 11. S tem omogočimo prikaz prijaznih URL-jev (ang. Uniform Resource Locator), kar pomeni, da bodo različne strani in podstrani v naslovu URL-ja prikazovale naslov prispevka oziroma kategorije. S tem dodamo dodatne informacije o poti na spletni strani v URL naslovu (natančnejša struktura strani), kar vpliva tudi na optimizacijo spletne strani. Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 19

Slika 11: Url Rewriting Če smo spletno stran izdelali v lokalnem omreţju, jo je treba prenesti na streţnik. Pred prenosom je datoteko configuration.php potrebno spremeniti iz zapisljive v nezapisljivo. Na streţniku smo v FTP-ju (ang. file transfer protocol) pod zavihkom»file manager«poiskali datoteke in mape naše spletne strani. Nahajale so se v mapi public_html. Tu smo spremenili pravice dostopa do datotek in map spletne strani. Do njih lahko dostopajo lastnik datoteke, skupina, ki ji pripada lastnik, in ostali uporabniki, ki lahko datoteke berejo, zapisujejo ali spreminjajo in izvajajo. Z desnim klikom na mapo ali datoteko smo izbrali dovoljenja datotek. V novem oknu smo spremenili dovoljenja za posamezne skupine uporabnikov, ki ne sme biti nastavljeno na 777, kar vsem uporabnikom omogoča dostop in spreminjanje datotek. Vse datoteke morajo biti nastavljene na dovoljenje 644 (lastnik lahko zapisuje, drugi berejo) in mape na 755 (lastnik lahko zapisuje, drugi berejo in izvajajo). Datoteka configuration.php mora imeti dovoljenje 444, samo branje.»register globals on«napadalcu na preprost način omogoči vsiljevanje svojih vrednosti spremenljivk, ki izvedejo zlonamerno kodo, zato ga je treba izključiti. V mapo php.ini dodamo kodo»register_globals=0«. V datoteko.htaccess dodamo kodo»php_flag register_globals off«. V datoteko php.ini dodamo kodo»alow_url_fopen = Off«in s tem napadalcu preprečimo izvesti kode, ki se nahajajo na njegovem streţniku. Zagotovimo zaščito pred vključitvijo datotek, ki so na našem streţniku. 7. NAMESTITEV PROGRAMSKEGA ORODJA 7.1. NAMESTITEV WAMP STREŢNIKA Preden začnemo z izdelavo spletne strani oziroma inštalacijo Joomla sistema, je treba namestiti WAMP streţnik, na podlagi katerega bo postavljena spletna stran. Na voljo je za 32- in 64-bitni operacijski sistem. Vse verzije WAMP streţnika (od 2.5 verzije dalje) ne delujejo na starejših Windowsih, delujejo samo na tistih, ki Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 20

so novejši od Windows XP. Pred prenosom streţnika je z uradne spletne strani Microsofta treba prenesti in namestiti razširitev, ki zagotavlja pravilno delovanje programske opreme in aplikacij. Streţnik smo prenesli brezplačno z njihove spletne strani. Ob uspešni namestitvi izberemo privzeti brskalnik, v katerem bomo stran urejali, in vnesemo PHP mail parametre. Samodejno se ustvari mapa www, v katero razširimo datoteko Joomla. V orodni vrstici se pojavi zelena ikona. 7.2. NAMESTITEV ORODJA JOOMLA Pred namestitvijo Joomle je potrebo preveriti priporočljive specifikacije, ki jih prikazuje slika 12. Orodje oziroma najnovejšo različico (3.4.8) smo brezplačno prenesli z njihove uradne spletne strani. Namestitveno datoteko smo razširili v mapo C:\wamp\www\mirko, kjer smo ustvarili svojo datoteko. Slika 12: Joomla specifikacije Nato smo v phpmyadminu, ki ga najdemo v orodni vrstici v meniju WAMP streţnika, ustvarili podatkovno bazo z imenom mire. Določili smo pravilo za razvrščanje znakov utf8_general_ci, kar pomeni, da bodo pri prikazu spletne strani upoštevani tudi šumniki. Utf-8 je najbolj pogosto uporabljen kodni nabor, ki se uporablja za prikaz spletne strani. Pri namestitvi programskega orodja smo v drugem koraku vpisali naslednje podatke: databe type: MySQli, host name: localhost, username: root, Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 21

password: pustimo prazno, database Name: mire, table prefix: privzeto. Pod host name smo obvezno vpisali localhost in pod username root. Database name je podatkovna baza, ki smo jo ustvarili v phpmyadminu. Po uspešni prijavi lahko začnemo z izdelavo spletne strani. Na spodnji sliki (slika 13) je prikazano ozadje sistema Joomla. Slika 13: Nadzorna plošča v Joomli Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 22

8. IZDELAVA SPLETNE STRANI 8.1. NAMESTITEV GRAFIČNE PREDLOGE Odločili smo se, da uporabimo brezplačno grafično predlogo, ki bo moderna in prilagojena vsem napravam. Pomembno funkcijo ima predvsem blog, kjer bomo objavljali aktualne novice o naših storitvah. Predloga ima tudi brezplačno podporo. Spodaj je prikazan načrt (slika 14), ki smo ga v nadaljevanju prilagodili svojim zahtevam. Začetna stran bo vsebovala informacije o storitvah in izdelkih, ki jih ponuja podjetje. Na ostalih podstraneh bodo podrobnejši opis storitev, podjetja, kontakt, poslovni blog in forum. Slika 14: Slika grafične predloge Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 23

V ozadju sistema, pod zavihkom extensions, kliknemo na manage, kjer naloţimo brezplačno predlogo, ki smo jo prenesli s spletne strani (http://www.icetheme.com/themes). Po uspešni nastavitvi predloge jo je potrebno nastaviti kot primarno. Na sliki 15 je prikazana naša predloga (it_zen), izbrana za primarno. Slika 15: Okno upravitelja predlog Predloga je pripravljena za izdelavo in oblikovanje spletne strani. V nastavitvah smo naloţili logo spletne strani in logo»responsive«spletne strani. Paziti moramo pri izbiri primerne velikosti. 8.2. UPORABLJENE RAZŠIRITVE Vse razširitve najdemo na uradni spletni strani (https://extensions.joomla.org/). Paziti moramo, da so vse prenesene z uradne spletne strani z dobrim ugledom, oceno. Dobro je, če preverimo tudi mnenja uporabnikov. Na spletni strani (https://docs.joomla.org/vulnerable_extensions_list) smo preverili ogroţene razširitve, ki bi lahko ogrozile našo spletno stran. Komponente JCE Editor Komponenta omogoča več moţnosti kot privzeti urejevalnik v Joomli (TinyMCE). Omogoča laţje vstavljanje slik, dokumentov, PDF dokumentov, prezentacij. Na spletni strani smo namestili komponento JCE Editor, ki smo jo prenesli s povezave: https://extensions.joomla.org/extensions/extension/edition/editors/jce/. V ozadju sistema Joomla, v zgornjem meniju, smo pod razširitvami izbrali Namesti, kjer smo poiskali izbrano datoteko in jo naloţili. Nameščeni urejevalnik smo nastavili za prevzetega. Pod globalnimi nastavitvami smo v oddelku Nastavitve strani zamenjali privzeti urejevalnik JCE Editor s TinyMCE. Spodnja slika (slika 16) prikazuje novi urejevalnik pri ustvarjanju prispevka. Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 24

Slika 16: JCE Editor Akeeba Backup Komponenta Akeeba Backup je namenjena izdelavi varnostne kopije Joomle. Izdela se lahko kopija celotne spletne strani z datotekami in vsebino podatkovnih baz. V primeru izgube podatkov ali dokumentov jih enostavno lahko obnovimo. Namestitev poteka podobno kot pri zgornji komponenti. V zgornjem meniju smo datoteko namestili pod razširitvami. Po namestitvi smo jo izbrali v meniju Komponente. Opravili smo konfiguracijo, ki se izvede samodejno. Čarovnik nam ponudi takojšnjo izdelavo varnostne kopije in konfiguracijo nastavitev varnostnega kopiranja. Izdelava kopije je enostavna in hitra. Kopije so shranjene v mapi, kjer je nameščena Joomla (administrator/components/com_akeeba/backup/). Na spodnji sliki (slika 17) je prikazana nadzorna plošča Akeebe Backup. Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 25

Slika 17: Nadzorna plošča Akeeba Backup Vtičnik piškotki Piškotki so majhne besedilne datoteke, ki se samodejno prenesejo na računalnik uporabnika, kadar obišče spletno stran. Vsebuje ţivljenjsko dobo piškotka, njegovo vrednost in ime streţnika, s katerega je bil poslan (Informacijski pooblaščenec, 2013). Vtičnik ima ţe integrirano podporo za Google Analytics in podpira piškotke za vodenje statistike, za namen oglaševanja, druţabna omreţja ter obvezne piškotke. Na sliki 18 je prikazan izgled piškotkov na spletni strani. 8.3. KREIRANJE MENIJA Slika 18: Izgled piškotkov na spletni strani V zavihku Menus smo ustvarili nov meni, v našem primeru glavni meni, ki je sestavljen iz zavihka Domov, O nas, Reference, Storitve, Forum, Prijava in Blog, kot prikazuje slika 19. Pod naslovom Domov smo izbrali Menu Item Type, torej kaj ţelimo, da se prikazuje na prvi strani. Označili smo Single Article in izbrali članek, ki bo prikazan na prvi strani. Spustni meni smo prav tako ustvarili v zavihku Menus. Pod naslovom Storitve smo dodali podstrani Izdelava spletnih strani, Izdelava spletnih trgovin, Optimizacija spletnih strani, Spletno oglaševanje in Izdelava spletnih aplikacij. Vsem tem podmenijem smo pod Parent Item, ki je na desni strani, označili Storitve. Slika 20 prikazuje glavni meni na spletni strani, ki smo jo dodatno uredili v Notepadu++. Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 26

Slika 19: Glavni meni Slika 20: Prikaz glavnega menija na strani 8.4. ZAČETNA STRAN Na začetni strani je na vrhu glavni meni, pod njim pa logotip podjetja. Desno zgoraj so gumbi za nastavitev jezika, saj ţelimo spletno stran sčasoma nadgraditi na večjezično in razširiti ponudbo oziroma znanje na tuje trge. Pod logotipom je podmeni Storitve podjetja. Na robu desne strani so druţabna omreţja, kjer lahko obiskovalci sledijo in spremljajo najnovejše ponudbe in akcije. V spodnjem desnem kotu je tudi Live Chat, ki uporabnikom omogoča hiter in enostaven način Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 27

posredovanja sporočila podjetju. Za oddajanje sporočila ni potrebna registracija ali prijava na spletni strani. Registracija in prijava omogočata uporabo foruma, kjer je moţno deliti mnenja z drugimi uporabniki. Na desni strani oziroma v sidebaru so Articles Category oziroma zadnje objave. Ta modul prikazuje najbolj brane in najnovejše objave oziroma članke, ki so bili dodani na spletni strani. Na spodnjem delu je zemljevid, kjer je prikazan sedeţ podjetja. Prikaz začetne strani je na sliki 21. Slika 21: Prikaz začetne strani Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 28

Stran O nas je sestavljena iz preprostega besedila in kontaktov podjetja. V spodnjem delu sta zemljevid in lokacija podjetja. V prispevek smo dodali kodo zemljevida, ki smo jo dobili na spletni strani Google maps (https://www.google.si/maps?source=tldso). Vpisali smo lokacijo podjetja in pod menijem izbrali skupna raba ali vdelava zemljevida. Pod zavihkom Vdelava zemljevida smo kopirali kodo in jo uporabili v našem prispevku s pomočjo JCE Editorja. Nastavili smo višino in širino zemljevida na 100 %. Na sliki 22 je prikazan zavihek O nas. Slika 22: Stran O nas Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 29

Na strani Storitve je opisan potek izdelave ponudbe za stranko. Na spodnjem delu strani (slika 23) je prikazana tabela z različnimi ponudbami paketov izdelave spletnih strani. Izdelali smo jo s pomočjo komponente Price Tables, ki je prilagojena za različne naprave. Slika 23: Prikaz strani storitve 8.5. IZDELAVA BLOGA Pod zadnjim zavihkom v spustnem meniju najdemo Blog. Poslovni blog je vrsta zapisov oziroma spletnih strani, namenjena poslovnim ciljem lastnika bloga. Poslovni blog sluţi: razdajanju znanja, obveščanju javnosti, privabljanju obiskovalcev na spletno stran, povezovanju potencialnih kupcev (Rinc, 2013). Na sliki 24 so prikazane zadnje objave na poslovnem blogu, ki smo jih izdelali sami. Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 30

Slika 24: Prikaz poslovnega bloga V sistemu Joomla smo v glavnem meniju izbrali Content Add New Article, kjer smo ustvarili nov artikel. Primer kreiranja artikla je prikazan na sliki 25. Pred tem smo za vsak artikel ustvarili nove kategorije, ki bodo prikazane na blogu. Pod oddelkom Dovoljenja dodajamo pravice za urejanje, objavljanje in brisanje blogov. Za vsak kreiran artikel lahko določimo ključne besede, opis in nastavimo, kdaj se določen članek objavi ali izbriše. Članki so objavljeni pod zavihkom Blog v glavnem meniju, zato bomo določenim oziroma tistim, ki jih ţelimo prikazati, dodali oznako Preberi več. Nastavili smo tudi število uvodnih besed, ki bodo prikazane pri vsakem članku pod zavihkom Blog. Pri ustvarjanju zavihka oziroma menija Blog smo pod Menu Item Type izbrali Category Blog, ki omogoča prikaz določenih artiklov. Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 31

Slika 25: Kreiranje članka 8.6. KREIRANJE NOVEGA POLOŢAJA V GRAFIČNI PREDLOGI Pri kreiranju novega poloţaja na spletni strani je treba narediti varnostno kopijo datotek, ki jih bomo spreminjali. V našem primeru bosta to dve datoteki, index.php in templatedetails.xml. Nov poloţaj bomo ustvarili v desnem zgornjem kotu, ki bo namenjen večjezičnosti spletne strani, saj podjetje svoje storitve ţeli razširiti na tuje trge. S tem bomo dosegli, da bodo imeli uporabniki iz drugih drţav moţnost izbire jezika na spletni strani. V datoteko index.php smo dodali kodo, ki je prikazana na sliki 26. Dodali smo jo za glavnim menijem, kar pomeni, da se bo nahajala na vrhu strani. Pred dodajanjem kode je treba preveriti strukturo spletne strani. Slika 26: Dodajanje kode v index.php Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 32

Datoteko smo shranili in odprli templatedetails.xml. Tu smo pod Positions dodali kodo: <position>newposition</position> (slika 27). V obeh primerih mora biti poimenovana enako. V datoteki template.css smo dodali še nekaj kode za stilski izgled oziroma prikaz pozicije na spletni strani. Slika 27: templatedetails.xml 9. OPTIMIZACIJA 9.1. KAJ JE OPTIMIZACIJA SPLETNIH STRANI Optimizacija spletnih strani je proces, s katerim izboljšamo vidljivost spletne strani v spletnih iskalnikih. Pri iskanju določene besede ali iskalnega pojma se uporabniku izpišejo zadetki v spletnem iskalniku po razvrščenem vrstnem redu. Optimizacija spletnih strani je dolgotrajen in dinamičen proces, saj je potrebno stalno prilagajanje oziroma spreminjanje strukture spletnih strani in vsebine (Mesarec, 2010). 9.2. NASTAVITVE OPTIMIZACIJE 9.2.1. Ne-www na www preusmeritev Do vsake spletne strani dostopamo preko dveh naslovov, na primer http://www.domena.si in http://domena.si. Uporabnike je treba preusmeriti na izbrano različico, saj iskalniki ti dve različici vidijo kot dve različni spletni strani. Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 33

Pri Apaache streţnikih, ki uporabljajo.htaccess datoteko, je treba na vrhu datoteke dodati spodnjo kodo, ki bo domeno preusmerila na www različico. RewriteEngine On RewriteCond%{HTTP_HOST}^domena.si RewriteRule (.*) http://www.domena.si/$1[r=301,l] Uporabljamo 301 preusmeritev, ki iskalnikom pove, da gre za trajno preusmeritev spletne strani (Smith, 2011). 9.2.2. Meta oznake Meta oznake so posebne kode, s katerimi se nadzoruje delovanje spletne strani. So informacije oziroma podatek o vsebini, ki se nahaja na spletni strani. Dodajamo jih v glavo HTML dokumenta oziroma strani med <head> in </head>. 9.2.3. Meta naslov Vsaka osnovna stran in podstran ima svoj naslov, ki je zelo pomemben za optimizacijo spletnega mesta. Najslabše je, če so vsi meta naslovi enaki (kar je precej pogosta praksa). Vsaka podstran mora imeti svoj naslov, v katerem se znajdejo ključne besede, za katere ţelimo, da se ta podstran pojavi v iskanih rezultatih. 9.2.4. Meta opis Meta opis na kratko opiše vsebino podstrani in se priredi vsaki podstrani. Tako meta naslov kot meta opis se prikaţeta v iskanih rezultatih. Meta opis se doda v glavo spletne strani, pri Joomli v ozadje spletne strani. Google prikaţe ključne besede, ki jih najde v meta opisu, naslovu, odebeljenem besedilu in s tem privablja obiskovalce na spletno stran (Mesarec, 2010). 9.2.5. Meta ključne besede Meta značke se uporabljajo pri izbiri ključnih besed, ki naj bi bile pomembne pri iskanju uporabljene spletne strani. Vse meta značke so v večini nameščene med <head> in </head> značkama v HTML kodi na spletni strani. Na sliki 28 so prikazane meta nastavitve v ozadju sistema Joomle. Ključne besede in besedne zveze se ločijo z vejico (Mesarec, 2010). Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 34

Slika 28: Meta nastavitve 9.2.6. Meta robots Z oznako meta robots se označijo določene spletne strani, ki naj se ne pregledajo oziroma sledijo povezavam z naše spletne strani na druge. V glavo spletne strani se med <head> in </head> doda <meta name=«robots«content=«index, follow«>. Pri Joomli se doda v nastavitvah, v ozadju spletne strani (Mesarec, 2010). 9.2.7. Zemljevid spletnega mesta Iskalniki omogočajo, da jim pokaţemo zemljevid spletne strani in jih s tem opozorimo na vse podstrani. Zemljevid dodamo v orodja za lastnike spletnih mest (Google Webmaster Tools) in na spletno stran (Mesarec, 2010). 9.2.8. Robots.txt datoteka Datoteka robots.txt je datoteka, ki je namenjena iskalnikom in jo najdemo skoraj na vseh dobro optimiziranih spletnih straneh. Iskalnikom pove, kje se nahaja sitemap.xml datoteka. Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 35

9.2.9. Optimizacija slik Pri izbiri slik za spletno stran moramo paziti na dimenzijo, velikost datotek in format slike. Primerna velikost slike je dimenzije 800 x 600. Pri večjih slikah je treba omogočiti izbiro ogleda slike v novem zavihku, pojavnem oknu ali s klikom nanjo. Velikost datoteke slike naj bi bila čim manjša, saj bomo s tem pripomogli k hitrejšem nalaganju spletne strani. Najbolj uporabljeni formati slik so jpg, gif in png. Vse slike, ki jih uporabljamo, naj bi bile v bazi Googla. Alt oznaka je pomemben dejavnik, ki vpliva na optimizacijo slik. Alt oznako vpišemo v kodo, ki prikazuje fotografijo. Z njo iskalnikom povemo, kaj slika prikazuje. Primer kode: <img src=«pot/do/slike.jpg«alt=izdelava spletne strani PHPsos«width=«100px«>. Pomembni dejavniki so tudi besedilo pod sliko, ime datoteke, velikost slike, notranje povezave, format slike. Vse to je treba uporabiti, saj optimizacija slik vpliva na ustvarjanje uspešnega spletnega portala in trgovine. Take slike se tudi pojavijo v rezultatih iskanja v spletnem brskalniku. Slike optimiziramo zato, da skrajšamo čas nalaganja spletne strani, jo naredimo bolj učinkovito in prijazno. 9.2.10. Povratne povezave Povratne povezave so povezave, ki iz drugih vodijo na naše spletno mesto. Povezave morajo biti kakovostne. Poznamo notranje in zunanje povratne povezave. Zunanje so povezave na drugih spletnih straneh, ki vodijo do naše in morajo biti kakovostne (slika 29). Pomembno je, da so te spletne strani visoko uvrščene v spletnih iskalnikih. Povratne povezave pridobivamo na različne načine: z objavo člankov na blogih, s promocijo na druţabnih omreţjih, z vpisom strani v spletne imenike, s komentiranjem forumov. Slika 29: Primer povratne povezave na blogu (Zajšek, 2017) Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 36

9.3. GOOGLE ANALYTICS Google Analytics je orodje za sledenje prometa ali obiska na spletni strani. Brezplačno orodje najdemo na povezavi http://www.google.com/analytics. Sistem se lahko poveţe z Google Adwords, Google Adsense in Google Webmaster Tools orodji. Kratka programska koda se doda na vsako podstran. V CMS sistemu jo dodamo v grafično predlogo na konec strani, pred </body> oznako (slika 30). Slika 30: Dodajanje Google Analytic kode v grafično predlogo Pod zavihkom ciljna skupina izvemo več o ciljni skupini, ki uporablja naše spletno mesto, torej dobimo statistiko obiska spletne strani v izbranem časovnem obdobju, starost in spol uporabnikov, jezik in lokacijo. Pogledamo lahko tudi, kakšen deleţ obiska dobimo iz mobilnih naprav. V okvirju pridobitev pod zavihkom kanali si lahko ogledamo bolj natančne podatke o tem, od kod obiskovalci prihajajo na našo spletno stran. Najprej vidimo statistike, torej odstotek obiskovalcev, ki naslov naše spletne strani vpišejo neposredno v internetni brskalnik. To so torej obiskovalci, ki ţe poznajo naslov spletne strani. Sledijo obiskovalci, ki na spletno stran pridejo preko povezav z drugih spletnih strani in obiskovalci, ki na našo spletno stran pridejo preko iskalnikov. Za optimizacijo spletnih strani je izredno pomemben tudi okvirček desno spodaj z naslovom ključne besede, ki prikazuje ključne besede, ki so jih iskali uporabniki, da so prišli na našo spletno stran. Pod zavihkom ogled celotnega poročila lahko vidimo podrobnejše informacije za vsako izmed ključnih besed. Tu so prikazane ključne besede, ki jih obiskovalci ţe uporabljajo za obisk naše spletne strani, vendar še niso visoko v iskalnih rezultatih. Pod tretjim zavihkom vedenje dobimo podatke o vedenju uporabnikov na naši posamezni strani oziroma podstrani: katere podstrani so največkrat obiskane, s katere uporabnik nazadnje odide, koliko časa se zadrţi na določeni podstrani in povprečen čas nalaganja strani. Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 37

Konverzija je zelo pomembno področje, ki ga moramo spremljati. Vsaka spletna stran ali spletna trgovina ima en cilj, to je pridobitev informacije oziroma kontakta od obiskovalca. Pod to lahko štejemo oddajo kontaktnega obrazca, prenos vodiča oziroma prijavo na e-novice, spletni nakup. 10. SPLETNO OGLAŠEVANJE 10.1. FACEBOOK ADS Facebook oglaševanje danes uporablja zelo veliko podjetij in organizacij. Predvsem mobilno oglaševanje je postalo eno izmed najboljših kanalov za povečanje prodaje. Glavna značilnost oglaševanja je, da lahko natančno ciljamo ljudi glede na spol, interese, starost, lokacijo (Adstar, 2016). Tipi Facebook oglasov: usmerjanje obiskovalcev na našo spletno stran, pridobivanje kontaktnih podatkov, promocija določenih izdelkov ali storitev, pridobivanje sledilcev in spodbujanje k interakciji, prenos ali promocija mobilne aplikacije, privabiti obiskovalce v spletno trgovino (Vidmajer, 2016). 10.1.1. Postavitev Facebook oglaševalskega računa V Facebook nastavitvah smo zagotovili plačevanje storitev. Na levi strani v nastavitvah smo pod zavihkom plačila izbrali moţnost»ads Biling«in pod zavihkom nastavitve računa izpolnili razpredelnico (slika 31). Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 38

Slika 31: Nastavitve plačevanja storitev V zavihku izdajanje računov smo izbrali Dodaj plačilno sredstvo in izbrali način plačila. Na sliki 32 je prikazan način izbire plačila s kreditno ali debetno kartico, PayPal računom in kuponom za oglas na Facebooku. Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 39

Slika 32: Izbira načina plačila 10.1.2. Ustvarjanje Facebook oglasa V meniju na Facebooku smo izbrali Ustvari oglase, kjer smo določili cilj, ki ga ţelimo doseči (promoviraj objavo, spletno stran, uporabnike usmeri na svojo spletno stran, promoviraj katalog izdelkov ), kot prikazuje slika 33. Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 40

Slika 33: Oglaševalska akcija na Facebooku Pri določanju ciljne skupine smo izbirali lokacijo, starost, spol in jezik (slika 34). Pri umestitvah smo izbrali platformo, na kateri bomo oglas prikazovali (mobilne naprave, računalniki...). Slika 34: Določanje ciljne skupine Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 41

V zadnjem koraku smo izbrali obliko oglasa, kjer smo vstavili sliko, naslov, opis in povezavo do naše spletne strani. 10.2. GOOGLE ADWORDS Pri ustvarjanju Google Adwords kampanje moramo jasno določiti cilje, torej kaj ţelimo doseči s kampanjo (slika 35). Izbiramo lahko med povečanjem prepoznavnosti blagovne znamke, pridobivanjem večje obiskanosti spletnega mesta, pridobivanjem več strank, povečanjem prisotnosti na spletnem mestu. Vsaka kampanja ima več oglaševalskih skupin, ki imajo več oglasov s ključnimi besedami. Pri ustvarjanju kampanje lahko izbiramo, na katerih napravah bomo oglaševali, na katere drţave, mesta in jezik bomo ciljali. Določimo tudi radij v km na določenem območju, kjer se bodo oglasi prikazovali. Google Adwords omogoča ciljanje na določena spletna mesta ter časovno prikazovanje oglasov. Slika 35: Določanje kampanje na Google Adwords Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 42

Na spodnjih dveh slikah (slika 36 in 37) je prikaz oglasa na računalniku in mobilnem telefonu. Google Adwords oglasi se prikazujejo na vrhu in na koncu strani spletnega brskalnika. Slika 36: Prikaz oglasa na računalniku Slika 37: Prikaz oglasa na mobilnem telefonu Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 43

10.3. NAČRTOVALNIK KLJUČNIH BESED Z Načrtovalnikom ključnih besed lahko raziščemo ključne besede, ki jih dodamo v oglaševalsko akcijo. Uporabili smo brezplačno orodje programa Google Adwords. Na uradni spletni strani Google Adwords (http://www.google.si/adwords/) smo se prijavili v ozadje sistema. Načrtovalnik ključnih besed se nahaja v zgornjem meniju pod zavihkom orodja. Na spodnji sliki (slika 38) so prikazani statistični podatki za izbrano ključno besedo ali storitev. Konkurenca za izdelavo spletnih strani je zelo velika in za posamezne ključne besede je treba odšteti veliko denarja. Slika 38: Prikaz Načrtovalnika ključnih besed Mirko Mrđa: Izdelava spletne strani za podjetje PHPSOS stran 44