Introducción a YAML

El desarrollador web Dirk Jesse lanzó en 2005 el framework CSS responsivo YAML bajo la licencia Creative Commons CC-BY 2.0, que permite su uso gratuito tanto para el sector privado como para el comercial. Los administradores que quieran que su proyecto esté disponible bajo otro tipo de licencia online pueden adquirir un modelo comercial que les permita escoger licencia. Desde siempre, el enfoque de esta estructura de trabajo CSS ha sido ofrecer una mayor libertad al usuario en cuanto al diseño de aplicaciones web accesibles. La versión actual del framework (4.2.1) se remonta a 2013 y, gracias a sus respectivas plantillas de integración CMS, numerosos sistemas de gestión de contenidos, tales como WordPress, Joomla o TYPO3, la soportan. 

YAML es un entorno de trabajo que simplifica el trabajo con HTML y CSS concentrándose sobre todo en la facilidad de uso y en la sencillez del proyecto. YAML es el acrónimo de “Yet Another Multicolumn Layout” (en español podría traducirse como “otro sistema de diseño multicolumna”), pero no se debe confundir con el lenguaje de marcado YAML (“YAML Ain’t Markup Language”), con el que solo se relaciona de forma indirecta, pues los módulos que componen el framework se crearon con Sass (“Syntactically Awesome Stylesheets”). Esto permite personalizar y ampliar áreas individuales con la ayuda del preprocesador CSS, que está influenciado significativamente por el lenguaje de marcado YAML.

La versión 3.0 implementó la biblioteca JavaScript jQuery, que se adaptó perfectamente a este framework CSS simplificando el desarrollo de elementos dinámicos y animados para cualquier página web. Con Thinkin’ Tags, el sucesor de YAML Builder (hasta 3.1), los usuarios tienen a su disposición un editor drag and drop que facilita la creación de diseños YAML propios, así como la gestión de todas las páginas HTML y hojas de estilo del proyecto.

Con su sistema modular, YAML ofrece las ventajas típicas de cualquier framework, como es no empezar de cero el desarrollo de un proyecto web, puesto que se parte de una competente estructura básica de trabajo que permite ahorrar un tiempo muy valioso. Como framework CSS responsivo, la gran ventaja de los módulos prefabricados de YAML radica principalmente en su adaptabilidad: independientemente de los dispositivos y navegadores utilizados por los visitantes para acceder a tu proyecto, su código flexible garantiza una representación visualmente atractiva. Con los módulos básicos para tal efecto, el framework abarca los elementos utilizados con mayor frecuencia y lo mejor de todo es que su tamaño total es de aproximadamente 6KB.

Algunos de los módulos estándar especificados en la hoja de estilo base.css son:

Para no incurrir en conflictos de compatibilidad con versiones antiguas de Internet Explorer, con los componentes básicos del archivo base.css se compiló un conjunto de errores corregidos para las versiones 5,6 y 7 del navegador. Este se almacena en el archivo iehacks.css, que, aunque es opcional, debes utilizar sin cambios si quieres que tu proyecto YAML se represente adecuadamente en las versiones más antiguas de los navegadores.

Este framework CSS no solo garantiza que tus visitas vean tu página web de manera óptima, sino que también se encarga de que el proceso de desarrollo y la conexión con tu sistema de gestión de contenidos preferido sean lo más sencillos posible. Su estructura modular y la estricta separación entre los componentes de maquetación y los de diseño son los responsables de que el código sea ligero y fácil de usar. En caso de que no necesites alguno de los elementos de la página web, no estás obligado a utilizarlo, pues las características básicas de este entorno de trabajo te permiten determinar qué ruta quieres tomar para alcanzar tus objetivos. 

Así, poder recurrir para ello al lenguaje de estilo simplificado Sass es uno de los mayores beneficios de YAML. Gracias a su sintaxis simplificada es posible escribir las hojas de estilo que necesites mucho más rápido que con el tradicional CSS. Además, el hecho de que las stylesheets estén vinculadas entre sí hace que el preprocesador reduzca el número de solicitudes HTTP y automatice la compresión de las hojas del documento. Por último, Sass genera automáticamente los archivos CSS sin que tengas que preocuparte por ello.

