index-of.esindex-of.es/EBooks/German/Hacking/CHIP - 2006 10 - Die perfekte Website.pdfHOMEPAGE Neu:...

107
Neu: Hosting-Tarife, Gratis-Webspace HOMEPAGE 9,95 Österreich, Niederlande, Belgien, Luxemburg: 11,50 Schweiz: sfr 19,50 Ein Sonderheft von CHIP Ausgabe 10/06 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 Blogging-Tool WordPress perfekt nutzen Podcasts herstellen, Content verwalten AUF CD 3 VOLLVERSIONEN 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 4 196627 809952 10 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 Auf CD in diesem Heft Alles, was Sie für Ihre Homepage brauchen PLUS: 50 Top-Tools mit Beispiel-Seiten für Ihre Homepage Special Geld verdienen mit der Website Partnerprogramme, Webshop ... Tools auf CD!

Transcript of index-of.esindex-of.es/EBooks/German/Hacking/CHIP - 2006 10 - Die perfekte Website.pdfHOMEPAGE Neu:...

  • Neu: Hosting-Tarife, Gratis-WebspaceHOMEPAGE

    € 9,95 Österreich, Niederlande, Belgien, Luxemburg: € 11,50Schweiz: sfr 19,50

    Ein Sonderheft von CHIP Ausgabe 10/06

    Web-Auftritt richtig planenDos & Don'ts: Die besten Usability-TippsSo wird Ihre Homepage barrierefrei

    HTML & CSS gekonnt einsetzenNavigation & Druckversion mit CSS anlegenGratis: Fertige CSS-Layouts einbinden

    Blogs & Podcasts wie die ProfisBlogging-Tool WordPress perfekt nutzen Podcasts herstellen, Content verwalten

    AU

    F C

    D 3 VOLLVERSIONEN➤ WebSite X1Homepage ohne HTML-Kenntnisse anlegen

    ➤ Photo Commander 4Foto-/Video-Viewer mit Bildbearbeitung

    ➤ Smartstore.biz 5 StartUpDen eigenen Webshop aufbauen

    Die CHIP Webtool-Edition

    4196627809952

    10

    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

    Auf CD in diesem H

    eft

    Alles,was Sie

    für Ihre

    Homepage brauch

    en

    PLUS: 50 Top-Too

    ls

    mit Beispiel-Seiten

    für

    Ihre Homepage

    SpecialGeld verdienenmit der Website

    Partnerprogramme, Webshop ...Tools auf CD!

  • | CHIP | SOFTWARE | WEBDESIGN | 3

    Andreas VogelsangRedaktionsleiterCHIP-Sonderhefte

    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 Erotik-

    filme – von den Amateur-Regisseuren selbst kommentiert. Kommt uns das

    irgendwie bekannt vor?

    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-Com-

    munities wie YouTube, Flickr & Co. und die vielen Millionen privater Home-

    pages, Blogs oder Podcasts zeigen.

    Die Basis Ihres Web-Auftritts. Dieses Heft und die zugehörige Heft-CD lie-

    fern Ihnen das Handwerkszeug, um in die globale Community einzutauchen.

    Die solide Grundlage Ihrer Homepage zimmern Sie mit HTML und Casca-

    ding Style Sheets (CSS). Wenn Sie unsere Usability-Tipps beachten, wird sich

    der Kreis Ihrer Besucher rasch vergrößern. Mit einem interessanten Web-

    Tagebuch – vielleicht in Verbindung mit einem regelmäßigen Podcast – wer-

    den 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 Rechts-

    Tipps für Webmaster“ auf s48 lesen und beherzigen. Denn so privat kanndas 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!

    „Deutschland privat“ reloaded

    [email protected]

  • 4 | CHIP | SOFTWARE | WEBDESIGN |

    6 Web 2.0 – Marketing-Hype oder neue Marke?CHIP sagt, was Ihnen Web 2.0 wirklich bringt.

    10 AJAX baut das Web 2.0So funktioniert die Basistechnologie des Web 2.0.

    14 Die aktuellen Hosting-TarifeDer beste Hosting-Tarif für Ihre Homepage.

    16 Die besten Anbieter von Gratis-WebspaceWo Sie keinen Cent fürs Hosting bezahlen müssen.

    .

    26 Websites richtig planen und aufbauenWarum Sie schon bei der Planung Ihrer HomepageAbschied vom Papierdenken nehmen sollten.

    28 So wird Ihre Homepage bedienerfreundlichDie besten Usability-Regeln, die schlimmsten Pannen

    32 Flexible Seiten mit Cascading Style SheetsSo geht’s: Eine komplette Seite mit CSS gestalten

    38 Vorgefertigte CSS-Layouts nutzenWie Sie fertige Stylesheets in Ihre Homepage einbauen.

    40 Cascading Style Sheets organisierenSo bleiben auch längere Stylesheets übersichtlich.

    42 Barrierefreie Seiten bauenWie Sie herausfinden, ob wirklich jeder Surfer IhreHomepage uneingeschränkt nutzen kann.

    48 Recht: Zehn Regeln gegen AbmahnungenWas Homepage- und Shopbetreiber wissen müssen.

    50 Webvideos in die Homepage einbindenSo nutzen Sie YouTube & Co. für Ihren Webauftritt.

    54 Digitalfotos online stellenWie Sie den Bilderdienst Flickr voll ausreizen.

    60 Filme im Web bearbeitenSo schneiden Sie Ihre Videos online – mit Eyespot.

    64 Homepage-Baukästen im ÜberblickDie Baukasten-Systeme der großen Webhoster

    6 Auf zu neuen UfernTechnologien, Trends, Strukturen: WieWeb 2.0 das Internet verändert, wasdaran wirklich neu ist und wasSie davon haben.

    26 Planen & aufbauenDer Aufbau einer Homepage verlangt eine völlig andere Strategie als das Verfassen eines Textes: Warum sich Webdesigner vom Papierdenken verabschieden müssen.

    Auf Heft-CD3 Vollversionen 20WebSite X1, Ashampoo Photo Commander 4, Smartstore.biz 5 StartUp Seite

    Die 50 Top-Tools 23Geniale Freeware-Programme für Webdesigner (HTML, PHP, CMS, FTP, Bildbearbeitung)

    Webseiten zum Nachbauen

    Aktuell

    Homepage

  • | CHIP | SOFTWARE | WEBDESIGN | 5

    70 So funktionieren BlogsEin Blog ist ein CMS mit speziellen Features – CHIPsagt Ihnen, wie ein Web-Tagebuch zustande kommt.

    72 Blog anlegen in fünf MinutenUm den Blogservice Blogger.com zu nutzen,brauchen Sie nicht einmal eigenen Webspace.

    76 Der eigene Blog mit WordPressWordPress ist das Blog-Tool Nummer eins. So setzen Sie mit WordPress einen Blog auf Ihrer Website auf.

    80 Die besten Themes & Plugins für WordPressWordPress lässt sich mit Gratis-Vorlagen problemlos erweitern und an Ihre Vorlieben anpassen.

    84 WordPress programmierenMit etwas Erfahrung in PHP und CSS können Sie Ihren Blog noch individueller gestalten.

    88 Podcast – der SoundblogWie Sie Podcasts finden, anhören, selber machen und sogar Geld damit verdienen.

    92 Podcast aufnehmen mit AudacitySo richten Sie Audacity ein, nehmen den Podcast auf, schneiden ihn und exportieren ihn als MP3.

    94 Podcast veröffentlichen mit LoudblogMit dem kostenlosen Blogsystem stellen Sie Ihren Podcast völlig unkompliziert ins Internet.

    96 Podcast im eigenen Blog publizierenPodPress ist das ideale Tool, um einen Podcast in Ihren WordPress-Blog einzubauen.

    98 Inhalte verwalten mit JoomlaWenn WordPress bei der Content-Verwaltung anseine Grenzen stößt, ist es Zeit für ein CMS wie Joomla.

    102 Nur bekannte Websites verdienen GeldCHIP zeigt Ihnen, wie Sie den Page-Rank Ihrer Seite verbessern – damit Sie bei Google ganz vorn landen.

    106 Partnerprogramme nutzenVon den Großen lernen – so vermarkten Sie Ihren Webauftritt möglichst profitabel.

    110 Webshop aufbauen mit osCommerceSo installieren Sie die kostenlose Shop-Software osCommerce und richten Ihren Onlineladen ein.

    18 Inhalt der Heft-CD49 Leserumfrage, Gewinnspiel114 Vorschau: Das nächste CHIP-Sonderheft114 Impressum: Das CHIP-Team und der Verlag

    Rubriken

    50 Blogs, Podcasts & Co.Blogs und Podcasts sind zentrale Elemente

    des Web 2.0. So funktioniert dyna-misches Web-Publishing.

    102 Geld verdienen im WebPartnerprogramme – oder gleich der eigene

    E-Shop? CHIP verrät die besten Strategien für das Zusatzeinkommen mit der Website.

    Blogs & Co.

    Special

  • 6 | CHIP | SOFTWARE | WEBDESIGN |

    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-Develo-per-Works-Podcast als „Jargon, von dem keiner auch nur weiß, was er bedeuten

    te und erfolgreiche Marke zu schützen,gängigen Geschäftsgepflogenheiten ent-spricht, war diese Aktion keine gute Idee.Der dialektische Sprung, in Konferenzen den freien Austausch von Gedanken undDaten zu feiern und dann wie kleinka-rierte Spießer auf der Verwendung eines Begriffs zu bestehen, war der Webcom-munity nur schwer zu vermitteln.

    Das amerikanische Marktforschungs-unternehmen Gartner sieht immerhin in den Techniken, die mit dem Begriff Web

    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.

    , Was Web 2.0 bedeutetDie wichtigsten Begriffe s8

    Die besten Links zum Thema Web 2.0 s9

    AUF EINEN BLICKAUF EINEN BLICK

    soll“, andere Kritiker sehen im Gebrauchdes Begriffs einen Etikettenschwindel, mit dem altbekannte Techniken als der letzte Schrei oder als Speerspitze des technolo-gischen Fortschritts verkauft werden.

    Dem O’Reilly Verlag und MediaLive(heute CMP United Business Media), Fir-men, die diesen Begriff 2004 prägten, er-scheint 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- Fo

    to: K

    . Wei

    chbr

    odt;

    Com

    posi

    ng: V

    . Hild

    ebra

    nd

  • | CHIP | SOFTWARE | WEBDESIGN | 7

    Ufern2.0 beschrieben werden, nicht weniger als die Triebfedern der IT-Branche für dienächsten Jahre. Den größten Einfluss für die kommenden zwei Jahre spricht das Unternehmen Techniken wie AJAX (mehrzu AJAX lesen Sie ab s10) und sogenann-ten Mashup-Angeboten zu. Mashups sindDienste, die verschiedene externe Online-Anwendungen verbinden und deren In-halte, etwa Geodaten, Bilder, Musik oderText, zu einer neuen Einheit mixen.

    Mit einem Dienst zum Gestalten indi-vidueller Web-2.0-Logos karikiert eine Webseite eine charakteristische Eigen-schaft von Web-2.0-Applikationen: den dauerhaften Zustand als Beta-Version.

    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. Inspiriertwurde diese Idee durch das Logo eines Portals, das Web-2.0-Anwendungen auf-listet, Bewertungen dieser Anwendungen bietet und Linkverwaltungs- und Book-mark-Services zu diesen Informationen bereitstellt.

    Die Entscheidung, mit „Web 2.0“ dasWorld Wide Web mit einer Versions-nummer zu versehen und es damit im-plizit als Software, als eine Ansammlungvon Technologien, zu betrachten, bietet die Möglichkeit, auch sehr unterschied-liche Entwicklungen mit diesem Begriffzu fassen. Die Einführung einer höheren Versionsnummer suggeriert eine Erwei-terung und Verbesserung der bisherigen Technologien. Inhaltlich hat man sichdamit kaum festgelegt, denn in einemkomplexen Gebilde wie einer Softwaresind Verbesserungen in sehr unterschied-lichen Bereichen möglich: Das können beispielsweise eine Erweiterung der On-line-Hilfe, eine verbesserte Benutzerfüh-rung, schnellere Datenbankzugriffe oder auch neue Schnittstellen für den Daten-austausch sein.

    Auf welchen Technologien Web 2.0 basiert

    Die wichtigsten Technologien für dasWorld Wide Web sind das Hypertext Transfer Protocol (HTTP) und die Hy-pertext Markup Language (HTML) alsAuszeichnungssprache der Daten. Zu die-sen Technologien kamen später die Cas-cading Style Sheets (CSS, mehr dazu lesen Sie ab s32) und JavaScript hinzu.

    Die CSS gestatteten eine präzisereFormatierung der Seiten und eine wei-tergehende Trennung von grafischer Darstellung und Text, als dies mit HTMLmöglich war. Mit JavaScript ließen sich die Seiten serverunabhängig verändern,also den Bedürfnissen des Users ohnelangwierigen Neuaufbau der Seiten an-passen. Zur ersten Version des WWWzählen auch die Skriptsprachen wie ASP,Perl oder PHP sowie die Verwendung von Datenbanken, mit deren Hilfe sich auchsehr umfangreiche Internetauftritte mit relativ wenig Arbeitsaufwand aufbauen und pflegen lassen.

    Mit irgendwelchen neuen Technolo-gien lässt sich die Bezeichnung „Web 2.0“ nicht rechtfertigen. Auch die bunte Welt der Web-2.0-Services nutzt zu 80 Prozentdie 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 dazuverwendeten Technologien – die XML-Formate, JavaScript sowie der Einsatzvon 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 Beschrei-bung von Web-2.0-Applikationen, sind derartige Anwendungen als Webseite nur unzureichend erfasst, die Begriffe „Ser-vice“ oder „Dienst“ passen besser. Nicht das Statische eines grafisch aufbereite-ten Datenangebots, sondern die Dynamik der Dienstleistung, die meist in heftiger Interaktion mit dem Benutzer erbracht wird, steht im Vordergrund. Die grafischeGestaltung der Seiten hat sich dieser Funktion beziehungsweise der optimier-ten Benutzerführung unterzuordnen. Wie viel Ballast man in dieser Hinsicht abwer-fen kann, zeigen seit Jahren die sparta-nischen Seiten der Google-Services.

    Die Bedeutung des Erhebens und Ver-mittelns von Informationen ist deutlichgewachsen, dies gilt auch für den Benut-zer, insbesondere den sich aktiv beteili-genden User. Dafür sind die technischen Voraussetzungen zu schaffen, die sich in einer intuitiveren Benutzerführung, im Abbau von rechtlichen, administrativen

    Flickr: Diese Site ist viel mehr als ein Online-Fotoalbum – eine interaktive Foto-Community.

    k

    http://blog.webmaster-homepage

  • 8 | CHIP | SOFTWARE | WEBDESIGN |

    und technischen Hindernissen für dieNutzung der Dienste, aber auch an den neuen Partizipationsmöglichkeiten des Users zeigen.

    Die Freischaltung – soweit das über-haupt erforderlich ist – für Blogs oderWikis dauert im Normalfall nur so lange wie das Ausfüllen eines Anmeldeformu-lars und das Versenden der Bestätigungs-Mail. Von der Community gepflegteund heftig diskutierte Tipps und Tricks zu den Anwendungen sowie das Bug-Reporting sind für diese Art von Pro-grammen unverzichtbar.

    Der Austausch von Daten ist aus-drücklich gewünscht – und um ihn auch in Zukunft zu sichern, werden dafür, so-weit möglich, nicht die De-facto-Stan-

    dards großer Softwarefirmen, sondernoffene Standards verwendet. Die Hürden für den Datenaustausch sollen auch in technischer Hinsicht möglichst niedrig

    bleiben. Die Affinität zu Open-Source-Software im Sinne von frei verfügbarer,kostenloser Software ist die logische Kon-sequenz. Die bedeutsame Rolle, die der Datenaustausch spielt, hat den positivenNebeneffekt, dass diese Services nicht nurvom Browser, sondern auch von anderenGeräten wie PDAs und Handys sowie von den Lesegeräten für Blinde relativ pro-blemlos darstellbar sind (mehr zum The-ma Barrierefreiheit lesen Sie ab s42).

    Mit den in die eigene Webseite inte-grierbaren Webservices werden nicht nur Daten, sondern via Software aufbereiteteDaten angeboten. Die Programmfunk-tionalität wird also selbst zum Dienst. Aufdiese Weise lassen sich komplexe, auf-wändig programmierte Services auf einerWebseite kombinieren; da die Schnitt-stellen offengelegt sind, bietet sich auchdie Möglichkeit, mit diesen Programmen eigene Anwendungen zu gestalten. Paul Rademachers Webseite www.housing-maps.com, die Google Maps mit dem Im-mobilienmarkt von Craigslist verbindet,ist eines der prominentesten Beispiele für ein solches Mashup.

    Viele Strukturen von Web-2.0-Anwen-dungen lassen sich mit der Umkehrung des Prinzips „Wer zahlt, schafft an“ er-klären. Kostenpflichtige Serviceleistungen werden weitestgehend durch die vernetzte Kommunikation ersetzt. Nicht Ranks andTitles von Personen und Firmen ist der Garant des Expertenwissens, es konsti-tuiert 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 (mehrdazu lesen Sie ab s102). Die vernetzte Kommunikation entspricht der Unüber-schaubarkeit des WWW, dessen Komple-xität allenfalls mit Suchmaschinen, nichtmehr mit Katalogen zu bewältigen ist.

    Das World Wide Web wird als Chanceund Bereicherung erkannt, für die viele bereit sind, sich im Verbund zu engagie-ren – im Entwickeln von Open-Source-Programmen und -Services, dem Verfas-sen von Tipps und Tricks oder von enzyk-lopädischen Artikeln. Projekte wie Apa-che (Webserver), Firefox (Browser) und die von einer Vielzahl von Redakteuren zusammengetragene Wikipedia zeigen,welches Niveau damit möglich ist.

    LEXIKON

    AJAX (Asynchronous JavaScript and XML)bezeichnet ein Konzept der asynchronenDatenübertragung zwischen dem Server und dem Browser. Damit lassen sich innerhalbeiner 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 amerika-nischen Marktforschungsinstitut Gartner ist AJAX eine der Killer-Applikationen des Web 2.0 (mehr zu AJAX lesen Sie ab s10).Blog siehe WeblogCSS (Cascading Style Sheets) ist eine de-klarative Stylesheet-Sprache für strukturier-te 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 ei-ne textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie Texten, Bil-dern 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 XHTMLersetzt 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 einge-setzt, 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 Be-teiligung 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 Ver-fügbarkeit des Quellcodes, die über die je-weilige Lizenz geregelt wird. Der Begriff wird aber auch im Sinne von kostenloser Soft-ware verwendet.Permalinks (Kombination aus den engli-schen Wörtern „permanent“ und „link“) sol-len in Medien, die der ständigen Überarbei-tung unterworfen sind, über Links eindeutigreferenzierbare Inhalte gewährleisten.Web siehe WWWWeblog (Kombination der englischen Wörter „Web“ und „Log“, oft einfach „Blog“ ge-nannt) ist eine Webseite, die periodisch neue Einträge enthält, die chronologisch abstei-gend sortiert sind. Ein Blog beginnt also im-mer mit dem neuesten Eintrag.WWW (World Wide Web, umgangssprach-lich auch Web) entstand 1989 als Projekt am CERN in Genf (Schweiz), an dem Tim Berners-Lee ein Hypertext-System aufbau-te, das dem leichten Austausch von Datendienen sollte. Charakteristische Technolo-gien des World Wide Web sind: – HTTP als Protokoll, mit dem der Browser In-formationen vom Webserver anfordern kann,– HTML als Dokumentbeschreibungsspra-che, die festlegt, wie die Information geglie-dert ist und wie die Dokumente verknüpft sind (Hyperlinks).

    Die wichtigsten Begriffe des Web 2.0

    Myspace: Diese Web-Community ist alsWerbeplattform heiß begehrt.

  • | CHIP | SOFTWARE | WEBDESIGN | 9

    Die Dynamik der Entwicklung ergibt sich aus der weitgehend hierarchiefreien Kooperation und aus der ständigen Opti-mierung der Projekte. Der Dauerzustand als Beta-Version ist die vorherrschendeTendenz von Web-2.0-Anwendungen.Gerade die Bemühungen um zitierfähigeArtikel in der Wikipedia, welche die Bear-beiter eben nicht auf eine überschaubareAnzahl von Experten reduzieren, oder die Einführung von Permalinks, um in dyna-mischen Medien wie Weblogs eindeutig referenzierbare Inhalte zu garantieren,demonstrieren, wie sehr diese Anwen-dungen und Services vom Bemühen um ständige Optimierung geprägt sind.

    Neu im Web ist also weniger die Ver-wendung bestimmter Technologien alsvielmehr eine Änderung der Kommuni-kationsstruktur. Die Zielrichtung ist eine weitgehend hierarchiefreie, vernetzte Kommunikation durch Beseitigen vontechnischen, administrativen, rechtlichen und finanziellen Barrieren. Die Ebenenhierarchischer Ordnungen werden durch weitgehend egalitäre Netzstrukturen er-setzt – 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 Commu-nitys entwickelt, aber auch die Programme selbst sind auf Kompatibilität und Fremd-nutzung ausgelegt. Genau dies ist diequalitative Veränderung, die eine Vergabe einer höheren Versionsnummer rechtfer-tigt, auch wenn das World Wide Web kei-ne Software ist.

    Warum aus Web 2.0 baldWeb 3.0 werden könnte

    Die weitgehende Beseitigung von Kom-munikationshürden, die Partizipations-möglichkeiten der breiten Masse („thelong tail“) und der Enthusiasmus, mit dem die Leistungen oft erbracht werden– all das macht den Charme dieser Ent-wicklung aus. Sie entspricht genau der Struktur des WWW, das eben auch nichthierarchisch organisiert ist.

    Derzeit erscheint der Kampf gegen die Monopole einzelner Firmen und für den freien Zugang zu ökonomisch und gesell-schaftlich relevanten Informationen und Diensten noch als das Gebot der Stunde.Doch im Rücken der basisdemokratischen

    Kämpfer formieren sich bereits andere Gegner – weit gefährlichere, denn diese Firmen haben es gelernt, die Communitydes Webs mit kostenlosen und attraktiven Angeboten für ihre Interessen einzuspan-nen. Der Wettbewerbsvorteil, den etwa Amazon durch sein Empfehlungs- und Bewertungssystem gegenüber seinen Kon-kurrenten erreicht, ist relativ harmlos,verglichen mit der Macht, die etwa Google mit den Auswertungsmöglichkeiten der Daten erhält, die dieser Firma über Gratis-services 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 Miss-brauch der Daten verhindern, ohne dassman die bisherigen Errungenschaften desWebs aufgibt? Karl Prinz

    WEBTIPPS

    Zum Begriff „Web 2.0“Prägung des Begriffs „Web 2.0“ mit aus-führlicher Erläuterungwww.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.htmlDie deutsche Übersetzung gibt es unter:http://twozero.uni-koeln.de/content/e14/index_ger.htmlZukunftschancen des Web 2.0 laut Markt-forschungsunternehmen Gartnerwww.heise.de/newsticker/meldung/76648,www.gartner.com/it/page.jsp? id=495475Web-2.0-Logo-Generator (mit einge-bautem Beta-Versionsverweis)http://blog.webmaster-homepage.de/item/1396Liste mit Web-2.0-Anwendungenwww.web2list.com/Liste der Logos von Web-2.0-Anwen-dungenhttp://web2logo.com/

    Markenstreit um die Verwendung der Bezeichnung „Web-2.0-Kon-ferenz“Faksimile der Abmahnung von CMP Uni-ted Business Mediawww.flickr.com/photo_zoom.gne?id=153074441&size=lKommentare zum Markenstreitw w w . s p i e g e l . d e / n e t z w e l t / p o l i t i k /0,1518,418630,00.htmlhttp://web-zweinul l .de/index.php/a r c h i v e s / m a r k e n s t r e i t - u m - w e b -20/2006/05/27www.heise.de/newsticker/meldung/73703

    Die besten Links

    Wikipedia: Das Refe-renzprojekt desWeb 2.0 ist ein freizugängliches, vonTausenden von Redak-teuren kostenloszusammengestelltesOnlinelexikon.

    YouTube: Die welt-größte Plattform zumAustausch, zur Prä-sentation und zur Dis-kussion von Videos hatGoogle gerade fürmehr als 1,6 MilliardenDollar gekauft.

    http://twozero.uni-koeln.de/content/e14/http://blog.webmaster-homepage.de/http://web2logo.com/http://web-zweinull.de/index.php/

  • BASISTECHNOLOGIE DES WEB 2.0

    AJAX baut das Web 2.0

    D as Neue an Webseiten mit AJAX-Funktionalität ist – wie das Akro-nym „Asynchronous JavaScript And XML“ schon sagt – die asynchrone Kommunikation zwischen Client (Brow-ser) und dem (Web-)Server mit JavaScript

    lig werden, oder bietet AJAX noch weite-re Vorteile? In diesem Beitrag zeigen wir Ihnen die Besonderheiten dieser Techno-logie am Beispiel eines Onlineformulars,das in klassischer Weise synchron mit dem Webserver kommuniziert.

    So war es bisher: Synchrone Kommunikation

    Nach dem gelungenen Aufbau des HTML-Formulars findet die Kommunikation des Browsers mit dem Webserver erst indem Moment statt, in dem das Formular

    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.

    , So funktioniert AJAXAsynchrone Kommunikation s11

    Wie ein AJAX-Formular im Detail aufgebaut ist s12

    AUF EINEN BLICK

    und dem XMLHttpRequest-Objekt des Browsers. Im Zeitalter ständig wachsen-der Bandbreiten erscheint dies nicht wei-ter spektakulär: Denn wenn der Seiten-aufbau rasch erfolgt, scheint es neben-sächlich, ob der Benutzer diese Aktuali-sierung durch den Klick auf den Absende-Button eines Formulars auslöst oder durch andere Aktionen, etwa das Ausfül-len eines Eingabefeldes.

    Macht AJAX letztlich deshalb Furore,weil nun auch auf Webseiten wie bei rich-tigen Programmen die Beschränkungen von Eingabe- und Auswahlfeldern hinfäl- Co

    mpo

    sing

    : V.H

    ildeb

    rand

    10 | CHIP | SOFTWARE | WEBDESIGN |

  • 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 wer-den. Mit JavaScript ist eine Prüfung der in den einzelnen Feldern eingegebenen Da-ten auf Vollständigkeit und Korrektheit bereits vor dem (endgültigen) Abschickenmöglich. Sie findet allerdings ausschließ-lich auf dem Client, also ohne Kommuni-kation mit dem Server, statt. In einer klas-sischen Webseite erfolgt die Prüfung so-mit entweder vorab beim Client oder nachträglich auf dem Server, der bei un-vollständiger Datenübermittlung die Wei-terverarbeitung verweigert und das Ein-gabeformular mit den Fehlermeldungen nochmals ausgibt.

    Für eine Prüfung der Daten auf forma-le Korrektheit, beispielsweise die richtige Form einer E-Mail-Adresse oder die er-folgte Eingabe der Postleitzahl oder des Namens, ist dieses Verfahren bestens ge-eignet. Geht es jedoch um den weiterge-henden, inhaltlichen Check, etwa ob der Buchautor, den ich gerade eingeben will,bereits in der Literaturdatenbank enthal-ten ist, hatte man bislang die Qual der Wahl: Man konnte entweder auf derartige Überprüfungen verzichten und die Ein-gabe in die Literaturdatenbank im Falle einer Dublette verwerfen. Doch die Alter-native, vor dem Aufbau der Webseite alle Autoren aus der Datenbank zu lesen undsie dann in einer JavaScript-Routine zu speichern, ist auch nicht sonderlich attrak-tiv. Dieses Verfahren verzögert den Seiten-aufbau, erhöht die Größe der HTML-Sei-te und kann bei großen Datenmengen auch zu Speicherproblemen der Java-Script-Engine führen.

    So arbeitet AJAX: Asynchrone Kommunikation

    Mit AJAX lässt sich die Eingabe komfor-tabler gestalten. Dem Benutzer werden bereits beim Ausfüllen des Formularfeldes nach einigen Buchstaben die in der Daten-bank bereits vorhandenen Buchautoren unterhalb des Eingabefelds als mögliche Auswahloptionen angeboten – und dies jeweils in Abhängigkeit von den Eingabe-werten. Wenn also ein Autor bereits in der Datenbank vorhanden ist, wird dies sofort ersichtlich.

    Für den Benutzer entfällt die überflüs-sige Eingabe beziehungsweise Tipparbeit,denn der gewünschte Autor lässt sich ausder angezeigten Liste übernehmen. Auchdie Pflege der Literaturdatenbank gestal-tet sich wesentlich einfacher, da mit der dynamischen Anzeigeliste weniger Auto-ren mit Tipp- und Schreibfehlern in der Datenbank landen.

    Die asynchrone Kommunikation zwi-schen dem Browser und der Literatur-datenbank des Servers bietet demnachwirklich 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 Vorteileals Nachteile

    Der Vorteil beim Einsatz von AJAX be-steht darin, dass sich Webanwendungen programmieren lassen, die dem Benutzer deutlich mehr Komfort bieten als bisher.

    Weiterer Pluspunkt: AJAX ist keine Neu-entwicklung, sondern lediglich eine Kom-bination von langjährig erprobten Tech-nologien, die ihre Kinderkrankheiten be-reits seit langer Zeit hinter sich haben.Denn seit Ende des Browserkriegs zwischenNetscape und Microsoft sind die Unter-schiede der Browser in puncto JavaScript-Unterstützung nur noch marginal. Die

    Unterstützung der Standards von Casca-ding Style Sheets (CSS) ist ebenfalls innahezu allen Browsern gegeben, und auch das XMLHttpRequest-Objekt wird vonden neuen Versionen fast aller Browser unterstützt.

    Im Unterschied zu Flash, das ebenfalls die Möglichkeit des asynchronen Daten-austauschs bietet, benötigt AJAX keinerlei Plugins und keine binären Daten für dieDarstellung von dynamischen Webseiten.Das macht sich in der Indizierung undbeim Ranking der Seiten in den Suchma-schinen positiv bemerkbar. Und durch den Verzicht auf proprietäre Technologien lassen sich barrierefreie Seiten mit wesent-lich geringerem Aufwand gestalten als mitFlash.

    Der Hauptvorteil von AJAX: Webde-signer können problemlos schnell auf-bauende Webseiten produzieren, bei denen einzelne Seitenelemente je nach Benutzer-verhalten nachgeladen werden. Dies kannjedoch zur Folge haben, dass der Benutzer Verzögerungen, die eventuell durch das Nachladen von Funktionen und Dateien entstehen, als Programmierfehler miss-interpretiert. Die asynchrone Kommuni-kation mit dem Webserver reduziert zwardie absolute Datenmenge pro Seitenauf-ruf, für den Webserver steigt jedoch auf-grund des asynchronen Nachladens von Seitenelementen die Anzahl der Anfragen um ein Mehrfaches. Das kann sich bei nicht allzu leistungsfähigen Servern auch

    http://maps.google.de/: Die Adressensuche bietet neben einem Routenplaner und einemUmgebungsplan auch ein skalierbares Satellitenbild sowie eine Branchensuche.

    k

    | CHIP | SOFTWARE | WEBDESIGN | 11

    http://maps.google.de/:

  • bereits bei weniger stark frequentiertenSeiten bemerkbar machen.

    Aber AJAX hat nicht nur Vorteile: So entsteht etwa zusätzlicher Programmier-aufwand, um sinnvolle alte Funktionswei-sen im neuen Umfeld zu emulieren. Der Zurück-Knopf des Browsers und die Browser-History funktionieren unter Um-ständen nicht mehr oder zumindest nicht mehr in der gewohnten Weise. Gerade Be-nutzer mit wenig Internet-Erfahrung kann so etwas leicht verwirren. Auch das Book-marking von Webseiten wird unpräziser,wenn die Webseite erst über die Interaktionmit dem Benutzer entsteht.

    Diese Folgekosten sollte man beim Ein-satz von AJAX einkalkulieren. Sollen Web-seiten auch bei deaktiviertem Java-Script funktionstüchtig bleiben, muss man zumindest für die Basisfunktionali-tät noch für eine Alternative sorgen, was den Programmieraufwand weiter erhöht.Unter Umständen sind auch zusätzliche Statusanzeigen für anfallende Ladevor-gänge der Seitenelemente bei der Pro-grammierung von AJAX-Anwendungenzu berücksichtigen.

    AJAX in der Praxis: Per PLZ die Stadt ermitteln

    Die eben beschriebene Funktionsweise von AJAX-Anwendungen lässt sich ambesten anhand eines sehr einfachen Bei-spiels erklären. In einem Formular wirdüber die eingegebenen Postleitzahlen in

    einer Datenbank die zugehörige Stadt er-mittelt. Dieser Wert wird anschließend in einem weiteren Schritt in das Formular-feld „Stadt“ aufgenommen. Dreh- und An-gelpunkt der Kommunikation zwischen Browser und Webserver ist das XMLHttp-Request-Objekt, das über JavaScript auf-gerufen wird. Die Datenermittlung aufdem Server kann mit beliebigen Skript-sprachen erfolgen. Für das dynamische Einbinden des vom Server gelieferten Rückgabewerts ist wiederum Java-Script erforderlich.

    XMLHttpRequest ist eine Programm-schnittstelle, die für den asynchronen Austausch von XML-kodierten Daten konzipiert ist, sich aber auch für Daten in anderen Formaten einsetzen lässt. Nachder Initialisierung des Objekts wird es ver-wendet, um in der Funktion „callServer“ das PHP-Skript „getCity.php“ mit der GET-Variable „zip“ aufzurufen – so als wäre wie bei einer synchronen Kommuni-kation zwischen Client und Server das Formular abgeschickt worden. XMLHttp-Request liefert nach Beendigung der An-frage eine Statusmeldung. In unserem Beispiel wird über diesen Rückgabewert die JavaScript-Funktion „updatePage“aufgerufen, die den ermittelten Wert indas 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 Wertder Eingabe über die Funktion „getEle-

    mentsByName“ ermittelt – und zwar für jede Eingabe. Das XMLHttpRequest-Ob-jekt ruft das PHP-Skript mit der Variablen auf. Das Kodieren der Daten für die Über-gabe an den Server und die Ausgabe des Clients ist wichtig, um Umlaute und Son-derzeichen ohne Verstümmelungen zu er-halten.

    Das PHP-Skript muss an dieser Stelle nicht weiter erläutert werden, es hat ledig-lich die Funktion, aus den in einer Daten-bank oder XML-Datei vorliegenden Daten den der Variablen „zip“ entsprechenden Wert für die Stadt zu ermitteln und auszu-geben.

    In der Funktion „updatePage“ wird bei erfolgreichem Abschluss der Anfrage der Rückgabewert des XMLHttpRequest-Ob-jekts ausgelesen, kodiert und mit der Java-Script-Funktion „getElementsByName“dem Feld „city“ des HTML-Formulars übergeben.

    AJAX - Ein Beispiel

    var xmlHttpReq = false;

    // Mozilla/Safari

    if (window.XMLHttpRequest) {

    xmlHttpReq = new XMLHtt-

    pRequest();

    xmlHttpReq.

    overrideMimeType( text/xml );

    }

    // IE

    else if (window.ActiveXOb-

    ject) {

    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 vor-

    handen sein

    if ((zip == null) || (zip

    == )) return;

    // URL erstellen, die Daten

    vom Server abruft

    var url = getCity.

    php?zip= + escape(zip);AJAX-Skript in der Praxis: Die Anwendung ermittelt anhand der Postleitzahl die zugehörigeStadt und trägt den Wert automatisch in das nächste Feld ein.

    12 | CHIP | SOFTWARE | WEBDESIGN |

  • // Verbindung zum Server

    erstellen

    xmlHttpReq.open( GET , url,

    true);

    // nach Serverabfrage Start

    Aktualisierung der HTML-Seite

    starten

    xmlHttpReq.onreadysta-

    techange = updatePage;

    // Anforderung des senden

    xmlHttpReq.send(null);

    }

    function updatePage() {

    if (xmlHttpReq.readyState

    == 4) {

    var response = xmlHtt-

    pReq.responseText;

    response =

    unescape(response);

    document.getElementsBy

    Name( city )[0].value =

    response;

    }

    }

    PLZ:  

    Stadt: 

    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 gering-fügigen Verbesserungen wächst der Um-fang des benötigten JavaScript-Codes ex-ponentiell.

    In unserem Beispiel könnte unterhalb des Eingabefeldes für Postleitzahlen ein Auswahlfenster erscheinen, das passend zur Eingabe eine Anzahl der in der Daten-bank gespeicherten Postleitzahlen anzeigt.Nach der Auswahl wird automatisch die zugehörige Stadt ermittelt. Für den Auf-bau dieses Fensters, die Synchronisation der Kommunikation zwischen der Einga-

    be und den angezeigten Werten der Aus-wahl, sind weitere Funktionen erforder-lich, ebenso Routinen, welche die Auswahl der angebotenen Werte mit den Pfeiltas-ten oder der Maus ermöglichen bezie-hungsweise die aktuelle Auswahl eines Wertes hervorheben. Hinzu kommenFunktionen für den Umgang mit eventu-ell auftretenden Fehlern.

    Glücklicherweise gibt es JavaScript-Bibliotheken, welche die HTML-DOM-Programmierung und das Handling des XMLHttpRequest-Objekts erleichtern,sowie Frameworks, die auf diesen oder aufeigenen Bibliotheken aufbauen undkomplette AJAX-Anwendungen oder de-ren wesentliche Elemente bieten. Die Fra-meworks werden von einer engagierten Community getragen, die sich im Idealfall um die Dokumentation, das Bugfixingund die Weiterentwicklung der Anwen-dungen bemüht und diese in Blogs eifrigdiskutiert.

    Die interessanteste JavaScript-Biblio-thek ist Prototype, woauf die Frameworks Rico und Scriptaculous aufbauen, aber auch MochiKit ist einen Test wert. Da die Funktionalität dieser JavaScript-Biblio-theken anhand von Anwendungen de-monstriert wird, ist der Übergang zu den Frameworks fließend – allenfalls ein gra-dueller.

    Bei den Frameworks, zu denen neben Rico und Scriptaculous auch Spry undYUI zählen, garantieren eine engagierteCommunity beziehungsweise die Man-power großer Firmen wie Adobe, Google oder Yahoo die kontinuierliche Anpas-sung und Neuentwicklung von AJAX-Anwendungen. In Zahl und Qualität der angebotenen Anwendungen gibt es oft große Unterschiede. Anhand der präsen-tierten Beispiele lässt sich jedoch raschentscheiden, ob der Funktionsumfangausreichend und der Aufwand für dieAnpassung vertretbar sind.

    Wer sich nicht mit den Tücken von Ja-vaScript herumschlagen will, ist eventuell besser bedient mit serverseitigen Frame-works der Programmiersprache seinerWahl (ASP, JAVA, Perl, PHP, Python), die ihm diese Arbeit weitestgehend abneh-men. Da diese Frameworks relativ jung sind, ist aber auch an dieser Stelle mitProblemen zu rechnen. AJAX ist eben in jedem Fall und in vielfacher Hinsicht eine Herausforderung. Karl Prinz

    WEB-TIPPS

    Überblickhttp://de.wikipedia.org/wiki/Ajax_(Programmierung)Community-Seitenwww.ajaxian.com/Kritik an AJAX(Beitrag „Listen kids, AJAX is not cool“ im Blog www.lastcraft.com)www.lastcraft.com/blog/index.php?p=19Quellensammlungwww.drweb.de/weblog/weblog/?p=454Liste mit AJAX-Anwendungen(und Kritiken an AJAX)http://itredux.com/office-20/database/Einführungen in dieAJAX-Programmierungwww.get-the-code.de/code/javascript/ajax/w w w . z d n e t . d e / b u i l d e r / p r o g r a m /0,39023551,39146400,00.htmhttp://developer.mozilla.org/de/docs/AJAXXMLHttpRequest-Objekthttp://developer.apple.com/internet/webcontent/xmlhttpreq.htmlhttp://de.wikipedia.org/wiki/XMLHttpRequest

    AJAX-BibliothekenPrototypehttp://prototype.conio.net/www.sergiopereira.com/articles/prototype.js.htmlMochiKitwww.mochikit.com

    AJAX-FrameworksAtlas Client Script Framework(Microsoft)www.microsoft.com/germany/msdn/library/web/AJAXUndASPNET.mspx?mfr=trueGoogle Web Toolkithttp://code.google.com/webtoolkit/moo.fxhttp://moofx.mad4milk.net/SAJAXhttp://absinth.modernmethod.com/sajax/Scriptaculoushttp://script.aculo.usSpryhttp://labs.adobe.com/technologies/spry/XAJAXwww.xajaxproject.org/YUIhttp://developer.yahoo.com/yui/

    Die besten Links

    | CHIP | SOFTWARE | WEBDESIGN | 13

    http://de.wikipedia.org/wiki/Ajax_http://itredux.com/office-20/database/http://developer.mozilla.org/de/docs/http://developer.apple.com/internet/http://de.wikipedia.org/wiki/XMLHttphttp://prototype.conio.net/http://code.google.com/webtoolkit/http://moofx.mad4milk.net/http://absinth.modernmethod.com/http://script.aculo.ushttp://labs.adobe.com/technologies/http://developer.yahoo.com/yui/

  • 14 | CHIP | SOFTWARE | WEBDESIGN |

    WEBHOSTER IM ÜBERBLICK

    Der ideale Hosting-Tarif zum Nach wie vor ist die Vielfalt der Webhosting-Angebote kaum zuüberblicken. In diesem Beitrag er-fahren Einsteiger, Fortgeschrittene und Profis, wie sie den richtigen Tarif finden.

    Hosting für EinsteigerDie beiden großen Anbieter 1&1 undStrato bieten ein umfassendes Software-paket für den Homepage-Start: Ein kom-merzielles Programm zum Gestalten vonWebsites und Software zum Bearbeiten von Grafiken bekommen Sie bereits inden Einsteigerpaketen kostenlos dazu.

    Haben Sie noch nie programmiertoder mit HTML gearbeitet, sind Angebotemit Homepage-Baukästen sehr hilfreich.Mehr Informationen dazu finden Sie imArtikel ab s64. Wenn Sie oft von mehre-ren Arbeitsplätzen aus arbeiten, solltenSie darauf achten, dass Sie Ihre E-Mails über eine webbasierte Oberfläche verwal-ten können.

    Vielen wird ein Einsteigerpaket ausrei-chen. 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 tele-fonischen Support anbietet.

    Hosting für FortgeschritteneWenn Sie bereits eine Homepage haben,geht es nun darum, den Funktionsum-fang der Seite zu erweitern. Am einfachs-ten geschieht dies mit vordefinierten Fea-tures. In diesem Bereich bieten Ihnenzahlreiche Webhoster eine umfangreicheSammlung von CGI-Skripten und ferti-gen Funktionalitäten an, die Sie mit weni-gen Programmzeilen in Ihre Seiten inte-grieren können. So kommen Sie schnell zu einem Gästebuch, einem Forum oder einem Blog.

    Jeder möchte wissen, wie seine Home-page 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 gra-fische Auswertung zur Verfügung gestellt werden. Damit bekommen Sie einen gu-ten Überblick über den Traffic auf IhrerHomepage und erfahren auch, welche Be-reiche Ihrer Website mehr und welche weniger attraktiv sind.

    Zum Verkauf von Waren bieten zahl-reiche Webhoster vorkonfigurierte On-lineshops. Stellen Sie bei der Auswahl des Hosters einen Vergleich der Transaktions-kosten an: Ist der Verkauf Ihrer Produktegratis, oder verlangt der Anbieter eine Ge-bühr pro Transaktion? Können Sie Ihren Kunden Kreditkartenzahlungen ermög-lichen? Wie viel kostet eine Transaktion?

    Hosting für ProfisHosting-Angebote für Profis sollten PHP in der aktuellen Version unterstützen.Wichtig ist die Option, eigene Skripte an-zulegen und einzusetzen, auch MySQL-Datenbanken sollten nicht fehlen.

    Gerade im Profibereich sind auch dieParameter Webspace und enthaltener Traf-fic sehr wichtig. Denn falls Sie eine Web-site einrichten möchten, auf der Sie viele Daten speichern und Ihren Kunden zum Download anbieten, kommt recht schnell ein hohes Kommunikationsvolumen zu-sammen, das sich viele Anbieter teuer be-zahlen 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 zuspäter Stunde oder am Wochenende je-mand für Sie da sein. Viele Anbieter offe-rieren ihren Premium-Kunden kosten-losen Support rund um die Uhr.

    Ein weiterer Punkt, den Sie keinesfalls unterschätzen sollten, sind die Backups Ihrer Website. Achten Sie darauf, dass IhrHoster eine Backup-Lösung anbietet, mit der Sie Ihre Website selbstständig rekon-struieren können, falls diese – aus wel-chen Gründen auch immer – zerstörtwird. Andreas Hitzig

    PROFISAnbieter Strato 1&1URL www.strato.de www.1und1.infoPaketname PowerWeb S 1&1 BusinessAnzahl Domains (de) 4 3Speicherplatz 500 MByte 500 MByteEnthaltener Traffic 30 GByte 30 GByteFTP-Zugang ● ●POP3-Postfächer 150 150Anti-Spam ● ●UMS ● ●SMS/Fax 50 gratis/Monat, jede

    weitere SMS 0,09 €*0,12 € pro SMS,0,24 € je DIN-A4-Seite

    Webclient ● ●MySQL-Datenbanken 1 2PHP4 ● ●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 €

    EINSTEIGERAnbieter Strato 1&1URL www.strato.de www.1und1.infoPaketname WebVisitenkarte C 1&1 WebsiteAnzahl Domains (de) 2 1Speicherplatz 40 MByte 100 MByteEnthaltener Traffic 8 GByte 7,5 GByteFTP-Zugang ● ●POP3-Postfächer 25 10Anti-Spam ● ●UMS ● ●SMS/Fax 10 gratis/Monat, jede

    weitere SMS 0,09 €*0,12 € pro SMS, 0,24 € je DIN-A4-Seite

    Webclient ● ●Onlineshop ● ●CGI-Baukasten ● ●ClipArts ● ●FrontPage-Erweiterung ● -Einrichtungsgebühr 19,90 € 9,80 €Preis/Jahr 11,88 € 35,88 €Preis im 1. Jahr 31,78 € 45,68 €Mindestlaufzeit 12 Monate 12 Monate

    FORTGESCHRITTENEAnbieter Strato 1&1URL www.strato.de www.1und1.infoPaketname PowerWeb XE 1&1 WebsiteAnzahl Domains (de) 3 1Speicherplatz 150 MByte 100 MByteEnthaltener Traffic 10 GByte 7,5 GByteFTP-Zugang ● ●POP3-Postfächer 50 10Anti-Spam ● ●UMS ● ●SMS/Fax 50 gratis/Monat, jede

    weitere SMS 0,09 €*0,12 € pro SMS,0,24 € je DIN-A4-Seite

    Webclient ● ●Onlineshop ● ●CGI-Baukasten ● ●ClipArts ● ●FrontPage-Erweiterung ● -Einrichtungsgebühr 19,90 € 9,80 €Preis/Jahr 23,88 € 47,88 €Preis im 1. Jahr 43,78 € 57,68 €Mindestlaufzeit 6 Monate 12 Monate

    ● = ja; - = nein

  • | CHIP | SOFTWARE | WEBDESIGN | 15

    kleinen PreisBei der Suche nach dem geeigneten Webhoster

    geht es nicht nur um Speicherplatz und Trans-

    fervolumen. CHIP sagt Ihnen, worauf Sie bei der

    Auswahl besonderen Wert legen sollten.

    Lycos Evanzo Goneo Host Europe Server4you Domainfactory Hetzner 1bluwww.lycos.de www.evanzo.de www.goneo.de www.hosteurope.de www.server4you.de www.domainfactory.de www.hetzner.de www.1blu.deActive webXS500 Homepage Plus WebPack M Racer Pro Kein Angebot SH 500 Homepage Professional1 1 3 1 3 1 31000 MByte 500 MByte 1000 MByte 200 MByte 800 MByte 500 MByte 500 MByte20 GByte Kein Limit Kein Limit 50 GByte 100 GByte 20 GByte 30 GByte● ● ● ● ● ● ●

    100 Kein Limit 200 3 200 50 100- ● ● ● - ● ●- - - - - - -- - - - - - -

    ● ● ● ● ● ● ●

    1 1 3 1 1 1 1● ● ● ● ● ● ●

    ● ● ● ● - ● ●- ● ● ● ● ● ●● - ● ● ● ● -● ● ● ● ● ● ●

    - ● (Open Source) ● (Open Source) - - - GS ShopBuilder Basic● - Bedingt ● ● ● Eigene Skripte einsetzbar- - ● - ● - -● ● - - ● - -- - - 14,99 € - - 16,90 €83,40 € 41,88 € 22,05 € 41,88 € 71,10 € 59,88 € 29,40 €83,40 € 41,88 € 22,05 € 56,87 € 71,10 € 59,88 € 46,30 €12 Monate 12 Monate 12 Monate 12 Monate 12 Monate 30 Tage 6 Monate

    Lycos Evanzo Goneo Host Europe Server4you Domainfactory Hetzner 1bluwww.lycos.de www.evanzo.de www.goneo.de www.hosteurope.de www.server4you.de www.domainfactory.de www.hetzner.de www.1blu.deActive webXS Homepage Start WebPack S Racer Go MyHome S SH 200 Homepage1 1 2 1 2 1 1 11000 MByte 300 MByte 500 MByte 100 MByte 300 MByte 100 MByte 100 MByte 40 MByte20 GByte Kein Limit Kein Limit 25 GByte 50 GByte Kein Limit 10 GByte 8 GByte● ● ● ● ● ● ● ●

    100 Kein Limit 100 2 100 Kein Limit 25 25- ● ● ● - ● ● ●- - - - - - - -- - - - - SMS: 0,09 € je SMS - -

    - ● ● ● ● ● ● ●- ● ● (osCommerce) - - - - GS ShopBuilder Basic● Eigene Skripte nutzbar Eigene Skripte nutzbar ● ● ● ● -- - ● - ● - - -● ● - - - - - -- 14,99 € - 14,99 € - 4,90 € 9,90 € 16,90 €83,40 € 12,00 € 11,25 € 17,88 € 26,10 € 11,88 € 23,88 € 10,80 €83,40 € 26,99 € 11,25 € 32,87 € - 16,78 € 33,78 € 27,70 €12 Monate 12 Monate 12 Monate 12 Monate 12 Monate 12 Monate 30 Tage 12 Monate

    Lycos Evanzo Goneo Host Europe Server4you Domainfactory Hetzner 1bluwww.lycos.de www.evanzo.de www.goneo.de www.hosteurope.de www.server4you.de www.domainfactory.de www.hetzner.de www.1blu.deActive webXS Homepage Start WebPack S Racer Go MyHome S SH 200 Homepage Professionell1 1 2 1 2 1 1 331000 MByte 300 MByte 500 MByte 100 MByte 300 MByte 100 MByte 100 MByte 500 MByte20 GByte Kein Limit Kein Limit 25 GByte 50 GByte Kein Limit 10 GByte 30 GByte● ● ● ● ● ● ● ●

    100 Kein Limit 100 2 100 Kein Limit 25 100- ● ● ● - ● ● ●- - - - - - - -- - - - - SMS: 0,09 € je SMS - -

    ● ● ● ● ● ● ● ●

    - ● ● (osCommerce) - - - - GS ShopBuilder Basic● Eigene Skripte nutzbar Eigene Skripte nutzbar ● ● ● ● Eigene Skripte nutzbar- - ● - ● - - -● ● - - - - - -- 14,99 € - 14,99 € - 4,90 € 9,90 € 16,90 €83,40 € 12,00 € 11,25 € 17,88 € 26,10 € 11,88 € 23,88 € 29,40 €83,40 € 26,99 € 11,25 € 32,87 € - 16,78 € 33,78 € 46,30 €12 Monate 12 Monate 12 Monate 12 Monate 12 Monate 12 Monate 30 Tage 6 Monate

  • 16 | CHIP | SOFTWARE | WEBDESIGN |

    WEBSITE GRATIS PARKEN

    Kostenloser Webspace

    Das Internet ist eine Fundgrube der unterschiedlichsten Dienstleistun-gen, wobei sich gerade die kosten-losen besonderer Beliebtheit erfreuen.Noch vor nicht allzu langer Zeit bekamen Sie Gratis-Webspace an jeder Ecke. Meist mussten Sie sich nur registrieren und hat-ten 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 zu-sammengestellt.

    Heute gibt es nur noch wenig Kosten-loses ohne Gegenleistung im Internet. So verhält es sich auch beim Webspace. Da-mit der Registrierungsvorgang nicht zu langwierig wird oder Sie zu viele persön-liche Informationen preisgeben müssen,haben wir einige Bedingungen für die Gratishoster definiert: Das Angebot muss zeitnah freigeschaltet werden, einen voll-wertigen FTP-Zugang und eine Daten-bank enthalten sowie PHP oder ASP un-terstützen. Nur wer diese Kriterien erfüllt,schaffte es in unsere Übersicht.

    Byto.deMit 500 MByte Speicherplatz ist die Web-präsenz ausreichend dimensioniert. Sie haben keine Einschränkungen beim Traf-fic, sodass Ihre Seite auch bei starker Fre-quentierung immer erreichbar ist. Beson-ders erfreulich ist die schnelle Freischal-tung. Bereits nach weniger als 30 Minutenkönnen Sie per FTP auf Ihren Speicher-platz zugreifen und Ihre Seite erreichen.Zur Verwaltung der MySQL-Datenbank steht phpMyAdmin zur Verfügung. Die Funktion zum Ändern der Initialpass-wörter ist allerdings ein wenig versteckt;Sie finden sie in der Webspace-Verwal-tung. Das dortige Zugangspasswort ist übrigens Ihr FTP-Passwort.

    Elusive WebservicesNicht nur wegen des ungewöhnlichen Na-mens sticht dieses Angebot ins Auge. Elu-sive fiel vor allem positiv auf, weil der un-limitierte Webspace sofort nach der Re-gistrierung verfügbar war. Sie bekommen nicht nur beliebig viel Speicherplatz, son-dern 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 Web-FTP hochladen. Finanziert wird das Gan-ze durch Werbe-Einblendungen.

    File4U.netDer einzige Anbieter in unserer Markt-übersicht, der ASP, ASP.Net und eine FrontPage-2002-Erweiterung kostenlos bereitstellt, ist File4U. Ihnen stehen ins-gesamt 20 MByte für Ihre Webpräsenz zur Verfügung, ein Limit für die Datentrans-fermenge gibt es nicht.

    Der Webspace wird manuell eingerich-tet und freigeschaltet. Bei unserem Test-account hat es mehrere Tage gedauert,bis die Zugangsdaten per E-Mail eintra-fen. Ein wenig Geduld ist bei diesem An-bieter also durchaus angebracht.

    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.

    DIE WICHTIGSTEN ANBIETER VON

    Ja-Nee.deDer Name lässt auf Kompromisse schlie-ßen, aber das Angebot von Ja-Nee.dekann sich sehen lassen. Lediglich der nurbedingt vorhandene FTP-Zugang ist ein Manko. Der Zugang lässt sich nur über PayPal freischalten – für zehn Cent. Es istzu vermuten, dass der Provider damit einem Missbrauch seines Angebots einenRiegel vorschieben will.

    Bei Ja-Nee.de bekommen Sie neben 150 MByte Speicherplatz auch eine My-SQL Datenbank und 20 GByte Transfer-volumen. Die Verwaltung Ihrer Webprä-senz finden Sie ohne Umwege in der Rub-rik „Verwaltung“, wo Sie sämtliche Pass-wörter ändern und eine Weiterleitung einrichten können.

    Ohost.deEin weiterer Anbieter, der den gebuchten Webspace sofort freischaltet, ist Ohost.de.Sie bekommen bei diesem Provider insge-

    TIPP

    Die Webhoster erwarten bei der Registrie-rung korrekte Eingaben und versprechen im Gegenzug, Ihre Daten nicht an Werbe-firmen weiterzugeben. Trotzdem sollten Sie sich eine weitere Mailadresse zulegen, die Sie lediglich für Registrierungen im In-ternet verwenden. Ein regelmäßiger Blick in dieses Postfach zeigt, ob die Webhos-ter ihr Versprechen gehalten haben oder ob Ihr Posteingang ziemlich schnell von Spamwellen überflutet wird.

    Spam unterbinden

    Anbieter Byto.de

    URL www.byto.de/

    Art der Domain name.byto.de

    Speicherplatz 500 MByteTraffic-Limitierung UnlimitiertFTP-Zugang ●

    WebFTP -POP3-Postfach -CGI erlaubt ●

    PHP4/5 ●

    MySQL 1ASP/ASP.Net -/-FrontPage-Erweiterung -Sonstiges phpMyAdmin

    Freigabe Zugangsdaten sofort,Freischaltung binnen30 Minuten

    ● = ja; - = nein

  • | CHIP | SOFTWARE | WEBDESIGN | 17

    GRATIS-WEBSPACE IM ÜBERBLICK

    samt 2,5 GByte Webspace zugeteilt, der sich durch gelegentliche Werbe-Einblen-dungen finanziert. Die Verwaltung der Homepage erfolgt über eine sehr über-sichtlich gestaltete Verwaltungsseite. Vondort aus können Sie auch den FTP-Zu-gang und die MySQL-Datenbank akti-vieren. Die lässt sich wie gewohnt über phpMyAdmin pflegen.

    Ohost.de bietet seinen Usern darüber hinaus die Möglichkeit, sich an der eigenseingerichteten Community zu beteiligen.Dazu richten Sie einfach Ihr Profil ent-sprechend ein.

    PytalDie Administration bei Pytal ist sehr be-nutzerfreundlich gehalten. Nach der Re-gistrierung bekommen Sie eine E-Mail zugeschickt, mit der Sie Ihre Homepage aktivieren. Danach kann man die Web-präsenz online konfigurieren und die Zu-satzangebote FTP, PHP und MySQL frei-schalten und einrichten.

    Alle notwendigen Informationen zur Pflege Ihrer Seite sind im Verwaltungsbe-reich zu finden. Die Änderung der Pass-wörter erfolgt ebenfalls an dieser Stelle.

    Als Tool zur Verwaltung der Daten-bank steht Ihnen – wie bei den meisten Webspace-Angeboten – phpMyAdmin zur Verfügung. Auf der Verwaltungsseite haben Sie auch die Möglichkeit, die täg-liche Sicherung Ihrer MySQL-Datenbank wieder zurückzusichern.

    Space for FreeDer Webspace-Provider Space for Free bietet den geringsten Speicherplatz imTestfeld – nur 10 MByte. Das Transfervo-lumen ist auf 10 GByte limitiert, was füreine private Homepage jedoch mehr alsausreichend 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 nichtzur Verfügung. Neben den statischen Sei-ten können Sie dank PHP und MySQL auch Skripte anlegen und dynamischeInhalte über die Datenbank erzeugen.

    Uttx.netBei Uttx.net bekommen Sie 150 MByteSpeicherplatz, fünf MySQL-Daten-banken, PHP4 oder PHP5 – und das Ganze ohne Werbung. Bei der Registrie-rung müssen Sie allzu viel Persönlichespreisgeben, die Freischaltung ist nach et-wa einer halben Stunde erledigt. Danachist Ihre Webpräsenz erreichbar.

    Bei Uttx.net haben Sie auch die Mög-lichkeit, 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

    Elusive Webservices File4U.net Ja-Nee.de Ohost.de Pytal Space for Free Uttx.net

    www.elusive-hosting.de

    http://file4u.net/freepage/

    www.ja-nee.de www.ohost.de www.pytal.de/ http://spaceforfree.de www.uttx.net

    name.kostenlos-php.de name.file4u.net www.name.ja-nee.de name.ohost.de name.pytal.de/com/eu/net/org

    Diverse Subdomains name.uttx.net

    Unlimitiert 20 MByte 150 MByte 2500 MByte Unlimitiert 10 MByte 150 MByteUnlimitiert Unlimitiert Unlimitiert Unlimitiert Unlimitiert 1 GByte Unlimitiert● ● Nur nach Freischaltung ● ● ● ●● - ● - - - -- 1 - - - - -● ● ● - ● ● ●● ● ● ● ● ● ●

    1 1 1 1 1 1 5-/- ● -/- -/- -/- -/- -/-- FrontPage 2002 - - - - -CMS und Forum gratis, phpMyAdmin

    phpMyAdmin Homepage Editor,eigene Bildergalerie

    phpMyAdmin phpMyAdmin phpMyAdmin phpMyAdmin

    Freischaltung sofortnach der Registrierung

    Bearbeitung der Frei-schaltung zwischen8 und 16 Uhr werktags

    Direkte Freigabe nach Registrierung, FTP-Zu-gang nur nach Authen-tifizierung über PayPal

    Sofortige Freischaltung nach Mail-Bestätigung

    Sofortige Freischaltung nach Mail-Bestätigung

    Freigabe innerhalb von 48 Stunden nach Registrierung

    Sofortige Freischaltung nach Mail-Bestätigung

    Ohost.de: Der Gratisprovider bietet nebendem Webhosting auch eine Community an.Die Verwaltungsseite ist sehr übersichtlich.

    Pytal: Beim Anlegen Ihrer Webpräsenzkönnen Sie aus mehreren Toplevel-Domainswählen – von de über com bis eu.

    http://file4u.net/http://spaceforfree.de

  • 18 | CHIP | SOFTWARE | WEBDESIGN |

    ALLE PROGRAMME AUF HEFT-CD

    Starten Sie durch zu Ihrem eigenen Internetauftritt: Auf der Heft-CD finden Sie drei Voll-

    versionen für den Homepage-Aufbau, den Start eines Webshops sowie die Foto- und Multimedia-

    Verwaltung – dazu die 50 besten Gratis-Tools zum Thema Website-Gestaltung.

    Die Top-Webdesign-Tools

    Der persönliche Internetauftritt dient längst nicht mehr nur als Vi-sitenkarte im Web – mit ihm las-sen Sie andere an Ihrem Leben teilhaben,werben für Ihren Fußballverein oder ver-kaufen Waren an eine weltweite Kund-schaft. Ob Familien-Homepage, Weblog oder aufwändige Business-Website – aufder Heft-CD finden Sie alle Tools, mit de-nen Sie Ihren ganz persönlichen Internet-auftritt 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 her-umschlagen zu müssen: einfach Designauswählen, nach Belieben anpassen und hochladen – fertig.

    Sie wollen einen eigenen Internet-shop aufbauen? Leichter als mit Smart-Store.biz 5 StartUp geht‘s nicht. Anhand weniger Vorgaben legt die Software ganz von selbst einen vollständigen Webshop an – inklusive Warenkorbsystem und On-line-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 For-mat umwandeln. Dabei hilft der Asham-poo Photo Commander: Das Tool öffnet nicht nur Bilder, es lassen sich mehr als 50Multimedia-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 unter-stützt, über das Homepage-Konzept-Tool Denim bis zum Profi-Weblogsystem WordPress. Beachten Sie die Lizenz-Be-stimmungen der einzelnen Anbieter.

    Features:,Websites per Drag & Drop,Support für Dia-shows, Filme, Sound und Musik,Rund 40 Vorlagen zur Auswahl

    Beschreibung: Mit Incomedia WebSite X1 ist die eigene Homepage nur noch wenige Klicks ent-fernt. Wählen Sie einfach das gewünsch-te 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 ver-zichten: Die Einsteiger-freundliche Soft-ware 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 Ver-sion X5 inklusive Einstiegs-Tutorial.

    ,CD-CODE Vollversion

    VOLLVERSIONWEBSITE X1

    Features:,Eigenes Online-Kaufhaus mit Waren-korbsystem,Integrierte Pro-duktverwaltung,AutomatischeShop-Generierung

    Beschreibung:SmartStore.biz 5 StartUp verhilft Ihnen zu einem profes-sionellen Internetkaufhaus mit allem Komfort. Sie wählen lediglich das Design aus und pflegen Ihre Waren ein – Smart-Store.biz gestaltet daraus den kom-pletten Webshop. Ein professionelles Warenkorbsystem erleichtert Ihren Kun-den den Einkauf, zudem unterstützt die Software sämtliche gängigen Online-Be-zahlmethoden, etwa PayPal, Kreditkarte oder Nachnahme. Dank integrierter Pro-duktverwaltung managen Sie mit Smart-Store Ihren kompletten Warenbestand.Hinweis: Sie müssen sich online regis-trieren. Bitte beachten Sie die Infos auf der Heft-CD.

    ,CD-CODE Vollversion

    VOLLVERSIONSMARTSTORE.BIZ 5 STARTUP

    Features:,Öffnet Bilder, Videos, Songs,Bildbearbeitungs-Features integriert,Kennt über 50 Formate

    Beschreibung: Unzähli-ge Dateien in den unter-schiedlichsten Formaten liegen auf mo-dernen Festplatten. Der Ashampoo Photo Commander 4 ist das perfekte Verwal-tungs- 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 Bildbearbeitungsfunkti-onen, 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

    VOLLVERSIONPHOTO COMMANDER 4

    Eigene Homepage BildverwaltungWebshop aufbauen

  • | CHIP | SOFTWARE | WEBDESIGN | 19

    *Noch mehr Freeware und Shareware finden Sie auf der Heft-CD.

    k CD-CODE hGRAFIK

    GIMPshop 2.2.8 s23

    IrfanView 3.98 s23

    SplitImage 1.5 s23

    Ulead Gif Animator Lite 1.0

    XnView Komplett 1.82.4 s24

    pkColorPicker 3.00.05 s24

    Buttonz & Tilez 1.5 s24

    Thumbnail Refinery LE 2.5.0.7

    k CD-CODE hFTP

    FileZilla 2.2.28

    CesarFTP 0.99

    k CD-CODE hHTML

    First Page 2006 3.0

    Absolute HTML Compressor 1.14

    Balthisar Cascade 2.0b11

    Byte Reducer 1.3

    CodeGen 1.4

    CSE HTML Validator Lite 7.01

    CSS-Maker 1.4.9

    Formular-Maker 1.2.4

    Fotos on Web 1.1.1

    Gallery 2.1

    Gallery Wizard 2.0 s23

    HTML Editor Phase 5.42

    HTML FontColorizer 2.04

    HTML-Tools 1.0

    JS-MenuMaker 1.0.0

    JS-Navigator 1.0.2

    Nvu – HTML-Editor 1.0 Final

    Peter‘s XML Editor 2.0

    Pop-Up Light Edition 4.6 L.E

    Replace-Manager 1.03

    StyleAssistant 1.0

    TopStyle Lite 3.10

    Weaverslave 3.9.18

    k CD-CODE hPHP

    Dev-PHP 2.0.12

    XAMPP 1.5.4a

    k CD-CODE hBROWSER

    Internet Explorer 7 + Firefox 2.0 + Opera 9.02 r

    k CD-CODE hCMS

    Joomla 1.0.11 s23

    typo3 4.0

    WordPress 2.042 s24

    k CD-CODE hWINDOWS

    Audacity 1.2.4b s92

    AdaUrl 2.02.001

    Check Load Time 2.1

    Denim 2.0 s24

    Loudblog 0.5.1 s94

    Re-Namer 1.0.4

    Windows Media Encoder 9.0 s25

    WinHTTrack 3.40 v2 s25

    7-Zip 4.42

    Keyword Extractor 1.03

    Riva FLV Encoder 2.0 s25

    DIE 50 TOP-TOOLS*

    Die CD startet automatisch. Ist „Autorun“ deaktiviert, öffnen Sie die „AUTOSTART. EXE“ im Hauptverzeichnis der CD. AlsBrowser benötigen Sie den Internet Ex-plorer ab 4.0, Firefox ab 1.0 oder Opera ab 6.0 mit aktiviertem JavaScript.

    Software installieren: Zu jedem Tool fin-den Sie ausführliche Beschreibungen.Unter den im Heft angegebenen CD-Codes oder über „Software“ können Sie alle Tools ansteuern. Mit einem Klickauf „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 Wa-renzeichen geschützt. Bitte beachten Sie die Lizenzbestimmungen. Hilfe zu den ein-zelnen Programmen erhalten Sie direkt vom Hersteller.

    Bitte schalten Sie die Vollversionen in-nerhalb der nächsten zwei Monate frei, danach verfallen die Schlüssel.

    So legen Sie los

    HINWEISE ZUR CD

  • 20 | CHIP | SOFTWARE | WEBDESIGN |

    ALLE PROGRAMME AUF HEFT-CD

    Die 50 besten ToolsOb 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.

    AUF CD

    A lle von CHIP getestet - Mit Tipps zu

    jedem

    Tool

    DIE50

    TOPTOOLS

    VOLLVERSION: SMARTSTORE.BIZ 5 STARTUP

    Schritt für Schritt: Eigenen Onlineshop aufbauen

    1 Grundeinstellungen vornehmen: Star-ten Sie das Programm und installieren Sie eventuell vorhandene Updates. Legen Sie ein neues Projekt an, und tragen Sie im Assistenten Anschrift, Logo, belieferte Län-der, Steuergebiet, Standard-Zahlungsverfah-ren und Standard-Versandarten sowie Ser-vice-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 einge-tragen ist.

    2 Warengruppe verwalten: Sie können alle Produkte auf verschiedene Waren-gruppen aufteilen. Dazu wählen Sie „Pro-dukte“, klicken mit rechts in das Feld „Wa-rengruppen“ und wählen „Neue Warengrup-pe“. Tragen Sie eine beliebige Gruppennum-mer und -bezeichnung ein. Auf Wunsch legen Sie noch eine HTML-Beschreibung an. In der Registerkarte „Medien“ fügen Sie der Gruppeein Bild hinzu. In dieser Version können Sie jeder Warengruppe noch eine Untergruppe zuordnen, die im Shop berücksichtigt wird.

    3 Produkte einpflegen: Über den inte-grierten Produktmanager verwalten Sie bis zu 100 Produkte. Um einen Posten hinzu-zufü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 Soft-ware aus dem Einkaufspreis und dem ge-wünschten Verkaufsaufschlag. Steuersatz, Lieferzeit oder Mindestbestellmenge be-stimmen Sie für jedes Produkt einzeln. Auch Mengenrabatte sind möglich.

    4 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-

    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, in-dividuell anpassen.

    5 Struktur und Seitengestaltung festle-gen: Die Struktur Ihres Onlineshops le-gen Sie im Menü „Seiten“ fest. In der Stan-dardeinstellung sind bereits alle wichtigen Elemente integriert. Sie können diese Anord-nung via Drag & Drop beliebig ändern. Ach-tung: Füllen Sie unbedingt Impressum und AGB aus! Im Menü „Vorlagen“ bestimmen Sie das grundsätzliche Design von Seiten, Warengruppen- und Produktansichten.

    6 Shop testen und ins Web stellen: So-bald 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 be-kommen. 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 aktu-alisiert SmartStore.biz lediglich.

    1 Grundeinstellungen: Ein Assistentführt Sie sicher durch die erstenSchritte zum eigenen Onlineshop.

    2 Warengruppen: Sie erleichterndie Verwaltung der Produkte undden Kunden die Navigation im Store.

    3 Produkte: Im Produktmanager legenSie für jede Ware den individuellenPreis, den Steuersatz oder die Lieferzeit fest.

    5 Struktur: Inhalte und Position vonallen Nicht-Produkt-Seiten, etwaden AGB, legen Sie im Sitemanager fest.

  • | CHIP | SOFTWARE | WEBDESIGN | 21

    .

    VOLLVERSION: ASHAMPOO PHOTO COMMANDER 4

    Schritt für Schritt: Bilder fürs Web optimieren

    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 Pro-gramm im Einsteiger- oder Expertenmodus ausgeführt werden soll; der Einsteigermodusblendet 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 freischal-ten“. Den Schlüssel geben Sie unter „Hilfe | Kaufen / Registrieren“ ein.

    2 Rote Augen entfernen: Um mit demAshampoo Photo Commander rot ge-blitzte 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ßan-sicht auf das Werkzeug „Rote Augen entfer-nen“. Nun wird das Foto vergrößert darge-stellt, und der Mauszeiger verwandelt sich in ein Fadenkreuz. Setzen Sie den Cursor links

    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, be-stätigen Sie mit „Ja“.

    3 Bildgröße ändern: Öffnen Sie den Ord-ner, 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 konvertie-ren“. Bestätigen Sie die Datei-Auswahl mit „Weiter“. Aktivieren Sie „Bildgröße ändern“ und „Seitenverhältnis beibehalten“ und le-gen Sie unter Maßeinheit „Pixel“ fest. Tra-gen Sie nun die neue „Breite“ ein. Bei Web-bildern sollte sie 600 Pixel nicht überschrei-ten. Wählen Sie unter „Ausgabeverzeichnis“ den Speicherort für die skalierten Dateien und legen Sie unter „Ausgabeformat“ „JPG“ fest. Drücken Sie „Weiter“.

    4 Bilder beschneiden: Um ein Bild zuzu-schneiden, 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 wegge-schnitten. Klicken Sie nun mit der rechten Maustaste in die Markierung und wählen Sie „Auswahl freistellen“. Sofort schneidet der Photo Commander das Bild zu.

    5 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 erhal-ten sollen, und klicken Sie unter „Assisten-ten“ 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 akti-vieren Sie „Wasserzeichen aus Datei hinzu-fügen“. Direkt darunter legen Sie die Trans-parenz fest: „0“ steht für volle Transparenz, „255“ für keine. Mit einem Wert von 50 lie-gen Sie richtig. Klicken Sie danach auf „…“ und navigieren Sie zu der Grafik, die als Was-serzeichen eingefügt werden soll. Wählen Sie Ausgabeverzeichnis und -format und be-stätigen Sie mit „Weiter“.

    6 Webgalerie anlegen: Markieren Sie al-le 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 Sieeinen Namen für die fertige HTML-Datei ein und bestimmen Sie Speicherort und Ausga-beformat. Wählen Sie als Format „JPG“. Pas-sen Sie die restlichen Optionen, etwa Hinter-grundfarbe, Rahmen der Miniaturen oder die Anzahl der Spalten für die Vorschaubilder, Ihrem Geschmack an. Mit „Weiter“ legt der Photo Commander die Galerie an.

    1 Einrichten: Im Einrichtungsassisten-ten legen Sie fest, welche Datei-formate Photo Commander öffnen soll.

    2 Rote Augen: Markieren und be-stätigen – so einfach entfernen Sierote Augen aus falsch belichteten Fotos.

    3 Bildgröße: Über die integrierteStapelverarbeitung ändern Sie dieGröße von mehreren Fotos gleichzeitig.

    5 Wasserzeichen: Versehen Sie IhreBilder im Web mit Wasserzeichen,um sie vor Missbrauch zu schützen.

    4 Beschneiden: Mit dem Schneide-Werkzeug entfernen Sie blitzschnellüberflüssige Bildinhalte.

  • 22 | CHIP | SOFTWARE | WEBDESIGN |

    VOLLVERSION: WEBSITE X1

    Schritt für Schritt: Homepage aufbauen

    1 Vorbereitungen: Drücken Sie im Will-kommensbildschirm auf „Weiter“. Be-nutzen Sie WebSite X1 zum ersten Mal, wäh-len 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 IhreWebsite links oder am oberen Rand des Browsers befinden soll. Im letzten Schritt wählen Sie eine Designvorlage aus und be-stimmen die Farbgebung.

    2 Seitenstruktur anlegen: Mit der Site-map legen Sie fest, wie viele Untersei-ten Ihre Website haben soll. Klicken Sie im Hauptfenster von WebSite X1 auf „Menü“, wählen Sie rechts „Neue Seite“ und verge-ben 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“.

    3 Seitenlayout erzeugen: An dieser Stelle gestalten Sie das Grundraster jeder ein-zelnen Seite. Über die blauen Icons oberhalb

    der Hauptseite können Sie neue Spalten und Zeilen hinzufügen. Ziehen Sie danach die ge-wünschten Elemente von rechts auf das Ras-ter. Haben Sie ein Bildelement auf die Seite gezogen, klicken Sie zweimal darauf. Wäh-len Sie das Bild, das an dieser Stelle zu se-hen 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 Überblen-dung und Anzeigedauer und bestätigen mit „OK“. Wiederholen Sie diesen Vorgang für alle Seiten Ihrer Homepage.

    4 Erweiterte Einstellungen: Um zu prü-fen, wie die Website im Browser aus-sieht, klicken Sie oben auf „Test“ und bestä-tigen den Hinweis mit „OK“. Sollte der Inter-net 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 Register-karte „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 Seitenbe-schreibung ändern, unter „Bildlaufleiste“ die Scroll-Leisten für Ihre Seite anpassen.

    5 Website uploaden: Im letzten Schritt stellen Sie Ihre neue Homepage ins In-ternet. Auf der Website Ihres Providers finden Sie den Namen des FTP-Servers; Passwort und Benutzername haben Sie vom Provider bereits erhalten. Um die Homepage hochzu-laden, 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 zu-meist 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“.

    1 Vorbereitungen: Über die Design-vorlagen legen Sie ganz einfach dasAussehen Ihrer Website fest.

    2 Seitenstruktur: Neue Unterseitenlegen Sie per Mausklick an undbenennen Sie nach Belieben.

    3 Seitenlayout: Per Drag & Drop legenSie Art und Platzierung der einzelnenElemente für jede Unterseite fest.

    4 Details: Die Gestaltung einzelnerElemente, etwa der Scroll-Leisten,können Sie Ihrem Geschmack anpassen.

    5 Upload: Zum Hochladen der Dateienauf Ihren Webspace tragen Sienur noch Name, Passwort und Server ein.

    NACHFOLGER AUF HEFT-CD

    Neue Version: Auf der Heft-CD findenSie eine Testversion des aktuellen Web-Site X5 inklusive Einleitungs-Tutorial.Die neue Version ist in vielen Belangenverbessert: Sie bietet statt 20 rund 500Designvorlagen. Zudem lassen sich jetzt auch Untermenüs erzeugen; die Be-schränkung auf 24 Unterseiten wurdeaufgehoben. An Elementen sind unteranderem Slideshows, Rollover-Effekte,Tabellen und Formulare hinzugekom-men; außerdem lassen sich die Seitenper Passwort schützen.

  • | CHIP | SOFTWARE | WEBDESIGN | 23

    JOOMLA

    den einen neue Seite, der Text muss forma-tiert, Bilder müssen eingebaut werden. Mit einem Content-Management-System(CMS) wie Joomla ist das alles kein Pro-blem. Ist das Grund-layout einmal ange-legt, braucht es nicht mehr geändert zu werden. Alle neuen Beiträge lädt der Au-tor über das Joomla-Webinterface hoch – das Einpflegen über-

    nimmt 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 PHPund MySQL. Auf der Heft-CD finden Sie das Paket XAMPP, das alle Komponenten enthält und sich auch lokal installieren lässt.

    Features:kWebsites einfach mit Inhalt füllenk Automatischer Einbau ins Layoutk Beliebig erweiterbarBeschreibung: Webseiten, die häufig ak-tualisiert werden müssen, sind mit einem HTML-Editor nur umständlich zu pflegen. Ein neuer Beitrag erfordert unter Umstän-

    Einfache Homepage-Pflege per CMS

    ,CD-CODE hCMS

    Features:k Professionelle Bildbearbeitungk Unterstützung von Ebenenk Photoshop-ähnliche OberflächeBeschreibung: GIMPShop basiert auf der meistgenutzten Open-Source-Bildbear-beitung GIMP. Die neue Version überzeugt durch eine einfachere Oberfläche und bie-tet 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“.

    ,CD-CODE hGrafik

    GIMPSHOP

    Fotos bearbeiten

    Features:k Auto-Galerien mit HTMLk Diverse Effektek Zahlreiche BildformateBeschreibung: Mit der Freeware Gallery Wizard legen Sie spielend leicht Fotogale-rien an. Die Thumbnail-Voransicht erzeugt das Tool automatisch aus mehreren Ord-nern, alle Bilder werden auf Wunsch auf die gleiche Größe gebracht. Das inte-grierte FTP-Tool überträgt die Galerie di-rekt auf den eigenen Webserver.Tipp: Um alle verwendeten Bilder bei Be-darf ins JPG-Format umzuwandeln, wäh-len Sie den Eintrag „Gallery Options | Con-vert non-JPG images…“.

    ,CD-CODE hHTML

    GALLERY WIZARD

    Galerien erzeugen

    Features:k Foto, Audio, Video anzeigenkMehr als 60 Dateiformatek Fotogalerien und Diashows anlegenBeschreibung: IrfanView zeigt mehr als60 verschiedene Dateiformate an, darun-ter auch Musik und Videos. Zudem gene-riert 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 Ska-lierung auf mehrere Bilder gleichzeitig an.

    ,CD-CODE hGrafik

    IRFANVIEW

    Bilder betrachtenFeatures:k Grafiken in Tabellen aufteilenk Ideal für Navigationsmenüsk Beliebige AufteilungBeschreibung: Mit SplitImage teilen Sie beliebige Bilder in Spalten und Zeilen auf. SplitImage legt aus den Informationeneine HTML-Tabelle an, die die einzelnen Stücke auf der Webseite wieder zusam-mensetzt. Vorteil: Jedes Teilstück lässt sich mit einem eigenen Link versehen.Tipp: Verwenden Sie die mit SplitImage angelegten Bilder-Tabellen für Navigations-menüs auf Ihrer Website.

    ,CD-CODE hGrafik

    SPLITIMAGE

    Grafik mit Hotspots

  • 24 | CHIP | SOFTWARE | WEBDESIGN |

    ,CD-CODE hWindows ,CD-CODE hWindows ,CD-CODE hFTP

    Features:kWebsite am PC vorskizzierenk Unterseiten einfach verlinkenk Support für GrafiktablettsBeschreibung: Denim erleichtert Ihnen die Planung Ihrer Homepage erheblich. Mithilfe dieses Tools zeichnen Sie die Sei-tenstruktur schnell und unkompliziert am Rechner vor und verlinken die Seiten mit-einander. So vermeiden Sie Probleme be-reits 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.

    DENIM

    Homepage planen

    WORDPRESS

    regelmäßigen Abstän-den Text- und Bildbei-träge auf Ihrem Web-space veröffentlichen können. Wählen Sie die gewünschte Vorlage, undschon können Sie Ihre Beiträge online stellen. In der Vorschau sehen Sie sofort, wie andere Surfer Ihren Blog wahr-nehmen, der Upload von Bildern erfolgt über einen einfachen Datei-dialog. Um die Anpas-

    sung ans Layout kümmert sich WordPress. Zudem lassen sich einzelne Beiträge mit einem Passwortschutz oder einem Kom-mentarfeld für Ihre Leser versehen.Tipp: Wie bei den meisten Open-Source-Projekten gibt es auch für WordPress zahl-reiche Erweiterungen (Plugins) und Themes (Vorlagen) im Internet. Auf der Heft-CD fin-den Sie das Podcasting-Plugin PodPress so-wie das Theme Wuhan.

    Features:k Professionelles Blog-Toolk Diverse Vorlagen und Erweiterungenk Einfach mit Inhalten zu füllenBeschreibung: Der eigene Blog ist für In-ternetfans ein Muss. Zum Füllen des Blogs ist jedoch ein klassischer HTML-Editor zu umständlich. An dieser Stelle kommt Word-Press in Spiel: Das Tool ist ein professio-nelles Blogger-Programm, mit dem Sie in

    Professionelles Weblog-System

    ,CD-CODE hCMS

    Features:k Beliebige HTML-Farben erzeugenk Auswahl über Farbpalettek Auto-Umwandlung in Hex-FormatBeschreibung: HTML bietet nur wenige Farbausdrücke wie „yellow“. Um nicht de-finierte Farben zu erzeugen, müssen die se hexadezimal eingegeben werden. Im pk-ColorPicker können Sie die Hex-Codes per Klick auf eine Farbe anzeigen lassen.Tipp: Um sicherzustellen, dass jeder Brow-ser die gewählte Farbe anzeigen kann, kli-cken Sie mit rechts auf die Tool-Oberfläche und aktivieren „Websichere Farben“.

    ,CD-CODE hGrafik

    PKCOLORPICKER

    Farbhilfe für HTMLFeatures:k Schaltflächen und Wallpaper gestaltenk Anpassen durch Schiebereglerk 3-D-EffekteBeschreibung: Mit Buttonz & Tilez legen Sie ganz einfach Schaltflächen und Hinter-grundmuster für Ihre Website an. Dazu stehen verschiedene Grundformen zur Aus-wahl; die Anpassung der Grafiken erfolgt über Schieberegler.Tipp: Um die Farbe eines Buttons zu än-dern, klicken Sie auf „Blank Color“. Mit dem Eintrag „Canvas Color“ definieren Sie die Farbe des Website-Hintergrunds.

    ,CD-CODE hGrafik

    BUTTONZ & TILEZ

    3-D-Buttons anlegenFeatures:k Grafiken anzeigen und konvertierenk Blitzschnelle AusführungkMehr als 400 Grafikformate unterstütztBeschreibung: Rund 400 Bildformate las-sen sich mit Xnview öffnen – exportieren kann das Tool in mehr als 50 Formate. Eineintegrierte Stapelverarbeitung konvertiert und skaliert ganze Bilderkolonnen oder versieht sie mit Effekten.Tipp: Sie können mit Xnview blitzschnell eine Bildergalerie fürs Web anlegen. Mar-kieren Sie dazu den Ordner und wählen Sie „Erstellen | Webseiten“.

    ,CD-CODE hGrafik

    XNVIEW

    Fotos verwalten

    ,CD-CODE hWindows

  • | CHIP | SOFTWARE | WEBDESIGN | 25

    LOUDBLOG

    Netz. Laden Sie die Ton- oder Videoda-teien mit Loudblog auf Ihren Webserver, und tragen Sie Titel, Beschreibung und Veröffentlichungszeitein. Das Tool stellt die Sendung darauf in fertigem Layoutinklusive Player auf Ihrer Homepage be-reit. Gleichzeitig legt es einen RSS-Feed an,den Ihre Hörer oder Zuschauer abonnie-ren können.

    Tipp: Sollen Ihre Hörer Audio-Kommentare unter Ihren Beitrag stellen dürfen, aktivie-ren Sie bei der Veröffentlichung Ihres Pod-casts in Schritt 2 den Punkt „Comments“ und wählen unter „Size limit“ den Speicher-platz, der pro Kommentar zur Verfügung steht. Bedenken Sie, dass alle Kommentare Platz auf Ihrem Webserver belegen.

    Features:k Podcasts einfach online stellenk Audio-Kommentare von Hörernk Integrierter Player für BeiträgeBeschreibung: Starten Sie Ihren eigenen Podcast: Die Ton- oder Videodatei nehmen Sie einfach an Ihrem Rechner auf, Loud-blog sorgt für die richtige Präsentation im

    Eigenen Podcast aufbauen

    ,CD-CODE hCMS

    Features:k Vielseitiger Sound-Editork Beherrscht alle wichtigen Tonformatek Zahlreiche EffektfilterBeschreibung: Der Audio-Editor Audacity zeichnet auf, mischt Tonspuren oder vari-iert die Abspielgeschwindigkeit. Zudem bietet das Tool diverse Filter zum Verfrem-den oder Beseitigen von Störungen.Tipp: Zum Filtern von Störungen markie-ren Sie ein Stück, das nur Rauschen ent-hält, und wählen „Effekt | Rauschentfer-nung | Rauschprofil ermitteln“, später im gleichen Menü „Rauschentfernung“.

    ,CD-CODE hWindows

    AUDACITY

    Sound bearbeiten

    Features:kWebsites offline ansehenk Automatischer Komplett-Downloadk Zeit und Kosten sparenBeschreibung: WinHTTrack lädt kom-plette Webseiten inklusive aller Untersei-ten, Bilder und aller weiteren Elemente in einem Zug auf Ihren Rechner. Die Seiten-struktur 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

    WINHTTRACK

    Offline browsen

    Features:k Filme und Sound verkleinernk Streaming-Dateien anlegenk Live-Übertragung ins InternetBeschreibung: Konvertieren Sie Video-filme oder Tonaufnahmen ins platzspa-rende Windows-Media-Forma