Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (11)
Similaire à Internationalisation du Front
Similaire à Internationalisation du Front (20)
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. •
- 4. Internationalisation du côté de l’intégrateur
- 5. Différents éléments concernés : • Templates HTML • Images • CSS • Javascript
- 7. Utilisez les capacités de vos outils
- 8. CMS Wordpress __('Hello World') Framework Django {% trans 'Hello World' %} Language PHP _('Hello World')
- 9. Tous utilisent la même chose pour fonctionner
- 10. Gettext
- 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> <html lang="{% trans 'lang' %}"> <head> <meta charset="utf-8" /> <title>{% trans 'site-title' %}</title> [...]
- 18. Site français <!DOCTYPE html> <html lang="fr-FR"> <head> <meta charset="utf-8" /> <title>Mon site</title> [...]
- 19. Site anglais <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <title>My Website</title> [...]
- 20. Images
- 21. Vos images contiennent elles aussi du texte
- 22. Parlons découpe
- 23. Découpe
- 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
- 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. CSS
- 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. fr-FR en-US
- 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; }
- 55. Fonctionne partout (Sauf sous IE6)
- 56. Si vous devez encore supporter IE6
- 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 { ... }
- 60. Un ou plusieurs fichiers CSS ?
- 61. Un ou plusieurs fichiers CSS ? • Dépend du projet.
- 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); }
- 66. Javascript
- 67. De plus en plus de contenu généré par Javascript
- 68. Mootools
- 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. jQuery
- 77. • Pas de support natif
- 78. • Pas de support natif • Plugin
- 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'));
- 87. La votre
- 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. Organisation
- 99. Solution 1 <script src="js/framework.js"></script> <script src="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