Voici quelques librairies JavaScript pour réaliser de jolies interfaces utilisateurs. Ce sont des fonctionnalités qu’on est content d’avoir dans sa boîte à outils tant ils sont utiles lors de la conception de site internet.

noUiSlider

noUiSlider est une librairie JavaScript très pratique qui permet de créer facilement un slider. En quelques lignes de codes ont peut configurer de beaux sliders qu’on utilisera dans des formulaires pour faire par exemple des intervalles de prix (site e-commerce), des sélections horaires, ou des paramètres quelconques. 100% compatible mobile, noUiSlider est très léger.

Je l’ai utilisé pour faire un planning horaire pour un site en cours de développement (décembre 2015).
Les utilisateurs du site peuvent sélectionner ses périodes horaires pendant lesquelles ils recevront des alertes SMS et EMAIL.

Grâces aux événements du slider, on peut, à chaque mouvement, implémenter des requêtes ajax qui sauvegarde la période du planning en base de données.

Voici un aperçu :

Sélection d’intervalles horaires pour un planning hebdomadaire d’alerte SMS/E-Mail

Morris graph

Morris graph permet de générer des graphiques de type courbe, diagramme et circulaire très facilement. Les graphiques sont responsives, ils s’adaptent à la taille de l’écran automatiquement, et charge donc rapidement sur mobile.

Je l’ai utilisé pour générer des graphiques d’évolutions de température, et de vibration (pour la surveillance d’équipements industriels). Ils permettent aux utilisateurs de l’application de visualiser et monitorer rapidement les anomalies sur leurs appareils.

Aperçu des graphiques :

Graphiques d’évolution de la température par année/mois/semaine

Liens externe :  noUiSlider  –   Morris graph

Si questions, laissez un commentaire, amusez-vous bien !