Magento spletna trgovina

Magento spletna trgovina je trenutno najhitreje rastoča, najbolj prilagodljiva in najmočnejša platforma za spletne trgovine. Omogoča veliko fleksibilnost pri tem, kako spletne trgovine delujejo, celo več trgovin na enem sistemu.

Magento Community

Magento Community izdaja je odprtokodna in brezplačna za prenos. Je zelo fleksibilna in odličen način za začetek poslovanja spletne trgovine. Veliko lastnosti iz Professional in Enterprise izdaje je na koncu prenešenih tudi v Community izdajo, vendar temu ni nujno tako. Magento Community lahko prilagodite in razširite kot želite, daje pa vam močno osnovo za spletno trgovino in edinim stroškom v oblikovanju, implementaciji in razširitvi osrednjega sistema.

Magento Professional

Magento Professional izdaja ima vse, kar najdemo tudi v Community izdaji, vendar ima podporo tudi za PA-DSS in vsebuje veliko dodatnih funkcij za pridobivanje in negovanje strank, kot so naprimer točke zvestobe in spletni denar. Licenca za Magento Professional se začne pri $3.000 letno, poleg stroškov oblikovanja in razvoja.

Magento Enterprise

Magento Enterprise izdaja je prestižen razred Magento trgovine, ki pride z garancijo, podporo PCI in številnimi funkcijami ki jih v Professional in Community izdajah ne najdemo. Iskalnik in email marketing sta v Magento Enterprise popolnoma prenovljeni, BridgeConnect omogoča uvoz/izvoz možnosti iz ERP rešitev, kot so npr. SAP in Microsoft Dynamics. Napreden CMS+ sistem, vključen v izdajo, omogoča popoln nadzor nad vsebino. Licenca za Magento Enterprise se začne pri $13.000 letno.

Več o Magento trgovini

Več o razlikah med izdajami si lahko preberete na uradni strani.

Če potrebujete pomoč in svetovanje o izbiri prave izdaje glede na vaše potrebe, nas kontaktirajte.

Delovna plošča (Dashboard)

Ko se prijavimo v sistem, se nam odpre Dashboard, ki predstavlja presek trenutnega stanja.

Zgornji graf nam kaže, koliko dnevnih obiskovalcev smo imeli na strani, v obdobju zadnjega meseca. Desno zgoraj lahko tudi nastavimo obdobje, za katerega želimo pregled. Številka 90 nam pove, da smo imeli 90 unikatnih (različnih) uporabnikov.

google analytics graf

Malo nižje se nahaja tabela Site Usage, kjer izvemo 6 podatke za obdobje zadnjega meseca. Prvi, Views, nam pove skupno število unikatnih obiskovalcev v enem mesecu, Pageviews pa število ogledov vseh strani, vključno s podstranmi. Iz teh dveh podatkov, oz. če pogledam tretjega, Pages/Visit lahko ugotovimo koliko strani na naši spletni strani v povprečju pogleda vsak obiskovalec.

Google Analytics, Site Usage

Na desni strani imamo še podatek Bounce Rate, ki nam pove kolikšen del ljudi zapusti našo stran po ogledu prve strani, torej ne nadaljuje ogleda na podstrani, Avg. Time on Site, ki nam pove povprečen čas, ki ga obiskovalec preživi na strani ter % New Visits, ki nam pove kolikšen delež obiskovalcev je nov, kolikšen delež pa jih je na strani prišlo že drugič ali celo večkrat.

Google Analytics - Site Usage

Za nas pomembna je še tabela Traffic Sources Overview, kjer je prikazan delež obiskovalcev, ki so prišli preko iskalnikov (Google, Yahoo, Najdi.si,…), delež direktnega prometa, to so tisti, ki so na stran prišli z vpisom domene v brskalnik, ter delež usmerjenih obiskovalcev, to pa so tisti, ki so prišli iz drugih spletnih strani preko povezave.

Google Analytics - Traffic Sources

V tabeli Content Overview, ki se nahaja desno spodaj, pa boste našli seznam najbolj obiskane vsebine na vaši spletni strani.

Obiskovalci (Visitors)

V meniju levo zgoraj izberite Visitors in pred vami so vsi podatki, ki jih imate na voljo o svojih obiskovalcih. Večino teh podatkov je na voljo že na prvi strani, tukaj imamo le bolj natančen pregled nad njimi.

Med bolj zanimive verjetno spada Browser Capabilities, kjer lahko zvemo kateri brskalnik uporabljajo naši obiskovalci, katera velikost zaslona je največkrat uporabljena, kateri operacijski sistem uporabljajo, ali imajo omogočeno Javo in Flash. S temi podatki lahko svojo spletno stran prilagodimo tehničnim zmogljivostim uporabnikovih računalnikov.

