HTML5 - Sprachwechsel (automatisch und per Tab)

  • So, nu' aber... Sorry.


    Um es so flach wie möglich zu halten, habe ich das mal nur so zusammengetippert, ohne Ansätze von OOP.

    Damit sowohl die Sprachumstellung, als auch der Sinn von dynamischen Websites erkennbar sind, setze ich zu Beginn eine .htaccess in meinen Webroot:

    Code
    1. RewriteEngine On
    2. RewriteBase /
    3. RewriteCond %{REQUEST_FILENAME} !-f
    4. RewriteCond %{REQUEST_FILENAME} !-d
    5. RewriteRule ^ index.php [QSA,L]

    Kurze Erklärung: Hier werden alle Seitenaufrufe, die nicht physikalisch im Dateisystem existent sind auf die index.php umgeleitet!

    Eine ausführliche Erklärung, wozu das z.B. gut ist, findest Du hier: https://www.php-rocks.de/thema…endly-url-s-umsetzen.html


    Mit dieser Grundlage werfe ich einfach mal die index.php hier rein:

    Sieht bisher nicht sonderlich spannend, dafür aber verständlich aus, oder?

    Um zu sehen, wie ich mir die Sprache nun explizit hole, müssen wir in die GetLanguage.php reinschauen:

    Das sieht jetzt ein bisschen wilder aus, macht aber Sinn ;)

    Am Ende habe ich in $_SESSION['LanguageISO'] die aktuelle Sprache und kann diese an jedem beliebigen Ort der Website verwenden.


    Hier noch kurz, der Vollständigkeit halber die Dateien header.php und footer.php:

    PHP
    1. </body>
    2. </html>

    Die Content-Dateien muss ich hier glaube ich nicht posten, die sollten sich, wenn man beim Beispiel bleibt, in dem Verzeichnis content befinden und entsprechend der Sprache main_de.php, main_fr.php und main_en.php heißen.


    Um das nicht allzu lang werden zu lassen, lasse ich das mal so stehen.

    Fühl Dich frei, es zu kopieren und zu testen, das Beispiel ist funktionsfähig ( Domain anpassen halt... ).


    Bedenke aber: Das ist nur ein funktionsfähiges Beispiel für das Verständnis und noch keine Produktiv-Lösung!

    Bei Fragen, einfach hier ranhängen.

  • Danke für Dein Beispiel! Ich habe es mir über die Festtage angeschaut, mir ist aus dem Beispiel noch viel unklar, dies ist wohl - im Moment - etwas ausserhalb von meinen Möglichkeiten.. Grundsätzlich möchte ich auch, weil es so wenig Text pro Seite ist, auch lieber nicht mehrere SeiteX_[Sprache].html haben.. Dies ist natürlich ohne JavaScript etwas schwierig umsetzbar..

    Ich versuche mal noch ein JS-Beispiel als Vergleich zu finden :)

  • Zitat

    etwas ausserhalb von meinen Möglichkeiten..

    Keine Sorge, es geht auch einfacher.

    Zitat

    Grundsätzlich möchte ich auch, weil es so wenig Text pro Seite ist, auch lieber nicht mehrere SeiteX_[Sprache].html haben

    Auch das ist kein Problem. Versuche diesen Code:

    Du brauchst dann nur die Klasse lang-de oder lang-en usw. zu den HTML-Tags hinzufügen. Ist keine dieser Klassen vorhanden, wie in dem Beispiel beim img-Tag, wird das Element unabhängig von der Sprche angezeigt.

    Das PHP ist im Wesentlichen von hier:
    https://stackoverflow.com/ques…t-browser-language-in-php


    Nächster Schritt: Das PHP auslagern, damit die Seiten übersichtlicher werden.

    Übernächster Schritt: Umschaltung durch Benutzer hinzu fügen.

  • Grundsätzlich möchte ich auch, weil es so wenig Text pro Seite ist, auch lieber nicht mehrere SeiteX_[Sprache].html haben..

    Das musst Du ja auch nicht, aber Du hast immer die gleiche Situation: Der Content ist ein anderer.

    Ob Du den nun mit JS austauscht oder mit PHP gleich direkt auslieferst, spielt im ersten Moment keine Rolle.


    Vorteil von JS:

    • kein Seitenreload


    Vorteil von PHP:

    • Client unabhängig

    Bei JavaScript weißt Du nie, ob das beim Benutzer auch wirklich funktioniert, denn selbst bei aktiviertem JavaScript kann ein PlugIn/Scriptblocker dafür sorgen, dass Dein JS nicht ausgeführt wird. Dann wirkt Deine Seite unseriös, weil Du eine Funktion anbietest, die nicht funktioniert.


    Das kannst Du nur umgehen, wenn Du Server seitig das Dokument bereits korrekt auslieferst.

    JavaScript sollte nicht für Basis-Funktionalität, sondern als zusätzliche Usability verwendet werden.


    Ich weiß, Dir schwebt vor, den Content aller Sprachen direkt in das Dokument zu schreiben und diese dann je nach Sprachauswahl ein- bzw. auszublenden.

    Kann man machen, aber wie gesagt: JavaScript ist abhängig von der Browserkonfiguration des Benutzers, auf die Du keinerlei Einfluß hast!


    Was die Dateibenennung angeht, das war ja nur ein Beispiel. Stell Dir mal vor, Du hättest URLs, wie diese:

    Code
    1. https://www.example.com/de/startseite
    2. https://www.example.com/en/home
    3. https://www.example.com/fr/sursauter

    Auch das wäre problemlos möglich, Du könntest dann direkt die Content-Dateien bspw. aus den entsprechenden Verzeichnissen einbinden:

    Code
    1. /content/de/startseite.html
    2. /content/en/home.html
    3. /content/fr/sursauter.html

    Natürlich kann der Dateiname unabhängig von der URL auch für jede Sprache startseite.html lauten, der Flexibilität sind da keine Grenzen gesetzt.


    Dies ist natürlich ohne JavaScript etwas schwierig umsetzbar..

    Wenn Du den Umsetzungsaufwand in PHP mit dem Ein-/Ausblenden von Elementen in JavaScript vergleichst, mag das sicher richtig sein.

    Aus Sicht einer sauberen Umsetzung und evtl. Berücksichtigung der Suchmaschinen, ist das aber leider nicht so.

    ;)



    EDIT:

    Keine Sorge, es geht auch einfacher.

    Stimmt, man kann das ganze auch noch einfacher gestalten, wenn man einfach noch weniger Aspekte berücksichtigt...


    Nächster Schritt: Das PHP auslagern, damit die Seiten übersichtlicher werden.

    Übernächster Schritt: Umschaltung durch Benutzer hinzu fügen.

    Und nach den beiden Schritten möchte ich das ganze mal im Vergleich zu meinem Beispiel sehen.

    Nur um der Definition "einfacher" Willen...

  • Keine Sorge, es geht auch einfacher.

    Oh, das würde mich sehr freuen.


    Ich habe den Code mal ausprobiert. Nicht, dass ich diesen Code komplett verstehen würde aber eine Anpassung der unterstützen Sprachen oder das Auslagern des PHP's traue ich mir zu :)


    Im Moment kommt bei mir noch folgendes:

    Code
    1. 0) { reset($langs); $thelang = key($langs); } else $thelang = "de"; echo ''; ?>
    2. Dies ist deutscher Text
    3. This is english text





    Die Vorteile sind mir soweit klar und das wäre auf jeden Fall ein Pluspunkt. Die Architektur mit www.[website].xx/[sprache]/[seite].html ist für mich auf jeden Fall eine Option und ein Weg den ich, zumindest ohne automatische Erkennung der Sprache, problemlos umsetzen kann.


    Für mich ist es jedoch ein Nachteil wenn ich meine 12 Seiten die ich aktuelle habe mit der Anzahl Sprachen multiplizieren muss und dann Anpassungen an 36 Seiten vornehmen muss. Natürlich kann ich auch dort viel mit include arbeiten aber einfacher wäre es wohl die zwei Sätze pro Seite in drei Sprachen zu haben und jeweils nur eine anzuzeigen.


    Aus diesem Grund wäre es für mich, so wie ich es im Moment sehe, einfacher die 12 Seiten zu lassen und darin die drei Sprachen zu verpacken :)

  • Zitat

    Im Moment kommt bei mir noch folgendes:

    Code

    1. 0) { reset($langs); $thelang = key($langs); } else $thelang = "de"; echo ''; ?>
    2. Dies ist deutscher Text
    3. This is english text

    Da offenbar der PHP-Code angezeigt statt interpretiert wird, vermute ich, dass Du deiner Seite noch nicht die Endung .php gegeben hast?

    Den Code hatte ich getestet und bei mir hat er einwandfrei funktioniert.

  • Natürlich - nicht.

    Jetzt geht es, prächtig, ich bin begeistert :love:


    Jetzt habe ich noch ein Weg gefunden um php in einem html-File unterzubringen ("AddType application/x-httpd-php .htm .html" im .htaccess file)


    Ich werde mal versuchen das Ganze in meinem Code aufzubauen, danke soweit, ich melde mich gerne bei Fragen :)


    EDIT: Ein erster Test läuft, mit meinem Source und dem PHP ausgelagert, unglaublich..

  • Oh ja! Sehr gerne! Ich kam noch auf keine gute Idee wie ich es im UI unterbringen werde aber dies ist natürlich sekundär..

    Wie würdest Du dies angehen?


    Noch eine kurze Zwischenfrage, ich habe jetzt kurz mit "en", "de","fr" gespielt. Wenn ich bei meinem Browser jetzt 'Englisch' einstelle kommt nicht englisch, wenn ich 'Englisch (Vereinigte Staaten)' einstelle klappt es. Das gleiche auch mit Deutsch.

    Dies ist natürlich soweit grossartig, am liebsten möchte ich jedoch alle en-xx abdecken, bei meinen Nachforschungen stiess ich auf zahlreiche Listen welche entsprechende Codes verbreiteten - gibt es eine Möglichkeit die dort zusammen zu fassen?

  • Zitat

    Wenn ich bei meinem Browser jetzt 'Englisch' einstelle kommt nicht englisch, wenn ich 'Englisch (Vereinigte Staaten)' einstelle klappt es. Das gleiche auch mit Deutsch.

    Daran habe ich auch schon gedacht und ich habe dieses Problem erwartet. Es liegt daran, dass es bei einigen Sprachen regionale Ausprägungen gibt, z. B. en-US. Du hast das ja schon gefunden. Ich werde es mir ansehen und eine Lösung ausarbeiten. Muss mich erst Mal schlau machen wie man das in Opera umstellt.


    Bei der Benutzerumschaltung tendiere ich dahin, es clientseitig zu machen, damit die Seite beim Umschalten nicht neu geladen wird und nicht flackert. Erst dachte ich an Javascript, aber dann habe ich einen Blick auf das Codepen in deinem ersten Posting geworfen und gesehen, dass es ohne weiteres auch mit reinem CSS geht, wenn auch die Selektoren etwas kompliziert würden. Hast Du da eine bestimmte Präferenz?

  • Jetzt habe ich noch ein Weg gefunden um php in einem html-File unterzubringen ("AddType application/x-httpd-php .htm .html" im .htaccess file)

    Warum? Dazu sind doch PHP-Dateien da... Du schmeißt damit alle HTML-Dateien in den Parser, der in meisten Fällen gar nix macht.

    Arbeite lieber mit Rewrites, wenn Du .html in der URL stehen haben willst.


    Bei der Benutzerumschaltung tendiere ich dahin, es clientseitig zu machen, damit die Seite beim Umschalten nicht neu geladen wird und nicht flackert.

    Solange weiterhin alle Sprachen gleichzeitig im Dokument vorhanden sind und kein JS benötigt wird, kann man das so machen.

  • So, ich bin jetzt in das PHP von Stackoverflow eingestiegen und habe heraus gefunden, warum das automatische Umschalten nicht funktioniert:

    Lautet das Kürzel z. B. en-gb, so werden beide Hälften getrennt ausgewertet. Das "gb" rechts vom Bindestrich bekommt eine höhere Priorität und wird deshalb als bevorzugte Sprache ausgewählt. Im HTML und CSS ist jedoch nur "en" vorhanden, so dass die Umschaltung nicht funktioniert.

    Ich habe den Code so geändert, dass es funktionieren sollte. Die Funktion ist jetzt kürzer und das Array länger. Ich hoffe, aus meinen Kommentaren wird klar, wie es konfiguriert werden muss.


    Bei der manuellen Umschaltung habe ich mich für die CSS-Lösung entschieden. Typisch dafür ist, dass es gewisse Einschränkungen gibt: Die Radiobuttons müssen ganz am Anfang des Body stehen und wenn man die Labels entspr. Zustand hervorheben will, muss man sie entspr. adressieren.


    Allzu intensiv habe ich es nicht getestet. Wenn Du Fehler findest, melde dich wieder.

  • Allzu intensiv habe ich es nicht getestet. Wenn Du Fehler findest, melde dich wieder.

    Nur kurz weil es schon etwas spät ist und ich morgen früh los muss - funktioniert, prächtig. Ich habe den Code kurz nach dieser Liste erweitert um alle verschiedenen Werte abzudecken



    So sieht es aktuell aus, mit DE/EN/FR in allen Variationen und auf die Schnelle läuft es - sowohl automatisch (noch nicht alles Sprach-Varianten geprüft) als auch manuell. Ich denke als nächstes werde ich mir überlegen wie ich die manuelle Umschaltung in das UI einbinden werde.


    Bis hierhin schon mal - danke euch beiden! Ich teste mal ein Bisschen rum und komme sicherlich nochmals :)

  • Sorry, das ist quatsch. Wenn die Sprache einen Bindestrich hat, folgt die Angabe dem Schema <sprache>-<region>, wovon die Region für Dein Vorhaben überflüssig ist. Schränkt euch auf den Sprachcode ein und das Array kann deutlich kleiner gehalten werden. Ich behaupte mal, dass Du niemals regionsabhängige Sprachinhalte haben wirst, woraus folgt:

    PHP
    1. $available_languages = array( "de", "en", "fr" );

    Die Funktion dann entsprechend anpassen und das ganze ist etwas sinnvoller, übersichtlicher und wartungsfreundlicher.

  • Sorry, das ist quatsch. Wenn die Sprache einen Bindestrich hat, folgt die Angabe dem Schema <sprache>-<region>, wovon die Region für Dein Vorhaben überflüssig ist. Schränkt euch auf den Sprachcode ein und das Array kann deutlich kleiner gehalten werden. Ich behaupte mal, dass Du niemals regionsabhängige Sprachinhalte haben wirst, woraus folgt:

    PHP
    1. $available_languages = array( "de", "en", "fr" );

    Die Funktion dann entsprechend anpassen und das ganze ist etwas sinnvoller, übersichtlicher und wartungsfreundlicher.


    Das wäre durchaus wartungsfreundlicher. Wenn ich das oben genannte $available_languages = array durch Deines ersetze schaltet die Sprache allerdings nicht mehr um - ich habe beide Englisch-Varianten versucht.


    Bei der manuellen Umschaltung habe ich mich für die CSS-Lösung entschieden. Typisch dafür ist, dass es gewisse Einschränkungen gibt: Die Radiobuttons müssen ganz am Anfang des Body stehen und wenn man die Labels entspr. Zustand hervorheben will, muss man sie entspr. adressieren.


    Die läuft soweit bestens. Die Umschaltung auf der Mobileseite will noch nicht richtig, dies ist aber eher ein CSS-Problem.. Da habe ich noch nicht rausgefunden wie das Template die Titelleiste zusammen schustert.


    Gibt es eine Möglichkeit die Sprache zu (zwischen-)speichern? Im Moment kommt, natürlich, wieder die Browsersprache wenn die Seite gewechselt wird.

  • Wenn ich das oben genannte $available_languages = array durch Deines ersetze schaltet die Sprache allerdings nicht mehr um - ich habe beide Englisch-Varianten versucht.

    Naja, was erwartest Du? Man muss dann natürlich auch die Funktion daraufhin anpassen. Darauf wollte ich ja hinaus, die Erweiterung des Array is der falsche Ansatz für das Problem gewesen. Fang mal vorne an und beantworte Dir selber ein paar Fragen:


    Was muss meine Funktion können?

    Die Funktion soll die übermittelten verfügbaren Sprachen aus dem Browser auslesen, idealer Weise nach Priorität sortiert.

    Diese Sprachen sollen mit den erlaubten Sprachen verglichen werden. Die erste verfügbare Sprache, die erlaubt ist, soll meine Sprache sein.

    Wird keine verfügbare Sprache in den erlaubten gefunden, soll meine Standardsprache verwendet werden.


    et voilà

    Weitergehende Erklärungen spare ich mir erstmal, weil Du es vermutlich eh nicht nutzen wirst.

    Die Nutzung selber wäre allerdings relativ simpel:

    PHP
    1. $sLanguage = GetPreferedLanguage( ['de', 'en', 'fr'] );
    2. var_dump( $sLanguage );