venda de kiwis online · cara al comprador final. en el caso de la fruta, el cliente acaba...

VENDA DE KIWIS ONLINE

WWW.PROSMOKIWI.COM

Memòria del projecte

d‟Enginyeria Informàtica

realitzat per

Ricard Pros Morell

i dirigit per

Montserrat Serra Vizern

Bellaterra, 11 de juny de 2008

www.PROSMOKIWI.com 1

Ricard Pros Morell Projecte Fi de Carrera

La sota signant, Montserrat Serra Vizern,

professora de l'Escola Tècnica Superior d'Enginyeria de la UAB,

CERTIFICA:

Que el treball al que correspon la present memòria ha estat

realitzat sota la seva direcció per en Ricard Pros Morell.

I per a que consti firma la present.

Signat: Montserrat Serra Vizern

Bellaterra, 11 de juny de 2008



Resum del projecte

Avui en dia la venda de productes, mitjançant les possibilitats que ens ofereix Internet,

es troba en ple auge. Aquest projecte, pretén posar en funcionament una pàgina Web

dedicada a la venda de fruita, concretament kiwis.

Des de fa un temps, la població comença a ser conscient del desequilibri entre el agent

productor i el agent comercial. Com passa també en altres sectors, el productor ven a

un preu molt inferior, respecte al que després es ficarà de cara al comprador final. En el

cas de la fruita, el client acaba comprant un producte més car i normalment de menys

qualitat.

L‟objectiu principal d‟aquest projecte, és promoure la venda online a partir d‟una

mercaderia de qualitat i més econòmica, aconseguint un major benefici tant per part del

productor com del client.

_

La venta de productos, utilizando las posibilidades que Internet nos ofrece, es, hoy en

día, un campo en pleno auge. Este proyecto, pretende poner en funcionamiento una

página Web dedicada a la venta de fruta, concretamente kiwis.

Desde hace un tiempo, la población empieza a ser consciente del desequilibrio

existente entre los productores i los comerciantes. Como pasa también en otros

sectores, los productores venden a un precio muy inferior, respecto al que se pondrá de

cara al comprador final. En el caso de la fruta, el cliente acaba comprando un producto

más caro i normalmente de menor calidad.

El objetivo principal de este proyecto, es promover la venta online a partir de una

mercancía de calidad i más económica, logrando un mayor beneficio por parte del

productor i también por parte del cliente.

_

The sale of products using the benefits of Internet is today at its very peak. This project

aims to put into operation a Web page to sell fruits, specifically kiwis.

Nowadays, the population starts to be aware of the imbalance between producers and

merchants. As in other sectors, producers are selling with a price much lower than the



final price for the last buyer. In the case of the fruits, at the end, the coustomer buys a

more expensive product with a lower quality.

The main objective of this project is to promove the e-commerce with a high quality and

cheaper products, getting a higher benefit for the producer and for the coustomer.



Taula de continguts

CAPÍTOL 1 – INTRODUCCIÓ ......................................................................................... 6

Introducció ................................................................................................................ 6 Objectius ................................................................................................................... 7 Estructura de la memòria ............................................................................................. 8

CAPÍTOL 2 – ESTAT DE L’ART ................................................................................... 11

Introducció .............................................................................................................. 11 Usabilitat ................................................................................................................. 12 Accessibilitat ........................................................................................................... 20 Diferència entre Usabilitat i Accessibilitat ............................................................... 23 Disseny Universal ................................................................................................... 24 Normativa i legislació .............................................................................................. 27

CAPÍTOL 3 – ANÀLISI .................................................................................................. 32

Anàlisi de requeriments .......................................................................................... 32 Requeriments funcionals ........................................................................................ 33 Requeriments no funcionals.................................................................................... 34 Especificació del sistema ........................................................................................ 36

CAPÍTOL 4 – DISSENY ................................................................................................. 40

Introducció .............................................................................................................. 40 Interfície amb l’usuari .............................................................................................. 43 Prototipat................................................................................................................. 44 Pàgina d’inici ........................................................................................................... 48 Navegació ............................................................................................................... 50 Arquitectura de la informació .................................................................................. 52

CAPÍTOL 5 – IMPLEMENTACIÓ .................................................................................. 54

Models de desenvolupament de software ............................................................... 54 Model de desenvolupament escollit ........................................................................ 58 Eines de desenvolupament ..................................................................................... 59 Decisions d’implementació ...................................................................................... 66 Desenvolupament de l’aplicació .............................................................................. 68 Dificultats ................................................................................................................ 83

CAPÍTOL 6 – SEGURETAT .......................................................................................... 84

Introducció .............................................................................................................. 84 Compra segura ....................................................................................................... 86 Advertència legal .................................................................................................... 87

CAPÍTOL 7 – AVALUACIÓ ........................................................................................... 89

Mètodes d’avaluació de l’usabilitat .......................................................................... 89 Mètodes d’avaluació de l’accessibilitat ................................................................... 91



CAPÍTOL 8 – PLANIFICACIÓ I GESTIÓ DEL RISC ..................................................... 93

Identificació i gestió del risc .................................................................................... 93 Planificació .............................................................................................................. 94

CAPÍTOL 9 – PROVES I VALIDACIÓ DEL SISTEMA .................................................. 96

Introducció .............................................................................................................. 96 Proves d’unitat ........................................................................................................ 96 Proves d’integració ................................................................................................. 97 Proves de validació ................................................................................................. 97 Proves de sistema .................................................................................................. 97

CAPÍTOL 10 – CONCLUSIONS I AMPLIACIONS ........................................................ 99

Conclusions ............................................................................................................ 99 Ampliacions ............................................................................................................. 99

BIBLIOGRAFIA ........................................................................................................... 100

AGRAÏMENTS ............................................................................................................. 102

ANNEX – MANUAL D’USUARI ................................................................................... 103

Benvinguts a l’ajuda de l’aplicació ........................................................................ 104



Capítol 1 – Introducció

Introducció

Des de ja fa molts anys i passant per varies generacions, la producció de fruita forma

part del negoci familiar.

A pocs kilòmetres de Lleida, en un poble anomenat Torrefarrera, és on es troba la finca

de l‟empresa Prosmokiwi, entitat recentment creada per a la venda exclusiva de kiwis.

Actualment, gràcies als avenços científics, els pagesos compten amb un ampli ventall

de productes que els permeten lluitar contra les plagues i malalties que sofreixen els

arbres fruiters. No obstant, la majoria d‟aquests adobs es creen a partir de substàncies

químiques que afecten tant al medi ambient com al propi fruit i que a més acostumen a

tenir un preu poc assequible.

Els costos dels adobs són un més a més que fan que la producció de fruita sigui cada

cop menys rentable, l‟altre factor, i el més important, és el preu al que es ven. Aquest

preu ve normalment condicionat pel nombre de tones que es produeixen, ja que el

pagès no pot vendre tota la producció a consumidors finals o bé a fruiteries i no pot fer

altra cosa que vendre la mercaderia a un intermediari per a que la comercialitzi, existint,

entre els uns i els altres, una diferència de preu més que notable.

Degut a tot això, es decideix cultivar el kiwi. L‟arbre fruiter de l‟actinídia no necessita ser

sulfatat i a més es controla la producció limitant-la al nombre de consumidors finals i

fruiteries que es poden abastir.

En aquest punt és on entra en escena la necessitat d‟un espai Web, on l‟usuari pugui

comprar el nostre producte. D‟aquesta manera, l‟empresa s‟obre a un ampli mercat, en

el qual no hi ha intermediaris i en el que a més, l‟usuari o client, pot comprar un fruit de

millor qualitat i a millor preu.

Amb la creació d‟aquest projecte, i un cop entri en funcionament la pàgina Web

www.prosmokiwi.com, es pretén incrementar la producció del kiwi paral·lelament a la

demanda d‟aquest.



A llarg termini, es preveu la traducció integra de la plana Web a altres idiomes com el

portuguès, el castellà i el francès, amb la intenció de continuar creixent i ampliant el

nombre d‟usuaris.

Objectius

Aquest projecte vol assolir una sèrie d‟objectius tant a nivell social com a nivell de

software.

Es pretén vendre el fruit directament al consumidor per tal de subministrar un producte

més fresc, sense que passi per intermediaris, fent front, d‟aquesta manera, al increment

de preus.

La pàgina Web a realitzar ha d‟atreure a qualsevol tipus d‟usuari que la visiti, sense

importar els seus diferents interessos. La quantitat d‟espai visible per la pantalla de

l‟ordinador, un cop situats a la pàgina principal del Web, és la zona preferida i per tant,

ha de ser la millor (terme heretat dels diaris, la pàgina principal és la que veiem a simple

vista).

Així doncs, els objectius a assolir per la pàgina Web són els següents:

A nivell social:

L‟usuari ha de poder comprar kiwis des de casa seva, simplement amb un

ordinador connectat a Internet, i podrà fer-ho des de qualsevol punt de la

península.

El preu del producte ha de ser menor del que trobem en qualsevol establiment

que faci d‟intermediari entre el productor i el consumidor final.

La pàgina s‟haurà de traduir, a llarg termini, al portuguès, al castellà i al francès.

A nivell de software:

L‟aplicació ha de ser intuïtiva, usable i segura.

La pàgina Web ha de garantir la seguretat de l‟usuari, ja sigui a partir de termes

legals com proporcionant un entorn acollidor.



Des de l‟aplicació s‟ha de poder confeccionar un cistell i finalitzar la compra, ja

sigui mitjançant contrareemborsament, transferència bancària o pagament amb

targeta de crèdit.

L‟usuari podrà escollir el nombre de kilograms, caixes i el calibre del fruit alhora

de confeccionar la seva compra i veurà en tot moment l‟import d‟aquesta.

La compra romandrà en el cistell mentre duri la sessió del usuari.

No s‟ha de poder realitzar una compra si l‟usuari no es registra prèviament. Per

tant, s‟ha d‟utilitzar un sistema gestor de base de dades.

Estructura de la memòria

Aquesta memòria esta estructurada amb onze capítols i un annex. Per tal de tenir una

idea més clara dels continguts del document, tot seguit es narren els punts principals

que es tracten:

- Introducció:

Introducció del projecte i enumeració dels objectius que ha d‟assolir.

- Estat de l‟art:

Es parla dels elements que intervenen en la Interacció Persona – Ordinador:

Usabilitat, accessibilitat i disseny universal.

En aquest punt també es tracten els aspectes legals així com la normativa

vigent.

- Anàlisi:

Definició dels diferents tipus de requeriments, funcionals i no funcionals,

explicació de cadascun d‟ells i especificacions del sistema.

Definició dels diferents models de desenvolupament i model escollit per a la

realització del projecte.



- Disseny:

Descripció detallada de totes les parts que intervenen en el disseny així com

la interfície, la navegació, i l‟estructura del lloc.

Explicació de tot el procés que s‟ha seguit fins arribar al disseny actual a

partir d‟una breu exposició de les diferents maneres d‟enfocar la realització

de la pàgina Web. Mostra dels diferents prototips i evolució fins al disseny

actual.

- Implementació:

Es parla dels models de software existents i l‟escolli‟t per al desenvolupament

de l‟aplicació. Es repassen totes les eines que intervenen en el projecte tot

especificant el software que s‟ha utilitzat. També es detallen les dificultats

més rellevants alhora d‟implementar-lo.

- Seguretat:

Exposició dels diferents punts de vista referents a la seguretat de la Web.

Redacció de l‟advertència legal del lloc.

- Avaluació:

Avaluació de l‟usabilitat i accessibilitat del lloc Web.

- Planificació i gestió del risc:

Enumeració dels possibles riscos que pot patir el projecte i planificació

d‟aquest.

- Proves i validació del sistema:

Diferents proves realitzades al sistema amb l‟objectiu de trobar qualsevol

tipus d‟error. Proves d‟unitat, integració, validació i de sistema.

- Conclusions i ampliacions:

Reflexions apropiades segons els resultats obtinguts. Possibles extensions

del treball per a que, a llarg termini es pugui veure reflectit en un resultat

tangible.



- Bibliografia:

Cadascuna de les fonts que s‟han utilitzat per poder realitzar aquest projecte.

- Agraïments:

Un petit comentari sobre aquelles persones més properes que ja sigui amb

ajuda tècnica o moral han ajudat a fer realitat aquesta tasca.

- Annex:

Manual d‟usuari.



Capítol 2 – Estat de l’art

Introducció

A partir d‟unes mateixes eines i en una situació idèntica, un mateix equip de

desenvolupament, es capaç d‟implementar tota una varietat de sistemes, les interfícies

dels quals, poden assemblar-se i tenir característiques comunes.

Tot i això, sembla evident que si no es realitza un gran esforç en conèixer les

particularitats dels usuaris i en reflectir-les a la interacció que presenta la interfície,

aquests, de cap manera podran percebre la familiaritat necessària que els proporcioni

seguretat i relaxació durant la manipulació del sistema.

D‟aquesta manera, alhora de realitzar el desenvolupament, tangible per part del usuari,

s‟ha de pretendre trobar una interfície fàcil d‟utilitzar i d‟aprendre, aspecte que no pot

determinar-se únicament, com sol succeir, pels dissenyadors o programadors del

sistema interactiu, sinó que també haurà de determinar-se a partir d‟una col·laboració

per part dels usuaris. Aconseguir aquest objectiu, tan sols és possible si impliquem als

propis usuaris en el procés de desenvolupament des del principi. I no hem de confondre

el fet d‟implicar a l‟usuari en el disseny del sistema amb el fet de realitzar un disseny

pensant en l‟usuari, el darrer cas, fa referència a que els usuaris no intervenen fins al

moment de la implantació definitiva del sistema.

En definitiva, es pot dir que serveix de ben poc un desenvolupament sense tenir en

compte una de les parts més important, com és l‟usuari. Per tant, centrar-nos en

l‟usuari, significa que no podem oblidar-nos d‟ell i relegar-lo quan ens trobem a la fase

final d‟un projecte, després de la instal·lació de l‟aplicació, quan ja no pot fer-se res en el

seu benefici.

El disseny interactiu, implica realitzar un disseny en el qual l‟usuari passa a ser el focus

d‟atenció i la implementació de les funcionalitats del sistema s‟implementen d‟acord a

les característiques dels mateixos.



També és important, tenir en compte que no ens hem de centrar en un tipus d‟usuari en

concret sinó en tots els usuaris, tenint en compte tots els trets diferencials entre ells,

pensant, fins i tot, en aquells que pateixen una discapacitat.

Usabilitat

La usabilitat és un dels principis en el que es basa la Interacció Persona – Ordinador

(IPO).

La interacció Persona – Ordinador, és la disciplina que estudia els intercanvis

d’informació entre les persones i els ordinadors perquè totes les persones puguin

realitzar les seves tasques d’una manera eficient i satisfactòria i amb un mínim d’esforç

d’aprenentatge.

La investigació en IPO/HCI (Human Computer – Interaction) porta a l‟estandardització

de la usabilitat, la seva millora i recolzament empíric. L‟enfocament científic de l‟IPO/HCI

inclou una varietat de eines i tècniques que ajuden a desenvolupar millors interfícies

d‟usuari.

El disseny de la pàgina www.prosmokiwi.com està realitzat a partir dels criteris de la

usabilitat Web.

Ja sigui un portal Web, una pàgina personal o bé, com és el nostre cas, una pàgina

dedicada a la venda online, no hem d‟oblidar que l‟usuari que entra en un espai Web és

bàsicament perquè està buscant quelcom concret, per tant, és funció i responsabilitat

del dissenyador fer-la senzilla i intuïtiva,es a dir, usable.

Avui en dia, la Web s‟està convertint en un element clau, tant per al desenvolupament

de les empreses com per al d‟institucions i s‟ofereix una ampli ventall de serveis a

través d‟aquesta. La usabilitat aporta un enfocament imprescindible per a que qualsevol

tipus de pàgina tingui el suficient atractiu per tal de que el visitant no només es quedi i la

visiti sinó que també la tingui present en un futur, i torni.

Per tot això, les interfícies han de ser el més fàcils d‟utilitzar i d‟aprendre possible, sense

perdre l‟horitzó sobre la universalitat de les mateixes, és a dir, que aplicant els principis

coneguts, com el disseny universal, que es tractarà més detalladament en els propers



punts, procurarem a més, implementar unes interfícies per a totes les persones, sense

barreres (tecnològiques) de cap tipus, que interfereixin la seva utilització.

La Societat de la Informació i el Coneixement (SIC) constitueix un factor determinant

que marca el desenvolupament i l‟evolució de la societat actual. Contràriament, la

mateixa SIC, la majoria de vegades, no avança en funció de les necessitats de

l‟esmentada societat a la què dóna servei.

No tots tenim les mateixes capacitats ni aptituds. Per a persones amb algun tipus de

limitació funcional, manipular productes o utilitzar els serveis que la vida diària imposa

suposa un repte moltes vegades impossible de superar. Conceptes com ajuts tècnics,

accessibilitat integral o disseny per a tots són cada vegada més utilitzats per assegurar

la independència i la participació social de les persones amb mobilitat o força reduïda,

deficiències en la visió o en l‟audició, dificultats per parlar o d‟altres limitacions

funcionals.

Internet, com a exemple determinant actualment, ofereix accés a tot tipus de recursos,

serveis, cultura, educació, etc. El seu desenvolupament, però, s‟està manifestant que

una vegada més, estem ensopegant de nou amb la mateixa pedra, traslladant al món

virtual problemes ja detectats en el món real. Com a responsables del desenvolupament

dels sistemes que s‟inclouen a Internet, tenim l‟obligació d‟evitar que es repeteixin els

errors que suposen les barreres arquitectòniques habituals, existents en els carrers dels

nostres pobles i ciutats, errors que hem d‟evitar tant alhora de crear una pàgina Web

com en qualsevol altre sistema interactiu. Cal crear, per tant, un sistema usable.

El concepte d‟usabilitat

El concepte d‟usabilitat, popularitzat per J.NIELSEN [1], d‟un sistema software, té dos

components principals, un fa referència a l‟aspecte funcional del sistema “accions o

operacions que els sistema realitza” i l‟altre fa referència a com els usuaris poden

utilitzar l‟esmentada funcionalitat, sent aquesta darrera la que més ens interessarà en

aquest punt.

Els factors principals que s‟han de considerar alhora de parlar d‟usabilitat són, la facilitat

d‟aprenentatge, l‟efectivitat d‟ús i la satisfacció amb què les persones són capaces de



realitzar les seves tasques gràcies a l‟ús del producte amb el que està treballant, factors

que descansen en les bases del disseny centrat en l‟usuari.

El grau d‟usabilitat d‟un sistema interactiu és un aspecte relacionat amb la interfície

d‟usuari i que és inversament proporcional al temps que l‟usuari malgasta intentant

esbrinar l‟abast del sistema o bé buscant una determinada funcionalitat. L‟usabilitat fa

referència, per tant, a la rapidesa i facilitat amb què les persones porten a terme les

