Diseño e implementacion de una tienda virtual

!!!!!!!!!!!!!!!!!!!!!!!! ! ! Universidad*Politécnica*de*Valencia* Escuela*Técnica*Superior*de*Ingeniería*Informática* * * * * * * * * Memoria*del*proyecto*final*de*carrera:* DISEÑO*E*IMPLEMENTACIÓN*DE*UNA* TIENDA*VIRTUAL* * * * * * * * * * Alumno:*Antonio*Macian*Ruiz* Director:*Sergio*Saez*Barona* PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*2*de*64* INDICE* 1.#Introducción.......................................................................................................................5# 2.#Especificación#de#requisitos........................................................................................7# ###2.1.#Introducción................................................................................................................7# ######2.1.1.#Propósito ...............................................................................................................7# ######2.1.2.#Ámbito ....................................................................................................................7# ######2.1.3.#Definiciones,#acrónimos#y#abreviaturas...................................................8# ######2.1.4.#Referencias ...........................................................................................................9# ###2.2.#Descripción#general.................................................................................................9# ######2.2.1.#Perspectiva#el#producto...................................................................................9# ######2.2.2#Funciones#del#producto...................................................................................10# ######2.2.3.#Características#del#usuario...........................................................................12# ######2.2.4.#Restricciones#generales..................................................................................12# ###2.3.#Requerimientos#específicos .................................................................................13# ######2.3.1.#Requerimientos#funcionales.........................................................................13# #########2.3.1.1.#Cliente#anónimo..........................................................................................13# #########2.3.1.2.#Cliente#registrado......................................................................................15# #########2.3.1.3.#Empleado#de#la#Tienda#Virtual............................................................15# ######2.3.2.#Requerimientos#de#interfaces#externos...................................................17# #########2.3.2.1.#Interfaz#de#usuario....................................................................................17# #########2.3.2.2.#Interfaz#Hardware ....................................................................................17# #########2.3.2.3.#Interfaz#Software.......................................................................................18# #########2.3.2.4.#Interfaces#de#comunicaciones ..............................................................18# ######2.3.3#Requerimientos#de#eficiencia........................................................................18# ######2.3.4.#Obligaciones#de#diseño ...................................................................................19# #########2.3.4.1.#Estándares#cumplidos..............................................................................19# #########2.3.4.2.#Limitaciones#Hardware ..........................................................................20# ######2.3.5.#Atributos...............................................................................................................20# #########2.3.5.1.#Seguridad......................................................................................................20# #########2.3.5.2.#Facilidades#de#mantenimiento.............................................................21# ######2.3.6.#Otros#requerimientos......................................................................................21# PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*3*de*64* #########2.3.6.1.#Base#de#datos...............................................................................................21# 3.#Análisis ................................................................................................................................22# ###3.1.#Diagrama#UML .........................................................................................................22# ###3.2.#Casos#de#uso................................................................................................................24# ###3.3.#Diagramas#de#secuencia.......................................................................................24# 4.#Diseño ..................................................................................................................................27# ###4.1.#Nivel#de#interfaz.......................................................................................................28# ######4.1.1.#Diagramas#de#navegabilidad.......................................................................30# #########4.1.1.1.#Usuario#anónimo/navegabilidad........................................................30# #########4.1.1.2.#Empleado#de#la#Tienda#Virtual............................................................39# ###4.2.#Nivel#lógico.................................................................................................................31# ###4.3.#Nivel#de#persistencia...............................................................................................32# ######4.3.1.#Diseño#Entidad]Relación...............................................................................32# ######4.3.2.#Diseño#lógico.......................................................................................................33# 5.#Implementación#e#integración..................................................................................35# ###5.1.#Tecnologías.................................................................................................................35# ###5.2.#Herramientas.............................................................................................................37# ###5.3.#Detalles#de#la#implementación...........................................................................39# ######5.3.1.#Perfiles#de#usuario............................................................................................39# ######5.3.2.#Autenticación#de#los#usuarios......................................................................39# 6.#Evaluación#y#pruebas....................................................................................................41# ###6.1.#Evaluación....................................................................................................................#41# ###6.2.#Pruebas.........................................................................................................................41# ######6.2.1.#Validación#XHTML#y#CSS................................................................................42# ######6.2.2.#Comprobación#de#enlaces#rotos..................................................................43# ######6.2.3.#Comprobación#de#resolución .......................................................................44# 7.#Conclusiones......................................................................................................................46# Biografía..................................................................................................................................47# Anexo#A.#Casos#de#uso ........................................................................................................48# Anexo#B.#Descripción#de#Tecnologías..........................................................................56# ###B.1.#XHTML..........................................................................................................................56# PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*4*de*64* ###B.2.#HTTP#y#la#arquitectura#Cliente]Servidor......................................................57# ###B.3.#PHP................................................................................................................................60# ###B.4.#CSS#(Hojas#de#estilo)...............................................................................................62# ###B.5.#Mac#OS#X......................................................................................................................63# ###B.6.#Apache..........................................................................................................................64# ###B.7.#MySQL...........................................................................................................................64# * * * * * * * * * * * * * * * * * * PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*5*de*64* 1.*INTRODUCCION* El* Diseño* y* la* Implementación* de* una* Tienda* Virtual* tiene* como* resultado* una* aplicación* Web* desde* la* cual,* una* empresa* pueda* ampliar*sus*ventas*mediante*el*comercio*electrónico*de*manera*fácil,* rápida*y*sencilla.* De* esta* manera,* se* facilita* a* los* clientes* la* opción* de* realizar* sus* compras* sin* salir* de* casa* o* simplemente,* visualizar* los* artículos* disponibles* o* consultar* el* estado* de* algún* pedido* realizado* anteriormente.* Por*otra*parte*el*personal*autorizado*(empleados*de*la*tienda)*podrá* realizar* acciones* como* el* modificado* de* los* pedidos* realizados* mediante*esta*vía,*la*inserción*de*nuevos*ítems*en*la*base*de*datos*o*la* corrección*de*los*datos*erróneos*que*puedan*aparecer*en*el*registro*de* algún*cliente.* Motivaciones! El*motivo*principal*por*el*cual*he*decidido*implementar*este*Proyecto* Final*de*Carrera*ha*sido*adentrarme*en*la*medida*de*lo*posible*en*un* sector* que* esta* cada* vez* mas* en* auge* como* es* el* del* comercio* electrónico,* además* de* adquirir* los* conocimientos* necesarios* para* programar*en*un*lenguaje*orientado*a*paginas*Web,*que*me*permita* ser*mas*competente*a*la*hora*de*enfrentarme*al*mercado*laboral*una* vez*finalizada*la*carrera.* En* cuanto* a* la* programación* se* refiere,* pese* a* haber* hecho* algún* trabajo*anterior*en*PHP*podría*decirse*que,*es*la*primera*vez*que*me* enfrento*a*una*aplicación*real*en*este*lenguaje,*además*de*haber*tenido* la*oportunidad*de*trabajar*con*plantillas*CSS*que*hasta*el*momento*era* algo*totalmente*desconocido*para*mi.**Por*ultimo,*el*haber*creado*la* base*de*datos*en*MySQL*me*ha*permitido*mas*conocer*mas*a*fondo*el* funcionamiento*de*este*sistema*de*gestión*de*bases*de*datos*** La*mezcla*de*las*nociones*que*previamente*tenia*en*estas*tecnologías* comentadas* anteriormente* y* el* motivación* por* ir* aprendiendo* cada* vez* mas* acerca* de* las* mismas,* ha* generado* a* lo* largo* de* todo* el* proyecto* un* interés* y* una* motivación* a* cada* paso* que* iba* descubriendo*nuevas*posibilidades*y*formas*de*trabajo.** * * PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*6*de*64* El!planteamiento!técnico! Tras*decidir*que*la*Tienda*Virtual*iba*a*ser*una*Web*de*artículos*de* ropa* para* chico* y* echar* un* vistazo* a* las* paginas* Web* de* ropa* que* podríamos*considerar* mas*importantes* (grupo*Inditex* ,*Pull* &*Bear,* Zara,* …)* y* de* una* tienda* que* personalmente* me* gusta* a* mi* (Abercrombie*&*Fitch,*de*la*cual*he*tomado*las*imágenes*que*formaran* la*Tienda*Virtual),*he*tomado*la*decisión*que*los*colores*que*formarán* la*Tienda*van*a*ser*tonalidades*frías*como*son*el*gris*y*el*azul.** Habiendo* realizado* un* curso* en* Edinburgh* Napier* University* sobre* como*interactúan*las*nuevas*tecnologías*y*su*diseño*sobre*el*usuario*y* conociendo* que* un* portal* Web* eficaz* es* un* portal* que* centraliza* la* información*y*simplifica*al*máximo*las*tareas*a*realizar*por*el*usuario,* he*intentado*llevar*al*cabo*dichos*conocimientos*creando*un*interfaz* agradable* al* aspecto* visual* y* evitando* la* información* “extra”* que* desvíe*la*atención*del*cliente*y*el*motivo*por*el*cual*ha*entrado*en*la* Tienda*Virtual.** Gracias* a* que* la* información* en* el* frame* principal* es* información* flotante*que*varía*dependiendo*del*tamaño*de*la*ventana*del*usuario*y* de*que*los*menús*no*tienen*un*tamaño*fijo*sino*que*también*dependen* del*tamaño*de*la*ventana,*hacen*de*esta*pagina*una*pagina*compatible* con*todos*los*navegadores.* 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* decidiera*darse*a*conocer*a*través*de*nuestra*Tienda*Virtual*mediante* un*Banner.*** También*he*tenido*en*cuenta*el*tamaño*de*las*imágenes*creando*en* lugar*de*imágenes*de*tamaño*grande*y*fijo,*otras*mas*pequeñas*que*se* van*repitiendo*a*lo*largo*de*la*pagina*dependiendo*de*la*información* que*se*esté*mostrando*en*cada*momento.* * * * * * PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*7*de*64* * 2.*ESPECIFICACION*DE*REQUISITOS* 2.1.*Introducción* 2.1.1.*Propósito* El*propósito*del*siguiente*apartado*va*a*consistir*en*la*especificación* de* requerimientos* para* el* portal* Web* de* la* Tienda* Virtual.* Esta* especificación*será*útil*para*establecer*unos*prerrequisitos*y*una*base* sobre*la*que*empezar*un*trabajo*de*realización,*así*como*una*fuente*de* información* para* cualquiera* que* desee* conocer* mas* acerca* de* este* proyecto.* 2.1.2.*Ámbito* La*Tienda*Virtual*(en*adelante*simplemente*“TV”)*va*a*consistir*en*un* interfaz*Web*dinámica*que*permita*por*una*parte,*a*los*clientes*de*esta* empresa*a*consultar*el*catalogo*de*ropa*cada*temporada*así*como*sus* ofertas*y*novedades*y,*por*otra*parte,*al*personal*de*la*tienda*mediante* una*intranet,*a*gestionar*la*base*de*datos*tanto*para*la*modificación*de* los*artículos*a*mostrar*en*la*TV*como*para*la*gestión*de*los*datos*de*los* clientes*que*pueden*acceder*a*la*misma.* De* esta* manera,* cualquier* usuario* podrá* mantenerse* informado* de* todos* los* artículos* disponibles* que* ofrece* la* tienda* cada* temporada.* Además,*para*aquellos*usuarios*que*así*lo*deseen,*mediante*un*registro* muy* sencillo* podrán* realizar* sus* compras* desde* cual* quier* terminal* conectado*Internet*sin*la*necesidad*de*desplazarse*físicamente*hasta*la* TV.* Otra* de* las* funciones* que* ofrece* este* interfaz* es* la* de* permitir* al* personal* de* la* TV* la* gestión* de* la* base* de* datos* de* la* forma* mas* sencilla*posible.*Gracias*a*un*buscador,*el*empleado*puede*encontrar* rápidamente* al* cliente* sobre* el* cual* desee* hacer* modificaciones.* Además*existe*la*posibilidad*de*insertar*artículos*nuevos*en*la*base*de* datos.* Por*ultimo,*mencionar*también*que*una*vez*realizadas*las*compras*por* los*usuarios,*estos*podrán*visualizar*en*todo*momento*el*estado*en*el* cual*se*encuentran*sus*pedidos.*Estos*estados*serán*modificados*por*el* personal*de*la*TV*desde*una*de*las*opciones*de*su*intranet.* * PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*8*de*64* 2.1.3.*Definiciones,*acrónimos*y*abreviaturas* TV:*Abreviatura*de*Tienda*Virtual* Web:* La* World* Wide* Web* (del* ingles,* Telaraña* Mundial),* la* Web* o* WWW,*es*un*sistema*hipertexto*que*funciona*sobre*Internet.*Para*ver* la*información*se*utiliza*una*aplicación*llamada*navegador*Web*para* extraer*elementos*de*información*(llamados*“documentos”*o*“paginas* Web”)*de*los*servidores*Web*(o*“sitios”)*y*mostrarlos*en*la*pantalla*del* usuario.* Web! dinámica:* * Existen* dos* tipos* de* páginas* Web,* de* contenido* estático*(HTML)*y*de*contenido*dinámico*que*se*generan*a*partir*de*lo* que* el* usuario* introduce* en* un* Web* o* formulario* y* que* utiliza* el* servidor*para*construir*una*Web*personalizada*que*envía*al*cliente.* 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*rápido* crecimiento*de*popularidad*de*MySQL,*es*que*se*trata*de*un*producto* Open*Source,*y*por*tanto,*va*de*la*mano*con*este*movimiento.* HTML:*Acrónimo*ingles*de*Hyper*Text*Markup*Language*(lenguaje*de* marcación* de* hipertexto),* es* un* lenguaje* informático* diseñado* para* estructurar* textos* y* presentarlos* en* forma* de* hipertexto,* que* es* el* formato*estándar*de*las*páginas*Web.* CSS:*Las*hojas*de*estilo*en*cascada*(Cascading*Style*Sheets,*CSS)*son*un* lenguaje*formal*de*ordenador*usado*para*definir*la*presentación*de*un* documento* estructurado* escrito* en* HTML* o* XML* (y* por* extensión* XHTML).*La*W3C*(World*Wide*Web*Consortium)*es*la*encargada*de* formular*la*especificación*de*las*hojas*de*estilo*que*servirá*de*estándar* para*los*agentes*de*usuario*o*navegadores.* XHTML:*Es*el*lenguaje*de*marcación*pensado*para*sustituir*a*HTML* como* estándar* para* las* paginas* Web.* XHTML* es* la* versión* XML* de* HTML,*por*lo*que*tiene,*básicamente,*las*mismas*funcionalidades,*pero* cumple* las* especificaciones,* mas* estrictas,* de* XML.* Su* objetivo* es* avanzar*en*el*proyecto*del*World*Wide*Web*Consortium*de*lograr*una* Web*semántica,*donde*la*información,*y*la*forma*de*presentarla*estén* claramente*separadas.* PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*9*de*64* W3C:*El*World*Wide*Web*Consortium*(Consorcio*de*la*Web*o*Telaraña* Mundial),* abreviadamente* W3C,* es* una* organización* que* produce* estándares*para*la*Telaraña*Mundial*o*World*Wide*Web.* PHP:* Acrónimo* de* “PHP:* Hypertext* Processor”.* Es* un* lenguaje* de* programación*de*scripts,*concebido*en*el*tercer*trimestre*de*1994*por* Rasmus* Lerdorf.* Se* utiliza* principalmente* para* la* programación* de* GGIs*para*paginas*Web,*destaca*por*su*capacidad*de*ser*embebido*en* el*código*HTML.* HTTP:*Es*el*protocolo*de*la*Web*(WWW),*usado*en*cada*transacción.* Las*letras*significan*Hyper*Text*Transfer*Protocol,*es*decir,*protocolo* de*transferencia*hipertexto.* Usuario/Cliente:*Se*llamará*usuario*o*cliente*a*cualquier*persona*que* acceda*al*portal,*ya*sea*un*navegante*anónimo*o*un*cliente*registrado* en*la*base*de*datos*de*la*TV.* Empleado:*Se*llamará*empleado*a*todo*aquel*que*pertenezca*o*forme* 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,*IEEE*Std*830‐1998.* ‐ Foros*del*Web:*http://www.forosdelweb.com* ‐ Wikipedia*la*enciclopedia*libre:*http://es.wikipedia.org* ‐ Manual*de*PHP:*http://php.net/index.php* ‐ Especificaciones*de*XHTML*1.0*http://www.w3c.org/TR/xhtml1* ‐ Especificaciones*de*CSS*2.1:*http://www.w3c.org/TR/CSS21** ‐ Mamp:*Mac,*Apache,*MySQL,*PHP:*http://www.mamp.info* * 2.2.*Descripción*general* 2.2.1.*Perspectiva*del*producto* PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*16*de*64* Un*sencillo*update*en*SQL*permite*a*los*empleados*de*la*TV*modificar* 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* función,* deberá* pulsar* el* botón* enviar* datos* que* ejecutará* esta* consulta* y* modificará*los*datos.* Mostrar!información!para!empleados.! Uno*de*los*privilegios*de*los*que*disponen*los*empleados*es*el*de*tener* acceso*a*la*intranet*de*la*TV.*Cuando*el*empleado*desee*acceder*a*esta* intranet,* deberá* introducir* su* dni* y* su* contraseña.* El* sistema* comprobará*que*esos*datos*se*encuentran*en*la*tabla*empleados*de*la* base*de*datos.*En*caso*afirmativo,*permitirá*la*entrada*del*empleado*a* dicho*espacio.* Insertar!articulo!en!la!base!de!datos.! Un*sencillo*formulario*permite*a*los*empleados*registrados*en*la*TV* dentro* de* su* intranet* agregar* nuevos* artículos* en* la* base* de* datos.* Además*el*empleado*podrá*subir*la*imagen*de*dicho*articulo*que*será* guardada*en*la*carpeta*correspondiente.*Un*insert*guardará*toda*esta* información*en*una*tupla*de*la*tabla*stock*en*la*base*de*datos.* Búsqueda!de!pedidos!por!cliente.! Dentro*de*la*opción*que*permite*cambiar*el*estado*de*los*pedido,*existe* un*buscador*para**facilitar*esta*opción*al*empleado.*Una*consulta*select* en*SQL*buscará*el*pedido*en*cuestión*lo*mostrará*en*el*listado*inferior.* El* empleado* podrá* buscarlo* directamente* en* el* listado* o* filtrarlo* mediante*este*buscador.* Modificación!del!estado!de!un!pedido.! Todos* los* pedidos* realizados* por* clientes* en* la* TV* disponen* de* un* código* de* estado* (Realizándose,* Enviado,* Entregado/Finalizado).* Haciendo* uso* del* buscador* mencionado* en* el* punto* anterior,* el* empleado*seleccionará*el*pedido*que*desee*o*los*pedidos*que*desee*en* el* caso* de* que* se* vaya* a* realizar* un* envío* con* varios* pedidos.* Tras* modificar* los* textboxes* que* aparecen* en* la* columna* estado* de* cada* pedido*y*pulsar*el*botón*actualizar,*se*modificarán*en*la*base*de*datos* los*estados*de*los*pedidos*que*el*empleado*haya*modificado.* Mostrar!información!de!los!empleados.! PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*17*de*64* Igual* que* ocurría* con* los* clientes,* el* empleado* registrado* en* la* TV* podrá*ver*su*nombre*en*el*marco*que*existe*a*la*izquierda*de*la*TV*en* todo*momento.* Inicio!de!sesión!como!empleado!autentificado.! Todo*empleado*que*desee*acceder*a*la*intranet*deberá*introducir*su* dni* y* su* contraseña.* Esta* función* creará* una* variable* sesión* (empleado)* que* será* la* que* controle* en* todo* momento* que* el* empleado*está*registrado*y*se*le*permite*el*acceso*a*la*intranet.* * 2.3.2.*Requerimientos*de*interfaces*externos* 2.3.2.1.*Interfaz*del*usuario* Puesto*que*la*TV*es*una*tienda*online,*el*acceso*a*la*misma*se*realiza* através* de* Internet.* Para* poder* ser* mostrado* este* interfaz* Web* del* portal* es* necesario* un* navegador* Web* que* permita* al* usuario* conectarse*con*el*servidor.*El*diseño*de*esta*Web*será*para*todos*los* usuarios* el* mismo* y* debería* ser* también* el* mismo* para* todos* los* navegadores* ya* que* el* código* fuente* de* la* misma* se* ciñe* a* los* estándares*establecidos*por*el*W3C.** Dentro*de*un*diseño*que*se*mantendrá*para*todas*las*funciones*que*la* TV*permite,*se*realizarán*todas*las*consultas*por*parte*del*usuario,*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* información*a*mostrar*tendrá*un*aspecto*u*otro.*El*resto*se*no*sufrirá* modificación*alguna.* 2.3.2.2.*Interfaz*Hardware* Para* acceder* a* la* TV* los* usuarios* únicamente* necesitarán* un* ordenador* desde* el* cual,* mediante* una* interfaz* de* red* (Ethernet,* modem*ADLS,*etc.)*tengan*acceso*a*la*red*de*Internet.* Este*computador* puede*estar* basado*en* cualquier*arquitectura* pero* deberá*disponer*al*menos*de*un*procesador*con*capacidad*suficiente* para*ejecutar*un*navegador*Web*moderno.*Además*será*necesario*que* disponga* de* un* interfaz* grafico,* tarjeta* de* video* y* monitor,* con* una* resolución*minima*de*800X600.* * PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*18*de*64* 2.3.2.3.*Interfaz*Software* Cualquier*usuario*que*desee*conectarse*a*la*TV*no*necesitará*ningún* sistema*operativo*en*concreto*para*poder*acceder*a*ella.*únicamente* bastará*con*un*navegador*moderno*para*poder*visualizarla.* Por*otra*parte,*el*servidor*que*hospede*la*aplicación*estará*basado*en* Apache*con*PHP*y*MySQL,*disponibles*para*diversos*operativos:*Linux,* Windows,* Macintosh,* etc.* Por* lo* que* se* podrá* utilizar* cualquiera* de* estos.*En*este*caso*se*utilizará*Mac*OS*X.* 2.3.2.4.*Interfaces*de*comunicaciones* Existen*dos*tipos*de*conexión*entre*los*clientes*y*el*servidor*de*la*TV.* Los*usuarios*o*clientes*se*conectarán*a*la*TV*mediante*Internet.*Esta* conexión*la*realizaran*desde*su*casa*o*desde*cualquier*otro*lugar*con* acceso*a*Internet*pero*en*cualquier*caso,*desde*fuera*de*la*red*local.* Los* empleados,* en* cambio,* además* de* tener* acceso* al* igual* que* los* clientes* desde* su* hogar* a* través* de* Internet,* también* podrán* conectarse*a*través*de*la*red*interna*de*la*TV.* Cabe* mencionar* que* en* cualquiera* de* los* dos* casos* mencionados* anteriormente* el* mecanismo* de* comunicación* será* el* mismo.* Los* clientes* y* el* portal* tendrán* conexiones* TCP/IP* y* el* protocolo* para* comunicar**a*los*navegadores*con*el*servidor*Web*será*el*HTTP.* 2.3.3.*Requerimientos*de*eficiencia* Puesto*que*el*fin*de*esta*TV*es*la*venta*de*artículos,*se*pretende*esta* 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* máximo* de* conexiones* simultaneas* que* deseamos.* El* rendimiento* de* la* TV* podría* verse* afectado* directamente* por* el* numero* de* clientes* que* se* encuentren* conectados*al*mismo*tiempo.* Por*este*motivo*se*desea*asegurar*un*acceso*optimo*en*condiciones*de* carga*del*servidor*normales.* * * * PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*19*de*64* 2.3.4.*Obligaciones*de*diseño* 2.3.4.1.*Estándares*cumplidos* La*TV*ha*sido*diseñada*siguiendo*el*estándar*establecido*por*el*World* Wide*Web*Consortium*(W3C).*El*W3C*produce*recomendaciones*para* el*diseño*y*desarrollo*de*paginas*Web,*en*este*caso*XHTML*y*CSS.* Las*principales*ventajas*del*XHTML*sobre*otros*formatos*son:* • Compatibilidad*parcial*con*navegadores*antiguos:*la*información* se*visualiza,*aunque*sin*formato.** • Un* mismo* documento* puede* adoptar* diseños* radicalmente* distintos* en* diferentes* aparatos,* pudiendo* incluso* escogerse* entre*varios*diseños*para*un*mismo*medio.** • Facilidad*de*edición*directa*del*código*y*de*mantenimiento.** • Formato* abierto,* compatible* con* los* nuevos* estándares* que* actualmente* está* desarrollando* el* W3C* como* recomendación* para*futuros*agentes*de*usuario*o*navegadores.** • Los* documentos* escritos* conforme* a* XHTML* 1.0* pueden* potencialmente* presentar* mejor* rendimiento* en* las* actuales* herramientas*Web*que*aquellos*escritos*conforme*a*HTML.** Por* otra* parte,* las* hojas* de* estilo* en* cascada* (CSS)* nos* permiten* separar*la*estructura*de*la*TV*de*su*presentación.*Esta*información*la* separaremos*del*código*XHTML*en*un*archivo*(estilo.css)*aparte.* Las*ventajas*de*utilizar*CSS*son:* • Control* centralizado* de* la* presentación* de* un* sitio* Web* completo* con* lo* que* se* agiliza* de* forma* considerable* la* actualización*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* hoja*de*estilo*para*aumentar*el*tamaño*del*texto*o*remarcar*más* los*enlaces.* • Una*página*puede*disponer*de*diferentes*hojas*de*estilo*según*el* dispositivo*que*la*muestre*o*incluso*a*elección*del*usuario.*Por* PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*20*de*64* ejemplo,*para*ser*impresa,*mostrada*en*un*dispositivo*móvil,*o* ser*"leída"*por*un*sintetizador*de*voz.* • El*documento*HTML*en*sí*mismo*es*más*claro*de*entender*y*se* consigue*reducir*considerablemente*su*tamaño.* 2.3.4.2.*Limitaciones*Hardware* Para* poder* ejecutar* la* TV* bastaría* con* un* sistema* que* al* menos* contara*con*un* procesador*Intel* Pentium*IV* *y* 256*MB* de*memoria* RAM.*Desde*este*tipo*de*sistema*hacia*delante*podría*servirnos*como* servidor*pero,*como*hemos*comentado*anteriormente,*queremos*que* este* servidor* permita* el* acceso* simultaneo* a* múltiples* clientes* sin* problema* alguno.* Para* su* implantación* final* se* utilizará* un* servidor* con*un*procesador*Intel*Core*2*Duo*con*al*menos*1*GB*de*Memoria* RAM.* Además* del* motor* de* este* servidor,* el* único* requisito* mas* imprescindible*para*este*sistema*será*una*controladora*de*red*que*nos* permita* la* conexión* con* Internet* y* por* supuesto,* una* conexión* adecuada.* El*resto*del*hardware*no*precisará*de*una*configuración*especial*por*lo* que*se*pondrá*el*que*mas*se*ajuste*al*presupuesto.* * 2.3.5.*Atributos* 2.3.5.1.*Seguridad* En*primer*lugar,*ningún*usuario*podrá*acceder*a*ninguna*pagina*de*la* 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* avanzar*dentro*de*la*pagina*por*lo*que*un*acceso*directo*a*otra*no*será* permitido.*Si*un*usuario*quisiera*entrar*dentro*de*la*intranet*poniendo* la*dirección*en*la*barra*de*direcciones*se*le*denegará*el*acceso.* En* segundo* lugar,* como* en* cualquier* empresa,* la* información* es* privilegiada*y*por*lo*tanto*debe*almacenarse*de*una*forma*segura.*La* información* de* los* clientes* se* guardará* en* la* base* de* datos* y* las* contraseñas*de*estos*tendrán*un*formato*cifrado.*El*paso*en*los*que*el* usuario*introduce*la*contraseña*en*la*TV*también*se*encuentra*cifrado.* De*esta*forma*se*ha*intentado*reducir*los*riesgos*al*mínimo.* PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*21*de*64* 2.3.5.2.*Facilidades*de*mantenimiento* La*sencillez*en*el*manejo*de*la*TV*permitirá*a*los*propios*empleados*de* la* tienda* a* llevar* un* mantenimiento* básico* de* la* Web;* gestión* de* usuarios,*modificación*del*stock,*etc*…** Sin* embargo,* la* modificación* en* el* diseño* de* la* Web* o* cualquier* modificación* en* la* estructura* de* la* base* de* datos* tendrá* que* ser* llevada*a*cabo*por*el*administrador*del*portal.* * 2.3.6.*Otros*requerimientos.* 2.3.6.1.*Base*de*datos* La*TV*utilizará*una*base*de*datos*en*MySQL,*la*cual*almacenará*toda*la* información*referente*al*catalogo,*a*los*usuarios,*y*toda*la*información* de*los*pedidos*efectuados*por*los*clientes.* Las*consultas*a*la*base*de*datos*se*realizarán*por*parte*del*servidor* Web*mediante*PHP*y*su*API*de*acceso*a*bases*de*datos*MySQL.* * * * * * * * * * * * * * * PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*22*de*64* 3.*ANALISIS* 3.1.*Diagrama*UML* 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* continuación* se* detallan*brevemente*las*características*de*la*aplicación*en*base*a*este* diagrama.* La*Tienda*Virtual*como*bien*indica*su*nombre*es*la*aplicación*en*si,* entorno*a*la*cual*se*realizan*la*mayoría*de*funciones.*El*Empleado*y*el* Usuario*serán*las*clases*que*interactúen*con*este*a*través*del*Stock.* 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* realizadas*por*el*Usuario*se*harán*a*esta*clase.* El* Usuario* será* el* que* lleve* a* cabo* todas* las* funciones* de* búsqueda* sobre*el*Stock.*Existen*dos*tipos*de*Usuario;*anónimo*y*registrado.*En* base*a*este*tipo*se*permitirán*ciertos*privilegios*dentro*de*la*aplicación* como*por*ejemplo*la*realización*de*Pedidos.* La* acción* de* realizar* Pedido* solo* será* permitida* para* el* Usuario* registrado.*A*su*vez,*se*creará*un*Detallepedido*que*contendrá*toda*la* información*acerca*del*Pedido*realizado*por*el*Usuario.* El*Empleado*dispondrá*de*otro*tipo*de*privilegios*y*autoridades*sobre* los*Usuarios,*Pedidos*y*Stock.*De*esta*manera*será*capaz*de*insertar*un* nuevo*elemento*dentro*del*Stock,*modificar*el*estado*de*un*Pedido*o* varios*y*actualizar*los*datos*del*Usuario*en*caso*de*ser*necesario.* Carrito*representa*uno*de*los*motores*principales*de*la*aplicación.*Este* dispone* de* toda* la* información* de* la* sesión* 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* físicas* que* la* Tienda* Virtual* tiene.* Esta* información*será*el*nombre*y*la*dirección*donde*se*encuentra.** * * PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*23*de*64* * Diagrama#de#clases#UML# * * * * * * * * * PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*24*de*64* 3.2.*Casos*de*uso* Para* un* entendimiento* mas* intuitivo* de* las* acciones* que* se* pueden* realizar,* al* menos* las* mas* importantes,* se* adjunta* una* figura* resumiendo*dichas*funciones.* * * * En* el* Anexo! A* se* han* adjuntado* varios* casos* de* uso* con* una* explicación*mas*detallada*y*casos*reales.* * 3.3.*Diagramas*de*secuencia* A* continuación* se* muestran* varios* ejemplos* de* interacción* con* el* sistema* representados* mediante* unos* diagramas* de* secuencia* que* reflejan* a* nivel* de* ejecución* los* pasos* que* sigue* la* aplicación* para* llevar*a*cabo*las*acciones*indicadas*arriba*de*cada*ejemplo.*Se*muestra* un*ejemplo*para*el*empleado*y*otro*para*el*usuario* * PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*25*de*64* ·!Añadir!articulo!a!la!base!de!datos! * * * ! ! ! PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*32*de*64* 4.3.*Nivel*de*persistencia* Este*nivel*de*persistencia*o*de*acceso*de*datos*va*a*utilizar*una*base*de* datos*relacional*que*será*la*que*contenga*toda*la*información*de*la*TV* (catalogo*de*ropa,*información*de*usuarios,*pedidos,*etc.).*Para*el*buen* funcionamiento* se* utilizará* una* base* de* datos* perfectamente* estructurada**y*diseñada*con*una*serie*de*entidades*relacionadas*entre* si*de*una*manera*coherente*y*con*un*cierto*nivel*de*eficiencia.* La*base*de*datos*inicial*contenía*cuatro*entidades:*usuarios,*pedidos,* stock* y* tiendas.* Tras* realizar* el* modelo* Entidad‐Relación* y* efectuar* varias* pruebas* de* uso* en* la* TV* decidí* separar* usuarios* en* dos** entidades*diferentes*(clientes*y*empleados)*y*añadir*una*nueva*tabla* (detallepedidos)* que* seria* la* que* contendría* toda* la* información* detallada*de*los*pedidos*realizados.*Esta*tabla*será*una*entidad*débil* respecto*de*Pedido.*Por*tanto,*finalmente*la*base*de*datos*contendrá* las* siguientes* seis* entidades:* clientes,* detallepedidos,* empleados,* pedidos,*stock*y*tiendas.* Por*otra*parte,*todas*las*entidades*contendrán*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* por*dos*atributos.*Uno*de*ellos*lo*heredará*de*la*tabla*Pedido.* 4.3.1.*Diseño*Entidad‐Relación* * * PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*33*de*64* * 4.3.2.*Diseño*lógico* 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* CREATE*ASSERTION*tiene*CHECK*NOT*EXISTS*(* *SELECT***FROM*Pedido*WHERE*NOT*EXISTS(* *SELECT***FROM*Detallepedidos*WHERE** ** Detallepedido.Pedido*=*Pedidos.Pedido))* * PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*34*de*64* 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}* * * * * * * * * * * * * * PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*35*de*64* 5.*IMPLEMENTACION*E*INTEGRACION* 5.1.*Tecnologías* La* TV* se* ha* desarrollado* utilizando* la* combinación* de* tecnologías* MAMP.*Este*acrónimo*se*refiere*al*conjunto**de*programas*software* que* comúnmente* se* utilizan* para* desarrollar* sitios* Web* dinámicos* sobre*sistemas*operativos*Apple*Macintosh,*Mac*OS*X.** ‐*Mac*OS*X:*Sistema*operativo.* ‐*Apache:*Servidor*Web.* ‐*MySQL:*Sistema*Gestor*de*Bases*de*Datos.* ‐*PHP:*Lenguaje*de*programación*para*sitios*Web.* En*este*caso,*de*las*tecnologías*anteriores*solo*se*ha*utilizado*una*de* ellas*para*el*desarrollo*de*la*TV.*PHP*ha*sido*el*lenguaje*en*el*que*se*ha* desarrollado* el* portal* Web.* Las* otras* tres* se* considerarán* como* tecnologías*externas*a*la*aplicación*y*se*describirán**posteriormente* en*el*Anexo!B.* XHTML! Es* el* lenguaje* de* marcado* pensado* para* sustituir* a* HTML* como* estándar*para*las*páginas*Web.*En*su*versión*1.0,*XHTML*es*solamente* la* versión* XML* de* HTML,* por* lo* que* tiene,* básicamente,* las* mismas* funcionalidades,* pero* cumple* las* especificaciones,* más* estrictas,* de* XML.* Su* objetivo* es* avanzar* en* el* proyecto* del* World* Wide* Web* Consortium*de*lograr*una*Web*semántica,*donde*la*información,*y*la* forma* de* presentarla* estén* claramente* separadas.* La* versión* 1.1* es* similar,* pero* parte* a* la* especificación* en* módulos.* En* sucesivas* versiones*la*W3C*planea*romper*con*los*tags*clásicos*traídos*de*HTML.* HTTP! El*protocolo*de*transferencia*de*hipertexto*HTTP*es*el*protocolo*usado* en*cada*transacción*de*la*Web*(WWW).*HTTP*fue*desarrollado*por*el* consorcio*W3C*y*la*IETF*y*define*la*sintaxis*y*la*semántica*que*utilizan* los*elementos*software*de*la*arquitectura*Web*(clientes*y*servidores)* para*comunicarse.* Es*un*protocolo*orientado*a*transacciones*y*sigue*el*esquema*petición‐ respuesta* entre* un* cliente* y* un* servidor.* Al* cliente* que* efectúa* la* petición* (un* navegador)* se* lo* conoce* como* "user* agent"* (agente* del* PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*36*de*64* usuario).* A* la* información* transmitida* se* la* llama* recurso* y* se* la* identifica* mediante* un* URL.* Los* recursos* pueden* ser* archivos,* el* resultado*de*la*ejecución*de*un*programa,*una*consulta*a*una*base*de* datos,*la*traducción*automática*de*un*documento,*etc.* Arquitectura!Cliente!U!Servidor! Esta* arquitectura* consiste* básicamente* 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*ejecutan*sobre*una*sola* computadora*es*más*ventajosa*en*un*sistema*operativo*multiusuario* distribuido*a*través*de*una*red*de*computadoras.* En*esta*arquitectura*la*capacidad*de*proceso*está*repartida*entre*los* clientes*y*los*servidores,*aunque*son*más*importantes*las*ventajas*de* tipo* organizativo* debidas* a* la* centralización* de* la* gestión* de* la* información* y* la* separación* de* responsabilidades,* lo* que* facilita* y* clarifica*el*diseño*del*sistema.* PHP! Es*un*lenguaje*de*programación*interpretado,*diseñado*originalmente* para*la*creación*de*páginas*Web*dinámicas.*Es*usado*principalmente* en* interpretación* del* lado* del* servidor* (server‐side* scripting)* pero* actualmente* puede* ser* utilizado* desde* una* interfaz* de* línea* de* comandos* o* en* la* creación* de* otros* tipos* de* programas* incluyendo* aplicaciones*con*interfaz*gráfica*usando*las*bibliotecas*Qt*o*GTK+.* PHP* es* un* acrónimo* recursivo* que* significa* PHP# Hypertext# Pre] processor.*Fue*creado*originalmente*por*Rasmus*Lerdorf*en*1994;*sin* embargo*la*implementación*principal*de*PHP*es*producida*ahora*por* The*PHP*Group*y*sirve*como*el*estándar*de*facto*para*PHP*al*no*haber* una* especificación* formal.* Publicado* bajo* la* PHP* License,* la* Free* Software*Foundation*considera*esta*licencia*como*software*libre.* Gracias*a*esta*tecnología*orientada*a*objetos*se*pueden*realizar*tareas* en* la* aplicación* como* por* ejemplo* mantener* actualizado* en* todo* momento* el* carrito,* acceder* a* la* base* de* datos* donde* se* encuentra* toda*la*información*de*la*TV,*validación*de*datos*por*parte*de*usuario*y* empleado,*y*muchas*funciones*mas.* CSS! Las*hojas*de*estilo*en*cascada!CSS*es*un*lenguaje*usado*para*definir*la* presentación*de*un*documento*estructurado*escrito*en*HTML*o*XML*(y* por* extensión* en* XHTML).* El* W3C* es* el* encargado* de* formular* la* PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*37*de*64* especificación*de*las*hojas*de*estilo*que*servirán*de*estándar*para*los* agentes*de*usuario*o*navegadores.* La* idea* que* se* encuentra* detrás* del* desarrollo* de* CSS* es* separar* la* estructura*de*un*documento*de*su*presentación.* La* información* de* estilo* puede* ser* adjuntada* tanto* como* un* documento*separado*o*en*el*mismo*documento*HTML.*En*este*último* caso*podrían*definirse*estilos*generales*en*la*cabecera*del*documento* o*en*cada*etiqueta*particular*mediante*el*atributo*"style".*Existen*tres* tipos*de*estilos:*hoja*de*estilo*externa,*hoja*de*estilo*interna*y*estilo*en* línea.*Para*esta*aplicación*se*ha*utilizado*la*hoja*de*estilo*externa* Estas*son*algunas*de*las*ventajas*de*utilizar*hojas*de*estilo:* • Control* centralizado* de* la* presentación* del* sitio* Web* completo* con* lo* que* se* agiliza* de* forma* considerable* la* actualización* 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* hoja*de*estilo*para*aumentar*el*tamaño*del*texto*o*remarcar*más* los*enlaces.* • Una*página*puede*disponer*de*diferentes*hojas*de*estilo*según*el* dispositivo* que* la* muestre* o* incluso* a* elección* del* usuario.* Por* ejemplo,*para*ser*impresa,*mostrada*en*un*dispositivo*móvil,*o*ser* "leída"*por*un*sintetizador*de*voz.* • El*documento*HTML*en*sí*mismo*es*más*claro*de*entender*y*se* consigue* reducir* considerablemente* su* tamaño* (siempre* y* cuando*no*se*utilice*estilo*en*línea).* * 5.2.*Herramientas* La*TV*es*una*aplicación*Web*formada*por*el*portal*Web*en*el*lenguaje* de* programación* PHP* y* una* base* de* datos* relacional* en* MySQL* interconectadas*entre*si.*Además,*recordar*que*ambas*se*encuentran* en*una*maquina*con*sistema*operativo*Mac*OS*X**y*un*servidor*apache.* Un*entorno*de*desarrollo*integrado*(IDE*de*sus*siglas*en*ingles)*es*un* programa* compuesto* por* un* conjunto* de* herramientas* para* el* PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*38*de*64* programador.*Los*documentos*de*los*cuales*se*compone*la*aplicación* (HTML* y* scripts* en* PHP)* se* han* desarrollado* utilizando* un* IDE* de* programación*llamado*Komodo*Edit.* Komodo* Edit* es* un* editor* de* código* fuente* bastante* avanzado* y* extensible.* No* solo* se* limita* a* proveer* de* las* diversas* herramientas* habituales*de*los*editores*populares*para*programadores,*sino*que*va* mas* allá,* proporcionando* algunas* de* las* utilidades* típicas* de* los* entornos*de*desarrollo*profesionales.*Además,*incorpora*un*sistema*de* complementos* o* add‐ons* similar* al* que* se* conoce* por* el* navegador* Firefox,* que* hace* que* todavía* se* pueda* disfrutar* de* diversas* otras* utilidades* que* son* de* agradecer.* podría* decirse* que* es* el* hermano* menor* de* otra* herramienta* de* la* misma* compañía* llamada* Komodo* IDE,* con* la* diferencia* de* que* esta* es* una* herramienta* comercial* de* pago,*con*diversas*posibilidades*mas*avanzadas*y*que*Komodo*Edit*es* una*versión*libre*y*gratuita.* Las* gestiones* con* la* base* de* datos* se* han* realizado* con* dos* aplicaciones* distintas.* La* creación* de* tablas* y* atributos* así* como* gestiones* simples* se* han* realizado* con* phpMyAdmin.* Esta* es* una* herramienta* escrita* en* PHP* con* la* intención* de* manejar* la* administración*de*MySQL*a*través*de*paginas*Web,*utilizando*Internet.* Se*pueden*crear* y*eliminar* Bases*de*Datos,* crear,*eliminar* y*alterar* tablas,* borrar,* editar* y* añadir* campos,* ejecutar* cualquier* sentencia* SQL,*administrar*claves*en*campos,*administrar*privilegios*y*exportar* datos*en*varios*formatos.*Sin*embargo,*para*introducir*los*datos*que* compondrán*estas*tablas,*se*ha*utilizado*la*aplicación*Sequel*Pro.*Esta* aplicación*es*libre*para*Mac*OS* X*cuyo*fin* es*la*gestión*de* bases*de* datos* MySQL.* Sequel* Pro* proporciona* todo* lo* necesario* para* conectarse* a* cualquier* servidor* MySQL* ya* sea* local* o* remoto,* una* infinidad*de*opciones*a*la*hora*de*consultar,*insertar*o*eliminar*datos,* soportes*de*vistas,*así*como*una*gran*lista*de*posibilidades.* Por* ultimo,* y* en* cuanto* a* diseño* se* refiere,* PhotoShop* ha* sido* la* herramienta* con* la* que* se* han* diseñado* todas* las* fotografías* que* forman*la*estructura*de*la*TV.* * * * * PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*39*de*64* 5.3.*Detalles*de*la*implementación* 5.3.1.*Perfiles*de*usuario* A* continuación* se* detallan* cada* uno* de* los* perfiles* de* usuario* que* utilizarán*esta*aplicación.* Perfil!de!usuario!anónimo! Este*perfil*es*el*que*cualquier*persona*puede*tomar.*La*aplicación*se*ha* diseñado*de*tal*manera*que*cualquier*persona*que*acceda*a*ella,*pueda* visitarla* casi* al* completo* y* añadir* los* artículos* al* carrito* que* desee* comprar.** Se*trata*de*que*el*usuario*se*familiarice*con*el*entorno*y*no*necesite* estar*registrado*para*poder*visualizar*los*artículos*ni*ir*adquiriéndolos* a*medida*que*los*va*viendo.*Podrá*por*tanto,*visualizar*la*colección*al* completo,*generar*consultas*sobre*algún*articulo*en*concreto,*añadirlo* al*carrito,*eliminar*del*carrito,*modificar*cantidades*del*carrito*y*por* ultimo,*darse*de*alta*como*cliente*para*poder*finalizar*su*compra.* La*opción*de*registrarse*le*aparecerá*en*todo*momento*que*acceda*a*la* pagina*del*carrito.*Una*vez*esté*registrado,*esta*opción*desaparecerá*y* aparecerá*una*nueva*que*será*la*de*pasar*por*caja.*Otra*de*las*ventajas* de*registrarse,*es*que*una*vez*lo*haya*hecho,*se*crea*automáticamente* la*sesión*y*el*usuario*ya*está*logueado*y*pasa*a*ser*usuario*registrado.* Perfil!de!usuario!registrado! Si* el* usuario* se* ha* registrado,* podrá* realizar* todas* las* funciones* comentadas*en*el* punto*anterior.* también*tendrá* dos*opciones* mas;* finalizar* la* compra* con* todos* los* artículos* añadidos* al* carrito* previamente*y*visualizar*el*estado*de*los*pedidos*realizados.* Perfil!de!empleado! Este*perfil*cuenta*además*con*la*ventaja*de*poder*realizar*pequeñas* modificaciones*sobre*la*base*de*datos.*Introduciendo*sus*datos*desde* el*menú*Intranet,*accederá*a*la*misma*y*se*le*mostrarán*las*opciones* que*esta*brinda*a*los*usuarios.* * 5.3.2.*Autenticación*de*los*usuarios* La* autenticación* para* usuarios* funciona* de* igual* manera* que* la* autenticación*para*los* empleados.*El*sistema*mostrará*al*usuario*un* PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*40*de*64* formulario*en*el*que*tendrá*que*introducir*su*numero*de*usuario*(DNI)* y* su* contraseña.* La* aplicación* recogerá* estos* datos* y* los* enviará* al* sistema.* Se* comprobará* mediante* consultas* a* la* base* de* datos* que* dicha* información* es* correcta* y* existe* una* tupla* con* ese* usuario* y* contraseña.*En*este*caso,*se*creará*una*variable*sesión*que*viajará*por* todas* las* paginas* de* manera* que* el* sistema* pueda* controlar* el* todo* momento*con*esa*sesión*que*el*usuario*se*encuentra*autenticado.*En* caso*contrario*el*sistema*devolverá*un*error*y*el*usuario*tendrá*que* introducir*de*nuevo*sus*datos.* * * * * * * * * * * * * * * * * * * * * PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*41*de*64* 6.*EVALUACION*Y*PRUEBAS* 6.1.*Evaluación* La* evaluación* de* la* TV* es* un* punto* muy* importante* ya* que* de* esta* depende*que*la*pagina*Web*contenga*todas*las*necesidades*del*usuario* y*por*tanto,*el*éxito*de*esta*aplicación.* La* usabilidad* se* refiere* a* la* capacidad* de* un* software* de* ser* comprendido,* aprendido,* usado* y* ser* atractivo* para* el* usuario,* en* condiciones*específicas*de*uso.*Los*puntos*seguidos*para*conseguirla* son*los*siguiente:* ‐ La*facilidad*de*comprensión*de*la*estructuración*de*la*aplicación,* así*como*de*las*funcionalidades*y*contenidos*que*en*esta*pueden* observarse.* ‐ La*sencillez*de*uso*de*la*aplicación*en*las*etapas*iniciales.* ‐ La*rapidez*con*la*que*el*usuario*encuentra*aquello*que*busca.* ‐ La* facilidad* percibida* en* la* navegación* en* términos* de* tiempo* requeridos* y* tareas* precisadas* para* obtener* los* resultados* perseguidos.* ‐ La*capacidad*del*usuario*del*sistema*para*controlar*aquello*que* hace*y*el*lugar*en*el*que*se*encuentra*en*cada*momento.* Estos* son* algunos* de* los* puntos* seguidos* para* conseguir* una* aplicación* con* un* alto* grado* de* usabilidad,* pero* existen* numerosas* reglas*y*recomendaciones*mas.* Los* sistemas* que* mejor* se* ajustan* a* las* necesidades* del* usuario* mejoran*la*productividad*y*la*calidad*de*las*acciones*y*las*decisiones.* El*diseño*centrado*en*el*usuario*resulta*en*productos*de*mayor*calidad* de*uso,*más*competitivos*en*un*mercado*que*demanda*productos*de* fácil*uso.* * 6.2.*Pruebas* Las*primeras*pruebas*realizadas*fueron*las*pruebas*de*diseño.*Había* que*cuadrar*das*las*partes*de*la*TV*y*que*quedara*todo*en*su*lugar.*El* tamaño*de*cada*imagen*y*el*lugar*en*el*que*tenían*que*estar*fue*una* tarea*que*necesitó*un*gran*numero*de*pruebas.* PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*48*de*64* * Caso'de'uso' Añadir*a*carrito* Descripción' El*usuario*añade*un*producto*al*carrito.* Actor'iniciador' Usuario* Actores'secundarios' ‐* Resumen' Cualquier* usuario* podrá* añadir* el* producto* de* la* Tienda* Virtual* que* desee* al* carrito* en* cualquier* momento*sea*usuario*registrado*o*anónimo.** Precondiciones' ‐* Postcondiciones' El*sistema*actualizará*el*resumen*del*carrito.* Interacciones'del'usuario' Obligaciones'del'sistema' Flujo'de'eventos' 1.*El*usuario*selecciona*un* producto*en*el*catalogo.* * * 3.* El* usuario* pulsa* sobre* el*botón*“Añadir*a*carrito”* del*producto*deseado.* * 2.* El* sistema* busca* en* la* base* de* datos* las* características* del* producto.* 4.* El* sistema* comprueba* que* el* producto* se* encuentre*en*el*carrito.* 5.* Si* se* encuentra,* suma* la* cantidad* al* producto* existente*en*el*carrito.* 6.* Si* no* se* encuentra,* se* añade*el*articulo*nuevo*al* carrito.* 7.*El*sistema*actualiza*los* totales*del*carrito.* Extensiones'síncronas' En*3*el*usuario*puede*cancelar*la*operación.* Extensiones'asíncronas' ‐* * * * * Caso'de'uso' Eliminar*del*carrito* PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*49*de*64* Descripción' El*usuario*elimina*un*producto*al*carrito* Actor'iniciador' Usuario* Actores'secundarios' ‐* Resumen' Cualquier* usuario* podrá* eliminar* un* producto* del* carrito*en*el*momento*que*desee.** Precondiciones' El* producto* debe* haber* sido* añadido* al* carrito* anteriormente.* Postcondiciones' El*sistema*actualizará*el*resumen*del*carrito.* Interacciones'del'usuario' Obligaciones'del'sistema' Flujo'de'eventos' 1.*El*usuario*va*a*la*pagina* donde* se* encuentra* el* resumen*del*carrito.* 2.* Marca* el* checkbox* de* el/los* producto/s* que* desea*eliminar*del*carrito.* 3.* Pulsa* sobre* el* botón* “Actualizar”* que* se* encuentra*bajo*el*carrito.* * * * * * * * 4.* Busca* en* el* carrito* el* identificador* de* los* productos*marcados.* 5.* Elimina* del* carito* los* productos*seleccionados.* 6.*Actualiza*los*totales*del* carrito.* Extensiones'síncronas' En* 3* el* usuario* puede* cancelar* la* operación.* Si* el* usuario* elimina* todos* los* elementos* del* carrito* el* sistema*mostrará*un*mensaje*indicando*que*el*carrito* está*vacío.* Extensiones'asíncronas' ‐* * * * * Caso'de'uso' Modificar*cantidad.* PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*50*de*64* Descripción' El* usuario* modifica* la* cantidad* de* un* producto* añadido*al*carrito.* Actor'iniciador' Usuario* Actores'secundarios' ‐* Resumen' Cualquier* usuario* podrá* modificar* la* cantidad* de* un* producto*que*desee*adquirir.** Precondiciones' El* producto* debe* haber* sido* añadido* al* carrito* anteriormente.* Postcondiciones' El*sistema*actualizará*el*resumen*del*carrito.* Interacciones'del'usuario' Obligaciones'del'sistema' Flujo'de'eventos' 1.*El*usuario*va*a*la*pagina* donde* se* encuentra* el* resumen*del*carrito.* 2.*Modifica*la*cantidad*de* el/los* producto/s* que* desee*cambiar.* 3.* Pulsa* sobre* el* botón* “Actualizar”* que* se* encuentra*bajo*el*carrito.* * * * * * * * 4.*Modifica*la*cantidad*de* los*artículos*a*los*que*su* cantidad*es*diferente*a*la* anterior.* 5.*Si*la*cantidad*nueva*es* cero,*el*sistema*elimina*el* articulo*del*carrito.* 6.*Actualiza*los*totales*del* carrito.* Extensiones'síncronas' En* 3* el* usuario* puede* cancelar* la* operación.* Si* el* usuario* modifica* todas* cantidades* a* cero,* el* sistema* mostrará* un* mensaje* indicando* que* el* carrito* está* vacío.* * Extensiones'asíncronas' ‐* * * Caso'de'uso' Alta*usuario.* PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*51*de*64* Descripción' Dar*de*alta*un*usuario*en*la*Tienda*Virtual.* Actor'iniciador' Usuario* Actores'secundarios' ‐* Resumen' El*usuario*anónimo*introduce*sus*datos*personales*y* el*sistema*lo*da*de*alta*como*usuario*registrado.** Precondiciones' El*usuario*no*se*ha*dado*de*alta*previamente.* Postcondiciones' El*nuevo*usuario*queda*registrado*en*el*sistema.* Interacciones'del'usuario' Obligaciones'del'sistema' Flujo'de'eventos' 1.*El*usuario*va*una*pagina* desde* la* que* puede* darse* de*alta*(Ej.*“Carrito”).* 2.* Selecciona* la* opción* “Nuevo*usuario”.* * 4.*El*usuario*introduce*sus* datos*personales.* 5.*El*usuario*pincha*sobre* el*botón*“Enviar*datos”.* * * * 3.* El* sistema* solicita* los* datos*personales*a*través* de*un*formulario.* * * 6.* El* sistema* registra* al* nuevo*usuario*en*la*base* de*datos.* 7.* El* sistema* confirma* que*el*usuario*se*ha*dado* de*alta*correctamente.* Extensiones'síncronas' En*4*y*5*el*usuario*puede*cancelar*la*operación.* En*6,*si*el*usuario*no*ha*introducido*todos*los*campos,* el*sistema*informará*del*error*y*volverá*a*solicitarlos.* * Extensiones'asíncronas' ‐* * * * * * PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*52*de*64* Caso'de'uso' Modificar*usuario.* Descripción' Modificar*los*datos*del*usuario*en*la*Tienda*Virtual.* Actor'iniciador' Empleado* Actores'secundarios' Usuario* Resumen' El* empleado* modifica* los* datos* de* un* usuario* si* es* necesario*en*la*base*de*datos.** Precondiciones' El*usuario*solicita*al*empleado*la*modificación*de*sus* datos* personales.* El* empleado* está* conectado* a* su* Intranet.* Postcondiciones' Los* datos* del* usuario* quedan* modificados* en* el* sistema.* Interacciones'del'usuario' Obligaciones'del'sistema' Flujo'de'eventos' 1.* El* empleado* pincha* en* “Modificar*los*datos*de*un* cliente”*de*su*Intranet.* 3.* El* empleado* introduce* los*datos*del*cliente*en*el* buscador.* 5.* El* empleado* selecciona* el* nombre* del* usuario* a* modificar.* * 8.* El* empleado* modifica* los* datos* oportunos* en* el* formulario.* 9.* El* empleado* pulsa* el* botón*“Enviar*datos”.* 2.* El* sistema* muestra* un* listado* con* todos* los* clientes*y*un*buscador.* 4.*El*sistema*muestra* las* coincidencias* de* la* búsqueda.* 6.* El* sistema* busca* en* la* base* de* datos* el* cliente* seleccionado.* 7.* El* sistema* muestra* en* un* formulario* todos* los* datos*del*cliente.* * 10.*El*sistema*modifica*al* usuario* en* la* base* de* datos.* 11.* El* sistema* confirma* que* el* usuario* se* ha* modificado* correctamente.* Extensiones'síncronas' En*5*y*9*el*empleado*puede*cancelar*la*operación.* En*10,*si*el*usuario*no*ha*dejado*un*campo*en*blanco,* el*sistema*informará*del*error*y*volverá*a*solicitarlo.* * Extensiones'asíncronas' ‐* PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*53*de*64* * Caso'de'uso' Cambiar*estado.* Descripción' Cambiar*el*estado*de*un*pedido.* Actor'iniciador' Empleado* Actores'secundarios' ‐* Resumen' El* empleado* modifica* el* estado* de* uno* o* varios* pedidos*en*la*base*de*datos.** Precondiciones' El* pedido* se* ha* realizado* previamente.* El* empleado* está*conectado*a*su*Intranet* Postcondiciones' Los* datos* del* pedido* quedan* modificados* en* el* sistema.* Interacciones'del'usuario' Obligaciones'del'sistema' Flujo'de'eventos' 1.* El* empleado* pincha* en* “Cambiar* el* estado* de* un* pedido”*de*su*Intranet.* 3.* El* empleado* introduce* el* numero* del* pedido* a* modificar.* 5.* El* empleado* cambia* el* estado*del*pedido.* 6.* El* empleado* pincha* en* el*botón*“Actualizar”.* * * 2.* El* sistema* muestra* un* listado* con* todos* los* pedidos*y*un*buscador.* 4.* El* sistema* muestra* el* pedido*buscado.* * * * 7.* El* sistema* modifica* el* pedido* en* la* base* de* datos.* 8.* El* sistema* confirma* que* el* pedido* se* ha* modificado* correctamente.* Extensiones'síncronas' En*3*y*6*el*empleado*puede*cancelar*la*operación.* En*7,*si*el*empleado*introduce*un*estado*incorrecto,*el* sistema*muestra*el*error*y*vuelve*a*solicitar*el*nuevo* estado.* * Extensiones'asíncronas' ‐* * * PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*54*de*64* * Caso'de'uso' Finalizar*pedido.* Descripción' El*usuario*finaliza*su*compra.* Actor'iniciador' Usuario* Actores'secundarios' ‐* Resumen' El*usuario*finaliza*su*pedido*y*se*almacena*en*la*base* de*datos.** Precondiciones' El*usuario*se*ha*registrado*previamente*y*ha*añadido* al*carrito*artículos* Postcondiciones' El*pedido*queda*registrado*en*la*base*de*datos.* Interacciones'del'usuario' Obligaciones'del'sistema' Flujo'de'eventos' 1.*El*usuario*va*a*la*pagina* “Carrito”* y* pincha* en* “Caja”* para* finalizar* el* pedido.* * * * 2.*El*sistema*accede*al*Id.* del*usuario.* 3.* El* sistema* actualiza* la* tabla* pedido* con* una* nueva*fila.* 4.* El* sistema* accede* a* la* base* de* datos* y* busca* la* información* de* los* artículos*del*carrito.* 5.* El* sistema* actualiza* la* tabla* detallepedido* con* una*nueva*fila.* 6.* El* sistema* informa* al* usuario* mediante* un* mensaje* la* confirmación* del*pedido.* * * Extensiones'síncronas' ‐* * Extensiones'asíncronas' ‐* * PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*55*de*64* Caso'de'uso' Login*usuario.* Descripción' El*usuario*se*conecta*a*la*Tienda*Virtual.* Actor'iniciador' Usuario* Actores'secundarios' ‐* Resumen' El*usuario*inicia*sesión*con*su*DNI*y*contraseña*a*la* Tienda*Virtual.** Precondiciones' El*usuario*se*ha*registrado*previamente*y*dispone*de* una*contraseña.* Postcondiciones' ‐* Interacciones'del'usuario' Obligaciones'del'sistema' Flujo'de'eventos' 1.* El* usuario* va* a* una* pagina*desde*la*que*puede* conectarse*(Ej.*“Carrito”).* * 3.*El*usuario*introduce*sus* datos*en*el*formulario.* 4.*El* usuario* pincha*en*el* botón*“Validar”.* * * * * 2.* El* sistema* solicita* los* datos* a* través* de* un* formulario.* * * 5.* El* sistema* recoge* los* datos*del*formulario.* 6.* El* sistema* comprueba* que* dichos* datos* se* encuentren*en*la*base*de* datos.* 7.*El*sistema*inicia*sesión* con* el* usuario* en* cuestión.* Extensiones'síncronas' En*4*el*usuario*puede*cancelar*la*operación.* En* 7,* si* el* empleado* introduce* un* DNI* y* contraseña* incorrectos,* el* sistema* muestra* el* error* y* vuelve* a* solicitar*los*datos.* * Extensiones'asíncronas' ‐* * * PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*56*de*64* Anexo*B.*Descripción*de*Tecnologías.* B.1.*XHTML* XHTML,*acrónimo*en*inglés*de*eXtensible*Hypertext*Markup*Language* (lenguaje* extensible* de* marcado* de* hipertexto),* es* el* lenguaje* de* marcado* pensado* para* sustituir* a* HTML* como* estándar* para* las* páginas*Web.*En*su*versión*1.0,*XHTML*es*solamente*la*versión*XML* de*HTML,*por*lo*que*tiene,*básicamente,*las*mismas*funcionalidades,* pero*cumple*las*especificaciones,*más*estrictas,*de*XML.*Su*objetivo*es* avanzar*en*el*proyecto*del*World*Wide*Web*Consortium*de*lograr*una* Web*semántica,*donde*la*información,*y*la*forma*de*presentarla*estén* claramente* separadas.* La* versión* 1.1* es* similar,* pero* parte* a* la* especificación* en* módulos.* En* sucesivas* versiones* la* W3C* planea* romper*con*los*tags*clásicos*traídos*de*HTML.* Las*principales*ventajas*del*XHTML*sobre*otros*formatos*son:** ‐ Compatibilidad*parcial*con*navegadores*antiguos:*la*información* se*visualiza,*aunque*sin*formato.*Apuntar*que*el*XHTML*1.0*fue* diseñado* expresamente* para* ser* mostrado* en* navegadores* que* soportan*HTML*de*base.** ‐ Un* mismo* documento* puede* adoptar* diseños* radicalmente* distintos*en*distintos*aparatos,*pudiendo*incluso*escogerse*entre* varios*diseños*para*un*mismo*medio.** ‐ Facilidad*de*edición*directa*del*código*y*de*mantenimiento.** ‐ Formato* abierto,* compatible* con* los* nuevos* estándares* que* actualmente*está*desarrollando*el*W3C*como*recomendación*para* futuros*agentes*de*usuario*o*navegadores.** Inconvenientes:** ‐ Algunos*navegadores*antiguos*no*son*totalmente*compatibles*con* los* estándares,* lo* que* hace* que* las* páginas* no* siempre* se* muestren*correctamente.*Esto*cada*vez*es*menos*problemático,*al* ir*cayendo*en*desuso.** ‐ Muchas* herramientas* de* diseño* Web* aún* no* producen* código* XHTML*correcto.* * * PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*57*de*64* B.2.*HTTP*y*la*arquitectura*Cliente*–*Servidor.* El*protocolo*de*transferencia*de*hipertexto*(HTTP,*HyperText#Transfer# Protocol)*es*el*protocolo*usado*en*cada*transacción*de*la*Web*(WWW).* HTTP* define* la* sintaxis* y* la* semántica* que* utilizan* los* elementos* software* de* la* arquitectura* Web* (clientes,* servidores,* proxies)* para* comunicarse.* Es* un* protocolo* orientado* a* transacciones* y* sigue* el* esquema*petición‐respuesta*entre*un*cliente*y*un*servidor.*Al*cliente* que*efectúa*la*petición*(un*navegador*o*un*spider)*se*lo*conoce*como* "user*agent"*(agente*del*usuario).*A*la*información*transmitida*se*la* llama*recurso*y*se*la*identifica*mediante*un*URL.*Los*recursos*pueden* ser*archivos,*el*resultado*de*la*ejecución*de*un*programa,*una*consulta* a*una*base*de*datos,*la*traducción*automática*de*un*documento,*etc.* HTTP* es* un* protocolo* sin* estado,* es* decir,* que* no* guarda* ninguna* información*sobre*conexiones*anteriores.*El*desarrollo*de*aplicaciones* Web*necesita*frecuentemente*mantener*estado.*Para*esto*se*usan*las* cookies,* que* es* información* que* un* servidor* puede* almacenar* en* el* sistema* cliente.* Esto* le* permite* a* las* aplicaciones* Web* instituir* la* noción* de* "sesión",* y* también* permite* rastrear* usuarios* ya* que* las* cookies*pueden*guardarse*en*el*cliente*por*tiempo*indeterminado.* La* arquitectura* cliente* –servidor* consiste* básicamente* 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* ejecutan*sobre*una*sola*computadora*es*más*ventajosa*en*un*sistema* operativo* multiusuario* distribuido* a* través* de* una* red* de* computadoras.* En*esta*arquitectura*la*capacidad*de*proceso*está*repartida*entre*los* clientes*y*los*servidores,*aunque*son*más*importantes*las*ventajas*de* tipo* organizativo* debidas* a* la* centralización* de* la* gestión* de* la* información* y* la* separación* de* responsabilidades,* lo* que* facilita* y* clarifica*el*diseño*del*sistema.* La*separación*entre*cliente*y*servidor*es*una*separación*de*tipo*lógico,* donde* el* servidor* no* se* ejecuta* necesariamente* sobre* una* sola* máquina*ni*es*necesariamente*un*sólo*programa.*Los*tipos*específicos* de*servidores*incluyen*los*servidores*Web,*los*servidores*de*archivo,* los*servidores*del*correo,*etc.*Mientras*que*sus*propósitos*varían*de* unos*servicios*a*otros,*la*arquitectura*básica*seguirá*siendo*la*misma.** PROEYCTO*FINAL*DE*CARRERA*–*DISEÑO*E*IMPLEMENTACION*DE*UNA*TIENDA*VIRTUAL**********************************Página*64*de*64* B.6*Apache* El* servidor* Apache* es* un* servidor* HTTP* de* código* abierto* para* plataformas* Unix* (BSD,* GNU/Linux,* etcétera),* Windows* y* otras,* que* implementa* el* protocolo* HTTP/1.1* (RFC* 2616)* y* la* noción* de* sitio* virtual.*Cuando*comenzó*su*desarrollo*en*1995*se*basó*inicialmente*en* código*del*popular*NCSA*HTTPd*1.3,*pero*más*tarde*fue*reescrito*por* completo.* Su* nombre* se* debe* a* que* originalmente* Apache* consistía* solamente*en*un*conjunto*de*parches*a*aplicar*al*servidor*de*NCSA.** Era,* en* inglés,* a# patchy# server* (un* servidor* parcheado).* El* servidor* Apache*se*desarrolla*dentro*del*proyecto*HTTP*Server*(httpd)*de*la** Apache* Software* Foundation.* Apache* presenta* entre* otras* cosas* mensajes* de* error* altamente* configurables,* bases* de* datos* de* autenticación*y*negociado*de*contenido,*pero*fue*criticado*por*la*falta* de*una*interfaz*gráfica*que*ayude*en*su*configuración.** En*la*actualidad*(2005),*Apache*es*el*servidor*HTTP*más*usado,*siendo* el*servidor*HTTP*del*68%*de*los*sitios*Web*en*el*mundo*y*creciendo* aún* su* cuota* de* mercado* (estadísticas* históricas* y* de* uso* diario* proporcionadas*por*Netcraft.* * B.7*MySQL* MySQL*es*un*sistema*de*gestión*de*base*de*datos*relacional,*multihilo*y* multiusuario*con*más*de*seis*millones*de*instalaciones.*MySQL*AB*— desde*enero*de*2008*una*subsidiaria*de*Sun*Microsystems*y*ésta*a*su* vez* de* Oracle* Corporation* desde* abril* de* 2009—* desarrolla* MySQL* como*software*libre*en*un*esquema*de*licenciamiento*dual.* Por*un*lado*se*ofrece*bajo*la*GNU*GPL*para*cualquier*uso*compatible* con* esta* licencia,* pero* para* aquellas* empresas* que* quieran* incorporarlo*en*productos*privativos*deben*comprar*a*la*empresa*una* licencia* específica* que* les* permita* este* uso.* Está* desarrollado* en* su* mayor*parte*en*ANSI*C.* Al* contrario* de* proyectos* como* Apache,* donde* el* software* es* desarrollado*por*una*comunidad*pública*y*el*copyright*del*código*está* en*poder*del*autor*individual,*MySQL*es*propietario*y*está*patrocinado* por*una*empresa*privada,*que*posee*el*copyright*de*la*mayor*parte*del* código.*