[Webdesign] Wie Grafiken mit präzisen Eingabefeldern verbinden?

jtkrk · 2. August 2017

Hallo,

ich möchte mir einem Kumpel ein Web-Projekt realisieren. Es geht dabei einen "Charakterbogen-Generator" für das Spiel "Dungeons & Dragons".

Es gibt derzeit dutzende Versionen, welche sich allesamt in geringen Design-Änderungen unterscheiden. Auf der Website sollen die User per Auswahl-Buttons (JA/NEIN) und weitere Untermenüs entscheiden können, was Bestandteil sein soll und was nicht.

Hier mal ein grober Eindruck:

Die Bögen bestehen derzeit aus Vektor-Grafiken und sollen über eine Website zugänglich gemacht werden.

Zusätzlich sollen aber auch Eingabefelder in die zu sehenden Tabellen/Grafiken eingefügt werden, die ein Ausfüllen des Bogens ermöglichen.

Zur Verfügung stehen folgende Programmiersprachen: HTML, CSS, Javascript und PHP

Unser Problem ist hierbei die Umsetzung aus Grafiken und Eingabefeldern. Der aktuelle Plan ist, die Grafiken per HTML, CSS "nachzubauen", um es möglichst Browser-freundlich zu gestalten. Da das Ganze später ausgedruckt werden soll, wären mir jedoch die Verwendung von Bildern eigentlich lieber. Außerdem kann man auch nicht alle Bereiche nachbauen und kommt um die Verwendung von einigen Grafiken nicht herum. Hierbei macht es jedoch Schwierigkeiten, die Eingabefelder punktgenau zu platzieren. Unsere Sorge ist, dass sich browserabhängig alles verschieben könnte.

Ich würde gerne wissen, ob jemand Erfahrungen mit so etwas hat. Also: Der Verwendung von Bildern und präzisen Eingabefeldern. Gibt es dafür Herangehensweisen, die sich mehr oder weniger eignen? Denkbar wäre auch ein Zwischenschritt, also eine "grobe Ansicht" im Web und eine "Print-Version". Allerdings müssen halt irgendwo die Eingabefelder hinzukommen, welche wirklich pixelgenau sein müssen.

Würde mich über Hilfe freuen!

Danke im Voraus!

PS: Ich bin der "Designer" und habe keine Ahung von Programmiersprachen. Also nicht wundern...

Jokeboy · 2. August 2017

Ihr könntet einfach mit absoluten Positionierungen arbeiten und mit z-index die Eingabefelder über das Bild legen. Durch die fixe Pixelanpassung sieht es dann bei jedem gleich aus (außer man hat einen kleinen Bildschirm und das Bild ist Groß, dann muss der User anfangen hin und her scrollen)

Ist zwar nicht responsive und für Smartphones ungeeignet, aber ist ziemlich simpel gestaltet damit.

Jxn · 2. August 2017

Hallo,

also was mir jetzt spontan einfallen würde ist, dass ihr einfach eine feste größe für eure Internetseite festlegt. Vielleicht muss es ja nicht unbedingt responsive sein?
Sprich sowas in der Art:

HTML:

body {
  background-color: grey;
}

div.formular {
  margin-left: auto;
  margin-right: auto;               //Zentrierung des Divs
  background-color: white;
  min-width: 1100px;              //Feste Größe des Divs
  height: 100%;
}

Somit verhinderst du zumindest schon mal, dass sich die ganzen Bilder und Eingabefelder sich bei verschiedenen Browsergrößen und Geräten verändert. Ich weiß nicht ob das das ist, was du suchst, aber es ist zumindest eine Lösung.

Eine weitere Möglichkeit ist noch, dass ihr Bootstrap benutzt. Damit könnt ihr die Seite in Form von ganz vielen Zellen aufbauen. Pro Zelle kannst du dann ein Bild und ein Eingabefeld untereinander positionieren. Wenn sich das Browserfenster dann verändert, bleiben die Zelleninhalte gleich, lediglich die Position der Zellen ändert sich.

