Dieser geistige Fehltritt ist eine kleine Idee von mir, wie man Sprachen auch ohne grosse PHP-Kenntnisse auf einer Seite verfügbar machen kann. Dabei geht es hier nicht um „Google-Translator“ oder den „Bing-Übersetzer“ (letzteres hat die letzte Sprache zur Verfügung gestellt), sondern um ein permanentes Bereitstellen eigener Übersetzungen.
Wenn man keine Ahnung von PHP hat, wird es schwieriger, entsprechende Lösungen anbieten zu können. Andere würden jetzt sagen, man könnte ein CMS nehmen, aber ich persönlich bin der Meinung, dass dies nicht die Lösung aller Probleme ist. Ein CMS benötigt Verwaltung und man muss das aktuelle Layout sowie die Inhalte übernehmen, was wahrscheinlich wieder etwas mehr Aufwand ist.
Bevor wir Anfangen, kurz was Rechtliches:
Auf dieser Seite wird ein Cookie verwendet. Dieses ist „testsprache“ benannt und speichert die aktuelle Sprache (‚de‘,’en‘,’klingon‘). Es wird nach einem Tag entfernt und macht nix böses, ausser dieser Seite zu sagen, welche Sprache nach dem Laden angezeigt werden soll.
Soviel dazu, nun zum Rest.
This mental misstep is a little idea of mine on how to make languages available without knowledge about PHP or other freakin languages. It’s no tutorial about „Google Translator“ or the „Bing-Translator“ (Bing provided the last language). It’s a „How To“ for permanent deploying a custom translation.
If you have no idea of PHP, it is difficult to offer appropriate solutions. Others would say, you could take a CMS, but I think this is not the solution to all problems. A CMS requires management and you have to take over the current layout and the content , which is probably a bit more effort.
Before we begin, just a bit legal informations:
This page used a cookie . Its named „testsprache“ and stores the current language ( ‚de‘ , ‚en‘, ‚klingon‘) . It is removed after one day and does nothing bad, except to say this page, the language to be displayed after loading.
That’s it , now lets do it.
Lieber Trekkie, StarTrek-Fan oder Nerd, bitte entschuldigt die fehlerhafte Übersetzung (Bing hat sein bestes getan).
yInDaj yab Dotlh ‚eb loQ qech vIghaj, chay‘ laH lupoQ Hol Dun php Sov wa‘ Dop Hutlh chenmoH. poStaHvIS wIjuS vIHtaHbogh „google mughwI'“ „bing mughwI'“ pagh (Hol Qav DuHIvDI‘ mInDaj), ‚ach ru’Ha‘ chaH lach’eghDI‘ mughmeH DuHIvDI‘.
vaj umqu‘ ghot php bISovbe’chu‘, ‚oH Qatlh vI’Iprup maghomchugh appropriate taS offer. laH lel SoH cms ‚ach personally vuD ‚e‘ ‚oHbe‘ Hoch qay‘ taS jatlh latlhpu‘. cms nIS management ‚ej Qu’mey potlh layout, Hoch law‘ ‚a ghIH, effort jIchegh loQ neH ‚oH qaSnISbej assume wa‘.
ngejtaH neH nuq mub start, maH:
Daq yIlo‘ cookie. ‚oH „testsprache“ pong ‚ej Qu’mey potlh Hol (jan, vI, tlhIngan) pol. Ha‘ jaj ‚ej pagh mIgh baS Hol nargh qaSpu’DI‘ jIQongqa’laHbe‘ page loading DaneH’a‘ vIjatlh ‚oH.
ghur ‚e‘ DaH Hoch.
Der Aufbau
Zuerst ist es wichtig, zu wissen was alles ersetzt werden können soll. Und da man beim Seitenstart nicht alles zeigen will, blendet man unnötige Sprachen einfach aus.
Ich habe mich daher für einen Aufbau entschieden, der sowohl auf alle Elemente als auch in neuen Browsern verwendet werden kann.
Für die Elemente die übersetzt werden, gibt es ganz allgemein die Klasse „.lang“ diese ist dafür da, um erst einmal alle Elemente zu verstecken.
Zusätzlich gibt es noch die Klassen „de“,“en“,“klingon“ (alle drei werden hier auf der Seite verwendet). Wer mehr Sprachen pflegt, muss auch mehr Klassen haben.
Beide Klassen zusammengesetzt, ergeben eigentlich schon das ganze System.
So können, wie im rechten Beispiel, verschiedene Elemente verschiedenen Sprachen zugewiesen werden.
Das Beispiel wird im Absatz „Frieden“ verwendet und kann so 1:1 nachvollzogen werden.
Damit das ganze auch funktioniert, muss man einem übergeordnetem Element noch eine Klasse übermitteln, damit zum Beispiel „Deutsch“ standardmässig übermittelt wird. Dies kann man auf den Body-Tag machen, oder auf ein bestimmtes Content-Element.
Die Möglichkeit die Sprache zu ändern, erfolgt dann via Javascript.
Einen alternativen Weg gibt es noch am Ende der Seite, dieser ist aber noch nicht in allen Browsern implementiert und sollte demnach mit bedacht verwendet werden.
<img class="lang de en" src="pfad/zum/bild.jpg">
<!-- Das Bild wird bei deutsch und englisch angezeigt-->
<img class="lang klingon" src="pfad/zum/bild2.jpg">
<!--Und dieses Bild wird nur in Klingonisch angezeigt-->
<h2 class="lang de">Frieden</h2>
<!--Der Titel wird in deutsch angezeigt-->
<h2 class="lang en">Freedom</h2>
<!--Der Titel wird in englisch angezeigt-->
<h2 class="lang klingon">noH</h2>
<!--Der Titel wird in klingonisch angezeigt-->/* Im Style werden alle .lang-Elemente erstmal ausgeblendet. */
.lang {
display: none;
}
/* und die Aktuelle Sprache wird eingeblendet */
#lang-de .de,#lang-en .en,#lang-klingon .klingon {
display: block;
}//Das Javascript so einfach wie Möglich
var language = window.navigator.userLanguage || window.navigator.language;
// Browser-Sprache auslesen
if(language.indexOf('de') !== -1) {
testsprache = 'de';
} else {
testsprache = 'en';
}
// Browser-Sprache an den Body anhängen
$('body').attr( "id",'lang-'+testsprache);
// Sprache wechseln (hier mit jquery auf bestimmte Links)
$(".languageswitcher").on('click',function(e){
e.preventDefault();
$("body").attr( "id",'lang-'+$(this).attr('lang'));
});The construction
First, it’s important to know what can be replaced. And since you do not want to show everything on pageload, unnecessary languages will be hidden.
I have decided to use a structure that can be used on all items as well as new browsers.
All Elements which are translate-able are general getting the class „.lang“. All this elements are hidden by css.
In addition, there are the classes „en“, „en“, „klingon“ (all three are used on this side). Who cares more languages, must also have more classes. Both classes combined are the full system XD.
On the right side, you will find an example on how different elements are assigned with different classes.
The example is in the paragraph uses „Freedom“ and can be traced as 1:1.
To Work well, we need to set a class or ID to the Parent-Element for Language-Content or Document-Body, to show an default language Content, e.g. for „german“ on this page.
To change the language we use a little bit of javascript.
An alternate way will be shown on the end of this Page, but this way does not work on all browsers.
<img class="lang de en" src="pfad/zum/bild.jpg">
<!-- This Image will be shown in german and english-->
<img class="lang klingon" src="pfad/zum/bild2.jpg">
<!--This image will be shown in klingon-->
<h2 class="lang de">Frieden</h2>
<!--The german title-->
<h2 class="lang en">Freedom</h2>
<!--The english title-->
<h2 class="lang klingon">noH</h2>
<!--The klingon-Title-->/* In the Stylesheet all .lang-Elementes first hidden . */
.lang {
display: none;
}
/* and the current will be vissible */
#lang-de .de,#lang-en .en,#lang-klingon .klingon {
display: block;
}//The Javascript as easy as possible
var language = window.navigator.userLanguage || window.navigator.language;
// get Browser-Language
if(language.indexOf('de') !== -1) {
testsprache = 'de';
} else {
testsprache = 'en';
}
// set Browser-Language as Body-ID
$('body').attr( "id",'lang-'+testsprache);
// Languagechanger (with jquery on some Links)
$(".languageswitcher").on('click',function(e){
e.preventDefault();
$("body").attr( "id",'lang-'+$(this).attr('lang'));
});The construction (kein Wort für Aufbau in klingonisch?)
wa’DIch, potlh ngaSwI‘ yuvtlhe‘ laH wIngaQmoHta’DI‘ nuq Hoch Sov. ‚ej Hoch legh page start cha‘ neH wa‘, mo‘ unnecessary Hol. simply So‘ ‚oH
wuq jIH tlham, lo‘ Hoch elements, laH je vaj je chu‘ browsers
tu’lu‘ generally Segh elements mugh ‚oH „. nI'“ ghotvam’e‘, wa’logh Hoch elements So‘.
je addition tu’lu‘ Segh „vI“, „vI“, „tlhIngan“ (Dop lo‘ Hoch wej naDev). latlh Hol ghojwI’pu’lI‘ ‚Iv, qaSnISbej vabDot latlh Segh.
mojpu‘ naQ ghot’e‘ pat. Segh nItebHa‘, batlhchaj
vaj Sar elements pIm Hol, ‚e‘ assigned laH, such as nIH,.
example lo‘ qaStaHvIS paragraph ‚ej ‚e‘ 1: 1 „roj“.
vaj je Qapbej Segh qaSnISbej ngeH muSHa’bogh SoH vaj ‚e‘ example HIj „german“ pong default. laH yap lom maq ‚ej per joq bIH jegh item.
qaS Hol, wIQaw’laH nuH, via javascript.
tu’lu‘ qaStaHvIS bIS’ub page, qaS ‚ach wej qaStaHvIS Hoch browsers implemented ‚ej vaj lo‘ jIHbe’mo‘ path yInmey intent.
Klingonen programmieren nicht, sie lassen programmieren, ok ich wurde belehrt siehe hier
Frieden
Ich bin ein Kind des Friedens und will Frieden halten für und für mit der ganzen Welt, da ich ihn einmal mit mir selbst geschlossen habe.
Johann Wolfgang von Goethe (1749 – 1832), deutscher Dichter der Klassik, Naturwissenschaftler und Staatsmann
Bild „codesnippet“ von shadowlife
Freedom
Freedom… To those who don’t have it, it’s more valuable than gold. But where should it start and end? We humans often think we have the right to expand, absorb, convert, or possess anything we need to reach our dreams. But time and time again, hasn’t this led to conflicts with others who essentially believe the same thing?
Deus Ex Human Revolution, von Adam Jensen
Image „codesnippet“ by shadowlife
noH
bortaS lutlhoblu’pu’be‘ nIvbogh bIr ‚e‘ nay‘ qar ‚ej qaqmeH Hegh law‘ qIv ghojmoHwI’pu’na‘ qamDu‘.
Bild „Opa und Zoe“ von Zoe
Andere Wege (ab hier nur Deutsch)
Ab hier will ich mal die Klingonische und englische sprache nicht weiter beleidigen XD. Der nächste Weg den man nutzen kann, ist es, den CSS-Selektoren :lang() zu verwenden. Dadurch besteht die Möglichkeit direkt auf das Sprachelement des Eltern-Containers (min. Body) zurückzugreifen. Dieses Attribut kann ebenfalls über Javascript gepflegt werden.
<body lang="en">
<!--Die Standardsprache im HTML-Body-->/*der Neue Stylesheet-Bereich zum aktivieren*/
:lang(de) .de,:lang(en) .en{
display: block;
}//Das Javascript angepasst an lang
var language = window.navigator.userLanguage || window.navigator.language;
// Browser-Sprache auslesen
if(language.indexOf('de') !== -1) {
testsprache = 'de';
} else {
testsprache = 'en';
}
// Browser-Sprache an den Body anhängen
document.getElementsByTagName('body')[0].lang = testsprache;
// Sprache wechseln (hier mit jquery auf bestimmte Links)
$(".languageswitcher").on('click',function(e){
e.preventDefault();
document.getElementsByTagName('body')[0].lang = $(this).attr('lang');
});Ob das ganze sinn macht oder nicht, das überlasse ich denjenigen die es testen möchten. Ich persönlich würde es wahrscheinlich nur für kleine Seiten nutzen, die mit statischem HTML erstellt wurden. Und sind wir mal ehrlich, ein paar KB mehr da kommt es nicht drauf an und wenn man wirklich nur Texte übersetzt und nicht, wie ich, auch Bilder sprachenabweichend anzeigt, dann sollte das Anwenden auch kein Problem sein.