Grado en Ingenierı́a Informática

Trabajo Final de Grado

Desarrollo de una web corporativa basada

en Symfony

Supervisor:
Autor: Alejandro Fandos Renau
Paula Vilas Usó Tutor académico:
Dolores Marı́a Llidó Escrivá

Fecha de lectura: 9 de Julio de 2015

Curso académico 2014/2015
Resumen

En este documento se describe el proceso de desarrollo de una web corporativa. Partimos

de los requisitos requeridos por el cliente para desarrollar una web que estuviera acorde con las
nuevas metodologı́as aconsejándome Symfony 2. El desarrollo del proyecto consta de dos fases.
La primera de ellas consiste en la documentación y análisis de la metodologı́a a utilizar. Y la
segunda fase en la que diseñamos e implementamos el portal web con el framework Symfony 2,
HTML, CSS y JavaScript.

Este documento y el desarrollo del sistema forman parte del proyecto de final de grado del
Grado de Ingenierı́a Informática. Este trabajo se ha desarrollado durante la estancia en prácticas
en Frutı́nter, S.L., una empresa dedicada al sector hortofrutı́cola.

Palabras clave

Desarrollo web, Web corporativa, Symfony 2, PHP, framework, TFG Ingenierı́a Informática
.

Keywords

Web development, Corporative web, Symfony 2, PHP, framework, Final Project Computer
Engineering Degree
Índice general

1. Introducción 5

1.1. Contexto y motivación del proyecto . . . . . . . . . . . . . . . . . . . . . . . . . . 5

1.2. Objetivos del proyecto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2. Descripción del proyecto 7

3. Planificación del proyecto 9

3.1. Metodologı́a y definición de tareas . . . . . . . . . . . . . . . . . . . . . . . . . . 9

3.2. Planificación temporal de las tareas . . . . . . . . . . . . . . . . . . . . . . . . . . 11

3.3. Estimación y coste de los recursos del proyecto . . . . . . . . . . . . . . . . . . . 12

3.3.1. Recursos software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

3.3.2. Recursos hardware . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

3.3.3. Recursos humanos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

3.3.4. Costes estimados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

4. Análisis y diseño del software 17

4.1. Análisis de requisitos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

4.1.1. Diagrama de casos de uso . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

4.1.2. Requisitos funcionales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

4.1.3. Requisitos de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

3
 4.1.4. Diagrama de clases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

4.1.5. Diagrama de actividades . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

4.2. Diseño del sistema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

4.3. Diseño de la interfaz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

5. Implementación, pruebas y documentación 41

5.1. Detalles de implementación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

5.2. Depuración de errores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

5.3. Validación de la usabilidad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

5.4. Exportación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

5.5. Importación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

5.6. Documentación y formación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

5.6.1. Documentación del proyecto . . . . . . . . . . . . . . . . . . . . . . . . . . 55

5.6.2. Formación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

6. Resultado final 57

7. Conclusiones 61

A. Introducción a Symfony 65

A.0.3. Algunos aspectos sobre Doctrine . . . . . . . . . . . . . . . . . . . . . . . 67

B. Manual de Usuarios 69

C. Preguntas test de validación 95

4
Capı́tulo 1

Introducción

El desarrollo del documento presentado en este documento es el resultado del trabajo reali-
zado en la asignatura EI1054 Prácticas externas y Proyecto de final de grado, es decir, durante
las 300 horas de estancia en prácticas en Frutı́nter, S.L.

En la primera sección se describirá el contexto en el que se ha desarrollado el proyecto y las

motivación que ha llevado a su desarrollo.

En los siguientes apartados se describirá el proceso de desarrollo llevado a cabo para la

realización del proyecto.

Finalmente se extraerán las conclusiones sobre el resultado obtenido y el proceso llevado a

cabo para este fin.

1.1. Contexto y motivación del proyecto

Este documento presenta la propuesta de desarrollo de un proyecto realizado durante la

estancia en prácticas en la empresa Frutı́nter, S.L. para la cual realice la actualización de la
web corporativa bajo la supervisión del jefe de informática de la empresa.

Frutı́nter , S.L. es una empresa del sector hortofrutı́cola. Sus orı́genes en el antiguo ’Mercat
del Born’ de Barcelona se remontan a los años cincuenta. Aplican las novedades tecnológicas
disponibles a todos los ámbitos empresariales: desde la producción, donde hay que destacar que
poseen plantaciones propias, la gestión, tanto administrativa como comercial, incluyendo los
procesos internos de confección, calidad y trazabilidad, hasta la adquisición de nueva maquinaria
para procesar la fruta.

Actualmente, cuentan con dos plantas de confección en la provincia de Castellón, Frutı́nter

Vila-real y Frutı́nter Onda. Frutı́nter está presente desde 1957 en Barcelona y, desde su fundación
en Mercabarna, uno de los centros con mayor oferta agroalimentaria de Europa.

5
 Esta empresa dispone, también en Mercamadrid, de una Plataforma de Distribución lo que
les ha permitido ampliar su oferta prácticamente toda la variedad de productos hortofrutı́colas.
Además de una flota propia de 42 camiones para el transporte directo, aspecto que además de
rapidez, garantiza un control óptimo de la temperatura asegurando en todo momento la frescura
del producto.

Frutı́nter, S.L. ya disponı́a de un web corporativa pero debido al paso del tiempo, a la
evolución de las tecnologı́as y a la necesidad de mantener un imagen para promocionar sus
productos y campañas la web que disponı́an se habı́a quedado obsoleta por ello necesitaban un
proceso de renovación.

Por tanto la motivación de este proyecto es desarrollar una nueva web corporativa a partir de
las nuevas necesidades que han surgido, como pueden ser la necesidad de acceder a la información
de forma más dinámica y adaptarla a las redes sociales del momento.

1.2. Objetivos del proyecto

Los objetivos de este proyecto son la implementación de un portal web que permita por
una parte, mejorar la gestión de información a los clientes, haciéndola más ágil y llegando a
un público más amplio. Por otra parte, el sistema tiene que permitir la actualización de los
productos de una forma sencilla y usable. Las caracterı́sticas que el portal web debe cumplir
son las siguientes:

La autogestión del portal web, todo el contenido podrá ser modificado sin la necesidad de
conocimiento técnicos.

Diseño a medida para la adaptación de las nuevas necesidades.

Facilitar el acceso a la redes sociales de la empresa.

Mostrar un diseño más moderno y de renovación.

Página accesible por diferentes dispositivos.

6
Capı́tulo 2

Descripción del proyecto

El proyecto deberá tener las siguientes caracterı́sticas, organizadas según el uso que puede
realizar los diferentes usuarios.

En el portal web se distinguirán dos partes: la parte pública(frontend) y la parte privada

(backend). La parte pública del portal web será de carácter informativo para los visitantes con
distintas secciones: noticias, productos en la que se podrá visualizar los diferentes productos
de la campaña activa en ese momento con las posibilidades de envasado, información sobre
la empresa, la situación de las sedes, información de contacto, etc. El portal web debe poder
compartir información a través de las redes sociales.

Al finalizar el proyecto este se desplegará en el servidor que dispone la empresa, éste estará
disponible en la URL: http://www.frutinter.com. Además se ofrecerá un pequeño manual
para que los gestores puedan gestionar el portal web.

Las funcionalidades del portal para los gestores, cuando estén registrados y autentificados
en el sistema, son:

Mantener información de los productos que ofrece la empresa ası́ como de la actualización
de los posibles envases en los que se pueden encontrar.
Mantener información de los envases.
Mantener la sección de noticias. Modificando e insertando noticias para mantener actua-
lizado el portal web.

Las funcionlidades del portal para los visitantes, que no requieren de autentificación, son :

Consultar la oferta de productos con sus distintos envases.

Consultar las noticias publicadas por la empresa.
Consultar las confecciones1 disponibles.
1
Confecciones: nomenclatura utilizada en la empresa para referirse a envase.

7
 Contactar con la empresa a través de un formulario web.

Módulo de conexión a redes sociales.

El sistema debe ser extensible, debe permitir añadir nuevos módulos a las dos partes. Por
tanto, se ha de definir cómo se debe implementar un nuevo módulo para añadirlo al sistema.
Un ejemplo de extensión: módulo de trazabilidad de productos (Si dentro de las 300h fuera
posible realizarse su diseño e implementación). Serı́a útil permitir al gestor poder realizar un
seguimiento de la trazabilidad de los productos.

8
Capı́tulo 3

Planificación del proyecto

En este apartado del documento se presenta la planificación del proyecto; además de la lista
de tareas y subtareas a desarrollar durante la duración del proyecto.

3.1. Metodologı́a y definición de tareas

Este proyecto se ha desarrollado para la propia empresa en la que se realizaba la estancia

en prácticas, por lo tanto ha sido supervisado por el propio departamento.

A continuación se listarán las diferente etapas por las que ha pasado el desarrollo del pro-
yecto:

1. Inicio
En la primera de la etapas tuvo lugar una reunión con el tutor académico y el supervisor
de la empresa donde se acordaron las fechas de inicio y fin de la estancia en prácticas,
ası́ como los requisitos del proyecto. El tutor académico recomendó utilizar el framework
Symfony como herramienta para el desarrollo del proyecto. En esta reunión se acordó la
realización de 6 horas presenciales hasta completar las 300h de la estancia en prácticas.
La jornada de la estancia en prácticas empezaba a las 8:00h y terminaba a las 14:00h,
cumpliendo con el horario la estancia en prácticas comenzó el 9 de febrero terminando el
22 de abril.

2. Planificación
En esta etapa se evaluó la situación actual de la empresa para determinar las necesidades
que habı́a que cubrir en el nuevo portal web. Además se definieron los objetivos principales
del proyecto ası́ como el alcance.
Se van a concretar las tareas a realizar y situarlas en las fases correspondientes. A partir
de ellas crearemos el diagrama de Gantt donde podremos ir observando la evolución del
proyecto. Una vez finalizada esta etapa ya se pude redactar la propuesta técnica, fue
evaluada tanto por el supervisor del proyecto como el tutor.

9
 3. Definir requisitos del proyecto
Después de las reuniones realizadas con los responsables de los diferentes departamentos
de la empresa, se transforman en requisitos las peticiones que el cliente realiza sobre lo que
deberı́a cumplir el sistema o cómo lo deberı́a realizar. Para ello realizamos un diagrama
de casos de uso para describir el comportamiento del sistema. Además de la definición y
documentación del los requisitos identificados.

4. Análisis
En esta etapa se definió el diseño de la base de datos, identificando las tablas a generar
ası́ como las relaciones entre si, creando a partir de ello el diagrama de clases.
También se construyó el diagrama de actividades donde se podrá observar el funciona-
miento del sistema ası́ como las actividades que se pueden realizar.

5. Diseño
Una vez todo los requisitos y el flujo de actividades claro, se procedió a desarrollar los
diseños de las interfaces gráficas. Identificando a los diferentes usuarios para el uso del
portal web.

6. Construcción
En esta etapa se ha de instalar y configurar el framework Symfony para el desarrollo
del portal web de forma local. Se realizó el desarrollo e implementación de los diferentes
códigos a partir de las herramientas del framework ası́ como con la ayuda de JavaScript.
En secciones posteriores, se explicará de forma detallada el software empleado para el
desarrollo completo del portal web.

7. Puesta en marcha
En esta sección se ha configurado la aplicación para desplegarla en un servidor compartido,
del cual ya disponı́a la empresa.

Aunque a lo largo del proyecto, y por tanto de forma paralela, hemos ido investigando el
framework a utilizar para el desarrollo del portal web.

10
3.2. Planificación temporal de las tareas

Figura 3.1: Diagrama de Gantt

11
3.3. Estimación y coste de los recursos del proyecto

3.3.1. Recursos software

En este apartado se va a hacer una descripción más detallada de las tecnologı́as que han
sido utilizadas para desarrollar el proyecto y por qué ha sido escogida cada una de ellas.

1. Pspad [10]
Pspad es un editor gratuito para programadores que puede ser utilizado en varios entornos
de programación. Utiliza el resaltado sintáctico para múltiples lenguajes de programación,
que ayuda a la lectura con claridad del código desarrollado.

2. XAMPP [19]
XAMPP es una distribución gratuita del servidor web apache. Está compuesto por la
base de datos MySQL, el servidor web Apache y los interpretes para los lenguajes de
programación PHP y Perl. Es un software libre y fácil de utilizar, es válido para cualquiera
de los diferentes sistemas operativos. En este caso hemos utilizado como sistema operativo
Windows y como lenguaje PHP .

3. Apache [3]
Apache es un servidor web HTTP de código abierto, es necesario para ejecutar el proyecto
de forma local.

4. MySQL [5]
MySQL es un sistema de gestión de base de datos relacional y multiusuario. Esto permite
velocidad y flexibilidad, ya que las tablas están conectadas por relaciones definidas que
hacen posible combinar datos de diferentes tablas. MySQL es muy utilizado en aplicaciones
web y está muy ligada al lenguaje de programación PHP. Es una base de datos muy rápida
aunque puede provocar problemas de integridad si el entorno tiene alta concurrencia en la
modificación de datos. Gracias a ello encaja perfectamente con proyectos web, ya que en
estos hay una baja concurrencia en la modificación de datos. Se ha escogido este lenguaje,
ya que como podremos observar posteriormente, el servidor compartido del cual dispone
la empresa posee bases de datos que se implementan con este lenguaje.

5. Symfony 2[7] [16]

Symfony es un framework para crear aplicaciones y portales web con PHP. Este framework
está basado en el patrón Modelo Vista Controlador, separa la lógica de negocio, la lógica
del servidor y la presentación de la aplicación web. Automatiza las tareas más comunes
permitiendo al desarrollador dedicarse por completo a los aspectos más especı́ficos de cada
aplicación.

6. YAML [8] Los archivos de configuración de Symfony2 se pueden escribir en PHP, en XML
o en YAML. YAML es probablemente el formato más equilibrado, ya que es mucho más
conciso que XML y es bastante flexible. Su gran desventaja es que no se puede validar
automáticamente, por lo que la mayorı́a de los errores sólo puedes descubrirlos al ejecutar
la aplicación. Hemos decido realizar los archivos de configuración de YAML al ser el
formato más equilibrado.

12
 7. Doctrine [6]
Doctrine es un mapeador de objetos-relacional escrito en PHP que proporciona una capa
de persistencia para objetos PHP. El componente que se encarga por defecto de gestionar
el modelo en Symfony es una capa de tipo ORM (object/relational mapping). En las
aplicaciones Symfony, el acceso y la modificación de los datos almacenados en la base de
datos se realiza mediante objetos; ası́ que nunca se accede de forma explı́cita a la base
de datos. Este comportamiento permite un alto nivel de abstracción y permite una fácil
portabilidad. La principal ventaja que aporta el ORM es la reutilización, permitiendo
llamar a los métodos de un objeto de datos desde varias partes de la aplicación e incluso
desde diferentes aplicaciones. La capa ORM también encapsula la lógica de los datos. La
utilización de objetos en vez de registros y de clases en vez de tablas, tiene otra ventaja:
permite añadir métodos accesores en los objetos que no tienen relación directa con una
tabla.

8. Git [12]
Git es un sistema de control de versiones distribuido que permite mantener una gran
cantidad de código caracterizándose por su eficiencia. Git realiza el control de versiones
en repositorios locales.

9. HTML 5 [17]
HTML hace referencia al lenguaje de marcado para la elaboración de páginas web. Es
un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes
versiones, define una estructura básica y un código para la definición de contenido de una
página web, como texto, imágenes, videos, entre otros. Es un estándar a cargo de la W3C,
organización dedicada a la estandarización de casi todas las tecnologı́as ligadas a la web,
sobre todo en lo referente a su escritura e interpretación.

10. JavaScript [18]

JavaScript es un lenguaje de programación interpretado, utilizado en el lado del cliente.
Es un lenguaje orientado a objetos. Todos los navegadores modernos interpretan el código
JavaScript integrado en las páginas web.

11. CSS3 [4]

Cascading Style Sheets lo que en español podemos traducir como Hojas de estilo en cas-
cada, es un lenguaje utilizado para definir la presentación de un documento estructurado
escrito en HTML. Sirve para controlar el estilo y los layouts de múltiples paginas HTML
a la vez, separando ası́ la estructura del diseño.

12. Twig [14]

Twig es un motor de creación de plantillas para utilizar con PHP. Se ocupa de ofrecer una
solución al tratamiento de las cuestiones visuales alrededor de una aplicación desarrollada
en este lenguaje.

13
 13. PHP [11]
Lenguaje de programación del lado del servidor para la creación de páginas web de con-
tenido dinámico. Se considera uno de los lenguajes más flexibles, potentes y de alto ren-
dimiento conocidos a dı́a de hoy, ası́ como fácil de aprender. Este puede ser utilizado en
la mayorı́a de los servidores web y en casi todos los sistemas operativos y plataformas.

14. Latex [15]

Sistema de composición de textos orientado a la creación de documentos de gran calidad
tipográfica. El editor de Latex escogido ha sido TextMaker. El uso de esta herramienta
fue recomendado por la Universidad Jaume I.

15. Balsamiq Mockups [1]

Herramienta utilizada para facilitar y agilizar la creación de bocetos. Los desarrolladores
pueden usar Balsamiq Mockups con el propósito de comunicar rápidamente las propuestas
de solución, sin invertir demasiada cantidad de tiempo en esta primera etapa. Inclusive
durante el mismo proceso de trabajo, el equipo de desarrollo puede utilizar Balsamiq
Mockups para generar versiones visuales sobre aspectos no definidos en un principio, de
modo que las propuestas de solución sean fácilmente entendidas por el cliente. Este caso
es especialmente relevante para cuando se desarrolla utilizando metodologı́as ágiles.

3.3.2. Recursos hardware

Para el desarrollo del proyecto hemos utilizado un ordenador de sobremesa y un servidor

compartido para el despliegue del portal web. A continuación detallamos las caracterı́sticas de
éstos:

El servidor que dispone Frutı́nter, S.L. posee las siguientes caracterı́sticas:

Acceso FTP.

Soporte PHP, ASP, ASP.Net, JavaScript, VB Script, HTML 4/5, Flash, ActiveX.

Ficheros log de estadı́sticas.

Estadı́sticas WEB en castellano.

Soporte SSI (Server Side Includes).

CGI preinstalados (formulario, contador, etc.).

Componentes AspGrid. ASPMail,ASPUpload,ASPJpeg.

MS .NET Framework (ASP.NET, XML Web Services y Visual Studio .NET).

El ordenador de sobremesa posee las siguientes caracterı́sticas:

Procesador: Intel Pentium CPU G3240

14
 Sistema Operativo: Windows 8.1 Pro

Memoria RAM: 4,00 GB

Disco Duro: 1 TB

El servidor dispone de la posibilidad de obtener estadı́sticas sobre el acceso al portal web

además del el acceso simultáneo de 10 personas.

Hay algunos aspectos o situaciones a tener en cuenta a la hora del desarrollo del portal web
como son la caı́da del sistema, algún fallo en la web o la seguridad. En cuanto a la caı́da del
sistema Frutı́nter, S.L. debe contactar con la empresa alojadora del host, ya que es una empresa
externa a la empresa la que suministra el servicio de hosting y correo electrónico.

Otros aspectos a tener en cuenta es la notificación de los fallos en la web, se ha planteado

realizarla en una segunda fase del proyecto elaborando un plan de control de errores .

Para finalizar, la seguridad de un portal web es uno de los aspectos más importantes a la
hora de realizar un proyecto por tanto en este caso lo controlaremos con las herramientas que
nos proporciona el framework Symfony2.

