Your SlideShare is downloading. ×
0
Construcción de
diseños para Drupal
     www.drupal.org



     Ignacio Segura
     www.isegura.es
¿Qué es Drupal?
Drupal es un gestor de contenidos
(CMS, Content Management System)

CMS: Una aplicación que, una vez
insta...
¿Qué tal como CMS?
● Open Source
● Muy versátil (en datos y diseño)

● Comunidad grande y activa.

● Compromiso de calidad...
¿Por qué todo esto?

Cuando empecé con Drupal tenía ya:

● Amplios conocimientos de HTML+CSS
● 5 años de experiencia con o...
Objetivos
    Que sepáis si vale la pena meterse
1   en Drupal para un proyecto.
    Drupal tiene fama de difícil (y lo es...
¿Por qué Drupal
   (como diseñador)?
Difícil de entender, pero infinitamente personalizable.




Podemos construir EXACTAM...
¿Vale la pena?
       Drupal tiene fama de difícil (y lo es)



Sitio sencillo
Por ejemplo, Blog


Sitio complejo
Periódic...
¿Qué hace falta?
   Lo de siempre...



    (X)HTML
      CSS

 un poco de PHP
Cambiar un diseño
                  (en general)



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

● Hacer un sitio web (estático)
● D...
Cambiar un diseño
                        (en general)


Problema:
¿Cómo darle el aspecto que queremos a un sitio que
pued...
Cambiar un diseño
                    (en Drupal)


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


       <...
Bajar un tema
Existen temas gratuitos que puedes usar
libremente en:

www.drupal.org/project/themes
Dónde instalar un tema*
Copia la carpeta con el tema, descomprimido, en: /themes




* En Drupal, Tema = Diseño.
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 ...
¿Como se llaman...?
¿Cómo se llaman todas esas cosas que veo en pantalla?
¿Como se llaman...?


    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”)
¡Paren máquinas!
         ¿Qué es un nodo?
En Drupal, un nodo es cualquier cosa que publicamos,
excepto:

●   Un comentari...
Una plantilla para cada cosa
   Tenemos un fichero para cada elemento.




           Esto es Garland, el tema por defecto...
Una plantilla para cada cosa
   Pero “page.tpl.php” es diferente. Es la plantilla principal,
   todas las demás plantillas...
Personalizar el diseño                            (2)


 Problema:
 Sabemos HTML y CSS y cómo se llaman las cosas, pero
 n...
El fichero .INFO
Dentro de la carpeta del tema, hay un fichero *.info, que
contiene información para Drupal.




El ficher...
El fichero .INFO
Personalizar el diseño                             (3)


 Problema:
 Sabemos HTML y CSS. No sabemos cómo es el HTML que
 g...
CSS
Drupal nos da mucha (¿demasiada?) información:
CSS


Esto nos dice:

front: estamos en portada
logged-in: estamos identificados

page-noticias: estamos en una vista llam...
CSS


Esto nos dice:

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


Esto nos dice:

node: esto es un nodo
teaser: estamos viendo sólo la primera parte del
nodo
node-294: es el nodo núm...
Cómo sé todo esto:
 Firebug para Firefox

Te lo instalas y punto.

Nadie que se dedique a
esto puede trabajar sin
       F...
Personalizar el diseño                            (4)


 Problema:
 Sabemos HTML y CSS. Podemos cambiar el diseño, pero
 n...
Variables útiles
           (están disponibles en cualquier plantilla)

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

$id
The pla...
Personalizar el diseño                  (5)


 Problema:
 Podemos personalizar el CSS de todo,
 hasta el último elemento, ...
Personalizar el HTML
Problema:
Ya sabemos que podemos escribir CSS específico para
cualquier cosa, pero ¿y si tengo que ca...
Personalizar el HTML
¿Cómo?
Creando plantillas con el nombre adecuado.
Cuando Drupal carga las plantillas, se pregunta:

 ...
Personalizar el HTML
Ejemplo práctico
Drupal está a punto de sacar el nodo 42 (“receta de
pollo al curry”) en pantalla:

 ...
Encontrar lo que buscamos
         ¿Me tengo que aprender eso?


                    No.

                   ¿Por qué?

  ...
Encontrar lo que buscamos
 Devel Theme Developer = Firebug para Drupal
 Devel es un módulo para Drupal que nos ayuda a
 de...
Encontrar lo que buscamos
 Ejemplo real, con plantillas reales y más específicas.




                                    ...
No parece enterarse...
Hemos creado una nueva plantilla y Drupal
no parece darse por enterado...

●   ¿Lo hemos guardado e...
Pero esto es una función()
Algunas cosas no salen de plantillas, sino de
funciones.
¿Cómo puedo cambiarlas?

¿Editamos el ...
Pero esto es una función()
Lo mismo que con las plantillas, si escribimos una función
con el nombre adecuado, Drupal la co...
Pero esto es una función()
Al pinchar, nos aparece el código de la función, tal como
aparece en el centro de documentación...
Pero esto es una función()
Abrimos el fichero template.php dentro de nuestro tema.
En ese fichero meteremos todo el código...
Pero esto es una función()
Abrimos el fichero template.php dentro de nuestro tema.
En ese fichero meteremos todo el código...
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
dis...
Muchas gracias.
   www.drupal.org

   www.isegura.es
  nacho@isegura.es
