SlideShare una empresa de Scribd logo
1 de 19
Descargar para leer sin conexión
Marta Torre
Editor de bloques
(Gutenberg): De
odiarlo a no poder
vivir sin él
Disclaimer
Todo lo que verás en esta ponencia es en base a mi opinión
y experiencia profesional.
Cada situación es única y puede ser que no te sirva lo que
vas a escuchar.
No soy ninguna gurú, me puedo equivocar.
¿Qué es el editor de bloques?
¿Qué es es editor de bloques
o Gutenberg?
Un señor que escribía biblias.
El nuevo editor de WordPress (que ya no es
tan nuevo).
Reemplaza el editor clásico de WordPress.
¿Qué nos aporta el nuevo
editor?
Crear layouts personalizados
Cambiar colores, tamaños de fuente
Columnas
Incrustados
Imágenes de fondo
Botones
¿Y qué pasa con los builders?
Maquetadores
visuales
Ventajas del editor vs
maquetadores
Nativo
Rendimiento
Escalabilidad
Accesibilildad web
HTML semántico
Comunidad WordPress
Dependencias
Sostenibillidad web
Evolución
Ventajas de los maquetadores
vs editor de bloques
Experiencia de usuario
Desarrollos más rápidos
Para hacer funciones complejas, necesitas
saber desarrollo.
Usuarios para editor de
bloques
Redactores de contenido - copys
Diseñadores y diseñadoras
Implementadores e implementadoras
Desarrolladores y desarrolladoras
Marketeros y marketeras
Usuarios básicos
Tipos de bloques
Nativos (texto, medios, diseño,
widgets, incrustados)
Bloques personalizados
Plugins de bloques
Bloques con ACF
Mi experiencia
¿Cuándo empecé a trabajar con el
nuevo editor?
Vamos a ser realistas, en mi opinión salió un poco
verde
Me formé mucho
Probé mucho y rompí mucho también
Esperé más o menos un año o año y medio
¿Cómo empecé?
Conocer muy bien los tipos de
bloques
Creé un sistema de desarrollo
nuevo
Hablé con mi diseñadora
Empecé "copiando" otros
desarrollos que había hecho pero
con el editor nuevo.
Colecciones de bloques
Empezar como
implementador/a o diseñador/a
Bloques nativos
Colecciones de bloques
Diseño a medida o
personalización de tema
Empezar como dev
Bloques nativos
Front-end a medida o con child
theme
Planteamiento de bloques: ACF o
React
React
Full Site Editing
¿Por qué uso el editor de bloques
y no maquetador visual?
Tipo de cliente
Rapidez
Trabajo siempre con diseñador o diseñadora
Código limpio
Rendimiento
Que nadie te diga cómo tienes que trabajar, pero
piensa siempre en los usuarios y no en lo que te sea
fácil a ti
Eskerrik asko!
Desarrolladora full-stack freelance especializada
en WordPress y APPS.
Escribo mucho en martatorre.dev
Co-organizadora meetup WordPress Bilbao
Divulgación sobre el papel de la mujer en el
mundo del desarrollo y buenas prácticas en
desarrollo de software.
@martatorredev | martatorre.dev

Más contenido relacionado

Similar a Editor de bloques (Gutenberg) De odiarlo a no poder vivir sin él

Herramientas de diseño en la web gratuitas
Herramientas de diseño en la web gratuitasHerramientas de diseño en la web gratuitas
Herramientas de diseño en la web gratuitasLorena Castro
 
Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011Hernan Beati
 
Consejos de un perro viejo programador
Consejos de un perro viejo programadorConsejos de un perro viejo programador
Consejos de un perro viejo programadorBraulio Diez Botella
 
Herramientas tecnológicas de trabajo colaborativo
Herramientas tecnológicas de trabajo colaborativoHerramientas tecnológicas de trabajo colaborativo
Herramientas tecnológicas de trabajo colaborativoYURANYYERALDYNHERNAN
 
