Está en la página 1de 64

UniversidadPolitcnicadeValencia

EscuelaTcnicaSuperiordeIngenieraInformtica

Memoriadelproyectofinaldecarrera:

DISEOEIMPLEMENTACINDEUNA
TIENDAVIRTUAL

Alumno:AntonioMacianRuiz
Director:SergioSaezBarona

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina2de64

INDICE
1.Introduccin.......................................................................................................................5
2.Especificacinderequisitos ........................................................................................7
2.1.Introduccin................................................................................................................7
2.1.1.Propsito ...............................................................................................................7
2.1.2.mbito ....................................................................................................................7
2.1.3.Definiciones,acrnimosyabreviaturas...................................................8
2.1.4.Referencias ...........................................................................................................9
2.2.Descripcingeneral .................................................................................................9
2.2.1.Perspectivaelproducto...................................................................................9
2.2.2Funcionesdelproducto ...................................................................................10
2.2.3.Caractersticasdelusuario...........................................................................12
2.2.4.Restriccionesgenerales..................................................................................12
2.3.Requerimientosespecficos .................................................................................13
2.3.1.Requerimientosfuncionales.........................................................................13
2.3.1.1.Clienteannimo..........................................................................................13
2.3.1.2.Clienteregistrado ......................................................................................15
2.3.1.3.EmpleadodelaTiendaVirtual ............................................................15
2.3.2.Requerimientosdeinterfacesexternos ...................................................17
2.3.2.1.Interfazdeusuario....................................................................................17
2.3.2.2.InterfazHardware ....................................................................................17
2.3.2.3.InterfazSoftware.......................................................................................18
2.3.2.4.Interfacesdecomunicaciones ..............................................................18
2.3.3Requerimientosdeeficiencia........................................................................18
2.3.4.Obligacionesdediseo ...................................................................................19
2.3.4.1.Estndarescumplidos..............................................................................19
2.3.4.2.LimitacionesHardware ..........................................................................20
2.3.5.Atributos...............................................................................................................20
2.3.5.1.Seguridad ......................................................................................................20
2.3.5.2.Facilidadesdemantenimiento.............................................................21
2.3.6.Otrosrequerimientos ......................................................................................21

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina3de64

2.3.6.1.Basededatos ...............................................................................................21
3.Anlisis ................................................................................................................................22
3.1.DiagramaUML .........................................................................................................22
3.2.Casosdeuso................................................................................................................24
3.3.Diagramasdesecuencia .......................................................................................24
4.Diseo ..................................................................................................................................27
4.1.Niveldeinterfaz .......................................................................................................28
4.1.1.Diagramasdenavegabilidad.......................................................................30
4.1.1.1.Usuarioannimo/navegabilidad........................................................30
4.1.1.2.EmpleadodelaTiendaVirtual ............................................................39
4.2.Nivellgico .................................................................................................................31
4.3.Niveldepersistencia...............................................................................................32
4.3.1.DiseoEntidadRelacin ...............................................................................32
4.3.2.Diseolgico.......................................................................................................33
5.Implementacineintegracin..................................................................................35
5.1.Tecnologas.................................................................................................................35
5.2.Herramientas.............................................................................................................37
5.3.Detallesdelaimplementacin...........................................................................39
5.3.1.Perfilesdeusuario ............................................................................................39
5.3.2.Autenticacindelosusuarios......................................................................39
6.Evaluacinypruebas....................................................................................................41
6.1.Evaluacin .................................................................................................................... 41
6.2.Pruebas.........................................................................................................................41
6.2.1.ValidacinXHTMLyCSS................................................................................42
6.2.2.Comprobacindeenlacesrotos..................................................................43
6.2.3.Comprobacinderesolucin .......................................................................44
7.Conclusiones......................................................................................................................46
Biografa..................................................................................................................................47
AnexoA.Casosdeuso ........................................................................................................48
AnexoB.DescripcindeTecnologas..........................................................................56
B.1.XHTML..........................................................................................................................56

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina4de64

B.2.HTTPylaarquitecturaClienteServidor ......................................................57
B.3.PHP ................................................................................................................................60
B.4.CSS(Hojasdeestilo)...............................................................................................62
B.5.MacOSX......................................................................................................................63
B.6.Apache..........................................................................................................................64
B.7.MySQL...........................................................................................................................64

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina5de64

1.INTRODUCCION
El Diseo y la Implementacin de una Tienda Virtual tiene como
resultado una aplicacin Web desde la cual, una empresa pueda
ampliar sus ventas mediante el comercio electrnico de manera fcil,
rpidaysencilla.
De esta manera, se facilita a los clientes la opcin de realizar sus
compras sin salir de casa o simplemente, visualizar los artculos
disponibles o consultar el estado de algn pedido realizado
anteriormente.
Por otra parte el personal autorizado (empleados de la tienda) podr
realizar acciones como el modificado de los pedidos realizados
medianteestava,lainsercindenuevostemsenlabasededatosola
correccindelosdatoserrneosquepuedanaparecerenelregistrode
algncliente.
Motivaciones
ElmotivoprincipalporelcualhedecididoimplementaresteProyecto
FinaldeCarrerahasidoadentrarmeenlamedidadeloposibleenun
sector que esta cada vez mas en auge como es el del comercio
electrnico, adems de adquirir los conocimientos necesarios para
programar en un lenguaje orientado a paginas Web, que me permita
sermascompetentealahoradeenfrentarmealmercadolaboraluna
vezfinalizadalacarrera.
En cuanto a la programacin se refiere, pese a haber hecho algn
trabajoanteriorenPHPpodradecirseque,eslaprimeravezqueme
enfrentoaunaaplicacinrealenestelenguaje,ademsdehabertenido
laoportunidaddetrabajarconplantillasCSSquehastaelmomentoera
algo totalmente desconocido para mi. Por ultimo, el haber creado la
basededatosenMySQLmehapermitidomasconocermasafondoel
funcionamientodeestesistemadegestindebasesdedatos
Lamezcladelasnocionesquepreviamenteteniaenestastecnologas
comentadas anteriormente y el motivacin por ir aprendiendo cada
vez mas acerca de las mismas, ha generado a lo largo de todo el
proyecto un inters y una motivacin a cada paso que iba
descubriendonuevasposibilidadesyformasdetrabajo.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina6de64

Elplanteamientotcnico
Tras decidir que la Tienda Virtual iba a ser una Web de artculos de
ropa para chico y echar un vistazo a las paginas Web de ropa que
podramos considerar mas importantes (grupo Inditex , Pull & Bear,
Zara, ) y de una tienda que personalmente me gusta a mi
(Abercrombie&Fitch,delacualhetomadolasimgenesqueformaran
laTiendaVirtual),hetomadoladecisinqueloscoloresqueformarn
laTiendavanasertonalidadesfrascomosonelgrisyelazul.
Habiendo realizado un curso en Edinburgh Napier University sobre
comointeractanlasnuevastecnologasysudiseosobreelusuarioy
conociendo que un portal Web eficaz es un portal que centraliza la
informacinysimplificaalmximolastareasarealizarporelusuario,
he intentado llevar al cabo dichos conocimientos creando un interfaz
agradable al aspecto visual y evitando la informacin extra que
desve la atencin del clientey el motivo por el cual ha entrado en la
TiendaVirtual.
Gracias a que la informacin en el frame principal es informacin
flotantequevaradependiendodeltamaodelaventanadelusuarioy
dequelosmensnotienenuntamaofijosinoquetambindependen
deltamaodelaventana,hacendeestapaginaunapaginacompatible
contodoslosnavegadores.
El tema de la publicidad en las paginas Web, no menos importante,
tampoco se ha dejado de lado habiendo creado en la parte superior
central un espacio dedicado por si en un futuro alguna empresa
decidieradarseaconoceratravsdenuestraTiendaVirtualmediante
unBanner.
Tambin he tenido en cuenta el tamao de las imgenes creando en
lugardeimgenesdetamaograndeyfijo,otrasmaspequeasquese
van repitiendo a lo largo de la pagina dependiendo de la informacin
queseestmostrandoencadamomento.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina7de64

2.ESPECIFICACIONDEREQUISITOS
2.1.Introduccin
2.1.1.Propsito
El propsito del siguiente apartado va a consistir en la especificacin
de requerimientos para el portal Web de la Tienda Virtual. Esta
especificacinsertilparaestablecerunosprerrequisitosyunabase
sobrelaqueempezaruntrabajoderealizacin,ascomounafuentede
informacin para cualquiera que desee conocer mas acerca de este
proyecto.

2.1.2.mbito
LaTiendaVirtual(enadelantesimplementeTV)vaaconsistirenun
interfazWebdinmicaquepermitaporunaparte,alosclientesdeesta
empresaaconsultarelcatalogoderopacadatemporadaascomosus
ofertasynovedadesy,porotraparte,alpersonaldelatiendamediante
unaintranet,agestionarlabasededatostantoparalamodificacinde
losartculosamostrarenlaTVcomoparalagestindelosdatosdelos
clientesquepuedenaccederalamisma.
De esta manera, cualquier usuario podr mantenerse informado de
todos los artculos disponibles que ofrece la tienda cada temporada.
Adems,paraaquellosusuariosqueaslodeseen,medianteunregistro
muy sencillo podrn realizar sus compras desde cual quier terminal
conectadoInternetsinlanecesidaddedesplazarsefsicamentehastala
TV.
Otra de las funciones que ofrece este interfaz es la de permitir al
personal de la TV la gestin de la base de datos de la forma mas
sencilla posible. Gracias a un buscador, el empleado puede encontrar
rpidamente al cliente sobre el cual desee hacer modificaciones.
Ademsexistelaposibilidaddeinsertarartculosnuevosenlabasede
datos.
Porultimo,mencionartambinqueunavezrealizadaslascompraspor
losusuarios,estospodrnvisualizarentodomomentoelestadoenel
cualseencuentransuspedidos.Estosestadossernmodificadosporel
personaldelaTVdesdeunadelasopcionesdesuintranet.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina8de64

2.1.3.Definiciones,acrnimosyabreviaturas
TV:AbreviaturadeTiendaVirtual
Web: La World Wide Web (del ingles, Telaraa Mundial), la Web o
WWW,esunsistemahipertextoquefuncionasobreInternet.Paraver
la informacin se utiliza una aplicacin llamada navegador Web para
extraerelementosdeinformacin(llamadosdocumentosopaginas
Web)delosservidoresWeb(ositios)ymostrarlosenlapantalladel
usuario.
Web dinmica: Existen dos tipos de pginas Web, de contenido
esttico(HTML)ydecontenidodinmicoquesegeneranapartirdelo
que el usuario introduce en un Web o formulario y que utiliza el
servidorparaconstruirunaWebpersonalizadaqueenvaalcliente.
MySQL: MySQL es el servidor de datos relacionales mas popular,
desarrollado y proporcionado por MySQL AB. MySQL AB es una
empresa cuyo negocio consiste en proporcionar servicios en torno al
servidor de bases de datos MySQL. Una de las razones para el rpido
crecimientodepopularidaddeMySQL,esquesetratadeunproducto
OpenSource,yportanto,vadelamanoconestemovimiento.
HTML:AcrnimoinglesdeHyperTextMarkupLanguage(lenguajede
marcacin de hipertexto), es un lenguaje informtico diseado para
estructurar textos y presentarlos en forma de hipertexto, que es el
formatoestndardelaspginasWeb.
CSS:Lashojasdeestiloencascada(CascadingStyleSheets,CSS)sonun
lenguajeformaldeordenadorusadoparadefinirlapresentacindeun
documento estructurado escrito en HTML o XML (y por extensin
XHTML). La W3C (World Wide Web Consortium) es la encargada de
formularlaespecificacindelashojasdeestiloqueservirdeestndar
paralosagentesdeusuarioonavegadores.
XHTML: Es el lenguaje de marcacin pensado para sustituir a HTML
como estndar para las paginas Web. XHTML es la versin XML de
HTML,porloquetiene,bsicamente,lasmismasfuncionalidades,pero
cumple las especificaciones, mas estrictas, de XML. Su objetivo es
avanzarenelproyectodelWorldWideWebConsortiumdelograruna
Websemntica,dondelainformacin,ylaformadepresentarlaestn
claramenteseparadas.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina9de64

