Aplicación para el diseño y venta de camisetas personalizadas · 2017-10-17 · aplicación...

Daniel Guzmán Castroviejo

César Domínguez Pérez

Facultad de Ciencia y Tecnología

Grado en Ingeniería Informática

2015-2016

Título

Director/es

Facultad

Titulación

Departamento

TRABAJO FIN DE GRADO

Curso Académico

Aplicación para el diseño y venta de camisetas personalizadas

Autor/es

© El autor© Universidad de La Rioja, Servicio de Publicaciones, 2016

publicaciones.unirioja.esE-mail: [email protected]

Aplicación para el diseño y venta de camisetas personalizadas, trabajo fin degrado

de Daniel Guzmán Castroviejo, dirigido por César Domínguez Pérez (publicado por la Universidad de La Rioja), se difunde bajo una Licencia

Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported. Permisos que vayan más allá de lo cubierto por esta licencia pueden solicitarse a los

titulares del copyright.

Facultad de Ciencia y Tecnología

TRABAJO FIN DE GRADO

Grado en Ingeniería Informática

Aplicación para el diseño y venta de camisetas

personalizadas

Alumno:

Daniel Guzmán Castroviejo.

Tutores:

César Domínguez Pérez

Logroño, junio, 2016


2

Contenido RESUMEN ............................................................................................................................ 4

SUMMARY .......................................................................................................................... 4

Capítulo 1 PLANIFICACIÓN ................................................................................................... 5

1.1 Alcance ................................................................................................................................ 5

1.2 Tecnologías y metodología de desarrollo .......................................................................... 7

1.3 Tareas a realizar .................................................................................................................. 8

1.4 Descripción de las tareas .................................................................................................... 9

1.5 EDT del proyecto ............................................................................................................... 10

1.6 Diccionario de la EDT ........................................................................................................ 10

1.7 Diagrama de Gantt ........................................................................................................... 11

1.8 Plan de comunicaciones ................................................................................................... 12

1.9 Plan de riesgos .................................................................................................................. 12

Capítulo 2 ANÁLISIS DEL PRODUCTO .................................................................................. 14

2.1 Requisitos funcionales ...................................................................................................... 14

2.1.1 Usuario ....................................................................................................................... 14

2.1.2 Cliente ........................................................................................................................ 14

2.1.3 Administrador ............................................................................................................ 15

2.2 Requisitos no funcionales ................................................................................................ 15

2.3 Diagrama de casos de uso ................................................................................................ 15

2.4 Especificación de los casos de uso ................................................................................... 17

2.5 Control de calidad ............................................................................................................. 18

Capítulo 3 DISEÑO ............................................................................................................. 20

3.1 Diseño de la base de datos ............................................................................................... 20

3.2 Diseño de la lógica de negocio ......................................................................................... 24

3.3 Diseño de las interfaces gráficas y de la navegabilidad .................................................. 25

Capítulo 4 IMPLEMENTACIÓN ............................................................................................ 34

4.1 Estructura y herramientas utilizadas ............................................................................... 34

4.2 Base de datos .................................................................................................................... 34

4.3 Capa de persistencia ......................................................................................................... 34

4.4 Capa de lógica de negocio ................................................................................................ 36

4.5 Capa de presentación ....................................................................................................... 36

4.6 Implementación de las principales funcionalidades ....................................................... 39

4.6.1 Personalizacion de la librería Fabric JS ..................................................................... 39

4.6.2 Introducción de textos en el área de personalización ............................................. 43

4.7 Otros aspectos relevantes ................................................................................................ 45


3

4.7.1 Forzar la codificación en UTF-8 ................................................................................. 45

4.7.2 Denegar el acceso a ficheros con contenidos sensibles. .......................................... 45

4.7.3 Tratamiento de errores ............................................................................................. 46

Capítulo 5. CONCLUSIONES ................................................................................................ 48

5.1 Gestión real del proyecto ................................................................................................. 48

Capítulo 6. BIBLIOGRAFÍA .................................................................................................. 50


4

RESUMEN

La empresa en la que se desarrollaron mis prácticas curriculares, Manantial de Ideas S.L., está

especializada en el marketing y en el diseño gráfico. Esta empresa dispone de un amplio equipo

de diseñadores que realizan todas las tareas relacionadas con el diseño gráfico. Por ello dispone

de un banco de imágenes a las que pretende dar salida y ve una posibilidad de negocio en la

venta de artículos personalizados, utilizando dichas imágenes.

El gerente de Manantial de Ideas S.L., Juan de la Cruz Beltrán, me propone la realización de una

aplicación destinada a la personalización y venta de camisetas. Esta aplicación tendrá dos

versiones, una web y otra de escritorio alojada en las máquinas de información táctil, Infotactile,

pertenecientes a la misma empresa. Ambas versiones permitirán personalizar camisetas,

elaborar pedidos y ejecutar pagos. Además la web dispondrá de un registro de diseñadores

interesados en vender sus creaciones, un área de clientes y un área de administración.

SUMMARY

The Company where my curriculum practices were developed, Manantial de Ideas S.L., is

specialized in marketing and graphic design. This Company has a large team of designers that

perform all tasks related to graphic design. Therefore it has an image bank which aims to sell

and sees a business opportunity in selling personalized ítems, using such images.

Manantial de Ideas S.L. manager, Juan de la Cruz Beltrán, proposed me making an application

for customization and selling shirts. This application will have two versions, one web version and

other desktop version hosted in tactile information machines, Infotactile. Both versions allows

to customize shirts, develop orders and execute payments. In addition, the web version will have

a record of designers interested in selling their creations, a customer área and a administration

área.


5

Capítulo 1 PLANIFICACIÓN

1.1 Alcance

El producto a realizar consistirá en una aplicación destinada al diseño y venta de camisetas

personalizadas. Dicho producto contará con dos versiones: una versión web y una versión de

escritorio instalada en las máquinas de información táctil Infotactile pertenecientes a la empresa

Manantial de Ideas S.L. En un futuro se plantea la posibilidad de extender su uso a otro tipo de

productos, como pueden ser sudaderas, zapatillas deportivas, fundas para móviles, etc. El

nombre de la aplicación será Masdemil.

Manantial de Ideas S.L. cuenta con las máquinas de información Infotactile. Dichas máquinas las

podemos encontrar en numerosos hoteles y lugares de interés turístico, y proporcionan

información al usuario sobre la ciudad donde se encuentran, sitios de interés (monumentos,

museos, restaurantes, medios de transporte), servicios, además de venta de entradas para

espectáculos y promociones exclusivas. La empresa también cuenta con un gestor de páginas

web llamado TuCreasWeb donde el usuario puede registrar su dominio, alojar su web o tienda

virtual, e incluso destacar su página a través del posicionamiento SEO.

La aplicación web dispondrá de diferentes apartados:

Apartado de diseño y personalización de las camisetas: se podrá elegir el tipo de

camiseta en función de la persona (hombre, mujer o niño/a) y de las características de

la prenda (sin mangas, manga corta, manga larga, cuello redondo, cuello en pico), el

color y la talla. Además se podrán añadir cuadros de texto con diferentes tipográficas,

colores de letra y alineación del texto, diseños ya predefinidos o un diseño propio a

partir de una imagen. Las camisetas podrán personalizarse tanto por la parte delantera

como por la parte trasera. La región personalizable de la camiseta estará delimitada.

Además cada elemento añadido a la camiseta podrá variar de tamaño, girar y

desplazarse a cualquier posición dentro de la región. Esta sección también contará con

una opción de previsualización de manera que el usuario podrá ver el producto de una

manera más real.

Apartado de productos predefinidos: la aplicación contará con una colección de

camisetas con colores y diseños ya establecidos. Estos resultados se podrán filtrar por

el tipo de camiseta, la temática del diseño y la persona a la que va destinada. Incluso

cuando se elija un producto predefinido, este se podrá personalizar de manera que

podremos cambiar el tipo de camiseta o el color, o incluso trasladar el producto a la

sección de diseño y modificarlo por completo.

Apartado de venta de diseños: un usuario podrá vender sus propios diseños dentro de

la aplicación, únicamente proporcionando su correo electrónico, a través del cual la

empresa se pondrá en contacto para negociar sus creaciones.

Apartado de usuarios registrados: todo usuario que lo desee podrá registrarse en la

aplicación a través de un formulario, indicando sus datos personales (nombre, apellidos,

dirección, correo electrónico, teléfono), un nombre de usuario y una contraseña. Para

llevar a cabo el registro, el usuario será informado de las condiciones de uso y de las

políticas establecidas en la aplicación, y por consiguiente, deberá aceptarlas. Los

usuarios registrados podrán realizar pedidos, tramitar pagos, almacenar pedidos sin

finalizar, ver el historial de pedidos realizados, guardar sus diseños favoritos, ver el


6

estado de sus pedidos pendientes, gestionar sus datos personales e incluso dar de baja

su cuenta.

Apartado de administración: el administrador de la aplicación contará con una sección

donde podrá ver y gestionar los pedidos realizados. También podrá gestionar las

categorías, productos, diseños, (añadiendo nuevos, eliminando o modificando los ya

existentes), tipos de envío, precios, y el stock del almacén. Dispondrá de información

acerca de los usuarios registrados en la aplicación, que también podrá gestionar, así

como de diseñadores interesados en vender sus diseños. Además podrá obtener

estadísticas de la aplicación web relacionadas con las visitas, los pedidos y los usuarios

registrados.

Apartado de ayuda: la aplicación dispondrá de una sección de ayuda donde el usuario

se podrá poner en contacto con la empresa rellenando un formulario con el nombre, el

correo electrónico, un teléfono, el número del pedido si es aplicable y la consulta a

realizar. Además contará con una sección que incluirá preguntas frecuentes con sus

correspondientes respuestas y también dispondrá de información relativa a la empresa

responsable de la aplicación.

La aplicación también dispondrá de información relativa a los gastos de envío, tiempos de

entrega de los pedidos y devoluciones. A si mismo, el usuario podrá consultar las condiciones

generales de uso y la política de cookies establecida.

El administrador y los usuarios contarán con páginas de inicio de sesión diferentes para mayor

seguridad.

El administrador del sistema recibirá para cada producto personalizado dos imágenes. Una de

ellas corresponderá con la parte delantera de la camiseta y otra con la parte trasera. En dichas

imágenes estarán incluidos los diseños y los textos añadidos por el usuario. De esta manera el

administrador podrá descargarse dichas imágenes y llevar a cabo la impresión en las camisetas.

A si mismo recibirá información del tipo de camiseta, la talla, el color y la cantidad.

Para tramitar los pedidos la aplicación utilizará un carrito de la compra. En él se irán

almacenando los productos que se soliciten. Una vez que el usuario ha terminado de seleccionar

los productos, si lo desea podrá proceder con su pedido de manera que no será necesario iniciar

sesión ni tener cuenta en la aplicación. Únicamente deberá facilitar sus datos personales, una

dirección donde enviar el pedido, un correo electrónico donde le llegará su factura y un teléfono

de contacto.

Cada tipo de camiseta tendrá un precio diferente, que podrá variar en función del color, la talla

o el material. A este precio se le añadirá un coste adicional por cada diseño y texto introducido.

Todos los pedidos podrán pagarse a través de diferentes medios seguros, ya sea con tarjeta de

crédito, PayPal o contra reembolso. También se podrá elegir el tipo de envío, por correo urgente

o por correo estándar.

Cualquier usuario que no se haya registrado en la aplicación y que desee consultar el estado de

su pedido, podrá hacerlo indicando el número de pedido y su correo electrónico.

La aplicación estará disponible en varios idiomas, fundamentalmente en inglés, francés, alemán

y español.


7

Por último la aplicación deberá cumplir con los requerimientos legales establecidos en la LOPD

(Ley Orgánica de Protección de Datos), LSSI (Ley de Servicios de la Sociedad de la Información) y

la Ley de Propiedad Intelectual.

La aplicación de escritorio de las máquinas será similar al del sitio web. El usuario podrá elegir

una camiseta con un diseño predefinido o diseñar su propia camiseta con un diseño almacenado

en la aplicación o un diseño propio. Podrá añadir tantos diseños y textos como desee dentro de

la región acotada. Dispone de un carrito donde se irá almacenando cada producto

personalizado, con su cantidad, su talla y su color.

Una vez que el usuario haya seleccionado los productos que conforman su pedido, podrá llevar

a cabo el pago del mismo a través de un TPV físico y un sistema de pago en efectivo instalado

en las propias máquinas. Además la factura de su pedido será impresa también en la propia

máquina a través de una impresora.

La persona que se encuentre al cargo de la máquina recibirá toda la información

correspondiente al pedido, y podrá obtener a partir de imágenes los diseños que el usuario

desea para llevar a cabo la impresión.

Toda la información se almacenará dentro de la propia máquina, excepto los pedidos que

también deberán almacenarse en la base de datos de la aplicación web. Si la máquina no cuenta

con conexión a Internet, en el momento en que la tenga, los pedidos se deberán sincronizar con

los de la aplicación web.

Del mismo modo que la versión web, estará disponible en varios idiomas.

1.2 Tecnologías y metodología de desarrollo

La aplicación web estará desarrollada en PHP tal y como la empresa expresamente me ha

solicitado, ya que todas sus páginas webs están desarrolladas en dicho lenguaje y durante las

prácticas en la empresa he estado aprendiendo. Además PHP posee una curva de aprendizaje

muy baja, es similar a otros lenguajes como Java y su despliegue es muy sencillo. También la

aplicación será muy dinámica, por lo que utilizaremos JavaScript junto con tecnologías como

AJAX y librerías como JQuery para hacerla lo más interactiva posible, y HTML y CSS que nos

permitirán desarrollar y maquetar todas las interfaces de la aplicación.

La base de datos utilizada será MySQL, también estudiada en varias asignaturas a lo largo del

Grado. Como pasarela de pago para los pedidos se utilizará un TPV Virtual, ya que es el medio

de pago utilizado en la mayoría de las tiendas virtuales y que proporciona un nivel de seguridad

bastante adecuado.

La aplicación de escritorio estará desarrollada en C# ya que las maquinas Infotactile cuentan con

Windows 7 como sistema operativo. Todas las aplicaciones que disponen estas máquinas están

desarrolladas en Visual Basic, pero yo me decanto por C# porque ambos lenguajes han sido

desarrollados por Microsoft, son muy similares y como C# lo he utilizado a lo largo del Grado no

necesitaré dedicar horas del TFG a la preparación de Visual Basic. Además la aplicación de

escritorio contará con partes web, también desarrolladas en PHP.

La base de datos utilizada para la aplicación de escritorio será SQL gestionada a través del

sistema PostgreSQL utilizado por la empresa en el resto de aplicaciones alojadas en las

máquinas.


8

El desarrollo de ambas aplicaciones seguirá el modelo iterativo e incremental. Utilizar este

modelo permite al cliente obtener resultados importantes y usables desde las primeras

iteraciones, de manera que como máximo el cliente puede perder los recursos dedicados a una

iteración. Ademas este modelo mitiga desde el inicio los riesgos del proyecto y se gestiona la

complejidad del mismo con mayor facilidad.

1.3 Tareas a realizar

Tarea Tiempo estimado

Análisis de requisitos 14 horas

Reuniones con el cliente 6 horas

Reuniones con el tutor 12 horas

Planificación 14 horas

Diseño de la interfaz de la versión web 3 horas

Diseño de la Base de datos 4 horas

Diseño de la lógica de la versión web 8 horas

Implementación de la interfaz web 14 horas

Creación de la Base de datos 2 horas

Implementación de la lógica de la versión web 52 horas

Pruebas de la versión web 8 horas

Gestión de calidad 4 horas

Gestión de riesgos 4 horas

Gestión de comunicaciones 4 horas

Diseño de la interfaz de la versión de escritorio 3 horas

Diseño de la lógica de la versión de escritorio 8 horas

Diseño de la capa de persistencia de la versión de escritorio 4 horas

Implementación de la interfaz de escritorio 10 horas

Creación de la base de datos 2 horas

Implementación de la capa de persistencia 14 horas

Implementación de la lógica de la versión de escritorio 32 horas

Pruebas de la versión de escritorio 6 horas

Preparación de la presentación 15 horas

Elaboración de la memoria del TFG 25 horas

Seguimiento y control 8 horas

Instalación de software y herramientas 2 horas

Documentación relativa al proyecto 12 horas

Consultas y búsqueda de información 10 horas

Diseño de la capa de persistencia de la versión de escritorio 4 horas

Total 304 horas

Tabla 1. Tareas a realizar


9

1.4 Descripción de las tareas

Análisis de requisitos: se definirán los requisitos necesarios que debe cumplir la

aplicación.

Planificación: elaboración de toda la documentación relacionada con la planificación del

proyecto.

Diseño de la interfaz de la versión web: se elaborarán unas plantillas modelo que

reflejen la apariencia de diferentes partes de la web.

Diseño de la base de datos: diagramas y optimización de la base de datos de la

aplicación.

Diseño de la lógica de la versión web: diagramas y documentación que refleje la

funcionalidad de la aplicación web.

Implementación de la interfaz web: creación y maquetado de los diferentes elementos

que conforman las interfaces de la aplicación web.

Creación de la base de datos: generar tablas, relaciones entre tablas y carga de datos.

Implementación de la lógica de la versión web: programación de todo el código

necesario para la funcionalidad de la web.

Pruebas de la versión web: comprobaciones y pruebas del correcto funcionamiento de

la aplicación web.

Gestión de calidad: con ayuda de una CheckList se comprobará que se vayan cumpliendo

todos los requisitos.

Gestión de riesgos: se indicaran que riesgos puede tener el proyecto a lo largo de su

realización.

Gestión de comunicaciones: se definirá con quien comunicarse, como va a ser esa

comunicación, a través de medios y en que rango de horas o días.

Diseño de la interfaz de la versión de escritorio: se elaborara unas plantillas modelo que

refleje la apariencia de las partes que forman la versión de escritorio.

Diseño de la lógica de la versión de escritorio: diagramas y documentación que refleje

la funcionalidad de la aplicación.

Diseño de la capa de persistencia: diagramas y documentación que represente todas las

comunicaciones con la base de datos.

Implementación de la interfaz de escritorio: creación y maquetado de los diferentes

elementos que conforman las interfaces de la aplicación de escritorio.

Implementación de la lógica de la versión de escritorio: programación de todo el código

necesario para la funcionalidad de la aplicación de escritorio.

Pruebas de la versión de escritorio: comprobaciones y pruebas del correcto

funcionamiento de la aplicación de escritorio.

Preparación de la presentación: se elaborará una presentación para la defensa ante el

Tribunal del Trabajo Fin de Grado.

Elaboración de la memoria del TFG: redacción de un documento de 50 páginas que

contenga el desarrollo del TFG.

Seguimiento y control: documentación relativa al seguimiento del proyecto.

y configuración de las diferentes herramientas y programas que se utilizaran para el

desarrollo e implementación de la aplicación.

Documentación relativa al proyecto: memoria, anexos y diagramas generados.


10

Consultas y búsqueda de información: consultas a través de internet y otros medios, de

información relativa al desarrollo de todo el proyecto, tanto la documentación como la

programación del mismo.

1.5 EDT del proyecto

En la figura 1 se presenta la EDT del proyecto.

Figura 1. EDT del proyecto.

1.6 Diccionario de la EDT

1.1.1: Confección de los requisitos o requerimientos que demanda el cliente del

producto.

1.1.2: Definición de las tecnologías a utilizar para desarrollar la aplicación.

1.2.1: Descripción de las tareas a realizar y del alcance del proyecto.

1.2.2: Gestión de riesgos y posibles problemas que pueden surgir durante el desarrollo

