VN Designer

[Volker]

Hallo zusammen,

ich bastel gerade an einem Programm (VN Designer) mit dem man meine Erweiterungen und Tools nutzen kann. Das ganze ist natürlich noch nicht fertig, aber ich will Euch hier ab und zu mal ein paar Videos zum Stand zeigen, damit Ihr eine Vorstellung davon habt, was ich plane

Das ganze wird nur hier im Forum gezeigt ! Ist also alles noch im Teststadium



Da ich ja noch dran bin, nehme ich natürlich gerne Idee, Anregungen und Wünsche entgegen die ich noch mit einbauen kann

Geplant ist folgendes:

Import von Mobirise Themes M3 M4 und M5
KI Schnittstelle die immer verfügbar ist und CSS HTMl direkt im Code Editor ändern kann
Geplante KI´s : Claude, Chat GPT, Mistral, Groq, Gemini, und lokale z.B. LM Studio
VN Menü und Block Galerie
und was mir noch so einfällt

Ziel ist es, das Ganze bis Jahresende fertig zu haben
Kosten: JA wird es dann - aber auch nur einmalig - Nur Große Updates dann gegen Gebühr

Eure Ideen ? Nehme ich gerne mit auf und versuche die umzusetzen...

Die Software setzt auf Electron auf und wird es vorerst nur für Windows geben - denke ich.
Auch wird das ganze in mehreren Sprachen erscheinen

Natürlich direkt mit Entwickler Tools

[Tommy Herrmann]

Moin Volker,

das ist ein sehr mutiges und beeindruckendes Vorhaben. Gleichzeitig dürfte es wesentlich aufwendiger werden, als es im ersten Moment erscheint, denn bei einer vollständigen Software kommen vermutlich noch viele Dinge hinzu, an die man zu Beginn gar nicht denkt.

Neben der eigentlichen Entwicklung geht es später unter anderem auch um Installation, Updates, Fehlerbehebung, Sicherheit, Dokumentation und Unterstützung der Anwender. Gerade bei einer Windows-Software als EXE werden manche Nutzer zudem zunächst vorsichtig sein und wissen wollen, wie sicher und zuverlässig die Installation ist.

Angesichts dieses enormen Aufwands würde ich mir deshalb frühzeitig die Frage stellen: Wer benötigt ein solches Programm tatsächlich und wie viele Anwender würden dafür bezahlen?

Wer mit Mobirise, WordPress oder einem anderen Baukastensystem bereits gut zurechtkommt, wird vermutlich nicht ohne Weiteres zu einer neuen Software wechseln. Das wäre wahrscheinlich selbst für eine größere Firma mit vielen Entwicklern eine schwierige Aufgabe.

Solange Du Freude daran hast und das Projekt als persönliche Herausforderung und Hobby betrachtest, ist das natürlich eine großartige Sache. Dann liegt der Wert auch darin, auszuprobieren, was technisch möglich ist und was Du selbst entwickeln kannst.

Wenn das Programm sich später allerdings finanziell lohnen soll, würde ich vor der Investition noch sehr vieler Arbeitsstunden zunächst versuchen herauszufinden, ob genügend echtes Interesse vorhanden ist. Vielleicht wäre es sinnvoll, zuerst eine kleinere, klar begrenzte Version fertigzustellen und testen zu lassen.

Ich möchte Dich damit keinesfalls bremsen oder Dein Vorhaben schlechtreden. Mir persönlich erscheinen Deine einzelnen Erweiterungen, Werkzeuge und Blöcke im Moment jedoch leichter einsetzbar, weil sie direkt in Mobirise genutzt werden können und bereits einen konkreten Bedarf erfüllen.

Es wäre daher interessant, noch einige ehrliche Meinungen von anderen Nutzern zu hören: Würdet Ihr einen solchen eigenständigen Webbaukasten tatsächlich installieren und verwenden – und würdet Ihr auch dafür bezahlen?

Ich bewundere Deinen Ehrgeiz wirklich. Mir wäre nur wichtig, dass Du nicht eine ungeheure Menge Arbeit investierst und erst sehr spät feststellst, dass der tatsächliche Nutzerkreis dafür möglicherweise zu klein ist.

[Volker]

Blick hinter die Kulissen

[Volker]

