GAMBAS-BUCH 3.19.5

Im Projekt `webapp5i` wird Ihnen ein Weg vorgeschlagen, um Webseiten in unterschiedlichen Sprachen auszuliefern, die auf der Basis der Klasse Webpage erzeugt wurden. Im Projekt sind das die deutsche, die englische und die italienische Sprache. Damit in der Web-Applikation entscheiden kann, in welcher Sprache und mit welchem Zahlen- und Datumsformat geantwortet werden soll, wird eine spezielle Eigenschaft der Webbrowser herangezogen. Hierbei handelt es sich um die bevorzugte Sprache, die typischerweise der Locale des Betriebssystems entspricht. Diese Präferenz wird bei jeder Anfrage dem Web-Server als Attribut der Accept-Language mitgeteilt, was der Web-Applikation ermöglicht, eine angepasste Antwort zu senden. Die Gambas-Klasse Request der Komponente gb.web stellt die Accept-Language als Eigenschaft „Language“ der Web-Anwendung zur Verfügung und kann damit direkt die System.Language setzen (System.Language = Request.Language). Damit wird die Gambas-Web-Applikation auf die Locale des anfragenden Browsers eingestellt, womit nicht nur Zahlen- und Datums-Formate/Ausdrücke auf den anfragenden Browser angepasst werden, sondern auch die Übersetzung ausgewählt wird, die in gewohnter Form in der IDE im Übersetzungsdialog angelegt werden kann.

So wird zum Beispiel eine Webseite mit einem Datenbank-Report in italienischer Sprache angezeigt:

Abbildung 24.6.2.5.1: (SQLite-)Datenbank-Report (Ausschnitt)

Sie erkennen in der o.a. Abbildung, dass die folgenden Teile der Webseite übersetzt wurden:

• der Titel der Webseite im Tab nach dem roten Favicon,
• das Logo der Webseite im Header,
• die Navigation,
• die DB-Report-Überschrift mit folgendem Datum und der Zeit der Ausgabe des DB-Reports und
• die Feldbezeichnungen im Tabellen-Kopf.

Ausgangspunkt für alle Übersetzungen in die deutsche und italienische Sprache ist eine Website aus mehreren Webseiten in englischer Sprache (en_GB) auf der Basis der Klasse Webpage.

Für die Arbeit mit dem Übersetzungsdialog müssen Sie zuvor in den Projekteigenschaften bei den Optionen angeben,

• dass das Projekt übersetzt werden kann und
• die Standardsprache 'Englisch (UK)' auswählen.

Der native Ansatz besteht darin, im Quelltext-Editor zuerst die zu übersetzenden (englischen) Texte in gewohnter Weise wie bei („Time“) auszuzeichnen und sie dann im Übersetzungsdialog in die gewünschten Zielsprachen zu übersetzen.

Beispiel 1

<%
Main.SiteList = [("Home"), ("Time"), ("Date"), ("Multimedia"), ("DBReport"), ("Imprint")]
%>

Beispiel 2

<%
'-- Determining the identifiers for the column headings
    aFieldNamesDisplayed = ["ID", ("Firstname"), ("Surname"), ("City"), ("ZIP"), ("Street"), ("Birthday"),
                           ("Phone"), ("Mobile"), "EMail"]
%>

Beispiel 3

 <nav class="site-nav">
   <button class="menubutton" onclick="this.classList.toggle('showmenu')">
     <% Print ("Menu") %>
   </button>
   <ul><% Print sNavItems %></ul>
 </nav>

Kommentar

• Übersetzungen können nur in einem Gambas-Block vorgenommen werden. Entweder in einer Gambas-Klassendatei *.class, die stets zu einer Webpage *webpage gehört oder in einem Gambas-Block in einem HTML-Quelltext einer Webpage.
• Ein Gambas-Block in HTML beginnt mit dem öffnenden Tag <% und endet mit dem schließenden Tag %>; so wie im Beispiel 3 mit dem Gambas-Block <% Print („Menu“) %>.
• Wenn Sie in eine weitere Sprache übersetzen wollen, dann müssen Sie nur im Übersetzungsdialog die Übersetzungen einfügen – ohne im Quelltext Änderungen vornehmen zu müssen. Daher die Empfehlung: Nutzen Sie den nativen Ansatz zur Übersetzung, wo immer das möglich ist.
• Beachten Sie: Wenn Sie den zu übersetzenden englischen Text ändern, dann werden alle Übersetzungen dieses Textes in allen Zielsprachen komplett gelöscht!

