Slide 1

Slide 1 text

TEAM BUILDING AROUND DRUPAL - un viaje integral para enfocar proyectos - By David Rodríguez, @davidjguru

Slide 2

Slide 2 text

David Rodríguez @davidjguru Hello my name is: drupal.org/rojomorgan

Slide 3

Slide 3 text

¿Qué estamos haciendo aquí? Objetivo de alto nivel: Generar un mapa de Drupal que permita una visión cohesionada. Target: Un equipo tecnológico sin experiencia en Drupal. Duración: 32 horas divididas en ocho sesiones de cuatro horas cada una.

Slide 4

Slide 4 text

• Ofrecer una mapa lo más completo posible de la tecnología Drupal (Ampliar). • Proporcionar un modelo constructivista: el asistente formará su propia experiencia gracias a una combinación teórico-práctica. (Experimentar). • Conseguir en el alumnado el refuerzo necesario como profesionales para emprender proyectos basados en Drupal (Madurar). Complementariamente:

Slide 5

Slide 5 text

Sesión 1 - Bloque 1: Expectativas Hablemos un poco a título personal para encontrar una mecánica: ¿Cuáles son vuestras expectativas respecto a este curso?

Slide 6

Slide 6 text

Donde A = Asistentes, F = Formador y O = la Organización Intersección de expectativas

Slide 7

Slide 7 text

Este es el registro de vuestras expectativas con las que trabajaremos: ● Tener una buena base de partida para proyectos basados en Drupal ● Saber como crear portales web con Drupal ● Conocer como acometer proyectos con Drupal ● Experimentar con Drupal en si ● Practicar de 0 a web con Drupal ● Identificar las ventajas de la arquitectura de Drupal ● Identificar bien Drupal 8 ● Probar como hacer actualizaciones ● Adquirir experiencia en Drupal ● Localizar canales y sitios donde encontrar ayuda sobre Drupal

Slide 8

Slide 8 text

¿Cómo podemos combinar todas las expectativas? Empieza a aparecer EL RETO Ahora tenemos que sintetizar bien toda la información.

Slide 9

Slide 9 text

Siempre, en todo momento, estaremos jugando. Jugamos a que investigamos, a que probamos, a que estamos experimentando. No existe la prisa ahora. Vamos despacio porque vamos lejos. El verbo más utilizado será “Romper”: construiremos cosas y las probaremos. Algunas se romperán, y así aprenderemos como repararlas. La experiencia se adquiere a través de la práctica y eso incluye el error: Vamos a equivocarnos. Siempre nos aproximaremos a conceptos nuevos desde la experiencia que ya tenemos: los equipos responden mejor al aprendizaje cuando se usan puentes con lo ya experimentado. EL RETO FUNDAMENTAL DEL CURSO Tejer el conjunto intersección de expectativas a tres bandas: organización convocante (vuestra empresa), vosotros y vosotras como asistentes y participantes, y yo como guía. Debemos ser capaces de construir una mecánica fluida, participativa, progresiva, integradora y constructivista. En base a ello, las claves: ● Más colaborativo que expositivo ● Más práctico que teórico ● Más biyectivo que unidireccional ● Más intuitivo que complejo ● Más experimental que observador ● Más dinámico que estático Tenemos 8 sesiones, 30 horas en total para partir de un conjunto de personas que no han experimentado antes ni con Drupal ni con el Stack Tecnológico habitual de Drupal y llegar a un mapa lo más integral posible de experiencias directas con la tecnología: RETO.

Slide 10

Slide 10 text

Sesión 1 - Bloque 2: Necesidades y Acuerdos Análisis de necesidades: Vamos a evaluar en que punto estamos this.

Slide 11

Slide 11 text

Necesitamos responder a estas cuestiones con toda la sinceridad posible: 1. ¿Qué experiencia tenéis con Drupal? 2. ¿Tenéis práctica con entornos Linux tipo Ubuntu, Debian, etc? 3. ¿PHP? 4. ¿Programación orientada a objetos? 5. ¿Conocéis algún CMS? 6. ¿Habéis practicado con el Modelo-Vista-Controlador, MVC? 7. ¿Control de versiones? ¿svn? ¿git? 8. ¿Habéis trabajado con repositorios externos? 9. ¿Tenéis experiencia con Github? 10. ¿Qué objetivos podemos marcarnos? Plano de situación

Slide 12

Slide 12 text

¿PHP? ¿Control de versiones? ¿Qué objetivos podemos marcarnos? Completa la frase: Cuando termine el curso, yo debo haber aprendido...

