AUF CD - leetupload.com

Transcription

HOMEPAGE
Neu: Hosting-Tarife, Gratis-Webspace
Allesr, Ihre
fü
was Sie brauchen
ge
Homepa
eft
H
m
e
s
e
i
nd
Auf CD i
-Tools € 9,95
p
o
T
0
5
PLUS:
eiten für
piel-S
mit Beis mepage
Ihre Ho
Ein Sonderheft von CHIP
Ausgabe 10/06
Österreich, Niederlande,
Belgien, Luxemburg: € 11,50
Schweiz: sfr 19,50
S
Geld pecial
mit d verdien
en
e
Partn
erpro r We
b
gram
s
Tools me, Webshite
auf C
D!
op ...
Web-Auftritt richtig planen
Dos & Don'ts: Die besten Usability-Tipps
So wird Ihre Homepage barrierefrei
HTML & CSS gekonnt einsetzen
Navigation & Druckversion mit CSS anlegen
Gratis: Fertige CSS-Layouts einbinden
Blogs & Podcasts wie die Profis
➤
WebSite X1
Homepage ohne HTML-Kenntnisse anlegen
➤
Photo Commander 4
Foto-/Video-Viewer mit Bildbearbeitung
➤
Smartstore.biz 5 StartUp
Den eigenen Webshop aufbauen
Die CHIP Webtool-Edition
für HTML, CSS, PHP, CMS, FTP,
Browser und Bildbearbeitung
Gratis-Tools für die Homepage-Gestaltung
➤ Quellcode für Webseiten aus den Artikeln im Heft
➤ Beispiel-Homepage zum Nachbauen
➤
4 196627 809952
3 VOLLVERSIONEN
10
AUF CD
Blogging-Tool WordPress perfekt nutzen
Podcasts herstellen, Content verwalten
„Deutschland privat“ reloaded
es ist schon so lange her: Man schrieb das Jahr 1980 – vom Internet redete
damals kein Mensch, noch nicht einmal der PC war erfunden –, da drehte der
Regisseur Robert van Ackeren („Die flambierte Frau“) einen Film, der einigen
Wirbel verursachte, aber auch für volle Kinosäle sorgte: „Deutschland privat“
war eine bunte Sammlung selbst gedrehter Urlaubs-, Familien- und Erotikfilme – von den Amateur-Regisseuren selbst kommentiert. Kommt uns das
irgendwie bekannt vor?
Andreas Vogelsang
Redaktionsleiter
CHIP-Sonderhefte
Die Idee des Web 2.0 ist gar nicht so neu. Ob „Deutschland privat“ oder
jahrzehntealte Videoclips in TV-Sendungen wie „Pleiten, Pech & Pannen“ oder
„Upps! Die Pannen-Show“ – der Wunsch, private Erlebnisse mit anderen zu
teilen, war immer schon da. Der Unterschied zu früher: Mit dem Internet gibt
es jetzt das richtige Medium dafür, wie der gigantische Erfolg von Web-Communities wie YouTube, Flickr & Co. und die vielen Millionen privater Homepages, Blogs oder Podcasts zeigen.
Die Basis Ihres Web-Auftritts. Dieses Heft und die zugehörige Heft-CD liefern Ihnen das Handwerkszeug, um in die globale Community einzutauchen.
Die solide Grundlage Ihrer Homepage zimmern Sie mit HTML und Cascading Style Sheets (CSS). Wenn Sie unsere Usability-Tipps beachten, wird sich
der Kreis Ihrer Besucher rasch vergrößern. Mit einem interessanten WebTagebuch – vielleicht in Verbindung mit einem regelmäßigen Podcast – werden Sie über kurz oder lang Teil der weltumspannenden Blogosphäre. Und
mithilfe seriöser Partnerprogramme oder gar mit einem eigenen Webshop
können Sie vom boomenden Onlinehandel profitieren.
Auf der sicheren Seite bleiben. Trotz aller Euphorie – bevor Sie mit Ihrem
Web-Auftritt Ernst machen, sollten Sie unbedingt unsere „10 goldenen RechtsTipps für Webmaster“ auf s48 lesen und beherzigen. Denn so privat kann
das Web gar nicht werden, dass nicht gewerbsmäßige Abmahner auf formale
Fehler von Homepage-Betreibern oder Shop-Anbietern lauern würden.
Viel Spaß beim Lesen und beim Basteln an Ihrer Seite!
[email protected]
| CHIP | SOFTWARE | WEBDESIGN |
3
6 Auf zu neuen Ufern
Aktuell
6
Web 2.0 – Marketing-Hype oder neue Marke?
CHIP sagt, was Ihnen Web 2.0 wirklich bringt.
Technologien, Trends, Strukturen: Wie
Web 2.0 das Internet verändert, was
daran wirklich neu ist und was
Sie davon haben.
10 AJAX baut das Web 2.0
So funktioniert die Basistechnologie des Web 2.0.
14 Die aktuellen Hosting-Tarife
Der beste Hosting-Tarif für Ihre Homepage.
16 Die besten Anbieter von Gratis-Webspace
Wo Sie keinen Cent fürs Hosting bezahlen müssen.
.
Auf Heft-CD
3 Vollversionen
20
WebSite X1, Ashampoo Photo
Commander 4, Smartstore.biz
5 StartUp Seite
Die 50 Top-Tools
23
Geniale Freeware-Programme
für Webdesigner (HTML, PHP,
CMS, FTP, Bildbearbeitung)
Webseiten zum Nachbauen
Homepage
26 Websites richtig planen und aufbauen
Warum Sie schon bei der Planung Ihrer Homepage
Abschied vom Papierdenken nehmen sollten.
28 So wird Ihre Homepage bedienerfreundlich
Die besten Usability-Regeln, die schlimmsten Pannen
32 Flexible Seiten mit Cascading Style Sheets
So geht’s: Eine komplette Seite mit CSS gestalten
38 Vorgefertigte CSS-Layouts nutzen
Wie Sie fertige Stylesheets in Ihre Homepage einbauen.
40 Cascading Style Sheets organisieren
So bleiben auch längere Stylesheets übersichtlich.
42 Barrierefreie Seiten bauen
Wie Sie herausfinden, ob wirklich jeder Surfer Ihre
Homepage uneingeschränkt nutzen kann.
48 Recht: Zehn Regeln gegen Abmahnungen
Was Homepage- und Shopbetreiber wissen müssen.
50 Webvideos in die Homepage einbinden
So nutzen Sie YouTube & Co. für Ihren Webauftritt.
54 Digitalfotos online stellen
Wie Sie den Bilderdienst Flickr voll ausreizen.
60 Filme im Web bearbeiten
So schneiden Sie Ihre Videos online – mit Eyespot.
64 Homepage-Baukästen im Überblick
Die Baukasten-Systeme der großen Webhoster
4 | CHIP | SOFTWARE | WEBDESIGN |
26 Planen & aufbauen
Der Aufbau einer Homepage verlangt eine
völlig andere Strategie als das Verfassen
eines Textes: Warum sich Webdesigner vom
Papierdenken verabschieden müssen.
50 Blogs, Podcasts & Co.
Blogs und Podcasts sind zentrale Elemente
des Web 2.0. So funktioniert dynamisches Web-Publishing.
Blogs & Co.
70 So funktionieren Blogs
Ein Blog ist ein CMS mit speziellen Features – CHIP
sagt Ihnen, wie ein Web-Tagebuch zustande kommt.
72 Blog anlegen in fünf Minuten
Um den Blogservice Blogger.com zu nutzen,
brauchen Sie nicht einmal eigenen Webspace.
76 Der eigene Blog mit WordPress
WordPress ist das Blog-Tool Nummer eins. So setzen
Sie mit WordPress einen Blog auf Ihrer Website auf.
80 Die besten Themes & Plugins für WordPress
WordPress lässt sich mit Gratis-Vorlagen problemlos
erweitern und an Ihre Vorlieben anpassen.
84 WordPress programmieren
Mit etwas Erfahrung in PHP und CSS können Sie
Ihren Blog noch individueller gestalten.
88 Podcast – der Soundblog
Wie Sie Podcasts finden, anhören, selber machen
und sogar Geld damit verdienen.
92 Podcast aufnehmen mit Audacity
So richten Sie Audacity ein, nehmen den Podcast
auf, schneiden ihn und exportieren ihn als MP3.
94 Podcast veröffentlichen mit Loudblog
Mit dem kostenlosen Blogsystem stellen Sie Ihren
Podcast völlig unkompliziert ins Internet.
96 Podcast im eigenen Blog publizieren
PodPress ist das ideale Tool, um einen Podcast in
Ihren WordPress-Blog einzubauen.
98 Inhalte verwalten mit Joomla
Wenn WordPress bei der Content-Verwaltung an
seine Grenzen stößt, ist es Zeit für ein CMS wie Joomla.
Special
102 Nur bekannte Websites verdienen Geld
CHIP zeigt Ihnen, wie Sie den Page-Rank Ihrer Seite
verbessern – damit Sie bei Google ganz vorn landen.
106 Partnerprogramme nutzen
Von den Großen lernen – so vermarkten Sie Ihren
Webauftritt möglichst profitabel.
110 Webshop aufbauen mit osCommerce
So installieren Sie die kostenlose Shop-Software
osCommerce und richten Ihren Onlineladen ein.
Rubriken
102 Geld verdienen im Web
Partnerprogramme – oder gleich der eigene
E-Shop? CHIP verrät die besten Strategien
für das Zusatzeinkommen mit der Website.
18
49
114
114
Inhalt der Heft-CD
Leserumfrage, Gewinnspiel
Vorschau: Das nächste CHIP-Sonderheft
Impressum: Das CHIP-Team und der Verlag
5
WAS HINTER WEB 2.0 WIRKLICH STECKT
Aufbruch zu neuen
T
im Berners-Lee, der Begründer
des WWW, bezeichnet den Begriff
„Web 2.0“ in einem IBM-Developer-Works-Podcast als „Jargon, von dem
keiner auch nur weiß, was er bedeuten
AUF EINEN
EINENBLICK
BLICK
, Was Web 2.0 bedeutet
Die wichtigsten Begriffe
s8
Die besten Links zum Thema
Web 2.0
s9
soll“, andere Kritiker sehen im Gebrauch
des Begriffs einen Etikettenschwindel, mit
dem altbekannte Techniken als der letzte
Schrei oder als Speerspitze des technologischen Fortschritts verkauft werden.
Dem O’Reilly Verlag und MediaLive
(heute CMP United Business Media), Firmen, die diesen Begriff 2004 prägten, erscheint er allerdings noch in diesem Jahr
so wichtig, dass sie ihn als Bezeichnung für
Konferenzen gerichtlich schützen lassen.
Auch wenn das Anliegen, eine etablier-
te und erfolgreiche Marke zu schützen,
gängigen Geschäftsgepflogenheiten entspricht, war diese Aktion keine gute Idee.
Der dialektische Sprung, in Konferenzen
den freien Austausch von Gedanken und
Daten zu feiern und dann wie kleinkarierte Spießer auf der Verwendung eines
Begriffs zu bestehen, war der Webcommunity nur schwer zu vermitteln.
Das amerikanische Marktforschungsunternehmen Gartner sieht immerhin in
den Techniken, die mit dem Begriff Web
Foto: K. Weichbrodt; Composing: V. Hildebrand
Marketing-Hype oder neue Marke? Web 2.0 steht weniger für neue Technologien als für bestimmte
Trends und Strukturänderungen im Internet. CHIP verrät, was Ihnen Web 2.0 wirklich bringt.
Auf http://blog.webmaster-homepage.
de/item/1396 lässt sich ein Web-2.0-Logo
auf Wunsch auch mit dem Kennzeichen
als Beta-Version generieren. Inspiriert
wurde diese Idee durch das Logo eines
Portals, das Web-2.0-Anwendungen auflistet, Bewertungen dieser Anwendungen
bietet und Linkverwaltungs- und Bookmark-Services zu diesen Informationen
bereitstellt.
Die Entscheidung, mit „Web 2.0“ das
World Wide Web mit einer Versionsnummer zu versehen und es damit implizit als Software, als eine Ansammlung
von Technologien, zu betrachten, bietet
die Möglichkeit, auch sehr unterschiedliche Entwicklungen mit diesem Begriff
zu fassen. Die Einführung einer höheren
Versionsnummer suggeriert eine Erweiterung und Verbesserung der bisherigen
Technologien. Inhaltlich hat man sich
damit kaum festgelegt, denn in einem
komplexen Gebilde wie einer Software
sind Verbesserungen in sehr unterschiedlichen Bereichen möglich: Das können
beispielsweise eine Erweiterung der Online-Hilfe, eine verbesserte Benutzerführung, schnellere Datenbankzugriffe oder
auch neue Schnittstellen für den Datenaustausch sein.
Auf welchen Technologien
Web 2.0 basiert
Ufern
2.0 beschrieben werden, nicht weniger als
die Triebfedern der IT-Branche für die
nächsten Jahre. Den größten Einfluss für
die kommenden zwei Jahre spricht das
Unternehmen Techniken wie AJAX (mehr
zu AJAX lesen Sie ab s10) und sogenannten Mashup-Angeboten zu. Mashups sind
Dienste, die verschiedene externe OnlineAnwendungen verbinden und deren Inhalte, etwa Geodaten, Bilder, Musik oder
Text, zu einer neuen Einheit mixen.
Mit einem Dienst zum Gestalten individueller Web-2.0-Logos karikiert eine
Webseite eine charakteristische Eigenschaft von Web-2.0-Applikationen: den
dauerhaften Zustand als Beta-Version.
Die wichtigsten Technologien für das
World Wide Web sind das Hypertext
Transfer Protocol (HTTP) und die Hypertext Markup Language (HTML) als
Auszeichnungssprache der Daten. Zu diesen Technologien kamen später die Cascading Style Sheets (CSS, mehr dazu lesen
Sie ab s32) und JavaScript hinzu.
Die CSS gestatteten eine präzisere
Formatierung der Seiten und eine weitergehende Trennung von grafischer
Darstellung und Text, als dies mit HTML
möglich war. Mit JavaScript ließen sich
die Seiten serverunabhängig verändern,
also den Bedürfnissen des Users ohne
langwierigen Neuaufbau der Seiten anpassen. Zur ersten Version des WWW
zählen auch die Skriptsprachen wie ASP,
Perl oder PHP sowie die Verwendung von
Datenbanken, mit deren Hilfe sich auch
sehr umfangreiche Internetauftritte mit
relativ wenig Arbeitsaufwand aufbauen
und pflegen lassen.
Mit irgendwelchen neuen Technologien lässt sich die Bezeichnung „Web 2.0“
nicht rechtfertigen. Auch die bunte Welt
der Web-2.0-Services nutzt zu 80 Prozent
die eben genannten Technologien. Der
verstärkte Einsatz von XML-Formaten
für den Datenaustausch per RSS-Feeds, in
Blogs und Webservices ist zwar ebenso
neu wie die clientseitige Interaktion mit
AJAX-Anwendungen. Doch die dazu
verwendeten Technologien – die XMLFormate, JavaScript sowie der Einsatz
von Datenbanken und Skriptsprachen für
den Aufbau von Webseiten – sind schon
lange bekannt.
Was an Web-2.0-Anwendungen
wirklich neu ist
Versucht man eine abstrakte Beschreibung von Web-2.0-Applikationen, sind
derartige Anwendungen als Webseite nur
unzureichend erfasst, die Begriffe „Service“ oder „Dienst“ passen besser. Nicht
das Statische eines grafisch aufbereiteten Datenangebots, sondern die Dynamik
der Dienstleistung, die meist in heftiger
Interaktion mit dem Benutzer erbracht
wird, steht im Vordergrund. Die grafische
Gestaltung der Seiten hat sich dieser
Funktion beziehungsweise der optimierten Benutzerführung unterzuordnen. Wie
viel Ballast man in dieser Hinsicht abwerfen kann, zeigen seit Jahren die spartanischen Seiten der Google-Services.
Die Bedeutung des Erhebens und Vermittelns von Informationen ist deutlich
gewachsen, dies gilt auch für den Benutzer, insbesondere den sich aktiv beteiligenden User. Dafür sind die technischen
Voraussetzungen zu schaffen, die sich in
einer intuitiveren Benutzerführung, im
Abbau von rechtlichen, administrativen k
Flickr: Diese Site ist viel mehr als ein OnlineFotoalbum – eine interaktive Foto-Community.
7
und technischen Hindernissen für die
Nutzung der Dienste, aber auch an den
neuen Partizipationsmöglichkeiten des
Users zeigen.
Die Freischaltung – soweit das überhaupt erforderlich ist – für Blogs oder
Wikis dauert im Normalfall nur so lange
wie das Ausfüllen eines Anmeldeformulars und das Versenden der BestätigungsMail. Von der Community gepflegte
und heftig diskutierte Tipps und Tricks
zu den Anwendungen sowie das BugReporting sind für diese Art von Programmen unverzichtbar.
Der Austausch von Daten ist ausdrücklich gewünscht – und um ihn auch
in Zukunft zu sichern, werden dafür, soweit möglich, nicht die De-facto-Stan-
Myspace: Diese Web-Community ist als
Werbeplattform heiß begehrt.
dards großer Softwarefirmen, sondern
offene Standards verwendet. Die Hürden
für den Datenaustausch sollen auch in
technischer Hinsicht möglichst niedrig
LEXIKON
Die wichtigsten Begriffe des Web 2.0
AJAX (Asynchronous JavaScript and XML)
bezeichnet ein Konzept der asynchronen
Datenübertragung zwischen dem Server und
dem Browser. Damit lassen sich innerhalb
einer HTML-Seite HTTP-Anfragen starten,
ohne dass man die Seite komplett neu laden
muss. So ist es möglich, nur bestimmte Teile
einer HTML-Seite oder auch reine Nutzdaten
bei Bedarf nachzuladen. Laut dem amerikanischen Marktforschungsinstitut Gartner ist
AJAX eine der Killer-Applikationen des Web
2.0 (mehr zu AJAX lesen Sie ab s10).
Blog siehe Weblog
CSS (Cascading Style Sheets) ist eine deklarative Stylesheet-Sprache für strukturierte Dokumente. Sie wird vor allem zusammen
mit HTML und XML eingesetzt. CSS legt die
Darstellung eines ausgezeichneten Inhalts
fest. Einer der größten Vorteile beim Einsatz
von CSS ist eine Trennung von Formatierung
und Inhalt, die weiter geht, als dies mit
reinem HTML möglich ist (mehr ab s32).
HTML (Hypertext Markup Language) ist eine textbasierte Auszeichnungssprache zur
Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks. Ein Webbrowser dient
der Darstellung von HTML-Dokumenten. Die
Auszeichnungssprache wurde vom World
Wide Web Consortium (W3C) bis Version 4.01
weiterentwickelt und soll nun durch XHTML
ersetzt werden. HTML-Dokumente sind die
Grundlage des World Wide Web.
HTTP (Hypertext Transfer Protocol) ist ein
Protokoll zur Übertragung von Daten über
ein Netzwerk. Es wird hauptsächlich eingesetzt, um Webseiten und andere Daten aus
dem World Wide Web in einen Webbrowser
zu laden.
JavaScript ist eine Programmiersprache mit
Anweisungen für den Browser. Mit JavaScript
ist eine Änderung der HTML-Seite ohne Beteiligung des Webservers möglich.
Mashups sind Dienste, die verschiedene
Online-Anwendungen verbinden und deren
Inhalte wie Geodaten, Bilder, Musik oder
Text auf neue Weise verknüpfen.
Open-Source-Software bedeutet freie Verfügbarkeit des Quellcodes, die über die jeweilige Lizenz geregelt wird. Der Begriff wird
aber auch im Sinne von kostenloser Software verwendet.
Permalinks (Kombination aus den englischen Wörtern „permanent“ und „link“) sollen in Medien, die der ständigen Überarbeitung unterworfen sind, über Links eindeutig
referenzierbare Inhalte gewährleisten.
Web siehe WWW
Weblog (Kombination der englischen Wörter
„Web“ und „Log“, oft einfach „Blog“ genannt) ist eine Webseite, die periodisch neue
Einträge enthält, die chronologisch absteigend sortiert sind. Ein Blog beginnt also immer mit dem neuesten Eintrag.
WWW (World Wide Web, umgangssprachlich auch Web) entstand 1989 als Projekt
am CERN in Genf (Schweiz), an dem Tim
Berners-Lee ein Hypertext-System aufbaute, das dem leichten Austausch von Daten
dienen sollte. Charakteristische Technologien des World Wide Web sind:
– HTTP als Protokoll, mit dem der Browser Informationen vom Webserver anfordern kann,
– HTML als Dokumentbeschreibungssprache, die festlegt, wie die Information gegliedert ist und wie die Dokumente verknüpft
sind (Hyperlinks).
bleiben. Die Affinität zu Open-SourceSoftware im Sinne von frei verfügbarer,
kostenloser Software ist die logische Konsequenz. Die bedeutsame Rolle, die der
Datenaustausch spielt, hat den positiven
Nebeneffekt, dass diese Services nicht nur
vom Browser, sondern auch von anderen
Geräten wie PDAs und Handys sowie von
den Lesegeräten für Blinde relativ problemlos darstellbar sind (mehr zum Thema Barrierefreiheit lesen Sie ab s42).
Mit den in die eigene Webseite integrierbaren Webservices werden nicht nur
Daten, sondern via Software aufbereitete
Daten angeboten. Die Programmfunktionalität wird also selbst zum Dienst. Auf
diese Weise lassen sich komplexe, aufwändig programmierte Services auf einer
Webseite kombinieren; da die Schnittstellen offengelegt sind, bietet sich auch
die Möglichkeit, mit diesen Programmen
eigene Anwendungen zu gestalten. Paul
Rademachers Webseite www.housingmaps.com, die Google Maps mit dem Immobilienmarkt von Craigslist verbindet,
ist eines der prominentesten Beispiele für
ein solches Mashup.
Viele Strukturen von Web-2.0-Anwendungen lassen sich mit der Umkehrung
des Prinzips „Wer zahlt, schafft an“ erklären. Kostenpflichtige Serviceleistungen
werden weitestgehend durch die vernetzte
Kommunikation ersetzt. Nicht Ranks and
Titles von Personen und Firmen ist der
Garant des Expertenwissens, es konstituiert sich selbst durch die vernetzte
Kommunikation. Je nützlicher ein Tipp
ist, desto häufiger wird er in den Medien
der Nutzer zitiert – und Google honoriert
dies mit einem besseren Ranking auf den
Ergebnisseiten der Suchmaschine (mehr
dazu lesen Sie ab s102). Die vernetzte
Kommunikation entspricht der Unüberschaubarkeit des WWW, dessen Komplexität allenfalls mit Suchmaschinen, nicht
mehr mit Katalogen zu bewältigen ist.
Das World Wide Web wird als Chance
und Bereicherung erkannt, für die viele
bereit sind, sich im Verbund zu engagieren – im Entwickeln von Open-SourceProgrammen und -Services, dem Verfassen von Tipps und Tricks oder von enzyklopädischen Artikeln. Projekte wie Apache (Webserver), Firefox (Browser) und
die von einer Vielzahl von Redakteuren
zusammengetragene Wikipedia zeigen,
welches Niveau damit möglich ist.
Wikipedia: Das Referenzprojekt des
Web 2.0 ist ein frei
zugängliches, von
Tausenden von Redakteuren kostenlos
zusammengestelltes
Onlinelexikon.
Die Dynamik der Entwicklung ergibt
sich aus der weitgehend hierarchiefreien
Kooperation und aus der ständigen Optimierung der Projekte. Der Dauerzustand
als Beta-Version ist die vorherrschende
Tendenz von Web-2.0-Anwendungen.
Gerade die Bemühungen um zitierfähige
Artikel in der Wikipedia, welche die Bearbeiter eben nicht auf eine überschaubare
Anzahl von Experten reduzieren, oder die
Einführung von Permalinks, um in dynamischen Medien wie Weblogs eindeutig
referenzierbare Inhalte zu garantieren,
demonstrieren, wie sehr diese Anwendungen und Services vom Bemühen um
ständige Optimierung geprägt sind.
Neu im Web ist also weniger die Verwendung bestimmter Technologien als
vielmehr eine Änderung der Kommunikationsstruktur. Die Zielrichtung ist eine
weitgehend hierarchiefreie, vernetzte
Kommunikation durch Beseitigen von
technischen, administrativen, rechtlichen
und finanziellen Barrieren. Die Ebenen
hierarchischer Ordnungen werden durch
weitgehend egalitäre Netzstrukturen ersetzt – und zwar in mehrfacher Hinsicht.
Neben der gewachsenen Bedeutung der
Benutzer zeigt sich dies in der Entwick-
lung neuartiger Softwarelizenzen, aber
auch in der Art der Softwarekonzepte.
Open-Source-Software wird in Communitys entwickelt, aber auch die Programme
selbst sind auf Kompatibilität und Fremdnutzung ausgelegt. Genau dies ist die
qualitative Veränderung, die eine Vergabe
einer höheren Versionsnummer rechtfertigt, auch wenn das World Wide Web keine Software ist.
Warum aus Web 2.0 bald
Web 3.0 werden könnte
Die weitgehende Beseitigung von Kommunikationshürden, die Partizipationsmöglichkeiten der breiten Masse („the
long tail“) und der Enthusiasmus, mit
dem die Leistungen oft erbracht werden
– all das macht den Charme dieser Entwicklung aus. Sie entspricht genau der
Struktur des WWW, das eben auch nicht
hierarchisch organisiert ist.
Derzeit erscheint der Kampf gegen die
Monopole einzelner Firmen und für den
freien Zugang zu ökonomisch und gesellschaftlich relevanten Informationen und
Diensten noch als das Gebot der Stunde.
Doch im Rücken der basisdemokratischen
YouTube: Die weltgrößte Plattform zum
Austausch, zur Präsentation und zur Diskussion von Videos hat
Google gerade für
mehr als 1,6 Milliarden
Dollar gekauft.
WEBTIPPS
Die besten Links
Zum Begriff „Web 2.0“
Prägung des Begriffs „Web 2.0“ mit ausführlicher Erläuterung
www.oreillynet.com/pub/a/oreilly/tim/
news/2005/09/30/what-is-web-20.html
Die deutsche Übersetzung gibt es unter:
http://twozero.uni-koeln.de/content/e14/
index_ger.html
Zukunftschancen des Web 2.0 laut Marktforschungsunternehmen Gartner
www.heise.de/newsticker/meldung/
76648,
www.gartner.com/it/page.jsp? id=495475
Web-2.0-Logo-Generator (mit eingebautem Beta-Versionsverweis)
http://blog.webmaster-homepage.de/
item/1396
Liste mit Web-2.0-Anwendungen
www.web2list.com/
Liste der Logos von Web-2.0-Anwendungen
http://web2logo.com/
Markenstreit um die Verwendung
der Bezeichnung „Web-2.0-Konferenz“
Faksimile der Abmahnung von CMP United Business Media
www.flickr.com/photo_zoom.gne?id=
153074441&size=l
Kommentare zum Markenstreit
www.spiegel.de/netzwelt/politik/
0,1518,418630,00.html
http://web-zweinull.de/index.php/
archives/markenstreit-um-web20/2006/05/27
www.heise.de/newsticker/meldung/
73703
Kämpfer formieren sich bereits andere
Gegner – weit gefährlichere, denn diese
Firmen haben es gelernt, die Community
des Webs mit kostenlosen und attraktiven
Angeboten für ihre Interessen einzuspannen. Der Wettbewerbsvorteil, den etwa
Amazon durch sein Empfehlungs- und
Bewertungssystem gegenüber seinen Konkurrenten erreicht, ist relativ harmlos,
verglichen mit der Macht, die etwa Google
mit den Auswertungsmöglichkeiten der
Daten erhält, die dieser Firma über Gratisservices wie Google Gmail oder Google
Desktop zufließen.
Die Aufgabenstellung für das Web 3.0
könnte also lauten: Wie lässt sich ein Missbrauch der Daten verhindern, ohne dass
man die bisherigen Errungenschaften des
Karl Prinz
Webs aufgibt?
9
BASISTECHNOLOGIE DES WEB 2.0
AJAX baut das Web 2.0
AJAX steht für asynchronen Datenaustausch zwischen Browser und Webserver, der ganz
neue Möglichkeiten des Seitenaufbaus und der Benutzerführung bietet. CHIP nennt die Vorteile
und Nachteile von AJAX und zeigt, wie die Technologie in der Praxis funktioniert.
AUF EINEN BLICK
, So funktioniert AJAX
Asynchrone Kommunikation
s11
Wie ein AJAX-Formular im Detail
aufgebaut ist
s12
und dem XMLHttpRequest-Objekt des
Browsers. Im Zeitalter ständig wachsender Bandbreiten erscheint dies nicht weiter spektakulär: Denn wenn der Seitenaufbau rasch erfolgt, scheint es nebensächlich, ob der Benutzer diese Aktualisierung durch den Klick auf den AbsendeButton eines Formulars auslöst oder
durch andere Aktionen, etwa das Ausfüllen eines Eingabefeldes.
Macht AJAX letztlich deshalb Furore,
weil nun auch auf Webseiten wie bei richtigen Programmen die Beschränkungen
von Eingabe- und Auswahlfeldern hinfäl-
lig werden, oder bietet AJAX noch weitere Vorteile? In diesem Beitrag zeigen wir
Ihnen die Besonderheiten dieser Technologie am Beispiel eines Onlineformulars,
das in klassischer Weise synchron mit dem
Webserver kommuniziert.
So war es bisher:
Synchrone Kommunikation
Nach dem gelungenen Aufbau des HTMLFormulars findet die Kommunikation
des Browsers mit dem Webserver erst in
dem Moment statt, in dem das Formular
Composing: V. Hildebrand
D
as Neue an Webseiten mit AJAXFunktionalität ist – wie das Akronym „Asynchronous JavaScript
And XML“ schon sagt – die asynchrone
Kommunikation zwischen Client (Browser) und dem (Web-)Server mit JavaScript
vom Benutzer abgeschickt wird. Die in
den Feldern des Formulars eingegebenen
Daten werden an den Server übertragen
und können dort mit einer Skriptsprache
ausgewertet und weiterverarbeitet werden. Mit JavaScript ist eine Prüfung der in
den einzelnen Feldern eingegebenen Daten auf Vollständigkeit und Korrektheit
bereits vor dem (endgültigen) Abschicken
möglich. Sie findet allerdings ausschließlich auf dem Client, also ohne Kommunikation mit dem Server, statt. In einer klassischen Webseite erfolgt die Prüfung somit entweder vorab beim Client oder
nachträglich auf dem Server, der bei unvollständiger Datenübermittlung die Weiterverarbeitung verweigert und das Eingabeformular mit den Fehlermeldungen
nochmals ausgibt.
Für eine Prüfung der Daten auf formale Korrektheit, beispielsweise die richtige
Form einer E-Mail-Adresse oder die erfolgte Eingabe der Postleitzahl oder des
Namens, ist dieses Verfahren bestens geeignet. Geht es jedoch um den weitergehenden, inhaltlichen Check, etwa ob der
Buchautor, den ich gerade eingeben will,
bereits in der Literaturdatenbank enthalten ist, hatte man bislang die Qual der
Wahl: Man konnte entweder auf derartige
Überprüfungen verzichten und die Eingabe in die Literaturdatenbank im Falle
einer Dublette verwerfen. Doch die Alternative, vor dem Aufbau der Webseite alle
Autoren aus der Datenbank zu lesen und
sie dann in einer JavaScript-Routine zu
speichern, ist auch nicht sonderlich attraktiv. Dieses Verfahren verzögert den Seitenaufbau, erhöht die Größe der HTML-Seite und kann bei großen Datenmengen
auch zu Speicherproblemen der JavaScript-Engine führen.
Für den Benutzer entfällt die überflüssige Eingabe beziehungsweise Tipparbeit,
denn der gewünschte Autor lässt sich aus
der angezeigten Liste übernehmen. Auch
die Pflege der Literaturdatenbank gestaltet sich wesentlich einfacher, da mit der
dynamischen Anzeigeliste weniger Autoren mit Tipp- und Schreibfehlern in der
Datenbank landen.
Die asynchrone Kommunikation zwischen dem Browser und der Literaturdatenbank des Servers bietet demnach
wirklich einen Mehrwert. So lassen sich
mit AJAX nicht nur Vorschläge für die
Eingabe einzelner Felder ausgeben, auch
ganze Seiten- und Programmteile lassen
sich ohne einen kompletten Neuaufbau
der Seite nachladen.
AJAX: Viel mehr Vorteile
als Nachteile
Der Vorteil beim Einsatz von AJAX besteht darin, dass sich Webanwendungen
programmieren lassen, die dem Benutzer
deutlich mehr Komfort bieten als bisher.
Weiterer Pluspunkt: AJAX ist keine Neuentwicklung, sondern lediglich eine Kombination von langjährig erprobten Technologien, die ihre Kinderkrankheiten bereits seit langer Zeit hinter sich haben.
Denn seit Ende des Browserkriegs zwischen
Netscape und Microsoft sind die Unterschiede der Browser in puncto JavaScriptUnterstützung nur noch marginal. Die
Unterstützung der Standards von Cascading Style Sheets (CSS) ist ebenfalls in
nahezu allen Browsern gegeben, und auch
das XMLHttpRequest-Objekt wird von
den neuen Versionen fast aller Browser
unterstützt.
Im Unterschied zu Flash, das ebenfalls
die Möglichkeit des asynchronen Datenaustauschs bietet, benötigt AJAX keinerlei
Plugins und keine binären Daten für die
Darstellung von dynamischen Webseiten.
Das macht sich in der Indizierung und
beim Ranking der Seiten in den Suchmaschinen positiv bemerkbar. Und durch den
Verzicht auf proprietäre Technologien
lassen sich barrierefreie Seiten mit wesentlich geringerem Aufwand gestalten als mit
Flash.
Der Hauptvorteil von AJAX: Webdesigner können problemlos schnell aufbauende Webseiten produzieren, bei denen
einzelne Seitenelemente je nach Benutzerverhalten nachgeladen werden. Dies kann
jedoch zur Folge haben, dass der Benutzer
Verzögerungen, die eventuell durch das
Nachladen von Funktionen und Dateien
entstehen, als Programmierfehler missinterpretiert. Die asynchrone Kommunikation mit dem Webserver reduziert zwar
die absolute Datenmenge pro Seitenaufruf, für den Webserver steigt jedoch aufgrund des asynchronen Nachladens von
Seitenelementen die Anzahl der Anfragen
um ein Mehrfaches. Das kann sich bei
nicht allzu leistungsfähigen Servern auch k
So arbeitet AJAX:
Asynchrone Kommunikation
Mit AJAX lässt sich die Eingabe komfortabler gestalten. Dem Benutzer werden
bereits beim Ausfüllen des Formularfeldes
nach einigen Buchstaben die in der Datenbank bereits vorhandenen Buchautoren
unterhalb des Eingabefelds als mögliche
Auswahloptionen angeboten – und dies
jeweils in Abhängigkeit von den Eingabewerten. Wenn also ein Autor bereits in der
Datenbank vorhanden ist, wird dies sofort
ersichtlich.
http://maps.google.de/: Die Adressensuche bietet neben einem Routenplaner und einem
Umgebungsplan auch ein skalierbares Satellitenbild sowie eine Branchensuche.
11
bereits bei weniger stark frequentierten
Seiten bemerkbar machen.
Aber AJAX hat nicht nur Vorteile: So
entsteht etwa zusätzlicher Programmieraufwand, um sinnvolle alte Funktionsweisen im neuen Umfeld zu emulieren. Der
Zurück-Knopf des Browsers und die
Browser-History funktionieren unter Umständen nicht mehr oder zumindest nicht
mehr in der gewohnten Weise. Gerade Benutzer mit wenig Internet-Erfahrung kann
so etwas leicht verwirren. Auch das Bookmarking von Webseiten wird unpräziser,
wenn die Webseite erst über die Interaktion
mit dem Benutzer entsteht.
Diese Folgekosten sollte man beim Einsatz von AJAX einkalkulieren. Sollen Webseiten auch bei deaktiviertem JavaScript funktionstüchtig bleiben, muss
man zumindest für die Basisfunktionalität noch für eine Alternative sorgen, was
den Programmieraufwand weiter erhöht.
Unter Umständen sind auch zusätzliche
Statusanzeigen für anfallende Ladevorgänge der Seitenelemente bei der Programmierung von AJAX-Anwendungen
zu berücksichtigen.
AJAX in der Praxis:
Per PLZ die Stadt ermitteln
Die eben beschriebene Funktionsweise
von AJAX-Anwendungen lässt sich am
besten anhand eines sehr einfachen Beispiels erklären. In einem Formular wird
über die eingegebenen Postleitzahlen in
einer Datenbank die zugehörige Stadt ermittelt. Dieser Wert wird anschließend in
einem weiteren Schritt in das Formularfeld „Stadt“ aufgenommen. Dreh- und Angelpunkt der Kommunikation zwischen
Browser und Webserver ist das XMLHttpRequest-Objekt, das über JavaScript aufgerufen wird. Die Datenermittlung auf
dem Server kann mit beliebigen Skriptsprachen erfolgen. Für das dynamische
Einbinden des vom Server gelieferten
Rückgabewerts ist wiederum JavaScript erforderlich.
XMLHttpRequest ist eine Programmschnittstelle, die für den asynchronen
Austausch von XML-kodierten Daten
konzipiert ist, sich aber auch für Daten in
anderen Formaten einsetzen lässt. Nach
der Initialisierung des Objekts wird es verwendet, um in der Funktion „callServer“
das PHP-Skript „getCity.php“ mit der
GET-Variable „zip“ aufzurufen – so als
wäre wie bei einer synchronen Kommunikation zwischen Client und Server das
Formular abgeschickt worden. XMLHttpRequest liefert nach Beendigung der Anfrage eine Statusmeldung. In unserem
Beispiel wird über diesen Rückgabewert
die JavaScript-Funktion „updatePage“
aufgerufen, die den ermittelten Wert in
das Feld „city“ einfügt.
Die Funktion „callServer“ wird über
den JavaScript-Event-Handler „onKeyUp“
aufgerufen. Sobald die erste Zahl in dem
Feld „zip“ eingegeben ist, wird der Wert
der Eingabe über die Funktion „getEle-
mentsByName“ ermittelt – und zwar für
jede Eingabe. Das XMLHttpRequest-Objekt ruft das PHP-Skript mit der Variablen
auf. Das Kodieren der Daten für die Übergabe an den Server und die Ausgabe des
Clients ist wichtig, um Umlaute und Sonderzeichen ohne Verstümmelungen zu erhalten.
Das PHP-Skript muss an dieser Stelle
nicht weiter erläutert werden, es hat lediglich die Funktion, aus den in einer Datenbank oder XML-Datei vorliegenden Daten
den der Variablen „zip“ entsprechenden
Wert für die Stadt zu ermitteln und auszugeben.
In der Funktion „updatePage“ wird bei
erfolgreichem Abschluss der Anfrage der
Rückgabewert des XMLHttpRequest-Objekts ausgelesen, kodiert und mit der JavaScript-Funktion „getElementsByName“
dem Feld „city“ des HTML-Formulars
übergeben.
<html>
<head>
<title>AJAX - Ein Beispiel</
title>
<script type=³text/javascript³ type=³text/javascript³>
var xmlHttpReq = false;
// Mozilla/Safari
if (window.XMLHttpRequest) {
xmlHttpReq = new XMLHttpRequest();
xmlHttpReq.
overrideMimeType(Ãtext/xmlµ);
}
// IE
else if (window.ActiveXObject) {
xmlHttpReq = new
ActiveXObject(ÄMicrosoft.XMLHT
TP³);
}
function callServer()
{
// Wert für PLZ aus dem
Webformular auslesen
var zip = document.getEleme
ntsByName(Äzip³)[0].value;
// Wert für PLZ muss vorhanden sein
if ((zip == null) || (zip
== Ä³)) return;
// URL erstellen, die Daten
vom Server abruft
AJAX-Skript in der Praxis: Die Anwendung ermittelt anhand der Postleitzahl die zugehörige
Stadt und trägt den Wert automatisch in das nächste Feld ein.
var url = ÄgetCity.
php?zip=³ + escape(zip);
// Verbindung zum Server
erstellen
xmlHttpReq.open(ÄGET³, url,
true);
// nach Serverabfrage Start
Aktualisierung der HTML-Seite
starten
xmlHttpReq.onreadystatechange = updatePage;
// Anforderung des senden
xmlHttpReq.send(null);
}
function updatePage() {
if (xmlHttpReq.readyState
== 4) {
var response = xmlHttpReq.responseText;
response =
unescape(response);
document.getElementsBy
Name(Äcity³)[0].value =
response;
}
}
</script>
</head>
<body>
<form action=³³ method=³³>
PLZ:  <input
type=³text³ name=³zip³ onKeyUp=³
callServer();³><br>
Stadt: <input
type=³text³ name=³city³><br>
</form>
</body>
</html>
Wichtige Bibliotheken und
Frameworks für AJAX
Die Länge des Quelltextes ist in diesem
einfachen Beispiel ziemlich überschaubar,
für komplexe Anwendungen sind die
Quelltexte dagegen oft mehrere hundert
Zeilen lang. Und schon bei ganz geringfügigen Verbesserungen wächst der Umfang des benötigten JavaScript-Codes exponentiell.
In unserem Beispiel könnte unterhalb
des Eingabefeldes für Postleitzahlen ein
Auswahlfenster erscheinen, das passend
zur Eingabe eine Anzahl der in der Datenbank gespeicherten Postleitzahlen anzeigt.
Nach der Auswahl wird automatisch die
zugehörige Stadt ermittelt. Für den Aufbau dieses Fensters, die Synchronisation
der Kommunikation zwischen der Einga-
be und den angezeigten Werten der Auswahl, sind weitere Funktionen erforderlich, ebenso Routinen, welche die Auswahl
der angebotenen Werte mit den Pfeiltasten oder der Maus ermöglichen beziehungsweise die aktuelle Auswahl eines
Wertes hervorheben. Hinzu kommen
Funktionen für den Umgang mit eventuell auftretenden Fehlern.
Glücklicherweise gibt es JavaScriptBibliotheken, welche die HTML-DOMProgrammierung und das Handling des
XMLHttpRequest-Objekts
erleichtern,
sowie Frameworks, die auf diesen oder auf
eigenen Bibliotheken aufbauen und
komplette AJAX-Anwendungen oder deren wesentliche Elemente bieten. Die Frameworks werden von einer engagierten
Community getragen, die sich im Idealfall
um die Dokumentation, das Bugfixing
und die Weiterentwicklung der Anwendungen bemüht und diese in Blogs eifrig
diskutiert.
Die interessanteste JavaScript-Bibliothek ist Prototype, woauf die Frameworks
Rico und Scriptaculous aufbauen, aber
auch MochiKit ist einen Test wert. Da die
Funktionalität dieser JavaScript-Bibliotheken anhand von Anwendungen demonstriert wird, ist der Übergang zu den
Frameworks fließend – allenfalls ein gradueller.
Bei den Frameworks, zu denen neben
Rico und Scriptaculous auch Spry und
YUI zählen, garantieren eine engagierte
Community beziehungsweise die Manpower großer Firmen wie Adobe, Google
oder Yahoo die kontinuierliche Anpassung und Neuentwicklung von AJAXAnwendungen. In Zahl und Qualität der
angebotenen Anwendungen gibt es oft
große Unterschiede. Anhand der präsentierten Beispiele lässt sich jedoch rasch
entscheiden, ob der Funktionsumfang
ausreichend und der Aufwand für die
Anpassung vertretbar sind.
Wer sich nicht mit den Tücken von JavaScript herumschlagen will, ist eventuell
besser bedient mit serverseitigen Frameworks der Programmiersprache seiner
Wahl (ASP, JAVA, Perl, PHP, Python), die
ihm diese Arbeit weitestgehend abnehmen. Da diese Frameworks relativ jung
sind, ist aber auch an dieser Stelle mit
Problemen zu rechnen. AJAX ist eben in
jedem Fall und in vielfacher Hinsicht eine
Karl Prinz
Herausforderung.
WEB-TIPPS
Die besten Links
Überblick
http://de.wikipedia.org/wiki/Ajax_
(Programmierung)
Community-Seiten
www.ajaxian.com/
Kritik an AJAX
(Beitrag „Listen kids, AJAX is not cool“ im
Blog www.lastcraft.com)
www.lastcraft.com/blog/index.php?p=19
Quellensammlung
www.drweb.de/weblog/weblog/?p=454
Liste mit AJAX-Anwendungen
(und Kritiken an AJAX)
http://itredux.com/office-20/database/
Einführungen in die
AJAX-Programmierung
www.get-the-code.de/code/javascript/
ajax/
www.zdnet.de/builder/program/
0,39023551,39146400,00.htm
http://developer.mozilla.org/de/docs/
AJAX
XMLHttpRequest-Objekt
http://developer.apple.com/internet/
webcontent/xmlhttpreq.html
http://de.wikipedia.org/wiki/XMLHttp
Request
AJAX-Bibliotheken
Prototype
http://prototype.conio.net/
www.sergiopereira.com/articles/
prototype.js.html
MochiKit
www.mochikit.com
AJAX-Frameworks
Atlas Client Script Framework
(Microsoft)
www.microsoft.com/germany/msdn/
library/web/AJAXUndASPNET.mspx?mfr=
true
Google Web Toolkit
http://code.google.com/webtoolkit/
moo.fx
http://moofx.mad4milk.net/
SAJAX
http://absinth.modernmethod.com/
sajax/
Scriptaculous
http://script.aculo.us
Spry
http://labs.adobe.com/technologies/
spry/
XAJAX
www.xajaxproject.org/
YUI
http://developer.yahoo.com/yui/
13
WEBHOSTER IM ÜBERBLICK
Der ideale Hosting-Tarif zum
N
ach wie vor ist die Vielfalt der
Webhosting-Angebote kaum zu
überblicken. In diesem Beitrag erfahren Einsteiger, Fortgeschrittene und
Profis, wie sie den richtigen Tarif finden.
Hosting für Einsteiger
Die beiden großen Anbieter 1&1 und
Strato bieten ein umfassendes Softwarepaket für den Homepage-Start: Ein kommerzielles Programm zum Gestalten von
Websites und Software zum Bearbeiten
von Grafiken bekommen Sie bereits in
den Einsteigerpaketen kostenlos dazu.
Haben Sie noch nie programmiert
oder mit HTML gearbeitet, sind Angebote
mit Homepage-Baukästen sehr hilfreich.
Mehr Informationen dazu finden Sie im
Artikel ab s64. Wenn Sie oft von mehreren Arbeitsplätzen aus arbeiten, sollten
Sie darauf achten, dass Sie Ihre E-Mails
über eine webbasierte Oberfläche verwalten können.
Vielen wird ein Einsteigerpaket ausreichen. Wer sich aber eingehender mit der
Materie beschäftigen möchte, wird schnell
weitere Funktionalitäten benötigen, etwa
zusätzliche Skripte oder eine Datenbank.
Ihr Paket sollte also flexibel erweiterbar
oder upgradefähig sein.
Achten Sie als Einsteiger auch darauf,
dass der Webhoster einen günstigen telefonischen Support anbietet.
Hosting für Fortgeschrittene
Wenn Sie bereits eine Homepage haben,
geht es nun darum, den Funktionsumfang der Seite zu erweitern. Am einfachsten geschieht dies mit vordefinierten Features. In diesem Bereich bieten Ihnen
zahlreiche Webhoster eine umfangreiche
Sammlung von CGI-Skripten und fertigen Funktionalitäten an, die Sie mit wenigen Programmzeilen in Ihre Seiten integrieren können. So kommen Sie schnell
zu einem Gästebuch, einem Forum oder
einem Blog.
Jeder möchte wissen, wie seine Homepage bei anderen ankommt. An dieser
Stelle hilft Ihnen die Webstatistik weiter.
Achten Sie darauf, dass Ihnen diese Daten
nicht nur als Datei, sondern auch als grafische Auswertung zur Verfügung gestellt
werden. Damit bekommen Sie einen guten Überblick über den Traffic auf Ihrer
Homepage und erfahren auch, welche Bereiche Ihrer Website mehr und welche
weniger attraktiv sind.
Zum Verkauf von Waren bieten zahlreiche Webhoster vorkonfigurierte Onlineshops. Stellen Sie bei der Auswahl des
Hosters einen Vergleich der Transaktionskosten an: Ist der Verkauf Ihrer Produkte
gratis, oder verlangt der Anbieter eine Gebühr pro Transaktion? Können Sie Ihren
Kunden Kreditkartenzahlungen ermöglichen? Wie viel kostet eine Transaktion?
Hosting für Profis
Hosting-Angebote für Profis sollten PHP
in der aktuellen Version unterstützen.
Wichtig ist die Option, eigene Skripte anzulegen und einzusetzen, auch MySQLDatenbanken sollten nicht fehlen.
Gerade im Profibereich sind auch die
Parameter Webspace und enthaltener Traffic sehr wichtig. Denn falls Sie eine Website einrichten möchten, auf der Sie viele
Daten speichern und Ihren Kunden zum
Download anbieten, kommt recht schnell
ein hohes Kommunikationsvolumen zusammen, das sich viele Anbieter teuer bezahlen lassen. Hier lohnen sich dann Tarife
mit uneingeschränktem Datentransfer.
Neben der hohen Verfügbarkeit der
Website ist auch eine hohe Verfügbarkeit
des telefonischen Supports ein wichtiger
Punkt – bei Problemen sollte auch zu
später Stunde oder am Wochenende jemand für Sie da sein. Viele Anbieter offerieren ihren Premium-Kunden kostenlosen Support rund um die Uhr.
Ein weiterer Punkt, den Sie keinesfalls
unterschätzen sollten, sind die Backups
Ihrer Website. Achten Sie darauf, dass Ihr
Hoster eine Backup-Lösung anbietet, mit
der Sie Ihre Website selbstständig rekonstruieren können, falls diese – aus welchen Gründen auch immer – zerstört
Andreas Hitzig
wird.
EINSTEIGER
Anbieter
Strato
1&1
URL
Paketname
Anzahl Domains (de)
Speicherplatz
Enthaltener Traffic
FTP-Zugang
POP3-Postfächer
Anti-Spam
UMS
SMS/Fax
www.strato.de
WebVisitenkarte C
2
40 MByte
8 GByte
www.1und1.info
1&1 Website
1
100 MByte
7,5 GByte
Webclient
Onlineshop
CGI-Baukasten
ClipArts
FrontPage-Erweiterung
Einrichtungsgebühr
Preis/Jahr
Preis im 1. Jahr
Mindestlaufzeit
●
25
●
10
●
●
●
●
●
●
●
●
●
●
●
●
●
10 gratis/Monat, jede 0,12 € pro SMS, 0,24
weitere SMS 0,09 €* € je DIN-A4-Seite
19,90 €
11,88 €
31,78 €
12 Monate
-
9,80 €
35,88 €
45,68 €
12 Monate
FORTGESCHRITTENE
Anbieter
Strato
1&1
URL
Paketname
Anzahl Domains (de)
Speicherplatz
Enthaltener Traffic
FTP-Zugang
POP3-Postfächer
Anti-Spam
UMS
SMS/Fax
www.strato.de
PowerWeb XE
3
150 MByte
10 GByte
www.1und1.info
1&1 Website
1
100 MByte
7,5 GByte
Webclient
Onlineshop
CGI-Baukasten
ClipArts
Einrichtungsgebühr
Preis/Jahr
Preis im 1. Jahr
Mindestlaufzeit
●
50
●
10
●
●
●
●
●
●
●
●
●
●
●
●
●
50 gratis/Monat, jede 0,12 € pro SMS,
weitere SMS 0,09 €* 0,24 € je DIN-A4-Seite
19,90 €
23,88 €
43,78 €
6 Monate
-
9,80 €
47,88 €
57,68 €
12 Monate
PROFIS
Anbieter
Strato
1&1
URL
Paketname
Anzahl Domains (de)
Speicherplatz
Enthaltener Traffic
FTP-Zugang
POP3-Postfächer
Anti-Spam
UMS
SMS/Fax
www.strato.de
PowerWeb S
4
500 MByte
30 GByte
www.1und1.info
1&1 Business
3
500 MByte
30 GByte
●
150
●
●
●
150
●
●
50 gratis/Monat, jede 0,12 € pro SMS,
weitere SMS 0,09 €* 0,24 € je DIN-A4-Seite
●
●
Webclient
MySQL-Datenbanken
1
2
●
●
PHP4
●
●
PHP5
●
Perl
●
●
SSI
●
●
Webstatistiken
●
●
Onlineshop
●
●
CGI-Baukasten
●
●
ClipArts
●
FrontPage-Erweiterung Einrichtungsgebühr
19,90 €
9,80 €
Preis/Jahr
59,88 €
155,88 €
Preis im 1. Jahr
79,78 €
165,68 €
Mindestlaufzeit
6 Monate
12 Monate
*MMS 0,29 €, jedes weitere Fax 0,20 €
● = ja; - = nein
kleinen Preis
Bei der Suche nach dem geeigneten Webhoster
geht es nicht nur um Speicherplatz und Transfervolumen. CHIP sagt Ihnen, worauf Sie bei der
Auswahl besonderen Wert legen sollten.
Lycos
Evanzo
Goneo
Host Europe
Server4you
Domainfactory
Hetzner
1blu
www.lycos.de
Active
1
1000 MByte
20 GByte
www.evanzo.de
webXS
1
300 MByte
Kein Limit
www.goneo.de
Homepage Start
2
500 MByte
Kein Limit
www.hosteurope.de
WebPack S
1
100 MByte
25 GByte
www.server4you.de
Racer Go
2
300 MByte
50 GByte
www.domainfactory.de
MyHome S
1
100 MByte
Kein Limit
www.hetzner.de
SH 200
1
100 MByte
10 GByte
www.1blu.de
Homepage
1
40 MByte
8 GByte
●
●
●
●
●
●
●
Kein Limit
●
2
●
100
Kein Limit
25
-
●
100
-
-
-
-
-
●
●
●
● (osCommerce)
●
-
Eigene Skripte nutzbar
-
-
●
-
83,40 €
83,40 €
12 Monate
14,99 €
12,00 €
26,99 €
12 Monate
Lycos
www.lycos.de
Active
1
1000 MByte
20 GByte
100
●
●
●
-
●
-
11,25 €
11,25 €
12 Monate
14,99 €
17,88 €
32,87 €
12 Monate
Evanzo
Goneo
www.evanzo.de
webXS
1
300 MByte
Kein Limit
www.goneo.de
Homepage Start
2
500 MByte
Kein Limit
GS ShopBuilder Basic
-
-
-
-
Hetzner
1blu
MyHome S
1
100 MByte
Kein Limit
www.hetzner.de
SH 200
1
100 MByte
10 GByte
www.1blu.de
Homepage Professionell
33
500 MByte
30 GByte
-
●
2
100
-
●
●
●
● (osCommerce)
-
●
●
-
●
Domainfactory
26,10 €
●
100
●
www.server4you.de
Racer Go
2
300 MByte
50 GByte
●
Kein Limit
25
●
100
●
-
-
SMS: 0,09 € je SMS -
-
●
●
●
●
●
-
-
-
●
-
-
-
●
-
14,99 €
12,00 €
26,99 €
12 Monate
11,25 €
11,25 €
12 Monate
14,99 €
17,88 €
32,87 €
12 Monate
Lycos
Evanzo
Goneo
www.lycos.de
Active
1
1000 MByte
20 GByte
www.evanzo.de
webXS500
1
500 MByte
Kein Limit
www.goneo.de
Homepage Plus
3
1000 MByte
Kein Limit
●
●
-
●
●
●
83,40 €
83,40 €
12 Monate
-
●
Server4you
-
●
●
-
www.hosteurope.de
WebPack S
1
100 MByte
25 GByte
-
-
●
-
Host Europe
●
●
●
-
12 Monate
●
-
-
16,90 €
10,80 €
27,70 €
12 Monate
●
●
SMS: 0,09 € je SMS -
9,90 €
23,88 €
33,78 €
30 Tage
●
Kein Limit
●
●
4,90 €
11,88 €
16,78 €
12 Monate
●
100
25
●
●
●
●
●
●
12 Monate
4,90 €
11,88 €
16,78 €
12 Monate
9,90 €
23,88 €
33,78 €
30 Tage
16,90 €
29,40 €
46,30 €
6 Monate
Host Europe
Server4you
Domainfactory
Hetzner
1blu
www.hosteurope.de
WebPack M
1
200 MByte
50 GByte
www.server4you.de
Racer Pro
3
800 MByte
100 GByte
Kein Angebot
www.hetzner.de
SH 500
1
500 MByte
20 GByte
www.1blu.de
Homepage Professional
3
500 MByte
30 GByte
26,10 €
-
●
●
●
●
●
●
Kein Limit
●
3
●
200
50
-
●
200
●
●
-
-
-
-
-
-
●
●
●
●
●
●
●
1
1
3
1
1
1
100
●
●
-
●
●
●
-
●
● (Open Source)
●
●
●
●
-
83,40 €
83,40 €
12 Monate
-
●
-
41,88 €
41,88 €
12 Monate
●
●
●
●
●
● (Open Source)
●
●
●
●
●
●
-
Bedingt
-
22,05 €
22,05 €
12 Monate
●
14,99 €
41,88 €
56,87 €
12 Monate
●
-
●
●
●
-
●
●
●
-
71,10 €
71,10 €
12 Monate
●
100
1
●
●
●
●
●
●
●
●
-
Eigene Skripte einsetzbar
-
-
●
59,88 €
59,88 €
30 Tage
-
●
16,90 €
29,40 €
46,30 €
6 Monate
15
WEBSITE GRATIS PARKEN
Kostenloser Webspace
Nicht nur für Homepage-Neulinge ist kostenloser Webspace ein attraktiver Ausgangspunkt
für ihren Start ins Internet. Auch für Entwickler sind die Gratisseiten ein willkommenes Angebot,
um ihre aktuellen Projekte ohne finanziellen Aufwand online zu testen.
D
as Internet ist eine Fundgrube der
unterschiedlichsten Dienstleistungen, wobei sich gerade die kostenlosen besonderer Beliebtheit erfreuen.
Noch vor nicht allzu langer Zeit bekamen
Sie Gratis-Webspace an jeder Ecke. Meist
mussten Sie sich nur registrieren und hatten sofort genug Platz für Ihre Webpräsenz
inklusive einer Subdomain.
Die Zeiten haben sich geändert, die
guten Angebote sind selten geworden –
aber es gibt sie noch. CHIP hat die besten
Adressen für Gratis-Webspace für Sie zusammengestellt.
Heute gibt es nur noch wenig Kostenloses ohne Gegenleistung im Internet. So
verhält es sich auch beim Webspace. Damit der Registrierungsvorgang nicht zu
langwierig wird oder Sie zu viele persönliche Informationen preisgeben müssen,
haben wir einige Bedingungen für die
Gratishoster definiert: Das Angebot muss
zeitnah freigeschaltet werden, einen vollwertigen FTP-Zugang und eine Datenbank enthalten sowie PHP oder ASP unterstützen. Nur wer diese Kriterien erfüllt,
schaffte es in unsere Übersicht.
Byto.de
Mit 500 MByte Speicherplatz ist die Webpräsenz ausreichend dimensioniert. Sie
haben keine Einschränkungen beim Traffic, sodass Ihre Seite auch bei starker Frequentierung immer erreichbar ist. Besonders erfreulich ist die schnelle Freischaltung. Bereits nach weniger als 30 Minuten
können Sie per FTP auf Ihren Speicherplatz zugreifen und Ihre Seite erreichen.
Zur Verwaltung der MySQL-Datenbank
steht phpMyAdmin zur Verfügung. Die
Funktion zum Ändern der Initialpasswörter ist allerdings ein wenig versteckt;
Sie finden sie in der Webspace-Verwaltung. Das dortige Zugangspasswort ist
übrigens Ihr FTP-Passwort.
Ja-Nee.de
TIPP
Spam unterbinden
Die Webhoster erwarten bei der Registrierung korrekte Eingaben und versprechen
im Gegenzug, Ihre Daten nicht an Werbefirmen weiterzugeben. Trotzdem sollten
Sie sich eine weitere Mailadresse zulegen,
die Sie lediglich für Registrierungen im Internet verwenden. Ein regelmäßiger Blick
in dieses Postfach zeigt, ob die Webhoster ihr Versprechen gehalten haben oder
ob Ihr Posteingang ziemlich schnell von
Spamwellen überflutet wird.
Elusive Webservices
Nicht nur wegen des ungewöhnlichen Namens sticht dieses Angebot ins Auge. Elusive fiel vor allem positiv auf, weil der unlimitierte Webspace sofort nach der Registrierung verfügbar war. Sie bekommen
nicht nur beliebig viel Speicherplatz, sondern auf Wunsch gleichfalls kostenlos
das Content-Management-System (CMS)
PHP-Nuke sowie ein phpBB-Forum zur
Verfügung gestellt. Ihre Seiten können Sie
entweder per FTP-Client oder über WebFTP hochladen. Finanziert wird das Ganze durch Werbe-Einblendungen.
File4U.net
Der einzige Anbieter in unserer Marktübersicht, der ASP, ASP.Net und eine
FrontPage-2002-Erweiterung kostenlos
bereitstellt, ist File4U. Ihnen stehen insgesamt 20 MByte für Ihre Webpräsenz zur
Verfügung, ein Limit für die Datentransfermenge gibt es nicht.
Der Webspace wird manuell eingerichtet und freigeschaltet. Bei unserem Testaccount hat es mehrere Tage gedauert,
bis die Zugangsdaten per E-Mail eintrafen. Ein wenig Geduld ist bei diesem Anbieter also durchaus angebracht.
Der Name lässt auf Kompromisse schließen, aber das Angebot von Ja-Nee.de
kann sich sehen lassen. Lediglich der nur
bedingt vorhandene FTP-Zugang ist ein
Manko. Der Zugang lässt sich nur über
PayPal freischalten – für zehn Cent. Es ist
zu vermuten, dass der Provider damit
einem Missbrauch seines Angebots einen
Riegel vorschieben will.
Bei Ja-Nee.de bekommen Sie neben
150 MByte Speicherplatz auch eine MySQL Datenbank und 20 GByte Transfervolumen. Die Verwaltung Ihrer Webpräsenz finden Sie ohne Umwege in der Rubrik „Verwaltung“, wo Sie sämtliche Passwörter ändern und eine Weiterleitung
einrichten können.
Ohost.de
Ein weiterer Anbieter, der den gebuchten
Webspace sofort freischaltet, ist Ohost.de.
Sie bekommen bei diesem Provider insge-
DIE WICHTIGSTEN ANBIETER VON
Anbieter
Byto.de
URL
www.byto.de/
Art der Domain
name.byto.de
Speicherplatz
Traffic-Limitierung
FTP-Zugang
WebFTP
POP3-Postfach
CGI erlaubt
PHP4/5
MySQL
ASP/ASP.Net
Sonstiges
500 MByte
Unlimitiert
Freigabe
Zugangsdaten sofort,
Freischaltung binnen
30 Minuten
● = ja;
- = nein
●
●
●
1
-/phpMyAdmin
samt 2,5 GByte Webspace zugeteilt, der
sich durch gelegentliche Werbe-Einblendungen finanziert. Die Verwaltung der
Homepage erfolgt über eine sehr übersichtlich gestaltete Verwaltungsseite. Von
dort aus können Sie auch den FTP-Zugang und die MySQL-Datenbank aktivieren. Die lässt sich wie gewohnt über
phpMyAdmin pflegen.
Ohost.de bietet seinen Usern darüber
hinaus die Möglichkeit, sich an der eigens
eingerichteten Community zu beteiligen.
Dazu richten Sie einfach Ihr Profil entsprechend ein.
Pytal
Die Administration bei Pytal ist sehr benutzerfreundlich gehalten. Nach der Registrierung bekommen Sie eine E-Mail
zugeschickt, mit der Sie Ihre Homepage
aktivieren. Danach kann man die Webpräsenz online konfigurieren und die Zusatzangebote FTP, PHP und MySQL freischalten und einrichten.
Alle notwendigen Informationen zur
Pflege Ihrer Seite sind im Verwaltungsbereich zu finden. Die Änderung der Passwörter erfolgt ebenfalls an dieser Stelle.
Als Tool zur Verwaltung der Datenbank steht Ihnen – wie bei den meisten
Webspace-Angeboten – phpMyAdmin
zur Verfügung. Auf der Verwaltungsseite
haben Sie auch die Möglichkeit, die tägliche Sicherung Ihrer MySQL-Datenbank
wieder zurückzusichern.
Ohost.de: Der Gratisprovider bietet neben
dem Webhosting auch eine Community an.
Die Verwaltungsseite ist sehr übersichtlich.
Pytal: Beim Anlegen Ihrer Webpräsenz
können Sie aus mehreren Toplevel-Domains
wählen – von de über com bis eu.
Uttx.net
Space for Free
Der Webspace-Provider Space for Free
bietet den geringsten Speicherplatz im
Testfeld – nur 10 MByte. Das Transfervolumen ist auf 10 GByte limitiert, was für
eine private Homepage jedoch mehr als
ausreichend sein sollte. Die Freischaltung
der Seite erfolgt nach individueller Prüfung – unser Testaccount war nach einem
halben Tag verfügbar.
Das Aufspielen der Seiten erfolgt über
einen FTP-Zugang, WebFTP steht nicht
zur Verfügung. Neben den statischen Seiten können Sie dank PHP und MySQL
auch Skripte anlegen und dynamische
Inhalte über die Datenbank erzeugen.
Bei Uttx.net bekommen Sie 150 MByte
Speicherplatz, fünf MySQL-Datenbanken, PHP4 oder PHP5 – und das
Ganze ohne Werbung. Bei der Registrierung müssen Sie allzu viel Persönliches
preisgeben, die Freischaltung ist nach etwa einer halben Stunde erledigt. Danach
ist Ihre Webpräsenz erreichbar.
Bei Uttx.net haben Sie auch die Möglichkeit, verschiedene PHP-Einstellungen,
etwa error_reporting, magic_quotes_gpc,
magic_quotes_runtime, register_globals,
safe_mode, session.use_trans_sid oder
upload_max_filesize, selbst zu verwalten.
Andreas Hitzig
GRATIS-WEBSPACE IM ÜBERBLICK
Elusive Webservices
File4U.net
Ja-Nee.de
Ohost.de
Pytal
Space for Free
www.elusive-hosting. http://file4u.net/
de
freepage/
name.kostenlos-php.de name.file4u.net
www.ja-nee.de
www.ohost.de
www.pytal.de/
http://spaceforfree.de www.uttx.net
www.name.ja-nee.de
name.ohost.de
Diverse Subdomains
name.uttx.net
Unlimitiert
Unlimitiert
name.pytal.de/com/
eu/net/org
Unlimitiert
Unlimitiert
10 MByte
1 GByte
150 MByte
Unlimitiert
●
●
●
-
-
-
20 MByte
Unlimitiert
●
●
●
-
1
●
●
150 MByte
2500 MByte
Unlimitiert
Unlimitiert
Nur nach Freischaltung ●
●
●
-
●
●
●
1
-/CMS und Forum gratis,
phpMyAdmin
Freischaltung sofort
nach der Registrierung
1
-/FrontPage 2002
phpMyAdmin
Homepage Editor,
eigene Bildergalerie
Bearbeitung der Frei- Direkte Freigabe nach
schaltung zwischen
Registrierung, FTP-Zu8 und 16 Uhr werktags gang nur nach Authentifizierung über PayPal
1
●
Uttx.net
●
●
●
●
●
●
●
1
-/phpMyAdmin
1
-/phpMyAdmin
1
-/phpMyAdmin
5
-/phpMyAdmin
Sofortige Freischaltung Sofortige Freischaltung Freigabe innerhalb
nach Mail-Bestätigung nach Mail-Bestätigung von 48 Stunden nach
Registrierung
Sofortige Freischaltung
nach Mail-Bestätigung
17
ALLE PROGRAMME AUF HEFT-CD
Die Top-Webdesign-Tools
Starten Sie durch zu Ihrem eigenen Internetauftritt: Auf der Heft-CD finden Sie drei Vollversionen für den Homepage-Aufbau, den Start eines Webshops sowie die Foto- und MultimediaVerwaltung – dazu die 50 besten Gratis-Tools zum Thema Website-Gestaltung.
D
er persönliche Internetauftritt
dient längst nicht mehr nur als Visitenkarte im Web – mit ihm lassen Sie andere an Ihrem Leben teilhaben,
werben für Ihren Fußballverein oder verkaufen Waren an eine weltweite Kundschaft. Ob Familien-Homepage, Weblog
oder aufwändige Business-Website – auf
der Heft-CD finden Sie alle Tools, mit denen Sie Ihren ganz persönlichen Internetauftritt gestalten können.
Gleich drei Vollversionen gibt es gratis
zum Heft: Mit WebSite X1 gestalten Sie
kinderleicht eine eigene Homepage, ohne
sich mit umständlichem Quellcode herumschlagen zu müssen: einfach Design
auswählen, nach Belieben anpassen und
hochladen – fertig.
Sie wollen einen eigenen Internetshop aufbauen? Leichter als mit SmartStore.biz 5 StartUp geht‘s nicht. Anhand
weniger Vorgaben legt die Software ganz
von selbst einen vollständigen Webshop
an – inklusive Warenkorbsystem und Online-Bezahlmöglichkeit.
Nach einem Urlaub können sich
schnell mehrere hundert Fotos auf der
Festplatte ansammeln. Bevor Sie die bes-
ten davon online stellen, müssen Sie sie
sortieren und in ein platzsparendes Format umwandeln. Dabei hilft der Ashampoo Photo Commander: Das Tool öffnet
nicht nur Bilder, es lassen sich mehr als 50
Multimedia-Formate anzeigen, verwalten
und bearbeiten.
Darüber hinaus finden Sie auf der
Heft-CD 50 Gratis-Tools – von Audacity,
das Sie beim Anlegen von Podcasts unterstützt, über das Homepage-Konzept-Tool
Denim bis zum Profi-Weblogsystem
WordPress. Beachten Sie die Lizenz-Bestimmungen der einzelnen Anbieter.
VOLLVERSION
WEBSITE X1
VOLLVERSION
SMARTSTORE.BIZ 5 STARTUP
VOLLVERSION
PHOTO COMMANDER 4
Eigene Homepage
Webshop aufbauen
Features:
,Websites per Drag
& Drop
,Support für Diashows, Filme, Sound
und Musik
,Rund 40 Vorlagen
zur Auswahl
Features:
,Eigenes OnlineKaufhaus mit Warenkorbsystem
,Integrierte Produktverwaltung
,Automatische
Shop-Generierung
Beschreibung: Mit
Incomedia WebSite X1 ist die eigene
Homepage nur noch wenige Klicks entfernt. Wählen Sie einfach das gewünschte Site-Design aus diversen Vorlagen aus
und passen Sie es per Drag & Drop Ihren
persönlichen Vorstellungen an. Auch auf
aktuelle Features müssen Sie nicht verzichten: Die Einsteiger-freundliche Software bietet spezielle Funktionen, um
Video, Sound oder Diashows bequem zu
integrieren. Dank FTP-Support können
Sie die fertige Homepage direkt aus dem
Programm zu Ihrem Webspace-Provider
hochladen.
Hinweis: Auf der Heft-CD finden Sie
auch die Demo-Version zur aktuellen Version X5 inklusive Einstiegs-Tutorial.
Beschreibung:
SmartStore.biz 5
StartUp verhilft Ihnen zu einem professionellen Internetkaufhaus mit allem
Komfort. Sie wählen lediglich das Design
aus und pflegen Ihre Waren ein – SmartStore.biz gestaltet daraus den kompletten Webshop. Ein professionelles
Warenkorbsystem erleichtert Ihren Kunden den Einkauf, zudem unterstützt die
Software sämtliche gängigen Online-Bezahlmethoden, etwa PayPal, Kreditkarte
oder Nachnahme. Dank integrierter Produktverwaltung managen Sie mit SmartStore Ihren kompletten Warenbestand.
Hinweis: Sie müssen sich online registrieren. Bitte beachten Sie die Infos auf
der Heft-CD.
,CD-CODE
Vollversion
,CD-CODE
Vollversion
Bildverwaltung
Features:
,Öffnet Bilder, Videos,
Songs
,BildbearbeitungsFeatures integriert
,Kennt über 50 Formate
Beschreibung: Unzählige Dateien in den unterschiedlichsten Formaten liegen auf modernen Festplatten. Der Ashampoo Photo
Commander 4 ist das perfekte Verwaltungs- und Bearbeitungstool für diese
Vielfalt. Die Software zeigt unter einer
einheitlichen und komfortablen Oberfläche mehr als 50 verschiedene Video-,
Bild- und Audioformate an. Eine Palette
der wichtigsten Bildbearbeitungsfunktionen, etwa „Rote Augen entfernen“,
„Drehen“ oder „Verkleinern“, macht das
Tool ideal, um Fotos schnell und einfach
für das Web vorzubereiten.
Hinweis: Mit dieser Version von Photo
Commander 4 können Sie günstig auf die
Version 5 upgraden. Bitte beachten Sie
die entsprechenden Informationen auf
der Heft-CD.
,CD-CODE
Vollversion
HINWEISE ZUR CD
So legen Sie los
Die CD startet automatisch. Ist „Autorun“
deaktiviert, öffnen Sie die „AUTOSTART.
EXE“ im Hauptverzeichnis der CD. Als
Browser benötigen Sie den Internet Explorer ab 4.0, Firefox ab 1.0 oder Opera ab
6.0 mit aktiviertem JavaScript.
Software installieren: Zu jedem Tool finden Sie ausführliche Beschreibungen.
Unter den im Heft angegebenen CDCodes oder über „Software“ können Sie
alle Tools ansteuern. Mit einem Klick
auf „Start“ beginnt die Installation. Bei
Tools, die nicht direkt installierbar sind,
öffnet sich das extrahierende Archiv.
Hinweise zu den Tools: Bezeichnungen
und Logos sind zugunsten der Hersteller
als Warenzeichen und eingetragene Warenzeichen geschützt. Bitte beachten Sie
die Lizenzbestimmungen. Hilfe zu den einzelnen Programmen erhalten Sie direkt
vom Hersteller.
Bitte schalten Sie die Vollversionen innerhalb der nächsten zwei Monate frei,
danach verfallen die Schlüssel.
DIE 50 TOP-TOOLS*
k CD-CODE hGRAFIK
CSS-Maker 1.4.9
k CD-CODE hBROWSER
Internet Explorer 7 + Firefox 2.0 + Opera 9.02 r
GIMPshop 2.2.8
s23
Formular-Maker 1.2.4
IrfanView 3.98
s23
Fotos on Web 1.1.1
SplitImage 1.5
s23
Gallery 2.1
Ulead Gif Animator Lite 1.0
Gallery Wizard 2.0
XnView Komplett 1.82.4
s24
HTML Editor Phase 5.42
pkColorPicker 3.00.05
s24
HTML FontColorizer 2.04
Buttonz & Tilez 1.5
s24
HTML-Tools 1.0
Thumbnail Refinery LE 2.5.0.7
JS-MenuMaker 1.0.0
JS-Navigator 1.0.2
k CD-CODE hFTP
FileZilla 2.2.28
Nvu – HTML-Editor 1.0 Final
k CD-CODE hCMS
s23
s23
Joomla 1.0.11
typo3 4.0
WordPress 2.042
s24
k CD-CODE hWINDOWS
s92
Audacity 1.2.4b
AdaUrl 2.02.001
Peter‘s XML Editor 2.0
Check Load Time 2.1
Pop-Up Light Edition 4.6 L.E
Denim 2.0
s24
Replace-Manager 1.03
Loudblog 0.5.1
s94
StyleAssistant 1.0
Re-Namer 1.0.4
TopStyle Lite 3.10
Windows Media Encoder 9.0
s25
Weaverslave 3.9.18
WinHTTrack 3.40 v2
s25
Byte Reducer 1.3
k CD-CODE hPHP
7-Zip 4.42
CodeGen 1.4
Dev-PHP 2.0.12
Keyword Extractor 1.03
CSE HTML Validator Lite 7.01
XAMPP 1.5.4a
Riva FLV Encoder 2.0
CesarFTP 0.99
k CD-CODE hHTML
First Page 2006 3.0
Absolute HTML Compressor 1.14
Balthisar Cascade 2.0b11
s25
*Noch mehr Freeware und Shareware finden Sie auf der Heft-CD.
19
UF CD
A
ALLE PROGRAMME AUF HEFT-CD
DIE
I
ete
m To o l
ede
CH
Pg
TOP
TOOLS
uj
Alle vo n
50
stet - M it Tipps
z
Die 50 besten Tools
Ob klassische Homepage, Weblog oder Onlineshop – mit den Freeware-Tools auf der Heft-CD
planen und realisieren Sie Ihre eigene Webpräsenz. Und auch eine fertige Website lässt sich noch
optimieren – zum Beispiel mit Bildergalerien oder beweglichen Navigationsmenüs.
VOLLVERSION: SMARTSTORE.BIZ 5 STARTUP
Schritt für Schritt: Eigenen Onlineshop aufbauen
2
Grundeinstellungen: Ein Assistent
führt Sie sicher durch die ersten
Schritte zum eigenen Onlineshop.
1
1
Grundeinstellungen vornehmen: Starten Sie das Programm und installieren
Sie eventuell vorhandene Updates. Legen
Sie ein neues Projekt an, und tragen Sie im
Assistenten Anschrift, Logo, belieferte Länder, Steuergebiet, Standard-Zahlungsverfahren und Standard-Versandarten sowie Service-Mailadressen ein. Stellen Sie anschließend unter „Grundeinstellungen vornehmen
| Länder, Regionen und Zonen“ sicher, dass
der ab Januar 2007 in Deutschland gültige
Mehrwertsteuersatz von 19 Prozent eingetragen ist.
Warengruppen: Sie erleichtern
die Verwaltung der Produkte und
den Kunden die Navigation im Store.
2
Warengruppe verwalten: Sie können
alle Produkte auf verschiedene Warengruppen aufteilen. Dazu wählen Sie „Produkte“, klicken mit rechts in das Feld „Warengruppen“ und wählen „Neue Warengruppe“. Tragen Sie eine beliebige Gruppennummer und -bezeichnung ein. Auf Wunsch legen
Sie noch eine HTML-Beschreibung an. In der
Registerkarte „Medien“ fügen Sie der Gruppe
ein Bild hinzu. In dieser Version können Sie
jeder Warengruppe noch eine Untergruppe
zuordnen, die im Shop berücksichtigt wird.
Produkte einpflegen: Über den integrierten Produktmanager verwalten Sie
bis zu 100 Produkte. Um einen Posten hinzuzufügen, markieren Sie eine Warengruppe,
klicken mit rechts in die Warentabelle und
fügen über „Neues Produkt“ Ihre Produkte
mit Artikelbildern und HTML-Beschreibung
hinzu. Den Verkaufspreis berechnet die Software aus dem Einkaufspreis und dem gewünschten Verkaufsaufschlag. Steuersatz,
Lieferzeit oder Mindestbestellmenge bestimmen Sie für jedes Produkt einzeln. Auch
Mengenrabatte sind möglich.
Optischen Auftritt gestalten: Für die
optische Gestaltung Ihres Webshops
stehen Ihnen sieben Vorlagen mit jeweils
mehr als 70 Farbstilen zur Verfügung. Um Ih-
3
4
Produkte: Im Produktmanager legen
Sie für jede Ware den individuellen
Preis, den Steuersatz oder die Lieferzeit fest.
3
rem Shop eine Vorlage zuzuweisen, klicken
Sie im Navigationsmenü auf „Design“ und
danach zweimal auf das gewünschte Layout.
Über die Registerkarten im Hauptfenster
können Sie alle Elemente der Seite, etwa
Schrift, Banner, Logos und die Sitegröße, individuell anpassen.
Struktur und Seitengestaltung festlegen: Die Struktur Ihres Onlineshops legen Sie im Menü „Seiten“ fest. In der Standardeinstellung sind bereits alle wichtigen
Elemente integriert. Sie können diese Anordnung via Drag & Drop beliebig ändern. Achtung: Füllen Sie unbedingt Impressum und
AGB aus! Im Menü „Vorlagen“ bestimmen
Sie das grundsätzliche Design von Seiten,
Warengruppen- und Produktansichten.
Shop testen und ins Web stellen: Sobald Sie alle Daten in SmartStore.biz
eingetragen haben, lassen Sie das Programm
den Shop generieren. Klicken Sie dazu auf
den Button „Erstellen“. Wählen Sie „Store
öffnen im | internen Browser“, um direkt im
Programm eine Vorschau zu Gesicht zu bekommen. Ist alles in Ordnung, klicken Sie auf
„Veröffentlichen“, um den Shop per FTP auf
Ihren Webspace zu laden oder lokal (auf CD)
zu veröffentlichen. Bestehende Shops aktualisiert SmartStore.biz lediglich.
5
6
Struktur: Inhalte und Position von
allen Nicht-Produkt-Seiten, etwa
den AGB, legen Sie im Sitemanager fest.
5
VOLLVERSION: ASHAMPOO PHOTO COMMANDER 4
.
Schritt für Schritt: Bilder fürs Web optimieren
Einrichten: Im Einrichtungsassistenten legen Sie fest, welche Dateiformate Photo Commander öffnen soll.
1
1
Programm einrichten: Starten Sie die
Software und überspringen Sie den
Willkommenstext mit „Weiter“. Wählen Sie
anschließend, welche Dateien der Photo
Commander automatisch öffnen soll. Im
nächsten Schritt bestimmen Sie, ob das Programm im Einsteiger- oder Expertenmodus
ausgeführt werden soll; der Einsteigermodus
blendet verschiedene Programm-Merkmale
aus. Dies lässt sich jedoch jederzeit ändern.
Um die kostenlose Vollversion des Photo
Commander zu aktivieren, klicken Sie auf
„Internet | Gratis die Vollversion freischalten“. Den Schlüssel geben Sie unter „Hilfe |
Kaufen / Registrieren“ ein.
Rote Augen entfernen: Um mit dem
Ashampoo Photo Commander rot geblitzte Augen zu entfernen, klicken Sie in der
Voransicht auf das zu bearbeitende Bild.
Links erscheint nun eine Großansicht des
Bildes. Klicken Sie rechts neben der Großansicht auf das Werkzeug „Rote Augen entfernen“. Nun wird das Foto vergrößert dargestellt, und der Mauszeiger verwandelt sich in
ein Fadenkreuz. Setzen Sie den Cursor links
2
3
Bildgröße: Über die integrierte
Stapelverarbeitung ändern Sie die
Größe von mehreren Fotos gleichzeitig.
Beschneiden: Mit dem SchneideWerkzeug entfernen Sie blitzschnell
überflüssige Bildinhalte.
oberhalb des Auges an und ziehen Sie ihn
bei gedrückter Maustaste nach rechts unten.
In einem kleinen Vorschaufenster sehen Sie,
wie das Ergebnis mit der Voreinstellung
„Farblos“ aussieht. Sind Sie zufrieden, bestätigen Sie mit „Ja“.
Bildgröße ändern: Öffnen Sie den Ordner, in dem die Dateien liegen. Klicken
Sie mit gedrückter [Strg]-Taste auf jedes Bild,
das skaliert werden soll. Möchten Sie alle
Fotos im Ordner ändern, klicken Sie auf eines
der Bilder und drücken [Strg]+[A]. Wählen
Sie im Menü „Assistenten | Bilder konvertieren“. Bestätigen Sie die Datei-Auswahl mit
„Weiter“. Aktivieren Sie „Bildgröße ändern“
und „Seitenverhältnis beibehalten“ und legen Sie unter Maßeinheit „Pixel“ fest. Tragen Sie nun die neue „Breite“ ein. Bei Webbildern sollte sie 600 Pixel nicht überschreiten. Wählen Sie unter „Ausgabeverzeichnis“
den Speicherort für die skalierten Dateien
und legen Sie unter „Ausgabeformat“ „JPG“
fest. Drücken Sie „Weiter“.
Bilder beschneiden: Um ein Bild zuzuschneiden, markieren Sie es im Photo
Commander 4 per Mausklick. Aktivieren Sie
dann rechts neben der Großansicht das
„Auswahl“-Werkzeug. Ziehen Sie nun mit
gedrückter Maustaste den Bereich über dem
Bild auf, den Sie behalten wollen – der Rand
um Ihre Auswahl wird anschließend weggeschnitten. Klicken Sie nun mit der rechten
Maustaste in die Markierung und wählen Sie
„Auswahl freistellen“. Sofort schneidet der
Photo Commander das Bild zu.
Bilder mit Wasserzeichen versehen:
Zum Einfügen eines Wasserzeichens in
Ihre Bilder öffnen Sie zuerst den Ordner, der
die gewünschten Fotos enthält. Markieren
Sie alle Fotos, die ein Wasserzeichen erhalten sollen, und klicken Sie unter „Assistenten“ auf „Bilder konvertieren“. Bestätigen
Sie Ihre Auswahl mit „Weiter“. Stellen Sie im
nächsten Fenster sicher, dass vor „Bildgröße
ändern“ kein Häkchen mehr steht, und aktivieren Sie „Wasserzeichen aus Datei hinzufügen“. Direkt darunter legen Sie die Transparenz fest: „0“ steht für volle Transparenz,
„255“ für keine. Mit einem Wert von 50 liegen Sie richtig. Klicken Sie danach auf „…“
und navigieren Sie zu der Grafik, die als Wasserzeichen eingefügt werden soll. Wählen
Sie Ausgabeverzeichnis und -format und bestätigen Sie mit „Weiter“.
Webgalerie anlegen: Markieren Sie alle gewünschten Bilder in der Vorschau
und wählen Sie im Menü „Assistenten“ den
Eintrag „Fotoalbum für das Web erstellen“.
Bestätigen Sie mit „Weiter“. Tragen Sie
einen Namen für die fertige HTML-Datei ein
und bestimmen Sie Speicherort und Ausgabeformat. Wählen Sie als Format „JPG“. Passen Sie die restlichen Optionen, etwa Hintergrundfarbe, Rahmen der Miniaturen oder die
Anzahl der Spalten für die Vorschaubilder,
Ihrem Geschmack an. Mit „Weiter“ legt der
Photo Commander die Galerie an.
3
4
4
6
5
Rote Augen: Markieren und bestätigen – so einfach entfernen Sie
rote Augen aus falsch belichteten Fotos.
2
Wasserzeichen: Versehen Sie Ihre
Bilder im Web mit Wasserzeichen,
um sie vor Missbrauch zu schützen.
5
21
VOLLVERSION: WEBSITE X1
Schritt für Schritt: Homepage aufbauen
Vorbereitungen: Über die Designvorlagen legen Sie ganz einfach das
Aussehen Ihrer Website fest.
1
1
Vorbereitungen: Drücken Sie im Willkommensbildschirm auf „Weiter“. Benutzen Sie WebSite X1 zum ersten Mal, wählen Sie „Erstellen eines neuen Projektes“.
Tragen Sie einen Titel für Ihre Seite sowie
Namen und E-Mail-Adresse ein. Bestimmen
Sie anschließend, ob sich das Menü für Ihre
Website links oder am oberen Rand des
Browsers befinden soll. Im letzten Schritt
wählen Sie eine Designvorlage aus und bestimmen die Farbgebung.
Seitenstruktur anlegen: Mit der Sitemap legen Sie fest, wie viele Unterseiten Ihre Website haben soll. Klicken Sie im
Hauptfenster von WebSite X1 auf „Menü“,
wählen Sie rechts „Neue Seite“ und vergeben Sie einen Namen. Achtung: Der Name
ist als Seitentitel für alle Besucher sichtbar,
er sollte also aussagekräftig sein. Übrigens:
„Homepage“ ist die Startseite, sie lässt sich
nicht löschen, aber umbenennen. Sind alle
Seiten angelegt, klicken Sie auf „Weiter“.
Seitenlayout erzeugen: An dieser Stelle
gestalten Sie das Grundraster jeder einzelnen Seite. Über die blauen Icons oberhalb
2
3
3
Upload: Zum Hochladen der Dateien
auf Ihren Webspace tragen Sie
nur noch Name, Passwort und Server ein.
der Hauptseite können Sie neue Spalten und
Zeilen hinzufügen. Ziehen Sie danach die gewünschten Elemente von rechts auf das Raster. Haben Sie ein Bildelement auf die Seite
gezogen, klicken Sie zweimal darauf. Wählen Sie das Bild, das an dieser Stelle zu sehen sein soll. Bei einem Textelement können
Sie den Text direkt in WebSite X1 schreiben.
Drücken Sie „OK“. Um die Seite mit einem
Einblendeffekt zu versehen, klicken Sie oben
auf das Sternchensymbol, wählen Überblendung und Anzeigedauer und bestätigen mit
„OK“. Wiederholen Sie diesen Vorgang für
alle Seiten Ihrer Homepage.
Erweiterte Einstellungen: Um zu prüfen, wie die Website im Browser aussieht, klicken Sie oben auf „Test“ und bestätigen den Hinweis mit „OK“. Sollte der Internet Explorer eine Hinweisleiste ausgeben,
klicken Sie darauf und wählen „Geblockte
Inhalte zulassen“. Klicken Sie anschließend
in WebSite X1 auf „Menü der ersten Stufe“.
In der Registerkarte „Allgemein“ legen Sie
fest, ob das Menü einen Rahmen haben soll.
Unter „Text“ bestimmen Sie Schriftart und :
-größe der Menü-Einträge, in der Registerkarte „Farben“ legen Sie die Schriftfarbe und
die Farbe der Menüauswahl fest. Bestätigen
Sie mit „OK“. Unter „Seitentitel“ können
Sie noch Schriftart und -farbe der Seitenbeschreibung ändern, unter „Bildlaufleiste“
die Scroll-Leisten für Ihre Seite anpassen.
Website uploaden: Im letzten Schritt
stellen Sie Ihre neue Homepage ins Internet. Auf der Website Ihres Providers finden
Sie den Namen des FTP-Servers; Passwort
und Benutzername haben Sie vom Provider
bereits erhalten. Um die Homepage hochzuladen, wählen Sie in WebSite X1 „Export der
Webseite ins Internet“ und bestätigen mit
„Weiter“. Tragen Sie nun die Zugangsdaten
ein. Der Eintrag „Zielverzeichnis“ muss zumeist nicht ausgefüllt werden, ansonsten
entspricht er in der Regel Ihrer Subdomain.
Weitere Hinweise erhalten Sie von Ihrem
Provider. Drücken Sie „Weiter“. Im letzten
Schritt können Sie – sofern vorhanden – ein
Verzeichnis auf dem Webserver für die Veröffentlichung auswählen. Beginnen Sie den
Upload der Website danach mit „Starten“.
Seitenlayout: Per Drag & Drop legen
Sie Art und Platzierung der einzelnen
Elemente für jede Unterseite fest.
4
5
5
NACHFOLGER AUF HEFT-CD
Seitenstruktur: Neue Unterseiten
legen Sie per Mausklick an und
benennen Sie nach Belieben.
2
Details: Die Gestaltung einzelner
Elemente, etwa der Scroll-Leisten,
können Sie Ihrem Geschmack anpassen.
4
Neue Version: Auf der Heft-CD finden
Sie eine Testversion des aktuellen WebSite X5 inklusive Einleitungs-Tutorial.
Die neue Version ist in vielen Belangen
verbessert: Sie bietet statt 20 rund 500
Designvorlagen. Zudem lassen sich jetzt
auch Untermenüs erzeugen; die Beschränkung auf 24 Unterseiten wurde
aufgehoben. An Elementen sind unter
anderem Slideshows, Rollover-Effekte,
Tabellen und Formulare hinzugekommen; außerdem lassen sich die Seiten
per Passwort schützen.
JOOMLA
Einfache Homepage-Pflege per CMS
Features:
k Websites einfach mit Inhalt füllen
k Automatischer Einbau ins Layout
k Beliebig erweiterbar
Beschreibung: Webseiten, die häufig aktualisiert werden müssen, sind mit einem
HTML-Editor nur umständlich zu pflegen.
Ein neuer Beitrag erfordert unter Umstän-
den einen neue Seite,
der Text muss formatiert, Bilder müssen
eingebaut
werden.
Mit einem ContentManagement-System
(CMS) wie Joomla ist
das alles kein Problem. Ist das Grundlayout einmal angelegt, braucht es nicht
mehr geändert zu
werden. Alle neuen
Beiträge lädt der Autor über das JoomlaWebinterface hoch –
das Einpflegen übernimmt das CMS. Änderungen lassen sich
von jedem PC aus vornehmen, gleichzeitig
kann man am Layout der Seite arbeiten.
Tipp: Um Joomla nutzen zu können, benötigen Sie einen Apache-Webserver mit PHP
und MySQL. Auf der Heft-CD finden Sie das
Paket XAMPP, das alle Komponenten enthält
und sich auch lokal installieren lässt.
Galerien erzeugen
Features:
k Auto-Galerien mit HTML
k Diverse Effekte
k Zahlreiche Bildformate
Beschreibung: Mit der Freeware Gallery
Wizard legen Sie spielend leicht Fotogalerien an. Die Thumbnail-Voransicht erzeugt
das Tool automatisch aus mehreren Ordnern, alle Bilder werden auf Wunsch auf
die gleiche Größe gebracht. Das integrierte FTP-Tool überträgt die Galerie direkt auf den eigenen Webserver.
Tipp: Um alle verwendeten Bilder bei Bedarf ins JPG-Format umzuwandeln, wählen Sie den Eintrag „Gallery Options | Convert non-JPG images…“.
,CD-CODE hHTML
,CD-CODE hCMS
GIMPSHOP
GALLERY WIZARD
IRFANVIEW
SPLITIMAGE
Fotos bearbeiten
Bilder betrachten
Grafik mit Hotspots
Features:
k Professionelle Bildbearbeitung
k Unterstützung von Ebenen
k Photoshop-ähnliche Oberfläche
Beschreibung: GIMPShop basiert auf der
meistgenutzten Open-Source-Bildbearbeitung GIMP. Die neue Version überzeugt
durch eine einfachere Oberfläche und bietet alle wichtigen Features wie Ebenen,
Transparenz und Web-Aufbereitung.
Tipp: Auf der Heft-CD und im Web finden
Sie Plugins für den GIMPShop. Kopieren
Sie diese ins GIMPShop-Verzeichnis unter
„share\gimp\2.0\scripts“.
Features:
k Foto, Audio, Video anzeigen
k Mehr als 60 Dateiformate
k Fotogalerien und Diashows anlegen
Beschreibung: IrfanView zeigt mehr als
60 verschiedene Dateiformate an, darunter auch Musik und Videos. Zudem generiert die Software HTML-Fotogalerien und
selbstablaufende Diashows. Abgerundet
wird das Programm durch Fotokonverter
und Bildbearbeitungs-Tools.
Tipp: Mit der Batch-Konvertierung (Menü
„Datei“) wenden Sie Funktionen wie Skalierung auf mehrere Bilder gleichzeitig an.
Features:
k Grafiken in Tabellen aufteilen
k Ideal für Navigationsmenüs
k Beliebige Aufteilung
Beschreibung: Mit SplitImage teilen Sie
beliebige Bilder in Spalten und Zeilen auf.
SplitImage legt aus den Informationen
eine HTML-Tabelle an, die die einzelnen
Stücke auf der Webseite wieder zusammensetzt. Vorteil: Jedes Teilstück lässt
sich mit einem eigenen Link versehen.
Tipp: Verwenden Sie die mit SplitImage
angelegten Bilder-Tabellen für Navigationsmenüs auf Ihrer Website.
,CD-CODE hGrafik
,CD-CODE hGrafik
,CD-CODE hGrafik
23
WORDPRESS
Professionelles Weblog-System
Features:
k Professionelles Blog-Tool
k Diverse Vorlagen und Erweiterungen
k Einfach mit Inhalten zu füllen
Beschreibung: Der eigene Blog ist für Internetfans ein Muss. Zum Füllen des Blogs
ist jedoch ein klassischer HTML-Editor zu
umständlich. An dieser Stelle kommt WordPress in Spiel: Das Tool ist ein professionelles Blogger-Programm, mit dem Sie in
regelmäßigen Abständen Text- und Bildbeiträge auf Ihrem Webspace veröffentlichen
können. Wählen Sie die
gewünschte Vorlage, und
schon können Sie Ihre
Beiträge online stellen.
In der Vorschau sehen
Sie sofort, wie andere
Surfer Ihren Blog wahrnehmen, der Upload
von Bildern erfolgt über
einen einfachen Dateidialog. Um die Anpassung ans Layout kümmert sich WordPress.
Zudem lassen sich einzelne Beiträge mit
einem Passwortschutz oder einem Kommentarfeld für Ihre Leser versehen.
Tipp: Wie bei den meisten Open-SourceProjekten gibt es auch für WordPress zahlreiche Erweiterungen (Plugins) und Themes
(Vorlagen) im Internet. Auf der Heft-CD finden Sie das Podcasting-Plugin PodPress sowie das Theme Wuhan.
Homepage planen
Features:
k Website am PC vorskizzieren
k Unterseiten einfach verlinken
k Support für Grafiktabletts
Beschreibung: Denim erleichtert Ihnen
die Planung Ihrer Homepage erheblich.
Mithilfe dieses Tools zeichnen Sie die Seitenstruktur schnell und unkompliziert am
Rechner vor und verlinken die Seiten miteinander. So vermeiden Sie Probleme bereits im voraus.
Tipp: Gehen Sie das Tutorial von Denim
durch, bevor Sie die Software einsetzen.
Es erläutert unter anderem den Umgang
mit Mausgesten, die die Arbeit mit Denim
noch einfacher machen.
,CD-CODE hWindows
,CD-CODE hCMS
PKCOLORPICKER
DENIM
BUTTONZ & TILEZ
XNVIEW
Farbhilfe für HTML
3-D-Buttons anlegen
Fotos verwalten
Features:
k Beliebige HTML-Farben erzeugen
k Auswahl über Farbpalette
k Auto-Umwandlung in Hex-Format
Beschreibung: HTML bietet nur wenige
Farbausdrücke wie „yellow“. Um nicht definierte Farben zu erzeugen, müssen diese
hexadezimal eingegeben werden. Im pkColorPicker können Sie die Hex-Codes per
Klick auf eine Farbe anzeigen lassen.
Tipp: Um sicherzustellen, dass jeder Browser die gewählte Farbe anzeigen kann, klicken Sie mit rechts auf die Tool-Oberfläche
und aktivieren „Websichere Farben“.
Features:
k Schaltflächen und Wallpaper gestalten
k Anpassen durch Schieberegler
k 3-D-Effekte
Beschreibung: Mit Buttonz & Tilez legen
Sie ganz einfach Schaltflächen und Hintergrundmuster für Ihre Website an. Dazu
stehen verschiedene Grundformen zur Auswahl; die Anpassung der Grafiken erfolgt
über Schieberegler.
Tipp: Um die Farbe eines Buttons zu ändern, klicken Sie auf „Blank Color“. Mit
dem Eintrag „Canvas Color“ definieren Sie
die Farbe des Website-Hintergrunds.
Features:
k Grafiken anzeigen und konvertieren
k Blitzschnelle Ausführung
k Mehr als 400 Grafikformate unterstützt
Beschreibung: Rund 400 Bildformate lassen sich mit Xnview öffnen – exportieren
kann das Tool in mehr als 50 Formate. Eine
integrierte Stapelverarbeitung konvertiert
und skaliert ganze Bilderkolonnen oder
versieht sie mit Effekten.
Tipp: Sie können mit Xnview blitzschnell
eine Bildergalerie fürs Web anlegen. Markieren Sie dazu den Ordner und wählen
Sie „Erstellen | Webseiten“.
,CD-CODE hGrafik
hWindows
,CD-CODE hGrafik
hWindows
,CD-CODE hGrafik
hFTP
LOUDBLOG
Eigenen Podcast aufbauen
Features:
k Podcasts einfach online stellen
k Audio-Kommentare von Hörern
k Integrierter Player für Beiträge
Beschreibung: Starten Sie Ihren eigenen
Podcast: Die Ton- oder Videodatei nehmen
Sie einfach an Ihrem Rechner auf, Loudblog sorgt für die richtige Präsentation im
Netz. Laden Sie die
Ton- oder Videodateien mit Loudblog
auf Ihren Webserver,
und tragen Sie Titel,
Beschreibung
und
Veröffentlichungszeit
ein. Das Tool stellt
die Sendung darauf
in fertigem Layout
inklusive Player auf
Ihrer Homepage bereit. Gleichzeitig legt
es einen RSS-Feed an,
den Ihre Hörer oder
Zuschauer abonnieren können.
Tipp: Sollen Ihre Hörer Audio-Kommentare
unter Ihren Beitrag stellen dürfen, aktivieren Sie bei der Veröffentlichung Ihres Podcasts in Schritt 2 den Punkt „Comments“
und wählen unter „Size limit“ den Speicherplatz, der pro Kommentar zur Verfügung
steht. Bedenken Sie, dass alle Kommentare
Platz auf Ihrem Webserver belegen.
Offline browsen
Features:
k Websites offline ansehen
k Automatischer Komplett-Download
k Zeit und Kosten sparen
Beschreibung: WinHTTrack lädt komplette Webseiten inklusive aller Unterseiten, Bilder und aller weiteren Elemente in
einem Zug auf Ihren Rechner. Die Seitenstruktur bleibt dabei erhalten. So können
Sie bequem offline surfen, ohne auf die
Verbindungskosten achten zu müssen.
Tipp: Nachdem Sie Projektnamen und
Speicherort bestimmt haben, legen Sie
fest, welche Inhalte Sie laden möchten.
Aktivieren Sie „Get separated files“, um
nur einen Dateityp herunterzuladen.
,CD-CODE hWindows
,CD-CODE hCMS
AUDACITY
WINHTTRACK
WINDOWS MEDIA
ENCODER
RIVA FLV ENCODER
Sound bearbeiten
Videos umwandeln
Webfilme herstellen
Features:
k Vielseitiger Sound-Editor
k Beherrscht alle wichtigen Tonformate
k Zahlreiche Effektfilter
Beschreibung: Der Audio-Editor Audacity
zeichnet auf, mischt Tonspuren oder variiert die Abspielgeschwindigkeit. Zudem
bietet das Tool diverse Filter zum Verfremden oder Beseitigen von Störungen.
Tipp: Zum Filtern von Störungen markieren Sie ein Stück, das nur Rauschen enthält, und wählen „Effekt | Rauschentfernung | Rauschprofil ermitteln“, später im
gleichen Menü „Rauschentfernung“.
Features:
k Filme und Sound verkleinern
k Streaming-Dateien anlegen
k Live-Übertragung ins Internet
Beschreibung: Konvertieren Sie Videofilme oder Tonaufnahmen ins platzsparende Windows-Media-Format. Wählen
Sie den Verwendungszweck des Films aus,
und legen Sie die Qualitätsstufe fest – den
Rest erledigt das Tool.
Tipp: Dank des geringen Platzbedarfs eignet sich das Windows-Media-Format ideal
fürs Internet. Stellen Sie für die Verwendung im Web Bitraten unter 300 KBit ein.
Features:
k Erzeugt Flash-Filme
k Einfache Anwendung
k Online-Streaming möglich
Beschreibung: Der Riva FLV Encoder konvertiert Videos in das Flash Video Format
(FLV), das auch professionelle Videodienste wie YouTube nutzen. Über den integrierten Videoplayer können Sie das Ergebnis sofort ansehen.
Tipp: Unter „Vorlage” legen Sie fest, für
welche Verbindung der Film optimiert
wird. Damit etwa auch ISDN-Nutzer den
Film sehen können, wählen Sie ISDN.xml.
,CD-CODE hWindows
,CD-CODE hWindows
,CD-CODE hWindows
25
ABSCHIED VOM PAPIERDENKEN
Richtig planen und aufbauen
S
urfer und Webdesigner – alle erleben das Web zunächst mit einer
durch zwei Erfahrungen geprägten
Erwartungshaltung: Sie lässt sich am besten mit „Papierdenken“ beschreiben.
● Der Autor einer Papierseite hat die vollständige Kontrolle über deren Aussehen,
ob er nun eine teure Hochglanz-Firmenbroschüre gestaltet oder sich an seiner
ersten Einladungskarte versucht.
● Nach der Fertigstellung wird eine Papierseite unverändert vervielfältigt und
sieht – abgesehen von Kaffeeflecken, Vergilbungen und anderen marginalen
Schwankungen – grundsätzlich bei jedem Betrachter gleich aus.
Das Papierdenken erwartet zwei Dinge: die Kontrolle über das Layout und die
Unveränderlichkeit nach der Fertigstellung. Aber das Web ist nicht aus Papier –
und eine Webseite verhält sich anders als
eine Papierseite:
● Der Autor einer Webseite hat keine vollständige Kontrolle über deren Aussehen.
Letztlich bestimmt der Surfer das Aussehen (und das Verhalten) der Webseite in
seinem Browser, der Autor kann lediglich
Wünsche äußern.
● Nach der Fertigstellung sieht eine Webseite bei jedem Benutzer anders aus.
Diese beiden simplen Tatsachen sind
für viele so ungewohnt, dass wir sie anhand eines kleinen Beispiels kurz erläutern wollen – denn Papierdenken führt
beim Umgang mit Webseiten unweigerlich zu enttäuschten Erwartungen.
Unterschied 1: Der Autor einer Webseite
hat keine vollständige Kontrolle
Der erste grundlegende Unterschied zwischen Papier- und Webseiten besteht darin, dass der Autor einer Webseite keine
vollständige Kontrolle über das Aussehen
der Webseite im Browser des Betrachters
hat. Er kann nur Wünsche äußern. Das
klingt übertrieben? Ein einfaches Beispiel:
Auf dem Papier bestimmt der Autor die
Schriftgröße, im Internet nicht.
In jedem Webbrowser kann der Benutzer – meist irgendwo im Menü „Ansicht“
– die Schriftgröße auf der Webseite ändern, was das Lesen am Monitor wesentlich erleichtert. Eine auf der Basis von Papierdenken gebaute Webseite fällt dadurch
leicht auseinander, eine mediengerechte
dagegen passt sich an.
Das Papierdenken ist bei den meisten
Surfern so tief verankert, dass sie beim
Verändern der Schriftgröße auf einer
Webseite fast ein schlechtes Gewissen haben. Besonders wenn die Webseite danach
unleserlich ist, schießt schnell der Gedanke
durch den Kopf: „Oops, jetzt habe ich was
kaputt gemacht!“ Erst sehr langsam gewöhnt man sich daran, dass es sehr prak-
Beim Aufbauen einer Homepage müssen Sie von ganz anderen Voraussetzungen ausgehen als
beim Schreiben eines Textes. Hier die wichtigsten Unterschiede zwischen Papier- und Webseiten.
rufenen Webseiten angezeigt. Wie gesagt,
der Autor hat keine vollständige Kontrolle
über die Webseite.
Die Beschriftung der Schaltfläche „Eingabehilfen…“ im Internet Explorer ist übrigens das Ergebnis einer kreativen Übersetzung. In der englischen Version steht
dort „Accessibility“, und eine adäquate
Übersetzung dafür wäre „Zugänglichkeit“
oder „Barrierefreiheit“.
Unterschied 2: Webseiten sehen
bei jedem Benutzer anders aus
tisch ist, einen Text am Bildschirm mit größerer Schrift zu lesen – und dass es nicht
unsere Schuld ist, wenn die Webseite nach
der Änderung der Schriftgröße nicht mehr
funktioniert, sondern dass sie dann einfach nicht mediengerecht gebaut wurde.
Der Einfluss des Surfers auf das Aussehen einer Webseite geht aber noch viel
weiter. Im Internet Explorer gibt es im
Menü „Extras | Internet-Optionen“ auf
der Registerkarte „Allgemein“ die unscheinbare Schaltfläche „Eingabehilfen“.
Jeder Surfer kann an dieser Stelle dafür
sorgen, dass sein Browser die vom Autor
auf den Webseiten gemachten Angaben
zu Schriften und Farben komplett ignoriert. Probieren Sie es einmal aus: Betrachten Sie Webseiten einmal ganz ohne die
vom Webdesigner festgelegten Farb- und
Schriftangaben. Die Auswirkungen sind
sehr unterschiedlich: Einige Webseiten
werden dadurch unbedienbar – und andere sind sogar besser lesbar als vorher.
Aber was auch passiert: Wenn die Webseite danach nicht mehr funktioniert, ist das
nicht Ihre Schuld. Sie ist dann eben mit
Papierdenken gebaut worden.
In der unteren Hälfte des Dialogfeldes
kann der Benutzer sogar ein eigenes Stylesheet (CSS) einbinden. Mit diesem Stylesheet werden dann alle im Browser aufge-
Der zweite grundlegende Unterschied zwischen Papier- und Webseiten besteht darin, dass Webseiten im Gegensatz zu Papierseiten bei jedem Betrachter anders
aussehen. Der Artikel dagegen, den Sie gerade lesen, wurde einmal gelayoutet und
dann unverändert vervielfältigt − er sieht
bei jedem Leser gleich aus. Bei Webseiten
ist das anders.
Der Grund liegt darin, dass eine Webseite nicht so ausgeliefert wird, wie der
Surfer sie im Browserfenster sieht. Der
Browser erhält vom Webserver lediglich
den Quelltext, eine Art Bauplan. Diesen
Bauplan analysiert der Browser und stellt
die Seite so gut wie möglich dar.
Wenn Sie eine Homepage gestalten, erzeugen Sie Quelltext – auch wenn Sie
dieses Wort vielleicht noch nie gehört und
auch noch keinen Quelltext gesehen haben, weil Sie einen Homepage-Baukasten
oder einen visuellen Editor verwenden.
Beim Hochladen der fertigen Seite auf
den Webserver übertragen Sie nur den
Quelltext und nicht die Seite, wie sie im
Baukasten oder im Editor ausgesehen hat.
Der Quelltext ist also in gewisser Weise
die eigentliche Webseite.
In jedem Browser gibt es im Menü
„Ansicht“ einen Befehl namens „Quelltext“ oder „Seitenquelltext“, über den man
sich den Bauplan der gerade angezeigten
Webseite ansehen kann. Der Browser
nimmt diesen Bauplan und setzt ihn um
– so gut es, je nach Umgebung, geht. Der
Inhalt der Webseite sollte dabei immer zugänglich bleiben, egal ob diese auf einem
uralten Laptop oder auf einem modernen
Flatscreen dargestellt wird.
Was Sie im Browserfenster als Webseite
sehen, ist also nur die Interpretation des
gerade benutzten Browsers auf dem gerade verwendeten Computer mit den gerade
aktuellen Einstellungen.
Webseiten sehen also zwangsläufig
überall anders aus, weil der Quelltext je
nach Umgebung verschieden interpretiert
werden muss.
Woran Sie denken sollten, damit Ihre
Homepage möglichst flexibel wird
Die folgende Geschichte basiert auf einem
Text von Michael Nahrath, den dieser vor
einigen Jahren in einer Newsgroup veröffentlichte, um anderen Surfern den Unterschied zwischen traditionellen Printmedien und dem Web zu erläutern:
● Sie gehen morgens aus dem Haus und
kaufen sich eine Zeitung.
● In der Straßenbahn ist es eng, Sie haben
wenig Platz. Die Zeitung verkleinert sich
automatisch auf das Format DIN A5.
● Auf dem Fußmarsch zum Büro genießen Sie die Umgebung und lassen sich
von Ihrem MP3-Player einen zuvor markierten Artikel vorlesen.
● Im Büro auf dem Schreibtisch vergrößert sich die Zeitung von selbst – etwa auf
das Format DIN A2.
● Abends geben Sie die Zeitung Ihrer
Oma, die den Schriftgrad verdoppelt und
als Schriftart Sütterlin einstellt, weil sie
diese Schrift am liebsten liest.
Und das alles mit ein und derselben
Zeitung. Praktisch, nicht?
Jede Webseite ist von Natur aus so flexibel wie diese Zeitung. Die Workshops
auf den folgenden Seiten helfen Ihnen
dabei, Ihre Homepage ebenso flexibel und
benutzerfreundlich zu gestalten.
Peter Müller
Peter Müller, Dozent und
Autor, beschäftigt sich bereits seit 1995 mit dem Web
und schrieb einige erfolgreiche Bücher rund um das
Thema Webpublishing. Sein
neuestes Werk heißt „Little
Boxes. Webseiten gestalten
mit CSS. Grundlagen.“ Dieser Artikel basiert auf dem ersten Kapitel
von „Little Boxes“. Das Buch ist der ideale
Einstieg für alle, die mit HTML und Cascading Style Sheets moderne Webseiten aufbauen möchten. Rezensionen, Tipps und
weitere Informationen finden Sie unter
http://little-boxes.de.
27
SO WIRD IHRE SEITE BEDIENERFREUNDLICH
Schnelle Orientierung
Beim Aufbau einer Webseite gibt es eine Reihe von Standards, die Sie unbedingt beachten
sollten. CHIP zeigt Ihnen, auf welche Usability-Regeln es ankommt, damit sich die Besucher auf
Ihrer Homepage wohlfühlen. Denn der erste Eindruck ist – wie so oft – entscheidend.
AUF EINEN
EINENBLICK
BLICK
, Die besten Usability-Tipps
Die Quasi-Standards im Web
s28
Warum Sie auch an Surf-Neulinge und
Silver Surfer denken sollten
s29
Was Sie unbedingt vermeiden sollten:
die Top 10 der Webdesign-Pannen s30
nicht finden wird, verabschiedet er sich
sogar noch früher.
Die ersten fünf Sekunden
entscheiden
Das wichtigste Kriterium für ein längeres
Verweilen des Besuchers: Die Seite muss
alle Informationen, die sie vermitteln will,
klar und prägnant darstellen, damit sie
leicht zu erfassen sind.
Jakob Nielsen, der Experte in Sachen
Web-Usability, hat einen simplen FünfSekunden-Test entwickelt. Wählen Sie eine
Webseite aus, definieren Sie das Ziel beziehungsweise die Aussage dieser Seite
und zeigen Sie sie fünf Sekunden lang
einem Test-User. Danach lassen Sie ihn als
Erstes alles beschreiben, was er sich merken konnte, und stellen ihm anschließend
konkrete Fragen zum Inhalt. So erkennen
Sie recht schnell, welche Inhalte dieser
Website als Erstes ins Auge stechen und ob
sie sich mit Ihren Erwartungen decken.
Bekannte Websites etablieren
Quasi-Standards
Geprägt durch große, internationale Webseiten wie Google, eBay oder Amazon haben sich im Internet bereits Quasi-Standards etabliert, welche die Surfer bei
ihren Streifzügen auch von anderen Webseiten erwarten.
So hat Google bei der Platzierung der
Suchmaske durch sein minimalistisches
Design und das zentrierte Eingabefeld
klare Standards gesetzt, denen auch die
anderen großen Seiten gefolgt sind. Bei
Amazon etwa befindet sich das Suchfeld
E
s gibt eine ganze Reihe von Studien
über die durchschnittliche Verweildauer eines Surfers auf einer Webseite. Die Zahlen in diesen Untersuchungen reichen dabei von nur acht Sekunden
bei Nielsens Netrating bis hin zu zwölf
Sekunden bei Forrester Research. Vermittelt eine Seite dem Besucher gleich
beim Betreten den Eindruck, dass er hier
die gewünschten Informationen wohl
in der Mitte des oberen Fensterbereichs,
bei eBay in gleicher Höhe, allerdings ein
wenig weiter rechts.
So gibt es noch eine Reihe weiterer
Standards, die sich aus unterschiedlichen
Beispielen entwickelt haben. Der Weg zurück zum Anfang, der Homelink, ist bei
den meisten Webseiten in der linken oberen Ecke zu finden, oftmals in Verbindung
mit dem Logo der Firma.
In dieser Ecke befindet sich auch häufig der Login zu einer Webseite. Allerdings
ist an dieser Stelle bereits wieder eine neue
Tendenz zu beobachten, nach welcher der
Login auf der rechten Seite, entweder in
der oberen Ecke oder auch ein wenig darunter, zu finden ist. An dieser Stelle
scheint der Besucher also noch ein wenig
flexibler zu sein.
Aber wie sieht es mit anderen Funktionen aus? Überlegen Sie selbst, wo Sie
den Einkaufswagen, den Link zur Hilfe
oder den Link zu Ihrem Benutzerkonto
oder Profil erwarten. Lassen Sie Ihre Lieblingswebseiten vor Ihrem geistigen Auge
Revue passieren, und Sie kommen immer zur gleichen Antwort: in der rechten oberen Ecke.
Die Navigationselemente
sinnvoll anordnen
Nicht weniger wichtig als das Berücksichtigen der Quasi-Standards ist eine gut
durchdachte Navigation, die funktional
und nicht zu verspielt ist (mehr zum
Thema Navigation lesen Sie ab s32).
Noch vor ein paar Jahren waren Navigationsmenüs auf Basis von DHTML der
letzte Schrei. Heute sind die meisten großen Seiten dazu zurückgekehrt, ihre Navigation statisch im oberen Drittel der
Seite anzubringen. Die Anordnung der
In der Mitte: Google
hat mit seinem
minimalistischen Design die Position
der Suchmaske
und die Funktionalität geprägt.
Links oben: In der
linken oberen Ecke
sollten Sie ein Logo
mit der „Home“funktion platzieren.
Rechts oben: Warenkorb, Hilfe und Login erwarten die meisten User in der
rechten oberen Ecke.
ersten Ebene ist bei den meisten großen
Webseiten ähnlich gelöst, deutliche Unterschiede sind jedoch bei der zweiten
Navigationsebene zu finden. Das lässt sich
am Beispiel der beiden beliebtesten Nachrichtenseiten im Internet belegen: Spiegel
Online und Bild.de.
Die Navigation der ersten Ebene ist
bei beiden Internetauftritten ähnlich gehalten und befindet sich im oberen Drittel. Spiegel Online verwendet für die
oberste Ebene, die etwa die Rubriken
„Nachrichten“, „Videos“ oder auch das
„Forum“ enthält, farblich abgesetzte Registerkarten. Bild.de hebt den aktiven Bereich als Registerkarte hervor, alle anderen Bereiche sind auf einem schwarzen
Balken angeordnet.
Auch auf der zweiten Ebene herrscht
Einklang zwischen den beiden Seiten. Beide präsentieren in einer weiteren Reihe die
Themenbereiche unterhalb der Hauptkategorie und geben Usern sofort einen guten
Überblick ohne technische Spielereien.
Spiegel Online bietet seinen Besuchern
eine dritte Ebene an, die durch den Mauszeiger aktiviert wird und das Öffnen eines
Menüs auslöst.
Zum Standard haben sich inzwischen
auch die sogenannten „Brotkrümel“ entwickelt – der zurückgelegte Navigationspfad. Er soll den Besuchern die Orientierung über den aktuellen Standort erleichtern. Amazon zeigt etwa nach einer Suche
noch bestimmte Rubriken an, über die Sie
auch zu dem Produkt gelangen können.
Gleiches gilt etwa für die Nachrichten auf
Spiegel.de. Da viele News über Teaser zugänglich sind, ist eine zusätzliche Informationsquelle über den aktuellen Standort oft mehr als hilfreich.
Hilft auch das nicht mehr weiter, sollte
es einen zentralen Button geben, über den
der Besucher an den Ausgangspunkt zurückgelangt. Die meisten Surfer erwarten
ihn in der linken oberen Ecke. Ist er dort
nicht zu finden, ist für das erste Frusterlebnis gesorgt.
Auch an die InternetNeulinge denken
Navigation: Die
erste Ebene der
Navigation ist häufig
mit Registerkarten, die zweite mit
Textlinks aufgebaut
– in der Abbildung
die Lösungen von
Spiegel Online und
Bild.de.
Diese Standardelemente und deren genormte Platzierung sind vor allem für erfahrene Internetanwender hilfreich. Ein
wenig anders sieht das Ganze jedoch bei
Neulingen in Sachen Internet aus. Sie
sollten ihnen ihre ersten Schritte im Internet so einfach wie möglich machen.
Den Weg auf Ihre Webseite haben Internet-Neulinge meist über eine Suchmak
schine gefunden.
29
„Brotkrume“ bei Spiegel Online und Amazon.de: Gerade bei großen Webseiten ist ein
Navigationspfad – in Anlehnung an die Brüder Grimm „Brotkrume“ genannt – sehr hilfreich,
damit der Besucher seinen aktuellen Standort erkennen kann.
Versuchen Sie, Ihre Besucher nicht
mit technischen Fragen nach Auflösung
und Browserversionen zu überfordern.
Diese Dinge müssen automatisch im
Hintergrund laufen. Kritisch ist auch das
Angebot, Plugins zur Anzeige von Inhalten zu installieren, etwa Flash. Viele Einsteiger wissen weder, was ein Plugin ist,
noch, was Flash ist. Wohl aber haben sie
schon davon gehört, dass sie nichts aus
dem Internet installieren sollen, bei dem
sie den Absender nicht kennen. Seien Sie
also sparsam im Umgang mit Plugins,
sonst könnte der Besucher bereits vor
dem Schritt in Ihr virtuelles Wohnzim-
mer wieder kehrtmachen. Ist er aber erst
einmal in der guten Stube, sollten Sie ihm
den Rundgang auf Ihrer Webseite einfach
machen. Die Links sollten klar erkennbar
sein – ebenso wie die anderen Navigationselemente.
Rücksicht nehmen auf die
Silver Surfer
Inzwischen erreicht das Internet mit älteren Leuten und Senioren eine weitere
Bevölkerungsgruppe, die zusätzliche Anforderungen an die Gestaltung von Webseiten stellt. Denn sie bewegen sich im
Internet meist auf unbekanntem Terrain,
das sie jedoch in der Regel sehr engagiert
erforschen möchten.
Wichtig sind dabei Hilfe-Seiten und
FAQs, die die einzelnen Bereiche und
Funktionen Ihrer Webseite erläutern.
Achten Sie beim Zusammenstellen der
Dokumentation darauf, dass Sie kein
Grundwissen voraussetzen und keine
technischen Kenntnisse erwarten. Halten
Sie sich also nach Möglichkeit mit Fachbegriffen zurück – eine Hilfe ist schließlich nur dann eine Unterstützung, wenn
sie auch verstanden und begriffen wird.
Bei der Navigation sollten Sie darauf
achten, dass die Feinmotorik im Alter
nachlässt. Gerade DHTML-Menüs erfordern etwas Geschick und sollten nicht
nur deshalb eher sparsam eingesetzt werden. Achten Sie auch auf ausreichend
große Navigationsflächen und Verlinkungen, etwa innerhalb von Texten.
Da auch die Sehkraft im Alter nachlässt, sollten Sie die Schriftart keinesfalls
zu klein wählen und nach Möglichkeit
auch für einen guten Kontrast zwischen
KNOW-HOW
Die populärsten Webdesign-Fehler
Einer der bekanntesten Vordenker im Bereich
Webdesign-Usability ist Jakob Nielsen (www.
useit.com), der auf seiner Seite zahllose
Tipps und Tricks zum Thema publiziert. Von
ihm stammen auch die Top 10 der häufigsten
Fehler zum Thema Webdesign und Usability.
Die Hitliste von Jakob Nielsen entstand aufgrund einer Umfrage unter den Lesern seines
Usability-Newsletters. Sehen Sie sich Ihre
Webseite einmal sehr genau an und fragen
2
und farblich abgehoben zu geben. Dies sieht
vielleicht besser aus, führt aber häufig zu
hektischen Mausbewegungen bei der Suche
nach dem Hyperlink. Zeigen Sie Ihrem Besucher besuchte und unbesuchte Links in unterschiedlicher Farbgebung an. Nutzen Sie
den Anchor-Text eines Links, um das Ziel näher zu beschreiben.
Sie sollten beim Verlinken von Seiten darauf achten, dass diese möglichst kein neues
Fenster öffnen. Lediglich bei externen Daten
und Dokumenten, etwa PDF-Dateien, ist
dies sinnvoll.
Useit.com: Jakob Nielsen, einer der Vordenker
von Usability im Internet, veröffentlicht auf
seiner Website Tipps
und Tricks für bessere
Homepages.
FLASH-ANIMATIONEN
Beim Thema Flash geht Nielsen mit den
Webdesignern hart ins Gericht. Es gibt immer
noch viele Seiten, die Flash lediglich für nette
Animationen nutzen, die jedoch keinen Mehrwert bieten und vom Besucher meist einfach
übersprungen werden.
Flash bietet jedoch deutlichen Mehrwert
bei Funktionen, die statische Seiten nicht
bieten können. Genau an dieser Stelle sollte
die Technologie eingesetzt werden. Denken
Sie jedoch daran, dass Ihre Benutzer nicht
zwangsläufig das Flash-Plugin besitzen, und
bieten Sie daher zusätzlich eine statische
Seite an.
Sie sich, ob der eine oder andere Kritikpunkt
nicht auch bei Ihnen zu finden ist.
DARSTELLUNGSPROBLEME
Mit klarem Abstand auf Platz 1 landeten
die Probleme beim Lesen der Seiten. Sie haben im Wesentlichen zwei unterschiedliche
Ursachen: zu kleine Schriftgrößen und zu geringen Kontrast zwischen der Schrift und
dem Hintergrund.
1
HYPERLINKS
Beim Verlinken von
Inhalten gilt es, einige
Stolpersteine zu umgehen. Seit der Einführung
von Cascading Style
Sheets (CSS) ist es populär geworden, den Hyperlinks eine andere Formatierung als unterstrichen
3
der Farbe der Schrift und dem Hintergrund sorgen.
Gestalten Sie Ihre Seiten
barrierefrei
Die Optimierung von Inhalten auf Webbrowsern sollte auch nicht die Menschen
mit Behinderung ausschließen, die statistisch etwa ein Zehntel der Bevölkerung
Deutschlands ausmachen.
Die W3C hat eine Web Content Accessibility Guideline (www.w3c.de/Trans/
WAI/webinhalt.html)
herausgegeben.
Diese Guideline enthält Empfehlungen
für die behindertengerechte Darstellung
der Webseiten und soll gewährleisten,
dass Internetseiten beispielsweise auch
über einen reinen Textbrowser ihre Inhalte
preisgeben (mehr zum Thema „Barrierefreies Webdesign“ lesen Sie im Artikel ab
s42).
Barrierefreie Webseiten haben jedoch
nicht nur die Zielgruppe behinderter
Menschen im Visier, sondern sollen die
Inhalte der Webseite möglichst auf allen
NICHT WEBKONFORME INHALTE
Die Sprache des Internets sollte kurz und
prägnant sein und Inhalte allgemein verständlich vermitteln. Auf Marketing-Floskeln sollten Sie nach Möglichkeit verzichten und versuchen, Produktbeschreibungen zwar emotional, aber trotzdem knapp und klar zu formulieren. Der Benutzer sollte nach dem Lesen
eines Textes gut informiert sein, beispielsweise über die wesentlichen Funktionen eines
Produkts.
4
aktuellen Webbrowsern fehlerfrei darstellen können – vom reinen Textbrowser
über den Browser im UMTS-Mobilfunktelefon bis hin zur neuesten Version der
gängigen Webbrowser.
Mit barrierefreien Webseiten erreichen
Sie also das größtmögliche Zielpublikum
und sorgen darüber hinaus für eine fehlerfreie Darstellung Ihrer Informationen
selbst auf einem altersschwachen Browser, der weder mit DHTML noch mit Cascading Style Sheets zurechtkommt.
Dafür ergeben sich neben dem erweiterten Besucherkreis noch einige zusätzliche Vorteile für Sie: Webseiten mit einem
hohen Textanteil und einer sauber programmierten Darstellung haben in der
Regel eine deutlich bessere Indizierungsquote bei den Suchmaschinen als grafisch
optimierte Webseiten (mehr zum Thema
Suchmaschinen lesen Sie ab s102).
Auch das eigentliche Zielpublikum –
die Menschen mit Behinderung – profitieren von diesen Seiten. Sie haben die
Möglichkeit, sich Texte aus dem Internet
auf Basis von assistiven Techniken ver-
fox sollten Sie zumindest diesen Alternativbrowser in die Überprüfung des Aussehens
Ihrer Homepage einbeziehen und Ihre Seiten
für ihn optimieren.
SCHLECHTE SUCHFUNKTION
Viele Homepage-Betreiber bieten ihren
Gästen eine Suche an, die nur unzureichend
funktioniert. Oft findet sie wesentliche Inhalte
der Webseite nicht, oder der verwendete Index ist schlecht aufgebaut, etwa wenn relevante Such- oder ähnliche Begriffe nicht zum
Ziel führen. Eine Trefferrelevanz erleichtert
gerade bei großen Seiten nicht nur das Auffinden von Inhalten, sondern hilft darüber hinaus, schnell die richtigen Inhalte zu finden.
ZU NEUGIERIGE FORMULARE
Formulare im Internet fragen in der Regel
zu viele Informationen ab, die nicht immer
wirklich erforderlich sind. Nielsen gibt Ihnen
folgende Regeln mit auf den Weg:
● Verzichten Sie auf unnötige Fragen.
● Gehen Sie sparsam mit Pflichtfeldern um.
● Verwenden Sie Standard-Feldbezeichner
wie „Name“ oder „Straße“, damit die AutoFill-Funktion des Browsers funktioniert und
die Benutzer so wenige Daten wie möglich
eingeben müssen.
● Platzieren Sie den Cursor ins erste Feld,
und achten Sie darauf, dass die Reihenfolge
der Eingabefelder korrekt ist.
● Bieten Sie eine freie Eingabe von Werten
wie Telefonnummern an, und zwingen Sie den
Besuchern keine unnötigen Formate auf.
BROWSER-INKOMPATIBILITÄT
Auch im Jahr 2006 ist dies immer noch ein
Thema. Zwar ist der Internet Explorer nach
wie vor der Browser Nummer 1. Doch angesichts der wachsenden Nutzerzahlen von Fire-
MANGELNDE TRANSPARENZ
Das Problem, das Nielsen an dieser Stelle
anspricht, trifft auf deutsche Webseiten aufgrund der aktuellen Gesetzeslage nicht so
häufig zu. Denn in Deutschland sind die Be-
5
6
7
8
mitteln zu lassen, etwa über einen Screenreader oder über eine Braillezeile.
Damit wirklich jeder Surfer Spaß beim
Besuch Ihrer Webseite hat und nicht nach
wenigen Sekunden das Weite sucht, zeigen wir Ihnen in dem Know-how-Kasten
unten, welche Stolpersteine auf dem Weg
zur perfekten Webseite auf Sie warten und
wie Sie die gröbsten Schnitzer beim Webdesign vermeiden können.
Fazit
Es ist noch kein Meister vom Himmel gefallen. Bei einem Streifzug durchs Internet finden Sie selbst bei den großen Webseiten noch den einen oder anderen Fehler, der unten beschrieben ist. Doch keine
Sorge – wenn Sie die Hinweise aus diesem
Artikel beachten, sind Sie gut gerüstet.
Wer zusätzlich Informationen oder Lesestoff benötigt, findet etwa bei Jakob Nielsen (www.useit.com) noch einige weiterführende Workshops und einen Newsletter, die sich allesamt mit der Thematik
Andreas Hitzig
„Usability“ beschäftigen.
treiber kommerzieller Seiten verpflichtet, in
einem Impressum wenigstens die grundlegenden Adressdaten anzugeben. Eine zusätzliche Telefonnummer und ein namentlich benannter Ansprechpartner stärken das Vertrauen Ihrer Besucher.
STATISCHE SEITENLAYOUTS
Seiten sollten sich immer an der Bildschirmauflösung des Betrachters orientieren
und keine feste Auflösung vorgeben. Horizontale Scrollbalken sind ebenso inakzeptabel
wie hohe Auflösungen und Webseiten, die
sich nicht der Größe der Seite anpassen.
Beim Testen sollten Sie auch die Druckansicht nicht vergessen – oft wird beim Drucken
der rechte Rand abgeschnitten, vor allem bei
Seiten, die sich nicht an die Monitorauflösung
des Betrachters anpassen.
9
BILDER, DIE KLEIN BLEIBEN
Vor allem in Shops, aber auch bei Produktbeschreibungen ist oft auf der Einstiegsseite ein kleines Produktbild zu sehen. Nach
dem Anklicken erwarten die Besucher eine
vergrößerte Ansicht des Bilds – allerdings
häufig vergeblich. Zwar öffnet sich dann in
der Regel ein neues Fenster, die Bildgröße
bleibt jedoch unverändert.
10
31
GESTALTEN MIT CSS
Flexible Websites
AUF EINEN
AUF
EINENBLICK
BLICK
, Gestalten mit CSS
Flow und Positionierung
s34
Navigationselemente als Reiter
in die Website einbauen
s35
Alle Tools auf CD
BEISPIELDATEIEN: Die fertigen CSSLayouts aus diesem Artikel hHTML
M
it diesem Artikel durchlaufen
Sie den gesamten Prozess der
Gestaltung einer modernen
und mediengerechten Website mit Cascading Style Sheets, im Folgenden kurz CSS
genannt: Von der grundlegenden Formatierung über die Gestaltung des Kopfbereichs und einer horizontalen Navigationsleiste bis hin zur CSS-basierten Druckversion. Letztlich bestehen Webseiten in
erster Linie aus rechteckigen Kästchen,
die mit HTML angelegt und anschließend
mit CSS gestaltet werden. Erste Voraussetzung für eine gute Website mit CSS ist
also eine korrekt aufgebaute HTML-Seite.
Der folgende Artikel basiert auf zwei
Beispielseiten, die Sie als Dateien mit den
Bezeichnungen index.html und kontakt.
html auf der CD zu diesem Heft finden.
Kopieren Sie die Files einfach in einen an-
Mit Cascading Style Sheets können Sie sich den Aufbau einer Website deutlich erleichtern.
Denn der flexible Einsatz von Schriftarten, Farben und Formatierungen ist damit ein Kinderspiel.
Zudem brauchen Sie nur wenige Zeilen Code, um ansehnliche Effekte zu erzielen.
sonsten leeren Ordner auf Ihrer Festplatte. Der Quelltext der beiden Beispielseiten
weist einige Besonderheiten auf: Ganz
oben im Head finden Sie das Element
„link“ mit einem Verweis auf das Stylesheet chip.css, das in diesem Artikel angelegt wird. Das Element „body“ besitzt in
beiden Webseiten eine eindeutige ID. Die
Startseite beginnt mit „<body id="startseite">“, die Kontaktseite mit „<body
id="kontaktseite">“. Diese ID brauchen
Sie später zum Hervorheben des aktuellen
Navigationspunkts.
Weiterhin gibt es die „div“-Bereiche.
Das „div“ bezeichnet ein Blockelement,
mit dem man andere Elemente wie Absätze, Listen und Grafiken zu einem gemeinsamen Bereich („div“ = division = Bereich) zusammenfassen kann. Anders
ausgedrückt: „div“ ist ein Container, der
mehrere andere Container aufnehmen
kann, die Sie später beispielsweise per
CSS gemeinsam gestalten können.
Zudem enthält der Code der Beispieldateien vier Inhaltsbereiche: als Erstes
einen Kopfbereich mit Logo, Überschrift
und einem kurzen Slogan:
<div id=³kopfbereich³> ... </
div>
Weiterhin einen Bereich für die Navigationselemente der Seiten:
<div id=³navibereich³> ... </
div>
Einen Bereich für den Inhalt, also den
Text und die Grafiken:
<div id=³textbereich³> ... </
div>
Schließlich gibt es noch einen Fußbereich,
der beispielsweise die Adresse aufnimmt:
Grundlegende Gestaltung mit
Schriften und Farben
Die CSS-Regeln zum Gestalten der Seiten
speichern Sie in der Datei chip.css. Legen
Sie zunächst mit Ihrem Lieblingseditor
eine neue, leere Datei mit diesem Namen
an und sichern Sie sie im gleichen Ordner
wie die Beispielseiten.
Im ersten Schritt geht es um die
Grundeinstellungen. Mit der folgenden
CSS-Regel, im weiteren Verlauf auch „Style“ genannt, definieren Sie die Schriften
und Farben für die Seite:
body {
color: black;
background-color: silver;
font-family: Verdana, Arial,
Helvetica, sans-serif;
font-size: small;
padding: 10px;
}
Neben der Text- und der Hintergrundfarbe legt das Listing auch die Schriftart für
die Seite fest. Da am Bildschirm Fonts
ohne Häkchen (Fachbegriff: „Serifen“)
besser lesbar sind, definieren wir mit der
Eigenschaft „font-family“ die Schrift Verdana. Falls dieser Font auf dem Rechner
des Betrachters nicht vorhanden ist, wird
der Browser angewiesen, ihn durch Arial
oder Helvetica zu ersetzen. Falls auch die
nicht installiert sind, soll er irgendeine
andere Schrift ohne Serifen („sans-serif“)
für die Darstellung verwenden.
Zum Definieren der Schriftgröße verwenden Sie am besten die Anweisung
„font-size: small“. In der letzten Deklara-
TIPP
Weitere Infos
Falls Sie mehr über Begriffe wie Blockelement, Selektor oder Boxmodell wissen
möchten, finden Sie auf der CD zu diesem
Heft in den Artikeln „So funktioniert HTML“,
„Die wichtigsten HTML-Elemente“ und
„Seiten gestalten mit CSS“ aus dem CHIPSonderheft „Die perfekte Website“ (03/
2006) leicht verständliches Grundlagenwissen zu HTML und CSS.
tion bekommt die Seite einen Innenabstand (Fachbegriff: „padding“) von zehn
Pixeln zugewiesen.
Speichern Sie die chip.css und öffnen
Sie die Webseiten (nicht das Stylesheet)
in Ihrem Browser. Sie sehen nun, dass
alle Elemente eine andere Schriftgröße
bekommen haben. Lediglich die Überschriften machen eine Ausnahme. Der
Browser ist nämlich der Meinung, dass
eine Überschrift immer größer sein muss
als normaler Text. Da wir bis zu diesem
Punkt für die Überschriften nichts anderes definiert haben, gelten noch immer die
Regeln des eingebauten Stylesheet Ihres
Browsers.
Die folgenden CSS-Regeln definieren
die Schriftgröße für die Überschriften der
ersten und zweiten Gliederungsebene:
h1 { font-size: 150%; }
h2 { font-size: 130%; }
Die Angabe in Prozent bewirkt, dass das
Größenverhältnis zwischen Text und Überschriften auch dann erhalten bleibt, wenn
Sie die Schriftgröße für „body“ ändern. k
<div id=³fussbereich³> ... </
div>
Komplettiert wird dieses Quartett durch
einen fünften Bereich, der inhaltlich keine
Bedeutung hat, aber beim Gestalten mit
CSS sehr praktisch ist. Er wird oft als
„Wrapper“ bezeichnet, was auf Deutsch
so viel wie „Schutzumschlag“ heißt. Der
Wrapper umschließt die anderen vier Bereiche. Die Definition „<div id="wrapper">“ steht direkt hinter dem Tag „<body>“, das schließende „</div>“ ganz am
Ende, direkt vor „</body>“.
In diesem Workshop beginnen wir die
Gestaltung der Beispielseiten mit einer
grundlegenden Formatierung und widmen uns dann dem Kopf- und dem Navigationsbereich.
Beispielsite:
Die Website, die
dem Workshop
zugrunde liegt,
finden Sie als
index.html auf
der CD zu diesem Sonderheft.
33
Übersicht: Der
Kopfbereich enthält das Logo
„img“, die Überschrift „h1“ und
den Slogan „p“.
Um der Webseite eine feste Breite von 720
Pixeln zu geben und sie im Browserfenster zu zentrieren, benutzen Sie den Bereich „<div id="wrapper">“:
#wrapper {
color: black;
background-color: white;
width: 720px; /* feste Breite
*/
margin: auto; /* zentrieren */
}
Die Breite von 720 Pixeln ist so gewählt,
dass die Seite auch bei einer Bildschirmauflösung von 800 x 600 Pixeln noch akzeptabel aussieht. Durch die feste Einstellung nehmen Sie der Seite zwar ein Stück
ihrer Flexibilität, weil sie sich dem Browserfenster nun nicht mehr anpassen kann.
Andererseits sind feste Layouts mit Pixelangaben zum Lernen besser geeignet als
flüssige oder elastische.
Da es leider keinen Befehl wie „Zentriere das Element auf der Seite“ gibt, arbeiten Sie mit einem kleinen Trick: Indem
Sie die Außenabstände („margin“) für
links und rechts auf „auto“ setzen, sind sie
immer gleich groß, und die Seite erscheint
zentriert. Zum Schluss definieren Sie für
die vier Hauptbereiche einen Innenabstand. Dadurch erreichen Sie, dass der Inhalt nicht ganz am Rand steht:
#kopfbereich { padding: 10px
20px 0px 20px; }
Zur Erklärung: Wenn hinter „padding“
vier Werte aufgeführt sind, interpretiert
sie der Browser der Reihe nach im Uhrzeigersinn als Abstände für oben, rechts,
unten und links. Wenn Sie an dieser Stelle
lediglich einen einzigen Wert angeben,
gilt dieser für alle Seiten der Box.
Der folgende Style gestaltet zum Abschluss der Grundformatierung noch die
Adresse unten auf der Seite:
address {
font-size: 80%;
font-style: normal;
letter-spacing: 2px;
line-height: 1.5em;
padding-top: 10px;
#textbereich { padding: 20px; }
#fussbereich { padding: 20px; }
<a href=³http://www.chip.
de³><img src=³logo.gif³
alt=³CHIP Online³ width=³206³
height=³100³ /></a>
<h1>CHIP-Sonderheft Homepage</
h1>
<p>Prall gefüllt mit PraxisTipps. Über 100 Seiten. Unter 10
Euro.</p>
</div>
Schematisch dargestellt, ergibt der Quelltext folgendes Bild: Die Gestaltung des
Kopfbereichs beginnt mit der Definition
von Schrift- und Hintergrundfarbe:
#kopfbereich {
border-top: 1px solid #003399;
color: white;
margin-top: 20px;
background-color: #003399;
}
Kopfbereich mit Logo, Überschrift und Slogan gestalten
#navibereich { padding: 10px
20px 4px 20px; }
<div id=³kopfbereich³>
Im Quelltext der Beispielseite für diesen
Workshop definieren Sie den Kopfbereich
mit den folgenden Zeilen:
}
Um die Überschrift und den Slogan im
Kopfbereich rechtsbündig und neben die
Grafik zu setzen, benutzen Sie die absolute Positionierung (siehe dazu den Kasten
auf s36). Dabei wenden Sie wieder einen
kleinen Trick an: Positionieren Sie zunächst die Überschrift „h1“:
#kopfbereich h1 {
position: absolute;
KNOW-HOW
top: 10px;
right: 20px;
Der Flow und die Positionierung
Alle HTML-Elemente einer ungestalteten
Webseite folgen dem Flow, dem Fluss der
Elemente, die auf der Seite stehen sollen.
Die Grundidee ist einfach: Das erste HTMLElement wird so weit wie möglich links und
oben positioniert. Alle weiteren ordnen Sie
jeweils rechts davon an, bis der Rand des
Browserfensters erreicht ist. Das folgende
Element rutscht daraufhin eine Zeile tiefer
und wird wieder an den linken Rand gesetzt.
Es gibt drei Möglichkeiten, HTML-Elemente
zu positionieren:
Normaler Flow: Zum normalen „Fluss“ gehören unpositionierte Block- und Inline-Elemente sowie Elemente mit relativer Positionierung („position: relative“).
Absolute Positionierung: Absolut positionierte Elemente werden aus dem Fluss
herausgehoben und sind für die anderen
Elemente nicht vorhanden. Die zugehörigen
Anweisungen heißen „position: absolute“
und „position: fixed“.
Float: Schwebende, im CSS-Jargon „gefloatete“, Elemente sind ein Zwitter. Bei diesem
Verfahren wird das Kästchen normal positioniert, anschließend nehmen Sie es wieder aus dem Fluss heraus. Auf diese Weise
schwebt es immer so weit wie möglich auf
die rechte oder linke Seite.
In unserem Workshop lernen Sie den normalen Flow mit der Anweisung „position: relative“ und die „position: absolute“ kennen.
padding: 0;
margin: 0;
}
Diese CSS-Regel nimmt das Element mit
der Anweisung „position: absolute“ aus
dem Fluss heraus und setzt es zehn Pixel
unterhalb des oberen Randes und zusätzlich zwanzig Pixel neben den rechten
Rand der Seite.
Wenn Sie die Seite allerdings jetzt im
Browser aufrufen, erscheint die Überschrift trotzdem nicht im Kopfbereich.
Da es kein umschließendes Element gibt,
wird sie zur absoluten Positionierung am
Stammelement „html“ ausgerichtet, also
am Rand des Fensters.
mit einer Breite von einem Pixel („border-bottom“). Der folgende Style entfernt
eventuelle Innen- und Außenabstände:
#navibereich ul {
padding: 0;
margin: 0;
}
Richtig im Kopf: Dank der absoluten Positionierung erscheint die Überschrift im Kopfbereich
immer an der gleichen Stelle – unabhängig von der Größe des Browserfensters.
Sie könnten jetzt mit den Werten für
„top“ und „right“ experimentieren und
so versuchen, die Überschrift an die richtige Stelle zu schieben. Das ist jedoch keine stabile Lösung. Schon eine kleine Änderung an der Größe des Browserfensters
genügt, und die Überschrift erscheint
wieder außerhalb des Kopfbereichs.
Besser, und vor allem zuverlässiger, ist
die folgende Maßnahme: Setzen Sie den
Kopfbereich mit dem Befehl „position: relative“ an die gewünschte Stelle und weisen Sie ihm keine Werte für die Seitenabstände zu. Damit wird zum einen der
Standort des Bereichs festgelegt, er wird
zum Bezugspunkt für die absolute Positionierung der Überschrift. Gleichzeitig
bleibt er aber im normalen Flow.
Probieren Sie es einfach aus und ergänzen Sie die CSS-Regel für den Kopfbereich um die Zeile „position: relative“:
Verändert der Besucher der Website
dann die Schriftgröße, wirkt sich das auch
auf die Überschrift aus. Zugleich wächst
beziehungsweise schrumpft der Abstand
des Absatzes zum oberen Rand. Es ist also
ausgeschlossen, dass sich die beiden Bereiche überlagern.
Seitennavigation über
Karteireiter anlegen
Nach der Definition des Kopfbereichs
geht es jetzt darum, dem Betrachter der
Webseite eine einfache Navigation zu ermöglichen. Ziel ist eine einfache, aber
hübsch anzusehende Leiste mit Karteireitern, den „Tabs“. Sehen Sie sich zuerst den
HTML-Code der beiden Beispielseiten
an. Dort finden Sie die folgenden Zeilen:
<div id=³navibereich³>
<ul>
#kopfbereich {
<li><a id=³navi01³
Die Navigation wird definiert durch eine
ungeordnete HTML-Liste. Da es sich bei
den Listen- um Blockelemente handelt,
stehen sie normalerweise untereinander.
Mit der CSS-Eigenschaft „display“ können Sie die Anzeige jedoch ändern.
Um die Modifikationen an den Listenelementen auf den Navigationsbereich zu
beschränken, benutzen Sie den verschachtelten Selektor „#navibereich li“, der alle
Listenelemente im angegebenen Bereich
auswählt. Die folgende Regel stellt die
Elemente nebeneinander und entfernt die
Aufzählungspunkte sowie die Innen- und
Außenabstände:
#navibereich li {
list-style-type: none;
display: inline;
padding: 0;
margin: 0;
}
Danach entfernen Sie die Unterstreichung
der Hyperlinks, bestimmen ihre Farben
und erzeugen mit „padding“ und „border“ das Aussehen eines Karteireiters:
#navibereich a {
position: relative;
href=³index.html³>Startseite</
text-decoration: none;
color: white;
a></li>
color: white;
background-color: #003399;
}
background-color: #6688CC;
<li><a id=³navi02³
padding: 4px 8px 4px 8px; /*
href=³kontakt.html³>Kontakt</
Diese Lösung ist stabil, da der Bezugspunkt für den Absatz jetzt „#kopfbereich“
ist und nicht mehr der Rand des Browserfensters. Den Absatz „Prall gefüllt mit
Praxis-Tipps…“ gestalten Sie anschließend mit dem gleichen Trick:
a></li>
unten 4px */
border: 1px solid black;
</ul>
</div>
In einem ersten Schritt gestalten Sie den
Navigationsbereich:
#navibereich {
#kopfbereich p {
}
Zum Schluss erzeugen Sie einen RolloverEffekt und heben gleichzeitig den angewählten Karteireiter hervor:
text-align: right;
#navibereich a:hover,
position: absolute;
background-color: #B3C4E6;
#startseite #navi01,
top: 3.5em;
padding: 10px 20px 4px 20px;
#kontaktseite #navi02 {
right: 20px;
border-bottom: 1px solid
color: black;
padding: 0;
black;
margin: 0;
}
padding-bottom: 5px;
}
Das Besondere an diesem Style ist die Definition des oberen Abstands mit der Anweisung „top: 3.5em“. Die Einheit „em“
ist relativ zur Schriftgröße, die der Benutzer eingestellt hat. Sie bezieht sich auf die
Größe des Buchstabens „M“ und wird
„emm“ ausgesprochen.
Weil es rein optisch auf der rechten Seite
mehr freien Platz gibt, wird der Text im
Navigationsbereich rechtsbündig ausgerichtet („text-align: right“). Es folgen die
Einstellung der Hintergrundfarbe („background-color“), die Angabe des Innenabstands („padding“) und die Definition
einer schwarzen, unteren Rahmenlinie
border-bottom: none;
}
Durch das Erhöhen der „padding-bottom“ von vier auf fünf Pixel und das Entfernen der Rahmenlinie mit „border-bottom: none“ entsteht der Eindruck, dass
der Reiter nach unten offen ist. Der Trick
zum Hervorheben des Navigationspunkts k
35
Das Ergebnis:
Das Bild zeigt die
fertige Website.
Der Reiter der aktuell aufgerufenen
Startseite ist grafisch markiert.
ist ebenfalls einfach: Die Kombinationen
„#startseite #navi01“ und „#kontaktseite
#navi02“ existieren lediglich auf den angegebenen Seiten.
Mit CSS eine spezielle
Druckversion bereitstellen
Viele Websites bieten eine spezielle Version für den Ausdruck an. Mit CSS können
Sie die Seiten für Bildschirm und Drucker
getrennt gestalten. Orientieren können
Sie sich dabei an der Druckvorschau des
Browsers, in der er eine Seite komplett
ohne CSS anzeigt. Ein Blick in den Quelltext zeigt, warum das so ist:
<link href=³chip.css³
rel=³stylesheet³ type=³text/css³
media=³screen³ />
Das Element „link“ sagt dem Browser, wo
er das Stylesheet findet und wie er es benutzen soll. Das Attribut „media“ wiederum bestimmt, für welche Medien das
Stylesheet gilt. Mit dem Wert „screen“
wird die Ausgabe auf den Bildschirm beschränkt. Das Stylesheet chip.css wird also für den Ausdruck der Seite nicht verwendet. Legen Sie nun ein zweites Stylesheet mit dem Namen druck.css an.
Nachdem Sie es mit dem „link“-Element
eingebunden haben, wird es wegen der
Angabe „media="print"“ nur für den Ausdruck der Seite verwendet.
Öffnen Sie index.html und kontakt.
html und fügen Sie nach „link“ und vor
„</head>“ die folgende Zeile ein:
<link href=³druck.css³
rel=³stylesheet³ type=³text/css³
media=³print³ />
Zum Anlegen des Stylesheet für den Ausdruck erzeugen Sie danach eine leere Datei und speichern sie unter dem Namen
druck.css im selben Ordner wie die
Übungsdateien.
Am besten beginnen Sie mit der
Schriftgestaltung. Öffnen Sie druck.css
und geben Sie folgende CSS-Regel ein:
body {
font-family: ÄTimes New
Roman³, Times, serif;
font-size: 11pt;
zen. Beim Positionieren der Überschrift
und des Slogans im Kopfbereich gibt es
ebenfalls Änderungen:
Damit beim Ausdruck nicht so viel
Toner oder Tinte verbraucht wird, sollten Sie keine dunklen Hintergrundfarben definieren. Und anstatt mit relativen
Einheiten wie „px“ oder „em“ sollten Sie
mit „pt“ arbeiten. So könnte beispielsweise das CSS für den Kopfbereich in der
Druckversion aussehen:
#kopfbereich {
position: relative;
}
Die Einstellung „font-family“ definiert
eine Serifenschrift, die auf Papier besser
lesbar ist. Über „font-size“ definieren Sie
die Schriftgröße und verwenden dabei die
Einheit „pt“ („Punkt“). Am Bildschirm
muss die Schrift skalierbar sein, daher
wird die Größe meist über „em“ oder
Prozent angegeben. In einem Druck-Stylesheet können Sie dagegen „Punkt“ einset-
padding: 3pt;
border: 1pt solid black;
}
#kopfbereich h1 {
position: absolute;
top: 0;
right: 0;
padding: 0;
margin: 0;
}
#kopfbereich p {
KNOW-HOW
position: absolute;
top: 32pt;
Absolute Positionierung
Die absolute Positionierung mit „position:
absolute“ nimmt ein Element komplett aus
dem Flow heraus (siehe dazu den Kasten auf
s34). Das Element wird nach oben gezogen,
und alle anderen Elemente auf der Seite verhalten sich so, als ob es nicht da wäre.
Die genaue Position des Elements wird mit
den Eigenschaften „top“, „right“, „bottom“
und „left“ definiert. Hier ein Beispiel:
#logo { position: absolute;
top: 10px; left: 10px; }
Diese Regel positioniert das Element mit der
ID „logo“ zehn Pixel von oben und zehn Pixel
von links. Etwas komplizierter wird die Sa-
che durch die Tatsache, dass sich die Werte
für „top“ und „left“ auf zwei verschiedene
Dinge beziehen können:
Normalerweise orientiert sich die absolute
Position eines Elements am nächsten umschließenden Element, das mit „relative“,
„absolute“ oder „fixed“ definiert ist.
Oft gibt es aber kein solches positioniertes
umschließendes Element. Dann erfolgt die
Positionierung relativ zum Stammelement
html (zum Rand des Browserfensters).
Das klingt zunächst kompliziert, ist es aber
nicht. Probieren Sie einfach ein wenig mit
den Einstellungen herum.
right: 0;
padding: 0;
margin: 0;
}
Da eine Navigation in einem Ausdruck
nicht möglich ist, können Sie die Reiter
einfach ausblenden. In HTML beginnt
der Navigationsbereich mit dem Element
„<div id="navibereich">“. Mit dieser Regel unterdrücken Sie die Druckausgabe:
#navibereich { display: none; }
Damit haben Sie mit wenigen CSS-Regeln
einfache HTML-Seiten in attraktive WebPeter Müller
seiten verwandelt.
VORGEFERTIGTE CSS-LAYOUTS
Freundliche Übernahme
Einfacher als die Konstruktion eigener CSS-Layouts ist die Übernahme bestehender Stylesheets.
Mehrere Websites bieten dazu kostenlose Samples und Anleitungen an.
M
it CSS gibt es fast immer mehrere Wege zum Ziel. So findet
man denn auch im Web zahlreiche CSS-basierte Seiten, die ein und
dasselbe Problem mit verschiedenen Ansätzen lösen. Diese Vielfalt ist allerdings
für viele Hobby-Programmierer eher verwirrend als hilfreich. Im Folgenden stellen wir Ihnen einige Sites vor, die praktische Anleitungen für komplexe Layouts
liefern und teilweise auch fertige Layoutvorlagen zum Download anbieten.
Die Klassiker: Layouts mit
absoluter Positionierung
Eine der größten Schwierigkeiten stellt für
CSS-Einsteiger das Gestalten mehrspaltiger Layouts dar. Als vor einigen Jahren
die ersten Entwürfe aufkamen, basierten
sie nahezu ausnahmslos auf der Kombination aus absoluter Positionierung und
„margin“: Dabei bekommt ein „div“-Bereich einen großen Außenabstand zugewiesen, in den man einen zweiten Bereich
mit absoluter Positionierung setzt.
Einer der bekanntesten Vertreter dieser
Layoutmethode ist Owen Briggs mit seinen
„Box Lessons“ beziehungsweise „Little
Boxes“. Unter der Adresse www.thenoodle
incident.com/tutorials/box_lesson/in
dex.htm präsentiert der Autor eine Reihe
von Beispielen, die mit einer absoluten
Positionierung zustande gekommen sind.
Kurze Anleitungen zum gleichen Thema
gibt auch das Layout-Reservoir von Blue
Robot unter der Adresse www.bluerobot.
com/web/layouts.
Die Layouts, die auf diesen Websites
präsentiert werden, sind stabil, flexibel,
recht einfach umzusetzen und haben nur
einen echten Nachteil: Es ist nicht möglich, unterhalb der Spalten eine Fußzeile
über die gesamte Breite der Seite laufen zu
lassen. Denn wenn beispielsweise eine absolut positionierte Navigationsspalte län-
Works.de in seinem zweiten Teil mit diesem Thema. Sie erreichen es über die Webadresse http://thestyleworks.de/tut-art/
layout_div_2.shtml.
YAML: CSS-Gestaltung
mit System
Auf der Intensivstation: Die Schweizer Website hält Layouts auf „float“-Basis bereit.
ger ist als der Textbereich, fließt sie über
die Fußzeile hinweg. Bei Seiten jedoch,
auf denen die Fußzeile nicht über die gesamte Breite laufen muss, spricht nichts
gegen den Einsatz dieser Methode.
Klaus Langenberg hat auf TheStyleWorks.de ein ausführliches, deutschsprachiges Tutorial zur Funktionsweise von
CSS-Layouts mit absoluter Positionierung veröffentlicht (http://thestyleworks.
de/tut-art/layout_div.shtml).
Die Modernen: Layouts mit
„float“-Eigenschaft
In den letzten Jahren haben mehr und
mehr Webprofis begonnen, mehrspaltige
Layouts mit der CSS-Eigenschaft „float“
zu realisieren. Normalerweise setzt man
mit dieser Eigenschaft Grafiken in einen
Fließtext. Inzwischen gibt es zahlreiche
Beispiele dafür, wie man mit „float“ und
seinem Pendant „clear stabile“ auch
mehrspaltige Layouts anlegen kann.
Layouts auf „float“-Basis mit deutschsprachigen Erklärungen finden Sie etwa
bei der CSS-Intensivstation (www.intensiv
station.ch/templates) und, auf Englisch,
bei Alessandro Fulcinitis Layout Gala
(http://blog.html.it/layoutgala). Zudem
befasst sich auch das Tutorial auf TheStyle-
Dirk Jesse hat ein System konzipiert, mit
dem man verschiedene Layouts realisieren kann, ohne bei jedem Projekt wieder
bei null anfangen zu müssen. Es trägt den
Namen Yet Another Multicolumn Layout,
kurz YAML (http://yaml.de, Heft-CD).
YAML ist ein Framework, das als
Grundlage für die Entwicklung eigener,
„float“-basierter CSS-Layouts dienen
kann. Das System erfordert eine gewisse
Einarbeitungszeit. Dabei hilft Ihnen ein
hervorragendes Tutorial, das die Funktionsweise von und die Arbeit mit YAML
erläutert. Je mehr Webseiten Sie anlegen,
desto eher lohnt sich die Einarbeitung.
Wenn Ihnen das noch nicht genügt,
können Sie außerdem „Open Webdesign“
durchstöbern, eine Site, die mehr als 1800
Gratislayouts (http://openwebdesign. org)
bereitstellt. Oder Sie klicken sich bei CSS
Creator
(http://www.csscreator.com)
ganz einfach ein individuelles Layout zuPeter Müller
sammen.
Schachtelweise: Die Box Lessons geben
Code-Beispiele für diverse Layoutformen.
ARBEITEN MIT CSS
Ordnung halten
Je mehr Sie mit CSS arbeiten, desto länger und unübersichtlicher werden auch Ihre Stylesheets.
Dieser Artikel gibt Ihnen nützliche Tipps zur Organisation von CSS-Regeln.
A
llein am Kommentar im Dateinamen eines Stylesheets kann man
nicht immer erkennen, zu welcher
Site es gehört und welchen Zweck es erfüllt. Darum empfiehlt es sich, die wichtigsten Informationen in einem Kommentar am Anfang der CSS-Datei festzuhalten. Wie ausführlich dieser Kommentar
ausfallen sollte, hängt vom Einsatzzweck
ab. Zwei Beispiele sollen das verdeutlichen. Zunächst zeigen wir Ihnen die
Minimalvariante:
/* Stylesheet für Artikel CHIP
- Wrapper
- Kopfbereich
- Navibereich
- Textbereich
- Fussbereich
================= */
Je nach Komplexität des Projekts können
Sie beispielsweise auch das verwendete
Farbschema oder eine Liste der Grafikdateien anführen, auf die das Sheet verlinkt.
Stylesheet in mehrere
Abschnitte einteilen
Sonderheft Homepage, November
2006 */
Wenn Sie dieses Stylesheet in ein paar
Wochen oder Monaten wieder öffnen,
wissen Sie wenigstens noch, wann und
wofür es geschrieben wurde. Die folgende
Variante erledigt dieselbe Aufgabe, liefert
aber mehr Informationen:
/*
====================
CHIP Sonderheft Homepage Artikel - CSS: Styleguide für
Stylesheets
Datei: chip.css
Media: screen
Datum: 11. November 2006
Autor: Peter Müller
Mail:
benachrichtigung@infotek-
ten.de
Aufbau: 1. Allgemeine Styles
- Block-Elemente
- Inline-Elemente
2. Styles für Layoutbereiche
AUF EINEN
EINENBLICK
BLICK
, Arbeiten mit CSS
Deklarationen logisch oder
alphabetisch ordnen
Kommentare schnell eingeben
/* ====================
/* ======================
2. Styles für Layoutbereiche
===================== */
Am einfachsten führen Sie die Bereiche in
der gleichen Reihenfolge auf, in der sie
auch im HTML-Quelltext erscheinen. Bei
den Beispielseiten aus dem CSS-Artikel
ab s32 in diesem Heft wären das beispielsweise „#wrapper“, „#kopfbereich“,
„#navibereich“,
„#textbereich“
und
„#fussbereich“. Verschachtelte Selektoren,
die nur für einen bestimmten Bereich gelten, rücken Sie leicht ein:
/* WRAPPER */
#wrapper { ... }
/* KOPFBEREICH */
#kopfbereich { ... }
#kopfbereich h1 { ... }
#kopfbereich p { ... }
/* NAVIBEREICH */
#navibereich { ... }
Einen sinnvollen Aufbau für
die Styles wählen
Darüber hinaus gibt es auch für die Definition der Stylesheets selbst einige Tricks,
mit denen Sie die Übersicht verbessern
können. Hier ein einfaches Beispiel:
body {
color: black;
background-color: silver;
font-family: Verdana, Arial,
Helvetica, sans-serif;
1. Allgemeine Styles
s41
s41
Alle Tools auf CD
PDF: Artikel aus dem Sonderheft „Die
perfekte Homepage“ hVollversionen
Ein Stylesheet besteht aus CSS-Regeln,
die auch Styles genannt werden. Es ist
nicht selten mehrere hundert Zeilen lang.
Versuchen Sie deshalb von Anfang an, das
CSS so übersichtlich wie nur irgend möglich zu halten.
Der erste Schritt zu mehr Ordnung ist
die Einteilung des Sheets in Abschnitte.
Dabei bieten sich drei Hauptbereiche an:
● allgemeine Styles, die die Grundeinstellungen der Seiten definieren,
● Styles für Layout-Bereiche wie „#kopfbereich“ oder „#navibereich li“,
● alle anderen Styles, die nur auf bestimmten Seiten vorkommen (beispielsweise Kontaktformulare) oder nicht in die
beiden anderen Abschnitte passen.
Den Beginn eines Abschnitts kennzeichnen Sie im Stylesheet durch einen
mehrzeiligen Kommentar. Dabei können
Sie auch beliebige Sonderzeichen verwenden. Wichtig ist nur, dass die gesamte
Konstruktion mit „/*“ beginnt und mit
„*/“ endet. Hier ein Beispiel:
Inline-Elemente, etwa Hyperlinks, Bilder
und Elemente wie „strong“ und „em“.
Im zweiten Abschnitt folgen Styles, die
sich nur auf einen bestimmten Bereich
der Seite beziehen:
font-size: small;
==================== */
In diesem Abschnitt definieren Sie die allgemeinen, für die ganze Seite geltenden
Einstellungen. Notieren Sie sich zuerst die
Block/„body“-Elemente – Überschriften,
Absätze, Listen, Zitate etc. – und dann die
padding: 10px;
}
In der ersten Zeile stehen der Selektor
„body“ und die öffnende geschweifte
Klammer. Danach folgt, etwas eingerückt,
die erste Deklaration, die immer aus einer
Eigenschaft wie beispielsweise „color“,
einem Doppelpunkt und einem Wert wie
etwa „black“ besteht. Um die Styles möglichst übersichtlich zu halten, empfiehlt
sich folgende Aufteilung:
● In jeder Zeile steht lediglich eine Deklaration, und jede Deklaration endet mit
einem Semikolon.
● Eigenschaft und Wert werden durch einen Doppelpunkt getrennt, danach folgt
ein Leerzeichen. Das ist zwar für das
Funktionieren des Styles nicht zwingend
erforderlich, erhöht aber die Lesbarkeit.
● Die geschweifte Klammer am Schluss
des Listings bekommt eine eigene Zeile
und schließt bündig mit dem ersten
Buchstaben des Selektors ab.
Bei Styles mit lediglich einer Deklaration liegt es allerdings nahe, den gesamten
Ausdruck in eine Zeile zu schreiben:
h1 { font-size: 150%; }
Nach den oben aufgeführten Regeln
müsste man den Style so formatieren:
h1 {
font-size: 150%;
}
Der Einzeiler spart aber Platz und ist dennoch übersichtlich genug. Manche Autoren schreiben auch Styles mit nur einer
Deklaration konsequent nach dem mehrzeiligen Schema. Das ist jedoch eine reine
Geschmackssache.
Reihenfolge der Deklarationen
im Style festlegen
Zum Abschluss ein paar Anregungen zur
Reihenfolge der Deklarationen innerhalb
eines Styles. Schauen Sie sich dazu die folgende CSS-Regel an:
#kopfbereich {
position: relative;
CSS geordnet: So sieht
das Stylesheet aus dem
Artikel ab s32 aus. Verschachtelte Selektoren,
etwa im „kopfbereich“,
rücken Sie leicht ein.
● Nach einer optionalen Leerzeile folgen
font-size: 100%;
die Eigenschaften für den Inhaltsbereich,
also die Deklarationen wie beispielsweise
„font-size“, „font-style“, „letter-spacing“
und so weiter.
● Nach einer weiteren optionalen Leerzeile listet die Regel die Definitionen für
das Kästchen selbst auf: „width“, „height“,
„background“, „padding“, „border“ und
„margin“. Diese Reihenfolge sollte übrigens immer eingehalten werden.
In der am Box-Modell orientierten
Sortierung beschreiben die Deklarationen
also zuerst den Standort auf der Seite und
dann, von innen nach außen, das Element
selbst. So verinnerlichen Sie beim Ordnen
der Deklarationen ganz nebenbei auch
den Aufbau des Box-Modells und können
sich das Aussehen des Elements vor Ihrem
inneren Auge besser vorstellen.
Eine andere, weit verbreitete Methode
zum Auflisten von Deklarationen ist die
alphabetische Sortierung. Das folgende
Listing beschreibt dieselbe CSS-Regel wie
in der Textspalte zuvor:
#kopfbereich {
font-size: 100%;
margin-top: 20px;
padding-top: 10px;
position: relative;
}
Der Vorteil der alphabetischen Sortierung
ist, dass die Reihenfolge immer eindeutig
und leicht einzuhalten ist. Ihr Nachteil
liegt darin, dass verwandte Eigenschaften
wie „background“ und „padding“ auseinandergerissen werden und wichtige Positionsangaben wie etwa „float“ oder „position“ zwischen den anderen Eigenschaften
vergraben liegen.
Probieren Sie aus, welche der beiden
Methoden Ihnen besser gefällt: die alphabetische Sortierung oder das Box-Modell.
Sie können sich auch etwas Neues ausdenken, wichtig ist lediglich, dass Sie dem
einmal gewählten Schema treu bleiben.
Nur so ist gewährleistet, dass Sie sich im
Quelltext Ihrer Websites auch später noch
zurechtfinden. Wie penibel Sie den selbst
gewählten Regeln folgen, hängt natürlich
in jedem Fall auch vom Umfang des Projekts ab und von Ihrem eigenen OrdPeter Müller
nungsbedürfnis.
padding-top: 10px;
TIPPS
margin-top: 20px;
}
Die Reihenfolge der Deklarationen orientiert sich am Aufbau des Box-Modells:
● Angaben wie „float“ oder „position“
und die zugehörigen Deklarationen wie
„top“, „right“, „bottom“ und „left“ bestimmen die Position des Kästchens auf
der Seite und stehen daher ganz am Anfang der Regel.
Schnelle Kommentare Weitere Infos
Kommentare stehen zwischen den Markierungen „/*“ und „*/“. Über den Ziffernblock
auf der Tastatur sind die Zeichen schnell eingegeben, da die beiden zuständigen Tasten
direkt nebeneinander liegen: Den Schrägstrich erreichen Sie über das Divisionszeichen, das Sternchen über einen Druck auf
die Taste mit dem Multiplikationszeichen.
Das Box-Modell beschreibt den Aufbau eines
HTML-Elements und ist eine der wichtigsten
Grundlagen zum Arbeiten mit CSS. Im CSSArtikel aus dem Sonderheft „Die perfekte
Homepage“ auf der CD finden Sie eine genauere Erklärung. Ein Schema zum Ausdrucken gibt es im Internet unter der Adresse
http://little-boxes.de/download.php.
41
FREIER ZUGANG FÜR ALLE
Barrierefreie Seiten bauen
B
eim Gestalten barrierefreier Webseiten geht es darum, dass die gebotenen Informationen für die Besucher immer zugänglich bleiben. Begründet ist das im Behindertengleichstellungsgesetz: Jeder Mensch soll gleichermaßen Zugang zu Webinhalten haben. Die
gesetzlichen Grundlagen dafür sind in der
„Barrierefreie Informationstechnik Ver-
AUF EINEN
AUF
EINENBLICK
BLICK
, Barrierefreie Websites
Wie Ihnen die Web Developer Toolbar
beim Überprüfen der Site hilft
s42
Wie Sie Texte und Bilder anlegen s44
, Alle Tools auf CD
PDF: Artikel aus dem Sonderheft „Die
perfekte Homepage“ hVollversionen
TOOLBARS: Web Developer Toolbar für
Firefox und Microsoft IE hBrowser
ordnung“ (BITV) geregelt. Die für Webdesigner wichtigen Details stehen in der
Anlage 1 der BITV. Sie finden sie im Web
unter der Adresse http://einfach-fuer-alle.
de/artikel/bitv/anlage-1. Die BITV wiederum basiert auf den Web Content Accessibility Guidelines (WCAG 1.0), die bereits im Mai 1999 vom World Wide Web
Consortium (W3C) veröffentlicht wurden und bis heute die wichtigste Grundlage zum Beurteilen der Barrierefreiheit
von Webseiten bilden.
ist ein nützliches Werkzeug für die Analyse von Seiten im Web. Sie erhalten sie unter http://erweiterungen.de/detail/Web_
Developer. Klicken Sie auf dieser Seite
einfach auf den Link „Installieren“. Überprüfen Sie dann, ob oben im Browserfenster ein hellgelb hinterlegter Kasten
aufgetaucht ist. Klicken Sie auf die Schaltfläche „Einstellungen bearbeiten“, um die
Installation zu erlauben. Unter http://
erweiterungen.de/hilfe erhalten Sie bei
Bedarf weitere Informationen.
Arbeiten mit der
Web Developer Toolbar
Seite auf korrekten
HTML-Code testen
Bevor Sie mit dem Überprüfen Ihrer Website auf Barrierefreiheit beginnen, sollten
Sie sich eine praktische Erweiterung für
Mozilla Firefox besorgen, die Ihnen bei
der Arbeit hilfreiche Dienste leisten kann:
Die Web Developer Toolbar stellt zahlreiche praktische Funktionen bereit und
Der erste Schritt beim Prüfen einer Webseite auf Zugänglichkeit ist die Validierung des Quelltexts. Die BITV sagt dazu
in Abschnitt 3.2: „Mittels Markup-Sprachen geschaffene Dokumente sind so zu
erstellen und zu deklarieren, dass sie gegen veröffentlichte formale Grammatiken
Nicht jeder ist in der Lage, Texte und Bilder auf Websites problemlos zu erkennen.
Wie Sie herausfinden, ob Ihre Homepage wirklich barrierefrei ist, sagt Ihnen dieser Artikel.
validieren“. Das heißt für die Praxis, dass
das auf der Website verwendete HTML
den Vorschriften des World Wide Web
Consortium entsprechen muss. Testen
lässt sich das mithilfe eines HTML-Validators. Das ist ein zertifizierter Grammatikprüfer für HTML, der sich ganz nebenbei auch gut dazu eignet, Tippfehler im
Quelltext zu finden.
Zum Validieren einer Webseite setzen
Sie am besten die neu installierte Web Developer Toolbar ein: Wenn die Adresse der
zu prüfenden Seite mit „http://“ beginnt,
klicken Sie im Menü „Werkzeuge“ auf den
Befehl „HTML überprüfen“. Möchten Sie
eine Webseite auf Ihrer Festplatte validieren, wählen Sie im gleichen Menü den
Befehl „Lokales HTML überprüfen“.
Die Toolbar schickt die aktuell im
Browserfenster angezeigte Seite an den
Validator des W3C im Internet. Falls der
keine Fehler feststellen kann, erscheint in
einem grünen Balken die Meldung „This
Page is Valid XHTML 1.0 Transitional“.
Damit ist zunächst einmal quasi amtlich
bestätigt, dass der HTML-Code grammatikalisch korrekt ist. Wenn der Validator
hingegen einen roten Balken anzeigt, müssen Sie Ihre Seite noch einmal auf Fehler
überprüfen.
HTML-Code auf richtige
Semantik überprüfen
In den Anforderungen 3.5 bis 3.7 der
BITV geht es um die richtige Semantik
(Bedeutungslehre) beim Verwenden einer
Markup-Sprache wie HTML:
● „Zur Darstellung der Struktur von mittels Markup-Sprachen geschaffenen Dokumenten sind Überschriften-Elemente
zu verwenden.“.
● „Zur Darstellung von Listen und Listenelementen sind die hierfür vorgesehenen Elemente der verwendeten MarkupSprache zu verwenden.“
● „Zitate sind mittels der hierfür vorgesehenen Elemente der verwendeten Markup-Sprache zu kennzeichnen.“
Um festzustellen, ob auf einer Seite semantisch korrektes HTML verwendet
wurde, sehen Sie im Quelltext nach, ob
dort Tags wie „<h1>“ bis „<h6>“ für
Überschriften, „<ul>“, „<ol>“ und „<li>“
für Listen sowie „<block-quote>“ und
„<cite>“ für Zitate benutzt werden. Alternativ dazu können Sie auch die Web De-
veloper Toolbar die Semantik überprüfen
lassen. Klicken Sie auf „Hervorheben |
Elementnamen beim Hervorheben anzeigen“ und lassen Sie die Toolbar mit dem
entsprechenden Befehl alle Block-LevelElemente hervorheben. Nach der Auswahl
von „Benutzerdefinierte Elemente hervorheben“ können Sie das Programm auf
der Seite auch nach anderen Elementen
suchen lassen.
Die Cascading Style Sheets
validieren
TIPP
Toolbar für den
Internet Explorer
Auch für den Internet Explorer gibt es eine
Symbolleiste mit nützlichen Werkzeugen
zum Testen der Barrierefreiheit einer Webseite. Die AIS (Accessible Information Solutions) Toolbar wurde von einem Team des
Nationalen Informations- und Bibliotheksdiensts (NILS) in Australien entwickelt, es
gibt sie aber auch in einer deutschen Version. Die Download-Adresse für das Programm lautet http://webforall.info/html/
deutsch/aistoolbar.php.
Das Menü „Werkzeuge“ der Web Developer Toolbar hilft auch beim Validieren der
Cascading Style Sheets: Wenn die Adresse
der Seite mit „http://“ beginnt, klicken Sie
im Menü auf den Befehl „CSS überprüfen“. Für lokal gespeicherte Seiten wählen
Sie „Lokales CSS überprüfen“.
Wie alle Grammatikprüfer ist auch der
CSS-Validator der Toolbar sehr penibel –
eine Eins plus mit Sternchen bekommen
Sie nur selten. Wenn er aber lediglich eine
Warnung zu den verwendeten Vorder- und
Hintergrundfarben ausgibt, ist das schon
ein großer Erfolg. Eine korrekte Webseite
ist zwar nicht automatisch auch barrierefrei. Aber die Einhaltung der allgemein
anerkannten Webstandards ist eine wichtige Voraussetzung dafür.
Um nachzusehen, ob eine Website mithilfe von Stylesheets gestaltet wurde, greifen Sie wieder zur Web Developer Toolbar. Aktivieren Sie dort „CSS | Styles deaktivieren“, und klicken Sie auf den Befehl
„Alle Styles deaktivieren“. Hat der Programmierer einer Seite mit CSS gearbeitet, sieht sie ohne Stylesheets mehr oder
weniger stark verändert aus. Auf der folgenden Seite dieses Artikels demonstrieren wir Ihnen das am Beispiel der Site
http://mein-brandenburg.com: Zwar ist
der Inhalt in beiden Fällen zugänglich,
das Design ist jedoch ohne die CSS deutlich unterschiedlich.
Barrierefreie Gestaltung
überprüfen
Nach Tabellen auf einer
Webseite suchen
In Anforderung 3.3 fordert die BITV, dass
bei der Gestaltung einer Website Stylesheets verwendet werden:
● „Es sind Stylesheets zu verwenden, um
die Text- und Bildgestaltung sowie die
Präsentation von mittels Markup-Sprachen geschaffenen Dokumenten zu beeinflussen.“
Wenn sich nach dem Abschalten der CSS
auf einer Webseite nicht viel verändert
hat, wurde sie eventuell mit Tabellen gestaltet. Um das zu überprüfen, klicken Sie
in der Toolbar im Menü „Hervorheben“
auf „Tabellen hervorheben“. Hat der Programmierer Tabellen verwendet, sind sie
nun mit einer farbigen Rahmenlinie um- k
Grünes Licht: Der Validator des W3C bestätigt, dass die eingegebene Site aus
grammatikalisch korrektem HTML-Code aufgebaut wurde.
43
geben. Layouttabellen sind jedoch in der
BITV nicht grundsätzlich verboten. In Anforderung 5.3 der Verordnung heißt es
dazu lediglich:
● „Tabellen sind nicht für die Text- und
Bildgestaltung zu verwenden, soweit sie
nicht auch in linearisierter Form dargestellt werden können.“
Dahinter steckt, dass ein Screenreader,
also ein Programm zum Vorlesen von
Texten auf einem Bildschirm, die Inhalte
der Reihe nach (linear) durchgeht. Verschachtelte Tabellen lassen sich jedoch
nicht linearisieren, der Reader würde bei
ihnen ein Durcheinander von zusammenhanglosen Versatzstücken ausgeben. Solche Tabellen sind somit nicht erlaubt.
In der Web Developer Toolbar können
Sie im Menü „Info“ über den Befehl „Tabellenverschachtelung anzeigen“ die Eigenschaften der vorhandenen Tabellen abrufen. Zeigt das Programm eine Tiefe von
„3“ an, steht das für „eine Tabelle in einer
Tabelle in einer Tabelle“ – die Seite entspricht also nicht den Richtlinien. Jede
Verschachtelungstiefe, die über „1“ hinausgeht, muss vermieden werden.
Frames und iframes in einer
Seite finden
Eines der ungeschriebenen Webgesetze
besagt, dass hinter einer URL immer nur
eine Seite stehen sollte. Das Prinzip lautet
„One URL, One Page“. Frames brechen
dieses Gesetz, weil mit dieser Technik
nach der Eingabe einer URL gleich mehrere Seiten aufgerufen werden. Wenn ein
Programmierer mit Frames gearbeitet hat,
bedeutet das zwar nicht zwangsläufig,
Grammatikprüfung
in Deutsch
Seit Kurzem gibt es mit Validome unter der
Adresse http://validome.org eine Alternative zum offiziellen W3C-Validator. Der Vorteil diese Angebots ist seine Mehrsprachigkeit, unter anderem lässt sich auch Deutsch
einstellen. Probieren Sie einfach, welches
Programm Ihnen besser gefällt.
dass die Seite nicht gut zugänglich ist. Die
Technik bringt aber viele Probleme mit
sich. Zudem ist der Einsatz von Frames
ein Indiz dafür, dass der Webdesigner der
Zugänglichkeit der Site nur eine geringe
Priorität eingeräumt hat.
Um zu überprüfen, ob eine Seite normale Frames enthält, genügt bereits Firefox. Klicken Sie die Seite mit der rechten
Maustaste an. Falls sie Frames verwendet,
enthält das Kontextmenü des Browsers
den Eintrag „Aktueller Frame“. Eingebettete Frames („inline frames“, kurz
„iframes“ genannt) sind etwas schwieriger zu finden. Doch auch dafür hält die
Web Developer Toolbar eine Lösung bereit: Klicken Sie auf den Menübefehl
„Hervorheben | Frames hervorheben“.
Sämtliche Frames werden nun mit einem
farbigen Rahmen angezeigt.
Ein weiteres, wichtiges Kriterium für
die einfache Zugänglichkeit einer Site ist,
dass die enthaltenen Texte gut lesbar sind.
Dabei stehen zwei Fragen im Vordergrund: Ist der Kontrast zwischen Vorderund Hintergrundfarbe stark genug, und
lässt sich die Schrift skalieren?
Mit CSS: Die Site http://mein-brandenburg.com arbeitet mit Stylesheets, um ihre Inhalte zu präsentieren.
Auf ausreichende Helligkeit
und Kontrast testen
TIPP
Fur die Einschätzung des Farbkontrasts
genügt eine subjektive Beurteilung. Ausschlaggebend ist, ob der Text auch bei ungünstiger Beleuchtung gut lesbar ist. In
der BITV sind die Vorschriften strenger.
In Anforderung 2.1 heißt es:
● „Alle mit Farbe dargestellten Informationen müssen auch ohne Farbe verfügbar sein, z.B. durch den Kontext oder die
hierfür vorgesehenen Elemente der verwendeten Markup-Sprache.“
Um die auf der Seite verwendeten Farben zu deaktivieren, klicken Sie in der Web
Developer Toolbar im Menü „Deaktivieren“ einfach auf den Befehl „Farben“. Ist
der Text jetzt noch lesbar, oder ist er vielleicht sogar besser zu erkennen?
Wer es genauer wissen will, kann auf
http://macx.de/tools/farbanalyse.html
eine Farbanalyse nach W3C-Richtlinien
durchführen: Geben Sie einfach die hexadezimalen Farbwerte der Vorder- und
Hintergrundfarben ein und klicken Sie
auf den Button „Abschicken“. Schon werden Helligkeit und Kontrast der beiden
Farben durch die Website genau analysiert und erklärt. Dem Test liegt der vom
W3C vorgeschlagene Algorithmus zur Bestimmung von Helligkeit und Kontrast
zugrunde.
Skalierbarkeit der
verwendeten Texte
Die Anforderung 3.4 der BITV-Anlage
beschäftigt sich mit der flexiblen Gestaltung der Elemente:
Ohne CSS: Auch nach dem Deaktivieren der Stylesheets sind sämtliche Inhalte der Site über Links weiterhin zugänglich.
● „Es sind relative anstelle von absoluten
Einheiten in den Attributwerten der verwendeten Markup-Sprache und den StyleSheet-Property-Werten zu verwenden.“
Ganz gleich, ob der Besucher einer
Webseite sehbehindert ist oder ob er sich
beim Lesen einfach nur bequem zurücklehnen möchte – eine skalierbare Schrift
ist eine wichtige Voraussetzung für eine
benutzerfreundliche Seite.
In nahezu allen Browsern ändert man
die Schriftgröße über das Menü „Ansicht“
und den Befehl „Schriftgrad“. Alternativ
dazu drücken Sie die Taste [Strg] und drehen das Scrollrad der Maus. Firefox bietet
darüber hinaus auch eine leicht zu merkende Tastenkombination an: Zum Vergrößern drücken Sie [Strg]+[+], zum
Verkleinern [Strg]+[-]. Die Standardeinstellung erreichen Sie schließlich wieder
mit [Strg]+[0].
Beim Beurteilen der Skalierbarkeit der
Schrift auf einer Website gilt es zwei wichtige Punkte zu untersuchen: Ist die Schriftgröße auf der Seite überhaupt veränderbar? Und wenn ja, wie verhält sich das
Layout der Webseite beim Vergrößern der
Schrift?
Um die erste Frage zu klären, rufen Sie
die Seite im Internet Explorer 6 auf und
versuchen dann, über „Ansicht | Schriftgrad“ die Schriftgröße beispielsweise auf
„sehr groß“ zu stellen. Falls sich die Darstellung nicht verändert, wurde die Größe
in Pixeln definiert. Um die Schrift skalierbar zu machen, müssen die Schriftgrößen
im CSS mit relativen Einheiten wie Prozent oder em oder über Keywords wie etwa „small“ angegeben werden.
Wenn sich die Schriftgröße verändern
lässt, achten Sie darauf, wie flexibel das
Layout darauf reagieren kann. Zwar bricht
ab einem gewissen Punkt jedes Layout
auseinander, aber eine Modifikation der
Schriftgrößen um ein bis zwei Stufen sollte es schon vertragen.
Lassen sich die Grafiken
verlustfrei ausblenden?
Grafiken sind im Zusammenhang mit der
Zugänglichkeit einer Webseite eine besondere Herausforderung, da sie häufig
zusätzliche Informationen zum Verständnis der Inhalte und für die Navigation auf
der Website enthalten. Die Anweisung 1.1
der BITV-Anlage lautet jedoch:
Benutzerfreundlich: Trotz vergrößerter
Schrift bleibt das Layout erhalten.
„Für jedes Nicht-Text-Element ist ein
äquivalenter Text bereitzustellen.“
Generell unterscheidet man zwischen
informativen und dekorativen Grafiken.
Dekorative Typen wie beispielsweise Hintergrundbilder für den Kopfbereich spielen für die Zugänglichkeit kaum eine Rolle. Inhaltlich relevante Grafiken hingegen
müssen einen passenden Text enthalten,
der ihnen mit dem Attribut „alt“ zugewiesen wird. Probieren Sie aus, wie die Seite
ohne Grafiken aussieht. Kann der Besucher noch darauf navigieren, und gibt es
Alternativtexte für die Grafiken? Über das
Menü „Grafiken“ in der Toolbar werden
diese Tests vereinfacht.
Um zum Beispiel alle Grafiken auszublenden, klicken Sie im Untermenü „Grafiken deaktivieren“ auf „Alle Grafiken“.
Zum Testen des Alternativtexts gibt es
dann gleich mehrere Möglichkeiten: Zum
einen können Sie den Text mit dem Befehl „Alternativtext (alt) anzeigen“ in
Form eines kleinen, gelben Quickinfos
einblenden. Mit „Ersetze Grafiken durch
Alternativtext (alt)“ tauschen Sie die Grafiken gegen den Text aus. Und über das
Untermenü „Grafiken hervorheben“
markieren Sie mit „Grafiken mit leerem
Alternativtext (alt)“ und „Grafiken ohne
Alternativtext (alt)“ die entsprechenden
Bilder durch farbige Rahmenlinien.
●
Automatische Prüfung mit
Cynthia & Co.
Im Internet gibt es eine ganze Reihe kostenloser Online-Tools zum Überprüfen
der Barrierefreiheit. Der Veteran der Accessibility-Checks ist unter dem Namen
„Bobby“ bekannt geworden, heißt aber
korrekt WebXact und ist verfügbar unter
http://webxact.watchfire.com. Empfehlenswert ist auch Cynthia says von Hisoft-
ware, zu finden unter der Adresse http://
contentquality.com. Visuell eher schmucklos, aber sehr informativ ist Wave von
Webaim.org (http://wave.webaim.org).
Es zeigt keine langen Fehlerlisten an, sondern gibt seine Kommentare zur eingegebenen URL direkt auf der Webseite aus.
Als Beispiel dient ein kurzer Check mit
Cynthia says. Das Programm nennt bei
jedem gefundenen Problem eine Nummer, welche auf die entsprechende Bedingung der BITV Anlage 1 verweist. Auch
hier können Sie wieder die Web Developer Toolbar einsetzen: Klicken Sie auf
„Werkzeuge | Barrierefreiheit überprüfen“. Damit schicken Sie die Seite zu
Cynthia says, und das Programm überprüft daraufhin die Barrierefreiheit gemäß den WCA Guidelines. In der rechten
Spalte mit der Überschrift „Passed“ sehen
Sie, ob die Seite die in der linken Spalte
beschriebene Bedingung erfüllt.
Dieser kurze Quickcheck vermittelt bereits einen guten Eindruck von der Barrierefreiheit einer Webseite. Weitere Informationen und Testverfahren liefert das
Projekt „Barrierefrei informieren und
kommunizieren“ unter http://bik-online.
Peter Müller
info.
BUCH-TIPPS
Barrierefreies
Webdesign
Alle Literaturtipps tragen zwar exakt
denselben Titel, unterscheiden sich aber in
Preis und Informationstiefe deutlich:
● Den Artikel „Barrierefreies Webdesign“
von Peter Müller finden Sie als PDF-Datei
auf der CD zu diesem Heft.
● Einen guten Einstieg ins Thema vermittelt auch das Heft „Barrierefreies Webdesign“ von Jan Eric Hellbusch zum Preis von
4,40 Euro bei KnowWare.de (ISBN
8790785754).
● Nicht ganz billig, aber wunderschön gestaltet und eine Pflichtlektüre für jeden,
der es mit der Barrierefreiheit ernst meint,
ist das Buch „Barrierefreies Webdesign“
von Angie Radtke und Michael Charlier. Es
ist zum Preis von 39,95 Euro bei AddisonWesley erschienen (ISBN 3-8273-2379-7).
● Voraussichtlich im Februar 2007 erscheint bei Galileo Press unter dem Titel
„Barrierefreies Webdesign“ ein Buch von
Stefan Münz und Tiffany Wyatt, das sich
vor allem durch seine vielen Praxisbeispiele auszeichnen wird.
45
WICHTIGE RECHTS-TIPPS
10 goldene Regeln
für Webmaster
Autor und Anwalt Michael
Rohrlich informiert unter
www.rechtssicher.info.
Beim eigenen Webauftritt sind auch einige juristische Feinheiten zu
beachten – für Homepage-Betreiber und erst recht für Shop-Anbieter.
N
ach wie vor werden viele Homepage-Betreiber Opfer gewerbsmäßiger Abmahner, weil ihre Seiten
nicht exakt den rechtlichen Vorschriften
entsprechen. In diesem Beitrag zählen wir
die zehn wichtigsten Regeln für jede On-
linepräsenz auf. Wer sie einhält, liefert den
Abmahnern keine Anhaltspunkte.
Die an dieser Stelle angeführten Informationen geben allerdings nur einen stichpunktartigen Überblick über die zu beachtenden Gesichtspunkte. Dabei handelt es
FÜNF TOP-TIPPS
sich um die im Online-Alltag besonders
häufig auftretenden Problemfelder. Weitere Detailinformationen rund um dieses
spannende Thema sowie Urteile und Gesetze im Volltext finden sich zuhauf im
Internet.
FÜNF TOP-TIPPS
Was alle Website-Betreiber wissen müssen
Regeln für E-Shops
1. Domainnamen
1. Preise
Folgende Domainnamen können Sie nutzen,
sofern nicht die Rechte Dritter betroffen sind:
● den eigenen Familiennamen
● den eigenen Firmennamen
● Fantasienamen oder -bezeichnungen
● Gattungsbegriffe, die nicht gegen das
Wettbewerbsrecht verstoßen
Vermeiden sollten Sie dagegen:
● offensichtlich geschützte Namen von Firmen oder Prominenten
● Bezeichnungen fremder Werke (Bücher,
TV-Sendungen etc.)
● Städte- oder Behördennamen sowie Namen von Bundesländern
● „Tippfehler-Domains“, etwa „mircosoft“
oder „jahoo“
sprechende Link muss für Besucher leicht
auffindbar sein (siehe CD-Code „HTML“).
3. Links
Das Internet lebt von Verlinkungen einzelner
Webseiten auf andere, es darf jedoch nicht
auf rechtswidrige Inhalte verwiesen werden.
Daher gilt es, die verlinkten Seiten gründlich
zu prüfen und einen ausdrücklichen Haftungsausschluss im Impressum zu formulieren,
zum Beispiel so: „Haftungshinweis: Trotz
sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die Inhalte externer Links. Für den Inhalt der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich.“
4. Inhalte
2. Impressum
Das Impressum einer Webseite muss über
die Identität des Betreibers informieren. Dazu gehören Name und Anschrift sowie weitere Kontaktmöglichkeiten (Telefon, Fax, EMail). Bei Firmen-Websites kommen weitere
Angaben hinzu: Bei einer GmbH müssen etwa
auch die vertretungsberechtigten Personen
oder Details zum Handelsregistereintrag angegeben werden. Unter www.digi-info.de/
de/netlaw/webimpressum/assistent.php
finden Sie einen Assistenten, der Sie Schritt
für Schritt durch den Paragrafendschungel
führt. Nicht nur gewerblich genutzte Webseiten müssen ein Impressum aufweisen, sondern unter Umständen auch private. Der ent-
Inhalte von anderen Webseiten dürfen Sie
nicht ohne Zustimmung des Betreibers beziehungsweise des Urhebers übernehmen.
Aber auch selbst verfasste Texte dürfen nicht
gegen geltendes Recht verstoßen. Tabu sind
also zum Beispiel Beleidigungen oder strafbare rechtsradikale Propaganda.
5. Blogs, Gästebücher & Co.
Gerade bei interaktiven Inhalten ist erhöhte
Wachsamkeit angebracht. Zwar müssen Sie
als Betreiber eines Blogs oder Forums rechtswidrige Beiträge erst entfernen, nachdem
Sie davon Kenntnis erlangt haben. Dennoch
sollten Sie so oft wie möglich zumindest
stichpunktartige Kontrollen durchführen.
Gewerbetreibende müssen stets eindeutige, nachvollziehbare Preise angeben. Dabei ist der Grundpreis inklusive gesetzlicher Mehrwertsteuer zu nennen und auf
weitere Preisbestandteile sowie etwaige
Versandkosten hinzuweisen.
2. AGB
Die Allgemeinen Geschäftsbedingungen
(AGB) muss der Käufer vor Abschluss des
Vertrages zur Kenntnis nehmen können.
Sie müssen klar verständlich sein, Missverständnisse gehen zulasten des Verkäufers.
3. Rückgabe-/Widerrufsrecht
Verbraucher müssen vor Vertragsabschluss
auch über ihr Rückgabe-/Widerrufsrecht
belehrt werden, eventuell mit Regelungen
über die Rücksendekosten.
4. Newsletter
Damit aus einem Newsletter kein Spam
wird, ist die Zustimmung aller Empfänger
vor Erhalt der E-Mail erforderlich. Der Versender muss die Anmeldung zum Newsletter-Abo auf Anfrage nachweisen können.
5. Datenschutz
Wenn Kundendaten – etwa zu Werbezwecken – weiterverwendet werden sollen,
müssen die Kunden darüber informiert sein.
Eine ausdrückliche Zustimmung durch die
Kunden ist zwingend erforderlich.
Mitmachen & gewinnen!
Ihre Meinung zählt! Wir möchten gerne wissen, wie Ihnen dieses Sonderheft von CHIP gefallen hat. Helfen
Sie uns dabei, das Heft noch besser zu machen. Füllen Sie dazu unter www.chip.de/web-umfrage den
digitalen Fragebogen aus. Mit etwas Glück gewinnen Sie einen der attraktiven Preise.
5 x Software von H&M
System Software
Preise im
Gesamtwert
von ca.
Die Software StudioLine Web 3 von H&M System Software stellt Ihnen in einem Programm alle Tools zur Verfügung, die Sie zur Erstellung eines professionellen Internetauftritts benötigen: flexibler Seiteneditor, professionelle Designer-Vorlagen, umfangreiche Layouthilfen
etc. Mit StudioLine Web 3 lassen sich ohne HTML- und
JavaScript-Kenntnisse Webseiten leicht realisieren. Mit
der integrierten Bildarchivierungs- und bearbeitungssoftware StudioLine Photo ist sogar das Bearbeiten von
Fotos direkt im Seitenlayout der Website möglich.
2550 nEeun!ro
gewin
Gesamtwert: 1450 Euro
3 x Software von Microsoft
Microsoft Office FrontPage 2003 macht es sowohl Einsteigern als
auch professionellen Webentwicklern einfach, Webseiten zu gestalten. Die Software verfügt über Design-, Dokumenterstellungs-,
Daten- und Veröffentlichungstools, mit denen Sie ab sofort dynamische und professionelle Internetauftritte erstellen können. Und
nicht nur beim Layout, sondern auch bei der Codierung ist Ihnen
FrontPage 2003 eine Hilfe.
1 x E-Learning-Kurs und
5 x Bücher von W3L
Das Buch „Webdesign & Web-Ergonomie – Websites professionell gestalten“ von W3L zeigt,
dass nicht nur Design, sondern auch Ergonomie
und Funktionalität einer Website wichtig sind.
Zusätzlich zum Buch können Sie einen E-Learning-Kurs gewinnen. Bei diesem Onlinekurs lernen Sie Schritt für Schritt an praktischen Beispielen, wie man eine professionell aussehende
und gut bedienbare Website gestaltet.
UND SO GEHT’S
1. Online gehen: Rufen Sie unsere Umfrage im Internet unter
der folgenden Adresse auf: www.chip.de/web-umfrage
2. Fragebogen ausfüllen: Füllen Sie den Fragebogen aus und
geben Sie Ihre Daten und Ihre E-Mail-Adresse an, damit wir Sie
im Falle eines Gewinns benachrichtigen können.
3. Gewinnchance: Wer den Fragebogen vollständig ausfüllt,
nimmt automatisch an der Verlosung teil.
Teilnahmeschluss: 31. Januar 2007
Mitarbeiter von Vogel Burda Communications und der beteiligten Sponsoren
dürfen nicht teilnehmen. Eine Barauszahlung der Gewinne ist nicht möglich. Der
Rechtsweg ist ausgeschlossen.
49
VIDEOS EINBINDEN
Homepage mit Film
S
ie drehen gerne Videos und wollen
sie anderen zeigen? Dann setzen
Sie doch Ihre Website als Plattform
ein. Nutzen Sie die kostenlosen Services
von YouTube oder Google, um Ihr Video
zu hosten. Diese Dienste bieten Ihnen
über ihre Portale zudem eine Möglichkeit,
AUF EINEN
AUF
EINENBLICK
BLICK
, Videos einbinden
Wie Sie Filme von Google Video und
YouTube in Ihre Seiten aufnehmen s52
Filme nach FLV konvertieren
s53
Alle Tools auf CD
ENCODER: Windows Media Encoder 9
zum Enkodieren in WMV hWindows
FLASH-VIDEO: Riva FLV Encoder zum
Enkodieren in Flash hWindows
Ihre Werke bekannt zu machen. Bei beiden Anbietern werden die Filme mit dem
Flash-Player in einer einheitlichen Auflösung wiedergegeben. Damit das Hochladen der Videos klappt, müssen Sie allerdings einige Voraussetzungen beachten –
dazu später mehr. Zunächst kümmern wir
uns um die Ausstattung.
Als Erstes benötigen Sie natürlich eine
Kamera zum Drehen der Filme. Das muss
nicht unbedingt eine Videokamera sein,
die im Idealfall bereits digital aufzeichnet,
sondern Sie können auch die Videofunktion einer Fotokamera oder eines Handys
verwenden. Eine weitere Alternative ist eine
Webcam, die direkt an den Computer angeschlossen ist.
Doch ganz gleich, welche Art von Aufzeichnungsgerät Sie verwenden, zunächst
speichern Sie die Filme auf der Festplatte
Ihres PCs. Zum Kopieren der Daten dient
je nach Gerät die Firewire- oder USBSchnittstelle. Bei einem analogen Camcorder läuft die Übertragung über eine analoge Fernsehkarte. Zum Schneiden und
Bearbeiten des Videomaterials brauchen
Sie eine Videobearbeitungs-Software. Zwar
können Sie in vielen Fällen auch die unveränderten Originaldaten Ihrer Kamera
verwenden, doch müssen Sie sie normalerweise erst noch in ein anderes Format
umwandeln.
Eine digitale Videokamera arbeitet zumeist mit dem Format DV. Die Aufnahmen sind üblicherweise unkomprimiert
und benötigen daher viel Speicherplatz.
Allein schon aus diesem Grund empfiehlt
es sich, den Film vor dem Upload ins Internet in ein anderes, platzsparendes Format zu konvertieren. Gut geeignet ist dafür MPEG4 oder eines seiner Unterformate Divx oder Xvid. MPEG4 wurde spe-
Foto: Buena Vista, „Fluch der Karibik 2“; Composing: V. Hildebrand
Videodienste wie YouTube oder Google Video bieten ihre Filme nicht nur auf den eigenen Seiten
an, sondern erlauben auch eine Einbindung in externe Websites. Wie Sie dabei im Detail vorgehen
müssen und wie Sie Ihre Filme über Ihren eigenen Server streamen, zeigt dieser Beitrag.
ziell für das Streamen von Videos entwickelt und ist besonders platzsparend. Kann
Ihre Bearbeitungssoftware mit diesem
Format nicht umgehen, finden Sie Alternativen in Form von Quicktime Movies,
anderen MPEG-Formaten und AVI-Dateien, die mit schwächer komprimierenden
Codecs angelegt wurden.
Bei der Videobearbeitung sollten Sie
daran denken, dass das Hochladen der
Dateien recht zeitaufwändig ist. Daher
gilt: Je kleiner die Filmdatei ist, desto besser. Ohne Breitband-Verbindung kann es
mehrere Stunden dauern, bis das Video
auf dem Server gespeichert ist. Google besteht daher darauf, dass die Filme per DSL
übertragen werden.
YouTube geht einen anderen Weg und
begrenzt die maximale Größe der hochgeladenen Dateien auf 100 MByte und die
Länge der Filme auf zehn Minuten. Diese
Grenzen lassen sich nur mit einem Directors Account umgehen. Mehr dazu erfahren Sie unter der Adresse www.youtube.
com/director.
Filme für Google Video
Um Google Video nutzen zu können, benötigen Sie einen Google-Account. Ein
solches Konto legen Sie an, indem Sie auf
der Startseite www.google.de oben rechts
auf „Anmelden“ klicken und danach „Legen Sie jetzt ein Konto an“ wählen. Google
fragt Sie nun nach Ihrer E-Mail-Adresse
und einem Passwort. Danach wählen Sie
Ihr Heimatland aus und geben zur Bestätigung eine als Grafik angezeigte Buchstabenkombination ein. Nach einem Klick
auf „Ich stimme zu. Mein Konto einrichten“ ist Ihr Konto bereit. Bevor Sie sich
jedoch einloggen können, müssen Sie zunächst noch Ihre E-Mail-Adresse bestätigen, Sie erhalten dazu eine Mail von
Google. Erst nach einem Klick auf den
Link in dieser Nachricht haben Sie Zugriff auf das Konto.
Nachdem Sie das Konto eingerichtet
haben, öffnen Sie die Seite http://video.
google.de. Ein Klick auf „Eigene Videos
hochladen und weitergeben“ führt Sie zur
Seite für die Uploads der Filme. Klicken
Sie hinter „Videodatei“ auf „Durchsuchen“. Über den Dateimanager lokalisieren Sie die Videodatei auf Ihrer Festplatte
und übernehmen den Pfad mit einem
Klick auf „Öffnen“ in das Eingabefeld.
Geben Sie dann einen aussagekräftigen
Namen für Ihren Film ein. Füllen Sie das
Feld „Beschreibung“ aus, damit der Betrachter bereits weiß, was ihn erwartet.
Aus der Liste „Genre“ wählen Sie eine Kategorie für Ihren Film aus.
Die Optionen bei „Zugriff“ entscheiden darüber, wer Ihr Video sehen darf.
Wenn Sie „Öffentlich“ einstellen, taucht
Ihr Film auf den Seiten von Google Video
auf und kann von jedem Besucher über
die integrierte Suchfunktion gefunden
werden. Die Wahl von „Nicht aufgelistet“
hingegen sorgt dafür, dass man nur über
einen direkten Link auf den Film zugreifen kann. Über diesen Link können Sie
den Film auch in Ihre Website einbinden.
Es geht also bei dieser Einstellung lediglich darum, wie der Film innerhalb von
Google Video behandelt wird.
Zum Abschluss müssen Sie noch den
Allgemeinen Geschäftsbedingungen zustimmen, danach starten Sie die Übertragung mit einem Klick auf „Video hochladen“. Sobald der Film auf den Server kopiert wurde, erscheint ein Vorschaubild.
Darunter zeigt das Videoportal den direkten Link zu Ihrem Film an.
Wollen Sie mehrere Filme gleichzeitig
hochladen oder Dateien mit einer Größe
von mehr als 100 MByte übertragen,
empfiehlt Google den kostenlosen Google
Video Uploader. Sie erhalten die Software,
indem Sie in der Übersicht Ihrer Filme
dem Link „Klicken Sie zum Beginnen
hier“ folgen und im folgenden Fenster
unter „Desktop Uploader“ auf „Weitere
Informationen“ und „Windows-Uploader installieren“ klicken. Richten Sie das
Programm auf Ihrem PC ein, geben Sie
KNOW-HOW
Formatfragen
Mögliche Formate für Google Video: AVI,
ASF, Quicktime, Windows Media, MPEG.
Das Video muss mit mindestens zwölf Bildern pro Sekunde laufen und eine Bitrate
von mindestens 260 KBit/s aufweisen.
Google empfiehlt den Benutzern seines Videodiensts MPEG4-Dateien mit einer Bitrate von 2 MBit/s oder MPEG2-Files mit 5
MBit/s. Die Auflösung sollte 640 x 480 betragen bei 30 Frames pro Sekunde.
Mögliche Formate für YouTube: AVI, MOV,
MPG. Die Firma empfiehlt MPEG4-Filme
mit einer Auflösung von 320 x 240 Bildpunkten.
nach dem Aufruf unter „Login“ Ihre Kontodaten ein und fügen Sie dann über
„Add“ die Filmdateien der Liste hinzu.
Anschließend bestätigen Sie die Bedingungen im unteren Teil des Fensters mit
einem Häkchen und starten die Übertragung mit einem Klick auf „Upload now“.
Um die Eigenschaften der hochgeladenen Filme zu ändern und ihnen einen
Titel und eine Beschreibung hinzuzufügen, öffnen Sie Ihren Account bei Google
Video und klicken auf „Hochgeladene Videos“. Sie erreichen dann eine Liste aller
Filme, die Sie hochgeladen haben. Bei jedem Eintrag finden Sie Links, mit denen
Sie die Informationen bearbeiten können.
Der Link zum Video liegt unter „Titel“.
Videos bei YouTube hochladen
Um Videos über YouTube zu zeigen, müssen Sie sich ebenfalls zunächst anmelden. k
Bedienerfreundlich: Google bietet ein einfaches
Web-Interface
zum Hochladen
von Filmen an.
51
Überblick: Unter
„My Videos“ sehen
Sie eine Liste der
Filme, die Sie bereits
hochgeladen haben.
googleplayer.swf?docId=12345´>
</embed>
Damit das Video gleich startet, ohne dass
der Betrachter auf den Abspielknopf drücken muss, teilen Sie dem Player mit, dass
der Autostart-Modus gewünscht ist:
<embed FlashVars=´autoPlay=
true³...
Videos von YouTube einbinden
Dazu gehen Sie auf www.youtube.com
und klicken oben rechts auf „Sign Up“.
Füllen Sie das Anmeldeformular mit Ihrer
E-Mail-Adresse, einem Benutzernamen,
einem Passwort, Ihrem Geburtsdatum,
Heimatland und der Angabe Ihrer Geschlechtszugehörigkeit. Leider verrät YouTube erst beim Versuch, den Account anzulegen, ob der gewünschte Benutzername noch verfügbar ist. Bei jedem weiteren Anlauf müssen Sie neben dem neuen Benutzernamen auch das Passwort erneut zweimal eingeben und den „Verification“-Code wieder eintippen. Achten Sie
beim Eingeben des Codes auf die Großund Kleinschreibung!
Sobald diese Hürde überwunden ist,
gelangen Sie auf eine Seite, auf der Sie andere Personen angeben, mit denen Sie Ihre
Videos teilen wollen. Um eine Filmdatei
hochzuladen, klicken Sie auf „Upload your
Video“. Die Funktion für den Upload Ihrer Filme steht Ihnen jedoch nicht sofort
zur Verfügung. Vorher müssen Sie noch
in einer E-Mail von YouTube die angegebene Mailadresse verifizieren.
Nachdem das erledigt ist, öffnet sich
die Seite „Video Upload (Step 1 of 2)“.
Geben Sie hier Titel, Beschreibung und
die Tags für Ihren Film ein. Bei den Tags
sollten Sie sich Gedanken darüber machen, welche Stichworte Ihr Werk am besten beschreiben, denn darüber wird Ihr
Video später von anderen Benutzern gefunden. Darunter wählen Sie dann noch
eine Kategorie aus, in die Ihr Film passt.
Nach einem Klick auf „Continue“ klicken Sie auf den Button „Browse“ und
steuern den Speicherort Ihres Videos auf
der Festplatte an. Ein Klick auf „Öffnen“,
und YouTube übernimmt den Pfad des
Films in sein Formular. Dort geben Sie an,
ob das Video öffentlich zugänglich oder
ausschließlich der privaten Nutzung vorbehalten sein soll. Stellen Sie „Public“ ein,
damit der Film auf YouTube angezeigt
und von jedem angeschaut werden kann.
Mit der Funktion „Private“ beschränken
Sie den Zugriff auf die Personen, die Sie
dazu einladen. Mit einem Klick auf „Upload“ kopieren Sie das Video auf den Server von YouTube. Wie lang das dauert,
hängt natürlich von der Größe der Datei
und der Geschwindigkeit Ihrer Internetverbindung ab. Laut YouTube dauert die
Übertragung durchschnittlich etwa ein
bis fünf Minuten pro Megabyte Film.
Nachdem der Vorgang beendet ist,
werden Sie auf eine Seite geleitet, auf der
Sie die Einstellungen für Ihr Video treffen
können. Sie nennt Ihnen auch den direkten Link zu Ihrem Video und den
Code, mit dem Sie es in Ihre Homepage
integrieren können. Wenn Sie den Film
später einmal vom Server löschen oder
seine Daten ändern wollen, klicken Sie
einfach auf „My Videos“.
Google-Videos einbinden
Um einen Film auf Google Video auf Ihrer eigenen Website zu zeigen, brauchen
Sie seine Identifikationsnummer. Dabei
handelt es sich um eine Zahlenkombination, die Sie in der URL des Videos hinter
dem Parameter „DocId=“ finden. Angenommen, die Identifikationsnummer des
Videos lautet „12345“, dann integrieren
Sie es mit folgendem HTML-Schnipsel
auf Ihrer Seite:
<embed style=´width:400px;
height:326px;´
id=´VideoPlayback´ type=
³application/x-shockwave-flash´
src=´http://video.google.com/
Auf der YouTube-Website finden Sie unter dem Vorschaubild jedes Films ein
kurzes Stück HTML-Code, mit dem Sie
ihn in Ihre Webseite einbinden können.
Der Code ist für jeden Film identisch, es
ändert sich lediglich die Kennung aus
Buchstaben, Zahlen und Sonderzeichen,
die das Video eindeutig identifiziert.
Eines der bekanntesten YouTube-Videos von „lonelygirl15“ besitzt beispielsweise den Code „5Q_y0HdJ4x8“. Damit
die Besucher Ihres Webauftritts es direkt
aufrufen können, versehen Sie den Quellcode Ihrer Seite mit den folgenden Zeilen:
<object width=³425³
height=³350³>
<param name=³movie³ value=
³http://www.youtube.com/
v/5Q_y0HdJ4x8³></param>
<embed src=³http://www.
youtube.com/v/5Q_y0HdJ4x8³
type=³application/xshockwave-flash³
width=³425³ height=³350³>
</embed>
</object>
Beim Aufruf der Seite lädt der Browser
des Besuchers nun ein Shockwave-Programm, das als Streaming-Player für den
Film dient. Zunächst zeigt die Software
lediglich den ersten Frame des Films und
das „Play“-Symbol. Nach einem Klick lädt
der Shockwave-Player den Film von der
YouTube-Website herunter und zeigt ihn
simultan dazu an.
Verzichten Sie darauf, durch Änderungen an den Parametern für die Höhe
und Breite des Videofensters die Darstellung des Films zu vergrößern. Der Videostream arbeitet mit einer festen Auflösung, das Video wird also einfach nur
stärker gepixelt.
Automatisch abspielen
Damit das Video nach Aufruf der Seite
sofort anläuft, hängen Sie den Parameter
„&autoplay=1“ an die beiden URLs in Ih-
x-shockwave-flash³
wmode=³transparent³ width=³425³
height=³350³></embed>
</object>
Unschön: Ohne Transparenz ergeben
sich beim YouTube-Player auf dunklem
Hintergrund weiße Randeffekte.
rem HTML-Code an. Nach der Änderung
sollte der Abschnitt dann folgendermaßen aussehen:
height=³350³>
<param name=³movie³
value=³http://www.youtube.com/
v/5Q_y0HdJ4x8&autoplay=1³>
</param>
<embed src=³http://
www.youtube.com/
v/5Q_y0HdJ4x8
&autoplay=1³ type=
³application/x-shockwave-flash³
width=³425³ height=³350³>
</embed>
</object>
Transparenz aktivieren
Bei Webseiten mit dunklem Hintergrund
ist der Shockwave-Player mit einem weißen Randstreifen umgeben (siehe dazu
die Abbildung oben). Um diesen Effekt zu
unterdrücken, schalten Sie den Transparenzmodus ein. Dazu übergeben Sie dem
eingefügten Objekt den Parameter „wmode“ mit dem Wert „transparent“. Damit
das bei allen Browsern funktioniert, setzen Sie den Parameter im Tag „<embed>“
ein weiteres Mal:
Videos selbst hosten
Player und Videos hochladen
YouTube, Google Video & Co. haben den
Vorteil, dass Sie mit Ihren Filmen eine
riesige Menge an Benutzern erreichen.
Doch das ist gar nicht immer erwünscht.
Wenn Sie ein Video auf Ihrem eigenen
Webserver lagern, haben Sie zudem mehr
Optionen beim Format und können die
Filme beispielsweise auch in Ihrem Intranet nutzen, ohne die DSL-Leitung ins Internet zu strapazieren.
Das Bereitstellen eines Videos auf
einem lokalen Intranet-Server ist ganz
einfach. Denn die Technik, die die großen
Videohoster verwenden, ist frei verfügbar.
YouTube beispielsweise wandelt Ihre
hochgeladenen Videos in Flash-Videodateien mit der Endung FLV um, die es
auf seinem Server speichert. Die Files lassen sich dann über das Streaming-Verfahren im Browser wiedergeben.
Der Videoplayer von YouTube wird in einer Variante angeboten, die für den privaten Gebrauch kostenlos ist. Bei kommerzieller Nutzung kostet er 15 Euro. Holen
Sie sich die Software von www.jeroenwi
jering.com/?item=Flash_Video_Player.
Zusammen mit dem Player erhalten Sie
die Datei flvplayer.swf, die Sie mit Ihren
Videos auf Ihrem Server ablegen.
Angenommen, Sie haben den Player
und Ihre Filme im gleichen Verzeichnis
gespeichert, dann baut folgender HTMLCode das Video beispiel.flv transparent in
eine Webseite ein:
Ins FLV-Format konvertieren
Mit dem kostenlosen Programm Riva FLV
Encoder von www.rivavx.de?encoder
wandeln Sie Ihre Filme auf dem lokalen
Rechner um. Die Software akzeptiert die
Formate DV, Quicktime, AVI und MPEG.
Die Parameter wie Bildgröße, Bitrate oder
Soundqualität können Sie selbst vorgeben. Der Encoder bietet aber auch verschiedene Profile an, um etwa die Bandbreite von DSL- oder ISDN-Verbindungen
optimal auszunutzen. Über die Vorschau
height=³350³>
value=³http://www.youtube.com/
v/5Q_y0HdJ4x8³></param>
<param name=³wmode³
value=³transparent³></param>
<embed src=³http://www.
youtube.com/v/5Q_y0HdJ4x8 Ä
type=³application/
können Sie das Ergebnis vorab beurteilen
und gegebenenfalls noch Einstellungen
korrigieren, ehe Sie die tatsächliche Umrechnung durchführen lassen.
Riva FLV Encoder: Mit dieser Software
wandeln Sie Ihre Videodateien in Streaminggeeignete FLV-Files um.
<object type=³application/xshockwave-flash³ width=³400³
height=³300³
wmode=³transparent³
data=³flvplayer.swf?file=
beispiel.flv³>
value=³flvplayer.swf?file=
beispiel.flv³ />
<param name=³wmode³
value=³transparent³ />
</object>
Passen Sie dann noch die Größenangaben
an die Parameter an, die Sie beim Erzeugen der FLV-Datei verwendet haben.
Weitere Parameter nutzen
Bei Ihrem privaten Videoserver können
Sie mit dem Schalter „&autostart=true“
den Film ebenfalls sofort beim Aufruf der
Seite starten lassen. Mit „&repeat=1“ erzeugen Sie zusätzlich eine Endlosschleife,
mit der das Video immer wieder von
Neuem abgespielt wird, bis der Besucher
auf den Pausenknopf drückt.
Falls der erste Videoframe als Vorschaubild ungeeignet ist, definieren Sie
ein anderes Startbild. Erweitern Sie dazu
die beiden enthaltenen URLs um den Parameter „&image=“ und fügen Sie den
Pfad zu einer Bilddatei an.
Auch der englische Text „Click to play“,
der nach dem Laden ohne Autostart-Option erscheint, lässt sich nach Belieben
ändern. Verwenden Sie dazu den Parameter „clicktext“.
Franziska Goldmann, Markus Schraudolph
53
SO REIZEN SIE FLICKR VOLL AUS
Digi-Fotos online stellen
F
otogalerien im Internet gibt es
schon recht lange. Sie wählen Ihre
besten digitalen Bilder aus, laden
sie hoch und können Sie so anderen zugänglich machen. Der Vorteil gegenüber
handgestrickten Lösungen, bei denen die
Bilder zusammen mit dem notwendigen
HTML-Code auf die eigene Website
Was Flickr auszeichnet
AUF EINEN
AUF
EINENBLICK
BLICK
, Fotos ins Web stellen
Wie Sie Ihre Digitalfotos zu Flickr hochladen und katalogisieren
s55
Den Zugang zu den Fotos regeln
s56
Wie Sie Geo-Tagging einsetzen
s57
hochgeladen werden, ist der geringere
Aufwand. Denn das ganze Gerüst um die
Bilder herum – also beispielsweise die Navigation, das Anlegen von Thumbnails
für Bilderübersichten und das Generieren
von Alben – erledigt die Anwendung
auf dem Webserver. Der Fotodienst mit
den interessantesten Möglichkeiten ist
unumstritten Flickr.
Groß gemacht haben Flickr seine einfache
Bedienung und interessante Funktionen.
Wirklich neu gegenüber früheren Onlinegalerien war allerdings der CommunityGedanke. Denn bis dahin bildeten sämtliche Fotogalerien immer nur ein Pendant
des klassischen Fotoalbums in Papierform: Sie speicherten zwar die Fotos aller
ihrer Anwender in einer gemeinsamen
Datenbank, waren aber immer nur dafür
konzipiert, die Alben eines bestimmten
Benutzers zu zeigen.
Flickr dagegen lebt davon, dass zu den
eigenen Bildern auch passende Bilder anderer User als weiterführende Vorschläge
erscheinen. Damit das funktioniert, nutzt
Flickr ein ausgeklügeltes Tagging-System,
also die Vergabe von Stichwörtern zu
einem Bild. Haben Sie beispielsweise die
Fotos einer Silvesterfeier mit den richtigen Tags versehen, kann es durchaus sein,
dass bei den von Flickr vorgeschlagenen
Bildern anderer User einige Fotos dersel-
Keine andere Foto-Community hat mehr Mitglieder als Flickr – kein Wunder, denn Flickrs Möglichkeiten, Bilder hochzuladen, zu präsentieren und mit anderen Menschen zu teilen, sind unglaublich
vielfältig. CHIP sagt Ihnen, wie Sie Ihren Digitalfotos ein neues Publikum verschaffen.
ben Feier zu sehen sind – vielleicht sogar
mit Ihnen als Motiv.
Dabei bringt Flickr zwar auf demselben Weg auch Ihre eigenen Bilder anderen nahe, aber nur, wenn Sie das auch
möchten: Fotos privater Natur, die nur
Ihnen selbst oder Berechtigten zugänglich
sein sollen, müssen Sie lediglich entsprechend kennzeichnen.
Wie Sie Ihre Bilder hochladen
Flickr bietet zunächst den üblichen Browser-Upload an. Im Dialog, der mit dem
Menüpunkt „You | Upload photos“ oder
direkt mit dem gleichnamigen Link auf
der Flickr-Startseite erreichbar ist, haben
Sie die Möglichkeit, bis zu sechs Bilder
auf Ihrer Festplatte auszusuchen und per
Klick auf den Button „Upload“ an Flickr
zu senden.
Gehören alle Bilder zu einer Serie,
dann vergeben Sie gleich im Upload-Dialog die passenden Stichwörter für alle Bilder. Ansonsten haben Sie nach dem Hochladen noch Gelegenheit, die Tags für jedes
einzelne Foto festzulegen.
Viel praktischer als per Browser lässt
sich der Upload allerdings mit dem speziellen Tool Uploadr vornehmen, das es für
Windows und Mac OS X gibt. Der Uploadr ist ein kleines Fenster, auf das Sie
per Drag & Drop Bilder von Ihrer Festplatte ziehen können. Bei großen Bilddateien warnt das Tool vor langen UploadZeiten und bietet eine Verkleinerung auf
sinnvolle Maße an. Zusätzlich sehen Sie
anhand eines Balkens, wie weit Sie Ihr
persönliches, monatliches Upload-Limit
bereits ausgereizt haben, und erhalten bei
Überschreitung eine Warnung.
Haben Sie alle Bilder für Flickr zusammengestellt, drücken Sie auf den UploadKnopf und können wie bei der BrowserVariante Tags vergeben, die Fotos einem
Album zuordnen und festlegen, wer die
Bilder sehen darf.
Meldet das Tool den Abschluss des Ladevorgangs, sollten Sie auf den Button
„See Photos“ klicken. Denn damit erhalten Sie neben der Übersicht aller eben
hochgeladenen Bilder im Browser auch
die Möglichkeit, die Tags und Bildtitel
noch einmal zu ändern. Als StandardBildnamen nimmt Flickr den jeweiligen
Dateinamen ohne die Typ-Endung. Und
ein Bildtitel wie „img1234“ macht sich im
Online-Album nicht besonders gut.
Upload-Varianten nutzen
Sitzen Sie bequem vor dem heimischen
Computer, sind diese Möglichkeiten zum
Hochladen der Bilder völlig ausreichend.
Unterwegs benötigen Sie dagegen andere
Dienste.
Eine sinnvolle Upload-Option von
Flickr ist etwa das Einstellen der Bilder
via E-Mail. Dazu gehen Sie auf Ihre Konto-Einstellungen und wählen dort „Uploading by email“. Nun sehen Sie rechts
die von Flickr für Sie angelegte Mailadresse, beispielsweise „bad123taste@pho
tos.flickr.com“. Sobald auf dieser „magischen“ Adresse eine Nachricht mit angehängten Bildern eintrifft, wird sie in
Ihre Bildersammlung auf Flickr aufgenommen.
In der Eingabezeile unter der Adresse
können Sie allen Bildern, die Sie auf diesem Weg einstellen möchten, StandardTags übergeben. Das ist praktisch, wenn
Sie diesen Service etwa vor einer Reise
einrichten und so beispielsweise allen Bildern automatisch die Tags „hitchhiking
thailand“ mitgeben.
Den Bildtitel bezieht Flickr aus der
Betreffzeile, als Beschreibung dient der
textliche Inhalt der E-Mail.
Darüber hinaus gibt es noch spezielle
Codes innerhalb der E-Mail, etwa um
Tags zu setzen. Dazu nehmen Sie in die
E-Mail eine Zeile auf, die mit „tags:“
beginnt. Der Textteil einer Upload-Nachricht könnte dann so aussehen:
Betreff: Das Lichtermeer von Bangkok
Nachts ist in der Innenstadt nicht weniger Trubel als am Tag.
tags: bangkok „bei nacht“ lichter
WEB-TIPPS
Die besten Flickr-Links
www.marsianer.de/foto
Deutschsprachiges Tutorial zum Kennenlernen von Flickr und zur besseren
Nutzung aller Möglichkeiten der FotoCommunity
www.flickr.com/groups/germany
Deutsche Diskussionsgruppen, zum Teil
auch regional untergliedert
http://flickrleech.net
Wer das Blättern leid ist, findet unter dieser Adresse alle Suchoptionen von Flickr
mit einer riesigen Thumbnail-Menge als
Ergebnis.
http://bighugelabs.com/flickr/
Sammlung nützlicher und witziger OnlineTools für Flickr-Bilder
www.airtightinteractive.com/projects/
related_tag_browser/
Interessanter Flickr-Aufsatz, bei dem man
grafisch von Tag zu Tag springen kann und
jeweils Thumbnails der relevanten Bilder
angezeigt bekommt
www.quickonlinetips.com/archives/
2005/03/great-flickr-tools-collection/
Sehr umfangreiche Linksammlung für
Flickr-Tools. Aufgenommen sind sowohl
Tools zum Download von Fotos als auch
Onlinehelfer.
Weitere Codes für Ihre Mails an den
Flickr-Server finden Sie auf der Seite mit
den E-Mail-Einstellungen in der Rubrik
„Tipps & Tricks“.
Gefällt Ihnen die Mailadresse nicht
oder hat ein Spammer einen Weg gefunden, sie zu missbrauchen, klicken Sie auf
den Button „Reset“, und Flickr legt eine
k
neue Adresse für Sie an.
Flickrleech Das
Tool macht eine
große Menge
an Flickr-Fotos
über die Suche
nach Stichwörtern oder
ihre Beliebtheit
zugänglich.
55
Die Sichtbarkeit der via E-Mail hochgeladenen Bilder entspricht den Standardeinstellungen Ihres Kontos. Durch spezielle Modifikationen der Zieladresse können Sie diese Voreinstellung ändern. Um
mit der oben genannten Beispiel-Mailadresse zu erreichen, dass die Bilder nur
von Ihren Familienangehörigen geöffnet
werden können, schicken Sie die Fotos
etwa an „bad123taste+familiy@photos.
flickr.com“.
Beherrscht Ihr Kamerahandy das Versenden von Bildern an einen E-MailEmpfänger, können Sie den gezeigten
Weg nutzen, um die Foto-Community
von unterwegs mit aktuellen Schnappschüssen zu bestücken. Nokia-Handys
der N-Serie haben sogar eine spezielle
Flickr-Unterstützung eingebaut, mit der
das Hochladen der Bilder noch einfacher
funktioniert.
Zugang zu den Bildern regeln
Die Möglichkeit, auch die Fotos anderer
User ansehen zu können, ist eine der besten Funktionen von Flickr. Der Personenkreis der dazu Berechtigten lässt sich auf
mehreren Wegen definieren.
Der einfachste Fall: Ist ein Bild als „private“ kategorisiert, sind Sie der einzige
Teilnehmer mit Zugangsberechtigung. In
Ihrer Bilderübersicht erscheinen diese besonders restriktiv eingestuften Fotos mit
einem roten Minuszeichen. Sind die Bil-
Im Menü „Contacts“ können Sie andere Benutzer in Gruppen einteilen. Zuerst
müssen sich diese jedoch einen Flickr-Account einrichten. Um jemanden zu Flickr
einzuladen, wählen Sie den Menübefehl
„Contacts | Invite your friends“.
Bilder in die Website einbauen
Uploadr: Dieses Tool für Windows und Mac
ermöglicht per Drag & Drop den bequemen
Bilder-Upload zu Flickr.
der auch für die Gruppen „Family“ oder
„Friends“ freigeschaltet, erscheint jeweils
ein gelbes Symbol. Die Farbe Grün dagegen signalisiert: Jeder Flickr-User kann
sich dieses Bild ansehen. Über einen
Mausklick auf das Symbol ändern Sie den
Sichtbarkeits-Status des jeweiligen Fotos.
Und unter „Default photo privacy“ bei
Ihren Konto-Einstellungen legen Sie die
Voreinstellungen zum Zugang zu Ihren
auf den Flickr-Server hochgeladenen
Bildern fest.
PROFI-TIPP
Formate und Größen Ihrer Flickr-Fotos
Bildformate: Flickr akzeptiert alle im Internet gängigen Bildformate wie JPEG, PNG
oder unanimiertes GIF. Auch andere Formate
wie TIF oder BMP sind möglich, führen aber
dazu, dass Flickr sie intern in JPG konvertiert, damit die Webbrowser die Fotos darstellen können.
Bildgrößen: Mit einem kostenlosen Account
sind Bildgrößen bis maximal 5 MByte erlaubt. Diese Zahl auszuschöpfen bringt allerdings wenig. Denn auch wenn ein Teilnehmer sich das Bild in „Full Size“ darstellen
lässt, beschränkt Flickr die Größe auf 1024
Pixel in Breite und Höhe. Nur bei einer ProMitgliedschaft für rund 25 Dollar im Jahr
wird dieses Limit aufgehoben: Dann lassen
sich Bilder bis 10 MByte Größe in Originalauflösung hochladen.
Upload-Menge: Ein weiteres Limit für das
Gratiskonto ist die monatliche Upload-Men-
ge: Sie liegt bei 20 MByte. Mit einem Bildformat von 1024 x 768 und der typischen JPEGKompression kommen Sie so auf rund 150
Bilder, die Sie jeden Monat bei Flickr einstellen können. Dabei werden in Ihrem „Photostream“ allerdings nur die letzten 200 angezeigt. Davor hochgeladene Fotos sind nicht
gelöscht, werden aber in Ihrer Sammlung
nicht erscheinen. Verwenden Sie beispielsweise einen „Photo blog“, gibt es mit den
darin enthaltenen Bildern kein Problem.
Denn darin bleiben auch die stehen, die
nicht mehr zu den 200 neuesten Bildern gehören.
Pro-Konto: Mit dem Pro-Konto steigt das
monatliche Upload-Volumen auf beachtliche
2 GByte, und die Beschränkung auf 200 Bilder fällt weg. Ein weiterer Vorteil: Statt nur
drei Fotoalben („Photo Sets“) können Sie
beliebig viele Sammlungen anlegen.
Wenn Sie Fotos aus Ihren Flickr-Alben in
Ihre Homepage einbinden wollen, können Sie unterschiedliche Wege gehen.
Der einfachste Fall liegt dann vor,
wenn Sie ein Bild in einer bestimmten
Auflösung integrieren möchten. Das ist in
der Regel nicht besonders sinnvoll, weil
Sie dieses Foto ja ebenso gut auf den anderen Server hochladen und dort einbinden könnten. Vielleicht aber brauchen Sie
es in einer besonders hohen Auflösung
und müssen mit Speicherplatz oder Bandbreite geizen.
Um den HTML-Code zum Einbauen
zu ermitteln, suchen Sie sich das Foto aus
und klicken auf das Symbol „All sizes“
über dem Bild. Auf der anschließend erscheinenden Übersicht mit verschiedenen
Größen wählen Sie die passendste aus.
Daraufhin erscheint unter 1) ein Feld, das
HTML-Code enthält. Den bauen Sie in
Ihre Homepage ein. Damit wird das Foto
angezeigt und stellt gleichzeitig einen
Link dar. Klickt ein Besucher diesen Link
an, wird Flickr angesteuert und zeigt das
Foto innerhalb Ihrer Sammlung öffentlicher Bilder an.
Im gelieferten HTML-Code sollten Sie
noch den im Attribut „title“ verwendeten
Standardtext „Photo sharing“ anpassen.
Dieser Text erscheint, wenn der Mauszeiger eine Zeitlang über dem Bild stehen
bleibt. Geben Sie an dieser Stelle lieber
einen Satz wie etwa „Zu meinen Bildern
auf Flickr“ ein.
Fotoserien einbauen
Spannender als die Verwendung eines
einzelnen Bildes sind die sogenannten
„Badges“. Damit sind kleine Collagen
Ihrer Fotos gemeint, deren Inhalt Sie
selbst festlegen können. Die machen sich
beispielsweise in einer Randspalte auf
Ihrer Homepage recht gut – vor allem in
der animierten Variante.
Die Hauptschwierigkeit liegt darin,
den Link für den Badge-Assistenten zu
finden. Denn im Menü „Organize“, wo
man ihn vermuten würde, fehlt er im Mo-
ment noch. Am einfachsten kommen Sie
über eine Suche nach „badge“ in der FAQ
an den Link – oder Sie geben die Adresse
direkt in den Browser ein: „http://flickr.
com/badge_new.gne“.
Die erste Entscheidung im Wizard bezieht sich auf den Typ des Badge. Die
HTML-Variante ist zwar statisch, doch
dafür funktioniert sie in jedem Browser.
Die Flash-Variante dagegen erfordert ein
Flash-Plugin bei Ihren Besuchern. Der
Vorteil von Flash wiederum: Die Bildübersicht „lebt“. Denn alle paar Sekunden
wird die Anordnung geändert, neue Bilder werden geladen – und ab und zu werden mehrere Thumbnails zu einer großen
Kachel zusammengefasst, sodass das jeweils gezeigte Bild beim Betrachter besondere Aufmerksamkeit erregt. Das sieht
sehr schick aus.
Im zweiten Schritt des Assistenten bestimmen Sie, ob alle öffentlichen Bilder,
die eines Albums oder alle mit einem bestimmten Datum in das Badge aufgenommen werden sollen. Auf den weiteren Seiten legen Sie das Layout fest sowie die
verwendeten Farben, um das Badge möglichst gut dem Aussehen Ihrer Homepage
anzunähern.
Zum Schluss erscheint der Codeschnipsel, mit dem Sie das Badge in ein
HTML-Dokument einbauen. Die HTMLVersion ist übrigens genauso aktuell wie
die Flash-Variante: Es werden immer
auch die neuesten Bilder, die der im Assistenten gewählten Bedingung entsprechen, in die Sammlung miteinbezogen.
Kommt ein neues Foto hinzu, wird es in-
Geo-Tagging: Mithilfe der Definition
sogenannter GeoTags verorten Sie
Ihre Fotos, deren
Position anschließend auf der Landkarte von Flickr
dokumentiert ist.
folgedessen auch auf dem HTML-Badge
angezeigt – allerdings in unbewegter
Form.
Geo-Tagging einsetzen
Das Kunstwort „Geo-Tag“ bedeutet
grundsätzlich, dass an ein Objekt Koordinaten angehängt werden, ihm also ein Ort
zugewiesen wird. Gehen Besucher von
Flickr auf die Funktion „Explore | Photos
on a map“, bekommen sie eine Weltkarte
zu sehen, auf der alle Flickr-Bilder eingetragen sind, die ein öffentliches Geo-Tag
erhalten haben.
Das können Sie mit Flickr auch mit Ihren Fotos machen. Dazu gehen Sie in den
Modus „Organize“. Rufen Sie dort den
Menübefehl „Location | Add photos to
the map“ auf und wählen Sie aus der
Dropdown-Box unten „All your photos“.
Am unteren Bildrand sehen Sie nun alle
Ihre Bilder aufgereiht.
Tag-Browser:
Mit dieser
Zusatzanwendung für
Flickr können
Sie grafisch
durch Tags und
Thumbnails
navigieren.
Navigieren Sie nun den Kartenausschnitt zum gewünschten Gebiet. Ziehen
Sie einzelne Fotos auf die Karte oder verwenden Sie die Windows-Tasten [Shift]
und [Alt], um mehrere Bilder auszuwählen und gemeinsam zu verorten. Kleine
runde Marken zeigen die gespeicherte
Bildpositionierung an. Sobald Sie die
Marken anklicken, erscheint ein Popup
mit einer Voransicht der Fotos, die dem
Punkt auf der Karte zugeordnet sind.
In den Konto-Einstellungen („You |
Your Account“) können Sie Ihr persönliches Geo-Tagging feinjustieren. Unter
„Default Geo Privacy“ legen Sie fest, wer
die Geo-Informationen Ihrer Bilder sehen
darf. Wenn Sie mit „Anyone“ jede Beschränkung aufheben, sind Ihre Bildmarken auf der Landkarte für alle sichtbar.
Erlauben Sie, dass Flickr mit der Einstellung „automatically geotag“ arbeitet, wird
beim Upload jedes Fotos dessen EXIFHeader nach Koordinaten durchsucht.
Derzeit gibt es noch kaum eine Kamera
aus dem Consumer-Bereich, die damit
arbeitet. Doch die nächste SmartphoneGeneration steht schon vor der Markteinführung. Diese Geräte verfügen außer über
eine Kamera auch über einen GPS-Empfänger für die mobile Navigation. Wenn
das Kamerahandy die aktuellen GPS-Informationen in ein Bild packt, kann diese
Option schnell interessant werden.
Bedenken Sie aber, dass via Geo-Tagging für die ganze Welt sichtbar sein kann,
wo Ihr Zuhause ist oder in welcher Gegend Sie am liebsten spazierengehen.
Geo-Tagging ist zwar eine interessante
Zusatzfunktion, Sie geben damit aber
auch ein Stück Privatsphäre auf.
Markus Schraudolph
57
FILME IM WEB BEARBEITEN
Videos online schneiden
Eyespot verlagert die Videobearbeitung ins Internet. Damit können Sie Filme für Ihre Homepage
auch ohne Videoschnitt-Software herstellen. CHIP zeigt Ihnen, wie Sie optimal vorgehen.
AUF EINEN
AUF
EINENBLICK
BLICK
, Filme bearbeiten
Wie Sie Filme mit Eyespot online
schneiden und veröffentlichen
s60
Mit welchen Video-, Bild- und Audioformaten Eyespot arbeitet
s61
Die bei Eyespot veröffentlichten Filme
können Sie außerdem in Blogs und auf
Ihrer Homepage einbinden.
1
Bei Eyespot anmelden
Um einen Eyespot-Account anzulegen,
gehen Sie auf die Startseite www.eyespot.
com. Direkt neben dem großen Videofenster finden Sie den grünen Button
„Sign Up now!“. Um den Account einzurichten, tragen Sie neben Ihrer E-MailAdresse einen Benutzernamen und ein
Passwort ein. Das Passwort bestätigen Sie
in der Zeile darunter.
Vergessen Sie nicht, einen Haken in
den Kasten vor „I agree to the Terms of
Participation“ zu setzen. Auf der rechten
Seite sehen Sie eine Reihe von Angeboten,
über die Sie kostenlose Musik und Filmmaterial erhalten. Die Nutzung des Materials ist an die Mitgliedschaft in einer
Gruppe gekoppelt. Die Zahl der Haken,
die Sie setzen, ist nicht begrenzt. Zum Abschluss klicken Sie auf „Sign up now!“.
Das führt Sie auf die Einstiegsseite von
Eyespot. Von dort führen mehrere Wege
weiter. Mit „Check out your Account“ gelangen Sie zu einer Übersicht der Filme,
die Sie über die Gruppen erhalten haben.
Mit „Start Mixing now!“ beginnen Sie
mit der Bearbeitung dieser Clips. Wollen
Sie dagegen mit Ihrem eigenen Material
arbeiten, ist „Upload Files“ der richtige
Link. Er führt Sie zum Upload-Formular
von Eyespot.
2
Video-Material beschaffen
Auf der Upload-Seite befinden sich sieben
weiße Kästen, hinter denen jeweils
„Durchsuchen“ steht. In jede der Zeilen
können Sie eine Datei Ihrer Festplatte
eintragen und somit mehrere Dateien
gleichzeitig hochladen. Jede Datei darf
maximal 100 MByte groß sein. Welche
M
it Eyespot sparen Sie sich ein
teures Videoschnittprogamm.
Laden Sie einfach Ihre Filme,
Songs und Fotos ins Web, und stellen Sie
dort einen eigenen Film zusammen.
Danach haben Sie die Wahl, was mit
Ihrem neuen Film geschieht. Wollen Sie
Ruhm und Ehre, teilen Sie Ihren Film mit
der gesamten Community und veröffentlichen ihn auf den Seiten von Eyespot. Ist
Ihr Film dagegen eher privater Natur, behalten Sie ihn im stillen Kämmerlein und
schicken nur handverlesenen Freunden
den Link dazu.
Dateiformate Eyespot verarbeitet, erfahren Sie im Kasten rechts. Darunter stellen
Sie ein, wer die Filme sehen darf.
Mit „Add these files to my Account!“
starten Sie den Upload-Vorgang. Im Upload-Fenster sehen Sie nun eine Liste mit
Ihren Dateien. Die rote Zahl dahinter verrät Ihnen, wie viel von der jeweiligen Datei bereits hochgeladen ist. Während des
gesamten Upload-Vorgangs dürfen Sie
das Browserfenster mit der Eyespot-Seite
nicht schließen.
Nach dem Hochladen tauchen die Dateien in Ihrem Account unter „Media“ auf.
Reichen Ihnen Ihre eigenen Filmschnipsel
nicht, gibt es zwei Wege, an weiteres Material zu kommen: über die Gruppen oder
die Filme anderer Mitglieder. Die Gruppen sind schon beim Anlegen Ihres
Accounts aufgetaucht. Möchten Sie einer
neuen Gruppe beitreten, klicken Sie hinter
„Your Account“ auf „Community“. Links
in der Liste finden Sie den Punkt „Browse
Groups“. Ein Klick darauf führt Sie zu
einer alphabetischen Auflistung aller existierenden Gruppen. Ob die Mitgliedschaft in einer Gruppe Ihnen automatisch
weiteres Film- oder Tonmaterial bietet,
erfahren Sie im Vorspann zur Gruppe.
Haben Sie sich für eine der Gruppen
entschieden, klicken Sie links auf „Join
This Group“.
Wollen Sie das Material anderer
Eyespot-Benutzer in Ihre Filme einarbeiten, durchsuchen Sie einfach die Datenbank mit dem Suchfenster oben links.
Klicken Sie interessante Filme in der Liste
an. Über das grüne Play-Zeichen können
Sie sich die Videos ansehen. Wollen Sie
einen der Filme für Ihre Projekte verwenden, klicken Sie unter dem Vorschaubild
auf „Save“. Der Film erscheint dann in
Ihrem Account unter „Media“ und „Clips“.
Besteht der betrachtete Film aus mehreren Clips, tauchen diese in der rechten
Spalte unter „Clips used in this Mix“ auf.
Die Bestandteile lassen sich auch einzeln
in Ihrer Auswahl speichern.
Alle als „Public“ gekennzeichneten
Clips, Mixes und Fotos auf Eyespot können Sie für Ihre Zusammenstellungen verwenden. Die bei Mixes verwendeten Musikstücke sind dagegen immer „Private“.
Als Hintergrundmusik stehen Ihnen also
nur die Musikstücke zur Verfügung, die
Sie über die Gruppen erhalten oder die
Sie selbst hochgeladen haben.
3
Videos bearbeiten
Um einen neuen Film zusammenzustellen, öffnen Sie Ihren Account und klicken
hinter „Your Account“ auf „Mixer“. Nun
sehen Sie einen Teil Ihrer Clips und darunter eine Reihe von Kästchen mit roten
Zahlen. Die sind Ihr Storyboard, auf dem
Sie die Clips für Ihren Film anordnen.
Wollen Sie einen Clip so verwenden,
wie er ist, ziehen Sie ihn mit der Maus in
das Storyboard. Falls Sie nur einen Teil
davon brauchen können, klicken Sie auf
„Trim/Play“ unterhalb des Vorschaubilds.
Eyespot öffnet den Clip nun in einem
eigenen Fenster. Per Klick auf das grüne
Play-Symbol starten Sie die Wiedergabe,
durch Verschieben der Pfeile „start“ und
„stop“ entfernen Sie Abschnitte am Anfang oder Ende des Clips. Das Ergebnis
sehen Sie, wenn Sie den Clip erneut abspielen. Anschließend geben Sie unter
„save as“ einen Titel für den bearbeiteten
Clip ein und klicken auf „Save“.
Bringen Sie auf diese Weise alle Clips
in die richtige Länge. Die Filmschnipsel
ordnen Sie danach auf dem Storyboard
an. Neben den Clips passen auch Fotos
in den Film, die später als Standbilder
erscheinen. Nach dem Hochladen sind
diese aus den Bildern entstandenen Clips
zunächst jeweils fünf Sekunden lang. Die
Länge ändern Sie über „Trim/Play“.
Steht das grobe Gerüst des Films,
kommen die Feinarbeiten an die Reihe
– zuerst die Übergänge, die Sie in der
Rubrik „Transitions“ finden. Sie ziehen
sie – wie einen Clip – per Drag & Drop
in das Storyboard. Positionieren Sie den
Übergang dabei auf der Szene, vor der er
stehen soll.
Drei Übergänge stehen zur Auswahl.
Verwenden Sie „Fade In“, wird die folgende Szene langsam eingeblendet – von
KNOW-HOW
Mit diesen Formaten
arbeitet Eyespot
Filme: Wenn Sie Videos an Eyespot senden
wollen, sollten sie in einem der folgenden
Formate vorliegen: AVI, MOV, DivX, WMV,
MP4, 3gp, 3g2 oder DV.
Fotos: Für die Fotos, mit denen Sie Ihre
Videos ergänzen wollen, sollten Sie die Formate JPEG, GIF, BMP oder WMA wählen.
Musik: Als Hintergrundmusik kommen
Songs in den Formaten MP3, MP4, WMA
oder WAV in Frage.
Tipp: Während der Film auf den EyespotServer hochgeladen wird oder während Sie
das Video bearbeiten oder berechnen lassen, sollten Sie den Browser weder schließen noch auf eine andere Webseite wechseln. Ihr Film geht andernfalls verloren.
einem schwarzen Bildschirm ausgehend.
Das eignet sich besonders gut für den
Anfang eines Films oder für den Beginn
eines ganz neuen Abschnitts, etwa eines
neuen Tags.
„Fade out“ ist das Gegenteil: Die Szene vor dem Übergang wird also langsam
ausgeblendet – bis ein schwarzer Bildschirm erscheint. Damit ist „Fade out“
der ideale Abschluss für einen Film oder
Handlungsabschnitt. Verwenden Sie erst
„Fade out“ und direkt danach „Fade in“,
entsteht eine deutliche Zäsur, die etwa
Ortswechsel oder Zeitsprünge kenntlich
machen kann.
Der universellste Übergang ist „Dissolve“. Dabei verwandeln sich die Bildpunkte
der vorhergehenden Szene langsam in die
der nachfolgenden Szene. Dieser Übergang eignet sich gut für Perspektivenwechsel oder kleinere Ortswechsel.
Übergänge zwischen den einzelnen
Clips sind allerdings kein Muss. Sind die k
Anmelden:
Der Webdienst
Eyespot bietet
Videobearbeitung
online. Über den
Button „Sign Up
Now!“ melden Sie
sich an.
1
61
Clips direkt hintereinander angeordnet,
entsteht im Film ein harter Schnitt, bei
dem das erste Bild der folgenden Szene
direkt hinter dem letzten der vorausgehenden steht. Solche Schnitte eignen sich
besonders für actionreiche Filme und
zum Erzeugen von Spannung.
Beim Zusammenstellen des Films sollten Sie darauf achten, dass er maximal
100 Elemente, also Clips und Übergänge,
enthalten darf.
4
5
Texteinblendungen sind ein weiteres Element, mit dem Sie Ihr Video ausstatten
können. Die Einblendungen erzeugen Sie
unter „Titles“. Klicken Sie auf „Create
new title frame“ und geben Sie anschließend den Text in den Kasten ein.
Haben Sie ihn fertiggestellt, klicken
Sie auf „All done“. Nun erscheint der
Text als Icon in der Leiste darunter. Das
Icon ziehen Sie dann auf das Storyboard,
und der Text erscheint dort in einem
eigenen Kasten. Der eingegebene Text
erscheint vier Sekunden lang weiß auf
schwarz im Bild.
Mit Effekten arbeiten
Mithilfe der Filter in der Rubrik „Effects“
passen Sie Ihr Ausgangsmaterial an oder
verfremden es. Kombinieren Sie in Ihrem
Film etwa altes Filmmaterial mit neuen
Passagen? Dann passen Sie die neuen Abschnitte doch mithilfe der Filter an das
alte Material an. Dafür gibt es mehrere
Möglichkeiten. Die einfachste besteht
darin, den Abschnitt mit „Black & White“
in Schwarzweiß umzuwandeln. „Sepia“
funktioniert ähnlich; das Filmmaterial
bekommt allerdings auch noch einen vergilbten Ton verpasst. Raffinierter sind die
Effekte „1970s Video“, „1940s Video“ und
„1890s Video“. Diese Filter verwandeln die
modernen Aufnahmen so, dass sie in die
jeweilige Epoche passen, inklusive Staub,
Störungen und Farbeffekten.
Andere Effekte verändern nicht das
Filmmaterial selbst, sondern lediglich die
Art, in der es angezeigt wird. So drehen
Sie etwa mit den „Rotate“-Filtern das Video in unterschiedliche Positionen. So
steht Ihr Film auf Wunsch kopf, oder aus
einem Spaziergang wird eine Kletterpartie an einer senkrechten Wand. Sie haben
Aufnahmen von zwei Personen, die in die
gleiche Richtung schauen, möchten aber
gerne einen Dialog zwischen ihnen darstellen? Dann arbeiten Sie doch mit dem
Filter „Flip“, der eine der beiden Aufnahmen spiegelt.
Mit „Slow Motion“ und „Fast Motion“
ändern Sie dagegen nicht die Art der Darstellung, sondern die Geschwindigkeit.
Hervorgehobene Details und Zusammenfassungen lassen sich damit umsetzen.
Ein weiterer Punkt, den Sie mithilfe
der Eyespot-Filter beeinflussen können,
ist die Farbe. Mit den „Add“-Effekten fügen Sie die Farben Rot, Blau, Grün oder
Gelb in Ihr Video ein. „Invert“ kehrt die
vorhandenen Farben um.
Texte einblenden lassen
Bearbeiten: Mit den beiden
Pfeilen können Sie die Clips passend
zurechtschneiden.
3
Gerade kleine Fehler machen einen
Film oft erst richtig charmant. Dass
diese „Fehler“ absichtlich entstanden sind,
brauchen Sie ja niemandem zu verraten.
Beim Einbau solcher gewollten Macken
helfen Ihnen einige Eyespot-Effekte. „Bad
TV“ sorgt zum Beispiel dafür, dass das
Bild – wie bei einem schlecht eingestellten
Fernseher – von oben nach unten durchläuft. „Echo“ produziert den Effekt einer
verwackelten Kamera, und „Motion Blur“
verwischt das Bild.
Wer sein Filmmaterial komplett verfremden will, findet bei Eyespot ebenfalls
eine breite Auswahl an Effekten. Da gibt
es etwa ein Röntgenbild mit „X-Ray“, ein
Popart-Bild mit „Warhol“ oder einen
völlig neuen Blickwinkel mit dem Effekt
„Spider Vision“.
Haben Sie sich für einen Effekt entschieden, ziehen Sie ihn auf den Clip, auf
den Sie ihn anwenden wollen.
6
Ton einfügen
Der Film ist nun fertig – was fehlt, ist der
Ton. Entweder verwenden Sie den Originalton der Clips oder eine Hintergrundmusik. Der Originalton wird zusammen
mit dem Videomaterial automatisch zu
Ihrem Film hinzugefügt. Wollen Sie auch
eine Hintergrundmusik verwenden, klicken Sie unter „View your“ auf „Music“.
In dieser Liste sehen Sie die Musikstücke,
die Sie entweder selbst hochgeladen oder
über Eyespot erhalten haben. Wählen Sie
einen der Songs aus, und ziehen Sie ihn
mit der Maus auf den blauen „Audio“Bereich unter dem Storyboard. Pro Film
können Sie allerdings nur ein Musikstück
einbinden.
In der Regel mischt Eyespot den Originalton der Clips mit der Hintergrundmusik. Sie haben aber auch die Möglichkeit, nur die Bilder eines Clips zu verwenden und den zugehörigen Ton auszublenden. Dazu klicken Sie im Storyboard
unterhalb des Clips auf „mute“.
Effekte: Mit
den EyespotFiltern verwandeln
Sie Ihr Videomaterial in etwas ganz
Neues – oder etwas
ganz Altes.
4
7
Den Film mixen lassen
Nun sind fast alle Elemente eingebaut, die ein guter Film
braucht – lediglich der Titel fehlt noch. Den geben Sie
ein, indem Sie oben auf „Enter title“ klicken. Mit „Save
title“ bekommt Ihr Video seinen Namen. Anschließend
geht es mit dem Berechnen des Films weiter. Den Auftrag dazu erteilen Sie Eyespot mit einem Klick auf „Mix
and Play“ direkt über dem Storyboard. Je mehr Effekte
und Elemente Sie eingebaut haben, desto länger dauert
der Rechenvorgang. Hin und wieder kommt es vor, dass
bei Eyespot ein Bearbeitungsstau entsteht. Dann vergeht
einige Zeit, bis Eyespot beginnt, Ihr Video zu berechnen.
Ist der Film fertig, erscheint ein Vorschaubild auf dem
Bildschirm. Mit einem Klick auf das grüne Play-Symbol
starten Sie die Wiedergabe.
Entdecken Sie nun noch Fehler, klicken Sie auf „Remix“, um zur „Mixer“-Ansicht zurückzukehren und den
Film erneut zu bearbeiten. Ist das künstlerische Experiment komplett fehlgeschlagen, klicken Sie auf „Delete“,
um den Mix zu löschen.
Das fertige Video ist automatisch auf „Public“ gesetzt,
wird also auf den Eyespot-Seiten veröffentlicht und ist
für jedermann zu sehen. Um das zu ändern, klicken Sie
hinter „This Mix is Public“ auf „(Make Private)“.
8
Das Webvideo promoten
Der letzte Schritt für den Online-Filmemacher ist die
Promotion für das Video. Die Eyespot-Gruppen bieten
Ihnen dafür ein Forum, in dem Sie Ihre Filme Gleichgesinnten näherbringen.
Sie veröffentlichen ein Video in den Gruppen, indem
Sie nach dem Berechnen des Films auf „Publish“ klicken.
Auf der folgenden Seite geben Sie einen Titel für Ihren
Post und einen kurzen Text dazu ein. Links wählen Sie
aus, in welchen Gruppen Sie den Film veröffentlichen
wollen. Die Spalte ganz links bietet mit direkten Uploads
zu Blogs und Webseiten zusätzliche Möglichkeiten, das
Video unters Volk zu bringen.
Unten links finden Sie den direkten Link zu Ihrem
Film. Mehr Informationen dazu, wie Sie den Film mithilfe dieser URL auf Ihrer Homepage veröffentlichen,
lesen Sie im Artikel ab s50.
Eine weitere Option, das Video in Umlauf zu bringen, heißt „Send“. Mit dieser Funktion schicken Sie Ihren
Film per E-Mail an Freunde und Bekannte. Der ebenfalls
von Eyespot angebotene Service, das Video per MMS zu
versenden, funktioniert in Deutschland nicht.
Um den Film bei Eyespot leichter auffindbar zu machen, sollten Sie ihn mit sinnvollen Tags versehen. Dazu
gehen Sie in Ihrem Account auf „Media“ und öffnen dort
„Mixes“. Unter dem Icon für jeden einzelnen Film sehen
Sie den Eintrag „Tags“. Klicken Sie auf das „Edit“ dahinter und geben Sie Stichwörter ein, die zu Ihrem Video
passen. Nun ist Ihr Film optimal ausgestattet, damit anFranziska Goldmann
dere ihn problemlos finden.
HOMEPAGE-BAUKÄSTEN IM ÜBERBLICK
Website auf die Schnelle
F
ür alle, die eine Homepage möglichst schnell auf die Beine stellen
möchten, bieten viele Webhoster
Homepage-Baukästen an. Die Vorlagen
sind sehr vielfältig – von der Nachricht
über Familiennachwuchs bis hin zur Ankündigung einer Geschäftseröffnung.
Die Angebote der Provider lassen sich
in zwei Gruppen unterteilen: Strato und
1&1 warten mit fertig konfigurierten Seiten auf, bei denen Sie nur noch das Lay-
1&1
Homepage-Baukasten
AUF EINEN
EINENBLICK
BLICK
, Homepage-Baukästen
Tipps zum 1&1-Baukasten
s64
Tipps zum Strato-Baukasten
s65
Alle Webhosting-Pakete mit HomepageBaukästen in der Übersicht
s68
out auswählen und Ihre Inhalte einfügen.
Dies ähnelt sehr einer Word-Vorlage und
lässt sich ohne viel Einarbeitungszeit erledigen. Ihre Homepage ist also sehr schnell
fertig – zulasten der Flexibilität.
Domainfactory und Server4You bieten
dagegen eine abgespeckte Version eines
Content-Management-Systems (CMS) an.
Das erfordert mehr Einarbeitungszeit; dafür sind Sie beim Aufbau Ihrer Seite nicht
an die Vorlagen gebunden, sondern können sie fast nach Belieben verändern.
Beim Homepage Baukasten wählen Sie
zunächst Layout und Aufbau der Website
aus und fügen zum Schluss Ihre Inhalte
hinzu. Das Ergebnis ist eine Seite auf
HTML-Basis.
Bereits in der kleinsten Version der
Webhosting-Angebote – „1&1 Mail“ –
sind fünf kostenlose Seiten im Paket enthalten. Managed-Server-Angebote und
die 1&1-Professional-Pakete können bis
zu 25 Seiten hosten. Für rund zehn Euro
im Monat erhalten Sie den „HomepageBaukasten Plus“, der neben einer unlimitierten Anzahl von Seiten auch zusätzliche
Funktionen, beispielsweise Gästebücher
und Foren, enthält.
Die Extras innerhalb des HomepageBaukastens orientieren sich stark am
Webhosting-Paket (siehe Übersicht ab
s68). Sämtliche CGI-Skripte sowie die
Content-Module stehen Ihnen auch innerhalb des Baukastens zur Verfügung. Die
Content-Module sind ein ganz besonderes Angebot, das in dieser Preisklasse eine
Ausnahme bildet. Es handelt sich dabei
Aufbau und Pflege einer attraktiven Homepage kosten Zeit und erfordern einige Vorkenntnisse.
Als gute Alternative bieten viele Webhoster Standard-Baukästen für die Homepage an. CHIP hat
sich die besten Baukasten-Systeme angesehen – alle Details finden Sie in der Tabelle am Ende.
um tagesaktuelle Informationen aus insgesamt zwölf verschiedenen Bereichen –
von aktuellen Nachrichten bis hin zu
Klatsch und Tratsch aus dem Showbusiness. Im „1&1 Control Center“ können Sie das Aussehen der Nachrichten
umgestalten, sodass es zum Schluss gar
nicht mehr auffällt, dass die Informationen von einem Drittanbieter kommen.
Die Schriftart und die Farbwahl der Nachrichten entsprechen komplett dem Aussehen Ihrer Homepage.
Wenn Sie selbstständig sind und häufig Kundenbesuch haben, sollten Sie Ihren
Kunden auch Kartenmaterial anbieten,
denn nicht jeder besitzt ein Navigationsgerät. Mit dem „Lageplaner“ – zu finden
in den Content-Modulen – ist dies auch
kein Problem. Geben Sie einfach die gewünschte Adresse ein, und der Lageplaner
generiert eine Ortskarte und eine Übersichtskarte, die Sie anschließend auch unter den „Extras“ wiederfinden.
Neben diesen Zusatzfunktionen stehen
– abhängig von Ihrem Paket – eine ganze
Reihe anderer Erweiterungen zur Verfügung. Eine Übersicht finden Sie unter
der Adresse www.1und1.info/xml/order/
HostingOverview.
Strato
LivePages
Strato bietet bereits ab der WebVisitenkarte A die Integration von LivePages. Die
einzelnen Pakete unterscheiden sich
hauptsächlich in der Anzahl der kostenlosen Seiten und der kostenlosen Seitenabrufe. Mit LivePages kommen Sie in nur
vier Schritten zu Ihrer fertigen Homepage: von der Auswahl der Branche über
das Design und die Gliederung bis zum
Einfügen der Inhalte. Dabei stehen Ihnen
220 Designvorlagen mit (rechnerisch!)
insgesamt rund 400.000 Design-Kombinationen zur Verfügung.
Neben dem umfangreichen Bildarchiv
und der Auswahl an optischen Gestaltungsmöglichkeiten bieten Stratos LivePages noch eine Reihe von interaktiven
Inhalten: Gästebuch, Fotoalbum, Diashow, Forum, Umfrage, Kontaktformular,
Besucherzähler, animiertes Intro und
Passwortschutz. Alle Zusatzfunktionen
lassen sich per Mausklick aus den LivePages heraus in die Seiten integrieren. Das
Einstellen des jeweiligen interaktiven Inhalts erfolgt über ein grafisches Menü in-
nerhalb der LivePages. So kann auch ein
Homepage-Betreiber ohne Programmierkenntnisse, der auch keine Lust hat, sich
ausführlich mit HTML und CSS zu beschäftigen, schnell zu einer optisch ansprechenden Website gelangen.
Den Leistungsumfang der LivePages
können Sie über einen Testzugang unter
www.livepages.de kostenlos ausprobieren. Das Strato-Angebot lässt sich auch
ohne Webhosting-Paket als StandaloneLösung nutzen. Als Einzellösung kosten
die LivePages zwischen einem Euro monatlich für das Einstiegspaket mit drei
Seiten und einer frei wählbaren Domain
bis zu zwölf Euro im Monat für das Premiumpaket mit einer unbeschränkten
Seitenzahl und drei frei wählbaren Domains (de, com, org oder net).
Domainfactory
Auch andere Provider haben ihr Hostingangebot in einen Homepage-Baukasten
integriert. Domainfactory (www.domainfactory.de) offeriert beispielsweise ab
dem Hostingpaket „VirtualServer Basic“
eine modifizierte Version von „WebEdition“. Die Zielgruppe des Pakets „VirtualServer Basic“ bilden hauptsächlich Weberfahrene Entwickler. Der virtuelle Server
hat PHP, Perl und Python ebenso wie eine
MySQL-Datenbank implementiert.
Damit nicht bereits der Administrationsaufwand des Hostingpakets eine allzu
große Hürde für die potenziellen Kunden
darstellt, hat Domainfactory sein Angebot inzwischen in der Lösung „MyHome
Dynamic“ um die vorinstallierten OpenSource-Lösungen Mambo und Joomla
erweitert. Die zweite Lösung, Joomla, ist
aus Mambo hervorgegangen, nachdem
sich die Entwicklertruppe von Mambo
zerstritten hatte und ein Teil der Mitglieder eigene Wege ging. Zum Content-
PROFI-TIPP
Offline- oder OnlineCMS für Ihre Seite
Es gibt zwei Ansätze eines Content-Management-Systems (CMS) bei Webhostern
– eine Offlineversion wie der GS Homepage
Builder (1blu) und Onlineversionen, etwa
die Lösungen von 1&1 oder Strato.
Offline-CMS Beim GS Homepage Builder
führen Sie alle Aktionen offline durch und
synchronisieren danach Ihren PC per FTP
mit Ihrem Webspace beim Provider.
Online-CMS Die Online-CMS benötigen
dagegen immer eine direkte Verbindung
zum Internet und zum Webspace bei Ihrem
Provider. Sie müssen das CMS dort installieren. Die meisten Systeme setzen PHP
und eine Datenbank – meist MySQL – voraus. Achten Sie vor der Installation darauf,
welche PHP-Version das Programm benötigt und ob Ihr Webhoster diese anbietet.
Management-System (CMS) gibt es eine
gute Online-Dokumentation unter http://
de.wikibooks.org/wiki/Joomla (mehr zu
Joomla lesen Sie ab s98).
Bei WebEdition handelt es sich um ein
Content-Management-System, bei dem
Sie normalen HTML-Code mit speziellen
Tags erweitern müssen, um Templates zu
gestalten. Mit diesen Vorlagen können Sie
danach schnell Ihre Seiten aufbauen.
Bei dieser WebEdition-Version von Domainfactory stehen Ihnen rund zwanzig
Layouts mit mehreren Varianten zur Verfügung, die farblich und bei den HeaderGrafiken modifizierbar sind. Jedes Layout
bietet auch einen inhaltlichen Vorschlag
mit entsprechender Seitenstruktur.
Sie können einzelne Seiten löschen
und auf Basis der vorhandenen Seitenvorlagen neue anlegen. Eine Seitenvorlage
innerhalb von WebEdition definiert das k
1&1: Das 1&1 Control
Center ist der Ausgangspunkt beim Aufbau Ihrer Homepage.
65
1&1 HomepageBaukasten: Der
Wegweiser führt
Sie jederzeit an
den Ausgangspunkt des Homepage-Baukastens zurück.
Aussehen und damit die Stellen, an denen
Sie Inhalte einfügen können. Allerdings
ist es in dieser modifizierten Version von
WebEdition nicht möglich, individuelle
Seitenvorlagen zu gestalten.
Der monatliche Einstiegspreis für einen
virtuellen Server beträgt rund zehn Euro.
Dazu kommen die Kosten für mindestens
eine Domain und rund drei Euro für das
CMS-Paket. Die Basiskosten für das Paket
„MyHome Dynamic“ betragen regulär
rund sieben Euro im Monat; zum Zeitpunkt des Redaktionsschlusses lief allerdings eine Aktion, bei der das Paket nur
rund drei Euro monatlich kostete.
Evanzo
Evanzo (www.evanzo.de) bietet ab dem
Hostingpaket „WebXS“ eine Reihe von
Open-Source-Programmen an, mit denen
sich Ihr Webcontent komfortabel verwalten lässt. Fest installiert sind Typo3, Mambo und PostNuke.
Bei Typo3 handelt es sich um ein Content-Management-System für mittelgroße
bis große Websites. Es ist modular aufgebaut und lässt sich mithilfe von Plugins
erweitern. Derzeit existieren rund 1000
Erweiterungen – unter anderem News,
PROFI-TIPPS
1&1 Homepage-Baukasten voll ausreizen
TIPP 1: Der Homepage-Baukasten besitzt
eine Navigationsleiste und einen Arbeitsbereich. Teilweise ist die Navigation ein wenig
verwirrend. Sollten Sie einmal nicht mehr
weiterwissen, gelangen Sie über den Wegweiser zur Einstiegsseite zurück.
TIPP 2: Wenn Sie ein Fan von Macromedias
Flash-Technologie sind, finden Sie bestimmt
Gefallen am Punkt „Intro wählen“ innerhalb der Layout-Rubrik. Derzeit stehen dort
zwölf Flash-Templates mit je zwei Zeilen frei
definierbarem Text zur Verfügung. Die FlashAnimation bekommt der Besucher beim Einstieg in Ihre Seite zu sehen.
TIPP 3: Innerhalb der Rubrik „Layout“ finden Sie die Einstellungen zum Aufbau der
Navigation und zu den Textformaten für die
einzelnen Bereiche. Sie können an dieser
Stelle auch das Motto und die Fußzeile der
Homepage definieren.
TIPP 4: Die Reihenfolge innerhalb der Navigation legen Sie im Seitenaufbau fest. In
der Rubrik „Seiten“ können Sie die Struktur
verändern und neue Unterebenen einbauen.
Nutzen Sie dazu die vier Pfeiltasten.
TIPP 5: Ein wenig umständlich ist die Festlegung der Größe der Bilder. Am besten definieren Sie diese bereits vorab in einem
Grafikprogramm. Ansonsten markieren Sie
nach dem Einfügen des Bilds die Grafik und
klicken erneut auf die Bild-Schaltfläche.
An dieser Stelle haben Sie die Möglichkeit,
das Bild in der Größe zu skalieren und auch
dessen Ausrichtung festzulegen.
TIPP 6: Es existieren mehrere Quellen, aus
denen Sie Bilder auf Ihrer Homepage einfügen können. 1&1 bietet beispielsweise den
kostenlosen Zugriff auf ein Standardarchiv
von Fotos und Grafiken. Eigene Bilder binden Sie über den Webspace ein. Kommerzielle Bilder bietet 1&1 in Kooperation mit
fotolia an, wodurch allerdings Zusatzkosten
entstehen.
TIPP 7: Die meisten Vorlagen verfügen über
einen Platzhalter für Ihr Firmen- oder Vereinslogo. Zum Ändern des Logos klicken Sie den
Platzhalter zweimal an; daraufhin gelangen
Sie ins Bearbeitungsmenü. Sollten Sie kein
Logo benötigen, schalten Sie die Funktion im
Popup-Fenster aus.
ein Shop-System und ein auf Cookies basierendes
Besucher-Trackingsystem.
Gleiches gilt auch für Mambo und PostNuke.
Alle drei Programme benötigen PHP
oder proprietäre Skriptsprachen sowie
MySQL zum Anlegen von Vorlagen. Sie
sollten also recht gute Kenntnisse im Umgang mit der Sprache PHP mitbringen,
um die CMS-Angebote von Evanzo nutzen zu können.
Die Evanzo-Lösungen enthalten keine
individuellen Vorlagen, doch das Internet ist eine gute Quelle dafür. Sie finden
dort eine ganze Reihe von Archiven mit
zahlreichen Vorlagen und Plugins. Diese
Open-Source-Programme erfordern zweifellos eine längere Einarbeitungszeit als
die vordefinierten Angebote der anderen
Provider, dafür haben Sie später eine erheblich größere Flexibilität beim Ausund Umbau Ihrer Homepage.
Zu jedem der genannten Open-SourceTools gibt es umfangreiche Foren im Internet. Ein guter Ausgangspunkt sind die
Homepages der einzelnen Applikationen
TYPO3 (http://typo3.org/), Mambo (www.
mamboserver.com/) und PostNuke (www.
postnuke.com). An dieser Stelle finden
Sie auch die offiziellen Dokumentationen
zu den Programmen. Das Open-SourcePaket ist ab 2,49 Euro im Monat inklusive
einer de-Domain zu haben.
1blu
Einen anderen Ansatz verfolgt der Provider 1blu (www.1blu.de). Bereits ab dem
Homepagepaket „1-blu Homepage“ ist
die Softwarelösung GS Homepage Builder enthalten. Dabei handelt es sich um
ein Offlinesystem, mit dessen Hilfe Sie
eine komplette Website gestalten können.
Eine Auflistung von exemplarischen Seiten finden Sie beim Hersteller GS Software (https://www.gs-shopbuilder.com/
shop_de). Nach einem Klick auf „Weitere Infos“ gelangen Sie zum Link „Download Templates“.
Das Programm ist für jeden halbwegs
geübten Windows- und Office-Anwender
ganz einfach zu bedienen. GS Homepage
Builder arbeitet auf der Basis von mitgelieferten Vorlagen, weitere Vorlagen
finden Sie auf der Seite des Herstellers
GS Software Solutions (www.gs-shop
builder.de).
Aufgrund des Template-basierenden
Ansatzes ist es auch möglich, mehrsprachige Seiten zu verwalten. Die Arbeitsfläche des Programms ist zweigeteilt – mit
Registerkarten im Hauptfenster.
GS Homepage Builder erspart dem
Anwender das manuelle Kodieren der
Seiten. Somit ist das Programm auch für
Einsteiger sehr gut geeignet.
Für Fortgeschrittene liefert 1blu seit
Neuestem den Namo Webeditor 2006
mit. Dieses Programm unterstützt auch
Einsteiger beim Aufbau von Webseiten,
soll aber vor allem Anwendern mit mehr
Erfahrung die Möglichkeit geben, mit
wenig Aufwand professionelle Seiten zu
entwickeln.
Ab dem Hostingpaket „Homepage
Professional Paket“ gibt es den Namo
Webeditor 2006 für rund vier Euro im
Monat inklusive drei Domains.
Server4You
Server4You (www.server4you.de) bietet
ab dem kleinsten Hostingpaket einen
integrierten Homepage-Baukasten auf
der Basis des Melin-Homepage-Baukastens an. Dabei stehen Ihnen insgesamt
Strato LivePages: In
vier Schritten haben
Sie bei den LivePages
die Homepage aufgebaut und mit Ihren
eigenen Inhalten
bestückt.
zwanzig Seiten für Ihre Homepage zur
Verfügung. Server4You hat die Version um
einige Funktionen, etwa das zeitbasierende Veröffentlichen der Seiten, erweitert.
Das Browser-basierende CMS erlaubt
das Gestalten Ihrer Website mithilfe von
Vorlagen. Wenn Sie eigene Templates anlegen möchten, benötigen Sie jedoch gute
HTML-Kenntnisse.
Im Melin-System sind auch einige CMStypische Funktionen integriert, etwa die
Versionierung und die Archivierung von
Inhalten. Die Versionierung erlaubt Ihnen, Inhalte vorzuproduzieren und zu einem definierten Zeitpunkt zu publizieren.
Dank des Staging-Mechanismus vermeiden Sie defekte Links innerhalb Ihrer
Homepage. Denn sobald Sie eine Seite
offline stellen, passt Melin auch die Seiten
an, die zuvor darauf verlinkt waren. Der
Newsletter und ein erweiterbares Bildarchiv runden den Umfang des ContentManagements-Systems ab.
Das CMS-Paket ist bereits im Standardpaket „Racer Go“ für rund drei Euro im
Monat inklusive zweier Domains enthalten, allerdings mit nur zwanzig Seiten und
ohne erweiterte CMS-Funktionen. Diese
sind erst in der Version „Racer Turbo“
für knapp 20 Euro enthalten, in der Sie k
PROFI-TIPPS
Strato LivePages voll ausreizen
TIPP 1: Nach der Definition der Branche folgt
die Festlegung des Designs. An dieser Stelle
bietet Ihnen Strato – abhängig von der zuvor
getätigten Auswahl – unterschiedliche Farbvarianten und Layouts an.
TIPP 2: Die einzelnen Vorlagen besitzen eine
Hauptgrafik, Farbvarianten und eine Standardzuweisung der Schriftarten. Diese Voreinstellungen lassen sich ebenso wie die
Menüdesigns im Designschritt anpassen.
TIPP 3: Für die Gliederung der Unterseiten
bietet LivePages eine Reihe fertiger Seiten.
Die Reihenfolge der einzelnen Bereiche lässt
sich nach Belieben ändern. In diesem Menü
entscheiden Sie auch, ob Sie mit einer flachen,
einstufigen oder mehrstufigen Hierarchie arbeiten möchten.
TIPP 4: Außer mit inhaltlichen Vorschlägen
kommen die Seiten auch mit einem fertigen
Layout. Das können Sie im vierten Arbeitsschritt „Inhalte“ mit einem Klick auf die
Schaltfläche „Seitenlayout“ ändern.
TIPP 5: Für jeden Text haben Sie die Möglichkeit, Schriftart, -stil, -farbe und -größe individuell festzulegen. Markieren Sie dazu die
entsprechenden Passagen und weisen Sie
das gewünschte Aussehen des Texts über
das Menü „Text“ zu.
TIPP 6: Der Befehl zum Einfügen von Hyperlinks versteckt sich im Menü „Extras“. Markieren Sie den zu verlinkenden Text und wählen Sie dort den Menüpunkt „Verknüpfung“.
TIPP 7: Mit dem Menüpunkt „Bild/Video“
fügen Sie Bilder und Videos in Ihre Homepage ein. Ist ein Bild zu groß, passen Sie die
Größe gleich beim Einfügen oder danach
über die Eigenschaften an.
TIPP 8: Zusatzfunktionen wie das Gästebuch
oder den Besucherzähler finden Sie unter
dem Menüpunkt „Interaktive Funktionen“.
TIPP 9: Erst nach der Veröffentlichung der
LivePages findet die Übertragung der Daten
statt. Nutzen Sie die LivePages innerhalb
eines Webhosting-Pakets und haben Sie dort
bereits Seiten unter Ihrer Domain gespeichert, sollten Sie diese zuvor sichern, da sie
ohne Rückfrage überschrieben werden. Ist
trotzdem etwas schiefgegangen, stehen Ihnen die Datensicherungen der letzten Tage
zur Verfügung. Zum Zugriff geben Sie im FTP-
Programm anstelle Ihrer Domain den Server
backup.strato.de an. Die restlichen Angaben
ändern sich nicht.
TIPP 10: Strato legt automatisch Meta-Tags
für die Suchmaschinen an, falls Sie diese im
zweiten Schritt über die Schaltfläche „Bearbeiten“ eingeben. Im oberen Bereich des
Fensters tragen Sie die Beschreibung der Seite ein, im unteren, durch Kommas getrennt,
einzelne Schlüsselbegriffe.
TIPP 11: Neue oder geänderte Seiten können
Sie entweder sofort oder zeitversetzt anlegen. Letzteres sollten Sie dann tun, wenn Sie
neue Informationen, etwa Sonderaktionen,
erst an einem bestimmten Tag im Internet
veröffentlichen möchten.
TIPP 12: Vor der Veröffentlichung einer Seite
sollten Sie diese noch einmal einer Rechtschreibprüfung unterziehen, damit sie nicht
aus Versehen Tippfehler enthält. Die Funktion finden Sie im vierten Arbeitsschritt im
Menü „Extras“. Neben der deutschen Rechtschreibprüfung stehen unter anderem noch
die englische und die französische zur Verfügung.
67
ALLE WICHTIGEN WEBHOSTING-PAKETE MIT HOMEPAGE-BAUKÄSTEN IM ÜBERBLICK
URL
Pakete / Preis pro
Monat
1&1
1blu
Domainfactory
Evanzo
www.1und1.info
1&1 Website: 3,99 €
1&1 Home: 6,99 €
1&1 Business: 12,99 €
1&1 Business Pro: 24,99 €
1&1 Professionell: 39,99 €
www.1blu.de
1blu Homepage: 0,90 €
1blu Homepage Power: 2,29 €
1blu Homepage Professional: 3,90 €
1blu Homepage Unlimited: 6,90 €
Open-Source-Lösungen Mambo
und Joomla vorinstalliert bei MyHome Dynamic-Baukastensystem.
CMS-Zusatzpaket ab Virtual Server
Basic. Mindestkosten Server:
9,90 € zzgl. 2,90 € für CMS
www.evanzo.de
webXS: 1 €
webXS 500: 3,49 €
webS: 4 €
webSX: 5 €
webM: 15 €
1&1 Website: 1
1&1 Home: 2
1&1 Business: 3
1&1 Business Pro: 5
1&1 Professionell: 10
1&1 Website: 100 MB
1&1 Home: 250 MB
1&1 Business: 500 MB
1&1 Business Pro: 1000 MB
1&1 Professionell: 2000 MB
1&1 Website: 7,5 GB
1&1 Home: 15 GB
1&1 Business: 30 GB
1&1 Business Pro: 50 GB
1&1 Professionell: 100 GB
1&1 Website: 10
1&1 Home: 10
1&1 Business: 15
1&1 Business Pro: 20
1&1 Professionell: 25
1blu Homepage: 1
1blu Homepage Power: 2
1blu Homepage Professional: 3
1blu Homepage Unlimited: 4
Keine. Zusatzkosten ab 6 € pro
Jahr für .de-Domain
Paket-Informationen
Anzahl der Domains
Speicherplatz
Enthaltener Traffic /
Monat
Anzahl der
enthaltenen Seiten
Bildarchiv
CMS-Funktionen
Sonstiges
webXS: 1
webXS 500: 1
webS: 1
webSX: 3
webM: 5
1blu Homepage: 40 MB
1 GB (Paket Virtual Server Basic), webXS: 300 MB
1blu Homepage Power: 150 MB
individuell bei MyHome Dynamic webXS 500: 250 MB
1blu Homepage Professional: 500 MB
webS: 1000 MB
1blu Homepage Unlimited: 1000 MB
webSX: 1500 MB
webM: 2000 MB
1blu Homepage: 8 GB
10 GB (Paket Virtual Server Basic), Kein Limit
1blu Homepage Power: 15 GB
individuell bei MyHome Dynamic
1blu Homepage Professional: 30 GB
1blu Homepage Unlimited:
unbegrenzt
Offline-System, dadurch unlimitiert
Beliebig
Beliebig
●
-
-
-
Content-Module, Fotoalbum, WebDatabase, WebElements, Feedback, Lageplaner, Abstimmung,
Gästebuch, Forum, Datum/Zeit,
Besucherzähler
1&1 DynamicSiteGenerator
Homepage Builder: Kategorien,
Bannerwerbung, Kontaktformular,
Mehrsprachigkeit
Newsticker, Forum, Bildergalerie,
Suchfunktion
Diverse Open-Source-Programme
mit unterschiedlichen Funktionen
Integrierter CSS-Editor bei Homepage Bei MyHome Dynamic stellen Sie
Builder
sich ein individuelles Paket
aus verschiedenen Komponenten
zusammen
Ulead Photoimpact 10SE/11 SE*, Namo WebEditor 2006 und FreeMoUlead GIF-Animator 5, Macrotion 2006 (ab HP Professional), 1blu
media Contribute 3, Dreamweaver Homepage Builder, GS Shopbuilder
MX 2004(*), WISE.FTP 4.0, Hello
Basic
Engines 4.0, Ranking Toolbox
-
24/7 Hotline. Bei 1&1 Home und
Business 0,12 €/Min, bei 1&1
Business Pro und Professionell
kostenlos
Kostenlos
030-Ortsnetznummer, bei
Homepage Unlimited 24/7,
sonst Mo–Fr 8–20 Uhr
Kostenlose 0800-Nummer,
Mo–Fr 8–20 Uhr
0,12 €/Min, Mo–Fr 10–18 Uhr
Kostenlos
Kostenlos
Kostenlos
Mindestlaufzeit
12 Monate
6 Monate
6 Monate
Einrichtungsgebühr
Sonstige Details /
Bemerkungen
9,80 €
Unlimitierte Anzahl von Seiten
für 9,99 €/Monat
16,90 €
-
9,90 €
Bis zu 10 Domains, Kosten je TLD
unterschiedlich
webXS: 12 Monate
webXS 500: 12 Monate
webS: 1 Monat
webSX: 12 Monate
webM: 6 Monate
14,99 € bei webXS, sonst keine
-
Enthaltene Software
32 vorinstallierte Programme,
vorrangig Open Source
Support
Telefon
E-Mail
Vertragsdetails
● = ja; - = nein; * nicht bei 1&1 Website
100 Seiten zur Verfügung haben, um sich
oder Ihre Firma zu präsentieren.
Server4You
Strato
Goneo
www.server4you.de
Racer Go: 2,90 €
Racer Pro: 7,90 €
Racer Turbo: 19,90 €
www.strato.de
EasyPages: 0,99 €
PowerPages: 2,99 €
PremiumPages: 4,99 €
PremiumPages Unlimited: 11,98 €
www.goneo.de
Homepage Start: 1,25 €
Homepage Plus: 2,45 €
Homepage Profi: 4,95 €
Homepage Premium: 9,95 €
Racer Go: 2
Racer Pro: 3
Racer Turbo: 5
EasyPages: 1
PowerPages: 3
PremiumPages: 3
PremiumPages Unlimited: 3
Homepage Start: 2
Homepage Plus: 3
Homepage Profi: 5
Homepage Premium: 10
Racer Go: 300 MB
Racer Pro: 800 MB
Racer Turbo: 2000 MB
Für MediaPool:
EasyPages: 25 MB
PowerPages: 250 MB
PremiumPages: 500 MB
PremiumPages Unlimited: 1000 MB
Anzahl Seitenabrufe:
EasyPages: 30 000
PowerPages: 200 000
PremiumPages: 400 000
PremiumPages Unlimited: 400 000
EasyPages: 3
PowerPages: 12
PremiumPages: 20
PremiumPages Unlimited: beliebig
Homepage Start: 500 MB
Homepage Plus: 1000 MB
Homepage Profi: 2000 MB
Homepage Premium: 5000 MB
Racer Go: 50 GB
Racer Pro: 100 GB
Racer Turbo: 400 GB
Racer Go: 20
Racer Pro: 40
Racer Turbo: 100
-
●
Kein Limit
Beliebig
-
Archiv und Staging ab Racer Turbo Animierte Flash-Intros, Fotoalbum,
Diashow-Creator, Gästebuch,
Forum, Umfrage, Kontaktformular
Open-Source-Programme Typo3,
Mambo, Joomla
-
-
-
-
Keine, da Standalone-Lösung.
Umfangreiche Softwaresammlung
bei Hostingpaketen
Ab Homepage Profi Adobe Photoshop Album
Starter Edition 3.0
Technischer Support kostenlose 0,12 €/Min, Mo–Fr 8–20 Uhr
0800-Nummer, Mo–So 7–24 Uhr
0,12 €/Min, Mo–Fr 9–18 Uhr
Kostenlos
Kostenlos
Kostenlos
12 Monate
EasyPages: 12 Monate,
sonst 6 Monate
12 Monate
-
EasyPages: 4,90 €, sonst 19,90 €
Unlimitierte Anzahl von LivePages
innerhalb Webhosting:
6,99 €/Monat
Aktion: Alle Angebote die ersten
drei Monate kostenlos
Die ersten vier Monate ist das
Paket kostenlos
Goneo
Ganz neu auf dem Markt ist seit September 2006 der Provider Goneo (www.
goneo.de). Goneo bietet unter der Bezeichnung „easyPage“ einen HomepageBaukasten für Einsteiger an, der Webdesign-Neulinge Schritt für Schritt zur fertigen Homepage führt.
Zunächst wählen Sie aus sechs Layouts die für Sie passende Vorlage als Basis
für Ihre Website aus. Dieses Layout können Sie farblich nach Ihren individuellen
Vorstellungen gestalten – die einzelnen
Bereiche der Homepage lassen sich ganz
nach Gusto mit einem Farbschema versehen. Bevor Sie die Texte anpassen, gilt
es noch, eine treffende Grafik für die Einstiegsseite zu finden. Allerdings bietet Goneo an dieser Stelle kein Grafikarchiv an,
sodass Sie entweder auf eigene Bilder, das
Internet oder die Standardgrafik zurückgreifen müssen.
Fügen Sie anschließend die Zusatzanwendungen hinzu, beispielsweise einen
Blog oder ein Fotoalbum, pflegen Sie Ihre
Inhalte ein und veröffentlichen Sie danach die Webseite.
Allerdings ist in diesem Fall der Name
auch Programm, denn easyPage legt wirklich nur eine Seite und keine Webpräsenz
an. Wollen Sie mehr, müssen Sie selbst
Hand anlegen.
So ganz ausgereift wirkt das Angebot
kurz nach dem Start noch nicht. Nach der
Registrierung wurden zwar Benutzername und Passwort umgehend zugeschickt,
das Anmelden war damit allerdings zunächst nicht möglich. Eine E-Mail an
das Kundencenter kam als unzustellbar
zurück. Nach zwei Stunden konnte der
Account nach mehreren Versuchen doch
erreicht werden. Da gibt es noch Verbesserungspotenzial.
Für Anwender mit höheren Ansprüchen bietet Goneo mit seinen vorinstallierten Open-Source-Lösungen TYPO3,
Mambo und Joomla interessante Alternativen.
Der Provider versucht, über günstige
Einstiegspreise in den Markt zu kommen.
„Homepage Start“ mit zwei .de-Domains
und 500 MByte Speicherplatz kostet nur
Andreas Hitzig
1,25 Euro im Monat.
69
WEBPUBLISHING FÜR ALLE
So funktionieren Blogs
A
m Anfang waren die Blogs …“ –
so könnte dereinst die Geschichte
des Web 2.0 beginnen. Mit ihrem
Fokus auf einfache Bedienung und Interaktion ermöglichen Blogs eine vorher
nicht gekannte Vernetzungsdichte und
verschmelzen zur Blogosphäre.
Statisches und dynamisches
Webpublishing
Um den Inhalt auf traditionell gestalteten
Webseiten zu ändern, sind immer dieselben Schritte nötig:
1. Lokale Kopie der Webseite im Lieblings-Editor öffnen.
2. Webseite ändern, speichern und anschließend in den wichtigsten Browsern testen.
3. Webseite per FTP auf den Webserver
hochladen und erneut testen.
Nach dem Hochladen auf den Webserver werden die einzelnen Seiten der
Homepage bei jedem Abruf ein ums andere Mal unverändert ausgeliefert, weswegen man diese Art der Veröffentlichung
auch als statisches Webpublishing bezeichnet.
Wer immer die statischen Webseiten
pflegt, muss mindestens einen HTMLEditor und ein FTP-Programm bedienen
und eventuell sogar konfigurieren können. Außerdem besteht jederzeit die Gefahr, dass ein ungeübter Bearbeiter das
Layout der Seite verändert oder zerstört.
Die Lösung dieser Probleme liegt im
Einsatz eines serverseitigen Programms,
eines sogenannten Content-Management-Systems (CMS), das das Gestalten
und Ändern von Inhalten vereinfacht. Bei
einem CMS liegt die Webseite nicht fix
und fertig auf dem Webserver, sondern
wird erst kurz vor der Auslieferung zusammengebaut, weshalb man im Gegensatz zum statischen in diesem Fall vom
dynamischen Webpublishing spricht.
Auf dem Webserver ist somit nicht die
fertige Webseite gespeichert, sondern lediglich ein Template – eine Vorlage oder
Schablone –, das neben normalem HTML
und CSS auch zahlreiche Platzhalter enthält. Diese Platzhalter werden vom CMS
durch in einer Datenbank gespeicherte
Inhalte ersetzt.
Ein Content-Management-System besteht grundsätzlich aus zwei Teilen – dem
Frontend und dem Backend:
● Das Frontend ist die Fassade – die ganz
normale Website, die die Besucher sehen.
● Das Backend ist der Verwaltungsbereich, der über eine bestimmte URL erreichbar, passwortgeschützt und nur für
Befugte zugänglich ist.
Ein Blog ist nichts weiter als ein einfaches Content-Management-System (CMS) mit einigen
besonderen Features. CHIP zeigt, wie dieses zentrale Element des Web 2.0 funktioniert.
Wie das Backend arbeitet
Um die Inhalte einer Website auf dem
neuesten Stand zu halten, müssen Sie auf
das Backend des CMS zugreifen. So gehen Sie dabei in aller Regel vor:
1. Um einen Beitrag auf der Website zu
ändern, starten Sie einen Browser – ob
Sie nun zu Hause, am Arbeitsplatz oder
in einem Internetcafé sitzen.
2. Im Browser geben Sie die URL-Adresse
der passwortgeschützten Startseite des
Backends ein.
3. Nach erfolgreicher Anmeldung wählen
Sie im Backend den Beitrag, den Sie ändern möchten.
4. Kurz darauf erscheint der Inhalt des
Beitrags aus der Datenbank in einem
Editorfenster.
5. Nach der Änderung wird der Inhalt
wieder in der Datenbank gespeichert.
Wird die Website nun in einem Browser
aufgerufen, erscheint automatisch der
aktualisierte Inhalt, weil die Seite ja erst
auf Anforderung angelegt wird und der
Inhalt dabei jedes Mal direkt aus der
Datenbank kommt.
6. Nach getaner Arbeit melden Sie sich
vom Backend ab.
Auf die gleiche Weise können Sie auch
neue Inhalte anlegen oder veralteten
Content löschen.
Auf diese Weise arbeiten Blogs wie
WordPress und klassische CMS wie
Joomla oder Typo3. Ein klassisches Content-Management-System ist zwar flexibler als ein Blog und beispielsweise
nicht auf eine chronologische Ausgabe
beschränkt, aber auch schwieriger einzurichten und mit einer längeren Einarbeitungszeit verbunden.
Was Blogs auszeichnet
Ein Blog ist ein einfaches Content-Management-System, bei dem der Schwerpunkt auf unkomplizierter Bedienung
und Interaktion liegt – und zwar Interaktion sowohl mit den Besuchern als auch
mit anderen Blogs und Suchmaschinen.
Gegenüber einem klassischen ContentManagement-System weisen Blogs einige
besondere technische Features auf:
● Typisch für einen Blog ist die umgekehrt chronologische Ausgabe der Beiträge: Die neuen Beiträge stehen oben
und wandern langsam nach unten, bis sie
im Archiv verschwinden. Blog ist schließlich die Kurzform von „Web-Logbuch“,
und ein Logbuch ist eine chronologische
Aufzeichnung von Geschehenem.
● Beiträge in einem Blog werden meist
thematischen Kategorien zugeordnet, um
Besuchern die Navigation zu erleichtern.
● Eine Suchfunktion erleichtert das Auffinden bestimmter Beiträge.
● Ein Archiv vereinfacht das Aufrufen von
älteren Artikeln.
● Eine Kommentar-Funktion bietet Besuchern die Möglichkeit, sofort auf einen
Artikel zu reagieren.
● Trackbacks und Pings fördern die Vernetzung der Blogs.
● Ein RSS-Feed macht es häufigen Besuchern leichter, auf dem Laufenden zu
bleiben.
Nicht jeder Blog hält alle diese Features
bereit. BildBlog.de etwa bietet keine
Kommentarfunktion – und eine normale
Website wird nicht schon zum Blog, nur
weil sie einen RSS-Feed anbietet.
Bloggen – Schritt für Schritt
In der täglichen Praxis laufen beim Bloggen die folgenden Schritte ab:
1. Der Blogger meldet sich an, schreibt
einen Beitrag und speichert ihn in der
Datenbank seines Blogsystems.
2. Das Blogsystem integriert den Beitrag
automatisch in die umgekehrt chronologische Ausgabe auf der Startseite und in
das Blogarchiv, aktualisiert den RSS-Feed
und sendet einen Ping an einen oder
mehrere Pingserver (etwa ping.wordpress.de, weblogs.com oder blo.gs), um
eine Aktualisierung zu signalisieren. Der
Ping bedeutet: „Hey, hier gibt’s Neues!“
3. Suchmaschinen wie Google und Technorati.com holen sich in regelmäßigen
Abständen die neuesten Änderungen von
den Pingservern und indizieren die aktu-
alisierten Seiten erneut. So haben sie innerhalb kürzester Zeit aktuelle Versionen
der Blogs in ihren Datenbanken.
4. Besucher erfahren Neuigkeiten über
einen Besuch beim Blog, über das Abonnement des RSS-Feed und über Suchmaschinen.
Aber die Interaktion geht noch weiter.
Wer einen Kommentar zu einem BlogEintrag verfasst, hinterlässt in der Regel
auch einen Link zu seinem eigenen Blog.
Wird ein Beitrag in einem anderen Blog
zitiert, kann ein Trackback auf die Quelle
gesetzt werden. Der Trackback erscheint
unterhalb des ursprünglichen Beitrags
und besagt: „Dieser Beitrag ist in einem
anderen Blog verlinkt worden.“
Suchmaschinen wie Google bewerten
unter anderem die Anzahl und die Qualität der Hyperlinks, die auf eine Seite zeigen, um deren PageRank festzulegen. Ein
hoher PageRank führt dazu, dass die Seite
in den Suchergebnissen weiter oben auftaucht. Wenn ein Blogger also aktiv ist,
viele (und lesenswerte) Artikel schreibt,
Trackbacks darauf erhält und in anderen
Blogs kommentiert, wird sein eigener
Blog früher oder später in den Suchergebnissen belohnt werden. Anders ausgedrückt: Suchmaschinen mögen Blogs.
Das Zusammenwirken dieser Besonderheiten führt zu einer Vernetzungsdichte,
die statische Websites und traditionelle
Content-Management-Systeme nicht erreichen. Durch die intensive Interaktion
der Blogger entsteht die Blogosphäre – die
Gesamtheit aller Blogs.
Ob als Sprachrohr für Studenten, Zeitvertreib für Teenager oder Kommunikationskanal für Vorstandsmitglieder – Bloggen ist für jeden interessant, der im Web
Peter Müller
etwas zu sagen hat.
KNOW-HOW
Das Blogging-System in Zeitlupe
Wenn ein User eine Webseite von einem Content-Management-System oder Blog anfordert, passieren die folgenden Schritte:
1. Der Benutzer gibt in seinem Browser eine
bestimmte URL ein, etwa http://infotekten.
de/, und drückt [Enter].
2. Die angeforderte Seite enthält neben
normalem HTML und CSS auch Platzhalter,
die vom Content-Management-System mit
Inhalt gefüllt werden müssen. Der Webserver
weiß das und sagt dem CMS Bescheid.
3. Das CMS holt die aktuellen Inhalte für die
Platzhalter aus der Datenbank.
4. Das CMS baut die von der Datenbank erhaltenen Inhalte in die Platzhalter ein.
5. Der Webserver liefert den Quelltext aus.
6. Der Browser stellt den Quelltext dar.
Der Besucher merkt davon nichts. Die Platzhalter sind vom CMS durch Inhalte ausgetauscht worden, und der dynamisch erzeugte
Quelltext unterscheidet sich für einen Browser nicht von einem statisch angelegten.
71
BLOGGER.COM NUTZEN
Ein Blog in fünf Minuten
Der schnellste Weg zum eigenen Blog führt über einen Blogservice. Der betreibt das Blogsystem
auf seinen Computern, sodass Sie weder Webspace benötigen noch etwas installieren müssen.
AUF EINEN
EINENBLICK
BLICK
, Bloggen mit Blogger.com
Konto auf Blogger.com anlegen
s72
Quelltext der Vorlage öffnen und
bearbeiten
s74
sprachig, auch wenn in den Blogs selbst
noch ein paar englischsprachige Relikte
auftauchen.
Los geht’s mit einem kurzen Blick auf
die Startseite von Blogger: Unterhalb des
dunkelblauen Kopfbereichs können Sie
andere Blogs erforschen: Google’s „BlogSuche“ oben rechts durchsucht Millionen von Blogs im gesamten Internet. Die
Optionen darunter beschränken sich auf
die bei Blogger veröffentlichten Blogs:
Links erscheinen gerade aktualisierte
Blogs, in der Mitte werden „bemerkenswerte Blogs“ vorgestellt, rechts können
Sie mit einem Klick auf „Nächstes Blog“
Roulette spielen und einen zufälligen Blog
aus der Welt von Blogger aufrufen.
Im Bereich „Was ist ein Blog?“ finden
Sie eine kurze Einführung in die Möglichkeiten von Web-Tagebüchern. Falls
Sie kein „Kurzes Tutorial“ benötigen, ge-
hen Sie gleich weiter zum Aufbau Ihres
Blogs. Sie beginnen mit einem Klick auf
den orangefarbenen Pfeil rechts unten:
„Blog jetzt erstellen“.
1
Blogkonto anlegen
Im ersten Schritt eröffnen Sie ein Konto
auf Blogger.com. Mit diesem Konto können Sie bei Bedarf sogar mehrere WebTagebücher betreiben. Zunächst füllen
Sie das „Formular zum Anlegen des Kontos“ aus.
Zur Kontoeröffnung geben Sie zunächst einen Nutzernamen und ein Passwort ein. Da der Nutzername nur einmal
vorkommen darf und Blogger bereits
Millionen User hat, ist ein bisschen Fantasie gefragt. Das Passwort muss aus
mindestens sechs Zeichen bestehen und
zur Vermeidung von Tippfehlern zwei-
F
ür den eigenen Blog brauchen Sie
nichts weiter als einen Internetzugang, einen Browser – und fünf
Minuten Zeit. Anschließend können Sie
sofort ausprobieren, wie Ihnen das Bloggen so gefällt.
Blogger.com ist der älteste und weltweit größte Blogservice. Anfang 2003 hat
Google die Betreiberfirma Pyra Labs übernommen. Seitdem wird Blogger ständig
weiterentwickelt und ist ebenso wie die
übrigen Google-Anwendungen kostenlos. Die Benutzerführung ist deutsch-
mal eingegeben werden. Der Anzeigename
lässt sich im Gegensatz zum Nutzernamen
frei wählen und wird später automatisch
unter den von Ihnen veröffentlichten Beiträgen angezeigt. Die Nennung einer EMail-Adresse und das Akzeptieren der
Nutzungsbedingungen schließen den ersten Schritt ab.
Alle Angaben können übrigens jederzeit über die Dashboard („Armaturenbrett“) genannte Verwaltungszentrale von
Blogger geändert werden.
2
Dem Blog einen Namen geben
Im zweiten Schritt legen Sie einen Titel
für Ihren Blog fest und definieren, unter
welcher Adresse (URL) er im Web erreichbar sein soll.
Die Seite bietet zwei grundsätzliche
Möglichkeiten: in der oberen Hälfte die
normale Einrichtung, die Sie in diesem
Artikel kennenlernen. Dabei wird Ihr
Blog auf den Servern von Blogger gespeichert, und zwar als Subdomain der Website blogspot.com in der Art von http://
IhreBlogadresse.blogspot.com. In der unteren Hälfte gibt es die erweiterte Einrichtung, in der Ihr Blog auf Ihrem eigenen
Webspace veröffentlicht werden kann.
Für die normale Einrichtung tragen
Sie zunächst den Blogtitel und die Blogadresse ein:
● Der Blogtitel erscheint in Ihrem Blog
später als Hauptüberschrift oben auf der
Seite.
● Bei der Blogadresse handelt es sich um
den gewünschten Namen der Subdomain
auf blogspot.com.
Den Namen für die Subdomain können Sie je nach Verfügbarkeit und unter
Konto anlegen: Auf der Startseite
von Blogger.com können Sie sofort
zur Sache kommen.
1
Beachtung der allgemeinen Regeln für
Domain-Namen (keine Umlaute, keine
Leerstellen, keine Sonderzeichen) frei
wählen. Der Subdomain-Name muss also
weder mit dem Nutzernamen noch mit
dem Blogtitel etwas zu tun haben.
Zum Schluss füllen Sie die Wortbestätigung aus. Sie soll verhindern, dass Spamprogramme massenweise Blogs anlegen.
Anstatt die dargestellte Grafik abzuschreiben, können Sie auch auf das Symbol mit
dem Rollstuhlfahrer daneben klicken und
sich ein paar Zeichen vorlesen lassen, die
Sie dann in das Feld eingeben. Das Symbol ist also eine Alternative zur Grafik
und dient nicht zur Bestätigung der Eingabe. Nachdem Sie das Feld „Wortbestätigung“ ausgefüllt haben, klicken Sie rechts
unten auf den orangefarbenen Pfeil mit
der Beschriftung „Weiter“.
4
Beiträge schreiben
Nach der Übernahme von Blogger hat
Google namhafte Webdesigner wie Douglas Bowman, Jeffrey Zeldman und Dan
Cederholm mit der Gestaltung von CSSbasierenden Vorlagen beauftragt. Nun
können Sie Ihren Blog mit einer dieser
Vorlagen verknüpfen:
Die getroffene Wahl ist nicht für die
Ewigkeit: Sie können jederzeit eine andere Vorlage auswählen, die gewählte Vorlage ändern oder sogar eigene Vorlagen
entwerfen, denn bei Blogger haben Sie
vollen Zugriff auf das in den Vorlagen
verwendete HTML und CSS.
Wählen Sie eine Vorlage und klicken
Sie auf die Schaltfläche „Weiter“. Danach
erhalten Sie die Meldung: „Ihr Blog wurde erstellt!“
Nach einem Klick auf den Pfeil „Post
starten“ geht, bildlich gesprochen, die
Post ab, und Sie können mit dem Schreiben des ersten Beitrags beginnen. Gewöhnungsbedürftig ist übrigens der Gebrauch des Wortes „Post“ bei Blogger. Gemeint ist nicht der gelbe Logistik-Riese,
sondern ein Eintrag in Ihrem Blog. „Beitrag“ oder „Artikel“ wären die passenden
deutschen Begriffe.
Im Editor sehen Sie oben links das Feld
„Titel“. Dort geben Sie die Überschrift
Ihres Beitrags ein. Falls das Feld nicht zu
sehen ist, können Sie es im Menü „Einstellungen | Formatierung“ über die Option „Titelfeld anzeigen“ aktivieren.
Das Editorfenster selbst kennt zwei
Modi, die Sie über die Registerkarten
rechts oben ändern können: Die Standardeinstellung „Verfassen“ ist ein Wysiwyg-Editor, der ähnlich funktioniert wie
eine ganz normale Textverarbeitung und
das erzeugte HTML und CSS vor Ihnen
versteckt, die Registerkarte „HTML bearbeiten“ dagegen ermöglicht die Arbeit
direkt im Quelltext.
Oberhalb des Textfensters finden Sie
eine Symbolleiste zur Formatierung und
zum Einfügen von Listen, Hyperlinks
und Bildern. Ganz rechts können Sie
über den Link „Preview“ eine schnelle
Vorschau des Beitrags aufrufen. „Post
wiederherstellen“ verwirft aktuelle Änderungen und geht zur zuletzt gespeicherten Version des Beitrags zurück.
Im unteren Rand des Editorfensters
können Sie nach einem Klick auf „Optionen für Posts und Kommentare“ das
Veröffentlichungsdatum bestimmen und k
Ein Name für den Blog: Die „Wortbestätigung“ soll verhindern, dass
Spamtools massenweise Blogs anlegen.
Vorlage wählen: Die Templates
von Blogger.com lassen sich jederzeit
individuell ändern.
3
2
Eine Vorlage wählen
3
73
Kommentare zu diesem Beitrag erlauben
oder verbieten.
Unterhalb des Fensters gibt es zwei
Schaltflächen zum Speichern des Beitrags:
„Als Entwurf speichern“ sichert den Beitrag, veröffentlicht ihn aber nicht. „Post
veröffentlichen“ hingegen speichert den
Beitrag und veröffentlicht ihn, sodass er
in Ihrem Blog zu sehen ist.
Nach einem Klick auf diesen Button
bekommen Sie die Meldung „Ihr Blog
wurde erfolgreich veröffentlicht“. Um
daraufhin Ihren Blog in Augenschein zu
nehmen, klicken Sie auf einen der beiden Links „Blog anzeigen“. Nun sehen
Sie Ihren Beitrag mit der ausgewählten
Vorlage. Ganz oben erscheint die Blogger
NavBar, mit der Sie wahlweise Ihren eigenen oder alle Blogs durchsuchen können. Diese Leiste wird von Blogger automatisch eingebaut und kann nicht ausgeblendet werden.
Unterhalb der Blogger NavBar erscheint der Blogtitel, den Sie in Schritt 2
eingegeben haben. In diesem Beispiel ist
dies „Chip Sonderheft Homepage“. Darunter steht links der erste Beitrag, in dem
ganz unten der Anzeigename aus Schritt
1 wieder auftaucht („posted by Peter“).
Auf der rechten Seite sehen Sie die Anzahl
der Kommentare – und mit einem Klick
auf das Bleistiftsymbol können Sie den
Beitrag wieder in den Editor laden und
bearbeiten.
Rechts neben dem ersten Blogbeitrag befindet sich die Sidebar mit Ihrem Nutzerprofil („About Me“), einer
Liste mit Hyperlinks („Links“), einer
Liste mit Links zu Ihren Blogbeiträgen
(„Previous Posts“), Ihrem Monatsar-
PROFI-TIPP
„About Me“ ändern
Bei der Eindeutschung der Vorlage ist der
Profilblock oben in der Sidebar ein Sonderfall: Der gesamte Block wird durch
die Blogger-Variable <$BlogMemberProfile$> erzeugt und kann deshalb nicht
einfach geändert werden. Weitere Informationen dazu finden Sie in der Blogger-Hilfe.
Wie Sie den Profiltext „About Me“ in der
Sidebar ändern, erfahren Sie unter http://
help.blogger.com/bin/answer.py?answer
=42309. Infos zu Profiltags und ein Beispiel für einen individuellen Profilblock
gibt’s unter http://help.blogger.com/bin/
answer.py?answer=42091.
chiv („Archives“) sowie einem Logo von
Bloggercom.
5
Einstellungen ändern
Um Änderungen an den Einstellungen
Ihres Blogs vorzunehmen, aktivieren Sie
vom Dashboard oder von der Seite „Veröffentlichen“ aus die Seite „Einstellungen“. Dort können Sie unter anderem
den Titel Ihres Blogs ändern. Der Text
aus dem Feld „Beschreibung“ erscheint
im Blog übrigens oben unterhalb des
Blogtitels.
In dem eben veröffentlichten Beitrag
steht noch ein englisches Datumsformat.
Um die Datumsanzeige zu lokalisieren,
wechseln Sie in den „Einstellungen“ auf
die Seite „Formatierung“.
Die Beschriftungen der Datumsoptionen auf dieser Seite sind nicht selbsterklärend: Das „Datum-Header-Format“
Erster Beitrag:
Der Editor funktioniert wie eine normale Textverarbeitung.
Sie können Ihren Beitrag zunächst als Entwurf speichern oder
sofort veröffentlichen.
4
erscheint oberhalb der Beiträge und fasst
alle Beiträge eines Tages zusammen. Das
„Datumsformat für den Archivierungsindex“ bestimmt, in welcher Form die
Archivliste in der Sidebar erscheint. „Format des Zeitstempels“ bezieht sich auf die
Uhrzeit, zu der der Beitrag verfasst wurde,
und steht unten im Beitrag. In Deutschland ist die korrekte „Zeitzone“ „Europe/
Berlin“ und das „Datum“ sollte im Format „German (Germany)“ erscheinen.
Nach diesen Änderungen klicken Sie
ganz unten auf der Seite auf die orangefarbene Schaltfläche „Einstellungen speichern“. Kurz darauf erscheint weiter oben
auf der Seite eine Mitteilung mit zwei
Schaltflächen:
● Über „Erneut veröffentlichen“ publizieren Sie Ihren Blog noch einmal, damit die
Änderungen angezeigt werden.
● Die Alternative heißt „Den Index erneut
veröffentlichen“.
Das klingt verwirrend, aber der Unterschied ist ganz einfach: Die erste Option
veröffentlicht alle Seiten erneut, und das
kann je nach Umfang des Blogs eine Weile
dauern. Die zweite Option dagegen erneuert lediglich die Startseite (den „Index“) – und das geht wesentlich schneller.
Für Speicherungen zwischendurch sollten
Sie nur den Index neu veröffentlichen und
erst am Ende der Sitzung alle Seiten.
6
Quelltext der Vorlage öffnen
Die verbleibenden Englisch-Brocken in
Ihrem Blog wie etwa „posted by“ oder
„comments“ stammen aus der Vorlage.
Nun verbinden Sie das Kennenlernen der
Vorlage mit ein paar einfachen Änderungen im Quelltext.
Rufen Sie zum Anpassen der Vorlage
die Registerkarte „Vorlage“ auf. Sie landen nun auf einer Seite mit dem schönen
Namen „Aktuellen Post bearbeiten“. Gemeint ist aber „Aktuellen Blog bearbeiten“, denn die Vorlage gilt für den ganzen
Blog, nicht nur für einen Eintrag: An dieser Stelle können Sie die Vorlage ändern.
Sie haben die Möglichkeit, auf dieser
Seite die Farbe der Blogger NavBar zu
modifizieren, sodass sie sich möglichst
elegant in Ihr Design einfügt. Darunter
befindet sich ein Textfeld mit dem Quelltext der Vorlage. Der besteht aus ganz
normalem HTML und CSS sowie zahlreichen Blogger-Platzhaltern.
Wenn Sie die Vorlage wie in Schritt 7
beschrieben ändern möchten, benötigen
Sie grundlegende HTML-Kenntnisse.
Aber keine Sorge: Falls Ihr Blog nach
Ihren Experimenten ein wenig seltsam
aussieht, können Sie jederzeit zu einer der
Standardvorlagen von Blogger wechseln.
Die Änderungen an der Vorlage gehen dadurch verloren, die geschriebenen Beiträge nicht.
7
Englische Begriffe eliminieren
Um die Vorlage bequemer bearbeiten zu
können, kopieren Sie den Quelltext aus
dem Textfeld in einen Editor. Wenn Sie
den Quelltext zusätzlich auf Ihrer Festplatte speichern, haben Sie gleich ein
Backup – für alle Fälle.
Im „head“-Bereich des Quelltextes finden Sie gleich den ersten Blogger-Platzhalter. Die Platzhalter beginnen mit „<$“,
enden mit „$>“ und sollten nicht geändert werden. „<$BlogPageTitle$>“ beispielsweise wird vom Blogsystem bei der
Veröffentlichung durch den Blogtitel ersetzt.
Kurz darauf beginnt ein umfangreicher
„<style>“-Block, der das nicht selten einige hundert Zeilen lange CSS zur Gestaltung des Blogs enthält. An dieser Stelle
erscheinen als CSS-Kommentar auch Name und Autor der aktuellen Vorlage.
Im „body“-Bereich des Quelltextes
folgt das HTML. Um die englischen Textpassagen zu finden, nutzen Sie am besten
die Suchfunktion des Editors. Die meisten Vorlagen enthalten mindestens die
Begriffe „posted by“, „comments“, „Previous Posts“ und „Archives“. Am besten
kommentieren Sie die englischen Begriffe
aus und schreiben die deutschen daneben: „ Geschrieben
von“ wäre ein Beispiel. Durch das Auskommentieren wissen Sie immer, welche
Stellen von Ihnen geändert wurden.
8
Vorlage ändern:
Über Eingriffe
in den Quelltext können Sie etwa englische
Begriffe durch
deutsche ersetzen.
7
Linkliste bearbeiten
Falls Ihre Vorlage in der Sidebar eine
Linkliste enthält, können Sie auch die
gleich bearbeiten. Scrollen Sie dazu durch
den Quelltext, bis Sie eine Passage finden,
die der folgenden ähnelt:
<h2 class=³sidebartitle³>Links</h2>
<ul>
<li><a href=³http://news.
google.com/³>Google News</a></
li>
<li><a href=³http://
EDITME³>Bearbeiten</a></li>
<li><a href=³http://
EDITME³>Bearbeiten</a></li>
</ul>
Ändern Sie die Linkliste nach Ihren Wünschen. Sie könnte danach zum Beispiel so
aussehen:
neuten Veröffentlichung des Blogs können Sie die Änderungen sehen.
Mit den entsprechenden HTML- und
CSS-Kenntnissen können Sie auch ein
völlig individuelles Design entwerfen.
Falls Sie das versuchen wollen, schauen
Sie am besten in den Hilfe-Seiten für fortgeschrittene Nutzer nach. Anleitungen
zum Gestalten eigener Vorlagen finden
Sie etwa unter http://help.blogger.com/
bin/topic.py?topic=8930.
<h2 class=³sidebartitle³>Linkliste</h2>
9
Blogger: Die nächste Version
<ul>
<li><a href=³http://chip.
de/³>CHIP online</a></li>
<li><a href=³http://littleboxes.de³>Little Boxes</a></li>
</ul>
Kopieren Sie den geänderten Quelltext
wieder in das Textfeld bei Blogger und
speichern Sie die Vorlage. Nach einer er-
KNOW-HOW
Andere Blogservices
Blogger ist der älteste und größte Blogservice, aber bei Weitem nicht der einzige.
Die besten Alternativen:
www.blogigo.de/
www.blogg.de/
www.20six.de/
http://wordpress.com/
Eine in unregelmäßigen Abständen aktualisierte Übersicht zahlreicher Blogservices
können Sie im Blog von Thomas Gigold finden. Beachten Sie auch die Kommentare
unter dem Beitrag http://gigold.de/
archiv/2005/05/05/und-noch-ein-blog
hoster/.
Mit dem „Blogger in Beta“ gibt es bereits
eine Vorschau auf die nächste Version von
Blogger. Ein genaues Startdatum steht
zwar noch nicht fest, aber ein Test ist jederzeit möglich. Die wichtigsten Neuerungen der nächsten Version:
● „Labels“ (auch „Tags“ genannt) ermöglichen das Kategorisieren von Beiträgen.
● Über die „Zugangskontrolle“ bestimmen Sie, wer Ihren Blog lesen darf und
wer nicht.
● Dank „Dynamic Serving“ werden die
Blogs künftig direkt aus der Datenbank
serviert, sodass das lästige Neuveröffentlichen nach Änderungen entfällt.
● „Layout“: Änderungen am Blog lassen
sich in Zukunft per Drag & Drop vornehmen. Der direkte Quelltextzugriff bleibt
allerdings möglich.
Außerdem wird Google weiter daran
arbeiten, Blogger in seine anderen Applikationen zu integrieren. So soll es zum
Beispiel bald möglich sein, Blogeinträge
mit der vor Kurzem von Google erworbenen Online-Textverarbeitung Writely
Peter Müller
zu verfassen.
75
WORDPRESS EINSETZEN
Ein Blog auf Ihrer Seite
Ein Blogservice wie Blogger.com ist bequem und einfach zu bedienen. Wer jedoch mehr
Kontrolle über Layout und Funktionen wünscht, sollte ein Blogsystem auf dem eigenen Webspace
installieren. Die meisten Website-Betreiber haben sich für WordPress entschieden.
AUF EINEN
AUF
EINENBLICK
BLICK
, Blog mit WordPress aufsetzen
WordPress Schritt für Schritt installieren
und konfigurieren
s76
Spam aussperren mit Akismet
, Alle Tools auf CD
BLOG-TOOLS: WordPress, VideoInstallations-Anleitung hCMS
s79
Damit Sie WordPress auf Ihrem Webspace installieren können, muss dieser
zwei wichtige Voraussetzungen mitbringen: PHP (Version 4.2 oder höher) und
MySQL (Version 3.23.23 oder höher). Zur
Installation benötigen Sie außerdem die
Zugangsdaten für die MySQL-Datenbank.
Die finden Sie in der Regel in den Unterlagen, die Sie von Ihrem Provider bekommen haben. Sie brauchen folgende Daten
für die Installation:
● Database Name: der Name der MySQLDatenbank, die Ihr Provider Ihnen auf
Ihrem Webspace zur Verfügung stellt.
● MySQL User Name: der Benutzername,
mit dem Sie sich bei der Datenbank anmelden.
● MySQL Password: Ihr Passwort zur
Nutzung der Datenbank.
● MySQL Server Address: der Name des
Computers, auf dem die Datenbank läuft.
Das ist meist „localhost“, kann aber auch
etwas wie „dbserver.provider.de“ sein.
Um mit der Installation zu beginnen,
fehlt Ihnen nur noch WordPress selbst.
Auf der Heft-CD finden Sie die deutsche
Version von WordPress 2.0.4. Sie sollten
aber bei WordPress Deutschland (http://
wordpress.de/download/) nachsehen, ob
es eine neuere Version gibt, und gegebenenfalls diese installieren.
In der deutschen Version sind neben
dem Verwaltungsbereich auch das Installationsprogramm und das StandardTheme für das Frontend übersetzt.
1 Konfigurationsdatei anlegen
Die meisten Installationen von WordPress
verlaufen so unkompliziert, dass der Vorgang im wahrsten Sinne des Wortes eine
Sache von fünf Minuten ist. Entpacken
Sie die ZIP-Datei mit WordPress in einen
neuen Ordner auf Ihrer Festplatte. Achten
Sie beim Entpacken darauf, dass die Verzeichnisstruktur erhalten bleibt.
In dem Ordner „wordpress“ befindet
sich die Datei „wp-config-sample.php“.
„Sample“ heißt „Beispiel“, und diese Datei enthält ein Beispiel zur Konfiguration
W
ordPress ist ein kostenloses und
einfach zu bedienendes Blogsystem. Das Programm läuft
auf Ihrem Webspace, ist in der Programmiersprache PHP geschrieben und speichert seine Daten in der Datenbank MySQL. Falls Sie das Programm vor der Installation einmal ausprobieren möchten
oder noch keinen passenden Webspace
haben, steht WordPress auf http://word
press.com auch als Blogservice zur Verfügung, sodass Sie es dort nach einer kostenlosen Registrierung einfach einmal
ausprobieren können.
von WordPress. Legen Sie eine Kopie der
Datei im selben Ordner an und benennen
Sie die Kopie um in „wp-config.php“.
Dieser Name ist wichtig, denn WordPress
sucht seine Konfigurationsdaten nur in
einer Datei namens „wp-config.php“.
Öffnen Sie die eben angelegte wpconfig.php in einem Editor. Ab Zeile 3
finden Sie die Zugangsdaten für die Datenbank MySQL, die in der Beispieldatei
ungefähr so aussehen (nach dem doppelten Schrägstrich die deutsche Übersetzung des Platzhalters):
define(‚DB_NAME‘, ‚wordpress‘);
// Name der Datenbank
define(‚DB_USER‘, ‚username‘);
// MySQL-Benutzername
define(‚DB_PASSWORD‘, ‚password‘);
// MySQL-Passwort
define(‚DB_HOST‘, ‚localhost‘);
// Name des MySQL-Servers
An dieser Stelle müssen Sie statt der
fett gedruckten Beispieldaten die MySQLZugangsdaten eintragen, die Sie von Ihrem
Provider erhalten haben. Danach könnten
die Zeilen etwa so aussehen:
define(‚DB_NAME‘, ‚db141394‘);
// Name der Datenbank
define(‚DB_USER‘, ‚peter‘);
// MySQL-Benutzername
define(‚DB_PASSWORD‘, ‚geheim23‘);
// MySQL-Passwort (im Klartext!)
define(‚DB_HOST‘, ‚localhost‘);
// Name des MySQL-Servers
Nachdem Sie die korrekten Daten eingetragen haben, speichern und schließen
Sie die Datei.
2
WordPress-Dateien hochladen
In diesem Schritt übertragen Sie mit
einem FTP-Programm alle im Ordner
2
„wordpress“ enthaltenen Dateien und
Unterordner auf Ihren Webspace, wobei
die Ordnerstruktur unbedingt erhalten
bleiben muss. Sie können die Dateien auf
Ihrem Webspace in den Hauptordner
oder in einen eigens für den Blog angelegten Unterordner kopieren.
Falls Sie die Dateien in den Hauptordner kopieren, ist WordPress nach der Installation über die URL http://IhreDomain.de/ erreichbar.
Wenn Sie die Dateien dagegen in einen
Unterordner wie beispielsweise /weblog/
kopieren, lautet die URL für Ihren Blog
http://IhreDomain.de/weblog/.
Die Ordnerstruktur muss nach dem
erfolgten Upload auf Ihrem lokalen Computer und auf Ihrem Webspace auf jeden
Fall identisch sein.
3
Installationsprogramm starten
Nun öffnen Sie einen Browser und rufen
das Installationsprogramm „install.php“
auf, das sich im Unterordner „wp-admin“
befindet. Haben Sie WordPress auf Ihrem
Webspace im Hauptordner installiert, geben Sie im Browser die URL http://
IhreDomain.de/wp-admin/install.php
ein. Im Browserfenster erscheint daraufhin eine Willkommenseite.
Zwei Fehler können an dieser Stelle
auftreten: Erscheint statt der Willkommenseite eine 404-Meldung, überprüfen
Sie die Ordnerstruktur auf Ihrem Webspace sowie die eingegebene URL. Falls
die Meldung „Fehler bei der Datenbankverbindung“ auftaucht, überprüfen und
korrigieren Sie die Zugangsdaten in der
„wp-config.php“, kopieren die korrigierte
Datei auf Ihren Webspace und rufen die
„install.php“ erneut auf.
Daten hochladen: Nach dem Upload muss die Ordnerstruktur
auf dem PC (links) und dem Webspace (rechts) identisch sein.
3
TIPP
Aussagekräftige
URLs vergeben
Blogs haben von Natur aus URLs mit
Fragezeichen und Parametern wie etwa
http://beispielblog.de/index.php?p=154
Solche URLs sagen jedoch nichts über den
Inhalt der dahinter stehenden Seite. WordPress kann auch etwas aussagekräftigere
URLs anlegen, beispielsweise http://bei
spielblog.de/2006/09/29/wordpress204-de.html
Nur mit Apache: Auf Ihrem Webspace
müssen allerdings der Webserver Apache
laufen und das Modul mod_rewrite installiert sein. Weitere Informationen dazu bekommen Sie bei Ihrem Webhoster.
Um die Installation zu starten, klicken
Sie auf den nicht zu übersehenden Link
„Schritt 1“. Danach erscheint die rechts
unten gezeigte Seite.
Im ersten Textfeld geben Sie den gewünschten Blogtitel ein, der dort in großen Lettern erscheint. Sie können den
Blogtitel im Backend von WordPress jederzeit problemlos ändern. Im zweiten
Feld tragen Sie eine Ihrer E-Mail-Adressen ein. An diese Adresse wird das im
nächsten Schritt angelegte Admin-Passwort geschickt, das Sie zur Anmeldung in
WordPress benötigen. Sie sollten die Adresse daher genau überprüfen.
Nach einem Klick auf den Link „Weiter mit Schritt 2“konfiguriert das Installationsprogramm die Datenbank – und danach sind Sie fertig. WordPress ist installiert. Bevor Sie weitermachen, notieren
Sie sich den Benutzernamen „admin“ und
das zufällig angelegte Passwort, das auf
der Seite erscheint.
k
WordPress installieren: Das Installationsprogramm fragt zunächst nach dem Blogtitel und Ihrer E-Mail-Adresse.
77
Wie jedes Content-Management-System besteht auch WordPress aus einem
Frontend und einem Backend (mehr dazu lesen Sie ab s70). Das Backend ist die
Verwaltungszentrale, die wir Ihnen im
weiteren Verlauf des Artikels kurz vorstellen. Das Frontend dagegen ist die eigentliche Website, die Sie im Browser unter
http://IhreDomain.de erreichen, sofern
WordPress im Hauptordner installiert
wurde. Das Aussehen des Frontends ist
durch das Standard-Theme mit dem
schönen Namen „Kubrick“ bestimmt. Es
gibt bereits einen Beitrag, einen Kommentar sowie einige Einträge in der Sidebar rechts zu sehen.
4
Erste Schritte im Backend
In diesem Abschnitt lernen Sie das Backend von WordPress kennen. Darin haben
Sie die Möglichkeit, den Text des bereits
vorhandenen Beitrags zu ändern, den von
WordPress angelegten ersten Kommentar
zu löschen und die „Blogroll“ genannte
Linkliste in der Sidebar zu bearbeiten.
Um sich im Backend anzumelden, geben Sie im Browser die URL für den Blog
ein und hängen den Dateinamen „wplog-in.php“ an. Ist Ihr Blog im Hauptordner installiert, lautet die Adresse http://
IhreDomain.de/wp-login.php.
Wenn alles klappt, bekommen Sie ein
Anmeldefenster zu sehen. Geben Sie an
dieser Stelle den Benutzernamen „admin“
sowie das bei der Installation vergebene
Passwort ein. Bestätigen Sie die Eingabe
schließlich mit einem Klick auf die Schaltfläche „Anmelden“.
Nach erfolgreicher Anmeldung gelangen Sie zur Backend-Startseite, die im
TIPP
WordPress auf dem
eigenen Rechner
Um WordPress unter Ausschluss der Öffentlichkeit auf Ihrem heimischen PC betreiben
zu können, benötigen Sie einen Webserver,
den PHP-Interpreter und eine MySQL-Datenbank. Alles zusammen bekommen Sie
in einem Paket namens XAMPP. Auf Blogshop.de gibt es ein hervorragendes Tutorial zu WordPress und XAMPP: http://blog
shop.de/wordpress/wordpress-unterxampp-installieren/.
Original „Dashboard“ heißt. Die deutsche
Übersetzung „Tellerrand“ (statt „Armaturenbrett“) ist zwar ungewöhnlich, trifft
den Kern der Seite aber ganz gut. Schließlich finden Sie am „Tellerrand“ neben
praktischen Links zum Starten und einigen Statistiken auch einen sprichwörtlichen Blick über den Tellerrand Ihres eigenen Blogs hinaus – insbesondere Mitteilungen über neue Versionen von WordPress sowie Links zu interessanten Artikeln über WordPress.
Ganz oben links sehen Sie den bei der
Installation vergebenen Blogtitel. Mit
dem Link „Site ansehen“ direkt daneben
können Sie einen Blick auf das Frontend werfen. Allerdings ist es in der Regel
praktischer, Frontend und Backend in
zwei verschiedenen Browserfenstern geöffnet zu haben und zwischen den Browserfenstern zu wechseln.
Unterhalb des Blogtitels befindet sich
die hellblaue Navigationsleiste für das
Backend. Um einen neuen Beitrag zu
schreiben, klicken Sie auf „Schreiben“,
und um bestehende Beiträge, Kommentare oder Kategorien zu ändern, öffnen
Sie das Menü „Verwalten“.
Auf der Seite „Verwalten | Beiträge“
sehen Sie eine Übersicht der letzten 15 in
Ihrem Blog veröffentlichten Beiträge. Um
den von WordPress vorgegebenen ersten
Beitrag (mit der ID 1) zu ändern, klicken
Sie auf den Link „Bearbeiten“ weiter
rechts. Daraufhin wird der Beitrag in
einem komfortablen Wysiwyg-Editor angezeigt.
In der Navigationsleiste können Sie
übrigens sehen, dass WordPress automatisch in die Abteilung „Schreiben | Beitrag
schreiben“ gewechselt ist. Ändern Sie in
diesem Bereich den Titel und den Text des
Beitrags und speichern Sie ihn anschließend. Die Schaltfläche „Zwischenspeichern“ speichert den geänderten Text in
die Datenbank und lässt den Editor geöffnet, ein Klick auf „Speichern“ hingegen
speichert den Text und kehrt danach zur
Liste der Beiträge zurück.
Zur Verwaltung der von Ihren Besuchern geschriebenen Kommentare gehen
Sie in den Bereich „Verwalten | Kommentare“. An dieser Stelle können Sie auch
den von WordPress vorgegebenen Standardkommentar löschen.
Im nächsten Schritt ändern Sie auch
die von WordPress vorgegebene Blogroll.
Mit dem Begriff „Blogroll“ bezeichnet
WordPress eine Liste mit Blogs, die Sie
gerne lesen und die auf Ihrer Startseite
erscheint. Um die Blogroll zu bearbeiten,
klicken Sie in der Navigationsleiste einfach auf „Links“.
In der Spalte „Aktion“ können Sie die
vorhandenen Einträge bearbeiten oder
löschen. Zum Hinzufügen neuer Links
wechseln Sie auf die Seite „Link hinzufügen“. Im Bereich „Linkkategorien“ können Sie nun neue Linklisten anlegen und
auch die Überschrift „Blogroll“ ändern,
beispielsweise in „Meine Lieblingsblogs“
oder in eine andere Bezeichnung für Ihre
Blogfavoriten. Vergessen Sie nicht, die
Änderungen gelegentlich im Frontend zu
begutachten.
5
4
Backend: Auf der „Tellerrand“ genannten Startseite des Backends von WordPress
können Sie alle Elemente Ihres Blogs bearbeiten und finden diverse Statistiken.
Statische Webseiten anlegen
Vielleicht haben Sie im Frontend bereits
die Überschrift „Seiten“ oben in der Sidebar bemerkt. Unter einer „Seite“ versteht
WordPress eine zusätzliche Webseite, die
Links: In
diesem
Bereich können
Sie die Blogroll –
eine Art Favoritenliste Ihrer
Lieblingsblogs –
bearbeiten.
4
zwar von WordPress verwaltet wird, die
allerdings nicht als Blogeintrag auf der
Startseite erscheint. Das vorgegebene Beispiel trägt den etwas missglückten Titel
„ueber“. In den nächsten Schritten ändern
Sie diesen Titel und legen eine neue Seite
für das Impressum an.
Zum Ändern einer vorhandenen Seite
wechseln Sie in den Bereich „Verwalten |
Seiten“. Suchen Sie den Eintrag für die
Seite mit dem Titel „ueber“ und klicken
Sie weiter rechts auf „Bearbeiten“, um den
Titel und den Text der Seite zu ändern.
Vergessen Sie danach nicht, die Änderungen zu speichern.
Um eine zusätzliche Seite anzulegen –
beispielsweise ein Impressum –, wechseln
Sie in das Menü „Schreiben | Seiten schreiben“. Geben Sie als „Seitentitel“ das Wort
„Impressum“ ein und schreiben Sie ins
Feld „Seiteninhalt“ die für ein Impressum
notwendigen Angaben.
Falls Sie nicht genau wissen, welche
Angaben für ein Website-Impressum
erforderlich sind, sehen Sie unter der Adresse www.digi-info.de/webimpressum/
nach. Beim Impressum-Assistenten von
Digi-Info finden Sie wichtige Informationen für Ihre Einträge.
Nachdem Sie das Impressum fertiggestellt haben, speichern Sie die Seite und
sehen sich das aktualisierte Frontend im
Browser an.
6
WordPress konfigurieren
Zum Abschluss nehmen Sie auf der Seite
„Einstellungen“ noch die wichtigsten Konfigurationsschritte für Ihren Blog vor. Gehen Sie dazu einfach die folgenden Menüpunkte durch:
● Allgemein: An dieser Stelle können Sie
den „Blog-Titel“ und das „Blog-Thema“
ändern, das im Frontend direkt unterhalb
des Blogtitels erscheint. Des Weiteren
können Sie dort festlegen, ob alle Besucher Kommentare abgeben dürfen oder
lediglich registrierte und in welchem Format das „Datum“ und die „Uhrzeit“ erscheinen sollen.
● Schreiben: Bei den „Schreib-Einstellungen“ können Sie Aussehen und Verhalten
des Editors konfigurieren, festlegen, ob
Sie Blogeinträge per E-Mail an Ihren Blog
schicken möchten (nicht empfohlen wegen Spamgefahr) und welche UpdateServices (Pingserver) bei der Aktualisierung eines Beitrags benachrichtigt werden
sollen (mehr zu Pingservern lesen Sie ab
s70).
● Lesen: An dieser Stelle legen Sie fest,
wie viele Artikel auf der Startseite und im
RSS-Feed angezeigt werden sollen.
● Diskussion: In diesem Menü geht es
um Ping- und Trackbacks sowie diverse
Einstellungen für die Kommentarfunktion in Ihrem Blog.
● Permalinks: An dieser Stelle definieren Sie, wie die von WordPress erzeugten
URLs aussehen sollen (siehe Kasten „Aussagekräftige URLs“ auf s77).
Nun wissen Sie genau, wie man in
WordPress Inhalte produziert und verwaltet und die wichtigsten Einstellungen
vornimmt. Die erste Anlaufstelle bei weiteren Fragen sind die FAQ und das sehr
übersichtliche Forum auf Wordpress.de.
Im nächsten Artikel ab s80 lesen Sie, wie
Sie WordPress optisch an Ihre Vorstellungen anpassen und den Blog mit PlugPeter Müller
ins erweitern.
PROFI-TIPP
Spam aussperren mit dem Plugin Akismet
Je bekannter Ihr Blog wird, desto mehr Ärger
werden Sie mit Kommentar-Spammern bekommen. Das sind Programme, die versuchen, Kommentare in Ihren Blog zu schreiben, in denen Links zurück auf Online-Casinos, Poker-Sites und andere tolle Einrichtungen des 21. Jahrhunderts verweisen. Hintergrund dieser Operation ist, dass die
Spammer versuchen, ihre eigenen Sites bei
Google und anderen Suchmaschinen besser
zu platzieren. Ohne Spamschutz kann es Ihnen passieren, dass Sie eines Tages Hunderte von Spam-Kommentaren aus Ihrem Blog
löschen müssen. WordPress-Entwickler Matt
Mullenweg hat sich dieses Problems angenommen und präsentiert mit Akismet eine
sehr effektive Lösung.
Das WordPress-Plugin Akismet ist bereits installiert, muss aber noch mit einem sogenannten API-Key aktiviert werden. Dazu müssen Sie einen Account auf der Seite wordpress.com eröffnen (http://wordpress.com/
signup/). Der benötigte API-Key wird Ihnen
dann in der Begrüßungsmail zugeschickt.
Mit ihm können Sie Akismet aktivieren.
Sobald Sie den API-Key bekommen haben,
gehen Sie im WordPress-Backend in das Me-
nü „Plugins“. Beim Eintrag „Akismet“ klicken
Sie nun rechts auf den Link „Aktivieren“.
Sofort danach wird der Eintrag „Akismet“
grün hinterlegt.
Weiter oben auf der Seite finden Sie den Hinweis, dass der WordPress.com-API-Schlüssel
noch eingegeben werden muss, damit Akismet funktioniert. Klicken Sie auf den Link,
geben Sie den in der Begrüßungsmail von
wordpress.com enthaltenen API-Key ein und
bestätigen Sie die Eingabe mit einem Klick
auf „API-Schlüssel aktualisieren“. Weitere
Informationen zu Akismet gibt es auf der
Website http://akismet.com/.
Akismet: Aktivieren Sie das Gratis-Tool, um
Spam von Ihrem Blog fernzuhalten.
79
WORDPRESS ERWEITERN
Persönliches Tagebuch
M
it der Standardeinstellung sieht
WordPress nicht eben prickelnd
aus. Eher geschäftsmäßig präsentiert sich der Blog mit einem blauen
Titelbild und weißem Hintergrund. „Kubrick“ nennt sich das voreingestellte Theme
Die wichtigsten Plugins für den
eigenen Blog
s82
von der Software. Und weil es Standard ist,
findet es sich auch auf jedem zweiten Blog.
Das ist langweilig.
Doch zum Glück ist WordPress flexibel: Mit wenigen Handgriffen verwandeln
Sie die Optik des Blogsystems komplett –
ohne auch nur eine Zeile zu programmieren und ohne etwas an Inhalt oder Struktur der WordPress-Datenbank zu ändern.
Und mit ein paar Handgriffen mehr fügen Sie dem Programm neue Funktionen
hinzu. So wird aus einem einfachen Blog
Ihr ganz eigener Webauftritt.
Tipps zu WordPress
s82
Theme ändern
AUF EINEN
AUF
EINENBLICK
BLICK
, WordPress erweitern
, Alle Tools auf CD
ZUSATZ-THEME: Das beliebte WuhanTheme in deutscher Version hCMS
PODPRESS: Podcasting-Plugin für das
WordPress-System hWindows
WordPress bringt zwei vorgefertigte Themes mit, die deutschsprachige Version sogar drei. Allerdings ist hier zweimal das
Kubrick-Theme dabei − je einmal auf
Deutsch und auf Englisch.
Um auf ein anderes Theme umzuschalten, müssen Sie mit Admin-Rechten angemeldet sein. Klicken Sie auf „Site Admin“
und wählen Sie „Themes“. Danach zeigt
Ihnen WordPress die vorinstallierten Themes mit kleinen Vorschaubildern an. Achtung: Diese Bilder gibt es nicht bei jedem
Theme. Falls Sie später weitere Vorlagen
installieren, kann es sein, dass diese ohne
Vorschau kommen.
Unter „Verfügbare Themes“ klicken
Sie auf „WordPress Classic 1.5“ – fertig.
Schon ist das neue Theme aktiv. Wenn es
Ihnen nicht gefällt, schalten Sie über „Site
Admin | Themes“ ganz einfach zurück
auf „WordPress Standard DE Edition“.
Bleibt die Frage: Wie kommt das Theme
auf den Server? Im Prinzip funktioniert
das genauso wie die Installation von
WordPress: Laden Sie das Theme auf Ih-
WordPress ist mehr als nur ein Blogprogramm. Mit den richtigen Designvorlagen und
Programm-Erweiterungen können Sie daraus einen individuell abgestimmten Webauftritt machen.
Wie Sie dabei vorgehen und wo Sie Themes und Plugins finden, zeigt der folgende Beitrag.
ren Computer herunter. Entpacken Sie es
in einen beliebigen, leeren Ordner und
kopieren Sie ihn auf Ihren Server. Ziel ist
der Ordner „/wp-content/themes“. Wichtig: Das Theme muss in einem eigenen
Ordner vorhanden sein, danach also per
wp-content/themes/[themename]
erreichbar sein. Nach dem Kopieren steht
es auf Ihrem Server zur Verfügung. Sie
können es nun wie oben beschrieben einschalten. Übrigens gibt es bei manchen
Themes auch eigene Konfigurationsmenüs. Die finden Sie dann unter „Themes |
Theme Optionen“.
Einen Nachteil hat das Herumspielen
mit Themes: Falls Sie das deutschsprachige WordPress installiert haben, erscheinen zusammen mit der neuen Optik – je
nach Theme – auch neue, englischsprachige Menüpunkte. Abhilfe: Entweder Sie
legen selbst Hand an (siehe dazu den Artikel ab s84) und übersetzen das Theme,
oder Sie nehmen ausschließlich deutschsprachige Themes. Die finden Sie zum
Beispiel unter http://themes.wordpressdeutschland.org.
Themes für jeden Geschmack
Themes gibt es für jeden Geschmack, von
schlicht bis verspielt. Hier eine kleine Auswahl deutscher Themes für Ihre Website:
Kubrick
Das Standard-Theme von WordPress hat
hohen Kultfaktor, ist schlicht und zweckmäßig, aber nicht sehr individuell. Ein
Vorschlag: Ändern Sie zumindest das Titelbild und setzen Sie ein eigenes ein. Wie
das geht, lesen Sie ab s84.
Download: Im Lieferumfang.
Classic
GLOSSAR
Noch puristischer als Kubrick ist das
Classic-Theme. Sein Vorteil: Es nutzt im
Unterschied zu Kubrick die gesamte Bildschirmbreite des Browsers aus. Ansonsten
ist das Design sehr unspektakulär und
sehr zurückhaltend.
Download: Im Lieferumfang
Theme: Der Begriff Theme steht ganz allgemein für eine Sammlung von Stilvorlagen. Im Fall von WordPress sind in den
Themes CSS- und PHP-Dateien enthalten.
WordPress-Themes werden entpackt und
in das Vorlagen-Verzeichnis /wp-content/
themes kopiert. Eine Anpassung von Hand
ist in der Regel nicht notwendig.
Plugin: Unter einem Plugin versteht man
ein Zusatzprogramm für eine Anwendung,
das deren Funktionen erweitert. In WordPress werden die Plugins in das Verzeichnis /wp-content/plugins kopiert. Je nach
Plugin kann es notwendig sein, das aktuell
verwendete Theme von Hand anzupassen.
Podcast: Ein Podcast ist eine Art Radiosendung fürs Internet. Jeder, der ein Mikrofon
und eine Software wie das gratis erhältliche Audacity hat, kann Podcasts aufnehmen und im Internet bereitstellen.
Kommentar-Spam: Das sind von anderen
Computern automatisch geschriebene, unerwünschte Kommentare. Die Spam-Beiträge drehen sich meist um Pillen, Porno
und Casinos. Ziel des Spams ist, über Links
Leser auf eine Seite zu locken und zudem
auch gleich noch eine bessere Einstufung
der Seite bei Google zu erzielen.
WordPress bietet eine Moderationsfunktion, mit der Sie Spam aussortieren können.
Doch bei einem Aufkommen von Hunderten Spam-Kommentaren am Tag wird das
zur unlösbaren Aufgabe. In diesem Fall helfen Plugins wie Akismet weiter, die den
Spam automatisch aussortieren.
WP-Andreas09
Optisch nicht weit entfernt von Kubrick
zeigt auch dieses sachliche Theme den
Haupttext in der Mitte der Seite, er wird
allerdings durch einen weißen Kasten hervorgehoben. Links und rechts davon stehen die Kategorien und andere Informationen. Der Vorteil dieses Aufbaus: Es
bleibt mehr Platz für den Inhalt.
Download: www.zyblog.de/2006/01/09/
wordpress-theme-wp-andreas09-aufdeutsch-l10n-version
At Nightfall
Ein schönes Design für Tagebuchblogs ist
At Nightfall – ein wenig herbstlich-depressiv in Grautönen gehalten, vermittelt
es einen sehr persönlichen Charakter. Für
einen Firmenblog ist es nicht geeignet.
Download: www.webdesign-in.de/mts/
at_nightfall
Letterhead
Schlicht und pragmatisch zeigt sich Letterhead. In diesem Theme dominieren
Schwarz und Weiß, Grafiken sind Fehlanzeige. Dadurch ist das Theme zwar farblos, aber angenehm zu lesen. Durch sein
seriöses Auftreten eignet es sich auch für
geschäftliche Blogs.
Download: http://wordpress.de/down
load/themes. Wählen Sie das Theme einfach im Themebrowser aus und klicken
Sie anschließend auf „Download“.
k
KUBRICK
CLASSIC
WP-ANDREAS09
Der WordPress-Standard: Ein liebevoll
gestalteter Blog ist etwas anderes – Kubrick
ist einfach einfallslos.
Spartanisch: Nichts als der reine Blog –
wer grafische Zierart nicht ausstehen kann,
stellt dieses Standard-Theme ein.
Übersichtlich: Im Design von Kubrick nicht
allzu weit entfernt, bietet dieses Theme
eine einfache und zweckmäßige Oberfläche.
81
AT NIGHTFALL
LETTERHEAD
RED TRAIN
Für schlaflose Nächte: Wer seinen Blog
meist erst spätabends füllt, findet mit
At Nightfall das richtige Ambiente dafür.
Sachlich: Mit der Anmutung einer seriösen
Agenda ist Letterhead auch für die
offiziellen Blogs von Firmen interessant.
Ganz in Rot: Das Theme Red Train ist
sicher nicht für jeden Blog geeignet, bietet
aber zumindest ein originelles Design.
Red Train
plette Verzeichnisse. In beiden Fällen laden Sie das Plugin zunächst herunter, entpacken es auf Ihrer Festplatte und laden
die Datei oder den Ordner dann auf Ihren
Server hoch. Ziel ist dort das Verzeichnis
/wp-content/plugins.
Weiter geht’s in WordPress selbst. Öffnen Sie die Verwaltungsseite und darin
„Plugins“. Suchen Sie in der Liste den Namen des neuen Plugin und klicken Sie
ganz rechts in der Zeile auf „Aktivieren“.
Danach ist das Plugin in Betrieb. Teilweise
müssen Sie allerdings noch Ihre Vorlage
anpassen, um die vom Plugin gelieferten
Daten darin darstellen zu können. Mehr
dazu ab s84.
Ganz in Rot kommt Red Train. Das Theme
ist nicht gerade dezent, die Rottöne sind
jedoch fein aufeinander abgestimmt. Es ist
ideal für aktuelle Blogthemen.
Download: www.perun.net/2005/03/19/
red-train
Ein Plugin installieren
Plugins gibt es in zwei Geschmacksrichtungen: als einzelne Dateien oder als kom-
TIPPS
Theme-Auswahl, Backup und Editor
Vorentscheidung: Bevor Sie sich für ein
Theme entscheiden, sehen Sie es sich genau
an. Folgende Fragen sind wichtig:
● Wird das Theme in allen Browsern richtig
angezeigt, also in Internet Explorer, Firefox,
Mozilla, Opera und so weiter?
● Passt das Theme zu Ihren Inhalten? Zu
breite Fotos beispielsweise können das Seitenlayout sprengen.
● Sieht das Theme wirklich in allen Auflösungen gut aus, also vor allem bei 800 x 600,
1024 x 768 und darüber?
● Funktionieren auch alle vorhandenen Plugins mit dem neuen Theme?
WordPress-Spiegel: Bewahren Sie auf Ihrem
Computer immer eine komplette Kopie Ihrer
WordPress-Installation auf, inklusive aller
Plugins. Bevor Sie dann ein neues Plugin installieren, kopieren Sie es zunächst in das
entsprechende Unterverzeichnis auf Ihrem
PC. Erst dann laden Sie es hoch. Sollte aus
irgendeinem Grund Ihre WordPress-Installation beschädigt werden, haben Sie im Handumdrehen Ersatz parat und können Ihren
Blog gleich wieder aufsetzen, ohne erst alle
Plugins und Templates zusammensuchen zu
müssen. Denken Sie auch daran, alle sonstigen Dateien, die in /wp-content gespeichert
sind, wie etwa Bilder, regelmäßig auf Ihrem
lokalen PC zu sichern. Zusammen mit dem
Backup der Datenbank haben Sie dann immer eine aktuelle Kopie zur Hand.
Einfachen Editor einschalten: Der von WordPress standardmäßig verwendete Editor besitzt eine Art Wysiwyg-Modus, zeigt also an,
wie Ihr Artikel als HTML-Dokument aussieht.
Um mehr Kontrolle über den bereits fertigen
Text zu erhalten – inklusive der HTML-Tags –,
schalten Sie den Editor ab. Dazu rufen Sie
„Benutzer | Persönliche Optionen“ und entfernen das Häkchen vor „Benutz den WYSIWYG-Editor beim Schreiben“.
Übrigens: Falls Sie nur einen kurzen Blick auf
den HTML-Code werfen oder eine Kleinigkeit
an Ihrem Text ändern wollen, klicken Sie im
Standardeditor auf die Schaltfläche „HTML“.
Daraufhin öffnet sich ein neues Fenster und
zeigt den Quelltext an.
Die wichtigsten Plugins
Plugins gibt es wie Sand am Meer. Achten
Sie darauf, nur die zu installieren, die Sie
tatsächlich benötigen. Hier eine Auswahl
der wichtigsten Plugins:
Akismet
Akismet ist das Plugin, das jeder Blogschreiber möglichst bald einschalten sollte. Es verbindet nämlich Ihr WordPress
mit einem Anti-Spam-Server. Dorthin
schickt es automatisch jeden neuen Kommentar, der auf Ihrer WordPress-Seite
landet. Anhand für Spam typischer Muster erkennt der Server, ob es sich um unerwünschte Werbung, also KommentarSpam, oder um einen richtigen Kommentar handelt, und gibt anschließend eine
Empfehlung für die Veröffentlichung ab.
Download: Akismet wird mit WordPress automatisch installiert.
Backup
Das nächste Pflicht-Plugin heißt Backup
und verrät damit auch schon seinen Einsatzzweck: Sie starten mit ihm eine Datensicherung Ihrer WordPress-Installation.
Die Kopien landen wahlweise in einem
Backup-Verzeichnis auf dem Server, per
Download auf Ihrem Computer oder per
E-Mail in Ihrem Postfach. Die letztgenannte Option ist natürlich nur dann
AKISMET
VERWALTUNG
THEMEBROWSER
Gefangen: Das WordPress-Plugin Akismet
fängt Blog-Spam zuverlässig ab. Sie
müssen das Tool allerdings erst aktivieren.
Angeknipst: Per Mausklick schalten Sie
die Zusatzfunktionen von WordPress ganz
nach Belieben an oder aus.
Überblick: Im Themebrowser sehen Sie,
welche WordPress-Vorlagen momentan auf
Ihrem Server gespeichert sind.
empfehlenswert, wenn die Datenmenge
ein gewisses Maß nicht überschreitet –
sonst ist Ihr E-Mail-Empfang zu lang blockiert. Im deutschsprachigen WordPress
finden Sie nach dem Aktivieren des Plugin
im Menü „Verwalten“ den Eintrag „Datensicherung“. Falls auf Ihrem Server neben
den Tabellen aus WordPress noch weitere
installiert sind, etwa für ein Forum, bietet
das Plugin an, auch diese mitzusichern. In
den Einstellungen wählen Sie die Art der
Sicherung und legen anschließend mit
einem Klick auf „Datensicherung!“ los.
Download: Backup wird automatisch
mit WordPress installiert.
Podster
Fuzzy Recent Posts
Viele Leser Ihres Blogs werden über Suchmaschinen auf Ihre Seiten kommen, von
der Startseite mit den neuesten Beiträgen
bekommen sie nichts mit. Damit Ihren
Besuchern kein aktuelles Thema entgeht,
können Sie mit Fuzzy Recent Posts auf jeder Seite Ihres Blogs eine Liste der neuesten Beiträge einblenden.
In der Voreinstellung erscheint die Liste der zuletzt hinzugekommenen Posts
ganz unten in der Randleiste von WordPress. Wollen Sie sie an anderer Stelle positionieren, müssen Sie den PHP-Quelltext
Ihres Templates öffnen und darin die Zeile
<li><?php the_recent_posts();
?></li>
eintragen. Wie Sie anschließend den
Standort der Liste anpassen, lesen Sie in
dem Artikel ab s84.
Download: www.semiologic.com/res/
sem-recent-posts.zip
WordPress ist die ideale Plattform für das
Podcasting (mehr zu Podcasts lesen Sie ab
s88). Bereits ohne ein zusätzliches Plugin
können Sie für einen Podcast eine Audiodatei in einen Artikel einbinden und eine
Kategorie für den Podcast festlegen. Doch
mit Podster geht noch mehr. Mit ihm können Sie nämlich:
● ein eigenes, selbst gestaltetes Titelbild
für Ihren Podcast bereitstellen,
eine ausführliche Beschreibung des
Podcasts verfassen,
● den Podcast an den in iTunes eingebundenen Podcast-Katalog anbinden,
● neben Audio- auch Video-Podcasts auf
Ihrer Seite anbieten.
Zudem bringt Podster auch ein Abspielprogramm mit, sodass Ihre Hörer
den Podcast direkt auf Ihrer Webseite starten und anhören können.
Download: www.mightyseek.com/pod
Martin Goldmann
press
●
KNOW-HOW
Strukturen für den Webauftritt
Beim Thema Struktur scheiden sich die Geister. Einige Anwender ziehen es vor, eine Seite streng in Kategorien aufzuteilen, die anderen lieben das Tagging. Der Unterschied zwischen Tags und Kategorien: Tags sind Schlagwörter, die Sie selbst oder Ihre Leser zu bestimmten Beiträgen vergeben. Kategorien
hingegen sind Oberbegriffe, denen Sie die
Artikel zuordnen. Bildlich gesprochen: Tags
entsprechen kleinen Postit-Zetteln mit Begriffen, die Sie an die Artikel anheften. Kategorien hingegen ähneln eher Schubladen, in
denen Sie die Artikel sammeln.
Ein Beispiel: Ihr neuer Artikel über Tierfotografie passt in die Kategorie „Fotografieren
mit der Digitalkamera“. Aber das beschreibt
nur eingeschränkt, wovon der Text handelt.
Denn es geht gleichzeitig auch um die Themen „Tiere“, „Fuchs“, „Hase“, „Morgengrauen“ und „Teleobjektiv“.
Solche Begriffe eignen sich ideal als Tags.
Wenn Sie diese Schlagwörter für einen Artikel vergeben, kann sich der Leser allein
schon damit ein Bild vom Inhalt des Artikels
machen – bei Kategorien geht das nicht.
Viele bevorzugen deshalb Tagging gegenüber einem starren Gerüst.
Bekannte Beispiele für das Tagging finden
Sie auf Seiten wie Flickr.com oder del.icio.
us. Bei Flickr stellen Sie Fotos online und vergeben dafür Tags, bei del.icio.us funktioniert
das genauso, nur mit Bookmarks. Mithilfe
der Tags kann der Besucher dann beispielsweise verwandte Bilder – oder im Fall eines
Blogs – verwandte Beiträge ermitteln.
In WordPress haben Sie die Wahl: Entweder installieren Sie ein Tagging-Plugin, wie
Ultimate Tag Warrior (www.neato.co.nz/ulti
mate-tag-warrior). Dann dürfen Sie beides
nutzen: Kategorien, die Ihren Inhalt strukturieren einerseits, und Tags, die den Inhalt
beschreiben andererseits.
Oder Sie nutzen die WordPress-Kategorien
wie Tags. Wenn Sie einen neuen Artikel geschrieben haben, ordnen Sie ihm die passenden Kategorien zu. Dann haben Sie zwar
keine schöne Menüstruktur, ersparen sich
aber ein zusätzliches Plugin.
83
WORDPRESS PROGRAMMIEREN
Themes und Plugins
komplett im Griff
Mit ein wenig Erfahrung in PHP und CSS können Sie WordPress schnell erweitern und einen
individuellen Webauftritt gestalten. Dieser Beitrag zeigt Ihnen, wie Sie am besten vorgehen.
AUF EINEN
AUF
EINENBLICK
BLICK
, WordPress programmieren
Wie Sie Plugins bearbeiten und eigene
Programme schreiben
s86
Tipps zu WordPress
s87
Alle Tools auf CD
WEBSERVER: XAMPP zum lokalen
Einrichten eines Webservers hPHP
TUNING: Eine Video-Anleitung zum
Tunen von WordPress hCMS
anderen Themes verwenden. Es kann jedoch passieren, dass Sie dort andere Dateien öffnen und die Befehle an anderer
Stelle platzieren müssen, um die Plugins
richtig einzubinden.
Titelbild modifizieren
Wenn Sie wie Tausende anderer WordPress-Anwender das Standard-Theme
„Kubrick“ verwenden, sollten Sie zumindest das langweilige blaue Titelbild des
Theme durch ein eigenes Motiv ersetzen.
Das Bild für den Titel muss 760 x 200
Bildpunkte groß sein.
Legen Sie zunächst eine Sicherungskopie des Ordners /themes/default_de an,
um notfalls das Original-Theme schnell
wiederherstellen zu können. In unserem
Beispiel haben wir die Kopie go_default_
de genannt. Danach übertragen Sie Ihr
neues Titelbild in den Ordner /themes/
go_default_de/images. Öffnen Sie nun
die Datei style.css in einem Editor. Sie
enthält alle Informationen zu den Formatierungen Ihres WordPress-Themes. Suchen Sie in diesem File nach den Zeilen
#header {
background: #73a0c5
url(Ãimages/kubrickheader.jpgµ)
no-repeat bottom center;
}
und tragen Sie anstelle von „images/kubrickheader.jpg“ den Pfad zu Ihrem neuen
Titelbild ein, etwa „images/meintitelbild.
jpg“. Danach speichern Sie die style.css,
schalten auf das zuvor kopierte Theme
um und laden die Seite in Ihrem Blog neu.
Schon ist Ihr neues Titelbild da.
A
lle folgenden Beispiele beziehen
sich auf das Standard-Theme von
WordPress, „Kubrick“, in der deutschen Version, das Sie auch auf der HeftCD finden. Die Programmierbeispiele
und Plugins lassen sich allerdings auch in
Theme-Informationen ändern
Damit Sie bei der Auswahl im ThemeBrowser nicht durcheinanderkommen,
sollten Sie die Theme-Informationen anpassen, sobald Sie ein Theme kopiert und
geändert haben. Das erledigen Sie ebenfalls über die Datei style.css. Die Informationen stehen dort in den obersten Zeilen
und sehen zum Beispiel so aus:
/*
Theme Name: WordPress Classic
Theme URI: http://wordpress.org/
Description: The original WordPress theme that graced versions
1.2.x and prior.
chern der Datei und dem Aktualisieren
der Seite erscheint der Rand auf der linken
Seite des Browserfensters.
Seitenleiste anzeigen
Jetzt haben Sie schon ein deutlich individuelleres „Kubrick“-Theme. Als Nächstes
rücken Sie nun einem weiteren Merkmal
dieses Theme zu Leibe: Es zeigt bei den
einzelnen Beiträgen rechts keine Seitenleiste an. Kommt ein Leser über eine Suchmaschine zu einem Blogbeitrag, hat er
keinen Zugriff auf die Kategorien, auf Ihre
Linkliste und die Suchfunktion. Um das
zu ändern, öffnen Sie die Datei single.php.
In der zweiten Programmzeile sehen Sie
Version: 1.5
<div id=³content³
Author: Dave Shea
class=³widecolumn³>
Default WordPress by Dave Shea
Ändern Sie den Eintrag wie folgt:
|| http://mezzoblue.com
<div id=³content³
[...]
class=³narrowcolumn³>
*/
Die ersten Zeilen bis zur Leerzeile sind
Pflicht. Tragen Sie hinter „Theme Name:“
und „Theme URI:“ den Namen des
Theme und seine Ursprungsadresse ein.
Bei „Description:“ geben Sie eine ausführliche Beschreibung ein. Hier sind übrigens auch HTML-Befehle erlaubt, etwa
um eine URL hinzuzufügen. Nach der
Leerzeile können Sie noch eine zusätzliche Beschreibung hinzufügen, die im
Theme-Browser nicht angezeigt wird.
Stilvorlagen ändern
Wenn Sie die Datei style.css schon einmal
geöffnet haben, sollten Sie gleich auch
noch neue Farben und Maße für Ihr
WordPress-Theme einstellen. Wie wäre es
beispielsweise, wenn Sie das Theme probeweise einmal nicht mittig anordnen würden, sondern linksbündig?
Suchen Sie dazu den Eintrag „#page“
unterhalb von „/* Begin Structure */“.
Ändern Sie in „#page“ die Zeile
Damit schalten Sie das Template so um,
dass der Text im Beitrag linksbündig angeordnet wird und rechts Platz für die
Seitenleiste bleibt. Anschließend setzen
Sie den Cursor am unteren Ende der Datei in die Zeile
<?php get_footer(); ?>
Dort tragen Sie ein:
<?php get_sidebar();?>
Die letzten vier Zeilen in single.php müssen also so aussehen:
<?php endif; ?>
</div>
<?php get_sidebar();?>
<?php get_footer(); ?>
Mit „get_sidebar()“ schalten Sie die Seitenleiste zu – mehr brauchen Sie nicht zu
ändern. Die Leiste wird in der Folge auto-
GLOSSAR
IDE: Die Abkürzung IDE steht für „Integrated Development Environment“, auf
Deutsch: „Integrierte Entwicklungs-Umgebung“. Eine IDE stellt Werkzeuge zum bequemeren Programmieren zur Verfügung.
Dazu zählt zum Beispiel eine automatische
Syntaxkontrolle, die prüft, ob alle Programmbefehle richtig geschrieben sind.
Wichtig ist auch die Fähigkeit, mehrere
Programmdateien in einem Projekt gemeinsam zu verwalten oder Übersichten
über Klassen und Funktionen zu liefern.
PHP: Das Kürzel steht für „PHP: Hypertext
Preprocessor“ und bezeichnet eine Programmiersprache, die sich besonders gut
für den Aufbau von Webauftritten eignet.
Mehr zu PHP gibt es unter www.php.net.
SQL: Die „Structured Query Language“ ist
eine Sprache zum Schreiben von Datenbankabfragen. SQL wird von den meisten
Datenbanksystemen unterstützt, die Grundkommandos sind weitgehend gleich. Allerdings hat jede Datenbank ihren eigenen
SQL-Dialekt für speziellere Aufgaben.
matisch aufgebaut und enthält dann genau die Elemente, die in der Datei sidebar.
php festgelegt sind.
Seitenleiste modifizieren
Auf s83 im vorangegangenen Artikel haben Sie bereits das Plugin Fuzzy Recent
Posts kennengelernt. Es versieht die Seitenleiste Ihres Blogs mit Links zu den jeweils neuesten Artikeln. Normalerweise
stehen diese am unteren Ende der Leiste.
Das ist allerdings kein Muss, Sie können
die Links in der Leiste auch ganz oben anordnen.
k
Angepasst: Mit wenigen
Handgriffen passen
Sie das Standard-Theme
„Kubrick“ so an, dass
eine individuelle Website entsteht.
margin: 20px auto
so, dass das Ergebnis wie folgt aussieht:
margin: 20px 0 0 20px;
Das „auto“ im Original sorgt dafür, dass
der Seiteninhalt mittig ausgerichtet wird.
Der Wert „20px“ erzeugt einen 20 Bildpunkte großen Abstand zum oberen Rand
des Browserfensters.
Mit der bearbeiteten Version der Zeile,
wie wir sie in unserem Beispiel verwenden, wird oben und links je ein 20 Pixel
breiter Rand eingesetzt. Nach dem Spei-
85
Zu diesem Zweck öffnen Sie – zum
Beispiel im Theme „Kubrick“ – die Datei
sidebar.php. Ganz oben sehen Sie:
<div id=³sidebar³>
<ul>
Schreiben Sie direkt darunter die Zeile:
<li><?php if (function_
exists(Ãthe_recent_postsµ))
the_recent_posts(); ?></
li>
Die „if“-Abfrage verhindert eine Fehlermeldung, falls das Plugin nicht aktiviert
ist. Die Funktion „the_recent_posts()“
wird also nur dann aufgerufen, wenn sie
auch vorhanden ist.
Speichern Sie die Datei, und laden Sie
die Seite neu. Ganz oben in der rechten
Randleiste erscheinen nun die Links zu
den neuesten Beiträgen, allerdings unter
einer englischen Überschrift. Die können
Sie jedoch ändern, indem Sie den Funktionsaufruf neu schreiben:
the_recent_posts(array(Ãtitleµ
=> ÃDie neuesten Nachrichtenµ));
Damit erzeugen Sie einen deutschsprachigen Titel. Die Parameter-Übergabe als
Array ist zwar ein wenig unübersichtlich,
aber sehr effektiv, da sich auf diesem Weg
beliebig viele Parameter einstellen lassen.
Ein weiteres Beispiel:
the_recent_posts(array(Ãtitleµ
=> ÃNeu im Blog:µ, Ãmax_numµ =>
10));
Mit diesem Eintrag stellen Sie ein, auf wie
viele neue Beiträge maximal verwiesen
werden soll. Analog dazu bestimmen Sie
Eingehängt: In der Plugin-Übersicht von WordPress erscheinen nach der Installation die
Informationen aus dem Header Ihres Plugin.
mit dem Parameter „min_num“, wie viele
neu hinzugekommenen Artikel die Leiste
mindestens anzeigen soll.
Welche Argumente der Funktionsaufruf
noch annimmt, können Sie im Web unter
www.semiologic.com/software/recentposts nachschlagen.
Eigenes Plugin schreiben
Als Nächstes zeigen wir Ihnen, wie Sie ein
erstes Plugin schreiben. Es soll einfach nur
die Anzahl der insgesamt vorhandenen
Artikel in Ihrem Blog angeben. Die Anzeige können Sie dann beispielsweise in
der Sidebar positionieren.
Bevor es losgeht, noch ein paar Worte
zum Konzept hinter den Plugins. Es handelt sich dabei um kleine PHP-Programme, die über einen speziellen Mechanismus in WordPress eingebunden
werden. Das Programm enthält dafür
festgelegte Punkte, die „Actions“ und „Filter“. „Actions“ bezeichnen Stellen, an denen WordPress eine Funktion ausführt,
etwa beim Speichern eines Beitrags. „Fil-
KNOW-HOW
Der Plugin-Header
Plugins bestehen aus einer einzelnen
Datei oder aus einem Verzeichnis mit
Dateien. Beide werden im Ordner /wpcontent/plugins gespeichert. Im Normalfall kommt ein Plugin mit einer einzigen
Datei aus.
Damit WordPress mit dem Plugin etwas anfangen kann und in der Übersicht
die richtigen Informationen dazu darstellt, muss ein spezieller Header vorhanden sein. Der sieht zum Beispiel so aus:
<?php
Das brauchen Sie zum Programmieren
PHP & CSS: Voraussetzung für die Arbeit
mit WordPress-Plugins und -Themes sind
Kenntnisse in PHP und CSS. Für einfache
Änderungen genügt ein grundlegendes Verständnis von PHP. Wenn Sie allerdings ein
Plugin programmieren wollen, sollten Sie
schon ein wenig Erfahrung haben. Je nach
Plugin sollten Sie sich auch mit der Datenbank-Abfragesprache SQL auskennen. Denn
WordPress arbeitet mit MySQL zusammen.
Editor: Zum Ändern und Testen von Plugins
benötigen Sie einen Editor – zur Not können
Sie zum Editor von Windows greifen. Besser
ist ein Programm mit Syntaxhervorhebung
wie etwa Ultraedit (www.ultraedit.com). Es
hebt PHP-Befehle und HTML farblich voneinander ab, das erleichtert den Überblick.
ter“ stehen für Einhängepunkte zum Verarbeiten von Daten. An diesen Einhängepunkten befinden sich im WordPressCode spezielle Funktionsaufrufe. Sie prüfen, ob für den Punkt ein Plugin vorhanden ist. Falls ja, übergibt die Software –
falls vorhanden – Daten an das Plugin
und ruft es auf.
Eine dritte Spielart von Plugins stellt
einfach nur Funktionen zur Verfügung,
die Sie dann per Hand in ein Theme einbinden können. Das oben vorgestellte
Fuzzy Recent Posts gehört zum Beispiel in
diese Kategorie.
Entwicklungsumgebungen: Profis bearbeiten WordPress-Plugins mit Entwicklungsumgebungen wie beispielsweise Zend Studio (www.zend.de) oder dem kostenlosen
PHP Eclipse (www.phpeclipse.de). Der Vorteil: Wenn Sie WordPress in ein Verzeichnis
installieren und als Projekt in die Entwicklungsumgebung einbinden, haben Sie alle
Funktionen des Programms im Überblick.
XAMPP: Außerdem lohnt es sich, WordPress auch auf dem lokalen Computer zu
installieren und zusätzlich XAMPP (www.
apachefriends.org) einzurichten. XAMPP
stellt einen Apache-Webserver mit PHP und
MySQL zur Verfügung. Damit können Sie Ihre
Programme testen, ohne die laufende Installation auf Ihrem Server zu beschädigen.
/*
Plugin Name: Tolles Plugin
Plugin URI: http://www.abc.xy/
info.html
Description: Zeigt, wie ein
Plugin funktioniert
Author: Martin Goldmann
Version: 1.0
Author URI: http://www.abc.xy/
*/
Neben „Plugin Name“ steht die Bezeichnung des Programms, darunter eine Webadresse, unter der es mehr Informationen
dazu gibt. Bei „Description“ geben Sie
eine Beschreibung des Plugin ein. Hier
passt auch ein etwas längerer Text hinein,
etwa eine kurze Bedienungsanleitung.
Zum Schluss folgen der Name des Autors,
die Versionsnummer des Plugin und die
Adresse der Homepage des Programmierers – übrigens eine prima Eigenwerbung.
Das Plugin
Das folgende Plugin erkennt spezielle
Tags in einem Artikel und verarbeitet sie.
Als Beispiel verwenden wir „<wiki>…</
wiki>“. Sobald das Plugin auf dieses Tag
stößt, erzeugt es aus dem Text dazwischen
einen Link zum entsprechenden Artikel
in Wikipedia. Sie können also Querverweise auf das Lexikon erzeugen, indem Sie
„<wiki>Fachbegriff</wiki>“ eingeben:
<?php
weiter mit der Funktion. Im Parameter
„$strContent“ ist der Text des Beitrags gespeichert, der gerade in WordPress angezeigt werden soll.
Der „return“-Befehl gibt das Ergebnis
der darauf folgenden PHP-Funktion zurück. Die heißt „preg_replace“ und dient
zum Suchen und Ersetzen von beliebigen
Zeichen durch reguläre Ausdrücke. Diese
Ausdrücke sind notwendig, da die Suche
herausfinden soll, was zwischen „<wiki>“
und „</wiki>“ steht – mit einem normalen Suchen und Ersetzen geht das nicht.
Der reguläre Ausdruck sieht so aus:
/<wiki>\s*([^<]*?)\s*<\/wiki>/
/*
Plugin Name: Wikilinker
Plugin URI: http://www.goldmann.
de/blog/wikilinker/
Description: Erzeugt aus
<wiki>Begriff</wiki>
einen Suchlink zu Wikipedia.de
Author: Martin Goldmann
Version: 1.0
Author URI: http://www.goldmann.
de/
*/
function go_
wikilinker($strContent)
{
return preg_replace(Ä/
<wiki>\s*([^<]*?)\s*<\/wiki>/³,
Ä<a href=\³http://de.wikipedia.
org/wiki/\\1\³>\\1</a>³,
$strContent);
}
add_filter(Ãthe_contentµ, Ãgo_
und liest sich von links nach rechts etwa
so: Suche alles, was mit „<wiki>“ anfängt
und direkt dahinter entweder kein oder
beliebig viele Leerzeichen hat. Suche hinter den Leerzeichen so lange weiter, bis du
eine spitze Klammer „<“ findest. Alles,
was du findest, landet in einem Zwischenspeicher. Danach dürfen wieder beliebig
viele Leerzeichen stehen – oder auch gar
keins, bevor dann </wiki> folgt.
Wenn Sie mehr über reguläre Ausdrücke wissen wollen, informieren Sie sich
unter www.regenechsen.de/regex_de.
Die Suche nach den Leerzeichen vor
und hinter dem eigentlichen Text soll
Fehler verhindern. Denn falls jemand einen Fachbegriff beispielsweise auf diese
Weise eingibt
<wiki>
Begriff
</wiki>
werden die enthaltenen Leerzeichen ganz
einfach ignoriert.
Nach dem regulären Ausdruck folgt als
zweiter Parameter für „preg_replace“
wikilinkerµ);
Ä<a href=\³http://de.wikipedia.
?>
org/wiki/\\1\³>\\1</a>³
An erster Stelle stehen im Header Informationen, die für das Einbinden des Plugin erforderlich sind. Danach geht es gleich
Er erzeugt einen Hyperlink und fügt an
der Stelle von „\\1“ die gefundene Zeichenkette, also den Suchbegriff, ein. An
dritter Stelle muss die PHP-Funktion
noch die Zeichenkette erfahren, aus der
sie die Daten holen soll, in diesem Fall also „$strContent“. Damit ist das Plugin
praktisch schon fertig. Nun muss es nur
noch wissen, wo es sich einhängen soll.
Das definieren Sie über:
add_filter(Ãthe_contentµ, Ãgo_
wikilinkerµ);
Integriert: Ideal zum Programmieren von
Plugins ist eine IDE wie Eclipse oder das hier
gezeigte Zend Studio.
Mit dieser Zeile ordnen Sie die eben geschriebene Funktion dem Einhängepunkt
„the_content“ zu. Er wird auf den Inhalt
eines Blogbeitrags angewendet, ehe WordPress ihn weiterverarbeitet und anzeigt.
TIPPS
WordPress ausreizen
Nur mit Kopien arbeiten: Falls Sie ein
vorhandenes Plugin oder Theme ändern
möchten, sollten Sie vorher unbedingt eine
Sicherheitskopie anlegen. Denn falls beim
Ändern etwas schiefgehen sollte, können
Sie das Original schnell mit einem Handgriff wiederherstellen.
Nicht am lebenden Objekt arbeiten: So
verlockend es auch ist: Arbeiten Sie nicht
direkt an der laufenden WordPress-Installation. Schon kleine Modifikationen können verheerende Folgen haben und Ihre
Seite aus dem Netz verschwinden lassen.
Wenn Sie Änderungen unbedingt online
vornehmen wollen, kontrollieren Sie sie
sofort nach. Stellen Sie niemals Code online, den Sie vorher nicht ausprobiert haben – selbst wenn Sie nur eine minimale
Veränderung vorgenommen haben.
Fleißig abgucken: WordPress ist Open
Source, die meisten Themes und Plugins
auch. Also dürfen Sie den Code ganz nach
Belieben verwenden und erweitern. Natürlich dürfen Sie aus vorhandenem Code
auch etwas lernen. Sehen Sie sich daher
die Plugins und Themes anderer Programmierer gut an, damit bekommen Sie viele
Anregungen für eigene Arbeiten.
Sauber programmieren: Wenn Sie ein
gutes Plugin haben, stellen Sie es doch online, damit es auch andere WordPress-Nutzer verwenden können. Allerdings sollte es
dann einige Kriterien erfüllen:
● Das php-Anfangstag sollte immer „<?php“
sein und nicht „<?“. Grund: Auf manchen
Servern wird „<?“ nicht erkannt, „<?php“ ist
dagegen immer kompatibel.
● Wenn ein Plugin Daten verarbeitet, sollte es die auch immer zurückgeben. Denn
möglicherweise wollen noch weitere Plugins diese Daten benutzen.
● Vom Benutzer gespeicherte Daten müssen immer in /wp-content landen. Alle anderen Verzeichnisse werden bei einem Update von WordPress in der Regel gelöscht.
Mehr Regeln: http://codex.wordpress.
org/ WordPress_Coding_Standards
Mehr Informationen zu den Filtern finden Sie im Internet auf der englischsprachigen Seite http://codex.wordpress.org/
Plugin_API.
Speichern Sie das Programm im Plugin-Ordner von WordPress und binden Sie
es in die Blogsoftware ein. Anschließend
können Sie es gleich in einem Beitrag Ihres Blogs ausprobieren. Viel Spaß!
Martin Goldmann
87
BLOGGEN MIT SOUND
Vom Blog zum Podcast
Podcasting – schon das Wort klingt kompliziert. Dabei ist ein Podcast letztlich nur ein Blog mit
Sound statt mit Text. Was Sie zum Thema Podcast wissen müssen, erfahren Sie in diesem Beitrag.
AUF EINEN
AUF
EINENBLICK
BLICK
, Alles über Podcasting
Podcasts finden und anhören
s88
So produzieren Sie Ihren eigenen
Podcast
s89
nannten Feeds, die für die Verbreitung der
Podcasts wichtig sind. Ein Feed ist eine
strukturierte Textdatei, die von einem Programm automatisch ausgewertet werden
kann. Darin stehen etwa Informationen
über Titel, Beschreibung, Mediendatei,
Dauer, Dateigröße und das Datum der
Veröffentlichung des Podcasts. Gebräuchliche Feed-Formate sind RSS oder Atom.
Als erster Podcaster gilt Adam Curry.
Nachdem er die Idee hatte, Mediendateien und Feeds zu kombinieren, stellte
der ehemalige MTV-Moderator im August 2004 den ersten Podcast online. Die
Zuhörer konnten den Podcast in einer
Software namens iPodder abonnieren;
sobald eine neue Folge vorlag, wurde sie
automatisch heruntergeladen. Adam
Curry podcastet übrigens immer noch
(http://dailysourcecode.com/).
Der Podcast-Boom setzte jedoch erst
knapp ein Jahr später ein, als Apple Mitte
2005 sein Programm iTunes erstmals mit
einem Verzeichnis verfügbarer Podcasts
ausstattete. iTunes ist ein Musikverwaltungs- und -abspielprogramm, das perfekt auf den iPod abgestimmt ist. So
konnte plötzlich jeder iPod-Besitzer ganz
bequem Podcasts abonnieren und downloaden.
Podcasts anhören
Inzwischen gibt es deutlich mehr Möglichkeiten, um an Podcasts zu kommen.
Zum Schnuppern ist es am einfachsten,
ein webbasiertes Podcast-Verzeichnis wie
podcast.de oder dopcast.de (kein Tippfehler!) aufzurufen.
Dort können Sie in aller Ruhe nach
interessanten Sendungen stöbern und
sich den gewünschten Podcast direkt im
Browser anhören. Wenn Sie gerade nicht
so viel Zeit haben, laden Sie den Podcast
herunter und spielen ihn später mit
P
odcast setzt sich aus den Begriffen
„iPod“ und „Broadcast“ (engl.
„Rundfunk“) zusammen. Während traditionelle Rundfunksendungen
zu einem bestimmten Zeitpunkt gesendet werden und danach im Äther verschwunden sind, werden Podcasts gespeichert und erst abgespielt, wenn der
Hörer es wünscht. Es handelt sich also
um Radiosendungen zum Downloaden,
die sich auf einem Computer oder einem
MP3-Player abspielen lassen.
Das Geheimnis der Podcasts liegt in der
Kombination der Mediendatei mit soge-
einem Programm wie Winamp oder dem
Windows Media Player ab.
Wer einmal auf den Geschmack gekommen ist und regelmäßig Podcasts
konsumiert, nutzt dazu spezielle Software, die sogenannten Podcatcher. Sie
bieten ein Verzeichnis von oft Tausenden,
in verschiedene Themenrubriken unterteilten Podcasts und erleichtern das Abonnieren und Kopieren auf den MP3-Player.
Die bekanntesten Podcatcher sind iTunes
von Apple (www.apple.com/de/itunes/)
und Juice, der auch andere MP3-Player
als den iPod versorgt (http://juicereceiver.
sourceforge.net/).
Dank der abonnierten RSS-Feeds muss
der Hörer nicht mehr regelmäßig auf einer
bestimmten Webseite nachsehen, ob es etwas Neues gibt. Der Podcatcher lädt automatisch alle aktuellen Folgen herunter –
zum Anhören auf dem PC zu Hause oder
per MP3-Player unterwegs.
Noch recht ungewöhnlich, aber nicht
uninteressant ist das Anhören von Podcasts per Telefon. Der Dienst Phonecaster
liest RSS-Feeds verschiedener Podcasts
ein und stellt die Folgen telefonisch zur
Verfügung. Der im Kasten rechts erwähnte
Geschichts-Podcast lässt sich etwa über
die Telefonnummer 0931/663 99 18 43
anhören. Weitere Informationen gibt es
auf http://phonecaster.de.
Podcasts produzieren
Podcasting ist keine Hexerei – und der
Weg zum eigenen Podcast oft kürzer, als
viele denken. In der Regel müssen Sie sich
zunächst über die folgenden drei Dinge
Gedanken machen: den Inhalt (Was will
ich erzählen?), die Aufnahme (MP3-Datei
produzieren) und die Veröffentlichung
(Bereitstellung im Web).
● Inhalt: Beim Stöbern in einem PodcastVerzeichnis wird Ihnen auffallen, dass es
Podcasts zu allen möglichen und unmöglichen Themen gibt. Sie sind so unterschiedlich wie ihre Macher, und das Spektrum reicht von „Absolut professionell“
bis zu „Spontan ins Mikrofon gesprochen“. Genau 400 Folgen hat etwa Larissa
Vassilian – besser bekannt unter ihrem
Pseudonym Annik Rubens – produziert
und via RSS-Feed bereitgestellt. Die täglichen Download-Zahlen von „Schlaflos
in München“ sollen in die Tausende gegangen sein. Heute bestreitet Larissa Vassilian ihren Lebensunterhalt zum Teil mit
Podcasts.
Viele Podcaster reden zum Beispiel
einfach über nahe liegende Themen wie
ihre Arbeit und die Erfahrungen, die sie
dabei gesammelt haben. Weitere häufige
Themen sind Hobbys, neue Kinofilme,
kulturelle Veranstaltungen, Fußball oder
Vereinsleben. Selbst Universitäten nutzen
Podcasts inzwischen als Lehrmaterial,
und an einer amerikanischen Universität
gehören iPod und Podcasts inzwischen
zum Alltag.
Bevor Sie einen Podcast produzieren,
sollten Sie zwei Grundregeln beachten:
Ein Podcast ist keine einmalige Sache.
Er besteht aus regelmäßig erscheinenden
Folgen. Wählen Sie deshalb von Anfang
an einen Veröffentlichungszyklus, den Sie
auch wirklich einhalten können.
Und auch für Podcasts gilt der Grundsatz: „Sie können über alles reden, nur
nicht über 20 Minuten“. In den meisten
Fällen liegt die Würze in der Kürze – und
dopcast.de In diesem webbasierten Podcast-Verzeichnis können Sie in aller Ruhe nach
interessanten Sendungen suchen, sie anhören und bei Gefallen herunterladen.
TIPPS
Gelungene Podcasts
Filme und so (www.filmeundso.de) stellt
jede Woche neue Kino- und DVD-Filme
vor. Die neuesten Blockbuster werden an
dieser Stelle ausführlich besprochen und
bewertet. Auch Bücher und nützliche Dinge
wie iPods und
Staubsauger finden in diesem
Podcast ihr Forum. Von „Filme
und so“ gibt es
auch einen Videocast mit aktuellen Trailern.
Der Geschichts-Podcast (www.chronico.
de/hoeren/) richtet sich an Menschen,
die Geschichte mit allen Sinnen erleben
wollen. Der Podcast schlägt Brücken zu
Antike, Mittelalter und Renaissance. Jedes Jahr gibt es Tausende Events rund um
diese Epochen.
Der GeschichtsPodcast ist als
Teil des Magazins chronico.
de ein unabhängiger und
kritischer Reiseführer.
auch ein Drei-Minuten-Podcast kann
durchaus ein Hit werden.
Gute Inhalte sprechen sich gewöhnlich
schnell herum, und der eine oder andere
Versprecher macht einen privaten Podcast erst so richtig authentisch und ehrlich. Greifen Sie also zum Mikrofon, und
legen Sie los.
Wenn Sie Ihren Podcast musikalisch
auflockern wollen, greifen Sie am besten
auf Musikstücke zurück, die Podcaster
kostenlos und in voller Länge spielen dürfen. „Podsafe“ nennt man solche Songs,
die kostenlos in den eigenen Podcasts
abgespielt werden dürfen und bei denen
man keine rechtlichen Konsequenzen
zu befürchten hat. Wahre Fundgruben
für Podsafes sind beispielsweise Podsafe
Audio (http://podsafeaudio.com) oder
Podsafe Music Network (http://music.
podshow.com/).
Beim Podsafe Music Network etwa
können Sie in aller Ruhe im Musikverzeichnis nach geeigneten Songs für Ihren
Podcast stöbern. Nachdem Sie einen pas- k
89
WEB-TIPPS
Die besten Links
CHIP hat für Sie die wichtigsten Links zum
Thema Podcast zusammengestellt:
Wikipedia zum Podcasting
http://de.wikipedia.org/wiki/Podcasting
Deutschsprachiges Podcast-Portal
http://podcast.de/
Deutscher Podcast-Verband
http://podcastverband.de/
Adam Curry’s Podcast
http://dailysourcecode.com/
Webbasierte Podcast-Verzeichnisse
http://podcast.de/ und
http://dopcast.de/
Podcatcher iTunes von Apple
(nur für den iPod)
www.apple.com/de/itunes/
Podcatcher Juice
(auch für andere MP3-Player)
http://juicereceiver.sourceforge.net/
Podcast per Telefon
http://phonecaster.de/
Podsafe (Musik für den Podcast)
http://podsafeaudio.com und
http://music.podshow.com/
Hosting-Dienst für Podcasts
http://podhost.de/
Werbung für Podcasts
http://audioads.de/
senden Song gefunden haben, können
Sie ihn als registrierter Podcaster sogar
zu einer „Playlist“ hinzufügen, von dort
als MP3-Datei herunterladen und in den
eigenen Podcast einbinden.
Wer auf der Suche nach Jingles ist,
kann Teile der Podsafe-Musik verwenden,
sollte bei der Band aber noch einmal um
Erlaubnis bitten.
● Aufnahme: Bei der eigentlichen Produktion des Podcasts haben es die AppleMacintosh-Besitzer am einfachsten. Denn
in den neuen Mac-Computern ist neben
einem Mikrofon und dem Programm
GarageBand, mit dem man Podcasts aufnehmen und schneiden kann, auch gleich
eine Videokamera eingebaut. Zusammen
mit GarageBand werden auch Hunderte
von Jingles mitgeliefert, die man später
nach Belieben in seinen Podcast einbinden kann.
Aber auch als PC-Besitzer müssen Sie
in Sachen Podcast nicht in die Röhre
schauen: Ein günstiges Headset oder Mikrofon und die kostenlose Software Audacity (mehr zu Audacity lesen Sie ab s92)
ermöglichen auch Ihnen einen einfachen
Einstieg ins Podcasting.
Sobald Sie das Mikrofon an Ihren
Computer angeschlossen und die Podcast-Software eingerichtet haben, kann es
auch schon losgehen. GarageBand oder
Audacity nehmen die Signale aus dem
Mikrofon auf und speichern sie. Ein Klick
auf „Aufnahme“ – und schon können Sie
ins Mikrofon sprechen oder Ihre Gitarre
klingen lassen. Versprecher und Spielfehler können Sie hinterher bequem herausschneiden. Nachdem die Aufnahme abgeschlossen ist, müssen Sie sie nur noch als
MP3-Datei speichern.
Spannend sind beispielsweise Interviews mit Freunden, Bekannten oder Fachleuten, die man zu bestimmten Themen
befragt. Für die Aufnahme eignen sich
MiniDisc-Recorder oder digitale Diktiergeräte, die es in bestechender Aufnahmequalität und mit USB-Schnittstelle zum
iTunes: Der bekannteste Podcaster listet Tausende Podcasts und ermöglicht das Abonnieren
und Kopieren der Mediendateien auf den iPod. Das Programm läuft auch unter Windows.
direkten Anschluss an den Computer in
vielen Fachmärkten schon für weniger als
100 Euro gibt. Die von diesen Geräten
produzierten Sounddateien können Sie
problemlos mit der Importfunktion Ihrer
Aufnahmesoftware in Ihren Podcast einbinden.
Wie das alles in der Praxis funktioniert,
erfahren Sie im Artikel „Aufnehmen mit
Audacity“ ab s92.
● Veröffentlichung: Nach der Aufnahme
Ihres Podcasts haben Sie mehrere Möglichkeiten, Ihre Produktion im Internet
zu veröffentlichen.
So können Sie etwa Loudblog nutzen,
ein speziell für Podcaster geschriebenes
Blogging-System. Mehr dazu erfahren Sie
auf der Website http://loudblog.de oder
im Artikel ab s94.
Eine weitere Möglichkeit ist PodPress,
ein WordPress-Plugin, das einen WordPress-Blog um Funktionen zum AudioBlogging erweitert. Weitere Informationen zu PodPress finden Sie auf der Webseite www.mightyseek.com/podpress/
oder im Artikel ab s96.
Wenn Sie sich nicht um die Technik
kümmern möchten, sollten Sie einen
Hosting-Dienst wie podhost.de nutzen.
Sie laden einfach Ihre Podcastdatei hoch,
und ein automatisches System legt eine
Webseite sowie den benötigten Feed an.
Oftmals gibt es zum Testen der HostingDienste kostenlose „Startersets“.
Nach der Veröffentlichung Ihres Podcasts müssen Sie nur noch dafür sorgen,
dass die Webgemeinde auch von seiner
Existenz erfährt. Dazu melden Sie ihn mit
der Adresse Ihres Feeds bei Podcast-Verzeichnissen wie etwa iTunes kostenlos an.
Falls Sie den Podcast auf Ihrem eigenen Webspace veröffentlichen möchten,
muss er PHP und MySQL unterstützen.
Denken Sie daran, dass Multimedia-Daten viel Speicherplatz beanspruchen. Eine
Minute Podcast-Geplauder im MP3-Format belegt etwa 1 MByte Speicherplatz.
Besondere Aufmerksamkeit sollten Podcaster auch dem Transfervolumen ihres
Webspace zuwenden.
Falls Ihr Podcast unvermutet zu einem
Hit avanciert, kann die Verbreitung via
RSS-Feed und automatisches Abonnement durch Podcatcher sehr schnell für
eine sprunghaft steigende Nachfrage sorgen, die unter Umständen das Freikontingent in Sachen Transfervolumen über-
steigt. Verfolgen Sie also die Resonanz auf
Ihren Podcast sowie die Auslastung Ihres
Freikontingents und informieren Sie sich
rechtzeitig, welche finanziellen Konsequenzen eine Überschreitung des Freikontingents für Sie haben könnte.
Geld verdienen via Podcast
Zum Abschluss noch ein Hinweis: Dass
Podcaster mit ihren Audioblogs viel Geld
verdienen, ist wohl eher die Ausnahme.
Aber eine populäre Sendung kann durchaus für einen kleinen Nebenverdienst
gut sein – und beispielsweise die Anschaffung eines Mischpults, eines guten
Mikrofons oder eines geeigneteren Webspace ermöglichen.
In Deutschland bietet Audioads.de
seit Kurzem einen Werbedienst für Podcaster an. Um ihn zu nutzen, laden Sie
Ihre Podcastdateien bei Audioads hoch.
Die Werbeagentur bestückt Ihren Podcast
Juice: Der Podcatcher Juice versorgt den iPod und andere MP3-Player mit Podcasts.
Die Abbildung zeigt die bereits abonnierten Podcasts.
daraufhin am Anfang und am Ende mit
einem Werbespot. Resultat ist eine neue
URL für Ihre Podcastdatei, die Sie im
RSS-Feed eintragen.
Am Ende eines Monats erhalten Sie
eine Werbekostenerstattung, deren Höhe
sich nach der Anzahl der Downloads aller
eingebundenen Folgen richtet. Die Anmeldung bei Audioads.de ist kostenlos,
und der Podcast wird vor der Freischaltung überprüft.
Wie Sie gesehen haben, ist Podcasting
technisch viel einfacher, als viele denken.
In den Workshops auf den folgenden Seiten zeigen wir Ihnen, wie Sie mit der zum
Podcasten benötigten Software – Audacity, Loudblog und PodPress – optimal
David Maciejewski, Peter Müller
umgehen.
KNOW-HOW
So funktionieren Podcasts
Die Infografik in der Abbildung unten (Quelle: Podcast.de) zeigt Ihnen – mit freundlicher
Genehmigung der Autoren Fabio Bacigalupo
und Matthias Ziehe –, wie Podcasting technisch funktioniert:
In sieben Schritten gelangt ein Podcast von
der Produzentin Alice zum Hörer Bob.
1. Podcasterin Alice erzeugt eine Audio- oder
Videodatei (Sendung, Episode, Podcast, Cast
oder Show) mithilfe eines Computers, einer
Soundkarte und eines Mikrofons oder eines
beliebigen anderen Aufnahmegeräts.
2. Diese Audiodatei wandelt Alice, wenn
nicht schon bei der Aufnahme geschehen, in
ein platzsparendes Format um (Audio: meist
MP3, Video: meist MPEG).
3. Die Internet-Adresse (URL) der MP3-Datei
vermerkt Alice im RSS-Feed ihres Blogs oder
ihrer Webseite.
4. Alice lädt die erzeugte Mediendatei auf
ihren Podspace im Internet hoch und veröffentlicht den neuen oder aktualisierten RSSFeed im Internet.
5. Podcast-Hörer Bob wird über ein Podcastverzeichnis wie Podcast.de auf den Podcast
von Alice aufmerksam.
6. MP3-Dateien kann sich Bob vorab über
die auf Podcast.de eingebauten Player anhö-
Internet
EINBINDEN
AUFNEHMEN
Alice
1
HERUNTERLADEN
ÜBERSPIELEN
7
3
6
KONVERTIEREN
2
ren. Mithilfe eines Podcasting-Clients – eines
sogenannten Podcatchers wie beispielsweise Juice – lädt Bob sich die Mediendatei von
Alice herunter.
7. Der Podcatcher sorgt nach dem Ende des
Downloads für eine automatische Übertragung des neuen Podcasts auf Bobs MP3Player. Jetzt kann sich Bob den Podcast von
Alice jederzeit und überall anhören.
Die Grafik und den Text, außerdem Links zu
weiteren Informationen finden Sie im Internet unter der folgenden Adresse: http://
podcast.de/ seite/podcasting-schritt-fuerschritt/erklaert/.
4
VERÖFFENTLICHEN
5
Bob
ANFRAGEN
91
PODCAST PRODUZIEREN
Aufnehmen mit Audacity
Die Produktion von Podcasts ist ziemlich simpel: Sie sprechen in ein Mikrofon, das an den PC
angeschlossen ist. Mit einem Soundbearbeitungs-Tool nehmen Sie den Text auf, schneiden ihn
und konvertieren die Aufnahme in eine MP3-Datei. So geht’s mit der Freeware Audacity.
A
udacity ist ein kostenloses, leicht
zu bedienendes Programm zum
Aufnehmen und Schneiden von
Sounddateien. Unter Podcastern ist das
Tool auch nicht zuletzt aufgrund des unschlagbaren Preis-/Leistungs-Verhältnisses die Nummer 1. In diesem Artikel erfahren Sie, wie Sie mit Audacity Ihre eigene Sendung produzieren.
1
Audacity installieren
Auf der Website http://audacity.de gibt es
mehrere Versionen von Audacity. In diesem Workshop arbeiteten wir mit Audacity 1.3.0b (beta). Diese Beta-Version läuft
sehr stabil. Außerdem benötigen Sie den
Lame MP3 Encoder 3.96.1, um AudacityDateien in das MP3-Format konvertieren
zu können. Beide Programme finden Sie
auf der Heft-CD.
Starten Sie die Installation von Audacity mit einem Doppelklick auf die Installationsdatei. Da Sie keinerlei Optionen
ändern müssen, ist die Installation schnell
abgeschlossen. Audacity startet danach
automatisch.
Bevor Sie sich dem Programm zuwenden, kopieren Sie zunächst die Datei „lame_enc.dll“ aus dem ZIP-Archiv des Lame MP3 Encoders in den Programmordner von Audacity. Sofern Sie den Pfad bei
der Installation nicht geändert haben, ist
das C:\Programme\Audacity 1.3 Beta.
AUF EINEN
AUF
EINENBLICK
BLICK
, Podcast produzieren
Eine Sendung richtig aufnehmen
s92
Missratene Passagen entfernen
s93
, Alle Tools auf CD
MP3-TOOLS: Der Audio-Editor Audacity
und das MP3-Tool Lame hWindows
3
Podcast aufnehmen: Ein Klick auf den roten Button oben startet die Aufnahme, das
Eingangssignal lässt sich per Maus regulieren. Achten Sie auch auf die Aussteuerung.
2
Audacity richtig konfigurieren
Audio- und Videodateien benötigen viel
Speicherplatz; die Dateigröße lässt sich
jedoch bis zu einem gewissen Grad durch
die Ton- beziehungsweise Bildqualität beeinflussen. Je besser die Qualität, desto
länger wird also der Download des Podcasts dauern. Sendungen mit reinen
Sprachbeiträgen haben andere Anforderungen als Podcasts mit viel Musik. Mit
den folgenden Grundeinstellungen liegen
Sie jedoch nie verkehrt.
Starten Sie Audacity und klicken Sie im
Menü „Bearbeiten“ auf den Befehl „Einstellungen“. Auf der Registerkarte „Audio
E/A“ ist für Wiedergabe und Aufnahme
der „Microsoft Soundmapper“ eingetragen. Darunter sehen Sie die DropdownListe „Kanäle“. Für einen gesprochenen
Podcast reicht die Einstellung „1 Mono“,
möchten Sie dagegen Musik einbinden
wählen Sie „2 Stereo“.
Auf der Registerkarte „Qualität“ tragen Sie die folgenden Werte ein:
● „Standard
Samplefrequenz“: 44.100 Hz
Sampleformat“: 16 Bit
● „Echtzeit Samplekonvertierung“: Fast
Sinc Interpolation
● „High Quality Samplekonverter“: High
Quality Sinc Interpolation
● „Echtzeit-Dithering“: Keine
● „High-Quality Dither“: Dreieck
Um den Podcast später als MP3-Datei
exportieren zu können, klicken Sie auf
der Registerkarte „Dateiformate“ ganz
unten im Bereich „MP3-Exporteinstellungen“ auf die Schaltfläche „Suche Bibliothek“. Wählen Sie die Datei „lame_enc.
dll“, die Sie während der Installation in
den Programmordner von Audacity kopiert haben, stellen Sie die „Bitrate“ auf
„64“ ein und bestätigen Sie mit „OK“.
● „Standard
3
Podcast aufnehmen
Audacity nimmt die Geräusche des Geräts
auf, das Sie in der Dropdown-Liste ausgewählt haben. Vorgegeben ist „Mikrofon“,
Alternativen sind etwa „Stereo-Mix“,
wenn Sie Musik oder Jingles vom gleichen
PC einspielen wollen, oder „Line-In“,
wenn Sie eine externe, am Line-In-Eingang
Ihrer Soundkarte angeschlossene Soundquelle nutzen.
Die Aufnahme selbst ist kinderleicht:
Klicken Sie in der oberen Symbolleiste
auf den roten Knopf, und die Aufnahme
beginnt. Rechts daneben sehen Sie den
Pegel Ihrer Aufnahme. Achten Sie darauf,
dass er nicht ständig an den rechten Rand
stößt. Falls Sie eine solche Übersteuerung
registrieren, setzen Sie sich etwas weiter
weg vom Mikrofon oder ändern die Lautstärke des Eingangssignals, indem Sie mit
der Maus den Schieberegler nach links
oder rechts ziehen.
Audacity legt im mittleren Bereich des
Programmfensters für jede Aufnahme eine
Tonspur an, sodass Sie später Musik und
Text mischen können.
4
Aufnahme schneiden
Kleine Versprecher können Sie auch stehen lassen, denn sie stören meist nicht
und machen Ihren Podcast eher sympathischer. Wenn Sie sich so richtig verhaspelt haben, können Sie eine solche Passage ganz einfach rausschneiden.
Markieren Sie den misslungenen Teil
in der Tonspur. Klicken Sie dazu auf den
Anfang der Passage und ziehen Sie den
Mauspfeil bei gedrückter linker Maustaste bis zum Ende des Abschnitts.
Spielen Sie die ausgewählte Textstelle
mit einem Klick auf den grünen PlayButton ab, um zu überprüfen, ob Sie die
richtige Auswahl getroffen haben.
Löschen Sie die markierte Stelle, indem Sie die [Entf]-Taste drücken oder
im Menü „Einstellungen“ den Befehl
„Auswahl löschen“ wählen.
5
Musik einbinden
Um Musik in Ihren Podcast einzubinden,
können Sie Audiodateien mit der Maus in
das Programm Audacity ziehen oder im
Menü „Projekt“ die Funktion „Audio integrieren“ nutzen.
Möchten Sie die Musik als eine Art
Soundteppich einsetzen, reduzieren Sie
die Lautstärke der Spur, auf der sich die
Musik befindet. Jede Spur hat links ihren
eigenen Lautstärkeregler. Beim Zusammenstellen zeitlicher Abfolgen hingegen
hilft das Zeitverschiebungswerkzeug aus
der Symbolleiste, mit dem Sie Bestandteile einzelner Spuren verschieben können.
Seien Sie beim Einbinden von Musik
vorsichtig. Grundsätzlich sind bekannte
Songs, die etwa im Radio gespielt werden,
tabu. Mehr Informationen zu legalen Musikquellen finden Sie auf s89.
6
Titel einfügen
Im MP3-Player werden nur die Dateien
auf dem Display angezeigt, die einen Titel
haben. Die sogenannten ID3-Tags ermöglichen die Eingabe von Metadaten für eine
MP3-Datei, zu denen auch der Titel gehört. Um ID3-Tags für Ihre MP3-Datei
anzulegen, klicken Sie nach Fertigstellung
der Aufnahme im Menü „Projekt“ auf den
Befehl „ID3-Tags bearbeiten“.
Geben Sie als Titel den Namen Ihres
Podcasts und die Nummer der aktuellen
Folge an, damit Ihre Hörer die einzelnen
Sendungen besser unterscheiden können. Nicht unwichtig ist auch eine kurze
Inhaltsangabe, etwa „Technikwürze 38
– Zugänglichkeit und Nutzbarkeit“.
Im Feld „Künstler“ können Sie Ihren
Namen eingeben, bei „Album“ empfiehlt
es sich, den Podcast-Titel zu wiederholen.
Als „Genre“ wäre „Podcast“ ideal, aber da
Audacity diese Option trotz seiner langen
Liste von Musikstilen nicht anbietet, wählen Sie am besten „Other“.
7
Podcast als MP3 exportieren
Audacity speichert alle Daten als sogenanntes „Projekt“ im eigenen Dateiformat mit der Endung .aup (für „Audacity
Project“). Sind Sie mit Ihrem Podcast zufrieden, müssen Sie die Aufnahme noch
als MP3-Datei exportieren.
TIPP
Alternative AudioEditoren einsetzen
Auf dem PC gibt es neben Audacity mehr
oder weniger teure Programme wie EasyCut und Adobe Audition (früher CoolEdit).
Nicht unerwähnt bleiben darf das seit 2004
zum Lieferumfang jedes neuen Macintosh
gehörende GarageBand. Ursprünglich für
Musik-Einsteiger gedacht, hat sich das
Programm dank guter Ausstattung und
einfacher Bedienung schnell eine große
Fangemeinde erobert. GarageBand 3 bietet besonders für Podcasting-Produzenten
neue Funktionen sowie zahlreiche Sounds
und Jingles, die sich hervorragend für
Effekte und zur Untermalung eines Podcasts einsetzen lassen.
Klicken Sie im Menü „Datei“ auf „Exportieren als MP3“ und speichern Sie die
Datei – am besten in einem für Podcasts
reservierten Ordner.
Damit Ihre Aufnahme zum Podcast
wird, müssen Sie die MP3-Datei noch im
Internet veröffentlichen (mehr dazu ab
s94). In den nächsten beiden Workshops
lernen Sie zwei einfache Tools für diesen
Zweck kennen: Loudblog und PodPress.
Die Benutzung von Audacity beherrschen Sie schnell; jeder Podcaster findet
in Audacity einen zuverlässigen Helfer
für seine Aufnahmen. Bei Fragen und Problemen ist das deutschsprachige Audacity-Forum die erste Anlaufstelle. Sie erreichen es im Internet unter der Adresse
www.audacity-forum.de.
Audacity-Einsteiger sollten sich auch
die allgemeinen FAQs unter der Adresse
www.audacity-forum.de/forum/17 ansehen, wo die häufigsten Fragen beantwortet werden. David Maciejewski, Peter Müller
Aufnahme
schneiden: Der
Befehl „Auswahl
löschen“ entfernt die
markierte Stelle
aus der Aufnahme.
4
93
PODCAST VERÖFFENTLICHEN
Upload mit Loudblog
Nach Abschluss der Aufnahme Ihres Podcasts mit Audacity fehlt als letzter Schritt nur noch
die Veröffentlichung Ihrer Sendung im Internet. Wenn Sie Ihren Podcast nicht in einen eigenen Blog
einbinden wollen, arbeiten Sie am besten mit Loudblog. Und so gehen Sie dabei vor.
S
ie haben die erste Podcast-Folge
als MP3-Datei fertiggestellt und
möchten sie nun im Web veröffentlichen? Dann werfen Sie einmal einen
Blick auf Loudblog – ein kostenloses Blogsystem speziell für Podcasts, das Anfängern wie Fortgeschrittenen das Veröffentlichen von Podcasts im Internet erleichtert. In diesem Artikel lesen Sie, wie Sie
Loudblog installieren und Ihren Podcast
online stellen.
1
Loudblog installieren
Damit Sie das Blogsystem installieren können, müssen auf Ihrem Webspace mindestens PHP 4.3 und MySQL 4 (oder
SQLite von PHP5) verfügbar sein. Auf
der Heft-CD finden Sie Loudblog 0.5.1.
Vor der Installation sollten Sie allerdings
im Internet (http://loudblog.de/index.
php?s=download) nachsehen, ob es dort
eine neuere Loudblog-Version gibt, und
diese gegebenenfalls installieren.
Speichern Sie das ZIP-Archiv auf
Ihrer Festplatte und entpacken Sie es
unter Beibehaltung der Verzeichnisstruktur in einen neuen Ordner. Nach dem
Entpacken kopieren Sie den Inhalt des
Ordners „Loudblog_0_5_1_files“ per
FTP in den gewünschten Ordner auf
Ihren Webspace.
Rufen Sie zur Installation die Datei
„install.php“ in einem Browser auf. Wurde Loudblog in den Hauptordner des
AUF EINEN
EINENBLICK
BLICK
, Podcast veröffentlichen
Loudblog richtig installieren
s94
Feineinstellungen vornehmen
s95
Alle Tools auf CD
BLOG-TOOL: Das speziell für Podcasts
entwickelte Loudblog hWindows
1
Installieren: In dieser Phase der Installation tragen Sie die Zugangsdaten für die Datenbank auf Ihrem Webspace ein. „MySQL“ und „localhost“ sind voreingestellt.
Webspace kopiert, lautet die URL „http://
IhreDomain.de/install.php“.
Auf der ersten Seite fordert Sie das
Programm auf, die Zugriffsrechte (permissions) der Unterordner „audio“ und
„upload“ auf „777“ zu setzen, damit Loudblog in diesen Ordnern Dateien speichern
darf. In den meisten FTP-Programmen
geht das über das Kontextmenü der einzelnen Ordner mit einem Befehl namens
„ChMod“ oder „Dateiattribute“. Anschließend klicken Sie zur Überprüfung auf
den Eintrag „check chmod status“.
In Schritt 2 der Installation geht es um
die Anmeldung und die Zugangsdaten für
die Datenbank. Unter der Überschrift
„Create Your First Login“ geben Sie im
Feld „Nickname“ den Benutzernamen
und im Feld „Password“ das gewünschte
Passwort ein. Mit diesen Daten melden
Sie sich nach der Installation bei Loudblog an. Achten Sie darauf, dass Loudblog
zwischen Groß- und Kleinschreibung un-
terscheidet („cASe-SenSiTIv“), und merken Sie sich beide Begriffe gut.
Im Abschnitt „Database Settings“ sind
die Zugangsdaten zur Datenbank gefragt,
die Sie von Ihrem Provider bekommen
haben. Als Datenbank ist „MySQL“ und
als Host „localhost“ voreingestellt. Beide
Einträge müssen Sie in der Regel nicht
ändern. Im Feld „Database“ tragen Sie
den Namen der Datenbank ein. „Username“ und „Password“ enthalten den Benutzernamen und das Passwort für die
Datenbank. Das Feld „Table-Prefix“ lassen Sie leer.
Im Feld „Website-URL“ geben Sie die
Adresse ein, unter der Ihr Podcast im Internet erreichbar sein wird. Ist Loudblog
im Hauptordner des Webspace installiert,
ist das „http://IhreDomain.de“ – und
zwar ohne abschließenden Schrägstrich
(„trailing slash“).
Im dritten und letzten Installationsschritt legen Sie die Konfigurationsdatei
für Loudblog an. In einer Textbox stehen
die benötigten Konfigurationseinstellungen. Markieren Sie den Text in der Textbox mit [Strg]+[A] und kopieren Sie ihn
mit [Strg]+[C] in die Zwischenablage.
Suchen Sie auf der Festplatte im Ordner „loudblog/custom“ die Datei „config.
php“ und öffnen Sie sie im Editor. Markieren Sie den Text in der Datei mit
[Strg]+[A] und ersetzen Sie ihn mit dem
Inhalt der Zwischenablage [Strg]+[V].
Speichern Sie anschließend die „config.php“ und kopieren Sie sie per FTP auf
Ihrem Webspace in den Ordner „loudblog/custom“, wobei Sie die alte Datei
überschreiben.
Klicken Sie nach diesem Exkurs im
Browserfenster auf die Schaltfläche mit
der schönen Beschriftung „I’ve done that“
(„Das habe ich gemacht“), um die Installation von Loudblog zu beenden. Sie sehen anschließend eine Glückwunschseite,
auf der Sie zwei Links finden: „Go to administration“ bringt Sie zum Backend.
Über den Eintrag „Visit your new website“ gelangen Sie zum Frontend:
lage ändern. Als Alternative ist das Theme
„Red Train“ von Vladimir Simovic verfügbar:
Weiter geht es dann mit dem Abschnitt
„Pod-cast-Feed“. Im Feld „itunes-Titelbild“ können Sie ein 300 x 300 Pixel
großes JPG-Bild hochladen, welches iPod
und andere MP3-Player zur Darstellung
verwenden. Für RSS-Feeds kann ein
zweites, 88 x 31 Pixel großes JPG bereitgestellt werden. Unter „iTunes-Kategorien“
suchen Sie schließlich bis zu vier Kategorien für Ihren Podcast aus.
Last, not least aktivieren Sie in dem
Abschnitt „Verschiedenes“ unter „Zugriffe
zählen“ alle drei Kontrollkästchen. Loudblog stellt daraufhin eine Statistik zusammen, in der Sie sehen können, ob die
Sendung heruntergeladen, auf der Webseite mit dem Flash-Player abgespielt oder
über ein Abonnement per RSS-Feed abgerufen wurde. Sämtliche anderen Einstellungen auf dieser Seite sind entweder
selbsterklärend oder brauchen nicht verändert zu werden.
3
2
Vor der Kür kommt die Pflicht, und bevor
Sie Ihren Podcast der Welt präsentieren
können, müssen Sie erst noch ein paar
Feineinstellungen in Loudblog erledigen.
Wenn Loudblog im Hauptordner installiert wurde, lautet die URL zum Backend
„http://Ihre Domain.de/loudblog/“.
Melden Sie sich mit dem während der
Installation angegebenen Nickname an
und wechseln Sie nach der Anmeldung
zur Seite „Settings“. An dieser Stelle ändern Sie zunächst die Spracheinstellung
auf „deutsch“. Nach einem Klick auf die
Schaltfläche „save all settings“ erscheinen
nun alle Beschriftungen auf Deutsch: Das
Menü „Settings“ heißt jetzt „Einstellungen“, und „Save all settings“ wurde zu
„Alles speichern“.
Im Abschnitt „Meta-Informationen“
geht es um grundlegende Informationen
zu Ihrem Podcast. Tragen Sie hier zunächst „Titel“ und „Beschreibung“ ein.
Diese Daten erscheinen später nicht nur
auf der Webseite, sondern auch in dem
RSS-Feed, den Loudblog anlegt und mit
dem Sie Ihren Podcast in Verzeichnisdiensten wie iTunes eintragen. Etwas weiter unten können Sie außerdem die Vor-
Podcast veröffentlichen
Wechseln Sie in der Navigationsleiste von
Loudblog in den Bereich „Erstellen“. Das
Bereitstellen einer neuen Sendung verläuft in zwei Schritten: Zunächst müssen
Sie die MP3-Datei auf den Server hochladen, anschließend geben Sie einige Details
zu dieser Sendung ein.
Zum Hochladen der Datei haben Sie
insgesamt drei Möglichkeiten: direkt im
Browser („Über Browser“), per FTP
(„Upload-Ordner“) oder direkt aus dem
Internet (Aus dem Web) per URL.
Am einfachsten gestaltet sich der Upload mit dem Browser. Neben dem Feld
„Über Browser“ zeigt Ihnen Loudblog
an, wie groß die hochzuladende Datei
maximal sein darf. Falls dieser Wert zu
niedrig ist, wenden Sie sich an Ihren
Provider, damit er ihn erhöht. Um die
Mediendatei per Browser hochzuladen,
klicken Sie auf die Schaltfläche „Durchsuchen“, wählen die Podcastdatei aus und
klicken rechts daneben auf die Schaltfläche „Datei holen“.
Alternativ zum Upload-Formular
können Sie Ihre MP3-Dateien auch per
FTP in den Ordner „upload“ auf dem
Server kopieren und danach im Abschnitt
„Upload-Ordner“ per Dropdown-Liste
auswählen. Nach der Auswahl der Datei
klicken Sie ebenfalls auf „Datei holen“.
Nach dem Upload wechselt Loudblog
automatisch auf die nächste Seite mit der
Bezeichnung „Erstellen“ (Schritt 2). Dort
können Sie unter anderem einen Titel
und eine Beschreibung eingeben.
Speichern Sie alle Änderungen und
rufen Sie danach das Frontend auf. Falls
Sie in den Einstellungen die Vorlage „Red
Train“ ausgewählt haben, sieht Ihre neue
Website nun aus wie im Bild unten.
Sie können Loudblog vollständig an
Ihre persönlichen Bedürfnisse anpassen,
andere Vorlagen installieren und diese –
solide HTML- und CSS-Kenntnisse vorausgesetzt – sogar selbst verändern. Auf
der Website von Loudblog stehen Plugins zum Download bereit, mit denen sich
die Funktionalität erweitern lässt. Das offizielle Forum hilft Ihnen auch bei technischen Fragen weiter: http://loudblog.
de/forum/.
Veröffentlichen:
So sieht Ihr erster Podcast in Loudblog mit der Vorlage
„Red Train“ aus.
3
95
PODCASTEN IM BLOG
Blog mit PodPress tunen
Wer seinen mit WordPress betriebenen Blog gerne mit einem eigenen Podcast aufwerten möchte,
ist mit PodPress am besten bedient. CHIP zeigt, wie Sie einen Podcast in Ihren Blog einbauen.
W
ordPress ist bei vielen Blogs
die treibende Kraft unter der
Motorhaube. Für WordPressBlogger, die auch einen Podcast anbieten
möchten, ist eine entsprechende Erweiterung von WordPress einfacher, als ein
zweites System wie Loudblog zu installieren. Genau das bietet PodPress.
Bei dem Tool handelt es sich um ein
WordPress-Plugin, das die zum Podcasten
benötigten Funktionen perfekt in WordPress integriert:
Um einen neuen Podcast bereitzustellen, schreiben Sie wie gewohnt einen Beitrag in WordPress. Dank PodPress können Sie eine Audio- oder Videodatei direkt in diesen Beitrag einbinden.
PodPress trägt den Beitrag automatisch in den RSS-Feed des Blogs ein, inklusive der von Podcast-Verzeichnissen
benötigten Informationen wie Dateigröße
und Spieldauer. Zum Abspielen des Podcasts integriert PodPress auf der Webseite
automatisch einen Flash-Player in den
Blogbeitrag.
In diesem Workshop erfahren Sie, wie
Sie PodPress in WordPress einbauen und
perfekt nutzen.
1
PodPress installieren
Voraussetzung für die Installation von PodPress ist ein funktionierender WordPressBlog auf Ihrem Webspace. Auf der HeftCD finden Sie PodPress 6.8; sehen Sie
aber vor der Installation noch einmal
AUF EINEN
EINENBLICK
BLICK
, Podcasten im Blog
PodPress richtig konfigurieren
s96
Podcast-Statistiken auswerten
s97
, Alle Tools auf CD
PLUGIN: PodPress-Erweiterung für das
Blogsystem WordPress hWindows
1
Installieren: Nach der Kopie auf Ihren Webspace aktivieren Sie PodPress im Bereich
„Plugins“ von WordPress. Danach erscheint der Menüpunkt „podPress“ oben rechts.
unter der Webadresse www.mightyseek.
com/podpress/ nach, ob es eine neuere
Version gibt, und installieren Sie gegebenenfalls diese.
Speichern Sie das ZIP-Archiv auf der
Festplatte und entpacken Sie es unter Beibehaltung der Verzeichnisstruktur in einen
neuen Ordner. Nach dem Entpacken kopieren Sie den gesamten Ordner „podpress“ per FTP in den Ordner „wp-content/plugins“ auf Ihrem Webspace.
Melden Sie sich nun als Administrator
am Backend von WordPress an und gehen
Sie in den Bereich „Plugins“. Suchen Sie
nach dem Eintrag für „podPress“ und klicken Sie auf den Link zum Aktivieren. Die
Zeile erscheint daraufhin grün unterlegt,
und in der Navigationsleiste von WordPress taucht ganz rechts ein neuer Menüpunkt namens „podPress“ auf.
2
PodPress konfigurieren
Bevor Sie die erste Sendung online stellen
können, müssen Sie PodPress konfigurieren. Klicken Sie dazu in der Navigationsleiste von WordPress auf „podPress“. Der
Konfigurationsbereich besteht aus den drei
Seiten „Feed/iTunes Settings“, „General
Settings“ und „Player Settings“.
Sie beginnen auf der ersten Seite mit
den Einstellungen für iTunes und den
RSS-Feed. Unterhalb der lila hinterlegten
iTunes-Vorschau („Preview“) beginnt die
eigentliche Konfiguration. In der linken
Spalte stehen die Daten für iTunes, rechts
die für den RSS-Feed.
Beginnen Sie zunächst mit der Adresse
für die Feeds. Die „iTunes: FeedID“ haben
Sie bei der Registrierung im iTunes-Podcast-Verzeichnis erhalten. Die PodcastFeed-URL lautet bei WordPress standardmäßig „http://IhreDomain.de/wp-rss2.
php“, sofern Sie die Adresse des RSS-Feeds
nicht geändert haben. Im Feld „Blog/Podcast Title“ tragen Sie den Titel Ihres Podcasts ein. Die kurze Beschreibung des
Podcasts in „iTunes: Summary“ und „Blog
Description“ darunter sollte in beiden
Feldern identisch sein.
Wenn Sie möchten, dass iTunes, der
iPod oder andere kompatible Geräte ein
Logo für Ihren Podcast anzeigen, benötigen Sie eine 300 x 300 Pixel große JPEG-
Grafik, die Sie in einen beliebigen Ordner
auf Ihrem Webspace kopieren. Im Feld
„iTunes: image“ tragen Sie die komplette
URL zu dieser Grafik ein. Die nächsten
Felder sind selbsterklärend. In „iTunes:
Categories“ sollten Sie unbedingt drei
Kategorien auswählen, in denen Ihr Podcast bei iTunes gelistet werden soll.
Zum Speichern der Änderungen klicken Sie auf die Schaltfläche „Update Options“ rechts unten auf der Seite. Danach
sehen Sie oben eine Vorschau, wie Ihr
Podcast bei iTunes erscheint:
Auf der nächsten Seite, den „General
Settings“, brauchen Sie die meisten Einstellungen nicht zu ändern. In „media
files directory“ werden die MP3-Dateien
für den Podcast gespeichert. Meist ist das
der Ordner „/wp-content/uploads“.
PodPress kann die Zugriffe auf Ihren
Podcast protokollieren. So bekommen Sie
aussagekräftige Statistiken über den Erfolg
Ihres Podcasts. Aktivieren Sie dazu das
Kontrollkästchen „Enable podPress Statistics“. Daraufhin taucht in der Navigationsleiste von PodPress ganz links der Befehl
„Stats“ auf, und direkt unter dem Kontrollkästchen erscheinen zwei Dropdown-Listen. Wählen Sie in der Liste „Start Logging“ die Option „Full“, damit PodPress
alle Zugriffe in der MySQL-Datenbank
auf Ihrem Webspace speichert.
Schon nach kurzer Zeit erhalten Sie
detaillierte Berichte, wie oft Ihr Podcast
heruntergeladen, über die Webseite angehört oder über Ihren RSS-Feed abonniert
wurde. Um die Einstellungen zu speichern,
gibt es auch auf dieser Seite ganz unten
die Schaltfläche „Update Options“.
Auf der dritten Seite können Sie das
Aussehen des Flash-Players so konfigurieren, dass er sich dem Design des Podcasts
möglichst nahtlos anpasst. Auch an dieser
Stelle speichern Sie die Änderungen durch
einen Klick auf „Update Options“.
3
Podcast hochladen
Nach der Konfiguration können Sie Ihre
erste Podcast-Sendung online stellen. Kopieren Sie zunächst die MP3-Datei für
den Podcast per FTP auf Ihren Webspace,
und zwar in das in den „General Settings“
definierte „media file directory“, in der
Regel „/wp-content/uploads/“.
Das Hochladen einer Podcast-Sendung
funktioniert dank PodPress fast wie das
Schreiben eines WordPress-Beitrags: Klicken Sie in der WordPress-Navigationsleiste auf „Schreiben“. Geben Sie wie gewohnt Titel und Text für Ihren Beitrag
ein, etwa eine schriftliche Zusammenfassung des Podcasts. Titel und Text erscheinen später in allen Podcatcher-Programmen, auf den MP3-Playern Ihrer Hörer
und auf Ihrer Website.
Neu ist der blaue Balken mit der Beschriftung „Podcasting“ unter dem Editor. Ein Klick auf die Schaltfläche „Add
Media File“ öffnet ein Dialogfeld. Wählen
Sie die in „media file directory“ gespeicherte Datei aus der Dropdown-Liste und
klicken Sie für „Size“ und „Duration“ auf
„Auto Detect“. PodPress versucht nun, die
Dateigröße (Size) und die Länge in Minuten (Duration) automatisch zu ermitteln.
Beide Angaben erscheinen im RSS-Feed
und sind wichtig für Podcatcher.
Nach der Auswahl der MP3-Datei klicken Sie wie gewohnt auf die WordPressSchaltfläche „Veröffentlichen“, und schon
steht Ihr erster Podcast im Internet bereit.
Der Flash-Player zum „Jetzt hören“ wird
von PodPress automatisch integriert.
4
Statistiken auswerten
Nichts ist nach der Veröffentlichung eines
Podcasts spannender als zu sehen, wie
viele Hörer Sie gewonnen haben und ob
sich die Nutzerzahlen nach dem Veröffentlichen weiterer Sendungen konstant
halten. Die Statistikfunktionen in PodPress versorgen Sie mit allen wichtigen
Informationen rund um Ihren Podcast.
Wählen Sie in der Navigationsleiste
den Bereich „podPress | Stats“, um die folgenden Statistiken Ihres Podcasts in Augenschein zu nehmen:
„Quickcount“ zeigt Ihnen alle Ihre
Podcast-Sendungen im Überblick an, pro
Seite 20 Stück. Sie erfahren, welche Pod-
David Maciejewski ist seit
1999 hauptberuflich Webdesigner und beschäftigt
sich mit neuen Technologien und Themen rund um
das Internet. Schon 2002
spezialisierte er sich auf die
Zugänglichkeit von Webseiten (Barrierefreiheit). Seit
2005 gehen er und sein Team jeden Montag auf Sendung und veröffentlichen „Technikwürze“, den ersten deutschsprachigen
Podcast für Webdesigner und -entwickler
(http://technikwuerze.de).
cast-Datei wie oft heruntergeladen wurde
(„Web“), wie oft sie über den Flash-Player
auf Ihrer Webseite abgespielt wurde
(„Play“) und wie viele Abonnenten Sie
über Ihren RSS-Feed gewonnen haben
(„Feed“). Außerdem erfahren Sie die Gesamtbesucherzahl pro Sendung.
„Unique Downloaders“ listet sämtliche Audio- und Videodateien mit ihren
Gesamt-Downloads. „Top IP Addresses“
zeigt die IP-Adressen, die Ihre Podcasts
am häufigsten herunterladen.
„RawStats“ liefert Ihnen die komplette
Übersicht über alle Hörer nebst der Methode, wie sie den Podcast empfangen haben und welchen Browser beziehungsweise Podcatcher der Besucher benutzt hat.
In einer der nächsten Versionen von PodPress sehen Sie an dieser Stelle auch, welche Software die Hörer verwenden.
„Graph by Date“ und „Graph by Post“
zeigen Diagramme über die Downloads per
Datum beziehungsweise per Beitrag an.
Damit haben Sie die wichtigsten Funktionen zum Podcasting mit WordPress
kennengelernt. Bei Fragen finden Sie auf
der Webseite des Entwicklers unter der
Adresse www.mightyseek.com/podpress/
eine FAQ-Liste und ein Supportforum.
Webdesign-Podcast:
Der Podcast „Technikwürze“ strahlt
jeden Montag eine
neue Sendung
zu WebpublishingThemen aus.
97
BLOGS MIT JOOMLA
Inhalte flexibel verwalten
Wenn ein Blogprogramm nicht mehr ausreicht, ist der nächste Schritt die Installation eines
Content-Management-Systems. Sehr beliebt ist die Open-Source-Software Joomla.
AUF EINEN
AUF
EINENBLICK
BLICK
, Blogs mit Joomla
Joomla verwalten
s100
Beiträge bearbeiten, hinzufügen
und das Layout ändern
s101
, Alle Tools auf CD
JOOMLA: Das Content-ManagementSystem in deutscher Sprache hCMS
WEBSERVER: XAMPP zum Einrichten
eines lokalen Webservers hPHP
men will, sind diese Programme ungeeignet. Die Alternative heißt in diesem Fall
Content-Management-System, kurz CMS.
Ein empfehlenswertes Open-Source-Programm aus dieser Softwaregattung ist
Joomla. Es ist leistungsfähig und doch vergleichsweise leicht erlernbar und unterscheidet sich darin wohltuend von den
kommerziellen Profisystemen.
Bevor Sie Joomla installieren und ausprobieren, sollten Sie allerdings auch über
die wichtigsten Vor- und Nachteile der
Software Bescheid wissen.
Zunächst die Vorteile: Joomla kostet als
Open-Source-Programm keine Lizenzgebühr und ist auf nahezu allen Webservern
einsetzbar, da es auf PHP und MySQL basiert. Es ist sehr einfach zu installieren,
flexibel und erfordert nur eine verhältnismäßig kurze Einarbeitungszeit. Jeder veröffentlichte Beitrag auf Ihrer Website lässt
sich als E-Mail verschicken und als PDFDatei speichern. Zudem ist jederzeit eine
spezielle Druckversion verfügbar. Joomla
wird von einer weltweit verstreuten, sehr
lebendigen Community unterstützt, die
Zur Sicherheit: Joomla prüft, ob alle Voraussetzungen für die Installation gegeben sind.
D
er große Vorteil einer Blogsoftware
wie WordPress besteht darin, dass
sie sich intuitiv bedienen und einfach verwalten lässt. Doch für größere
Diskussionssites, bei denen der Administrator mehr Einfluss auf Reihenfolge, Aussehen und Gliederung der Beiträge neh-
zahlreiche Templates (Layoutvorlagen)
und Erweiterungen wie Bildergalerien,
Foren und Shops für das Programm geschrieben hat.
Aber Joomla hat auch Nachteile: So ist
das Backend zum Verwalten der Inhalte
lediglich auf Englisch verfügbar. Zudem
kann die Software keine barrierefreien
Webseiten erzeugen, da das Layouten mit
Tabellen sehr tief im System verwurzelt
ist. Erst ab der Version 1.5, an der bereits
fleißig gearbeitet wird, soll das ohne entsprechende Patches möglich sein.
Die Grenzen des Systems seien ebenfalls kurz erwähnt: Für mehrsprachige
Websites ist Joomla gegenwärtig genauso
wenig geeignet wie für die zentrale Verwaltung von Sites, die auf verschiedenen
Domänen liegen. Zudem gibt es kein Versions-Management, um bei Problemen
schnell zur letzten funktionierenden Fassung zurückzukehren.
Um zu sehen, was mit Joomla alles
möglich ist, sehen Sie sich am besten zunächst ein paar Sites an, die die Software
verwenden. Schöne Beispiele sind etwa
http://stiftung-sehnsucht.de oder das
Portal www.familienkultour.de.
Joomla installieren
Die Systemvoraussetzungen für Joomla
sind gering: Auf dem Webspace müssen
mindestens PHP V4.2 und MySQL V3.23
vorhanden sein. Joomla überprüft vor der
Installation, ob diese Bedingungen erfüllt
sind. Auf der Heft-CD finden Sie die Version 1.0.11 des Programms, die bei Redaktionsschluss dieses Heftes aktuell war.
Zudem haben wir dort auch die deutschen
Sprachdateien aufgenommen.
Bitte überprüfen Sie aber auf der Website http://joomla.de, ob es bereits eine
neuere Version gibt. Suchen Sie im Bereich „Download“ nach „Joomla! Core“,
um die aktuellste Version aufzustöbern.
Die Sprachdateien zum Core müssen Sie
gesondert herunterladen, dabei können
Sie sich zwischen den Versionen „German
formal“ (Anrede per Sie) oder „German
informal“ (Anrede per Du) entscheiden.
Wie bei einer Serveranwendung üblich, entpacken Sie zunächst das ZIP-Archiv und kopieren die Dateien dann per
FTP auf Ihren Webserver. Sobald Sie im
Browser die URL für den Ordner aufrufen, in den Sie Joomla kopiert haben, startet automatisch das Installationspro-
Control Panel:
Die zentrale
Schaltstation
des ContentManagementSystems ist das
Control Panel.
gramm. Zunächst erscheint der „pre-installation-check“: Sind im unteren Teil
dieser Seite Ordnernamen rot gekennzeichnet, müssen Sie die Zugriffsrechte
mit Ihrem FTP-Programm auf „777“ setzen. Bei den meisten FTP-Clients erledigen
Sie das über das Kontextmenü. Klicken
Sie mit der rechten Maustaste auf den
Ordner und suchen Sie nach einem Befehl
wie „CHMOD“ oder „Dateiattribute“.
Weiter geht es mit der Schaltfläche
„Next“ rechts oben. Nachdem Sie die
GNU/GPL-Lizenz bestätigt haben, startet
die Installation. Die Einrichtung von
Joomla geschieht in vier Schritten:
Step 1: Als Erstes geben Sie die Zugangsdaten zu MySQL ein, die Sie von Ihrem
Provider erhalten haben. Stellen Sie sicher, dass die Option „Install Sample Data“ angekreuzt ist. Damit installieren Sie
auch die Beispielsite von Joomla, auf der
dieser Artikel basiert.
Step 2: Geben Sie den gewünschten Namen der Site ein. Falls Sie noch keine genaue Vorstellung davon haben, was auf
Ihrer Site alles passieren soll, wählen Sie
zunächst eine x-beliebige Bezeichnung.
Sie können den Namen später als Superadministrator im Backend immer noch
problemlos ändern.
Step 3: An dieser Stelle müssen Sie diverse
Angaben zur Site machen: Geben Sie die
URL an, den Pfad auf dem Server sowie
eine E-Mail-Adresse und ein Passwort für
den Superadministrator.
Step 4: Zur Erinnerung zeigt Ihnen Joomla
noch einmal den Login-Namen und das
Passwort für den Superadministrator an.
Oben auf der Seite finden Sie zwei
Links, einen zum Frontend („View Site“)
und einen zum Backend („Administration“). Aber bevor Sie den Verknüpfungen
folgen können, müssen Sie per FTP den
Ordner „installation“ löschen.
Das Frontend von Joomla
Beginnen Sie Ihre Tour durch Joomla mit
einem Blick auf das Frontend der Beispielsite des Programms. Noch ist hier alles in
englischer Sprache. Das Frontend ist in k
KNOW-HOW
Warum Joomla die CMS-Szene beherrscht
Wer sich auf die Suche nach einem ContentManagement-System begibt, hat die Qual
der Wahl. Das Portal www.contentmanager.
de etwa listet in einer Marktübersicht mehr
als 1400 Produkte dieses Typs auf. Aber
schon nach einer kurzen Websuche stolpert
man automatisch über den Namen Joomla.
Das System basiert auf Mambo, das von der
australischen Firma Miro International gefördert und 2004 mit dem „Linux & Developer
Award“ ausgezeichnet wurde. Im August
2005 trennte sich das Entwicklerteam im
Streit von Miro International und entwickelte
das Produkt unter dem Namen Joomla weiter. Joomla ist die englische Schreibweise für
das aus dem Suaheli stammende Wort „Jumla“, das sich mit „alle zusammen“ oder „in
der Gesamtheit“ übersetzen lässt.
Joomla zählt zu den populärsten und leistungsstärksten Content-Management-Systemen der Open-Source-Gemeinde und gilt als
sehr stabiles Programm. Im Zeitalter der allgegenwärtigen Beta-Versionen ist das ein
nicht zu unterschätzendes Argument.
99
mehrere Bereiche aufgeteilt, die durch
Module erzeugt werden. Ganz oben stehen das „Top-Menu“, die Suchfunktion
„Search“ und darunter der „Newsflash“,
eine zufällig ausgewählte Meldung.
Auf der linken Seite sind das Menü, ein
Anmeldeformular und der Bereich „Syndicate“ angeordnet. In der Mitte stehen
unterhalb des Banners von „OpenSource
Matters“ die neuesten („Latest“) und die
beliebtesten („Popular“) Nachrichten,
daneben erreichen Sie ein Umfragemodul
(„Polls“). Zwischen Menü und Umfragemodul sehen Sie den Inhalt der Site.
Genau genommen besteht Joomla sogar aus zwei Frontends. Für registrierte
Benutzer wird nach der Anmeldung in
der Menüleiste ein zusätzliches Menü angezeigt, in dem sie je nach Berechtigung
Inhalte bearbeiten und anlegen können.
Joomla ist damit hervorragend geeignet
für die Websites etwa von Vereinen, Fanclubs und ähnlichen Organisationen, bei
denen registrierte Nutzer Inhalte eingeben
sollen, ohne deshalb gleich Administrator
sein oder sich mit dem Backend auseinandersetzen zu müssen.
Das Backend von Joomla
Der Verwaltungsbereich von Joomla sieht
auf den ersten Blick sehr übersichtlich
und aufgeräumt aus, bietet aber erheblich
mehr Möglichkeiten als ein Blog wie beispielsweise WordPress. Für die Arbeit im
Backend müssen JavaScript und Cookies
im Browser erlaubt sein.
TIPP
Joomla auf dem
eigenen PC testen
Um Joomla erst einmal daheim auf dem lokalen PC auszuprobieren, bietet sich das
XJ!-Paket aus dem Hause Creative Coders
an. Es enthält unter anderem den Webserver Apache, PHP, MySQL mitsamt dem Verwaltungs-Tool phpMyAdmin und ein vorinstalliertes Joomla. Downloads und weitere
Informationen gibt es unter der Adresse
www.creativecoders.de.
bolleiste rechts oben auf „Publish“. Zum
Abschluss der Installation wechseln Sie
wieder ins „Control Panel“ und öffnen den
Bereich „Global Configuration“. Dort sollte im Register „Locale“ bereits „german“
ausgewählt sein. Korrigieren Sie gegebenenfalls die Zeitzone und ändern Sie die
„Country Locale“ in „de_DE“. Speichern
Sie die Einstellungen mit einem Klick auf
„Save“ rechts oben in der Symbolleiste. Die
Sprachdatei gilt wie gesagt nur für das
Frontend von Joomla. Das Backend bleibt
auf Englisch.
Module verwalten
Ganz oben sehen Sie die Menüleiste.
Falls Sie sich im Backend verirren sollten:
Mit einem Klick auf „Home“ kommen Sie
immer wieder zur Startseite zurück. Darunter sehen Sie die Symbole der Schaltzentrale von Joomla, des „Control Panel“.
Rechts daneben erreichen Sie über sechs
Register eine Schnellübersicht, die Auskunft über den Zustand der Site gibt.
Installieren Sie zunächst die deutsche
Sprachdatei für das Frontend: Klicken Sie
im „Control Panel“ auf den „Language
Manager“ und dort in der Symbolleiste
rechts oben auf „New“. Im folgenden
Fenster wählen Sie über „Durchsuchen“
das ZIP-Archiv der Sprachdatei aus und
klicken auf „Upload File & Install“. Joomla entpackt das Archiv und richtet die zusätzliche Sprache ein. Um sie zu aktivieren, markieren Sie den Eintrag im „Language Manager“ und klicken in der SymAufgeräumt: Das
Abschalten nicht
benötigter Module
schafft Ordnung
und Übersicht auf
der Seite.
Im nächsten Schritt schalten Sie zunächst
einmal die Ansicht der meisten Module
auf der Startseite ab, um so mehr Übersicht zu gewinnen. Rufen Sie dazu im Menü „Modules“ den Eintrag „Site Modules |
Module Manager“ auf. Um ein Modul ausoder einzuschalten, klicken Sie in der
Spalte „Published“ auf das entsprechende
Symbol. Deaktivieren Sie die Module
„Banners“, „Syndicate“, „Polls“, „Who’s
online“, „Latest News“ und „Popular“.
Um ein Modul umzubenennen, klicken Sie ganz einfach auf seinen Titel, ändern den Text über das Eingabefeld und
klicken in der Symbolleiste rechts oben
auf „Save“. Probieren Sie es aus: Benennen
Sie „Main Menu“ in „Hauptmenü“ um,
„Login Form“ in „Anmeldung“ sowie
„Newsflash“ in „Blitzmeldung“.
Beiträge bearbeiten
Ein Content-Management-System dient,
wie der Name schon sagt, zum Verwalten
von Inhalten. Um das Vorgehen zu verdeutlichen, ändern wir auf der Startseite
den Beitrag „Welcome to Joomla!“.
Ein Beitrag ist im Joomla-Jargon ein
„Content Item“. Zum Bearbeiten rufen Sie
im „Control Panel“ den „Content Item
Manager“ auf. Klicken Sie in der Liste der
Items auf den Titel „Welcome to Joomla!“,
um den Beitrag mit dem integrierten Editor Tiny MCE zu bearbeiten. Verändern
Sie nach Belieben Titel und Text und speichern Sie die Änderungen mit einem Klick
auf „Save“. Rufen Sie dann das Frontend
mit dem veränderten Beitrag auf.
Beiträge hinzufügen
Ein neuer Beitrag muss in das Ordnungssystem von Joomla eingebunden werden,
das aus „Sections“ (Abschnitte), „Catego-
ries“ (Kategorien) und „Content Items“
(Beiträge) besteht. Die Menüs sind nicht
Teil dieser Hierarchie und werden separat
über den „Menu Manager“ verwaltet. Um
im Hauptmenü etwas Ordnung zu schaffen, wählen Sie „Menu | mainmenu“. Deaktivieren Sie durch Klicks auf die Symbole unter „Published“ alle vorhandenen
Einträge bis auf „Home“, „Contact us“
und „Search“ und benennen Sie die drei
verbliebenen Menüpunkte um in „Startseite“, „Kontakt“ und „Suche“. Überprüfen Sie die Änderungen anschließend
wieder im Frontend.
Um beispielsweise ein Impressum hinzuzufügen, klicken Sie im „Control Panel“
auf „Add New Content“. Zunächst müssen Sie den Beitrag einem Abschnitt und
einer Kategorie zuweisen. Wählen Sie als
Abschnitt „News“ und als Kategorie „Latest News“, auch wenn das inhaltlich nicht
perfekt passt. In das Eingabefeld „Title“
tippen Sie „Impressum“ ein und geben im
Editorfenster ein paar provisorische Impressumsangaben ein.
Um den Beitrag ins Menü aufzunehmen, öffnen Sie rechts neben dem Editorfenster das Register „Link to Menu“. Wählen Sie dort „mainmenu“ aus, schreiben
Sie ins Feld „Menu Item Name“ das Wort
„Impressum“ und klicken Sie anschließend direkt darunter auf die Schaltfläche
„Link to Menu“. Speichern Sie den Beitrag und betrachten Sie das Frontend. Im
Hauptmenü ist jetzt der Link „Impressum“ zu sehen und funktioniert auch.
Template wechseln
Ein Template ist eine Layoutvorlage, Änderungen daran dürfen nur Superadministratoren vornehmen. Wählen Sie im
Menü „Site“ den Befehl „Template-Manager | Site Templates“ aus, um zum Template Manager zu gelangen. Klicken Sie auf
das Optionsfeld vor „madeyourweb“ und
anschließend in der Symbolleiste rechts
oben auf „Default“. Wenn Sie jetzt zum
Frontend umschalten, sehen Sie, dass sich
sein Design völlig verändert hat.
Eine gute Auswahl an Templates finden Sie beispielsweise auf http://down
load.joomla.de. Zur Installation wählen
Sie einfach das heruntergeladene ZIP-Archiv auf Ihrer Festplatte aus.
Joomla und Barrierefreiheit
Das Layout mit Tabellen ist, wie gesagt,
sehr tief in Joomla verankert. So werden
Menüs beispielsweise nicht, wie im modernen Webdesign üblich, als ungeordnete
Listen, sondern als Tabellen ausgegeben.
Es ist zwar auch möglich, sie in Form einfacher Listen zu erzeugen. Verschachtelte
Menülisten jedoch sind nur mit dem 508
Hack von Run Digital möglich, der etwa
50 Dateien des Joomla-Cores verändert
und ersetzt (www.run-digital.com).
Im Augenblick arbeitet das JoomlaTeam an der Version 1.0.12, dem Abschluss
der 1.0-Serie. Parallel dazu sind auch die
Arbeiten an Joomla V1.5 in vollem Gang.
Diese Version soll zum ersten Mal die vollFrischer Look: Das
Template „made
your web“ versieht Ihre JoomlaSite mit einer neuen Oberfläche.
ständige Trennung von Inhalt und Gestaltung ermöglichen, sodass mit Joomla
endlich auch ohne aufwändige Hacks die
Gestaltung barrierefreier Webseiten mögPeter Müller
lich ist.
TIPPS
Literatur und Links
zu Joomla
Zum kostenlosen Einstieg in
Joomla gibt es von Galileo
ein Open Book: www.galileo
computing.de/openbook/
joomla
Ebenfalls kostenlos können Sie sich das
PDF-Dokument „Familie-Schlüter-Joomla!Tutorial“ herunterladen: www.joomla-dasbuch.de/blog. Die Autoren arbeiten gerade an einer Buchversion.
Brandneu, günstig und nicht
nur für Kids ein guter Einstieg:
„Content Management mit
Joomla! für Kids“ von JohannChristian Hanke. 304 Seiten,
19,95 Euro (ISBN 3-82668625-X)
Wer etwas genauer wissen
will, wie Joomla funktioniert,
greift zu „Joomla! und Mambo.
Open Source-CMS einsetzen
und erweitern“ von Tobias
Hauser und Christian Wenz.
480 Seiten, 29,90 Euro (ISBN
3446406905)
Eine der effektivsten Arten, Joomla kennenzulernen, ist ein Online-Workshop unter der Leitung von Kerstin Dankwerth. Die
Anmeldung erfolgt über www.akademie.
de. Die Workshops sind mit einer Teilnahmegebühr von 300 Euro für Privatpersonen
recht teuer, aber als gezielte Vorbereitung
zum Gestalten einer Firmen- oder VereinsHomepage genau das Richtige.
Die Joomla-Welt ist teilweise recht chaotisch. Es gibt viele Sites, die „Joomla“ im
Domainnamen führen, die aber letztlich
mehr versprechen, als sie halten. Eine gute
Übersicht finden Sie bei www.softwareguide.de. Die Site ist ironischerweise Anfang 2006 von Joomla zu WordPress gewechselt. Eine übersichtliche Linksammlung gibt es auch bei http://sw-guide.de/
joomla/joomla-weblinks. Die deutschsprachige Zentrale des Programms finden Sie
unter http://joomla.de.
101
WEBSITE BEKANNT MACHEN
Page-Rank optimieren
S
uchmaschinen wie Google, Yahoo
oder Microsofts Live Search sind
die zentralen Einstiegspunkte ins
Internet. Anhand der Suchbegriffe navigieren Sie durchs Internet und finden
mehr oder weniger schnell die gewünschten Informationen.
AUF EINEN
EINENBLICK
BLICK
, Besseres Page-Ranking erzielen
Das Geheimnis der „robots.txt“
s103
Andere Webseiten analysieren, eigene
Seite verbessern
s104
Alle Tools auf CD
ADAURL: Gratis-Tool zur automatischen
Suchmaschinen-Anmeldung hHTML
Wenn Sie eine identische Suchanfrage
in unterschiedlichen Suchmaschinen eingeben, werden Sie in der Regel eine gewisse Anzahl identischer Treffer, aber auch
eine unterschiedliche Reihenfolge der Ergebnisse vorfinden.
So arbeiten Suchmaschinen
Suchmaschinen schicken regelmäßig ihre
Suchroboter (Crawler) aus, die im gesamten Internet Informationen sammeln. Einen Hinweis darauf, ob Ihre Website in
letzter Zeit von einem Crawler besucht
wurde, finden Sie in der Logdatei Ihres
Webservers.
Wenn Ihre Website bei der Suchmaschine bekannt ist, haben Sie schon einen
großen Schritt in die richtige Richtung
getan. Nun müssen Sie noch einen der vorderen Plätze in der Trefferliste erreichen.
Dabei ist es hilfreich zu wissen, wie Suchmaschinen ihr Page-Ranking zusammenstellen.
Wenn Sie etwa auf der Suche nach aktuellen Neuigkeiten über den „FC Bayern
München“ sind, geben Sie das Ziel Ihres
Interesses in Anführungszeichen als Anfrage in eine Suchmaschine ein. Diese
schickt zuerst eine Anfrage an ihre Datenbank und ermittelt, welche Seiten den
Suchbegriff enthalten. Auf Basis eines Algorithmus weist die Suchmaschine nun
jeder Seite eine gewisse Relevanz und damit eine Ranglistenposition (Page-Rank)
zu. Anschließend durchläuft die erste bewertete Trefferliste verschiedene Filter,
Jede Homepage will gefunden werden – erst recht, wenn man damit Geld verdienen will. Daher
sollte Ihre Website in den Ergebnislisten der großen Suchmaschinen möglichst weit vorne landen.
CHIP zeigt Ihnen, wie Sie bei Google & Co. in der ersten Reihe sitzen – mit legalen Mitteln.
um manipulierte Seiten zu entfernen oder
mit einer niedrigeren Relevanz zu kennzeichnen. Damit beugt die Suchmaschine
Treffern aus Linkfarmen oder sonstigen
unseriösen Seiten vor. Nach der Neubewertung der Relevanz sortiert die Suchmaschine die Seiten neu und gibt die
Trefferliste aus.
Die abweichenden Ergebnisse der
großen Suchmaschinen haben also mehrere Ursachen: Zum einen kann es sein,
dass sich in den Datenbanken unterschiedliche Seiten befinden. Zum anderen hat
jede Suchmaschine ihre eigenen, aus
gutem Grund geheim gehaltenen Filterund Ranking-Kriterien.
finden Sie unter www.heise.de/ct/SEOWettbewerb. Diese belegen eindeutig,
dass es möglich ist, durch bestimmte Techniken einen Spitzenplatz bei Google zu
erreichen.
Vor ein paar Jahren genügten noch ein
paar simple Maßnahmen für ein TopRanking. Damals sind die meisten Seiten
etwa danach bewertet worden, wie häufig
der gesuchte Begriff darin auftauchte, was
zu den absurdesten Optimierungsverfahren geführt hat. Das gehört heute der Vergangenheit an; einige grundsätzliche Regeln sind allerdings immer noch gültig.
Innerhalb einer Website gibt es einige
für das Page-Ranking entscheidende Elemente, denen Sie besonders viel Aufmerksamkeit zuwenden sollten:
Seitentitel: Er sollte die Inhalte der Seite
kurz und prägnant mit den wichtigsten
Begriffen beschreiben. Zehn Wörter sollten dazu ausreichen.
Überschriften: Die Crawler orientieren
sich gerne an den klassischen HTML-Tags
<h1> bis <h6>. Setzen Sie diese sinnvoll
auf Ihren Seiten ein. Sollten sie optisch
nicht ins Bild passen, helfen Cascading
Style Sheets (CSS) und die Zuweisung
entsprechender Schriftarten und -größen
meist weiter (lesen Sie zu Cascading Style
Sheets die Beiträge ab s32).
Sitemap: Sie erleichtert den Crawlern die
Arbeit und sollte außer Hyperlinks nichts
enthalten.
Meta-Tags: Sie haben zwar im Laufe der
Jahre an Bedeutung verloren und werden
nicht mehr so stark gewichtet, sollten aber
trotzdem entsprechend gepflegt sein.
Signalwörter: Die wichtigsten Signalwörter des Texts sollten wiederholt auftreten,
nach Möglichkeit zu Beginn des Texts.
Neben diesen allgemeinen Tipps gibt
es auch noch einige Techniken, wie Sie
einen Crawler steuern und ihm den Zugriff auf bestimmte Bereiche verweigern.
Wo Sie ansetzen können
Was die robots.txt bewirkt
Eine Suchmaschine zu manipulieren ist
erheblich schwieriger geworden als noch
vor ein paar Jahren – unmöglich ist es jedoch nicht. Das zeigt der Wettbewerb
rund um den Phantombegriff„Hommingberger Gepardenforelle“. Die Teilnehmer
waren aufgefordert, Seiten zu entwickeln,
die bei Eingabe dieses Suchworts bei
Google möglichst weit vorne landen sollten. Die Ergebnisse dieses Wettbewerbs
Alle Crawler suchen zunächst nach der
Datei robots.txt. Sie gibt an, welche Aktionen auf der Seite erlaubt sind und welche Bereiche und Dateien indiziert werden sollen oder nicht.
Bei der robots.txt handelt es sich um
eine Textdatei, die im root-Verzeichnis
Ihrer Webseite stehen muss, um von den
Crawlern als solche erkannt und genutzt
zu werden. Ihr Aufbau ist recht einfach
gehalten: In der ersten Zeile geben Sie an,
für welche Crawler der Befehl gelten soll
– der zweiten Zeile geben Sie dann den
eigentlichen Befehl mit.
User-agent: *
Disallow: /
Mit dieser Befehlskombination verwehren
Sie allen Crawlern den Zugriff zu Ihren
Seiten. Damit bleibt Ihnen auch ein Platz
in den Ranglisten verwehrt.
Es gibt eine ganze Reihe von Crawlern,
die auf Ihrer Webseite unterwegs sein
können und dort nach Inhalten suchen.
Dies erkennen Sie an der Logdatei des
Webservers, etwa an Einträgen von googlebot.com, intomisearch.com oder seekbot.net. Eine mehr oder weniger vollständige Liste finden Sie etwa unter www.
robotstxt.org/wc/active.html.
Sie können die Befehle also entweder
individuell für bestimmte Suchmaschinen
oder generell für alle festlegen. Das Verzeichnis geben Sie über den Befehl „disallow“ mit. Hängen Sie keine weiteren Parameter an, darf die komplette Webseite
durchsucht werden. „Disallow: /“ unterbindet die Indizierung der kompletten
Seite. Den Ausschluss einzelner Verzeichnisse oder Dateien geben Sie jeweils in einer Befehlszeile an:
Disallow: /urlaubsbilder2006/
Disallow: /robots.txt
Die erste Zeile verhindert die Indizierung
des Verzeichnisses „urlaubsbilder2006“,
die zweite die Indizierung der Datei „robots.txt“. Ansonsten könnten Hacker aus
der Datei „robots.txt“ Rückschlüsse auf
Ihre Website und deren Aufbau ziehen.
Meta-Tags einsetzen
Eine zweite Methode, Webcrawler genauer
zu steuern, sind Meta-Tags auf HTMLSeiten. Dabei handelt es sich um Teile des
Kopfbereichs einer Webseite. Sie sagen
dem Crawler, ob er die Seite überhaupt
untersuchen darf – und falls ja, wie er
sich bei der Untersuchung zu verhalten
hat. Dabei gibt es die beiden Parameter
NOFOLLOW und NOINDEX.
<META NAME=³ROBOTS³
CONTENT=³NOINDEX, NOFOLLOW³>
Dieser Meta-Tag weist die Crawler darauf
hin, dass die Seite nicht indiziert werden
darf (NOINDEX) und die darauf enthaltenen Links nicht weiter verfolgt werden
sollen (NOFOLLOW). Sie können die Befehle auch einzeln verwenden, wenn Sie k
103
beispielsweise die Indizierung auf die aktuelle Seite beschränken möchten und die
enthaltenen Links außer Acht gelassen
werden sollen.
<META NAME=³ROBOTS³
CONTENT=³NOFOLLOW³>
Manche Suchmaschinen, beispielsweise
Google, erlauben auch eine direkte Ansprache des Crawlers. Ersetzen Sie dazu
einfach ROBOTS durch GOOGLEBOT –
und der Befehl in der „robots.txt“ gilt exklusiv für den Googlebot.
Weitere Details zum Umgang mit der
„robots.txt“ finden Sie beispielsweise
unter der Adresse www.robotstxt.org/wc/
meta-user.html.
Bei Suchmaschinen anmelden
Eine förmliche Anmeldung Ihrer Website
bei einer Suchmaschine ist in der Regel
nicht notwendig, da die Crawler früher
oder später über einen Link selbst den
Weg auf Ihre Homepage finden. Wenn
Ihnen dies jedoch zu lange dauert, können Sie Ihre Seite auch selbst bei den
Suchmaschinen anmelden. Jeder Suchmaschinenanbieter stellt dazu ein eigenes
Formular zur Verfügung:
Google: www.google.de/addurl/?hl=de&
continue=/addurl
Yahoo: http://de.search.yahoo.com/free
submit/submit.php
Microsoft Live Search: http://search.msn.
com/docs/submit.aspx
Nahezu jeder Suchmaschinenbetreiber
erlaubt Ihnen auch eine manuelle Anmeldung Ihrer Seite. Gehen Sie dazu einfach
auf die Hilfe-Seiten und suchen Sie nach
Informationen für Webmaster oder Seitenbesitzer.
An der Rangliste arbeiten
Haben Sie erst einmal die Crawler der
Suchmaschinen auf Ihre Website aufmerksam gemacht, gilt es im nächsten
Schritt, deren Position innerhalb der Ergebnisliste zu verbessern. Der Erfolg einer
Seite hängt nicht zuletzt von der Anzahl
der Besucher ab, wobei die meisten davon
bei einer weniger bekannten Seite über
die Suchmaschinen kommen. Die grundlegende Frage ist also nicht, wie Sie auf
einen der ersten Plätze der Suchmaschine
kommen, sondern mit welchen Suchbegriffen Sie dort an vorderster Stelle landen möchten.
Wenn Sie beispielsweise eine Fanseite
zu einem Fußballspieler aufbauen möchten, liegt eine Optimierung auf die Suchbegriffe „Fußball“, „Fußballer“ oder den
Namen des Vereins nahe. Nehmen wir als
Beispiel Oliver Kahn, den Torhüter des
FC Bayern München. Bei der Eingabe des
Begriffs „Fußball“ erhalten wir bei Google
etwa 93,9 Millionen Treffer, beim Begriff
„Fußballer“ immerhin noch 2,95 Millionen. Einen vorderen Ranglistenplatz in
diesem Umfeld zu erreichen ist schwierig.
Besser sieht es da aus, wenn Sie die Begriffe „Torhüter“ oder „Fußballtorhüter“
verwenden. Bei Letzterem liefert Google
nur noch rund 11 500 Treffer.
Werfen Sie als Nächstes einen Blick auf
die erfolgreichsten Seiten, die sich in die-
Poodle Predictor: Der Crawler-Simulator zeigt Ihnen, wie der Googlebot Ihre Webseite
wahrnimmt, und schlägt Ihnen Optimierungsmaßnahmen vor.
ser Rubrik tummeln. Auf Platz 1 befindet
sich die Seite von Wikipedia, auf Platz 2
folgt die Nachricht einer Schweizer Zeitung über einen Regionalligisten in der
Schweiz, wobei sich der Suchbegriff an
dieser Stelle nicht einmal im Artikel selbst
befand, sondern in der linken Navigationsleiste. Den ersten Treffer im Zusammenhang mit Oliver Kahn finden Sie auf
Platz 9 – vom Lichttechnischen Institut in
Karlsruhe; und auf Platz 10 dann endlich
ein Bericht über den Torhüter des FC
Bayern – auf der Seite von „Deutschland
Online“ (www.magazine-deutschland.
de/issue/Spieler_1-06.php).
Diese Seite nehmen wir etwas genauer
unter die Lupe, versuchen zu verstehen,
aufgrund welcher Maßnahmen die erfolgreiche Platzierung zustande gekommen ist, und überlegen, was Sie noch besser machen können. Sie sollen die Seite
nicht kopieren, aber als Orientierung ist
sie ein guter Einstiegspunkt.
Beginnen wir bei der URL: Der Treffer
verweist nicht direkt auf die Homepage,
sondern auf eine tiefere Ebene. In der
URL steht weder unser Suchbegriff „Fußballtorhüter“ noch „Oliver Kahn“.
Allerdings sind viele URLs mit „Oliver
Kahn“ bereits vergeben. Eine Kombination mit „Torhüter“ oder „Fanclub“ ist aber
beispielsweise noch frei. Damit haben Sie
gleich mehrere Schlüsselbegriffe in die
URL integriert.
Der Titel der Seite lautet „Deutschland
Online“ – auch an dieser Stelle haben Sie
also für Ihre eigene Seite noch ein wenig
Spielraum, weitere Begriffe zu integrieren, beispielsweise „Oliver Kahn“, „Fußballtorhüter“ oder „Welt-Torhüter“.
Nun versuchen wir herauszufinden,
wie die Suchmaschinen die Seite wahrnehmen – das hilft bei den nächsten Optimierungsschritten. Dazu betrachten wir
die Seite mit zwei unterschiedlichen Tools:
einem Crawler-Simulator, etwa Poodle
Predictor (www.gritechnologies.com/
tools/spider.go?q=), oder dem Programm
IBP 9.2 (www.axandra.de/web-promoti
on-tool/start-download.htm), und einem
Werkzeug zur Ermittlung der Dichte der
Schlüsselbegriffe, etwa Analogs Keyword
Extractor (www.analogx.com/contents/
download/network/keyex.htm), oder die
Online-Analyse von SeoBench (http://
seobench.com/keyword-density-ana
lyzer/index.php).
Online-Analyse:
Mit einem einfachen Tool ermitteln Sie die
Häufigkeit
des Auftretens
bestimmter Keywords auf
einer Website.
Poodle Predictor zeigt Ihnen in der
Sicht des Googlebot, dass es weniger auf
die Farben und das Layout der Seite ankommt als auf die Verwendung von
Schlüssel-Tags. „Deutschland Online“
verzichtet auf die Verwendung von Header-Tags (<h1>…<h6>) ebenso wie auf
den ALT-Tag bei Bildern und arbeitet
überdies mit einem nur wenig aussagekräftigen Titel (mehr zu den HTML-Elementen <h> und ALT lesen Sie in den
PDF-Artikeln auf der Heft-CD).
Die Dichte des Schlüsselbegriffs „Torhüter“ ist mit nur drei Treffern ebenfalls
gering. Selbst „Oliver Kahn“ als Begriff
kommt lediglich dreimal vor. Gerade der
obere Bereich der Seite sollte aber eine
hohe Dichte der Schlüsselbegriffe aufweisen. Welche Maßnahmen unterstützen Sie
bei diesem Vorhaben?
Platzieren Sie, wenn Ihr Seitenlayout
dies zulässt, am besten eine Tabelle mit
einem Hintergrundbild in dem oberen
Bereich und verwenden Sie zusätzlich in
dieser Tabellenzelle eine <h1>-Überschrift. Beschränken Sie die Überschrift
und den ALT-Tag des Bildes auf die
Schlüsselbegriffe, die Sie ausgewählt haben. Im Beispiel von „Deutschland Online“ sind zwar ein Bild und auch „Oliver
Kahn“ als Überschrift zu sehen, das Bild
hat aber weder einen ALT-Tag, noch ist
der Name als Header gekennzeichnet
(<h1>-Tag).
Mit diesen Optimierungen haben Sie
bereits eine gute Dichte der Schlüsselbegriffe erreicht. Sie sollten – abhängig von
der Länge der Seite – diese noch ein- bis
zweimal verwenden, aber nicht öfter.
Denn eine Überoptimierung fällt den
Crawlern auf und führt zu Punktabzügen
in der Bewertung. Im vorletzten oder letz-
ten Satz sollten die Schlüsselbegriffe noch
einmal vorkommen und die Seite inhaltlich abschließen.
So hilft Ihnen Google
Interessant ist auch, wie der Googlebot
eine Webseite untersucht. Als Erstes betrachtet er den Titel und die Grafik auf
Ihrer Seite. Als Nächstes untersucht der
Googlebot die Seite von links oben nach
rechts unten. Wenn Sie Ihre Navigation
also auf der linken Seite platziert haben,
geht der Googlebot diese zuerst durch,
bevor er sich um die Inhalte der Seite
kümmert.
Damit Sie beim Verbessern Ihres PageRankings nicht ganz im Dunkeln tappen,
bietet Google einige Tools und Hilfestellung bei der Optimierung Ihrer Website
an. Sie finden sie unter www.google.de/
intl/de/webmasters/. Das wichtigste Programm ist Google Sitemap, mit dem Sie
Google eine Beschreibung Ihrer Webpräsenz und einige Zusatzinformationen liefern. Google Sitemap bietet Ihnen dafür
Statistiken über Ihre Webseite an, zum
Beispiel, wo es Probleme bei der Indizie-
rung gegeben hat und welche Suchanfragen am häufigsten zu Ihrer Internetpräsenz geführt haben. Melden Sie sich dazu
einfach bei Google Sitemaps an (www.
google.com/webmasters/sitemaps/).
Die Sitemap im Google-konformen
Format legen Sie am besten mithilfe eines
Tools an, etwa dem Online Generator unter www.xml-sitemaps.com/index.php.
Falls Sie einen eigenen Server und eine
größere Anzahl von Webseiten besitzen,
lohnt sich die Installation des GoogleTools ebenfalls. Details dazu bekommen
Sie unter der Adresse www.google.com/
webmasters/sitemaps/docs/de/sitemapgenerator.html.
Fügen Sie danach Ihre Website Ihrem
Google-Sitemap-Konto hinzu und laden
Sie die Sitemap hoch. Sie muss sich auf
dem obersten Verzeichnis der Website befinden, zu der Sie die Sitemap angelegt
haben, beispielsweise „http/www.meinserver.de/sitemap.xml“.
Es wird nun noch ein paar Tage dauern, bis der Googlebot Ihre Seite besucht.
Anschließend bekommen Sie regelmäßig
aktuelle Statistiken geliefert.
Fazit
Einen guten Platz in der Trefferliste der
Suchmaschinen zu ergattern ist nicht besonders schwer. Es kommt lediglich auf
die richtige Strategie an – angefangen von
der Art der Seite über die Wahl der Schlüsselbegriffe bis hin zu den Kleinigkeiten,
etwa den ALT-Tags eines Bildes oder dem
Einsatz von Header-Tags.
Mit ein wenig Geduld und ständiger
Optimierung wird auch Ihre Website
somit im Laufe der Zeit immer höhere
Page-Ranks erreichen können.
Andreas Hitzig
PROFI-TIPP
Die Grenzen der Website-Optimierung
Wenn Sie es mit dem Optimieren des PageRanks Ihrer Homepage übertrieben haben,
kann es vorkommen, dass Ihre Website aus
dem Index gestrichen wird. Das bedeutet
eine Auszeit von drei bis sechs Monaten, bis
wieder ein Crawler einer Suchmaschine vorbeikommt. Sind dann die gleichen Manipulationsversuche immer noch erkennbar, bleibt
die Homepage weiter unberücksichtigt.
Sie sollten also bei Ihrer Optimierungsstrategie umsichtig vorgehen. Google, Microsoft
und Yahoo sagen Ihnen auf ihren Hilfe-Seiten genau, was erlaubt ist und was zum Ausschluss führen kann:
Google:
www.google.com/support/web
masters/bin/answer.py?answer=35769
Yahoo: http://eur.help.yahoo.com/help/
de/ysearch/deletions/index.html
Microsoft Live Search: http://help.live.
com/help.aspx?project=wl_searchv1&
market=de-de, Rubrik „Windows Live Search
Site Owner“
105
ADSENSE & CO.
Partnerprogramme nutzen
Sie müssen nicht unbedingt einen Onlineshop betreiben, um mit Ihrer Homepage Geld zu
verdienen. Viele große Websites bieten interessante Partnerprogramme an, die Sie am Umsatz
der Big Player beteiligen. CHIP zeigt Ihnen, wo sich der Einstieg für Sie lohnen kann.
,Erfolgreiche Websites
Zur Vermarktung einer Homepage benötigen Sie ein Thema mit werbewirksamem
Hintergrund. Dabei lohnt sich ein Blick
auf erfolgreiche deutsche Websites und
deren Werbekonzepte.
Spiegel.de
Auf der Einstiegsseite von Spiegel.de finden Sie auf den ersten Blick keine Werbung. Weiter unten – etwa auf der Höhe
der Rubrik „Netzwelt“ – steht eine Anzeige von eBay.
Auf der nächsten Ebene – den Artikeln in der „Netzwelt“ – geht es dann
richtig los. An dieser Stelle sind nicht weniger als fünf Werbebanner zu finden.
Den oberen und rechten Rand belegt eine
Anzeige von O2, und in der oberen Hälfte
sind drei weitere Anzeigen von Intel,
Microsoft und Lycos untergebracht. Kurz
vor dem Ende des Artikels gibt es dann
wieder eine Anzeige von eBay.
Sport1.de
Die Einstiegsseite von Sport1.de wirkt im
Vergleich zu Spiegel.de wie ein bunter
Jahrmarkt, nicht zuletzt wegen der Anzeige von Axa. Aber auch sonst sind an dieser
Stelle einige Kooperationen und Werbeangebote zu finden: Anzeigen von bwin
und im unteren Teil der Seite eine Reihe
von Kooperationen, beispielsweise mit
Napster oder billiger.de.
Das gleiche Bild zeigt sich auf den Artikelseiten in den einzelnen Rubriken. Am
D
er häufigste Einstiegspunkt ins Internet sind die Suchmaschinen –
allen voran Google. Die erste Voraussetzung fürs Geldverdienen im Internet ist also ein guter Ranglistenplatz bei
Google. Wie Sie den erreichen, erfahren
Sie im Artikel ab s102.
Finden nun mehr Besucher Ihre Seite,
sollten Sie dafür sorgen, dass sie regelmäßig wiederkommen. Das funktioniert jedoch nur mit aktuellen Inhalten und einer
klaren Zielgruppe. Dann können Sie auch
über eine Vermarktung nachdenken.
Es gibt unterschiedliche Statistiken,
deren Angaben zufolge zwischen 0,5 und
1 Prozent der Besucher einer Webseite eine
Produktinformation anklicken. Nach dieser Rechnung benötigen Sie folglich für
einen Werbeklick zwischen 100 und 200
Seitenaufrufe.
oberen und am rechten Rand stehen Werbebanner, im Textbereich finden Sie Anzeigen von Kooperationspartnern.
GMX.de
Auf der Einstiegsseite in das GMX-Portal
ist die Werbung nicht auf den ersten Blick
sichtbar. In der linken Navigationsleiste
gibt es dafür den Bereich „Shopping“ und
in der rechten unteren Hälfte einige
Unterrubriken aus diesem Bereich – vor
allem Preisvergleiche für verschiedene
Produkte und „Best Price“-Aktionen mit
Kooperationspartnern.
Die Einstiegsseite ist frei von Werbebannern, anders dagegen die Artikel aus
dem Nachrichtenbereich. Dort finden Sie
sowohl am oberen als auch am rechten
Rand Werbebanner. Innerhalb des Textes
stehen je nach Länge noch einmal ein bis
zwei Werbeanzeigen.
CHIP.de
CHIP.de besitzt mehrere Werbeflächen –
zum einen die beiden Randbereiche, in
denen sich eine Reihe von Sponsorenlinks und Werbeteasern befinden, zum
anderen im eigentlichen Inhaltsbereich.
Dort finden Sie oben einige Google-AdSense-Anzeigen.
Im Bereich weiter unten hat CHIP statische Werbe-Informationen eingebunden: eine Linksammlung zu den Kooperationspartnern sowie das „CHIP Partner
Infoboard“.
Innerhalb der Artikelseiten bleiben die
Inhalte des linken und rechten Rands nahezu unverändert, im mittleren Inhaltsbereich finden Sie themenbezogene Anzeigen – wieder über Google AdSense sowie ergänzende Produktvorschläge.
,Partnerprogramme
Nachdem Sie nun bei den Big Playern gesehen haben, wie diese ihre Webpräsenz
vermarkten und wo die Werbebanner bevorzugt stehen, sollten Sie die Vermarktung Ihres eigenen Online-Auftritts planen. Dazu gibt es drei Optionen: Sie melden sich bei einem Partnerprogramm an,
Sie schließen individuelle Verträge mit
Unternehmen, oder Sie werfen einen
Blick auf Google AdSense.
SPIEGEL
Werbung im Beitrag: Innerhalb der Artikel
von Spiegel Online sind jeweils gut
und gerne vier bis fünf Anzeigen platziert.
SPORT 1
Werbung im Portal: Schon der Eingangsbereich von Sport1.de ist von Werbung und
Links zu Partnern dominiert.
GMX
Werbung im Randbereich: Innerhalb der
Artikel finden Sie bei GMX hauptsächlich
Anzeigen in den Randbereichen.
Das Konzept der Partnerprogramm(Affiliate-)Anbieter ist einfach: Sie registrieren sich und bewerben sich um die
Teilnahme am Partnernetzwerk. Das Partnernetzwerk hat bereits Werbeverträge
mit Firmen abgeschlossen. Dabei ist auch
festgelegt, wie viel Provision der Betreiber
einer Website bekommt und unter welchen
Bedingungen er darauf Anspruch hat.
Die drei häufigsten Modelle für die
Vergütung der Teilnehmer an Partnerprogrammen sind „Pay per Click“, „Pay per
Lead“ and „Pay per Sale“.
Im ersten Modell bekommen Sie Geld,
sobald die Anzeige angeklickt wurde.
Durch aufwändige Mechanismen, etwa
IP-Sperren für Mehrfachklicks, haben
sich die Anbieter inzwischen gegen Missbrauch abgesichert. Dieses Modell kommt
hauptsächlich bei kurzfristigen Werbemaßnahmen mit großer Reichweite zum
Einsatz. Die möglichen Einnahmen sind
allerdings sehr gering – fünf bis zehn Cent
pro Klick sind schon eine positive Ausnahme.
Mehr Geld zu verdienen gibt es bei den
beiden Modellen „Pay per Lead“ und „Pay
per Sale“. Beim ersten wird für die Kontaktaufnahme durch den Kunden bezahlt,
häufig bei beratungsintensiven Produkten
wie beispielsweise einer Versicherung. Je
nach Programm zahlen die Anbieter an
dieser Stelle zwischen 50 Cent und mehreren Euro pro Kontaktaufnahme.
Noch lukrativer ist in der Regel das
Modell „Pay per Sale“, falls eine umsatzbasierende Provision gezahlt wird. Drei
bis fünf Prozent des Verkaufspreises sind
an dieser Stelle ein üblicher Wert. Unter
Umständen bieten die Werbepartner aber
auch einen Festbetrag pro Verkaufsvermittlung an.
Eine Reihe von PartnerprogrammAnbietern tritt in Deutschland als Vermittler zwischen den Firmen und potenziellen Werbeträgern auf. Bekannte Anbieter für den deutschsprachigen Markt
sind etwa Affili.net, Zanox und Adbutler.
Wir stellen Ihnen diese drei Partnerprogramme kurz vor und zeigen Ihnen,
welche Firmen sie vermarkten. Am Beispiel von Affili.net erfahren Sie, wie eine
Registrierung in der Praxis abläuft, was
Sie bei der Bewerbung beachten sollten
und wie Sie die Werbe-Informationen am
besten einbinden.
Adbutler
Das Werbe-Netzwerk hält Kontakte zu
rund 1000 Anbietern von Werbeaktionen
bereit. Bei Adbutler (www.adbutler.de)
melden Sie Ihre Homepage online an –
mit Kontakt- und Bankdaten. Die Freigabe der Registrierung dauert etwa eine
halbe Stunde.
Zur Auswahl stehen zahlreiche bekannte Werbekunden, etwa AOL, Sixt
oder Tipp24. Eine komplette Übersicht
finden Sie auf der Adbutler-Homepage.
Bereits vor der Registrierung zur Kampagne bekommen Sie eine Übersicht über
die Provisionen, den Bearbeitungszeitraum der Zahlung sowie die Zielgruppen. k
107
Damit wissen Sie von vornherein, ob eine
Bewerbung für diese Aktionen erfolgversprechend ist.
Bei den meisten Angeboten müssen Sie
sich somit zunächst einmal bewerben und
werden erst nach Prüfung Ihrer Angaben
freigeschaltet. Danach stehen Ihnen die
entsprechenden Werbemittel zur Verfügung – gegliedert nach Bannern, FlashApplikationen und Textlinks.
Zanox
Nach der Registrierung bei Zanox und
einigen Angaben über Ihre Homepage
wird Ihr Account ohne weitere Verzögerung freigeschaltet.
Der Affiliate-Anbieter hat zwar mit
rund 500 Programmen nicht so viel Auswahl wie Adbutler und Affili.net. Dennoch
sind bei Zanox auch einige bekannte Unternehmen, beispielsweise T-Com, HLX
oder Tchibo, als Kunden anzutreffen.
Die Registrierung für ein Programm
hängt von den Anforderungen des Werbepartners ab. Zum Teil verlangen die Unternehmen genaue Angaben über die Inhalte Ihrer Seiten und die Bestätigung,
dass Sie Inhalte, die sich nicht in Übereinstimmung mit den Unternehmensrichtlinien befinden, nicht publizieren.
Zanox hält zu den registrierten Aktionen eine Übersicht sowie eine detaillierte Statistik über die Umsatzzahlen bereit.
nerprogramme lassen sich zum Teil direkt
freischalten, bei anderen ist zuvor noch
eine individuelle Prüfung Ihrer Webpräsenz erforderlich.
Die Partnerprogramme von 1&1 beispielsweise standen sofort zur Verfügung.
Nach der Zustimmung zu den Allgemeinen Geschäftsbedingungen (AGB) können Sie mit der Vermarktung Ihrer Homepage beginnen. Sie bekommen nun einige
Banner als Werbematerial zur Verfügung
gestellt, die Sie ganz einfach per Copy &
Paste in Ihre Webseite einbinden können.
Dazu kopieren Sie das Codefragment und
fügen es auf Ihrer Seite ein. Wenn Sie ein
Content-Management-System (CMS) nutzen, sollten Sie genau auf die Informationen achten. In der Regel genügt an dieser Stelle die Übernahme der Adresse des
Links zum Werbekunden und der Link
zum Bild.
Die Affiliate-Programme zeigen auch
gleich die Provision und das Provisionsmodell an. Eine Übersicht über die erzielten Einnahmen bekommen Sie im Be-
Affili.net
Affili.net hält insgesamt rund 800 Partnerprogramme aus unterschiedlichen Bereichen bereit – vom Internetprovider bis
zum Onlineshop für Blumen. Teilnehmen
kann jeder, der eine Homepage und ein
Bankkonto besitzt.
Die Registrierung bei Affili.net (www.
affili.net) ist denkbar einfach. In der Rubrik „Publisher“ finden Sie alle notwendigen Informationen. Nach der Eingabe
Ihrer Kontaktdaten müssen Sie im nächsten Schritt Ihre Webseite klassifizieren
und kurz beschreiben.
Im folgenden Bildschirm geben Sie
Ihre Bankverbindung ein, bevor Sie die
Registrierung mit der Übersicht Ihrer Daten und der Vergabe eines individuellen
Passworts abschließen.
Nach der Mailbestätigung können Sie
auch schon loslegen. Die etwa 800 Part-
CHIP
Links & rechts: CHIP Online nutzt den linken und rechten Rand für Werbung und
integriert auch Google-AdSense-Anzeigen.
ADBUTLER
Partnerliste: Der Werbevermarkter Adbutler
bietet eine gut strukturierte Oberfläche
zur Verwaltung der Partnerschaften an.
reich „Statistiken“. An dieser Stelle finden
Sie alle Umsätze und können sie nach
verschiedenen Kriterien filtern.
,Individuelle Verträge
Viele Firmen bieten auch direkte Partnerschaften mit den gleichen Vermarktungsmodellen an. Wenn Sie sich dafür
entscheiden, lohnt ein Blick auf die Portale Partnerprogramme (www.partner
programme.de) und PartnerprogrammIndex (www.partnerprogramm-index.
de). Dort finden Sie eine recht gute Übersicht aktueller Werbeaktionen von Firmen, nach Branchen gruppiert.
Amazon
Ein interessanter Kandidat in Sachen direkte Partnerschaft ist der Onlinehändler
Amazon (www.amazon.de). Das Partnerprogramm, das Amazon entwickelt hat,
lässt Sie sämtliche Produkte aus dem Onlineshop verkaufen, ob es sich dabei um
Bücher, CDs, DVDs oder sogar Haushaltsgeräte wie beispielsweise Waschmaschinen handelt.
Der Einstieg ist denkbar einfach: Sie
registrieren sich unter http://partnernet.
amazon.de, bestätigen die erhaltene EMail und können sofort mit dem Generieren von Links und Anzeigen beginnen.
Amazon bietet Ihnen online eine tagesgenaue Übersicht, welche Produkte über
Ihre Links verkauft wurden. Abhängig
vom Produkt zahlt Ihnen der Onlinehändler anschließend bis zu zehn Prozent
Werbekostenerstattung auf die getätigten
Nettoerlöse.
Amazon unterstützt Sie nach dem Einloggen bei der Generierung der Werbelinks. In der Rubrik „Link-Generator“
haben Sie die Auswahl zwischen verschiedenen Formaten – vom Einzellink für ein
spezielles Produkt bis zur Produktsuche
über ein Suchfeld. Die vermarkteten Produkte sollten jedoch sinnvollerweise im
direkten Zusammenhang mit den Inhalten Ihrer Webseite stehen. Die wenigsten
Besucher werden sich beispielsweise beim
Besuch einer „Michael Schumacher Fanpage“ für ein Buch über Papst Benedikt
XVI. interessieren.
Neu bei Amazon sind die Self-Optimizing-Links, eine Antwort auf Googles
AdSense. Damit platzieren Sie eine Linkbox auf Ihrer Webseite, deren Produktvorschläge sich an den Inhalten der Seite
orientieren.
Amazon aStore
Ebenfalls neu ist die Funktion aStore.
Dahinter verbirgt sich ein eigener Shop,
den Sie unter Ihrer URL mit einem eigenen Produktspektrum betreiben. In nur
fünf Schritten haben Sie Ihren Minishop
aufgebaut:
1. Wählen Sie Ihre Top-9-Produkte aus
dem Produktkatalog aus
2. Definieren Sie die Kategorien von
Produkten, die über die globale Suche
und beim Stöbern verfügbar sein sollen.
3. Passen Sie das Aussehen des Shops
an Ihre Webseite an: Farben, Schriftarten,
Logo und Titel können Sie individuell
definieren.
4. Vor der Veröffentlichung legen Sie
noch das Aussehen der Sidebar und die
Inhalte fest.
5. Zur Verlinkung Ihres Shops mit
Ihrer Homepage bietet Amazon mehrere
Optionen an und beschreibt diese detailliert. Wählen Sie an dieser Stelle die für
Sie passende Linkoption aus, und Sie erhalten den korrespondierenden Link.
In kurzer Zeit haben Sie so Ihren eigenen Webshop zur Integration in Ihre
Homepage aufgebaut.
Programmierern stellt Amazon diverse
Webservices und Programmierschnittstellen zur Verfügung, über die beispielsweise Produktempfehlungen dynamisch
angelegt und in Shopfunktionen Ihrer
Webseite integriert werden können.
,Google AdSense
Geld verdienen mit Ihrer Homepage können Sie aber auch mit Google AdSense.
Dieser Dienst baut themenbezogene Textanzeigen in Ihre Webseite ein. Nach der
Registrierung und der Integration von AdSense liest ein spezieller Googlebot beim
ersten Aufruf die Inhalte der Seite ein und
liefert thematisch passende Anzeigen.
Die Anmeldung zum Programm erfolgt über die Startseite von Google AdSense (www.google.de/adsense). Sie sollten sich vor der Registrierung die Zeit
nehmen, einen Blick in die Teilnahmebe-
ZANOX
Bekannte Namen: Zanox bietet rund 500
Werbe-Partnerschaften an, um die Sie sich
bewerben können.
Mithilfe des Google AdSense Publisher
passen Sie die Einblendungen an das Aussehen Ihrer Webseite an. Google liefert
Ihnen als Ergebnis Ihrer Arbeit den passenden Code, den Sie nur noch in Ihre
Homepage integrieren müssen.
Die Genauigkeit der Treffer sollte sich
nach kurzer Zeit einstellen. Es kann allerdings auch ein paar Tage dauern, da der
Googlebot zuvor erst wieder Ihre Seiten
besuchen muss.
Das Vergütungsmodell von AdSense
AFFILI.NET
Format-Vielfalt: Je nach Anbieter – im
Bild GMX – stehen Ihnen unterschiedliche
Werbematerialien zur Verfügung.
In Sachen Vergütung lässt sich Google
nicht allzu tief in die Karten schauen. Als
Grundlage gibt Google auf seiner Website
zwei unterschiedliche Optionen an, mit
denen Sie von AdSense profitieren können: entweder mit Cost-per-Click (CPC)
oder mit Cost-per-1000-Impressions
(CPM). Beim ersten Modell bekommen
Sie eine Provision gutgeschrieben, sobald
ein Kunde die Anzeige anklickt, im zweiten Fall, wenn die Anzeige auf Ihren Seiten
eingeblendet wird.
Das Feedback von AdSense
AMAZON
Minishop: Mit ein paar Klicks stellen
Sie sich dank Amazons aShop einen eigenen
Minishop zusammen.
dingungen von AdSense (https://www.
google.de/adsense/policies) zu werfen.
Google prüft die Webseiten – zumindest
stichprobenartig –, bevor eine Registrierung freigegeben wird. Halbfertige Seiten
und solche, die nicht den Vorstellungen
entsprechen, bekommen keine Zulassung.
Die Prüfung dauert nach Google-Angaben rund zwei bis drei Tage.
Haben Sie diese Hürde genommen,
sollten Sie sich mit den Anzeigenformaten
vertraut machen, die Google anbietet,
und einen passenden Platz auf Ihrer Webseite dafür suchen.
Definieren Sie zunächst die Formate
der Einblendungen für Ihre Homepage.
Den genauen Anteil der Werbeeinnahmen, den Google an Sie weitergibt, teilt
Ihnen der Suchmaschinenbetreiber allerdings nicht mit. Zumindest können Sie
aber jederzeit in der Rubrik „Berichte“ die
Gesamtanzahl von Seiten- und Anzeigenblock-Impressions, die Anzeigenklicks,
die Klickrate und Ihren Kontostand in
Augenschein nehmen.
Anhand dieser Berichte lässt sich auch
die Effizienz eines Bannerformats auf
einer Seite überprüfen: Überlegen Sie sich
zu Beginn der Kooperation mit AdSense,
mit welchem Anzeigenformat Sie starten
möchten. Überwachen Sie diese Maßnahme über einen bestimmten Zeitraum hinweg und merken Sie sich die erzielten Ergebnisse.
Sind Sie mit den Resultaten nicht zufrieden, ändern Sie das Format der Anzeige. Lassen Sie nun die Anzeige im neuen
Format über den gleichen Zeitraum hinweg laufen und vergleichen Sie anschließend die Ergebnisse der beiden Anzeigen.
Basierend auf den Ergebnissen sollten Sie
an der erfolgreicheren Anzeige weitere
Optimierungsmaßnahmen vornehmen.
Andreas Hitzig
109
OSCOMMERCE NUTZEN
Webshop aufbauen
Das Internet hat sich in kürzester Zeit zu einem der wichtigsten Vertriebswege entwickelt.
Mit einem eigenen Webshop hat jeder die Möglichkeit, einen breiten Kundenkreis zu erreichen.
CHIP zeigt Ihnen, wie Sie den kostenlosen Onlineshop osCommerce einrichten.
AUF EINEN
EINENBLICK
BLICK
AUF
, Geld verdienen per Webshop
So meistern Sie die Installation
s110
s112
, Alle Tools auf CD
OSCOMMERCE: Kostenloses OpenSource-Webshop-System hCMS
nen und kostet Sie keinen Cent. Leistungsfähig und trotzdem kostenlos – wo
ist denn da der Haken?
Tatsächlich ist die Installation nicht
unbedingt trivial zu nennen – auch wenn
der Einleitungstext eine schnelle, leichte
und umfassende Installation verspricht.
Wer keinerlei Erfahrung im Umgang mit
FTP, PHP und MySQL hat, gerät bei den
ersten Schritten mit osCommerce schnell
ins Schwitzen.
Doch das soll Sie nicht davon abhalten, sich mit osCommerce zu beschäftigen – schließlich geht Ihnen dieser Workshop bei der Installation zur Hand. Und
wenn erst einmal die Grundinstallation
läuft, bereiten die Feineinstellungen und
der Wareneingang auch keine großen
Schwierigkeiten mehr.
1
osCommerce installieren
Je nachdem, ob die ersten Schritte mit
osCommerce lokal oder gleich auf einem
Webserver ablaufen sollen, kopieren Sie
sämtliche Dateien des entpackten Archiv-
KNOW-HOW
Aktuelle Version
Dieser Workshop basiert auf der osCommerce-Version 2.2ms2. Als Installationsvoraussetzungen werden PHP3 oder 4 sowie MySQL genannt – CHIP hat den Shop
jeweils unter PHP 5.1.4 und MySQL 5.0.x
getestet. Einen Ausblick auf die Zukunft
von osCommerce bietet die Roadmap zur
Version 3 unter www.oscommerce.com/
community/roadmap.
W
enn Sie mit einem Onlineshop im Internet Geld verdienen möchten, muss es ja nicht
gleich die große Profi-Niederlassung im
Internet sein, mit allen nötigen und unnötigen Features – und vor allem mit gepfefferten Lizenzgebühren.
Die Open-Source-Software osCommerce bietet alle wichtigen Shopfunktio-
ordners „oscommerce-2.2ms2-xxx.zip“
in das Verzeichnis „htdocs“ beziehungsweise per FTP-Upload auf den Server
(siehe dazu auch den Profi-Tipp unten
auf dieser Seite).
Mit einem einfachen Aufruf des „catalog“-Verzeichnisses im Webbrowser lösen
Sie den Installationsprozess aus. Doch
während bei einem lokalen Server im eigenen Büro oder bei einem Provider das Installationsskript bereits einen Augenblick
später mit einem Begrüßungsbildschirm
startet, werden die Nutzer von gemietetem Webspace oft mit einer Fehlermeldung wie dieser erschreckt: „Server Requirement Error: register_globals is
disabled in your PHP configuration. This
can be enabled in your php.ini configuration file or in the .htaccess file in your catalog directory.“
Streng genommen handelt es sich dabei gar nicht um einen Fehler, sondern
um eine Sicherheitseinstellung, die von
den großen Providern relativ konsequent
umgesetzt und auch von den PHP-Entwicklern empfohlen wird. Falls Ihnen diese Meldung begegnet, sehen Sie sich den
Profi-Tipp auf s113 an.
Der folgende erste Installationsbildschirm erfordert lediglich das Abhaken
zweier Checkboxen; danach verlassen Sie
ihn mit „Continue“. Doch bereits der
nächste Schritt verlangt nach einigen konkreten Angaben. Die finden Sie entweder
auf der Rechnung Ihres Providers oder im
Konfigurationsmenü für den Webspace
beziehungsweise Server.
Database Server: Bei einem Server reicht
an dieser Stelle der Eintrag „localhost“.
Bei gemietetem Webspace müssen Sie in
der Regel einen gesonderten Server eintragen, bei Strato etwa rdbms.strato.de.
Username: Bei einem Server reicht die
Angabe „root“. Bei einem Provider ist dagegen der vorgegebene Benutzername erforderlich (siehe Rechnung oder Konfigurationstool).
Password: Bei einem Server lassen Sie das
Feld leer (oder legen es selbst fest). Bei
einem Provider tragen Sie das Passwort
ein, das auf der Rechnung genannt oder
im Konfigurationstool eingetragen wird.
Database Name: Bei einem Server ist er
frei wählbar. Bei einem Provider ist der
Name meist vorgegeben, etwa „DBxxx“.
Bei den letzten beiden Einträgen dieses
Eingabefensters sollten Sie den Empfeh-
Los geht’s: Das
Installationsskript
von osCommerce bietet
wahlweise eine Komplettinstallation oder ein
Upgrade der Vorgängerversion an.
1
lungen aus dem Infotext folgen („Persistent Connections“, „Session Storage“).
Erhalten Sie nach einem Klick auf „Continue“ den Hinweis „A test connection made to the database was successful“, haben
Sie bereits eine Klippe der Installation erfolgreich gemeistert.
Das nächste Installationsfenster ist bereits komplett ausgefüllt. Diese Daten hat
osCommerce aus den vorherigen Angaben generiert – Sie sollten sie nur ändern,
wenn Sie genau wissen, was Sie tun.
Plötzlich befinden Sie sich – scheinbar
– wieder beim zweiten Installationsschritt
und sollen Benutzerdaten eingeben. In
Wirklichkeit können Sie nun einen zweiten, eingeschränkten Benutzer eintragen –
oder es bleiben lassen. Gerade bei diesem
Menüpunkt empfiehlt es sich, alle InfoTexte und Hinweisfenster genau zu lesen
und nicht einfach wegzuklicken.
Nun haben Sie die Installation auf dem
Server erfolgreich absolviert: Wenn anschließend ein unspektakuläres Fenster k
PROFI-TIPP
Den Webshop online einrichten
Wenn Sie noch auf der Suche nach einem geeigneten Shopsystem sind und osCommerce
erst einmal nur auf seine Features und die
Eignung für Ihren Shop testen möchten, sollten Sie das Programm zunächst lokal installieren. Der Vorteil: Sie können Dateien direkt
verschieben und haben schnellen Zugriff auf
Ihre Daten. Außerdem müssen Sie sich nicht
gleich mit Spezifika der verschiedenen Webspace-Anbieter herumschlagen und können
gerade bei der Installation mehrerer Programme oder Erweiterungen besser experimentieren. Voraussetzung dafür ist allerdings ein lokaler Webserver mit PHP- und
MySQL-Unterstützung. Wem die manuelle
Installation von Apache & Co. zu mühsam ist,
der kann auf das XAMPP-Paket (auf der HeftCD) zurückgreifen: Es enthält nicht nur alle
notwendigen Programme (Server, PHP, MySQL), sondern installiert sie auch auf Knopfdruck für ein reibungsloses Zusammenspiel.
Online arbeiten: Haben Sie sich dagegen
schon für den Einsatz von osCommerce entschieden, sollten Sie lieber gleich online auf
Ihrem Webspace arbeiten, anstatt eine lokale Installation später aufwändig ins Web zu
transferieren. Der Upload von gut 3,5 MByte
erschreckt heute niemanden mehr – selbst
mit ISDN ist das noch im Bereich des Erträglichen. Sie sollten anschließend aber ein wenig Zeit für die Konfiguration und die Anpassungen von osCommerce einkalkulieren.
Installationsskripte: Manche Provider bieten sogar Installationsskripte oder einen Installationsservice für beliebte Programme
an, sodass der Upload und die individuelle
Anpassung entfallen. Andererseits kann es
bei den großen Providern Probleme mit den
Sicherheitseinstellungen geben. Wenn Sie
Webspace speziell für osCommerce suchen,
könnten diese Aspekte ein wichtiges Kriterium bei der Wahl des Providers sein.
Ideal zum Testen: XAMPP ist das „All-inone-Paket“ für einen lokalen Webserver.
111
Ansichtssache: Das
Erscheinungsbild
von osCommerce
können Sie über
Cascading Style
Sheets (CSS) festlegen.
erscheint, in dem es nur die beiden Schaltflächen „Catalog“ und „Administration
Tool“ gibt, folgen die Feineinstellungen
im Shop sowie das Einstellen der angebotenen Produkte.
2
4
osCommerce konfigurieren
Wie die Statusleiste am linken Bildschirmrand zeigt, wurden bei der Installation bereits einige Beispieldaten angelegt. So
können Sie osCommerce gleich ein wenig
ausprobieren und sich für Ihre eigene Daten an diesen Vorgaben orientieren.
Hinter den spielerisch anmutenden
Icons verbergen sich jedoch alle für einen
Onlineshop erforderlichen Funktionen.
Da Sie als Shopbetreiber später häufig auf
diese Seite zugreifen müssen, sollten Sie
ein „Bookmark“ (Lesezeichen) dafür anlegen.
Erfreulicherweise stehen bereits bei
der Grundinstallation drei Sprachen zur
Verfügung, sodass sich die Oberfläche von
Anfang an weitgehend in deutscher Sprache präsentiert. Lediglich in einigen Untermenüs oder Plugins müssen Sie mit
fremdsprachigem Vokabular rechnen. Darüber hinaus können Sie weitere Sprachdateien installieren oder selbst welche anlegen oder überarbeiten.
Auch wenn Ihr Webshop jetzt schon
reibungslos läuft, sollten Sie noch in aller
Ruhe durch die Konfigurationseinstellungen gehen. Dort haben Sie die Möglichkeit, Standardwerte anzupassen. Ein ty-
pisches Beispiel zeigt der Profi-Tipp im
Kasten unten.
3
Sobald Sie nach Beendigung der Grundinstallation auf die Schaltfläche „Catalog“
klicken, landen Sie in Ihrem Webshop.
Mithilfe der Beispieldaten können Sie sich
sofort einen ersten Eindruck von seiner
Funktionsweise verschaffen: Rubriken werden angezeigt, es gibt eine Suchfunktion,
hervorgehobene Sonderangebote, einen
Bewertungsbereich – kaum ein Wunsch
bleibt offen.
osCommerce kann nicht nur mit mehreren Sprachen, sondern auch mit unterschiedlichen Steuerklassen und Währungen umgehen. Dabei lassen sich die Wechselkurse nicht nur automatisch aktualisieren, sie wirken sich auch unmittelbar auf
die Endpreise aus. Ehe Sie also umfangreiche Produktlisten eingeben, sollten Sie
zunächst doch einmal den Bereichen
„Land/Steuer“ sowie „Sprachen/Währungen“ einen Besuch abstatten.
Alles, was dort bereits eingetragen ist,
erscheint später bei der Produktbeschreibung. Sie können also schon bei der Ersterfassung möglichst viele Informationen
eintragen, etwa Beschreibungen in unterschiedlichen Sprachen, Produktfotos, Liefermöglichkeiten, Herstellerlinks und
selbstverständlich den Preis. Dies geht
recht unkompliziert, wenn Sie den Shop
neu bestücken. Wollen Sie Daten aus anderen Anwendungen importieren, brauchen Sie ein eigenes Tool. Im Bereich
„Contributions“ finden Sie dazu etwa
„Easy Populate“ (www.oscommerce.com/
community/contributions,1838 bzw. …
contributions,500).
PROFI-TIPP
Auf den richtigen Shopnamen achten
Bei Suchmaschinen-Recherchen zum Stichwort „osCommerce“ werden Sie sich über
viele „artfremde“ Treffer wundern. So landen
Sie etwa beim Onlineshop der Tageszeitung
„Die Welt“, der alles Mögliche anbietet, nur
keine Informationen. Doch der „Welt“-Shop
basiert offenbar auf osCommerce. Des Rätsels Lösung: Wie bei vielen anderen Webshops hat man versäumt, in der Konfiguration den „Store Name“ anzupassen, was
sich programmiertechnisch beispielsweise
im <title>-Tag niederschlägt. Auch die
URL spricht dafür: „http://212.94.242.171/
os/catalog/create_account.php“.
Namen anpassen: Über „Konfiguration | My
Store | Store Name“ können Sie in einem
Infofenster den Shopnamen eintragen, der
die Info-Zeile entsprechend korrigiert und
später auch als Bookmark/Lesezeichen erscheint. An gleicher Stelle sollte man auch
die übrigen persönlichen beziehungsweise
geschäftlichen Angaben korrigieren, damit
nicht doch noch Harald Ponce de Leon als
Inhaber Ihres Shops auftaucht.
Programmier-Bug: Wird der „Store Name“
in der Konfiguration nicht angepasst,
melden sich alle Shops als „osCommerce“.
Shopnamen ändern: Ein neuer „Store
Name“ lässt sich in osCommerce problemlos definieren.
Rat & Hilfe: Die
beste Informationsquelle für viele Fragen
und Anregungen zu
osCommerce ist die
„Knowledge Base“.
5
4
Shop-Design festlegen
Neben den Spracheinstellungen ist die
Anpassung des optischen Erscheinungsbildes oft eine der beliebtesten Pflichten –
es kann sein, dass das Standardoutfit nicht
gefällt oder man sein Corporate Design
umsetzen möchte. Dies geschieht oft über
sogenannte Templates.
Darunter versteht man im Allgemeinen die Änderung des Erscheinungsbildes
nach einer Vorlage, die einfach per Mausklick „übergestülpt“ wird. Zwar ist in den
„community contributions“ ebenfalls von
Templates die Rede, aber bei osCommerce
ist damit primär die Bearbeitung von
CSS-Dateien und eventuell sogar der Eingriff in PHP-Dateien zu verstehen. Wer
davor zurückschreckt, kann bei den „contributions“ auf vorgefertigte Sets zurückgreifen, CSS- und PHP-Kundige können
dagegen die entsprechenden Dateien auch
selbst bearbeiten. Vorher sollte man allerdings sicherheitshalber ein Backup anlegen. Die Überarbeitung des Outfits Ihres Webshops ist also nicht ganz so komfortabel wie bei einigen Content-Management-Systemen − unmöglich ist es aber
keineswegs.
5
Onlineshop absichern
Nachdem Sie die Konfiguration angepasst
und den Mustershop erkundet haben,
sollten Sie die Sicherheitshinweise von osCommerce umsetzen: das Installationsverzeichnis bei „…/catalog/install“ löschen sowie gegebenenfalls die Benutzerberechtigungen der Konfigurationsdatei
anpassen
(„…/catalog/includes/configure.php“). Dieser Hinweis lässt sich
nicht einfach wegklicken und vergessen,
sodass Sie sich schon aus optischen Gründen um das Problem kümmern müssen.
Bei dieser Gelegenheit sollten Sie noch
ein weiteres Sicherheitsleck abdichten: Die
Konfigurationskonsole wird im Browser
über das ungeschützte admin-Verzeichnis
aufgerufen („…/catalog/admin/“), sodass
jeder, der osCommerce-Kenntnisse hat,
sie aufrufen und bearbeiten kann. In der
aktuellen Version von osCommerce sollten Sie dazu unbedingt auf Server-Ebene
über die .htaccess-Datei eine Passwortabfrage einbauen. Lesen Sie dazu die Anleitung Ihres Providers sowie die Anleitungen im Internet.
Im Abschnitt „Berichte“ stehen Funktionen zur Erfolgskontrolle bereit. Dort
lassen sich Statistiken zu besuchten Seiten, verkauften Artikeln oder Kundenbestellungen abrufen.
Zur weiteren Information über osCommerce können Sie auf verschiedene
Quellen zurückgreifen: Mitgeliefert wird
ein beeindruckendes, 114-seitiges Handbuch auf Englisch, das sich allerdings auf
die reine Beschreibung der Funktionen
beschränkt. Dort können Sie viel nachlesen und sich inspirieren lassen, Probleme
wie „register_globals“ (siehe Profi-Tipp
unten) kommen darin jedoch nicht vor.
Dazu gibt es zahlreiche Erweiterungspakete als „contributions“ der Community
(www.oscommerce.com/community/
contributions). In Klammern steht die
Anzahl der Einträge im Oktober 2006:
Credit (219), Features (1161), Bilder
(262), Infobox (273), Sprachen (142), Bezahlung (501), Berichte (72), Versand
(236), Templates (103), Zones (76), Andere (540).
Wie so oft finden Sie gerade bei Problemen weitere Hilfe im Internet: Die osCommerce Knowledge Base (http://de.
oscommerce.info/) hilft ebenso wie weitere Foren, die direkt verlinkt oder über
eine Suchmaschine zu finden sind.
Fazit
osCommerce ist ein Programm mit beachtlichem Funktionsumfang und vielen
Möglichkeiten. Einzige Mängel sind die
etwas hakelige Installation sowie der ungeschützte Admin-Bereich. osCommerce
bietet einen guten und preiswerten Einstieg für frischgebackene Onlineshop-BeThorsten Luhm
sitzer.
PROFI-TIPP
Problem mit dem Catalog-Ordner lösen
Die Installation von osCommerce findet
manchmal ein jähes Ende, wenn Sie den Catalog-Ordner aufrufen, über den die Konfiguration starten soll. Dann erscheint die Fehlermeldung: „Server Requirement Error: register_globals is disabled in your PHP configuration. This can be enabled in your php.ini
configuration file or in the .htaccess file in
your catalog directory.“ Und nichts geht
mehr.
Wer lokal arbeitet oder beim Provider über
einen Server verfügt, kann dann tatsächlich
die php.ini ändern. Bei Paketen, in denen lediglich Webspace zur Verfügung gestellt
wird, haben Sie jedoch in der Regel keinen
Zugriff auf diese Datei. Bei Strato kann man
in diesem Fall im Webspace auf eigene Verantwortung einfach eine eigene php.ini anle-
gen (es können dann aber Probleme im Bereich CGI 2005 auftreten). Informationen
über die Standardeinstellungen von PHP finden Sie beispielsweise unter der Adresse
www.strato-faq.de/view.php4?articleid=15
69&subcatid=2.0.220.
Mit etwas Glück können Sie durch eine Ergänzung in der .htaccess-Datei (den Punkt
vor dem Namen nicht löschen!) diese Klippe
umschiffen, die bereits im catalog-Verzeichnis zu finden ist. Ergänzen Sie diese Zeile:
php_value register_globals 1
Stellvertretend für alle großen Provider sei
auf die Erläuterungen von Strato unter der
Adresse www.strato-faq.de/view.php4?artic
leid=669&subcatid=2.0.2.20&page=1&url
_literal=register_globals&stype=full&max
rows=3&pcatid=*&extern= verwiesen.
113
k
Das nächste CHIP-Sonderheft
Ab 22. Januar
PC-Sicherheit
Bringen Sie Ihre wertvollen
Daten in Sicherheit! CHIP hilft
Ihnen dabei und zeigt, wie
Sie Ihren PC in eine unangreifbare Festung verwandeln.
k PC sicher machen
Die wichtigsten Registry-Einstellungen, Schritt für Schritt
zum virenfreien PC
k Sicher mailen & surfen
E-Mails perfekt verschlüsseln,
anonym surfen, Internet-Browser zuverlässig absichern
k Daten schützen
k Special: LAN/W-LAN
Alle Sicherheitslücken
aufspüren und schließen
www.chip.de/sicher
Foto: CHIPimages
Online-Banking ohne Risiko,
Daten vertraulich halten,
geniale Backup-Lösungen
Impressum
Redaktionsleiter Sonderhefte: Andreas Vogelsang
Anzeigenverkauf:
(verantwortlich für den Inhalt)
Redaktion: Niels Held, Manuel Schreiber
Freie Mitarbeiter: Isolde Durchholz (Schlussredaktion),
Roland Freist (Redaktion)
Autoren dieser Ausgabe: Franziska Goldmann, Martin Goldmann,
Andreas Hitzig, Thorsten Luhm, David Maciejewski, Peter Müller,
Dr. Karl Prinz, Michael Rohrlich, Markus Schraudolph
Leserservice CHIP-Sonderhefte: [email protected]
Grafische Gestaltung: Volker Hildebrand (Titel), Isabella Schillert (CvD),
Steffi Schönberger (Grafikleitung)
Bildagentur/Syndication: Sabrina Stange (Projektmanagerin);
Calina Amann, Tel. (089) 746 42-150, www.chipimages.de
EBV: Jürgen Bisch, Gisela Zach
Bildredaktion: Kersten Weichbrodt (Ltg.),
Gertraud Janas-Wenger, Gabi Koller
Zentrale Hardware: Dr. Ingo Kuss (Ltg.), Sepp Reitberger (Stellv.),
Andreas Ilmberger (Ltd.), Daniel Wolff (Ltd.), Klaus Baasch,Gerhard Bader,
Tomasz Czarnecki, Christian Friedrich, Werner Gaschar, Martin Jäger,
Peter Krajewski, Thomas Littschwager, Monika Masek, Loys Nachtmann,
Torsten Neumann, Nicole Ott, Gunnar Troitsch
CHIP-CD/-DVD: Anja Laubstein (Ltg.), Bastian Stein (Manager),
Alfred Stumpf (Ltg. Produktion)
Geschäftsführer: Josef Zach
Verlagsleiter CHIP-Sonderhefte: Jürgen Hiller
Anzeigenleitung CHIP-Sonderhefte: Anke Huber
(verantwortlich für den Anzeigenteil)
Herstellung: Dieter Eichelmann, Verlags-Herstellung, Vogel Services GmbH,
D-97082 Würzburg
Verlag: Vogel Burda Communications GmbH,
Poccistraße 11, D-80336 München, Tel. (089) 746 42-0,
Fax: (089) 74 60 56-0
PLZ 0, 1, 2, 3
Key Account Manager: Paul Schlier, Tel. (04642) 96 54 99, Fax (04642) 96 51 86
PLZ 4, 5, 6
Key Account Manager: Hartmut Wendt, Tel. (089) 746 42-392, Fax -325
Mediaberater: Andreas Krumm, Tel. (089) 746 42-464, Fax -325
Mediaberater: Alto Mair, Tel. (089) 746 42-197, Fax -325
PLZ 7, 8, 9
Key Account Managerin: Katharina Dursch, Tel. (089) 746 42-116, Fax -325
Mediaberater: Marcel Pelders, Tel. (089) 746 42-526, Fax -325
Die Inhaber- und Beteiligungsverhältnisse lauten:
Alleinige
Gesellschafterin
ist die Vogel Burda Holding GmbH mit Sitz in
| SOFTWARE | WEBDESIGN |
114 | CHIP
Poccistraße 11, D-80336 München
Zentrale Anzeigenverwaltung und Disposition:
Linda Anders, Tel. (089) 746 42-529, Fax -300,
Sabine Maurer, Tel. (089) 746 42-252, Fax -300 E-Mail: [email protected]
Vertrieb Einzelverkauf:
Burda Medien Vertriebs GmbH,
Arabellastraße 23, D-81925 München
Bereichsleiter Vertrieb: Achim Frank
Digitale Druckvorlagenherstellung:
Vogel Services GmbH, D-97082 Würzburg
Druck: AVD Goldach, CH-9403 Goldach
Nachdruck: © 2006 by Vogel Burda Communications GmbH.
Nachdruck nur mit schriftlicher Genehmigung der Redaktion,
Christiane Bertsch (E-Mail: [email protected])
Für unverlangt eingesandte Manuskripte wird keine Haftung übernommen. Für die mit Namen
oder Signatur des Verfassers gekennzeichneten Beiträge übernimmt die Redaktion lediglich
die presserechtliche Verantwortung. Die in dieser Zeitschrift veröffentlichten Beiträge sind
urheberrechtlich geschützt. Übersetzung, Nachdruck, Vervielfältigung sowie Speicherung in
Datenverarbeitungsanlagen nur mit ausdrücklicher schriftlicher Genehmigung des Verlages.
Die Redaktion CHIP recherchiert akribisch nach bestem Wissen und Gewissen. Sollte trotzdem
eine Veröffentlichung Fehler enthalten, kann hierfür keine Haftung übernommen werden.
Sämtliche Veröffentlichungen in CHIP erfolgen ohne Berücksichtigung eines eventuellen Patentschutzes, auch werden Warennamen ohne Gewährleistung einer freien Verwendung benützt.

AUF CD - leetupload.com

Transcription

Similar documents

Wissensmanagement in sozialen Einrichtungen

Nicolas G.Hayek

Media Information 2014

BMW Route: Tradition. Bleibende Impressionen.