In den folgenden Abschnitten werden Ihnen die HTML- und Gambas-Quelltexte der Webseiten des Projektes `webapp5i` vorgestellt und kommentiert. Vorrangig werden die Aspekte der Übersetzung von Texten beschrieben. Die Quelltexte werden deshalb nur in den für die Übersetzungen relevanten Ausschnitten angegeben.

Auch im Projekt `webapp5i` ist die Webpage Main.webpage die wichtigste Datei des Templates. Zum Template finden Sie ausführliche Hinweise im Kapitel '24.6.2.3.2 Hinweise Template'.

 [1] <%
 [2]     Dim sLang, sLangHTML As String
 [3]
 [4] '-- The browser tells the server which language (locale) it is set to via Request.Language.
 [5]     System.Language = Request.Language ' Example: de_DE.UTF-8
 [6]
 [7]     Main.CurrentSiteList = [("Home"), ("Time"), ("Date"), ("Multimedia"), ("DBReport"), ("Imprint")]
 [8]
 [9]     Select System.Language
 [10]       Case "de_DE.UTF-8", "de_CH.UTF-8"
 [11]         sLang = "de"
 [12]       Case "it_IT.UTF-8"
 [13]         sLang = "it"
 [14]       Case "en_GB.UTF-8"
 [15]         sLang = "en"
 [16]       Default
 [17]         sLang = "en"
 [18]     End Select
 [19]
 [20]     If sLang Then
 [21]        sLangHTML = "<html lang=" & "\"" & sLang & "\"" & ">"
 [22]     Else
 [23]        sLangHTML = ""
 [24]     Endif
 [25]
 [26]     If Not Request.Query Then
 [27]        Main.CurrentSite = Main.CurrentSiteList[0]
 [28]     Else
 [29]        If InStr(Request.Query, "=") Then
 [30]           Main.CurrentSite = Split(Request.Query, "=")[1]  ' Example: `Start` for `de_DE.UTF-8`
 [31]        Endif
 [32]     Endif
 [33]   %>
 [34]
 [35]   <!DOCTYPE html>
 [36]     <% Print sLangHTML %>
 [37]
 [38]     <!-- BEGIN SITE-HEAD  ------------------------------------------------------- -->
 [39]       <head>
 [40]         <meta charset="UTF-8">
 [41]         ...
 [42]         <!-- The title of the web page is displayed in the browser tab!
 [43]         <title><%=Main.CurrentSite%></title>
 [44]     ...
 [45]     <!-- END SITE-HEAD  --------------------------------------------------------- -->
 [46]
 [47]     <body onload="JSTimer1();">
 [48]       <<IncHeader>>
 [49]       <<IncNavigation>>
 [50]       <br>
 [51]       <main>
 [52]         <<IncContent>>
 [53]       </main>
 [54]       <<IncFooter>>
 [55]     </body>
 [56]   </html>

Kommentar

• In der Zeile 5 wird der Wert der Variable System.Language festgelegt. So sieht zum Beispiel der Gambas-Buch-Autor Gianluigi aus Genua die Webseiten im Projekt webapp5i in italienischer Sprache, während der Gambas-User Dag aus Spanien die englische Version der Website sieht.
• In den Zeilen 9 bis 18 wird in einer Select-Case-Kontrollstruktur der zur festgestellten Sprache passende Wert der Variablen sLang festgelegt. In der folgenden IF-Kontrollstruktur in den Zeilen 20 bis 24 wird der HTML-Quelltext generiert, der dann in der Zeile 36 ausgegeben wird.
• In der Zeile 45 wird der (übersetzte) aktuelle Seitenname im Tab des Browsers ausgegeben.
• Beim ersten Aufruf ist der Wert von Request.Query leer und es wird die Startseite in der festgestellten Sprache ausgegeben. Sonst wird der Anfrage-String geparst und die angeforderte Webseite erzeugt und als aktuelle Webseite ausgegeben.

