Aufzählung

Web-Konzept

Aufzählung

globales Javascript

Aufzählung

globales Stylesheet

Aufzählung

SPAM-Vermeidung

Aufzählung

"fiese Fallen"

Re-enter Sitehawk-Website

Basics/Konzept

Diese Rubrik behandelt Grundlegendes zur Web-Gestaltung und Konzeption. Ein Homepage-Bastler beginnt zumeist mir irgendeiner Idee, fängt an zu "basteln" und stellt schnell fest, daß ja doch alles etwas anders werden soll und wirft alles noch mal über den Haufen. So hat es sich aus eigener Erfahrung gezeigt, wie sinnvoll es hierbei ist, wenigstens ein paar Grundregeln der Konzept-Führung nicht unbeachtet zu lassen.

Web-Konzept

zum Seitenanfang

Zwei Konzepte:
Inhalt und Form

Machen wir uns nichts vor: Web-Seiten-Bastler wollen gestalten. Folglich kreisen oftmals die Gedanken mehr um die äußere Form. Dann fällt uns ein, daß wir aber doch Inhalt vermitteln wollen und stellen gelegentlich fest, daß unsere gestalterische Ordnung nicht mehr ganz zum Inhalt paßt. Mit dieser - meiner - Erfahrung sollten wir uns besser gleich zu Beginn ZWEI Blatt Papier (bzw. Text-Elemente) bereithalten, in denen wir unsere Grundnotizen sammeln. Schon dabei fällt schnell auf, wo Anknüpfungspunkte zwischen Form und Inhalt besser gefunden werden können. Eine gute Gliederung wird so schneller offensichtlich.

Dateien-Struktur
Unterverzeichnisse

Grundsätzlich sollte man sich angewöhnen ALLE Dateinamen (und Dateinamens-Erweiterungen!) im Web in Kleinbuchstaben zu schreiben. Unbedingt Dateinamens-Konventionen beachten! (Leerstellen im Dateinamen sind tabu).
Da die Anzahl der Dateien sehr schnell ansteigen kann, sollte man hier auch gleich von Beginn an für Ordnung zur Übersichtlichkeit halten. In meinem Web beginnen die Dateinamen aller Button-Grafiken mit dem vorangestellten Präfix "zb_", das "z" sortiert sie ans Ende der Liste, weil ich die Buttons bei Änderungen im Web sicherlich nicht so schnell wieder austausche, folglich können sie am Ende der Dateiliste stehen. Die HTML-Dateien meines Webs erhalten "h_" vorangestellt, so stehen "h_fotos.html" und "h_urlaub.html" en bloc beieinander. "fotos.html" und "urlaub.html" müßte ich in einer Dateiliste, die schnell einen Bestand von 150 oder mehr Dateien umfaßt, lange suchen.
Umfangreiche Bilder-Sammlungen gehören nach Themen geordnet in Unterordner. Es empfiehlt sich jedoch, die HTML-Dateien alle auf ein und derselben Ordnerebene zu führen. Besonders im Zusammenspiel mit eingebundenen Scripts und Übergabe-Parametern kann es sonst sehr schnell bezüglich der Ordner-Hierarchie problematisch werden.

META-Tags

Die META-Tags im HEAD-Bereich sollten sofort in die erste HTML-Datei eingestellt werden. Erfahrungsgemäß kopiert man ja gerne Dateien zur Entwicklung weiterer Datein. Somit sind diese später schwer sichtbaren Einträge gleich überall enthalten.

Updates/
Seitenänderungen

