Animation

[Chris]

Hallo liebe Selfhtml-User !

Ich bin momentan drüber eine neue Homepage für einen Bekannten zu bauen. Leider stehe ich vor folgende Problem:

Er würde gerne seine Homepage in mehreren Ebnen aufbauen. Sprich einmal ein Hintergrundbild (fixiert) und darüber legt sich dann ein Menu (ebenfalls fixiert) und per Klick öffnet sich ein Fenster (auch fixiert aber mit Scrollbalken innerhalb des fensters) ca mittig worin das Textliche niedergeschrieben ist. (Transparente Tabelle mit leichten Rahmen und abgestimmter Schrift).

So das sollte ja noch zu bewältigen sein, hoffe ich.

Mein Problem ist, er möchte, wenn man auf die Seite geht, dass erstmal nur das Hintergrundbild zu sehen ist und langsam sich das Menu aufbaut. Ums leichter verständlich zu machen und damit ich auch etwas habe woran ich mich halten kann wäre am passendes Beispiel ein: Baum . Kurz um gesagt, wenn man auf die Page kommt ist ein kleiner Strauch da der langsam hochwächst zu einen Baum, welcher letzendlich im Stamm z.B. die einzelnen Menupunkte beinhaltet.

Meine Frage an euch: Wie geh ich soetwas an? Ich habe es zwar Bildlich vor mir und auch aufgezeichnet wie es aussehen könnte, aber dann scheitere ich doch daran wie ich eine Animation von einen Baum erstellen soll welche letzendlich verlinke Buttons beinhaltet die man anklicken kann und sich dann ein Fenster öffnet.

Ich hoffe ich stoße hier auf Hilfe.

Grüße
Chris

[EKKi]

Mahlzeit,

(Transparente Tabelle mit leichten Rahmen und abgestimmter Schrift).

Wenn Du eh ganz neu anfängst, verzichte bitte - auch und insbesondere in Deinem eigenen Interesse - auf Tabellen und benutzte fürs Layouten http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=CSS.

Mein Problem ist, er möchte, wenn man auf die Seite geht, dass erstmal nur das Hintergrundbild zu sehen ist und langsam sich das Menu aufbaut. [...] ist ein kleiner Strauch da der langsam hochwächst zu einen Baum, welcher letzendlich im Stamm z.B. die einzelnen Menupunkte beinhaltet.

Animationen würde ich an Deiner Stelle mit Javascript (wenn es sich um normale HTML-Elemente handelt, die bewegt oder ein-/ausgeblendet werden sollen) und ansonsten zur Not mit Flash oder etwas ähnlichem erstellen.

MfG,
EKKi

[ritschmanhard]

Hi Chris!

Zunächst würde ich versuchen, die Idee deinem Bekannten auszureden, da es 100% total nervig ist, wenn man beim Betreten einer Seite warten muß, bis man "endlich" ein Menü erhält (spätestens nach dem zweiten Access, wenn der "Baumwuchseffekt" bekannt ist...)

Aber nun, wie gehts:

1. Möglichkeit: Flash - mit einer Flashseite kannst du bestimmen, wann welches Element eingeblendet wird. Nachteil: Leute ohne Flash oder Flash deaktiviert sehen die Seite nicht - Barrierefrei ist es auch nicht (Stichwort: Sehbehinderung).

2. Möglichkeit: Javascript - auch hier ist es möglich, dynamisch Inhalt zu erzeugen. Im Prinzip sind die Probleme die selben wie bei (1).

3. Möglichkeit: Aktualisierende Seite, welche mehrfach vom Server die verschiedenen "Animationsschritte" (diese können durch Sequenzbildung mittels z.B. amimated Gifs verringert werden) abholt und die Seite so langsam aufbaut.
Problem: Schmalband user warten sich zu Tode und du erzeugst massiv Traffic overhead.

Aber im Prinzip bleibt es dabei: Wie auch immer du es machst, es ist ein schlechtes Konzept, das wirklich geeignet ist, User zu vergraulen.

Grüsse,
Richard

[Chris]

Hallo Richard !

erstmal vielen Dank für deine Antwort.

