CLIMENT - Diseño e Implementación de Una Tienda Online Con El CMS Drupal PDF

Escola Tcnica Superior dEnginyeria Informtica
Universitat Politcnica de Valncia
Diseo e implementacin de una tienda

online con el CMS Drupal
Trabajo Fin de Grado
Grado en Ingeniera Informtica
Autor: Jordi Climent Andrs
Tutor: David Pic Vila
2014-2015
Diseo e implementacin de una tienda online con el CMS Drupal
2
Resumen
Diseo e implementacin de un sitio web de una tienda online para una fbrica de
muebles llamada Eurostill utilizando Drupal 7 y su mdulo Commerce. El proyecto se
divide en las fases necesarias para llevar a cabo un trabajo de arquitectura de la
informacin y de la parte tcnica de puesta en marcha de la pgina web. La finalidad
principal del sitio ser vender los productos que fabrica la empresa a potenciales nuevos
clientes tanto particulares como otras empresas as como conseguir publicidad con la
ayuda de las redes sociales.
Palabras clave: Drupal, commerce, web, tienda online, cms, gestor de contenido
3
Tabla de contenidos
1. Introduccin ................................................................................................................ 6
2. Estudios previos ...........................................................................................................7
2.1. Sistemas de gestin de contenidos CMS ..................................................................7
2.2. Ventajas de utilizar un CMS ...................................................................................7
2.3. Drupal ................................................................................................................. 8
2.4. Por qu Drupal? .................................................................................................. 9
2.5. Instalacin de Drupal ...........................................................................................10
3. Diseo e implementacin ............................................................................................ 14
3.1. Fase 1: Planteamiento inicial del proyecto ............................................................. 14
3.1.1. Descripcin de la organizacin...................................................................... 14
3.1.2. Motivacin del proyecto web ........................................................................ 15
3.1.3. Anlisis de la competencia ............................................................................ 17
3.2. Fase 2: Definicin de los contenidos .................................................................... 25
3.2.1. Informacin general sobre la organizacin y la web ....................................... 25
3.2.2. Tipos de contenido especficos ..................................................................... 25
3.2.3. Implementacin en Drupal de los tipos de contenido ......................................27
3.3. Fase 3: Arquitectura de la informacin ................................................................. 28
3.3.1. Card Sorting ............................................................................................... 28
3.3.2. Agrupaciones de informacin....................................................................... 30
3.3.3. Herramientas de Navegacin......................................................................... 31
3.3.4. Representacin esquemtica (Wireframes) .................................................... 32
3.3.5. Permisos, usuarios y flujos de trabajo ........................................................... 36
3.4. Fase 4: Implementacin en Drupal ........................................................................37
3.4.1. Diseo ........................................................................................................ 38
3.4.2. Tipos de contenidos ..................................................................................... 39
3.4.3. Taxonomas .................................................................................................47
3.4.4. Mdulos ..................................................................................................... 49
3.4.5. Mens .........................................................................................................55
3.4.6. Vistas .......................................................................................................... 57
3.4.7. Bloques ....................................................................................................... 61
4. Conclusiones ............................................................................................................. 63
5. Referencias bibliogrficas .......................................................................................... 64
4
6. Siglas y abreviaturas .................................................................................................. 65
7. ndice de imgenes y tablas ........................................................................................ 66
7.1. Imgenes ........................................................................................................... 66
7.2. Tablas .................................................................................................................67
5
1. Introduccin
Este proyecto se trata de una pgina web que va a servir de tienda online para una
empresa dedicada a la fabricacin de muebles. Para ello se ha utilizado el sistema de
gestin de contenidos Drupal 7, concretamente una modificacin del mismo que incluye
todo lo necesario para crear una tienda online llamado Drupal Commerce, lo que facilita
enormemente la tarea de desarrollo.
Primero se ha realizado un estudio sobre los sistemas de gestin de contenido (CMS)

y cules son sus ventajas para despus entrar en detalle a explicar Drupal y como se ha
realizado su instalacin.
Para el diseo y la implementacin del proyecto se ha utilizado un mtodo dividido en

cuatro fases en el que hemos realizado un estudio de la empresa y sus necesidades as
como un anlisis de algunas pginas web de la competencia, a continuacin hemos
definido los tipos de contenido que vamos a necesitar para nuestra web y tambin su
implementacin especfica en Drupal, para luego poder realizar un estudio de la
arquitectura de la informacin que nos ayudara a definir cmo va a ser el diseo y la
organizacin de la informacin en nuestra pgina web. Todo esto previamente a realizar
la implementacin que se corresponder a la ltima fase.
Con esta metodologa de trabajo basada en la arquitectura de la informacin

conseguimos una pgina web que se adecue a las necesidades de la empresa y con un
diseo adaptado a lo que esperan los potenciales clientes de la misma.
6
2. Estudios previos
2.1. Sistemas de gestin de contenidos CMS
El gestor de contenido es una aplicacin informtica usada para crear, editar, gestionar
y publicar contenido digital multimedia en diversos formatos. El gestor de contenidos
genera pginas web dinmicas interactuando con el servidor web para generar la pgina
web bajo peticin del usuario, con el formato predefinido y el contenido extrado de la
base de datos del servidor. Esto permite gestionar, bajo un formato estandarizado, la
informacin del servidor, reduciendo el tamao de las pginas para descarga y reduciendo
el coste de gestin del portal con respecto a un sitio web esttico, en el que cada cambio
de diseo debe ser realizado en todas las pginas web, de la misma forma que cada vez
que se agrega contenido tiene que maquetarse una nueva pgina HTML y subirla al
servidor web.
Por lo que podemos decir que un CMS (siglas en ingls de Content Management
System) es un tipo de plataforma web estandarizada que permite a los usuarios crear
contenido para su pgina desde un backend o gestor de contenidos sin necesidad de contar
con conocimientos tcnicos muy especficos. Existe una gran cantidad de CMS, entre los
ms populares se encuentran Drupal, WordPress, Joomla, Magento, Prestashop,
OsCommerce
2.2. Ventajas de utilizar un CMS
El desarrollo basado en un CMS tiene una gran cantidad de ventajas que hacen que sea
una opcin muy recomendable a la hora de plantear una web:
Los CMS tienen funcionalidades concretas que est comprobado que

funcionan y funcionan bien, sin necesidad de arreglar fallos en cuestiones
bsicas y permitiendo centrarse en aspectos ms complejos. Los CMS
suelen cubrir necesidades para plataformas de comercio electrnico, blogs,
pginas con contenido estructurado y gestin de usuarios todo depende
de elegir el CMS apropiado.
Un usuario puede gestionar su propia web despus de recibir formacin.
Una vez desarrollada la web, el propio usuario puede aadir, editar o
borrar datos y mantener su pgina viva por s mismo.
El desarrollo desde un CMS es ms rpido y limpio. La creacin de
plantillas y funcionalidades para los gestores de contenidos se basan en
unos estndares que un buen equipo es capaz de seguir para conseguir los
resultados deseados partiendo de una base slida ya constituida. Esto
7
elimina en gran parte el esfuerzo necesario para construir el esqueleto de

cdigo de una web.
Permiten desarrollos escalables. Esto significa que, con una buena
planificacin, se puede orientar el desarrollo desde un CMS para aadir
nuevas funcionalidades no previstas en el futuro sin que la web sufra
cambios traumticos mediante la incorporacin de mdulos.
Muchos desarrolladores utilizan los CMS ms populares. Esto es una
ventaja importante, porque cualquier programador es capaz de hacerse
cargo y modificar cualquier web siempre que conozca la arquitectura del
CMS empleado aunque no sean ellos los que la hayan desarrollado.
Muchos creadores de contenido saben manejarlos. La gran mayora de
redactores saben cmo gestionar WordPress en mayor o menor medida por
ejemplo. Es relativamente fcil encontrar personas que pueden hacerse
cargo del contenido de una web desarrollada a partir de un CMS sin
necesidad de ensearles cmo se maneja.
Cada CMS tiene una comunidad de programadores detrs que
constantemente soluciona fallos, crea nuevos mdulos y estn en contacto
unos con otros para proporcionar el mejor servicio posible a los clientes
para los que desarrollan.
Con todas estas ventajas, hoy en da es realmente difcil encontrar una web conocida
que no est desarrollada a partir de un sistema de gestin de contenidos, ya sea uno de
cdigo libre o uno construido especficamente para sus necesidades.
2.3. Drupal
Drupal es un sistema de gestin de contenidos o CMS (por sus siglas en ingls, Content
Management System) libre, modular multipropsito y muy configurable que permite
publicar artculos, imgenes, archivos y otras cosas u otros archivos y servicios aadidos
como foros, encuestas, votaciones, blogs y administracin de usuarios y permisos. Drupal
es un sistema dinmico: en lugar de almacenar sus contenidos en archivos estticos en el
sistema de ficheros del servidor de forma fija, el contenido textual de las pginas y otras
configuraciones son almacenados en una base de datos y se editan utilizando un entorno
Web.
Es un programa libre, con licencia GNU/GPL, escrito en PHP, combinable con