seves tasques a través de l‟ús del producte amb el que estant treballant.

Aquesta idea es veu reflectida en els següents punts:

a) Una aproximació a l’usuari: Usabilitat significa centrar-se en els usuaris. Per

desenvolupar un producte usable s‟ha de conèixer, entendre i treballar amb les

persones que representen els usuaris actuals o potencials del producte.

b) Un ampli coneixement del context d’ús: Les persones utilitzen els productes

per incrementar la seva pròpia productivitat. Així doncs, un producte es considera

fàcil d‟aprendre i d‟utilitzar en termes del temps que pren l‟usuari per dur a terme

el seu objectiu, el nombre de passos que ha de realitzar per això i l‟èxit que té en

predir l‟acció apropiada per dur a terme. Per desenvolupar productes usables cal

entendre els objectius de l‟usuari, cal conèixer els treballs i tasques de l‟usuari

que el producte ha de automatitzar o bé modificar.

c) El producte ha de satisfer les necessitats de l’usuari i adaptar-se als seus

models mentals: Els usuaris són de gran diversitat i ocupats intentant realitzar

una tasca. Es relacionarà usabilitat amb productivitat i qualitat. El maquinari i el

programari són les eines que ajuden a les persones ocupades a realitzar el seu

treball i a gaudir del seu lleure.

d) Són els usuaris i no els dissenyadors o els desenvolupadors, els que

determinen quan un producte és fàcil d’usar.

Col·loquialment, sol definir-se l‟usabilitat com la propietat que té un determinat sistema

perquè sigui “fàcil d‟usar o d‟utilitzar i aprendre”, tractant-se d‟una propietat que no és

només aplicable als sistemes software, sinó que, com demostra D.NORMAN [2], és

aplicable als elements de la vida quotidiana.



L‟organisme d‟estandardització ISO (International Organization for Standarization)

proposa dues definicions del terme usabilitat, definides a partir del que es considera en

el moment d‟especificar o avaluar l‟esmentada usabilitat:

ISO 9241-11 (Guidance on Usability – 1998) [3]

Aquest estàndard (part de la sèrie ISO 9241) proporciona la definició de la

usabilitat que s‟utilitza en estàndards ergonòmics:

La mesura en la qual un producte es pot usar per determinats usuaris per

aconseguir objectius específics amb efectivitat, eficiència i satisfacció en un

context d’ús especificat.

Aquesta norma explica com identificar la informació que es necessita considerar

en el moment d‟avaluar l‟usabilitat en termes de mesures de funcionament i de

satisfacció de l‟usuari. La direcció es dóna en com descriure el context d‟ús del

producte i de les mesures d‟usabilitat d‟una manera explícita. Inclou una

explicació de com la usabilitat d‟un producte es pot especificar i avaluar com a

part d‟un sistema de qualitat. També explica com les mesures de funcionament i

de satisfacció de l‟usuari es poden utilitzar per mesurar com un component

qualsevol d‟un sistema, afecta a la qualitat del mateix dins del context del seu ús.

ISO/IEC 9126 (Software engineering – Product quality. Product evaluation –

Quality characteristics and guidelines for their use, 2001) [4]

En la comunitat de l‟enginyeria del software, el concepte d‟usabilitat, s‟ha

associat més comunament al disseny de la interfície d‟usuari. L‟ISO/IEC 9126

(desenvolupat com un estàndard de l‟enginyeria del software) defineix la

usabilitat com una contribució relativament independent a la qualitat del software

associat amb el disseny i l‟avaluació de la interfície de l‟usuari i la seva interacció.

L‟esmentada definició és la que segueix:

Un conjunt d’atributs que influeixen en l’esforç necessari per a l’ús, i en

l’assessorament individual de cada ús per a un conjunt d’usuaris definit o

implicats. (1991)

La capacitat que té un producte software per ser atractiu, entès, après, usat per

l’usuari quan és utilitzat sota unes condicions específiques. (2001)



Podem observar que aquesta definició respon més a criteris en termes

qualitatius. La definició de l‟any 2001 acaba especificant “sota unes condicions

específiques” per deixar clar que un producte no disposa d‟usabilitat intrínseca,

sinó que té la capacitat de ser usat en un context particular.

Importància de la usabilitat

El gran avenç en la tecnologia dels ordinadors ha incrementat la potència d‟aquests,

alhora que ha ampliat la banda de comunicació entre les persones i els ordinadors. Tot i

així, els principis aplicables al procés d‟interacció són independents de la tecnologia, ja

que depenen molt més d‟un millor coneixement dels elements humans i no tant de

l‟esmentada tecnologia.

Una vegada conegut què és i a què fa referència la usabilitat, hem de reflexionar sobre

com s‟està enfocant la implantació de les noves tecnologies i plantejar-se preguntes

com per què ens hem de preocupar per la usabilitat? o per què les coses són tan difícils

d’utilitzar? Per comprendre el que D.NORMAN assegura, quan diu, que el verdader

problema no rau en l‟èmfasi de la pròpia tecnologia, sinó en la persona per a la qual

esta fet el sistema o dispositiu [5] mentre el desplegament actual, normalment, oblida a

l‟usuari final.

NIELSEN, per altra banda, afirma que la importància de la usabilitat en el

desenvolupament de software i diu que es tracta d‟un factor crític per a que el sistema

assoleixi el seu objectiu. Els usuaris han de tenir la sensació real de que el sistema els

ajudarà a realitzar les seves tasques. I aquest ha de fer-ho, d‟un altra forma, seran

reacis a la seva utilització.

Beneficis de la usabilitat

El benefici immediat de la usabilitat és que les interfícies són més fàcils d‟utilitzar, el

qual de per si ja suposa un benefici humanitari i ètic ja que aquesta finalitat d‟ús fa que

les persones es sentin menys frustrades i menys intimidades per la tecnologia [6].



A part d‟això, són molts els estudis, de diversos autors, que evidencien els beneficis

aportats per la usabilitat. Alguns d‟aquests estudis afirmen, fins i tot, que la usabilitat

millora la productivitat dels usuaris, incrementa la seva moral i redueix els costos

derivats de la formació i la documentació [7][8].

MAYHEW I MANTEI [9] foren els primers a descriure els beneficis d‟aplicar la usabilitat

al disseny software des d‟un punt de vista intern i de les vendes realitzades. Aquests

van centrar-se en tres àrees diferents: Desenvolupament, ús intern i vendes.

a) Desenvolupament:

Reducció dels costos de producció: Encara que sembli contradictori, els

costos i temps de desenvolupament totals es poden reduir evitant el sobre-

disseny i reduint el nombre de canvis posteriors del producte. S‟optimitzen,

d‟aquesta manera, els costos de disseny i re disseny de les aplicacions.

Reducció dels costos de manteniment i suport: Els sistemes que són fàcils

d‟usar requereixen menys entrenament, menys suport per a l‟usuari i menys

manteniment.

Reducció dels costos corporatius: Aquest factor ja s‟aconsegueix com a

conseqüència dels dos punts anteriors, al qual hem d‟afegir que el valor que

l‟equip d‟usabilitat, d‟una companyia que desenvolupa software, aporta al conjunt

global, proporciona millores metodològiques en el sistema global de

desenvolupament, reduint, per tant, els costos generals [10].

b) Ús intern:

Reducció dels costos d’ús: Els sistemes que millor s‟ajusten a les necessitats

de l‟usuari, milloren la productivitat i la qualitat de les accions i les decisions. Els

sistemes més fàcils d‟utilitzar, redueixen l‟esforç i permeten als usuaris utilitzar

una varietat més àmplia de tasques. Per altra banda, els sistemes difícils d‟usar,

disminueixen la salut, el benestar i la motivació, i poden incrementar

l‟absentisme.

Reducció dels costos d’aprenentatge: Un sistema amb elevades dosis

d‟usabilitat, s‟organitza de manera que s‟adapti millor al model mental dels seus

usuaris amb el que es minimitza el temps necessari per al seu aprenentatge.



Millora la qualitat de vida dels usuaris, ja que redueix el seu estrès,

incrementant la satisfacció i la productivitat.

c) Vendes:

Increment de les vendes: Un producte més usable permet un millor màrqueting

a causa d‟una millor imatge, ja que aquest, és més comprensible, i per tant, més

fàcilment vendible.

Millora en la qualitat del producte: El disseny centrat en l‟usuari dóna lloc a

aplicacions de major qualitat d‟ús, més competitius en un mercat que demanda

productes de fàcil ús. En l‟entorn Web, es millora la imatge i el prestigi del lloc, la

qual cosa afavoreix a l‟augment de la taxa de conversió de visitants a clients.

Menor suport al client: Els sistemes usables són més fàcils d‟aprendre i

d‟utilitzar-los, comportant un menor cost d‟implementació i d‟enteniment.

La usabilitat aplicada a la Web

La Web és un entorn en el qual el poder és a les mans dels usuaris. L‟usuari, que és qui

fa clic al ratolí, és qui pren totes les decisions. Com a resultat de les enormes

possibilitats que ofereix la world wide Web i de la facilitat per anar d‟uns llocs a altres,

és molt fàcil anar a qualsevol altra part que no sigui la pàgina que hem creat [11]. La

competència de tot el món estarà disposada a rebre aquell usuari a qui no la convençut

la nostra Web. Els usuaris d‟Internet tenen una impaciència i una insistència enorme per

rebre satisfacció de forma immediata i si no s‟imaginen com usar el nostre espai Web

en un màxim d‟un o dos minuts, acaben per pensar que no val la pena perdre el temps i

l‟abandonen.

Els usuaris no llegeixen una pàgina Web de la mateixa manera que seqüencial que

llegeixen, per exemple, un diari, un llibre, un article o un còmic. Els usuaris tenen

necessitats i objectius que volen aconseguir, i saben que la forma d‟aconseguir-los no

acostuma a ser a base de passar-se llargues estones llegint cada node Web que

visiten, llegint de principi a fi els seus continguts i enllaços. L‟usuari, en una pàgina, farà

clic sobre el primer enllaç que cregui que pot portar-lo allí on trobarà el que està buscant



o necessita. Això vol dir que molts dels continguts i enllaços d‟aquella Web, l‟usuari, ni

tan sols els haurà vist.

L‟actitud d‟un usuari davant d‟una pàgina és anar recorrent, a forma de salts,

d‟informació continguda. No podem predir amb exactitud quin serà el camí que l‟usuari

seguirà durant la seva exploració visual de la nostra pàgina, però si podem saber a

quines zones li prestarà més atenció.

En la següent imatge és mostra un esquema del que acostuma a ser el recorregut

visual alhora de mirar una pàgina Web:

Figura 1. Esquema de l‟exploració visual d‟una pàgina Web.

Hi ha zones de l‟interfície de la pàgina que confereixen una major jerarquia a

l‟informació que contenen, com per exemple, la zona 1 de la imatge anterior. La

jerarquia visual, proporciona relacions jeràrquiques del tipus “això es part d‟això” i “això

va a continuació d‟això” entre els diferents objectes informatius de la pàgina, mentre que

la jerarquia de l‟informació o dels continguts, estableix relacions del tipus “això és més

important que això altre”.

Per tal d‟emfatitzar l‟importància d‟uns objectes informatius en vers uns altres, és a dir,

per definir la jerarquia de l‟informació, es poden utilitzar varies tècniques com són:

- Col·locar l‟informació més important en les zones de la interfície més rellevants.

- Emfatitzar mitjançant efectes tipogràfics.

- Augmentar el tamany dels textos de major importància.

- Utilitzar el contrast del color per tal de distribuir i discriminar els objectes

informatius.

- Agrupar objectes informatius relacionats entre si.



Al contrari del que es pugui pensar, els objectes informatius que parpadejen, que

canvien o bé llisquen per la pantalla, no seran percebuts per l‟usuari com a objectes

importants, és més, l‟usuari els pot percebre com a publicitat, ja que és un mecanisme

massa explícit per atreure l‟atenció del usuari.

Tampoc podem definir o assignar massa objectes com a “molt importants" ja que es

produeix en l‟usuari una sobrecàrrega d‟informació, amb la qual cosa haurem fracassat

en el nostre objectiu.

Per últim, hem de tenir en compte que l‟usuari de la Web no és únic ni uniforme. Cada

usuari que visiti el nostre lloc tindrà necessitats, expectatives i comportaments diferents,

per tant, el disseny de l‟informació ha de realitzar-se de manera que satisfaci al major

nombre d‟usuaris possible. Si es disposa dels coneixements i de la tecnologia suficient,

es pot realitzar un disseny dinàmic que mitjançant perfils s‟adapti a les diferents

necessitats de cada grup d‟usuaris, o idealment, a cada usuari en concret. Alguns

d‟aquests mètodes més comuns per a estructurar l‟informació dins d‟una pàgina Web de

manera que englobi la forma de pensar de diferents grups d‟usuaris, és la tècnica

d‟agrupació de targetes o CardSorting. No hi entrarem en detall, però, per ficar un

exemple, es podria dir que la informació de les pàgines de la nostra Web serien

diferents per un usuari que visita el lloc Web una mitja de tres cops per setmana i que ja

hagués efectuat alguna compra, que per un usuari que visita la pàgina per primera

vegada.

Accessibilitat

Parlar d‟accessibilitat Web és parlar d‟un accés universal a la Web, independentment

del tipus de hardware, software, infraestructura de la xarxa, idioma, cultura, localització

geogràfica i capacitats dels usuaris.

Accessibilitat significa proporcionar flexibilitat per tal d‟acomodar-se a les necessitats de

cada usuari i a les seves preferències i/o limitacions. Amb aquesta idea, neix l‟Iniciativa

d‟Accessibilitat Web, coneguda com WAI (Web Accessibility Initiative) [12]. Es tracta

d‟una activitat desenvolupada per W3C, amb l‟objectiu de facilitar l‟accés a les persones

amb discapacitats, desenvolupant pautes d‟accessibilitat, millorant les eines per a



l‟avaluació i reparació de l‟accessibilitat Web, portant a terme una tasca educativa i de

conscienciació en relació a l‟importància del disseny accessible de pàgines Web, i obrint

també nous camps en l‟accessibilitat, a través de la investigació en aquesta àrea.

L‟any 2005 va ser l‟any de l‟accessibilitat a tot el món, després de que el 2003 fos

declarat per la Unió Europea “l‟any europeu de les persones amb discapacitats”.

El 10 d‟abril de 2003, el govern britànic va reconèixer que el 80% dels seus llocs Web

necessitaven ser re dissenyats per a poder fer-los accessibles.

Només a Espanya, un 9% de la població és discapacitada. El nombre de llocs Web

públics accessibles de l‟Administració – estatal, autonòmica i local – és pràcticament

nul. De la mateixa manera, moltes de les aplicacions software més utilitzades als

ordinadors, no tenen en compte que moltes persones discapacitades han de poder

usar-les.

Avui en dia, els països desenvolupats estan dedicant molts esforços i recursos per

garantir que la societat no perdi el tren de l‟accés a les noves tecnologies. És per això

que la majoria d‟accions dels governs van encaminades a la formació de la població en

l‟ús d‟aquestes noves eines de comunicació i en afavorir l‟accessibilitat tant a nivell Web

com a nivell d‟aplicacions.

Actualment, l‟accessibilitat, es veu com una dificultat afegida alhora de dissenyar

software, no obstant això, són molts els individus i les organitzacions que troben

diverses raons per dissenyar de forma accessible [13]:

L‟accessibilitat, un benefici social:

L‟ús creixent de les noves tecnologies a totes les àrees de la societat, fa que

l‟accessibilitat representi un pas endavant a la independència d‟aquells individus

amb discapacitats.

L‟accessibilitat, un aspecte regulat per la llei:

Un nombre creixent de països exigeix que certes Webs i aplicacions software

siguin accessibles i s‟ajuden de la legislació i de la normalització pel seu

compliment. Aquest tema el tractarem amb més detall en el darrer punt d‟aquest

capítol.



L‟accessibilitat, un benefici a nivell tecnològic:

El disseny accessible aconsegueix que determinades Webs o aplicacions

estiguin disponibles per a altres dispositius, com per exemple telèfons o PDAs, ja

que les tècniques d‟accessibilitat estan basades amb tecnologies i estratègies de

disseny recents.

L‟accessibilitat, un benefici a nivell econòmic:

L‟accessibilitat ofereix el potencial perquè les organitzacions i les empreses

adquireixin nous clients i nous mercats.

Pautes d‟accessibilitat aplicades a www.Prosmokiwi.com

Per tal de fer un contingut Web accessible, s‟han desenvolupat les denominades

“Pautes d‟Accessibilitat al Contingut” de la Web WCAG [14], la seva funció principal és

guiar el disseny de pàgines Web cap a un disseny accessible, reduint d‟aquesta manera

barreres a l‟informació. WCAG consisteix en 14 pautes que proporcionen solucions de

disseny i que utilitzen, a forma d‟exemple, situacions comunes en les que el disseny

d‟una pàgina pot produir problemes d‟accés a l‟informació. Les Pautes contenen a més

una sèrie de punts de verificació que ajuden a detectar possibles errors.

Cada punt de verificació està assignat a un dels tres nivells de prioritat establerts per les

pautes.

Prioritat 1: Són tots aquells punts que un desenvolupador Web ha de complir, ja

que, d‟altra manera, certs grups d‟usuaris no podrien accedir a l‟informació del

lloc Web.

Prioritat 2: Són aquells punts que un desenvolupador Web hauria de complir, ja

que, d‟altra manera, seria molt difícil accedir a l‟informació per certs grups

d‟usuaris.

Prioritat 3: Són aquells punts que un desenvolupador Web hauria de complir, ja

que, d‟altra manera, alguns usuaris tindrien certes dificultats per a accedir a

l‟informació.

En funció d‟aquests punts de verificació, s‟estableixen els nivells de conformitat:



Nivell de conformitat “A”: Tots els punts de verificació de prioritat 1 es satisfan.

Nivell de conformitat “Doble A”: Tots els punts de verificació de prioritat 1 i 2

es satisfan.

Nivell de conformitat “Triple A”: Tots els punts de verificació de prioritat 1,2 i 3

es satisfan.

Les pautes descriuen com fer pàgines Web accessibles sense sacrificar el disseny,

oferint la flexibilitat necessària per tal que l‟informació sigui accessible un cop exposada

a diferents situacions i proporcionant mètodes que permeten la seva transformació en

pàgines útils e intel·ligibles.

De la mateixa manera, s‟han desenvolupat “Pautes d‟Accessibilitat per a Eines d‟Autor”,

amb l‟objectiu d‟ajudar als desenvolupadors de software alhora de crear eines d‟autor

per tal de produir contingut Web accessible. També existeixen “Pautes d‟Accessibilitat

per a XML”, on s‟explica com assegurar l‟accessibilitat d‟aplicacions basades en XML.

Per últim, les “Pautes d‟Accessibilitat per Agents d‟Usuari”, expliquen com fer accessible

els navegadors, reproductors multimèdia i altres tecnologies assistives.

