Responsive website development with optimization and adaptation for Retina displays

Full text

(1)UNIVERZA V MARIBORU FAKULTETA ZA ELEKTROTEHNIKO, RAČUNALNIŠTVO IN INFORMATIKO. Uroš Podrekar. Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina Diplomsko delo. Maribor, julij 2015.

(2) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina Diplomsko delo. Študent:. Uroš Podrekar. Študijski program:. Visokošolski študijski program, Informatika in tehnologije komuniciranja. Smer:. Tehnologije multimedijskega komuniciranja. Mentor:. Viš. pred. mag. Boštjan Keţmah, dipl. gos. inţ. elektroteh.. i.

(3) ii.

(4) Zahvala Ob zaključku diplomskega dela se iskreno zahvaljujem vsem, ki so pri njegovem nastanku igrali kakršnokoli vlogo. Posebna zahvala gre mentorju, viš. pred. mag. Boštjanu Keţmahu, ki me je vodil od začetka do konca, in staršema, ki sta mi omogočila študij ter me ves čas podpirala.. iii.

(5) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina Ključne besede: odzivna spletna stran, zaslon retina, optimizacija za spletne iskalnike, spletni iskalnik, optimizacija na strani, optimizacija izven strani. UDK: 004.659:004.775(043.2). Povzetek V današnjem času je zelo pomembno, da se spletna stran prilagaja različnim velikostim zaslonov, saj prihaja več kot 50 % obiskovalcev na našo spletno stran z mobilnih naprav. Prav tako je pomembno, da je spletna stran dobro optimizirana za spletne iskalnike in tudi za zaslone Retina. V diplomskem delu smo predstavili metode, ki so potrebne za izdelavo odzivnih spletnih strani, metode, ki so nepogrešljive pri optimizaciji za spletne iskalnike, in metode, s katerimi poskrbimo, da je spletna stran prilagojena za zaslone Retina. Ugotovili smo, da izdelava takšne spletne strani še zdaleč ni preprosta, saj zahteva veliko raziskovanja in razmišljanja vnaprej, kot tudi nenehnega prilagajanja tehnologijam, ki se neprestano spreminjajo.. iv.

(6) Responsive website development with optimization and adaptation for Retina displays Keywords: responsive website, retina display, search engine optimization, search engine, on-site optimization, off-site optimization. UDK: 004.659:004.775(043.2). Abstract Nowadays it is very important that websites adapt to different screen sizes, since over 50% of visitors use mobile devices to access our website. It is also important that the website is well optimized for search engines and for Retina displays. The thesis presents methods which are necessary for the creation of responsive websites, methods which are indispensable in optimizing for search engines, and methods that make sure that the website is adapted for Retina displays. We found that creation of such a website is far from easy; it requires a lot of research and thinking in advance, as well as continuous adapting to technologies that are constantly changing.. v.

(7) KAZALO 1. UVOD .............................................................................................................. 1. 2. OPIS UPORABLJENIH TEHNOLOGIJ ........................................................... 2. 2.1. HyperText Markup Language – HTML ............................................................................................. 2. 2.2. Cascading StyleSheets – CSS ........................................................................................................... 3. 3. IZDELAVA ODZIVNE SPLETNE STRANI ...................................................... 4. 3.1. Kaj sploh je odzivna spletna stran?................................................................................................. 4. 3.1.1. Prilagodljive mreže........................................................................................................................... 4. 3.1.2. Prilagodljive slike ............................................................................................................................. 5. 3.1.3. Uporaba prilagodljive škatle ............................................................................................................ 6. 3.1.4. Medijska povpraševanja .................................................................................................................. 7. 3.2. Primerjava tehnologij za izdelavo odzivne spletne strani ............................................................... 8. 3.2.1. Razlaga primerjalne tabele .............................................................................................................. 9. 3.3. Mobile First pristop ...................................................................................................................... 12. 3.4. Meta značka »viewport« .............................................................................................................. 13. 4. SPLETNI ISKALNIK ...................................................................................... 14. 4.1. Kaj je spletni iskalnik? .................................................................................................................. 14. 4.2. Razgradnja iskalnika na posamezne dele ...................................................................................... 14. 4.2.1. Uporabniški vmesnik za iskanje ..................................................................................................... 14. 4.2.2. Pajki ................................................................................................................................................ 14. 4.2.3. Podatkovne baze ............................................................................................................................ 15. 4.2.4. Iskalni algoritmi .............................................................................................................................. 15. 4.2.5. Iskanje rezultatov in uvrščanje ....................................................................................................... 15. 5 5.1. OPTIMIZACIJA ZA SPLETNE ISKALNIKE .................................................. 17 Vrste optimizacij .......................................................................................................................... 17. vi.

(8) 5.2. Optimizacija na strani ................................................................................................................... 18. 5.2.1. Ključne besede ............................................................................................................................... 18. 5.2.2. URL naslov ...................................................................................................................................... 19. 5.2.3. Naslov spletne strani ...................................................................................................................... 20. 5.2.4. Meta značke ................................................................................................................................... 21. 5.2.5. Zemljevid spletnega mesta ............................................................................................................ 24. 5.2.6. Optimiziranje notranjih povezav (ang. internal links) .................................................................... 26. 5.2.7. Optimizacija hitrosti delovanja ...................................................................................................... 27. 5.3. Optimizacija izven strani .............................................................................................................. 37. 5.3.1. Grajenje povezav ........................................................................................................................... 38. 5.3.2. Povezava s socialnimi omrežji ........................................................................................................ 38. 5.3.3. Ustvarjanje zaznamkov .................................................................................................................. 41. 6. PRILAGODITEV STRANI ZA ZASLONE RETINA ....................................... 42. 6.1. Kaj so zasloni Retina? ................................................................................................................... 42. 6.2. Priprava slik za zaslone Retina ...................................................................................................... 42. 6.2.1. Uporaba brskalnika za samodejno skaliranje slike ......................................................................... 42. 6.2.2. Uporaba medijskih povpraševanj .................................................................................................. 44. 6.2.3. Uporaba odprtokodne skripte Retina.js ......................................................................................... 45. 6.2.4. Uporaba atributa»srcset« in HTML5 elementa »picture« ............................................................. 46. 6.2.5. Priprava preprostih grafičnih elementov za zaslone Retina .......................................................... 49. 6.3. Primerjava metod za prilagajanje spletne strani zaslonom Retina ................................................ 49. 6.3.1. 7. Razlaga primerjalne tabele ............................................................................................................ 50. SKLEP ........................................................................................................... 54. vii.

(9) KAZALO SLIK SLIKA 2.1: ENOSTAVEN HTML DOKUMENT ........................................................................... 2 SLIKA 3.1: PRIMER ODZIVNE SPLETNE STRANI [1] .................................................................. 4 SLIKA 3.2: IZHODIŠČNI HTML ZA PRIKAZ UPORABE PRILAGODLJIVE ŠKATLE ............................ 6 SLIKA 3.3: POSTAVITEV ELEMENTOV Z UPORABO PRILAGODLJIVE ŠKATLE ............................... 7 SLIKA 3.4: REZULTAT POSTAVITVE ELEMENTOV Z UPORABO PRILAGODLJIVE ŠKATLE ............... 7 SLIKA 5.1: VPLIV DOLŢINE ISKALNEGA IZRAZA NA PROMET [7] .............................................. 18 SLIKA 5.2: GOOGLE ADWORDS– RAZISKAVA KLJUČNIH BESED ............................................. 19 SLIKA 5.3: OPISNA META ZNAČKA – PRIKAZ NA SERP-U [9] ................................................. 22 SLIKA 5.4: SLAB IN DOBER META OPIS ................................................................................ 22 SLIKA 5.5: PRIMER XML ZEMLJEVIDA ................................................................................. 25 SLIKA 5.6: PRIMER HTML ZEMLJEVIDA [12] ........................................................................ 26 SLIKA 5.7: OPTIMALNA HIERARHIJA SPLETNEGA MESTA [13] ................................................ 27 SLIKA 5.8: GZIP KOMPRESIJA V PRAKSI [16] ........................................................................ 31 SLIKA 5.9: PRIMERJAVA VEKTORSKE IN RASTRSKE SLIKE PRI POVEČAVI [18] ......................... 34 SLIKA 5.10: PRIMER MINIFIKACIJE CSS KODE ..................................................................... 35 SLIKA 5.11: PRIMER MINIFIKACIJE JAVASCRIPT KODE .......................................................... 36 SLIKA 5.12: PRIMER UPORABE OSNOVNIH METAPODATKOV –OGP [20] ................................ 39 SLIKA 5.13: PRIMER UPORABE OPCIJSKIH METAPODATKOV – OGP [20] ................................ 40 SLIKA 5.14: PRIMER UPORABE STRUKTURIRANIH LASTNOSTI – OGP [20] ............................. 40 SLIKA 5.15: PRIMER OBJEKTA V SOCIALNEM GRAFU [20]...................................................... 41 SLIKA 6.1: PHOTOSHOPVS. GOOGLE CHROME– POMANJŠANJE SLIKE [23] ............................ 44 SLIKA 6.2: IMPLEMENTACIJA HTML5 ELEMENTA <PICTURE>[27] .......................................... 47 SLIKA 6.3: PRVI ELEMENT <SOURCE> ELEMENTA <PICTURE>[27]......................................... 48 SLIKA 6.4: DRUGI ELEMENT <SOURCE> ELEMENTA <PICTURE> [27] ..................................... 48 SLIKA 6.5: DEFINIRANJE NADOMESTNEGA TIPA Z ELEMENTOM <PICTURE> [27] ..................... 49. viii.