Tommy,

das ist einfach nur Geil

Ich hab Spaß - ob das mal einer haben will juckt mich nicht. Ich bau das Dinge jetzt komplett fertig mit allen schnick schnack

Dann bin eben der einzige, der seinen eigenen Webbaukasten hat

[Tommy Herrmann]

Volker,

sei da etwas vorsichtig mit dem „vollen Zugriff“. Ich will der KI nichts Böses unterstellen, aber rein technisch kann sie am PC einiges zerschießen.

ChatGPT nervt mich schon seit Wochen mit „Codex“. Ich hatte ChatGPT ja damit beauftragt, mich eigenständig über solche Funktionen sowie über Modell‑ und Preisänderungen zu informieren. Ich habe mich jetzt etwas belesen: das scheint das Gegenstück zu deiner Software „Claude‑Code“ zu sein.

„Voller Zugriff“ ist möglich – aber nicht empfehlenswert

Codex besitzt tatsächlich einen Modus Full access. Damit könnte es jede Datei auf dem Computer verändern und ohne Nachfrage Befehle sowie Internetzugriffe ausführen. OpenAI warnt ausdrücklich vor Datenverlust, unerwarteten Änderungen und möglichen Datenlecks. Sie nimmt einem aber weder die Verantwortung noch die umfangreichen Tests ab. Und ein vollständiger Zugriff auf Mobirise oder gar den ganzen Computer wäre dafür normalerweise gar nicht notwendig.

[Volker]

Tommy,

die hat nur vollen Zugriff auf das was ich ihr genehmige
Das wäre noch der Hammer wenn die alle meine Daten einsehen könnte

Also keine Panik - in der Regel weiß ich schon was ich tue Auch wenn man das nicht immer sieht

[Volker]

Theme Import
Seiten Klonen/Erstellen
Button und Icons
Und ein paar Kleinigkeiten

Gerade noch eingebaut:

Die KI Anbieterliste ist bewusst ausgelagert in src/ai-providers.js — um einen Anbieter hinzuzufügen/zu ändern, reicht ein Eintrag dort, der Dialog baut seine Felder automatisch daraus auf. Kein Code an anderer Stelle nötig.

[Tommy Herrmann]

Moin Volker,

ich bin wirklich beeindruckt — die Energie, die du da reinsteckst, ist enorm.

Zwar mag es noch früh sein, Wünsche oder Ideen zu äußern, aber genau dafür nehme ich an, dass frühe Teilnehmende die Videos anschauen.

Mir kam der Gedanke, die KI frühzeitig darauf vorzubereiten, die App in alle Sprachen umschaltbar zu machen. HTML und CSS sind ja ohnehin auf Englisch, aber ich meine vor allem sämtliche UI-Beschriftungen. Es sollte einen Button zur Sprachauswahl geben, und die KI könnte die gesamte Anwendung übersetzen. Das dürfte nicht viele Tokens kosten, aber die dahinterliegende Logik sollte von Anfang an mitgedacht werden.

Denk besonders daran, dass du einen eigenen Server betreibst, der Aufgaben übernimmt, die kein anderer gehosteter Server mehr macht. Ich erwähne das nur, weil ich dort noch FTP und Port 21 aus dem letzten Jahrtausend sehe

Ich bin sehr angetan von dem bislang Gezeigten und glaube, du bist auf einem sehr guten Weg. Eine automatische Speicherung ist Pflicht — idealerweise nicht nur als Projektdatei, sondern als echtes HTML.

[Volker]

Moin Tommy,

natürlich hat der FTP Export ALLE FTP Protokolle

FTP Port 21 ist der erste Eintrag im Drop Down
Die anderen sind doch da

Klar wird die Seite als HTML auch Lokal gespeichert und das automatische Speichern kommt doch noch
dann wird alle xx Sekunden ( einstellbar) Gespeichert.

[Volker]

Wer es mal testen möchte



Hier : https://www.niederastroth.de/vndesigner/index.php

Passwort: vndesigner

Ist die Setup Datei

[Tommy Herrmann]

Moin,

ich habe die .exe installiert – das hat wunderbar funktioniert

Electron ist ein kostenloses Open-Source-Framework, mit dem Entwickler plattformübergreifende Desktop-Anwendungen für Windows, macOS und Linux mithilfe von Web-Technologien erstellen können.

