WBCE CMS Forum

ruebezahl

Member

Bester Weg zum Single-Page Design ?

Hallo!
Man würde ja glauben, dass WBCE ideal geeignet wäre für Single-Pager, also endlose Seiten zum runterscrollen, eventuell mit einen Menü, das Sprungmarken  enthält. Da gibt es aber Hürden.

Was ist der beste Weg?
Welche Templates wären als Basis am besten geeignet?
Wie mache ich das (narrensicher) mit den Abschnitten, so dass diese "anfassbar (mit CSS und JS) sind?
Welche Klassen sind da gängig? Bei Bootstrap sind das "container" und "row", was ich auf die Schnelle gesehen habe, aber da kann man sich nie sicher sein, macht ja jeder irgendwie.

Konkret würde ich an sowas denken (ist nicht von mir): www.veith-consulting.at

Diese hier ist zwar mit WBCE gemacht, aber das ist etwas verzwickt gelöst und nur ansatzweise eine Single-Page: https://www.alpor.at/produkte/alpor-duo … platte.php

Jo, was gibt es da? Sehe ich den Wald vor lauter Bäumen nicht?

stefanek

Developer

Re: Bester Weg zum Single-Page Design ?

An sich bietet WBCE den richtigen Unterbau dafür.
Es mangelt an dem nötigen Modul, mit dem User auf einfache Weise Elemente einfügen.
Bei Wordpress gibt es Elementor und andere Plugins, mit denen man etwas dieser Art leicht machen kann.

Ich selbst arbeite hin und wieder mal an einem Modul das sich seit Jahren in Dauer-Alpha befindet. Ich setze es gelegentlich ein, aber ich komme nicht dazu, es zu veröffentlichen, da mir die Zeit fehlt. Es fehlt noch allerhand. Installationsroutine des Moduls selbst, Installationsroutine für Sub-Plugins (das sind kleine Layout-Plugins mit denen man dann die einzelnen Sections erstellt).

Es ist nicht einfach.

Man muss sehen, dass die Module auf dem Markt (ich meine die von den anderen Systemen) teilweise seit Jahren in Entwicklung, oft mit viel Support entstanden sind. Eine gute Idee und Programmierkenntnisse reichen da leider nicht aus. Ich stoße immer wieder an Grenzen -- hauptsächlich zeitliche. Ich entwickele daran aber hauptsächlich nur dann weiter, wenn ich ein größeres Webdesign-Projekt habe.

Andere Möglichkeiten sehe ich leider nicht.
Ruud hatte vor Jahren mal Multi-Part-Page (wenn ich im Namen des Moduls nicht irre). Das ist vom Prinzip her gut, leider aber nicht sehr praktikabel wenn man viele verschiedene Layout-Typen auf der gleichen Seite verarbeiten möchte.

WYSIWYG Sections aneinander reihen geht nicht.

Anderes? Ich weiß nicht, ob jemand sonst noch etwas entwickelt hat für seinen Hausgebrauch.

Wenn es ein starkes Interesse gäbe und einige WBCE User bereit wären diese Entwicklung finanziell zu unterstützen könnte ich mehr Zeit investieren. Ich habe es aber bis jetzt nicht vorgestellt, da ich davon ausgehe, dass so ein starkes Interesse nicht vorhanden ist.

Wenn es genügend User gäbe, die wissen wollen was das für ein Modul ist und wie es funktionieren und aussehen soll könnte ich eine Konzept-Präsentation (Whitepaper) machen.

Nur vorab: es ist ein einfaches Section-Modul. Einer Section wird ein vorgefertigtes (mitgeliefertes oder selbst erstelltes) Layout zugeordnet. Ein Layout enthält das HTML Gerüst selbst, CSS, JS (je nach Bedarf des Layouts) und eine Reihe dem Layout zugewiesener Felder (das kann Wysiwyg sein, Textfelder, Textareas, Checkboxen, eine Karte/Map, alles Mögliche, es gibt unzählige verschiedene "Extrafelder"). Und auch Bilder können zugewiesen werden, womit eine Section auch eine Gallerie sein kann. Einmal erstellt kann die Section dupliziert oder verschoben werden (auch zu einer anderen Seite).
Erstellte Layouts können immer wieder verwendet werden. Wird ein Layout geändert wird es überall dort geändert, wo es bereits in Verwendung ist.
Die Layouts (HTML Gerüst) verfügen über eine Logik-Syntax (anders als die Layoutfelder in den meisten Modulen).