3.3.3. Recursos humanos

El trabajo de las tareas planificadas anteriormente ha sido desarrollado por el autor de

este documento, bajo la supervisión del supervisor del proyecto de la empresa. Suponemos que
adopta dos roles el de analista y programador.

3.3.4. Costes estimados

Para obtener el coste de recursos humanos debemos dividir las horas del proyecto entre
los dos roles citados anteriormente. El trabajo del analista tendrı́a una duración de 170 horas
mientras que el trabajo del programador constarı́a de 128 horas. Para establecer el presupuesto
necesario para los recursos humanos partimos del precio por hora para cada una de las funciones
que desempeñamos. Hemos recogido el precio por hora para cada función de varias estadı́sticas
realizadas por InfoJobs, Bureau of Labor Statics y U.S. News. En la Figura 3.2 encontramos el
presupuesto estimado para los recursos humanos.

En la Figura 3.3 vemos el presupuesto para los recursos hardware. A partir del precio de los
equipos que utilizamos y de la vida útil de cada uno, calculamos el precio proporcional según
las horas de uso del equipo en el proyecto. El coste de los recursos software es de 0 edebido a
que todas las licencias utilizadas son libres.

15
 Figura 3.2: Presupuesto recursos humanos

Figura 3.3: Presupuesto recursos tecnológicos

Por último, en la Figura 3.4 podemos observar el coste total del proyecto.

Figura 3.4: Presupuesto total

16
Capı́tulo 4

Análisis y diseño del software

4.1. Análisis de requisitos

En este apartado se realiza un análisis de los requisitos del sistema. Se exponen las carac-
terı́sticas que la aplicación debe cumplir. Estos requisitos se acordaron con el cliente antes de
empezar con el desarrollo del proyecto. De esta manera logramos comprender mejor el problema
a resolver y podemos definir la solución informática más adecuada.

17
4.1.1. Diagrama de casos de uso

En esta sección se muestra el diagrama de casos de uso, donde se puede observar las activi-
dades que deben realizar cada uno de los roles definidos.

Figura 4.1: Diagrama de casos de uso

4.1.2. Requisitos funcionales

Cómo hemos podido observar en el anterior diagrama de casos de uso, los requisitos funcio-
nales que se pueden identificar son los más numerosos. A continuación se muestran de forma
detallada.

18
19
20
21
22
23
4.1.3. Requisitos de datos

El portal web debe devolver información especı́fica para cada sección. Por ello, a continua-
ción, se definen los diversos tipos de datos que se pueden requerir en el portal web.

24
4.1.4. Diagrama de clases

Llegados a este punto, es necesario identificar las clases del portal web. Debido a que sola-
mente requiere guardar información que se mostrará en la parte pública, no se requerirá una
gran cantidad de tablas en la base de datos. Se necesitarán las tablas Productos y Envases que
guardarán la información de la fichas que se mostrarán en la parte pública.

Para relacionar los envases en que se encuentra disponible un producto se define la tabla
Envasado, donde se localizará los envases disponibles para cada producto.

Para finalizar, se requerirá una tabla Usuarios para guardar la información necesaria para
entrar en la parte privada, es decir, autentificarse. Como existen diversos usuarios hemos creado
un campo donde se identifica si es gestor o administrador.

25
 Figura 4.2: Diagrama de clases

A continuación se describirá en detalle las clases.

Producto

Tipo:Clase

Contiene la información correspondiente a los productos registrados en el sistema.

26
Atributos

Operaciones

Envase

Tipo: Clase

Contiene la información correspondiente a los envases.

Atributos

27
Operaciones

Envasado

Tipo: Clase

Contiene la información correspondiente a la relación de cada producto con sus envases.

Atributos

Operaciones

Conexiones

Noticia

Tipo: Clase

Contiene la información correspondiente a las noticias registradas en el sistema.

28
Atributos

Operaciones

Conexiones

Usuario

Tipo: Clase

Contiene la información correspondiente a los usuarios registrados en el sistema.

Atributos

29
 Operaciones

4.1.5. Diagrama de actividades

En la figura 4.3 podemos observar los procesos que pueden suceder durante la navegación
del portal web, representado en un diagrama de actividades. Desde el inicio de la navegación del
portal web hasta que obtenemos la información o resultado requerido pueden acontecer diversos
eventos, por lo que la mejor forma de visualizar estos eventos de forma simplificada es a través
de un diagrama UML.

Figura 4.3: Diagrama de actividades

4.2. Diseño del sistema

La herramienta principal de trabajo ha sido Symfony, como se ha comentado anteriormente,

por especificaciones del cliente será un portal web dinámico en HTML5 y CSS3 con javascript en

30
el cliente y php en el servidor. Para diseñar el portal web se han definido dos partes: la privada y
la pública. Como podemos observar en el mapa del portal web figura 4.4, se deberán diseñar las
secciones especificadas, además de una serie de páginas estáticas que en los diagramas definidos
anteriormente no se hace referencia.

31
Figura 4.4: Mapa del portal web

32
4.3. Diseño de la interfaz

Para diseñar la interfaz del portal web uno de los aspectos más importantes es haber iden-
tificado la jerarquı́a del sitio web. Una vez definido y revisado con el supervisor y la empresa
se empezó a concretar que sección contenı́a que información. Teniendo todos los aspectos de la
jerarquı́a vista en la figura 4.4 y donde ha de aparecer la distinta información, se empezó con el
diseño de las interfaces realizando prototipos de algunas de las principales pantallas del portal
web. Para realizar estos prototipos, se ha utilizado el programa balsamiq Mockups [1], ya que
se trata de un programa de diseño de pantallas utilizado anteriormente.

En primer lugar se mostrarán los prototipos diseñados para la parte pública. En la figu-
ra 4.5 podemos observar el primer prototipo de la página principal del portal web, ésta está
estructurada en tres bloques:

Imágenes cambiantes

Últimas tres noticias

Caja de autentificación

Tras analizar este prototipo, finalmente se decidió sustituir dos de las tres noticias por un
vı́deo corporativo y los últimos tweets publicados, siendo las secciones de la página principal las
siguientes:

Imágenes cambiantes

Última noticia

Vı́deo corporativo

Últimos tweets

Caja de autentificación

33
 Figura 4.5: Prototipo página de inicio

A continuación, se muestran las secciones disponibles en el menú, que son las páginas Pro-
ductos (figuras 4.7 y 4.8), Noticias (figuras 4.6 y 4.9) y Envases.

34
 Figura 4.6: Prototipo página Noticias

Figura 4.7: Prototipo página Productos

Estos prototipos diseñados cumplen con los apartados que solicitaba la empresa. Las pági-
nas se han estructurado las páginas de la siguiente forma. Cómo observaremos en todos los
prototipos, el menú principal se sitúa en la parte superior derecha, seguidamente se listarán ya
sean los productos, noticias o envases. Este listado muestra un resumen del contenido, además
de la imagen que contiene. Para acceder al contenido completo, se ha diseñado un botón que
aparecerá en la parte inferior derecha de cada item. Una vez se acceda a las pantallas con más
detalle aparecerá una nueva pantalla, cómo podemos observar en las figuras 4.8 y 4.9.

35
Figura 4.8: Prototipo página de detalle de un producto

Figura 4.9: Prototipo página de detalle de una noticia

36
 En el siguiente prototipo que podemos observar en la figura 4.10 muestra el menú de la
sección Empresa se ha diseñado como un menú de imágenes cambiantes. Posteriormente se
explicará como se ha desarrollado.

Figura 4.10: Prototipo página Empresa

Para finalizar con el diseño de la parte pública, en la figura 6.4 aparece el diseño de la
pantalla de la sección Contactos. En ésta se ha diseñado un formulario de contacto en la parte
derecha.

Figura 4.11: Prototipo página Contacto

En cuánto a la parte privada, podemos observar en la figura 4.12 un prototipo de pantalla

37
de Gestión. En este caso se trata de la pantalla de Gestión de Productos. Donde se mostrará una
lista con todos los productos. Para cada producto se darán dos posibilidades: la de modificación
y la de visualización. En la parte inferior izquierda se visualizará un botón para añadir ya sea
productos, envases o noticias.

Figura 4.12: Prototipo página Gestión Productos

El último prototipo, figura 4.13, muestra la pantalla diseñada para insertar nuevas Noticias.
El diseño de las pantallas para añadir productos y envases será el mismo. Se visualizará un
formulario donde completar la información a insertar, para finalizar con el proceso se muestra
un botón para finalizar la operación.

38
Figura 4.13: Prototipo página Añadir Noticia

39
40
Capı́tulo 5

Implementación, pruebas y
documentación

Una vez diseñados los prototipos, el siguiente paso es empezar a implementar el sitio web.
Para ello utilizaremos el framework Symfony. Éste utiliza el modelo vista-controlador, como
podemos observar en la figura 5.1.

Figura 5.1: Modelo Vista Controlador usado en Symfony2

Este portal web dispondrá de una parte privada, a la que se accederá a través de la caja
de autentificación que aparece en la parte inferior de la página, a petición de la empresa. A
parte del acceso a la parte privada el portal web ofrece la posibilidad de navegación por la parte
pública. A estos usuarios no se les permite el acceso a la parte privada, por lo que los gestores
de la aplicación poseerán un nombre de usuario y una contraseña para el acceso. Por todo ello,
a la hora de implementar el portal web deberemos distinguir entre las dos partes el backend y
frontend.

41
 5.1. Detalles de implementación

En este apartado se realiza un recorrido por los pasos más importante que se han realizado
para la implementación del portal web. Para una mejor comprensión de los conceptos principales
del framework Symfony se puede consultar el anexo A.

En primer lugar se definen los bundles. Hemos definido PrivadoBundle, PublicoBundle y

UsuarioBundle. Han sido creados a partir de la siguiente sentencia:

1 $ php app / console generate : bundle -- namespace = Frutinter / PrivadoBundle

2 -- bundle - name = PrivadoBundle -- dir = src / -- format = yml --no - interaction
3
4 $ php app / console generate : bundle -- namespace = Frutinter / PublicoBundle
5 -- bundle - name = PublicoBundle -- dir = src / -- format = yml --no - interaction
6
7 $ php app / console generate : bundle -- namespace = Frutinter / UsuarioBundle
8 -- bundle - name = UsuarioBundle -- dir = src / -- format = yml --no - interaction

En segundo lugar, se crean las páginas. Para ello se ha de seguir los siguientes pasos:

Añadir al archivo app/config/routing.yml

1 ayuda :
2 path : / ayuda
3 defaults :{ _controller : PublicoBundle : Default : ayuda }

Modificar o crear la función en el archivo src/Frutinter/PublicoBundle/Controller/

DefaultController.php

1 public function ayudaAction ()

2 {
3 return $this - > render ( ’ PublicoBundle : Default : ayuda . html . twig
’) ;
4 }

Para que sea más fácil el enrutamiento en páginas estáticas se ha creado un archivo de
configuración llamado routingpaginas. Éste nos permite que todas las rutas definidas en el
archivo routing.yml se sirvan mediante el controlador especial FrameworkBundle utilizado en
las páginas estáticas. Se han seguido los siguientes pasos:

Añadir ruta en el archivo routingpaginas.yml

1 ayuda :
2 path : / ayuda
3 defaults :{ template : ’ PublicoBundle : Sitio : ayuda . html . twig ’}

Añadir plantilla de la página en el directorio resources/views/sitio en vez de en resource-

s/views/default.

42
 Añadir la función al fichero SitioController, sólo una vez.

1 public function estaticaAction ( $pagina )

2 {
3 return $this - > render ( ’ PublicoBundle : Sitio : ’. $pagina . ’. html .
twig ’) ;
4 }

Seguidamente, se ha iniciado con la creación de las tablas seguiremos los siguientes pasos:
Primero ejecutamos la siguiente consulta, en la que iremos introduciendo los datos para crear
las clases:

1 $ php app / console generate : doctrine : generate : entity

Una vez creadas las entidades hay que crear la base datos con la siguiente consulta:

1 $ php app / console generate : doctrine : database : create

Una vez creada la base de datos se ha de crear el esquema con la siguiente consulta:

1 $ php app / console generate : doctrine : schema : create

Para finalizar hay que actualizar la estructura de la tablas con la siguiente consulta:

1 $ php app / console generate : doctrine : schema : update -- force

Una vez implementadas las páginas estáticas, empezamos a desarrollar las páginas dinámicas,
aquellas páginas que necesitan hacer una consulta a la base de datos. En el portal web de la
empresa Frutı́nter S.L., las páginas dinámicas son:

Productos

Noticias

Envases

Páginas detalle de Productos, Noticias y Envases

Se seguirán los siguientes pasos para el desarrollo de estas páginas, por ejemplo la página
Productos:

Añadir en el controlador la función necesaria que recoge los datos y los muestra por
pantalla.

43
 1 public function productosAction () {
2 $em = $this - > getDoctrine () -> getManager () ;
3 $productos = $em - > getRepository ( ’ PublicoBundle : Producto ’) ->
f in d P ro d u ct o s Ac t u al () ;
4 return $this - > render ( ’ PublicoBundle : Default : productos . html .
twig ’ ,
5 array (
6 ’ productos ’ = > $productos
7 )
8 );

Crear una función en ProductoRepository que mediante una consulta SQL selecciona
aquellos datos que interesan.

1 public function f in d P ro du ct o s Ac t u al () {
2 $em = $this - > getEntityManager () ;
3 $consulta = $em - > createQuery ( ’
4 Select p . id , p . nombre , p . descripcion , p . categoria , p .
fechaInicio , p . fechaFin , p . rutaImagen
5 From PublicoBundle : Producto p
6 Where CURRENT_DATE () BETWEEN p . fechaInicio AND p . fechaFin
7 ’) ;
8 return $consulta - > getResult () ;
9 }

Creación de una plantilla twig para mostrarlos por pantalla.

1 { % for producto in productos %}

2 < div id = " co njunto Produc tos " >
3 < div id = " dosColumnas " >
4 < div class = " infoProducto " >
5 <li > < h1 >{{ producto . nombre }} </ h1 > </ li >
6 <li > < h3 >{{ producto . categoria }} </ h3 > </ li >
7 <li > <p >{{ producto . descripcion [:300] }} ... </ p > </ li >
8 <li > Disponible desde {{ producto . fechaInicio | date ( ’F ’)
| replace ({
9 ’ January ’ : ’ Enero ’ ,
10 ... ,
11 ’ December ’ : ’ Diciembre ’
12 }) }}
13 hasta {{ producto . fechaFin | date ( ’F ’) | replace ({
14 ’ January ’ : ’ Enero ’ ,
15 ... ,
16 ’ December ’ : ’ Diciembre ’
17 }) }} aprox . </ li >
18 </ div >
19 { % if producto . rutaImagen is not empty %}
20 < div class = " imagenProducto " >
21 < img src = " {{ asset ( ’ uploads / images / ’ ~ producto .
rutaImagen ) }} " id = " imagenMiniatura " >
22 <br >
23 </ div >

44
 24 { % endif %}
25 < div id = " boton " >
26 <a href = " {{ path ( ’ producto ’ ,{ ’ producto ’: producto . id })
}} " class = " boton - style " > Mostrar detalles </ a >
27 <br >
28 </ div >
29 </ div >
30 </ div >
31 { % endfor %}

Ya finalizada la parte pública, se empieza a desarrollar la parte privada del portal web o
backend. Para ello se utiliza el admin generator que es un conjunto de utilidades que facilita la
creación de la parte de administración de un sitio web. Hay varias opciones para el desarrollo
de esta parte utilizando el admin generator:

Admin generator manual.

Generador de código de Symfony2

Dependiendo de la dificultad de la entidad se procederá a realizarlo de una forma u otra.

Para utilizar el generador de código de Symfony2, se debe ejecutar la siguiente sentencia:

1 $ php app / console generate : doctrine : crud -- entity = PublicoBundle : Noticia

2 -- route - prefix = noticia -- with - write -- format = yml --no - interaction

Esta tarea genera un controlador, un archivo de rutas y cuatro plantillas para utilizar con la
entidad indicada. Una vez ejecuta esta sentencia se deben modificar los siguientes archivos:

Mover el controlador PublicoBundle/Controller/NoticiaController.php al directorio priva-

do PrivadoBundle/Controller/ y actualiza su namespace y las rutas de las instrucciones
use.

Mover el formulario PublicoBundle/Form/NoticiaType.php al directorio PrivadoBundle/-

Form/. Actualizar el namespace y el valor que devuelve el método getName().

Mover el directorio de plantillas PublicoBundle/Resource/views/Noticia/ al directorio Pri-

vadoBundle/Resources/views/. Actualizar en el controlador NoticiaController las rutas de
las plantillas en las instrucciones render(’..........’).

Mover el archivo de rutas PublicoBundle/Rsources/config/routing/noticia.yml al direc-

torio PrivadoBundle/Resources/config/routing/. Eliminar en el archivo PublicoBundle/
Resources/config/routing.yml la importación de este archivo e importarlo en el archivo
PrivadoBundle/Resources/config/routing.yml.

Una vez implementadas las dos partes el backend y el frontend, ya se puede desarrollar la
autentificación en la parte privada para ello se debe realizar las siguientes operaciones:

45
 Añadir en el fichero security.yml la configuración siguiente:

1 security :
2
3 firewalls :
4 # partes de la aplicación mostraran el formulario de login
5 frontend :
6 pattern : ^/*
7 provider : usuarios
8 anonymous : ~
9 form_login :
10 login_path : / login
11 check_path : / login_check
12 d ef a u lt _ t a rg e t _p a t h : / privado
13 failure_path : /
14 logout :
15 path : usuario_logout
16 access_control :
17 # permisos
18 - { path : ^/ privado / usuario , roles : ROLE_ADMIN }
19 - { path : ^/ privado /* , roles : [ ROLE_USER , ROLE_ADMIN ] }
20 - { path : ^/ usuario / login , roles :
IS_AUTHENTICATED_ANONYMOUSLY }
21
22 encoders :
23 # codificacion passwords
24 Frutinter \ UsuarioBundle \ Entity \ Usuario : { algorithm :
sha512 , iterations : 10 }
25

26 providers :
27 # De donde provienen los usuarios
28 usuarios :
29 entity : { class : UsuarioBundle : Usuario , property : email
}

Añadir al archivo UsuarioBundle/Resources/config/routing.yml con las siguientes lı́neas:

1 usuario_usuario :
2 resource : " @UsuarioBundle / Resources / config / routing / usuario . yml "
3 prefix : / privado / usuario
4
5 # Ruta para la acción de login de de los usuarios del frontend
6 login :
7 path : / login
8 defaults : { _controller : UsuarioBundle : Security : login }
9
10 # Ruta para la acción que comprueba el login del frontend
11 login_check :
12 path : / login_check
13
14 # Ruta para la acción de logout de los usuarios del frontend
15 usuario_logout :
16 path : / logout

46
 Crear las funciones loginAction y loginCheckAction en el fichero UsuarioBundle/Contro-
ller/
SecurityController.php.

1 /* *
2 * @Route ("/ login " , name =" login_route ")
3 */
4 public function cajaLoginAction ( Request $request )
5 {
6
7

8 $session = $request - > getSession () ;

9
10 // get the login error if there is one
11 if ( $request - > attributes - > has ( S e c u r i t y C o n t e x t I n t e r f a c e ::
AUTHENTICATION_ERROR )) {
12 $error = $request - > attributes - > get ( S e c u r i t y C o n t e x t I n t e r f a c e
:: A U T H E N T I C A T I O N _ E R R O R ) ;
13 } elseif ( null !== $session && $session - > has (
S e c u r i t y C o n t e x t I n t e r f a c e :: A U T H E N T I C A T I O N _ E R R O R ) ) {
14 $error = $session - > get ( S e c u r i t y C o n t e x t I n t e r f a c e ::
AUTHENTICATION_ERROR );
15 $session - > remove ( S e c u r i t y C o n t e x t I n t e r f a c e ::
AUTHENTICATION_ERROR );
16 } else {
17 $error = null ;
18 }
19
20 // last username entered by the user
21 $lastUsername = ( null === $session ) ? ’ ’ : $session - > get (
S e c u r i t y C o n t e x t I n t e r f a c e :: LAST_USERNAME ) ;
22
23 return $this - > render (
24 ’ UsuarioBundle : Security : cajaLogin . html . twig ’ ,
25 array (
26 // last username entered by the user
27 ’ last_username ’ = > $lastUsername ,
28 ’ error ’ = > $error ,
29 )
30 );
31 }

