HTML - Saxonia Freiberg
HTML - Saxonia Freiberg
HTML - Saxonia Freiberg
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überschrift<br />
ü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 über vier Zeilen<br />
erstreckt<br />
[..]<br />
Eine Zelle,<br />
die sich ü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 „ö“.<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: „. < 20“. Statt des „<“<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(„©<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