Emmet

Emmet – Crea Strutture HTML in un Lampo

Sicuramente non è la prima volta che ti trovi a leggere un mio articolo in cui ti presento una nuova tecnologia che ti permetterà di velocizzare la creazione dei tuoi progetti ma per quest'oggi ho qualcosa di veramente scoppiettante che ti consiglio di non perdere.

Contenuti Extra

Se non vuoi leggere questo articolo, puoi sempre consultare il video allegato, ma al tempo stesso ti consiglio di leggere questo articolo perché troverai alcune riflessioni e riferimenti che non potrei inserire all’interno di un video illustrativo.

Da dove mi trovo, non posso sapere se hai già provato alcuni sistemi per velocizzare la stesura del tuo codice HTML, non so se hai mai provato alcuni programmi come Text Expander o altri programmi che ti permettono di creare le tue scorciatoie da tastiera per inserire lunghe porzioni di testo ma quello che ti posso dire è che grazie alla risorsa che ti presento oggi sarai in grado di creare senza troppo sforzo qualsiasi elemento HTMl desideri.

In questo articolo ti presento Emmet, un plugin disponibile per i più comuni editor di testo che, come ti ho già detto più volte, velocizzerà molto la velocità con cui scriverai il tuo codice HTML.

Se stai pensando che non hai bisogno di un altro strumento per velocizzare la stesura del tuo codice, ti consiglio di pensare di nuovo perché Emmet è in grado di velocizzare in maniera incredibile il tuo lavoro. Sinceramente non sono soltanto io l’unico a dirlo, addirittura Smashing Magazine gli ha dedicato un articolo molto dettagliato e lo ha definito come erede di Zen Coding (altro famoso plugin che permetteva di utilizzare semplici scorciatorie), quindi se non vuoi prendere soltanto la mia parola dai pure un’occhiata all’articolo che ti ho linkato.

Come Installare Emmet

Se ti stai interessando e vuoi iniziare a provare questo nuovo strumento, la prima cosa che devi fare è sicuramente installare questo plugin all’interno del tuo editor di testo preferito. Se hai letto il mio ultimo articolo sul nuovo editor che ultimamente sto utilizzando, Brackets, avrai anche scoperto che è possibile installare questo plugin grazie al gestore di estenzioni che possiede. Ci sono altri editor che hanno la possibilità di gestire le proprie estenzioni grazie ad un gestore interno, come nel caso di Sublime Text o Aptana Studio, ma per assicurarti che anche il tuo editor ha la possibilità di installare questo plugin ti consiglio di consultare la pagina appropriata presente nel sito di Emmet.

Molto probabilmente, consultando la sua pagina di download, ti sarai stupito nel vedere quanti editor e servizi online ti permettono di utilizzare questo plugin; questo è sicuramente un punto a favore perché assicura un grande interesse e una sicura longevità del progetto stesso.

Se il tuo editor di testo non presenta alcun gestore di estenzioni non devi assolutamente preoccuparti, tutto quello che devi fare è seguire le istruzioni che ti permetteranno di installarlo su qualsiasi applicazione supportata.

Iniziamo ad Usare Emmet

Adesso che hai installato questo plugin è giunto il momento di imparare ad usarlo! Come ti dicevo precedentemente, io andrò ad utilizzare Brackets e sono su Mac (queste sono due cose che potrebbero cambiare le scorciatoie da tastiera). Nel mio caso, una volta installato il tutto nel mio editor, è apparsa una nuova voce nel menu del programma che mi mostra tutte le scorciatoie che posso utilizzare, qua sotto trovi uno screenshot.

Scorciatoie Tastiera Emmet

Controlla le scorciatoie da tastiera che hai nel tuo sistema, anche se, il tasto che utilizzerai maggiormente durante questo articolo sarà sopratutto il tasto TAB (quel tasto che ti aiuta ad indentare il codice nei tuoi file).

Crea un <div class=”test”>

Iniziamo subito con qualcosa di concreto! Spostati sul tuo editor con installato Emmet e digita quanto segue:

Nient’altro! Tutto quello che devi fare è inserire nel tuo file HTML una qualsiasi classe CSS, in questo esempio .test, e premi il tasto Tab. Che cosa è successo?

Con la scrittura di una semplice classe e la pressione di un singolo tasto il plugin Emmet è in grado di costruire un perfetto elemento &lt;div&gt; che conterrà qualsiasi altro elemento. Se finisse qua l’utilità di utilizzare Emmet la cosa non sarebbe poi così interessante, ma ci sono molte altre cose che fanno di questo plugin un potente strumento.

Crea la tua Prima Struttura HTML

Una delle cose più interessanti di questo plugin risulta nella possibilità di creare intere strutture HTML (rispettando anche la loro indentazione) in pochissimi secondi. Facciamo subito un esempio, stai creando la struttura del tuo sito e ti sei accorto che devi inserire un menu all’interno dell’elemento &lt;header&gt;, benissimo un primo piccolo test per questo potente plugin!

Ecco cosa dovresti inserire all’interno del tuo editor:

Come puoi notare tu stesso, ci sono alcuni caratteri che non abbiamo ancora presentato ma, prima di fare questo, perché non premi il tuo pulsante TAB?