Google Analytics - Browsers

Viri Prometa (Traffic Sources)

Razdelek Traffic Sources nam pove več o tem kako so obiskovalci prišli na našo spletno stran.

Usmeritvene Strani (Referring Sites)

Če izberete naprimer Referring Sites boste videli, koliko ljudi je posamezni dan prišlo na vašo stran preko druge strani. Pod grafom so tudi podatki, kako se ti obiskovalci obnašajo v primerjavi z drugimi. Lahko se npr. na naši strani zadržujejo dlje časa, kot obiskovalci, ki so prišli preko iskalnikov, ali pa si ogledajo manjše število strani.

Spodaj pa imamo še seznam vseh strani, ki so nam posredovale obiskovalce, z natančnim številom, koliko jih je bilo.

Iskalniki (Search Engines)

Razdelek Search Engines nam, podobno kot Referring Sites predstavi obnašanje obiskovalcev, ki so prišli iz spletnih iskalnikov, ter koliko obiskovalcev je prišlo iz katerega izmed njih.

Ključne besede (Keywords)

Za SEO optimizacijo je precej pomemben tudi razdelek Keywords, kjer se nahaja seznam ključnih besed, preko katerih so obiskovalci prišli na našo stran. Med njimi pogosto najdemo tudi besede, ki sploh niso povezane z našo spletno stranjo. Ta tabela nam je pogosto v pomoč, ko se odločamo za katero ključno besedo želimo našo stran optimizirati.

Vsebina (Content)

V tem razdelku imamo zbrane informacije, katera vsebina je bolj zanimiva in katera manj. Top Content nam pove, katero stran si je ogledalo največ ljudi, Top Landing Pages in Top Exit Pages pa, na katero stran je prišlo in iz katere strani je odšlo največ obiskovalcev.

Zgodovina CSS Sprites

Izraz Sprite izhaja iz starih časov računalniške grafike in video iger, ko so zadevo uporabili tako, da so v pomnilnik namesto ene velike slike naložili več manjših, računalnik pa je potem prikazoval te posamezne kose. Manj podatkov kot se je prenašalo iz pomnilnika, hitreje je delovalo. Na podobnem principu delujejo tudi CSS Sprites, le da tukaj več manjših slik združimo v eno veliko, tako da namesto 10 slik naložimo le eno.

Na spletu je nekaj časa veljalo, da je slike bolje razrezati in prikazovati v več kosih, kar pa ne drži popolnoma. S tem se je dosegla le navidezna pohitritev nalaganja, saj so se delčki slike prikazovali hitreje. Ampak ta princip deluje le navidezno, v resnici ta tehnika ni hitrejša. Vsak uporabnik namreč z obiskom spletne strani sproži HTTP zahtevke za slike, priložene datoteke, itd. Odvisno od verzije HTTP protokola in brskalnika, ki se uporablja, pa lahko le ta v povprečju naenkrat prenaša le dva do štiri zahtevke. Več kot je zahtevkov, daljša je vrsta.

Kako se lotiti CSS Sprites

Torej, princip je preprost. Čim več slik želimo združiti v eno samo, saj s tem privarčujemo na številu HTTP zahtevkov, kar pomeni tudi krajši čas nalaganja spletne strani.

Vzemimo za primer vrstico nekaj ikon, ki jih uporabljamo za prikaz povezav do socialni omrežij. Imamo 7 ikon velik 24px X 24px, s skupno velikostjo 10,0KB.

Ikone za povezavo na socialna omrežja

Koda našega menija v HTML bi izgledala takole:

<style type="text/css">
.primer1 ul li { list-style:none; float:left; margin-right:5px; }
img { border:0px; }
</style>

<div class="primer2">
  <ul>
        <li><a href="#" ><img src="ikona-digg.png" width="24px" height="24px" /></a></li>
        <li><a href="#"><img src="ikona-facebook.png" width="24px" height="24px" /></a></li>
        <li><a href="#"><img src="ikona-delicious.png" width="24px" height="24px" /></a></li>
        <li><a href="#"><img src="ikona-google.png" width="24px" height="24px" /></a></li>
        <li><a href="#"><img src="ikona-linkedin.png" width="24px" height="24px" /></a></li>
        <li><a href="#"><img src="ikona-twitter.png" width="24px" height="24px" /></a></li>
        <li><a href="#"><img src="ikona-yahoo.png" width="24px" height="24px" /></a></li>
    </ul>
</div>

