Inhalt laden _ohne_ die gesamte Seite neu zu laden

[Yael]

Hallo,

wie ihr sicherlich mitbekommen habt, bin ich derzeit dabei eine kleine Seite zu erstellen. Nichts Großes. Aktuell setzte ich unsere Team Seite um. Jede Teamseite hat eigentlich drei Seiten!

• Beschreibung
• Karte
• Bilder

diese Seiten habe ich in einer kleinen Navigation verlinkt

  
<nav>  
   <ul id="navlist">  
      <li><a href="team/<?php echo htmlspecialchars($titelURL); ?>.html" id="aktiv">Beschreibung</a></li>  
      <li><a href="team/karte/<?php echo htmlspecialchars($titelURL); ?>.html">Karte</a></li>  
      <li><a href="team/bilder/<?php echo htmlspecialchars($titelURL); ?>.html">Bilder</a></li>  
    </ul>  
</nav>  

Aufgerufen werden diese Punkt so

http://example.com/team/yael.html
http://example.com/team/karte/yael.html
http://example.com/team/bilder/yael.html

Funktioniert auch wunderbar. Nun überlege ich mir ob es vielleicht sinnvoll wäre den „Conten-Bereich“ dynamisch laden zu lassen sprich ohne dass die Seite neu geladen wird.

Vorteil für mich:

• weniger Dateien die ich anpassen muss wenn ich Änderungen am Design / Code habe.
• Ich habe nur eine PHP / MySQL Abfrage da alle Daten sich in der gleichen Seite befinden
• User bekommen den Inhalt schneller zu sehen, da kein kompletter Seitenbau getätigt werden muss.

Nachteil für den User:

Was ist wenn er kein Javascript zulässt? OK ich gehe davon aus, dass dieses nur sehr wenige User machen und die es machen die wissen was sie machen.

Daher ist es wirklich eine Überlegung wert dieses umzusetzen.

Meine Frage hierzu:
Ist es schwer dieses einzubauen? Oder gibt es hier schon etwas fertiges was ihr mir empfehlen könnt? Meine Kenntnisse in Javascript bzw. jQuery sind relativ klein. Es sollte nur ein Inhalt in einem speziellen DIV ausgetauscht werden.

[Der Martin]

Hi,

Nun überlege ich mir ob es vielleicht sinnvoll wäre den „Conten-Bereich“ dynamisch laden zu lassen sprich ohne dass die Seite neu geladen wird.

würde ich nicht machen, weil ich dadurch keinen Vorteil gewinne, den ich nicht auch anders haben könnte.
Allerdings klingt deine weitere Beschreibung auch nicht nach "dynamisch laden", sondern eher danach, dass du den kompletten Inhalt aller drei Seiten auf einmal laden willst, um dann nur jeweils einen von drei Blöcken _anzuzeigen_.

Vorteil für mich:

• weniger Dateien die ich anpassen muss wenn ich Änderungen am Design / Code habe.
• Ich habe nur eine PHP / MySQL Abfrage da alle Daten sich in der gleichen Seite befinden
• User bekommen den Inhalt schneller zu sehen, da kein kompletter Seitenbau getätigt werden muss.

Bei den ersten zwei Punkten stimme ich dir zu, wenn du tatsächlich nur die Sichtbarkeit einzelner Bereiche umschaltest. Beim dynamischen Laden des Contents wäre zumindest der zweite Punkt nicht erfüllt. Der dritte Punkt dagegen ist beim Umschalten der Sichtbarkeit erst dann erfüllt, wenn die Seite einmal geladen ist. Der erste Aufruf dauert aber etwas länger, auch wenn das wahrscheinlich nicht ins Gewicht fällt.

Nachteil für den User:
Was ist wenn er kein Javascript zulässt?

Dann hat er entweder Pech, oder deine Lösung ist so aufgebaut, dass er in diesem Fall alle drei Bereiche gleichzeitig sieht (z.B. untereinander).

OK ich gehe davon aus, dass dieses nur sehr wenige User machen und die es machen die wissen was sie machen.

Sehe ich auch so. Trotzdem bin ich dafür, diese Minderheit zu berücksichtigen, wenn das mit wenig Aufwand möglich ist.

Ist es schwer dieses einzubauen?

Nicht wirklich. Beispielsweise könnte man a) beim Laden der Seite und b) als Reaktion auf einen Klick dem html- oder body-Element eine von drei Klassen geben, und im Stylesheet festlegen, dass beim Vorhandensein dieser Klasse jeweils zwei von drei Blöcken ausgeblendet werden sollen. Der Fallback, dass JS-Verweigerer dann alle Blöcke auf einmal sehen, ist darin automatisch enthalten.

So long,
 Martin

[MudGuard]

Hi,

