English version available

Ce n’est pas une fonctionnalité native de WordPress, heureusement l’extension gratuite qTranslate existe. La simple activation de l’extension ne fera malheureusement pas tout, il va falloir aller plus loin que cela.

Les avis des utilisateurs sur qTranslate sont assez mitigés, car une majorité d’entre eux l’installe en espérant n’avoir rien (ou quasiment rien) à configurer. Et souvent, ils se plaignent quand ils se rendent compte que ça ne répond pas à leurs attentes (et en profite au passage pour donner une mauvaise note).

WordPress évoluant en permanence avec des milliers d’extensions disponibles, il est impossible de réaliser une extension multilingue parfaite pouvant tout supporter au biais d’une interface unique, tout ceci sans avoir un seul problème de compatibilité. Ce serait trop beau, d’autant plus que je rappelle que qTranslate est gratuit.

Un thème et des extensions multilingues sinon rien

Pour commencer, si votre thème n’est pas lui-même multilingue (c.-à-d. livré avec plusieurs fichiers de langues et supportant le passage de l’un à l’autre), ce n’est même pas besoin d’aller plus loin. Deux choix s’offrent à vous:

• Soit changer de thème par un plus récent gérant le multilingue
• Soit rendre votre thème multilingue (si c’est votre thème, vous devriez savoir le faire et rentrer dans votre code, même si cela prendra un peu de temps).

Aussi, si vous utilisez des dizaines d’extensions « exotiques », il y a fort à parier que vous allez rencontrer des problèmes de compatibilité avec qTranslate. Je vous conseille de vous limiter à une quinzaine d’extensions parmi les plus utilisées. C’est en particulier vrai pour les extensions indispensables dans le sens où votre site ne peut fonctionner bien si vous les désactivez.

Une extension réputée et de préférence bien notée (cela va de pair normalement) permettra de vous assurer:

• Qu’elle est bien suivie (mise à jour de versions régulière, au fur et à mesure des nouvelles versions de WordPress)
• Que vous aurez un support suffisant (il y a surement un utilisateur qui a rencontré le même problème que vous)
• Qu’elle est multilingue. Rendre une extension multilingue est envisageable, mais si c’est évitable, alors autant s’en passer…

Vous pouvez consulter la liste des extensions que j’utilise, elles sont toutes fonctionnelles avec qTranslate et sont, pour la plupart, connues et plutôt bien notées.

Si votre thème et vos extensions sont multilingues, vous verrez que le changement de langue avec qTranslate impactera bien tout cela. Par exemple, l’interface de l’extension Jetpack ou le tableau de bord administrateur WordPress suivront le changement de langue.

Gestion des traductions depuis le tableau de bord WordPress

La gestion des articles est bien intégrée avec qTranslate. Vous aurez autant de champs que de langues choisies pour le titre et le contenu des articles. Même chose pour les catégories et les mot-clés.
qTranslate vous permet d’activer autant de langues souhaitées. Dans mon cas, j’ai activé l’anglais et le français. J’ai donc tous les champs traduisibles en double.

Ecrire un article avec qTranslate activé

Si la majorité des informations sont traduites de manière automatique, ce n’est pas le cas pour toutes les informations. Notamment celles déjà existantes que j’avais dû remplir au début lors de la création du blog.
Je peux utiliser un tag fourni par qTranslate pour ajouter mes propres traductions sur ces informations, sous la forme: [:code_lang_1]Mon texte en langue 1[:code_lang_2]Mon texte en langue 2.

Par exemple, voici la nouvelle valeur pour le slogan du site qui s’affiche en haut:

Adapter le slogan du site en fonction de la langue

De la même façon, il faut modifier autant que possible les titres, les descriptions de tous les textes qui apparaissent sur le site et qui ne sont pas traduit. Voici une liste non exhaustive (dépendante des extensions que j’utilise):

• Le slogan du site
• Les titres de certains widgets
• La description de chacun des liens de site
• L’affichage d’une ligne sur l’auteur dans le flux RSS (WordPress SEO)
• Le texte utilisé dans le compteur de vue (WP-PostViews)
• Le texte utilisé pour le navigateur de page (page précédente, suivante, dernière…) (WP-PageNavi)
• Le titre et le texte par défaut pour les articles similaires (Yet Another Related Posts Plugin – YARPP)

Si vous utilisez l’extension Contact Form 7, pensez à créer vous-même autant de formulaires de contact que votre site supporte de langues.

Gestion avancée des traductions (code source)

Toutes les modifications et petites améliorations possibles depuis l’interface d’administration étant terminées, vous allez vite vous rendre compte qu’il reste encore quelques petites choses à améliorer pour rendre votre site complètement multilingue.
Dans ce cas, il n’y a plus d’autre choix possible que de se plonger dans le code PHP et de modifier manuellement quelques fichiers de WordPress, de votre thème ou même de certaines extensions. Par exemple:

• La prise en compte de la langue lors de la construction du lien vers les flux RSS
• L’ajout du sélecteur de langue qTranslate dans le header du thème
• L’affichage d’images différentes dans le thème en fonction de la langue
• La prise en compte de la langue dans les extensions telles que Shadowbox, List category posts, WordPress SEO, Disqus, Social media icons…

