Fakultät ET/IT, Institut für Automatisierungstechnik, Professur für Prozessleittechnik Päsentation zur Belegarbeit: XML & Web Angela Wobar

Präsentation zum Thema: "Fakultät ET/IT, Institut für Automatisierungstechnik, Professur für Prozessleittechnik Päsentation zur Belegarbeit: XML & Web Angela Wobar"—  Präsentation transkript:

1 Fakultät ET/IT, Institut für Automatisierungstechnik, Professur für Prozessleittechnik Päsentation zur Belegarbeit: XML & Web Angela Wobar 29.07.20161 XML & Web Angela Wobar

2 1.Einordnung 2.Anforderungen 3.Vorgehen 4.D3js 5.Auswertung 6.Vorstelllung der Lösung 2 Gliederung XML & Web Angela Wobar 29.07.2016

3 Warum modellgetriebene Softwareentwicklung? Ziel der Arbeit ist die generische Erstellung einer Prozessvisualisierung 3 Einordnung XML & Web Angela Wobar 29.07.2016

4 Funktionale Anforderungen F1 Die Prozessvisualisierung soll eine grafische Darstellung der Prozesswerte enthalten F2 Die Prozessvisualisierung soll eine tabellarische Darstellung der Prozesswerte enthalten F3 Die dargestellten Werte sollen zyklisch mittels WebServices aktualisiert werden Qualitätsmerkmale Q1 Die Clientanwendung kann plattformunabhängig verwendet werden Q2 Die Clientanwendung soll moderne Webstandards umsetzen und möglichst intuitiv bedienbar sein Q3 Die zu erstellende Transformation soll umgebungsunabhängig implementiert werden Q4 Die Verwendung der Transformation und damit der Clientanwendung kann unabhängig von der vorhandenen Kleinversuchsanlage erfolgen. 4 Anforderungen XML & Web Angela Wobar 29.07.2016

5 Erstellung einer XSD zur Validierung einer XML -> daraus wird via XSL Transformation eine HTML Seite geschaffen 5 Vorgehen XML & Web Angela Wobar 29.07.2016

6 XML-Schema: 6 Vorgehen XML & Web Angela Wobar 29.07.2016

7 XML-Schema: 7 Vorgehen XML & Web Angela Wobar 29.07.2016

8 Entwicklung einer Webbasierten Lösung unter Verwendung von jQuery, HTML5, CSS3 Unterstützung von responsive Webdesign Font Awesome Icons und jQuery UI Themeroller zur einfachen Anpassbarkeit des Aussehens Einbinden grafischer Elemente unter Verwendung von D3js 8 Vorgehen XML & Web Angela Wobar 29.07.2016

9 JavaScript Bibliothek zur Manipulation von datenbasierten Dokumenten unter Nutzung von HTML, SVG, CSS 9 D3 js - DataDrivenDocuments XML & Web Angela Wobar 29.07.2016 Quelle: https://d3js.org

10 Bietet Methoden zur einfachen, performanten und dynamischen DOM-Manipulation 10 D3 js XML & Web Angela Wobar 29.07.2016

11 Für die Prozessvisualisierung: Nutzung eines Projekts der D3-Community: D3 Liquid Fill Gauge Erstellung einer eigenen Funktion zur Darstellung von index- basierten Liniendiagrammen: lineChart.js 11 D3 js XML & Web Angela Wobar 29.07.2016

12 Funktionelle Anforderungen konnten erfüllt werden Qualitative Anforderungen nur teilweise: Q1 und Q2 erfüllt (durch Entwicklung einer intuitiv nutzbaren Webanwendung) Responsive Web nur teilweise umsetzbar (abhängig von zugrundeliegender XML) Q4 (Unabhängigkeit von der Kleinversuchsanlage) konnte nicht erfüllt werden 12 Auswertung XML & Web Angela Wobar 29.07.2016

13 13 Vorstellung des Ergebnisses XML & Web Angela Wobar 29.07.2016

14 1429.07.2016 XML & Web Angela Wobar