Slide 13

Slide 13 text

Metodología y Mecánica Seamos realistas: los objetivos son ambiciosos, solo tenemos 30 horas para experimentar y este curso tiene una serie de dependencias que hay que “inyectar”: Consola Linux Git PHP Drupal (Inside y Outside)

Slide 14

Slide 14 text

1- Proyecto de Sitebuilding Crearemos un sitio web personal al que iremos añadiendo funcionalidades y sobre el que iremos practicando. 2- Proyecto de desarrollo de un módulo Drupal Crearemos un módulo Drupal de manera colaborativa mediante parches en los repositorios oficiales de Drupal.org Mientras realizamos este curso y antes de terminar, realizaremos dos pequeños proyectos prácticos de manera complementaria y de forma iterativa:

Slide 15

Slide 15 text

Sesión 1 - Bloque 3: Instalando Drupal EJERCICIO 1 Y para terminar esta primera sesión, vamos a practicar un poco. Primer ejercicio: Instalemos Drupal

Slide 16

Slide 16 text

Apache / Nginx MySQL / SQLite PHP https://www.drupal.org/download Requisitos

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

EJERCICIO 2 Ahora crearemos nuestro primer tipo de contenido y nuestro primer nodo en Drupal.

Slide 19

Slide 19 text

Uno de nuestros nuevos amigos: Devel Generate https://www.drupal.org/project/devel EJERCICIO 3 Instalamos y activamos el módulo Devel Generate

Slide 20

Slide 20 text

Sesión 2 - Bloque 1: Historia de Drupal ● Dos estudiantes de la universidad de Amberes (Dries Buytaert y Hans Snijder), pensaban cómo comunicarse con el resto de estudiantes intentaron construir un panel de anuncios online para intercambiar mensajes. ● Ese pequeño panel fue evolucionando y se fue ampliando el número de usuarios, con lo que poco a poco se fue desarrollando un esqueleto inicial de gestor de contenidos en una especie de Intranet universitaria. ● Dries consideró “dorp”, una palabra que en holandés significa “pueblo”, pero al teclear introdujo “Drop” y así se quedó. Lanzó drop.org como una plataforma a medio camino entre el foro, red social y tablón de contenido. ● La primera versión libre de Drupal se liberó en 2001 ● Actualmente está liberado bajo una licencia GPL 2 y 3 , lo que permite entre otras cosas, descargarlo, reutilizarlo, modificarlo y distribuir tus cambios ( lo que son las cuatro libertades básicas del Software Libre ) a partir del software alojado enDrupal.org y poder combinarlo con cualquier otro software cuya licencia sea compatible con las propias de Drupal.

Slide 21

Slide 21 text

Drupal.org en el año 2002, con unos ocho sitios web registrados construidos con Drupal: Unos años más tarde:

Slide 22

Slide 22 text

¿Cómo se consigue esto? ● En la comunidad alrededor de Drupal hay miles de personas contribuyendo activamente. ● Con diferentes perfiles: desde desarrolladores que trabajan en el core hasta mantenedores de módulos, pero además multitud de perfiles no específicamente tecnológicos. ● Diseñadores que proponen mejoras de UX para las interfaces tanto para la navegación a través del sitio web como para las vistas internas de gestión en menús de administración y módulos, traductores que se encargan de hacer que cada versión del core de Drupal y sus módulos estén disponibles en algún idioma específico y muchas más personas dedicadas a documentar, actualizar y editar los contenidos disponibles, las guías y manuales de instalación y recomendaciones. ● Todo un ecosistema de participantes y colaboradores que hacen que actualmente, las cifras en torno a Drupal sean realmente impresionantes: más de treinta y cinco mil módulos disponibles para diferentes versiones del core de Drupal, más de dos mil temas visuales y unos dos mil commits enviados de media a la semana. ● Más de mil versiones configuradas a modo de “distribuciones”, es decir, adaptaciones de Drupal como herramientas de propósito específico debidamente “profileadas” (disculpenme el palabro) para usos concretos: gestión de proyectos y tareas con OpenAtrium, construcción de comunidades con Drupal Commons e incluso una versión para iglesias y cultos religiosos: OpenChurch.

Slide 23

Slide 23 text

