1 of 24

¡BIENVENID@S!

​

Visual Layout Suite (VLSuite)�para site builders con gran ambición

(Ambitious site builders)

​

2 of 24

¿Quiénes somos?

​

​

Cristian Aliaga

Desarrollador Drupal

drupal.org/u/crzdev

Le gusta Drupal y el tetris a partes iguales.

​

Alberto Ortega

Desarrollador Drupal

drupal.org/u/albeorte

Drupalero y desde hoy, ponente…

​

3 of 24

¿Qué veremos?

​

​

  1. Mejorar experiencia de edición
  2. Opciones actuales
  3. ¿Qué es Visual Layout Suite (VLSuite)?
  4. Conceptos clave
  5. Demostración
  6. Estado actual y siguientes pasos

4 of 24

Mejorar la experiencia de edición

Modelo actual:

  • Principalmente basado en formularios.
  • Sin previsualización orgánica en la edición a nivel de contenido.
  • Poco intuitiva.
  • Visualización resultado final tras guardar contenido completo.

5 of 24

Mejorar la experiencia de edición

6 of 24

  • Dependencias con distribución, perfil de instalación y/o tema.
  • No se pueden usar en sitios existentes.
  • Nuevos componentes / variantes requieren cambios en el código.
  • No están basados en infraestructura de Drupal (ckeditor, …).
  • Sin compatibilidad con otros componentes del sitio o muy limitada.
  • No son de código abierto.
  • Coste de uso (base o extendido).
  • Sin hegemonía visual respecto a otras piezas.

Opciones actuales

​

​

7 of 24

Visual Layout Suite (VLSuite)

​

​

  • Aportar el máximo valor en el menor tiempo posible.
  • Visualización del resultado final durante la edición (drag & drop UI).
  • Solución “Drupal way” para “Ambitious site builders”.
  • Apoyado en “hombros de gigantes”: Layout builder, contrib.
  • Nuevos componentes / variantes sin requerir cambios en el código.
  • Uso de cualquier tema tanto de administración como principal.
  • Máxima compatibilidad con otros componentes del sitio.
  • Totalmente de código abierto y sin costes de uso.

8 of 24

Visual Layout Suite (VLSuite)

​

​

​

​

drupal.org/project/vlsuite

9 of 24

Conceptos clave

  • Layout Builder (drag & drop / bloques / default & override / default theme)
  • Secciones, regiones y bloques

10 of 24

Conceptos clave

​

​

  • Modificadores de apariencia (utility classes)
    • Aplican reglas de diseño o estilado
    • Aplican a distintos niveles (sección, bloque, campo, …)
    • Cada una puede tener variantes
    • VLSuite las aplica por ti en el marcado final
    • Basados en identificadores
    • Avanzadas y básicas
    • Previsualización en tiempo real

​

11 of 24

Demostración

Visual Layout Suite (VLSuite)

12 of 24

Demostración

​

​

Instalación inicial VLSuite Shuttle

13 of 24

Demostración

​

​

Componente básico

14 of 24

Demostración

​

​

Componentes compuestos (collection / glosarios / slider)

15 of 24

Demostración

​

​

Editor básico / avanzado

16 of 24

Demostración

​

​

Cambio de tema

17 of 24

Demostración

​

​

Vistazo rápido de la configuración

18 of 24

Estado actual y siguientes pasos

​

​

  • Versión 1.0.1 estable y 1.1.0 recomendada en release candidate.
  • Todo lo visto y más ya disponible para su uso en cualquier sitio.
  • Versión 1.1.0 estable.
  • Nuevos componentes y funcionalidades (story telling, …).
  • Mejoras y/o refinamiento UI/UX.
  • Animaciones.
  • Más documentación con recursos multimedia.
  • …

drupal.org/project/vlsuite

19 of 24

Join Talks, networking, workshops

The biggest meeting point for the Spanish Drupal Community.

General Talks

22, 23 September

12:00h to 18:30h

20 of 24

21 of 24

Thanks to our Platino Sponsors!!

22 of 24

Thanks to our Gold, Silver and Bronze Sponsors!!

23 of 24

Preguntas

24 of 24

¡Muchas gracias!