css 4 design » Traduction http://css4design.com Le blog de l'intégrateur web Sun, 05 Feb 2012 18:10:56 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 WordPress — Chaines de caractères à traduire vs. variables ? http://css4design.com/wordpress-chaines-de-caracteres-a-traduire-vs-variables http://css4design.com/wordpress-chaines-de-caracteres-a-traduire-vs-variables#comments Sun, 05 Feb 2012 18:07:20 +0000 Bruno Bichet http://css4design.com/?p=11391

Dans WordPress, les marqueurs de modèle (tags) permettent de personnaliser le contexte en affichant le titre de l’article, l’auteur, la date de publication, la catégorie, les tags, les descriptions, etc. Toutefois, l’intégrateur WordPress a parfois besoin d’ajouter des chaines de caractères qui ne sont pas prévues dans le modèle de données. Il peut s’agir d’un en-tête de section, d’un châpo, ou de tout autre élément sorti de votre imagination.

Les solutions ne manquent pas :

Dans le cadre de WordPress Basics, c’est cette dernière solution que j’ai mise en oeuvre : 

<header>
    <hgroup>
        <h1 class="section-title"><?php _e( 'Do you want to know more?', 'basics' ); ?></h1>
        <h2 class="section-description"><?php _e( 'Find here all the latest news about Basics', 'basics' ); ?></h2>
    </hgroup>
</header>
Ces fonctions d’internationalisation ne sont pas réservées pour traduire des textes d’une langue vers une autre ; on peut très bien les utiliser pour adapter des chaines de caractère génériques. Pour modifier ces chaines de caractère, il suffira de les traduire grâce à Poedit.

D’après l’article Avoid variables, create strings: they will return the favor paru initialement sur WordPress Basics.

Articles sur le même sujet

flattr this!

]]> http://css4design.com/wordpress-chaines-de-caracteres-a-traduire-vs-variables/feed 0 Version française pour Basics 0.2.4.1 http://css4design.com/version-francaise-pour-basics-0-2-4-1 http://css4design.com/version-francaise-pour-basics-0-2-4-1#comments Fri, 27 May 2011 05:56:33 +0000 Bruno Bichet http://css4design.com/?p=10383

J’ai le plaisir de vous annoncer que Basics 0.2.4.1 est désormais accompagné d’une version fr_FR réalisée par Wolforg. Il s’agit d’une archive .zip qui contient le fichier de traduction basics_0-2-4-1.pot accompagné des fichiers fr_FR.po et fr_FR.mo. Le fichier .pot est un simple fichier texte qui contient les chaines à traduire. Le fichier .po vous permettra d’adapter facilement cette traduction à vos besoins (y compris du français vers le français). Quant au fichier .mo, il est généré automatiquement chaque fois que vous enregistrez le fichier .po depuis le logiciel Poedit, par exemple.

Le fichier fr_FR.mo est interprété par WordPress pour afficher les chaines de caractère traduites, en fonction de la langue spécifiée lors de l’installation initiale de WordPress ou après avoir modifié le paramètre define('WPLANG', 'fr_FR'); du fichier wp_config.php, après coup.

Je donnerais plus de détails sur l’internationalisation d’un thème WordPress lorsque j’arriverai à l’article «I comme internationalisation». En attendant, il suffit de décompresser l’archive et de faire glisser le dossier /languages dans le dossier du thème, si vous l’avez déjà installé. Sinon, Basics 0.2.4.1, déjà disponible au téléchargement, contient d’ores et déjà les fichiers de langue fr_FR à jour.

→ Retrouvez Wolforg sur WordPress Traduction.

Articles sur le même sujet

flattr this!

]]> http://css4design.com/version-francaise-pour-basics-0-2-4-1/feed 2 Un blog WordPress multilingue avec WPML Multilingual CMS http://css4design.com/un-blog-wordpress-multilingue-avec-wpml-multilingual-cms http://css4design.com/un-blog-wordpress-multilingue-avec-wpml-multilingual-cms#comments Sat, 25 Jul 2009 23:50:47 +0000 Bruno Bichet http://www.css4design.com/?p=3348

WPML Multilingual CMS est un plugin pour WordPress qui transforme n’importe quel blog WordPress ou WordPressMu en site multilangue. Ce plugin est proposé par onthegosystems spécialisé dans la photo numérique et qui propose également le service ICanLocalize pour la traduction de votre site web. WPML.org vous accompagnera dans le paramétrage et l’utilisation du plugin pour profiter au mieux des nombreuses fonctionnalités de WPML accessibles depuis l’administration de WordPress.

