 Tía León en Valladolid y vamos a presentar a Ignacio Cruz. Ignacio Cruz es desarrollador en HumanMade, trabaja con grupos desde hace siete años y ha pasado por empresas como On The Go Systems, desarrolladores de UPPML, UPPM1, DEP y desde hace dos años HumanMade. Actualmente se centra más en el frontend sin dejar de lado el back. Es un mago frustrado. Pues los dejo con él. Su ponencia, Gutenberg, en grandes medios. Un aplauso para él. Bueno, qué fuerte se escucha esto. Muchas gracias por venir a la última charla de todas. No tenéis otra opción, de todas formas, no hay otra. Bueno, voy a contar un poco la experiencia que hemos tenido en HumanMade con un proyecto a gran escala para un gran medio centrado en Gutenberg. Entonces, vamos a ver qué es capaz de hacer un poco Gutenberg. No, porque el acerto de función es aquí, ¿verdad? Bueno, si no, tampoco. Pero tampoco las flechas, tampoco. Ahora, vale, vale. Bueno, ya me han presentado. Soy Ignacio Cruz, mi Twitterismo web, aunque no lo utilizo nunca. Soy ingeniero en HumanMade desde hace dos años y medio, más o menos, y soy profe doméstica. Algunos cursos de allí relacionados o de huerpes o relacionados con huerpes. Y bueno, este gran medio es de S.A.N., el famosísimo tabloid inglés sensacionalista. No me voy a meter en temas periodísticos en estas charlas, no quiero. Prefiero no hacerlo. Pero bueno, no sé si lo conocéis, al que no lo conozcas. Es un tabloid de sensacionalista de tal que no para de emitir noticias. La editorial en de S.A.N. costa de unos 160 empleados. Y lanzan como 600 noticias a la semana. O sea, que es un volumen bastante grande. Tiene aproximadamente un millón de visitas al día, con picos muy variables. De repente aquello se dispara o se viene un poco abajo, pero tampoco mucho. Pero se puede llegar a disparar bastante. Y bueno, son muy famosas en la terra. La terra tiene ese humor que tienen, pues, he mudado el juego de palabras y les he encantado en inglés. Y de S.A.N. tiene el juego de palabras muy graciosas. Fuera del periodismo, la verdad, que hay que destacarles que los juegos de palabras son muy buenos. Entonces, cuando nos encargan de S.A.N. a hacer un proyecto en Gutenberg para mejorar lo que tenían ya, bueno, primero empezamos a ver qué nos ofrece Gutenberg y qué nos ofrece el clásico y hacer una comparación. Entonces, vamos a ver un poco qué nos ofrecía lo clásico y qué nos ofrece ahora lo nuevo. Lo clásico está claro a mi preferencia. Yo era un poco reticente a Gutenberg. Supongo que por lo mismo que hay aquí mucha gente que fue muy rápido todo. De repente teníamos Gutenberg, no nos habíamos enterado, no habíamos metido una hostia en la cabeza y cómo que esto que es. Pero bueno, ha llegado para quedarse y yo soy ahora firme defensor de Gutenberg, así que, bueno. Lo clásico, pues, es lento y doloroso. Es poco visual a veces. Todos los elementos acaban muy desconectados uno entre otros los metaboxes, el editor, la izquierda, la derecha, te queda todo como un poco deslabazado. Baja integración externa. Aquí me refiero con servicios de terceros. Por ejemplo, bueno, se puede integrar el clásico, se puede integrar con cosas externas. Con servicios externos se ha hecho toda la vida y no pasa nada. Pero con Gutenberg es todo mucho más fluido. Una vez que sabes hacerlo, mucho más fluido y mucho más cohesionado con todo. Es difícil para coordinarse dentro de una newsroom, de una editorial grande. Es difícil para coordinarse el editor clásico. Ahora veremos por qué. Muy dado errores. Por lo menos el clásico que tenían era muy dado errores, porque había muchos metaboxes, muchos campos que rellenar. Ya los editores se equivocaban, no rellenaban lo correcto. En fin, y has arriesgado para el departamento legal. Esto es especialmente importante en The Sun porque el departamento legal juega un papel muy importante dentro de la editorial. Porque hay muchas denuncias en The Sun porque se habla de muchas noticias de famosos en posturas poco aconsejables o un poco que se le han pillado de prevenir. Bueno, lo nuevo de los nuevos Gutenberg, como todos ya sabemos, es flexible, es rápido. Una vez que ha cargado, es muy rápido porque le dáis a actualizar y prácticamente el post se actualiza. Una cosa buenísima que nos permite es hacer un análisis del texto en tiempo real. Ya veremos el ejemplo. La interacción con el usuario es mucho mejor y es más fácil de integrar con servicios externos una vez sabe. Como contra, es más caro de desarrollar porque requiere un equipo con más experiencia. Perdón. Tienes que saber Gutenberg, que a su vez tienes que saber real, que tienes que saber NPM, que tienes que saber SSI, que tienes que saber Javascript, que tienes que saber un poco de PHP y todo eso. Bueno, entonces la verdad es que la captura pantalla no me ha quedado tan poco clara. Pero bueno, este es el clásico, es que aquí debajo no sabéis lo que hay en Desan, estos horrorosos. Hay un montón de metavoces ahí feos y mal hechos y cada vez verán un niapa sobre niapa, verían un equipo nuevo y, en fin, un follo. Y el nuevo, ah, vale. Entonces nos propusieron cambiar el editor clásico. ¿Con qué ideas le venimos? Con una cosa que se llama Newspress, que es un paquete completo para Gutenberg, especializado en Desan. Pero luego ya veremos que puede afectar a otras cosas, a otras publicaciones. Y se convirtió, bueno, en Gutenberg. Mucho más limpio. Aquí veis una Publication Checklist que ya la veremos. Y una serie de herramientas para que los editores vayan mucho más rápido editando, tengan menos errores y todo vaya mucho más fluido. El tema de los bloques. Pues resulta que es lo de menos en este proyecto. Los bloques casi no hay. No hemos utilizado mucho. En realidad son sencillos. Hemos creado bloques especiales para Desan, unos layouts. Brightcove es un proveedor de vídeo, un bloque para ese proveedor de vídeo que ellos utilizan. Bueno, algunas cositas más, pero nada, cositas de dos columnas, una magenta, poco más. No hay muchos más bloques. Y los bloques que se van son casi todos los de WordPress. Eliminados para reducir ruido y que los editores no los van a utilizar al final para que los queríamos fuera. Efecto encabezado, listas shortcodes y algunos enveds. Twitter y no sé si Instagram también. Bueno, lo primero que hicimos nos dijeron, es que nosotros no tenemos un título. Tenemos dos títulos. Dijimos, ah, vale. Pues nada, pues quitamos el título. Suena muy fácil, pero Gutenberg, no sé si es un error de diseño o no, el título no es un bloque, que ojalá lo fuera, porque hubiera sido mucho más fácil. El título es una cosa aparte y es difícil quitarla y que funcione correctamente. Pero bueno, conseguimos quitarlo y lo reemplazamos con esto que veía aquí. De Sam tiene dos títulos, un kicker y un headline. Y, bueno, pues esto es un bloque. Es un bloque con una serie de tabulaciones. Entonces, de Sam utiliza esto de aquí. La parte roja es el kicker y la parte negrita es el headline. Pues simplemente reemplazamos, simplemente reemplazamos el título por esto. Además, esa cajita, tienes otro acceso directo, es que lo decidimos poner ahí arriba, porque son cosas muy comunes, que los editores suelen cambiar mucho. Dijimos, joder, pues vamos a poner SEO, social y teasers, que es una cosa propia de Sam. Lo vamos a poner todo aquí. Y ellos cambian enseguida todo. Además, el título de SEO, si no lo rellenas, toma el valor que tiene el título principal y el headline, creo que era, y ya está. Pero puedes cambiar todo lo relativo a SEO. Luego empezamos a trabajar con una cosa que, supongo, no sé si se le llama meta-bloque o no sé si me lo acabo de inventar o le llamamos nosotros así. Los meta-bloques, bueno, teníamos un problema. Y es que teníamos antiguamente una serie, un montón de meta-boxes que no podíamos meter en la sidebar de Gutenberg. No sé si visualizáis Gutenberg en la zona derecha. El sidebar es muy estrecho. Ahí no cabe todo. Y hay veces que se te queda muy pequeño. Entonces decidimos meter meta-bloques. Es decir, bloques que guarden sus datos, como meta-datos en el post, pero que no rendericen nada. De hecho, se pueden mover para arriba, para abajo, pero no sirven para nada moverlos. Y estamos esperando a que Gutenberg sacar un método un poquito más sencillo para bloquear esos bloques para que no se muevan. Os tengo que decir la verdad. Llevo meses sin trabajar en este proyecto. Pero porque ya me fui de ese proyecto. Cuando yo me fui, no se podían. O sea, esos bloques se movían y tal. Pero estamos a la espera que se pudieran bloquear y que fueran imposibles de borrar también. Tenía su truco. Pero bueno, también es una manera interesante buscarle una solución un poco imaginativa a no ponerlo todo en el sidebar y mover cosas al contenido, pero que no se rendericen. Bueno, la segunda parte eran plugins y sidebars. Pero los plugins de los que hablo aquí no son los plugins que activamos desde WordPress, los típicos, sino son plugins que extienden Gutenberg. Son trozos de código que extienden Gutenberg. Bueno, pues, empezamos con las sidebars. ¿Qué pasa? Supongo que lo habréis probado. Vosotros subís una serie de imágenes al post. Le vais al media manager para ver las imágenes que hay y podéis filtrar por imágenes que se han subido al post actual. Podéis ver un listado de las imágenes. Es una cosa que no se utiliza demasiado, pero está. Bueno, pues resulta que, aunque no se utiliza demasiado, de sán lo utiliza un montón. Bueno, pues, con Gutenberg, eso desaparece o por lo menos temporalmente había desaparecido. Teníamos que crearnos una sidebar nueva y que nos pidieron que se vieran todas las imágenes que se habían subido al post actual. Cada vez que subidas una imagen aquí se iba a ver reflejada aquí. Pero además, lo guay de esto es que si tú puedes arrastrar una imagen directamente aquí y también se subiría al post. No se introduciría como imagen, pero se subiría aquí. ¿Por qué? Porque luego también puedes coger esta imagen, arrastrarla y se inserta automáticamente como imagen. Entonces, es muy rápido. Un editor puede llegar, cascar 5 o 10 imágenes y empezar a arrastrar desde ahí hacia donde quiera. Super útil, super rápido y la verdad es que le encanta. Una otra sidebar muy parecida es los thumbnails. En The Sand tenemos, no solo tenemos una imagen destacada, tenemos varias, una para móvil, otra para landscape, otra para hero. Y bueno, pues, creamos otra sidebar para listar esas imágenes y para cargarlas desde ahí. Además, pusimos un recortador de imágenes. Los editores pueden subir aquí la imagen y darle ahí y hacer un crop de la imagen y lo que quieran. No recuerdo si esto se hizo con una librería que se llama React Crop o algo así. Bueno, el bloque de imagen también contiene una serie de mejoras y es que, por ejemplo, los en The Sand utilizan un banco de imágenes gigantesco, que es una especie de monopolio rarísimo, que es antiquísimo, un interfaz horrible. Porque, claro, tienen ese monopolio en el que los grandes medios pagan una pasta, supongo, por descargar esas imágenes y utilizarlas. Pero como no tienen competidor, pues, es horrible. Entonces, le hicimos varias mejores y es que no tengo una captura de pantalla de esa cosa horrenda, porque ya no tenía acceso a ellas. Pero bueno, de forma parecida podíamos, esto no te lo permitió oculten bien entonces, desde otra pestaña del navegador, arrastrar una imagen y también que te lo insertara como imagen. El CHP, que era el banco de imagen ese, también podíamos arrastrar y mover hasta allí. Eso tenía tela, porque había que integrar un montón de cosas. También, un cambio real para llevar una imagen, pues supone, otra vez, fijaos que es la interacción todo el rato. Otra imagen, arrastras y ya tienen la imagen. Esto no lo hacía Gutenberg por defecto y no lo pidieron. Después de esto, los platos fuertes para mí, yo creo que es lo que vamos a ver ahora, y se basa todo en lo mismo, en el análisis, en tiempo real de lo que está escribiendo del texto. La primera característica chula así es la lista de comprobación o publicación checklist, que proporciona una ayudita antes de que el editor vaya a publicar. Por ejemplo, que te diga, no has signado etiquetas, hay imágenes que no tienen un texto alternativo, has signado todas las imágenes destacadas, o el SEO te falta algo, o en resumen, al final, que te falta por rellenar dentro de Gutenberg o dentro del post para que puedas publicar. No sé cuánto tiempo me quedas. Vale. También teníamos la posibilidad de prevenir la publicación, de bloquear la publicación, pero bueno, en su momento no se hizo de momento. La lista de comprobación, aquí hay un ejemplo, tenemos una imagen en el que no tenemos una descripción de imagen. Entonces, la lista de comprobación te dice, se han completado cinco de nueve elementos, y entre ellos falta una descripción de una imagen en alguna parte. Si hacemos, si hiciéramos, además, si hiciéramos click sobre este enlace, Gutenberg hace scroll hasta la imagen y te lleva al sitio donde está faltando eso. Super rápido también. Escribes algo y ya esto se pone OK y ahora tienes seis de nueve, te faltan tres todavía. Pero lo del enlace, pues, para los editores, como que no tengo allá que hacer nada. Los van a despedir a todos, que no cuenta. Bueno, es el mismo ejemplo, pero un poco más grande. La lista de comprobación, como veis, pues tiene aquí nueve elementos. Y, bueno, te ofrece varias pistas. A mí lo que más me mola de todo el proyecto es la integración que tiene con el departamento legal. Como contaba el principio, el de San, bueno, tiene problemas legales con la gente. Y denuncias en general. Bueno, a ver, tampoco. Y entonces, tienen eso. Tienen mucha interacción entre la editorial y el departamento legal. ¿Cómo se llegan el coordinador hasta ahora? Tablas, Excel, e-mails, e-mails, madre mía. Entonces, todo este sistema de ida y venida eran muy propensos a fallos y denuncias. Con lo cual, había que inventar algún sistema que en pantalla te dijera algo, ¿no? Bueno, pues, lo voy a mostrar con un ejemplo. Imaginaos que desde San recibió el año pasado una denuncia por The Disney diciendo que no volvieran a hablar de Mickey Mouse cuando estaba con sus hijos por la calle, con los ratoncites que no sé quiénes son los hijos de Mickey Mouse. Entonces, estamos escribiendo Mickey Mouse. Y cuando lo escribimos, sale ahí, estoy en la análisis en tiempo real, sale un warning diciendo no puedes, hay algo aquí de lo que no puedes hablar. Y si le das la más información, te salta la sidebar, este es el icono, la sidebar del legal diciéndote, hay cosas que resolver sobre Mickey Mouse. Bueno, pues, hacemos click sobre el request legal review y se nos abre un pop-up en el que vamos a mandar un e-mail al departamento legal. Y este e-mail contiene un enlace para el abogado o no sé qué clase de gente trabaja ahí, porque le va a llevar a este post y va a poder revisarlo y va a poder dejar una nota. No tengo capturas porque montar en local. El tema legal era un jaleo. Pero aquí apareciría una caja de texto para el abogado y diría, para la persona que revisa, diría, no puedes publicar esto porque Mickey Mouse, no podemos hablar de Mickey Mouse. Y deja un comentario. Había la posibilidad también de bloquear la publicación, pero creo que no estaba hecha tampoco por alguna razón, no sé por qué. Y bueno, le deja al editor esa nota. El editor recibe un e-mail, con otra vez el enlace al post, lo corrige, borra Mickey Mouse o borra el post, no hablan de Mickey Mouse y sacó. Vale, pues, esas son las caras, o sea, hay muchísimo más. Dentro de este proyecto es un proyecto de Gutenberg muy grande. Yo creo que no debe haber muchos proyectos así de tochos de Gutenberg, o sea, está guay comprobar hasta donde llega Gutenberg, el equipo también se ha metido en ayudar en el core de Gutenberg para problemas que hemos ido encontrando. O sea, ha sido un viaje, está muy chulo. Voy a hablar ahora de la parte un poquito técnica, pero no demasiado, la última parte ya. ¿Cómo gestionamos todo esto? Bueno, New Express es un plugin, ¿vale? Pero es un plugin que no tiene nada. Es un plugin que está vacío. Creo que tiene un archivo .php y se maneja con Composer. No sé si, bueno, los que no sepáis lo que es Composer, Composer gestiona dependencias de PHP. No sé si al que no conozcan, radia, lo mismo, tampoco sabe lo que es. Pero bueno, es como una manera de cargar, digamos, plugins para PHP, como si cargaras plugins extras para, pero para PHP, no para WordPress. Código PHP externo. Entonces, lo que hacíamos era gestionar todas las dependencias con Composer. ¿Cómo? Pues las características principales, el Publication Checklist, la lista de publicación previa, el ImageCrop, lo que recorta la imagen en los sitebars, el workflow de Legal y el Multitítulo, por poner ejemplos, son cuatro módulos distintos dentro de New Express. Y, además, hay otro módulo que se llama, también, de PHP. Bueno, PHP ya ha escribido, obviamente. Sun Customizations, que son las personalizaciones exclusivas para de Sun. Y esa exclusividad, la verdad, es que incluye casi todo, en realidad, que es los bloques, los plugins con sus sitebars, básicamente, todo. Excepto estos módulos que he puesto, más algunos más, pero nada importante. Ah, vale. Bueno, ahora os digo por qué así. Como para que veáis cómo funciona un poquito la Publication Checklist, igual que New Express está vacío, la Publication Checklist también está vacío. La Publication Checklist, si se enciende, digamos, y se importa como Composer, está completamente vacía. No hay nada. Es el Sun Customizations, las personalizaciones de Sun, el que registra a través de una, el que haya manejado un poco Gutembert, sabrá de lo que hablo. Pero, bueno, es muy rápido. Tenemos una función que registra un item, un item. Ahora mismo no me acuerdo cómo se dice español. Y tenemos una Store del Publication Checklist, donde se guardan todos los items. Y cada, tú le dices al registerItem, oye, registrame, pues, este de aquí, el Legal Warnings. Y no se cumple si esto y se cumplirá si lo otro. Le dices al registerItem, eso. Y esto está guardando el Sun Customizations. Pero, a la vez, está el Publication Checklist, como hemos visto antes, como un módulo externo. Entonces, esto registra las cosas aquí. O sea, que al final, esto está vacío, esto casi está vacío, Composer se trae las cosas. Está todo vacío, no hemos hecho nada. Esto es un humo, estoy vendiendo humo aquí. Bueno, ahora mi, Newspers, de San Tino, es la intención de ponerlo, de hacerlo abierto, de ponerlo en algún repositorio. Pero por el momento, nosotros utilizamos la Publication Checklist en el repositorio HumanMade, porque si alguien le interesa echa lo que funciona. Ya os digo, es una cosa vacía, extensible, y que se pueden registrar items, ¿no? ¿Por qué esta estructura? ¿Por qué Composer? ¿Por qué está todo vacío? ¿Por qué aquí no hay nada? ¿Por qué todo es módulo? ¿Por qué no ponerlo todo en el Newspers y al final es para de San? Pues, porque en el futuro, no se quiere que sea solo para de San. Newscore, que es la empresa nodriza de San, tiene también muchas otras publicaciones en las que se tiene intención utilizar Newspers. Entonces, por ejemplo, para el New York Post, pues a lo mejor no quiere el ImageCrop ni el Multitítulo, pero quiere el Workflow de Legal y el Publication Checklist, y obviamente tendrá sus personalizaciones. Y el Wall Street Journal, también tendrá sus personalizaciones, el ImageCrop y el Publication Checklist, pero no quiere ni legal ni multitítulo. Pues, así vas cogiendo los módulos que te interesan dependiendo de la publicación donde estés. El futuro, bueno, el futuro, esto también era un poco el futuro, en realidad esto no funciona así ahora. El futuro es una cosa muy ambiciosa, no sé si se llegará a hacer, porque es demasiado ambiciosa para... Bueno, es que Newspers deje de ser un plugin en cada una de las publicaciones y se cree un centro, digamos, una instalación WordPress céntrica desde donde se envía el contacto desde donde se envía el contenido a todas las publicaciones. Entonces, tendríamos un servidor propio con Newspers, se cargan los bloques que también se quieren, que sean bloques que se reutilicen entre publicaciones y otras, o sea, la intención, el Workflow legal y la lista de publicación, todo dentro de Newspers, también en una instalación aparte y con la resapi, vas publicando en el New York Post, en The Sound o en Wall Street Journal, dependiendo del editor y a qué publicación perteneces. Y ya está. Muchas gracias. Muchas gracias, Ignacio. ¿Alguien tiene alguna pregunta para hacerle a Ignacio? ¿Alguna mano por ahí levantada? Por aquí, venga. Es fácil, no te preocupes. Ha estado muy interesante. Una pregunta, ¿cómo gestiones el tema del multititulo? Porque al quitar el campo del título, la hora de guardar la base de datos, ¿qué guardáis en la base de datos? Creo que son metadatos. Y ya está. No sé si el headline ahora mismo es que no me acuerdo. Ya te digo hace meses que las detalles, detalles a lo mejor no me acuerdo. No sé si se guardaba el título, cómo título, el headline como título y el kicker como metadato o incluso... No. El kicker era una taxonomía y el headline no estoy seguro si era título o metadato ahora mismo. Pero el kicker era una taxonomía porque rellenan los kickers, se repiten. Son como punch headlines de estos y los utilizan mucho en de sal. Entonces el kicker creo que era una taxonomía si no os recuerdo mal. A ti. ¿Alguien tiene alguna duda, alguna pregunta más? Ese de ahí. Yo quería. Muchas gracias. La charla es la leche. No la hostia. Que no se puede decir. ¿Tenéis informes de cómo esto ha mejorado la productividad, ha reducido los errores? ¿Hay analítica de cómo ha mejorado esto? No. Es una cosa que ha faltado en el proyecto. O sea, nos han hecho más allá de pruebas, o sea, sí que hemos hecho pruebas con los editores pero ha faltado algo de analítica. Pero es que estaba tan claro, era tan obvio que en su vídeo iba a mejorar que es que casi no hacía falta. O sea, era muy obvio que Guttemberg le iba a hacer trabajar mucho mejor. Han bajado las bajas laborales y estas cosas. No que nosotros, que yo sepa, no. Pero, o sea, el grupo editor, o sea, todos los editores, cada vez que veían decían, tío, es que ya era hora de esto, es que esto era horroroso. O sea, es que tenían que repetir las cosas mil veces, se equivocaban mil veces, email, Excel, a que era una pesadilla y han visto Guttemberg y dicen, tío, es que esto es otra cosa, claro. Es que en realidad no hacía falta analítica. Era tan fácil mejorar lo que casi no hacía falta. Gracias. Pero me hubiera gustado, la verdad, verlo. ¿Alguna pregunta más, chicos? ¿Nadie más? Lavaos bien las manos 20 segundos. No toqué mucho los ojos, la nariz, que estamos en una de las provincias con más probabilidad de coronavirus. Pues un fuerte abrazo Muchas gracias, Ignacio. Gracias.