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
   

   View Slide

2. i18n
   I A A A N
   

   View Slide

3. i18n
   I N T E R N A T I O N A L I Z A T I O N
   

   View Slide

4. C O
   I
   T
   Z
   I
   L
   O A
   A
   L N
   L10n
   

   View Slide

5. C O
   I
   T
   Z
   I
   L
   O A
   A
   L N
   L10n
   

   View Slide

6. L10n l10n I18n i18n
   L10n l10n I18n i18n
   L10n l10n I18n i18n
   Fira Sans
   Helvetica Condensed
   Gill Sans
   

   View Slide

7. E
   T
   E
   N
   R
   E
   B
   U S
   K
   k8s
   

   View Slide

8. E
   T
   E
   N
   R
   E
   B
   U S
   K
   k8s
   

   View Slide

9. I T
   I
   L
   I
   B
   S
   S
   E
   C
   C Y
   A
   a11y
   

   View Slide

10. I T
    I
    L
    I
    B
    S
    S
    E
    C
    C Y
    A
    a11y
    

    View Slide

11. N
    A
    M
    S
    R
    E
    T
    T
    I
    B
    R
    A
    N
    N
    U N
    G
    g16n
    

    View Slide

12. N
    A
    M
    S
    R
    E
    T
    T
    I
    B
    R
    A
    N
    N
    U N
    G
    g16n
    @
    

    View Slide

13. A
    D
    I
    H
    S
    I
    R
    A
    H
    C
    I D
    R
    r12a
    @
    

    View Slide

14. T
    R
    E
    I
    M
    S
    N
    E E
    J
    j9t
    @
    

    View Slide

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
    

    View Slide

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
    

    View Slide

17. Foto: Emmanuel Huybrechts, CC BY 2.0
    Foto: Thomas Kraft, CC BY-SA 2.5 Foto: Mat Connolley, CC BY 2.5
    

    View Slide

18. Mehrsprachige
    Websites
    

    View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

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
    

    View Slide

30. View Slide

31. View Slide

32. Diagramm: Mozilla Contributors, CC BY-SA 2.5
    Content negotiation
    

    View Slide

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
    

    View Slide

34. index.de.html
    Seite 3
    
    a>
    Seite 3
    
    a>
    vs.
    

    View Slide

35. index.de.html
    Seite 3
    
    a>
    Seite 3
    
    a>
    vs.
    

    View Slide

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)
    

    View Slide

37. Mehrsprachige Websites
    TIL about -starting -blocks
    1 min
    

    View Slide