(10) KAZALO TABEL TABELA 2.1: OSNOVNE PRELOMNE TOČKE ZA MEDIJSKA POVPRAŠEVANJA .............................. 3 TABELA 3.1: PRIMERJAVA TEHNOLOGIJ ZA IZDELAVO ODZIVNIH SPLETNIH STRANI .................... 8 TABELA 6.1: PRIMERJAVA METOD ZA PRILAGAJANJE SPLETNE STRANI ZASLONOM RETINA ..... 50 TABELA 6.2: STATISTIKA AVTOMATSKEGA SKALIRANJA S STRANI BRSKALNIKA ....................... 51 TABELA 6.3: STATISTIKA ZAMENJAVE SLIK S POMOČJO MEDIJSKIH POVPRAŠEVANJ ................ 52 TABELA 6.4: STATISTIKA ZAMENJAVE SLIK S POMOČJO ODPRTOKODNE SKRIPTE RETINA.JS ... 52 TABELA 6.5: STATISTIKA UPORABE HTML5 ELEMENTA »PICTURE« IN ATRIBUTA »SRCSET« ... 53. ix.

(11) UPORABLJENE OKRAJŠAVE HTML – HyperText Markup Language – hipertekstovni označevalni jezik CSS – Cascading StyleSheets – kaskadne slogovne predloge PX – Pixel–zaslonska točka SEO – Search Engine Optimization – optimizacija za spletne iskalnike URL – Uniform Resource Locator – enotni lokator virov IP – Internet Protocol – internetni protokol XML – Extensible Markup Language – razširljiv označevalni jezik SERP – Search Engine Results Page – stran iskalnih zadetkov FTP – File Transfer Protocol – protokol za prenos datotek SSH – Secure Shell – varna lupina SSL – Secure Sockets Layer – plast zaščitenih vtičnic PHP – Hypertext Preprocessor – hipertekstovni predprocesor CDN – Content Delivery Network – omreţje za dostavo vsebine OGP – Open Graph Protocol. x.

(12) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. 1 UVOD Področje izdelave spletnih strani se je skozi leta hitro spreminjalo. S tem se je pojavila potreba po razvoju novih tehnologij, ki so pripomogle k hitrejši, enostavnejši in predvsem bolj bogati izdelavi spletnih strani. Nekatere izmed teh tehnologij so HTML5, CSS3 in AngularJS. Med tem časom se je hitro razvijalo tudi področje razvoja pametnih telefonov, dlančnikov in ostalih mobilnih naprav. S tem je narasla potreba po prilagajanju spletnih strani različnim napravam. Uspešne spletne strani pa ne predstavlja le njena prilagojenost različnim napravam, temveč tudi optimizacija za spletne iskalnike, optimizacija hitrosti delovanja in prilagoditev za zaslone Retina. Metode optimizacije za spletne iskalnike se vseskozi spreminjajo, na drugi strani pa metode za hitrost delovanja in prilagoditev zaslonom Retina ostajajo zelo podobne.. Bistvo in namen diplomskega dela je predstaviti in primerjati metode za izdelavo popolnoma odzivne spletne strani, njeno optimizacijo in prilagoditev za zaslone Retina. V prvem delu diplomskega dela so opisane uporabljene tehnologije in prikazane različne metode prilagajanja izgleda spletne strani različnim napravam. Osredotočili smo se na nekaj najpogostejših, kot so pametni telefon, tablični računalnik, prenosni računalnik in veliki zasloni. Podrobneje so opisana medijska povpraševanja, s katerimi zaznamo velikost naprave in temu primerno prilagodimo spletno stran. V drugem delu so podrobno opisane ključne metode za optimizacijo spletne strani za spletne iskalnike. Predstavljene so različne metode optimizacije na strani, kot tudi metode optimizacije izven obsega strani. Zaključni del je posvečen predstavitvi in primerjavi posameznih metod za prilagajanje spletne strani zaslonom Retina.. 1.

(13) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. 2 OPIS UPORABLJENIH TEHNOLOGIJ 2.1 HyperText Markup Language – HTML Označevalni jezik HTML (ang. HyperText Markup Language, hipertekstovni označevalni jezik) je v letu 1990 razvil Tim Berners-Lee. Uporablja se za izdelavo elektronskih dokumentov, drugače imenovanih spletne strani. Sestavljen je iz vnaprej definiranih elementov, izmed katerih ima vsak točno določeno vlogo. Namenjen je opisovanju strukture spletne strani, vendar ne za opisovanje izgleda oz. prikaza, in spletnim brskalnikom omogoča pravilno interpretacijo elementov. HTML5 Je nadgradnja označevalnega jezika HTML4. Dodanih je bilo veliko novih elementov, ki pripomorejo k boljši semantičnosti elektronskega dokumenta. To so elementi section, article, aside, header, hgroup, footer, nav, figure, figcaption, video, audio, track, embed, mark, progress, meter, time, ruby, rt, rp, bdi, wbr, canvas, command, details, datalist, keygen in output.Prav tako je bilo dodanih nekaj elementov, ki omogočajo vnos podatkov. To so elementi tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range in color. Spremenila se je tudi oblika deklaracije elektronskega dokumenta, ki je sedaj veliko preprostejša in čistejša (Slika 2.1, vrstica 3).. Slika 2.1: Enostaven HTML dokument. 2.

(14) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. 2.2 Cascading StyleSheets – CSS CSS (ang. Cascading StyleSheets, kaskadne slogovne predloge) je programski jezik za opisovanje slogov prikaza HTML elementov na spletni strani. Ustvarjen je bil z namenom ločevanja vsebine od oblikovanja. V zadnjih letih je prišla do izraza tudi njegova lastnost prilagajanja spletnih strani različnim velikostim naprav, kar je izvedeno s pomočjo medijskih povpraševanj (ang. media queries). CSS kodo lahko v spletno stran vključimo na tri načine, in sicer kot vrinjeno kodo, kodo, podano v glavi dokumenta, ali kot zunanjo datoteko.. Elemente spletne strani naslavljamo s tako imenovanimi selektorji. Z njimi brskalniku povemo, kateri slogi pripadajo določenemu elementu. Elemente lahko naslavljamo glede na tip, atributa »id« in »class« ali relativno glede na pojavitev v dokumentu. Poznamo tudi psevdorazrede in psevdo elemente, s katerimi izberemo le del elementa(npr. first-letter, before, after) oziroma ga spreminjamo glede na stanje (npr. hover, active, visited, link). MEDIJSKA POVPRAŠEVANJA Prilagajanje. izgleda. posameznim. napravam. doseţemo. s. pomočjo. medijskih. povpraševanj, s katerimi določimo prelomne točke, pri katerih se izgled in oblika spletne strani spremenita. Prelomnih točk je zaradi raznolikosti naprav veliko, v večini primerov preveč, da bi upoštevali vsako izmed njih. Nekaj najpomembnejših je prikazanih v spodnji tabeli (Tabela 2.1).. Tabela 2.1: Osnovne prelomne točke za medijska povpraševanja. Mobilni pristop. Namizni pristop. @media only screen and (min - width : 320px). @media only screen and (max - width : 320px). @media only screen and (min - width : 480px). @media only screen and (max - width : 480px). @media only screen and (min - width : 768px). @media only screen and (max - width : 768px). @media only screen and (min - width : 992px). @media only screen and (max - width : 992px). @media onlyscreen and (min - width : 1200px). @media only screen and (max - width : 1200px). 3.

(15) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. 3 IZDELAVA ODZIVNE SPLETNE STRANI. 3.1 Kaj sploh je odzivna spletna stran? Z izrazom odzivna spletna stran imamo v mislih takšne spletne strani, ki se prilagajajo vsem napravam z različnimi velikostmi vidnega polja in različnimi orientacijami zaslona (portrait, landscape)(Slika 3.1). To je moţno doseči z naborom tehnik, ki poskrbijo, da stran na vsaki napravi izgleda optimalno in uporabniku ponuja preprosto navigacijo s čim manj spreminjanja velikosti (ang. resizing) in pomikanja (ang. scrolling). Te tehnike so uporaba prilagodljivih mreţ (ang. fluid grids), prilagodljivih slik (ang. fluid images), prilagodljive škatle (ang. flexible box ali flexbox) in medijskih povpraševanj.. Slika 3.1: Primer odzivne spletne strani [1]. 3.1.1 Prilagodljive mreţe V preteklosti so bile spletne strani sestavljene iz elementov, katerih velikost je bila podana z absolutnimi enotami, kot je npr. število zaslonskih točk (ang. pixel). Ta tehnika se je prenesla iz industrije tiskanja, kjer so bile revije in časopisi vedno istih dimenzij, zato s takšnim načinom definiranja velikosti ni bilo nobenih teţav. Ker so spletne strani v sedanjosti prikazane na različnih velikostih naprav, vse od mobilnega telefona do televizije, njihovo odzivnost doseţemo z uporabo relativnih enot, kot so npr. odstotki. [1] 4.

