1. Installation et configuration
2. Traduction des articles, pages et custom post WordPress
3. Traduction des chaînes de caractère (texte en PHP (hardcodé) dans le thème ou les widgets)

Installation de WPML

L’installation de WPML est très simple, et vous pouvez l’ajouter à n’importe quel moment du développement d’un site. Voici les étapes à suivre :

• Aller sur le site de WPML : http://wpml.org/fr.
• Décider le plan que vous souhaitez prendre. il existe 3 plans différents. Si vous faites un site web complet en utilisant WordPress comme un CMS, si vous utilisez les « custom posts » et « custom taxonomy » vous devrez prendre le plan CMS multilingue à 79$.
• Une fois acheté vous allez pouvoir télécharger le plugin.
• Aller dans l’admin de votre WordPress puis dans le menu « Extensions » puis « Ajouter », cliquez sur Ajouter une extension et sélectionné l’archive que vous venez de récupérer.
• Une fois installé, vous verrez dans votre menu de gauche, un nouveau menu WPML.

Important : Si vous êtes développeur et que vous souhaitez utiliser le plugin WPML sur le site de vos clients, je vous encourage à prendre le plan CMS multilingue à vie.

Choisissez les langues du projet

Pour la configuration, c’est assez simple, il va vous falloir définir quelles langues vous souhaitez utiliser, quelle langue vous souhaitez par défaut, comment vous souhaitez ajouter visuellement le sélecteur de langue sur votre site et très important, la façon dont les URL vont fonctionner.

Voici une série d’images annotées qui vont vous aider à comprendre comment faire :

Choisir le format des URL pour les langues

Une fois les langues ajoutées au projet, vous devez spécifier la façon dont vous souhaiter que le système de langue fonctionne. Vous avez alors 3 choix :

