Un vistazo a la próxima Foundation para aplicaciones

Spanish (Español) translation by steven (you can also view the original English article)

ZURB siempre está trabajando en la próxima gran herramienta para ayudar a los diseñadores web y desarrolladores por igual. Hacen que nuestros días de programación sean un poco más fáciles y mucho más divertidos. El framework Foundation es sin duda el más conocido, y pronto habrá un nuevo miembro de la familia: Foundation para Apps.

Con un lanzamiento programado del martes 2 de diciembre, ahora es un buen momento para ver lo que Foundation para Apps tendrá para ofrecer, sus principales características y lo que podemos esperar en un futuro próximo. Recientemente se me dio la oportunidad de charlar con Brandon Arnold, diseñador principal, y Geoff Kimball, diseñador de productos de ZURB. Me mostraron de primera mano algunas de sus potentes características, y hoy te mostraré lo que podrás hacer con él.

Características

El objetivo principal de Foundation para Apps es brindar un medio para crear rápidamente prototipos de aplicaciones web complejas y por ello proporciona un framework para crear esas aplicaciones web. Para hacer todo lo posible, viene con algunas características extremadamente útiles, incluyendo:

1. Motion UI

La nueva era del diseño plano ha quitado algo, en muchos sentidos, de nuestras interfaces: jerarquía y estructura debido a la falta de gradientes, elementos skeuomórficos, sombras y profundidad. Foundation para Apps aborda este problema mediante el uso de una enriquecida biblioteca UI llamada Motion con toneladas de animaciones y transiciones listas para su uso. No tendrás que meterte con Sass o JavaScript, porque ZURB ha hecho el trabajo duro por ti.

Esto es lo que podemos esperar:

Animaciones: las animaciones de fotogramas clave CSS te permitirán añadir movimientos y efectos sutiles a tu aplicación. Esto proporcionará a los usuarios comentarios que les informarán de cómo se estructura la aplicación y cómo deben interactuar con ella. Detalles como este son ideales para prestar atención adicional a una notificación, un error o una llamada a la acción.

Transiciones: Las transiciones se pueden utilizar para todo tipo de cosas elegantes, desde cambiar suavemente un objeto de una posición a otra, hasta reemplazar contenido y mostrar contenido nuevo, como la navegación fuera del lienzo y los menús desplegables.

Modificadores de movimiento: Se utilizan para influir en la dirección, velocidad, iteración, facilidad y retraso de los objetos. Junto con las animaciones tienes enormes posibilidades para crear una experiencia de usuario fluida.

Combinados, todos estos componentes crean una experiencia inmersiva y animada para tus usuarios, todo ello con la facilidad de las clases predefinidas. Te ahorrarán mucho trabajo y pondrán ese prototipo en marcha en poco tiempo.

2. Cuadrícula de tipo Flexbox

Foundation para Apps usará CSS Flexbox para definir su cuadrícula. Flexbox proporciona una manera de ordenar tus elementos en HTML de la manera que desees, independientemente del marcado. Puedes colocar tu contenido literalmente en cualquier lugar, de arriba a abajo, de izquierda a derecha, de centro y de medio. El uso de Flexbox trae varias ventajas:

Ya no hay necesidad del posicionamiento fijo, que a menudo puede no ser confiable en dispositivos móviles.
Independientemente del marcado, puedes colocar el contenido en cualquier lugar que desees.
En lugar de simplemente apilar el contenido verticalmente, puedes crear una aplicación web de página completa, con secciones de desplazamiento independientes cuando se necesita más contenido.
No hay necesidad de limpiar los flotantes.
Podrás crear un diseño complejo para una aplicación web en cuestión de minutos.

Se requerirá una sintaxis diferente para la cuadrícula, ya que las filas y columnas no tienen sentido cuando se usa el desplazamiento vertical de diferentes secciones de contenido en el diseño. Esto es lo que usarás para crear tu propio diseño de aplicación web:

Grupos: los grupos se utilizarán como objetos de diseño que pueden contener más grupos o bloques. Son algo similares a las filas de Foundation 5.
Bloques: solo contienen contenido. No los usarás para tu diseño, sino que contendrá otros elementos y componentes. Imagínate que son como las columnas de foundation 5.
Marcos: Con los marcos podrás tallar la pantalla en secciones, ya que los fotogramas ocupan el 100% de ancho y alto de la pantalla. Esto te permite crear áreas que se pueden desplazar de forma independiente.

3. Aplicaciones de una sola página

El futuro de las aplicaciones web involucrará estados en lugar de páginas completamente nuevas, y mostrando que ha sido uno de nuestros principales objetivos para Foundation para Apps - Brandon Arnold, Diseñador principal

Con Foundation para Apps podemos ver un cambio en la forma en que presentaremos contenido a nuestros usuarios. En lugar de simplemente volver a cargar la página después de cada acción que realicen los usuarios, el contenido se puede mostrar u ocultar en función de lo que el usuario quiera ver.