jtkrk · 2. August 2017

Danke für deine Antwort!

Zwei Fragen:

1.)
Wie würde ich das denn z.B. ganz unten bei den "Feats" machen. Dort sind ganz feine Linien. Ziel wäre es, dass die User einen Fließtext schreiben, welcher exakt passt. Wenn man jede Linie einzeln in ein Feld unterteilt, müssten sie am Ende einer Zeile ja immer per Mausklick oder TAB in die nächste Zeile klicken, oder?

2.)
Wie kann man es verhindern, dass z.B. Zoomstufen im Browser oder Barrierefreiheit in Windows das Bild verändern/verzerren. Wenn beispielsweise eine Einstellung aktiviert ist, dass die Schrift vergrößert dargestellt wird (der Rest aber nicht), hätte das ja zur Folge, dass nichts mehr passt. Kann man so etwas sperren?

Grüße!

Jxn · 2. August 2017

lkwpeter2 schrieb:
1.)
Wie würde ich das denn z.B. ganz unten bei den "Feats" machen. Dort sind ganz feine Linien. Ziel wäre es, dass die User einen Fließtext schreiben, welcher exakt passt. Wenn man jede Linie einzeln in ein Feld unterteilt, müssten sie am Ende einer Zeile ja immer per Mausklick oder TAB in die nächste Zeile klicken, oder?!

Das stimmt, deswegen würde ich da keine Linien verwenden, sondern Textareas. Die Höhe und Breite davon kannst du wieder fest definieren.
Die kannst du mit Hilfe von Formularen erstellen. Sollen die ganzen Inhalte, die der User eingibt, in einer Datenbank o.ä. eingetragen werden?

Ich würde sagen so wie du das Formular dort oben im Bild designed hast, wird es sehr schwierig sein es 1:1 mit Hilfe von HTML und CSS darzustellen.

lkwpeter2 schrieb:
2.)
Wie kann man es verhindern, dass z.B. Zoomstufen im Browser oder Windows das Bild verändern/verzerren. Wenn beispielsweise eine Einstellung aktiviert ist, dass die Schrift vergrößert dargestellt wird (der Rest aber nicht), hätte das ja zur Folge, dass nichts mehr passt. Kann man so etwas sperren?

Es ist möglich, mit Javascript. Siehe folgenden Thread: https://stackoverflow.com/questions/27116221/prevent-zoom-cross-browser
(bzw. folgende Demo: http://jsfiddle.net/VijayDhanvai/4m3z3knd/ (ist dem o.g. Thread entnommen)).

jtkrk · 2. August 2017

Unbek4nt schrieb:
Das stimmt, deswegen würde ich da keine Linien verwenden, sondern Textareas. Die Höhe und Breite davon kannst du wieder fest definieren.

Ja, das meine "mein" Programmierer auch. Den Kompromiss kann man gut eingehen. Wäre es nicht möglich, das Eingabefeld transparent zu machen und dahinter dann die Linien per Tabelle einzufügen?

Unbek4nt schrieb:
Sollen die ganzen Inhalte, die der User eingibt, in einer Datenbank o.ä. eingetragen werden

Ja, das ist das Ziel. Die Nutzer sollen die Möglichkeit haben, sich zu registrieren und ihre Daten auf dem Server zu speichern.

Unbek4nt schrieb:
Es ist möglich, mit Javascript. Siehe folgenden Thread: https://stackoverflow.com/questions/27116221/prevent-zoom-cross-browser
(bzw. folgende Demo: http://jsfiddle.net/VijayDhanvai/4m3z3knd/ (ist dem o.g. Thread entnommen)).

Vielen Dank für den Hinweis/die Links! Werde ich gleich weiterleiten!

Allgemeine Frage: Wie würdet ihr bei der Erstellung der o.g. Seite vorgehen?

Wie gesagt, es soll links eine Leiste geben, bei der die User die verschiedenen Optionen anklicken und dadurch das Design beeinträchtigen können. Das Hauptdesign bleibt dabei sehr ähnlich. Es werden immer nur entsprechende Teile ausgetauscht. Siehe hier:

Von solchen Optionen wird es etwa 10-15 geben.

Jxn · 2. August 2017

Ich würde probieren es mit Bootstrap zu realisieren. Ich glaube damit kann man das gut realisieren.
Du machst für jede Kategorie ein Div. Beispielsweise "ATTACKS".

Nur um es mal anzudeuten:

HTML:

<html>
  <head>
    <title>Project</title>
    <link rel="stylesheet" href="style.css">
    <!-- Das neueste kompilierte und minimierte CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- Optionales Theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

    <!-- Das neueste kompilierte und minimierte JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>

  <body>
    <div class="content">
      <div class="col-md-8" style="background-color: green; height: 100%;">
          <div class="col-md-12" style="width: 100%; height: 200px; background-color: blue; color: white;">
            TEXT
          </div>
          <div class="col-md-3" style="height: 250px; background-color: pink;">
            INHALT 1
          </div>
          <div class="col-md-9" style="height: 300px; background-color: grey;">
            INHALT 2
          </div>
      </div>
        <div class="col-md-4" style="background-color: red; height: 100%;">
            <div class="col-md-12" style="min-height: 200px; width: 100%; background-color: white;">
              LOGO
            </div>
        </div>
    </div>
  </body>

</html>

So sieht es dann aus:

Ergänzung (2. August 2017)

lkwpeter2 schrieb:
Allgemeine Frage: Wie würdet ihr bei der Erstellung der o.g. Seite vorgehen?

Wie gesagt, es soll links eine Leiste geben, bei der die User die verschiedenen Optionen anklicken und dadurch das Design beeinträchtigen können. Das Hauptdesign bleibt dabei sehr ähnlich. Es werden immer nur entsprechende Teile ausgetauscht. Siehe hier:

Anhang anzeigen 635687 Anhang anzeigen 635686

Von solchen Optionen wird es etwa 10-15 geben.

Vielleicht würde ich dann sogar mit Unterseiten arbeiten. Das ist einfacher, als wenn sich die Seite durch Mausklick ändert. Du leitest den User bei jeder Entscheidung auf eine andere Seite weiter. So nach dem Prinzip:

Option 1 -> Option 2 -> Option 3 -> ...
Die Ergebnisse immer in eine Datenbank speichern. Wenn alle Optionen eingegeben wurde, gibst du die Ergebnisse auf der letzten Seite aus, als Zusammenfassung. Man sieht dein Design also nur auf der letzten Seite im Ganzen. Auf den Unterseiten davor immer nur das Design der jeweiligen Kategorie.

Ergänzung (2. August 2017)

Mit Javascript kann man das visuell sehr schön gestalten.

ayngush · 2. August 2017

Hallo,

ich würde einen ganz anderen Ansatz dafür fahren:
Das HTML-Formular würde ich mit Framework(s) (Bootstrap + Formvalidator + ...) vollständig unabhängig vom Design aufbauen.
Dafür würde ich bei dem Formular auf Semantik, Logik und Plausibilität achten. Ihr kennt da ja die Regeln.
Und ich würde darauf achten, dass das Formular im Browser gut bedienbar ist und vernünftig auf allen möglichen Geräten angezeigt wird. (UX-Design)

Die Generierung des Charakter-Bogens würde ich dann mit einer PDF-Klasse anhand der eingegebenen Daten vornehmen. Da gibt es auch Möglichkeiten mit Templates zu arbeiten und da kann man Text, Grafiken und Linien Millimetergenau positionieren - und im Zweifelsfall auch noch vorausgefüllte Form-Fields in das PDF einbinden, damit man einige Angaben auch nach der PDF-Erstellung noch ändern kann.

Ich kann mir durchaus Szenarien vorstellen, wo man so einen Charakterbogen auch mal auf einem Tablet ausfüllt und dann später von einem anderen PC aus ausdruckt.

Was ich jedoch auf gar keinen Fall machen würde:
Versuchen ein HTML-Formular 1:1 im Web aus der Papierwelt nachzubauen.

Versuchen zu verhindern, dass ein User zoomt / Eingabehilfen benutzt. Auch der Zoom vom Betriebssystem verändert die "Pixel-Ratio" im Browser. Trotz FullHD kann dann mit 150% Zoom auf einem 13" Notebook die Seite zerrissen aussehen, wenn man mit Pixelgenauer Positionierung anfängt. Dagegen kann man als "Webseite" auch nichts machen - außer ein ordentliches Designparadigma umzusetzen.

jtkrk · 3. August 2017

Vielen Dank für eure Antworten!

Unbek4nt schrieb:
Die Ergebnisse immer in eine Datenbank speichern. Wenn alle Optionen eingegeben wurde, gibst du die Ergebnisse auf der letzten Seite aus, als Zusammenfassung. Man sieht dein Design also nur auf der letzten Seite im Ganzen. Auf den Unterseiten davor immer nur das Design der jeweiligen Kategorie.

Mit Javascript kann man das visuell sehr schön gestalten.

Das heißt, du würdest für den Zwischenschritt zwischen "Aufteilung auswählen" (unpräzisere Darstellung ohne Schriftfelder, etc. möglich) und "Charakterbogen ausfüllen" (präzise Darstellung mit Möglichkeit für Eingaben) plädieren.

Wenn ich dich richtig verstehe, würde man es dann so scripten, dass er bei der Auswahl der Optionen dann jeweils nur zu den einzelnen Sektionen (z.B. oberer Bereich, rechter Bereich, etc.) springt, die von der Auswahl betroffen sind. Richtig? Klingt auch ziemlich cool.

ayngush schrieb:
Hallo,

ich würde einen ganz anderen Ansatz dafür fahren:
Das HTML-Formular würde ich mit Framework(s) (Bootstrap + Formvalidator + ...) vollständig unabhängig vom Design aufbauen.
Dafür würde ich bei dem Formular auf Semantik, Logik und Plausibilität achten. Ihr kennt da ja die Regeln.
Und ich würde darauf achten, dass das Formular im Browser gut bedienbar ist und vernünftig auf allen möglichen Geräten angezeigt wird. (UX-Design)

Die Generierung des Charakter-Bogens würde ich dann mit einer PDF-Klasse anhand der eingegebenen Daten vornehmen. Da gibt es auch Möglichkeiten mit Templates zu arbeiten und da kann man Text, Grafiken und Linien Millimetergenau positionieren - und im Zweifelsfall auch noch vorausgefüllte Form-Fields in das PDF einbinden, damit man einige Angaben auch nach der PDF-Erstellung noch ändern kann.

Ich kann mir durchaus Szenarien vorstellen, wo man so einen Charakterbogen auch mal auf einem Tablet ausfüllt und dann später von einem anderen PC aus ausdruckt.

Was ich jedoch auf gar keinen Fall machen würde:
Versuchen ein HTML-Formular 1:1 im Web aus der Papierwelt nachzubauen.

Versuchen zu verhindern, dass ein User zoomt / Eingabehilfen benutzt. Auch der Zoom vom Betriebssystem verändert die "Pixel-Ratio" im Browser. Trotz FullHD kann dann mit 150% Zoom auf einem 13" Notebook die Seite zerrissen aussehen, wenn man mit Pixelgenauer Positionierung anfängt. Dagegen kann man als "Webseite" auch nichts machen - außer ein ordentliches Designparadigma umzusetzen.

Der Ansatz war auch mal bei uns im Kopf. Wir dachten allerdings, dass das PDF-Format bzw. die Textfelder hier der "Genickbruch" wären. Kann man denn genaue Schriftarten/-größen sowie Zeilenabstände (z.B. bei Fließtext) bei so etwas angeben?

Rossie · 3. August 2017

lkwpeter2 schrieb:
Der Ansatz war auch mal bei uns im Kopf. Wir dachten allerdings, dass das PDF-Format bzw. die Textfelder hier der "Genickbruch" wären.

Es ist genau anders rum. Im Web macht es keinen Sinn fixe Größen erzwingen zu wollen. Die PDF zum Ausdrucken allerdings hat ein fixes Zielformat.

lkwpeter2 schrieb:
Kann man denn genaue Schriftarten/-größen sowie Zeilenabstände (z.B. bei Fließtext) bei so etwas angeben?

Natürlich. Dafür ist PDF doch da?

Alternativ wäre es aber auch ohne PDF (also ggf. mit weniger Aufwand) möglich zum Ziel zu kommen, indem man für das Ausdrucken einfach eine andere Darstellung wählt. Ist mittels CSS ja leicht möglich.

jtkrk · 3. August 2017

soares schrieb:
Natürlich. Dafür ist PDF doch da?

Das heißt, man könnte vorher Datenbanken für gewisse Abschnitte der Seite anlagen. Und am Ende würde aus der Webansicht dann automatisiert eine PDF erstellt, welche die jeweiligen Abschnitte kombiniert? Habe ich das so richtig verstanden?

soares schrieb:
Alternativ wäre es aber auch ohne PDF (also ggf. mit weniger Aufwand) möglich zum Ziel zu kommen, indem man für das Ausdrucken einfach eine andere Darstellung wählt. Ist mittels CSS ja leicht möglich.

Was schwebt dir da vor? Könntest du kurz einen Einblick in deine Idee geben? Ich bin, wie gesagt, nur der Designer und habe nicht so viel Ahnung von den Möglichkeiten beim Programmieren.

Wir sind aktuell noch bei der grundsätzlichen Planung des Aufbaus und der Durchführung. Dafür sammeln wir Ideen und wägen dann ab.

Schon einmal vielen Dank vorab für deine Hilfe!

ayngush · 3. August 2017

lkwpeter2 schrieb:
Der Ansatz war auch mal bei uns im Kopf. Wir dachten allerdings, dass das PDF-Format bzw. die Textfelder hier der "Genickbruch" wären. Kann man denn genaue Schriftarten/-größen sowie Zeilenabstände (z.B. bei Fließtext) bei so etwas angeben?

Ja, das ist die Kernkompetenz von PDF. Der Genickbruch wäre der Web-Ansatz.
Das zu programmieren und zu gestalten ist ein einmaliger Aufwand, der auch nicht unterschätzt werden sollte, aber wenn man sich da die Tools entsprechend einrichtet und zurecht legt hat man da auch etwas für die Zukunft.

Rossie · 3. August 2017

lkwpeter2 schrieb:
Das heißt, man könnte vorher Datenbanken für gewisse Abschnitte der Seite anlagen. Und am Ende würde aus der Webansicht dann automatisiert eine PDF erstellt, welche die jeweiligen Abschnitte kombiniert? Habe ich das so richtig verstanden?

Mit Datenbanken hat das nicht zwingend etwas zu tun. Es macht natürlich Sinn, dass man die Daten aus der oder den Abfragemasken speichert, um immer wieder darauf zugreifen zu können.

Aber ja, man könnte mit diesen Daten die gewünschten PDF-Seiten genieren. Ich bin nicht in der PHP-Welt zu hause und weiß nicht, wie mächtig entsprechende PHP-Libs sind. Notfalls gibt es auch andere Wege, die Generierung durchzuführen. PDF ist halt der Gold-Standard für eine solche Aufgabe. Man kann die einmal erstellte Seite leicht speichern und weitergeben und das Druck-Ergebnis ist makellos.

lkwpeter2 schrieb:
Was schwebt dir da vor? Könntest du kurz einen Einblick in deine Idee geben? Ich bin, wie gesagt, nur der Designer und habe nicht so viel Ahnung von den Möglichkeiten beim Programmieren.

Anstatt mit den Daten am Ende eine PDF-Datei zu erstellen, wird eine HTML-Seite mit einer für die Druckausgabe optimierte CSS-Datei angezeigt. Das Ergebnis beim Drucken wird vermutlich nicht ganz so optimal wie mittels PDF sein, aber dafür muss man sich nicht in PDF einarbeiten, sondern kann bei seinen Web-Techniken bleiben.

jtkrk · 4. August 2017

Danke für eure Antworten! Unser Programmierer schaut sich die Möglichkeiten für PDFs an. Es wäre in der Tat der Königsweg. Allerdings haben wir etwas Sorge vor der doppelten Arbeit (Erstellen von Generator + PDF-Output).

Der Generator soll in etwa so aussehen:

soares schrieb:
Anstatt mit den Daten am Ende eine PDF-Datei zu erstellen, wird eine HTML-Seite mit einer für die Druckausgabe optimierte CSS-Datei angezeigt. Das Ergebnis beim Drucken wird vermutlich nicht ganz so optimal wie mittels PDF sein, aber dafür muss man sich nicht in PDF einarbeiten, sondern kann bei seinen Web-Techniken bleiben.

1.)
Das heißt, du würdest eine Generator-Seite erstellen, auf der man die Optionen auswählt und eine zusätzliche Seite für den Druck-Output, welche optimiert ist?

2.)
Wir überlegen gerade noch, inwieweit wir a)mit Bildern die Optionen darstellen (z.B. unterschiedliche Bilder für das Ein- und Ausblenden bestimmter Bereiche/Optionen) oder b) so viel wie möglich mit HTML/CSS nachbauen, um die Änderungen durch Quelltext anzeigen zu lassen. Was wäre eure Meinung dazu? Habt ihr Erfahrungen damit?