Hitos: ● Drupal 1.0 - enero 2001 ● Drupal 4.0 - junio 2002 ● Drupal 4.1 - 4.7 2004 - 2006 ● Drupal 5 - junio 2007 ● Drupal 6 - febrero 2008 ● Drupal 7 - junio 2011 ● Drupal 7.56 - junio 2017 ● Drupal 8 - noviembre 2015 ● Drupal 8.5 - marzo 2018 Fuentes: ● https://betabeers.com/blog/a-quince-anos-vis ta-la-primera-release-drupal-239/ ● https://www.drupal.org/about/history ● http://www.comunic-art.com/historia-de-dru pal ● https://opensource.com/life/16/9/drupal-evol ution ● https://en.wikipedia.org/wiki/Drupal ● https://www.drupal.org/case-studies ● http://cgit.drupalcode.org/drupal/plain/CHA NGELOG.txt?id=497914920385b7016ac9c 9367e0198530787adf2 COMUNIDAD DRUPAL DRUPAL ASSOCIATION DRUPAL.ORG DRUPAL EN PAÍSES DRUPAL EN REGIONES DRUPAL EN CIUDADES https://groups.drupal.org/ https://www.drupical.com/

Slide 24

Slide 24 text

https://dri.es/state-of-drupal- presentation-september-2017

Slide 25

Slide 25 text

Sesión 2 - Bloque 2: ¿Dónde está Drupal?

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

En Github también hay Drupal

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

¿Git? ¿Qué Git? https://www.codeschool.com/courses/git-real https://www.codeschool.com/courses/try-git https://www.devroom.io/2009/10/26/how-to-create-and-apply-a-patch-with-git/ https://coderwall.com/p/yeh5tw/how-to-create-and-apply-a-patch-with-git https://guides.github.com/activities/hello-world/ https://github.com/flowsta/github https://product.hubspot.com/blog/git-and-github-tutorial-for-beginners

Slide 30

Slide 30 text

Sesión 2 - Bloque 3: Configuración de Drupal Repasemos antes del siguiente ejercicio:

Slide 31

Slide 31 text

Vamos a configurar varias cosas en nuestro Drupal: 1. Roles de usuario 2. Tipos de Contenido 3. Vistas 4. Bloques EJERCICIO 4

Slide 32

Slide 32 text

¿El Sandbox de Drupal.org? https://www.drupal.org/user

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

EJERCICIO 5 Proyectos colaborativos en Git/Github 1. Distribución en Equipos 2. Sincronización local/remoto 3. Push / Pull request

Slide 35

Slide 35 text

Sesión 3 - Bloque 1: Estructura de Drupal ¿Hacemos un poco de...

Slide 36

Slide 36 text

Autoloader Composer.json install.php update.php Core/ Modules/ Themes/ Sites/ Themes/ Vendor/ ¿Cómo está organizado Drupal?

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

install.php update.php autoload.php composer.json core/ modules/ themes/ sites/ vendor/

Slide 40

Slide 40 text

Sesión 3 - Bloque 2: Módulos en Drupal “A module is an add-on which provides specialized functionality to Drupal. Some modules are already components of Drupal. Others are developed by the user community and made available to you through the Drupal Cloud service. Module details are described in the Advanced Help menu.” https://www.drupal.org/project/project_module

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Tipos de módulos en Drupal Tipos de módulos (por ubicación): Módulos de core Módulos contribuidos Módulos custom Tipos de módulos (por funcionalidad): Módulos de desarrollo Módulos de seguridad Módulo de migración Módulos de SEO

Slide 43

Slide 43 text

Backup and Migrate: https://www.drupal.org/project/backup_migrate Masquerade: https://www.drupal.org/project/masquerade XMLSitemap: https://www.drupal.org/project/xmlsitemap Metatag: https://www.drupal.org/project/metatag G.A: https://www.drupal.org/project/google_analytics Quicktabs: https://www.drupal.org/project/quicktabs Dependencias Versiones Requisitos Estado (rc, alpha, beta, dev, etc).

Slide 44

Slide 44 text

EJERCICIO 6: LOCALIZAR MÓDULOS INTERESANTES E INSTALARLOS EN NUESTRO DRUPAL wget ftp interface composer drush

Slide 45

Slide 45 text

Sesión 3 - Bloque 3: Drush en Drupal

Slide 46

Slide 46 text

curl -sS https://getcomposer.org/installer | php mv composer.phar /usr/local/bin/composer ln -s /usr/local/bin/composer /usr/bin/composer git clone https://github.com/drush-ops/drush.git /usr/local/src/drush cd /usr/local/src/drush git checkout 8.1.15 #or whatever version you want. ln -s /usr/local/src/drush/drush /usr/bin/drush composer install drush --version https://github.com/drush-ops/drush/releases Drush

