Flux è un editor di siti Web WYSIWYG per Mac. Ora, prima di maledire sottovoce quanto odi i WYSIWYG, dovresti sapere che Flux è diverso ed è abbastanza potente e flessibile da essere usato dagli sviluppatori web professionisti.
Oggi ti presenterò a Flux creando una super semplice pagina web da zero (nessun modello fastidiosamente rigido). Lungo la strada vedremo come si presenta un tipico flusso di lavoro e perché potrebbe essere il miglior editor di visual web che abbia mai usato.
Perché Flux è diverso?
Quando penso a un editor di siti Web WYSIWYG, vengono in mente due applicazioni popolari. Il primo è Dreamweaver. Dreamweaver è un'applicazione ridicolmente potente, ma ha una curva di apprendimento abbastanza elevata. È semplicemente un'applicazione enorme che potrebbe non valerne la pena per molti designer che stanno già scrivendo codice a mano.
La seconda applicazione che viene in mente è iWeb. iWeb è divertente per un paio d'ore, ma una volta che ti rendi conto di quanto sia rigoroso il sistema dei template, l'idea di usarlo per il web design professionale va fuori dalla finestra. Persino il suo rivale di gran lunga superiore, RapidWeaver, sembra ancora spingervi più verso i progetti preimpostati e sembra orientato verso i novizi dello sviluppo web.
Quindi Dreamweaver è per professionisti ma ha una curva di apprendimento ripida e iWeb è per i laici e ha una curva di apprendimento quasi zero (e di conseguenza zero flessibilità), dov'è il mezzo felice? Inserisci Flusso.
Flux è un'applicazione di visual web design per persone che odiano applicazioni di visual web design. Il flusso di lavoro è stato attentamente elaborato per rispecchiare il modo in cui si codificano i siti a mano. La parte migliore: è completamente flessibile. Ci sono alcuni modelli inclusi, ma non li ho mai nemmeno disturbati perché Flux semplifica la progettazione da zero, proprio come farei se scrivessi manualmente il codice.
Basta parlare, vediamo Flux in azione.
Cosa stiamo costruendo
Perché voglio che questa sia un'introduzione davvero semplice, manterremo il design semplicissimo. Se ricevo abbastanza richieste nei commenti, posso scrivere un altro tutorial più complesso e avanzato, ma per ora continueremo con un sito di una pagina di base con pochissimo spazio.
Abbastanza semplice, vero? Sembra quasi uno dei modelli di formaggio che vengono con questi tipi di app, ma come ho detto sopra, lo stiamo costruendo da zero.
Passaggio 1: creazione di un nuovo progetto
La creazione di un nuovo progetto in Flux è una procedura indolore. Tutto ciò che fai è andare su File> New e sei sulla buona strada. Ti chiederà dove vuoi mettere i file e se vuoi che Flux crei automaticamente una struttura di base per te. Ciò include quanto segue: index.html, main.css e una cartella di immagini. In questo caso è esattamente il formato che voglio usare, quindi ho scelto di lasciarlo impostato per me. Se hai un sistema diverso che ti piace di più, puoi farlo manualmente.
Quando fai doppio clic sul file HTML, verrai indirizzato all'interfaccia principale di Flux. Come puoi vedere, c'è molto da fare qui. In effetti, potremmo passare l'intero tutorial semplicemente discutendo ogni pulsante e funzione. Tuttavia, per rendere le cose meno noiose, andremo direttamente all'edificio e introdurremo le funzionalità man mano che si presentano. Consiglio vivamente di scaricare la demo e curiosare nell'interfaccia per familiarizzare con essa.
Step 1: Styling The Body
Se fai clic sulla grande area di tela vuota, dovresti vedere una scatola che viene evidenziata con la parola "corpo"? in alto a sinistra. Questa è la struttura del corpo vuota del tuo HTML. La prima cosa che vorremmo fare per il nostro sito è aggiungere uno sfondo a questo elemento.
Per fare ciò, fai clic sul pulsante Impostazioni in alto (sembra un binocolo). Questo farà apparire ciò che secondo me è il cuore dell'app. Qui creerai gli stili e definirai l'aspetto di ogni elemento che crei all'interno di Flux. L'output di Inspector è CSS e tutti i controlli all'interno sono etichettati con le proprietà CSS con cui sei abituato a lavorare.
Aggiunta di un colore di sfondo
Se stessimo codificando questo sito a mano, il primo passo potrebbe essere quello di designare un colore di sfondo per il corpo. Veramente utilizzeremo un'immagine ripetuta nel passaggio successivo, ma vorremmo assicurarci che lo sfondo appaia corretto anche se l'immagine non viene caricata.
Con il corpo selezionato, andremo al? Fill? sezione a sinistra dell'Ispettore. Da qui, applicare un colore di sfondo è semplice come fare clic sulla proprietà CSS appropriata e digitare il nostro colore; in questo caso # 1f1f21.
Aggiunta di un'immagine di sfondo
Per aggiungere un'immagine di sfondo, in pratica adottiamo gli stessi identici passaggi e ci limitiamo a navigare nel file corretto nella cartella delle immagini. Ho usato uno sfondo fantastico gratuito da Pixel Premium.
Passaggio 2: aggiunta di un contenitore
Per aggiungere un contenitore a un sito, di solito basta inserire un div, e questo è esattamente come funzionano le cose in Flux. Clicca il? Contenitore? pulsante in alto e vai a? Quick Div.? Assicurati che quando fai questo passo, hai selezionato l'elemento del corpo. In Flux, si desidera sempre selezionare l'oggetto genitore desiderato durante la creazione di un nuovo elemento. Questo assicura che sia inserito nella parte corretta del tuo HTML.
Questo dovrebbe creare una piccola scatola vuota con guide sulla tela.
Proprio come abbiamo fatto prima, seleziona l'elemento e apri l'ispettore. Sotto? Position & Size ?, imposta la larghezza a 700px e l'altezza a 810px. Assicurati di cancellare i valori predefiniti per? Top? e sinistra? mentre ci sei.
Auto-centraggio di un elemento
Ora, se sei uno sviluppatore web, sai già esattamente come centrare questo div: imposta i margini su automatico. Puoi entrare e farlo manualmente o semplicemente fare clic sul piccolo ingranaggio in alto a destra dell'Ispettore e scendere a? Auto Center.?
Aggiungere un'ombra
A questo punto dovresti avere il frame di base per il sito.
Solo per divertimento, voglio mostrare alcune delle funzionalità di Webkit CSS3 integrate in Flex. Se si fa clic su? Webkit? nell'ispettore vedrai una manciata di divertenti proprietà CSS: box-shadow, box-reflect, transizioni webkit, ecc. Sfortunatamente, non ci sono altri equivalenti di Mozilla, ma puoi sempre inserirli manualmente nel codice.
Per aggiungere un'ombra al nostro contenitore, fai clic sulla proprietà e regola le impostazioni.
Stili in linea?
Probabilmente gli osservatori appassionati hanno notato che gli stili che abbiamo creato sono impostati su "in linea". Questa è una delle peculiarità del flusso di lavoro Flux. Per alcuni motivi strani e sconosciuti, tutti i tuoi stili sono impostati in linea per impostazione predefinita. In realtà è un po 'più semplice impostare gli elementi in Flux quando sono impostati su inline, quindi il sito web di Flux ti consiglia di configurare un elemento come preferisci nel modo in cui lo abbiamo sopra, quindi converti gli stili in qualcosa che apparirà nel foglio di stile esterno.
Non temere, questo è un processo rapido e indolore. Seleziona l'oggetto che vuoi convertire, fai clic destro su di esso e seleziona "Crea stile con"? ? opzione. Verrà visualizzata la seguente finestra di dialogo che ti consentirà di assegnare un ID o una Classe all'oggetto.
In questo modo creerai una piccola icona sulla sinistra con l'ID appena applicato. Questa area è fondamentalmente una descrizione del nostro file CSS. Ora quando vuoi cambiare le proprietà di quel contenitore, fai doppio clic sull'icona qui per avviare l'ispettore.
Passaggio 3: l'intestazione
I passaggi appena appresi definiscono il flusso di lavoro per la creazione di tutti i contenuti della nostra pagina. Per aggiungere il nome della società alla nostra intestazione, creiamo un altro Quick Div, ma questa volta facciamo doppio clic all'interno di esso per digitare al suo interno (questo essenzialmente crea un? P? Tag). Una volta che hai digitato ciò che vuoi, puoi dare uno stile al testo come preferisci. Come puoi vedere di seguito, ho aggiunto le impostazioni per colore, famiglia di caratteri, trasformazione del testo, allineamento del testo e dimensione del carattere.
Successivamente, fai la stessa cosa per il testo sotto il titolo.
Questo dovrebbe darti una bella intestazione tipografica per la tua pagina. Ricordati di convertire entrambi questi elementi in stili esterni proprio come facevamo prima.
Passaggio 4: l'immagine
Ora siamo pronti per lanciare la nostra grande immagine. Userò una foto che mi sono sparato ma puoi tutto quello che vuoi.
Per iniziare, seleziona il contenitore e crea un div di larghezza pari a 700 px e alto quanto necessario. Quindi imposta lo sfondo del div all'immagine e lo sfondo alla non ripetizione. Con l'immagine div selezionata, puoi usare i tasti freccia per mischiarla su o giù per spostarla in posizione, dopo tutto questo è un WYSIWYG!
Passaggio 5: Completare il testo
A questo punto il tutorial sarebbe abbastanza ridondante se entrassimo in troppi dettagli. Non c'è davvero molto altro da fare oltre alla creazione di qualche altro div, riempiendoli di testo e disegnandoli come abbiamo fatto sopra. Sono rimasto con il tema font Georgia che stavo usando e ho appena fatto il mio titolo più grande della copia del paragrafo.
Una cosa da notare è che per creare un collegamento, è sufficiente selezionare un elemento o un blocco di testo e andare su Modifica> QuickLink. Con quello, la pagina dovrebbe essere finita!
Che dire del codice?
Se vogliamo vedere e modificare il codice in qualsiasi momento, basta premere Command-3 per visualizzare il visualizzatore di codice.
Flux sputa un bel codice pulito che si integra completamente con il processo di sviluppo. Puoi fare tutto quello che vuoi con l'interfaccia WYSIWYG e fare il resto a mano. Dato che Flux usa solo vecchi file HTML e CSS, puoi anche lavorare sul sito nel tuo editor di codice preferito mentre sviluppi Flux. Il flusso di lavoro è completamente aperto in modo che se in qualsiasi momento desideri semplicemente fare qualcosa come hai sempre fatto, sei libero di farlo!
Che altro fa il flusso?
Questo tutorial non ha scalfito la superficie di ciò che Flux può fare. Ecco alcune altre caratteristiche per entusiasmarsi:
- Moduli di layout integrati per la prototipazione rapida
- Vista dal vivo del browser
- JavaScript, PHP e tutto quel jazz
- Supporto per i temi WordPress
- Frammenti di codice riutilizzabili
- Tavolozza della storia
- Palette dei widget: crea gallerie facili e effetti jQuery
- Supporto HTML5
- Supporto per l'API dei font di Google
- Tonnellate di cui non so ancora ancora!
Pensieri di chiusura
Ho usato Flux per la prima volta un paio di versioni fa (Flux è ora nella sua terza iterazione), e mi è piaciuta l'idea ma non ero pazzo per l'esecuzione. Sembrava un po 'buggy (tutto ciò che è stato risolto ora) e in realtà non sembrava così facile da riprendere e correre.
Tuttavia, quell'incontro è stato piuttosto breve e ho sempre voluto tornare indietro e dare una vera e propria esperienza. Ho giocato con Flux negli ultimi due giorni e devo dire che, una volta preso il tempo per capire il corretto flusso di lavoro, lavorare con Flux è stato un sogno. Ci vuole sicuramente un po 'per capire tutte le stranezze, ma una volta che lo fanno non mangiano affatto e si sentono abbastanza naturali.
Per lo meno, Flux è fantastico per la prototipazione. Gli appassionati di progettazione nel browser invece di Photoshop vedranno la maggior parte delle loro preoccupazioni qui indirizzate, poiché si è costretti a progettare utilizzando le proprietà CSS reali e il posizionamento piuttosto che gli effetti di Photoshop. La mia parte preferita dell'app è che non ti sprona a utilizzarlo durante l'intero processo. Non ci sono file di progetto Flux di cui preoccuparsi, solo i file che normalmente useresti per costruire un sito. Ciò significa che puoi passare a un'app diversa o addirittura passare il progetto a un collega o un cliente che non ha bisogno di Flux o non ha bisogno di sapere che l'hai usato.
Se sei uno sviluppatore che codifica a mano e che spesso sogna un WYSIWYG che non succhia e che può effettivamente collegarsi al modo in cui lavori attualmente, ti consiglio vivamente di dare a Flux un colpo.All'inizio può essere un po 'frustrante, ma prenditi il tempo per farlo e capire come utilizzare l'app correttamente e scommetto che potresti pensare che sia il miglior WYSIWYG che tu abbia mai usato.