N’ayant pas dans l’immédiat besoin d’un site multi-langues, je me suis intéressé aux fonctions qui améliorent l’expérience utilisateur (UX) et qui permettent d’avoir des liens toujours à jour avec Sticky Links malgré les changements éventuels d’URL…

En effet, en plus de permettre d’avoir un blog ou un site web en plusieurs langues, WPML est probablement le plugin qui manquait pour faire de WordPress un CMS à part entière avec notamment des fonctions de navigation bien pensées auparavant disponibles dans le plugin CMS Navigation.

Navigation principale et secondaire (CMS Navigation reloaded)

  • Menu déroulant avec pages et sous-pages facilement personnalisables en CSS via un générateur de css pour le menu déroulant). Il suffit de copier la fonction ci-dessous dans votre template : `<?php do_action(‘icl_navigation_menu’); ?>`
  • Fil d’ariane (breadcrumb trail) pour permettre au visiteur de savoir où il en est dans sa navigation avec la fonction : `<?php do_action(‘icl_navigation_breadcrumb’); ?>`
  • Navigation secondaire composée des sous-pages de la page parente avec mise en évidence de la page en cours. Cette fonction est également disponible sous forme de widget pour l’ajouter facilement dans la barre latérale. `<?php do_action(‘icl_navigation_sidebar’); ?>`

Sticky Links

Avec Sticky links, WPML peut conserver l’intégrité de vos liens internes (les billets qui sont liés entre eux) malgré les modifications ultérieures de l’URL d’origine. Au lieu de d’enregistrer le permalien, Sticky links stocke le numéro de la page ou du billet au lieu du permalink. Ca peut sembler inutile, mais dans la vie d’un blog, il arrive que l’on change l’URL d’une page ou d’un billet pour s’adapter à l’air du temps ou pour optimiser le référencement. Sticky links vous évitera de modifier les liens internes à votre site manuellement ou en faisant des copiés-collés dans la base de données.

Traduction des billets

Traduction par vos soins

Pour traduire un billet, sélectionnez la langue dans le champs situé sous l’édition du billet original et cliquez sur Add (pour ajouter une traduction). Ensuite, rédigez à nouveau votre billet dans la langue que vous avez choisie. Tout se passe dans le même environnement que pour la version originale de sorte que vous pourrez traduire les tags, les catégories, etc.

D’un point de vue technique, vous pourrez choisir d’avoir un répertoire par langue comme http://domain.tld/de/ pour les articles traduits en Allemand (vos permalink doivent être personnalisés) ou en query string http://domain.tld?lang=de. Le plugin propose la fonction pour insérer un menu déroulant pour permettre au visiteur de choisir la langue de son choix. Ce menu dérouland existe aussi sous forme de widget à glisser-déposer dans votre barre latérale.

Traduction par des professionnels

A l’installation, vous pourrez choisir d’activer l’option pour faire des tests ou directement pour faire appel aux services des traducteurs avec la possibilité d’entrer en contact avec votre interlocuteur. Je ne suis pas très au courant des pratiques en matière de traduction, mais avec WMPL tout est fait pour lisser le workflow. Grosso modo : il faut définir la langue par défaut à partir de laquelle les articles seront traduits par des professionnels pour la modique somme de $0,07 (env. 0,05€) par mot si vous activez le service en question qui reste optionnel.

En bref

Au départ ce billet a commencé par un tweet comme les autres, puis comme une revue de presse pour finir peu à peu comme ce qui peut ressembler à une revue complète, ce qui est loin d’être le cas.

Je vous invite à tester ce plugin très prometteur, d’autant plus que l’équipe de développement semble motivée et réactive, notamment à travers une documentation dense mais claire et un compte Twitter wpml pour assurer le Quick support for the WordPress Multilingual plugin.

Quelques liens

Articles sur le même sujet

flattr this!

]]> http://css4design.com/un-blog-wordpress-multilingue-avec-wpml-multilingual-cms/feed 25 Goopilation — Les blogs officiels de Google traduits en français http://css4design.com/goopilation-les-blogs-officiels-de-google-traduits-en-francais http://css4design.com/goopilation-les-blogs-officiels-de-google-traduits-en-francais#comments Mon, 18 Aug 2008 09:06:20 +0000 Bruno Bichet http://www.css4design.com/?p=1018