Diferència entre Usabilitat i Accessibilitat

Tots dos conceptes s‟haurien de tractar conjuntament i amb un alta prioritat alhora de

desenvolupar qualsevol aplicació o sistema interactiu.

A continuació s‟exposa un breu estudi dels quatre possibles casos que es poden donar

en qualsevol aplicació software:

a) Ni usable ni accessible: Aquest és el cas més habitual en les aplicacions. Són

aquelles que no tenen en compte els paràmetres d‟accessibilitat per persones

amb discapacitats i que no disposen de la usabilitat necessària per a utilitzar-les

de forma satisfactòria.

b) Usable però no accessible: Són aquelles aplicacions que tan sols podran ser

usables per aquelles persones que no sofreixen cap tipus de discapacitat.



c) Accessible però no usable: Aplicacions a les quals podran accedir un nombre

de persones major que en el cas anterior però amb problemes d‟usabilitat.

d) Usable i accessible: Aquest és el cas òptim, però també el menys freqüent.

Representa la idea bàsica de disseny per a la navegació universal d‟una manera

usable.

Disseny Universal

O també anomenat disseny per a tothom, és el procés de fer el disseny i la composició

dels diferents entorns i productes accessibles i comprensibles, de tal manera que siguin

usables per el rang més ampli de persones possible i en el rang més ampli de

situacions, sense la necessitat d‟adaptació ni de disseny especialitzat i que sigui

comercialment practicable [15].

Existeixen uns principis de disseny universal [16] redactats per un grup d‟experts en

disseny universal i que ens pot servir com una guia inicial per avaluar la incorporació de

l‟accessibilitat en el disseny de sistemes interactius.

Els set Principis del Disseny Universal o Disseny per a Tots tenen l‟objectiu

d‟aconseguir que els productes siguin usables i utilitzables per tothom, tenint en compte

tant el disseny i altres aspectes com el cost o l‟àmbit d‟ús.

Aquests principis generals del disseny són aplicables i s‟apliquen en l‟arquitectura,

l‟enginyeria i en les pàgines i aplicacions Web, entre d‟altres camps.

Aquest principis són els següents:

1. Ús equitatiu:

El disseny ha de ser usable per a persones amb diferents habilitats i ha de tenir un

preu raonable.

- Ha de proporcionar les mateixes maneres d‟ús per a tots els usuaris: idèntiques

quan sigui possible, equivalents quan no ho sigui.

- Ha d‟evitar segregar o estigmatitzar qualsevol usuari.

- Les característiques de privacitat, garantia i seguretat han d‟estar disponibles per



a tots els usuaris.

- Ha de ser atractiu per a tots els usuaris.

2. Ús flexible:

El disseny s‟ha d‟acomodar a un rang ampli de persones amb diferents gustos i

habilitats.

- Ha d‟oferir possibilitats d‟elecció en els mètodes d‟ús.

- S‟ha de poder accedir i usar tant amb la mà dreta com amb l‟esquerra.

- Ha de facilitar a l‟usuari exactitud i precisió.

- Ha d‟adaptar-se al pas o ritme de l‟usuari.

3. Ús simple i intuïtiu:

El funcionament del disseny ha de ser fàcil d‟entendre, independentment de

l‟experiència de l‟usuari, coneixement, habilitats del llenguatge i nivell de

concentració actual.

- Ha d‟eliminar la complexitat innecessària.

- Ha de ser consistent amb les expectatives i intuïció de l‟usuari.

- Ha d‟acomodar-se a un ampli rang d‟alfabetització i habilitats lingüístiques.

- Ha de dispensar la informació de manera consistent amb la seva importància.

- Ha de proporcionar avisos eficaços i mètodes de resposta durant i després de

l‟acabament de la tasca.

4. Informació perceptible:

El disseny ha de comunicar la informació necessària de manera efectiva a l‟usuari,

independentment de les condicions ambientals per a les habilitats sensorials de

l‟usuari.

- Ha d‟usar diferents sistemes per presentar de manera redundant la informació

essencial (gràfica, verbal o tàctil).

- Ha de proporcionar un contrast suficient entre la informació essencial i la de les

proximitats.



- Ha de proporcionar compatibilitat amb diverses tècniques o dispositius usats per

persones amb limitacions sensorials.

5. Tolerància per a l’error:

El disseny ha de minimitzar possibles incidents per atzar i les conseqüències

adverses d‟accions no previstes.

- Ha de disposar els elements de manera que es minimitzin els riscs i errors;

elements més usats, més accessibles; i elements perillosos, eliminats, aïllats o

tapats.

- Ha de proporcionar advertències sobre perills i errors.

- Ha de proporcionar característiques segures d‟interrupció.

6. Esforç físic mínim:

El disseny s‟ha de poder usar eficientment i confortablement amb un mínim de

fatiga.

- Ha de permetre que l‟usuari mantingui una posició corporal neutra.

- Ha de minimitzar les accions repetitives.

- Ha de minimitzar l‟esforç físic continuat.

7. Mida i espai per poder aproximar-se i utilitzar el disseny (en el cas d’un

sistema hardware):

El disseny ha de tenir un espai i una mida apropiats per a l‟aproximació i utilització.

- Ha de proporcionar una línia de visió clara cap els elements importants, tant per

a un usuari assegut com dempeus.

- Ha de fer que l‟abast de qualsevol component sigui confortable per a qualsevol

usuari assegut o dempeus.

- S‟ha de poder acomodar a variacions de mida de la mà o de l‟agafament.

- Ha de proporcionar l‟espai necessari per a l‟ús d‟ajuts tècnics o assistència

personal.



Aquests són els criteris que defineixen un disseny utilitzable per tots que, juntament

amb altres aspectes com l‟estètica, el cost, la seguretat, o el respecte a la diversitat,

s‟hauran de tenir en compte en el procés de disseny.

Fragment extret de l‟investigació sobre la Interacció Persona – Ordinador per part de

l‟AIPO [17]:

“Nuestro enfoque del diseño para todos incluye dos niveles diferentes pero

complementarios: el primero se dedica al diseño para la usabilidad (esto es, la

minimización del sobreesfuerzo para realizar una tarea impuesto por el uso del

computador) y a la accesibilidad (es decir, la eliminación de las barreras que

encuentran algunos usuarios para usar el computador debido a sus

características físicas, sensoriales cognitivas o al contexto en el que trabajan).

Así pues, este primer nivel incluye al diseño centrado en el usuario y el diseño

libre de barreras de accesibilidad. El segundo nivel trata con la teclología

asistencial que incluye el diseño de servicios y dispositivos para las necesidades

“especiales” de usuarios especificos puedan usar equipamiento comercial”.

Normativa i legislació

Les discapacitats visuals, auditives, físiques, de la parla, cognitives i neurològiques

poden afectar l‟accés a les aplicacions software i/o Web.

La mitjana d‟edat en molts països s‟incrementa, i amb ella també els efectes de

l‟envelliment de la població, creant, com a conseqüència, un increment de problemes

d‟accessibilitat.

Qui és el responsable de garantir l‟accessibilitat?

Els governs tenen com a responsabilitat, amb els seus ciutadans, garantir l‟accés als

continguts oficials de manera equivalent. És per aquest motiu que diversos països han

legislat sobre l‟accessibilitat dels continguts digitals.

Tot seguit es mostren diferents punts, extrets de diferents legislacions, Internacional,

Europea i Espanyola:



LEGISLACIÓ INTERNACIONAL

20 de desembre de 1993

Normes Uniformes sobre la igualtat d’oportunitats per els persones amb

discapacitat.

- Article 5: Possibilitats d’accés.

Per a les persones amb discapacitats de qualsevol índole, els Estats han de:

a) Establir programes d‟acció per a que l‟entorn físic sigui accessible.

b) Adoptar mesures per garantir l‟accés a la informació i la comunicació.

b) Accés a la informació i la comunicació.

6. Els Estats han d‟elaborar estratègies per a que els serveis d‟informació i

documentació siguin accessibles a diferents grups de persones amb discapacitat.

S‟ha d‟utilitzar el sistema Braille, gravacions en cinta, tipus d‟impremta grans i altres

tecnologies apropiades per a proporcionar accés a la informació oral a les persones

amb deficiències auditives o dificultats de comprensió.

10. Els Estats han de vetllar per a que els nous sistemes de serveis i de dades

informatitzades que s‟ofereixen al públic en general siguin des d‟un principi

accessibles a les persones amb discapacitat, o s‟adaptin per a fer-los accessibles a

elles.

LEGISLACIÓ EUROPEA

Gener 2003

Resolució del Consell de la Unió Europea sobre “Accessibilitat Electrònica” – Millorar

l‟accés de les persones amb discapacitat a la societat del coneixement.

Recomanacions:

- Evitar l‟exclusió social en la societat de la informació

- Creació d‟una “etiqueta d‟accessibilitat electrònica” per als productes i serveis

que compleixin les normes de l‟accessibilitat electrònica.



- Fomentar mesures que animin les empreses privades per a que els seus

productes i servies basats en les TIC (tecnologies de la informació i de la

comunicació) siguin accessibles, i exigir que els productes i serveis per als

contractes públics de les TIC siguin accessibles.

Actualment, s‟està treballant amb el projecte “i2010” (European Information Society in

2010).

LEGISLACIÓ ESPANYOLA

Llei 34/2002, de l’11 de juliol de 2002, de serveis de la societat de la informació i

de comerç electrònic.

Disposició addicional quinta. Accessibilitat per a les persones amb discapacitat i

d’edat avançada a la informació proporcionada per mitjans electrònics.

- Les Administracions Públiques adoptaran les mesures necessàries per a que la

informació disponible en les seves respectives pàgines d‟Internet puguin ser

accessibles a persones amb discapacitat i d‟edat avançada d‟acord amb els

criteris d‟accessibilitat al contingut generalment reconeguts, abans del 31 de

desembre del 2005.

Així mateix, podran exigir que les pàgines d‟Internet el disseny o manteniment de les

quals financin, apliquin els criteris d‟accessibilitat abans mencionats.

- Es promourà l‟adopció de normes d‟accessibilitat per als prestadors de serveis i

els fabricants d‟equips i software, per a facilitar l‟accés de les persones amb

discapacitat o d‟edat avançada als continguts digitals.

Llei 51/2003, del 2 de desembre, d’igualtat d’oportunitats, no discriminació i

accessibilitat universal de les persones amb discapacitat.

Aquesta llei omple el buit existent a Espanya d‟un marc legal ampli i general, similar

al que proporcionen en altres països lleis similars.

Es basa i posa en relleu els conceptes de: No discriminació, acció positiva i

accessibilitat universal.



La llei estableix, la obligació gradual i progressiva de que tots els entorns, productes

i serveis han de ser oberts, accessibles i practicables per a totes les persones i

disposa terminis i calendaris per a la realització de les adaptacions necessàries.

Disposició final sèptima: Condicions bàsiques d‟accessibilitat i no discriminació per

l‟accés i utilització de les tecnologies, productes i serveis relacionats amb la societat de

la informació i medis de comunicació social.

- En el termini de 2 anys des de l‟entrada en vigor d‟aquesta llei, el govern

aprovarà, segons el previst en el seu article 10, unes condicions bàsiques

d‟accessibilitat i no discriminació per a l‟accés i utilització de les tecnologies,

productes i serveis relacionats amb la societat de la informació i amb qualsevol

mitjà de comunicació social, que seran obligatoris en el termini de quatre a sis

anys de l‟entrada en vigor d‟aquesta llei, per a tots els productes i serveis nous, i

en el termini de vuit a deu anys per a tots aquells existents que siguin

susceptibles d‟ajustaments raonables.

- En el termini de 2 anys des de l‟entrada en vigor d‟aquesta llei, el Govern haurà

de realitzar els estudis integrals sobre l‟accessibilitat als anomenats béns o

serveis que es considerin més rellevants des del punt de vista de la no

discriminació i accessibilitat universal.

LA SECCIÓ 508

La Secció 508 de l‟Acta dels Americans amb Discapacitat, va entrar en vigor el 21 de

juny de 2001.

Com a resum, podem citar el següent paràgraf que explica el seu objectiu primordial:

“La secció 508 exigeix que quan les agències Federals desenvolupin, adquireixin,

mantinguin o usin tecnologia electrònica i per a la informació, han d’assegurar-se

que dites tecnologies permeten als empleats federals amb discapacitat tenir

accés i utilitzar la informació i dades de manera similar a l’accés i ús a la

informació i dades que tenen els empleats federals que no són persones amb

discapacitats, a menys que constitueixi una càrrega excessiva imposada a

l’agència. La secció 508 també exigeix que els individus amb discapacitat, que

formen part del públic que busca informació o serveis per part d’una agència



Federal, tinguin accés a i a l’ús de la informació i dades de manera comparable a

la que es proporciona al públic que no són persones amb discapacitat, a menys

que signifiqui una càrrega excessiva imposada a l’agència.”

La Secció 508, també determina les normes per a la creació de pàgines Web i

aplicacions software que són aplicables a totes les agències federals d‟Estats Units.



Capítol 3 – Anàlisi

Anàlisi de requeriments

Els requeriments són la descripció i especificació d‟un sistema software. Inclouen tant

els serveis que el client requereix del sistema, com les restriccions sota les quals

funcionarà o serà desenvolupat.

L‟Enginyeria de Requeriments és el procés d‟establir aquests requeriments, el principal

motiu d‟aquesta, és identificar què s‟ha de fer. El software és una matèria prima amb

molts graus de llibertat, i si no sabem concretament què cal fer, per culpa d‟un matís,

podem estar construint un producte que satisfaci unes necessitats molt diferents a les

que té el client.

Els requeriments també serveixen de contracte entre nosaltres i el client. Una vegada

validats per part del client , ens responsabilitzem de incloure tot allò que s‟hagi definit en

aquests.

Tipus de requeriments

Requeriments funcionals:

Descripció dels serveis que hauria d‟aportar el sistema, com hauria de reaccionar

a unes entrades concretes i com s‟hauria de comportar en situacions particulars.

Requeriments no funcionals:

Aquests requeriments no tenen res a veure amb les funcionalitats del sistema,

sinó que són propietats que l‟aplicació haurà de complir per tal d‟obtenir una bona

qualitat.

Finalment farem una comparativa amb els requeriments que dicta el Disseny Universal

per tal de definir que haurà de cobrir la nostra pàgina Web.



Requeriments funcionals

Registrar-se:

L‟usuari podrà omplir un formulari per tal de quedar registrat a la nostra base de

dades i així tenir accés, utilitzant un nom d‟usuari i una contrasenya, als

continguts específics de la Web.

Restringir l’accés a usuaris no registrats:

Els usuari no podran finalitzar la seva compra si no es registren i entren al

sistema prèviament. No es podrà registrar un nom d‟usuari ja existent a la base

de dades.

Recuperar login:

El client podrà recuperar el seu password de forma segura si es dóna el cas que

el perd.

Veure els productes i les seves característiques:

La pàgina d‟inici, del espai Web, mostrarà al visitant el producte que es ven.

L‟usuari podrà escollir el nombre de kilograms, el calibre del fruit i el nombre de

caixes. També veurà, a cada moment, el preu resultant de cada elecció.

Confeccionar una llista de la compra:

L‟usuari podrà confeccionar la seva compra veient, en tot moment, com es van

afegint els productes al cistell. Es podran eliminar els productes, un per un, o bé,

afegir-los de nou. La llista romandrà sempre ordenada.

Finalitzar compra:

Un cop confeccionat un cistell de productes, l‟usuari, prèviament registrat, podrà

accedir a la pàgina on es mostrarà la seva compra, el càlcul de l‟Iva, el transport,

i l‟import final a pagar.

Sistema de pagament:

El client podrà efectuar el pagament, de la seva compra, de diverses maneres:

contra reemborsament, transferència bancària o pagament amb targeta de crèdit.



Recomanar:

L‟usuari podrà recomanar la pàgina a altres usuaris, ho farà a partir d‟un formulari

on s‟especificarà la direcció de correu del receptor i un comentari.

Contactar:

El visitant podrà contactar amb l‟empresa mitjançant un formulari estàndard en el

qual afegirà els seus comentaris i/o sol·licituds.

Tancar sessió:

El client ha de poder finalitzar la sessió, per motius de seguretat bàsicament.

Aquest, no podrà accedir a les zones restringides si no es torna a identificar.

Requeriments no funcionals

Solidesa:

El sistema guiarà, en certes ocasions, al usuari. Ho farà a partir de notificacions

d‟avís, o simplement, de caràcter informatiu. De la mateixa manera, l‟aplicació

controlarà els possibles errors que es produeixin en temps d‟execució i aquests

seran notificats a l‟usuari.

Robustesa:

La compra realitzada per l‟usuari romandrà en el cistell en tot moment, encara

que aquest visiti altres pàgines del espai Web i podrà recuperar-la i finalitzar-la

quan ho desitgi.

Contingut informatiu:

L‟espai Web comptarà amb diverses seccions de caràcter informatiu, com una

descripció de l‟empresa Prosmokiwi, imatges de la finca i diferents receptes de

cuina relacionades amb el fruit del kiwi.



Consistència:

Per a què l‟aplicació Web sigui consistent, tots els mecanismes s‟hauran

d‟utilitzar sempre de la mateixa manera, per tal de no confondre a l‟usuari, on les

pàgines estaran dissenyades amb una estètica semblant.

Fiabilitat:

Per a que l‟aplicació sigui fiable, aquesta haurà de garantir que l‟entrada de

dades sigui en tot moment correcta, detectant els possibles errors de l‟usuari.

Comparativa amb el Disseny Universal:

A continuació es recorren tots els punts que formen el Disseny Universal per tal de

contrastar-los amb la l‟aplicació Web de Prosmokiwi.

1. Ús equitatiu.

El disseny de l‟aplicació és usable per a persones amb diferents habilitats. És

atractiu per a qualsevol tipus d‟usuari, proporcionant les mateixes maneres d‟ús per

tots ells i proveint-los d‟unes característiques de privacitat, garantia i seguretat.

2. Ús flexible.

L‟aplicació intenta acomodar-se a un ampli rang de persones amb diferents gustos i

habilitats. El disseny s‟ajusta automàticament a la pantalla segons la resolució que

tingui configurada l‟usuari. Els enllaços es mostren amb un tamany adequat i amb

una configuració de colors adient per tal de ser fàcilment identificats.

3. Ús simple i intuïtiu.

El funcionament de la Web és intuïtiu i fàcil d‟entendre per qualsevol usuari. Elimina

la complexitat innecessària i guia a l‟usuari durant la realització de qualsevol tasca.

4. Informació perceptible.

El disseny comunica la informació necessària de manera efectiva a l‟usuari. S‟utilitza

una notificació flotant i un avís sonor, alhora de guiar a l‟usuari. Mostra les

restriccions i els errors en llocs completament visibles tot utilitzant colors que

destaquin.



5. Tolerància per a l’error.