Slide 47

Slide 47 text

drush dl drupal Utilidades frecuentes Drush dl en / en -y dis cc pml cron pm-uninstall ard vl va up --security-only -n https://drushcommands.com EJERCICIO 7: Vamos a crear users con Drush

Slide 48

Slide 48 text

Utilidades frecuentes Drush role-add-perm (rap): Grant a specified permission to a role. role-create (rcrt) Create a new role. role-list (rls) Display a list of all roles defined on the system. If a role name is provided as an argument, then all of the permissions of that role will be listed. If a permission name is provided as an option, then all of the roles that have been granted that permission will be listed. role-delete (rdel) Delete a role. role-remove-perm Remove a specified permission from a role. (rmp) updatedb pml user-cancel drush dis

Slide 49

Slide 49 text

EJERCICIO 8: Realizar un backup de nuestro Drupal, instalar un nuevo Drupal e importar el backup (todo vía Drush) https://drushcomman ds.com/drush-8x/cor e/archive-dump/ https://drushcomman ds.com/drush-8x/cor e/archive-restore/ https://drushcomman ds.com/drush-8x/cor e/php-script/

Slide 50

Slide 50 text

Sesión 4 - Bloque 1: Git, Github & Drupal PRIMERA PARTE: UN POCO DE GIT (Esquema intuitivo de GIT)

Slide 51

Slide 51 text

Podemos decir de manera resumida que un repositorio git consiste en tres estructuras de árboles que git gestiona. El primero es nuestro directorio de trabajo que tiene todo los archivos. El segundo es un índice que trabajo como registro y almacenamiento y finalmente el head, que consiste en apuntar al último cambio enviado, el más reciente. Workflow elemental de GIT

Slide 52

Slide 52 text

Workflow elemental de GIT 1. Working directory: es el directorio donde tengamos el código sobre el que vamos a trabajar. 2. Staging area(Index): es el lugar donde se almacenan los archivos que han sido modificados, antes de escribir los cambios en el repositorio local. 3. Local repo: Repositorio local donde almacenamos y controlamos las diferentes ramas y estados de nuestro código, se encuentra en el directorio .git de nuestro Working directory. 4. Remote repo: Repositorio central con el cual se sincronizan el resto de usuarios.

Slide 53

Slide 53 text

Inicializar un repositorio: git init Copia local -> git clone /path/to/repository Copia remoto -> git clone username@host:/path/to/repository El git clone que usamos ayer -> git clone https://github.com/drush-ops/drush.git /usr/local/src/drush (instrucción - ruta de origen - ruta de destino) git add nombrearchivo -> Añade archivo al index del repositorio local, se puede usar para añadir todos los archivos. git status -> nos dice todos los cambios que hay en el index. git commit -am “message” ->Hace commit de todos los cambios del index al repositorio local. git commit -m “message” archivos -> Hace commits de los archivos indicados. git log -> Muestra el historial de commits. git diff commitX commitY –> muestra las diferencias entre el commitX y el commitY. git checkout -- archivo –> Modifica archivo al estado en el que se encontraba en el último commit. git pull –> Actualiza el repositorio local con el repositorio remoto. git push –> Manda los cambios del repositorio local al repositorio remoto.

Slide 54

Slide 54 text

HACIENDO PARCHES EN GIT Conceptualmente, consiste en hacer un registro cotejado de las diferencias entre un código que está registrado con partes que no lo están y han cambiado. 1- Tenemos un código que nos hemos descargado o tenemos bajo control de versiones. 2- Realizamos cambios en el código. 3- Pedimos a git que nos genere un fichero comparado. git diff > cambios.patch Otras personas aplicarán el parche: git apply cambios.patch Si quieres ver los cambios que trae el parche: git apply --stat cambios.patch Referencias: http://rogerdudler.github.io/git-guide / https://git-scm.com/ https://github.com/trein/dev-best-pra ctices/wiki/Git-Commit-Best-Practice s https://github.com/trein/dev-best-pra ctices/wiki/Git-Tips https://wildlyinaccurate.com/a-hacke rs-guide-to-git/ https://github.com/git-tips/tips

Slide 55

Slide 55 text

Sesión 4 - Bloque 2: Trabajando con Github

Slide 56

Slide 56 text

FORK & PULL REQUEST

Slide 57

Slide 57 text

