You are on page 1of 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 .................................................................................................................... 1 4 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( ELECT*FROMDetallepedidosWHERE S 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 Descripcin Actoriniciador Actoressecundarios Resumen Aadiracarrito Elusuarioaadeunproductoalcarrito. Usuario Cualquier usuario podr aadir el producto de la Tienda Virtual que desee al carrito en cualquier momentoseausuarioregistradooannimo. Elsistemaactualizarelresumendelcarrito. 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.

Precondiciones Postcondiciones Flujodeeventos

Extensionesasncronas


Casodeuso Eliminardelcarrito

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina49de64

Descripcin Actoriniciador Actoressecundarios Resumen Precondiciones Postcondiciones Flujodeeventos

Elusuarioeliminaunproductoalcarrito Usuario Cualquier usuario podr eliminar un producto del carritoenelmomentoquedesee. El producto debe haber sido aadido al carrito anteriormente. Elsistemaactualizarelresumendelcarrito. 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 Actoriniciador Actoressecundarios Resumen Precondiciones Postcondiciones Flujodeeventos

El usuario modifica la cantidad de un producto aadidoalcarrito. Usuario Cualquier usuario podr modificar la cantidad de un productoquedeseeadquirir. El producto debe haber sido aadido al carrito anteriormente. Elsistemaactualizarelresumendelcarrito. 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 Actoriniciador Actoressecundarios Resumen Precondiciones Postcondiciones Flujodeeventos

DardealtaunusuarioenlaTiendaVirtual. Usuario El usuario annimo introduce sus datos personales y elsistemalodadealtacomousuarioregistrado. Elusuarionosehadadodealtapreviamente. Elnuevousuarioquedaregistradoenelsistema. 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 Descripcin Actoriniciador Actoressecundarios Resumen Precondiciones

Modificarusuario. ModificarlosdatosdelusuarioenlaTiendaVirtual. Empleado Usuario El empleado modifica los datos de un usuario si es necesarioenlabasededatos. El usuario solicita al empleado la modificacin de sus datos personales. El empleado est conectado a su Intranet. Los datos del usuario quedan modificados en el sistema. 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.

Postcondiciones Flujodeeventos

Extensionessncronas

En5y9elempleadopuedecancelarlaoperacin. En10,sielusuarionohadejadouncampoenblanco, elsistemainformardelerroryvolverasolicitarlo.

Extensionesasncronas

PROEYCTOFINALDECARRERADISEOEIMPLEMENTACIONDEUNATIENDAVIRTUALPgina53de64

Casodeuso Descripcin Actoriniciador Actoressecundarios Resumen Precondiciones Postcondiciones Flujodeeventos Cambiarestado. Cambiarelestadodeunpedido. Empleado El empleado modifica el estado de uno o varios pedidosenlabasededatos. El pedido se ha realizado previamente. El empleado estconectadoasuIntranet Los datos del pedido quedan modificados en el sistema. 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 Descripcin Actoriniciador Actoressecundarios Resumen Precondiciones Postcondiciones Flujodeeventos Finalizarpedido. Elusuariofinalizasucompra. Usuario Elusuariofinalizasupedidoysealmacenaenlabase dedatos. Elusuarioseharegistradopreviamenteyhaaadido alcarritoartculos Elpedidoquedaregistradoenlabasededatos. 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 Descripcin Actoriniciador Actoressecundarios Resumen Precondiciones Postcondiciones Flujodeeventos

Loginusuario. ElusuarioseconectaalaTiendaVirtual. Usuario El usuario inicia sesin con su DNI y contrasea a la TiendaVirtual. El usuario se ha registrado previamente y dispone de unacontrasea. 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.

You might also like