MySQL, desarrollado y mantenido por una activa comunidad de usuarios. Destaca por la
calidad de su cdigo y de las pginas generadas, el respeto de los estndares de la web, y
un nfasis especial en la usabilidad y consistencia de todo el sistema.
El diseo de Drupal es especialmente idneo para construir y gestionar comunidades

en Internet. No obstante, su flexibilidad y adaptabilidad, as como la gran cantidad de
8
mdulos adicionales disponibles, hace que sea adecuado para realizar muchos tipos
diferentes de sitio web.
Drupal fue originalmente escrito por Dries Buytaert y es el software usado para
impulsar por ejemplo a los sitios web Debian Planet, Spread Firefox, Kernel Trap y White
House.
A pesar de que empez como un pequeo BBS, Drupal ha llegado a ser mucho ms
que slo un portal de noticias gracias a su arquitectura flexible. Drupal se compone de
una infraestructura base y un conjunto de mdulos que ofrecen un amplio conjunto de
funciones, incluyendo sistemas de comercio electrnico, galeras de fotos, administracin
de listas de correo electrnico, e integracin de CVS. Es posible aadir mdulos de
terceros para modificar el comportamiento de Drupal u ofrecer nuevas funciones.
Drupal se usa, entre otros, en intranets de compaas, enseanza en lnea, comunidades

de arte y administracin de proyectos. Muchos piensan que la relevancia de Drupal en las
comunidades de usuarios es lo que lo hace destacarse de la competencia.
2.4. Por qu Drupal?
En nuestro caso que vamos a realizar una tienda online Drupal nos aporta una serie de
ventajas que vamos a enumerar a continuacin:
Es modular y escalable
Drupal le permite a los programadores crear webs con bastantes prestaciones muy
fcilmente y luego ampliarla con muchsimas ms prestaciones igual de fcilmente.
Adems de ser ms flexible y escalable que la competencia.
Intuitivo
Aunque est ms enfocado a programadores que otros CMS no es menos sencillo para
un administrador introducir, consultar y acceder a contenidos, ya que todo se gestiona
desde el navegador a travs del men de administracin mediante formularios sin
saber nada de cdigo.
Todo es posible con Drupal

Tanto Wordpress como Joomla estn ms enfocados al pblico mayoritario que
constituyen los "Site builders", por otro lado Drupal est enfocado a un pblico ms
minoritario, ya que est enfocado a programadores puros, por lo que con un poco de
destreza y ayuda de los mdulos se puede crear cualquier tipo de web con Drupal.
Tiene un software y una comunidad consolidada

Drupal.org tiene cerca de 648.000 usuarios registrados y ms de 10.000
programadores puros desarrollando mdulos.
9
Es software libre
Las ventajas para el cliente son:
o No se pagan licencias.
o Hay independencia de proveedores.
o El software est en constante evolucin, puesto que todas las personas que
trabajan con este sistema publican y suman sus xitos, de forma que cualquier
otra los puede aprovechar gratuitamente.
Multiidioma
Todos los textos se pueden traducir mediante una interfaz grfica y existen
traducciones ya existentes que se pueden importar con facilidad.
El sistema base de gestin de contenido es limpio, flexible y potente.

Todos los objetos de contenido son tratados de manera ms o menos uniforme (Una
noticia, una pgina, un enlace o una imagen son un objeto de contenido, y sobre
cualquiera de ellos se pueden activar los comentarios, presentar como un listado o a
pgina completa, realizar bsquedas...). Adems tiene un sistema de categoras
(taxonoma) totalmente configurable, con jerarquas simples o complejas, y es el
mismo para todos los tipos de objetos.
Sistema de control en los roles y permisos

Posee un potente sistema de permisos que permite asignar unas acciones u otras segn
los permisos asignados a cada rol.
Preparado para dispositivos mviles

Permite el desarrollo de versiones para dispositivos mviles.
Se integra con las redes sociales

Viene preparado para hacer login con la cuenta de Facebook/Twitter y asociarla al
perfil en el sitio web, adems de permitir la publicacin automtica de contenido en
dichas redes.
2.5. Instalacin de Drupal
Para nuestro proyecto hemos optado por aprovechar el servicio de publicacin web
avanzado para alumnos que proporciona la UPV que ofrece los servicios necesarios para
la instalacin que requerimos para el proyecto, entre ellos destacamos:
Soporta varios lenguajes, entre ellos php.

Bases de datos mySQL y SQLServer, que se pueden gestionar mediante
phpMyAdmin.
Administracin de archivos mediante FTP.
10
As que una vez que hemos solicitado nuestro espacio, hemos accedido al panel de
administracin del mismo y hemos creado una base de datos nueva como se muestra en
la siguiente imagen.
Imagen 1: Creacin base de datos
A continuacin nos hemos descargado Drupal de su pgina web. Como necesitamos

para nuestro propsito instalar el mdulo Drupal Commerce, hemos decidido bajar un
paquete llamado Commerce Kickstart en el que se incluye, no solo el ncleo de Drupal,
sino todos los mdulos y temas necesarios para la instalacin de Drupal Commerce, por
lo que nos facilita el proceso de instalacin.
La descarga del mismo se puede encontrar en el siguiente enlace:

https://www.drupal.org/project/commerce_kickstart
Una vez descargado se han subido los archivos mediante FTP al servidor, y hemos
iniciado la instalacin.
11
Imagen 2: Instalacin Drupal
Como podemos ver la instalacin es muy sencilla y guiada, si le damos a empezar nos
pide que introduzcamos los datos de la base de datos que creamos anteriormente.
Imagen 3: Instalacin Drupal paso 2
12
En el siguiente paso hemos configurado algunos aspectos sobre la web como el idioma,
la zona horaria, el usuario de administracin y el nombre del sitio.
Y por ltimo llegamos a un formulario donde temos que configurar algunos parmetros
de la tienda que hemos configurado como se muestra a continuacin. Una vez terminado
con esto ya tendremos nuestro Drupal Commerce listo para funcionar.
Imagen 4: Instalacin Drupal paso 3
13
3. Diseo e implementacin
3.1. Fase 1: Planteamiento inicial del proyecto
3.1.1. Descripcin de la organizacin
Nombre, actividad e historia

Eurostill es una empresa que se dedica a la fabricacin de sillas, sillones, sofs y mesas
ubicada en los alrededores de Valencia, lugar donde existe una gran tradicin en la
industria de la fabricacin de muebles. Fue fundada en 1993, y poco a poco se ha ido
expandiendo contratando ms trabajadores y trasladndose a una nave industrial ms
grande. Al tratarse de una fbrica no cuenta con trato de venta al pblico, su mercado
mayoritario son pedidos para clientes profesionales (hoteles, restaurantes, instalaciones,
etc.) o para tiendas de ventas de muebles al pblico.
Objetivos de la organizacin
El objetivo de la empresa es ofrecer a los clientes sus productos fabricados
artesanalmente, tratando de innovar, marcar diferencias, tanto en el proceso de
fabricacin como en la materia prima, con la mejor calidad posible y dentro de los plazos
establecidos.
Quin compone la organizacin

La empresa se trata de una cooperativa formada por 5 propietarios y cuenta con otros
4 trabajadores. Entre los nueve se encargan de realizar todo el proceso de la fabricacin
de las sillas y los sillones.
El poder de decisin corresponde a los 5 propietarios mediante consenso. Tambin

cuentan con una secretaria encargada de gestionar la documentacin y los asuntos
financieros de la empresa.
14
3.1.2. Motivacin del proyecto web
Formas de comunicacin actuales y estrategias

