Maximal fünf Sprecher, sprechen je höchstens zehn Minuten über ein realisiertes Interactive Design Projekt – so das Format von ‘This happened…’ – einer kostenlosen Veranstaltungsreihe, die Chris O’Shea und ein paar andere Designer 2007 in London ins Leben riefen und die nun im März 2012 zum zweiten Mal auch in Hamburg stattfinden soll. Michael Seifert, Creative Director bei Jung von Matt/next in Hamburg organisiert sie nach der erfolgreichen Premiere im Frühjahr 2011 für den 02. März 2012 im großen Saal des Kulturhauses III&70 (Schulterblatt 73, von 20 – 23 Uhr). Das Speaker-LineUp steht nun fest – und verspricht einen unterhaltsamen Abend.

Life of George
Jakob Kahlen (Hello Monday)

Roy Block
Sebastian Schmieg

Digging in the Crates
Roland Loesslein (we ain’t plastic)

Digital Foosball Table
Lasse Lüders (sinnerschrader)

Lumenoise
Niklas Roy

Spiel mir das Lied vom Tod
lab binaer

[vimeo]http://www.vimeo.com/12710906[/vimeo]

[vimeo]http://vimeo.com/12485892[/vimeo]

[vimeo]http://vimeo.com/10372124[/vimeo]

Kreative müsollten sich nicht nur in Krisenzeiten auch als Marke verstehen – egal ob fest angestellt oder freiberuflich. Online-Portfolios haben dabei eine besondere Bedeutung. Mike John Otto stellt in der WEAVE besonders gelungenen Online-Portfolios vor. Hier haben wir für Sie eine Linkliste zusammengestellt.

Bianca Heinrichs, Designerin aus Hamburg
La Robotique heißt Bianca Heinrichs Portfolio, in dem sie Arbeiten über eine angenehm einfache Navigation präsentiert: Klickt man aufs Bild, scrollt die Seite von alleine zur nächsten Arbeit. Im About-Bereich finden sich Links zum Blog sowie zu Flickr und Xing. http://rbtq.de/

Ingo Robin, Fotograf aus Berlin
Ingo Robin hat eine schlüssige Kombination aus persönlicher Inszenierung und Arbeitsbeispielen gefunden: Neben Letzteren zeigt er auf der Startseite unter „IngoTV“ Szenen aus seinem Privatleben. www.ingorobin.com

Sam Dallyn, Designer aus Oxford
Artdirektor Sam Dallyn präsentiert sich in minimalistischem Design. Die Arbeiten stehen im Vordergrund, schnell hat man eine Übersicht und kann sich dennoch Details anschauen. Die Person dahinter ist kaum sichtbar. http://www.samdallyn.co.uk/

Andreas Popp, Designer aus Hamburg
Bei Artdirektor Andreas Popp spielt die übersichtliche Darstellung der Cases die Hauptrolle – ganz ohne Flash oder Video. Über einen horizontalen Scroller zeigt die Seite alle Arbeiten: www.supersoon.net
Andreas Popp schreibt außerdem regelmäßig auf seinem Blog: http://thefutureofeverything.net

Steve Rura, Designer aus New York
Das Portfolio von Steve Rura zeigt, wie eine sehr schlichte Quick-Scan-Seite dennoch zum Stöbern einlädt: Wie bei einem Weihnachtskalender öffnet jeder Klick ein Geheimnis. http://letters-numbers.com

Juan Romero, Designer aus Berlin
Das Flash-Portfolio von Juan Romero ist clean und grafisch sehr ansprechend. Die Stärke der Seite ist ihre elegante Inszenierung. Neben Infos zur Person und Case-Darstellungen bietet sie ein Showreel und Publikationsbeispiele. www.CanalRetina.com

Darek Nyckowiak, Designer aus Posen
Hinter thetoke verbirgt sich der Designer Darek Nyckowiak aus Polen. Das Portfolio zeigt, wie man Cases elegant in Interfaces verpackt und dabei gleich die eigenen Flash-Skills aufzeigt. www.thetoke.com

Milos Randjelovic, Designer aus Belgrad
Das Onlineprofil von Milos Randjelovic ist angenehm schlicht und übersichtlich gestaltet. Dennoch bietet die schön animierte Navigation Unterhaltung und einen ganz eigenen Charakter. www.webwork-studio.org

