Share
ZURB lavora sempre al prossimo grande strumento per aiutare i web designer e gli sviluppatori. Rendono i nostri giorni di programmazione un po 'più semplici e molto più divertenti. La struttura della Fondazione è probabilmente la più conosciuta e presto ci sarà un nuovo membro della famiglia: Foundation for Apps.
Con una pubblicazione programmata di martedì 2 dicembre, ora è il momento giusto per vedere quale Foundation for Apps avrà da offrire, le sue caratteristiche principali e ciò che possiamo aspettarci nel prossimo futuro. Recentemente mi è stata data l'opportunità di chattare con Brandon Arnold, lead design, e Geoff Kimball, product designer presso ZURB. Mi hanno mostrato in prima persona alcune delle sue potenti funzionalità e oggi ti mostrerò cosa sarai in grado di fare con esso.
L'obiettivo principale di Foundation for Apps è quello di fornire un mezzo per creare rapidamente prototipi di applicazioni web complesse e un framework per creare tali applicazioni web. Per rendere tutto ciò possibile, viene fornito con alcune funzionalità estremamente utili, in particolare:
La nuova era del design piatto ha, per molti versi, tolto qualcosa dalle nostre interfacce: gerarchia e struttura a causa della mancanza di gradienti, elementi skeuomorphic, ombre e profondità. Foundation for Apps affronta questo problema utilizzando una ricca libreria UI Motion con tonnellate di animazioni e transizioni pronte per l'uso. Non dovrai scherzare con Sass o JavaScript, perché ZURB ha fatto il duro lavoro per te.
Questo è ciò che possiamo aspettarci:
animazioni: Le animazioni dei fotogrammi chiave CSS ti permetteranno di aggiungere movimenti ed effetti sottili alla tua app. Ciò fornirà agli utenti un feedback che li informerà su come è strutturata la tua app e su come dovrebbero interagire con essa. Dettagli come questo sono grandi per dare maggiore attenzione a una notifica, un errore o un invito all'azione.
transizioni: Le transizioni possono essere utilizzate per tutti i tipi di oggetti di fantasia, dal semplice spostamento di un oggetto da una posizione a un'altra, alla sostituzione di contenuti e alla visualizzazione di nuovi contenuti, come la navigazione fuori campo e i menu a discesa.
Modificatori di movimento: Questi sono usati per influenzare la direzione, la velocità, l'iterazione, la facilità e il ritardo dei tuoi oggetti. Insieme alle animazioni hai enormi possibilità di creare un'esperienza utente fluida.
Combinati, tutti questi componenti rendono un'esperienza coinvolgente e vivace per i tuoi utenti, il tutto con la facilità di classi predefinite. Ti faranno risparmiare un sacco di lavoro e faranno funzionare il prototipo in pochissimo tempo.
Foundation for Apps utilizzerà CSS Flexbox per definire la sua griglia. Flexbox offre un modo per ordinare i tuoi elementi in HTML in ogni caso, indipendentemente dal markup. Puoi posizionare il contenuto letteralmente ovunque, dall'alto al basso, da sinistra a destra, al centro e al centro. L'uso di Flexbox offre diversi vantaggi:
Una sintassi diversasarà richiesto per la griglia, poiché righe e colonne non hanno senso quando si utilizza lo scorrimento verticale di diverse sezioni di contenuto nel proprio layout. Questo è ciò che utilizzerai per creare il layout della tua app Web:
Il futuro delle app web coinvolgerà stati piuttosto che pagine completamente nuove e dimostrerà che è stato uno dei nostri principali obiettivi per Foundation for Apps - Brandon Arnold, Lead Design
Con Foundation for Apps possiamo vedere un cambiamento nel modo in cui presenteremo i contenuti ai nostri utenti. Invece di ricaricare la pagina dopo ogni azione intrapresa dagli utenti, il contenuto può essere mostrato o nascosto a seconda di ciò che l'utente vuole vedere.
Questo approccio renderà la tua app web più simile a un'app nativa; gli utenti otterranno i loro contenuti più velocemente e sapranno intuitivamente da dove proviene. Spetta a te decidere quali contenuti sono rilevanti, cosa dovrebbe essere mostrato e cosa dovrebbe essere rimosso quando non è necessario.
Foundation for Apps utilizzerà Angular come framework MVC per il sollevamento di carichi pesanti. Scopriamo come:
Con Foundation for Apps, stiamo anche cercando di rendere Angular accessibile a designer e sviluppatori: Brandon Arnold, Lead Design
Quando usi Foundation for Apps per i tuoi prossimi progetti, in realtà non devi sapere molto di Angular. Per semplificare aspetti come l'utilizzo di animazioni diverse e la definizione degli URL dei modelli, Foundation for Apps utilizza il routing dell'interfaccia utente. Puoi definire il tuo URL e le animazioni nel tuo file HTML e con l'aiuto di un po 'di magia Gulp, i tag del template vengono analizzati e i blocchi di codice corretti vengono aggiunti al tuo modello.
In questo modo è possibile creare un'applicazione web a pagina singola senza dover nemmeno toccare una singola riga di JavaScript. Ad esempio, questo è ciò che scriverai nel tuo modello:
--- nome: home url: / home animationIn: bounceIn animationOut: bounceOut ---
E questo è ciò che tutta la Foundation for Apps ti analizza:
Accentsconagua
var routerApp = angular.module ('routerApp', ['ui.router']); routerApp.config (function ($ stateProvider, $ urlRouterProvider) $ urlRouterProvider.otherwise ('/ home'); $ stateProvider .state ('home', url: '/ url', templateUrl: 'partial-home.html' , controller: 'PageController', // dati del controller di default: vars: nome: home, url: / home, animationIn: bounceIn, animationOut: bounceOut););Questo non solo ti farà risparmiare un sacco di tempo quando sviluppi un prototipo o il tuo prodotto reale, ma rende anche la creazione di un'app Web accessibile a coloro che non sono a proprio agio con uno sviluppo front-end più complesso.
Invece di usare il codice come Questo rende più pulito il markup, che consente una maggiore coerenza nel flusso di lavoro e in quello del tuo team. Invece di pensare se un tag dovrebbe essere un Inoltre, questo Codice guidato da componenti, rende possibile integrare le classi dell'interfaccia utente di Motion Motion per creare animazioni e applicarle alle diverse visualizzazioni. Guarda alcune delle altre funzionalità che saranno incluse in Foundation for Apps: In primo luogo, possiamo aspettarci che Foundation for Apps sia la prossima eccitante e utile rata della famiglia Foundation. I ragazzi di ZURB sono al vertice di ogni nuova tecnologia e tendenza e con la loro esperienza pluriennale nel design di prodotto, stanno ancora offrendo un ottimo prodotto per la comunità. Proprio come Fondazione per i siti e il prossimo a essere nominato Fondazione per e-mail, Foundation for Apps è completamente open source e sarà continuamente ottimizzato da ZURB e dalla community per lavorare su più dispositivi. Con Foundation for Apps in arrivo e Ink che diventa Foundation for Email, possiamo vedere l'inizio di una serie di strumenti che si adattano all'esigenza di vari lavori che abbiamo come web designer e sviluppatori. Presto parleremo di questi tre diversi prodotti: La base per le app sarà lanciato il 2 dicembre, quindi assicurati di tenerlo d'occhio! Veramente, la Fondazione sta diventando una soluzione all-in-one per il tuo sviluppo web front-end. Foundation for Apps consentirà a progettisti e sviluppatori di creare facilmente prototipi multi-view, completi di scambio parziale e animazioni, ideale per creare demo per impressionare team e clienti. intestazione, un footer, un div o a sezione per esempio, starai scrivendo Altre caratteristiche
Cose che possiamo aspettarci
Il futuro della Fondazione
Conclusione
risorse
