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

• Bootstrap home
• Wrap Bootstrap

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

• W3 School, documentation sur le SVG
• Le site de d3.js
• Approfondir sur le DOM (Document Object Model)

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. 

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.

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

<!DOCTYPE HTML>
<html>
<head>
<title>Undisconnected - Exemples librairie js Highcharts</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!-- Libs -->
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/highcharts/3.0.2/highcharts.js'></script>
<script type='text/javascript' src='../js/utils.js'></script>
<script type='text/javascript' src='data.js'></script>
<script type='text/javascript' src='main.js'></script>

</head>
<body style='margin:0px;'>
<div class='wrapper'>

<div id='pieChart'></div>
  
  
</div>
</body>
</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 main.js

$(document).ready(function() {

  $.displayPieChart(colors, data);

});

var colors = ["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a", "#d62728", "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"];

$.displayPieChart = function(colors, data) {

		var chart;

		var chart = new Highcharts.Chart({
      chart: {
         renderTo: 'pieChart',
         width: 598,
         height: 450,
         marginLeft: 25,
         marginRight: 25,
      },
      colors: colors,
      title: {
         text: "Dépenses SECU janvier par région",
         margin: 10
      },
      tooltip: {
         formatter: function() {
            return "Dépense : " + number_format(this.y,0,',',' ') + "€" ;
         }
      },
      plotOptions: {
         pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
               enabled: true,
               formatter: function() {
                  return "" + this.point.name.toLowerCase() + "";
               }
            }
         },
         series: {
            dataLabels: {
                enabled: true,
                color: 'black',
                fontSize: 3
            }
        }
      },
       series: [{
         type: 'pie',
         data: data
      }]
   });

	}

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.

PHPJS c’est quoi ?

Il s’agit d’une bande de tarré qui se sont lancé dans l’écriture référencée des fonctions PHP en language Javascript. Je ne sais pas si vous me suivez mais en gros ça permet de faire un « array_key_exists »  ou un « array_search » en Javascript avec 1 ligne de code. C’est un projet trop peu connu à mon goût mais pourtant très utile à la communauté et aux développeurs Javascript.

Pourquoi utiliser PHPJS ?

PHPJS est très utile pour vous simplifier la vie (surtout pour travailler avec les array). Certaines fonctions PHP sont très puissantes et permettent des traitements rapide avec les array ou avec les strings que Javascript ne possède pas nativement. Avec PHPJS on a tout ça sous la main et ça peut parfois éviter un bon nombre de ligne de code.

Comment utiliser PHPJS?

Je dirais qu’il existe 3 manières d’utiliser PHPJS.

La façon manuelle :

Il suffit d’utiliser dans un fichier de fonction (par exemple nommé utils.js) les fonctions PHPJS dont vous aurez besoin pour votre projet. Voici la page qui référence les fonctions. Il suffit de copier / coller les fonctions que vous avez besoin pour votre projet. C’est très simple à faire et surtout on optimise ici le temps de traitement des pages, la librairie complète de PHPJS est un peu lourde tout de même. (+ de 100 ko)

Les packages de fonctions :

Il existe différents packages de la librarie que l’on peut télécharger et utiliser gratuitement sur cette page. Vous aurez donc un fichier contenant toutes les fonctions PHPJS. C’est très pratique car on a pas de question à se poser, savoir si cette fonction est déjà dans son fichier de fonction ou non. (A conseiller pour les applications web plus que pour les sites web).

Les packages objet :

Ces packages permettent d’utiliser toutes les fonctions (comme dans les packages de fonctions) mais celles-ci sont encapsulées dans un objet. Ceci évite les conflits de nom avec des fonctions déjà existantes dans un projets. (A conseiller pour les applications web plus que pour les sites web).

Conclusion :

Je vous conseille donc d’aller faire un tour sur le site de PHPJS. C’est une librairie vraiment interessante qui vaut le coup d’être étudiée. Le code est très propre. J’ai aussi appris beaucoup en ouvrant les fichiers et en regardant la construction de certaines fonctions.

Ressources :

• http://phpjs.org/

Le problème

Les navigateurs (tous confondus) utilisent un système de cache local qui permet d’afficher plus rapidement une page une fois que celle-ci a déjà été affichée. Le problème c’est que si vous poussez une mise à jour d’un fichier javascript ou un fichier de style, les visiteurs qui auront déjà ce fichier en cache ne verront aucun changement sur le site car leur navigateur sortira le fichier en cache.

La solution

Pour éviter ce problème très frustrant à la longue, il existe une pratique qui utilise une fonction PHP pour permettre de dater le fichier. Cette fonction s’appelle filemtime et va renvoyer la date de dernière modification du fichier au format timestamp.

Voici comment l’utiliser :

<script type='text/javascript' src='js/monfichier.js?date=<?=filemtime('js/monfichier.js')?>'></script>

il suffit donc de mettre un paramètre GET (ici « date ») avec comme valeur le timestamp de la date de dernière modification de votre fichier (donné par la fonction filemtime) pour que le navigateur pense qu’il s’agit d’un nouveau fichier et aille le chercher sur le serveur.