Pour cette dernière partie, il n’y a pas de secret, il faut modifier le code à la main en appelant des fonctions disponibles quand qTranslate est activé.
Voici un bout de code pour récupérer la langue et setter un texte différent suivant le cas.

if(function_exists('qtrans_getLanguage')) {
	$lang = qtrans_getLanguage();
	if ($lang == 'en')
		$text = 'anglais';
	else
		$text = 'francais';
}

Attention, quand vous commencez à modifier le code, sachez qu’une mise à jour écrasera vos modifications. Pensez donc bien à noter TOUTES les modifications effectuées avant de mettre à jour WordPress, votre thème ou une de vos extensions. Si cela devient trop compliqué à maintenir, il peut être intéressant de prévoir un système pour automatiser l’intégration de vos modifications après une mise à jour. A vous de voir.

Dans bien des cas, vous l’aurez compris, vous aurez besoin de rentrer vous-même dans le code des extensions incompatibles. C’est un passage obligé pour résoudre certains problèmes, mais aussi pour peaufiner au maximum le changement de langue afin de rendre l’expérience utilisateur la plus complète possible.

Avec le temps, vous allez finalement vous compte que le plus dur et fastidieux n’aura pas été de rendre votre site multilingue, mais de traduire tous vos articles dans les langues que vous supportez!

 English version available

Fin décembre, je reçois une tablette Nexus 7 pour Noël, à moi les joies du tactile! Jusqu’à présent, j’avais un peu honte de dire être informaticien et de n’avoir ni smartphone sur moi ni tablette à la maison. J’ai quand même survécu jusqu’en 2013, et ce, sans séquelle ou traumatisme psychologique…

Le développement d’applications pour les appareils mobiles m’a toujours un peu attiré, mais je ne m’étais jamais lancé. Sans avoir moi-même un appareil Android, l’intérêt est tout de suite limité.

Après avoir fouillé les moindres recoins de la Nexus, exploré tous les paramètres disponibles sous Android, installé des dizaines d’applications (vous comprenez mieux maintenant le sujet de mon précédent article), j’ai eu besoin d’aller plus loin.

Début janvier, heureuse coïncidence, je vois le cours « Creative, Serious and Playful Science of Android Apps » disponible sur Coursera, la plateforme d’e-learning MOOC. Je me dis pourquoi pas? Alors je me lance, le cours avait débuté il y a 5 semaines, mais il était encore temps grâce aux 2 semaines de pause prévues pour les vacances de Noël, un peu chanceux sur ce point je dois avouer. En travaillant d’arrache-pied, je parviens finalement à rattraper le retard et enchaine 4 semaines en une (bon entre ça et le travail habituel, j’ai mis sur pause ma vie perso quand même). Le cours est relativement simple et s’adresse aux débutants, ceux qui ne sont pas forcément développeurs, qui n’ont donc jamais écrit une ligne en Java ou même vue du code HTML de leur vie. Ce n’est pas très complexe, mais mine de rien, j’apprends beaucoup de chose sur Android. Le professeur Lawrence Angrave est juste excellent, il réalise même des vidéos quand il est en vacances à Antigua Guatemala, il invite des intervenants externes comme une jeune chanteuse pendant tout une semaine, donne des détails sur l’informatique d’hier, bref pleins de choses amusantes qui donnent une vraie interactivité au cours.

En fin de semaine, il y a bien sûr les traditionnels assignments (devoirs) à soumettre, le moment où il faut se lancer dans le code et mettre en pratique. Il y a 2 applications à réaliser, la première app suit généralement des instructions bien définies; la deuxième est libre, le candidat n’est plus limité dans son champ d’action, en fait il est surtout limité par ses connaissances. Venant du monde Java, le développement Android n’est pas trop difficile à appréhender. Encore une fois, les cours sont très bien expliqués, pas trop rapide, on apprend vite.

Au fil des semaines, je me dis que le développement Android, c’est quand même pas mal, c’est même plutôt chouette! L’environnement de développement est bien fait, les émulateurs pour tester dans les différentes résolutions d’écran fonctionnent plutôt bien. Il faut tout de même une bonne machine, car lancer l’environnement de développement et des émulateurs Android nécessite une certaine puissance. Le multilingue géré nativement est bien pensé. Contrairement au Web et aux applications pour desktop, c’est finalement bien plus simple, vous êtes bien guidé et bien encadré. La documentation officielle est un vrai bonheur et vous trouverez toujours des réponses à vos questions sur Stackoverflow lorsque vous bloquez. L’avantage du développement Android, c’est qu’il n’y a pas de centaines de frameworks à connaitre, à maitriser ou à devoir comparer et choisir. En plus, sachant que la majorité des personnes ont maintenant un appareil Android, les possibilités sont très grandes!

