Tobi: Geräteunabhängigkeit für ein Auftragsleitsystem

Guten Abend,
muss für einen kleinen Anlagen-Demonstrator eine Leitstand-Oberfläche bauen auf der die Fertigungsaufträge parametriert und dann an die Anlage geschickt werden. Hinten dran ist eine mySQL Datenbank, in der die Fertigungsaufträge und Kundendaten gespeichert werden sollen.
Die Leitstandoberfläche besteht im Wesentlichen aus Formularfeldern (Checkboxen, TExtboxen, Radiobuttons usw.), die ausgefüllt werden müssen.
Frage: das Grundgerüst aus Skripten, relationalem Datenbankschema als Datenmodell und das HTML-Gerüst stehen bereits und funktionieren.
Das HTML-Gerüst ist ohne jegliche Formatierung realisiert.
Die Formatierung und grafische Aufbereitung des HTML-Gerüsts werde ich in CSS machen.
Jetzt ist angedacht, dass zu Show-Zwecken auch per Tablet (iPad) und per smartphone (android) auf die Anlage zugegriffen werden kann und Fertigungsaufträge generiert werden können. Das Ganze soll sich natürlich auf dem jeweiligen Gerät entsprechend gut bedienen lassen.
Ich will vermeiden, Apps entwicklen zu müssen. Geräteunabhängigkeit würde ich m.E. auch über eine Broser-"App" erreichen.
Mein erster Gedanke war, eine Geräte-abhängige Weiche auf unterschiedliche CSS-Dateien zu bauen - also das selbe HTML-Gerüst jeweils anders darzustellen.
Wie würdet ihr das Projekt angehen?
Besten Dank für Eure Ratschläge
Tobias

  1. Hallo,

    Mein erster Gedanke war, eine Geräte-abhängige Weiche auf unterschiedliche CSS-Dateien zu bauen - also das selbe HTML-Gerüst jeweils anders darzustellen.

    Generell der richtige Ansatz. Ich würde Dir noch empfehlen einen manuellen Umschalter Smartphone - Tablet - Computer einzubauen, da nicht alle Geräte bzw. Browser Mediaquerys so handhaben, wie man es sich wünscht bzw. erwartet. Die Benutzerentscheidung könntest Du in einer Sessionvariable speichern und dein auszulieferndes HTML je nach deinen Möglichkeiten manipulieren.

    Ob sich ein HTML-Gerüst für beides eignet kann ich nicht beurteilen, dass hängt sehr von der Aufgabenstellung und der Benutzerführung ab. Generell würde ich dir aber empfehlen, dir HTML5 an zu schauen, da die dortigen Formularelemente einige nette Features bieten. Schaut nicht nur schicker aus, sondern bietet auch Funktionalität, die man sons mit JS oder serverseitig nachbauen müsste.

    Grüße
    Siri

    1. Hi Siri,

      habe letztens eine Infotainment-System-Demo eines großen Automobilzulieferers gesehen. Die haben die Demo auf einem iPad gezeigt. Das HMI sah super aus, man konnte Videos in einem kleinen Frame laufen lassen und hatte insgesamt den Eindruck eines vollwertigen Infotainment-Systems. Und dann hat der Demo-Betreuer auf den Home Button am iPad geklickt und dann wieder Safari gestartet und in dem Augenblick hat man erst gemerkt, dass das komplette Infotainment-System im Safari Browser des iPads gelaufen ist und mit HTML5 realisiert wurde. Um den Gesamteindruck nicht zu zerstören haben die irgendwie alle Browserleisten ausgeblendet, so dass man quasi Fill-Screen Content hatte.

      Danke für den Tipp mit dem manuellen Umschalter, habe gestern dazu noch folgenden Artikel gefunden: CSS: Angepasste Inhalte für mobile Endgeräte

      Viele Grüße
      Tobias

      1. Moin,

        Danke für den Tipp mit dem manuellen Umschalter

        Ein manueller Umschalter muss ja nicht heißen, dass dein System nicht trotzdem versucht zu erraten mit welchem Gerät der User einen Zugriff versucht. Oftmals funktioniert das ja recht problemlos.

        Grüße Marco

        1. Ein manueller Umschalter muss ja nicht heißen, dass dein System nicht trotzdem versucht zu erraten mit welchem Gerät der User einen Zugriff versucht. Oftmals funktioniert das ja recht problemlos.

          Grüße Marco

          Hi, ich werde beiden einbauen!
          Gruß
          Tobi

    2. hi,

      wenn die grundwebseite nicht zu groß wird, geht das auf einem Ipad identisch.
      Der vorteil wäre, dass man sich nicht umgewöhnen muss und es gleich aussieht.
      Wenn es natürlich bis auf ein kleines Handydisplay runter gebracht wird, dann siehe den anderen Antworten ;)

      Fürs Ipad allein würde ich mir aber keine sonderarbeit groß machen. (je nach dem wie groß deine Webseite eben ist. Bei 500px breite und höhe ist das ja kein problem!

      Gruß Niklas

      1. Hallo,

        wenn die grundwebseite nicht zu groß wird, geht das auf einem Ipad identisch.
        Der vorteil wäre, dass man sich nicht umgewöhnen muss und es gleich aussieht.

        ...

        Fürs Ipad allein würde ich mir aber keine sonderarbeit groß machen. (je nach dem wie groß deine Webseite eben ist. Bei 500px breite und höhe ist das ja kein problem!

        Tablets haben aber ein ganz anderes Look&Feel, darauf kann mann schon reagieren, dann fällt dem Benutzer die Umstellung von anderen Apps nicht so schwer.

        Grüße
        Siri

        1. Tablets haben aber ein ganz anderes Look&Feel, darauf kann mann schon reagieren, dann fällt dem Benutzer die Umstellung von anderen Apps nicht so schwer.

          Ja, eben.
          Ich würde am liebsten die bekannten Elemente vom iPad (date-picker, radiobuttons usw.) verwenden können.
          Die sind alle ergonomisch gut gelöst und auf Touch-Bedienung ausgelegt.

          Gruß
          Tobi