Introduzione a YAML

Lo sviluppatore web Dirk Jesse ha rilasciato nel 2005 il framework responsive YAML per il linguaggio CSS, disponibile con licenza Creative Commons CC-BY 2.0, la quale permette di utilizzare la struttura gratuitamente sia per fini privati che commerciali. I gestori che vogliono dotare il proprio progetto web di una licenza differente, possono acquistare in alternativa un modello commerciale che gli lasci carta bianca per quanto riguarda la concessione di licenza.

Il focus della struttura CSS è da sempre quello di offrire all’utente la maggior libertà possibile per quel che riguarda l’impostazione di un’applicazione web accessibile a tutti. L’attuale versione del framework 4.2.1 risale all’anno 2013, e, grazie al template per l’integrazione dei CMS, è supportata da numerosi sistemi di Content Management come WordPress, TYPO3 o Joomla.

YAML è un ambiente di lavoro che semplifica il lavoro con i linguaggi HTML e CSS e che ha la sua forza nell’usabilità e nella facilità del progetto finale. Il nome YAML corrisponde all’abbreviazione di “Yet Another Multicolumn Layout”, che in italiano potrebbe essere tradotto come “ecco l’ennesimo layout multicolonna”. YAML non va confuso con l’omonimo linguaggio di markup, il quale ha a che fare solo indirettamente con la struttura web: i moduli dei quali si compone il framework, sono infatti creati con Sass (Syntactically Awesome Stylesheets). In questo modo le singole parti possono essere adattate e ampliate anche con l’aiuto del preprocessore CSS, il quale è stato decisamente influenzato dal linguaggio di markup YAML.

Sin dalla versione 3.0 è stata implementata e perfettamente armonizzata la libreria JavaScript jQuery all’interno del framework CSS, facilitando così di molto lo sviluppo di elementi dinamici e animati per il proprio inserimento sul web. Con Thinkin’ Tags, il successore di YAML Builder, presente fino alla versione 3.1, si è aggiunto al framework anche un editor Drag&Drop, che vi supporta nell’impostazione del vostro layout YAML e che gestisce automaticamente tutte le pagine HTML e i fogli di stile creati per il progetto.

YAML offre con il suo sistema modulare i tipici vantaggi di un framework: se siete in procinto di iniziare un nuovo progetto web, non siete costretti a partire da zero, ma potete iniziare con una struttura di base dalle prestazioni elevate, che vi risparmierà non poco tempo.

In quanto framework CSS responsive, il punto di forza della struttura pronta all’uso di YAML va trovata nella capacità di adattamento: indipendentemente dal dispositivo o dal browser utilizzato dai visitatori per accedere al vostro progetto web, questo codice flessibile fornisce una presentazione gradevole da un punto di vista visivo. Con i soli moduli principali, che avete chiaramente a disposizione, il framework possiede gli elementi più spesso richiesti, nonostante il fatto che questi abbiano una dimensione di appena 6 KB.

Tra i moduli standard, specificati nel foglio di stile base.ccs, si annoverano i seguenti:

Per poter supportare vecchie versioni di Internet Explorer, i componenti centrali del file base.css devono essere completati con una raccolta di bugfix; questo vale per le versioni 5, 6 e 7 del browser targato Microsoft. Questa collezione è salvata nel file iehacks.css che, sebbene opzionale, in alcuni casi deve essere utilizzato inalterato, se volete presentare il vostro progetto sviluppato con YAML anche a coloro che utilizzano versioni precedenti del browser.

Lo scopo del framework CSS non è solo ed unicamente quello di mettere a disposizione il vostro sito web a tutti i visitatori al meglio delle sue possibilità, ma prima ancora di questo, è quello di gestire il più semplicemente possibile il processo di sviluppo e le possibili connessioni con i vostri CMS preferiti. La struttura modulare e la netta separazione tra i componenti di layout e di design aiutano a mantenere il codice leggero e di più facile utilizzo per gli utenti. Nel caso in cui non necessitiate di un determinato elemento del sito web, potete semplicemente escluderlo, poiché siete voi a determinare la struttura e quindi il suo funzionamento.

Il fatto che, proprio per questo motivo, possiate fare affidamento sul linguaggio semplificato di fogli di stile Sass, è senza dubbio uno dei maggiori vantaggi del framework YAML. Grazie alla facile sintassi, i fogli di stile desiderati sono realizzabili molto più in fretta rispetto alle tempistiche standard del linguaggio CSS. Inoltre il preprocessore riduce il numero di richieste HTTP, nelle quali i fogli di stile sono collegati l’un l’altro, automatizzando anche la compressione dei moduli di riferimento. Se ancora non vi dovesse bastare, Sass genera automaticamente i file CSS necessari, senza che dobbiate essere voi ad occuparvene.

