Amma Teur: Inhalt-inkludieren: Wie machen es die Profis?

Hallo, ich bin Webdesign-Anfänger und habe eine Frage, zu der ich noch keine passende Antwort gefunden habe.

Ich habe eine kleine Webseite (rd. 15 Seiten) erstellt. Die Struktur ist sehr einfach:

  • Header-Bild
  • horizontale Navigation
  • Inhalt

Da das Header-Bild und die Navigation auf jeder Seite identisch sind, habe ich dies in eine .html gepackt und binde diese auf jeder Seite per PHP ein. Desweiteren beinhaltet diese Daten (Meta-Daten, CSS-Styles) die von allen Seiten benötigt wird.

Mir kommt dieser Stil sehr unsauber vor, da sich z.B. die gemeinsam genutzten Meta-Daten in einem <head>-Bereich (der eingebundenen Datei) im <body>-Bereich der eigentlichen Seite befinden. Die sauberere Variante wäre je eine .html zu erstellen, die nur Meta-Daten beinhaltet und eine die nur das Header-Bild und die Navigation beinhaltet.

Desweiteren ist diese Variante sehr unflexibel, da ich z.B. auf der Startseite weitere Informationen im Bereich des Kopfs platzieren möchte. So müssen die zurzeit per absolut platziertem div eingebaut werden oder mittels Fallunterscheidung per PHP ein anderer Kopf platziert werden.

Wie handhaben die Profis das Problem, sich wiederholende Daten einzubinden? Da auch regelmäßig neue Seiten hinzukommen, müsste jedesmal die Navigation angepasst werden. Wie sehr leidet die Performance, wenn ich pro Seite mehrere Daten inkludieren muss?

