multiple media

apropos Mediendesign

Nerdromantik - Sag´s mit SASS

Jul 232016

Grundproblematik

Zugegeben, Grußkarten werden in 95% aller Fälle von meiner Frau verfasst. Die Gründe dafür kann ich (zumindestens bei mir) eindeutig identifizieren!

  1. Weil Mann oft einfach nicht viel zu sagen pflegt, die Karten in durchschnittlicher Schreibschriftgröße aber verlangen, mit etwa 5-8 Zeilen gefüllt zu werden.
  2. Weil Mann sich vielleicht oft auch nicht adäquat auszudrücken vermag?
  3. Weil für Mann in den meisten Fällen ein starker Händedruck, eine freundschaftliche Umarmung, ein lockerer Spruch oder ein Insider-Gangsterfäustchen mehr rüberbringt als ein Stück DinA6-Karton mit Hochglanzmotiv und rückseitigem Text.

Ausgangssituation

Die Tage saß ich genau vor jener Herausforderung. Meine Frau konnte nicht helfen, da sie den "Akzeptant" kaum kennt.

Thema: Geburt
Was schreibt man da als mittlerweile pragmatisch entzauberter Vater von drei wundervollen Kindern?
"Herzlichen Glückwunsch. Euer Kind ist da! Wahnsinn, das habt ihr toll gemacht. Wir wünschen Euch ein gesundes und glückliches Baby ..." IM ERNST?
Ja, nee, weiß nicht.

Lösung

Da kam mir die Idee, diesen eigentlich total generischen Text in eine Zielgruppen gerechte Form zu bringen.
Zielgruppe: Designer, Frontendentwickler, UX-Designer
Ich entschied mich für SASS. Nicht ganz so trivial wie CSS aber doch einfach zu lesen (sogar für Zielgruppenferne dechiffrierbar).

Der generische Text sah am Ende dann so aus:

#baby {
	content: 'Hooray!';
	.wishes {
		face-family: smile, 'Laughter', sans crying;
		health: 100%;
		problems: 0%;
		sleep-mode: deep;
	}
	.parents {
		content: 'You did it!';
		&--wishes {
			endurance: 100%;
			nerves: strong;
			program-mode: love 100%;
		}
	}
	.diaper--full {
		contents: scentless;
	}
}

Zugegeben: Es sind viele Schummler dabei, aber zu kryptisch soll es ja auch nicht sein.

Ergebnis

Was soll ich sagen. Kam super an!

Abwandlung

Das Medium kann für verschiedene Zwecke eingesetzt werden.

Liebesbrief zum 13. Hochzeitstag

$darling: 'Maike';

#loveLetter {
	&--recipient {
		content: $darling;
	}
	&--purpose {
		overflow-x: love;
		overflow-y: gratitude;
	}
	.year:nth-child(-13) {
		date: '2016-07-19';
		boots-style: shaking;
		eye-align: $darling;
		eye-style: beautiful;
	}
	.question {
		date: '2016-07-18';
		future-collapse: true;
		&--result {
			happiness: 100%;
		}
	}
	&--hope {
		duration: everlast;
	}
	.greetings {
		heart-style: 100% love $darling;	
	}
	&--author {
		content: 'Christoph';
	}
}

Immerhin hat sich meine zielgruppenferne Frau darüber gefreut und auch das meiste verstanden.

Anschiss für Schlechtparker

#parkingYourCar {
	parking-space-offset: 100%;
	&--nextTime {
		align-self:center;
		vertivcal-align: middle;
	}
}

Viel Spaß beim Coden!

Digitale Filmdatenbank

Okt 202015

Ausgangssituation

Aus verschiedenen Gründen sammeln wir Filme als „Hardcopy“. Bis zu einer gewissen Grenze ist das sicherlich auch dekorativ im Wohnzimmerregal. Irgendwann wacht man aber auf und denkt, man lebe ich einer Videothek. Daher wurde ein CD/DVD-Koffer angeschafft und (fast) alle Medien verschwanden platzsparend in selbigem.
Doch wie behält man den Überblick über den Bestand?
Eine dem Koffer beiligende Karteikarte würde kaum reichen um etwa 250 Filme zu notieren.

