Forschung & Lehre

Mockup2Markup

Dialog über schlaue Designimplementierung im Web

diagramm

Mockup2Markup ist ein Forschungsvorhabens im Rahmen der Medieninformatik an der TH Köln. Ziel ist die Installation einer online Gesprächsrunde rund um den Übergang vom non-funktionalen Prototyp zu geschmeidigem HTML Markup. Das Vorhaben richtet sich an Frontend-Entwickler und Designer, die Interesse und Spaß an eleganten Design-Implementierungen in HTML, CSS und Javascript haben.

Mehr zu diesem Projekt gibt es unter http://cnoss.github.io/mockup2markup/

Christian

Digitale Kommunikation

Wahlpflichtfach im Sommersemester 2017

photocase153819618724

Dieses Modul befasst sich mit verschiedenen Perspektiven der digitalen Kommunikation und bietet Platz zum entwickeln und ausprobieren eigener Ansätze und Lösungen in diesem Themenfeld. Das Modul hat eine hohe Praxisorientierung. Als Voraussetzung sollten Sie die Module "Grundlagen der visuellen Kommunikation" und "Audiovisuelle Medienprojekt" erfolgreich abgeschlossen haben. Auch die erfolgreich abgeschlossenen Module "Web-basierte Anwendungen 1 + 2" und "Computergrafik und Animation" erhöhen Ihre Handlungsfähigkeit in diesem Modul.

Eingesetzte Software:

Sketch, Figma, Flinto, Illustrator; Web-Development Tools; AV-Tools;

Lernziele:

Das Modul konzentriert sich auch die Entwicklung und Erweiterung der Medienkompetenz der Teilnehmer. Dabei werden die folgenden Lernziele adressiert:

Die Studierenden können, auf Basis einer gegebenen Zielsetzung und eines vorhandenen Kontextes (organisationale, soziale, gestalterische und kulturelle Kontexte, Vorgaben und Regeln) Kommunikationsziele entwicklen und dokumentieren, um eine Strategie für ein Gestaltungsprojekt zu verstehen, als auch entwerfen und diskutieren zu können.

Die Studierenden können die Perspektive der Medienkonzeption einnehmen, haben eine mediengestalterische Grundkompetenz entwickelt und sind in der Lage, bezüglich der erarbeiteten Kommunikationsziele, eine geeignete Medienauswahl zu treffen und auf Basis dieser Auswahl und der Zielsetzung passgenaue Mediengestaltungen zu erarbeiten.

Die Studierenden kennen die Gestaltungsdimensionen von Medien und besitzen aktive Vokabularien zur Beschreibung und Realisierung angemessener Konzeptionen, um aus einem Konzept eine konkrete und professionelle Realisierung zu erarbeiten.

Leistungen:

Projekt mit Projektpräsentation und Kurzdokumentation.

Themen:

In diesem Semester gibt es bislang zwei potenzielle Themen:

  • Relaunch der Medieninformatik
  • Kommunikationsmaßnahmen für den Lernort Metabolon

Termine:

Das Modul startet mit einer Blockveranstaltung in der ProfiL2 Projektwoche (15.05. bis 19.05.). Erster Termin ist der 15.05. um 10:00 Uhr im Medieninformatik Studio.

Christian

Internationales WebDev-Projekt vom 01. bis 09. März 2017

Studentisches Web-Projekt in Kooperation mit anderen europäischen Hochschulen

java-script-web-internet-code-html-computer-1785541

Zusammen mit einigen europäischen Hochschulen möchten wir ein internationales Web Development Projekt starten. Mit dabei sind: Bobigny (Frankreich), Athens, Greece (Technological Education Institution of Athens), Sofia, Bulgaria (Technical University of Sofia), Coimbra, Portugal (Universidade de Coimbra), Eindhoven, Netherlands (Fontys Hogescholen) und wir.

