Ecommerce dok

Julen PRIETO 6-4-2014

Tolosaldea Institutoa

E-Commerce Web Garapena Eta diseinua

Web Garapena & Diseinua

JULEN PRIETO 1

Edukiak

0.- Sarrera ..................................................................................................................................................... 2

1.- WordPress Instalazioa ............................................................................................................................. 3

2.- Temak Instalatu eta web orrialdeari itxura ematen ................................................................................ 6

3.- Gure kontenidoa Orrialdera aplikatuz ..................................................................................................... 8

4.- Ondorioak .............................................................................................................................................. 20

5.- Bibliografia ............................................................................................................................................. 21


JULEN PRIETO 2

0.- Sarrera

Dokumentazio honetan ikasiko dugu nola sortu eta itxura eman web orrialde bati gure

zerbitzarian instalatzen eta Wordpress CMS –aren bidez. Dokumentu honetan eta web orrialde

honen bitartez Internship ( Erasmus Agentzia bat ) Sortuko dugu, hau ez da izango agentzia

arrunt bat, agentzia honetan ondoko atalak izango ditugu:

Internship Atala: Atal honetan Agentziak eskeiniko dituen bekarioentzako planak

finkatuko dira, hau da, hiru plan-etan desberdinduko dira:

o Hilabete Bateko plana: Ingelerako Kurtsoekin, ingelera ikasteko pentsatuak

o Hiruhilabeteko Plana: Moduluentzako penstatua, Lan kolokazioarekin eta

etxebizitzarekin

o Urteko Plana: Erasmus Unibertsitarioentzako pentsatua, lan kolokazioa edo

unibertsitate planarekin eta etxebizitzarekin.

Orrialde honek ez du agentzi bat bezala funtzionatuko bakarrik. Agentzi inmobiliaro bat bezela

ere funtzionatuko du, edozeinek alkilatu dezake agentziak maneiatzen dituen pisuak, beraz gela

bat alkilatzea ere aukera egongo da edota pisu oso bat. Bertan ere jendeak publikatu ahal

izango du beraien etxea alkilatzeko anuntziorik edo beraien pisuetan gela librerik duen

alkilatzeko. Hau dena gurekin harremanetan jarriz.

Hainbat zerbitzu ezberdin ere eskeiniko ditu, adibidez lan poltsa bat egongo da. Bertan gurekin

harremanetan jartzen diren enpresak lankideen bila hari badira bertan ere publikatuko dugu.

Internship egiten duten ikasleei baita ebentu desberdinetara apuntatzeko gai izango dira,

bertan denda birtual bat balitz bezala, bertan deskontuak lortuko dituzte gurekin zerbitzu

hauek kontratazeagatik eta gure agentzikoak baldin badira. Honek gure ikasleei zerbitzu hauen

zentralizazioa eskeiniko zaie, plan guztiak gure bitartez egingo dituztelako, eta noski komisio bat

eramango dut enpresak hau eginda.

Zerbitzu guztietara atzitzeko gurekin harremanetan jarri beharko dute Contact Us atalaren

bidez


JULEN PRIETO 3

1.- WordPress Instalazioa

Wordpress gaur egungo CMS ( Content Management System ) Hau edukiak kudeatzeko

pentsatua dago, generalean web aplikazioak edo webguneak kudeatzeko. Hauetariko ezagun

asko daude, hauetatik Joomla, Drupal edo Kentiko dira ezagunenak. Gaur egun web orrialdeak

egiteko erabilenak dira. Hauek merkatua banatu dute erabiltzaile arrunten artean eta

programatzaileen artean, lana horrela zatikatzen:

Programatzaileak: temak prestatuz web orrialdeen estruktura prestatzen dute, hauek

enpresatatik edo freelance izanda beraien temak saldu edo debalde publikatzen dituzte

geroago pro bertsioak saltzeko edo komunitateak erabiltzeko.

Marketing Enpresak edo Web diseinatzaileak: Hauek tema hauek erabiliz beraien

klientelak eskatuta kontenidoa sartzen dute eta egitura aldatzen dute bezeroak

eskatutakoaren arabera, honela bai programatzen edo ingurune grafikoaren bitartez

erabilitako tema osorik aldatzen dute. Kontenidoa kudeatzearen lana batzuetan zaileena

