In­tro­du­zio­ne a YAML

Lo svi­lup­pa­to­re web Dirk Jesse ha ri­la­scia­to nel 2005 il framework re­spon­si­ve YAML per il lin­guag­gio CSS, di­spo­ni­bi­le con licenza Creative Commons CC-BY 2.0, la quale permette di uti­liz­za­re la struttura gra­tui­ta­men­te sia per fini privati che com­mer­cia­li. I gestori che vogliono dotare il proprio progetto web di una licenza dif­fe­ren­te, possono ac­qui­sta­re in al­ter­na­ti­va un modello com­mer­cia­le che gli lasci carta bianca per quanto riguarda la con­ces­sio­ne di licenza.

Il focus della struttura CSS è da sempre quello di offrire all’utente la maggior libertà possibile per quel che riguarda l’im­po­sta­zio­ne di un’ap­pli­ca­zio­ne web ac­ces­si­bi­le a tutti. L’attuale versione del framework 4.2.1 risale all’anno 2013, e, grazie al template per l’in­te­gra­zio­ne dei CMS, è sup­por­ta­ta da numerosi sistemi di Content Ma­na­ge­ment come WordPress, TYPO3 o Joomla.

YAML è un ambiente di lavoro che sem­pli­fi­ca 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 cor­ri­spon­de all’ab­bre­via­zio­ne di “Yet Another Mul­ti­co­lumn Layout”, che in italiano potrebbe essere tradotto come “ecco l’ennesimo layout mul­ti­co­lon­na”. YAML non va confuso con l’omonimo lin­guag­gio di markup, il quale ha a che fare solo in­di­ret­ta­men­te con la struttura web: i moduli dei quali si compone il framework, sono infatti creati con Sass (Syn­tac­ti­cal­ly Awesome Sty­le­shee­ts). In questo modo le singole parti possono essere adattate e ampliate anche con l’aiuto del pre­pro­ces­so­re CSS, il quale è stato de­ci­sa­men­te in­fluen­za­to dal lin­guag­gio di markup YAML.

Sin dalla versione 3.0 è stata im­ple­men­ta­ta e per­fet­ta­men­te ar­mo­niz­za­ta la libreria Ja­va­Script jQuery all’interno del framework CSS, fa­ci­li­tan­do così di molto lo sviluppo di elementi dinamici e animati per il proprio in­se­ri­men­to sul web. Con Thinkin’ Tags, il suc­ces­so­re di YAML Builder, presente fino alla versione 3.1, si è aggiunto al framework anche un editor Drag&Drop, che vi supporta nell’im­po­sta­zio­ne del vostro layout YAML e che gestisce au­to­ma­ti­ca­men­te 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 pre­sta­zio­ni elevate, che vi ri­spar­mie­rà non poco tempo.

In quanto framework CSS re­spon­si­ve, il punto di forza della struttura pronta all’uso di YAML va trovata nella capacità di adat­ta­men­to: in­di­pen­den­te­men­te dal di­spo­si­ti­vo o dal browser uti­liz­za­to dai vi­si­ta­to­ri per accedere al vostro progetto web, questo codice fles­si­bi­le fornisce una pre­sen­ta­zio­ne gradevole da un punto di vista visivo. Con i soli moduli prin­ci­pa­li, che avete chia­ra­men­te a di­spo­si­zio­ne, il framework possiede gli elementi più spesso richiesti, no­no­stan­te il fatto che questi abbiano una di­men­sio­ne di appena 6 KB.

Tra i moduli standard, spe­ci­fi­ca­ti nel foglio di stile base.ccs, si an­no­ve­ra­no i seguenti:

Per poter sup­por­ta­re vecchie versioni di Internet Explorer, i com­po­nen­ti centrali del file base.css devono essere com­ple­ta­ti con una raccolta di bugfix; questo vale per le versioni 5, 6 e 7 del browser targato Microsoft. Questa col­le­zio­ne è salvata nel file iehacks.css che, sebbene opzionale, in alcuni casi deve essere uti­liz­za­to inal­te­ra­to, se volete pre­sen­ta­re il vostro progetto svi­lup­pa­to con YAML anche a coloro che uti­liz­za­no versioni pre­ce­den­ti del browser.

