<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" version="2.0"><channel><atom:link rel="hub" href="http://tumblr.superfeedr.com/" xmlns:atom="http://www.w3.org/2005/Atom"/><description>Hi, mein Name ist Flavio Gortana und dies ist mein Blog, der mich während meines Praktikums bei Interactive Things begleitet. Hier dokumentiere ich meine Arbeit und halte meine täglichen Gedanken, Erfahrungen und Erkenntnisse fest.</description><title>IXT Internship</title><generator>Tumblr (3.0; @ixtinternship)</generator><link>http://ixtinternship.tumblr.com/</link><item><title>Hausarbeit  zur  Eignungspruefung  an  der  FH  Potsdam</title><description>&lt;p&gt;Dies ist meine Eingabe zum Bewerbungsverfahren an der FH Potsdam. Das Thema &amp;#8220;Service Avatar&amp;#8221; gab vor auf einer konzeptionellen Ebene ein digitales Abbild eines realen Services zu machen. Auf Grund des Preisverfalls von Dienstleistungen sollte ein virtueller Service geschaffen werden, der einen realen Service mit den Möglichkeiten der digitalen Welt erweitert.&lt;/p&gt;

&lt;p&gt;Ich habe mich mit dem Service eines Supermarktes auseinandergesetzt. Aufgrund der grossen Verantwortung, die ein Supermarkt auf unser Kaufverhalten hat, habe ich mir die Aufgabe gestellt den Service so zu erweitern dass es Kunden möglich ist bessere Entscheidungen zu treffen bezüglich der Nachhaltigkeit eines Produktes. Die Produktinformationen, die ein Kunde zu Zeit in einem Supermarkt zur Verfügung hat beschränken sich auf die vom Marketing geprägte Vorderseite und die neutrale Inhaltsangabe auf der Rückseite. Um aber über die Nachhaltigkeit eines Produktes urteilen zu können und sein Einkaufsverhalten zu verbessern fehlen gewisse Informationen.&lt;/p&gt;

&lt;p&gt;Meine Idee ist es deshalb die verfügbaren Informationen um zwei Komponenten zu erweitern. Auf der einen Seite brauchen wir Hintergrundinformationen zu einem Produkt, die uns über die Herstellung, Transport etc. aufklären. Zusätzlich brauchen wir diese Hintergrundinformationen in einer Form, in der wir Vergleiche zu anderen ähnlichen Produkten anstellen können. Auf der anderen Seite sollten dem Kunden seine eigenen &amp;#8220;Benutzerdate&amp;#8221; resp. Daten zu seinem Kaufverhalten zugänglich gemacht werden, die es ihm ermöglichen in einem Iterativen Prozess sein Kaufverhalten zu optimieren.&lt;/p&gt;

&lt;p&gt;Die Kombination dieser zwei neuen Informationen - die Nachhaltigkeit der Produktionsweise und die Aufzeichnung des Eigenen Kaufverhaltens - habe ich unter dem Namen &amp;#8220;Sustainability Record&amp;#8221; zusammengefasst.&lt;/p&gt;
&lt;p&gt;&lt;img align="middle" height="453" src="http://farm8.staticflickr.com/7242/7304545014_f627f00225_z.jpg" width="640"/&gt;&lt;/p&gt;
&lt;p&gt;Ich habe mein Konzept in vier screens veranschaulicht - Zwei screens eines Mobile Devices, die es ermöglichen sollen vor Ort Informationen zu einem Produkt abrufen resp. mehrere Produkte gegeneinander abzuwägen und zwei einer Desktop-applikation, die es dem Kunden ermöglichen sein eigenes Kaufverhalten zu untersuchen und mit alternativ Vorschlägen zu verbessern.&lt;/p&gt;
&lt;p&gt;&lt;img align="middle" height="640" src="http://farm9.staticflickr.com/8154/7303788482_8a7af8b17d_z.jpg" width="337"/&gt;&lt;/p&gt;
&lt;p&gt;&lt;img align="middle" height="1600" src="http://farm8.staticflickr.com/7231/7303792188_14c45950fa_h.jpg" width="341"/&gt;&lt;/p&gt;
&lt;p&gt;&lt;img align="middle" height="640" src="http://farm8.staticflickr.com/7212/7303802996_d59c8fd00d_z.jpg" width="337"/&gt;&lt;/p&gt;
&lt;p&gt;&lt;img align="middle" height="1372" src="http://farm8.staticflickr.com/7231/7303802074_31b2d8bb4b_h.jpg" width="337"/&gt;&lt;/p&gt;
&lt;p&gt;&lt;img align="middle" height="539" src="http://farm8.staticflickr.com/7098/7303800150_1f7b2e0881_z.jpg" width="640"/&gt;&lt;/p&gt;
&lt;p&gt;&lt;img align="middle" height="539" src="http://farm8.staticflickr.com/7103/7303796216_d4789ff233_z.jpg" width="640"/&gt;&lt;/p&gt;
&lt;p&gt;Der Service sollte es den Kunden eine grössere Transparenz im Lebensmittelmarkt bieten. Während einige Produzenten diese Transparenz gerne gewähren werden sich andere stark (wenn auch im Hintergrund) dagegen wehren. Auf eine Längerfristige Sicht, werden sich aber auch diese gezwungen sehen ihre Prozesse zu überdenken um Transparenz bieten zu können und somit wettbewerbsfähig zu bleiben.&lt;/p&gt;</description><link>http://ixtinternship.tumblr.com/post/24088070438</link><guid>http://ixtinternship.tumblr.com/post/24088070438</guid><pubDate>Wed, 30 May 2012 18:28:09 -0400</pubDate></item><item><title>"The things we have to learn before we do them, we learn by doing them."</title><description>&lt;p&gt;&amp;#8220;The things we have to learn before we do them, we learn by doing them.&amp;#8221;&lt;/p&gt;
&lt;p&gt;**Aristoteles**&lt;/p&gt;

