diseño, evaluación e implementación de un sitio web a...

123
Escuela Técnica Superior de Ingeniería Diseño, evaluación e implementación de un sitio web a través de un gestor de contenidos Proyecto Fin de Carrera Escuela Técnica Superior de Ingeniería Departamento Ingeniería de Sistemas y Automática Sevilla, Septiembre 2013 Autor: Luis Manuel Alfonso Castro Tutor: José Ángel Acosta Rodríguez

Upload: others

Post on 18-Mar-2020

4 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Escuela Técnica Superior de Ingeniería

Diseño, evaluación e implementación de un sitio web a travésde un gestor de contenidos

Proyecto Fin de Carrera

Escuela Técnica Superior de Ingeniería

Departamento Ingeniería de Sistemas y Automática

Sevilla, Septiembre 2013

Autor: Luis Manuel Alfonso CastroTutor: José Ángel Acosta Rodríguez

Page 2: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar
Page 3: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

RESUMEN

El presente proyecto surge ante la necesidad de desarrollar un portal web de propósitogeneral con comercio electrónico capaz de implementar cualquier modelo de negocio que se desee.Para ello, se evaluará durante la implementación del proyecto el nivel de usuario necesario paradesarrollar cada punto del mismo.

Se implementará a través de un gestor de contenidos dando a conocer este tipo deplataformas y su estructura interna. Posteriormente, como modelo de ejemplo, se desarrollará unportal web real de venta de billetes de autobús para traslados a y desde el aeropuerto de Londres queservirá para evaluar el gestor de contenidos y la dificultad a nivel de usuario en cada paso durantesu implementación.

1

Page 4: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

AGRADECIMIENTOS

Ha sido un placer realizar este proyecto. Un proyecto de estas dimensiones requiere muchotrabajo y esfuerzo pero tiene la gran ventaja de poder observar cada día los avances realizados en él.Aparte de implementar y resolver el problema planteado, me he tenido que ajustar a unas normas,saber qué es lo que se quería implementar exactamente y cómo debía hacerlo, siempre atendiendo alas líneas que marcaba mi tutor.

Un proyecto de estas dimensiones supone tener que documentarse, analizar el problemaplanteado, buscar soluciones al problema, desarrollar la solución y, por último pero no menosimportante, documentar todo el trabajo realizado. Lo que conlleva dedicarle bastante tiempo almismo.

Todo esto no hubiera sido posible sin muchas de las personas de mi alrededor, por ello, doylas gracias a:

– Mi tutor, José Ángel Acosta Rodríguez, al cual le agradezco las horas dedicadas.

– Mis padres, José Luis y Mercedes, por darme la oportunidad de estudiar, sin su apoyo nohubiera sido posible.

– Mis hermanas, Mercedes y María, por su apoyo y ánimo incondicional.

– Mi novia, Amelia, por estar ahí en cada momento.

– Mis amigos, por ser de toda la vida.

2

Page 5: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

TABLA DE CONTENIDOS

RESUMEN........................................................................................................................................... 1AGRADECIMIENTOS........................................................................................................................2TABLA DE CONTENIDOS................................................................................................................ 3TABLA DE FIGURAS.........................................................................................................................5CAPÍTULO 1: INTRODUCCIÓN.......................................................................................................9

1.1 OBJETIVOS............................................................................................................................ 91.2 METODOLOGÍAS................................................................................................................10

1.2.1 Metodología De Desarrollo............................................................................................101.2.2 Definición Del Modelo De Desarrollo...........................................................................101.2.3 Metodología Utilizada....................................................................................................11

1.3 TECNOLOGÍAS................................................................................................................... 121.3.1 Soluciones De Código Abierto.......................................................................................121.3.2 Sistema Operativo - Fedora............................................................................................131.3.3 Servidor Web - Apache.................................................................................................. 141.3.4 Lenguaje De Programación - PHP................................................................................. 151.3.5 Servidor De Base De Datos - MySQL........................................................................... 151.3.6 Soluciones Integradas - XAMPP................................................................................... 161.3.7 Sistemas De Gestión De Contenido............................................................................... 161.3.8 Funcionalidad De Un CMS............................................................................................171.3.9 Clasificación De Sistemas De Gestión De Contenidos..................................................181.3.10 ¿Por Qué Un CMS?......................................................................................................191.3.11 Elección Del CMS........................................................................................................201.3.12 ¿Por Qué Drupal?.........................................................................................................211.3.13 Drupal...........................................................................................................................22

CAPÍTULO 2: DESCRIPCIÓN TÉCNICA.......................................................................................232.1 Conceptos Básicos Para Entender Drupal.........................................................................232.2 Arquitectura De Drupal..................................................................................................... 272.3 Pila Tecnológica De Drupal.............................................................................................. 28

CAPÍTULO 3: DESARROLLO DEL MODELO DE EJEMPLO..................................................... 293.1 INTRODUCCIÓN................................................................................................................. 293.2 DEFINICIÓN DEL MENÚ ADMINISTRADOR.................................................................303.3 DEFINICIÓN DEL PANEL DE CONTROL........................................................................ 313.4 DEFINICIÓN DE LA PLANTILLA..................................................................................... 323.5 DEFINICIÓN DE USUARIOS Y ROLES............................................................................ 353.6 MÓDULOS NECESARIOS.................................................................................................. 363.7 DEFINICIÓN DE TIPOS DE CONTENIDO........................................................................40

3.7.1 Añadiendo El Contenido................................................................................................ 493.7.2 Añadiendo Nuevos Bloques........................................................................................... 563.7.3 Añadiendo Menú De Navegación.................................................................................. 633.7.4 Añadiendo La Página De Contacto................................................................................ 653.7.5 Añadiendo La Página Principal......................................................................................713.7.6 Añadiendo Productos..................................................................................................... 74

CAPÍTULO 4: SISTEMA MULTIPLATAFORMA - EXPORTACIÓN............................................ 85

3

Page 6: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

CAPÍTULO 5: CONCLUSIONES.....................................................................................................875.1 LOGROS ALCANZADOS...............................................................................................875.2 CONOCIMIENTOS ADQUIRIDOS................................................................................ 875.3 TIEMPO DEDICADO...................................................................................................... 885.4 LÍNEAS FUTURAS DE TRABAJO................................................................................ 88

ANEXOS............................................................................................................................................91A. INSTALACIÓN DE SISTEMA OPERATIVO, FEDORA.....................................................91B. INSTaLACIÓN DEL SOFTWARE DE DESARROLLO, ECLIPSE..................................... 96C. INSTALACIÓN Y CONFIGURACIÓN DEL SERVIDOR, XAMPP....................................98D. INSTALACIÓN DEL GESTOR DE CONTENIDOS, DRUPAL........................................103E. ACTUALIZACIÓN DEL NÚCLEO DE DRUPAL..............................................................113F. DESARROLLO DE UN TEMA EN DRUPAL..................................................................... 115G. PROBLEMAS DURANTE LA IMPLEMENTACIÓN........................................................118

BIBLIOGRAFÍA..............................................................................................................................121

4

Page 7: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

TABLA DE FIGURAS

Figura 1: Desarrollo en espiral........................................................................................................... 11Figura 2: Arquitectura de sistemas Unix............................................................................................ 13Figura 3: Cuota de mercado de los servidores web............................................................................ 14Figura 4: Cuota de mercado de lenguajes de programación web....................................................... 15Figura 5: Comparativa Drupal, Joomla y Wordpress......................................................................... 20Figura 6: Arquitectura de Drupal........................................................................................................27Figura 7: Pilar tecnológica de Drupal.................................................................................................28Figura 8: Página principal de EasyBus...............................................................................................29Figura 9: Pestañas del menú administrador........................................................................................ 30Figura 10: Panel de Control................................................................................................................31Figura 11: Página principal, por defecto, de Drupal...........................................................................32Figura 12: Instalación nuevo tema en Drupal.....................................................................................33Figura 13: Temas instalados en Drupal.............................................................................................. 33Figura 14: Página principal del tema instalado.................................................................................. 34Figura 15: Página de Módulos............................................................................................................36Figura 16: Tipos de contenidos...........................................................................................................40Figura 17: Definición del tipo de contenido.......................................................................................41Figura 18: Opciones de configuración del tipo de contenido.............................................................41Figura 19: Opciones del formulario de envío del tipo de contenido.................................................. 42Figura 20: Opciones de publicación del tipo de contenido................................................................ 42Figura 21: Opciones de comentarios del tipo de contenido............................................................... 43Figura 22: Opciones del menú del tipo de contenido......................................................................... 43Figura 23: Adición de campos al tipo de contenido........................................................................... 44Figura 24: Tipos de datos disponibles para el tipo de contenido........................................................44Figura 25: Campos necesarios tipo de contenido Imagen.................................................................. 45Figura 26: Tipo de contenido Imagen.................................................................................................45Figura 27: Campos necesarios tipo de contenido Ubicación..............................................................46Figura 28: Tipo de contenido Ubicación............................................................................................ 46Figura 29: Campos necesarios tipo de contenido Maleta................................................................... 47Figura 30: Tipo de contenido Maleta..................................................................................................47Figura 31: Tipo de contenido Ticket...................................................................................................48Figura 32: Página principal de la pestaña Contenido......................................................................... 49Figura 33: Agregar nuevo contenido.................................................................................................. 49Figura 34: Crear página básica........................................................................................................... 50Figura 35: Opciones del menú............................................................................................................51Figura 36: Opciones índice del libro.................................................................................................. 51Figura 37: Opciones de revisión del contenido.................................................................................. 51Figura 38: Opciones de ruta URL...................................................................................................... 52Figura 39: Opciones de comentarios.................................................................................................. 52Figura 40: Opciones de autoría...........................................................................................................53Figura 41: Opciones de publicación................................................................................................... 53Figura 42: Pestaña estructura..............................................................................................................56Figura 43: Bloques del sitio................................................................................................................56Figura 44: Estructura del tema del proyecto.......................................................................................57

5

Page 8: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Figura 45: Página de configuración de Bloque.................................................................................. 57Figura 46: Ubicación de Bloques....................................................................................................... 58Figura 47: Opciones de visibilidad del Bloque.................................................................................. 58Figura 48: Tipos de contenido del Bloque..........................................................................................59Figura 49: Opciones de visibilidad según usuarios............................................................................ 59Figura 50: Opciones de modificación del Bloque.............................................................................. 59Figura 51: Bloque Carro de Compras.................................................................................................60Figura 52: Bloque Catálogo................................................................................................................60Figura 53: Bloque Menú.....................................................................................................................60Figura 54: Bloque de Imágenes..........................................................................................................61Figura 55: Bloque Reserva de Billete.................................................................................................61Figura 56: Bloque de Noticias............................................................................................................62Figura 57: Menús del sitio..................................................................................................................63Figura 58: Página de configuración del Menú................................................................................... 63Figura 59: Añadir enlaces al Menú.....................................................................................................64Figura 60: Selección del Menú...........................................................................................................64Figura 61: Páginas diseñadas específicamente...................................................................................65Figura 62: Creando Página de Contacto.............................................................................................65Figura 63: Opciones de alias y ubicación de la Página de Contacto.................................................. 66Figura 64: Características opcionales de la Página de Contacto........................................................ 66Figura 65: Opciones de diseño de página...........................................................................................67Figura 66: Layout para Página de Contacto....................................................................................... 67Figura 67: Agregando contenido a la Página de Contacto................................................................. 68Figura 68: Contenido existente para la Página de Contacto...............................................................68Figura 69: Inserción del contenido existente en la Página de Contacto............................................. 69Figura 70: Diseño y contenido en Página de Contacto.......................................................................69Figura 71: Página de contacto............................................................................................................ 70Figura 72: Layout para Página Principal............................................................................................ 71Figura 73: Diseño y contenido en Página Principal........................................................................... 72Figura 74: Página principal................................................................................................................ 73Figura 75: Taxonomía Catálogo......................................................................................................... 74Figura 76: Añadiendo tipo de producto maleta.................................................................................. 75Figura 77: Opciones de producto maleta............................................................................................76Figura 78: Tipo de producto maleta....................................................................................................76Figura 79: Carro de compras.............................................................................................................. 77Figura 80: Formulario dirección de envío.......................................................................................... 77Figura 81: Método de pago.................................................................................................................77Figura 82: Añadiendo tipo de producto billete................................................................................... 78Figura 83: Opciones de tipo de producto billete................................................................................ 79Figura 84: Añadiendo unidades para el tipo de producto billetes......................................................80Figura 85: Opciones de unidades del tipo de producto billetes..........................................................80Figura 86: Tipo de producto billetes...................................................................................................80Figura 87: Módulo de reservas de billetes..........................................................................................81Figura 88: Carro de compras.............................................................................................................. 81Figura 89: Pago del billete..................................................................................................................82Figura 90: Opciones de pago de billete.............................................................................................. 82Figura 91: Proceso de compra completo............................................................................................ 82

6

Page 9: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Figura 92: Desactivación URLs limpias.............................................................................................85Figura 93: Backup de la base de datos de Drupal.............................................................................. 85Figura 94: Restaurar base de datos en Drupal.................................................................................... 86Figura 95: Pantalla de bienvenida Fedora.......................................................................................... 91Figura 96: Seleccionar Instalación en el menú...................................................................................92Figura 97: Selección de teclado..........................................................................................................92Figura 98: Selección del tipo de disco................................................................................................93Figura 99: Selección nombre para el PC............................................................................................ 93Figura 100: Selección zona horaria.................................................................................................... 93Figura 101: Selección password usuario root.....................................................................................94Figura 102: Selección ubicación para instalación de Fedora............................................................. 94Figura 103: Selección fecha y hora.................................................................................................... 95Figura 104: Selección de usuario....................................................................................................... 95Figura 105: Creación de lanzador para aplicación............................................................................. 96Figura 106: Rellenar campos para el lanzador................................................................................... 97Figura 107: Panel de control de XAMPP........................................................................................... 99Figura 108: Creación de lanzador para aplicación........................................................................... 101Figura 109: Rellenar campos para el lanzador................................................................................. 102Figura 110: Creación base de datos con phpmyadmin..................................................................... 103Figura 111: Lista de usuarios en phpmyadmin.................................................................................104Figura 112: Creación de nuevo usuario en phpmyadmin................................................................. 104Figura 113: Usuario ya creado en phpmyadmin...............................................................................105Figura 114: Privilegios específicos para la base de datos.................................................................105Figura 115: Privilegios específicos para la base de datos “Proyecto”..............................................106Figura 116: Pantalla inicial de instalación de Drupal.......................................................................107Figura 117: Elección de idioma de Drupal....................................................................................... 108Figura 118: Configuración de la base de datos para Drupal.............................................................108Figura 119: Inicio instalación de Drupal.......................................................................................... 109Figura 120: Configuración del sitio a desarrollar en Drupal............................................................ 109Figura 121: Cuenta de mantenimiento del sitio................................................................................110Figura 122: Configuración del Servidor........................................................................................... 111Figura 123: Pantalla de finalización de la instalación de Drupal.....................................................111Figura 124: Página principal de Drupal............................................................................................112Figura 125: Regiones de un tema..................................................................................................... 115Figura 126: Tipos de archivos de plantilla........................................................................................116Figura 127: Hojas de estilo............................................................................................................... 116Figura 128: Presentación del contenido en Drupal...........................................................................117

7

Page 10: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

8

Page 11: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

CAPÍTULO 1:

INTRODUCCIÓN

1.1 OBJETIVOS

El principal objetivo de este proyecto es desarrollar un sitio web de propósito general concomercio electrónico intentando que su implementación y mantenimiento pueda ser realizado porcualquier persona con conocimiento de informática, es decir, con poco o ningún conocimiento deprogramación. Para ello, se decide desarrollar el proyecto haciendo uso de un sistema gestor decontenidos (CMS, Content Manager System) que contiene implementada ya varias de las funcionesrequeridas para el desarrollo de éste.

Uno de los requisitos para el desarrollo e implementación del proyecto es el uso de softwarede código abierto, es decir, software libre.