Local & Remoto $ git push origin master + Identificación Github: usuario y contraseña

Slide 58

Slide 58 text

EJERCICIO 9: WORKFLOW BÁSICO EN GITHUB 1 - Crear un repositorio nuevo en Github, inicialmente vacío 2- Hacer clone en local y traer el repo 3- Crear un “Hello World” en PHP dentro del repositorio local <- Hay sorpresa-> 4- Hacer Push al repositorio remoto EJERCICIO 10: WORKFLOW COLABORATIVO EN GITHUB 1 - Nos separamos por equipos y seleccionamos un usuario como repositorio central. 2- Fork del proyecto central. 3- Paso a local 4- Desarrollamos el Hello World, una pequeña funcionalidad por persona. 5- Push a remoto 6- Pull Request e integración

Slide 59

Slide 59 text

Sesión 4 - Bloque 3: Desarrollo de Módulos SINTAXIS YAML

Slide 60

Slide 60 text

En Drupal, existe una parte de configuración y una parte de código a resolver. primer_ejemplo.info.yml name: Primer Ejemplo type: module description: package: core: EJERCICIO 11: Nuestro primer módulo Drupal 1- Cambiamos el nombre de carpeta. 2- Cambiamos nombre del fichero. 3- Cambiamos los valores de core. 4- Quitamos las comillas en description. ESTRUCTURA ELEMENTAL DE MÓDULOS

Slide 61

Slide 61 text

EJERCICIO 12: Cambios en nuestro primer módulo Drupal 1- Añadimos dependencias: dependencies: - drupal:pruebainvent 2- Añadimos ruta y controlador: primer_ejemplo.routing.yml example_2.description: path: 'example' defaults: _controller: '\Drupal\primer_ejemplo\Controller\ExampleController::build' _title: 'Example hello' requirements: _permission: 'access content'

Slide 62

Slide 62 text

Controladores Directorios

Slide 63

Slide 63 text

Sesión 5 - Bloque 1: Retrospectiva NUESTRO PRIMER MÓDULO EN DRUPAL 8: - Habíamos visto el formato YAML para la estructura de un módulo. - Habíamos creado nuestro primer módulo. - Lo habíamos instalado. - Habíamos declarado sus dependencias. - Habíamos creado ruta y controlador.

Slide 64

Slide 64 text

Fichero: ejemplo_1.info.yml ---- name: Ejemplo 1 type: module description: "Primer ejemplo del curso de Drupal" package: Curso Drupal core: 8.x Ejemplo 1

Slide 65

Slide 65 text

Ejemplo 2 Fichero: ejemplo_2.info.yml ---- name: Ejemplo 2 type: module description: "Segundo ejemplo del curso de Drupal" package: Curso Drupal core: 8.x

Slide 66

Slide 66 text

Fichero: ejemplo_2.routing.yml ---- # Definimos una ruta para el evento de nuestro ejemplo. ejemplo_2.description: path: 'ejemplo2' defaults: _controller: '\Drupal\ejemplo_2\Controller\ExampleCo ntroller::build' _title: 'Ejemplo 2 Hello World' requirements: _permission: 'access content' Fichero: ExampleController.php src/Controller/ ---- 'markup', '#markup' => 'Hello World!', ]; return $build; } }

Slide 67

Slide 67 text

EJERCICIO 13: MÓDULOS DRUPAL EN MODO COLABORATIVO 0- Configuramos nuestra conexión ssh para el uso de git en Drupal.org 1- Subimos todos y todas nuestro primer módulo Drupal al Sandbox de Drupal.org 2- Volvemos a organizarnos por equipos y a seleccionar un proyecto central 3- Checkout del proyecto en entorno local. 4- Creamos cambios sobre el módulo 5- Generamos un parche de cambios y lo subimos al proyecto 6- Integramos parches Formato de nombrado de parche en Drupal: proyecto-tarea-IssueNumber-CommentNu mber.patch git diff > geohide-filter-subsystem-by-city-region-c ountry-2901393-3.patch

Slide 68

Slide 68 text

Sesión 5 - Bloque 2: Construyendo módulos EJERCICIO 14: RUTAS Y CONTROLADORES DRUPAL 1- Volvemos a nuestro módulo de referencia 2- Le añadimos una nueva ruta 3- Le añadimos un nuevo controlador y un nuevo contenido a mostrar

Slide 69

Slide 69 text

