Recorrido por la arquitectura actual de Drupal 7 y presentación de los cambios que se incorporarán en la próxima versión, Drupal 8. * Qué es Drupal. * Arquitectura Drupal 7. * Requisitos. * Arquitectura Drupal 8. * Ciclo de Vida de Drupal. * Fases de desarrollo. * Iniciativas en Drupal 8. * Gestion de la configuración. * Multiidiomas. * VDC. (Views in Core). * Web services * Mobile. * Layouts. * HTML5 * UX. * Symfony. * Componentes Symfony. * Twig

1. Drupal: Presente y Futuro
Una introducción a Drupal 8
Alfonso Heredia @hmalfonso

2. Drupal: Presente y Futuro.
Planning:
1. ¿ Qué es Drupal?
2. Arquitectura. Framework.
3. Iniciativas de desarrollo de Drupal 8.
4. Instalación de Drupal 8. (Demo)
5. Preguntas.
Alfonso Heredia

3. ¿ Qué es Drupal?
http://www.youtube.com/watch?v=26_OZeBmpXs
Video realizado por Thinküber
Alfonso Heredia

4. ¿ Qué es Drupal?
CMS
Crear
Organizar
Manipular
Información
CMF
Tools
API
Plantillas
Servicios
Alfonso Heredia

5. Arquitectura Drupal
Drupal
PHP
Apache IIS Nginx
OS
MySql
Postgre
MariaDB
Oracle
Sqlserver
Varnish
Apache
Solr
Alfonso Heredia

6. Arquitectura Drupal: Requisitos
Requisitos Drupal 7 Drupal 8
Php 5.2.5 (5.3) 5.3.10
DB MySql 5.0.15 (PDO). Postgre 8.3 (PDO).
WebServer Apache 2.x. Nginx 1.2.x . IIS (5,6,7)
Disk Space (core) 13 MB aprox. 40MB aprox.
Memory 32MB  ---
Alfonso Heredia

7. Arquitectura: En detalle (D7)
Tema
Sistema de plantillas
Form
Api
Menu
Api
Block
Api
Librería de funciones
L10n
Vistas
BD Api
Entity Api
Field Api
N
o
d
o
s
u
s
e
r
s
T
a
x
o
n
C
o
m
e
n
t
Módulos
(Core,Contribuidos, Propios)
Alfonso Heredia

8. Form
Api
Menu
Api
Block
Api
Librería de funciones BD Api
Entity Api
Field Api
Arquitectura: En detalle (D8)
Tema
Sistema de plantillas
Vistas
N
o
d
o
s
u
s
e
r
s
T
a
x
o
n
C
o
m
e
n
t
Módulos
(Core,Contribuidos, Propios)
Idiomas
Alfonso Heredia

9. Arquitectura: Un poquito de historia.
Version Core Mejoras
4.5 Page, Story Código
4.6 Page, Story Código
Flexinode
4.7 Page, Story CCK (Tipos de
datos, Campos)
5 y 6 Page, Story, Tipos
propios
CCK (Campos)
7 Tipos, campos
propios. Entity
Api
R.I.P. CCK
8 Extensión a
bloques.
++++
Alfonso Heredia

10. Drupal: Ciclo de vida.
http://buytaert.net/files/state-of-drupal-march-2012.pdf
Alfonso Heredia

11. Drupal: Ciclo de vida.
http://buytaert.net/files/state-of-drupal-march-2012.pdf
Alfonso Heredia

12. Drupal: Ciclo de vida
http://buytaert.net/files/state-of-drupal-march-2012.pdf
Alfonso Heredia

13. Drupal 8: Fases de desarrollo.
Alfonso Heredia

14. Drupal 8: Fases de desarrollo.
Alfonso Heredia

15. Drupal 8: Iniciativas
Mobile
HTML5
Multilingual
Cofiguration
Management
Web Services
Layouts
Views
D8
Alfonso Heredia

