Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Terminal
Webdesign

Linea di comando per il Web Design: Introduzione

by
Length:MediumLanguages:
This post is part of a series called The Command Line for Web Design.
The Command Line for Web Design: Grasping the Basics

Italian (Italiano) translation by Francesco Turlon (you can also view the original English article)

Per un bel periodo lavorare con la linea di comando era considerato al di fuori del regno dei web designers. Era utilizzato prevalentemente per cose come amministrazione dei servers e gestione dei files e tutto quel genere di attività che non hanno nulla a che vedere con la giornata lavorativa media del web designer.

Ciò poteva essere valido nel passato ma non c'è nulla di più di distante dalla verità oggi.

Attualmente esistono migliaia di potenti e incredibili strumenti per linea di comando appositamente disponibili per linguaggi front-end e workflows. Gli enormi vantaggi che offrono mostrano che l'essere pratici di questo strumento sta diventando un'abilità sempre più essenziale per web designers.

some familiar command line tools
Alcuni strumenti spesso usati nella linea di comando

Devo ammetterlo, per qualche tempo dopo che ho scoperto questo genere di strumenti di web design ero un po' “linea di comando fobico.” Ero influenzato dall'idea “per programmatori non per designers” e ho sempre guardato altre opzioni al posto di dare una possibilità alla linea di comando.

Poi, infine, mi ci sono tuffato quando un progetto che volevo realmente utilizzare richiedeva obbligatoriamente l'interazione con la linea di comando. Inizialmente ero un po' intimidito ma, con mia grande sorpresa, mi sono trovato ad esclamare: 

“Fantastico, non so perché non ho cominciato a imparare a usarlo anni fa!”

Oggi, uso la linea di comando in quasi ogni progetto e non ne posso fare a meno. Risulta incredibilmente utile in qualsiasi passaggio del tipico processo di web design.

Riguardo questa serie

Ma ecco il punto, anche ora non sarei in grado di fare la maggior parte delle cose che troverete in un tipico tutorial “primi passi con la linea di comando” se la mia vita dipendesse da esso. Non importa se non avete mai imparato i comandi mkdir o cd o ls. La verità è che, in quanto web designer, non avrete bisogno di nulla di tutto questo. Le uniche abilità di linea di comando di cui avrete bisogno saranno quelle che faciliteranno direttamente e renderanno più efficiente la realizzazione dei vostri progetti.

Questo è il motivo per cui questa serie non riguarda “come eseguire comandi oscuri per attività che non farai mai.” Non è nemmeno un tipo di serie stile “complesso processo di sviluppo semplificato per designers”. Questa è una serie specificatamente per web designers, che vi mostra come utilizzare strumenti che sono incredibilmente utili soprattutto per progetti di web design.

Una volta che avrete introdotto la linea di comando nei vostri processi di design vi si aprirà un intero mondo di opzioni, risparmierete tempo prezioso e, ve lo prometto, non vi guarderete più indietro.

Perché la linea di comando è fantastica per il Web Design

Attaverso questa serie di tutorials imparerete processi guidati di linea di comando che cambieranno definitivamente il modo in cui approcciate il web design.

Dopo aver introdotto le basi salteremo direttamente ad abilità pratiche che potrete subito adottare. Quando vedrete ognuno dei singoli punti che tratteremo inizierete a vedere formarsi il disegno del perché la linea di comando è un così importante strumento nell'ambito del web design.

I principali punti trattati

Vediamo velocemente i punti che tratteremo in questa serie. Ci sono cinque argomenti principali:

1. Padroneggiare i pacchetti di terze parti

I web designers spesso utilizzano pacchetti di terze parti come jQuery, Bootstrap, Modernizr, Font Awesome, Normalize.css e molti altri. Prima della linea di comando, utilizzare questi pacchetti esterni significava normalmente:

  1. Mantenere una lista di bookmarks dove trovare il download dell'ultima versione di ogni pacchetto.
  2. Visitare manualmente i suddetti siti per effettuare il download di ogni pacchetto ogni volta che ne avevate bisogno.
  3. Ripetere nuovamente il processo ogni volta che un pacchetto veniva aggiornato.
  4. Trasferire manualmente la versione aggiornata di ogni pacchetto in ogni progetto in cui era stato utilizzato.

L'avere a che fare con la gestione manuale dei pacchetti è un processo lento e ingombrante ma con la linea di comando diventa un problema passato.

Potrete inserire direttamente i pacchetti nei vostri progetti digitando poche parole come:

 bower install jquery

Oppure potrete tenere i pacchetti aggiornati digitando:

 bower update jquery

Non esisterà più il download manuale dei pacchetti dal web o l'aggiornamento manuale quando vengono modificati, e questo è solo un piccolo assaggio delle cose che potrete fare attraverso la gestione dei pacchetti via linea di comando.

2. Potenziare il codice front-end

