Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Internationalisation du
        Front


                           Yannick Croissant
        Paris Web 2010 – 14-16 octobr...
Présentation
         Yannick Croissant
• Développeur Front dans l’Agence
    Interactive de TF1
• S’occupe de toute la pa...
Internationalisation
Internationalisation
  du côté de l’intégrateur
Différents éléments
      concernés :
• Templates HTML
• Images
• CSS
• Javascript
Templates HTML
Utilisez les capacités de
        vos outils
CMS       Wordpress       __('Hello World')



Framework    Django     {% trans 'Hello World' %}



Language      PHP     ...
Tous utilisent la même
chose pour fonctionner
Gettext
Gettext

index.html    article.html   archives.html




             monsite.pot
CMS       Wordpress       __('Hello World')



Framework    Django     {% trans 'Hello World' %}



Language      PHP     ...
Générer le fichier .pot
•   Wordpress: i18n Tools
         http://codex.wordpress.org/I18n_for_WordPress_Developers


•   D...
Mes petits outils à moi

           AutoGetText




   http://github.com/Country/Utils
Mes petits outils à moi

           AutoGetText




   http://github.com/Country/Utils
Gettext

           monsite.pot




fr-FR.mo                 en-US.mo
Template source
<!DOCTYPE html>
<html lang="{% trans 'lang' %}">
 <head>
  <meta charset="utf-8" />
  <title>{% trans 'sit...
Site français
<!DOCTYPE html>
<html lang="fr-FR">
 <head>
  <meta charset="utf-8" />
  <title>Mon site</title>
[...]
Site anglais
<!DOCTYPE html>
<html lang="en-US">
 <head>
  <meta charset="utf-8" />
  <title>My Website</title>
[...]
Images
Vos images contiennent
  elles aussi du texte
Parlons découpe
Découpe
Découpe
•   Sprites
Découpe
•   Sprites
    • Horizontaux
Découpe
•   Sprites
    • Horizontaux
    • Verticaux
Découpe
•   Sprites
    • Horizontaux
    • Verticaux
    • Uniques
Découpe
•   Sprites
    • Horizontaux
    • Verticaux
    • Uniques
•   Formats
Découpe
•   Sprites
    • Horizontaux
    • Verticaux
    • Uniques
•   Formats
    • GIF
Découpe
•   Sprites
    • Horizontaux
    • Verticaux
    • Uniques
•   Formats
    • GIF
    • PNG8
Découpe
•   Sprites
    • Horizontaux
    • Verticaux
    • Uniques
•   Formats
    • GIF
    • PNG8
    • PNG32
Découpe
•   Sprites
    • Horizontaux
    • Verticaux
    • Uniques
•   Formats
    • GIF
    • PNG8
    • PNG32
    • JPEG
Découpe
•   Sprites
    • Horizontaux
    • Verticaux
    •   Uniques
•   Formats
    • GIF
    •   PNG8
    •   PNG32
   ...
Centralisez vos textes




   http://s.lnb.fr/lnb/file/assets/image/generic/titles.png
Centralisez vos textes
      (et surtout pas comme ça)




    http://www.olweb.fr/image/generic/menu.png
Centralisez vos textes
      (et surtout pas comme ça)




    http://www.olweb.fr/image/generic/menu.png
Conservez vos PSD
Conservez vos PSD
Conservez vos PSD
Conservez vos PSD
On peut commencer à traduire
On peut commencer à traduire

fr-FR
On peut commencer à traduire

fr-FR



en-US
On peut commencer à traduire

fr-FR



en-US


        Vos sprites doivent
          être identiques
              (enfin, ...
CSS
Eléments à traduire


• Peu de changements.
• On a déjà fait le plus gros du travail:
  templates et images.
.button {
    background:url(button-fr-FR.png) no-repeat -25px -30px;
    height:20px;
    margin:0 0 0 10px;
    width:12...
<!DOCTYPE html>
<html lang="en-US">
 <head>
  <meta charset="utf-8" />
  <title>My Website</title>
[...]
<!DOCTYPE html>
<html lang="en-US">
 <head>
  <meta charset="utf-8" />
  <title>My Website</title>
[...]
.button {
    background:url(button-fr-FR.png) no-repeat -25px -30px;
    height:20px;
    margin:0 0 0 10px;
    width:12...
fr-FR



en-US
<!DOCTYPE html>
<html lang="ar-AR" dir="rtl">
 <head>
  <meta charset="utf-8" />
  <title>‫/<ﺍﺧﺘﺒﺎﺭ‬title>
[...]
.button {
    background:url(button-fr-FR.png) no-repeat -25px -30px;
    height:20px;
    margin:0 0 0 10px;
    width:12...
Fonctionne partout
Fonctionne partout
      (Sauf sous IE6)
Si vous devez encore
    supporter IE6
Si vous devez encore
       supporter IE6
Utilisez des class sur votre <body>
<body class="lang-ar-AR dir-rtl">
Si vous devez encore
       supporter IE6
Utilisez des class sur votre <body>
<body class="lang-{% trans 'lang' %} dir-{% ...
Si vous devez encore
       supporter IE6
Utilisez des class sur votre <body>
<body class="lang-{% trans 'lang' %} dir-{% ...
Un ou plusieurs fichiers
        CSS ?
Un ou plusieurs fichiers
        CSS ?
• Dépend du projet.
Un ou plusieurs fichiers
        CSS ?
• Dépend du projet.
• 2 ou 3 langues: 1 seul fichier suffit
  généralement.
Un ou plusieurs fichiers
        CSS ?
• Dépend du projet.
• 2 ou 3 langues: 1 seul fichier suffit
  généralement.
• + de lan...
Un ou plusieurs fichiers
        CSS ?
• Dépend du projet.
• 2 ou 3 langues: 1 seul fichier suffit
  généralement.
• + de lan...
Dans le cas d’une division en plusieurs fichiers:
        Plus besoin d’utiliser le sélecteur sur l’attribut lang


global....
Javascript
De plus en plus de
contenu généré par
     Javascript
Mootools
MooTools.lang.set('fr-FR', 'Example', {
  helloWorld: 'Bonjour Monde'
});
MooTools.lang.set('en-US', 'Example', {
  helloW...
MooTools.lang.set('fr-FR', 'Example', {
  helloWorld: 'Bonjour Monde'
});
MooTools.lang.set('en-US', 'Example', {
  helloW...
MooTools.lang.set('fr-FR', 'Example', {
  helloWorld: 'Bonjour Monde'
});
MooTools.lang.set('en-US', 'Example', {
  helloW...
MooTools.lang.set('fr-FR', 'Example', {
  helloWorld: 'Bonjour Monde'
});
MooTools.lang.set('en-US', 'Example', {
  helloW...
MooTools.lang.set('fr-FR', 'Example', {
  helloWorld: 'Bonjour Monde'
});
MooTools.lang.set('en-US', 'Example', {
  helloW...
MooTools.lang.set('fr-FR', 'Example', {
  helloWorld: 'Bonjour Monde'
});
MooTools.lang.set('en-US', 'Example', {
  helloW...
MooTools.lang.set('fr-FR', 'Example', {
  helloWorld: 'Bonjour Monde'
});
MooTools.lang.set('en-US', 'Example', {
  helloW...
jQuery
• Pas de support natif
• Pas de support natif
• Plugin
• Pas de support natif
• Plugin: jQuery i18n de Bryan Berry
      http://github.com/bryanwb/jquery-18n
$.i18n['en-US']    = {
   strings: {
     helloWorld:   'Hello World'
   }
};
$.i18n['fr-FR']    = {
   strings: {
     he...
$.i18n['en-US']    = {
   strings: {
     helloWorld:   'Hello World'
   }
};
$.i18n['fr-FR']    = {
   strings: {
     he...
$.i18n['en-US']    = {
   strings: {
     helloWorld:   'Hello World'
   }
};
$.i18n['fr-FR']    = {
   strings: {
     he...
$.i18n['en-US']    = {
   strings: {
     helloWorld:   'Hello World'
   }
};
$.i18n['fr-FR']    = {
   strings: {
     he...
$.i18n['en-US']    = {
   strings: {
     helloWorld:   'Hello World'
   }
};
$.i18n['fr-FR']    = {
   strings: {
     he...
$.i18n['en-US']    = {
   strings: {
     helloWorld:   'Hello World'
   }
};
$.i18n['fr-FR']    = {
   strings: {
     he...
$.i18n['en-US']    = {
   strings: {
     helloWorld:   'Hello World'
   }
};
$.i18n['fr-FR']    = {
   strings: {
     he...
La votre
var i18n = {
    'en-US': {
        helloWorld: 'Hello World'
    },
    'fr-FR': {
        helloWorld: 'Bonjour Monde'
  ...
var i18n = {
    'en-US': {
        helloWorld: 'Hello World'
    },
    'fr-FR': {
        helloWorld: 'Bonjour Monde'
  ...
var i18n = {
    'en-US': {
        helloWorld: 'Hello World'
    },
    'fr-FR': {
        helloWorld: 'Bonjour Monde'
  ...
var i18n = {
    'en-US': {
        helloWorld: 'Hello World'
    },
    'fr-FR': {
        helloWorld: 'Bonjour Monde'
  ...
var i18n = {
    'en-US': {
        helloWorld: 'Hello World'
    },
    'fr-FR': {
        helloWorld: 'Bonjour Monde'
  ...
var i18n = {
    'en-US': {
        helloWorld: 'Hello World'
    },
    'fr-FR': {
        helloWorld: 'Bonjour Monde'
  ...
var i18n = {
    'en-US': {
        helloWorld: 'Hello World'
    },
    'fr-FR': {
        helloWorld: 'Bonjour Monde'
  ...
var i18n = {
    'en-US': {
        helloWorld: 'Hello World'
    },
    'fr-FR': {
        helloWorld: 'Bonjour Monde'
  ...
Mes petits outils à moi
          (2)
          AutoGetText JS




   http://github.com/Country/Utils
Mes petits outils à moi
          (2)
          AutoGetText JS




   http://github.com/Country/Utils
Organisation
Solution 1

<script src="js/framework.js"></script>
<script src="js/lang-{% trans 'lang' %}.js"></script>
<script src="js/...
Solution 2


<script src="js/global-{% trans 'lang' %}.js"></script>
Solution 2


<script src="js/global-{% trans 'lang' %}.js"></script>




global-fr-FR.js = framework.js + lang-fr-FR.js + ...
Résultat
<!DOCTYPE html>
<html lang="fr-FR">
 <head>
[...]
Résultat
<!DOCTYPE html>
<html lang="en-US">
 <head>
[...]
Merci !
    http://github.com/Country
                      *
    http://yannick.cr
    http://twitter.com/yannickc



   ...
Prochain SlideShare
Chargement dans…5
×

Internationalisation du Front

3 246 vues

Publié le

Aujourd'hui la quasi-totalité des CMS proposent des fonctionnalités d'internationalisation afin de réaliser des sites disponibles en plusieurs langues. Mais qu'en est-il du coté de l’intégrateur ? Celui-ci va aussi devoir internationaliser certaines images utilisées dans ses CSS, voir faire des changements de style suivant la langue qui sera affichée. Les fichiers javascript sont aussi concernés si ils sont amenés à générer du contenu textuel.

Cet atelier vous proposera de découvrir différentes méthodes afin d'organiser au mieux vos fichiers CSS, images et scripts javascript et de faciliter ainsi leur maintenance. Nous verrons aussi quels outils peuvent nous assister dans notre travail et ce que nous propose les frameworks javascript comme jQuery ou encore Mootools.

Publié dans : Technologie, Art & Photos
  • Soyez le premier à commenter

Internationalisation du Front

  1. 1. Internationalisation du Front Yannick Croissant Paris Web 2010 – 14-16 octobre 2010
  2. 2. Présentation Yannick Croissant • Développeur Front dans l’Agence Interactive de TF1 • S’occupe de toute la partie front de différents sites d’équipes sportives. •
  3. 3. Internationalisation
  4. 4. Internationalisation du côté de l’intégrateur
  5. 5. Différents éléments concernés : • Templates HTML • Images • CSS • Javascript
  6. 6. Templates HTML
  7. 7. Utilisez les capacités de vos outils
  8. 8. CMS Wordpress __('Hello World') Framework Django {% trans 'Hello World' %} Language PHP _('Hello World')
  9. 9. Tous utilisent la même chose pour fonctionner
  10. 10. Gettext
  11. 11. Gettext index.html article.html archives.html monsite.pot
  12. 12. CMS Wordpress __('Hello World') Framework Django {% trans 'Hello World' %} Language PHP _('Hello World')
  13. 13. Générer le fichier .pot • Wordpress: i18n Tools http://codex.wordpress.org/I18n_for_WordPress_Developers • Django: django-admin.py makemessages http://docs.djangoproject.com/en/1.2/topics/i18n/localization • PHP: xgettext http://gettext.sourceforge.net/ Etc...
  14. 14. Mes petits outils à moi AutoGetText http://github.com/Country/Utils
  15. 15. Mes petits outils à moi AutoGetText http://github.com/Country/Utils
  16. 16. Gettext monsite.pot fr-FR.mo en-US.mo
  17. 17. Template source <!DOCTYPE html> <html lang="{% trans 'lang' %}"> <head> <meta charset="utf-8" /> <title>{% trans 'site-title' %}</title> [...]
  18. 18. Site français <!DOCTYPE html> <html lang="fr-FR"> <head> <meta charset="utf-8" /> <title>Mon site</title> [...]
  19. 19. Site anglais <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <title>My Website</title> [...]
  20. 20. Images
  21. 21. Vos images contiennent elles aussi du texte
  22. 22. Parlons découpe
  23. 23. Découpe
  24. 24. Découpe • Sprites
  25. 25. Découpe • Sprites • Horizontaux
  26. 26. Découpe • Sprites • Horizontaux • Verticaux
  27. 27. Découpe • Sprites • Horizontaux • Verticaux • Uniques
  28. 28. Découpe • Sprites • Horizontaux • Verticaux • Uniques • Formats
  29. 29. Découpe • Sprites • Horizontaux • Verticaux • Uniques • Formats • GIF
  30. 30. Découpe • Sprites • Horizontaux • Verticaux • Uniques • Formats • GIF • PNG8
  31. 31. Découpe • Sprites • Horizontaux • Verticaux • Uniques • Formats • GIF • PNG8 • PNG32
  32. 32. Découpe • Sprites • Horizontaux • Verticaux • Uniques • Formats • GIF • PNG8 • PNG32 • JPEG
  33. 33. Découpe • Sprites • Horizontaux • Verticaux • Uniques • Formats • GIF • PNG8 • PNG32 • JPEG
  34. 34. Centralisez vos textes http://s.lnb.fr/lnb/file/assets/image/generic/titles.png
  35. 35. Centralisez vos textes (et surtout pas comme ça) http://www.olweb.fr/image/generic/menu.png
  36. 36. Centralisez vos textes (et surtout pas comme ça) http://www.olweb.fr/image/generic/menu.png
  37. 37. Conservez vos PSD
  38. 38. Conservez vos PSD
  39. 39. Conservez vos PSD
  40. 40. Conservez vos PSD
  41. 41. On peut commencer à traduire
  42. 42. On peut commencer à traduire fr-FR
  43. 43. On peut commencer à traduire fr-FR en-US
  44. 44. On peut commencer à traduire fr-FR en-US Vos sprites doivent être identiques (enfin, si possible)
  45. 45. CSS
  46. 46. Eléments à traduire • Peu de changements. • On a déjà fait le plus gros du travail: templates et images.
  47. 47. .button { background:url(button-fr-FR.png) no-repeat -25px -30px; height:20px; margin:0 0 0 10px; width:125px; }
  48. 48. <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <title>My Website</title> [...]
  49. 49. <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <title>My Website</title> [...]
  50. 50. .button { background:url(button-fr-FR.png) no-repeat -25px -30px; height:20px; margin:0 0 0 10px; width:125px; } [lang='en-US'] .button { background-image:url(button-en-US.png); }
  51. 51. fr-FR en-US
  52. 52. <!DOCTYPE html> <html lang="ar-AR" dir="rtl"> <head> <meta charset="utf-8" /> <title>‫/<ﺍﺧﺘﺒﺎﺭ‬title> [...]
  53. 53. .button { background:url(button-fr-FR.png) no-repeat -25px -30px; height:20px; margin:0 0 0 10px; width:125px; } [lang='en-US'] .button { background-image:url(button-en-US.png); } [lang='ar-AR'] .button { background-image:url(button-ar-AR.png); width:100px; } [dir='ltr'] .button { margin:0 10px 0 0; }
  54. 54. Fonctionne partout
  55. 55. Fonctionne partout (Sauf sous IE6)
  56. 56. Si vous devez encore supporter IE6
  57. 57. Si vous devez encore supporter IE6 Utilisez des class sur votre <body> <body class="lang-ar-AR dir-rtl">
  58. 58. Si vous devez encore supporter IE6 Utilisez des class sur votre <body> <body class="lang-{% trans 'lang' %} dir-{% trans 'dir' %}">
  59. 59. Si vous devez encore supporter IE6 Utilisez des class sur votre <body> <body class="lang-{% trans 'lang' %} dir-{% trans 'dir' %}"> Votre CSS deviendra alors: .lang-ar-AR .button { ... } .dir-rtl .button { ... }
  60. 60. Un ou plusieurs fichiers CSS ?
  61. 61. Un ou plusieurs fichiers CSS ? • Dépend du projet.
  62. 62. Un ou plusieurs fichiers CSS ? • Dépend du projet. • 2 ou 3 langues: 1 seul fichier suffit généralement.
  63. 63. Un ou plusieurs fichiers CSS ? • Dépend du projet. • 2 ou 3 langues: 1 seul fichier suffit généralement. • + de langues et/ou beaucoup de changements: penser à diviser en plusieurs fichiers.
  64. 64. Un ou plusieurs fichiers CSS ? • Dépend du projet. • 2 ou 3 langues: 1 seul fichier suffit généralement. • + de langues et/ou beaucoup de changements: penser à diviser en plusieurs fichiers. <link rel="stylesheet" href="css/global.css" /> <link rel="stylesheet" href="css/en-US.css" />
  65. 65. Dans le cas d’une division en plusieurs fichiers: Plus besoin d’utiliser le sélecteur sur l’attribut lang global.css : .button { background:url(button-fr-FR.png) no-repeat -25px -30px; height:20px; margin:0 0 0 10px; width:125px; } en-US.css : .button { background-image:url(button-en-US.png); }
  66. 66. Javascript
  67. 67. De plus en plus de contenu généré par Javascript
  68. 68. Mootools
  69. 69. MooTools.lang.set('fr-FR', 'Example', { helloWorld: 'Bonjour Monde' }); MooTools.lang.set('en-US', 'Example', { helloWorld: 'Hello World' }); MooTools.lang.setLanguage(document.documentElement.lang); alert(MooTools.lang.get('Example', 'helloWorld')); http://www.mootools.net/docs/more/Core/Lang
  70. 70. MooTools.lang.set('fr-FR', 'Example', { helloWorld: 'Bonjour Monde' }); MooTools.lang.set('en-US', 'Example', { helloWorld: 'Hello World' }); MooTools.lang.setLanguage(document.documentElement.lang); alert(MooTools.lang.get('Example', 'helloWorld')); http://www.mootools.net/docs/more/Core/Lang
  71. 71. MooTools.lang.set('fr-FR', 'Example', { helloWorld: 'Bonjour Monde' }); MooTools.lang.set('en-US', 'Example', { helloWorld: 'Hello World' }); MooTools.lang.setLanguage(document.documentElement.lang); alert(MooTools.lang.get('Example', 'helloWorld')); http://www.mootools.net/docs/more/Core/Lang
  72. 72. MooTools.lang.set('fr-FR', 'Example', { helloWorld: 'Bonjour Monde' }); MooTools.lang.set('en-US', 'Example', { helloWorld: 'Hello World' }); MooTools.lang.setLanguage(document.documentElement.lang); alert(MooTools.lang.get('Example', 'helloWorld')); http://www.mootools.net/docs/more/Core/Lang
  73. 73. MooTools.lang.set('fr-FR', 'Example', { helloWorld: 'Bonjour Monde' }); MooTools.lang.set('en-US', 'Example', { helloWorld: 'Hello World' }); MooTools.lang.setLanguage(document.documentElement.lang); alert(MooTools.lang.get('Example', 'helloWorld')); http://www.mootools.net/docs/more/Core/Lang
  74. 74. MooTools.lang.set('fr-FR', 'Example', { helloWorld: 'Bonjour Monde' }); MooTools.lang.set('en-US', 'Example', { helloWorld: 'Hello World' }); MooTools.lang.setLanguage(document.documentElement.lang); alert(MooTools.lang.get('Example', 'helloWorld')); http://www.mootools.net/docs/more/Core/Lang
  75. 75. MooTools.lang.set('fr-FR', 'Example', { helloWorld: 'Bonjour Monde' }); MooTools.lang.set('en-US', 'Example', { helloWorld: 'Hello World' }); MooTools.lang.setLanguage(document.documentElement.lang); alert(MooTools.lang.get('Example', 'helloWorld')); http://www.mootools.net/docs/more/Core/Lang
  76. 76. jQuery
  77. 77. • Pas de support natif
  78. 78. • Pas de support natif • Plugin
  79. 79. • Pas de support natif • Plugin: jQuery i18n de Bryan Berry http://github.com/bryanwb/jquery-18n
  80. 80. $.i18n['en-US'] = { strings: { helloWorld: 'Hello World' } }; $.i18n['fr-FR'] = { strings: { helloWorld: 'Bonjour Monde' } }; $.i18n.setLocale(document.documentElement.lang); alert($.i18n('helloWorld'));
  81. 81. $.i18n['en-US'] = { strings: { helloWorld: 'Hello World' } }; $.i18n['fr-FR'] = { strings: { helloWorld: 'Bonjour Monde' } }; $.i18n.setLocale(document.documentElement.lang); alert($.i18n('helloWorld'));
  82. 82. $.i18n['en-US'] = { strings: { helloWorld: 'Hello World' } }; $.i18n['fr-FR'] = { strings: { helloWorld: 'Bonjour Monde' } }; $.i18n.setLocale(document.documentElement.lang); alert($.i18n('helloWorld'));
  83. 83. $.i18n['en-US'] = { strings: { helloWorld: 'Hello World' } }; $.i18n['fr-FR'] = { strings: { helloWorld: 'Bonjour Monde' } }; $.i18n.setLocale(document.documentElement.lang); alert($.i18n('helloWorld'));
  84. 84. $.i18n['en-US'] = { strings: { helloWorld: 'Hello World' } }; $.i18n['fr-FR'] = { strings: { helloWorld: 'Bonjour Monde' } }; $.i18n.setLocale(document.documentElement.lang); alert($.i18n('helloWorld'));
  85. 85. $.i18n['en-US'] = { strings: { helloWorld: 'Hello World' } }; $.i18n['fr-FR'] = { strings: { helloWorld: 'Bonjour Monde' } }; $.i18n.setLocale(document.documentElement.lang); alert($.i18n('helloWorld'));
  86. 86. $.i18n['en-US'] = { strings: { helloWorld: 'Hello World' } }; $.i18n['fr-FR'] = { strings: { helloWorld: 'Bonjour Monde' } }; $.i18n.setLocale(document.documentElement.lang); alert($.i18n('helloWorld'));
  87. 87. La votre
  88. 88. var i18n = { 'en-US': { helloWorld: 'Hello World' }, 'fr-FR': { helloWorld: 'Bonjour Monde' } }; var currentLanguage = document.documentElement.lang; alert(i18n[currentLanguage].helloWorld);
  89. 89. var i18n = { 'en-US': { helloWorld: 'Hello World' }, 'fr-FR': { helloWorld: 'Bonjour Monde' } }; var currentLanguage = document.documentElement.lang; alert(i18n[currentLanguage].helloWorld);
  90. 90. var i18n = { 'en-US': { helloWorld: 'Hello World' }, 'fr-FR': { helloWorld: 'Bonjour Monde' } }; var currentLanguage = document.documentElement.lang; alert(i18n[currentLanguage].helloWorld);
  91. 91. var i18n = { 'en-US': { helloWorld: 'Hello World' }, 'fr-FR': { helloWorld: 'Bonjour Monde' } }; var currentLanguage = document.documentElement.lang; alert(i18n[currentLanguage].helloWorld);
  92. 92. var i18n = { 'en-US': { helloWorld: 'Hello World' }, 'fr-FR': { helloWorld: 'Bonjour Monde' } }; var currentLanguage = document.documentElement.lang; alert(i18n[currentLanguage].helloWorld);
  93. 93. var i18n = { 'en-US': { helloWorld: 'Hello World' }, 'fr-FR': { helloWorld: 'Bonjour Monde' } }; var currentLanguage = document.documentElement.lang; alert(i18n[currentLanguage].helloWorld);
  94. 94. var i18n = { 'en-US': { helloWorld: 'Hello World' }, 'fr-FR': { helloWorld: 'Bonjour Monde' } }; var currentLanguage = document.documentElement.lang; alert(i18n[currentLanguage].helloWorld);
  95. 95. var i18n = { 'en-US': { helloWorld: 'Hello World' }, 'fr-FR': { helloWorld: 'Bonjour Monde' } }; var currentLanguage = document.documentElement.lang; alert(i18n[currentLanguage].helloWorld);
  96. 96. Mes petits outils à moi (2) AutoGetText JS http://github.com/Country/Utils
  97. 97. Mes petits outils à moi (2) AutoGetText JS http://github.com/Country/Utils
  98. 98. Organisation
  99. 99. Solution 1 <script src="js/framework.js"></script> <script src="js/lang-{% trans 'lang' %}.js"></script> <script src="js/scripts.js"></script>
  100. 100. Solution 2 <script src="js/global-{% trans 'lang' %}.js"></script>
  101. 101. Solution 2 <script src="js/global-{% trans 'lang' %}.js"></script> global-fr-FR.js = framework.js + lang-fr-FR.js + scripts.js global-en-US.js = framework.js + lang-en-US.js + scripts.js etc...
  102. 102. Résultat <!DOCTYPE html> <html lang="fr-FR"> <head> [...]
  103. 103. Résultat <!DOCTYPE html> <html lang="en-US"> <head> [...]
  104. 104. Merci ! http://github.com/Country * http://yannick.cr http://twitter.com/yannickc Des questions ? * Un peu mort, mais j’y travaille

×