In­tro­du­c­ción a YAML

El de­sa­rro­lla­dor web Dirk Jesse lanzó en 2005 el framework CSS re­s­po­n­si­vo 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 ad­mi­ni­s­tra­do­res que quieran que su proyecto esté di­s­po­ni­ble bajo otro tipo de licencia online pueden adquirir un modelo comercial que les permita escoger licencia. Desde siempre, el enfoque de esta es­tru­c­tu­ra de trabajo CSS ha sido ofrecer una mayor libertad al usuario en cuanto al diseño de apli­ca­cio­nes web ac­ce­si­bles. La versión actual del framework (4.2.1) se remonta a 2013 y, gracias a sus re­s­pe­c­ti­vas pla­n­ti­llas de in­te­gra­ción CMS, numerosos sistemas de gestión de co­n­te­ni­dos, tales como WordPress, Joomla o TYPO3, la soportan. 

YAML es un entorno de trabajo que si­m­pli­fi­ca el trabajo con HTML y CSS co­n­ce­n­trá­n­do­se sobre todo en la facilidad de uso y en la sencillez del proyecto. YAML es el acrónimo de “Yet Another Mul­ti­co­lu­mn Layout” (en español podría tra­du­ci­r­se como “otro sistema de diseño mu­l­ti­co­lu­m­na”), 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 (“Syn­ta­c­ti­ca­lly Awesome Stylesheets”). Esto permite pe­r­so­na­li­zar y ampliar áreas in­di­vi­dua­les con la ayuda del pre­pro­ce­sa­dor CSS, que está in­flue­n­cia­do si­g­ni­fi­ca­ti­va­me­n­te por el lenguaje de marcado YAML.

La versión 3.0 im­ple­me­n­tó la bi­blio­te­ca Ja­va­S­cri­pt jQuery, que se adaptó pe­r­fe­c­ta­me­n­te a este framework CSS si­m­pli­fi­ca­n­do el de­sa­rro­llo 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 di­s­po­si­ció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 de­sa­rro­llo de un proyecto web, puesto que se parte de una co­m­pe­te­n­te es­tru­c­tu­ra básica de trabajo que permite ahorrar un tiempo muy valioso. Como framework CSS re­s­po­n­si­vo, la gran ventaja de los módulos pre­fa­bri­ca­dos de YAML radica pri­n­ci­pa­l­me­n­te en su ada­p­ta­bi­li­dad: in­de­pe­n­die­n­te­me­n­te de los di­s­po­si­ti­vos y na­ve­ga­do­res uti­li­za­dos por los vi­si­ta­n­tes para acceder a tu proyecto, su código flexible garantiza una re­pre­se­n­ta­ción vi­sua­l­me­n­te atractiva. Con los módulos básicos para tal efecto, el framework abarca los elementos uti­li­za­dos con mayor fre­cue­n­cia y lo mejor de todo es que su tamaño total es de apro­xi­ma­da­me­n­te 6KB.

Algunos de los módulos estándar es­pe­ci­fi­ca­dos en la hoja de estilo base.css son:

Para no incurrir en co­n­fli­c­tos de co­m­pa­ti­bi­li­dad con versiones antiguas de Internet Explorer, con los co­m­po­ne­n­tes básicos del archivo base.css se compiló un conjunto de errores co­rre­gi­dos 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 re­pre­se­n­te ade­cua­da­me­n­te en las versiones más antiguas de los na­ve­ga­do­res.

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 de­sa­rro­llo y la conexión con tu sistema de gestión de co­n­te­ni­dos preferido sean lo más sencillos posible. Su es­tru­c­tu­ra modular y la estricta se­pa­ra­ción entre los co­m­po­ne­n­tes de ma­que­ta­ción y los de diseño son los re­s­po­n­sa­bles 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 uti­li­zar­lo, pues las ca­ra­c­te­rí­s­ti­cas básicas de este entorno de trabajo te permiten de­te­r­mi­nar qué ruta quieres tomar para alcanzar tus objetivos. 

