Ansatz für dynamisches HTML5/SVG gesucht

[Medium]

Huhu DP,

gleich vorab: Ich bin seit Jahren ausschließlich auf dem Desktop-PC zuhause, und habe bisher um Webtechniken einen möglichst großen Bogen gemacht. (Um Grundzüge von HTML und CSS sowie JS kommt man eh nicht rum.) Daher bedenkt bitte bei euren Antworten, dass ein "mach das mit AJAX" mir praktisch nichts sagt, da ich weiss dass es AJAX gibt, aber es da im Prinzip auch schon aufhört.

Ich muss künftig Bilder in einem Browser darstellen, am liebsten als SVG in einem HTML5 Dokument. Diese Bilder sollen aber nicht statisch sein, sondern müssen vom Server verändert werden können.
Am liebsten wäre es mir, wenn ich dem Browser bei Seitenaufruf eine leere Seite mit leerem SVG Container schicke, und dann nachher vom Server aus sämtliche Elemente dort einfüge. Diese sollen dann auch vom Server modifiziert werden können (Farbe und Texte ändern, verschieben, etc.).
Die SVG-Elemente würden aus zuvor mit Inkscape erstellten Grafiken stammen, dynamisches Zeichnen via JS brauche ich eigentlich nicht.

Einen "Rück-Kanal" brauche ich ebenfalls, so dass ich Buttons im SVG habe, die wenn sie geklickt werden, diverse Daten an den Server schicken. Das Script dafür soll ebenfalls vom Server vorgegeben sein.

Also praktisch eine GUI wie man sie von Delphi kennt, mit dynamisch erstellten Komponenten und allem, nur dass der Webserver praktisch den "Code" darstellt und die Webseite beim Client das Formular.

Bei HTML5 + SVG bin ich relativ sicher, dass das schon mal ein guter Ansatz ist. Was mir aber noch fehlt ist etwas, was mir die Dynamisierung inkl. der nötigen Kommunikation ermöglichen würde.
Gibt es dafür praktikable Lösungen? (Idealerweise Sachen, die auch auf mobilen Geräten funktionieren.)

Ich habe versucht mich kurz zu fassen. Wenn Rückfragen da sind, bitte unbedingt stellen!

Besten Dank im Voraus!

[Olli73]

Zitat:

Zitat von Medium (Beitrag 1323299)

Was mir aber noch fehlt ist etwas, was mir die Dynamisierung inkl. der nötigen Kommunikation ermöglichen würde.
Gibt es dafür praktikable Lösungen? (Idealerweise Sachen, die auch auf mobilen Geräten funktionieren.)

Ja, mach das mit AJAX (das wolltest du doch hören ;)) oder Websockets.

Kurzum: Wenn du nicht immer die komplette Seite neu laden willst, musst du Javascript(-Aufrufe) an den Browser schicken bzw. im Browser mit JS arbeiten. Auch die Anfrage (AJAX-Request) an den Server z.B. nach einem Button-Click erstellt man mit Javascript. Du musst dich also intensiver mit HTML/CSS und vor allem JS auseinandersetzen.

Wenn du uns verrätst, was dein Anwendung alles tun/können soll, kann man vielleicht auch ein Framework o.ä. empfehlen.

[Medium]

Zitat:

Zitat von Olli73 (Beitrag 1323312)

Ja, mach das mit AJAX (das wolltest du doch hören ;)) oder Websockets.

Nee. Zumindest nicht so. Mit Schlagworten kann ich wie gesagt nicht viel anfangen, und die Tutorials die ich bisher gefunden habe sind entweder voll mit Jargon, und/oder Monate an Arbeit die nachher aber an meinem Ziel vorbei sind. Da ich das nicht aus bloßem Interesse mache, habe ich nicht die Zeit mich allumfassend einzuarbeiten, sondern müsste gucken mich auf diesen einen Fall zu beschränken.
Und da ich am besten an konkreten und relevanten Beispielen lerne, wäre das was mir am aller weitesten hälfe, wenn ich einfach ein Stück Code sehe, wo z.B. die Farbe eines (SVG) Rechtecks serverseitig geändert wird. Egal mit welcher Technik. Von da an kann ich mir eigentlich alles weitere selbst erarbeiten.

