Soy un Frontend Developer y diseñador. Aprendo y enseño todo sobre Tecnologías y Diseño Web.

Costa Rica (GMT-6)

🇺🇸 Translate
InstagramTwitterYoutubeGithubLinkedInStackOverflow

Modo de edición de DotCMS

Planificar, diseñar y desarrollar una experiencia sin código para crear y editar páginas web dentro de DotCMS.

Tech Stack

angularAngular
rxjsRxJS
CE
Custom Events
dragulaDragula
CP
CSS Properties

DotCMS le ayuda a gestionar y entregar contenido en todos los canales, dispositivos y plataformas.

Una de las características clave de las plataformas es el "Modo de edición", es el lugar donde los usuarios pueden gestionar su página:

  1. Añadir o editar contenido
  2. Editar las propiedades: título, descripción, permisos, etc....
  3. Publicar o publicar una página.

Demo

DotCMS Edit Mode

Desafío

El modo de edición es una gran característica, pero se desarrolló hace 10 años y nunca se actualizó o mantuvo.

Los clientes de DotCMS merecen y necesitan una experiencia más moderna una mejor manera de gestionar sus páginas. Así que queremos:

  1. Menos código más trabajo
  2. Arrastrar y soltar contenido
  3. Una forma de cambiar el diseño de una página
  4. Previsualizar la página en diferentes dispositivos e idiomas
  5. Escalar más rápido.

Solución

Api

Trabajando con los desarrolladores de backend, desarrollamos una API que nos dará toda la información sobre una página:

  1. Diseño
  2. Contenedores
  3. Contentlets
  4. HTML "especial" en el que añadimos atributos de datos.

Página

Al renderizar el HTML con atributos de datos especiales, podríamos intervenir dentro de los contenedores y contentlet e inyectar herramientas (botones y manejadores) para permitir a los usuarios editar el contenido, mover el contenido dentro de la página, y otras acciones de edición de la página.

Edición

Escuchando los eventos de la página que renderizamos, podemos guardar todos los cambios que un usuario haga en tiempo real sin acciones extra es un WYSIWYG para toda la página.

Diseño

Representamos cualquier diseño de página como un objeto, y al hacer eso, fuimos capaces de crear un "Diseñador de Diseño" donde nuestro usuario puede crear filas, columnas, barra lateral, cabecera y pie de página a una página con cero código.

Beneficios

  1. Fácil de escalar
  2. Nos permite utilizar el modo de edición con cualquier tecnología del lado del servidor.
  3. Interfaz de usuario más rápida y moderna

Resultados

Entregamos la primera versión de la nueva función de modo de edición en unos meses, y con el lanzamiento al público, empezamos a recoger un montón de buenos comentarios e ideas para una futura versión.

El modo de edición se convierte en la característica que diferencia a DotCMS de cualquier otro competidor en el mercado y el principal punto de venta del producto.