In der Webpage IncHeader ist nur der Slogan der Website im Übersetzungsdialog zu übersetzen:

 [1] <!-- BEGIN: SITE-HEADER -->
 [2]   <header class="site-header">
 [3]     <img class="site-logo" src="./icons/logo3_256x256.svg" alt="Gambas-Logo">
 [4]     <div class="slogan">
 [5]       <p>
 [6]         <% Print ("Create web pages with Gambas-Webpage") %>
 [7]       </p>
 [8]     </div>
 [9]   </header>
 [10] <!-- END: SITE-HEADER -->

Kommentar

• Die Webpage IncHeader als Teil des Templates der Website wird mit «IncHeader» in der Webpage Main.webpage in jede auszuliefernde Webseite eingebunden.
• In der Zeile 5 wird der englische Text oder seine Übersetzung in Abhängigkeit vom Wert der Variable System.Language in einem <p>-Tag ausgegeben.

In der Webpage IncFooter ist aktuell nichts zu übersetzen:

 [1] <!--BEGIN SITE-FOOTER -->
 [2]   <footer class="site-footer">
 [3]     <p style="display:inline; padding: 0 0 0 1rem;">
 [4]       <img src="./icons/clock_white_510.svg" alt="CurrentTime" width="16" height="16">
 [5]     </p>
 [6]     <p id="set_time"></p>
 [7]     <p>
 [8]       <a href="#top">
 [9]         <img src="./icons/top_white.314.svg" alt="ToTop" width="16" height="16">
 [10]       </a>
 [11]     </p>
 [12]   </footer>
 [13] <!-- END SITE-FOOTER -->

Kommentar

• Das würde sich ändern, wenn Sie zum Beispiel vor der Ausgabe der aktuellen Zeit (Zeile 6) noch das aktuelle Datum in einem speziellen Format – so wie in der Webpage IncDate – ausgeben.
• Die Webpage IncFooter als Teil des Templates der Website wird mit «IncFooter» in der Webpage Main.webpage in jede auszuliefernde Webseite eingebunden.

Bei sehr langen Textpassagen wie zum Beispiel in der Start-Webseite oder in der Webseite mit dem Impressum ist es ein guter Plan, die ganze Seite komplett zu übersetzen und die Übersetzungen in einer Select-Case-Kontrollstruktur in Abhängigkeit vom Wert der Variable System.Language auszuwählen:

 [1] <%
 [2]   Select System.Language
 [3]   Case "de_DE.UTF-8" %>
 [4]   <h1>Willkommen</h1>
 [5]     <section>
 [6]       <!-- Bild mit Größenangaben und Bild-Unterschrift -->
 [7]       <figure>
 [8]         ...
 [9]         <figcaption>The founder of the Gambaflex company</figcaption>
 [10]       </figure>
 [11]       <h2>Firmengeschichte</h2>
 [12]       <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
 [13]       <h3>Der Neuanfang</h3>
 [14]       ...
 [15]     </section>
 [16]   <%
 [17]   Case "it_IT.UTF-8" %>
 [18]   <h1>Benvenuti</h1>
 [19]     <section>
 [20]       <!-- Immagine con informazioni sulle dimensioni e didascalia dell'immagine -->
 [21]       <figure>
 [22]         ...
 [23]         <figcaption>Il fondatore dell'azienda Gambaflex</figcaption>
 [24]       </figure>
 [25]       <h2>Storia dell'azienda</h2>
 [26]       <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
 [27]       <h3>Il nuovo inizio</h3>
 [28]       ...
 [29]     </section>
 [30]   <%
 [31]   Default %>
 [32]   <h1>Welcome</h1>
 [33]     <section>
 [34]       <!-- Image with size information and image caption -->
 [35]       <figure>
 [36]         ...
 [37]         <figcaption>The founder of the Gambaflex company</figcaption>
 [38]       </figure>
 [39]       <h2>History of the company</h2>
 [40]       <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
 [41]       <h3>The new start</h3>
 [42]       ...
 [43]     </section>
 [44] <% End Select %>

