theming en drupal

52

Click here to load reader

Upload: ignacio-segura

Post on 28-May-2015

5.588 views

Category:

Technology


0 download

DESCRIPTION

Get the basics on Theming for Drupal easy and fast with this presentation. Video (en español) sobre la conferencia aquí: http://www.isegura.es/es/blog/video-con-la-conferencia-sobre-theming-en-drupal

TRANSCRIPT

Page 1: Theming En Drupal

Construcción de diseños para Drupal

www.drupal.org

Ignacio Segurawww.isegura.es

Page 2: Theming En Drupal

¿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.

Page 3: Theming En Drupal

¿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

Page 4: Theming En Drupal

¿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.

Page 5: Theming 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

Page 6: Theming En Drupal

¿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”).

Page 7: Theming En Drupal

¿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.

Page 8: Theming En Drupal

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

(X)HTMLCSS

un poco de PHP

Page 9: Theming En Drupal

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>

Page 10: Theming En Drupal

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)

Page 11: Theming En Drupal

<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)

Page 12: Theming En Drupal

Bajar un tema

Existen temas gratuitos que puedes usar libremente en:

www.drupal.org/project/themes

Page 13: Theming En Drupal

Dónde instalar un tema*

* En Drupal, Tema = Diseño.

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

Page 14: Theming En Drupal

Activar el diseño recién instalado

Mostrar con sitio demo

Page 15: Theming En Drupal

Configurar el diseño

Page 16: Theming En Drupal

Configurar el diseño

Page 17: Theming En Drupal

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.

Page 18: Theming En Drupal

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

Page 19: Theming En Drupal

Bloque (cabecera)Menú primario

¿Como se llaman...?

Page 20: Theming En Drupal

Bloque(columna derecha)

¿Como se llaman...?

Page 21: Theming En Drupal

Nodo(de tipo página)

¿Como se llaman...?

Page 22: Theming En Drupal

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

¿Como se llaman...?

Page 23: Theming En Drupal

¡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...

Page 24: Theming En Drupal

Una plantilla para cada cosaTenemos un fichero para cada elemento.

Esto es Garland, el tema por defecto de Drupal

Page 25: Theming En Drupal

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

Page 26: Theming En Drupal

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.

Page 27: Theming En Drupal

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.

Page 28: Theming En Drupal

El fichero .INFO

Page 29: Theming En Drupal

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.

Page 30: Theming En Drupal

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

Page 31: Theming En Drupal

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.

Page 32: Theming En Drupal

CSS

Esto nos dice:

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

Page 33: Theming En Drupal

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

Page 34: Theming En Drupal

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

Page 35: Theming En Drupal

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.

Page 36: Theming En Drupal

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)

Page 37: Theming En Drupal

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.

Page 38: Theming En Drupal

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í”

Page 39: Theming En Drupal

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

Page 40: Theming En Drupal

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

Page 41: Theming En Drupal

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.

Page 42: Theming En Drupal

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

Page 43: Theming En Drupal

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

Tema Deportiva

Page 44: Theming En Drupal

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

Page 45: Theming En Drupal

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.

Page 46: Theming En Drupal

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.

Page 47: Theming En Drupal

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...

Page 48: Theming En Drupal

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.

Page 49: Theming En Drupal

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.

Page 50: Theming En Drupal

Pero esto es una función()

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

Page 51: Theming En Drupal

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.

Page 52: Theming En Drupal

Muchas gracias.

www.drupal.org

[email protected]