tatis GOURMET
Memoria Proyecto Web
Alumno: ﾃ］gel M. Pﾃｩrez Suﾃ｡rez Asignatura: Proyecto Web Profesora: Ana Gomiz
Edita: Ángel M. Pérez Suárez Proyecto académico del alumno Ángel M. Pérez Suárez, para la asignatura de proyecto web, del centro Escuela Arte Granada.
Índice
I II III IV V Información
Introducción y objetivos Presentación del proyecto El cliente y sus particularidades Necesidades del cliente Competencia directa Competencia indirecta Investigación y búsqueda de recursos
Documentación Influencias
Creatividad
Inspiración Brainstorming Mapa de ideas Recursos gráficos Recursos técnicos Plantilla Bocetos
Wireframes
Concreción
Armonía de color
Retículas
Evaluación
Tono de las imágenes. Maquetación Respuesta del usuario Continuación del proyecto Ampliación del proyecto
Conclusiones
Referentes Web
I
Información
4 Memoria TatisGourmet
1.
Introducción y objetivos buscados El siguiente proyecto que se va a detallar está realizado como un proyecto académico del alumno Ángel M. Pérez Suárez, para la asignatura Proyecto Web 20132014 (Escuela Arte Granada). Todas las marcas comerciales citadas en este proyecto son propiedad de sus respectivos titulares. El proyecto ha realizar consiste en el rediseño, actualización y replanteamiento de la web corporativa www.tatisgourmet.es.
2.
Presentación del proyecto La forma de afrontar el proyecto es a través de la problemática con la gestión del contenido de la web, así como la actualización de productos o eventos y demás necesidades básicas para el posicionamiento dentro del mercado actual. Se quiere incluir una web más dinámica pero sin llegar a perder la esencia de la tradición que actualmente tienen, de tantos años de historia a sus espaldas.
3.
El cliente El cliente citado anteriormente se trata de TatisGourmet, una empresa joven que nace de la ilusión y la experiencia adquirida en la unidad familiar de Olea Gourmet, durante más de 30 años. Ellos elaboran sus productos de forma artesanal, con el cuidado y detalle que se merecen sus clientes, y existen muchas especialidades a destacar, fruto de las recetas centenarias y en algunos casos de la innovación al combinar los sabores de forma magistral. El relevo generacional les ha ofrecido la oportunidad de dar un nuevo impulso a la empresa incorporando nuevas tecnologías y desarrollando nuevos productos cada vez más rompedores y actuales.
Proyecto Web 5
4.
Necesidades del cliente Las necesidades principales son la actualización de productos de manera constante, entrada de noticias sobre los eventos en los que se va a participar o, en los que se han participado. También necesitan una galería de productos y una muestra de los formatos usados, así como la distribución que tendrían para la realización del pedido. Se necesitaría un formulario de contacto para realizar sugerencias, pedidos, ayuda, etc.… y otro más para la exportación de productos, todo ello acompañado de u na web acorde a sus valores de marca.
5.
Competencia indirecta Podemos definir nuestra competencia indirecta como todas aquellas grandes superficies que ofrezcan productos de similares características como son las cooperativas, mercados, etc.…
6.
Competencia directa Actualmente los dos grandes competidores en su zona por cercanía y similar características de productos son las expuestas en la página siguiente. Como podremos apreciar en el primer caso, la web está realizada con un tema predefinido y su contenido se basa en lo ofrecido sin mucho atractivo para el usuario. En su defecto la segunda es de carácter monótono y donde el usuario puede sentirse perdido debido a la mala gestión de la zona de productos y la cantidad de información que recibe entre un logotipo exagerado de "Paypal", la cesta y el resto de categorías. En este caso podemos usar estas referencias para evitar caer en la monotonía de las secciones de la web y poder así adecuarnos más a las necesidades de nuestros clientes.
6 Memoria TatisGourmet
www.aceitunerabaezana.com
www.aceiterajaenera.com
Proyecto Web 7
II
Documentación
1.
Investigación y recursos utilizados Se realiza una encuesta para conocer el user persona que representará al comprador o posible usuario del sitio y bajo el cual se realizarán los cambios necesarios para la gestión y armonía de las secciones de la web. Como se puede observar el target ronda los 35 años y son propietarios de pequeñas empresas o restaurantes que buscan la innovación entre sus productos. Los recursos usados son la integración de una portada con actualizaciones constantes de contenido, y un slider con muestras de los productos que se ofrecen. Se integra un mapa con links a móvil para la ubicación de la empresa y formularios necesarios para la puesta en contacto entre cliente y empresa.
8 Memoria TatisGourmet
2.
Influencias He basado las influencias gráficas de la web sobre bocetos realizados con el cliente y expuestos más adelante, páginas web que le resultaban atractivas o con secciones que podían atraer la atención de nuestros usuarios, siempre que se pudiera modificar e integrar dentro de nuestro sitio.
3.
Inspiración www.nike.com
Buscando referentes tanto en el sector de mi cliente como en otros que nada tienen que ver pero con una amplia cartera de clientes y en un 90% de los casos existe un slider principal con las ofertas o nuevos productos que se ofertan y bajo éste carrusel aparecen las últimas novedades o eventos a participar. Proyecto Web 9
www.adidas.com
Al igual que en la anterior usan un slider para mostrar los productos destacados y bajo ĂŠste las novedades y actualizaciones.
10 Memoria TatisGourmet
www.lascrispulinas.com
Por último muestro una web con el galardón de encontrarse entre las mejores de e-commerce del año 2014 y donde muestran su teléfono en la parte superior derecha de manera notable y un menú muy claro bajo éste. Redunda decir nuevamente, la característica del slider y la sección de noticias y destacados. Proyecto Web 11
III
Creatividad
1. Brainstorming
Para la realización del brainstorming me reúno con el cliente para concretar las ideas que éste desea que estén dentro de la web y voy añadiendo las que yo creo convenientes que estuvieran y derivadas de ambas, hasta obtener una serie de elementos clave que incorporo a la web, bien a través de elementos gráficos, o interactivos.
12 Memoria TatisGourmet
2. Recursos gráficos Todas las imágenes utilizadas en el proyecto web, son suministradas por el cliente para poder ilustrar los diferentes productos.
3. Recursos técnicos Los recursos que he necesitado para tratar de resolver las incidencias encontradas, han sido integrar un CMS (Content Managemet System) que se adecúe a los diferentes servicios que se ofrecen, con un software libre, como es el caso de WordPress, el cual se adapta a todos los dispositivos que existen en el mercado. Se utiliza una plantilla con elementos independientes unos de otros, para evitar el fallo general en caso de un error de código o actualización puntual. Se integran plugins para realizar algunas funcionalidades extras que no trae por defecto la plantilla y se realizan cambios en la hoja de estilos para adecuar el contenido nuevo a la coherencia visual del resto del sitio. Además del CMS, también se integran textos en HTML5 para la creación de artículos que no se pueden adicionar al tema. Se evita en la mayoría de lo posible el uso de estilos basados en CSS3, dado que muchos de los usuarios aún tienen configurado en su ordenador un navegador antiguo y con el cual tendrían problemas para ver correctamente toda la web. En la zona de contacto se añade un código “QR” para todos aquellos usuarios que quieran captar la situación de la empresa tan solo con capturar el código, o si por el contrario entran a través de un dispositivo móvil pueden clicar en la parte inferior de la web, donde hay 2 links, uno de ellos envía un punto al móvil desde el cual se está mirando la web y el otro añade el numero a la marcación para realizar la llamada, éste último también está en la parte superior del sitio, a la derecha sobre el menú de navegación y el botón de búsqueda. Se habilita un botón RSS Feed para enlazar las noticias a la cuenta RSS del visitante. Proyecto Web 13
4. Plantilla La plantilla escogida para llevar a cabo el proyecto es "Kallyas". Se elige la siguiente plantilla por su versatilidad a la hora de poder realizar cambios sobre su esqueleto, así como por la posibilidad de incorporar un e-commerce a través de "Woocommerce". Aunque en un principio no es la finalidad del cliente que la página web sea una tienda online, se habilita para que la pueda testear y que valore si la desea mantener.
14 Memoria TatisGourmet
IV
Concreción
1. Bocetos Para el proyecto se realizan diferentes bocetos, conjuntamente, en la mayoría de los casos con el cliente para poder discutir las ubicaciones de las secciones, menú de navegación, slider, etc.… También se realizan cambios de manera personal para terminar de concretar la posición final de los elementos a colocar.
Proyecto Web 15
16 Memoria TatisGourmet
2. Wireframes Utilizo el programa Balsamiq Mockups para la realización de los wireframes finales los cuales usaré para diseñar el producto final y que muestro a continuación.
Página de inicio Laptop
Página de inicio Tableta 18 Memoria TatisGourmet
Página de inicio Móvil Proyecto Web 19
Página de Empresa Laptop 20 Memoria TatisGourmet
Página de Empresa Tableta Proyecto Web 21
Página de Empresa Móvil 22 Memoria TatisGourmet
Página de Productos Laptop
Página de Productos Tableta Proyecto Web 23
Página de Contacto Laptop 24 Memoria TatisGourmet
Página de Contacto Tableta Proyecto Web 25
Página de Contacto Móvil
Una vez se ha creado la web siguiendo las indicaciones de los wireframes, se realizan cambios para la mejor experiencia de usuario, como es la ubicación de las noticias en la home, o la galería de imágenes que cambia con respecto al wireframe por incompatibilidades en dispositivos móviles.
26 Memoria TatisGourmet
3.
Armonías de color La paleta de colores usada es la facilitada por el cliente y que está estipulada en su manual corporativo, algunos de esos colores han sido modificados para su uso en web, ya que algunos de esos colores están únicamente disponibles para documentación impresa.
RGB 219 219 3
CMYK 21 0 95 0
HTML DBDB03
RGB 89 167 68
CMYK 69 8 91 0
HTML 59A744
RGB 233 82 33
CMYK 0 79 92 0
HTML E95221
RGB 196 32 102
CMYK 17 96 28 5
HTML C42066
Proyecto Web 27
5.
Retícula Se estipula una retícula de tres grandes columnas, subdivididas en otras tres haciendo una cuadrícula de seis columnas. No se estipulan líneas divisorias horizontales dada la diferencia de maquetaciones dentro del mismo sitio.
28 Memoria TatisGourmet
6.
Maquetación
El proyecto se realiza bajo la plataforma de software libre WordPress. Se estipula realizarse de ésta manera por la necesidad de nuestro cliente a la hora de actualizar contenido de manera constante y habitual. Además se le habilita una zona de e-commerce en la cual puede revisar los pedidos, gestionar el stock, y demás usos de una tienda online. Se busca una plantilla que se adecúe a las necesidades y servicios de nuestro cliente y que, como especifico anteriormente, tenga elementos independientes unos de otros, para evitar el fallo general en caso de un error de código o actualización puntual. También se utiliza un tema de la plataforma WordPress, por las múltiples posibilidades que ofrece de poder cambiar el estilo de la web, y mantenerla siempre actualizada, para un mejor posicionamiento dentro del mercado. Proyecto Web 29
V
Evaluación
1.
Respuesta del usuario
Según los testeos realizados entre los compañeros de clase y otras personas ajenas a la escuela e incluso sin conocer de que se trataba la temática del sitio, se realizan cambios a posteriori con respecto a algunos colores de la web, tamaño de las imágenes y ubicaciones de los textos, menú de navegación.
Extracto de algunas respuestas de usuarios
Como se expone anteriormente en el apartado de los Wireframe, los fallos encontrados, por motivos de incompatibilidades entre dispositivos y/o navegadores, se resuelven haciendo algunos cambios significativos para el producto final. Un gran problema fueron los navegadores, sobretodo versiones anteriores a internet explorer 8, que me han impedido realizar todas las funciones estéticas que me hubieran gustado por el tabú de usar CSS3.
30 Memoria TatisGourmet
Extracto de algunas respuestas de usuarios
Para todos aquellos usuarios que usan versiones anteriores, he añadido una advertencia de seguridad en la parte superior para que conozcan la razón de que algunas secciones, o sliders, puedan no funcionar correctamente, y se les enlaza a un sitio web donde pueden descargar o actualizar su navegador web. Se recomienda para navegar por el sitio sin tener ningún tipo de problema, realizar las visitas bajo: Mozilla Firefox, Google Chrome, Safari e Internet Explorer 9 en adelante.
2.
¿Puede existir una segunda parte? No. El proyecto de Tatis Gourmet, es cerrado, una vez que se entrega la página web con las claves de administrador para la gestión del CMS, es cuando el propio cliente gestiona su sitio web a su antojo, ampliando y reduciendo todos los productos y servicios que ofrece en sí la empresa.
3.
Ampliación del proyecto Sí, pero en este caso la realizaría nuestro cliente a través del CMS que le hemos integrado en su página web, y desde la cual puede continuar actualizando contenidos, agregando o quitando productos y todo lo que se le pudiera ocurrir realizar, como ya he explicado en el punto anterior.
Proyecto Web 31
4.
Conclusiones Bueno éste proyecto me ha gustado mucho realizarlo he aprendido más de lo que yo creía en un principio. Pensaba que iba a ser un proyecto de fácil resolución y nada más lejos de la realidad, he tenido muchas dificultades al realizarlo. Uno de los problemas más grandes, ha sido enfrentarme a la plataforma WordPress, con la cual tuve muchísimos quebraderos de cabeza para entenderla y conocer, relativamente bien, como funcionaba todo para realizar la web tal y como la tenía diseñada en los wireframes. Pero con la ayuda de los profesores he podido cumplir los plazos de entrega para tenerla acabada. También he aprendido a tener siempre una copia de seguridad de lo que realizo online en mi servidor local, porque por tres veces tuve que repetir la web al completo por realizar cambios que afectaban a la base de datos o a la ubicación de la página de inicio. Otro gran problema fue, tratar de cuadrar la web tal y como estaba diseñada en los wireframes, a sabiendas de que no iba a funcionar por un motivo u otro, y después de realizar el cambio, volver para atrás y nuevamente comenzar desde 0. He ampliado mi conocimiento en cuanto a código y he aprendido algo más sobre el lenguaje de servidor php al cual le tenía más respeto, aunque espero seguir aprendiendo más sobre él. Agradecer a los profesores que me han ayudado a resolver las dudas necesarias y a mis compañeros por las críticas del sitio y así poder trabajar para cambiarlas y que el sitio quedara de manera más ordenada y coherente.
32 Memoria TatisGourmet
5.
Referentes Web www.balsamiq.com www.pensandoenweb.es www.css3generator.com www.codepen.io www.es.wordpress.com www.hogash-demo.com www.themeforest.net www.w3schools.com www.woothemes.com/woocommerce www.nike.com www.adidas.com www.lascrispulinas.com www.tatisgourmet.es www.aceiterajaenera.es www.aceitunerabaezana.com
Proyecto Web 33