Mir sind die aufgezählen Argumente voll bewusst. Ich kenne die Problematik mit Flash und vor allem nervt es mich selbst wenn ich ewig warten muss !! Da kann ich dir voll und ganz zustimmen :-)

Allerdings wenn sowas wie der Wachstum eines Baumes innerhalb 3 - 5 Sekunden geschiet...das sollte noch erträglich sein. Nunja, es ist nicht mein wunsch, sondern wunsch des Kundens. Ich denke aber, das ich ihm das noch austreiben kann und einfach die Seite so aufbaue:

Hintergrundbild -> Menubild drüber legen (3D-effekt beim besucher der hp auslösen) -> durch klicken eines menubuttons öffnet sich ein fenster dynamisch (javascript?).

Müstte realisierbar sein und dürfte auch anschaulich sein.

@eKKi
Tabelle war wohl der falsche Begriff..eben ein Fenster / Frame / wie auch immer das einfach über der 1. Ebene (Hintergrundbild) und auf der 2. Ebene (Menu) liegt.

Dürfte, wie oben schon erwähnt, in javascript realisierbar sein, oder irre ich mich da?

Vielen Dank für die schnellen Antworten.

Grüße
Chris

P.S.: Falls irgendwer Codebeispiele parat hat für ein Fenster / Frame / wie auch immer, welches sich auf einer ebene dynamisch öffnet, her damit ! Würde mich googlearbeit ersparen =)

[ritschmanhard]

Hi Chris!

Leider wird mir nicht ganz klar, was du nun planst, aber folgendes wäre anzumerken:

1. Kunde will einen "Seitenentfaltungseffekt": Leg ihm doch den wachsenden Baum als animated GIF in den Seitenhintergrund.

2. Menü: Das Menü sollte ohne Javascript bedienbar sein - und Popups sind eigentlich nicht wünschenswert. Wenn du aber ein Fenster öffnen mußt, dann erreichst du das auch mit html: http://de.selfhtml.org/html/verweise/definieren.htm#zielfenster

Grüsse,
Richard

[Chris]

Hey Richard.

Im Prinzip plan ich eine Seite die aus zwei ebnen besteht.

1. Ebene ist der Hintergrund (ein bild)

2. Ebene ist das was darüber geschiet (Menu mit Buttons -> Klick auf Button ein Fenster öffnet sich auf dieser Ebene wo Textliches niedergeschrieben ist)

zu deinem 2)...jein..zwar kann ich mit htmls prima fenster /frames öffnen, aber nicht dynamisch, oder irre ich mich da? d.h. ich klicke auf einen Menupunkt und es soll sich eben ein fenster /frame (selbige Ebene wie das Menu) öffnen, bzw "aufbauen" (wort nicht falsch verstehen, das aufbauen passiert innerhalb weniger sekunden, also nichts mit lade lade lade lade...)

Finde dazu leider nichts in javascript .....vllt suche ich auch nur falsch.

Grüße
Chris

[ritschmanhard]

Hi Chris!

Vielleicht wäre es gut, vorab ein paar Begriffe zu klären:
**********************************************************

1. Fenster: Wird ein neues Fenster geöffnet, so wird auf dem Client-Rechner eine neue Browserinstanz gestartet - also wie wenn man den Browser ein weiteres mal öffnen würde...