Gruß und Danke für alle Tipps

  1. Hi,

    Ich habe eine kleine Webseite (rd. 15 Seiten) erstellt. Die Struktur ist sehr einfach:

    • Header-Bild
    • horizontale Navigation
    • Inhalt

    Da das Header-Bild und die Navigation auf jeder Seite identisch sind, habe ich dies in eine .html gepackt und binde diese auf jeder Seite per PHP ein. Desweiteren beinhaltet diese Daten (Meta-Daten, CSS-Styles) die von allen Seiten benötigt wird.

    zunächst mal ist es unüblich, Dateien als .html zu benennen, die nur includiert werden, also gar kein vollständiges HTML-Dokument enthalten. Ist aber auch nicht weiter schlimm.

    Mir kommt dieser Stil sehr unsauber vor, da sich z.B. die gemeinsam genutzten Meta-Daten in einem <head>-Bereich (der eingebundenen Datei) im <body>-Bereich der eigentlichen Seite befinden.

    Dann ist das nicht nur unsauber, sondern ergibt im Endeffekt sogar fehlerhaftes HTML. Denn style- oder meta-Elemente haben im body nichts zu suchen. Wenn du das Konzept so beibehalten willst, dann solltest du die include-Datei in zwei Dateien zerlegen, und eine davon im head, eine im body includen, so wie du es auch selbst schon andeutest:

    Die sauberere Variante wäre je eine .html zu erstellen, die nur Meta-Daten beinhaltet und eine die nur das Header-Bild und die Navigation beinhaltet.

    Genau. :-)

    Wie handhaben die Profis das Problem, sich wiederholende Daten einzubinden?

    Eine häufige verwendete Technik ist es, in einer PHP-Datei das HTML-Grundgerüst zu schreiben, also all das, was nachher für alle Seiten gleich bleiben soll. Über URL-Parameter (z.B. ?page=kontakt) teilt man dem PHP-Script mit, welche Seite es bitte erzeugen möge, und das Script erzeugt abhängig davon die wechselnden Informationen wie z.B. title und den eigentlichen Hauptinhalt. Letzteren auch gern per include.
    Die etwas unschönen URLs wie /index.php?page=foo kann man dann über die Serverkonfiguration auf bessere, sprechende URLs abbilden (suche im Zweifelsfall nach mod_rewrite).

    Da auch regelmäßig neue Seiten hinzukommen, müsste jedesmal die Navigation angepasst werden.

    Das wäre weder bei deinem Konzept ein Problem, noch bei der von mir beschriebenen Variante.

    Wie sehr leidet die Performance, wenn ich pro Seite mehrere Daten inkludieren muss?

    Vermutlich wenig. Wir reden hier über gerade mal zwei Dateien, die includiert werden. Und wenn die häufiger benötigt werden, wird der Server (dessen Betriebssystem) diese Dateien früher oder später auch in seinem Cache vorhalten. Das fällt dann vermutlich in die Größenordnung "nicht messbar".

    So long,
     Martin

    PS: Warum hast du die Tags browser und datenbank gewählt?

    1. Hallo, danke schonmal für die Infos.

      Über URL-Parameter (z.B. ?page=kontakt) teilt man dem PHP-Script mit, welche Seite es bitte erzeugen möge, und das Script erzeugt abhängig davon die wechselnden Informationen wie z.B. title und den eigentlichen Hauptinhalt. Letzteren auch gern per include.

      Daran habe ich noch garnicht gedacht. Die Variante sieht elegant aus, werde das mal umsetzen. Hat diese Art der Auslieferung und die URL (negative) Auswirkungen auf das Suchmaschienenranking?

      edit: Habe mir gerade mod_rewrite angesehen. Damit sollte die Struktur garnicht zu erkennen sein und damit garkeine (optische) Veränderung zum aktuellen Konstrukt.

      PS: Warum hast du die Tags browser und datenbank gewählt?

      Wollte diese Tags aus den vorgeschlagenen Tags entfernen, aber erst hinterher gesehen, dass ich genau diese Ausgewählt habe.

      Gruß

    2. @@Der Martin

      zunächst mal ist es unüblich, Dateien als .html zu benennen, die nur includiert werden, also gar kein vollständiges HTML-Dokument enthalten.

      Bei Frameworks ist das für zu inkludierende Templates durchaus üblich. Bei HTML Imports auch.

      Dann ist das nicht nur unsauber, sondern ergibt im Endeffekt sogar fehlerhaftes HTML. Denn style- oder meta-Elemente haben im body nichts zu suchen.

      Du meinst hier link, nicht style?

      Es gibt Bestrebungen, das zu ändern.

      Und wenn man RDFa oder Microdata einsetzt, haben meta-Elemente sehr wohl was im body zu suchen. (Folie 101, Video ab 22:05) link-Elemente auch. (Folie 111, Video ab 24:03)

      LLAP 🖖

      --
      „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
      „Hat auf dem Forum herumgelungert …“
      (Wachen in Asterix 36: Der Papyrus des Cäsar)
      1. Hi,

        zunächst mal ist es unüblich, Dateien als .html zu benennen, die nur includiert werden, also gar kein vollständiges HTML-Dokument enthalten.

        Bei Frameworks ist das für zu inkludierende Templates durchaus üblich. Bei HTML Imports auch.

        okay, mir ist das so noch nicht begegnet. Was aber nichts heißen muss.

        Dann ist das nicht nur unsauber, sondern ergibt im Endeffekt sogar fehlerhaftes HTML. Denn style- oder meta-Elemente haben im body nichts zu suchen.

        Du meinst hier link, nicht style?

        Nein, ich meinte schon style, an link hatte ich im Moment gar nicht gedacht.

        So long,
         Martin

  2. Wie handhaben die Profis das Problem, sich wiederholende Daten einzubinden?

    Templates für jeweils

    1. header
    2. body
    3. menu
    4. footer

    und was da reingerendert wird, bestimmt eine dem Request-URL zugeordnete Konfiguration (title, descr, css, js, ads, lastmod, expires...).

    1. @@pl

      Templates für jeweils

      1. header
      2. body
      3. menu
      4. footer

      und was da reingerendert wird, bestimmt eine dem Request-URL zugeordnete Konfiguration (title, descr, css, js, ads, lastmod, expires...).

      Over-engineering.

      Wenn ein Template eine seitenabhängige Konfiguration braucht, ist das ein sicheres Zeichen dafür, dass man ohne Template besser dran ist als mit.

      LLAP 🖖

      --
      „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
      „Hat auf dem Forum herumgelungert …“
      (Wachen in Asterix 36: Der Papyrus des Cäsar)
      1. Wenn ein Template eine seitenabhängige Konfiguration braucht, ist das ein sicheres Zeichen dafür, dass man ohne Template besser dran ist als mit.

        Templates sorgen für die saubere Trennung von Programmlogik, Inhalt und Layout. Und selbstverständlich wird Programmcode nicht auf einen großen Haufen geschmissen sondern mit ein bischen Köpfchen organisiert bspw. in Form einer Klassenbindung an einen URL (die Idee ist nichema von mir) was ohne Konfiguration nicht geht.

        #Aber natürlich kann man das auch anders machen.