Programmierung der Webseite
www.plopsite.de

Den größten Umfang meiner Webseite nehmen die mehr als 7000 einzelnen Seiten mit je einem Porzellanverschluß ein. Da ich alle diese Seiten in Deutsch, Englisch und Polnisch erstelle, ergeben sich schon mehr als 21 000 Seiten. Es ist klar, dass man so viele Seiten nicht „von Hand“ programmieren kann. Daher verwende ich eine Strategie, bei der diese Seiten automatisiert durch spezielle Software geschrieben werden.

Als „Ausgangsmaterial“ verwende ich meine Sammlung von Bilddateien jedes einzelnen Verschlusses und meine Excel-Tabelle die zusätzlichen Informationen zu jedem einzelnen dieser Verschlüsse enthält.

Übersicht des Arbeitsablaufs


Nr. Arbeitsschritt Geeignete Computerprogramme
Apple-Computer PC
1. Komprimieren der Bilder,
Einfügung eines Logos
GraphicConverter Irfan View
2. Erstellen einer Tabelle mit Texten zu den Bildern und weiteren Inhalten der Webseite Excel, NeoOffice Excel, OpenOffice
3. Programmieren von Muster-Webseiten Jeder HTLM-Editor, z.B. NVU Jeder HTLM-Editor
4. Umwandlung von Sonderzeichen wie  ä, é å, ø, ... in Unicode-Zeichen www.pinyin.info www.pinyin.info
5. Automatische Generierung der Webseiten WebMerge WebMerge

1. Komprimieren der Bilder, Einfügung eines Logos

Die Bilddateien sind im Original im PNG-Format mit einer Auflösung von 300 dpi gespeichert. Eine Datei ist dann ca. 180 - 200 kb groß. Für Webseiten ist das natürlich viel zu groß. Daher werden alle Bilddateien für meine Webseite in JPG-Dateien mit einer Auflösung von 72 dpi und einer JPG-Kompression von 30% umgewandelt. Außerdem wird in jede Bilddatei die URL meiner Webseite (www.plopsite.de) als Logo eingefügt. Dadurch verringert sich die Dateigröße auf nur noch 8-12 kb, also auf nur noch ca. 5% der ursprünglichen Größe. Abb. 1 vergleicht die Qualität der Bilder auf der Webeseite in Originalgröße (Abb. 1a und 1b) bzw. in einer Vergrößerung eines Bildausschnitts (Abb. 1c und 1d). Dabei stellen Abb. 1a und 1c eine Datei im nicht komprimierten PNG-Format und Abb. 1b und 1d im komprimierten JPG-Format dar. Abb. 1b stellt das original in der Webseite verwendete Dateiformat dar. Die Bildausschnitt-Vergrößerung in Abb. 1d zeigt einen leichten Qualitätsverlust durch die JPG-Komprimierung, relativ zum unkomprimierten Bildausschnitt-Vergrößerung in Abb. 1c). Bei den nicht vergrößerten Bildern ist dieser Qualitätsverlust allerdings kaum sichtbar (Abb.1a) = nicht komprimiert, Abb.1b)= komprimierte, in der Webseite verwendete Bilddatei).

Abb. 1 Erstellung der Bilder von Porzellanköpfen / Bügelverschlüssen


2. Erstellen einer Tabelle mit Texten zu den Bildern und weiteren Inhalten der Webseite

Die meisten Daten in der von mir erstellten Excel-Tabelle werden auf eine von Drei Arten generiert:
  • Durch manuelles Eintippen der auf dem Porzellankopf aufgedruckten oder von mir ermittelten Daten
  • Durch automatisches Ergänzen mit der Excel-Funktion „SVERWEIS“
  • Durch automatisches Kombinieren von Informationen aus verschiedenen Tabellen-Spalten mit der Excel-Funktion „VERKETTEN“
Abb. 2 zeigt einen Ausschnitt dem Haupt-Tabellenblatt, in dem sich die Informationen zu den einzelnen Porzellanköpfen befinden:

Abb. 2 Bilschirmfoto der Haupt-Tabelle

Abb. 3 zeigt den Inhalt des Tabellenblatts, das zum Ergänzen der Daten in dem Haupt-Tabellenblatt verwendet wird.

Abb. 3 Bildschirmfoto der Tabelle mit ergänzenden Daten

Die Farbe der Titelzeile gibt an, wie die Daten in die Tabelle eingefügt werden.
Gelb: manuell eingetippte Daten
Blau: durch SVERWEIS eingefügte Daten
Weiß: durch VERKETTEN eingefügte Daten

Zunächst trage ich die Stadt, wie auf dem Porzellankopf aufgedruckt, den Namen der Brauerei (wie aufgedruckt oder wie in Brauereiverzeichnissen ermittelt) und den Namen der Bild-Datei des entsprechenden Porzellanverschlusses ein (Abb. 2 oben, Spalten mit gelber Überschrift). In Excel habe ich eine separates Tabellenblatt angelegt, in dem eine Lange Liste mit Städte-Namen eingefügt ist und zu jeder Stadt sind weitere Angaben, wie das jeweilige Land, die Region in dem Land, alternative Namen der Stadt (z.B. deutscher und polnischer Name der Stadt), usw. eingetragen. Mit dem Excel-Befehl „SVERWEIS“ kann Excel anhand der Daten in dem separaten Tabellenblatt automatisch Inhalte der Spalten mit den blauen Überschriften (Abb. 2 oben) ergänzen. Andere Informationen, die ich für die Webseite benötige, wie z.B. den Namen der Bild-Datei mit der jeweiligen Landes-Flagge, kann ich von Excel automatisch durch Verketten von Inhalten anderer Spalten der Excel-Tabelle erhalten (Abb. 2 oben, Spalten mit weißer Überschrift)

Die SVERWEIS-Formel (Abb. 4) sieht wie folgt aus:

= SVERWEIS ( Suchkriterium ; Matrix ;Spaltenindex ; Bereich_Verweis)

Suchkriterium ist die Zelle in der Excel-Tabelle in der z.B. der Name der Stadt, in diesem Beispiel in Zeile 2, Spalte B die Stadt „Allenstein“, steht (Abb. 2, Abb. 4). In der Formel würde man daher für „Suchkriterium“ eingeben „B2“ (Abb. 4).

„Matrix“ ist die Angabe des Namens des Tabellen-Blatts von Excel und der Bereich in diesem Tabellenblatt (Abb. 3), in dem die Ergänzenden Daten stehen. In der Formal würde man daher für „Matrix“ eingeben „ Ergänzende-Daten'!A2:G6“ (Abb. 4). Das Tabellenblatt heißt „Ergänzende-Daten“ und der Bereich der in diesem Tabellenblatt die Daten enthält ist von Zelle A2 bis G6, was in Excel so geschrieben werden muß: ’!A2:G6

„Spaltenindex“ gibt an, aus welcher Spalte der zu „Allenstein“ zugehörige Inhalt in die Tabelle eingefügt werden soll. In diesem Fall steht in Spalte Nr. 6 die jeweils zur vorgegebenen Stadt zugehörige Region, d.h. bei „Allenstein“ wäre das „Ostpreußen“ (Abb. 3, Abb. 4).

Bei „Bereich_Verweis“ trägt man einfach „FALSCH“ ein (Abb. 4).

Die Formel sieht also für Zeile 2 mit „Allenstein“ als Name der Stadt wie folgt aus:

= SVERWEIS ( B2 ; Ergänzende-Daten’!A2:G6 ; 6 ; FALSCH )

Abb. 4 Bildschirmfoto der Excel-Formel SVERWEIS

Will man nun diese Formal auf unter Umständen tausende von Werten in der selbe Spalte anwenden, klickt man einmal in die Excel-Zelle mit der Formel, geht dann mit der Maus genau auf die rechte untere Ecke der Zelle, klickt und hält die Maustaste fest und zieht dann mit der Maus die Excel-Tabellen Spalte einfach herunter. Dadurch wird die Formel entsprechend auf die anderen Zeilen in der selben Spalte angewandt.