Lo scopo del framework CSS non è solo ed uni­ca­men­te quello di mettere a di­spo­si­zio­ne il vostro sito web a tutti i vi­si­ta­to­ri al meglio delle sue pos­si­bi­li­tà, ma prima ancora di questo, è quello di gestire il più sem­pli­ce­men­te possibile il processo di sviluppo e le possibili con­nes­sio­ni con i vostri CMS preferiti. La struttura modulare e la netta se­pa­ra­zio­ne tra i com­po­nen­ti di layout e di design aiutano a mantenere il codice leggero e di più facile utilizzo per gli utenti. Nel caso in cui non ne­ces­si­tia­te di un de­ter­mi­na­to elemento del sito web, potete sem­pli­ce­men­te esclu­der­lo, poiché siete voi a de­ter­mi­na­re la struttura e quindi il suo fun­zio­na­men­to.

Il fatto che, proprio per questo motivo, possiate fare af­fi­da­men­to sul lin­guag­gio sem­pli­fi­ca­to di fogli di stile Sass, è senza dubbio uno dei maggiori vantaggi del framework YAML. Grazie alla facile sintassi, i fogli di stile de­si­de­ra­ti sono rea­liz­za­bi­li molto più in fretta rispetto alle tem­pi­sti­che standard del lin­guag­gio CSS. Inoltre il pre­pro­ces­so­re riduce il numero di richieste HTTP, nelle quali i fogli di stile sono collegati l’un l’altro, au­to­ma­tiz­zan­do anche la com­pres­sio­ne dei moduli di ri­fe­ri­men­to. Se ancora non vi dovesse bastare, Sass genera au­to­ma­ti­ca­men­te i file CSS necessari, senza che dobbiate essere voi ad oc­cu­par­ve­ne.

Un secondo grande vantaggio del framework CSS re­spon­si­ve è da at­tri­bui­re al lavoro di sviluppo portato avanti dalla community attiva di YAML, la quale ha pro­get­ta­to e ri­la­scia­to 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 ap­pli­ca­zio­ni per la gestione dei vostri contenuti web. Questi modelli possono essere scaricati ed uti­liz­za­ti sia gra­tui­ta­men­te che a pagamento. In tal modo vi ri­spar­mia­te tutto il lavoro relativo agli adat­ta­men­ti necessari per il framework prin­ci­pa­le, potendovi così fo­ca­liz­za­re solo e uni­ca­men­te sull’im­po­sta­zio­ne 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 im­ple­men­ta­re il framework CSS in Drupal 6, 7 e che sono stati pia­ni­fi­ca­ti anche per la 8.

La struttura e il lin­guag­gio di base del framework YAML sono l’emblema della sem­pli­ci­tà del framework stesso. Per fare in modo che gli utenti possano godere in maniera ottimale di questo vantaggio nell’im­po­sta­zio­ne del proprio progetto web, è stata ri­la­scia­ta 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 rea­liz­za­re il layout web pia­ni­fi­ca­to in maniera veloce e intuitiva con il semplice utilizzo di elementi Drag&Drop. Ogni singola modifica può essere valutata nell’anteprima in tempo reale. Suc­ces­si­va­men­te il Builder produce au­to­ma­ti­ca­men­te i fogli di stile necessari così come il markup (X)HTML. Con la quarta versione del framework, YAML Builder ha trovato il suo legittimo suc­ces­so­re nel tool Thinkin’ Tags. Esso migliora il workflow relativo alla pro­du­zio­ne di prototipi di siti web basati su YAML o sull’altro framework CSS ugual­men­te sup­por­ta­to, Blueprint. Per questo e per altri motivi gli svi­lup­pa­to­ri mettono a di­spo­si­zio­ne le seguenti funzioni:

• Editor HTML: con l’aiuto di questo editor HTML integrato potete elaborare fa­cil­men­te il codice di­ret­ta­men­te nel layout o nella struttura ad albero DOM tramite doppio click del mouse. L’editor sem­pli­fi­ca per voi la scrittura del codice con gli aiuti tipici, come ad esempio mettendo in rilievo la sintassi, con l’au­to­com­ple­ta­men­to e con il controllo in tempo reale;