del proyecto.

1.2.3: Documentación referida a los plazos de entrega y gestión del tiempo por medio

de fechas e hitos.

1.3.1.1: Diseño de las interfaces de la aplicación web.

1.3.1.2: Diseño de la base de datos de la aplicación web.

1.3.1.3: Diseño de la lógica de la aplicación web.

1.3.2.1: Implementación de las interfaces de la aplicación web y maquetado de los

elementos que las conforman.

1.3.2.2: Creación de la base de datos, carga de datos y gestión de las conexiones a la

misma.

1.3.2.3: Implementación de la lógica y del comportamiento de la aplicación web.


11

1.3.3: Comprobaciones y verificaciones del correcto funcionamiento de la aplicación

web.

1.4.1.1: Diseño de las interfaces de la aplicación de escritorio.

1.4.1.2: Diseño de la base de datos de la aplicación de escritorio.

1.4.1.3: Diseño de la lógica de la aplicación de escritorio.

1.4.2.1: Implementación de las interfaces de la aplicación de escritorio y maquetado de

los elementos que las conforman.

1.4.2.2: Creación de la base de datos, carga de datos y gestión de las conexiones a la

misma.

1.4.2.3: Implementación de la lógica y del comportamiento de la aplicación de escritorio.

1.4.3: Comprobaciones y verificaciones del correcto funcionamiento de la aplicación de

escritorio.

1.5.1: Documentación obtenida de las reuniones. En esta tarea englobamos todas las

reuniones a lo largo del producto, tanto con el cliente como con el tutor.

1.5.2: Seguimiento de los posibles riesgos que puedan aparecer durante el desarrollo

del proyecto.

1.5.3: Verificación de que se van cumpliendo los requisitos establecidos por el cliente

en la captura de los mismos, garantizando la calidad del producto.

1.6.1: Elaboración de la memoria correspondiente al Trabajo Fin de Grado.

1.6.2: Preparación de la presentación para la defensa del Trabajo Fin de Grado.

1.7 Diagrama de Gantt

En las figuras 2 y 3 se muestran el diagrama de Gantt y los hitos del proyecto.

Figura 2. Diagrama de Gantt


12

Figura 3. Diagrama de Gantt

1.8 Plan de comunicaciones

En esta tabla se muestra el plan de comunicaciones a seguir en este proyecto.

Interesado Informar Pedir información Acuerdos

Cliente

Asíncrono

Skype, Correo electrónico

Asíncrono

Skype, Correo electrónico

Síncrono

Reuniones, llamadas Síncrono

Reuniones

Síncrono

Reuniones

Tutor

Asíncrono

Correo electrónico, Herramienta TFG

Asíncrono

Correo electrónico Síncrono

Reuniones

Síncrono

Reuniones

Síncrono

Reuniones

Tabla 2. Plan de comunicaciones del proyecto

1.9 Plan de riesgos

En las siguientes tablas se recoge la planificación de los riesgos de este proyecto.

Riesgo Si sucede Para evitarlo/minimizarlo

Rendimiento Redistribución del trabajo Seguimiento de tareas y plazos

Enfermedad/imponderable Recortar alcance Distribuir bien las horas

Tabla 3. Riesgo de recursos humanos


13


Disfunción comunicación Revisión del plan de comunicación

Plan de comunicación bien definido

Cambios especificaciones Revisión del alcance Feedback con el cliente

Cambios alcance Revisión de costes Enseñar al cliente en las reuniones el trabajo

realizado hasta el momento

Retrasos contrato Uso de medios de comunicación alternativos

Seguimiento de plazos y tareas.

Tabla 4. Riesgos de relaciones con el cliente


No podemos usarla Cambio de tecnología Analizar bien las alternativas

Coste imprevisto de formación

Recorte del alcance Elegir tecnologías conocidas

No es adecuada para algo Búsqueda de alternativa Documentar bien las herramientas a usar

Tabla 5. Riesgos con la tecnología


14

Capítulo 2 ANÁLISIS DEL PRODUCTO

Una vez descrito el alcance del proyecto y la planificación, se recogerán y documentarán los

requisitos funcionales y no funcionales que deberán soportar ambas aplicaciones. Estos

requisitos se han obtenido a través de una reunión con el tutor de la empresa Manantial de

Ideas S.L. y el estudio de los problemas y necesidades del mismo.

2.1 Requisitos funcionales

Tanto la aplicación web como la aplicación de escritorio estarán enfocadas al diseño y venta de

camisetas personalizadas. Sin embargo los roles serán diferentes:

Para la aplicación web: usuario, cliente y administrador.

Para la aplicación de escritorio: usuario y administrador.

Para poder utilizar la aplicación web como cliente, será necesario estar registrado. Por ello

estarán disponibles dos formularios, uno de registro y otro de inicio de sesión. Este segundo

incluirá la opción de recuerdo de contraseña. Además el propio administrador podrá llevar a

cabo el registro de clientes.

A continuación definiremos las funcionalidades disponibles para cada rol.

2.1.1 Usuario

Crear camisetas personalizadas. Para ello elegirá el tipo de camiseta, la talla y el color.

Además podrá agregar en las regiones acotadas una imagen propia o una imagen

disponible en la aplicación y cuadros de texto con diferentes fuentes y colores de letras.

Ver la colección de productos prediseñados. Cuando seleccione uno de los productos,

podrá trasladarlo a la sección de personalización para editarlo.

Agregar, eliminar y modificar un producto almacenado en el carrito de la compra.

Realizar un pedido, detallando previamente sus datos personales, una dirección de

envío y el tipo de envío, correo urgente o correo ordinario.

Pagar un pedido. Podrá elegir el método de pago, ya sea PayPal, contrarreembolso o

tarjeta de crédito.

Ponerse en contacto con la empresa para ofrecer nuevos diseños. Para ello enviará un

correo electrónico a través de un formulario que se almacenará en la aplicación.

Consultar la sección de ayuda compuesta por preguntas frecuentes y diversa

información.

Registrarse en la aplicación a través de un formulario, introduciendo sus datos

personales, un nombre de usuario y una contraseña válidos.

Seleccionar el idioma de la aplicación web.

Consultar las condiciones de registro y legales del sistema.

2.1.2 Cliente

Iniciar sesión en la aplicación a través de un formulario. Además dispondrá de la opción

de obtener una nueva contraseña en caso de que el usuario no la recuerde.

Consultar el estado de un pedido. El pedido podrá estar sin finalizar, finalizado,

pendiente o entregado. Dispondrá de la opción de descargar un resumen de cada

pedido en formato PDF.


15

Consultar el historial de pedidos realizados por el usuario.

Almacenar un pedido sin finalizar, es decir, sin pagar.

Almacenar sus diseños preferidos. Se almacenarán camisetas completas, es decir, el tipo

de camiseta, color y el diseño de la parte delantera y trasera.

Añadir, modificar y eliminar los datos personales almacenados del usuario.

Dar de baja la cuenta. Para ello deberá introducir los motivos por los que el usuario

desea eliminar la cuenta.

2.1.3 Administrador

Añadir, eliminar y modificar las camisetas sobre las que aplicar el diseño. Esto incluye el

tipo de camiseta, los colores disponibles, las tallas y el precio. Además para poder añadir

nuevos productos será necesario incluir el precio.

Añadir y eliminar diseños. Cada diseño estará categorizado según la temática que

represente y para añadirlo será necesario especificarla.

Añadir y eliminar categorías de los diseños.

Consultar y actualizar stock. Podrán consultarse la cantidad de productos disponibles y

modificar esta cantidad.

Consultar, modificar y eliminar pedidos. Además podrá descargarse un resumen de cada

pedido en PDF y el diseño de la parte delantera y de la parte trasera para su impresión,

ambos en formato imagen.

Consultar, añadir y eliminar usuarios de la aplicación, así como, modificar sus datos

personales.

Consultar estadísticas sobre usuarios, pedidos, diseños, clientes y visitas en la aplicación.

Consulta de correos de diseñadores interesados en vender sus diseños.

2.2 Requisitos no funcionales

Además de los requisitos funcionales ya enunciados, deberá tenerse en cuenta lo siguiente:

La aplicación web deberá ser accesible desde cualquier dispositivo y visualizarse

correctamente.

La aplicación web contará con los mecanismos de seguridad para impedir ataques y

poner en riesgos los datos almacenados.

El usuario podrá consultar toda la información relativa a los gastos de envío, tiempos

de entrega de pedidos, devoluciones, condiciones generales de uso y política de

cookies.

La aplicación deberá cumplir con los requerimientos legales establecidos en la LOPD,

LSSI y la Ley de Propiedad Intelectual.

2.3 Diagrama de casos de uso

En las figuras 4, 5 y 6 se muestra el diagrama de casos de uso de la aplicación web:


16

Figura 4. Rol usuario del diagrama de casos de uso.

Figura 5. Rol cliente del diagrama de casos de uso.


17

Figura 6. Rol administrador del diagrama de casos de uso.

Para la aplicación de escritorio, el diagrama será similar. Las diferencias serán:

El rol cliente junto con sus casos de uso no existirán.

El rol administrador solo dispondrá de los casos de uso: consultar stock, actualizar

stock, consultar pedido, modificar pedido, eliminar pedido y descargar diseño.

2.4 Especificación de los casos de uso

La especificación completa de los casos de uso se encuentra en el Anexo 1. A continuación

describiremos los casos de uso más interesantes del diagrama anterior.


18

Caso de Uso: Realizar pedido

Actores: Usuario, cliente y administrador.

Precondiciones: El carrito deberá tener algún producto.

Postcondiciones: El pedido quedará registrado.

Pasos: 1. El usuario accederá a su carrito de la compra. 2. Se seleccionará la opción de proceder con el pedido. 3. El sistema comprobará que el carrito no está vacío. 4. El usuario indicará sus datos personales y una dirección de envío. 5. El sistema validará y almacenará los datos en el pedido. 6. El usuario elegirá el tipo de envío. 7. El sistema almacenará el tipo de envío.