Die VERKETTEN-Formel (Abb. 5) sieht wie folgt aus:

= VERKETTEN ( Text1 ; Text2 ; ... )

Text1, ... ist entweder ein direkt in die Formel eingegebener Text, wobei der Text in Anführungszeichen geschrieben werden muß, oder Text1 ist eine Spalte und Zeile in der Excel-Tabelle. In diesem Fall müßten drei Textbausteine verkettet werden:

Text1 = „flag_“
Text2 = A2
Text3 = „.jpg“

Die Formel sieht dann wie folgt aus:

= VERKETTEN ( „flag_“ ; A2 ; “.jpg“ )

Dadurch würde für den Namen für die Datei der Landesflagge immer die Information aus Spalte A der Excel-Tabelle (Abb. 2) herangezogen und vor dem Landeskürzel „ flag_ “und nach dem Landeskürzel „ .jpg “ angefügt. Ist das Landeskürzel z.B. „pl“ für Polen ergibt die Formel als Dateinamen für die Flagge „flag_pl.jpg“ (siehe Abb. 2, Spalte J).

Abb. 5 Bildschirmfoto der Excel-Formel VERKETTEN

Mit diesen beiden Formeln kann man sehr viele Informationen automatisch in die Excel-Tabelle einfügen lassen, und muß selbst nur wenige Informationen manuell eintippen. Sehr nützlich sind diese Formeln auch, wenn man die Webseite in verschiedenen Sprachen erstellen möchte. Man kann dann mit SVERWEIS ganz einfach ein Wort oder ein Text von einer in eine andere Sprache übersetzen lassen.

Google-Maps einbinden

Mit SVERWEIS kann ich auch kleine, statische Google-Maps Landkarten „programmieren“, indem ich in den HTLM-Code für eine Google-Maps Landkarte über SVERWEIS jeweils die zur Stadt in dem sich die Brauerei befindet passenden Geokoordinaten einfüge.

Der HTLM-Code für eine solche Google-Maps Landkarte von Deutschland z.B. mit einer Markierung für München ist wie folgt:

Wenn man diese URL in einen Browser kopiert, wird die entsprechende Landkarte angezeigt (Abb.6).

Abb. 6  Beispiel für eine über Google-Maps eingebundenen Landkarte

Detaillierte Anleitungen zur Einfügung von statischen Landkarten liefert Google:
http://code.google.com/intl/de/apis/maps/documentation/staticmaps/

Die Geokoordinaten zu Städten kann man z.B. über diese Webseite ermitteln:
http://www.svensoltmann.de/maps-koordinaten.html


3. Programmieren von Muster-Webseiten


Die Muster-Webseiten, die man für WebMerge benötigt, sind ganz normale HTML-Dateien mit einem Unterschied. Die HTML-Dateien enthalten an den gewünschten Stellen des HTML-Codes Platzhalter. Diese Platzhalter ersetzt WebMerge dann durch Daten die in der Excel-Tabelle enthalten sind. So wird anhand der Daten in jeder Zeile der Excel-Tabelle eine eigene HTML-Datei generiert.

Zum Beispiel wird in normalem HTLM-Code der Titel einer Webseite mit diesem Code angegeben:

<title> Brauerei-Webseite der Holsten-Brauerei, Hamburg </title>

In einer Muster-Webseite, die mit WebMerge verwendet werden könnte würde die gleiche Zeile dann z.B. so aussehen:

<title> Brauerei-Webseite der [WM-FIELD: BRAUEREI], [WM-FIELD: STADT_AUFDRUCK]</title>

WebMerge würde dann:
„[WM-FIELD: BRAUEREI]“                  durch         „Holsten-Brauerei“     ersetzen, und
„[WM-FIELD: STADT_AUFDRUCK]“ durch         „Hamburg“                  ersetzen.


4. Umwandlung von Sonderzeichen (ä, é å, ø, ...) in Unicode-Zeichen