Das Ganze wird komplett online abgewickelt und richtet sich an Bachelor Studierende mit Spaß und Skills in den Bereichen Web-Development, Design & Marketing. Wir brauchen mindestens acht Teilnehmer um mitmachen zu können. Aus den Teilnehmern der verschiedenen Länder werden dann internationale Teams gebildet. Ein super Projekt um mal internationale Projektluft zu schnuppern. Wir können das als QQ-Projekt und ggf. als WPF anrechnen.

Dieses Projekt wird an der Université Paris 13 (https://www.univ-paris13.fr/) im Bereich WebDesign/Marketing schon seit ein paar Jahren durchgeführt, allerdings nur lokal, also ohne internationale Beteiligung. Das Projekt ist ein Sprintprojekt von10 Tagen und in der Regel wird ein non-kommerzielles Web-Projekt bearbeitet. Im letzten Jahr war es Konzeption und Entwicklung eines Alumninetzwerks.

Die Teilnehmer aus Paris (etwa 48) sind im zweiten Studienjahr. Bei den anderen Teilnehmern weiß ich es nicht. Es werden nationen-gemischte 4ter Teams gebildet und das Projekt wird im Wesentlichen eigenständig bearbeitet. Vormittags gibt es anfangs etwas support/ input. Das Ganze wird am 09. März präsentiert/ verteitigt und das wars :)

Für diejenigen, die das als QQ-Projekt (QQ2) machen wollen, wären wir damit durch. Ich bräuchte nur einen KLEINEN Projektbericht, max 5 Seiten. Was da genau drin steht, müssten wir noch besprechen.

Wer das als WPF machen will, da müssten wir noch was drauf satteln, sonst reicht der Workload nicht. Was das konkret ist, müssen wir auch noch besprechen. Auf dem Zeugnis würde das als WPF „Digitale Kommunikation“ landen.

Es gibt auf jeden Fall eine hübsche Urkunde für die Bewerbungsunterlagen.

Vorabtreffen ist am 22.02. um 11:00 Uhr in Gummersbach oder via Skype.

Wer mitspielen will, bitte hier eintragen:
https://www.medieninformatik.th-koeln.de/w/International_WebDev_Project

Christian

virtuelles museum // kölner sport

Die Stadt, der Sport, die Geschichte - Kölner Sport im Web

Innerhalb dieses Vorhabens begaben sich die Fakultäten für Architektur, Angewandte Sozialwissenschaften sowie Informatik und Ingenieurwissenschaften der TH Köln sowie das Institut für Sportgeschichte der Deutsche Sporthochschule Köln auf die Suche nach einer angemessenen und innovativen Vermittlungsform des Themas Sportgeschichte, die gleichermaßen anschaulich, ansprechend und wissenschaftlich fundiert ist. Der Begriff des Museums wurde dabei bewusst gewählt, um die Wertigkeit bei der Vermittlung von Geschichte hervorzuheben. Das interdisziplinäre Projekt wurde über den Zeitraum von April 2008 – März 2012 von der RheinEnergie – Stiftung finanziell gefördert. Entstanden sind verschiedene Aktionen, Ausstellungen und die

prototypische Umsetzung des Konzepts am Beispiel des Müngersdorfer Sportparks.

http://virtuelles-sportmuseum.de

Christian

Different

Videowettbewerb zu HONK

HONK ist eine Adaption von Andersens „Die Geschichte vom hässlichen Entlein“. Ein Musical über das ‚Flügge-werden’: Wer bin ich eigentlich? Warum bin ich anders als die Anderen? Und was ist eigentlich schön an mir? Diese Fragen der Kindheit, der Pubertät und auch des Erwachsen-Seins beantwortet HONK mit einer anrührenden Geschichte, witzigen Texten und hinreißender Musik.

