javascript Article

Créer un backend simplement avec Bootstrap

Créer un backend simplement avec Bootstrap

Bootstrap est un framework permettant de développer des interfaces graphiques professionelles très simplement et très rapidement. Pour preuve du sérieux, le framework est développé et maintenu par Twitter! Je vais vous présenter rapidement dans cet article les différentes composantes du framework.

Les différentes composantes de Bootstrap

Bootstrap se compose de plusieurs éléments aidant la fondation d’un bon design web.

Scafolding

  • Utilisation de HTML5
  • Un « reset » CSS très simple basé sur Normalize.css
  • Un système de grille css (grid system)
  • Un système simple de « layout »
  • Un système pour faire un site « responsive » vraiment très bien fait

Framework CSS

  • Un système de typographique
  • Gestion des styles et « helper » pour les tableau HTML
  • Gestion des éléments de formulaire
  • Des boutons personnalisables (très chics)
  • « helper » pour les images
  • Un kit d’icônes d’actions fournis par Glyphicons

Composants de design 

  • Groupes de boutons
  • « Labels » et badges
  • Fils d’ariane (breadcrumbs)
  • « Alerts box » : Info, succès, échec, attention
  • Barres de progression
  • « Thumbnails »

Framework Javascript

  • « Modal box » très bien faites et facile à modifier
  • Gestion des transitions
  • Système de « tabs »
  • Système de « tooltips »
  • Alert javascript amélioré
  • Autocompletion pour formulaire
  • Système de « Popover » très bien fait

Boostrap est hautement « skinable »

Le plus interessant avec Bootstrap, c’est qu’on peut créer des thèmes (« skins ») assez facilement. La cerise sur le gâteau c’est que, à l’instart de WordPress, il existe des thèmes gratuit ou payant développés par une communauté grandissante. VOus en trouverez une bonne quantité sur le site http://wrapbootstrap.com

Conclusion sur Bootstrap

Bootstrap est définitivement un outil à connaître pour tout bon développeur web. Il permet de créer des interfaces très rapidement et très proprement. Je ferais quelques tutoriels dans les prochains articles. 

Ressources pour le framework Bootstrap

Tutoriel : Introduction à la librarie javascript d3.js

Tutoriel : Introduction à la librarie javascript d3.js

Voici le premier d’une longue lignée (je l’espère) de tutoriaux en français portant sur la librarie d3.js. Pour en savoir plus sur cette librairie reportez vous à la présentation que j’en ai fait sur ce post. L’objectif de ce premier tutoriel est de faire quelques exemples d’utilisation très simple de la librairie.

A l’instart de Jquery, d3.js est une librarie qui permet de manipuler le DOM. Mais là où d3.js est très efficace est dans la manipulation de SVG.

Manipuler ou créer une div avec d3.js

Ajouter et manipuler un rectangle SVG

Dessiner plusieurs éléments dans un groupe svg

Gérer des données au format JSON et dessiner en fonction de ces données

Dans ce dernier exemple, nous allons construire des nodes qui sont en fait des groupes svg ayant la class « node ». Ensuite, on va dessiner, suivant les données (variable data) un cercle et afficher le nom de ce cercle dans celui -ci.

Le dernier exemple introduit plusieurs nouveaux concepts : selectAll(), data(), et enter().

selectAll()

la methode de selection selectAll permet, comme son nom l’indique de selectionner les éléments définis par le selecteur css passé en argument. selectAll(« p ») va selectionner tous les éléments présents dans le DOM.

data()

La methode data() permet de « binder » (attacher) des données à des éléments sélectionnés par la methode selectAll(). Ces données une fois attachées seront utilisables dans la suite du chainage. Exemple : attr(« fill »,function(d){return d.color});

enter()

Cette fonction va « binder » les données à des éléments et créer les éléments sélectionnés par selectAll(). Si vous n’utilisez pas enter() alors aucun élément ne sera crée. Seul les éléments existants seront utilisés et donc s’il sont inexistant, rien ne s’affichera.

Ressources

Visualisation de données avec sigma.js