Zitat:

Kurzum: Wenn du nicht immer die komplette Seite neu laden willst, musst du Javascript(-Aufrufe) an den Browser schicken bzw. im Browser mit JS arbeiten. Auch die Anfrage (AJAX-Request) an den Server z.B. nach einem Button-Click erstellt man mit Javascript. Du musst dich also intensiver mit HTML/CSS und vor allem JS auseinandersetzen.

Auch hier: Wie sieht das konkret aus? Wie kann ein Server JS im Client aufrufen? (Prinzipiell kann ich mit JS gut leben.) Wie spielt AJAX da rein?

Mein Problem ist, anders gesagt, dass ich aus den Tutorials die ich bisher durchgesehen habe, nicht ableiten kann wie ich das baue, was ich nachher eigentlich will. Um da hin zu kommen müsste ich vermutlich ein paar Monate Erfahrung mit Web-Entwicklung machen, die ich aber nicht habe. Wenn ich aber ein konkretes Beispiel finde das genau zeigt was ich machen möchte, kann ich sehr gut von da an alleine weiter machen. (Zumal dann auftretende Fragen und Probleme sehr konkret werden, und viel leichter zu suchen sind als grobe Konzeptfragen wie diese hier.)

Zitat:

Wenn du uns verrätst, was dein Anwendung alles tun/können soll, kann man vielleicht auch ein Framework o.ä. empfehlen.

Ich möchte so wenig wie möglich an fremder Software einsetzen. Insbesondere wegen der Lizenzwälder, da ein kommerzielles Produkt am Ende stehen soll. (Weshalb ich auch nicht viel näher ins Detail bzgl. der Natur des ganzen gehen möchte/darf.) Ich liebäugel sogar schon damit, meinen eigenen kleinen Webserver dafür zu implementieren.

Danke dir schon mal!

[franktron]

Zu Ajax guck dir erst mal JQuery an und zwar $POST, $GET, $AJAX
Dann verstehst du wahrscheinlich auch was Ajax ist und was es macht.

[Medium]

Ich bin soeben dabei zu verstehen was AJAX tut, bzw. zumindest glaube ich, dass das XMLHttpRequest Objekt genau mein Kandidat ist.

Spaßig ist dabei, dass ich gleichzeitig wirklich einen kleinen eigenen Server schreibe. Ich hatte dazu ein sehr minimalistisches Video gefunden, wo man mit einem TCPServer und einer Hand voll Zeilen schon richtig weit kommt.

Zumindest kann ich schon mal einem zunächst leeren <div> damit dynamisch Inhalte spendieren. Jetzt muss ich nur noch gucken, ob eingebettetes SVG mit im DOM verfügbar ist, und wie sich der Browser verhält wenn ich ihm auf ein Mal darin herumfummel.

Bezüglich Sachen auf Initiative des Servers hin ändern, kann ich vermutlich auch auf einen zyklischen AJAX Request vom Client zurückgreifen. Öfter als 1x pro Sekunde brauche ich praktisch nicht, und meistens wird das System nachher ohnehin im LAN benutzt.

[ConstantGardener]

Nur so als Tipp: Ich verwende für solche Sachen die WebComponents von HabariSoft (mjustin der Entwickler ist auch hier im Forum unterwegs). Kostet ein paar Euro funktioniert aber im lokalen Netz als Http-Server (auf Indy-Basis) sehr gut und nimmt einem einiges an Arbeit ab. Lässt sich auch mit FreePascal für Linux compilieren.
Damit kannst du Ajax mit JQuery usw. sehr elegant umsetzen. Um etwas Html/Css/Javascript kommst du aber natürlich nicht herum.