Auch die Webpage IncImprint wird komplett übersetzt und die Übersetzungen wieder in einer Select-Case-Kontrollstruktur in Abhängigkeit vom Wert der Variable System.Language ausgewählt!

 [1]   <%
 [2]   Dim sCopyright As String
 [3]
 [4]   Select System.Language
 [5]     Case "de_DE.UTF-8"
 [6]     sCopyright = File.Load("./.public/text_modules/de_copyright.html") %>
 [7]       <h1>Impressum</h1>
 [8]       <p>Angaben gemäß §5 Telemediengesetz (TMG)</p>
 [9]       Bruno Bär<br>
 [10]       Bodenstein-Strasse 122<br>
 [11]       10404 Berlin<br>
 [12]       <br>
 [13]       <h3>Erreichbarkeit</h3>
 [14]       ...
 [15]       <h3>Hinweise zum Urheberrecht</h3>
 [16]       <p><%=sCopyright%></p>
 [17]       ...
 [18]       <br>
 [19]   <%
 [20]     Case "it_IT.UTF-8"
 [21]     sCopyright = File.Load("./.public/text_modules/it_copyright.html") %>
 [22]       <h1>Imprint</h1>
 [23]       <p>Informazioni secondo il §5 di Telemedia Act (TMA)</p>
 [24]       Bruno Bär<br>
 [25]       Bodenstein-Strasse 122<br>
 [26]       10404 Berlin<br>
 [27]       <br>
 [28]       <h3>Accessibilità</h3>
 [29]       ...
 [30]       <h3>Note sul copyright</h3>
 [31]       <p><%=sCopyright%></p>
 [32]       ...
 [33]       <br>
 [34]     <%
 [35]     Default
 [36]     sCopyright = File.Load("./.public/text_modules/en_copyright.html") %>
 [37]       <h1>Imprint</h1>
 [38]       <p>Information according to §5 Telemedia Act (TMA)</p>
 [39]       Bruno Bär<br>
 [40]       Bodenstein-Strasse 122<br>
 [41]       10404 Berlin<br>
 [42]       <br>
 [43]       <h3>Accessibility</h3>
 [44]       ...
 [45]       <h3>Notes on copyright</h3>
 [46]       <p><%=sCopyright%></p>
 [47]       ...
 [48]       <br>
 [49]   <% End Select %>

Kommentar

• Besonderheiten können Sie in den Zeilen 6, 21 und 36 entdecken. Der längere, übersetzte Text zum Abschnitt mit den Hinweisen zum Urheberrecht wird in drei Dateien (de_copyright.html, en_copyright.html und it_copyright.html) ausgelagert, die im Verzeichnis .public/text_modules abgespeichert werden.
• In den Zeilen 6, 21 und 36 wird der Inhalt der geladenen Text-Datei jeweils in einem Gambas-Block <%=sCopyright%> der deklarierten String-Variable sCopyright als Wert zugewiesen. Das ist zum Beispiel der Inhalt der Text-Datei it_copyright.html:

Nella misura in cui in questo sito web vengono citati termini protetti dal diritto dei marchi, marchi protetti (parole e/o immagini) o nomi di prodotti protetti, segnaliamo espressamente 
che la denominazione di questi marchi, nomi e termini serve esclusivamente alla descrizione editoriale o all'identificazione dei prodotti e/o dei produttori citati o delle tecnologie e 
degli usi descritti. Tutti i diritti sui marchi protetti e/o sui nomi dei prodotti citati in questo libro online sono di proprietà dei rispettivi titolari dei diritti e vengono qui 
espressamente riconosciuti. Tutti i marchi e le marche citati negli articoli dei singoli capitoli ed eventualmente protetti da terzi sono soggetti senza limitazioni alle disposizioni 
della legge sui marchi rispettivamente in vigore e ai diritti di proprietà dei rispettivi titolari registrati. La menzione di nomi di prodotti, di prodotti e/o dei rispettivi 
produttori ha scopo puramente informativo e non costituisce pubblicità. Se, contrariamente alle nostre intenzioni, dovessero essere violati i diritti di terzi, vi prego di comunicarmelo senza alcun costo.

