1. Julen PRIETO
6-4-2014
Tolosaldea Institutoa
E-Commerce
Web Garapena Eta diseinua

2. 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

3. Web Garapena & Diseinua
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

4. Web Garapena & Diseinua
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:

5. Web Garapena & Diseinua
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

6. Web Garapena & Diseinua
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:

7. Web Garapena & Diseinua
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:

8. Web Garapena & Diseinua
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

9. Web Garapena & Diseinua
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:

10. Web Garapena & Diseinua
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.

11. Web Garapena & Diseinua
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.

12. Web Garapena & Diseinua
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

13. Web Garapena & Diseinua
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

14. Web Garapena & Diseinua
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:

15. Web Garapena & Diseinua
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:

16. Web Garapena & Diseinua
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.

17. Web Garapena & Diseinua
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.

18. Web Garapena & Diseinua
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.

19. Web Garapena & Diseinua
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:

20. Web Garapena & Diseinua
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.

21. Web Garapena & Diseinua
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.

22. Web Garapena & Diseinua
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