Seite (HTML, CSS, JS, FS) technisch korrekt neu aufbauen

[Conny]

Hallo ihr alle,

ich habe eine Seite erstellt, die technisch ziemlich verwickelt aufgebaut ist bzw. von mir sicherlich noch mehr verknotet wurde :-) und die ich gerne verbessern würde, insbesondere was die Handhabung anbelangt. Mir ist klar, dass "verbessern" letztlich auf einen völligen Neuaufbau herausläuft, aber gut, das soll niemanden stören.

Die Bedingung ist allerdings: es darf am Design nichts geändert werden, die Seite muss hinterher genauso aussehen wie vorher. Minnimalste Änderungen wären vielleicht drin, aber das soll erst einmal gar nicht im Kopf herumspuken.

Ich suche nun nach diversen Ideen, die einen sinnvollen Neuaufbau vernünftig unterstützen könnten. Mir reichen zunächst Stichworte mit einem kurzen Hinweis, wofür man das ggfs. einsetzen könnte. Ich möchte diese Hinweise sammeln und erst einmal im stillen Kämmerlein auswerten. Also bitte keine Abhandlungen schreiben, diese Fragen kommen dann später. :-)

Die Seite ist momentan so aufgebaut:

Frameset: oben, mitte, unten, wobei oben und unten immer zu sehen sein müssen. Deswegen meine Lösung mit dem Frameset. Gibt es dafür vielleicht eine andere Lösung?

Oben ist das Menü mit den Hauptpunkten. Fährt man mit der Maus drüber, klappt ein Untermenü auf (Javascript). Da dieses Untermenü der Länge nach nicht mehr in die Kopfzeile passt, sondern optisch in den mittleren Teil der Seite hineinragt, wird mittels Javascript im mittleren Frame eine Ebene eingeblendet. (CSS, visibility:hidden; usw. halt)

Diese Menüebenen sind momentan in jeder einzelnen HTML-Seite untergebracht, was bei Änderungen natürlich ziemlich aufwändig ist. Da ich kein PHP kann, werde ich daran auch nichts ändern können. Irgendjemand meinte serverside includes wären da vielleicht geeignet. Kennt jemand Links zu Seiten, die das für einen Anfänger einigermaßen verständlich rüberbringen?

Ich wünsche noch einen schönen Rest-Dienstag,
Conny

[Viennamade]

Hallo!

Die Seite ist momentan so aufgebaut:

Nenne doch die Adresse dieser Seite! Wäre doch wirklich interessant, wenn Du und das Forum die Diskussion aufgrund der konkreten Seite beginnen.

Irgendjemand meinte serverside includes wären da vielleicht geeignet. Kennt jemand Links zu Seiten, die das für einen Anfänger einigermaßen verständlich rüberbringen?

http://de.selfhtml.org/cgiperl/intro/ssi.htm

Beste Grüße
Viennamade

[Danny]

Hi Conny,

Mir ist klar, dass "verbessern" letztlich auf einen völligen Neuaufbau herausläuft

Das kommt darauf an. Bei zuvor evtl. nicht ausreichender Planung, veralterter Technik: ja, sonst nicht unbedingt.

Die Bedingung ist allerdings: es darf am Design nichts geändert werden

Das ist oft nicht sinnvoll, da veränderte Struktur, bzw. Navigation und moderne Techniken sich letztendlich meistens auch auf Design/Layout auswirken.

Frameset: oben, mitte, unten, wobei oben und unten immer zu sehen sein müssen.

Und warum muß das so sein?

Deswegen meine Lösung mit dem Frameset. Gibt es dafür vielleicht eine andere Lösung?

Jaein, nicht ohne Mehraufwand. CSS bietet eine Möglichkeit (position:fixed) aber leider funktioniert das nicht im IE und man ist auf Workarrounds, bzw. Hacks angewiesen.

