351
edits
→Visualisierung von Daten & Informationen
| (5 intermediate revisions by the same user not shown) | |||
| Line 4: | Line 4: | ||
Als erste Aufgabe wurde eine neue Landingpage für die Fingies Plattform entworfen und mit grundlegenden Webtechnologien umgesetzt. Auf dessen Grundlage erarbeiteten wir unser eigenes kleines CMS. | Als erste Aufgabe wurde eine neue Landingpage für die Fingies Plattform entworfen und mit grundlegenden Webtechnologien umgesetzt. Auf dessen Grundlage erarbeiteten wir unser eigenes kleines CMS. | ||
[[File:tw-fingies-landingpage.jpg|200px]] | [[File:tw-fingies-landingpage.jpg|200px]] [[File:tw-fingies-landingpage-phpadmin.jpg|200px]] | ||
==Übersicht Content Management Systeme== | |||
Da die Umsetzung eines eigenen CMS mit vielen Schwierigkeiten einherkommt, ist man auf ein herkömmliches System zurückgreift. Hier ein Überblick über verbreitete CM Systeme: | |||
* TYPO3 | |||
* TYPO3 NEOS | |||
* Contao | |||
* Joomla! | |||
* WordPress | |||
* Drupal | |||
* u.v.m. | |||
==Umsetzung der Landingpage in TYPO3== | |||
Die Landingpage der Fingies Plattform wird im Unieigenen TYPO3 umgesetzt. Dabei sollte jeder Kursteilnehmer einen Teil der Webseite bauen, z.B. das Kontaktformular: | |||
[[File:tw-fingies-kontakt-1.jpg|200px]] | |||
[[File:tw-fingies-kontakt-2.jpg|200px]] | |||
==Visualisierung von Daten & Informationen== | |||
Um Daten schnell und schön darstellen zu können haben wir mit der JavaScript Bibliothek "Highcharts" gearbeitet. Sie visualisiert insbesondere Grafen, Diagramme und andere Informationsgrafiken und sorgt für eine gute User Experience. | |||
Angular.js sorgt mit wenig Code eine große Wirkung beim Nutzer. | |||
Im folgenden Beispiel steigt der Wasserstand der Pflanze je mehr Fingies Boxen aktiv sind. | |||
[[File:tw-fingies-blume.jpg|200px]] | |||
Diese Anwendung funktioniert ähnlich, nur dass als Input das Mikrophon verwendet wird. Je lauter das Umgebungsgeräusch ist, desto länger wird Pinocchios Nase. | |||
[[File:tw-fingies-pinocchio.jpg|200px]] | |||