Pré­sen­ta­tion des YAML

En 2005, le dé­ve­lop­peur Web Dirk Jesse publia le framework Res­pon­sive CSS YAML sous la licence Creative Commons CC-BY 2.0, qui permet aux uti­li­sa­teurs d'uti­li­ser la structure gra­tui­te­ment dans les secteurs privés et com­mer­ciaux. Les ad­mi­nis­tra­teurs qui sou­hai­tent mettre en ligne leur projet Web sous une licence dif­fé­rente peuvent opter pour d’autres modèles pro­fes­sion­nels. Avec la structure CSS, il a toujours était question d'offrir aux uti­li­sa­teurs la plus grande des libertés possible dans la con­cep­tion d'ap­pli­ca­tions Web. La version actuelle (4.2.1) du framework, qui est prise en charge grâce à des modèles d'in­té­gra­tion 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 en­vi­ron­ne­ment de travail qui permet aux dé­ve­lop­peurs de tra­vail­ler plus fa­ci­le­ment avec les langages HTML et CSS, en mettant l’accent sur la sim­pli­fi­ca­tion des projets dans leurs uti­li­sa­tions. Le nom YAML est l'abré­via­tion de «  Yet Another Mul­ti­co­lumn 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'in­di­rec­te­ment lié au framework Web : les modules qui composent le framework ont en effet été créés avec Sass (« Syn­tac­ti­cally Awesome Stylesheets »). Vous pouvez également utiliser le pré­pro­ces­seur CSS, qui est fortement influencé par le langage de balisage YAML, pour per­son­na­li­ser et dé­ve­lop­per chacune des sous-parties.

Depuis la version 3.0, la bi­blio­thèque Ja­vaS­cript jQuery a été to­ta­le­ment adaptée au framework CSS, ce qui simplifie con­si­dé­ra­ble­ment le dé­ve­lop­pe­ment d'élé­ments dy­na­miques et animés pour votre projet Web. Avec Thin­kin'Tags, le suc­ces­seur 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 au­to­ma­ti­que­ment 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 per­for­mante, ce qui permet de gagner un temps précieux. Grâce à son framework CSS res­pon­sive, l’avantage des modules pré­fa­bri­qués YAML réside en par­ti­cu­lier dans leur adap­ta­bi­lité : quels que soient les pé­ri­phé­riques et les na­vi­ga­teurs utilisés par les visiteurs pour accéder à votre projet, le code est suf­fi­sam­ment flexible pour assurer une pré­sen­ta­tion de bonne tenue. Avec les modules de base à votre dis­po­si­tion, le framework couvre les éléments les plus fré­quem­ment 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'In­ter­net Explorer, les com­po­sants prin­ci­paux du fichier base.css ont été complétés par des cor­rec­tions de bugs pour les versions 5, 6 et 7 de l'ancien na­vi­ga­teur Microsoft. Ces dernières sont stockées dans le fichier iehacks.css, qui est certes fa­cul­ta­tif, mais qui doit dans tous les cas être utilisé tel quel si vous souhaitez présenter votre projet YAML dans les anciennes versions de na­vi­ga­teur 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é­ve­lop­pe­ment et les con­nexions 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é­pa­ra­tion stricte des com­po­sants de con­cep­tion 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 sou­hai­tées sont écrites beaucoup plus ra­pi­de­ment qu'avec un CSS ordinaire. De plus, le pré­pro­ces­seur réduit le nombre de requêtes HTTP en reliant les feuilles de style et au­to­ma­tise la com­pres­sion des modèles. Enfin, Sass génère au­to­ma­ti­que­ment les fichiers CSS né­ces­saires sans que vous ayez à vous en occuper.

Un autre grand avantage du framework CSS Res­pon­sive résulte du travail de dé­ve­lop­pe­ment de la com­mu­nauté YAML très engagée, qui a conçu et publié dif­fé­rents templates de systèmes de gestion de contenu avec même parfois une do­cu­men­ta­tion dédiée. Ces modèles prêts à l'emploi per­met­tent d’associer le framework aux ap­pli­ca­tions pour la gestion de votre contenu Web. Ainsi, vous évitez les ajus­te­ments né­ces­saires au framework de base et pouvez ainsi vous con­cen­trer en­tiè­re­ment sur la con­cep­tion de votre projet Web. Voici quelques modèles de CMS YAML existants :

