Tag Archives: Interaction Design

Intermediales Design schaut über den Tellerrand

Der Studiengang Intermediales Design schaut nicht nur über den Tellerrand sondern fährt vom 21. bis zum 22. November zur „beyond tellerrand“ nach Düsseldorf. Zahlreiche hochkarätige internationale Referenten versprechen ein inspirierendes Programm sowohl für Web-Professionals als auch für angehende Entwickler und Designer.

Wer sich schon immer mit dem Internet der Dinge und Pervasive Computing beschäftigen wollte, Interesse an Next Generation Media in Hard- und Software hat und sich für die interdisziplinäre Kombination von Design und Development begeistert, sollte diese Chance nutzen. Und wer sich darüber hinaus mit dem Gedanken beschäftigt, diese Themen zu studieren, dem stehe ich als Dozent Rede und Antwort. Denn das Sommersemester ist nicht mehr lange hin…

Kostenlose Lernvideos zum Windows Phone 7

Eigentlich ist es halb so wild, für das Windows Phone 7 Anwendungen zu entwickeln. Ein paar Grundlagen C# (oder Visual Basic), der sichere Umgang mit Expression Blend und Kenntnis der wenigen aber vorhandenen Stolperfallen reichen aus. Doch die eine oder andere Anwendung zeigt, dass diese Dinge nicht jedem von Anfang an geläufig sind. Und mir erging es am Anfang nicht besser und so musste ich beim Erlernen der Besonderheiten einiges Lehrgeld zahlen.

Um anderen diesen Einstieg zu erleichtern und die typischen Fehler vermeiden zu helfen gibt es die Erkenntnisse daraus als Lernvideo auf einer DVD (oder online).

