Westphal, Tobias: Difference between revisions

From Medien Wiki
No edit summary
 
Line 24: Line 24:


==Visualisierung von Daten & Informationen==
==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]]

Latest revision as of 09:39, 28 July 2014

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 administrieren. Für die Visualisierung von Daten, wurden Frameworks wie jQuery, Angular.js, Bootstrap und die Fingies Plattform genutzt.

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.

Tw-fingies-landingpage.jpg Tw-fingies-landingpage-phpadmin.jpg

Ü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:

Tw-fingies-kontakt-1.jpg Tw-fingies-kontakt-2.jpg

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.

Tw-fingies-blume.jpg

Diese Anwendung funktioniert ähnlich, nur dass als Input das Mikrophon verwendet wird. Je lauter das Umgebungsgeräusch ist, desto länger wird Pinocchios Nase.

Tw-fingies-pinocchio.jpg