EJERCICIO 15: VARIABLES Y PLANTILLAS TWIG 1- Volvemos a nuestro módulo de referencia. 2- Necesitamos una nueva carpeta “templates” para guardar la plantilla de extensión .html.twig 3- Necesitamos modificar el controlador para decirle que active la plantilla. 4- Necesitamos una nueva variable en el controlador. 5- Necesitamos un fichero de permisos primer_ejemplo.permissions.yml

Hello World!

This is my First Module

Here is the value:

{{ ejemplo_var }} ------------------------------------------- $build = [ '#theme' => 'primer_ejemplo_theme', '#ejemplo_var' => '9876543210', ]; # Custom permisions. primer ejemplo access: title: 'Primer Ejemplo Access' description: 'Access to the example page.' restrict access: true

Slide 70

Slide 70 text

Sesión 5 - Bloque 3: Sitebuilding con Drupal VIEWS en Drupal Construcción Gráfica de consultas SQL a base de datos. Útil para: Listados Exportación de datos Búsquedas y resultados

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

EJERCICIO 16: Vamos a configurar Views para construir listados de contenidos en nuestro Drupal.

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

Sesión 6 - Bloque 1: Theming con Drupal Conceptualmente, un Theme es una estructura visual que define una serie de regiones, organización visual, plantillas y recursos para construir la interfaz de nuestro proyecto. El conjunto de elementos se denomina “Theme” y forma parte de nuestro proyecto:

Slide 76

Slide 76 text

¿Qué contiene un Theme? Veamos: Theming con Drupal

Slide 77

Slide 77 text

Theming con Drupal Subtheming: creando un tema hijo de otro Theme ya existente Estructura básica: Declarando la herencia en el .info.yml:

Slide 78

Slide 78 text

THEMING CON DRUPAL EJERCICIO 17: Vamos a crear un subtheme a partir de Bartik Referencias: https://www.hywel.me/drupal/2016/03/0 6/drupal-8-sub-themes-and-stylesheets.ht ml https://www.drupal.org/node/2165673 https://stackoverflow.com/questions/3619 5055/creating-a-bartik-sub-theme-in-drup al-8 THEMING CON DRUPAL # How to know what is the current theme on your Drupal site # move inside project root directory var/www and then drush status theme #the above command will tell you the current theme set as default for site and admin both # Change the site default theme using the below command (use theme name of your choice) drush vset theme_default garland # the above command will make garland as default site theme # now change admin default theme using the below command (use theme name of your choice) drush vset admin_theme garland # Do Ctrl+r to flush cache and reload your Drupal Site

Slide 79

Slide 79 text

theme.libraries.yml global-styling: css: component: css/style.css: {} THEMING CON DRUPAL # Defines libraries group in wich we can add css/js libraries: - mytheme/global-styling # Regions regions: header: Header primary_menu: 'Primary menu' secondary_menu: 'Secondary menu' page_top: 'Page top' page_bottom: 'Page bottom' highlighted: Highlighted featured_top: 'Featured top' breadcrumb: Breadcrumb content: Content sidebar_first: 'Sidebar first' sidebar_second: 'Sidebar second' featured_bottom_first: 'Featured bottom first' featured_bottom_second: 'Featured bottom second' featured_bottom_third: 'Featured bottom third' footer_first: 'Footer first' footer_second: 'Footer second' footer_third: 'Footer third' footer_fourth: 'Footer fourth' footer_fifth: 'Footer fifth'

Slide 80

Slide 80 text

Sesión 6 - Bloque 2: Sitebuilding con Drupal EJERCICIO 18 (INTEGRAL): SITEBUILDING CON DRUPAL ¿Qué vamos a construir? Vamos a hacer un sitio web que muestre noticias y artículos de blog. ¿Cómo instalar un Theme en Drupal? /themes

Slide 81

Slide 81 text

SITEBUILDING CON DRUPAL Vamos a crear un sitio web con Drupal 8 Probaremos con Zircon, un theme visual preparado para Drupal8: https://ftp.drupal.org/files/projects/zircon-8.x-1.0-rc1.tar.gz El Theme: zircon_d8-8.1.1.zip Instrucciones: https://www.weebpal.com/guides/step-step-guide-install-drupal-8-theme

Slide 82

Slide 82 text

EJERCICIO INTEGRAL: SITEBUILDING CON DRUPAL Características: Permite comentarios. Tres roles de usuario: administrador, editor de noticias y editor de artículos. Necesitamos un logo propio y un nombre del sitio web. Necesitamos cambiar colores. Necesitamos desplazar la barra de búsqueda. Necesitamos módulos SEO: Metatags, sitemapxml, GoogleAnalytics Necesitamos un listado de noticias ordenadas por fechas Necesitamos varios listados de artículos de blog ordenados por criterios varios. ¿Probamos Panels y Quicktabs? :-)