Extrafelder sind wirklich unterschiedliche Elemente, nicht bloß Textareas oder Textfelder. Es können Auswahllisten, Drag&Drop Listen, Checkboxen (z.B. "zeige Formular?") sein. Es gibt viele unterschiedliche, die man dem Layout-Plugin zuordnen kann und es können weitere programmiert werden.

(Das ist an sich schon eine ziemlich umfangreiche Beschreibung des Moduls, allerdings ohne Screenshots.)

Das Modul ist sehr umfangreich, aber in der Verwendung für den Endverbraucher ist es einfach (und fortgeschrittene WBCE User sollten auch in der Lage sein eigene Layouts die zu ihren Templates passen, zu erstellen -- aber es erfordert, dass ich die nötige Dokumentation bereit stelle).

Neulich habe ich jemandem eine Eingabemaske (die Extrafelder generieren die Eingabemaske) für Hotelzimmer erstellt. Die Person die die Seite verwaltet hat nicht viel Erfahrung mit dem Internet. Aber es hat sofort "klick und leucht" gemacht. (siehe Anhang.)

Mehr später, je nach Interesse.

Gruß,
Stefanek

Last edited by stefanek (06.05.2024 00:07:06)

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

webbird

Administrator

Re: Bester Weg zum Single-Page Design ?

Für BC1 haben wir mal damit experimentiert, einem Template mitzugeben, welche Sektionen bei der Auswahl automatisch angelegt werden sollen. In so einem Fall könnte man sich jedes beliebige fertige SPA-Template nehmen, es entsprechend anpassen, und bräuchte es nur noch im Backend auszuwählen bzw. eine neue Seite damit anzulegen. Diese hätte dann automatisch alle vorgesehenen Sektionen an den entsprechenden Stellen, die dann nur noch mit Leben gefüllt werden müßten. Das Konzept wäre aber nicht oder nur begrenzt dafür geeignet, dass der Anwender später weitere Sektionen hinzufügt. Man muss halt bedenken, dass so eine "Endlosseite" trotzdem eine gute Strukturierung braucht, damit sich der Besucher zurechtfindet. Fertige SPA-Vorlagen sind meistens entsprechend konfektioniert - und sehen dementsprechend komisch aus, wenn man einfach weitere Inhalte dran hängt.

Ein anderer Ansatz wäre, für die Inhalte einzelne versteckte Seiten anzulegen, so dass es für den Admin sehr übersichtlich ist, wenn er die Inhalte bearbeiten möchte - er muss dann nicht im Backend endlos herumscrollen. Die eigentliche SPA-Seite füllt man dann mit Hilfe des SectionPickers oder Droplets. Je nach Gestaltung der Vorlage könnte das ggfs. sogar eine einzelne WYSIWYG-Section sein. Damit bei Droplets auch das CSS/JS geladen wird, braucht es vermutlich noch die DropletsExtensions von Ralf(Berlin), sofern die noch funktionieren. Bei manchen Modulen scheitert m.W. auch der SectionPicker. Immerhin ist das aber ein Ansatz, der out-of-the-box funktioniert.

Last edited by webbird (06.05.2024 13:17:04)

---

Ich habe eine Amazon-Wishlist. Oder spende an das Projekt.
Ich kann, wenn ich will, aber wer will, dass ich muss, kann mich mal

florian

Administrator

Re: Bester Weg zum Single-Page Design ?