El disseny minimitzarà possibles incidents per atzar i les conseqüències adverses

d‟accions no previstes.

6. Esforç físic mínim.

El disseny del sistema permet a l‟usuari utilitzar-lo de forma confortable i eficient

amb un mínim de fatiga. La senzillesa que ofereix el disseny, no col·lapsa a l‟usuari.

7. Mida i espai per poder aproximar-se i utilitzar el disseny (en el cas d’un

sistema hardware).

Cal tenir en compte que una pàgina Web és únicament de tipus software. Aquesta

està pensada per ser visitada des d‟un ordinador de sobretaula o un portàtil. Amb

unes condicions normals, la plana Web, pot utilitzar-se fàcilment sense estar molt

pròxim a la pantalla ni tampoc a una distància exageradament gran.

Especificació del sistema

Figura 2. Arquitectura tecnològica del sistema.



Recursos hardware utilitzats

Ordinador portàtil Apple MacBook de generació Intel amb les següents

característiques:

o Processador Core 2 Duo de Intel a 2,2 GHz amb 3 MB de catxé de nivell 2

integrada i compartida que funciona a la velocitat del processador.

o Bus frontal a 800 MHz.

o 2 GB (en dos mòduls SODIMM de 1 GB) de SDRAM DDR2 a 667 MHz.

o Processador gràfic GMA X3100 de Intel amb 144 MB de SDRAM DDR2

compartida amb la memòria principal.

o Disc dur Serial ATA de 120 GB a 5.400 rpm.

o Unitat “Combo” de carga per ranura a 24x (DVD-ROM i CD-RW).

o Pantalla brillant TFT de 13,3 polzades (en diagonal) i compatible amb milions

de colors.

- Resolucions compatibles: 1.280 per 800 (nativa), 1.152 per 720, 1.024 per

768, 1.024 per 640, 800 per 600, 800 per 500, 720 per 480 i 640 per 480

píxels a una relació dimensional de 16:10; 1.024 per 768, 800 per 600 i

640 per 480 píxels a una relació dimensional de 4:3 i 720 per 480 a una

relació dimensional de 3:2.

o Connexió Wi-Fi integrada AirPort Extreme2 (basada en el borrador de la

norma 802.11n del IEEE); compatible amb les normes 802.11a, b i g del

IEEE.

o Bluetooth 2.0 + EDR integrat (Enhanced Data Rate).

o Ethernet Gigabit 10/100/1000BASE-T incorporada (connector RJ-45).

Mòdem router Amper 7768 11g de Xavi Technologies.

Punt d‟accés Linksys Wireless-G WAP54G.

Connexió ADSL 3MB de Telefònica.



Recursos hardware mínims pel bon funcionament de la pàgina

Processador Intel Pentium I

128 Mb de memòria RAM

Disc Dur de 1 Gb

Monitor color SVGA (resolució de pantalla adequada: 1024x768)

Teclat i ratolí estàndard.

Model/Router Zyxel de Telefònica.

Connexió ADSL 1MB.

Recursos software utilitzats

Sistema Operatiu Mac OS X v10.5.2 Leopard.

Adobe Software CS3 per a Macintosh amb els següents paquets:

o Adobe Bridge CS3

o Adobe Device Central CS3

o Adobe Dreamweaver CS3

o Adobe Flash CS3

o Adobe Flash CS3 Vídeo Encoder

o Adobe Illustrator CS3

o Adobe InDesing CS3

o Adobe Photoshop CS3

o Adobe Stock Photos CS3

Màquina virtual VMWare v1.1 amb una instal·lació de Windows XP Professional.

o Microsoft Office Word 2007

o Navegador Internet Explorer v6.0



Navegadors:

o Safari v3.1.1

o Mozilla Firefox v2.0.0.14

o Opera v9.24

Java Web Start v12.1.0

Opció Javascript activada per tots els navegadors.

Software Web proporcionat per l‟empresa www.freehostia.com per a les proves

de funcionament de la pàgina.

Recursos software mínims pel bon funcionament de la pàgina

Microsoft:

Sistema Operatiu Windows XP Home Edition.

Navegador Internet Explorer v6.0.

Opció Javascript activada.

Apple:

Sistema Operatiu Mac OS Classic.

Navegador Mozilla Firefox v2.0.0.2

Opció Javascript activada.



Capítol 4 – Disseny

Introducció

Després d‟haver realitzat l‟anàlisi de requeriments en el capítol anterior, i seguint amb el

model de procés que segueix l‟enginyeria de l‟usabilitat (figura 3), tot seguit, es mostra

l‟informació necessària per tal de poder realitzar, posteriorment, el desenvolupament, tot

modelant el sistema de forma pertinent i procedint, després, amb la seva codificació.

Figura 3. Model de procés de l‟enginyeria de l‟Usabilitat.

Com ja s‟ha dit anteriorment, un dels aspectes més importants d‟un sistema interactiu

es troba en la capacitat de diàleg amb l‟usuari. Per tant és evident l‟importància del

disseny. Aquest, tot i ser, particularment, el més complex, també és el més gratificant,

un cop s‟aconsegueix l‟objectiu de proporcionar el suport necessari a l‟usuari.

Una vegada resoltes totes les funcionalitats que ha de cobrir la Web, junt amb la resta

de característiques derivades del context de la interacció, es passa, en aquesta fase, a

realitzar el “disseny de l‟activitat” i el “disseny de la informació” com a principals

activitats que conformen el procés global de disseny de la interacció.



Disseny de l’activitat:

Aquest punt, està directament relacionat amb l‟especificació funcional, la tecnologia i les

noves possibilitats que el sistema ofereix per a que les persones siguin capaces

d‟utilitzar sistemes interactius per a la consecució dels seus objectius. El disseny de

l‟activitat s‟aconsegueix analitzant les funcionalitats, les tasques necessàries que

permeten realitzar-les i el modelat a nivell conceptual, buscant una aproximació al

model mental dels usuaris, com s‟ha dit en capítols anteriors, prèviament incorporats

com a membres del equip de desenvolupament. Aquesta part del disseny cobreix l‟espai

existent entre les funcionalitats definides i la interfície del usuari.

Disseny de la informació:

El principal objectiu d‟aquesta part del disseny, és donar suport a la percepció, la

interpretació i la comprensió de la informació dels sistemes interactius. Afronta aspectes

relacionats amb la part física de la interacció (colors, organització dels elements, etc.),

el llenguatge (visual per a les interfícies visuals, auditiu per a les auditives, etc.), els

models de la informació i per últim, la consistència i coherència. No només farem

referència a quins colors o fonts tipogràfiques utilitzar, sinó també a la disposició dels

elements interactius per l‟interfície, d‟acord amb les tasques a realitzar i en compromís

amb els objectius d‟usabilitat, i a la consecució funcional d‟aquestes tasques, en

definitiva, al diàleg amb l‟usuari.

Coneixement de la funció dels objectes: les Affordances.

La affordance o comprensió intuïtiva [18] és un aspecte important de la fase anterior

(disseny de la informació), aquesta, relaciona els factors humans amb la capacitat dels

elements de la interfície de transmetre la sensació de poder utilitzar-se adequadament.

Quan s‟elabora una interfície, el dissenyador, desitja que els usuaris coneguin la funció

que tindran els diferents objectes d‟aquesta. Per exemple, en la interfície la de nostra

Web, no serveix de res incloure un hipervincle a través d‟una imatge si l‟usuari

desconeix que clicant sobre ella podrà accedir a una nova pantalla.



Tradicionalment, s‟ha pensat que les persones percebem únicament la funció d‟un

objecte a partir del que es podria denominar una inferència: primer es reconeix l‟objecte

(p.e. la tecla de l‟espai en blanc), a continuació es categoritza (p.e. element d‟un teclat)

finalment s‟accedeix al coneixement de la seva funció (p.e. prémer la tecla per a obtenir

un espai en blanc en el text). Però aquesta, tot i que certa en molts casos, no és la

única forma d‟accedir a la informació de la funció d‟un element. Una forma d‟accés més

ràpida és la que es coneix amb el nom de affordances (o captació intuïtiva) que són les

funcions d‟un objecte que l‟observador percep directament a partir de la seva imatge, i

que constitueixen un aspecte d‟importància capital alhora de dissenyar les interfícies

dels usuaris d‟un sistema interactiu.

D‟aquesta manera, l‟objecte no ha de ser, ni reconegut ni categoritzat per tal que es

manifesti la seva funció. Així doncs, per seguir amb l‟exemple anterior, un usuari, al

percebre una tecla espaiador, la primera impressió que té és la d‟estar davant d‟un

objecte “per a ser premut”.

Requeriments de les affordances:

Forma funcional:

La correspondència entre la forma de l‟objecte i la seva funció ha de ser el més

transparent possible. Per exemple: per tal que un objecte presenti la affordance de “ser

premut” ha d‟estar representat de tal forma que doni la sensació de tenir volum sobre

una superfície.

Visibilitat a l’usuari:

Els elements com “els links emergents” que només apareixen quan l‟usuari es situa a

sobre d‟aquests, no són aconsellables en la mesura de que no fan visible la seva funció

a primera vista.

Acció coherent:

L‟acció que segueix al accionament d‟un objecte ha de ser coherent, amb la seva

affordance per tal de facilitar el seu aprenentatge i ús. Per exemple: un botó per a



accedir a un menú ocult que s‟identifica amb una fletxa senyalant cap a baix, haurà de

presentar el menú des d‟aquell punt i cap a baix.

Relativitat del observador:

Un problema de les affordances és que no susciten la mateixa funció a tot tipus de

persones. Per exemple: un banc, situat en un parc, pot presentar la affordance “seures

en ell” per a un ancià, i “escalar-lo” per a un nen.

Interfície amb l’usuari

El disseny de la interfície comença a desenvolupar-se a partir d‟unes idees clares sobre

com han de ser les interaccions.

La interfície de la pàgina Web ha de cobrir una sèrie de característiques importants en

el disseny, com ja s‟ha detallat en apartats anteriors, aquesta ha de ser usable, ha de

tenir en compte el disseny de l‟activitat i de la informació, i també les affordances de

cada objecte.

La interfície d‟aquesta Web, ha estat dissenyada basant-se amb el paràgraf anterior i

també seguint les pautes que s‟indiquen en el Disseny per a tots o Disseny Universal.

Alhora de dissenyar l‟esmentada interfície, s‟ha intentat estructurar la informació d‟una

manera lògica i equilibrada per tal de fer l‟espai el més senzill i fàcil d‟utilitzar possible.

Un altre factor molt important i decisiu, quan ens enfrontem a la creació del disseny

d‟una interfície, és l‟elecció d‟un estil, d‟una manera de fer, d‟un conjunt de colors

predominant i d‟una distribució de la informació, com l‟esmentada en el paràgraf

anterior.

A mode de pilar, de tots els elements anteriors, i bàsic en la creació d‟aquest disseny,

ha estat una idea en forma d‟imatge.

Ens trobem en una pàgina dedicada a la venda de kiwis, d‟una fruita de color marró per

fora i d‟un verd càlid per dins, aquests són els colors que marquen el disseny d‟aquesta

interfície.



La següent figura mostra aquesta imatge, en la qual podem diferenciar un fruit i un

animal, tots dos amb el mateix nom. La imatge no busca un sentit lògic sinó generar un

motiu a l‟usuari per tal que aquest es pari a mirar la resta de la pàgina.

Figura 4. Capçalera de la Web de Prosmokiwi.

A continuació anem a veure els trets més característics de la nostra interfície, indicant

quina ha estat l‟evolució d‟aquesta a partir dels diferent prototips.

Prototipat

Seguint amb el model de procés de l‟enginyeria de la usabilitat, ens trobem amb

l‟apartat de prototipat. Aquest terme no el trobarem al Diccionari General de la Llengua

Catalana, no obstant, és una paraula d‟ús comú en l‟àmbit de la Interacció Persona –

Ordinador (IPO). S‟utilitza com una traducció del anglicisme prototyping, que ve a ser un

substantiu que aglutina el significat de la paraula prototip amb les diferents eines i

tècniques que permeten la producció d‟aquests.

Des de que iniciem el desenvolupament d‟un sistema interactiu, necessitem provar les

parts d‟aquest amb multitud d‟objectius com: verificar funcionalitats, esbrinar aspectes

relacionats amb la interfície del sistema (com ja s‟ha dit anteriorment: posició dels

controls, texts, colors, etc.), validar la navegació, provar noves possibilitats, etc.



Es impensable arribar al final del desenvolupament sense haver realitzat diverses

comprovacions durant el recorregut d‟aquest. Els prototips són precisament el

mecanisme que ens permeten realitzar aquestes comprovacions.

A continuació es mostra l‟evolució dels prototips que s‟han utilitzat per arribar a un

disseny òptim.

Disseny de la Web v0.1

Figura 5. Disseny inicial de la Web, versió 0.1.

Des d‟un principi, s‟ha tingut clar que el color verd hauria de ser predominant. En

aquesta primera versió de la Web, a pesar de partir d‟un logotip bastant atractiu, no

s‟aconsegueix l‟espaiabilitat que es desitja, és a dir, la pàgina agafa un caire un tant

ofegat.

També cal dir, que s‟utilitzen un nombre d‟enllaços, en el menú, que no són suficients

per tal de cobrir tots els objectius que pretén assimilar la Web.

A part de l‟exposa‟t anteriorment, tampoc es té en compte un disseny de la informació el

més òptim possible.




Figura 6. Segon prototip de disseny, versió 0.2.

En aquest segon disseny de la Web, es solucionen alguns dels problemes anteriorment

descrits.

En aquest cas, el disseny de la informació, es veu breument optimitzat per un tamany

del text del menú, més gran i també per una sèrie d‟elements o d‟objectes que donen un

valor afegit al disseny, aquests són, per exemple, l‟utilització d‟una planta decorativa o

el fet de plasmar una escena com la que podem observar en la figura anterior. No

obstant, tot i que aquest disseny s‟ajusta al centre de la pantalla (a diferència del

disseny anterior), no s‟acaba de cobrir la necessitat de proporcionar a l‟usuari una

sensació d‟espaiabilitat.

També podem observar, que el fet de situar la planta a la part superior de la imatge, fa

que tota la pàgina comenci uns 120 píxels (3cm aprox.) més tard, la qual cosa no ens

interessa, si tenim en compte que no és la planta un element important sinó tot el que hi

ha a sota.




Figura 7. Tercer prototip de disseny, versió 0.3.

Arribats en aquest punt, podem observar una millora important en l‟espaiabilitat.

Aquest disseny, dóna una affordance als botons del menú, amb una sensació

d‟afonament d‟aquests quan ens situem a sobre amb el cursor del ratolí. No obstant

això, degut a que aquest efecte, el produeix una imatge situada al darrera del text, no es

conserva una estètica atractiva si l‟usuari augmenta el tamany de la lletra.

En la següent figura es mostra un exemple d‟aquest cas:

Figura 8. Incompatibilitat de les imatges amb el text.

Es important, per aquest motiu, utilitzar text únicament alhora d‟elaborar els botons. Si

contràriament, utilitzem imatges per cada botó, en les quals ja tenim incorporat el text,

llavors, no estem tenint en compte l‟accessibilitat de la Web, ja que en aquest cas, si

l‟usuari incrementa el tamany del text, les imatges no ho fan.




Figura 9. Disseny final de la Web, versió 0.4.

Aquest prototip és el que finalment adopta la pàgina Web de Prosmokiwi.

Aquest disseny de la interfície, soluciona tots els problemes descrits en els prototips

anteriors, mostrant-se al usuari, d‟una manera atractiva, accessible, i usable, tal i com

es complementarà en els següents punts.

Pàgina d’inici

La pàgina d‟inici és, lògicament, la pàgina més important d‟un lloc Web.

Aquesta, ha de comunicar, a primer cop d‟ull, de que tracta el lloc, per tal de fer-ho

d‟una manera ràpida i eficaç, és interessant el fet de mostrar tot el contingut de la

pàgina sense tenir que desplaçar-se cap a baix. Aquesta tècnica és la que utilitzen

moltes empreses d‟Internet, tot i que, normalment, no ho fan les que tenen objectius

comercials, com és el nostre cas.

Així doncs, donat que no és possible realitzar una pàgina ajustada a la pantalla i que a

més compleixi tots els requisits de disseny detallats en aquest capítol, la nostra pàgina



d‟inici, es recolzarà, com ja s‟ha dit, en una capçalera atractiva, que convidi a l‟usuari a

continuar resseguint tota la pàgina.

L‟objectiu principal del disseny gràfic és obtenir una comunicació visual eficaç,

estructurant les pàgines amb jerarquies consistents dels elements de disseny,

emfatitzant els més rellevants i mostrant el contingut d‟una manera lògica i ordenada.

Si repassem tot el lloc Web, la pàgina d‟inici, no es diferència de la resta en més que

dóna a l‟usuari una gran informació del contingut i objectiu del lloc, mantenint, en totes

les seves pàgines, la mateixa capçalera. En general, a tot el lloc, incloent la pàgina

d‟inici, s‟ha utilitzat una mateixa plantilla de disseny, mantenint així, una consistència

(unicitat en totes les pàgines), una simplicitat (assegurant que els títols, elements de

navegació i la informació continguda són reconeguts com a tals per l‟usuari) i un

enfocament clau (posant el mateix èmfasi en tots els elements clau de les pàgines,

comunicant així, i de forma immediata, la informació que contenen).

A continuació, es mostra un tret característic d‟aquesta plantilla, tot recorrent diferents

pàgines, per tal de posar un exemple del paràgraf anterior:

Figura 10. Capçalera del contingut de la pàgina d‟inici.

Figura 11. Capçalera del contingut de la pàgina d‟avís legal.

Figura 12. Capçalera del contingut de la pàgina de registre.



Figura 13. Capçalera del contingut de la pàgina on es detalla la compra.

La pàgina d‟inici de la Web de Prosmokiwi, és la que fa referència als productes, ja que,

si tenim en compte tot el que s‟ha exposat anteriorment, aquesta pàgina és la que millor

transmet l‟objectiu del lloc, la venda de kiwis online.

Navegació

A continuació, es mostra un estudi dels models de navegació per tal de determinar i

entendre com naveguen els usuaris, i així poder definir com volem que aquests

naveguin per la nostra Web.

Figura 14. Topologies de models de navegació.



Tot i que existeixen varies topologies, totes elles parteixen d‟una pàgina d‟inici i des

d‟aquesta, es dóna accés a la resta. De totes formes, no podem oblidar que un

navegant pot entrar al nostre lloc Web a través de qualsevol altra pàgina.

La topologia d‟una Web constitueix la primera via de definició sobre com estan

enllaçades les diferents pàgines del lloc.

El model de navegació, té com a principals objectius:

Permetre als usuaris trobar la trajectòria més fàcil per arribar al seu objectiu.

Assegurar-se que els usuaris saben sempre on són.

Assegurar que els usuaris es mouen ràpidament i de manera lògica a través del

lloc Web.

