hotti: Welches Framework

hi,

zu Realisieren ist Folgendes:

  • Bilder in den Browser ziehen
  • Texte zu den Bildern verfassen (title, descr...)

Die vorgenommenen Einträge sollten in einem DropDown auswählbar sein (fortlaufende Nummer, bereits nach dem Ziehen eines Fotos in den Browser soll der Eintrag erzeugt werden), Editieren, Löschen usw.

Es soll die Möglichkeit geben, dass Alles in einer lokalen Datei zu speichern, damit die Arbeit unterbrochen und später wiederaufgenommen werden kann (lokale Datei wieder in den Browser ziehen).

UploadButton für die verfassten Inhalte, was damit serverseitig passiert, ist sogut wie fertig ;)

Bitte um Vorschläge für das Frontend,
Horst

  1. Hallo,

    du beschreibst viele verschiedene Teilaufgaben, für die es jeweils gute Bibliotheken gibt. Diese decken aber nur die Teilaufgaben ab. Dann gibt es High-Level-Frameworks, die zur Strukturierung von Webanwendungen und deren User-Interfaces gedacht sind (Ember, Angular usw.). Die helfen einem aber nicht bei Spezialaufgaben wie Drag and Drop von Dateien weiter. Es gibt also kein Framework, was all deine Anforderungen abdeckt. Am ehesten würden mir noch Sencha oder Yahoo YUI einfallen, weil die einen Haufen an Modulen für solche Aufgaben haben.

    Mathias

    1. hi Mathias,

      du beschreibst viele verschiedene Teilaufgaben, für die es jeweils gute Bibliotheken gibt. Diese decken aber nur die Teilaufgaben ab. Dann gibt es High-Level-Frameworks, die zur Strukturierung von Webanwendungen und deren User-Interfaces gedacht sind (Ember, Angular usw.). Die helfen einem aber nicht bei Spezialaufgaben wie Drag and Drop von Dateien weiter. Es gibt also kein Framework, was all deine Anforderungen abdeckt. Am ehesten würden mir noch Sencha oder Yahoo YUI einfallen, weil die einen Haufen an Modulen für solche Aufgaben haben.

      Du sagst es ;)

      Danke fürs Nachschauen, so oder so isses eigentlich eine ganz normale Programmieraufgabe. letztendlich habe ich alles auf herkömmliche Weise, also ohne fremde Libs umgesetzt, ca 8 Stunden.

      An die großen Frameworks mache ich mich später mal ran, mit anderer Zweckbestimmung. Meine kleine Anwendung ist ein minimales (Einweg) CMS, was einem Benutzer ermöglicht, innerhalb einer sehr kurzen Zeit, eine mobile Website zu erstellen, die auf eine Navigation über Fotos ausgerichtet ist (Fotoalbum, Bilder mit Text). Nachdem die Images in den Browser geschoben und mit Texten versehen wurden, wird auf Klick eine Vorschau der Mobilen Seite gezeigt. Bis dahin alles temporär, auch serverseitig.

      Wenn die Vorschau gefällt, kann der Autor dann über die weitere Verwendung entscheiden...

      Wie auch immer, die neuen Features moderner Browser erlauben es, viele Sachen gleich im Frontend, ohne Serververbindung zu erledigen, was damit sehr benutzerfreundlich wird.

      Viele Grüße,
      Horst (Name geändert)

      1. Wie auch immer, die neuen Features moderner Browser erlauben es, viele Sachen gleich im Frontend, ohne Serververbindung zu erledigen, was damit sehr benutzerfreundlich wird.

        So siehts aus ;)

        1. Wie auch immer, die neuen Features moderner Browser erlauben es, viele Sachen gleich im Frontend, ohne Serververbindung zu erledigen, was damit sehr benutzerfreundlich wird.

          So siehts aus ;)

          Und wenns ein bischen mehr sein darf...

          Fazit: Es eröffnen sich neue Wege zum Gestalten von Frontends fürs Content-Management, insbesondere hinsichtlich Benutzerfreundlichkeit. Also, wenn ich mir so manche Backend-Lösungen gestandener CMSse anschaue, da ist Einiges im Argen....

          1. Meine Herren!

            Und wenns ein bischen mehr sein darf...

            Deine Artikel werden verständlicher ;)
            Nur extrem schade, dass du dem Leser nicht eine Kostprobe gibst, mal ehrlich nur ein Screenshot? Gerade beim UI-Design ist das zu spärlich.

            Fazit: Es eröffnen sich neue Wege zum Gestalten von Frontends fürs Content-Management, insbesondere hinsichtlich Benutzerfreundlichkeit. Also, wenn ich mir so manche Backend-Lösungen gestandener CMSse anschaue, da ist Einiges im Argen....

            Du kannst schlecht das Backend eines Enterprise-CMS' mit deinem kleinen Upload-Skript vergleichen. Wenn ich mir überlege, was das Typo3- oder das Magento-Backend alles leisten können, da ist natürlich eine gewisse Komplexität vorprogrammiert, die ein Bild-Upload-Skript nicht hat.

            Als Verbesserungsvorschlag: Wie wäre es mit einer Auto-Save-Funktion, die zyklisch Requests zum Server absetzt, so ist im Falle eines Browser-Absturzes nicht gleich alles verloren.

            --
            “All right, then, I'll go to hell.” – Huck Finn
            1. Meine Herren!

              Hi mein Lieber!

              Und wenns ein bischen mehr sein darf...

              Deine Artikel werden verständlicher ;)

              Danke!!!! Da habe ich mir ja auch so richtig Mühe gegeben ;)

              Nur extrem schade, dass du dem Leser nicht eine Kostprobe gibst, mal ehrlich nur ein Screenshot? Gerade beim UI-Design ist das zu spärlich.

              Das stimmt freilich. Allerdings wollte ich die Sourcen nicht gleich so offen legen. Jedoch:

              schonmal was zum gucken

              ...und der Artikel verrät auch so Einiges meiner Gedankengänge zu kleinen Hobby-Projekten, die einige Jahre(!) in einer Schublade schlummerten, weil die Browser so Manches damals noch nicht konnten...

              Du kannst schlecht das Backend eines Enterprise-CMS' mit deinem kleinen Upload-Skript vergleichen.

              Stimmt auch. Aber: Mein nach dem EAV-Pattern umgesetztes Demo-Frontent ist ausbaufähig, ich kann es beliebig erweitern, z.B. für ein browserbasiertes CMS für mein Framework, was ebenfalls auf dem EAV-Model beruht: Es sind server- wie auch clientseitig dieselben Datenstrukturen, so können auch Teilbäume als Replik (working copy) ausgekoppelt und serverseitig wieder eingehängt werden an der richtigen Stelle.

              Derzeit habe ich fürs eigene Content-Management eine Webservice-Schnittstelle (proprietäre Server/Client Lösung mit Perl). Und einen Data-Abstaction-Layer, der es mir erlaubt, bei Bedarf die persistente Datenhaltung von 'Datei' auf 'Datenbank' umzuschalten. Derzeit ist der gesamte textliche Content meiner Website in einer Datei (ca. 900kB) gespeichert und das läuft performant.

              Andererseits kenne ich auch viele Backends, z.B. zur Artikelpflege von Shopsystemen, da hätte ich schon konkrete Lösungen für den 'Neuen Typus', was die Benutzerfreundlichkeit enorm verbessern und Anbindungen an Drittsysteme (ERP,...) vereinfachen würde. So hätte beispielsweise ein Shopinhaber auch ein lokales Backup als 'Dateilösung nach Warengrupppen'.

              Als Verbesserungsvorschlag: Wie wäre es mit einer Auto-Save-Funktion, die zyklisch Requests zum Server absetzt, so ist im Falle eines Browser-Absturzes nicht gleich alles verloren.

              Es gäbe noch mehr solcher Vorschläge, beauty casts, die auch die Qualität eines produktionsreifen Produkts sichern würden.

              Viele Grüße,
               Horst Hotte

              1. [..] oder das Magento-Backend alles leisten können, da ist natürlich eine gewisse Komplexität vorprogrammiert, die ein Bild-Upload-Skript nicht hat.

                Btw., Magento setzt ebenfalls das EAV-Pattern um z.B. für Shop-Artikel (Preis, Gewicht...).

                Entity-Attribute-Value... in meinem Framework nutze ich das konsequent von Anfang an. Beispielsweise kann ich damit zur Laufzeit den Titel einer Response-Seite ändern:

                  
                    $self->eav('title', 'Neuer Titel');  
                
                

                Oder auf dieser Basis ein benutzerfreundliches CMS-Frontend bauen ;)

              2. Meine Herren!

                Meine Herren!

                Hi mein Lieber!

                Und wenns ein bischen mehr sein darf...

                Deine Artikel werden verständlicher ;)

                Danke!!!! Da habe ich mir ja auch so richtig Mühe gegeben ;)

                Nur extrem schade, dass du dem Leser nicht eine Kostprobe gibst, mal ehrlich nur ein Screenshot? Gerade beim UI-Design ist das zu spärlich.

                Das stimmt freilich. Allerdings wollte ich die Sourcen nicht gleich so offen legen.

                Quelloffen heißt ja nicht gleich kostenlos. Es gibt Lizenz-Modelle die Quellofffenheit und Kostenpflichtigkeit vereinbaren. Technisch wirst du deinen Quellcode sowieso nicht wirksam vor Missbrauch schützen können, jeder Kunde, der dein CMS nutzt, veröffentlicht damit auch clientseitigen Quellcode, also wieso solltest du selbst keinen Gebrauch davon machen?

                ...und der Artikel verrät auch so Einiges meiner Gedankengänge zu kleinen Hobby-Projekten, die einige Jahre(!) in einer Schublade schlummerten, weil die Browser so Manches damals noch nicht konnten...

                Ich bin ja noch ein Frischling, das Web fasziniert mich erst seit einigen wenigen Jahren. Trotzdem möchte ich dir Recht geben, das Potenzial, welches sich derzeit entwickelt, ist enorm (ist, war und bleibt).

                Du kannst schlecht das Backend eines Enterprise-CMS' mit deinem kleinen Upload-Skript vergleichen.

                Stimmt auch. Aber: Mein nach dem EAV-Pattern umgesetztes Demo-Frontent ist ausbaufähig

                Das hoffe ich doch, dafür haben wir ja Design-Pattern ;) Ich habe leider nur die deutsche Fassung von Entwurfsmuster hier parat, kennst du zufällig den deutschen Namen des Musters oder hast einen Link zum Thema parat? Ich habe einen groben Eindruck vom EAV-Pattern, aber würde mir gerne mal die Diskussion dazu anschauen.

                BTW: RAM ist imho. ein schlecht gewählter Bezeichner für eine Variable. Arrays und Objekte in JavaScript bieten beide RAM, da bleibt nicht mehr viel anderes übrig. Ich würde den Bezeichner lieber anhand des Inhalts oder Zwecks festmachen, als an Implementations-Details. Mal abgesehen von didaktischen Zwecken, würdest du eine Variable ja auch nicht „myArray“ oder „myInt“ nennen.

                Ich muss jetzt wie ein Zwangs-Neurotiker auf dich wirken, aber bemühe dich mal um Konsistenz in deinem Quellcode, mal ein einfaches Anführungszeichen und mal ein doppeltes für String-Begrenzer, ohne offensichtlichen Grund… ich weiß auch nicht, irgendwie stört mich das.

                Das sind Kleinigkeiten, aber sie können viel ausmachen ;)

                Immer schön weiter basteln!

                Gruß

                • 1UP
                --
                “All right, then, I'll go to hell.” – Huck Finn
                1. hi,

                  Das hoffe ich doch, dafür haben wir ja Design-Pattern ;) Ich habe leider nur die deutsche Fassung von Entwurfsmuster hier parat, kennst du zufällig den deutschen Namen des Musters oder hast einen Link zum Thema parat? Ich habe einen groben Eindruck vom EAV-Pattern, aber würde mir gerne mal die Diskussion dazu anschauen.

                  Wahrscheinlich eher ein Thema für lange Winterabende. Die EAV-Sache ist eigentlich ganz einfach und es gibt auch CPAN-Module, die sich dem Thema widmen. Im Prinzip ist der Datenspeicher eine nicht normalisierte Tabelle mit drei Spalten: entity, attribute, value.

                  Der primary key umfasst ent + att und ist, sofern die Daten in einer DB vorliegen, auch der Schlüssel für performante Abfragen. In einer DB hat es das EAV-Pattern in sich: Obwohl die Daten quasi serialisiert vorliegen, sind mit SQL gezielte Abfragen machbar per Selfjoin und sowas ist auch performant.

                  Anstatt also für jedes Attribut ein Datenfeld anzulegen, werden att = val paarweise untereinander in die Tabelle geschrieben und die Abfrage

                  SELECT ent,att,val FROM urlmap WHERE ent = '/foo.html';

                  liefert praktischerweise ein Objekt mit Attributen wie title, descr, body, usw, und (in meinem FW) im class-Attribute den Namen der Klasse, welche für's Ausliefern der Response zuständig ist. Mit Perl gibt es weitere schöne Sachen, womit die Datenhaltung abstrahiert und der Code vereinfacht werden kann, z.B. mit ~~~perl tie():

                  tie my $customer, 'Customer';
                     $customer->{name} = 'Haselhuhn';
                     tied(%{$customer})->write; # Änderungen speichern

                    
                  wobei das ganze SQL-Geraffel wie von Zauberhand von der Klasse 'Customer' erledigt wird.  
                    
                  EAV für Datenhaltung in Dateien: Genauso auch drei Felder mit variabler Länge, wo Daten als pure Binary enthalten. Zur Veranschaulichung, betrachte das mal bildlich als CSV:  
                    
                  addr;name;Haselhuhn  
                  addr;vname;Horst  
                  addr;city;Henneberg  
                    
                  Wobei bei einer Low-Level-Serialisierung einfach nur alles hinterreinander wech geschrieben wird (ohne Feld-Trenner-Zeichen, ohne Record-Trenner-Zeichen), natürlich mit fixen Längenangaben, damit die Daten wiederhergestellt werden können.  
                    
                  Auch ein Overload geht mit Low-Level:  
                    
                  addr;city;Henneberg  
                  addr;city;Nein, der wohnt jetzt woanders  
                    
                  da wird ein Attribut einfach nur überschrieben und im nächsten Zyklus (serialize + deserialize) isses ganz raus.  
                    
                  
                  > BTW: RAM ist imho. ein schlecht gewählter Bezeichner für eine Variable.  
                    
                  Für die Demo extra so gewählt: Random Access (Memory)  
                    
                  Mit Linearer Adressierung wird ein Vorgang beschrieben, mit dem versucht wird, Random Access auf Dateiebene, also in der Sequenz selbst abzubilden, was ich persönlich für ziemlichen Unfug halte. Kein geringerer als Niklas Wirth schrieb sinngemäß dasselbe bereits in den 80ern.  
                    
                  Dazu auch [Mein Artikel in der $foo](http://rolfrost.de/foo.html)  
                  (aus meiner heutigen Sicht überarbeitungsbedürftig, aber gedruckt ist gedruckt ;)  
                    
                  
                  > Ich muss jetzt wie ein Zwangs-Neurotiker auf dich wirken, aber bemühe dich mal um Konsistenz in deinem Quellcode, mal ein einfaches Anführungszeichen und mal ein doppeltes für String-Begrenzer, ohne offensichtlichen Grund… ich weiß auch nicht, irgendwie stört mich das.  
                  >   
                  > Das sind Kleinigkeiten, aber sie können viel ausmachen ;)  
                    
                  Das liegt an der Hand, die gerade frei ist, mal nach links oben" oder rechts unten' .... natürlich auch nur, wenn es der Kontext erlaubt ;)  
                    
                  In Perl greife ich gerne auf q() oder qq() zurück, insbesondere, wenn die Texte mehrzeilig sind, die korrespondierenden Klammern sind vom Editor schnell gefunden.  
                    
                  Viele Grüße,  
                  Horst  
                    
                  Ähm, Basteln, vieles ist Hobby. Zwischen Kommerz und Bastelei gibt es jedoch immer wieder Übergänge, wie die Geschichte der Rundfunktechnik zeigt:  
                    
                  Unbestritten waren Amateure die Wegbereiter für den kommerziellen Einsatz der Funktechnik, die im Langwellenbereich ihren Anfang nahm. Amateure durften sich in immer kürzeren Wellenbereichen tummeln, lange Zeit herrschte die Auffassung vor, dass kurze Wellen für den kommerziellen Funkverkehr völlig ungeeignet sind.  
                    
                  Eines Tages vollbrachten Amateure das Unfassbare: Sie überbrückten den Atlantik! Marconi fiel aus allen Wolken, denn die Amateure funkten mit kurzen Wellen... Natürlich wären Erfinder keine Erfinder, wenn sie nicht auch nach dem schauen, was die Anderen so machen.  
                    
                  [mehr zum Thema Funktechnik](http://rolfrost.de/uhf_konverter.html)
                  
                2. hi again,

                  Das hoffe ich doch, dafür haben wir ja Design-Pattern ;) Ich habe leider nur die deutsche Fassung von Entwurfsmuster hier parat, kennst du zufällig den deutschen Namen des Musters oder hast einen Link zum Thema parat? Ich habe einen groben Eindruck vom EAV-Pattern, aber würde mir gerne mal die Diskussion dazu anschauen.

                  Nunja, in Sachen Serializer findest Du in mir einen netten Ansprechpartner ;)

                  Zu EAV: Neuer Artikel
                  Entity Attribute Value Pattern auf CSV umgesetzt

                  (vor Jahren entwickelt, heute mal aufgeschrieben)

                  Schönes Wochende;
                  Horst

            2. hi,

              Du kannst schlecht das Backend eines Enterprise-CMS' mit deinem kleinen Upload-Skript vergleichen.

              Das liegt mir schwer im Magen ;)

              Immerhin ist das nicht nur ein Uploadscript schlechthin, sondern eine eine Kompaktlösung mit eingebauter REST-Schnittstelle und es werden nicht nur Bilder hochgeladen sondern komplexe Datenstrukturen (Hypermedia: Texte zusammen mit Grafik [Video, Audio...]).

              Wir haben hier die Möglichkeit (und das habe ich bereits auf dem Tisch), lokal in den Browser einen ganzen Webtree, also den kompletten Text-Content einer vollständigen Webpräsenz zu laden (replik, working copy), sofern die Inhalte über das EAV-Pattern strukturiert sind. D.h., wir haben eine urlmap (EAV) mit folgender Struktur, bzw, Einträge wie untenstehend:

              [/keyb.html]
              class=Keyb
              title=Tastatur- BarcodeScanner eingaben erfassen mit Browser
              descr=Sollte auch mit einem BarcodeScanner tun...
              parent=/html5

              Ein EAV-gerechtes Universal-Frontend könnte so aussehen:

              --------------------------------------------------------
              | Tastatur- BarcodeScanner eingaben erfassen mit Browser | Dropdown Entity (value=oid, sichtbar=title)
               --------------------------------------------------------

              ----------------------------------------------
              | class                                        | Textarea Attribute
              | title                                        | Auswahl per Klick
              | descr                                        |
               ----------------------------------------------

              ----------------------------------------
              | mehrzeiliges Feld (s. body)            | Value bearbeiten
               ----------------------------------------

              ------------------------------------
              | Vorschaubereich Einzelseite ...

              Zu klicken wäre: Entity, Attribute. Neues Attribut: Einfach in die Textare eintragen (split(/\n/)).
              Neue Entity: dafür gibt es im Dropdown einen Dummy --- Neuer URL ---

              Das Ganze noch mit einem schönen Menü (HTML5) ausgestattet, dürfte recht benutzerfreundlich werden und auch auf den Screen eines Smartphones passen ;)

              Andere Vorschläge?

              Horst