Taller de Drupal:Construye rápidamente un

sitio web con Drupal 6

www.drupal.org

Ignacio Segura

www.isegura.es

Qué es Drupal

es un CMS (y a mucha honra)

CMS (Content Management System) es una herramienta que permite construir un sitio web y modificar el contenido posteriormente desde el propio navegador.

Es software libre y utiliza PHP + MySQL para funcionar.

Qué es Drupal Drupal es de propósito general

Existen cientos de CMS, libres y de pago. Algunos tienen propósitos específicos:

OpenRealty: portal inmobiliarioMagento: Comercio ElectrónicoMoodle: E-learning

Drupal no tiene un propósito concreto, se supone que debemos adaptar Drupal a nuestros objetivos.

Qué es Drupal ¿Cómo adaptamos Drupal a nuestro propósito?

Como en otros CMS, instalamos y configuramos módulos para darle la forma que queremos.

Si eso no basta, construimos nuestros propios módulos.

Pero...

Qué es Drupal Drupal = LEGO

Con LEGO, necesitas muchas piezas para construir una sola cosa, pero ésta tiene exactamente la forma que queremos.

En Drupal, los módulos a menudo son piezas pequeñas que no hacen gran cosa por sí solas. Necesitamos combinar varios para darle al sitio web la forma que queremos.

El sitio funcionará exactamente como queremos, pero a costa de de invertir más tiempo y conocimiento por nuestra parte.

Qué es Drupal Ejemplo de LEGO

Otros sistemas > Instalamos un módulo de galería de fotos. Si te gusta cómo funciona, bien, y si no, a trastear el módulo.

Drupal > Instalamos CCK, Filefield, Imagefield, creamos un nuevo tipo de contenido (foto), lo configuramos, instalamos ImageAPI e ImageCache, configuramos ImageCache, instalamos Views, creamos las vistas de galería de fotos.La galería funciona exactamente como queremos, eso sí.

Quiero una galería de fotos.

Qué es Drupal

Qué es Drupal Parece complicado. ¿Por qué molestarme?

Hay dos buenas razones para pringarse con esto.

1 – Para conseguir exactamente el sitio web que queremos (o que nos encargan).

2 – Porque queremos ser capaces de modificar con facilidad el funcionamiento de nuestro sitio web en el futuro, simplemente tocando o cambiando algunas piezas de nuestro LEGO.

Qué es Drupal

Montar un sitio

¿Cómo se monta este LEGO Drupal?

Paso 1: Definimos los tipos de contenido que queremos tener.

Paso 2: Activamos y configuramos los módulos correspondientes para hacerles funcionar como queremos.

Qué es Drupal

Montar un sitio

Proyecto: sitio web de un club deportivo

Vamos a construir un sitio web para un supuesto club deportivo.

Este ejercicio se basa en el sitio web del Voley Murcia (www.voleymurcia.es), que está hecho en una sola tarde.

Qué es Drupal

Montar un sitio

¿Qué necesitamos?

Página de presentación del club (Acerca de...)

Formulario de contacto

Ficha de cada equipo

Ficha de cada jugador/a

Noticias

Qué es Drupal

Montar un sitio

Instalar Drupal

Instalar Drupal

1 – Arrancar XAMPP

2 – Crear una base de datos para nuestro sitio

3 – Poner en marcha el script de instalación

4 – Especificar la base de datos(user: root, clave: [vacía])

5 – Crear la cuenta de Administrador (esta cuenta es especial)

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Presentación del club

Crear contenido -> Página

Definimos su ubicación en el menú.

Explicar qué son los ”primary links”

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Página de contacto

Activamos el módulo “contact”

Administración -> Construcción del sitio -> Módulos -> Activamos “Contact”

Ahora configuramos el módulo:

Administración -> Construcción del sitio -> Formulario de contacto

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Página de contacto

El formulario de contacto se puede configurar para que lo reciban varios destinatarios, o diferentes destinatarios según la categoría.

¿cómo lo metemos en el menú?El módulo de contacto también añade una opción de menú (de forma predefinida está desactivada) al bloque de navegación.

Construcción del sitio -> Menús -> Navegación -> editar (Contacto)

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Crear otros tipos de contenido: “equipo” y “jugador/a”

Nuestro sitio web tiene otros tipos de contenido que después vamos a querer personalizar: “equipo” y “jugador/a”.

Administración de contenido -> Tipos de contenido -> Añadir tipo de contenido

Una vez que habéis creado nuevos tipos de contenido, podéis ir a Crear contenido y meter jugadores y equipos.

Pero ¿dónde está la diferencia entre los tipos de contenido?

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Personalización

Personalizar los tipos de contenido

Activamos los módulos Content, Number, Text y Option Widgets del grupo “CCK”.

Administración -> Construcción del sitio -> Módulos

Volvemos a “tipos de contenido”.

Empezaremos personalizando “ jugador”.

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Personalización

Personalizar “jugador/a”

Nombre delnuevo campo

Nombre para la base de datos

Tipo de campo(número, texto...)

Elemento de formulario para meterle datos

(caja de texto, selector, checkboxes...)

Una vez relleno, arrastramos cogiendo por aquí y lo ponemos a la altura que queramos dentro de la lista de campos.

¡Luego hay que darle a “guardar”!

También podemos reutilizar campos que ya teníamos hechos para otros tipos de contenido.

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Personalización