Grüße und nochmal Danke!
Peter

Rossie · 4. August 2017

lkwpeter2 schrieb:
Allerdings haben wir etwas Sorge vor der doppelten Arbeit (Erstellen von Generator + PDF-Output).

Wenn die Nutzer nicht zufrieden sind, habt ihr ev. mehr Arbeit, als wenn man es gleich richtig macht. Kommt halt auch darauf an, an wen ihr euch richtet. Wenn das eine kleine, kostenlose Sache für einige Fans wird, sind die Ansprüche sicher andere, als wenn man sehr viele Kunden ansprechen möchte, die möglicherweise sogar zahlen sollen.

lkwpeter2 schrieb:
Der Generator soll in etwa so aussehen:

Mobile ist nicht wichtig?

lkwpeter2 schrieb:
Das heißt, du würdest eine Generator-Seite erstellen, auf der man die Optionen auswählt und eine zusätzliche Seite für den Druck-Output, welche optimiert ist?

Ich würde auf jeden Fall eine PDF-Ausgabe wählen. Will man das vermeiden, würde ich Dateneingabe und Ausgabe aber trotzdem trennen. Man bleibt dadurch flexibel und könnte z.B. die PDF-Ausgabe ohne großen Aufwand später immer noch hinzufügen. Aber man hat so auch alle Freiheiten und kann die Eingabe gezielt auf das jeweilige Eingabemedium optimieren ohne Kompromisse hinsichtlich der späteren Ausgabe machen zu müssen.

