Contenu connexe Similaire à Internationalisation du Front (20) Internationalisation du Front2. 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.
•
8. CMS Wordpress __('Hello World')
Framework Django {% trans 'Hello World' %}
Language PHP _('Hello World')
12. CMS Wordpress __('Hello World')
Framework Django {% trans 'Hello World' %}
Language PHP _('Hello World')
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...
16. Gettext
monsite.pot
fr-FR.mo en-US.mo
26. Découpe
• Sprites
• Horizontaux
• Verticaux
27. Découpe
• Sprites
• Horizontaux
• Verticaux
• Uniques
28. Découpe
• Sprites
• Horizontaux
• Verticaux
• Uniques
• Formats
29. Découpe
• Sprites
• Horizontaux
• Verticaux
• Uniques
• Formats
• GIF
30. Découpe
• Sprites
• Horizontaux
• Verticaux
• Uniques
• Formats
• GIF
• PNG8
31. Découpe
• Sprites
• Horizontaux
• Verticaux
• Uniques
• Formats
• GIF
• PNG8
• PNG32
32. Découpe
• Sprites
• Horizontaux
• Verticaux
• Uniques
• Formats
• GIF
• PNG8
• PNG32
• JPEG
33. Découpe
• Sprites
• Horizontaux
• Verticaux
• Uniques
• Formats
• GIF
• PNG8
• PNG32
• JPEG
44. On peut commencer à traduire
fr-FR
en-US
Vos sprites doivent
être identiques
(enfin, si possible)
46. Eléments à traduire
• Peu de changements.
• On a déjà fait le plus gros du travail:
templates et images.
47. .button {
background:url(button-fr-FR.png) no-repeat -25px -30px;
height:20px;
margin:0 0 0 10px;
width:125px;
}
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);
}
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;
}
57. Si vous devez encore
supporter IE6
Utilisez des class sur votre <body>
<body class="lang-ar-AR dir-rtl">
58. Si vous devez encore
supporter IE6
Utilisez des class sur votre <body>
<body class="lang-{% trans 'lang' %} dir-{% trans
'dir' %}">
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 { ... }
62. Un ou plusieurs fichiers
CSS ?
• Dépend du projet.
• 2 ou 3 langues: 1 seul fichier suffit
généralement.
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. 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. 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);
}
67. De plus en plus de
contenu généré par
Javascript
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. 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. 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. 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. 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. 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. 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
79. • Pas de support natif
• Plugin: jQuery i18n de Bryan Berry
http://github.com/bryanwb/jquery-18n
80. $.i18n['en-US'] = {
strings: {
helloWorld: 'Hello World'
}
};
$.i18n['fr-FR'] = {
strings: {
helloWorld: 'Bonjour Monde'
}
};
$.i18n.setLocale(document.documentElement.lang);
alert($.i18n('helloWorld'));
81. $.i18n['en-US'] = {
strings: {
helloWorld: 'Hello World'
}
};
$.i18n['fr-FR'] = {
strings: {
helloWorld: 'Bonjour Monde'
}
};
$.i18n.setLocale(document.documentElement.lang);
alert($.i18n('helloWorld'));
82. $.i18n['en-US'] = {
strings: {
helloWorld: 'Hello World'
}
};
$.i18n['fr-FR'] = {
strings: {
helloWorld: 'Bonjour Monde'
}
};
$.i18n.setLocale(document.documentElement.lang);
alert($.i18n('helloWorld'));
83. $.i18n['en-US'] = {
strings: {
helloWorld: 'Hello World'
}
};
$.i18n['fr-FR'] = {
strings: {
helloWorld: 'Bonjour Monde'
}
};
$.i18n.setLocale(document.documentElement.lang);
alert($.i18n('helloWorld'));
84. $.i18n['en-US'] = {
strings: {
helloWorld: 'Hello World'
}
};
$.i18n['fr-FR'] = {
strings: {
helloWorld: 'Bonjour Monde'
}
};
$.i18n.setLocale(document.documentElement.lang);
alert($.i18n('helloWorld'));
85. $.i18n['en-US'] = {
strings: {
helloWorld: 'Hello World'
}
};
$.i18n['fr-FR'] = {
strings: {
helloWorld: 'Bonjour Monde'
}
};
$.i18n.setLocale(document.documentElement.lang);
alert($.i18n('helloWorld'));
86. $.i18n['en-US'] = {
strings: {
helloWorld: 'Hello World'
}
};
$.i18n['fr-FR'] = {
strings: {
helloWorld: 'Bonjour Monde'
}
};
$.i18n.setLocale(document.documentElement.lang);
alert($.i18n('helloWorld'));
88. var i18n = {
'en-US': {
helloWorld: 'Hello World'
},
'fr-FR': {
helloWorld: 'Bonjour Monde'
}
};
var currentLanguage = document.documentElement.lang;
alert(i18n[currentLanguage].helloWorld);
89. var i18n = {
'en-US': {
helloWorld: 'Hello World'
},
'fr-FR': {
helloWorld: 'Bonjour Monde'
}
};
var currentLanguage = document.documentElement.lang;
alert(i18n[currentLanguage].helloWorld);
90. var i18n = {
'en-US': {
helloWorld: 'Hello World'
},
'fr-FR': {
helloWorld: 'Bonjour Monde'
}
};
var currentLanguage = document.documentElement.lang;
alert(i18n[currentLanguage].helloWorld);
91. var i18n = {
'en-US': {
helloWorld: 'Hello World'
},
'fr-FR': {
helloWorld: 'Bonjour Monde'
}
};
var currentLanguage = document.documentElement.lang;
alert(i18n[currentLanguage].helloWorld);
92. var i18n = {
'en-US': {
helloWorld: 'Hello World'
},
'fr-FR': {
helloWorld: 'Bonjour Monde'
}
};
var currentLanguage = document.documentElement.lang;
alert(i18n[currentLanguage].helloWorld);
93. var i18n = {
'en-US': {
helloWorld: 'Hello World'
},
'fr-FR': {
helloWorld: 'Bonjour Monde'
}
};
var currentLanguage = document.documentElement.lang;
alert(i18n[currentLanguage].helloWorld);
94. var i18n = {
'en-US': {
helloWorld: 'Hello World'
},
'fr-FR': {
helloWorld: 'Bonjour Monde'
}
};
var currentLanguage = document.documentElement.lang;
alert(i18n[currentLanguage].helloWorld);
95. var i18n = {
'en-US': {
helloWorld: 'Hello World'
},
'fr-FR': {
helloWorld: 'Bonjour Monde'
}
};
var currentLanguage = document.documentElement.lang;
alert(i18n[currentLanguage].helloWorld);
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...
104. Merci !
http://github.com/Country
*
http://yannick.cr
http://twitter.com/yannickc
Des questions ?
* Un peu mort, mais j’y travaille