Extensiones 4.1 Si el cliente ha iniciado sesión no serán necesarios introducir los datos personales, únicamente se indicará una dirección de recogida. 5.1 Si los datos no son válidos el sistema volverá al paso 4. 7. 1 Si el usuario no indica alguno de los datos requeridos, el caso de uso se acaba.

Tabla 6. Caso de uso Realizar pedido

Caso de Uso: Modificar usuario

Actores: Administrador.

Precondiciones: El usuario deberá estar registrado en el sistema.

Postcondiciones: Se modificará el usuario que solicite el administrador.

Pasos: 1. El administrador iniciará sesión en el sistema. 2. Accederá a la sección de usuarios. 3. El sistema mostrará todos los usuarios registrados. 4. El administrador seleccionará el usuario a modificar. 5. El sistema mostrará la información relativa al pedido. 6. El administrador modificará los datos del usuario. 7. El sistema validará que los datos introducidos son correctos y solicitará la

confirmación de los mismos. 8. El administrador confirmará los cambios. 9. El usuario quedará modificado.

Extensiones 7.1 Si los datos no son válidos, se volverá al paso 6. 8.1 Si el administrador no confirma los cambios, el caso de uso se acaba.

Tabla 7. Caso de uso Modificar usuario

2.5 Control de calidad

Como indicamos anteriormente, el cumplimiento de cada uno de los requisitos quedará

registrado en varios CheckList siguiendo las plantillas incluidas en las tablas 8, 9 y 10:


19

Rol Usuario

Requisito Si No NP Comentario

Personalizar camiseta

Colección de camisetas

Carrito de la compra

Gestión de Pedidos

Pagos

Formulario para diseñadores

Sección de ayuda

Registro de usuarios

Internacionalización

Condiciones legales y de registro

Tabla 8. Plantilla de calidad

Rol Cliente


Inicio de sesión

Acceso al historial de pedidos

Pedidos sin finalizar

Estado de los pedidos

Diseños preferidos

Gestión de datos personales

Eliminación de cuenta.


Rol Administrador


Gestión de camisetas

Gestión de diseños

Gestión de categorías

Gestión de stock

Gestión de pedidos

Gestión de usuarios

Estadísticas

Gestión de diseñadores



20

Capítulo 3 DISEÑO

Este capítulo recoge los aspectos fundamentales del diseño de la aplicación, como son la base

de datos y las interfaces más significativas.

3.1 Diseño de la base de datos

Para cada camiseta almacenaremos un identificador, nombre, género al que pertenece, la

imagen de la parte delantera, la imagen de la parte trasera y precio. Cada modelo camiseta

podrá tener varios colores y tallas disponibles. Además para cada talla y color habrá disponible

un stock determinado.

Sobre una camiseta se podrá aplicar un único diseño. Para cada diseño se almacenará un

identificador, un nombre, la categoría del diseño y el precio del diseño. Cada diseño estará

conformado por dos partes, la región personalizable de la parte delantera de la camiseta y la

región personalizable de la parte trasera. Ambos campos estarán formados por cadenas de texto

correspondientes a los JSON generados por la librería utilizada.

Para cada imagen disponible en la aplicación se almacenará un identificador, un nombre, la ruta

en la que se encuentra y el precio.

Para cada tipo de fuente disponible en los textos personalizables se almacenará un identificador,

un nombre, la ruta donde se encuentra el fichero que la define y el precio.

Cada camiseta personalizada o prediseñada quedará determinado por un identificador, la

camiseta sobre la que se aplica, el diseño correspondiente y el color de la camiseta.

Un usuario es un cliente que no desea realizar un pedido pero no desea registrarse en la

aplicación. Para cada usuario almacenaremos un identificador, su nombre, sus apellidos, su

correo electrónico, un teléfono, su dirección, su localidad, su provincia y el código postal.

Un cliente es un tipo de usuario que dispone de cuenta en la aplicación. Para cada cliente

además de los campos almacenados para un usuario, se almacenará un nombre de usuario, el

hash de su contraseña y su estado.

Un cliente tiene asignado un único rol: cliente o administrador de la aplicación web; y un único

estado: activo o inactivo.

Cuando un usuario solicita el registro en la aplicación se guarda el identificador del usuario, la

fecha de solicitud y un código que se envía al email del usuario y que utilizará para completar

dicho registro.

Cada usuario puede solicitar varios cambios de contraseña si la ha olvidado. Por ello se guardará

la fecha de la solicitud de cambio y un código que se envía al email del usuario para efectuar el

cambio. Además cada usuario tendrá asociados varios diseños favoritos.

Un usuario puede realizar varios pedidos. Para cada pedido se almacenará un identificador, la

fecha en la que el pedido se efectuó, el precio total, la dirección de envío, el tipo de pago y el

estado del pedido. Un pedido solamente pertenecerá a un único usuario y podrá estar

conformado por varias líneas de pedido.

Para cada línea del pedido se almacenará un identificador de la línea de pedido, el producto

asociado a la línea, la cantidad, la talla del producto y el precio total de la línea. Cada pedido


21

contará con un único tipo de envío asociado. Para cada tipo de envío se almacenará un

identificador, un nombre descriptivo y el precio del envío.

Para cada diseñador interesado en vender sus productos se almacenará únicamente su correo

electrónico.

A continuación se muestra el diagrama entidad-relación correspondiente a la base de datos

diseñada:

Figura 7. Diagrama Entidad-Relación


22

La transformación a modelo relacional del anterior diagrama queda de la siguiente manera:

CAMISETA

Id Nombre Genero Imagen_delantera Imagen_trasera Precio

Tipos de datos: Id (int). Nombre, Genero, Imagen_delantera e Imagen_trasera (varchar).

STOCK

Camiseta Color Talla Cantidad

CE: CAMISETA

Tipos de datos: Cantidad (int). Color y Talla (varchar).

DISENO

Id Nombre Categoria Parte_delantera Parte_trasera Precio

Tipos de datos: Id (int). Nombre, Categoría, Parte_delantera y Parte_trasera (varchar). Precio

(float).

IMAGEN

Id Nombre Ruta Precio

Tipos de datos: Id (int). Precio (float). Ruta y Nombre (varchar).

TEXTO

Id Nombre Ruta Precio

Tipos de datos: Id (int). Precio (float). Ruta y Nombre (varchar).

CAMISETA_DEFINIDA

Id Diseno Color

CE:CAMISETA CE:DISEÑO

Tipos de datos: Id y Diseno (int). Color (varchar)

LINEA_PEDIDO

Id Cantidad Talla Precio Camiseta Pedido

CE: CAMISETA_DEFINIDA CE: PEDIDO

Tipos de datos: Id y Cantidad (int). Talla (varchar). Precio (float).


23

PEDIDO

Id Fecha Precio Direccion Pago Estado Envio Usuario

CE:ENVIO CE:USUARIO

Tipos de datos: Id (int). Fecha (date). Precio (float). Dirección, Pago y Estado (varchar).

ENVIO

Id Nombre Precio

Tipos de datos: Id (int). Nombre (varchar). Precio (float).

USUARIO

Id Nombre Apellidos Correo Telefono Direccion Localidad Provincia CP

Tipos de datos: Id y CP (int). Nombre, Apellidos, Correo y Direccion (varchar)

CLIENTE

Id Nombre usuario Contrasena Rol Estado

CE: Usuario Unique

Tipos de datos: Id y CP (int). Nombre usuario, Contraseña ,Rol y Estado (varchar).

DISENO_FAVORITO

Camiseta Usuario

CE: CAMISETA_DEFINIDA CE: USUARIO_REGISTRADO

SOLICITUD_REGISTRO

Usuario Fecha Codigo

CE: USUARIO

Tipos de datos: Codigo (varchar).

RECUERDO_CONTRASENA

Usuario Fecha Codigo

CE: USUARIO_REGISTRADO

Tipos de datos: Codigo (varchar).

DISENADOR

Id Correo

Tipos de datos: Id (int). Correo (varchar).

Tras realizar las comprobaciones correspondientes concluimos que el proceso de normalización

ya se ha conseguido, debido a que todas las tablas están en FNBC, forma normal de Boyce-Codd.


24

Se destaca la presencia de la tabla USUARIO y CLIENTE, las cuales representan a actores

diferentes. Por un lado estarían los usuarios que desean hacer un pedido sin registrarse en la

aplicación, que se almacenarán en la tabla USUARIO, y por otro lado, los clientes, que estarían

registrados en la tabla CLIENTE y disponen de cuenta en la aplicación y correspondientemente,

mayores privilegios.

El diseño anterior recoge íntegramente la estructura de la Base de Datos de la aplicación web.

Para la aplicación de escritorio, el diseño sería el mismo pero más simplificado.

Además la tabla Pedido también se simplificaría. Los campos Usuario y Envio ya no serían

necesarios, porque la aplicación de escritorio, como se indica anteriormente, no se gestionan ni

usuarios ni pedidos.

3.2 Diseño de la lógica de negocio

La lógica de la aplicación estará apoyada íntegramente en la orientación a objetos, aplicada a lo

largo de todo el Grado. Estas clases servirán para modelar toda la funcionalidad lógica de la

aplicación.

A continuación se representa el Diagrama de Clases generado para la aplicación web:

Figura 8. Diagrama de Clases.

Todas las clases obtenidas están basadas en las tablas correspondientes a la Base de Datos

diseñada:


25

Camiseta: representará los diferentes modelos de camisetas disponibles.

Stock: representará al stock disponible para cada modelo de camiseta.

CamisetaDefinida: representará un modelo de camiseta con un diseño definido dentro

del mismo.

Diseno: representará a cada uno de los diseños definidos en la aplicación.

Texto: representarán a las diferentes tipografías disponibles para cada diseño.

Imagen: representará a las diferentes imágenes disponibles para cada diseño.