Elementos a considerar en un sitio web pedagógico
Elementos a considerar en un sitio web pedagógicoElementos a considerar en un sitio web pedagógico
Elementos a considerar en un sitio web pedagógicoJorge Hernán Soto Osorio
 
Geekend 2018 - No trabajes en Local! (Utiliza Vagrant o Docker)
Geekend 2018 - No trabajes en Local! (Utiliza Vagrant o Docker)Geekend 2018 - No trabajes en Local! (Utiliza Vagrant o Docker)
Geekend 2018 - No trabajes en Local! (Utiliza Vagrant o Docker)Osvaldo Mercado Coss
 
Presentación sobre conceptos de Dw
Presentación sobre conceptos de DwPresentación sobre conceptos de Dw
Presentación sobre conceptos de DwXimenaOrrantia
 
Diseñar para WordPress y que en la fase de desarrollo nadie muera en el intento
Diseñar para WordPress y que en la fase de desarrollo nadie muera en el intentoDiseñar para WordPress y que en la fase de desarrollo nadie muera en el intento
Diseñar para WordPress y que en la fase de desarrollo nadie muera en el intentoAna Cirujano
 
Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...
Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...
Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...JuanKa Díaz - jdevelopia
 
Worklogs Para La Web - Ampliando las fronteras del Modding en la red
Worklogs Para La Web - Ampliando las fronteras del Modding en la redWorklogs Para La Web - Ampliando las fronteras del Modding en la red
Worklogs Para La Web - Ampliando las fronteras del Modding en la redJuan David Saab
 

Similar a Editor de bloques (Gutenberg) De odiarlo a no poder vivir sin él (20)

Wordpress
WordpressWordpress
Wordpress
 
Diapositiva de Wordpress
Diapositiva de WordpressDiapositiva de Wordpress
Diapositiva de Wordpress
 
Artisteer
ArtisteerArtisteer
Artisteer
 
Herramientas de diseño en la web gratuitas
Herramientas de diseño en la web gratuitasHerramientas de diseño en la web gratuitas
Herramientas de diseño en la web gratuitas
 
Ebook capitulos
Ebook capitulosEbook capitulos
Ebook capitulos
 
Programas
ProgramasProgramas
Programas
 
Congreso web
Congreso webCongreso web
Congreso web
 
Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Consejos de un perro viejo programador
Consejos de un perro viejo programadorConsejos de un perro viejo programador
Consejos de un perro viejo programador
 
Front
FrontFront
Front
 
Herramientas tecnológicas de trabajo colaborativo
Herramientas tecnológicas de trabajo colaborativoHerramientas tecnológicas de trabajo colaborativo
Herramientas tecnológicas de trabajo colaborativo
 
Frontend Developer
Frontend DeveloperFrontend Developer
Frontend Developer
 
Elementos a considerar en un sitio web pedagógico
Elementos a considerar en un sitio web pedagógicoElementos a considerar en un sitio web pedagógico
Elementos a considerar en un sitio web pedagógico
 
Geekend 2018 - No trabajes en Local! (Utiliza Vagrant o Docker)
Geekend 2018 - No trabajes en Local! (Utiliza Vagrant o Docker)Geekend 2018 - No trabajes en Local! (Utiliza Vagrant o Docker)
Geekend 2018 - No trabajes en Local! (Utiliza Vagrant o Docker)
 
Presentación sobre conceptos de Dw
Presentación sobre conceptos de DwPresentación sobre conceptos de Dw
Presentación sobre conceptos de Dw
 
Diseñar para WordPress y que en la fase de desarrollo nadie muera en el intento
Diseñar para WordPress y que en la fase de desarrollo nadie muera en el intentoDiseñar para WordPress y que en la fase de desarrollo nadie muera en el intento
Diseñar para WordPress y que en la fase de desarrollo nadie muera en el intento
 
Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...
Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...
Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...
 
Worklogs Para La Web - Ampliando las fronteras del Modding en la red
Worklogs Para La Web - Ampliando las fronteras del Modding en la redWorklogs Para La Web - Ampliando las fronteras del Modding en la red
Worklogs Para La Web - Ampliando las fronteras del Modding en la red
 
Etapas del desarrollo web
Etapas del desarrollo webEtapas del desarrollo web
Etapas del desarrollo web
 

Más de Marta Torre

El FSE ha llegado: ¿Por dónde empiezo?
El FSE ha llegado: ¿Por dónde empiezo?El FSE ha llegado: ¿Por dónde empiezo?
El FSE ha llegado: ¿Por dónde empiezo?Marta Torre
 
¿Por qué tengo que luchar por la diversidad en WordPress?
¿Por qué tengo que luchar por la diversidad en WordPress?¿Por qué tengo que luchar por la diversidad en WordPress?
¿Por qué tengo que luchar por la diversidad en WordPress?Marta Torre
 
¿Por qué mi desarrollo web en WordPress tiene que ser accesible?
¿Por qué mi desarrollo web en WordPress tiene que ser accesible?¿Por qué mi desarrollo web en WordPress tiene que ser accesible?
¿Por qué mi desarrollo web en WordPress tiene que ser accesible?Marta Torre
 
Cómo hace una desarrolladora mindungui para que le hagan caso creando contenido
Cómo hace una desarrolladora mindungui para que le hagan caso creando contenidoCómo hace una desarrolladora mindungui para que le hagan caso creando contenido
Cómo hace una desarrolladora mindungui para que le hagan caso creando contenidoMarta Torre
 
WordPress and diversity: Can we be more diverse?
WordPress and diversity: Can we be more diverse?WordPress and diversity: Can we be more diverse?
WordPress and diversity: Can we be more diverse?Marta Torre
 
Entornos de desarrollo local en WordPress
Entornos de desarrollo local en WordPressEntornos de desarrollo local en WordPress
Entornos de desarrollo local en WordPressMarta Torre
 
Antes de picar piedra (o código) ¿Qué necesito?
Antes de picar piedra (o código) ¿Qué necesito?Antes de picar piedra (o código) ¿Qué necesito?
Antes de picar piedra (o código) ¿Qué necesito?Marta Torre
 
¿Por qué lo llamamos plantilla cuando queremos decir tema?
¿Por qué lo llamamos plantilla cuando queremos decir tema?¿Por qué lo llamamos plantilla cuando queremos decir tema?
¿Por qué lo llamamos plantilla cuando queremos decir tema?Marta Torre
 
Mujeres en la comunidad de WordPress
Mujeres en la comunidad de WordPressMujeres en la comunidad de WordPress
Mujeres en la comunidad de WordPressMarta Torre
 
Ser WordPress dev & Mujer
Ser WordPress dev & MujerSer WordPress dev & Mujer
Ser WordPress dev & MujerMarta Torre
 
Funciones en WordPress. Buenas prácticas.
Funciones en WordPress. Buenas prácticas.Funciones en WordPress. Buenas prácticas.
Funciones en WordPress. Buenas prácticas.Marta Torre
 

Más de Marta Torre (11)

El FSE ha llegado: ¿Por dónde empiezo?
El FSE ha llegado: ¿Por dónde empiezo?El FSE ha llegado: ¿Por dónde empiezo?
El FSE ha llegado: ¿Por dónde empiezo?
 
¿Por qué tengo que luchar por la diversidad en WordPress?
¿Por qué tengo que luchar por la diversidad en WordPress?¿Por qué tengo que luchar por la diversidad en WordPress?
¿Por qué tengo que luchar por la diversidad en WordPress?
 
¿Por qué mi desarrollo web en WordPress tiene que ser accesible?
¿Por qué mi desarrollo web en WordPress tiene que ser accesible?¿Por qué mi desarrollo web en WordPress tiene que ser accesible?
¿Por qué mi desarrollo web en WordPress tiene que ser accesible?
 
Cómo hace una desarrolladora mindungui para que le hagan caso creando contenido
Cómo hace una desarrolladora mindungui para que le hagan caso creando contenidoCómo hace una desarrolladora mindungui para que le hagan caso creando contenido
Cómo hace una desarrolladora mindungui para que le hagan caso creando contenido
 
WordPress and diversity: Can we be more diverse?
WordPress and diversity: Can we be more diverse?WordPress and diversity: Can we be more diverse?
WordPress and diversity: Can we be more diverse?
 
Entornos de desarrollo local en WordPress
Entornos de desarrollo local en WordPressEntornos de desarrollo local en WordPress
Entornos de desarrollo local en WordPress
 
Antes de picar piedra (o código) ¿Qué necesito?
Antes de picar piedra (o código) ¿Qué necesito?Antes de picar piedra (o código) ¿Qué necesito?
Antes de picar piedra (o código) ¿Qué necesito?
 
¿Por qué lo llamamos plantilla cuando queremos decir tema?
¿Por qué lo llamamos plantilla cuando queremos decir tema?¿Por qué lo llamamos plantilla cuando queremos decir tema?
¿Por qué lo llamamos plantilla cuando queremos decir tema?
 
Mujeres en la comunidad de WordPress
Mujeres en la comunidad de WordPressMujeres en la comunidad de WordPress
Mujeres en la comunidad de WordPress
 
Ser WordPress dev & Mujer
Ser WordPress dev & MujerSer WordPress dev & Mujer
Ser WordPress dev & Mujer
 
Funciones en WordPress. Buenas prácticas.
Funciones en WordPress. Buenas prácticas.Funciones en WordPress. Buenas prácticas.
Funciones en WordPress. Buenas prácticas.
 

Último

BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...ITeC Instituto Tecnología Construcción
 
Introducción a Funciones LENGUAJE DART FLUTTER
Introducción a Funciones LENGUAJE DART FLUTTERIntroducción a Funciones LENGUAJE DART FLUTTER
Introducción a Funciones LENGUAJE DART FLUTTEREMMAFLORESCARMONA
 
Caso de éxito de Hervian con el ERP Sage 200
Caso de éxito de Hervian con el ERP Sage 200Caso de éxito de Hervian con el ERP Sage 200
Caso de éxito de Hervian con el ERP Sage 200Opentix
 
Segmentacion Segmantica_Modelos UNET and DEEPLABV3
Segmentacion Segmantica_Modelos UNET and DEEPLABV3Segmentacion Segmantica_Modelos UNET and DEEPLABV3
Segmentacion Segmantica_Modelos UNET and DEEPLABV3AlexysCaytanoMelndez1
 
Manual de Usuario APPs_AppInventor-2023.pdf
Manual de Usuario APPs_AppInventor-2023.pdfManual de Usuario APPs_AppInventor-2023.pdf
Manual de Usuario APPs_AppInventor-2023.pdfmasogeis
 
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLOPARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLOSelenaCoronadoHuaman
 
Unidad_3_T1_AutomatasFinitos presentacion
Unidad_3_T1_AutomatasFinitos presentacionUnidad_3_T1_AutomatasFinitos presentacion
Unidad_3_T1_AutomatasFinitos presentacionarmando_cardenas
 

Último (7)

BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
 
Introducción a Funciones LENGUAJE DART FLUTTER
Introducción a Funciones LENGUAJE DART FLUTTERIntroducción a Funciones LENGUAJE DART FLUTTER
Introducción a Funciones LENGUAJE DART FLUTTER
 
Caso de éxito de Hervian con el ERP Sage 200
Caso de éxito de Hervian con el ERP Sage 200Caso de éxito de Hervian con el ERP Sage 200
Caso de éxito de Hervian con el ERP Sage 200
 