(16) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina Formula za prehod iz absolutnih enot (v tem primeru zaslonskih točk) v relativne (v tem primeru odstotke) je zelo preprosta, in sicer: tarča / kontekst = rezultat Za primer vzemimo spletno stran, katere glavni vsebnik je širine 960 px, stran pa gledamo na zaslonu s širino 1920 px. V tem primeru je širina okna brskalnika kontekst, širina vsebnika pa tarča. Vrednosti preprosto delimo s pomočjo zgornje formule in dobimo rezultat 50 %. Ista formula velja za vse potomce glavnega vsebnika. Izračunane vrednosti lahko preprosto uporabimo v CSS datoteki v povezavi z lastnostjo »width«. [1]. 3.1.2 Prilagodljive slike Za prilagajanje slik poznamo več učinkovitih tehnik, izmed katerih vsaka pride prav v določeni situaciji. Najpreprostejša je tehnika, pri kateri odzivnost slike doseţemo z eno samo vrstico CSS kode, in sicer: img { max-width: 100%; } S to preprosto, vendar učinkovito kodo brskalniku sporočimo, da slika nikdar ne sme presegati originalne velikosti, podane v zaslonskih točkah, s čimer poskrbimo, da slika nikoli ne bo popačena. V primeru, da je slika gnezdena znotraj HTML elementa (npr. <div>), ki je manjših dimenzij kot slika, se bo le-ta skrčila tako, da bo ustrezala velikosti starša. Za primer vzemimo sliko širine 800 px, ki jo ugnezdimo v starševski element širine 600 px. V tem primeru se bo slika zaradi zgornje kode skrčila na primerno širino, višina pa bo izračunana samodejno s strani brskalnika, da se ohrani originalno razmerje med širino in višino.. 5.

(17) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. 3.1.3 Uporaba prilagodljive škatle Prilagodljiva škatla je nova tehnologija, ki spada pod okrilje CSS3. Ponuja nam razporeditev HTML elementov na spletni strani na tak način, da brskalnik predvidi, kdaj se mora vsebina prilagoditi različnim velikostim vidnega polja oz. naprav. Za veliko aplikacij uporaba prilagodljive škatle pomeni izboljšavo prej uporabljenega blokovnega načina razporeditve elementov, saj ni potrebe po uporabi plavajočih elementov (ang. float). [2] Potomce glavnega elementa, ki uporabljajo prilagodljivo škatlo, lahko razporedimo v katerokoli smer. Prav tako jim lahko določimo prilagodljive dimenzije, da se samodejno prilagajajo velikosti vidnega polja. Postavitev elementov je zaradi omenjenega veliko enostavnejša, prav tako lahko kompleksne postavitve doseţemo z laţjo, čistejšo kodo, saj vrstni red prikaza elementov ni odvisen od vrstnega reda elementov v HTML kodi. [2] Oglejmo si preprost primer implementacije prilagodljive škatle. Na spodnji sliki (Slika 3.2) je prikazana osnovna hierarhija postavitve elementov, ki jih bomo razvrstili horizontalno, enega poleg drugega. Namesto plavajočih elementov smo uporabili preprosto CSS kodo (Slika 3.3), s katero starševskemu elementu določimo, naj se obnaša kot prilagodljiva škatla (display: flex;) in naj se potomci razvrstijo v horizontalni vrsti (flex-direction: row;) (Slika 3.4). Del kode, ki se glasi »flex: 1 1 auto;«, določi, v tem vrstnem redu, ali se lahko element poveča oz. pomanjša in njegovo izhodiščno minimalno velikost, ki je v tem primeru podana kot »auto«. Uporaba prilagodljive škatle nam ponuja zelo veliko nastavitev oz. lastnosti, ki jih določimo HTML elementom. Nekatere najpogostejše so:display, flex-direction, order, flex-grow, flexwrap, flex-shrink, flex-flow, flex-basis, justify-content, align-items inalign-content. [2]. Slika 3.2: Izhodiščni HTML za prikaz uporabe prilagodljive škatle. 6.

(18) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. Slika 3.3: Postavitev elementov z uporabo prilagodljive škatle. Slika 3.4: Rezultat postavitve elementov z uporabo prilagodljive škatle. 3.1.4 Medijska povpraševanja Večina sodobnih spletnih strani poleg glavne vsebine vsebuje še dodatno, stransko vsebino (ang. sidebar), ki je prikazana v ločenem področju na desni ali levi strani spletne strani. Če poskušamo takšno stran skrčiti na velikost, ki ustreza npr. pametnemu telefonu, se pojavijo velike teţave. Pametni telefoni se običajno uporabljajo v portretni orientaciji, kjer je višina vidnega polja večja od širine, zaradi česar se morajo uporabniki po spletni strani pomikati vertikalno. Iz več stolpcev kot je zgrajena spletna stran, teţje jo je prikazati na manjših napravah. Tu pridejo na vrsto medijska povpraševanja (ang. media queries). Medijska povpraševanja so tehnologija, ki spada pod okrilje slogovnih predlog CSS, in so jedro odzivnega oblikovanja. Omogočajo nam, da se določena CSS koda uporabi šele, ko so izpolnjeni določeni pogoji. Dober primer je širina vidnega polja, kjer lahko le-to z medijskimi povpraševanji zaznamo in temu ustrezno prilagodimo postavitev spletne strani. Prav tako lahko s povpraševanji zaznamo razmerje zaslonskih točk naprav, kar nam pride 7.

(19) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. prav pri prilagajanju spletne strani zaslonom Retina, in orientacijo naprave, ki je lahko portret (ang. portrait) in pokrajina (ang. landscape). [1] Primer medijskih povpraševanj je ţe prikazan v poglavju 2.2.. 3.2 Primerjava tehnologij za izdelavo odzivne spletne strani Naštete tehnologije se med seboj precej razlikujejo. Glavne razlike nastanejo pri načinu in zahtevnosti implementacije, uporabnosti v določenih primerih, podprtosti v različnih spletnih brskalnikih in načinu delovanja. V spodnji tabeli (Tabela 3.1) so prikazane glavne razlike, kot tudi njihove prednosti in slabosti.. Tabela 3.1: Primerjava tehnologij za izdelavo odzivnih spletnih strani. Medijska povpraševanja. Prilagodljive mreže. Prilagodljiva škatla. Način implementacije. Implementacija v CSS datoteki z uporabo relativnih merskih enot. Implementacija v CSS datoteki s pomočjo vnaprej definiranih lastnosti. Implementacija v CSS datoteki z uporabo medijskih povpraševanj. Zahtevnost implementacije. Preprosta. Zahtevna. Srednja. Uporabnost. Za preproste spletne strani brez stranske vsebine. Za vse vrste spletnih strani, tako preproste kot zelo kompleksne. Za vse vrste spletnih strani, tako preproste kot zelo kompleksne. CSS + HTML. CSS3 + HTML. CSS + HTML + oblikovanje povpraševanj. Podprto v vseh brskalnikih. Podprto v vseh brskalnikih, razen v IE 8, 9, 10 in brskalnikih Android 4.1 in 4.3. Podprto v vseh brskalnikih, razen v IE 8. Zahtevana predznanja. Podprtost v brskalnikih. 8.

(20) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. Delovanje. Prednosti. Slabosti. Samodejno prilagajanje višine in širine elementov različnim velikostim naprav. Samodejno prilagajanje velikosti in vrstnega reda postavitve elementov. Uporaba določene CSS kode pri različnih dimenzijah naprav. Preprosta uporaba, boljša uporabniška izkušnja, uporaba brez potrebnih predznanj, podprta v vseh brskalnikih. Moţnost izdelave zelo zahtevnih postavitev spletne strani, podpora za brskalnike se hitro izboljšuje. Moţnost definiranja določene postavitve spletne strani za poljubne prelomne točke, ponuja visok nivo izdelave spletnih strani po meri. Omejenost, saj v primerih, ko ima spletna stran več stolpcev, običajno ne pride v poštev kot samostojna tehnologija. Zahtevna implementacija, podpora v nekaterih brskalnikih zaenkrat še ni najboljša, potreba po poznavanju številnih lastnosti, s katerimi oblikujemo elemente. Potrebno poznavanje medijskih povpraševanj in njihovega oblikovanja, hitro se izgubimo pri prilagajanju spletne strani »vsem napravam«. 3.2.1 Razlaga primerjalne tabele Način implementacije Prilagodljivo mreţo definiramo oz. implementiramo tako, da HTML elementu, ki mu v praksi v večini primerov pravimo vsebnik (ang. container), v CSS dokumentu določimo širino, ki je podana v relativnih enotah. Te enote so najpogosteje odstotki, lahko pa so tudi enote »em«, ki so prav tako relativne, njihova uporaba pa je vedno bolj priljubljena zaradi skalabilnosti in prijaznosti mobilnim napravam.. 9.

(21) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina Preprosta implementacija prilagodljive mreţe: .container{ width:70%; margin:0 auto; } Zgornja koda vsebniku določi širino 70 % vidnega polja in ga poravna horizontalno sredinsko. Deluje tako, da vsi elementi, ki so znotraj vsebnika, ne presegajo njegove širine, če pa je njihova širina prav tako podana v odstotkih, recimo 50 %, se izračun širine obravnava glede na širino starševskega elementa (v tem primeru vsebnika s širino 70 % vidnega polja). Kot smo ţe omenili, je metoda uporabe prilagodljivih mreţ v primeru, ko je uporabljena samostojno, primerna le za spletne strani, katerih vsebina je prikazana v enem samem stolpcu. V nasprotnem primeru lahko uporabimo metodo prilagodljive škatle (ang. flexbox). Tako kot prilagodljive mreţe jo implementiramo v CSS datoteki, kjer določimo posamezne. lastnosti. in. sloge. za. poljuben. skupek. HTML. elementov.. Primer. implementacije prilagodljive škatle je ţe prikazan na slikah v poglavju 3.1.3 (Slika 3.2) (Slika 3.3) (Slika 3.4). Tretja metoda, ki je trenutno najbolj priljubljena in omogoča največjo fleksibilnost, je uporaba medijskih povpraševanj. Tudi te implementiramo v CSS datoteki, najbolje pa delujejo v kombinaciji s prej omenjenima metodama. Poznamo dve vrsti pristopov pri uporabi medijskih povpraševanj, in sicer »mobile-first« in »desktop-first«. Razlika med njima je le v tem, da se s pristopom »mobile-first« osredotočimo najprej na mobilne naprave in šele nato na večje. Pri pristopu »desktop-first« pa je stvar ravno obratna. Osnovno povpraševanje pri »mobile-first« pristopu: @mediaonlyscreen and (min-width : 320px) Osnovno povpraševanje pri »desktop-first« pristopu: @mediaonlyscreenand (max-width : 320px). 10.