Cependant, je lui vois quand même un défaut: la création des écrans. Elle se fait grâce à des fichiers layout.xml. Il y a plusieurs fichiers en fonction des tailles et résolutions d’écran, mais aussi de l’orientation (mode portrait ou paysage). Vous pouvez vite vous retrouver avec pas mal de fichiers à gérer en parallèle si vous voulez une application qui soit propre sur tous les types d’écran, du 4 au 10 pouces. Jusque-là ok, mais c’est la création d’un layout en elle-même qui est vite laborieuse… rien que pour aligner 2 boutons sous un tableau, vous avez besoin de temps! Les balises de position des éléments se ressemblent et il y a en beaucoup, vous ne savez jamais laquelle mettre. Une galère qui arrive rapidement à vous faire regretter le bon vieux code HTML/CSS, même avec un peu de Javascript. En tout cas, c’est mon ressenti.

Pour le second assignment Coursera, je me lance dans ma deuxième application libre. Je réfléchis à quelque chose d’utile, quelque chose de motivant. La première était un écran avec quelques icones en favoris pour ouvrir son navigateur et afficher le site sélectionné. Bref, quelque chose de pas très compliqué, mais parfaitement inutile dans la réalité.

Finalement, ce sera une application pour naviguer sur CarmaBlog avec une vue adaptée pour les mobiles. Elle intègre les fonctionnalités actuelles du site, mais codées en natif Android (dans le sens accessible depuis le menu Android et non depuis les pages Web).

C’est ainsi que je vous présente CarmaBlog, ma première « vraie » application Android. Elle est déjà en version 1.3.1 suite à l’ajout de fonctionnalités et la correction de quelques bogues.
Je ne l’ai pas mise sur Google Play, c’est un peu dommage de payer des frais d’inscription pour une application qui va être installée par un nombre très restreint d’utilisateurs (je n’en doute pas).

Pour installer une application en dehors du Google Play, c’est très simple. Allez dans les options de votre appareil. Sélectionnez « Paramètres » -> « Sécurité » ou « Applications » -> Puis cochez « Sources inconnues ».

Pour installer CarmaBlog, téléchargez le fichier « apk » en cliquant sur l’image ou le lien ci-dessous, puis ouvrez-le pour lancer l’installation, c’est tout. Il est conseillé de désactiver l’option une fois que vous aurez fini l’installation (une simple précaution).

Voici les fonctionnalités:

• Les pages sont épurées de leur contenu afin d’accéder à l’essentiel sur une application mobile (le contenu des articles)
• Les pages déjà vues sont mises en cache pour une navigation plus rapide sur les pages déjà chargées
• La langue des pages (français/anglais) peut être changée depuis le menu
• Il est possible de partager un article sur les réseaux sociaux depuis le menu
• Un sous-menu permet d’accéder rapidement aux différentes catégories d’articles
• La fonction de recherche sur le site est également intégrée au menu
• Tout comme le site, l’application est disponible en français et en anglais

Ajouter CarmaBlog 1.3.1 en téléchargeant l’apk

L’application n’est peut-être pas parfaite, mais je suis plutôt satisfait pour un début.

Dans les grandes lignes, voici quelques explications techniques. L’application est constituée d’une Activity unique qui utilise le composant WebView qui prend tout l’écran (je n’ai donc pas eu besoin de créer des fichiers layout.xml). Je récupère le contenu des pages du site grâce à la librairie jsoup que j’affiche ensuite dans le contenu de la WebView. La récupération de la page se fait de manière asynchrone en utilisant la classe AsyncTask. Le système de cache est assez rudimentaire, il s’agit d’une simple liste que je vide au fur et à mesure quand l’utilisateur appuie sur le bouton retour (histoire d’éviter de trop consommer de mémoire).

Si vous êtes intéressé, le code complet est disponible sur Github. Par exemple, l’intégration de la recherche et le partage des articles peut vous intéresser, car j’utilise les composants très simples et natifs Android. N’hésitez pas à le forker pour l’utiliser pour votre propre site ou me signaler des idées d’amélioration. J’ai commenté au maximum le code et externalisé le code spécifique à CarmaBlog dans des classes utilitaires et des classes de constantes (en général c’est le cas, pas pour tout je l’avoue).

Est-ce que je vais continuer dans cette branche et approfondir mes connaissances en Android? Est-ce-que je vais faire une nouvelle application? L’avenir me le dira.

Pour l’instant, le cours n’est pas terminé et j’en suis un autre en parallèle (et oui!), « Programming Mobile Applications for Android Handheld Systems », ce second cours s’adresse davantage aux développeurs. Le cours a commencé le 21 janvier, il est donc encore temps de vous inscrire!

En tout cas, j’invite les personnes intéressées de près ou de loin par le développement Android, mais qui hésitent encore, d’essayer, de jeter un coup d’oeil aux cours, aux tutoriels sur internet. Pour le premier cours de Lawrence Angrave, il est toujours possible de s’inscrire. Il est trop tard pour participer aux assignements et obtenir le certificat de complétion, mais cela vous permettra d’accéder à l’ensemble des vidéos.

N’hésitez pas à vous jeter à l’eau, même si elle peut paraitre un peu froide au début…