&lt;p&gt;Eine der wichtigsten Erkenntnisse, die ich in den letzten 3 Monaten gewonnen habe.&lt;/p&gt;
&lt;p&gt;Dieser Satz hat für mich zwei Bedeutungen, die nicht ganz eindeutig zu trennen sind.&lt;/p&gt;

&lt;p&gt;1. Sich Gedanken zu machen ist wichtig um nicht zu sagen unentbehrlich. Da wir aber in unserem Denkevermögen ziemlich eingeschränkt sind, müssen wir zu anderen Mitteln greiffen um unsere Ideen und Pläne auszuarbeiten und umzusetzen. Wir gewinnen Erkenntnisse im Machen und Ausprobieren. Wir müssen Fehler machen um weiterzukommen. Wir können nicht alles im Voraus wissen.&lt;/p&gt;

&lt;p&gt;2. Ich habe immer das Gefühl gehabt ich müsse, bevor ich etwas mache/ kreiere alles darüber wissen, und zwar von Grund auf. Falsch! Theorie und intelektuelle Grundlagen sind gut, aber in der Praxis nicht einmal die halbe Miete. Viel wichtiger ist es ein konkretes Ziel vor Augen zu haben und dieses zu verfolgen. Alles, was nötig ist um zu diesem Ziel zu gelangen lernt man auf dem Weg dahin. &lt;/p&gt;</description><link>http://ixtinternship.tumblr.com/post/14277745037</link><guid>http://ixtinternship.tumblr.com/post/14277745037</guid><pubDate>Thu, 15 Dec 2011 17:07:07 -0500</pubDate></item><item><title>Substratum</title><description>&lt;p&gt;&lt;span&gt;Dies ist mein bisher umfangreichstes Projekt. Es beinhaltet verschiedene Arbeitsschritte und hat mich mental und zum Teil auch physisch für 3 Wochen in Anspruch genommen. Was ich aber alles dabei gelernt und realisiert habe ist grossartig. Vieles ist schwer zu beschreiben, da es meine gesamte Vorstellung von einem gestalterischen Prozess - “wie funktioniert ein gestalterischer Prozess?“, „wieso braucht es einen solchen? - beeinflusst hat. Ich werde jedoch versuchen mich so gut wie möglich zu erklären. Auch das Endresultat ist erfreulich. Eingebettet in einer grossartigen Website sieht meine Arbeit natürlich noch einen Schritt professioneller aus.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;Zum Thema: Die Aufgabe war ein Teil des internen Projekts „Substratum“. Dies ist eine Serie von Interviews mit Persönlichkeiten aus den Bereichen der generativen Gestaltung und des Interaktionsdesigns. Es wurden 14 Personen/ Duos 10 Fragen zu ihren Motivationen/Einflüssen/ Interessen/ Tätitgkeiten etc. gestellt, wobei jeweils zwei Personen zu einem übergeordneten Issue zusammengefasst wurden. Meine aufgabe war es nun für jedes dieser 7 entstandenen Issues ein passendes Icon, zu sowie eine Illustration die als Coverseite dienen sollte zu gestalten. Die Issues/ Themen die sich während der Analyse der Interviews herauskristallisiert haben sind folgende:&lt;/p&gt;

&lt;ul&gt;&lt;li&gt;Space&lt;/li&gt;
&lt;li&gt;Visual Systems&lt;/li&gt;
&lt;li&gt;Truth and Beauty&lt;/li&gt;
&lt;li&gt;Superhumans&lt;/li&gt;
&lt;li&gt;Algorithms&lt;/li&gt;
&lt;li&gt;Facts and Figures&lt;/li&gt;
&lt;li&gt;Collective Responsibility&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;Ich werde nicht den gesamten gestalterischen Prozess beschreiben, den ich durchlaufen habe. Vielmehr versuche ich das, was ich gelernt habe zu beschreiben. Um aber dennoch einen groben Überblick zu darüber bieten, liste ich die wichtigsten Schritte auf:&lt;/p&gt;