Oben ist das Menü mit den Hauptpunkten. Fährt man mit der Maus drüber, klappt ein Untermenü auf (Javascript). Da dieses Untermenü der Länge nach nicht mehr in die Kopfzeile passt, sondern optisch in den mittleren Teil der Seite hineinragt, wird mittels Javascript im mittleren Frame eine Ebene eingeblendet.

Das ist ein Nachteil der Frames und bestimmt ziemlich umständlich... Ein Problem: Ohne Javascript kannst Du die Seite vergessen, weil dann Deine Navigation nicht funktioniert.

Mein Tipp: Keep it simple! Ganz weg mit den Aufklappmenüs...

... oder strukturiere die Navi so, dass ohne Javascript das komplette Menü statisch angezeigt wird und mit Dynamik ins Spiel kommt, d.h. die Untermenüs ein/ausgeblendet werden.

Diese Menüebenen sind momentan in jeder einzelnen HTML-Seite untergebracht, was bei Änderungen natürlich ziemlich aufwändig ist. Da ich kein PHP kann...

1. Die Basics von PHP (Includes) sind auch für Einsteiger leicht zu erlernen.
2. Viele HTML-Editoren (auch Freeware) ermöglichen "Includes" bzw. Vorlagen-basierte Seiten, wobei die Vorlage incl. Navi i.d.R. nur ein einizges Mal erstellt werden muß und die Inhalte an bestimmte Stellen vom Editor eingefügt werden können.

freundlichen Gruß
Danny

[Conny]

Hallo Danny,

Die Bedingung ist allerdings: es darf am Design nichts geändert werden

Das ist oft nicht sinnvoll, da veränderte Struktur, bzw. Navigation und moderne Techniken sich letztendlich meistens auch auf Design/Layout auswirken.

Das ist mir durchaus klar, das ändert aber nichts an den Bedingungen.

Frameset: oben, mitte, unten, wobei oben und unten immer zu sehen sein müssen.

Und warum muß das so sein?

Weil es das Design so vorgibt.

Oben ist das Menü mit den Hauptpunkten. Fährt man mit der Maus drüber, klappt ein Untermenü auf (Javascript). Da dieses Untermenü der Länge nach nicht mehr in die Kopfzeile passt, sondern optisch in den mittleren Teil der Seite hineinragt, wird mittels Javascript im mittleren Frame eine Ebene eingeblendet.

Das ist ein Nachteil der Frames und bestimmt ziemlich umständlich...

Es ist nicht wirklich wild, man muss nur die Position etwas anders  angeben als sonst.

: Ein Problem: Ohne Javascript kannst Du die Seite vergessen, weil dann Deine Navigation nicht funktioniert.

*seufz* Ich hätte es wohl doch dazu schreiben sollen. Mir geht es hier nicht um die Diskussion ob Frames, JavaScript oder sonstige Dinge böse oder nicht böse sind. Die Vor- und Nachteile sind klar. Die Bedingungen, die ich beschrieb sind notwendig und dafür suche ich Lösungen. Dass es mit einem anderen Aufbau leichter zu erledigen wäre, ist mir völlig klar.

1. Die Basics von PHP (Includes) sind auch für Einsteiger leicht zu erlernen.

Aber nicht mal eben nebenbei, oder? Ich muss nach Möglichkeit recht zügig mit der Umarbeitung loslegen. Das Buch "PHP in 5 Tagen" habe ich noch nirgenswo gesehen. ;-)

2. Viele HTML-Editoren (auch Freeware) ermöglichen "Includes" bzw. Vorlagen-basierte Seiten, wobei die Vorlage incl. Navi i.d.R. nur ein einizges Mal erstellt werden muß und die Inhalte an bestimmte Stellen vom Editor eingefügt werden können.

Ah, gut. Ich benutze HomeSite, vielleicht hat der ja so etwas. Dank dir.

Conny

[dbenzhuser]

N'Obend <- Ich bleib dabei