Pedido: representará a cada uno de los pedidos realizados en la aplicación.

LineaPedido: representará a una línea de pedido asociada a un pedido realizado.

Envio: representará a los tipos de envío disponibles en la aplicación.

Usuario: representará a los diferentes usuarios que han realizado un pedido en la

aplicación, pero que no disponen de una cuenta en la misma.

Cliente: hereda de la clase Usuario, y en este caso, representará a un usuario registrado

y con cuenta en la aplicación.

3.3 Diseño de las interfaces gráficas y de la navegabilidad

Para llevar a cabo el diseño de las interfaces gráficas, se han creado algunos prototipos de las

páginas más relevantes de la aplicación.

Para todas las páginas de la aplicación, contendrán una cabecera con el logo de la aplicación, un

menú con seis opciones, que nos permitan acceder a los diferentes apartados de la aplicación,

dos botones, uno de ellos para visualizar la sección de ayuda y el segundo para que el usuario

pueda ponerse en contacto con la empresa a través de un formulario, y dos opciones más, una

que nos lleva a la sección de registro o de inicio de sesión y otra que nos permite visualizar el

estado del carrito de la compra.

Figura 9. Cabecera de la aplicación web.

El menú que aparece en la figura 9 es el estándar para toda la aplicación cuando el usuario no

ha iniciado sesión en la misma. En el caso de que un cliente haya iniciado sesión en el sistema,

dispondrá de una serie de opciones adicionales:

Mis pedidos: opción que le permitirá visualizar el historial de pedidos a través de una

serie de tablas, consultar el estado de un pedido y almacenar pedidos sin finalizar.

Mis diseños favoritos: opción que le permitirá consultar y gestionar sus diseños

favoritos.

Mis datos personales: opción que le permitirá gestionar los datos asociados a la cuenta

e incluso darse de baja en la aplicación.

Para el administrador, el menú será diferente, aparecerán las siguientes opciones:

Camisetas: opción que le permitirá gestionar las camisetas almacenadas en la aplicación

y actualizar el stock.

Diseños: opción que le permitirá gestionar los diseños almacenados, además de poder

crear nuevos diseños, crear nuevas categorías y asignarlas a cada uno de ellos.


26

Pedidos: opción que le permitirá gestionar los pedidos realizados, consultando toda la

información relativa a los mismos, así como descargarse las imágenes de los diseños

para su descarga

Usuarios: opción que le permitirá gestionar los usuarios registrados en la aplicación.

Dentro de esta opción habrá una sección destinada a los diseñadores que soliciten

vender sus productos.

Estadísticas: opción que le permitirá consultar la información relativa a las estadísticas

del sitio web, tales como visitas, usuarios registrados, pedidos, productos, etc.

A su vez todas las páginas de la aplicación contarán con un pie de página, contenido en la figura

10, donde se mostrará información relativa a la empresa responsable de la aplicación web.

Figura 10. Pie de página de la aplicación web.

La página de inicio (figura 11) contendrá un banner, en donde se mostrará una animación con

algunos productos de la aplicación web y debajo del mismo, una lista con las camisetas más

vendidas y con las novedades del último mes, además de información relativa a envíos y pedidos.

Figura 11. Página de Inicio de la aplicación web.


27

Como se ha indicado en los requisitos, cada camiseta pertenece al menos a un género de

personas. Por ello la aplicación dispone de secciones en donde se muestran los productos de

cada uno de los géneros. De esta manera el usuario puede elegir el producto que más se ajusta

a sus necesidades. Cada uno de estos productos ya está previamente personalizado, y el usuario

directamente puede realizar su pedido sin tener que personalizar el producto. Por ello en cada

una de las secciones el usuario podrá visualizar todos los productos disponibles para cada

género, y seleccionando el color de la camiseta, la talla y la cantidad, podrá añadir al carrito el

producto deseado (figura 12). Otra de las opciones disponibles, será trasladar el producto

prediseñado al área de personalización de productos, para que el usuario pueda editarlo a su

gusto. Además la aplicación le mostrará como hemos dicho anteriormente, unas

recomendaciones sobre las camisetas más vendidas y las novedades del mes.

Figura 12. Sección de camisetas para hombre.

Para la región de personalización de las camisetas (figura 13), la aplicación ofrecerá todas las

opciones disponibles para personalizar un producto. El usuario previamente deberá elegir el tipo

de camiseta sobre la que aplicar el diseño, o se mostrará una camiseta por defecto, que el

usuario podrá modificar.


28

Figura 13. Elección de la camiseta a personalizar.

La primera opción será la que permita al usuario seleccionar una imagen almacenada en la

aplicación, a insertar en la región personalizable de la camiseta. La aplicación ofrecerá una lista

de dibujos y el usuario seleccionará uno de ellos que automáticamente se le mostrará en la

región, con un tamaño y posición predeterminadas. Después arrastrando y soltando podrá

posicionarlo dentro de los límites de la región, además de poder modificar su tamaño, girarlo,

ampliarlo para su visualización o eliminarlo, utilizando una serie de botones que se mostrarán

en las esquinas del cuadro que lo contiene (ver figura 14). También el usuario podrá elegir el

color y la talla de la camiseta. Se podrán personalizar dos regiones de la camiseta, la

correspondiente a la parte delantera y la parte trasera. En todo momento el usuario podrá

visualizar y seleccionar cualquiera de las dos partes.

Figura 14. Selección de la imagen a añadir.

Otra opción permitirá al usuario añadir su propia imagen al diseño, en lugar de usar una de las

que ofrece la aplicación (figura 15). Por ello dispondrá de un pequeño formulario con un campo,

donde cargará la ruta de la imagen a añadir. Una vez subida, se añadirá directamente a la región

personalizable, en donde el usuario podrá llevar a cabo las mismas acciones que con las


29

imágenes disponibles en la aplicación. Solamente se podrá añadir una imagen por región, ya sea

propia, o una de las disponibles en la aplicación.

Figura 15. Sección para añadir una imagen propia.

Por último el usuario podrá añadir cuadros de texto, con diferentes tipos de letra y colores. El

usuario elegirá el tipo de letra a través de un menú desplegable, y en un cuadro de texto

introducirá el texto a mostrar. También seleccionará el color del texto a través de un menú

desplegable de colores. Una vez introducido, deberá marcar el texto, a través de una casilla de

verificación y automáticamente aparecerá en la región personalizable. Cada cuadro de texto

insertado, contará con las mismas opciones que las imágenes añadidas, es decir, se podrá

posicionar, modificar su tamaño, girar y eliminar (figura 16). Solamente se permitirá añadir un

máximo de seis cuadros de texto por región.

Figura 16. Sección para añadir cuadros de texto.

En todas las secciones anteriores, el usuario podrá visualizar su creación a través de una vista

previa, ofreciéndole una mejor visión de su producto.


30

En todo momento el usuario podrá ver el estado de su carrito de la compra (figura 17), con la

opción disponible en la cabecera de la aplicación, en donde se irán almacenando los productos

que el usuario haya solicitado. Además de añadir productos, el usuario podrá eliminar los

productos ya añadidos o modificarlos. Solamente se podrá modificar a través del carrito la talla

de un producto y la cantidad, a través de dos menús desplegables en los que se mostraran las

tallas y las cantidades disponibles de cada talla. En el caso de que se quiera modificar el producto

o su apariencia, se seleccionará un botón que directamente redigirá al usuario al área de

personalización.

Figura 17. Carrito de la compra vacío.

En cuanto al pago y finalización de un pedido, el usuario puede o no estar registrado en la

aplicación. En el primer caso, el usuario deberá indicar el tipo de envío y la forma de pago a

través de casillas de verificación, donde seleccionará la opción que desee. Además deberá

aceptar a su vez, los términos y condiciones incluidos en la aplicación. Por defecto la dirección

almacenada en su cuenta personal, pero si desea indicar otra, se le ofrecerá la posibilidad a

través de un campo de texto. En el caso de que el usuario no quiera registrarse o no disponga

de una cuenta, adicionalmente deberá rellenar el mismo formulario anterior con todos sus datos

personales, un correo electrónico, una dirección de facturación y algún comentario personal si

lo desea (figura 18).

La aplicación ofrecerá dos tipos de envío: correo urgente o correo ordinario; y tres formas de

pago: tarjeta de crédito, contrareembolso y PayPal. También se le ofrecerá al usuario la

posibilidad de consultar los términos y condiciones de los pedidos a través de un enlace.


31

Figura 18. Sección de pago y finalización de un pedido.

Una vez que el usuario haya completado el pedido, introduciendo los datos necesarios y

seleccionando el tipo de envío y la forma de pago, la aplicación mostrará un resumen detallado

del pedido y se le solicitará la confirmación de este, pulsando sobre la opción confirmar pedido

(ver figura 19). En el caso de que el usuario en este momento desee cambiar alguno de los datos

del pedido, se le permitirá esta posibilidad, seleccionando la opción modificar datos.

Figura 19. Sección de confirmación de un pedido


32

En cuanto a la sección de inicio de sesión (figura 20), la aplicación contará con un formulario,

donde el usuario introducirá su nombre de usuario y su contraseña para acceder al área de

clientes. A través de esta sección se podrá crear una nueva cuenta en la aplicación,

seleccionando la opción crear una cuenta, lo que permitirá al usuario, rellenando los campos de

un formulario, crear una cuenta en la aplicación e iniciar sesión a través de ella.

Además esta sección dispone de la opción de recuerdo de contraseña, en la cual el usuario a

través de un campo de texto introducirá el correo electrónico con el que hizo su registro en la

aplicación, para recibir a través del mismo, un código de verificación que le permita al usuario

reestablecer una nueva contraseña.

Figura 20. Sección de inicio de sesión.

Por último, para los diseñadores interesados en vender sus creaciones, la aplicación dispone de

una sección que permite al diseñador introducir su correo electrónico a través de un campo de

texto, y aceptando los términos y condiciones, la aplicación almacene su correo electrónico, de