&lt;ul&gt;&lt;li&gt;Icongestaltung&lt;/li&gt;
&lt;li&gt;Recherche&lt;/li&gt;
&lt;li&gt;Konzept&lt;/li&gt;
&lt;li&gt;Entwürfe der Icons&lt;/li&gt;
&lt;li&gt;Fokus auf einen Approach&lt;/li&gt;
&lt;li&gt;Variationen der Issues&lt;/li&gt;
&lt;li&gt;Definitive Icons&lt;/li&gt;
&lt;li&gt;
&lt;/li&gt;&lt;li&gt;Illustration&lt;/li&gt;
&lt;li&gt;Recherche&lt;/li&gt;
&lt;li&gt;Entwürfe von verschiedenen Approches&lt;/li&gt;
&lt;li&gt;Fokus auf einen Approach&lt;/li&gt;
&lt;li&gt;Ausarbeitung der Issues&lt;/li&gt;
&lt;li&gt;Variationen mit Farbe&lt;/li&gt;
&lt;li&gt;Farbraum finden&lt;/li&gt;
&lt;li&gt;Definitive Illustrationen&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;Dies ist wahrscheinlich die gröbste Übersicht, die ich bieten kann um dennoch die wichtigstn Schritte zu berücksichtigen. Etwas was ich aber hier bewusst weggelassen habe, jedoch nach zwischen allen Schritten stehen müsste ist „Entscheiden“. Dies ist etwas, das mir in dieser Zeit bewusst wurde. Gestalten besteht hauptsächlich aus zwei sich wiederholenden Phasen: Machen und Entscheiden. Natürlich gehört auch das „Denken“ dazu. Dies ist jedoch in beiden Schritten vorhanen, und manchmal ist jegliche Abwesenheit von rationalen Gedanken auch sehr hilfreich.&lt;/p&gt;
&lt;p&gt;Das „Machen“ beinhaltet alles, was vorher nicht da war und alles was zu einer sichtbaren Veränderung der Arbeit führt - Entwerfen, Ausbessern, Ausprobieren, Reinzeichnen etc. Oft ist es wichtig mit möglichst wenig genauen Absichten zu „Machen“ - etwas, das mir sehr schwer fällt, da ich immer allem gleichzeitig gerecht werden will. Es gehört ein gewisser Mut dazu etwas auszuprobieren, das den Rahmen sprengt (manchmal in einem sehr bildlichen Sinn). Es erfordert eine gewisse „just-do-it-Mentalität“, Dinge aunzupacken, deren Resultat noch nicht einmal im Kopf exisitiert. &lt;/p&gt;
&lt;p&gt;Das Entscheiden seinerseits erfordert es jeweils eine Teilmenge des Gemachten auszuwählen. Dies geschieht jeweils anhand von unterschiedlichen Kriterien. Zwei Hauptkriterien sind die Dienlichkeit für den Zweick, sowie persönliche Vorlieben. &lt;/p&gt;
&lt;p&gt;Das Gestalten besteht also aus verschiedenen Wiederholungen vom Schaffen von Vorschlägen und dem Treffen einer Auswahl, mit der die nächsten Vorschläge gemacht werden. Ich habe gemerkt, dass es für den gestalterischen Prozess genau so hinderlich sein kann keine Entscheidungen zu treffen, wie keine Vorschläge zu haben. &lt;/p&gt;
&lt;p&gt;Ist die auszeichnende Fähigkeit nun das Treffen der richtigen entscheidung? Wahrscheinlich nicht.  Das Treffen von Entscheidungen ist zwar essentiell, jedoch kann es nur soviel bewirken, wie die Qualität der Vorschläge es zulässt. Schlussendlich ist das Gestalten immernoch ein komplexer Prozess, der viele Faktoren beinhaltet und auf Erfahrungen, Wissen und Gefühlen beruht. Jedoch habe ich gemerkt, dass es immer wieder hilfreich ist sich das Prinzip vom Machen und vom Entscheiden in Erinnerung zu rufen. Vorallem dann, wenn man das Bild vor lauter Striche nicht mehr sieht.&lt;/p&gt;
&lt;p&gt;Dies ist natürlich nicht immer ganz so einfach. Im Kopf entstehen sehr schnell Ideen. Diese dann auf Papier resp. auf den Bildschrim zu bringen ist etwas anderes.&lt;/p&gt;
&lt;p&gt;Um doch noch etwas von der eigentlichen Arbeit zu zeigen, habe ich zu den einzelnen Schritten jeweils ein Bildschrimausschnitt gewählt und kurz beschrieben.&lt;/p&gt;

&lt;p&gt;&lt;img src="http://media.tumblr.com/tumblr_lupdv4N9GE1r01s3n.jpg"/&gt;&lt;/p&gt;

&lt;p&gt;Dies ist ein Ausschnitt aus der Recherche. Ich habe die einzelnen Bilder nach grafischen Kriterien wie Farbe, Formen und Räumlichkeit geordnet.&lt;/p&gt;

&lt;p&gt;&lt;img src="http://media.tumblr.com/tumblr_lupdyku2Gy1r01s3n.jpg"/&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src="http://media.tumblr.com/tumblr_lupdyz9aAY1r01s3n.jpg"/&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src="http://media.tumblr.com/tumblr_lupdzebcgj1r01s3n.jpg"/&gt;&lt;/p&gt;


&lt;p&gt;Dies sind verschiedene Entwürfe und Konzepte, wie die Icon Familie einwickelt werden könnte.&lt;/p&gt;




&lt;p&gt;&lt;img src="http://media.tumblr.com/tumblr_lupe505p6A1r01s3n.jpg"/&gt;&lt;/p&gt;

&lt;p&gt;Bei der oberen Hälfte geht es um verschiedene grafische Stile/ Möglichkeiten die Ions zu verändern.&lt;/p&gt;
&lt;p&gt;Unten sind Varianten zu sehen, die Themen der Issues darzustellen.&lt;/p&gt;

&lt;p&gt;&lt;img src="http://media.tumblr.com/tumblr_lupedhHzc01r01s3n.jpg"/&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src="http://media.tumblr.com/tumblr_lupedrwHc81r01s3n.jpg"/&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src="http://media.tumblr.com/tumblr_lupedzOyIR1r01s3n.jpg"/&gt;&lt;/p&gt;

&lt;p&gt;Dies sind verschiedene Möglichkeiten zur Ausarbeitung der einzelnen Ions.&lt;/p&gt;


&lt;p&gt;&lt;img src="http://media.tumblr.com/tumblr_lupemmSQyf1r01s3n.jpg"/&gt;&lt;/p&gt;

&lt;p&gt;Dies sind Entwürfe der Illustrationen.&lt;/p&gt;

&lt;p&gt;&lt;img src="http://media.tumblr.com/tumblr_lupeuqMOss1r01s3n.jpg"/&gt;&lt;/p&gt;

&lt;p&gt;Dies sind verschiedene Farbpaletten für die Hintergrundfarbe der Coverbilder.&lt;/p&gt;