Donar als usuaris un context del que estan llegint.

La navegació en la Web de Prosmokiwi

L‟exemple que segueix, mostra la topologia exacta del model de navegació utilitzat:

Figura 15. Topologia del model de navegació de la Web de Prosmokiwi.



La Web de Prosmokiwi utilitza una topologia de navegació arbitrària.

Des de la pàgina d‟inici (en la figura anterior, enquadrada de color vermell) només

podem accedir a algunes de les pàgines que pengen des d‟altres pàgines del nostre

nivell, de la mateixa manera, les pàgines del mateix nivell no poden accedir als enllaços

específics de la nostra pàgina.

Tots els enllaços marcats en la figura anterior són bidireccionals, excepte els que van

de les pàgines pintades en blau a les grises.

En el següent punt veurem quina és la informació continguda en cada pàgina, exposant,

d‟aquesta manera, l‟arquitectura de la informació.

Arquitectura de la informació

Els requadres de color verd fan referència als enllaços del menú principal:

Prosmokiwi – Productes – La finca – Receptes – Recomani‟ns – Enllaços – Contacti

Prosmokiwi: informació de l‟empresa, una mica d‟història i propietats del fruit que

cultiva.

Productes: pàgina principal del Web. L‟usuari confecciona la seva compra, un cop

registrat i loguejat en el sistema. També conté informació sobre els productes.

La finca: imatges de la finca seleccionades segons l‟estat o fase en la que es troba la

producció, creixement, pol·linització, naixement del fruit o recol·lecció.

Receptes: algunes receptes típiques elaborades a partir del kiwi.

Recomani‟ns: petit formulari amb l‟objectiu de recomanar la pàgina a un altra persona.

Enllaços: pàgines relacionades amb la venda de fruita online.

Contacti: formulari estàndard de contacte amb l‟empresa.

Productes és la pàgina d‟inici i, des de només aquesta, podem accedir als enllaços de

color gris anomenats:

Registrar-se – Login perdut? – Modificar dades – Tancar sessió – Finalitzar compra –

Compra segura – Transport



Registrar-se: conté un formulari de registre amb una sèrie de camps que seran validats

abans d‟enviar la sol·licitud.

Login perdut?: l‟usuari pot introduir el seu e-mail i enviar-lo a Prosmokiwi per tal de

rebre així, l‟usuari i la contrasenya oblidats o perduts.

Modificar dades: un cop loguejat, l‟usuari pot obtenir les seves dades i modificar-les.

Tancar sessió: sortir del sistema. L‟usuari no podrà efectuar cap compra sinó es registra

de nou. El fet de tancar sessió es important per tal de donar seguretat a l‟aplicació.

Finalitzar compra: l‟usuari veu amb detall la compra realitzada. Pot escollir el sistema de

pagament i finalitzar la compra o be anul·lar-la.

Compra segura: informació referent a la seguretat del sistema, breu explicació d‟ús.

Transport: informació del transport com per exemple, quina empresa se‟n ocupa o quan

temps tarda el client en rebre la compra.

Les pàgines enquadrades de color blau fan referència a:

Avís legal – Sam WD

Avís legal: informació legal de l‟empresa.

Sam WD: futur enllaç a la pàgina de disseny personal.



Capítol 5 – Implementació

Models de desenvolupament de software

A continuació es plantegen diversos models a utilitzar alhora d‟enfrontar-nos al

desenvolupament d‟una aplicació software.

Model lineal seqüencial

També conegut com a cicle de vida clàssic o model del salt d‟aigua. Tot i que és molt

simple (i no reflexa adientment la realitat), estableix clarament quines són les fases que

apareixen en la producció del software.

Esquemàticament, el model seqüencial consta de les següents fases:

Figura 16. Model seqüencial.

L‟enfocament del cicle de vida clàssic genera una sèrie de problemes. És massa

seqüencial i no respon a la vida real. La construcció del software acostuma a ser un

procés iteratiu, amb refinaments progressius. És molt difícil poder establir tots els



requeriments en la fase d‟anàlisi inicial i es triga molt a tenir una versió operativa que

pugui ser validada pel client.

Construcció de prototipus:

Quan no és possible establir d‟entrada els requeriments de l‟aplicació de forma

complerta, és aconsellable abordar el problema construint prototipus.

El desenvolupador, junt amb el client, defineixen els objectius globals i n‟identifiquen els

requeriments. Es fa un disseny ràpid i es desenvolupa una maqueta, a continuació, el

client l‟avalua.

Aquest cicle es repeteix fins a aconseguir el detall desitjat. Tot seguit es mostra

l‟algorisme utilitzat:

Figura 17. Construcció d‟un prototipus.



De fet, la construcció de prototipus no s‟ha de veure com un model de construcció de

software per si mateix, sinó com una metodologia per ajudar a establir els requeriments

de l‟aplicació (que correspondria al primer pas del model seqüencial).

Els principals problemes que poden aparèixer amb aquest enfocament són, la

possibilitat de que es perdi de vista l‟objectiu inicial del prototipatge (obtenir una bona

especificació de requeriments), i que es faci servir el prototipus obtingut com aplicació

final. Es prenen decisions d‟implementació pensant en obtenir ràpidament un prototipus,

però no es fa un replantejament a l‟hora de desenvolupar l‟aplicació final.

Una metodologia similar a la del prototipatge és la coneguda com “programació

exploratòria”, en la que partint d‟un esbós dels requeriments, es construeix una versió

inicial del sistema, i aquest es va modificant o ampliant a mesura que es va utilitzant.

La diferència fonamental està en que en el cas dels prototips, els passos intermedis

corresponen realment a aplicacions que funcionen.

Model incremental

En aquest model, el sistema, no s‟implementa tot de cop sinó que es divideix en parts,

basant-se en la funcionalitat.

A cada iteració es fa tot el procés per desenvolupar una part concreta i es lliura el

software corresponent.

Es comença per les que tenen un major risc i a les quals el client dóna més importància.

Així, es redueix el risc global i les funcionalitats més importants estan més provades.

En principi, un cop acabat el lliurament, ja no es tornen a analitzar els requeriments

d‟aquesta part.

Aquest és, probablement, el model més utilitzat avui en dia.

La següent figura mostra aquesta manera de treballar, cada fase compta amb el seu

anàlisi de requisits, el seu disseny i la seva codificació. Aquest procés es va repetint fins

que es cobreixen totes les funcionalitats o objectius funcionals del sistema, avaluant en

cada fase la funcionalitat corresponent.



Figura 18. Model Incremental.

Model en espiral

El model en espiral, va ser proposat per Boehm l‟any 1988.

Aquest inclou la idea de que el desenvolupament del software és un procés iteratiu.

En aquest model de software es desenvolupa en una sèrie de versions incrementals.

Durant les primeres iteracions o versions, s‟obté un model en paper o un prototipus i

durant les darreres iteracions, es produeixen versions cada vegada més completes del

sistema.

A continuació es mostra una figura on es veuen detallades les diferents fases i apartats

del model en espiral.



Figura 19. Model en espiral.

Model de desenvolupament escollit

El model escollit pel desenvolupament del projecte ha estat una barreja de dos models,

el model seqüencial per una banda i el model incremental per l‟altra.

Tenint en compte que els requeriments funcionals de l‟aplicació s‟han tingut clars des

d‟un principi, s‟ha aplicat el model seqüencial en tota l‟estructura general del projecte.

En canvi, pel que fa al disseny de la interfície i a la forma d‟interacció del usuari amb

aquesta, les idees no estaven tan clares.

Pel motiu anterior, alhora de desenvolupar la interfície i el disseny de la Web, s‟ha

utilitzat el model incremental, ja que aquest model ens permet mostrar els resultats a

l‟usuari, poden rebre de forma anticipada la seva opinió i reacció, amb la possibilitat de

modificar qualsevol cosa si es creu convenient.



Eines de desenvolupament

A continuació veurem amb detall totes les eines que s‟han empleat per a la

implementació de la Web. Així com els recursos utilitzats, per tal de crear un entorn

d‟execució òptim.

Llenguatges de programació utilitzats:

HTML

PHP

CSS

JAVASCRIPT

SQL

HTML (Hypertext Markup Language)

Aquest llenguatge de marques de hipertext, és el format en el que es construeixen,

guarden, i viatgen les pàgines en la World Wide Web. Aquest format permet la inclusió

de vincles o enllaços (hipertext) entre els diferents documents (imatges o text) d‟una

mateixa pàgina, o entre pàgines diferents. Amb això s‟aconsegueix un fàcil accés i

interconnexió entre ells.

Consisteix en un conjunt de codis especials, anomenats “tags”, que permeten definir

tots els paràmetres de visualització d‟hipertext, gràfics i aplicacions en la xarxa.

PHP

Breu història del llenguatge PHP (Hipertext Preprocessor):

PHP és l‟hereu d‟un producte anterior, anomenat PHP/FI. Aquest va ser creat per

Rasmus Lerdorf [19] l‟any 1995. Inicialment, es tractava d‟un conjunt d‟scripts en Perl

per a controlar els accessos a la seva pàgina web personal i els va anomenar “Personal

Home Page Tools”. A mesura que es necessitaven més funcionalitats, Rasmus va anar

escrivint una implementació en llenguatge C molt més amplia, i que fins i tot era capaç



de comunicar-se amb base de dades, permetent crear als usuaris, petites aplicacions

per a webs. Finalment, Rasmus va decidir alliberar el codi font de PHP/FI per a que

qualsevol persona pogués utilitzar-lo, corregir errors i millorar-ne el codi.

L‟any 1997, la segona versió del codi (PHP/FI 2.0) implementat en C, va tenir un

seguiment per varis milers d‟usuaris, aproximadament, uns 50.000 dominis utilitzaven

PHP/FI 2.0, aconseguint així, un 1% dels dominis d‟Internet.

Andi Gutmans i Zeev Zuraski [20] van reescriure completament la versió 2.0 en veure

que tenia poques possibilitats per a desenvolupar una aplicació comercial per a un

projecte que estaven fent a la universitat.

En veure això, Andi i Zeev van decidir cooperar i començar a construir PHP3 (successor

oficial del PHP/FI 2.0).

Aquesta versió, va ser alliberada oficialment el juny de 1998 amb el nom de PHP,

acrònim de Hypertext Preprocessor, deixant de banda, d‟aquesta manera, l‟anterior

nom, però conservant-ne la versió. Això va fer que PHP obtingues una gran expansió en

els anys 1998 i 1999 amb la nova versió (PHP3) obtenint un 10% d‟utilització en els

servidors d‟Internet.

Pocs mesos després del llançament de PHP3, Andi i Zeev van començar a treballar en

la reescriptura del nucli de PHP, creant el nou motor “ZEND”, dels seus noms Zeev i

Andi. La nova versió PHP4 va ser alliberada oficialment el maig de l‟any 2000, gairebé 2

anys després del seu predecessor PHP3.

Aquesta nova versió, aprova millores d‟execució, sessions, incorporació de nous

mòduls, etc. A partir d‟aquí, Andi i Zeev varen fundar l‟empresa Zend Technologies des

de la qual es comença a treballar en el nou motor Zend 2.0 i amb la nova, i actual,

versió PHP5.

Visió general del PHP

És un llenguatge de programació Web semblant a C.

L‟execució i la interpretació es realitza al servidor en el qual està

emmagatzemada la pàgina i el client només en rep el resultat.

Amb PHP es poden generar arxius XML, FLASH, JPG i fins i tot PDF.



Permet la connexió de nombroses bases de dades, com MySQL, Postgres,

Oracle, ODBC, IBM DB2, MySQL Server, Sqlite, SyBase etc.

També permet ser executat en quasi tots els sistemes operatius, com Unix,

Linux, Windows, Mac OS X, i amb els servidors Web més populars com, Apache,

IIS, PWS, iPlanet, OmniHTTPd etc.

Suporta WDDX per a l‟intercanvi de dades entre diferents llenguatges de

programació.

Usos de PHP

Els principals usos del PHP són els següents:

Programació de webs dinàmiques tot combinant motors de bases de dades.

Programació d‟aplicacions Web locals per a Windows, Unix, Mac OS etc.

Creació d‟aplicacions gràfiques, independents del navegador, per mitjà de la

combinació de PHP i GTK que permet crear aplicacions d‟escriptori Windows,

Unix o Mac OS.

CSS (Cascade Style Sheets)

També conegut amb el nom de fulls d‟estil, és una nova forma d‟organitzar els nostres

llocs Web. Els CSS, atreuen una nova metodologia per necessitat, la necessitat de

separar el contingut, de l‟aparença. Això significa, que la informació del nostre lloc Web

ha d‟anar dins dels arxius HTML, però aquests arxius no han de contindre la definició de

com s‟ha de mostrar aquesta informació. La informació de com s‟han de mostrar els

arxius HTML està ubicada en els CSS.

Les fulles d‟estil en cascada són un llenguatge formal utilitzat per a definir la presentació

del document estructurat, escrit en HTML o XML (i per extensió en XHTML).

El W3C (World Wide Web Consortium), referenciat en capítols anteriors, és l‟encarregat

de formular l‟especificació de les fulles d‟estil que servirà d‟estàndard per als agents

d‟usuari o navegadors.



Avantatges dels CSS:

Control centralitzat de la presentació d‟un lloc Web complert, amb el que s‟agilitza

de forma considerable l‟actualització del mateix.

Els navegadors permeten als usuaris especificar la seva pròpia fulla d‟estil local,

que serà aplicada a un lloc Web remot, amb el que s‟augmenta considerablement

l‟accessibilitat. Per exemple, persones amb deficiències visuals poden configurar

la seva pròpia CSS per tal d‟augmentar el tamany del text o bé remarcar més els

enllaços.

Una pàgina pot disposar de diferents fulls d‟estil segons el dispositiu que la mostri

o inclús a elecció de l‟usuari. Per exemple, per a ser mostrada en un dispositiu

mòbil o bé per a ser interpretada per un sintetitzador de veu.

El document HTML en sí mateix és més clar d‟entendre i s‟aconsegueix reduir

considerablement el seu tamany. Per tant, es carregarà més ràpidament.

Separar el contingut de l‟aparença. Es pot definir la forma de tota la Web d‟una

sola vegada.

Models de disseny flexibles, amb pocs límits de personalització de l‟HTML.

El manteniment de la Web serà més fàcil i senzill, degut a que els continguts

estan separats del codi del format.

En un document HTML, es pot definir la forma de tota la pàgina a partir d‟una

simple línia de codi a la capçalera.

Arriba inclús a poder definir-se diversos estils diferents per a una sola etiqueta.

Això és molt important, ja que ofereix potència a la nostra programació. Podem

definir, per exemple, diversos tipus de paràgrafs; en roig, en blau, amb marges,

sense, etc.

JAVASCRIPT

És un llenguatge de computadora de plataforma independent desenvolupat per

Netscape Communications l‟any 1994 per a que els creadors de webs dissenyessin els

llocs de forma interactiva.



JavaScript no requereix accés a les parts potencialment „sensibles‟ o importants de

l‟ordinador, sistema o xarxa. És un llenguatge de programació per a fer scripts. És de

característiques semblants a VBScript o Perl, utilitzat per a la creació d‟accions i

processos d‟automatització per a pàgines webs. Pot ser inserit entre el codi HTML,

interpretat i executat pel navegador. Actualment, tots els navegadors el suporten. El

codi de JavaScript és enviat al client com a part del codi HTML i pot ser utilitzat per a

crear efectes especials, botons animats etc.

SQL (Structured Query Language)

Breu història del llenguatge SQL:

Aquesta comença l‟any 1974 amb la definició, per part de Donald Chamberlin [21] i

d‟altres persones que treballaven en els laboratoris d‟investigació de IBM, d‟un

llenguatge per a l‟especificació de les característiques de les bases de dades que

adoptaven el model relacional. Aquest llenguatge s‟anomenava SEQUEL (Structured

English Query Language) i es va implementar en un prototip anomenat SEQUEL-XRM

entre 1974 i 1975. Les experimentacions amb aquest prototip, van conduir, entre 1976 i

1977, a una revisió del llenguatge (SEQUEL/2), que a partir d‟aquest moment, va

canviar de nom, per motius legals, convertint-se en SQL. El prototip (System R), basat

en aquest llenguatge, es va adoptar i utilitzar internament en IBM.

Gràcies a l‟èxit d‟aquest sistema, que no estava encara comercialitzat, també altres

companyies van començar a desenvolupar els seus productes relacionals basats en

SQL. A partir de 1981, IBM va començar a lliurar els seus productes relacionals i l‟any

1993 va començar a vendre DB2. En el curs dels anys vuitanta, nombroses companyies

(com per exemple Oracle i Sybase) van comercialitzar productes basats en SQL, que

s‟acaba convertint en l‟estàndard industrial pel que fa a les bases de dades relacionals.

L‟any 1986, la institució ANSI (American National Standards Institute) va adoptar SQL

com a estàndard per als llenguatges relacionals, i l‟any 1987 es va transformar en

estàndard ISO amb el nom SQL/86. Durant els anys següents, aquest va passar a

anomenar-se SQL/89 després de diverses revisions i, posteriorment, SQL/92, nom que

conserva encara actualment. El fet de tenir un estàndard definit per un llenguatge per a



base de dades relacionals, obre potencialment el camí a la intercomunicabilitat entre

tots els productes que es basen en ell.

Actualment, està en marxa un procés de revisió del llenguatge per part dels comitès

ANSI i ISO, que hauria d‟acabar en la definició del que en aquest moment es coneix

com SQL3. Les característiques principals d‟aquesta nova versió haurien de ser la seva

transformació en un llenguatge stand-alone, es a dir, que no s‟utilitzés com un

llenguatge allotjat en altres llenguatges, i per altra banda, la introducció de nous tipus de

dades més complexes, que permetin, per exemple, el tractament de dades

multimedials.

Recursos utilitzats:

Servidor Web.

Servidor de base de dades

SGBD

Servidor Web (o HTTP)

Un servidor Web és un programa que implementa el protocol HTTP (hypertext transfer

protocol). Aquest protocol, està dissenyat per a transferir el que s‟anomena

“hipertextos”, pàgines Web o pàgines (hypertext markup language): textes complexes

amb enllaços, figures, formularis, botons i objectes incrustats amb animacions o

reproductors de música.

Es tracta d‟una aplicació que s‟executa contínuament en un ordinador (també s‟utilitza el

terme per a referir-se al ordinador que l‟executa), mantenint-se a l‟espera de peticions

per part d‟un client (un navegador d‟Internet) i que respon a aquestes peticions

adequadament, mitjançant una pàgina Web que s‟exhibirà en el navegador o mostrant

el respectiu missatge si es detecta algun error.

Instal·lar un servidor Web en el nostre PC ens permet, entre d‟altres coses, poder

muntar la nostra pròpia pàgina Web sense la necessitat de contractar un hosting (espai

per albergar una Web), provar els nostres desenvolupaments de forma local o accedir

als arxius del nostre equip des d‟un PC remot.