1. Langues différentes dans les répertoires (http://domaine.com/en/)
2. Un sous-domaine différent pour chaque langue (http://en.domaine.com/)
3. Langue ajoutée dans un paramètre GET (http://domaine.com?lang=en)

Pour ma part, je conseille souvent le choix 1 qui est à mon avis le plus jolie à l’oeil mais aussi qui semble être le meilleur choix pour votre SEO.

Sélecteur de langue

La rubrique suivante vous propose de régler la façon dont le sélecteur de langue va s’afficher. Je ne suis vraiment pas fan de cette façon de faire, je ne me sers donc juste pas de ce composant. Voici ce que je fais à la place et qui me donne beaucoup plus de liberté au niveau du placement et de la forme. Vous pouvez copier ce bout de code dans votre fichier functions.php :

function icl_post_languages(){
  $langs = "";
  $languages = icl_get_languages('skip_missing=1');
  
  $i = 0;
  
  if(1 < count($languages)){
    foreach($languages as $l){
      if(!$l['active'])
        $langs .= '<li><a href="'.$l['url'].'">'.strtoupper($l['language_code']).'</a></li>';
      else {
        $langs .= '<li class="current"><a href="'.$l['url'].'">'.strtoupper($l['language_code']).'</a></li>';
      }
      
      if($i == 0) {
        $langs .= " | ";
      }
      
      $i++;
    }
    echo $langs;
  }
}

Vous pouvez bien entendu modifier ce code pour afficher le sélecteur de langue de la façon que vous souhaitez. Une fois prêt, vous pouvez appeler cette fonction dans votre thème, là où vous souhaitez voir apparaître le sélecteur. Vous pouvez aussi ajouter du CSS pour habiller ce code HTML selon vos besoins.

Conclusion

Si vous avez besoin d’aide à cette étape (installation et configuration), laissez un message dans les commentaires et j’essayerais de vous aider au maximum de mes connaissances. La suite de ce tutoriel suivra sous peu et nous verrons le moyen de traduire les articles, pages er custom post. À bientôt !

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)

Quels sont les problèmes qui se posent ? 

• Mon diaporama doit rester court pour être agréable à regarder.
• J’ai trop de photos en double ( les fameuses 10 photos du même paysage que vous avez prises).
• Je veux générer un diaporama avec uniquement les meilleures photos de mon évènement.
• Je veux garder mes photos en double pour mes archives personnelles.
• Comment partager facilement mon diaporama à tous mes amis

Effectivement, vous souhaitez éviter d’assomer votre public par des longueurs dû à des photos répétitives. Pour améliorer la qualité et captiver votre publique, vous devez limiter le nombre de photos. Il n’y a pas de règle mais je dirais que 100 photos (1 photo toute les 3 secondes pour un temps total de 5 minutes) semble correcte.

Masquez les photos non désirées dans Iphoto

Exemple : 

J’ai pris 5 photos de la patinoire sous tous les angles, je veux les garder pour archive (au cas ou) mais je ne souhaite pas les présenter dans le diaporama que je ferais voir à tout le monde. Pour ce diaporama, je veux montrer LA meilleure photo de la patinoire. 

Comment faire cela dans Iphoto ? C’est très simple, il faut utiliser la fonction de masquage.  Masquez les photos non désiré dans l’évènement. (Click droit sur une image ou une selection d’image & Masquer – c’est la croix jaune).

Dans le menu Présentation (Barre de menu en haut) vous pouvez décider d’afficher ou non les photos masquée en sélectionnant « Photos masquées ». Les photos masquées ne seront donc pas prise en compte par le diaporama.

Réglage de votre diaporama 

À cette étape vous allez générer un diaporama avec les réglages de votre choix. Choisissez le style, la musique et les réglages de défilement. Par défaut 1 photo toutes les 3 secondes est un bon réglages. (mais vous pouvez tester d’autres réglages). Pour la musique, Apple propose des musique libre de droit , mais vous pouvez aussi choisir une musique de votre librarie Itunes. Attention cependant Youtube est capable de bloquer une vidéo à cause du droit d’auteur.

Exportez votre diaporama au format video

Il est effectivement possible d’exporter le diaporama en cours au format video. Pour se faire, une fois les réglages de votre diaporama fini (étape ci-dessus), allez dans le menu Fichier (Barre de menu en haut) puis Exporter. Cliquez sur l’onglet Diaporama puis choisissez la qualité de la vidéo que vous désirez. Pour ma part j’utilise le format « grand », car la plupart du temps je vais faire voir cette video sur mon laptop ou l’envoyer sur Youtube. Avec ce format la qualité reste très bonne.

Envoyer votre video sur Youtube

Une fois votre diaporama exporté en video, il est pas mal pratique d’envoyer la video sur Youtube (ou autre gestionnaire de video en ligne, Vimeo, Dailymotion). Pourquoi? Pour partager facilement votre diaporama en envoyant juste un lien menant vers Youtube à vos amis / famille.

Pour se faire, ouvrez votre diaporama au format video avec Quicktime Player. Aller dans le menu fichier (Barre de menu en haut) puis Partagez, choisissez Youtube (ou autre si désiré, mais cet article traîte de Youtube). Si c’est la première fois que vous utilisez cet fonctionnalité, il vous faudra renseigner votre compte Youtube (ou compte Google).

Si vous n’en avez pas, créez en un en allant ici.

Choisissez la catégorie de votre video, donnez un titre, entrez une description, choisissez des mots-clés (Balises). Laissez la case « Rendre cette vidéo personnelle » cochée. La vidéo va être envoyer sur Youtube et vous pouvez suivre la progression avec cette fenêtre : 

Gérer les permissions de la vidéo sur Youtube

Sur Youtube, allez dans votre compte puis « Gestionnaire de vidéos ». Cliquez sur « Modifier » près de la vidéo que vous avez créé à l’étape précédente puis sélectionnez « Infos et paramètres ». Une nouvelle page apparaît permettant de régler les droits de la vidéo à droite de la page. Sélectionnez : Non répertorié. La vidéo sera alors accessible aux gens à qui vous donnez le lien mais ne sera pas trouvable dans le moteur de recherche Youtube.

Le résultat en video

Voici donc le résultat de la video de mon diaporama sous Youtube. Pour l’exercice, j’ai pris quelques photos de ma vie quotidienne à Montréal. Photos pour la plupart prise avec mon Iphone.

[youtube]http://youtu.be/xvQ5vdhCCDw[/youtube]

Conclusion du tutoriel

J’espère que ce tutoriel vous sera utile! Si vous avez des questions, n’hésitez pas à les poser dans les commentaires ci-dessous. Aussi, si vous voyez comment améliorer le processus, n’hésitez pas à en faire part. Pour finir je dirais que ce tutoriel demande à bonne concentration environ 30 min. Si vous souhaitez partager vos diaporamas, n’hésitez pas.

Bonne création!

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.

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.