Geb ich halt doch auch noch meinen Senf dazu.
WBCE ist mitnichten das ideale CMS für Singlepage-Websites, und es gibt deshalb auch keine fertigen Templates für diesen Einsatzzweck.
Wenn es denn ein Onepager werden soll, geht der einzige Weg wie schon von webbird dargestellt über den Sectionpicker (die Droplets Extension braucht es mMn nicht). Das heißt, die Ansichtsseite muss von Hand zusammengebastelt werden, und das mehr oder weniger kundige Redakty muss dann die richtige unsichtbare Seite bearbeiten.
Das ist nicht besonders flexibel, nicht besonders komfortabel und vermutlich auch nicht besonders fehlertolerant.
Ich weiß auch nicht, ob sich damit Lazy-Load-Effekte, also dass der weitere Inhalt der Seite erst geladen wird, wenn er in den Viewport scrollt, realisieren lassen.

Mein Ansatz für einen Onepager wäre, sich ein fertiges HTML-Template (templatemo.com oder wo auch immer) zu ziehen und da dann statt WBCE Coast CMS oder etwas ähnliches hinterzuhängen.

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

stefanek

Developer

Re: Bester Weg zum Single-Page Design ?

In den Droplets kann man mit den Methoden der Insert Klasse arbeiten, dadurch erübrigt sich die Extension von Ralf (man müsste den SectionPicker entsprechend anpassen, dass er nach den nötigen Dateien scannt und sie bei Vorhandensein verdrahtet).

Das Modul an dem ich arbeite hat auch auf der Roadmap, dass Layout-Plugins in dem Template Paket mitgeliefert werden können (entweder als Überschreibung der im Modul mitgelieferten Layout-Plugins oder unabhängig von diesen).
Ich muss ehrlich gestehen, dass ich mich bei einigen Vorhaben übernommen habe. Es ist ein Riesenaufwand. Als Idee ist es gleich vorhanden, vielleicht eine kleine Skizze anfertigen wie, wo, was aber wenn es in die Umsetzung geht .... ....

Angedacht ist auch ein Frontend-Edit. Da es ein einziges Modul ist, könnte neben jede damit erstellte Section einen "Button" setzen, der die Eingabemaske dieser Section in einem Modal aufmacht (statt ins Backend zu leiten).
Und natürlich könnte man dann auch über eine Historie nachdenken, um gemachte Änderungen rückgängig zu machen (bis zu 3 Versionen).

All diese Dinge sind potenziell möglich.

Momentan jedoch fehlen mir die Kapazitäten dafür.

Gruß,
Stefanek

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

webbird

Administrator

Re: Bester Weg zum Single-Page Design ?

Ich weiß auch nicht, ob sich damit Lazy-Load-Effekte, also dass der weitere Inhalt der Seite erst geladen wird, wenn er in den Viewport scrollt, realisieren lassen.

Wenn man mit AJAX nachladen will, vermutlich nicht. Wenn man nur die (bereits geladenen) Inhalte unsichtbar schaltet und dann beim Scrollen sichtbar macht, dann ja.

Mir ist aufgefallen, dass ich irrtümlich SPA ins Spiel gebracht habe, das ist aber noch was anderes als ein einfacher One-Pager. Falsche Abkürzung, aber trotzdem richtige Erklärung.

---

Ich habe eine Amazon-Wishlist. Oder spende an das Projekt.
Ich kann, wenn ich will, aber wer will, dass ich muss, kann mich mal

stefanek

Developer

Re: Bester Weg zum Single-Page Design ?

Ich weiß jetzt nicht, worauf Florians Zitat bezogen war, aber ein Lazy-Load ließe sich über Funktionen + Ajax realisieren.
Im Modul ist auch ein Caching der einzelnen Sections vorgesehen (das kann man aber per Section auch abschalten).
Somit könnte man diese gecachten HTML Fragmente per Ajax reinladen, wenn man wollte.
Es ist nicht umgesetzt, aber theoretisch möglich. Es auf gecachte Inhalte anzuwenden wäre das Einfachste, da ansonsten zu viel Handarbeit beim Erstellen unterschiedlicher Layout-Plugins erforderlich werden würde.

