Un Sneak Peek la Fundația Next for Apps

ZURB lucrează întotdeauna la următorul instrument mare pentru a ajuta designerii web și dezvoltatorii deopotrivă. Ele fac zilele noastre de programare un pic mai ușor și mult mai distractiv. Cadrul Fundației este, fără îndoială, cel mai cunoscut, iar în curând va exista un nou membru în familie: Fundația pentru aplicații.

Cu o lansare programată de marți, 2 decembrie, acum este momentul potrivit să vedem ce va avea de oferit Fundația pentru Aplicații, caracteristicile sale majore și ceea ce ne putem aștepta în viitorul apropiat. Recent am avut ocazia sa vorbesc cu Brandon Arnold, designul plumb, si Geoff Kimball, designer de produs la ZURB. Mi-au arătat în primă instanță câteva dintre caracteristicile sale puternice și astăzi vă voi arăta ce veți putea face cu ea.

Caracteristici

Scopul principal al Fundației pentru Aplicații este de a oferi un mijloc de prototipare rapidă a aplicațiilor web complexe și a unui cadru de construire a acestor aplicații web. Pentru a face tot posibilul, vine cu câteva caracteristici extrem de utile, în special:

1. UI de mișcare

Noua vârstă a designului plat a luat, în multe privințe, ceva de la interfețele noastre: ierarhia și structura datorită lipsei de gradienți, elemente skeuomorfe, umbre și adâncime. Fundația pentru aplicații abordează această problemă utilizând o bibliotecă bogată în Motion UI cu multe animații și tranziții gata pentru utilizare. Nu va trebui să vă dezorientați cu Sass sau JavaScript, deoarece ZURB a făcut munca grea pentru dvs.. 

Aceasta este ceea ce ne putem aștepta:

Animații: Animațiile de tip keyframe CSS vă vor permite să adăugați mișcări subtile și efecte la aplicația dvs. Acest lucru va oferi utilizatorilor feedback cu privire la modul în care este structurat aplicația dvs. și cum ar trebui să interacționeze cu aceasta. Detaliile de acest gen sunt minunate pentru acordarea unei atenții suplimentare unei notificări, unei erori sau unui apel la acțiune.

tranziţii: Tranzițiile pot fi folosite pentru tot felul de lucruri fanteziste, de la schimbarea ușoară a unui obiect de la o poziție la alta, de înlocuire a conținutului și de afișare a unui nou conținut, cum ar fi navigarea în afara canvasului și drop-down-urile.

Modificatoare de mișcare: Acestea sunt folosite pentru a influența direcția, viteza, repetarea, ușurința și întârzierea obiectelor. Împreună cu animațiile aveți posibilități enorme de a crea o experiență fără probleme a utilizatorilor.

Combinate, toate aceste componente fac pentru o experiență imersivă și plină de viață pentru utilizatorii dvs., toate cu ușurința claselor predefinite. Acestea vă vor economisi multe lucruri și veți obține acel prototip în cel mai scurt timp.

2. Grilă Flexbox

Fundația pentru aplicații va folosi CSS Flexbox pentru a-și defini grila. Flexbox oferă o modalitate de a comanda elementele în HTML oricum doriți, indiferent de marcare. Puteți să vă plasați conținutul literar oriunde, de sus în jos, de la stânga la dreapta, în centru și în mijloc. Utilizarea Flexbox aduce câteva avantaje:

• Nu mai este nevoie de poziționare fixă, care poate fi adesea nesigură pe dispozitivele mobile.
• Indiferent de marcare, puteți plasa conținutul oriunde doriți.
• În loc să vă stivuiți conținutul vertical, puteți să creați o aplicație web de pagină completă, cu secțiuni de derulare separate atunci când este nevoie de mai mult conținut.
• Nu este nevoie să eliminați flotoarele.
• Veți putea crea un aspect complex al aplicației web în câteva minute.

O sintaxă diferităva fi necesară pentru rețea, deoarece rândurile și coloanele nu au sens atunci când se utilizează deplasarea verticală a diferitelor secțiuni de conținut în aspectul dvs. Aceasta este ceea ce veți utiliza pentru a vă crea propriul aspect al aplicației web:

• Grupuri: Grupurile vor fi folosite ca obiecte de aspect care pot conține mai multe grupuri sau blocuri. Ele sunt oarecum similare cu rândurile din Fundația 5.
• blocuri: Acestea conțin numai conținut. Nu le veți folosi pentru aspectul dvs., ci vor conține și alte elemente și componente. Imaginați-le ca fiind ca și coloanele din Fundația 5.
• Cadre: Cu cadre, veți putea sculpta ecranul în secțiuni, deoarece cadrele ocupă lățimea și înălțimea ecranului de 100%. Acest lucru vă permite să creați zone independente de navigare.

3. Aplicații cu o singură pagină

Viitorul aplicațiilor web va implica mai degrabă state decât pagini cu totul noi și arătând că acesta a fost unul dintre obiectivele noastre principale pentru Fundația pentru aplicații - Brandon Arnold, Lead Design

Cu Fundația pentru aplicații putem vedea o schimbare în modul în care vom prezenta conținutului utilizatorilor noștri. În loc să reîncărcați pagina după fiecare acțiune pe care utilizatorii o ia, conținutul poate fi afișat sau ascuns în funcție de ce vrea să vadă utilizatorul.

Această abordare va face ca aplicația web să se simtă mai mult ca o aplicație nativă; utilizatorii vor primi conținutul mai rapid și vor ști intuitiv de unde provin. Depinde de dvs. să decideți ce conținut este relevant, ce ar trebui afișat și ce ar trebui eliminat atunci când nu este necesar.

