Disseny d'interfícies multimèdia - Pràctica by Nuri EN

2016

Pràctica. Finalització del prototip gràfic i tancamentde la guia d'estil per anuncit.com DISSENY D´INTERFÍCIES MULTIMÈDIA NURIA ESPINOZA

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza

ÍNDICE MODIFICACIONES RESPECTO A LA VERSIÓN ANTERIOR - ESCRITORIO .................................................................. 2 HOME.................................................................................................................................................................. 2 PÁGINAS DE SEGUNDO NIVEL............................................................................................................................. 6 DETALLE DE PRODUCTO ................................................................................................................................. 6 RESULTADO DE BÚSQUEDA ............................................................................................................................ 7 FORMULARIO DE CREACIÓN DE ANUNCIO ................................................................................................... 10 PÁGINA DE TEXTO “SOBRE NOSOTROS” ....................................................................................................... 12 CONTACTA CON NOSOTROS ......................................................................................................................... 13 REVISIÓN DE OTRAS PÁGINAS DE SEGUNDO NIVEL ..................................................................................... 14 MODIFICACIONES RESPECTO A LA VERSIÓN ANTERIOR - MÓVIL ......................................................................... 16 HOME................................................................................................................................................................ 16 PÁGINAS DE SEGUNDO NIVEL........................................................................................................................... 18 PÁGINA DETALLE DE ARTÍCULO .................................................................................................................... 18 RESULTADOS DE BÚSQUEDA ........................................................................................................................ 19 FORMULARIO DE CREACIÓN DE ANUNCIO ................................................................................................... 20 CONTACTA CON NOSOTROS ......................................................................................................................... 22 REVISIÓN DE OTRAS PÁGINAS DE SEGUNDO NIVEL ..................................................................................... 23 MANUAL DE IDENTIDAD VISUAL .......................................................................................................................... 26 RETÍCULA .......................................................................................................................................................... 26 USO DE LOGO ................................................................................................................................................... 27 TIPOGRAFÍA ...................................................................................................................................................... 28 GAMA CROMÁTICA ........................................................................................................................................... 29 ELEMENTOS DE INTERACCIÓN .......................................................................................................................... 30 BIBLIOGRAFÍA Y RECURSOS .................................................................................................................................. 32

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza

MODIFICACIONES RESPECTO A LA VERSIÓN ANTERIOR - ESCRITORIO

HOME Comparativa del desarrollo de la home: Versión 1.0 (PAC2):

Versión 2.0 (PAC3):

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza

Versión 3.0 (Práctica): Han variado dos pequeños detalles en la Home: -

La fuente en el menú hover se ha estandarizado a Atlas Grotesk Medium 15 y a Atlas Grotesk Light 12 (ver más adelante) Se ha añadido en el footer un enlace a “Quiénes somos” y se ha estandarizado el estilo del enlace “Contacta con nosotros”. Este footer aparecerá así en todas las páginas.

Resultado final:

A medida que hemos ido progresando en el diseño, éste se ha dirigido hacia un estilo muy sencillo, agradable visualmente y que sobre todo busca la comodidad del usuario, la usabilidad. Se han eliminado las fuentes que pueden tener problemas de visibilidad como las itálicas, los colores se han estandarizado para dar coherencia y entendimiento a los workflows de la página (todos los enlaces con el mismo estilo, los colores en los desplegables, imágenes, etc) y han crecido los espacios vacíos para que respiren los elementos de la página. La home es, en muchos casos, la primera impresión que nos da una página web y tiene que estar muy cuidada y ser una muestra de lo que se encontrará el usuario en el resto de la página. Es decir, no tiene sentido que nuestra home sea muy sencilla y fácil de usar pero que luego el sistema de navegación sea complejo o desordenado. Tampoco tiene sentido crear una página que sea muy rompedora con los estilos actuales de navegación (crearía confusión inicial a nuestro usuario y quizás desistiría en su intento de usarla si la web es muy diferente 3

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza a lo convencional): nuestra página se acomoda y asemeja a los estilos de navegación más comunes en la actualidad y mantiene su propio estilo, que la diferencia de las demás. Sigue unos estándares de diseño y tiene su propio diseño estético y minimalista, elementos imprescindible si queremos que nuestra página sea satisfactoria para el usuario. Un ejemplo claro de estandarización de estilos es el de los submenús: Versión 1.0:

Versión 2.0:

Versión 3.0 (menú hover desplegable)

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza

Otro ejemplo es el login: Versión 1.0, con poco espacio entre los elementos y uso de itálicas. Estos enlaces dirigían a una nueva página.

Versión 2.0: En esta versión (definitiva) los espacios son mayores, los tamaños y los tipos de letra también. Se privilegia la sensación de comodidad del usuario.

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza PÁGINAS DE SEGUNDO NIVEL DETALLE DE PRODUCTO Versión anterior de la página:

Versión actual:

En la página de producto se han realizado pocos cambios: 6

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza -

Revisión de los espacios entre los elementos inferiores: número de visitas, tiempo y localización. Versión anterior:

Versión final:

Estandarización de fuente en algunos elementos como localización (que pasa de Atlas Grotesk Bold a Light 12) para que siga el libro de estilo Versión anterior:

Versión final:

El corazón de “Favoritos” utiliza ahora los colores establecidos por el libro de estilo. El usuario puede ver los cambios que generan sus acciones. Anterior:

Actual:

Gracias a todos estos cambios ganamos en legibilidad y naturalidad de navegación. Los elementos mantienen una coherencia interna de colores, es consistente en formas y procesos, por lo que el usuario se siente cómodo navegando RESULTADO DE BÚSQUEDA Nuestra página de resultado de búsqueda mantiene la línea y añade un elemento que hasta ahora no habíamos visto: los cuadrados o pastillas para cada elemento. El hecho que los colores de las pastillas en cada artículo se vayan alternando hace que se distingan más fácilmente a primera vista y ordena la página a ojos de cualquier usuario.

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza El módulo izquierdo despliega los diversos elementos, que quedan ocultos a primera vista para no llenar la página de opciones y que quede más limpia, dando al usuario la opción de elegir en todo momento qué quiere ver y qué no.

Para realizar esta página se han seguido utilizando los elementos que ya teníamos de páginas anteriores y se ha procurado seguir la misma línea tanto en tipografía como en colores y tamaños. Detalle de la ficha de dos productos. Los colores se distinguen correctamente en ambos casos.

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza

El botón “Seguir esta búsqueda” ofrecería al usuario en una nueva página suscribirse a un newsletter periódico con los resultados de búsqueda o bien guardar esa búsqueda en su perfil (registro)

A futuro se pueden tener en cuenta varios puntos en esta página: -

El módulo izquierdo puede ser sticky es decir, puede seguir al usuario a medida que desciende en la página. El módulo izquierdo puede incorporar un segundo color de tal manera que quede más claro qué apartado está desplegado. Por ejemplo:

En vez de una paginación clásica, se podría optar por alternativas como infinite scroll para que el usuario no se tenga que molestar en clicar para cambiar de página, haciendo la navegación en ese

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza aspecto más natural. En ese caso habría que añadir un botón de “volver arriba” y procurar que el código no ralentizara la carga de la página como sucede ahora con algunos sistemas como masonry. 1

FORMULARIO DE CREACIÓN DE ANUNCIO Esta página, al igual que la anterior, se ha creado siguiendo los preceptos del libro de estilo y manteniendo la consistencia gráfica. En este caso, se combinan nuevos elementos como son los campos de texto y los checkboxes (radiales). El cuadro derecho ya lo habíamos utilizado en anteriores páginas (sobre nosotros, categoría) por lo que no es nuevo al usuario; es un espacio de información que puede resultar útil. En este caso, consejos para completar el formulario y poder hacer el artículo más atractivo.