1 /* *
2 * @Route ("/ loginCkeck " , name =" check_route ")
3 */
4 public function loginCheckAction () {
5
6 }

Creación de una plantilla para la caja de autentificación.

1 < section id = " login " >

47
 2 { # Caja de login #}
3 { % if not app . user %}
4 { # Si no estas logueado #}
5 <h2 >{{ " Accede a tu cuenta " | trans }} </ h2 >
6 < form action = " {{ path ( ’ login_check ’) }} " method = " post " >
7 < label for = " login_user " >{{ " Email " | trans }} </ label >
8 < input id = " login_user " type = " text " name = " _username " value = "
{{ last_username | default ( ’ ’) }} " / >
9

10 < label for = " login_pass " >{{ " Contrase~n a " | trans }} </ label >
11 < input id = " login_pass " type = " password " name = " _password " / >
12
13 < input type = " submit " value = " {{ " Entrar " | trans }} " / >
14 < input type = " checkbox " id = " remember_me " name = " _remember_me "
checked / >
15 < label for = " remember_me " >{{ " No cerrar sesión " | trans }} </
label >
16 </ form >
17 { % else %}
18 { # Si estas logueado #}
19 <p >
20 Conectado / a como {{ app . user . username }} |
21 <a href = " {{ path ( ’ privado_portada ’) }} " >{{ " Acceder zona
privada " | trans }} </ a > |
22 <a href = " {{ path ( ’ usuario_logout ’) }} " >{{ " Cerrar sesión " |
trans }} </ a >
23 </p >
24 { % endif %}
25 </ section >

Para finalizar, añadir en el fichero frontend.html.twig la siguiente lı́nea de código:

1 < div id = " recuadro " >

2 <h4 > Zona privada </ h4 >
3 {{ render ( controller ( ’ UsuarioBundle : Security : cajaLogin ’) ) }}
4 </ div >

Una vez finalizada la implementación principal del portal web, se va a desarrollar otras
funcionalidades necesarias para el completo funcionamiento.

En primer lugar la carga de imágenes al servidor. Para ello se deben hacer modificaciones
en la entidad y en el controlador.

Añadiremos a la entidad un atributo donde guardaremos la ruta de la imagen.

1 /* *
2 * @ORM \ Column ( type =" string " , nullable = true )
3 */
4 protected $rutaImagen ;
5

48
 6 /* *
7 * @Assert \ Image ( maxSize = "500 k ")
8 */
9 protected $imagen ;

Añadir una nueva función donde se mueve la imagen del directorio actual a la carpeta
web/uploads.

1 public function subirImagen () {

2 if ( null == $this - > imagen ) {
3 return ;
4 }
5 $d ir ec to ri oD es ti no = __DIR__ . ’ /../../../../../ uploads / images ’;
6 $n om br eA rc hi vo Fo to = uniqid ( ’ frutinter - ’) . ’ -1. ’. $this - >
getImagen () -> guessExtension () ;
7 $this - > imagen - > move ( $directorioDestino , $no mb re Ar ch iv oF ot o ) ;
8 $this - > setRutaImagen ( $ no mb re Ar ch iv oF ot o ) ;
9 }

Por último es necesario añadir las siguientes lı́neas al controlador para añadir y modificar.

1 if ( $form - > isValid () ) {

2 $em = $this - > getDoctrine () -> getManager () ;
3 $em - > persist ( $entity ) ;
4 $entity - > subirImagen () ;
5 $em - > flush () ;
6
7 return $this - > redirect ( $this - > generateUrl ( ’ noticia_show
’ , array ( ’ id ’ = > $entity - > getId () ) ) ) ;
8 }

Para enlazar los archivos web ya sea tanto los scripts, css como las imágenes se debe utilizar la
siguiente ruta.

1 {{ asset ( ’ uploads / images / ’ ~ noticia . rutaImagen ) }}

Otro aspecto importante es la codificación de la contraseña. El archivo security.yml configura

cómo se codifican las contraseñas de los usuarios. El tipo de codificación recomendado para
aplicaciones web reales es el sha512. La codificación sha512 codifica la contraseña 5.000 veces
seguidas utilizando cada vez el hash SHA de 512 bits del paso anterior. Además de ello, el
resultado final se codifica mediante BASE64. Para ello debemos realizar lo siguiente:

Definir la configuración de codificación en el archivo security.yml

1 encoders :
2 # codificacion passwords
3 Frutinter \ UsuarioBundle \ Entity \ Usuario : { algorithm :
sha512 , iterations : 10 }

49
 Añadir la siguiente lı́nea en la función createAction del controlador:

1 public function createAction ( Request $request )

2 {
3 $entity = new Usuario () ;
4
5 $form = $this - > createCreateForm ( $entity ) ;
6 $form - > handleRequest ( $request ) ;
7
8 if ( $form - > isValid () ) {
9 // Completar las propiedades que el usuario no rellena
en el formulario
10 $entity - > setSalt ( md5 ( time () ) ) ;
11
12 $encoder = $this - > container - > get ( ’ security .
encoder_factory ’) -> getEncoder ( $entity ) ;
13 $ p as s w or d C od i f ic a d o = $encoder - > encodePassword ( $entity
- > getPassword () , $entity - > getSalt () ) ;
14 $entity - > setPassword ( $ p as s w or d C od i f ic a d o ) ;
15 $em = $this - > getDoctrine () -> getManager () ;
16 $em - > persist ( $entity ) ;
17 $em - > flush () ;
18

19 return $this - > redirect ( $this - > generateUrl ( ’ usuario_show

’ , array ( ’ id ’ = > $entity - > getId () ) ) ) ;
20 }
21
22 return $this - > render ( ’ UsuarioBundle : Usuario : new . html . twig ’ ,
array (
23 ’ entity ’ = > $entity ,
24 ’ form ’ = > $form - > createView () ,
25 ));
26 }

Modificar con el siguiente código la función updateAction, para que cada vez que se
modifique cualquier dato del usuario no se codifique la contraseña.

1 if ( $editForm - > isValid () ) {

2 // Comprobar si se ha cambiado la contrase~ n a para
codififcarla
3 if ( $pa ssword Origin al != $entity - > getPassword () ) {
4
5 $encoder = $this - > get ( ’ security . encoder_factory ’) ->
getEncoder ( $entity ) ;
6 $ pa s s wo r d C od i f ic a d o = $encoder - > encodePassword (
7 $entity - > getPassword () ,
8 $entity - > getSalt ()
9 );
10 $entity - > setPassword ( $ p as s w or d C od i f ic a d o ) ;
11 }

50
 Para finalizar, los pasos seguidos para el envı́o de un correo electrónico a través del formulario
creado en la página Contacto son los siguientes:

En el fichero app/config/config.yml eliminamos la lı́nea siguiente:

1 pool : { type : memory }

Configuración del mailer en el archivo parametres.yml:

1 mailer_transport : smtp
2 mailer_host : smtp . frutinter . com
3 mailer_user : r e c ep c i on @ f r ut i n te r . com
4 mailer_password : xxxxxxxxxxxxxxx
5 locale : es
6 secret : e 2 3 d 1 1 e c 8 5 3 6 1 b e a 1 5 b 3 8 d c 1 5 c 0 8 f d 0 8 2 5 e 8 a f b b

Creación de una función en el archivo DefaultController.php:

1 /* Enviar email con los datos del formulario de contacto */

2 public function enviarAction ( Request $request ) {
3 $mailer = $this - > get ( ’ mailer ’) ;
4 /* Concateno la informacion del remitente al cuerpo del
mensaje */
5 $cuerpo = " Información de contacto : \ n " . $request - > get ( ’ nombre
’) . " \ n " . $request - > get ( ’ remitente ’) . " \ n " . $request - > get ( ’
telefono ’) . " \ n \ n " . $request - > get ( ’ contenido ’) ;
6 $asunto = " Formulario de contacto : " . $request - > get ( ’ asunto ’) ;
7 $email = \ Swift_Message :: newInstance ()
8 -> setSubject ( $asunto )
9 -> setFrom ( ’ r ec e p ci o n @f r u ti n t er . com ’)
10 -> setTo ( $request - > get ( ’ destinatario ’) )
11 -> setBody ( $cuerpo , ’ text / plain ’)
12 ;
13
14 $mailer - > send ( $email ) ;
15 return $this - > render ( ’ PublicoBundle : Sitio : contacto . html .
twig ’) ;
16 }

5.2. Depuración de errores

Las herramientas de depuración que incluye Symfony2 son:

Barra de depuración web: se incluye en la parte inferior de todas las páginas que se ejecutan
en el entorno de desarrollo. Muestra mucha información importante sobre la página actual.

51
 Figura 5.2: Barra de depuración de Symfony2

El profiler: muestra toda la información de configuración y de ejecución de la página.

Como se guardan todos los datos históricos, permite realizar el profiling o análisis del
rendimiento de la aplicación a lo largo del tiempo.

Figura 5.3: Profiler de Symfony2

Los archivos de log: guardan toda la información sobre la ejecución interna de la aplicación
y que permiten realizar un análisis exhaustivo en los casos que ası́ lo requieran.

5.3. Validación de la usabilidad

Después de valorar varias técnicas para validar la usabilidad del portal web hemos decido
seguir las preguntas propuestas por “InterGraphicsDesigns”[13]. Este test está compuesto por
preguntas referentes a, (estas preguntas podemos observar en el anexo C) :

Página de inicio

Orientación de tareas

Navegabilidad

52
 Formularios

Confianza y credibilidad

Calidad del contenido y escritura

Diagramación y diseño gráfico

Búsquedas

Ayuda, retroalimentación y errores

Después de la realización de este test de usabilidad se ha obtenido el siguiente resultado(ver

en Figura 5.4).

Figura 5.4: Resultado test de validación

La calificación obtenida en el test es de un 93 % , lo que confirma que se trata de un sitio web

consistente, fiable y usable. Los puntos que destacan son la Orientación de tareas y el diseño
gráfico. Por contra el punto débil es la búsqueda ya que no se ha implementado ningún sistema
de búsqueda, debido a que la empresa no lo ha solicitado.

Este test ha sido realizado por diversos usuarios:

Usuarios expertos

53
 Usuarios con algunos conocimientos

Usuarios inexpertos

Por tanto los resultados obtenidos son la estimación de los resultados de los diferentes test.

5.4. Exportación

Para la puesta en producción debemos poder instalar todo el portal en otro servidor y
mantener todos los datos de nuestra BD. Para ello necesitamos poder exportar/importar nuestro
sistema. Para exportar el portal web es necesario realizar los siguientes pasos:

Ejecutamos el comando siguiente para limpiar la caché del modo producción.

1 $ php app / console cache : clear -- env = prod

Borrado de los siguiente archivos:

• De la carpeta pública eliminamos los archivos app dev.php y config.php.

• De la carpeta app eliminamos la carpeta cache, la carpeta logs y el archivo check.php.
• De la carpeta app/config eliminamos los archivos config dev.yml, config test.yml y
routing dev.yml.

Modificación del archivo app.php situado en la carpeta pública cambiando las siguiente
lı́nea

1 $ kernel = new AppKernel ( ’ prod ’ , false ) ;

por

1 $ kernel = new AppKernel ( ’ prod ’ , true ) ;

5.5. Importación

Para poder instalar o importar el portal web en el servidor deberemos realizar los siguientes
pasos:

Importar la base de datos que hemos creado de forma local.

Modificar los parámetros del archivo app/config/parametre.yml con los datos de la base
de datos del servidor, definiendo el host, name, user y password. En este caso:

54
 1 parameters :
2 database_driver : pdo_mysql
3 database_host : mysql03
4 database_port : null
5 database_name : DBM3575DOM2
6 database_user : udb3575plg
7 data base_p asswor d : xxxxxxxxxxxx
8 mailer_transport : smtp
9 mailer_host : smtp . frutinter . com
10 mailer_user : r e c ep c i on @ f r ut i n te r . com
11 mailer_password : xxxxxxxxxxxxxxx
12 locale : es
13 secret : e 2 3 d 1 1 e c 8 5 3 6 1 b e a 1 5 b 3 8 d c 1 5 c 0 8 f d 0 8 2 5 e 8 a f b b

Crear una carpeta en la carpeta pública del servidor donde almacenar todo el proyecto,
excepto la carpeta web.

Volcar el contenido de la carpeta web en la carpeta pública del servidor en este caso la
carpeta httpdocs.

5.6. Documentación y formación

5.6.1. Documentación del proyecto

Al finalizar el desarrollo del proyecto se realizó documentación especial para la empresa, es

decir, un manual de usuarios. Donde se explica el funcionamiento del portal web y la información
necesaria para que el técnico informático pueda ampliar la funcionalidad del portal web. Ası́
como la instalación de éste en cualquier servidor. Esta manual está disponible en el Anexo B.

5.6.2. Formación

Una vez finalizada la implementación se formó a varios empleados sobre el uso del portal
web. Los departamentos en los que se va utilizar la parte privada del portal web van a ser el
departamento de Informática y el departamento de Marketing. Ası́ que se realizó una formación
de 3 horas en la que se explicó el funcionamiento y se indicó las partes del manual de usuarios.

55
56
Capı́tulo 6

Resultado final

En este capı́tulo se muestra el resultado obtenido después de analizar, diseñar e implementar

los objetivos definidos al principio del proyecto. Para mostrar la visión general del portal web
a continuación se muestran un resumen de las vistas mas significativas del portal web.

Figura 6.1: Página principal

57
 Figura 6.2: Submenú Empresa

Figura 6.3: Listado de productos

58
 Figura 6.4: Página de contacto

Figura 6.5: Página gestión de noticias

59
Figura 6.6: Página añadir nueva noticias

60
Capı́tulo 7

Conclusiones

En este apartado final se describen las conclusiones del trabajo realizado durante la estancia
en prácticas, tanto a nivel técnico como a nivel personal.

Después de los meses de trabajo integrada en el equipo de la empresa Frutı́nter S.L. po-
demos concluir que los objetivos que se plantearon al inicio del proyecto se han cumplido de
forma satisfactoria. Para que esto sucediera, además de trabajar conjuntamente con el equipo
informático, se ha mantenido contacto con los otros departamentos de la empresa para obtener
la mejor adaptación posible a los requisitos requeridos y necesidades de la empresa actualmen-
te; para ello se ha mantenido contacto con los departamentos de Marketing, Importaciones y
Exportaciones. Finalmente se ha conseguido crear un portal web al gusto de la empresa a través
del framework Symfony. La mayor barrera que he tenido durante la realización de proyecto ha
sido la inexperiencia con la utilización de un framework y el desconocimiento de Symfony, para
solucionar esta barrera he tenido que realizar un trabajo de búsqueda y documentación; por lo
que ha absorbido mas tiempo del esperado del proyecto.

A nivel personal, la experiencia vivida en la empresa Frutı́nter S.L. ha sido enriquecedora.

Además de alcanzar los siguientes objetivos y competencias:

Capacidad para aprender

Capacidad de comunicación

Capacidad para aplicar los conocimientos a la práctica

Planificación y gestión del tiempo

Capacidad de análisis y de sı́ntesis

Trabajo en equipo

Capacidad de generar nuevas ideas

Compromiso organizacional

61
 Como trabajo futuro para la empresa queda el modulo de trazabilidad, ya que este modulo
está a expensas de la implantación de un sistema RFID para la automatización de la tarea.

62
Bibliografı́a

[1] Balsamiq mockups. http://www.glidea.com.ar/blog/

balsamiq-mockups-una-herramienta-para-realizar-wireframes. [Consulta: 22
de Junio de 2015].

[2] Desarrollo web agil con Symfony2. 2014. [Consulta: 15 de Abril de 2015].

[3] Apache. Apache. http://httpd.apache.org. [Consulta: 4 de Mayo de 2015].

[4] Bert Bos. Css. http://www.w3.org/Style/CSS/current-work. [Consulta: 4 de Mayo de

2015].

[5] Oracle Corporation. Mysql. https://www.apachefriends.org/es/index.html. [Consul-

ta: 4 de Mayo de 2015].

[6] Community doctrine. Doctrine. http://www.doctrine-project.org. [Consulta: 4 de

Mayo de 2015].

[7] Javier Equiluz. Symfony. http://symfony.es. [Consulta: 4 de Mayo de 2015].

[8] Clarck evans. Yaml. http://es.wikipedia.org/wiki/YAML. [Consulta: 4 de Mayo de

2015].

[9] Ryan Weaver Fabien Potencier. Manual de symfony. http://librosweb.es/libro/

symfony_2_4/. [Consulta: 27 de Mayo de 2015].

[10] Jan Fiala. Editor pspad. http://www.pspad.com/es/. [Consulta: 4 de Mayo de 2015].

[11] The PHP Group. Php. http://php.net. [Consulta: 4 de Mayo de 2015].

[12] Junio Hamano. Git. https://git-scm.com. [Consulta: 4 de Mayo de 2015].

[13] InterGraphicsDesigns. Intergraphicsdesigns. http://intergraphicdesigns.com/tools/

test-usabilidad-web/. [Consulta: 20 de Mayo de 2015].

[14] Armin Ronacher. Twig. http://gitnacho.github.io/Twig/. [Consulta: 4 de Mayo de

2015].

[15] Toni Santo. Latex. http://www.latex-project.org. [Consulta: 4 de Mayo de 2015].

[16] Comunidad Symfony. Symfony. http://symfony.com. [Consulta: 4 de Mayo de 2015].

[17] W3C. Html5. http://www.w3.org/TR/html5/. [Consulta: 4 de Mayo de 2015].

63
[18] Libros web. Javascript. http://librosweb.es/libro/javascript/. [Consulta: 4 de Mayo
de 2015].