&lt;p&gt;Die fertigen Ions sowie Illustrationen resp. die Interviews werden ab Anfang November im Wochentakt veröffentlicht.&lt;/p&gt;</description><link>http://ixtinternship.tumblr.com/post/12835041927</link><guid>http://ixtinternship.tumblr.com/post/12835041927</guid><pubDate>Tue, 15 Nov 2011 08:46:54 -0500</pubDate></item><item><title>Interaction Dynamics</title><description>&lt;h1&gt;&lt;span&gt;Aufgabe&lt;/span&gt;&lt;/h1&gt;
&lt;p&gt;Das Projekt hat das Ziel durch experimentelle Interaktionsmodelle auf dem Gebiet der assoziativen Mensch-Maschiene-Verständigung zu Forschen. Experimentiert wird in einer simulierten Systemumgebung, in der Repräsentanten unterschiedlicher digitaler Daten, durch zuweisung von Verhaltensmuster und Interaktion geordnet werden  können. Die Aufgabe ist es nun vier verschiedene Wortpaare in Interaktionsmodelle Umzusetzen.&lt;/p&gt;
&lt;ul&gt;&lt;li&gt; gross - klein &lt;/li&gt;
&lt;li&gt; viel - wenig &lt;/li&gt;
&lt;li&gt; innen - aussen &lt;/li&gt;
&lt;li&gt; sichtbar - unsichtbar &lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;Als Repräsentanten der Digitalen Daten können grafische Primitive wie Punkt, Kreis, Quadrat verwendet werden. Die Abgabe sollen vier Applikationen mit der Abmessung 500px x 500px mit einem Kurzen Beschrieb der Interaktionsmodelle sein.&lt;/p&gt;
&lt;h2&gt;Erste schritte&lt;/h2&gt;
&lt;p&gt;Nachdem ich eine Grobe Idee davon hatte, was die Aufgabe beinhaltet und einige Beispiele von möglichen Endresultaten gesehen hatte, stellte sich die Frage, wie die Applikationen umgesetzt resp. welche Technologie dazu verwendet werden sollte. Oft ist die zu wählende Technologie schon im Vorfeld klar, da sie durch die Vorgaben des Endprodukts bestimmt wird. Bei mir gab es aber verschiedene Möglichkeiten, da das Endresultat kleine Standaloneapplikationen sein sollten, die sich nicht zwingend in eine Umgebung einfügen müssen. Da ich mich bereits ein wenig mit Processing auseinandergesetzt habe und gerne  etwas neues lernen wollte, entschied ich mich für JavaScript als Programmiersprache. Die grafischen Elemente, sowie die Animationen sind Bestandteil der JS-Library Raphaeljs.&lt;/p&gt;
&lt;p&gt;Dies war aber leichter gesagt als getan. JS in Kombination mit jQuery und der besagten Grafischen Library stellten sich als harte Knacknuss zum erlernen von JS heraus. Da ich bereits geringe Vorkenntnisse in der Programmierung von Processing habe, war mein Denken schon ziemlich auf die Konzepte dieser Sprache festgefahren. Da die grundsätzlichen Abläufe in JS aber anderst funktionieren, war es für mich zu Beginn sehr schwer umzudenken. Der Grösste Unterschied besteht darin, dass Processing stark prozedural ausgeführt wird und meist JS nur durch Kommunikation verschiedener Objekte ausgelöst durch Events abläuft. Auch Syntaktisch gibt es einige grössere Unterschiede, die ich zu erst festmachen und verstehen musste. Durch Lesen verschiedener Einführungen in die Programmiersprache sowie der grossen Hilfe meines &amp;#8216;Privatlehrers&amp;#8217; bin ich mittlerweile aber auch im Stande mich in umfangreicheren Dokumentationen schlau zu machen.&lt;/p&gt;
&lt;h2&gt;Vorgehen&lt;/h2&gt;
&lt;p&gt;Als erstes machte ich mich an die Konzeption der einzelnen Applikationen. Wie lassen sich vorgegebenen Wortpaare in Interaktionsmodelle umsetzen, sodass grafische Elements aufgrund ihrer Eigenschaften geordnet werden können? Was für Interaktionsmodelle gibt es überhaupt? Welche Arten von Interaktion machen Sinn, welche wirken gesucht und unnatürlich? Es stellten sich bereits einige Fragen. Da die Interaktion mit einem Computer viel Bewegungen, verschiedene Zustände und meistens einen Mauszeiger beinhaltet ist es fast unmöglich Ideen im Kopf zu entwickeln. Auch ein Stift und ein Blatt Papier reicht schnell nicht mehr aus um die Vorgänge verständlich aufzuzeigen. Oft müssen Erklärungen aushelfen, wo die Zeichnung allein nicht mehr ausreicht. Als weiteres Hilfsmittel, das auch gleich zur Nächsten Stufe - dem visuellen look and feel - führt habe ich Adobe Fireworks kennengelernt. Dies ist ein Grafikprogramm, das gleichzeitig dabei hilft verschiedene Zustände von Elementen darzustellen. Auch Sonst ist es für einen gestalterischen Prozess sehr hilfreich, da sehr einfach Versions von Layouts/Seiten erstellt werden könne, auf die man immer wieder zurückgreifen kann.&lt;/p&gt;
&lt;p&gt;Während dem entwerfen von Ideen ist mir immer wieder aufgefallen, wie sehr wir von bereits bestehenden Konzepten beeinflusst werden. Nicht nur die Beispiele, die ich im Vorfeld gesehen habe, haben meine Denkweise gelenkt, sondern auch der Tägliche Umgang mit interaktiven Medien hat beträchtliche Spuren hinterlassen. Natürlich ist die Interaktion zwischen einer Maus und einem Bildschirm beschränkt, jedoch habe ich bewusst versucht eigene Möglichkeiten zu finden Elemente zu Gruppieren oder auszuzeichnen. Für die Umsetzung habe ich gesamthaft 2 Wochen aufgewendet. Am Schluss hat es mir aber nur für 3 Applikationen gereicht. Ich werde im Folgenden versuchen anhand einer einzelnen Applikation mein Vorgehen festzuhalten und zu kommentieren.&lt;/p&gt;
&lt;h2&gt;Das  Beispiel &amp;#8216;innen - aussen&amp;#8217;&lt;/h2&gt;
&lt;h3&gt;Ideenentwicklung&lt;/h3&gt;
&lt;p&gt;Wie kann man anhand des Wortpaares &amp;#8216;innen-aussen&amp;#8217; Elemente ordnen? Sollen die Elemente eine Eigenschaft aufweisen, die auf das Wortpaar schliessen lassen sodass sie anschliessend auf Grund dieser Eigenschaft geordnet werden können? Oder sollen die Elemente auf eine bestimmte Interaktionsweise ausgezeichnet werden können? Mein erster Ansatz war es, Elemente, die sich innerhalb eines anderen Elements befinden auf eine Art auszuzeichnen, sodass sich sich von den restlichen unterscheiden. Ein anderer Ansatz war es, Elemente per drag and drop in andere abzulegen, und sie anschliessend dem Elternelement anzugleichen um die Zugehörigkeit zu verdeutlichen. Beide Varianten haben mich aber nicht vollständig überzeugt, da sie sozusagen schon in jedem Dateibrowser vorzufinden sind. Einen interessanten Ansatz habe ich gefunden die Elemente zusätzlich zu unterscheiden, die sich nicht nur in einem, sondern in mehreren Elementen befinden. Es lassen sich somit Schnittmengen von übergeordneten Objekten darstellen. Es sollen Kreise aufgezogen werden können, die bereits bestehende Repräsentanten einfassen und auszeichnen resp. in ihren eigenschaften verändern.Befinden sich Repräsentanten innerhalb von Schnittmengen von Kreisen, so werden diese, je nach Anzahl der Kreise, zusätzlich ausgezeichnet. Als grober Ansatz hat mir dieses Konzept gereicht.&lt;/p&gt;
&lt;h3&gt;Look and Feel&lt;/h3&gt;
&lt;p&gt;Bei der Ausarbeitung des Visuellen Stils, war es mir zu Beginn wichtig, ein einheitliches Konzept durchzuziehen. Bestimmte Eigenschaften sollen jeweils für bestimmte Zustände und Auszeichnungen stehen. Ich habe aber schnell feststellen müssen, dass dies nicht immer ganz einfach ist. Nicht alle Modelle weisen die gleichen Zustände auf oder benötigen die gleiche Art von Auszeichnungen. Entschieden habe ich mich für Kreise als einheitliches Grafisches Formen für die Repräsentanten der Daten. Diese sollten nicht deckend sein, damit auch bei Überlagerungen von mehreren Elementen immer alle erkennbar sind. Zusätzlich kann man eine Veränderung der Transparenz auch gut als Auszeichnung bei &amp;#8216;mouseover&amp;#8217;- oder &amp;#8216;click&amp;#8217;-events verwenden.       &lt;img/&gt; Zu beginn wollte ich Schwarz als einzige Farbe für die Elemente behalten, jedoch habe ich bemerkt, dass ein Unterschied in der Deckkraft nicht ausreicht um bestimmte Elemente visuell auszuzeichnen. Also habe ich als zusätzliche Farbe Gelb genommen.&lt;/p&gt;
&lt;p&gt;Da jede Applikation etwas eigenständiges darstellen soll habe ich für jede eine andere Hintergrundfarbe gewählt. Einige Ideen haben zusätzlich Linien als grafische Hilfsmittel benötigt. Diese habe ich ebenfalls Schwarz gehalten, um ihnen keine zu grosse Wichtigkeit zu geben. Die Ursprüngliche Idee war es ein Startbild zu machen, das eine kurze Beschreibung der Applikation, sowie einen Start-Button beinhaltet. Die Umsetzung am Schluss ist aber etwas anders erfolgt. Dies war kein visueller Entscheid, sondern noch fehlendes technisches Know-how.&lt;/p&gt;
&lt;p&gt;Für das Beispiel &amp;#8216;innen-aussen&amp;#8217; habe ich nun kleine schwarze Kreise verwendet als Repräsentanten der Daten. Die aufgezogenen Kreise sollten zunächst aus einer feinen schwarzen Aussenlinie bestehen. Während der Programmierung habe ich aber bemerkt, dass sich ein Ausgefüllter Kreis besser eignet um Elemente einzufassen. Ich habe mich für ein beinahe transparentes Weiss entschieden, das bei der Überlagerung von mehreren Kreisen wie ein Schleier wirkt. &lt;img/&gt; Die Elemente, die sich innerhalb der Kreise befinden färben sich Gelb und werden mit zunehmender Anzahl kreise, in denen sich sich befinden deckender.&lt;/p&gt;
&lt;h3&gt;Programmierung&lt;/h3&gt;
&lt;p&gt;Der erste Schritt bei der Programmieren findet in der Regel nicht am Computer sondern auf dem Blatt statt. Das Ziel ist es in der Aufgabe oder dem Ablauf des Programms kleine einzelne Aufgaben zu erkennen. Was für Aufgaben müssen erledigt werden, was für Objekte müssen erstellt werden und wie sollte die Kommunikation unter den einzelnen Objekten erfolgen? Umso besser die Aufteilung einzelne Aufgaben ist, desto einfacher ist anschliessend die Umsetzung. Schnell merkt man aber, dass es unmöglich ist bereits im Vorfeld alle auftauchenden Probleme zu erkennen. Deswegen ist es auch nicht sinnvoll das ganze Programm zu erst auf Papier zu schreiben. Im Idealfall hat man einzelne Bausteine, die für sich alleine Funktionieren und anschliessend nur zusammengefügt werden müssen. Dies ist nur möglich wenn alle Objekte ihre Aufgaben selber erledigen und nicht zu stark von anderen abhängig sind. Wie Legosteine sollten die einzelnen Teilstücke möglichst modular bleiben. Sie sollten mit wenig Aufwand auseinander genommen und je nach dem mit anderen Stücken kombiniert werden können. Klingt leicht, ist es aber nicht (&amp;#8230;NOCH nicht hoffe ich)!&lt;/p&gt;
&lt;p&gt;Da JavaScript Objektorientierte Programmierung erlaubt kann man Objekte, die als solches erkannt werden auch im Programm selber als solches umgesetzt werden. Objektorientierte Programmierung ist (soviel ich bis jetzt über verschiedene Arten zu programmieren weiss) diejenige, die dem alltäglichen, menschlichen denken am nächsten kommt. Es werden Objekte erstellt, die ihre Eigenschaften besitzen und ihre Aufgaben erledigen. In der Analyse von meinem Programm bin ich zum Schluss gekommen, dass drei verschiedene Arten von Objekten brauchen werden.  	  Die Repräsentanten der Daten, die Kreise, die aufgezogen werden können, sowie ein Objekt, dass den Austausch resp. die Kommunikation zwischen diesen Objekten erledigt.&lt;/p&gt;
&lt;h1&gt;&lt;img src="http://media.tumblr.com/tumblr_ls5fzztIVp1r01s3n.jpg"/&gt;&lt;/h1&gt;
&lt;p&gt;Auf den Punkt gebracht brauchte ich die Klassen: Dot, Circle und Mediator. (Die Bennenung von Variablen, und Funktionen - hier noch einfach - stellte sich immer wieder als eine Herausforderung heraus. Einerseits sollten die Namen nicht zu lange sein andererseits sollten sie aber ihre Aufgabe/Bedeutung für das Programm möglichst gut beschreiben. So kann auch grosse Erklärung jemand anderes den Sinn verstehen ).&lt;/p&gt;
&lt;p&gt;Als erstes habe ich eine Klasse erstellt, die einen beliebig positionierten Kreis auf der Oberfläche zeichnet, der per Drag and Drop bewegt werden kann. Die Zweite Klasse macht es möglich einen Kreis aufzuziehen.&lt;/p&gt;
&lt;p&gt;&lt;img src="http://media.tumblr.com/tumblr_ls5g42z0fU1r01s3n.jpg"/&gt;&lt;/p&gt;
&lt;p&gt;Die Mediator Klasse sollte nun die Kommunikation regeln. Gelöst habe ich das Problem so, dass für jeden neuen Kreis getestet wird, ob sich darin Elemente befinden. Wenn ja sollten diese eine andere Färbung bekommen. Wird ein Element bewegt resp. losgelassen wird ebenfalls getestet, in wie vielen Kreisen sich dieses befindet. Zum Schluss habe ich dem Mediatorobjekt eine Funktion zugefügt, die auf Doppelklick die bestehenden Elemente am unteren Bildrand in einem Raster anordnet. Angeordnet werden sie in aufsteigender Reihenfolge nach Anzahl Kreise in denen sie sich befinden.&lt;/p&gt;
&lt;p&gt;Was zusammengefasst einfach klingen mag, hat mich einige Stunden schweisstreibende Anstrengung gekostet. Aber es hat sich gelohnt. Das Endprodukt ist eine Startseite, von der man die drei Applikationen starten kann.&lt;/p&gt;
&lt;h2&gt;Fazit&lt;/h2&gt;
&lt;p&gt;Die Hauptsache, die ich bei dieser Aufgabe gelernt habe ist ein grundlegendes Verständnis von JavaScript. Aber auch der Ablauf der Erstellung einer Applikation inklusive visuellem Design ist mir bewusster geworden. Es macht Sinn die Aufgaben &amp;#8220;Konzept&amp;#8221;, &amp;#8220;Design&amp;#8221; und &amp;#8220;Code&amp;#8221; klar zu trennen und nicht zu versuchen sie zu kombinieren. Natürlich ist auch dies ein iterativer Prozess, bei dem nach der Umsetzung gewisse Grafische Gedanken nochmals überarbeitet werden können, aber es hilft enorm beim Design nicht an den Code zu denken et vice versa.&lt;/p&gt;
&lt;p&gt;&lt;br/&gt; Ein anderer Punkt, der mir während der Arbeit bewusst worden ist, ist die Konzeption einer Interaktion im allgemeinen. Es gibt viel mehr zu beachten, als man im Vorfeld annimmt. Mouseover, MouseClicked, MouseOut - that&amp;#8217;s it&amp;#8230;von wegen! Was und wie und weshalb geschehen Animationen? Was wird wo, wie und wann platziert? Welche Farbe hat was? Und wie hat es diese Farbe, wenn das andere so oder anders gefärbt ist? Wieso ist dieser Kreis grösser als der andere? Wieso sieht das ganze eher langweilig aus resp. was macht es attraktiver? Und sowieso, weshalb lassen mich einfache Kreise Vermutungen über Ihr Verhalten anstellen ohne sie zu&amp;#8221;kennen&amp;#8221;? Ein kleiner Auszug von Frage, die ich mir in den letzten zwei Wochen gestellt habe. Auch wenn man wahrscheinlich Übung in deren Beantwortung bekommt, müssen sie bei jedem Problem von einer neuen Seite angegangen werden.&lt;/p&gt;</description><link>http://ixtinternship.tumblr.com/post/10699885409</link><guid>http://ixtinternship.tumblr.com/post/10699885409</guid><pubDate>Mon, 26 Sep 2011 17:41:00 -0400</pubDate></item><item><title>Das Praktikum Ueberblickt</title><description>&lt;p&gt;Mein Praktikum bei IXT ist in drei unterschiedliche jedoch aufeinander aufbauende Abschnitte unterteilt. &lt;/p&gt;
&lt;p&gt;Im ersten Teil, der voraussichtlich den ersten Monat in Anspruch nimmt, erledige ich kleinere Aufträge aus allen Bereichen, die IXT abdeckt. Wenn möglich sind dies Teile von realen Aufträgen. Das Ziel ist es dabei in alle Bereiche einen Einblick zu erhalten und die Zusammenhänge zwischen einzelnen Aufgaben zu erkennen. Auch lerne ich so ein Projekt in seinen einzelnen Phasen kennen. &lt;/p&gt;
&lt;p&gt;Etwas umfangreichere Aufgaben bekomme ich im zweiten Teil. Diese werden aber jeweils auch von jemand anderem ausgeführt, der mir jeweils bei Problemen weiterhelfen kann. Spannend hierbei ist für mich vokalem ein direkter Vergleich des Arbeitsprozesses. Wie geht jemand anderes das Problem an?  &lt;/p&gt;
&lt;p&gt;Im letzten Teil bekomme ich die Möglichkeit ein eigenes Projekt anzugehen. Umfang und Thema wird sich im Verlaufe des halben Jahres herausstellen, wobei ich aber versuchen werde meine persönlichen Interessen dabei zu verfolgen.&lt;/p&gt;</description><link>http://ixtinternship.tumblr.com/post/9871651671</link><guid>http://ixtinternship.tumblr.com/post/9871651671</guid><pubDate>Tue, 06 Sep 2011 04:09:00 -0400</pubDate></item><item><title>Ziel, Zweck und Absichten</title><description>&lt;p&gt;Ich befinde mich zur Zeit zwischen Matura und Studium. Ideen zu interessanten Studienrichtungen gibt und gab es in meinem Kopf schon viele, doch keine war überzeugend genug mich für die Uni einzuschreiben. Meine Interessen liegen in vielen Gebieten. Vor allem interessiert und beschäftigt hat mich schon immer grafische (und auch andere) Gestaltung.&lt;/p&gt;
&lt;p&gt;Nebenbei gab es jedoch noch andere Faszinationen, die ich aber nie wirklich benennen konnte. Dinge, die ich nicht zusammenführen konnte, die auf den ersten Blick reichlich wenig miteinander zu tun hatten. Als Kind haben mich stests Dinge fasziniert, die auf einen Impuls oder eine Aktion von mir reagiert haben. Von Dingen die sich bewegt haben, wie z.B. einer aufwändigen Kugelbahn mit Weichen und anderen Schikanen war ich stets begeistert. Fand ich in der Zeitung eine Statistik zu einem beliebigen Thema, konnte ich sie stundenlang (naja&amp;#8230;je nach Umfang) studieren. Auch war ich stets einer der wenigen, die in der Schule gerne in den Mathematikunterricht gingen. Nerd? Wohl kaum - zu Nintendo, Splinter Cell und co. habe ich den Zugang sowie meine Skills nie gefunden. &lt;/p&gt;
&lt;p&gt;Bis vor ca. einem oder zwei Jahren sind diese Dinge nicht viel mehr als eine Faszination geblieben, bis ich mich nach der Matura, als es um das &amp;#8220;wie weiter?&amp;#8221; ging intensiver damit auseinander gesetzt habe. Entschieden habe ich mich vorerst für den gestalterischen Vorkurs. Nicht zu letzt aus dem Grund, mir so viele Türen wie möglich offen zu halten und eine vorläufig definitive Entscheidung hinauszuschieben. &lt;/p&gt;
&lt;p&gt;Während dieser Ausbildung habe ich mich vermehrt mit Webdesign und Processing auseinandergesetzt. Dies hat mich auf &amp;#8216;Interaktionsdesign&amp;#8217;, als Vereinigung von allen meinen Interessen, gebracht. Auch wenn mir nicht von Anfang an klar war, was &amp;#8216;Interaktionsdesign&amp;#8217; ist und was es alles beinhaltet, wurde mir schnell klar, dass mein Ausbildungsweg in diese Richtung gehen wird. Die erste Chance, einen grossen schritt in diese Richtung zu machen habe ich nun von der Zürcher IAD-Agentur Interactive Things bekommen. Ich erhalte für ein halbe Jahr einen Einblick in den (wahrscheinlich) schönsten &amp;#8216;Bürojob&amp;#8217; der Welt und werde mein Bestes geben den Ansprüchen des Unternehmes gerecht zu werden ;)&lt;/p&gt;
&lt;p&gt;In diesem Blog werde ich meine Arbeit, Erkenntnisse, Gedanke, sowie das Gelernte dokumentieren und festhalten. In erster Linie mache ich dies für mich. In dem ich Dinge festhalte und ausformuliere, werden sie klarer und sind nicht mehr bloss lose Fetzen flüchtiger Gedanken. Aber auch andere interessierte sind eingeladen an meinen Erfahrungen und Dokumentationen Teil zu haben und ihre Meinung kund zu tun.&lt;/p&gt;
&lt;p&gt;In diesem Sinne - Motivation und Möglichkeiten sind da, jetzt kommt das TUN! &lt;/p&gt;</description><link>http://ixtinternship.tumblr.com/post/9706981314</link><guid>http://ixtinternship.tumblr.com/post/9706981314</guid><pubDate>Fri, 02 Sep 2011 11:13:36 -0400</pubDate></item></channel></rss>