Ian Wharton, Designer aus London
Ian Wharton präsentiert seine Arbeiten zusammen mit einer herunterladbaren PDF-Biografie. Ein Link zu seinem Blog ijwharton.blogspot.com macht den Eindruck von ihm und seinen Arbeiten komplett. www.ianwharton.com

Das JavaScript-Framework jQuery erzeugt mit wenigen Zeilen Code sehr professionell wirkende Animationen. Anhand des folgenden Quellcodes von Johannes Kretschmar und Daniel Mies können Sie damit beispielsweise in nur 60 Minuten eine interaktive Karte erstellen.

GRUNDLEGENDES

Basis von jQuery ist die so genannte jQuery-Funktion:
$('p').hide();

Mögliche Beispiele für die Verwendung von Selektoren sind:
$('p') – jeder Absatz im Objekt
$('div > p') – jeder Absatz der Kindelement eines div-Element
$('ul.klasse li:first') – das erste li-Element in der unsortierten Liste mit der Klasse “klasse”
$('h1, h2, h3, h4, h5, h6') – alle Überschriften

Mögliche Funktionen, die auf selektierte Elemente angewendet werden können, sind zum Beispiel:
.hide() – das Element wird versteckt
.show() – das versteckte Element wird angezeigt
.fadeIn() – das Element wird langsam eingeblendet
.slideDown() – das Element wird von oben nach unten ausgefahren

Viele weitere Beispiele für Selektoren und Methoden finden Sie in der sehr ausführlichen Dokumentation unter http://docs.jquery.com

DAS GRUNDGERÜST

	 
Stadtkirche

DAS ERSTE ANIMIERTE ELEMENT MIT jQUERY

Laden Sie die jQuery-Quelldatei von http://www.jquery.com herunter und benennen Sie diese um in jquery.js. Dann binden Sie sie über
<script src="jquery.js" type="text/javascript"></script> in den >head<-Bereich Ihrer Webseite ein.

Codegerüst, in das Sie Ihren Code einfügen müssen:

Die jQuery-Anweisungen hide[] und hover[]:

$(".infobox_wrapper h2").hide();
$(".infobox_wrapper img").hover(
  function(){ $(this).next().fadeIn(500); },
  function(){ $(this).next().fadeOut(500); }
);

DER AUSKLAPPTEXT

Der Ausklapptext soll zunächst unsichtbar sein:

$(".infobox_text").hide();
$(".infobox_wrapper img").click(
  function() {$(this).nextAll(".infobox_text").slideDown(500);}
);

Zustände speichern:

$(".infobox_wrapper img").data("clicked",false);

Die Fallunterscheidung:

$(".infobox_wrapper img").click(
	function() {
		if ($(this).data("clicked") == true)
		{
			$(this).nextAll(".infobox_text").slideUp(500);
			$(this).data("clicked",false);
		}
		else
		{
			$(this).nextAll(".infobox_text").slideDown(500);
			$(this).data("clicked",true);
		}
	}
);

Erweiterung:

$(".infobox_wrapper img").hover(
	function() {
		$(this).next().fadeIn(500);
	},
	function() {
		if ($(this).data("clicked") == false)
		{
			$(this).next().fadeOut(500);
		}
	}
);

EINE WEITERE ZOOMSTUFE

    
	... InfoPunkte Zoomstufe 1 ...
  

    
	... InfoPunkte Zoomstufe 2 ...
  

Aktuellen Zoom-Container verstecken:

$(".zoomOut").click(
			function() {
				$(this).parent(".zoom").hide();
				$(this).parent(".zoom").next(".zoom").show();
				$("#karte").css("background-image","url(karte_out.jpg)");
				}
			);
$(".zoomIn").click(
			function() {
				$(this).parent(".zoom").hide();
				$(this).parent(".zoom").prev(".zoom").show();
				$("#karte").css("background-image","url(karte_in.jpg)");
				}
			);

Alle Zoomstufen verstecken und ersten Zoom-Container anzeigen:

$(".zoom").hide();
$(".zoom:first").show();

WAS IST, WENN KEIN JAVASCRIPT AKTIVIERT IST

Zoom-out-Button über jQuery explizit wieder hervorholen:

$(".zoomOut").show();

Erweiterung: