Uma Olhada No Foundation for Apps

() translation by (you can also view the original English article)

A ZURB sempre busca a próxima super ferramenta para ajudar designers e desenvolvedores. Eles tornam nossos dias de programação muito mais fácil e mais divertidos. O framework Foundation, sem sombra de dúvidas, o mais conhecido e logo terá um novo membro em sua família: o Foundation for Apps.

Com o lançamento marcado para terça-feira, 2 de dezembro, é uma boa hora de vermos o que o Foundation for Apps tem a oferecer, suas funcionalidades e o que podemos esperar para o futuro próximo. Tive a oportunidade recente de conversar com Brandon Arnold, projetista líder, e com Geoff Kimball, projetista de produtos na ZURB. Eles me mostraram, com exclusividade, algumas das funcionalidades poderosas dele e, hoje, mostrarei o que você será capaz de fazer com ele.

Funcionalidades

O principal objetivo do Foundation for Apps é prover maneiras de prototipar aplicativos para web complexos de forma rápida. Para isso, ela vem com funcionalidades extremamente úteis, mais notavelmente:

1. Motion UI: UI com Animações

De várias formas, a nova era do design flat tem tirado algo de nossas interfaces: hierarquia e estrutura devido a falta de gradientes, elementos esqueumórficos, sombras e profundidade. O Foundation for Apps lida com esse problema através do uso de uma biblioteca rica em elementos de interface com animações e transições, prontas para serem usadas. Não é preciso mexer com Sass ou JavaScript, porque a ZURB fez o trabalho pesado para você.

Isso é o que podemos esperar:

Animações: Animações com CSS keyframe permitirão você adicionar movimentos e efeitos sutis ao seu aplicativo. Isso dará uma resposta visual ao usuário, informando-os que seu aplicativo é estruturado e a forma como deveriam interagir com ele. Detalhes como esse são perfeitos para chamar mais atenção a uma notificação, erro ou botão de ação.

Transições: As transições podem ser usadas para todo tipo de coisa, desde a mudança suave de lugar de um objeto, à substituição de conteúdo na hora de mostrar um conteúdo novo, como em uma navegação off-canvas e menus suspensos.

Modificadores de Movimento: Eles são usados para influenciar a direção, velocidade, iteração, aceleração e retardo dos objetos. Com animações, você tem enormes possibilidades de criar uma experiência de usuário bem suave.

Combinados, todos esses componentes criar uma experiência muito mais imersiva para os usuários, tudo com a facilidade de classes predefinidas. Elas salvarão inúmeras horas de trabalho, colocando o protótipo em funcionamento o mais rápido possível.

2. Grades com Flexbox

O Foundation for Apps usará as grades do CSS flexbox para definir suas próprias grades. O Flexbox provê uma forma de ordenar seus elementos HTML de qualquer forma que quiser, independente de como o código estiver. Você pode posicionar o conteúdo onde quiser, literalmente, do topo para o fundo, da esquerda para direita e centralizado. Usar o Flexbox traz inúmeros benefícios:

Não há mais necessidade para posicionamento fixo, que podem ser bem imprevisíveis em dispositivos móveis;
Independente de como o código esteja, você poderá posicionar seu conteúdo onde quiser;
Ao invés de apenas mexer com seu conteúdo verticalmente, você pode criar um aplicativo web de página inteira, com seções de rolagem separadas, onde for preciso;
Não há necessidade de tratar dos floats;
Você será capaz de criar layouts complexos para aplicativos para web em minutos.

Será preciso de uma sintaxe diferenciada para a grade, uma vez que linhas e colunas não fazem sentido ao trabalhar com rolagem vertical de diferentes seções de conteúdo em um layout. Isso é o que você usará para criar o layout do seu aplicativo web:

Grupos: Os grupos serão usados como objetos de layout que podem conter outros grupos ou blocos. Eles são bem parecidos com as linhas no Foundation 5.
Blocos: Eles só possuem conteúdo. Você não os usará para layout, mas eles conterão outros elementos e componentes. Imagine-os como as colunas no Foundation 5.
Quadros: Com os quadros, você será capaz de dividir a tela em seções, uma vez que os quadros tomam 100% da largura e da altura da tela. Isso permite você criar áreas com rolagem independente umas das outras.

3. Aplicativos de Página Única (SPA)

O futuro dos aplicativos para web envolverá estados ao invés de páginas totalmente refeitas, e mostrar isso tem sido um dos nossos principais objetivos com o Foundation for Apps - Brandon Arnold, Projetista Líder

Com o Foundation for Apps podemos ver uma mudança em como apresentaremos o conteúdo para nossos usuários. Ao invés de só recarregar a página para cada ação que o usuário tomar, o conteúdo pode ser mostrado ou escondido, dependendo daquilo que o usuário quer ver.

