1


	Einführung
-	Startseite
-	Zum Buch
-	Konventionen
-	Impressum

	Internet
-	Das Internet
-	Geschichte des Internets
-	Internet-Dienste
-	Internet-Organisationen

	Site-Management
-	Promotion
-	Erfolgskontrolle
-	Relaunch
-	Kommunikation
-	Community-Strategien

	Design-Theorie
-	Designtheorie - Einführung
-	Farben
-	Textgestaltung
-	Site-Strukturen und Navigation
-	Zielgruppenorientiertes Design
-	Usability

	Web-Sprachen
-	Einführung
-	HTML-Tutorial
-	HTML-Tags
-	XHTML-Tags
-	JavaScript-Tutorial
-	DHTML
-	JavaScript-Know-How
-	CSS-Tutorial
-	SSI

	Design-Praxis
-	Einleitung
-	Arbeitsmittel
-	Tabellen
-	Frames
-	Textgestaltung
-	Formular-Gestaltung
-	Navigation
-	Sitemaps
-	Webrides
-	Browserkompatibiltät
-	Ladezeiten-Optimierung

	Technik I
-	Einleitung
-	Datenbanken und SQL
-	Perl/CGI-Tutorial
-	PHP-Einführung

	Technik II
-	Einleitung
-	Perl-Scripts konfigurieren
-	Formulare verschicken
-	Ein Forensystem installieren
-	Redaktionssystem
-	Session-Management mit Perl
-	Newsletter-Verwaltung

5.9 Webrides

Druck-Version | Startseite| Kontakt | AboutWebDesign.de

Inhaltsverzeichnis "Webrides"

5.9.1 Einführung
5.9.2 Technische Realisierung
5.9.2.1 Vorgehen
5.9.2.2 Die Codes
5.9.2.3 Kommentare zum Code
5.9.3 Anwendung
5.9.3.1 Die klassische Variante
5.9.3.2 Geheimtipp-Webrides
5.9.3.3 Site-Touren
5.9.3.4 Neue Variationen

Partnerprogramm

5.9.1 Einführung

Webrides sind moderierte Touren durch das World Wide Web. Seiten wie Netzpiloten.de leben von der Idee, den Benutzer auf eine Seite nach der anderen zu schicken und dazu eine nette Audio-Moderation laufen zu lassen. Daher ist die Idee, Ähnliches für die eigene Seite zu verwenden, recht interessant. Eine neue Art von Link-Liste ließe sich damit realisieren, oder auch eine Tour durch die eigene Seite, für Erstbesucher beispielsweise.

Bleiben wir aber noch einen kleinen Moment bei der Definition des Begriffs "Webride": wie ist "moderiert" zu verstehen? Moderation bedeutet hier, dass dem Surfer eine Liste von Seiten vorgegeben wird, die er der Reihe nach durchsurft. Währenddessen werden Kommentare und andere Informationen zu der gerade angesurften Seite angezeigt.

Dabei ist der "normale" Webdesigner auf Hausmittel angewiesen: einen eigenen Webride-Player als Browser-Erweiterung zu programmieren, übersteigt die Budgets der meisten Projekte wohl um einiges. Abgesehen davon müsste man die Besucher dann noch davon überzeugen, dass es sich lohnt, die Erweiterung herunterzuladen.

Nach oben

5.9.2 Technische Realisierung

5.9.2.1 Vorgehen

Die Praxis hat gezeigt, dass der Einsatz von Frames zu den besten Resultaten führt. Frames sind schließlich eine allgemein akzeptierte Technologie, die von allen modernen Browsern unterstützt wird. Mit ihrer Hilfe ist die Trennung von Anzeige- und Navigations-Einheit gar kein Problem!

Weiterhin wird JavaScript verwendet, um die Rides zu steuern. Wir greifen dabei auf moderne Technologien wie DOM und DHTML zurück, die Browserkompatibilität leidet darunter natürlich: Netscape ab Version 6 und der Internet Explorer ab Version 5 werden unterstützt. Wer einen Ansatz sucht, der auch zu älteren Browsern kompatibel ist, findet auf AboutWebDesign einen Artikel zum Thema.

5.9.2.2 Die Codes

Wir haben die entsprechenden Quelltexte in drei Dateien aufgeteilt, die im gleichen Verzeichnis liegen müssen:

ride.html:



            <html>

            <head>

                <title>Webride-Player</title>

            </head>

            <frameset  rows="*,200">

                <frame name="main" src="ride_haupt.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">

                <frame name="ride" src="ride_control.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">

            </frameset>

            </html>

index.html:



            <html>

            <head>

                <title>Webride-Player</title>

            </head>

            <frameset  rows="*,200">

                <frame name="main" src="ride_haupt.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">

                <frame name="ride" src="ride_control.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">

            </frameset>

            </html>