Les services lancés par Google sont pour la plupart accompagnés d’un blog qui permet aux équipes d’informer les utilisateurs. Avec plus de 60 blogs — le plus souvent en anglais — Google est difficile à suivre. Heureusement Goopilation propose la traduction des blogs officiels de Google en français. Voici la liste de la soixantaine de blogs concernés :

Blogs Google

Ca fait de la lecture, non ?

Articles sur le même sujet

flattr this!

]]> http://css4design.com/goopilation-les-blogs-officiels-de-google-traduits-en-francais/feed 4 5 règles simples pour améliorer l’affichage de vos textes http://css4design.com/5-regles-simples-pour-gerer-l-affichage-de-votre-texte-dans-vos-mises-en-page http://css4design.com/5-regles-simples-pour-gerer-l-affichage-de-votre-texte-dans-vos-mises-en-page#comments Fri, 10 Aug 2007 00:30:30 +0000 Bruno Bichet http://www.css4design.com/blog-reloaded/?p=112

Après avoir passé en revue les thèmes WordPress dans le cadre du SDC, j’ai voulu lister les erreurs les plus communes sous la forme d’un billet sur les 11 erreurs à faire pour être recalés à un concours de webdesign… Mais, il se trouve que parfois le hasard fait bien les choses : juste avant de fermer mon agrégateur pour un repos bien mérité, je suis tombé sur un titre racoleur. Et là, impossible de résister à la lecture et à l’envie de traduire en direct live cette profession de foi, Alpha et Omega pour tout **webdesigner qui se respecte (et qui respecte ses lecteurs !). Ce billet aurait pu s’intituler : Lisibilité, ce qui va sans dire, va mieux en le disant. Mais c’était sans compter le côté obscur de la force qui m’a soufflé un titre bien plus efficace ;)

La plupart des sites web sont remplis de textes trop petits pour être lus correctement. Pourquoi ? Il n’y a aucune raison particulière, juste une stupide erreur collective qui a commencée lorsque la résolution des écrans était vraiment faibles. Donc :

Ne nous demandez pas de spécifier nous-même la taille de la police.
Nous ne voulons pas modifier les préférences de notre navigateur chaque fois que nous visitons un site web.
Ne nous dites pas que les pages encombrées sont plus agréables à lire.
Les sites web remplis jusqu’à la gueule ne sont pas beaux, ils puent. Remplir les pages à tout prix n’a jamais aidé l’ergonomie. C’est la paresse qui pousse ces concepteurs à nous bombarder d’informations inutiles. Nous voulons que vous réfléchissiez pour sélectionner ce qui peut nous intéresser. Nous ne voulons pas faire le boulot à votre place.
Ne nous dites pas que faire défiler une page *saimal*.
Parce qu’alors tous les sites web sont nuls. Ils n’y a rien à reprocher aux longues pages. Rien du tout. De même qu’il n’y a rien de mal à tourner les pages d’un livre.
Ne nous dites pas que le texte n’est pas important.
95% de ce qui importe dans le webdesign est typographie.
Ne nous demandez pas de porter des lunettes.
Plutôt que d’avoir les yeux sur l’écran, nous préférons continuer la lecture confortablement assis dans une position relax.