lkwpeter2 schrieb:
Wir überlegen gerade noch, inwieweit wir a)mit Bildern die Optionen darstellen (z.B. unterschiedliche Bilder für das Ein- und Ausblenden bestimmter Bereiche/Optionen) oder b) so viel wie möglich mit HTML/CSS nachbauen, um die Änderungen durch Quelltext anzeigen zu lassen. Was wäre eure Meinung dazu?

HTML all the way! Das oder die Formulare lassen sich beliebig mit Grafiken aufhübschen und wenn man will, lässt man es eben so aussehen wie auf dem Screenshot, auch wenn ich die Elemente zur Eingabe im Netz ganz sicher nicht so anordnen würde.

jtkrk · 4. August 2017

Zusammenfassend also

auf jeden Fall zwei Ebenen verwenden (Eingabe + Ausgabe)
Eingabe so viel wie möglich per HTML (Stellen, die schwierig sind, mit durch Bilder)
die Ausgabe auf jeden Fall in PDF

Richtig?

soares schrieb:
Will man das vermeiden, würde ich Dateneingabe und Ausgabe aber trotzdem trennen. Man bleibt dadurch flexibel und könnte z.B. die PDF-Ausgabe ohne großen Aufwand später immer noch hinzufügen. Aber man hat so auch alle Freiheiten und kann die Eingabe gezielt auf das jeweilige Eingabemedium optimieren ohne Kompromisse hinsichtlich der späteren Ausgabe machen zu müssen.