W3C:ElWorldWideWebConsortium(ConsorciodelaWeboTelaraa
Mundial), abreviadamente W3C, es una organizacin que produce
estndaresparalaTelaraaMundialoWorldWideWeb.
PHP: Acrnimo de PHP: Hypertext Processor. Es un lenguaje de
programacindescripts,concebidoeneltercertrimestrede1994por
Rasmus Lerdorf. Se utiliza principalmente para la programacin de
GGIsparapaginasWeb,destacaporsucapacidaddeserembebidoen
elcdigoHTML.
HTTP:EselprotocolodelaWeb(WWW),usadoencadatransaccin.
LasletrassignificanHyperTextTransferProtocol,esdecir,protocolo
detransferenciahipertexto.
Usuario/Cliente:Sellamarusuariooclienteacualquierpersonaque
accedaalportal,yaseaunnaveganteannimoounclienteregistrado
enlabasededatosdelaTV.
Empleado:Sellamarempleadoatodoaquelquepertenezcaoforme
parte de la empresa (TV) y por tanto tenga acceso autorizado a la
intranet.

2.1.4.Referencias
Las referencias utilizadas para la realizar este proyecto son las
siguientes
IEEE Recommended Practice for Software Requirements
Specifications,IEEEStd8301998.
ForosdelWeb:http://www.forosdelweb.com
Wikipedialaenciclopedialibre:http://es.wikipedia.org
ManualdePHP:http://php.net/index.php
EspecificacionesdeXHTML1.0http://www.w3c.org/TR/xhtml1
EspecificacionesdeCSS2.1:http://www.w3c.org/TR/CSS21
Mamp:Mac,Apache,MySQL,PHP:http://www.mamp.info

2.2.Descripcingeneral
2.2.1.Perspectivadelproducto

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina10de64

El lenguaje utilizado para implementar la tienda virtual es PHP que


comobienhemosmencionadoantes,nospermitirlacreacindeuna
paginaWebdinmica.Porotraparte,elsistemadegestindebasesde
datosquecontendrtodalainformacinnecesariaparasermostrada
enlapaginaWebesMySQL.
Unavezdecididoesto,necesitamosunservidorWebquenospermita
ejecutarelcdigoenPHPalavezquenospermitaaccederalabasede
datosMySQL.ElservidorWebutilizadoesApache.
Con todo esto y aadiendo que el sistema operativo utilizado para la
programacin de la TV y la ejecucin de su cdigo es Mac OS X,
usaremosMAMPparalaejecucindelamisma.MAMPeselacrnimo
de Mac OS X, Apache, MySQL y PHP. Esta plataforma Web de cdigo
abiertoconstruidaparaMac,eslasolucinperfectaparaestatareaya
queesuntodoenuno.
LonicoquenosfaltaahoraparapoderejecutarlaTVeirefectuando
pruebas para corregir el cdigo en caso que fuera necesario, es un
navegador Web o explorador. Esta pagina ha sido diseada para que
no presente cambio alguno respecto de un navegador a otro (Mozilla
Firefox,InternetExplorer,Safari,).
La informacin que contiene la pagina, tambin est diseada de
maneraque,conunaresolucinnormaloalta(apartirde800x600)
sea mostrada toda la pagina sin la necesidad de que el usuario tenga
quedesplazarsedearribahaciaabajoy/odeizquierdaaderechasalvo
cuandolarespuestaaunaconsultaalabasededatosseatanextensa
quenecesitemasespacioparaserlistada.
El protocolo utilizado para la transmisin de datos entre redes de
computadoras es el protocolo TCP/IP. Adems, el protocolo http ser
elquenospermitaelaccesoalapaginaWeb.

2.2.2.Funcionesdelproducto
LasfuncionesquevaarealizarlaTVsonlassiguientes:
Consultassobrelacoleccin
Consultasegncategora.
Consultadelosdetallesdeunarticulo.
Consultadenovedades.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina11de64

Consultadelcarrito.

Modificacindelcarrito.
Aadirarticuloalcarrito.
Eliminararticulodelcarrito.
Modificarcantidadenelcarrito.

Tratamientodeusuarios.
Insertarclienteenlabasededatos.
Modificardatosdelclienteenlabasededatos.
Mostrarinformacinparaempleados.

Modificacindelacoleccin.
Insertararticuloenlabasededatos.

Operacionessobrelospedidos.
Bsquedadepedidosporcliente.
Modificacindelestadodeunpedido.
Insertarpedidoenlabasededatos.

Tratamientosobreusuarios
Mostrarinformacindelosusuarios.
Mostrarinformacindelosempleados.

Iniciodesesincomousuario/empleadoautentificado.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina12de64

2.2.3.Caractersticasdelusuario.
VamosasepararlosusuariosdelaTVentresgrupos:clienteannimo,
clienteregistradoyempleadodelaTV.
El cliente annimo ser un usuario que simplemente desee realizar
consultas sobre el catalogo o los precios y no se haya registrado
todavacomocliente.Peseanohaberseregistrado,aesteusuariosele
permitir aadir artculos al carrito para que se vaya familiarizando
conlapaginayselefacilitealmximolatareaderealizarsucompra.
Unavezdecidaregistrarsecomoclienteregistrado,todoslosartculos
aadidosalcarritopreviamentepermanecernahparapoderfinalizar
lacompradirectamente.
El cliente registrado es un usuario que anteriormente ha introducido
sus datos como cliente de la TV y ya cuenta con un cdigo y una
contraseapararegistrarse.Esteclienteversunombreenelcuadro
de la izquierda con la informacin actualizada de su carrito. Adems
tendr la opcin de visualizar sus pedidos anteriores y el estado de
estos.tambin,siaslodesea,podrfinalizarsucomprapasandopor
cajayrealizaraselpedidodelosartculosseleccionados.
El empleado registrado tendr acceso a la intranet de la TV para
realizarlasoperacionesygestionesqueestafacilita.

2.2.4.Restriccionesgenerales.
Comorestriccingeneral,mencionarquelaposibilidaddemodificarla
basededatosporpartedelpersonaldelaTVesunamodificacinde
nivelbsico.Comonicamodificacin,elempleadopodrmodificarel
contenidodelabasededatosperonuncasuestructura.
Esta modificacin, en caso de ser necesario, ser llevada a cabo por
parte del administrador de la base de datos ya que, en caso de
modificarse la estructura, se necesitar tambin una pequea
modificacinenelsoftwaredelaTV.
Otra cosa a tener en cuenta es la posibilidad de que haya una gran
afluenciadeusuariosenlaTValmismotiempo.Esteproblemapodra
causar una saturacin del servidor as como lentitud en el
funcionamiento de la pagina. Estos problemas podran solucionarse
simplemente aumentando la potencia del servidor con nuevo

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina13de64

hardware, aplicando tcnicas de trabajo distribuido, o construyendo


unclusterdeservidores.
Lavelocidaddelanchodebandadelquedisponeelservidortambin
puedeserunproblemaatenerencuentayaque,puedeconvertirseen
elprincipalcuellodebotella.Portanto,estaeleccinnodebeobviarse
comosencillayrealizarsecorrectamente.
tambindebeexistirunapolticadeseguridadadecuadaentodalaTV.
LosaccesosincorrectosapaginasdelaTVsinhaberseregistradoesun
problema que hay que evitar. tambin tendremos en cuenta la
seguridad dentro del servidor instalando cortafuegos, antivirus,
cuentas de usuario, permisos, etc., adems de realizar copias de
seguridadperidicamente.

2.3.Requerimientosespecficos
2.3.1.Requerimientosfuncionales
2.3.1.1.Clienteannimo
Consultasegncategora.
Este tipo de consulta consiste en una consulta SQL que retorna todas
las diferentes categoras de la base de datos. Estas categoras
aparecern en el submen de la TV desde el cual, el cliente podr
seleccionarlaquedeseeyassernmostradostodosycadaunodelos
artculospertenecientesaesacategora.
Consultadelosdetallesdeunarticulo.
Con esta consulta, el cliente o usuario annimo podr ver una
informacinmasdetalladaacercadelarticuloquedesee.Pinchandoen
lafotografadelarticuloquesedesee,estaccindevolverunnumero
dereferenciamedianteelcual,unaconsultaSQLseleccionartodoslos
detallesdelarticuloconesareferenciaysernmostrados.
Consultadenovedades.
A esta consulta se puede acceder mediante dos vas. La primera es
desdelapaginaprincipal,unavezseabrelapaginadeiniciodelaTV
aparecen todos los artculos referenciados en la base de datos como
novedad (Novedad = 0). La segunda forma de ver las novedades es

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina14de64

pinchando en la pestaa Novedades del men que realiza la misma


opcin.
Consultadelcarrito.
El cliente podr consultar en todo momento y se encuentre donde se
encuentrelosartculosquehaseleccionadoparasercomprados.Desde
el marco situado en la izquierda de la pagina en el que aparece el
resumendelcarrito,pinchandoenelbotnVerEditar,seacceder
a la pantalla que muestra la tabla con todos los artculos aadidos al
carrito.
Aadirarticuloalcarrito.
Cualquier usuario que entre a la pagina podr aadir artculos en el
carrito.Cuandoseabrelapaginasecreaautomticamenteunavariable
sesin que ser la que contendr los artculos que el cliente desee
adquirir. Estos artculos se aaden simplemente desde la pantalla de
losdetallesdelproductopinchandoenelbotnAadiracarrito.
Eliminararticulodelcarrito.
Desdelapaginadedetallesdelcarrito,elclientepuedeeliminartodos
losartculosquedesee.Latablaquemuestralosartculosquehayenel
carrito, dispone de la columna borrar con un checkbox para cada
artculo.Seleccionandoelquesedeseeeliminaryhaciendoclicksobre
el botn Actualizar, se eliminarn todos los artculos marcados
borrndolosdelavariablesesin.
Modificarcantidadenelcarrito.
Deigualmaneraqueexistelacolumnaborrarenlatablaqmuestralos
artculos del carrito, est la columna cantidad que contiene un
textbox para cada articulo indicando el numero de unidades que se
deseacomprar.Independientementedelavariablesesinquecontiene
los artculos, existe otra variable con las cantidades que, en caso de
querer modificarse, el cliente tendr que modificar el numero de
cantidad que desea y pinchar sobre el botn Actualizar para
modificarlasdefinitivamente.
Insertarclienteenlabasededatos.
Estafuncinlatendrquerealizartodousuarioquedeseerealizaruna
compra en la TV y no la haya realizado previamente. Mediante un
formulariosencillo,elclientenoregistradorellenartodosloscampos
necesarios con sus datos personales. Una vez cumplimentado este

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina15de64

