Demo of `data-rel-position`

This demo use data-rel-position="relative"
and data-rel-rotate-x/y/z
to easy 3D positioning of slides.

Mein Auftrag für heute

Eindruck meiner Person vermitteln, meine fachliche Expertise darstellen
und meine Vorstellungen zur Ausgestaltung der Professur erläutern.

Gewünschte Bausteine

Kurze Vorstellung meiner Person und meines beruflichen Werdegangs in englisch

Konzept zur Vermittlung von Programmier- und Technologiekenntnissen

Vorstellung von ein bis zwei eigenen Projekten mit Fokus auf technische Umsetzung und gestalterische Schnittstellen

Darstellung, wie Prozesse und Methoden der Produktentwicklung in meine Lehre integriert werden können

30 min

?

Christian Noss

born in 1972 in Gummersbach

first Computer in 1985 – Atari 800XL

Industrial Design at the University of Duisburg-Essen

Working student at ERCO Leuchten GmbH in the Marketing department

Founded Klickmeister GmbH in 2001 working with clients such as ERCO, Deutsche Bahn, bulthaup and others in the fields of design and development

Certified designer degree with thesis topic «e-Dötzchen and Klickmeister. Design strategies for user groups with varying levels of experience» supervised by Prof. Dr. Ralph Bruder and Prof. Claudius Lazzeroni in 2001

Research assistant at the Institute for Ergonomics and Design Research at the University of Duisburg-Essen for 5 years

Professorship for Communication Design in Media Informatics at the University of Applied Sciences of Cologne (TH Köln) primarily teaching design fundamentals, web technologies and front-end development.

Contribution to the recommendations for the curriculum for bachelor's degree programs in media informatics at the Gesellschaft für Informatik, Media Informatics Section, in 2017

Participation in the development team for the model study program Code & Context at TH Köln

Part of the Cranach Digital Archive research team since 2018, interdisciplinary cooperation project between TH Köln, Kunstpalast Düsseldorf, University of Marburg, and others

Detailed information: christiannoss.de/vita

Programmieren in der Gestaltung

Programmierung | im | Design

Design oder Gestaltung?

«Hochschule für Gestaltung meint dabei mehr als nur Design im heutigen Sinne – es geht um die Gestaltung der menschlichen Umwelt. Denn letztlich geht es um die Frage, wie der Mensch mit seiner Umwelt interagiert – und wie er sie gestaltet.»
Prof. Dr. Dagmar Rinker

Programmieren oder Programmierung?

Programmierung Substantiv, ist statisch, benennt, fixiert

programmieren Verb, bewegt sich, ist dynamisch, beschreibt eine Tätigkeit, ist ein Werden

Programmieren in der Gestaltung

Es geht um das Gestalten mit und durch Programmieren und somit die Erweiterung des gestalterischen ~~Denkens~~ Repertoires um algorithmische und technologische Mittel.

./images/hfg-triade.jpg — https://www.hfg-gmuend.de/hochschule/geschichte

Wir wollen sicherstellen, dass unsere Studierenden ein Höchstmaß an Professionalität erreichen und eine aktive Rolle im Sinne der Nutzer:innen von Gestaltungsdienstleistungen einnehmen.

./images/t-shaped-04.png — Introduced by David Guest in 1991,
coined by Tim Brown 15 years later.

./images/t-shaped-01.png — Vielleicht passend für die HFG – Gestaltung, Technologie & Wissenschaft

./images/digital-product-team.png — Ideales Team, DB Reisendeninformation 2016

./images/digital-product-t-shaped-team.png — Ideales Team, DB Reisendeninformation 2016

./images/bitkomm-phi.png — Rollenideal «Digital Design», Bitkom 2017

Kompetenz

Wissen + Können + Wollen + kontextuelle Anpassungsfähigkeit

Welche Kompetenzen brauchen wir an der Schnittstelle am Übergang zu anderen Disziplinen?

Verständnis von Material und Produktion

Materialverständnis

Strukturelle Eigenschaften Modularität, Logik & Regelhaftigkeit, Abhängigkeit & Verkettung, Schichtung / Abstraktionsebenen

Dynamische Eigenschaften Prozessualität, Emergenz, Iterativität, Reaktivität, Temporalität

Physikalische & technische Eigenschaften Performanz, Präzision, Fehleranfälligkeit, Kompatibilität, Transparenz

Semantische & kulturelle Eigenschaften Kollaboration, Automatisierung, Übersetzbarkeit, Lesbarkeit, Kommunikativität, Konventionalität, Pflege & Nachvollziehbarkeit