Upcoming SlideShare
Loading in...5
×

Theming En Drupal

5,611

Published on

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

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • Si un día te encuentro y eres chica seguro que te doy un beso cuando menos en la mejilla, si eres hombre mi eterna gratitud, no había manera de que explicarán esto en el sitio de drupal la mitad de bien que tu?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
5,611
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
210
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Theming En Drupal"

  1. 1. Construcción de diseños para Drupal www.drupal.org Ignacio Segura www.isegura.es
  2. 2. ¿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.
  3. 3. ¿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
  4. 4. ¿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.
  5. 5. Objetivos Que sepáis si vale la pena meterse 1 en Drupal para un proyecto. Drupal tiene fama de difícil (y lo es) Si decidís meteros, que sepáis qué 2 hacer.
  6. 6. ¿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”).
  7. 7. ¿Vale la pena? Drupal tiene fama de difícil (y lo es) Sitio sencillo Por ejemplo, Blog Sitio complejo Periódico, comunidad virtual, la Casa Blanca. Sitio sin plan El sitio puede crecer, pero todavía no se sabe hacia dónde, o el cliente no sabe lo que quiere.
  8. 8. ¿Qué hace falta? Lo de siempre... (X)HTML CSS un poco de PHP
  9. 9. 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>
  10. 10. Cambiar un diseño (en general) 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.
  11. 11. Cambiar un diseño (en Drupal) Una plantilla de Drupal es básicamente PHP, muy organizado. <h2><?php print $title ?></h2> <div class="content"> <?php print $content ?> </div>
  12. 12. Bajar un tema Existen temas gratuitos que puedes usar libremente en: www.drupal.org/project/themes
  13. 13. Dónde instalar un tema* Copia la carpeta con el tema, descomprimido, en: /themes * En Drupal, Tema = Diseño.
  14. 14. Activar el diseño recién instalado Mostrar con sitio demo
  15. 15. Configurar el diseño
  16. 16. Configurar el diseño
  17. 17. 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.
  18. 18. ¿Como se llaman...? ¿Cómo se llaman todas esas cosas que veo en pantalla?
  19. 19. ¿Como se llaman...? Bloque (cabecera) Menú primario
  20. 20. ¿Como se llaman...? Bloque (columna derecha)
  21. 21. ¿Como se llaman...? Nodo (de tipo página)
  22. 22. ¿Como se llaman...? Nodo (de tipo “Presentación científica”)
  23. 23. ¡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 nodo Una página es un nodo La ficha de una asignatura es un nodo Un profesor es un nodo Una lista con diez noticias...
  24. 24. Una plantilla para cada cosa Tenemos un fichero para cada elemento. Esto es Garland, el tema por defecto de Drupal
  25. 25. Una plantilla para cada cosa Pero “page.tpl.php” es diferente. Es la plantilla principal, todas las demás plantillas van dentro de ésta.
  26. 26. 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.
  27. 27. El fichero .INFO Dentro 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.
  28. 28. El fichero .INFO
  29. 29. 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.
  30. 30. CSS Drupal nos da mucha (¿demasiada?) información:
  31. 31. CSS Esto nos dice: front: estamos en portada logged-in: estamos identificados page-noticias: estamos en una vista llamada “noticias” two-sidebars: tenemos bloques en dos columnas distintas.
  32. 32. CSS Esto nos dice: block: contiene un bloque block-block-3: es el bloque número 3
  33. 33. CSS Esto nos dice: node: esto es un nodo teaser: estamos viendo sólo la primera parte del nodo node-294: es el nodo número 294
  34. 34. 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
  35. 35. 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.
  36. 36. Variables útiles (están disponibles en cualquier plantilla) Fuente: http://drupal.org/node/226776 $id The 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_admin Boolean returns TRUE when the visitor is a site administrator. $is_front Boolean returns TRUE when viewing the front page of the site. $logged_in Boolean returns TRUE when the visitor is a member of the site, logged in and authenticated. $user The 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.
  37. 37. 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.
  38. 38. 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í”
  39. 39. 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
  40. 40. Personalizar el HTML Ejemplo práctico Drupal 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 general node.tpl.php
  41. 41. 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.
  42. 42. 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
  43. 43. Encontrar lo que buscamos Ejemplo real, con plantillas reales y más específicas. Tema Deportiva
  44. 44. No parece enterarse... Hemos creado una nueva plantilla y Drupal no 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
  45. 45. 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.
  46. 46. 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.
  47. 47. Pero esto es una función() Al pinchar, nos aparece el código de la función, tal como aparece en el centro de documentación de Drupal. Copiamos...
  48. 48. Pero esto es una función() Abrimos el fichero template.php dentro de nuestro tema. En ese fichero meteremos todo el código PHP para nuestro tema.
  49. 49. Pero esto es una función() Abrimos el fichero template.php dentro de nuestro tema. En ese fichero meteremos todo el código PHP para nuestro tema. Pegamos, pero cambiándole el nombre.
  50. 50. Pero esto es una función() Refrescamos la caché de Drupal (sí, para esto también).
  51. 51. 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.
  52. 52. Muchas gracias. www.drupal.org www.isegura.es nacho@isegura.es
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×