• Der aktuelle Inhalt der String-Variable sCopyright wird in einer Select-Case-Kontrollstruktur in Abhängigkeit vom Wert der Variable System.Language ausgewählt und in den Zeilen 16, 32 oder 48 in die Webseite eingefügt.
• Die unterschiedlichen Text-Dateien können Sie jederzeit bei entsprechenden Rechten auf dem Webserver editieren oder lokal aufbereiten und dann auf den Webserver in das passende Verzeichnis kopieren.

Diese Vorgehensweise mit den einzufügenden (längeren, übersetzten) Texten in eine bestehende Webseite würde sich auch gut für eine News-Webseite anbieten, in der Sie so die neuesten Informationen zeitnah veröffentlichen könnten.

Das Besondere in Bezug auf Übersetzungen in der Webpage IncNavigation liegt darin, dass Sie nur einen Text direkt im Übersetzungsdialog übersetzen, aber bereits existierende Übersetzungen für die Menüeinträge übernehmen:

 [1] <%
 [2]   Dim sLink, sNavItems As String
 [3]   Dim i As Integer
 [4]
 [5]   For i = 0 To Main.CurrentSiteList.Max
 [6]     If Main.CurrentSiteList[i] = Main.CurrentSite Then
 [7]        sLink = Application.Root & "?" & "site=" & Main.CurrentSite
 [8]        sNavItems &= "<li class=" & Chr(34) & "site-current" & Chr(34) & "><a href=" & Chr(34) & sLink & Chr(34) & ">" & Main.CurrentSite & "</a></li>" & gb.Lf
 [9]     Else
 [10]        sLink = Application.Root & "?" & "site=" & Main.CurrentSiteList[i]
 [11]        sNavItems &= "<li><a href=" & Chr(34) & sLink & Chr(34) & ">" & Main.CurrentSiteList[i] & "</a></li>" & gb.Lf
 [12]     Endif
 [13]   Next
 [14] %>
 [15] <nav class="site-nav">
 [16]    <!-- Switching with the Toogle button between horizontal and vertical menu at SCREEN < 600px -->
 [17]    <button class="menubutton" onclick="this.classList.toggle('showmenu')">
 [18]      <% Print ("Menu") %>
 [19]    </button>
 [20]    <ul>
 [21]      <% Print sNavItems %>
 [22]    </ul>
 [23] </nav>

Kommentar

• In den Zeilen 7 und 10 übernehmen Sie die Übersetzungen der Menü-Einträge im String-Array Main.CurrentSiteList in Abhängigkeit vom Wert der Variable System.Language aus der Webpage Main.webpage.
• Nur das Wort 'Menu' in der Zeile 18 wird übersetzt. Das (englische) Wort oder seine Übersetzung in der Zielsprache sehen Sie aber nur dann, wenn das so genannte 'Hamburger Menü' angezeigt wird. Das Symbol für das vertikale Menü sehen Sie, wenn der Ausgabebildschirm eine vorgegebene Größe – festgelegt in der CSS-Datei navigation.css – unterschreitet.

Abbildung 24.6.2.5.2: Vertikales Menü in deutscher Sprache

In der Webpage IncTime wird nur in der Zeile 4 der Text `Current time:` im Übersetzungsdialog in der IDE in die Zielsprachen übersetzt:

 [1] <!-- BEGIN: INSERT CURRENT TIME -->
 [2]   <div class="thin-box">
 [3]     <figure>
 [4]       <h2><% Print ("Current time:") %></h2>
 [5]       <h3 id="set_time"></h3>
 [6]     </figure>
 [7]   </div>
 [8] <!-- END: INSERT CURRENT TIME -->

In Abhängigkeit vom Wert der Variable System.Language werden Datumsangaben in einem bestimmten Stil (Wochentag, Tag (Zahl), Monatsname und Jahreszahl) für die deutsche, englische und italienische Sprache erzeugt.

Für das englische Datum würde eine Angabe wie `Thursday, 12 October 2022` ausreichen. Es sollten aber Ordnungszahlen verwendet werden. Ordnungszahlen werden nicht durch einen Punkt markiert, sondern durch eine kurze Zeichenkette (st, nd, rd und th), die nach dem u.a. Schema (Zeilen 11 bis 26) festgelegt wird.