Un secondo grande vantaggio del framework CSS responsive è da attribuire al lavoro di sviluppo portato avanti dalla community attiva di YAML, la quale ha progettato e rilasciato diversi modelli per i più disparati CMS e che in parte offre anche supporto specifico durante l’utilizzo degli stessi. Questi template collegano il framework con le applicazioni per la gestione dei vostri contenuti web. Questi modelli possono essere scaricati ed utilizzati sia gratuitamente che a pagamento. In tal modo vi risparmiate tutto il lavoro relativo agli adattamenti necessari per il framework principale, potendovi così focalizzare solo e unicamente sull’impostazione del vostro progetto web. Tra i tanti template YAML per i CMS vi sono anche questi::

• JYAML: il pacchetto completo si compone di template, plug-in e libreria per Joomla dalla versione 3.6.0 sulla base di YAML 4;
• YAML for Drupal: diversi template per Drupal, che servono ad implementare il framework CSS in Drupal 6, 7 e che sono stati pianificati anche per la 8.

La struttura e il linguaggio di base del framework YAML sono l’emblema della semplicità del framework stesso. Per fare in modo che gli utenti possano godere in maniera ottimale di questo vantaggio nell’impostazione del proprio progetto web, è stata rilasciata nel 2008 la prima versione del già citato YAML Builder. Riunendo tutte le funzioni di base della struttura CSS (fino a YAML 3.1), YAML Builder permette di realizzare il layout web pianificato in maniera veloce e intuitiva con il semplice utilizzo di elementi Drag&Drop. Ogni singola modifica può essere valutata nell’anteprima in tempo reale. Successivamente il Builder produce automaticamente i fogli di stile necessari così come il markup (X)HTML.

Con la quarta versione del framework, YAML Builder ha trovato il suo legittimo successore nel tool Thinkin’ Tags. Esso migliora il workflow relativo alla produzione di prototipi di siti web basati su YAML o sull’altro framework CSS ugualmente supportato, Blueprint. Per questo e per altri motivi gli sviluppatori mettono a disposizione le seguenti funzioni:

• Editor HTML: con l’aiuto di questo editor HTML integrato potete elaborare facilmente il codice direttamente nel layout o nella struttura ad albero DOM tramite doppio click del mouse. L’editor semplifica per voi la scrittura del codice con gli aiuti tipici, come ad esempio mettendo in rilievo la sintassi, con l’autocompletamento e con il controllo in tempo reale;

• Editor CSS: anche i file CSS del vostro progetto possono essere editati direttamente con Thinkin’ Tags tramite un editor interno (questo include anche l’evidenziazione della sintassi e l’analisi in tempo reale). Per fare ciò l’editor si affida alle Media Queries corrispondenti, con l’aiuto delle quali un foglio di stile viene assegnato ad un supporto.

• Management delle pagine e dei fogli di stile: ogni progetto può contenere diverse pagine HTML e fogli di stile, dove ogni file HTML può essere assegnato al modulo corrispondente. Inoltre è possibile rendere i fogli di stile invisibili per un periodo di tempo determinato.

• Controllo del web design responsive: senza dover lasciare Thinkin’ Tags, testate il vostro layout per diversi scenari; in questo modo è possibile riprodurre la larghezza di visualizzazione su diversi dispositivi, come sui computer, sui tablet e sugli smarphone, al fine di individuare e dunque eliminare eventuali inesattezze.

• Ottimizzazione tipografica user-friendly: i cambiamenti nella tipografia sono velocemente testabili grazie all’utile Slider. Inoltre con l’applicazione avete direttamente accesso ad oltre 600 font appartenenti alla libreria WebFonts di Google, integrabile all’interno del vostro progetto con un solo click.

Il problema maggiore dei framework come YAML è spesso il lungo tempo di apprendimento, necessario a prendere confidenza con il codice dei diversi moduli. Chi fa affidamento a snippet di codici già pronti, deve di fatto interessarsi ai loro principi di funzionamento, il che si può fare da solo se si possiedono adeguate conoscenze nei linguaggi HTML, CSS, ecc. Per ottenere l’obiettivo desiderato, vale perciò la pena di adattare i propri metodi di lavoro all’approccio concezionale del framework.

YAML offre a questo scopo tutta la documentazione necessaria dei singoli componenti, che tuttavia per le attuali versioni è disponibile unicamente in lingua inglese. Una condizione comune dei framework, valida chiaramente anche per YAML, è quella che per un progetto viene di norma caricato più codice di quanto ne sia realmente necessario, a meno che questo non sia stato accuratamente ottimizzato.

