Wie Sie eine Webanwendung schon vor der Programmierung erleben
Mit dem Prototyp zur Qualitätssoftware
Wie bereits im Beitrag »Wireframes« beschrieben, verhilft die bildliche Darstellung einer Oberfläche zur Veranschaulichung der zu entwickelnden Anwendung. Wenn nun die Wireframes durch einfaches Einfügen von Aktionen und Animationen eine beispielhafte visuelle Darstellung der Softwarelösung bieten, kann aus einem Wireframe ein Prototyp entstehen. Die Bereitstellung eines Prototyps für den Kunden bietet die Möglichkeit die zukünftige Anwendung weitestgehend zu erleben. Durch klickbare Bereiche und Animationen kann ein Gefühl für den Umgang der Anwendung gegeben werden. Für die Realisierung solcher Prototypen kann die Software Bootstrap Studio eingesetzt werden.
Arbeitsbereiche in Bootstrap Studio
Mit dem Prototyp zur Qualitätssoftware: In Bootstrap Studio werden verschiedene Arbeitsbereiche angeboten. Der linke Bereich unterteilt sich in Studio / Online (oben) und Overview (unten). Über „Studio“ können die bereits enthaltenen Bootstrap-Elemente abgerufen werden. Online bietet Möglichkeit weitere verfügbare Elemente herunterzuladen. Diese Elemente können per Drag&Drop zur Oberfläche hinzugefügt werden.
Hinzugefügte Elemente werden im Bereich Overview angezeigt. Eine visuelle Darstellung der Elemente erfolgt in dem mittleren Bereich der Anwendung. Die Anordnung der hinzugefügten Elemente kann sowohl im Bereich Overview als auch in dem mittleren Bereich geändert werden. Werkzeuge für die Editierung der Elemente, wie Look & Feel, Option, Animation (oben) und Design (unten) werden in dem rechten Bereich angeboten.
Unterhalb der visuellen Darstellung der Elemente stehen die Bereiche HTML (links) und Styles (rechts) zur Verfügung. In jenen sind Formatierungen möglich, dies geschieht durch die Verwendung von Attributen oder js- / css-Dateien.
Anlegen des Prototyps
Der erste Prototyp soll eine Tabelle und ein darauf basierendes Pie Chart darstellen. Hierzu werden erst einmal die dafür benötigten Elemente hinzugefügt und anschließend das Layout des Formulars und der Elemente angepasst.
Für die Suche von Elementen kann das oben links angezeigte Suchfeld verwendet werden. Da eine Autocomplete-Suche integriert ist, wird das gewünschten Elemente schon nach ein paar Tastenschlägen gefunden.
Als erstes wird das Element Container hinzugefügt. Für die Aufteilung des Containers in verschiedene Bereiche wird das Element div benötigt. Der erste Bereich ist für eine Kurzbeschreibung der Seite vorgesehen. Hierfür wird das Element Span in das erste div eingefügt. Außerdem können weitere Elemente wie ein icon (Logo der Firma) oder Navigationselemente nav verwendet werden, um den Prototyp an die Corporate Identity anzupassen.
Im darauffolgenden div können eine Tabelle und ein nebenstehendes Diagramm aufgenommen werden. Somit werden in diesen div eine Zeile – Element row – mit zwei Spalten – Element column – benötigt. In den ersten Spalten fügen wir nun das Element table für die Auflistung der Daten ein. In die zweite Spalte wird das Element chart eingefügt. Ein weiteres div kann dann noch verwendet werden, um weitere Elemente, z.B. einen Bemerkungstext oder Buttons einzubinden.
Styling der Webanwendung
In diesem Schritt werden die Bezeichnungen und Formatierungen der Elemente vorgenommen.
Für die meisten Elemente kann die Bezeichnung in dem mittleren Arbeitsbereich über einen Doppelklick (Span, Radio with label, Button und Link) geändert werden. Für das Element Select wird die Änderung der Item-Bezeichnungen im Bereich Option ermöglicht.
Nach der Auswahl eines Elements werden in diesem Bereich auch die Werkzeuge für die Formatierung des jeweiligen Elements angezeigt. Die folgende Tabelle enthält eine kurze Beschreibung der Bereiche inkl. Beispiel:
| Bereich | Beschreibung | Beispiel |
| Look & Feel | Sichtbare Änderung am Element | Schriftfarbe |
| Options | Eigenschaft des Elements | Anordnung des Elements |
| Animation | Animation eines Elements | Wackeln beim Hover-Effekt |
Um z.B. den Abstand zwischen divs oder rows zu definieren, kann dem jeweiligen Element über Look & Feel ein Margin Top und Margin Bottom, unter Angabe von Pixeln, mitgegeben werden. Durch die Anzeige in der Mitte und die Preview im Browser kann live verfolgt werden, was die Änderungen genau bewirken.
Webanwendungen mit Responsive Design
Die Erstellung von Prototypen mit der Software Bootstrap Studio ist für jedermann möglich. Das Hinzufügen von Elementen wird durch die einfache Funktion des Drag & Drop realisiert. Formatierungen erweisen sich durch vorgegebene Werkzeuge ebenso leicht. Das Lernen von Programmiersprachen ist für die Verwendung von Bootstrap Studio nicht erforderlich. Ein paar hilfreiche Tipps und Tricks werden in der Bootstrap Documentation bereitgestellt. Durch learning by doing können weitere Kniffe entdeckt und kombiniert werden. Für die Nutzung von Bootstrap Studio wird eine Lizenz und ein Webbrowser für die Anzeige der Preview vorausgesetzt. Die Erstellung eines Prototyps kann durch die Verwendung eines leeren Designs oder ein Template gestartet werden.
Wer über HTML Wissen verfügt, hat bei der Verwendung von Bootstrap Studio noch ein paar weitere Vorteile. Über den Bereich „HTML“ -> „Attributes“ können Formatierungen einzelner Elemente über das Hinzufügen von Klassen vorgenommen werden. Für die Definition von eigenen Formatierungen oder Funktionen kann der Bereich „Styles“ verwendet werden. Hier können bereits erstellte js- oder css-Dateien in Bootstrap Studio importiert und übernommen werden. Nach Fertigstellung eines zufriedenstellenden Prototyps können die mit Bootstrap Studio erstellten css-Styles auch für die anschließende Programmierung verwendet werden.
Bootstrap Studio bietet nicht nur die Möglichkeit der Erstellung von Prototypen für Webanwendungen im Desktop Format. Darüber hinaus wird hier auch das Augenmerk auf das Responsive Design von Webseiten und Webanwendungen gelegt. Die Elemente können mit den jeweiligen Formatierungen für das Responsive Design definiert werden. So kann im Webbrowser die Vorschau sowohl für die Desktop- als auch die mobile Ansicht angesehen werden.
Durch die Anwendung von Bootstrap Studio wird der Prozess der stetigen Abstimmung stark vereinfacht und schützt beide Seiten vor unangenehmen Überraschungen. Dieses und andere Werkzeuge sind darum für uns das Mittel der Stunde, um in der Konzeptphase gemeinsam mit unserem Kunden die Funktionalitäten und das Aussehen einer Anwendung zu besprechen.
Links
| Bootstrap Studio | https://bootstrapstudio.io/ |
| Bootstrap Documentation | https://getbootstrap.com/docs/4.3/getting-started/introduction/ |