theming en drupal

Construcción de diseños para Drupal

www.drupal.org

Ignacio Segurawww.isegura.es

¿Qué es Drupal?

Drupal es un gestor de contenidos(CMS, Content Management System)

CMS: Una aplicación que, una vez instalada en un servidor, te permite construir y mantener un sitio web.

Drupal es un CMS de propósito general.(al contrario que Magento, Moodle u Openrealty)

Uno de los tres grandes (Wordpress y Joomla). Se tienen el mercado repartido.

¿Qué tal como CMS?

● Open Source ● Muy versátil (en datos y diseño)● Comunidad grande y activa.● Compromiso de calidad (incluso por encima de la compatibilidad)

● Muy complejo● Exige muchos recursos

¿Por qué todo esto?

Cuando empecé con Drupal tenía ya:

● Amplios conocimientos de HTML+CSS● 5 años de experiencia con otros sistemas: XOOPS, CMSimple, PostNuke.

Sin embargo, perdí mucho tiempo con Drupal porque no sabía cómo se llamaban las cosas y cómo se cambiaban en Drupal.

Objetivos

Que sepáis si vale la pena meterse en Drupal para un proyecto.Drupal tiene fama de difícil (y lo es)

Si decidís meteros, que sepáis qué hacer.

1

2

¿Por qué Drupal(como diseñador)?

Difícil de entender, pero infinitamente personalizable.

Podemos construir EXACTAMENTE el sitio que queremos.

Podemos construir exactamente el sitio que EL CLIENTE quiere (nótese lo de “exactamente”).

¿Vale la pena?

Sitio sencilloPor ejemplo, Blog

Sitio complejoPeriódico, comunidad virtual, la Casa Blanca.

Drupal tiene fama de difícil (y lo es)

Sitio sin planEl sitio puede crecer, pero todavía no se sabe hacia dónde, o el cliente no sabe lo que quiere.

¿Qué hace falta?Lo de siempre...

(X)HTMLCSS

un poco de PHP

Cambiar un diseño(en general)

Si sabes (X)HTML y CSS, puedes...

● Hacer un sitio web (estático)● Darle el aspecto que quieres.

<h1>La SGAE pide perdón</h1><div class=”content”>Ni de coña, qué va a pedir perdón. Te va a dar el sol mientras esperas que pida perdón por nada...</div>

Problema:¿Cómo darle el aspecto que queremos a un sitio que puede cambiar continuamente?

Respuesta:Una plantilla.

<h1>[Título aquí]</h1><div class=”content”>[contenido aquí]</div>

Todos los gestores de contenido funcionan así. Cambia el formato de las plantillas, pero no la idea.

Cambiar un diseño(en general)

<h2><?php print $title ?></h2>

<div class="content"> <?php print $content ?> </div>

Una plantilla de Drupal es básicamente PHP, muy organizado.

Cambiar un diseño(en Drupal)

Bajar un tema

Existen temas gratuitos que puedes usar libremente en:

www.drupal.org/project/themes

Dónde instalar un tema*

* En Drupal, Tema = Diseño.

Copia la carpeta con el tema, descomprimido, en: /themes

Activar el diseño recién instalado

Mostrar con sitio demo

Configurar el diseño

Configurar el diseño

Personalizar el diseño

Problema:Sabemos HTML y CSS. Podemos cambiar el diseño, pero no sabemos cómo se llama nada.

● No sabemos cómo se llaman los elementos que tenemos en nuestra página.● No sabemos dónde está nuestro CSS● No sabemos qué nombres usar para nuestro CSS● No sabemos con qué variables contamos.● No sabemos qué ficheros editar.

¿Como se llaman...?¿Cómo se llaman todas esas cosas que veo en pantalla?

Bloque (cabecera)Menú primario

¿Como se llaman...?

Bloque(columna derecha)

¿Como se llaman...?

Nodo(de tipo página)

