Theming En Drupal
Upcoming SlideShare
Loading in...5
×
 

Theming En Drupal

on

  • 6,864 views

Get the basics on Theming for Drupal easy and fast with this presentation. ...

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

Statistics

Views

Total Views
6,864
Views on SlideShare
6,251
Embed Views
613

Actions

Likes
1
Downloads
193
Comments
1

9 Embeds 613

http://static.slidesharecdn.com 209
http://www.isegura.es 142
http://www.webmastergranada.es 136
http://www.pensamientosdivergentes.net 86
http://www.slideshare.net 34
https://twitter.com 3
http://isegura.es 1
http://www.linkedin.com 1
http://www.pinterest.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Theming En Drupal Theming En Drupal Presentation Transcript

  • 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 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 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.
  • ¿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? 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.
  • ¿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) ● 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>
  • 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.
  • 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>
  • 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 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?
  • ¿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 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...
  • Una plantilla para cada cosa Tenemos un fichero para cada elemento. Esto es Garland, el tema por defecto de Drupal
  • Una plantilla para cada cosa Pero “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 .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.
  • 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.
  • 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 llamada “noticias” two-sidebars: tenemos bloques en dos columnas distintas.
  • 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ú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.
  • 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.
  • 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á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
  • 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 buscamos Ejemplo real, con plantillas reales y más específicas. Tema Deportiva
  • 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
  • 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 como aparece 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 para nuestro 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 para nuestro 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.es nacho@isegura.es