PDF de programación - Diseño e implementación de una web con Wordpress, el caso de Alfa Motos

UNIVERSIDAD POLITECNICA DE VALENCIA

E S C U E L A P O L I T E C N I C A S U P E R I O R D E G A N D I A

G r a d o e n C o m u n i c a c i ó n A u d i o v i s u a l













































“Diseño e implementación de una web
con Wordpress, el caso de Alfa Motos”








TRABAJO FINAL DE GRADO

Autor/a:
Alejandro Olegario Castellanos

Tutor/a:
Daniel Palacio Samitier


GANDIA, 2017


Índice





Resumen ...................................................................................................................................... 0

Abstract ........................................................................................................................................ 0

1.

Introducción ....................................................................................................................... 1

1.1 Objetivo del proyecto .............................................................................................. 1

2.

Descripción del caso ........................................................................................................ 1

2.1 La empresa .............................................................................................................. 1

2.2 El problema y los objetivos .................................................................................... 3

2.3 Viabilidad y funcionamiento ................................................................................... 6

2.3.1 Aspectos técnicos ................................................................................ 6

2.3.2 Roles ................................................................................................... 7

2.4 Posibles alternativas ............................................................................................... 9

2.5 Decisión y razonamiento ...................................................................................... 10

3.

4.

Descripción del proyecto ............................................................................................... 11

Desarrollo del proyecto ................................................................................................. 12

4.1 Briefing .................................................................................................................... 12

4.2 Sitemap ................................................................................................................... 13

4.3 Diseño de wireframes de baja resolución (estructura) .................................... 13

4.4 Recopilación de recursos (imágenes, información, etc.) ................................ 14

4.5 Mockup o diseño de alta resolución (imágenes y color) ................................. 14

4.5.1 Color .................................................................................................. 14

4.6 Prototipo en un servidor local .............................................................................. 15

4.7 Instalación de un servidor local (XAMPP) y Wordpress ................................. 15

4.7.1

Instalación del tema y descripción del panel de Wordpress ............ 16

4.8 Elección del tema de WordPress ................................................................... 19

4.8.1 Panel de control Salient ..................................................................... 20

4.9 Plugins y scripts: elección, instalación y testeo ............................................... 22

4.9.1 Seguridad .......................................................................................... 22

4.9.2 Optimización ...................................................................................... 24

4.9.3 Funcionalidades ................................................................................. 27

4.9.4 Analítica & SEO ................................................................................. 33

4.10 Pruebas UX e IXD .............................................................................................. 36

4.11 Depuración de errores y rediseño de páginas ............................................... 37

4.12 Implementación en un hosting .......................................................................... 37

4.13 Correcciones finales ........................................................................................... 40

5

6

Conclusiones................................................................................................................... 41

Bibliografía ...................................................................................................................... 42







Resumen

En este trabajo se explica la realización de un sitio web a partir de su conceptualización

hasta su implementación en un servidor utilizando WordPress, pasando por cada fase,

desde la preproducción, diseño y el desarrollo de aplicaciones para la misma hasta su

testeo y depuración.



Palabras clave: Diseño web, WordPress, JavaScript, Diseño web adaptable, SEO.





Abstract

This work explains the creation of a website from its conceptualization to its

implementation in a server using WordPress, going through each phase, from

preproduction, design and development of applications for itself, to its testing and

debugging.



Keywords: Web design, WordPress, JavaScript, Responsive, SEO.



1. Introducción



1.1 Objetivo del proyecto

Este Trabajo Final de Grado presenta el desarrollo de una página web y su posterior

implementación en un servidor para su propagación en Internet. Surge de la necesidad

de realizar un proyecto final del Grado en Comunicación Audiovisual, cuya finalidad es

aplicar en el ámbito práctico y profesional los conocimientos y las habilidades adquiridas

durante los 4 años de intenso estudio.

El principal objetivo es facilitar a una empresa privada del sector de la automoción una

plataforma web de acceso público en la que sea fácil gestionar el contenido. Los

principales propósitos son: que puedan ofrecer sus productos y servicios de forma

atractiva, llegar a un público más amplio, y mejorar la atención al cliente y el servicio

postventa. Es importante también que el contenido sea fácil de modificar después,

puesto que al tratarse de una empresa dedicada al sector de la automoción es frecuente

la variación en la disponibilidad de sus productos o en los precios de los mismos.

La empresa para la que se desarrolla el presente proyecto es Alfa Motos, S.A.,

concesionario y distribuidor oficial de la marca de motocicletas y scooters Kymco para

la Comunidad Valenciana. Esta empresa está dividida en tres grandes departamentos:

Ventas, Taller y Recambios. Cerca de cumplir los 30 años en el sector, Alfa Motos tenía

un sitio web desde el año 1995. Era una web estática, que constaba únicamente de una

imagen fija sobre un fondo y de los datos de contacto de la empresa. En 2008, con la

aparición de la primera versión del HTML5, se intentó desarrollar una versión más

completa y actualizada de dicha página web sin éxito. El departamento de apoyo, el de

Informática, dio prioridad al desarrollo de la aplicación de gestión de la propia empresa,

y dejó de lado el mantenimiento y la mejora de la funcionalidad de esta nueva versión

de la página web.



2. Descripción del caso



2.1 La empresa

Alfa Motos, S.A. es una empresa dedicada al sector de la automoción. Concretamente,

centra su actividad laboral en el mundo de la moto. Son servicio y distribuidor oficial de

1

la marca Kymco para la Comunidad Valenciana. Se estructura en tres departamentos

principales, y uno de apoyo. Los departamentos principales son: Ventas, Recambios o

Servicio Postventa y Taller. El departamento de apoyo es el Departamento de

Informática en el que se desarrolla el software que utiliza la empresa para su gestión

interna, además de encargarse del mantenimiento del mismo y de la web. Este

departamento, en su momento, se encargó también de implementar la primera página

web y más tarde, en el año 2008, concibieron un diseño que nunca llegó a

implementarse.

La primera página web que desarrolló el Departamento de Informática, en el año 1995,

constaba solo de una imagen sobre un fondo con los colores corporativos con los datos

de contacto de la empresa (véase, Imagen 1).

Imagen 1. Versión inicial del sitio web alfamotos.es (1995).



Ese estilo, en 1995, era el más frecuente como página web corporativa, aunque con lo

rápido que avanza la tecnología en poco tiempo pasó a quedar obsoleta. Por aquel

entonces el departamento tenía otras prioridades, comenzó el proceso de desarrollo e

implementación de su propio programa de gestión interno, y ya no le dedicaron tiempo

a la actualización de ese sitio web a un estilo más fresco y moderno. No fue hasta años

más tarde, en 2008 y con la aparición del HTML5 y CSS3, que se plantearon la

necesidad de modernizar la página web (Imagen 2).

2

Imagen 2. Proyecto de mejora de la web alfamotos.es (2008).



Eliminaron la foto fija y lo transformaron en un sitio web dinámico que constaba de una

breve descripción de la empresa, un pequeño mapa que mostraba la ubicación física,

los datos de contacto, una galería tipo Slideshow y, por último, una página más con un

catálogo con las tarifas de las dos marcas a las que por aquel entonces daban servicio:

Aprilia y Kymco. En esta nueva web ya cuidaron un poco más el atractivo del diseño y

la estructuración del contenido. Era un sitio web sencillo para el usuario, en la que, de

manera rápida, de un solo vistazo, se podía acceder a los datos de consulta que podr