• JYAML: package complet avec templates, plugs-in et bi­blio­thèques pour Joomla (à partir de la version 3.6.0 sur la base de YAML 4).
• YAML pour Drupal : les dif­fé­rents template Drupal pour les framework CSS sous Drupal 6 et 7 (version 8 également prévue).

La base lin­guis­tique et la structure de YAML sont ré­vé­la­trices de la sim­pli­cité du framework. Afin que les uti­li­sa­teurs 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 mo­di­fi­ca­tions peut être vi­sua­li­sée im­mé­dia­te­ment dans l'aperçu live. Enfin, le Builder crée au­to­ma­ti­que­ment les feuilles de style né­ces­saires ainsi que le balisage (X)HTML.

A la sortie de la quatrième version du framework, le YAML Builder a trouvé son suc­ces­seur légitime dans l'outil Thin­kin'Tags. Ce dernier se ca­rac­té­rise par un workflow encore plus per­for­mant pour la création de pro­to­types de sites Web basés sur YAML ou le framework CSS Blueprint qui est également pris en charge. A cet effet, les dé­ve­lop­peurs ont accès aux fonc­tion­na­li­tés suivantes :

• Éditeur HTML : grâce à l'éditeur HTML intégré, vous pouvez tra­vail­ler le code en double-cliquant dessus dans la structure ou dans l'ar­bo­res­cence DOM. L'éditeur simplifie l'écri­ture du code grâce à des fonctions d'aide telles que le sur­lig­nage syn­taxique, l'auto-com­plé­tion et la vé­ri­fi­ca­tion ins­tan­ta­née.
• Éditeur CSS : vous pouvez également éditer les fichiers CSS de votre projet di­rec­te­ment dans Thin­kin'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 aux­quelles une feuille de style peut être assignée à un média.
• Gestion des pages et des feuilles de style : chaque projet peut contenir dif­fé­rentes pages HTML et feuilles de style, ce qui vous permet d'af­fec­ter chaque modèle de con­cep­tion à son fichier HTML. Il est également possible de masquer les feuilles de style pendant un temps défini.
• Test de con­cep­tion Web res­pon­sive : vous pouvez tester votre mise en page pour dif­fé­rents scénarios, comme par exemple en testant la largeur d'af­fi­chage sur dif­fé­rents pé­ri­phé­riques tels que les or­di­na­teurs de bureau, les tablettes ou les smart­phones, afin de pouvoir détecter et supprimer les éven­tuelles in­co­hé­rences.

Op­ti­mi­sa­tion de la ty­po­gra­phie intuitive : les chan­ge­ments de ty­po­gra­phie peuvent être ra­pi­de­ment testés. En outre, vous pouvez accéder à plus de 600 polices de ca­rac­tères depuis la bi­blio­thèque de polices en ligne de Google, bi­blio­thèque que vous pouvez intégrer à votre projet en un seul clic.