Slide 83

Slide 83 text

Sesión 6 - Bloque 3: Módulos en Drupal.org Retomamos EJERCICIO 13: MÓDULOS DRUPAL EN MODO COLABORATIVO 0- Configuramos nuestra conexión ssh para el uso de git en Drupal.org 1- Subimos todos y todas nuestro primer módulo Drupal al Sandbox de Drupal.org. 2- Volvemos a organizarnos por equipos y a seleccionar un proyecto central. 3- Checkout del proyecto en entorno local. 4- Creamos cambios sobre el módulo. 5- Generamos un parche de cambios y lo subimos al proyecto. 6- Integramos parches. Formato de nombrado de parche en Drupal: proyecto-tarea-IssueNumber-CommentNumber.patch git diff > geohide-filter-subsystem-by-city-region-country-2901393-3.patch

Slide 84

Slide 84 text

Pensemos en funciones que podría tener nuestro módulo Idea: Distancia de Hamming https://es.wikipedia.org/wiki/Distancia_de_Hamming

Slide 85

Slide 85 text

Implementación de la Distancia de Hamming en PHP

Slide 86

Slide 86 text

¿Qué necesitamos para implementar esas funciones? ¿Formulario? ¿Campos? ¿Ruta de salida? ¿Hook_Help? ¿Funciones de cálculo?

Slide 87

Slide 87 text

¿Cómo nos organizamos para el desarrollo? Trabajamos por equipos Seleccionamos un repositorio (Sandbox) central Tareas atómicas Issues Prioridades Y elaboramos parches

Slide 88

Slide 88 text

Sesión 7 - Bloque 1: Entidades ¿Qué es una Entidad? Conceptualicemos de manera intuitiva Una entidad no deja de ser en cierta manera, una clase abstracta, una especie de contrato elemental en el que modelamos a alto nivel una figura que luego iremos particularizando.

Slide 89

Slide 89 text

Para particularizar esa entidad, construimos “bundles” es decir, modelos aproximados que generamos mediante el añadido de campos que van a tratar con datos e información. A partir de esos bundles, en último nivel generaríamos sucesivos objetos específicos con los que trataríamos. Y en última instancia, tomaríamos esos objetos y los manejaríamos en modo CRUD, lo habitual.

Slide 90

Slide 90 text

Hasta ahora, todo lo resolviamos con un “ecosistema” preconfigurado formado por Nodos, Usuarios, Tipos de contenido, Términos de Taxonomías y/o Comentarios. Y sin embargo, en realidad esos elementos también forma parte de la estructura de Entidades y Bundles.

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

Haciendo un paralelismo entre Drupal / POO

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

¿Criterios para decidir? Un ejemplo: Ejemplo recogido en: https://tifon.cl/blog/moncadanicolas/entidades-en-drupal

Slide 95

Slide 95 text

A nivel de código, necesitamos conocimiento de la Entity API de Drupal: https://www.drupal.org/docs/8/api/entity-api/working-wit h-the-entity-api ¿Practicamos? EJERCICIO 19: Creación de Tipos de Entidades y bundles https://www.drupal.org/project/search_api https://www.drupal.org/project/eck

Slide 96

Slide 96 text

Sesión 7 - Bloque 2: Sitebuilding con Drupal Índices y Servidores para búsquedas - Server - Index - Backend (BBDD, Solr) - Facet API - Better Exposed Filters (BEF) - Search API

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

Sesión 8 - Bloque 1: Scaffolding con Drupal Scaffolding = ¿Andamiaje? Construir estructuras iniciales para elaborar un proyecto

Slide 102

Slide 102 text

Drupal Code Generator (DCG) https://github.com/Chi-teck/drupal-code-generator Instalación 1. Download the latest stable release of the code generator. 2. Make the file executable. 3. Move it to a directory that is part of your PATH. release_url=https://api.github.com/repos/chi-teck/drupal-code-generator/releases/lates t wget $(wget -qO- $release_url | awk -F'"' '/browser_download_url/ { print $4 }') chmod +x dcg.phar sudo mv dcg.phar /usr/local/bin/dcg dcg --version

Slide 103

Slide 103 text

Drupal Code Generator (DCG) ¿Qué podemos hacer?

