HTML-Design mit dem HomePage Pinguin
Mit dem HomePage Pinguin wurde der erste kommerzielle HTML-Designer für den ATARI veröffentlicht. Es ist also durchaus lohnend, sich im Rahmen eines Kurses mit dem Programm zu beschäftigen.
Leider wurde in dem HomePage Pinguin-Testbericht (im folgenden wird das Programm als Pinguin bezeichnet) nicht auf die Unterschiede zwischen der Shareware-Version 1.7 und der kommerziellen 2.0 pro eingegangen. In diesem Kurs geht es deshalb hauptsächlich um die Neuheiten, z.B. die Nutzung von Plugins, dem Navigator uvm. Ab der nächsten Ausgabe wird voraussichtlich auch die neue v2.5 mit in den Kurs einbezogen werden.
Am Anfang war die Idee
Ideen und Kreativität gehören zu einer guten Homepage ebenso dazu wie die richtige Planung. Wer nur eine vier Seiten umfassende Mini-Homepage plant, wird vielleicht fragen, wozu man dann noch eine Planung brauchte. Homepages neigen jedoch dazu, immer weiter zu wachsen - mit vier Seiten fängt es an, mit 100 hört es auf. Wenn Sie sich von der Notwendigkeit einer groben Planung überzeugen wollen, dann besuchen Sie doch die Homepage von Microsoft: Ein gelungenes Negativbeispiel, bei dem neben einer Überfrachtung durch Grafiken auch noch die Optimierung für den Browser von Microsoft auffällt. Wer schon einmal versucht hat, eine bestimmte Datei auf Microsofts WWW-Labyrinth zu finden, wird jedenfalls dem Wahnsinn nahe sein.
Überlegen Sie sich also, was auf Ihrer Homepage alles vorkommen soll: Die Themen, Highlights und Grafiken, die dazu passen könnten. Der nächste Schritt wird dann in den meisten Fällen die Gestaltung der Hauptseite sein, auf der Verweise zu den Themen Ihrer Homepage zu finden sind.
Dann kam das Programm
Der Pinguin erleichtert die Arbeit enorm, denn Bilder, Verweise und Texte sind nur eine Sache von ein paar Mausklicks. Die erzeugten HTML-Seiten ähneln sich zudem in ihrer Struktur - was natürlich nicht heißt, dass diese in Ihrem Browser alle gleich aussehen. Zudem erzeugt der Pinguin fehlerfreie Seiten, die auf allen Browsern korrekt angezeigt werden. Sie brauchen sich also keine Sorgen zu darüber zu machen, dass Netscape oder irgendein anderer Browser die Seiten falsch anzeigt - es sei denn, der Browser weist selber grobe Fehler in der Seitendarstellung auf (z.B. ältere Versionen von WenSuite). Der Pinguin bietet übrigens Funktionen an, die nicht von allen Browsern verstanden werden (z.B. Wasserzeichen-Hintergrundbilder), dies führt aber nicht zu einer Beeinträchtigung der Darstellungsqualität.
Zusätzlich
BubbleGEM sollten Sie installieren, falls nicht schon geschehen, da es zu den meisten Objekten in den Pinguin-Dialogen eine ausführliche Erklärung gibt. Als Browser ist entweder das bekannte CAB (ab 1.5) oder der speziell für den Pinguin noch geeignetere Light of Adamas zu empfehlen. Letzterer versteht wirklich alle HTML-Befehle, die der Pinguin für die erzeugten Seiten verwendet. Adamas laden Sie sich am besten von der Homepage des Autors Jens Heitmann herunter, da eventuell kursierende Versionen in Mailboxnetzen mit höchster Sicherheit veraltet sind. OLGA und Multitasking sind keine zwingende Voraussetzung, um eine Homepage komfortabel zu erstellen, und es gibt auch Texteditoren, die als Accessory laufen (z.B. Edith pro).
Pinguin
Betreten wir nun die Eisscholle und lassen uns zu unserer ersten Seite treiben: Mit "Neues Projekt" (im Datei-Menü) erstellen Sie eine neue Seite. Es beginnt eine Sequenz von Dialogboxen, am Ende wird die Seite dann gespeichert (sie kann aber auch zwischendurch gespeichert werden). Sollte der Browser parallel laufen, wird die Seite von dem Browser neu geladen, sobald sie im Pinguin abgespeichert wurde. Innerhalb des Pinguins können Sie also mit den Werten durchaus experimentieren, die Ansicht im Browser zeigt dann, ob es ästhetisch oder doch eher ein Fall für den digitalen Papierkorb ist.
Titel
Der Titel erscheint grundsätzlich sowohl in der Titelleiste Ihres Browsers als auch auf der Seite selber. So wird sichergestellt, dass der Besucher Ihrer Seite den Titel nicht einfach übersieht. Richtig interessant wird es bei der Auswahl der Schriftart (über das kleine, mit "Font..." betitelte Icon zu erreichen), denn damit können Sie dem Browser anweisen, eine bestimmte Schrift für einen Textabschnitt zu benutzen, sofern sie auf dem Computer vorhanden ist. Es sollte immer mehr als eine Schriftart angegeben werden, da der Browser die Liste der Reihe nach durchgeht und die erste Schriftart nimmt, die auf dem Computer verfügbar ist.
Viele WWW-Seiten machen keinen Gebrauch von unterschiedlichen Schriften - ein Fehler, denn schon durch die Schrift hebt sich eine Seite aus der Masse heraus. Für die Seite "Verweise in die weite ATARI-Welt" (Bild 1) wurde z.B. "Verdana" gewählt, die sehr weit verbreitet ist. Ist die Schrift exotischer, sollte man die Schrift in ein ZIP-Archiv packen und auf der Hauptseite einen Verweis auf diese Datei legen. Im Text sollte ein Hinweis wie z.B. "Optimale Anzeige mit der ... Schriftart" stehen.
Unter Schriftgröße können Sie aus 14 Größen auswählen. Warum, wenn man doch bereits eine Überschriftengröße angegeben hat? Ganz einfach, HTML kennt verschiedene Befehle für die Schriftgröße, und einige Browser sehen für Überschriften eine andere Standardschriftart vor - z.B. CAB. Wählen Sie als Schriftgröße eine andere als 0 (= nicht verändern), interpretiert der Browser die Überschrift als normalen Text. Netscape, Adamas und Internet Explorer sehen allerdings keine zusätzliche Standardschriftart für Überschriften vor.
Hintergrund
Musikalisch kann sich Ihre Homepage mit einer Hintergrundmusik zeigen, die dafür üblichen Dateiformate sind Wave (WAV), Sun/NeXT (AU) und MIDI (MID). Die beiden ersten sind für Sprachfetzen gut geeignet, MIDI-Dateien bleiben auch bei kompletten Liedern schön klein, hören sich aber auf billigen Soundkarten auch ebenso billig an.
Unter Optionen können noch einige Einstellungen vorgenommen werden. Für Sprachfetzen wie z.B. "Moin!" reicht es, wenn der Sample nur einmal gespielt oder die Zeit, bis der Sample wiederholt wird, etwas höher angesetzt wird. Manche Seiten beziehen ihre Wirkung vor allem aus dem Hintergrundbild und wirken gut gelungen, auch ohne Frames oder aufwendige Tabellenkonstruktionen. Die Hintergrundfarbe sollte immer mit angegeben werden und im Farbton dem Hintergrundbild entsprechen. Für die komfortable Farbauswahl gibt es im Pinguin das RGB-Tool, das über das Farbpaletten-Symbol erreichbar ist.
Bilder
Für meine ATARI-Verweis-Liste füge ich jetzt noch ein Bild hinzu, und zwar passenderweise ein ATARI-Symbol. Damit auch jeder, der die Darstellung von Bildern abschaltet, etwas von dem Bild hat, füge ich noch einen alternativen Text hinzu. Die Zentrierung rückt die Grafik in den Mittelpunkt.
Um Text um die Grafik herumfließen zu lassen, bietet der Pinguin einige Einstellungsmöglichkeiten. Die drei ersten Auswahlpunkte (oben, mittig, unten) sind zur Bildbeschriftung gedacht. Ein weiches Herumfließen wird mit "keine" (Bild links) erreicht, mögliche Anwendungsgebiete wären z.B. Initialen und Illustrationen. Auf der Diskette, die zusammen mit dem Pinguin ausgeliefert wird, finden Sie einige Grafiken, allerdings keine Cliparts, denn dazu sind die Wünsche zu verschieden.
Ein Unterschied zwischen der v2.0 und 2.08 ist der horizontale und vertikale Abstand zwischen Grafik und Text. Der Abstand ist so etwas wie ein unsichtbarer Rahmen und kann die Wichtigkeit des Bildes betonen.
Texte
In der 2.0-Version hat sich in diesem Dialog im Vergleich mit dem Pinguin 1.7 nicht viel geändert bis auf die Auswahl für Schriften. Anders verhält es sich mit der nächsten Version, aber das soll Bestandteil des nächsten Teils sein. Der Textfilter wird übrigens noch intelligenter werden und das Layout besser in die HTML-Sprache übersetzen.
Verweise
Im Gegensatz zu vielen anderen Web-Editoren greift der Pinguin Ihnen beim Einrichten eines Verweises unter die Arme: Wurde eine HTML-Datei ausgewählt, wird deren Titel ermittelt und im Feld "Hervorgehobene Beschreibung" eingetragen. Mittels Alta Lista 2.0 funktioniert das sogar mit AVR-und SID-Dateien.
Das gewünschte Ziel für den Verweis kann auch wichtig sein, wenn gar keine Frames auf Ihrer Seite vorkommen. Wenn Sie z.B. auf Alta Vista (WWW-Suchmaschine) einen Verweis einrichten, können Sie im Popup "Verweisziel" "Neues Fenster" anwählen - wird Alta Vista auf Ihrer Seite dann ausgewählt, wird ein neues Browserfenster für dieses Verweisziel geöffnet. Diese Verfahrensweise wird immer beliebter, teils aus Eitelkeit (schließlich zeigt der Browser weiterhin die eigene Seite an), aus praktischen (schnelles Zurückspringen auf die Ursprungsseite) oder aus wirtschaftlichen Gründen (Werbekunden möchten wissen, wie lange die Seite und damit ihre Werbung angezeigt wird).
Für jeden Verweis lässt sich eine eigene Schriftart einstellen, beschränken Sie sich aber auf etwa drei Schriften, ansonsten wirkt es leicht chaotisch.
Meta-Informationen
Weder übernatürlich noch psychologisch, sondern einfach nur nützlich sind die Meta-Informationen, die im Pinguin 2.0 über den Kontaktdialog erreichbar sind (dies ändert sich allerdings in v2.5). Viele Suchmaschinen werten diese aus und verwenden sie dann für ihre Datenbank. Sie müssen die Meta-lnformationen nicht nutzen; sinnvoll ist es aber schon, denn sonst droht Ihrer Seite die automatische Generierung der fehlenden Informationen. Alta Vista und Alta Lista (bis 1.6) schnappen sich zum Beispiel die ersten 250 Zeichen und verwenden diese als Seitenbeschreibung.
Moduswechsel - "Freestyle"
Bisher haben wir im Normalmodus gearbeitet, der den früheren Pinguin-Versionen sehr ähnelt.
Was ist aber, wenn Sie bereits genaue Vorstellungen vom Aufbau Ihrer Seite haben, dieser Aufbau aber partout nicht mit dem Normalmodus übereinstimmt? Für diesen Fall gibt es den "Freestyle"-Modus, der eine Zwischenlösung zwischen dem Normalmodus (und dessen Verwandten) und dem Navigator darstellt. Unter "Optionen/Einstellungen..." ändern Sie den Modus auf Freestyle und starten ein neues Projekt.
Der Freestyle-Dialog gibt Ihnen die Möglichkeit, die einzelnen Stationen zu verändern. Die ersten drei sind nicht veränderbar, die Stationen 4 bis 10 können frei belegt werden. Für die meisten Fälle dürfte dies aber reichen.
Sowohl der Freestyle- als auch der Navigator-Modus bieten Raum für Erweiterungen, die zu den traditionellen Modi nicht mehr passen würden. So steht nun neben den bereits vorgestellten Bilder-, Verweis- und Text-Dialogen nun auch ein Trennlinien-Dialog zur Verfügung. Intern entspricht Freestyle allerdings mehr den traditionellen Modi - so unterscheiden sich z.B. die HPP-Dateien von Freestyle und Navigator erheblich.
Trennlinien
Der Pinguin unterstützt alle zur Zeit möglichen Attribute für eine Trennlinie, und auch wenn auf vielen Seiten eine Grafik als Trennlinie verwendet wird, hat der Trennlinien-Befehl doch seine Berechtigung: Er benötigt keine zusätzliche Ladezeit und ist schnell angezeigt. Mit der Option, die Farbe der Trennlinie einzustellen, kann eine Trennlinie sogar richtig gut aussehen, vorausgesetzt die Farbe harmoniert mit dem Aussehen Ihrer Seite. Neben der Farbe lässt sich die Ausrichtung,
die Breite in Prozent, die Höhe in Pixeln und die 3-D-Schattierung festlegen.
Moduswechsel
Was gibt es noch in dem Seitenaufbau-Popup? Neben dem Navigator sind hier auch "Erweitert", "Verweise oben" und benutzerdefinierte Modi beheimatet. "Bilderflut" ist z.B. ein benutzerdefinierter Modus, der sich von den anderen dadurch unterscheidet, dass er als eigene Datei im "PLUGINS"-Ordner vorliegt.
"Erweitert" ist die oft geforderte Erweiterung des Normal-Modus um die Verwendung einer zweiten Grafik. "Verweise oben" setzt die Verweise vor die Grafik, damit man gleich im Blick hat, wie es weitergeht.
Beide Modi sind nur noch in v2.0 bzw. 2.08 fest eingebaut. Ab 2.5 liegen auch sie als benutzerdefinierte Modi vor und lassen sich so den eigenen Bedürfnissen anpassen.
Das nächste Mal
Im zweiten Teil wird es um das Thema Plugins gehen.. Sie werden erfahren, wie man selber welche herstellt, wozu sie gut sind und worin gerade bei diesem Thema die Unterschiede zwischen v2.0 und v2.5 liegen.
Internet-Adressen
HomePage Pinguin offizielle Support-Seite - http://www.jaapan.de/software/homepage-penguin-3/
Jens Heitmann: Draconis Internet Packet (Light of Adamas)- http://draconis.atari.org/
Quellen: Testbericht "Homepage Pinguin 2" ST-C/AI 2/97 - Seite 42