Sprachauswahl Menü à la Google - Live Übersetzung innerhalb der Website mittels Google AJAX Language API
Herzlich willkommen zum
Tutorial: Wir bauen eine Sprachauswahl für eine internationale Website!
Dieser
Artikel beschreibt wie man sich die Google Language API für die eigene
Website zu Nutze macht. Es gibt hierzu einen vollständigen Download, der
den benötigten Code und alle Dateien zur Verfügung stellt. Mit diesem
Download kannst du alles genau nachvollziehen, testen und für deine
Website übernehmen.
Ziel des Sprachauswahl Menüs
Wir
möchten unsere Website in mehreren Sprachen anbieten. Hierzu bedienen
wir uns der Power der Google Language API.
Online Demo
Für
alle die dieses Script in Aktion sehen wollen können es direkt auf
dieser Seite testen; denn auf dieser Seite kommt genau diese
Sprachauswahl zum Einsatz. Ganz unten auf der Seite findest du das
Sprachmenü und kannst es testen. Ebenfalls interessant ist zu sehen, wie
auf der regulären Seite unserer Agentur dieses Script zum Einsatz
kommt. Schau dazu auf unsere Soyos Startseite und schalte die Sprache
einfach mal um. Die Auswahl bleibt auch auf den Unterseiten dank Cookie
eingestellt, sodass du alle Seiten in deiner gewählten Sprache
dargestellt bekommst.
» NACH UNTEN ZUR SPRACHAUSWAHL SPRINGEN
Anatomie - wie funktioniert das Sprachmenü
Unser Sprachmenü basiert
auf jQuery und eigenem Code. Alle Elemente und deren Nutzen stellen wir
kurz vor:
Bestandteile des Sprachauswahl-Scripts
- Power der Google Language API
- jQuery Framework
- jQuery Translate Plugin
- jQuery Cookie Plugin
- Eigenen Code - Darstellung des Sprachauswahl Menüs
- Eigenen Code - Initiale Spracherkennung der Browser-Sprache (optional)
Bestandteil- jQuery Translate Plugin
Es bietet die Möglichkeit die
500-Zeichen-Grenze zu übersteigen indem es die Übersetzung in einzelne
Pakte verteilt und hinterher wieder zusammensetzt. Die Seite dazu findet
ihr hier: Zum Plugin.
Bestandteil - jQuery Cookie Plugin
Sobald der Besucher die Sprache umgestellt hat, soll
diese auch für alle anderen Seiten der Website verwendet werden. Mittels
jQuery Cookie Plugin setzen wir einfach nur ein Cookie, sobald der
Besucher die Sprache umgestellt hat.
Das Cookie wir mit jedem
Laden der Website ausgelesen. Weicht die Originalsprache von der vom
Besucher eingestellten Sprache ab, erfolgt direkt eine Ãœbersetzung in
die gewünschte Sprache. Der Besucher bekommt so jede Seite in seiner
gewählen Sprache angezeigt.
Initiale verwendung der Browser-Sprache
Jeder Browser, egal ob Internet Explorer, Firefox
ect. stellt die eingestellte Sprache des Besuchers zur Verfügung. Das
Script liest diese Browser-Sprache aus und zeit die Website direkt beim
ersten Aufruf in dieser Sprache an.
HTML/CSS Sprachauswahl Menü
Im
Sprachauswahl Menü werden die angebotenen Sprachen per Link angeboten.
Die
Sprachen können im Script frei gewählt werden. Es sind alle Sprachen
Verfügbar.
Benutzerfreundlichkeit
Für die
Benutzerfreundlichkeit im Sprachauswahl Menü sorgen Status-Icons, die
neben dem Link anzeigen dass eine Übersetzung läuft. Nach erfolgreicher
Ãœbersetzung wird der Loading-Status (animierter Throbber) gegen einen
Finish-Status (grünes Häkchen) ersetzt.
Beim Navigieren innerhalb
der Website sorgt vor dem Hauptartikel ein Throbber für die nötige
Information, dass die Website gerade übersetzt wird. Der Text des
Hauptartikels wird während der Übersetzung kurzzeitig grau eingefärbt.
Nach erfolgreicher Übersetzung erhält er wieder die ursprüngliche Farbe.
Kritische Bewertung - Google Language API für die eigene Website
Vorteile:
- Die Website wird wie gewohnt dargestellt! Es erscheint kein Frameset von Übersetzungs-Services oder ähnlichem.
- Die Ãœbersetzung ist vollkommen kostenlos.
- Es bedarf keinem Pflegeaufwand der anderen Sprachen, da die Website nur in einer Sprache gepflegt wird.
Nachteile:
- Die Ãœbersetzung von Native-Speakern kann besser sein.
- Übersetzt werden manchmal auch Eigennamen, die man besser nicht übersetzen sollte - zB Namen von Städten wie z.B. "Groß Ostheim".
Lassen Sie ein Kommentar hier: