Inhaltsverzeichnis

24.6.2.5 Projekt 5 – I18N

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:

BILD DB-REPORT

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:

24.6.2.5.1 Hinweis

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.

24.6.2.5.1.1 Übersetzungsdialog

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

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

24.6.2.5.2 Übersetzungen

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.

24.6.2.5.2.1 Webpage Main

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

24.6.2.5.2.2 Webpage IncHeader

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

24.6.2.5.2.3 Webpage IncFooter

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

24.6.2.5.2.4 Webpage IncHome

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 %>

24.6.2.5.2.5 Webpage IncImprint

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

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.

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.

24.6.2.5.2.6 Webpage IncNavigation

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

HH-MENÜ

Abbildung 24.6.2.5.2: Vertikales Menü in deutscher Sprache

24.6.2.5.2.7 Webpage IncTime

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 -->

24.6.2.5.2.8 Webpage IncDate

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.

DE EN IT

 [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

24.6.2.5.2.9 Webpage IncMultimedia

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>

Download