Hasta ahora la empresa siempre ha tenido comunicacin directa con sus clientes que
suelen ser, como hemos mencionado anteriormente, profesionales e intermediaros. Su
forma de conseguir nuevos compradores consista en acudir a ferias de muebles, eventos
donde muchas empresas acuden para exponer sus productos y hacerse publicidad.
Tambin cuentan con catlogos que se reparten a los interesados en dichos eventos o
a clientes ya conocidos para que estn al tanto de las novedades en el catlogo.
Pero desde hace unos aos la actividad del sector ha bajado mucho y la competencia
es ms fuerte, por eso han decidido probar con un nuevo servicio online de venta de sus
productos con el fin de expandirse hacia nuevos compradores tanto particulares como
profesionales.
Se pretende que la nueva pgina web sirva tanto como tienda online como para reclamo
publicitario, poniendo especial nfasis en las redes sociales para tratar de conseguir la
mayor difusin posible. Tambin se har un diseo adaptable al mvil, ya que cada vez
ms la gente navega a travs de estos dispositivos.
Pblico objetivo
El pblico objetivo principal de la web sern usuarios interesados en comprar el tipo
de muebles que ofrece la empresa. Puede tratarse tanto de particulares como otras
empresas que necesiten los productos que ofrecen.
Por qu una nueva web?

Como se ha mencionado anteriormente la nueva estrategia consiste en crear una nueva
tienda online que ofrezca un servicio de venta totalmente automatizado que permitir una
interaccin directa entre los compradores particulares y el fabricante sin necesidad de
intermediarios.
Al ser una venta directa sin intermediarios permitir tener ms beneficios aumentando
un poco el margen por producto vendido ya que al ser una fbrica el precio de venta a
este tipo de clientes suele ser muy ajustado.
Servir tambin como publicidad para la empresa y para atraer nuevos compradores
con la ayuda de las redes sociales.
Permitir aadir nuevos productos de forma sencilla.
15
Contar con una seccin de blog para que puedan aadir noticias relacionadas con
nuevos productos, descuentos o eventos como las ferias de muebles.
Cmo puede ayudar una nueva web a resolver problemas existentes

La idea con esta nueva va de negocio es ser capaces de generar ingresos adicionales
gracias a la captacin de nuevos compradores, rompiendo la brecha que existe para los
clientes particulares el comprar directamente a un fabricante sin intermediarios.
Estos tres aspectos forman los pilares de la captacin de nuevos usuarios, gracias a los
cuales persiguen mitigar la mala influencia de la crisis econmica en el negocio de la
fabricacin de muebles:
Muebles de diseo artesanales

Hay que poner un especial nfasis en que los muebles estn hecho de forma artesanal,
con diseos muy cuidados y trabajados, lo que da un valor aadido a los productos.
Fcil
La pgina web tiene que ser simple y sencilla para que el usuario pueda encontrar de
forma rpida lo que busca.
Sistema de pago seguro automatizado

Tiene que tener un sistema de pago rpido y seguro, ofreciendo las mximas
posibilidades posibles para que el cliente pueda elegir la que prefiera.
Capacidad de generar contenidos

Como se trata de una tienda, una vez introducidos todos los productos la necesidad de
introducir nuevo contenido es reducida, solo cuando haya nuevos productos o alguna
noticia, por lo que se ha decidido que se va a contratar a una persona para que mantenga
actualizada la web y se encargue de mantener activas las redes sociales respondiendo
preguntas y actualizando el contenido.
Costes
El presupuesto del proyecto es de 10.000 euros para la realizacin de la web,
incluyendo todos los gastos de su puesta en marcha.
16
3.1.3. Anlisis de la competencia
Silla Stil - http://www.sillastil.com/
Imagen 5: Pgina principal Silla Stil
Se trata de la pgina web de una fbrica de sillas, sillones y otros tipos de muebles
muy similar a la de nuestro caso de estudio.
El diseo de la pgina web se puede ver a primera vista que est bastante desfasado,
no existe una pgina de inicio como tal, cuenta con un men superior con las distintas
secciones de la web. Dentro de la seccin de catlogo aparece un submen con las
distintas secciones de productos que tienen.
En el cuerpo de la pgina hay un texto donde explica un poco cual es la actividad de

la empresa y aparece una imagen promocional con algunos de sus productos.
17
En la parte inferior tenemos una gran cantidad de enlaces que nos redirigen a las
distintas secciones del catlogo al igual que lo hace el men superior.
Imagen 6: Seccin catlogo Silla Stil
Si entramos en alguna de las secciones del catlogo nos aparece una cuadrcula con
imgenes de los productos que se encuentran en dicha seccin, y a la izquierda nos
aparece un men con los distintos modelos.
Este es un ejemplo de lo que no queremos hacer, posiblemente haya muebles

maravillosos pero el aspecto visual es tan poco atractivo que los hace muy poco
apetecibles. La organizacin de contenidos resulta poco intuitiva y en consecuencia la
navegacin. Adems de que se trata ms de un catlogo online que de una tienda online
ya que no permite una venta de sus productos de forma directa sino que hay que contactar
con la empresa mediante formularios para hacer pedidos.
18
Infinity Furniture - http://www.infinityfurniture.com/
Imagen 7: Pgina principal Infinity Furniture
En la portada de esta pgina vemos que hace especial nfasis en mostrar las noticias
relacionadas con las inauguraciones de empresas que han utilizado sus productos. Tiene
un diseo bastante oscuro que mezcla con colores dorados que le da el toque de elegancia
que pretenden buscar.
En la seccin de Empresa podemos ver como destaca la artesana de sus productos

incorporando imgenes del proceso de fabricacin.
19
Imagen 8: Seccin sillas Infinity Furniture
Si entramos en la seccin de sillas nos aparece una enorme cuadrcula con imgenes
con todos sus modelos, lo ideal sera que fuera paginado para que la pgina no fuera tan
larga.
Una cosa que crea confusin en el men principal es la seccin Catlogo donde se
encuentran los dems muebles que no son sillas.
20
Imagen 9: Descripcin silla Infinity Furniture
Al acceder a un modelo concreto se nos abre una galera con cantidad de imgenes de
la misma pero no nos da ninguna otra informacin ni posibilidad de comprar.
21
Valencia Rattan - http://www.valenciarattan.net/
Imagen 10: Pgina principal Valencia Rattan
Nos encontramos ante una pgina con un aspecto mucho ms cuidado y moderno que
las anteriores analizadas, sigue el estilo minimalista de lneas rectas y colores simples que
est de moda actualmente.
22
En la portada podemos ver un slideshow de imgenes seguido de un bloque de noticias
y otro bloque de nuevos productos. En la parte inferior aparece un ndice con las distintas
secciones del catlogo de forma ms detallada que en el men principal que se encuentra
en la parte superior. Podemos observar tambin que incluyen un enlace en la parte
superior derecha para acceder a su pgina de Facebook.
En general se trata de una pgina con un buen diseo que nos puede servir de ejemplo
para nuestra tienda.
Espai Mobles - http://www.espaimobles.com/es/
Imagen 11: Pgina principal Espai Mobles
Por ltimo vamos a analizar una pgina de una tienda de muebles de todo tipo,
podemos ver que se trata de una pgina sencilla y minimalista en la que predomina el
color blanco, tiene una cabecera con varias imgenes que van rotando y un men lateral
con las distintas categoras de productos.
23
En el cuerpo de la pgina podemos ver una cuadrcula con los productos destacados,
cada uno incluye una imagen, el nombre y el precio, al no estar paginada la pgina queda
demasiado grande teniendo que hacer demasiado scroll para ver todos los productos que
se muestran.
Imagen 12: Descripcin producto Espai Mobles
Si accedemos a un producto vemos que existe una imagen del mismo, una descripcin
y un selector de color, as como el precio y el botn de aadir a la cesta.
Aunque la pgina no est mal tiene un diseo general un poco flojo, ya que es
prcticamente todo blanco sin apenas ningn color para destacar secciones excepto el
men principal. La cabecera tiene algunas imgenes que no se corresponden con el ancho
de la web dando una sensacin de estar poco trabajada la web.
24
3.2. Fase 2: Definicin de los contenidos
3.2.1. Informacin general sobre la organizacin y la
web
Pregunta Posible respuesta
Qu Qu es Eurostill Pgina con texto explicativo
Qu es esta web y qu ofrece Ttulo claro
Logotipo
Pgina principal que resume que hay
en la web
Quin Quin forma Eurostill Pgina web con texto explicativo
Quin puede comprar en la Explicacin de los perfiles de usuario
tienda
Quin puede aadir Explicacin de los perfiles de usuario
contenidos
Cundo Cundo se cre la empresa Pgina con texto explicativo
Cundo se cre la web Fecha al pi de pgina
Cmo Cmo comunicarse con la Formulario de contacto, telfono,
empresa email
Como hacerse usuario de la Explicacin del registro de usuarios
web
Como recibir informacin Boletn de noticias con las diferentes
ofertas y promociones
Dnde Dnde se ubica la empresa Direccin y mapa de la localizacin
Tabla 1: Informacin sobre la organizacin
3.2.2. Tipos de contenido especficos
Mueble
Se trata del recurso principal, ya que sern los productos que estarn a la venta en la
tienda online.
Pregunta Campo Tipo de campo