paso,pincharelbotnEnviardatosquegenerarunaconsultainsert
enSQLqueinsertarlosdatosdelclienteenlatablaclientesdelabase
de datos. En caso de dejarse algn campo por rellenar, el sistema
generar un error visual para el cliente que tendr que rellenarlo de
nuevo.

2.3.1.2.Clienteregistrado
Cualquiera de lasfuncionesmencionadas anteriormente para clientes
annimos,tambinpodrnserrealizadasporclientesregistrados.
Insertarpedidoenlabasededatos.
Unavezfinalizadalacompraporpartedelcliente,siempreycuandose
haya registrado, podr finalizar su pedido pasando por caja. Esta
opcingenerauninstertenlabasededatosqueintroducelosdatosen
dos tablas de la base de datos. Por una parte se introduce en la tabla
pedidoselpedidoconelcdigodelcliente,elestadoylafecha.Porotra
parte otro insert en SQL introduce el pedido detallado con cada
articulo y cantidad en la tabla detallepedidos. La columna pedido de
estatablaapuntaalacolumnapedidodelatablapedidos.
Mostrarinformacindelosusuarios.
TodousuarioqueseencuentreregistradoenlaTVversunombreen
el marco izquierdo con toda la informacin actualizada del carrito.
Adems,permitelaopcindedesconectarseentodomomento.
Iniciodesesincomousuarioautentificado.
Todo usuario que previamente se haya registrado en la TV, podr
identificarse introduciendo su dni y su contrasea. Esta funcin crea
unavariablesesin(dni)queserlaqueindiquequeeseusuarioest
autentificado.Comohemosmencionadoenelpuntoanterior,tambin
podr desconectarse mediante la opcin desconectar. Esta opcin
eliminalavariablesesindni.
Mostrarinformacindelosusuarios.
Unavezregistradoelusuario,estetendrlaopcindevisualizartodos
los pedidos realizados anteriormente as como el estado en el que
estos se encuentran. El empleado de la TV ser el encargado de
actualizaresteestado.

2.3.1.3.EmpleadodelaTV
Modificardatosdelclienteenlabasededatos.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina16de64

UnsencilloupdateenSQLpermitealosempleadosdelaTVmodificar
los datos de cualquier cliente. Tras ser mostrados en textboxes los
datos actuales que existen en la base de datos, el empleado podr
modificarlos como as se haya indicado. Para finalizar esta funcin,
deber pulsar el botn enviar datos que ejecutar esta consulta y
modificarlosdatos.
Mostrarinformacinparaempleados.
Unodelosprivilegiosdelosquedisponenlosempleadoseseldetener
accesoalaintranetdelaTV.Cuandoelempleadodeseeaccederaesta
intranet, deber introducir su dni y su contrasea. El sistema
comprobarqueesosdatosseencuentranenlatablaempleadosdela
basededatos.Encasoafirmativo,permitirlaentradadelempleadoa
dichoespacio.
Insertararticuloenlabasededatos.
Un sencillo formulario permite a los empleados registrados en la TV
dentro de su intranet agregar nuevos artculos en la base de datos.
Ademselempleadopodrsubirlaimagendedichoarticuloqueser
guardadaenlacarpetacorrespondiente.Uninsertguardartodaesta
informacinenunatupladelatablastockenlabasededatos.
Bsquedadepedidosporcliente.
Dentrodelaopcinquepermitecambiarelestadodelospedido,existe
unbuscadorparafacilitarestaopcinalempleado.Unaconsultaselect
enSQLbuscarelpedidoencuestinlomostrarenellistadoinferior.
El empleado podr buscarlo directamente en el listado o filtrarlo
medianteestebuscador.
Modificacindelestadodeunpedido.
Todos los pedidos realizados por clientes en la TV disponen de un
cdigo de estado (Realizndose, Enviado, Entregado/Finalizado).
Haciendo uso del buscador mencionado en el punto anterior, el
empleadoseleccionarelpedidoquedeseeolospedidosquedeseeen
el caso de que se vaya a realizar un envo con varios pedidos. Tras
modificar los textboxes que aparecen en la columna estado de cada
pedidoypulsarelbotnactualizar,semodificarnenlabasededatos
losestadosdelospedidosqueelempleadohayamodificado.
Mostrarinformacindelosempleados.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina17de64

Igual que ocurra con los clientes, el empleado registrado en la TV


podrversunombreenelmarcoqueexistealaizquierdadelaTVen
todomomento.
Iniciodesesincomoempleadoautentificado.
Todo empleado que desee acceder a la intranet deber introducir su
dni y su contrasea. Esta funcin crear una variable sesin
(empleado) que ser la que controle en todo momento que el
empleadoestregistradoyselepermiteelaccesoalaintranet.

2.3.2.Requerimientosdeinterfacesexternos
2.3.2.1.Interfazdelusuario
PuestoquelaTVesunatiendaonline,elaccesoalamismaserealiza
atravs de Internet. Para poder ser mostrado este interfaz Web del
portal es necesario un navegador Web que permita al usuario
conectarseconelservidor.EldiseodeestaWebserparatodoslos
usuarios el mismo y debera ser tambin el mismo para todos los
navegadores ya que el cdigo fuente de la misma se cie a los
estndaresestablecidosporelW3C.
Dentrodeundiseoquesemantendrparatodaslasfuncionesquela
TVpermite,serealizarntodaslasconsultasporpartedelusuario,ya
sea cliente o empleado. La nica parte de la Web que se ir
modificando ser el cuadro general en el que dependiendo de la
informacinamostrartendrunaspectouotro.Elrestosenosufrir
modificacinalguna.

2.3.2.2.InterfazHardware
Para acceder a la TV los usuarios nicamente necesitarn un
ordenador desde el cual, mediante una interfaz de red (Ethernet,
modemADLS,etc.)tenganaccesoalareddeInternet.
Este computador puede estar basado en cualquier arquitectura pero
deber disponer al menos de un procesador con capacidad suficiente
paraejecutarunnavegadorWebmoderno.Ademssernecesarioque
disponga de un interfaz grafico, tarjeta de video y monitor, con una
resolucinminimade800X600.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina18de64

2.3.2.3.InterfazSoftware
Cualquier usuario que desee conectarse a la TV no necesitar ningn
sistema operativo en concreto para poder acceder a ella. nicamente
bastarconunnavegadormodernoparapodervisualizarla.
Porotraparte,elservidorquehospedelaaplicacinestarbasadoen
ApacheconPHPyMySQL,disponiblesparadiversosoperativos:Linux,
Windows, Macintosh, etc. Por lo que se podr utilizar cualquiera de
estos.EnestecasoseutilizarMacOSX.

2.3.2.4.Interfacesdecomunicaciones
ExistendostiposdeconexinentrelosclientesyelservidordelaTV.
Los usuarios o clientes se conectarn a la TV mediante Internet. Esta
conexinlarealizarandesdesucasaodesdecualquierotrolugarcon
acceso a Internet pero en cualquier caso, desde fuera de la red local.
Los empleados, en cambio, adems de tener acceso al igual que los
clientes desde su hogar a travs de Internet, tambin podrn
conectarseatravsdelaredinternadelaTV.
Cabe mencionar que en cualquiera de los dos casos mencionados
anteriormente el mecanismo de comunicacin ser el mismo. Los
clientes y el portal tendrn conexiones TCP/IP y el protocolo para
comunicaralosnavegadoresconelservidorWebserelHTTP.

2.3.3.Requerimientosdeeficiencia
PuestoqueelfindeestaTVeslaventadeartculos,sepretendeesta
tenga un acceso simultaneo de varios clientes al mismo tiempo. El
servidor Apache en el que se alojar la TV tiene que ser capaz de
proporcionar un acceso concurrente a un numero considerable de
clientes. Desde el propio Apache se podr configurar este
comportamiento as como el numero mximo de conexiones
simultaneas que deseamos. El rendimiento de la TV podra verse
afectado directamente por el numero de clientes que se encuentren
conectadosalmismotiempo.
Porestemotivosedeseaasegurarunaccesooptimoencondicionesde
cargadelservidornormales.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina19de64

2.3.4.Obligacionesdediseo
2.3.4.1.Estndarescumplidos
LaTVhasidodiseadasiguiendoelestndarestablecidoporelWorld
WideWebConsortium(W3C).ElW3Cproducerecomendacionespara
eldiseoydesarrollodepaginasWeb,enestecasoXHTMLyCSS.
LasprincipalesventajasdelXHTMLsobreotrosformatosson:

Compatibilidadparcialconnavegadoresantiguos:lainformacin
sevisualiza,aunquesinformato.
Un mismo documento puede adoptar diseos radicalmente
distintos en diferentes aparatos, pudiendo incluso escogerse
entrevariosdiseosparaunmismomedio.
Facilidaddeedicindirectadelcdigoydemantenimiento.
Formato abierto, compatible con los nuevos estndares que
actualmente est desarrollando el W3C como recomendacin
parafuturosagentesdeusuarioonavegadores.
Los documentos escritos conforme a XHTML 1.0 pueden
potencialmente presentar mejor rendimiento en las actuales
herramientasWebqueaquellosescritosconformeaHTML.

Por otra parte, las hojas de estilo en cascada (CSS) nos permiten
separarlaestructuradelaTVdesupresentacin.Estainformacinla
separaremosdelcdigoXHTMLenunarchivo(estilo.css)aparte.
LasventajasdeutilizarCSSson:

Control centralizado de la presentacin de un sitio Web


completo con lo que se agiliza de forma considerable la
actualizacindelmismo.
Los navegadores permiten a los usuarios especificar su propia
hojadeestilolocalqueseraplicadaaunsitioWeb,conloque
aumenta considerablemente la accesibilidad. Por ejemplo,
personas con deficiencias visuales pueden configurar su propia
hojadeestiloparaaumentareltamaodeltextooremarcarms
losenlaces.
Unapginapuededisponerdediferenteshojasdeestilosegnel
dispositivo que la muestre o incluso a eleccin del usuario. Por

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina20de64

ejemplo, para ser impresa, mostrada en un dispositivo mvil, o


ser"leda"porunsintetizadordevoz.

EldocumentoHTMLensmismoesmsclarodeentenderyse
consiguereducirconsiderablementesutamao.

2.3.4.2.LimitacionesHardware
Para poder ejecutar la TV bastara con un sistema que al menos
contara con un procesador Intel Pentium IV y 256 MB de memoria
RAM.Desdeestetipodesistemahaciadelantepodraservirnoscomo
servidor pero, como hemos comentado anteriormente, queremos que
este servidor permita el acceso simultaneo a mltiples clientes sin
problema alguno. Para su implantacin final se utilizar un servidor
con un procesador Intel Core 2 Duo con al menos 1 GB de Memoria
RAM.
Adems del motor de este servidor, el nico requisito mas
imprescindibleparaestesistemaserunacontroladoraderedquenos
permita la conexin con Internet y por supuesto, una conexin
adecuada.
Elrestodelhardwarenoprecisardeunaconfiguracinespecialporlo
quesepondrelquemasseajustealpresupuesto.