Zum Experimentieren oder bei umfangreichen Änderungen sollte jede HTML-Datei zunächst im Arbeits-Web sicherheitshalber kopiert werden. Ich versehe gesicherte Dateien immer mit dem Anhang "_BISYYMMTT.hmtl", wobei YYMMTT den aktuellen Jahres-/Monats-/Datums-Ziffern entspricht. So kann man mal bei groben Schnitzern schnell einen Abschnitt zurück-kopieren.
Arbeits-Web
FTP-Web
Backup-Web
So, nun arbeiten wir also fleißig an unserem Web. Aber in welcher Version? Nun, nennen wir es das aktuelle "Arbeitsweb". [Dieses Web ist ggf. also in Frontpage o.ä. eingebunden]  Hier kann fleißig getüftelt und experimentiert werden, bis alles schön paßt und veröffentlicht werden kann.
Hierzu lege ich einen Ordner (möglichst auf einer anderen Partition) "F:/FTP/meinweb" an. Hier bereite ich die entsprechende Unterordner-Struktur meines Webs vor. Vor der Veröffentlichung KOPIERE ich nun alle Dateien aus meinem "Arbeitsweb" in die Struktur meines "FTP-Webs". Anschließend erfolgt der FTP-Upload. Danach werden allen heraufgeladenen Dateien in die Ordnerstruktur "F:/published/meinweb" (auf derselben Partition) VERSCHOBEN. Der "F:/FTP..."-Ordner ist anschließend wieder leer, bleibt aber bestehen. Denn es wird ja weiter getüftelt. Wenn die nächste Änderung mit FTP-Upload ansteht, brauche ich also nur noch das Datei-Datum aus dem "published"-Ordner anzuschauen um sofort einen Überblick zu haben, welche Dateien ich zum Update aus dem Arbeitsweb ins FTP-Web kopiere, auflade und anschließend in den "published"-Ordner verschiebe. So habe ich immer einen Überblick, welche Version meines Webs in Arbeit ist, und wie der Stand der auf dem Server veröffentlichten Version ist. Zudem habe ich natürlich auch hier wieder einen Backup-Bestand.
Bilder-Größen/
-Dimensionen
Oftmals sieht man auf einer privaten Homepage gleich auf der Titelseite nach langem Laden  ein Foto des Webmasters herunterlächeln. Na, schön, wir haben jetzt ja auch eine neue schicke Digicam mit 'ner Auflösung von 4 Megapixels. Das Foto war zwar etwas sehr breit beim Einbinden in die Seite, aber wir können es im Frontpage ganz prima "verkleinern" (???) indem wir es einfach zusammenschieben. Nun gut, ich werde jetzt mal langsam aufhören, mich über diesen immer wiederkehrenden Anfänger-Fehler zu amüsieren. Denn so wird leicht mal eine Bilddatei mit 450KB mit den Bild-Dimensionen einer Fototapete durchs Netz gequetscht, wobei ja doch nur eine Bierdeckelgröße sichtbar wird. Jedes Foto, das auf einer Web-Site eingebunden wird (oder per E-Mail verschickt wird!!), sollte zuvor im Hinblick auf Dimensionen (Höhe X Breite) sowie Dateigröße vorbereitet werden. Hierzu wird die Original-Bilddatei selbstverständlich (!) KOPIERT, damit wir das Original später vielleicht ja doch noch als Fototapete verwenden können. Diese Kopie sollte in einem Grafikprogramm auf die Bild-Dimensionen (meist "Bild-Größe" genannt) von maximal 480 X 640 Pixels (bzw. seiten-umgekehrt) reduziert werden. Beim Abspeichern kann bei ca. 86-prozentiger JPEG-Komprimierung eine qualitativ gute Bilddatei mit einer Größe von 40-70KB erzielt werden.
 
globales Javascript

zum Seitenanfang


Schon bald wird sich zeigen, wie vorteilhaft es ist, alle übergreifenden und/oder wiederholten Funktionen in einem globalen Script bereitzustellen, welches man im <head>-Bereich aller HTML-Seiten des Webs einbindet. Zudem wird die globale .js-Datei zu Beginn einmal übertragen und liegt für weitere Aufrufe im Cache des User-Browsers bereit. Das gleiche gilt für die Stylesheet-Datei .css zur Farb- und Hintergrund-Gestaltung (etc.). Das ist hier besonders von Vorteil, da somit ein späteres Verändern von Farben oder Hintergründen lediglich an einer Stelle vorgenommen werden muß und sofort für alle Folgeseiten gültig ist.