(22) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. Zahtevnost implementacije Implementacija prilagodljive mreţe je zelo preprosta, saj potrebujemo le eno vrstico kode, s katero določimo širino oz. višino določenega elementa. Povsem druga zgodba je implementacija prilagodljive škatle, ki ponuja zelo širok nabor moţnosti in lastnosti, med katerimi lahko izbiramo, zaradi česar se hitro izgubimo, če še nimamo izkušenj z uporabo. Nekje vmes med omenjenima metodama imajo mesto medijska povpraševanja, katerih implementacija ni zelo zahtevna, saj v večini primerov uporabimo le nekatere glavne prelomne točke, ne pa vseh. Potrebno je le poznati način pristopa in osnovne prelomne točke ter v nekaterih primerih gostoto zaslonskih točk naprave. Uporabnost Uporabnost prilagodljivih mreţ je precej omejena, saj z njimi ne doseţemo drugega kot krčenje oz. širjenje vsebine glede na velikost naprave (na vrstni red prikaza in postavitev HTML elementov z njimi namreč ne moremo vplivati). To pomeni, kot smo ţe omenili, da kot samostojna metoda pridejo v poštev le pri spletnih straneh, ki so sestavljene iz enega samega stolpca vsebine. Uporabnost prilagodljivih škatel je v primerjavi z uporabnostjo prilagodljivih mreţ zelo široka. Z njimi lahko doseţemo krčenje in raztezanje elementov, ko je to potrebno, zamenjavo vrstnega reda prikaza elementov, zamenjavo smeri, v kateri si elementi sledijo (vertikalno, horizontalno), poravnavo elementov ipd. Glede na omenjeno lahko sklepamo, da je zaradi široke palete moţnosti in lastnosti uporaba prilagodljive škatle omejena le s podprtostjo v spletnih brskalnikih, ne pa z določenimi oblikami postavitve spletne strani. Medijska povpraševanja najbolje delujejo v povezavi s prej omenjenima metodama. Uporabimo jih, kadar ţelimo vsebino prilagajati glede na določene prelomne točke, ki jih zaznamo oz. definiramo z medijskimi povpraševanji. Prav tako jih uporabljamo v primeru, ko ţelimo vsebino prilagoditi napravam z višjo gostoto zaslonskih točk (HD zasloni, zasloni Retina). Prav nam pridejo tako pri zelo preprostih spletnih straneh kot tudi pri zelo kompleksnih.. 11.

(23) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. Zahtevana predznanja Za vse tri metode je potrebno poznavanje jezikov HTML/HTML5 in CSS/CSS3, na katerih temelji njihova implementacija. Poleg tega je pri medijskih povpraševanjih potrebno poznati obliko logičnega stavka, ki predstavlja povpraševanje samo. Oblika medijskih povpraševanj je ţe prikazana v poglavju 2.2. Delovanje Delovanje prilagodljivih mreţ temelji na definiranju širine oz. višine HTML elementa v relativnih enotah, kot so npr. odstotki, kar pomeni, da bo element zavzel določeno širino oz. višino, ne glede na velikost naprave. Za primer vzemimo vsebnik, ki mu določimo širino 50 %. Na velikem zaslonu bo ta zasedal polovico vidnega polja, prav tako na tabličnih računalnikih, prenosnikih in mobilnih telefonih. Delovanje prilagodljive škatle pa je malce bolj zapleteno, saj ponuja vrsto moţnosti in lastnosti. Ker je teh preveč, da bi opisali vsako posebej, si kot referenco za prikaz delovanja vzemimo poglavje 3.1.3. Medijska povpraševanja so v bistvu logični »if« stavki. Če je rezultat povpraševanja »true«, se CSS koda, navedena v zavitih oklepajih povpraševanja, izvede, v nasprotnem primeru pa se preskoči. Uporabljamo lahko tudi druge logične operatorje, kot so AND, OR, NOT... Medijska povpraševanja lahko oblikujemo glede na minimalno/maksimalno širino, minimalno/maksimalno višino in gostoto zaslonskih točk. Prednosti in slabosti Prednosti in slabosti podrobneje ne bomo opisovali, saj so jasno in nedvoumno naštete v zgornji tabeli (Tabela 3.1).. 3.3 Mobile First pristop Ideja Mobile First pristopa se je razvila ţe pred idejo o odzivnih spletnih straneh. Bistvo ideje je, da spletno stran najprej oblikujemo za pametne telefone, nato nadaljujemo proti tabličnim računalnikom in tako naprej vse do velikih zaslonov. Glavni razlogi za omenjen pristop so naslednji: [1] . Mobilni spletni brskalniki predstavljajo hitro rastočo demografijo in bodo v prihodnosti najverjetneje zasenčili brskanje na namiznih računalnikih. 12.

(24) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina . . Majhni zasloni prisilijo oblikovalca spletne strani, da se osredotoči na najpomembnejše stvari, saj na teh zaslonih ni prostora za stransko vsebino, oglase, gumbe za povezavo s socialnimi omreţji in podobno. Mobilne naprave imajo v večini primerov boljše zmoţnosti kot namizni računalniki, primer so zaslon na dotik, funkcija GPS in podobne.. Oblikovanje spletne strani z opisanim pristopom je naravna evolucija ideje o odzivnem oblikovanju in Mobile First pristopu. Ker je vidno polje na mobilnih napravah zelo omejeno, nas to prisili, da začnemo s preprosto obliko, ki jo nato nadgrajujemo v bolj kompleksne vzorce. Ta pristop pozitivno vpliva tudi na oblikovanje za namizne računalnike, saj bo le-to bolj osredotočeno na uporabniško izkušnjo. [1]. 3.4 Meta značka »viewport« Če na mobilni napravi testiramo medijska povpraševanja, najverjetneje ne bomo videli pričakovanih rezultatov. Mobilne naprave privzeto pomanjšajo spletne strani, da uporabniku ponudijo boljši pregled nad vsebino, kar pomeni, da je vsa vsebina dokaj majhna, v veliko primerih premajhna, da bi bila dobro berljiva. Rešitev je definicija meta značke z imenom »viewport« v glavi spletnega dokumenta, karizgleda takole: [3] <metaname="viewport" content="width=device-width, initial-scale=1"> Z zgornjo definicijo mobilni napravi povemo, da naj spletno stran prikaţe brez kakršnegakoli pomanjševanja, saj bomo vsebino prilagodili z medijskimi povpraševanji. V znački lahko poleg tistih, prikazanih v primeru, podamo še vrsto drugih parametrov. Ti so »height«, »minimum-scale«, »maximum-scale« in »user-scalable«.. 13.

(25) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. 4 SPLETNI ISKALNIK. 4.1 Kaj je spletni iskalnik? V ozadju so spletni iskalniki (ang. search engine), kot je npr. Google, programska oprema, ki s pomočjo raznovrstnih aplikacij zbira in indeksira podatke o spletnih straneh. Ti podatki so v večini primerov v obliki ključnih besed ali fraz, ki predstavljajo vsebino spletne strani kot celoto, URL (ang. Uniform Resource Locator) naslov spletne strani, vhodne in izhodne povezave na strani ter samo zgradbo spletne strani (s tem mislimo HTML kodo). Te informacije so nato indeksirane in shranjene v podatkovno bazo. [4] V ospredju nam ta programska oprema ponuja uporabniški vmesnik, kjer vnašamo povpraševanja v obliki ključnih besed ali fraz. Ko potrdimo iskanje, iskalni algoritem v bazi poišče relevantne rezultate in nam jih ponudi v obliki povezav do spletnih mest. [4]. 4.2 Razgradnja iskalnika na posamezne dele. 4.2.1 Uporabniški vmesnik za iskanje Uporabniški vmesnik za iskanje je del spletnega iskalnika, s katerim je seznanjena večina uporabnikov. Predstavlja komunikacijski kanal med uporabnikom in programsko opremo spletnih iskalnikov. S pomočjo vmesnika uporabnik vnese iskane ključne besede oz. fraze in potrdi iskanje. Iskalni algoritmi nato v bazi poiščejo ustrezne rezultate in jih prikaţejo v obliki povezav do ustreznih spletnih mest.. 4.2.2 Pajki Pajki so programska oprema, ki sluţi za indeksiranje vseh obstoječih spletnih mest. Ko pajek gradi seznam besed, ki so uporabljene na spletnih mestih, imenujemo ta postopek pajkanje (ang.webcrawling). Indeksiranje začne na najbolj priljubljenih spletnih mestih, kjer indeksira besede,ter nato sledi vsem izhodnim povezavam in tako obišče tudi ostala relevantna spletna mesta. [5] 14.