Qu Ttulo Texto
Descripcin Texto
Fotos Imagen
Quin ltimos compradores Comentarios
Cundo Fecha de cuando se puso a la Fecha
venta el mueble
Cmo Precio Texto
Medidas del mueble Texto
Opciones de personalizacin Desplegables
(tapicera, color madera)
Dnde - -
Tabla 2: Contenido mueble
25
Noticia
La noticia se trata de una unidad de informacin que se utilizar para informar de
descuentos, nuevos modelos o diseos, as como posibles eventos como ferias de
muebles.
Pregunta Campo Tipo de campo

Qu Ttulo Texto
Contenido Texto
Fotos Imagen
Tema de la noticia Vocabulario de temas
Quin Emisor de la noticia Texto
Cundo Fecha de publicacin Fecha
Fecha de un evento Campo de fecha
Cmo Enlace para ms informacin URL
Email de contacto Email
Dnde Ubicacin de una actividad Informacin en el cuerpo de la noticia
Tabla 3: Contenido noticia
Usuario
Los usuarios registrados tienen ciertas ventajas como poder realizar comentarios en
los productos o tener un historial de las comprar realizadas.
Pregunta Campo Tipo de campo Campo privado o pblico

Qu/Quin Nombre Texto Pblico
Tipo de usuario Texto Privado
Datos bancarios Texto Privado
Cundo Fecha de alta socio Fecha Privado
Cmo Email Email Pblico
Historial de compras Texto Privado
Donde Direccin personal Direccin Privado
Direccin de envo Direccin Privado
Tabla 4: Contenido usuario
26
3.2.3. Implementacin en Drupal de los tipos de
contenido
Texto general
Se trata de un tipo de contenido genrico para poder introducir documentos de texto.
Se utilizar para:
Qu es Eurostill?
Qu es esta web y qu ofrece?
Quin forma Eurostill?
Nombre del campo Tipo de contenido Configuracin
Ttulo Texto
Cuerpo Texto largo con resumen
Fecha de creacin y autor Definido por defecto en Drupal No visible
Tabla 5: Implementacin texto general
Mueble
Cdigo Texto
Ttulo Texto
Fotos Imagen
Precio Texto
Medidas Texto
Tapizado Desplegable
Color Madera Desplegable
Tabla 6: Implementacin mueble
Tapizado
Este tipo de contenido sirve para definir las distintas telas que hay disponibles y que
luego se enlazaran con los muebles como un desplegable para seleccionar el tapizado
deseado.

Cdigo Texto
Ttulo Texto
Fotos Imagen
Tabla 7: Implementacin tapizado
27
Acabados
Al igual que con los tapizados este tipo de contenido sirve para definir colores que hay
para la madera y que luego se enlazaran con los muebles como un desplegable para
seleccionar el color deseado.

Cdigo Texto
Ttulo Texto
Fotos Imagen
Tabla 8: Implementacion acabados
Noticia
Ttulo Texto
Fotos Imagen
Fecha de creacin y autor Definido por defecto en Drupal Visible
Tema Tema de taxonoma
URL URL Opcional
Ubicacin Texto Opcional
Tabla 9: Implementacion noticia
3.3. Fase 3: Arquitectura de la informacin

3.3.1. Card Sorting
El objetivo de esta tcnica es averiguar cmo los usuarios estructuran el contenido de

la pgina web en su mente. Se observa cmo los usuarios organizan las diferentes
categoras para as poder organizar la informacin de nuestra web y realizar la navegacin
y mens conformes a la estructura que tienen los usuarios en su cabeza.
Para ello hemos creado el card sorting con la ayuda de la pgina

https://www.optimalworkshop.com/ que nos permite hacerlo de forma online y annima.
Se ha decidido emplear un tipo de card sorting abierto, en el que los usuarios pueden
agrupar libremente las categoras creando el nmero de grupos que consideren necesario.
Estas son las tarjetas que hemos presentado a los usuarios:
Contacto
Sobre la empresa
Registro de usuario
Carrito de la compra
28
Inicio de sesin de usuario
Perfil de usuario
Productos destacados
Nuevos productos
Descuentos
Facebook
Twitter
Noticias
Sillas
Sillones
Sofs
En la siguiente imagen podemos ver como se muestra al abrir el enlace para realizar el
ejercicio de card sorting, por lo que los usuarios solo tienen que arrastrar las tarjetas y
agruparlas en grupos, dndole un nombre a stos.
Tabla 10: Card Sorting
En el siguiente diagrama podemos ver los resultados obtenidos:
Tabla 11: Diagrama resultados card sorting
29
Valoracin de los resultados

Se han obtenido resultados de 10 personas, entre amigos y familiares. Los resultados
obtenidos nos han ayudado a realizar las agrupaciones de informacin. Como se puede
observar en el diagrama, la categora de los productos ha obtenido un 100% de
coincidencia entre todos los participantes.
En la parte relacionada con la gestin del usuario la mayora de la gente ha incluido

tambin el carrito de la compra, por lo que ha de aparecer junto a los botones de inicio de
sesin y registro. Las redes sociales se ha decidido que van a ir en un bloque aparte ya
que la mayora de la gente las ha agrupado separadas.
Luego en la parte relacionada con la empresa la mayora ha juntado las tarjetas de

contacto y sobre la empresa, y un 50% ha incluido las noticias en el mismo grupo por lo
que se ha decidido incluir el enlace a las noticias junto al de contacto y sobre la empresa.
Por ltimo tenemos las secciones de los productos destacados y descuentos que irn
juntos.
3.3.2. Agrupaciones de informacin
Segn los resultados obtenidos en el card sorting hemos decidido realizar las
siguientes agrupaciones de informacin.
En la cabecera de la pgina lo primero que encontramos es el logotipo de la empresa

en la parte izquierda y en la derecha una barra de bsqueda necesaria en toda tienda
online que se precie. Encima de la cabecera vamos a poner los botones relacionados con
la gestin del usuario y tambin el carrito de la compra que nos informar de los
productos que vayamos agregando al mismo.
Debajo de la cabecera hemos decidido incluir un men que ira dividido en dos partes,
a la izquierda las categoras de productos principales de la tienda, y a la derecha los
enlaces relacionados con la empresa y las noticias.
En el cuerpo de la pgina vamos a incluir un slideshow con banners sobre los

productos destacados y los descuentos. Debajo de este aadiremos un carrusel con los
productos ms vendidos y con las novedades.
Para finalizar, en un pie de pgina hemos agrupado la informacin correspondiente a

la empresa, e informacin de contacto, as como los enlaces a las redes sociales en un
bloque aparte.
30
3.3.3. Herramientas de Navegacin
Men principal
Se trata de un men clsico en horizontal que incluir las distintas categoras del
catlogo ya que en nuestro caso no son demasiadas. Tambin vamos a aadir un enlace
en el que podremos ver todo el catlogo y filtrar por distintos criterios.
Por ltimo, como hemos mencionado anteriormente, pondremos un enlace a la

informacin de la empresa y de contacto as como al blog de noticias.
Barra de bsqueda
Es una barra de bsqueda que situaremos en la parte derecha de la cabecera, funciona
como cualquier otra barra de bsqueda, escribimos lo que queremos buscar y despus de
pulsar intro nos aparecern los resultados de las coincidencias de buscar en los ttulos y
la descripcin de los productos.
Breadcrums
Es una herramienta de navegacin que nos permite saber dentro de qu categora del
catlogo estamos cuando estamos mirando algn producto. Nos resultara til tambin
para volver a una categora superior.
Pie de pgina
Finalmente tendremos el pie de pgina donde se incluirn los enlaces tpicos con
informacin sobre la empresa y de contacto, adems vamos a incluir un bloque con los
enlaces a las distintas redes sociales.
31
3.3.4. Representacin esquemtica (Wireframes)
Una vez ya tenemos claras cules van a ser nuestras agrupaciones de informacin y
cules van a ser las herramientas de navegacin que vamos a utilizar, es el momento de
realizar unos esquemas o bocetos de cmo va a organizarse la web, para ello hemos
utilizado la herramienta online moqups que nos permite hacer unos prototipos bastante
representativos de lo que ser nuestra pgina web.
Pgina principal
Esta ser la estructura

que tendr nuestra
pgina principal.
Como hemos
mencionado en las
agrupaciones podemos
diferenciar cuatro partes:
la cabecera con el logo,
la barra de bsqueda, el
men principal y el
sistema de registro e
inicio de sesin.
Seguido del men

podemos ver un
slideshow con banners.
A continuacin tenemos
unas listas de productos
destacados con sliders.
Y para acabar el pie de

pgina con la
informacin referente a
la empresa y los enlaces
a las redes sociales.
Imagen 13: Boceto pgina principal
32
Listado de productos de una categora
Si entramos desde el
men principal dentro de
algunas de las categoras
de los productos nos
aparecer una cuadrcula
con todos los modelos
que hay en ella.
Cada uno incluye una

foto, el nombre y el
precio. En caso de que
sobrepase cierto lmite de
productos ir paginado
para que la pgina web
no sea demasiado larga.
Imagen 14: Boceto listado de productos
33
Ficha del producto
Una vez hemos entrado en

algn producto podemos
ver que nos aparece el
breadcrumb que nos indica
en la categora del catlogo
en la que estamos.
La estructura de la vista del

producto se divide en dos
columnas: a la izquierda
tenemos una galera con
varias miniaturas que al
hacer clic sobre ellas la
vemos en grande al lado,
en la columna derecha
tenemos la informacin
referente al producto as
como unos selectores para
elegir variaciones del
producto en caso de que las
haya o la cantidad.
Por ltimo tenemos los

comentarios que han hecho
los usuarios sobre el
producto, y un bloque que
nos permite aadir nuevos
usuarios en caso de que
estemos registrados.
Imagen 15: Boceto ficha del producto
34
Catlogo
Al acceder desde el
men principal al
apartado de todos los
productos o catlogo
nos aparecer un listado
de todos los productos
que hay a la venta en la
tienda.
Adems tendremos unos

filtros de precio y de
categora para poder
elegir a nuestro gusto
cuales son los productos
que queremos que se
muestren, as como el
mtodo de ordenacin,
que podr ser por
precio, por novedad o
por orden alfabtico.
Imagen 16: Boceto catlogo
35
3.3.5. Permisos, usuarios y flujos de trabajo
En nuestra pgina tendremos los siguientes roles de usuario:
Administrador: sern los propietarios de la tienda y los encargados de

aadir contenido y de moderar los comentarios de los usuarios.
Usuario: ser el usuario normal que se crear cuando se realice un registro
desde la pgina web. Al estar registrado tienes la posibilidad de tener un historial
de tus compras, as como un perfil con tus direcciones y mtodos de pago adems
de poder aadir comentarios sobre los productos.
36
3.4. Fase 4: Implementacin en Drupal
En la ltima fase hemos realizado la implementacin de la pgina web. Se ha

conseguido en gran parte que la apariencia de la web se corresponda con los bocetos y las
pautas establecidas en la fase de la arquitectura de la informacin. En la siguiente imagen
podemos ver como ha quedado la portada de la misma, y a continuacin pasaremos a
explicar detalladamente cada uno de los componentes utilizados y de las dificultades
encontradas.
Imagen 17: Implementacin pgina principal
37
3.4.1. Diseo
El tema base utilizado para realizar nuestro diseo ha sido Commerce Kickstart Theme
7.x-2.27. Basndonos en este tema hemos modificado las siguientes pginas de estilos css
para ajustar los colores y los tamaos a nuestro gusto y sobre todo a la imagen corporativa
de la empresa que utiliza los colores verdes.
commerce_kickstart_style.css
commerce-kickstart-theme-alpha-default.css
global.css
Se le ha querido dar nfasis a la empresa y a su forma de trabajar artesanal pero sin

dejar atrs sus productos, remarcando el diseo y el estilo de los mismos. Por eso se ha
optado por un diseo minimalista, limpio de lneas sencillas pero elegantes, mezclando
distintos verdes con el blanco y utilizando el azul para resaltar cosas destacadas como
puede ser el carrito de la compra.
Para el logotipo y los banners del slideshow se ha utilizado la fuente Arista 2.0 que le
da ese toque elegante pero con estilo que buscamos.
Imagen 18: Logotipo empresa
Versin mvil
Drupal y el tema utilizado son adaptables automticamente para verse correctamente
en distintas resoluciones y en distintos dispositivos por lo que no ha hecho falta realizar
ningn ajuste adicional para conseguir el resultado deseado. A continuacin podemos ver
como se ve la pgina web si accedemos desde un dispositivo mvil.
Imagen 19: Capturas versin mvil
38
3.4.2. Tipos de contenidos
Son las estructuras que definen los distintos tipos de contenidos que tiene la pgina:
un producto, una noticia, un anuncio, etc. Cada tipo tiene sus propios campos usados para
almacenar informacin adicional o categorizar el contenido. As mismo se puede
configurar la presentacin de cada tipo de contenido que tendr en diferentes apartados
de la web, por ejemplo un producto se ver distinto en la lista de una categora que en el
carrito de la compra.
Crear nuevo contenido para la empresa es muy simple, ya que desde el panel de
administracin solo hay que ir al apartado de Productos Aadir un producto en caso
de querer aadir un producto.
Imagen 20: Men aadir un producto
O Contenido Agregar contenido, en caso de querer agregar cualquier otro tipo de

contenido como artculos del blog o anuncios.
Imagen 21: Men agregar contenido
39
Una vez seleccionado el tipo de contenido que se desea agregar, es tan simple como
rellenar un formulario con los campos requeridos para cada tipo, como se muestra en la
siguiente imagen de ejemplo para la creacin de un producto.
Imagen 22: Formulario aadir producto
40
Product display
Se trata del contenido principal de nuestra pgina, consiste en los productos que se va
a mostrar en la tienda, no ha sido necesario crear otros tipos ya que los productos que
fabrica la empresa todos tienen los mismos atributos y no necesitan campos adicionales,
por lo que usando taxonomas hemos podido clasificarlos en categoras.
Imagen 23: Campos estructura Product display
Product
Se utiliza para crear variaciones en un producto, se tratan de un mismo producto pero
con cambios de color, fotos u otros atributos y potencialmente un precio distinto, aunque
en nuestro caso las variaciones podran resultar tiles, al contar con solo una foto por
cada producto y una cantidad de combinaciones de acabado de la madera y tapizado
demasiado grande hemos decidido crear un tipo de producto personalizable por el
usuario. Por lo que en el fondo tenemos productos nicos que el usuario puede
personalizar eligiendo el acabado y el tapizado deseado.
Imagen 24: Campos estructura Product
Cmo se puede ver en las imgenes, en los campos de Product display hace referencia
a Product ya que un Product display puede tener muchos Product distintos crendose las
variaciones de un mismo producto como hemos explicado anteriormente. Ah es donde
se categorizan los productos pudiendo elegir una categora y una coleccin, Mientras que
en los campos de Product es donde se encuentran los atributos del producto, como las
fotos, el precio, etc.
41
En la siguiente imagen podemos ver como es la visualizacin predeterminada para un

producto. La configuracin de presentacin de un producto vara dependiendo del lugar
en el que se muestre, no es lo mismo mostrar el producto en el listado de una categora
que en el carrito de la compra.
Imagen 25: Implementacion ficha producto
Como se observa dentro del producto podemos ver una galera de imgenes, as como el
ttulo, el precio, una descripcin y unos selectores para personalizar el mismo eligiendo
el tapizado y el acabado.
Basic page
Son las pginas bsicas que se utilizan para secciones como la que contiene
informacin sobre la empresa o los trminos de uso, es muy simple y solo incluye un
campo para el ttulo y otro para el cuerpo que consiste en un campo de texto que permite
el uso de etiquetas html.
Imagen 26: Campos estructura Basic page
42
En la siguiente imagen tenemos como ejemplo cmo ha quedado la pgina con
informacin sobre la empresa, en la que se ha utilizado etiquetas html para introducir los
ttulos y las imgenes.
Imagen 27: Implementacin pgina sobre la empresa
Artculo de blog
Estructura que define el contenido para las noticias del blog. Es un poco ms compleja
que la Basic page ya que incluye imgenes y dos campos de referencia a trminos que
permiten categorizar las noticias.
43
Imagen 28: Campos estructura artculo de blog
Podemos ver en la siguiente imagen una entrada del blog de ejemplo y cmo es su
visualizacin en la pgina web.
Imagen 29: Implementacin artculo de blog
44
Presentacin de diapositivas
Es el tipo de contenido que aparece en la presentacin de diapositivas o slideshow que
hay en la pgina principal. Bsicamente consta de una imagen y un enlace, as como de
unos textos que aparecen en la parte inferior del bloque de slideshow.
Imagen 30: Campos estructura Presencatin de diapositivas
El bloque que muestra el tipo de contenido se visualiza en la pgina web debajo del
men principal de la siguiente manera.
Imagen 31: Implementacin slideshow
45
Ad Push
Son los bloques de anuncios que aparecen en la parte inferior de la presentacin de
diapositivas. Constan de una imagen, un enlace y un texto que aparece sobre la imagen
del anuncio.
Imagen 32: Campos estructura Ad push
Los bloques que contienen los Ad Push se visualizan como se puede ver en la siguiente
imagen, estos se encuentra debajo del slideshow.
Imagen 33: Implementacin bloques Ad push
46
3.4.3. Taxonomas
Las taxonomas consisten en vocabularios de trminos, utilizados principalmente para