Digitale Wege der Bestandspflege gäbe es einige:

  • Eine Excel-Liste? Zu pragmatisch für meinen Geschmack
  • Eine App? Beschränkt mich auf mein Handy und verbraucht Speicherplatz
  • Eine Software? Beschränkt mich auf den PC
  • Ein freies Script? Keins gefunden, das so funktioniert, wie ich es mir vorstelle (Stichwort: Responsive Design)
  • Eine Web-App schreiben, welche genau das kann, was ich brauche.

Learning-by-doing: „movieDB“

Ich entschied mich für Letzteres und startete das Projekt.
Ein Datensatz sollte vorerst folgende Informationen enthalten:
Filmname, Coverbild, Laufzeit, Genre, FSK, Medium, Lagerort

Auch die Anforderungen an die Web-App waren schnell definiert.

Must-haves:

  • Auslesen der Filmdatensätze aus einer Datenbank
  • Darstellung der Filme in Form von CoverThumbnails
  • Filtermöglichkeiten nach Genre, Stichwortsuche und alphabetische Sortierung

Nice-to-haves:

  • Bildupload und eventuell Formatierung (Thumbnail, Detailbild)
  • Datensätze verwalten (bearbeiten, löschen)
  • Tabellarische Ausgabe
Screenshot movieDB 1.0 - Startseite movieDB v1.0 - Startseite
Screenshot movieDB 1.0 - Genre History movieDB v1.0 - Genre History
Screenshot movieDB 1.0 - Detailansicht movieDB v1.0 - Detailansicht
 

Version 0.1–0.4
Die erste Version der Datenbank basierte auf dem Foundation-Framework mit minimalem PHP und jQuery sowie einer Datenbank im CSV-Format.

Funktionen:

  • Auslesen der Filmdatensätze aus einer Datenbank
  • Darstellung der Filme in Form von Thumbnails
  • Filtermöglichkeiten nach Gerne, Stichwortsuche und alphabetische Sortierung

Mankos:

  • unsicher
  • langsam (vor allem Mobil)
  • Stichwortsuche CaseSensitive
  • Pflege der Datenbank mit Excel
  • Bilder-Upload manuell

Version 0.5
Letzte Version im alten Look

Funktion:

  • Anlegen von Datensätzen durch die App (inkl. Bildupload)

Manko:

  • Bildvorbereitung manuell

Version 0.6 – 1.0
Frischer Look und immer noch mit Foundation-Framework allerdings jetzt mit PHP und einer MySQL-Datenbank im Hintergrund.

Funktionen:

  • Anzeige der Filme nach Genre, Anfangsbuchstabe und tabellarisch
  • Stichwortsuche
  • Anzeige der zwanzig neuesten Datensätze
  • Darstellung des Datensatzes in einem Modal-Popup
  • Eintragen, Bearbeiten und Löschen von Film-Datensätzen
  • Bildupload mit automatischer Größenanpassung und Thumbnail-Erzeugung
  • rudimentärer Passwortschutz
  • Responsive Design
  • individuelles Genre-Icon-Set
Screenshot movieDB 1.0 - Tabellenansicht movieDB v1.0 - Tabellenansicht
Screenshot movieDB 1.0 - Film anlegen movieDB v1.0 - Film anlegen
Screenshot movieDB 1.0 - Suchergebnis movieDB v1.0 - Suchergebnis
 

Was die Zukunft bringt

Es ist noch nicht fertig, das Projekt „movieDB“. Ich habe noch viele Ideen und kann auch noch eine Menge lernen.

  • Login für verschiedene User (z.B. Kinderzugang)
  • Datensatzerweiterungen (Trailer, Beschreibungen)
  • Sortierung innerhalb Tabellenübersicht
  • Weitere Filtermöglichkeiten (FSK, Länge)
  • Vereinheitlichung der Sprache

Wer Interesse hat, die Web-App selber zu nutzen kann sich gerne an mich wenden. Die Anforderungen an einen Webspace sind gering. Theoretisch kann die Web-App auch auf einem (virtuellen) Home-Server laufen.
Ich bin gespannt, was aus dem Projekt noch wird.

Atom

Ein Blog von schuetz mediendesign