Anstatt für jedes Betriebssystem separaten Code in Sprachen wie C++ oder Swift zu schreiben, nutzen Electron-Apps HTML für die Struktur, CSS für das Design und JavaScript für die Programmlogik.

Chromium und Node.js: Electron kombiniert die Browser-Engine Chromium (den Kern von Google Chrome) mit der JavaScript-Laufzeitumgebung Node.js.

Ein Code für alle: Du schreibst den Code nur einmal und kannst ihn auf allen gängigen Betriebssystemen ausführen.

Zugriff auf das System: Dank Node.js kann die App auf das lokale Dateisystem, Benachrichtigungen und native Menüs zugreifen

Den Projektordner sollte man nicht im geschützten Windows-Bereich „Users“ anlegen, sondern zunächst z. B. direkt auf:

C:\

Es ist zwar noch die erste Beta, aber sie funktioniert bereits hervorragend – großartig und fast unglaublich

https://www.mobirise-tutorials.com/Testseiten/VN-Designer/Test1/

> Es fehlt ein sichtbarer Rückgängig-Button ↻ und der Link im Menü → Bearbeiten → Rückgängig funktioniert nicht

> Es fehlt ein Publizieren-Button zum Server

> Einzelne mbrext-Blöcke sollten auch die Option erhalten in der Block-Bibliothek aufgenommen zu werden

> Zuletzt verwendete Projekt-Ordner sollte direkt geöffnet werden ohne Ordner-Abfrage

> Fenstergröße der Anwendung sollte gemerkt werden

> Bilder sind noch nicht editierbar

> Icon-Auswahl bei Links (scrollbar) ist viel zu klein (nicht hoch genug)

> Zur Zeit werden noch sämtliche Bilder eines Themas publiziert, statt nur der verwendeten Blockbilder

> Es fehlt noch ein Seiten- und ein globaler Site-Editor - z.B. um Scripts einzubinden oder für die wichtigen zusätzlichen Head-Meta-Tags

> Der Site-Style sollte nicht im <style> Tag in der HTML stehen sondern in einer separaten CSS-Datei.

> Text Farbe im Menü ist nicht wählbar <a class="nav-link link ">

> Text-Farbe in Blöcken ist nicht wählbar <p class=normal"> (das Werkzeug Text-Färber sollte hier nicht die favorisierte Möglichkeit sein). Weiterhin muss eingegeben CSS im Editor wirken, das tut sie nicht.

> Änderungen im Code-Editor Abschnitt "CSS Less" haben keinerlei Wirkung

> Menüleiste von meinem Test-Thema "GlasM5" steht auf "sticky" ist es aber nicht.

> Es gibt verirrte End </p> Tags

> Das Logo sitzt zu nah an der linken Kante - wahrscheinlich währe ein Abstand von 50px gut

> Weiterhin sitzt der "Brand-Name" zu dicht am Logo - ich habe den 20px Abstand gegeben und auch die "underline" entfernt, von der in genau der Länge von 20px der Underline-Strich rechts am Logo sichtbar bleibt. Ich habe das auf meiner Testseite angepasst: das Logo um 50 px nach rechts verschoben und den Unterstrich („underline“) des Links mittels einer Style-Anweisung entfernt.

> Es fehlt ein "Scroll To Top" Button in der unteren rechte Ecke (wie bei Mobirise)

> Das Hamburger-Menü am Handy ist nicht zu sehen und auch vollkommen ohne Funktion

> Es fehlt eine automatische ID für jeden Block, damit Anker‑Links gesetzt werden können. Das Linkfenster muss deshalb neben dem normalen „Link“-Feld auch ein Feld für den „Anker‑Link“ zu jedem verwendeten Block auf der Seite bieten. Das ist bei Mobirise sehr schön gelöst, weil man ein Thumbnail über dem jeweiligen Anker eines jeden Block sieht.

[Tommy Herrmann]

Nachtrag Tests

> Ich habe versucht Links in den Footer zu setzen (blau) - das sind Eingabefelder geworden

https://www.mobirise-tutorials.com/Testseiten/VN-Designer/Test1/


