TheJoe.it Into the (open) source

22gen/140

Abilitare il plugin “zen coding” su gedit

Attenzione!

Questo articolo è stato scritto nel 2014, potrebbero esserci stati sviluppi circa l'argomento trattato.
In caso di dubbi lasciate un commento in fondo all'articolo.
Grazie.

zen-coding

Per chi non lo sa, gedit è l'editor di testo per eccellenza di qualsiasi distribuzione Linux basata su Gnome. È preinstallato sulla maggior parte delle distribuzioni Linux, ad eccezione di quelle basate su window managers diversi da Gnome (Kde, xfce, enlightenment, ecc.). Serve soprattutto per l'editing delle configurazioni nei file di sistema, ma supporta un gran numero di linguaggi di programmazione ed è espandibile con i plugin dedicati.

Per questo motivo, prima di usare Brackets, ho usato Gedit anche per l'editing di HTML e CSS.

Questo è gedit.

gedit

L'interfaccia utente di gedit, con la selezione del linguaggio.

"Zen coding" invece è un nuovo modo, più rapido, di scrivere l'HTML. I plugin ufficiali (scaricabili dal repository: http://code.google.com/p/zen-coding/) sono rilasciati sotto licenza MIT, ma ne esistono di non ufficiali anch'essi elencati nel repository, fra cui un paio per gedit: il plugin di Frank Marcias e quello di Mike Crittenden.

In realtà i due plugin sono molto simili e l'installazione di entrambi è elementare, basta aver dimestichezza con file e cartelle. Non mi dilungherò in un tutorial sull'installazione dell'uno o dell'altro, entrambe le procedure sono ben documentate sui rispettivi GitHub, vorrei più che altro soffermarmi sul funzionamento del plugin in se.

Supponiamo di dover creare in una pagina HTML l'intestazione e il menu di navigazione di un sito. Normalmente questo è quello che scriveremmo "a mano":

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

Con zen coding scriveremo invece una singola riga di istruzioni, che verranno interpretate ed espanse nel modo che conosciamo:

div#page>div.logo+ul#navigation>li*5>a

La spiegazione è semplice ed essenziale, basta confrontare i due codici. In pratica il primo termine definisce un tag, se seguito da "#termine" imposterà l'id del relativo tag come "termine", se a seguire mettiamo il simbolo "minore" (>) il tag che seguirà sarà figlio del primo tag. Se invece a seguire mettiamo il simbolo "+" il tag che segue sarà "fratello". È poi possibile specificare un numero di ripetizioni dello stesso tag (ed eventualmente dei relativi attributi), moltiplicandolo per un numero a scelta ("li*5").

Sul repository Google di zen coding, possiamo trovare una lista di tutti gli scenari possibili. È una pagina da tenere nei preferiti.

About

Mantengo questo blog a livello amatoriale dal 2009. Sono appassionato di grafica, tecnologia, software Open Source. Fra i miei articoli non sarà difficile trovarne circa la musica, ed alcuni di riflessioni personali, ma preferisco indirizzare la linea del blog principalmente verso la tecnologia. Per informazioni contattami.

Commenti (0) Trackback (0)

Ancora nessun commento.


Leave a comment

Ancora nessun trackback.