2. Seite: Der Inhalt eines Fensters (es sei denn es werden (I)Frames verwendet, dann kann pro definiertem extra (I)Frame eine weitere Seite im Fenster dargestellt werden.

3. Ebenen: Diese werden nach meinem Verständnis über den z-index (CSS) festgelegt; eine Seite kann beliebig viele Ebenen haben; background stellt eine Sonderebene dar, für die CSS spezielle Eigenschaften kennt.

4. (I)Frame: Ermöglicht es, mehr als eine Seite in einem Fenster darzustellen.

Nun gibt es verschiedene Konzepte, wie man eine Navigation realisieren kann:
****************************************************************************
-----------------
|Nav1| ContentX |
|Nav2| ContentX |
|Nav3| ContentX |
-----------------
NavX seien die Menü/Navigationslinks
ContentX sei der Inhalt, der nach Linkclick erscheine

1. Jede Seite beinhaltet die (komplette) Navigation und zusätzlich den jeweiligen Content - dies läßt sich schon über Serverside Includes realisieren (include navigation in every page).

2. Iframe Technologie: Wichtig ist hierbei, entgegen dem "logischen" Ansatz die Navigation in den Iframe zu stellen und in jeder Seite den Navigationsiframe einzutragen. Die Navigation ändert über den NavX link die parent Adresse.

3. Serverseitige Lösungen, welche die kompletten Seiten als Ergebnis eines jeweils parametrisierten CGI Aufrufs liefern (kleiner Nachteil scheint hier die schlechtere Bewertung durch Suchmaschinen zu sein)

Ab jetzt folgen "schlechtere" Lösungen:
***************************************
3) Mittels javascript kann man je nach link die Seite dynamisch befüllen (oder javascript für die Navigation erforderlich machen, beispielsweise indem man anstelle von Links fälschlicherweise Buttons verwendet), die Seite wird also nie verlassen (nur eine html Adresse). Hier folgen zwei Nachteile:
 - bei deaktiviertem JS ist die Navigation nicht funktional
 - (dynamische Befüllung:) es ist nicht möglich, die "verschiedenen Seiten" von außen direkt zu erreichen.

4. Es ist möglich, mittels CSS je nach Link verschiedene Ebenen der Seite einzublenden.
   Nachteil:
    - Grauenvoll zu maintainen, da mehrere Views in einer Seite definiert werden

5. Frames verwenden oder den Content in den Iframe stellen:
   Nachteile:
    - Bookmarking einer bestimmten Contentseite nicht möglich
    - Suchmaschinenindizierung ist problematisch
    - Direkte Seitenwahl von außen nicht möglich

6. Navigation in einem anderen Fenster als Content (Navigation als Remote control). Nachteile:
    - Probleme mit Popup blockern und "öffnen als neuer Reiter" möglich
    - Versehentliches Schliessen des Navigationsfensters verhindert weitere Navigation

Grundsätzlich solltest du folgendes immer im Auge behalten:
***********************************************************
0) Eine gute Seite validiert

1. Eine gute Seite "funktioniert" ( = macht ihre Infos verfügbar) ohne aktiviertes JS, ohne CSS und idealerweise ist jede Seite als Direktlink erreichbar. Insbesondere Flash dient nur der "Seitenverschönerung".

2. Eine gute Seite verwendet HTML als Auszeichnungssprache und somit eine Liste um Listen darzustellen (ul/li, z.B. Navigation), eine Tabelle (table) für Tabellarische Informationen (und nicht für das Layout!) usw., CSS wird für die Formatierung verwendet!

3. Mit CSS hat die Seite idealerweise ein fließendes Layout, paßt das Seitenlayout also an verschiedene Viewportgrößen an und ist nicht auf eine bestimmte Größe (noch schlimmer: Auflösung) festgelegt.

4. Wenn man noch weiter gehen will, ermöglicht xml/xsl dann auch noch die Trennung von Daten und deren Auszeichnung - ich persönlich finde xml genial...

Nun hab ich mir nen halben Wolf geschrieben, aber ich hoffe ich konnte dir damit helfen ;-).

Grüsse,
Richard

[Chris]

Hey Richard.

Im Prinzip plan ich eine Seite die aus zwei ebnen besteht.

1. Ebene ist der Hintergrund (ein bild)

2. Ebene ist das was darüber geschiet (Menu mit Buttons -> Klick auf Button ein Fenster öffnet sich auf dieser Ebene wo Textliches niedergeschrieben ist)

zu deinem 2)...jein..zwar kann ich mit htmls prima fenster /frames öffnen, aber nicht dynamisch, oder irre ich mich da? d.h. ich klicke auf einen Menupunkt und es soll sich eben ein fenster /frame (selbige Ebene wie das Menu) öffnen, bzw "aufbauen" (wort nicht falsch verstehen, das aufbauen passiert innerhalb weniger sekunden, also nichts mit lade lade lade lade...)

Finde dazu leider nichts in javascript .....vllt suche ich auch nur falsch.

Grüße
Chris