Nokia Handy
Inhaltsverzeichnis
Web-Seiten
Web-Seiten
-
Animationen verkleinern
Animationen verkleinern
Animierte gif-Bilder bestehen aus mehreren Einzelbildern, die hintereinander abgespielt werden. Sie lassen sich durch spezielle Pro- gramme automatisch verkleinern.
Einige Animationsprogramme wie GIF Movie Gear bieten praktische Funktionen, mit denen sie die Datenmenge reduzieren. Sie verkleinern beispielsweise die Farbpalette, die für alle Einzelbilder einheitlich sein sollte, oder beschneiden die Animation so, daß überflüssige Ränder entfallen. GIF Movie Gear finden Sie unter
www.gamani.com/gmgdown.htm
Verwenden Sie möglichst animierte gif-Bilder statt Videoclips, denn erstere beanspruchen meist nur einen Bruchteil des Speicherplatzes.
-
Audio-Kompression: Welche Qualität genügt?
Audio-Kompression: Welche Qualität genügt?
Verwenden Sie für Sound MIDI statt das wav-Format. MIDI-Dateien sind viel kleiner und beanspruchen oft weniger als 30 Prozent der Datenmenge der entsprechenden wav-Datei.
MIDI-Dateien klingen auf jedem PC etwas anders. Doch dieser Nachteil spielt für Web-Seiten keine Rolle. Ebensowenig ist CD-Qualität mit 44.1 kHz und Stereo notwendig. Durchaus akzeptabel ist eine Aufzeichnung mit 22.05 kHz in Mono, das Datenaufkommen wird dabei bereits um fast zwei Drittel geringer. Alternativ dazu genügen 11.025 kHz in Stereo. Mono ist für Stimmen vorzuziehen, weil der Mensch ohnehin ein "Mono-phon" ist - er kann nur einen Ton gleichzeitig hervorbringen. Für Musik und Hintergrundgeräusche wirkt Stereo realistischer und "breiter". Streaming ist für Audiodateien Pflicht: Durch dieses Verfahren müssen Sie nicht warten, bis die Datei komplett geladen ist, sondern hören den Sound sofort. Einen kostenlosen Player erhalten Sie bei RealNetworks unter
www.real.com
-
Bereichsabhängige Kompressionen
Bereichsabhängige Kompressionen
Mit Programmen wie dem Web-Charger es möglich, Bildbereiche wie den Himmel und eine Person davor unterschiedlich stark zu verdichten. Damit bekommen Sie kleinere Dateien in guter Qualität.
Farbähnliche Bereiche, etwa der Himmel, lassen sich meist sehr viel stärker komprimieren als Personen. Der Web-Charger von Emblaze macht sich dies zunutze. Die Bezugsquelle:
www.emblaze.com
Bei dieser Komprimierung nach Bereichen ist der Qualitätsverlust bei maxi-maler Komprimierung des Himmels auch noch für die Person akzeptabel. Je nach Motiv ergibt sich so ein Einsparpotential von rund 20 Prozent.
-
Bildbereiche unterschiedlich komprimieren
Bildbereiche unterschiedlich komprimieren
Für die Komprimierung eines Bilds sind je nach Bildteil oft verschiedene Methoden ideal. Einige Grafikprogramme können Bilder aufteilen und gesondert speichern.
Besonders für Imagemaps ist beispielsweise die Option von Painter 5.5 praktisch, die Bilder in unterschiedliche Bereiche aufzuteilen und sogar in unterschiedlichen Dateiformaten wie gif oder jpg zu speichern. Imagemaps sind Bilder, die mit Befehlen verknüpft sind: Wenn Sie etwa darauf klicken, gelangen Sie auf eine bestimmte Seite. Die Aufteilung der Imagemaps ist höchst praktisch, wenn ein Bild sowohl feine Übergänge (ein Fall für jpg) als auch Schrift (klarer Fall für gif) aufweist. Gerade auf Fotos sind scheinbar ein-farbige Flächen wie eine weiße Wand nur auf den ersten Blick einfarbig. Sie unterstützen den Kompressions-Algorithmus kräftig, indem Sie die einfarbig wirkenden Flächen selektieren und einfarbig ausfüllen.
-
Bilder in Tabellen
Bilder in Tabellen
Mit Tabellen positionieren Sie Text und Grafik. Die Größe der Bilder geben Sie stets exakt an: Sonst dauert es zu lange, bis der Text erscheint.
Mit dem Tag <IMG SRC=> geben Sie den (relativen) Pfad der eingebundenen Bilder an, die Sie entweder im Verzeichnis der HTML-Seite oder in einem eigenen Verzeichnis sammeln. Vergessen Sie nicht, mit <HEIGHT> (Höhe) und <WIDTH> (Breite) die dargestellte Größe der Bilder - sie entspricht nicht der Pixelzahl des Originalbilds - anzugeben. Diese Angaben benötigt der Browser, um die Seite aufzuteilen, bevor das Bild geladen ist. Wenn Sie auch nur bei einem einzigen Bild die Größenangabe versäumen, passiert folgendes: Der Browser berechnet erst den gesamten Platz in der Tabelle,
den die Bilder einnehmen dürfen, bevor er die Tabelle anzeigt. Dies kann mehrere Sekunden in Anspruch nehmen. Wenn Sie dagegen die Bilder durchgän-gig mit exakten Größenangaben versehen haben, wird erst die Tabelle ohne die Bilder geladen, die dann der Reihe nach erscheinen. Der wesentliche Vorteil: Der Surfer sieht sofort den Text in der Tabelle, den er sonst erst zum Schluß sehen würde.
-
Bilder zerlegen
Bilder zerlegen
Viele kleine Bilder bauen sich subjektiv schneller auf als ein großes.
Bei großen Bildern ist es ratsam, diese in mehrere kleine zu zerlegen: Die Ladezeiten nehmen beim erneuten Laden drastisch ab, denn die kleineren Bilder befinden sich noch im Cache des Browsers, während große Grafiken erst nachgeladen werden. Beispielsweise besteht die abgebildete Landkarte mit den Bundesstaaten der USA aus mehreren Einzelbildern, die Sie binnen Sekunden angezeigt bekommen. Ein einziges großes Bild hätte beim ersten Laden merklich mehr Ladezeit benötigt.
-
Die Qual der Bildbearbeitungswahl
Die Qual der Bildbearbeitungswahl
Der Wirkungsgrad der Komprimierung hängt auch vom verwendeten Programm ab.
Die Software-Hersteller verwenden unterschiedliche Algorithmen für die Komprimierung von Bildern. Wenn Sie beispielsweise ein jpg-Bild in Photoshop 4.0 komprimieren, erhalten Sie mit der entsprechenden Einstellung eine etwa zehn bis 20 Prozent größere Datei als mit Paint Shop Pro 5.0. Allerdings ist die Qualität der Photoshop-Bilder meist höher. Das ideale Bildbearbeitungsprogramm zur Komprimierung unterscheidet sich somit von Motiv zu Motiv, Experimentieren lohnt sich.
-
Farben reduzieren
Farben reduzieren
Je weniger Farben Sie verwenden, desto kleiner wird die Grafikdatei.
Abhängig von der Farbtiefe wird Ihre Bilddatei riesig - oder winzig klein: Das Beispiel mit 256 Farben (= 8 Bit Farbtie-fe) beansprucht 41 KByte, das 16-Far-ben- Bild (= 4 Bit Farbtiefe) nur noch 33 KByte - also etwas mehr als die Hälfte. Ein jpg-Bild würde bei maximaler Komprimierung mit 12,8 KByte auskommen.
-
Homesite: Kleines Spiel gefällig?
Homesite: Kleines Spiel gefällig?
Mit dem Editor können Sie nicht nur HTML-Code programmieren, sondern auch spielen.
Falls Sie beim Spiel neue Kräfte sammeln möchten, können Sie dies auch innerhalb der gewohnten Arbeitsumgebun tun. Der Homesite-Hersteller hat in seinem Editor ein so genanntes Osterei untergebracht, das ein nettes Spiel beinhaltet: In Tagmatcher geht es darum, möglichst viele HTML-Tags mit dem Homesite-Symbol zu fangen. Achten Sie dabei auf Hindernisse, die Ihnen Ihr Vorhaben erschweren. Zum Aktivieren gehen Sie folgendermaßen vor:
Öffnen Sie das Dialogfeld Customize im Menüpunkt Options. Alternativ erreichen Sie die gleiche Aktion mit der Tastenkombination [Shift-F8].
Wählen Sie unter Toolbuttons die Einstellung All (voreingestellt).
Scrollen Sie im dazugehörigen Feld bis zum Ende. Es erscheint ein kleines Ei-Symbol mit dem Titel Easter Egg.
Fügen Sie diesen Button per Drag& Drop Ihrer Toolbar zu, und schließen Sie das Dialogfeld.
Sie können das Spiel jetzt per Klick auf das Eier-Symbol starten.
Diese Erklärung gilt für die englische Version des Editors. Für die deutsche Version müssen Sie die entsprechenden Punkte wählen. Das Spiel beenden Sie mit der [Esc]-Taste.
-
Java-Wahl
Java-Wahl
Verwenden Sie als Voreinstellung JavaScript statt Java, um das zeitraubende Laden der Applets zu umgehen.
JavaScript (von Netscape) und Java, die Programmiersprache von Sun, werden oft verwechselt, sind aber zwei Paar Stiefel. Nachdem jeder aktuelle Browser von vornherein JavaScripts unterstützt, sollten Sie Anwendern das zeitraubende Laden der Applets ersparen. Bieten Sie daher entweder eine Auswahloption für Java und JavaScript, oder stellen Sie in der Voreinstellung JavaScript ein.
-
Plugins unplugged
Plugins unplugged
Wer mit Dateiformaten arbeitet, die besondere Plugins benötigen, bietet dem Surfer eine Plugin-freie Alternative an.
Viele schöne Optionen erfordern Zusatzprogramme. Beispielsweise ist das Dateiformat pdf hervorragend geeignet, um gelayoutete Dokumente einschließ-lich Grafik wiederzugeben. Das Flash-Format von Macromedia wiederum sorgt für besonders kleine Dateigrößen. Es ist ein für das Web konzipiertes Vek-torformat. Der Nachteil: Wer zum Beispiel nicht das entsprechende Plugin, hier: für Flash-Files, installiert hat, kann diese nicht ansehen. Wenn Sie trotzdem solche Extras anbieten, sollten Sie zumindest Anwender ohne diese Plugins auf die Notwendigkeit verweisen, diese Plugins zu installieren. Eine sehr gute Alternative: Lassen Sie dem Surfer auf der Eingangsseite die Wahl, ob er eine beschränkte, schnelle Variante der Site wählen will oder für eine gute Optik längere Ladezeiten und Zusatzprogramme in Kauf nimmt. Wenn schon Plugins nötig sind, führen Sie Surfer direkt per Link zur Download-Adresse für diese Plugins - Ihre Besucher werden sich über diesen Service freuen.
-
Positionieren mit unsicht- baren Bildern
Positionieren mit unsicht- baren Bildern
Mit kleinen unsichtbaren gif- oder jpg-Bildern erreichen Sie ohne große Dateien genaue Zeilenabstände und Einzüge.
Erzeugen Sie in einer Bildbearbeitung transparente gif- oder jpg-Bilder mit 1 Pixel. Fügen Sie beispielsweise diese Bilder mit dem Attribut <HEIGHT=8> in den HTML-Code ein, um einen Zeilenabstand von 8 Punkt zu erreichen. Mit dieser Größenangabe vermeiden Sie unnötigen Datenballast: Das Bild (1 Pi-xel) wird nur einmal geladen. Vergessen Sie beim Plazieren des Platzhalters den Tag <BR> vor dem Text nicht, sonst rücken Sie die Zeile um ein Leerzeichen ein. Mit diesen Platzhaltern erhalten Sie auch Einzüge: Positionieren Sie bei-spielsweise in die einzurückende Zeile das Bild, und wählen Sie <WIDTH=12>.
-
Rauschen vermeiden
Rauschen vermeiden
Wer Videos komprimiert, sollte auf gutes Ausgangsmaterial achten.
Je besser das Ursprungsvideo ist, de-sto stärker können Sie es in akzeptabler Qualität komprimieren. Es sollte so wenig Video-Rauschen ("Schneegestöber") wie möglich enthalten. Verwenden Sie das beste zur Verfügung stehende Videoformat, etwa S-VHS statt VHS. Achten Sie besonders bei Innenaufnahmen auf gute Beleuchtung, denn bei schlechtem Licht ist starkes Rauschen unvermeidlich.
-
Schmerzgrenze: 50 KByte
Schmerzgrenze: 50 KByte
Die Übertragungszeit einer Internet-Seite sollte 20 Sekunden nicht überschreiten. Dies ist in Deutschland bei maximal 50 KByte für die Internet-Seite gewährleistet, wenn die Verbindung mitspielt.
Wie groß eine Seite - der Code einschließlich Grafik, Sound und Videoclips - werden darf, hängt von der Übertragungsgeschwindigkeit ab, die den Besuchern Ihrer Web-Seite zur Verfügung steht. Inzwischen besitzen mehr als 80 Prozent der deutschen Surfer Modems oder ISDN-Karten, die mindestens so schnell sind wie Modems nach V.34-Standard. Die in der Praxis erreichten Werte für Modems und die ISDN-Raten schwanken bereits unter Laborbedingungen stark - je nachdem, welche Art von Daten sie übertragen (siehe PC Magazin 10/98, S. 97). Sie sollten daher von den Übertragungsraten eines 28.8-Modems als kleinstem gemeinsamen Nenner aus-gehen, das unter normalen Übertragungsbedingungen rund 50 KByte in knapp 20 Sekunden erreicht. Sehr viel größer sollte eine Internet-Seite nicht sein, die ideale Obergrenze wären also rund 20 KByte. Ein V.34-Modem benötigt im Schnitt für 50 KByte etwa 15 Sekunden, ein V.90-Modem zwölf Sekunden. Eine übliche ISDN-Leitung überträgt diese Datenmenge in ungefähr acht Sekunden. Einige HTML-Editoren, zum Beispiel Allaire HomeSite, bieten eine prakti-sche Option, die die ungefähre Download-Zeit des HTML-Dokuments vorab anzeigt.
-
Seiten aufteilen
Seiten aufteilen
Überladen Sie Ihre Seiten nicht mit platzraubenden Multimedia-Elementen. Das gilt besonders für die Startseite.
Erfahrungsgemäß akzeptieren Surfer längere Ladezeiten auf nachgeordneten Seiten eher als auf der Startseite, die deshalb sofort erscheinen sollte. Faustregel: Die Startseite sollte maximal 25 KByte umfassen. Unterteilen Sie daher Ihr Angebot thematisch, und geben Sie jedem Thema nochmals eine eigene Anlaufseite, auf die Sie von der Startseite verzweigen. Beispielsweise könnte die Startseite eines Kunstmalers auf eine Anlaufseite mit mehreren Kategorien wie Stilleben oder Landschaften verweisen, diese wiederum auf die einzelnen Bilder. Wenn Sie mehrere größere Bilder, Sounddateien oder gar Videoclips präsentieren, bieten sich Thumbnails auf einer Anlaufseite an, über die Sie diese Dateien aufrufen.
-
Suchmaschine: Zugriff verhindern
Suchmaschine: Zugriff verhindern
Mit einem Meta-Tag steuern Sie, ob und wie Suchmaschinen Ihre Webseiten indexieren.
Internet-Suchmaschinen sind auf möglichst aktuelle Datenbestände über Webseiten angewiesen. Deshalb durchforsten spezielle Programme, so genannte Robots (oder Spiders, Crawlers) ständig das World Wide Web. Mit einigen Meta-Tags steuern Sie, ob und wie diese Robots Ihre Webseiten durchsuchen und für die Suchmaschine indexieren. Bedenken Sie aber, dass Sie mit diesen Steuerkommandos der Suchmaschine nur einen Vorschlag machen. Nichts kann eine Suchmaschine daran hindern, Ihre Webseiten trotzdem zu indexieren. Denn die HTML-Datei kann der Robot wie jeder Browser abrufen. Ein Beispiel dafür ist: <head>
<meta name="robots"
content="index, nofollow">
</head>
Die erste Meta-Angabe erlaubt den Robots, die Webseite zu indexieren (index). Gleichzeitig sollen die Suchmaschinen die Hyperlinks auf dieser Webseite ignorieren (nofollow = nicht folgen). Wenn es sich beispielsweise um die Homepage einer Site handelt, wird der Robot die Unterseiten nicht indexieren. Die Tabelle unten listet die Steuerbefehle der Suchmaschinen auf. Beachten Sie bitte: Nicht alle Robots unterstützen alle Kommandos.
-
Transparente Platzsparer
Transparente Platzsparer
Mit transparenten Bereichen in Bildern reduzieren Sie die Datenmenge.
Wenn Sie freigestellte Bilder verwenden, etwa eine Person ohne Hinter- grund, sollten Sie mit transparenten gif-Bildern arbeiten. Dies ist beispielsweise für Bilder mit weißen Flächen sinnvoll, wenn Sie ohnehin vor einem weißen Bildhintergrund arbeiten. Der Unterschied macht sich bemerk-bar: Während das Ausgangsbild, das die gesamte Fläche einnimmt, auf eine Größe von 41 KByte kommt, genügen dem Bild ohne Hintergrund 25 KByte.
-
Unsauberen Code feintunen
Unsauberen Code feintunen
HTML-Editoren erzeugen häufig aufgeblähten HTML-Code. Es lohnt sich fast immer, nachträglich Hand anzulegen.
Zu den Musterbeispielen für eigenwillige HTML-Befehle bzw. eine nicht durchgehend saubere Interpretation der W3C-Richtlinien zählen beispielsweise Adobe PageMill und Microsoft Front-Page 97. Durchforsten Sie hier unbedingt den Code, und passen Sie eigenwillige Tags an. Vorsicht: In beiden Fällen schreiben die HTML-Editoren einige Befehle ungefragt um, FrontPage etwa Imagemaps. Nehmen Sie deshalb die Korrekturen in einem anderen Editor vor, damit Front-Page nicht erneut die Korrekturen wi-derruft. Der Code, den FrontPage 98 schreibt, hängt von den Voreinstellungen ab: Teilweise erzeugten wir mit FrontPage sogar kleinere Testdateien als mit HomeSite 4.0, der den anerkannt saubersten Code aller uns bekannten HTML-Editoren liefert. Generell können Sie die <META>-Tags über den benutzten Editor, Einrückungen, Leerzeichen und - notfalls - auch Kommentare gefahrlos streichen. Einige HTML-Editoren wie Home-Site und HoTMetaL Pro bieten eine sehr gute integrierte Überprüfung der HTML-Tags an. Daneben finden Sie im Internet kostenlose HTML-Prüfprogramme. Beachten Sie: Nicht jede der angemahnten Kodierungen führt dazu, daß Ihre Seite fehlerbehaftet in den Browsern erscheint. Denn Browser sind ziemlich fehlertolerant und nehmen kleine Sünden nicht unbedingt krumm: Wenn Sie etwa einen Abschluß-Tag vergessen, kümmert das den Browser wenig. Dennoch sollten Sie sich an die Konventionen des W3C-Konsortiums halten, die Sie unter
www.w3c.org
finden. Damit steigt nämlich die Wahrscheinlichkeit, daß auch künftige Browser-Generationen Ihre Seiten einwandfrei interpretieren werden. Wer seine Dokumente überprüfen will, ob Sie den W3C-Richtlinien entsprechen, sollte die Seite
www.w3.org/TR/REC-html40
besuchen. Hier finden Sie zudem viele praktische Beispiele und ausgezeichnete Erklärungen. Das Prüf-Tool Doctor HTML, mit dem Sie Web-Sites nach genauen Vorgaben analysieren, bekommen Sie unter
http://imagiware.com/RxHTML
Lohnenswert ist auch der WebTechs Validation Service:
www.webtechs.com/html-val-svc
Mit der Nacharbeit erreichen Sie nicht nur eine Verschlankung des Codes, sondern sorgen auch dafür, daß die damit erzeugten Seiten in allen gängigen Browsern erscheinen.
-
Video-Einstellungen ausprobieren
Video-Einstellungen ausprobieren
Die richtige Komprimierungseinstellung für Videos ist selten die voreingestellte: Hier hilft nur Ausprobieren.
In jedem Videoschnittprogramm wählen Sie beim Speichern unter ver-schiedenen Software-Komprimierungsarten, mit denen Sie deutlich unter-schiedliche Ergebnisse erhalten. Generell lohnen sich mehrere Versuche mit unterschiedlichen Komprimierungsarten und -einstellungen. Im Zweifel ent-scheiden Sie sich für die bewährte Methode Cinepak, die die meisten Profis verwenden. Die Komprimierung selbst dauert zwar oft länger als mit anderen Verfahren, die Ergebnisse können sich aber trotz starker Verdichtung sehen lassen.
-
Vorschau auf größere Bilder
Vorschau auf größere Bilder
Wenn Sie Bilder mit der Option interlacedspeichern, erhält der Surfer sofort einen groben Eindruck des Bilds. Es wird dann in mehreren Durchgängen immer feiner aufgebaut.
gif-Bilder können Sie in den meisten Bildbearbeitungsprogrammen mit der Option interlaced speichern. Dies empfiehlt sich insbesondere bei größeren Bildern, weil der Surfer sofort einen ersten groben Eindruck des endgültigen Bilds erhält, das in mehreren Durchgängen zum Bild in voller Auflösung wird. Nachteil dabei: Die Bilddateien werden gegenüber dem Verfahren non interlaced um ungefähr zehn Prozent größer. Bei kleinen Bilder bis 10 KByte verwenden Sie daher non interlaced.
-
Vorsicht mit Negativschrift
Vorsicht mit Negativschrift
Vermeiden Sie Negativschrift: Helle (weiße) Schrift auf dunklem (schwarzen) Hintergrund benötigt optisch mehr Raum.
Wegen der unterschiedlichen Wirkung von Negativschrift sollten Sie sie als Grundschrift möglichst vermeiden. Wollen Sie dennoch nicht darauf ver-zichten, wenden Sie einen Trick an: Um zu eng laufende Schrift etwas zu spatio-nieren (den Abstand zwischen den Buchstaben vergrößern), verwenden Sie transparente 1-Pixel-Bilder.
-
Zeitraubende Verläufe
Zeitraubende Verläufe
Verläufe sind klassische Ressourcenkiller und möglichst zu vermeiden.
Beispielsweise nimmt eine Testseite im Format 800 x 600 Pixel unkompri-miert 1,37 MByte in Anspruch. Ein einfarbiger Hintergrund belegt bei maxi-maler jpg-Kompression in Photoshop 4.01 nur 7 KByte. Ein Verlauf dagegen kostet mehr als den doppelten Speicherplatz. Vermeiden Sie daher Verläufe, wo immer es geht. Eine Notlösung: Beschränken Sie sich für Verläufe auf wenige Farben. Der lineare Verlauf in der Mitte beansprucht nur 8 KByte deutlich weniger als der radiale Verlauf (rechts) mit 14,4 KByte.
-
Animierter Trennstrich
Animierter Trennstrich
Trennstriche sind für die Übersichtlichkeit einer Website oft hilfreich, sehen aber nicht besonders schön aus. Erzeugen Sie farbige, animierte Trennstriche.
Über HTML-Befehle erzeugte Trennstriche sehen sehr trist aus. In einer der letzten Ausgaben haben wir Ihnen gezeigt, wie Sie über CSS farbige Trennlinien erreichen. Sogar animierte Striche sind möglich, wenn auch über einen anderen Weg: animierte GIFs. Wenn Sie ein Pixel große Grafiken erzeugen und diese über die Höhen- und Breitenangaben im <img>-Tag durch den Browser als große Datei anzeigen lassen, erzeugen Sie eine einheitlich gefärbte Fläche. So können Sie zum Beispiel auch farbige Trennlinien generieren, die ein bis fünf Pixel hoch sind und sich über die gewünschte Breite erstrecken. Auch mit animierten GIFs funktioniert dieser Trick. Erzeugen Sie vier verschiedene GIFs, die jeweils ein Pixel breit und vier Pixel hoch sind. Sie können zum Beispiel jeweils einem der vier Punkte eine bestimmte Farbe zuweisen. So erhält in der ersten Grafik Punkt 1 blau, in der zweiten Punkt 2 grün, in der dritten Punkt 3 rot und in der vierten Punkt 4 gelb. Die restlichen Pixel bleiben jeweils weiß. Wenn Sie nun aus diesen vier Grafiken ein animiertes GIF erzeugen, erscheint die Trennlinie abwechselnd in diesen Farben und wandert pro Durchlauf von oben nach unten. Natürlich können Sie diesen Effekt eigenen Wünschen anpassen.
-
Bilder bauen sich auf
Bilder bauen sich auf
Auf manchen Internet-Seiten bauen sich die Bilder nach und nach bis zur vollen Auflösung auf. Wie erreicht man das?
Bei sehr großen Bildern dauert es trotz schneller DSL-Verbindungen immer noch eine gewisse Zeit, bis sie im Browser angezeigt werden. Hier kann es sehr hilfreich sein, dem Besucher die Wartezeit zu verkürzen. In der Regel warten die Browser erst die Übertragung der gesamten Bilddatei ab, bevor sie die Grafik in voller Pracht anzeigen. In der Zwischenzeit bleibt der Bildschirm weiß. Stattdessen kann man aber auch sofort eine grob gepixelte Version des Bildes anzeigen lassen, das sich nach und nach immer feiner auflöst. So kann der Besucher entscheiden, ob er bis zur vollständigen Anzeige des Bildes warten will, oder ob er vorher die Übertragung abbricht, weil es doch nicht seinen Vorstellungen entspricht. Um diesen Effekt zu erreichen, müssen Sie in Ihrem Bildbearbeitungsprogramm die Grafik entsprechend speichern. Im GIF-Format lautet die entsprechende Option Interlaced, im JPGFormat Progressive Codierung. Der Nachteil dieser Methode: Die Dateien werden dadurch um 10 bis 30 Prozent größer. Das heißt, bis zur endgültigen Anzeige vergeht etwas mehr Zeit.
-
Suchmaschinen: Sonder-Seiten
Suchmaschinen: Sonder-Seiten
Um die eigene Website möglichst leicht auffindbar zu machen, ist es unerlässlich, sich bei Suchmaschinen anzumelden.
Als Site-Betreiber ist man bemüht, dem Besucher auf der Startseite einen Überblick über die Vielfalt des eigenen Angebots zu geben. Beide Ziele lassen sich nur schwer vereinbaren. Denn der Inhalt der Homepage ist oft zu bunt gemischt, um von den Suchmaschinen-Robotern ausreichend gut katalogisiert zu werden. Um diesem Problem Herr zu werden, legt der kluge Webmaster einige so genannte Doorway-Seiten an und meldet diese statt bei der Hauptseite bei den Suchmaschinen an. Ein Beispiel: Die Website steht unter dem Thema Web-Technik und behandelt die Aspekte HTML, JavaScript und Grafikdesign. Um nun bei jedem dieser wichtigen und populären Suchbegriffe weit oben in den Suchmaschinen gelistet zu werden, erstellen Sie für jedes Thema eine eigene Informationsseite und melden diese Seiten einzeln bei den Suchmaschinen an. Von dort aus führt ein Link die Besucher dann auf die eigentliche Homepage. Wie sollte nun eine solche Doorway-Seite aufgebaut sein? Im folgenden Beispiel betrachten wir dazu die Site-Kategorie JavaScript Geben Sie der Seite einen Titel, der das Thema bzw. die Schlüsselbegriffe enthält:
<TITLE>Tipps und Tricks zu JavaScript,
lauffähige Codeschnipsel
und raffinierte Website-Funktionen</
TITLE>
Fügen Sie in den Seitenkopf die Schlüsselbegriffe ein, nach denen voraussichtlich gesucht wird:
<META name="KEYWORDS"
content="JavaScript, Code, Scripting,
Webfunktionen, Rollover.">
Zudem geben Sie eine passende Beschreibung in Form eines ganzen Satzes:
<META name="DESCRIPTION"
content="Tipps und Tricks zu JavaScript
für den ambitionierten
Webmaster.">
Im Body der HTML-Seite wiederholen Sie nun den Seitentitel oder einen ähnlichen Text als Überschrift:
<H1> Tipps und Tricks zu JavaScript,
lauffähige Codeschnipsel
und raffinierte Website-Funktionen
</H1>
Da die Seite schnell geladen werden soll, verzichten Sie auf überflüssige Banner und Bilder. Falls Sie ein Bild benutzen wollen, achten Sie darauf, dass Sie im Alt-Parameter wiederum die Schlüsselbegriffe verwenden:
<IMG SRC="einbild.gif"
HEIGHT="80" WIDTH="120"
ALT="JavaScript-Tipps für Webdesigner">
Benutzen Sie zudem Kommentare, um den HTML-Code zu strukturieren, und verwenden Sie innerhalb dieser Kommentare erneut die Schlüsselbegriffe:
<!--Begin JavaScript-Tipps-->
…
<!--End JavaScript-Tipps-->
Füllen Sie die Seite nun noch mit sinnvollem Inhalt, der wiederum möglichst oft die Schlüsselwörter enthält. Vergessen Sie auch nicht den Link zu Ihrer Hauptseite, denn um diese zu bewerben, haben Sie die Doorway-Seite schließlich angelegt. Erstellen Sie nun auch für die anderen Themenbereiche entsprechende speziell angepasste Seiten. Übermitteln sie diese nun jeweils getrennt den Suchmaschinen, und die Popularität Ihrer Website wird schon bald spürbar steigen.
-
Metatags verstecken
Metatags verstecken
Einige Metatags richten sich an die Suchmaschine, andere an den Browser. Warum also soll der Browser die laden, die er gar nicht braucht? Der Server sollte die inzwischen weit verbreiteten Server Side Includes (SSI) verstehen. Fügen Sie folgenden Code in Ihre Webseite ein:
<!--#if expr="$HTTP_USER_AGENT =
/^Mozilla/" -->
<!--#else -->
Hier stehen die Metatags, die nicht angezeigt werden sollen.
<!--#endif -->
Durch die Browserkennung Mozilla kann der Server zwischen Browser und Spider unterscheiden. Was der Browser nicht lädt, sieht auch Ihre Konkurrenz nicht. Und die schöne Position in den Suchmaschinen bleibt weiterhin Ihr Geheimnis.
-
Menü-Liste mit farbiger Schrift
Menü-Liste mit farbiger Schrift
Die Formulare sehen auf den meisten Webseiten gleich aus. Peppen Sie Ihre farblich auf. Mit dem folgenden Quelltext fügen Sie ein Listenfeld in Ihre Webseite ein, bei dem der Text rot dargestellt wird. Wenn Sie eine andere Farbe haben möchten, geben Sie statt "red" den gewünschten Farbnamen oder den entsprechenden Hexadezimal-Code ein.
<form name="form">
<select name="select"
style="color : red">
<option value="1">Link A
</option>
<option value="2">Link B</option>
<option value="3">Link C</option>
</select>
</form>
-
Individuelle Fehlermeldungen
Individuelle Fehlermeldungen
Erweitern Sie Ihre Homepage um individuelle Fehlermeldungen für ungültige Web-Adressen.
Wenn Sie eine falsche Adresse im Browser eintippen, erscheint eine Webseite mit der Fehlermeldung 404: Datei nicht gefunden (oder ähnlich). Diese Meldung erzeugt im Regelfall der Web-Server. Wenn Sie Webspace mit eigener Domain haben, können Sie diese Fehlerseite nach Belieben ändern. Dazu erzeugen Sie die Datei .htaccess mit einigen Befehlen. Die Textdatei muss nur eine Zeile enthalten: ErrorDocument 404 /fehler404.htm Anschließend gestalten Sie noch die Fehlerseite und kopieren Sie unter dem Namen fehler404. htm in das Hauptverzeichnis auf dem Web-Server.
-
Eingabefelder mit Fokus
Eingabefelder mit Fokus
Mit zwei Event-Handlern färben Sie Eingabefelder in einem Formular ein, sobald sie den Fokus bekommen. Der Besucher weiß so immer, welches Eingabefeld gerade aktiv ist. Dazu ergänzen Sie das <input>-Tag so:
<input type="text"
style="background
Color='#FFFF99'"
onFocus="this.style.background
Color='#EEEEEE'"
onBlur="this.style.background
Color='#FFFF99'">
Sie müssen lediglich die Farben anpassen.
-
Bildsymbolleiste für IE6 ausschalten
Bildsymbolleiste für IE6 ausschalten
Der Internet Explorer 6 zeigt standardmäßig bei allen Bildern ab 130 x 130 Pixel eine Bildsymbolleiste an, wenn der Mauszeiger über dem Bild ruht. Um diesen Effekt auszuschalten fügen Sie ein Meta-tag in Ihre Webseiten ein:
<meta http-equiv="imagetoolbar"
content="no">
Das schaltet die Leiste für alle Bilder der Webseite ab. Für ein einzelnes Bild deaktivieren Sie die Symbolleiste mit dem Attribut galleryimg:
<img src="bild.jpg"
galleryimg="false">
Im Browser können Sie die Symbolleiste ebenfalls deaktivieren: Extras/Internetoptionen und das Register Erweitert aufrufen. Löschen Sie dann das Häkchen vor Bildsymbolleiste aktivieren.
-
Formularvorgaben ausblenden
Formularvorgaben ausblenden
Helfen Sie Ihren Besuchern beim Ausfüllen von Formularen mit vorgegebenen Texten. Ein kleines Skript sorgt dafür, dass diese Vorgabewerte beim Anklicken des Eingabefeldes verschwinden. Achten Sie bei der Eingabe auf die einfachen Anführungszeichen:
<input type="text"
value="Vorgabe"
onFocus="if(this.value=='Vorgabe'
) this.value=''"
onBlur="if(this.value=='')this.va
lue='Vorgabe'">
-
Homepage mit Metasuche
Homepage mit Metasuche
Wollen Sie den Besuchern Ihrer Homepage eine Metasuche zur Verfügung stellen, sollten Sie bei www.avenue-it.com/metasearch/ vorbei schauen. Der vom Anbieter kostenlos zur Verfügung gestellte Service ist mit wenigen Handgriffen in eine bestehende Seite eingebaut und deckt derzeit 59 internationale Suchdienste ab. Im Bereich www.avenueit.com/metasearch/customize.html wählen Sie aus, welche Suchmaschinen Ihre Besucher vorfinden sollen.
-
Keine Legende
Keine Legende
Der <legend>-Befehl gehört zu den eher selten genutzten Tags. Dabei können Sie mit diesem, für Gruppenüberschriften konzipierten, Befehl recht ansehnliche Effekte erzielen. Zu beachten ist aber, dass das <legend>-Tag nur in Verbindung mit dem <fieldset>-Befehl funktioniert. Ein typisches Beispiel:
<form>
<fieldset width="100%">
<legend><b>Ode an die
Legende</b></legend>
<p>Lauftext</p>
</fieldset> </form>
-
Kostenlose Scripts
Kostenlose Scripts
Nicht jeder Homepagedesigner hat Zeit oder Lust, sich in die Feinheiten von JavaScript einzuarbeiten. Im Grunde genommen ist dies auch nicht nötig, da es im Web eine ganze Reihe ausgezeichneter Anlaufstellen gibt, die Sie mit kostenlosem Code versorgen. Eine besonders große Auswahl vorgefertigter Java-Scripts finden Sie bei javascript.internet.com/.
-
HTML-Editor in Java
HTML-Editor in Java
Kostenlos, leistungsfähig, komplett in Java geschrieben und somit plattformübergreifend - dass sind die Merkmale des Freeware- HTML-Editors Arachnophilia 5.2 Build 1959. Das Tool beherrscht die farbige Codeauszeichnung, unterstützt das Kontextmenü der rechten Maustaste und verfügt über einen integrierten FTP-Client zum Upload der Homepage. Zudem erlaubt es der Editor, dass Sie die Benutzeroberfläche an Ihre Wünsche anpassen.
-
Topaktuelle Virennews
Topaktuelle Virennews
Um die eigene Homepage mit Mehrwert auszustatten, implementieren viele Webmaster fremde Zusatzinhalte, wie etwa Stadtpläne oder Newsticker. Ein interessantes und zugleich informatives Add-On bietet Trendmicro, Hersteller von Anti-Virus-Software, an. Nach der Anmeldung auf der Seite de.trend micro-europe.com/consumer/security_info/ add_virus_info.php können Sie eine Viren Infobox in Ihre Webseite einbauen. Diese informiert alle Besucher über die fünf derzeit aktuellsten Viren und stellt auch Links zu Hintergrundinfos zur Verfügung. Wichtiges Kriterium: Der Service ist kostenlos.
-
Infos über verschiedene Browserversionen
Infos über verschiedene Browserversionen
Wer seine Homepage plattformübergreifend programmiert, muss über die Eigenarten der diversen Browsertypen und -versionen Bescheid wissen. Als auskunftsfreudigste Referenz gilt hier Webmonkey (hotwired.lycos. com/webmonkey/reference/browser_chart). Die Tabellen geben etwa Aufschluss darüber, welche Surfhilfen Standards wie DHTML, XML und Gif 89a unterstützen. Und das nicht nur für Windows. Auch Browser der Betriebssysteme Mac, Linux und BeOS, OS/2 werden abgedeckt.
-
Tiefe Ausblicke auf CSS 3
Tiefe Ausblicke auf CSS 3
Es dauert zwar noch ein wenig, bis CSS 3 freigegeben wird, dennoch können sich Interessierte bereits jetzt über die wichtigsten Neuerungen und Erweiterungen informieren (www.w3.org/Style/CSS/current-work). Besonders Features wie das mehrspaltige Layout, alternative Auszeichnungen von Hyperlinks und flexiblere Selectors erhöhen die Gestaltungsoptionen eines Webdesigners.
-
Mozilla mit eigenen Cursorn
Mozilla mit eigenen Cursorn
Der Open-Source-Browser verfügt - wie seine beiden Konkurrenten - über einen Satz spezieller Cursor. Ein Webdesigner spricht sie mit dem Befehl style="cursor: -moz-Befehl" gezielt an. Bemerkenswert ist, dass bereits einige Mauszeiger, wie -moz-zoom-in, -mozzoom out und -moz-alias, vorhanden sind, die CSS3-Features voraussetzen. Die komplette Liste finden Sie auf www.worldtimezone. com/mozilla/testcase/css3cursors.html.
-
Minimalismus
Minimalismus
Unter www.the5k.org finden Sie Websites, die die Welt nicht braucht. Auf der englischsprachigen Site dürfen nur Webseiten eingereicht werden, die maximal 5 KBytes groß sind. Die Besten werden prämiert. Halten Sie in den Galerien Ausschau nach kompakten JavaScript-Anwendungen. Oft erweisen sich die rein nach ästhetischen Gesichtspunkten oder als Spielchen angelegten Minihomepages als wertvolle Helferlein-Sammlung.
-
Homepage in PDF konvertieren
Homepage in PDF konvertieren
Adobe Acrobat bietet ab Version 4.0 an, einzelnen Webseiten oder komplette Internetpräsenzen zu laden und in ein PDF-Dokument umzuwandeln. Im Dropdownmenü Datei finden Sie die Option Web-Seite öffnen..., Sie werden nach der URL gefragt. Die gewünschte Homepage wird aus dem Internet geladen und konvertiert. Verweise bleiben aktiv.
-
Keine Scroll-Leiste mehr
Keine Scroll-Leiste mehr
Der Internet Explorer zeigt auf der rechten Seite des Browserfensters immer eine Scroll-Leiste, obwohl das Layout komplett in das Fenster passt. Schreiben Sie im <body>-TAG einfach scroll="no" (<body scroll="no">) und Ihre Homepage steht sauber im Browserfenster. Das ist auch bei Framesets sehr nützlich. Als Variation können Sie statt no auch auto verwenden, damit bei Inhalten, die wirklich gescrollt werden müssen, gewährleistet ist, dass sich die Scroll-Leisten automatisch wieder einblenden.
-
SVG: das vergessene Grafikformat
SVG: das vergessene Grafikformat
SVG (Scalable Vector Graphics) ist seit 2001 eine auf XML basierende Auszeichnungssprache. Es handelt sich um einen Standard des World Wide Web Consortiums für eine neue und effektive Internetprogrammierung. Bisher konnten Sie zweidimensionale und skalierbare Vektorgrafiken und -animationen nur mit Flash gestalten. Leider wird das SVGFormat immer noch nicht von allen Browsern unterstützt.
http://svg.tutorial.aptico.de
-
Überflüssige Font-TAGs
Überflüssige Font-TAGs
Homepages, die mit WYSIWYG-Webeditoren geschrieben werden, hängt oft Datenmüll an. Wenn z.B. nicht mit Stylesheets, sondern per HTML Webtexte formatiert werden, passiert es, dass geschachtelte Font-TAGs den Sourcecode unnötig aufblähen. Gute Webeditoren haben einen Validator, der prüft, ob der Code sauber ist. Bei Dreamweaver gibt es z.B. in dem Dropdownmenü unter Command die Auswahl Clean Up HTML.... Das folgende Dialogfenster bietet eine ganze Reihe Aufräumaktionen zur Auswahl an.
-
Schöne Schriften
Schöne Schriften
Mit schöner Typografie kann man durchaus seine Homepage aufwerten. Die Standard-Windows-Zeichensätze sind meist langweilig, weil sie irgendwann jeder kennt. Unter www.fontomas.de/ finden Sie wöchentlich aktualisierte Free-Fonts zum Download für PC und Macintosh.
-
Tutorial für SVG-Vektorgrafik
Tutorial für SVG-Vektorgrafik
Die Beschreibungssprache SVG für Vektorgrafiken führt ein Schattendasein, obwohl sie wie (X)HTML vom W3C stammt. Eine gute deutschsprachige Dokumentation nach dem SELFhtml-Schema gibt es unter www.self svg.info. Spätestens mit dem neuen Windows Longhorn wird SVG interessant, denn die Oberfläche soll Vektorgrafiken unterstützen.
-
Bookmarklets erweitern Browser
Bookmarklets erweitern Browser
Ein Mausklick zeigt den Wert aller class-Attribute der aktuellen Webseite an. Oder Sie schalten ruckzuck alle Stylesheets aus. Oder wie wäre es mit einer tabellarischen Liste aller JavaScript-Variablen? Wer schon einmal einen tückischen Fehler gesucht hat, kann den Wert solcher Tools sicher einschätzen. Das Geheimnis dahinter sind Bookmarklets, kurze JavaScript-Programme, die sich über einen normalen Link mit href="javascript: starten lassen. Viele solche Bookmarklets gibt es kostenlos zum Download wie bei www.squarefree.com/bookmarklets/webdevel.html. Die meisten hier vorgestellten Bookmarklets funktionieren mit Mozilla/Firefox, manche auch mit IE und Opera.
-
Anführungszeichen im Formular
Anführungszeichen im Formular
In einem Formular dürfen Sie Eingabefelder mit einem Text vorbelegen. Dafür ist das Attribut value zuständig. Den Text schließen Sie in die Anführungszeichen ein. Manchmal wäre es aber nützlich, im Text selbst Anführungszeichen zu verwenden. Dabei hilft, dass HTML doppelte und einfache Anführungszeichen (" und `) gleichwertig behandelt. Um die doppelten Anführungszeichen in den Vorgabetext einzubauen, fassen Sie den Text mit einfachen Anführungszeichen ein:
<input type="input" size=40 value='Bitte "Ihren Senf" dazugeben'>
Das Verfahren klappt natürlich auch andersherum:
value="Bitte `Meinung' eintippen"
-
E-Mail-Adressen-Versteck
E-Mail-Adressen-Versteck
E-Mail-Adressen, die im Klartext auf den Websiten stehen, laden dazu ein, per Bot gesammelt und künftig mit zahllosen SpamMails belästigt zu werden. Um dies zu verhindern, codieren Sie Adressen innerhalb der Seite so, dass kein Bot sie findet. Dennoch bieten Sie Ihrem Besucher einen aktiven Link, der per Mausklick das Standard-Mailprogramm öffnet und die richtige Adresse einfügt. Dies erreichen Sie, indem Sie die Adresse in die Teile Name, Klammeraffe und Domain gliedern. Die Teile fügt ein Skript bei Bedarf zusammen:
<script> var vorne="name"; var hinten="adresse.de"; var mitt mitte="@";document.write("<A HREF=\"mailto:"+vorne+mitte+hinte n+"\">Mailen Sie mir</a>") </script>
-
htaccess: Hot-Linking verhindern
htaccess: Hot-Linking verhindern
Die vielseitige Datei htaccess kann auch die Inhalte Ihrer Website schützen.
Die Datei .htaccess bietet dem Webmaster Vieles: So lassen sich die eigenen Dateien vor dem Verlinken durch externe Websites schützen, wenn Bildmaterial auf Ihrer Website in fremde Websites eingebunden wird. Der Eintrag in der Datei .htaccess lautet:
RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http://(www\.)?die_eigene_adresse.de /.*$ [NC] RewriteRule \.(gif|jpg)$ - [F]
Der Webserver prüft, ob gif- und jpg-Dateien aus der eigenen Domain angefordert werden. Sollte ein fremder Request erfolgen, wird ein Datei-nicht-gefunden-Fehler erzeugt. Sie können diesen Schutz verschärfen, indem Sie dem Unberechtigten einen Hinweis auf Ihre Site schicken. Modifizieren Sie die .htaccess-Datei:
RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http://(www\.)?die_eigene_adresse.de /.*$ [NC] RewriteRule \.(gif|jpg)$ http://www.die_eigene_adresse.de/warnu ng.gif [R,L]
-
Generatoren-Vielfalt
Generatoren-Vielfalt
Was tun, wenn Sie schnell eine dreidimensionale Überschrift brauchen, ein Stylesheet oder ein Frameset? Nicht immer ist gleich das richtige Tool zur Hand, nicht immer sind alle nötigen Parameter im Gedächtnis präsent. Die Site www.html-php-mysql.de bietet eine komfortable Lösung: Die Rubrik Generatoren sammelt kleine und größere Helfer, die eben diese Probleme im Handumdrehen lösen. Der Link 3D-Generator etwa bietet das Xara 3D Online-Tool. Sie geben den Schriftzug ein, wählen Font und Farbe und speichern dann die frisch gerenderte Grafik so schnell geht das!
-
Kostenlose Klangwelten
Kostenlose Klangwelten
Wer Flash-Filme entwickelt, will Klänge und Musik nicht missen. Leider sind gerade kostenlose Soundclips von hoher Qualität dünn gesät. Eine nahezu unerschöpfliche freie Fundgrube bietet Flashkit www.flashkit. com. In den Rubriken Sound FX und Sound Loops findet der Flash-Entwickler Klänge für jeden Einsatzzweck. Fast alle Klänge tönen in den Formaten Wave, Mp3 und Flashtrack, so dass Sie es sich selbst in den meisten Fällen sparen können, das Material zu konvertieren. Was braucht der Entwickler mehr?
-
Bedingte Kommentare
Bedingte Kommentare
Wollen Sie verhindern, dass Teile einer Webseite auf einem anderen Browser als dem Internet Explorer in der Version 6 ausgewertet werden oder eventuell falsch dargestellt werden? Sie müssen dann nicht unbedingt eine Browserweiche per Skript schreiben, wie es meist üblich ist. Microsoft unterstützt so genannte Conditional Comments, die die zwischen den Kommentarbegrenzern liegenden Anweisungen in anderen Browsern außer Kraft setzen können. Auf diese Art lassen sich auch Stylesheets laden, die für den IE 6 optimiert sind.
<!--[if gte IE 5]>
<style type="text/css"> H3 {color: red} </style>
<![endif]-->
...
<H3>Diese Zeile erscheint im IE ab Version 5 in rot, in Firefox dagegen in schwarz</H3>