ride_haupt.html:



            <html>

            <head>

            <title></title>

            </head>

            <body>

            <h1>Webride wird initialisiert!</h1>

            </body>

            </html>

ride_control.html:



            <html>

            <head>

            <title></title>

            <script>

                var nowpage;

                var pages = new Array(

                    "AboutWebDesign.de",

                    "eBook-Projekt",

                    "Portal für Webworker",

                    "Artikel über Webrides"

                );

                

                var urls = new Array(

                    "http://www.aboutwebdesign.de",

                    "http://www.aboutwebdesign.de/ebook",

                    "http://www.aboutwebdesign.de/awd/portal.html",

                    "http://www.aboutwebdesign.de/awd/content/975277751.shtml"

                );

                

                var descs = new Array(

                    "Ein Online-Magazin über Webdesign. Regelmäßig aktualisierte News und Inhalte.",

                    "Eine Online-Referenz zum Thema Webdesign. Viele Kapitel.",

                    "Portalseite für Webworker mit vielen weiterführenden Links.",

                    "Ein älterer Artikel zu Webrides, der etwas kompatibler zu alten Browsern ist als dieses Beispiel."

                );

                    

                function init ()

                {

                    DisplayPage(0);

                }

                

                function checknumber (n)

                {

                    if (n >= pages.length)

                    {

                        return 0;

                    }

                    else 

                    {    

                        if (n < 0)

                        return pages.length-1;

                        else

                        return n;

                    }

                    

                }

            

                function prevpage ()

                {

                    DisplayPage(checknumber(nowpage-1));

                }

                

                        

                function nextpage ()

                {

                    DisplayPage(checknumber(nowpage+1));

                }

                

                function firstpage ()

                {

                    DisplayPage(checknumber(0));

                }    

            

                function lastpage ()

                {

                    DisplayPage(checknumber(pages.length-1));

                }    

                

                function DisplayPage (number)

                {        

                    // Titel anzeigen

                    var title = document.getElementById("nowpage");        

                    title.firstChild.nodeValue = "Aktuelle Seite: "+pages[number];

                    

                    // Nummer anzeigen:

                    var numberf = document.getElementById("number");        

                    numberf.firstChild.nodeValue = "(" + (number+1)+"/"+(pages.length) + ")";        

                    

                    // Beschreibung anzeigen:

                    var desc = document.getElementById("desc");        

                    desc.firstChild.nodeValue = descs[number];            

                    

                    // Seite anzeigen

                    parent.main.location.href = urls[number];

                    

                    nowpage = number;

                }

                

            </script>

            <style>

                body {background: white; font-family: Verdana, Arial; }

                h1 {font-family: Arial; font-size: 14pt;}

                .button {background: #EFEFEF;}

                .justcursor {color: black; text-decoration: none;}

                p {margin-bottom: 4px;margin-top: 4px}

            </style>

            </head>

            <body onLoad="init()">

            <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="2" align="center" bgcolor="Black">

            <tr>

            <td>

                <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="3" align="center" bgcolor="Silver">

                <tr>

                <td width="350" valign="top">

                <h1>Webride-Kontrolle</h1>

                <p id="nowpage">-</p>

                <p id="number">-</p>    

                

                <table>

                <tr>

                <td>

                

                    <table width="75" height="25" border="0" cellspacing="0" cellpadding="1" align="left" bgcolor="Black">

                    <tr>

                    <td>

                        <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="1" align="center" class="button">

                        <tr>

                        <td align="center" valign="middle">

                        <a href="javascript:prevpage();" class="justcursor"><<</a>

                        </td>

                        </tr>

                        </table>    

                    </td>

                    </tr>

                    </table>    

                

                </td>

                <td>

                    <table width="75" height="25" border="0" cellspacing="0" cellpadding="1" align="left" bgcolor="Black">

                    <tr>

                    <td>

                        <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="1" align="center" class="button">

                        <tr>

                        <td align="center" valign="middle">

                        <a href="javascript:nextpage();" class="justcursor">>></a>

                        </td>

                        </tr>

                        </table>    

                    </td>

                    </tr>

                    </table>    

                </td>

                <td>

                    <table width="75" height="25" border="0" cellspacing="0" cellpadding="1" align="left" bgcolor="Black">

                    <tr>

                    <td>

                        <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="1" align="center" class="button">

                        <tr>

                        <td align="center" valign="middle">

                        <a href="javascript:firstpage();" class="justcursor">Anfang</a>

                        </td>

                        </tr>

                        </table>    

                    </td>

                    </tr>

                    </table>    

                </td>    

                <td>

                    <table width="75" height="25" border="0" cellspacing="0" cellpadding="1" align="left" bgcolor="Black">

                    <tr>

                    <td>

                        <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="1" align="center" class="button">

                        <tr>

                        <td align="center" valign="middle">

                        <a href="javascript:lastpage();" class="justcursor">Ende</a>

                        </td>

                        </tr>

                        </table>    

                    </td>

                    </tr>

                    </table>    

                </td>    

                </tr>

                </table>

            

            

            

            

                </td>    

                <td valign="top" bgcolor="#E2E2E2">

                <h1>Beschreibung</h1>

                <p id="desc">-</p>

                </td>        

                </tr>

                </table>    

            </td>

            </tr>

            </table>

            </body>

            </html>

5.9.2.3 Kommentare zum Code

Wenn Sie den Code verstehen wollen, hier einige Anmerkungen, die sich als hilfreich erweisen könnten:

Im Prinzip funktioniert das Script so: beim Laden der Seite wird die Funktion init aufgerufen, die nichts anderes tut, als die erste Seite anzuzeigen. Die erste Seite? Die Daten der Seiten sind in drei Arrays direkt am Anfang des Scripts verwaltet: pages, urls und descs. Auf welcher Seite der User gerade ist, wird in der Variablen nowpage gespeichert.

Für die vier Kontroll-Buttons sind eigene Behandlungsroutinen definiert: firstpage, lastpage, nextpage und prevpage. Alle tun nichts anderes, als DisplayPage aufzurufen, die Routine, die die Seiten dann letztendlich anzeigt.

Dabei sehen wir uns aber mit einem kleinen Problem konfrontiert: nextpage verwendet den Code DisplayPage(checknumber(nowpage+1));. Da wir aber nur 4 Seiten im Ride gespeichert haben, bekommen wir Probleme, wenn nowpage größer als 3 ist. Deswegen ist die Funktion checknumber vorgeschaltet. checknumber ist unkompliziert: wenn die anzuzeigende Seitennummer zu groß ist, wird einfach wieder die erste Seite angezeigt. Analog dazu wird, wenn die Seitennummer zu klein ist, die letzte Seite angezeigt. Alle anderen Seitennummern werden unverändert weitergegeben.

Bleibt noch DisplayPage: diese Funktion holt diverse Daten aus den drei Arrays und kümmert sich darum, dass die neue Seite in den Haupt-Frame geladen wird.

Nach oben

5.9.3 Anwendung

Nach der Klärung der technischen Seite wollen wir Ihnen nun einige Anwendungsbeispiele vorstellen und Tipps zur Gestaltung von Webrides geben.

5.9.3.1 Die klassische Variante

Klassisches Anwendungsbeispiel ist der klassische Webride: bestimmte, zu einem Themenkomplex gehörende Sites werden vorgestellt. Für Benutzer, die wirklich nach Informationen zu einem Thema suchen, eine gute Hilfe - vorausgesetzt, die angesteuerten Sites sind wirklich so gut wie es der Webride verspricht. Achten Sie also besonders auf die Qualität der Sites und Ihre Themenwahl: das Thema sollte so gewählt werden, dass sich fünf bis zehn gute Sites dazu aufstöbern lassen. Gleichzeitig sollten Sie aber auch ein zu weit ausuferndes Thema vermeiden: wenn es zwanzig Sites gibt, deren Inhalte für den interessierten Surfer allesamt Pflichtlektüre sind, sollten Sie versuchen, das Thema in Unterthemen zu unterteilen.

5.9.3.2 Geheimtipp-Webrides

Diese Variante basiert auf den gleichen Prinzipien wie die erste. Der einzige Unterschied: die erste Variante stellt allgemein bekannte Sites vor, diese Variante dagegen konzentriert sich auf bisher noch unbekannte Sites. Dass darunter die qualitativen Ansprüche nicht wesentlich leiden dürfen, versteht sich fast von selbst. Ein "Geheimtipp-Webride" bietet sich also nur dann an, wenn es wirklich genug Geheimtipps gibt.

5.9.3.3 Site-Touren

Manche Surfer reagieren auf eine neue Website zunächst einmal mit Verwirrung: oft sind Inhalte und Navigationsmenü so umfangreich, dass ein schneller Überblick unmöglich sind. Jetzt ist ein Webride die richtige Lösung, um eine schnelle Übersicht zu geben. Damit das funktioniert, muss der Link zum Webride natürlich prominent platziert sein.

5.9.3.4 Neue Variationen

Sie denken, es ist nur möglich, Webrides zu HTML-Seiten zu veranstalten? Wie wäre es denn einmal mit einer Download-Tour? Oder einer Bilder-Tour? Diese beiden Beispiele sollen vor allem eines klarmachen: es kommt auf Kreativität an. Mit der Webride-Technologie lassen sich viele interessante Inhalte präsentieren, wenn man nur weiß, wie.

Nach oben

Partnerseite: Informationen zu HTML bei HTMLWorld.de.