manera que el administrador pueda ponerse en contacto. Esta sección, además mostrará una

imagen atractiva y algunos textos informativos (ver figura 21).


33

Figura 21. Sección de contacto para los diseñadores.


34

Capítulo 4 IMPLEMENTACIÓN

En este capítulo se recogen los aspectos fundamentales de la implementación de la aplicación.

4.1 Estructura y herramientas utilizadas

Como se ha comentado anteriormente, la aplicación seguirá el paradigma de orientación a

objetos, de manera que la lógica quede bien estructurada. Desde la fase de planificación del

proyecto, la aplicación se concebirá estructurada en tres niveles o capas: capa de persistencia,

capa de lógica de negocio y capa de presentación. De esta manera se conseguirá mayor

escalabilidad y adaptabilidad si en el futuro la aplicación necesita una serie de cambios o de un

incremento en su funcionalidad. Todo ello conlleva, al ser una aplicación web, a seguir un patrón

de arquitectura MVC (modelo-vista-controlador), desarrollado e implementado en la asignatura

Programación de Aplicaciones Web, y catalogado como uno de los mejores patrones a la hora

de desarrollar una aplicación web.

Para la implementación de cada una de las capas de la aplicación web, se ha utilizado el entorno

de desarrollo Netbeans, junto con el navegador Mozilla Firefox. Además, tanto para las pruebas

de Javascript como las de PHP, se ha utilizado este mismo navegador, junto con algunas de las

extensiones que dispone: Web Developer, Firebug, ColorZilla y MesaureIt.

Por último se ha utilizado un servidor XAMPP en el equipo local. XAMPP es un servidor

multiplataforma, de software libre, que consiste en un sistema de gestión de base de datos

MySQL, un servidor web Apache e intérpretes para lenguajes de script como PHP y Perl. Este

sistema se ha seleccionado, ya que desde la empresa me recomendaron su uso y además se

adapta perfectamente a los requerimientos que necesita la aplicación.

El proyecto se encuentra alojado en un repositorio público en GitHub. Es accesible a través del

siguiente enlace: https://github.com/daguzman93/AplicacionCamisetas/

4.2 Base de datos

La Base de Datos ha sido creada siguiendo el diagrama definido en la figura 7 del capítulo

anterior, y su correspondiente paso a tablas.

4.3 Capa de persistencia

La capa de persistencia la conforma la clase GestorBD, cuyos métodos realizan tanto las

conexiones como las operaciones necesarias en cada una de las peticiones generadas por la

aplicación.

Como la aplicación sigue el paradigma de orientación a objetos, para establecer la conexión a

la base de datos, se instanciara un objeto de la clase mysqli de PHP. Los parámetros de

conexión se pasarán a través de este objeto. Estos se encuentran almacenados en un fichero

de propiedades con extensión .ini definido en la raíz del proyecto de la siguiente manera:

host = 127.0.0.1;

name = bd_camisetas;

user = root;

pass = root;

Figura 22. Definición de los parámetros de conexión a la BD.

https://github.com/daguzman93/AplicacionCamisetas/


35

Dentro de la clase GestorBD se cargará el fichero de propiedades a través del método

parse_ini_file y se definirán cuatro constantes de clase (DB_HOST, DB_USER, DB_PASS Y

DB_NAME) de manera que sean accesibles desde cualquier método de la clase para poder

establecer conexiones a la base de datos a través de un objeto mysqli.

$db = parse_ini_file($_SERVER["DOCUMENT_ROOT"] .

'/AplicacionCamisetas/parametros.ini');

include_once ($_SERVER["DOCUMENT_ROOT"] . '/AplicacionCamisetas/class/Camiseta.php');

include_once ($_SERVER["DOCUMENT_ROOT"] . '/AplicacionCamisetas/class/Stock.php');

include_once ($_SERVER["DOCUMENT_ROOT"] . '/AplicacionCamisetas/class/Imagen.php');

define('DB_HOST', $db['host']);

define('DB_USER', $db['user']);

define('DB_NAME', $db['name']);

define('DB_PASS', $db['pass']);

Figura 23. Carga del fichero de propiedades y definición de constantes de la clase

GestorBD.php.

La instancia mysqli que establece la conexión con la BD, se define en todos los métodos de la

clase GestorBD.php encargada de todas las operaciones.

$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);

Figura 24. Fragmento de la clase mysqli que establece la conexión con BD.

Los métodos de la clase GestorBD trabajan directamente con la BD de la misma manera:

1. Se establece la conexión con la Base de Datos.

2. Se codifica la conexión al formato estándar UTF-8.

3. Se ejecuta la operación determinada (consultas, inserciones o modificaciones), pasando

parámetros en el caso de que sea necesario.

4. Se obtiene el resultado, construyendo un objeto o una colección de objetos en el caso

de las consultas.

5. Se devuelve el resultado obtenido.

En el siguiente ejemplo se muestra el método correspondiente a la obtención de un modelo de

camiseta dado un identificador de la clase GestorBD.

public function getCamisetaporId($id) {

$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);

$mysqli->set_charset('utf8');

if (mysqli_connect_errno()) {

printf("Fallo la conexion: %s\n", mysqli_connect_error());

exit();

}

$query = "SELECT * FROM camiseta WHERE id=?";

if ($sentencia = $mysqli->prepare($query)) {

$sentencia->bind_param('i', $id);

$sentencia->execute();

$sentencia->bind_result($id, $nombre, $genero, $delantera, $trasera,

$precio);

while ($sentencia->fetch()) {

$camiseta = new Camiseta($id, $nombre, $genero, $delantera, $trasera,

$precio);

}

$sentencia->close();

}

$mysqli->close();

return $camiseta;}

Figura 25. Método de consulta de un modelo de camiseta a partir de su identificador.


36

4.4 Capa de lógica de negocio

Para la capa de lógica de negocio utilizaremos una serie de ficheros PHP que integraran la

funcionalidad de la aplicación web, además de servir como nexo de unión entre la capa de

persistencia y la capa de presentación.

Dentro de esta capa podemos distinguir diferentes ficheros:

Clases básicas: definidas en el diagrama de clases correspondiente a la figura 8 que

modelan los objetos con los que trabajara la aplicación.

Ficheros de terceros: son clases extraídas a través de diferentes fuentes.

Ficheros de respuesta asíncrona: se trata de ficheros que dan respuesta a peticiones

realizadas asíncronamente a través de AJAX o JQuery.

if (isset($_POST['email'])) {

$email = $_POST['email'];

if (filter_var($email, FILTER_VALIDATE_EMAIL)) {

$gdb = new GestorBD();

if (!$gdb->existeDisenador($email)) {

$gdb->almacenarDisenador($email);

echo '<h5 class="center-align white-text">Tu correo ' . $email . ' ha sido

almacenado,'

. 'en breve nos pondremos en contacto contigo</h6>';

}else{

echo '<h5 class="center-align white-text">El correo introducido ya estaba

registrado anteriormente, en breve nos pondremos en contacto contigo.</h6>';

}

}

}

Figura 26. Código correspondiente al fichero registrodisenador.php

Ficheros de enlace entre diferentes vistas: se trata de los controladores que

responderían a las peticiones ejecutadas sobre la aplicación.

4.5 Capa de presentación

Para la capa de presentación, se ha buscado una interfaz amigable, intuitiva y fácil de utilizar,

intentando reproducir con exactitud los prototipos de interfaces definidos en el capítulo 3.

En el desarrollo de esta capa de la aplicación, se ha optado por utilizar el framework Materialize,

creado y diseñado por Google, similar a otros frameworks más utilizados, como BootStrap. De

esta manera incluyendo los ficheros correspondientes y maquetando a través de HTML y CSS,

se consigue un diseño atractivo e intuitivo. Todos los iconos y estilos de fuente utilizados en la

aplicación son de uso libre.

<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.cs

s">

<script type="text/javascript" src="https://code.jquery.com/jquery-

2.1.1.min.js"></script>

<script

src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js">

</script>

Figura 27. Fragmento de código correspondiente a la inclusión de Materialize y de iconos.

Como podemos observar, también es necesaria la inclusión de JQuery, ya que algunos de los

elementos utilizados en este tipo de frameworks, requieren de su inclusión, ya que parte de su

funcionalidad y de sus efectos están implementados bajo esta biblioteca de JavaScript.


37

Como requisito de la aplicación se estableció que las interfaces deberían ser adaptativas a

cualquier tipo de dispositivo. Materialize está pensado para que esta tarea no suponga un

problema a la hora de maquetar los elementos, y dispone de un diseño en cuadricula a través

del cual, cada una de las columnas son adaptativas. En el caso en el que sea necesario establecer

alguna característica de estilo, para un tamaño de pantalla en concreto, se han utilizado las

Media Queries.

@media (min-width: 1024px) {

.container{

min-width: 1014px;

}

footer.page-footer{

background-color:#0095ad;

position: relative;

top: 65px;

}

main{

position: relative;

top: 65px;

}

nav{

height: 130px;

}

}

Figura 28. Fragmento de código de una Media Query en el fichero estilo.css.

Materialize no solo ofrece un diseño en cuadricula, también dispone de elementos propios que

siguen el estilo Material, propio de las aplicaciones Android. En la aplicación web se han utilizado

algunos de ellos, como formularios, botones, imágenes, modales, etc. La mayoría de ellos

requieren de código JQuery para implementar su funcionalidad y pueden ser personalizados a

través de código CSS.

Figura 29. Formulario de registro de clientes.


38

Figura 30. Modal que contiene los términos y condiciones del registro.

<label for="condiciones" class="black-text">Acepto los términos y condiciones. <a

href="#modalcondiciones" class="modal-trigger white-text">Leer más. </a></label>

<div id="modalcondiciones" class="modal modal-fixed-footer">

<div class="modal-content">

<h4>Términos y condiciones</h4>

<p>Lorem… </p>

</div>

<div class="modal-footer">