izaten da, enpresa asko eduki asko sartu behar dutenean beraien orrialdeetan. Adibidez

online dendak edo argazkilari orrialdeak.

Gure orrialde honetan wordpress erabilera aurreratu bat eskaini nahiko nuke, ez bakarrik

edozein blog-ean egin daitekeen lana, baizik eta web-orrialde aurreratu bat, has dezagun.

Lehenik eta behin zerbitzari bat izan behar dugu, hau ez da derrigorrez izan behar gure

ordenagailu fisikorik, hosting enpresa asko wordpress aukera ere eskeintzen dute, beraien

cPanel –etik ere wordpress kudeatzeko aukera izango dugu, Wordpress.com en ere hau egiteko

aukera izango dugu, baino honen galera nagusia da wordpress.com –ean ez daudela hainbeste

plugin edo widget instalatzeko aukera zure zerbitzarian bezala. Aurrerago ikusiko dugu zehazki

zer diren pluginak eta widgetak.

Lan honetarako wordpress bilutsik deskargatu dezakegu eta gure apache web zerbitzariaren

htdocs –etik instalatu, baino badago pakete hauek deskargatzeko hainbat metodo nik Bitnami

aukeratu dut:


JULEN PRIETO 4

Hau deskargatzeko wordpresseko stack –eko orrialdera joko dugu:

https://bitnami.com/stack/wordpress

Bertan installer jeitsiko dugu daukagun edozein sistema eragileentzako, hemen hainbat aukera ezberdin

eskeintzen dizkigu, baita Virtual Machine bat deskargatzeko aukera ere vmware barnean funtzionatzen

duena gure zerbitzaria birtualizatuta edukitzeko.

Hau instalatuko dugu, bere prozesua jarraituz, bertan hainbat aukera eskeiniko dizkigu dena defektuz

datorren bezela utziko dugu, behar espezialik ez baldin badugu honela eraginkorra izango da, baino nahi

baldin badugu beste portu batetik zerbitzatzea instalazioaren atalean portua zehaztuko dugu, nire

kasuan 80ean utziko dut Apache bertatik funtzionatzeko.

Prozesuak behar ditugun

tresnak automatikoki

instalatuko ditu, instalazio

garbi batean:

Gure pasahitza eta erabiltzailea

eskatuko dizkigu, honetaz inportantea

da gogoratzea geroago hau izango bait

da gure wordpress nabigatzaileko

ingurunean sartzeko bidea


JULEN PRIETO 5

Hau eginda instalazioa bukatzeko

itxarongo dugu:

Hau eginda gure makinari ip finko

bat ipiniko diogu, honela gure

helbidea beti berdina izango

denez, gure zerbitzaria atzitzeko

gai izango gara beti helbide

berdinetik, baita dns-an

implementatzen dugunean ere.

Hau eginda gure nabigatzailean ondokoa ipiniko dugu:

Gure iP-a /wordpress

Ondoren ondoko orrialde honetara eramango gaitu hau wordpress-en defektuzko orrialdea da, ez

dagoenez oraindik temarik instalatuta defektuzko orrialdea erakutsiko digu:


JULEN PRIETO 6

Hau editatzen hasteko ( komeni da aurreko orrialdea irekita uztea aldaketan eraginak ikusi ahal izateko )

ondoko helbidera joko dugu:

Gure IP-a/wordpress/wp-admin/

Honela wordpress administrarira sartuko gara eta bertan

gure web orrialdera sartu ahal izango dugu bertan login-

a eskatuko digu (instalazioaren momentuan jarri dugun

berdina):

Bertan sartuta worpress-eko administrariarekin topatuko gara.

2.- Temak Instalatu eta web orrialdeari itxura ematen

Login egin dugunean honelako

pantailarekin topatuko gera:


JULEN PRIETO 7

Bertan tema instalatuko dugu lehenik eta behin hau ez da lan zaila baino aukeratzen jakin beharra dago,

komunitatean irakurri beharra dago zein tema gomendatzen dituzte, tema askok dela denbora asko

soportea galdu bait zuten edo ez dira pluginekin konpatibleak edo geroz eta okerrago ez daude behar

bezala dokumentatuta eta saiatzen aritu behar zera nola funtzionatzen duten asmatuz. Nik ondorengo