Das klingt plausibel. Ohne HTML würde man das Ergebnis am Ende dann aus Bilddateien zusammenstellen, über die die Eingabemaske liegt?

soares schrieb:
Mobile ist nicht wichtig?

Es ist eher eine Frage der Umsetzbarkeit und des Aufwands. Ich kann das aktuell nicht einschätzen.

soares schrieb:
auch wenn ich die Elemente zur Eingabe im Netz ganz sicher nicht so anordnen würde.

Was meinst du genau dabei? Die Leiste für die Optionen (links)? Oder meinst du das Design des Bogen (der ist ja auf A4 ausgelegt)?

Danke für deine Unterstützung!

Rossie · 4. August 2017

lkwpeter2 schrieb:
auf jeden Fall zwei Ebenen verwenden (Eingabe + Ausgabe)

Eingabe so viel wie möglich per HTML (Stellen, die schwierig sind, mit durch Bilder)

Für die Eingabe nutzt man zwingend die üblichen Formular-Elemente (Text, Zahlen, Auswahlboxen). Das Ganze kann man mittels Grafiken so gestalten, wie man möchte:

https://mdn.mozillademos.org/files/4149/screenshot.png

lkwpeter2 schrieb:
Das klingt plausibel.

Die Daten sollen vermutlich auch gespeichert werden. Ich kann das nicht einschätzen, aber vielleicht will ich meine Bögen später noch mal ändern? Oder mit anderen teilen? Oder Vorschläge erhalten? Trenne ich Eingabe und Ausgabe ergeben sich viel mehr Möglichkeiten und Freiheiten.

