Share
ZURB travaille toujours sur le prochain grand outil pour aider les concepteurs Web et les développeurs. Ils rendent nos journées de programmation un peu plus faciles et plus amusantes. Le framework Foundation est sans doute le plus connu et il y aura bientôt un nouveau membre dans la famille: Foundation for Apps.
Avec la sortie prévue du mardi 2 décembre, le moment est venu de voir ce que Foundation for Apps aura à offrir, ses principales fonctionnalités et ce à quoi nous pouvons nous attendre dans un proche avenir. Récemment, j’ai eu l’occasion de discuter avec Brandon Arnold, responsable de la conception, et Geoff Kimball, concepteur de produits chez ZURB. Ils m'ont montré de première main certaines de ses fonctionnalités puissantes et aujourd'hui, je vais vous montrer ce que vous pourrez faire avec..
L'objectif principal de Foundation for Apps est de fournir un moyen de prototyper rapidement des applications Web complexes et un cadre pour la création de ces applications Web. Pour rendre tout cela possible, il est livré avec des fonctionnalités extrêmement utiles, notamment:
La nouvelle ère de la conception plate a, à bien des égards, enlevé quelque chose à nos interfaces: hiérarchie et structure en raison de l’absence de gradients, d’éléments skeuomorphic, d’ombres et de profondeur. Foundation for Apps résout ce problème en utilisant une riche bibliothèque d’interface utilisateur avec des tonnes d’animations et de transitions prêtes à l'emploi. Vous n'aurez pas à utiliser Sass ou JavaScript, car ZURB a fait le travail dur pour vous..
Voici ce à quoi nous pouvons nous attendre:
Animations: Les animations d'images clés CSS vous permettront d'ajouter des mouvements et des effets subtils à votre application. Cela fournira aux utilisateurs des commentaires les informant de la structure de votre application et de la manière dont ils devraient interagir avec elle. De tels détails sont parfaits pour accorder une attention particulière à une notification, une erreur ou un appel à l'action.
Les transitions: Les transitions peuvent être utilisées pour toutes sortes de choses de fantaisie, allant de déplacer en douceur un objet d'une position à une autre, de remplacer du contenu et d'afficher un nouveau contenu, comme la navigation hors zone et les menus déroulants.
Modificateurs de mouvement: Ceux-ci sont utilisés pour influencer la direction, la vitesse, l'itération, la facilité et le retard de vos objets. Avec les animations, vous avez d'énormes possibilités pour créer une expérience utilisateur fluide.
La combinaison de tous ces composants offre aux utilisateurs une expérience immersive et vivante, le tout avec la facilité des classes prédéfinies. Ils vous feront économiser beaucoup de travail et vous permettront de faire fonctionner ce prototype en un rien de temps.
Foundation for Apps utilisera CSS Flexbox pour définir sa grille. Flexbox offre un moyen de classer vos éléments en HTML comme vous le souhaitez, quel que soit le balisage. Vous pouvez placer votre contenu littéralement n'importe où, de haut en bas, de gauche à droite, au centre et au centre. L'utilisation de Flexbox présente plusieurs avantages:
Une syntaxe différentesera nécessaire pour la grille, car les lignes et les colonnes n'ont pas de sens lorsque vous utilisez le défilement vertical de différentes sections de contenu dans votre mise en page. Voici ce que vous utiliserez pour créer votre propre mise en page d'applications Web:
L'avenir des applications Web impliquera des États plutôt que des pages entièrement nouvelles, ce qui est l'un de nos principaux objectifs pour Foundation for Apps - Brandon Arnold, Lead Design
Avec Foundation for Apps, nous pouvons assister à un changement dans la manière dont nous présentons le contenu à nos utilisateurs. Au lieu de simplement recharger la page après chaque action entreprise par les utilisateurs, le contenu peut être affiché ou masqué en fonction de ce que l'utilisateur souhaite voir..
Cette approche permettra à votre application Web de se sentir davantage comme une application native. les utilisateurs obtiendront leur contenu plus rapidement et sauront intuitivement d'où il vient. C'est à vous de décider quel contenu est pertinent, ce qui devrait être montré et ce qui devrait être supprimé quand ce n'est pas nécessaire.
Foundation for Apps utilisera Angular comme cadre MVC pour faire face aux tâches lourdes. Voyons comment:
Avec Foundation for Apps, nous essayons également de rendre Angular accessible aux concepteurs et aux développeurs - Brandon Arnold, Lead Design
Lors de l’utilisation de Foundation for Apps pour vos projets à venir, vous n’aurez pas besoin de connaître beaucoup Angular. Pour simplifier des choses, telles que l’utilisation de différentes animations et la définition des URL de vos modèles, Foundation for Apps utilise le routage de l’interface utilisateur. Vous pouvez définir votre URL et vos animations dans votre fichier HTML et à l'aide d'un peu de magie Gulp, les balises de modèle sont analysées et les fragments de code appropriés sont ajoutés à votre modèle..
De cette manière, vous pouvez créer une application Web d'une seule page sans même avoir à toucher une seule ligne de JavaScript. Par exemple, voici ce que vous allez écrire dans votre modèle:
--- nom: home url: / home animationIn: bounceIn animationOut: bounceOut ---
Et voici ce que toute la magie de Foundation for Apps analyse pour vous:
Accentsconagua
var routerApp = angular.module ('routerApp', ['ui.router']); routerApp.config (fonction ($ stateProvider, $ urlRouterProvider) $ urlRouterProvider.otherwise ('/ home'); $ stateProvider .state ('home', url: '/ url', templateUrl: 'partial-home.html' , contrôleur: 'PageController', // données de contrôleur par défaut: vars: nom: home, url: / home, animationIn: bounceIn, animationOut: bounceOut););Non seulement cela vous fera gagner beaucoup de temps lorsque vous développez un prototype ou votre produit réel, mais cela rend même la création d'une application Web accessible à ceux qui ne sont pas à l'aise avec un développement front-end plus complexe..
Au lieu d'utiliser du code comme Cela permet un balisage plus propre, ce qui permet une meilleure cohérence dans votre flux de travail et celui de votre équipe. Au lieu de se demander si un tag devrait être un De plus, cela Code piloté par composant, permet d'intégrer les classes Foundation Motion UI pour créer des animations et les appliquer à vos différentes vues. Découvrez quelques-unes des autres fonctionnalités qui seront incluses dans Foundation for Apps: Premièrement, nous pouvons nous attendre à ce que Foundation for Apps soit le prochain épisode utile et passionnant de la famille Foundation. Les employés de ZURB sont au courant de toutes les nouvelles technologies et tendances. Grâce à leurs nombreuses années d'expérience dans la conception de produits, ils fournissent à nouveau un excellent produit à la communauté. Juste comme Fondation pour les sites et le bientôt nommé Fondation pour le courrier électronique, Foundation for Apps est complètement open source et sera continuellement optimisé par ZURB et la communauté pour fonctionner sur plusieurs appareils.. Avec Foundation for Apps à venir et Ink devenant Foundation for Email, nous voyons les débuts d'un ensemble d'outils qui répondent aux besoins de divers emplois en tant que concepteurs et développeurs Web. Nous parlerons bientôt de ces trois produits différents: Foundation for Apps sera lancé le mardi 2 décembre, alors assurez-vous de garder un œil sur elle! Vraiment, Foundation est en train de devenir une solution tout-en-un pour votre développement Web frontal. Foundation for Apps permettra aux concepteurs et aux développeurs de créer facilement des prototypes à vues multiples, avec échange partiel et animations, idéal pour la mise en place de démonstrations qui impressionneront votre équipe et vos clients.. entête, une bas de page, une div ou un section par exemple, vous allez simplement écrire Autres caractéristiques
Choses que nous pouvons attendre
L'avenir de la fondation
Conclusion
Ressources
