{"type":"rich","html":"
\"PepeCyBs<\/a>PepeCyBs Welt<\/a> wrote the following post <\/a>Fri, 24 Jan 2025 23:36:56 +0100<\/span><\/span><\/div>
Mit Hubzilla eine Organisations-Seite im Fediverse anbieten<\/strong>
\"Image\/photo\"<\/a>

Hier nun das angek\u00fcndigte Tutorial, in welchem ich eine Seite (als Ersatz f\u00fcr Facebook-Seiten... und mit deutlich mehr M\u00f6glichkeiten) f\u00fcr eine Organisation erstelle.

Die Organisation dient hier nur als Beispiel. Es kann nach dem Prinzip auch eine Seite f\u00fcr eine Firma, ein Gesch\u00e4ft, eine Band, einen K\u00fcnstler, Schriftsteller... f\u00fcr einfach alles erstellt werden.

Ich habe mich f\u00fcr eine Organisation entschieden, weil ich einmal mit einigen Mitstreitern eine gegr\u00fcndet habe. Sie ist allerdings inzwischen aufgel\u00f6st und die Webpr\u00e4senz (ehemals WordPress) nur noch als statisches Archiv vorhanden. Ich habe sie gew\u00e4hlt, weil ich mir keine Inhalte aus den Fingern saugen muss und es unsch\u00e4dlich ist, wenn ein Hubzilla-Kanal f\u00fcr sie existiert, obwohl es sie nicht mehr gibt.

Kanal erstellen<\/h3>
Kanal ist das erste Stichwort! Nat\u00fcrlich sollte man sich f\u00fcr ein solches Projekt einen Kanal bei Hubzilla anlegen. Wie das funktioniert kann man in der Hubzilla KnowledgeDB oder im Hubzilla Benutzerhandbuch nachlesen.

\"Image\/photo\"<\/a>

Je nach gew\u00fcnschter Funktionalit\u00e4t muss man die passende Kanalrolle ausw\u00e4hlen. Generell ist "\u00d6ffentlich" f\u00fcr solche Zwecke aber eine gute Wahl.

Profil "sch\u00e4rfen"<\/h3>
Wichtig ist nun, das Profil wirklich mit sinnvollen Informationen zu best\u00fccken. Die Kurzbeschreibung ist ein Muss, weil sie in der Profilkarte erscheint und jeder Besucher so sehen kann, wo er denn gelandet ist.

\"Image\/photo\"<\/a>

Wenn die Ver\u00f6ffentlichung der Anschrift gew\u00fcnscht ist (bei Organisationen sinnvoll und auch erforderlich), muss im Profil dann auch dieser Bereich ausgef\u00fcllt werden.

\"Image\/photo\"<\/a>

Schl\u00fcsselw\u00f6rter f\u00fcr das Verzeichnis helfen, dass der Kanal auch gefunden werden kann.

Jetzt sollten auch noch ein Profilbild (z.B. das Logo der Organisation) und ein Header-Bild erstellt, hochgeladen und als solche verwendet werden.

\"Image\/photo\"<\/a>

\"Image\/photo\"<\/a>

Theme anpassen<\/h3>
Anschlie\u00dfend muss man sich Gedanken \u00fcber die grundlegende Optik, insbesondere die Farbgebung Gedanken machen. Hier sollte man das Theme entsprechend anpassen.

Da meine Organisation im Logo die Farben Gr\u00fcn, Wei\u00df und Schwarz nutzt, habe ich die "Primary theme color" auf ein entsprechendes Gr\u00fcn gesetzt und f\u00fcr einen etwas geringeren Kontrast die Hintergrundfarbe auf ein recht helles Grau. Hier kann und muss jeder selbst entscheiden, wie sehr er die Farben beeinflussen m\u00f6chte.

\"Image\/photo\"<\/a>

Apps installieren<\/h3>
Jetzt m\u00fcssen noch wichtige Apps installiert<\/a> werden. Auf jeden Fall die ActivityPub App<\/a>, damit der Kanal auch mit allen Diensten im Fediverse interagieren (f\u00f6derieren) kann. Au\u00dferdem werden die Apps "Webseiten" und "PDL-Editor" ben\u00f6tigt. M\u00f6chte man ein Hilfe-System, eine FAQ oder ein richtiges kleines Wiki anbieten, dann installiert man auch noch die App "Wiki". Sollen Artikel auf der Seite ver\u00f6ffentlicht werden, installiert man au\u00dferdem die App"Artikel".

Auch eine Seite in einem Sozialen Netzwerk braucht sowas wie eine Homepage, eine Startseite. Und die erstellen wir jetzt.

Webseiten erstellen<\/h3>
Daf\u00fcr ruft man aus dem App-Men\u00fc (\u22ee) die Webseiten-App auf.

\"Image\/photo\"<\/a>

Bl\u00f6cke erstellen<\/h4>
Als erstes erstellt man nun einen neuen Block, welcher den Inhalt der Startseite enth\u00e4lt. Man hat die Wahl zwischen bbCode, HTML, Markdown, reinen Text, (Comanche Layout) und PHP f\u00fcr die Darstellung und Gestaltung des Inhalts. Ich habe mich f\u00fcr bbCode entschieden, weil dies f\u00fcr die Darstellung des Inhalts v\u00f6llig gen\u00fcgt und bbCode quasi "das Blut in den Adern von Hubzilla" ist.

Einen Titel muss man hier nicht vergeben. Der erste Block, den man in einem Kanal erstellt, bekommt automatisch den Namen "main" (diesen ben\u00f6tigt man, um den Block sp\u00e4ter zur Nutzung zu referenzieren).

\"Image\/photo\"<\/a>

Nach dem Eingeben des Inhalts klickt man nun auf "Teilen" und der Block ist erstellt.

Bl\u00f6cke mit dem PDL-Editor in Hubzilla-Seiten einbauen<\/h4>
Ich habe beschlossen, dass der Inhalt der Startseite nicht nur auf der eigentlichen Startseite, sondern auch in der Profilansicht angezeigt werden soll, weil darin der Zweck der Organisation beschrieben wird, was gut zum Profil passt.

Damit der Block "main" in der Profilansicht angezeigt wird, ruft man den PDL-Editor auf. Im Hauptmen\u00fc des PDL-Editors (zentriert am unteren Bildschirmrand), w\u00e4hlt man zun\u00e4chst im Men\u00fcpunkt "MODULES" das Modul "profile". In diesem Modul w\u00e4hlt man nun im Men\u00fcpunkt "ITEMS" das Modul "main", welches man ja selbst erstellt hat, aus und schiebt es per Drag-and-Drop in die Mitte (Inhaltsbereich) an die oberste Stelle. Damit die \u00c4nderungen \u00fcbernommen werden, muss man nun noch im Men\u00fc auf "APPLY" klicken... und die Sache ist erledigt.

\"Image\/photo\"<\/a>

\"Image\/photo\"<\/a>

Ruft man nun das Profil des Kanals auf, so wird im Inhaltsbereich der Inhalt des Blockes "main" angezeigt.

\"Image\/photo\"<\/a>

Ein Navigations-Men\u00fc als Block<\/h4>
Weil bei der Organisationsseite noch weitere andere Inhalte und Seiten angezeigt werden sollen, ben\u00f6tigt man ein Navigations-Men\u00fc. Dieses kann man \u00fcber die Funktion "Men\u00fcs" der App "Webseite" erzeugen. Es wird ein vertikales Men\u00fc als unsortierte Liste erzeugt, das man an verschiedenen Stellen in die Seite einbauen. Mir schwebte aber ein horizontales Men\u00fc vor, das auf jeder relevanten Seite an oberster Stelle des Inhaltsbereichs erscheint. Also habe ich das Men\u00fc als normalen Block selbst erstellt.

Achtung: Auch hier kann man f\u00fcr den Inhalt bbCode w\u00e4hlen. Allerdings hat das den Nachteil, dass Links, die zu anderen selbst erstellten Webseiten f\u00fchren, in einem neuen Tab ge\u00f6ffnet werden, wenn man die Tags [url=][\/url]<\/code> verwendet. F\u00fcr dieses Tag-Paar gibt es nicht die Option "target=_self"<\/code>. Hier ist es also sinnvoll, HTML zu verwenden.

\"Image\/photo\"<\/a>

Das Men\u00fc habe ich nun mit nebeneinander stehenden Men\u00fcpunkten, getrennt durch ein Leerzeichen, einen Stern und einem weiteren Leerzeichen gestaltet und die einzelnen Men\u00fcpunkte nach dem Schema

[url=https:\/\/webseite.tld]Men\u00fcpunkt[\/url]<\/code>

verlinkt.

Um z.B. auf der Profilseite das Men\u00fc zur Verf\u00fcgung zu stellen, schiebt man im PDL-Editor das selbst erstellte ITEM "menu" im MODUL "profile" an die oberste Stelle und klickt auf APPLY. Nun erscheint das Navigationsmen\u00fc auf der Profil-Seite.

Startseite mit dem Block "main"<\/h4>
Der Block "main" sollte aber nun auch die Startseite der Webseite sein. Der Inhalt muss also, unabh\u00e4ngig von den hubzilla-eigenen Seiten der Apps als Webseite angezeigt werden. Und das soll in einem konsistenten Layout geschehen. So soll auch auf solchen Webseiten in der linken Seitenleiste die Profilkarte erscheinen und die Verbindungen des Kanals.

Ein Layout erstellen<\/h4>
Was man braucht, ist also ein Layout. Ein solches kann man mit der App "Webseiten" erstellen.

\"Image\/photo\"<\/a>

Regionen<\/h5>
Layouts beschreiben den grunds\u00e4tzlichen Aufbau einer Hubzilla-Webseite und die Inhalte der verschiedenen Regionen auf dem Bildschirm.

[region=banner][\/region]<\/code> ist der obere Bereich, wie er auf der Kanalseite angezeigt wird. Dort zeigt er das Cover-Foto an.

Das bietet sich f\u00fcr die Webseiten ebenfalls an. Also beginnt unser Layout mit den Zeilen

[region=banner]
[widget=cover_photo][\/widget]<\/code><\/pre>
Als n\u00e4chstes wird die Gestaltung der linken Seitenleiste, also der Region [region=aside] [\/region]<\/code> festgelegt.

Dort sollte ja nun die Profilkarte und die Liste der Verbindungen angezeigt werden.

Die Layout-Beschreibung daf\u00fcr ist

[region=aside]
[widget=fullprofile][\/widget]
[widget=common_friends][\/widget]
[\/region]<\/code><\/pre>
Im Inhaltsbereich, also der Region [region=content] [\/region]<\/code> soll schlie\u00dflich das Navigationsmen\u00fc und darunter der Inhalt des Blocks "main" zu sehen sein. Das codieren wir so:

[region=content]
[block]menubar[\/block]
[block]main[\/block]
[\/region]<\/code><\/pre>
F\u00fcr die rechte Seitenleiste [region=right_aside] [\/region]<\/code> ist mir noch nix eingefallen... die lassen wir also erstmal leer.

Der Inhalt des Layouts f\u00fcr die Startseite sieht also so aus:

[region=banner]
[widget=cover_photo][\/widget]
[\/region]
[region=aside]
[widget=fullprofile][\/widget]
[widget=common_friends][\/widget]

[\/region]
[region=content]
[block]menubar[\/block]
[block]main[\/block]

[\/region]
[region=right_aside]

[\/region]<\/code><\/pre>
Das Layout braucht auch einen Namen, um es sp\u00e4ter f\u00fcr die Webseite referenzieren zu k\u00f6nnen. Hier habe ich den Namen "startseite" gew\u00e4hlt.

Ein Klick auf "Teilen" und das Layout f\u00fcr die Startseite ist erstellt.

Webseite erstellen<\/h4>
Nun muss nur noch aus den Einzelteilen die eigentliche Webseite erstellt werden. Daf\u00fcr w\u00e4hlt man in der App "Webseiten" den Punkt "Seiten".

Hier habe ich dann eine Webseite erstellt. Inhaltstyp habe ich bei bbCode belassen. Der ist in diesem Fall ohnehin unerheblich, weil der Inhalt der Webseite hier ja nicht erstellt wird, sondern im Block.

Bei Seiten-Layout w\u00e4hlt man nun das soeben erstellte Layout aus der Auswahlliste.

Bei der eigentlichen Webseite ist es auch sinnvoll, der Seite einen Titel zu geben, denn dieser erscheint bei der Ansicht im Titel des jeweiligen Browser-Tabs.

Und ein Name muss vergeben werden. Da es die Startseite ist, habe ich "home" gew\u00e4hlt. Unter diesem Namen ist die Seite sp\u00e4ter aufrufbar (\/page\/\/<\/code>, also in meinem Fall https:\/\/klacker.org\/page\/exraucher_ig\/home<\/code>).

In unserem Fall ist der Inhalt unerheblich, er darf nur nicht leer sein. Ich habe einfach "main" hineingeschrieben.

\"Image\/photo\"<\/a>

Und nun wieder auf "Teilen" klicken... die Startseite ist fertig. Ruft man sie auf, sieht sie nun so aus:

Men\u00fc erweitern<\/h4>
Jetzt ist es an der Zeit, den Block "menubar" zu editiern und den Link "Startseite" mit dem Link zu der gerade erstellten Webseite zu hinterlegen.

In meinem Beispiel sieht der Block nun so aus:

[url=https:\/\/klacker.org\/page\/exraucher_ig\/home]Startseite[\/url] \u2605 Manifest \u2605 Aktuell \u2605 Positionen \u2605 Informationen<\/code>

Und die Startseite so:

\"Image\/photo\"<\/a>

Weitere Seiten

Nach dem selben Schema habe ich dann auch die Seite "manifest" (Manifest \/ Vereinbarungen; Seitenlink: manivereinb<\/code>) mit dem Inhalt als Block und dem identischen Layout (nur dass hier im Inhaltsbereich der Block "manifest" dargestellt wird) erstellt. Der Link zu der neuen Seite (das war einmal die Anzeige des Manifests der Organisation, also sowas wie bei einem Verein die Satzung) wurde in den Men\u00fcblock eingebaut:

[url=https:\/\/klacker.org\/page\/exraucher_ig\/home]Startseite[\/url] \u2605 [url=https:\/\/klacker.org\/page\/exraucher_ig\/mani-vereinb]Manifest[\/url] \u2605 Aktuell \u2605 Positionen \u2605 Informationen<\/code>

Artikel mit der Artikel-App<\/h3>
Unter "Aktuelles" wurden bei der urspr\u00fcnglichen Original-Seite, Artikel zu verschiedensten relevanten Themen angezeigt. Nun k\u00f6nnte man das auch als Webseite realisieren, aber es w\u00e4re ein hoher Aufwand, die Beitr\u00e4ge komfortabel zug\u00e4nglich zu machen. Bei solchen Bereichen bietet es sich an, die hubzilla-eigene Funktionalit\u00e4t zu nutzen, n\u00e4mlich die Artikel.

Ich habe zu Demonstrationszwecken die letzten beiden ver\u00f6ffentlichten Artikel in dem Kanal mit der App "Artikel" (muss installiert und aktiviert werden, sofern nicht schon geschehen) ver\u00f6ffentlicht. Dabei habe ich jeweils auch eine Kategorie angegeben, damit auf der Artikelseite auch die Kategorie-Anzeige zu sehen ist.

Damit sich die Seite der Artikel-App optisch und in der Art der Navigation in die Organisations-Seite einf\u00fcgt, habe ich im PDL-Editor im MODUL "articles" den Menu-Bar Block wieder im Inhaltsbereich ganz oben eingef\u00fcgt.

Artikel im Men\u00fc zug\u00e4nglich machen<\/h4>
In den Men\u00fc-Bar Block wird nun noch der Link zur Artikel-App eingef\u00fcgt:

[url=https:\/\/klacker.org\/page\/exraucher_ig\/home]Startseite[\/url] \u2605 [url=https:\/\/klacker.org\/page\/exraucher_ig\/mani-vereinb]Manifest[\/url] \u2605 [url=https:\/\/klacker.org\/articles\/exraucher_ig]Aktuell[\/url] \u2605 Positionen \u2605 Informationen<\/code>

\"Image\/photo\"<\/a>

Dokumente in der Cloud anbieten[7h3]

Auf der Original-Webseite findet man unter dem Men\u00fcpunkt "Positionen" verschiedene Stellungnahmen der Interessengemeinschaft zu diversen Themen. Diese k\u00f6nnte man als einzelne Webseiten anbieten, aber ich habe mich entschlossen, die Beitr\u00e4ge (Stellungnahmen) mittel der Cloud-Funktionalit\u00e4t von Hubzilla zu verwirklichen. Zu diesem Zweck habe ich in der Cloud des Kanals einen \u00f6ffentlich zug\u00e4nglichen Ordner erstellt und in diesen die Texte als PDF-Dateien hochgeladen.

Cloud-Ordner im Men\u00fc zug\u00e4nglich machen<\/h4>
Im PDL-Editor habe ich im MODUL "cloud" den Men\u00fc-Block wieder im Inhaltsbereich an die oberste Position gesetzt und schlie\u00dflich den Link zu dem Ordner als Link in die Men\u00fc-Bar eingef\u00fcgt:

[url=https:\/\/klacker.org\/page\/exraucher_ig\/home]Startseite[\/url] \u2605 [url=https:\/\/klacker.org\/page\/exraucher_ig\/mani-vereinb]Manifest[\/url] \u2605 [url=https:\/\/klacker.org\/articles\/exraucher_ig]Aktuell[\/url] \u2605 [url=https:\/\/klacker.org\/cloud\/exraucher_ig\/Positionen]Positionen[\/url] \u2605 Informationen<\/code>

\"Image\/photo\"<\/a>

Der Men\u00fcpunkt "Informationen" f\u00fchrte zu einer Sammlung von Flyern und Informations-Texten, die ich ebenfalls mit Hilfe der Cloud zur Verf\u00fcgung stelle. Daf\u00fcr habe ich einen weiteren Ordner erstellt ("Informationen"), die Dateien dort hochgeladen und im Men\u00fc-Block verlinkt.

[url=https:\/\/klacker.org\/page\/exraucher_ig\/home]Startseite[\/url] \u2605 [url=https:\/\/klacker.org\/page\/exraucher_ig\/mani-vereinb]Manifest[\/url] \u2605 [url=https:\/\/klacker.org\/articles\/exraucher_ig]Aktuell[\/url] \u2605 [url=https:\/\/klacker.org\/cloud\/exraucher_ig\/Positionen]Positionen[\/url] \u2605 [url=https:\/\/klacker.org\/cloud\/exraucher_ig\/Informationen]Informationen[\/url]<\/code>

\"Image\/photo\"<\/a>

[h3]Weitere M\u00f6glichkeiten<\/h3>
Die urspr\u00fcngliche Organisations-Seite bot auch ein Wiki an, das allerdings extern mittels MediaWiki betrieben wurde (wird!). Das k\u00f6nnte man in der Men\u00fc-Bar nat\u00fcrlich auch verlinken. Oder, wenn die Funktionalit\u00e4t der Wiki-App von Hubzilla ausreicht, kann man auch mit Hubzilla ein Wiki (z.B. auch als Hilfe-Seite oder f\u00fcr FAQ) erstellen und \u00fcber das Men\u00fc zug\u00e4nglich machen.

Aber das spare ich mir hier jetzt. Jeder ist eingeladen, eigene Ideen umzusetzen und dabei alle Funktionen von Hubzilla dazu zu verwenden.

Bei der Einbindung aller Apps sollte man nicht vergessen, den Men\u00fc-Block im entsprechenden MODUL mit dem PDL-Editor an oberster Stelle einzuf\u00fcgen.

Weil die Organisations-Pr\u00e4senz ja aber auch ins Fediverse eingebunden ist, ist es sinnvoll, auch die Kanalseite im Men\u00fc-Block anzubieten, um ggf. Interaktion anzubieten (ist ja auch der Sinn von solchen Seiten). Also auch noch schnell eingebaut:

[url=https:\/\/klacker.org\/page\/exraucher_ig\/home]Startseite[\/url] \u2605 [url=https:\/\/klacker.org\/channel\/exraucher_ig]Kanal[\/url] \u2605 [url=https:\/\/klacker.org\/page\/exraucher_ig\/mani-vereinb]Manifest[\/url] \u2605 [url=https:\/\/klacker.org\/articles\/exraucher_ig]Aktuell[\/url] \u2605 [url=https:\/\/klacker.org\/cloud\/exraucher_ig\/Positionen]Positionen[\/url] \u2605 [url=https:\/\/klacker.org\/cloud\/exraucher_ig\/Informationen]Informationen[\/url]<\/code>

\"Image\/photo\"<\/a>

Das war es jetzt erst einmal...

Das Ergebnis<\/h3>
Und so sieht ein nicht angemeldeter (nicht authentifizierter) Besucher die Seite:

\"Image\/photo\"<\/a>

Die Seite im Echtbetrieb kann man sich hier anschauen: ExRaucher (IG)<\/a><\/strong>

Ich hoffe, ich konnte zeigen, wie man die Entsprechung einer "Facebook-Seite" hervorragend - und mit wesentlich erweiterter Funktionalit\u00e4t - mit Hubzilla umsetzen kann. Man kann als Kanalbetreiber das Fediverse f\u00fcr die Zwecke der Organisation ganz normal nutzen, mit anderen interagieren und bietet Besuchern alle relevanten Informationen.

Fragen zu diesem Thema k\u00f6nnen im Forenkanal Pepes Hubzilla-Sprechstunde<\/a> (hubzillasprechstunde@hub.hubzilla.hu<\/code>) oder im Matrix-Raum Pepes Hubzilla-Hilfe<\/a> (#pepes-hubzillahilfe:matrix.org<\/code>) gekl\u00e4rt werden. Oder auch per DN an pepecyb@hub.hubzilla.hu<\/code> .

Als n\u00e4chstes folgt ein Artikel \u00fcber die Nutzung der App "Webseiten", in welchem ich n\u00e4her auf die Struktur von Webseiten bei Hubzilla und die Realisierung bestimmter Ideen als Webseite eingehe.<\/div><\/div>
<\/div>","width":640,"height":426}