Če želimo ta meni prikazati s tehniko CSS Sprite, je naša prva naloga, da teh 7 ikon združimo v eno sliko. Najlažje to naredite s Photoshopom ali podobnim programom. Slike postavite eno poleg druge, lahko naredite tudi nekaj px razmika med njimi, da bodo bolj pregledne.

Primer ikon pripravljenih za delo s CSS Sprites

Ko imamo sliko v celoti sestavljeno lahko naredimo HTML, koda pa gre tako:

<style type="text/css">
.primer2 ul li { list-style:none; float:left; }
.primer2 ul li a {background:url(sprite.png) no-repeat; width:24px; height:24px; display:block; margin-right:5px; }
.primer2 ul li a.ena {background-position:0px 0px;}
.primer2 ul li a.dva {background-position:-24px 0px;}
.primer2 ul li a.tri {background-position:-48px 0px;}
.primer2 ul li a.stiri {background-position:-72px 0px;}
.primer2 ul li a.pet {background-position:-96px 0px;}
.primer2 ul li a.sest {background-position:-120px 0px;}
.primer2 ul li a.sedem {background-position:-144px 0px;}
</style>

<div class="primer2">
  <ul>
        <li><a href="#" class="ena"> </a></li>
        <li><a href="#" class="dva"> </a></li>
        <li><a href="#" class="tri"> </a></li>
        <li><a href="#" class="stiri"> </a></li>
        <li><a href="#" class="pet"> </a></li>
        <li><a href="#" class="sest"> </a></li>
        <li><a href="#" class="sedem"> </a></li>
    </ul>
</div>

Primerjava med klasično tehniko in CSS Sprites

Lahko se na lastne oči prepričate, da vidne razlike med eno in drugo tehniko ni. Prihranili pa smo 6 HTTP zahtevkov, poleg tega je tudi sprite slika velika 9,50KB, torej smo prihranili tudi na skupni velikosti datotek. Ponavadi se razlika v velikosti pozna še malo bolj.

Posebnosti in slabosti Spritov

Ena izmed težav Spritov je ta, da niso primerni za ponavljanje. Ponavljanje je namreč možno doseči le v eno dimenzijo, po osi X ali Y, v obe hkrati pa žal ne gre. Zato je tehnika CSS Sprites najbol primerna za posamezne grafične bloke, recimo ikone, kot uporabljeno v primeru.

CSS Sprites da ali ne?

Seveda, kjerkoli je možno! Zmanjšanje števila HTTP zahtevkov je verjetno ena najlažjih možnosti optimizacije. Morda se vam bo na začetku zdelo veliko dela, ampak ko se boste sistema enkrat navadili boste ugotovili, da niti ni tako zamudno opravilo. Osebno se gradnje strani lotim najprej na klasičen način, na koncu pa vse slike združim v sprite, kar je morda malo zamudno (dvojno delo), ampak je tako enostavneje delati vmesne popravke. Če malo pogooglate boste našli tudi razne CSS Sprites generatorje, ki jim samo posredujete slike, oni pa jih sami zložijo v vrstni red.

CSS3

CSS3 prinaša kup novosti na področje spletnega oblikovanja in skupaj s HTML5 naj bi predstavljala pravo spletno revolucijo. Na kratko vam bomo predstavili, kaj vse lahko že danes naredite na svojih straneh samo z uporabo CSS3 standardov pri oblikovanju spletnih strani. Trenutno je največji problem to, da CSS3 podpirajo le novejši brskalniki, v starejših verzijah pa je spletna stran vseeno dobro vidna, le da je prikazana brez novosti. Trenutno (julij 2010) je CSS3 podprt v brskalnikih Firefox, Safari, Konqueror in Opera.

Obrobe (border)

En izmed večjih napredkov se je zagotovo zgodil pri možnostih obrobljanja, ki jih označujemo z angleško besedo border. Poleg starih možnosti, lahko sedaj pri obrobah nastavljamo tudi okrogle robove (border radius), sence robov (box-shadow), večbarvne robove (border color) in slike kot ozadje robov (border image).

Pred tem je bilo potrebno za tako oblikovanje uporabiti sliko kot ozadje. Ta novost bo zagotovo prihranila ogromno časa pri razvoju, poleg tega pa se s tem zaradi neuporabe slikovnega materiala zmanjša tudi število HTTP zahtevkov (HTTP requests) in količina prenešenih podatkov, kar lahko pri grafično bogati strani pomeni kar nekaj kB manj za vsak prikaz strani.

Ozadja (background)

