grafikwelten
kreativ.innovativ.individuell. 

              

 
startseite | philosophie | leistungen | service | referenzen | angebote | kontakt | kostenlos
webdesign kostenlos

 

Die grafikwelten möchten Ihnen etwas schenken.

Auch die grafikwelten haben nicht bei Null angefangen und oft von den Erfahrungen anderer profitiert, die unsere Arbeitsfelder vor vielen Jahren erschlossen haben. Natürlich wollen wir ein paar Geheimnisse für uns behalten, denn Sie wissen, so manche Geheimrezeptur beinhaltet ein paar Zusätze, die das Ergebnis so unvergesslich werden lässt.

Dennoch möchten wir Sie teilhaben lassen. Diese Tipps, Anregungen und Workshops sind ein Anfang. Lernen Sie von uns, so wie wir von anderen gelernt haben.

 
 
 

Workshop 2

Selbstschliessendes PopUp-Fenster

PopUps zählen nicht unbedingt zu den beliebtesten Erscheinungen des Internets.
Dennoch können Sie manchmal sinnvoll sein, wenn Sie z.B. auf Neuigkeiten hinweisen wollen, ohne gleich Ihre ganze Internetpräsenz verändern zu müssen.
Wie Sie in diesem Workshop sehen werden, gelingt es mittels Javascript ein selbstschliessendes Fenster für Ihre eigene Homepage zu erstellen, dass auch über den Bildschirm schweben kann.
Das Script funktioniert in allen gängigen Browsern, es sei denn der Besucher hat einen PopUp-Blocker aktiviert. In diesem Fall bleibt Ihr Fenster leider unsichtbar.

1. SCHRITT

Erstellen Sie das Fenster, das später aufgerufen werden soll, als eigene HTML-Datei.
Falls Sie eine Grafik einbinden wollen, achten Sie auf deren Größe. Da die Größe des PopUps festgelegt ist, kann es Ihnen sonst passieren, dass ein Teil der Grafik verschwindet oder gescrollt werden muss. Die Größe kann zwar angepasst werden, wie Sie den Erläuterungen des Scripts weiter unten entnehmen können, aber Sie sollten das Fenster auch nicht zu aufdringlich gestalten.

2. SCHRITT

Fügen Sie folgendes Javascript in den Head-Bereich der HTML-Datei Ihrer Website ein, von der aus das Popup aufgerufen werden soll:

<script type="text/javascript">
<!--
var x = 100;
fenster = window.open("dateinamePopUp.html","Neu",
"width=200,height=100,left=x,top=100");
function bewege()
{
if(x<screen.width - 200)
{
x++;
fenster.moveTo(x,100);
setTimeout("bewege()",50):
}
else
fenster.close();
}
//-->
</script>

Um die Javascript-Funktion aufzurufen muss im Body-Tag der Befehl onLoad="bewege()" eingefügt werden.
Damit bewegen Sie ein kleines Fenster über den Monitor, dass sich automatisch schließt, wenn es em rechten Bildrand angekommen ist. Durch den Befehl fenster=window.open wird beim Öffnen der Internetseite das PopUp automatisch geöffnet.
Über width und height legen Sie die Größe des Fensters fest.
Der Abstand vom linken Bildschirmrand wird durch left bestimmt. In diesem Fall wird es durch die Variable X definiert. Mit top wird der Abstand vom oberen Bildrand festgelegt.
Durch die onLoad-Funktion im Body-Tag wird die Bewegung initiiert. screen-width überprüft die Bildschirmbreite. fenster.moveTo verschiebt das PopUp zum rechten Bildschirmrand. setTimeout bestimmt die Geschwindigkeit.
Hat das Fenster den rechten Bildschirmrand erreicht, sorgt fenster.close dafür, dass das PopUp verschwindet. Der Besucher Ihrer Internetseite muss es also nicht extra wegklicken. Und nicht vergessen den Platzhalternamen dateinamePopUp.html durch Ihren eigenen Dateinamen zu ersetzen.

Downloadversion

workshop - downloadversion

Der Workshop steht auch als Download (PDF-Datei, ca. 20 KB) für Sie bereit.

 

Tipp 2

Flash & Co - Animationen im Web

Sehen Sie etwas?

Wenn Sie gerade eine Text-Animation sehen, dann gehören Sie zu den Internetnutzern, die mit einem Browser der neueren Generation unterwegs sind. Oder Sie haben ein sogenanntes "Flash-Plug-In" nachinstalliert.

Sie sehen nichts?

Dann gehören Sie zu der zahlenmäßig nicht kleinen Gruppe von Websurfern, die eine Flash-Animation nicht sehen können, weil Ihr Browser sie nicht anzeigt.
Die folgende Text-Animation sehen Sie ganz bestimmt:

gif-animation

Hierbei handelt es sich um eine GIF-Animation, die jeder Browser anzeigt.

Was bedeutet das nun alles für Ihre zukünftige Website?

Nun, Flash-Animationen zählen zum liebsten Spielzeug eines "modernen" Webdesigners und immer mehr Websites (und deren Betreiber) glauben nicht mehr ohne auskommen zu können.
Doch bevor Sie sich für diese Animationsform entscheiden, sollten Sie sich folgende Fragen stellen:

• Welchen konkreten Nutzen erfahren Ihre Kunden durch die Verwendung?
• Welchen zusätzlichen Mehrwert bringt Ihren Kunden der Einsatz?
• Sind die Ladezeiten der Flash-Filme auch für Nutzer mit langsamem Webzugriff noch akzeptabel?
• Nehmen Sie in Kauf, dass Ihre Kunden für das Ansehen der Flash-Filme zuerst ein Plug-In installieren müssen?

Kehren wir noch einmal zu unserem GIF-Beispiel zurück. Eine solche Animation erscheint vielleicht nicht so elegant wie Flash, ist aber eben ohne zusätzliches Plug-In sichtbar und professionell gestaltet kaum größer als eine Flash-Datei.
In dem gezeigten Beispiel ist die GIF-Datei sogar um fast 10kb kleiner.

Aber müssen aufwendige Animationen wirklich sein?

Fast nie, meint der "Usability-Papst" Jacob Nielsen und fasst prägnant zusammen: "Flash: 99% bad". Was bedeutet, dass die meisten Animationen um ihrer selbst realisiert werden und an den Anforderungen der Nutzer vorbei gehen.

So genannte "Flash-Intros" - also Animationen auf der Startseite - zählen inzwischen zu den meistgehassten Erscheinungen, denn in der Regel stehlen sie durch lange Ladezeiten Zeit und Geld. Uund erweisen sich dann zu häufig als überflüssig, da selten mehr als ein paar bunter, nichtssagender Bildchen zu sehen sind, die sich munter hin und her bewegen.

Flash (oder überhaupt jede Animation) zeigt seine Stärke immer dann, wenn es darum geht komplexe Zusammenhänge aufzuzeigen oder interaktiv zu arbeiten (Etwa um ein Produkt elegant von allen Seiten und in verschiedenen Farben zu zeigen - aber auch hier gibt es durchaus akzeptable Alternativen).

Fazit: Flash bietet zahlreiche Möglichkeiten als Mehrwert zu fungieren, wenn es nicht als bunter Selbstzweck gestaltet wird. Verlieren Sie auch hier Ihre Zielgruppe nie aus den Augen! Nicht alles muss man realisieren, nur weil man es kann!