• Editor CSS: anche i file CSS del vostro progetto possono essere editati di­ret­ta­men­te con Thinkin’ Tags tramite un editor interno (questo include anche l’evi­den­zia­zio­ne della sintassi e l’analisi in tempo reale). Per fare ciò l’editor si affida alle Media Queries cor­ri­spon­den­ti, con l’aiuto delle quali un foglio di stile viene assegnato ad un supporto.

• Ma­na­ge­ment 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 cor­ri­spon­den­te. Inoltre è possibile rendere i fogli di stile in­vi­si­bi­li per un periodo di tempo de­ter­mi­na­to.

• Controllo del web design re­spon­si­ve: senza dover lasciare Thinkin’ Tags, testate il vostro layout per diversi scenari; in questo modo è possibile ri­pro­dur­re la larghezza di vi­sua­liz­za­zio­ne su diversi di­spo­si­ti­vi, come sui computer, sui tablet e sugli smarphone, al fine di in­di­vi­dua­re e dunque eliminare eventuali ine­sat­tez­ze.

• Ot­ti­miz­za­zio­ne ti­po­gra­fi­ca user-friendly: i cam­bia­men­ti nella ti­po­gra­fia sono ve­lo­ce­men­te testabili grazie all’utile Slider. Inoltre con l’ap­pli­ca­zio­ne avete di­ret­ta­men­te accesso ad oltre 600 font ap­par­te­nen­ti alla libreria WebFonts di Google, in­te­gra­bi­le all’interno del vostro progetto con un solo click.

Il problema maggiore dei framework come YAML è spesso il lungo tempo di ap­pren­di­men­to, ne­ces­sa­rio a prendere con­fi­den­za con il codice dei diversi moduli. Chi fa af­fi­da­men­to a snippet di codici già pronti, deve di fatto in­te­res­sar­si ai loro principi di fun­zio­na­men­to, il che si può fare da solo se si pos­sie­do­no adeguate co­no­scen­ze nei linguaggi HTML, CSS, ecc. Per ottenere l’obiettivo de­si­de­ra­to, vale perciò la pena di adattare i propri metodi di lavoro all’approccio con­ce­zio­na­le del framework.

YAML offre a questo scopo tutta la do­cu­men­ta­zio­ne ne­ces­sa­ria dei singoli com­po­nen­ti, che tuttavia per le attuali versioni è di­spo­ni­bi­le uni­ca­men­te in lingua inglese. Una con­di­zio­ne comune dei framework, valida chia­ra­men­te anche per YAML, è quella che per un progetto viene di norma caricato più codice di quanto ne sia realmente ne­ces­sa­rio, a meno che questo non sia stato ac­cu­ra­ta­men­te ot­ti­miz­za­to.

Un ulteriore svan­tag­gio del framework CSS re­spon­si­ve è la licenza già accennata all’inizio del presente articolo. No­no­stan­te la licenza Creative Commons CC-BY 2.0 vi permetta di uti­liz­za­re del tutto gra­tui­ta­men­te la struttura web sia per fini privati sia com­mer­cia­li, il pre­re­qui­si­to per fare ciò è tuttavia che inseriate un backlink sul vostro sito creato con YAML. Suc­ces­si­va­men­te, se vorrete pub­bli­ca­re il vostro progetto con un’altra licenza, non potrete evitare di dover ac­qui­sta­re un altro modello di licenza a pagamento, come ad esempio Project, General, OEM.

Con la sua facilità d’utilizzo da browser, l’approccio re­spon­si­ve del suo design web e il supporto di CSS3 e HTML5, YAML risulta un framework in­te­res­san­te per le ap­pli­ca­zio­ni web, no­no­stan­te l’ultimo release sia avvenuto ormai un po’ di tempo fa. Grazie al modulo Ac­ces­si­bi­li­ty rendete il vostro sito web leggibile dai robot, in questo modo non farete sem­pli­ce­men­te un passo verso un sito ac­ces­si­bi­le a tutti, ma gua­da­gne­re­te punti im­por­tan­ti anche per quel che riguarda l’ambito dell’ot­ti­miz­za­zio­ne per i motori di ricerca.