lkwpeter2 schrieb:
Ohne HTML würde man das Ergebnis am Ende dann aus Bilddateien zusammenstellen, über die die Eingabemaske liegt?

Nein!!!

lkwpeter2 schrieb:
Was meinst du genau dabei? Die Leiste für die Optionen (links)? Oder meinst du das Design des Bogen (der ist ja auf A4 ausgelegt)?

Eben. Im Screenshot sieht man den Bogen so, wie er am Ende aussehen soll. Für die Eingabe und Darstellung auf dem Bildschirm ist das nicht optimal. Da würde ich eine lineare Darstellung wählen, ev. mit entsprechenden Erkläuterungen, die die Felder erklären. Vielleicht einen Wizard mit mehreren Schritten anbieten. Die Möglichkeiten des Mediums nutzen!

jtkrk · 7. August 2017

soares schrieb:
Die Daten sollen vermutlich auch gespeichert werden. Ich kann das nicht einschätzen, aber vielleicht will ich meine Bögen später noch mal ändern? Oder mit anderen teilen? Oder Vorschläge erhalten? Trenne ich Eingabe und Ausgabe ergeben sich viel mehr Möglichkeiten und Freiheiten.

Nochmals vielen Dank!

Dein Input hilft uns sehr. Wir sind dabei, die PDF-Idee umzusetzen. Aktuell befinden wir uns aber noch in der groben Planungsphase. Hierbei trennen wir die Eingabe und Ausgabe, wie von dir empfohlen. Wir testen die Schritte gerade erst einmal einzeln (Generator, PDF). Die eigentliche Arbeit geht dann los, wenn wir uns sicher sind, dass eine Vorgehensweise geeignet ist.

