Adobe Experience Manager frente a WordPress: la experiencia de creación comparada

Gracias, WordPress y Gutenberg, por hacer de la edición basada en bloques el estándar para la creación de páginas web. En este artículo, voy a comparar la nueva experiencia de creación en WordPress con la experiencia de Adobe Experience Manager (AEM), un sistema de administración de contenido empresarial que también incluye la edición basada en bloques. Implementé WordPress y AEM para varias empresas (como Informatica y Twitter) y tuve que darme cuenta de que, a pesar de que la experiencia de creación es fundamental para los autores no técnicos, los desarrolladores a menudo la descuidan.

Nota : Con el término “experiencia de creación” me refiero a la experiencia de usuario para aquellas personas cuyo objetivo es crear y publicar contenido en un sitio web. No me refiero a las personas que van a consumir el contenido publicado. Si no ha pensado antes en la experiencia de creación, aquí hay un manual de Eileen Webb, quien también apareció en Smashing Book 5.

Adobe Experience Manager es, en comparación con WordPress, un sistema complejo con una curva de aprendizaje pronunciada, especialmente para los desarrolladores. Al mismo tiempo, AEM es más fácil de usar que las soluciones de administración de contenido más establecidas y costosas, lo que coloca a AEM en algún lugar entre las soluciones gratuitas y las muy costosas.

Desde una perspectiva técnica, AEM es un conglomerado de tecnologías de código abierto con varios toques de Adobe, lo que coloca a AEM en algún lugar entre el software de código abierto y el propietario. Son esos toques de Adobe los que hacen que el sistema sea brillante y utilizable. Por ejemplo, un generador visual de páginas de arrastrar y soltar ha sido la forma estándar de crear páginas en AEM, mucho antes de que naciera WordPress Gutenberg.

Echemos un vistazo a algunas de las características que elevan la experiencia de creación por encima del promedio.

Componentes (Bloques)

Una de las ideas más importantes para los sitios web es el concepto de componente (o bloque en la jerga de WordPress). Un componente representa una pieza de contenido que sigue reglas específicas en lugar de ser una gota de cualquier cosa. Por ejemplo, puede tener un componente de video donde el autor solo puede pegar un enlace de Youtube y controlar la configuración específica de Youtube. O puede tener un componente de cita donde el autor agrega una cita a un campo de texto y el nombre de la persona citada a otro campo de texto. Incluso puede tener un componente de diseño que contenga otros componentes y los muestre uno debajo del otro en un dispositivo móvil, mientras que en una pantalla grande, esos componentes se distribuyen en tres columnas.

Un autor sabe exactamente qué esperar de un componente específico y puede llenarlo fácilmente con el contenido apropiado. Igualmente importantes son los beneficios a largo plazo y las nuevas oportunidades que no serían factibles para el enfoque de la vieja escuela de "un campo de texto se adapta a todo el contenido" que ha prevalecido durante las últimas décadas:

• Si un componente requiere una entrada de fecha, el cuadro de diálogo de creación del componente puede mostrar un selector de fecha en lugar de un campo de texto sin formato, lo que facilita al autor elegir una fecha con el formato correcto.
• Si un diseñador quiere que el nombre de una persona citada se muestre encima de la cita en lugar de debajo de la cita, el desarrollador puede reorganizar fácilmente el código porque la cita y el nombre se almacenan por separado. Si la cita y el nombre se almacenaran a la antigua usanza, el desarrollador tendría que extraer manualmente el nombre del blob de texto y moverlo delante de la cita.
• Si es necesario traducir un presupuesto del inglés al alemán, se puede enviar el presupuesto a un servicio de traducción. Si el servicio de traducción ya ha traducido este presupuesto anteriormente, puede devolver la traducción guardada. Si la cita fuera parte de un párrafo más largo en lugar de ser independiente, la traducción sería mucho más difícil y probablemente requeriría un traductor humano.
• Si un video carece de transcripción y, por lo tanto, impide que los usuarios sordos lo consuman, el componente se puede complementar con un texto de resumen que hace que el video sea más accesible para los usuarios sordos.

La edición basada en componentes ha sido adoptada por los usuarios de AEM durante un tiempo y, debido a la llegada de Gutenberg en WordPress 5.0, los editores basados ​​en componentes son ahora el estándar de facto para la creación de páginas web.

Nota : Leonardo Losoviz profundiza en las implicaciones de los bloques en el contexto de WordPress.

Fragmentos

Los fragmentos de contenido y los fragmentos de experiencia son términos nuevos que han estado dominando la escena de AEM durante el año pasado. Resumiré esos dos conceptos simplemente como fragmentos . En esencia, los fragmentos permiten a los autores crear contenido neutral que se puede usar en la web, dispositivos móviles, redes sociales y otros canales.

Los fragmentos se crean fuera de un editor de páginas y, en comparación con un componente, tienen menos opiniones acerca de cómo se utilizarán sus datos. Imaginemos un fragmento llamado “Cita del día” que los autores actualizan una vez al día con una nueva cita. Ahora, el texto citado de este fragmento se puede usar en una variedad de lugares:

• Un widget de pie de página muestra la cita del día en la parte inferior de cada página. Tan pronto como un autor actualiza el fragmento, el pie de página también se actualiza. El fragmento determina lo que se mostrará, mientras que el widget de pie de página determina cómo se mostrará la cita.
• Un componente de cita permite a los autores importar una cita de "Citas del día" anteriores y agregarla a la publicación del blog.
• Un complemento agrega un botón "Compartir cotización del día" a la página de inicio. Cada vez que alguien hace clic en ese botón, el complemento toma la cita del día y la formatea para cumplir con las mejores prácticas para compartir a través de Facebook, Twitter y correo electrónico.

En WordPress, los widgets y los menús parecen fragmentos: los autores crean elementos de menú en una interfaz neutral, luego los desarrolladores muestran esos elementos como parte del tema de una manera que tenga sentido para el tema. Si el tema se reemplaza por un nuevo tema, esos elementos del menú persisten y también se pueden mostrar en el nuevo tema, aunque el nuevo tema se vea muy diferente al anterior.

Espero que los fragmentos se utilicen más ampliamente, aunque el concepto tiene diferentes nombres en diferentes sistemas. De hecho, Matt Mullenweg ya anunció que su equipo se está enfocando actualmente en "expandir la interfaz de bloques a otros aspectos de la gestión de contenido [incluida la creación de] un bloque de menú de navegación [y] trasladar todos los widgets a bloques".

Plantillas de página

Las plantillas de páginas se pueden describir como componentes de nivel superior porque incluyen varios otros componentes. En AEM, los autores pueden crear plantillas que bloquean componentes, como un componente de encabezado, en una posición fija y, al mismo tiempo, definen áreas flexibles donde se pueden agregar componentes por página.

Un aspecto importante de esto es que un área tan flexible puede limitar qué componentes pueden entrar en ella. De esa manera, puede crear plantillas de página para diferentes propósitos:

• Plantilla #1: Plantilla de página de artículo
  El encabezado, el título, el área de contenido y el pie de página son fijos. El autor puede actualizar el componente del título, pero no puede eliminarlo. El autor puede colocar componentes de texto, imagen y video en el área de contenido.
• Plantilla n.º 2: plantilla de página de destino
  Solo se fijan un logotipo y un componente de título en la parte superior de la página. El autor puede elegir entre un conjunto de componentes específicos de la página de destino que están optimizados para convertir a los visitantes en clientes.

Permisos y flujos de trabajo

Es poco probable que todos los autores de un equipo grande puedan modificar plantillas críticas, como la plantilla de la página del artículo. Para evitar que las personas puedan romper el sitio de forma accidental e irrevocable, es importante definir quién puede modificar qué parte del sitio. Bienvenido al concepto de permisos y flujos de trabajo. Este concepto no es nuevo ni especial, pero es importante para equipos grandes.

Un sitio típico de AEM incluye el sitio web de producción real y al menos un sitio de producción, también conocido como staging . Los autores pueden publicar contenido en un sitio de ensayo privado antes de publicarlo en el sitio de producción pública. El proceso de publicación de contenido para ensayo seguido de publicación de contenido para producción puede denominarse flujo de trabajo. Otro tipo común de flujo de trabajo es que el contenido debe pasar por un proceso de aprobación antes de que pueda publicarse en el sitio de producción, y solo ciertas personas pueden presionar el botón "publicar en producción".

Los permisos y los flujos de trabajo son características que son insignificantes en equipos pequeños. Sin embargo, a medida que crece un equipo, esas características se vuelven críticas para la productividad y el éxito del equipo. A pesar de que AEM viene con los conceptos básicos para crear flujos de trabajo y los desarrolladores pueden hacer que AEM funcione para cualquier necesidad específica, requiere algunos cambios de código y no se implementa con un chasquido de dedos. Esto es aún más cierto para WordPress. Sería bueno tener una herramienta fácil de crear para crear flujos de trabajo personalizados.

