Mehrsprachige Websites

- Internationalisierung (i18n), Lokalisierung (L10n)
- Sprachauswahlmenü-Design
- Verlinkung entsprechender Seiten
- Sprachvereinbarung (language negotiation)

Links zu Ressourcen und Codepens auf https://noti.st/gunnarbittersmann/b6lgwT/mehrsprachige-websites

Transcript

1. O I T Z I L N O I T N R E T N A A A I N i18n
2. i18n I A A A N
3. i18n I N T E R N A T I O N A L I Z A T I O N
4. C O I T Z I L O A A L N L10n
5. C O I T Z I L O A A L N L10n
6. L10n l10n I18n i18n L10n l10n I18n i18n L10n l10n I18n i18n Fira Sans Helvetica Condensed Gill Sans
7. E T E N R E B U S K k8s
8. E T E N R E B U S K k8s
9. I T I L I B S S E C C Y A a11y
10. I T I L I B S S E C C Y A a11y
11. N A M S R E T T I B R A N N U N G g16n
12. N A M S R E T T I B R A N N U N G g16n @
13. A D I H S I R A H C I D R r12a @
14. T R E I M S N E E J j9t @
15. Lokalisierung Anpassung eines Systems an eine bestimmte Region (geografisch, ethnisch) 
 sprachlich: Zeichen, Schriftsystem 
 kulturell: Datum/Zeit, Währung, Bedeutung von Farben und Symbolen, Bilder rechtlich
16. Internationalisierung Gestaltung eines Systems, so dass es leicht an andere Sprachen und Kulturen angepasst werden kann 
 “Internationalization is not a feature. It is an architecture.” 
 — Addison Phillips
17. Foto: Emmanuel Huybrechts, CC BY 2.0 Foto: Thomas Kraft, CC BY-SA 2.5 Foto: Mat Connolley, CC BY 2.5
18. Mehrsprachige Websites
29. Sprachauswahlmenü • oben auf der Seite; Icon o.ä. • Optionen anzeigen, kein Pull-Down-Menü • Beschriftung der Optionen in der jeweiligen Zielsprache: ةيبرعلا, deutsch, English, español, français, ೔ຊޠ • keine Flaggen für Sprachen
32. Diagramm: Mozilla Contributors, CC BY-SA 2.5 Content negotiation
33. .htaccess index.de.html index.en.html index.zh.html seite2.de.html seite2.en.html seite2.zh.html seite3.de.html seite3.en.html sprachspezi fi sche URLs: https: // example.net/index.de https: // example.net/index.en https: // example.net/index.zh https: // example.net/seite2.de // generische URLs: https: // example.net/index https: // example.net/seite2 https: // example.net/seite3 Options +MultiViews
34. index.de.html <a href="https: // example.net/seite3">Seite 3 </ a> <a href="https: // example.net/seite3.de">Seite 3 </ a> vs.
35. index.de.html <a href="https: // example.net/seite3">Seite&nbsp;3 </ a> <a href="https: // example.net/seite3.de">Seite&nbsp;3 </ a> vs.
36. Language negotiation (Sprachvereinbarung) • Präferenz des Nutzers im HTTP-Header Accept-Language • generische und sprachspezifische URLs • Sprachauswahlmenü notwendig • Änderung der Sprache durch Nutzer speichern (Cookie)
37. Mehrsprachige Websites TIL about -starting -blocks 1 min