Pasar al contenido principal

Maquetación y Diagramación en Drupal

Una Idea de Diseño a Código

Maquetación en Drupal

La diagramación, más conocida como maquetación web, consiste en hacer visibles todos los contenidos de un sitio de manera organizada. Se debe tomar en cuenta el espacio disponible, pues el espacio en un dispositivo móvil, por ejemplo, es menor al espacio en una pantalla de escritorio. La diagramación en Drupal se rige bajo los mismos principios y conceptos.

Logos - HTML, CSS; JS, Twig, Drupal

La maquetación de un diseño se efectúa mediante los tres lenguajes base en la red: HTML, CSS y JavaScript. El objetivo es separar el contenido (HTML) de su presentación (CSS). El lenguaje JavaScript añade funcionalidades de evento a elementos del sitio, por ejemplo la animación de un título o imagen o el desplazamiento a través de la pantalla al hacer clic en un botón.

La comunidad Drupal ofrece más de 450 temas y plantillas predefinidos para Drupal 8, los cuales permiten adecuar el contenido proporcionado en diferentes regiones de la página y son ideales para un blog personal o una pequeña empresa. Estos temas se pueden configurar en el número de columnas a emplearse o los colores del mismo. Existen temas basados en frameworks CSS como Bootstrap, Foundation o Bulma.

Es posible además maquetar un diseño personalizado y adaptarlo a Drupal. Este proceso en el vocabulario de Drupal se conoce como Theming. Adaptar un diseño personalizado a Drupal requiere de un motor de plantillas adicional conocido como Twig. Con Twig es posible controlar la forma en que el contenido se muestra al usuario en un sitio Drupal.

¡No dude en hacer clic sobre el enlace y ponerse en contacto con nosotros!