Servidor de base de dades

Un servidor de base de dades és un programa que proveeix serveis de base de dades a

altres programes o computadores, com es defineix en el model client – servidor.

També pot fer referència a aquells ordinadors (servidors) dedicats a executar aquests

programes, prestant l‟esmenta‟t servei.

SGBD (Sistema Gestor de Base de Dades)

Els sistemes gestors de base de dades; (en anglès: Database management system,

DBMS) són un tipus de software molt específic, dedicat a servir de interfície entre la

base de dades, l‟usuari i les aplicacions que l‟utilitzen. Es basa en un llenguatge de

definició de dades, d‟un llenguatge de dades i d‟un llenguatge de consulta. Aquest

sistema ha d‟assegurar la integritat, confidencialitat i seguretat. Per tant, ha de

permetre:

Definir una Base de Dades: especificar el tipus, estructures i restriccions de

dades.

Construir la Base de Dades: guardar les dades en algun mitjà controlat per

mateix SGBD.

Manipular la Base de Dades: realitzar consultes, actualitzar-la, generar informes,

etc.

Alguns dels exemples de SGBD més coneguts són Oracle, MySQL i PostgesSQL.

Algunes de les característiques desitjades en un SGBD són:

Control de la redundància: la redundància de dades té varis efectes negatius,

com pot ser la duplicació del treball en les actualitzacions, desaprofitament

d‟espai en disc i inconsistència de les dades. Malgrat tot, en ocasions, és

desitjable per qüestions de rendiment.

Restricció d‟accessos no autoritzats: cada usuari ha de tenir permisos d‟accés i

autorització.

Compliment de restriccions d‟integritat: el SGBD ha d‟oferir recursos per definir i

garantir el compliment de les restriccions d‟integritat.



Decisions d’implementació

A continuació es veurà quines són les aplicacions que s‟ha decidit utilitzar en la

implementació del sistema.

Per al desenvolupament de tot el projecte, s‟ha utilitzat un ordinador de l‟empresa

Apple, un portàtil del model Macbook. Aquests proporcionen un gran ventall de

solucions per al disseny i la creació, ja sigui de webs, de música o d‟imatges.

Des d‟un principi es va decidir treballar amb l‟aplicació Dreamweaver CS3 d‟Adobe. Es

tracta d‟un editor de pàgines Web, el més utilitzat per al disseny i programació

d‟aquestes. Proporciona un ampli ventall de funcionalitats i una bona integració amb

altres eines com per exemple el Flash CS3. El Dreamweaver ens permet crear fàcilment

llocs que contenen gràfics i elements multimèdia. És un dels millors programes per a

crear animacions Javascript i DHTML.

Per tot el que s‟ha descrit en el paràgraf anterior, es va decidir, des d‟un principi,

comptar amb l‟editor Dreamweaver. Amb aquest s‟ha implementat tot el codi HTML,

PHP, JavaScript i CSS de la nostra Web.

Per altra banda, un software de la mateixa empresa i molt important per a qualsevol

dissenyador Web, és l‟aplicació Photoshop. El Photoshop CS3 d‟Adobe, ha permès

crear i retocar totes les imatges de la Web, amb una gran comoditat.

Pel que fa al servidor Web, s‟ha treballat de forma local la major part del temps. S‟ha

decidit utilitzar, com a servidor, una aplicació molt coneguda, com és el servidor Apache

2.2, aquest ja el proporciona el propi sistema operatiu de Mac, Leopard. Així que,

simplement a estat necessari activar-lo. El servidor HTTP Apache és un software

(lliure), de codi obert per plataformes Unix (BSD, GNU/Linux, etc.), Windows, Macintosh

i altres, que implementa el protocol HTTP/1.1 i la noció de lloc virtual.

Apache presenta entre altres característiques, missatges d‟error configurables, base de

dades d‟autentificació i negociació del contingut, però també una escassa interfície

gràfica. Aquest, té un amplia acceptació a la xarxa. L‟any 2005, Apache va ser el

servidor HTTP més utilitzat amb un 48% de tots els servidors del món i actualment ja

s‟utilitza en un 70% d‟aquests.



L‟arquitectura del servidor Apache és molt modular. El servidor consta d‟una secció core

i diversos mòduls que aporten moltes de les funcionalitats que podria considerar-se

bàsiques per a un servidor Web.

Els avantatges d‟utilitzar Apache i el motiu pel qual ha estat escollit són, la seva

modularitat, que és open source i gratuït, multi plataforma, i extensible. A part de tot

això, es tracta d‟un servidor molt popular i això fa que sigui fàcil aconseguir ajuda i

suport.

Referent a les bases de dades, es va decidir utilitzar el sistema gestor de base de

dades de MySQL. Aquest, és un sistema de gestió de base de dades relacional. El seu

disseny permet suportar una gran carga de forma eficient.

MySQL va ser creada per l‟empresa sueca MySQL AB, que manté el copyright del codi

font SQL, així com també de la marca. Tot i que MySQL és software lliure, MySQL AB,

distribueix una versió comercial que no es diferencia de la versió lliure més que en el

suport tècnic que ofereix, i la possibilitat d‟integrar aquest gestor a un software

propietari, ja que al no ser així, es vulnerari la llicència GPL [22].

Aquest gestor de base de dades és, probablement, el gestor més utilitzat en el món del

software lliure, això, és degut a la gran rapidesa i fàcil ús d‟aquest. Aquesta gran

acceptació, ve originada per la infinitat de llibreries i altres eines que permeten l‟ús a

través de gran quantitat de llenguatges de programació, a més a més de la fàcil

instal·lació i configuració.

Les principals característiques d‟aquest gestor de base de dades són les següents:

Aprofita la potència dels sistemes multiprocessadors, gràcies a la seva

implementació multi-fil.

Suporta gran quantitat de tipus de dades per les columnes.

Disposa d‟API‟s en gran quantitat de llenguatges (C,C++,Java,PHP,etc.).

Gran portabilitat entre sistemes.

Suporta fins a 32 índex per taula.

Ha estat important també, per al desenvolupament del sistema, la utilització d‟una eina

que ens proporciona el propi MySQL, el phpMyAdmin. Aquesta, és una eina escrita en



PHP amb la intenció de manejar l‟administració de MySQL a través de pàgines webs,

utilitzant Internet o bé de forma local. Actualment, pot crear i eliminar bases de dades,

crear, eliminar i alterar taules, esborrar, editar i afegir camps, executar qualsevol

sentència SQL, administrar claus en camps, administrar privilegis i exportar dades en

diversos formats. A més està disponible en una cinquantena d‟idiomes. phpMyAdmin es

troba disponible sota la llicència GPL.

Desenvolupament de l’aplicació

Un cop detallades totes les eines que han intervingut en la implementació de la Web,

anem a veure, a continuació, com s‟ha desenvolupat l‟aplicació tot repassant els punts

més importants de la codificació en els diferents llenguatges de programació.

XHTML

Acrònim del anglès de eXtensible Hypertext Markup Language (llenguatge extensible de

marcat de hipertext), és el llenguatge pensat per a la substitució d‟HTML com a

estàndard per a les pàgines Web. XTHML és la versió XML de HTML, amb la qual cosa,

té, bàsicament, les mateixes funcionalitats, però compleix les especificacions més

estrictes de XML.

Aquest llenguatge ha estat la base en el desenvolupament de la interfície, permetent

crear tota l‟estructura de la pàgina, els formularis, botons, taules, etc.

L’encapçalament XHTML

Totes les pàgines de la Web comencen amb el mateix encapçalament:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="es">

La propera línia d‟aquest encapçalament és la declaració del tipus de document

DOCTYPE, es tracta d‟una part fonamental de totes aquelles pàgines que vulguin



complir els estàndards, tant HTML com XHTML. Aquesta declaració indica quina versió

de (X)HTML s‟utilitza, de manera que els navegadors puguin saber quina sintaxi i

gramàtica s‟utilitza, i els validadors puguin comprovar la seva validesa. Per aquest

motiu, la declaració indica un DTD (Document Type Definition) contra el qual es pot

realitzar la validació.

A part d‟això, la declaració DOCTYPE s‟utilitza pels navegadors per a activar el seu

mode, estàndard o estricte, o el seu mode de compatibilitat. Cal adonar-se de que la no

utilització de un DOCTYPE o el seu ús incorrecte, pot fer que els navegadors renderitzin

la pàgina de forma completament diferent a la que tenim previst. Per això, totes les

pàgines de la Web han de contenir aquesta declaració i fer-ho de forma correcta, amb la

finalitat de complir els estàndards per un costat i per garantitzar uns resultats de

renderitzat homogenis per l‟altre.

En el cas de la nostra declaració, s‟indica que la pàgina ha de validar-se com XHTML

Transitional, utilitzant el DTD existent a la url http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd.

Existeixen tres tipus de documents XHTML: Strict, Transitional i Frameset. A

continuació es mostra la declaració de cada un d‟ells amb la corresponent referència de

validació de cada DTD.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Tot seguit es mostren les diferències entre les declaracions anteriors per tal de saber

quina cal utilitzar en cada cas:

Strict: aquest tipus de document està principalment ideat per a la seva utilització

amb CSS, separant completament el contingut i la presentació. Per tal efecte, no



permet la utilització d‟etiquetes i atributs ja en desús orientats a la presentació,

com font, center i altres. Escrivint pàgines en XHTML 1.0 Strict s‟aconsegueixen

pàgines ben estructurades i fàcilment adaptables mitjançant CSS, però té la

desavantatge de crear incompatibilitats amb altres navegadors.

Transitional: inclou totes les característiques de XHTML 1.0 Strict, però afegeix

característiques orientades a la presentació.

Frameset: es tracta d‟una variant del Transitional per a les pàgines que utilitzen

frames.

A continuació, trobem una instrucció com la següent:

<html xmlns="http://www.w3.org/1999/xhtml" lang="es">

Aquest atribut, defineix l‟espai de noms que seran utilitzats en el document. L‟enllaç a

lloc Web de noms s‟utilitza només com a identificador, en aquesta direcció no hi ha cap

definició sobre l‟espai de noms que pugui entendre el navegador. Aquest l‟especifiquem

a continuació amb la definició de lang = “es”, seleccionant el llenguatge espanyol.

Totes les pàgines de la Web, a part de compartir l‟encapçalament anterior, també

comparteixen les següents instruccions contingudes entre els tags del head:

<meta name="Description" lang="es" content="venta de kiwis frescos y de calidad" />

<meta name="Keywords" lang="es" content="kiwi, kiwis, venta kiwis, kiwis lleida, kiwi fresc,

comprar kiwis, fruta fresca, comprar fruta, venda de kiwis,fruita de lleida,fruta de lleida" />

<meta name="language" content="es" />

<meta name="revisit" content="7 days" />

<meta name="robots" content="index, follow, all" />

<meta name="Author" content="Ricard Pros" />

<meta name="Copyright" content="KIWIS PROS MORELL" />

<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />

<meta name="DC.language" scheme="ISO639-1" content="es" />

<link rel="start" href="http://www.prosmokiwi.com" title="Página índice" />



Aquest conjunt de sentències fan referència a les etiquetes conegudes amb el nom de

“metatags”.

Les metatags són etiquetes html que s‟incorporen en l‟encapçalament d‟una pàgina

Web i que resulten invisibles per al visitant normal, però de gran utilitat per als

navegadors i altres programes que puguin valer-se d‟aquesta informació.

El propòsit dels metatags és el d‟incloure informació (metadades) de referència sobre la

pàgina: autor, títol, data, paraules clau, descripció, etc. Aquesta informació podria ser

utilitzada pels robots de búsqueda per a incloure-la en les seves bases de dades i

mostrar-la en el resumen de búsquedes o bé tenir-la en compte durant les mateixes.

Pel que fa referència a la resta de la codificació XHTML, un dels punts més importants

alhora d‟estructurar la informació, ha estat la utilització del tag <div></div> que ens

permet dividir els diferents objectes d‟informació del lloc, per tal d‟organitzar les dades

de la millor manera.

PHP5

L‟ús de PHP5 ha estat bàsic per al desenvolupament de l‟aplicació. Aquest es va

intercalant entre el codi XHTML entre els tags <? i ?>.

A continuació veurem els trets més característics del PHP aplicat a la nostra Web:

Pas d’informació

Una de les grans virtuts d‟aquest llenguatge és que ens permet enviar i rebre dades des

d‟una mateixa pàgina o bé enviar-les a d‟altres.

Tot seguit es mostra un exemple del enviament i rebuda de dades des d‟una mateixa

pàgina:

</body> </html> <?php if (isset($_POST['muestra'])) { echo 'Hola, '.$_POST['nombre'].', el teu menjar preferit és:'. $_POST['comida'].''; } else { ?> <form method="POST" action="<?php echo $_SERVER['PHP_SELF'];?>"> ¿Quin és el teu nom?



<input type="text" name="nombre" /> ¿Quin és el teu menjar preferit? <select name="comida"> <option value="Spaguetis">Spaguetis</option> <option value="Asado">Rostit</option> <option value="Pizza">Pizza</option> </select> <input type="submit" name="muestra" value="Seguir" /> </form> <?php } //Fi del bloc else ?> </body> </html>

L‟exemple anterior comença mostrant el formulari de preguntes, i un cop l‟hem omplert,

al prémer el botó, la pàgina es recarrega a ella mateixa mostrant-nos la resposta. Això

s‟aconsegueix amb la instrucció isset que determina l‟existència d‟una variable, es a dir,

determina si aquesta variable ja ha estat definida.

Per enviar les dades d‟un formulari s‟utilitza el mètode POST, d‟aquesta manera,

aquestes es reben dintre de la matriu $_POST, amb la qual cosa, les podem recuperar

fàcilment, ja sigui des de la mateixa pàgina o des d‟un altra.

Aquest mateix mètode s‟utilitza pel llenguatge per a totes les fonts d‟informació d‟una

aplicació Web, tals com cookies amb la matriu $_COOKIES, variables de URL amb

$_GET, variables de sessió utilitzant $_SESSION, i variables del servidor i el client

mitjançant la matriu $_SERVER.

En la codificació de la Web de Prosmokiwi, s‟ha utilitzat el mètode POST freqüentment

per tal de passar dades des d‟una pàgina a un altra. Un dels casos més interessants, és

l‟utilitza‟t a la pàgina principal, quan l‟usuari clica a l‟enllaç de Finalitzar compra. En

aquest moment les dades referents a la compra, confeccionada per l‟usuari, passen a la

pàgina següent per tal de poder mostrar-les, sumar l‟Iva, el transport i mostrar l‟import

final a l‟usuari.

Variables de sessió

Una sessió, en l‟entorn de desenvolupament Web, consisteix en controlar l‟accés

individual a una pàgina o grup de pàgines determinat, mitjançant l‟assignació d‟un

identificador únic per a cada usuari. Amb això aconseguim fer un seguiment de cada



usuari durant la seva visita a la nostra pàgina Web, des de que entra fins que surt. PHP

aconsegueix, amb l‟ús de les sessions, construir pàgines més personalitzades,

conservant dins de l‟objecte $_SESSION de PHP l‟estat de les accions realitzades per

l‟usuari (d‟on ve, a on va, etc.).

Algunes de les funcions relacionades amb l‟ús de les sessions són les següents:

Session_start(): iniciar la sessió (crear-ne una de nova o be continuar-la).

Session_register(): per a registrar les variables, accepta com a argument una cadena

que identifica el nom d‟una variable, o una matriu que contingui més identificadors de

variables.

Session_destroy(): per a destruir les dades associades a la sessió actual. No destrueix

cap variable global associada a la sessió ni a la cookie.

Un altre ús molt freqüent de les sessions, és l‟autentificació en pàgines restringides

mitjançant un usuari i una contrasenya. Tal i com s‟ha fet en el cas de Prosmokiwi,

primer PHP comprova que les dades introduïdes per l‟usuari en el formulari

d‟autentificació, són vàlides, es a dir, que existeixen a la base de dades del sistema, i si

és així, tot seguit s‟inicia una sessió guardant aquestes dades en objectes del tipus

$_SESSION. D‟aquesta manera, en les pàgines amb accés restringit, es comprova

l‟existència d‟aquestes variables, permetent, o no, l‟accés als usuaris.

Aquestes variables, també s‟han utilitzat per determinar si existeix una compra pendent

o no, es a dir, si l‟usuari realitza una compra, aquesta ha de romandre activa durant tota

la sessió i això s‟aconsegueix inicialitzant una variable de sessió amb un determinat

valor.

A continuació es mostren els fragments de codi corresponents a la identificació i a la

compra, on intervenen les variables de sessió:

Identificació:

<?PHP

session_start(); $_SESSION['ident']=1; include('conn.php');



// Consulta $user = $_POST["usuari"]; $passwd = $_POST["password"]; $result = mysql_query("SELECT passwd FROM clients WHERE user='$user' ", $conexion); $si = ""; while ($row = mysql_fetch_row($result)){ if($row[0] == $passwd ){ $_SESSION['logat'] = $user; } } // Tancar connexió mysql_close($conexion); /* Redirect to a different page in the current directory that was requested */ $host = $_SERVER['HTTP_HOST']; $uri = rtrim(dirname($_SERVER['PHP_SELF']), '/\\'); $extra = 'index.php'; header("Location: http://$host$uri/$extra"); exit; ?>

El fragment de codi anterior pertany a una pàgina pont, es a dir, que el seu contingut és

merament funcional, no es mostra res en aquesta, simplement s‟executa i es crida a un

altra pàgina.

Aquest codi comprova l‟existència de l‟usuari a la base de dades i si aquest existeix

s‟inicialitzen les variables de sessió corresponents.

De la mateixa manera, existeix una pàgina pont encarregada de tancar la sessió en la

que es destrueixen aquestes variables.

Compra:

<?PHP session_start();

//variables de sessió: if(isset($_SESSION['import']) && !isset($_POST["imp"])) {



$import = $_SESSION['import']; $gran = $_SESSION['gran']; $mig = $_SESSION['mig']; $lot = $_SESSION['lot']; }else{ $import = $_POST["imp"]; $gran = $_POST["gran"]; $mig = $_POST["mig"]; $lot = $_POST["lot"]; $_SESSION['import'] = $import; $_SESSION['gran'] = $gran; $_SESSION['mig'] = $mig; $_SESSION['lot'] = $lot; } //re càlcul: $recalcul = ($gran * 3) + ($mig * 2.5) + ($lot * 4 * 5); if($recalcul == $import) { $recalcul = "OK"; }else{ $recalcul = "KO"; } ?>

Aquest codi, primer, mira si venim de confeccionar una compra, o d‟un altra pàgina, i a

continuació, s‟inicialitzen o recuperen les variables de compra segons correspongui.

En aquest fragment també es re calculen les dades que rebem per tal de comprovar

que tot és correcte.

CSS

Com ja s‟ha detallat anteriorment, els fulls d‟estil (CSS) ens permeten determinar

l‟aspecte de les pàgines.