¿Como se llaman...?

Nodo(de tipo “Presentación científica”)

¿Como se llaman...?

¡Paren máquinas!¿Qué es un nodo?

En Drupal, un nodo es cualquier cosa que publicamos, excepto:

● Un comentario● Un usuario● Un bloque● El formulario de contacto

Entonces:Una noticia es un nodoUna página es un nodoLa ficha de una asignatura es un nodoUn profesor es un nodoUna lista con diez noticias...

Una plantilla para cada cosaTenemos un fichero para cada elemento.

Esto es Garland, el tema por defecto de Drupal

Una plantilla para cada cosaPero “page.tpl.php” es diferente. Es la plantilla principal,todas las demás plantillas van dentro de ésta.

Personalizar el diseño (2)

Problema:Sabemos HTML y CSS y cómo se llaman las cosas, pero no sabemos dónde está nada.

● No sabemos cómo se llaman los elementos que tenemos en nuestra página.● No sabemos dónde está nuestro CSS● No sabemos qué nombres usar para nuestro CSS● No sabemos con qué variables contamos. No sabemos qué ficheros editar.

El fichero .INFODentro de la carpeta del tema, hay un fichero *.info, que contiene información para Drupal.

El fichero debe llamarse como la carpeta donde está el tema. En este ejemplo, deportiva.info

Lo más importante en este ejemplo es que especifica cómo se llaman los ficheros CSS que Drupal debe usar, y en qué orden cargarlos.

El fichero .INFO

Personalizar el diseño (3)

Problema:Sabemos HTML y CSS. No sabemos cómo es el HTML que genera Drupal. Podemos reescribir todas las plantillas y CSS, pero sería perder mucho tiempo.

● No sabemos cómo se llaman los elementos que tenemos en nuestra página.● No sabemos dónde está nuestro CSS● No sabemos qué nombres usar para nuestro CSS● No sabemos con qué variables contamos.● No sabemos qué ficheros editar.

CSSDrupal nos da mucha (¿demasiada?) información:

CSS

Esto nos dice:

front: estamos en portadalogged-in: estamos identificados

page-noticias: estamos en una vista llamada “noticias”two-sidebars: tenemos bloques en dos columnas distintas.

CSS

Esto nos dice:

block: contiene un bloqueblock-block-3: es el bloque número 3

CSS

Esto nos dice:

node: esto es un nodoteaser: estamos viendo sólo la primera parte del nodonode-294: es el nodo número 294

Cómo sé todo esto: Firebug para Firefox

Te lo instalas y punto.

Nadie que se dedique a esto puede trabajar sin

Firebug

Mostrar con sitio demo

Personalizar el diseño (4)

Problema:Sabemos HTML y CSS. Podemos cambiar el diseño, pero no sabemos cómo preguntar nada.

● No sabemos cómo se llaman los elementos que tenemos en nuestra página.● No sabemos dónde está nuestro CSS● No sabemos qué nombres usar para nuestro CSS● No sabemos con qué variables contamos.● No sabemos qué ficheros editar.

Fuente: http://drupal.org/node/226776

$idThe placement of the template. Each time the template is used, it is incremented by one.

base_path()Base URL of the site.

path_to_theme()The theme path relative to the base install. example: "sites/all/themes/myTheme"

$is_adminBoolean returns TRUE when the visitor is a site administrator.

$is_frontBoolean returns TRUE when viewing the front page of the site.

$logged_inBoolean returns TRUE when the visitor is a member of the site, logged in and authenticated.

$userThe user object containing data for the current visitor. Some of the data contained here may not be safe. Be sure to pass potentially dangerous strings through check_plain.

Variables útiles(están disponibles en cualquier plantilla)

Personalizar el diseño (5)

Problema:Podemos personalizar el CSS de todo, hasta el último elemento, pero no el HTML.

