Internationalisation du Front

3,109 views
2,995 views

Published on

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.

Published in: Technology, Art & Photos
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,109
On SlideShare
0
From Embeds
0
Number of Embeds
126
Actions
Shares
0
Downloads
23
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide








































































































  • 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

    ×