Un ulteriore svantaggio del framework CSS responsive è la licenza già accennata all’inizio del presente articolo. Nonostante la licenza Creative Commons CC-BY 2.0 vi permetta di utilizzare del tutto gratuitamente la struttura web sia per fini privati sia commerciali, il prerequisito per fare ciò è tuttavia che inseriate un backlink sul vostro sito creato con YAML. Successivamente, se vorrete pubblicare il vostro progetto con un’altra licenza, non potrete evitare di dover acquistare un altro modello di licenza a pagamento, come ad esempio Project, General, OEM.

Con la sua facilità d’utilizzo da browser, l’approccio responsive del suo design web e il supporto di CSS3 e HTML5, YAML risulta un framework interessante per le applicazioni web, nonostante l’ultimo release sia avvenuto ormai un po’ di tempo fa. Grazie al modulo Accessibility rendete il vostro sito web leggibile dai robot, in questo modo non farete semplicemente un passo verso un sito accessibile a tutti, ma guadagnerete punti importanti anche per quel che riguarda l’ambito dell’ottimizzazione per i motori di ricerca.

In combinazione con Thinkin’ Tags avete tutto ciò che vi serve per la creazione di una presenza web moderna e conforme agli standard. Se utilizzate un CMS supportato per l’amministrazione dei contenuti per il vostro progetto, allora potete concentrarvi completamente sulla realizzazione del layout e del design.

Per poter utilizzare l’attuale versione del framework CSS, dovete per prima cosa scaricare i file dati del core, che possono essere trovati o sul sito web officiale o, altrimenti, nel repository di YAML su GitHub. Così otterrete in aggiunta, oltre alla documentazione, diverse demo di layout e la libreria JavaScript jQuery. Per compilare la versione standard del framework sulla base dei file messi a disposizione avete però bisogno di altri cinque componenti:

• Node.js: ambiente di runtime lato server su base di JavaScript Engine V8;

• Grunt-CLI: tool con interfaccia a riga di comando, costruito su Node.js e necessario per l’automatizzazione dei compiti, come ad esempio la compilazione di file LESS o SCSS;

• Ruby: linguaggio di programmazione orientato agli oggetti;

• Sass: linguaggio di fogli di stile alternativo che permette l’utilizzo di variabili e mixin e che in questo modo facilita la creazione di moduli standard;

• Compass: framework che serve a Sass come libreria standard e che mette a disposizione del preprocessore un gran numero di mixin.

Se avete installato tutti questi componenti e se avete archiviato i file YAML nel vostro sistema, allora potete risolvere tutte le problematiche relative all’impostazione di Grunt. I seguenti task sono stati pensati per fare in modo che la compilazione del framework YAML proceda con regolarità:

• grunt: lancia una semplice seguenza Compass in modo da compilare in CSS i file presenti in formato Sass e SCSS;
• grunt watch: attiva la funzione di controllo Compass, cosicché tutte le modifiche successive apportate ai documenti Sass e SCSS vengano compilate in automatico;
• grunt build: compila tutti i file YAML CSS statici;
• grunt build-utf8: stessa funzionalità di grunt build, tuttavia la regola @charset “utf8” rimane attiva nei file CSS.

YAML semplifica lo sviluppo di un nuovo progetto web così come l’elaborazione visiva tramite CSS. Il processo di apprendimento previsto per un utilizzo congruo del framework, non va assolutamente sottovalutato: solamente se siete pratici con HTML e CSS, e soprattutto se siete pronti ad accettare le idee concezionali della base di sviluppo conforme agli standard, potrete allora sfruttare appieno il suo potenziale.

Con Thinkin’ Tags lo sviluppatore Dirk Jesse ha portato sul mercato uno strumento che supporta attivamente gli utenti esperti durante la creazione di layout YAML e che quantomeno aiuta nella fase iniziale. Gli utenti meno esperti avranno la loro parte di problemi con la struttura di layout già pronta, nonostante gli strumenti di aiuto messi a loro disposizione.

Un grosso interrogativo riguarda invece la capacità futura del framework. L’ultimo update dell’attuale versione 4 risale al 2014. Anche se è stato confermato da Jesse che il team è al lavoro su una quinta edizione del framework CSS responsive, rimane da vedere in che cosa consisterà questo sviluppo e se vedrà effettivamente la luce. Ma allo stato attuale delle cose YAML e Thinkin’ Tags mettono a disposizione una piattaforma valevole per i moderni progetti web, che si caratterizza per la sua struttura flessibile e conforme agli standard.