Segmentacion Segmantica_Modelos UNET and DEEPLABV3
Segmentacion Segmantica_Modelos UNET and DEEPLABV3Segmentacion Segmantica_Modelos UNET and DEEPLABV3
Segmentacion Segmantica_Modelos UNET and DEEPLABV3
 
Manual de Usuario APPs_AppInventor-2023.pdf
Manual de Usuario APPs_AppInventor-2023.pdfManual de Usuario APPs_AppInventor-2023.pdf
Manual de Usuario APPs_AppInventor-2023.pdf
 
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLOPARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
 
Unidad_3_T1_AutomatasFinitos presentacion
Unidad_3_T1_AutomatasFinitos presentacionUnidad_3_T1_AutomatasFinitos presentacion
Unidad_3_T1_AutomatasFinitos presentacion
 

Editor de bloques (Gutenberg) De odiarlo a no poder vivir sin él

  • 1. Marta Torre Editor de bloques (Gutenberg): De odiarlo a no poder vivir sin él
  • 2. Disclaimer Todo lo que verás en esta ponencia es en base a mi opinión y experiencia profesional. Cada situación es única y puede ser que no te sirva lo que vas a escuchar. No soy ninguna gurú, me puedo equivocar.
  • 3. ¿Qué es el editor de bloques?
  • 4. ¿Qué es es editor de bloques o Gutenberg? Un señor que escribía biblias. El nuevo editor de WordPress (que ya no es tan nuevo). Reemplaza el editor clásico de WordPress.
  • 5. ¿Qué nos aporta el nuevo editor? Crear layouts personalizados Cambiar colores, tamaños de fuente Columnas Incrustados Imágenes de fondo Botones
  • 6. ¿Y qué pasa con los builders?
  • 8. Ventajas del editor vs maquetadores Nativo Rendimiento Escalabilidad Accesibilildad web HTML semántico Comunidad WordPress Dependencias Sostenibillidad web Evolución
  • 9. Ventajas de los maquetadores vs editor de bloques Experiencia de usuario Desarrollos más rápidos Para hacer funciones complejas, necesitas saber desarrollo.
  • 10. Usuarios para editor de bloques Redactores de contenido - copys Diseñadores y diseñadoras Implementadores e implementadoras Desarrolladores y desarrolladoras Marketeros y marketeras Usuarios básicos
  • 11. Tipos de bloques Nativos (texto, medios, diseño, widgets, incrustados) Bloques personalizados Plugins de bloques Bloques con ACF
  • 13. ¿Cuándo empecé a trabajar con el nuevo editor? Vamos a ser realistas, en mi opinión salió un poco verde Me formé mucho Probé mucho y rompí mucho también Esperé más o menos un año o año y medio
  • 14. ¿Cómo empecé? Conocer muy bien los tipos de bloques Creé un sistema de desarrollo nuevo Hablé con mi diseñadora Empecé "copiando" otros desarrollos que había hecho pero con el editor nuevo. Colecciones de bloques
  • 15. Empezar como implementador/a o diseñador/a Bloques nativos Colecciones de bloques Diseño a medida o personalización de tema
  • 16. Empezar como dev Bloques nativos Front-end a medida o con child theme Planteamiento de bloques: ACF o React React Full Site Editing
  • 17. ¿Por qué uso el editor de bloques y no maquetador visual? Tipo de cliente Rapidez Trabajo siempre con diseñador o diseñadora Código limpio Rendimiento
  • 18. Que nadie te diga cómo tienes que trabajar, pero piensa siempre en los usuarios y no en lo que te sea fácil a ti
  • 19. Eskerrik asko! Desarrolladora full-stack freelance especializada en WordPress y APPS. Escribo mucho en martatorre.dev Co-organizadora meetup WordPress Bilbao Divulgación sobre el papel de la mujer en el mundo del desarrollo y buenas prácticas en desarrollo de software. @martatorredev | martatorre.dev