16. Drupal 8: Iniciativas (estado)
Alfonso Heredia

17. Drupal 8: Gestión de la configuración
Configuration Management
Director Greg Dunlap
Información http://groups.drupal.org/cmi
IRC #drupal-cmi
Alfonso Heredia

18. Drupal 8: Gestión de la configuración
Qué problemas intenta resolver ?
Angela Byron slides
• Configuración de Drupal residente en la BD.
• Solapamiento de contenido entre entornos.
Alfonso Heredia

19. Drupal 8: Gestión de la configuración
Qué problemas intenta resolver ?
Angela Byron slides
Alfonso Heredia

20. Drupal 8: Gestión de la configuración
Solución:
• Hagamos las Entidades realmente “únicas”. (UUID).
• Configuración almacenada en ficheros.
Bd
Staging
File Store
Active File
Store
Drupal
Dev
Bd
Staging
File Store
Active File
Store
Drupal
Live
Configuración ActualConfiguración a importar
Alfonso Heredia

21. Drupal 8: Gestión de la configuración
Solución:
• Ficheros de configuración en formato YAML. (prefix.example.yml)
• files/config_XXX/active y files/config_XXX/staging.
• Adiós variable_get() y variable_set().
• Cambiar todas las varibles para adaptarse a CMI.
• Entidades, Campos , Contenido, Ficheros…
// Load the site name out of configuration.
$config = config('core.site_information');
$site_name = $config->get('site_name');
// Change the site name to something else.
$config->set('site_name', 'My Awesome Site');
$config->save();
Alfonso Heredia

22. Drupal 8: Multiidiomas.
Multilingual
Director Gábor Hojsty
Información http://groups.drupal.org/i18n
IRC #drupal-i18n
Alfonso Heredia