Aktuell besteht folgendes Problem mit den PDF-Feldern, wenn sie nach dem Download editiert werden: Die Felder verschieben sich beim Editieren geringfügig nach oben und bleiben auch nach dem Editieren auch verrückt. Das ist durchaus ein Problem, weil das fertige Dokument sehr präzise sein muss.

Könnte es damit zusammenhängen, dass die Schriften nicht "embedded" sind?

Hier unsere Test-Datei:
Anhang anzeigen DnD-Character-Sheet.pdf

Hier das Ergebnis nach dem Download + Editieren:

Zur Info: Die Datei dient erstmal nur zu Testzwecken! Es ist noch nicht alles so, wie es später sein wird. Wir sind noch recht unerfahren mit dem Programmieren von PDF.

Das Hauptproblem ist das

Vielen Dank im Voraus!

Peter

Rossie · 7. August 2017

lkwpeter2 schrieb:
Aktuell besteht folgendes Problem mit den PDF-Feldern, wenn sie nach dem Download editiert werden:

Wie editiert? Soll der Benutzer die PDF editieren können? Ich dachte er gibt die Daten ein und damit wird die PDF erstellt?

lkwpeter2 schrieb:
Könnte es damit zusammenhängen, dass die Schriften nicht "embedded" sind?

Bei mir verschiebt sich nichts. Davon unabhängig müssen, wenn ihr spezielle Schriften verwendet, diese natürlich eingebettet werden, sonst ist das Ergebnis nicht wie gewünscht, wenn man die Schrift nicht installiert hat.

jtkrk · 7. August 2017

soares schrieb:
Wie editiert? Soll der Benutzer die PDF editieren können? Ich dachte er gibt die Daten ein und damit wird die PDF erstellt?

Wir sind mittlerweile dabei, das Hauptaugenmerk auf das Zusammenstellen der einzelnen Sektionen zu richten. Der User soll quasi entscheiden, was er auf seinem Blatt haben möchte. Die Werte trägt er dann erst später in der PDF ein.

Wir werden das dann später wahrscheinlich noch um die Möglichkeit erweitern, dass man die Werte auch online eingeben und speichern kann. Da wir jedoch noch nie mit PDF gearbeitet haben und das komplett hobbymäßig machen, beschränken wir das Projekt erst einmal auf das Wesentliche.

soares schrieb:
Bei mir verschiebt sich nichts. Davon unabhängig müssen, wenn ihr spezielle Schriften verwendet, diese natürlich eingebettet werden, sonst ist das Ergebnis nicht wie gewünscht, wenn man die Schrift nicht installiert hat.

Als Schriftarten verwenden wir nur Standard-Windows-Schriften. Du hast recht, dass diese aktuell nicht eingebettet sind. Habe ich auch gerade festgestellt. Ich selbst verwende jedoch Windows und verfüge somit über die Schriftarten.

Wenn du oben im Feld "Class & Level" (dort wo aktuell "Kleriker(12)" steht) die vorhandene Schrift löschst und dann erneut "Kleriker (12)" reinschreibst, ist die Schrift minimal nach oben verrückt. Selbiges passiert, wenn du in das Feld daneben (mit Unterschrift "Archetyp") "Kleriker (12)" reinschreibst. Irgendwie werden alle eingegebenen Schriften etwas höher dargestellt als die bereits eingetragenen.

[Webdesign] Wie Grafiken mit präzisen Eingabefeldern verbinden?

Lt. Junior Grade

Rear Admiral

Jxn

Gast

Lt. Junior Grade

Jxn

Gast

Lt. Junior Grade

Jxn

Gast

Commander

Lt. Junior Grade

Rear Admiral

Lt. Junior Grade

Commander

Rear Admiral

Lt. Junior Grade

Rear Admiral

Lt. Junior Grade

Rear Admiral

Lt. Junior Grade

Rear Admiral

Lt. Junior Grade