[19] Comunidad Xampp. Entorno de desarrollo xampp. https://www.apachefriends.org/

es/index.html. [Consulta: 4 de Mayo de 2015].

64
Anexo A

Introducción a Symfony

Bundles[2]
Un bundle simplemente es un conjunto estructurado de archivos que se encuentran en un direc-
torio y que implementan una sola caracterı́stica. Cada directorio contiene todo lo relacionado
con esa caracterı́stica, incluyendo archivos PHP, plantillas, hojas de estilo, archivos Javascript,
tests y cualquier otra cosa necesaria.

Los bundles son la parte más importante de Symfony2. Permiten utilizar funcionalidades
construidas por terceros o empaquetar tus propias funcionalidades para distribuirlas y reutili-
zarlas en otros proyectos. Además, facilitan mucho la activación o desactivación de determinadas
caracterı́sticas dentro de una aplicación.

Entidades[2]
Se denomina entidades a los objetos PHP utilizados para manipular la información de la base
de datos. Generalmente cada tabla de la base de datos se representa mediante una entidad. No
obstante, en ocasiones Doctrine2 crea tablas adicionales para representar la relación entre dos
entidades.

Anotaciones[2]
Las anotaciones son un mecanismo muy utilizado en lenguajes de programación como Java.
Aunque PHP todavı́a no soporta anotaciones (al menos hasta la versión PHP 5.6), las aplica-
ciones Symfony2 pueden hacer uso de ellas gracias a una librerı́a desarrollada por el proyecto
Doctrine2. Técnicamente las anotaciones no son más que comentarios incluidos en el propio
código fuente de la aplicación. A diferencia de los comentarios normales, las anotaciones no sólo
no se ignoran, sino que se tienen en cuenta y pueden influir en la ejecución del código.

Enrutamiento[2]
El sistema de enrutamiento transforma URLs en controladores. Más en concreto, determina
cuál es el controlador que se debe ejecutar para cada URL solicitada por los usuarios. Esta
transformación se realiza mediante la información de las rutas, normalmente configurada en
archivos YAML.

65
 Controlador[2]
El controlador es la parte de la aplicación que contiene lo que se llama la lógica de negocio, que
es una forma elegante de decir que cada controlador se encarga de una funcionalidad completa
de la aplicación.

Admin Generator [2]

Se denomina admin generator al conjunto de utilidades que facilitan la creación de la parte de
administración del sitio web. Symfony 1 cuenta con un completo admin generator que permite
crear con un solo comando una parte de administración casi completa. A pesar de que el admin
generator de symfony 1 es su caracterı́stica más destacada, Symfony2 no incluye todavı́a un
admin generator completo. En su lugar dispone de un generador de código básico que permite
crear un prototipo de la parte de administración, pero que es muy inferior al de symfony 1.

Para entender posteriormente algunas de las sentencias, se muestra en la siguiente figura la

estructura de carpetas que crea Symfony.

Figura A.1: Estructura de carpetas creada por Symfony2

66
 Entornos [9]
Symfony dispone de diversos entornos. Los diferentes entornos comparten el mismo código PHP
pero usan una configuración diferente. El entorno de desarrollo dev guarda las advertencias y
errores, mientras que un entorno de producción prod sólo registra los errores. Algunos archivos
se vuelven a generar en cada petición en el entorno dev (para mayor comodidad de los desa-
rrolladores), pero se cachean en el entorno prod. Todos los entornos se encuentran en la misma
máquina y ejecutan la misma aplicación.

Un proyecto Symfony2 normalmente comienza con tres entornos (dev, test y prod), aunque
resulta sencillo crear nuevos entornos. Puedes ver tu aplicación en diferentes entornos con sólo
cambiar el controlador frontal en tu navegador.

Como el entorno prod está optimizado para ser muy rápido, la configuración, el enrutamiento
y las plantillas Twig se compilan en clases PHP simples y se guardan en caché.

Si haces cualquier cambio en las plantillas, no lo verás en el entorno prod a menos que borres
la cache de la aplicación y ası́ fuerces a Symfony a volver a compilar las plantillas.

Configuración [9]
El proyecto estará formada por una colección de bundles que representan todas las caracterı́sticas
y capacidades de la aplicación. Cada bundle se puede personalizar a través de archivos de
configuración escritos en YAML. De forma predeterminada, el archivo de configuración principal
se encuentra en el directorio app/config/ y se llama config.yml.

A.0.3. Algunos aspectos sobre Doctrine

Algunos aspectos que se tiene que tener diferenciados para obtener la información de la base
de datos a través del controlador y repository son:

find(): obtiene un registro a partir de la clave primaria de la tabla.

findAll(): obtiene todos los registros de la tabla. Retorna un array.

findBy(): obtiene los registros encontrados pudiendo pasar como argumentos los valores
que irı́an dentro del WHERE. Retorna un array.

findOneBy(): obtiene un registro pudiendo pasar como argumentos los valores que irı́an
dentro del WHERE.

67
68
Anexo B

Manual de Usuarios

En este anexo se incluye el manual de usuario desarrollado para explicar la manera de utilizar
cada una de las opciones del portal web.

69
Manual de Usuarios Portal Web
Frutı́nter S.L.

Realizado por:
Paula Vilas Usó
20 de abril de 2015
Índice

1. Introducción 2

2. Diseño del sitio 2

3. Mapa del sitio 3

4. Descripción de contenidos 4

4.1. Secciones zona Pública . . . . . . . . . . . . . . . . . . . . . . 4

4.2. Secciones zona Privada . . . . . . . . . . . . . . . . . . . . . 11

4.2.1. Gestión Productos . . . . . . . . . . . . . . . . . . . . 11

4.2.2. Gestión Noticias . . . . . . . . . . . . . . . . . . . . . 15

4.2.3. Gestión Envases . . . . . . . . . . . . . . . . . . . . . 18

4.2.4. Gestión Usuarios . . . . . . . . . . . . . . . . . . . . . 20

5. Administración 22

5.1. Imágenes del sitio web . . . . . . . . . . . . . . . . . . . . . . 22

5.2. Textos estáticos del sitio web . . . . . . . . . . . . . . . . . . 23

5.3. Añadir nueva dirección de correo al formulario de contacto . . 23

1
1. Introducción

El objetivo general de este documento es brindar una descripción clara y

detallada sobre el funcionamiento, ubicación y uso de los distintos elementos
del Sitio Web de Frutı́nter S.L. El visitante encontrará en el sitio web, áreas
bien definidas: El menú superior, el pie de página y el área de contenidos en
la parte central. El presente manual nos guiará en el manejo de las citadas
áreas y sus funciones, permitiendo el dominio de todas sus caracterı́sticas,
pensando en cubrir necesidades de información y comunicación.

2. Diseño del sitio

A continuación se puede observar la distribución general de contenidos

en la página principal del sitio:

El diseño del sitio web cuenta con 5 secciones:

Logo de la empresa.

Menú superior: Siempre visible, cambia dependiendo de la zona (públi-

ca o privada).

Área de contenidos: Es el espacio principal de trabajo, aquı́ aparecen

las noticias, descripciones de los productos u otra información.

Área de redes sociales: es el espacio reservado a enlaces de las redes

sociales de la empresa.

Pie de página: Siempre visible, principalmente provee opciones de ac-

ceder a la zona privada, disponible para los gestores.

Cabe mencionar que para acceder a la zona privada, zona de acceso

restringido, se requiere contar con un usuario y contraseña generado por el
administrador del sitio web.

2
3. Mapa del sitio

3
4. Descripción de contenidos

Logo de la empresa

Figura 1: Imagen Corporativa

Área de redes sociales

Figura 2: Redes sociales

Pie de página

Figura 3: Caja de autentificación

4.1. Secciones zona Pública

Menú superior

Home: Acceso directo a la página de inicio del Sitio Web.

Empresa: Describe el ámbito de trabajo de Frutı́nter, S.L. deta-
llando la filosofı́a, los principios de calidad que siguen y las sedes
que disponen.
Noticias: Muestra las noticias publicadas.
Productos: Muestra los productos de la empresa.
Contacto: Muestra la información de contacto junto con un for-
mulario de contacto.

4
 Figura 4: Menú

Página de Inicio (Home)

En el caso de la página de inicio, en el área de contenidos se presenta

un banner con imágenes corporativas de la empresa. Seguidamente se
presenta la noticia más reciente junto a una pequeña descripción y la
opción de leer el texto completo de la noticia a través del enlace ’Leer
más’; al hacer clic en el enlace ’Leer más’ se puede leer el contenido
completo de la noticia. Al lado se presenta un video corporativo y un
widget de twitter dónde podemos observar los últimos tweets publica-
dos.

Figura 5: Página principal

5
 Empresa

En esta sección, encontramos todo lo referente con la empresa. Se

visualiza un menú las opciones:

¿Quiénes somos?
Filosofı́a
Calidad
Sedes

Figura 6: Menú de la sección Empresa

Figura 7: Menú de la sección Empresa seleccionado

6
 Noticias

En la sección de Noticias encontramos el listado de todas las no-

ticias publicadas por la empresa junto con una breve descripción, su
imagen en miniatura y la opción de leer el texto completo de la noticia
a través del enlace ’Leer más’. Al hacer clic en el enlace ’Leer más’ se
puede leer el contenido completo de la noticia, también se puede am-
pliar la imagen al hacer clic sobre ella misma.

Figura 8: Sección Noticias

7
 Productos

En la sección de Productos encontramos el listado de todos los pro-

ductos disponibles en la fecha actual junto con una breve descripción,
su imagen en miniatura y la opción de leer el texto completo de la no-
ticia a través del enlace ’Leer más. Al hacer clic en el enlace ’Leer más’
se accede a la ficha del producto donde podemos leer el contenido com-
pleto, su descripción, fecha de disponibilidad, envases disponibles, etc.,
también se puede ampliar la imagen al hacer clic sobre ella misma. Al
final de la sección encontramos un botón que al darle clic mostrará to-
dos los productos, no sólo los disponibles actualmente.

Figura 9: Sección Productos

8
 Confecciones

En la sección de Productos encontramos el listado de todos los pro-

ductos disponibles en la fecha actual junto con una breve descripción,
su imagen en miniatura y la opción de leer el texto completo de la no-
ticia a través del enlace ’Leer más. Al hacer clic en el enlace ’Leer más’
se accede a la ficha del producto donde podemos leer el contenido com-
pleto, su descripción, fecha de disponibilidad, envases disponibles, etc.,
también se puede ampliar la imagen al hacer clic sobre ella misma. Al
final de la sección encontramos un botón que al darle clic mostrará to-
dos los productos, no sólo los disponibles actualmente.

Figura 10: Sección Confecciones