1. Die Basics von PHP (Includes) sind auch für Einsteiger leicht zu erlernen.

Aber nicht mal eben nebenbei, oder? Ich muss nach Möglichkeit recht zügig mit der Umarbeitung loslegen. Das Buch "PHP in 5 Tagen" habe ich noch nirgenswo gesehen. ;-)

<?php
    include 'datei.irgendwas';
?>

Und wenn du schon mal ein Klitzekleinwenig programmiert hast, machst du auch recht bald deutlich mehr.
PHP ist verdammt gutmütig. (was man spätestens dann merkt, wenn man ein alten Script auf Vordermann bringen will... oje, was hab ich da schon für Code von mir gesehen ;) )

Ah, gut. Ich benutze HomeSite, vielleicht hat der ja so etwas. Dank dir.

Nicht das ich wüsste.

dbenzhuser

[Conny]

N'Obend <- Ich bleib dabei

Tue dies. :-)

<?php
    include 'datei.irgendwas';
?>

Ich vermute mal, dass das der entsprechende Befehl sein soll. Sieht einfach aus. :-)

Und wenn du schon mal ein Klitzekleinwenig programmiert hast, machst du auch recht bald deutlich mehr.

Na, ich bin gespannt. :-)

PHP ist verdammt gutmütig. (was man spätestens dann merkt, wenn man ein alten Script auf Vordermann bringen will... oje, was hab ich da schon für Code von mir gesehen ;) )

Genauso geht es mir mit der Webseite, die ich gerade ändern möchte. :-)

Schönen Abend noch,
Conny

[Danny]

Dein Thema: Seite (HTML, CSS, JS, FS) technisch korrekt neu aufbauen

Was hast Du denn erwartet?

Wenn Deiner Meinung nach weder am Design, noch an der Frame-/Javascript-Basis was geändert werden soll, wozu dann überhaupt das Thema neuaufbau?
Also wenn ich Dich richtig verstanden habe, ist Dein einziges Problem der Pflege-Aufwand (Navi, etc.), bzw. Dein Ziel eine modulare Verwaltung mit Includes... Aber warum dann nicht gleich auch moderne, zeitgemäße Konzeption u. valider, sauberer Code?

Weil es das Design so vorgibt.

Das ist kein Argument! Du hast evtl. das falsche Design gewählt oder altmodische Vorstellungen von Webseiten.
Sorry, wenn ich provoziere aber kennst Du Portale wie z.B. http://cssvault.com? Die dort in der Gallery aufgelisteten Seiten sind von der Technik (und oft auch vom Design) her z.Zt. ziemlich angesagt und modern. Und 99% kommen ohne Frames aus... Schau Dir mal ein paar genauer an (Design + Quellcode), es lohnt sich!

freundlichen Gruß
Danny

[Elya]

Hallo Danny,

Weil es das Design so vorgibt.
Das ist kein Argument! Du hast evtl. das falsche Design gewählt oder altmodische Vorstellungen von Webseiten.

Natürlich ist das ein Argument! Wenn der Kunde vielleicht glücklich und zufrieden mit dem vorhandenen ist und nichts Neues (bezahlen) will? Vorgegebenes Corporate Design? Funktionierender, beim Kundenkunden ankommender Seitenaufbau? Gute Usability unabhängig von der verwendeten Technologie?

Was hat moderne, zeitgemäße (Code/Struktur)Konzeption mit dem Design zu tun? Sicher, es gibt ein paar "frame-typische" Elemente, die schwer ins CSS rüberzutransportieren sind, aber das, was du heute als "angesagt und modern" bezeichnet, wird man vielleicht morgen als "gähn, noch so'n typisches CSS-Layout aus den frühen 10ern..." bezeichnen.

Sorry, wenn ich provoziere

ich laß mich heute mal provozieren ;-)

Gruß aus Köln-Ehrenfeld,

Elya

[Conny]

'namd ihr,