categorizar. Estos trminos a su vez pueden tener distintos campos para almacenar
informacin, como pueden ser imgenes, texto, valores numricos, etc.
Product category
Se trata del vocabulario que contiene los trminos de las diferentes categoras de
productos que va a tener nuestra tienda online, en nuestro caso contiene solo los siguientes
trminos:
Banquetas
Sillas
Sillones
Sofs
Contiene los siguientes campos de informacin:
Imagen 34: Campos taxonoma Product category
Y como resulta evidente sirve para categorizar los productos.
Coleccin
Es un vocabulario que hemos aadido para permitir la creacin de colecciones de
productos como una segunda categora de agrupacin dentro de las categoras.
Actualmente solo cuenta con el trmino Despacho que agrupa varios sillones de
despacho giratorios, pero se trata de un vocabulario que puede resultar til a la empresa
en un futuro si necesita crear colecciones de productos que no sean necesariamente
agrupadas por las categoras de los productos.
47
Imagen 35: Campos taxonoma Coleccin
Tapizados
En esta taxonoma se definen las distintas telas que luego se va a utilizar como
referencia en los tipos de lnea de producto para que el usuario pueda personalizar a su
gusto el mismo. Incluye un campo de imagen para que se pueda subir una foto de la tela
y luego se pueda ver a modo de catlogo de telas creando una vista para la taxonoma, y
tambin un campo de precio ya que determinadas telas incrementan el precio del
producto.
Los nombres de los trminos de esta taxonoma son las referencias de las telas, se ha
decidido incluir el incremento de precio que supone seleccionar cierta tela en el ttulo
para que el usuario cuando seleccione en la lista desplegable la tela sepa lo que se va a
incrementar el precio del producto.
Imagen 36: Campos taxonoma Tapizado
Acabados
Se trata de una taxonoma completamente anloga a la de tapizado pero sus trminos
se tratan de los distintos acabados que puede tener la madera. Con la diferencia de que no
hay un campo para el precio ya que los distintos acabado valen todos lo mismo para el
producto final y no suponen ningn incremento para el mismo.
Imagen 37: Campos taxonoma Acabados
48
Blog category
Vocabulario con las distintas categoras de noticias que puede tener el blog, se usa para
categorizar las noticias e incluye los campos bsicos para los trminos del mismo.
Cuenta con los siguientes trminos:
Empresa
Eventos
Noticias
Productos
Las categoras para el blog se generan dinmicamente ya que al crear una nueva
entrada el campo de categora es del tipo autocompletado por lo que permite crear nuevos
trminos en caso de que no exista.
Imagen 38: Campos taxonoma Blog category
3.4.4. Mdulos
Los mdulos permiten extender y personalizar la funcionalidad de Drupal. Las

instalaciones de Drupal llevan incluidos una gran cantidad de mdulos y muchos de ellos
en funcionamiento por lo que en esta seccin nos vamos a centrar solo en aquellos que
hemos usado para el propsito de la tienda online y los que hemos necesitado instalar
para aadir funcionalidades requeridas para nuestro caso.
Drupal Commerce
Se trata del mdulo en el que se basa todo nuestro proyecto de creacin de una tienda
online. Incluye todas las caractersticas necesarias para montar una tienda como son:
Creacin de tipos de productos con atributos personalizados.

Vistas dinmicas de productos.
Gestor de pedidos.
49
API para mtodos de pago.

Clculo de tasas.
Reglas para descuentos.
Y ms funcionalidad adicional que proporcionan otros mdulos como son PayPal,

Commerce Shipping, Commerce Stock, etc.
Por lo que se puede decir que este compendio de mdulos son la base con la que hemos
empezado a trabajar y en la que se basa la tienda online.
Commerce Customizable Products

Para conseguir un nico producto por modelo que sea personalizable por el usuario,
eligiendo los parmetros del mismo como el tapizado y el acabado, hemos tenido que
utilizar el mdulo Commerce Customizable Products, para ello nos hemos ayudado del
siguiente tutorial:
https://drupalcommerce.org/videos/tutorials/customizable-products-pizza-store
Una vez activado el mdulo el primero paso que se ha realizado ha sido aadir unos
campos en la seccin de administracin dentro de opciones de la tienda llamada line items
types o tipos de lneas de pedido. Estas lneas representan cualquier cosa de un pedido
que afecte al total del mismo, y definen como estos tems interactan con el formulario
de aadir al carrito, por lo que para conseguir el resultado deseado hemos aadido dos
campos de referencia a trminos de taxonoma, previamente creados y explicados en el
apartado anterior, para seleccionar el tapizado y el acabado como se puede ver en la parte
inferior de la imagen.
Imagen 39: Line item types product
50
Una vez hecho esto hemos creado una regla para que el precio se incremente cuando
se seleccione alguno de los tapizados que llevan un incremento de precio. Para ello desde
el men de administracin hemos ido a Opciones de tienda Reglas de precios, y hemos
creado una nueva regla con los siguiente parmetros.
Imagen 40: Regla de precios Precio Tapizados
La regla funciona de la siguiente manera: Cuando un producto que se aade al carrito

tiene seleccionado algn trmino de la taxonoma de tapizados, se le suma la cantidad que
indica el campo de precio del trmino de la taxonoma al precio unitario del producto. En
la siguiente imagen podemos comprobar como el precio del tapizado ha sumado 15 euros
al precio del producto y como queda reflejado en la cesta de la compra.
Imagen 41: Implementacin cesta de la compra
51
Contact
Este mdulo nos ha servido para crear un formulario de contacto que aparece cuando
entramos en la seccin de men Contacto.
Como el mdulo solo incluye un formulario, hemos tenido que aadir un bloque para
incluir informacin complementaria as como un mapa de la localizacin de la empresa y
que luego aparezca este bloque en la propia pgina de contacto. Ms adelante se explicar
con ms detalle cmo se ha creado y configurado el bloque.
En la siguiente imagen podemos ver cmo ha quedado la pgina de contacto.
Imagen 42: Implementacin pgina contacto
52
Commerce Free Shipping
Con este mdulo se ha conseguido aadir una oferta que consiste en ofrecer los gastos
de envo gratis al superar cierta cantidad de dinero gastado en la tienda.
Una vez instalado nos aparece una nueva seccin en el men de administracin dentro
de las opciones de la tienda. Previamente hay que tener configuradas correctamente las
distintas opciones de envo de que disponemos, en nuestro caso disponemos de un envo
ordinario y otro express.
La idea es ofrecer el envo ordinario de forma gratuita cuando los usuarios aadan
productos por el valor de ms de 1000 euros en el carrito, para ello entramos en la
configuracin del mdulo y lo configuramos de la siguiente manera:
Imagen 43: Configuracin Commerce Free Shipping
53
Si simulamos una situacin de compra, podemos comprobar cuando llegamos al paso

de seleccionar el mtodo de envo que nos avisa del dinero que falta para conseguir la
oferta en caso de tener productos por menos de 1000 euros en el carro de la compra.
Imagen 44: Simulacin compra
O en el caso contrario de tener productos por ms de 1000 euros te sale un aviso y se

puede observar como el envo ordinario aparece como gratuito.
Imagen 45: Simulacin compra con envio gratis
Backup and Migrate

Mdulo imprescindible para el desarrollo de una pgina web que permite crear copias
de seguridad durante el desarrollo de la misma y restaurarlas en caso de necesidad.
54
3.4.5. Mens
Los mens en Drupal consisten en una serie de enlaces que se pueden configurar de
forma muy sencilla mediante el panel de administracin. Cada men se integra en un
bloque correspondiente para luego facilitar la colocacin de los mismos en el lugar
deseado de la pgina principal.
A continuacin describiremos los mens que se han creado en nuestra pgina.
Men de usuario
Se encuentra situado en la parte superior de la pgina y es flotante por lo que aunque
hagamos scroll hacia abajo siempre estar a la vista. Solo cuenta con dos enlaces: uno
para iniciar sesin y otro para crear una cuenta.
Imagen 46: Men de usuario sin iniciar sesin
Y en el caso de estar identificado aparecen como mi cuenta y cerrar sesin

