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
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:
- Añadir o editar contenido
- Editar las propiedades: título, descripción, permisos, etc....
- Publicar o publicar una página.
Demo
- https://demo.dotcms.com/c
- Usuario: admin@dotcms.com
- Contraseña: admin
- Ir a
Sitio > Navegadory hacer doble clic en cualquier página
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:
- Menos código más trabajo
- Arrastrar y soltar contenido
- Una forma de cambiar el diseño de una página
- Previsualizar la página en diferentes dispositivos e idiomas
- 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:
- Diseño
- Contenedores
- Contentlets
- 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
- Fácil de escalar
- Nos permite utilizar el modo de edición con cualquier tecnología del lado del servidor.
- 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.