Cocomore AG

Drupal

Una introducción a Drupal 7: site building, theming y desarrollo de módulos

By Christian López Espínola @penyaskito (Cocomore AG)

whoami

Christian López - @penyaskito

Desarrollo Software @ Cocomore AG

Agencia de comunicación y TI

(Frankfurt am Main, Sevilla, Pune y Ginebra)


We're hiring!

Introducción

  • Drupal es un gestor de contenidos (CMS).
  • Pero también es un Framework de desarrollo (CMF).

CMS

A Content Management System (CMS) is a computer program that allows publishing, editing and modifying content as well as maintenance from a central interface. Such systems of content management provide procedures to manage workflow in a collaborative environment. These procedures can be manual steps or an automated cascade.

Source: Wikipedia

CMF

A content management framework (CMF) is a system that facilitates the use of reusable components or customized software for managing web content. It shares aspects of a web application framework and a content management system (CMS).

Source: Wikipedia

Arquitectura

  • Entidades
    • Nodos
    • Usuarios
    • Términos de taxonomía
    • Comentarios
    • ...
  • Menús
  • Taxonomías
  • Control de acceso: roles y permisos
  • Bloques
  • Módulos
  • Temas

Nodos?

Los nodos son los contenidos principales del sitio o aplicación web. Puedes crearlos editarlos, eliminarlos y configurar cómo se muestran. Normalmente se muestran como páginas de tu sitio web, e incluyen un título, metadatos (autor, fecha de creación, tipo de contenido...), y campos opcionales que contienen texto u otros datos.

Los tipos de contenido son las entidades abstractas que queremos representar en nuestro sitio web y que se diferencian entre ellas. Tendrán distinta configuración, distintos campos...

Instalación y configuración de Drupal

Descarga:

http://drupal.org/projects/drupal


cd /var/www
sudo wget http://ftp.drupal.org/files/projects/drupal-7.22.tar.gz
sudo tar xvf drupal-7.22.tar.gz
sudo mv drupal-7.22 drupal
    

Permisos:

La carpeta sites/default/files debe tener permisos de escritura por el servidor web siempre.


cd /var/www/drupal
sudo chown www-data:www-data sites/default/files
    

El archivo sites/default/settings.php debe tener permisos de escritura durante la instalación.


sudo chmod o+w sites/default/
sudo chmod o-w sites/default/
    

Crear usuario de base de datos y base de datos:

En phpmyadmin: http://localhost/phpmyadmin, crear usuario drupal y base de datos drupal.

O en consola:


CREATE DATABASE 'drupal';
CREATE USER 'drupal'@'localhost' IDENTIFIED BY 'drupal';
GRANT ALL PRIVILEGES ON drupal.* TO 'drupal'@'localhost';
FLUSH PRIVILEGES;
    

Acceder al instalador:

En el navegador: http://localhost/drupal.

Nuestro sitio debería estar activo.

Comprobar el estado: http://localhost/drupal/?q=admin/reports/status

Vaya urls más feas...

Activar mod_rewrite.


sudo a2enmod rewrite
    
Editar /etc/apache2/sites-available/default:

<Directory /var/www/>
	Options Indexes FollowSymLinks MultiViews
	AllowOverride All
	Order allow,deny
	allow from all
</Directory>
    

Comprobar: http://localhost/drupal/?q=admin/config/search/clean-urls.

Un paseo por la administración:

  • Contenidos.
  • Estructura.
  • Temas.
  • Cron.
  • Módulos.

Creación de un tipo de contenido

Distribución de directorios

  • sites/all
    • sites/all/modules
      • sites/all/modules/contrib
      • sites/all/modules/custom
    • sites/all/themes
      • sites/all/themes/contrib
      • sites/all/themes/custom

Urls limpias...

El módulo pathauto permite asignar patrones para la creación de rutas.

Vamos a asignar un patrón a un tipo de contenido.

Views

El módulo views permite crear listados.

Vamos a ver algún ejemplo.

Drush

Drush es una herramienta de consola para agilizar el trabajo.

Comandos para realizar operaciones sin esperar recargas de página.

Instalación de Drush con pear


sudo apt-get install php-pear
sudo pear channel-discover pear.drush.org
sudo pear install drush/drush
    

drush cc all

Creación de un tema

Estructura

Creamos el directorio sites/all/themes/custom/sugus y los subdirectorios css, js y templates.

Definición de nuestro tema

Creamos el archivo sugus.info:


  name = Sugus
  description = Tema para sugus
  core = 7.x

  stylesheets[all][] = css/sugus.css
    

Nuestro primer css

Creamos el archivo css/sugus.css:


body {
  background: #ddd9e4;
  background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #ddd9e4 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4));
  background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
  background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
  background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
  background: radial-gradient(center, circle cover, #f7fbfc 0%, #ddd9e4 100%);
  background-color: #f7fbfc; 
}
    

Reutilizando temas...

Editamos el archivo sugus.info:


name = Sugus
description = Tema para sugus
core = 7.x

base theme = stark

stylesheets[all][] = css/sugus.css
    

Starting themes

Listado de temas...

Son como religiones: vim vs emacs.

Recomendación: basados en grid.

Adaptive Theme

Tema Adaptive Theme

Tema preparado para distintos dispositivos.

Configuración de Layouts.

Nos centramos en modificaciones de guía de estilos, no de layouts.

Desaparecen la mayor parte de problemas de navegadores

CSS y JS no es suficiente...

  • Sobreescribir templates.

    Por defecto los templates se buscan en el raíz del tema.

  • Sobreescribir functiones theme.

    Listado de theme function overrides.

  • Preprocess functions

    Documentación función theme().

Se definen en el archivo template.php.

Templates básicos

Están definidos en los distintos módulos. Se pueden sobreescribir en el tema.

Los principales están en modules/system/:

  • html.tpl.php
  • page.tpl.php
  • node.tpl.php
  • comment.tpl.php
  • maintenance-page.tpl.php

Editando los templates

  • Copiamos el template que vayamos a editar en la carpeta sites/all/themes/custom/sugus/templates.
  • A editar!
  • Limpiar cache!

Nuevas regiones

  • Ojo: si usamos un tema base debemos copiar sus regiones si vamos a definir alguna.
  • Editamos nuestro sites/all/themes/custom/sugus/sugus.info:
    
    regions[top] = Top Bar
        
  • Editamos el page.tpl.php:
    
    <div id="top">
    <?php if (isset($page['top'])): ?>
    <?php print render($page['top']); ?>
    <?php endif; ?>
    </div>
        
  • Si vamos a la gestión de bloques, podremos añadir bloques en esta región.

Theme function overrides

<php
function sugus_menu_link(&$variables) {
  $element = $variables['element'];
  $element['#attributes']['class'][] = _sugus_generate_class_name($element['#title']);

  $sub_menu = '';

  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }
  $output = l($element['#title'], $element['#href'], 
    $element['#localized_options']);

  return ''
   . $output . $sub_menu . "\n";
}

function _sugus_generate_class_name($human_readable) {
  $machine_readable = strtolower($human_readable);
  $machine_readable = preg_replace('@[^a-z0-9_]+@','_', 
      $machine_readable);
  return $machine_readable;
}
?>
    
 
li.add_content a {
  color:red;
}

Preprocess functions


function sugus_preprocess_username(&$variables) {
  unset($variables['link_path']);
  unset($variables['attributes_array']['about']);
}
    

Desarrollo de un módulo

HOOKS

  • El sistema de módulos en Drupal 7 se basa en el concepto de hooks.
  • Son funciones que siguen una nomenclatura estándar: modulo_funcion.
  • Ejemplo: hook_block_info.
  • Para extenderlo, necesitamos implementarlos en nuestros módulos.
  • Listado de hooks

Estructura

Creamos el directorio sites/all/modules/custom/cusl_evaluacion.

Definición de nuestro módulo

Creamos el archivo cusl_evaluacion.info:


  name = CUSL Proyectos
  description = Evaluacion de proyectos para el CUSL. 
  core = 7.x

  dependencies[] = system

  files[] = cusl_evaluacion.admin.inc
  files[] = cusl_evaluacion.pages.inc

    

Implementación de hooks

Creamos el archivo cusl_evaluacion.module:


<?php

function cusl_evaluacion_block_info() {
  $items = array();
  $items['hello_world'] = array(
    'info' => t('Prints hello world.'),
    'cache' => DRUPAL_NO_CACHE,
  );
  return $items;
}

function cusl_evaluacion_block_view($delta = '') {
  $block = array();
  switch($delta) {
    case 'hello_world':
      $block['subject'] = t('Hello world');
      $block['content'] = array(
        '#markup' => t('Hello world from my first Drupal module!'),
      );
      break;
  }
  return $block;
}
    

Drupal

Una introducción a Drupal 7: site building, theming y desarrollo de módulos

By Christian López Espínola @penyaskito (Cocomore AG)
Mail: penyaskito@computer.org
Twitter: @penyaskito

http://drupal.org/project/drupal

Presentation created with reveal.js

Drupal logo