Beispiel:

<html>
<head>
...
<link rel="stylesheet" type="text/css" href="b_onlight0310.css">
<script type="text/javascript" src="b_main0310.js" language="JavaScript"></script>
...
<title>Mein zauberhaftes Web</title>
</head>

Der Inhalt einer .js-Datei enthält lediglich Javascript-Anweisungen (keinen Header oder Footer) -
Beispiel "b_main0310.js":

// www.meinweb.de *** globales Script *** Kommentarzeile
day = new Date();
tag = day.getDate();
wotag = day.getDay();
monat = day.getMonth();
jahr = day.getYear();
if(jahr<1000) jahr+=1900;
hr = day.getHours();
Wochentagname = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
Monatname = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
hdrdate = (Wochentagname[wotag] + ', ' + tag + '. ' + Monatname[monat] + ' ' + jahr);
tzmsg = "Guten Abend!";
if (hr < 17) tzmsg = "Guten Tag!";
if (hr < 14) tzmsg = "Mahlzeit!";
if (hr < 11) tzmsg = "Guten Morgen!";
if (hr < 4) tzmsg = "Gute Nacht!";
if (hr < 1) tzmsg = "Guten Abend!";

emaktuklar = '<a href="mai' + 'lto:hug' + 'o03@mei' + 'nweb.d' + 'e">hug' + 'o03@me' + 'inweb.' + 'de?su' + 'bject=MeinWeb Homepage</a>';

focus();
 

 

globales Stylesheet

zum Seitenanfang


(das Einbinden der.css-Datei wurde bereits im
vorausgehenden Abschnitt "globales Javascript" beschrieben)

Der Inhalt einer .css-Datei enthält ebenfalls lediglich Formatierungs-Anweisungen (also weder Header noch Footer). In diesem Web verwende ich zwei verschiedene Stylesheets (.css-Dateien), eine auf hellem Hintergrund, die andere auf dunklem Hintergrund. - Beispiel "b_ondark0310.js":


 body { margin:0cm;0cm } /* 0cm oben, rechts, unten und links */

A {
COLOR: #C0C0C0; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px; font-weight: bold; text-decoration: none
}

A:hover {
COLOR: white; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px; font-weight: bold; font-style: italic;
}

A.navsm {
COLOR: #C0C0C0; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 10px; font-weight: normal; text-decoration: none
}

A.navsm:hover {
COLOR: white; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 10px; font-weight: normal; font-style: italic;
}