Essa abordagem tornará seu aplicativo muito mais parecido com um aplicativo nativo; Os usuários obterão o conteúdo de forma mais rápida e saberão de onde vem, intuitivamente. Só depende de você decidir qual conteúdo é relevante, o que deve ser apresentado e o que deve ser removido, quando não for necessário.

4. Rotas de Modelos do AngularJS

O Foundation for Apps usará o Angular como seu framework MVC para lidar com o trabalho pesado. Vejamos como:

Com o Foundation for Apps também tentamos tornar o Angular acessível para designers e desenvolvedores - Brandon Arnold, Projetista Líder

Ao usar o Foundation for Apps para seus próximos projetos, você não precisará saber muito sobre Angular. Para simplificar as coisas, como usar diferentes animações e a definição de suas URLs de seus modelos, o Foundation for Apps usa o UI routing. Você pode definir suas URL e animações em seu arquivo HTML, e com a pequena ajuda da mágica do Gulp, as tags do modelo são analisadas, e os trechos de códigos corretos são adicionados ao seu modelo.

Dessa forma, você pode criar aplicativos para web de páginas únicas, mesmo sem precisar tocar em uma linha de JavaScript; Por exemplo, é isso que precisará escrever em seus modelos:

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

E isso é o que a mágica do Foundation for Apps gerará para você:

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’, //default controller
        data: { vars: {
            name: home,
            url: /home,
            animationIn: bounceIn,
            animationOut: bounceOut
        }}
    });
});

Isso não salvará apenas um bom tempo seu ao desenvolver um protótipo ou um produto de verdade, como também deixará mais acessível a construção de aplicativos para web por quem não se sente tão confortável com desenvolvimento front-end mais complexo.

5. Código Voltado a Componentes

Ao invés de usar códigos como <div class="modal" data-modal>, o Foundation for Apps usará as diretivas do Angular, para movimentas as coisas e criar algo mais fácil de se lembrar a partir delas. Agora, você poderá escrever algo como <fa-modal> e obter o mesmo resultado.

Isso gera código mais limpo, o que permite uma melhor consistência no fluxo de trabalho da sua equipe e seu. Ao invés de pensar se a tag correta a ser usada é a header, a footer, a div ou a section, você irá escrever apenas <fa-yourtag>. Bem fácil, certo?

Adicionalmente, esse Código Voltado a Componentes torna possível a integração com as classes do Motion UI do Foundation para criar animações e aplicá-las a diferentes visualizações.

Outras Funcionalidades

Veja algumas outras funcionalidades que estão inclusas no Foundation for Apps:

Navegação Off-canvas
Painéis
Listas em bloco
Menus popup
Barra de ícones
Janelas modais
Alertas
Formulários
Imagens responsivas com Interchange

O Que Podemos Esperar

Primeiramente, esperamos que o Foundation for Apps seja uma versão útil e excitante da família Foundation. O pessoal da ZURB está de olho em todas as novas tecnologias e tendências, e com os anos de experiência em projeto de produtos, eles entregam, mais uma vez, um excelente produto para a comunidade usar. Assim como o Foundation for Sites e o Foundation for Email, o Foundation for Apps tem seu código totalmente aberto e será otimizado constantemente pela ZURB e pela comunidade para funcionar nos mais variados aparelhos.

O Futuro do Foundation

Com o Foundation for Apps saindo do forno e o Ink virando o Foundation for Email, podemos ver o começo de um conjunto de ferramentas que bem nas necessidades dos vários trabalhos que lidamos enquanto designers e desenvolvedores. Logo estaremos falando sobre esses três produtos diferentes:

Foundation for Sites: Todos conhecemos esse! O Foundation for sites é e sempre será uma ótima ferramenta para sites de conteúdo e de marketing. É uma rápida ferramenta de prototipação e um verdadeiro e ótimo framework para a construção de sites colocando os dispositivos móveis em primeiro lugar.
Foundation for Apps: O novato se encaixa em nossas necessidades para as futuras tendências de aplicativos para web! Com sua grade flexível, animações poderosas e design de aplicativos de página única, o Foundation for Apps provê as ferramentas necessárias para a (rápida) construção e prototipação de aplicativos para web.
Foundation for Email: E-mail responsivo sempre foi uma enorme dor de cabeça. Com o Foundation for Email, a ZURB oferece ferramentas que permitem uma boa base para a criação de modelos de e-mail.

Foundation for Apps será lançado na Terça-feira, 04 de dezembro, então fique de olho!

Conclusão

Verdadeiramente, o Foundation tem se tornado uma solução tudo-em-um para seu desenvolvimento front-end. O Foundation for Apps permitirá os designers e desenvolvedores criarem facilmente protótipos com múltiplas visões, completos com atualizações parciais e animações, ótimo para a criação de um protótipo demo para impressionar seus clientes e equipe.

Recursos

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!