YAML : le cadre de structure standard pour les projets Web universels

En 2005, le développeur Web Dirk Jesse publia le framework Responsive CSS YAML sous la licence Creative Commons CC-BY 2.0, qui permet aux utilisateurs d'utiliser la structure gratuitement dans les secteurs privés et commerciaux. Les administrateurs qui souhaitent mettre en ligne leur projet Web sous une licence différente peuvent opter pour d’autres modèles professionnels. Avec la structure CSS, il a toujours était question d'offrir aux utilisateurs la plus grande des libertés possible dans la conception d'applications Web. La version actuelle (4.2.1) du framework, qui est prise en charge grâce à des modèles d'intégration de CMS par de nombreux systèmes de gestion de contenu tels que WordPress, TYPO3 ou Joomla, a été publiée en 2013.

YAML est un environnement de travail qui permet aux développeurs de travailler plus facilement avec les langages HTML et CSS, en mettant l’accent sur la simplification des projets dans leurs utilisations. Le nom YAML est l'abréviation de «  Yet Another Multicolumn Layout » (c’est-à-dire « encore une nouvelle structure multi-colonnes » en français). Le framework YAML ne doit pas être confondu avec le langage de balisage YAML ("YAML Ain' t Markup Language"), qui n'est qu'indirectement lié au framework Web : les modules qui composent le framework ont en effet été créés avec Sass (« Syntactically Awesome Stylesheets »). Vous pouvez également utiliser le préprocesseur CSS, qui est fortement influencé par le langage de balisage YAML, pour personnaliser et développer chacune des sous-parties.