Pri ozadjih je najbolj dobrodošla novost uporaba večih ozadjih hkrati (multiple backgrounds), kar omogoča, da enemu elementu določimo več slikovnih oz. barvnih ozadij, ne da bi za to morali uporabiti več divov. Ozadja pri pisanju CSS kode enostavno ločimo z vejico.

Barve (color)

Poleg heksadecimalnega (hexadecimal) načina, lahko sdaj barve določamo tudi na HSL, HSLA in RGBA način

HSL (Hue, Saturation, Lightness)  je določen s tremi vrednostmi. Najprej določimo odtenek (hue), po principu barvnega kolesa, kjer 0 ali 360 predstavlja rdečo, 120 zeleno in 240 modro. Številke vmes predstavljajo odtenke. Določimo tudi intezivnost (saturation) in sicer v procentih, kjer 100% pomeni polno barvo. Svetlost (lightness) prav tako določimo v procentih in sicer 0% pomeni črno, 100% belo, 50% pa povprečno vrednost.

HSLA je precej podoben HSL načinu, vendar nam omogoča nastavljanje še četrte vrednosti, motnosti (opacity) preko Alpha kanala (Alpha Channel)

RGBA tako kot HSLA pri HSL načinu omogoča nastavljanje RGB barv z dodatno možnostjo nastavljanja motnosti.

Učinki besedila (text effects)

Sence besedila (text shadow) so bile predstavljene že pri CSS2, a je sedaj CSS3 končno omogočil enostavno dodajanje senc brez uporabe Photoshopa ali drugih grafičnih programov. Sence se nastavljajo zelo enostavno, naredite pa lahko tudi večbarvne!

Druga novost na tem področju, ki tudi prihrani kar nekaj dela in omogoča oblikovanje brez programiranja je tekstovna prekoračitev (text overflow). To možnost uporabimo kadar želimo prikazati le nekaj znakov besedila in da se besedilo konča na za uporabnika bolj logičen način na koncu dodamo tropičje ali podoben znak, ki nakauje da gre le za povzetek. Ta problem se je prej reševal na bolj zamuden in potraten programerski način v PHPju, JavaScriptu ali drugem jeziku na katerem je bila stran osnovana.

Prelom besed (word wrap) prelomi dolge besede, da se nadaljujejo v naslednji vrstici. Prej so besede, daljše od širine kvadrata kjer so se nahajale rade uhajale čez rob.

CSS oblikovanje

Če potrebujete pomoč pri oblikovanju spletnih strani se lahko obrnete na našo oblikovalsko ekipo, ki je dobro seznanjena z novostmi. Nekaj zadev iz novega standarda CSS3 pa smo tudi že uporabili na strani Poslusaj.net.

Za vse tiste, ki ste pripravljeni že sedaj stopiti v korak s časom in svoje nove strani oblikovati v skladu z novimi standardi pa v kratkem pripravljamo prav poseben popust. Za več informacij nas lahko kadarkoli kontaktirate.

Vseeno pa obstaja nekaj stvari, za katere je vedno dobro poskrbeti in ki pripomorejo za t.i. onsite SEO. Da najprej razložimo, kaj pomeni onsite SEO. Besedica SEO je ubistvu kratica, ki pomeni optimizacija za spletne iskalnike (Search Engine Optimization v angeščini), onsite pa pomeni, da gre za optimizacijo našega spletnega mesta z vsebinske in tehnične strani. Poznamo tudi ofsite SEO, pri katerem s pomočjo povezav iz drugih strani na našo (backlinks ang.) prav tako pripomoremo k boljši poziciji na iskalnikih kot so Google, Najdi.si, Yahoo in ostali.

Naslovi in podnaslovi

Vašo spletno stran si lahko zamislite tudi kot knjigo ali prodajni katalog. Potrebujete poglavja, naslove, podnaslove, odstavke… Pomembno je, da naslove označujete pravilno. Na spletnih straneh se uporabljajo naslovi v 6 nivojih, ki jih označimo s H1 do H6. Vaš naslov naj bo označen s H1,  ostali podnaslovi pa H2, H3, itd.

Tudi ta članek je razdeljen na naslove in podnaslove. Glavni naslov (optimizacija spletne strani) je označena s H1, podnaslovi pa s H2. Tako bo vsebina bolj berljiva tako za uporabnike, kot tudi za iskalnike, ki ob obisku dodobra razčlenijo vsebino vaše spletne strani.

Meta podatki

Vsaka spletna stran ima svoj naslov, ki se izpisuje v naslovni vrstici vašega brskalnika, uporabljajo pa ga tudi iskalniki kot ime spletne strani pri prikazu iskalnih rezultatov.

