SlideShare una empresa de Scribd logo
1 de 91
Descargar para leer sin conexión
DrupalCamp Costa Rica 2020
Drupal Admin UI
Presente y futuro de la
INTERFAZ DE ADMINISTRACIÓN DE USUARIO
Primero, el pasado.
https://www.slideshare.net/WEBSOLUTIONSHR/history-of-drupal-from-drop-10-to-drupal-8-59198423
https://www.marcdrummond.com/drupal/2011/05/20/new-views-interface-david-rothstein-drupal-camp-twin-cities-2011
El resultado es una experiencia totalmente
nueva para los Site Builders que usan Views (…)
“
< / >
Pero,
el foco estaba
en los site builders.
< / >
< / >
interfaz focalizada.
Qué esperan los usuarios hoy?
Interfaz separada por rol?
< / >
Admin UI Initiative
Historia de la
Administration User
Interface and Javascript
Modernization Initiative
design
JS
Reemplazar toda la interfaz
con Javascript.
Rediseñar toda la interfaz.
design
JS
Reemplazar toda la interfaz
con Javascript.
Rediseñar toda la interfaz.
Encuesta +150
Card Sorting +200
Estudio Comparativo
estudio
de
usuarios
Feedback:
estudio
de
usuarios
Diseño visualmente
más moderno
estudio
de
usuarios
https://dri.es/refreshing-the-drupal-administration-ui
Mejor gestión de Media
(Imágenes, ficheros, vídeos)
estudio
de
usuarios
Mejor gestión de Media
Media and Media Library están en Core 🎉
estudio
de
usuarios
Simplificar la compleja
experiencia de usuario
estudio
de
usuarios
Simplificar la compleja
experiencia de usuario
Pero de cuál de ellas?
estudio
de
usuarios
Layout Builder 🎉
Miedo a Guardar:
Previsualización de contenido
estudio
de
usuarios
Miedo a Guardar:
Perder información
estudio
de
usuarios
https://www.drupal.org/project/drupal/issues/3029488
https://www.drupal.org/project/autosave_form
estudio
de
usuarios
Miedo a Guardar:
Perder información
Configuración de la interfaz
específica para
editores de contenido
https://www.drupal.org/project/drupal/issues/3059984
estudio
de
usuarios
Rediseño
Admin UI
JS Drupal
theme
nuevo
diseño
Necesitamos un Nuevo diseño para Drupal 9.
Claro
Nuevo tema de administración para core
Modernización de las
herramientas de desarrollo
Frontend
https://www.drupal.org/docs/frontend-developer-tools-for-drupal-core
Necesitamos usar el mismo diseño en ambas UI.
Sistema de Diseño
Por esto creamos un
Integración automática con
guías de estilo externas
Storybook, Fractal, PatternLab…
Qué estamos preparando?
Admin UI
Color
Personalizaciones del theme de administración
https://www.drupal.org/project/ideas/issues/3090894
Palette
Tamaño de fuente, alto
contraste…
Personalizaciones de la UI por el propio usuario
https://www.drupal.org/project/drupal/issues/3067273
Cambios en el layout
Futuro
Fuera de la Initiativa
Otras cosas que están pasando
Dashboard
Personalizaciones para el usuario:
https://www.drupal.org/project/dashboard
formularios de contenido
Futuro de los
https://www.drupal.org/project/ideas/issues/3091766
la estrategia de contenido
es clave para Drupal
el contenido
es clave para Drupal
el contenido?
Dónde va a ser consumido
API-First
https://www.drupal.org/about/strategic-initiatives/api-first
https://www.drupal.org/project/ideas/issues/607396
Fieldable fields
1 cup of flour
QUANTITY UNIT INGREDIENT
Field Union, Rich Field, Multifield…
reflexiones
Algunas
Drupal 9 no es el mismo
producto que Drupal 7.
Los workflows de Core son
lentos.
Hay que tener en cuenta que:
La participación a largo plazo
tiene un gran impacto.
Necesitamos a las personas
(y empresas)
para sacar adelante Drupal.
La contribución dará más
visibilidad a su empresa.
d.o./about/strategic-initiatives
d.o./project/ideas
Admin
UI
UX
meetings Olivero
#admin-ui
#admin-ui-design
#ux #d9-theme
#admin-ui
#admin-ui-design
ckrina - @chumillas
drupal.org/slack
¡Gracias!

Más contenido relacionado

Similar a Presente y futuro de la Drupal Admin UI - Drupal Camp Costa Rica 2020

Unidad # 1 FIREWORKS 8
Unidad # 1 FIREWORKS 8Unidad # 1 FIREWORKS 8
Unidad # 1 FIREWORKS 8Detsyta Jadan
 
Curso Drupal 7 SiteBuilding parte 2
Curso Drupal 7 SiteBuilding parte 2Curso Drupal 7 SiteBuilding parte 2
Curso Drupal 7 SiteBuilding parte 2Alessandro Mascherpa
 
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...Ianpierr Miranda
 
Selfbank - Caso Éxito - DrupalCamp Caceres 2016
Selfbank - Caso Éxito - DrupalCamp Caceres 2016Selfbank - Caso Éxito - DrupalCamp Caceres 2016
Selfbank - Caso Éxito - DrupalCamp Caceres 2016David Gil Sánchez
 
Tecnologías para hacer Arquitectura de Información
Tecnologías para hacer Arquitectura de InformaciónTecnologías para hacer Arquitectura de Información
Tecnologías para hacer Arquitectura de InformaciónRodrigo Ronda
 