23. Drupal 8: Multiidiomas.
Qué problemas intenta resolver ?
Angela Byron slides
• Muchos modulos (locale, content_translation, i18n, variables,title
• Traduzco contenido, entididades ? Que hago con los menus, taxonomias?
Alfonso Heredia

24. Drupal 8: Multiidiomas.
Solución:
• Algo similar a i18n pero en core. Traducción de interfaz y contenido.
• No más idiomas especiales (Inglés).
• L10n_update en core.
• Mejoras significativas del interfaz de usuario.
“Multilingual First”
Alfonso Heredia

25. Drupal 8: VDC.
Views in core
Director Earl Miles
Información
http://drupal.org/community-
initiatives/drupal-core/vdc-
roadmap
IRC #drupal-vdc
Alfonso Heredia

26. Drupal 8: VDC.
Ventajas:
• Consistencia: Todos los listados… hechos con vistas.
• Estabilidad: Ahora los bugs son tratados como bugs del
Core.
• Potencia: Drupal “out of the box” podrá hacer
infinitud de cosas más que antes.
• Y un largo etc...
Alfonso Heredia

27. Drupal 8: Web Services.
Web Services
Director Larry Garfield
Información http://groups.drupal.org/wscci
IRC #drupal-wscci
Alfonso Heredia

28. Drupal 8: Web Services.
Qué problemas intenta resolver ?
Angela Byron slides
• No todas las peticiones se devuelven en Html. Puede ser Json/Xml
• Mejorar la comunicación con otros sistemas , aplicaciones móbiles,
frameworks...
Alfonso Heredia

29. Drupal 8: Web Services.
Qué problemas intenta resolver ?
Angela Byron slides
Alfonso Heredia

30. Drupal 8: Web Services.
Solución:
• Convertir a Drupal en un servidor REST de primera clase.
• Incluyendo Services en Core y mejorándolo.
“Sistema de contexto estandarizado, consistente y extendible”
Alfonso Heredia

31. Drupal 8: Mobile.
Mobile
Director John Albin Wilkins
Información
http://drupal.org/node/19414
32
IRC #drupal-mobile
Alfonso Heredia

32. Drupal 8: Mobile.
Qué problemas intenta resolver ?
Angela Byron slides
• Actualmente existe una pobre experiencia de usuario para móviles.
• Administración “No Mobile”.
Alfonso Heredia

33. Drupal 8: Mobile.
Qué problemas intenta resolver ?
Angela Byron slides
• Problemas de rendimiento.
Alfonso Heredia

34. Drupal 8: Mobile.
Solución:
• El Core debe dar proveer de:
• Servicios Web que interactúen con aplicaciones
móviles nativas.
• Elementos HTML 5 necesarios para aplicaciones
web HTML 5.
• Capacidad suficiente para usar los paneles de
administración desde el móvil.
• Los temas del core (y contrib) deben ser
“Responsive”.
• Tiempo de respuesta y peso adecuados.
Alfonso Heredia

35. Drupal 8: Mobile.
Solución:
• Utilización de breakpoints en temas. (config yml).
• Uso de imágenes responsive.
mobile: '(min-width: 0px)'
narrow: 'all and (min-width: 560px) and (max-width: 850px)'
wide: 'all and (min-width: 851px)'
Angela Byron slides
Alfonso Heredia

36. Drupal 8: Mobile.
Solución:
• Mejora del CSS:
• Guía de estilo CSS.
• Rearquitectura CSS (reutilizable, escalable,
predecible).
• Reorganización de la estructura de archivos CSS
• Mejoras en el JS:
• jQuery 1.9.
• JSHint. (calidad en codigo JavaScript).
• Modernizr. (capacidades de un navegador relativas
a HTML5 y CSS3).
• Declaración explícita de JS. No más drupal_add_js
Alfonso Heredia

37. Drupal 8: Layouts.
Layouts
Director Kris Vanderwater
Información http://groups.drupal.org/scotch
IRC #drupal-scotch
Como panels pero mejor
Alfonso Heredia

38. Drupal 8: Layouts.
Qué problemas intenta resolver ?
Angela Byron slides
• Incosistencia en la presentación de datos. (block regions,content region,
theme variables).
• Bloques no son “multiinstanciables”.
• Un solo layout.
Alfonso Heredia

39. Drupal 8: Layouts.
Solución:
• Mecanismo estandarizado de salida. Todo es tratado
como bloques, layouts o layouts anidados.
Ctools+PageManager+Panels
Angela Byron slides
Fuerte
dependencia con
WSCCI y CMI
Alfonso Heredia

40. Drupal 8: Layouts.
Solución:
title: Two column
category: Columns: 2
template: two-col
stylesheets:
- two-col.css
regions:
first:
label: Left side
type: content
second:
label: Right side
type: aside
<div class="layout-display layout-two-col clearfix <?php print
$attributes['class']; ?>"<?php print $attributes; ?>>
<div class="layout-region layout-col-first">
<?php print $content['first']; ?>
</div>
<div class="layout-region layout-col-second">
<?php print $content['second']; ?>
</div>
</div>
• Declaración de layouts.
two-col.yml
two-col.tpl.php
Alfonso Heredia

41. Drupal 8: HTML5.
HTML 5
Director Jacine Luisi (cierto tiempo)
Información
http://groups.drupal.org/html5/
drupal-8
IRC #drupal-html5
Alfonso Heredia

42. Drupal 8: HTML5.
Plan:
• HTML5 out of the box.
• Conversion de las plantillas a HTML5
• Inclusión de elementos HTML5 para los formularios.
• Tel.
• url.
• Number.
• email.
• Mejora del “Markup”.
• Estandarización de código.
Alfonso Heredia

43. Drupal 8: UX.
Mejora de la experiencia de usuario
Angela Byron slides
Alfonso Heredia

44. Drupal 8: Symfony.
Qúe es?
• Framework PHP.
• Flexible.
• Extensible
• Componentes desacoplados.
Alfonso Heredia

45. Drupal 8: Symfony. (componentes)
ClassLoader:
• Autocargado de clases.
• Estandar PSR-0.
Namespace Directorio
DrupalCore core/lib/Drupal/Core/
DrupalComponent core/lib/Drupal/Component/
Drupalcomment modules/comment/lib/Drupal/comment/
Drupalentity modules/entity/lib/Drupal/entity/
Drupalnode modules/node/lib/Drupal/node/
Drupaltaxonomy modules/taxonomy/lib/Drupal/taxonomy/
Alfonso Heredia

46. Drupal 8: Symfony. (componentes)
ClassLoader:
Alfonso Heredia

47. Drupal 8: Symfony. (componentes)
HttpFoundation:
• Capa orientada a objetos para la especificación Http.
• Objetos Request y Response.
• Variables globales “mapeadas” a Request.
Request
query ($_GET)
request ($_POST)
cookies ($_COOKIE )
attributes
Files ($_FILES)
server ($_SERVER )
headers
Response
header
status
Content
Browser Server
Alfonso Heredia

48. Drupal 8: Symfony. (componentes)
Routing:
• Mapea peticiones a “controladores”.
• Rutas estáticas. 
• Rutas dinámicas se usa routing del Framework
(ChainRouter)
user_register:
pattern: '/user/register'
defaults:
_content: 'DrupaluserUserRouteController::register'
requirements:
_access_user_register: 'TRUE'
user.routing.yml
Alfonso Heredia

49. Drupal 8: Symfony. (componentes)
Inyección de dependencias:
• Estandariza y centraliza la manera en la que se
construyen los objetos de la aplicación.
• La clase no crea los objetos que necesita. Se le
suministran.
• Facilita el testeo. (desacoplamiento)
class A {
public function GetB()
{
return new B();
}
}
class A {
private $b;
public function __construct(B $b){
$this->b = $b;
}
public function GetB() {
return $this->b;
}
}
Alfonso Heredia

50. Drupal 8: Symfony. (componentes)
Y más:
Alfonso Heredia

51. Drupal 8: Twig
Qué es?:
• Motor de plantillas para PHP, rápido, seguro y
flexible.
• Nomenclatura clara, concisa y fácil de entender.
Por qué?:
• Difícil de aprender. ( print o print render()).
• Infinidad de plantillas.
• Theming Functions ?
Alfonso Heredia

52. Drupal 8: Twig
Por qué?:
Jen Lampton
Alfonso Heredia

53. Drupal 8: Twig
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<ul id="navigation">
{% for item in navigation %}
<li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endfor %}
</ul>
<h1>My Webpage</h1>
{{ a_variable }}
</body>
</html>
Alfonso Heredia