(26) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. 4.2.3 Podatkovne baze Podatkovna baza je sestavni del vsakega spletnega iskalnika. V njej so shranjeni podatki vsakega indeksiranega spletnega mesta. Podatki so lahko urejeni na mnogo različnih načinov in bodo prikazani glede na metodo uvrščanja, ki se razlikuje od iskalnika do iskalnika. [4]. 4.2.4 Iskalni algoritmi Iskalni algoritem je jedro vsakega spletnega iskalnika. Brez njega vsi ostali deli ne morejo obstajati, saj na njem temeljijo. V splošnem je iskalni algoritem postopek, ki sprejme iskalno teţavo, oceni število moţnih rešitev in nato vrne rešitev teţave. Iskalni algoritem za spletne iskalnike sprejme iskano besedo, ključne besede ali frazo, preišče ključne besede in URL naslove v podatkovni bazi, ki so povezani z iskalno teţavo, in prikaţe seznam rezultatov. [4] Kot smo ţe omenili, se iskalni algoritmi od iskalnika do iskalnika razlikujejo, zato nam ti prikazujejo rezultate v različnem vrstnem redu. V osnovi ločimo algoritme, ki iščejo po seznamu ali s pomočjo iskalnega drevesa ter uporabljajo SQL iskanje, informirano iskanje in iskanje z omejitvami. [4]. 4.2.5 Iskanje rezultatov in uvrščanje Iskanje rezultatov predstavlja kombinacija aktivnosti pajka ali robota, podatkovne baze in iskalnega algoritma. Ti trije elementi delujejo v soţitju, da poiščejo zadetke iskanja in jih prikaţejo v določenem vrstnem redu. [4] Uvrščanje je del, kateremu pri optimizaciji namenimo največ pozornosti. Višje kot smo uvrščeni, več uporabnikov bo opazilo našo spletno stran in jo posledično tudi obiskalo. Poznamo veliko faktorjev uvrščanja, katerih pomembnost se med različnimi iskalniki spreminja. Najpomembnejši so dobra, semantična vsebina, tehnična dovršenost in zgradba spletnega mesta, deleţ vhodnih, izhodnih in notranjih povezav, povezava s. 15.

(27) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina socialnimi omreţji ter hitrost delovanja. Posamezni faktorji bodo podrobneje opisani v nadaljevanju. [4]. 16.

(28) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. 5 OPTIMIZACIJA ZA SPLETNE ISKALNIKE. 5.1 Vrste optimizacij SEO (ang. Search Engine Optimization, optimizacija za spletne iskalnike) je izraz, ki opisuje vrsto procesov, s katerimi ţelimo spletno stran optimizirati za spletne iskalnike. SEO je pomemben za pridobivanje kvalitetnih obiskovalcev, kot tudi za povišanje kredibilnosti spletne strani in širjenje blagovne znamke. [6]. V grobem delimo SEO na dve veji. Prva veja se imenuje SEO na strani (ang. on-site SEO), ki zdruţuje vidike optimizacije, ki se izvajajo neposredno na spletni strani. Ti vidiki so naslovi, opisi, URL naslovi, uporabniku prijazna navigacija, notranje povezave, oblikovanje besedila, optimizacija slik, kakovostna vsebina in delujoče izhodne povezave. Druga veja zdruţuje tehnike optimizacije, ki se izvajajo izven vidika spletne strani. Najpomembnejše so grajenje kvalitetnih povezav (ang. link building), povezava s socialnimi omreţji in ustvarjanje zaznamkov spletnih strani (ang. social bookmarking).[6] Zgoraj omenjene metode spadajo v skupino etične optimizacije (ang. whitehat SEO), poznamo pa tudi neetične (ang. blackhat SEO). Te se nanašajo na procese, ki se osredotočajo le na spletne iskalnike, ne pa na človeški faktor, zaradi česar v večini primerov ne spoštujejo SEO smernic, podanih s strani spletnih iskalnikov. Najpogostejše metode neetične optimizacije so:     . skrito besedilo (ang. invisible text) skrivanje (ang. cloaking) prekomerna uporaba ključnih besed (ang. keyword stuffing) vsiljena vsebina (ang. spam) prehodne strani (ang. doorway pages). Uporaba omenjenih metod je lahko uspešna na kratek rok, saj so spletne strani z neetično optimizacijo zelo pogosto kaznovane, včasih celo popolnoma odstranjene iz podatkovne baze iskalnika. V diplomskem delu se bomo podrobneje osredotočili le na etične tehnike, saj so te tiste, ki nam prinašajo kvalitetne organske zadetke ter spletni strani zagotavljajo kredibilnost in prepoznavnost, pa čeprav lahko ta proces traja več let.. 17.

(29) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. 5.2 Optimizacija na strani. 5.2.1 Ključne besede Izbira ključnih besed in fraz je zelo pomemben vidik optimizacije na strani, zato je pomembno, da temeljito raziščemo trg in definiramo ciljno občinstvo. Ključne besede lahko definiramo sami, in sicer to storimo tako, da na list papirja napišemo vse besede, ki se jih spomnimo v povezavi z našim spletnim mestom. Te besede nato večkrat temeljito pregledamo in izberemo le tiste, ki se tesno povezujejo z našo vsebino. Iz izbranih besed tvorimo tudi iskalne fraze. Te fraze so lahko različno dolge, saj uporabniki iščejo na različne načine z različnim številom ključnih besed. Na spodnji sliki (Slika 5.1) vidimo, da so kratke iskalne fraze pogostejše, vendar manj kvalitetne kot daljše iskalne fraze, saj niso tako specifične. Posledično to pomeni, da se nam bolj splača osredotočiti na daljše iskalne fraze, saj te nimajo tako veliko konkurence, kot npr. enobesedni ali dvobesedni iskalni izrazi.. Slika 5.1: Vpliv dolţine iskalnega izraza na promet [7]. 18.

(30) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina Definiranju ključnih besed in fraz sledi raziskovanje ključnih besed z uporabo spletnih orodij. Trenutno najbolj uveljavljeno orodje za raziskovanje je Google AdWords. S tem orodjem preverimo prej izdelan seznam ključnih besed in fraz. Te enostavno vnesemo v za to namenjeno okno in Google AdWords nam prikaţe podatke o posamezni besedi oz. frazi skozi določeno časovno obdobje, lokacijo, jezik itd. ( Slika 5.2).. Slika 5.2: Google AdWords– raziskava ključnih besed. Ko so ključne besede in fraze izbrane, pride na vrsto vključitev le-teh v vsebino spletnega mesta. Vključujemo jih v naslove posameznih strani, URL naslove, naslove člankov, vsebino, povezave, skratka povsod, kjer nam to koristi. Z gostoto ključnih besed pa ne smemo pretiravati, saj lahko to negativno vpliva na SEO.. 5.2.2 URL naslov URL (ang. Uniform Resource Locator, enotni lokator virov) naslov je človeku berljiv tekst, ki nadomesti IP naslove spletnih mest. Vsaka spletna stran ima unikaten URL naslov, ki je sestavljen iz protokola, imena domene, končnice domene in nadaljnjih parametrov, ki predstavljajo hierarhijo datotek na spletnem mestu. Dobra praksa pri oblikovanju URL. 19.

(31) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina naslova je ločevanje besed z vezaji, ne pa s podčrtaji, presledki in ostalimi ločili, saj brskalnik v tem primeru obravnava besede kot posamezne. Za optimizacijo URL naslova je pomembno, da vsebuje ključne besede, povezane z vsebino spletnega mesta, da je čim krajši, kar pripomore k laţji berljivosti, ter da je na pogled privlačen in uporabniku nedvoumno sporoča, kje se ta nahaja oz. kam ga bo povezava vodila. Prav tako se poskusimo izogniti uporabi parametrov, ki jih nadomestimo z dejanskimi besedami. Primer dobrega URL naslova (jasen, čitljiv, privlačen): http://www.wordtracker.com/academy/learn-seo/technical-guides/seo-cleanurls. Primer slabega URL naslova (nejasen, uporaba parametrov): http://www.moja-etrgovina.si/?page_id=1143. 5.2.3 Naslov spletne strani Naslov spletne strani definiramo v glavi spletnega dokumenta s pomočjo HTML elementa <title />. Namenjen je natančnemu opisu vsebine, ki jo spletna stran ponuja, in je pogosto prikazan na strani rezultatov v iskalniku. Dobro definiran naslov pripomore k uporabniški izkušnji, prav tako nam koristi pri optimizaciji. Googlov iskalnik prikaţe od 50 do 60 znakov naslova spletne strani oz. toliko znakov, da se še prilegajo zaslonu s širino 512 px. [8] Optimizacija naslova spletne strani poteka v več korakih; najpomembnejši so: Spoštovanje predpisane dolžine Googlov brskalnik naslove spletnih strani, ki so daljši od 60 znakov oz. širši kot 512 px, obreţe. Dolţina pa ni tako imenovano trdo pravilo, saj so daljši naslovi v nekaterih primerih boljši za prikaz na socialnih omreţjih. Številni SEO strokovnjaki so prepričani, da je bolje oblikovati privlačen naslov, ki nam prinese več obiskov, kot pa naslov, ki natančno ustreza predpisanim Googlovim smernicam. [8]. 20.