Procédez comme cela pour chaque fichier javascript et css mais aussi pour les images si besoin.

Attention au chemin (path) que vous allez utiliser pour filemtime. Un chemin peut être relatif ou absolue. Si vous avez une erreur PHP contenant le terme « stat failed« , ceci veut dire que PHP n’a pas réussit à récupérer les infos du fichier, ce qui le plus probablement sera une erreur de chemin. Alors relatif ? ou absolue ? Ceci va dépendre de votre configuration PHP, mais le plus souvent le chemin relatif fonctionnera.

Conclusion

J’espère que ce petit tutoriel vous aura aidé à comprendre une méthode simple pour vous éviter bien des problèmes de cache. J’utilise maintenant cette méthode dans tous les projets que j’entreprends, c’est vraiment une « best practice » comme on dit dans le métier.

J’utilise Highcharts presque quotidiennement pour ma job et je dois avouer que je suis assez content de l’avoir choisi pour plusieurs raisons :

1. Facilité d’emplois
2. Paramétrable à souhait avec un objet JSON
3. Le rendu est vraiment beau
4. Les types de graphiques (pie chart, bar graph, bubble graph, timeline, …)
5. Le module d’export intégré (JPEG, PDF, SVG, PNG)
6. Cross navigateur (fonctionne en VML et en SVG)

1 – La facilité d’emplois

En effet Highcharts est très simple d’utilisation. On est en plein dans le plug&play ! Il suffit d’ajouter le script Javascript et la feuille de style pour commencer à apercevoir la puissance de l’outil. Vous verrez dans la suite de ce tutoriel complet sur Highcharts (partie 2/3) comment faire un premier graphique. Vous allez vite comprendre que ce n’est pas sorcier !

2 – Paramétrable à souhait avec un objet JSON

Le paramétrage de Highcharts s’effectue à l’aide d’un objet JSON.  Les paramètres sont assez larges et permettent de configurer tout ce qui peut être utile dans un graphique. Le type de graph, la légende, les échelles, les labels, les axes … On peut aussi ajouter des évènements comme onClick, onMouseOver …

3 – Le rendu est vraiment beau

C’est toujours une question de goût mais je dois dire que j’ai testé quelques librairies Javascript dans ce type et que celle-ci m’a tapé dans l’oeil. Les transitions au chargement du graphique sont vraiment belles et fluides. On peut également paramétrer les couleurs et tous les éléments des graphiques ce qui permet de l’adapter facilement dans sa charte graphique. Parlez-en à votre graphiste, il comprendra

4 – Les types de graphique

Vous retrouvez dans Highcharts de quoi faire n’importe quel type de graphique : Bar, pie, donut, scatter, bubble, line, stacked, spline, area, timeline. Il est aussi possible de combiner plusieurs type de graph sur un même canvas avec des axes différents, ce qui se révèle être l’arme ultime de la librairie. Un mode permet aussi d’updater un graphique en temps réel (Voir les exemples).

5 – Le module d’export intégré (JPEG, PDF, SVG, PNG)

Highcharts propose un module d’export (fait en java) qu’il est possible d’utiliser depuis une API (à partir de leur serveur) ou que l’on peut installer en local. Encore une fois, c’est vraiment simple, si l’on active le mode d’export, le graphique se verra ajouté un petit combo-box permettant de choisir le type d’export souhaité : JPEG, PDF, SVG, PNG. Cette fonctionnalité peut paraître futile, mais je peux vous assurer que si un jour on vous demande un export, c’est un sacré gain de temps de ne pas avoir à le coder.

6 – Cross navigateur (fonctionne en VML et en SVG)

Encore une fois Highcharts marque des points puisque la librairie fonctionne sur tous les navigateurs modernes à savoir Firefox, Chrome, Safari, Opera mais aussi Internet Explorer 6, 7, 8 et 9. Les navigateurs mobiles basés sur Webkit permettent aussi d’afficher ces graphs, ce qui inclue Ipod, Iphone et Ipad.

Conclusion :

Voilà les gros points forts de cette librairie. Je concède que pour les projets commerciaux (comprenez qui rapporte de l’argent sous n’importe quelle forme), il vous faudra acheter une licence. Tout ce que je peux dire c’est que je n’est pas hésiter à dépenser les quelques 200€ pour la licence développeur. On peut ensuite l’utiliser pour n’importe quel projet. Vu le travaille qu’il y’a derrière, c’est justifié et vu le temps que l’on gagne, ça en vaut le coup.

La bonne idée est aussi d’avoir permis l’utilisation pour les projets personnels ce qui permet de vous faire une idée avant de l’acheter.

Un petit point négatif tout de même, c’est la documentation. Elle n’est pas toujours très claire et des fois on doit chercher pas mal pour trouver ce que l’on souhaite. Donc si vous avez des questions, n’hésitez pas, je pourrais peut être vous renseigner.

Références :

• Le site officiel de Highcharts
• La documentation de Highcharts