Contratos y presupuestos en proyectos Drupal - Drupal Camp Spain 2014
Theming En Drupal
Click here to load reader
-
Upload
ignacio-segura -
Category
Technology
-
view
5.589 -
download
0
description
Transcript of Theming En Drupal
![Page 1: Theming En Drupal](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/1.jpg)
Construcción de diseños para Drupal
www.drupal.org
Ignacio Segurawww.isegura.es
![Page 2: Theming En Drupal](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/2.jpg)
¿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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/3.jpg)
¿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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/4.jpg)
¿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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/5.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/6.jpg)
¿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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/7.jpg)
¿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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/8.jpg)
¿Qué hace falta?Lo de siempre...
(X)HTMLCSS
un poco de PHP
![Page 9: Theming En Drupal](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/9.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/10.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/11.jpg)
<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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/12.jpg)
Bajar un tema
Existen temas gratuitos que puedes usar libremente en:
www.drupal.org/project/themes
![Page 13: Theming En Drupal](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/13.jpg)
Dónde instalar un tema*
* En Drupal, Tema = Diseño.
Copia la carpeta con el tema, descomprimido, en: /themes
![Page 14: Theming En Drupal](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/14.jpg)
Activar el diseño recién instalado
Mostrar con sitio demo
![Page 15: Theming En Drupal](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/15.jpg)
Configurar el diseño
![Page 16: Theming En Drupal](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/16.jpg)
Configurar el diseño
![Page 17: Theming En Drupal](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/17.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/18.jpg)
¿Como se llaman...?¿Cómo se llaman todas esas cosas que veo en pantalla?
![Page 19: Theming En Drupal](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/19.jpg)
Bloque (cabecera)Menú primario
¿Como se llaman...?
![Page 20: Theming En Drupal](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/20.jpg)
Bloque(columna derecha)
¿Como se llaman...?
![Page 21: Theming En Drupal](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/21.jpg)
Nodo(de tipo página)
¿Como se llaman...?
![Page 22: Theming En Drupal](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/22.jpg)
Nodo(de tipo “Presentación científica”)
¿Como se llaman...?
![Page 23: Theming En Drupal](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/23.jpg)
¡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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/24.jpg)
Una plantilla para cada cosaTenemos un fichero para cada elemento.
Esto es Garland, el tema por defecto de Drupal
![Page 25: Theming En Drupal](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/25.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/26.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/27.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/28.jpg)
El fichero .INFO
![Page 29: Theming En Drupal](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/29.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/30.jpg)
CSSDrupal nos da mucha (¿demasiada?) información:
![Page 31: Theming En Drupal](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/31.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/32.jpg)
CSS
Esto nos dice:
block: contiene un bloqueblock-block-3: es el bloque número 3
![Page 33: Theming En Drupal](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/33.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/34.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/35.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/36.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/37.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/38.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/39.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/40.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/41.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/42.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/43.jpg)
Encontrar lo que buscamosEjemplo real, con plantillas reales y más específicas.
Tema Deportiva
![Page 44: Theming En Drupal](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/44.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/45.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/46.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/47.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/48.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/49.jpg)
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](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/50.jpg)
Pero esto es una función()
Refrescamos la caché de Drupal (sí, para esto también).
![Page 51: Theming En Drupal](https://reader037.fdocuments.es/reader037/viewer/2022100304/5566a137d8b42acd288b4aec/html5/thumbnails/51.jpg)
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.