El document que conté la codificació CSS, es referència a cada pàgina amb la següent

sentència:



text-decoration:none; color: #2D2D22; } .menullista li a:hover{ margin:0 15px 0 14px; padding:10px 5px 10px 5px; text-decoration: underline; color: #CC5533; outline:0; } .menullista li a:link{ outline:0; } .menuselec{ list-style:none; outline:0; margin:0 15px 0 14px; padding:10px 5px 10px 5px; text-decoration: underline; color: #CC5533; }

Codi referent a les caixes de text dels formularis:

.login { border-left-color: #B7943A; border-color: #B7943A; border-bottom-color: #B7943A; border-right-color: #B7943A; border-right-style: solid; border-bottom-style: solid; border-top-style: solid; border-left-style: solid; border-top-color: #B7943A; border-left-width: 1px; border-bottom-width: 1px; border-right-width: 1px; border-top-width: 1px; height: 18px; margin-bottom: 3px; width: 133px; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 14px; margin-top: 3px; background-color: #FFF; color: #2D2D2D; padding-left: 4px; margin-right: 2px; }



Codi referent al estil i comportament d’un botó:

A.afegir { font-family: Geneva, Arial, Helvetica, sans-serif; text-decoration: underline; font-size:12px; color: #730; outline:0; } A.afegir:hover { font-family: Geneva, Arial, Helvetica, sans-serif; text-decoration: overline; font-size:12px; color: #730; outline:0; } A.afegir:active { font-family: Geneva, Arial, Helvetica, sans-serif; text-decoration: overline; font-size:12px; color: #BB8B21; outline:0; }

En la següent figura, es pot observar com queda la pàgina principal de la Web de

Prosmokiwi si no es té en compte el document CSS:

Figura 20. Pàgina inicial de Prosmokiwi sense CSS.



JavaScript

El llenguatge JavaScript es pot introduir en el nostre codi senzillament, simplement

l‟hem d‟ubicar entre els següents tags, situats dins del head:

<script type="text/javascript" language="javascript">

...JavaSript...

</script>

En la implementació de les pàgines de la web, aquest llenguatge s‟ha utilitzat en dos

punts bàsicament, alhora de confeccionar la compra (pàgina inicial), i alhora de validar

els formularis de registre i modificació de dades.

A continuació es mostra un exemple de la validació de les dades més rellevant, feta des

de la pàgina de registre:

Comprovar que s’han acceptat les condicions d’ús:

if(!document.formreg.ac.checked ) { alert("Cal acceptar les condicions d'ús"); document.retorn = false; }

Validació del CIF/DNI:

filter = /^(X(-|\.)?0?\d{7}(-|\.)?[A-Z]|[A-Z](-|\.)?\d{7}(-|\.)? [0-9A-Z]|\d{8}(-|\.)?[A-Z])$/; if (!filter.test(document.formreg.nif.value)) { errors = errors + "Insert a correct NIF/CIF (capital letter) \n"; document.retorn = false; }

Validació del e-mail:

filter = /[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/; if (!filter.test(document.formreg.email.value)) { errors = errors + "Insert a correct e-Mail \n"; document.retorn = false; }



Validació del telèfon:

filter = /^[0-9]{2,3}-? ?[0-9]{6,7}$/; if (!filter.test(document.formreg.tlf.value)) { errors = errors + "Insert a correct Telèfon \n"; document.retorn = false; }

Com es pot observar en els fragments de codi anterior, les validacions s‟han fet a partir

d‟expressions regulars que decideixen si l‟expressió d‟entrada supera les restriccions

que aquestes estableixen.

El llenguatge JavaScript ens permet utilitzar-lo juntament amb el llenguatge PHP. De

vegades, ens pot interessar utilitzar el valor d‟una variable de PHP en JavaScript. El

següent exemple, extret de la pàgina d‟inici (productes), mostra aquesta situació:

var X = "<? if(isset($_SESSION['import'])){ echo "off"; }else{ echo "on"; } ?>";

En el fragment anterior, la variable de JavaScript “X” adoptarà la paraula “off” si la

variable de PHP “$_SESSION[„import]” està establerta, i la paraula “on” si no ho està.

La funcionalitat d‟aquest codi és activar o desactivar el cistell, es a dir, si la variable “X”

conté el valor “off” voldrà dir que ja existeix una compra i que, per tant, no podrem afegir

nous productes, a no ser que la finalitzem o en creem una de nova.

MySql i phpMyAdmin

Alhora d‟implementar la base de dades, el primer pas ha estat la configuració de

l‟aplicació phpMyAdmin a partir de la qual controlarem els elements de la base de dades

MySql. En el cas de Prosmokiwi, l‟empresa només necessita emmagatzemar la



informació dels clients, i per tant, simplement serà necessària una taula on s‟especifiqui

tota aquesta informació.

En la següent imatge es mostren els camps que s‟han utilitzat així com les

característiques d‟aquests:

Figura 21. Taula clients de Prosmokiwi.

Com es pot observar en la imatge, els camps referents al nom de l‟empresa

“nomempre”, mòbil, i fax, poden contenir el valor null, es a dir, el sistema no dóna error

si aquests no s‟omplen, amb concordança amb el comportament del codi (JavaScript)

que valida aquests camps i que hem vist en el punt anterior.

Per tal de poder comunicar-nos amb la base de dades de forma local, ha estat

necessària la configuració d‟un arxiu PHP de connexió, les característiques del qual,

varien un cop pengem la pàgina en un servidor extern, ajustant-se a la configuració

d‟aquest. A continuació es mostra el codi d‟aquest fitxer on es poden observar els

paràmetres de connexió a la base de dades.



<?PHP $dbhost="localhost"; // host de MySQL $dbusuario="sam"; // nom d’usuari per a accedir a la BBDD $dbpassword="*******"; // password d’accés per a l’usuari de la línia anterior $db="clients"; // seleccionem la BD amb la qual treballarem $conexion = mysql_connect($dbhost, $dbusuario, $dbpassword) or die ("No s'ha pogut connectar amb la Base de Dades"); mysql_select_db($db, $conexion) or die ("No s'ha trobat la taula Clients"); ?>

Aquest fitxer de connexió el cridem cada cop que necessitem connectar-nos a la base

de dades, això ho fem incloent aquest fitxer en el codi (include('conn.php');). Un cop

connectats a la base de dades podem realitzar tot un seguit de tasques, en les següents

línies es mostren alguns exemples.

Inserció de camps a la base de dades:

$insercio = "INSERT INTO clients (user ,passwd, tipo, nif, nomempre, nom, cognoms, datan, address, cpostal, poblacio, provin, pais, email, tlf, mobil, fax) VALUES ('$user', '$passwd', '$tipo', '$nif', '$nomempre', '$nom', '$cognoms', '$datan', '$address', '$cpostal', '$poblacio', '$provi', '$pais', '$email', '$tlf', '$mobil', '$fax')"; mysql_query($insercio) or die ("ERROR: No s'ha pogut insertar la informació");

En aquest exemple estem introduint totes les dades que el client omple en el moment

de registrar-se.

Consultar informació de la base de dades:

$hiEs = mysql_query("SELECT * FROM clients WHERE user='$user' ", $conexion);

Amb aquesta instrucció estem seleccionant tots els camps de la taula que pertanyin a

l‟usuari especificat. Aquesta sentència forma part de la comprovació que es fa per

determinar si l‟usuari que s‟està registrant ja existeix, o no, a la base de dades.

Sempre que es realitza una connexió, cal tancar-la un cop acabada la tasca per la qual

s‟havia establert aquesta. Això ho fem afegint la següent instrucció en el codi:

mysql_close($conexion);



Dificultats

Per tal de finalitzar el projecte s‟han tingut que superar una sèrie de dificultats o

impediments alhora de desenvolupar el sistema. Aquests es descriuen a continuació de

forma detallada:

Compatibilitat amb els navegadors i disseny: personalment, una de les parts més

costoses del projecte, ha estat el disseny de la Web. Aquest esforç s‟ha vist incrementat

per un problema molt típic en aquest àrea, la compatibilitat amb els navegadors. Quan

es dissenya una pàgina Web cal pensar en totes les possibilitats, per tant, la nostra

pàgina ha de visualitzar-se correctament amb qualsevol navegador, ja sigui, Internet

Explorer, Safari, Firefox o Opera. Per aconseguir aquest propòsit han estat necessàries

moltes hores de prova i error amb els diferents softwars de navegació.

Codificació de l’aplicació: al llarg del desenvolupament hi han hagut varis punts crítics

pel que fa a la codificació. El més dificultós ha estat programar el sistema per a que

l‟usuari pogués confeccionar la compra, afegir el producte a cada clic, mirant si ja s‟ha

introduït abans aquell producte i sumar-lo o afegir-lo de nou segons toqui.

Per altra banda, un punt important alhora de codificar, ha estat tenir en compte, en tot

moment, totes les alternatives que té l‟usuari quan navega per la Web. Per exemple, un

cop l‟usuari ha finalitzat la compra, el sistema elimina les variables de sessió

corresponents per tal que aquesta ja no es vegi reflexada a la pàgina de productes. Això

ho fem programant el botó d‟acceptar, un cop l‟usuari finalitza la compra, però, que

passa si l‟usuari no prem el botó d‟acceptar? Hem de controlar que premi el enllaç que

premi, la compra s‟esborrarà del sistema.

Per últim, una dificultat transversal a tot el desenvolupament, ha estat la falta de temps,

ja que el projecte s‟ha desenvolupat integrament durant el segon semestre del curs

paral·lelament a la resta d‟assignatures.



Capítol 6 – Seguretat

Introducció

La seguretat és un dels aspectes més importants alhora de desenvolupar un lloc web.

En el cas de Prosmokiwi cal proporcionar a l‟usuari la confiança necessària per a que

aquest es registri i efectuï una compra sense cap problema.

Per una banda, quan parlem de seguretat, ens ve a la ment una sèrie de mots com,

engany, estafa, o intrusió, aquest engany tant el pot sofrir el client com l‟empresa.

Anem a referir-nos primer a la seguretat de l‟empresa envers l‟usuari.

En el cas del llenguatge SQL, existeix un concepte anomenat “injecció de codi” que,

com veurem tot seguit, consisteix en la modificació del comportament de les nostres

consultes mitjançant la introducció de paràmetres no desitjats en els camps als que té

accés l‟usuari.

En el següent exemple es mostra l‟instrucció que s‟utilitza per tal de comprovar

l‟existència d‟un usuari a la base de dades de l‟empresa i així donar-li accés.

SELECT * FROM usr WHERE id = 'root' AND pwd = '4358'

Però, que passaria si intentéssim modificar la consulta ficant com a contrasenya:

' OR ' ' = '

En aquest cas, l‟instrucció quedaria:

SELECT * FROM usr WHERE id = 'root' AND pwd = ' ' OR ' ' = ' '

Llavors, com que ' ' sempre es igual a ' ', haurem modificat la consulta per tal que ens

retorni sempre les dades del usuari tot i havent introduint una contrasenya incorrecta.

D‟aquesta manera l‟usuari malintencionat podria connectar-se com qualsevol usuari

registrat.

Aquest és només un exemple, així mateix, el visitant malintencionat podria aconseguir

contrasenyes, esborrar, afegir i modificar dades de la nostra base de dades.



Per tot això és de vital importància assegurar-se de que el nostre lloc es segur en

aquest aspecte.

Segons la configuració del nostre servidor, es possible que ens trobem afectats per

aquest problema, per tant, cal assegurar-se de que no és així.

Amb el següent codi podem saber si el nostre servidor pren les precaucions de canviar

les cometes passades a les variables.

<? if(!isset( $_GET [ "injeccio" ])){ header ( "location: ?injeccio='" ); } else { echo 'El teu servidor' ; if( $_GET [ "injeccio" ] != "'" )echo 'no ' ; echo 'té problemes d’injecció' ; } ?>

En el cas de Prosmokiwi, tant el servidor local com el servidor extern, tenen en compte

la injecció de codi, i l‟eviten.

Si es dones el cas de que el nostre servidor tingues problemes d‟injecció, es a dir, que

no es preocupes de canviar la cometa simple per dues d‟aquestes, la següent funció en

PHP ens modifica les variables problemàtiques.

function ParseSQL($value) { // Stripslashes if (get_magic_quotes_gpc()) { $value = stripslashes($value); } // Quote if not integer if (!is_numeric($value)) { $value = mysql_real_escape_string($value) ; } return $value; }

Incloent aquesta funció en totes aquelles pàgines que reben variables d‟altres, evitaríem

la injecció de codi.

Per altra banda, hem de tenir en compte la seguretat de l‟usuari envers el lloc Web.

En el següent punt es veurà com es proporciona aquesta seguretat a l‟usuari.



Compra segura

La seguretat que l‟empresa ha de donar a l‟usuari, recau bàsicament en el moment en

que aquest efectua una compra.

Normalment, l‟usuari mostra una certa reticència a comprar per Internet. Sabent això,

Prosmokiwi, ha de garantir al client que el pagament de la compra serà segur i que

finalment rebrà el producte que ha comprat.

Prosmokiwi ofereix tres sistemes de pagament a l‟usuari i que aquest escull en el

moment d‟efectuar la compra:

Contrareemborsament: el client paga el producte en efectiu un cop el rep.

Transferència bancària: l‟empresa proporciona un número de compte al client i aquest

realitza una transferència bancària amb l‟import corresponent.

Targeta de crèdit: el client introdueix el número de la seva targeta de crèdit i mitjançant

una pàgina externa es realitza la transacció corresponent.

Com és normal, l‟únic sistema de pagament que pot transmetre inseguretat és el

pagament amb targeta de crèdit.

Prosmokiwi, a llarg termini, incorporarà el sistema de pagament amb targeta de crèdit.

Aquest es basa en una pàgina externa (TPV, terminal punt de venda) proporcionada per

una entitat bancària. El seu funcionament és simple, l‟empresa s‟identifica amb una

comunicació prèvia, totalment segura, i a continuació s‟envia l‟import que el client haurà

de pagar. Aquest introdueix les dades de la seva targeta de crèdit i finalment es realitza

la transacció.

Com és evident, l‟entitat bancària compta amb tot un seguit de mecanismes per tal de

donar la màxima seguretat a l‟usuari, com el xifrat de dades en les comunicacions SSL

[23], confidencialitat, control d‟accés, i un llarg etcètera.

Tot i que s‟ha estudiat la implantació d‟aquest sistema de pagament, encara no s‟ha

implementat degut als costos fixes que suposa. No obstant, un cop es compti amb una

borsa de clients suficient, aquest, es ficarà en funcionament.



Advertència legal

L‟advertència legal conté la informació legal de l‟empresa, tot i que aquesta encara no

ha estat constituïda legalment ni donada d‟alta en el registre mercantil, i per tant no

disposa de les dades de registre. També conté informació sobre la protecció de dades,

la propietat intel·lectual i industrial, etc.

A continuació es mostra l‟advertència legal de la Web de Prosmokiwi:

Información legal Prosmokiwi es una empresa,de nacionalidad española con domicilio social C/Gran Via, 42, 25123 Torrefarrera, Lleida, amb CIF número ………….. e inscrita en el Registro Mercantil de Lleida, Tomo………., Sección…., Folio..... . Propiedad intelectual e industrial Todos los contenidos de la página (textos, fotografías, software, etc), son propiedad intelectual de y no podrán ser reproducidos, copiados, pegados, “linkados”, transmitidos, distribuidos o manipulados sin autorización prèvia y por escrito de Prosmokiwi, manteniendo en todo momento el “copyright” intacto y cualquier otro indicador de la propiedad intelectual de los materiales o contenidos. Todo uso o modificación del material o contenido para a una finalidad diferente a la autorizada en las Condiciones Generales será considerada una violación de les leyes internacionales del “copyright”, que protegen los derechos de autor. Protección de datos De acuerdo con la Ley Orgánica 15/1999, de 13 de diciembre, de Protección de Datos de Carácter Personal le informamos que, en caso que introduzca sus datos personales en nuestra página, los mismos serán usados, exclusivamente, para tramitar y responder a sus solicitudes. Los datos personales aportados voluntariamente por el usuario se conservarán en un fichero, la finalidad del mismo es hacer posible el envío de promociones comerciales que puedan resultar de su interés. El ejercicio de los derechos de acceso, rectificación, oposición y cancelación, regulados en el artículo 5 de la Ley Orgánica 15/199 de 13 de Diciembre de Protección de Datos de Carácter Personal, deberá comunicarse a la empresa mediante su página web: HYPERLINK "http://www.prosmokiwi.com" www.prosmokiwi.com. Por otra parte, y de acuerdo con lo establecido en la Ley 34/2002 de Servicios de la Información y de Comercio Electrónico, la dirección IP del usuario quedará registrada en otro fichero cuyo responsable es Prosmokiwi y cuya finalidad es el registro de las direcciones IP de los usuarios que acceden a la página. La citada dirección IP permanecerá registrada en este fichero durante un período de un año, según estipula la citada Ley en su artículo 12.



Introducción de enlaces El usuario que quiera introducir enlaces desde sus propias páginas web deberá cumplir los siguientes requisitos: El enlace únicamente vinculará con la home page o página principal pero no podrá reproducirla de ninguna forma. No se realizará desde la página que introduce el enlace ningún tipo de manifestación falsa, inexacta o incorrecta sobre Prosmokiwi, sus socios, empleados, clientes o sobre la calidad de los servicios que presta. Queda prohibido establecer frames o marcos de cualquier tipo que envuelvan a la página o permitan la visualización de sus contenidos a través de direcciones de internet distintas, y, en cualquier caso, esta prohibición incluye también que se visualicen conjuntamente con contenidos ajenos a la página de forma que: induzcan a error, confusión o engaño a los usuarios sobre la verdadera procedencia de contenidos, suponga acto de comparación o imitación desleal, o que resulte prohibido por la legislación vigente o atente contra los usos y costumbre que sean de general aceptación en internet. Sitios enlazados El HYPERLINK "http://www.prosmokiwi.com" www.prosmokiwi.com puede incluir dispositivos técnicos de enlace que permiten al usuario acceder a otras páginas. En estos casos, Prosmokiwi actúa como prestador de servicios de intermediación de conformidad con el artículo 17 de la Ley 34/2002, de 12 de julio, de Servicios de la Sociedad de la Información y el Comercio Electrónico y sólo será responsable de los contenidos y servicios suministrados en los sitios enlazados en la medida que tenga conocimiento efectivo de la ilicitud y no haya desactivado en enlace con la diligencia efectiva. Prosmokiwi no es conocedor de los contenidos y servicios de los Sitios enlazados, y por tanto, no se hace responsable de los daños producidos por la ilicitud, calidad, indisponibilidad, error de los mismos. Servicios de la empresa Prosmokiwi no garantiza que los distintos servicios detallados en esta página no queden interrumpidos por problemas técnicos, y no será responsable de los problemas que se pueda ocasionar al efecto. Prosmokiwi no será responsable de las consecuencias, daño o perjuicio que se deriven de la utilización de la información o acceso a la página. Prosmokiwi no garantiza que la información, texto, contenidos referidos en la web sean exactos. Aceptación de las condiciones generales El usuario se compromete a utilizar la página y los servicios detallados en ella de conformidad con los dispuesto en la Ley y estas Condiciones Generales, así como con la moral y buenas costumbres generalmente aceptadas y el orden público, respondiendo frente Prosmokiwi o terceros de cualesquiera daños y perjuicios que pudieran causarse como consecuencia del incumplimiento de dicha obligación.



Capítol 7 – Avaluació

Mètodes d’avaluació de l’usabilitat

Existeixen molts mètodes dedicats a l‟avaluació de la usabilitat, aquests, es poden

classificar de diverses maneres. En aquest apartat veurem com fer-ho amb criteris

pràctics i amb la finalitat de mostrar els mètodes més rellevants.

Un cop acabat un prototip o una versió definitiva del lloc Web i ens disposem a millorar-

lo, sense cap dubte, la millor inversió de temps i rendiment consisteix en introduir

millores en la seva usabilitat.

Per això, farem una avaluació del nostre lloc amb la finalitat de detectar errades o

aspectes susceptibles de millora pel que fa referència al seu ús. No existeix cap lloc

Web, que surti a la xarxa, que no es pugui millorar d‟alguna manera. Inclús no es

d‟estranyar, que després de successives avaluacions i redissenys encara quedin

aspectes per millorar. La perfecció es un mite, però tot i així, podem marcar la

diferència.

A continuació es descriuen una sèrie de mètodes d‟avaluació molt útils i fàcils d‟utilitzar:

Avaluació automàtica:

Consisteix en l‟utilització de software que detecta problemes elementals, com per

exemple:

Tamanys absoluts de fonts i de taules

Format dels textes

Tamany de les pàgines

Temps de descàrrega

Enllaços trencats

Es poden trobar diversos recursos disponibles d‟aquest tipus com:

Web mètrics tools



Doctor HTML

L‟avantatge principal d‟aquests programes, és la rapidesa, tot i que no detecta les

qüestions globals de la usabilitat, essent aquestes les més importants. Moltes de les

qüestions crucials només es poden detectar de forma “heurística” per un ésser humà

experimentat i després d‟un període prolongat d‟ús.

Avaluació guiada per directrius

Aquest altra forma d‟avaluació consisteix en considerar l‟adequació de les

característiques del lloc a partir d‟una llista de directrius o virtuts que ha de tenir un bon

lloc Web. Aquesta llista, no obstant, haurà de ser realitzada per persones amb un cert

grau d‟experiència sobre la usabilitat.

La llista més coneguda és la dels 10 heurístics de Nielsen [24], enumerats tot seguit a

títol il·lustratiu:

Visibilitat del estat del sistema

Aparellament entre el sistema i el món real

Control i llibertat de l‟usuari

Consistència i estàndards

Prevenció d‟errors

Reconeixement sobre record

Flexibilitat i eficiència d‟ús

Estètica i disseny minimalista

Ajudar a reconèixer, diagnosticar i solucionar errors

Ajuda i documentació

Com es pot observar, aquesta llista també es pot utilitzar com a guia de disseny.



Avaluació amb usuaris

Aquest mètode és el més complexe pel que fa referència a la preparació, realització i

anàlisi, però tot i això, és el que proporciona els resultats més valuosos. Bàsicament es

tracta de prendre una mostra de subjectes, de 5 a 10, i demanar-los-hi que realitzin

diverses tasques.

En qualsevol prova d‟usuari cal registrar sempre dos aspectes, el rendiment i la opinió

del subjecte. El rendiment s‟observa amb la consecució de tasques i pel que fa a

l‟opinió, les millors tècniques per conèixer-la són el pensament en veu alta i l‟ús d‟un

qüestionari o una entrevista post prova.

En aquesta entrevista, els usuaris, acostumen a ser sensibles a aquest tipus de

qüestions:

Tens clar l‟objectiu del lloc?

Creus que les etiquetes del menú són prou descriptives?

La navegació es fàcil?

Creus que el tipus de llenguatge es adequat al públic?

Un cop hem aconseguit els objectius que ens marquen aquests mètodes d‟usabilitat,

podem dir, que la nostra aplicació, Web o software en general, es usable.

Mètodes d’avaluació de l’accessibilitat

Quan es desenvolupa o re dissenya un lloc Web, l‟avaluació de l‟accessibilitat tan bon

punt es comença i al llarg del desenvolupament, ens permet trobar problemes

d‟accessibilitat quan aquests es poden resoldre amb més facilitat. Tècniques senzilles,

com per exemple, canviar la configuració del navegador, poden determinar si una

pàgina Web compleix les pautes d‟accessibilitat. Una avaluació exhaustiva, per tal de

determinar el compliment de les pautes, és molt més complexa.

Existeixen una sèrie d‟eines que ajuden a realitzar avaluacions d‟accessibilitat.



No obstant, cap d‟aquestes eines en si mateixa, pot determinar si un lloc compleix o no

les pautes d‟accessibilitat. Per tal de determinar-ho, al igual que en el cas de l‟avaluació

de la usabilitat, es necessària l‟avaluació humana.

El ja referenciat anteriorment W3C, ofereix a la seva pàgina el document “Avaluació

d‟Accessibilitat de llocs Web” que proporciona assessorament sobre les revisions

preliminars, utilitzant tècniques per a l‟avaluació de forma ràpida d‟alguns dels

problemes d‟accessibilitat que es poden presentar en un lloc Web. També proporciona

procediments generals i consells per a l‟avaluació i compliment de les pautes

d‟accessibilitat.



Capítol 8 – Planificació i gestió del risc

Identificació i gestió del risc

Abans d‟enfrontar-se a la realització d‟un projecte cal identificar els possibles riscs als

que aquest està sotmès.

Que és el risc?

Risc és la possibilitat de patir pèrdues.

La pèrdua descriu l‟impacte en el projecte, que pot resultar en la disminució de

qualitat del producte, increment de cost, retard o fallides.

Casos de risc:

o Risc del projecte:

Aquest tipus de risc és directament proporcional a la mida del producte.

Identifica problemes de pressupost, de planificació temporal, de personal, de

recursos, del client i dels requeriments.

o Riscs tècnics:

Identifiquen problemes de disseny, d‟implementació, d‟interfície, de verificació

i de manteniment.

o Riscs de negoci:

Aquest risc posa en perill la viabilitat del software a desenvolupar i posen en

perill el projecte o el producte, es divideix en:

Risc de mercat: representen la construcció d‟un producte excel·lent,

però que realment no vol ningú.

Risc de gestió: seria conseqüència de la pèrdua dels gestors com a

conseqüència d‟un canvi d‟objectiu o de personal.

Risc de pressupost: venen donats per pèrdues pressupostàries o de

personal.



Riscs que pot patir el nostre projecte:

o Risc del projecte:

Aquest és el risc més important al que ha estat exposat el projecte. És així,

degut a la falta d‟experiència tant a planificar projectes d„aquesta mida com

als llenguatges de programació utilitzats.

o Riscs tècnics:

És fan existents alhora del disseny de la interfície i de la forma d‟interacció

d‟aquest amb l‟usuari final, ja que no és tenia una idea molt definida.

o Riscs de negoci:

Aquest és un risc important a tenir en compte un cop entri en funcionament la

pàgina Web. Caldrà trobar la manera d‟introduir-se en el mercat per tal de

tirar endavant l‟objectiu principal, com és la venda de kiwis.

Planificació

La planificació d‟un projecte consisteix en realitzar una distribució anticipada de les

tasques a realitzar, detallant la durada de cadascuna de les tasques amb la seva data

d‟inici i de fi.

ID Tasca Durada (dies) Inici Fi

1 Recollida de requeriments 5 7/02/08 11/02/08

2 Planificació del projecte 4 19/02/08 22/02/08

3 Anàlisi de requeriments 5 3/03/08 7/03/08

4 Aprenentatge de les eines 3 15/03/08 17/03/08

5 Implementació i codificació 82 19/03/08 08/06/08

5.1 Fases de prova 5 04/06/08 08/06/08



6 Realització de la memòria 12 02/06/08 13/06/08

6.1 Realització del manual d‟usuari 1 13/06/08 13/06/08

111 dies

A continuació, es mostra el “Diagrama de Gannt” que correspon a aquesta planificació:

Figura 21. Diagrama de Gannt de les primeres quatre tasques.

Figura 22. Diagrama de Gannt de les quatre darreres tasques.

La barra del diagrama sobre la implementació i codificació obvia l'interval de temps més

llarg per tal de que el diagrama quedi més reduït.



Capítol 9 – Proves i validació del sistema

Introducció

Una de les parts més importants en el desenvolupament d‟un projecte software, és la

validació del sistema.

Aquesta validació es realitza mitjançant proves, que són un element crític per la garantia

de qualitat del software, i representa una revisió final en les fases d‟especificacions, de

disseny i de codificació.

L‟objectiu de les proves, és trobar errors, aquest és un fet fonamental per tal que les

proves tinguin èxit, així també com validar les especificacions i el rendiment del sistema.

L‟estratègia que s‟ha seguit per realitzar les proves en l‟aplicació es composa d‟un

seguit de proves que es comentaran en els següents apartats:

1. Proves d‟unitat.

2. Proves d‟integració.

3. Proves de validació.

4. Proves de sistema.

Proves d’unitat

Es verifica cada mòdul del sistema. S‟han executat tots els mòduls per veure si realment

tenen el comportament desitjat.

S‟han analitzat tots els camins independents, assegurant l‟execució de les sentències

de cada mòdul.

S‟ha provat l‟aplicació en situacions límit ja que el software normalment falla en

aquestes.

S‟han examinat les estructures de dades verificant que en tot moment aquestes es

mantenen íntegres.



Proves d’integració

Tècnica sistemàtica per construir l‟estructura del programa, simultàniament es realitzen

proves per detectar errors amb la interacció.

Es tracta d‟una prova molt important, ja que pot succeir que mòduls de l‟aplicació tinguin

efectes negatius sobre altres, o que en la combinació de subfuncions no s‟obtingui la

funció principal que s‟espera.

Durant la implementació de l‟aplicació, la integració s‟ha realitzat de forma incremental,

provant per separat els mòduls i afegint-ne de nous a mesura que aquests estaven ben

construïts.

Proves de validació

Un cop finalitzada la integració de tot el sistema s‟han realitzat les proves de validació.

La validació consisteix en comprovar que l‟aplicació funciona d‟acord amb el que s‟havia

especificat en els requeriments.

Aquesta prova s‟ha dut a terme amb tres usuaris de característiques i coneixements

informàtics diferents. Els resultats han estat satisfactoris.

Proves de sistema

Aquesta està formada per varies proves:

Prova de recuperació: S‟ha forçat la caiguda del sistema i s‟ha avaluat la seva

recuperació, obtenint un bon resultat.

Prova de resistència: Avaluació del comportament del sistema en situacions extremes i

anormals amb volums de dades molt elevats. La resposta de l‟aplicació ha estat

satisfactòria.

Prova de rendiment: Aquesta prova està dissenyada per a provar el rendiment del

software en temps d‟execució dins d‟un sistema integrat.



L‟aplicació ha estat provada en diferents sistemes i navegadors, obtenint uns resultats

satisfactoris.



Capítol 10 – Conclusions i ampliacions

Conclusions

Un cop finalitzat el projecte s‟han pogut extreure les següents conclusions:

La pàgina Web aconsegueix transmetre al usuari senzillesa i confiança, essent el seu

ús fàcil, usable, i segur.

L‟usuari pot comprar kiwis, tot seleccionant el nombre de kilograms i el calibre, a un

preu per sota del establert en el mercat. Satisfent així, l‟objectiu principal de la pàgina.

Tot i que des d‟un principi el disseny del lloc ha estat el punt més conflictiu, finalment,

s‟ha dissenyat un entorn acollidor i atractiu per l‟usuari, amb una interfície molt intuïtiva.

Personalment haver realitzat aquest projecte m‟omple de satisfacció, no només per

haver fet així el projecte de final de carrera sinó també, per haver contribuït en el negoci

familiar, com és la producció i venda de fruites.

Finalment, cal dir, que en el desenvolupament d‟aquest projecte s‟han ficat en pràctica

bona part dels coneixements adquirits durant la carrera, fent-me veure, que l‟esforç que

m‟ha suposat aquesta, no ha estat en va.

Ampliacions

Les ampliacions a realitzar a curt termini són, per una banda, la traducció de tota la Web

a diferents idiomes com el castellà, portuguès, i francès, i per l‟altra, implementar el

sistema de pagament amb targeta de crèdit.

Un cop acabat aquest projecte, les possibilitats de disseny en altres projectes similars

són molt més extenses, havent adquirit, en la realització d‟aquest, una experiència que

de ben segur em serà útil en un futur. De la mateixa manera, l‟increment de la destresa

en els llenguatges de programació utilitzats em permetran ampliar aquest projecte i fer-

ne d‟altres sense gran dificultat.



Bibliografia

[1] Nielsen, J. (1993). Usability Engineering. Academic Press Professional, Boston, MA

[2] Norman, D. (1990). The design of everyday things. Doubleday, Nueva York.

[3] International Standard (1998). ISO 9241-11. Guidance on usability.

http://www.usabilitynet.org/tools/r_international.htm#9241-11

[4] International Standard (2001). Software engineering – Product quality – Part 1

Quality model.

[5] Freeman, R.E. (1984). Strategic Management: A stakeholder approach. Pitman,

Boston.

[6] Nielsen, J.; Gilutz, S. (2003). Usability Return on Investment. Nielsen Norman Group.

Estudi disponible:

http://www.NNgroup.com/reports/roi

[7] Trenner, L.; Bawa, J. (1998). The Politics of Usability: a practical guide to designing

usable systems in industry. Springer Verlag.

[8] Donahue, G.M. (2001). Usability and the bottom line. IEEE Software, 18, 1, p.31-37.

[9] Mayhew, D. J.; Mantei, M. (1994). A basic Framework for Cost-justifying Usability

Engneering.

[10] Lund, A.M. (1997). Another approach to Justifying the cost of usability. ACM

Interactions, juny 1997.

[11] Nielsen, J. (2000). Design Web Usability: The Practice of Simplicity. New Riders

Publishing, Indianapolis.

[12] International Standard – Technical Specification – (2003). ISO/TS 16071.

Ergonomics of human-system interaction – Guidance on accessibility for human-

computer interfaces. Primera Edició 1-02-2003.

[13] Accessibilitat a la Web:

http://www.adicas.org/3/33/917/doc-1.htm



http://www.sidar.org

http://www.gencat.net/

[14] Test d‟accessibilitat. WCAG 1.0.

http://www.w3.org/TR/WCAG10

[15] Organitzacions relacionades amb el disseny per a tots o Disseny Universal:

http://www.design4all.org

http://is4all.ics.forth.gr

http://www.designforall.org

[16] The Center for Universal Design (1997). The Principles of Universal Design. Versió

2.0. Raleigh, NC: North Carolina State University. Fundació SIDAR

[17] Lorés, J. (2002). Introducción a la Interacción Persona – Ordenador. Associació

Interacción Persona – Ordenador AIPO.

[18] Model de Procés de la Enginyeria de la usabilitat y de la accessibilitat. MPIu+a.

http://griho.udl.es/mpiua/mpiua/modelo.htm

[19] Pàgina oficial del creador de PHP/FI. Rasmus Lerdorf.

http://lerdorf.com/bio.php

[20] Història del llenguatge PHP. Andi Gutmans i Zeev Zuraski (1997).

mx.php.net/history

[21] Inicis del SQL. Donald Chamberlin.

http://www.almaden.ibm.com/cs/people/chamberlin/

[22] GNU/GPL. Llicències GPL.

http://www.gnu.org/licenses/licenses.es.html

[23] Protocol de comunicació SSL.

http://www.iec.csic.es/CRIPTonOMICon/ssl.html

[24] Nielsen, J.; Mack, R.L. (1994). Usability Inspection Methods. John Wiley & Sons,

New York, NY.



Agraïments

En primer lloc vull agrair a la meva família tot el suport tan moral com econòmic que

m‟han donat durant aquests cinc anys.

També vull agrair a la Cris i al David les seves ajudes morals i a en Marc i l‟Alex les

ajudes de caràcter tècnic.

Per últim també donar les gràcies a la meva directora de projecte, Montserrat Serra.

Firma del autor:



Annex – Manual d’usuari



Benvinguts a l’ajuda de l’aplicació

Prosmokiwi és una pàgina Web dedicada a la venda de kiwis online.

Per a efectuar una compra, cal seguir els següents passos:

Registrar-se

Cal clicar al enllaç de la pàgina principal i omplir el següent formulari correctament:

Figura 1. Formulari de registre.

Un cop registrat, i enviada la sol·licitud, entri com a client introduint el seu nom d'usuari i

contrasenya.

Elecció dels productes

Utilitzant els desplegables de la zona de productes de la pàgina principal, confeccioni

una llista de la compra.



Figura 2. Productes.

Els productes s‟afegiran al cistell situat a la part dreta de la pàgina. Tots els elements

del cistell es poden eliminar de forma individual clicant l‟icona en forma de paperera.

Figura 3. Cistell de l‟usuari.



Finalitzi la compra

Clicant a l‟enllaç “Finalitzar compra” de la figura anterior s‟accedeix a una nova pàgina

on es mostra la compra realitzada, tenint en compte l‟Iva i el transport, així com l‟import

final. El transport és gratuït amb una compra igual o superior a 100€.

Des d‟aquesta mateixa pàgina cal seleccionar el sistema de pagament: a contra

reemborsament, amb transferència bancària o bé amb targeta de crèdit.

Figura 4. Compra realitzada i sistema de pagament.

Rebre els productes

Un cop finalitzada la compra, l'empresa es ficarà en contacte amb vostè per tal de

verificar les dades d'enviament. Finalment, rebrà els productes en el seu domicili.

Panell de l‟usuari

Un cop entri al sistema, aquest li donarà la benvinguda. Des del mateix mòdul podrà

canviar les seves dades, així com el nom d‟usuari i la seva contrasenya.

També podrà tancar la sessió un cop acabi la seva visita.



Figura 5. Panell de l‟usuari.

A la pàgina de Prosmokiwi trobarà informació sobre l‟empresa, imatges de la finca,

receptes de cuina i enllaços interessants a altres pàgines.

També pot recomanar la pàgina a un altre usuari o contactar amb l‟empresa mitjançant

un formulari de contacte.

Si l‟usuari perd la seva contrasenya pot recuperar-la clicant a l‟enllaç “login perdut?” de

la pàgina principal.

Li donem la més cordial Benvinguda a la pàgina de Prosmokiwi, el kiwi més fresc i més

econòmic.

venda de kiwis online · cara al comprador final. en el caso de la fruta, el cliente acaba...

Documents