<a href="#!" class="modal-action modal-close waves-effect waves-green btn-

flat">Cerrar</a>

</div>

</div>

Figura 31. Fragmento de HTML correspondiente al modal de la figura 30.

$(document).ready(function () {

$('.modal-trigger').leanModal();

}

Figura 32. Fragmento de JQuery que inicializa el modal correspondiente a la figura 30.

Para la funcionalidad de ciertas partes de nuestra aplicación también se han utilizado elementos

creados por terceros y descargables de manera gratuita. Podriamos destacar el selector de color

de los textos que se pueden añadir a la región de personalización de las camisetas. Se trata de

un plugin de JQuery llamado JQuery Simple Color Picker. Para implementarlo simplemente es

necesario descargar un fichero JavaScript e incluirlo en nuestro proyecto a través de una

directiva script en HTML, de la misma manera que hemos incluido Materialize en la figura 27.

$('select[name="colorpicker-picker-option-selected"]').simplecolorpicker({picker:

true});

Figura 33. Fragmento JQuery para la inicialización de Simple Color Picker.


39

Figura 34. Ejemplo de Simple Color Picker en el área de personalización.

4.6 Implementación de las principales funcionalidades

4.6.1 Personalizacion de la librería Fabric JS La aplicación web desarrollada, tiene como parte más interesante, la personalización de las

camisetas. Tal y como describen los prototipos definidos en el capítulo 3, se situará la imagen

de una camiseta, y sobre la misma se definirá una región rectangular, tanto para la parte

delantera como para la parte trasera, en la que se podrá añadir una imagen disponible en la

aplicación o una imagen propia, así como cuatro textos de longitud limitada.

La solución a este problema se encontró en la utilización de una librería externa desarrollada en

JavaScript, llamada Fabric JS, con la cual se pueden personalizar regiones llamadas canvas. Las

posibilidades de dicha librería son múltiples, lo que supone tener que limitar la funcionalidad,

además de personalizar y customizar dicha librería para las necesidades de la aplicación.

Para hacer uso de la librería Fabric JS, es necesario disponer de JQuery en la aplicación, además

de incluir a través de un elemento script de HTML, el fichero fabric.min.js.

<script

src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>

Figura 35. Inclusión de la librería Fabric JS en el proyecto.

Como hemos comentado anteriormente, las regiones personalizables en Fabric JS se denominan

canvas. En ellas se pueden añadir, modificar y eliminar elementos tanto imágenes, textos,

formas y gráficos. Cada canvas puede ser exportado en formato JSON o en formato SVG.

Cada uno de los elementos que se encuentran dentro del canvas dispone de una serie de

controles establecidos por defecto. Para nuestra aplicación, estos controles han sido

personalizados totalmente, definiendo una serie de botones a través de imágenes, cumpliendo


40

cada uno de ellos con una función determinada. Estos controles deberán aparecer cuando el

objeto este seleccionado o activo.

function Controles(e) {

var selectedObject = e.target;

selectedObject.hasRotatingPoint = false;

selectedObject.customiseCornerIcons({

settings: {

borderColor: '#0095ad',

cornerSize: 30,

cornerShape: 'circle',

cornerPadding: 10

},

tl: {

icon: 'img/rotate.png'

},

tr: {

icon: 'img/remove.png'

},

bl: {

icon: 'img/zoom.png'

},

br: {

icon: 'img/resize.png'

}

});

selectedObject.setControlsVisibility({'mt': false, 'mb': false, 'mr': false,

'ml': false});

$('#texto1').focus();

}

Figura 36. Función JavaScript que define la personalización de los controles en cada uno de los

objetos del canvas.

En el código anterior, lo único que se consigue es personalizar la apariencia de los controles de

un objeto seleccionado y desactivar la visibilidad de los controles que no se desean utilizar. Cada

objeto incluido en el canvas, está rodeado por un recuadro que lo limita y en el que se definen

los diferentes controles en función de la posición en la que se encuentre dicho control. En

nuestro caso solo nos interesa mantener un control en cada una de las esquinas del recuadro y

el resto de controles deshabilitarlos. Cada elemento “tl”, “tr”, “bl” y “br” representa a una

esquina, esquina superior izquierda, esquina superior derecha, esquina inferior izquierda y

esquina inferior derecha en ese mismo orden.


41

Figura 37. Elemento dentro del canvas con la apariencia definida para cada control.

A continuación se definirán las funciones a realizar por cada uno de los controles, y la forma

que representará el puntero del ratón cuando este sobre ellos. Para ello tenemos que utilizar la

función customizeControls del objeto Fabric.Canvas.prototype y redefinir su comportamiento.

fabric.Canvas.prototype.customiseControls({

tl: {

action: 'rotate',

cursor: 'pointer'

},

tr: {

action: 'remove',

cursor: 'pointer'

},

bl: {

action: function (e, target) {

var elem = document.createElement("img");

elem.src = target.getSrc();

elem.width = 370;

var div = document.createElement('div');

div.className = 'content';

div.appendChild(elem);

document.getElementById('modalimagen').replaceChild(div,

document.getElementById('modalimagen').firstChild);

$('#modalimagen').openModal();

},

cursor: 'pointer'

},

br: {

action: 'scale',

cursor: 'pointer'

}

});

Figura 38. Función customizeControls que define el comportamiento de los controles de un

objeto dentro del canvas.


42

Las funcionalidades definidas para cada control son las siguientes:

Control superior izquierdo: rotación del objeto seleccionado sobre sí mismo.

Control superior derecho: borrado del objeto seleccionado.

Control inferior izquierdo: ajustar el tamaño del objeto seleccionado.

Control inferior derecho: ampliación del objeto seleccionado en un modal.

Una vez definida tanto la apariencia como los controles de los elementos dentro del canvas, es

necesario definir un tamaño máximo y mínimo para los elementos, ya que de lo contrario,

podrían ser mayores que la propia área. Para ello establecemos un límite tomando como

referencia la anchura del propio canvas. Estos límites son definidos dentro del evento scaling del

objeto.

canvas.observe("object:scaling", function (e) {

var shape = e.target;

var minWidth = (canvas.width * 0.30);

var maxWidth = (canvas.width * 0.80);

var actualWidth = shape.scaleX * shape.width;

if (!isNaN(maxWidth) && actualWidth >= maxWidth) {

shape.set({scaleX: maxWidth / shape.width, scaleY: maxWidth /

shape.width});

}

if (!isNaN(minWidth) && actualWidth <= minWidth) {

shape.set({scaleX: minWidth / shape.width, scaleY: minWidth /

shape.width});

}

LimiteBordes(e);

});

Figura 39. Función correspondiente al evento scaling de un objeto del canvas.

Para la región de personalización, no solo es suficiente con limitar el tamaño de los elementos,

también se necesita limitar la posición en la que se puede situar cada elemento. Fabric JS

permite posicionar los elementos arrastrando y soltando, pero una vez añadidos los elementos

dentro del canvas, permite posicionarlos fuera del área de personalización, quedando ocultos.

Para evitar esta situación, se ha definido una función que delimita la posición en la que se

pueden situar los elementos, haciendo que tanto el elemento como los controles que lo

conforman, queden en todo momento a la vista del usuario. Dicha función tiene en cuenta tanto

la anchura del objeto junto con sus controles como la anchura del canvas.


43

function LimiteBordes(e) {

var obj = e.target;

if (obj.getHeight() > obj.canvas.height || obj.getWidth() > obj.canvas.width)

{

obj.setScaleY(obj.originalState.scaleY);

obj.setScaleX(obj.originalState.scaleX);

}

obj.setCoords();

if (obj.getBoundingRect().top - (obj.cornerSize / 2) < 0 ||

obj.getBoundingRect().left - (obj.cornerSize / 2) < 0) {

obj.top = Math.max(obj.top, obj.top - obj.getBoundingRect().top +

(obj.cornerSize / 2));

obj.left = Math.max(obj.left, obj.left - obj.getBoundingRect().left +

(obj.cornerSize / 2));

}

if (obj.getBoundingRect().top + obj.getBoundingRect().height + obj.cornerSize

> obj.canvas.height || obj.getBoundingRect().left + obj.getBoundingRect().width +

obj.cornerSize > obj.canvas.width) {

obj.top = Math.min(obj.top, obj.canvas.height -

obj.getBoundingRect().height + obj.top - obj.getBoundingRect().top - obj.cornerSize /

2);

obj.left = Math.min(obj.left, obj.canvas.width -

obj.getBoundingRect().width + obj.left - obj.getBoundingRect().left - obj.cornerSize /

2);

}

}

Figura 40. Función que delimita la posición de los elementos dentro de una región.

Esta función se asigna los eventos moving y rotating de cada elemento incrustado dentro del

canvas. La función controles mencionada anteriormente se asigna al evento selected.

canvas.on({

'object:selected': Controles,

'object:moving': LimiteBordes,

'object:rotating': LimiteBordes,

'object:removed': VaciarInput

});

Figura 41. Asignación de cada función a su correspondiente evento dentro del canvas.

4.6.2 Introducción de textos en el área de personalización Las camisetas personalizadas disponen de la opción de introducir imágenes y textos. Para

introducir textos se implementó un formulario con cuatro campos de tipo textual, cada uno de

ellos junto con un select correspondiente al plugin JQuery Simple Color Picker y un botón.

Cada campo del formulario se asocia un texto añadido al canvas, mediante el cual se define el

contenido del texto. Pero esta asociación no es trivial. Fabric JS identifica cada texto como un

objeto de tipo Text, pero no dispone de ningún atributo o método que lo identifique de manera

única.

Para conseguir esta asociación, se ha definido una nueva clase llamada Texto, que hereda de la

clase Text de Fabric JS, a la cual se le ha añadido un atributo llamado name, con el que identificar

cada uno de los textos. Cada texto incluido en el canvas tendrá como valor del atributo name el

identificador de cada campo textual del que ha tomado su valor correspondiente. Ademas para

poder hacer uso de la nueva clase, es necesario redefinir el método initialize que define el

comportamiento al crear una nueva instancia de la clase y el método toObject que permite

definir como se exportará en formato JSON y SVG un objeto de dicha clase. Adicionalmente se

han definido dos nuevos métodos, setName y getName que permite acceder y modificar la

nueva propiedad definida.


44

fabric.Texto = fabric.util.createClass(fabric.Text, {

type: 'texto',

initialize: function (element, options) {

this.callSuper('initialize', element, options);

options && this.set('name', options.name);

},

toObject: function () {

return fabric.util.object.extend(toObject.call(this), {name: this.name});

},

getName: function () {

return this.name;

},

setName: function (nombre) {

this.name = nombre;

}

});

var canvas = this.__canvas = new fabric.Canvas('tcanvas', {

hoverCursor: 'pointer',

selection: true

});

Figura 42. Definición de la clase Texto en el fichero personalización.js.

Gracias a la identificación de cada uno de los elementos textuales dentro del canvas, el usuario

puede interactuar adecuadamente con los diferentes textos. Utilizando las nuevas propiedades

de los objetos tipo Texto del canvas, definimos una función auxiliar en JavaScript que nos

permita, al situarnos sobre uno de los campos textuales del formulario, seleccionar

automáticamente el elemento dentro del área de personalización.

function activarTexto(input) {

switch (input.attr('id')) {

case "texto1":

canvas.setActiveObject(getTextoByName(canvas, 'texto1'));

break;

case "texto2":


break;

case "texto3":


break;

case "texto4":


break;

}

}

Figura 43. Función JavaScript para activar un texto dentro del canvas.


45

Figura 44. Asociación de un texto con su correspondiente campo del formulario.

4.7 Otros aspectos relevantes

El fichero .htaccess, conocido como archivo de configuración distribuida, es un fichero

popularizado por el servidor HTTP Apache que permite definir diferentes directivas de

configuración para cada directorio y sus correspondientes subdirectorios sin necesidad de editar

el archivo de configuración principal de Apache.

El formato del este fichero es el mismo que el de configuración global de Apache y ofrece una

gran variedad de posibilidades. Sus usos más frecuentes son:

Autorización y autenticación.

Creación de URLs amigables.

Restringir el acceso.

Definición de páginas de error personalizadas.

Control de caché.

4.7.1 Forzar la codificación en UTF-8 Para que no surjan problemas a la hora de codificar tanto los archivos de la aplicación, como los

datos de entrada y salida, se establece UTF-8 como codificación estándar de nuestra aplicación

a través del fichero .htaccess utilizando las directivas addcharset y adddefaultcharset.

AddDefaultCharset utf-8

AddCharset utf-8 .css .js .json

Figura 45. Directiva que establece la codificación de los ficheros .css, .js y .json, y de los datos

en .htaccess.

4.7.2 Denegar el acceso a ficheros con contenidos sensibles. La aplicación web contiene ciertos ficheros con contenido sensible, que sino los protegemos,

pueden ser accesibles de una manera sencilla, generando un agujero de seguridad muy


46

importante, que puede ocasionar la perdida de datos, el acceso a ciertas partes no autorizadas

de la aplicación o incluso un comportamiento inesperado del sistema. A través del fichero

.htaccess, podemos restringir el acceso a los ficheros o directorios que contengan contenidos

sensibles, en nuestro caso, el fichero parámetros.ini que contiene los datos de conexión con la

base de datos o el propio .htaccess.

<FilesMatch "\.(htaccess|htpasswd|ini|phps|fla|psd|log|sh)$">

Order Allow,Deny

Deny from all

</FilesMatch>

Figura 46. Directiva que impide el acceso a ficheros sensibles en el fichero .htaccess.

4.7.3 Tratamiento de errores Con respecto al tratamiento de errores, se ha definido un único fichero PHP, donde se redirigirá

al usuario en el caso de que una petición o una página que solicite no este accesible, o definida

o no tenga permisos para hacerlo.

ErrorDocument 400 /AplicacionCamisetas/error.php





Figura 47. Fragmento del fichero .htaccess en el que se especifica la página de error error.php

De la misma manera se define cada código de error en el fichero .htaccess y es en error.php

donde en función del código, se muestra un mensaje u otro.

$status = $_SERVER['REDIRECT_STATUS'];

switch ($status) {

case 400:

$codigoerror = '400 Bad Request';

$mensaje = 'La solicitud contiene sintaxis errónea.';

break;

case 401:

$codigoerror = '401 Unauthorized';

$mensaje = 'El recurso solicitado requiere de autenticación.';

break;

case 403:

$codigoerror = '403 Forbidden';

$mensaje = 'El servidor no puede responder con el recurso porque se ha

denegado el acceso.';

break;

case 404:

$codigoerror = '404 Not Found';

$mensaje = 'Recurso no encontrado.';

break;

case 500:

$codigoerror = '500 Internal Server Error';

$mensaje = 'Error producido en el servidor.';

break;

}

Figura 48. Fragmento de código PHP en el que se trata cada caso de error en error.php


47

Figura 49. Ejemplo de página de error con código 404 definida en error.php.


48

Capítulo 5. CONCLUSIONES

Tras concluir el desarrollo de este proyecto, se puede afirmar que ha resultado una experiencia

muy grata y enriquecedora por varios motivos:

Enfrentarse a un proyecto real de manera individual y de forma totalmente autónoma.

Llevar a cabo una planificación y seguimiento exhaustivo del proyecto, que sirva como

experiencia para proyectos futuros.

Preparación y aprendizaje de nuevas tecnologías como PHP e integrar elementos

desarrollados por terceros, como librerías y plugins.

Utilizar tecnologías ya conocidas como JavaScript, JQuery o Ajax, aplicándolas de

diferentes formas e incluso incrementando los conocimientos adquiridos sobre las

mismas durante el Grado.

A priori, el proyecto parecía sencillo y se plantearon dos versiones de la aplicación, una versión

web y una versión de escritorio instalada en las máquinas de información táctil Infotactile. Sin

embargo, debido a varios inconvenientes y problemas, solamente se ha podido desarrollar la

versión web.

Un aspecto fundamental y a destacar es el desarrollo del proyecto de manera individual. A lo

largo del Grado, la mayoría de trabajos y proyectos son elaborados por equipos de dos o más

personas. Por ello cabe destacar que existe una gran diferencia entre elaborar un proyecto de

manera individual, a elaborarlo en equipo.

Por último cabe señalar que la participación de la empresa en el proyecto ha sido casi nula.

Desde el principio no dejaron claros los requisitos, lo que ha dado lugar a diferentes

interpretaciones y algunos cambios imprevistos en la fase de diseño del producto.

En definitiva, tras un periodo de varios meses desarrollando el proyecto, se puede concluir que,

en términos generales, el proyecto ha sido gestionado de una manera satisfactoria, a pesar de

las dificultades.

5.1 Gestión real del proyecto

En la siguiente tabla se reflejan las horas planificadas y reales empleadas para cada una de las

tareas:


49

Tarea Horas planificadas Horas reales

Análisis de requisitos 14 horas 10 horas

Reuniones con el cliente 6 horas 1 hora

Reuniones con el tutor 12 horas 8 horas

Planificación 14 horas 16 horas

Diseño de la interfaz de la versión web 3 horas 6 horas

Diseño de la Base de datos 4 horas 8 horas

Diseño de la lógica de la versión web 8 horas 10 horas

Implementación de la interfaz web 14 horas 30 horas

Creación de la Base de datos 2 horas 4 horas

Implementación de la lógica de la versión web

52 horas 90 horas

Pruebas de la versión web 8 horas 8 horas

Gestión de calidad 4 horas 4 horas

Gestión de riesgos 4 horas 4 horas

Gestión de comunicaciones 4 horas 4 horas

Diseño de la interfaz de la versión de escritorio

3 horas -

Diseño de la lógica de la versión de escritorio 8 horas -

Diseño de la capa de persistencia de la versión de escritorio

4 horas -

Implementación de la interfaz de escritorio 10 horas -

Creación de la base de datos 2 horas -

Implementación de la capa de persistencia 14 horas -

Implementación de la lógica de la versión de escritorio

32 horas -

Pruebas de la versión de escritorio 6 horas -

Preparación de la presentación 15 horas 10 horas

Elaboración de la memoria del TFG 25 horas 26 horas

Seguimiento y control 8 horas 4 horas

Instalación de software y herramientas 2 horas 3 horas

Documentación relativa al proyecto 12 horas 20 horas

Consultas y búsqueda de información 10 horas 10 horas

Diseño de la capa de persistencia de la versión de escritorio

4 horas -

Aprendizaje de la librería Fabric JS - 20 horas

Aprendizaje de PHP - 20 horas

Total 304 horas 316 horas

Tabla 11. Gestión real del proyecto.


50

Capítulo 6. BIBLIOGRAFÍA

Página oficial y manuales de PHP.

http://www.php.net/

http://www.desarrolloweb.com/

Página oficial del framework web MaterializeCSS.

http://materializecss.com/

Página oficial de la librería Fabric JS.

http://fabricjs.com/

Información relativa a CSS, HTML, JavaScript y JQuery.

http://www.w3schools.com/

https://jquery.com/

http://librosweb.es/

Página oficial del plugin JQuery Validation.

https://jqueryvalidation.org/

Foros de consulta y resolución de cuestiones.

http://stackoverflow.com/

Alojamiento del repositorio del proyecto.

https://github.com/

http://www.php.net/

http://www.desarrolloweb.com/

http://materializecss.com/

http://fabricjs.com/

http://www.w3schools.com/

https://jquery.com/

http://librosweb.es/

https://jqueryvalidation.org/

http://stackoverflow.com/

https://github.com/

Aplicación para el diseño y venta de camisetas personalizadas · 2017-10-17 · aplicación...

Documents

Transcript of Aplicación para el diseño y venta de camisetas personalizadas · 2017-10-17 · aplicación...