Bei den ersten zwei Punkten stimme ich dir zu, wenn du tatsächlich nur die Sichtbarkeit einzelner Bereiche umschaltest. Beim dynamischen Laden des Contents wäre zumindest der zweite Punkt nicht erfüllt. Der dritte Punkt dagegen ist beim Umschalten der Sichtbarkeit erst dann erfüllt, wenn die Seite einmal geladen ist. Der erste Aufruf dauert aber etwas länger, auch wenn das wahrscheinlich nicht ins Gewicht fällt.

Nachteil für den User:
Was ist wenn er kein Javascript zulässt?

Dann hat er entweder Pech, oder deine Lösung ist so aufgebaut, dass er in diesem Fall alle drei Bereiche gleichzeitig sieht (z.B. untereinander).

Oder so, daß gar kein Javascript erforderlich ist (CSS-Selektor :target ...)

OK ich gehe davon aus, dass dieses nur sehr wenige User machen und die es machen die wissen was sie machen.
Sehe ich auch so. Trotzdem bin ich dafür, diese Minderheit zu berücksichtigen, wenn das mit wenig Aufwand möglich ist.

Ich weiß nicht, inwiefern Suchmaschinen dynamische Inhalte nachladen (können).
Das hängt sicher auch davon ab, wie sich die Ajax-URL ergibt - steht die komplett im Code, oder wird sie dynamisch aus verschiedenen Teilen/Variablen zusammengesetzt ...
Insofern würde ich eher auf eine Lösung setzen, die nicht Teile des (suchmaschinenrelevanten) Texts nachlädt.

cu,
Andreas

[molily]

Hallo,

Jede Teamseite hat eigentlich drei Seiten!

• Beschreibung
• Karte
• Bilder

Es scheint mir, das ist nicht viel Inhalt, sodass du ihn ohne Probleme auf einer Seite unterbringen kannst. Anfangs ist die Beschreibung sichtbar, beim Klick in der Navigation werden die anderen Inhalte eingeblendet. Ein Nachladen der Daten per Ajax ist wahrscheinlich nicht nötig.

Aufgerufen werden diese Punkt so

http://example.com/team/yael.html
http://example.com/team/karte/yael.html
http://example.com/team/bilder/yael.html

Ist es unbedingt nötig, dass diese drei separaten URL existieren?

Funktioniert auch wunderbar. Nun überlege ich mir ob es vielleicht sinnvoll wäre den „Conten-Bereich“ dynamisch laden zu lassen sprich ohne dass die Seite neu geladen wird.

Damit handelst du dir alle Probleme ein, die das Routing in Single-Page-Applications einbringt. Idealerweise musst du mit pushState und popstate arbeiten, damit die URL korrekt gesetzt und die Seite beim Betätigen des Back-Buttons wiederhergestellt wird.

Vorteil für mich:

• weniger Dateien die ich anpassen muss wenn ich Änderungen am Design / Code habe.

Wenn sich die Inhalte ändern, ist es vertretbar, dass einzelne Dateien geändert werden müssen.

Wenn sich das Drumherum, also Dokument-Head, Header, Seitenleisten, Footer usw. ändern, sollten die einzelnen Dateien nicht geändert werden müssen. Das kann du mit Includes und einem PHP-seitigen Routing lösen.

Kurz: Dieses Problem solltest du anders lösen.

• Ich habe nur eine PHP / MySQL Abfrage da alle Daten sich in der gleichen Seite befinden

Das spricht ebenfalls dafür, die Inhalte unter einer URL unterzubringen.

• User bekommen den Inhalt schneller zu sehen, da kein kompletter Seitenbau getätigt werden muss.

Das lohnt sich erst, wenn es sich um große Mengen an Inhalt handelt.

Wenn nicht, dann sind die Inhalte sogar langsamer zugänglich, weil für jeden kleinen Teilinhalt ein Request gesendet werden muss. Der hat gerne einen Overhead von zwei Kilobyte. Auf Mobilgeräten kommen lange Latenzen hinzu.

Was ist wenn er kein Javascript zulässt? OK ich gehe davon aus, dass dieses nur sehr wenige User machen und die es machen die wissen was sie machen.

Selbst wenn du Inhalte mit Ajax nachlädst, sollten die Inhalte ohne JavaScript über eine URL normal zugänglich sein. Ohne JavaScript-Logik würde der Browser einfach die URL aus der Navigation öffnen, anstatt den Inhalt dynamisch nachzuladen.

Wenn du die Inhalte hingegen auf einer Seite unterbringst, dann besteht die Navigation nur aus Links innerhalb der Seite:

<a href="#foo">Foo</a>

Beim Klick wird mit JavaScript #foo gezeigt und fokussiert.

Siehe auch: http://9elements.com/io/index.php/hybrid-javascript-apps/

Ist es schwer dieses einzubauen?

Wenn man es richtig machen will: Ja.
Wenn man es quick’n’dirty macht: Nein.

Meine Kenntnisse in Javascript bzw. jQuery sind relativ klein.

Dann würde ich dir eher zur Einblenden-/Ausblenden-Lösung raten, anstatt zu Ajax.

Mathias