Di recente, abbiamo esaminato attentamente Easel, un costruttore di siti web che sfrutta Twitter Bootstrap. Oggi lo stiamo seguendo con un tour di uno strumento molto simile: Divshot.
Con Divshot, puoi creare rapidamente e facilmente layout di pagine web puliti e reattivi utilizzando una combinazione di strumenti visivi e codifica manuale. È uno strumento davvero intelligente e penso che ti piacerà usarlo.
Ti presentiamo DivShot
Se leggi il nostro articolo su Easel, Divshot ti sembrerà super familiare. Il concetto qui è esattamente lo stesso. Ti viene fornita un'interfaccia grafica in stile drag and drop che si basa sul popolarissimo framework Bootstrap di Twitter.
Come puoi vedere, proprio come con Easel, abbiamo una grande tela che occupa gran parte dello schermo e una barra laterale in cui risiedono tutti gli strumenti, gli elementi dell'interfaccia utente e le opzioni di personalizzazione. Tutto ciò che vedi qui è super semplice e abbastanza facile da usare. Facciamo un salto e costruiamo una pagina.
Crea una nuova pagina
Nella parte superiore dell'interfaccia, vedrai una barra orizzontale contenente due controlli: uno per creare cartelle e l'altro per creare file. Innanzitutto, crea una nuova cartella con menu a discesa a destra, quindi una nuova pagina con il menu a discesa a destra.
La creazione di una nuova pagina fa apparire la schermata mostrata sotto. Qui puoi scegliere tra diversi layout di partenza (una caratteristica chiave mancante in Easel), clonare la pagina corrente o iniziare da zero.
Diventiamo avventurosi e iniziamo una nuova pagina vuota in modo che possiamo davvero avere un'idea di come si costruisca qualcosa con questo strumento.
Aggiungi un menu di navigazione
Una volta che hai iniziato la tua nuova pagina, prendi un gander nella barra laterale a sinistra e trova i? Componenti? sezione. È qui che troverai tutti i componenti dell'interfaccia utente Bootstrap con cui hai familiarità se hai mai utilizzato il framework.
Scorri tra le varie opzioni fino a trovare la barra di navigazione. Trascina questo verso l'area con il bordo tratteggiato (il contenitore della pagina Bootstrap).
Con un po 'di sforzo, abbiamo un piccolo menu di navigazione pre-stilizzato nella parte superiore della nostra pagina. Viene fornito con uno spazio per il nome di una società e due pagine.
Personalizzare questo menu è facile. Fare doppio clic su una parte di testo per digitare un valore di sostituzione e Opzione-trascinare una voce di menu per duplicarla. Ho cambiato il nome della società in "Design Shack? e copiato alcune voci di menu in più. Ecco il risultato:
L'unità eroe
Questo è fondamentalmente come va il flusso di lavoro. Ora continueremo semplicemente a trascinare e personalizzare gli elementi dalla barra laterale. Quindi, trasciniamo in un'unità? Eroe?
Ancora una volta, la personalizzazione è semplicissima. Tutto ciò che ho fatto è stato doppio clic sul testo e digitare qualcosa di nuovo. Ora abbiamo una bella intestazione per la nostra pagina.
disposizione
Ora facciamo un po 'più di un esercizio di layout libero. Voglio creare tre colonne di contenuti. Per fare ciò, trascino fuori un? Layout? modulo e questo è quello che ottengo:
Come puoi vedere, per impostazione predefinita, questo è diviso in due colonne. Se controllo l'ispettore nella barra laterale, posso personalizzarlo digitando i numeri manualmente o facendo clic su uno dei layout prefabbricati.
Ho fatto clic sul layout a tre colonne e controllato le? Colonne Fluide? scatola. Ora il mio modulo di layout sembra più come quello che voglio ed è pronto a ricevere alcuni contenuti.
Contenuto principale
Ora che abbiamo queste scatole di layout eleganti che definiscono dove andrà il nostro contenuto, dobbiamo solo trascinarci alcuni elementi. Ho inserito un titolo, paragrafo e immagine in ciascuno, modificando le opzioni di personalizzazione disponibili mentre procedevo.
CSS personalizzato
La mia caratteristica preferita in Divshot è la possibilità di aggiungere il tuo codice personalizzato. Questo è assolutamente fondamentale se vuoi che qualche vero sviluppatore pensi di utilizzare una sorta di WYSIQYG. Se non riesco a personalizzare qualcosa che non mi piace, semplicemente non userò la tua app.
Una cosa che non mi piace nel mio layout attualmente è la mancanza di spazio tra quelle immagini segnaposto e i paragrafi sottostanti. Questo è facile da risolvere però. Innanzitutto, aggiungerò una classe a ciascuna delle caselle usando la? Struttura? opzioni.
Ora se premo il? Modifica CSS? pulsante in basso a sinistra, una barra apparirà dalla parte inferiore dello schermo e mi consentirà di aggiungere alcuni CSS personalizzati. Mi piace soprattutto che posso usare i preprocessori qui. Tutto è compilato dal vivo, completo di segnalazione degli errori. Eccezionale!
Con questo codice, la mia barra di navigazione e le mie immagini ora hanno un po 'di spazio per respirare. Molto meglio! Se ne hai bisogno, c'è anche un modulo da aggiungere in HTML personalizzato, così avrai davvero la completa libertà di fare quello che vuoi.
Più strumenti
Vicino alla parte superiore destra dello schermo, hai alcuni strumenti diversi che vale la pena menzionare. C'è un Undo / Redo standard, un download di codice, un'anteprima dal vivo e un pulsante per cambiare il tuo viewport
Ricorda, questo è tutto basato su Boostrap, il che significa che i tuoi progetti dovrebbero essere pienamente reattivi. Questo è un Stupefacente bonus che non dovrebbe essere sorvolato. Questo è uno dei modi più semplici che conosca per costruirti un sito web reattivo. C'è anche un menu che ti consente di impostare se un elemento è nascosto o visibile in una determinata dimensione di finestra.
Cavalletto o Divshot? Che è migliore?
Così ora ho provato e rivisto due di questi strumenti. La domanda è: a chi ti rivolgeresti se stai cercando di costruire un sito Bootstrap? Per essere onesti, non c'è un vincitore netto nel complesso. Se guardiamo alle caratteristiche individuali, però, ho delle opinioni forti su quale sia il migliore.
Flusso di lavoro e layout: Divshot
In generale, ho trovato che il flusso di lavoro e il processo di layout sono molto migliori in Divshot che in Easel. Il flusso di lavoro di Easel era goffo e ho fatto diversi suggerimenti per migliorarlo nella mia recensione.È interessante notare che, quando ho provato Divshot, ho scoperto che era molto simile a quello che immaginavo sarebbe dovuto a Easel.
Ho adorato il modulo di layout delle colonne e quanto sia stato facile modificare per soddisfare le mie esigenze. Easel ha qualcosa di simile, ma non è così liscio o intuitivo.
Tipo e icone: cavalletto
Questo è un luogo in cui Easel è il chiaro vincitore. Dispone del supporto completo di Google Web Fonts e ti consente una personalizzazione molto maggiore rispetto al tuo tipo. In effetti, anche senza i caratteri personalizzati, gli strumenti di testo erano decisamente migliori in Easel.
Inoltre, Easel ha anche l'integrazione con FontAwesome in modo da avere accesso a tantissime icone che puoi lanciare rapidamente nel tuo lavoro.
Una cosa interessante quella Divshot fa sono però un commutatore di temi, che consente di modificare l'aspetto generale dell'intero tema con pochi clic. Ci sono attualmente tredici temi e un? Personalizzato? opzione.
Esportazione del codice: cavalletto
Entrambe le app hanno una funzione di esportazione del codice, ma quella per Easel era molto più robusta e impressionante, permettendoti di vedere tutti i vari elementi e scaricare un .zip contenente tutto.
Personalizzazione: Divshot
Questa è letteralmente la caratteristica più importante per me come utente e sto dando questo a Divshot. Le funzioni di modifica del codice personalizzato qui sono davvero belle, specialmente il modulo CSS. Mi sentivo davvero in grado di fare qualsiasi cosa volessi e ho davvero apprezzato quella libertà.
Immagini segnaposto: Divshot
Il sistema di immagine segnaposto è stata una delle mie più grandi lamentele su Easel. Le loro immagini segnaposto sembravano super buggy e difficili da lavorare. In confronto, i Divshot sono davvero semplici e facili da usare.
Prezzi:?
Divshot è attualmente in beta pubblica gratuita, quindi è impossibile dire come i due si confronteranno nel prezzo fino a quando Divshot non rilascerà i suoi piani tariffari. Avranno molto da vivere perché mi piace molto la struttura dei prezzi di Easel. Non è super economico, ma si ottiene un po 'sul piano gratuito:
Reclami e feedback di Divshot
Mi è piaciuto molto usare Divshot e penso che sia uno dei migliori strumenti di prototipazione rapida che ho incontrato. Bootstrap si presta così bene a questo tipo di app e sono entusiasta di vedere gli sviluppatori che lavorano duramente per creare strumenti che rendano ancora più semplice l'uso di Bootstrap. Detto questo, ci sono sicuramente alcune aree che necessitano di miglioramenti.
Digita Sucks
Innanzitutto, personalizzazione tipografica. Ancora una volta, Divshot ha bisogno di prendere una pagina dal libro di Easel su questo. I loro strumenti di testo sono molto più intuitivi e potenti.
Miglioramento del modello di scatola migliore
Penso che sia attualmente troppo lavoro per modificare la spaziatura di vari oggetti. È bello avere la possibilità di scrivere il mio CSS, ma per qualcosa di semplice come padding e margine, dovrei essere in grado di inserire i numeri in un campo vicino a dove inserisco le dimensioni.
Download CSS
Attualmente, la funzionalità di esportazione del codice ti fornisce solo l'HTML. Ho sicuramente bisogno di vedere un'opzione per pacchettizzare tutto insieme in un download come abbiamo visto con Easel.
Anteprima Buggy
Non sono sicuro del perché, ma sembrava che la mia anteprima dal vivo fosse costantemente un cambiamento, quindi non rifletteva quasi mai lo stato attuale del mio documento. Questo era abbastanza fastidioso!
Dammi un po 'di spazio!
Ho trovato molto difficile aggiungere elementi alla parte inferiore del mio layout se si estendeva sotto i limiti della finestra. Dammi un po 'di spazio in più laggiù per lavorare con, anche se non è nella produzione effettiva.
Cosa pensi?
Divshot è un'app stellare e io sicuramente penso che dovresti fare un tentativo, specialmente se sei un fan di Boostrap, Foundation e altri framework all inclusive simili.
Ora che hai visto cosa è Divshot, lascia un commento e fammi sapere cosa ne pensi. Lo useresti su Easel? Perché o perché no? Quali altri strumenti simili hai incontrato e come si confrontano?