in

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

Los editores basados ​​en bloques mejoran la experiencia del usuario para quienes crean y publican contenido. ¿Cómo serían los futuros editores? Comparemos la nueva experiencia de creación en WordPress con la experiencia de AEM.

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, compararé la nueva experiencia de creación en WordPress con la experiencia de Adobe Experience Manager (AEM), un sistema de gestió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 autor» me refiero a la experiencia del 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 has pensado antes en la experiencia de autor, aquí tiene 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 más costosas, lo que coloca a AEM en algún lugar entre soluciones gratuitas y muy costosas. Desde una perspectiva técnica, AEM es un conglomerado de tecnologías de código abierto con varios toques de Adobe, colocando a AEM en algún lugar entre el software de código abierto y propietario. Son esos toques de Adobe los que hacen que el sistema sea brillante y utilizable. Por ejemplo, un constructor 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 parte de contenido que sigue reglas específicas en lugar de ser una mancha de cualquier cosa. Por ejemplo, puedes 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 puedes tener un componente de cita donde el autor agrega una cita a un campo de texto y el nombre de la persona que se cita a otro campo de texto. Incluso puedes 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.

Los autores pueden actualizar componentes directamente en el editor visual. Las opciones de edición disponibles se muestran según el componente seleccionado. (Fuente de la imagen) (Vista previa grande)

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 que se adapta a todos los contenidos” 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 que el autor elija una fecha con el formato correcto.
  • Si un diseñador desea 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 almacenarían a la antigua, el desarrollador tendría que extraer manualmente el nombre del blob de texto y colocarlo delante de la cita.
  • Si una cotización necesita ser traducida del inglés al alemán, la cotización puede enviarse a un servicio de traducción. Si el servicio de traducción ya ha traducido esta cita antes, 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 evita que los usuarios sordos lo consuman, el componente se puede complementar con un texto resumen que haga 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 desde hace un tiempo, y debido a la llegada de Gutenberg a 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 último año. Resumiré esos dos conceptos simplemente como fragmentos. En esencia, los fragmentos permiten a los autores crear contenido neutral que se puede utilizar en la web, dispositivos móviles, redes sociales y otros canales. Los fragmentos se crean fuera de un editor de página y, en comparación con un componente, tienen menos opiniones sobre 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 utilizar 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 qué 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 cotización 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.
Con un editor de fragmentos, los autores se centran en los datos relacionados sin tener que saber exactamente cómo se mostrarán en los sitios web y las aplicaciones. (Fuente de la imagen) (Vista previa grande)

En WordPress, los widgets y los menús se asemejan a 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 con un tema nuevo, esos elementos del menú persisten y también se pueden mostrar en el tema nuevo, aunque el tema nuevo puede verse muy diferente al anterior. Espero que los fragmentos se utilicen más ampliamente, a pesar de que 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 bloque a otros aspectos de la administración de contenido [incluida la creación de] un bloque de menú de navegación [y] migrar 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 bloqueen componentes como un componente de encabezado en una posición fija y, al mismo tiempo, definen áreas flexibles donde los componentes se pueden agregar por página.

La plantilla de esta pantalla proporciona un componente de encabezado, imagen y texto de forma predeterminada. Evita que los autores eliminen el texto «Texto bloqueado» y permite a los autores agregar más componentes debajo de ese texto. (Fuente de la imagen) (Vista previa grande)

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

  • Plantilla n. ° 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 corrigen 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 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 accidental e irrevocablemente el sitio, 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.

Sí, la interfaz de AEM para el manejo de permisos podría necesitar un lavado de cara. De todos modos, funciona. (Fuente de la imagen) (Vista previa grande)

Un sitio típico de AEM incluye el sitio web de producción real y al menos un sitio similar a la producción, también conocido como puesta en escena. Los autores pueden publicar contenido en un sitio de ensayo privado antes de publicarlo en el sitio de producción público. El proceso de publicación de contenido en la puesta en escena seguido de la publicación de contenido en producción se puede denominar 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 algunas personas pueden presionar el botón «publicar en producción».

Esta página indica que se ha iniciado un flujo de trabajo y el autor puede completar o delegar la «Solicitud de activación». (Fuente de la imagen) (Vista previa grande)

Los permisos y los flujos de trabajo son características que son insignificantes en equipos pequeños. Sin embargo, a medida que un equipo crece, 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 bastantes cambios de código y no se implementa con un chasquido de dedo. 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.

Imagínese cómo una herramienta fácil de usar podría simplificar la creación de flujos de trabajo. Así es como se verás la creación de flujos de trabajo en Github una vez que las Acciones de Github estén fuera de la versión beta. (Vista previa grande)

Modos de edición  #

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

  • Para organizar los componentes y editar su contenido, elige el modo de edición.
  • Para cambiar cómo se deben organizar los componentes en un iPad, elige el modo Diseño.
  • Para ver el contenido como si fuera un visitante, elige el modo Vista previa.
En esta página, el modo de diseño adaptable está activo. El autor puede emular diferentes tamaños de dispositivos y ajustar la posición de los componentes dentro de una cuadrícula receptiva. (Fuente de la imagen) (Vista previa grande)

Hay algunos modos más que se muestran 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. Al usar el modo de orientación, los autores pueden definir cuándo mostrar ciertos componentes en función de la ubicación, la edad, la página de referencia, la hora del día, etc. de un visitante. 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 generalmente personalizadas. Especialmente integrar AEM Target puede ser más doloroso de lo que los vendedores lo hacen parecer.

Cambia el modo a través de un menú desplegable. (Fuente de la imagen) (Vista previa grande)
En el modo de orientación, el contenido se puede personalizar y probar directamente desde el editor de página. (Fuente de la imagen) (Vista previa grande)

Dejando a un lado la complejidad del desarrollo y el dinero, la consecuencia de tal esfuerzo puede resultar en una excelente experiencia de autor. El concepto de modos de edición demuestra cómo un menú desplegable simple 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, debes haberte dado cuenta de que el editor de páginas de AEM no solo está basado en componentes, sino también visual: si un componente se actualiza, el cambio se hace 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 están 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íteme dar un paso más y preguntar: ¿Qué sucede si te comprometes 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 sin problemas 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 razón de la adopción bastante baja es que crear SPA es difícil y mantenerlas con miles de páginas es aún más difícil. Actualmente, hay dos formas principales de administrar contenido en SPA:

  • El contenido de un sitio se actualiza actualizando el código. Obviamente, eso no es compatible con 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 los beneficios de su sistema existente. Aunque las primeras versiones prometedoras se lanzaron a la comunidad de AEM en 2018, todavía queda mucho trabajo por hacer.

Esta página muestra una aplicación React. Observa cómo AEM ha agregado una capa encima del componente meteorológico para que los autores puedan editar sus propiedades. (Fuente de la imagen) (Vista previa grande)

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 en el 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 sirven 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, convertirse en WordPress también.

Lectura adicional  #

¿Qué opinas?

Escrito por Wombat

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Listable: un tema de directorio de WordPress fácil de usar y extensible

Cómo corregir el error «El enlace que has seleccionado ha caducado» en WordPress