var: Seiteninhalt wechseln aber Hintergrund behalten

Hallo miteinander!

Ich würde gerne mal wissen, ob und falls ja wie man es anstellen könnte, dass wenn man zwischen mehreren Dokumenten einer Webseite hin- und herwechselt, der Seitenhintergrund dennoch derselbe bleibt.

Womit ich nicht meine, dass jede Teilseite den gleichen Hintergrund hat, sondern tatsächlich den selben, und mit Hintergrund meine ich ein canvas Element, auf dem eine Animation läuft.

Ich könnte natürlich jeder Teilseite ein entsprechendes Element verpassen und dann die externe Scriptdatei mit dem Animationsprogramm anbinden, aber dann würde die Animation bei jedem Aufruf einer Teilseite von neuem starten und ich möchte, dass die Animation unabhängig davon weiterläuft, auf welcher Seite sich der Benutzer gerade befindet.

           _____________________________________________________
          |                                                     |
          |            Hintergrund bleibt konstant              |
          |         ___________________________________         |
          |        |                                   |        |
          |        |      Seiteninhalt abhängig        |        |
          |        |           vom Dokument            |        |
          |        |                                   |        |
          :        :                                   :        :
          .        .                                   .        .

Den gesamten Seiteninhalt in ein HTML Dokument packen möchte ich nicht, da die Seite auch ohne JS funktionieren soll, von praktischen Erwägungen einmal ganz abgesehen, also, wie könnte man so etwas sonst bewerkstelligen?

Beste Grüße,