Github. Slow performance with lots of items with infinite scroll. [https://github.com/desandro/masonry/issues/474] [Fecha de consulta: 20/05/2016] 1

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza Para los campos con datos de usuario, el placeholder es la mejor opción para sugerir al usuario qué datos ha de introducir 2. Por otro lado, el asterisco es un elemento ampliamente utilizado para indicar la obligatoriedad del campo. Hay que añadir que si el usuario está registrado en la página, el campo “Datos del anunciante” no aparece. Al ser campos nuevos, se especifica en el libro de estilo cómo han de reaccionar a las diferentes acciones del usuario. La idea es utilizar una combinación de los colores principales de la página y también los que se tienen históricamente asociados a error (rojo) Hablamos en el lenguaje del usuario, siguiendo los principios de la usabilidad web 3

El uso de la retícula es imprescindible para comprobar el equilibrio de las columnas:

Este formulario en el futuro puede mejorar, por ejemplo: -

Añadiendo una barra de progreso en la parte superior de la página para que el usuario sepa en qué punto del proceso se encuentra. Esto lo vemos por ejemplo en los artículos de Europa Press 4:

UXLumen. Usabilidad en formularios: Aspectos básicos. [http://www.uxlumen.com/usabilidad-enformularios-aspectos-basicos/] [Fecha de consulta: 21/5/2016] 3 Securnet Consultores. Usabilidad web [http://www.securnetconsultores.net/soluciones/consultoria-yservicios-tic/servicios-web-securnet/usabilidad-web/] [Fecha de consulta: 21/5/2016] 4 Europa Press [http://www.europapress.es/][Fecha de consulta: 21/5/2016] 2

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza -

Añadiendo ayuda automática, es decir, textos de ayuda que se hacen visibles cuando el usuario clica en un ítem del formulario o bien cuando el usuario hace clic en un ícono de ayuda situado al lado del ítem.

PÁGINA DE TEXTO “SOBRE NOSOTROS”

Al igual que en otras páginas, el cuadro flotante de la derecha nos proporciona información extra para que el usuario descubra otros elementos. No se proporciona mucha información ni enlaces para no avasallar con datos al usuario: ha de descubrir a su ritmo. Uso de la retícula:

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza Aunque usamos las dos columnas, el cuadrado lateral difiere de los utilizados anteriormente ya que prácticamente tocaría la columna izquierda y daría una sensación de desorden visual. CONTACTA CON NOSOTROS

La página de contacto podría parecer una mezcla de “Sobre nosotros” y el formulario de contacto. Los campos del formulario son sólo 3: los básicos para enviar una consulta. Se utilizan placeholder y se ha procurado mantener tanto la alineación como los estilos del formulario principal de la web. El campo “Preguntas frecuentes” podría mejorar en un futuro: a medida que se reciba más feedback por parte de los usuarios, tanto bueno como malo, se podría ampliar utilizando un cuadro de información en la columna derecha de la página, tal como en otras páginas (ver “Sobre nosotros”). En ese cuadro lateral se podría listar las principales preguntas frecuentes según los usuarios. Esta es una página que puede ser muy útil para los usuarios nobeles y que los usuarios expertos no necesitarán visitar. Una vez el usuario envía el mensaje, aparece un texto indicando que el mensaje se ha enviado correctamente. Es imprescindible que haya un feedback para que el usuario esté informado de lo que está pasando.

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza REVISIÓN DE OTRAS PÁGINAS DE SEGUNDO NIVEL CATEGORÍA Versión 1.0:

Versión 2.0:

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza

Al igual que en la página de resultado de búsqueda, se han añadido pastillas tras cada categoría para delimitarlos y hacerlos más visibles. Esto ordena visualmente la página y le da una consistencia con el resto de apartados. Los thumbnails incluyen dos líneas de descripción que recortan el texto. Detalle de un campo: Versión 1:

Versión 2:

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza

CERCA DE TI

La página “Cerca de ti” no presenta cambios. A futuro se podría considerar mejorar el mapa interactivo añadiendo información hover sobre cada comunidad autónoma, por ejemplo el número de anuncios publicados.

MODIFICACIONES RESPECTO A LA VERSIÓN ANTERIOR - MÓBIL

HOME La versión móvil de home no ha variado respecto a la versión 2.0 presentada en la anterior PAC:

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza

Versión 1.0:

En la PAC anterior se decidió eliminar el botón “Publica” para dar paso a los pictogramas utilizados comúnmente en aplicaciones móviles y se estandarizaron estilos, eliminando itálicas, reduciendo texto y ampliando espacios. A futuro se podría mejorar el workflow: actualmente el proceso del usuario sería elegir una categoría, lo que ya le haría irse a la página de categorías y posteriormente escribir su búsqueda. En la versión web el workflow 17

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza es justamente el inverso: se prioriza la búsqueda por encima de la revisión de categorías. Mediante estudios de mercado se podría testear una versión de la aplicación móvil en la que la búsqueda fuera el elemento destacado de la home móvil. No se recomienda sin embargo eliminar ni una de las opciones: el usuario puede así tener libertad para navegar como desee, independiende del workflow que nosotros prioricemos. PÁGINAS DE SEGUNDO NIVEL PÁGINA DETALLE DE ARTÍCULO En esta página se ha añadido la visibilidad del header, elemento que se había deshabilitado en la primera versión pensando en el minimalismo, pero que sin embargo se retoma para que el usuario no se sienta confundido al perder el header con las opciones principales: el usuario ha de sentir que tiene el control de lo que ocurre en la aplicación o web. Por otro lado, se ha estandarizado el estilo de fuente de “Contactar con el anunciante”. Versión 1.0 vs 2.0

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza

RESULTADOS DE BÚSQUEDA Al igual que en su versión web, se utilizan pastillas para diferenciar cada artículo. Se añade el elemento de geolocalización (“hasta 10km de ti”) que permite al usuario elegir la distancia o la zona a la que quiere buscar:

La información en cada pastilla se ha reducido a 4 elementos: “nuevo” o “destacado”, el precio, nombre del artículo y favorito (Favorito dirigiría a la opción de registrarse). Clicar en cualquier otro punto de cada pastilla llevaría a la página de detalle de artículo. El resultado de búsqueda, a diferencia de la versión web, no está paginado si no que es un infinite scroll (ver ícono de loading). En la versión móvil es más cómodo para el usuario utilizar un scroll infinito que clicar en números de paginación que en muchos casos son muy pequeños para acceder a ellos de un solo clic. Destaca el elemento “añadir artículo”: un círculo flotante con el pictograma de un lápiz y que siempre se encuentra por encima de la página. Esto es así en casi todas las páginas de la aplicación.

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza FORMULARIO DE CREACIÓN DE ANUNCIO

El formulario de creación de artículo en móvil es, a diferencia de la versión web, bastante más corto aunque con la misma información. Mantiene espacios, aunque los campos de texto varían respecto a la versión web a favor de un diseño más minimalista cuyas características quedan reflejadas en el libro de estilo:

Se reduce texto, dando por conocidos elementos como la obligatoriedad del asterisco y el pictograma de fotografía: hablan en el lenguaje del usuario. Aquí a diferencia de la versión web, no hay consejos ni ayuda extra. Si el usuario está registrado en la aplicación, el formulario de creación de artículo es más breve:

De cara a futuras mejoras, se pueden utilizar placeholders en vez de labels para ganar espacio en el formulario. Si el usuario no está registrado en la aplicación, una solución a futuro para evitar el cluster de elementos en la página sería crear dos pasos: uno para los datos del artículo y otro con los del usuario, con barra de progreso superior y un recordatorio para registrarse antes del paso final. 20

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza PÁGINA DE TEXTO “SOBRE NOSOTROS” Esta página sigue el mismo estilo de la versión escritorio. Una página sencilla, con texto e interlineado claro y fácil de leer. Por otro lado, hay elementos con enlace que al clicar dirigen a la home.

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza CONTACTA CON NOSOTROS

Esta página tiene, a diferencia de la versión escritorio, dos pasos. El espacio de Preguntas Frecuentes es relevante, y por tanto se añade en este punto. A diferencia de la versión escritorio, se utiliza un formato “desplegable” con estilo visual semejante a lo utilizado en otras páginas de anuncit. Al hacer clic en una pregunta, se despliega la respuesta dentro del mismo cuadro:

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza

El formulario de contacto solicita los mismos datos que la versión web y sigue el estilo de formulario móvil especificado en el libro de estilo. Al finalizar el proceso, en pantalla aparece un pop-up de “mensaje enviado correctamente”. REVISIÓN DE OTRAS PÁGINAS DE SEGUNDO NIVEL CATEGORÍAS La página de subcategorías ha cambiado respecto a la versión anterior: Se ha buscado un orden visual y el uso de botones grandes y claros para facilitar la navegación. Se han estandarizado textos y espacios. Se ha añadido un buscador en la parte superior de la pantalla. Detalle:

Versión 1.0 vs versión 2.0:

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza

CERCA DE TI El mapa “Cerca de ti” de la versión escritorio aprovecha en su versión móvil la geolocalización, proporcionando la opción de mostrar los anuncios cercanos al usuario. También se puede acceder al buscador de provincias a través del buscador disponible en casi todas las pantallas (pictograma lupa)

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza La página “Cerca de ti” no ha experimentado ningún cambio respecto a la primera versión. A futuro se podría experimentar con el mapa por ejemplo añadiendo un “dibuja la zona en la que quieres buscar” como en Idealista.es 5

En el buscador avanzado se ha añadido un enlace de “Buscar zona en el mapa” para que sea más accesible el mapa a primera vista.

Idealista. Dibuja dónde quieres vivir, la novedosa funcionalidad de Idealista para buscar casa. [http://www.idealista.com/news/inmobiliario/blog-de-idealista/2016/03/11/741324-dibuja-donde-quieresvivir-la-novedosa-formula-para-buscar-casa-de] [Fecha de consulta: 21/05/2016] 5

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza

MANUAL DE IDENTIDAD VISUAL El manual de identidad visual utiliza diversas referencias que se señalarán en la bibliografía. RETÍCULA

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza USO DE LOGO Este espacio del libro de estilo se ha añadido respecto a la versión anterior. Es relevante el uso correcto del logo y sus colores y espacios allá donde se quiera utilizar para mantener una coherencia y una consistencia de cara al usuario. El uso de ejemplos prácticos es muy útil de cara a diseñadores y demás usuarios del manual.

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza TIPOGRAFÍA

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza GAMA CROMÁTICA

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza ELEMENTOS DE INTERACCIÓN Este apartado es el que más ha cambiado, ya que se han añadido nuevos campos a medida que hemos ido avanzando en el desarrollo.

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza

Los desplegables, checkboxes, campos de texto e íconos de favorito han ganado su espacio propio. El estilo de los campos de texto incorpora un color nuevo, el rojo, que sólo aparecerá en casos de error.

Pràctica. Finalització del prototip gràfic i tancament de la guia d'estil – Disseny d’interfícies multimèdia. Núria Espinoza

BIBLIOGRAFÍA Y RECURSOS

• • •

• •

Photoshop CC 2015 Mapa de Barcelona: Google Maps [maps.google.com] [Fecha de consulta: 28/4/2016] Referencias y herramientas para Manual de Identidad Visual: o Médicos Sin Fronteras (2015) Manual de Identidad Visual [https://identidadvisual.msf.es/] [Fecha de consulta: 28/4/2016] o Smashing Magazine. Designing Style Guidelines For Brands And Websites [https://www.smashingmagazine.com/2010/07/designing-style-guidelines-for-brands-andwebsites/] [Fecha de consulta: 28/4/2016] o RGB.TO [http://rgb.to/] [Fecha de consulta: 30/4/2016] Fuente: Médicos Sin Fronteras (2015) Manual de Identidad Visual [https://identidadvisual.msf.es/] [Fecha de consulta: 28/4/2016] Retícula: Elliot Jay Stocks (2012) A better Photoshop grid for responsive web design [http://www.elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/] [Fecha de consulta: 26/4/2016]

IMÁGENES

• • • •

Íconos creados por Freepik [http://www.freepik.es/] en Flaticon.com [http://www.flaticon.com/free] [Fecha de consulta: 27/03/2016] Mapa de España: d-maps.com [http://d-maps.com/carte.php?num_car=18039&lang=es] [Fecha de consulta: 27/03/2016] Logo: anuncit.com [http://anuncit.com/] [Fecha de consulta: 27/04/2016] Fotografías de objetos para la “Categoría hogar”: o anuncit.com [http://anuncit.com/] [Fecha de consulta: 27/04/2016] o decoestilo.com. Guía para identificar antigüedades para decorar la casa [http://www.decoestilo.com/articulo/guia-para-identificar-antiguedades-para-decorar-lacasa/][Fecha de consulta: 27/04/2016] o maderaymuebles.es. AQ INTERIORES Complementos y Decoración para el Hogar [http://www.maderaymuebles.es/detail/AQ-INTERIORES-Complementos-y-Decoracion-parael-Hogar-link-1831.html] [Fecha de consulta: 27/04/2016] o hogardecorado.com. Ropa de cama en colores frescos para invierno [http://www.hogardecorado.com/ropa-de-cama-en-colores-frescos-para-invierno/] [Fecha de consulta: 27/04/2016] o tejidosaraceli.com Ropa de hogar en Valladolid [http://www.tejidosaraceli.com/ropa-dehogar-en-valladolid_76554.html ] [Fecha de consulta: 27/04/2016] o revistalabarra.com Vajilla HC [http://revistalabarra.com/guia/classified/Vajilla-HC-923.html] [Fecha de consulta: 27/04/2016]