Unicode Zeichen ist HTLM-Code für einzelne Sonderzeichen. Zum Beispiel ist das Unicode Zeichen für “ä“ die Zeichenfolge „&#228;“. Unicode hat auf Webseiten den Vorteil, das die Sonderzeichen, unabhängig von der Software des Nutzers, richtig angezeigt werden. Werden auf Webseiten keine Unicode-Zeichen verwendet und hat ist die Verwendung von bestimmten Sonderzeichen in dem Computersystem des Webseiten-Betrachters nicht auf die in der Webseite verwendeten Sonderzeichen eingestellt, so werden die Sonderzeichen dem Webseiten-Betrachter nicht korrekt dargestellt und z.B. der Begriff „Bären-Bräu“ wird als „ B☐ren-Br☐u “ dargestellt, oder wird so oder so ähnlich dargestellt. Deutsche Sonderzeichen werden eventuell noch korrekt dargestellt, aber Tschechische, Polnische, Dänische, oder Russische (kyrillische) Sonderzeichen werden eventuell nicht korrekt dargestellt.

Wort ohne Unicode-Formatierung Wort mit Unicode-Formatierung
Bären-Bräu B&#228;ren-Br&#228;u
ä &#228;

Das Wort „Bären-Bräu“ wird also zu „ B&#228;ren-Br&#228;u“. Genau diese Umwandlung mach die Webseite Pinyin.info für praktisch alle gängigen Sprachen, auch wenn die Pinyin.info eigentlich zur Umwandlung chinesischer Schriftsymbole in Unicode gedacht ist.

Die nachfolgende Tabelle stellt die Sonderzeichen einiger Sprachen einmal unter Verwendung von Unicode und einmal ohne Unicode dar. Eventuell werden zumindest einige der Sonderzeichen „Ohne Unicode“ auf deinem Computer nicht korrekt angezeigt werden:

Sprache Unicode-Zeichen Ohne Unicode
Deutsch &#228; &#252; &#246; &#223; ä ü ö ß
Französisch &#224; &#230; &#231; &#233; &#232; &#234; à æ ç é è ê
Dänisch &#229; &#230; &#248; å æ ø
Polnisch &#261; &#263; &#281; &#322; &#324; &#243; &#347; &#378; &#380; ą ć ę ł ń ó ś ź ż
Tschechisch &#225; &#269; &#271; &#233; &#283; &#237; &#328; &#243; &#341; &#353; &#357; &#250; &#367; &#253; &#382; á č ď é ě í ň ó ŕ š ť ú ů ý ž
Russisch &#1072; &#1073; &#1074; &#1075; &#1169; &#1107; &#1076; &#1106; &#1077; &#1108; &#1105; ... а б в г ґ ѓ д ђ е є ё ...
Litauisch &#261; &#269; &#279; &#281; &#303; &#353; &#363; &#371; &#382; ą č ė ę į š ū ų ž

Um dieses Problem zu vermeiden verwende ich Unicode-Zeichen auf meiner Webseite, denn ich habe natürlich keinen Einfluss auf die Computer-Einstellungen der Leser meiner Webseite.

Auf der Webseite
http://www.pinyin.info/tools/converter/chars2uninumbers.html

kann man Text ohne Unicode-Zeichen in Text mit Unicode-Zeichen umwandeln.


5. Automatische Generierung der Webseiten


Das Prinzip der Funktion von WebMerge ist auf der Webseite des Anbieters dieser Software dargestellt: www.fourthworld.com/products/webmerge/
Besserer Anleitungen sind hier zu finden: http://www.web-procreate.com/webmerge.htm
Bitte lasst euch nicht davon irritieren, dass WebMerge anscheinend in erster Linie von Online-Händlern verwendet wird, die  eine große Anzahl an Produkten mit wenig Aufwand in einen eigenen Online-Shop präsentieren möchten. Die Präsentation einer privaten Sammlung von Gegenständen wie zum Beispiel Porzellanköpfen ist im Prinzip nichts anderes, nur dass die Verkaufsabsicht fehlt.


Startseite
Startseite