Slide 104

Slide 104 text

Drupal Code Generator (DCG)

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

EJERCICIO 20: Creación de módulos y Themes con DCG

Slide 107

Slide 107 text

Sesión 8 - Bloque 2: Sitebuilding con Drupal ¿Volvemos a nuestro pequeño Drupal? Vamos a practicar con vocabularios y taxonomías. EJERCICIO 21: Construcción de taxonomías para contenido

Slide 108

Slide 108 text

Tenemos pendiente construir un módulo de manera colaborativa que resuelva la distancia de Hamming entre dos cadenas. ¿Retomamos?

Slide 109

Slide 109 text

EJERCICIO 1: Instalación de Drupal en entorno local EJERCICIO 2: Creación de Tipo de Contenido y primeros nodos. EJERCICIO 3: Instalación módulo Devel y generación automática de nodos. EJERCICIO 4: Configuración de Roles de usuario, TdC, Vistas, Bloques EJERCICIO 5: Proyectos colaborativos en Git/Github EJERCICIO 6: Localizar módulos interesantes e instalarlos en nuestro Drupal EJERCICIO 7: Crear usuarios con Drush EJERCICIO 8: Backup de Drupal, instalación de backup (todo vía Drush) EJERCICIO 9: Workflow básico en Github EJERCICIO 10: Workflow colaborativo en Github EJERCICIO 11: Nuestro primer módulo Drupal Listado de ejercicios

Slide 110

Slide 110 text

Listado de ejercicios EJERCICIO 12: Cambios en nuestro primer módulo Drupal EJERCICIO 13: Módulos Drupal en modo colaborativo EJERCICIO 14: Rutas y controladores EJERCICIO 15: Variables y plantillas Twig EJERCICIO 16: Configurar Views para construir listados de contenidos EJERCICIO 17: Crear un subtheme a partir de Bartik EJERCICIO 18 (Integral): Sitio web con noticias y artículos de blog EJERCICIO 19: Creación de tipos de entidades y bundles EJERCICIO 20: Creación de módulos y themes con DCG EJERCICIO 21: Construcción de taxonomías para contenido EJERCICIO FINAL: Retrospectiva

Slide 111

Slide 111 text

Retrospectiva Final Hemos llegado al ejercicio final: Retrospectiva

Slide 112

Slide 112 text

Compañeros y compañeras, me temo que ha llegado… THE END 30 HORAS, 8 SESIONES, 20 EJERCICIOS, TODO UN ECOSISTEMA...

Slide 113

Slide 113 text

Molaría hacer un poco de retrospectiva: hemos compartido 8 sesiones, treinta horas totales en las que hemos visto y hemos practicado muchas cosas de diferentes ámbitos dentro del ecosistema Drupal. Herramientas: Drush, DCG Sitebuilding Módulos Theming Comunidad Plataformas Stack Tecnológico

Slide 114

Slide 114 text

Las preguntas serían... ¿Hemos sido capaces de abordar y afrontar los objetivos del curso? ¿Se han cumplido vuestras expectativas? ¿Hemos resuelto bien las intersecciones de intereses?

Slide 115

Slide 115 text

Lo primero es agradeceros a vosotros como grupo… Lo segundo es agredecer a las personas que nos ayudan. Estas cosas no las aprendí solo, las aprendí hablando/escuchando/practi cando/observando/leyendo a: @pcambra @juampynr @reguiguren @alvar0hurtad0

Slide 116

Slide 116 text

Routing en Drupal “Hacia rutas salvajes” by jansete @jansev3n https://docs.google.com/presentation/d/17KVjfmgMtIIIDl0N40Vm1iyaUBg27mGE1hV2 byIR4OM/edit?usp=sharing “Publica tu proyecto en Drupal.org” by Keopx @eguiguren y Alvaro Hurtado @alvar0hurtad0 https://2014.drupalday.es/sites/default/files/publica_tu_proyecto_en_drupal.org_.pdf “Docker & Drupal”, by Ignacio López Flores, @ignaciolflores https://introbay.github.io/drupalday2017/#/ “External Entities”, by Rodrigo Aguilera, @marinero http://rodrigoaguilera.gitlab.io/external-entities-talk/#/ “Headless Drupal: The Gizra Way”, by @RoySegall and @David_Baltha https://docs.google.com/presentation/d/1RIMBy8Tjf6yn-fZuBVv381n1KfLGEWNs2v56 l5i1WJw/edit?usp=sharing