(32) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina Uporaba ključnih besed na začetku naslova Bliţje začetku je ključna beseda, višja bo uvrstitev spletnega mesta na strani rezultatov v iskalniku, prav tako bo večja moţnost, da bo uporabnik kliknil na povezavo. [8] Primerna postavitev imena znamke/podjetja v naslovu SEO strokovnjaki priporočajo postavitev imena podjetja/znamke na konec naslova. Izjema je prepoznavnost znamke/podjetja na ciljnem trgu. Če je ime dobro prepoznano in lahko vpliva na pridobitev večjega števila klikov, ga postavimo na začetek naslova. [8] Privlačen naslov za vse uporabnike Privlačen spletni naslov bo pritegnil več obiskovalcev, kar pomeni za nas več klikov, saj je naslov prva interakcija spletne strani z uporabnikom na strani rezultatov v iskalniku. To v večini primerov odtehta nespoštovanje predpisane dolţine. [8]. 5.2.4 Meta značke Meta značke so definirane kot elementi s podatki o spletni strani. Vključujemo jih v glavo HTML dokumenta z značko <meta />. Vsebina teh značk na spletni strani ni vidna, vendar poskrbi, da ima brskalnik vse potrebne informacije za pravilno obravnavanje le-te. Poznamo več vrst meta značk, katerih vloga pri optimizaciji se s časom spreminja. V nadaljevanju smo se osredotočili na nekaj najpomembnejših meta značk. Ena izmed njih je opisna meta značka (ang. description), ki predstavlja besedilo pod povezavo na strani rezultatov v iskalniku (Slika 5.3). Njen namen je predstavitev vsebine spletne strani uporabniku, preden jo ta dejansko obišče. Ne glede na uvrstitev naše spletne strani na strani rezultatov je učinkovito oblikovanje te značke poglavitnega pomena, saj v tem primeru pripomore k večjemu številu obiskov spletne strani. Primer opisne meta značke:. <meta name="description" content="Primer opisne meta značke">. 21.

(33) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. Slika 5.3: Opisna meta značka – prikaz na SERP-u [9]. Učinkovito oblikovanje opisnih meta značk je odvisno od več različnih faktorjev, štirje najpomembnejši so: [9] . Prvi faktor je unikatnost med posameznimi stranmi spletnega mesta. Vsaka stran mora imeti svoj lasten opis. V primeru, da je spletnih strani preveč, se osredotočimo na najpomembnejše ali pa opise generiramo dinamično.. . Drugi faktor je raznolikost opisnih meta značk. Vsaka stran naj ima opis, ki je specifičen za njeno vsebino, da lahko uporabniki na SERP-u natančno razberejo ,za kaj gre. Če so si opisi med seboj preveč podobni, je velika moţnost, da bo namesto našega opisa prikazan tisti, ki ga določi iskalnik direktno iz vsebine spletne strani.. . Tretji faktor je dolžina opisa. Po Googlovih smernicah ta naj ne bi bil daljši od 155 znakov, ampak ker do sedaj ţe vemo, da Google ne šteje znakov, temveč meri širino vidnega polja, ki jo opis zaseda, tega pravila ni nujno spoštovati v vseh primerih.. . Četrti faktor je privlačnost opisa, ki naj bo oblikovan tako, da pritegne pozornost uporabnika in ga prepriča v obisk spletne strani.. Primeri slabega in dobrega meta opisa so prikazani na spodnji sliki (Slika 5.4). Prvi opis je generiran samodejno s strani spletnega iskalnika ter je neprivlačen in nejasen. Drugi opis je kratek, jasen in natančno sporoča, kaj spletna stran ponuja.. Slika 5.4: Slab in dober meta opis. 22.

(34) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. Naslednja meta značka, ki je prav tako ena pomembnejših, je meta značka charset. Z njo brskalniku sporočimo, kateri nabor znakov uporabljamo, da jih lahko pravilno prikaţe in se lahko iskalni pajki prilagodijo. Ločimo štiri različne nabore znakov, in sicer ASCII, ANSI ali Windows-1251, ISO-8869-1 in UTF-8, ki je tudi najpogostejši. Definicija nabora znakov se je s prehodom na HTML5 spremenila v laţjo, krajšo in razumljivejšo obliko kot v prejšnjih različicah.. Definicija nabora znakov v HTML4: <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">. Definicija nabora znakov v HTML5: <meta charset="UTF-8"> Za značko »charset« pride na vrsto meta značka robots. To uporabimo takrat, ko ţelimo nadzirati vedenje iskalnih pajkov. Če ne definiramo natančno, na katerega pajka se omenjena značka nanaša, se pravilo določi za vse spletne iskalnike. Privzete vrednosti so »index, follow«, ki veljajo tudi v primeru, če tega izrecno ne podamo v sami kodi spletne strani. Ostale vrednosti so še noindex, nofollow, noodp, noydir, noarchive, nosnippet, noimageindex, unavailable_after:[date], notranslate in none. [10] Primer meta značk »robots«: <metaname="robots" content="noindex, nofollow"> <metaname="robots" content="noarchive"> Primer značk za specifične iskalnike: <metaname="googlebot"content="noindex">/* Google bot */ <metaname="slurp"content="noindex">/* Slurp */ Opisane so tri najpogosteje uporabljene meta značke. Pomembno je razumeti, da nobena izmed njih ne vpliva neposredno na faktor uvrstitve na SERP-u. Znački »charset« in »robots« pripomoreta k razumevanju spletne strani iskalnika, značka »description« pa ponuja privlačen opis spletne strani in s tem prinaša višje število obiskov.. 23.

(35) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina Omenimo le še meta značko keywords, kije bila v začetkih SEO ena izmed najučinkovitejših za pridobivanje prometa na spletni strani. V njo smo natlačili vse ključne besede, ki so se nam zdele pomembne za našo spletno stran. Teţava se je pojavila pri zlorabi te značke, tako imenovanem »keywordstuffing-u«. V tem primeru so bile v značko dodane ključne besede, ki so imele v iskalnikih visoko povpraševanje, s spletno stranjo pa nobene povezave, kar je pripomoglo k številu obiskov. Zaradi tega večina glavnih iskalnikov to značko v današnjem času ignorira, kar pa ne pomeni, da je ne smemo uporabljati za pridobivanje pozornosti manj priznanih spletnih iskalnikov.. 5.2.5 Zemljevid spletnega mesta XML zemljevid (Slika 5.5) je datoteka, ki je na voljo na spletnem mestu in sluţi kot smerokaz za spletne iskalnike, da z lahkoto obiščejo določene strani našega spletnega mesta. Prav tako skrbnikom spletnih strani pomaga, da je spletno mesto prijaznejše za spletne iskalnike. To je storjeno tako, da nam omogoča prikaz vseh URL naslovov z določenimi metapodatki (npr. kdaj je bila spletna stran nazadnje spremenjena), da lahko pajki spletnega iskalnika hitro in učinkovito pregledajo ter indeksirajo podane spletne strani. [11]. 24.

(36) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. Slika 5.5: Primer XML zemljevida. HTML zemljevid (Slika 5.6) se bolj kot na iskalnike osredotoča na obiskovalce spletnega mesta, saj jim omogoča lahko in učinkovito navigacijo. Vsebuje povezave do vsake posamezne spletne strani. Običajno je HTML zemljevid predstavljen na ločeni spletni strani, ki omogoča iskanje, da lahko uporabnik poišče točno določeno vsebino. Povezave do te strani so vključene v vseh posameznih straneh ali pa v nogi spletnega mesta. [12]. 25.

(37) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. Slika 5.6: Primer HTML zemljevida [12]. 5.2.6 Optimiziranje notranjih povezav (ang. internal links) Notranje povezave imenujemo tiste, ki nas vodijo na določeno spletno stran na istem spletnem mestu, kot se nahaja povezava. Za njih velja, da naj bodo oblikovane iz opisnih ključnih besed, ki predstavijo vsebino ali ključne besede, ki jih predstavlja spletna stran, na katero nas povezava vodi. Pozabiti ne smemo tudi na atribut »title«, ki nam prikaţe opis povezave, ko na njo postavimo kazalec miške. Najpomembnejša vloga notranjih povezav je predstavitev hierarhije spletnega mesta in širjenje povezav med posameznimi stranmi. Optimalna hierarhija spletne strani naj bi izgledala kot drevo (Slika 5.7). 26.

(38) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina Ta zgradba ima minimalno število povezav med domačo oz. glavno stranjo in ostalimi podstranmi, kar omogoči širjenje povezav po celotnem spletnem mestu, to pa pripomore k boljši uvrstitvi posameznih strani na SERP-u. [13]. Primer notranje povezave: <ahref="http://www.ista-domena.com" title="opis">Ime povezave</a>. Slika 5.7: Optimalna hierarhija spletnega mesta [13]. 5.2.7 Optimizacija hitrosti delovanja Hitrost delovanja spletne strani (ang. website performance) je v današnjem času eden izmed pomembnejših faktorjev, ki vplivajo na uvrstitev na SERP-u (ang. Search Engine Results Page). Vidikov optimizacije je zelo veliko, zato so v nadaljevanju opisani najpomembnejši oz. najpogostejši. Ti so:. -. Izbira primernega gostovanja Uporaba Gzip kompresije Zniţevanje števila preusmeritev Obravnavanje nedelujočih HTTP zahtev 27.

