VIII teema: Veebilehekülje avalikustamine ja kasutusjuhendid

Kaheksanda blogipostituse ülesande kirjelduse võib leida siit.

Sellel nädalal on kõigile üks ülesanne. Tavalisel veebisaidil ei ole lehestiku kasutustingimused niivõrd vajalikud kui e-poel, samas osade veebirakenduste puhul nendeta ei saa. Ülesanne on järgmine ja on oluline, et täidetud oleksid kõik neli punkti:

  1. vali välja ja loe läbi vähemalt 2 e-poe või korraliku veebisaidi või veebirakenduse kasutustingimused (nimetatakse ka ostutingimused, privaatsuspoliitika, ostuinfo, tingimused …) – kogu õiguslik osa, mis on lehega seotud;
  2. lühidalt too välja ja võrdle väga lühidalt nendes käsitletavat infot, võid kasutada ka tabelit/loetelu;
  3. too välja sinu arvates vastuolulised punktid kui oli selliseid;
  4. avalda arvamust, kui tähtsad on veebisaitide kasutustingimused Sinu, kui kasutaja jaoks?

Veebilehtedeks, mille õigusliku osaga tutvutsin, valisin välja kaks järgmist veebilehte: https://www.1a.ee ja https://arvutitark.ee/. Mõlemad veebilehed tegelevad suures osas elektroonika ja arvutikomponentide müügiga. Nende õiguslikule osale, millega tutvutsin, võib ligi pääseda siit:

Üldjoontes on õiguslikus pooles toodud kõik see välja, mis määrab ära, kuidas ja mis tingimustel antud veebikeskkond töötab:

  • üldsätted (kõige üldisemad asjad, tutvustus, mõisted jms)
  • kliendi andmed ja andmekaitse/isikuandmete konfidentsiaalsus (antakse teada, mis andmeid võidakse küsida ning selle eesmärk, mainitakse ära nende töötlemine ja tuuakse välja Isikuandmete kaitse seadus)
  • hinnad (selgitatakse, kuidas hinnad on näidatud eurodes koos käibemaksuga ning võivad muutuda, et kas midagi lisandub või ei (näiteks postikulud jms))
  • kaupadest üldiselt (kuidas laoseis ning tarneaeg võivad mõjutada olemasolu, pildid illustratiivsed jms)
  • ostuprotsess (tuuakse välja erinevad viisid, kuidas on võimalik kauba eest maksta, Arvutitark OÜ puhul isegi kogu ostuprotsess alates veebilehele minemisest kuni maksmiseni)
  • kauba tagastamine (välja toodud, kuidas protsess toimib, mis tingimustel jms)
  • pretensioonid/kaebused (hästi palju seotud eelneva ja järgneva punktiga, lisaks toodud välja VÕS paragrahvid, mille alusel kogu protsess toimib ning lisaks, et on võimalik pöörduda Tarbijakaitseametisse või Harju Maakohtusse kui ei ole jõutud kokkuleppele jms)
  • garantii (on kirja pandud garantiiaeg, mis algab alates kauba kättesaamisest; garantiiremont, kus ja kes seda läbi viib, kuidas on võimalik seda taotleda; mis ei kuulu garantii alla jms)
  • lisaks on Arvutitark toonud välja erinevad eletrooniktoodete kogumispunktid

TL;DR: veebikeskkondade peamised õiguslikud punktid on järgmised:

  • üldjoontes on hästi sarnased, kuid samuti leidub ka erinevusi, mis on omased antud veebilehele (näiteks partnerid, kes tegelevad hoolduse, tarne või järelmaksuga)
  • kui ostja andis nõusoleku, siis tuleb nendest punktidest kinni pidada, vastasel (enamikel) juhul on ostja ise süüdi
  • enamik punkte on lihtsalt OÜ enda kaitseks, kuid samas panevad need paika ka selle, et kuidas ja mille alusel kogu majandamine toimub. Nende alusel toimub pärast igasugune vaidluste lahendamine.
  • 1a puhul on toodud välja ka punkt, et ostu-müügi lepingu katkestamise õiguse kuritarvitamisega on müüjal õigus üldse ostjat keelduda edaspidi teenindamast