V naslovu uporabljajte ključne besede, ki se pojavljajo na vaši strani. Podstran v kateri je opisano vaše podjetje, bi tako poimenovali O podjetju, podstran, kjer vas obiskovalci lahko kontaktirajo pa Kontakt. Naslov se določi z oznako title med meta podatki v glavi vaše strani. Vsaka stran ima samo en naslov!

Prav tako kot naslov spletne strani določite z oznako description tudi opis spletne strani. Opis naj bi obsegal okoli 150 znakov in naj bi na kratko, v enem stavku predstavil vsebino spletne strani.

V meta podatkih lahko določite tudi ključne besede z oznako keywords, ampak le te zaradi zlorab v preteklosti, niso več tako pomembne za spletne iskalnike.

Berljivi spletni naslov

Če bi videli zapisan spletni naslov (URL)  www.spletni-studio.com/spletne-trgovine/ bi takoj vedeli, da boste na tem naslovu izvedeli nekaj o spletnih trgovinah, med tem, ko tega ne veste, če je spletni naslov zapisan kot www.spletni-studio.com/?p=123.

Poleg tega, da berljivi spletni naslovi pomagajo uporabnikom, so zelo koristni tudi za spletne iskalnike, saj jih le ti upoštevajo in tako lahko z njimi pridobite še kakšno ključno besedo več.

Kazalo spletne strani

Z rastjo spletne strani naraste število podstrani in pri velikem številu podstrani iskalniki potrebujejo več časa, da vse strani najdejo, jih pregledajo in uvrstijo med iskalne zadetke. Pri otimizaciji spletnih strani si zato velikokrat pomagamo s kazalom (ang: sitemap), ki je ubistvu zelo podoben kazalu v knjigi. S takim seznamo spletnim iskalnikom povemo kje se naše strani nahajajo in se ob tem še izognemo možnosti, da bi iskalnik kakšno stran spregledal. Ponavadi v kazalu povemo tudi kako pomembna je določena spletna stran in na koliko časa se vsebina na njej obnavlja.

Optimizacija spletne strani in Spletni Studio

Če potrebujete pomoč pri optimizaciji spletne strani ali pa našteti nasveti vaše pozicije na spletnih iskalnikih niso dovolj izboljšali nas kontaktirajte. Skupaj bomo poiskali pravi način optimizacije spletne strani za vas in vašo spletno stran spravili na željeno mesto med rezultati.

Spletna trgovina Magento je z novo različico dobila kar nekaj omembe vrednih novosti. Med najbolj zaželjene zagotovo spadajo integriran WYSIWYG urejevalnik besedila za urejanje opisov izdelkov in statičnih strani, izboljšano serviranje JavaScript in CSS datotek, izboljšan prikaz davkov in končnih cen, dodanih pa je bilo tudi veliko novih možnosti sistemskih nastavitev.

Vsem našim pogodbenim strankam smo že posodobili spletne trgovine Magento na najnovejšo različico. Če potrebujete pomoč pri nadgradnji ali pa si tudi vi želite lastne spletne trgovine, nas kontaktirajte!

Ker bi bil razvoj lastnega sistema za vodenje statistike zelo drag, se večina spletnih strani poslužuje brezplačnih rešitev. Na svojem področju zagotovo dominira Google s storitvijo Analytics, ki je brezplačna in funkcionalno bogata.

Namestitev Google Analytics

Če želite obisk spletne strani meriti z Google Analytics storitvijo, morate na vsako stran od koder želite pridobivati podatke, namestiti kodo, ki vsebuje unikaten ID – le ta predstavlja vašo spletno stran.

V Google Analytics se lahko prijavite s svojim Gmail računom, če ga nimate, pa ga lahko ravno tako brezplačno, ustvarite v 2 minutah.

Hitri pregled

Kaj vam Google Analytics ponuja? Ogromno! Preveč, da bi vam vse funkcije predstavili v tem kratkem prispevku. Lahko pa se obrnete na naše svetovalce in dogovorite za kakšen izobraževalni sestanek.

Nekaj funkcij, ki jih najdete v Analytics:

• št. obiskovalcev po dnevih/tednih/mesecih
• ključne besede s katerimi vas obiskovalci najdejo na spletnih iskalnikih
• seznam strani, od koder so prišli vaši obiskovalci
• tehnične podrobnosti računalnikov, ki jih obiskovalci uporabljajo (brskalnik, OS, resolucija ekrana)
• geografska določitev izvora obiskovalcev
• določitev ciljev, kam želite pripeljati obiskovalce

Če potrebujete pomoč pri vzpostavitvi sistema za merjenje statistike obiskovalcev vaših spletnih strani, nas kontaktirajte.