2.3.5.Atributos
2.3.5.1.Seguridad
Enprimerlugar,ningnusuariopodraccederaningunapaginadela
TV sin haber pasado por el index o sin haberse registrado en las
paginas en las que as se necesite. Cuando un usuario entra por
primera vez en la TV se crean las variables necesarias para poder
avanzardentrodelapaginaporloqueunaccesodirectoaotranoser
permitido.Siunusuarioquisieraentrardentrodelaintranetponiendo
ladireccinenlabarradedireccionesseledenegarelacceso.
En segundo lugar, como en cualquier empresa, la informacin es
privilegiadayporlotantodebealmacenarsedeunaformasegura.La
informacin de los clientes se guardar en la base de datos y las
contraseasdeestostendrnunformatocifrado.Elpasoenlosqueel
usuariointroducelacontraseaenlaTVtambinseencuentracifrado.
Deestaformasehaintentadoreducirlosriesgosalmnimo.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina21de64

2.3.5.2.Facilidadesdemantenimiento
LasencillezenelmanejodelaTVpermitiralospropiosempleadosde
la tienda a llevar un mantenimiento bsico de la Web; gestin de
usuarios,modificacindelstock,etc
Sin embargo, la modificacin en el diseo de la Web o cualquier
modificacin en la estructura de la base de datos tendr que ser
llevadaacaboporeladministradordelportal.

2.3.6.Otrosrequerimientos.
2.3.6.1.Basededatos
LaTVutilizarunabasededatosenMySQL,lacualalmacenartodala
informacinreferentealcatalogo,alosusuarios,ytodalainformacin
delospedidosefectuadosporlosclientes.
Las consultas a la base de datos se realizarn por parte del servidor
WebmediantePHPysuAPIdeaccesoabasesdedatosMySQL.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina22de64

3.ANALISIS
3.1.DiagramaUML
Para entender mejor todas las funciones que se pueden realizar con
esta tienda virtual y los elementos y objetos de los cuales est
compuesta se han realizado los diagramas UML. A continuacin se
detallanbrevementelascaractersticasdelaaplicacinenbaseaeste
diagrama.
La Tienda Virtual como bien indica su nombre es la aplicacin en si,
entornoalacualserealizanlamayoradefunciones.ElEmpleadoyel
UsuariosernlasclasesqueinteractenconesteatravsdelStock.
Stock es una clase que contiene todos los elementos de los que se
compone la Tienda Virtual. Contiene un numero indefinido de
productos que son los que forman la clase Stock. Todas las consultas
realizadasporelUsuarioseharnaestaclase.
El Usuario ser el que lleve a cabo todas las funciones de bsqueda
sobreelStock.ExistendostiposdeUsuario;annimoyregistrado.En
baseaestetiposepermitirnciertosprivilegiosdentrodelaaplicacin
comoporejemplolarealizacindePedidos.
La accin de realizar Pedido solo ser permitida para el Usuario
registrado.Asuvez,secrearunDetallepedidoquecontendrtodala
informacinacercadelPedidorealizadoporelUsuario.
ElEmpleadodispondrdeotrotipodeprivilegiosyautoridadessobre
losUsuarios,PedidosyStock.Deestamanerasercapazdeinsertarun
nuevo elemento dentro del Stock, modificar el estado de un Pedido o
variosyactualizarlosdatosdelUsuarioencasodesernecesario.
Carritorepresentaunodelosmotoresprincipalesdelaaplicacin.Este
dispone de toda la informacin de la sesin del Usuario y de los
productos del Stock que finalmente se vayan a incluir dentro de los
Detallepedido.
Por ultimo mencionar que Tienda ser un elemento que almacenar
los datos de las tiendas fsicas que la Tienda Virtual tiene. Esta
informacinserelnombreyladireccindondeseencuentra.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina23de64

DiagramadeclasesUML

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina24de64

3.2.Casosdeuso
Para un entendimiento mas intuitivo de las acciones que se pueden
realizar, al menos las mas importantes, se adjunta una figura
resumiendodichasfunciones.

En el Anexo A se han adjuntado varios casos de uso con una


explicacinmasdetalladaycasosreales.

3.3.Diagramasdesecuencia
A continuacin se muestran varios ejemplos de interaccin con el
sistema representados mediante unos diagramas de secuencia que
reflejan a nivel de ejecucin los pasos que sigue la aplicacin para
llevaracabolasaccionesindicadasarribadecadaejemplo.Semuestra
unejemploparaelempleadoyotroparaelusuario

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina25de64

Aadirarticuloalabasededatos

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina26de64

Aadirarticuloalcarrito.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina27de64

4.DISEO
El diseo de la Tienda Virtual se ha basado en una arquitectura
multicapasdetrescapaslgicas(Figura4.1)
Niveldepresentacinodeinterfazdeusuario.
Nivellgicoodeaplicacin.
Niveldepersistencia.

Elniveldeinterfazestformadoportodoslosdocumentosqueenva
elservidorportalalnavegadoryquestepresentaalusuario,deforma
queleproporcionanlainformacinquehasolicitadoacercadelportal
ylepermiteinteractuarconelmismoatravsdeenlacesyformularios
El nivel de aplicacin o lgico est formado por un conjunto de
libreras que implementan las clases del dominio. Este nivel es el
encargadoderealizartodaslasoperacionesaniveldeaplicacin.
El nivel de persistencia lo forman la base de datos y el SGBD, los
encargados de almacenar toda la informacin del portal y permitir el
accesoalamismadeformacontroladaysegura.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina28de64

4.1.NiveldeInterfaz
En la siguiente imagen (Figura 4.1) se puede observar una imagen
generaldeldiseodelaTV.

Figura4.1

Como ya se coment al principio de este documento, el interfaz de


usuariohasidodiseadodetalmaneraqueresulteameno,intuitivoy
fcil de utilizar. De este modo, todas las paginas de la TV estn
compuestasporcuatrofasesdistinguiblesfcilmente:
Una cabecera en la que se muestra el logo y se deja un espacio
paraaadirpublicidad.
Un men horizontal desde el que se puede acceder a todas las
funciones de la pagina Web desde el que en determinadas
funciones,podrhaberunsubmen.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina29de64

La columna izquierda con la ventana del carrito en la que se


muestra una informacin resumida de el contenido actual del
carrito.
Laventanaprincipalenlaquesemuestratodalainformacinal
usuarioyserecogenlosdatosqueesteintroduzca
A continuacin (Figura 4.2) se muestran mas detalladamente estas
diferentespartes:
Cabecera

menhorizontal

ResumenCarrito

Ventanaprincipal

Figura4.2

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina30de64

4.1.1.Diagramasdenavegabilidad
Enestepunto,sevaaexplicarmasdetalladamentelaestructuradela
TVmostrandocomoaccederdesdecadapuntoacualquierpartedela
Web.Ademsseincluirnlosnombresdecadapaginaparadetallarde
unamaneramassencillalanavegacinposiblequetendrcadatipode
usuario.

4.1.1.1.Usuarioannimo/registrado.
Estatiendavirtualsehadiseadodetalmaneraqueenlaspaginasen
las que un usuario necesita estar registrado para ver informacin
privilegiada, tendr la opcin de registrarse en caso de no haberlo
hechoodeintroducirsusdatosdecliente.Portanto,entendemosque
no existe diferencia alguna entre la navegacin del usuario annimo
respecto del usuario registrado salvo para la pagina de FIN COMPRA
(Figura4.3).

4.1.1.2.EmpleadodelaTiendaVirtual.
Para el empleado, la navegacin ser la misma que para el usuario
salvo dos excepciones. En primer lugar ste no podr llegar hasta

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina31de64

finalizarcompraanoserqueseregistrecomousuario(casoenelque
dejara de ser empleado y pasara a ser usuario registrado). En
segundolugar,tendrelprivilegiodepoderaccederalmenIntranet
comosemuestraacontinuacin(Figura4.4).

4.2.Nivellgico
Elnivellgicoodeaplicacinconsisteenunaseriedelibreras,gracias
alascualeslaTVpuedefuncionar.Estaslibrerascontienentodaslas
clases necesarias para la ejecucin de la Web. Sus funciones son:
operaciones de calculo, comprobacin de condiciones y niveles de
acceso, generacin de peticiones a la base de datos, transformacin y
validacindedatos,etc.
Esteniveleselquenospermiteunatotalindependenciaentreelnivel
deinterfazyelniveldepersistencia(detalladoenelsiguientepunto).
Estoquieredecirqueseriaposiblerealizarmodificacionesenelnivel
de persistencia sin que el de interfaz se viera afectado. nicamente
habraquerealizarpequeoscambiosenelnivellgicoparaadaptarse
denuevoalnivelquetienepordebajo.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina32de64

4.3.Niveldepersistencia
Esteniveldepersistenciaodeaccesodedatosvaautilizarunabasede
datosrelacionalqueserlaquecontengatodalainformacindelaTV
(catalogoderopa,informacindeusuarios,pedidos,etc.).Paraelbuen
funcionamiento se utilizar una base de datos perfectamente
estructuradaydiseadaconunaseriedeentidadesrelacionadasentre
sideunamaneracoherenteyconunciertoniveldeeficiencia.
La base de datos inicial contena cuatro entidades: usuarios, pedidos,
stock y tiendas. Tras realizar el modelo EntidadRelacin y efectuar
varias pruebas de uso en la TV decid separar usuarios en dos
entidades diferentes (clientes y empleados) y aadir una nueva tabla
(detallepedidos) que seria la que contendra toda la informacin
detallada de los pedidos realizados. Esta tabla ser una entidad dbil
respecto de Pedido. Por tanto, finalmente la base de datos contendr
las siguientes seis entidades: clientes, detallepedidos, empleados,
pedidos,stockytiendas.
Por otra parte, todas las entidades contendrn sus atributos. Uno de
ellos ser la clave primaria para todas las entidades salvo para
detallepedidos que en este caso su clave primaria estar compuesta
pordosatributos.UnodeellosloheredardelatablaPedido.

4.3.1.DiseoEntidadRelacin

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina33de64

4.3.2.Diseolgico
clientes (NIF: varchar(15), Contrasenya: varchar(20), Nombre:
varchar(50), Apellidos: varchar(40), Direccion: varchar(60), Numero:
varchar(10), Puerta: varchar(10), Poblacion: varchar(30), Provincia:
varchar(20),CP:varchar(5),Telefono:varchar(9))
CP{NIF}
VNN {Contrasenya, Nombre, Apellidos, Direccion, Numero, Puerta,
Poblacion,Provincia,CP,Telefono}

pedidos (Pedido: int(10), Cliente: varchar(15), Terminado: int(1),


Fecha:date)
CP{Pedido}
VNN{Cliente}
CAj{Cliente}CLIENTES

detallepedidos (Pedido: int(10), Articulo: int(10), Codigop:


varchar(50), Descripcion: varchar(50), Cantidad: int(10), Talla:
varchar(50), Color: varchar(50), Total: varchar(50), Referencia:
varchar(50))
CP{Pedido,Articulo}
VNN{Codigop,Descripcion,Cantidad,Talla,Color,Total,Referencia}
CAj{Pedido}Pedidos
Caj{Codigop}Stock
CREATEASSERTIONtieneCHECKNOTEXISTS(
SELECT*FROMPedidoWHERENOTEXISTS(
SELECT*FROMDetallepedidosWHERE

Detallepedido.Pedido=Pedidos.Pedido))

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina34de64