Weil es das Design so vorgibt.
Das ist kein Argument! Du hast evtl. das falsche Design gewählt oder altmodische Vorstellungen von Webseiten.

Natürlich ist das ein Argument! Wenn der Kunde vielleicht glücklich und zufrieden mit dem vorhandenen ist und nichts Neues (bezahlen) will? Vorgegebenes Corporate Design? Funktionierender, beim Kundenkunden ankommender Seitenaufbau? Gute Usability unabhängig von der verwendeten Technologie?

Eben dieses. Das Design ist vorgegeben, der Kunde will es so behalten, Punkt. Da möchte ich, wie ich auch schon im Beitrag davor erwähnt habe, Danny, keine Diskussion darüber führen, was man - laut wem auch immer - tun muss, um "in" zu sein, alles perfekt zu machen, als "Technikprofi" bezeichnet zu werden, einen Titel im Zusammenhang mit Webgestaltung zu gewinnen oder was auch immer.

Vielleicht ist es ja auch eine viel größere Herausforderung, aus nicht perfekten Grundbedingungen, die größtmögliche Perfektion herauszuarbeiten?

Conny

[wahsaga]

hi,

Vielleicht ist es ja auch eine viel größere Herausforderung, aus nicht perfekten Grundbedingungen, die größtmögliche Perfektion herauszuarbeiten?

ja, es mag für manchen bastler eine herausforderung sein, einen porsche- oder ferrari-motor in eine citroen-2cv-"ente" einzubauen, selbst wenn er diesen dann wieder auf entenmotor-leistung drosseln muss, damit ihm die karre nicht auseinanderfliegt.

dass das außenstehenden trotzdem leicht meschugge vorkommt, wird aber wohl nicht zu vermeiden sein ...

gruß,
wahsaga

[Danny]

Okay, habe verstanden. Der Kunde ist König.

An was hast Du noch gedacht, außer der Sache mit der Vereinfachung des Content Mangements?
Wie bereits erwähnt, die PHP-Grundfunktionen zum Laden externer Dateien sind wirklich simpel und diverse Editoren bieten ähnliche Funktionen.
Hast Du Dir schon Gedanken über evtl. Usability-Verbesserungen im Bereich Navi gemacht? Vielleicht fehlt eine Sitemap oder Suchfunktion.

freundlichen Gruß
Danny

[Conny]

Moin Dany,

An was hast Du noch gedacht, außer der Sache mit der Vereinfachung des Content Mangements?

Die Verbesserung der absolut chaotischen CSS-Datei. :-)

Wie bereits erwähnt, die PHP-Grundfunktionen zum Laden externer Dateien sind wirklich simpel und diverse Editoren bieten ähnliche Funktionen.

Das werde ich mir auf jeden Fall anschauen und wie es sich momentan anhört auch sicherlich verwenden.

Hast Du Dir schon Gedanken über evtl. Usability-Verbesserungen im Bereich Navi gemacht? Vielleicht fehlt eine Sitemap oder Suchfunktion.

Am Menü an sich muss nichts weiter geändert werden. Der Kunde weiß um die Nachteile von JavaScript, die Übersicht ist durch die klare Kapiteltrennung sehr gut gegeben, so dass eine Sitemap nicht dringend notwendig ist und eine Suchfunktion ist irgendwo im Hinterkopf der Leute abgespeichert, wird dann aber nicht von mir erledigt. Da hängt noch jemand anderes mit dran, der sich im wesentlichen um Servergeschichten und dergleichen kümmert und dann auch für solche Programmierungen zuständig ist.

Wenn ich meine CSS-Datei aufräume und das Menü extern einlesen lasse, dürfte ich schon einen riesen Schritt weiter sein.

Danke auf jeden Fall für die Hilfe.
Conny

[Danny]

Moin Conny!

Danke für das Feedback!

Die Verbesserung der absolut chaotischen CSS-Datei. :-)