Biankas Ansatz, bereits vorgeladene Inhalte beim runterscrollen einzublenden, ist natürlich auch machbar.
Das kann man den unterschiedlichen Layout-Plugins beibringen, falls unterschiedliche Elemente der Section zeitversetzt eingeblendet werden sollen. Was auch immer gewünscht ist, es sollte gehen mit den vielen unterschiedlichen JS/CSS Effekten, die es seit Jahren gibt.

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

ruebezahl

Member

Re: Bester Weg zum Single-Page Design ?

Ich bin mir ziemlich sicher:
Mit "AJAX" oder "Lazy Loading"  meinen die meisten Nutzer eigentlich nur EInblend-Effekte wie AOS oder dergleichen. Also ein bisschen Zauber beim Scrollen. Ich habe Kunden, die machen die gesamte Website mit Teasers und Wunderblock - wegen dem "Wooshie".

WBCE ist relativ AJAX-feindlich, schon das Ändern einer Zahl in der Datenbank braucht soviel Ressourcen wie ein kompletter Seitenaufruf. Es ist kein Gewinn, wenn das Nachladen eines Abschnittes die gleiche Latenzzeit wie ein Seitenaufruf hat. Da ist es besser, man lädt gleich alles und blendet es nur ein.
Was anderes ist es natürlich bei vielen Modulen wie zb Miniform. Aber das machen die Module ja eh selbst.

Lazy Loading: Was ich sehe, haben die Browser selbst ein recht gutes Management, was sie wann laden. In speziellen Situationen (Gallerys) kann man ja selbst Hand anlegen, aber ich bezweifele, dass da viel Nachfrage ist.

Caching: Ein heikles Thema, ich habs versucht, aber am Ende hab ich das nirgends mehr im EInsatz. Weil es undurchschaubare Problemchen machen kann.

Was nach meinem Empfinden fehlt:
Ein (einheitlicher) Wrapper um jeden Abschnitt, mit dem man die Abschnitte per JS/CSS "anfassen" kann.
Am besten in einer Struktur, die gängig ist, etwa von Bootstrap oder so, egal solange es immer gleich ist.
<section id="sectionw_XX" class="section_wrapper row [modulmame] [sonstwas]" data-module="[modulmame]"><article class="container"> ..... </article></section>

Wie bringt man das rein?
1) Einfach ein Häkchen im Backend: "Mach das", ohne Möglichkeit, das individuell zu konfigurieren. Kommt sonst nur Chaos raus .
Gespeichert in den settings als "0/1" oder den ganzen String.
2) Eine Konstante im Template. USE_SECTION_WRAPPER, auch hier ohne Möglichkeit für individuelle Einstellungen.
Das hätte den Vorteil, dass es vom Template abhängt, ob ein Section-Wrapper genutzt wird. Wer will kann das ja auch in der config.php verwenden.
Natürlich müsste WBCE auch ein wenig geändert werden, damit der Wrapper um die Abschnitte kommt.

Was kann ich dann damit machen?:
Ein Snippet kann dann alle Abschnitte mit Effekten und Wooshie versehen, entweder individuell einstellbar oder Random, nach irgendwelchen Regeln. Es gibt ja Module, die sich mit Effekten nicht vertragen - wunderblock zB.
Auch Module, die selbst Seiten erzeugen (news, topics) oder Gallerys können problematisch sein.

Ebenso damit wären individuelle Hintergrundfarben der Abschnitte, volle Breite usw. machbar. Mit wenig CSS geht das alles.

Last edited by ruebezahl (07.05.2024 09:16:56)

ruebezahl

Member

Re: Bester Weg zum Single-Page Design ?

Ich stochere gerade im Core herum:
frontend.functions.php -> ca Zeile 507, function page_content()
Das ist etwas undurchsichtig (?). Was ich sehe, gibt es da keine section_id und auch keinen Modulnamen mehr, auf die ich zugreifen kann.
Wie geht das?