54. Drupal 8: Twig
Ventajas:
• Menos código que con las funciones.
Jen Lampton
Alfonso Heredia

55. Drupal 8: Twig
Ventajas:
• Inspección de variables. {{ dump(user)}}.
• Herencia de plantillas.
Jen Lampton
<!DOCTYPE html>
<html>
<head>
{% block head %}
<link rel="stylesheet" href="style.css" />
<title>{% block title %}{% endblock %} - My Webpage</title>
{% endblock %}
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
<div id="footer">
{% block footer %}
&copy; Copyright 2011 by <a
href="http://domain.invalid/">you</a>.
{% endblock %}
</div>
</body>
</html>
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ parent() }}
<style type="text/css">
.important { color: #336699; }
</style>
{% endblock %}
{% block content %}
<h1>Index</h1>
<p class="important">
Welcome to my awesome homepage.
</p>
{% endblock %}
Alfonso Heredia

56. Preguntas
Alfonso Heredia

57. Gracias/Créditos.
• Angela Byron.
• Dries Buytaert.
• Jen Lampton.
• Jose Reyero.
• Pedro Lozano.
• Larry Gardfield.
Alfonso Heredia

58. “ Muchas gracias a todos por permitirme pasar este
ratito hablando de Drupal”
Alfonso Heredia
Ingeniero informático por la Universidad de Málaga
@hmalfonso
Alfonso Heredia