stock (Codigo: int(10), Descripcion: varchar(50), PVD: decimal(19,2),


Listar:tinyint(1),Imagen:varchar(50),Novedad:tinyint(1),Categoria:
varchar(20),Color:varchar(20),Referencia:varchar(13)}
CP{Codigo}
VNN {Descripcion, PVD, Listar, Imagen, Novedad, Categoria, Color,
Referencia}

empleados (NIF: varchar(15), Contrasenya: varchar(20), Nombre:


varchar(50), Direccion: varchar(60), Poblacion: varchar(30),
Provincia:varchar(20),CP:varchar(5),Telefono:varchar(9))
CP{NIF}
VNN {Contrasenya, Nombre, Direccion, Poblacion, Provincia, CP,
Telefono}

tiendas (Nombre: varchar(50), Direccion: varchar(50), CP: int(5),


Poblacion:varchar(30),Telefono:int(9))
CP{Nombre}
VNN{Direccion,CP,Poblacion,Telefono}

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina35de64

5.IMPLEMENTACIONEINTEGRACION
5.1.Tecnologas
La TV se ha desarrollado utilizando la combinacin de tecnologas
MAMP. Este acrnimo se refiere al conjunto de programas software
que comnmente se utilizan para desarrollar sitios Web dinmicos
sobresistemasoperativosAppleMacintosh,MacOSX.
MacOSX:Sistemaoperativo.
Apache:ServidorWeb.
MySQL:SistemaGestordeBasesdeDatos.
PHP:LenguajedeprogramacinparasitiosWeb.
Enestecaso,delastecnologasanterioressolosehautilizadounade
ellasparaeldesarrollodelaTV.PHPhasidoellenguajeenelqueseha
desarrollado el portal Web. Las otras tres se considerarn como
tecnologas externas a la aplicacin y se describirn posteriormente
enelAnexoB.
XHTML
Es el lenguaje de marcado pensado para sustituir a HTML como
estndarparalaspginasWeb.Ensuversin1.0,XHTMLessolamente
la versin XML de HTML, por lo que tiene, bsicamente, las mismas
funcionalidades, pero cumple las especificaciones, ms estrictas, de
XML. Su objetivo es avanzar en el proyecto del World Wide Web
Consortium de lograr una Web semntica, donde la informacin, y la
forma de presentarla estn claramente separadas. La versin 1.1 es
similar, pero parte a la especificacin en mdulos. En sucesivas
versioneslaW3CplanearomperconlostagsclsicostradosdeHTML.
HTTP
ElprotocolodetransferenciadehipertextoHTTPeselprotocolousado
encadatransaccindelaWeb(WWW).HTTPfuedesarrolladoporel
consorcioW3CylaIETFydefinelasintaxisylasemnticaqueutilizan
loselementossoftwaredelaarquitecturaWeb(clientesyservidores)
paracomunicarse.
Esunprotocoloorientadoatransaccionesysigueelesquemapeticin
respuesta entre un cliente y un servidor. Al cliente que efecta la
peticin (un navegador) se lo conoce como "user agent" (agente del

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina36de64

usuario). A la informacin transmitida se la llama recurso y se la


identifica mediante un URL. Los recursos pueden ser archivos, el
resultadodelaejecucindeunprograma,unaconsultaaunabasede
datos,latraduccinautomticadeundocumento,etc.
ArquitecturaClienteServidor
Esta arquitectura consiste bsicamente en un cliente que realiza
peticiones a otro programa (el servidor) que le da respuesta. Aunque
estaideasepuedeaplicaraprogramasqueseejecutansobreunasola
computadora es ms ventajosa en un sistema operativo multiusuario
distribuidoatravsdeunareddecomputadoras.
En esta arquitectura la capacidad de proceso est repartida entre los
clientesylosservidores,aunquesonmsimportanteslasventajasde
tipo organizativo debidas a la centralizacin de la gestin de la
informacin y la separacin de responsabilidades, lo que facilita y
clarificaeldiseodelsistema.
PHP
Esunlenguajedeprogramacininterpretado,diseadooriginalmente
para la creacin de pginas Web dinmicas. Es usado principalmente
en interpretacin del lado del servidor (serverside scripting) pero
actualmente puede ser utilizado desde una interfaz de lnea de
comandos o en la creacin de otros tipos de programas incluyendo
aplicacionesconinterfazgrficausandolasbibliotecasQtoGTK+.
PHP es un acrnimo recursivo que significa PHP Hypertext Pre
processor.FuecreadooriginalmenteporRasmusLerdorfen1994;sin
embargo la implementacin principal de PHP es producida ahora por
ThePHPGroupysirvecomoelestndardefactoparaPHPalnohaber
una especificacin formal. Publicado bajo la PHP License, la Free
SoftwareFoundationconsideraestalicenciacomosoftwarelibre.
Graciasaestatecnologaorientadaaobjetossepuedenrealizartareas
en la aplicacin como por ejemplo mantener actualizado en todo
momento el carrito, acceder a la base de datos donde se encuentra
todalainformacindelaTV,validacindedatosporpartedeusuarioy
empleado,ymuchasfuncionesmas.
CSS
LashojasdeestiloencascadaCSSesunlenguajeusadoparadefinirla
presentacindeundocumentoestructuradoescritoenHTMLoXML(y
por extensin en XHTML). El W3C es el encargado de formular la

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina37de64

especificacindelashojasdeestiloqueservirndeestndarparalos
agentesdeusuarioonavegadores.
La idea que se encuentra detrs del desarrollo de CSS es separar la
estructuradeundocumentodesupresentacin.
La informacin de estilo puede ser adjuntada tanto como un
documentoseparadooenelmismodocumentoHTML.Enesteltimo
casopodrandefinirseestilosgeneralesenlacabeceradeldocumento
oencadaetiquetaparticularmedianteelatributo"style".Existentres
tiposdeestilos:hojadeestiloexterna,hojadeestilointernayestiloen
lnea.Paraestaaplicacinsehautilizadolahojadeestiloexterna
Estassonalgunasdelasventajasdeutilizarhojasdeestilo:

Control centralizado de la presentacin del sitio Web completo


con lo que se agiliza de forma considerable la actualizacin del
mismo.
Los Navegadores permiten a los usuarios especificar su propia
hoja de estilo local que ser aplicada a un sitio Web, con lo que
aumenta considerablemente la accesibilidad. Por ejemplo,
personas con deficiencias visuales pueden configurar su propia
hojadeestiloparaaumentareltamaodeltextooremarcarms
losenlaces.
Unapginapuededisponerdediferenteshojasdeestilosegnel
dispositivo que la muestre o incluso a eleccin del usuario. Por
ejemplo,paraserimpresa,mostradaenundispositivomvil,oser
"leda"porunsintetizadordevoz.
El documento HTML en s mismo es ms claro de entender y se
consigue reducir considerablemente su tamao (siempre y
cuandonoseutiliceestiloenlnea).

5.2.Herramientas
LaTVesunaaplicacinWebformadaporelportalWebenellenguaje
de programacin PHP y una base de datos relacional en MySQL
interconectadas entre si. Adems, recordar que ambas se encuentran
enunamaquinaconsistemaoperativoMacOSXyunservidorapache.
Unentornodedesarrollointegrado(IDEdesussiglaseningles)esun
programa compuesto por un conjunto de herramientas para el

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina38de64

programador.Losdocumentosdeloscualessecomponelaaplicacin
(HTML y scripts en PHP) se han desarrollado utilizando un IDE de
programacinllamadoKomodoEdit.
Komodo Edit es un editor de cdigo fuente bastante avanzado y
extensible. No solo se limita a proveer de las diversas herramientas
habitualesdeloseditorespopularesparaprogramadores,sinoqueva
mas all, proporcionando algunas de las utilidades tpicas de los
entornosdedesarrolloprofesionales.Adems,incorporaunsistemade
complementos o addons similar al que se conoce por el navegador
Firefox, que hace que todava se pueda disfrutar de diversas otras
utilidades que son de agradecer. podra decirse que es el hermano
menor de otra herramienta de la misma compaa llamada Komodo
IDE, con la diferencia de que esta es una herramienta comercial de
pago,condiversasposibilidadesmasavanzadasyqueKomodoEdites
unaversinlibreygratuita.
Las gestiones con la base de datos se han realizado con dos
aplicaciones distintas. La creacin de tablas y atributos as como
gestiones simples se han realizado con phpMyAdmin. Esta es una
herramienta escrita en PHP con la intencin de manejar la
administracindeMySQLatravsdepaginasWeb,utilizandoInternet.
Se pueden crear y eliminar Bases de Datos, crear, eliminar y alterar
tablas, borrar, editar y aadir campos, ejecutar cualquier sentencia
SQL,administrarclavesencampos,administrarprivilegiosyexportar
datos en varios formatos. Sin embargo, para introducir los datos que
compondrnestastablas,sehautilizadolaaplicacinSequelPro.Esta
aplicacin es libre para Mac OS X cuyo fin es la gestin de bases de
datos MySQL. Sequel Pro proporciona todo lo necesario para
conectarse a cualquier servidor MySQL ya sea local o remoto, una
infinidaddeopcionesalahoradeconsultar,insertaroeliminardatos,
soportesdevistas,ascomounagranlistadeposibilidades.
Por ultimo, y en cuanto a diseo se refiere, PhotoShop ha sido la
herramienta con la que se han diseado todas las fotografas que
formanlaestructuradelaTV.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina39de64

5.3.Detallesdelaimplementacin
5.3.1.Perfilesdeusuario
A continuacin se detallan cada uno de los perfiles de usuario que
utilizarnestaaplicacin.
Perfildeusuarioannimo
Esteperfileselquecualquierpersonapuedetomar.Laaplicacinseha
diseadodetalmaneraquecualquierpersonaqueaccedaaella,pueda
visitarla casi al completo y aadir los artculos al carrito que desee
comprar.
Se trata de que el usuario se familiarice con el entorno y no necesite
estarregistradoparapodervisualizarlosartculosniiradquirindolos
amedidaquelosvaviendo.Podrportanto,visualizarlacoleccinal
completo,generarconsultassobrealgnarticuloenconcreto,aadirlo
al carrito, eliminar del carrito, modificar cantidades del carrito y por
ultimo,darsedealtacomoclienteparapoderfinalizarsucompra.
Laopcinderegistrarseleaparecerentodomomentoqueaccedaala
paginadelcarrito.Unavezestregistrado,estaopcindesaparecery
aparecerunanuevaqueserladepasarporcaja.Otradelasventajas
deregistrarse,esqueunavezlohayahecho,secreaautomticamente
lasesinyelusuarioyaestlogueadoypasaaserusuarioregistrado.
Perfildeusuarioregistrado
Si el usuario se ha registrado, podr realizar todas las funciones
comentadas en el punto anterior. tambin tendr dos opciones mas;
finalizar la compra con todos los artculos aadidos al carrito
previamenteyvisualizarelestadodelospedidosrealizados.
Perfildeempleado
Este perfil cuenta adems con la ventaja de poder realizar pequeas
modificacionessobrelabasededatos.Introduciendosusdatosdesde
el men Intranet, acceder a la misma y se le mostrarn las opciones
queestabrindaalosusuarios.

5.3.2.Autenticacindelosusuarios
La autenticacin para usuarios funciona de igual manera que la
autenticacin para los empleados. El sistema mostrar al usuario un

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina40de64