Es ist sinnvoll, das Update der CSS in mehreren Stufen durchzuführen und jeweils Backups zu machen. Erst die allgemeinen Sachen und dann nach und nach immer speziellere Klassen bilden, Formatierungen zusammenfassen, etc..

Wenn ich meine CSS-Datei aufräume und das Menü extern einlesen lasse, dürfte ich schon einen riesen Schritt weiter sein.

Das stimmt. Viel Erfolg!

Danny

[Elya]

Hallo Conny,

Die Bedingung ist allerdings: es darf am Design nichts geändert werden, die Seite muss hinterher genauso aussehen wie vorher.

sowas ähnliches habe ich gerade hinter mir, eine hochinteressante Aufgabe und der Kunde ist auch zufrieden, aber für mich selbst noch teilweise unbefriedigend gelöst. Und das Design sieht natürlich doch etwas anders aus...

Frameset: oben, mitte, unten, wobei oben und unten immer zu sehen sein müssen.

Das berühmte Footer-Problem. http://www.alistapart.com/articles/footers bietet Ansätze, in komplexeren, auch floatenden Umgebungen bin ich aber nicht vollends glücklich damit geworden. Möglicherweise bietet sich hier doch der Einsatz einer Tabelle an.

Oben ist das Menü mit den Hauptpunkten. Fährt man mit der Maus drüber, klappt ein Untermenü auf (Javascript).

Da wirst Du auch künftig nicht völlig um Javascript rumkommen. es gibt jedoch maximal CSS-unterstützte Lösungen, die auch bei abgeschaltetem Javascript funktionieren sollten.

Diese Menüebenen sind momentan in jeder einzelnen HTML-Seite untergebracht, was bei Änderungen natürlich ziemlich aufwändig ist. Da ich kein PHP kann, werde ich daran auch nichts ändern können.

Ein php-Include ist imho nicht schwieriger als ein ssi. http://de3.php.net/manual/de/function.include.php

Eine spannende Aufgabe, viel Erfolg!

Gruß aus Köln-Ehrenfeld,

Elya

[Conny]

Hallo Elya,

Die Bedingung ist allerdings: es darf am Design nichts geändert werden, die Seite muss hinterher genauso aussehen wie vorher.

»»

sowas ähnliches habe ich gerade hinter mir, eine hochinteressante Aufgabe

Das lässt hoffen. :-)

»»und der Kunde ist auch zufrieden, aber für mich selbst noch teilweise unbefriedigend gelöst. Und das Design sieht natürlich doch etwas anders aus...

Minnimale Änderungen werden sicherlich akzeptiert, aber ich kann jetzt nicht hingehen und z. B. eine völlig andere Linkstruktur anbringen.

Frameset: oben, mitte, unten, wobei oben und unten immer zu sehen sein müssen.
Das berühmte Footer-Problem. http://www.alistapart.com/articles/footers bietet Ansätze, in komplexeren, auch floatenden Umgebungen bin ich aber nicht vollends glücklich damit geworden. Möglicherweise bietet sich hier doch der Einsatz einer Tabelle an.

In dieser Richtung hatte ich ganz zu Beginn schon mal etwas probiert (Bevor ich die Seite damals anfing), aber da kam ich noch nicht so schnell weiter. Ein guter Zeitpunkt, es noch einmal zu versuchen. Der Link scheint auf jeden Fall hilfreich zu sein.

Da wirst Du auch künftig nicht völlig um Javascript rumkommen. es gibt jedoch maximal CSS-unterstützte Lösungen, die auch bei abgeschaltetem Javascript funktionieren sollten.

Das JavaScript darf ruhig bleiben. Der Kunde weiß um die Nachteile und will es trotzdem so haben.

Ein php-Include ist imho nicht schwieriger als ein ssi. http://de3.php.net/manual/de/function.include.php

Feinchen, danke.

Eine spannende Aufgabe, viel Erfolg!