> Meine Texte stehen nicht im Code-Editor in der HTML sondern in der Datei project.json. Das ist ein "NO GO". Beispiel:

"textOverrides": {
"t2": "<div>Dies ist der erste Test des Webbaukastens „VN Designer“ von Volker Niederastroth. Die Software befindet sich noch in einer sehr frühen Entwicklungsphase und ist derzeit nicht für die Erstellung von Webseiten geeignet. Es müssen noch zahlreiche Funktionen ergänzt und Fehler behoben werden. Das Programm dient ausschließlich interessierten Nutzern zu Testzwecken.</div>",
"t0": "<b>GlassM5 <br>Thema</b>"
},

ENDE Tests heute

[Tommy Herrmann]

> Ich habe gerade bemerkt, dass der in der JSON-Datei gespeicherte <div>-Container in ein auf der Seite vorhandenes <p>-Element eingefügt wird.

Das ist ein Syntaxfehler: Ein <div> darf niemals innerhalb eines <p>-Elements stehen.

Daher auch mein oben erwähntes: "Es gibt verirrte End </p> Tags"

Geänderter Text muss, wie ich ja bereits oben geschrieben habe, in der HTML stehen und nicht in der JSON!!! Wenn er in der JSON steht, dann natürlich als reiner Text - ohne das zusätzliche <div> Element außen herum

[Volker]

Danke an Tommy ( Mein bester Tester)

Folgendes wurde bis jetzt berichtigt/geändert:

Rückgängig-Button ↻ - ist nun oben vorhanden

Es fehlt ein Publizieren-Button zum Server - ist nun auch vorhanden

Zuletzt verwendete Projekt-Ordner sollte direkt geöffnet werden ohne Ordner-Abfrage - ist jetzt so

Fenstergröße der Anwendung sollte gemerkt werden - wird gemerkt

Bilder sind noch nicht editierbar - Sind in der Arbeitsfläche austauschbar

Zur Zeit werden noch sämtliche Bilder eines Themas publiziert, statt nur der verwendeten Blockbilder - gefixt!

Es fehlt noch ein Seiten- und ein globaler Site-Editor - ist eingebaut

Der Site-Style sollte nicht im <style> Tag in der HTML stehen sondern in einer separaten CSS-Datei - gefixt

Es fehlt ein "Scroll To Top" Button in der unteren rechte Ecke (wie bei Mobirise) - kann man
einschalten

Es fehlt eine automatische ID für jeden Block, damit Anker‑Links - man kann zu jedem Block verlinken

weitere Änderungen sind in Arbeit. Das ganze wird weiter entwickelt und auch die Wünsche und Anregungen fließen mit ein

Es gibt dann bald eine neue exe zum Testen

[Tommy Herrmann]

Nachtrag Tests

> Ich habe versucht Links in den Footer zu setzen (blau) - das sind Eingabefelder geworden

https://www.mobirise-tutorials.com/Testseiten/VN-Designer/Test1/


> Meine Texte stehen nicht im Code-Editor in der HTML sondern in der Datei project.json. Das ist ein "NO GO". Beispiel:

"textOverrides": {
"t2": "<div>Dies ist der erste Test des Webbaukastens „VN Designer“ von Volker Niederastroth. Die Software befindet sich noch in einer sehr frühen Entwicklungsphase und ist derzeit nicht für die Erstellung von Webseiten geeignet. Es müssen noch zahlreiche Funktionen ergänzt und Fehler behoben werden. Das Programm dient ausschließlich interessierten Nutzern zu Testzwecken.</div>",
"t0": "<b>GlassM5 <br>Thema</b>"
},

Moin,

> was ist denn mit den Links und dem Ersetzen von Texten?

> die Option "Sticky" für die Menüleiste sollte als wichtig behandelt und behoben werden

> Bitte auch daran denken, dass der Code-Editor noch nicht funktioniert wahrscheinlich weil die Logik falsch ist und die Einträge anstatt aus der Less-CSS aus der JSON genommen werden.

> Man kann zum Beispiel der Navi auch keine andere Hintergrundfarbe geben.

> Wichtig auch die Bearbeitung vom Hamburger und Dropdown Menü am Handy:

> Google Maps funktioniert noch nicht

> Icons werden bisher nur in Buttons übernommen (nicht in Texten oder Cards)


https://www.mobirise-tutorials.com/Test ... ner/Test1/


Ich weiß, dass nicht alles auf einmal möglich ist, und ich weiß auch, dass dir die Token der KI ausgehen

[Volker]

Ich weiß, dass nicht alles auf einmal möglich ist, und ich weiß auch, dass dir die Token der KI ausgehen

Es wird Tommy,
aber eben nicht alles sofort

[Tommy Herrmann]

Moin,

meine Testseite zum "VN-Designer" wächst - jetzt hat sie zwei Seiten:

https://www.mobirise-tutorials.com/Test ... index.html

[Tommy Herrmann]

> Die Menüleiste ist bei Änderungen nicht "global" → alle Änderungen müssen auf allen Seiten wiederholt werden

> Die Navi der Startseite wurde plöztlich im Hintergrund grau, diese Farbe hatte ich gestern mal versucht einzugeben. Das wird nicht in die Unterseite übernommen und ich kann es weder in der CSS noch in der HTML einstellen - wahrscheinlich steht es in der JSON

[Tommy Herrmann]

Tests von heute:

> Beim Start sollte nicht "Anderen Ordner öffnen", sondern "Projekt Ordner öffnen" angezeigt werden, da der Ordner bereits über den oberen Button "Ändern" ausgewählt wurde.

> Beim Einlesen von .mbrext‑Blöcken gibt es jetzt die Option „Auch in meine Bausteine aufnehmen“ (wie gewünscht). Der Block sollte dadurch jedoch nicht sofort auf der Seite eingefügt werden, sondern erst verfügbar sein, nachdem er im Tab „Meine Bausteine“ ausgewählt wurde.

> Die Wahl der Themen sollte bereits geöffnet sein, man muss jedes mal das Thema erst öffnen.

> Hinzugefügte eigene mbrext Blöcke ("Sonstige") gehen beim Neustart verloren

> Klickt man auf einen Link währende des Testens im lokalen Browser und schließt den Browser, weil man zum Beispiel auf der Mobirise-Seite gelandet ist, schließt man damit auch ungesichert die Software und die Arbeit von Stunden ist weg.

> Fehler: variable @primaryColor is undefined - solange kann man die Hintergrundfarbe nicht einstellen

> Man kann jetzt der Menüleiste eine andere Hintergrundfarbe geben - zum Beispiel schwarz - dann sieht man aber keine Menüschrift mehr, denn diese ist auch schwarz per Default.

> Die Farbpicker der Navigation funktionieren nur eingeschränkt: Jeder Menüpunkt muss einzeln geändert werden. Nach der Farbauswahl muss das Farbwahlfeld im Menü‑Tool erneut angeklickt werden, damit die Farbwahl übernommen wird.

> Der Farbpicker sollte standardmäßig Hex- statt RGB-Werte anzeigen. Wenn möglich wären die kleinen Farbkacheln dem diffusen Farbfeld deutlich vorzuziehen.

> Die Größe der Menüschrift muss auch wählbar sein, eigentlich bei jedem Textpicker

> Navi Transparent funktioniert gar nicht, sie kann dann nicht mehr bearbeitet werden, weil sie hinter den Header-Block rutscht.

> Navi Sticky zerschießt das Layout - die Menüleiste ist nur noch ca. 50% der eigentlichen Seitenbreite.

> Bei der Verwendung vom "Brand-Name" wird ein Unterstrich ("Text-Decoration: underline") angezeigt, der durch das padding-left entsteht

[Tommy Herrmann]

Mit der neuen EXE bekomme ich meine Menüleiste nicht mehr hin und gebe deshalb für heute auf. Sobald ich eigene Texte als Links in die Menüleiste einfüge und diese mit dem neuen Textwerkzeug verlinke, rutschen alle Menütexte zu einer einzigen durchgehenden Zeile zusammen und verlieren ihre Abstände.


Hier ist mein zusätzliches CSS für eine Menüleiste mit animiertem Unterstrich; das Logo und der Button sind von der Animation ausgenommen.

Code: Alles auswählen

a {
  position: relative;
  display: inline-block;
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
}

a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.3s ease;
}

a:hover::after {
  width: 100%;
}
.navbar-logo a::after,
.navbar-buttons a::after {
  content: none;
}