tema aukeratu dut bilaketa zehatz bat egin eta gero:

Vantage:

http://wp-themes.com/vantage/?TB_iframe=true&width=600&height=400

Hau SiteOrigin etik dator erreputazio ona duen enpresa bat, Wordpress eko tema orrialdetatik

deskargatu daiteke eta itxura hau dauka defektuz:

Hau instalatzeko ondoko orrialdetik deskargatuko dugu:

https://wordpress.org/themes/vantage

Hau zip eran deskargatuko da, eta hau gure wordpress administrarian instalatu beharko dugu

honetarako:

Apariencia -> Temas -> Añadir Nuevo -> Subir tema


JULEN PRIETO 8

Bertan irekitzen zaigun nabigatzailean gure tema aukeratuko dugu eta instalazioa itxarongo dugu, tema

instalatzen denean gure ipa-a/wordpress irekita utzi dugun orrialdera joko dugu eta errefreskatu egingo

dugu ikusteko tema instalatu dela zurtatzeko, honela aurretik ikusi dugun defektuzko itxura

pantailaratzen. ( Ikusi Defektuzko irudia goran )

3.- Gure kontenidoa Orrialdera aplikatuz

Puntu honetan gure kontenidoa sartzen hasteko gai izango gara, gure beharren

arabera, baino hasi aurretik tema eta berarekin etortzen diren defektuzko pluginak

ondo instalatu direla konprobatuko dugu, honetarako:

Bertan plugin guztiak eguneratuta daudela eta aktibaturik daudela ziurtatuko dugu, ez baldin bada

honela aktibatu egingo ditugu, tema honen kasuan hainbat plugin ez datoz defetuz instalatuta, eta gure

beharren arabera ere bestelako plugin-ak instalatuko ditugu, nire kasuan plugin hauek instalatu ditut

erabili egin izan ditutelako:


JULEN PRIETO 9

Plugin gehienen funtzionamendua deskripzioan dago azalduta, batzuk itxura estetikoan bakarrik

eragiten dute beraz ez ditut azalduko sakonean ez dago asko esateko haietaz eta, hona hemen azalpen

generala hemen dauden plugin inportantenak ezagutzeko.


JULEN PRIETO 10

Page Builder: Tema hau orrialdeak estrukturatzeko era bisualean balio du, honelako hainbat

plugin daude ( adibidez Visual Composer ) eta programatzailean datza hauetariko zein erabili,

hau SiteOrigin-etik dator tema hau egin duen compainitik beratik, beraz tema honetan ondo

funtzionatzeko pentsatua dago, gure orrialdeei itxura eman nahi baldin badiogu ez dugu textu

eran egingo, plugin honetatik baizik, honen inguruan funtzionatzen dute aurreko orrialdean

azaltzen diren plugin asko, kutxetan sartuko ditugulako eta honela orrialdea estrukturatuko

dugu, hau hobeto ikusteko:

Plugin honen inguruan datza tema honen estrukturatze guztia. Argazkian pausoka azaltzen den

bezela sortuko ditugu nahi ditugun orrialde guztiak, hau egin ondoren page builder aukeratuko

dugu, gero add row ( Hiru marrak ) bertan zenbat kolumna nahi ditugun aukeatuko dugu, hauei

neurriak aldatu daizkegu ingurune grafikoa estiratuz. Gero Add widget sakatuko dugu eta kutxa zati

horretan zein widget edo zer motako datuak sartu nahi ditugun aukeratuko dugu. Esan beharra dago

plugin hau erabiltzea asko errazten duela lana.


JULEN PRIETO 11

Bertan instalatuta ditugun plugin-etatik zein sartuko dugun aukeratuko dugun, adibidez web orrialde

honetan Site Origin Price Table erabili dut.

WP-Property: Plugin hau erabilgarrienetakoa da munduan inmobiliaria kontuetan. Plugin hau

ez dator bat gure temakin baino instalatu egin dut plugin -> Añadir Nuevo bitartez, honek gure

administrari atalean botoi berri bat sortuko du, hau erabiltzeko


JULEN PRIETO 12

Add Property sakatuko dugu eta bertan Gure

etxearen propietateak ipiniko ditugu, textua eta