Introducción al Desarrollo para SharePoint con Visual Studio 2008
Introducción al Desarrollo para SharePoint con Visual Studio 2008Introducción al Desarrollo para SharePoint con Visual Studio 2008
Introducción al Desarrollo para SharePoint con Visual Studio 2008juliocasal
 
Presentación Jornada Drupal Sevilla Febrero 2015
Presentación Jornada Drupal Sevilla Febrero 2015Presentación Jornada Drupal Sevilla Febrero 2015
Presentación Jornada Drupal Sevilla Febrero 2015Javier Prada Oliva
 
Aplicacionesdeusoeducativo
AplicacionesdeusoeducativoAplicacionesdeusoeducativo
Aplicacionesdeusoeducativodorysvalero
 
Cv horacio vallejo-201302 - es
Cv   horacio vallejo-201302 - esCv   horacio vallejo-201302 - es
Cv horacio vallejo-201302 - esHoracio Vallejo
 
Nuevas experiencias y nuevas formas de trabajar con Office 365
Nuevas experiencias y nuevas formas de trabajar con Office 365Nuevas experiencias y nuevas formas de trabajar con Office 365
Nuevas experiencias y nuevas formas de trabajar con Office 365Juan Carlos Gonzalez
 
El gran diseño web (ensayo)
El gran diseño web (ensayo)El gran diseño web (ensayo)
El gran diseño web (ensayo)snax12
 
Trabajo Wiki de informática
Trabajo Wiki de informáticaTrabajo Wiki de informática
Trabajo Wiki de informáticaLaidalyIsabel
 
Diseño en la web
Diseño en la webDiseño en la web
Diseño en la webMiguel Gea
 

Similar a Presente y futuro de la Drupal Admin UI - Drupal Camp Costa Rica 2020 (20)

Unidad # 1 FIREWORKS 8
Unidad # 1 FIREWORKS 8Unidad # 1 FIREWORKS 8
Unidad # 1 FIREWORKS 8
 
Curso Drupal 7 SiteBuilding parte 2
Curso Drupal 7 SiteBuilding parte 2Curso Drupal 7 SiteBuilding parte 2
Curso Drupal 7 SiteBuilding parte 2
 
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...
 
Selfbank - Caso Éxito - DrupalCamp Caceres 2016
Selfbank - Caso Éxito - DrupalCamp Caceres 2016Selfbank - Caso Éxito - DrupalCamp Caceres 2016
Selfbank - Caso Éxito - DrupalCamp Caceres 2016
 
Tecnologías para hacer Arquitectura de Información
Tecnologías para hacer Arquitectura de InformaciónTecnologías para hacer Arquitectura de Información
Tecnologías para hacer Arquitectura de Información
 
Introducción al Desarrollo para SharePoint con Visual Studio 2008
Introducción al Desarrollo para SharePoint con Visual Studio 2008Introducción al Desarrollo para SharePoint con Visual Studio 2008
Introducción al Desarrollo para SharePoint con Visual Studio 2008
 
Presentación Jornada Drupal Sevilla Febrero 2015
Presentación Jornada Drupal Sevilla Febrero 2015Presentación Jornada Drupal Sevilla Febrero 2015
Presentación Jornada Drupal Sevilla Febrero 2015
 
Aplicacionesdeusoeducativo
AplicacionesdeusoeducativoAplicacionesdeusoeducativo
Aplicacionesdeusoeducativo
 
Usabilidad y diseño
Usabilidad y diseñoUsabilidad y diseño
Usabilidad y diseño
 
Cv horacio vallejo-201302 - es
Cv   horacio vallejo-201302 - esCv   horacio vallejo-201302 - es
Cv horacio vallejo-201302 - es
 
Nuevas experiencias y nuevas formas de trabajar con Office 365
Nuevas experiencias y nuevas formas de trabajar con Office 365Nuevas experiencias y nuevas formas de trabajar con Office 365
Nuevas experiencias y nuevas formas de trabajar con Office 365
 
Herramientas Case
Herramientas CaseHerramientas Case
Herramientas Case
 
avanttic - webinar: WebCenter Portal (14-06-2017)
avanttic - webinar: WebCenter Portal (14-06-2017)avanttic - webinar: WebCenter Portal (14-06-2017)
avanttic - webinar: WebCenter Portal (14-06-2017)
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
El gran diseño web (ensayo)
El gran diseño web (ensayo)El gran diseño web (ensayo)
El gran diseño web (ensayo)
 
Trabajo Wiki de informática
Trabajo Wiki de informáticaTrabajo Wiki de informática
Trabajo Wiki de informática
 
Mos Kitt Quo Vadis
Mos Kitt Quo VadisMos Kitt Quo Vadis
Mos Kitt Quo Vadis
 
Sgbd de las aplicaciones 2.0
Sgbd de las aplicaciones 2.0Sgbd de las aplicaciones 2.0
Sgbd de las aplicaciones 2.0
 
SharePoint Online IT Camps
SharePoint Online IT CampsSharePoint Online IT Camps
SharePoint Online IT Camps
 
Diseño en la web
Diseño en la webDiseño en la web
Diseño en la web
 

Último

Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfAnnimoUno1
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanamcerpam
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.FlorenciaCattelani
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxAlan779941
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfvladimiroflores1
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxJorgeParada26
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITMaricarmen Sánchez Ruiz
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxMiguelAtencio10
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...JohnRamos830530
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21mariacbr99
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estossgonzalezp1
 

Último (11)

Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 

Presente y futuro de la Drupal Admin UI - Drupal Camp Costa Rica 2020