20.05.2013 Aufrufe

HTML - Saxonia Freiberg

HTML - Saxonia Freiberg

HTML - Saxonia Freiberg

MEHR ANZEIGEN
WENIGER ANZEIGEN

Erfolgreiche ePaper selbst erstellen

Machen Sie aus Ihren PDF Publikationen ein blätterbares Flipbook mit unserer einzigartigen Google optimierten e-Paper Software.

Mit DVD<br />

Autoren dieser Ausgabe: Edgar Braunwarth, Peter Filinski, Martin Goldmann, Christian Grandl, Tobias Hauser, Dr. Andreas Holzinger,<br />

Martin Kirmaier, Stefan Kurzweg, Kai Laborenz, Claus Lehmann, Dieter Mayer, Prof. Dr. Arnulf Mester, Stefan Münz, Dr. Karl Prinz,<br />

Tommy Schmidt, Markus Schraudolph, Michael Schweizer, Nicole Weber, Christian Wenz, Prof. Dr. Thomas Wirth, Sascha Wolter<br />

Web-Design<br />

professionell<br />

Was User wirklich wollen<br />

So wirken Design, Navigation & Bedienung perfekt zusammen<br />

SPECIAL: Das neue PHP 5<br />

Alle neuen Funktionen, Workshops zu SQLite, MySQL, XML & Tuning<br />

Design auf dem neuesten Stand<br />

Praxis und Profi-Tipps zu <strong>HTML</strong>, CSS, Javascript, PHP 4, XML, XSLT<br />

Das Erfolgsgeheimnis der Marktführer<br />

Experten-Wissen: Top-Tipps zu Suchmaschinen-Ranking, E-Commerce,<br />

Streaming im Eigenbau, Syndication mit RSS, Flash, Zusatzdienste<br />

VOLLVERSION<br />

VOLLVERSION<br />

Exklusiv: Die besten Tipps der Web-Agenturen<br />

Erfolgreiche Firmen-Websites – und wie sie entstanden<br />

AUF DVD VOLLVERSIONEN IM WERT VON 250 EURO<br />

Super<strong>HTML</strong> 6.0<br />

Professioneller <strong>HTML</strong>-Editor<br />

Hello Engines!<br />

Standard 3.2 SE<br />

mit kompletter Tag-Referenz<br />

Auscomp eNavigator<br />

Suite 6.0<br />

Navigationsmenüs mit Java<br />

Aktuelle Verkaufsversionen<br />

€ 19,95<br />

Österreich, Luxemburg: € 19,95<br />

Schweiz: sfr 30<br />

SmartStore OFFICE<br />

CRM mit Newsletter, E-Mail-<br />

Marketing, Bestellabwicklung<br />

SmartStore.biz 3.5<br />

E-Commerce-Komplettlösung<br />

für Web-Shops im Eigenbau<br />

AUSGABE 05/2004<br />

SEPTEMBER /OKTOBER<br />

VOLLVERSION<br />

VOLLVERSION<br />

Eintrag bei 100 Suchmaschinen<br />

Intrexx Xtreme Portal<br />

Manager<br />

Intranet für Microsoft & Linux<br />

Plus 555 Web-Tools für <strong>HTML</strong>, XML, CSS, Javascript, Flash, FTP, PHP, MySQL, Server & Grafik<br />

Die DVD enthält keine jugendbeeinträchtigenden Inhalte.


4<br />

INHALT |<br />

6 Vollversionen,<br />

555 aktuelleTools<br />

und Demos<br />

Die Web-Design-Toolbox ausgesucht<br />

von CHIP: Eine DVD<br />

randvoll mit den 555 besten<br />

Tools und Demos rund um<br />

Web-Design, sechs wertvollen<br />

Vollversionen und<br />

allen Listings aus dem Heft.<br />

Profi-Software für den<br />

perfekten Web-Auftritt<br />

Aktuelle Trials u.a. von<br />

Dreamweaver MX 2004,<br />

GoLive CS, dazu freie CMS<br />

und Macromedia-Extensions<br />

Vollversion: Intrexx<br />

Xtreme Portal Manager<br />

Eigene Firmenportale für<br />

Windows oder Linux mit<br />

minimalem Aufwand<br />

gestalten und pflegen<br />

Die besten <strong>HTML</strong>-<br />

Editoren, Tools & Kurse<br />

Auf DVD: Top-Editoren wie<br />

Phase 5, geniale Tools wie<br />

<strong>HTML</strong> Toolbox 3.2 und die<br />

Referenz Self<strong>HTML</strong> 8.0<br />

Vollversion: <strong>HTML</strong>-Editor<br />

Super <strong>HTML</strong> 6.0<br />

Komfortabler Quellcode-<br />

Editor zum Erzeugen<br />

von <strong>HTML</strong>-Code – schnell,<br />

flexibel und Ballast-frei<br />

Freeware: Saxon 8.0<br />

XSLT-Prozessor<br />

Dröge XML-Daten verwandelt<br />

Saxon in schicke <strong>HTML</strong>-<br />

Dokumente – praktisch bei<br />

häufig wechselnden Inhalten<br />

Vollversion: Auscomp<br />

eNavigator Suite 6.0<br />

Gegen Orientierungslosigkeit:<br />

eNavigator 6.0 für<br />

perfekte Java-Navigationsmenüs<br />

per Mausklick<br />

CHIP | PROFESSIONELL<br />

| AKTUELL|<br />

6 Hier kommt Ihre Zukunft<br />

Welche Veränderungen Microsofts .Net-Konzept für das Web-<br />

Design bringen wird – und warum Sie sich dafür rüsten sollten.<br />

18 DVD Inhalt: 555 Web-Tools im Überblick<br />

Alle 555 Demos, Freeware- und Shareware-Programme der<br />

Heft-DVD inklusive Versionsnummern und Artikelverweisen.<br />

20 DVD-Highlights mit CHIP-Tipps<br />

Auf vier Seiten präsentiert CHIP insgesamt 22 Highlights der<br />

Heft-DVD mit zusätzlichen Tipps zu jedem Programm.<br />

| PLANEN |<br />

10 Schön + einfach + schlicht = erfolgreich<br />

Nicht Hunderte von Features sind wichtig für die User,<br />

sondern klare Strukturen und gute Inhalte.<br />

24 Recht: Teure Fehler vermeiden<br />

Informieren Sie sich rechtzeitig über die rechtlichen Aspekte<br />

Ihres Online-Auftritts! Das spart viel Ärger.<br />

28 Web-Editoren für Allrounder und Puristen<br />

Wer braucht welchen Editor? CHIP hat die aktuellen Web-<br />

Editoren auf ihre Leistungsfähigkeit überprüft.<br />

32 CMS: Web-Baukasten für Profis<br />

Zur Pflege einer größeren Website empfehlen sich Content-<br />

Management-Systeme. 18 CM-Systeme im Überblick.<br />

36 Tarifvergleich: Die besten DSL-Anbieter<br />

Um Ihre Website-Updates hochzuladen, brauchen Sie einen<br />

guten SDSL-Zugang. CHIP stellt die besten vor.<br />

40 Sparen beim Webspace: Wer bietet was?<br />

Webspace richtig planen: CHIP hat die Webhosting-Pakete<br />

der wichtigsten Provider für Sie zusammengestellt.<br />

| AUFBAUEN |<br />

44 Web-Werkzeuge richtig ansetzen<br />

Web-Designer benötigen ein solides Grundwissen. CHIP<br />

verrät, mit welchem Werkzeug Sie was erreichen können.<br />

46 Seitenaufbau mit <strong>HTML</strong><br />

Was jeder Web-Designer von <strong>HTML</strong> wissen muss, um einen<br />

ansprechenden Internet-Auftritt zu gestalten.<br />

52 Super<strong>HTML</strong>: Profi-Hilfe für Designer<br />

Die besten Praxis-Tipps für die Vollversion des Web-Editors<br />

Super<strong>HTML</strong> 6.0 auf der Heft-DVD.<br />

58 XML: Daten clever austauschen<br />

XML ist das neue Standardformat für den Austausch<br />

von Daten, etwa aus Access via XML ins Web.<br />

62 XSLT: So wird XML zu <strong>HTML</strong><br />

Neu: Mit Hilfe der Stilvorlage XSLT werden aus XML-Daten<br />

ansprechend aufbereitete Webseiten.<br />

66 CSS: Schnelle Stilvorlagen<br />

Die zentralen Layout-Vorgaben der Cascading Style Sheets<br />

(CSS) optimieren die Verwaltung der Website.<br />

72 JavaScript: Leben für die Website<br />

Mit JavaScript können Sie nicht nur die Optik, sondern<br />

auch neue Funktionen in Ihre Seite einbauen.<br />

82 PHP: Eigenes Redaktionssystem bauen<br />

Neue Informationen schnell auf die Website stellen –<br />

mit PHP und MySQL gelingt das im Nu.<br />

EDITORIAL<br />

Wie das Web zur Wüste wurde<br />

Schönheit steht über Genie, weil<br />

sie keine Erklärung braucht –<br />

Oscar Wilde hatte leicht dichten<br />

so ziemlich genau 100 Jahre<br />

vor dem Dotcom-Sterben.<br />

Wer je ein Kundengespräch<br />

in einer Web-Agentur oder<br />

eine Aufsichtsratssitzung erlebt<br />

hat, kennt die moderne Über<br />

setzung von „Genie“: Geld,<br />

Profit, schwarze Zahlen. Beim<br />

Blick auf die erfolgreichsten<br />

Internet-Seiten sehe ich dieses<br />

Schwarz auch deutlich – vor<br />

Augen.<br />

Beispiele gefällig? „Amazon“ –<br />

ein genialer Shop, der stolz<br />

darauf ist, sein Design nie zu<br />

ändern. „eBay“ – eine<br />

Kategorienwüste mit wackligwaghalsigen<br />

Fotos von<br />

genial vielen<br />

Kunden.<br />

„Google“ – ein<br />

geniales Such-<br />

Loch mit Links<br />

drumrum.<br />

THOMAS H. KASPAR,<br />

CHEFREDAKTEUR<br />

CHIP-SONDERHEFTE<br />

Mister <strong>HTML</strong><br />

War es das<br />

also? Haben<br />

die „Form<br />

„Self<strong>HTML</strong>“ von Stefan Münz<br />

ist die wohl bekannteste<br />

<strong>HTML</strong>-Referenz.<br />

Sein Kompendium<br />

finden Sie in der<br />

neuen Version auf<br />

DVD, seine neuen<br />

Tipps lesen Sie auf<br />

s49 und s75.<br />

PHP vom Profi<br />

Mehr als 35 Computerbücher<br />

hat Christian Wenz bereits<br />

verfasst. Jetzt<br />

schreibt der renommierte<br />

Autor, Trainer<br />

und Berater<br />

für CHIP. Seinen<br />

Beitrag zu PHP<br />

finden Sie auf s90.<br />

Neu! Neuer! PHP 5<br />

Noch druckfrisch ist Markus<br />

Schraudolphs Referenzbuch<br />

(mit Martin Goldmann)<br />

zu PHP 5.<br />

Nicht weniger<br />

frisch stellt er alle<br />

Neuerungen in<br />

unserem Special<br />

ab s92 vor.


follows function“-Fetischisten<br />

endgültig gesiegt?<br />

Der „Spiegel“ hält dagegen:<br />

Der Börsenwert dieser Unternehmen<br />

übersteigt den Umsatz<br />

zigfach. Ich halte dagegen:<br />

So wird das Web nicht funktionieren,<br />

weil Menschen nicht<br />

gern durch Wüsten wandern.<br />

Wer immer nur das Hirn am<br />

verlängerten Ende des Mausarms<br />

anspricht, baut keine<br />

Bindung zu einer Seite auf.<br />

Nur wer auch Gefühle erzeugt,<br />

gewinnt langfristig. Und<br />

Emotionen sind viel mehr als<br />

Nutzen: Überraschung, Ästhetik<br />

– Schönheit eben.<br />

Ich glaube, dass auf den Festplatten<br />

bereits mehr Lösungen<br />

schlummern, als wir online<br />

sehen. Her mit den Design-<br />

Konzepten für Hirn und Herz!<br />

Schickt sie per Mail an<br />

tkaspar@chip.de oder stellt<br />

sie in unser neues Forum:<br />

www.chip.de/sonderhefte.<br />

XML für den Kopf<br />

„Design macht man mit den<br />

Augen, XML mit dem Kopf.“<br />

Wie spannend das<br />

Abenteuer XML<br />

jenseits aller<br />

Technologie sein<br />

kann, verrät<br />

Prof. Dr. Thomas<br />

Wirth auf s61.<br />

CSS-Tipps<br />

Den Königsweg zu anspruchsvollen<br />

CSS-Layouts hat Kai<br />

Laborenz in seinem<br />

Standardwerk<br />

„CSS-Praxis“ aufgezeigt.<br />

Seine Tipps<br />

zu Cascading Style<br />

Sheets lesen Sie auf<br />

s69 und s132.<br />

Praxis pur<br />

Nutzen ist das Metier von<br />

Martin Goldmann, wie sein<br />

Dienst Tippscout.<br />

de (mit M. Schraudolph)<br />

zeigt. Info<br />

pur vermittelt er<br />

im Überblick über<br />

die Web-Werkzeuge<br />

ab s40.<br />

| SPECIAL PHP 5 |<br />

Das neue PHP 5 92<br />

Lohnt der Umstieg auf die soeben erschienene Version?<br />

Alle Neuerungen im Überblick.<br />

SQLite: Daten smart verwalten 100<br />

SQLite ist die in PHP eingebaute Datenbank. Nutzen Sie<br />

deren Stärken in Ihren eigenen Anwendungen.<br />

OOP: Einfacher programmieren 103<br />

Mit PHP 5 gibt es nun alle Grundlagen, um in die objektorientierte<br />

Programmierung einzusteigen.<br />

Try & catch: So wird der Code sicher 108<br />

Mit „try“ und „catch“ lassen sich Programmfehler wesentlich<br />

leichter abfangen und behandeln.<br />

MySQL: Runderneuerte Datenbank 112<br />

Die Unterstützung von MySQL geht in PHP 5 neue Wege.<br />

So setzen Sie die neuen Funktionen ein.<br />

XML-Daten besser im Griff 116<br />

Mit neuen Programm-Modulen erleichtert PHP 5 die Arbeit<br />

mit XML-Daten entscheidend.<br />

Web-Services: Dienste weltweit nutzen 120<br />

Web-Services, etwa die Einbindung von Google, werten<br />

Websites auf. Dazu braucht es SOAP.<br />

| OPTIMIEREN |<br />

Tipps & Tricks 128<br />

Neue Tipps: Diese Sammlung an Tuning-Tipps macht es<br />

leicht, jede Website schnell zu optimieren.<br />

Ganz oben bei Google 142<br />

Neue Ranking-Anforderungen: So tunen Sie Ihre Site für<br />

Google & Co. und melden sie bei den Robots an.<br />

News frei Haus via RSS 146<br />

Neuer Trend RSS: Wie Sie Neuigkeiten auf Ihrer Seite mit<br />

News-Feeds noch attraktiver vermarkten.<br />

Animiert zum Mitmachen 148<br />

Neue Version: Mit Flash MX 2004 produzieren Sie multimediale<br />

Animationen noch einfacher.<br />

Videos in Sites einbinden 152<br />

Neue Möglichkeiten: Als Streaming Media lassen sich Filme<br />

jetzt optimal in die Website einbinden.<br />

Jede Seite ist Geld wert 154<br />

Neue Erwerbsmöglichkeiten: Die besten Partnerprogramme,<br />

die erfolgreichsten Strategien.<br />

Erfolgreich verkaufen 160<br />

Neue Vollversionen: Mit SmartStore.biz und SmartStore<br />

Office bauen Sie eigene Webshops auf und verschicken<br />

personalisierte Newsletter.<br />

| RUBRIKEN |<br />

Forum 51<br />

Impressum 51<br />

Buch-Tipps 91<br />

Leser-Umfrage 145<br />

Vorschau 162<br />

PHP-Entwicklung<br />

für Fortgeschrittene<br />

Starke Leistung: Die PHP-<br />

Entwicklungsumgebungen<br />

Maguma Workbench 2.0<br />

und Zend Studio 3.5 verwandeln<br />

kreative Ideen in<br />

perfekte Anwendungen<br />

Freeware: MySQL<br />

Open Source Database<br />

Die meistgenutzte Open-<br />

Source-Datenbank im Web<br />

verwaltet Daten auf einem<br />

Web-Server und ermöglicht<br />

dynamischen Content<br />

Die besten XML-Editoren<br />

für Professionals<br />

Professional XML Suite<br />

2004 und XMLwriter 2.4:<br />

XML programmieren und<br />

bis ins Detail optimieren<br />

Freeware: Automatische<br />

Bildergalerien<br />

Gallery Wizard 2.0, Gallery-<br />

Maker 2.3.8 und Fotos on<br />

Web 1.1.1 stellen Online-<br />

Bildergalerien auf Knopfdruck<br />

ins Internet<br />

Vollversion: Hello<br />

Engines! Std. 3.2 SE<br />

Mit unserer Sonderedition<br />

von Hello Engines! lassen<br />

sich Seiten automatisch<br />

bei 100 Suchmaschinen<br />

und -diensten anmelden.<br />

Website-Traffic<br />

deutlich steigern<br />

Ranking Toolbox 3.1 optimiert<br />

Websites für Suchdienste<br />

und sorgt damit für<br />

bessere Besucherzahlen<br />

Flash: Mehr Bewegung<br />

für die Homepage<br />

Perfekte Multimedia-<br />

Animationen gelingen mit<br />

Macromedia Flash MX 2004<br />

Trial. Für schnellen Erfolg<br />

sorgen SWiSH 2.0, CoffeCup<br />

Firestarter 6.5 oder der<br />

Flash-Creator 1.0.<br />

Vollversionen:<br />

SmartStore biz & Office<br />

Plattform-unabhängige<br />

Shops via Assistent,<br />

Kundenpflege via Newsletter<br />

Bestellabwicklung<br />

CHIP | PROFESSIONELL<br />

5


6<br />

AKTUELL k Zukunft des Web-Design | PLANEN | AUFBAU | SPECIAL | OPTIMIEREN |<br />

Hier kommt Ihre Zukunft<br />

Microsoft bastelt schon heftig am neuen Internet Explorer, und alles sieht nach einem radikalen Schnitt aus.<br />

Den Ton werden künftig Skriptsprachen wie Visual Basic .Net oder C# angeben, die Anwendungen werden<br />

auch ohne Web lauffähig sein. Grund genug für Web-Programmierer, sich rechtzeitig mit Microsofts .Net-Konzept<br />

zu beschäftigen – damit Sie auf die kommenden Umwälzungen vorbereitet sind.<br />

k<br />

<strong>HTML</strong> ade? Was noch bis vor kurzem undenkbar schien,<br />

nimmt jetzt Gestalt an. Die Programme der Zukunft<br />

werden keinen <strong>HTML</strong>-Code mehr als Ausgabe produzieren –<br />

ja, Sie können auch ganz ohne <strong>HTML</strong>-Kenntnisse programmieren.<br />

Doch der Reihe nach.<br />

Seit der Entwicklung des ersten <strong>HTML</strong>-Browser durch Tim<br />

Berners-Lee vor fast 15 Jahren hat das Web-Design große Umwälzungen<br />

erfahren, die immer auch die Intentionen widerspiegeln,<br />

die man mit dem Web verbunden hat. Überwog zu Beginn<br />

noch die Freude, weltweit publizieren zu können, kam<br />

schnell der Wunsch nach Individualität und Professionalität im<br />

Design auf. Und nicht zuletzt sollten Webseiten auch einfach<br />

wartbar sein und Interaktion mit ihren Benutzern erlauben.<br />

So wurde <strong>HTML</strong> in immer neuen Versionen aufgelegt und<br />

durch andere Konzepte flankiert, beispielsweise mit CSS und<br />

XML oder durch Skiptsprachen im Browser und auf der Seite<br />

der Webserver. Dabei passierte es immer wieder, dass einige<br />

Browser-Hersteller ihr eigenes Süppchen kochten und am W3C-<br />

Standard vorbei neue Möglichkeiten schufen, die der eigenen<br />

Firmenpolitik dienten oder einfach einen Vorsprung gegenüber<br />

der Konkurrenz schaffen sollten. Erst in den letzten Jahren hat<br />

sich eine gewisse Harmonie zwischen den großen Browsern untereinander<br />

und den W3C-Vorgaben eingestellt.<br />

Von den Möglichkeiten her bietet der heutige Stand dieser<br />

Techniken viel. Die Heterogenität aber, die sich dabei eingestellt<br />

hat, das Sammelsurium aus Standards erschwert jedem<br />

Entwickler die Arbeit, vor allem, wenn er die wechselvolle<br />

Geschichte dieser Standards nicht selbst miterlebt hat, sondern<br />

sich erst mit der ganzen Thematik auseinandersetzen muss.<br />

Konzentration auf die Syntax<br />

Für die Zukunft gerüstet ist auf jeden Fall, wer die Schlüsseltechniken<br />

CSS (ab s66) und XML (ab s58) beherrscht, die<br />

in diesem Heft ausführlich vorgestellt sind. Auch dürfte X<strong>HTML</strong><br />

bald zum notwendigen Repertoire gehören. Denn diese Variante<br />

von <strong>HTML</strong> bietet zwar funktional keine Neuerungen, hat dafür<br />

aber klare Syntaxregeln – aus gutem Grund. Die großzügige<br />

Auslegung von <strong>HTML</strong>-Code (ab s46) durch die aktuellen<br />

Browser erlaubt zwar schludriges Arbeiten, bringt aber viele<br />

Nachteile für die Verwendung von <strong>HTML</strong>-Seiten. So ist es nur<br />

mit klarer Syntax problemlos möglich, Webseiten auf Geräten<br />

wie PDAs oder Mobiltelefonen anzeigen zu lassen.<br />

Weitere extreme Änderungen, die sich auf den Browser<br />

auswirken, wie in der Vergangenheit geschehen, sind eher nicht<br />

zu erwarten. Die Cascading Style Sheets (CSS) werden vielleicht<br />

CHIP | PROFESSIONELL<br />

noch elegantere Möglichkeiten bieten – und XML rückt sicherlich<br />

noch mehr in den Mittelpunkt.<br />

Ein Neuanfang ist nötig<br />

Trotzdem ist es Zeit für einen grundsätzlichen Neubeginn, der<br />

die Möglichkeit bietet, Ballast über Bord zu werfen, den man aus<br />

Kompatibilitätsgründen immer noch mitschleppen muss. Weil<br />

man aber den Millionen Usern im Internet nicht vorschreiben<br />

kann, ab sofort einen neuen Browser zu verwenden, der mit<br />

einem ganz anderen Konzept arbeitet, muss diese Revolution<br />

an anderer Stelle ansetzen, so dass man etwa weiterhin ei-<br />

WEB-DESIGN – VON 1990 BIS HEUTE<br />

<strong>HTML</strong> – die wechselvolle Geschichte eines<br />

1990 bis 1994<br />

HALLO<br />

1994 bis 1997<br />

HOME<br />

NEWS<br />

PRIVAT<br />

KONTAKT<br />

Links & Grafik Layout<br />

k Hypertext<br />

Links, die das Verknüpfen<br />

von Dokumenten erlauben,<br />

sind der Knüller des noch<br />

neuen Konzepts.<br />

k Farbe<br />

Einfache Auszeichnungen<br />

von Texten wie farbliche<br />

Abhebungen revolutionieren<br />

das Design der Seiten.<br />

k Bilder<br />

Grafiken gehören jetzt zum<br />

Grundinstrumentarium der<br />

Browser und werden erstmals<br />

schmückend oder als<br />

Buttons zur Navigation<br />

eingesetzt.<br />

k Menüs<br />

CNet macht es vor, alle folgen:<br />

Linksbündige Menüs<br />

mit grafischen Schaltflächen<br />

werden Standard.<br />

k Gestaltung<br />

Tabellen sind das Mittel<br />

der Wahl, um das Seitenlayout<br />

zu prägen.<br />

k Schrift<br />

Das -Tag erlaubt den<br />

Einsatz verschiedener<br />

Schriftgrößen und -arten.<br />

k Farbpalette<br />

Korrekte Farbdarstellung<br />

durch „Web-safe Palette“.


Standards<br />

Die besten .Net-Infos im Web<br />

Microsoft, die .Net-Heimat<br />

k http://www.microsoft.com/germany/themen/net<br />

Startpunkt für Informationen über .Net von Microsoft<br />

Gotdotnet k http://www.gotdotnet.com/<br />

Microsoft-nahe Entwickler-Community<br />

Mono-Projektk http://www.go-mono.org<br />

Freie .Net-Laufzeitumgebung für Linux, Macintosh und andere<br />

DevTrain k http://www.devtrain.de/<br />

Unabhängige deutsche Site mit .Net-Informationen<br />

nigermaßen gut mit einem Netscape-3-Browser surfen kann,<br />

ohne dass Sie als Entwickler auf diesen Anachronismus<br />

Rücksicht nehmen müssen.<br />

.Net – der radikale Schnitt<br />

Am Beispiel von Microsofts .Net-Konzept sieht man, wohin die<br />

Reise gehen könnte – und aller Wahrscheinlichkeit auch gehen<br />

wird. Das Grundprinzip dabei: Zwischen den Browsern und<br />

dem Entwickler wird eine Abstraktionsebene eingeschoben, die<br />

der Webserver erledigt. Was so hochtrabend klingt, bedeutet,<br />

dass Ihre Programme nicht mehr – wie bislang in Skript-<br />

1998 bis 1999 2000 bis 2004<br />

k k k<br />

k k k<br />

k k<br />

k k<br />

Bewegung Effizienz<br />

k Animation<br />

Die Verbreitung von<br />

Macromedia Flash sorgt für<br />

eine neue Qualität bei<br />

Grafik und Interaktion.<br />

k Dynamik<br />

Mit Dynamic <strong>HTML</strong> und<br />

DOM wird JavaScript zum<br />

wichtigen Instrument für<br />

aufwendige Navigationen.<br />

k Formatvorlagen<br />

Cascading Style Sheets entschlacken<br />

den <strong>HTML</strong>-Code<br />

und bringen allen geplagten<br />

Web-Designern Erleichterung<br />

durch einfache<br />

Formatverwaltung.<br />

k Spalten-Layout<br />

Gestaltung wie im Drucksatz,<br />

etwa ein dreispaltiges<br />

Layout, kommt in Mode<br />

und bringt mehr Ruhe ins<br />

Web-Design.<br />

k Inhalt<br />

Nachdem im Design alles<br />

möglich ist, wird die Verwaltung<br />

der Inhalte über<br />

Content-Management-<br />

Systeme immer wichtiger.<br />

k Unabhängigkeit<br />

XML wird als Medium für<br />

die Verzahnung mit anderen<br />

Medien und Daten<br />

verwendet.<br />

JAVA, DIE .NET-KONKURRENZ<br />

Warum nicht alle Welt Java spricht<br />

Suns Ansatz bei der Sprache Java<br />

ähnelt in großen Zügen dem, was<br />

Microsoft mit .Net verfolgt. Ziel ist<br />

die Realisierung Plattform-unabhängiger<br />

Programme. Wie .Net<br />

enthält auch Java eine mächtige<br />

Funktionsbibliothek und glänzt<br />

mit einem sauberen Programmierkonzept,<br />

das viele Programmierfehler<br />

erst gar nicht aufkommen<br />

lässt. Auch die Netzwerkkommunikation<br />

über Internet-<br />

Techniken war schon in der ersten<br />

Ausgabe von Java ein fester Bestandteil<br />

des Systems.<br />

Dass Java angesichts dieser<br />

guten Anlagen nicht viel stärker<br />

Fuß fassen konnte, dürfte an<br />

den kargen Möglichkeiten bei der<br />

Programmierung optisch ansprechender<br />

Anwendungen liegen.<br />

Denn mit den ersten Versionen<br />

von Java war dies noch recht umständlich<br />

zu erledigen. Das Ergebnis<br />

konnte nicht mit den reinrassigen<br />

Windows- oder Mac-Programmen<br />

mithalten und war auch<br />

noch spürbar langsamer als sie.<br />

Mit dem Erscheinen der Swing-<br />

Bibliotheken für Java wurde das<br />

Aussehen besser und wurden die<br />

Programme schneller. Aber viele<br />

Entwickler hatten sich bereits von<br />

Java abgewandt.<br />

Für Web-Entwickler hatte Java<br />

zudem lange nichts zu bieten – mit<br />

Ausnahme der Java-Applets, die<br />

man bei Sun wohl für eine ausreichende<br />

Anstrengung in Sachen<br />

Web hielt. Die Skriptsprache JSP<br />

hielt erst sehr spät Einzug in die<br />

Java-Welt.<br />

sprachen wie ASP oder PHP üblich – <strong>HTML</strong>-Code als Ausgabe<br />

produzieren. Stattdessen setzen Sie Bedienelemente ein, die sich<br />

durch Eigenschaften und Methoden steuern und abfragen<br />

lassen. Die Skriptsprache ist eine der von Microsoft unterstützten<br />

.Net-Sprachen, etwa Visual Basic .Net oder C#.<br />

Sie könnten mit dieser Methode theoretisch auch ohne<br />

<strong>HTML</strong>-Kenntnisse auskommen. Stattdessen programmieren<br />

Sie eine grafische Oberfläche – ähnlich wie beim Schreiben<br />

von Windows-Programmen mit Visual Basic. Es gibt also<br />

zum Beispiel auch Ereignisse wie der Mausklick auf einen<br />

Button, auf die man in einer entsprechenden Routine reagieren<br />

kann. Der angenehme Nebeneffekt dabei: Ohne viel Mehrarbeit<br />

sind Ihre Anwendungen dann auch ohne Internet lauffähig,<br />

können also in kompilierter Form auf jedem .Net-fähigen<br />

Computer laufen.<br />

.Net übernimmt die Umsetzung nach <strong>HTML</strong><br />

Für Web-Anwendungen bleibt allerdings die Umsetzung dieser<br />

abstrakten Sicht nach <strong>HTML</strong> immer noch notwendig, denn der<br />

Browser soll ja unverändert weiterfunktionieren. Diese Umsetzung<br />

erledigt die Zwischenschicht von .Net für Sie, die auf dem<br />

Webserver wirkt. Die kümmert sich auch darum, auf die verschiedenen<br />

Browser-Versionen Rücksicht zu nehmen und deren<br />

Möglichkeiten möglichst gut einzusetzen. Dabei wird eine Seite<br />

auf einem Browser-Oldie sicherlich anders aussehen als auf dem<br />

aktuellen Internet-Explorer, die Grundfunktion der Seite wird<br />

aber identisch sein.<br />

Ein Beispiel: Wenn Sie in einem Eingabeformular festlegen,<br />

dass ein bestimmtes Feld nur einen bestimmten Wertebereich<br />

annehmen darf, kann ein moderner Browser die Einhaltung<br />

dieser Grenzwerte in JavaScript vornehmen. .Net wird die entsprechende<br />

Routine also an den Browser senden, und im Fehler- k<br />

CHIP | PROFESSIONELL<br />

7


8<br />

AKTUELL k Zukunft des Web-Design | PLANEN | AUFBAU | SPECIAL | OPTIMIEREN |<br />

fall erfolgt die Anzeige einer entsprechenden Meldung ohne<br />

Seitenaufbau durch die JavaScript-Funktionalität.<br />

Ein Browser ohne JavaScript wird das Formular nicht zurückhalten<br />

können und es auch mit einem fehlerhaften Wert an<br />

den Server senden (lesen Sie dazu den Beitrag ab s77). Der aber<br />

kümmert sich dann um die Einhaltung des Wertebereichs und<br />

produziert eine identische Fehlermeldung wie im ersten Fall,<br />

nur eben nach einen Neuaufbau der Seite.<br />

Eine entsprechende Logik ist auch mit PHP (ab s82) oder<br />

einer anderen Skriptsprache möglich und wird auch vielfach<br />

eingesetzt. Nur müssen Sie sich selbst darum kümmern, dass die<br />

Validierungen in dieser variablen Form passieren. Bei .Net dagegen<br />

teilen Sie nur mit, dass die Überprüfung stattfinden soll,<br />

und das System kümmert sich um die Umsetzung der Vorschrift.<br />

Die einzige große Einschränkung: Das .Net-Konzept ist in<br />

puncto optimale grafische Gestaltbarkeit noch verbesserungsbedürftig,<br />

denn das Hauptaugenmerk wurde viel mehr auf die<br />

interaktiven Eingabeelemente gelegt. Doch bei einer weiteren<br />

Verbreitung von .Net wird von selbst der Wunsch nach mehr<br />

Grafikmöglichkeiten aufkommen, und Microsoft muss reagieren.<br />

Dies ist im übrigen ein Feld, auf dem sich Neuentwicklungen<br />

in Browser-Fähigkeiten am ehesten anbieten würden.<br />

Würde zum Beispiel ein Teil der mit Macromedias Flash<br />

möglichen Fähigkeiten für interaktive und animierte Grafiken<br />

direkt in den Browser hineinwandern, könnte .Net sein<br />

Potential deutlich steigern.<br />

Den völligen Verzicht auf <strong>HTML</strong> muss so ein System nicht<br />

bedeuten. Bei .Net etwa können Sie trotz der Arbeit mit dem<br />

abstrakten Modell immer noch selbst <strong>HTML</strong>-Code beisteuern.<br />

Für spezielle Anforderungen ist die Erzeugung individueller<br />

Bedienelemente (Controls) vorgesehen. Doch die Grundrichtung<br />

dieser Idee ist tatsächlich die Abkoppelung von den<br />

bisherigen Webstandards.<br />

„Mono“ portiert .Net auf Linux und Mac<br />

So umfassend und durchdacht der Ansatz von Microsoft bei den<br />

.Net-Sprachen auch ist – viele Entwickler haben sicherlich ein<br />

schlechtes Gefühl dabei, sich durch die volle Konzentration<br />

auf diese verführerische neue Welt völlig von einem Hersteller<br />

abhängig zu machen.<br />

Doch es sieht nur auf den ersten Blick so aus, als wäre .Net<br />

zwangsläufig mit einem faustischen Pakt für Web-Designer<br />

verbunden. Denn pfiffige OpenSource-Entwickler, unterstützt<br />

durch den Software-Hersteller Ximian, haben ein Projekt namens<br />

„Mono“ initiiert, das die Monokultur verhindern soll. Ein<br />

Großteil der .Net-Welt wurde auf andere Betriebssystem-Plattformen<br />

portiert, beispielsweise auf Linux oder den Macintosh.<br />

So läuft etwa ein von Microsoft als Beispielanwendung für .Net<br />

entwickelter Webshop ohne Änderungen am Code problemlos<br />

auf diesen Betriebssystemen.<br />

Der Vorteil für die Entwickler: Die Beschäftigung mit der<br />

schönen neuen .Net-Welt engt das zukünftige Beschäftigungsfeld<br />

nicht automatisch auf Betriebssysteme aus Redmond ein.<br />

Informationen über das Projekt „Mono“ gibt es auf der Website<br />

http://www.go-mono.org. Neben den zu kompilierenden Quellcode-Archiven<br />

gibt es dort auch fertige Pakete in Binärform zum<br />

Download, die man nur noch installieren muss.<br />

CHIP | PROFESSIONELL<br />

WIE .NET INTERAKTIONEN VERÄNDERT<br />

Die neue Einfachheit<br />

So war es bisher: Newsletter-Anmeldung mit PHP & Co.<br />

So geht es in Zukunft: Newsletter-Anmeldung mit .Net<br />

Sub Formular_Click()<br />

If Email.text.length < 7 Then<br />

Meldung.text = “E-Mail falsch”<br />

Else<br />

Meldung.text = “Danke für Ihre E-Mail”<br />

‘ Weiterverarbeitung...<br />

End If<br />

End Sub<br />

Mit herkömmlichen Skriptsprachen<br />

für Web-Anwendungen<br />

ist die Behandlung<br />

von Benutzereingaben in Formularen<br />

in der Regel eine<br />

aufwendige Sache.<br />

Denn der Programmierer<br />

muss sich selbst um die korrekte<br />

Darstellung des Formulars<br />

in den verschiedenen<br />

Die Zukunft basiert auf .Net<br />

möglichen Zuständen „Leer“,<br />

„abgeschickt“ und „teilausgefüllt<br />

mit Fehlermeldung“<br />

kümmern.<br />

Mit .Net dagegen wird die<br />

Formular-Mechanik vom System<br />

selbst erledigt, so dass<br />

man sich im Programm auf<br />

das Wesentliche konzentrieren<br />

kann.<br />

Die Folge für Sie als Entwickler: Sie sollten sich unbedingt mit<br />

.Net aus Programmierersicht beschäftigen. Es ist kostenlos<br />

downloadbar – oder Sie haben es vielleicht schon. Denn .Net<br />

steckt als fester Bestandteil in allen neuen Betriebssystemen<br />

von Microsoft.<br />

Vielleicht werden Sie ja niemals wirklich eine ernsthafte<br />

Web-Anwendung in einer .Net-Sprache schreiben müssen.<br />

Doch das Grundkonzept wird auf jeden Fall in allen kommenden<br />

Web-Techniken mehr oder weniger stark ausgeprägt<br />

enthalten sein. Be prepared! Markus Schraudolph


Thomas Baumgärtner<br />

Sprecher Microsoft Deutschland<br />

Interview<br />

Was werden die großen Umwälzungen im nächsten<br />

Internet Explorer sein? Worauf müssen sich Entwickler einstellen,<br />

um auch in drei Jahren gut gerüstet für den wichtigsten<br />

Internet-Browser zu sein?<br />

Baumgärtner: Endgültige Aussagen zu einem zukünftigen<br />

Browser in Longhorn zu machen ist noch verfrüht. Sicherlich<br />

wird es bis dahin keine neuen Stand-alone-Versionen geben,<br />

da die Integration ins Betriebssystem bekanntlich sehr hoch ist.<br />

Auf der anderen Seite befindet sich Microsoft bei vielen Komponenten<br />

noch in der Planungs- oder Designphase, was künftige<br />

Produkte wie Longhorn angeht.<br />

Klingt abgeschottet: Wie können sich die Entwickler<br />

frühzeitig über die künftigen Features informieren?<br />

Baumgärtner: Professionelle Entwickler binden wir natürlich<br />

sehr früh in unsere Überlegungen mit ein, so wie das etwa auf<br />

der PDC 2003, der WinHEC 2004 oder der TechEd 2004 in Amsterdam<br />

geschah. Hier geht es aber mehr darum, in den Entwicklerforen<br />

möglichst zeitnah eine Diskussion über neue Lösungstheorien<br />

zu führen. Denn schließlich wollen wir ja wissen,<br />

wo für unsere wichtigsten Partner – und das sind nun einmal die<br />

Software-Entwickler – der höchste Innovationsbedarf liegt.<br />

Wird es bei Browsern in absehbarer Zukunft eine<br />

Technik geben, die <strong>HTML</strong> ablöst?<br />

Baumgärtner: Also, um die Ablösung von <strong>HTML</strong> geht es uns<br />

nicht. Wir machen uns Gedanken, wie wir bestehende Limits<br />

für die Entwickler-Community mit offenen Standards abbauen<br />

können, ohne auf Sicherheit und Performance verzichten zu<br />

müssen. Darüber führen wir einen intensiven Dialog mit der<br />

Entwicklergemeinde<br />

.Net wird auch die Programmierung fürs Web stark<br />

verändern. Gibt es Bestrebungen, .Net auch auf anderen<br />

Plattformen zu etablieren?<br />

Baumgärtner: Wir begrüßen natürlich die geplante Portierung<br />

unserer Architektur auf andere Plattformen. Zum einen zeigt<br />

dies deutlich, dass selbst Mitbewerber unsere Technologie so<br />

hoch schätzen, dass sie auf anderen Plattformen eingeführt<br />

werden soll. Zum anderen belegt dies die Offenheit unseres<br />

Technologie-Ansatzes.<br />

Es geht nicht um die<br />

Ablösung von <strong>HTML</strong><br />

Die kommende Version des Internet Explorers wird die Standards für<br />

Web-Designer verändern. Microsoft-Sprecher Thomas Baumgärtner über<br />

neue Features und altes <strong>HTML</strong>, Plattform-unabhängiges Programmieren<br />

und systembedingte Sicherheitslöcher.<br />

Das OpenSource-Projekt „Mono“ bemüht sich darum,<br />

.Net-Werkzeuge zu schaffen, die auch unter Linux, Mac und<br />

Unix laufen. Wie sehen Sie diese Entwicklung?<br />

Baumgärtner: Das Mono-Entwicklerteam erfährt dieselbe Unterstützung,<br />

die wir auch anderen kommerziellen Entwicklern<br />

zuteil werden lassen. Microsoft selbst konzentriert sich darauf,<br />

für die Windows-Plattform den bestmöglichen Support zu<br />

bieten. Das tun wir nicht nur mit einer ausgefeilten Entwicklungsplattform,<br />

sondern auch mit einer großen Zahl von Werkzeugen<br />

wie den Services for Unix, um unsere Technologie mit<br />

offenen Standards auch in komplexe, heterogene Landschaften<br />

integrieren zu können.<br />

Microsoft verwendet viel Energie darauf, Sicherheitslöcher<br />

abzudichten. Bremst das nicht die Entwicklung<br />

neuer Features für das Web?<br />

Baumgärtner: Im Gegenteil – nur dann, wenn wir es schaffen,<br />

dass die Systeme sicher sind, kann sich auch etwas Neues im<br />

Web entwickeln. Derzeit haben wir die paradoxe Situation, dass<br />

es viele unbegründete Ängste gibt, gleichzeitig aber viele Administratoren<br />

ihre Systeme nicht auf dem neuesten Sicherheitsstand<br />

halten. Nicht zuletzt der Test in der CHIP hat doch gezeigt,<br />

dass Microsofts Systeme mindestens genauso sicher sind, sobald<br />

alle Patches aufgespielt sind.<br />

Das führt zu einem neuen Dilemma. Wer sein System<br />

sicherhalten will, muss Nutzerrechte einschränken. Wie will<br />

Microsoft das lösen?<br />

Baumgärtner: Das Problem ist ja zum größten Teil schon gelöst.<br />

Mit dem Service Pack 2 für Windows XP wird der Anwender<br />

oder Administrator ein einfach zu verwaltendes Sicherheitskonzept<br />

erhalten. Das Security Center ist sehr einfach zu bedienen,<br />

und wem als Privatnutzer die Verwaltung des Active<br />

Directory zu umfangreich erscheint, kann sich im Internet<br />

schon heute mit einem Kontext mit Benutzer- oder gar eingeschränkten<br />

Benutzerrechten anmelden. Das schmälert die<br />

Freude kaum, bringt aber ein höheres Maß an Sicherheit. So<br />

wünschen wir uns, dass die technischen Verbesserungen eingesetzt<br />

und benutzt werden. Nur wenn die gesamte Industrie das<br />

Thema Sicherheit in den Griff bekommt, kann ein neuer Internet-Boom<br />

einsetzen. Mit Thomas Baumgärtner sprach Thomas H.Kaspar<br />

CHIP | PROFESSIONELL<br />

9


10<br />

AKTUELL | PLANEN k Design-Regeln | AUFBAU | SPECIAL | OPTIMIEREN |<br />

PLANEN | INHALT<br />

Die Regeln des Web-Design s10<br />

Nicht Hunderte von Features sind wichtig für die<br />

User, sondern klare Strukturen und gute Inhalte.<br />

Teure Fehler vermeiden s24<br />

Informieren Sie sich rechtzeitig über die rechtlichen<br />

Aspekte Ihres Online-Auftritts! Das spart viel Ärger.<br />

Für Allrounder und Puristen s28<br />

Wer braucht welchen Editor? CHIP hat die aktuellen<br />

Web-Editoren auf ihre Leistungsfähigkeit überprüft.<br />

Web-Baukasten für Profis s32<br />

Zur Pflege einer größeren Webseite empfehlen sich<br />

Content-Management-Systeme. 18 CMS im Überblick.<br />

Die Webseite online stellen s36<br />

Um Ihre Daten ins Netz zu bringen, brauchen Sie<br />

einen guten SDSL-Zugang. CHIP stellt die besten vor.<br />

Ein Platz für Ihre Webseite s40<br />

Die besten Webhosting-Pakete der wichtigsten<br />

Provider hat CHIP für Sie zusammengestellt.<br />

AUTOR andreas.holzinger@uni-graz.at<br />

Prof. Dr. Andreas Holzinger, Ing.MMag.<br />

arbeitet, lehrt und forscht derzeit an der Universität<br />

Graz im Fach Informationsverarbeitung.<br />

1963 geboren, hat er seine Karriere in der<br />

IT/Informatik 1978 als Auszubildender begonnen.<br />

Praktisch mit der Hardware aufgewachsen,<br />

hat er sich dem „New Computing“<br />

nach Ben Shneiderman verpflichtet: „The Old<br />

Computing is about what computers can do –<br />

the New Computing is about what people can do.“ Mittlerweile ist er<br />

promoviert und habilitiert und hat bis jetzt zahlreiche Zeitschriftenartikel<br />

und 13 Bücher verfasst. Er ist Autor der Vogel Fachbuchreihe<br />

„Basiswissen Multimedia“ und „Basiswissen IT/Informatik“. Andreas<br />

Holzinger ist darüber hinaus Konsulent und Sachverständiger der<br />

Industrie, Experte der Europäischen Union, Berater von Ministerien<br />

und Mitglied in zahlreichen renommierten Gesellschaften.<br />

k Editoren Auf der Heft-DVD finden Sie aktuelle Trial-<br />

Versionen der wichtigsten Web-Editoren Macromedia<br />

Dreamweaver MX 2004 und Adobe GoLive CS.<br />

k Navigation Ein sauber strukturiertes Navigationsmenü<br />

auf Java-Basis erzeugen Sie mit der Vollversion<br />

eNavigator Suite 6.0 (unter Vollversionen).<br />

k Rechts-Infos In der Rubrik Webmaster-Tools finden<br />

Sie eine Checkliste zum Thema Website-Impressum<br />

und Muster für Widerrufs- und Rückgabe-Belehrung.<br />

CHIP | PROFESSIONELL<br />

k DVD-CODE Demo-Versionen<br />

Die Macht des Einfachen<br />

überzeugt die User. Wer<br />

glaubt, mit zahllosen<br />

Features und technischen<br />

Gimmicks seine Webseite<br />

erfolgreich machen zu<br />

können, irrt sich gewaltig.<br />

Edles, aber schlichtes<br />

Design und einfaches<br />

Handling zeichnen eine<br />

gute Web-Präsenz aus.<br />

Grundregeln des Web-Designs<br />

Schön + einfach<br />

k<br />

Eine Webseite soll schön aussehen, schnell laden, übersichtlich<br />

sein, informativ sein und eventuell Möglichkeiten<br />

einer sicheren Transaktion für eBusiness bieten.Vor allem<br />

aber soll sie so einfach wie möglich zu bedienen sein. Viele<br />

Designer betrachten diese Kriterien getrennt voneinander, die<br />

Endbenutzer nehmen diese Kriterien aber stets als eine Einheit<br />

wahr. Der Erfolg einer Webseite startet also immer im Kopf der<br />

Planer: Trennen Sie dort die eigenen Gewohnheiten von den<br />

Bedürfnissen der Endbenutzer.<br />

Endbenutzer wollen Mehrwerte, nicht Features<br />

Eine Frage steht am Beginn der Planung jeder Webseite: Wer<br />

sind die Endbenutzer und was sollen diese mit der Webseite tun?<br />

Die Antwort entscheidet über den Erfolg aller weiteren Schritte.<br />

Keine Webseite kann „alle“ ansprechen. Je genauer die Zielgruppe<br />

bekannt ist, desto erfolgreicher kann eine Webseite gestaltet<br />

werden. So früh wie möglich sollten daher Prototypen<br />

(etwa auf Papier) mit Repräsentanten der Zielgruppe besprochen,<br />

getestet und bereits in der Planung verändert werden.


+ schlicht = erfolgreich<br />

In einer Webseite sollen sowohl funktionale als auch ästhetische<br />

Elemente zusammenwirken.<br />

Orientierungselemente (Übersichten, Gliederungen, Aufzählungszeichen,<br />

Hervorhebungen, Farbbereiche) dienen dazu, sich<br />

in der Webseite zurechtzufinden (mehr dazu s12).<br />

Regel: Die Benutzer müssen zu jeder Zeit genau erkennen, wo sie<br />

sich befinden und aus welchen Bereichen die Webseite besteht.<br />

Navigationselemente (Buttons, Links) helfen den Benutzern, sich<br />

auf der Webseite zu bewegen und gezielt bestimmte Bereiche anzuspringen,<br />

etwa über eine Navigationsleiste (Tipps ab s13).<br />

Regel: Die Navigation muss für die Benutzer logisch, übersichtlich,<br />

rasch und konsistent immer gleichartig erfolgen.<br />

Inhaltselemente (Texte, Bilder, Töne, Animationen, Videos) sind<br />

die Informationen, die an die Benutzer vermittelt werden sollen.<br />

Für den Content gelten die Grundregeln der menschlichen<br />

Informationsverarbeitung (Ratgeber ab s14).<br />

Regel: Alle Inhaltselemente müssen für das Web aufbereitet<br />

werden. Text muss kurz und prägnant sein. Anweisungen müssen<br />

eindeutig und unmissverständlich sein.<br />

11<br />

PLANEN<br />

Interaktionselemente (Auswahlmenüs, Slider, Buttons) ermöglichen<br />

den Endbenutzern gewisse Aktionen zu erledigen, etwa<br />

ein Buch in den Einkaufskorb zu legen (lesen Sie dazu s16).<br />

Regel: Sämtliche Interaktionselemente müssen den intuitiven<br />

Erwartungen der Endbenutzer entsprechen.<br />

Motivationselemente (geeignete Bilder, Animationen oder auch<br />

Probeseiten eines Buches) steigern die Akzeptanz und unterstützen<br />

die Inhalte der Seite so, dass die Endbenutzer die<br />

Webseite gerne nutzen.<br />

Regel: Es sollen Motivationselemente verwendet werden, die<br />

Neugier, Akzeptanz usw. steigern. Aber Achtung: Elemente, die<br />

motivieren, können auch das Gegenteil bewirken, diese sind<br />

stark zielgruppenabhängig (Anleitung auf s17).<br />

Konsistenz heißt, Gleiches immer gleich zu behandeln bzw.<br />

Unterschiede in der Darstellung nur dann einzuführen, wenn<br />

ihnen eine neue oder zusätzliche Bedeutung zukommt. Alle<br />

Abkürzungen und beschreibenden Symbole müssen innerhalb<br />

des Gesamtsystems Konsistenz aufweisen.<br />

Regel: Was immer du machst – mach es konsistent! k<br />

CHIP | PROFESSIONELL


12<br />

AKTUELL | PLANEN k Design-Regeln | AUFBAU | SPECIAL | OPTIMIEREN |<br />

So finden sich User zurecht<br />

Wo bin ich? Wohin gehe ich?<br />

Eine Webseite ist eine Hypermedia-Struktur und lässt sich nur dann effektiv nutzen, wenn die Benutzer eine klare<br />

Orientierung vorfinden und eine einfache Navigation durch die Information ermöglicht wird. Bei der Planung einer<br />

Webseite ist es daher unbedingt erforderlich, sich in die Lage der Endbenutzer zu versetzen.<br />

k<br />

Im Gegensatz zu einem Buch stellt das Web eine nichtlineare<br />

Netzstruktur dar. Orientierungslosigkeit in<br />

solchen Räumen schafft Unsicherheit. Wie bei der Navigation<br />

auf einem Schiff müssen zu jeder Zeit vier Fragen beantwortet<br />

werden: Wo bin ich? Wo komme ich her? Wo kann ich hin? Wie<br />

komme ich an den Ausgangspunkt zurück? Schon die Namen<br />

der Browser „Explorer“ und „Navigator“ deuten darauf hin, was<br />

diese Schnittstellen zwischen Benutzer und Web leisten müssen.<br />

Die wichtigsten Browser-eigenen Navigationsmittel sind Backbutton,<br />

Historyliste und Bookmarks.<br />

So gliedern Sie komplexe Seiten optimal<br />

Für Webseiten gibt es folgende Möglichkeiten der Navigation:<br />

Brotkrümelleisten („breadcrumbs“) sind einfach zu erstellen<br />

(etwa Universität > Institute > Personen) und erlauben ein<br />

rasches Nachverfolgen des Weges innerhalb einer Hierarchie.<br />

Die jeweils vorhergehenden Seiten sind als Links erreichbar und<br />

ÜBERSICHTLICH<br />

gestaltet ist die<br />

Navigation durch<br />

Karteireiter, sie ist<br />

bei Benutzern sehr<br />

bekannt und beliebt.<br />

NERVIG<br />

ist die Bewegung,<br />

diese wird hier<br />

bewusst eingesetzt,<br />

um Aufmerksamkeit<br />

für Werbung<br />

zu erregen.<br />

VERMEIDEN<br />

sollte man<br />

Scrollen nach<br />

Möglichkeit<br />

(zumindest auf der<br />

Einstiegsseite).<br />

CHIP | PROFESSIONELL<br />

ermöglichen den Sprung in die übergeordnete Hierarchie. Die<br />

Anzeige erfolgt platzsparend innerhalb einer Zeile. Weiterer<br />

Vorteil: Die zugrundeliegenden Struktur vermittelt sich dem<br />

Endbenutzer sehr schnell. Da eine Visualisierung benachbarter<br />

Hierarchien nicht erfolgt, ist immer ein Umweg über die übergeordneten<br />

Seiten notwendig. Dieses Manko lässt sich aber durch<br />

Kombination mit anderen Konzepten beheben.<br />

Eindimensionale Navigationsleisten können sowohl in horizontaler<br />

als auch in vertikaler Anordnung verwendet werden. Beschränkt<br />

man sich auf wenige Kategorien und hält so die Hierarchie<br />

flach, ist diese Art der Navigation sehr übersichtlich. Oft<br />

geht aber rasch die Übersicht verloren, und der eigentliche Vorteil,<br />

alle Menüpunkte auf einen Blick sehen zu können, ist weg.<br />

Zweidimensionale Navigationsleisten eignen sich gut zur Anzeige<br />

größerer Informationsmengen. Der Blick auf die übergeordneten<br />

Kategorien bleibt erhalten, während gleichzeitig die<br />

Unterpunkte der aktuellen Kategorie in der zweiten Hierarchie<br />

IM DETAIL: YAHOO!<br />

Bekannte Web-Konzepte sind für Benutzer leichter bedienbar<br />

Yahoo! macht es vor: Auch wenn<br />

alte Konzepte nicht optimal sind,<br />

weil es schon bessere Lösungen<br />

gibt – alles, was zigtausende<br />

Benutzer bereits kennen, wird als<br />

benutzerfreundlich empfunden.<br />

Das macht das Prinzip der Einfachheit<br />

aus und heißt im Klartext,<br />

dass auf einer Webseite nicht<br />

mehr in Text und Bild präsentiert<br />

werden sollte, als das, was die<br />

Benutzer erwarten.<br />

HILFREICH<br />

gelöst ist die Farbgebung,<br />

sie wirkt<br />

unterstützend und<br />

unaufdringlich, der<br />

weiße Hintergrund<br />

wirkt angenehm.<br />

ÜBERSICHTLICH<br />

ist die tiefergehende<br />

Navigation durch<br />

Brotkrümelleisten;<br />

große Mengen an<br />

Information werden<br />

so gut strukturiert.<br />

SCHLECHT<br />

ist jede Art von aufreibenden<br />

Pop-ups –<br />

Pop-up Blocker neutralisieren<br />

den Effekt<br />

inzwischen ohnehin.


Die besten Navigations-Tipps im Web<br />

Barrierefreiheit im Web k www.webforall-heidelberg.de<br />

Gleichzeitig ein gutes Beispiel für eine einfache, gute Webseite<br />

Aktionsbündnis Barrierefreie IT k www.abi-projekt.de<br />

Ein gutes Beispiel für die Macht des Einfachen<br />

Suns New Web Design k www.sun.com/980113/sunonnet/<br />

Die legendären Seiten von Sun Microsystems<br />

Bad Design k www.webpagesthatsuck.com<br />

Berühmte Negativbeispiele von Vincent Flanders<br />

angezeigt werden. Die Anordnung erfolgt dabei meist vertikal<br />

und horizontal. Eine oft verwendete Metapher sind Karteireiter.<br />

Wichtig ist eine deutliche Kennzeichnung des Zusammenhangs<br />

der beiden Navigationsleisten. So gibt die Navigationsleiste<br />

gleichzeitig Auskunft über die Struktur. Durch eine kombinierte<br />

Anzeige ist ähnliche Funktionalität auch durch eine<br />

einzelne vertikale Leiste zu erreichen. Die entsprechenden<br />

Unterpunkte werden eingerückt oder von der übergeordneten<br />

Hierarchie abgesetzt.<br />

So behalten User die Übersicht<br />

Flyout-Menüs Bei dieser Variante werden die jeweiligen Unterpunkte<br />

beim Berühren der betreffenden Kategorie mit der Maus<br />

sichtbar (sogenannte MouseOver-Effekte). Die Analogie zu<br />

Menüs, die aus Anwendungen und Betriebssystemen bekannt<br />

sind, ist offensichtlich. Hier fehlt allerdings hier in der Regel die<br />

Möglichkeit, die Unterpunkte dauerhaft im Blick zu behalten,<br />

was die Orientierung erschwert. Zudem sind diese Menüs erst<br />

beim Berühren mit der Maus als solche erkennbar.<br />

Auf einen Blick sollte man zumindest die Information der<br />

Einstiegsseite erhalten: Beim Scrollen verliert der Endbenutzer<br />

schnell die Übersicht. Manchmal wird durch erhöhten Platzbedarf<br />

Scrollen notwendig, was aber möglichst vermieden<br />

werden sollte.<br />

Natürlich wird auch außerhalb von Navigationsleisten<br />

navigiert. Verbreitet sind eingebettete Links. Hier sollten den<br />

Benutzern zusätzliche Informationen etwa mit Link-Titles<br />

eingeblendet werden, um Navigationsent-<br />

scheidungen zu erleichtern. Auch die Angabe<br />

von Dateityp und -größe erleichtert<br />

die Navigation. Wichtig ist auch, ob der<br />

Link mit der bestehenden Internet-<br />

Verbindung angeklickt werden soll. Eine<br />

sehr relevante und gerade nicht triviale<br />

Information ist die Markierung bereits angeklickter<br />

Links.<br />

Infos in kleinen Happen<br />

Bei der Darstellung großer Informationsmengen<br />

– etwa langer Listen – werden<br />

die Benutzer schnell überfordert. Um die<br />

kognitive Informationsverarbeitung zu<br />

unterstützen, sollten die Informationen zu<br />

sinnvollen Gruppen zusammengefasst (geclustert)<br />

werden. Dieser Vorgang wird<br />

„chunking“ genannt (s. „Im Detail“ s14).<br />

Die Anordnung von Elementen erfolgt am besten nach bekannten<br />

Regeln aus der Gestaltpsychologie, den sogenannten Gestaltgesetzen<br />

(siehe s15).<br />

Site-Maps helfen wie Landkarten<br />

Site-Maps visualisieren die Struktur einer Webseite in Form<br />

einer Übersichtsgrafik oder einer strukturierten Linkliste. Site-<br />

Maps ermöglichen neben einer Orientierung auch eine effektive<br />

Navigation. Allerdings lassen sich komplexe Webseiten kaum in<br />

einer Übersichtskarte zusammenfassen. Hier bietet sich das<br />

strukturierte Informations-Clustering in Kategorien und verschiedenen<br />

Hierarchien an. Yahoo! hat dieses Prinzip vorbildlich<br />

gelöst. Als sehr angenehm empfinden Benutzer das Vorhandensein<br />

eines Indexes (Stichwortverzeichnis) und einer<br />

Suchfunktion, um sich auf der Seite zurechtzufinden.<br />

Tipps für die richtige Gliederung der Seite<br />

Jede Webseite sollte so flach wie möglich und so tief wie nötig<br />

gegliedert werden. Wichtig ist klares Unterscheiden und Abgrenzen<br />

in drei Bereiche: Orientierungselemente (Seitenüberschrift,<br />

Pfadangaben etc.), Navigationselemente (Buttons,<br />

Links) und Inhaltselemente (s. s14).<br />

Die Größe, die Position und das Layout dieser Bereiche<br />

sollten konsistent auf allen Seiten beibehalten werden. Dabei<br />

sollte stets bedacht werden, dass die Aufmerksamkeit in unserem<br />

westlichen Kulturkreis für Elemente in der linken oberen Bildschirmecke<br />

am größten ist.<br />

Sehr wichtig ist die Link-Pflege. Broken Links verärgern die<br />

Benutzer. Wählen Sie daher bereits im Vorfeld nur Links aus, von<br />

denen anzunehmen ist, dass diese auch längere Zeit Bestand<br />

haben, etwa Links zu Universitäten.<br />

Barrierefreie Webseiten<br />

Unter „barrierefrei“ verstehen viele eine „behindertengerechte“<br />

Gestaltung; allerdings profitieren von einer solchen „einfachen“<br />

Webseite alle Benutzer (siehe Web-Tipp oben), denn etliche<br />

Kritierien für Barrierefreiheit sind zugleich die grundlegenden<br />

Kriterien für Benutzerfreundlichkeit!<br />

Um eine Webseite für Blinde und<br />

CHECKLISTE<br />

Können Endbenutzer stets<br />

erkennen, wo in der Webseite<br />

sie sich befinden?<br />

Können die Endbenutzer<br />

stets zur Startseite zurückkehren?<br />

Ziehen sich alle Navigationselemente<br />

konsistent<br />

durch die Webseite?<br />

Erkennen die Endbenuzter<br />

bereits zu Beginn Ziel und<br />

Zweck Ihrer Webseite?<br />

Sind alle Icons für die<br />

End-Benutzer intuitiv auf<br />

Anhieb verständlich?<br />

Gehörlose, aber auch für Suchmaschinen<br />

und Personen mit reinen Text-Browsern<br />

erfassbar zu machen, sollte für alle Nicht-<br />

Text-Elemente wie Bilder, Animationen,<br />

Videos, Java-Applets, aber auch für Tabellen<br />

ein äquivalenter und qualitativ<br />

hochwertiger Text vorhanden sein.<br />

Benutzer mit motorischer Einschränkung,<br />

aber auch ältere Benutzer sind<br />

dankbar, wenn die Links nicht dicht beieinander<br />

liegen, sondern genügend Abstand<br />

dazwischen ist. Anklickbare Bereiche<br />

sollten so großflächig sein, dass man sie<br />

leicht treffen kann. Insbesondere für<br />

Menschen mit Konzentrationsschwierigkeiten<br />

ist aufdringliche Bewegung im Web<br />

erst recht hinderlich – für Epileptiker kann<br />

das sogar gefährlich sein.<br />

k<br />

CHIP | PROFESSIONELL<br />

13


14<br />

AKTUELL | PLANEN k Design-Regeln | AUFBAU | SPECIAL | OPTIMIEREN |<br />

So kommt Inhalt zur Geltung<br />

Weniger ist immer mehr<br />

Das Wichtigste in einer Webseite sind deren Inhalte. Dabei sind Text und Bild immer noch die dominierenden<br />

Inhaltsträger. Diese müssen aber Web-gerecht aufbereitet werden. Ein Lesen am Bildschirm erfolgt nicht nur<br />

wesentlich langsamer, sondern auch anders: Die Endbenutzer scannen sich durch die Webseite.<br />

k<br />

Schreiben für das Web ist wesentlich schwieriger als für<br />

den Druck. Die Texte müssen zielgruppengerecht sein<br />

und für Bildschirme aufbereitet werden. Die Lesbarkeit wird<br />

optimiert, wenn die Sätze kurz sind. Jeder Satz sollte nur einen<br />

inhaltlichen Schwerpunkt haben. Bewährt hat sich der „inverted<br />

pyramide style“: Überschrift, Zusammenfassung, Details.<br />

Einfach = knapp, klar, prägnant & verständlich<br />

Das Maß der Typographie ist die Lesbarkeit. Zusammenfassung,<br />

Strukturierung durch Gruppierung und Auszeichnung mit<br />

Aufzählungszeichen verbessern die Leseleistung.<br />

Schriften mit Serifen (kleinen Strichen an den Buchstaben)<br />

wie die in diesem Heft verwendete Schrift Minion) verbessern<br />

das Leseverhalten auf Papier. Für Text am Bildschirm sollte serifenlose<br />

Schrift wie Arial, Tahoma, Verdana verwendet werden.<br />

Großen Einfluss auf das Lesen haben Zeilenlänge und Zeilenabstand.<br />

Rund acht Wörter pro Zeile haben sich bewährt. Der<br />

ABLENKUNG<br />

Bewegung bindet die<br />

Aufmerksamkeit,<br />

noch dazu links oben.<br />

Auf solche Animation<br />

soll verzichtet werden.<br />

ZUVIEL INFORMATION<br />

Die Magical Number 7<br />

überschreitet dieser<br />

Text deutlich – die<br />

Benutzer sind rasch<br />

überfordert, das<br />

zieht sich bei dieser<br />

Webseite durch .<br />

VERSCHENKT<br />

Hier würde niemand<br />

den Home-Button<br />

vermuten, zum Glück<br />

ist nervige Animation<br />

oben ein Home-Link.<br />

CHIP | PROFESSIONELL<br />

Zeilenabstand sollte doppelt so groß sein wie beim Druck, auch<br />

sollte mehr Raum zwischen den Absätzen eingesetzt werden.<br />

Flattersatz linksbündig ist im Web besser lesbar als Blocksatz.<br />

Im westlichen Kulturkreis laufen die Blickbewegungen der<br />

Benutzer in einem Z-Verlauf von links oben nach rechts unten.<br />

Da heute die Web-Benutzer den Überschriftenbereich und den<br />

Navigationsbereich bereits gewohnt sind, kommt dem Bereich<br />

links oben und in der Bildschirmmitte größere Bedeutung zu.<br />

Bilder haben immer eine Funktion<br />

Der Einsatz von Bildern erfolgt immer bewusst: Ist die Ladezeit<br />

eines Bildes notwendig? Sobald ein Designer ein Bild einsetzt,<br />

entscheidet er sich dafür, ob er informieren, strukturieren oder<br />

dekorieren will. Veranschaulichende Bilder wie Fotos ergänzen<br />

den textuellen Inhalt. Strukturierende Grafiken, etwa Navigationselemente<br />

oder Icons, unterstützen den Blickverlauf, denn<br />

diese Bilder reduzieren die Aussage auf das Wesentliche.<br />

IM DETAIL: VERBUNDLINIE STEIERMARK<br />

Farbflut & Textwüste: Nicht zuviel Information auf einmal<br />

Menschen können rund sieben<br />

Informationseinheiten (mit einer<br />

Abweichung von zwei Einheiten)<br />

im Kurzzeitgedächtnis behalten.<br />

Dieser Wert heißt „Chunk“. Diese<br />

Zahl ist so wichtig, dass sie als<br />

„Magical Number 7“ zur allgemeinen<br />

Regel wurde. Wie allzuviel<br />

Text-Infos, Farben und Naviga-<br />

tionselemente den Benutzer verwirren,<br />

lesen Sie in dem auf dieser<br />

s14 beginnenden Beitrag.<br />

SCHLECHT GENUTZT<br />

wird der Bildschirm.<br />

Eine Seite soll mit<br />

jeder Auflösung<br />

optimal und ohne<br />

große Farbflächen<br />

dargestellt werden.<br />

VERWIRREND<br />

ist die Aufteilung der<br />

Information. Die einheitliche<br />

Navigation<br />

links hat sich durchgesetzt<br />

– hier ist sie<br />

zudem inkonsistent.<br />

ÜBERRASCHUNG<br />

erlebt man, wenn<br />

man hier klickt –<br />

dann sieht man sich<br />

gleich mit zwei Scrollleisten<br />

konfrontiert.


Die besten Gestaltungs-Tipps im Web<br />

Hypertext Style k www.w3.org/Provider/Style/Overview.html<br />

Der Erfinder des www Tim Berners Lee über Hypertext<br />

Creating Killer Websites k www.killersites.com<br />

Die Seiten zur Design-Bibel von David Siegel<br />

Style Guide k www.tu-chemnitz.de/docs/yale/contents.html<br />

Die deutsche Version von info.med.yale.edu/caim/manual<br />

Schlechte Beispiele k www.baddesigns.com<br />

Lernen Sie hier, wie man es nicht machen sollte<br />

Dekorative Elemente wirken motivierend: Sie schaffen einen<br />

emotionalen oder ästhetischen Rahmen für die Aussage.<br />

Die Kenntnis der Gestaltgesetze hilft zu entscheiden, in<br />

welchen psychologischen Zusammenhängen Bilder wirken und<br />

optimal auf der Seite angeordnet werden sollten.<br />

Prägnanzgesetz: Der Benutzer sucht nach einer deutlichen Gestalt.<br />

Einfache Formen wie Dreiecke und Quadrat werden<br />

schneller erkannt und bleiben besser im Gedächtnis.<br />

Gesetz der Nähe: Elemente mit geringen Abständen zueinander<br />

werden als Gruppe wahrgenommen. Systematische Konturen<br />

suggerieren ein geschlossenes, zusammengehörendes Ganzes.<br />

Gleich oder ähnlich aussehende Teile werden stets als zusammengehörend<br />

wahrgenommen.<br />

Gesetz der Kontinuität: Der Betrachter sucht nach einer „guten<br />

Fortsetzung“. Elemente werden in einem Zusammenhang<br />

gesehen. Von symmetrischen Anordnungen geht eine spürbare<br />

Prägnanz aus. Menschen versuchen, ihre Wahrnehmungen in<br />

ihr vorhandenes Wissen zu integrieren.<br />

rasch überfordern. Jede Bildschirmmaske<br />

sollte nicht mehr als vier Farben, das ganze<br />

Dialogsysem nicht mehr als sieben Farben<br />

haben, da die Benutzer sonst von der<br />

Informationsfülle überfordert werden.<br />

Wenn Betrachter lange auf einen<br />

großen Bereich gesättigter Farben blicken<br />

und dann die Augen abwenden, sehen sie<br />

ein Nachbild. Gerade im Web sollte deshalb<br />

auf die Gestaltung großer Flächen mit<br />

satten Farben verzichtet werden.<br />

Alle Farben müssen konsistent eingesetzt<br />

werden und die Orientierung der<br />

Benutzer unterstützen. Dabei ist es oft erforderlich,<br />

sich an ein Corporate Design<br />

als Vorgabe anzupassen. Mit Farben kann<br />

so Information hervorgehoben, motiviert<br />

oder umrahmt werden.<br />

Auch bei der Wahl der Schriftfarbe sollte man vorsichtig sein.<br />

Für die Lesbarkeit von Schrift ist ein guter Kontrast zwischen<br />

Schrift und Hintergrund erforderlich. Prinzipiell ist dunkle<br />

Schrift auf hellem Hintergrund besser wahrnehmbar als helle<br />

Schrift auf dunklem Hintergrund. Die Verwendung von im<br />

schlimmsten Fall gekachelten Hintergrundbildern erschwert es<br />

enorm, Informationen aufzunehmen.<br />

Musik motiviert unterbewusst<br />

Durch Einsatz hörbarer Elemente kann die Aufmerksamkeit<br />

beeinflusst werden. Geräusche können Rückmeldungen über<br />

den Zustand des Systems geben, etwa: „Das System lebt noch“.<br />

Solche Geräusche werden „Earcons“ genannt. Diese Geräusche<br />

sollten gezielt eingesetztz werden, um Aufmerksamkeit zu<br />

erreichen. Die Earcons haben entweder ikonischen Charakter:<br />

Ein Rascheln, das das Umblättern einer Buchseite imitiert,<br />

macht die Veränderung der Seite bewusst. Oder sie haben symbolischen<br />

Charakter: Ein Beep weist auf einen Fehler hin.<br />

Nur durch gezielten und sparsamen Einsatz kann mit Musik<br />

ein Motivationseffekt erzeugt werden. Musik wird als Zusammenspiel<br />

von Rhythmus und Harmonie zu einem Erlebnis<br />

und löst Gefühle aus. Inhalte mit Musik werden stärker wahrgenommen<br />

und sind so wirksamer. Anforderungen für Hintergrund-Loops<br />

sind dabei: hoher Abwechslungsgrad, wenig Ablenkung.<br />

Tritt die Musik in den Vordergrund, entsteht Stress, da<br />

der Benutzer von der Hauptinformation abgelenkt wird.<br />

Farben: Psychologische Effekte nutzen<br />

So verwirren Animationen nicht<br />

Im Gegensatz zu Bildern und Texten sind Videos und<br />

Animationen zeitabhängige Medien – die Benutzer sind an den<br />

Ablauf gebunden. Daher sollten Sie beim Einsatz stets beach-<br />

Das Farbempfinden ist bei jedem Menschen unterschiedlich. ten, dass die Benutzer die Videos zu jeder Zeit steuern und ab-<br />

Jeder Farbe wird eine psychologische Eigenschaft zubrechen können. Die Konzentration lässt rasch nach, daher sind<br />

geschrieben: Rot steht für Warnung, Gefahr, Stopp, aber auch für nur kurze Sequenzen sinnvoll, bereits ab einer Minute wird es<br />

Liebe und Leidenschaft, Grün signalisiert Entspannung, Ruhe, für die Betrachter anstrengend. Animationen können vor allem<br />

aber auch freie Fahrt. Wie Klänge können Farben Emotionen dort eingesetzt werden, wo komplexe Sachverhalte nicht anders<br />

auslösen. Dabei sollen die Aussagen der Farben die zu ver- dargestellt werden können. Vorsicht: Jede Bewegung im Web,<br />

mittelnden Informationen unterstützen. Allzu viele Farben selbst eine blinkende Schrift oder animierte GIFS, bindet die<br />

können allerdings die Aufnahmefähigkeit<br />

Aufmerksamkeit der Benutzer extrem.<br />

Daher ist alles, was sich bewegt, mit äußer-<br />

CHECKLISTE ster Vorsicht einzuplanen.<br />

Haben Sie alle Texte bildschirmgerecht<br />

aufbereitet<br />

(Inverted Pyramide Style)?<br />

Verwenden Sie für Fließtexte<br />

konsistent eine<br />

serifenlose Schrift?<br />

Haben Sie den Einsatz von<br />

Farben sorgfältig überlegt?<br />

Ergänzen sich Bilder und<br />

Texte sinnvoll?<br />

Entspricht die sprachliche<br />

Gestaltung der Texte den<br />

Anforderungen der Endbenutzer?<br />

Was Sie weglassen sollten<br />

Hinweise wie „Optimiert für IE“ zeigen,<br />

dass sich der Designer nicht die Mühe<br />

gemacht hat, die Webseite ausgiebig zu<br />

testen. Eine Webseite sollte mit allen<br />

Browsern darstellbar sein! Intros (etwa<br />

Flash-Intros) sind nervig und verärgern<br />

die meisten Benutzer. Zähler waren früher<br />

mal in Mode, sind aber mittlerweile dank<br />

guter Auswertungs-Tools unnötig.<br />

Der Hinweis „Under construction“ ist<br />

überflüssig, denn das Web ist eigentlich<br />

dazu da, ständig im Auf- und Umbau zu<br />

sein. In der Aktualität liegt ja gerade das<br />

Einzigartige dieses neuen Mediums. k<br />

CHIP | PROFESSIONELL<br />

15


16<br />

AKTUELL | PLANEN k Design-Regeln | AUFBAU | SPECIAL | OPTIMIEREN |<br />

Interaktion und Usability<br />

Actio = Reactio!<br />

Interaktion ist eine Grundkonstante menschlicher Kommunikation. In natürlicher Mensch-Mensch-Kommunikation<br />

erfolgt die Reaktion durch Gestik, Mimik, Körpersprache. Bei einer Mensch-Computer-Kommunikation muss jede<br />

Reaktion auf eine Aktion des Endbenutzers visuell oder akustisch nachgebildet werden.<br />

k<br />

Machen Sie einen einfachen Versuch: Vermeiden Sie in<br />

einem Telefonat Rückmeldungen, etwa „ja“, „aha“,<br />

„mmh“ usw., und in kurzer Zeit wird Ihr Gesprächspartner verunsichert<br />

fragen: „Bist du noch da?“ Bei der Mensch-Maschine-<br />

Kommunikation ist es ähnlich: Um zu verstehen, was der<br />

Computer tut, benötigen Benutzer eine Rückmeldung.<br />

Eine Sekunde Reaktionszeit: Die magische Grenze<br />

Dabei gibt es aber Grenzen: Eine Zehntelsekunde für die Eingabe<br />

eines Buchstabens und dessen Erscheinen am Bildschirm<br />

sind die Benutzer von Computern gewöhnt. Mehr als eine Sekunde<br />

Verzögerung wird bereits als unangenehm empfunden.<br />

Erst durch Reaktionen des Systems erhalten die Benutzer das<br />

Gefühl, zu interagieren. Wenn sich nach zwei Sekunden nichts<br />

tut, verlassen bereits 30 % aller Benutzer die Webseite. Eine<br />

Rückmeldung etwa durch Progressionsbalken, dass die Webseite<br />

noch lädt, sollte daher ab zwei Sekunden Verzögerung erfolgen.<br />

CHIP | PROFESSIONELL<br />

Die besten Usability-Tipps im Web<br />

IM DETAIL: AMAZON<br />

Auch die erfolgreichste Webseite lässt sich verbessern<br />

Amazon war immer schon für eine<br />

einfache, klare, konsistente und<br />

benutzerfreundliche Webseite be-<br />

ORIENTIERUNG<br />

Zu jeder Zeit<br />

erkennen die<br />

Benutzer, wo sie sich<br />

befinden.<br />

TYPOGRAPHIE<br />

ermöglicht schnelle<br />

Text-Erfassung<br />

und Orientierung im<br />

Text durch klar<br />

erkennbare<br />

Textfarben.<br />

KONSISTENZ<br />

Informationsbereiche<br />

ermöglichen guten<br />

Überblick über Einzelheiten<br />

zum Versand,<br />

zur Gesamtsumme<br />

und zur Zahlungsart.<br />

kannt. Zu den Stärken zählen die<br />

gute zweistufige Navigationsstruktur,<br />

der gelungene Einsatz<br />

Usability-Plattform k www.usability-forum.com<br />

Beiträge, Links und Sammlungen in deutscher Sprache<br />

Jakob Nielsens Homepage k www.useit.com<br />

Ergebnisse des Web-Usability-Gurus<br />

UI-Prototypingk http://guir.berkeley.edu/projects/denim<br />

Beispiel für ein Entwicklungs-Tool mit sehenswerten Videos<br />

IBMk www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/572<br />

Optimal sind Design, Planung und Wartung einer Webseite<br />

Achtung: Zehn Sekunden sind die Grenze, um die Aufmerksamkeit<br />

von Benutzern zu halten.Viele Webseiten scheitern an dieser<br />

Anforderung und nerven die Endbenutzer. Viele gehen eben<br />

immer noch über Modem oder ISDN ins Internet.<br />

Die Geschwindigkeit einer Webseite messen Sie einfach beim<br />

Aufruf der Startseite mit einer Stoppuhr, am besten an ver-<br />

von Farbe und die intuitive Aufteilung<br />

in Orientierungs-, Navigations-<br />

und Informationsbereich.<br />

Aber: Die Einstiegsseite wird stets<br />

überladener, und bei Details sind<br />

Schwächen erkennbar.<br />

VERWIRREND<br />

ist die Existenz von<br />

zwei Weiter-Buttons.<br />

Für geübte Amazon-<br />

Benutzer ist es klar:<br />

Beide Buttons tun das<br />

Gleiche – aber die<br />

Laien zögern hier.<br />

NICHT GANZ KLAR<br />

ist die Interaktion zur<br />

Einlösung der Geschenkgutscheine.<br />

VERMEIDEN<br />

sollte man jede Art<br />

von tiefem Scrolling;<br />

besser wäre ein Link<br />

wie oben bei den Geschäftsbedingungen.


schiedenen Rechnern mit mehreren Browsern. Die Performance<br />

einer Webseite kann durch die Beachtung einiger Grundregeln<br />

optimiert werden: sauberer <strong>HTML</strong>-Code, Grafiken wiederverwenden,<br />

Farbbereiche als Tabellenhintergrund und nicht als<br />

große Grafik anlegen, Grafik nicht durch den Browser, sondern<br />

durch Bildbearbeitungsprogramme verkleinern, verschachtelte<br />

Tabellen vermeiden und Stylesheets verwenden.<br />

Interaktion: Denken Sie vom Benutzer aus<br />

Gerade für Interaktion ist die wiederkehrende, einheitliche<br />

Verwendung der Elemente besonders wichtig. Deshalb sollten<br />

Sie auf bekannte Komponenten zurückgreifen, etwa auf die<br />

aus Windows-Systemen gewohnten Interaktionskomponenten:<br />

Buttons, Schieberegler, Texteingabefelder, Menüs, scrollbare<br />

Auswahllisten und Dialogboxen. Der Einsatz von Menüs zeigt<br />

beispielhaft, was gute Interaktion leistet. Der Designer benötigt<br />

eine Eingabe und stellt damit den Benutzer vor die Aufgabe, sich<br />

entscheiden zu müssen. Menüs lösen die Komplexität auf,<br />

indem sie die Handlungsalternativen benennen, eingrenzen und<br />

auf eine Weise zur Auswahl anbieten, die der User aus anderen<br />

Anwendungen kennt, etwa aus einem Office-Programm.<br />

Genau da, wo Interaktion anders funktionieren soll als reine<br />

Navigation („Klicken Sie auf den blauen Link“) ist es besonders<br />

wichtig, die Abläufe intuitiv zu gestalten. Um sich diesbezüglich<br />

bereits in der Planung leichter zu tun, kann hier die Methode<br />

„cognitive walkthrough“ angewandt werden. Dabei versetzen<br />

sich die Webseiten-Designer in die Lage der Endbenutzer und<br />

gehen Schritt für Schritt sämtliche Interaktionen aus deren<br />

Sichtweise durch. Sobald ein Prototyp erzeugt worden ist, muss<br />

unbedingt mit den ersten Anwendern aus der definierten Zielgruppe<br />

getestet werden.<br />

Von der ersten Idee zur perfekten Webseite<br />

Sobald Sie sich klar darüber sind, welchen Zweck die Webseite<br />

für welche Zielgruppe erfüllen soll, schreiten Sie zur konkreten<br />

Umsetzung. Um Ihre Webseite perfekt zu machen, sollten Sie das<br />

Usability-Engineering-Vorgehensmodell anwenden (siehe Grafik).<br />

Dieses Modell sieht vier Arbeitsphasen in drei spiralförmigen<br />

Arbeitsdurchgängen vor.<br />

Am Ende jedes Durchgangs stehen<br />

Usability-Tests mit den Endbenutzern. In<br />

der ersten Analyse definieren Sie die Zielgruppe<br />

genau. Danach erstellen Sie eine<br />

Gesamtübersicht, das sogenannte Top-<br />

Level View. Am Ende des ersten Durchgangs<br />

stehen Prototypen aller geplanten<br />

Bildschirmseiten auf Papier (sogenannte<br />

Paper-Mock-Ups). Bereits diese Papier-<br />

Prototypen werden einem Usability-<br />

Test unterzogen. Der Vorteil: Papier-Prototypen<br />

sind schnell und einfach zu erzeugen<br />

und zu ändern. Tests haben ergeben,<br />

dass sich hier die Endbenutzer noch<br />

trauen, Kritik anzubringen.<br />

Wesentliche Schwierigkeiten der Endbenutzer<br />

hinsichtlich Orientierung, Navigation<br />

und Interaktion werden bereits hier<br />

entdeckt und können rasch verbessert werden. Erst dann, wenn<br />

auf Papierebene alles läuft, gehen Sie in den zweiten Arbeitsdurchgang.<br />

Hier erstellen Sie <strong>HTML</strong>-Prototypen, die noch<br />

nicht perfekt sein müssen, aber schon die wesentlichsten Funktionen<br />

enthalten. Sie können auch nur einen Teil ausprogrammieren<br />

und anhand dieses sogenannten vertikalen Prototypen<br />

Usability-Tests durchführen. Erst wenn auf <strong>HTML</strong>-Prototyp-Ebene<br />

„alles läuft“, gehen Sie spiralförmig in den dritten<br />

und letzten Durchgang. Jetzt beginnen Sie die Webseite zu komplettieren.<br />

Abschließende Usability-Tests erlauben noch letzte,<br />

meist kleinere Änderungen an der veröffentlichten Webseite.<br />

So geht es: Low-Cost-Usability-Tests<br />

Bei einem Usability-Test werden Endbenutzer aus der<br />

möglichen Zielgruppe aufgefordert, eine konkrete Aufgabe zu<br />

lösen, zum Beispiel „Finden Sie das Objekt X und legen Sie es in<br />

den Einkaufskorb“. Dabei werden die Testpersonen beobachtet<br />

oder per Video aufgenommen.<br />

Wichtig sind dabei ein Spiegel oder zwei Videokameras, um<br />

sowohl die Testperson in Gestik und Mimik als auch den Bildschirm<br />

zu erfassen. Um das mentale<br />

Erkennen die Endbenutzer<br />

stets, was sie mit einer<br />

Interaktion auslösen?<br />

Können alle Eingaben<br />

stets rückgängig gemacht<br />

werden?<br />

Erfolgt auf jede Aktion der<br />

Benutzer eine Reaktion?<br />

Sind alle Dateien in Ihrer<br />

Webseite hinsichtlich der<br />

Dateigröße optimiert?<br />

Haben Sie Ihre Webseite<br />

während der Planung von<br />

mindestens drei Benutzern<br />

testen lassen?<br />

USABILITY-ENGINEERING-VORGEHENSMODELL<br />

PHASE 4:<br />

Test<br />

PHASE 3:<br />

Entwicklung<br />

ERFOLGS- SCHNECKE: In drei Durchgängen (Papierentwurf, Prototyp,<br />

Webseite) wird die Seite in vier Phasen entwickelt.<br />

CHECKLISTE<br />

PHASE 1:<br />

Analyse<br />

PHASE 2:<br />

Entwurf<br />

Modell der Endbenutzer zu untersuchen,<br />

eignet sich das „thinking aloud“. Bei<br />

diesem „lauten Denken“ werden die Testpersonen<br />

aufgefordert, alles frei auszusprechen,<br />

was ihnen während der Aufgabenbearbeitung<br />

in den Sinn kommt.<br />

Führen Sie selbst solche Tests durch,<br />

und Sie werden staunen, was sie dabei alles<br />

von Ihren Endbenutzern erfahren. In der<br />

Regel reichen bereits drei bis fünf Tests mit<br />

Endbenutzern, um 95 % aller Schwächen<br />

in Ihrer Webseite zu finden. Wenn Sie diese<br />

Tests bereits im ersten Durchgang der<br />

Entwicklung Ihrer Webseite nach dem<br />

Usability-Engineering-Vorgehensmodell<br />

anwenden, werden Sie Ihre Webseite von<br />

Durchgang zu Durchgang bis zur perfekten<br />

Webseite verbessern.<br />

CHIP | PROFESSIONELL<br />

17


18<br />

DVD k Web-Design-Box |<br />

Alle Programme auf DVD<br />

| Vollversionen |<br />

Auscomp eNavigator Suite 6. k s20<br />

Eindrucksvolle Navigationsmenüs auf Java-Basis erstellen<br />

Hello Engines! 3.2 k s142<br />

Einfache Anmeldung bei den 100 wichtigsten Suchmaschinen<br />

Intrexx Xtreme Portal Manage k s33<br />

Personalisierte Portale für Windows und Linux<br />

SmartStore Office 1.0 k s160<br />

E-Mail-basiertes Customer Relationship Management<br />

SmartStore.biz 3.5 k s160<br />

Internetshops erstellen und verwalten<br />

Super<strong>HTML</strong> 6. k s52<br />

Professioneller <strong>HTML</strong>-Editor mit zahlreichen Funktionen<br />

| Demoversionen |<br />

Adobe GoLive CS k s28<br />

Adobe Illustrator CS k s23<br />

Adobe Photoshop CS k s23<br />

Jasc Paint Shop Pro 8.10<br />

LuraDocument.jpm Capture Pro 5.0.04.02<br />

LuraWave.jp2 SmartCompress 1 k s23<br />

Macromedia ColdFusion MX 6.1 k s22<br />

Macromedia Contribute 2 k s22<br />

Macromedia Director MX 2004 k s22<br />

Macromedia Dreamweaver MX 2004k s28<br />

Macromedia Extensions k s30, 150<br />

Macromedia Fireworks MX 2004 k s22<br />

Macromedia Flash Co. Server MX 1.5k s22<br />

Macromedia Flash MX 2004 k s148<br />

Macromedia Homesite 5.5 k s30<br />

Maguma Workbench 2.0.5.1 k s21<br />

Professional XML Suite 2004 Release 4k s21<br />

Ulead Gif Animator 5.0 k s23<br />

Ulead Gif Animator Lite 1.0<br />

Ulead PhotoImpact XL<br />

web to date 3.0<br />

Zend Studio 3.5 k s21<br />

Zend Studio Server 3.5.0<br />

| Bookmark-Programme |<br />

clicango 0.31<br />

FavCheck 1.5a<br />

FavMan 1.8.5<br />

Inforce XE Bookmarks 2.16<br />

Internet-Adressen 2002 Rev. 14<br />

LinkDesktop 1.4<br />

NetList 2.2<br />

URLsave 2.3.3<br />

| Chat-Anwendungen |<br />

A Smaller Note 99 2.10<br />

CMX Net Send FE 1.1<br />

COM-Chat 1.5<br />

Dana 0.3.5<br />

EasyChat 3.00 RC5<br />

FB Joker 2.6.0.8<br />

Frizzby 3.0.0.654<br />

Gaim 0.66<br />

ICQ Lite Beta Build 1150<br />

INMessage Light 1.1 Rev. 4<br />

IntraSend 1.4.3<br />

JAB 3.0<br />

Message-Bob 1.52<br />

Miranda IM 0.3.3.1<br />

mIRC 6.15<br />

MyCQ 1.2 Beta 6f<br />

Net Chat 1.1<br />

Net Messenger 2001 Build #6<br />

Net-Mails 2.1<br />

NetCommy 1.14<br />

Netzchat 1.6<br />

Odigo 4.0 Build 688<br />

Office Mail 1.1i<br />

RealPopUp 2.4 Build 095<br />

SMSN Terminal 1.0<br />

TeamBoard 2.62<br />

TeamSound 5.6<br />

Trillian 0.74i Basic<br />

WinMessenger 1.7 Beta<br />

CHIP | PROFESSIONELL<br />

| Download-Tools |<br />

1ClickPicGrabber 2.02<br />

AllPicturez 1.2<br />

ASP1-A3 2.0.0<br />

Diiva 1.0.2<br />

Download Bot 1.35<br />

Download Druid 2.1<br />

Express NewsPictures 2.3<br />

Express WebPictures 1.87<br />

FlashGet 1.60a<br />

Fresh Download 7.0<br />

GetRight 5.1<br />

GigaNews 3.1.8<br />

Go!Zilla 4.11.39 (1309-02)<br />

ImageTrace 2.08a XP<br />

InstantGet 1.94<br />

Internet Download Manager 4.01<br />

LeechGet 2004 1.1 Build 1520<br />

Mass Downloader 2.7 build 528<br />

Massive-File-Get 1.33p<br />

Netants 1.25<br />

News File Grabber 2.4.0.1<br />

Newsgroup Express 4.58<br />

NewsPro 3.75<br />

NewsShark 2.0<br />

Notes Pilot 1.71<br />

PicaLoader 1.46.0427<br />

PicGrab 2.7.6<br />

Picture Ace 2.5.5<br />

Picture Patrol Officer XP 1.2<br />

Remote Download 2.0<br />

SBNews/News Robot 9.0<br />

SeqDownload 1.00<br />

Star Downloader 1.43<br />

Web Picture Picker 3.1<br />

Website eXtractor 9.01<br />

WebSpider 2.7 Build 6<br />

WebZip 6.0<br />

WinHTTrack Website Copier 3.32-2<br />

Xnews 6.08.25<br />

| E-Mail-Software |<br />

AD MailBox Manager 2.4<br />

ANT 4 MailChecking 3.5<br />

BATware MailAgent 2.0.9.00<br />

Bongosoft AntiSpam 2004 4.37<br />

ChoiceMail One 2.52<br />

Courier Email 3.5<br />

eMail-Wizard 2.7<br />

Emailsher 1.2.6<br />

Emoticons Mail 3.0<br />

EmotiPad Plus 1.37<br />

ePrompter 2.0 SR 46<br />

Eudora 6.1.2<br />

Express Mail@Mate 2.5.7.0<br />

F'W'D 1.0.10<br />

fabMail 1.01<br />

GeMail 2.1.3.6<br />

IncrediMail Xe Build 1579<br />

IntraVnews Plugin 1.1 Beta 3k s147<br />

K9 1.28<br />

Magic Mail Monitor 2.9<br />

MailBell 2.12<br />

Mailmin 1.1.1<br />

MailOut pro. 9.7<br />

MailPeek 0.97 (5.28.19)<br />

MailWasher 2.0.40 Beta<br />

Mozilla Thunderbird 0.7.1<br />

Mulberry 3.1.6<br />

NewsGator 2.0.3.3 k s147<br />

PacSpam Pro 7.1<br />

Pegasus 4.21c<br />

PocoMail 3.1 Build 1880<br />

QuickDelete 3.1.0.8<br />

SAproxy 1.2.1<br />

Spam Condome 1.1<br />

spamDetacher 1.4<br />

SpamFlush 2003 3.02.3121<br />

SpamPal 1.57<br />

SuperMailer 3.50.0.0365<br />

SuperSpamKiller 1.10<br />

The Bat! 2.12<br />

TopLang OE Backup 3<br />

Ultrafunk Popcorn 1.70<br />

Vivian Mail 3.27<br />

| FTP-Programme |<br />

AbsoluteFTP 2.2.6<br />

BulletProof FTP 2.43<br />

CoffeeCup Direct FTP 6.1<br />

CuteFTP 5.0 XP<br />

DMS-FTP 2.0.1<br />

Encrypted FTP 3.3.0.126<br />

FilenameToFTP 1.20<br />

FileZilla 2.2.7b<br />

FlashFXP 3.0<br />

FTP Drive 1.2<br />

FTP Manager 2.0.7<br />

FTP Now 2.3<br />

FTP Voyager 10.0.1.7<br />

ftp-uploader xp 1.4<br />

FTPEditor 2.5<br />

LeapFTP 2.7.4.602<br />

LeechFTP 1.3.1.207<br />

Morgul 2.2<br />

Push-FTP 2.5.0.0<br />

RightFTP 1.0<br />

Ruff-FTP 2.55 prof. Build 755 k s22<br />

SmartFTP 1.0.981<br />

Wise-FTP 3.0.2.2<br />

WS_FTP 5.08 Limited Edition<br />

| <strong>HTML</strong>-Editoren |<br />

1st Page 2000 2.0<br />

Ace<strong>HTML</strong> Pro 6.01.3<br />

Actual Drawing 5.6<br />

Alleycode 1.51<br />

Antenna 1.6.73<br />

Arachnophilia 5.2.1959<br />

AT <strong>HTML</strong> Editor 32.2 3.00<br />

BestAddress 2004 6.2.0 Professional<br />

Blue Thermic 1.6.5<br />

BPHtml 2002 Build 32<br />

Code-Genie 4.05.18<br />

CoffeeCup <strong>HTML</strong> Editor 9.7<br />

Cooktop 2.5<br />

Cool Page 2.72<br />

Cute<strong>HTML</strong> Pro 5.09<br />

CuteSite Builder 4.00.108<br />

CyD <strong>HTML</strong> Editor 2.1<br />

Dev-PHP 2.0.6<br />

Dynamic Architect 1.3<br />

Easy Web Editor 3.16.163<br />

EzyPage 7.15<br />

Homepage Baukasten 8.0<br />

HotDog Professional 7.03<br />

<strong>HTML</strong> Maker 2.0<br />

<strong>HTML</strong> Suite 2000 1.5<br />

<strong>HTML</strong>-Kit 1.0 Build 292<br />

<strong>HTML</strong>Pad 2004 5.0.0.32 Standard<br />

LitePage 1.0<br />

Namo WebEditor Suite 6.0<br />

NetJet 3.10 Build 106<br />

Notepad2 1.0.12<br />

Peter’s XML Editor 2.0<br />

Phase 5.3 k s22<br />

PHPCoder R2 FP3<br />

Power Website Builder 1.5.0<br />

Rapid CSS 2004 5.0.0.32<br />

Saxon 8.0 k s64<br />

Selida 2.1 Build 1163<br />

Show.kit 2.06<br />

SiteSpinner 2.50b<br />

Super<strong>HTML</strong> 7.0.3 Build 119<br />

SWiSH 2.0 build 2002.04.17<br />

TemplateTamer 1.2.3<br />

TopStyle Lite 3.10<br />

TopStyle Pro 3.10 k s22<br />

UltraEdit-32 10.20b<br />

Visual Webcreator 1.0.650<br />

Weaverslave 4 Beta 3.9.17.1<br />

Web-O-Rama 7.92<br />

WebEdit 2002 1.1.72<br />

XMLwriter 2.4 k s60<br />

| Webcam-Software |<br />

Active WebCam 5.0<br />

CamShot-Improver 1.0.0.0<br />

Capture Studio 1.0.10<br />

DaCamYo! 1.7.0<br />

DC Webcam Scout 2.0<br />

Easy CSSS Video 2.0<br />

KABcam 2.2.7<br />

PicMaster 3.9<br />

PicMeUp 3.3<br />

Privat Webcam G3 3.2.1<br />

Streamee 1.1<br />

SupervisionCam 3.05<br />

TVMail 2.15<br />

Webcam Publisher 2.0 Beta 0013<br />

webcamxp 1.07.071<br />

| Webmaster-Tools |<br />

1st Riada Headline 1.13<br />

AccessLog 5.1.1<br />

Ada URL 2.2.001<br />

Advanced <strong>HTML</strong>Coder 3.0a<br />

AnFX 5.2.5.7<br />

Anfy 2.1<br />

Atrise <strong>HTML</strong>ock 1.10.0<br />

AutoGraphics<strong>HTML</strong> 5.8<br />

Balthisar Cascade 2.0b11<br />

ByteReducer 1.2<br />

Check Load Time 2.1<br />

CodeGen 1.4<br />

CPick 2.6<br />

CSE <strong>HTML</strong> Validator Lite 3.5010<br />

CSE <strong>HTML</strong> Validator Pro 6.51<br />

CSS-Editor 1.0.8<br />

CSS-Maker 1.4.8<br />

Denim 1.1 k s22<br />

eNavigator Suite 7.5<br />

FAQ Genie 1.3.0<br />

FixLinks 2.01.1<br />

Formular-Maker 1.1.6<br />

FreeWebShop.1 4.2<br />

Gallery Wizard 2.0<br />

Hello Engines! Standard 4.0.0.2<br />

<strong>HTML</strong> & Graphic Optimizer 2.60<br />

<strong>HTML</strong> bulk 4.1<br />

<strong>HTML</strong> Code Cleaner 3.20.0<br />

<strong>HTML</strong> Compressor 2.01<br />

<strong>HTML</strong> Conceal 1.0A<br />

<strong>HTML</strong> Copyright Wizard 2.11<br />

<strong>HTML</strong> FontColorizer 2.04<br />

<strong>HTML</strong> Kurs 2001 1.5<br />

<strong>HTML</strong> Link Validator 4.21<br />

<strong>HTML</strong> Match 1.2.2<br />

<strong>HTML</strong> Publisher Pro 3.60<br />

<strong>HTML</strong> To PHP Converter 4.2.1.8<br />

<strong>HTML</strong>-Optimizer 8.11<br />

<strong>HTML</strong>-Optimizer Pro 3.11<br />

<strong>HTML</strong>-Toolbox 3.2 k s22<br />

<strong>HTML</strong>Diff 1.4<br />

<strong>HTML</strong>SPeed 1.0.5<br />

<strong>HTML</strong>Zip 1.5<br />

Image RollNow! 1.2<br />

Instant Source 1.44<br />

iReplace 1.3<br />

IT Commander 4.2.63 k s20<br />

JS-MenuMaker 1.0.0<br />

JS-Navigator 1.0.2<br />

Link Popularity Check 2.5<br />

Magic ASCII Picture 1.6 Build 0312<br />

MergeLog 1.1.0<br />

MetaMaster 1.1<br />

Metaner 1.51.0.0084<br />

MHS <strong>HTML</strong>-Tool 2.11<br />

MultiUpdate 3.0<br />

PHPMaker 2.0 Build 7 k s21<br />

pkColorPicker 3.00.05<br />

PopUp Maker 5.0<br />

PopUpNow! 1.4<br />

Ranking Toolbox 3.1<br />

RankingReport 0.8.2<br />

RankIt! 4.01<br />

Re-Namer 1.0.2<br />

Replace-Manager 1.0.3<br />

RGB Editor 2.0.3.1<br />

RGBto<strong>HTML</strong> 2 1.3<br />

Scrollbar-Maker 1.0.1<br />

Self<strong>HTML</strong> 8.0 k s49<br />

SelfPHP 1.2


SiteXpert 7.0.1 Standard Edition<br />

THRU-Pad 1.0.6<br />

TopSite 1.12<br />

Web Details 1.1<br />

Web Link Validator 3.5 Build 344<br />

Web Site Maestro 3.12<br />

Windows Media Encoder 7.1 k s152<br />

Windows Media Encoder 9 k s152<br />

WinSurvey 2003 Build 1.0.44<br />

| Web-Browser |<br />

32bit Web Browser w9.67.01<br />

4c vision 3.1<br />

Abolimba Multibrowser 4.00<br />

Advanced Web Browser 3.2<br />

Arlington Custom Browser 8.3<br />

Avant Browser 9.02 Build 033<br />

Browse3D 2.5<br />

BrowseMan 8.01<br />

Candy Browser 1.1<br />

Crazy Browser 1.05<br />

DX-Browser 5.0.0.0<br />

FineBrowser 3.2<br />

Firefox 0.9.2<br />

Gesundheitsbrowser 1.1<br />

GreenBrowser 2.2 Build 0315<br />

Internet Explorer 6<br />

Internet Explorer 6 Service Pack 1<br />

iRider 2.10.0002<br />

K-Meleon 0.8.2<br />

Kopassa 1.7<br />

Lauge 1.80<br />

Maxthon 1.0.0178 beta Combo<br />

Mozilla 1.7.1<br />

Mozilla Firebird 0.6.1<br />

Multi Browser 7.0<br />

My Flat Red Cart 1.00<br />

NetCaptor 7.5.2<br />

Netscape 7.1<br />

NoTrax 1.4.0.7<br />

Off By One 3.4.a SSL<br />

Opera 7.23 ohne Java<br />

Opera 7.51 mit Java<br />

PowerBrowser 2004 1.0.20<br />

ReiseGenial 2.1<br />

SlimBrowser 3.99 Build 005<br />

TouchNet Browser 1.28<br />

Wichio Browser 3.3<br />

Willi 3Q4 3.0.765<br />

Wysigot Light 5.4<br />

| Web-Server-Utilities |<br />

Apache Webserver Linux 2.0.50<br />

Apache Webserver Windows 2.0.50<br />

CesarFTP 0.99g k s22<br />

Contenido 4.4.4 k s23<br />

EasyPHP 1.7<br />

Jana Server 2.4.3<br />

Mambo 4.5 (1.0.9)<br />

Mambo Standalone Server 4.5.1.0.7<br />

MySQL 4.0.20 Linux<br />

MySQL 4.0.20d k s110<br />

PHP 5 Final k s92<br />

PHP-Nuke 7.2<br />

phpMyAdmin 2.5.7-pl1 k s21<br />

Postnuke 0.726-3<br />

Diverse Postnuke-Module<br />

typo3 3.6.1<br />

typo3 Quickstart Package 3.6.0<br />

| Diverse Internet-Tools |<br />

0190 Warner 4.02<br />

0900 Warner 4.02<br />

Ad Popup Killer 4.0<br />

AI RoboForm 5.7.3<br />

All-in-One Secretmaker 3.9.4<br />

Amazon Buddy 1.0<br />

Anytime 5.40<br />

ArchiCrypt NoSpam 1.7.2<br />

BayWatcher Pro 6.10<br />

BayWotch 2.1.13 Light<br />

BrowseTo 1.2<br />

ChatBlocker 1.8<br />

Check Connect 1.3<br />

Cli-Mate 2.0.0<br />

Desktop Search 1.0<br />

Eric’s TelNet98 9.0-SSH<br />

FeedOwl 3.2.0.1 k s147<br />

FeedReader 2.5 Alpha 610 k s147<br />

Hello 1.0 build 549<br />

HijackThis 1.97.7<br />

<strong>HTML</strong>-Verpacker 2.0<br />

HyperJoint Do!Link 1.01<br />

Ibaycheck V4 4.81<br />

IE Xtreme 1.6<br />

iMarkup 3.66<br />

iNetAdviser 4.2<br />

Internettime SE-CS<br />

Naviscope 8.70<br />

Netopener 1.0<br />

NetStat Live 2.11<br />

News Feeder 1.0.0<br />

NoPopUp 2003 3.4.6<br />

Onlineeye Pro 1.4.4a<br />

OnlineTimer Pro 11.11<br />

onlineTV 1.8.0.156<br />

phonostar 1.02.2<br />

Popupcleaner 1.0<br />

Preispiraten 2.1.1<br />

Preispiraten Deskbar 1.0<br />

Proxy+ 3.00 Build #232<br />

Save Flash 2.4.27<br />

Schnapper 1.4.17<br />

scwa Onlinetimer4 4.0.42<br />

SenseConnect PRO 4.0.5<br />

Sesam 1.4<br />

SMS - Such Maschinen Switcher 2.0<br />

SurfGhost 1.6<br />

TeleGeiz 1.0.5<br />

TVgenial 3.20<br />

WebSite-Watcher 3.60d<br />

World TV 7.1<br />

WT-Rate 3.60<br />

Yonc 1.25<br />

| Grafik-Hilfsmittel |<br />

Active GIF Creator 2.20<br />

AlbumWeb 2.4 Build 900<br />

Babarosa Gif Animator 3.6<br />

Buttonz & Tilez 1.0<br />

CoffeeCup Firestarter 6.5<br />

CoffeeCup GIF Animator 7.0<br />

CoffeeCup Image Slicer 1.0<br />

Extreme Thumbnail Generator 1.4<br />

Eye Candy 5: Textures<br />

Filters Unlimited 2.0 k s23<br />

Flash-Creator 1.0<br />

Fotos on Web 1.1.1<br />

GalleryMaker 2.3.8<br />

Gif Construction Set Pro. 2.0a P. 52<br />

GIFfyBatch 2.10<br />

GIFfyCutter 2.8<br />

Gimp 2.0 k s23<br />

Graphical-WebSite-Splitter 1.0b<br />

<strong>HTML</strong> & Graphic Optimizer 2.60<br />

IrfanView 3.91 k s136<br />

JPEG Wizard 2.2<br />

MultiColor<br />

PhotoFiltre 5.6<br />

PhotoPlus 5.5<br />

PicoBello 2.8.1<br />

Plugin Galaxy 1.5<br />

Plugin Manager 2.1<br />

Reptile 2.01<br />

Shear 1.0<br />

SplitImage 1.5.2<br />

Splitz 1.51<br />

Sqirlz 1.1c<br />

Squirlz Lite 1.1<br />

Squirlz Morph 1.0c<br />

Web SlideShow 1.0.0.0<br />

WebGalleryEasy 2.3.5<br />

WebSupport 2.11<br />

Xara3D 5.02<br />

| Windows-Tools |<br />

1Password Pro 3.9<br />

4Uonly 1.1.15<br />

A43 2.32<br />

AceBackup 2004 2.0.0.2<br />

AM-Zip 1.30<br />

Ashampoo PowerUp XP Platinum 1.0<br />

Astra32 0.95 beta<br />

BA-DesktopManager 1.1<br />

BackProtection 2004 5.01<br />

BackUp Maker 3.2 Standard<br />

Belarc Advisor 6.1f<br />

BKeyGenerator 1.0.2.1<br />

CD Bremse 1.35<br />

CD Data Rescue 2.3<br />

ClockWise 3.30a<br />

ClocX 1.5 alpha 2<br />

Commander Win 2003 6.2<br />

Crap Cleaner 1.11<br />

CWSysinfo Systemdiagnose Util. 1.1.2<br />

Darn! Passwords! 3.1.03<br />

Datei-Commander 5.0.1<br />

Desktop Sidebar 1.04 Build 69<br />

DFIncBackup Home 1.17 Build 1.1.7.1<br />

Dupehunter Pro. HE 4.1.0.1830<br />

Easy Remover 2004 Pro 3.0<br />

EF Commander 3.89<br />

EF Duplicate Files Manager 2.00<br />

EF StartUp Manager 1.10<br />

EF System Monitor 2.60<br />

Everest Home Edition 1.10<br />

FavoritenOrdner 1.9<br />

FileMonkey 9.29<br />

FileSplitter 5.2<br />

Firestorm 5.0.0.500<br />

freeCommander 2004.03<br />

Idoswin Pro 5.02<br />

Kill Docs 2.0<br />

KW's Datenbackup 1.8.6<br />

MaxiVista 1.0.18<br />

MerX InMotion 1.0<br />

MOBackup 1.30<br />

MobileAssistant 1.5.1.53<br />

Multi Access Bar 1.55<br />

Nlauncher 1.4<br />

NTRegOpt 1.1d<br />

Ordner - PittBull 2.2<br />

Password Agent 1.1.6.09<br />

Password Manager XP 1.96.217<br />

PDFreedom 1.4.188<br />

Peters BiosPaßwort 3.1<br />

Quick Zip 3.06.2<br />

Registry Optimierer 2.0.100<br />

regRAPTOR 2.2<br />

ShellToys XP 4.2<br />

Speed Fan 4.13<br />

Startup Inspector for Windows 2.10<br />

Super Utilities Pro 2.85<br />

Systemometer 1.4<br />

TreeSize 1.72<br />

Tweak-XP Pro 3.0.5<br />

Win-Tuning Suite 2003 2.0.7<br />

WinAlarm 1.1.0.101<br />

WinFAQ 6.3<br />

Winhelp Legal 2004 4.1.0.1<br />

WinRobots QuickSurfer 2.16<br />

WinXP Manager 4.8.4.1<br />

Wisterer HX 2.3.9 Beta<br />

Xintegrity 1.4<br />

XP Konfig 1.5<br />

XP RegTune 2.35<br />

Z-DBackup 2.82<br />

ZipGenius 6 Beta 2<br />

| Sicherheitsprogramme |<br />

AbsoluteShield I. Eraser Lite 2.54<br />

Ad-aware 6.0 Build 181<br />

Anti-Porn 6.1.2.25<br />

Anti-Trojan 5.5.421<br />

AntiVir Personal Edition 6.26.00.01<br />

CookieCooker 0.02.01<br />

HackerSmacker 1.1<br />

JAP 00.02.004<br />

MindSoft Firewall 4.0.2219<br />

NetArmor 1.75.00<br />

One-Click-Privacy 1.5.3<br />

Primedius 4.74<br />

secretmaker 5in1 3.9.4<br />

Spy Sweeper 3.0<br />

VCatch 5.0.18<br />

ZoneAlarm 4.5<br />

| CHIP-Shop & Extras |<br />

Adobe Acrobat Reader 6.0.1<br />

DirectX 9.0b Web-Installer<br />

Microsoft .NET Framework 1.1<br />

Visual Basic 6.0 RT<br />

Windows Media Player 9.0 f. 9x<br />

Windows Media Player 9.0 f. XP<br />

CHIP | PROFESSIONELL<br />

19


20<br />

DVD k Web-Design-Box |<br />

CHIP Web-Design-Toolbox<br />

Die beste<br />

Software für<br />

Web-Profis<br />

Sechs Vollversionen, 555-mal die neuesten Freeware-,<br />

Shareware- und Demoversionen auf der<br />

Heft-DVD: Mit der CHIP-Toolbox für professionelles<br />

Web-Design sind Sie gut gerüstet für jeden Zweck.<br />

Auf der Heft-DVD finden Sie alles, was Sie zum Erstel-<br />

k len und Pflegen eines umfangreichen Web-Angebotes<br />

benötigen: Editoren für PHP, XML und <strong>HTML</strong>, Grafikprogramme,<br />

Authoring-Software und zahlreiche nützliche Tools,<br />

die Ihre Arbeit an der Website vereinfachen.<br />

Sechs Vollversionen<br />

Als besonderes Extra erwarten Sie sechs Vollversionen. <strong>HTML</strong>-<br />

Profis lieben den Quellcode-Editor Super<strong>HTML</strong> 6.0 (vorgestellt<br />

ab s52), um ihre Homepage flexibel zu programmieren. Das<br />

passende Navigationsmenü erzeugen Sie mit der Auscomp<br />

eNavigator Suite 6.0 (siehe Kasten rechts). Mit dem Intrexx<br />

Xtreme Portal Manager (s33) legen Sie ein einfach zu administrierendes<br />

Unternehmensportal an. Einen professionellen<br />

Online-Shop realisieren Sie mit SmartStore.biz 3.5 StartUp-<br />

Edition (s160). Perfekt ergänzt wird die Software durch<br />

SmartStore Office StartUp-Edition, das die Bestellungs-Abwicklung<br />

übernimmt und professionelles Newsletter-Marketing<br />

leicht macht. Damit Ihre Website gefunden wird, lassen Sie sie<br />

von Hello Engines! Standard 3.2 SE (s142) bei den 100<br />

wichtigsten Suchdiensten gleichzeitig eintragen.<br />

CHIP | PROFESSIONELL<br />

CHIP hat gewählt: 555 aktuelle Web-Tools<br />

In unserer Toolbox für Web-Designer finden Sie die besten<br />

Freeware- und Shareware-Programme, Demos und Trials in der<br />

jeweils neuesten Version. Bitte beachten Sie die Lizenzbestimmungen<br />

zu jedem Programm. Niels Held<br />

GRÜSSE VOM GURU So eine<br />

Freigabe für eine DVD<br />

hat die Redaktion noch<br />

nicht erlebt: Zeev<br />

Suraski, Entwickler von<br />

PHP und Zend Engine,<br />

schaute persönlich bei<br />

CHIP Professionell<br />

vorbei und unterschrieb<br />

bei Autor Niels Held.<br />

JAVA | ENAVIGATOR SUITE 6.0 k Vollversionen<br />

Professionelle Java-Menüs<br />

Basic Facts:<br />

k Menüstrukturen erzeugen<br />

k Java, JScript, (D)<strong>HTML</strong><br />

k Suchfunktion einbauen<br />

Beschreibung: Eine Website,<br />

die umständlich zu bedienen<br />

ist, kann noch so interessante<br />

Inhalte versprechen – ohne<br />

funktionierende Navigationsstruktur<br />

wird dort kein Anwender<br />

lange verweilen. Also<br />

muss ein leicht zu benutzendes<br />

Navigationsmenü her, und das<br />

erzeugen Sie am besten mit<br />

Auscomp eNavigator Suite 6.0.<br />

Die eNavigator Suite 6.0 ist<br />

ein umfangreiches WYSIWYG-<br />

Werkzeug, mit dem Sie komfortable<br />

Website-Menüs in<br />

Java, JavaScript oder (D)<strong>HTML</strong><br />

erzeugen. Für die Bedienung<br />

des Programms sind weder<br />

Java- noch <strong>HTML</strong>-Kenntnisse<br />

notwendig – Sie können sich<br />

voll auf die grafische und<br />

strukturelle Umsetzung Ihres<br />

Navigationssystems konzentrieren.<br />

Schon beim aufwendigsten<br />

ersten Schritt greift die<br />

eNavigator Suite 6.0 Ihnen<br />

unter die Arme: Über den<br />

„Indexer“ liest das Programm<br />

die gesamte Struktur einer<br />

beliebigen Website aus und<br />

erstellt automatisch einen<br />

Auf Heft-DVD (Webmaster-Tools)<br />

finden<br />

Sie auch die Shareware-Version<br />

des Auscomp<br />

IT Commander<br />

V4. Die Software ist<br />

eine einfach zu bedienende<br />

Intranet-<br />

Kommunikationsplattform, die<br />

vollständig Web-gestützt arbei-<br />

Navigationsbaum mit allen<br />

Haupt- und Unterseiten. Im<br />

Idealfall beschriften Sie nur<br />

noch die Unterseiten, wählen<br />

das Design und lassen die<br />

Software den Java-Code automatisch<br />

generieren.<br />

Sie können das Layout Ihres<br />

Menüs aber auch über Mouse-<br />

Over-Effekte und die mitgelieferten<br />

Themes beliebig anpassen.<br />

Mit über 100 verschiedenen<br />

Icons, die Sie um<br />

eigene ergänzen können,<br />

gestalten Sie den Navigationsbaum<br />

individuell.<br />

Nützlich: eNavigator Suite integriert<br />

standardmäßig eine<br />

Suchfunktion in das Navigationsmenü,<br />

mit der Besucher<br />

Ihre Site nach gewünschten<br />

Schlagwörtern durchforsten<br />

können. Auf Wunsch lässt sich<br />

dieses Feature aber auch<br />

abschalten.<br />

Tipp: Möchten Sie einzelne<br />

Seiten Ihrer Website vor unbefugtem<br />

Zugriff schützen, versehen<br />

Sie die Site mit einem<br />

Passwort. Das Navigationsmenü<br />

gibt den Zugriff auf die<br />

geschützte Site erst nach Eingabe<br />

des korrekten Passwortes<br />

frei. Für den Fall einer falschen<br />

Eingabe können Sie eine eigene<br />

„Error Page“ definieren.<br />

tet. Erstellen und verwalten<br />

Sie Help Desk,<br />

Knowledgebase, Messaging-Plattform,<br />

Kostenmanagement<br />

und vieles mehr. Für<br />

den Betrieb des IT<br />

Commander wird ein<br />

installierter Web-Server (etwa<br />

Apache, auf Heft-DVD) benötigt.


XML | PROFESSIONAL XML SUITE k Demos<br />

XML-Komplettpaket<br />

Basic Facts:<br />

k XML-Entwicklung<br />

k XSLT-Stylesheets<br />

k XML to XML Mappings<br />

Beschreibung: Die Professional<br />

XML Suite 2004 stellt<br />

drei auf einander abgestimmte<br />

Tools für die XML-Entwicklung<br />

bereit. XMLSPY Professional<br />

2004 ist eine XML-Entwicklungsumgebung,<br />

die Code-<br />

Vervollständigung, XML- und<br />

XSLT-Debugging und <strong>HTML</strong><br />

PHP | PHPMYADMIN<br />

MySQL<br />

administrieren<br />

Basic Facts:<br />

k MySQL-Daten ändern<br />

k Server-Management<br />

k Benutzerverwaltung<br />

Beschreibung: PhpMyAdmin<br />

bietet einfachen Zugriff auf<br />

MySQL-Server und Datenbanken.<br />

Mit phpMyAdmin erstellen<br />

und löschen Sie Datenbanken<br />

und einzelne Tabellen<br />

oder bearbeiten Felder. Die<br />

Software konvertiert Daten in<br />

XML und durchsucht Datenbanken<br />

auf beliebige Inhalte.<br />

Tipp: Über |Edit PDF Pages|<br />

erstellen Sie PDF-Übersichten<br />

der Tabellen, die in Ihrer<br />

Datenbank enthalten sind.<br />

k Web-Server-Utilities<br />

nach XML-Migration bietet. Mit<br />

Stylevision Professional 2004<br />

erzeugen Sie auf einfache Weise<br />

komplexe XSLT-Stylesheets.<br />

Mapforce Professional 2004<br />

hilft Ihnen beim Erstellen hochkomplexer<br />

XML-Mappings über<br />

eine grafische Oberfläche.<br />

Tipp: Nach Ablauf der 30-Tage-<br />

Version können Sie die Vollversion<br />

erwerben oder auf die<br />

kostenlose (eingeschränkte)<br />

Home Edition umsteigen.<br />

PHP | PHP & MYSQL<br />

Interpreter und<br />

Datenbank<br />

Basic Facts:<br />

k Neue PHP-Version 5<br />

k MySQL-Datenbank<br />

k Dynamische Websites<br />

Beschreibung: PHP 5 und<br />

MySQL sind das perfekte Team<br />

für den Betrieb einer professionellen<br />

Website mit dynamischen<br />

Inhalten. Auf einem<br />

leistungsfähigen Webserver<br />

installiert, ermöglichen Sie<br />

Content-on-Demand in jedem<br />

herkömmlichen Web-Browser.<br />

Tipp: PHP und MySQL benötigen<br />

als Basis einen installierten<br />

Webserver. Verwenden Sie<br />

den kostenlosen Apache-<br />

HTTP-Server (auf Heft-DVD).<br />

k Web-Server-Utilities<br />

XML | XML WRITER<br />

Komfortables<br />

XML Editing<br />

Basic Facts:<br />

k XML Editing<br />

k Validitäts-Kontrolle<br />

k XSLT-Vorlagen verwenden<br />

Beschreibung: Verfassen Sie<br />

komplexe, textorientierte<br />

XML-Dokumente. XMLwriter<br />

prüft auf Wohlgeformtheit<br />

und Validität. Die automatische<br />

Tag-Ergänzung nimmt<br />

Ihnen Programmierarbeit ab.<br />

Tipp: XMLwriter unterstützt<br />

Bookmarks in XML-Dokumenten,<br />

über die Sie schnell<br />

zu vorher definierten Sprungpunkten<br />

gelangen. Sie finden<br />

die Bookmark-Funktion im<br />

Menü unter |Edit|Bookmarks|.<br />

k <strong>HTML</strong>-Editoren<br />

PHP | ZEND STUDIO 3.5<br />

PHP IDE von den<br />

PHP-Entwicklern<br />

Basic Facts:<br />

k Voller PHP-5-Support<br />

k Code-Completion<br />

k Quellcode-Validierung<br />

Beschreibung: Kommerzielle<br />

PHP-Entwicklungsumgebung<br />

der PHP-Entwickler. Zahlreiche<br />

Funktionen, wie Code-<br />

Vervollständigung, Remote-<br />

Debugging über den Browser<br />

oder Quellcode-Analyse, erleichtern<br />

die Arbeit erheblich.<br />

Tipp: Der enthaltene Profiler<br />

spürt langsame Funktionen in<br />

Ihren PHP-Anwendungen auf<br />

und erlaubt es, gezielt zu<br />

optimieren. Sie starten den<br />

Profiler über den Browser.<br />

k Demoversionen<br />

PHP aus MySQL-<br />

Daten erstellen<br />

Basic Facts:<br />

k MySQL in PHP umwandeln<br />

k Quick Generate Wizard<br />

k Datenverwaltung per Web<br />

Beschreibung: PHPMaker<br />

generiert automatisch PHP-<br />

Skripte aus den Daten einer<br />

MySQL-Datenbank Über diese<br />

Skripte verwalten, bearbeiten<br />

und erweitern Sie die Daten<br />

bequem über das Web.<br />

Tipp: Über |Tools|Quick<br />

Generate Wizard| erstellen Sie<br />

mit drei Mausklicks aus einer<br />

MySQL-Datenbank eine funktionierende<br />

PHP-Website. Sie<br />

können die Datensätze durchsuchen<br />

und weiterbearbeiten.<br />

PHP | PHPMAKER<br />

k Webmaster-Tools<br />

PHP | WORKBENCH<br />

PHP Anwendungen<br />

entwickeln<br />

Basic Facts:<br />

k Dynamische Web-Inhalte<br />

k Modularer Aufbau<br />

k Debugging-Funktion<br />

Beschreibung: Maguma<br />

Workbench ist eine Entwicklungsumgebung<br />

für PHP. Ein<br />

leistungsfähiger Debugger<br />

und die automatische Code-<br />

Vervollständigung helfen<br />

bei der Entwicklung. Das<br />

System lässt sich über Module<br />

erweitern.<br />

Tipp: Über |File|Open file from<br />

FTP| öffnen Sie bereits veröffentlichte<br />

Dateien direkt vom<br />

Webserver. Über |Save to FTP|<br />

speichern Sie die Änderungen.<br />

k Demoversionen<br />

CHIP | PROFESSIONELL<br />

21


22<br />

DVD k Web-Design-Box |<br />

WEB | MACROMEDIA DEMOS k Demos<br />

Alle aktuellen Macromedia-Trials<br />

Basic Facts:<br />

k Web-Design, Flash<br />

k Webgrafiken<br />

k Dynamische Web-Inhalte<br />

Beschreibung: Acht aktuelle<br />

Trial-Versionen der wichtigsten<br />

Macromedia-Programme mit<br />

einer Download-Größe von 460<br />

Megabyte finden Sie auf dieser<br />

DVD. Dazu gehören der Web-<br />

Editor Dreamweaver MX 2004,<br />

der Multimedia-Content-<br />

Creator Flash MX 2004,<br />

<strong>HTML</strong> | DENIM<br />

Innovative<br />

Website-Planung<br />

Basic Facts:<br />

k Website am PC scribbeln<br />

k Bezüge herstellen<br />

k Unterstützt Tablet-PCs<br />

Beschreibung: Skizzieren Sie<br />

eine komplette Website am<br />

PC. Die Zeichnungen verlinken<br />

Sie, so dass Sie bereits im<br />

voraus einen Überblick über<br />

die Funktionalität gewinnen.<br />

Tipp: Führen Sie das Tutorial<br />

aus, bevor Sie das Programm<br />

verwenden. Dort lernen Sie<br />

unter anderem den Gebrauch<br />

von Maus-Gesten, die die Arbeit<br />

mit Denim erleichtern.<br />

Für bequemes Arbeiten empfiehlt<br />

sich ein Grafik-Tablet.<br />

k Webmaster-Tools<br />

CHIP | PROFESSIONELL<br />

Fireworks MX 2004, Director<br />

MX 2004, ColdFusion MX 6.1,<br />

Contribute 2, Flash Communication<br />

Server MX 1.5 und der<br />

<strong>HTML</strong>-Code-Editor Homesite 5.5<br />

Tipp: Unter Demoversionen<br />

stehen Ihnen insgesamt zehn<br />

originale und uneingeschränkte<br />

Erweiterungen für Dreamweaver<br />

und Flash zur Verfügung.<br />

Sie installieren sie über<br />

den Extension Manager, der in<br />

den Trials enthalten ist.<br />

<strong>HTML</strong> | <strong>HTML</strong> TOOLBOX<br />

Werkzeugkasten<br />

für <strong>HTML</strong> und CSS<br />

Basic Facts:<br />

k <strong>HTML</strong>- und CSS-Tools<br />

k FTP-Client<br />

k Gästebuchgenerator<br />

Beschreibung: Die Freeware<br />

enthält zahlreiche Tools für<br />

<strong>HTML</strong> und CSS. Erstellen Sie<br />

Framesets, Meta-Daten,<br />

MouseOver Buttons oder CSS<br />

Buttons. Ein FTP-Client, eine<br />

vollständige CSS- und <strong>HTML</strong>-<br />

Referenz u.v.m. gehören<br />

ebenfalls zum Umfang.<br />

Tipp: Mit <strong>HTML</strong> Toolbox legen<br />

Sie ein PHP-basiertes Gästebuch<br />

an. Starten Sie dazu den<br />

Gästebuchgenerator und<br />

folgen Sie den Anweisungen.<br />

k Webmaster-Tools<br />

CSS | TOPSTYLE PRO<br />

Komplexer<br />

Stylesheet-Editor<br />

Basic Facts:<br />

k CSS erzeugen<br />

k Validierungsfunktion<br />

k Flexible Oberfläche<br />

Beschreibung: TopStyle Pro<br />

ist einer der umfangreichsten<br />

CSS-Editoren, programmiert<br />

vom Entwickler des <strong>HTML</strong>-<br />

Editors HomeSite. Die Software<br />

prüft Ihren Code mit<br />

Hilfe des W3C-CSS-Validators.<br />

Tipp: TopStyle Pro integriert<br />

automatisch Software von<br />

Fremdanbietern, etwa Macromedia<br />

Dreamweaver oder<br />

Adobe GoLive. Über |Tools|<br />

Programs| übergeben Sie den<br />

CSS-Code.<br />

k <strong>HTML</strong>-Editoren<br />

FTP | CESARFTP<br />

Eigenen FTP-Server<br />

anlegen<br />

Basic Facts:<br />

k Dateien bereitstellen<br />

k Upload-Verwaltung<br />

k Remote-Control-Funktion<br />

Beschreibung: Geben Sie<br />

Dateien auf Ihrem PC frei,<br />

ohne diese in ein spezielles<br />

Verzeichnis zu kopieren. Umfangreiche<br />

Logs und Statistiken<br />

geben Auskunft über<br />

Dateizugriffe. Automatischer<br />

Upload wird unterstützt.<br />

Tipp: Setzen Sie Limits für<br />

Download-Geschwindigkeit<br />

und Anzahl der erlaubten Verbindungen,<br />

um das Verbindungstempo<br />

für alle User<br />

konstant zu halten.<br />

k Web-Server-Utilities<br />

<strong>HTML</strong> | PHASE 5<br />

Umfangreicher<br />

<strong>HTML</strong>-Editor<br />

Basic Facts:<br />

k Einfache Bedienung<br />

k Farb. Syntax-Highlighting<br />

k Integrierter Debugger<br />

Beschreibung: Übersichtlich<br />

gestalteter Freeware-Editor<br />

mit integrierter Bildbetrachtung.<br />

Unterstützt Java, JScript<br />

und CSS. Viele nützliche Tools.<br />

Tipp: Mit der Funktion „Dateiübergreifendes<br />

Suchen &<br />

Ersetzen“ durchforsten Sie<br />

beliebige Dateien in einem<br />

Ordner nach Zeichenfolgen<br />

und ersetzen diese in einem<br />

Rutsch – bequem, um etwa<br />

einen Verweis auf allen Seiten<br />

einer Website zu ändern.<br />

k <strong>HTML</strong>-Editoren<br />

Up- und Download<br />

per FTP<br />

Basic Facts:<br />

k Komfortabler FTP-Zugriff<br />

k Rechteverwaltung<br />

k Resume-Funktion<br />

Beschreibung: Mit dieser<br />

Shareware pflegen Sie bequem<br />

Ihre Dateien auf Ihrem<br />

FTP-Server. Die Autoresume-<br />

Funktion verhindert abgebrochene<br />

Down- und Uploads.<br />

Tipp: Versehen Sie Dateien<br />

und Ordner mit individuellen<br />

Zugriffsrechten. So stellen Sie<br />

sicher, dass nur Befugte Zugriff<br />

auf Ihre Dateien haben.<br />

Die eingebaute Suche findet<br />

Dateien auch in Unterverzeichnissen<br />

auf dem Server.<br />

FTP | RUFF-FTP PROF.<br />

k FTP-Programme


GRAFIK | ADOBE DEMOS k Demos<br />

Aktuelle Adobe-Demoversionen<br />

Basic Facts:<br />

k Web-Design<br />

k Fotobearbeitung<br />

k Vektorgrafik<br />

Beschreibung: Auf dieser DVD<br />

finden Sie gleich drei Highlights<br />

des Grafikspezialisten Adobe in<br />

den aktuellen CS Versionen: Erzeugen<br />

und manipulieren Sie<br />

Bilder mit Photoshop, dem<br />

Standardprogramm für Bildbearbeitung.<br />

GoLive ist ein<br />

mächtiger Web-Editor, der so-<br />

RSS | NEWSGATOR<br />

RSS-Nachrichten<br />

in Outlook lesen<br />

Basic Facts:<br />

k Abonnieren von RSS-Feeds<br />

k Integration in MS Outlook<br />

k Unterstützt Usenet<br />

Beschreibung: NewsGator<br />

klinkt sich in eine bestehende<br />

MS-Outlook-Installation ein.<br />

Die Software zeigt über die<br />

Outlook-Oberfläche abonnierte<br />

RSS-News an und aktualisiert<br />

diese automatisch.<br />

Benötigt MS .NET Framework<br />

1.1 (auf DVD unter Extras).<br />

Tipp: Verwenden Sie News-<br />

Gator, um herkömmliche<br />

NNTP-Usenet-Gruppen zu lesen.<br />

Der Feed Wizard hilft<br />

beim Einrichten des Readers.<br />

k E-Mail-Software<br />

wohl im WYSIWYG- als auch im<br />

Code-basierten Modus sehr<br />

gute Ergebnisse garantiert.<br />

Grafiker schwören auf das<br />

Vektorgrafikprogramm<br />

Illustrator, um Ihre kreativen<br />

Ideen direkt am Bildschirm<br />

zu verwirklichen.<br />

Tipp: Mit ImageReady, (in Photoshop<br />

CS enthalten) erstellen<br />

Sie Animationen im Flash-<br />

Format, einschließlich Vektorgrafiken<br />

und variablen Text.<br />

GRAFIK | FILTERS UNLTD.<br />

Über 3.000 Filter<br />

für Photoshop & Co.<br />

Basic Facts:<br />

k Photoshop-Plugin<br />

k Einfach erweiterbar<br />

k Fotofiltersammlung<br />

Beschreibung: Filters<br />

Unlimited wird als Plugin in<br />

Photoshop-kompatible Programme<br />

eingebunden. Das<br />

Tools stellt bereits 150 fertige<br />

Filter bereit. Über die Programm-Homepage<br />

finden Sie<br />

zirka weitere 3.000 meist freiverfügbare<br />

Filter im Internet.<br />

Tipp: Erstellen Sie eigene<br />

Filter mit dem integrierten<br />

Editor. Einen Link zum „Filter<br />

Factory Programming Guide“<br />

finden Sie auf der Website.<br />

k Grafik-Utilities<br />

Professionelle<br />

Fotobearbeitung<br />

Basic Facts:<br />

k Umfangreiche Retusche<br />

k Bildkomposition<br />

k Generische Bild-Erzeugung<br />

Beschreibung: Populäre<br />

Freeware-Bildbearbeitung.<br />

Die Bedienung ist für Windows-Verhältnisseungewöhnlich,<br />

trotzdem überzeugt GIMP<br />

mit guten Retusche- und Montagetechniken.<br />

Benötigt GTK+<br />

(kostenlos, www.gtk.org).<br />

Tipp: Ebenen sind ein nützliches<br />

Werkzeug für die<br />

flexible Montage von Bildobjekten.<br />

Zum pixelgenauen<br />

Freistellen von Objekten<br />

eignet sich das Pfadwerkzeug.<br />

GRAFIK | GIMP<br />

k Grafik-Utilities<br />

JPG | SMARTCOMPRESS<br />

Bilder verlustfrei<br />

komprimieren<br />

Basic Facts:<br />

k Unterstützt JPEG2000<br />

k Verlustfreie Kompression<br />

k Alle gängigen Bildformate<br />

Beschreibung: LuraWave.jp2<br />

SmartCompress LE ist ein leistungsfähiges<br />

Programm für<br />

digitale Bildkompression nach<br />

dem JPEG2000-Standard.<br />

Konvertieren Sie gängige Bildformate<br />

wie Bitmap, TIFF und<br />

JPEG in das Algo Vision Lura-<br />

Tech JPEG2000-Format.<br />

Tipp: Verwenden Sie die verlustfreie<br />

Kompression bei unkomprimierten<br />

Formaten wie<br />

TIFF oder Bitmap, um die<br />

Dateigröße zu halbieren.<br />

k Demoversionen<br />

GRAFIK | GIF ANIMATOR<br />

Schnell ladende<br />

GIF-Animationen<br />

Basic Facts:<br />

k GIF-Animationen<br />

k Video-Import<br />

k Bild- und Video-Effekte<br />

Beschreibung: Erzeugen Sie<br />

professionelle GIF-Animationen<br />

für Menüs oder Banner.<br />

GIF Animator kommt mit<br />

zahlreichen Bildfiltern und<br />

Videofunktionen, wie Fadern<br />

und Verfremdungseffekte.<br />

Tipp: Importieren Sie Video<br />

aus MPEG-, AVI- oder MOV-<br />

Dateien. GIF Animator extrahiert<br />

automatisch die<br />

Einzelbilder, optimiert diese<br />

für 256 Farben und speichert<br />

sie wieder als GIF-Animation.<br />

k Demoversionen<br />

CMS | CONTENIDO<br />

Content Management<br />

System<br />

Basic Facts:<br />

k Einfache Benutzerführung<br />

k Modularer Aufbau<br />

k OpenSource-Technologie<br />

Beschreibung: Pflegen Sie<br />

umfangreiche Web-Auftritte<br />

mit Contenido. Die Freeware<br />

erleichtert es besonders Autoren<br />

ohne <strong>HTML</strong>-Kenntnisse,<br />

Texte in bestehende Layouts<br />

zu übernehmen. Benötigt PHP,<br />

MySQL, Apache Server.<br />

Tipp: Auf der Website finden<br />

Sie zahlreiche frei verfügbare<br />

Module von Fremdanbietern,<br />

die Contenido um neue Funktionen<br />

wie etwa Umfragen<br />

und Bildergalerien erweitern.<br />

k Web-Server-Utilities<br />

CHIP | PROFESSIONELL<br />

23


24<br />

AKTUELL | PLANEN k Recht | AUFBAU | SPECIAL | OPTIMIEREN |<br />

Homepage und Recht<br />

Teure Fehler vermeiden<br />

Wer eine Webseite betreiben will, hat meist schon genug mit der Gestaltung und dem Inhalt zu tun. Trotzdem<br />

sollten Sie auf keinen Fall versäumen, sich mit den rechtlichen Aspekten Ihres Internet-Auftritts zu beschäftigen.<br />

CHIP sagt Ihnen, worauf Sie beim Webseite-Impressum, bei Verlinkungen und beim Urheberrecht achten müssen.<br />

k<br />

Nach wochen-, vielleicht sogar monatelanger Arbeit ist<br />

Ihre Webseite endlich online, Sie sind stolz auf Ihr Werk,<br />

und die Besucher kommen reichlich. Und auf einmal trudeln<br />

auch die ersten Abmahnungen ein. Die Ursache: Viele Webseiten-Betreiber<br />

kümmern sich nicht um die rechtlichen<br />

Aspekte des Internet-Auftritts – sei es aus Unkenntnis oder aus<br />

Leichtfertigkeit. Doch es gibt ein paar wichtige Aspekte, die Sie<br />

auf jeden Fall beachten sollten. Denn die Abmahner warten nur<br />

auf Zeitgenossen, die Fehler machen.<br />

Domain-Wahl: Juristischen Streit vermeiden<br />

Um Ärger und Kosten zu vermeiden, sollte der künftige<br />

Webseite-Besitzer vor Anmeldung der Domain prüfen, ob nicht<br />

einem Dritten die Rechte an der gewählten Bezeichnung zustehen.<br />

Werfen Sie dazu einen Blick in die Datenbank der<br />

Domain-Verwaltungsstelle DENIC (Whois-Suche, www.denic.<br />

de/de/whois/index.jsp). Homepage-Betreiber, die wegen einer<br />

angemeldeten Domain eine Abmahnung bekommen haben,<br />

müssen das ebenfalls klären – auch wenn es dafür möglicherweise<br />

schon zu spät ist.<br />

Wer mit dem Domain-Handel das schnelle Geld machen will,<br />

sollte das Gesetz beachten, damit er nicht selbst zur Kasse gebeten<br />

wird. Domain-Rechte lassen sich herleiten aus dem im<br />

KOMMERZIELLE WEBSEITEN<br />

Detaillierte Infos sind Pflicht<br />

Allgemeine Informationspflichten<br />

bei „geschäftsmäßig“ betriebenen<br />

Diensten im Internet<br />

sind nach § 6 TDG:<br />

Name und Anschrift des Anbieters.<br />

Bei juristischen Personen<br />

zusätzlich Name des Vertretungsberechtigten.<br />

Angaben, die eine schnelle elektronische<br />

Kontaktaufnahme und<br />

unmittelbare Kommunikation<br />

ermöglichen. Neben Telefonund<br />

Faxnummer sind das also<br />

auch die E-Mail-Adresse oder<br />

ein sogenannter -Link.<br />

Falls die angebotenen Dienste<br />

einer behördlichen Genehmigung<br />

bedürfen, die Angaben zur<br />

Aufsichtsbehörde.<br />

CHIP | PROFESSIONELL<br />

Angabe, wo der Dienstanbieter<br />

registriert ist (etwa Handelsoder<br />

Vereinsregister) mit Registernummer.<br />

Bei Ärzten, Rechtsanwälten,<br />

Steuerberatern, Architekten<br />

etc. die genaue Berufsbezeichnung<br />

und das Land, in dem sie<br />

erworben wurde, sowie die berufsrechtlichen<br />

Regelungen und<br />

ein Hinweis darauf, wie diese zugänglich<br />

sind. Allerdings reicht<br />

es, wenn Sie zu diesen Regelungen<br />

einen Link setzen.<br />

In Fällen, in denen Sie eine Umsatzsteuer-Identifikationsnummer<br />

nach § 27a des Umsatzsteuergesetzes<br />

besitzen, die Angabe<br />

dieser Nummer.<br />

Bürgerlichen Gesetzbuch verankerten Namensschutz, aus dem<br />

Wettbewerbs- und Urheberrecht sowie schließlich aus dem<br />

Markenrecht. Unternehmensnamen oder private Vor- und<br />

Nachnamen genießen zivilrechtlichen Namensschutz. Der<br />

Berechtigte kann also jemanden, der nachweislich keinen Anspruch<br />

auf den Namen hat und rechtswidrig handelt, auf<br />

Unterlassung des Namensgebrauchs verklagen.<br />

Impressum nicht vergessen<br />

Die seit 2002 verschärfte Impressumspflicht für Teledienste-<br />

Anbieter gemäß § 6 Teledienste-Gesetz (TDG) ist immer noch<br />

eine der am häufigsten missachteten Vorschriften im Web. Da<br />

sich Verstöße durch eine Internet-Recherche leicht feststellen<br />

lassen, muss derjenige, der sich nicht an dieses Gesetz hält, jederzeit<br />

mit einer kostenpflichtigen Abmahnung rechnen. Gleichzeitig<br />

stellt ein Verstoß gegen § 6 TDG eine Ordnungswidrigkeit<br />

dar, die sogar mit einer Geldbuße von bis zu 50.000 Euro geahndet<br />

werden kann.<br />

Eine Anbieterkennung muss demnach derjenige auf seiner<br />

Homepage führen, der geschäftsmäßig einen „Teledienst“ betreibt.<br />

Darunter fallen Online-Shops, Selbstdarstellungen von<br />

Firmen, Diskussionsforen sowie Suchmaschinen. Eine Gewinnerzielungsabsicht<br />

ist nicht erforderlich, um als geschäftsmäßig<br />

betriebener Teledienst zu gelten. Es reicht aus, wenn ein Anbieter<br />

mit der Absicht handelt, nachhaltige Einnahmen zu erzielen oder<br />

die nachhaltige Erzielung von Einnahmen unter Zuhilfenahme<br />

von Telediensten zu fördern. Deshalb können auch öffentliche<br />

oder gemeinnützige Unternehmen wie Krankenhäuser und<br />

Bibliotheken unter die Kennzeichnungspflicht fallen.<br />

Neben den Regelungen aus dem TDG können sich Form und<br />

Inhalt der Anbieterkennzeichnung auch aus anderen Gesetzen<br />

ergeben. Internet-Dienstleister und Online-Shops haben etwa<br />

die Vorschrift des § 312c BGB zu beachten. Wer einen Mediendienst<br />

betreibt, also redaktionelle Titel oder Texte publiziert, die<br />

der öffentlichen Meinungsbildung dienen, muss unter anderem<br />

einen verantwortlichen Redakteur gemäß § 10 Mediendienste-<br />

Staatsvertrag (MDStV) benennen.<br />

Kaum eine Webseite ist wirklich privat<br />

Betreiben Sie dagegen eine rein private Webseite ohne redaktionelle<br />

Inhalte, benötigen Sie grundsätzlich keine Anbieterkennung.<br />

Aber bereits die Teilnahme an einem Partnerprogramm<br />

oder Banneraustausch kann als geschäftsmäßige<br />

Vermittlung eines Teledienstes interpretiert werden, so dass<br />

Sie die Regelungen des Teledienste-Gesetzes (TDG) beachten<br />

müssen. Falls Sie auf Ihrer Homepage regelmäßig Urlaubs-


Die besten Rechts-Webseiten im Internet<br />

Jede Woche aktuelle Infos k www.jurpc.de<br />

Internet-Zeitschrift für Rechts-Informatik mit Newsletter<br />

Neues aus Karlsruhe k www.bundesgerichtshof.de<br />

Höchstrichterliche Entscheidungen im Volltext<br />

Professionelle Urteilssuche k www.metalaw.de<br />

Urteilssuchmaschine, Gerichtsverzeichnis, Nachrichten<br />

Formulare k www.bund.de/formular-center-.5992.htm<br />

Die Bundesverwaltung hält Formulare für alle Zwecke bereit.<br />

berichte oder Restaurant-Tests veröffentlichen, fallen Sie möglicherweise<br />

unter die oben genannten Regelungen des Mediendienste-Staatsvertrags<br />

(MDStV).<br />

Daher ist es ratsam, im Zweifel auch auf privaten Seiten eine<br />

Anbieterkennzeichnung zu plazieren. Es empfiehlt sich in jedem<br />

Fall, Name, Anschrift und eine schnelle Kontaktmöglichkeit anzugeben.<br />

Wenn Sie verhindern möchten, dass Ihre Daten später<br />

in Suchmaschinen auftauchen, veröffentlichen Sie die Daten in<br />

einer Grafik, um sie vor Zugriff zu schützen.<br />

In jedem Fall sollten Sie Ihren Nachnamen und mindestens<br />

einen ausgeschriebenen Vornamen, Ihre Anschrift – also<br />

Straße, Hausnummer, Postleitzahl, Ort – und zur schnellen<br />

Kontaktaufnahme Ihre Rufnummer sowie, falls vorhanden, Faxnummer<br />

und die E-Mail-Adresse, angeben (s. Kasten auf s24).<br />

Die bloße Nennung von Personen, die für den Inhalt verantwortlich<br />

sind, reicht grundsätzlich nicht aus. Bei juristischen<br />

Personen sind auch die Vertretungsberechtigten aufzuführen.<br />

Wird eine handelsrechtliche Firmenbezeichnung geführt,<br />

muss die Firma vollständig angegeben werden. Besteht eine Eintragung<br />

in ein Register, etwa Handels- oder Vereinsregister,<br />

müssen Sie dieses und die entsprechende Nummer nennen.<br />

Detaillierte Auskunft von Freiberuflern<br />

Gehören Sie zu einer Berufsgruppe, die einer Berufskammer<br />

angehört, etwa Ärzte und Anwälte, müssen Sie auch diese<br />

Kammer, die Zulassungsbehörde, die gesetzliche Berufsbezeichnung<br />

und den Staat, der Ihnen diese verliehen hat, in<br />

Ihr Impressum aufnehmen. Außerdem ist ein Hinweis darauf<br />

erforderlich, welchen berufsrechtlichen Regelungen Sie<br />

unterworfen sind. Die müssen Sie über Ihre Seiten zugänglich<br />

machen; dabei genügt allerdings ein Link.<br />

Sofern Sie eine Umsatzsteuer-Identifikationsnummer haben,<br />

müssen Sie diese angeben. Regelmäßig verfügen nur Unternehmen,<br />

die Warenverkehr innerhalb der EU betreiben, über<br />

solche Nummern. Sie ist nicht mit der normalen Umsatzsteuernummer<br />

zu verwechseln. Wo und unter welchen<br />

Namen Sie die Angaben plazieren müssen, ist gesetzlich nicht<br />

genau geregelt. Sie sollen leicht erkennbar, unmittelbar erreichbar<br />

und ständig verfügbar sein. Wenn Sie diese Informationen<br />

auf die Startseite stellen, wird dies grundsätzlich den Anforderungen<br />

entsprechen. Bewährt haben sich die Bezeichnungen<br />

„Impressum“ oder „Kontakt“.<br />

Verlinkungen: Illegale Seiten sind tabu!<br />

Wer mit Links den Traffic auf seiner Webseite erhöhen will,<br />

handelt grundsätzlich rechtmäßig. Vorsicht ist jedoch geboten, k<br />

AKTUELLE URTEILE<br />

Was Webmaster wissen müssen<br />

Die acht wichtigsten Urteile zum<br />

Thema Internet-Auftritt:<br />

Disclaimer in Foren. Ein Disclaimer<br />

auf einer Meinungsforums-Webseite<br />

kann nur dann<br />

entlasten, wenn er so angebracht<br />

ist, dass Nutzer die Links<br />

nur nach Lektüre dieses Distanzierungstextes<br />

erreichen können<br />

oder wenn die jeweilige<br />

Seite einen deutlichen direkten<br />

Text zum Haftungsausschluss<br />

enthält. Ein derartiger Haftungsausschluss<br />

wirkt dann<br />

jedoch nur auf vertraglicher<br />

Grundlage und nicht gegenüber<br />

geschädigten Dritten, denen gegenüber<br />

ein ausreichend deutlicher<br />

Disclaimer allenfalls als<br />

Distanzierung anzusehen ist.<br />

Oberlandesgericht München<br />

Aktenzeichen: 21 U 5569/01<br />

Markenschutz und Domains.<br />

Wird eine Domain registriert<br />

und genutzt, bevor eine gleichlautende<br />

Marke eingetragen<br />

wird, kommen Ansprüche aus<br />

§ 14 Abs. 2 Nr. 2 Marken-Gesetz<br />

wegen der Nutzung des Markennamens<br />

in einem Domain-<br />

Namen nicht in Betracht. Jedoch<br />

muss bereits vor der Markeneintragung<br />

ein eigenes Kennzeichenrecht<br />

an der Bezeichnung<br />

entstanden sein.<br />

Landgericht Stuttgart<br />

Aktenzeichen: 41 O 45/01<br />

Verlinkung zu Verbänden.<br />

Wer auf seiner Homepage Links<br />

zu Verbänden setzt, denen er<br />

nicht selbst angehört, führt<br />

damit die Internet-Nutzer nicht<br />

in die Irre. Links, die kommentarlos<br />

in einer gleichnamigen<br />

Rubrik aufgelistet seien,<br />

würden keine besondere geschäftliche<br />

Verbindung zu den<br />

genannten Firmen oder Verbänden<br />

nahelegen.<br />

Oberlandesgericht Thüringen<br />

Aktenzeichen: 2 U 1234/02<br />

Domain-Grabbing. Wer eine<br />

Domain anmeldet, bevor ein<br />

anderer diesen Namen markenrechtlich<br />

schützen lässt, ist kein<br />

Domain-Grabber. Die Marke<br />

konnte zu diesem Zeitpunkt weder<br />

der Allgemeinheit noch dem<br />

Domain-Inhaber bekannt sein.<br />

Die Registrierung der Domain<br />

schädigt daher auch nicht den<br />

Marken-Inhaber. Ebenso kann es<br />

zu diesem Zeitpunkt nicht das<br />

Ziel des Domain-Inhabers gewesen<br />

sein, den späteren Marken-<br />

Inhabern diese Adresse vorzuenthalten<br />

oder nur gegen Entgelt<br />

zur Verfügung zu stellen.<br />

Oberlandesgericht Zweibrücken<br />

Aktenzeichen: 4 U 59/02<br />

Boykott-Aufrufe. Wer im Internet<br />

zu Wettbewerbszwecken<br />

unwahre, die fremde Firma<br />

schädigende Tatsachen behauptet<br />

oder verbreitet, handelt<br />

wettbewerbswidrig – auch wenn<br />

er nicht schuldhaft handelt.<br />

Landgericht Düsseldorf<br />

Aktenzeichen: 12 O 311/01<br />

Anbieterkennzeichnung. Wer<br />

Waren oder Dienstleistungen im<br />

Internet anbietet, muss seinen<br />

Namen, seine Anschrift sowie<br />

den Niederlassungsort der Unternehmung<br />

angeben. Pflicht<br />

sind auch Angaben zur schnellen<br />

elektronischen Kontaktaufnahme<br />

oder zur unmittelbaren<br />

Kommunikation sowie die Angabe<br />

der Umsatzsteuer-Identifikationsnummer.<br />

Landgericht Düsseldorf<br />

Aktenzeichen: 12 O 310/03<br />

Beleidigungen im Internet.<br />

Beleidigende Äußerungen geben<br />

dem Verletzten einen Anspruch<br />

auf Unterlassung und Schadenersatz<br />

auch dann, wenn die<br />

Äußerungen auf einer Internet-Seite<br />

erfolgen.<br />

Landgericht Coburg<br />

Aktenzeichen: 21 O 595/02<br />

E-Mail-Adresse ist kein Spam-<br />

Grund. Nur weil man eine E-Mail-<br />

Adresse unterhält, kann daraus<br />

nicht auf das allgemeine Einverständnis<br />

für jede E-Mail-Werbung<br />

geschlossen werden. Die<br />

unaufgeforderte Übersendung<br />

von E-Mail-Werbung kann sowohl<br />

einen Eingriff in den eingerichteten<br />

und ausgeübten Gewerbebetrieb<br />

des Umworbenen darstellen<br />

als auch einen Eingriff in<br />

sein allgemeines Persönlichkeitsrecht.<br />

Der Eingriff ist schon dann<br />

als rechtswidrig anzusehen,<br />

wenn der Werbende das Einverständnis<br />

des Umworbenen nicht<br />

nachweisen kann.<br />

Kammergericht Berlin<br />

Aktenzeichen: 5 U 6727/00<br />

CHIP | PROFESSIONELL<br />

25


26<br />

AKTUELL | PLANEN k Recht | AUFBAU | SPECIAL | OPTIMIEREN |<br />

wenn der Eindruck entstehen kann, die Inhalte der Links<br />

gehörten zur Webseite. Strafbar ist die Verlinkung mit rechtswidrigen<br />

Webseiten und Downloads.<br />

Problematisch sind Inline-Links, die den wahren Urheber<br />

verschleiern, weil sie in einem Frame erscheinen. Wer keine Nutzungserlaubnis<br />

vorweisen kann, muss mit einer Unterlassungsklage<br />

des Urhebers und einer Geldbuße rechnen. So hat das<br />

Landgericht Lübeck (AZ: 11 S4/98) die Aneignung fremder<br />

Seiten via Frame untersagt und Link-Setzer für rechtswidrige<br />

Werbeaussagen haften lassen.<br />

Distanzieren Sie sich von externen Links!<br />

Gefährlich wird es, wenn der fremde Inhalt, auf den man verlinkt,<br />

Personen beleidigt oder Pornographie enthält. Wer solche<br />

Links in Kenntnis der Inhalte setzt, handelt nach Ansicht des<br />

Landgerichts Hamburg vorsätzlich (AZ: 312 O 85/98). Der Verweis<br />

auf den eigentlichen Betreiber der Seite hilft dabei ebensowenig<br />

wie die Behauptung, vom Inhalt der inkriminierten Seite<br />

keine Kenntnis gehabt zu haben. Wer sich gegen strafbare<br />

Veränderungen der verlinkten Seiten absichern will, sollte sich<br />

auf jeden Fall schriftlich von den Inhalten des Links ausdrücklich<br />

distanzieren und regelmäßig kontrollieren.<br />

Zum Thema Kinderpornographie beispielsweise hat das<br />

Bayerische Oberste Landesgericht (AZ: 5 StRR 122/2000) ein<br />

rigoroses Urteil gesprochen: Nicht nur der Betreiber dieser Seite<br />

muss den Kopf hinhalten, sondern auch derjenige, der auf sie<br />

verlinkt. Bei Kenntnis der rechtswidrigen Verlinkung auf solche<br />

Seiten sind demzufolge unverzüglich eigene – nachweisbare –<br />

Bemühungen einzuleiten.<br />

Niemals auf illegale Download-Quellen verlinken!<br />

Links auf Download-Adressen mit gecrackter Software interpretieren<br />

Gerichte als strafbares Verbreiten und Anbieten<br />

von Raubkopien. Zudem kann das geschädigte Unternehmen<br />

erhebliche Schadenersatzsummen von dem Webseite-Betreiber<br />

fordern. Das Gleiche gilt für das Versenden von E-Mails<br />

mit rechtswidrigen Links. Auch das Weiterleiten solcher<br />

Mails, die häufig in englischer Sprache verfasst sind und<br />

Links auf pornographische Seiten enthalten, ist grundsätzlich<br />

nicht erlaubt.<br />

DIE GEMA KASSIERT NICHT IMMER: Auf www.bluevalley-filmmusik.de<br />

haben Sie Zugriff auf mehr als 2.000 GEMA-freie<br />

Musiktitel – ideal für private und professionelle Anwender.<br />

CHIP | PROFESSIONELL<br />

KORREKTER DISCLAIMER: Auf der Seite www.disclaimer.de<br />

finden Sie einen kostenlosen Haftungsausschluss-Text,<br />

den Sie per <strong>HTML</strong>-Code in Ihre Webseite einbauen können.<br />

Rechtswidrig kann das Kopieren von größeren Link-Sammlungen,<br />

etwa von Internet-Portalen, sein. Denn dabei kann es<br />

sich um Datenbanken im Sinne des Urheberrechts handeln, die<br />

vor der Vervielfältigung, Verbreitung oder öffentlichen Wiedergabe<br />

ohne Zustimmung des Urhebers geschützt sind. Nach Ansicht<br />

des Landgerichts Köln (AZ: 28 O 527/98) können einer<br />

Link-Sammlung große Investitionen zugrundeliegen.<br />

Nur mit Erlaubnis: Fotos von Privatpersonen<br />

Fotos von Privatpersonen, beispielsweise Ihrer Freundin oder<br />

von Urlaubsbekanntschaften, dürfen Sie grundsätzlich nur mit<br />

deren Einwilligung veröffentlichen. Abbildungen von sogenannten<br />

Personen der Zeitgeschichte, etwa Politikern oder<br />

Schauspielern, können Sie dagegen veröffentlichen, wenn das<br />

Foto im Zusammenhang mit einem zeitgeschichtlichen Ereignis<br />

steht und keine gegenläufigen Interessen einer solchen Veröffentlichung<br />

entgegenstehen.<br />

Auch bei Bildern von Prominenten ist zu beachten, dass diesen<br />

grundsätzlich das Recht am eigenen Bild zusteht; darüber<br />

dürfen Sie nicht ohne deren Einwilligung verfügen. Auch bei<br />

Fotomontagen ist auf jeden Fall Vorsicht geboten.<br />

Clipart-Sammlungen: Urheberrecht prüfen<br />

Oft findet man in Software-Bundles sogenannte Clipart-Sammlungen.<br />

Auch an dieser Stelle gilt: Bilder, Cliparts und Grafiken<br />

sind regelmäßig urheberrechtlich geschützt, selbst wenn nicht<br />

ausdrücklich auf die Urheberrechte hingewiesen wird. Solche<br />

geschützten Bilder dürfen Sie grundsätzlich nur zum privaten<br />

Gebrauch verwenden. Eine Veröffentlichung auf der eigenen<br />

Homepage deckt diese Erlaubnis häufig nicht ab – zumindest<br />

dann nicht, wenn viele Internet-Nutzer die Grafiken aufrufen.<br />

Erkundigen Sie sich also besser vor der Verwendung, ob Sie<br />

die Bilder auch wirklich auf Ihrer Webseite nutzen dürfen.<br />

Anders verhält es sich bei Bildersammlungen, die speziell zur<br />

Gestaltung von Webseiten angeboten werden. In der Regel sind<br />

solche Bilder zwar frei nutzbar, sehen Sie aber trotzdem auf der<br />

Packung, im Handbuch, in den Allgemeinen Geschäftsbedingungen<br />

(AGB) oder den Online-Nutzungsbestimmungen nach.


DER EXPERTEN-TIPP VON MICHAEL SCHWEIZER<br />

Vorsicht beim Einsatz von Meta-Tags!<br />

Ein Internet-Auftritt – insbesondere,<br />

wenn er nicht nur rein privaten<br />

Interessen dient – kann eine<br />

Vielzahl von rechtlichen Fragen<br />

aufwerfen. Interessant ist in diesem<br />

Zusammenhang natürlich<br />

auch, wie man möglichst viele<br />

Besucher auf seine Seite lockt.<br />

Je mehr neue Seiten im Web hinzukommen,<br />

desto härter wird der<br />

Kampf um die Besucher.<br />

Viele Betreiber versuchen, mit<br />

sogenannten Meta-Tags den Traffic<br />

auf der Webseite zu erhöhen<br />

und Surfer gezielt mit falschen<br />

Versprechungen zu lenken. Meta-Tags<br />

werden üblicherweise dazu<br />

verwendet, um Suchmaschinen<br />

die Einordnung einer Website<br />

zu erleichtern. Es handelt sich also<br />

quasi um selbstgewählte Stich-<br />

wörter oder Beschreibungen der<br />

jeweiligen Webseite, die von den<br />

Suchmaschinen ausgelesen werden<br />

können.<br />

Die Meta-Tags selbst sind für<br />

den Besucher der Webseite nicht<br />

sichtbar, jedoch Bestandteil des<br />

Quellcodes der Webseite. Statt<br />

der Meta-Tags greifen manche<br />

Betreiber zu dem Trick, auf der<br />

Webseite beschreibende Begriffe<br />

in sehr kleiner Schrift oder in der<br />

Farbe des Hintergrund einzufügen<br />

(„hidden text“). Die sind<br />

dann für den Besucher im Regelfall<br />

nicht zu erkennen, sehr<br />

wohl aber für die Suchmaschinen<br />

im Internet.<br />

Diese Verwendung von Meta-<br />

Tags oder versteckten Begriffen<br />

Es ist nämlich schon vorgekommen, dass die Nutzung der<br />

Cliparts lediglich für gedruckte Medien gestattet, für die Veröffentlichung<br />

im Internet vom Hersteller aber ausdrücklich verboten<br />

war.<br />

Nicht geschützt sind dagegen einfache Piktogramme, wenn<br />

sie nicht eine sogenannte Schöpfungshöhe erreichen und somit<br />

nicht als eigenes Werk gelten.<br />

Musik auf der Seite: Erstmal die GEMA fragen<br />

Auch Musikstücke sind grundsätzlich urheberrechtlich geschützt<br />

– selbst dann, wenn Sie nur ein paar Takte entnehmen,<br />

um Ihre Webseite multimedial zu gestalten. Etwas anderes gilt<br />

jedoch in Fällen, in denen der Urheberrechtsschutz bereits abgelaufen<br />

ist oder in denen Sie das Stück so verfremden, dass ein<br />

neues, eigenes Werk entsteht. Unproblematisch ist es auch, wenn<br />

Sie nur Komponenten entnehmen, die nicht melodietragend<br />

sind, beispielsweise Bässe.<br />

Tipp: Nehmen Sie am besten mit der Gesellschaft für musikalische<br />

Aufführungs- und mechanische Vervielfältigungsrechte<br />

(GEMA) Kontakt auf, bevor Sie Musikstücke auf Ihrer Webseite<br />

verwenden.<br />

Kunstwerke auf der Homepage<br />

Auch bei Gemälden, Grafiken und anderen Kunstwerken bestehen<br />

grundsätzlich Urheberrechte. Sie dürfen also nicht einfach<br />

ein solches Werk zum Hintergrundbild Ihrer Webseite<br />

machen. Insbesondere bei aktueller und unbekannter Kunst ist<br />

Vorsicht geboten: Es darf auf gar keinen Fall der Eindruck entstehen,<br />

dass Sie sich das Werk zueigen machen.<br />

Bei alten Meisterwerken, zum Beispiel der „Mona Lisa“, verletzten<br />

Sie dagegen kein Urheberrecht, denn das erlischt 70 Jahre<br />

ist grundsätzlich nicht verboten.<br />

Achten Sie aber unbedingt darauf,<br />

dass Sie bei der Benutzung<br />

von Meta-Tags & Co. – gerade bei<br />

gewerblichen Angeboten – nicht<br />

Markennamen unbefugt zur Anlockung<br />

gebrauchen oder sonst<br />

wettbewerbswidrig handeln.<br />

Wichtig: Die Verwendung eines<br />

Markenzeichens beziehungsweise<br />

Markennamens in den Meta-<br />

Tags einer Internet-Seite kann die<br />

Verwechslungsgefahr und damit<br />

die markenrechtliche Unzulässigkeit<br />

begründen.<br />

Wie das Oberlandesgericht<br />

München urteilte (AZ: 6 U 4123/<br />

99), reicht schon die Verwechslungseignung<br />

zur Begründung der<br />

markenrechtlichen Unzulässigkeit<br />

aus.<br />

EXPERTE<br />

Rechtsanwalt<br />

Michael Schweizer<br />

und sein Team aus<br />

der Kanzlei Prof.<br />

Schweizer stehen<br />

Ihnen jederzeit unter<br />

den folgenden Kontaktdaten<br />

zu allen<br />

rechtlichen Fragen zur Verfügung. Leserbriefe<br />

an die Redaktion richten Sie bitte<br />

per E-Mail an die Adresse recht@chip.de.<br />

Die Beantwortung individueller Rechtsfragen<br />

ist aber nach dem Gesetz den Anwälten<br />

vorbehalten und darf auch nicht<br />

kostenlos erfolgen. Um Ihnen dennoch umfassend<br />

helfen zu können, hat CHIP mit<br />

der Kanzlei Prof. Schweizer günstige Konditionen<br />

vereinbart – exklusiv für CHIP-<br />

Leser. Bereits ab 48 Euro erhalten Sie<br />

beispielsweise eine Erstberatung zu Ihrem<br />

individuellen Fall mit einer Einschätzung<br />

der Rechtslage und Tipps zum weiteren<br />

Vorgehen. Mehr Informationen finden Sie<br />

unter www.chip.de/recht.<br />

k www.chip.de/recht<br />

nach dem Tod des Urhebers. Sicherheitshalber sollten Sie aber<br />

die Quelle angeben. Unbedenklich ist, wenn Sie ein Kunstwerk<br />

– ob neu oder alt – so stark verfremden, dass es mit dem Original<br />

nicht zu verwechseln ist, also durch die Bearbeitung ein<br />

neues Werk entsteht und die ursprüngliche Schöpfung des<br />

Künstlers nicht mehr erkennbar ist.<br />

Achtung: Von der zulässigen völligen Verfremdung ist die<br />

verbotene Bearbeitung zu unterscheiden. Nicht erlaubt ist in<br />

diesem Sinne die Bearbeitung, Umgestaltung oder Verunstaltung<br />

des geschützten Originals, wenn es als solches noch erkennbar<br />

bleibt – wenn Sie also zum Beispiel einem Frauenporträt<br />

einen Schnurrbart anmalen.<br />

Provider-Wechsel: Nicht ohne Ihre Domain!<br />

Streitigkeiten mit Internet-Service-Providern sind für viele<br />

Kunden an der Tagesordnung. Doch wer aus Protest gegen<br />

schlechte Leistungen verspätet oder gar nicht zahlt, setzt unter<br />

Umständen seine Domain aufs Spiel.<br />

Im Clinch mit dem Service-Provider zieht der Kunde zumeist<br />

den Kürzeren. Wer etwa noch eine Rechnung offenhat, läuft<br />

Gefahr, dass bei einem Provider-Wechsel die Domain nicht auf<br />

ihn übertragen wird. Gerade kleine Provider versuchen, mit<br />

solchen Mitteln Geld einzutreiben, und lassen die Domains auf<br />

sich umschreiben.<br />

Mit diesem eigenmächtigen Vorgehen ist ein Service-Provider<br />

vor dem Landgericht Coburg gescheitert (AZ: 22 O 9/01).<br />

Solche Machenschaften, so die Richter, seien ein Verstoß gegen<br />

das Namensrecht nach §12 des Bürgerlichen Gesetzbuchs<br />

(BGB). Dem Provider wurde untersagt, die fremde Domain nur<br />

noch über seine Webseite aufrufen zu lassen.<br />

Michael Schweizer, Andreas Vogelsang<br />

CHIP | PROFESSIONELL<br />

27


28<br />

AKTUELL | PLANEN k Web-Editoren | PLANEN | SPECIAL | OPTIMIEREN |<br />

Was die aktuellen Web-Editoren leisten<br />

Für Allrounder und Puristen<br />

Wer sich mit professionellem Web-Design beschäftigt, kann zwischen zahlreichen leistungs- und funktionsstarken<br />

Editoren wählen. Letztlich entscheiden aber immer Ihre individuellen Zielsetzungen. CHIP sagt Ihnen, was Sie<br />

wissen müssen, um zwischen den Werkzeugen für Allrounder und Puristen die richtige Entscheidung zu treffen.<br />

k<br />

Jeder Web-Designer benötigt einen Editor, der in erster<br />

Linie seinen individuellen Anforderungen und Aufgabenstellungen<br />

gerecht wird. Doch neben den Investitionskosten<br />

für das Programm spielt natürlich auch der Zeitfaktor,<br />

der für die Einarbeitung in die jeweilige Software erforderlich<br />

ist, eine große Rolle.<br />

Und spätestens bei der täglichen Arbeit taucht dann die<br />

Frage auf, wie effizient und ökonomisch sich wichtige Projekte<br />

realisieren lassen. Um Ihnen die Kaufentscheidung zu erleichtern,<br />

hat CHIP die bekanntesten Web-Editoren auf ihre<br />

Eignung für bestimmte Aufgabenstellungen und Einsatzgebiete<br />

abgeklopft.<br />

Macromedia Dreamweaver MX 2004 Das Multitalent<br />

Web-Designer mit höchsten Ansprüchen kommen bei dieser<br />

Software voll auf ihre Kosten. Das Programm bietet alles, was<br />

Sie von einem professionellen Editor erwarten. Dreamweaver<br />

darf deshalb zu Recht als einer der leistungsfähigsten und<br />

beliebtesten Editoren bezeichnet werden, die derzeit auf dem<br />

Markt erhältlich sind.<br />

Die Arbeitsumgebung von Dreamweaver bietet Entwicklern,<br />

Designern und Programmierern gleichermaßen eine gemeinsame<br />

Plattform für die Realisierung komplexer, dynamischer<br />

Web-Projekte. Die Software unterstützt alle gängigen<br />

Standards und bietet ein Optimum an Freiheit bei der Konzeption<br />

und Gestaltung. Leistungsfähige Entwicklungs-Tools<br />

für Webpage-Scripting und Server-Technologie sind selbstverständlich<br />

integriert.<br />

In der aktuellen Version wurden insbesondere die Leistungsfähigkeit<br />

der Unterstützung von Cascading Style Sheets<br />

(CSS) und die automatische Browser-Kompatibilitätsprüfung<br />

erweitert. S-FTP bietet nun vollständig verschlüsselte Datenübertragungen.<br />

Hilfreich bei der täglichen Arbeit ist auch das<br />

verbesserte Copy & Paste-Verfahren. Insgesamt hat Macromedia<br />

zahlreiche Detailverbesserungen integriert, die eine bereits sehr<br />

gute Software noch besser machen.<br />

CHIP | PROFESSIONELL<br />

k DVD Demoversionen<br />

k Web-Editoren Auf Heft-DVD finden Sie die aktuellen Trial-<br />

Versionen der Top-Web-Editoren Adobe GoLive CS, Macromedia<br />

Dreamweaver 2004 MX, Macromedia HomeSite 5.5<br />

und in der Rubrik <strong>HTML</strong>-Editoren Namo WebEditor Suite 6.<br />

k Erweiterungen Unter Demoversionen finden Sie zehn<br />

originale Erweiterungen für Dreamweaver und Flash.<br />

WEGWEISER<br />

Wer braucht welchen Web-Editor?<br />

k Allround-Entwickler<br />

Dreamweaver MX 2004 s28<br />

GoLive CS s28<br />

FrontPage 2003 s29<br />

Namo WebEditor 6 Suite<br />

k Grafiker und Designer<br />

s30<br />

GoLive CS s28<br />

Fusion 8<br />

k Verwalter umfangreicher Websites<br />

s29<br />

FrontPage 2003<br />

k <strong>HTML</strong>-Puristen und Programmierer<br />

s29<br />

HomeSite 5.5 s30<br />

Dreamweaver MX 2004<br />

k Übersichtstabelle<br />

s28<br />

Funktionsübersicht<br />

k Funktionshungrige Sparfüchse<br />

s31<br />

1st Page 2000 Freeware (auf DVD)<br />

Phase 5 Freeware (auf DVD)<br />

Fazit: Dreamweaver bietet eine äußerst mächtige Entwicklungsumgebung,<br />

die nahezu jedem Anspruch gerecht wird. Die<br />

zwangsläufig längere Einarbeitungsphase zahlt sich schnell aus.<br />

Durch die grafischen, intuitiven Layout-Funktionen behalten<br />

Sie jederzeit das Design im Auge, und mit dem integrierten<br />

Code-Editor HomeSite+ beherrschen Sie den Quellcode.<br />

Tipp: Mit Macromedia Studio MX 2004 erhalten Sie Dreamweaver<br />

MX 2004 im Komplettpaket mit Flash MX 2004,<br />

Fireworks MX 2004, Freehand MX und ColdFusion MX.<br />

Adobe GoLive CS Der Kreativkünstler<br />

GoLive CS gehört gemeinsam mit Dreamweaver der Königsklasse<br />

unter den Web-Editoren an. Das Programm, das Provider<br />

wie Strato ihren Webhosting-Paketen beilegen, richtet sich traditionell<br />

an Grafiker und Designer. Diese Software bietet erstklassige<br />

Design-, Produktions-, und Verwaltungs-Tools, um anspruchsvolle<br />

Webseiten aufzubauen.<br />

Professionelle Designer entwerfen ihre Web-Projekte mit<br />

GoLive innerhalb einer kreativen Entwicklungsumgebung, die<br />

allerdings einige Zeit der Einarbeitung voraussetzt. Absolute<br />

Freiheit bei Konzeption und Gestaltung, optimaler Workflow,<br />

innovative Entwicklungs-Tools und nicht zuletzt die zukunfts-


weisende Cross-Media-Integration steigern die Produktivität<br />

bei der Arbeit mit GoLive.<br />

Leistungsstarke und produktive Design-Features der aktuellen<br />

Version sind unter anderen der vollständig überarbeitete<br />

CSS-Editor, das optimierte Codezeilen-Handling inklusive<br />

Integritätsprüfung sowie eine Site-Management-Komponente,<br />

mit der Sie die komplette Struktur und Navigation entwerfen.<br />

Fazit: GoLive bietet insbesondere für kreative Designer eine<br />

innovative Produktionsumgebung. Die breite Palette an Gestaltungsmöglichkeiten<br />

und leistungsfähigen Werkzeugen unterstützt<br />

fast alle gängigen Branchenstandards. Nach einer angemessenen<br />

Einarbeitungszeit lassen sich rasch komplexe Web-<br />

Projekte realisieren.<br />

Tipp: Mit der Adobe Creative Suite erhalten Sie GoLive CS<br />

im Komplettpaket mit Photoshop CS, Illustrator CS, InDesign<br />

CS und Acrobat 6.0 Professional.<br />

Microsoft FrontPage 2003 Der Administrator<br />

Haben Sie bereits einmal mit einer Office-Anwendung von<br />

Microsoft gearbeitet – was wahrscheinlich ist –, werden Sie<br />

keinerlei Schwierigkeiten mit FrontPage haben, denn die<br />

Benutzerführung orientiert sich stark an Word, Excel & Co.<br />

Aufgrund der kurzen Einarbeitungszeit werden Sie schnell die<br />

ersten Ergebnisse erzielen.<br />

Dynamische Elemente und interaktive Erweiterungen lassen<br />

sich ohne viel Aufwand in ein Projekt integrieren. FrontPage<br />

bietet alle erforderlichen Features für die Entwicklung interaktiver<br />

Webseiten mit professionellem Design. Eine besondere<br />

Stärke des Web-Editors von Microsoft liegt in seiner hervorragenden<br />

Seiten-Verwaltung. Insbesondere bei umfangreichen<br />

Web-Projekten erleichtert diese Seiten-Verwaltung das Management<br />

des Internet-Auftritts ungemein.<br />

Schwachstellen bietet der Editor unter anderem bei der<br />

PHP- und Perl-Unterstützung. Der größte Kritikpunkt besteht<br />

allerdings darin, dass es mit FrontPage nicht möglich ist, wirklich<br />

sauberen Code zu erzeugen, da der Quellcode von teilweise<br />

nutzlosen Formatierungen durchsetzt ist. Das ist eben<br />

der Preis, der für das Zusammenspiel mit der Office-Produktfamilie<br />

gezahlt werden muss.<br />

DREAMWEAVER MX 2004: Der Editor erfüllt aufgrund seiner<br />

durchdachten Funktionsvielfalt nahezu jeden Anspruch.<br />

ADOBE GOLIVE CS: Die kreative Entwicklungsumgebung spricht<br />

insbesondere grafisch orientierte Designer an.<br />

Fazit: FrontPage spielt seine Stärken in erster Linie als Manager<br />

umfangreicher Webseiten aus. Aufgrund der vorzüglichen<br />

Seiten-Verwaltung und leicht zugänglichen Benutzerführung ist<br />

FrontPage für Projekte dieser Art prädestiniert. Microsofts<br />

Web-Editor wird den Standard-Anforderungen des Arbeitsalltags<br />

eines Web-Designers gerecht, reicht allerdings in Sachen<br />

Innovation, Flexibilität und Komfort nicht an die Königsklasse<br />

von Dreamweaver oder GoLive heran.<br />

NetObjects Fusion 8 Der Turbo-Designer<br />

Fusion eignet sich für alle, die eine Webseite schnell und unkompliziert<br />

gestalten und dafür möglichst wenig Aufwand und<br />

Einarbeitungszeit opfern wollen. Die bekommen mit Fusion ein<br />

gut abgestimmtes Komplettpaket zur Entwicklung, Verwaltung<br />

und Vermarktung von Webseiten. Die Software bietet eine<br />

visuelle Design-Umgebung, mit der per Drag & Drop einzelne<br />

Objekte rasch zu einer Webseite zusammengefügt werden. Vorgefertigte<br />

SiteStyles aus Business und anderen Bereichen und<br />

der Site-Assistent helfen beim Bau hochwertiger Webseiten.<br />

In der aktuellen Version bietet Fusion eine integrierte Bildbearbeitung,<br />

mit der Sie Grafiken und Bilder direkt in der k<br />

NETOBJECTS FUSION 8: Das Programm führt Sie schnell und<br />

effizient zu ansprechenden Ergebnissen.<br />

CHIP | PROFESSIONELL<br />

29


30<br />

AKTUELL | PLANEN k Web-Editoren | PLANEN | SPECIAL | OPTIMIEREN |<br />

Software bearbeiten können. Der Komponenten-Manager erlaubt<br />

den schnellen Zugriff auf alle wichtigen Werkzeuge. Die<br />

eingebundenen Datenbankwerkzeuge und E-Commerce-Lösungen<br />

verkürzen den Weg für die Entwicklung kommerzieller<br />

Webseiten enorm.<br />

Fazit: Mit Fusion gestalten Sie schnell und effizient hochwertige<br />

professionelle Webseiten im Baukastensystem. Die einfache und<br />

intuitive Benutzerführung lässt kaum Anwendungsfehler aufkommen<br />

und hält die Einarbeitungszeit erfreulich kurz. Web-<br />

Designer, die grafisches und objektorientiertes Arbeiten bevorzugen,<br />

treffen mit Fusion eine gute Wahl.<br />

Macromedia HomeSite 5.5 Der Codezeilen-Profi<br />

HomeSite ist in der <strong>HTML</strong>-Szene ein Urgestein. Der Editor<br />

befriedigt die Bedürfnisse von professionellen Programmierern<br />

bereits seit langer Zeit auf vorbildliche Weise. Ein unbestreitbarer<br />

Pluspunkt der Software liegt nach wie vor in dem sauberen<br />

und schlanken Code, den der Editor erzeugt.<br />

HomeSite ist quasi das direkte Gegenstück zu GoLive oder<br />

Fusion, denn Sie arbeiten nicht mit grafischen Objekten,<br />

sondern direkt im Quellcode der Webseite. Dabei unterstützt Sie<br />

eine Vielzahl an sinnvollen und hilfreichen Funktionen und<br />

Werkzeugen. Diese Software ist für den Profi die erste Wahl,<br />

wenn es um textbasierte <strong>HTML</strong>-Editoren geht.<br />

In der aktuellen Version folgen alle Coding-Funktionen<br />

den Spezifikationen von X<strong>HTML</strong>, und alle wichtigen Tech-<br />

EXTENSIONS<br />

Fotoalbum für Dreamweaver<br />

Extensions erweitern den Funktionsumfang<br />

von Dreamweaver<br />

beträchtlich. Auf der Heft-DVD<br />

finden Sie einige wichtige Erweiterungen<br />

im Ordner „Demoversionen“.<br />

Klicken Sie auf die<br />

entsprechende Datei und installieren<br />

Sie diese über den<br />

Extension Manager.<br />

Web Photo Album 2.2.6 Diese<br />

Extension für das automatische<br />

Anlegen von Web-Fotoalben<br />

starten Sie in Dreamweaver<br />

über |Befehle|Create Web Photo<br />

Album 2.2.|. Die Version 2.2.6<br />

erweitert den Umfang des vorinstallierten<br />

MX-Albums um<br />

zahlreiche neue Features. Neben<br />

15 englischen Templates<br />

wurde die bislang eher schlichte<br />

Thumbnail-Seite stark aufgewertet:<br />

Die Vorschaubilder erhalten<br />

ein eigenes Template und<br />

können separat bearbeitet werden.<br />

Benutzer von Fireworks MX<br />

2004 können die Bilder jetzt<br />

auch automatisch optimieren<br />

und drehen.<br />

CHIP | PROFESSIONELL<br />

Demoversionen<br />

Clean Up FrontPage Wer Front-<br />

Page-Projekte in Dreamweaver<br />

bearbeitet, entfernt über |Befehle|Clean<br />

Up FrontPage <strong>HTML</strong><br />

Sitewide| für Einzelseiten oder<br />

die komplette Seite automatisch<br />

lästige <strong>HTML</strong>-Tags und<br />

Kommentare aus dem Code von<br />

FrontPage. Der Import der lokal<br />

abgelegten FrontPage-Seiten<br />

gelingt mit dem Assistenten der<br />

Extension „Import FrontPage<br />

Site“ spielend über das Menü<br />

|Site|.<br />

Course Builder Dieses mächtige<br />

Produktpaket für MX 2004<br />

wurde von Macromedia für Profis<br />

entwickelt, um Instruktionen<br />

plattformunabhängig zu entwickeln.<br />

Über |Einfügen|Course<br />

Builder Interaction| fügen Sie<br />

40 Interaktionen wie etwa<br />

Multiple-Choice-Abfragen ein.<br />

Learning Site Über |Site|Create<br />

Learning Site| erreichen Sie<br />

diese vordefinierte englischsprachige<br />

Seite zur Gestaltung<br />

eines eLearning-Auftritts.<br />

NAMO WEBEDITOR 6 SUITE: Das Programm überzeugt durch<br />

eine ausgesprochen übersichtliche Bedienoberfläche.<br />

nologiestandards werden unterstützt. Die WYSIWYN-Oberfläche<br />

(„What you see ist what you need“) bietet alle Elemente,<br />

die Sie als Web-Entwickler benötigen. Noch schneller und komfortabler<br />

geht die Arbeit von der Hand, wenn Sie die Entwicklungsumgebung<br />

an Ihre persönlichen Erfordernisse anpassen<br />

und einzelne Funktionen gezielt modifizieren.<br />

Fazit: Arbeiten Sie bevorzugt innerhalb einer grafischen, objektorientierten<br />

Entwicklungsumgebung, sind Sie bei HomeSite<br />

an der falschen Adresse. Dagegen können professionelle Programmierer<br />

kaum eine bessere Wahl treffen, denn schnelle<br />

Ergebnisse und sauberer Code sind garantiert. In der modifizierten<br />

Version HomeSite+ ist der Editor übrigens auch in<br />

Dreamweaver MX 2004 integriert.<br />

Namo WebEditor 6 Suite Der Allrounder<br />

Der koreanische Web-Editor Namo bietet fast alle Funktionen<br />

und Werkzeuge, die man für wirklich professionelles Web-<br />

Design benötigt. Die sind in eine übersichtliche und leicht<br />

zugängliche Arbeitsumgebung integriert. Nach einer relativ<br />

kurzen Einarbeitungszeit lassen sich rasch die ersten erfolgreichen<br />

Ergebnisse erzielen.<br />

Die Arbeitsoberfläche ist in drei Teilbereiche gegliedert:<br />

Design- bzw. <strong>HTML</strong>-Editor und Browser-Vorschau. Diese Anordnung<br />

gewährleistet die volle Kontrolle über die einzelnen<br />

Arbeitsabläufe. Der handliche Editor begeistert zudem durch<br />

eine Vielzahl an mitgelieferten Vorlagen und vorgefertigten<br />

grafischen Elementen.<br />

Ein integriertes Grafik-Tool erlaubt die grundlegende Grafikbearbeitung<br />

direkt im Editor. Mit Entwicklungs-Tools für<br />

Webpage-Scripting und Datenbank-Technologie lassen sich<br />

diese und viele weitere Elemente auf einfache Art und Weise<br />

in Ihre Web-Projekte einbauen.<br />

Fazit: Im Kreis der Web-Editoren ist Namo ein wirklicher Allrounder.<br />

Zu einem erfreulich günstigen Preis bietet Namo<br />

einen Funktionsumfang und Bedienkomfort, wie man ihn sonst<br />

nur von deutlich teureren Produkten kennt. Suchen Sie eine<br />

kostengünstige Alternative zu Dreamweaver oder FrontPage,<br />

sind Sie mit Namo an der richtigen Adresse. Eine Demoversion<br />

finden Sie auf der Heft-DVD. Peter Filinski


WEB-EDITOREN IM ÜBERBLICK<br />

Produkt<br />

Anbieter<br />

Internet<br />

Betriebssystem<br />

Herstellerpreis<br />

(Vollversion/<br />

Update)<br />

Funktionen<br />

Vorlagen<br />

(Templates)<br />

Code-<br />

Bibliotheken<br />

Codepage-Auswahl<br />

WYSIWYG/<br />

Quellcode analog<br />

Vorschau<br />

intern/extern<br />

Suchen &<br />

Ersetzen<br />

Syntax-Check<br />

Link-Check<br />

Makro-Funktion<br />

Rechtschreibprüfung<br />

Integrierte<br />

Bildbearbeitung<br />

Upload FTP/<br />

S-FTP<br />

<strong>HTML</strong> 3.2/4.01<br />

X<strong>HTML</strong><br />

Tabellen statisch/<br />

dynamisch<br />

Layout-Tabellen<br />

CSS-Editor<br />

visuell/Code<br />

Syntax-<br />

Hervorhebung<br />

Syntax-Zusammenfassung<br />

Tag-Ergänzung<br />

Server-Technologie<br />

Datenbank-<br />

Assistent<br />

JavaScript-<br />

Assistent<br />

Bewertung<br />

Einarbeitungszeit<br />

Preis-Leistungs-<br />

Verhältnis<br />

Handling<br />

Management<br />

WYSIWYG<br />

Quellcode<br />

X<strong>HTML</strong><br />

CSS<br />

Datenbank-<br />

Anbindung<br />

Layout- & Design-<br />

Unterstützung<br />

Teamfunktionalität<br />

Dreamweaver<br />

MX 2004<br />

Macromedia<br />

www.macromedia.<br />

com<br />

Windows /<br />

Mac OS X<br />

555 Euro / 277 Euro<br />

Demo auf Heft-DVD!<br />

●<br />

●<br />

●<br />

●<br />

–/●<br />

●<br />

●<br />

●<br />

●<br />

●<br />

●<br />

●/●<br />

●/●<br />

●<br />

●/●<br />

●<br />

–/●<br />

●<br />

●<br />

●<br />

ASP, ASP.NET, CF,<br />

JSP, PHP<br />

●<br />

–<br />

hoch<br />

GoLive CS<br />

Adobe<br />

www.adobe.<br />

com<br />

Windows /<br />

Mac OS X<br />

555 Euro / 239 Euro<br />

Demo auf Heft-DVD!<br />

●<br />

●<br />

●<br />

●<br />

●/●<br />

●<br />

●<br />

●<br />

●<br />

●<br />

–<br />

●/–<br />

●/●<br />

●<br />

●/●<br />

●<br />

●/●<br />

●<br />

–<br />

●<br />

–<br />

–<br />

●<br />

hoch<br />

-<br />

FrontPage 2003<br />

Microsoft<br />

www.microsoft.<br />

com<br />

Windows<br />

280 Euro / 130 Euro<br />

●<br />

–<br />

●<br />

●<br />

●/●<br />

●<br />

●<br />

●<br />

●<br />

●<br />

●<br />

●/–<br />

●/●<br />

–<br />

●/●<br />

●<br />

–/●<br />

●<br />

–<br />

●<br />

ASP, ASP.NET<br />

●<br />

–<br />

niedrig<br />

Fusion 8<br />

= sehr gut, = gut, = befriedigend, = schlecht, = sehr schlecht<br />

NetObjects<br />

www.netobjects.<br />

com<br />

199 Euro / 109 Euro<br />

●<br />

–<br />

●<br />

–<br />

●/●<br />

●<br />

●<br />

●<br />

*<br />

●<br />

●<br />

●/●<br />

●/●<br />

–<br />

●/●<br />

–<br />

●/–<br />

●<br />

–<br />

–<br />

ASP, CF, PHP<br />

●<br />

–<br />

moderat<br />

-<br />

HomeSite 5.5 Namo WebEditor 6<br />

Suite<br />

Macromedia Namo<br />

www.macromedia. www.namo.com<br />

com<br />

Windows<br />

Windows<br />

140 Euro / 40 Euro<br />

Demo auf Heft-DVD!<br />

–<br />

●<br />

●<br />

–<br />

●/●<br />

●<br />

●<br />

●<br />

●<br />

–<br />

–<br />

●/●<br />

●/●<br />

●<br />

●/●<br />

●<br />

–/●<br />

●<br />

●<br />

●<br />

–<br />

–<br />

●<br />

niedrig<br />

-<br />

-<br />

-<br />

149 Euro / kostenlos<br />

Demo auf Heft-DVD!<br />

●<br />

–<br />

●<br />

–<br />

●/●<br />

●<br />

●<br />

●<br />

●<br />

●<br />

●<br />

●/–<br />

●/●<br />

–<br />

●/●<br />

●<br />

–/–<br />

●<br />

●<br />

*<br />

ASP, JSP, PHP<br />

●<br />

●<br />

moderat<br />

-<br />

CHIP | PROFESSIONELL<br />

31


32<br />

AKTUELL | PLANEN k CMS | PLANEN | SPECIAL | OPTIMIEREN |<br />

Content-Management-Systeme im Überblick<br />

Web-Baukasten für Profis<br />

Komplexe Web-Projekte setzen nicht nur eine gute Konzeption voraus, sondern verlangen auch nach leistungsfähigen<br />

Entwicklungswerkzeugen. Abhängig vom jeweiligen Volumen stoßen Web-Editoren bei Management,<br />

Verwaltung und Inhaltspflege früher oder später an ihre Leistungsgrenzen. Dies ist der richtige Zeitpunkt für<br />

den Einsatz eines Content-Management-Systems (CMS).<br />

k<br />

Web-Editoren eignen sich für die grundlegende Entwicklung<br />

und Gestaltung eines Web-Projektes. Mit der<br />

Zeit wächst die Webseite aber immer weiter, und irgendwann<br />

verliert man den Überblick: War dies die neue oder alte Version<br />

des redaktionellen Beitrags? Wo befindet sich die gesuchte<br />

Grafik? Warum geht dieser Link ins Leere? Das angesprochene<br />

Problem potenziert sich bei Projekten, die von mehreren Mitarbeitern<br />

oder ganzen Teams betreut werden. Das Chaos nimmt<br />

zu und das einheitliche Corporate Design ab.<br />

CM-Systeme bringen Ordnung ins Chaos<br />

Mit einem Content-Management-System können umfangreiche<br />

Webseiten oder auch Intranets auf leicht zugängliche und komfortable<br />

Weise verwaltet und gepflegt werden. Einzelne Mitarbeiter<br />

können sich dank der Vergabe von strikten Zugriffsrechten<br />

vollständig auf ihre jeweiligen Aufgabengebiete und<br />

Kernkompetenzen konzentrieren, ohne sich dabei gegenseitig<br />

ins Handwerk zu pfuschen.<br />

Über integrierte Freigabeverfahren behält der jeweils Verantwortliche<br />

die Kontrolle darüber, was wirklich veröffentlicht<br />

wird. Einer der weiteren Hauptvorteile liegt zudem in der<br />

SOFTWARE-TIPPS<br />

CHIP | PROFESSIONELL<br />

strikten Trennung zwischen Design und Inhalt. Während ein<br />

Web-Editor lediglich in der Lage ist, ganze Webseiten – Layout<br />

plus Content – zu speichern, werden innerhalb von<br />

CM-Systemen die Einzelinhalte einer Webseite organisiert und<br />

verarbeitet. Der Content Manager pflegt die Inhalte ohne Vorkenntnisse.<br />

Grundlage hierfür bildet meist eine zentrale Datenbank.<br />

In dieser werden sämtliche Inhalte in den unterschiedlichsten<br />

Formaten in der jeweils aktuellsten Version bereitgehalten<br />

und auf Anfrage zur Verfügung gestellt.<br />

Das Management von Design und Layout wird davon unabhängig<br />

über Templates gesteuert. Werden Inhalte abgerufen<br />

vereinen Templates verschiedenste Datenquellen und Formate<br />

zu einem einheitlichen Ergebnis. CM-Systeme gewährleisten<br />

damit jederzeit fehlerfreie Link-Strukturen und die homogene<br />

Einhaltung von Corporate-Design-Vorgaben.<br />

Wer benötigt ein CM-System?<br />

Der Einsatz eines CM-Systems lohnt sich in erster Linie, wenn<br />

umfangreiche Webseiten und komplexe Inhalte zu verwalten<br />

sind, die häufig aktualisiert werden müssen. Ohne entsprechende<br />

Software kann eine verschachtelte Verzeichnis-<br />

Open Source: Content-Management Systeme zum Nulltarif<br />

Bis auf wenige Ausnahmen sind<br />

professionelle Content-Management-Systeme<br />

eine kostspielige<br />

Angelegenheit. Selbst bei den<br />

preiswerteren Angeboten müssen<br />

Sie mit Investitionskosten von einigen<br />

100 Euro rechnen. Aber es<br />

geht auch günstiger – nämlich zum<br />

Nulltarif!<br />

Jedoch sollten Sie bei den kostenlosenOpen-Source-CM-Systemen<br />

ihren eigenen Arbeitseinsatz<br />

berücksichtigen, da Sie die Einrichtung<br />

und alle weiteren Modifikationen<br />

selbst vornehmen müssen.<br />

Ohne profunde Kenntnisse in<br />

der jeweils zugrundeliegenden<br />

Skriptsprache (zum Beispiel ASP,<br />

Pearl, PHP oder Python) werden<br />

Sie kaum Erfolge erzielen.<br />

Selbstverständlich dürfen Sie<br />

auch mit keinem 24-Stunden-Support<br />

rechnen, der bei eventuellen<br />

Fragestellungen oder Problemen<br />

hilfreich zur Hand geht. Allerdings<br />

steht Ihnen bei einigen Open-<br />

Source-Projekten, etwa bei Typo3,<br />

eine große internationale Community<br />

meist gerne mit Rat und Tat zur<br />

Seite.<br />

Die nachfolgenden Open-Source<br />

CM-Systeme stehen Ihnen auf<br />

unserer Heft-DVD zur Verfügung:<br />

Contenido k www.contenido.de<br />

Mambo k www.mamboserver.com<br />

Typo3 k www.typo3.com<br />

PHP-Nuke k www.phpnuke.org<br />

Postnuke k www.post-nuke.net<br />

Postnuke Module k zahlreiche<br />

Erweiterungen für das CMS<br />

Web-Server-Utilities<br />

GRATIS: Mit TYPO3 bekommen Sie ein kostenloses System, das<br />

dennoch höchsten Ansprüchen genügt.


struktur mit Hunderten oder Tausenden von Einzelseiten und<br />

Elementen ansonsten nicht vernünftig administriert werden.<br />

Insbesondere wenn eine Vielzahl an Personen an dezentralen<br />

Standorten gemeinsam an einem solchen Projekt arbeiten, lohnt<br />

sich die Anschaffung eines CM-Systems.<br />

Günstige CMS im Überblick<br />

Die Zahl der verfügbaren CM-Systeme ist nahezu unüberschaubar.<br />

Jeder Hersteller verfolgt konzeptionell andere<br />

Ansätze und Schwerpunkte. Die von der jeweiligen Zielgruppe<br />

und dem damit verbundenen Funktionsumfang abhängigen Investitionskosten<br />

belaufen sich von einigen 100 Euro schnell bis zu<br />

mehreren 10.000 Euro. In der Tabelle auf der folgenden<br />

Doppelseite finden Sie eine empfehlenswerte Auswahl an Redaktionssystemen,<br />

die beim Preis-Leistungs-Verhältnis im<br />

moderaten Rahmen liegen. Für weiterführende Informationen<br />

sind jeweils die Hersteller-Webseiten angegeben. Einen guten<br />

Überblick über den derzeitigen Stand der CMS erhalten Sie auf<br />

den Content Management Days von 10. bis 11. November 2004 in<br />

Leipzig (weitere Infos unter www.contentmanager.de/cm-days).<br />

In fünf Schritten zum richtigen CMS<br />

Oliver Zschau, CMS-Experte, Berater und Chefredakteur des<br />

Content-Management-Portals www.contentmanager.de, nennt<br />

dazu die fünf wichtigen Schritte für die Auswahl des richtigen<br />

Content-Management-Systems:<br />

1. Content-Modell: Vor der eigentlichen Auswahl eines CMS<br />

notieren Sie, welche Inhalte damit verwaltet werden. Dabei spielt<br />

vor allem eine große Rolle, wie diese später verknüpft und verwaltet<br />

werden sollen. Auch die Frage nach der Mehrsprachigkeit<br />

von Inhalten sollte im Vorfeld geklärt werden. Zeichnen Sie sich<br />

ein Content-Modell auf, um alle diese Aspekte zu untersuchen.<br />

2. IT-Infrastruktur: Wo ein CMS installiert werden soll, ist in fast<br />

allen Fällen bereits Technik vorhanden. Um Kosten und Aufwand<br />

gering zu halten, sollte ein CMS zusammen mit der vorhandenen<br />

Technik und Software funktionsfähig sein und sich<br />

damit in die vorhandene IT-Infrastruktur einbinden lassen.<br />

3. Schnittstellen: Inhalte können viele Quellen haben. Ob es<br />

darum geht, eine bestehende Webseite zu importieren, Word-<br />

Dokumente weiterzubenutzen oder andere Datenbanken anzuzapfen<br />

– ein CMS muss für den Anwender die notwendigen<br />

Schnittstellen für den Import und den Export von Inhalten zur<br />

Verfügung stellen.<br />

4. Skalierbarkeit: Eine Webseite startet meist in einem überschaubaren<br />

Rahmen, mit den Seiten und Funktionen, die vorher<br />

definiert wurden. Mit der Zeit und einer steigenden Zahl von<br />

Nutzern wachsen die Anforderungen an ein CMS. Hier zeigt<br />

sich, wie zukunftssicher dieses ist. Kann es mit der steigenden<br />

Last auf dem System noch umgehen, und lassen sich auch weitergehende<br />

Funktionalitäten damit realisieren?<br />

5. Kosten: Ein CMS soll Kosten senken und kostet dennoch<br />

selbst. Auch wer ein kostenloses Open-Source-System wählt,<br />

hat einen nicht zu unterschätzenden Implementierungsaufwand.<br />

Achten Sie auf Lizenz- und auf Implementierungskosten<br />

von Systemen, denn letztere haben meist den weitaus höheren<br />

Anteil. Als Orientierung helfen hier die Referenzen der Anbieter<br />

und Erfahrungswerte von deren Kunden. Peter Filinski<br />

INTREXX XTREME<br />

Personalisierte Portale erzeugen<br />

CM leichtgemacht Intrexx Xtreme<br />

Portal Manager ist eine Entwicklungsumgebung,<br />

mit der<br />

Sie schnell und einfach Portalund<br />

Intranet-Systeme anlegen<br />

und verwalten.<br />

Die Software ermöglicht es,<br />

Portale individuell zu gestalten<br />

und über die mitgelieferten<br />

Applikationen für die eigenen<br />

Bedürfnisse zu optimieren. Alle<br />

Benutzer eines Portals können<br />

mit unterschiedlichen Rechten<br />

ausgestattet werden.<br />

Installation Das System basiert<br />

auf einer Client- und einer<br />

Server-Komponente, die sowohl<br />

für Windows als auch für Linux<br />

zur Verfügung stehen. Auch<br />

wenn beide Komponenten nicht<br />

zwingend auf dem gleichen<br />

Rechner ausgeführt werden<br />

müssen, empfiehlt sich dieses<br />

Vorgehen bei der Erst-Installation.<br />

Voraussetzung für den<br />

Betrieb des Intrexx-Xtreme-Servers<br />

ist ein installierter Webserver,<br />

etwa Apache (auf Heft-<br />

DVD unter Web-Server-Utilities).<br />

Wird der Intrexx Xtreme<br />

Portal Server mit dem Apache<br />

betrieben, muss bei der Installation<br />

der Tomcat-Servlet-<br />

Container ausgewählt und die<br />

Option „Apache-Tomcat Integration“<br />

markiert werden.<br />

Portal einrichten Führen Sie<br />

nach der Installation zuerst das<br />

Software-Update aus, um das<br />

Programm eventuell auf den<br />

neuesten Stand zu bringen. Erstellen<br />

Sie anschließend ein<br />

Vollversionen<br />

neues Portal. Um sich mit dem<br />

Programm vertrautzumachen,<br />

ist es sinnvoll, wenn Sie anfangs<br />

ein Portal auf Basis einer der<br />

Mustervorlagen einrichten. Als<br />

Datenbank dient im Standardfall<br />

die mitgelieferte Open-<br />

Source-Datenbank HSQL. Das<br />

Portal ist dank eines Assistenten<br />

in kurzer Zeit erstellt.<br />

Portal bearbeiten Sobald das<br />

Portal von Intrexx Xtreme angelegt<br />

worden ist, können Sie<br />

es in Ihrem Web-Browser betrachten.<br />

Haben Sie sich für die<br />

Vorlage „Outdoor Company“<br />

entschieden, testen Sie die drei<br />

Benutzer mit Ihren unterschiedlichen<br />

Rechten. Anschließend<br />

haben Sie die Möglichkeit,<br />

BEQUEM: Mit Intrexx Xtreme Portal Manager erstellen und<br />

administrieren Sie Portale über eine grafische Oberfläche<br />

das Portal vollständig an Ihre<br />

Vorstellungen anzupassen. Der<br />

„Schnelleinstieg“ gewährt den<br />

Zugriff auf Layout, Applikations-Design<br />

und die integrierte<br />

Benutzerverwaltung. Wählen<br />

Sie zum Beispiel den Eintrag<br />

„Menü bearbeiten“, um das<br />

Navigations-Menü Ihres Portals<br />

anzupassen.<br />

Die meisten Funktionen in<br />

Intrexx Xtreme Portal Manager<br />

sind selbsterklärend. Da das Anlegen<br />

und Administrieren von<br />

Portalen konsequent über eine<br />

grafische Oberfläche abläuft, ist<br />

die Bedienung schnell erlernt.<br />

Hinweis Für den kommerziellen<br />

Einsatz des Servers benötigen<br />

Sie entsprechende Lizenzen,<br />

die Sie auf der Hersteller-<br />

Homepage erhalten.<br />

CHIP | PROFESSIONELL<br />

33


34<br />

AKTUELL | PLANEN k CMS | PLANEN | SPECIAL | OPTIMIEREN |<br />

HERSTELLER<br />

Produkt<br />

Internet<br />

(www.)<br />

Preis<br />

Betriebssysteme<br />

Server<br />

Webserver<br />

Datenbanken<br />

Skriptsprachen<br />

Datenablage<br />

Suchfunktion<br />

Autom. Linkprüfung<br />

Versionierung<br />

Template-<br />

Editor intern/<br />

extern<br />

mehrsprachige<br />

Inhalte<br />

möglich<br />

Offene<br />

Programmierschnittstelle<br />

Zusatz-<br />

module<br />

Importfilter<br />

für<br />

Dokumente<br />

Benutzergruppen<br />

Benachrichtigungsfunktionen<br />

XML-Unterstütz.<br />

CHIP | PROFESSIONELL<br />

1000<br />

Backstage<br />

Home 2.7<br />

www.1000<br />

grad.de<br />

ab 25 Euro mtl.,<br />

ab 499 Euro<br />

Linux, Red Hat,<br />

Linux Solaris,<br />

FreeBSD, Windows<br />

2000/NT4,<br />

Macintosh OS X<br />

Apache, IIS, Zeus,<br />

beliebiger Webserver<br />

mit CGI-<br />

Funktionalität<br />

MySQL,Oracle,<br />

MSSQL, ODBC<br />

PHP4, JavaScript<br />

MySQL, SQL<br />

optional<br />

●<br />

●<br />

–<br />

●/●<br />

●<br />

Volltextsuche,<br />

Newsletter, Forum,<br />

Umfrage, Shop,<br />

Chat, Bannersystem,<br />

Grußkarten,<br />

Rating/Ranking,<br />

Termine, Persönliche<br />

Seiten. FAQ,<br />

LDAP-Authen-<br />

tication, Live-Archiv,<br />

Linkchecker (externe<br />

Links), Workflow-Manager,<br />

Workflow-Email-<br />

Benachrichtigung,<br />

Workflow-Eskalationsermittlung,Workflow-Wiedervorlage,<br />

Offene<br />

Schnittstelle zum<br />

BACKSTAGE<br />

Framework<br />

Plain-Text, <strong>HTML</strong>,<br />

Word <strong>HTML</strong>,<br />

Excel CSV, PHP<br />

Redakteur,<br />

Chefredakteur,<br />

Admin, World<br />

–<br />

k.A.<br />

Aisware Content<br />

Management<br />

System 3.0<br />

www.aisware.<br />

de<br />

ab 499 Euro<br />

Linux, Unix,<br />

Windows<br />

NT/200x<br />

Apache<br />

MySQL , ODBC<br />

Javascript,<br />

Perl<br />

MySQL , ODBC<br />

●<br />

als Modul<br />

–<br />

–/–<br />

●<br />

–<br />

Send to a Friend, Bar- E-Commerce,<br />

rierefreie-Webseiten, Newsletter, u.a.<br />

weitere Sprachen,<br />

Multidomain/<br />

Site, Intern-Bereich,<br />

AISdot-Redaktion integriert,<br />

Marketing-<br />

Erweiter., News-<br />

Manager, Newsletter<br />

Manager, Termin/<br />

EventManager, Formulargenerator,<br />

Glossar/FAQ, Bannermanager,Interaktivität-Forum,<br />

Artikel-<br />

/Berichte-Manager,<br />

Foto-/Bildergalerie,<br />

Abstimm.-Manag.,<br />

Linkmanager, Webmail,<br />

SMS-Gateway,<br />

Chatserver, eCommerce-Erweiterungen,<br />

Bestellformuar, Warenkorbsystem,<br />

eShop-<br />

System, e-Learning,<br />

Fahrzeugdatenbank<br />

XML, CSV-Dateien<br />

k.A<br />

k.A<br />

Im- und Export<br />

batix Content<br />

Management<br />

System 2.1<br />

www.batix.de<br />

ab 1.500 Euro<br />

alle gängigen OS<br />

unabahängig<br />

MySQL, Oracle u.A. MySQL, andere<br />

optional<br />

Servlet-Engine, Java, PHP, Java, Makro-<br />

andere über Module sprache<br />

Oracle, SQL, MySQL Dateisystem, MySQL<br />

u.a.<br />

Modul<br />

●<br />

●<br />

●/●<br />

●<br />

●<br />

XML, <strong>HTML</strong>, CSV u.a. beliebig<br />

k.A.<br />

integriertes<br />

Messaging-/<br />

Reporting System<br />

●<br />

Citecast<br />

Content<br />

Management<br />

www.nwe.de<br />

ab 500 Euro<br />

Linux<br />

Apache<br />

●<br />

– (geplant)<br />

–<br />

●/●<br />

●<br />

Erweiterbare Makrosprache,<br />

PHP-API,<br />

JAVA-Anbind. mögl.<br />

Lösungen für<br />

Firmenwebsites<br />

und Stadtprotale,<br />

E-Commerce<br />

Admin, Chefredakteur<br />

Workflow-Benachrichtigungen<br />

intern<br />

und per E-Mail<br />

k.A.<br />

ConPresso<br />

3.4.17<br />

www.conpress<br />

o.de<br />

ab 319 Euro<br />

Unix, Linux,<br />

Windows<br />

alle gängigen<br />

MySQL<br />

PHP, Javascript<br />

MySQL<br />

●<br />

–<br />

●<br />

●/●<br />

●<br />

●<br />

Bibliothekserweiter<br />

ung und Bilddatenbank<br />

beliebig<br />

Redakteur, Chefredakteur,<br />

Super-User,<br />

Admin, Mitglied<br />

Email<br />

k.A<br />

ContentCenter<br />

3.0<br />

www.leitwerk.<br />

de<br />

ab 950 Euro<br />

alle gängigen OS<br />

mit PHP<br />

alle gängigen<br />

ODBC-Datenbanken,<br />

MySQL<br />

PHP, Html<br />

Linux MySQL, Win<br />

2000 ODBC/Access,<br />

Win2000 MySQL<br />

●<br />

●<br />

–<br />

●/●<br />

●<br />

●<br />

Personalisierung<br />

von Inhalten<br />

beliebig<br />

Admin,<br />

Chefredakteur<br />

Email<br />

k.A<br />

Web Dynamics Contenpapst<br />

CMS<br />

www.plan-i.de<br />

ab 189 Euro<br />

alle gängigen OS<br />

mit PHP<br />

alle gängigen<br />

MySQL<br />

beliebig<br />

MySQL<br />

●<br />

●<br />

●<br />

●/–<br />

●<br />

●<br />

Adressdatenbank,<br />

Bildergalerie, Multidaten,<br />

E-Commerce,<br />

Forum, Newsletter,<br />

Download, Umfrage,<br />

Benutzerverwaltung,Nachrichtenmodul,Statistikmodul,Fehler-Modul,<br />

Menü-Modul,<br />

Sitemap-Modul,<br />

News-Modul,<br />

Termindatenbank,<br />

Webmail-Modul<br />

<strong>HTML</strong><br />

www.content<br />

papst.de<br />

ab 300 Euro<br />

alle gängigen OS<br />

mit PHP<br />

alle gängigen<br />

ODBC-Datenbanken,<br />

MySQL<br />

PHP und<br />

Javascript<br />

ODBC-Datenbanken,<br />

MySQL<br />

●<br />

●<br />

●<br />

–/●<br />

Modul<br />

Chefredakteur,<br />

Besucher, Redakteur,<br />

Bildredakteur<br />

beliebig<br />

über internes Messa- Email, internes k.A<br />

gingsystem via Privat System<br />

Message oder E-Mail<br />

nur Export Im und Export k.A<br />

●<br />

●<br />

Gästebuch,<br />

Newsletter,<br />

Werbung, Sprachverwaltung,<br />

Links,<br />

Volltextsuche,<br />

Statistik,<br />

Sicherung, PDF-<br />

Export, Galerie,<br />

CP::Forms<br />

RTF, PDF<br />

Epistar<br />

Content<br />

Manager<br />

www.epistar.<br />

com<br />

ab 35 Euro mtl.<br />

Linux, FreeBSD,<br />

Windows NT/<br />

Windows 2000, SUN<br />

Solaris u. a.<br />

Apache, Microsoft<br />

Internet<br />

Information Server<br />

MySQL, Oracle<br />

PHP<br />

MySQL, Oracle<br />

●<br />

nur interne Links<br />

Zusatzmodul<br />

●/●<br />

●<br />

Volltext- und<br />

indexbasierte<br />

Suche, Mailinglisten,<br />

Gästebuch,<br />

Chat, Diskussionsforum,<br />

Banner-<br />

Administrationssystem,<br />

Formular<br />

zur Empfehlung<br />

einzelner Seiten,<br />

Kontaktformular,<br />

Einrichtung geschützter<br />

Bereich,<br />

Druckversion<br />

einzelner Seiten,<br />

Mehrsprachigkeit<br />

<strong>HTML</strong>


Fantastic<br />

Content<br />

Management<br />

www.fantasticmultilist.de<br />

ab 300 Euro<br />

UNIX<br />

alle gängigen<br />

MYSQL<br />

Perl<br />

MYSQL<br />

keine<br />

gif, jpg<br />

keine<br />

Email<br />

nur Import<br />

–<br />

–<br />

●/–<br />

–<br />

–<br />

ikiss<br />

www.advantic.<br />

de<br />

ab 30 Euro (MiniKISS)<br />

ab 210 Euro iKISS<br />

"Linux/UnixSuSE<br />

Linux"<br />

Apache<br />

Alle SQL Datenbanken MySQL, MSDE<br />

PHP 4, Javascript<br />

SQL Datenbank<br />

●<br />

●<br />

–<br />

●/●<br />

●<br />

●<br />

Shopsystem, Wirtschaftsinformationssystem,Bürgerinformationssystem,<br />

Adressverwaltung,<br />

Veranstaltungskalender,<br />

Newsletter,<br />

Kleinanzeigen, Gästebuch,<br />

Forum, Automap,<br />

Slideshow,<br />

Touristik, Abfallwirtschaft<br />

XML, CSV, LDAP<br />

beliebig<br />

Aufgabenverwaltung<br />

und Email<br />

Im- und Export<br />

Cabacos 3.2<br />

www.it-direkt.de www.mod7.de<br />

ab 990 Euro<br />

Windows 2003,<br />

Windows 2000,<br />

Windows XP,<br />

Windows 9x,<br />

Windows NT<br />

MS Internet<br />

Information Server<br />

IIS<br />

VBScript, JScript, asp Javascript<br />

MySQL<br />

●<br />

nur interne Links<br />

●<br />

●/–<br />

●<br />

●<br />

Newsletter, Umfrage,<br />

Bewertungen, Shop,<br />

Datenbankzugriff,<br />

Abonnement,<br />

AdServer<br />

doc, xls, Copy&Paste<br />

"GästeJederAdministrator"<br />

Email, intern<br />

Export<br />

MOD 777<br />

ab 299 Euro<br />

beliebig<br />

alle gängigen OS<br />

mit PHP<br />

keine<br />

keine<br />

●<br />

–<br />

Zusatzmodul<br />

–/●<br />

●<br />

–<br />

auf Anfrage<br />

gif,jpg,png,pdf,word,<br />

excel,wav, aiff,flash<br />

k.A<br />

keine<br />

keine<br />

NOEO V 2.2<br />

www.noeo.com<br />

ab 390 Euro<br />

beliebig<br />

alle gängigen OS<br />

mit PHP<br />

MySQL<br />

JavaScript, VBScript,<br />

Perl, Java, PHP<br />

MySQL<br />

–<br />

nur interne Links<br />

Keine<br />

●<br />

–/●<br />

●<br />

–<br />

Copy&Paste<br />

keine<br />

keine<br />

keine<br />

Synergy<br />

Manager<br />

www.ernstingenterprises.de<br />

ab 150 Euro mtl.,<br />

ab 1.990 Euro<br />

Unix, Linux, Windows<br />

Apache<br />

MySQL<br />

Java Script, PHP 3 und<br />

4<br />

MySQL<br />

Zusatzmodul<br />

Nein<br />

●<br />

–/–<br />

●<br />

–<br />

auf Anfrage<br />

xls, csv<br />

beliebig<br />

Internes Messengersystem<br />

und Email<br />

Im und Export0<br />

TOOL1<br />

www.tool1.de<br />

ab 49 Euro mtl.<br />

beliebig<br />

beliebig<br />

Keine<br />

Alle<br />

Keine<br />

●<br />

●<br />

●<br />

●/●<br />

●<br />

●<br />

auf Anfrage<br />

XML, csv<br />

beliebig<br />

intern, Email<br />

keine<br />

xiteflex 1.30<br />

www.cms.xite<br />

flex.com<br />

ab 190 Euro<br />

Linux<br />

eigen<br />

eigen<br />

DTML, Python<br />

eigen<br />

●<br />

nur interne Links<br />

●<br />

●/–<br />

●<br />

●<br />

auf Anfrage<br />

Copy&Paste<br />

beliebig<br />

Email<br />

k.A<br />

EGOCMS 3.5<br />

www.egocms.<br />

com<br />

ab 79 Euro Mtl.<br />

ab 1.495 Euro<br />

beliebig<br />

alle gängigen OS<br />

mit CGI<br />

beliebig<br />

PHP, Java, JSP,<br />

JavaScript, Perl u.a.<br />

in Datenbank<br />

●<br />

●<br />

●<br />

●/●<br />

●<br />

●<br />

Intranet, Extranet,<br />

PDF Erzeugung,<br />

Katalogsysteme,<br />

Dokumentenmanagement,Qualitätsmanagement,<br />

Personalisierung,<br />

Shop z.B. Anbindung,<br />

Statistik, Formulargenerator,Kommunen,<br />

Foren, Indizierung<br />

von MS-Office-<br />

Dokumenten in der<br />

Volltextsuche,<br />

Newsletter, CRM,<br />

Multidomain-Fähigkeit,<br />

Mandanten-<br />

Fähigkeit etc.<br />

beliebig<br />

Administrator, Designer,<br />

Chefredakteur,<br />

Redakteur, beliebig<br />

Email<br />

Im und Export<br />

CHIP | PROFESSIONELL<br />

35


36<br />

AKTUELL | PLANEN k SDSL-Anbieter | AUFBAU | SPECIAL | OPTIMIEREN |<br />

Den richtigen Internet-Zugang finden<br />

So kommen Ihre Daten ins Netz<br />

Ein gutes Konzept allein reicht für eine Webseite nicht aus. Was Sie brauchen, ist Speicherplatz – und vor allem<br />

ein schneller Internet-Zugang, um Ihre Daten ins Netz zu bringen. Schließlich möchten Sie bei einem Update Ihres<br />

Internet-Auftritts nicht lange warten, sondern möglichst rasch weiterarbeiten.<br />

k<br />

Wer seine Webseite in regelmäßigen Abständen mit<br />

neuem Content versorgen möchte, ist auf DSL angewiesen,<br />

denn der analoge Zugang oder auch ISDN ist für diese<br />

Zwecke viel zu langsam. Ein herkömmlicher DSL-Zugang ist<br />

dabei allerdings nicht wirklich hilfreich, da bei fast allen<br />

Anbietern nur die Download-Geschwindigkeit hoch ist. Beim<br />

Hochladen von Daten müssen Sie sich dagegen in der Regel mit<br />

128 KBit/s begnügen, 256 KBit/s sind schon fast Highspeed<br />

bei einem DSL-Anschluss. Und noch mehr Upload-Geschwindigkeit<br />

gibt es im besten Fall gegen einen saftigen Aufpreis.<br />

Doch viele Provider haben derartige Varianten überhaupt nicht<br />

in ihrem Portfolio.<br />

Zudem haben die meisten DSL-Anschlüsse aus Sicht eines<br />

Webseiten-Betreibers zwei weitere Nachteile – vor allem, wenn<br />

Sie einen eigenen Server betreiben möchten: In der Regel<br />

bekommen Sie keine feste IP-Adresse oder müssen einen<br />

ALTERNATIVE: WEBSERVER MIETEN<br />

Der Webserver für jedermann<br />

Ein eigener Webserver – da<br />

denkt man sofort an große Webseiten<br />

mit Datenbanken und<br />

allen möglichen Zusatz-Tools.<br />

Unter Umständen lohnt sich<br />

aber ein eigener Server auch<br />

dann, wenn Sie gar keine allzu<br />

große Webseite darauf betreiben<br />

wollen.<br />

Bei Strato kostet der billigste<br />

Server 39 Euro im Monat,<br />

inklusive 60-GByte-Festplatte,<br />

2,4-GHz-Intel-Pentium-4-Prozessor<br />

und 512 MByte Arbeitsspeicher.<br />

Ebenfalls günstig ist<br />

Server4Free.de: Nur 45 Euro im<br />

Monat kostet hier ein Server mit<br />

80-GByte-Festplatte, 2,6-GHz-<br />

AMD-Athlon und 512 MByte Arbeitsspeicher.<br />

Außerdem sind<br />

500 GByte Datentransfer sowie<br />

beliebig viele E-Mail-Postfächer<br />

und Domains inklusive.<br />

Sie können den Server aber<br />

auch als weltweit verfügbaren<br />

Datenspeicher einsetzen. Per<br />

FTP schieben Sie Ihre Word-<br />

CHIP | PROFESSIONELL<br />

Files, MP3s und Powerpoint-<br />

Präsentationen in ein geschütztes<br />

Verzeichnis auf dem Webserver.<br />

Über die komfortable<br />

Konfigurations-Software ist das<br />

Einrichten von weiteren E-Mail-<br />

Adressen und Subdomains kein<br />

Problem. So könnten Sie Ihren<br />

gesamten Mail-Verkehr über<br />

den Server laufen lassen und<br />

zudem jedem Mitarbeiter Ihrer<br />

Firma ein eigenes Verzeichnis<br />

für seine Daten zur Verfügung<br />

stellen.<br />

Dass ganz nebenbei auch<br />

noch eine große Webseite auf<br />

dem Server laufen kann, ist<br />

da schon fast nebensächlich.<br />

Schließlich gibt es auch Features<br />

wie PHP, Server Side Includes<br />

und MySQL-Datenbank-<br />

Unterstützung. Wer die Administration<br />

nicht selbst übernehmen<br />

will, bekommt bei Strato<br />

für 10 Euro Aufpreis den sogenannten<br />

Business-Server – gewartet<br />

von Strato-Technikern.<br />

deutlichen Aufschlag bezahlen. Außerdem erfolgt alle 24 Stunden<br />

eine Zwangstrennung. Das ist zwar nicht wirklich problematisch,<br />

ärgerlich ist es aber allemal.<br />

Aber es gibt andere Möglichkeiten, die Daten für Ihre Webseite<br />

mit einer angemessenen Geschwindigkeit und ohne sonstige<br />

Hürden ins Internet zu bringen. CHIP stellt Ihnen auf<br />

den nächsten Seiten die schnellsten DSL-Varianten und die<br />

günstigsten Highspeed-Tarife vor.<br />

ADSL mit schnellerem Upload<br />

Wenn Sie einen herkömmlichen DSL-Zugang – also in der Regel<br />

T-DSL – bestellen, erhalten Sie eine Upload-Geschwindigkeit<br />

von gerade mal 128 KBit/s. Das ist zwar immer noch<br />

doppelt so schnell wie ISDN, aber wenn man eine langsame Geschwindigkeit<br />

verdoppelt, wird sie ja nicht automatisch schnell.<br />

Mittlerweile bietet T-Com – und damit auch alle Reseller –<br />

T-DSL 3000 an; die Upload-Geschwindigkeit liegt hier immerhin<br />

bei 384 KBit/s. Damit wird der Upload etwa dreimal so<br />

schnell wie beim herkömmlichen T-DSL mit 768 oder – in der<br />

neueren Variante – 1.000 KBit/s. Die Business-Tarife der<br />

Telekom ermöglichen sogar eine Upload-Geschwindigkeit von<br />

bis zu 512 KBit/s, und zwar gegen Aufpreis und ohne feste IP-<br />

Adresse. Dafür zahlen Sie dann etwa 90 Euro im Monat für<br />

Ihren DSL-Anschluss, allerdings inklusive Flatrate.<br />

Konkurrenten, beispielsweise Arcor, sind zwar etwas günstiger<br />

als die Telekom, doch die Upload-Rate erreicht maximal<br />

384 KBit/s, das ist bei einer etwas umfangreicheren<br />

Seite einfach zuwenig. QSC bietet im Upstream zwar wie<br />

T-Com Bandbreiten bis 512 KBit/s an, doch der Provider<br />

ist nicht unbedingt billiger als die Telekom. Um einen wirklich<br />

schnellen Zugang zu bekommen, bleibt Ihnen letztlich<br />

nur die Entscheidung für SDSL übrig.<br />

SDSL: Schnell in beide Richtungen<br />

Mit einer SDSL-Verbindung können Sie drei Probleme auf<br />

einmal lösen: Sie bekommen eine hohe Upload-Geschwindigkeit,<br />

eine feste IP-Adresse und eine Standleitung, die bei<br />

T-Com obligatorische Zwangstrennung entfällt. Das Ganze<br />

hat aber auch seinen Preis: Unter 90 Euro im Monat können<br />

Sie keinen Zugang bekommen. Und dafür gibt es nur sehr<br />

langsame Zugänge mit 192 KBit/s. Interessant wird es jedoch<br />

erst ab 512 KBit/s – mit dieser Geschwindigkeit sind dann<br />

auch große Datenmengen oder Bilder kein Problem mehr. Für<br />

einen entsprechenden Volumentarif zahlen Sie aber mindestens<br />

150 Euro im Monat, und für eine Flatrate müssen Sie noch<br />

einmal mindestens 50 Euro drauflegen.


GÜNSTIGER PREIS: NGI bietet SDSL-Tarife schon ab 90 Euro an.<br />

Dafür bekommen Sie allerdings gerade mal eine Verbindung<br />

mit langsamen 192 KBit/s.<br />

Die Preise für SDSL-Tarife werden fast immer als Nettopreise<br />

ohne Mehrwertsteuer angegeben. Das ist bei professionellen<br />

Nutzern auch sinnvoll, da die Mehrwertsteuer ein<br />

durchlaufender Posten ist. Manchmal kann es aber Probleme<br />

mit der Vergleichbarkeit geben. Die Preise in der Tabelle auf<br />

s38 verstehen sich deshalb grundsätzlich inklusive Mehrwertsteuer.<br />

Absolut üblich bei SDSL-Anschlüssen sind Einrichtungsgebühren;<br />

sie bewegen sich nicht selten im deutlich drei-<br />

HIGHSPEED-KNOW-HOW<br />

SCHNELLER GEHT’S KAUM: Bei QSC können Sie mit bis zu<br />

4,6 MBit/s unbegrenzt surfen und Daten hochladen. Der<br />

Tarif von 1.150 Euro/Monat ist für dieses Tempo günstig.<br />

stelligen Bereich – in unserer Tabelle bis zu 811 Euro. Bei fast<br />

allen Providern gibt es aber die Möglichkeit, eine längere<br />

Vertragslaufzeit zu wählen, beispielsweise 24 oder 36 Monate.<br />

Dafür fällt dann meist die Einrichtungsgebühr geringer aus.<br />

In manchen Fällen bezahlen Sie bei drei Jahren Laufzeit gar<br />

nichts mehr für die Einrichtung.<br />

Die üblichen Geschwindigkeitsstufen für den synchronen<br />

DSL-Zugang sind 256, 512, 1.024 und 2.056 KBit/s. Die Preis- k<br />

HDSL, VDSL, ADSL & SDSL: Die DSL-Varianten im Überblick<br />

Noch vor wenigen Jahren verband<br />

man Highspeed-Datenübertragung<br />

ausschließlich mit<br />

den vier Buchstaben ISDN. Die<br />

maximale Datenübertragungsrate<br />

bei ISDN beträgt 160 Kilobit pro<br />

Sekunde – zumindest in der technischen<br />

Theorie, in der Praxis<br />

sind es 128 KBit/s. Da ISDN für<br />

Daten die gleichen Bandbreiten<br />

wie für den Telefondienst nutzt,<br />

kann man mit einer Leitung entweder<br />

telefonieren oder ins Internet<br />

gehen. ISDN heißt in<br />

Deutschland aber immer: zwei<br />

Leitungen (B-Kanäle) plus D-Kanal.<br />

Dadurch wird zwar die Datenübertragungsrate<br />

deutlich geringer,<br />

die Aufteilung ermöglicht<br />

aber die gleichzeitige Nutzung<br />

von Internet und Telefon.<br />

T1 und E1: Höhere Übertragungsraten<br />

Der nächste Schritt zu einer<br />

schnellen Datenübertragung mit<br />

hohen Datenraten waren T1- beziehungsweise<br />

E1-Leitungen. E1 ist<br />

die europäische Variante dieser<br />

Technologie. Damit konnten<br />

Übertragungsraten von 1,544<br />

MBit/s (T1) beziehungsweise 2,048<br />

MBit/s (E1) erreicht werden. Die<br />

Installation von T1- beziehungsweise<br />

E1-Leitungen ist äußerst<br />

aufwendig und damit sehr teuer.<br />

So kann beispielsweise in einem<br />

einfachen Kabel mit 50 Doppeladern<br />

nur eine T1-Leitung gelegt<br />

werden, in einem benachbarten<br />

Kabel darf sich keine zusätzliche<br />

Leitung befinden.<br />

HDSL und VDSL: Asymmetrisch<br />

ins Netz<br />

Die einfachere Alternative heißt<br />

HDSL, wobei das „H“ für „High<br />

Data Rate“ steht. Diese Technologie<br />

benötigt deutlich weniger<br />

Bandbreite als eine T1-Leitung. Die<br />

Übertragungsraten sind identisch.<br />

Die Reichweite von HDSL beträgt<br />

3,7 Kilometer. Aber auch „High<br />

Data Rate“ lässt sich steigern –<br />

mit „Very High Data Rate“. VDSL<br />

ist zwar schnell, aber auch asym-<br />

metrisch, deshalb sprach man<br />

zunächst von VADSL. Im Downstream<br />

soll bei einer Entfernung<br />

von etwa 300 Metern eine Übertragungsrate<br />

von fast 52 MBit pro<br />

Sekunde erreicht werden. Bei<br />

1 Kilometer bleiben immer noch<br />

fast 25 MBit und bei 1,5 Kilometern<br />

knapp 13 MBit pro Sekunde übrig.<br />

Die Upstream-Rate liegt zwischen<br />

1,4 und 2,3 MBit pro Sekunde.<br />

Nicht nur aufgrund der kürzeren<br />

Reichweite ist VDSL eine einfachere<br />

Technologie, die aber auch<br />

Schwächen hat. Für den Markt<br />

spielt sie bisher keine Rolle, das<br />

könnte sich aber möglicherweise<br />

bald ändern.<br />

ADSL und SDSL: Weniger Downstream<br />

ADSL und SDSL sind die Technologien,<br />

die für die Anwender<br />

bisher verfügbar sind. SDSL verwendet<br />

zur Übertragung eines<br />

T1-/E1-Signals nur ein einziges<br />

Twisted-Pair-Kabel. Da es eine<br />

Bandbreite oberhalb der Telefonie<br />

nutzt, werden keine Leitungen<br />

belegt. Anders als bei ADSL<br />

werden bei SDSL die ISDN-Signale<br />

nicht durch einen Splitter von den<br />

Datensignalen getrennt; sie sind<br />

Bestandteil der SDSL-Technologie.<br />

Die Reichweite beträgt theoretisch<br />

sechs Kilometer, auf diese Entfernung<br />

wird aber nur noch etwa<br />

ein Zehntel der möglichen Übertragungsrate<br />

erreicht. Drei Kilometer<br />

ist die maximale Übertragungsrate<br />

bei 2,3 MBit/s – allerdings<br />

in beide Richtungen.<br />

Auch bei ADSL wird nur eine<br />

Doppelader der Leitung verwendet.<br />

Anders als bei HDSL und SDSL<br />

aber ist der Rückkanal deutlich<br />

geringer als der Downstream.<br />

Theoretisch wären ein Downstream<br />

von 6 MBit/s und ein Upstream<br />

von 640 KBit/s möglich. In<br />

der Praxis liegt der Downstream<br />

allerdings derzeit zwischen 768<br />

KBit/s und 1,5 MBit/s, der Upstream<br />

zwischen 128 und 384<br />

KBit/s.<br />

CHIP | PROFESSIONELL<br />

37


38<br />

AKTUELL | PLANEN k SDSL-Anbieter | AUFBAU | SPECIAL | OPTIMIEREN |<br />

PROFESSIONELLE INTERNET-TARIFE<br />

Anbieter<br />

Arcor<br />

Broadnet<br />

Mediascape<br />

Claranet<br />

Celox<br />

CNE<br />

Easynet<br />

EuM<br />

Host Europe<br />

Netdiscounter<br />

NGI<br />

NMMN<br />

QSC<br />

T-Com<br />

Telefonica<br />

Via Networks<br />

CHIP | PROFESSIONELL<br />

Internet<br />

www.arcor.de<br />

www.broadnetmediascape.de<br />

www.claranet.de<br />

www.celox.de<br />

www.cne.de<br />

www.easynet.de<br />

www.eum.de<br />

www.hosteurope.de<br />

www.netdiscounter.de<br />

www.ngi.de<br />

www.nmmn.de<br />

www.qsc.de<br />

www.telekom.de<br />

www.telefonica.de<br />

www.vianetworks.de<br />

Tarif<br />

Internet Business DSL flatrate<br />

Internet Business DSL volumentarif<br />

Internet Business DSL volumentarif<br />

dataHighways SDSL 768<br />

dataHighways SDSL 1024<br />

dataHighways SDSL 1,5 Mbit<br />

dataHighways SDSL 2 Mbit<br />

dataHighways SDSL 4 Mbit Flat<br />

clara sDSL 256<br />

clara sDSL 512<br />

clara sDSL 1024<br />

clara sDSL 2300<br />

celoxDSL_4<br />

celoxDSL_8<br />

celoxDSL_16<br />

celoxDSL_32<br />

celoxDSL_36<br />

DSL 1000<br />

DSL 2300<br />

Easynet SDSL 256<br />

Easynet SDSL 512<br />

Easynet SDSL 1024<br />

Easynet SDSL 2300<br />

eum SDSL Preferred – Volumen<br />

eum SDSL Preferred – Volumen<br />

SDSL 512<br />

SDSL 1024<br />

SDSL 2300<br />

512 KBit/s SDSL-Leitung Flatrate<br />

1024 KBit/s SDSL-Leitung Flatrate<br />

2300 KBit/s SDSL-Leitung Flatrate<br />

SDSL 192 KBit/s<br />

SDSL 256 KBit/s<br />

SDSL 384 KBit/s<br />

SDSL 512 KBit/s<br />

SDSL 768 KBit/s<br />

SDSL 1 MBit/s<br />

SDSL 1,5 MBit/s<br />

SDSL 2 MBit/s Flatrate<br />

SDSL 2,3 MBit/s<br />

my-SDSL 512 Fun<br />

my-SDSL 1024 Fun<br />

my-SDSL 2320 Fun<br />

Q-DSLmax<br />

Q-DSLmax 4.6<br />

T-DSL business symmetrisch 1000<br />

T-DSL business symmetrisch 2000<br />

access:SDSL 256<br />

access:SDSL 512<br />

access:SDSL 1024<br />

access:SDSL 2300<br />

VIA DSL symmetrisch 1000*1<br />

VIA DSL symmetrisch 2000*2<br />

VIA SDSL 256<br />

VIA SDSL 512<br />

VIA SDSL 1024<br />

VIA SDSL 2048<br />

*1 nur mit TDSL 1000<br />

*2 nur mit TDSL 2000<br />

Bandbreite<br />

384 KBit/s<br />

1 MBit/s<br />

2,3 MBit/s<br />

768 KBit/s<br />

1 MBit/s<br />

1,5 MBit/s<br />

2 MBit/s<br />

4,2 MBit/s<br />

256 KBit/s<br />

512 KBit/s<br />

1 MBit/s<br />

2,3 MBit/s<br />

256 KBit/s<br />

512 KBit/s<br />

1 MBit/s<br />

2 MBit/s<br />

2,3 MBit/s<br />

1 MBit/s<br />

2,3 MBit/s<br />

256 KBit/s<br />

512 KBit/s<br />

1 MBit/s<br />

2,3 MBit/s<br />

1 MBit/s<br />

2 MBit/s<br />

512 KBit/s<br />

1 MBit/s<br />

2,3 MBit/s<br />

512 KBit/s<br />

1 MBit/s<br />

2,3 MBit/s<br />

192 KBit/s<br />

256 KBit/s<br />

384 KBit/s<br />

512 KBit/s<br />

768 KBit/s<br />

1 MBit/s<br />

1,5 MBit/s<br />

2 MBit/s<br />

2,3 MBit/s<br />

512 KBit/s<br />

1 MBit/s<br />

2,3 MBit/s<br />

2,3 MBit/s<br />

4,6 MBit/s<br />

256-1.024 KBit/s<br />

1,5-2 MBit/s<br />

256 KBit/s<br />

512 KBit/s<br />

1 MBit/s<br />

2,3 MBit/s<br />

1 MBit/s<br />

2 MBit/s<br />

256 KBit/s<br />

512 KBit/s<br />

1 MBit/s<br />

2,3 MBit/s<br />

Einrichtungsgebühr*<br />

* in Euro<br />

Die Laufzeit beträgt zwölf Monate. Ausnahmen sind die Angebote von Easynet (ein Monat) und Host Europe (24 Monate).<br />

405<br />

405<br />

405<br />

289<br />

289<br />

289<br />

289<br />

289<br />

231<br />

347<br />

463<br />

463<br />

568<br />

568<br />

568<br />

568<br />

568<br />

579<br />

579<br />

348<br />

348<br />

348<br />

464<br />

811<br />

811<br />

399<br />

399<br />

399<br />

199<br />

199<br />

199<br />

386<br />

386<br />

386<br />

386<br />

386<br />

386<br />

386<br />

386<br />

386<br />

347<br />

347<br />

347<br />

463<br />

695<br />

405<br />

405<br />

463<br />

463<br />

463<br />

463<br />

129<br />

129<br />

249<br />

249<br />

249<br />

249<br />

Monatl.<br />

Grundpreis*<br />

–<br />

109<br />

132<br />

177<br />

206<br />

237<br />

319<br />

–<br />

–<br />

–<br />

–<br />

–<br />

103<br />

148<br />

217<br />

312<br />

335<br />

–<br />

–<br />

128<br />

186<br />

261<br />

348<br />

196<br />

219<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

89<br />

115<br />

141<br />

173<br />

208<br />

261<br />

299<br />

–<br />

347<br />

157<br />

231<br />

300<br />

115<br />

115<br />

138<br />

196<br />

312<br />

428<br />

556<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

Enthaltenes<br />

Volumen<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

2 GByte<br />

2 GByte<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

1 GByte<br />

2 GByte<br />

5 GByte<br />

2 GByte<br />

2 GByte<br />

5 GByte<br />

10 GByte<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

Preis pro<br />

GByte*<br />

–<br />

16<br />

16<br />

23<br />

23<br />

23<br />

23<br />

–<br />

–<br />

–<br />

–<br />

–<br />

20<br />

20<br />

20<br />

20<br />

20<br />

–<br />

–<br />

19 - 22<br />

19 - 22<br />

19 - 22<br />

19 - 22<br />

17<br />

17<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

28<br />

28<br />

28<br />

28<br />

28<br />

28<br />

28<br />

–<br />

28<br />

17<br />

17<br />

17<br />

11 - 19<br />

16<br />

16<br />

21<br />

21<br />

21<br />

21<br />

–<br />

–<br />

–<br />

–<br />

–<br />

–<br />

Flatrate*<br />

231<br />

463<br />

579<br />

521<br />

695<br />

846<br />

927<br />

1.739<br />

184<br />

347<br />

556<br />

811<br />

252<br />

401<br />

688<br />

1.012<br />

1.096<br />

231<br />

300<br />

203<br />

290<br />

406<br />

522<br />

382<br />

498<br />

249<br />

349<br />

449<br />

199<br />

249<br />

299<br />

133<br />

219<br />

257<br />

347<br />

463<br />

515<br />

644<br />

811<br />

811<br />

277<br />

377<br />

463<br />

–<br />

1.148<br />

–<br />

–<br />

231<br />

370<br />

660<br />

892<br />

89<br />

129<br />

99<br />

199<br />

299<br />

399


KOMFORTABLE LÖSUNG: Strato bietet für 39 Euro im Monat<br />

einen Mietserver mit Linux als Betriebssystem. Für 10 Euro<br />

mehr übernimmt Strato auch das Server-Management.<br />

unterschiede sind dabei gravierend. So kann beispielsweise<br />

eine Flatrate mit 256 KBit/s zwischen 100 und 250 Euro kosten<br />

– im Monat. Volumentarif bedeutet bei SDSL nicht automatisch,<br />

dass auch ein Freivolumen enthalten ist; da zahlen<br />

Sie dann ab dem ersten Gigabyte Traffic. Je nach Anbieter liegen<br />

die Preise pro Gigabyte zwischen 11 und 28 Euro. Bei geringen<br />

Übertragungsraten sind Volumentarife nur sinnvoll, wenn<br />

auch das Datenaufkommen niedrig ist – teilweise haben Sie<br />

schon ab 2 oder 3 Gigabyte die Grenze zur Flatrate überschritten.<br />

Erst bei Geschwindigkeiten ab 1 MBit/s und mehr<br />

sind die Unterschiede zwischen Volumen und Flat so groß, dass<br />

sich das Rechnen lohnen kann.<br />

Das Geschwindigkeits-Highlight in der CHIP-Übersicht ist<br />

der Provider QSC. Die Flatrate QDSLmax 4.6 bietet eine Übertragungsrate<br />

von 4,6 MBit/s – und das in beide Richtungen.<br />

Dafür verlangt der Provider eine recht angemessene monatliche<br />

Gebühr von 1.148 Euro.<br />

SDSL-Tarifwahl: Nur nicht übertreiben<br />

Für welche Geschwindigkeit Sie sich letztlich entscheiden,<br />

hängt in erster Linie von Ihrer Webseite ab. Arbeiten Sie<br />

überwiegend mit Texten und lediglich mit kleinen Bildern,<br />

werden Ihnen vermutlich 256 KBit/s ausreichen – vor allem<br />

auch dann, wenn Sie Ihre Seite nicht unbedingt täglich aktualisieren<br />

müssen. Ein ADSL-Anschluss mit 1,5 MBit/s im<br />

Download und dem entsprechenden Upstream reicht dann für<br />

Sie vollkommen aus.<br />

Sind die zu übertragenden Daten deutlich umfangreicher<br />

und fallen die Updates regelmäßig an – und nicht nur einmal<br />

im Jahr –, sollten Sie ruhig etwas Geld in einen SDSL-Zugang<br />

investieren. Das Gleiche gilt, wenn Sie zuhause einen eigenen<br />

Server betreiben, dann sind Sie einfach auf die dauerhafte<br />

Verbindung angewiesen. Stellt sich immer noch die Frage nach<br />

der benötigten Geschwindigkeit: SDSL ist erst ab 768 KBit/s<br />

sinnvoll, sonst können Sie auch zu T-DSL Business 3000 plus<br />

T-DSL Upstream 512, dem wesentlich preiswerteren ADSL-<br />

Zugang, greifen, der zudem noch den deutlich schnelleren<br />

Download bietet. Auf der anderen Seite werden Sie selten<br />

2,3 MBit/s und mehr brauchen. Diese Zugänge sollte man<br />

Firmen überlassen – oder Leuten, die zuviel Geld haben.<br />

Auf jeden Fall sollten Sie die Preise gründlich vergleichen,<br />

die Unterschiede sind zum Teil eklatant. Berücksichtigen<br />

Sie dabei auch eventuelle Freivolumina und die Kosten für<br />

zusätzlichen Traffic. Und achten Sie auf Angebote: Viele Provider<br />

locken immer wieder mit einer ermäßigten Einrichtungsgebühr<br />

oder mit Gratis-Monaten.<br />

Hosting-Paket bestellen oder Webserver mieten?<br />

Bevor Sie sich eingehend mit den Webhosting-Angeboten im<br />

nächsten Beitrag ab s40 auseinandersetzen, sollten Sie sich<br />

überlegen, ob Ihre Webseite nicht auf einem eigenen Server<br />

besser aufgehoben ist. Dabei müssen Sie sich nicht unbedingt<br />

für teures Geld einen Webserver kaufen und sich damit auch<br />

noch die Wartungsarbeiten aufhalsen. Die deutlich bequemere<br />

und meistens auch günstigere Lösung besteht darin, einen<br />

Webserver zu mieten (siehe Kasten auf s36). Achten Sie bei der<br />

Suche nach einem geeigneten Anbieter vor allem auf die Aspekte<br />

Sicherheit und Service. Ein seriöser Anbieter arbeitet etwa mit<br />

Raid-Systemen, die die Daten auf mehreren Festplatten spiegeln,<br />

und mit ausgereiften Backup-Lösungen. In Sachen Service sollte<br />

Ihr Provider rund um die Uhr – sieben Tage in der Woche,<br />

52 Wochen im Jahr – zuverlässig erreichbar sein.<br />

KNOW-HOW<br />

Schneller Upload via FTP<br />

Auch mit der schnellen Leitung<br />

alleine ist es noch nicht<br />

getan – irgendwie müssen Sie<br />

die Daten noch ins Internet<br />

bringen. Und die bequemste<br />

Methode dafür ist das File<br />

Transfer Protocol (FTP).<br />

Wenn Sie Windows Me, 2000<br />

oder XP einsetzen, brauchen<br />

Sie für die Dateiübertragung<br />

per FTP kein zusätzliches Programm<br />

wie etwa WS_FTP (auf<br />

Heft-DVD), sondern können<br />

alles bequem über den Windows-Explorer<br />

steuern; Sie<br />

müssen dazu nur Ihren FTP-<br />

Server in der Netzwerkumgebung<br />

entsprechend konfigurieren.<br />

Wesentlich mehr Optionen<br />

bietet Ihnen ein echtes FTP-Programm.<br />

Dabei sind die Unterschiede<br />

zwischen den Tools<br />

gering. Die kostenpflichtigen<br />

Programme bieten aber meist<br />

mehr als die Freeware-Tools.<br />

Unix-Erbe: Die Rechteverwaltung<br />

Mit FTP können Sie für jeden<br />

Ordner und jede Datei detailliert<br />

Rechte vergeben. Das ist<br />

Michael Brunn, Matthias Semlinger, Andreas Vogelsang<br />

FTP-Programme<br />

nützlich, um auch einige private<br />

Dateien auf einem FTP-Server<br />

abzulegen.<br />

Auch wer CGI-Scripts einbindet,<br />

die auf dem Server<br />

ausgeführt werden sollen, muss<br />

sich unbedingt mit der FTP-<br />

Rechtevergabe befassen; andernfalls<br />

laufen die CGI-Scripts<br />

nicht richtig. So muss beispielsweise<br />

die <strong>HTML</strong>-Datei mit Ihren<br />

Gästebuch-Einträgen ohne Ihr<br />

Zutun von einem Skript auf<br />

dem Server verändert werden<br />

können. Die Rechte passen Sie<br />

mit dem FTP-Befehl „CHMOD“<br />

an; in der Praxis übernimmt<br />

das Ihr FTP-Client, wenn Sie<br />

die Datei-Eigenschaften bearbeiten.<br />

Es gibt dreierlei Arten von<br />

Rechten – Lesen, Schreiben und<br />

Ausführen – sowie drei Benutzerarten:<br />

„Besitzer“, „Gruppe“<br />

und „Alle Benutzer“. Diese<br />

Rechte werden entweder als<br />

Buchstabenkombination oder<br />

als Zahl dargestellt. „rw-rw-rw“<br />

(oder „666“) heißt „Alle dürfen<br />

lesen/schreiben“.<br />

CHIP | PROFESSIONELL<br />

39


40<br />

AKTUELL | PLANEN k Hoster | AUFBAU | SPECIAL | OPTIMIEREN |<br />

Webspace richtig planen<br />

Der beste Platz für Ihre Seite<br />

Das Wichtigste für einen professionellen Internet-Auftritt ist neben einem durchdachten Konzept der richtige<br />

Platz. Das kann in einzelnen Fällen ein eigener Webserver sein, der in Ihrem Büro steht. In der Regel sind Sie<br />

aber mit dem Angebot eines professionellen Webhosters am besten bedient.<br />

k<br />

Für eine professionelle Internet-Seite kommt natürlich<br />

auch nur ein professionelles Webhosting-Angebot in<br />

Frage. Kostenlosen Webspace oder auch die Pakete diverser<br />

Provider können Sie vergessen – zu viele Einschränkungen<br />

machen diese Offerten für die professionelle Nutzung unbrauchbar.<br />

Dazu gehören beispielsweise Werbe-Einblendungen,<br />

Beschränkungen bei Art und Größe der Dateien oder die<br />

fehlende Unterstützung von Standards wie CGI, PHP oder<br />

MySQL. Außerdem bekommen Sie bei den Low-Budget-Angeboten<br />

in der Regel lediglich Subdomains, eigene Domains<br />

können Sie dagegen nicht nutzen. Ähnliche Probleme ergeben<br />

sich bei den Billigpaketen vieler Webhoster: Bei denen bekommen<br />

Sie für ein paar Cent im Monat zwar eine Domain,<br />

KNOW-HOW<br />

Kaum Alternativen zu DSL<br />

Natürlich ist DSL nicht die einzige<br />

Möglichkeit, schnell ins Internet<br />

zu kommen, für Webseiten-Betreiber<br />

jedoch die einzig<br />

sinnvolle. Denn im Gegensatz<br />

zu anderen Technologien<br />

ist DSL auch für den schnellen<br />

Daten-Upload geeignet.<br />

Internet per Satellit<br />

Grundsätzlich lassen sich mit Internet<br />

per Satellit sehr hohe Geschwindigkeiten<br />

erzielen – zum<br />

Teil sogar höhere als mit DSL.<br />

Der Haken ist der sogenannte<br />

Rückkanal, denn die hohen Geschwindigkeiten<br />

werden nur<br />

beim Download erzielt; für den<br />

Upload oder die Anfragen an<br />

Webserver muss ein analoger<br />

oder ein ISDN-Anschluss eingesetzt<br />

werden. Die Realisierung<br />

des Rückkanals via Satellit ist<br />

zwar möglich, aber sehr kostspielig.<br />

Internet per Kabel<br />

Ähnliche Probleme gibt es bei<br />

der Nutzung des Fernsehkabels.<br />

Nur die wenigsten der ohnehin<br />

schon rar gesäten Anschlüsse<br />

verfügen über einen Rückkanal.<br />

CHIP | PROFESSIONELL<br />

Und der ist in der Praxis auch<br />

selten wirklich schnell, denn<br />

mehr als 400 KBit/s bietet<br />

kaum ein Provider an. Hinzu<br />

kommt eine sehr geringe Verbreitung.<br />

Die Lösung ist also<br />

eher für Surfer geeignet; wer<br />

Daten ins Netz laden will, kann<br />

mit dem Kabelzugang wenig<br />

anfangen. Eine lobenswerte<br />

Ausnahme ist der Münchner<br />

Provider Cablesurf: Für 100<br />

Euro im Monat bekommen Sie<br />

eine Upload-Geschwindigkeit<br />

von 1 GByte bei einem Download<br />

von 550 KBit/s plus eine feste<br />

IP-Adresse.<br />

Internet per Powerline<br />

Während Internet per Satellit<br />

oder Kabel für den Upload von<br />

Daten ungeeignet sind, ist<br />

Powerline in puncto Anbieter<br />

und Features eigentlich tot. Nur<br />

einige wenige Anwender surfen<br />

in Mannheim über das Stromnetz.<br />

Allerdings ist diese Technologie<br />

aufgrund zu geringer<br />

Übertragungsraten keine Lösung<br />

für einen professionellen<br />

Internet-Auftritt.<br />

möglicherweise sogar noch ein wenig Webspace – das war es<br />

dann aber auch schon. Einen richtig professionellen Internet-<br />

Auftritt können Sie unter diesen Bedingungen mit Sicherheit<br />

nicht realisieren.<br />

Die richtige Webspace-Ausstattung<br />

Dimensionieren Sie Ihr Webhosting-Paket nicht zu bescheiden.<br />

Auch wenn Sie zunächst der Ansicht sind, dass Sie gar nicht<br />

so viel Speicher benötigen, kann sich Ihre Webseite doch<br />

schneller entwickeln als erwartet. Wenn Sie beispielsweise<br />

planen, interaktive Elemente in Ihren Auftritt zu integrieren,<br />

können schnell ein paar zusätzliche Megabyte zusammenkommen.<br />

Das Gleiche gilt zum Beispiel auch für Diskussionsforen,<br />

wenn dort einigermaßen rege Aktivitäten herrschen und<br />

Sie die Beiträge archivieren. Und ganz besonders gilt es für<br />

Audio- und Videodateien auf Ihrem Server. Wenn Sie dies<br />

alles berücksichtigen (und nicht planen, einen Online-Musikoder<br />

-Videodienst zu betreiben) sollte in den meisten Fällen ein<br />

Paket mit 250 bis 500 MByte Speicher ausreichen.<br />

Grundsätzlich müssen Sie sich bei den meisten Providern<br />

keine Sorge um den Traffic machen. Auch an dieser Stelle<br />

gilt wieder: Solange Sie nicht umfangreiche Multimedia-Daten<br />

zum Download anbieten wollen oder täglich mehrere Millionen<br />

Besucher erwarten, sind die gängigen Angebote mit durchschnittlich<br />

zwischen 10 und 30 GByte absolut ausreichend<br />

dimensioniert für Ihre Webseite.<br />

Die passende Domain finden<br />

Während es bis vor etwa einem Jahr absolut üblich war, in<br />

Webhosting-Paketen lediglich „.de“-Domains anzubieten,<br />

erhalten Sie mittlerweile eigentlich überall auch andere Top-<br />

Level Domains. Der große Vorteil für den Anwender: Wenn<br />

es den von Ihnen gewünschten Domain-Namen nicht mehr für<br />

die deutsche Top-Level Domain „.de“ gibt, weichen Sie einfach<br />

auf „.info“, „.org“ oder „.biz“ aus. Der Berliner Provider Knallhart.de<br />

bietet sogar die österreichische Domain „.at“ an.<br />

Die technischen Voraussetzungen<br />

In puncto technische Möglichkeiten unterscheiden sich die<br />

Angebote kaum: CGI-, PHP- und Perl-Unterstützung oder<br />

SQL-Datenbanken gehören überall dazu. Interessanter sind da<br />

Verfügbarkeit und Service. Da stellt sich die Frage: Groß oder<br />

klein? Ein kleiner Anbieter hat vielleicht keine ausreichenden<br />

Kapazitäten, kann aber eventuell seine Kunden individueller<br />

betreuen. Ein großer Anbieter hat die eine oder andere Dienstleistung<br />

in petto, die kleinere Konkurrenten nicht haben, doch


DIE BUSINESS-KLASSE: In den 1&1-Hosting-Paketen sind bereits<br />

nützliche Tools für den professionellen Auftritt enthalten.<br />

soll es selbst bei großen Webhostern in der Vergangenheit zu<br />

Webserver-Ausfällen gekommen sein.<br />

1&1<br />

Bei 1&1 bekommen Sie derzeit drei Webhosting-Pakete, die<br />

auch anspruchsvollen Wünschen genügen. Von der technischen<br />

Ausstattung unterscheiden sich die Angebote nicht; ausschlaggebend<br />

sind an dieser Stelle die Anzahl von Domains, Webspace,<br />

Traffic und POP3-Accounts. Erfreulich: 1&1 verlangt<br />

keine Einrichtungsgebühren!<br />

Die Unterstützung von PHP 3 und 4, Server Side Includes<br />

(SSI), MySQL-Datenbanken und SSL-Verschlüsselung gehören<br />

in allen drei Paketen zum Standard. Eigene CGIs bekommen<br />

Sie aber erst ab dem Business-Pro-Paket. Dafür bietet 1&1 jede<br />

Menge weitere Features an: Bis zu zehn Chats, einfache Datenbanken,<br />

Formulare und ein Newsletter-Tool. Umfangreiche<br />

Statistikfunktionen gehören ebenfalls zum Angebot. Außerdem<br />

gibt es ein Suchmaschineneintrags-Tool.<br />

Bei der monatlichen Grundgebühr können Sie noch richtig<br />

viel sparen: Durch die Teilnahme an der 1&1-Banner-<br />

Community verringert sie sich je nach Tarif um 3 bis 10 Euro,<br />

also um etwa 25 Prozent.<br />

Ascis<br />

Ein eher kleiner Provider ist Ascis, der aber durch günstige<br />

Preise und eine sehr ordentliche Ausstattung angenehm auffällt.<br />

Für das Power-Paket mit 500 MByte Speicher zahlen Sie<br />

nur 10 Euro im Monat – bei anderen Webhostern zwischen<br />

5 und 10 Euro mehr.<br />

Geboten werden zwischen zwei und fünf Domains, 200 bis<br />

1.000 MByte Speicher und 100 bis 500 POP3-Accounts. Die<br />

monatliche Grundgebühr liegt je nach Tarif zwischen 8 und 15<br />

Euro. PHP, CGIs und SSI gehören zur Standard-Ausstattung,<br />

FrontPage-Unterstützung wird nur auf Anfrage angeboten.<br />

Dafür bietet Ascis zwischen zehn und 50 zusätzliche FTP-<br />

Accounts. Und das besondere Highlight für den professionellen<br />

Anwender: Je nach Tarif gibt es 20 bis 100 MySQL-Datenbanken.<br />

Und das ist für Webhosting-Tarife dieser Klasse schon<br />

eine ganze Menge!<br />

GENUG AUSWAHL: Der Berliner Provider http.net hält die vier<br />

Pakete „Mini“, „Entry“, „Standard“ und „Profi“ bereit.<br />

Doch auch die Angebote von Ascis haben ihre Schwächen.<br />

Dazu gehört die Einrichtungsgebühr – auch wenn sie nur 10<br />

Euro beträgt. Und der in den Paketen enthaltene Traffic ist im<br />

Vergleich mit den anderen Anbietern eher knapp bemessen.<br />

Während Ascis zwischen 7 und 20 GByte Traffic erlaubt, bekommen<br />

Sie bei anderen Webhostern etwa das Doppelte.<br />

Host Europe<br />

Auch bei Host Europe fällt die Einrichtungsgebühr unangenehm<br />

auf. Zwar sind es nur 15 Euro, aber immerhin. Die monatlichen<br />

Gebühren liegen mit 8 bis 26 Euro im Rahmen des<br />

Üblichen. Dafür gibt es dann zwischen 250 und 750 MByte<br />

Speicher. Bei den Domains liegt Host Europe im Mittelfeld.<br />

Zwischen zwei und sechs Adressen werden geboten, das wird im<br />

Normalfall ausreichen. Sehr großzügig zeigt sich der Webhoster<br />

dafür beim Traffic – zwischen 25 und100 GByte müssen erst<br />

einmal verbraucht werden, und so viel bekommen Sie bei<br />

kaum einem anderen Anbieter.<br />

Die technischen Standards sind vorhanden: SSI, eigene CGI-<br />

Skripte, je nach Tarif zwischen einer und drei MySQL-Datenbanken<br />

gehören zum Umfang der Pakete. Die Anzahl der FTP-<br />

Zugänge liegt zwischen drei und fünf. Das ist nicht üppig, aber<br />

zumindest ausreichend. PHP 4 ist in allen Paketen enthalten,<br />

FrontPage-Extensions werden aber erst ab dem XL-Pack angeboten.<br />

Wer auf diese Wert legt, wird mit dem WebPack L<br />

nicht glücklich werden.<br />

Loomes<br />

Insgesamt fünf recht abzeptable Tarife bietet Loomes für Kunden<br />

mit etwas höheren Ansprüchen. Zwischen 7,50 und 45 Euro<br />

kostet der Spaß im Monat. Ärgerlicherweise fällt auch eine<br />

Einrichtungsgebühr von 9 Euro an. Dafür zeigt sich Loomes bei<br />

Speicherplatz und Transfervolumen recht großzügig: Die Pakete<br />

bieten zwischen 200 und gigantischen 2.500 MByte Webspace<br />

und 20 bis 150 GByte Datentransfer. Auch die Domains sind<br />

großzügig bemessen: Bei Loomes bekommen Sie für Ihr Geld<br />

zwischen drei und zwölf Adressen.<br />

In allen Tarifen können Sie eigene und vorgegebene CGIs<br />

nutzen; angeboten werden beispielsweise Formulare, Gäste-<br />

CHIP | PROFESSIONELL<br />

41


42<br />

AKTUELL | PLANEN k Hoster | AUFBAU | SPECIAL | OPTIMIEREN |<br />

SCHOTTEN-PREISE: Ascis bietet auch hochwertige Webhosting-<br />

Pakete zu sehr günstigen Preisen an.<br />

bücher, Counter und Linklisten. MySQL-Unterstützung gibt<br />

es allerdings erst ab „Profi Platin“. In allen Tarifen enthalten ist<br />

die Anmeldung bei 50 Suchmaschinen. Völlig überflüssig ist<br />

allerdings das Angebot veralteter Software wie beispielsweise<br />

der Web-Editor Dreamweaver 2.<br />

Bei zwei Tarifen können Sie derzeit Geld sparen: Für „Profi<br />

Gold“ zahlen Sie bei einer Vertragslaufzeit von zwölf Monaten<br />

nur für elf Monate. Ähnlich ist es bei „Business Platin“: Dort<br />

bekommen Sie zwölf Monate für zehn und sparen so 90 Euro.<br />

Schlund + Partner<br />

Schaut man sich die Tarife von Schlund + Partner an, fallen<br />

als erstes die hohen Preise unangenehm auf: 29 Euro Einrichtungsgebühr<br />

verlangt der Webhoster, die monatliche<br />

Grundgebühr liegt zwischen 29 und 99 Euro. Das ist eine<br />

Menge Geld. Fairerweise muss man aber auch betonen, dass<br />

dafür einiges geboten wird:<br />

Der Webspace fällt mit 300 bis 1.000 MByte noch relativ<br />

normal aus, den können Sie bei anderen Anbietern günstiger<br />

bekommen. Aber der Traffic ist mit 25 bis 100 GByte schon<br />

ganz ordentlich. Dazu gibt es zwischen fünf und 20 Domains<br />

für die Top-Level-Domains „.de“, „.com“, „.org“, „.net“, „.info“,<br />

„.biz“ und „.co.uk“. Das ist eine sehr ansehnliche Auswahl!<br />

FTP-Zugänge können in beliebiger Anzahl eingerichtet werden,<br />

auch Anonymous FTP ist möglich. Alle Angebote unterstützen<br />

PHP 3 und 4, Perl, Python und SSI genauso wie FrontPage-<br />

2002-Extensions und eigene CGIs. MySQL-Datenbanken gibt<br />

es allerdings erst ab dem Tarif „WebPlus“. Das „Expert“-Paket<br />

bietet darüber hinaus noch einen Secure-Shell-Zugang und<br />

die Unterstützung von Cron Jobs.<br />

Ebenfalls in allen Tarifen enthalten sind eine feste IP-<br />

Adresse und 200 MByte Speicher für Real Audio oder Video-<br />

Daten. Damit können Sie Ihren Webspace dann auch als<br />

Streaming Server nutzen (s. Beitrag ab s152). Außerdem gibt<br />

es je nach Account zwischen einem und fünf Microsoft-<br />

Exchange-Accounts.<br />

Zusätzlich bietet Schlund + Partner ein Marketing-Paket für<br />

seine Nutzer. In den Webhosting-Paketen enthalten sind die<br />

Werbung auf www.meinestadt.de für drei Postleitzahlengebiete,<br />

CHIP | PROFESSIONELL<br />

JEDE MENGE VERKEHR: Die Angebote von Loomes sind sehr<br />

großzügig mit freiem Datentransfer ausgestattet.<br />

die Möglichkeit zur grafischen Auswertung der Webseiten-<br />

Daten und ein Software-Paket. Ab dem „Plus“-Paket gibt es<br />

zusätzlich die „imedia Quality Tools“.<br />

Schlund + Partner bietet eine Menge für die hohen Gebühren,<br />

vor allem das „Expert“-Paket lässt eigentlich keine Wünsche für<br />

einen professionellen Web-Auftritt mehr offen. Ob Sie aber das<br />

alles wirklich brauchen und ob Sie vor allem bereit sind, dafür<br />

fast 100 Euro im Monat zu investieren, ist eine ganz andere Frage.<br />

Strato<br />

Auch wenn die preislichen Unterschiede zwischen den Power-<br />

Web- und den Premium-Paketen nicht besonders groß sind<br />

– die Ausstattung fällt doch ganz anders aus. Und das ist auch<br />

bewusst so gemacht worden. Während mit den PowerWeb-<br />

Paketen fortgeschrittene Anwender erreicht werden sollen,<br />

zielen die Premium-Pakete auf den Mittelstand und sind<br />

entsprechend üppig ausgestattet.<br />

Mit den PowerWeb-Paketen können Sie eine durchaus ansehnliche<br />

private Web-Präsenz aufbauen. Für eine echte Profi-<br />

Seite fehlen jedoch zu viele Features. Das Aufspielen eigener<br />

CGIs oder die Unterstützung von PHP, Perl, Python und SSI<br />

gibt es erst für Premium-Kunden. Auch MySQL-Datenbanken<br />

sind erst für diese Angebote verfügbar. Wer aber nicht unbedingt<br />

eigene Skripte schreiben will, wird mit den zahlreichen<br />

vorbereiteten Skripts von „CGI 2004“ schon sehr weit kommen.<br />

Geboten sind 24 Funktionen, die sich ganz einfach in Ihre<br />

Webseite integrieren lassen.<br />

Die PowerWeb-Pakete fallen mit Preisen zwischen 2 und 6<br />

Euro recht günstig aus und bieten bis zu 250 MByte Webspace,<br />

drei Domains und bis zu 15 GByte Datentransfer. Außerdem<br />

gibt es mit dem „Communicator Pro“ ein komplettes virtuelles<br />

Kommunikationszentrum, einen Online-Shop und den Homepage-Baukasten<br />

LivePages.<br />

Für die Premium-Pakete zahlen Sie zwischen 10 und knapp<br />

18 Euro. Zusätzlich zu den bereits genannten Features gibt<br />

es zwischen 300 und 1.000 MByte Speicher, 15 bis 50 GByte<br />

Traffic und drei bis zehn Domains. Außerdem bietet Strato<br />

einige Sicherheitsfeatures wie etwa Backup-Control, SSL-<br />

Verschlüsselung und SSH- und SFTP-Zugänge. Zwar fehlen


HIGH-END: Bei Schlund + Partner sind nicht nur die Angebote<br />

gut ausgestattet, auch die Preise liegen ganz vorne.<br />

mancherlei technische Funktionen, dafür stimmt jedoch das<br />

Preis-Leistungs-Verhältnis.<br />

Fazit: Erst rechnen, dann kaufen<br />

Es gibt kein objektiv richtiges Webhosting-Angebot. Die Entscheidung<br />

für eine Lösung muss immer davon abhängen,<br />

zu welchem Zweck Sie Ihre Seite einsetzen wollen. Dabei sollten<br />

Sie weniger auf den reinen Speicherplatz achten; die technischen<br />

Möglichkeiten und der Service spielen nämlich irgendwann<br />

eine wesentlich größere Rolle.<br />

Wie immer gilt auch an dieser Stelle: Vergleichen Sie sehr<br />

sorgfältig Angebote und Preise – die Unterschiede sind teilweise<br />

PROFESSIONELLE WEBHOSTING-ANGEBOTE IM ÜBERBLICK<br />

Anbieter<br />

1&1<br />

Ascis<br />

http.net*<br />

Host Europe<br />

Loomes<br />

Schlund +<br />

Partner<br />

Strato<br />

Produkt<br />

Business<br />

Business Pro<br />

Professional<br />

Profi<br />

Power<br />

Premium<br />

Mini<br />

Entry<br />

Standard<br />

Profi<br />

WebPack L<br />

WebPack XL<br />

WebPack XXL<br />

Profi Gold<br />

Profi Platin<br />

Business Silber<br />

Business Gold<br />

Business Platin<br />

WebStart<br />

WebPlus<br />

WebExpert<br />

PowerWeb XE<br />

PowerWeb A<br />

PowerWeb S<br />

Premium XE<br />

Premium S<br />

Premium M<br />

Premium.net S<br />

Premium.net L<br />

*Endkunden-, keine Reseller-Preise<br />

Einrichtung<br />

keine<br />

keine<br />

keine<br />

10 Euro<br />

10 Euro<br />

10 Euro<br />

25 Euro<br />

25 Euro<br />

25 Euro<br />

25 Euro<br />

15 Euro<br />

15 Euro<br />

15 Euro<br />

9 Euro<br />

9 Euro<br />

9 Euro<br />

9 Euro<br />

9 Euro<br />

29 Euro<br />

29 Euro<br />

29 Euro<br />

keine<br />

keine<br />

keine<br />

keine<br />

keine<br />

keine<br />

keine<br />

keine<br />

Monatliche<br />

Kosten<br />

13 Euro<br />

25 Euro<br />

40 Euro<br />

8 Euro<br />

10 Euro<br />

15 Euro<br />

13 Euro<br />

25 Euro<br />

40 Euro<br />

75 Euro<br />

8 Euro<br />

15 Euro<br />

26 Euro<br />

7,50 Euro<br />

10 Euro<br />

15 Euro<br />

25 Euro<br />

45 Euro<br />

29 Euro<br />

49 Euro<br />

99 Euro<br />

2 Euro<br />

6 Euro<br />

4,50 Euro<br />

13 Euro<br />

10 Euro<br />

17,50 Euro<br />

20 Euro<br />

35 Euro<br />

Domains<br />

3<br />

5<br />

10<br />

2<br />

3<br />

5<br />

1<br />

5<br />

10<br />

15<br />

2<br />

4<br />

6<br />

3<br />

3<br />

3<br />

6<br />

12<br />

5<br />

10<br />

20<br />

2<br />

3<br />

3<br />

3<br />

5<br />

10<br />

5<br />

10<br />

FÜR JEDEN ETWAS: Strato bietet maßgeschneiderte Webhosting-Pakete<br />

für unterschiedliche Zielgruppen an.<br />

gravierend! Und bevor Sie sich beispielsweise gleich einen Server<br />

für Ihren Web-Auftritt mieten, sollten Sie genau überlegen,<br />

ob Sie 40 GByte oder mehr Speicher wirklich brauchen – denn<br />

bezahlen müssen Sie ihn auf jeden Fall. In fast allen Fällen reicht<br />

ein „normales“ Webhosting-Paket aus.<br />

Es ist erfreulich, dass die Preise für anspruchsvolle Web-<br />

Präsenzen gefallen sind. Bereits für weniger als 5 Euro im Monat<br />

gibt es derzeit Angebote, die bei einem privaten Webseiten-<br />

Betreiber kaum Wünsche offenlassen. Wenn Sie noch einmal<br />

den gleichen Betrag drauflegen, wird es fast immer auch für eine<br />

professionelle Präsenz reichen Und das sollte Ihnen ein guter Internet-Auftritt<br />

allemal wert sein. Michael Brunn, Matthias Semlinger<br />

Webspace<br />

in MByte<br />

250<br />

500<br />

1.000<br />

200<br />

500<br />

1.000<br />

20<br />

100<br />

200<br />

300<br />

250<br />

500<br />

750<br />

200<br />

300<br />

750<br />

1.500<br />

2.500<br />

300<br />

600<br />

1.000<br />

75<br />

120<br />

250<br />

300<br />

500<br />

1.000<br />

500<br />

1.000<br />

Traffic<br />

in GByte<br />

15<br />

25<br />

50<br />

7<br />

10<br />

20<br />

2<br />

10<br />

20<br />

30<br />

25<br />

50<br />

100<br />

20<br />

30<br />

40<br />

75<br />

150<br />

25<br />

50<br />

100<br />

5<br />

9<br />

15<br />

15<br />

25<br />

50<br />

25<br />

50<br />

POP3-<br />

Accounts<br />

150<br />

300<br />

600<br />

100<br />

200<br />

500<br />

10<br />

50<br />

100<br />

200<br />

100<br />

200<br />

500<br />

200<br />

300<br />

500<br />

1.500<br />

2.500<br />

300<br />

600<br />

1.000<br />

50<br />

100<br />

150<br />

200<br />

300<br />

1.000<br />

300<br />

600<br />

PHP-5-<br />

Unterstützung<br />

Termin<br />

noch nicht<br />

bekannt<br />

Termin<br />

noch nicht<br />

bekannt<br />

Termin<br />

noch nicht<br />

bekannt<br />

Vollständige<br />

Umstellung<br />

am 4. 10. 2004<br />

Einbindung bis<br />

23. 8. 2004,<br />

PHP 3 und 4<br />

bleibt weiterhin<br />

Standard x<br />

Termin<br />

noch nicht<br />

bekannt<br />

Termin<br />

noch nicht<br />

bekannt<br />

CHIP | PROFESSIONELL<br />

43


44<br />

AKTUELL | PLANEN | AUFBAU k <strong>HTML</strong> | SPECIAL | OPTIMIEREN |<br />

AUFBAU | INHALT<br />

Seitenaufbau mit <strong>HTML</strong> s46<br />

Was jeder Web-Designer von <strong>HTML</strong> wissen muss, um<br />

einen ansprechenden Internet-Auftritt zu gestalten.<br />

Profi-Hilfe für Designer s52<br />

Die besten Praxis-Tipps für die Vollversion des Web-<br />

Editors Super<strong>HTML</strong> 6.0 auf der Heft-DVD<br />

Daten clever austauschen s58<br />

XML ist das neue Standardformat für den Austausch<br />

von Daten, etwa aus Access via XML ins Web.<br />

So wird XML zu <strong>HTML</strong> s62<br />

Neu: Mit Hilfe der Stilvorlage XSLT werden aus<br />

XML-Daten ansprechend aufbereitete Webseiten.<br />

Schnelle Stilvorlagen s66<br />

Die zentralen Layout-Vorgaben der Cascading Style<br />

Sheets (CSS) optimieren die Verwaltung der Webseite.<br />

Leben für die Webseite s72<br />

Mit JavaScript können Sie nicht nur die Optik, sondern<br />

auch neue Funktionen in Ihre Seite einbauen.<br />

Web-Design mit PHP s82<br />

Neue Informationen schnell auf die Webseite stellen<br />

– mit PHP und MySQL gelingt das im Nu.<br />

AUTOR k markus@schraudolph.de<br />

Markus Schraudolph (38), Journalist und Programmierer,<br />

schreibt seit 16 Jahren Fachzeitschriften-Artikel<br />

zu allen Themen aus dem Computer-Umfeld.<br />

Schon seit den Zeiten von dBase II programmiert<br />

Schraudolph Datenbanken – inzwischen<br />

mit dem Schwerpunkt auf Web-Applikationen.<br />

k <strong>HTML</strong> Editoren, JScript Editoren, die mit <strong>HTML</strong><br />

und JavaScript zurechtkommen, finden Sie auf Heft-<br />

DVD, darunter UltraEdit, Weaverslave oder phase5.<br />

k PHP, XML Unter Demo-Versionen finden Sie Trials<br />

der PHP-IDEs Zend Studio 3.5 und Maguma Workbench.<br />

Eine empfehlenswerte XML-Entwicklungsumgebung<br />

ist die Professional XML Suite 2004.<br />

k Stylesheets Professionelle CSS erzeugen Sie mit<br />

TopStyle Pro oder Rapid CSS (unter <strong>HTML</strong>-Editoren).<br />

CHIP | PROFESSIONELL<br />

k DVD <strong>HTML</strong>-Editoren<br />

Web-Designer benötigen<br />

ein solides Grundwissen.<br />

Denn hinter Akronymen<br />

wie <strong>HTML</strong>, XML, CSS oder<br />

PHP verbirgt sich jeweils<br />

eine eigenständige Tech-<br />

nik. CHIP sagt Ihnen, mit<br />

welchem Werkzeug Sie was<br />

erreichen können. Dazu<br />

finden Sie Tipps von Web-<br />

Experten und -Agenturen.<br />

Eine Webseite aufbauen<br />

Web-Werkz<br />

k<br />

<strong>HTML</strong>, XML, CSS, PHP und dazu auch noch JavaScript<br />

– muss man das wirklich alles bis zur Perfektion beherrschen,<br />

wenn man eine Internet-Präsenz aufbauen will, die sich<br />

ein wenig von der Masse abhebt?<br />

Ganz so schlimm ist es nicht, denn viele Helfer nehmen dem<br />

Web-Programmierer einen Großteil der Arbeit ab, etwa <strong>HTML</strong>-<br />

Editoren wie Super<strong>HTML</strong> (als Vollversion auf der Heft-DVD,<br />

mehr dazu ab s52) oder Entwicklungssysteme für Skriptsprachen.<br />

Es genügt also ein Grundverständnis der jeweiligen Teilbereiche<br />

und ihres Zusammenspiels.<br />

Grund für die Technik-Inflation im Web ist, dass <strong>HTML</strong><br />

ursprünglich als reine Textauszeichnungssprache für wissenschaftliche<br />

Dokumente geplant war. Hauptvorteil von <strong>HTML</strong><br />

sollte die Verknüpfbarkeit der Dokumente untereinander sein.<br />

Als <strong>HTML</strong> dann immer beliebter wurde, stellten die Nutzer<br />

schnell einen Mangel fest: <strong>HTML</strong> definiert zwar, welche Funktion<br />

ein Textteil hat, also etwa „Überschrift“ oder „Zitat“,<br />

aber das Aussehen des Textelements kam erst an zweiter Stelle.<br />

Erst in neueren Auflagen von <strong>HTML</strong> wurde den Wünschen nach


AUFBAUEN<br />

euge richtig ansetzen<br />

Gestaltbarkeit von Webseiten größere Beachtung geschenkt<br />

(mehr zu <strong>HTML</strong> ab s46).<br />

Mit der Einführung der Cascading Style Sheets (CSS) bekam<br />

<strong>HTML</strong> dann auch noch ein Konzept, das man von den Druckformatvorlagen<br />

von Textverarbeitungen kennt: CSS macht die<br />

Definition von Formaten für viele <strong>HTML</strong>-Seiten in einer zentralen<br />

Datei möglich, die dann an der Stelle, an der das jeweilige<br />

Format verwendet werden soll, lediglich über ihren Namen angesprochen<br />

werden. Diese Trennung von Formatierung und<br />

Inhalt durch die CSS spart Zeit, reduziert die Fehleranfälligkeit<br />

und entschlackt die <strong>HTML</strong>-Dokumente erheblich (mehr zu<br />

Cascading Style Sheets ab s66).<br />

Die Vorteile von JavaScript, PHP und XML<br />

Mit JavaScript setzte sich die Idee kleiner Programme durch, die,<br />

in einer <strong>HTML</strong>-Seite untergebracht, auf dem Computer des<br />

Users laufen. Der Nutzen besteht in der Kontrollierbarkeit von<br />

Anwendereingaben in Formularen und der Steuerung von Navigationselementen<br />

wie Frames oder Popup-Fenstern. Mit der<br />

Erweiterung der Möglichkeiten von JavaScript wurde der Nutzbereich<br />

der Sprache immer weiter ausgebaut, beispielsweise<br />

für Grafikeffekte oder aufwendige Menüsysteme (mehr zu<br />

JavaScript ab s72).<br />

Aus dem Wunsch, echte Anwendungen zu programmieren,<br />

die Interaktion mit dem User bieten können, entstanden die<br />

Skriptsprachen, die auf dem Webserver laufen. Großer Beliebtheit<br />

erfreute sich bald PHP, weil es als nichtkommerzielles<br />

System entstanden ist, das auf allen Betriebssystemen läuft und<br />

einen großen Sprachumfang aufweist (mehr zu PHP ab s82).<br />

XML schließlich ist der Universalist unter allen Sprachen im<br />

Web-Umfeld: Es handelt sich dabei um eine Beschreibungssprache,<br />

um nahezu beliebige Daten in eine lesbare und geordnete<br />

Form zu bringen (mehr zu XML ab s58). Darum<br />

wird es als Transportmedium zum Austausch von Daten<br />

zwischen Computern im Internet verwendet (etwa bei SOAP),<br />

aber auch als Mittel, um Vektorgrafiken zu beschreiben, beispielsweise<br />

bei den Scalable Vector Graphics (SVG).<br />

Markus Schraudolph<br />

CHIP | PROFESSIONELL<br />

45


46<br />

AKTUELL | PLANEN | AUFBAU k <strong>HTML</strong> | SPECIAL | OPTIMIEREN |<br />

Die Sprache des Internet nutzen<br />

Seitenaufbau mit <strong>HTML</strong><br />

Jeder Web-Profi musste einst <strong>HTML</strong> lernen – die Sprache, mit der Sie Seiten für das World Wide Web gestalten.<br />

Dieser Workshop vermittelt Ihnen die Grundlagen für einfach strukturierte Web-Auftritte. Und exklusiv in CHIP<br />

verraten Ihnen bekannte Internet-Agenturen und Web-Design-Experten die besten Profi-Tipps.<br />

k<br />

<strong>HTML</strong> besteht aus einer überschaubaren Ansammlung<br />

von Tags, Markierungen in spitzen Klammern. Diese<br />

Tags beziehen sich auf den von ihnen eingeschlossenen Text und<br />

bestimmen dessen Aussehen. Hinzu kommen die Anweisungen<br />

zum Erzeugen von Querverweisen und zum Einbinden von<br />

Grafiken. Das ist im Grunde schon alles.<br />

Und das Beste: Als Programmierwerkzeug für den Einstieg in<br />

<strong>HTML</strong> genügt ein einfacher Editor wie das Windows-Notepad.<br />

Sie können natürlich auch einen Web-Editor wie Super<strong>HTML</strong><br />

6.0 einsetzen, den Sie als Vollversion auf der Heft-DVD finden.<br />

Die damit geschriebenen Dateien versehen Sie mit der Endung<br />

html oder htm und speichern sie auf der Festplatte. Nach dem<br />

Speichern können Sie die <strong>HTML</strong>-Dateien mit einem Doppelklick<br />

im Browser öffnen und ansehen.<br />

1 Das Grundgerüst von Webseiten<br />

Alle WWW-Seiten haben ein gemeinsames Grundgerüst, das<br />

aus folgenden Elementen besteht:<br />

<br />

<br />

<br />

Willkommen bei <strong>HTML</strong><br />

<br />

<br />

[..]<br />

<br />

<br />

Bei DOCTYPE handelt es sich um eine Information für den<br />

Web-Browser, in welchem <strong>HTML</strong>-Dialekt Ihre <strong>HTML</strong>-Datei geschrieben<br />

ist. Diese Zeile können Sie in alle Ihre <strong>HTML</strong>-Dateien<br />

übernehmen. Sie ist auch dann wichtig, wenn Sie Ihre Webseiten<br />

von einem Korrekturwerkzeug überprüfen lassen wollen.<br />

und schließen das WWW-Dokument ein.<br />

und umfassen den Seitenkopf. Die Zeile gibt an, in welchem Zeichensatz das Dokument<br />

verfasst ist. Das ist wichtig, damit alle Browser beispielsweise<br />

Umlaute korrekt darstellen können. Auch diese Zeile sollte in<br />

jedem Ihrer <strong>HTML</strong>-Dokumente zu finden sein.<br />

Der Text, den Sie zwischen und eingeben,<br />

erscheint beim Browser im Fenstertitel — der ist besonders<br />

wichtig für die Suchmaschinen (siehe Artikel ab s142).<br />

Wichtig: Jedes Tag, das beginnt, muss auch abgeschlossen<br />

werden. Zu gehört also , auf muss<br />

irgendwann folgen. Ausnahmen sind „doctype“ und<br />

„meta“. Die verwenden Sie ohne abschließende Tags.<br />

Das -Tag leitet das eigentliche WWW-Dokument ein.<br />

Dort folgt der Inhalt der Seite, zum Beispiel:<br />

<br />

<strong>HTML</strong>-Schnellkurs<br />

Willkommen im <strong>HTML</strong>-Schnell<br />

kurs.


Die besten <strong>HTML</strong>-Seiten im Internet<br />

Web-Design in der Praxis<br />

k http://www.siteform.de/tutorials<br />

Tutorials zum Gestalten von Webseiten von Dave Raggett<br />

Starke Praxis-Tipps k http://www.webconrad.com/<br />

Tipps, Tricks und allerlei Nützliches zu <strong>HTML</strong><br />

Website für Frame-Gegner<br />

k http://www.subotnik.net/html/frames.html<br />

Gründe gegen den Einsatz von Frames in <strong>HTML</strong><br />

tät zu den vom User verwendeten<br />

Browsern dar.<br />

Ohne eine funktionelle<br />

<strong>HTML</strong>-Programmierung<br />

lässt sich die beste Backend-Programmierung<br />

nicht umsetzen“, so Nicole<br />

Weber, Senior Project<br />

Manager bei<br />

orange digital.<br />

Die Sprache<br />

<strong>HTML</strong> bietet<br />

Features, die für<br />

eine professionelle<br />

Webseite<br />

unerlässlich<br />

sind. Entscheidender<br />

Vorteil ist die Performance:<br />

Die Ladezeiten sind im Vergleich zu<br />

WYSIWYG-Editoren kürzer, weil der<br />

Sourcecode (Quelltext) kompakter<br />

bleibt. Um die Verwaltung und<br />

Pflege einer Homepage zu erleichtern,<br />

sollten die Quelltexte<br />

durch Absätze und Einrückungen<br />

strukturiert werden. Auch Kommentare<br />

im Quelltext tragen zu<br />

„<strong>HTML</strong> ist die Basis<br />

für die Visualisierung<br />

von Content“<br />

NICOLE WEBER, SENIOR PROJECT MANAGER<br />

ORANGE DIGITAL<br />

einer besseren Verwaltung<br />

bei.<br />

Ebenso wichtig ist die<br />

grafische Gestaltung: Ein<br />

guter Internet-Auftritt<br />

zeichnet sich durch ein<br />

kreatives Interface-Design<br />

aus. Die Basis aller<br />

Design-Prin-<br />

zipien ist eine<br />

funktionierende<br />

Usability und<br />

damit der funktionale<br />

Aufbau<br />

und die klare<br />

User-Führung.<br />

Ob Multimedia-<br />

und IT-Beratung, konzeptionelle<br />

Entwicklung oder grafische<br />

und technische Realisierung – orange<br />

digital bietet Fullservice aus<br />

einer Hand. Kunden sind etwa die<br />

Allianz Arena München Stadion<br />

GmbH, sueddeutsche.de GmbH, FC<br />

Bayern München AG und die Antenne<br />

Bayern GmbH & Co. KG.<br />

k www.orange-digital.de<br />

Hier lernen Sie die Grund<br />

lagen von <strong>HTML</strong> ganz schnell.<br />

Innerhalb von Absätzen kann ich auch<br />

einen Zeilenumbruch einfügen.<br />

<br />

Bei dem handelt es sich um eine Überschrift der<br />

obersten Ebene. Sie wird im Browser groß und fett angezeigt.<br />

Mit , bis können Sie weitere Überschriften<br />

setzen, die dann entsprechend kleiner erscheinen. Natürlich<br />

dürfen Sie auch mehrere Überschriften mit verwenden.<br />

Nutzen Sie diese Gliederungshilfe, um Ihre <strong>HTML</strong>-Seiten<br />

übersichtlich zu gestalten. Vergessen Sie aber nicht: Jede<br />

Headline immer schön mit und so weiter abschließen!<br />

Sonst erscheint der Rest der Seite als Überschrift.<br />

ist die Absatzmarke, die jeden Textabsatz umschließt.<br />

Zwischen die Absätze packt der Web-Browser grundsätzlich<br />

einen kleinen Zwischenraum. Das erleichtert das Lesen längerer<br />

Texte ungemein.<br />

In einem der Absätze findet sich noch ein anderes Tag:<br />

. Dabei handelt es sich um einen Zeilenumbruch. Dieses<br />

Tag muß nicht mit einem abgeschlossen werden; stattdessen<br />

setzen Sie einen Schrägstrich an den Schluss des Tags.<br />

Natürlich funktioniert auch ohne abschließenden<br />

Schrägstrich. Falls Sie allerdings planen, sich später auch<br />

einmal mit XML zu beschäftigen (siehe Artikel ab s58), sollten<br />

Sie sich gleich angewöhnen, Elemente ohne Inhalt mit dem<br />

abschließenden Schrägstrich zu kennzeichnen.<br />

2 Aufzählungen verbessern die Übersicht<br />

Ein weiteres Werkzeug zum Strukturieren einer Webseite sind<br />

Aufzählungen. Die sehen so aus:<br />

Meine Hobbies sind:<br />

<br />

Computer<br />

Mountain-Biking<br />

Rennrad fahren<br />

<br />

Jetzt steht vor jedem Hobby ein Aufzählungszeichen. Und<br />

die einzelnen Punkte sind eingerückt. Analog zu („unordered<br />

list“) können Sie auch („ordered list“) anwenden.<br />

Die Funktion ist mit identisch bis auf die Tatsache, dass<br />

die einzelnen von und umgebenen Unterpunkte<br />

durchnummeriert werden.<br />

3 Hyperlinks einbauen<br />

Das Rückgrat des World Wide Web sind die Hyperlinks, die<br />

Querverweise von einer Webseite zur anderen. Mit<br />

Klick<br />

erzeugen Sie einen Hyperlink. Ein Mausklick auf diese<br />

Querverbindung bringt Ihren Gast zu dem Dokument bla.html<br />

auf dem Server www.foo.bar. Mit können Sie<br />

auch auch zu weiteren Seiten auf Ihrem Server verweisen.<br />

Nehmen wir etwa Ihr Hobby Mountain Biking. Statt der Zeile<br />

Mountain Biking<br />

können Sie folgenden Text einfügen<br />

Mountain Biking<br />

Der Ausdruck „Mountain Biking“ erscheint dann blau und<br />

unterstrichen. Ein Klick darauf überträgt die Seite mtb.html<br />

zum Browser. Den Querverweis schließen Sie mit ab.<br />

Eine weitere Funktion von ist der Verweis auf Ihre<br />

E-Mail-Adresse. Mit<br />

Schicken<br />

Sie mir eine Mail<br />

erzeugen Sie einen Hyperlink, der nach einem Klick das<br />

E-Mail-Programm des Benutzers öffnet und die hinter „mailto“<br />

stehende Adresse als Empfänger einsetzt. So lässt sich sehr einfach<br />

eine Möglichkeit zur Kontaktaufnahme einbauen. Aber<br />

aufgepasst: Genau auf solche Adressen haben es Spam-Versender<br />

abgesehen. Verwenden Sie am besten eine Adresse bei<br />

einem Provider, der Spam filtert, etwa GMX.<br />

4 Bilder in die Seite einbinden<br />

Kein Internet-Auftritt kommt ohne Bilder aus. Halten Sie sich<br />

aber möglichst an diese Regeln:<br />

Klein ist fein, keine Bilder über 80 KByte online stellen k<br />

CHIP | PROFESSIONELL<br />

47


48<br />

AKTUELL | PLANEN | AUFBAU k <strong>HTML</strong> | SPECIAL | OPTIMIEREN |<br />

Fotos im JPEG-Format speichern<br />

Schemazeichnungen und Screenshots im GIF- oder PNG-Format<br />

speichern<br />

Ein Bild binden Sie ein mit<br />

<br />

Der Browser sucht dann das Bild „bild.gif“ und zeigt es an.<br />

Die Datei „bild.gif“ muss in diesem Beispiel im selben Verzeichnis<br />

liegen wie die aufrufende <strong>HTML</strong>-Datei. Falls das Bild<br />

in einem Unterverzeichnis liegt, geben Sie es mit an, etwa<br />

<br />

Der Parameter „alt“ enthält eine kurze Beschreibung des<br />

Bildes, die Sie immer mit angeben sollten. Grund 1: Hat der<br />

Benutzer die Anzeige von Bildern abgeschaltet oder einen textorientierten<br />

Browser, erhält er trotzdem eine Information, was<br />

das Bild zeigt. Grund 2: Auf diese Weise erhalten auch Sehbehinderte<br />

und Blinde Informationen über den Bildinhalt.<br />

INSPIRATION AUS DEM INTERNET<br />

Gute Seiten im Quelltext ansehen<br />

Keine Ideen für das Design?<br />

Dann sehen Sie sich mal im<br />

World Wide Web um. Wenn<br />

Ihnen eine Internet-Seite besonders<br />

gefällt, schauen Sie sich<br />

diese Seite als Quelltext an.<br />

Dazu wählen Sie in Mozilla den<br />

Menüpunkt Ansicht | Seitenquelltext<br />

oder im Internet Explorer<br />

von Microsoft Ansicht |<br />

CHIP | PROFESSIONELL<br />

5 Tabellen perfekt einrichten<br />

Das -Tag gehört zu den wichtigsten Elementen in<br />

<strong>HTML</strong>. Einerseits lassen sich in Tabellen lange Listen gut unterbringen,<br />

andererseits sind Tabellen neben Cascading Stylesheets<br />

das beste Hilfsmittel, um Seiteninhalte exakt zu plazieren.<br />

Tabellen in <strong>HTML</strong> folgen einem einfachen Schema. Jede<br />

Liste wird mit eingeleitet und endet mit .Die<br />

Zeilen einer Tabelle starten mit einem für „Table Row“<br />

und enden mit . Schließlich folgen die Daten mit <br />

und für „Table Data“. Diese Tags sind ineinander ver-<br />

Quelltext. Der Vorteil von<br />

Mozilla: <strong>HTML</strong>-Elemente und<br />

andere Inhalte erscheinen farblich<br />

voneinander abgesetzt –<br />

das erleichtert den Überblick.<br />

Übernehmen Sie einfach per<br />

Cut&Paste die für Sie interessanten<br />

Elemente und experimentieren<br />

Sie damit. So lernen<br />

Sie am schnellsten dazu.<br />

SCHÖN ÜBERSICHTLICH: In der Quelltext-Anzeige von Mozilla<br />

erscheinen <strong>HTML</strong>-Befehle farblich abgehoben.<br />

schachtelt. Auf oberster Ebene steht die Tabellendefinition,<br />

dann folgen die Zeilen und darin wiederum befinden sich die<br />

Zellen. Ein Tabellengrundgerüst sieht so aus:<br />

<br />

<br />

Spalte 1, Zeile 1<br />

Spalte2, Zeile 1<br />

<br />

<br />

Spalte 1, Zeile 2<br />

Spalte2, Zeile 2<br />

<br />

Browser zeichnen Tabellen von Haus aus ohne Linien<br />

zwischen den Zellen. Erst mit der Eingabe von sehen Sie klar. Denn dann erscheinen zwischen<br />

den Zellen dünne Trennlinien.<br />

„Border“ ist eigentlich nur als Layout-Helfer sinnvoll. Wenn<br />

Sie knifflige Seiten-Layouts mit Tabellen basteln, sollten Sie in<br />

der Design-Phase „border“ auf „1“ stellen. Dann sehen Sie die<br />

Abgrenzungen und können die Inhalte besser positionieren und<br />

Dimensionen besser abschätzen. Erst wenn das Layout fertig ist,<br />

stellen Sie „border“ wieder auf „0“. Um richtig ästhetische Tabellenlinien<br />

zu gestalten, sollten Sie Cascading Stylesheets<br />

(CSS) verwenden. Mehr dazu lesen Sie im Artikel ab s66.<br />

Neben Zeilen und Zellen gibt es noch Tags für Überschriften:<br />

sorgt für eine Tabellenüberschrift, die sich genau<br />

der Tabellenbreite anpasst:<br />

<br />

Tabellen&uuml;berschrift<br />

&uuml;ber die Gesamtbreite<br />

der Tabelle<br />

[..]<br />

<br />

Der Text im „caption“-Element erscheint dann zentriert<br />

über der Liste.<br />

Wenn es um Überschriften für die einzelnen Tabellenspalten<br />

geht, ist das Tag der Wahl. Es wird genauso<br />

angewendet wie , formatiert aber den Zellinhalt fett und<br />

zentriert ihn über der Spalte.<br />

<br />

Head 1Head 2<br />

Spalte 1, Zeile<br />

1Spalte2, Zeile 1<br />

[..]<br />

<br />

6 Höhe und Breite wählen<br />

Eine Tabelle ist grundsätzlich so breit wie die freie Fläche im<br />

Browser – das sieht aber nicht immer gut aus. Für Abhilfe sorgt<br />

der „width“-Parameter. Der regelt die Breite der Tabelle und<br />

verträgt relative und absolute Werte. Mit <br />

nimmt die Tabelle genau die Hälfte des Browser-Fensters ein.<br />

Exakt 300 Pixel breit wird die Liste, wenn Sie eingeben – ideal für das Seiten-Layout.<br />

Auch die Tags und vertragen den width-Parameter.<br />

legt die Breite der Spalte auf 100<br />

Bildpunkte fest. Verwenden Sie immer nur einen Parameter,


DER EXPERTEN-TIPP VON STEFAN MÜNZ<br />

Schlechtes und gutes <strong>HTML</strong><br />

Sequenzen wie diese ...<br />

Wichtig!<br />

... sind schlechtes <strong>HTML</strong> – einfach<br />

weil hier ein Großteil des<br />

Codings dafür verwendet wird,<br />

um optische Effekte herzustellen.<br />

Dagegen lässt so etwas wie:<br />

Wicht<br />

REFERENZ:<br />

Self<strong>HTML</strong> ist ein<br />

hervorragendes<br />

Angebot im Internet.<br />

Auf der Seite<br />

www.selfhtml.org<br />

erfahren Sie alles,<br />

was Sie zu <strong>HTML</strong><br />

wissen müssen.<br />

Self<strong>HTML</strong> 8.0<br />

finden Sie auch<br />

auf der Heft-DVD.<br />

sonst kommt Ihre Tabelle durcheinander. Auch in den Zellen<br />

verträgt „width“ Prozentwerte oder absolute Angaben in Pixel.<br />

Wichtig: Wenn eine Zelle beispielsweise wegen einer eingebundenen<br />

Grafik breiter ist als in „width“ festgelegt, wirft der<br />

Browser diese Angaben über Bord und zeigt die Grafik in voller<br />

Breite an. Analog zur Breite bestimmt „height“ die Höhe einer<br />

Zelle und der gesamten Datenzeile.<br />

7 Mehrspaltige Zellen programmieren<br />

<strong>HTML</strong> unterteilt Tabellen in gleichmäßige Raster. Um Zellen zu<br />

programmieren, die mehrere Zeilen oder Spalten umfassen,<br />

benötigen Sie die Parameter „colspan“ und „rowspan“. Sie<br />

werden dem „td“-Tag beigefügt und tragen als Wert die Anzahl<br />

der Spalten oder Zeilen, über die sich die Zelle erstrecken soll.<br />

Eine Zelle,<br />

die sich &uuml;ber vier Zeilen<br />

erstreckt<br />

[..]<br />

Eine Zelle,<br />

die sich &uuml;ber zwei Spalten<br />

erstreckt<br />

Achtung: Liegt der Wert von „colspan“ oder „rowspan“ höher<br />

als die tatsächliche Anzahl der Spalten und Zeilen, kann das<br />

Tabellen-Layout durcheinandergeraten – vor allem dann, wenn<br />

Sie Tabellen schachteln. Wichtig: „rowspan“ bezieht sich immer<br />

auf die nachfolgenden Zeilen. Sie müssen also „rowspan“ in der<br />

Zeile plazieren, in der die Zelle beginnen soll. Nachträglich an<br />

das Ende einer Tabelle eingefügte „rowspan“-Zellen haben<br />

keinerlei Effekt.<br />

8 Abstände in der Tabelle einrichten<br />

Mit „cellpadding“ bestimmen Sie den Abstand eines Tabelleninhaltes<br />

zum Zellenrand. Je höher Sie den Parameter „cell-<br />

Webmaster-Tools<br />

ig!<br />

... auf ordentliches <strong>HTML</strong> schließen,<br />

denn am Ende kann optisch<br />

das Gleiche am Bildschirm erscheinen<br />

wie beim obigen Code,<br />

aber mit dem Unterschied, dass<br />

die Optik in einer separat notierten<br />

CSS-Klasse definiert wird<br />

und nicht mehr mitten im <strong>HTML</strong>-<br />

Code mit Hilfe obsolet gewordener<br />

Elemente und Attribute.<br />

Das spart zudem Code und damit<br />

Bytes, ist änderungsfreundlich<br />

und entspricht dem modernen<br />

Standard.<br />

Schlechtem <strong>HTML</strong> begegnet<br />

man heute vor allem noch dort,<br />

wo mit WYSIWYG-Editoren wie<br />

zum Beispiel Microsoft Frontpage<br />

gearbeitet wird, oder dort, wo<br />

EXPERTE<br />

Stefan Münz,<br />

Technischer Redakteur<br />

und<br />

Web-Entwickler,<br />

schuf 1995 mit<br />

seiner <strong>HTML</strong>-<br />

Dokumentation<br />

SELF<strong>HTML</strong> ein<br />

Grundlagenwerk für alle, die im<br />

Internet publizieren. Das „<strong>HTML</strong> &<br />

Web-Publishing-Handbuch“ von<br />

Stefan Münz und Wolfgang Nefzger<br />

ist im Franzis Verlag erschienen<br />

(69,95 Euro).<br />

k stefan.muenz@selfhtml.org<br />

Web-Designer am Werk waren,<br />

die ihr Handwerk schon vor einigen<br />

Jahren erlernt und sich<br />

seitdem nicht mehr weiterentwickelt<br />

haben.<br />

padding“ setzen, desto weiter rückt der Rand vom Inhalt weg.<br />

Ideal ist dieser Parameter, um umfangreichen Datentabellen<br />

ein etwas lockeres Aussehen zu geben – die Werte stehen dann<br />

nicht so eng beieinander.<br />

Wenn Sie Datentabellen einsetzen, sollten Sie grundsätzlich<br />

„cellpadding“ auf den Wert „5“ setzen. Der Parameter gilt<br />

für die gesamte Tabelle und muss also beim Table-Tag stehen:<br />

. Außerdem wichtig zu wissen:<br />

Von Haus aus stellt ein Browser den Parameter „cellpadding“<br />

immer auf den Wert „1“. Wenn Sie Layoutaufgaben mit Tabellen<br />

erfüllen wollen, sollten Sie grundsätzlich <br />

einsetzen.<br />

k<br />

SYNTAX-CHECK: Das W3C bietet unter http://validator.w3.org/<br />

einen Validierungsservice, der Ihre <strong>HTML</strong>-Seiten überprüft.<br />

CHIP | PROFESSIONELL<br />

49


50<br />

AKTUELL | PLANEN | AUFBAU k <strong>HTML</strong> | SPECIAL | OPTIMIEREN |<br />

„cellspacing“ steht für den Abstand zwischen den Zellen. Mit<br />

rücken alle Zellen zehn Bildpunkte<br />

auseinander. Dieser Abstand gilt auch ober- und unterhalb von<br />

Zellen. „cellspacing“ sollten Sie mit Bedacht verwenden. Werte<br />

über 5 bringen hässliche Resultate, besonders wenn zusätzlich<br />

„border“ eingeschaltet ist. Dann erscheinen dicke Balken als Abgrenzungen<br />

zwischen den Zellen. Einen positiven Aspekt hat<br />

„cellspacing“ für <strong>HTML</strong>-Designer: Wenn Sie „cellspacing“ auf<br />

„0“ setzen, erhalten Sie ein exaktes Tabellen-Layout.<br />

9 Tabellen und Zellen ausrichten<br />

Tabellen, die sich immer nur an den linken Browser-Rand<br />

quetschen, sind langweilig. Probieren Sie alternativ dazu den<br />

Parameter „align“ und seine Werte „right“ und „center“. Mit<br />

<br />

zum Beispiel plazieren Sie Ihre Tabelle exakt auf der Mitte<br />

der Seite.<br />

DIE WICHTIGSTEN <strong>HTML</strong>-TAGS<br />

Tag Bedeutung<br />

Zeilenumbruch<br />

... Absatz<br />

fügt eine horizontale Linie ein<br />

... formatiert den folgenden Text kursiv<br />

... formatiert den folgenden Text fett<br />

... Überschrift (weitere Größen mit<br />

... und so weiter<br />

bindet ein Bild ein, der Dateiname der<br />

Grafik wird über den Parameter „src“<br />

angegeben, also <br />

definiert einen Querverweis zu einem<br />

anderen Dokument oder einem anderen<br />

Server, etwa mit Kurzer Text des Hyperlinks<br />

<br />

... erzeugt eine Tabelle<br />

... erzeugt eine neue Zeile in der Tabelle<br />

... erzeugt eine Zelle in der Tabelle<br />

... erzeugt eine unsortierte Liste. Die<br />

einzelnen Listenpunkte werden mit<br />

einem vorangestellten Aufzählungszeichen<br />

angezeigt<br />

... erzeugt eine sortierte Liste; die einzelnen<br />

Listenpunkte werden durchnummeriert<br />

... erzeugt ein Listenelement innerhalb<br />

einer Liste<br />

... markiert einen Bereich innerhalb eines<br />

Abschnitts (Blocks), der später mit Hilfe<br />

von CSS formatiert werden kann<br />

... markiert einen Bereich, der auch<br />

Abschnitte (Blöcke) enthalten kann;<br />

diese lassen sich ebenfalls mit CSS<br />

formatieren<br />

... erzeugt ein Formular<br />

... erzeugt ein Eingabefeld innerhalb eines<br />

Formulars<br />

CHIP | PROFESSIONELL<br />

Webmaster-Tools<br />

Analog dazu richtet <strong>HTML</strong> auch die Inhalte in Zellen aus. An<br />

dieser Stelle stehen Parameter für die horizontale und die vertikale<br />

Plazierung zur Verfügung. Jeder Zelleninhalt lässt sich mit<br />

mittig und mit <br />

rechts ausrichten. Die Einstellung align=“left“ entspricht der<br />

Voreinstellung des Browsers.<br />

Für die vertikale Ausrichtung sorgt „valign“. Dabei gelten die<br />

Werte „top“, „middle“ und „bottom“ für oben, Mitte und unten.<br />

„middle“ ist die Voreinstellung des Browsers.<br />

Lohnenswert ist bei mehrzeiligen Tabelleneinträgen.<br />

Denn es sieht nicht gut aus, wenn diese neben<br />

Einzeilern mittig stehen.<br />

10 Farben für die Tabellen<br />

Farben und Rahmen für Tabellen legen Sie am besten in<br />

Cascading Stylesheets fest. Falls es aber einmal schnell gehen<br />

muss, können Sie die Formatierungsaufgaben auch in der<br />

Tabelle erledigen:<br />

<br />

Der Browser färbt dann alle Zellen orange ein. Achtung: Die<br />

Tabellenüberschrift bleibt davon unberührt.<br />

„bgcolor“ lässt sich auch in einer Zelle einsetzen. Dabei<br />

überschreibt diese Angabe den Grundwert aus der Tabellendefinition.<br />

Die Anweisung koloriert<br />

den Zellhintergrund in Hellblau – der Rest der Tabelle<br />

bleibt in diesem Beispiel orangefarben.<br />

Um ganze Tabellenzeilen einzufärben, muss man nicht in<br />

jeder einzelnen Zelle die Farbe eingeben. Es reicht, wenn Sie<br />

dem „tr“-Tag einen „bgcolor“-Parameter mit auf den Weg<br />

geben. Der sorgt dann dafür, dass alle Zellen dieser Zeile in<br />

der entsprechenden Farbe erscheinen:<br />

<br />

Orangen<br />

Birnen<br />

<br />

11 Formatierungen mit CSS<br />

GRENZZIEHUNG:<br />

Mit dem Parameter<br />

„border“ sehen<br />

Sie die Umrahmung<br />

einzelner Tabellenzellen.<br />

Auch wenn Sie das Aussehen von Tabellen und anderen <strong>HTML</strong>-<br />

Elementen über Parameter beeinflussen können: Steigen Sie<br />

sobald wie möglich auf Cascading Stylesheets (CSS) um. Denn<br />

damit haben Sie weitaus bessere Formatierungsmöglichkeiten<br />

und können vor allem ganz einfach immer wieder das Aussehen<br />

Ihrer Webseiten ändern, ohne direkt in den <strong>HTML</strong>-Code<br />

einzugreifen. Das spart Ihnen eine Menge Arbeit. Die Einzelheiten<br />

zu CSS finden Sie im Artikel ab s66. Martin Goldmann


PROFESSIONELL<br />

FORUM<br />

KAI LABORENZ ist seit 1994 als Web-Designer tätig.<br />

Seitdem hat er sein Wissen in Kursen und Workshops<br />

vermittelt, unter anderem beim größten deutschen<br />

E-Learning-Anbieter Akademie.de. Von Kai Laborenz<br />

stammen die Tipps zu CSS auf s69 und s132.<br />

SASCHA WOLTER berät seit 1995 Unternehmen, Zeitschriften<br />

und Fernsehsender. International ist der<br />

Gründer der Macromedia User Group freiberuflich als<br />

Autor, Entwickler, Projektleiter, Referent und Trainer<br />

tätig. Er schrieb die Tipps zu Flash auf s151.<br />

| IMPRESSUM |<br />

Chefredakteur: Thomas H. Kaspar (verantwortlich)<br />

Stellv. Chefredakteur: Andreas Vogelsang<br />

Redaktion: Stephan Goldmann, Niels Held, Markus Schmidt<br />

Schlussredaktion: Dr. Günther Neumann<br />

Autoren dieser Ausgabe: Edgar Braunwarth, Michael Brunn, Peter Filinski,<br />

Martin Goldmann, Christian Grandl, Tobias Hauser, Dr. Andreas Holzinger,<br />

Martin Kirmaier, Stefan Kurzweg, Kai Laborenz, Claus Lehmann, Dieter Mayer,<br />

Prof. Dr. Arnulf Mester, Stefan Münz, Dr. Karl Prinz, Tommy Schmidt,<br />

Markus Schraudolph, Florian Schuster, Michael Schweizer, Matthias Semlinger,<br />

Nicole Weber, Christian Wenz, Prof. Dr. Thomas Wirth<br />

Electronic Publishing: Redaktionsbüro Typemania, Karsten Kurda<br />

Produktmanagement CHIP-Sonderhefte:<br />

Julia Urban<br />

Leserservice CHIP-Sonderhefte: sonderhefte@chip.de<br />

Grafische Gestaltung: Steffi Schönberger (Ltg.), Isabella Schillert<br />

Titel: Steffi Schönberger<br />

EBV: Jürgen Bisch, Gisela Zach<br />

Bildredaktion: Gabi Koller-Rudat<br />

Content Management Software: Felix Godron<br />

Geschäftsführer: Dr. Markus Witt, Josef Zach<br />

Verlags- und Anzeigenleiter CHIP Sonderhefte:<br />

Jürgen Hiller<br />

Herstellung: Dieter Eichelmann, Verlags-Herstellung,<br />

Vogel-Service GmbH, D-97082 Würzburg<br />

Verlag: Vogel Burda Communications GmbH,<br />

Poccistraße 11, D-80336 München,<br />

Tel. (089) 746 42-0, Fax: (089) 74 60 56-0<br />

Die Inhaber- und Beteiligungsverhältnisse lauten:<br />

Alleinige Gesellschafterin ist die Vogel Burda Holding GmbH mit Sitz in<br />

Poccistraße 11, D-80336 München<br />

Anzeigenverkauf: Brigitta und Karl Reinhart,<br />

Tel. (089) 46 47 29, Fax: (089) 46 38 15<br />

Zentrale Anzeigenverwaltung und Disposition:<br />

Linda Anders, Tel. (089) 746 42-529, Fax -300<br />

Sabine Maurer, Tel. (089) 746 42-252, Fax -300<br />

Vertrieb Einzelverkauf:<br />

Burda Medien Vertriebs GmbH,<br />

Arabellastraße 23, D-81925 München<br />

Bereichsleiter Vertrieb: Achim Frank<br />

Druck: parzeller Druck und Medienleistungen,<br />

D-36043 Fulda<br />

Nachdruck: © 2004 by Vogel Burda Communications<br />

GmbH. Nachdruck nur mit schriftlicher<br />

Genehmigung der Redaktion. Christiane Bertsch<br />

(E-Mail: cbertsch@vogelburda.com)<br />

Digitale Druckvorlagenherstellung:<br />

Verlags-Service, D-97082 Würzburg<br />

| COMMUNITY 51<br />

Diskutieren Sie mit<br />

unseren Experten!<br />

PROF. DR. ANDREAS HOLZINGER arbeitet, lehrt und<br />

forscht derzeit an der Universität Graz im Fach<br />

Informationsverarbeitung. Andreas Holzinger hat<br />

13 Bücher und zahlreiche Zeitschriftenartikel verfasst,<br />

darunter den Beitrag zu den Design-Regeln ab s10.<br />

CHIP Professionell: Das Forum<br />

Warum mit der Seite plagen, uns können Sie die Pleite sagen! Für CHIP Professionell<br />

haben wir unter www.chip.de/sonderhefte ein Forum eingerichtet.<br />

Die besten Experten schreiben nicht nur in diesem Heft, sondern beantworten<br />

auch in den Threads Fragen, geben Tipps und diskutieren zu allen Web-Themen.<br />

TOBIAS HAUSER und sein Kollege Christian Wenz sind<br />

Buchautoren im Bereich Web-Design und Web-Entwicklung<br />

und berichten über die Client- und Server-seitige<br />

Entwicklung moderner Webseiten. Hauser und Wenz<br />

schrieben die Tipps zu PHP auf s85 und s90.<br />

DR. KARL PRINZ ist Geschäftsführer der Münchner<br />

Agentur Screamdesign, die auf die Konzeption und<br />

Realisierung von Internet-Anwendungen sowie auf das<br />

Design großer Webseiten spezialisiert ist. Karl Prinz<br />

verfasste die Tipps zu CSS auf s66 und s132.<br />

CLAUS LEHMANN publiziert das Verzeichnis Partnerprogramme.com,<br />

berät Unternehmen bei der Einführung<br />

von Partnerprogrammen und ist Autor des<br />

Buches „Geld verdienen im Internet durch kostenlose<br />

Partnerprogramme.“ Er schrieb den Beitrag ab s154.<br />

Für unverlangt eingesandte Manuskripte wird keine Haftung übernommen. Für die mit<br />

Namen oder Signatur des Verfassers gekennzeichneten Beiträge übernimmt die<br />

Redaktion lediglich die presserechtliche Verantwortung. Die in dieser Zeitschrift veröffentlichten<br />

Beiträge sind urheberrechtlich geschützt. Übersetzung, Nachdruck, Vervielfältigung<br />

sowie Speicherung in Datenverarbeitungsanlagen nur mit ausdrücklicher<br />

schriftlicher Genehmigung des Verlages. Jede im Bereich eines gewerblichen Unternehmens<br />

hergestellte oder benutzte Kopie dient gewerblichen Zwecken gem. § 54 (2)<br />

UrhG und verpflichtet zur Gebührenzahlung an die VG Wort, Abteilung Wissenschaft,<br />

Goethestraße 49, 80336 München, von der die Zahlungsmodalitäten zu erfragen sind.<br />

Die Redaktion CHIP recherchiert akribisch nach bestem Wissen und Gewissen. Sollte<br />

trotzdem eine Veröffentlichung Fehler enthalten, kann hierfür keine Haftung übernommen<br />

werden. Sämtliche Veröffentlichungen in CHIP erfolgen ohne Berücksichtigung<br />

eines eventuellen Patentschutzes, auch werden Warennamen ohne Gewährleistung einer<br />

freien Verwendung benützt.<br />

CHIP | PROFESSIONELL


52<br />

AKTUELL | PLANEN | AUFBAU k Super <strong>HTML</strong> | SPECIAL | OPTIMIEREN |<br />

Vollversion Super<strong>HTML</strong> 6.0<br />

Profi-Hilfe für Designer<br />

Manuell erzeugter Quelltext für Webseiten ist schlanker und lässt sich einfach anpassen. Mit dem mächtigen Editor<br />

Super<strong>HTML</strong> haben Sie die wichtigsten Befehle für <strong>HTML</strong>, JavaScript und CSS für <strong>HTML</strong>- und XML-Projekte schnell<br />

griffbereit. CHIP verrät die besten Tipps für die Arbeit mit der uneingeschränkten Vollversion auf Heft-DVD.<br />

k<br />

Super<strong>HTML</strong> 6.0 ist ein komfortabler Quellcode-Editor<br />

für umfangreiche <strong>HTML</strong>- und XML-Projekte. Zusätzlich<br />

unterstützt das Programm JavaScript und Cascading Stylesheets.<br />

Super<strong>HTML</strong> arbeitet komplett code-basiert. So behalten Sie<br />

die volle Kontrolle über alle Funktionen Ihrer Webseite. Gerade<br />

für professionelle Anwender, die ihre Dokumente ohne Einschränkungen<br />

produzieren wollen, ist Super<strong>HTML</strong> ein nützliches<br />

Werkzeug. Die Vollversion von Super<strong>HTML</strong> 6.0 auf der<br />

IM ÜBERBLICK<br />

Super<strong>HTML</strong> – so finden Sie sich schnell zurecht<br />

TAG-PALETTE In den verschiedenen Registern<br />

der Tag-Palette haben Sie Zugriff auf die<br />

wichtigsten <strong>HTML</strong>-Tags und die Super<strong>HTML</strong>-<br />

Assistenten, etwa auf den Tabellen- oder den<br />

Frames-Assistenten.<br />

OBJEKT-MANAGER Der Objekt-Manager<br />

enthält verschiedene Funktionen, die als<br />

SnapIns bezeichnet werden. Zu den SnapIns<br />

zählen eine vollständige <strong>HTML</strong>-Befehlsliste,<br />

ein Dateimanager, Sonderzeichen- und Farbpalette,<br />

eine Funktion zum Einfügen von fertigen<br />

Textpassagen, eine Übersicht der<br />

aktuellen Projektdaten und ein einfacher<br />

FTP-Zugriff mit Drag&Drop-Unterstützung.<br />

ARBEITSFLÄCHE Zeigt den <strong>HTML</strong>-Code der aktuellen<br />

Datei an. Per Klick wird zwischen interner<br />

Vorschau und <strong>HTML</strong>-Code gewechselt.<br />

DATEILEISTE Jede geöffnete Datei wird hier<br />

als Button angezeigt. Durch Anklicken kann<br />

zwischen den Fenstern gesprungen werden.<br />

CHIP | PROFESSIONELL<br />

k DVD Vollversionen<br />

k Super<strong>HTML</strong> 6.0 (Vollversion) Der hochwertige <strong>HTML</strong>-<br />

Editor unterstützt nicht nur <strong>HTML</strong>, sondern bietet darüber<br />

hinaus Funktionen zum Erstellen von StyleSheets oder<br />

Java(Script). Viele kleine Features, etwa die Prüfung<br />

lokaler Links, die Berechnung der Ladezeit Ihrer Homepage<br />

oder der <strong>HTML</strong>-Check, erleichtern die Arbeit erheblich.<br />

Heft-DVD schalten Sie frei, indem Sie unter www.registrierung.superhtml.de/shtml6chip<br />

Ihre kostenlose persönliche Seriennummer<br />

anfordern.<br />

Super<strong>HTML</strong> einfach bedienen<br />

Die Bedienoberfläche von Super<strong>HTML</strong> orientiert sich an<br />

gängigen Windows-Anwendungen, zum Beispiel an den Office<br />

Programmen. Die wichtigsten Menübefehle sind auf Buttonleisten<br />

zusammengefasst.<br />

Über die Tag-Palette greifen Sie auf häufig verwendete<br />

<strong>HTML</strong>-Befehle per Mausklick zu. So erzeugen Sie schnell und<br />

einfach <strong>HTML</strong>-Code, etwa für Formularelemente oder zur<br />

Formatierung von Text. Neben <strong>HTML</strong>-Befehlen können auch<br />

oft benötigte Assistenten, zum Beispiel der Tabellenassistent,<br />

direkt aus der Tag-Palette aufgerufen werden. Wenn Sie mehrere<br />

Dokumente gleichzeitig bearbeiten, zeigt Super<strong>HTML</strong> für jede<br />

geöffnete Datei einen Button in der Dateileiste an, ähnlich der<br />

Windows-Taskbar. So schalten Sie bei Bedarf schnell zwischen<br />

einzelnen Dokumenten um. Im Objektmanager links greifen Sie


Die besten Super<strong>HTML</strong>-Tipps im Web<br />

Alles über den <strong>HTML</strong>-Editor k www.superhtml.de<br />

Auf dieser Webseite erfahren Sie alles rund um Super<strong>HTML</strong><br />

und können kostenlose Plugins und Addons laden.<br />

Von Profis für Profis k www.planethtml.de<br />

Hier finden Sie zahlreiche Tipps und Tricks rund um <strong>HTML</strong>.<br />

Die absolute Referenz k http://selfhtml.teamone.de<br />

Diese Seite bietet eine umfassende <strong>HTML</strong>-Referenz – für wirklich<br />

jede Frage rund um <strong>HTML</strong> und Web-Design.<br />

auf verschiedene Funktionen zu, die in Super<strong>HTML</strong> als<br />

„SnapIns“ bezeichnet werden. Diese SnapIns erleichtern die Arbeit<br />

mit dem Programm. So listet etwa die Tag-Referenz alle<br />

verfügbaren <strong>HTML</strong>-Tags mit den dazugehörigen Parametern<br />

auf. In der |Textblock-Galerie| legen Sie häufig verwendete Textoder<br />

Codepassagen zur späteren Verwendung ab. Auch einen<br />

Dateimanager und die Farbpalette finden Sie als SnapIns im Objektmanager<br />

in der linken Menüleiste.<br />

Jedes Arbeitsfenster verfügt über zwei Reiter namens |Code|<br />

und |Vorschau|. In der Code-Ansicht bearbeiten Sie den <strong>HTML</strong>-<br />

Code direkt und über die Werkzeuge von Super<strong>HTML</strong>. Die<br />

Farben, die für das Syntax-Highlighting verwendet werden,<br />

können Sie vollständig an die eigenen Vorlieben anpassen.Der<br />

Code ist üblicherweise blau, die Attribute grün, kommentare<br />

werden grau eingefärbt. Falsch geschriebene Wörter markiert<br />

die Rechtschreibprüfung auf Wunsch in Echtzeit.<br />

Über die Vorschau-Ansicht kontrollieren Sie, wie das<br />

Ergebnis später im Browser erscheint. Im |Hilfe|-Menü können<br />

Sie die <strong>HTML</strong>-Referenz Self<strong>HTML</strong> (auf Heft-DVD unter<br />

Webmaster-Tools) jederzeit aufrufen.<br />

Arbeit sparen mit Vorlagen<br />

Gerade beim Gestalten von Firmen-Homepages sind Vorlagen<br />

sinnvoll: Neue Texte können direkt in ein bestehendes Design<br />

übernommen werden. Um ein <strong>HTML</strong>-Dokument auf Basis<br />

einer Vorlage anzulegen, öffnen Sie über |Datei|Neu| den Vorlagenauswahl-Dialog.<br />

Wählen Sie die Art des Dokuments, das<br />

Ihnen als Grundlage für die neue Webseite dienen soll. Wenn Sie<br />

eine Vorlage als Standard markieren, können Sie über den Tool-<br />

<strong>HTML</strong>-VORLAGEN: Vorlagen sparen Zeit und sichern den<br />

einheitlichen Auftritt Ihrer Webseite.<br />

bar-Button |Neu| jederzeit ein Dokument auf Basis dieser Vorlage<br />

anlegen. Eigene Vorlagen erzeugen Sie, indem Sie ein<br />

<strong>HTML</strong>-Dokument in Super<strong>HTML</strong> öffnen oder erstellen. Über<br />

den Befehl |Datei|Datei als Vorlage speichern| wird das<br />

Dokument in den Vorlagenordner kopiert. In Zukunft steht es<br />

als eigene Auswahl im Vorlagendialog zur Verfügung.<br />

Schneller programmieren<br />

Die Tag-Palette ist eine Buttonleiste am oberen Rand der Super<strong>HTML</strong>-Bedienoberfläche.<br />

Mit Hilfe der Tag-Palette fügen<br />

Sie <strong>HTML</strong>-Auszeichnungen schnell und bequem in Ihr<br />

Dokument ein. So müssen Sie deutlich weniger Code schreiben<br />

und minimieren gleichzeitig das Risiko von Tippfehlern. Um<br />

etwa einen Textblock rechtsbündig auszurichten, markieren<br />

Sie diesen und drücken in der Tag-Palette den Button<br />

|rechtsbündig|. Ist kein Text markiert, fügt Super<strong>HTML</strong> den<br />

Befehl an der aktuellen Cursor-Position in den Quellcode ein.<br />

Zusätzlich zu den vorgegebenen Befehlen lassen sich<br />

Benutzer-Tags anlegen, die Sie auf die gleiche Weise wie Standard-Tags<br />

in das Dokument übernehmen. Benutzer-Tags sind<br />

völlig frei in ihrer Definition. Sie können zum Beispiel einen<br />

Copyright-Verweis mit einem Tag anlegen, den Sie<br />

später per Klick an jeder beliebigen Position in Ihrem Dokument<br />

einfügen.<br />

Die Einträge in der Tag-Palette sind in verschiedenen<br />

Kategorien (etwa Tabellen oder Frames) zusammengefasst, was<br />

das Auffinden der gesuchten Befehle erleichtert.<br />

Komplexen Quelltext mit Assistenten erzeugen<br />

Assistenten verringern den Codier-Aufwand in Super<strong>HTML</strong><br />

erheblich. Der Frame-Assistent ermöglicht es zum Beispiel, aufwendige<br />

<strong>HTML</strong>-Framesets über eine grafische Oberfläche zu<br />

entwerfen. Sie legen die Aufteilung mit Hilfe der Maus fest, bestimmen<br />

den Inhalt der Frame-Dateien und wählen, ob die<br />

Bezüge relativ oder absolut gelten. Den zugehörigen <strong>HTML</strong>-<br />

Code generiert der Assistent anschließend automatisch. Sie<br />

starten den Frame-Assistenten über den Vorlagendialog oder<br />

rufen ihn aus der Tag-Palette im Reiter |Frames| auf.<br />

Genauso schnell legen Sie komplexe Tabellen an. Der Tabellen-Assistent<br />

von Super<strong>HTML</strong> erlaubt es, ganz einfach k<br />

FRAME-ASSISTENT: Passen Sie Größe und Parameter von<br />

Frames über eine übersichtliche grafische Oberfläche an.<br />

CHIP | PROFESSIONELL<br />

53


54<br />

AKTUELL | PLANEN | AUFBAU k Super <strong>HTML</strong> | SPECIAL | OPTIMIEREN |<br />

Farben, Gitternetz und Abstände zu konfigurieren. Den Tabellenassistenten<br />

finden Sie im Reiter |Tabellen|. Ein Tabellengerüst<br />

für Layouts legen Sie über die Eingabefelder nach Klick<br />

auf |Tabellen| an. Anzahl der Zeilen und Spalten angeben, fertig.<br />

Auch Bilder und Image-Maps werden bequem per Assistent<br />

eingefügt. Der integrierte Image-Map-Editor erleichtert das<br />

Anlegen umfangreicher Image-Maps. Die sensitiven Bereiche<br />

markieren Sie bequem mit der Maus und weisen ihnen anschließend<br />

einen Link zu. Das Anlegen des Quellcodes erledigt<br />

der Code-Generator von Super<strong>HTML</strong>.<br />

Beim Anlegen von internen und externen Hypertext-Verweisen<br />

unterstützt Sie der Link-Assistent. Zudem erleichtert er<br />

es, Targets für Framesets und neue Fenster zu definieren. Als<br />

Quelle können Sie zusätzlich Ihre bestehenden Internet-Explorer-Favoriten<br />

in den Assistenten übernehmen.<br />

Immer parat: Tags, Entities und Farbwerte<br />

Der Objektmanager von Super<strong>HTML</strong> fasst wichtige Hilfsmittel<br />

in SnapIns zusammen. Im SnapIn |Sonderzeichen| legen Sie<br />

fest, welche Zeichen Super<strong>HTML</strong> bereits während der Eingabe<br />

in die entsprechenden Sonderzeichen-Entities etwa für Umlaute<br />

konvertieren soll. Dazu setzen oder entfernen Sie einfach ein<br />

Häkchen vor dem gewünschten Zeichen. Ist zum Beispiel das<br />

Häkchen vor dem Zeichen „ö“ gesetzt, ersetzt Super<strong>HTML</strong> jedes<br />

„ö“ automatisch durch das entsprechende Entity „&ouml;“.<br />

Per Doppelklick setzen Sie ein beliebiges Sonderzeichen an der<br />

aktuellen Cursor-Position ein.<br />

Super<strong>HTML</strong> verfügt über eine Funktion, mit der sich<br />

Sonderzeichen in markierten Textblöcken nachträglich in Entities<br />

umwandeln lassen. Auch der umgekehrte Weg ist möglich.<br />

Dieses Feature ist besonders hilfreich, wenn Sie längere Texte aus<br />

Nicht-<strong>HTML</strong>-Quelle übernehmen oder ein unsauber geschriebenes<br />

<strong>HTML</strong>-Dokument umwandeln müssen. Dabei ist<br />

auch hier entscheidend, ob das Häkchen in der Liste vor einem<br />

Sonderzeichen markiert ist oder nicht.<br />

Beim Arbeiten an der Webseite kommt es häufig vor, dass bestimmte<br />

Texte oder Code-Fragmente immer wieder verwendet<br />

werden. Super<strong>HTML</strong> bietet mit dem SnapIn |Textblöcke| eine<br />

SONDERZEICHEN: Super<strong>HTML</strong> ersetzt Sonderzeichen auf<br />

Wunsch während der Eingabe durch <strong>HTML</strong>-Entities.<br />

CHIP | PROFESSIONELL<br />

Textblock-Galerie, in der sich vorgefertigte Texte hinterlegen<br />

lassen. Diese können später einfach per Doppelklick an der<br />

gewünschten Stelle eingefügt werden. Ein Textblock besteht aus<br />

frei wählbaren Zeichen, zusätzlich können Sie auch fertige<br />

<strong>HTML</strong>-Dateien importieren.<br />

Wer häufig farbige <strong>HTML</strong>-Elemente verwendet, dem bietet<br />

die Farbpalette eine echte Arbeitserleichterung. Wählen Sie eine<br />

gewünschte Farbe aus dem SnapIn |Farbpalette| aus und fügen<br />

Sie den entsprechenden hexadezimalen Code über den Button<br />

|Farbe einfügen| ein. Auch den Farbwert für die Funktion |Textfarbe|<br />

bestimmen Sie über die Farbpalette.<br />

Neben der Tag-Palette, über die sich bereits die wichtigesten<br />

<strong>HTML</strong>-Auszeichnungen per Mausklick einfügen lassen, stellt<br />

Super<strong>HTML</strong> eine vollständige <strong>HTML</strong>-Befehlsliste bereit. Im<br />

SnapIn |Tag-Referenz| listet die Software alle <strong>HTML</strong>-Befehle mit<br />

den dazugehörigen Parametern auf. Mit einem Doppelklick<br />

fügen Sie jeden gewünschten Befehl in Ihren Quelltext ein.<br />

Anders herum funktioniert es ähnlich: Möchten Sie zu einem<br />

<strong>HTML</strong>-Tag in Ihrem Quellcode alle möglichen Parameter anzeigen,<br />

klicken Sie doppelt darauf. Die Tag-Referenz springt zum<br />

gewählten Tag und listet alle verfügbaren Attribute auf. Diese<br />

fügen Sie mit einem weiteren Doppelklick in den Code ein.<br />

Anwendern von Windows Me, 2000 oder XP wird im Objektmanager<br />

zusätzlich das SnapIn |FTP-Zugriff| angezeigt. Über<br />

dieses SnapIn können Sie auf einen beliebigen FTP-Server zugreifen<br />

und Dateien per Drag&Drop direkt in Super<strong>HTML</strong><br />

öffnen. Wenn Sie eine Datei auf einen FTP-Server hochladen<br />

möchten, ziehen Sie diese einfach aus dem Windows-Explorer in<br />

das FTP-SnapIn. Benötigen Sie einen größeren Funktionsumfang,<br />

binden Sie ein externes FTP-Programm wie WS_FTP<br />

(auf Heft DVD unter FTP-Programme) in Super<strong>HTML</strong> ein.<br />

JavaScript und CSS einbinden<br />

Für dynamische <strong>HTML</strong>-Seiten stellt Super<strong>HTML</strong> einige der<br />

gängisten JavaScript-Befehle bereit. In der Tag-Palette finden<br />

Sie im Reiter |JavaScript/D<strong>HTML</strong>| Buttons für den Script-Tag<br />

und die Noscript-Alternative. Viele Ereignisse lassen sich über<br />

den Event-Handler per Klick in das Dokument übernehmen.<br />

BEFEHLSLISTE: Über die Funktion „Tag-Referenz“ fügen Sie<br />

<strong>HTML</strong>-Tags inklusive Parameter in den Code ein.


Dazu zählen auch die wichtigen onMouse- und onKeyEvents.<br />

JavaScript-Code zur Anzeige von Dialogboxen oder Popup-<br />

Fenstern erzeugt Super<strong>HTML</strong> per Mausklick, lediglich die gewünschten<br />

Beschriftungen müssen von Hand ergänzt werden.<br />

Ihre Dokumente formatieren Sie komfortabel mit Cascading<br />

Stylesheets, indem Sie auf den Stylesheet-Assistenten von Super<strong>HTML</strong><br />

zurückgreifen. Aus einer Reihe von Vorgaben wählen<br />

Sie die gewünschten Style-Elemente aus und fügen diese einem<br />

eigenen Style hinzu. Passen Sie die Vorgaben Ihren Wünschen<br />

an, indem Sie die Werte mit der Maus auswählen und die linke<br />

Maustaste so lange gedrückt halten, bis sich der Wert in eine<br />

Editierzeile verwandelt.<br />

Nachdem Sie den Style gespeichert haben, können Sie ihn<br />

später auf beliebige Dokumente anwenden. Wählen Sie den<br />

Style-Tag aus, über den der Code auf das <strong>HTML</strong>-Dokument<br />

angewandt wird. Alternativ unterstützt Super<strong>HTML</strong> die Einbindung<br />

von Cascading Stylesheets über die Tags @import und<br />

, die Sie über die Tag-Palette in das Dokument einfügen.<br />

<strong>HTML</strong>-Code aufräumen<br />

Quelltext aus einer fremden Webseite übernehmen Sie, indem<br />

Sie zuvor über |Dokument|Tags entfernen| den reinen Text darstellen.<br />

Jetzt versehen Sie den Text mit eigenen Formatierungen.<br />

Bevor Sie ein <strong>HTML</strong>-Dokument im Web veröffentlichen,<br />

sollten Sie sicherstellen, dass es Standard-konform ist. Super-<br />

<strong>HTML</strong> bietet eine Funktion an, die Dokumente nach den<br />

Maßgaben des W3C püft. Rufen Sie über die Menüleiste das Programm<br />

zur Code-Kontrolle auf. Mit dem Button |Syntax-Check|<br />

wird die aktuelle Datei auf Fehler und kleinere Ungenauigkeiten<br />

untersucht. Über |OK| räumen Sie das Dokument auf und<br />

lassen Super<strong>HTML</strong> Fehler im Quellcode korrigieren. Nützlich<br />

ist auch der integrierte Link-Validator, der alle Verweise im<br />

Quellcode auf Gültigkeit überprüft.<br />

Gerade wenn Sie Wert auf eine möglichste hohe Reichweite<br />

Ihrer Homepage legen, ist es wichtig, Internet-Nutzer mit langsamen<br />

Zugängen nicht auszusperren. Mit einem Mausklick berechnet<br />

Super<strong>HTML</strong> die ungefähre Ladezeit der aktuellen<br />

Webseite unter Berücksichtigung verschiedener Verbindungs-<br />

STYLESHEET-ASSISTENT: Per Mausklick fügen Sie einem Style<br />

die gewünschten Eigenschaften hinzu.<br />

EXKLUSIV FÜR CHIP-LESER<br />

Super<strong>HTML</strong> 7.0: Günstig updaten<br />

Mit Super<strong>HTML</strong> 6.0 besitzen Sie<br />

einen professionellen <strong>HTML</strong>-Editor,<br />

mit dem Ihnen viele Möglichkeiten<br />

offenstehen. Noch<br />

mehr Funktionen und Komfort<br />

bietet Ihnen das aktuelle Super<strong>HTML</strong><br />

7.0. Als Käufer von<br />

CHIP Professionell haben Sie<br />

das Recht, Super<strong>HTML</strong> 7.0 zum<br />

regulären Update-Preis von<br />

29,95 Euro versandkostenfrei<br />

inklusive gedrucktem Handbuch<br />

zu beziehen. Sie sparen 20<br />

Euro gegenüber dem regulären<br />

Preis von 49,95 Euro!<br />

In der neuen Version ist auch<br />

ein FTP-Client integriert, mit<br />

dem Sie Ihre Webseiten live auf<br />

Ihren Webserver bearbeiten<br />

können. Außerdem unterstützt<br />

Super-<strong>HTML</strong> 7.0 PHP, XML, CSS,<br />

JavaScript und vieles mehr. Weitere<br />

Informationen zu Super<strong>HTML</strong><br />

7.0 finden Sie unter<br />

www.superhtml.de. Den Link,<br />

unter dem Sie das Update bestellen<br />

können, erhalten Sie bei<br />

Freischaltung der Vollversion<br />

zusammen mit der Seriennummer<br />

für Super<strong>HTML</strong> 6.0.<br />

geschwindigkeiten. So wissen Sie bereits vor einer Veröffentlichung<br />

im Web, ob Optimierungsbedarf besteht.<br />

Funktionsumfang mit Plugins erweitern<br />

Auf der Webseite von Super<strong>HTML</strong> stehen einige Plugins zum<br />

freien Download bereit, darunter etwa „<strong>HTML</strong> Compressor“.<br />

Mit-Hilfe des Plugins verkleinern Sie beliebige Teile des Codes,<br />

indem Sie Super<strong>HTML</strong> überflüssige Zeichen automatisch entfernen<br />

lassen. Eine Vorab-Analyse gibt Auskunft über das zu<br />

erwartende Ergebnis. Hilfreich ist auch das „FlashPlugin“, über<br />

das Sie schnell und einfach fertige Flash-Filme in Ihre <strong>HTML</strong>-<br />

Seiten einfügen. Das Plugin generiert anhand Ihrer Angaben<br />

den nötigen OBJECT, beziehungsweise EMBED-Code.<br />

Viele weitere neue Funktionen bietet die aktuelle Version von<br />

Super<strong>HTML</strong> 7.0, etwa Unterstützung für Scriptsprachen wie<br />

PHP oder erweitertes Syntax Highlighting mit eigenen Schemes.<br />

Informationen zu Super<strong>HTML</strong> 7.0 und zur exklusiven Update-<br />

Aktion für CHIP-Leser erhalten Sie im Kasten oben rechts.<br />

Joachim Schwieren, Niels Held<br />

DEN QUELLCODE SÄUBERN: Der Syntax-Check garantiert aufgeräumten<br />

Quellcode nach W3C-Vorgaben.<br />

CHIP | PROFESSIONELL<br />

55


58<br />

AKTUELL | PLANEN | AUFBAU k XML | SPECIAL | OPTIMIEREN |<br />

Programmieren mit XML<br />

Daten clever austauschen<br />

Wer sich mit dem Web beschäftigt, stolpert früher oder später über XML, die erweiterbare Beschreibungssprache,<br />

die den Datenaustausch zwischen Programmen vereinfacht. Was es mit dieser Sprache noch auf sich<br />

hat und wie sie funktioniert, zeigt dieser Artikel.<br />

k<br />

XML ist die Abkürzung für „Extensible Markup<br />

Language“. Das heißt auf Deutsch etwa „Erweiterbare<br />

Beschreibungssprache“. Der Sinn von XML besteht in erster<br />

Linie darin, den Datenaustausch zwischen Programmen zu<br />

vereinfachen. Die XML-Entwickler dachten dabei vor allem<br />

an Datenbanken, die Daten in das XML-Format exportieren.<br />

Das wiederum ist auch für andere Programme lesbar und kann<br />

von diesen weiterverarbeitet werden.<br />

Doch auch für ganz simple Einsatzzwecke empfiehlt sich<br />

die Sprache XML. Ein Beispiel: Eine Firma möchte eine Telefonliste<br />

im Internet veröffentlichen. Die dafür notwendigen Daten<br />

liegen in einer Access-Datenbank. Also werden die Daten aus<br />

Access in XML exportiert und anschließend so umgewandelt,<br />

dass man sie mit einem Web-Browser ansehen kann.<br />

So sieht XML aus<br />

Im Gegensatz zu <strong>HTML</strong> ist XML ein beschreibendes Format.<br />

Ein Beispiel: Sie haben in einer <strong>HTML</strong>-Datei eine Tabelle mit<br />

verschiedenen Büchern:<br />

Ich bin ein BerlinerJohn F.<br />

Kennedy<br />

Diese Zeile zeigt zwar den Titel und den Autor eines<br />

Buches, doch das weiß der Browser nicht: Er sieht lediglich Tabellen-Tags.<br />

Für den Browser mag das noch in Ordnung sein,<br />

aber einem Programm, das die Daten anderweitig verarbeiten<br />

muss, hilft das nicht. In XML würde man schreiben<br />

Ich bin ein Berliner<br />

John F. Kennedy<br />

Das Tag selbst dient als Beschreibung für den Inhalt des<br />

Elements. Ein Programm, das diese Daten empfängt, kann sie<br />

anhand dieser Kennung eindeutig zuordnen. Und wie die Tags<br />

heißen, dürfen Sie sich selbst aussuchen.<br />

Die Grundbegriffe von XML<br />

Wenn Sie sich an ein erstes praktisches Beispiel der Programmierung<br />

mit XML heranwagen, sollten Sie sich zunächst<br />

k XML Editing Gute Software muss nicht immer teuer sein.<br />

Auf der Heft-DVD finden Sie die Freeware-XML-Editoren<br />

Peter’s XML Editor, Notepad2 und Cooktop. Notepad2<br />

unterstützt darüber hinaus zahlreiche weitere Sprachen.<br />

k Listings Die im Artikel verwendeten Beispiele finden Sie<br />

als fertige Listings auf der DVD unter Web-Server-Utilities.<br />

CHIP | PROFESSIONELL<br />

k DVD <strong>HTML</strong>-Editoren<br />

AUS DER PRAXIS – DIE AGENTUR ELEPHANTSEVEN<br />

Vieles spricht für den XML-Einsatz<br />

Edgar Braunwarth, Senior Concepter,<br />

und Martin Weichselbaumer,<br />

Technical Director der Agentur<br />

elephantseven, nennen vier gute<br />

Gründe für den Einsatz von XML.<br />

WWW.ATOSS.DE: Die Inhalte der Webseite werden über einen<br />

XML-Editor (TypeGate) im WYSIWYG-Modus produziert und als<br />

XML im Microsoft Content Management System vorgehalten.<br />

mit den drei wichtigsten Grundbegriffen von XML vertraut<br />

machen:<br />

Ein Tag ist ein „Bezeichner“, es gibt das Anfangs-Tag und<br />

das End-Tag.<br />

Ein Element fasst Start- und End-Tag zusammen. Im vorherigen<br />

Beispiel wäre die Rede vom Element „name“.<br />

Ein Attribut ist ein zusätzlich zu einem Tag vergebener Wert, um<br />

beispielsweise die Einträge in einer Liste zu numerieren:<br />

meier<br />

huber<br />

XML praktisch<br />

Für einen ersten Gehversuch in XML reichen ein paar Zeilen<br />

Klartext und der Internet Explorer oder Mozilla. Das folgende<br />

kurze Listing zeigt ein einfaches Beispiel:<br />

<br />

<br />

<br />

1. Einfache Änderungen von Daten<br />

und Darstellung Durch die<br />

Trennung von Content (XML) und<br />

Layout (XSLT) können neue Inhalte<br />

nachträglich hinzugefügt werden,


Die besten XML-Seiten im Internet<br />

XML-Tutorials I-VII k http://www.aboutwebdesign.de/awd/<br />

htmlpraxis.shtml<br />

Gut geschriebene Einleitung zum Thema XML (deutsch)<br />

Namensräume k http://aktuell.de.selfhtml.org/artikel/xml<br />

/namensraeume/index.htm<br />

Mehr Aspekte zum Thema Namespace (deutsch)<br />

XML-Praxis k http://www.linkwerk.com/pub/xmlidp/2000/<br />

Guter Überblick, klar gegliedert, gut zum Nachlesen (deutsch)<br />

ohne die Formatierung<br />

zu ändern. Auch Layout-<br />

Änderungen brauchen<br />

dadurch nur an einer einzigen<br />

Stelle vorgenommen<br />

zu werden.<br />

2. Inhalte mehrfach<br />

verwenden<br />

Bei der Darstellung<br />

werden die<br />

XML-Daten über<br />

den Weg XSLT als<br />

<strong>HTML</strong>-Seiten ausgegeben.Dieselben<br />

Daten können<br />

jedoch auch in<br />

anderen Medienformaten verwendet<br />

werden, etwa als PDF oder<br />

als RSS-Feed. Darin liegt die Basis<br />

für Content Syndication.<br />

3. Tags mit aussagekräftigen<br />

Titeln Die Tags des XML-Codes definieren<br />

nicht das Layout, sondern<br />

beschreiben das nachfolgende Element.<br />

Im Gegensatz zu <strong>HTML</strong> folgen<br />

sie damit inhaltlich keinem festgelegten<br />

Standard, sondern sind<br />

„Beim Aufbau<br />

großer Sites spricht<br />

viel für XML“<br />

EDGAR BRAUNWARTH,<br />

SENIOR CONCEPTER ELEPHANTSEVEN<br />

individuell definierbar.<br />

Diese Möglichkeit resultiert<br />

aus dem besonderen<br />

Charakter des „X“ =<br />

Extensible.<br />

4. XML sorgt für strikte<br />

Konventionen XML<br />

fordert wesentlich res-<br />

triktiver die Einhaltungbestimmter<br />

Regeln.<br />

So darf etwa das<br />

End-Tag nicht fehlen.<br />

XML ermöglicht<br />

aber auch<br />

die projektspezifische<br />

Abfassung des jeweiligen Regelwerks.<br />

Damit ist es etwa bedeutend<br />

einfacher, Fehler zu finden<br />

oder Daten auszutauschen.<br />

Die Fullservice-Agentur elephant<br />

seven bietet ihren Kunden crossmediale<br />

E-Business-Lösungen in<br />

den Bereichen Strategieberatung,<br />

Technologie und Marketing-Kommunikation.<br />

k www.e-7.com<br />

Ich bin ein Berliner<br />

John F. Kennedy<br />

133<br />

12,80<br />

<br />

<br />

Ich auch<br />

Hubert Meyer<br />

422<br />

69,90<br />

<br />

<br />

Ohne die erste Zeile geht nichts. Sie klärt, dass es sich um<br />

XML in der Version 1.0 handelt und dass der verwendete<br />

Zeichensatz ISO-8859-1 ist. Diese Deklaration des Zeichensatzes<br />

ist wichtig, falls in den dargestellten Daten auch Umlaute<br />

enthalten sind. Ohne den Zeichensatz gibt es eine Fehlermeldung<br />

beim Verarbeiten der XML-Datei.<br />

Speichern Sie die Datei als „werke.xml“ und öffnen Sie die<br />

Datei anschließend mit dem Internet Explorer oder Mozilla.<br />

Danach sehen Sie das Dokument im Browser-Fenster. Die<br />

Einrückungen repräsentieren die Struktur des Dokuments.<br />

Links neben einigen Tags finden Sie kleine Minuszeichen.<br />

Mit einem Klick darauf können sie alle untergeordneten Elemente<br />

ausblenden.<br />

Das Beispiel der Bücherliste zeigt: In XML herrschen<br />

klare Strukturen; man spricht oft von einer Baumstruktur. Die<br />

Wurzel in diesem Beispiel ist , deshalb spricht man an<br />

dieser Stelle von einem „root“-Element. Von der Wurzel aus<br />

verzweigt die Datensammlung weiter in Äste, in diesem Fall<br />

gekennzeichnet mit . Natürlich kann die Datenstruktur<br />

noch weiter verzweigen, beispielsweise könnte jeder <br />

nochmals unterteilt werden in und<br />

:<br />

<br />

22<br />

28<br />

<br />

Auf diese Weise kann XML problemlos auch komplexe<br />

Datenstrukturen darstellen.<br />

XML – well-formed und valid<br />

Wer sich mit XML näher auseinandersetzt, begegnet immer<br />

wieder den Begriffen „well-formed“ und „valid“. Auf Deutsch<br />

heißt das soviel wie „wohlgeformt“ und „gültig“. Wohlgeformte<br />

Dokumente entsprechen allgemein der XML-Syntax, die<br />

wesentlich strenger ist als <strong>HTML</strong>. Jedes Dokument muss die<br />

folgenden Voraussetzungen erfüllen:<br />

Jedes Start-Tag muss auch ein End-Tag haben.<br />

Elemente dürfen einander nicht überschneiden, also nicht:<br />

, sondern: .<br />

Es darf nur ein „Root“-Element geben.<br />

Alle Attribute müssen in Anführungszeichen stehen.<br />

Ein Element darf nicht zwei Attribute mit gleichem Namen<br />

besitzen.<br />

In den Daten dürfen keine Zeichen wie „


60<br />

AKTUELL | PLANEN | AUFBAU k XML | SPECIAL | OPTIMIEREN |<br />

Erst wenn diese Bedingungen erfüllt sind, spricht man von<br />

einem „wohlgeformten Dokument“.<br />

Strenger sind die Regeln für valide Dokumente. Bei ihnen<br />

muss auch noch die Datenstruktur stimmen. Diese Datenstruktur<br />

kann ein Programm anhand einer Art Vorlage<br />

überprüfen. Darin steht zum Beispiel, welche Elemente welche<br />

Unterelemente enthalten dürfen. Solche Vorlagen finden Sie in<br />

DTD-Dateien (Document Type Definition) oder in XML-<br />

Schema-Dateien.<br />

Textzentriertes und datenzentriertes XML<br />

Textzentrierte und datenzentrierte XML-Dateien unterscheiden<br />

sich hauptsächlich im Einsatzzweck voneinander: Für die Darstellung<br />

beispielsweise eines Textes genügt ein „wohlgeformtes<br />

Dokument“. Da geht dann auch die Welt nicht unter, falls<br />

sich doch einmal ein Strukturfehler in das Dokument einschleicht.<br />

Solche textzentrierten XML-Dokumente zeichnen<br />

sich außerdem aus durch:<br />

TOP-TOOL FÜR XML<br />

XML-Writer, der bessere Editor<br />

Für das Schreiben einfacher<br />

XML-Dateien genügt ein herkömmlicher<br />

Editor. Sobald die<br />

Datenstrukturen jedoch komplizierter<br />

werden, stoßen Editoren<br />

schnell an ihre Grenze.<br />

Um komplexe, textzentrierte<br />

XML-Dokumente zu verfassen,<br />

sollten Sie sich ein spezielles<br />

Werkzeug zulegen. Das sollte<br />

die eingegebenen XML-Daten<br />

auf Wohlgeformtheit wie auch<br />

auf Validität prüfen können. Ein<br />

solches Programm ist der XML-<br />

CHIP | PROFESSIONELL<br />

<strong>HTML</strong>-Editoren<br />

Writer. Den gibt es für 99 Dollar<br />

unter http://www.xmlwriter.<br />

net. Eine kostenlose Testversion<br />

sowie weitere XML-Tools finden<br />

Sie auf der Heft-DVD.<br />

Das Programm überprüft eingegebenen<br />

Code auf Richtigkeit<br />

und verknüpft die Daten auf<br />

Wunsch mit einer XSLT-Stilvorlage,<br />

um sie im Internet darzustellen.<br />

Viele kleine Helfer,<br />

zum Beispiel eine automatische<br />

Tag-Ergänzung, erleichtern die<br />

Arbeit mit XML-Daten.<br />

CLEVERES HELFERLEIN: Der XML-Writer kann Ihre XML-Daten<br />

auf Wohlgeformtheit und Validität prüfen.<br />

DIE HEIMAT VON XML: Auf der Webseite des World Wide Web<br />

Consortiums (W3C) finden Sie die XML-Spezifikationen.<br />

Relativ einfache, flache Struktur mit wenig Schachtelungsebenen<br />

„Lockere“ Dokumentenart – fehlt ein Element, ist das überhaupt<br />

kein Problem<br />

Optische Aufbereitung steht im Vordergrund; es ist nicht so gut<br />

von Maschinen zu lesen, die strenge Strukturen erfordern<br />

Kommt meist ohne Strukturvorgaben aus<br />

Anders sieht die Sache aus, wenn Daten nicht einfach nur<br />

dargestellt, sondern von einem Programm ins andere übernommen<br />

werden sollen. Stimmen da die Datenstrukturen<br />

nicht, kann das zu bösen Problemen führen. Deshalb müssen<br />

diese Daten zunächst auf Validität geprüft werden. Bei<br />

solchen Dateien spricht man auch von „datenzentriertem“<br />

XML. Das hat die folgenden Eigenschaften:<br />

Deutlich komplexer, stärker verschachtelt<br />

Hohe Anforderungen an die Integrität der Daten (strenge Vorgaben)<br />

Einsatzbereich: industrielle und wirtschaftliche Anwendungen<br />

So geht’s weiter mit XML<br />

Keine Angst, nur bei textzentriertem XML werden<br />

Sie XML-Daten eventuell von Hand eingeben müssen.<br />

Aber dafür gibt es gute Hilfsprogramme (etwa den<br />

XML-Writer, siehe Kasten links). Im Normalfall bekommen<br />

Sie die Daten fertig aufbereitet von einem<br />

Programm geliefert – Sie müssen sich nur noch um<br />

die Aufbereitung der Daten kümmern. Wie Sie XML-<br />

Daten in lesbare <strong>HTML</strong>-Dokumente verwandeln,<br />

können Sie ab s62 nachlesen.<br />

Natürlich können Sie XML-Daten auch in jedes<br />

andere Format umwandeln, beispielsweise in einen<br />

Buchtext, der bereits die richtigen Auszeichnungen<br />

für den Satz trägt. Oder Ihre XML-Datei landet<br />

wiederum in einer Datenbank, etwa in einem Content-Management-System,<br />

das aus den XML-Daten<br />

wiederum lesbare Webseiten produziert.<br />

Sie sehen: XML ist universell – wer seine Daten<br />

in diesem Format vorzuliegen hat, braucht sich kaum<br />

Sorgen darum zu machen, ob er sie auch noch in einigen<br />

Jahren verwenden kann. Denn XML ist ein<br />

offenes Datenformat, das eine große Zukunft hat.<br />

Martin Goldmann


DER EXPERTEN-TIPP VON THOMAS WIRTH UND ARNULF MESTER<br />

What you see is what you think oder: Design macht<br />

man mit den Augen, XML macht man mit dem Kopf<br />

In der Tat, XML ist ein Thema mit<br />

Zukunft, spätestens seit sich das<br />

W3C dazu bekannt hat, dass das<br />

Web langfristig auf XML basieren<br />

soll. Und steigende Anforderungen<br />

an eine medienneutrale<br />

Datenhaltung haben zur Folge,<br />

dass Publishing-Prozesse vermehrt<br />

auf XML-basierten Systemen<br />

aufsetzen – nicht immer,<br />

aber immer öfter.<br />

Wer das Thema einmal von<br />

allem Hype entkleidet und den<br />

Rest untersucht, der sich dem<br />

prüfenden Blick noch darbietet,<br />

wird aber etwas Eigenartiges<br />

feststellen: Es geht gar nicht<br />

primär um Technologien, das<br />

Thema ist vielmehr ... Denken!<br />

Also: Welche Denkstrategien<br />

verbergen sich hinter XML, und<br />

wie denken wir wirklich, ?<br />

Nähert man sich dieser Frage auf<br />

dem gewohnten Weg, kann man<br />

sagen: XML fördert und erfordert<br />

abstrahierendes Denken über Inhalte<br />

und Strukturen, unabhängig<br />

von Form und Layout. Es gibt<br />

zu diesem Zweck Informationstypen,<br />

Transformationen, Meta-<br />

Sprachen und vieles mehr.<br />

Andererseits: Inhalt ohne Form,<br />

ist das wirklich eine gute Idee? An<br />

dieser Stelle muss man zwischen<br />

Informatik und Psychologie unterscheiden.<br />

Für Datenbanken ist<br />

die Antwort beispielsweise sehr<br />

eindeutig: „Ja!“ Trotzdem: In<br />

unseren Köpfen geht dabei meistens<br />

irgend etwas schief.<br />

Informationstypen definieren,<br />

das können die meisten von uns<br />

lediglich anhand beispielhafter<br />

Visualisierungen. Aus der Kognitionsforschung<br />

weiß man außerdem,<br />

dass uns stark vernetztes<br />

Denken mit vielen voneinander<br />

abhängigen Größen nicht in die<br />

Wiege gelegt ist – übrigens genausowenig<br />

wie das Operieren<br />

innerhalb von Hierarchien mit<br />

mehr als drei Schichten ohne<br />

Hilfsmittel.<br />

Ist aber abstraktes, vernetztes,<br />

vielschichtiges Denken nicht eine<br />

Voraussetzung dafür, dass man<br />

beim Einsatz von XML nicht nur<br />

die alten Aufgaben mit neuen<br />

Mitteln löst (dafür sind XML-<br />

Lösungen oft eher überdimensioniert),<br />

sondern die Möglichkeiten<br />

dieser Technologie ausschöpft?<br />

Genau so ist es.<br />

Also: Natürlich ist formal-technisches<br />

Hintergrundwissen wichtig,<br />

und natürlich muss man<br />

jederzeit neue Entwicklungen und<br />

Werkzeuge bewerten, nicht zuletzt<br />

um aufkommende Risiken<br />

und Inkompatibilitäten vorauszuahnen.<br />

Wenn man nach den fünf<br />

heißesten Praxis-Tipps für XML<br />

sucht, kann (und sollte) man aber<br />

auch zumindest einige aus dem<br />

KOPFGEBURT:<br />

Die Grenzen<br />

des Machbaren<br />

sind nichttechnischer<br />

Natur, denn<br />

XML-Strukturen<br />

sind<br />

immer ein<br />

Abdruck der<br />

Wissensstrukturen<br />

des<br />

Entwicklers.<br />

Bereich des Denkens suchen. Dies<br />

könnte etwa so aussehen:<br />

1. Der Erfolg eines Projekts<br />

hängt vor allem davon ab, wie<br />

und was zu Beginn erdacht<br />

wurde. Reservieren Sie mehr Zeit<br />

für die konzeptionelle Vorbereitung<br />

und widerstehen Sie der<br />

Versuchung, schnell Ergebnisse<br />

erzeugen zu wollen. Dabei muss<br />

nicht alles stromlinienförmig<br />

zu einem Ziel führen. Durch die<br />

Beschäftigung mit Zielgruppen,<br />

verschiedenen Ordnungsmustern,<br />

Möglichkeiten der Klassifikation,<br />

Formen der Vernetzung<br />

und ähnlichen Kategorien bleiben<br />

Sie für die spätere, verbindliche<br />

Arbeit flexibel.<br />

2. Suchen und erproben Sie<br />

Mittel zur Visualisierung von<br />

Strukturen, seien es elektronische<br />

Mind-Mapping-Tools oder<br />

gegenständliche Hilfsmittel wie<br />

Metaplan-Wände und -Karten,<br />

Stecknadeln und Fäden, Haftnotizen<br />

oder ähnliche Hilfsmittel<br />

(alles schön bunt, versteht sich).<br />

Probieren Sie an dieser Stelle<br />

hemmungslos alles aus, was<br />

Ihnen nützlich erscheint, denn<br />

das Bewältigen von Komplexität<br />

ist immer noch eine der wichtigsten<br />

Anforderungen an das<br />

Denken eines XML-Entwicklers.<br />

3. Versuchen Sie öfter einmal,<br />

absichtlich umzudenken, indem<br />

Sie zum Beispiel Polyhierarchien<br />

konstruieren. Dies sind<br />

Klassifikationen, in denen mehrere<br />

hierarchische Ordnungssysteme<br />

gleichzeitig gelten. Der<br />

gleiche Inhalt kann als Navigationsziel<br />

im Organigramm eines<br />

Unternehmens, auf einem Kontaktformular<br />

und im Produktkatalog<br />

enthalten sein. Oder ein<br />

Produkt kann nach visueller<br />

Ähnlichkeit, nach dem Verwendungszweck<br />

oder nach der<br />

Zugehörigkeit zu einer Produktlinie<br />

klassifiziert werden.<br />

4. Präzisieren Sie Ihr Wissen<br />

über die Eigenschaften Ihrer eigenen<br />

mentalen Modelle. Wenn<br />

EXPERTEN<br />

Prof. Dr. Thomas<br />

Wirth ist Professor<br />

im StudiengangDigitale<br />

Medien an<br />

der Berufsakademie<br />

Mosbach.<br />

Prof. Dr. Arnulf<br />

Mester ist Diplom-Informatiker<br />

und Leiter<br />

des StudiengangsMedieninformatik<br />

an der Berufsakademie<br />

Mosbach.<br />

Arnulf Mester und Thomas<br />

Wirth leiten gemeinsam den interdisziplinären<br />

Studiengang Medieninformatik/Digitale<br />

Medien an der<br />

Berufsakademie Mosbach.<br />

Arnulf Mester ist Informatiker<br />

und beschäftigt sich seit vielen<br />

Jahren mit Internet-Technologie<br />

und dem Web. 1992 organisierte er<br />

mit CERN httpd eine der ersten<br />

Websites in Deutschland.<br />

Thomas Wirth ist Psychologe<br />

und gehört zu den prominentesten<br />

deutschen Usability-Experten.<br />

Er betreibt die Website Komm-<br />

Design.de. Sein Buch „Missing<br />

Links – Über gutes Webdesign“ ist<br />

2004 in der 2. Auflage im Hanser<br />

Verlag erschienen.<br />

k www.kommdesign.de<br />

das Denken so wichtig ist, wie<br />

an dieser Stelle behauptet wird,<br />

könnte sich das auszahlen. Es ist<br />

absolut kein Zufall, dass sich die<br />

Fachtermini der modernen Kognitionswissenschaft<br />

lesen, als seien<br />

sie aus einem Computerfachbuch<br />

entlaufen: semantische Netze,<br />

Skripte, Schemata, prozedurales<br />

und deklaratives Wissen, Mehrfachcodierung,<br />

Prototypen – und<br />

was der Fachbegriffe noch mehr<br />

sind.<br />

5. Bleiben Sie zu guter Letzt<br />

kritisch und pragmatisch. Können<br />

Sie Ihr aktuelles Vorhaben mit<br />

konventionellen Mitteln vielleicht<br />

einfacher realisieren? Ansonsten<br />

sollte man XML nur nutzen, um<br />

einen speziellen Mehrwert ableiten<br />

zu können – oder natürlich,<br />

um zu lernen. Lernen ist eigentlich<br />

immer Grund genug<br />

dafür, etwas zu tun.<br />

CHIP | PROFESSIONELL<br />

61


62<br />

AKTUELL | PLANEN | AUFBAU k XSLT | SPECIAL | OPTIMIEREN |<br />

XSLT-Syntax in der Praxis<br />

So wird XML zu <strong>HTML</strong><br />

Mit Hilfe der Extensible Stylesheet Language (XSL) verwandeln sich dröge XML-Dokumente in schicke <strong>HTML</strong>-<br />

Dateien. Alles, was Sie dazu brauchen, sind ein paar Grundkenntnisse der XSLT-Syntax (XSL Transformations)<br />

und das passende Werkzeug. Am Beispiel einer simplen Bücherliste wird aus der Theorie rasch XSL-Praxis.<br />

k<br />

Eine XSLT-Datei ähnelt auf den ersten Blick einem<br />

<strong>HTML</strong>-Dokument. XSLT steht für „XSL Transformations“,<br />

den Teil der Sprache, die für die Umwandlung von<br />

Dokumenten zuständig ist. Und in der Tat: In einer XSLT-Vorlage<br />

stecken häufig <strong>HTML</strong>-Tags, zwischen die später wiederum<br />

die Daten aus dem XML-File eingebaut werden. Natürlich<br />

können Sie auch beliebige andere Tags verwenden und so eine<br />

XML-Datei in eine andere umwandeln.<br />

Im Normalfall jedoch werden Sie es mit <strong>HTML</strong> zu tun haben,<br />

genauer gesagt mit X<strong>HTML</strong>. Diese Variante der Seitenbeschreibungssprache<br />

drückt die <strong>HTML</strong>-Anweisungen in XML<br />

aus. Der <strong>HTML</strong>-Code muss also „well-formed“ sein.<br />

Das passende Werkzeug für erste Tests mit XML und XSL<br />

haben Sie bereits auf Ihrem PC. Der Internet Explorer kann<br />

XML-Dateien und die Vorlage verknüpfen, mit Mozilla geht’s<br />

auch. Ein in die Browser eingebauter Stylesheet-Prozessor erzeugt<br />

aus XML und XSL eine hübsche Seite. Im Kasten auf s64<br />

lernen Sie Saxon kennen, einen XSLT-Prozessor, der aus XML<br />

und XSL hübsches X<strong>HTML</strong> bastelt (auf Heft-DVD).<br />

Der erste Test<br />

Ran an die Arbeit. Schreiben Sie zunächst eine XML-Datei zur<br />

Bücherliste mit diesem Inhalt:<br />

<br />

<br />

<br />

<br />

Ich bin ein Berliner<br />

John F. Kennedy<br />

133<br />

12.80<br />

<br />

<br />

Ich auch<br />

Hubert Meyer<br />

CHIP | PROFESSIONELL<br />

k DVD <strong>HTML</strong>-Editoren<br />

k XSLT Profi Auf der Heft DVD finden Sie den XMLwriter 2.4.<br />

Der XML-Editor wandelt XML-Dokumente mit Hilfe von XSL<br />

Stylesheets in <strong>HTML</strong> um. Viele weitere Funktionen, etwa<br />

die automatische Tag-Ergänzung, erleichtern die Arbeit.<br />

k Listings Die im Artikel verwendeten Beispiele finden Sie<br />

als fertige Listings auf der DVD unter Web-Server-Utilities.<br />

422<br />

69.90<br />

<br />

<br />

Wo ist Berlin<br />

Hans Dampf<br />

152<br />

29.90<br />

<br />

<br />

Ich bin a Münchener<br />

Hias Dimpfelmoser<br />

152<br />

225.80<br />

<br />

<br />

Wichtig ist die zweite Zeile: . Sie teilt<br />

später dem Internet Explorer mit, wo er die zugehörige XSL-<br />

Datei finden kann. Speichern Sie die XML-Datei unter dem<br />

Namen „buecher.xml“ auf Ihrem Desktop.<br />

Im Folgenden geht es darum: Die XSL-Vorlage gestaltet ein<br />

<strong>HTML</strong>-Gerüst. In dieses Gerüst fügt sie die XML-Daten aus dem<br />

gerade geschriebenen File ein. Bauen Sie ein erstes XSL-File:<br />

<br />

<br />

<br />

Titelliste<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

In der ersten Zeile des Listings legen Sie die Art der Vorlagendatei<br />

fest. Übernehmen Sie diese in jede XSL-Datei. Danach<br />

geht es mit der ersten Vorlage los. Sie beginnt mit<br />


sen aber syntaktisch korrekt sein. Ein normales würde der<br />

XSL-Prozessor ablehnen, erst bei ist alles in Ordnung.<br />

Ebenso müssen die Werte von Parametern wie bei „border=“1““<br />

in Anführungszeichen stehen.<br />

Unter dem -Tag steht .<br />

Das bedeutet für den Prozessor: Wende alle verfügbaren Templates<br />

auf die Elemente unterhalb von „werke“ an. Es sind aber<br />

noch keine solchen Templates vorhanden. Deswegen kippt der<br />

Prozessor einfach alle Daten in die Tabelle. Im Browser sieht das<br />

noch nicht gut aus – aber immerhin ist ein Anfang gemacht.<br />

Beachten Sie, dass Sie jedes Template mit <br />

abschließen. Ganz unten im Listing finden Sie außerdem den<br />

Abschluss für die XSL-Datei: . Speichern Sie<br />

die XSL-Datei unter dem Namen „buecher.xsl“.<br />

Weitere Vorlagen für die XSL-Datei<br />

Natürlich kann das simple Template niemanden zufriedenstellen.<br />

Abgesehen davon kommt kein vernünftiger <strong>HTML</strong>-<br />

Code dabei heraus. Also braucht die XSL-Datei noch Anweisungen<br />

für Tabellenzeilen und für die einzelnen Zellen. Die<br />

Zeilen ordnen Sie dem Zweig „buch“ zu. Denn jedes „buch“<br />

enthält die Detaildaten, die dann später in den Tabellenzellen<br />

angezeigt werden.<br />

Für die Zeilen zuständig ist der Eintrag<br />

<br />

<br />

<br />

<br />

<br />

An dieser Stelle stehen -Tags für Anfang und Ende einer<br />

Tabellenzeile. Innerhalb dieses Tags finden Sie wieder die Anweisung,<br />

nach der erneut Stilvorlagen angewandt werden sollen.<br />

In der XSL-Datei geht es weiter mit<br />

<br />

<br />

<br />

<br />

k<br />

BEISPIELDATEI „TITELLISTE“ Web-Server-Utilities<br />

<br />

<br />

<br />

Titelliste<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

DAS ERGEBNIS: So sieht der fertige, mit Hilfe des Tools Saxon<br />

produzierte <strong>HTML</strong>-Quelltext aus.<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

background:green;color:white<br />

<br />

<br />

background:red;color:white<br />

<br />

<br />

<br />

<br />

<br />

TABELLEN AUFPEPPEN: XSL-Vorlagen färben die Preise unterschiedlich.<br />

Schnäppchen erscheinen grün, teure Bücher rot.<br />

CHIP | PROFESSIONELL<br />

63


64<br />

AKTUELL | PLANEN | AUFBAU k XSLT | SPECIAL | OPTIMIEREN |<br />

<br />

Unterhalb des Knotens „buch“ gibt es die Elemente „titel“,<br />

„autor“, „seiten“ und „preis“. Jedes dieser Elemente soll in der<br />

gleichen Weise dargestellt werden. Deswegen definieren Sie<br />

für alle vier ein gemeinsames Stylesheet. Damit der Stylesheet-<br />

Prozessor versteht, was Sie wollen, tippen Sie hinter „match“ die<br />

Element-Namen ein, jeweils mit einem senkrechten Strich<br />

unterteilt. Der Strich steht für eine „Oder“-Verknüpfung. Die<br />

Vorlage gilt also für „titel“ oder für „autor“ oder für „seiten“<br />

oder für „preis“.<br />

Die Werte selbst erzeugt „value-of select=“.““. Diese Anweisung<br />

bedeutet: „Nimm den Wert des aktuellen Knotens<br />

und füge ihn ein.“ Achten Sie beim Ergänzen der Datei<br />

XSLT-PROZESSOR<br />

Website-Update mit Saxon<br />

Den XSLT-Prozessor Saxon hat<br />

CHIP in der neuesten Version<br />

für Sie auf die Heft-DVD gepackt.<br />

Da Windows XP keine<br />

Java-Virtual-Machine eingebaut<br />

hat, ist der Aufruf des Programms<br />

etwas knifflig:<br />

java -jar saxon.jar<br />

meindat.xml meindat.xsl ><br />

meindat.html<br />

Zunächst startet der Befehl<br />

die Java Engine. Die bekommen<br />

Sie unter http://java.sun.com.<br />

Danach wird das Programm<br />

CHIP | PROFESSIONELL<br />

ORDNUNGSHÜTER:<br />

Ein einfacher<br />

Befehl sorgt für<br />

Ordnung. Im<br />

zweiten Bild sind<br />

die Einträge nach<br />

Seitenzahl (dritte<br />

Spalte) sortiert.<br />

<strong>HTML</strong>-Editoren<br />

saxon.jar geladen, das als ersten<br />

Parameter die XML- und als<br />

zweiten die XSL-Datei mit auf<br />

den Weg bekommt.<br />

Mit dem „>“-Zeichen gelangt<br />

das Ergebnis in die <strong>HTML</strong>-Datei,<br />

die sich direkt im Browser verwenden<br />

lässt. Praktisch ist das<br />

bei Informationen, die sich gelegentlich<br />

ändern: Sie bekommen<br />

die Daten als XML, wandeln<br />

Sie mit Saxon um und laden<br />

die resultierende <strong>HTML</strong>-<br />

Datei auf den Server.<br />

XSLT-PROZESSOR: Das Tool Saxon bringt XML mit XSLT<br />

zusammen und erzeugt unter anderem <strong>HTML</strong>-Dateien.<br />

darauf, dass die neuen Templates vor dem abschließenden<br />

„“ eingebaut werden müssen. Damit ist das<br />

erste, einfache Stylesheet fertig.<br />

Mehr aus dem Stylesheet holen<br />

Natürlich kann es nicht der Weisheit letzter Schluss sein, alle<br />

Daten aus der Liste in einer farblosen Tabelle anzuzeigen.<br />

Bringen Sie also Farbe ins Spiel. Dazu ergänzen Sie das<br />

Stylesheet um diese Zeilen:<br />

<br />

<br />

<br />

<br />

<br />

Diese Vorlage gilt nur für Einträge des Knotens „preis“. Dementsprechend<br />

müssen Sie die Zeile<br />

<br />

aus der vorhergehenden Vorlage ändern in<br />

<br />

Zu jedem Element „preis“ erzeugt das Template nun eine<br />

Tabellenzelle mit der Stylesheet-Information „background:<br />

yellow“. Der Zellhintergrund erscheint also gelb gefärbt.<br />

Oder sollen vielleicht nur die Preise farbig sein, die besonders<br />

günstig sind? Die Schnäppchen-Funktion sieht so aus:<br />

<br />

<br />

<br />

background:green;color:white<br />

<br />

<br />

background:red;color:white<br />

<br />

<br />

<br />

<br />

Im Grunde ist hier nur die Vorlage für „preis“ ein wenig<br />

erweitert worden. Hinzugekommen sind zwei „if“-Anweisungen<br />

und ein neues Element namens . Mit<br />

überprüft das Stylesheet eine Bedingung. Die ist im<br />

Parameter „test“ festgelegt und heißt: „. &lt; 20“. Statt des „&lt;“<br />

setzt der Prozessor später das Kleiner-Zeichen „


ENTRÜCKT: Sauberes Einrücken der einzelnen Befehle sorgt<br />

für den richtigen Überblick im XSLT-Quelltext.<br />

style=“background:green;color:white“>12.80<br />

Dasselbe Spiel findet statt, wenn der Preis über 100 liegt.<br />

Dann wird der Preis rot eingefärbt, denn das ist dann kein<br />

Schnäppchen mehr.<br />

Eine beliebte Fehlerquelle bei Vergleichen ist übrigens diese:<br />

Sind Zahlen mit Kommas statt mit Punkten getrennt, erkennt<br />

die Software keine Zahl. Schreiben Sie Preise deshalb<br />

immer im Format 12.80 statt 12,80.<br />

Die Ausgabe sortieren<br />

Sie möchten noch etwas mehr Ordnung in Ihre Daten bringen?<br />

Kein Problem: Sortieren Sie die Tabelle. Dazu müssen Sie die<br />

ersten Zeilen im Template zwischen und ein wenig umbauen. Aus<br />

wird<br />

<br />

UNVERSÖHNLICH: Der kleinste Fehler im XSLT-Template ruft<br />

sofort eine Fehlermeldung auf.<br />

<br />

<br />

Dem geben Sie ein Element mit auf den Weg,<br />

nach dem sortiert wird. Statt der „seiten“ funktionieren<br />

natürlich auch „titel“ oder „autor“. Der Rest des Stylesheets<br />

bleibt wie gehabt – doch das Ergebnis ändert sich: Die Daten<br />

erscheinen nun sauber sortiert.<br />

Übrigens: Falls Sie die Daten nach mehreren Kriterien<br />

sortieren wollen, schreiben Sie die einfach untereinander, etwa:<br />

<br />

<br />

<br />

<br />

Auf diese Weise bekommen Sie den richtigen Überblick<br />

auch in ziemlich umfangreiche und komplexe Tabellen.<br />

Martin Goldmann<br />

65


66<br />

AKTUELL | PLANEN | AUFBAU k CSS | SPECIAL | OPTIMIEREN |<br />

Cascading Stylesheets einsetzen<br />

Schnelle Stilvorlagen<br />

Mit Cascading Stylesheets, kurz CSS, geben Sie Ihren Webseiten mit wenig Aufwand ein einheitliches Design,<br />

das Sie zudem jederzeit rasch ändern können. Lesen Sie, wie Sie mit den Stilvorlagen gekonnt arbeiten, Ihren<br />

Internet-Auftritt schlanker und schneller machen und die Stylesheets perfekt in <strong>HTML</strong> einbinden.<br />

k<br />

Erst mit den Vorlagen aus den Cascading Stylesheets<br />

(CSS) verwandeln sich dröge Web-Wüsten mit ein paar<br />

Handgriffen in blühendes Design. Denn in einem Stylesheet<br />

lassen sich Formatierungen für <strong>HTML</strong>-Elemente festlegen.<br />

Diese Formatierungen bestimmen etwa, dass alle Überschriften<br />

mit „“ in Rot und Fettschrift angezeigt werden.<br />

Zusätzlich gibt es sogenannte Klassen. Das sind Vorlagen,<br />

die sich über einen Parameter jedem beliebigen Tag zuordnen<br />

lassen. Sie dürfen also generell festlegen, dass die Klasse<br />

„.sonderpreis“ immer in Fettschrift und grün hinterlegt erscheint,<br />

und können diese Klasse dann einer Tabellenzelle oder<br />

einem normalen Text zuordnen.<br />

Und wie bekommen Sie die Stylesheets in die <strong>HTML</strong>-<br />

Dokumente? Auch an dieser Stelle gibt es zwei Möglichkeiten:<br />

Entweder schreiben Sie die Anweisungen direkt in das <strong>HTML</strong>-<br />

Dokument, oder Sie erzeugen eine Datei, die vom <strong>HTML</strong>-<br />

Dokument extra hinzugeladen wird. Am besten ist die zweite<br />

Methode. Denn einmal geschriebene CSS-Vorlagen können<br />

Sie dann von mehreren <strong>HTML</strong>-Dokumenten aus verwenden,<br />

was für eine einheitliche Optik Ihres Web-Auftritts sorgt. Und<br />

wenn Sie die Farben und das Design Ihrer Homepage ändern<br />

wollen, müssen Sie lediglich eine CSS-Datei bearbeiten – das<br />

spart Ihnen eine Menge Arbeit.<br />

Die ersten Schritt zum Stylesheet<br />

Schreiben Sie zunächst eine kleine <strong>HTML</strong>-Datei. Sie soll uns auf<br />

den nächsten Seiten dieses Workshops als Demonstrationsobjekt<br />

dienen:<br />

<br />

<br />

<br />

CSS-Testseite<br />

<br />

<br />

Willkommen bei der<br />

CHIP | PROFESSIONELL<br />

k DVD <strong>HTML</strong>-Editoren<br />

k CSS editing Mit Topstyle Pro und Rapid CSS stehen Ihnen<br />

zwei umfangreiche CSS-Editoren zur Verfügung. Viele<br />

nützliche Freeware, wie CSS-Editor, CSS-Maker und<br />

Balthisar Cascade finden Sie unter Webmaster-Tools.<br />

k Listings Die im Artikel verwendeten Beispiele finden Sie<br />

als fertige Listings auf der DVD unter Web-Server-Utilities.<br />

Testseite<br />

<br />

<br />

Eintrag 1Eintrag<br />

2<br />

<br />

<br />

Eintrag 3Eintrag 4<br />

<br />

AUS DER PRAXIS – DIE AGENTUR SCREAMDESIGN<br />

Schlanker und schneller mit CSS<br />

„Ein entscheidender Vorteil bei der<br />

Verwendung von Cascading Stylesheets<br />

(CSS) ist die Möglichkeit zur<br />

Trennung von Layout und Inhalt, die<br />

insbesondere bei externen CSS den<br />

DESIGN OHNE TABELLEN: Die Website www.aerzte-muenchen.de<br />

wurde komplett mit Cascading Stylesheets (CSS) formatiert.<br />

<br />

Das ist eine kleine Beispieltabelle. Sie zeigt,<br />

was alles mit CSS möglich ist.<br />

Hier noch eine Überschrift in H2<br />

Und eine Überschrift in H3<br />

Noch eine wichtige<br />

Überschrift<br />

<br />

<br />

Umfang der <strong>HTML</strong>-Dateien erheblich<br />

reduziert und einen raschen<br />

Bildaufbau garantiert. Auf diese<br />

Weise sind Design-Änderungen<br />

auch für sehr umfangreiche Web-


Die besten CSS-Seiten im Internet<br />

CSS-Tutorialk http://www.webdesign-referenz.de<br />

/html_css.shtml<br />

Ausführliches Kapitel aus dem eBook „Die Webdesign-Referenz“<br />

Tipps & Tricks zu CSS k http://www.drweb.de<br />

Online-Magazin für Web-Designer mit praktischen Tipps,<br />

fachlichem Know-how und kreativen Ideen<br />

Beispielseiten zu CSS k http://www.stern.de,<br />

http://www.perlentaucher.de, http://www.bigping.de<br />

seiten rasch durchführbar“,<br />

so Dr. Karl<br />

Prinz, Geschäftsführer<br />

der Münchner Agentur<br />

Screamdesign GmbH.<br />

Will man die Stylesheets<br />

kleinhalten, so können<br />

Formatierungen, die<br />

ausschließlich für<br />

eine Seite gelten,<br />

direkt eingebunden<br />

werden.<br />

Eine seitenoptimierteDarstellung<br />

für diverse<br />

Wiedergabegeräte<br />

– vom normalen Web-Browser bis<br />

hin zum PDA, Fernseher oder<br />

Braille-Lesegerät –, wie es etwa die<br />

Barrierefreie Informationstechnik-<br />

Verordnung (BITV) und das Behindertengleichstellungsgesetz<br />

(BGG) fordern, ist nur bei konsequenter<br />

Anwendung von CSS 2.0<br />

realisierbar – und unter Verzicht auf<br />

die Formatierung der Seite mit Tabellen<br />

und Framesets.<br />

„Design-Änderungen<br />

sind mit CSS<br />

schnell erledigt“<br />

DR. KARL PRINZ,<br />

GESCHÄFTSFÜHRER SCREAMDESIGN<br />

Speichern Sie diese <strong>HTML</strong>-Datei unter dem Namen<br />

„chip.html“ auf Ihrer Festplatte. Bereits jetzt können Sie die<br />

Datei im Browser ansehen. Allerdings sieht die Optik noch<br />

reichlich öde aus. Damit sich das ändert, ist der Befehl zum<br />

Einbinden der CSS-Datei bereits eingebaut:<br />

<br />

Anstelle des Dateinamens können Sie auch einen Pfad<br />

oder eine URL eingeben. Die CSS-Datei ihrerseits ist eine einfache<br />

Textdatei, in der die Formatierungsbefehle stehen. Sie<br />

sieht beispielsweise so aus:<br />

body { font-family: Verdana,Arial,sans-serif;<br />

font-size: 14pt;<br />

}<br />

h1,h2,h3 {font-weight: bold;<br />

}<br />

Nur bei wirklich minimalistischen<br />

Websites,<br />

die nur wenige Seiten<br />

umfassen, lohnt sich<br />

die Anlage von externen<br />

Stylesheets nicht.<br />

Beim Einsatz von CSS<br />

ist zu beachten, dass<br />

fehlerhafte <strong>HTML</strong>-<br />

Auszeichnungen<br />

unvorhersehbare<br />

Folgen für die Darstellung<br />

der Seiten<br />

haben können.<br />

Der Sourcecode<br />

sollte deshalb<br />

in gültigem (X)<strong>HTML</strong> verfasst<br />

sein, Nutzer von sogenannten<br />

WYSIWYG-<strong>HTML</strong>-Editoren müssen<br />

Quelltext-Fehler ihrer Programme<br />

nachträglich manuell entfernen.<br />

Die Agentur Screamdesign ist auf<br />

die Konzeption und Realisierung<br />

von Internet-Anwendungen (Shop-,<br />

CMS-Systeme) sowie auf das Design<br />

großer Websites spezialisiert.<br />

k www.screamdesign.de<br />

h1 {font-size: 18pt;}<br />

h2 {font-size: 14pt;}<br />

h3 {font-size: 12pt;<br />

text-decoration: underline;}<br />

.wichtig { color: red;<br />

}<br />

letter-spacing:2pt;<br />

font-weight: bold;<br />

h1.bighead { font-size: 22pt;<br />

}<br />

font-style: italic;<br />

h1.smallhead { font-size: 16pt;<br />

}<br />

table { border-width: 2px;<br />

border-style: solid;<br />

border-color: blue;<br />

background: maroon;<br />

color: yellow;<br />

}<br />

Speichern Sie die CSS-Datei unter dem Namen „chip.css“<br />

auf Ihrer Festplatte. Der grundsätzliche Aufbau der CSS-<br />

Anweisungen sieht so aus: Am Beginn der Anweisung steht ein<br />

Tag – ohne eckige Klammern. Alternativ steht an dieser Stelle<br />

ein frei wählbarer Begriff mit vorangestelltem Punkt – die<br />

Klasse. Achtung: Die Klasse wird in CSS mit vorangestelltem<br />

Punkt deklariert, im <strong>HTML</strong>-Code jedoch ohne den Punkt<br />

angewendet.<br />

Der erste CSS-Eintrag legt mit „body“ die Vorgaben für<br />

die komplette Seite fest. Diese Vorgaben vererben sich an alle<br />

Tags weiter, die innerhalb des definierten Tags liegen. Alles,<br />

was also zwischen und liegt, bekommt die<br />

Formatierungen mit.<br />

Die Formatierungen werden zwischen geschweiften Klammern<br />

angegeben und voneinander mit Strichpunkten abgetrennt,<br />

zum Beispiel<br />

font-family: Verdana,Arial,sans-serif;<br />

font-size: 14pt;<br />

Mit „font-family“ legen Sie die verwendete Schriftart fest.<br />

Da Sie nicht wissen können, über welche Schriftarten der<br />

Computer Ihres Website-Besuchers verfügt, bieten Sie möglichst<br />

mehrere Alternativen an. In diesem Beispiel versuchen Sie es<br />

zunächst mit der Schriftart „Verdana“. Falls die auf dem PC Ihres<br />

Gastes nicht vorhanden ist, probiert es das Stylesheet mit der<br />

Schriftart „Arial“. Klappt auch das nicht, wird auf die Schriftart<br />

zurückgegriffen, die im Browser als „Sans-serif“ definiert ist. Auf<br />

diese Weise steht in jedem Fall eine halbwegs passende Schrift<br />

zur Verfügung. Wichtig: Falls Sie Schriften verwenden, in deren<br />

Namen ein Leerzeichen vorkommt, schreiben Sie deren Namen<br />

in Anführungszeichen, zum Beispiel:<br />

font-family: ‘Times New Roman’,serif;<br />

Ist die Schrift festgelegt, geht es in der nächsten Zeile weiter.<br />

Die kümmert sich um die Schriftgröße:<br />

font-size: 14pt;<br />

k<br />

CHIP | PROFESSIONELL<br />

67


68<br />

AKTUELL | PLANEN | AUFBAU k CSS | SPECIAL | OPTIMIEREN |<br />

Die Schriftgröße geben Sie in Punkt an. Damit steht fest:<br />

Das Dokument erscheint im Browser in der Schriftart Verdana<br />

mit einer Schriftgröße von 14 Punkt.<br />

Beachten Sie, dass die Werte in CSS nach einem Doppelpunkt<br />

aufgeschrieben werden. Manche Browser, beispielsweise<br />

der Internet Explorer, verstehen zwar auch ein Gleichheitszeichen.<br />

Doch das ist falsch und kann zu schwer nachvollziehbaren<br />

Fehlern im Web-Design führen.<br />

Mehrere Tags in einer Anweisung<br />

Weiter geht es mit einem schicken Trick: Die Überschriften<br />

„h1“, „h2“ und „h3“ sollten grundsätzlich in Fettschrift erscheinen.<br />

Dafür sorgt die Anweisung<br />

h1,h2,h3 {font-weight: bold;<br />

}<br />

Das ist sehr praktisch: Sie können also mehrere Tags in einer<br />

Anweisung zusammenfassen, wenn Sie diese – getrennt durch<br />

Kommata – hintereinander schreiben. Das gilt auch für Klassen.<br />

Die Anweisung<br />

font-weight: bold;<br />

für Fettschrift trifft also für alle an dieser Stelle definierten<br />

Überschriften in gleicher Weise zu.<br />

Da sich aber die Headlines auch in ihrer Wertigkeit<br />

unterscheiden sollen, definieren Sie einfach die drei Überschriften<br />

noch einmal:<br />

h1 {font-size: 18pt;}<br />

h2 {font-size: 14pt;}<br />

h3 {font-size: 12pt;<br />

text-decoration: underline;}<br />

Die ersten beiden Anweisungen sind schnell erklärt: Der<br />

Reihe nach werden für die Überschriften „h1“ und „h2“<br />

Schriftgrößen festgelegt. Die Überschrift „h3“ soll darüber<br />

hinaus unterstrichen erscheinen. Das erledigt die Anweisung:<br />

text-decoration: underline;<br />

Der Kniff dabei: Das „Cascading“ der Stylesheets bedeutet<br />

frei übersetzt „aufeinander aufbauend“. In der Praxis heißt das:<br />

Die Überschrift „h1“ wurde bereits einmal in<br />

STANDARDS: Im Web-Browser können Sie die Schriftarten<br />

wie „Serif“ und „Sans-serif“ einstellen.<br />

CHIP | PROFESSIONELL<br />

PROFI-TIPP<br />

Stylesheets validieren lassen<br />

Das World Wide Web Consortium<br />

bietet Ihnen einen Service,<br />

den Sie unbedingt in Anspruch<br />

nehmen sollten: Unter der<br />

Adresse http://jigsaw.w3.org/<br />

css-validator/ können Sie Ihre<br />

CSS-Werke überprüfen lassen.<br />

Der Validator nimmt CSS-Daten<br />

per Upload oder in einem Formularfeld<br />

auf, oder Sie geben<br />

die Internet-Adresse eines<br />

Stylesheets ein. In allen drei<br />

Fällen unterprüft der Validator<br />

die Vorlagen auf Syntaxfehler<br />

und gibt ein ausführliches Protokoll<br />

aus.<br />

UNTERSUCHUNG:<br />

Bevor Sie eine<br />

CSS-Datei auf die<br />

Internet-Gemeinde<br />

loslassen, sollten<br />

Sie sie vom<br />

CSS-Validator<br />

überprüfen lassen.<br />

h1,h2,h3 {font-weight: bold;<br />

}<br />

definiert. Und die zweite Definition baut darauf auf. Zu der<br />

bereits bestehenden Eigenschaft kommt also eine weitere hinzu.<br />

Die Überschrift „h1“ wird also in Fettschrift und mit der<br />

Schriftgröße 18 Punkt angezeigt. Auf diese Weise können Sie für<br />

mehrere <strong>HTML</strong>-Elemente gemeinsame Eigenschaften festlegen<br />

und später mit weiteren Anweisungen verfeinern. Das erspart<br />

Ihnen eine Menge Tipparbeit.<br />

Zurück zur Vorlage. Die nächste Anweisung<br />

.wichtig { color: red;<br />

letter-spacing:2pt;<br />

font-weight: bold;<br />

}<br />

definiert eine Klasse, erkennbar am vorangestellten Punkt.<br />

Die Eigenschaften:<br />

color: red;<br />

sorgt für eine rote Schriftfarbe,<br />

letter-spacing:2pt;<br />

erzeugt einen Abstand von zwei Punkt zwischen den Buchstaben,<br />

font-weight: bold;<br />

zeigt die Buchstaben fett an. Ob das im Browser gut aussieht,<br />

bleibt Ihnem Geschmack überlassen – aber Sie können die Vorgaben<br />

nach Belieben ändern.<br />

In der nächsten Anweisung lernen Sie noch eine Spezialität<br />

der CSS kennen:<br />

h1.bighead { font-size: 22pt;<br />

font-style: italic;<br />

Dabei handelt es sich um eine Klasse, die fest einem Tag<br />

zugeordnet ist. Während alle <strong>HTML</strong>-Tags auf die zuvor definierte<br />

Klasse „.wichtig“ zugreifen dürfen, gilt „h1.bighead“<br />

ausschließlich für „h1“-Überschriften. An dieser Stelle ist


DER EXPERTEN-TIPP VON KAI LABORENZ<br />

Drei Super-Tipps für gute CSS-Sites<br />

CSS-Menüs aus Listen. Das<br />

semantisch korrekte Element für<br />

ein Menü ist die ungeordnete<br />

Liste „“. Mit CSS können Sie<br />

Listen so verändern, dass sie<br />

als vertikale oder horizontale (!)<br />

Menüs verwendet werden. Dazu<br />

schalten Sie per „list-style: none“<br />

die Aufzählungszeichen ab und<br />

verwandeln die Listenelemente<br />

mit „display: block“ in Bereiche.<br />

Ausführliche Anleitungen: http://<br />

css.maxdesign.com.au/listamatic<br />

Simulierte Spalten per Hintergrundgrafik.<br />

CSS-Spalten so zu<br />

realisieren, dass sie auch bei wenig<br />

Inhalt bis zum Seitenende<br />

reichen, ist schwierig. Für Spalten<br />

mit fester Breite gibt es jedoch<br />

einen einfachen Trick: Verwenden<br />

Sie eine Hintergrundgrafik für<br />

den und simulieren Sie<br />

damit eine Spalte. Da Sie per CSS<br />

festlegen können, dass eine<br />

Grafik nur vertikal wiederholt<br />

wird, ist die dafür benötigte<br />

Grafik sehr klein.<br />

Die Sache mit den Schriften.<br />

Lange Zeit war die gleichartige<br />

Darstellung von Schriften über<br />

System- und Browser-Grenzen<br />

hinweg ein Problem, das sich nur<br />

durch Schriftgrößen-Angaben in<br />

Pixeln lösen ließ. Allerdings<br />

lassen sich festgelegte Schriften<br />

im Internet Explorer vom Besucher<br />

nicht mehr vergrößern –<br />

nicht gerade benutzerfreundlich.<br />

Besser ist es, relative Schriftgrößen<br />

festzulegen, die in allen<br />

neben der Schriftgröße eine neue Eigenschaft eingebaut: Mit der<br />

Anweisung<br />

font-style: italic;<br />

schalten Sie die Kursivschrift ein. Achtung: Für Fettschrift<br />

verwenden Sie „font-weight“, für Kursivschrift dagegen „fontstyle“.<br />

Analog zu „.bighead“ definieren Sie noch eine kleinere<br />

Überschriftenklasse:<br />

h1.smallhead { font-size: 16pt;<br />

}<br />

Ein richtig dicker Klops folgt in der CSS-Anweisung für<br />

die Tabelle:<br />

table { border-width: 2px;<br />

border-style: solid;<br />

border-color: blue;<br />

background: maroon;<br />

color: yellow;<br />

}<br />

In dieser Anweisung basteln Sie zunächst einen Rahmen für<br />

die Tabelle. Die Eigenschaft<br />

EFFEKTVOLL: Mit dem<br />

Hover-Effekt können Sie<br />

Links hervorheben,<br />

sobald der Mauszeiger<br />

darübersteht.<br />

Browsern gleich groß sind:<br />

Zunächst wird mit „body { fontsize:<br />

100.01%;}“ eine einheitliche<br />

Grundlage geschaffen (der<br />

krumme Wert korrigiert ein paar<br />

Probleme mit Opera-Browsern);<br />

danach können alle weiteren<br />

Schriften in der Einheit „em“<br />

formatiert werden. 1 em entspricht<br />

dabei der Schrifthöhe des<br />

Elementes. „font-size: 0.8em“<br />

setzt also die Schrift auf das 0,8fache<br />

der bislang verwendeten<br />

Schriftgröße. Achtung: Die Angaben<br />

vererben sich! Wenn Sie<br />

also in einem Bereich 0,8 em festlegen<br />

und in einem darin befindlichen<br />

weiteren Bereich auch 0,8<br />

em notieren, dann gilt für die<br />

Schrift: 0,8 x 0,8=0,64 em!<br />

EXPERTE<br />

Kai Laborenz ist<br />

seit 1994 als<br />

Webdesigner tätig.<br />

Seitdem hat<br />

er sein Wissen<br />

in zahlreichen<br />

Kursen und<br />

Workshops vermittelt,<br />

unter anderem beim<br />

größten deutschen E-Learning-<br />

Anbieter Akademie.de, wo er<br />

zudem als Webmaster tätig war.<br />

Laborenz ist Geschäftsführer der<br />

Internet-Agentur Sunbeam und<br />

entwickelte Websites für Kunden<br />

wie BP und die Deutsche Energie-<br />

Agentur.<br />

Sein Buch „CSS-Praxis – Browserübergreifende<br />

Lösungen“ ist<br />

bei Galileo Computing erschienen<br />

(34,90 Euro, mit CD, 2. Aufl. 2004).<br />

k www.css-praxis.de<br />

border-width: 2px;<br />

legt fest, dass der Rahmen der Tabelle zwei Bildpunkte<br />

breit ist,<br />

border-style: solid;<br />

steht für eine durchgehende Linie und<br />

border-color: blue;<br />

zeichnet den Rahmen in blauer Farbe. Wichtig ist dabei: Sie<br />

brauchen immer die Angabe „border-style“, wenn Sie einen<br />

Rahmen zeichnen wollen. Andernfalls ist später im Web-<br />

Browser nichts zu sehen.<br />

Danach bekommt die Tabelle noch eine eigene Hintergrundfarbe,<br />

nämlich das rotbraune „maroon“, und schließlich<br />

eine gelbe Schriftfarbe.<br />

Das Stylesheet in <strong>HTML</strong> einbinden<br />

Damit ist das Stylesheet fertig. Sie haben allerdings noch eine<br />

ganze Reihe mehr Formatierungsmöglichkeiten. Aber zunächst<br />

einmal kümmern wir uns noch um das Einbinden der CSS-<br />

Anweisungen in <strong>HTML</strong>. Die globalen Anweisungen für k<br />

SCHIEF GELAUFEN: Der Hover-Effekt kann das Layout Ihrer<br />

Website arg durcheinanderbringen. Hier wird die Spalte<br />

plötzlich breiter.<br />

CHIP | PROFESSIONELL<br />

69


70<br />

AKTUELL | PLANEN | AUFBAU k CSS | SPECIAL | OPTIMIEREN |<br />

„“ und für die Tabelle werden automatisch dem Tag<br />

und damit dem <strong>HTML</strong>-Dokument zugeordnet. So wird beispielsweise<br />

bei der Überschrift<br />

Willkommen bei der<br />

Testseite<br />

zusätzlich die Klasse „bighead“ eingebunden. Diese Überschrift<br />

erscheint somit in 22 Punkt Schriftgröße und kursiv.<br />

Später im Quelltext findet sich die Klasse „wichtig“ wieder – bei<br />

zwei unterschiedlichen Tags, nämlich in<br />

Eintrag 1Eintrag<br />

2<br />

und in<br />

Noch eine wichtige<br />

Überschrift<br />

Das zeigt: Die Klasse „wichtig“ ist vielseitig und zusammen<br />

mit mehreren Tags einsetzbar.<br />

Weitere Formatierungen definieren<br />

Nun sind Sie schon fast ein CSS-Profi – und ein Profi braucht<br />

natürlich auch formatierbare Links. Die erhalten Sie mit den<br />

folgenden Anweisungen:<br />

PROFI-TIPPS ZU CSS<br />

Mehr machen mit Cascading Stylesheets<br />

Die folgenden Tipps erleichten<br />

Ihnen den Umgang mit den CSS-<br />

Stilvorlagen:<br />

Richtige Namen für Klassen<br />

wählen. Ein beliebter Fehler entsteht<br />

so: Ein Element soll rot und<br />

fett erscheinen. Was liegt also<br />

näher, als die zugehörige Klasse<br />

„rotfett“ zu nennen. Falsch! Denn<br />

irgendwann werden Sie auf die<br />

Idee kommen, dieselben Texte<br />

grün und kursiv zu darzustellen.<br />

Dann müssen Sie die Klasse „rotfett“<br />

so ändern, dass der Name<br />

nicht mehr stimmt. Das sorgt für<br />

erhebliche Verwirrung. Wählen Sie<br />

statt dessen beschreibende Namen<br />

für die Formatierungen, also<br />

„sonderangebot“, „wichtig“ oder<br />

„anschrift“. Damit sind Sie sicherer.<br />

Keine Umlaute. Verwenden Sie in<br />

Klassennamen keine Umlaute! Das<br />

kann Probleme geben.<br />

CSS direkt beim Tag. Natürlich<br />

können Sie Format-Anweisungen<br />

auch direkt beim <strong>HTML</strong>-Element<br />

unterbringen, zum Beispiel:<br />

Hallo Welt<br />

Jedoch sind auf diese Weise<br />

gesetzte Formatierungen nicht<br />

einfach zu ändern, wenn Sie Ihre<br />

Website komplett umgestalten<br />

CHIP | PROFESSIONELL<br />

wollen. Sie müssen sie dann in<br />

jeder <strong>HTML</strong>-Datei mühsam suchen<br />

und ändern.<br />

CSS in <strong>HTML</strong>-Datei schreiben.<br />

So binden Sie ein Stylesheet direkt<br />

in <strong>HTML</strong> ein:<br />

<br />

Titel der<br />

Datei<br />

<br />

><br />

<br />

<br />

Zunächst bestimmen Sie Aussehen des Links selbst, zum<br />

Beispiel mit<br />

a:link {color: red;}<br />

Wenn ein Link einmal angeklickt wurde, erhält er jedoch eine<br />

andere Farbe. Die legen Sie fest mit<br />

a:visited {color: orange;}<br />

Dann gibt es noch den aktiven Link. Das „aktiv“ gilt, wenn<br />

der Link angeklickt ist. Diese Formatierung legen Sie fest mit<br />

a:active {color: black;}<br />

Zum Schluss noch eine Spezialität, die allerdings häufig<br />

für Ärger sorgt, weil nicht jeder Browser „a:hover“ versteht.<br />

Mit<br />

a:hover {color: green;}<br />

legen Sie fest, dass sich der Link grün färbt, sobald der<br />

Mauszeiger darüberfährt. Allerdings kann dieser vermeintliche<br />

Grafik-Gimmick im Handumdrehen zum Problem werden. So<br />

lange Sie lediglich die Farbe ändern, ist alles in Ordnung. Viele<br />

unternehmen aber den Versuch, den Link in Fettschrift erscheinen<br />

zu lassen – und das kann das komplette Seitenlayout<br />

durcheinanderwirbeln. Setzen Sie dieses Format also lieber mit<br />

Bedacht ein. Martin Goldmann<br />

Das Einbinden geschieht mit<br />

dem Tag , das innerhalb<br />

von steht. Wichtig für<br />

ältere Browser sind die Kommentarzeichen<br />

>. Sie<br />

verhindern, dass die Stilvorlagen<br />

angezeigt werden, falls der<br />

Browser kein CSS versteht.<br />

CSS-Dateien kommentieren.<br />

Sie dürfen in CSS auch Kommentare<br />

eingeben. Sie sollten<br />

idealerweise aus kurzen Informationen<br />

über Sinn und Zweck<br />

eines Formats bestehen. Das sieht<br />

zum Beispiel so aus:<br />

/* Fuer Hervorhebungen */<br />

CSS IN AKTION: So sehen die Ergebnisse Ihres ersten Cascading<br />

Stylesheets im Web-Browser aus.<br />

.wichtig { color: red;<br />

letterspacing:2pt;<br />

font-weight: bold;<br />

}<br />

Von anderen lernen. Am besten<br />

lernen Sie, wenn Sie sich fremde<br />

Stylesheets ansehen. Falls die<br />

Vorlagen in einer eigenen Datei<br />

stecken, müssen Sie deren Namen<br />

aus dem <strong>HTML</strong>-Quellcode herausfinden.<br />

Ein Beispiel: Befindet sich<br />

auf der Seite<br />

http://www.foo.bar/hallo.<br />

html<br />

der Eintrag<br />

<br />

so kommen Sie mit<br />

http://www.foo.bar/chip.<br />

css<br />

an den Quelltext der zugehörigen<br />

CSS-Datei. Aber bitte<br />

denken Sie daran: Lernen, ja –<br />

klauen, nein!<br />

Vorsicht bei der Verwendung<br />

von Farbnamen. Nicht jeder<br />

Browser kann alle verstehen. Falls<br />

es also mit einer Farbangabe<br />

mal nicht klappt, versuchen Sie es<br />

mit der entsprechenden hexadezimalen<br />

Angabe. Zum Beispiel:<br />

#FF0000 statt red.


72<br />

AKTUELL | PLANEN | AUFBAU k Javascript | SPECIAL | OPTIMIEREN |<br />

Web-Design mit Javascript<br />

Leben für die Webseite<br />

Wem nützt eine sogenannte „Client-seitige Programmiersprache“, also eine, deren Wirkungskreis auf einen<br />

Internet-Browser beschränkt ist? Die Antwort ist einfach: Jedem Betreiber einer Webseite! Denn Javascript<br />

passt sich an die Browser-Version des Besuchers an und reduziert nicht zuletzt die Belastung des Webservers.<br />

k<br />

Während man mit <strong>HTML</strong> nur definiert, wie eine Seite<br />

auszusehen hat, bringt Javascript ganz neue Möglichkeiten<br />

ins Spiel: Sie können damit optische Effekte erzeugen,<br />

Berechnungen durchführen lassen und noch mehr. <strong>HTML</strong> gibt<br />

also das Design vor, und Javascript bringt Leben hinein.<br />

1 Das Ergebnis einer Berechnung ausgeben<br />

Das erste Beispiel führt eine ganz simple Berechnung durch<br />

und gibt das Ergebnis in einer Meldungsbox aus.<br />

<br />

<br />

var nErgebnis;<br />

nErgebnis = 8*4;<br />

alert("8 x 4 ergibt " + nErgebnis);<br />

<br />

<br />

Das in dieser <strong>HTML</strong>-Datei enthaltene dreizeilige Javascript-<br />

Programm wird durch die Umklammerung mit der Tag-Folge<br />

… von <strong>HTML</strong> abgetrennt. So weiß der<br />

Browser, dass er diesen Teil anders behandeln muss.<br />

Das Programm definiert zuerst die Variable „nErgebnis“,<br />

weist ihr den Wert der Multiplikation zu und gibt das Ergebnis<br />

dann über die in Javascript eingebaute Funktion „alert()“ aus.<br />

Man sieht schon einige Eigenschaften der Sprache: Die<br />

einzelnen Zeilen werden in Javascript mit einem Semikolon<br />

abgeschlossen. Variablen sind vor der Benutzung über das Kommando<br />

„var“ zu deklarieren. Den Typ der Variablen müssen Sie<br />

dabei aber nicht festlegen. Javascript führt stattdessen eine<br />

automatische Typ-Erkennung und -Umwandlung durch.<br />

2 Häufige Aufgaben in einer Funktion abkapseln<br />

Will man ähnliche Aufgaben mehrmals durchführen lassen, lohnt<br />

es sich, den wiederkehrenden Teil in einer Funktion abzukapseln,<br />

die man dann immer wieder aufruft, wenn man diese Aufgabe<br />

gelöst haben will. Im obigen Beispiel könnte man etwa eine Funktion<br />

schreiben, die das Produkt zweier Zahlen in einer Box aus-<br />

k Editoren Auf Heft-DVD finden Sie zahlreiche gute<br />

Freeware-<strong>HTML</strong>-Editoren, die Javascript beherrschen.<br />

Dazu gehören zum Beispiel 1st Page 2000, <strong>HTML</strong> Maker,<br />

Notepad2, phase5 oder Weaverslave.<br />

k Listings Die im Artikel verwendeten Beispiele finden Sie<br />

als fertige Listings auf der DVD unter Web-Server-Utilities.<br />

CHIP | PROFESSIONELL<br />

k DVD <strong>HTML</strong>-Editoren<br />

AUS DER PRAXIS – DIE AGENTUR PLAN.NET CONCEPT<br />

Kreatives Web-Design leistet mehr<br />

Kreatives Web-Design sieht nicht<br />

nur ansprechend aus, es befriedigt<br />

auch alle Kommunikationsbedürfnisse<br />

des Webseiten-Inhabers und<br />

des Seitenbesuchers.<br />

Für Plan.Net ist die optimale<br />

Anwendung modernster Technologien<br />

und Werkzeuge im Web-Design<br />

selbstverständlich. Bei der Gestaltung<br />

von Internet-Auftritten für<br />

WWW.REGENT.CH: Javascript fungiert als technisches Gestaltungselement<br />

für Usability-Anwendungen, zum Beispiel für den Wechsel<br />

des Button-Layouts bei MouseOver.<br />

gibt. Die beiden Zahlen selbst werden als Parameter übergeben,<br />

damit man beliebige Werte multiplizieren lassen kann:<br />

<br />

<br />

function produkt(m,n){<br />

var nErgebnis;<br />

nErgebnis = m * n;<br />

alert(m+" x "+n+" ergibt "+<br />

nErgebnis);<br />

}<br />

produkt(8,4);<br />

<br />

<br />

<br />

Der Rumpf der Funktion wird durch geschweifte Klammern<br />

eingeschlossen und enthält im Prinzip genau dieselben Zeilen<br />

wie im ersten Beispiel. Lediglich die Ermittlung des Ergebnisses<br />

sowie die Anzeige der Meldung nehmen darauf Rücksicht, dass


Die besten Javascript-Seiten im Web<br />

Javascript-Fundgrube k http://www.scriptsearch.com/<br />

Große Skriptbibliothek mit fast 1.200 Einträgen zu Javascript<br />

Michael Mailers Javascripts k http://www.mywebaid.de/<br />

Große deutschsprachige Sammlung von fertigen Javascript-<br />

Programmen<br />

Dokumentation von Stefan Münz k http://de.selfhtml.org/<br />

Diese bekannte <strong>HTML</strong>-Referenz enthält viele Informationen und<br />

Beispiele zu Javascript<br />

Unternehmen dienen sie<br />

ausschließlich der Antwort<br />

auf die immer aktuellen<br />

Fragen: „Was will<br />

und sollte das Unternehmen<br />

darstellen?“<br />

und „Was erwartet der<br />

User von einem Seiten-<br />

besuch?“<br />

Die Kunden von<br />

Regent, des<br />

Schweizer Marktführers<br />

für innovative<br />

Leuchten<br />

und Lichtsysteme,<br />

sind vor allem Innenarchitekten,<br />

aber auch interessierte<br />

Endkunden. Entsprechend<br />

konsequent konzentriert sich die<br />

gesamte Webseiten-Gestaltung auf<br />

die Darstellung von Licht und Raum<br />

unter gezielter Einbindung von<br />

Flash, um produkttypische Effekte<br />

zu visualisieren. Der Produktnutzen<br />

wird so schon online erlebbar.<br />

Entsprechend reduziert, aber<br />

sehr gezielt wird auch Javascript als<br />

„Wir setzen Javascript<br />

dezent, aber<br />

zielführend ein“<br />

TOMMY SCHMIDT, TEXT UND KONZEPTION<br />

GROUP HEAD, PLAN.NET CONCEPT<br />

nun als Multiplikatoren keine festen Zahlen mehr vorgegeben<br />

sind, sondern die variablen Parameter „m“ und „n“.<br />

3 <strong>HTML</strong>-Code erzeugen lassen<br />

In den vorigen Beispielen arbeitet der Browser die <strong>HTML</strong>-<br />

Datei Zeile für Zeile ab. Stößt er auf das eingebettete Java-<br />

Script-Programm, führt er es aus und macht dann mit dem reinen<br />

<strong>HTML</strong> weiter – das in diesem Beispiel keine darzustellenden<br />

Elemente enthält.<br />

Das nächste Beispiel führt dieselbe Berechnung durch, gibt<br />

das Ergebnis aber nicht in einer Box aus, sondern im Browser-<br />

Fenster selbst. Um die Wirkung besser zu veranschaulichen,<br />

steht vor und nach dem Skript eine Zeile <strong>HTML</strong>-Code.<br />

<br />

<br />

<strong>HTML</strong> vor dem Skript<br />

<br />

var nErgebnis;<br />

technisches Gestaltungselement<br />

für spezielle<br />

Usability-Anwendungen<br />

eingesetzt. Je eleganter<br />

die Anwendung, desto<br />

weniger wird sie vom<br />

User als solche wahrgenommen:<br />

Javascript<br />

lädt das passende<br />

Stylesheet für die<br />

jeweilige Browser-<br />

Version, wechselt<br />

bei MouseOver<br />

das Button-Layout<br />

oder positioniertSeitenelemente<br />

in Abhängigkeit zur Monitorauflösung.<br />

Auch der automatische Aufbau<br />

des Frameset bei Aufruf einer<br />

einzelnen Content-Seite, etwa über<br />

eine Suchmaschinen-Trefferliste –<br />

im Ergebnis für den User selbstverständlich<br />

– ist einem dezenten,<br />

aber zielführenden Einsatz von<br />

Javascript zu verdanken.<br />

k www.plan-net.de<br />

nErgebnis = 8*4;<br />

document.write("Javascript: 8 x 4 ergibt ";<br />

document.write(nErgebnis);<br />

<br />

<strong>HTML</strong> nach dem Skript<br />

<br />

<br />

Dieses Skript führt zur Darstellung des Berechnungsergebnisses<br />

zwischen den beiden Zeilen <strong>HTML</strong>. Dies wird durch<br />

die Funktion document.write() erreicht. Die gibt den übergebenen<br />

Text so aus, als wäre es ein Teil des <strong>HTML</strong>-Codes.<br />

Dabei ist der Begriff „Funktion“ nicht ganz korrekt. Tatsächlich<br />

handelt es sich um die „Methode“ des Objekts document. Das<br />

repräsentiert das dargestellte Browser-Dokument. Mit „write“<br />

wird diesem Objekt mitgeteilt, dass die übergebene Zeichenkette<br />

so ins Dokument eingebaut werden soll, als würde sie im<br />

<strong>HTML</strong>-Bereich stehen. Das Ergebnis im Browser zeigt also<br />

keinen Unterschied zwischen dem Ergebnis und den beiden im<br />

reinen <strong>HTML</strong> erzeugten Zeilen vor und nach dem Skript (mehr<br />

dazu im Kasten „Javascript und die Objekte“ auf s74).<br />

4 Fallunterscheidungen durchführen<br />

Jede Programmiersprache kennt Befehle, um den Programmablauf<br />

zu steuern, beispielsweise Schleifen und Verzweigungen,<br />

um Fallunterscheidungen durchzuführen. Das gilt auch für<br />

Javascript. Eine einfache Fallunterscheidung hat die Form<br />

if (Bedingung)<br />

{<br />

Code für den Fall, dass<br />

die Bedingung erfüllt ist<br />

}<br />

else<br />

{<br />

Code für den Fall, dass die<br />

Bedingung nicht zutrifft<br />

}<br />

Die geschweiften Klammern umschließen dabei jeweils den<br />

gesamten Code für die beiden Alternativen. Der „else“-Teil kann<br />

auch ganz entfallen.<br />

Auch das mehrmalige Durchlaufen eines Code-Teils, solange<br />

eine Bedingung zutrifft – also eine Schleife – kennt Javascript.<br />

So gibt das folgende Programm jede Zeile in einer der<br />

Schriftgrößen von 1 bis 7 aus.<br />

<br />

<br />

<br />

<br />

<br />

k<br />

CHIP | PROFESSIONELL<br />

73


74<br />

AKTUELL | PLANEN | AUFBAU k Javascript | SPECIAL | OPTIMIEREN |<br />

Die „for“-Schleife zählt eine Schleifen-Variable hoch. In<br />

diesem Fall wird die zu Beginn des Skripts definierte Variable „i“<br />

verwendet. Die drei Elemente in den runden Klammern nach<br />

dem „for“ enthalten einmal die initiale Zuweisung des Wertes an<br />

die Schleifen-Variable.<br />

Danach kommt die Bedingung. Solange sie erfüllt ist, wird<br />

die Schleife durchlaufen. Den Schluss übernimmt der Befehl<br />

zum Hochzählen der Variablen. Die Schleife wird also siebenmal<br />

durchlaufen, und „i“ erhält dabei nacheinander alle Wert<br />

von 1 bis 7.<br />

Der Schleifenrumpf gibt dann für alle Werte von „i“ eine<br />

Zeile aus, in der mit dem -Tag die entsprechende Schriftgröße<br />

gewählt wurde. Es gibt auch noch andere Schleifen-<br />

Typen, die nicht auf einem Zähler aufbauen, der schrittweise<br />

erhöht wird. Wichtig ist die „while“-Schleife, bei der eine beliebige<br />

Bedingung zu Beginn des Schleifen-Inhalts ausgewertet<br />

wird. Sie hat die Form<br />

while(Bedingung)<br />

{<br />

Programmcode<br />

}<br />

5 Für ältere Browser: Javascript verstecken<br />

Vielleicht haben Sie bemerkt, dass das letzte Beispiel auch noch<br />

die beiden Zeilen enthält. Auf diese Weise sollte<br />

man immer sein Javascript-Programm in <strong>HTML</strong> einbauen,<br />

KNOW-HOW<br />

Javascript und die Objekte<br />

Javascript ist eine objektorientierte<br />

Programmiersprache<br />

(OOP). Wer sich mit dieser Technik<br />

auskennt und große Projekte<br />

durchführt, kann dies zur besseren<br />

Programmierung nutzen.<br />

Aber auch die übrigen Web-<br />

Designer können sich der OOP<br />

nicht entziehen, weil wichtige<br />

Teile von Javascript darauf aufbauen.<br />

Einerseits sind das Bereiche,<br />

die sich nur in der Javascript-<br />

Umgebung selbst abspielen. So<br />

gibt es etwa keine „normale“<br />

Funktion zur Ermittlung der<br />

Länge einer Zeichenkette; stattdessen<br />

sind alle Zeichenketten<br />

Objekte, die die Eigenschaft<br />

length aufweisen. Man kann<br />

demnach jede Zeichenkette auf<br />

ihre Länge prüfen, indem man<br />

an ihren Namen ein „.length“<br />

anhängt. Haben Sie also eine Variable<br />

„myString“ ins Leben gerufen,<br />

wird der Rumpf folgenden<br />

„if“-Konstrukts durchlaufen,<br />

wenn die Variable nicht leer ist:<br />

CHIP | PROFESSIONELL<br />

if ( myString.length > 0)<br />

{….}<br />

Genauso wichtig ist aber das sogenannte<br />

DOM, das „Document<br />

Object Model“. Es ist eine Methode,<br />

um alle Elemente des<br />

Browser-Inhalts über eine hierarchische<br />

Struktur in OOP-<br />

Manier anzusprechen. Ganz<br />

oben in dieser Hierarchie ist<br />

Object document, das der gerade<br />

im Browser-Fenster dargestellten<br />

Seite entspricht. Hat<br />

man zum Beispiel ein „MyForm“<br />

genanntes Formular mit einem<br />

Feld „Name“, dann entspricht<br />

folgender Ausdruck dem Inhalt<br />

dieses Feldes:<br />

document.MyForm.Name.value<br />

Man muss nicht jedes Element<br />

benennen, um es ansprechen zu<br />

können. Um etwa mehrere Elemente<br />

zu durchlaufen, gibt es<br />

Mengen von Objekten. Alle Formularfelder<br />

des obigen Formulars<br />

bekommt man zum Beispiel<br />

im Array document.My<br />

Form.elements geliefert.<br />

denn ein älterer Browser, der Javascript nicht kennt, wird sonst<br />

den Programmcode anzeigen. Das kommt daher, dass dieser<br />

Browser das Tag nicht kennt und es somit einfach<br />

ignoriert. Das nachfolgende Programm wird von ihm dann<br />

so behandelt, als wäre es <strong>HTML</strong>. Darum folgt nach diesem Tag<br />

die Einleitung für einen <strong>HTML</strong>-Kommentar. Die unwissenden<br />

Browser zeigen das Skript dann aus diesem Grund nicht an. Das<br />

Ende des Kommentars, also die Zeichenfolge —> wird mit zwei<br />

Schrägstrichen begonnen; dies dient in Javascript als Zeichen<br />

für einen Zeilenkommentar. Somit wird der Javascript-Teil des<br />

Browsers die beiden Minuszeichen nicht als mathematisches<br />

Symbol interpretieren.<br />

6 Javascript an Ereignisse anbinden<br />

Bislang kennen Sie nur die Möglichkeit, durch die Plazierung<br />

im umgebenden <strong>HTML</strong> festzulegen, wann ein Javascript-Programm<br />

aktiv wird. Damit alleine wäre allerdings mit der ganzen<br />

Programmierbarkeit recht wenig anzufangen.<br />

Viel interessanter ist dagegen die Anknüpfung von Java-<br />

Script an die Ereignisse von Elementen einer <strong>HTML</strong>-Seite. Damit<br />

kann ein Programm flexibel auf eine Aktion des Benutzers<br />

oder ein anderes Ereignis reagieren.<br />

So kann man zum Beispiel einen Link mit einer Javascript-<br />

Funktion verknüpfen, so dass dieser Programmteil immer dann<br />

aufgerufen wird, wenn der Benutzer ihn anklickt. Das wäre eine<br />

Möglichkeit, um vor dem Verlassen einer Seite dem Besucher<br />

noch einen Abschiedsgruß mit auf den Weg zu geben:<br />

<br />

<br />

<br />

function goodbye(){<br />

alert('Auf Wiedersehen!');<br />

}<br />

<br />

Zu Google<br />

<br />

Entscheidend ist an dieser Stelle der Zusatz onClick=“…“<br />

des Tags . Es bewirkt, das bei dem Ereignis „Anklicken“<br />

des Links die Javascript-Funktion „goodbye()“ aufgerufen wird.<br />

Ein oft verwendeter Ausdruck für eine so angebundene Funktion<br />

ist übrigens der englische Begriff „event handler“. Er<br />

gründet sich darauf, dass die Funktion ein bestimmtes Ereignis<br />

„behandelt“.<br />

Hinter dem Schlüsselwort „onClick“ darf dabei nicht lediglich<br />

ein Funktionsname stehen, sondern ein – durchaus auch<br />

mehrzeiliges – Javascript-Programm. Damit kann man zwar<br />

Schindluder treiben und durch riesige Code-Schnipsel ein<br />

unlesbares Gemenge von <strong>HTML</strong> und Javascript erzeugen.<br />

Es ist aber auch eine Möglichkeit, kompakteren Programmcode<br />

zu erzeugen. Denn für Fälle einfacher Art muss man<br />

für die Ereignisbehandlung nicht unbedingt eine separate<br />

Funktion erzeugen, sondern schreibt deren Inhalt direkt in<br />

den „onClick“-Teil.<br />

Ein Beispiel für den Verzicht auf eine eigenständige Funktion<br />

wäre das Setzen der Statuszeile des Browsers beim<br />

Überfahren eines Links. Normalerweise zeigen die Browser


DER EXPERTEN-TIPP VON STEFAN MÜNZ<br />

Den Webserver entlasten mit Javascript<br />

Manche Anbieter von Websites<br />

setzen Server-seitige Skriptsprachen<br />

wie beispielsweise PHP nur<br />

deswegen ein, um wiederkehrende<br />

Seitenelemente in den <strong>HTML</strong>-<br />

Code einzubinden oder seitenspezifische<br />

Daten wie die URL-<br />

Adresse der Seite automatisiert<br />

in den <strong>HTML</strong>-Code einzufügen. Die<br />

negative Folge: Der Webserver<br />

wird unnötig stark belastet.<br />

Doch das ist gar nicht nötig,<br />

denn viele dieser kleinen EinfügeundAutomatisierungsoperationen<br />

lassen sich auch mit Hilfe<br />

von Javascript erledigen. Somit<br />

übernimmt der Browser des Anwenders<br />

diesen Job – und der<br />

Webserver hat mehr Ressourcen<br />

für andere Aufgaben.<br />

Die aktuelle URL schreiben<br />

lässt sich beispielsweise mit<br />

diesem Code-Fragment: docu<br />

ment.writeln(„URL<br />

dieser Seite: “+document.URL<br />

+““);. Und<br />

wer sich den Aufwand sparen<br />

möchte, jedes Jahr seine Copyright-Angabe<br />

an jedem Seitenfuß<br />

zu aktualisieren, notiert dort<br />

einfach now = new Date();<br />

year = now.getFullYear();<br />

document.writeln(„&copy;<br />

„+year+“ by myself“);<br />

.<br />

Das dynamische Einbinden externer<br />

Daten funktioniert ganz<br />

an dieser Stelle die entsprechende URL an. Statt dessen soll<br />

eine kleine Erklärung verraten, was den Benutzer hinter dem<br />

Link erwartet. Die Manipulation der Statuszeile wird über<br />

das Objekt „window.status“ erreicht. Man kann ihm eine<br />

Zeichenkette zuweisen, die dann in der Statuszeile des Browsers<br />

dargestellt wird.<br />

Ausgelöst wird die Darstellung der Link-abhängigen Statuszeile<br />

über das Ereignis MouseOver. Dieses Ereignis tritt auf,<br />

wenn der Mauscursor ein <strong>HTML</strong>-Objekt überfährt, im Beispiel<br />

den Link. Das zugehörige Schlüsselwort heißt also<br />

onMouseOver:<br />

<br />

Home<br />

<br />

Suche<br />

<br />

Beachten Sie an dieser Stelle die Verwendung der einfachen<br />

und der doppelten Anführungsstriche. Die doppelten dienen<br />

innerhalb des <strong>HTML</strong>-Teils zum Separieren der Javascript-Kommandos.<br />

Die einfachen dagegen sind schon Teil des Skripts und<br />

enthalten die darzustellende Zeichenkette.<br />

Die zweite „Zeile“ Code im Event-Handler, also das „return<br />

true“ nach dem Semikolon, ist notwendig. Ansonsten würde<br />

die Änderung der Statuszeile erst dann sichtbar sein, wenn sich<br />

die Maus wieder vom Link entfernt.<br />

Aber auch so entspricht das Ergebnis noch nicht dem gewünschten<br />

Effekt. Denn die letzte Meldung in der Statuszeile<br />

bleibt nach dem Verlassen des Links mit dem Cursor noch<br />

stehen. Javascript muss also noch die Statuszeile löschen, sobald<br />

sich der Mauszeiger vom Link entfernt.<br />

Genau diesen Fall behandelt das Schlüsselwort onMouseOut.<br />

Würde man das nun auch noch in die beiden Tags vom<br />

Typ hineinzwängen, wäre der Code endgültig<br />

unlesbar. Darum ist es besser, Sie schreiben eine Funktion,<br />

„meldung()“, die als Parameter den gewünschten Inhalt der<br />

Statuszeile erhält:<br />

<br />

<br />

<br />

<br />

k<br />

CHIP | PROFESSIONELL<br />

75


76<br />

AKTUELL | PLANEN | AUFBAU k Javascript | SPECIAL | OPTIMIEREN |<br />

Home<br />

Suche<br />

<br />

7 Texteingaben überwachen<br />

In vielen Eingabefeldern von Webseiten ist die Länge technisch<br />

begrenzt, beispielsweise beim Web-Versand einer SMS, die<br />

maximal 160 Zeichen lang sein darf. Da ist es für den Anwender<br />

informativ, wenn er laufend darüber informiert wird, wie viele<br />

Zeichen er noch zur Verfügung hat.<br />

Ein passendes Event dazu ist „KeyUp“, das immer dann<br />

ausgelöst wird, wenn der Benutzer eine Taste gedrückt hat. Das<br />

Listing könnte zum Beispiel so aussehen:<br />

<br />

<br />

function uebrig {<br />

document.MyForm.NochUebrig.value<br />

10-document.MyForm.Eingabe.value.length;<br />

}<br />

<br />

<br />

Eingabefeld (10 Zeichen)<br />

<br />

<br />

Es sind noch<br />

<br />

Zeichen verfügbar<br />

<br />

<br />

Das Feld „Eingabe“ definiert einen Event-Handler für das<br />

Tasten-Ereignis. Immer dann, wenn der Benutzer in diesem<br />

Feld eine Taste gedrückt hat, wird die Funktion „uebrig()“ aufgerufen.<br />

Die ermittelt über den Ausdruck „document.MyForm<br />

.Eingabe.value.length“ die Länge des Wertes im Feld „Eingabe“<br />

und schreibt die Differenz zur Maximallänge von zehn Zeichen<br />

ins Feld „NochUebrig“. Markus Schraudolph<br />

onAbort Image, body Das Ladens eines Bildes wird mit der Taste [Esc] abgebrochen<br />

onBlur Eingabefelder Der Cursor verlässt ein Eingabefeld (etwa mit der [Tab]-Taste oder per<br />

Mausklick auf ein anderes Feld)<br />

onChange Eingabefelder Der Benutzer hat einen Feldinhalt verändert und verlässt<br />

das Feld wieder<br />

onClick Alle Elemente Element wird angeklickt<br />

onDblClick Alle Elemente Doppelklick auf ein Element<br />

onError Image Fehler beim Laden eines Bildes<br />

onFocus Eingabefelder Cursor wechselt von einem anderen Eingabefeld auf das aktuelle (das<br />

gegensätzliche Ereignis zu onBlur)<br />

onKeyDown Das aktuelle Eingabefeld oder ein beliebiges Der Anwender drückt eine beliebige Taste (Änderung im Eingabefeld<br />

<strong>HTML</strong>-Element, auf dem der Cursor steht ist noch nicht erfolgt)<br />

onKeyUp Das aktuelle Eingabefeld oder ein beliebiges Der Anwender drückt eine beliebige Taste (Änderung im Eingabefeld<br />

<strong>HTML</strong>-Element, auf dem der Cursor steht ist bereits erfolgt)<br />

onLoad image, body Element wird geladen<br />

onMouseOut Alle Elemente Mauscursor verlässt das Element<br />

onMouseOver Alle Elemente Mauscursor fährt über das Element<br />

onReset Form Benutzer setzt alle Feldwerte auf den Ursprungszustand zurück<br />

(über einen Button wie )<br />

onSelect text, textarea Benutzer selektiert Text im Eingabefeld<br />

onSubmit Form Formular wird abgeschickt<br />

onUnload body Benutzer verlässt die aktuelle Seite


Javascript in der Praxis<br />

Attraktiv und intelligent<br />

Noch mehr Javascript-Praxis erwartet Sie in diesem Beitrag, denn sowohl die optische Wirkung als auch die<br />

Funktionalität Ihres Internet-Auftritts können Sie mit Javascript erheblich verbessern. CHIP zeigt Ihnen,<br />

wie Sie ganz einfach lebendige Button-Effekte erzeugen und Formulare gegen Fehleingaben absichern.<br />

k<br />

Im Artikel „Leben für die Webseite“ ab s72 haben<br />

Sie eine Einführung in die Sprache Javascript und ihre<br />

Verzahnung mit <strong>HTML</strong> bekommen. In diesem Beitrag lernen<br />

Sie zwei wichtige Techniken kennen, die jeder Webseiten-Konstrukteur<br />

beherrschen sollte.<br />

1 Buttons animieren<br />

Ein einfacher und doch wirkungsvoller Effekt ist die Animation<br />

von Buttons. Dabei wird die Grafik, die den Schaltknopf darstellt,<br />

ausgetauscht. Dieser Wechsel findet statt, sobald der<br />

Besucher mit dem Mauscursor über die Grafik fährt oder sie<br />

anklickt. Mit diesem einfachen Prinzip kann man – je nach den<br />

verwendeten Grafiken – eine Vielzahl von Effekten erzielen und<br />

die Aufmerksamkeit des Anwenders auf sich ziehen.<br />

Am einfachsten ist eine reine farbliche Hervorhebung von<br />

anderen Knöpfen einer Button-Leiste. Sobald man mit der<br />

Maus über einen