Modos de edición

En AEM, los autores pueden editar y ver rápidamente cada página en diferentes modos. El autor cambia entre los modos según el trabajo que se debe realizar:

• Para organizar los componentes y editar su contenido, elija el modo de edición.
• Para cambiar la disposición de los componentes en un iPad, elija el modo Diseño .
• Para ver el contenido como si fuera un visitante, seleccione el modo Vista previa .

Hay algunos modos más que aparecen según la configuración del sitio. Un escenario ideal es que las pruebas A/B y la personalización se configuren integrando AEM con Adobe Target. Usando el modo de orientación , los autores pueden definir cuándo mostrar ciertos componentes en función de la ubicación del visitante, la edad, la página de referencia, la hora del día, etc.

Las integraciones en AEM son comparables a los complementos en WordPress, pero con la diferencia de que las integraciones de AEM son más complejas y, por lo general, personalizadas. Especialmente, la integración de AEM Target puede ser más dolorosa de lo que los vendedores hacen parecer.

Dejando a un lado la complejidad del desarrollo y el dinero, la consecuencia de tal esfuerzo puede resultar en una excelente experiencia de creación. El concepto de los modos de edición demuestra cómo un simple menú desplegable crea una oportunidad para que los autores realicen una variedad de trabajos mientras permanecen en una sola página.

Editor visual de una sola página

Al observar las capturas de pantalla de este artículo, debe haberse dado cuenta de que el editor de páginas de AEM no solo se basa en componentes, sino que también es visual: si un componente se actualiza, el cambio se vuelve visible de inmediato y el autor no tiene que abrir una vista previa en un nueva ventana. Toda una característica. Aunque los creadores de páginas son omnipresentes en el ecosistema de WordPress, el equipo detrás de WordPress aún tiene que definir una mejor práctica para la edición visual. Permítanme dar un paso más y preguntar: ¿Qué sucede si se casa con editores visuales con aplicaciones de una sola página (SPA)?

Los SPA son sitios web en los que navegar de una página a otra se siente fluido porque el navegador no tiene que volver a cargar toda la página. Algunos sitios web populares, como Gmail y Facebook, son SPA, pero la mayoría de los sitios en Internet no lo son. Una de las razones de una adopción bastante baja es que crear SPA es difícil y mantener SPA con miles de páginas es aún más difícil. Actualmente, existen dos formas principales de administrar el contenido en los SPA:

• El contenido de un sitio se actualiza al actualizar el código. Eso obviamente no es amigable para la autoría.
• El contenido se gestiona en un CMS que está desacoplado de la parte del sitio web orientada al visitante. El contenido del CMS se consume a través de una API, por ejemplo, mediante una aplicación React. La interfaz de creación se ve diferente del sitio ensamblado que verá el visitante.

Implementar un editor visual y un SPA cada uno por sí mismo ya es un desafío técnico difícil. Tener un editor visual que funcione con un SPA es casi inaudito. El equipo de Adobe está trabajando para admitir SPA en AEM mientras intenta no comprometer ningún beneficio de su sistema existente. Aunque las primeras versiones prometedoras se lanzaron a la comunidad de AEM en 2018, aún queda mucho trabajo por hacer.

Resumen

Adobe Experience Manager incluye varias funciones útiles que ya se han incorporado o se incorporarán a proyectos populares de código abierto. AEM no inventó necesariamente los conceptos destacados en este artículo, pero ciertamente se comercializa bien como uno de los sistemas más fáciles de crear del mercado.

El concepto de componentes se generalizó con la introducción de bloques en WordPress. El concepto de fragmentos, plantillas de página, permisos y flujos de trabajo se implementan al menos parcialmente en WordPress y son importantes para equipos con muchos autores que entregan contenido a múltiples canales.

La experiencia de creación se puede mejorar aún más utilizando un editor visual con modos de edición y soporte para aplicaciones de una sola página. Un editor de este tipo es difícil de implementar, pero como indican los esfuerzos de Adobe, la experiencia mejorada podría valer la pena y, finalmente, también se incorporará a WordPress.

Otras lecturas

• “Construyendo una mejor experiencia de creación”, Eileen Webb
• “Creación: el entorno y las herramientas”, Centro de ayuda de Adobe
• "Diseño de un sistema de gestión de contenido web fácil de usar", Christopher Hallahan
• “Experiencia de autor”, Rick Yagodich