formularioenelquetendrqueintroducirsunumerodeusuario(DNI)
y su contrasea. La aplicacin recoger estos datos y los enviar al
sistema. Se comprobar mediante consultas a la base de datos que
dicha informacin es correcta y existe una tupla con ese usuario y
contrasea.Enestecaso,secrearunavariablesesinqueviajarpor
todas las paginas de manera que el sistema pueda controlar el todo
momento con esa sesin que el usuario se encuentra autenticado. En
caso contrario el sistema devolver un error y el usuario tendr que
introducirdenuevosusdatos.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina41de64

6.EVALUACIONYPRUEBAS
6.1.Evaluacin
La evaluacin de la TV es un punto muy importante ya que de esta
dependequelapaginaWebcontengatodaslasnecesidadesdelusuario
yportanto,elxitodeestaaplicacin.
La usabilidad se refiere a la capacidad de un software de ser
comprendido, aprendido, usado y ser atractivo para el usuario, en
condiciones especficas de uso. Los puntos seguidos para conseguirla
sonlossiguiente:
Lafacilidaddecomprensindelaestructuracindelaaplicacin,
ascomodelasfuncionalidadesycontenidosqueenestapueden
observarse.
Lasencillezdeusodelaaplicacinenlasetapasiniciales.
Larapidezconlaqueelusuarioencuentraaquelloquebusca.
La facilidad percibida en la navegacin en trminos de tiempo
requeridos y tareas precisadas para obtener los resultados
perseguidos.
Lacapacidaddelusuariodelsistemaparacontrolaraquelloque
haceyellugarenelqueseencuentraencadamomento.
Estos son algunos de los puntos seguidos para conseguir una
aplicacin con un alto grado de usabilidad, pero existen numerosas
reglasyrecomendacionesmas.
Los sistemas que mejor se ajustan a las necesidades del usuario
mejoranlaproductividadylacalidaddelasaccionesylasdecisiones.
Eldiseocentradoenelusuarioresultaenproductosdemayorcalidad
de uso, ms competitivos en un mercado que demanda productos de
fciluso.

6.2.Pruebas
Las primeras pruebas realizadas fueron las pruebas de diseo. Haba
quecuadrardaslaspartesdelaTVyquequedaratodoensulugar.El
tamao de cada imagen y el lugar en el que tenan que estar fue una
tareaquenecesitungrannumerodepruebas.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina42de64

Las pruebas referentes a la navegabilidad, enlaces rotos y a la


accesibilidad son otro tipo de pruebas que se fueron realizando
simultneamenteconeldesarrollodelaaplicacin.Trasrealizaralgn
cambio importante en la misma, haba que probar que hubiera
quedadobienyquefuncionaracomoseesperaba.

6.2.1.ValidacinXHTMLyCSS
TodaslaspaginasdelaaplicacinMcIANhansidocomprobadasconel
validadordelaW3Cysehanidocorrigiendoloserroresencontrados
hasta que todas han sido validadas correctamente como XHTML 1.0
Transitional.Acontinuacinsemuestradichavalidacin.

Al final de cada pagina, se encuentran los dos botones con acceso


directo al validador del W3C para XHTML y para el CCS. El cdigo de
lashojasdeestiloCSStambinhasidocomprobadoconlaversin2.1
como se muestra a continuacin. El botn para esta validacin se
encuentrajuntoconeldeXHTML.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina43de64