var ♂

  1. Hallo var,

    Eine gute Lösung wäre, alles in ein Dokument zu laden (was du nicht möchtest), etwa mehrere section-Elemente, die du mit JS aus- bzw. einblendest und auch nachlädst. Ohne Javascript startet die Animation immer wieder neu, die Bedienbarkeit leidet darunter sicher nicht.

    Bis demnächst
    Matthias

    --
    Signaturen sind bloed (Steel) und Markdown ist mächtig.
    1. @@Matthias Apsel

      Ohne Javascript startet die Animation immer wieder neu

      Ohne JavaScript startet die Animation (canvas) immer wieder gar nicht.

      LLAP 🖖

      --
      Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
    2. Hallo Matthias

      Eine gute Lösung wäre, alles in ein Dokument zu laden (was du nicht möchtest) etwa mehrere section-Elemente, die du mit JS aus- bzw. einblendest und auch nachlädst.[...]

      Aus gutem Grund möchte ich das nicht, aber lustig, dass du es sagst, wo ich doch vor nicht allzu langer Zeit hier noch dafür plädiert habe, das HTML Dokument zum reinen Textarchiv zu degradieren und die Inhalte grundsätzlich mit JS ins Layout zu laden, statt alles auf mehrere Dokumente zu verteilen. ;-)

      Aber Spaß beiseite, das wird nicht funktionieren: Bei dem Webprojekt um das es geht, handelt es sich um eine Seite über Grafikprogrammierung im Allgemeinen, WebGL im Besonderen, und meine Grafikbibliothek im ganz Besonderen, das heißt, jede Menge Artikel, Tutorials, Dokumentationen, Beispiele usw. und natürlich tonnenweise Code, vom Umfang her wahrscheinlich (und hoffentlich) irgendwann vergleichbar mit der JavaScript-Rubrik hier im selfHTML-Wiki, also die all-in-one Lösung scheidet definitiv aus, auch wenn das hieße, auf die Hintergrund-Animation gänzlich zu verzichten...

      Ohne Javascript startet die Animation immer wieder neu, die Bedienbarkeit leidet darunter sicher nicht.

      Naja, wenn JS beim Client nicht verfügbar oder ausgeschaltet ist, ist die Seite tot, und ob es da noch eine andere Lösung gibt, das ist halt die Frage. ;-)

      Dank und Gruß,

      var ♂

      1. Hallo var,

        Naja, wenn JS beim Client nicht verfügbar oder ausgeschaltet ist, ist die Seite tot, und ob es da noch eine andere Lösung gibt, das ist halt die Frage. ;-)

        Iframe. duck und weg

        Bis demnächst
        Matthias

        --
        Signaturen sind bloed (Steel) und Markdown ist mächtig.
        1. @Matthias

          Iframe. duck und weg

          Iframe, hm? Naja, die Theorie ist mir bekannt, aber gearbeitet habe ich damit noch nie. Ich nehme an, du hast gute Gründe für duck und weg, vielleicht magst du dein Wissen mit mir teilen? :-)

          Also meine Kenntnisse diesbezüglich sind reichlich überschaubar, aber wenn ich das richtig verstehe, würde das darauf hinauslaufen, dass ich meine index.html statt mit dem eigentlichen Inhalt aller Teilseiten mit <iframe src="..."> zukleistere, welche ich dann aber auch wieder mit JavaScript ein- und ausblenden müsste, richtig?

          Naja, dann bliebe dennoch das alte Problem: if (!JS) Seite = 'tot';

          Dazu kommt natürlich auch noch die Frage, wie die einzelnen Teilseiten dann in diesem „Rahmen“ verlinkt werden können, von anderen Problemen, die ich nicht auf dem Schirm habe, mal ganz abgesehen...

          Dank und Gruß,

          var ♂

          1. Hallo,

            Also meine Kenntnisse diesbezüglich sind reichlich überschaubar, aber wenn ich das richtig verstehe, würde das darauf hinauslaufen, dass ich meine index.html statt mit dem eigentlichen Inhalt aller Teilseiten mit <iframe src="..."> zukleistere, welche ich dann aber auch wieder mit JavaScript ein- und ausblenden müsste, richtig?

            nein, falsch. Sicher, das wäre auch eine theoretische Möglichkeit, aber nicht sinnvoll.

            Stattdessen ein iframe-Element im Hauptdokument. Das bekommt einen Namen (also ein name-Attribut), und die Links außenrum, also im Hauptdokument, bekommen alle ein target-Attribut, das auf den Namen des iframe verweist. Damit wird das verlinkte Dokument in den iframe geladen, während das Hauptdokument außenrum stehenbleibt.

            Mit allen bekannten Nachteilen von Frames. Die gravierendsten, die mir für diesen Fall einfallen:

            • Es ist nicht möglich, ein Bookmark gezielt auf eine bestimmte Unterseite zu setzen oder von extern auf eine bestimmte Seite zu verlinken
            • Sobald jemand einen Link im neuen Tab öffnet, hat er das iframe-Dokument ohne den vorgesehenen Rahmen drumherum - also z.B. ohne Navigation, Kopf- und Fußzeile.

            Naja, dann bliebe dennoch das alte Problem: if (!JS) Seite = 'tot';

            Nicht, wenn du so vorgehst, wie ich skizziert habe. Dann könnte ein JS-Verweigerer immerhin noch die Seiten nutzen, die ohne JS auskommen.

            So long,
             Martin

            1. Hallo Martin

              [...] Stattdessen ein iframe-Element im Hauptdokument. Das bekommt einen Namen (also ein name-Attribut), und die Links außenrum, also im Hauptdokument, bekommen alle ein target-Attribut, das auf den Namen des iframe verweist. Damit wird das verlinkte Dokument in den iframe geladen, während das Hauptdokument außenrum stehenbleibt.

              Was dann interessant würde, wenn ich von einer Teilseite auf eine andere Teilseite verlinken will.

              Mit allen bekannten Nachteilen von Frames. Die gravierendsten, die mir für diesen Fall einfallen:

              • Es ist nicht möglich, ein Bookmark gezielt auf eine bestimmte Unterseite zu setzen oder von extern auf eine bestimmte Seite zu verlinken
              • Sobald jemand einen Link im neuen Tab öffnet, hat er das iframe-Dokument ohne den vorgesehenen Rahmen drumherum - also z.B. ohne Navigation, Kopf- und Fußzeile.

              Jep, und genau das hatte ich befürchtet. Die Möglichkeit, einzelne Abschnitte der Dokumentationen / Tutorials auf der Seite zu verlinken ist für die Benutzbarkeit derselben von grundlegender Bedeutung.

              No way! Damit wäre die Option iframe definitiv vom Tisch...

              Dank und Gruß,

              var

            2. Hallo,

              man könnte auf der eingebetteten Seite auch vermerken, dass sie in einen Frame gehört und einen Link anbieten, somit wäre das "Deeplink-Problem" gelöst (mal abgesehen von Javascript-Lösungen). Ansonsten kommt man auch mal an den Punnkt, an dem eben der User mal Pech hat. Wenn jemand auf gewisse Inhalte zugreifen möchte, die eben Javascript erfordern, muss er es halt aktivieren. Das ist kein großer Umstand. Man kann es nicht jeder Usergruppe uneingeschränkt recht machen.

              Gruß Hans

  2. Hallo,

    ich möchte, dass die Animation unabhängig davon weiterläuft, auf welcher Seite sich der Benutzer gerade befindet.

    Meinst du nicht, dass der Leser ganz froh ist, wenn das Gezappel endlich mal aufhört?

    Gruß
    Kalk

    1. Hallo Tabellenkalk

      Meinst du nicht, dass der Leser ganz froh ist, wenn das Gezappel endlich mal aufhört?

      Meinst du nicht, dass du hier vorschnell über etwas urteilst, ohne den blassesten Schimmer zu haben, was wirklich Sache ist?

      Schon mal daran gedacht, dass es sich dabei vielleicht bloß um hübsch modellierte Wolkenformationen handelt, die langsam über den Himmel ziehen und im Verlauf der Zeit - dem Ablauf des Tages nachempfunden - abwechselnd von Sonne oder Mond angestrahlt werden?

      Oder dass es sich dabei vielleicht um abstrakte Geometrien handelt, die langsam ihre Gestalt und Farbe verändern?

      Glaubst du ernsthaft, ich bin so hängengeblieben, dass ich meine Hintergründe im potentiell epileptische Anfälle auslösenden japanischen Terror-Gameshow-Design gestalte?

      Und vom Inhaltlichen einmal ganz abgesehen, meinst du nicht, ich würde mir um sowas genug Gedanken machen, um vielleicht von alleine darauf zu kommen, dass ich dem Benutzer die Möglichkeit einräumen sollte, die Geschwindigkeit der Animationen selbst zu regeln oder sie einfach zu pausieren?

      Ehrlich, wenn ich hier im Forum derart minderbemittelt rüberkomme, dass du das ernsthaft annimmst, wäre es vieleicht echt besser, ich poste hier nicht mehr und suche mir ein anderes Hobby...

      var

      1. Hallo var,

        Glaubst du ernsthaft, ich bin so hängengeblieben, dass ich meine Hintergründe im potentiell epileptische Anfälle auslösenden japanischen Terror-Gameshow-Design gestalte?

        Hehe, ich würde die Seite besuchen. Ich find japanische Gameshows geil 😂

        Ehrlich, wenn ich hier im Forum derart minderbemittelt rüberkomme, dass du das ernsthaft annimmst, wäre es vieleicht echt besser, ich poste hier nicht mehr und suche mir ein anderes Hobby...

        Alles gut, man wird nur vorsichtig nach einer gewissen Zeit ;-) glaube nicht, dass Tabellenkalk das vermitteln wollte.

        LG,
        CK

  3. Hallo miteinander!

    Also es ist derweil wohl klar, dass es definitiv nicht sinnvoll ist, in der index.html die einzelnen Teilseiten per iframe einzubinden.

    Es ist auch klar, dass es ebensowenig Sinn ergibt, auf den einzelnen Unterseiten die Animation einfach mit <script src="..."> einzubinden, da in diesem Fall das Programm bei jedem Aufruf von neuem starten würde.

    Wie könnte man also das Ziel erreichen, dass die Animation auch bei einem Seitenwechsel oder dem Öffnen mehrerer Tabs auf allen Seiten synchron weiterläuft?

    Ein Gedanke wäre, das Animationsprogramm mit Parametern aufzurufen, aber das wäre, abhängig von der Art der Animation, extrem schwer bis unmöglich umzusetzen, und daher auch keine wirklich realistische Option.

    Was ich mich nun Frage ist, ob es nicht irgendwie möglich wäre, die Sache mit dem iframe umzudrehen, also anstatt die Animation auf der Hauptseite laufen zu lassen und dann die Inhalte der Teilseiten mit iframe einzubinden, die Animation in einem externen HTML Dokument laufen zu lassen und dieses auf allen Seiten einzubinden.

    Aber das wäre natürlich im Prinzip das Gleiche in Grün, es sei denn, man könnte es irgendwie so einrichten, dass nicht jedesmal eine neue Instanz des Dokuments geladen wird, sondern ersteinmal geprüft wird, ob die Seite mit der Animation bereits im Cache ist, die Animation also bereits läuft, um dann festzulegen, dass exakt dieses Dokument angezeigt wird.

    Die Frage ist also, welche Einflussmöglichkeiten man da hat und ob sowas prinzipiell überhaupt möglich wäre...

    Gruß,

    var

    1. Hallo

      Was ich mich nun Frage ist, ob es nicht irgendwie möglich wäre, die Sache mit dem iframe umzudrehen, also anstatt die Animation auf der Hauptseite laufen zu lassen und dann die Inhalte der Teilseiten mit iframe einzubinden, die Animation in einem externen HTML Dokument laufen zu lassen und dieses auf allen Seiten einzubinden.

      Das geht, du kannst das Iframe (mehr oder minder) viewportfüllend anzeigen und den eigentlichen Inhalt absolut und davor (z-index) positionieren.

      Aber das wäre natürlich im Prinzip das Gleiche in Grün, …

      Richtig, die Dokumente werden immer noch neu geladen.

      … es sei denn, man könnte es irgendwie so einrichten, dass nicht jedesmal eine neue Instanz des Dokuments geladen wird, sondern ersteinmal geprüft wird, ob die Seite mit der Animation bereits im Cache ist, die Animation also bereits läuft, um dann festzulegen, dass exakt dieses Dokument angezeigt wird.

      Wenn ein Dokument im Cache schlummert, weiß es aber dennoch nicht, wie weit die Animation in einem anderen Dokument mittlerweile gelaufen ist.

      Die Frage ist also, welche Einflussmöglichkeiten man da hat und ob sowas prinzipiell überhaupt möglich wäre...

      Hast du schon darüber nachgedacht, die Inhalte per Ajax auszutauschen? Sie sind nicht von vornherein im Dokument, was, wie du sagtest, aufgrund der Datenmenge ausfällt und das Dokument als solches wird dauerhaft angezeigt.

      Tschö, Auge

      --
      Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
      Terry Pratchett, „Gevatter Tod“
      1. Hallo Auge

        Das geht, du kannst das Iframe (mehr oder minder) viewportfüllend anzeigen und den eigentlichen Inhalt absolut und davor (z-index) positionieren.

        Ja, so hatte ich mir das vorgestellt.

        Wenn ein Dokument im Cache schlummert, weiß es aber dennoch nicht, wie weit die Animation in einem anderen Dokument mittlerweile gelaufen ist.

        Schlecht formuliert meinerseits. Was ich meinte ist: Wenn die Animation wie oben beschrieben in einer externen Datei abläuft und diese beim Aufruf der Startseite (oder einer Teilseite) vom Server geladen wird, dann wird der Browser ja intern irgendwo verzeichnet haben, dass diese Datei gerade angezeigt, also ausgeführt wird.

        Und der zugegebenermaßen naive Gedanke war, dass man den Browser vielleicht irgendwie dazu veranlassen könnte, einfach die Anzeige dieser selben Datei zu verschieben beziehungsweise zu dublizieren, also quasi die Ausführung der Datei einfach fortzusetzen, statt sie erneut aufzurufen. ;-)

        Hast du schon darüber nachgedacht, die Inhalte per Ajax auszutauschen? Sie sind nicht von vornherein im Dokument, was, wie du sagtest, aufgrund der Datenmenge ausfällt und das Dokument als solches wird dauerhaft angezeigt.

        Ja, habe ich, und es wäre vielleicht sogar die alles in allem eleganteste Lösung. Aber ich frage mich dabei, wie sich das auf die Möglichkeiten auswirken würde, Inhalte meiner Seite mittels Suchmaschinen zu finden, denn was das angeht, bin ich nicht so firm...

        Dank und Gruß,

        var ♂

        1. Hallo und guten Nachmittag,

          Schlecht formuliert meinerseits. Was ich meinte ist: Wenn die Animation wie oben beschrieben in einer externen Datei abläuft und diese beim Aufruf der Startseite (oder einer Teilseite) vom Server geladen wird, dann wird der Browser ja intern irgendwo verzeichnet haben, dass diese Datei gerade angezeigt, also ausgeführt wird.

          Und der zugegebenermaßen naive Gedanke war, dass man den Browser vielleicht irgendwie dazu veranlassen könnte, einfach die Anzeige dieser selben Datei zu verschieben beziehungsweise zu dublizieren, also quasi die Ausführung der Datei einfach fortzusetzen, statt sie erneut aufzurufen. ;-)

          Die Dokumentfenster im Browser verhalten sich erst einmal so, als wüssten die nichts voneinaner. Du kannst dieselbe Ressource auch in sovielen Fenstern oder Tabs gelichzeitig aufrufen, bis die Max-Connection für eine Zieldomain erreicht ist oder eben wieder eine frei wird, wenn die Dokumente geladensind. Und durch unterschiedliche (Blind-)Parameter kannst Du dafür sorgen, dass der Cache sich ausklinkt. Soweit nur zum Testszenario.

          Hast du schon darüber nachgedacht, die Inhalte per Ajax auszutauschen? Sie sind nicht von vornherein im Dokument, was, wie du sagtest, aufgrund der Datenmenge ausfällt und das Dokument als solches wird dauerhaft angezeigt.

          Das Problem hierbei werden immer die Links auf die Ressourcen bleiben. Für die Suchmaschinen benötigt man dann wieder einen "Framebreaker", um beim generischen GET das ganze Dokument zu bekommen.

          Grüße
          TS

        2. Hallo

          Und der zugegebenermaßen naive Gedanke war, dass man den Browser vielleicht irgendwie dazu veranlassen könnte, einfach die Anzeige dieser selben Datei zu verschieben beziehungsweise zu dublizieren, also quasi die Ausführung der Datei einfach fortzusetzen, statt sie erneut aufzurufen. ;-)

          Es wird immer noch ein neues Dokument geladen, welches wiederum ein weiteres Dokument in's Iframe lädt. Letzteres mag der Browser aus dem Cache holen, aber dennoch wird es an dieser Stelle neu geladen. Es mag möglich sein, beim entladen der ersten Seite ein Cookie zu setzen, in dem vermerkt wird, wie weit die Animation bereits gelaufen ist und dieses Cookie zu prüfen, um die Animation beim nächsten Laden des Dokuments entsprechend vorzuspulen, flüssig anschließen wird die Animation dennoch nicht.

          Hast du schon darüber nachgedacht, die Inhalte per Ajax auszutauschen? Sie sind nicht von vornherein im Dokument, was, wie du sagtest, aufgrund der Datenmenge ausfällt und das Dokument als solches wird dauerhaft angezeigt.

          Ja, habe ich, und es wäre vielleicht sogar die alles in allem eleganteste Lösung. Aber ich frage mich dabei, wie sich das auf die Möglichkeiten auswirken würde, Inhalte meiner Seite mittels Suchmaschinen zu finden, denn was das angeht, bin ich nicht so firm...

          Aha. Zwischendurch hatte ich das Gefühl, es würde um eine lokale Doku gehen. Wie JürgenB schon ansprach, ist es mit der Vergabe von URL-Parametern möglich, die Inhalte indizierbar zu machen. Ob die dann per JS gesetzt werden, um Lesezeichen zu erzeugen, oder von einem Robot per Linkliste, die mit einer per JS gesetzten Klasse mit CSS ausgeblendet wird, angesprochen werden, ist egal.

          Ob ich diesen Aufwand treiben würde? Nein. Aber das muss dich ja nicht interessieren. :-)

          Tschö, Auge

          --
          Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
          Terry Pratchett, „Gevatter Tod“
          1. Hallo Auge

            [...] Wie JürgenB schon ansprach, ist es mit der Vergabe von URL-Parametern möglich, die Inhalte indizierbar zu machen. Ob die dann per JS gesetzt werden, um Lesezeichen zu erzeugen, oder von einem Robot per Linkliste, die mit einer per JS gesetzten Klasse mit CSS ausgeblendet wird, angesprochen werden, ist egal.

            Hast du zufälligerweise irgendeinen Link zu einer Seite parat, wo das einigermaßen verständlich erklärt wäre?

            Denn mit der Materie habe ich mich bislang noch gar nicht befasst und ich würde das gerne mal lokal nachbauen.

            Zwar werde ich, solange die Seite nicht online ist, nicht herausfinden, ob das mit der Erreichbarkeit für Suchmaschinen funktioniert, aber zumindest könnte ich mal sehen, ob das mit dem Verlinken / Bookmarken der einzelnen Inhalte funktioniert, wenn ich es über XAMPP laufen lasse...

            Ob ich diesen Aufwand treiben würde? Nein. Aber das muss dich ja nicht interessieren. :-)

            Naja, Gewohnheitssache: Die Grafikprogrammierung mit WebGL ist derart low-level, dass sich meine individuelle Wahrnehmung, was die Relation von Aufwand und Ertrag angeht, mittlerweile so verschoben hat, dass mir solche Missverhältnisse schon gar nicht mehr auffallen... ;-)

            Dank und Gruß,

            var

            1. Hallo

              [...] Wie JürgenB schon ansprach, ist es mit der Vergabe von URL-Parametern möglich, die Inhalte indizierbar zu machen. Ob die dann per JS gesetzt werden, um Lesezeichen zu erzeugen, oder von einem Robot per Linkliste, die mit einer per JS gesetzten Klasse mit CSS ausgeblendet wird, angesprochen werden, ist egal.

              Hast du zufälligerweise irgendeinen Link zu einer Seite parat, wo das einigermaßen verständlich erklärt wäre?

              Leider nein, ich baue sowas selbst nicht. Daher kann ich dir auch keine datailierten Erklärungen anbieten.

              Denn mit der Materie habe ich mich bislang noch gar nicht befasst und ich würde das gerne mal lokal nachbauen.

              Ich habe nochmal über die ein- und ausgeblendeten Elemente nachgedacht. Gehen wir doch noch einfacher und schrittweise an die Sache heran.

              1. Suchmaschinenroboter (und mMn auch Benutzer ohne JS) sollen lesenden Zugriff auf die Inhalte haben. In diesen Fällen gibt's halt keine Interaktivität und keine Animationen.
              2. Auch Benutzer mit aktivem JS müssen in deinem Angebot navigieren können.
              3. Du wirst also definitiv und in jedem Szenario eine Navigation für deine Inhalte brauchen.

              Daraus folgt, dass die Navigation nicht, wie in meinem vorherigen Posting angedacht, mit Hilfe von JavaScript ausgeblendet wird. Das Aktivieren eines Links der Navigation wird …

              1. per JavaScript abgefangen …
              2. die Seiteninhalte per Ajax ausgetauscht
              3. die URL des Dokuments mit dem Querystring, der im aktivierten Link sowieso da ist, manipuliert, als wäre die Seite klassisch aufgerufen worden.

              Wird als letztes mit return false; die Standardaktion des Links unterbunden, funktioniert die Seite mit JavaScript wie eine SinglePageApp und ohne JavaScript halt wie eine klassische Webseite. Weder dem Roboter noch dem Benutzer (mit oder ohne JavaScript) entgehen textuelle Informationen. Ohne JavaScript gibt's halt keine Live-Beispiele und Animationen. Ein Hinweis auf diese Tatsache reicht. Wer als Nutzer ohne JavaScript daran interessiert ist, kann es aktivieren. Einen Roboter, der JavaScript nicht beherrscht, ist's egal.

              Tschö, Auge

              --
              Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
              Terry Pratchett, „Gevatter Tod“
              1. Hallo Auge

                Ich habe nochmal über die ein- und ausgeblendeten Elemente nachgedacht. Gehen wir doch noch einfacher und schrittweise an die Sache heran.

                1. Suchmaschinenroboter (und mMn auch Benutzer ohne JS) sollen lesenden Zugriff auf die Inhalte haben. In diesen Fällen gibt's halt keine Interaktivität und keine Animationen.
                2. Auch Benutzer mit aktivem JS müssen in deinem Angebot navigieren können.
                3. Du wirst also definitiv und in jedem Szenario eine Navigation für deine Inhalte brauchen.

                Daraus folgt, dass die Navigation nicht, wie in meinem vorherigen Posting angedacht, mit Hilfe von JavaScript ausgeblendet wird. Das Aktivieren eines Links der Navigation wird …

                1. per JavaScript abgefangen …
                2. die Seiteninhalte per Ajax ausgetauscht
                3. die URL des Dokuments mit dem Querystring, der im aktivierten Link sowieso da ist, manipuliert, als wäre die Seite klassisch aufgerufen worden.

                Wird als letztes mit return false; die Standardaktion des Links unterbunden, funktioniert die Seite mit JavaScript wie eine SinglePageApp und ohne JavaScript halt wie eine klassische Webseite. Weder dem Roboter noch dem Benutzer (mit oder ohne JavaScript) entgehen textuelle Informationen. Ohne JavaScript gibt's halt keine Live-Beispiele und Animationen. Ein Hinweis auf diese Tatsache reicht. Wer als Nutzer ohne JavaScript daran interessiert ist, kann es aktivieren. Einen Roboter, der JavaScript nicht beherrscht, ist's egal.

                Ok, das klingt auf jeden Fall nach einer vernünftigen Lösung!

                Ich werde mal versuchen das nachzubauen! :-)

                Vielen Dank und beste Grüße,

                var

                1. @@var

                  Ok, das klingt auf jeden Fall nach einer vernünftigen Lösung!

                  Ja. Eine funktionierende Umsetzung mit mehreren Seiten ohne dass die Animation seitenübergreifend wäre (evtl. auch ganz ohne diese).

                  Single page application als progressive enhancement, wobei die URIs mittels History-API so gesetzt werden, dass sie denen der Mehrere-Seiten-Variante entsprechen.

                  Bedeutet doppelten Entwicklungsaufwand, den man mit Nachdenken vielleicht auf das Anderthalbfache reduzieren kann. Wenn serverseitig auch JavaScript läuft (Node), wird’s vielleicht noch einfacher.

                  LLAP 🖖

                  --
                  Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
                  1. Hallo Gunnar

                    [...] Eine funktionierende Umsetzung mit mehreren Seiten ohne dass die Animation seitenübergreifend wäre (evtl. auch ganz ohne diese).

                    Single page application als progressive enhancement, wobei die URIs mittels History-API so gesetzt werden, dass sie denen der Mehrere-Seiten-Variante entsprechen.

                    Ja, Animation oder nicht Animation, das ist hier die Frage!

                    Ist kein JavaScript aktiviert, wird ganz normal weitergeleitet, ist JavaScript aktiviert, aber der Browser unterstützt kein WebGL, wird auch nichts unterbunden, nur wenn beide Bedingungen erfüllt sind, wird eingegriffen.

                    Bedeutet doppelten Entwicklungsaufwand, den man mit Nachdenken vielleicht auf das Anderthalbfache reduzieren kann.

                    Naja, eine „single page application“ wäre es ja nur technisch betrachtet, aber das heißt ja nicht, dass ich hier verschiedene Layouts entwickeln müsste, oder?

                    Ich meine, vielleicht habe ich hier ja auch irgendwas noch nicht richtig verstanden, aber ich stelle mir das so vor, dass ich die Seite zunächst einmal ganz normal zusammenbastle, wobei die grundlegende Aufteilung auf allen Seiten gleich bleibt, also header, vielleicht aside, dann main und footer, wobei ich mir dann überlegen kann, ob ich die nicht gegebenenfalls ohnehin mit PHP include einfüge...

                    ...und if (JavaScript && WebGL) würde ich dann auf der „single page“ je nach Bedarf bloß den Teil einbauen, der sich unterscheidet. - Oder nicht?

                    Wenn serverseitig auch JavaScript läuft (Node), wird’s vielleicht noch einfacher.

                    Node.js, hm? Das müsste ich mir mal genauer angucken. Danke für den Hinweis!

                    Beste Grüße,

                    var ♂

                    1. Hallo

                      Naja, eine „single page application“ wäre es ja nur technisch betrachtet, …

                      Wie sollte man es sonst betrachten?

                      … aber das heißt ja nicht, dass ich hier verschiedene Layouts entwickeln müsste, oder?

                      Nein.

                      Ich meine, vielleicht habe ich hier ja auch irgendwas noch nicht richtig verstanden, aber ich stelle mir das so vor, dass ich die Seite zunächst einmal ganz normal zusammenbastle, wobei die grundlegende Aufteilung auf allen Seiten gleich bleibt, also header, vielleicht aside, dann main und footer, wobei ich mir dann überlegen kann, ob ich die nicht gegebenenfalls ohnehin mit PHP include einfüge...

                      Die Doku würde ich serverseitig mit einer Seite bauen, die die verschiedenen Inhalte per URL-Parameter (z.B. /doku/index.php?chapter=13) anspricht. …

                      ...und if (JavaScript && WebGL) würde ich dann auf der „single page“ je nach Bedarf bloß den Teil einbauen, der sich unterscheidet.

                      … Kommt beim aktivieren des Links mit dieser URL JavaScript zu Zuge, wird der Inhalt des Kapitels 13 per Ajax nachgeladen und der vorher angezeigte Inhalt gegen den des Kapitels 13 ausgetauscht, ohne die Seite selbst neu zu laden.

                      … - Oder nicht?

                      Also jein. Serverseitig werden nicht verschiedene Seiten sondern eine vorgehalten, deren Inhalt per Parameter bestimmt wird, und das Nachladen mit Ajax folgt auch namenstechnisch exakt diesem Schema.

                      Tschö, Auge

                      --
                      Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
                      Terry Pratchett, „Gevatter Tod“
                      1. Hallo Auge

                        Naja, eine „single page application“ wäre es ja nur technisch betrachtet [...]

                        Wie sollte man es sonst betrachten?

                        Was ich damit meinte ist, dass der hier beschrieben Ansatz darauf beruht, die Tatsache zu verschleiern, dass es sich um eine single page application handelt, und so zu tun, als würde man zwischen mehreren Seiten navigieren, so dass die Unterschiede zwischen single und multi page sich demnach nur auf der für den Benutzer nicht sichtbaren, also im engeren Sinne technischen Ebene manifestieren.

                        Aber man könnte den Begriff der single page application ja auch so interpretieren, dass er darüber hinaus ebenfalls eine gestalterische Dimension besitzt, dass eine solche Konstruktion also nicht bloß darauf beschränkt ist, das Verhalten und die Optik einer auf mehrere Dokumente verteilten Seite zu emulieren, sondern sich durch die Beschränkung auf eine einzige Seite ganz eigene Möglichkeiten der Gestaltung ergeben.

                        Ein Beispiel:

                        Ich stehe mit meinem Projekt ja noch ganz am Anfang, und da macht man sich natürlich Gedanken, welche Inhalte auf der Seite vorhanden sein sollen und wie man sie am besten darstellt, so dass ein Höchstmaß an Benutzerfreundlichkeit erreicht wird.

                        In meinem Fall gehören zu den Inhalten zunächst einmal ein Blog und dazu Tutorials zum Thema Grafikprogrammierung, in denen ich allgemeine Konzepte vorstelle und die mathematischen Grundlagen versuche zu erklären, sowie die Funktionsweisen der WebGL API und meiner Grafikbibliothek.

                        Für letztere soll dann noch eine gesonderte Dokumentation und Spezifikation zur Verfügung gestellt werden, und - als eines der wesentlichsten Features meiner Seite - ein Editor, der im Kern eine Benutzerschnittstelle meiner Bibliothek darstellt und der es den Benutzern ermöglichen soll, auch bei fehlender Programmiererfahrung coole Grafiken und Animationen mit WebGL zu erstellen. ;-)

                        Nachdem ich die Inhalte nun also soweit skizziert hatte, war, was die Frage der Gestaltung angeht, meine erste Idee (welche mir aus Usability Sicht bis heute auch als die mit Abstand beste erscheint) diejenige gewesen, einen virtuellen Desktop zu erstellen, mit Taskleiste und frei skalier- und verschiebbaren Fenstern, so dass die Seite gewissermaßen in ihrer Gesamtheit als Entwicklungsumgebung konzipiert ist, deren einzelne Komponenten fein aufeinander abgestimmt sind.

                        In einem solchen Szenario wäre das Konzept der single page application also nicht bloß eine technische Lösung, sondern es wäre auch für die visuelle Gestaltung konstitutiv.

                        Verstehst du, was ich meine? :-)

                        Davon abgesehen, nochmals vielen Dank für die aufklärenden Worte!

                        Beste Grüße,

                        var ♂

            2. Hallo

              [...] Wie JürgenB schon ansprach, ist es mit der Vergabe von URL-Parametern möglich, die Inhalte indizierbar zu machen. Ob die dann per JS gesetzt werden, um Lesezeichen zu erzeugen, oder von einem Robot per Linkliste, die mit einer per JS gesetzten Klasse mit CSS ausgeblendet wird, angesprochen werden, ist egal.

              Hast du zufälligerweise irgendeinen Link zu einer Seite parat, wo das einigermaßen verständlich erklärt wäre?

              die Suche nach "ajax navigation" hat mich hier hin geführt

              Gruß Jürgen

              1. Hallo Jürgen

                die Suche nach "ajax navigation" hat mich hier hin geführt

                Großartig! Vielen Dank!

                Meine PHP-Kenntnisse sind begrenzt, da ist so ein funktionierendes Beispiel Gold wert. ;-)

                Nochmals Dank und Gruß,

                var ♂

      2. Hallo

        Hast du schon darüber nachgedacht, die Inhalte per Ajax auszutauschen? Sie sind nicht von vornherein im Dokument, was, wie du sagtest, aufgrund der Datenmenge ausfällt und das Dokument als solches wird dauerhaft angezeigt.

        das wäre auch mein Vorschlag. Und wenn Direktlinks möglich sein sollen, man kann per Javascript die URL-Parameter auswerten, und man kann per Javascript die Browser-History erweitern.

        Gruß Jürgen

        1. Hallo Jürgen

          das wäre auch mein Vorschlag. Und wenn Direktlinks möglich sein sollen, man kann per Javascript die URL-Parameter auswerten, und man kann per Javascript die Browser-History erweitern.

          Das habe ich natürlich glatt wieder übersehen: Das alte Problem if (!JS) Seite = 'tot';

          Andererseits ist das vielleicht ein Nachteil, den man in Kauf nehmen kann, vor allem wenn es bei der Seite inhaltlich ohnehin um WebGL geht, sprich, wer da kein JavaScript zur Verfügung hat, wird an den Inhalten sowieso wenig Spaß haben... ;-)

          Dank und Gruß,

          var

  4. Hallo und schönen Nachmittag,

    erzähl doch mal, um was für eine Animation es sich handelt.

    • Hast Du die selber erzeugt?
    • kannst Du sie in Sequenzen zerschneiden?

    Dann wäre "Frames" schon ein passendes Stichwort, aber nicht fürs HTML, sondern für die Animation. Dann könntest Du nämlich ersteinmal versuchen, diese Sequenzen mittels JavaScript wieder so zusammenzusetzen, dass man den Schnitt nicht mehr bemerkt.

    Der nächste Schritt wäre dann, beim Aufruf eines neuen Dokumentes via Link im letzten den Sequenzzähler als Linkparameter mitzugeben (Eventlistener auf alle betroffeneen Links) und im neuen Dokument die Animation dort starten zu lassen.

    Im Prinzip arbeitet Videostreaming so. Da werden auch immer Sequenzen nachgeladen und in dem Moment gestartet, wenn die letzte endet. Vielleicht geht das aber nur mit Flash oder ähnlichen Plugins?


    Mich würde in diesem Zusammenhang interessieren:
    Gibt es einen Trigger für JavaScript, der ausgelöst wird, wenn eine Animation endet?

    Dazu fand ich auch etwas:
    http://www.sitepoint.com/css3-animation-javascript-event-handlers/


    @ Forumsgeist: please add "animation" as tag

    Grüße
    TS

    1. @TS

      erzähl doch mal, um was für eine Animation es sich handelt.

      • Hast Du die selber erzeugt?

      Ja, mit WebGL, also in JavaScript und GLSL geschrieben.

      • kannst Du sie in Sequenzen zerschneiden?

      Nicht wirklich. Die Programme werden rekursiv mit requestAnimationFrame( ) aufgerufen, das heißt, der Browser bestimmt letztlich die FPS-Rate, und das wäre anders auch nicht zufriedenstellend zu lösen, da feste Vorgaben mit setInterval( ) extrem unperformant sind.

      Dazu kommt, dass bei den Animationen unterschieden werden muss zwischen deterministischen und nichtdeterministischen Abläufen. Es kommt nämlich nicht selten vor, dass Zufallselemente eine Rolle spielen, die nicht 1:1 reproduziert werden können, zumal die Möglichkeiten, Daten aus einem laufenden GLSL-Shaderprogramm auszulesen auch nur relativ begrenzt sind.

      Dann wäre "Frames" schon ein passendes Stichwort, aber nicht fürs HTML, sondern für die Animation. Dann könntest Du nämlich ersteinmal versuchen, diese Sequenzen mittels JavaScript wieder so zusammenzusetzen, dass man den Schnitt nicht mehr bemerkt.

      Wie ich eingangs in einem anderen Post schon sagte, wäre es (zumindest bei deterministischen Programmen) theoretisch möglich, durch entsprechende Parametrisierung einen Bestimmten Zustand für T(x) zu reproduzieren, aber das wäre erstens extrem aufwändig, zweitens nur bei bestimmten Animationen überhaupt möglich, und drittens trotzdem kein Garant für einen nahtlosen Übergang.

      Mich würde in diesem Zusammenhang interessieren:
      Gibt es einen Trigger für JavaScript, der ausgelöst wird, wenn eine Animation endet?

      Dazu fand ich auch etwas:
      http://www.sitepoint.com/css3-animation-javascript-event-handlers/

      Da hast du die Antwort doch gefunden...

      animationstart, animationiteration, animationend
      

      ...sind die Events für CSS-Animationen. :-)

      Beste Grüße,

      var