(39) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. -. Zniţevanje števila HTTP zahtev Optimizacija slik Primerna vključitev CSS in JavaScript datotek Minifikacija CSS in JavaScript kode Uporaba CDN (ang. Content Delivery Network). 5.2.7.1 Izbira primernega gostovanja Spletni streţnik je zelo pomemben del optimizacije hitrosti delovanja spletne strani, saj so na njem naloţene vse datoteke, ki so potrebne za pravilno delovanje in prikaz spletnega mesta. Glede na potrebe lahko izbiramo med neplačljivimi in plačljivimi gostovanji. Podrobneje si bomo ogledali nekatere faktorje, ki jih velja upoštevati pri izbiri gostovanja. Najprej si poglejmo faktorje, ki se nanašajo na neplačljiva spletna gostovanja: [14]  . . . . . . Oglaševanje – večina neplačljivih spletnih gostovanj na gostujočo spletno stran vsili raznovrstne oglase, s pomočjo katerih pokrijejo stroške gostovanja. Količina prostora na strežniku – paziti je potrebno, da je na streţniku dovolj prostora za vse potrebne datoteke. V razmislek je dobro vzeti tudi bodoče širjenje spletnega mesta, saj je to laţje kot pa preselitev vseh datotek na drugo gostovanje. FTP dostop – zelo pomembno je, da lahko do prostora na streţniku dostopamo preko FTP (ang. File Transfer Protocol), saj lahko tako izvajamo spremembe, posodobitve, skratka vse, kar je potrebno. Teţava se pojavi, ker številna neplačljiva gostovanja zahtevajo uporabo njihovega orodja za grajenje spletnih strani (ang. site builder tool) Omejitev velikosti datotek in datotečnih tipov – nekatera gostovanja imajo omejeno velikost za vsako posamezno datoteko, ki jo ţelimo naloţiti, spet druga dovolijo nalaganje le določenih datotečnih tipov (npr. samo HTML, CSS ipd.) Zanesljivost in hitrost dostopa – eden izmed najpomembnejših faktorjev je zanesljivost. Gostovanje mora biti na voljo in delovati ves čas, saj v nasprotnem primeru izgubimo veliko prometa. Prav tako se mora hitro odzvati na posodabljanje in ostale posege v spletno mesto. Podpora programskemu jeziku PHP – programski jezik PHP je skorajda nepogrešljiv del vsake spletne strani, zato je pomembno, da gostovanje podpira njegovo uporabo, pa čeprav je to le pošiljanje e-pošte uporabnikom ali uporaba spletnega obrazca za kontaktiranje. Dodelitev širokopasovne povezave – večina neplačljivih gostovanj ima omejeno količino širokopasovne povezave, ki nam je na voljo v določenem časovnem obdobju, kar pomeni, da spletno mesto ne bo na voljo uporabnikom, ko je ta omejitev doseţena oz. prekoračena. 28.

(40) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. S tem smo grobo opisali vse pomembnejše faktorje, na katere je potrebno biti pozoren pri izbiri neplačljivega gostovanja. V nadaljevanju si poglejmo še faktorje, ki veljajo za pomembne pri izbiri plačljivega gostovanja. Faktorji, ki se nanašajo na plačljiva spletna gostovanja: [14] . . . .  . . . Zanesljivost in hitrost dostopa – eden izmed najpomembnejših faktorjev je zanesljivost. Gostovanje mora biti na voljo in delovati vsaj 99 % časa oz. vsaj 99,5 % časa. V nasprotnem primeru naj gostitelj povrne del stroškov. Prenos podatkov – prenos podatkov štejemo v količini prenesenih bajtov z našega streţnika k obiskovalcu spletne strani. Veliko gostiteljev ponuja »neomejeno« količino povezave, kar se hitro izkaţe za laţ, saj je »neomejeno« v drobnem tisku običajno redefinirano v določeno vrednost, zato je potrebno pred nakupom pazljivo in podrobno pregledati vso dokumentacijo. V grobem spletna stran brez videoposnetkov in glasbenih datotek porabi manj kot 3GB podatkov na mesec. Količina prostora na strežniku – iz istega razloga kot pri prejšnjem faktorju je potrebno biti pazljiv pri izbiri gostitelja, ki ponuja »neomejeno« količino prostora na streţniku. Veliko novih spletnih strani, ki ne ponujajo videoposnetkov in glasbe, potrebuje manj kot 20 MB prostora, zato naj nas ogromne številke v ponudbi ne zavedejo. Tehnična podpora – najboljša praksa je izbira gostitelja, ki ponuja tehnično podporo 24 ur na dan, 7 dni v tednu. To ponuja mnogo gostiteljev, vendar se vsi obljube ne drţijo. Dobro je, da pred nakupom testiramo tehnično podporo tako, da jih poskušamo kontaktirati med prazniki, vikendi, v poznih nočnih urah in podobno. Pod drobnogled vzamemo tudi njihovo strokovnost pri reševanju teţav, ne le hitrost odziva. FTP, PHP, Perl, SSI, .htaccess, SSH, MySQL, Cron – če za gostovanje plačujemo, je zelo koristno, da podpira vse omenjene faktorje. SSL (ang. Secure Sockets Layer) – v primeru, da na spletni strani karkoli prodajamo, mora spletno gostovanje podpirati SSL, kar v večini primerov poviša stroške nakupa, vendar skrbi za varnost podatkov obiskovalca. Nadzorna plošča – nadzorna plošča je uporabniški vmesnik, s katerim na spletnem streţniku izvajamo spremembe. V najslabšem primeru nam mora omogočati vsaj dodajanje, brisanje in upravljanje e-poštnih naslovov ter spremembo gesla. Spletni strežnik in operacijski sistem – večina ljudi bo izbrala spletni streţnik, ki temelji na Unix sistemu in uporablja Apache streţnik.. 29.

(41) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. 5.2.7.2 Uporaba Gzip kompresije Gzip je trenutno najbolj priljubljena in efektivna kompresijska metoda. Razvita je bila s strani projekta GNU, standardizirana pa s strani RFC 1952. Obstaja še podoben kompresijski format, imenovan »deflate«, ki pa je manj efektiven in priljubljen. Uporaba omenjene metode zmanjša velikost HTTP zahtev vsaj za 70 % (Slika 5.8), prav tako 90 % današnjega internetnega prometa potuje skozi brskalnike, ki trdijo, da podpirajo Gzip kompresijo. [15] Kompresijo omogočimo tako, da spodnjo kodo dodamo v datoteko .htaccess: # stisni tekst, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript # stisnidoločene tipe datotek: <files *.html> SetOutputFilter DEFLATE </files> Ali pa na vrhu HTML dokumenta uporabimo sledečo PHP kodo: <?phpif (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>. 30.

(42) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. Slika 5.8: Gzip kompresija v praksi [16]. 5.2.7.3 Zniţevanje števila preusmeritev Včasih za sledenje klikom, povezavo različnih delov spletnega mesta ali preusmeritev na poddomene spletni brskalnik preusmerimo z enega URL naslova na drugega. Vsaka takšna preusmeritev pomeni dodatno HTTP zahtevo, kar poviša latenco1 (ang. latency). Ker ţe vemo, da manj kot je HTTP zahtev na strani, hitreje bo ta delovala, se preusmeritvam izogibamo, kjer se to le da. Uporabimo jih le takrat, ko za našo teţavo ni na voljo nobene ustreznejše rešitve. [16] Nekatera izmed Googlovih priporočil so sledeča: [16] . . 1. Na spletni strani se nikoli ne sklicujemo na URL naslove, ki nas nato preusmerijo na druge URL naslove. Spletno mesto mora imeti implementirano samodejno posodabljanje URL sklicevanj v primeru, da se njihova lokacija spremeni. Nikoli ne zahtevamo več kot ene preusmeritve, da uporabnik doseţe ţeleno spletno stran.. Latenca je čas, ki preteče od uporabniške zahteve do kakršnega koli odziva sistema.. 31.

(43) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina . Čim bolj zniţamo število dodatnih domen, ki skrbijo za preusmeritve in ne prikazujejo nikakršne vsebine.. 5.2.7.4 Obravnavanje nedelujočih HTTP zahtev Nedelujoče povezave povzročajo napake s statusom 404 - NOT FOUND in 410 - GONE, ki le še dodatno obremenijo spletno stran. Največkrat se te napake pojavijo pri povezavah do slik, ki se jim spremeni vir. Te napake je zelo pomembno obravnavati, odkrijemo pa jih lahko s številnimi spletnimi orodji, ki so brezplačna za uporabo. Eno izmed najbolj prepoznavnih je orodje OnlineBrokenLinkChecker. [16]. 5.2.7.5 Zniţevanje števila HTTP zahtev Število HTTP zahtev je najpomembnejši faktor pri hitrosti odziva spletnega mesta. HTTP zahteva je potrebna za vsako vključeno datoteko (npr. JavaScript, CSS, Google Font, razne slike, ...). Večje kot je spletno mesto, več zahtev je potrebnih za pravilen prikaz vsebine. Zdruţevanje datotek je najpreprostejši način za zniţevanje števila HTTP zahtev. Med tem postopkom vse datoteke istega tipa zdruţimo v eno (npr. JavaScript datoteke, CSS datoteke). Teţave lahko nastanejo, ko se JavaScript in CSS koda med različnimi stranmi razlikujeta – takrat je potrebno v zdruţitev vloţiti več dela s primerno prilagoditvijo kode, vendar se splača. [15] Najboljša metoda zdruţevanja slik v eno samo je zdruţevanje v zlepke slik (ang. CSS sprites). Slike ozadja zdruţimo v eno samo sliko in s pomočjo CSS lastnosti »backgroundimage« in »backround-position« prikaţemo ţeleni del slike. Čeprav je na koncu datoteka malo večja kot vse posamezne slike seštete skupaj, se znebimo odvečnih HTTP zahtev, kar odtehta razliko v velikosti. Naslednja metoda zdruţevanja slik je zdruţevanje v zemljevide slik (ang. image maps). Velikost je pribliţno enaka, vendar se tako kot pri prejšnjem primeru zniţa število HTTP zahtev. Zemljevidi slik delujejo le v primeru, če se slike med seboj stikajo. [15]. 32.