Einen großen Teil der Lerninhalte gibt es aber auch kostenlos. Teils beim Verlag video2brain und teils als App im Marketplace. Außerdem finden sich bei Vimeo noch Teile der DVD und einiges mehr. Hier mal ein kleiner Auszug und eine mögliche Reihenfolge für den Einstieg:

  • Einen Einstieg in die schnelle Anwendungsentwicklung und das Prototyping bietet „Windows Phone 7 Fundamentals (Teil 1 von 5) – Prototyping“.
  • Wer sich eher mit Animationen beschäftigen möchte, findet in „Windows Phone 7: Bewegung kommt ins Spiel” alles wichtige dazu.
  • Den Umgang mit grafischen Elementen und deren Wiederverwendung zeigt „Windows Phone 7: Ressourcen als Styleguide für Visual Studio und Expression Blend“.
  • Die Nutzung Telefon spezifischer Funktionen erklärt „Windows Phone 7: Spezielle Aufgaben für das Telefon (Launcher und Chooser)“.
  • Wer das Mikrofon nutzen oder auch das Zusammenspiel vom Silverlight mit XNA sehen will, der findet eine Anleitung in „Windows Phone 7 Fundamentals (Teil 5 von 5) – XNA und Mikrofon“.
  • Mehrprachigkeit darf natürlich auch nicht vergessen werden und so führt „Windows Phone 7 Fundamentals (Teil 4 von 5) – Mehrsprachigkeit“ in dieses Thema ein.
  • Das ist aber noch nicht genug und so gibt es ergänzend dazu noch drei weitere Videos als App im Marketplace:

  • Den Umgang mit den sehr mächtigen Verhalten zeigt „Lernvideo Verhalten (Behaviors)“.
  • „Lernvideo Softwarearchitektur (MVVM)” erklärt, wie eine Windows Phone 7 App grundsätzlich nach dem MVVM Muster aufgebaut sein könnte.
  • Eine der größten Stolperfallen ist das Tombstoning (also das Unter- oder Abbrechen von Anwendungen). Wie damit umgegangen werden kann zeigt „Lernvideo Tombstoning“.
  • Weitere Videos zu Expression Blend inkl. SketchFlow finden sich unter http://vimeo.com/album/149180. Eine Schritt-für-Schritt-Anleitung der Datendienste auf Basis von WCF findet sich unter http://vimeo.com/album/271975. Und obwohl diese Videos sich auf Silverlight für den Webbrowser beziehen, kann das Meiste daraus auch für das Windows Phone 7 genutzt werden.

    Über eine – hoffentlich motivierende – Rückmeldung zu den Videos und Vorschläge für weitere Inhalte würde ich mich sehr freuen…

    Next Generation User Interfaces How-To: Interoperabilität

    image Die Ein- und Ausgabemöglichkeiten Web-basierter Technologien sind beinahe unerschöpflich, dennoch gibt es Grenzen – spätestens wenn man den Rechner verlassen und die Außenwelt kontaktieren möchte. Glücklicherweise ist hier Abhilfe in Form von Arduino (http://www.arduino.cc/) und Co. verfügbar. Das Arduino-Board erlaubt die analoge und digatale Ein- und Ausgabe per serieller Schnittstelle, um beispielsweise Sensoren auszulesen oder Motoren zu steuern. Browser-basierten Anwendungen ist es aber normalerweise nicht erlaubt, aus ihrer Sandbox heraus auf diese Schnittstelle zugreifen. Hier kommt dann ein spezieller Server zum Einsatz, der die Daten mit der seriellen Schnittstelle austauscht und dann wie ein Webserver per http oder noch etwas direkter per Socket-Verbindung zur Verfügung stellt. Für Arduion und Flash gibt es beispielsweise as3glue (http://code.google.com/p/as3glue/).

    image Es gibt viele Elektronik- oder Robotorbaukästen mit denen ähnliches erreicht werden kann, etwa Lego Mindstorms (http://mindstorms.lego.com/). Die einfache Steuerung eines Lego Roboters gelingt dank der Nxt#-Bibliothek des Niederländers Bram Fokke, die er unter http://nxtsharp.fokke.net inklusive Quellcode zum Download anbietet. Diese Bibliothek kommuniziert direkt per Bluetooth mit dem Roboter. Per WCF (Windows Communication Foundation) kann dann mit Hilfe dieser Bibliothek ein Dienst zum Senden von Nachrichten an den Roboter angeboten werden.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    
    using System;
    using System.ServiceModel;
    using System.ServiceModel.Activation;
    using Bram.NxtSharp;
     
    namespace SilverNXT.Web
    {
        [ServiceContract(Namespace = "")]
        [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
        public class MindstormsService
        {
     
            // Statisch, da es nur einen Robotor für alle gibt
            static private NxtBrick brick;
            static private NxtTankDrive tankDrive;
     
            public MindstormsService()
            {
     
                if (brick == null)
                {
                    // Erzeuge Stellvertreter des NXT-Steins, der im Roboter verbaut ist
                    brick = new NxtBrick();
     
                    // Wichtig: Setze den Namen der Kommunikationsschnittstelle
                    brick.COMPortName = "Com11";
     
                    // Konfiguriere NXT-Stein mit Motoren und ggf. Sensoren
                    NxtMotor motorB = new NxtMotor();
                    NxtMotor motorC = new NxtMotor();
                    motorB.Brick = brick;
                    brick.AttachMotor(NxtMotorPort.PortB, motorB);
                    motorC.Brick = brick;
                    brick.AttachMotor(NxtMotorPort.PortC, motorC);
     
                    // Erzeuge Hilfsobjekt zur Steuerung des Robotors ähnlich einem Panzer
                    tankDrive = new NxtTankDrive();
                    tankDrive.Brick = brick;
                    tankDrive.Motor1 = motorB;
                    tankDrive.Motor2 = motorC;
     
                    // Stelle Verbindung mit dem NXT-Stein des Robotors her
                    brick.Connect();
     
                }
     
            }
     
            [OperationContract]
            public void Run(SByte power, ushort distance, SByte turnRation)
            {
                tankDrive.Move(power, distance);
            }
     
            [OperationContract]
            public void Coast()
            {
                tankDrive.Coast();
            }
        }
    }

    Für die Nutzung in Silverlight sollte dieser Dienst im Silverlight Projekt als Service Reference hinzugefügt werden. Visual Studio erzeugt den notwendigen Code automatisch, so dass der Dienst mit den folgenden Zeilen konsumiert werden kann.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    
    using System;
    using System.Windows;
    using System.Windows.Controls;
    using SilverNXT.MindstormsServiceReference;
     
    namespace SilverNXT
    {
        public partial class MainPage : UserControl
        {
            MindstormsServiceClient client = new MindstormsServiceClient();
     
            public MainPage()
            {
                InitializeComponent();
            }
     
            private void runButton_Click(object sender, RoutedEventArgs e)
            {
                client.RunCompleted += new EventHandler<system.componentmodel.asynccompletedeventargs>(client_AsyncCompleted);
                client.RunAsync(50, 0, 100);
            }
     
            private void coastButton_Click(object sender, RoutedEventArgs e)
            {
                client.CoastCompleted += new EventHandler<system.componentmodel.asynccompletedeventargs>(client_AsyncCompleted);
                client.CoastAsync();
            }
     
            void client_AsyncCompleted(object sender, System.ComponentModel.AsyncCompletedEventArgs e)
            {
                // nothing
            }
        }
    }

    image Bierzapfen am Computer“Wii Draught Masters” für Stella Artois.

     

     

     

     

    Verschiedene Quellen datieren den Joystick auf ca. 1940. Dort wird dieser erstmalig im Zusammenhang mit der Raketensteuerung erwähnt. Der Joystick sowie dessen Nachfolger wie Gamepad und die Wii Remote lassen sich ebenfalls für Benutzerinteraktionen verwenden. Dabei erfreuen sich gerade die Eingabegeräte der seit 2006 vertriebenen Wii großer Beliebtheit: Darunter seit ca. 2008 das Balance Board und seit ca. 2009 das Guitar Hero Schlagzeug. Und da diese per Bluetooth arbeiten, ist die Kombination mit anderen Technologien durchaus möglich. Die größte Herausforderung ist, dass nicht jede Bluetooth-Umgebung harmoniert; Gute Erfahrungen haben wir übrigens mit den Bluetooth-Treiber von BlueSoleil (http://www.bluesoleil.com/) gemacht.

    Ähnlich wie schon bei dem Lego Mindstorms Robotor gibt es auch hier eine Bibliothek zur Nutzung in eigenen Projekten namens WiiMoteLib (http://wiimotelib.codeplex.com/) in .NET basierten Projekten, etwa mit WPF.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    
    using System;
    using System.Windows;
    using WiimoteLib;
     
    namespace WiiWPF
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
     
                Loaded += new RoutedEventHandler(MainWindow_Loaded);
            }
     
            void MainWindow_Loaded(object sender, RoutedEventArgs e)
            {
                WiimoteCollection mWC = new WiimoteCollection();
     
                try
                {
                    // Finde alle angeschlossenen Wii Remotes
                    mWC.FindAllWiimotes();
                    // Verbinde mit der ersten gefundenen Wii Remote
                    Wiimote wm = mWC[0];
                    wm.Connect();
                    // Schalte die Vibration an der Wii Remote ein
                    wm.SetRumble(false);
                }
                catch (Exception ex)
                {
                    MessageBox.Show(ex.Message, &quot;Wiimote error&quot;, MessageBoxButton.OK);
                }
            }
        }
    }

    Kombiniert mit einem Socket-Server können so die Eingabegeräte der Wii Technologien wie Flash und Silverlight angeboten werden – genau das übernimmt im Falle von Flash das Projekt WiiFlash von Joa Ebert und Thibault Imbert (http://code.google.com/p/wiiflash/).