Le plus gros problème des fra­me­works comme YAML est souvent la longue période d’adap­ta­tion qui est né­ces­saire pour se fa­mi­lia­ri­ser avec le code des dif­fé­rents modules. En ayant recours à des extraits de code préconçus, il est important d’examiner en pro­fon­deur leurs principes fonc­tion­nels, même si vous disposez de solides con­nais­sances en HTML, CSS et autres. Il est donc important d'adapter sa propre méthode de travail aux approches con­cep­tuelles du framework afin de pouvoir atteindre au final le résultat escompté. Pour ce faire, YAML propose une do­cu­men­ta­tion détaillée sur chacun des com­po­sants, mais la version actuelle n’est toutefois dis­po­nible qu'en anglais. Egalement assez classique chez les fra­me­works, on re­mar­quera que pour les projets YAML, plus de code que né­ces­saire est gé­né­ra­le­ment chargé (à moins que vous ne l'op­ti­mi­siez spé­ci­fi­que­ment).

Un autre in­con­vé­nient du framework CSS Res­pon­sive est sa licence, que nous avons déjà men­tion­née en début d’article. Bien que la licence Creative Commons Paternité 2.0 (CC-BY 2.0) permette d'uti­li­ser le framework Web gra­tui­te­ment à des fins privées ou com­mer­ciales, 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 dif­fé­rente, vous serez obligé d’acquérir l'un des modèles de licence payants (Project, General, OEM).

Avec son approche de con­cep­tion Web res­pon­sive et sa prise en charge de CSS3 et HTML5, YAML est un framework très in­té­res­sant pour les ap­pli­ca­tions Web, même si la dernière version en date est re­la­ti­ve­ment ancienne. Grâce au module Ac­ces­si­bi­lity, vous pouvez rendre votre site Web plus lisible pour les robots, ce qui non seulement est important en termes d’ac­ces­si­bi­lité, mais surtout vous permet de gagner des points en termes d’op­ti­mi­sa­tion de votre ré­fé­ren­ce­ment naturel. Avec en outre Thin­kin'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 con­cen­trer sur la mise en page et le design.

Pour utiliser la version actuelle du framework CSS, vous devez d'abord té­lé­char­ger ses fichiers prin­ci­paux, que vous trouverez sur le site officiel et dans le ré­fé­ren­tiel GitHub YAML. Vous y trouvez notamment une do­cu­men­ta­tion, diverses démos de mise en page et la bi­blio­thèque Ja­vaS­cript jQuery. Pour compiler l'exé­cu­tion standard du framework à partir des fichiers dis­po­nibles, vous avez besoin des cinq com­po­sants suivants :

• Node.js : en­vi­ron­ne­ment d’exécution basé sur le moteur V8 Ja­vaS­cript.
• Grunt CLI : outil basé sur des lignes de commandes et fondé sur Node.js. Il est né­ces­saire pour au­to­ma­ti­ser des tâches (par exemple, pour la com­pi­la­tion de fichiers LESS ou SCSS).
• Ruby : langage de pro­gram­ma­tion orienté objet.
• Sass : langage al­ter­na­tif pour les feuilles de style. Il utilise des variables et des mixins afin de sim­pli­fier la création de modèles de con­cep­tion.
• Compass : framework servant de bi­blio­thèque standard pour Sass qui met à dis­po­si­tion un grand nombre de mixins pour le pré­pro­ces­seur.

Si vous avez installé ces com­po­sants et sau­ve­gardé les fichiers YAML sur votre système, vous devez alors con­fi­gu­rer toutes les dé­pen­dances Grunt né­ces­saires. Les tâches suivantes sont né­ces­saires pour que la com­pi­la­tion du framework YAML fonc­tionne cor­rec­te­ment :

• 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 re­com­pi­lera au­to­ma­ti­que­ment les documents Sass/SCSS en cas de mo­di­fi­ca­tions ul­té­rieures.
• grunt build : compile tous les fichiers CSS statiques YAML.
• grunt build-utf8 : même fonc­tion­na­lité que grunt build, mais la règle @charset "utf8" reste active dans les fichiers CSS.

YAML permet de sim­pli­fier con­si­dé­ra­ble­ment le dé­ve­lop­pe­ment d'un nouveau projet Web ainsi que sa con­cep­tion visuelle grâce à CSS. Cependant, le processus d'ap­pren­tis­sage qui précède l'uti­li­sa­tion du framework ne doit pas être sous-estimée : ce n'est qu’en ayant des con­nais­sances en HTML et CSS et en étant prêt à vous embarquer dans les idées con­cep­tuelles des bases de dé­ve­lop­pe­ment standard que vous pourrez exploiter au mieux son potentiel. Avec Thin­kin'Tags, le dé­ve­lop­peur Dirk Jesse a toutefois introduit un outil sur le marché qui soutient ac­ti­ve­ment les uti­li­sa­teurs ex­pé­ri­men­té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 dif­fi­cul­tés avec la structure de mise en page préconçue.

Un grand point d'in­ter­ro­ga­tion 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 Res­pon­sive  est en cours, il reste à savoir comment et si le dé­ve­lop­pe­ment se pour­sui­vra bien. Jusqu'à présent, YAML et Thin­kin'Tags se dé­mar­quent toutefois par leur structure flexible et conforme aux standards et offrent une pla­te­forme tout à fait re­com­man­dable pour les projets Web modernes.