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 191 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
0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 191
Sur SlideShare
0
Issues des intégrations
0
Intégrations
126
Actions
Partages
0
Téléchargements
23
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive








































































































  • 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

    ×