Je viens de tomber sur une nouvelle librairie Javascript qui permet de faire de la visualisation de données en réseau (network graph). Je n’ai pas encore eu le temps de l’essayer mais je vais certainement me pencher dessus rapidement.

Voici le type de graphique réalisable : 

Je vous laisse regarder les exemples sur cette page : 

http://sigmajs.org/

Si quelqu’un à déjà utilisé cette librairie, je serais interessé d’avoir des avis dessus, alors laissez un commentaire. 

D3.js : un pas de plus vers la data visualisation sur le web

D3.js est une librarie graphique écrite en Javascript crée par Mike Bostock déjà auteur de la librarie Protovis. D3.js est en fait une évolution de protovis, son nom proviens de l’abréviation de Data-Driven Document. 

Pourquoi D3.js au lieu de Protovis

D’après ce que j’ai compris, Mike Bostock a décidé d’arrêter le développement  de Protovis pour commencer celui de d3.js dans le but d’offrir à tous une librarie puissante pour la visualisation basé sur des standards du W3C (HTML, SVG et CSS) au lieu de s’attacher à un framework propriétaire. D3.js est clairement axé Web et visualisation de données, ainsi il est très simple de manipuler des données via le DOM (Document Object Model).

Quelques exemples avec D3.js

Network Force Directed graph

New York Times

Cluster Layout

Cubism.js

Tag Cloud 

Choropleth

Circle Packing

Conclusion

Comme vous pouvez le voir d3.js est la source de beaucoup de type de représentations graphiques différentes mais aussi à la base de quelques libraries / plugins. Ainsi se termine la présentation (rapide je l’avoue) de la librarie d3.js. A suivre un tutoriel pour mettre en place son premier graphique avec la librarie.

Highcharts une librairie javascript pour les graphs – 2/3 – Tutoriel

Highcharts une librairie javascript pour les graphs – 2/3 – Tutoriel

Voici comme promis avec un peu de retard la suite du post sur Highchart la fameuse librarie javascript pour faire des graphiques. La partie 2 sur 3 sera donc consacré à un tutoriel pour démarrer avec la librarie.

Comme je viens de découvrir un site qui va bien m’amuser (j’ai nommé data.gouv.fr), je vais utiliser un des datasets proposés par ce site. J’ai décidé d’illustrer donc notre premier exemple de cette librarie Highcharts avec les données des dépenses de la sécurité sociale en France continentale par Région pour le mois de Janvier. (voici le dataset que je vous donne en json). Attention les chiffres sont impressionnants.

Préparation

Pour commencer allez sur le site de Highcharts et téléchargez la librairie. Créez un fichier index.html comme ceci :

Le fichier index.html

On charge les fichiers suivants :

  • Jquery (via google api)
  • Highchart (mettre le bon chemin vers highcharts que vous avez télécharger)
  • Fichier utils.js (expliqué en dessous)
  • Fichier data.js (Le fichier data de l’exemple)
  • Main.js (le fichier qui va contenir notre code javascript pour lancer highcharts)
Le fichier utils.js est un fichier qui comprends des fonctions javascript que j’utilise souvent. La plupart de ces fonctions proviennent de php.js (voir mon post à propos de php.js). – Télécharger le fichier utils.js

Le fichier main.js

Dans ce fichier on crée une fonction $.displayPieChart qui paramètre notre graphique.

Le array color représente les couleurs que l’on va utiliser pour notre graphique (je les change car j’aime mieux ce set de couleur que celui par défaut).

On appelle ensuite la fonction $.displayPieChart au document ready en passant 2 paramètres, la variable data (représente le dataset contenu dans data.js) et le array color.

Le résultat


Voici un beau camembert présentant les dépenses de la sécu au mois de janvier réparties par régions.

Conclusion

Comme vous pouvez le voir, un diagramme circulaire (camembert) est assez facile à mettre en place avec Highcharts. Aussi comme c’est mon premier tutoriel (d’une grande lignée j’espère) j’attend vos commentaires avec impatience pour améliorer ce post et les tutoriaux suivants.

Bientôt d’autres exemples avec Highcharts qui seront un peu plus avancés.