HTML Statische Website - Best Practices/Optimierungen?

[#basTi]

Hallo zusammen,

ich habe momentan eine Statische Homepage, mit nur zwei Seiten. Der Content ist statisch und ich hab alles mit purem HTML & CSS gemacht. Nun wird die Seite langsam größer und ich kriege dadurch ziemlich viel redundanten Code, den ich immer synchron halten muss.

Aufbau der Dateien:

• seite1.html
• seite2.html
• images/
• css/
• js/

Die Html hat folgende Struktur:

• Header
• Navigation
• Content
• Footer

Wenn jetzt eine neue HTML Datei dazu kommt muss ich in jeder .html Datei Beispielsweise die Navigation anpassen, was natürlich unschön ist.
Welche Möglichkeiten gibt es dies zu vereinfachen?
Falls es dafür eine Lösung gibt, die nicht redundant ist kommt noch das Problem mit der Navigation auf, weil dort für jede Seite andere Styles her müssen ( der Link zur aktuellen Seite hat n anderes CSS-Style als die anderen Links)

Ich kann mich noch entfernt erinnern, dass ich das vor 10 Jahren mit PHP und includes gelöst habe. Das mit der navigation lief dann über die URL ( page.html?site=impressum oder so ähnlich). Ich glaub jedoch nicht, dass das immernoch die beste Lösung darstellt und wollte nun Wissen welche alternativen es zu PHP oder dieser Methode gibt.

Ich hoffe ich konnte mein "Problem" ausreichend genug schildern ... falls nicht einfach nachfragen.

Vielen dank schon mal im voraus.

 

[Madman1209]

Hi,

am einfachsten lässt sich sowas mit PHP machen => dynamisch je nach Seite den Inhalt generieren, die Navigation anpassen oder Styles verwenden.

Eventuell wäre auch ein CMS wie Wordpress für dich interessant. Damit kannst du einfach den Content einbauen und der Rest (Navigation, Styles etc) übernimmt dann quasi Wordpress.

Aber der einfache Anfang wäre schon PHP

VG,
Mad

 

[benneq]

Den redundanten Code könntest du mit JS eliminieren. Ein anderes Mittel zum 'includen' wären noch iframes (nicht nehmen). Oder halt serverseitig das ganze generieren lassen

 

[#basTi]

Ich will das ganze auch sehr simpel halten, da der Content wirklich fix ist und falls sich wirklich mal was ändert ist das schnell in der .html gemacht.
Ein CMS wäre hierfür Overkill meiner Meinung nach.

Wie würde das mit JS funktionieren?
Bei der Php variante gefällt mir eben diese Linkstruktur nicht ( ?site=articles ).

 

[Sturmel]

Wenns etwas selbst geschriebenes sein soll, wäre eine Template-Engine wie zB Smarty eine Option ( http://www.smarty.net/ ).

 

[Madman1209]

Hi,

die Linkstruktur "?site=articles" ist auch nur eine Möglichkeit. Das wäre "GET". Es gibt auch noch "POST" in PHP. Lies dich da einfach mal ein.

Wordpress ist auch für so kleine Sachen (gerade wenn sie wachsen) kein Overkill und ruckzuck gemacht.

Per JS würde ich es nicht unbedingt machen, finde ich persönlich deutlich unschöner als per PHP die Seite gleich richtig zu bekommen.

VG,
Mad

 

[Gajel]

Ganz simpel und zweckerfüllend!

<?php include('footer.php'); ?>

 

[Tumbleweed]

Oder SSI.

 

[#basTi]

Ok dann bleib ich wohl bei PHP. Hat sich in letzter Zeit wohl net so viel getan

 

[Daaron]

Den redundanten Code könntest du mit JS eliminieren. Ein anderes Mittel zum 'includen' wären noch iframes (nicht nehmen).

Pft... JS ist doch noch viel schlimmer als iframes.
Stell dir einfach mal vor, ein User mit aktivem NoScript-Plugin im Browser kommt auf die Seite, und plötzlich hat er keine Navigation bzw. die Navigationsknöpfe tun einfach nichts. Stell dir vor, der User nutzt aufgrund einer Sehbehinderung einen Screenreader oder ein Braille-Terminal (was JavaScript einfach ausschließt). Stell dir vor, du willst deinen Content auch bei Google haben, der Crawler mag JS auch nicht.

Zu jedem über JS verfügbaren Content muss es auch einen direkten Weg ohne JS geben.

Wie würde das mit JS funktionieren?
Bei der Php variante gefällt mir eben diese Linkstruktur nicht ( ?site=articles ).

Der Weg über JavaScript führt über Ajax-Requests. Ist eigentlich ganz einfach: Zum DOMready-Event bindest du an jeden Knopf deiner Navigation ein entsprechendes Onclick-Event, dass dann deinen Content-Container mit etwas füllt, dass es aus einer anderen Datei asynchron nachlädt. Sowas ist aber halt keinen Millimeter barrierefrei.

Wenn dich "index.php?site=home" stört, dann schau dir doch mal die .htaccess (wenn wir hier von nem Apache-Server reden) an, um genau zu sein mod_rewrite. Schreib dir eine Rewrite-Rule, die aus "index.php?site=($1)" ein $1.html macht. So in etwa... ich schreib mir sowas auch immer nur ab... außerdem hat Contao eh cleverste Rewrites *G*

die Linkstruktur "?site=articles" ist auch nur eine Möglichkeit. Das wäre "GET". Es gibt auch noch "POST" in PHP. Lies dich da einfach mal ein.

Nenene... $_GET und $_POST haben ihre Einsatzgebiete, die man nicht blind austauschen sollte. Alles, was über dieselbe Adresse mehrfach aufgerufen werden kann, muss mit GET gemacht werden. Alles, was nur ein einziges Mal übertragen werden soll, wird mit POST gelöst.
Stell dir mal vor, du löst deine Navigation über POST...
1.) Deine Navigation wäre dann ein Formular, keine simplen Links. Schlecht für die Barrierefreiheit und Suchmaschinen
2.) Dein User könnte nie eine der Unterseiten bookmarken
3.) Würde dein User die Seite refreshen (F5, Strg+R,...), würde er eine POST-Warnung bekommen und sich fragen, was das soll.
4.) Niemand könnte Links auf deinen Content außerhalb der Startseite setzen

Wordpress ist auch für so kleine Sachen (gerade wenn sie wachsen) kein Overkill und ruckzuck gemacht.

Das kann man hingegen unterschreiben. Ein kleines, kompaktes CMS mit Wachstumspotential schadet doch nicht.

Oder SSI.

Wenns der Server mitmacht...

 

[#basTi]

Ich hab's nun wie folgt gelöst:
Den ganzen redundanten Code in einzelne php Dateien und pro "echter" Site auch eine php.
Bsp: Index.php
Include Header.php, include Navigation.php, Content Code, include footer.php

Damit hab ich ne ganz normale URL Struktur - nur statt .html halt .php und die Redundanzen auch weg.