351
edits
→Visualisierung von Daten & Informationen
(Created page with "Im Kurs ging es um die Administration und Visualisierung von verschiedenen Daten. Dazu wurden verschiedene Content-Management-Systeme, vor allem TYPO3 betrachtet, um Daten zu adm...") |
|||
| (7 intermediate revisions by the same user not shown) | |||
| Line 3: | Line 3: | ||
==Landingpage Fingies.io== | ==Landingpage Fingies.io== | ||
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-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]] | |||