BODY {scrollbar-base-color: #000000;
SCROLLBAR-FACE-COLOR: #221E17;
SCROLLBAR-HIGHLIGHT-COLOR: #FF0000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #FF0000;
SCROLLBAR-ARROW-COLOR: #FF0000;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #FF0000}
 

Hier haben wir also gleich ein etwas "unsauberes" Beispiel, was überhaupt nicht schlimm ist. BODY-Anweisungen werden von erneuten Body-Anweisungen überschrieben bzw. erweitert, verfeinert, korrigiert. Und genau das ist der Sinn von "Cascading Style-Sheets". Die Zuweisungen sind solange gültig bis sie von ersetzenden/erweiternden Anweisungen überschrieben werden. Manchmal ist das anschließende Aufteilen von Zuweisungen eben übersichtlicher für spätere, schnelle Änderungen. Anweisungen können klein- ODER groß-geschrieben notiert werden.

Am Ende gibt es bei der Gelegenheit gleich das Beispiel zum Einfärben der Scroll-Balken des Browsers.
 

SPAM-Vermeidung

zum Seitenanfang


Um sich vorbeugend vor SPAM zu schützen, sollten Webmaster ihre E-Mail-Angaben verschleiern. Hierzu gebe ich den E-Mail-Link auf meiner Web-Site über eine Javascript-Formatierung ein, indem ich die Variable zunächst "zerhacke", besser gesagt, durch Teil-Strings zusammensetze. Webcrawler, die Webseiten nach E-Mail- Adressen abgrasen, dürften hier nicht fündig werden. Darüberhinaus habe ich mir angewöhnt, meinen hierbei verwendeten Empfänger-Bezeichner (also den eigentlichen Namen vor dem "@" meiner Domain) mit der zweistelligen Jahreszahl zu verlängern. Falls ich also dennoch mit SPAM überflutet werde, ändere ich auf meiner Website das Anhängsel und konfiguriere nach einer Übergangszeit mein Mail-Account so, daß die bisherige Empfänderadresse in die Wüste gelenkt wird (falls Provider-Einstellungen dies ermöglichen).


emaktuklar = '<a href="mai' + 'lto:hug' + 'o03@mei' + 'nweb.d' + 'e?sub' + 'ject=Homepage">hu' + 'go03@me' + 'inweb.' + 'de</a>';

emaktubut = '<a href="mai' + 'lto:hug' + 'o03@me' + 'inweb.d' + 'e?subje' + 'ct=Homepage"><img border="0" src="zb_email.gif" width="100" height="24"></a>';
 

In dem obigen Beispiel wird der Variablen "emaktuklar" ein verschleierter E-Mail-Text-Link zugewiesen. Entsprechend erhält die Variable "emaktubut" einen E-Mail-Button-Link.

Im HTML-Dokument wird nun an gewünschter Stelle anstatt des HTML-mailto-Links dieser kleine Script-Aufruf eingefügt (Text- oder Button-Link):


<script language="JavaScript">
<!-- Begin
document.write(
emaktubut);
// End -->
</script>
 

Die Klartext-Anzeige auf der Seite unter der Benutzung der Variable "emaktuklar" würde in diesem Beispiel also so aussehen:

Mit diesem Verfahren lassen sich auch andere Angaben verschleiern, die zwar optisch vom Betrachter der Site wahrgenommen werden sollen, andererseits von Robots und Crawlern möglichst umgangen werden. Allerdings gibt's hier keine Garantie, daß dieser Schutz ausreichend ist, denn das hängt eben auch davon ab, wie raffiniert so ein Robot programmiert ist.
 

"fiese Fallen"

zum Seitenanfang

Schreibfehler/
Groß-/Kleinschreibung

Im Arbeitsweb läuft alles prima, eingebundene Grafiken werden angezeigt, aber online auf dem Server werden Grafiken nicht angezeigt.
>>> Fotos werden oftmals mit großgeschriebener Dateinamens-Erweiterung ".JPG" aus der Digicam-Software abgelegt. Bei einer Übertragung ins Web kann sich (besonders unter Frontpage 2000) ein Link-Fehler einschleichen, daß im Hyperlink "<img scr="foto.jpg"..." mit KLEINgeschriebener Endung steht. Das läuft auf einem Windows-Rechner ohne Probleme, weil Windows in der Zuordnung Groß- und Kleinschreibung gleichsetzt. Auf einem anderen Server-System (z.B. Unix) wird aber streng zwischen Groß- und Kleinschreibung unterschieden. Folglich muß entweder die verlinkte Grafikdatei umbenannt werden, oder der Hyperlink auf die exakt gleichgeschriebene Datei verweisen.

Hyperlink-Fehler

Unter Frontpage 2000 gab es beim Einbinden von Dateien per drag&drop gelegentlich das Problem, daß im HTML-Code der Hyperlink nicht relativ innerhalb des Webs gesetzt wurde, sondern eine konkrete "file://"- Verklinkung auf die Datei auf der eigenen Festplatte erhielt. Tja, hierbei ist die "fiese Falle" so fies, daß wir die Verlinkung sowohl im Arbeisweb als auch bei der Betrachtung der aufgeladenen Server-Web-Version auf dem EIGENEN Rechner angezegit bekommen - aber eben auf KEINEM anderen Rechner.

Tipp:

Das Online-Web sollte bei Gelegenheit von einem fremden PC (z.B. bei Freunden) auf korrekte Verlinkung überprüft werden.

 


Seitenanfang