Otra de las grandes ventajas de este entorno de trabajo CSS responsivo es resultado del desarrollo conjunto de la dedicada comunidad YAML, que creó y publicó diferentes plantillas para una gran variedad de sistemas de gestión de contenidos y que, incluso, suele ofrecer apoyo personalizado. Estas plantillas prediseñadas vinculan el framework con diferentes aplicaciones para administrar su contenido web. La descarga para su uso es parcialmente libre o de pago. De esta forma, no tendrás que ocuparte de los ajustes necesarios en el kernel del framework y, como consecuencia, podrás concentrarse exclusivamente en el diseño de tu proyecto web. Entre otras, tendrás a tu disposición las siguientes plantillas:

• JYAML: pack completo que incluye una plantilla, un plugin y una biblioteca para Joomla desde la versión 3.6.0 sobre la base de YAML 4.
• YAML for Drupal: diferentes plantillas para el framework CSS implementado en Drupal 6 y 7 (previsto también para la versión 8).

La estructura y el lenguaje de YAML se caracterizan por su simplicidad. En 2008, y para que los usuarios pudieran aprovechar al máximo las ventajas de este framework a la hora de diseñar su proyecto web, se lanza al mercado el ya mencionado YAML Builder. Esta herramienta reúne todas las funciones básicas de la estructura básica de CSS (hasta YAML 3.1), permitiendo crear el diseño deseado de forma rápida e intuitiva con ayuda de diversos elementos drag and drop. Además, gracias a la función de vista previa, cada cambio se puede evaluar inmediatamente. Por último, esta herramienta crea automáticamente las hojas de estilo necesarias, así como el marcado (X)HTML.

Con la herramienta Thinkin’ Tags, la cuarta versión del framework encontró al legítimo sucesor de YAML Builder. Esta herramienta se caracteriza por un mejor flujo de trabajo en la creación de prototipos para páginas web basadas en YAML o que soportan el framework CSS Blueprint. Para este fin, los desarrolladores han puesto a disposición, entre otras, las siguientes funciones:

• Editor HTML: el editor HTML integrado permite modificar el código haciendo doble clic en el layout o en el árbol DOM (Document Object Model). Este editor simplifica el proceso de escritura del código gracias a funciones típicas tales como resaltado de sintaxis, autocompletar o revisión en tiempo real.

• Editor CSS: Thinkin’ Tags también posibilita la edición directa en los archivos CSS de tu proyecto con la ayuda de un editor interno (incluyendo el resaltado de sintaxis y la revisión en tiempo real). Para ello, el editor utiliza las solicitudes correspondientes (Media Queries), con cuya ayuda asocia hojas de estilo a las solicitudes.

• Gestión de páginas y hojas de estilo: cada proyecto puede contener diversas páginas HTML y hojas de estilo, aunque también puedes asignar las hojas de estilo correspondientes a cada archivo HTML. También es posible ocultar las hojas de estilo por un periodo de tiempo determinado.
• Verificador de diseño responsivo: puedes visualizar el diseño de tu web para diferentes escenarios sin tener que salir de Thinkin’ Tags: es posible emular el ancho de la pantalla para diferentes dispositivos tales como ordenadores de mesa, tablets o smartphones para detectar y enmendar cualquier inconsistencia.

• Optimización de la usabilidad de la tipografía: los cambios en la tipografía se pueden comprobar fácilmente gracias a un útil slider. Adicionalmente, desde la aplicación tendrás acceso directo a más de 600 fuentes de la biblioteca de Google Font que podrás integrar en tu proyecto con un solo clic.

Uno de los mayores problemas de entornos de trabajo como YAML es que requiere mucha práctica para familiarizarse con el código de los diferentes módulos. Quien esté acostumbrado a recurrir a fragmentos prefabricados de código, es probable que tenga que invertir tiempo en la comprensión de sus principios de funcionamiento, incluso teniendo conocimientos sólidos en HTML, CSS, etc. Por lo tanto, es necesario adaptar la forma de trabajo a los enfoques conceptuales de este entorno de trabajo, de modo que sea posible conseguir los resultados esperados. Para este propósito, YAML ofrece documentación detallada sobre los componentes individuales que, sin embargo, solo está disponible en inglés. Otra característica típica de los frameworks es el hecho de que, a menos que el usuario se dedique a optimizarlos, para un proyecto YAML se suele cargar más código del que realmente se necesita.