Depuis la version 3.0, la bibliothèque JavaScript jQuery a été totalement adaptée au framework CSS, ce qui simplifie considérablement le développement d'éléments dynamiques et animés pour votre projet Web. Avec Thinkin'Tags, le successeur de YAML Builder (jusqu' à 3.1), il existe également un éditeur glisser-déposer qui vous aide à concevoir votre propre mise en page YAML et qui gère automatiquement toutes les pages HTML et feuilles de style du projet.

Avec son système modulaire, YAML offre les avantages typiques d'un framework : lorsque vous vous attaquez à un nouveau projet Web, vous n'avez pas besoin de commencer tout depuis zéro, mais pouvez débuter avec une structure de base performante, ce qui permet de gagner un temps précieux. Grâce à son framework CSS responsive, l’avantage des modules préfabriqués YAML réside en particulier dans leur adaptabilité : quels que soient les périphériques et les navigateurs utilisés par les visiteurs pour accéder à votre projet, le code est suffisamment flexible pour assurer une présentation de bonne tenue. Avec les modules de base à votre disposition, le framework couvre les éléments les plus fréquemment utilisés.

Les modules standards spécifiés dans la feuille de style base.css incluent les éléments suivants :

Pour supporter les anciennes versions d'Internet Explorer, les composants principaux du fichier base.css ont été complétés par des corrections de bugs pour les versions 5, 6 et 7 de l'ancien navigateur Microsoft. Ces dernières sont stockées dans le fichier iehacks.css, qui est certes facultatif, mais qui doit dans tous les cas être utilisé tel quel si vous souhaitez présenter votre projet YAML dans les anciennes versions de navigateur Internet.

Le framework CSS s’assure non seulement que votre site Web soit au final optimal pour tous les visiteurs, mais surtout que le processus de développement et les connexions que vous pouvez établir vers le système de gestion de contenu de votre choix soient les plus simples possibles. La structure modulaire et la séparation stricte des composants de conception et de mise en page vous aident ainsi à conserver un code pratique et léger.

Le fait que vous puissiez avoir recours au langage simplifié de feuilles de style Sass est sans aucun doute l'un des plus grands plus du framework YAML. Grâce à une syntaxe simple, les feuilles de style souhaitées sont écrites beaucoup plus rapidement qu'avec un CSS ordinaire. De plus, le préprocesseur réduit le nombre de requêtes HTTP en reliant les feuilles de style et automatise la compression des modèles. Enfin, Sass génère automatiquement les fichiers CSS nécessaires sans que vous ayez à vous en occuper.

Un autre grand avantage du framework CSS Responsive résulte du travail de développement de la communauté YAML très engagée, qui a conçu et publié différents templates de systèmes de gestion de contenu avec même parfois une documentation dédiée. Ces modèles prêts à l'emploi permettent d’associer le framework aux applications pour la gestion de votre contenu Web. Ainsi, vous évitez les ajustements nécessaires au framework de base et pouvez ainsi vous concentrer entièrement sur la conception de votre projet Web. Voici quelques modèles de CMS YAML existants :

• JYAML: package complet avec templates, plugs-in et bibliothèques pour Joomla (à partir de la version 3.6.0 sur la base de YAML 4).
• yamltheme (Contao) : template Contao basé sur YAML 4.1 pour Contao 3.0.0 et 3.1.0.
• YAML pour Drupal : les différents template Drupal pour les framework CSS sous Drupal 6 et 7 (version 8 également prévue).

La base linguistique et la structure de YAML sont révélatrices de la simplicité du framework. Afin que les utilisateurs puissent utiliser au mieux ses avantages pour concevoir leurs propres projets Web, la première version stable a été lancée en 2008, à savoir YAML Builder. Combinant toutes les fonctions de base du framework CSS (jusqu'à YAML 3.1), l'outil en ligne vous permet de créer de manière rapide et intuitive votre mise en page Web grâce à des éléments de glisser-déposer bien conçus. Chacune des modifications peut être visualisée immédiatement dans l'aperçu live. Enfin, le Builder crée automatiquement les feuilles de style nécessaires ainsi que le balisage (X)HTML.

A la sortie de la quatrième version du framework, le YAML Builder a trouvé son successeur légitime dans l'outil Thinkin'Tags. Ce dernier se caractérise par un workflow encore plus performant pour la création de prototypes de sites Web basés sur YAML ou le framework CSS Blueprint qui est également pris en charge. A cet effet, les développeurs ont accès aux fonctionnalités suivantes :

• Éditeur HTML : grâce à l'éditeur HTML intégré, vous pouvez travailler le code en double-cliquant dessus dans la structure ou dans l'arborescence DOM. L'éditeur simplifie l'écriture du code grâce à des fonctions d'aide telles que le surlignage syntaxique, l'auto-complétion et la vérification instantanée.
• Éditeur CSS : vous pouvez également éditer les fichiers CSS de votre projet directement dans Thinkin'Tags à l'aide d'un éditeur interne. Pour ce faire, l'éditeur se sert de requêtes médias (ce que l’on appelle les media queries), grâce auxquelles une feuille de style peut être assignée à un média.
• Gestion des pages et des feuilles de style : chaque projet peut contenir différentes pages HTML et feuilles de style, ce qui vous permet d'affecter chaque modèle de conception à son fichier HTML. Il est également possible de masquer les feuilles de style pendant un temps défini.
• Test de conception Web responsive : vous pouvez tester votre mise en page pour différents scénarios, comme par exemple en testant la largeur d'affichage sur différents périphériques tels que les ordinateurs de bureau, les tablettes ou les smartphones, afin de pouvoir détecter et supprimer les éventuelles incohérences.

Optimisation de la typographie intuitive : les changements de typographie peuvent être rapidement testés. En outre, vous pouvez accéder à plus de 600 polices de caractères depuis la bibliothèque de polices en ligne de Google, bibliothèque que vous pouvez intégrer à votre projet en un seul clic.

Le plus gros problème des frameworks comme YAML est souvent la longue période d’adaptation qui est nécessaire pour se familiariser avec le code des différents modules. En ayant recours à des extraits de code préconçus, il est important d’examiner en profondeur leurs principes fonctionnels, même si vous disposez de solides connaissances en HTML, CSS et autres. Il est donc important d'adapter sa propre méthode de travail aux approches conceptuelles du framework afin de pouvoir atteindre au final le résultat escompté. Pour ce faire, YAML propose une documentation détaillée sur chacun des composants, mais la version actuelle n’est toutefois disponible qu'en anglais. Egalement assez classique chez les frameworks, on remarquera que pour les projets YAML, plus de code que nécessaire est généralement chargé (à moins que vous ne l'optimisiez spécifiquement).

Un autre inconvénient du framework CSS Responsive est sa licence, que nous avons déjà mentionnée en début d’article. Bien que la licence Creative Commons Paternité 2.0 (CC-BY 2.0) permette d'utiliser le framework Web gratuitement à des fins privées ou commerciales, ceci ne peut se faire que sous condition de créer un lien retour vers la page d'accueil de YAML dans votre site Web. Si vous souhaitez publier votre projet sous une licence différente, vous serez obligé d’acquérir l'un des modèles de licence payants (Project, General, OEM).

Avec son approche de conception Web responsive et sa prise en charge de CSS3 et HTML5, YAML est un framework très intéressant pour les applications Web, même si la dernière version en date est relativement ancienne. Grâce au module Accessibility, vous pouvez rendre votre site Web plus lisible pour les robots, ce qui non seulement est important en termes d’accessibilité, mais surtout vous permet de gagner des points en termes d’optimisation de votre référencement naturel. Avec en outre Thinkin'Tags, vous avez tous les outils en main pour produire une présence Web moderne et conforme aux normes. Si vous gérez en plus le contenu de votre projet à l'aide d'un des systèmes de gestion de contenu pris en charge, vous n’aurez plus qu’à vous concentrer sur la mise en page et le design.

Pour utiliser la version actuelle du framework CSS, vous devez d'abord télécharger ses fichiers principaux, que vous trouverez sur le site officiel et dans le référentiel GitHub YAML. Vous y trouvez notamment une documentation, diverses démos de mise en page et la bibliothèque JavaScript jQuery. Pour compiler l'exécution standard du framework à partir des fichiers disponibles, vous avez besoin des cinq composants suivants :

• Node.js : environnement d’exécution basé sur le moteur V8 JavaScript.
• Grunt CLI : outil basé sur des lignes de commandes et fondé sur Node.js. Il est nécessaire pour automatiser des tâches (par exemple, pour la compilation de fichiers LESS ou SCSS).
• Ruby : langage de programmation orienté objet.
• Sass : langage alternatif pour les feuilles de style. Il utilise des variables et des mixins afin de simplifier la création de modèles de conception.
• Compass : framework servant de bibliothèque standard pour Sass qui met à disposition un grand nombre de mixins pour le préprocesseur.

Si vous avez installé ces composants et sauvegardé les fichiers YAML sur votre système, vous devez alors configurer toutes les dépendances Grunt nécessaires. Les tâches suivantes sont nécessaires pour que la compilation du framework YAML fonctionne correctement :

• grunt : démarre une séquence Compass simple pour compiler les fichiers Sass/SCSS existants dans CSS.
• grunt watch : active la fonction de contrôle de Compass, qui recompilera automatiquement les documents Sass/SCSS en cas de modifications ultérieures.
• grunt build : compile tous les fichiers CSS statiques YAML.
• grunt build-utf8 : même fonctionnalité que grunt build, mais la règle @charset "utf8" reste active dans les fichiers CSS.

YAML permet de simplifier considérablement le développement d'un nouveau projet Web ainsi que sa conception visuelle grâce à CSS. Cependant, le processus d'apprentissage qui précède l'utilisation du framework ne doit pas être sous-estimée : ce n'est qu’en ayant des connaissances en HTML et CSS et en étant prêt à vous embarquer dans les idées conceptuelles des bases de développement standard que vous pourrez exploiter au mieux son potentiel. Avec Thinkin'Tags, le développeur Dirk Jesse a toutefois introduit un outil sur le marché qui soutient activement les utilisateurs expérimentés dans la création de layouts YAML et qui facilite ainsi leur démarrage. Les débutants auront cependant, et ce malgré l'outil d'aide, de grosses difficultés avec la structure de mise en page préconçue.

Un grand point d'interrogation réside dans la viabilité future du framework. La dernière mise à jour pour la version actuelle (version 4) remonte à 2014. Même si Dirk Jesse a confirmé qu’une cinquième édition du framework CSS Responsive  est en cours, il reste à savoir comment et si le développement se poursuivra bien. Jusqu'à présent, YAML et Thinkin'Tags se démarquent toutefois par leur structure flexible et conforme aux standards et offrent une plateforme tout à fait recommandable pour les projets Web modernes.