(44) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. 5.2.7.6 Optimizacija slik V večini primerov so slike glavni krivec za počasno delovanje spletne strani, zato lahko z učinkovito optimizacijo le-teh pogosto bistveno vplivamo na hitrost spletne strani in število prenesenih bajtov. Niţje kot je število bajtov, ki so potrebni za prenos, manjša je obremenitev uporabnikove internetne povezave in temu primerno krajši čas, ki je potreben za prenos in prikaz vseh sredstev (ang. assets).Podrobneje si bomo pogledali štiri načine optimizacije slik: [17]    . Izbira ustreznega formata Zmanjševanje velikosti slik Uporaba zlepkov slik (ang. image sprites) Uporaba počasnega nalaganja (ang. lazy loading). Izbira ustreznega formata V grobem ločimo slike na vektorske in rastrske; pri slednjih moramo izbrati tudi ustrezen format (npr. GIF, JPG, PNG, BMP). Rastrske slike, kot so npr. fotografije in ostale slike, ki so predstavljene kot mreţa posameznih pik ali zaslonskih točk, v večini izhajajo iz fotoaparatov, kamer, skenerjev ali pa so ustvarjene v spletnem brskalniku s pomočjo HTML elementa »canvas«. Večja kot je slika, večja je tudi velikost datoteke. Za njih je značilno, da v primeru, ko so skalirane nad originalno velikostjo, postanejo zamegljene oz. popačene, saj mora brskalnik samodejno zapolniti dodatne manjkajoče zaslonske točke. [17] Vektorske slike, kot so npr. logotipi, ikone in podobno, so namesto iz zaslonskih točk predstavljene s pomočjo črt, oblik, krivulj in barv, ki te oblike napolnijo. Ker zgradba teh slik temelji na preprostih primitivnih enotah, se njihova kvaliteta s skaliranjem ne spreminja, torej je slika vedno čista ne glede na velikost, prav tako pa se z velikostjo slike ne spreminja velikost datoteke. [17]. 33.

(45) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. Slika 5.9: Primerjava vektorske in rastrske slike pri povečavi [18]. Zmanjševanje velikosti slik Velikost datoteke, ki predstavlja sliko, je mogoče drastično zmanjšati z uporabo raznovrstnih orodij. Ta ponujajo dve vrsti kompresije, in sicer kompresijo z izgubo in kompresijo brez izgube. Kompresijo z izgubo uporabljamo v primeru, ko so na sliki podrobnosti, ki jih človeško oko teţko zazna oz. jih ne zazna, in zato teh ni potrebno ohraniti. Kompresijo brez izgube pa uporabljamo v arhivske namene, za slike v medicini, tehnične risbe, stripe in podobno. [17] Uporaba zlepkov slik Metoda je ţe opisana v poglavju Zniževanje števila HTTP zahtev, tretji odstavek. Uporaba počasnega nalaganja Počasno nalaganje ima lahko na hitrost spletne strani, ki vsebuje veliko število slik, velik vpliv. Deluje tako, da slike naloţi šele, ko jih potrebujemo oz. ko je primarna vsebina ţe naloţena in upodobljena. Kot dodatek k hitrosti delovanja lahko s počasnim nalaganjem doseţemo izkušnjo neskončnega pomikanja (ang. infinite scrolling). Kljub dobrim stranem te metode je potrebno omeniti še slabo stran. Ker je vsebina naloţena šele, ko je vidna, je spletni pajki pred tem ne morejo indeksirati. Prav tako uporabniki, ki iščejo podatke v nogi dokumenta, te ne bodo nikoli videli, ker se neprestano nalaga nova vsebina (izjema je fiksna postavitev noge – »position: fixed;«). [17]. 34.

(46) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. 5.2.7.7 Primerna vključitev CSS in JavaScript datotek Vse slogovne in JavaScript datoteke naj bodo vključene kot zunanje, ker lahko v tem primeru brskalnik le-te shrani v predpomnilniku, kar pomeni, da jih ni treba vedno znova prenašati s spletnega streţnika. Omenjena metoda pripomore k hitrosti delovanja spletne strani, čeprav s tem generiramo več HTTP zahtev. Vključitev slogovnih datotek v glavi elementa brskalnikom prepreči nalaganje na način progresivnega upodabljanja, kar pomeni, da se bo upodabljanje spletne strani začelo šele, ko je ta v celoti naloţena. S tem se brskalnik izogne potrebi po ponovnem upodabljanju posameznih elementov, če so slogi le-teh prepisani. Iz istega razloga vključujemo JavaScript datoteke v nogi elementa, tik pred zaključno </body> značko. [16]. 5.2.7.8 Minifikacija HTML, CSS in JavaScript kode Minifikacija je postopek, s katerim iz HTML, CSS ali JavaScript datotek odstranimo nepotrebne podatke brez vpliva na delovanje spletne strani. Ti nepotrebni podatki so komentarji, presledki in podobno. Ta metoda drastično zmanjša velikost datotek, ki jih mora brskalnik naloţiti pred prikazom strani, kar pripomore k hitrejšemu nalaganju oz. odzivu. [16]. Slika 5.10: Primer minifikacije CSS kode. 35.

(47) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina. Slika 5.11: Primer minifikacije JavaScript kode. 5.2.7.9 Uporaba CDN Omreţje za dostavo vsebine (ang. Content Distribution/Delivery Network) je zelo veliko omreţje, ki s pomočjo specializiranih in geografsko porazdeljenih streţnikov pospešuje dostavo spletne vsebine in medijskih elementov k uporabnikom interneta. Trenutno največje omreţje za dostavo vsebine je Akamai, ki ima na voljo več kot 100.000 streţnikov v več kot 80 drţavah po vsem svetu. [19] Primarne tehnike, ki jih CDN uporablja za hitrejšo dostavo vsebine, so povezane s predpomnjenjem določene vsebine (ang. caching). S to tehniko lahko uporabniku streţemo vsebino s trenutno geografsko gledano najbliţjega streţnika, namesto da bi le-to morali prenašati z originalnega. Vsebina, ki je predpomnjena, je pogosto v obliki statičnega teksta, slik, video posnetkov, avdio datotek. Za hitrejšo dostavo vsebine k uporabniku, ki ne more biti predpomnjena, pa razvita podjetja, kot je ţe omenjeni Akamai, uporabljajo napredne tehnike, kot so optimizacija poti, optimizacija TCP povezave in predpridobitev podatkov. [19]. Prednosti uporabe CDN Omreţje za dostavo vsebine znatno izboljša izkušnjo spletnih uporabnikov, lastnikov aplikacij in spletnih strani ter ponudnikov spletnih storitev, in sicer na naslednje načine: [19] . Uporabniki implementacijo CDN-ja izkusijo kot hitrejše nalaganje spletne strani oz. hitrejše transakcije, kot bi bile v primeru neuporabe CDN-ja.. 36.

(48) Izdelava odzivne spletne strani z optimizacijo in prilagoditvijo za zaslone Retina . . Lastnikom spletnih strani in aplikacij omogočijo boljšo uporabniško izkušnjo in s tem doseţejo višje število konverzij, zvestobo strank, niţjo stopnjo opustitev, povečanje prikazov oglasov ipd. Uporaba CDN-ja prav tako pripomore k izboljšanju spletne varnosti, npr. s preprečevanjem DOS napadov (ang. denial-of-service attack). Ponudnikom spletnih storitev pomaga pri razbremenitvi glavnega streţnika, obravnavi naročnikov in njihove uporabe spletne storitve, gladkem pretoku video in avdio vsebin (ang. streaming) ter optimizaciji drugih faktorjev.. Trenutno najboljša in najuspešnejša omreţja za dostavo vsebine so: CDNetworks, Akamai, CDN77, CloudFlare, CDNsun, EdgeCast, Amazon CloudFront, LimeLight Networks, MaxCDN in CDNlion.. 5.3 Optimizacija izven strani Izraz optimizacija izven strani se nanaša na skupino tehnik, ki pripomorejo k izboljšanju pozicije spletne strani na SERP-u. Večina ljudi ta pojem razume le kot grajenje povezav (ang. link building), vendar v praksi ni le to. Grobo rečeno je optimizacija izven strani uporaba promocijskih metod z namenom višje uvrstitve spletne strani v rezultatih iskanja. Te metode so: [6] -. grajenje povezav povezava s socialnimi omreţji ustvarjanje zaznamkov (ang. social bookmarking). Zakaj je optimizacija izven strani pomembna? Spletni iskalniki se ţe desetletja trudijo najti način, da bi uporabniku prikazali karseda dobre zadetke. Zaradi tega uporabljajo faktorje optimizacije na strani in izven strani. Optimizacija izven strani iskalnikom prikaţe, kako spletno stran dojemajo druge strani in uporabniki. Spletna stran, ki je uporabna, ima več moţnosti, da do nje vodijo kvalitetne zunanje povezave z drugih strani, prav tako je več moţnosti, da so omenjene na socialnih omreţjih, kot soFacebook, Google+, Twitter in druga. Ne pozabimo omeniti še, da ima uporabna spletna stran tudi več moţnosti, da jo uporabnik doda med zaznamke in deli med skupnostjo, kar šteje kot kvalitetna zunanja povezava. [6]. 37.

No results found