Guarda un po’ che cosa sei stato in grado di creare… Un intero menu contenente 4 elementi differenti che conterranno le singole voci! Ma è giunto il momento di andare a scoprire i due caratteri che abbiamo utilizzato:

  • > (maggiore) – con questo simbolo sarai in grado di indicare quale elemento dovrà essere incluso all’interno dell’elemento presente a sinistra, ecco come è stato possibile inserire <nav class="menu"> all’interno di <header>;
  • * (moltiplica) – come puoi notare dall’elemento lista, questo carattere è stato utilizzato per indicare quante volte lo stesso dovrà essere ripetuto all’interno della pagina (infatti troviamo quattro volte l’elemento <li>).

Già a questo punto Emmet ha dimostrato che è in grado di creare una perfetta struttura HTML senza la necessità di stare a scrivere ogni singolo elemento, ma ci sono molte altre cose che ti potrebbero essere utili…

Inserisci gli Attributi

Al momento abbiamo visto quanto sia intuitivo inserire delle classi all’interno dei propri elementi e in modo molto simile potrai anche impostare gli ID (ti basta utilizzare il carattere # prima del nome ID dell’elemento) ma la cosa che è ancora più interessante è che puoi inserire qualsiasi altro attributo. Se la cosa ti sembra troppo bella per essere vera, prova ad inserire il seguente codice:

Ed ecco che cosa ti verrà restituito una volta premuto il pulsante TAB:

Probabilmente non sembra che tu stia salvando un gran numero di caratteri ma proviamo adesso a combinare alcuni degli operatori che abbiamo utilizzato fino ad ora per inserire del contenuto all’interno dei vari elementi.

Inserisci Fake Content

Siamo giunti al momento in cui è utile iniziare ad avere del contenuto di esempio all’interno della propria struttura HTML (quante volte ti sei trovato a scrivere Link 1, Link2 ecc… tutto a manina?!?), con la scorciatoia che trovi qua sotto potrai fare tutto questo premendo semplicemente il pulsante TAB:

In questo caso stiamo creando una lista contenente altrettanti link, riesci ad immaginare a che cosa serve il simbolo $? Guardiamo l’esempio:

Ecco che, a questo punto, sei stato in grado di inserire non soltanto delle classi uniche per ogni elemento della lista (in questo caso probabilmente sarebbe stato meglio utilizzare un ID) e in aggiunta hai anche inserito del testo all’interno degli elementi &lt;a&gt;! Mica male per una singola linea di codice.

Quindi, per raggruppare i nuovi caratteri che abbiamo utilizzato in questa porzione di codice, dai un’occhiata a questa lista:

  • $ (dollaro) – questo semplice carattere aggiungerà un numero che rispetta l’ordine del tuo elemento, in questo modo potrai distinguere facilmente i tuoi elementi;
  • {} (parentesi graffe) – grazie all’utilizzo di queste parentesi sarai in grado di inserire del testo personalizzato all’interno dei tuoi elementi e potrai utilizzarle assieme al carattere $ che ti permetterà di differenziare ogni singolo elemento.

Crea Elementi Gemelli

Al momento abbiamo analizzato soltanto quelle regole che permettono di includere un elemento all’interno di un altro, ma che cosa dovremmo fare per inserire due elementi che occupano la stessa posizione all’interno della struttura delle tue pagine?

Come Emmet ci ha abituato fino ad ora, molto probabilmente dovremmo utilizzare un altro carattere, ed infatti è proprio così! Dovrai utilizzare il carattere di addizione + per fare questo ed ecco un facile esempio che ti permetterà di capirlo:

Quello che sto cercando di fare un questo momento è creare una semplice struttura per l’elemento &lt;article&gt;, ecco come si trasforma questa sintassi una volta premuto il pulsante TAB:

La struttura HTML è adesso pronta ad accettare qualsiasi contenuto tu desideri e potrai personalizzarla come meglio credi ma adesso sai anche come sia facile inserire degli elementi gemelli all’interno della tua struttura HTML; tutto quello che devi fare è utilizzare il carattere +!

Conclusioni

Nonostante che all’interno del video ti mostro alcuni altri trucchetti che saranno attivabili con Emmet, ho deciso di terminare qua la spiegazione testuale di questo plugin perché altrimenti sarei stato, in alcuni casi, ripetitivo e questo non giova sicuramente al tuo apprendimento.

Quest’oggi ti ho presentato uno strumento che ti permetterà di velocizzare incredibilmente la creazione dei tuoi file HTML e anche io ho deciso di utilizzarla sempre più spesso quindi, d’ora in avanti, quando vedrai i miei video e vedrai comparire delle strutture HTML da una singola linea di codice non pensare che sia magia, è semplicemente Emmet che svolge egregiamente il suo lavoro!

Spero che questa risorsa sia utile a te quanto lo è per me e volevo sfruttare queste ultime righe dell’articolo per ricordarti che potrebbe far comodo anche a molti tuoi colleghi ed amici, ricordati quindi di condividere questo articolo con loro perché sono sicuro che te ne saranno eternamente grati!

Lascia il tuo Pensiero