Este enfoque hará que la aplicación web se sienta más como una aplicación nativa; los usuarios obtendrán su contenido más rápido y sabrán intuitivamente de dónde viene. Depende de ti decidir qué contenido es relevante, qué se debe mostrar y qué se debe eliminar cuando no es necesario.

4. Plantillas del enrutamiento de AngularJS

Foundation para Apps usará Angular como su framework MVC para realizar el trabajo pesado. Vamos a ver cómo:

Con Foundation para Apps, también estamos tratando de hacer que Angular sea accesible para diseñadores y desarrolladores - Brandon Arnold, Diseñador principal

Al usar Foundation para Apps para tus próximos proyectos, en realidad no tendrás que saber mucho sobre Angular en absoluto. Para simplificar cuestiones como el uso de diferentes animaciones y la definición de las direcciones URL de las plantillas, Foundation para Apps usa el enrutamiento de la interfaz de usuario. Puedes definir tu URL y las animaciones en tu archivo HTML, y con un poco de ayuda de la magia de Gulp, las etiquetas de la plantilla se analizan y los fragmentos de código correctos se agregan a tu plantilla.

De esta manera puedes crear una aplicación web de una sola página sin tener que tocar una sola línea de JavaScript. Por ejemplo, esto es lo que escribirás en tu plantilla:

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

Y esto es lo que toda la magia de Foundation para Apps realiza para ti:

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
        }}
    });
});

Esto no solo te ahorrará un montón de tiempo cuando estés desarrollando un prototipo o tu producto real, sino que incluso hará que la creación de una aplicación web sea accesible para aquellos que no se sienten cómodos con un desarrollo front-end más complejo.

5. Código impulsado por componentes

En lugar de usar código como <div class="modal" data-modal>, Foundation para Apps usará directivas de Angular, para girar las cosas y hacerlas fácil de recordar. En su lugar, escribirás algo como <fa-modal>, para obtener el mismo resultado.

Esto hace que el marcado sea más limpio, lo que permite una mejor coherencia en tu flujo de trabajo y el de tu equipo. En lugar de pensar si una etiqueta debe ser un header, un footer de página, un div o un section, por ejemplo, solo estarás escribiendo <fa-tu-etiqueta>. Súper fácil, ¿no?

Además, este código controlado por componentes permite integrar clases de interfaz de usuario de Foundation Motion para crear animaciones y aplicarlas a las diferentes vistas.

Otras características

Echa un vistazo a algunas de las otras características que se incluirán en Foundation para Apps:

Patrones Off-canvas
Paneles
Listas en bloque
Menús emergentes
Barra de iconos
Ventanas modales
Alertas
Formularios
Intercambio

Cosas que podemos esperar

En primer lugar, podemos esperar que Foundation para Apps sea la próxima entrega emocionante y útil de la familia Foundation. Los chicos de ZURB están al tanto de cada nueva tecnología y tendencia y con sus años de experiencia en el diseño de productos, están entregando de nuevo un gran producto para la comunidad. Al igual que Foundation para sitios y la próxima vez nombrada Foundation para correo electrónico, Foundation para Apps es completamente de código abierto y, continuamente será optimizada por ZURB y la comunidad para trabajar a través de múltiples dispositivos.

El futuro de Foundation

Con Foundation para Apps próximamente y Ink convirtiéndose en Foundation para correo electrónico, podemos ver los comienzos de un conjunto de herramientas que se adaptan a la necesidad de varios trabajos que tenemos como diseñadores y desarrolladores web. Pronto hablaremos de estos tres productos diferentes:

Foundation para sitios: ¡Todos conocemos este! Foundation para sitios es y siempre será ideal para el contenido y los sitios de marketing. Es una herramienta de prototipado rápido y un framework realmente impresionante para la construcción de sitios web que primero se enfocan en móviles, y son adaptables a cualquier dispositivo.
Foundation para Apps: ¡El nuevo chico en el bloque, que se adapta a nuestras necesidades para las próximas tendencias de aplicaciones web que se apoderan de la web! Con su cuadrícula flexible, potentes animaciones y diseño de una sola página, Foundation para Apps proporciona las herramientas necesarias para crear (rápidamente) prototipos de tus aplicaciones web.
Foundation para correo electrónico: El correo electrónico responsivo siempre ha sido un dolor de cabeza masivo. Con Foundation para correo electrónico, ZURB te ofrece las herramientas para una buena base sobre la cual crear plantillas de correo electrónico.

Foundation para Apps se lanzará el martes 2 de diciembre, ¡así que asegúrate de estar atento!

Conclusión

Verdaderamente, Foundation se está convirtiendo en una solución todo en uno para tu desarrollo web front-end. Foundation para Apps permitirá a los diseñadores y desarrolladores crear fácilmente prototipos multi-vista, con intercambio parcial y animaciones, ideal para configurar demos para impresionar a tu equipo y clientes.