Otra desventaja de este framework CSS es la mencionada concesión de licencias. Si bien es cierto que la licencia Creative Commons Attribution 2.0 (CC-BY 2.0) autoriza el uso y la implementación de este entorno de forma gratuita tanto para fines privados como comerciales, uno de los requisitos para ello es que incluyas una referencia a la página de inicio de YAML. Así, en caso de que quieras publicar tu proyecto bajo una licencia diferente, seguramente tendrás que adquirir una licencia de pago (Project, General, OEM).

A pesar de que hace ya algún tiempo de su última actualización, con su amigable compatibilidad con los navegadores, su enfoque de diseño responsivo y el soporte de CSS3 y HTML5, YAML es, ciertamente, un framework muy interesante para crear aplicaciones. Su módulo de accesibilidad facilita que tu web sea legible por máquina (machine readable), característica decisiva a la hora de lograr un proyecto accesible, pero que, además, resulta de gran ayuda para la optimización en motores de búsqueda. De esta forma, en combinación con los Thinkin’ Tags, tendrás a tu disposición todo lo que necesitas para crear una web moderna compatible con los estándares actuales. Si, además, administras tus contenidos con la ayuda de un sistema de gestión de contenidos, podrás concentrarte plenamente en la concepción de la distribución y el diseño.

Para utilizar la versión más reciente de este framework CSS primero debes descargar los archivos principales disponibles en la página web oficial o en el repositorio oficial de YAML en GitHub. Con la descarga recibes, entre otras cosas, documentación, varias demos de distribución y la biblioteca JavaScript jQuery. Para compilar la versión estándar del framework con los archivos existentes, necesitas los siguientes cinco componentes:

• Node.js: entorno de ejecución del lado del servidor basado en el motor JavaScript V8.
• Grunt-CLI: herramienta de línea de comandos basada en Node.js y necesaria para la automatización de tareas (p.ej., para la compilación de datos LESS o SCSS).
• Ruby: lenguaje de programación orientado a objetos.
• Sass: lenguaje de hojas de estilo alternativo que permite el uso de variables y mixins, simplificando así la creación de hojas de estilo.
• Compass: framework que sirve a Sass como biblioteca estándar y que pone a disposición del preprocesador un gran número de mixins.

Una vez has instalado todos estos componentes y has guardado los archivos YAML en tu sistema, tendrás que disolver y configurar todas las dependencias grunt necesarias. Las siguientes tareas son obligatorias para asegurarse de que la compilación de YAML se realiza adecuadamente:

• grunt: inicia una secuencia de Compass para compilar los archivos Sass/SCSS en CSS
• grunt watch: activa la función de control de Compass con la cual es posible compilar automáticamente los documentos Sass/SCSS en caso de que se presenten cambios posteriores
• grunt build: compila todos los archivos YAML CSS estáticos
• grunt build-utf8: tiene la misma funcionalidad que grunt build, pero la regla @charset "utf8" se mantiene activa en los archivos CSS

YAML simplifica el desarrollo de proyectos nuevos, así como su edición visual a través de CSS. Sin embargo, el proceso de aprendizaje que precede al uso de este entorno de trabajo no debe subestimarse. Solo quien esté familiarizado con HTML y CSS y, además, esté dispuesto a comprometerse con las ideas conceptuales de una base de diseño compatible con los estándares, podrá explotar todo su potencial. Con Thinkin’ Tags, el desarrollador Dirk Jesse lanzó al mercado una herramienta que facilita a usuarios experimentados la creación de layouts con YAML y que facilita empezar a trabajar con él. Sin embargo, al comienzo hay que contar con que, a pesar de las herramientas de ayuda, es muy probable que se presenten dificultades con la estructura prediseñada.

Por otro lado, un gran signo de interrogación acompaña a la sostenibilidad del framework. La última actualización de su cuarta y última versión data de 2014. Incluso cuando Jesse ha confirmado estar trabajando en una quinta edición de YAML, todavía está por verse cómo y si cuenta con los fondos necesarios para hacerlo. Ahora bien, hasta la fecha, YAML y Thinkin’ Tags representan una plataforma absolutamente recomendable para proyectos web modernos que quieran distinguirse por una estructura flexible y compatible con los estándares.