4. Șabloane Route AngularJS

Fundația pentru Apps va folosi Angular ca cadru MVC pentru a face ridicarea greoaie. Să vedem cum:

Cu Fundația pentru aplicații, încercăm de asemenea să facem Angular accesibil pentru designeri și dezvoltatori - Brandon Arnold, Lead Design

Când utilizați Fundația pentru aplicații pentru proiectele viitoare, nu veți avea de fapt să știți prea multe despre Angular. Pentru a simplifica aspectele, cum ar fi utilizarea diferitelor animații și definirea adreselor URL ale șabloanelor, Fundația pentru aplicații utilizează rutarea UI. Puteți defini URL-ul și animațiile în fișierul HTML și cu ajutorul unei mici magie Gulp, etichetele șablonului sunt analizate și bucățile de coduri corecte sunt adăugate în șablon.

În acest fel, puteți să creați o aplicație web la o singură pagină fără a trebui să atingeți nici măcar o singură linie de JavaScript. De exemplu, acesta este ceea ce veți scrie în șablonul dvs.:

--- nume: home url: / home animationIn: bounceIn animationOut: bounceOut ---

Și aceasta este ceea ce toată Fundația pentru Aplicații vă oferă o magie:

var routerApp = angular.module ('routerApp', ['ui.router']); routerApp.config (funcția ($ stateProvider, $ urlRouterProvider) $ urlRouterProvider.otherwise ('/ home'); $ stateProvider .state ('home', url: '/ url', templateUrl: , controler: 'PageController', // datele controlerului implicit: vars: nume: home, url: / home, animațieIn: bounceIn, animationOut: bounceOut););

Nu numai că acest lucru vă va salva o grămadă de timp când dezvoltați un prototip sau produsul dvs. real, ci chiar face să creați o aplicație web accesibilă celor care nu se simt confortabil cu o dezvoltare complexă a front-end-ului.

5. Codul condus de componente

În loc de a folosi codul ca

, Fundația pentru aplicații va folosi directivele unghiulare, va schimba lucrurile și va face ceva ușor de memorat. În schimb, veți scrie ceva de genul , pentru a obține același rezultat.

Acest lucru face ca marcajul să fie mai curat, ceea ce permite o consistență mai bună a fluxului de lucru și a echipei dvs. În loc să se gândească dacă o etichetă ar trebui să fie a antet, A subsol, A div sau a secțiune de exemplu, veți scrie doar . Ușurel drept?

În plus, asta Codul condus de componente, face posibilă integrarea cursurilor Foundation Motion UI pentru a crea animații și pentru a le aplica diferitelor viziuni.

Alte caracteristici

Consultați câteva dintre celelalte funcții care vor fi incluse în Fundația pentru aplicații:

• Off-panza
• panouri
• Blochează liste
• Meniuri pop-up
• Bara de știri
• modals
• Alerte
• Formulare
• schimba

Lucruri pe care le putem aștepta

În primul rând, ne putem aștepta ca Fundația pentru aplicații să fie următoarea tranșă interesantă și utilă a familiei Fundației. Băieții de la ZURB se află pe lângă fiecare nouă tehnologie și tendință și cu anii lor de experiență în designul produselor, aceștia oferă din nou un produs excelent pentru comunitate. Ca și cum Fundația pentru site-uri și în curând să fie numit Fundația pentru e-mail, Fundația pentru aplicații este complet open-source și va fi optimizată în permanență de către ZURB și comunitatea pentru a lucra pe mai multe dispozitive.

Viitorul Fundației

Cu Fundația pentru aplicații care vine în curând și Ink devenind Fundația pentru e-mail, putem vedea începutul unui set de instrumente care se potrivesc nevoilor de diverse locuri de muncă pe care le avem ca designeri web și dezvoltatori. În curând vom vorbi despre aceste trei produse diferite:

• Fundația pentru site-uri: Știm cu toții! Fundația pentru site-uri este și va fi întotdeauna excelentă pentru site-uri de conținut și de marketing. Este un instrument rapid de prototipare și un cadru cu adevărat minunat pentru construirea de site-uri mobile mobile, receptive.
• Fundația pentru aplicații: Noul copil pe bloc, care se potrivește nevoilor noastre pentru tendințele viitoare ale aplicațiilor web care preiau web-ul! Cu grila flexibila, animatii puternice si design single-page, Fundatia pentru aplicatii ofera instrumentele necesare pentru (rapida) construirea si prototiparea aplicatiilor web.
• Fundația pentru e-mail: Răspunsul e-mail a fost întotdeauna o durere de cap masivă. Cu Fundația pentru e-mail, ZURB vă oferă instrumentele pentru o bază bună pe care să construiți șabloane de e-mail.

Fundația pentru aplicații va fi lansat marți, 2 decembrie, astfel încât asigurați-vă că aveți grijă de ea!

Concluzie

Cu adevărat, Fundația devine o soluție all-in-one pentru dezvoltarea web-ului dvs. front-end. Fundația pentru aplicații va permite designerilor și dezvoltatorilor să creeze cu ușurință prototipuri multi-vizuale, complete cu schimburi parțiale și animații, minunate pentru crearea demo-urilor pentru a impresiona echipa și clienții. 

Resurse

• Fundatia pentru screening-urile Apps demo
  
• Fundația: o nouă rețea
  
• Fundația: Motion UI este noul plat
  
• Fundație: Aplicații cu o singură pagină cu AngularJS
  
• Fundația pentru site-uri
• Fundația pentru aplicații (github)
  
• Fundația pentru e-mail

Web design