Así, poder recurrir para ello al lenguaje de estilo si­m­pli­fi­ca­do Sass es uno de los mayores be­ne­fi­cios de YAML. Gracias a su sintaxis si­m­pli­fi­ca­da es posible escribir las hojas de estilo que necesites mucho más rápido que con el tra­di­cio­nal CSS. Además, el hecho de que las st­y­le­sheets estén vi­n­cu­la­das entre sí hace que el pre­pro­ce­sa­dor reduzca el número de so­li­ci­tu­des HTTP y au­to­ma­ti­ce la co­m­pre­sión de las hojas del documento. Por último, Sass genera au­to­má­ti­ca­me­n­te los archivos CSS sin que tengas que preo­cu­par­te por ello.

Otra de las grandes ventajas de este entorno de trabajo CSS re­s­po­n­si­vo es resultado del de­sa­rro­llo conjunto de la dedicada comunidad YAML, que creó y publicó di­fe­re­n­tes pla­n­ti­llas para una gran variedad de sistemas de gestión de co­n­te­ni­dos y que, incluso, suele ofrecer apoyo pe­r­so­na­li­za­do. Estas pla­n­ti­llas pre­di­se­ña­das vinculan el framework con di­fe­re­n­tes apli­ca­cio­nes para ad­mi­ni­s­trar su contenido web. La descarga para su uso es pa­r­cia­l­me­n­te libre o de pago. De esta forma, no tendrás que ocuparte de los ajustes ne­ce­sa­rios en el kernel del framework y, como co­n­se­cue­n­cia, podrás co­n­ce­n­trar­se ex­clu­si­va­me­n­te en el diseño de tu proyecto web. Entre otras, tendrás a tu di­s­po­si­ción las si­guie­n­tes pla­n­ti­llas:

• JYAML: pack completo que incluye una plantilla, un plugin y una bi­blio­te­ca para Joomla desde la versión 3.6.0 sobre la base de YAML 4.
• YAML for Drupal: di­fe­re­n­tes pla­n­ti­llas para el framework CSS im­ple­me­n­ta­do en Drupal 6 y 7 (previsto también para la versión 8).

La es­tru­c­tu­ra y el lenguaje de YAML se ca­ra­c­te­ri­zan por su si­m­pli­ci­dad. En 2008, y para que los usuarios pudieran apro­ve­char al máximo las ventajas de este framework a la hora de diseñar su proyecto web, se lanza al mercado el ya me­n­cio­na­do YAML Builder. Esta he­rra­mie­n­ta reúne todas las funciones básicas de la es­tru­c­tu­ra básica de CSS (hasta YAML 3.1), pe­r­mi­tie­n­do 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 in­me­dia­ta­me­n­te. Por último, esta he­rra­mie­n­ta crea au­to­má­ti­ca­me­n­te las hojas de estilo ne­ce­sa­rias, así como el marcado (X)HTML. Con la he­rra­mie­n­ta Thinkin’ Tags, la cuarta versión del framework encontró al legítimo sucesor de YAML Builder. Esta he­rra­mie­n­ta se ca­ra­c­te­ri­za por un mejor flujo de trabajo en la creación de pro­to­ti­pos para páginas web basadas en YAML o que soportan el framework CSS Blueprint. Para este fin, los de­sa­rro­lla­do­res han puesto a di­s­po­si­ción, entre otras, las si­guie­n­tes 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 si­m­pli­fi­ca el proceso de escritura del código gracias a funciones típicas tales como resaltado de sintaxis, au­to­co­m­ple­tar o revisión en tiempo real.

• Editor CSS: Thinkin’ Tags también po­si­bi­li­ta la edición directa en los archivos CSS de tu proyecto con la ayuda de un editor interno (in­clu­ye­n­do el resaltado de sintaxis y la revisión en tiempo real). Para ello, el editor utiliza las so­li­ci­tu­des co­rre­s­po­n­die­n­tes (Media Queries), con cuya ayuda asocia hojas de estilo a las so­li­ci­tu­des.