¿Dónde está mi contenido?

Hemos personalizado el tipo de contenido “jugador”. Ahora podemos empezar a meter jugadores.

Pero no vamos a meter a cada jugador en el menú.

Como usuario: ya hablaremos de eso.

Como administrador: Administrar -> Administración de contenido -> Contenido

Entonces, ¿cómo los voya encontrar después?

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Personalización

Personalizar “equipo”

Podríamos poner una lista de los jugadores en el equipo, pero ¿qué gracia tiene?

¿No sería mejor vincular equipos y jugadores de alguna manera?

Equipo

Jugador

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Personalización

Node reference

Activamos el módulo “Node Reference”, del grupo CCK.

Tenemos un nuevo tipo de dato, una referencia a otro nodo.

¿Nodo?

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Personalización

Qué es un nodo

Un nodo es una “unidad de contenido”:

La página “acerca de” que hicimos al principio es un nodo.

Las fichas de jugador que hemos ido creando son nodos.

Las fichas de equipo, noticias ... que crearemos después son también nodos.

Todos los nodos almacenan por defecto esta información:

● Título● contenido● Autor● Fecha de creación

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Personalización

Metemos datos, pero ¿cómo se verán después?

Digamos que ya tenemos unos cuantos jugadores y un par de equipos. Además, hemos añadido algunos jugadores a los equipos.

Lo suyo sería que al ver la ficha de un equipo, salga la lista de jugadores, y al pinchar en uno, vaya a ese jugador.

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Personalización

¿Teaser? ¿Full node?

En Drupal hay dos tipos de vista de nodo: Teaser y Full Node. La idea de tener dos tipos de vista viene de los periódicos:

Teaser Full

click

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Personalización

¿Fotos?

¡No tiene fotos!

Los jugadores y los equipos deberían poder llevar fotos.

Hay que activar los siguientes módulos (del grupo CCK):

Filefield – Adjuntar archivos.Imagefield – Utiliza Filefield para adjuntar imágenes.

Ahora podemos crear campos de imagen en nuestro contenido:

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Personalización

¿Fotos?

¡Pero van a salir al tamaño que les...!

Lo ideal sería guardar las fotos originales, y luego sacarlas en pantalla al tamaño que nosotros queramos.

Instalar y activar ImageAPI e ImageCache (grupo ImageAPI). Activar también ImageCache UI.

Administrar > Construcción del sitio > ImageCache

Aquí creamos presets de procesamiento de imágenes. Cada preset que creamos especifica qué hacer con una imagen: reducirla, cortarla... El número de acciones disponibles se puede aumentar instalando el módulo ImageCache Actions

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Personalización

¿Fotos?

¡Pero van a salir al tamaño que les...!

Si ahora volvemos a la configuración de tipos de contenido, nuestros presets aparecen ahí.

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Personalización

¿Fotos?

Crear una vista

Crear una vista de todos los equipos

Activar el módulo Views y Views UI (grupo Views).

Administración > Construcción del sitio > Views

Views recopila una serie de nodos y sacarlos por la pantalla de la manera que nosotros queramos. Como lista, tabla, cuadrícula, etcétera. Además, nos permite sacar solamente los componentes del nodo que queramos: título, autor, fecha, etcétera.

El resultado puede ser una página, un bloque para meterlo dentro de otra página, o RSS.

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Personalización

¿Fotos?

Crear una vista

Esto es una vista de bloque

Esto es una vista de página

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Personalización

¿Fotos?

Crear una vista

Esto es una vista de bloque Esto es otra vista de bloque

Esto es un nodo

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Personalización

¿Fotos?

Crear una vista

Crear una vista de todos los equipos

Digamos que queremos crear una vista de nodos de tipo “equipo” y queremos colocarlos como cuadrícula (grid).

Todas las vistas tienen una configuración principal, y luego una serie de variantes: página, bloque, RSS.

Esto se ha planteado así para poder reutilizar vistas, y para poder cambiar los parámetros comunes de varias vistas cambiando sólo la principal.

Cuando queremos que un parámetro se coja de la principal, lo dejamos en “use default”. En caso contrario pulsamos en “override”.

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Personalización

¿Fotos?

Crear una vista

La vista de todos los equipos, terminada

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Personalización

¿Fotos?

Crear una vista

¿Cómo va a llegar el usuario a la lista de equipos?

Se puede especificar un enlace en el menú y una ruta para las vistas de tipo página.

En este ejemplo, se puede llegar a la vista mediante la ruta “/equipos”. Además, se ha añadido un botón al menú “primary links”.

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Personalización

¿Fotos?

Crear una vista

Cambiar la portada

Poner la vista “equipos” como portada

Nos vamos a:

Administrar > Configuración del sitio > Información del sitio

Donde pone “Página inicial predeterminada” especificamos la ruta a nuestra vista de página.

En esta sección se cambia también el nombre del sitio, el pie de todas las páginas, etcétera.

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Personalización

¿Fotos?

Crear una vista

Cambiar la portada

FIN

(hemos terminado)

Qué es Drupal

Montar un sitio

Instalar Drupal

Contenidos

Personalización

¿Fotos?

Crear una vista

Cambiar la portada

FIN

Gracias a todos por vuestra participación

Ignacio Segurawww.isegura.es

www.twitter.com/nachenko

www.webmastergranada.eswww.drupal.org