Vastuolulisi punkte ei märganud, kuid jäi meelde 1a veebilehelt, et süsteemi vea tõttu madal hind annab müüjale õiguse toodet mitte müüa ning raha makstakse ostjale tagasi. Ehk siis tuleks alati kontrollida, et kas tegemist on tegelikult ka õige hinnaga, millega üritatakse toodet müüa või tuleb hiljem lihtsalt pettuda.

Enamikel veebilehtedel on standardsed kasutustingimused – mitte midagi liiga üllatavat (mõisted, kasutajakord, tingimused, seadused ja määrused, millele kogu asi toetub), kuid sellegi tõttu ei maksa neist kogu aeg üle vaadata. Omast kogemusest võin öelda, et enamikel juhtudel sirvin kergelt läbi, kuid kui plaanin raha kulutada, siis loen mõndasid punkte ka natuke põhjalikumalt, näiteks üleval pool toodud veebilehtede puhul lugesin läbi kogu teksti, kuna olen sealt varem ostnud ning plaanin ka tulevikus tõenäoliselt seda teha ja hea oleks teada, millele olen oma nõusoleku andnud. Lisaks kasutajatingimuste lugemises osas – ega ei tea kunagi, millal mõni järgmine firma või osaühing oma EULA’sse mõne üllatuse lisab, olgu see kas või lihtsalt ekirja saatmine, et saada selle eest 1000 dollarit.

 

VII teema: A/B testimine ja analüütika

Seitsmenda blogipostituse ülesande kirjelduse võib leida siit.

Paigalda Google Analytics ja tõesta see lisades pilt on Google Analytics’i halduspaneelilt 

Lisaks vali üks järgnevatest:

1) paigaldada lisateek või kasuta Google Analytics experiement’i ja tee üks näidis A/B testimise eksperiment (proovi kasvõi pealkirja mõju testida – sisu ei ole oluline) ja kirjelda kuidas selle üles seadsid

2) paigalda lehele heatmap.js või mingi muu analüütika rakendus ja kirjelda paigaldusprotsessi ning muljeid, kuidas jälgimise üles seadsid

3) loo üks näidis maandumisleht A/B testimiseks, kasutades unbounce keskkonda ja kirjelda protsessi ning muljeid

chrome_2017-10-25_16-14-36

Kommentaariks ülemise pildi kohta – töö tegemise ajal oli sees VPN, seega näitab Google Analytics minu asukohaks Stockholmi ning testimise mõttes oli lihtsalt lahti kaks tab‘i.

Valisin enda kasutatavaks lisateegiks WordPressi jaoks tehtud plugina nimega Google Analytics Dashboard for WP (GADWP), mille võib leida järgnevalt lingilt. Oma ülesehituselt on ta väga sarnane Google Analytics’ile, kuid sisaldab lisaks veel erinevaid mooduleid, mille abil saab hinnata oma lehe külastajaskonna käitumisviise kindlal leheküljel ning peale selle saab seda kasutada väga mugavalt WordPressi enda Dashboard’il. Paigaldus oli üllatavalt lihtne – nagu iga hästi tehtud WordPressi pluginaga. FTP rakendusega (minu puhul WinSCP) sai kogu vajalik failikogum tõstetud õigesse kohta wp-content/plugins alla. Seejärel sai WordPressis endas antud plugin aktiveeritud, Google Analytics’iga ühendatud ning mõndasid sätteid muudetud ja muidugi ka kohustuslik testimine sai kohe tehtud – asi töötas nii nagu oli lubatud.

Lisaks proovisin ära ka sellise rakenduse nagu seda on Hotjar, mille kodulehe võib leida siit. Antud lahenduse abil on väga efektiivselt võimalik ära näha, mis veebilehe osad kasutajaid kõige enam paeluvad või neid kindlal lehel hoiavad. Hotjari kasutamisele võtmine oli väga kerge:

  1. Tee kasutaja nende veebilehel ja anna veebileht, mille kohta soovid andmeid saada
  2. Sisesta nende antud koodijupp WordPressi puhul päisesse
  3. Oota kinnitust, et rakendus töötab korrektselt