● No sabemos cómo se llaman los elementos que tenemos en nuestra página.● No sabemos dónde está nuestro CSS● No sabemos qué nombres usar para nuestro CSS● No sabemos con qué variables contamos.● No sabemos qué ficheros editar.

Personalizar el HTML

Problema:Ya sabemos que podemos escribir CSS específico para cualquier cosa, pero ¿y si tengo que cambiar también el HTML? ¿Y si tengo que hacer una plantilla específica para una zona de nuestro sitio?

¿Puedo hacer una plantilla para...

¡Sí!Da igual la pregunta, con Drupal la respuesta siempre es “sí”

Personalizar el HTML

¿Cómo?Creando plantillas con el nombre adecuado.Cuando Drupal carga las plantillas, se pregunta:

¿Existe una plantilla sólo para este nodo/bloque/usuario/loquesea?

¿Existe una plantilla para este tipo de nodo/bloque/loquesea?

Cojo la plantilla general

Personalizar el HTML

Ejemplo prácticoDrupal está a punto de sacar el nodo 42 (“receta de pollo al curry”) en pantalla:

¿Existe una plantilla para el nodo número 42?node-42.tpl.php

¿Existe una plantilla para el nodo tipo “receta”?node-receta.tpl.php

Cojo la plantilla generalnode.tpl.php

Encontrar lo que buscamos

¿Me tengo que aprender eso?

No.

¿Por qué?

Porque Drupal nos puede decir qué ficheros espera encontrar, y cuáles ha encontrado.

Encontrar lo que buscamos

Devel Theme Developer = Firebug para Drupal

Devel es un módulo para Drupal que nos ayuda a desarrollar nuestro módulo o diseño.

Devel theme developer es un componente de Devel, y me dice:

● Qué plantilla se está usando para cada cosa.● Qué variables tengo en cada plantilla.● Qué fichero podría usar para hacer una plantilla más específica.

Activar Devel en sitio demo

Encontrar lo que buscamosEjemplo real, con plantillas reales y más específicas.

Tema Deportiva

No parece enterarse...

Hemos creado una nueva plantilla y Drupalno parece darse por enterado...

● ¿Lo hemos guardado en la carpeta correcta?● ¿Tiene el nombre correcto?● ¿El nombre acaba en “.tpl.php”?● ¿Está guardado en el servidor?

Entonces, tenemos que refrescar la caché de Drupal*.

* Pero, ¿no puede hacerlo solito? Sí, pero gastaría más CPU si lo hiciera.

Refrescar caché en sitio demo

Pero esto es una función()

Algunas cosas no salen de plantillas, sino de funciones.

¿Cómo puedo cambiarlas?

¿Editamos el núcleo de Drupal? Después de todo, es software libre.

Pero esto es una función()Lo mismo que con las plantillas, si escribimos una función con el nombre adecuado, Drupal la cogerá y se saltará la que tiene por defecto.

Pero esto es una función()Al pinchar, nos aparece el código de la función, tal comoaparece en el centro de documentación de Drupal.

Copiamos...

Pero esto es una función()Abrimos el fichero template.php dentro de nuestro tema.En ese fichero meteremos todo el código PHP paranuestro tema.

Pero esto es una función()Abrimos el fichero template.php dentro de nuestro tema.En ese fichero meteremos todo el código PHP paranuestro tema.

Pegamos, pero cambiándole el nombre.

Pero esto es una función()

Refrescamos la caché de Drupal (sí, para esto también).

Resumiendo nuestras armas

Para personalizar el diseño contamos con:

● Ciertas variables y funciones siempre están disponibles.

● Drupal añade muchos nombres de clases e Ids a nuestro HTML (posiblemente demasiados), para que podamos referirnos a cualquier cosa desde CSS.

● Devel theme developer nos dice qué variables tenemos en cada plantilla y qué fichero cambiar.

Muchas gracias.

www.drupal.org

www.isegura.esnacho@isegura.es