In com­bi­na­zio­ne con Thinkin’ Tags avete tutto ciò che vi serve per la creazione di una presenza web moderna e conforme agli standard. Se uti­liz­za­te un CMS sup­por­ta­to per l’am­mi­ni­stra­zio­ne dei contenuti per il vostro progetto, allora potete con­cen­trar­vi com­ple­ta­men­te sulla rea­liz­za­zio­ne del layout e del design.

Per poter uti­liz­za­re 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, al­tri­men­ti, nel re­po­si­to­ry di YAML su GitHub. Così otterrete in aggiunta, oltre alla do­cu­men­ta­zio­ne, diverse demo di layout e la libreria Ja­va­Script jQuery. Per compilare la versione standard del framework sulla base dei file messi a di­spo­si­zio­ne avete però bisogno di altri cinque com­po­nen­ti:

• Node.js: ambiente di runtime lato server su base di Ja­va­Script Engine V8;
• Grunt-CLI: tool con in­ter­fac­cia a riga di comando, costruito su Node.js e ne­ces­sa­rio per l’au­to­ma­tiz­za­zio­ne dei compiti, come ad esempio la com­pi­la­zio­ne di file LESS o SCSS;
• Ruby: lin­guag­gio di pro­gram­ma­zio­ne orientato agli oggetti;
• Sass: lin­guag­gio di fogli di stile al­ter­na­ti­vo 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 di­spo­si­zio­ne del pre­pro­ces­so­re un gran numero di mixin.

Se avete in­stal­la­to tutti questi com­po­nen­ti e se avete ar­chi­via­to i file YAML nel vostro sistema, allora potete risolvere tutte le pro­ble­ma­ti­che relative all’im­po­sta­zio­ne di Grunt. I seguenti task sono stati pensati per fare in modo che la com­pi­la­zio­ne del framework YAML proceda con re­go­la­ri­tà:

• 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 suc­ces­si­ve apportate ai documenti Sass e SCSS vengano compilate in au­to­ma­ti­co;
• grunt build: compila tutti i file YAML CSS statici;
• grunt build-utf8: stessa fun­zio­na­li­tà di grunt build, tuttavia la regola @charset “utf8” rimane attiva nei file CSS.

YAML sem­pli­fi­ca lo sviluppo di un nuovo progetto web così come l’ela­bo­ra­zio­ne visiva tramite CSS. Il processo di ap­pren­di­men­to previsto per un utilizzo congruo del framework, non va as­so­lu­ta­men­te sot­to­va­lu­ta­to: solamente se siete pratici con HTML e CSS, e so­prat­tut­to se siete pronti ad accettare le idee con­ce­zio­na­li della base di sviluppo conforme agli standard, potrete allora sfruttare appieno il suo po­ten­zia­le.

Con Thinkin’ Tags lo svi­lup­pa­to­re Dirk Jesse ha portato sul mercato uno strumento che supporta at­ti­va­men­te gli utenti esperti durante la creazione di layout YAML e che quan­to­me­no aiuta nella fase iniziale. Gli utenti meno esperti avranno la loro parte di problemi con la struttura di layout già pronta, no­no­stan­te gli strumenti di aiuto messi a loro di­spo­si­zio­ne.

Un grosso in­ter­ro­ga­ti­vo riguarda invece la capacità futura del framework. L’ultimo update dell’attuale versione 4 risale al 2014. Anche se è stato con­fer­ma­to da Jesse che il team è al lavoro su una quinta edizione del framework CSS re­spon­si­ve, rimane da vedere in che cosa con­si­ste­rà questo sviluppo e se vedrà ef­fet­ti­va­men­te la luce. Ma allo stato attuale delle cose YAML e Thinkin’ Tags mettono a di­spo­si­zio­ne una piat­ta­for­ma valevole per i moderni progetti web, che si ca­rat­te­riz­za per la sua struttura fles­si­bi­le e conforme agli standard.