6.2.2.Comprobacindeenlacesrotos
Para una navegabilidad sin errores, se han comprobado todos los
enlacesdelaaplicacin.Existeungrannumerodesoftwarequerealiza
estatareadeformagratuita.Paraestecasosehautilizadolasiguiente
pagina www.anybrowser.com que tras pinchar en la opcin Link
Check e introducir la direccin inicial de nuestra pagina
(http://mcian.zobyhost.com/mcian/) comprueba de manera
automticatodosloslinksquecontiene.Estossonlosresultados:

Estaimagencontinuaperolaobviaremosyresumiremosqueelresto
dellinkstambincuentanconelestadoOK.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina44de64

6.2.3.Comprobacinderesolucin
Anteriormente se coment que para una correcta visualizacin de la
aplicacin,deberutilizarseunaresolucinde800x600osuperior.
Este apartado servir para mostrar el cumplimiento de esta
caracterstica.Paraello,seha hecho unaimpresine pantalla para la
resolucinminima(800x600)yunasuperioraleatoria.
Acontinuacinsemuestralavisualizacinparaestasresoluciones.

resolucin800x600:

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina45de64

resolucin1152x864:

Con ambas resoluciones la aplicacin se visualiza bien y se adapta


correctamente.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina46de64

7.CONCLUSIONES
En este punto del Proyecto, se me pasan muchas conclusiones por la
cabeza. La finalizacin de este proyecto me aporta una gran
satisfaccin ya que, hace unos meses, cuando este Proyecto solo era
una idea en mi cabeza, pareca como algo inalcanzable y difcil de
conseguiralmismotiempo.
Con esta aplicacin he aprendido a enfrentarme a un trabajo que
podraconsiderarsecomounatarearealencualquierempresa.Hesido
capazdeutilizarpartedelosconocimientosadquiridosdurantetodala
carrera y plasmarlos en un trabajo del que me siento orgulloso de
cmohaquedado.Untrabajoquenodistamuchodelaideaqueenun
principioteniaenmente.
Ademsmehaservidoparadarmecuentadequetareastrivialesquea
simplevistaparecansencillas,sehanconvertidoenunquebraderode
cabezaytareasqueparecanimposibleshansidomuchomasfcilesde
llegaracabo.tambindecir,queamedidaqueelProyectoibatomando
forma, han surgido muchas dudas que al resolverlas me servan de
ejemploparaaprendernuevascosasdentrodelaprogramacinWeb.
Peseaestarfinalizadoelproyecto,lamotivacinqueibanaciendoen
mipasoapasodeirdescubriendonuevasposibilidadesmeharseguir
investigandoennuevasopcionesaaadirdentrodelaTiendaVirtual.
ConestamemoriafinalizamiProyectoytambintresaosdecarrera.
Este proyecto me ha servido para interesarme en el mundo de la
programacinWeb.

Bibliografa

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina47de64

ReferenciasWeb:
IEEE Recommended Practice for Software Requirements
Specifications,IEEEStd8301998.
ForosdelWeb:http://www.forosdelweb.com
Wikipedialaenciclopedialibre:http://es.wikipedia.org
ManualdePHP:http://php.net/index.php
EspecificacionesdeXHTML1.0http://www.w3c.org/TR/xhtml1
EspecificacionesdeCSS2.1http://www.w3c.org/TR/CSS21
Mamp:Mac,Apache,MySQL,PHP:http://www.mamp.info

Referenciasfsicas:
Se han tomado tambin como referencias proyectos de la Escuela
TcnicaydelaFacultaddeInformticadeaosanteriores.

AnexoA.CasosdeUso

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina48de64

Casodeuso

Aadiracarrito

Descripcin

Elusuarioaadeunproductoalcarrito.

Actoriniciador

Usuario

Actoressecundarios

Resumen

Cualquier usuario podr aadir el producto de la


Tienda Virtual que desee al carrito en cualquier
momentoseausuarioregistradooannimo.

Precondiciones

Postcondiciones

Elsistemaactualizarelresumendelcarrito.

Flujodeeventos

Interaccionesdelusuario Obligacionesdelsistema
1.Elusuarioseleccionaun 2. El sistema busca en la
productoenelcatalogo.
base de datos las
caractersticas
del

producto.

4. El sistema comprueba
3. El usuario pulsa sobre que el producto se
elbotnAadiracarrito encuentreenelcarrito.
delproductodeseado.
5. Si se encuentra, suma
la cantidad al producto

existenteenelcarrito.
6. Si no se encuentra, se
aadeelarticulonuevoal
carrito.
7.Elsistemaactualizalos
totalesdelcarrito.
Extensionessncronas

En3elusuariopuedecancelarlaoperacin.

Extensionesasncronas

Casodeuso

Eliminardelcarrito

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina49de64

Descripcin

Elusuarioeliminaunproductoalcarrito

Actoriniciador

Usuario

Actoressecundarios

Resumen

Cualquier usuario podr eliminar un producto del


carritoenelmomentoquedesee.

Precondiciones

El producto debe haber sido aadido al carrito


anteriormente.

Postcondiciones

Elsistemaactualizarelresumendelcarrito.

Flujodeeventos

Interaccionesdelusuario Obligacionesdelsistema
1.Elusuariovaalapagina
donde se encuentra el

resumendelcarrito.
2. Marca el checkbox de
el/los producto/s que
deseaeliminardelcarrito.

3. Pulsa sobre el botn


Actualizar
que
se
encuentrabajoelcarrito.
4. Busca en el carrito el

identificador de los
productosmarcados.
5. Elimina del carito los
productosseleccionados.
6.Actualizalostotalesdel
carrito.

Extensionessncronas

En 3 el usuario puede cancelar la operacin. Si el


usuario elimina todos los elementos del carrito el
sistemamostrarunmensajeindicandoqueelcarrito
estvaco.

Extensionesasncronas

Casodeuso

Modificarcantidad.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina50de64

Descripcin

El usuario modifica la cantidad de un producto


aadidoalcarrito.

Actoriniciador

Usuario

Actoressecundarios

Resumen

Cualquier usuario podr modificar la cantidad de un


productoquedeseeadquirir.

Precondiciones

El producto debe haber sido aadido al carrito


anteriormente.

Postcondiciones

Elsistemaactualizarelresumendelcarrito.

Flujodeeventos

Interaccionesdelusuario Obligacionesdelsistema
1.Elusuariovaalapagina
donde se encuentra el

resumendelcarrito.
2. Modifica la cantidad de
el/los producto/s que
deseecambiar.

3. Pulsa sobre el botn


Actualizar
que
se
encuentrabajoelcarrito.
4.Modificalacantidadde

los artculos a los que su


cantidad es diferente a la
anterior.
5.Si la cantidadnueva es
cero,elsistemaeliminael
articulodelcarrito.
6.Actualizalostotalesdel
carrito.

Extensionessncronas

En 3 el usuario puede cancelar la operacin. Si el


usuario modifica todas cantidades a cero, el sistema
mostrar un mensaje indicando que el carrito est
vaco.

Extensionesasncronas

Casodeuso

Altausuario.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina51de64

Descripcin

DardealtaunusuarioenlaTiendaVirtual.

Actoriniciador

Usuario

Actoressecundarios

Resumen

El usuario annimo introduce sus datos personales y


elsistemalodadealtacomousuarioregistrado.

Precondiciones

Elusuarionosehadadodealtapreviamente.

Postcondiciones

Elnuevousuarioquedaregistradoenelsistema.

Flujodeeventos

Interaccionesdelusuario Obligacionesdelsistema
1.Elusuariovaunapagina
desde la que puede darse

dealta(Ej.Carrito).
2. Selecciona la opcin
Nuevousuario.
3. El sistema solicita los
datospersonalesatravs

deunformulario.
4.Elusuariointroducesus

datospersonales.
5. El usuario pincha sobre
elbotnEnviardatos.
6. El sistema registra al
nuevo usuario en la base
dedatos.
7. El sistema confirma
queelusuariosehadado
dealtacorrectamente.

Extensionessncronas

En4y5elusuariopuedecancelarlaoperacin.
En6,sielusuarionohaintroducidotodosloscampos,
elsistemainformardelerroryvolverasolicitarlos.

Extensionesasncronas

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina52de64

Casodeuso

Modificarusuario.

Descripcin

ModificarlosdatosdelusuarioenlaTiendaVirtual.

Actoriniciador

Empleado

Actoressecundarios

Usuario

Resumen

El empleado modifica los datos de un usuario si es


necesarioenlabasededatos.

Precondiciones

El usuario solicita al empleado la modificacin de sus


datos personales. El empleado est conectado a su
Intranet.

Postcondiciones

Los datos del usuario quedan modificados en el


sistema.

Flujodeeventos

Interaccionesdelusuario Obligacionesdelsistema
1. El empleado pincha en 2. El sistema muestra un
Modificarlosdatosdeun listado con todos los
clientedesuIntranet.
clientesyunbuscador.
3. El empleado introduce 4. El sistema muestra las
los datos del cliente en el coincidencias
de
la
buscador.
bsqueda.
5. El empleado selecciona 6. El sistema busca en la
el nombre del usuario a base de datos el cliente
modificar.
seleccionado.

7. El sistema muestra en
un formulario todos los
8. El empleado modifica datosdelcliente.
los datos oportunos en el
formulario.

9. El empleado pulsa el 10.Elsistemamodificaal


botnEnviardatos.
usuario en la base de
datos.
11. El sistema confirma
que el usuario se ha
modificado
correctamente.
Extensionessncronas

En5y9elempleadopuedecancelarlaoperacin.
En10,sielusuarionohadejadouncampoenblanco,
elsistemainformardelerroryvolverasolicitarlo.

Extensionesasncronas

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina53de64

Casodeuso

Cambiarestado.

Descripcin

Cambiarelestadodeunpedido.

Actoriniciador

Empleado

Actoressecundarios

Resumen

El empleado modifica el estado de uno o varios


pedidosenlabasededatos.

Precondiciones

El pedido se ha realizado previamente. El empleado


estconectadoasuIntranet

Postcondiciones

Los datos del pedido quedan modificados en el


sistema.

Flujodeeventos

Interaccionesdelusuario Obligacionesdelsistema
1. El empleado pincha en 2. El sistema muestra un
Cambiar el estado de un listado con todos los
pedidodesuIntranet.
pedidosyunbuscador.
3. El empleado introduce 4. El sistema muestra el
el numero del pedido a pedidobuscado.
modificar.

5. El empleado cambia el

estadodelpedido.
6. El empleado pincha en
elbotnActualizar.
7. El sistema modifica el
pedido en la base de

datos.

8. El sistema confirma
que el pedido se ha
modificado
correctamente.

Extensionessncronas

En3y6elempleadopuedecancelarlaoperacin.
En7,sielempleadointroduceunestadoincorrecto,el
sistema muestra el error y vuelve a solicitar el nuevo
estado.

Extensionesasncronas

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina54de64

Casodeuso

Finalizarpedido.

Descripcin

Elusuariofinalizasucompra.

Actoriniciador

Usuario

Actoressecundarios

Resumen

Elusuariofinalizasupedidoysealmacenaenlabase
dedatos.

Precondiciones

Elusuarioseharegistradopreviamenteyhaaadido
alcarritoartculos

Postcondiciones

Elpedidoquedaregistradoenlabasededatos.

Flujodeeventos

Interaccionesdelusuario Obligacionesdelsistema
1.Elusuariovaalapagina
Carrito y pincha en
Caja para finalizar el
pedido.
2.ElsistemaaccedealId.
delusuario.

3. El sistema actualiza la
tabla pedido con una
nuevafila.
4. El sistema accede a la
base de datos y busca la
informacin
de
los
artculosdelcarrito.
5. El sistema actualiza la
tabla detallepedido con
unanuevafila.
6. El sistema informa al
usuario mediante un
mensaje la confirmacin
delpedido.

Extensionessncronas

Extensionesasncronas

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina55de64

Casodeuso

Loginusuario.

Descripcin

ElusuarioseconectaalaTiendaVirtual.

Actoriniciador

Usuario

Actoressecundarios

Resumen

El usuario inicia sesin con su DNI y contrasea a la


TiendaVirtual.

Precondiciones

El usuario se ha registrado previamente y dispone de


unacontrasea.

Postcondiciones

Flujodeeventos

Interaccionesdelusuario Obligacionesdelsistema
1. El usuario va a una
paginadesdelaquepuede
conectarse(Ej.Carrito).
2. El sistema solicita los
datos a travs de un
3.Elusuariointroducesus formulario.
datosenelformulario.

4. El usuario pincha en el

botnValidar.

5. El sistema recoge los


datosdelformulario.
6. El sistema comprueba
que dichos datos se
encuentren en la base de
datos.
7.Elsistemainiciasesin
con el usuario en
cuestin.

Extensionessncronas

En4elusuariopuedecancelarlaoperacin.
En 7, si el empleado introduce un DNI y contrasea
incorrectos, el sistema muestra el error y vuelve a
solicitarlosdatos.

Extensionesasncronas

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina56de64

AnexoB.DescripcindeTecnologas.
B.1.XHTML
XHTML,acrnimoeninglsdeeXtensibleHypertextMarkupLanguage
(lenguaje extensible de marcado de hipertexto), es el lenguaje de
marcado pensado para sustituir a HTML como estndar para las
pginas Web. En su versin 1.0, XHTML es solamente la versin XML
de HTML, por lo que tiene, bsicamente, las mismas funcionalidades,
perocumplelasespecificaciones,msestrictas,deXML.Suobjetivoes
avanzarenelproyectodelWorldWideWebConsortiumdelograruna
Websemntica,dondelainformacin,ylaformadepresentarlaestn
claramente separadas. La versin 1.1 es similar, pero parte a la
especificacin en mdulos. En sucesivas versiones la W3C planea
romperconlostagsclsicostradosdeHTML.
LasprincipalesventajasdelXHTMLsobreotrosformatosson:
Compatibilidad parcial con navegadores antiguos: la informacin
se visualiza, aunque sin formato. Apuntar que el XHTML 1.0 fue
diseado expresamente para ser mostrado en navegadores que
soportanHTMLdebase.
Un mismo documento puede adoptar diseos radicalmente
distintos en distintos aparatos, pudiendo incluso escogerse entre
variosdiseosparaunmismomedio.
Facilidaddeedicindirectadelcdigoydemantenimiento.
Formato abierto, compatible con los nuevos estndares que
actualmenteestdesarrollandoelW3Ccomorecomendacinpara
futurosagentesdeusuarioonavegadores.
Inconvenientes:
Algunosnavegadoresantiguosnosontotalmentecompatiblescon
los estndares, lo que hace que las pginas no siempre se
muestrencorrectamente.Estocadavezesmenosproblemtico,al
ircayendoendesuso.

Muchas herramientas de diseo Web an no producen cdigo


XHTMLcorrecto.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina57de64

B.2.HTTPylaarquitecturaClienteServidor.
Elprotocolodetransferenciadehipertexto(HTTP,HyperTextTransfer
Protocol)eselprotocolousadoencadatransaccindelaWeb(WWW).
HTTP define la sintaxis y la semntica que utilizan los elementos
software de la arquitectura Web (clientes, servidores, proxies) para
comunicarse. Es un protocolo orientado a transacciones y sigue el
esquema peticinrespuesta entre un cliente y un servidor. Al cliente
queefectalapeticin(unnavegadorounspider)seloconocecomo
"user agent" (agente del usuario). A la informacin transmitida se la
llamarecursoyselaidentificamedianteunURL.Losrecursospueden
serarchivos,elresultadodelaejecucindeunprograma,unaconsulta
aunabasededatos,latraduccinautomticadeundocumento,etc.
HTTP es un protocolo sin estado, es decir, que no guarda ninguna
informacinsobreconexionesanteriores.Eldesarrollodeaplicaciones
Web necesita frecuentemente mantener estado. Para esto se usan las
cookies, que es informacin que un servidor puede almacenar en el
sistema cliente. Esto le permite a las aplicaciones Web instituir la
nocin de "sesin", y tambin permite rastrear usuarios ya que las
cookiespuedenguardarseenelclienteportiempoindeterminado.
La arquitectura cliente servidor consiste bsicamente en un cliente
que realiza peticiones a otro programa (el servidor) que le da
respuesta. Aunque esta idea se puede aplicar a programas que se
ejecutansobreunasolacomputadoraesmsventajosaenunsistema
operativo multiusuario distribuido a travs de una red de
computadoras.
En esta arquitectura la capacidad de proceso est repartida entre los
clientesylosservidores,aunquesonmsimportanteslasventajasde
tipo organizativo debidas a la centralizacin de la gestin de la
informacin y la separacin de responsabilidades, lo que facilita y
clarificaeldiseodelsistema.
Laseparacinentreclienteyservidoresunaseparacindetipolgico,
donde el servidor no se ejecuta necesariamente sobre una sola
mquinaniesnecesariamenteunsloprograma.Lostiposespecficos
de servidores incluyen los servidores Web, los servidores de archivo,
los servidores del correo, etc. Mientras que sus propsitos varan de
unosserviciosaotros,laarquitecturabsicaseguirsiendolamisma.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina58de64

EnlaarquitecturaC/Selremitentedeunasolicitudesconocidocomo
cliente.Suscaractersticasson:

Esquieniniciasolicitudesopeticiones,tienenportantounpapel
activoenlacomunicacin(dispositivomaestrooamo).

Esperayrecibelasrespuestasdelservidor.

Porlogeneral,puedeconectarseavariosservidoresalavez.

Normalmente interacta directamente con los usuarios finales


medianteunainterfazgrficadeusuario.

Alreceptordelasolicitudenviadaporclienteseconocecomoservidor.
Suscaractersticasson:

Aliniciarseesperanaquelleguenlassolicitudesdelosclientes,
desempean entonces un papel pasivo en la comunicacin
(dispositivoesclavo).
Traslarecepcindeunasolicitud,laprocesanyluegoenvanla
respuestaalcliente.
Por lo general, aceptan conexiones desde un gran nmero de
clientes(enciertoscasoselnmeromximodepeticionespuede
estarlimitado).
No es frecuente que interacten directamente con los usuarios
finales.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina59de64

Ventajas

Centralizacin del control: los accesos, recursos y la integridad


de los datos son controlados por el servidor de forma que un
programaclientedefectuosoonoautorizadonopuedadaarel
sistema.Estacentralizacintambinfacilitalatareadeponeral
dadatosuotrosrecursos(mejorqueenlasredesP2P).
Escalabilidad: se puede aumentar la capacidad de clientes y
servidores por separado. Cualquier elemento puede ser
aumentado (o mejorado) en cualquier momento, o se pueden
aadirnuevosnodosalared(clientesy/oservidores).
Fcil mantenimiento: al estar distribuidas las funciones y
responsabilidades entre varios ordenadores independientes, es
posible reemplazar, reparar, actualizar, o incluso trasladar un
servidor,mientrasquesusclientesnosevernafectadosporese
cambio(oseafectarnmnimamente).Estaindependenciadelos
cambiostambinseconocecomoencapsulacin.
Existen tecnologas, suficientemente desarrolladas, diseadas
para el paradigma de C/S que aseguran la seguridad en las
transacciones, la amigabilidad del interfaz, y la facilidad de
empleo.

Desventajas

La congestin del trfico ha sido siempre un problema en el


paradigmadeC/S.Cuandounagrancantidaddeclientesenvan
peticiones simultaneas al mismo servidor, puede ser que cause
muchos problemas para ste (a mayor nmero de clientes, ms
problemasparaelservidor).Alcontrario,enlasredesP2Pcomo
cadanodoenlaredhacetambindeservidor,cuantomsnodos
hay,mejoreselanchodebandaquesetiene.
ElparadigmadeC/SclsiconotienelarobustezdeunaredP2P.
Cuando un servidor est cado, las peticiones de los clientes no
pueden ser satisfechas. En la mayor parte de redes P2P, los
recursos estn generalmente distribuidos en varios nodos de la
red. Aunque algunos salgan o abandonen la descarga; otros
pueden todava acabar de descargar consiguiendo datos del
restodelosnodosenlared.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina60de64

Elsoftwareyelhardwaredeunservidorsongeneralmentemuy
determinantes. Un hardware regular de un ordenador personal
puede no poder servir a cierta cantidad de clientes.
Normalmentesenecesitasoftwareyhardwareespecfico,sobre
todo en el lado del servidor, para satisfacer el trabajo. Por
supuesto,estoaumentarelcoste.
El cliente no dispone de los recursos que puedan existir en el
servidor. Por ejemplo, si la aplicacin es una Web, no podemos
escribir en el disco duro del cliente o imprimir directamente
sobre las impresoras sin sacar antes la ventana previa de
impresindelosnavegadores.

B.3.PHP
PHP es un lenguaje interpretado de propsito general ampliamente
usadoyqueestdiseadoalusarespecialmenteparadesarrolloWeby
puedeserincrustadodentrodecdigoHTML.Generalmenteseejecuta
en un servidor Web, tomando el cdigo en PHP como su entrada y
creandopginasWebcomosalida.Puedeserdesplegadoenlamayora
de los servidores Web y en casi todos los sistemas operativos y
plataformassincostoalguno.PHPseencuentrainstaladoenmsde20
millones de sitios Web y en un milln de servidores, el nmero de
sitiosenPHPhacompartidoalgodesupreponderantesitioconotros
nuevoslenguajesnotanpoderososdesdeagostode2005.Estemismo
sitio Web de Wikipedia est desarrollado en PHP. Es tambin el
mdulo Apache ms popular entre las computadoras que utilizan
ApachecomoservidorWeb.LaversinmsrecientedePHPesla5.3.1
(forWindows)del19denoviembrede2009.
El gran parecido que posee PHP con los lenguajes ms comunes de
programacin estructurada, como C y Perl, permiten a la mayora de
los programadores crear aplicaciones complejas con una curva de
aprendizaje muy corta. Tambin les permite involucrarse con
aplicaciones de contenido dinmico sin tener que aprender todo un
nuevogrupodefunciones.
Aunque todo en su diseo est orientado a facilitar la creacin de
pginaWeb,esposiblecrearaplicacionesconunainterfazgrficapara
elusuario,utilizandolaextensinPHPQtoPHPGTK.Tambinpuede
serusadodesdelalneaderdenes,delamismamaneracomoPerlo

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina61de64

Python pueden hacerlo, a esta versin de PHP se la llama PHP CLI


(CommandLineInterface).
Cuando el cliente hace una peticin al servidor para que le enve una
pgina Web, el servidor ejecuta el intrprete de PHP. ste procesa el
script solicitado que generar el contenido de manera dinmica (por
ejemploobteniendoinformacindeunabasededatos).Elresultadoes
enviado por el intrprete al servidor, quien a su vez se lo enva al
cliente. Mediante extensiones es tambin posible la generacin de
archivosPDF,Flash,ascomoimgenesendiferentesformatos.
Permitelaconexinadiferentestiposdeservidoresdebasesdedatos
talescomoMySQL,Postgres,Oracle,ODBC,DB2,MicrosoftSQLServer,
FirebirdySQLite.
PHPtambintienelacapacidaddeserejecutadoenlamayoradelos
sistemasoperativos,talescomoUNIX(ydeesetipo,comoLinuxoMac
OSX)yWindows,ypuedeinteractuarconlosservidoresdeWebms
popularesyaqueexisteenversinCGI,mduloparaApache,eISAPI.
PHP es una alternativa a las tecnologas de Microsoft ASP y ASP.NET
(queutilizaC#VB.NETcomolenguajes),aColdFusiondelacompaa
Adobe (antes Macromedia), a JSP/Java de Sun Microsystems, y a
CGI/Perl. Aunque su creacin y desarrollo se da en el mbito de los
sistemaslibres,bajolalicenciaGNU,existeademsunIDE(entornode
desarrollo integrado) comercial llamado Zend Studio. Recientemente,
CodeGear (la divisin de lenguajes de programacin de Borland) ha
sacado al mercado un entorno integrado de desarrollo para PHP,
denominadoDelphiforPHP.ExisteunmduloparaEclipse,unodelos
IDEmspopulares.
Ventajas

Esunlenguajemultiplataforma.
Completamente orientado al desarrollo de aplicaciones Web
dinmicasconaccesoainformacinalmacenadaenunaBasede
Datos.
El cdigo fuente escrito en PHP es invisible al navegador y al
cliente ya que es el servidor el que se encarga de ejecutar el
cdigoyenviarsuresultadoHTMLalnavegador.Estohaceque
laprogramacinenPHPseasegurayconfiable.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina62de64

Capacidaddeconexinconlamayoradelosmotoresdebasede
datos que se utilizan en la actualidad, destaca su conectividad
conMySQLyPostgreSQL.
Capacidad de expandir su potencial utilizando la enorme
cantidaddemdulos(llamadosext'soextensiones).
Posee una amplia documentacin en su pgina oficial, entre la
cual se destaca que todas las funciones del sistema estn
explicadasyejemplificadasenunnicoarchivodeayuda.
Es libre, por lo que se presenta como una alternativa de fcil
accesoparatodos.

Permiteaplicartcnicasdeprogramacinorientadaaobjetos.

Bibliotecanativadefuncionessumamenteampliaeincluida.

Norequieredefinicindetiposdevariablesaunquesusvariables
se pueden evaluar tambin por el tipo que estn manejando en
tiempodeejecucin.
Tienemanejodeexcepciones(desdePHP5).
Si bien PHP no obliga a quien lo usa a seguir una determinada
metodologa a la hora de programar (muchos otros lenguajes
tampoco lo hacen), aun estando dirigido a alguna en particular,
elprogramadorpuedeaplicarensutrabajocualquiertcnicade
programacin y/o desarrollo que le permita escribir cdigo
ordenado,estructuradoymanejable.Unejemplodeestosonlos
desarrollos que en PHP se han hecho del patrn de diseo
Modelo Vista Controlador (o MVC), que permiten separar el
tratamientoyaccesoalosdatos,lalgicadecontrolylainterfaz
deusuarioentrescomponentesindependientes(vermsabajo
FrameworksenPHP).

Inconvenientes

Laofuscacindecdigoeslanicaformadeocultarlosfuentes.

B.4CSS(Hojasdeestilo)
HojasdeEstiloenCascada(CascadingStyleSheets),esunmecanismo
simplequedescribecmosevaamostrarundocumentoenlapantalla,
o cmo se va a imprimir, o incluso cmo va a ser pronunciada la

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina63de64

informacinpresenteenesedocumentoatravsdeundispositivode
lectura. Esta forma de descripcin de estilos ofrece a los
desarrolladores el control total sobre estilo y formato de sus
documentos.
CSSseutilizaparadarestiloadocumentosHTMLyXML,separandoel
contenido de la presentacin. Los Estilos definen la forma de mostrar
los elementos HTML y XML. CSS permite a los desarrolladores Web
controlar el estilo y el formato de mltiples pginas Web al mismo
tiempo.Cualquiercambioenelestilomarcadoparaunelementoenla
CSS afectar a todas las pginas vinculadas a esa CSS en las que
aparezcaeseelemento.
CSSfuncionaabasedereglas,esdecir,declaracionessobreelestilode
unoomselementos.Lashojasdeestiloestncompuestasporunao
ms de esas reglas aplicadas a un documento HTML o XML. La regla
tiene dos partes: un selector y la declaracin. A su vez la declaracin
estcompuestaporunapropiedadyelvalorqueseleasigne.

B.5MacOSX
Mac OS X es una lnea de sistemas operativos computacionales
desarrollada,comercializadayvendidaporAppleInc.
Se basa en Unix y usa una interfaz grfica desarrollada por Apple
llamada Aqua, que se inspira libremente en la interfaz de Mac OS
Classic. El gestor de ventanas X11, caracterstico en la familia de
sistemasUnix,yJavaseusansloparacompatibilidadconsoftwareno
nativodeMac.
Mac OS X Server fue lanzado en el ao 1999 y se diferencia por
incorporardiferentesherramientasadministrativasparalagestinde
redesyserviciosdered.
EstesistematieneasuvezunsubsistemallamadoDarwin(bajoAPSL,
una licencia open source) que proporciona a Mac OS X prestaciones
modernas, como la memoria protegida, la multitarea por desalojo o
expulsiva,lagestinavanzadadememoriayelmultiprocesosimtrico.
Sin embargo, las capas superiores del sistema (por ejemplo el
subsistemagrficoengeneral)soncdigocerrado.

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina64de64

B.6Apache
El servidor Apache es un servidor HTTP de cdigo abierto para
plataformas Unix (BSD, GNU/Linux, etctera), Windows y otras, que
implementa el protocolo HTTP/1.1 (RFC 2616) y la nocin de sitio
virtual.Cuandocomenzsudesarrolloen1995sebasinicialmenteen
cdigodelpopularNCSAHTTPd1.3,peromstardefuereescritopor
completo. Su nombre se debe a que originalmente Apache consista
solamenteenunconjuntodeparchesaaplicaralservidordeNCSA.
Era, en ingls, a patchy server (un servidor parcheado). El servidor
ApachesedesarrolladentrodelproyectoHTTPServer(httpd)dela
Apache Software Foundation. Apache presenta entre otras cosas
mensajes de error altamente configurables, bases de datos de
autenticacinynegociadodecontenido,perofuecriticadoporlafalta
deunainterfazgrficaqueayudeensuconfiguracin.
Enlaactualidad(2005),ApacheeselservidorHTTPmsusado,siendo
el servidor HTTP del 68% de los sitios Web en el mundo y creciendo
an su cuota de mercado (estadsticas histricas y de uso diario
proporcionadasporNetcraft.

B.7MySQL
MySQLesunsistemadegestindebasededatosrelacional,multihiloy
multiusuarioconmsdeseismillonesdeinstalaciones.MySQLAB
desdeenerode2008unasubsidiariadeSunMicrosystemsystaasu
vez de Oracle Corporation desde abril de 2009 desarrolla MySQL
comosoftwarelibreenunesquemadelicenciamientodual.
PorunladoseofrecebajolaGNUGPLparacualquierusocompatible
con esta licencia, pero para aquellas empresas que quieran
incorporarloenproductosprivativosdebencompraralaempresauna
licencia especfica que les permita este uso. Est desarrollado en su
mayorparteenANSIC.
Al contrario de proyectos como Apache, donde el software es
desarrolladoporunacomunidadpblicayelcopyrightdelcdigoest
enpoderdelautorindividual,MySQLespropietarioyestpatrocinado
porunaempresaprivada,queposeeelcopyrightdelamayorpartedel
cdigo.

También podría gustarte