Cinq règles simples à appliquer pour améliorer l’harmonie visuelle de vos pages web

  1. Corps standards pour les longs textes.

    Le corps du texte que vous êtes en train de lire n’est pas gros. Il s’agit de la taille par défaut définie par votre navigateur. C’est ce que nous voulons pour vous.

    Nous ne voulons pas cliquer sur des boutons pour avoir un texte plus ou moins grand. Nous ne voulons pas changer nos préférences. Nous voulons juste poursuivre notre lecture. Nous voulons que vous vous adaptiez à nos réglages, pas que vous soyez à côté de la plaque.

    C’est vrai qu’il n’est pas facile de créer un bon design avec les tailles par défaut ; mais cette difficulté vous guidera pour proposer un site plus clair et plus simple. Faire compliqué n’est pas si difficile, faire simple demande un peu plus de rigueur. Si la taille par défaut surprend au début, très vite vous ne voudrez plus voir de tailles inférieures à 100% ou 1em pour le texte principal : les concepteurs des navigateurs n’ont pas choisis cette taille par hasard !

  2. Des blancs tournants.

    Laissez respirer votre texte. Utiliser l’espace pour structurer un design n’est pas une option, c’est une question de goût. Aérer le texte réduit le niveau de stress comme il permet de se concentrer sur le fond. Inutile de forcer la dose. Cet espace blanc qui agrémente votre design n’est pas un effet de bord, c’est une conséquence logique d’un design fonctionnel. Qui a dit que les sites web devaient être chargés à bloc ?

    La largeur d’une colonne n’est pas seulement une question de design ou de format. La largeur d’une colonne devrait être proportionnelle à la taille de la police. Une largeur trop importante fatigue les yeux, tandis que les colonnes trop étroites perturbent le lecteur en obligeant le regard à des allers-retours trop rapides. » (Josef Brockmann, Grids Systems)

    Assurez-vous que la longueur des lignes n’est pas trop importante et que vous avez suffisamment de place de chaque côté pour la gymnastique des yeux pendant la lecture. Rappelez-vous que nous ne voulons pas ajuster la taille des caractères ou la résolution de l’écran : nous désirons seulement prendre connaissance du contenu. A cet égard, les colonnes extensibles sont une bonne chose ; les lignes qui n’en finissent plus, c’est le mal.

    La règle est simple : pas plus de 10 à 15 mots par ligne. S’il s’agit d’un design liquide – et si le corps est à 100% – une taille de colonne à 50% devrait le faire pour la plupart des résolutions utilisées.

  3. L’interlignage : ami ou ennemi ?

    Voici ce que les spécialistes de la lecture nous disent :

    Un interlignage trop faible ralenti la lecture parce que le haut et le bas de la ligne est balayé en même temps par le regard qui ne peut focaliser sur deux éléments en même temps. C’est une perte d’énergie inutile. C’est d’ailleurs la même chose pour les textes dont l’interlignage est trop important.

    L’interlignage par défaut des navigateurs est trop faible. En augmentant la hauteur de ligne de 140%, les textes deviennent tout de suite plus lisibles.

  4. Contraste des couleurs.

    Ce qui va sans dire, va mieux en le disant, mais si vous pensiez avoir tout bon avec ce qui suit :

    • texte gris clair sur un fond encore plus clair,
    • texte argenté sur un fond blanc comme neige,
    • texte gris sur fond jaune,
    • texte jaune sur fond rouge,
    • texte vert sur fond rouge,
    • etc.

    …alors vous n’êtes pas un *webdesigner*, vous en avez juste l’air. Si vous persistez dans cette voie, vous devez savoir que jamais personne ne sera capable de lire ce que vous avez à dire. Arrêtez le massacre et regardez plutôt ce que vous faites : à l’écran, un contraste trop important (texte noir sur fond blanc) n’est pas l’idéal, car le texte commence à scintiller. L’idéal est à chercher du côté des valeurs suivantes : texte #333 sur fond #fff.

  5. Pas d’images à la place du texte.

    Nous voulons effectuer des recherches sur la page que nous lisons, copier du texte, jouer avec le curseur et sélectionner du texte. Remplacer du texte par des images peut sembler attrayant, mais le web n’est pas fait pour ça. Il s’agit avant tout de communication, d’information ; et l’information a besoin d’être lisible, utilisable, améliorée, citée et envoyée. Point barre.

    Si vous n’êtes pas capable de faire en sorte que votre site web soit cool sans transformer les textes en images, j’ai bien peur que vous soyez parti pour recommencer depuis le début.

Dites-le haut et fort.

Si vous voulez des sites web plus lisibles, faites comme moi, faites un lien vers cette page pour que tout le monde sache de quoi il retourne. Si vous faites cet effort, je serais heureux de vous mettre en haut de la liste, sinon, vous vous retrouverez tout en bas avec un rel="nofollow" ^__^

Comment participer ?

Envoyez un email à oliver[at]informationarchitects.jp avec le lien menant à votre billet, plus quelques lignes à propos de votre site.

Si votre page est OK, vous apparaitrez sur cette page, que le design de votre page me plaise ou non. Sauf bien sûr, s’il s’agit de porno, de spam ou de politique.

PS : Si vous avez de la place dans un billet n’hésitez pas à faire passer le message (OK, les chaines sur internet, saimal). Si un élément de cette « craduction » vous semble perfectible, n’hésitez pas à me faire parvenir vos impressions afin que j’améliore ce texte qui pourra ainsi gagner ses galons de « traduction » ^__^

Articles sur le même sujet

flattr this!

]]> http://css4design.com/5-regles-simples-pour-gerer-l-affichage-de-votre-texte-dans-vos-mises-en-page/feed 27