respectivamente.
Imagen 47: Men de usuario con sesin iniciada
Men principal
Men que se encuentra debajo del logotipo de la pgina web y alineado a la izquierda,
cuenta con las categoras de productos que ofrece la tienda, as como los catlogos de
acabado y telas que hay para personalizar el producto.
Imagen 48: Men principal
Men secundario
Est situado a la altura del men principal pero alineado a la izquierda, contiene los
enlaces relacionados con la empresa, contacto y blog.
Imagen 49: Men secundario
55
Pie de pgina
Men de enlaces con todo lo relacionado con la empresa, las polticas sobre servicios,
seguridad, envos y devoluciones, etc. Se encuentra al final de la pgina.
Imagen 50: Men pie de pgina
Redes sociales
Este men est situado en la zona del pie de pgina, alineado a la derecha, cuenta con
los enlaces a las redes sociales, en nuestro caso Facebook y Twitter.
Imagen 51: Men redes sociales
56
3.4.6. Vistas
Las vistas o views permiten en Drupal crear pginas con los elementos deseados
usando filtros, organizados de una forma determinada y paginados. Seguidamente vamos
a explicar las vistas que han sido modificadas o creadas y que no vienen por defecto ya
creadas en Drupal Commerce.
Collection products
Se trata de la pgina que nos muestra los productos de una determinada categora. En
su configuracin podemos ver como se filtran los productos por categora y luego se ha
realizado una relacin con las colecciones para que se muestren aparte los productos de
dicha coleccin.
Imagen 52: Configuracin vista Collection products
A continuacin se puede ver cmo queda la vista en nuestra pgina web, en este caso
se trata de la categora de sillones que adems tiene un par de productos dentro de la
coleccin Despacho.
57
Imagen 53: Implementacin listado de productos de una categora
58
Tapizados
Esta vista ha sido creada para mostrar a modo de catlogo todos los trminos
disponibles en la taxonoma de tapizados, con su pre visualizacin de las fotos de las
mismas. De forma anloga hay otra vista creada para la taxonoma de los acabados.
Imagen 54: Configuracin vista Tapizados
El resultado de esta vista en nuestra pgina web es el siguiente.
59
Imagen 55: Implementacin listado de tapizados
60
3.4.7. Bloques
Y para terminar con la implementacin vamos a ver los bloques. Estos son elementos
que pueden contener mens o algn tipo de contenido previamente definido y se pueden
colocar de forma sencilla en cualquier regin que proporcione el tema instalado en
Drupal, en nuestro caso el tema nos proporciona las siguientes regiones.
Imagen 56: Regiones del tema
Como la mayora de los bloques ya hemos visto previamente cul es su contenido,

vamos a centrarnos en explicar cmo se ha creado y configurado el bloque que contiene
la informacin de contacto que se ha aadido al formulario.
Informacin de contacto
Este bloque lo hemos creado con el propsito de aadir informacin al ya existente
formulario de contacto que nos proporcionaba el mdulo. Para ello desde el panel de
administracin de Drupal hemos ido a Configuracin del sitio Bloques Aadir
bloque y lo hemos configurado de la siguiente manera.
61
Imagen 57: Configuracin bloque Informacin de contacto
Se puede ver que el mapa se ha conseguido cogiendo el cdigo html que genera Google
Maps para incrustarlo en una pgina. Tambin es importante destacar que para que solo
aparezca en la pgina de contacto en la parte inferior de la configuracin hay que
seleccionar que solo aparezca en las pginas enumeradas y escribir debajo contact.
62
4. Conclusiones
El principal motivo para la realizacin de este proyecto ha sido profundizar en el
aprendizaje del desarrollo y diseo de pginas web, consiguiendo experiencia con el
gestor de contenidos Drupal.
Para la elaboracin ha sido necesario llevar a cabo una investigacin previa

relacionada con los gestores de contenidos y las ventajas que aportan a las necesidades
de un caso como el nuestro. Una vez decidida la tecnologa a usar en la implementacin
ha sido necesario realizar un anlisis exhaustivo de la empresa, as como de sus
necesidades, para luego establecer los contenidos que va a tener la pgina web y mediante
un estudio de la arquitectura de la informacin distribuir los mismos de la mejor forma
posible para que el sitio web sea ms usable y comprensible para sus usuarios.
Esta metodologa de trabajo estructurada en fases y creando una pgina web desde la
definicin y la organizacin de los contenidos antes de iniciar la implementacin de la
misma es el pilar centrar de nuestro proyecto y nos ha ayudado a comprobar lo importante
que es seguir este mtodo para que la creacin de un sitio web sea un xito y cumpla los
requisitos de una empresa y de sus clientes. Otra conclusin a la que hemos llegado es la
necesidad de realizar iteraciones en las distintas fases hasta que se consigue el resultado
deseado.
Tambin podemos destacar el aprendizaje de las tecnologas utilizadas como son PHP,
CSS y MySQL, ya que a lo largo del proyecto ha sido necesario investigar y trabajar con
ellas, lo que me ha permitido ampliar y obtener nuevos conocimientos sobre ellas.
En conclusin el proyecto me ha resultado interesante y provechoso. Me ha llevado

mucho tiempo, pruebas y errores el conseguir ciertas cosas, algunas de ellas ha sido
posible llevarlas a cabo y otras no. Han aparecido muchas dificultades durante el
desarrollo del proyecto que han supuesto un desafo a la hora de resolverlas
satisfactoriamente gracias a lo cual he profundizado y aprendido muchas cosas nuevas
sobre el funcionamiento de Drupal. Por lo tanto podemos concluir que los objetivos del
proyecto se han cumplido de manera satisfactoria.
63
5. Referencias bibliogrficas
Alquimia. 10 razones para usar Drupal. Alquimia. [En lnea] [Citado el: 20 de Julio de
2015.] http://al.quimia.net/10-razones-para-usar-drupal.
Cambra, Pedro. 2011. Mdulo Views 3 para Drupal 7: Filtros, criterios de

ordenacin y bloques. Cambrico. [En lnea] 17 de Octubre de 2011. [Citado el: 12 de
Agosto de 2015.] http://cambrico.net/drupal/modulo-views-3-para-drupal-7-filtros-
criterios-de-ordenacion-y-bloques.
Drupal. Drupal. [En lnea] [Citado el: 10 de Julio de 2015.] https://www.drupal.org/.
Drupal Commerce. Documentation. Drupal Commerce. [En lnea] [Citado el: 15 de

Agosto de 2015.] https://drupalcommerce.org/user-guide.
Miller, Josh. 2012. Customizable Product with Drupal Commerce: Pizza Store .
Youtube. [En lnea] 3 de Octubre de 2012. [Citado el: 16 de Agosto de 2015.]
https://www.youtube.com/watch?v=j9KsyvQZaAY.
. 2012. Customizable Products: Pizza Store. Drupal Commerce. [En lnea] 10 de

Octubre de 2012. [Citado el: 14 de Agosto de 2015.]
https://drupalcommerce.org/videos/tutorials/customizable-products-pizza-store.
Trazada. Ventajas de utilizar un CMS. Trazada. [En lnea] [Citado el: 28 de Julio de
2015.] http://trazada.com/ventajas-de-utilizar-un-cms/.
Wikipedia. 2015. Drupal. Wikipedia. [En lnea] 18 de junio de 2015. [Citado el: 5 de
agosto de 2015.] https://es.wikipedia.org/wiki/Drupal.
. 2015. Sistema de gestin de contenidos. Wikipedia. [En lnea] 18 de Junio de 2015.

[Citado el: 6 de Agosto de 2015.]
https://es.wikipedia.org/wiki/Sistema_de_gesti%C3%B3n_de_contenidos.
64
6. Siglas y abreviaturas
API: Application Programming Interface (Interfaz de programacin de aplicaciones).
BBS: Bulletin Board System (Sistema de tabln de anuncios).
BD: Base de Datos.
CMS: Content Management System (Sistema de gestin de contenidos).
CSS: Cascading Style Sheets (Hoja de estilo en cascada).
CVS: Concurrent Versions System (Sistema de control de versiones).
FTP: File Transfer Protocol (Protocolo de transferencia de archivos).
GNU: GNU is Not Unix (GNU No es Unix, proyecto iniciado por Richard Stallman con
el objetivo de crear un sistema operativo completamente libre).
GPL: General Public License (Licencia pblica general).
HTML: HyperText Markup Language (lenguaje de marcas de hipertexto).
PHP: PHP: Hypertext Preprocessor (Lenguaje de programacin de uso general de cdigo

del lado del servidor originalmente diseado para el desarrollo web de contenido
dinmico).
SQL: Structured Query Language (Lenguaje de consulta estructurado).
65
7. ndice de imgenes y tablas