argazkia, bertan etxearen informazio guztia

sartuko dugu, bere prezioa, kokapena ( Google

Maps integratuta dauka plugin honek beraz

etxearen kokapena ikusiko da ) Eta deskripzioa.

Propietate batzuk sortuko ditugu honela eta azkenik Configuraciones era joko dugu zein orrialdeetan

azaldu nahi ditugun zehazteko:

Bertan default Properties Page bilatuko dugu eta gure aurretik sortutako orrialdea aukeratuko dugu:

Hau aukeratu dugularik gure aurretik sortutako propietateak erakutsi beharko ditu:

Bertan bezeroak klik egiten duenean etxearen informazioa emango die bere maparekin eta

kondizioekin.

Woo Commerce: Woo Commerce Online Denda bat erabiltzeko tresna erabilgarriena da, berez,

ez dut bestelakorik ezagutzen eta praktiketan aritu naizen enpresan hau bakarrik erabiltzen


JULEN PRIETO 13

zuten online dendak eratzeko, oso tresna eraginkorra da, Atal honetan azalduko dut nola erabili

tresna hau:

Beste edozein plugin bezela instalatuko dugu, hau WP-Property bere

atala sortuko du administrariaren panelean eta bertan berarekin egin

ditzazkegun atazak aztertuko ditugu, bi atal hauetan konfigurazioak

eta saldu nahi ditugun produktuak egingo ditugu, hasteko gure

dendaren konfigurazio bereizgarrienarekin hasiko gara, honetarako

WOO COMMERCE -> Ajustes Sakatuko dugu, bertan ondorengo

pantailarekin topatuko dugu, hau ere eskatutako informazioaren

formularioa da, hemen inportantena da zure kontua ( Bankua eta

Paypal ipintzea ) Ordainketak zehazteko Finalizar Comprara joko dugu.

Productos aukeratuko dugu gure produktuak zein orrialdeetan erakutsiko diren zehazteko, hau

shortcodes bidez ere egin dezake, ikusi:

http://docs.woothemes.com/document/woocommerce-shortcodes/

Shortcodes gure orrialdea textu hutsean editatzen ari garenean funtzionatzen dute honelako

itxura dute:

[woocommerce_cart]

hauek plugin bateko funtzio batera deitzen dute eta bertan dagoen kontenidora. Guk kasu

honetan ez ditugu erabiliko PageBuilder plugin-aren bidez inplementatu ditutelako behar nuen

tokietara honela orrialdea nire nahietara estrukturatuz.

PageBuilder-en Bidez edozein widget bezala gehituko ditugu gure orrialdera:


JULEN PRIETO 14

Eta honen eragina orrialdean

Plugin hau dexente automatizatuta dago jartzen duzun orrialdean eragina izateko, nik kasu

honetan ez ditut produktuak bezela hartzen sortu dituten item-ak Ebentuak izeneko orrialde bat

sortu dut eta bertan saltzen ari naizena ekitaldintzako ticket-ak dira, bertan klik eginez gero

erosteko orrialdera eramaten zaitu, eta erosten duzunean ondoan azaltzen da erosi duzunaren

check out kontua, azpian ebentuaren informazioarekin:


JULEN PRIETO 15

Finalizar Compra Sakatzen dugunean gure datuak ipintzeko orrialdera eramango gaitu:

Azkenik bezeroak zein metodo erabili nahi dituen ordaintzeko azalduko du, kasu hipotetiko

honetan Bankuko Transferentzia, Cheque Bidezko ordainketa edo Paypal aukeratu daiteke, Konfigurazio

hauek aurreko argazkian azaltzen den WOO COMMERCE -> Ajustes -> Cuentas atalean zehaztuko dugu,

nik ez dut ezer ipini bertan alperrik zelako, Hau demostrazio bat besterik ez da eta.


JULEN PRIETO 16

Contact Form Integrated With Google Maps: Hau kontaktu formulario bat egiteko

erabili dut, bezeroekin harreman zuzenena izango delako, orrialde guztietako

footer-ean implementatu dudan skript bat da, hau beste pluginak bezela

instalatzen da. Zure formularioa sortzeko ingurune grafiko bat ekartzen du,

honetarako ondoan azaltzen den botoia sakatuko dugu:

Bertan zein atal nahi dugun gure formularioan aukeratuko ditugu, hau eginda azkenean kontu bat

irekitzeko eskatuko digu, formget-ean.


JULEN PRIETO 17

Gure formularioa bukatzen dugunean embeed code sakatuko dugu, bertatik skripta kopiatzeko:

Azkenik zein eratan nahi dugun gure orrialdean azaltzea erabaki beharko dugu, nik footer atalean ipini

dut, honetarako widget bat sortu dut textu hutsekoa, honetarako Apariencia -> Widgets:

Betan texto aukeratuko dugu

eta footer.era eramango dugu

drag and drop erabiliz (

arrastratuz ) hau honela

triangelua zapalduta irekiko

dugu eta aurretik lortu dugun

skripta kopiatuko dugu

bertara.


JULEN PRIETO 18

Honek bezeroak edozein orrialdean dagoela contact us sakatu dezake Administrariekin harremanetan

jartzeko.

Honetan Klik Egitean hau desplegatuko da edozein orrialdetan zaudela:

Meta-Slider: Hau edozein slider plugin bezela argazki slider bat sortzen du, hau orrialde

nagusiako honelaka programa tonelada bat dago, oso erraza da haien erabilera baino slide-ak

sortzea ez da lan erraza Photoshop Motako Programak erabili behar direlako, hauek Tipografia

simpleak ( Helvetica, Adibidez ) eta formak erabiliz sortu ditut orrialde honetarako. Hona hemen

sortu dituten Sliderrak orrialde nagusirako:


JULEN PRIETO 19

Hau tipografía ustutzen egin dut, magic wand erabiliz hutsik utzi ditut letrak eta sortu dudan logoa eta

azpiko kapa batean izarren argazkia jarri dut hau letran fondoa ikusteko.

Honetan geziak internetetik hartu ditut lehioa zulo bat besterik ez da barneko sombra batekin Blending

Options erabilita Aurretik sortu deten logoa ( Tipografia bat internetetik hartuta ) eta gezi berdinak

inbertituta, erabiliten tipografía Helvetica da, oso simplea eta ulergarria delako, diseinu munduaren

standarra.


JULEN PRIETO 20

Honetan ere berdina Helvetica eta Logoa.

4.- Ondorioak

Wordpress-en erabilera oso intutitboa da, hala eta guztiz ere ikasi dudana izan da jakin behar

dela tema bakoitza erabiltzen, milaka daude eta hauetarik batzuk ez dute komunitate aktibo bat atzean

edo ez dute dokumentaziorik. Dokumentazioa oso garrantzitsua da zentzu honetan, bera izango bait da

gauzak garbi uzten dituen bakarra. Nahiz eta CMS batekin ibili lanean oso garrantzitsua da Photoshop

edo GIMP motako softwareen bat erabiltzea zure diseinu propioak orrialdetara sartzeko, hauek ere

orrialdeak programatu aurretik programatzaile askok hauek maketatzeko erabiltzen dituzte. Hau da

orrialdearen ikuspegia sortzeko eta gero hau erabilita orrialdea programatu.

Woo Commerce erabiltzen dugunean gure orrialdea aktiboa bihurtzen du, bezeroak zeoze erosten

duenean wordpresseko administrariaren bidez ikusiko dugu, beraz orrrialdea dinamizatzen du etengabe

aritu beharko gara gure stock-a aldatzen eta gure bezeroei harreta ematen eta serbitzatzen. Hau

WooCommerceko panelaren bitartez egingo dugu.

Orrialde askoek ez dute berezko wordpresseko paneletik funtzionatzen Widgetetatik baizik, hau adibide

garbia da, ez dut ezer ere editatu wordpres-eko testu editore edo editore bisualaren bitartez, dena

widget-en bidez egin dut, eta emaitza askoz garbiagoa eta eraginkorragoa izan da.


JULEN PRIETO 21

5.- Bibliografia

Vantage Dokumentazioa

http://siteorigin.com/vantage-documentation/

Woo Commerce Dokumentazioa

http://support.woothemes.com/hc/en-us

Photoshop Bideotutorialak Youtuben

http://support.woothemes.com/hc/en-us

Ecommerce dok

Internet

Transcript of Ecommerce dok