Im Italienischen wird das Datum im o.a. Stil in Kleinbuchstaben und ohne Interpunktion geschrieben (Beispiel: martedì 24 gennaio 2023). Davon wird insofern abgewichen, dass der Wochentag stets mit einem Großbuchstaben begonnen wird, weil er am Anfang einer Zeile steht.

 [1] <%
 [2]   Dim sDate As String
 [3]   Dim sDay As String
 [4]   Dim sOrdinalNumber As String
 [5]
 [6]   Select System.Language
 [7]     Case "de_DE.UTF-8"
 [8]       sDate = Format(Now, "dddd, d. mmmm yyyy")
 [9]     Case "en_GB.UTF-8"
 [10]       Select Day(Now)
 [11]         Case 1
 [12]           sOrdinalNumber = "1st"
 [13]         Case 2
 [14]           sOrdinalNumber = "2nd"
 [15]         Case 3
 [16]           sOrdinalNumber = "3rd"
 [17]         Case 21
 [18]           sOrdinalNumber = "21st"
 [19]         Case 22
 [20]           sOrdinalNumber = "22nd"
 [21]         Case 23
 [22]           sOrdinalNumber = "23rd"
 [23]         Case 31
 [24]           sOrdinalNumber = "31st"
 [25]         Default
 [26]           sOrdinalNumber = "th"
 [27]       End Select
 [28]       sDate = Format(Now, "dddd, ") & Format(Now, "d") & sOrdinalNumber & Format(Now, " mmmm yyyy")
 [29]     Case "it_IT.UTF-8"
 [30]       sDay = Format(Now, "dddd")
 [31]       sDate = UCase(Left(sDay)) & Mid(sDay, 2) & "  " & Format(Now, "d mmmm yyyy")
 [32]     Default
 [33]       sDate = Format(Now, "dddd, d mmmm yyyy")
 [34]    End Select
 [35] %>
 [36] <!-- BEGIN: INSERT CURRENT DATE -->
 [37]   <div class="thin-box">
 [38]     <figure>
 [39]       <h2><% Print ("Current date:") %></h2>
 [40]       <h3><% Print sDate %></h3>
 [41]     </figure>
 [42]   </div>
 [43] <!-- END: INSERT CURRENT DATE -->

Kommentar

• Übersetzungen im Übersetzungsdialog werden für die Zielsprachen in der Zeile 39 vorgenommen.
• In der Zeile 40 wird der aktuelle Wert der String-Variable sDate in einem <h3>-Tag in den HTML-Quelltext eingefügt.

In der Webpage IncMultimedia werden alle sechs Übersetzungen für die Zielsprachen im Übersetzungsdialog in den Zeilen 6, 11, 18, 23, 30 und 35 vorgenommen.

 [1]      <h1>Multimedia</h1>
 [2]
 [3] <!-- INSERT IMAGE -->
 [4]      <div class="thin-box">
 [5]        <h3>
 [6]          <% Print ("Insert images flexibly") %>
 [7]        </h3>
 [8]        <figure>
 [9]          <img src="./images/tom_780x1012.jpg" alt="Tom" width="343" height="445">
 [10]          <figcaption>
 [11]            <% Print ("Tom in rock concert in Berlin") %>
 [12]          </figcaption>
 [13]        </figure>
 [14]      </div>
 [15] <!-- INSERT AUDIO -->
 [16]      <div class="thin-box">
 [17]        <h3>
 [18]          <% Print ("Insert audio files") %>
 [19]        </h3>
 [20]        <figure>
 [21]          <audio src="./audiovideo/tom.ogg" type="audio/ogg" controls></audio>
 [22]          <figcaption>
 [23]            <% Print ("Singer: Tom - the Berliner") %>
 [24]          </figcaption>
 [25]        </figure>
 [26]      </div>
 [27] <!-- INSERT VIDEO -->
 [28]      <div class="thin-box">
 [29]        <h3>
 [30]          <% Print ("Insert video files") %>
 [31]        </h3>
 [32]        <figure>
 [33]          <video src="./audiovideo/viehscheid.mp4" controls></video>
 [34]          <figcaption>
 [35]            <% Print ("Cattle drive in Gunzesried (Allgäu)") %>
 [36]          </figcaption>
 [37]        </figure>
 [38]      </div>