Ein Problem gibt es auch mit Modulen, die etwas anderes als html erzeugen, etwa code(2), das habe ich nicht bedacht.
Aber warum eigentlich? Auch "code" gibt letztlich html aus, das PHP muss ja schon geparsed sein.
Muss ich woanders ansetzen?

Gefunden:
DIe richtige Stelle ist:
frontend.functions.php -> ca Zeile 440, function block_contents()
Da rein:
if (defined('USE_SECTION_WRAPPER') AND USE_SECTION_WRAPPER == true) {
    $sContent = '<section id="sectionw_'.$aSection['section_id'].'" class="section_wrapper row mod_'.$aSection['module'].'" data-module="'.$aSection['module'].'"><article>'.$sContent.'</article></section>';

}
define('USE_SECTION_WRAPPER', true); hab ich mal in die config.php gegeben.
Na, da hab ich mal ein Spielzeug. ;-)

Ginge das Ganze auch mit Öutput Filters?

Last edited by ruebezahl (07.05.2024 10:15:41)

stefanek

Developer

Re: Bester Weg zum Single-Page Design ?

Was nach meinem Empfinden fehlt:
Ein (einheitlicher) Wrapper um jeden Abschnitt, mit dem man die Abschnitte per JS/CSS "anfassen" kann.
Am besten in einer Struktur, die gängig ist, etwa von Bootstrap oder so, egal solange es immer gleich ist.
<section id="sectionw_XX" class="section_wrapper row [modulmame] [sonstwas]" data-module="[modulmame]"><article class="container"> ..... </article></section>

Wie bringt man das rein?
1) Einfach ein Häkchen im Backend: "Mach das", ohne Möglichkeit, das individuell zu konfigurieren. Kommt sonst nur Chaos raus .
Gespeichert in den settings als "0/1" oder den ganzen String.
2) Eine Konstante im Template. USE_SECTION_WRAPPER, auch hier ohne Möglichkeit für individuelle Einstellungen.
Das hätte den Vorteil, dass es vom Template abhängt, ob ein Section-Wrapper genutzt wird. Wer will kann das ja auch in der config.php verwenden.
Natürlich müsste WBCE auch ein wenig geändert werden, damit der Wrapper um die Abschnitte kommt.

Was kann ich dann damit machen?:
Ein Snippet kann dann alle Abschnitte mit Effekten und Wooshie versehen, entweder individuell einstellbar oder Random, nach irgendwelchen Regeln. Es gibt ja Module, die sich mit Effekten nicht vertragen - wunderblock zB.
Auch Module, die selbst Seiten erzeugen (news, topics) oder Gallerys können problematisch sein.

Ebenso damit wären individuelle Hintergrundfarben der Abschnitte, volle Breite usw. machbar. Mit wenig CSS geht das alles.

Das geht und kann für einzelne Module individuell gewrappt werden:
https://forum.wbce.org/viewtopic.php?pid=42912#p42912

USE_SECTION_WRAPPER Konstante brauchst Du dann gar nicht mehr oder kannst Du im Template selbst abfragen.

Gruß,
Stefanek

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

ruebezahl

Member

Re: Bester Weg zum Single-Page Design ?

Ah! Danke Christian! Das kannte ich nicht!
Muss ich mal genauer ansehen, lässt sich vielleicht kombinieren.

Ich habs hier mal so gemacht wie oben beschrieben: https://wbce.at/ (auch /tpls/), also mit der kleinen Core-Änderung.
Zum allgemein testen über viele Templates und Module hinweg,

gleich mit Random-AOS, damits flutscht und kracht, in ein Tool gepackt. Das macht momentan nur WYSIWYG  und mod_globalcomments, sowie topics
Die Alpha-Version ist hier:
https://wbce.at/downloads/wooshietool-0.1.0.zip

Last edited by ruebezahl (07.05.2024 14:29:52)

stefanek

Developer

Re: Bester Weg zum Single-Page Design ?

Ah! Danke Christian! Das kannte ich nicht!
Muss ich mal genauer ansehen, lässt sich vielleicht kombinieren.

