Le Blog

Le blog laboratoire de F.L.D. Studio
0

Pense pas bête

Création site internet

Check List

Un service en ligne très utile pour utiliser et retrouver toutes les ressources indispensables à la conception d'un site. 11 grands thèmes sont explorés et proposent des liens de tests et de contrôles. Indispensable !!!

Ressources

Catégories: Développement WEB

Tags: Ressource

Commentaires: Pas de commentaires

0

Patientez...

Patientez

Interface utilisateur

Il est très important dans une interface utilisateur de fournir à l'internaute une indiquation sur la prise en compte et le déroulement d'une action. Lorsque qu'il clic sur un bouton et que le traitement peut être long comme par exemple pendant le upload d'un fichier, il est indispensable de l'informer qu'il se passe quelque chose et qu'il doit attendre. D'abord on le rassure,  sa demande est bien prise en compte et cela évite aussi qu'il appui plusieurs fois sur le bouton au risque d'induire un comportement non souhaité dans l'application.

Le bouton "Ladda"

Ce petit bout de code va parfaitement réaliser cette tache, 'il le fait avec originalité et efficacité. L'idée, simple, est d'afficher une animation à l'intérieur même du bouton. C'est très pratique car d'une part l'utilisateur voit que son action est prise en compte, que le bouton n'est plus cliquable pendant ce laps de temps et enfin on utilise pas de place supplémentaire dans le design.

Il s'agit d'un petit script JavaScript autonome et d'un soupson de CSS. A l'intérieur de la feuille de style on pourra d'ailleur faire un peux de ménage car il existe plusieurs façons d'afficher l'icone animée et les boutons peuvent être de différentes couleurs.  A noter que le loader ne requiére aucune image de type .gif animé, il est basé sur spin.js qui est encapsulé dans Ladda.

Ladda fonctionne à partir de IE9 et sur tous les autres navigateurs.

Ressource

Voir aussi : http://taitems.github.io/iOS-Overlay/ qui permet de créer un écran en overlay qui affiche un message par dessus l'écran en cours. Cette ressource permet de signifier à l'utilisateur différents évenement comme attente, succé ou erreur.

PACE : http://github.hubspot.com/pace/docs/welcome/ presque rien à configurer, pas de dépendance et detection automatique de l'affichage.

En CSS : https://github.com/tobiasahlin/SpinKit

Tutoriel animation CSS : http://tympanus.net/Development/ProgressButtonStyles/ et le ZIP du tuto

Sources à télécharger

Avec 'une image GIF animée : http://www.ajaxload.info/

Catégories: Développement WEB

Tags: Ressource

Commentaires: Pas de commentaires

0

Le Web en Stat

Statistiques du Web

Statistiques Web

Pour cibler son public il est indispensable de connaitre quelques chiffres. Une des questions que l'on est en droit de se poser serait par exemple : Quel navigateur est le plus utilisé en France ? Quelle part de marché représente les navigateurs de Microsoft en Allemagne. Pour trouver ces informations et bien d'autres encore, il existe des sites comme : http://gs.statcounter.com/ qui peuvent vous fournir se type d'informations.

Quelques exemples :

Source: StatCounter Global Stats - Browser Market Share

Source: StatCounter Global Stats - Mobile Browser Market Share

A savoir aussi, comment lisser les courbes du temps de chargements dans Google analytics : http://blog.madrzejewski.com/ameliore-courbes-temps-chargement-site-analytics/#more-181

Catégories: Développement WEB

Commentaires: Pas de commentaires