9
 Contacto

En la sección Contacto encontramos información relacionada con

los datos de contacto, junto a un formulario de contacto. Las consul-
tas, reclamos o sugerencias que el usuario envı́e por este sistema son
enviadas al departamento seleccionado por el usuario para una pron-
ta respuesta. Cabe señalar que es importante indicar correctamente el
correo electrónico de contacto para poder enviar la respuesta al solici-
tante.

Figura 11: Sección Contacto

10
4.2. Secciones zona Privada

En la zona privada del portal web habrá dos tipos de usuarios:

Gestores: sólo podrá gestionar la sección noticias, productos y

envases.
Administrador: tiene acceso a todas las secciones.

4.2.1. Gestión Productos

Al acceder a esta sección vemos un listado de todos los productos

existentes. Veamos las operaciones que se puede realizar en esta sección.

Figura 12: Pantalla principal de la sección Gestión Productos

1. Añadir un nuevo producto

Para añadir un nuevo producto se debe clicar en el botón de la

Figura 13 .

Figura 13: Botón: Añadir nuevo producto

11
 Aparecerá un formulario que se deberá rellenar con los datos del
nuevo producto.

Figura 14: Formulario insercción nuevo producto

Nota: El tamaño máximo de la imagen a insertar es de 500k.

Para que esta información sea guardada se deberá clicar en el botón

añadir producto.Finalmente aparecerá una pantalla mostrando la in-
formación del nuevo producto añadido.

2. Modificar un nuevo producto

Para modificar un producto existente se debe clicar en el botón de

la Figura 33.

Figura 15: Botón: Modificar

12
Aparecerá un formulario con los datos del producto seleccionado para
modificar.

Figura 16: Formulario con datos de un producto para su modificación

El usuario deberá cambiar la información que necesite ser modificada.

Para que esta información sea guardada se deberá clicar en el botón
modificar. Finalmente aparecerá una pantalla mostrando la informa-
ción del producto modificado.

3. Eliminar un producto

Para eliminar un producto el usuario deberá clicar en el botón de

la Figura 17 .

Figura 17: Botón: Eliminar

13
 Aparecerá una pantalla mostrando la información del producto. En
la parte posterior aparecerá un botón con la opción de eliminar. Una vez
borrado aparecerá el listado de los productos existentes por pantalla.

Nota: Sólo se podrán borrar aquellos productos que no tienen asig-

nado ningún envase.

4. Asignar envases

En la pantalla principal de la sección de gestión de productos, de-

beremos clicar en el botón de la Figura 18.

Figura 18: Botón: Asignar Envases

Nos mostrará unos desplegables donde seleccionaremos el producto y

el envase que le queremos asignar.

Figura 19: Formulario para la asignación de envases

5. Modificar asignación de envases

En la pantalla principal de la sección de gestión de productos, de-

beremos clicar en el botón de la Figura 20.

Figura 20: Botón: Mostrar envases

14
Nos mostrará todos los envases disponibles para un producto, clicare-
mos en el botón Modificar. Seguidamente nos mostrará unos desplega-
bles donde podemos modificar la selección del producto y el envase.

6. Eliminar asignación de envase

En la pantalla principal de la sección de gestión de productos, debe-

remos clicar en el botón Mostrar envases, mostrado en la figura 20. Nos
mostrará todos los envases disponibles para un producto, clicaremos en
el botón Modificar. Y seguidamente podremos observar la asignación
actual, y se visualizará un botón para eliminar la asignación de ese
envase en la parte posterior.

4.2.2. Gestión Noticias

Al acceder a esta sección vemos un listado de todos las noticias

existentes. Veamos las operaciones que se puede realizar en esta sección.
1. Añadir una nueva noticia

Figura 21: Pantalla principal de la sección Gestión Noticias

15
 Para añadir una nueva noticia se debe clicar en el botón de la Fi-
gura 22

Figura 22: Botón: Añadir noticia

Aparecerá un formulario que se deberá rellenar con los datos de la

nueva noticia.

Figura 23: Formulario insercción nueva noticia

Para que esta información sea guardada se deberá clicar en el botón

Añadir. Finalmente aparecerá una pantalla mostrando la información
de la noticia añadida.

16
 2. Modificar una nueva noticia

Para modificar una noticia existente se debe clicar en el botón de

la Figura 33.

Figura 24: Botón: Modificar

Aparecerá un formulario con los datos de la noticia seleccionada

para modificar.

Figura 25: Formulario con datos de una noticia para su modificación

El usuario deberá cambiar la información que necesite ser modificada.

Para que esta información sea guardada se deberá clicar en el botón
Modificar. Finalmente aparecerá una pantalla mostrando la informa-
ción de la noticia modificada.

3. Eliminar una noticia

17
 Para eliminar una noticia el usuario deberá clicar en el botón Mos-
trar. Aparecerá una pantalla mostrando la información de la noticia.
En la parte posterior aparecerá un botón con la opción de eliminar. Una
vez borrado aparecerá el listado de las noticias existentes por pantalla.

4.2.3. Gestión Envases

Al acceder a esta sección vemos un listado de todos los envases

existentes. Veamos las operaciones que se puede realizar en esta sección.

Figura 26: Pantalla principal de la sección Gestión Envases

1. Añadir un nuevo envase

Para añadir un nuevo envase se debe clicar en el botón de la Figura

27

Figura 27: Botón: Añadir nuevo Envase

Aparecerá un formulario que se deberá rellenar con los datos del

nuevo envase .

18
 Figura 28: Formulario insercción nuevo envase

Nota: El tamaño máximo de la imagen a insertar es de 500k.

Para que esta información sea guardada se deberá clicar en el botón

Añadir. Finalmente aparecerá una pantalla mostrando la información
del envase añadido.

2. Modificar un nuevo envase

Para modificar un envase existente se debe clicar en el botón de la

Figura 33.

Figura 29: Botón: Modificar

Aparecerá un formulario con los datos del envase seleccionado para

modificar. El usuario deberá cambiar la información que necesite ser
modificada. Para que esta información sea guardada se deberá clicar
en el botón Modificar. Finalmente aparecerá una pantalla mostrando
la información del envase modificado.

3. Eliminar un envase

Para eliminar un envase el usuario deberá clicar en el botón Mostrar.

Aparecerá una pantalla mostrando la información del envase. En la
parte posterior aparecerá un botón con la opción de eliminar. Una vez

19
borrado aparecerá el listado de los envases existentes por pantalla.

Nota: Un envase sólo podrá ser eliminado si no está asignado a

ningún producto.

4.2.4. Gestión Usuarios

Al acceder a esta sección vemos un listado de todos los usuarios exis-

tentes.Esta sección sólo estará disponible para el administrador.Veamos
las operaciones que se puede realizar en esta sección.

Figura 30: Pantalla principal de la sección Gestión Usuarios

1. Añadir un nuevo usuario

Para añadir un nuevo usuario se debe clicar en el botón de la Figura

31

Figura 31: Botón: Añadir nuevo usuario

Aparecerá un formulario que se deberá rellenar con los datos del

nuevo usuario .

20
 Figura 32: Formulario insercción nuevo Usuario

Para que esta información sea guardada se deberá clicar en el botón

Añadir. Finalmente aparecerá una pantalla mostrando la información
del usuario añadido.

2. Modificar un nuevo usuario

Para modificar un usuario existente se debe clicar en el botón de la

Figura 33.

Figura 33: Botón: Modificar

Aparecerá un formulario con los datos del usuario seleccionado para

modificar. El administrador deberá cambiar la información que necesite
ser modificada. Para que esta información sea guardada se deberá clicar
en el botón Modificar. Finalmente aparecerá una pantalla mostrando
la información del usuario modificado.

3. Eliminar un usuario

Para eliminar un usuario el administrador deberá clicar en el botón

Mostrar. Aparecerá una pantalla mostrando la información del usuario.
En la parte posterior aparecerá un botón con la opción de eliminar. Una
vez borrado aparecerá el listado de los usuarios existentes por pantalla.

21
 Nota: Un usuario sólo podrá ser eliminado si no ha escrito ninguna
noticia.

5. Administración

Esta sección describirá algunos aspectos de administración del sitio

web.

5.1. Imágenes del sitio web

El tamaño de las imágenes cambiantes de la página principal de-

berá ser de 1200x400px. Para añadir estas imágenes a la web se
deberán insertar en /httpdocs/bundles/publico/images.El forma-
to de estas imágenes de sebe ser .png.
Galerı́a de imágenes de la sección de ¿Quiénes somos?: El ta-
maño máximo de las imágenes de la galerı́a debe ser de 2865 px
de ancho. El tamaño de los iconos debe ser de 150x150 px.Para
añadir estas imágenes a la web se deberán insertar en /http-
docs/bundles/publico/images.El formato de estas imágenes de se-
be ser .jpg.
Galerı́a imágenes sección de Sedes: El tamaño máximo de las
imágenes de la galerı́a debe ser de 2865 px de ancho. El tamaño
de los iconos debe ser de 75x75 px. Para añadir estas imágenes a la
web se deberán insertar en /httpdocs/bundles/publico/images/sedes.
El formato de estas imágenes de sebe ser .jpg.

22
5.2. Textos estáticos del sitio web

Para cambiar los textos estáticos del sitio web se deberá acceder a la
carpeta /frutinter/src/Frutinter/PublicoBundle/Resources/views/Sitio,
donde se encontrarán todos los ficheros correspondientes.

Figura 34: Carpeta Sitio

5.3. Añadir nueva dirección de correo al formulario de con-

tacto

Para la modificación o adicción de un nuevo correo de contac-

to se modificará el archivo contacto.html.twig disponible en /frutin-
ter/src/Frutinter/PublicoBundle/Resources/views/Sitio.

23
94
Anexo C

Preguntas test de validación

En este anexo se incluyen las preguntas contestadas en el test de usabilidad realizado para
la validación del portal web.

95