Sarnaselt Google Analytics’ile on ka Hotjaril väga mõnus kasutajaliides, kust loeb välja informatsiooni kasutajaskonna kohta, mis võib aidata lehekülje edasisel arendusel. On võimalik näha täpselt, millised on erinevate kasutajate tehnilised lahendused (resolutsioon, OS, veebilehitseja), kuid ka millistel lehtedel kasutajad käisid ja kui kaua ning, mis hetkel nad lahkusid. Minu arvates eriti huvitav on see, et on võimalik näha täpselt, kuidas külastaja oma hiirt on kasutanud antud veebilehel nii videona (recordings alt) kui ka heatmap‘ina. Toon allpool välja heatmap‘i, kus on näha elemendid, mille peal on kasutaja oma hiirega vajutanud.

hotjarHeatmap

VI teema: Otsingumootorid ja SEO

Kuuenda blogipostituse ülesande kirjelduse võib leida siit.

Leia ja paigalda oma lehele lisateek, mis võimaldab sul genereerida Sitemap’i (saidikaart). Veendu, et su veebisaidil oleks vähemalt kaks sisulehte. Tee oma lehestikust selle abil Sitemap XML fail ja lisa sellele failile link oma veebipostituses. Samuti lisa ka link kasutatud teegile. 

Lisaks vali üks veebisait (NB! Vali vabal teemal veebisait, mis on kehvasti optimeeritud – ei ole esimesel lehel Google’i otsingutulemustes) ja tee sellele SEO analüüs.

Sitemap‘i tegemiseks kasutasin WordPressi pluginat nimega Google XML Sitemaps, mille võib leida siit ning minu enda veebilehe Sitemap‘i võib leida XML kujul siit.

Ei hakanud välja valitud lehekülje analüüsi tegema Google Docs’is, kuna tegin antud analüüsi üksi, siis pole taolisel viisil tegemisel väga suurt mõtet ning oma teemaks valisin loomade varjupaigad ja analüüsitavaks veebileheks pesaleidja.ee.

Hetkeolukorra kaardistus – metaandmed puuduvad (nii kirjeldus kui ka näiteks otsingusõnad). Lisaks on puudu https, mille asemel on hetkel veebilehel kasutusel http 1.1. Teiste atribuutide kasutus on olemas – H1, H2, piltidel alt kirjed. Sotsiaalmeedia leheküljed on olemas näiteks Facebooki näol neljas erinevas keeles: eesti, inglise, soome ja vene keeles. Veebilehekülje üldine ülesehitus on minu arvates liiga tihedalt sisustatud, hästi palju erinevaid menüüvalikuid ning nii-öelda “wall-of-text“. Lehtede pealkirju on võimalik välja lugeda ka URL-ist. Otsisõna paari “loomade varjupaik” alusel on tuntumates otsingumootorites antud veebileht:

  • Google’s 2. lehel
  • Bing’is 3. lehel
  • Yahoo’s 8. lehel
  • neti.ee’s 10. lehel

Toon välja ka selle, et osades otsingumootorites oli võimalik leida postitusi antud veebilehe kohta enne (veebilehe enda blogi postitused ja/või kuulutused ning kellegi teise postitused, mis suunasid antud veebilehele), kui tuli otsingutulemustes välja see kindel koduleht. Järgnevalt võib leida pildi veebilehe erinevate ratingute kohta (https://www.checkpagerank.net abil):2017-10-14_22-39-27

Analüüs – ühe konkurendina toon välja näiteks http://www.pets.ee/est/, mille võib leida Google’i otsingutulemuste esimeselt lehelt. Antud veebilehel on paar eelist, mis aga annavad väga palju juurde pesaleidja.ee ees. Nimelt on disain mugavam ning sõbralikum kasutajale, lisaks on olemas erinevad metaandmed (kirjeldus, otsisõnad) ja veebilehe laadimine on ligikaudu kolmekordselt kiirem (pesaleidja.ee üle kolme sekundi laadimist võrreldes pets.ee ühe sekundiga), kuid kahjuks puudub mõlemalt lehel https protokoll.

Toon pildina välja antud valdkonnaga seotud otsingusõnad: 2017-10-14_23-00-20

Ettepanekud – peamised punktid, mis minu arvates aitaksid väga palju veebilehe populaarsusele kaasa on järgnevad:

  • disain:
    • ennist sai välja toodud, et hästi palju informatsiooni on kokku pandud ning see ei pruugi külastajale meeldivana tunduda – tuleks teha üldist välimust lihtsamaks ning kasutajale mugavamaks
    • värvilahendus võiks minu arvates natuke teistes (heledamates) toonides olla
    • menüü elemendid tuleks üle vaadata, et mida saab ära kaotada ning mida on kindlasti vaja, sest hetkel tundub neid lihtsalt liiga palju olevat ning võib-olla võtta kasutusele kõrvalmenüü  asemel header‘is olev menüü
  • metaandmed:
    • ei lugenud otseselt välja, mis piirkonna ühinguga tegemist on, kuid igasuguste sarnaste metaandmete kasutamine tuleb kasuks, eriti siis, kui eelnevalt need puuduvad (näiteks “…” -> “loomade varjupaik/hooldekodu vabatahtlik”)
  • muu:
    • sisu osas erilisi probleeme ei näinud, kuigi kohati võib tunduda, et korraga tuleb hästi palju teksti läbi vaadata

Antud ülesande tegemisel oli abiks MozBar Chrome extension, Keyword Tool ja CheckPageRank.

V teema: Kujundusmalli paigaldamine

Viienda blogipostituse ülesande kirjelduse võib leida siit.

Pead paigaldama oma sisuhaldussüsteemi uue kujunduse ja tegema lehestikus väikesed muudatused. Lisaks leia veel juurde 3 viisakat kujundusmalli.

veebiScreenshot

Kujundusmall nimega Magnus sai leitud siit. Valisin antud kujundusmalli eelkõige just selle tõttu, et meeldis selle lihtsus ja elegantsus, see sobib suurepäraselt minu veebilehe peamise eesmärgiga, mis oleks online portfoolio omamine. Kujundusmallil endal ei ole väga palju võimalusi, kuid nagu ennist sai mainitud, siis selle tõttu paeluski selle kasutamine mind enim – ajan taga lihtsust (näiteks oma veebilehel muutsin ainult paar asja päises ning jaluses, et hoida see võimalikult minimalistikuna) ning rohkem ei ole alati parem. Kujundusmallil saab muuta erinevaid atribuute, toon välja peamised: päis, jalus, menüüd, värvid ehk nagu igal teisel WordPressi kujundusmallil.

Hestia

chrome_2017-10-08_00-14-03.png

Kujundusmalli võib leida siit. Sobib hästi paljude erinevate valdkondade jaoks, alates äridest ja lõpetades portfooliotega. Peale selle, et see omab kujundusmallidele tavapäraseid osasid, on see ühilduv väga paljude erinevate moodulitega: Flat Parallax Slider, Photo Gallery, Travel Map, Elemtor Page Builder ja nii edasi. Kujundusmall ise on responsive, toetab mitmeid erinevaid keeli ning lisaks on ka otsingumootorisõbralik.

Tyche

chrome_2017-10-08_00-55-51.png

Kujundusmalli võib leida siit. Tegemist on ühe parima Woocommerce kujundusmalliga erinevatele veebipoodidele. On olemas täielik ühilduvus eelnevalt nimetatud platvormiga ning antud kujundusmall töötab hästi erinevatel seadmetel. Seda on hästi kerge üles seada, muuta vastavalt oma vajadustele ning hakata lõpuks ka igapäevaselt kasutama.

Fotografie

chrome_2017-10-08_01-09-55.png

Kujundusmalli võib leida siit. Tegemist on oma põhimõttelt hästi sarnase kujundusmalliga nagu on seda minul praegu kasutusel olev Magnus. Rõhku on pandud peamiselt lihtsusele ja disainile. Eelkõige on antud mall suunatud just erinevate piltidega tegelevatele elukutsetele, kuid see ei takista ka üles seadmast ka täiesti tavalist blogi. On olemas erinevad võimalused muuta veebilehe väljanägemist: portfooliot, sisu kuvamist, värve, menüüde ülesehitust ning ka erinevate meediafailide valikuid.

IV teema: Turvalisus ja CMS’i paigaldamine

Neljanda blogipostituse ülesande kirjelduse võib leida siit.

Peate paigaldama valitud sisuhaldussüsteemi ning peate seda tegema nii, et ta oleks võrgust kättesaadav. Kellel pole enda veebimajutust kuskilt võtta siis julgelt võite paigaldada selle greeny.cs.tlu.ee serverisse. Peate tegema ka sissekande oma blogidesse.

Paigaldatud sai CMS nimega WordPress ning sellele saab ligi URL-iga “enij.me“, töötavad ka lisaks erinevad alamdomeenid (www, asd, enij, 51hkljfhqkh1k, jne) kõik viitavad samale URL-ile. Domeen on saadud NameCheap’ist, server DigitalOcean’ist, SSL sai tehtud Let’s Enrypt’iga ning kasutusel LAMP. Suureks abiks oli ka Github Student Developer Pack.

Turvalisus:

Üks turvalisuse aspekt, mille vahel saime valida – kas .htaccess kaitsmine parooliga või SSL ühenduse tekitamine, valisin viimase, mida võib näha ka üleval olevast ekraanitõmmisest. Lisaks sai muudetud .htaccess faili, kus sai pandud peale erinevad piirangud, mis loodetavasti aitavad muuta veebilehte turvalisemaks. Ei tea, kas läheb otseselt sama turvalisuse mõiste alla, kuid erinevate backup‘ide tegemine on kindlasti kasulik.

Juhendid:

Anicas, M. (2016, 21. aprill). Initial Server Setup with Ubuntu 16.04. Loetud aadressil https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-16-04

Bearnes, B. (2016, 21. aprill). How To Install Linux, Apache, MySQL, PHP (LAMP) stack on Ubuntu 16.04. Loetud aadressil https://www.digitalocean.com/community/tutorials/how-to-install-linux-apache-mysql-php-lamp-stack-on-ubuntu-16-04

Bearnes, B. (2016, 21. aprill). How To Install and Secure phpMyAdmin on Ubuntu 16.04. Loetud aadressil https://www.digitalocean.com/community/tutorials/how-to-install-and-secure-phpmyadmin-on-ubuntu-16-04

Heidi, E. (2016, 21. aprill). How To Secure Apache with Let’s Encrypt on Ubuntu 16.04. Loetud aadressil https://www.digitalocean.com/community/tutorials/how-to-secure-apache-with-let-s-encrypt-on-ubuntu-16-04

Ellingwood, J. (2016, 22. aprill). How To Install WordPress with LAMP on Ubuntu 16.04. Loetud aadressil https://www.digitalocean.com/community/tutorials/how-to-install-wordpress-with-lamp-on-ubuntu-16-04

McKinnon, J. (kuupäev puudub). A Comprehensive Guide to Editing .htaccess for WordPress Security. Loetud aadressil https://premium.wpmudev.org/blog/htaccess/

Raskused:

Juhendite abiga oli üldine paigaldus oodatust lihtsam, kuid peamised raskused tekkisidki juhendite järgimisega, sest hästi tähtis on seal täpselt teha, mis on nõutud – kui teed midagi valesti saad kohe sellise ebameeldiva error‘i. Peale juhendite aitasid kaasa kindlasti Internetist leitud erinevate blogide kommentaarid ning kaasõpilased, kelle poole sai probleemide puhul pöörduda.