Änderungsvorschläge von Raphael für die Design/UI-Dokumente

ProjektAdLer · Jul 23, 2024 · 62110a0 · 62110a0
1 parent 3328a1a
commit 62110a0
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 89 deletions.
diff --git a/AdLerDokumentation/Writerside/topics/Bedienkonzept-Engine.md b/AdLerDokumentation/Writerside/topics/Bedienkonzept-Engine.md
@@ -31,23 +31,23 @@
 ### Allgemeines
 
 - Die Bedienung der Engine in 3D soll möglichst intuitiv, einfach zu erlernen und nutzerfreundlich sein. 
-- Die Nutzenden erhalten die Kontrolle über den Charakter und können mit Objekten in der 3D-Szene interagieren.
+- Die Nutzenden erhalten die Kontrolle über den Charakter und können mit Objekten in der 3D-Szene interagieren. [//]: # (TODO: RR: „Charakter" oder „Avatar“ - kommt glaube ich beides vor in der Doku?)
 
 ### Steuerung
 
-- Die Bedienung kann über Maus und/oder Tastatur erfolgen.
-- Der Charakter lässt sich über die "Click to Move" Steuerung bewegen. 
+- Die Bedienung kann über Maus und/oder Tastatur oder über Touch erfolgen.
+- Der Charakter (Avatar?) lässt sich über die "Click to Move"-Steuerung bewegen. 
 - Interaktive Objekte innerhalb der 3D-Szene lassen sich über Klicks starten.
 - Das Starten von interaktiven Objekten ist nur in einer bestimmten Distanz zum Avatar möglich
 
 ### Kamera
 
 - Die Kamera ermöglicht einen guten Überblick über die gesamte 3D-Szene 
 - Die Kamera ist möglichst einfach zu steuern, idealerweise bewegt sie sich automatisch
-- Zur detaillierten Betrachtung der 3D Objekte ist die Kamera zoombar
+- Zur detaillierten Betrachtung der 3D-Objekte ist die Kamera zoombar
 
 ### Benutzeroberfläche (UI)
 
-- Wichtige Informationen wie Lernraumname, Lernraumfortschritt und Lernziele sind direkt am Bildschirmrand ersichtlich 
+- Wichtige Informationen, wie Lernraumname, Lernraumfortschritt und Lernziele sind direkt am Bildschirmrand ersichtlich 
 - Die Navigation zu anderen Programmbereichen erfolgt schnell und intuitiv über ein übersichtliches Menü
 
diff --git a/AdLerDokumentation/Writerside/topics/Design-Engine.md b/AdLerDokumentation/Writerside/topics/Design-Engine.md
@@ -1,3 +1,4 @@
 # Design
 
-Start typing here...
+Start typing here...
+,[//]: # (TODO: RR: noch ergänzen?)
diff --git a/AdLerDokumentation/Writerside/topics/GraphicalUserInterface_AuthoringTool.topic b/AdLerDokumentation/Writerside/topics/GraphicalUserInterface_AuthoringTool.topic
@@ -338,6 +338,7 @@
 
             <p><u>Element-Karte/Slots:</u></p>
                 <img src="imageAuthoringToolOberflaechenElementKarteSlots.png" alt=""/>
+            [//]: # (TODO: RR: Dieser Button hat einen schlechten Kontrast, daher ev. nicht barrierefrei)
             <p>Breite der Element-Karte/Slots bei Breite X des Autorentools:</p>
                 <list>
                     <li>72px bei 640px (sm)</li>
@@ -410,7 +411,7 @@
                 <step>
                 <p>
                     <control>Die Sortierung der Elemente innerhalb der hierarchischen Darstellung des Autorentools muss
-                        standardmäßig wie folgt sein.
+                        standardmäßig wie folgt sein:
                     </control>
                 </p>
 
@@ -449,7 +450,7 @@
     <step>
             <p>
                 <control>Die Gestaltung der erstellten und importierten Lernwelt (Lernwelt-Karte) auf der Startseite
-                    muss wie folgt sein.
+                    muss wie folgt sein:
                 </control>
             </p>
         <p><u>Lernwelt-Karte:</u></p>
@@ -473,7 +474,7 @@
     </step>
     <step>
                 <p>
-                    <control>Die Gestaltung der linken und rechten Sidebar muss wie folgt sein.</control>
+                    <control>Die Gestaltung der linken und rechten Sidebar muss wie folgt sein:</control>
                 </p>
 
     <p><u>Linke und Rechte Sidebar:</u></p>
@@ -486,7 +487,7 @@
     <step>
                 <p>
                     <control>Der Erstellungsdialog zu Lernwelt/Lernraum/Storyelement/Lernelement/Adaptivitätselement in
-                        der linken Sidebar muss standardmäßig wie folgt sein.
+                        der linken Sidebar muss standardmäßig wie folgt sein:
                     </control>
                 </p>
 
@@ -504,7 +505,7 @@
 
             <p><u>Infotext:</u></p>
                 <list>
-                    <li>Text: * Erforderliche Angabe (bei deutscher Spracheinstellung)</li>
+                    <li>Text: "* Erforderliche Angabe" (bei deutscher Spracheinstellung)</li>
                     <li>Textfarbe: <a href="#adlergrey-200" summary="rgb(204,204,204)" alt="">adlergrey-200</a></li>
                     <li>Textgröße: 12px</li>
                     <li>Position des Textes: links oben</li>
@@ -523,7 +524,7 @@
     </step>
             <step>
                 <p>
-                    <control>Die Gestaltung des Grundrisses im mittleren Fenster muss wie folgt sein.</control>
+                    <control>Die Gestaltung des Grundrisses im mittleren Fenster muss wie folgt sein:</control>
                 </p>
         <p><u>Grundriss:</u></p>
                 <img src="imageAuthoringToolOberflaechenGrundrissMittleresFenster.png" alt=""/>
@@ -535,7 +536,7 @@
             </step>
             <step>
                 <p>
-                    <control>Die Farbe der Icons muss wie folgt sein.</control>
+                    <control>Die Farbe der Icons muss wie folgt sein:</control>
                 </p>
         <p><u>Erlaubte Farben:</u></p>
                 <list>
@@ -547,7 +548,7 @@
             </step>
             <step>
                 <p>
-                    <control>Die Gestaltung der Elementkarten muss wie folgt sein.</control>
+                    <control>Die Gestaltung der Elementkarten muss wie folgt sein:</control>
                 </p>
         <p><u>Elementkarten:</u></p>
                 <img src="imageAuthoringToolOberflaechenElementkarten.png" alt=""/>

diff --git a/AdLerDokumentation/Writerside/topics/Styleguide-2D-Engine.md b/AdLerDokumentation/Writerside/topics/Styleguide-2D-Engine.md
@@ -6,32 +6,32 @@ Dieser **Styleguide** beschreibt die in der Umsetzung der AdLer-Engine zu verwen
 
 ### Farben
 
-#### Farbenzuordnung AdLerEngine
-
-| Name                 | HEX / RGB Code | Beschreibung                           |
-|----------------------|----------|----------------------------------------|
-| babylonbg:           | #33334d | Babylon Default Hintergrundfarbe       |
-| blacktrans           | rgba(0,0,0,0.5) | Schwarz mit 50% Transparenz zur Abdunklung der Hintergründe von Modals
-| whitetrans           | rgba(255,255,255,0.3) | Weiß mit 30% Transparenz
-| adlerblue            | #a1c8e5 | Blau
-| adlerdarkblue        | #172d4d | Dunkelblau
-| adlergreen           | #59b347 | Grün
-| buttonbgblue         | #e9f2fa | Hintergrundfarbe für Buttons
-| buttonpressedblue    | #ace8fc | Hintergrundfarbe für Buttons im Zustand nachdem sie geklickt wurden
-| adlertextgrey        | #111111 | Textfarbe
-| adlerbuttonlocked    | #b9bfc6 | Farbe zur Kennzeichnung nicht benutzbarer Buttons
+#### Farbenzuordnung in der AdLer-Engine
+
+| Name               | HEX / RGB Code | Beschreibung                           |
+|--------------------|----------|----------------------------------------|
+| babylonbg          | #33334d | Babylon Default Hintergrundfarbe       |
+| blacktrans         | rgba(0,0,0,0.5) | Schwarz mit 50% Transparenz zur Abdunklung der Hintergründe von Modals
+| whitetrans         | rgba(255,255,255,0.3) | Weiß mit 30% Transparenz
+| adlerblue          | #a1c8e5 | Blau
+| adlerdarkblue      | #172d4d | Dunkelblau
+| adlergreen         | #59b347 | Grün
+| buttonbgblue       | #e9f2fa | Hintergrundfarbe für Buttons
+| buttonpressedblue  | #ace8fc | Hintergrundfarbe für Buttons im Zustand nachdem sie geklickt wurden
+| adlertextgrey      | #111111 | Textfarbe
+| adlerbuttonlocked  | #b9bfc6 | Farbe zur Kennzeichnung nicht benutzbarer Buttons
 | adlerdeactivatedtext | #e9e9e9 | Textfarbe für Texte in nicht benutzbaren Buttons
-| adlerbggradientfrom  | #a1c8e5 | Startfarbe (Blau) des Hintergrundverlaufs der Menüs
-| adlerbggradientto    | #e2eaf2 | Zielfarbe (Hellblau) des Hintergrundverlaufs der Menüs
-| nodehandlecolor      | #e9d6b3 | Farbe der einzelnen Nodes in der Graphansicht des Lernweltmenüs
-| adleroceanblue       | #45a0e5 | Farbe zur Hervorhebung von Links
+| adlerbggradientfrom | #a1c8e5 | Startfarbe (Blau) des Hintergrundverlaufs der Menüs
+| adlerbggradientto  | #e2eaf2 | Zielfarbe (Hellblau) des Hintergrundverlaufs der Menüs
+| nodehandlecolor    | #e9d6b3 | Farbe der einzelnen Nodes in der Graphansicht des Lernweltmenüs
+| adleroceanblue     | #45a0e5 | Farbe zur Hervorhebung von Links
 
 ### Texte
-#### Ansprache der Rezipienten
+#### Ansprache der Nutzenden
 Das AdLer-Projekt steht für ein inklusives Miteinander aller Menschen ein. Aus diesem Grund verwenden wir in der textlichen Ansprache von Personen, eine neutrale Sprache. Aus Lehrern wird Lehrende, aus Studenten wird Studierende. Ist die Bildung eines Worts mit der Endung „-ende“ nicht möglich, so wird im zweiten Schritt geprüft, ob sich eine Ansprache mit dem Anhang „-person/en“ realisieren lässt (Bsp.: **Lehrpersonen**).
 
 #### Art zu Schreiben
-Wir stellen den Nutzer in den Mittelpunkt der Entwicklung unserer Anwendung. Auch das geschriebene Wort soll nutzerzentriert sein. Wir verwenden Sprache, die so einfach wie möglich und gleichzeitig so detailliert wie nötig ist. Kurze prägnante Sätze, optische Hervorhebungen zur Leitung der Aufmerksamkeit des Nutzers, Verwendung von Aufzählungen mit Bulletpoints oder nummerierten Aufzählungen, wo möglich.
+Wir stellen die Nutzenden in den Mittelpunkt der Entwicklung unserer Anwendung. Auch das geschriebene Wort soll nutzerzentriert sein. Wir verwenden Sprache, die so einfach wie möglich und gleichzeitig so detailliert wie nötig ist. Kurze prägnante Sätze, optische Hervorhebungen zur Leitung der Aufmerksamkeit der Nutzenden, Verwendung von Aufzählungen mit Bulletpoints oder nummerierten Aufzählungen, wo möglich.
 
 #### Verwendung des/der Logos
-Das Logo ist in seinen verschiedenen Ausführungen auf der Cloud zu finden. Nach Möglichkeit sollten zur Bildschirmdarstellung die Vektorgrafiken (.svg) bevorzugt genutzt werden, da diese unendlich skalierbar sind. Ist dies nicht möglich werden die Pixeldateien (.png) verwendet.
+Das Logo ist in seinen verschiedenen Ausführungen auf der AdLer-Cloud zu finden. Nach Möglichkeit sollten zur Bildschirmdarstellung die Vektorgrafiken (.svg) bevorzugt genutzt werden, da diese beliebig skalierbar sind. Ist dies nicht möglich werden die Pixeldateien (.png) verwendet.