I tre linguaggi che molto probabilmente vedrete utilizzati in qualsiasi progetto di web design sono CSS, HTML e Javascript. Gli strumenti di linea di comando aprono nuovi modi di rendere più efficiente e potente la produzione e il rilascio del codice di questi linguaggi.

Una delle funzionalità più potenti per cui possiamo utilizzare la linea di comando con CSS è la compilazione dei preprocessori, come StylusSass / SCSS e LESS. Tramite linea di comando potrete compilare velocemente qualsiasi file da preprocessore digitando poche parole. Potrete anche impostare la compilazione automatica in modo che i files CSS vengano ricompilati ogni volta che vengono aggiornati.

Attraverso la linea di comando potremo migliorare il nostro workflow in CSS con funzionalità quali l'autoprefixing, la pulizia e compressione dei files. Seguendo la stessa linea potremo anche ottimizzare il nostro Javascript sfruttando la concatenazione e la minificazione dei files.

E per l'HTML avremo accesso a linguaggi come Jade che ci permette sia di scrivere HTML abbreviato (shorthand) che di sviluppare semplici eppur sofisticati sistemi di templating per evitare di riscrivere parti di codice che si ripetono per tutti i progetti.

3. Automazione con i Task Runners

Essere capaci di compilare in CSS in poche parole, per poi minificare Javascript con altrettante poche parole è fantastico. Ma le cose cominciano ad essere davvero super-potenziate quando potrete fare tutto ciò che serve nel vostro progetto con un singolo comando.

Utilizzando qualcosa chiamato “task runner” un singolo comando come la parola gulp o grunt possono essere impostati per compilare i vostri files preprocessati per poi combinare, autoprefissare, pulire e comprimere il CSS finale. Dopodichè i vostri files Jade vengono compilati in HTML e i files JS vengono concatenati e minificati tutto in una volta e nell'arco di pochi secondi.

Potrete anche impostare i task runners per gestire queste cose senza dover digitare alcunchè. Dopo aver eseguito un comando come gulp watch o grunt watch potrete andare avanti e lavorare sui files di progetto mentre, in background, tutta la compilazione e ottimizzazione verrà gestita per voi automaticamente.

I task runners sono completamente flessibili e possono essere configurati come volete, così non c'è fine ai modi in cui potrete impostare i vostri progetti. Semplicemente settateli in modo che si adattino ad ogni circostanza, a seconda di ciò che necessitate.

4. Live Reloading, Browser Syncing & Multi Device Testing

Live reloading vi permette di lasciare il vostro dito libero dal digitare il tasto refresh e concentrarvi nell'ottenere un feedback più diretto e in real time delle modifiche al vostro design, nel momento in cui le effettuate.

Dopo che avrete messo in moto l'automazione attraverso i task runners potrete aggiungere il live reload direttamente nel mix, combinandolo in qualsiasi configurazione avrete creato per i vostri progetti. Potrete decidere esattamente cosa attiva live reload, che sia la compilazione dei preprocessori, cambiamenti HTML o qualsiasi cosa vogliate.

Come parte dell'abilitazione di live reloading potrete anche avere un'anteprima del sito in localhost, cioè una simulazione di un host web su una macchina locale. Questo è fantastico per essere sicuri che tutto funzioni come previsto su protocolli https://, in quanto opposti a protocolli file://.

Ancora meglio, imparerete ad ottenere la sincronizzazione browser per cui, ottenuto un URL, potrete visualizzarlo su browsers multipli e sincronizzarli contemporaneamente. Per esempio, al clic di un pulsante di navigazione in Chrome potrete vedere come rispondono Firefox, Opera e Safari alla stessa azione in modo simultaneo.

Questa sincronizzazione browser non è limitata ad un unico dispositivo. Potrete anche andare allo stesso URL sul vostro tablet, smartphone e qualsiasi altro dispositivo sulla stessa connessione, e avrete un'anteprima sincronizzata in ogni display. Tutto ciò vi darà l'impostazione perfetta per il testing attraverso browsers e dispositivi.

E dal momento che state costruendo tutto questo attraverso le impostazioni di un task runner tutto sarà disponibile in live con un comando di due parole come grunt start o gulp start.

5. Creare lo Scaffolding di nuovi progetti

Creare manualmente lo scaffolding di nuovi progetti può essere piuttosto penoso. Avere le impostazioni di struttura di cartelle e files e tutti questi connessi e collegati in modo che lavorino insieme può richiedere parecchio tempo.

Utilizzando la linea di comando potrete gestire lo scaffolding in pochi secondi, perfetto per quando vorrete impiegare frameworks di terze parti e codice di base come Foundation, Bootstrap, HTML5 Boilerplate e Google Web Starter Kit.

Con i metodi che tratteremo i vostri progetti nuovamente strutturati non avranno soltanto tutto il codice di cui hanno bisogno ma i rispettivi task runners avranno preconfigurato attività come la compilazione automatica e le anteprime in localhost in modo tale che siano già pronte per essere utilizzate.

Andando avanti

Bene quindi, se siete pronti ci vedremo nel primo tutorial!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.