Gestalterische Metaeigenschaften Experimentierbarkeit, Reproduzierbarkeit, Parametrik & Variabilität, Offenheit & Erweiterbarkeit, Ephemerität

must have

Gestaltungsräume kennen und Komplexität abschätzen können

must have

Implementierungsmöglich-
keiten und -strategien kennen (und entwickeln?)

should have

Funktionale Prototypen und Proof-of-concepts aufbauen
(und verproben)

could have

Datenquellen und Datenqualität prüfen

should have

Datenkonsistenz und Datenstrukturen erkunden und prüfen

could have

Sehr gutes Verständnis von Daten

must have

Varianten erzeugen, mit echten Daten auf echten Geräten testen

could have

Kommunikationsfähig sein

must have

Erfordernisse für die Implementierung kennen

should have

Denken in Systemen

Tools und Vorgehensmodelle beherrschen

must have

Wie kommen wir dahin?

Projekte

edit Relaunch ERCO Website
edit Cranach Grafiken – Erweiterung des CDA um Grafiken und Zeichnungen
edit Migration Modulverwaltung – Integration der neuen Modulverwaltung an der Fakultät
edit Aurora Forecast Map – wann und wo könnten Nordlichter in Island gesehen werden?
Cranach Map – Geografischer Zugang zum Werk von Lucas Cranach
Cranach VR – Cranach Meisterwerke in virtueller Realität erleben
Basecamp Iceland – Marketing-Website für Premium-Reiseanbieter
Entendix Gebäudemanagement – MVP für KI-basierte Gebäudeautomation
ARlebnis OBK – Augmented-Reality-Pfade durch Kultur und Geschichte des Oberbergischen Kreises
Konferenzkommunikation für die Humboldt-Universität zu Berlin
Optimierung der Fahrgastinformation im Schienenersatzverkehr, Deutsche Bahn
Cranach Compare – Bildvergleich im Cranach Digital Archive
Slidedeck Machina – Markdown-basierte Präsentationsplattform
Stromschienen- und Invia-Konfigurator für ERCO Leuchten
Cranach Artefacts – Detailansichten im Cranach Digital Archive
Cranach Search – Zentrale Suchkomponente des Cranach Digital Archive
Großstörungskarte – Deutsche Bahn, Reisendeninformation
Relaunch der RIS-Info-Plattform bei der Deutschen Bahn
Störfallkarten für S-Bahnen – Editierbare Kartenlösungen im Störungsfall
Relaunch Cranach Digital Archive (CDA)
Cranach-Importer – Schnittstelle zwischen Museumssystem und Webplattform
Website der Medieninformatik – Digitale Visitenkarte und technische Spielwiese
Git-basiertes Toolset für die Reakkreditierung – Ein nachhaltiger Workflow für Studiengangsdokumentation
Bildmeister – Bilddatenbank-Tool für das DJH Rheinland
Virtuelles Museum // Kölner Sport

Programmieren macht glücklich!

Greenfield vs. Brownfield

Greenfield-Situationen erfordern experimentelles Denken, Eigeninitiative und die Fähigkeit, durch Machen zu lernen: Creative Coding, Entwurfsprojekte

Brownfield-Szenarien erfordern kritischen, verantwortungsvollen, integrativen und nachhaltigen Umgang mit Technologie: Redesign-Projekte, Interface & Code-Refactoring

Folien und Miro Boards unter christiannoss.de/hfg

Happy coding 🕺🏼!

Demo of data-rel-position

Programmieren in der Gestaltung

Christian Noss

Mein Auftrag für heute

Gewünschte Bausteine

30 min

?

Programmieren in der Gestaltung

Programmierung | im | Design

Design oder Gestaltung?

Programmieren oder Programmierung?

Programmieren in der Gestaltung

Wir wollen sicher­stellen, dass unsere Studie­renden ein Höchstmaß an Profes­sio­na­lität errei­chen und eine aktive Rolle im Sinne der Nutzer:innen von Gestal­tungs­dienst­leis­tungen einnehmen.

Kompetenz

Welche Kompetenzen brauchen wir an der Schnittstelle am Übergang zu anderen Disziplinen?

Materialverständnis

Denken in Systemen

Wie kommen wir dahin?

Projekte

Programmieren macht glücklich!

Greenfield vs. Brownfield

Folien und Miro Boards unter christiannoss.de/hfg

Demo of `data-rel-position`

Wir wollen sicherstellen, dass unsere Studierenden ein Höchstmaß an Professionalität erreichen und eine aktive Rolle im Sinne der Nutzer:innen von Gestaltungsdienstleistungen einnehmen.