kolmapäev, 5. detsember 2018

Kodutöö 4


15 põhilist märksõna pagariäri kohta:

  • kringel
  • tort
  • kook
  • saiake
  • pirukas
  • pagaritooted
  • pagariäri
  • kodiitritooted
  • kondiitriäri
  • küpsetama
  • maiustus
  • maitseelamus
  • magus
  • hõrgutav
  • koogivalik

Linkimine: https://3dmarketing.ee/2018/12/05/

A/B testimine

Algne variant

Uus variant


A/B testimise tulemused:


Ligipääsetavuse parandamine

Testisin kodulehe ligipääsetavust tööriistaga Wave. Wave´iga testides tuli tulemuseks 3 errorit ja 5 alerti. 2 errorid olid pildigalerii juures ning ütleisd, et pildil ei olnud kirjeldust ehk siis empty link. Kolmandat errorit ei õnnestunud üles leida. Alerdid olid 4 erineva asja kohta:
 - Orphaned form label
 - Skipped heading level
 - Redundant link
 - Noscript element
Hetkel ei muutnud lehe juures Wave´ist saadud tagasiside põhjal mitte midagi, kuna esiteks tegemist on katsetuslehega, mida ei ole plaan töösse panna ning teiseks ei tundunud need probleemid olevat tõsised murekohad.





teisipäev, 4. detsember 2018

WordPressi kodulehe haldamise juhised

Sisse logimine

Selleks, et teha kodulehel vajalikke muudatusi tuleb lehele sisse logida administraatorina (kui Veebimajutuses on juba sisse logitud, siis uuesti sisse logimine ei ole vajalik). Selleks tuleb minna järgmisele aadressile:
www.tammiko.ee/wp-admin/

Pluginate uuendamine

WP Dashboardil vasakpoolses menüüs klikkida alamenüüs nimele "Plugins"



Edasi valida välja need pluginad, millel juures märge, et plugin vajab uuendamist ning klikkida nupule "update now".



Nüüd peaks tulema teada "Updated". Kui nii, siis ongi plugin uuendatud.


Info lisamine/kustutamine

Võtame eesmärgiks uuendada kodulehel kontaktandmeid.

WP Dashboardil vasakpoolses menüüs klikkida alamenüüs nimele "Pages".



Edasi valida sobiv lehekülg (antud juhul on tegemist single-page-saidiga, nii et ongi vaid yks lehekülg) ja klikkida nupul "edit".



Avaneb uus leht ning seal vajutada nupule "Edit with Elementor".


Seejärel avaneb täiesti teistsugune leht. Avanemine võib veidi aega võtta. Edasi tuleb lehel kerides või klikkides kontaktandmete juurde jõuda ja siis teha klikkides aktiivseks see teksti osa, mida muuta on vaja.



Kui kontaktandmete osa on aktiivseks märgitud, siis võib teksti redigeerida nii parem- kui vasakpoolses aknas. Kui vajalikud muudatused on tehtud siis tule uuenduste aktiveerimiseks vajutada nuppu "Update".



Tehtud muudatuste nägemiseks, et kontrollida, kas kõik on õigesti võib veel vajutada "Update" nupu kõrval olevale silma ikoonile.


Toimingud galeriis

Pildi lisamine

Pildi lisamisel galeriisse tuleb teha esimesed 3 sammu analoogselt kontaktandmete muutmisega:
1. WP Dashboardil vasakpoolses menüüs klikkida alamenüüs nimele "Pages".
2. Valida sobiv leht ning vajutada nuppu "edit".
3. Lehe avanedes vajutada nupule "Edit with Elementor".
PS! Vaata üleval pool lõiku info lisamine/kustutamine

Edasi tuleb kerida Elementori vaates lehel õigesse kohta, kus asuvad pildigaleriid (või menüü kaudu vajutades "Galerii" menüünupule). Kui olla kohas, kuhu pilt lisada soovitakse tuleb veenduda, et seal on lõuend, kuhu sobiv widget tirida, juba olemas. Kui lõuendit ei ole, tuleb see tekitada plussikese juures klikates...



...ja seejärel sobivat ülesehitusega lõuend valides (kuna meil lehel 3 tulpa pilte, siis valime ka kolme tulbaga lõuedi).



Kui lõuend sai tehtud (või oli juba olemas) siis tuleb vasakult widgetite seast valida widget nimega Image Hover Effects ja lohistada see lõuendile.


Kui widget on lõuendile lohistatud, ilmuvad vasakule aknasse pildi disainimiseks mõeldud vahendid. Choose image all oleval ruudulisel taustal klõpsates saab valida arvutist uue pildi, mida tahetakse galeriisse lisada.


Kui foto on arvutist uploaditud siis vajutada nupule "Insert Media"



Kui sobiv pilt on valitud tuleb panna pildile pealkiri ja kirjeldus (pealkiri ja kirjeldus kuvatakse pildil kui hiirega üle pildi libiseda, nii nagu teistel piltidelgi). Antud juhul on pealkiri toote nimetus ja kirjelduseks on toote koostisosad. Ülejäänud seadistused jäävad nii nagu default on.
Image size - full
Title Tag - H3


Edasi tuleb klikkida üleval vasakul menüüs nupule "Style", et jätkata pildi seadistamist.


Style menüü all on tuleb meil ära määrata Hover efekti värv ning tekstide font ning suurused. Kõigepealt Hover efekti värvi muutmiseks tuleb klikata Backgroud juures olevale default musta värvi kastikesele.



 Siis avaneb teistsugune vaade, kus on võimalik sisestada värvikood, millega asendada default must värv. Nüüd tuleb must värvikood (#000000)  ära kustutada ning sinna asemele kopeerida järgnev hall värvikood - rgba(127,127,127,0.67).



Järgmisena muudame samas "Style" menüüd pealkirja (Title) fonti ja suurust. Selleks tuleb klikkida sõna Typhography juures oleval pliiatsi ikoonil.

Seejärel avaneb rohkem valikuid Pealkirja muutmiseks. Meil on tarvis muuta vaid fonti ja teksti suurust. Kasutatav font on Verdana ning pealkirja suurus on 25px. Kui vastavad muudatused on tehtud tuleb vajutada nuppu "Update", et muudatused salvestada.


Viimasks tuleb muuta ka kirjelduse tekst analoogselt pealkirjaga, muutes ära kasutatava fondi ja teksti suuruse. Selleks tuleb jätkuvalt Style menüüs veidi alla kerida ja alajaotuse Description juures klikata jällegi Typhograghy juures olevale pliiatsi ikoonile.

 Avaneb jällegi rohkem võimalusi kirjelduse muutmiseks, kuid meie muudame ainult fonti ja teksti suurust. Pildi kirjeldus on samuti Verdana nimelises fondis ning suuruseks on 17px. Kui vastavad muudatused on tehtud siis vajutada nupule "Update" ja pilt ongi edukalt lisatud.



Pildi pealkirja ja/või kirjelduse muutmine

Võtame eesmärgiks muuta galeriis toote kirjeldust.

Pildi teksti muutmisel tuleb teha esimesed 3 sammu analoogselt kontaktandmete muutmisega:
1. WP Dashboardil vasakpoolses menüüs klikkida alamenüüs nimele "Pages".
2. Valida sobiv leht ning vajutada nuppu "edit".
3. Lehe avanedes vajutada nupule "Edit with Elementor".
PS! Vaata üleval pool lõiku info lisamine/kustutamine

Edasi tuleb kerida Elementori vaates lehel õigesse kohta, kus asuvad pildigaleriid (või menüü kaudu vajutades "Galerii" menüünupule). Kui olla kohas, kus pildi teksti tuleks muuta tuleb pildi peal teha klikk, et see aktiivseks muuta.

Seejärel avaneb vasakul pool aktiveeritud pildi muutmise võimalused. Kirjelduse muutmiseks tuleb Description all olevas kastis teha lihtsalt vajalikud muudatused.


Nin seejärel tuleb toiming lõpetada vajutades asakul all olevat uppu "Update". Seejärel ongi tekst muudetud.


Pildigaleriis foto pealkirja muutmine käib analoogselt kirjelduse muutmisel. AInus erinevus on, et teksti redigeerimine käib Title all olevas kastikeses. Toiming tuleb samamoodi lõpetada vajutades "Update" nuppu, et tehtud muudatsed salvestada.

Pildi kustutamine

Pildi kustutamine galeriist käib väga sarnaselt pildi lisamisele.
Pildi kustutamiseks galeriist tuleb teha esimesed 3 sammu analoogselt kontaktandmete muutmisega:
1. WP Dashboardil vasakpoolses menüüs klikkida alamenüüs nimele "Pages".
2. Valida sobiv leht ning vajutada nuppu "edit".
3. Lehe avanedes vajutada nupule "Edit with Elementor".
PS! Vaata üleval pool lõiku info lisamine/kustutamine

Edasi tuleb kerida Elementori vaates lehel õigesse kohta, kus asuvad pildigaleriid (või menüü kaudu vajutades "Galerii" menüünupule). Kui olla kohas, kus pilt eemaldada soovitakse, tuleb teha parem-klikk selle pildi peal, mida soovitakse kustutada. Seejärel muutub pilt aktiivseks ning ilmub rippmenüü, kus tuleb klikata viimasele valikule "delete".



Kui pärast delete nupule vajutamist pilt kaob, siis tuleb toiming lõpetada vajutades vasakul alumises menüüs nupule "Update". Seejärel oni pilt galeriist kustutatud.



Kodutöö 3

Seoses sellega, et mõnesid ülesandeid ei olnud siiski võimalik lokaalses serveris oleva veebilehega testida ning hinnata (linkimine, ligipääsetavuse testimine jne) sai pandud üles ajutine leht domeenile https://3dmarketing.ee . Tegemist on lehega, mis ei ole päris aine raames valmiv koduleht, rõhku on pandud aiult nõutud funktsionaalsustele. 


Tammiko kodulehe menüü ja mõned alamlehed

Avaleht



Firmast



Tellimine






Nõudmised:

Saidil on vähemalt slaider 3e pildiga, nt Meta Slider, Nivo slaider.
Saidil on galerii, nt Envira Gallery (pildid kohast või partnerite logod vms, plagiaati palun mitte teha, pigem tehke näidislogod vms.
Saidil on kontaktivorm, nt Contact Form 7.
Saidil on vähemalt ühe sotsiaalvõrgustiku link, nt Floating Social Bar (Facebook vms).
Saidil on üks tabel, nt TablePress (hinnakiri vms)
Kuna oma lehel ei olnud enamikke nendest asjadest tarvis, tegin eraldi saidi, kus katsetasin 3. kodutöö asju.
Nivo Slider
Envira Gallery



Kontaktivorm

kolmapäev, 26. september 2018

Kodutöö 2 - sitemap ja wireframe


Sitemap










Wireframe


Kodutöö 1 - nõuete kogumine

Aine veebiarendus ja disain raames plaanin luua WordPressi kasutades kodulehe pagariärile. Tegemist on minu tuttava firmaga, kellel tegelikult on juba töötav leht domeeni ja majutusega olemas, kuid kuna leht on aegunud sisu ja vanamoodsa kujundusega, on kliendil soov kogu koduleht ümber kujundada ning infot täiendada.

Veebilehe olemus
Eesmärk: pakkuda pagariäri klientide lihtsat ja mugavat moodust, et toodetega tutvuda ning tellimus esitada.
Kellele mõeldud: leht on mõeldud kõigile inimestele, kes tunnevad huvi pagaritoodete vastu.
Esmased funktsionaalsused: lehel navigeerimine, kauba kuvamine, kauba valimine ostukorvi, ostu sooritamine, kauplejaga suhtlemine.

Ärinõuded
Kasutaja soovid lehele: toodete vaatamise võimalus, toodete ostmise võimalus, toodete uuendamine (lisamine, kustutamine), kontakteeruda ostjaga ja et ostja saaks kontakteeruda müüjaga.
Kasutajalood:
Mina kui pagariäri omanik soovin hallata oma kodulehte ja lisada sinna uusi tooteid.
Mina kui pagariäri omanik soovin sisse logida ja hallata lehe infot (lahtiolekuaegu, hindu, kontakte jne).
Mina kui pagariäri potentsiaalne klient soovin tutvuda lehel olevate hindade ja toodetega.
Mina kui pagariäri potentsiaale klient soovin kontakteeruda pagariäriga, et esitada küsimusi toodete koostisosade kohta.
Mina kui pagariäri klient soovin esitada tellimust.
Mina kui konkureeriva äri omanik soovin vaadata lehte tervikuna, et teha korrektuure oma lehel ja hoida see kaasaegsena.

Tehnilised nõuded
Platvorm: WordPress
Keelsus: eesti keelne
Ligipääsetavus: hästi ligipääsetav, loogiliselt struktureeritud, vähem infot ja konkreetne
Turvalisus: administraatori liides on parooliga kaitstud

Ärireeglid
R1: Klient võib esitada null kuni mitu tellimust. Tellimusi võib esitada telefonitsi või süsteemi kaudu.
Iga tellimusega on seotud üks konkreetne inimene.
R2: Tellimuse võtab vastu pagar ise.
R3: Kliendil on võimalik esitada telefoni ja meili teel pagarikojale küsimusi. Iga küsimusega on seotud üks konkreetne inimene.

Äriprotsess
1. Inimesel tekib idee tellida pagarikojast kringel.
2. Inimene läheb pagarikoja kodulehele ja tutvub toodetega.
3. Valib välja sobiva toote.
4. Lisab kommentaari (kui vaja!). Näiteks: "Palun kringel ilma rosinateta.".
4. Alustab ostmisprotsessi
          4.1 Täidab ära vajalikud andmed (nimi, telefoninr, kohaletoimetamise koht)
          4.2 Valib panga
          4.3 Siseneb panka
          4.4 Kinnitab ostu
          4.5 Suunatakse tagasi kaupmehe juurde
5. Inimesele tuleb kinnitav e-mail ostu sooritamise kohta
6. Inimene võtab kringli märgitud aadressil vastu.