In Kooperation mit dem Musical-Projekt Oberberg und dem Ministerium für Familie, Kinder, Jugend, Kultur und Sport des Landes Nordrhein-Westfalen wurde der Umgang mit der Fragestellung des Anders-Seins als bundesweiter Video-Wettbewerb ausgerufen. Kinder, Jugendliche und Erwachsene wurden aufgefordert eigene kreative Beiträge in Form von Videos zu produzieren und im Rahmen des Wettbewerbs zu veröffentlichen. Die Ergebnisse aus dem Wettbewerb und ergänzenden Workshops bildeten die Grundlage für eine spätere Inszenierung des Musicals HONK. Regie und die ca. 20 DarstellerInnen setzten sich mit den Ergebnissen auseinander, ließen sich davon inspirieren und übernahmen einige Teile. Die erstellten Videos ergänzten das Bühnengeschehen. Innerhalb des Vorhabens wurde der komplette Teil der digitalen Kommunikation vom Lehr- und Forschungsgebiet Medieninformatik übernommen.

Christian

Atomic Design

Wie bekommen wir diesen Ansatz schlau in unsere Workflows und Systeme?

Mit der Methodologie Atomic Design Atomic Design hat Brad Frost zwar keine wirklich neue Herangehensweise an das Thema Webdesign/-development entwickelt, aber er hat den Grundgedanken der Modularität in ein sehr schönes und hilfreiches Bild überführt. Danke dafür.

In den letzten Monaten bin ich diesem Grundgedanken in verschiedenen Projekten gefolgt, und bin immer wieder überrascht wir gut und sauber die daraus resultierenden Designimplementierungen sind. Ich habe den Ansatz bislang im CMS Kirby und zum Einsatz in Web-Apps und Hybriden Apps in Ractive.js implementiert und werde demnächst mehr von den Erfahrungen berichten. Aber es gibt noch eine Menge zu tun. Daraus bilden sich eine Reihe von sehr interessanten Fragestellungen für Abschlussarbeiten aller Art. Hier mal ein paar Beispiele:

  • (Wie) lassen sich die Atomic Design und der Responsive Design Workflow von Stephan Hay verbinden?
  • Wie lassen sich Atomic Design und Living Styleguide clever kombinieren?
  • Wie könnte Atomic Templates in anderen CMS und JS Frameworks funktionieren?
  • Wie lassen sich Dateistrukturen von Atomic Templates möglichst übersichtlich gestalten?
  • Lassen sich Atomic Design Templates, Content Inventories und Living Styleguides verbinden?
  • Wie sieht eine sinnvolle Kombination von Atomic Design und verschiedenen modularen CSS Ansätzen aus?

Wer also Lust hat hier mitzuwirken, möge mich ansprechen :)

Christian

Flex-o-Struk

2005, Universität Duisburg Essen / Klickmeister GmbH

In diesem vom BMWA geförderten Projekt entwickelt das Institut für Ergonomie und Designforschung(IED) zusammen mit dem Fraunhofer Institut, der RWTH Aachen und sieben Partnern aus der Industrie eine neuartige Fertigungszelle und Prozesskette zur schnellen und flexiblen Herstellung von Designstrukturen auf Werkzeugoberflächen. Das Entwicklungsergebnis wird der Branche Werkzeug- und Formenbau neue Fertigungsmöglichkeiten und eine Erweiterung ihres Produktspektrums eröffnen. Das IED erarbeitet im Rahmen dieses Projekts neue Oberflächendesignstrukturen, erstellt 3D-Texturen in 3D-CAD-Programmen und entwickelt mit den Partnern eine durchgängige Prozesskette von der Entwicklung neuer Strukturen bis hin zur Herstellung auf Werkzeugoberflächen

Christian

The MHP Knowledge Project

2004, Universität Duisburg Essen

In diesem europäischen Verbundprojekt wurden in Kooperation mit dem Institute for Computer Science and Business Information Systems der Universität Duisburg-Essen Gestaltungskriterien und -empfehlungen für die Entwicklung von Anwendungen für die Multimedia Home Plattform (MHP) entwickelt. Ergebnis des Vorhabens ist eine umfangreiche Sammlung zur Unterstützung von MHP Entwicklern. Die Sammlung wird auf unterschiedliche Arten bereit gestellt, als zusammenhängendes druckbares Dokument, als durchsuchbare Hilfe mit Stichwort- und Volltextsuche sowie Querverweisen und als Validator mit dessen Hilfe MHP Anwendungen überprüft werden können.

Christian