• 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 co­rre­s­po­n­die­n­tes a cada archivo HTML. También es posible ocultar las hojas de estilo por un periodo de tiempo de­te­r­mi­na­do.
• Ve­ri­fi­ca­dor de diseño re­s­po­n­si­vo: puedes vi­sua­li­zar el diseño de tu web para di­fe­re­n­tes es­ce­na­rios sin tener que salir de Thinkin’ Tags: es posible emular el ancho de la pantalla para di­fe­re­n­tes di­s­po­si­ti­vos tales como or­de­na­do­res de mesa, tablets o sma­r­t­pho­nes para detectar y enmendar cualquier in­co­n­si­s­te­n­cia.

• Op­ti­mi­za­ción de la usa­bi­li­dad de la ti­po­gra­fía: los cambios en la ti­po­gra­fía se pueden comprobar fá­ci­l­me­n­te gracias a un útil slider. Adi­cio­na­l­me­n­te, desde la apli­ca­ción tendrás acceso directo a más de 600 fuentes de la bi­blio­te­ca 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 fa­mi­lia­ri­zar­se con el código de los di­fe­re­n­tes módulos. Quien esté aco­s­tu­m­bra­do a recurrir a fra­g­me­n­tos pre­fa­bri­ca­dos de código, es probable que tenga que invertir tiempo en la co­m­pre­n­sión de sus pri­n­ci­pios de fu­n­cio­na­mie­n­to, incluso teniendo co­no­ci­mie­n­tos sólidos en HTML, CSS, etc. Por lo tanto, es necesario adaptar la forma de trabajo a los enfoques co­n­ce­p­tua­les de este entorno de trabajo, de modo que sea posible conseguir los re­su­l­ta­dos esperados. Para este propósito, YAML ofrece do­cu­me­n­ta­ción detallada sobre los co­m­po­ne­n­tes in­di­vi­dua­les que, sin embargo, solo está di­s­po­ni­ble en inglés. Otra ca­ra­c­te­rí­s­ti­ca típica de los fra­me­wo­r­ks es el hecho de que, a menos que el usuario se dedique a op­ti­mi­zar­los, para un proyecto YAML se suele cargar más código del que realmente se necesita.

Otra de­s­ve­n­ta­ja de este framework CSS es la me­n­cio­na­da concesión de licencias. Si bien es cierto que la licencia Creative Commons At­tri­bu­tion 2.0 (CC-BY 2.0) autoriza el uso y la im­ple­me­n­ta­ción de este entorno de forma gratuita tanto para fines privados como co­me­r­cia­les, uno de los re­qui­si­tos para ello es que incluyas una re­fe­re­n­cia a la página de inicio de YAML. Así, en caso de que quieras publicar tu proyecto bajo una licencia diferente, se­gu­ra­me­n­te tendrás que adquirir una licencia de pago (Project, General, OEM).

A pesar de que hace ya algún tiempo de su última ac­tua­li­za­ción, con su amigable co­m­pa­ti­bi­li­dad con los na­ve­ga­do­res, su enfoque de diseño re­s­po­n­si­vo y el soporte de CSS3 y HTML5, YAML es, cie­r­ta­me­n­te, un framework muy in­te­re­sa­n­te para crear apli­ca­cio­nes. Su módulo de ac­ce­si­bi­li­dad facilita que tu web sea legible por máquina (machine readable), ca­ra­c­te­rí­s­ti­ca decisiva a la hora de lograr un proyecto accesible, pero que, además, resulta de gran ayuda para la op­ti­mi­za­ción en motores de búsqueda. De esta forma, en co­m­bi­na­ción con los Thinkin’ Tags, tendrás a tu di­s­po­si­ción todo lo que necesitas para crear una web moderna co­m­pa­ti­ble con los es­tá­n­da­res actuales. Si, además, ad­mi­ni­s­tras tus co­n­te­ni­dos con la ayuda de un sistema de gestión de co­n­te­ni­dos, podrás co­n­ce­n­trar­te ple­na­me­n­te en la co­n­ce­p­ción de la di­s­tri­bu­ción y el diseño.