Dank dir. Ich hoffe, es wird nicht zuuu anstrengend. :-)

Conny

[Chräcker Heller]

Hallo,

Minnimale Änderungen werden sicherlich akzeptiert,

dabei solltest Du Dir zu Deiner Beruhigung auch überlegen, welche Veränderungen er überhaubt bemerken würde. Solange das grobe Bild (Dreigeteilt, mitte der Inhalt, oben und unten feststehend und ein Ausklapmenü) und an der Dekografik nichts geändert wird, wird er manche Scrolleistenverschiebung oder Text-umrückung, bei der wir schon nahe der Ohnmacht sind, gar nicht registrieren.

Viel Glück. Ich kann es mir "allerding", solange man eben keine Skrupel vor Frames, "includiertes" JS und Tabellengerüste hat auch nicht so schwer vorstellen. Strict wirds ja kaum werden können (Macht für mich auch keinen Sinn, jetzt überhöhten Wert auf Stricte Seiten innerhalb eines "notwendigen" Framesset zu legen, höchstens aus sportiven Gründen) und sauber bedeutet doch hier "nur" valide und leichter zu pflegen und mit guten Chancen auf 20% weniger Code ;-)

Chräcker

[Conny]

Guguck Chräcker

Minnimale Änderungen werden sicherlich akzeptiert,

dabei solltest Du Dir zu Deiner Beruhigung auch überlegen, welche Veränderungen er überhaubt bemerken würde. Solange das grobe Bild (Dreigeteilt, mitte der Inhalt, oben und unten feststehend und ein Ausklapmenü) und an der Dekografik nichts geändert wird, wird er manche Scrolleistenverschiebung oder Text-umrückung, bei der wir schon nahe der Ohnmacht sind, gar nicht registrieren.

In der Hinsicht mache ich mir auch gar nicht so viel Gedanken. Wie du schon schreibst: die Grundstrktur muss bleiben, aber was die konkrete Anordnung anbelangt, vertraut man mir da schon, und wenn ich ihnen sage, dass dieses und jenes etwas anders aussieht, weil man es dann technisch besser verwalten kann, werden sie schon nicht jammern.

Viel Glück.

Danke. :-)

und sauber bedeutet doch hier "nur" valide und leichter zu pflegen und mit guten Chancen auf 20% weniger Code ;-)

Du hast es erfasst. ;-)

Grüße und noch einen schönen Tag,
Conny

[Danny]

Wie sieht's eigentlich mit dem Code aus, hast Du schon mal validiert und bereits Inhalt/Struktur (HTML) und Design (CSS) weitgehend getrennt? Das bringt z.T. einiges an Speicherplatz-Ersparnis, Übersicht, Performance und entrümpelt die Seiten.

freundlichen Gruß
Danny

[Conny]

Wie sieht's eigentlich mit dem Code aus, hast Du schon mal validiert

Lieber nicht. ;-)

Nee, ich weiß schon, dass das rein technisch absoluter Müll ist, den ich da produziert habe. Es wird zwar alles so weit ok angezeigt, aber trotzdem ist das in sich so vermurkst, dass mir gar nichts anderes übrig bleibt, als es neu aufzubauen.

und bereits Inhalt/Struktur (HTML) und Design (CSS) weitgehend getrennt?

Ja. Allerdings weiß ich heute einiges mehr über CSS als damals, so dass ich auch die CSS-Datei sinnvoller aufbauen kann.

Das bringt z.T. einiges an Speicherplatz-Ersparnis, Übersicht, Performance und entrümpelt die Seiten.

Jau. Es gibt drei Felder, die ich bearbeiten muss: CSS-Datei bereinigen, die Verwaltung des Menüs vereinfachen (Dazu habe ich ja schöne Ideen von euch bekommen.) und nach Möglichkeit irgendwie das Frameset loswerden. Wenn mir das gelungen ist, kann ich beruhigt aufatmen. :-)

Gruß und Dank,
Conny