Share
ZURB jobber alltid med det neste store verktøyet for å hjelpe både webdesignere og utviklere. De gjør programmeringsdager litt enklere og mye morsommere. Stiftelsens rammeverk er uten tvil det mest kjente, og snart vil det bli et nytt medlem til familien: Foundation for Apps.
Med en planlagt utgivelse tirsdag 2. desember, er det nå en flott tid å se hva Foundation for Apps har å tilby, dets hovedtrekk og hva vi kan forvente i nær fremtid. Nylig fikk jeg anledning til å chatte med Brandon Arnold, ledende design, og Geoff Kimball, produktdesigner hos ZURB. De viste meg førstehånds noen av sine kraftige funksjoner, og i dag vil jeg vise deg hva du kan gjøre med det.
Hovedformålet med Foundation for Apps er å gi et middel til å raskt prototype komplekse webapplikasjoner og et rammeverk for å bygge disse webappene på. For å gjøre alt som er mulig, kommer det med noen ekstremt nyttige funksjoner, spesielt:
Den nye alderen av flat design har på mange måter tatt noe fra grensesnittene våre: hierarki og struktur på grunn av mangel på gradienter, skeuomorfe elementer, skygger og dybde. Foundation for Apps takler dette problemet ved å bruke et rikt Motion UI-bibliotek med tonnevis av animasjoner og overganger som er klare for bruk. Du trenger ikke å rote med Sass eller JavaScript, fordi ZURB har gjort det harde arbeidet for deg.
Dette er hva vi kan forvente:
animasjoner: CSS keyframe animasjoner lar deg legge til subtile bevegelser og effekter til appen din. Dette vil gi brukerne tilbakemelding som informerer dem om hvordan appen din er strukturert og hvordan de skal samhandle med den. Detaljer som dette er flotte for å gi ekstra oppmerksomhet til et varsel, en feil eller en oppfordring til handling.
overganger: Overganger kan brukes til alle slags fancy ting, fra å skifte et objekt fra en posisjon til en annen, for å erstatte innhold og vise nytt innhold, for eksempel off-canvas navigasjon og nedtrekk.
Bevegelsesmodifikatorer: Disse brukes til å påvirke retning, fart, iterasjon, lette og forsinkelse av objektene dine. Sammen med animasjoner har du store muligheter til å skape en jevn brukeropplevelse.
Kombinert gir alle disse komponentene en fornuftig og livlig opplevelse for brukerne, alle med de enkle forhåndsdefinerte klassene. De vil spare deg for masse arbeid og få den prototypen i gang på kort tid.
Foundation for Apps bruker CSS Flexbox til å definere grid. Flexbox gir deg mulighet til å bestille elementene dine i HTML, uansett markeringen. Du kan plassere innholdet ditt literært hvor som helst, fra topp til bunn, venstre til høyre, midt og midt. Bruke Flexbox gir flere fordeler:
En annen syntaksvil være nødvendig for rutenettet, da rader og kolonner ikke gir mening når vertikal rulling av forskjellige innholdsdeler brukes i layoutet. Dette er hva du skal bruke til å lage din egen webapplayout:
Fremtiden for webapps vil involvere stater i stedet for helt nye sider, og viser at det har vært et av våre hovedmål for Foundation for Apps - Brandon Arnold, Lead Design
Med Foundation for Apps kan vi se et skifte i måten vi presenterer innhold på for våre brukere. I stedet for å bare laste opp siden etter hver handling som brukerne tar, kan innholdet vises eller skjules avhengig av hva brukeren vil se.
Denne tilnærmingen vil gjøre at webappen din føles mer som en innfødt app; Brukerne får innholdet raskere, og de vet intuitivt hvor det kommer fra. Det er opp til deg å bestemme hvilket innhold som er relevant, hva som skal vises og hva som skal fjernes når det ikke er nødvendig.
Foundation for Apps vil bruke Angular som MVC-rammeverk for å gjøre tung løfting. La oss finne ut hvordan:
Med Foundation for Apps prøver vi også å gjøre Angular tilgjengelig for designere og utviklere - Brandon Arnold, Lead Design
Når du bruker Foundation for Apps til de kommende prosjektene, trenger du ikke å vite mye om Angular i det hele tatt. For å forenkle saker som å bruke forskjellige animasjoner og definere nettadressene til maler, bruker Foundation for Apps brukergrensesnitt. Du kan definere nettadressen og animasjonene i HTML-filen din, og ved hjelp av en liten Gulp-magi, blir mal-kodene analysert og de riktige kodene blir lagt til i mal.
På denne måten kan du opprette en enkeltsidet webapp uten å måtte røre en enkelt linje med JavaScript. Dette er for eksempel det du skal skrive i malen din:
--- navn: hjemme url: / home animationIn: bounceIn animasjonOut: bounceOut ---
Og dette er hva alle Foundation for Apps magi analyserer ut for deg:
Accentsconagua
var routerApp = angular.module ('routerApp', ['ui.router']); routerApp.config (funksjon ($ stateProvider, $ urlRouterProvider) $ urlRouterProvider.otherwise ('/ home'); $ stateProvider .state ('home', url: '/ url', templateUrl: 'partial-home.html' , controller: 'PageController', // standardkontrolldata: vars: navn: home, url: / home, animationIn: bounceIn, animasjonOut: bounceOut););Ikke bare vil dette spare deg for en masse tid når du utvikler en prototype eller ditt faktiske produkt, det gjør det til og med å bygge en webapp tilgjengelig for de som ikke er komfortable med mer komplisert frontend-utvikling.
Istedenfor å bruke kode som Dette gir renere markering, noe som muliggjør bedre konsistens i arbeidsflyten din og i teamet ditt. I stedet for å tenke på om en tag skal være en I tillegg dette Komponentdrevet kode, gjør det mulig å integrere Foundation Motion UI-klasser for å bygge opp animasjoner og bruke dem til dine forskjellige synspunkter. Ta en titt på noen av de andre funksjonene som vil bli inkludert i Foundation for Apps: For det første kan vi forvente at Foundation for Apps blir den neste spennende og nyttige avbetalingen av Stiftelsesfamilien. Gutta på ZURB er på toppen av alle nye teknologier og trender og med mange års erfaring i produktdesign, leverer de igjen et godt produkt for samfunnet å bruke. Akkurat som Stiftelsen for nettsteder og snart bli navngitt Stiftelsen for e-post, Foundation for Apps er helt åpen kildekode og vil kontinuerlig bli optimalisert av ZURB og samfunnet for å jobbe på tvers av flere enheter. Med Foundation for Apps kommer snart og Blekk blir Foundation for Email, kan vi se starten på et sett med verktøy som passer til behovet for ulike jobber vi har som webdesignere og utviklere. Snart snakker vi om disse tre forskjellige produktene: Foundation for Apps vil være lansert tirsdag 2. desember, så vær sikker på å holde øye med det! Virkelig, Foundation blir en alt-i-ett-løsning for den fremste webutviklingen. Foundation for Apps lar designere og utviklere enkelt lage flere visningsprototyper, komplett med delvis bytte og animasjoner, perfekt for å sette opp demoer for å imponere team og klienter.. Overskrift, en bunntekst, en div eller a seksjon for eksempel vil du bare skrive Andre funksjoner
Ting vi kan forvente
Stiftelsens fremtid
Konklusjon
ressurser