Para utilizar la versión más reciente de este framework CSS primero debes descargar los archivos pri­n­ci­pa­les di­s­po­ni­bles en la página web oficial o en el re­po­si­to­rio oficial de YAML en GitHub. Con la descarga recibes, entre otras cosas, do­cu­me­n­ta­ción, varias demos de di­s­tri­bu­ción y la bi­blio­te­ca Ja­va­S­cri­pt jQuery. Para compilar la versión estándar del framework con los archivos exi­s­te­n­tes, necesitas los si­guie­n­tes cinco co­m­po­ne­n­tes:

• Node.js: entorno de ejecución del lado del servidor basado en el motor Ja­va­S­cri­pt V8.
• Grunt-CLI: he­rra­mie­n­ta de línea de comandos basada en Node.js y necesaria para la au­to­ma­ti­za­ción de tareas (p.ej., para la co­m­pi­la­ción de datos LESS o SCSS).
• Ruby: lenguaje de pro­gra­ma­ción orientado a objetos.
• Sass: lenguaje de hojas de estilo al­te­r­na­ti­vo que permite el uso de variables y mixins, si­m­pli­fi­ca­n­do así la creación de hojas de estilo.
• Compass: framework que sirve a Sass como bi­blio­te­ca estándar y que pone a di­s­po­si­ción del pre­pro­ce­sa­dor un gran número de mixins.

Una vez has instalado todos estos co­m­po­ne­n­tes y has guardado los archivos YAML en tu sistema, tendrás que disolver y co­n­fi­gu­rar todas las de­pe­n­de­n­cias grunt ne­ce­sa­rias. Las si­guie­n­tes tareas son obli­ga­to­rias para ase­gu­rar­se de que la co­m­pi­la­ción de YAML se realiza ade­cua­da­me­n­te:

• 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 au­to­má­ti­ca­me­n­te los do­cu­me­n­tos Sass/SCSS en caso de que se presenten cambios po­s­te­rio­res
• grunt build: compila todos los archivos YAML CSS estáticos
• grunt build-utf8: tiene la misma fu­n­cio­na­li­dad que grunt build, pero la regla @charset "utf8" se mantiene activa en los archivos CSS

YAML si­m­pli­fi­ca el de­sa­rro­llo de proyectos nuevos, así como su edición visual a través de CSS. Sin embargo, el proceso de apre­n­di­za­je que precede al uso de este entorno de trabajo no debe su­b­e­s­ti­mar­se. Solo quien esté fa­mi­lia­ri­za­do con HTML y CSS y, además, esté dispuesto a co­m­pro­me­te­r­se con las ideas co­n­ce­p­tua­les de una base de diseño co­m­pa­ti­ble con los es­tá­n­da­res, podrá explotar todo su potencial. Con Thinkin’ Tags, el de­sa­rro­lla­dor Dirk Jesse lanzó al mercado una he­rra­mie­n­ta que facilita a usuarios ex­pe­ri­me­n­ta­dos 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 he­rra­mie­n­tas de ayuda, es muy probable que se presenten di­fi­cu­l­ta­des con la es­tru­c­tu­ra pre­di­se­ña­da.

Por otro lado, un gran signo de in­te­rro­ga­ción acompaña a la so­s­te­ni­bi­li­dad del framework. La última ac­tua­li­za­ción de su cuarta y última versión data de 2014. Incluso cuando Jesse ha co­n­fi­r­ma­do estar tra­ba­ja­n­do en una quinta edición de YAML, todavía está por verse cómo y si cuenta con los fondos ne­ce­sa­rios para hacerlo. Ahora bien, hasta la fecha, YAML y Thinkin’ Tags re­pre­se­n­tan una pla­ta­fo­r­ma ab­so­lu­ta­me­n­te re­co­me­n­da­ble para proyectos web modernos que quieran di­s­ti­n­gui­r­se por una es­tru­c­tu­ra flexible y co­m­pa­ti­ble con los es­tá­n­da­res.