Por otro lado, con el objetivo de desarrollar un sitio web comercial en estado activoactualmente, se decide entre el tutor y el autor de este proyecto implementar en el gestor decontenidos el sitio web de EasyBus (http://www.easybus.es) que se encarga de la reserva y venta debilletes online para el traslado en autobús desde y hacia los aeropuertos de Londres.

Con este proyecto se pretende evaluar también el potencial de los sistemas gestores decontenidos, éstos ofrecen una estructura base que es adaptable en mayor o menor medida a lasnecesidades del desarrollador. En concreto se desea comprobar el grado de flexibilidad y lamodularidad de uno de los CMS más extendidos y valorados, Drupal.

La consecución de la funcionalidad requerida por el sitio web se lleva a cabo mediante eluso de los mecanismos que ofrece Drupal, lo que conlleva en primer lugar a la comprensión de laestructura y después del modelo de datos de Drupal para su posterior adaptación, con el fin delograr la funcionalidad deseada en el proyecto a implementar.

La flexibilidad que ofrece Drupal se debe a la funcionalidad para la que cada uno de susmódulos ha sido creado. Es por eso que en este proyecto de desea comprobar las posibilidades queofrecen dichos módulos, hasta qué punto se puede conseguir la funcionalidad deseada en el sitioweb sin que sea necesario escribir código para conseguirlo. Y, si fuera necesario hacerlo, es objetode interés de este proyecto averiguar hasta qué punto es posible modificar Drupal para que haga loque se necesita de él.

Por ello, se definen varios tipos de usuarios según su nivel de conocimientos de informáticacon el objetivo de determinar los conocimientos necesarios para poder implementar cada hito delproyecto, estos niveles de usuarios definidos son:

– Nivel principiante: Usuario con conocimientos básicos de informática.

– Nivel medio: Usuario con conocimientos básicos de informática y programación.

– Nivel avanzado: Usuario con conocimientos avanzados de informática y programación.

9

Page 12: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

A lo largo del proyecto se insertan cuadros de textos al final de cada punto de desarrollo coninformación acerca del tipo de usuario necesario para su implementación.

Por último, también se quiere investigar el funcionamiento y las posibilidades de Drupalpara el comercio electrónico. El comportamiento de los distintos módulos de comercio así como suintegración con el resto de módulos instalados, su funcionamiento en conjunto y con laconfiguración requerida para la correcta implementación del sitio web.

1.2 METODOLOGÍAS

1.2.1 Metodología De Desarrollo

Para la correcta implementación y viabilidad de cualquier proyecto es necesario seguir unametodología que estructure, planifique y controle las tareas necesarias para el buen desarrollo eimplementación del proyecto de manera que se simplifique el proceso y se asegure sucumplimiento.

1.2.2 Definición Del Modelo De Desarrollo

Finalizar un proyecto con éxito depende, en gran medida, de seguir una buena estrategiapara su desarrollo e implementación. La estrategia engloba múltiples aspectos importantes, entre losque cabe destacar:

• Elección del equipo humano:

El autor de este proyecto ha trabajado conjuntamente con un tutor que ha estadoespecificando las necesidades para cubrir totalmente los objetivos del proyecto.

• Captura de requisitos:

Se trata de un punto fundamental para llegar a cubrir con éxito todos los objetivos delproyecto e implementarlo con fluidez.

• Elección de hitos a alcanzar durante el desarrollo:

Establecer puntos de control para analizar el correcto desarrollo e implementación delproyecto. A lo largo del desarrollo ha habido diversos hitos que se han definido trasreuniones con el tutor encargado de supervisar el proyecto.

10

Page 13: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

1.2.3 Metodología Utilizada

El desarrollo de proyectos software puede realizarse siguiendo distintas metodologías queson simplemente un conjunto de pasos mediante los cuales, las distintas tareas a realizar durante elproceso de desarrollo son organizadas.

Para implementar este proyecto se ha seguido el modelo en espiral, esta metodologíaaprovecha las ventajas de una comunicación fluida frente a los cambios en los requisitos desoftware inherentes al propio proceso de desarrollo.

Figura 1: Desarrollo en espiral.

Tal y como se muestra en la Figura 1, en este método se planifican las tareas, se analizan losrequisitos, se diseña, codifica, revisa y documenta la funcionalidad implementada. Tras sucesivasiteraciones en las que se repiten los procesos mencionados se van cumpliendo con los requisitosexigidos en el diseño inicial, llegando así a una versión funcional del producto.

En otras palabras, los principios básicos de esta metodología son:

• La atención se centra en la evaluación y reducción del riesgo del proyecto, dividiendo elproyecto en segmentos más pequeños y proporcionando más facilidad de cambio durante elproceso de desarrollo.

• Cada viaje alrededor de la espiral atraviesa cuatro cuadrantes básicos:

1. Determinar objetivos, alternativas y desencadenantes de la iteración.

2. Evaluar alternativas, identificar y resolver los riesgos.

3. Desarrollar y verificar los resultados de la iteración.

4. Planificación de la próxima iteración.

• Cada ciclo comienza con la identificación de los puntos a desarrollar y sus condicionantes y,finalmente, termina con la revisión y examinación.

La elección de esta metodología se debe a que fomenta la comunicación cara a caraagilizando los cambios frente a cualquier eventualidad o anomalía surgida durante el proceso dedesarrollo si es que los hubiera en los requisitos y, además, se trata de una de las metodologías másclaras y lógicas para desarrollar e implementar un proyecto de esta índole.

11

Page 14: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

1.3 TECNOLOGÍAS

1.3.1 Soluciones De Código Abierto

Las soluciones de código abierto son aquellas que, independientemente de que hayan sidodesarrolladas por una compañía o por una comunidad de usuarios, tienen características comunes,tales como, acceso al código fuente, posibilidad de redistribución de la aplicación y la posibilidadde adaptar el código a necesidades específicas. Todo el desarrollo del proyecto se ha realizado conherramientas de software libre y código abierto.

Ventajas:

A continuación se identifican las razones principales que habitualmente se mencionan paraadoptar una solución de código abierto:

• Bajo coste (sin licencias).

• Posibilidad de adaptación del código a nuestras necesidades.

• Varios proveedores pueden realizar modificaciones a lo largo del tiempo ya que se mantienela propiedad del código.

• Disponibilidad de aplicaciones que se adaptan directamente a las necesidades del negocio(ya sea directamente o mediante la inclusión de módulos adicionales) o bien que puedanintegrarse varias aplicaciones para conseguir la funcionalidad deseada.

• Reactividad. Al ser modelos de desarrollo en comunidad, cualquier desarrollador interesadopuede crear un módulo que proporcione la nueva funcionalidad sin que exista un complejoproceso de toma de decisión.

Inconvenientes:

Una de las principales desventajas identificadas al invertir en una solución de código abiertoes la incertidumbre acerca de la solución. Habitualmente aspectos como el tiempo de vida de lasolución, la documentación, formación, solución de fallos en la aplicación, etc., dependen de losvoluntarios que están involucrados en la comunidad de desarrollo. Como resultado, el tiemponecesario para poner en marcha la solución puede ser mayor que para una solución comercial.

12

Page 15: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

1.3.2 Sistema Operativo - Fedora

La implementación de este proyecto se ha realizado sobre un equipo en el que se hainstalado el sistema operativo de tipo Unix de software libre, en concreto, la distribución de LinuxFedora. Su arquitectura se muestra en la Figura 2.

Figura 2: Arquitectura de sistemas Unix.

Unix es un sistema operativo de tiempo compartido que controla los recursos de la máquinay los asigna entre los usuarios. Sus características más importantes son:

• Multiusuario.

• Implementado en lenguaje de alto nivel denominado C.

• Portable.

Fedora es una distribución de Linux para propósitos generales basada en RPM (herramientade administración de paquetes) que se caracteriza por ser un sistema estable, la cual es mantenidagracias a una comunidad internacional de ingenieros, diseñadores gráficos y usuarios tester queinforman de fallos y prueban nuevas tecnologías. Además, cuenta con el respaldo y la promoción deRed Hat, el proveedor de tecnologías de código abierto más confiable en todo el mundo.

El proyecto Fedora no busca solo incluir software libre y de código abierto, sino ser el líderen ese ámbito tecnológico. Además, es importante destacar que los desarrolladores de Fedorarealizan los cambios directamente sobre el código fuente en vez de aplicar parches, de esta forma,se asegura que las actualizaciones se encuentren disponibles para todas las variantes Linux.

La elección de dicha distribución es debida a su estabilidad, robustez, diseño, fluidez y porestar orientado para dar servicio web, en definitiva, para estar conectado en red.

13

Page 16: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

1.3.3 Servidor Web - Apache

El servidor web seleccionado para habilitar nuestro equipo para que pueda ser accesibledesde Internet y mostrar el contenido de forma correcta cuando sea requerido por el exterior, asícomo de ofrecer la seguridad necesaria y ser compatible con la ejecución de scripts desarrollados enlenguaje de programación PHP ha sido Apache.

Dicho servidor web Apache fue elegido por cumplir con las siguientes características:

• Código abierto.

• Multiplataformas.

• Extensible.

• Estable.

• Modular.

• Popular.

Apache sigue siendo, según los últimos datos (véase Figura 3), el servidor web que encabezatodas las estadísticas acerca de comportamiento y usabilidad.

Figura 3: Cuota de mercado de los servidores web.

14

Page 17: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

1.3.4 Lenguaje De Programación - PHP

El lenguaje de programación seleccionado para la implementación del entorno web ha sidoPHP ya que se necesita en el lado servidor que se generen páginas dinámicamente, llevando lainformación desde la base de datos hasta el servidor web. Destaca por su conectividad con elservidor de bases de datos MySQL aunque permite la conexión a diferentes tipos de servidores debases de datos tales como PostgreSQL u Oracle.

PHP es un lenguaje script, es decir, no se compila para conseguir código máquina sino queexiste un intérprete que lee el código y se encarga de ejecutar las instrucciones que contiene estecódigo. Es muy utilizado para el desarrollo de páginas web dinámicas del lado del servidor cuyosfragmentos se intercalan fácilmente en páginas HTML. Además, se trata de un lenguaje deprogramación de código abierto y es el más popular y extendido en la web (véase Figura 4), portodo ello, se elige dicho lenguaje de programación para el desarrollo e implementación de esteproyecto.

Figura 4: Cuota de mercado de lenguajes de programación web.

1.3.5 Servidor De Base De Datos - MySQL

Para la implementación del proyecto también es necesario una base de datos que almaceneel contenido del sitio, las cuentas de usuario y los ajustes de configuración en un sitio centralizadopara su posterior recuperación. Para ello, se ha seleccionado como servidor de base de datos el másconocido y popular, MySQL.

MySQL es un lenguaje declarativo de acceso a bases de datos relacionales que permiteespecificar diversos tipos de operaciones. Se trata de un sistema de gestión de base de datosrelacional, multihilo y multiusuario.

15

Page 18: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

1.3.6 Soluciones Integradas - XAMPP

Existen conjuntos de subsistemas software que contienen en un mismo paquete lassoluciones necesarias para la instalación de un servidor completo y que, además, cumplen con losrequisitos para la utilización del gestor de contenidos seleccionado para el desarrollo del proyectoque se comentará más adelante.

XAMPP es una forma fácil de instalar la distribución Apache que contiene MySQL, PHP, y Perl.

Inicialmente se utilizaba el acrónimo LAMP para describir un sistema de infraestructura deInternet que usa las siguientes herramientas:

• Linux, como sistema operativo.

• Apache, como servidor web.

• MySQL, como gestor de bases de datos.

• Perl, PHP o Python, como lenguajes de programación.

La combinación de estas tecnologías es usado para definir la infraestructura de un servidorweb utilizando un paradigma de programación para desarrollo.

Actualmente, XAMPP está disponible para todo tipo de sistemas operativos.

La elección de esta solución integrada se debe a que recoge todo el software libre elegidopara el desarrollo e implementación del proyecto en un único paquete de instalación y de formafácil se integran todas las herramientas para comenzar a trabajar directamente en el entorno.

1.3.7 Sistemas De Gestión De Contenido

Un sistema de gestión de contenidos o CMS (Content Manager System) es un software quepermite crear una estructura de soporte para la creación y administración de contenidos, facilitandola gestión y creación de un sitio web.

Consiste en una interfaz que controla una base de datos donde se aloja el contenido. UnCMS permite separar contenido y diseño en el tratamiento de un sitio web. Es posible manejar elcontenido y darle un diseño distinto al sitio, sin cambiarle el formato al contenido. Con un sistemagestor de contenidos es posible, además, permitir la publicación de contenido en el sitio a varioseditores mediante la aplicación de permisos de usuarios o roles.

16

Page 19: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

1.3.8 Funcionalidad De Un CMS

La funcionalidad de un sistema de gestión de contenidos se puede dividir en creación ygestión de contenido, publicación y presentación.

1. Creación de contenido:

Es habitual que un CMS proporcione un editor de texto WYSIWYG, en el cual es posiblever el resultado de lo escrito. Esto permite a los desarrolladores centrarse en el contenido.

Los sistemas gestores de contenidos incorporan herramientas o aportan módulos con los quedefinir la estructura o el aspecto del sitio, además de incorporar nuevas funcionalidades.

2. Gestión de contenido:

El contenido del sitio así como ciertos datos de la web como los datos relacionados con elcontenido, versión, autor y fecha de publicación, o los datos, preferencias y permisos de losusuarios son almacenados en una base de datos, la cual contiene también la estructura delsitio.

3. Publicación:

A cada página publicada le es aplicado un formato, que puede ser el definido para todo elsitio web o bien el definido para la sección a la que pertenece el mismo. Esto da al sitio unaspecto homogéneo y permite, mediante esta separación de contenido y aspecto, que sepueda modificar el aspecto visual de un sitio sin afectar al contenido ya creado.

4. Presentación:

Los sistemas gestores de contenido se encargan de gestionar la accesibilidad de un sitio web,además de adaptarse a las preferencias de aspecto o necesidades idiomáticas de los usuarios,permitiendo la selección de idioma, de aspecto, etc. También ofrece compatibilidad contodos los navegadores web.

Un CMS se encarga además de la gestión de sus módulos ofreciendo contenido acorde alcontenido del sitio web en cuestión y al patrón marcado por el desarrollador web. Por ejemplo,utilizando un módulo para publicidad el sitio mostrará anuncios, con un módulo de Blog semostrarán las entradas ordenadas cronológicamente en la página principal del sitio web, etc.

17

Page 20: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

1.3.9 Clasificación De Sistemas De Gestión De Contenidos

Actualmente, existe una amplia variedad de sistemas gestores de contenidos. Es posiblehacer una clasificación atendiendo a diversos criterios:

1. Según la funcionalidad:

• Plataformas generales.

• Sistemas específicos:

▪ Blogs: Orientados a páginas personales.

▪ Foros: Orientados a compartir opiniones.

▪ Wikis: Orientados al desarrollo colaborativo.

▪ E-learning: Plataforma para contenidos de enseñanza on-line.

▪ E-commerce: Plataforma de gestión de usuarios, catálogo, compras y pagos.

▪ Publicaciones digitales.

▪ Difusión de contenido multimedia.

2. Según la propiedad del código:

• Código abierto: Permite que se desarrolle sobre el propio código fuente.

• Código propietario: Sólo su desarrollador puede modificar la aplicación.

• Software as a Service: Nueva forma de obtener el servicio sin adquirir el producto.

3. Según el lenguaje de programación:

• Active Server Pages.

• Java.

• ASP.NET.

• Ruby On Rails.

• Python.

• PHP.

18

Page 21: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

1.3.10 ¿Por Qué Un CMS?

Hay diversas razones por las que nos puede interesar desarrollar el sitio o la aplicación webutilizando un sistema gestor de contenidos en vez de hacerlo desarrollando desde cero el código.Algunas de estas razones son:

• Un CMS permite centrarse en la funcionalidad requerida por el cliente. A través de un CMSel añadir una nueva funcionalidad a un sitio web puede implicar sólo la instalación de unnuevo módulo, aprender cómo funciona y configurarlo correctamente. En cambio, si eldesarrollo de la aplicación web se está haciendo de manera tradicional, ésto podría implicarla revisión de multitud de páginas y la generación del código necesario para añadir esanueva funcionalidad al sitio.

• Por escalabilidad, el sistema puede crecer y adaptarse a las necesidades futuras.

• Independencia entre contenido y su presentación. Si no hay una buena separación entre elcontenido y la presentación de éste, un cambio de diseño puede comportar la revisión demuchas páginas para su adaptación. Los CMS facilitan el cambio de aspecto de un sitio,consiguiendo independencia entre presentación y contenido.

• Consistencia de la web. Las diferencias en el estilo de las páginas que componen una webdan sensación de desorden y aspecto poco profesional al sitio. Los CMS pueden aplicar unmismo estilo y estructura en todas las páginas.

• Control de acceso. Controlar el acceso a una web no consiste simplemente en permitir laentrada a la web sino que comporta gestionar los diferentes permisos a cada área de lamisma aplicados a grupos o individuos a través de roles.

• Páginas interactivas. Las páginas dinámicas se generan según las peticiones de los usuarios.Para conseguir esta interacción, los CMS se conectan con una base de datos centralizada quehace de repositorio de todos los datos de la web y la cuál gestiona el mismo CMS.

• Mantenimiento de gran cantidad de páginas. En una web con muchas páginas hace falta unsistema para distribuir los trabajos de creación, edición y mantenimiento con permisos deacceso a las diferentes áreas. Esto es fácil de gestionar con un sistema gestor de contenidos.

En resumen, con un sistema gestor de contenido es posible conseguir dar un aspectoprofesional a un sitio web, además de mantenerlo y hacer cambios en el mismo de manerarelativamente fácil permitiendo centrarse en las labores de diseño.

19

Page 22: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

1.3.11 Elección Del CMS

Los 3 finalistas al mejor CMS de código abierto desarrollado en PHP en el último concursofueron: Wordpress, Joomla y Drupal. En la Figura 5 se representa una comparativa entre ellos.

Figura 5: Comparativa Drupal, Joomla y Wordpress.

A continuación, se describen brevemente las razones por las que se escogió finalmenteDrupal en detrimento de Joomla y Wordpress.

Wordpress

Gestor de contenidos Web que surgió a partir de una iniciativa para crear un sistema depublicación personal en la Web (es decir una bitácora o Blog), y se ha convertido en un completosistema de gestión de contenidos Web. Su modelo se basa en una comunidad de desarrolladores,utiliza tecnología PHP y dispone de un sencillo sistema para incluir nuevas funcionalidadesmediante complementos (plugins). Sin embargo, Wordpress no se puede escalar para configurarpáginas web complejas como los otros dos sistemas. Está diseñado para soportar instalaciones dedos tipos de contenidos, entradas de Blog y páginas web, así que si se desea páginas o artículos queaparezcan en diferentes sitios basados en reglas automáticas, no es el sistema. Hay unadiferenciación básica de roles, sin ninguna forma rápida para soportar permisos de publicación oedición basados en una sección o tipo de contenido.

Joomla

Gestor de contenidos Web que hace un especial hincapié en aunar un número suficiente defuncionalidades que permitan cubrir las operaciones más habituales de una empresa como mantenerla sencillez tanto en la administración como en su empleo por parte de los que introducen loscontenidos. Es altamente modular y dispone de muchos complementos que permiten mejorar ocomplementar sus funcionalidades básicas (la mayor parte a su vez de código libre). Estáprogramado en PHP y su modelo de desarrollo es en comunidad, con una amplia base dedesarrolladores e instalaciones. Sin embargo, Joomla no es la mejor opción para web donde habrádiferentes tipos de usuarios y no ofrece un modo sencillo de crear un flujo de trabajo basado ensecciones o tipo de contenido. Aunque Joomla soporta estructuras más complejas que Wordpress, noes tan flexible como Drupal. Cada parte del contenido está normalmente asociado a una página.

20

Page 23: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Esto hace el sistema más cómodo de entender pero limita la creación de estructuras avanzadas. Noes fácil, por ejemplo, crear un tipo de contenido propio y luego mostrarlo en diferentes páginas delsitio web.

Drupal

Gestor de contenidos Web que en su distribución estándar cubre prácticamente todos losaspectos de la gestión de información en la Web, desde los más simples como puede ser un Bloghasta otros mucho más complejos que incluyan aspectos de colaboración, intranets, etc. Combinadocon otros módulos gratuitos complementarios permite incorporar nuevas funcionalidades como, porejemplo, una gestión mejorada del comercio electrónico. Su modelo de desarrollo es en comunidady está programado en PHP. Se trata pues, de un gestor de contenidos flexible y poderoso. Drupal esuna gran opción para sitios muy complejos. Soporta una amplia variedad de estructuras Web ya quepueden definirse reglas detalladas sobre qué contenido mostrar, dónde y construir un tipo decontenido propio. A destacar la flexibilidad que se puede lograr mediante los cientos de móduloscontribuidos y soportados por sus creadores. Además su carácter abierto nos permite desarrollarnuestros propios módulos. Otro aspecto destacable es su sistema de caché, el cual elimina consultasa la base de datos incrementando el rendimiento y reduciendo la carga del servidor.

1.3.12 ¿Por Qué Drupal?

Atendiendo a la clasificación anterior y teniendo en cuenta la funcionalidad requerida de laplataforma Web, se necesitaría un gestor de contenidos de funcionalidad general, por lo que, quedandescartados los CMS clasificados como sistemas específicos: wikis, plataformas de e-learning, e-commerce...

El lenguaje de programación en el que es desarrollada la plataforma también es algo a teneren cuenta. En este proyecto se ha optado por PHP ya que se trata del lenguaje web por excelencia,con mucha mayor implantación que otros lenguajes web como Ruby on Rails, ASP.NET... y, portanto, con mayor cantidad de recursos, una amplia comunidad de usuarios y extensa documentación.

Otro aspecto importante es que sea una plataforma de código abierto. No solo por sucarácter gratuito sino por la posibilidad que nos da para poder modificar el código si fuera necesariopara lograr los objetivos requeridos para el desarrollo de nuestra plataforma.

Por otro lado, Drupal es además un software premiado por la Packt Publishing, editorialtécnica que anualmente otorga premios a los mejores CMS de código abierto existentes segúndistintas categorías. Drupal ha ganado dos premios otorgados por la Packt Publishing, el primero enla categoría de mejor CMS de código abierto desarrollado en PHP. El segundo, fue el primer premiodel salón de la fama de los premios CMS de código abierto.

Prueba de su popularidad y crecimiento es el número cada vez mayor de sitios webdesarrollados con Drupal, entre estos, muchos de empresas y organizaciones reconocidasinternacionalmente. Algunos ejemplos de esto: General Motors, Nvidia, Intel, MTV, etc.Recientemente, se publicó la noticia de que la Casa Blanca ha migrado los contenidos de su web aDrupal, lo cual indica que es un CMS con la suficiente estabilidad, funcionalidad y seguridad parallevar a cabo sitios tan complejos como éste.

21

Page 24: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Finalmente, Drupal destaca por la calidad de su código y de las páginas generadas, por surespeto de los estándares de la web, por su flexibilidad y adaptabilidad al disponer de una grancantidad de módulos adicionales y de la posibilidad de desarrollar nuestros propios módulos.Sumarle que Drupal cuenta con una amplia y activa comunidad de usuarios, incluida una ampliacomunidad de usuarios de habla hispana. Todo esto, hace que Drupal sea un sistema consistente yde gran usabilidad.

1.3.13 Drupal

Drupal suele relacionarse con el término CMS (sistema gestor de contenidos), sin embargo,es además un CMF (marco de gestión de contenidos). Esto quiere decir que, a diferencia de otrosCMS, está más enfocado hacia la configuración y personalización. La potencia de Drupal está en suenfoque abstracto de la manipulación del contenido Web y su funcionalidad.

Generalmente, los sitios Web son simplemente colecciones de páginas con información yalgunas funciones. Podemos pensar en estos sitios como términos de un árbol jerárquico de páginas.Drupal estructura el contenido como variaciones de un mismo concepto: nodo.

Páginas básicas, entradas de Blog, noticias... y cualquier otro tipo de contenido que creemosnosotros es almacenado en un plano de nodos común. El mapa del sitio, su información y suarquitectura es una capa superpuesta a este plano. Se diseña por separado, mediante la edición delos menús de navegación. La filosofía de diseño de Drupal encaja en lo que es la arquitectura porcapas, consistente en la separación entre contenido y presentación.

En Drupal, cada nodo contiene la estructura de información necesaria según el tipo decontenido que represente. Así, una entrada de Blog, por ejemplo, contendría campos como título,autor, fecha de publicación. El sistema de menús crea el mapa del sitio en una capa separada. Ymediante otros elementos como los temas de distribución de nodos o los módulos de control devistas y paneles de control se controla la presentación en pantalla del contenido de los nodos.

Al mantener todos los nodos en un mismo espacio, Drupal se asegura de que todos sonconstruidos partiendo de la misma estructura, y se pueden manejar de igual forma. Esto permite quetodos los tipos de contenidos puedan combinarse y que cualquiera de sus datos particulares, o unconjunto de ellos, puedan utilizarse para organizar los nodos, buscarlos, mostrarlos o relacionarloscon otros.

22

Page 25: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

CAPÍTULO 2:

DESCRIPCIÓN TÉCNICA

2.1 CONCEPTOS BÁSICOS PARA ENTENDER DRUPAL

Antes de comenzar a hablar de Drupal y su aplicación en este proyecto se presenta suestructura y algo de terminología con el objetivo de entender correctamente su funcionamiento yusabilidad.

1. Módulos.

Los módulos definen las funcionalidades del sitio. Su agrupación nos da lafuncionalidad de Drupal y permiten ampliar la funcionalidad de nuestro sitio o aplicaciónweb. Son archivos desarrollados sobre código PHP. Existen dos tipos de módulos:

• Módulos del núcleo. Se trata de módulos incluidos por defecto en Drupal para sufuncionamiento básico.

• Módulos contribuidos. Se trata de módulos que le dan una funcionalidad añadida aDrupal. Estos módulos son proporcionados por la comunidad de Drupal.

Los módulos pueden ser habilitados o deshabilitados en función de la necesidad del sitioweb. La gran mayoría de los módulos contribuidos han sido desarrollados para una finalidadconcreta y pensados para que puedan ser combinados con otros módulos. Además, existenmódulos contribuidos desarrollados para extender la funcionalidad de otros módulos.

Los módulos se encuentran disponibles en la web oficial de Drupal. Para buscar unmódulo en concreto, se hace una búsqueda a través del buscador de módulos disponible enla web y descargaremos el módulo compatible con nuestra versión de Drupal. Si estamosbuscando algún modulo que nos aporte alguna funcionalidad en concreto, en la mismapágina web se pueden ver los módulos disponibles, su funcionalidad y si son dependientesde algún otro módulo. Por otro lado, si no encontramos un módulo que se adapte a nuestrasnecesidades, podemos desarrollar nuestro propio módulo haciendo uso de la API de Drupal.

2. Usuarios

Una aplicación o una página web puede tener distintos perfiles de usuarios conacceso a todo o parte de la misma según el nivel de privilegio. Por ejemplo, unadministrador del sistema no tendrá los mismos privilegios que un usuario que visita lapágina web o usa la aplicación.

23

Page 26: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

A través del menú de administración de usuarios se puede definir, entre otras cosas:

• Modo de registro: Automático, con aprobación o solo por el administrador.

• Modelos de e-mail del sistema a los usuarios, según tipo de registro.

• Activación o desactivación y configuración de la subida de información.

Con la instalación de Drupal se crea automáticamente el usuario administrador y, pordefecto, aparecen dos roles, usuario autenticado y anónimo. Pero es posible crear tantosusuarios adicionales como se desee y asignarles nuevos roles personalizados.

Para cada rol se puede establecer la visibilidad de urls específicas, tipos decontenido, menús, bloques... así como permisos sobre los módulos instalados.

3. Bloques

Son widget que se ajustan en áreas del sitio web como, por ejemplo, las columnaslaterales, encabezado, pie de página o cualquier otra que se determine por cada tema. Losbloques se utilizan para mostrar el contenido. Debido a que cada tema puede tener diferentesregiones para ubicar los bloques, existe una página de administración de bloques para cadatema.

Algunos módulos poseen bloques propios que aparecerán como disponibles en lapágina de administración de bloques tras la activación del módulo correspondiente.

En la configuración del bloque se pueden determinar diferentes opciones de visibilidad:

• Si los usuarios pueden o no pueden ocultarlo.

• A qué roles de usuarios se les mostrará o no el bloque.

• Las páginas en las cuales se mostrará o no el bloque.

4. Menús

Los menús son colecciones de enlaces que facilitan la navegación por el sitio Web.Cuando se crea un menú, automáticamente aparece un bloque contenedor que se puedeubicar donde se desee. Al tratarse de un bloque más, puede ser incluido para uno o variosroles y mostrarse o dejarse de mostrar en una, varias o en todas las páginas del sitio.

Hay tres menús predefinidos:

• Principal. Se trata del encabezado de enlaces dispuesto a vista de cualquier usuariodel sitio.

• Navegación. Se trata del menú de usuario el cual aparece solo para usuariosregistrados.

• Primary Links. Se puede definir para que contenga la estructura de seccionesprincipales del sitio.

• Secondary Links. Puede contener enlaces a otras secciones secundarias del sitio.

24

Page 27: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

5. Nodos

El nodo es el tipo de contenido básico. El bloque de construcción de Drupal. Todotipo de contenido es un nodo. Durante la planificación de una aplicación o sitio web esnecesario saber con qué tipos de contenido se va a trabajar, cada uno ellos será un tipodiferente de nodo. Todos los nodos comparten una serie de propiedades básicas:

• Autor.

• Fecha de creación.

• Título.

• Contenido.

Además de estas propiedades, los nodos pueden sacar provecho de propiedadesintegradas en Drupal, como flags (banderas) que indican si están o no publicados y ajustespara controlar la visualización de cada tipo de nodo.

A cada tipo nodo se le puede asignar permisos de edición y creación basándonos enlos roles. Existen diferentes tipos de nodos básicos, disponibles sólo si el módulocorrespondiente está activado. Para cada tipo de nodo se puede configurar:

• Opciones predefinidas de publicación (publicado, publicado en portada, en cola ...).

• Opciones predefinidas de comentarios (desactivado, sólo lectura, lectura y escritura).

Se pueden administrar los contenidos creados (publicar/ocultar, promocionar aportada, eliminar, dejar fijo en la posición superior...).

Por defecto, solo se encuentran activados los nodos de tipo “page” y “story”. Laprincipal diferencia entre ellos radica en los ajustes de configuración por defecto. Mientraslos nodos de tipo “page” no muestran información sobre el autor o la fecha de publicación,los nodos de tipo “story” sí lo hacen, estos últimos además cuando se crea uno, se muestrapor defecto en la página principal del sitio.

Más tipos de nodos básicos:

5.1. Entrada de Blog.

Un blog, o bitácora, es un tipo de contenido específico que se utiliza comouna revista o diario. En Drupal, cada escritor del Blog puede, dependiendo de laconfiguración del sitio y sus permisos, añadir archivos adjuntos, aceptar códigoHTML o PHP, subir imágenes, etc.

5.2. Página de libro.

Se trata de un tipo de páginas editables por todos los usuarios que dispongande los privilegios específicos para ello. Algunas de las características son:

• El sistema mantiene control de versiones anteriores de las páginas, lo quepermite poder revertir los cambios, con una funcionalidad similar a la de loswikis.

• Las páginas de libro se organizan en un índice, a modo de capítulos ysubcapítulos.

25

Page 28: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

• Las páginas de libro pueden ser añadidas por diferentes personas a fin dehacer un solo libro estructurado de la forma que se desee siempre que seajerárquica.

• Casi cualquier tipo de datos se puede añadir a un libro, tales comoanimaciones, imágenes, etc.

5.3. Tema de un Foro.

Los temas de un Foro son los bloques de construcción de los foros. Los forossólo pueden consistir en los temas del foro y sus comentarios, a diferencia de loslibros, que puede consistir en casi cualquier tipo de contenido. La información en losforos se organiza en contenedores temáticos con una estructura jerárquica y sonextremadamente útiles para acoger debates, así como una base comunitaria de apoyoy aprendizaje.

5.4. Encuesta.

Una encuesta proporciona la posibilidad de hacer preguntas a los visitantesdel sitio y presentan en formato gráfico los resultados en tiempo real.

6. Temas

Los temas son la capa de presentación de Drupal, es decir, la interfaz con la que sepresenta al usuario. Éstos ofrecen al desarrollador la posibilidad de personalizar cómo semuestran los contenidos y la estructura interna del sitio.

Un tema está compuesto por imágenes, hojas de estilo (css) y archivos de códigoHTML o PHP que pueden cambiar la salida por defecto de Drupal.

26

Page 29: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

2.2 ARQUITECTURA DE DRUPAL

Drupal estructura el contenido en una serie de elementos básicos definidos como: nodos,módulos, bloques, menús, permisos de usuario y plantillas, todos ellos representados en la Figura 6.Aunque se han mencionado estos elementos anteriormente, lo que se explica a continuación es sufunción en la arquitectura de Drupal.

Figura 6: Arquitectura de Drupal.

Los nodos son los elementos básicos de Drupal en los que la información es almacenada.Así, cuanto más crece un sitio web, mayor es el número de nodos que lo componen. Es la primeracapa de la arquitectura de Drupal. (Véase Figura 6).

Los módulos operan sobre los nodos y le dan funcionalidad a Drupal permitiendoincrementar su funcionalidad o adaptarlas a la necesidad de cada sitio.

Sobre la capa anterior está la que constituyen bloques y menús. Éstos nos permitenestructurar y organizar el contenido. A través de ellos se puede acceder o mostrar la informacióngenerada por los módulos a partir de la información almacenada en los nodos.

La siguiente capa es la de control de usuarios y permisos. Drupal dispone de un registro deusuarios y roles que permiten especificar qué tareas pueden realizar de las que ofrecen los módulosinstalados en el sitio así como el contenido que se puede crear, al que se puede acceder o el quepuede visualizar cada usuario o tipo de usuario (rol). En otras palabras, esta capa controla lasoperaciones (visualización, edición, creación, etc.) que un usuario puede realizar sobre loselementos de las capas inferiores.

La última capa es la capa de las plantillas o temas y es la que establece la apariencia o estilode la información a mostrar al usuario. Esta separación entre información y aspecto permite cambiarla apariencia de un sitio web sin modificar el contenido.

27

Page 30: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

2.3 PILA TECNOLÓGICA DE DRUPAL

La pila de Drupal es como una capa intermedia entre Internet y la interfaz de usuario.

Figura 7: Pilar tecnológica de Drupal.

Tal y como se muestra en la Figura 7, en las capas inferiores de la pila se encuentran elsistema operativo, el servidor web, la base de datos y PHP ejecutándolo. El sistema operativo seencarga de las tareas que mantienen el sitio web en funcionamiento, el servidor web permite que elsitio sea accesible, la base de datos almacena toda la información del sitio y PHP procesa lainformación de la base de datos.

Drupal, tal y como se ha visto anteriormente, se compone de capas. Su capa más bajaproporciona funcionalidad adicional encima de PHP añadiendo subsistemas como manejo de sesiónde usuario, autenticación, filtro de seguridad e interpretación de plantillas. Encima se encuentra lacapa construida con los elementos de funcionalidad de Drupal, los módulos. Éstos son losencargados de generar los contenidos de cualquier página pero antes de mostrar una página a unusuario, ésta es ejecutada a través del sistema de temas. La página de salida, habitualmente HTML,emplea hojas de estilo CSS para controlar el diseño y los colores de la página y, Javascript para loselementos dinámicos de la misma como campos de formularios o campos plegables.

28

Page 31: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

CAPÍTULO 3:

DESARROLLO DEL MODELO DE EJEMPLO

3.1 INTRODUCCIÓN

Para implementar en el proyecto un sitio web real con comercio electrónico mediante elgestor de contenidos seleccionado se ha decidido implementar el sitio web de EasyBus:

http://www.easybus.es

Figura 8: Página principal de EasyBus.

En la Figura 8 se presenta la página principal y se pueden encontrar distintos puntos a implementar:

• Registro de usuarios.

• Publicación de noticias, ofertas, etc.

• Módulo de reserva y venta de billetes online.

• Publicación de información sobre la empresa.

• Navegación por el sitio web.

• Enlace con redes sociales.

Una vez conocido el sitio web a implementar y los objetivos, comenzaremos inicialmenteseleccionando la plantilla del tema a utilizar y su instalación en Drupal.

29

Page 32: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

3.2 DEFINICIÓN DEL MENÚ ADMINISTRADOR

Antes de pasar a explicar los pasos para incluir el contenido a la plataforma a partir delmenú de administrador, se procede a enunciar las pestañas de dicho menú. (Véase Figura 9).

Figura 9: Pestañas del menú administrador.

• Inicio.

Muestra la página inicial del sitio web.

• Panel del control.

Permite controlar/supervisar las modificaciones recientes realizadas sobre la web. Además,permite añadir el tipo de contenido que se desea supervisar.

• Store.

Se visualiza al activar algún módulo de comercio electrónico. Permite configurar elcontenido comercial de nuestra web.

• Contenido.

Permite añadir/modificar/configurar el contenido que se añade a nuestra web tales comoartículos, encuestas, página estática, etc.

• Estructura.

Permite añadir/modificar/configurar la estructura de nuestra web a través de bloques, menús,etc.

• Apariencia.

Permite añadir/modificar/configurar los temas/plantillas del sitio web.

• Personas.

Permite gestionar todo lo relacionado con usuarios del sitio como permisos, estado, rol, etc.

• Módulos.

Permite gestionar la funcionalidad del sitio a través de la importación de módulos. Cadamódulo añade una nueva funcionalidad dependiendo del objetivo de la plataforma.

• Configuración.

Permite modificar la configuración tanto de Drupal como del sitio web a implementar.

• Informes.

Información acerca del estado de la plataforma.

• Ayuda

Temas de ayuda de Drupal.

30

Page 33: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

3.3 DEFINICIÓN DEL PANEL DE CONTROL

A través de la pestaña “Panel de Control” del panel de Administración se puede supervisar oañadir el tipo de contenido que se desee supervisar. Para ello, pinchando en el enlace “Personalizarpanel de control” se puede configurar el contenido que se mostrará en la página de control comoadministradores del sitio.

En nuestro caso, se ha añadido en esta página que nos informe en tiempo real de los usuariosconectados, usuarios recientes, contenido reciente añadido en el sitio y entradas del Blog. De estaforma, la página queda tal y como muestra la Figura 10.

Figura 10: Panel de Control.

Como se puede observar, simplemente arrastrando el contenido que se desee supervisar en el panelde control se forma la vista, por lo tanto, cualquier usuario con nivel de conocimientos básicos deinformática podría implementar este punto.

31

Page 34: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

3.4 DEFINICIÓN DE LA PLANTILLA

Una vez que se tiene el entorno preparado, el gestor de contenidos quedará con la aparienciapor defecto representada en la Figura 11. A partir de aquí, comenzaremos a implementar el sitio webcon la interfaz que se mostrará al usuario.

Figura 11: Página principal, por defecto, de Drupal.

Drupal permite modificar la apariencia del sitio web a través de temas o plantillasespecíficas. Para ello, una vez descargada la plantilla seleccionada para el sitio, se procede a suinstalación y posterior activación siguiendo los siguientes pasos:

1. Para instalar el archivo del tema, se le da permisos de ejecución a la carpetacorrespondiente.

$> sudo chmod 777 /opt/lampp/htdocs/Proyecto/sites/all/themes/

2. A continuación, desde la plataforma Drupal se accede como administrador y picando en lapestaña “Apariencia” del panel de Administrador seleccionar “instalar nuevo tema”.Aparecerá una ventana tal y como se muestra en la Figura 12.

32

Page 35: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Figura 12: Instalación nuevo tema en Drupal.

3. Una vez seleccionado el tema, se pincha en instalar. Pedirá la cuenta para el servidor FTP,tras introducirla, se instala exitosamente el tema seleccionado. (Véase Figura 13).

Figura 13: Temas instalados en Drupal.

4. Para finalizar, queda activarlo y establecerlo como predeterminado. Para ello, se pincha denuevo en la pestaña “Apariencia” y, a continuación, “activar y establecer comopredeterminado”.

33

Page 36: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

De esta forma, quedará el tema instalado con la siguiente apariencia mostrada en la Figura 14.

Figura 14: Página principal del tema instalado.

A partir de aquí, ya se puede trabajar con el desarrollo de la plataforma para adaptarla anuestras necesidades.

Para implementar este punto se pueden dar los 3 niveles de usuarios dependiendo de laprofundidad en la modificación que se desee realizar.

Para instalar cualquier tema basta con ser usuario con conocimientos básicos de informática ya quelo único que se requiere es descargar un tema directamente desde internet y seguidamente cargarloen Drupal.

Sin embargo, para modificar el colorido del tema o activar/desactivar algunas capas de éste hayque ser usuario con conocimientos básicos de programación ya que requiere modificar la hoja deestilos del tema y localizar las partes en la que se encuentra estructurada la interfaz.

Y, por último, si se desea modificar la estructura del tema, redimensionar partes, incluir nuevasfunciones, etc ya se requiere ser usuario avanzado debido a la necesidad de trabajar directamentecon código HTML, PHP y CSS.

34

Page 37: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

3.5 DEFINICIÓN DE USUARIOS Y ROLES

El entorno a implementar es multiusuario, con distintos privilegios de acceso y modificacióndel contenido. No todos los usuarios tienen los mismos permisos, por lo que, la interfaz a mostrarpara cada uno de ellos es distinta.

Drupal ofrece la posibilidad de agrupar aquellos usuarios que comparten niveles de acceso opermisos bajo un rol. Sobre estos roles se pueden definir los permisos que tendrán los usuariospertenecientes a un rol. Por defecto, Drupal define los roles de usuario anónimo y usuarioregistrado.

El sitio web a desarrollar necesita tener definido 4 perfiles distintos de usuarios:

• Invitado.

Usuario sin registrar en el sitio web que podrá visualizar y navegar por ella a modo delectura, es decir, para participar en el sitio se le pedirá que se registre. También denominadousuario anónimo.

• Registrado/Cliente.

Usuario autenticado en la plataforma que podrá participar activamente en el sitio y realizarcompras online. Puede darse de alta en la plataforma en tiempo real de forma online.

• Empleado.

Usuario dado de alta por el administrador con permisos para publicar y mantener el sitio.

• Administrador.

Usuario con todos los permisos activos para el desarrollo completo del sitio web.

En este punto, todo se desarrolla siguiendo la interfaz web de Drupal, por lo que, cualquier usuariocon conocimientos básicos de informática podría desarrollarlo sin ningún tipo de problema.

35

Page 38: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

3.6 MÓDULOS NECESARIOS

La funcionalidad en Drupal viene dada por los módulos. El núcleo de Drupal trae ya consigoalgunos denominados módulos core, sin embargo, si la funcionalidad que éstos ofrecen no seajustan a las necesidades requeridas por el desarrollador, es necesario añadir módulos contribuidosque sí aporten la funcionalidad requerida. Estos módulos contribuidos son proporcionados por laamplia comunidad de Drupal.

En este proyecto se han instalado y configurado más de 30 módulos contribuidos, cada unode los cuales a su vez, contiene otros módulos dependientes haciendo un total de más de 80 nuevosmódulos habilitados para lograr la funcionalidad requerida por el proyecto.

Para conseguir la funcionalidad que ésta y cualquier aplicación requiere, no sólo basta conañadir módulos que incorporen dicha funcionalidad, sino que también se debe lograr adaptar estosmódulos a las necesidades y requisitos del proyecto emprendido sin que haya problemas deincompatibilidad entre ellos. Por ello, es necesario conseguir que éstos interactúen entre sí cada unocumpliendo la función para la que se ha desarrollado e instalado.

Los módulos contienen código PHP y un conjunto de funcionalidades que Drupal sabe cómousar. Cada módulo está especializado en una función y la inmensa mayoría son módulosdependientes que amplían la funcionalidad del módulo principal.

A través de la pestaña “Módulos” del panel de Administración se listan todos los módulosinstalados actualmente en la plataforma y realizar algunas tareas tales como instalar/desinstalar,activar/desactivar módulos. (Véase Figura 15).

Figura 15: Página de Módulos.

36

Page 39: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Algunos de los módulos imprescindibles para la consecución de los requisitos marcadoscomo objetivo se presentan a continuación.

• Chaos tool suite (CCK).

Esta suite es ante todo un conjunto de APIs y herramientas para mejorar la experiencia deldesarrollador. Permite modelar la realidad a representar por el sistema mediante la creaciónde nuevos tipos de contenido y de los campos necesarios por éstos.

• Node reference.

Permite relacionar entre sí objetos del mundo real representados como nodos.

• Computed Field.

Permite obtener el valor del resultado entre operaciones aritméticas con otros campos.

• Image Field.

Permite añadir una imagen a un tipo de contenido.

• File Field.

Permite añadir un archivo a un tipo de contenido.

• Simple Google Maps.

Permite crear un campo que es un mapa de Google Maps.

• Date.

Este paquete aporta la posibilidad de definir un campo de tipo fecha.

• Calendar.

Este módulo permite mostrar un campo de tipo fecha en el formato de vistas del calendario.

• Views.

Este módulo es una potente herramienta que permite, a través de una interfaz gráfica,realizar consultas a la base de datos del sitio web de Drupal encargándose, además, de lavisualización del resultado.

• Views Calc.

Permite mostrar el resultado de la consulta de operaciones aritméticas básicas con loscampos que se desee en una tabla.

• Fields.

Permite seleccionar los campos a consultar, su visualización e incluso valor por defecto.

• Panels.

Permite al administrador del sitio crear diseños personalizados para múltiples usos. Se tratade un gestor de contenidos de arrastrar y soltar que permite diseñar visualmente uncontenido de diseño y el lugar dentro de ese esquema.

• Taxonomy.

Permite hacer uso de vocabularios que se definan para agrupar contenido.

37

Page 40: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

• Ubercart.

Se trata del módulo de comercio electrónico compuesto por numerosos módulos a su vez yampliable por muchos otros más. Cabe destacar:

◦ Cart: Gestión del carro de la compra.

◦ Order: Gestión de los pedidos.

◦ Store: Control de la tienda.

◦ Product: Creación de productos.

◦ Catalog: Gestión del catálogo de productos.

◦ Payment: Simulación del pago.

◦ Reports: Informes de todo lo relacionado con la tienda.

• Agreservations.

Permite realizar reservas online de recursos o productos definidos.

• BuEditor.

Permite insertar estilos a los comentarios sin necesidad de conocer el etiquetado HTML.

• IMCE.

Permite insertar imágenes, enlaces o archivos en los comentarios publicados.

• Display suite.

Permite modificar la forma del contenido mediante una interfaz de arrastrar y soltar. Permiteorganizar nodos, puntos de vista, comentarios, datos de usuarios, etc.

• Internationalization.

Permite traducir el contenido existente en el sitio web a otros idiomas.

• Backup and Migrate.

Permite exportar el sitio web por completo a otro servidor.

• Rules.

Permite realizar acciones ante eventos definidos.

• Variable.

Permite la creación de campos necesarios para otros módulos.

• References.

Permite enlazar nodos entre si.

• Address field.

Un módulo de Drupal 7 de campo para introducir direcciones postales, la implementación deun subconjunto de campos definidos en la norma xNAL, el mismo formato utilizado porGoogle Maps para geo codificación.

38

Page 41: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

• Colorbox.

Este módulo permite la integración de contenido anidado como imágenes que se puedemostrar una capa por encima de la página actual.

• CSS Injector.

Permite a los administradores introducir código CSS en el resultado de la página sobre labase de reglas configurables. Es útil para añadir simples ajustes CSS sin necesidad demodificar el tema oficial de un sitio .

• Libraries.

Este módulo presenta un repositorio común para las bibliotecas de los sitios. Una mismalibrería puede ser compartida por distintos módulos o sitios, facilita la actualización de unmódulo que requiere una librería externa, etc.

• Webform.

Este módulo proporciona una interfaz para crear formularios en línea. Puede utilizar estosformularios para recolectar cualquier tipo de información de forma virtual en un formularioque el visitante deba rellenar.

Los módulos se instalan al igual que los temas en Drupal, por lo que, el tipo de usuario que puededesarrollar este punto se define tal y como en el punto de instalación de una plantilla en Drupal.

Para instalar un tema en Drupal, basta con descargárselo directamente de internet, cargarlo yactivarlo en Drupal a través de la interfaz web, por lo que, cualquier usuario con conocimientosbásicos de informática podría realizarlo.

Sin embargo, si se desea modificar alguna funcionalidad superficial de dicho módulo seríaconveniente que el usuario tuviese conocimientos básicos de programación.

Y, por último, para desarrollar un módulo en Drupal o modificar totalmente un módulo yadesarrollado es necesario que este trabajo sea realizado por un usuario con conocimientosavanzados en programación.

39

Page 42: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

3.7 DEFINICIÓN DE TIPOS DE CONTENIDO

Aquellos objetos de la realidad que presentan características comunes están representados enDrupal con los distintos tipos de contenido. Cada tipo de contenido tiene unas propiedades que lodefinen y son las mismas que caracterizan al objeto en el mundo real. Además, cada instancia de untipo de contenido es un nodo en Drupal.

La creación de los tipos de contenido necesarios y la definición de sus características serealiza gracias al módulo contribuído de Drupal denominado CCK. Este módulo permite añadirnuevos tipos de contenido y definir sus propiedades mediante la adición de nuevos campos. Cadacampo lleva asociado un tipo de dato que son los valores que puede tomar, algunos de estos tiposson número, fecha, texto, etc., aunque los tipos crecen con la adición de nuevos módulos.

La creación de un nuevo tipo de contenido se realiza a través del enlace “Tipos decontenido” de la pestaña “Estructura” del Panel de Administración. En la Figura 16 se muestra unavista de los tipos de contenidos creados.

Figura 16: Tipos de contenidos.

Tras pulsar en el enlace “Añadir tipo de contenido” se inicia el proceso para la creación deun nuevo tipo de contenido. Lo primero es introducir el nombre del tipo de contenido creado y unabreve descripción del mismo. (Véase Figura 17).

40

Page 43: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Figura 17: Definición del tipo de contenido.

A continuación, se configuran las opciones disponibles del tipo de contenido mostradas en laFigura 18.

Figura 18: Opciones de configuración del tipo de contenido.

Entre ellas, solo vamos a modificar las siguientes en todos los tipos de contenidos a crear:

– Opciones del formulario de envío.

Desactivamos el envío de formularios ya que no es relevante para los tipos de contenidos acrear quedando las opciones como muestra la Figura 19.

41

Page 44: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Figura 19: Opciones del formulario de envío del tipo de contenido.

– Opciones de publicación.

Las opciones han de quedar tal y como se muestra en la Figura 20 ya que los objetos creadosa partir de este tipo de contenido han de ser publicados en el sitio.

Figura 20: Opciones de publicación del tipo de contenido.

42

Page 45: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

– Opciones de comentarios.

Desactivamos la opción que permite incluir comentarios en la estructura del tipo decontenido ya que no es relevante. Las opciones quedan como muestra la Figura 21.

Figura 21: Opciones de comentarios del tipo de contenido.

– Opciones del menú.

Destildamos los menú activos ya que no tiene sentido incluir la estructura del tipo decontenido en un menú. Las opciones quedarían así: (Véase Figura 22).

Figura 22: Opciones del menú del tipo de contenido.

43

Page 46: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

A continuación, comenzaremos a añadir los campos necesarios para el tipo de contenido enconcreto. Para ello, se pulsa en “guardar y añadir campos” con lo que nos aparecerá una ventanacomo muestra la Figura 23.

Figura 23: Adición de campos al tipo de contenido.

En ella, se agregan los campos necesarios en la zona indicada “Agregar nuevo campo” en elque hay que rellenar:

– Etiqueta: Nombre del campo.

– Tipo de dato a almacenar: Variable que guardará el tipo de dato. Las variables disponibles semuestran en la Figura 24.

Figura 24: Tipos de datos disponibles para el tipo de contenido.

44

Page 47: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

– Elemento de formulario para editar los datos: Representación visual para rellenar el campo.Depende del tipo de dato a almacenar y los tipos de elementos disponibles son: combobox,lista, campo de texto, etc.

Una vez introducidos todos los campos necesarios para componer la estructura del tipo decontenido deseado se guardan los cambios y ya se tendría creado completamente ese tipo decontenido.

La forma de agregar objetos del tipo de contenido creado se explica en el punto 3.7.1 –Añadiendo El Contenido.

Los tipos de contenidos creados necesarios para la implementación del sitio han sido:

• Imagen.

Tipo de contenido necesario para la inclusión de imágenes en distintas zonas del sitio. Loscampos creados para su inserción son: (Véase Figura 25).

◦ Title tipo texto

◦ Descripción tipo texto

◦ Imagen tipo archivo de imagen

Figura 25: Campos necesarios tipo de contenido Imagen.

Y su presentación tras insertar un objeto de este tipo quedaría tal y como se muestra en la Figura 26.

Figura 26: Tipo de contenido Imagen.

45

Page 48: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

• Ubicación.

Tipo de contenido necesario para agregar una ubicación en el sitio, en concreto, en la páginade contacto. Los campos creados para su inserción son: (Véase Figura 27).

◦ Title tipo texto

◦ Descripción tipo texto

◦ Mapa tipo texto - dirección google maps

Figura 27: Campos necesarios tipo de contenido Ubicación.

Y su presentación tras insertar un objeto de este tipo quedaría tal y como se muestra en la Figura 28.

Figura 28: Tipo de contenido Ubicación.

46

Page 49: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

• Maleta.

Tipo de contenido necesario para la creación del producto Maleta. Los campos creados parasu inserción son: (Véase Figura 29).

◦ Title tipo texto

◦ Descripción tipo texto

◦ Catálogo tipo referencia de término

◦ Imagen tipo archivo de imagen

Figura 29: Campos necesarios tipo de contenido Maleta.

Y su presentación tras insertar un objeto de este tipo quedaría tal y como se muestra en la Figura 30.

Figura 30: Tipo de contenido Maleta.

47

Page 50: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

• Ticket.

Tipo de contenido necesario para la venta de billetes. Los campos creados para su inserciónson los mismos que para el tipo de contenido Maleta: (Véase Figura 29).

◦ Title tipo texto

◦ Descripción tipo texto

◦ Catálogo tipo referencia de término

◦ Imagen tipo archivo de imagen

Y su presentación tras insertar un objeto de este tipo quedaría tal y como se muestra en la Figura 31.

Figura 31: Tipo de contenido Ticket.

Para implementar este punto, al realizarse todo a través de la interfaz web proporcionada por elgestor de contenidos, solo es necesario que el usuario tenga conocimientos de informática básicos,sin embargo, ha de conocer un poco el mundo de las variables y sus campos en programación yaque es básicamente lo que se crea.

48

Page 51: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

3.7.1 Añadiendo El Contenido

A través de la pestaña “Contenido” se observa de forma centralizada todo el contenidoregistrado en el sitio web independientemente del tipo de contenido y si se encuentra publicado uoculto. (Véase Figura 32).

Figura 32: Página principal de la pestaña Contenido.

Para añadir un nuevo contenido se pincha en el enlace “Agregar contenido”. Así, se mostrarála siguiente ventana en la que se selecciona el tipo de contenido a insertar: (Véase Figura 33).

Figura 33: Agregar nuevo contenido.

En función del tipo de contenido a insertar, las opciones a rellenar pueden variar pero loimportante se puede ver con el siguiente ejemplo en el que se va a incluir una página estática deinformación. Para ello, se pincha en el enlace “Página básica” y se abrirá una ventana como sepuede observar en la Figura 34.

49

Page 52: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Figura 34: Crear página básica.

Tras introducir el título, se pasa a rellenar el contenido de la página. A través de los módulosBuEditor e IMCE, se pueden insertar imágenes, enlaces a archivos, dar formato al texto, etc., sinnecesidad de conocer etiquetado HTML. Dependiendo del contenido insertado, se selecciona lainterpretación del formato de texto introducido anteriormente.

Ahora queda configurar las opciones de publicación del contenido que se encuentran en laparte inferior de la página. (Véase Figura 35).

Entre las opciones disponibles, se observa que se puede seleccionar si se desea proporcionarun enlace de este contenido en un menú. Aquí se rellena el título del enlace, una breve descripcióndel mismo si se desea y, por último, se seleccionaría la ubicación de la entrada, ya puede ser comoentrada del menú principal o entrada en un submenú.

50

Page 53: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Figura 35: Opciones del menú.

Continuando con las opciones disponibles, también se puede seleccionar si se desea que elcontenido creado forme parte del índice de un libro tal y como se muestra en la Figura 36. Estaopción no se va a utilizar en el desarrollo del proyecto.

Figura 36: Opciones índice del libro.

Otra opción disponible es la revisión del contenido. Se trata de poder actualizar el contenidocomo corrección sin perder la versión original. (Véase Figura 37).

Figura 37: Opciones de revisión del contenido.

51

Page 54: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Cabe destacar las opciones de ruta URL ya que a través de un alias permite hallar con granfacilidad el contenido insertado en el sitio con el objetivo de ubicarlo donde se desee. (Véase Figura38).

Figura 38: Opciones de ruta URL.

La siguiente opción de configuración está relacionada con la publicación de comentarios yse muestra en la Figura 39. Aquí se puede seleccionar si se desea que dicha información puedaadmitir comentarios de los usuarios.

Figura 39: Opciones de comentarios.

Otra de las opciones disponibles a configurar es la relacionada con la autoría. Se puedenrellenar los campos de autoría sobre la información publicada en el sitio. Éstos campos a rellenar semuestran en la Figura 40.

52

Page 55: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Figura 40: Opciones de autoría.

Finalmente, se puede seleccionar, tal y como se muestra en la Figura 41, si se desea publicar,si se publica en la página principal o si se desea que aparezca siempre fijo al comienzo de todas laspáginas.

Figura 41: Opciones de publicación.

Tras finalizar con los pasos anteriormente comentados, ya se tendría el contenido registradoen la base de datos centralizada.

53

Page 56: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

El contenido insertado en la plataforma copiado directamente desde el sitio web originalmediante el tipo de contenido de página básica ha sido:

• Inicio

• Londres Gatwick

◦ Ruta

◦ Conexiones

◦ Horario

◦ Equipajes

• Londres Stanted

◦ Ruta

◦ Conexiones

◦ Horario

◦ Equipajes

• Londres Luton

◦ Ruta

◦ Conexiones

◦ Horario

◦ Equipajes

• Información y Ayuda

◦ Cómo reservar

◦ Asignación y política

◦ Demoras y vuelos

◦ Ayuda especial

◦ Privacidad

◦ Seguridad

◦ Nuestros precios

◦ Mientras viaja

◦ Enlaces de viajes

◦ Cancelación/Modificación

◦ Preguntas más frecuentes

◦ Noticias de viajes

◦ Contacte con nosotros

54

Page 57: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

• Guías de Aeropuertos

◦ Guía de Aeropuerto de Gatwick

◦ Guía de Aeropuerto de Stanted

◦ Guía de Aeropuerto de Luton

◦ Londres Heathrow

• Autobuses y Autocares

• Acerca de nosotros

◦ Información de fondo

◦ Mensaje de Stelios

◦ Nuestras Rutas

◦ Easybus verde

◦ Nuestros objetivos

◦ Nuestros socios

◦ Otros enlaces

Por lo tanto, un usuario con conocimientos básicos en informática podría sin ningún tipo deproblema añadir cualquier tipo de contenido en la plataforma y, como veremos más adelante,ubicarlo donde lo desee.

55

Page 58: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

3.7.2 Añadiendo Nuevos Bloques

Mediante la pestaña “Estructura” del panel de Administración se controla la estructuracióndel sitio web. Su contenido es el que se muestra en la Figura 42.

Figura 42: Pestaña estructura.

En función de los módulos instalados, se podrá insertar unos tipos de estructuras u otros. Alseleccionar 'Bloques', se mostrarán los bloques creados en el sitio y la estructura del mismo parapoder ubicarlo. (Véase Figura 43 y 44).

Figura 43: Bloques del sitio.

56

Page 59: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Figura 44: Estructura del tema del proyecto.

Al pincha sobre 'Añadir bloque' se abrirá la siguiente ventana: (Véase Figura 45).

Figura 45: Página de configuración de Bloque.

Se rellenan los campos y selecciona cómo interpretar el texto introducido en el cuerpo del bloque.

57

Page 60: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

A continuación, se pasa a las opciones de ubicación, es decir, seleccionar la ubicación delbloque en función del tema que se esté utilizando. (Véase Figura 46).

Figura 46: Ubicación de Bloques.

Por último, se finaliza con las opciones de visibilidad donde en primer lugar hay queseleccionar las páginas en las que se podrá visualizar el bloque como se muestra en la Figura 47.

Figura 47: Opciones de visibilidad del Bloque.

Seguidamente, se procede a seleccionar el tipo de contenido del bloque. (Véase Figura 48).

58

Page 61: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Figura 48: Tipos de contenido del Bloque.

Tras seleccionar el tipo de contenido del bloque, ahora hay que seleccionar a qué tipo deusuarios se les mostrará el bloque de las páginas citadas con anterioridad. Para ello, se procedemediante roles tal y como indica la Figura 49.

Figura 49: Opciones de visibilidad según usuarios.

Para terminar, se selecciona quién puede modificar el bloque. (Véase figura 50).

Figura 50: Opciones de modificación del Bloque.

De esta forma, tras pulsar en guardar ya se tendría insertado el nuevo bloque en el sitio.

59

Page 62: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Los bloques creados para la importación del sitio web original han sido:

– Bloque Carro de Compras.

Se trata de un bloque ya generado directamente al instalar el módulo de comercioelectrónico, Ubercart. Simplemente se activa el bloque en la página de bloques del sitio(véase Figura 43) seleccionando la región donde visualizarlo. El bloque generado se muestraen la Figura 51.

Figura 51: Bloque Carro de Compras.

– Bloque Catálogo.

Se trata de un bloque ya generado directamente al instalar el módulo de comercioelectrónico, Ubercart. Simplemente se activa el bloque en la página de bloques del sitio(véase Figura 43) seleccionando la región donde visualizarlo. El bloque generado se muestraen la Figura 52.

Figura 52: Bloque Catálogo.

– Bloque Menú.

Se trata de un bloque creado a partir de la creación de un menú de navegación (Explicaciónen punto 3.7.3 Añadiendo Menú Navegación). Simplemente se activa el bloque en la páginade bloques del sitio (véase Figura 43) seleccionando la región donde visualizarlo. El bloquegenerado se muestra en la Figura 53.

Figura 53: Bloque Menú.

60

Page 63: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

– Bloque Imágenes.

Se trata de un bloque creado de forma manual, tal y como se indica anteriormente, y en elque se hace uso del módulo BuEditor para insertar las imágenes en el cuerpo del bloque.Una vez creado, se activa el bloque en la página de bloques del sitio (véase Figura 43)seleccionando la región donde visualizarlo. El bloque generado se muestra en la Figura 54.

Figura 54: Bloque de Imágenes.

– Bloque Reservas.

Se trata de un bloque ya generado directamente al instalar el módulo de reservas,Agreservation. Simplemente se activa el bloque en la página de bloques del sitio (véaseFigura 43) seleccionando la región donde visualizarlo. El bloque generado se muestra en laFigura 55.

Figura 55: Bloque Reserva de Billete.

61

Page 64: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

– Bloque Noticias.

Se trata de un bloque contenido por defecto en la estructura propia de la plantilla del temainstalado. Simplemente se activa el bloque en la página de bloques del sitio (véase Figura43) seleccionando la región donde visualizarlo. El bloque generado se muestra en la Figura56.

Figura 56: Bloque de Noticias.

Como se ha podido observar, cualquier usuario con conocimientos básicos de informática podríaimplementar este punto ya que no conlleva ninguna dificultad.

62

Page 65: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

3.7.3 Añadiendo Menú De Navegación

Procediendo de la misma forma en la que se procedía anteriormente para añadir un nuevobloque en el sitio, sin embargo, en vez de seleccionar 'Bloques' ahora se selecciona 'Menús' y semostrará la siguiente ventana con los menús creados hasta ahora en el sitio: (Véase Figura 57).

Figura 57: Menús del sitio.

Para añadir un nuevo Menú, se pincha sobre el enlace 'Añadir menú' y se abrirá la siguienteventana: (Véase Figura 58).

Figura 58: Página de configuración del Menú.

Tras rellenar el título y una breve descripción del menú, se procede a guardar y ya semostrará en la lista con todos los menús creados del sitio.

63

Page 66: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

A partir de aquí, ya se pueden realizar las siguientes operaciones:

– Listar enlaces: Posicionar las entradas añadidas en el menú.

– Editar menú: Modificar campos como el título y la descripción.

– Añadir enlace: Insertar nuevas entradas en el menú.

Comenzamos añadiendo entradas/enlaces al menú rellenando los campos que se muestran enla Figura 59.

Figura 59: Añadir enlaces al Menú.

Destacar que en el campo 'Ruta' se inserta el alias de la URL que en su momento se rellenóal crear el contenido. Se finaliza ubicando el enlace en el menú correspondiente y guardamos.(Véase Figura 60).

Figura 60: Selección del Menú.

De esta forma ya se tendría el menú creado con sus enlaces correspondientes. La forma deubicarlo en la estructura de la web es como si se tratase de un bloque más.

A través de la interfaz web se observa que no conlleva ninguna dificultad la implementación denuevos menús de navegación, por lo que, cualquier usuario podría realizar dicha tarea.

64

Page 67: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

3.7.4 Añadiendo La Página De Contacto

Con el objetivo de realizar un diseño especial para esta página se utiliza la opción de“Páginas” a través de la pestaña “Estructura” del Panel de Administración. En ella, se muestrantodos los tipos de páginas ya diseñadas en la plataforma como muestra la Figura 61.

Figura 61: Páginas diseñadas específicamente.

A través del enlace “Create a new page” se crea una nueva página a insertar en el sitio con laestructura a personalizar por el autor. Para ello, hay que rellenar los campos básicos de título ydescripción como cualquier nodo en la primera ventana que se muestra en la Figura 62.

Figura 62: Creando Página de Contacto.

Seguidamente, se inserta el alias con el que se identificará la ruta y se selecciona si se deseaque la página a crear sea la principal. En nuestro caso, se dejan las opciones por defecto ya que seubicará donde deseemos a partir del alias. Las opciones se muestran en la Figura 63.

65

Page 68: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Figura 63: Opciones de alias y ubicación de la Página de Contacto.

Para finalizar, se dejan las características opcionales por defecto ya que son irrelevante paranuestro caso y se pulsa en continuar. (Véase Figura 64).

Figura 64: Características opcionales de la Página de Contacto.

A continuación, se llega a las opciones de diseño de la página. La opciones a modificarsegún el diseño se muestran en la Figura 65.

66

Page 69: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Figura 65: Opciones de diseño de página.

Para llegar al diseño final de la página de contacto se ha modificado:– Layout/Estructura.

Seleccionando una categoría de 2 columnas y la estructura de 2 columnas apiladas como se muestra en la Figura 66.

Figura 66: Layout para Página de Contacto.

67

Page 70: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

– Contenido.

Se añade el contenido ya creado con anterioridad en la región deseada procediendo tal ycomo se detalla a continuación:

1. Agregar contenido.

Pulsar en el botón de herramienta de la zona deseada se abre un cuadro de diálogo con laopción de agregar contenido. (Véase Figura 67).

Figura 67: Agregando contenido a la Página de Contacto.

2. Contenido existente.

En la ventana abierta tras seleccionar agregar contenido anteriormente, seleccionar el enlace“Existing node”. (Véase Figura 68).

Figura 68: Contenido existente para la Página de Contacto.

68

Page 71: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

3. Rellenar campos.

Para finalizar se introduce el título del contenido a insertar en la página de contactopreviamente creado y guardado en la base de datos. (Véase Figura 69).

Figura 69: Inserción del contenido existente en la Página de Contacto.

Añadiendo todo el contenido deseado a la estructura de la página de contacto queda finalmente la estructura como se muestra en la Figura 70.

Figura 70: Diseño y contenido en Página de Contacto.

69

Page 72: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Tras finalizar las opciones de diseño y añadir el contenido previamente creado según el tipode contenido, la página de contacto para nuestro sitio queda con la siguiente apariencia mostrada enla Figura 71.

Figura 71: Página de contacto.

Se puede observar un encabezado con contenido de tipo página básica dando la bienvenida ala página web. Seguidamente, el formulario de contacto para que el cliente nos envíe sus preguntaso sugerencias. Finalmente, la estructura de la página de contacto termina con una doble columna enla que se muestra la ubicación de la sede haciendo uso del tipo de contenido “ubicación” yfotografía de la portada de la sede haciendo uso del tipo de contenido “imagen”.

Para realizar la página de contacto se juega un poco con la mayoría de los puntos yaimplementados anteriormente, haciendo uso de estructuras, bloques, tipos de contenidos, etc. Porlo que, cualquier usuario con conocimientos básicos de informática podría implementar este puntoal realizarse todo a través de la interfaz web que proporciona Drupal, sin embargo, es muynecesario conocer el funcionamiento y estructura del propio gestor de contenidos para enriquecer ydar un aspecto más profesional a las implementaciones.

70

Page 73: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

3.7.5 Añadiendo La Página Principal

De la misma forma en la que se procedió anteriormente, se diseña en este punto la estructurade la página principal con el objetivo de darle un aspecto más provocativo y diferenciarla del restode páginas básicas del sitio.

En este caso, se ha seleccionado una estructura doble columna tal y como se muestra en laFigura 72.

Figura 72: Layout para Página Principal.

Se ha añadido el contenido previamente creado de tipo “página básica” exportadodirectamente de la web original utilizada como modelo de ejemplo. En ella se distingue el contenidoen modo resumen con opción a leer la información ampliada haciendo clic en “Leer más”. Elcontenido insertado es:

• Información de fondo.

Bienvenida al sitio web de la empresa.

• Transbordos a los aeropuertos.

Descripción de los servicios realizados por la empresa.

• Información sobre viajes.

Información acerca de los servicios y de la empresa.

• Nuestras rutas.

Especificación de la ruta realizada para cada trayecto.

• Noticias de viajes.

Información sobre la empresa.

• Mensaje de Stelios.

Opinión del director de la empresa.

71

Page 74: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

La estructura con el contenido insertado se muestra en la Figura 73.

Figura 73: Diseño y contenido en Página Principal.

Por lo tanto, la página principal una vez insertado todo el contenido deseado en su estructura quedatal y como se muestra en la Figura 74.

72

Page 75: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Figura 74: Página principal.

Para realizar la página de principal se juega un poco con la mayoría de los puntos yaimplementados anteriormente, haciendo uso de estructuras, bloques, tipos de contenidos, etc. Porlo que, cualquier usuario con conocimientos básicos de informática podría implementar este puntoal realizarse todo a través de la interfaz web que proporciona Drupal, sin embargo, es muynecesario conocer el funcionamiento y estructura del propio gestor de contenidos para enriquecer ydar un aspecto más profesional a las implementaciones.

73

Page 76: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

3.7.6 Añadiendo Productos

En el sitio web se ha desarrollado dos modelos de negocio con el objetivo de demostrar elpotencial del módulo de comercio electrónico. El primero es la venta online de productos, en estecaso, se ha implementado con la venta de maletas de viajes. El segundo producto trata sobre lareserva de recursos online en el que se ha implementado la reserva de billetes para el traslado enautobús desde y hacia los aeropuertos de Londres.

1. Venta online de maletas.

Para ello, en primer lugar se hace uso de la taxonomía que permite gestionar el etiquetado,categorización y clasificación del contenido. Se puede encontrar en la pestaña “Estructura”del panel de Administración. De esta forma, se crea el catálogo y se listan los tipos deproductos a vender con el objetivo después de ir añadiendo directamente en su ubicación losproductos añadidos. La taxonomía implementada para el sitio ha sido: (Véase Figura 75).

• Maletas

◦ Individuales

◦ Kit de viajes

◦ Especiales

• Billetes

Figura 75: Taxonomía Catálogo.

Tras la creación del tipo de producto “maletas”, se añaden los productos y se clasificandirectamente en su inserción. Los productos de tipo maletas se añaden a través de la pestaña“Contenido” del panel de Administración. Los campos a rellenar se muestran en la Figura 76y son:

• Nombre.

• Clasificación en el catálogo.

• Descripción.

• Imágen.

74

Page 77: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Figura 76: Añadiendo tipo de producto maleta.

Al tratarse de un tipo de contenido basado en producto, se hace uso del módulo Ubercartpara el comercio electrónico y, por lo tanto, en las opciones del contenido hay queconfigurar algunas específicas aparte del resto de opciones comunes para todos los tipos decontenidos. Estas opciones específicas de tipo producto se muestran en la Figura 77 y cabedestacar:

• Información del producto.

◦ SKU.

◦ Precio para el cliente, coste real, precio de envío.

◦ Peso y tamaño.

• Opciones de envío.

◦ Configuración de la empresa de envío.

75

Page 78: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Figura 77: Opciones de producto maleta.

De esta forma se insertan todos los productos a vender, quedando finalmente la vista deusuario que se muestra en la Figura 78.

Figura 78: Tipo de producto maleta.

76

Page 79: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

1. El proceso de compra representado en las Figuras 79 – 81 para este tipo de producto es:

• Elección del producto a través del catálogo.

• Añadir al carro de compras.

• Pulsar en pagar.

• Rellenar la dirección de envío.

• Realizar el pago a través de Paypal.

Figura 79: Carro de compras.

Figura 80: Formulario dirección de envío.

Figura 81: Método de pago.

77

Page 80: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

2. Reserva online de billetes.

Otro tipo de productos es la reserva online de billetes. Para ello, se tuvo que añadir elmódulo de reservas online denominado Agreservation. El funcionamiento para añadirproductos de esta clase es algo distinto al comentado anteriormente. Lo primero esdeterminar qué clase de recurso se va a reservar, en nuestro caso, viajes/trayectos. A travésde la pestaña “Contenido” del panel de Administración se selecciona “Unit tipe category” yse crea la categoría de reserva de viaje en la que se debe de configurar:

• Título y descripción.

• Modo de reserva.

• Contador (En caso de reservas por tiempo).

• Selección de comercio electrónico, Ubercart.

• Unidades para configurar el tipo de reserva.

• Horas de servicio.

Tras la creación del tipo de recurso, se añaden los destinos de servicio. Para ello, seselecciona “Unit type” y se añaden los distintos destinos de servicio rellenando lossiguientes campos tal y como se muestra en la Figura 82:

• Título y descripción.

• Capacidad.

• Categoría de la unidad insertada.

• Tasa de referencia.

• Imagen.

• Opciones de tipo de producto.

Figura 82: Añadiendo tipo de producto billete.

78

Page 81: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Al tratarse de un tipo de contenido basado en producto, hace uso del módulo Ubercart parael comercio electrónico y, por lo tanto, en las opciones del contenido hay que configuraralgunas específicas aparte del resto comunes para todos los tipos de contenidos. Estasopciones específicas de tipo producto se representan en la Figura 83 entre las que cabedestacar:

• Información del producto.

◦ SKU.

◦ Precio para el cliente, coste real, precio de envío.

◦ Peso y tamaño.

• Opciones de envío.

◦ Configuración de la empresa de envío.

Figura 83: Opciones de tipo de producto billete.

A continuación, se añaden las unidades para cada destino. A través de la pestaña“Contenido” del panel de Administración se selecciona el tipo de contenido “Unit”. Seagregan tantas unidades como se deseen del servicio que se vaya a prestar en la empresapara cada destino, para ello, hay que rellenar los campos representados en la Figura 84:

• Título y descripción.

• Número de unidades.

• Tipo de unidad de la que procede.

• Restricciones específicas para la reserva (si las hubiera).

• Restricciones globales para todas las reservas (si las hubiera).

• Opciones de las unidades del tipo de producto billetes.

79

Page 82: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Figura 84: Añadiendo unidades para el tipo de producto billetes.

Seguidamente se configuran las opciones para las unidades del tipo de producto billetes que,en este caso, coincide con las opciones estándares para cualquier tipo de contenido. (VéaseFigura 85).

Figura 85: Opciones de unidades del tipo de producto billetes.

De esta forma se insertan todos las unidades de los billetes a reservar, quedando finalmentela vista de usuario mostrada en la Figura 86.

Figura 86: Tipo de producto billetes.

80

Page 83: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

El proceso de compra para este tipo de producto es:

• Elección de la reserva a través del módulo de búsqueda.

• Añadir al carro de compras.

• Pulsar en pagar.

• Rellenar dirección de envío.

• Realizar el pago a través de Paypal.

Figura 87: Módulo de reservas de billetes.

Una vez insertadas las fechas para las que se desea realizar el trayecto (véase Figura 87), semuestran los billetes disponibles, a continuación, se selecciona el que se desee.

Al añadir en el carro de compras el billete deseado, se inicia el proceso de compras pulsandoen “checkout”. (Véase Figuras 88 y 89).

Figura 88: Carro de compras.

81

Page 84: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Figura 89: Pago del billete.

Por último, se completa el proceso de compra seleccionando el pago por vía Paypal tal ycomo se indica en la Figura 90 e iniciando sesión en él tras aceptar el resumen de compra.(Véase Figura 91).

Figura 90: Opciones de pago de billete.

Figura 91: Proceso de compra completo.

82

Page 85: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Para implementar este punto no basta solo con tener conocimientos básicos de informática oprogramación sino que hay que conocer muy bien los módulos que permiten dicha funcionalidaden Drupal y estos son: Ubercart y Agreservation.

Una vez que se conoce el funcionamiento y usabilidad de ellos, ya se puede proceder a darde alta los productos para la plataforma, las condiciones de venta y proceso de compra.

83

Page 86: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

84

Page 87: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

CAPÍTULO 4:

SISTEMA MULTIPLATAFORMA - EXPORTACIÓN

Una vez finalizado el desarrollo por completo del entorno web, surge la necesidad de alojarestos datos, necesarios para el correcto funcionamiento del sitio, en un servidor web externo con elobjetivo de poner en marcha nuestro sitio finalmente en Internet o, simplemente, seguir con sudesarrollo en otro equipo distinto.

Para ello, es necesario realizar los siguientes pasos:

1. Instalar en Drupal el módulo “Backup and Migrate”.

2. Desactivar mediante la pestaña “Configuración” del panel Administración las Urls limpiastal y como se indica en la Figura 92.

Figura 92: Desactivación URLs limpias.

3. Crear con el módulo anteriormente instalado, a través de la pestaña “Configuración” delpanel Administración, una copia de la base de datos y descargarla en local tal y como seindica en la Figura 93.

Figura 93: Backup de la base de datos de Drupal.

4. Copiar todos los archivos de Drupal del servidor origen ubicados en la ruta:

../opt/lampp/htdocs/Proyecto

85

Page 88: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

5. Instalar Drupal en servidor destino. (Ver Anexo D).

6. Instalar el módulo “Backup and Migrate” en Drupal del servidor destino.

7. Importar la base de datos del servidor origen con el módulo anterior tal y como se indica enla Figura 94.

Figura 94: Restaurar base de datos en Drupal.

8. Copiar todos los archivos del servidor origen (../opt/lampp/htdocs/Proyecto) en el servidordestino.

En el caso de montarlo en un Mac, la ruta destino sería:

../Aplicaciones/XAMPP/htdocs/Proyecto

Realizando los pasos anteriormente comentados ya se tendría montado el sistema completoen el nuevo equipo.

Para implementar este punto se requiere un usuario con nivel medio ya que se necesitanconocimientos de diversos Sistemas Operativos, tener controlado el sistema de permisos y trabajardirectamente con servidores web y bases de datos.

86

Page 89: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

CAPÍTULO 5:

CONCLUSIONES

5.1 LOGROS ALCANZADOS

Durante el desarrollo de este proyecto se ha estudiado y evaluado la capacidad y el potencialde un sistema gestor de contenidos como Drupal. A través de este gestor, se ha conseguidoimplementar con éxito todos los requisitos exigidos para la realización del proyecto y evaluar elnivel de conocimientos necesarios en un usuario para desarrollar cada punto.

Al realizar la implementación del sitio web de ejemplo en Drupal se ha conseguido unmayor control de la actividad de la misma mediante el registro de todo el ejercicio llevado a cabo enla empresa. Facilitando, mediante las herramientas estadísticas desarrolladas para este proyecto, larecopilación de información y la consulta de la misma.

También se ha conseguido, mediante la independencia que proporciona Drupal entre elcontenido y el diseño del sitio, cambiar el estilo del sitio de forma fácil cuando se desee y mejorar lacontribución y actualización del contenido por distintos empleados de la empresa mediante lacreación de grupos de usuarios y roles de forma que no sea necesario una persona dedicada aldiseño web.

Además, con la práctica adquirida en el manejo, desarrollo e implementación de proyectosde comercio electrónico, se han abierto nuevas oportunidades de negocio al autor de este proyectodesarrollando sitios web corporativos y tiendas online.

5.2 CONOCIMIENTOS ADQUIRIDOS

Con la implementación de este proyecto ha sido posible emprender un proyecto dedesarrollo software que ha abarcado todas sus etapas, desde la captura de requisitos hasta la puestaen marcha del sitio y, lo más importante, todo ello en contacto con el mundo real ya que se hatratado de implementar un sitio web potencialmente comercial y en auge hoy en día. Cabe destacarel hecho de haber sido capaz de capturar el modelo de un negocio anteriormente desconocido por elautor de este proyecto.

Para el correcto desarrollo de este proyecto ha sido necesario adquirir/mejorar conocimientos de:

• PHP. Utilizados en la modificación del aspecto de Drupal y en la automatización de algunosde los procesos necesarios del sitio.

• SQL. No solo para realizar las consultas requeridas para la automatización de algunos de losprocesos relacionados con la funcionalidad del sitio, sino que además, ha servido para lacomprobación de las consultas resultantes de la utilización del módulo Views.

87

Page 90: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

• CSS. También ha sido necesario para mejorar la visualización de la plantilla seleccionadacon la que implementar el sitio. Se ha necesitado modificar algunos de los parámetros de lashojas de estilo de Drupal, así como de las plantillas del tema escogido en este proyecto.

También se ha aprendido a configurar por completo un servidor Apache desde cero,habiendo sido necesario asegurar el mismo para la realización de las compras seguras, modificarparámetros de los archivos de configuración, tales como, la memoria del servidor y habilitación deURLs limpias.

Se ha podido comprobar las enormes posibilidades que ofrece un gestor de contenidos comoDrupal, su potencia y modularidad, así como la relativa sencillez, tras vencer las dificultadesiniciales, de desarrollar una aplicación compleja y real como la desarrollada para este proyecto através de la gran cantidad de módulos existentes. Mención especial para el módulo de comercioelectrónico empleado en este proyecto por la rapidez en la puesta en marcha de una tienda online,así como por lo completo de la solución, acompañada de un amplio número de funciones para elcomercio, como estadísticas, generación de informes, etc., y sus enormes posibilidades decrecimiento mediante la adición de otros módulos complementarios.

Por último, destacar la calidad de los módulos desarrollados, así como el seguimiento ysoporte de los mismos, por los desarrolladores de éstos y por la gran comunidad de Drupal.

5.3 TIEMPO DEDICADO

Para la realización de este proyecto se han dedicado más o menos 4 horas diarias, 5 días a lasemana durante 8 meses, de noviembre a junio haciendo un total de 650 horas, aproximadamente.

Este tiempo no incluye el tiempo de reinstalación por actualizaciones del gestor decontenido y los problemas de configuración debido a la incompatibilidad de la versión del núcleo deDrupal con algunos módulos instalados necesarios para el sitio. Tampoco incluye el tiempo derestauración del estado de la base de datos debido a la sobreescritura de datos y bloqueo de lamisma por falta de espacio.

5.4 LÍNEAS FUTURAS DE TRABAJO

El aumento en el número de teléfonos inteligentes con conexión a Internet hace que puedaplantearse trabajar en esta línea desarrollando una versión web del sitio especialmente diseñada paradispositivos móviles.

Otra opción que se plantea sobre la que se puede trabajar es en el envío de SMS a losclientes notificando nuevas ofertas o alguna modificación en el servicio. Para ello, sería necesarioinvestigar las pasarelas de SMS disponibles en España, funcionamiento, configuración e integracióncon Drupal.

88

Page 91: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

89

Page 92: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

90

Page 93: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

ANEXOS

A. INSTALACIÓN DE SISTEMA OPERATIVO, FEDORA.

Archivo descargado: Fedora-16-i686-Live-Desktop.iso

El sistema operativo sobre el que se ha realizado el desarrollo completo de este proyecto hasido la distribución Fedora, en concreto, Fedora 16.

La instalación es gráfica, bastante intuitiva y muy parecida a la instalación de otrasdistribuciones Linux como Ubuntu aunque no exactamente igual. Por lo que, cualquier usuario conconocimientos básicos de informática puede proceder a la instalación de este Sistema Operativo.

Antes de realizar la instalación es importante hacer backup de archivos. Es poco probableque se pierdan pero el riesgo siempre existe.

Los pasos para instalar Fedora han sido:

1. Bajar Fedora desde su página oficial.

2. Grabar la imagen iso de Fedora en un cd y bootear el pc desde éste.

3. En la primer pantalla se elige “Start Fedora 16”. (Véase Figura 95).

Figura 95: Pantalla de bienvenida Fedora.

91

Page 94: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

4. Una vez que se ha iniciado el Sistema Operativo de forma Live, seleccionamos en elmenú de aplicaciones “Install to Hard Drive”. (Véase Figura 96).

Figura 96: Seleccionar Instalación en el menú.

5. Tras comenzar la instalación, pide seleccionar la distribución de teclado. En mi caso,Español. (Véase Figura 97).

Figura 97: Selección de teclado.

92

Page 95: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

6. El siguiente paso es elegir el tipo de disco. Esta opción existe porque Fedora es unadistribución que se usa mucho en servidores de distinto tipo. Como, en nuestro caso,solo queremos instalarlo en un PC común entonces seleccionamos la primera opción.(Véase Figura 98).

Figura 98: Selección del tipo de disco.

7. A continuación, se pide un nombre para el PC. Puede ser cualquiera. (Véase Figura99).

Figura 99: Selección nombre para el PC.

8. Seguidamente, seleccionar la ubicación en el mapa para poder establecer la zonahoraria. (Véase Figura 100).

Figura 100: Selección zona horaria.

93

Page 96: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

9. El siguiente paso es asignarle una contraseña a la cuenta de usuario root. (VéaseFigura 101).

Figura 101: Selección password usuario root.

10. A continuación, se elige dónde instalar Fedora. Las opciones son: (Véase Figura102).

• Ocupar todo el disco.

• Reemplazar Linux si ya existe sin tocar Windows.

• Acortar las particiones existentes para hacer espacio.

• Usar el espacio libre no particionado.

• Particionado Manual.

Figura 102: Selección ubicación para instalación de Fedora.

Recomendado: Si se desea instalar Fedora junto con Windows entonces usar laopción 2. En otro caso, dejar una partición de disco sin formato y elegir la opción 4.

11. En el siguiente paso, se pide confirmación para escribir los datos en el disco ycomenzar la instalación.

94

Page 97: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

12. Al finalizar, aparecerá un cuadro comunicando que debe reiniciar.

13. Comienza la parte de la primera configuración. Se muestra una página debienvenida, la licencia y confirmar la fecha y hora. (Véase Figura 103).

Figura 103: Selección fecha y hora.

14. Agregar datos del primer usuario. Nombre real, nombre de usuario y contraseña.(Véase Figura 104).

Figura 104: Selección de usuario.

Recomendado: Marcar la casilla “Add to Administrators group” si el usuario va a serel administrador del sistema.

15. Finalmente, aparecerá una pantalla con los datos hardware del PC. Tras hacer clicken finalizar, listo. De esta forma habremos finalizado la instalación de la distribuciónFedora.

95

Page 98: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

B. INSTALACIÓN DEL SOFTWARE DE DESARROLLO, ECLIPSE.

Archivo descargado: eclipse-php-helios-SR2-linux-gtk.tar.gz

Para el desarrollo de la programación necesaria para el sitio web se ha utilizado Eclipse-PHPpor ser un entorno de desarrollo integrado de código abierto multiplataforma. Los pasos seguidospara su instalación han sido:

1. Una vez descargado el archivo, se procede a descomprimirlo. Para ello, se abre unaterminal y escribimos:

$> tar xzvf Descargas/eclipse-php-helios-SR2-linux-gtk.tar.gz

2. Una vez descomprimido, quedará una carpeta llamada Eclipse que moveremos a lacarpeta /opt.

$> su -c 'mv Descargas/eclipse /opt/Eclipse'

De esta forma, ya tenemos Eclipse instalado en el PC.

Seguidamente, creamos un lanzador en la barra de tareas para tener acceso directo a dichaaplicación de la siguiente forma:

1. Se hace click derecho en un icono de la barra de tareas y seleccionar añadir. (VéaseFigura 105).

Figura 105: Creación de lanzador para aplicación.

96

Page 99: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

2. Rellenar los campos de la siguiente forma: (Véase Figura 106).

• Nombre: Nombre de la aplicación.

• Comando: “beesu” + Ruta donde se encuentra el ejecutable.

• Icono: Colocar la ruta donde se encuentre el icono para la aplicación.

Figura 106: Rellenar campos para el lanzador.

Nota: El comando “beesu” en Fedora es ejecutar con perfil de administrador (root).En otras distribuciones de Linux normalmente el comando sería “sudo”.

3. Al finalizar, se pulsa “Guardar” y ya tendremos el lanzador en la barra de tareas.

Es necesario para proceder a la instalación de Eclipse-PHP que el usuario sea de tipo nivelmedio ya que es necesario teclear código para moverse por el Sistema Operativo y proceder a lainstalación del programa y su relación con java.

97

Page 100: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

C. INSTALACIÓN Y CONFIGURACIÓN DEL SERVIDOR, XAMPP.

Archivo descargado: xampp-linux-1.7.7.tar.gz

En este punto se describe los pasos a seguir para realizar la instalación de Xampp. Se verácómo, de una manera relativamente fácil, se instala y configura nuestro propio servidor local bajoLinux con Xampp.

Xampp es lo que se conoce como una plataforma de software libre, el cual permite correr unservidor Apache en prácticamente cualquier sistema operativo. De ahí su nombre X (cualquierplataforma), A (Apache), M (MySQL), P (PHP) y P (Perl).

Los pasos para instalar y configurar el servidor son:

1. Descargar el paquete correspondiente.

2. Descomprimir el paquete y colocarlo en el directorio: /opt. Para ello, se abre unaterminal y escribimos:

$> cd Descargas

//Esto nos posiciona en el directorio Descargas.

$> sudo tar -xzf xampp-linux-1.7.7.tar.gz -C /opt

//En modo super usuario, se descomprime el paquete y se copia en /opt.

3. Comandos elementales de XAMPP:

$> sudo /opt/lampp/lampp start

//Arranca

$> sudo /opt/lampp/lampp stop

//Detiene

$> sudo /opt/lampp/lampp restart

//Reinicia

98

Page 101: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

4. Acceso al Panel de Control. (Véase Figura 107).

$> sudo /opt/lampp/share/xampp-control-panel/xampp-control-panel

Figura 107: Panel de control de XAMPP.

De esta forma, se puede realizar las acciones anteriormente comentadas de formagráfica además de consultar el estado del servidor.

5. Accediendo al servidor. Una vez arrancado, se puede comprobar la correctainstalación tecleando en el navegador:

http://localhost

6. Asegurando el servidor.

$> sudo /opt/lampp/lampp security

//Arrancamos las opciones de seguridad.

• Your XAMPP pages are NOT secured by a password:

La primera opción informa que las páginas del servidor no están aseguradaspor una contraseña, esto quiere decir que cualquiera puede acceder a laspáginas de configuración de XAMPP. Para activar dicha seguridad hay queintroducir Y, de lo contrario introducir N.

• MySQL is accessable via network:

Aquí nos dice que MySQL es accesible por la red, es mejor deshabilitar estaopción, sólo acceder internamente.

• The MySQL/phpmyadmin user pma has no password set:

Aquí nos dice que el usuario por defecto, que es pma para phpmyadmin, notiene una contraseña. Para asignarle una responder que sí (Y).

• MySQL has not root passwort set:

Igual que en el caso anterior, pero para Mysql. Para asignarle una responderque sí (Y).

• The FTP password for user 'nobody' is still set to 'lamp':

Por último, nos informa que la contraseña para el usuario anónimo es lamp.Para cambiarla respondemos sí (Y).

99

Page 102: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Una vez efectuados estos pasos, el servidor se reinicia y ya están efectivos loscambios.

Ahora cuando se acceda a http://localhost/ se debe poner:

• usuario: lampp

• contraseña: Contraseña del paso anterior.

7. Directorios del servidor Xampp.

/opt/lampp/bin

//Contiene los comandos home de Xampp.

/opt/lampp/htdocs

//Directorio raíz de Apache.

/opt/lampp/etc/httpd.conf

//Archivo de configuración de Apache.

/opt/lampp/etc/my.cnf

//Archivo de configuración de MySQL.

/opt/lampp/etc/php.ini

//Archivo de configuración de PHP.

/opt/lampp/etc/proftpd.conf

//Archivo de configuración de ProFTPD.

/opt/lampp/phpmyadmin/config.inc.php

//Archivo de Phpmyadmin.

Drupal cuenta con determinados ajustes para su óptimo funcionamiento por lo que sedebe de ajustar el servidor para ello ya que se va a trabajar con Drupal como Gestorde Contenidos.

8. Modificando el archivo php.ini.

$> sudo nano /opt/lampp/etc/php.ini //Abrimos fichero para ajustar parámetros.

• upload_max_filesize = 20M.

• post_max_size = 20M.

• max_execution_time = 600.

• memory_limit = 128M.

Guardamos el archivo y salimos.

9. Modificando el archivo my.cnf.

$> sudo nano /opt/lampp/etc/my.cnf //Abrimos fichero para ajustar parámetros.

• innodb_flush_log_at_trx_commit = 0

Guardamos el archivo y salimos.

100

Page 103: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

10. Modificando el archivo httpd.conf.

$> sudo nano /opt/lampp/etc/httpd.conf

//Abrimos fichero para ajustar parámetros.

• LoadModule rewrite_module modules/mod_rewrite.so

//No ha de estar comentada.

• Sustituir todos los “AllowOverride None” por “AllowOverride All”.

Guardamos el archivo y salimos.

Para que los cambios sean efectivos se debe reiniciar el servidor.

Seguidamente, se crea un lanzador en la barra de tareas para tener acceso directo al panel decontrol de dicha aplicación.

1. Se hace click derecho en un icono de la barra de tareas y seleccionar añadir. (VéaseFigura 108).

Figura 108: Creación de lanzador para aplicación.

101

Page 104: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

2. Rellenar los campos de la siguiente forma: (Véase Figura 109).

• Nombre: Nombre de la aplicación.

• Comando: “beesu” + “python” + Ruta donde se encuentra el ejecutable.

• Icono: Colocar la ruta donde se encuentre el icono para la aplicación.

Figura 109: Rellenar campos para el lanzador.

Nota: El comando “beesu” en Fedora es ejecutar con perfil de administrador (root).En otras distribuciones de Linux normalmente el comando sería “sudo”. Por otrolado, como en este caso el ejecutable hay que interpretarlo como código python (.py),hay que añadir el comando para que sea interpretado como código python.

3. Al finalizar, se pulsa “Guardar” y ya tendremos el lanzador en la barra de tareas.

Se requiere nivel medio casi avanzado para proceder a la instalación y configuración de XAMPP yaque hay que conocer la estructura de carpetas de un servidor y sus ficheros de configuración.

102

Page 105: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

D. INSTALACIÓN DEL GESTOR DE CONTENIDOS, DRUPAL.

Archivo descargado: drupal-7.12.tar.gz

Paquete de idioma Español: drupal-7.11.es.po

En este punto se detallan los pasos para instalar Drupal en nuestro servidor Xampp. Altratarse de un Gestor de Contenidos, se necesita tener acceso a una base de datos para crear laspropias tablas que Drupal necesita para gestionar el alojamiento y administración del sitio web.

Los pasos a seguir son:

1. Crear la base de datos con Phpmyadmin.

1.1. Teclear en el navegador:

http://localhost/phpmyadmin

1.2. En la pestaña “Bases de Datos” --> Crear nueva base de datos, asignar unnombre y presionar "Crear". (Véase Figura 110).

Para este proyecto, se utiliza el nombre "Proyecto" y el tipo decotejamiento “utf8_general_ci”.

Figura 110: Creación base de datos con phpmyadmin.

103

Page 106: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

2. Crear y asignar un usuario a la base de datos.

2.1. Hacer clic en la pestaña “Privilegios” y "Agregar un nuevo usuario".

2.2. Hacer clic en la pestaña “Privilegios” y seleccionar “Editar privilegios delusuario creado”. (Véase Figura 111 y 112).

Figura 111: Lista de usuarios en phpmyadmin.

Figura 112: Creación de nuevo usuario en phpmyadmin.

• Nombre del usuario: lmalfonso

• Servidor: Seleccionar "localhost"

• Contraseña: Insertar contraseña

Una vez agregado el nuevo usuario, se enlaza este usuario con la base de datos creada.

104

Page 107: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

2.3. Hacer clic en la pestaña “Privilegios” y seleccionar “Editar los privilegios” delusuario creado. (Véase Figura 113).

Figura 113: Usuario ya creado en phpmyadmin.

• Buscar en la zona de privilegios específicos para la base de datos. (Véase Figura 114).

Figura 114: Privilegios específicos para la base de datos.

105

Page 108: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

• Se observa que no hay privilegios para las bases de datos creadas en elservidor, para ello, seleccionar en "Privilegios específicos para la tabla" elnombre de la base de datos que se creó anteriormente, en mi caso, "Proyecto".(Véase Figura 115).

Figura 115: Privilegios específicos para la base de datos “Proyecto”.

• Seleccionar la opción "Marcar todos/as".

De esta forma, ya se tendría el usuario asociado a la base de datos “Proyecto” contodos los permisos asignados y que utilizará el Gestor de Contenidos - Drupal pararellenar los datos necesarios a la vez que se vaya implementando el entorno web.

3. Alojamiento del sistema de carpetas en el servidor.

3.1. Descomprimir al archivo de Drupal.

$> sudo tar -xzf drupal-712.tar.gz -C /opt/lampp/htdocs

//Descomprime e introduce el contenido en la carpeta correspondiente del servidor.

$> sudo mv /opt/lampp/htdocs/drupal-7.12 /opt/lampp/htdocs/Proyecto

//Renombra la carpeta con el nombre de nuestro proyecto, en mi caso, “Proyecto”.

3.2. Copiar el archivo del idioma.

$> sudo cp drupal-7.11.es.po /opt/lampp/htdocs/Proyecto/profiles/standard/translations/

//Copia el paquete de idioma Español en su respectiva carpeta del directorio de Drupal.

Ahora es tiempo de modificar los permisos para que Drupal pueda gestionar su directorio.

106

Page 109: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

3.3. Permisos.

$> sudo cp /opt/lampp/htdocs/Proyecto/sites/default/default.settings.php /opt/lampp/htdocs/Proyecto/sites/default/settings.php

//Hace una copia del archivo “defaultsettings.php” y renombra a “settings.php”.

$> sudo chmod 777 /opt/lampp/htdocs/Proyecto/sites/default/settings.php

//Da permisos necesarios para que Drupal pueda modificarlo durante la instalación.

$>sudo mkdir /opt/lampp/htdocs/Proyecto/sites/default/files

//Crea la carpeta donde el sistema guardará los ficheros de configuración.

$>sudo chmod 777 /opt/lampp/htdocs/Proyecto/sites/default/files

//Da permisos necesarios para que Drupal pueda realizar las acciones necesarias durante la instalación.

El gestor de contenidos está preparado para realizar la instalación gráficamente.

4. Instalación de Drupal 7.

4.1. Teclear en el navegador:

http://localhost/Proyecto

Figura 116: Pantalla inicial de instalación de Drupal.

4.2. Seleccionar "Standard" y hacer clic en "Save and continue". (Véase Figura116).

107

Page 110: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

4.3. Seleccionar el idioma español y hacer clic en "Save and continue". (VéaseFigura 117).

Figura 117: Elección de idioma de Drupal.

4.4. Configuración de la base de datos. (Véase Figura 118).

Figura 118: Configuración de la base de datos para Drupal.

• Tipo de base de datos: MySQL.

• Nombre de la base de datos: Proyecto. (Base de datos creada anteriormente)

• Nombre de usuario de la base de datos: lmalfonso. (usuario asignado a la BD)

• Contraseña: Contraseña respectiva del usuario anterior.

108

Page 111: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

4.5. Comienza la instalación. (Véase Figura 119).

Figura 119: Inicio instalación de Drupal.

4.6. Configuración del sitio. (Véase Figura 120).

Figura 120: Configuración del sitio a desarrollar en Drupal.

• Nombre del sitio web: Cualquier nombre, en mi caso, “Proyecto US”.

• Correo electrónico del sitio: Correo electrónico del usuario administrador.

109

Page 112: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

4.7. Información del sitio. (Véase Figura 121).

Figura 121: Cuenta de mantenimiento del sitio.

• Nombre del usuario: Usuario administrador de Drupal, “lmalfonso”.

• Dirección de correo electrónico: Correo electrónico del usuario anterior.

• Contraseña: Contraseña para el usuario.

• Confirmar la contraseña: Contraseña para el usuario.

110

Page 113: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

4.8. Ajuste del servidor: (Véase Figura 122).

Figura 122: Configuración del Servidor.

• País predefinido: Seleccionar “España”.

• Zona horaria predefinida: Zona horaria “Madrid”.

• Avisos de Actualización: Marcar la opción de actualizaciones.

4.9. Finalización de la instalación de Drupal. (Véase Figura 123).

Figura 123: Pantalla de finalización de la instalación de Drupal.

111

Page 114: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

4.10. Al pulsar en "Visite su nuevo sitio" se vincula a la página principal de Drupal.(Véase Figura 124).

Figura 124: Página principal de Drupal.

4.11. Modificación de los permisos una vez instalado.

$> sudo chmod a-w /opt/lampp/htdocs/Proyecto/sites/default/settings.php

//Eliminación de permiso de escritura al archivo “settings.php”.

Como se ha podido observar en los pasos anteriores, para poder instalar y configuraradecuadamente el gestor de contenidos Drupal es necesario que el usuario tenga buenosconocimientos informáticos y conozca algo de programación ya que ha de teclear código para podermoverse por el Sistema Operativo, por lo que, lo ideal es que el usuario sea de tipo nivel medio.

112

Page 115: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

E. ACTUALIZACIÓN DEL NÚCLEO DE DRUPAL

Archivo descargado: drupal-7.14.tar.gz

Paquete de idioma Español: drupal-7.13.es.po

A pesar de que Drupal contiene un módulo para realizar actualizaciones automáticas, notodas las actualizaciones se pueden llevar a cabo de esta forma. La actualización del núcleo deDrupal es una de ellas y, a continuación, se explican los pasos para realizar dicha tarea de formamanual:

1. Realizar una copia de seguridad de todos los archivos del sitio y de la base de datos.

2. Iniciar sesión en el sitio como usuario administrador número 1, es decir, el primer usuarioque fue creado durante el proceso de instalación del sitio.

3. Poner el sitio en modo mantenimiento.

Inicio – Administración – Configuración – Desarrollo – Modo de Mantenimiento

4. Cambiar todos los temas a “Garland”, tanto usuario como administración.

Inicio – Administración – Apariencia

5. Desactivar los módulo que no pertenecen al núcleo de Drupal.

Inicio – Administración – Módulos

Es posible que algunos módulos no se desactiven en la primera vez. Es debido a que otrosdependen de éste. Repetir el paso hasta que todos queden desactivados a excepción de losmódulos pertenecientes al núcleo.

6. Eliminar todos los archivos del antiguo núcleo y directorios.

7. Descargar la última versión de Drupal, descomprimirla y alojarla en el servidor web.

8. Dar permisos de escritura al archivo “settings.php” ubicado en:

Proyecto/sites/default.

9. Ejecutar el script de actualización y seguir los pasos indicados.

http://localhost/Proyecto/update.php

10. Añadir las modificaciones de los archivos centrales. Es decir, módulos y temas que seinstalaron en la versión anterior. Copiar las carpetas rescatadas de la versión anterior a lanueva:

Proyecto/sites/all/modules

Proyecto/sites/all/themes

11. Revisar el informe de estado para comprobar que todo está funcionando correctamente.

Inicio – Administración – Informes – Informe de estado

12. Quitar permisos de escritura al archivo “settings.php”.

113

Page 116: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

13. Quitar el modo mantenimiento.

14. Restaurar los temas utilizados.

Es necesario para la actualización del núcleo de Drupal un usuario con nivel medio ya queha de trabajar con código propio del Sistema Operativo Linux, permisos de usuarios, servidores weby bases de datos.

114

Page 117: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

F. DESARROLLO DE UN TEMA EN DRUPAL

El desarrollo de temas en Drupal contiene una estructura definida y se compone de lacombinación de una serie de archivos que se indican a continuación. Partes de un tema:

1. Archivo .info

Este fichero contiene las rutas de las hojas de estilo así como de los script del tema. Tambiénse encuentran definidas las regiones de un tema. Un tema varía en el número de regionesdisponibles y son las que permiten situar/distribuir el contenido del sitio. (Véase Figura125).

Figura 125: Regiones de un tema.

2. Archivos de plantilla tpl.php

Los comentarios, nodos, bloques y la página global son mostrados por los archivos deplantilla tpl.php. El nombre de estos archivos indican el elemento que controla, page.tpl.phpcontrola páginas básicas, node.tpl.php controla nodos. Algunos temas tienen archivos de estetipo para todo o casi todos los elementos, de no ser así, serán los módulos instalados paraese tipo de dato los encargados de representar la salida de dicho elemento. Estos archivos secomponen de código HTML y PHP para las partes dinámicas de la página. Son interesantesya que con un único archivo tpl.php se le puede dar estilo a varias páginas del sitio. (VéaseFigura 126).

115

Page 118: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

Figura 126: Tipos de archivos de plantilla.

3. Ficheros .js

Desarrollados para elementos dinámicos como campos de formularios, campos plegables,campos de calendario. Normalmente, se denominan script.js. Por otro lado, los móduloscontienen también archivos .js para sus widgets.

4. Archivos CSS

Definen el estilo que tomará cada valor de la plantilla. Cada tema trae su propia hoja deestilos. Normalmente, se denomina style.css. Cada módulo tiene también su hoja de estilos.En caso de conflicto entre la hoja de estilos de un módulo y la del tema, predomina la hojade estilos del tema. (Véase Figura 127).

Figura 127: Hojas de estilo.

5. Archivo template.php

Este archivo da la capacidad de redefinir la salida que Drupal trae por defecto y usarnuestros propios etiquetados personalizados. Da también la posibilidad de acceder a lasvariables que manejan los archivos .tpl.php y hacer que se comporten de un mododeterminado, añadiendo lógica y variables adicionales a los temas.

116

Page 119: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

El sistema de temas consiste en un motor encargado de las partes dinámicas de la página.Configura la estructura básica y presenta la plantilla de página completa con el contenido de lapágina actual de ella. Cada elemento de la página, el titulo, el logotipo, las regiones, los enlaces delmenú son representados por un tema. La forma de presentar el contenido a través del temaseleccionado en Drupal es muestra a continuación: (Véase Figura 128).

Figura 128: Presentación del contenido en Drupal.

Para desarrollar un tema en Drupal es necesario que el usuario conozca en profundidad loslenguajes de programación HTML, PHP y CSS, por lo que, el usuario ha de ser avanzado.

117

Page 120: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

G. PROBLEMAS DURANTE LA IMPLEMENTACIÓN

Durante la implementación del sitio web se tuvo que abordar algunos problemas queafectaron en mayor o menor medida al desarrollo normal del Proyecto y que se solventaron de lasiguiente forma:

1. Problemas con el tamaño MySQL.

La base de datos llegó a su límite máximo sin poder seguir cargando datos en ella. La forma de solventar el problema fue modificando el tamaño máximo de ésta en el fichero “my.cnf” ubicado en la ruta: /opt/lampp/etc/my.cnf

max_allowed_packet = 4M

//Se modifica a 4M en vez de 1M inicial.

2. Problemas con módulo Internacionalización (i18n).

El tema utilizado durante el desarrollo del Proyecto no contenía el código necesario paraacoger los bloques de módulo i18n. La forma de solventar el problema fue añadiendo dichocódigo en el archivo “page.tpl.php” del tema creado.

/Proyecto/sites/all/themes/professional_theme/templates/page.tpl.php:

<?php

if (module_exists('i18n_menu')) {

$main_menu_tree = i18n_menu_translated_tree(variable_get('menu_main_links_source', 'main-menu'));

} else {

$main_menu_tree = menu_tree(variable_get('menu_main_links_source', 'main-menu'));

}

print drupal_render($main_menu_tree);

?>

3. Molestos mensajes de Actualización.

Al tener que realizar la actualización del núcleo de Drupal de forma manual, el módulo deactualización ejecuta molestos mensajes informando de una actualización disponible alencontrarla. La forma de solventar el problema fue desmarcando el check de búsqueda deactualizaciones automáticas.

118

Page 121: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

119

Page 122: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

120

Page 123: Diseño, evaluación e implementación de un sitio web a ...bibing.us.es/proyectos/abreproy/12155/fichero/Memoria.pdf · necesidades del desarrollador. En concreto se desea comprobar

BIBLIOGRAFÍA

– Servidor web Apache: http://www.apache.org/

– Servidor de Bases de Datos: http://www.mysql.com/

– Servidor completo XAMPP: http://www.apachefriends.org/es/xampp.html

– Lenguaje de Programación utilizado: http://www.php.net/

– Sistema Operativo Fedora: http://fedoraproject.org/es/

– Gestor de Contenidos Drupal: http://drupal.org.es/

– Software de desarrollo Eclipse: http://www.eclipse.org/

– Using Drupal, Angela Byron, Adison Berry, Nathan Haug, Jeff Eaton, O'reilly, 2009.

– Desarrollo web con PHP y MySQL, Luke Welling, Laura Thomson, Anaya, 2005.

– CMSmatch: http://www.cmsmatch.com/

– Premios Packt Publishing: http://www.packpub.com/award/

– Comunidad de usuarios de Drupal: http://groups.drupal.org/

– Información sobre módulos de Drupal: http://drupalmodules.com/

– Información sobre la API de Drupal: http://api.drupal.org/

– Leveraging Drupal, Getting Your Site Done Right, Victor Kane, Wrox, 2009.

– La biblia MySQL, Paul Dubois, Anaya Multimedia, 2009.

– Ubercart: http://www.ubercart.org/

– La biblia del servidor Apache 2, Mohammed K¡J Kabir, Anaya Multimedia, 2003.

– Cracking Drupal, A Drop in the Bucket, Gregg James Knaddison, Wiley, 2009.

– Drupal 7, Todd Tomlinson, Anaya Multimedia, 2011.

121