Les animations CSS

css3-webdesign-lien-web

Les animations CSS sont très utilisées. Elles permettent de porter l’attention de l’utilisateur vers un endroit en particulier de votre interface.

Elles sont, de ce fait, des transitions et permettent de passer un objet par un état A puis un état B puis un C et cela autant de fois que vous le souhaitez et comme vous le voulez (position, vitesse etc.).

Par exemple, vous pouvez déplacer un carré, changer sa couleur, sa taille etc. Dans cet article, nous allons voir comment créer de simples animations avec des keyframes puis nous verrons en détails des animations plus complexes.

Industrialisation graphique

Quelque soit la scalabilité d’une application, la qualité de l’intégration graphique ne se mesure le plus souvent que sur le rendu final applicatif. Les concepts de maintenabilité et ré-utilisabilité du code sont plus souvent dirigés vers les composants de présentation et métier de l’application.
Cet article a pour but de présenter deux méthodologies intéressantes pour avoir du code CSS plus compréhensible, maintenable et de qualité.

Comment charger les polices web sans tuer la performance

Web_fonts

Les polices personnalisées sont parfaites pour donner un look sympa à notre site. Cependant elles ont un inconvénient : le comportement des navigateurs est de ne pas montrer le texte tant que la police de caractère qu’il doit utiliser (d’après notre CSS) n’est pas disponible. Autrement dit, pendant que la police se télécharge, aucun texte n’est visible sur le site !

Un mixin SASS pour automatiser la création de boîtes de type info-bulle

blog-mixin-info_bulle

Etant développeur front-end, environ 75% des maquettes graphiques que je dois intégrer comportent actuellement des composants à l’affichage similaire à une info-bulle.

Il y a encore quelques années je me contentais d’un générateur en ligne qui, moyennant quelques paramètres à renseigner dans un formulaire, me fournissait un code CSS à peu près prêt à l’emploi (il fallait souvent le réajuster un peu). Aujourd’hui j’utilise un mixin SASS que j’ai écrit, d’abord en m’inspirant du générateur en ligne dont j’ai fourni le lien ci-dessus (avec quelques soucis de crénelage au niveau des triangles), puis en repensant la quasi-totalité du code en exploitant les possibilités de transformation offertes par CSS3.

Vorlon.js simplifie le debug web à distance

logo vorlon js

Vorlon.js est un outil permettant le debug web à distance et multiplateforme. L’idée de ses créateurs (quelques évangélistes Microsoft) est de pallier les problématiques du debug de site web sur mobile. Il faut en effet utiliser des outils propriétaires pour chaque plateforme, que ce soit sur Chrome pour Android, Safari pour iOS, et IE pour Windows Mobile. Il existe pourtant bien un outil qui s’appelle Weinre, mais son interface n’est pas la plus agréable et il ne fonctionne que sous Chrome.

Dans cet article je vais donc vous présenter Vorlon.js dont l’objectif est de se rapprocher au maximum des outils de debug tels qu’on les connait dans les navigateurs avec F12, le tout à distance.

DevFest Nantes 2015 !

gdg-devfest     

Le 6 novembre 2015 se déroulait la 4ème édition du DevFest à Nantes. Netapsys était de la partie bien sûr, en tant que partenaire de l’événement et spectateur attentif !

Retour sur cette journée 2.0  ! Ou le plus grand rassemblement de développeurs français autour des technologies Google. Avec plus de 600 participants de tout horizon, 28 conférences de pure technologie et plus de 30 speakers de France et d’ailleurs, 4 thèmes était abordés pour cette édition :

Mobile et Objets connectés, Web, Cloud & BigData et Découverte.