tutoriel Article

Tutoriel site web multilingue avec WordPress et WPML – Partie 1 – Installation et configuration

Tutoriel site web multilingue avec WordPress et WPML – Partie 1 – Installation et configuration

Créer un site web multilingue est toujours un beau problème. En France comme au Québec, en tant que freelance, il n’est pas rare d’avoir à faire un site web en plusieurs langues. J’ai donc décidé de faire un tutoriel qui portera sur comment utiliser WordPress et WPML pour créer un site multilingue. Il sera composé de 3 parties distincte. WPML est LE plugin à utiliser pour les sites multilingues. Même si payant (peu cher pour le service rendu à mon avis), ceci assure un suivi du plugin avec une équipe performante.

  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 :

Window_et_Langues_‹_Fabline_—_WordPress

Window_et_Langues_‹_Fabline_—_WordPress 2

 

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 :

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 !

http://hebergementsitewebquebec.com/comment-mettre-site-en-ligne/

Tutoriel pour mettre son site en ligne

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 faite 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

Produire un diaporama qui fait rêver avec Iphoto

Produire un diaporama qui fait rêver avec Iphoto

Il s’agit aujourd’hui d’un article concernant les utilisateurs de Mac. Je vais vous donner ici un petit tutoriel pour gérer votre bibliothèque de photos et générer et partager sur Youtube un diaporama de qualité avec le logiciel Iphoto.

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!

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.