7.1. Imgenes
Imagen 1: Creacin base de datos ................................................................................... 11

Imagen 2: Instalacin Drupal.......................................................................................... 12
Imagen 3: Instalacin Drupal paso 2 .............................................................................. 12
Imagen 4: Instalacin Drupal paso 3 .............................................................................. 13
Imagen 5: Pgina principal Silla Stil ............................................................................... 17
Imagen 6: Seccin catlogo Silla Stil ............................................................................... 18
Imagen 7: Pgina principal Infinity Furniture ................................................................ 19
Imagen 8: Seccin sillas Infinity Furniture.................................................................... 20
Imagen 9: Descripcin silla Infinity Furniture ............................................................... 21
Imagen 10: Pgina principal Valencia Rattan ................................................................ 22
Imagen 11: Pgina principal Espai Mobles ..................................................................... 23
Imagen 12: Descripcin producto Espai Mobles ............................................................ 24
Imagen 13: Boceto pgina principal ............................................................................... 32
Imagen 14: Boceto listado de productos ........................................................................ 33
Imagen 15: Boceto ficha del producto ............................................................................ 34
Imagen 16: Boceto catlogo ............................................................................................ 35
Imagen 17: Implementacin pgina principal.................................................................37
Imagen 18: Logotipo empresa ........................................................................................ 38
Imagen 19: Capturas versin mvil ................................................................................ 38
Imagen 20: Men aadir un producto ........................................................................... 39
Imagen 21: Men agregar contenido .............................................................................. 39
Imagen 22: Formulario aadir producto ....................................................................... 40
Imagen 23: Campos estructura Product display ............................................................. 41
Imagen 24: Campos estructura Product ......................................................................... 41
Imagen 25: Implementacion ficha producto .................................................................. 42
Imagen 26: Campos estructura Basic page .................................................................... 42
Imagen 27: Implementacin pgina sobre la empresa .................................................. 43
Imagen 28: Campos estructura artculo de blog ............................................................ 44
Imagen 29: Implementacin artculo de blog ................................................................ 44
Imagen 30: Campos estructura Presencatin de diapositivas ....................................... 45
Imagen 31: Implementacin slideshow .......................................................................... 45
Imagen 32: Campos estructura Ad push ........................................................................ 46
Imagen 33: Implementacin bloques Ad push .............................................................. 46
Imagen 34: Campos taxonoma Product category ..........................................................47
Imagen 35: Campos taxonoma Coleccin ..................................................................... 48
Imagen 36: Campos taxonoma Tapizado ...................................................................... 48
Imagen 37: Campos taxonoma Acabados ..................................................................... 48
Imagen 38: Campos taxonoma Blog category ............................................................... 49
Imagen 39: Line item types product .............................................................................. 50
Imagen 40: Regla de precios Precio Tapizados ............................................................... 51
Imagen 41: Implementacin cesta de la compra ............................................................. 51
Imagen 42: Implementacin pgina contacto................................................................ 52
66
Imagen 43: Configuracin Commerce Free Shipping .................................................... 53
Imagen 44: Simulacin compra ..................................................................................... 54
Imagen 45: Simulacin compra con envio gratis ........................................................... 54
Imagen 46: Men de usuario sin iniciar sesin ..............................................................55
Imagen 47: Men de usuario con sesin iniciada ...........................................................55
Imagen 48: Men principal .............................................................................................55
Imagen 49: Men secundario ..........................................................................................55
Imagen 50: Men pie de pgina ..................................................................................... 56
Imagen 51: Men redes sociales ..................................................................................... 56
Imagen 52: Configuracin vista Collection products ...................................................... 57
Imagen 53: Implementacin listado de productos de una categora ............................. 58
Imagen 54: Configuracin vista Tapizados .................................................................... 59
Imagen 55: Implementacin listado de tapizados ......................................................... 60
Imagen 56: Regiones del tema ........................................................................................ 61
Imagen 57: Configuracin bloque Informacin de contacto .......................................... 62
7.2. Tablas
Tabla 1: Informacin sobre la organizacin ................................................................... 25

Tabla 2: Contenido mueble ............................................................................................ 25
Tabla 3: Contenido noticia ............................................................................................. 26
Tabla 4: Contenido usuario ............................................................................................ 26
Tabla 5: Implementacin texto general...........................................................................27
Tabla 6: Implementacin mueble ...................................................................................27
Tabla 7: Implementacin tapizado ..................................................................................27
Tabla 8: Implementacion acabados ............................................................................... 28
Tabla 9: Implementacion noticia ................................................................................... 28
Tabla 10: Card Sorting .................................................................................................... 29
Tabla 11: Diagrama resultados card sorting ................................................................... 29
67

CLIMENT - Diseño e Implementación de Una Tienda Online Con El CMS Drupal PDF

Cargado por

Copyright:

Formatos disponibles

CLIMENT - Diseño e Implementación de Una Tienda Online Con El CMS Drupal PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

CLIMENT - Diseño e Implementación de Una Tienda Online Con El CMS Drupal PDF

Cargado por

Copyright:

Formatos disponibles

Escola Tcnica Superior dEnginyeria Informtica

Universitat Politcnica de Valncia

Diseo e implementacin de una tienda

Trabajo Fin de Grado

Grado en Ingeniera Informtica

Autor: Jordi Climent Andrs

Tutor: David Pic Vila

Primero se ha realizado un estudio sobre los sistemas de gestin de contenido (CMS)

Para el diseo y la implementacin del proyecto se ha utilizado un mtodo dividido en

Con esta metodologa de trabajo basada en la arquitectura de la informacin

2.2. Ventajas de utilizar un CMS

Los CMS tienen funcionalidades concretas que est comprobado que

elimina en gran parte el esfuerzo necesario para construir el esqueleto de

Es un programa libre, con licencia GNU/GPL, escrito en PHP, combinable con

El diseo de Drupal es especialmente idneo para construir y gestionar comunidades

Drupal se usa, entre otros, en intranets de compaas, enseanza en lnea, comunidades

2.4. Por qu Drupal?

Todo es posible con Drupal

Tiene un software y una comunidad consolidada

El sistema base de gestin de contenido es limpio, flexible y potente.

Sistema de control en los roles y permisos

Preparado para dispositivos mviles

Se integra con las redes sociales

2.5. Instalacin de Drupal

Soporta varios lenguajes, entre ellos php.

Imagen 1: Creacin base de datos

A continuacin nos hemos descargado Drupal de su pgina web. Como necesitamos

La descarga del mismo se puede encontrar en el siguiente enlace:

Imagen 2: Instalacin Drupal

Imagen 3: Instalacin Drupal paso 2

Imagen 4: Instalacin Drupal paso 3

3.1. Fase 1: Planteamiento inicial del proyecto

3.1.1. Descripcin de la organizacin

Nombre, actividad e historia

Quin compone la organizacin

El poder de decisin corresponde a los 5 propietarios mediante consenso. Tambin

Formas de comunicacin actuales y estrategias

Por qu una nueva web?

Permitir aadir nuevos productos de forma sencilla.

Cmo puede ayudar una nueva web a resolver problemas existentes

Muebles de diseo artesanales

Sistema de pago seguro automatizado

Capacidad de generar contenidos

Silla Stil - http://www.sillastil.com/

Imagen 5: Pgina principal Silla Stil

En el cuerpo de la pgina hay un texto donde explica un poco cual es la actividad de

Imagen 6: Seccin catlogo Silla Stil

Este es un ejemplo de lo que no queremos hacer, posiblemente haya muebles

Imagen 7: Pgina principal Infinity Furniture

En la seccin de Empresa podemos ver como destaca la artesana de sus productos

Imagen 8: Seccin sillas Infinity Furniture

Valencia Rattan - http://www.valenciarattan.net/

Imagen 10: Pgina principal Valencia Rattan

Espai Mobles - http://www.espaimobles.com/es/

Imagen 11: Pgina principal Espai Mobles

Imagen 12: Descripcin producto Espai Mobles

3.2.2. Tipos de contenido especficos

Pregunta Campo Tipo de campo

Pregunta Campo Tipo de campo