Téléchargé 24 fois
![Template source
<!DOCTYPE html>
<html lang="{% trans 'lang' %}">
<head>
<meta charset="utf-8" />
<title>{% trans 'site-title' %}</title>
[...]](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-17-2048.jpg)
![Site français
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8" />
<title>Mon site</title>
[...]](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-18-2048.jpg)
![Site anglais
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My Website</title>
[...]](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-19-2048.jpg)
![<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My Website</title>
[...]](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-48-2048.jpg)
![<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My Website</title>
[...]](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-49-2048.jpg)
![.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);
}](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-50-2048.jpg)
![<!DOCTYPE html>
<html lang="ar-AR" dir="rtl">
<head>
<meta charset="utf-8" />
<title>/<ﺍﺧﺘﺒﺎﺭtitle>
[...]](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-52-2048.jpg)
![.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;
}](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-53-2048.jpg)
![$.i18n['en-US'] = {
strings: {
helloWorld: 'Hello World'
}
};
$.i18n['fr-FR'] = {
strings: {
helloWorld: 'Bonjour Monde'
}
};
$.i18n.setLocale(document.documentElement.lang);
alert($.i18n('helloWorld'));](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-80-2048.jpg)
![$.i18n['en-US'] = {
strings: {
helloWorld: 'Hello World'
}
};
$.i18n['fr-FR'] = {
strings: {
helloWorld: 'Bonjour Monde'
}
};
$.i18n.setLocale(document.documentElement.lang);
alert($.i18n('helloWorld'));](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-81-2048.jpg)
![$.i18n['en-US'] = {
strings: {
helloWorld: 'Hello World'
}
};
$.i18n['fr-FR'] = {
strings: {
helloWorld: 'Bonjour Monde'
}
};
$.i18n.setLocale(document.documentElement.lang);
alert($.i18n('helloWorld'));](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-82-2048.jpg)
![$.i18n['en-US'] = {
strings: {
helloWorld: 'Hello World'
}
};
$.i18n['fr-FR'] = {
strings: {
helloWorld: 'Bonjour Monde'
}
};
$.i18n.setLocale(document.documentElement.lang);
alert($.i18n('helloWorld'));](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-83-2048.jpg)
![$.i18n['en-US'] = {
strings: {
helloWorld: 'Hello World'
}
};
$.i18n['fr-FR'] = {
strings: {
helloWorld: 'Bonjour Monde'
}
};
$.i18n.setLocale(document.documentElement.lang);
alert($.i18n('helloWorld'));](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-84-2048.jpg)
![$.i18n['en-US'] = {
strings: {
helloWorld: 'Hello World'
}
};
$.i18n['fr-FR'] = {
strings: {
helloWorld: 'Bonjour Monde'
}
};
$.i18n.setLocale(document.documentElement.lang);
alert($.i18n('helloWorld'));](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-85-2048.jpg)
![$.i18n['en-US'] = {
strings: {
helloWorld: 'Hello World'
}
};
$.i18n['fr-FR'] = {
strings: {
helloWorld: 'Bonjour Monde'
}
};
$.i18n.setLocale(document.documentElement.lang);
alert($.i18n('helloWorld'));](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-86-2048.jpg)
![var i18n = {
'en-US': {
helloWorld: 'Hello World'
},
'fr-FR': {
helloWorld: 'Bonjour Monde'
}
};
var currentLanguage = document.documentElement.lang;
alert(i18n[currentLanguage].helloWorld);](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-88-2048.jpg)
![var i18n = {
'en-US': {
helloWorld: 'Hello World'
},
'fr-FR': {
helloWorld: 'Bonjour Monde'
}
};
var currentLanguage = document.documentElement.lang;
alert(i18n[currentLanguage].helloWorld);](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-89-2048.jpg)
![var i18n = {
'en-US': {
helloWorld: 'Hello World'
},
'fr-FR': {
helloWorld: 'Bonjour Monde'
}
};
var currentLanguage = document.documentElement.lang;
alert(i18n[currentLanguage].helloWorld);](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-90-2048.jpg)
![var i18n = {
'en-US': {
helloWorld: 'Hello World'
},
'fr-FR': {
helloWorld: 'Bonjour Monde'
}
};
var currentLanguage = document.documentElement.lang;
alert(i18n[currentLanguage].helloWorld);](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-91-2048.jpg)
![var i18n = {
'en-US': {
helloWorld: 'Hello World'
},
'fr-FR': {
helloWorld: 'Bonjour Monde'
}
};
var currentLanguage = document.documentElement.lang;
alert(i18n[currentLanguage].helloWorld);](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-92-2048.jpg)
![var i18n = {
'en-US': {
helloWorld: 'Hello World'
},
'fr-FR': {
helloWorld: 'Bonjour Monde'
}
};
var currentLanguage = document.documentElement.lang;
alert(i18n[currentLanguage].helloWorld);](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-93-2048.jpg)
![var i18n = {
'en-US': {
helloWorld: 'Hello World'
},
'fr-FR': {
helloWorld: 'Bonjour Monde'
}
};
var currentLanguage = document.documentElement.lang;
alert(i18n[currentLanguage].helloWorld);](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-94-2048.jpg)
![var i18n = {
'en-US': {
helloWorld: 'Hello World'
},
'fr-FR': {
helloWorld: 'Bonjour Monde'
}
};
var currentLanguage = document.documentElement.lang;
alert(i18n[currentLanguage].helloWorld);](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-95-2048.jpg)
![Résultat
<!DOCTYPE html>
<html lang="fr-FR">
<head>
[...]](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-102-2048.jpg)
![Résultat
<!DOCTYPE html>
<html lang="en-US">
<head>
[...]](https://image.slidesharecdn.com/pw10-101016121527-phpapp02/75/Internationalisation-du-Front-103-2048.jpg)
Internationalisation du Front
- 1. Internationalisation du Front Yannick Croissant Paris Web 2010 – 14-16 octobre 2010
- 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.
- 4. Internationalisation ducôté de l’intégrateur
- 5. Différents éléments concernés : • Templates HTML • Images • CSS • Javascript
- 6.
- 7. Utilisez les capacitésde vos outils
- 8. CMS Wordpress __('Hello World') Framework Django {% trans 'Hello World' %} Language PHP _('Hello World')
- 9. Tous utilisent lamême chose pour fonctionner
- 10.
- 11. Gettext index.html article.html archives.html monsite.pot
- 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...
- 14. Mes petits outilsà moi AutoGetText http://github.com/Country/Utils
- 15. Mes petits outilsà moi AutoGetText http://github.com/Country/Utils
- 16. Gettext monsite.pot fr-FR.mo en-US.mo
- 17. Template source <!DOCTYPE html> <htmllang="{% trans 'lang' %}"> <head> <meta charset="utf-8" /> <title>{% trans 'site-title' %}</title> [...]
- 18. Site français <!DOCTYPE html> <htmllang="fr-FR"> <head> <meta charset="utf-8" /> <title>Mon site</title> [...]
- 19. Site anglais <!DOCTYPE html> <htmllang="en-US"> <head> <meta charset="utf-8" /> <title>My Website</title> [...]
- 20.
- 21. Vos images contiennent elles aussi du texte
- 22.
- 23.
- 24. Découpe • Sprites
- 25. Découpe • Sprites • Horizontaux
- 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
- 34. Centralisez vos textes http://s.lnb.fr/lnb/file/assets/image/generic/titles.png
- 35. Centralisez vos textes (et surtout pas comme ça) http://www.olweb.fr/image/generic/menu.png
- 36. Centralisez vos textes (et surtout pas comme ça) http://www.olweb.fr/image/generic/menu.png
- 37.
- 38.
- 39.
- 40.
- 41. On peut commencerà traduire
- 42. On peut commencerà traduire fr-FR
- 43. On peut commencerà traduire fr-FR en-US
- 44. On peut commencerà traduire fr-FR en-US Vos sprites doivent être identiques (enfin, si possible)
- 45.
- 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; }
- 48. <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <title>My Website</title> [...]
- 49. <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <title>My Website</title> [...]
- 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.
- 52. <!DOCTYPE html> <html lang="ar-AR"dir="rtl"> <head> <meta charset="utf-8" /> <title>/<ﺍﺧﺘﺒﺎﺭtitle> [...]
- 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.
- 55. Fonctionne partout (Sauf sous IE6)
- 56. Si vous devezencore supporter IE6
- 57. Si vous devezencore supporter IE6 Utilisez des class sur votre <body> <body class="lang-ar-AR dir-rtl">
- 58. Si vous devezencore supporter IE6 Utilisez des class sur votre <body> <body class="lang-{% trans 'lang' %} dir-{% trans 'dir' %}">
- 59. Si vous devezencore 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. Un ou plusieursfichiers CSS ?
- 61. Un ou plusieursfichiers CSS ? • Dépend du projet.
- 62. Un ou plusieursfichiers CSS ? • Dépend du projet. • 2 ou 3 langues: 1 seul fichier suffit généralement.
- 63. Un ou plusieursfichiers 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 plusieursfichiers 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 casd’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.
- 67. De plus enplus de contenu généré par Javascript
- 68.
- 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
- 76.
- 77. • Pas desupport natif
- 78. • Pas desupport natif • Plugin
- 79. • Pas desupport 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'));
- 87.
- 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);
- 96. Mes petits outilsà moi (2) AutoGetText JS http://github.com/Country/Utils
- 97. Mes petits outilsà moi (2) AutoGetText JS http://github.com/Country/Utils
- 98.
- 99. Solution 1 <script src="js/framework.js"></script> <scriptsrc="js/lang-{% trans 'lang' %}.js"></script> <script src="js/scripts.js"></script>
- 100. Solution 2 <script src="js/global-{%trans 'lang' %}.js"></script>
- 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. Résultat <!DOCTYPE html> <html lang="fr-FR"> <head> [...]
- 103. Résultat <!DOCTYPE html> <html lang="en-US"> <head> [...]
- 104. Merci ! http://github.com/Country * http://yannick.cr http://twitter.com/yannickc Des questions ? * Un peu mort, mais j’y travaille