Ja, ich wundere mich auch, aber es hat bis jetzt so gut wie keine Beachtung erhalten.
Ich nehme an, es ist zu komplex sobald etwas PHP ins Spiel kommt. Und ich kann es auch irgendwie nachempfinden. Als ich WB kennenlernte war PHP Code für mich ein Buch mit 7 Siegeln und ich habe mich furchtbar schwer getan.
Somit war das CMS auch grade richtig für mich. Alles "Deppensicher" und auf der anderen Seite mit dem Potenzial mehr zu machen, je mehr PHP man beherrscht. Das war damals in einem Entwickler CMS sogar das Argument für mich, mir das System näher anzuschauen. Ich musste mit dem Zug von Hamburg nach Bremen und kaufte mir so ein Magazin im Bahnhofskiosk. Junge, das waren noch Zeiten. :-D

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

ruebezahl

Member

Re: Bester Weg zum Single-Page Design ?

...Ein anderer Ansatz wäre, für die Inhalte einzelne versteckte Seiten anzulegen, so dass es für den Admin sehr übersichtlich ist, wenn er die Inhalte bearbeiten möchte - er muss dann nicht im Backend endlos herumscrollen. ....

Ja, so hab ich o.g. Site alpor.at gemacht, mit childs2tab (nur eben ohne Tabs)
Das geht recht gut und mit einer kleinen Modifikation habe ich auch das Submenü mit den Sprungankern reingebracht.

Aber: Nicht alle Module funktionieren wie geplant, oft nur Kleinigkeiten, aber da kommt man nicht gleich drauf. Kann man einem Normaluser nicht zumuten. Und es widerspricht ein wenig dem Geist von WBCE: Dinge sind dort, wo man sie vermuten würde. Das ist in dem Fall eben nicht so.

----

Der nächste Punkt in der Single-Page Geschichte wäre das Ein/Ausrücken bzw die Breiten der Abschnitte, ebenso wie die Farben oder sonstwas.
Sprich: Abschnitt 12 hat die ganze Breite der Seite und ist gelb hinterlegt, Abschnitt 13 ist schmäler und transparent... usw.

Es wäre wohl zumutbar, dass man das irgendwo im CSS hinterlegt: section#sectionw_145 {background: #fff6cd;}
Klassen kann man per jQuery reinhängen: $('section#sectionw_145').addClass('container'); um einem Framework zu genügen.
Nicht "Frau-Irmgard"-geeignet, aber immerhin mal möglich.
Von generischen default-Klassen wie container oder row würde ich abraten, das gibt Konflikte.

Wenn die Basis nicht individuell ist, sondern standardisiert, kann  man ein Admin-Tool machen, das das alles komfortabler macht. Wird jetzt akut keiner machen, aber es wäre schon gut, wenn das zumindest mal möglich wäre.

----

So halbherzig-nebenbei schraube ich an einem neuen System für Itemz Presets per JSON, die dann von anderen Orten geladen werden können, mit kleinem Vorschaubildchen usw. Ist auch nicht gerade narrensicher, aber gut für kleine Schnippelchen basierend auf irgendwelchen Tutorials.

Und gelegentlich (ganz manchmal) kommt mir eine ganz andere Idee:
So Wordpress-Plugins wie "Elementor"... die sind ja eigentlich relativ eigenständig. Wäre es nicht möglich, einen Wrapper für sowas zu machen? Also die nötigen Functions aus Wordpress umzuleiten? Aber das ist für mich völlig illusorisch, da baue ich eher noch den "Elementor" nach ;-)

Last edited by ruebezahl (07.05.2024 16:12:17)

byteworker

Member

Re: Bester Weg zum Single-Page Design ?

Ich hatte vor einigen Jahren ein Template von Ruud verwendet, welches alle Seiten untereinander in ein Layout gepackt hat. Ist vermutlich nicht mehr so verwendbar, aber eventuell hilft es ...

---

= Templates für WBCE