Code-Inside Blog

Gerade von einem Kollegen eine sehr interessanten Link bekommen: oblong.com – sehr sehenswert die Demo:

g-speak overview 1828121108 from john underkoffler on Vimeo.

Die Jungs von den “Office Labs” haben wieder eine neue coole Technologie veröffentlicht: Touchless – Multitouch mit einer normalen Webcam. Es hat Ähnlichkeiten mit der Wiimote – nur dass man diesmal als “Bewegungssensor” auf die Webcam setzt und markante Dinge erkennen lässt.

Das Video zeigt die Funktionalität ganz gut:

Das ganze ist als Open Source SDK (mit Demoanwendung) auf Codeplex zu finden. Gestensteuerung ahoi!

Vor ein paar Tagen habe ich bereits über den Podcast von Scott Hanselman und Saqib Shaikh geschrieben, heute habe ich auf Channel 9 ein Videointerview mit den Beiden (und Dan Fernandez) gefunden:

Saqib Shaikh and Scott Hanselman: Designing for Accessibility

Für fleissige Silverlight-Menschen gibt es neues Futter:

Silverlight 2 Beta 2 (@ ScottGus Blog)

und eine neue Blend 2.5 Version (Downloadlink) wurde released

Schonmal etwas von Test-Driven-Developement gehört oder ASP.NET MVC?

Rob Conery (Entwickler von SubSonic und nun bei ASP.NET Team beschäftigt) versucht sich nun genau an diesen Dingen und dokumentiert dies – mittlerweile sind so bereits 10 Teile zusammengekommen:

• MVC Storefront, Part 10: Shopping Cart Refactoring and Membership
• Implementierung des Membership Systems
• “Cleverer” Einkaufswagen
• MVC Storefront, Part 9: The Shopping Cart
• CRUD Operations am Beispiel des Einkaufswagens
• MVC Storefront, Part 8: Testing Controllers, Iteration 1
• Controller aufsetzen & Testen
• MVC Storefront, Part 7: Helpers and Routing
• Clevere Helper für MVC einbauen
• Routing / URLs
• MVC Storefront, Part 6: Catalog Completion and Initial UI
• UI (HTML) & ASP.NET MVC Einführung
• ASP.NET MVC: MVC Storefront, Part 5 – Globalization
• Clevere Sprachenauswahl für die Produkte
• ASP.NET MVC: MVC Storefront, Part 4 – Linq To Sql Spike
• Verbindung zwischen den LinqToSql Objekten und den “normalen” Objekten über einen “Spike”
• ASP.NET MVC: MVC Storefront, Part 3 – Pipes and Filters
• Architekturmuster “Pipes and Filters” näher betrachtet
• ASP.NET MVC: MVC Storefront, Part 2 – Repository Pattern
• Architekturmuster
• MVC Storefront: Intermission
• Einführung in die generelle Architektur und Ziel

Ich finde diese Videos sehr interessant gemacht – vor allem sieht man, warum welche Architekturentscheidung so oder so getroffen wurde – Rob erklärt ziemlich präzise jeden einzelnen Schritt und alles im TDD Umfeld.

Ich empfehle auch die Kommentare zu lesen, da dort bereits einige Architekturentscheidungen durch diskutiert wurden. Diese Diskussionen sind doch sehr lehrreich – insgesamt finde ich die momentane Architektur, welche Rob gewählt hat, sehr interessant.

Das Ganze gibts auch auf Codeplex zum Download.

Das Userinterface gehört eigentlich zu dem wichtigsten einer Applikation. In dem Blogpost von Jeff Atwood stellt er auch dar, warum dies so ist.

Leider ist das Prototyping eines Userinterfaces nicht immer so einfach. Einen Designer anheuern der sich gut mit Photoshop auskennt ist zwar eine Sache, allerdings wird dann das UI bereits sehr früh sehr konkret beschrieben.
Paint hingegen ist zu simpel – ein paar schicke grafische Elemente sind schon praktisch.

In dem Blogpost von Jeff fand ich auch den Link zu einem interessanten Video: UI Prototyping with PowerPoint 2007.

PowerPoint? Ich will keine Präsentation erstellen!

Warum eigentlich PowerPoint? PowerPoint 2007 bringt einige schicke Funktionen mit die es erlauben solch ein UI in kurzer Zeit zu erstellen:

 
(ein Demoprojekt an dem ich gerade Arbeite)

Wichtig: Das ist nur der Prototyp!

Man kann hier bereits einige Komponenten sehen und auch grafisch ansprechender darstellen als mit Paint. Der Vorteil nun von PowerPoint: Es ist wesentlich simpler als Photoshop und co.!

Jeder der PowerPoint bedienen kann ist in der Lage schnell eigene Ideen mit einzubringen – so kann man das Design zwischen Projektleiter, Designer und Entwickler abstimmen. Jeder ist kreativ und das kann hier leicht eingebaut werden – im Gegensatz zu einem HTML Dummy oder einem Photoshop Kunstwerk.

Features von PowerPoint 2007:

In PowerPoint 2007 wurden viele Effekte hinzugefügt:

Farbe kann beliebig ausgewählt werden, aber es gibt auch viele Vorlagen:

Sowie Effekte:

Mit diesen Werkzeugen kommt man recht schnell zu brauchbaren Ergebnissen und kann auch schnell mal die Farbe oder die Textart ändern.

Eine weitere interessante Seite die das Thema aufgreift.

Für weitere Alternativen einfach in Jeffs Blogpost suchen

Ich hab mich bisher von jQuery oder anderen Javascript Librarys weniger beeindrucken lassen. Script.aculo.us war mir ein Begriff, aber ich hab jetzt einen interessanten Post gefunden: 37 More Shocking jQuery Plugins

Zum Teil ziemlich schicke Sachen dabei – ich glaub diese Seite sollte ich mir mal näher anschauen: Learning jQuery

Durch Coding4Fun wurde ich heute auf ein sehr cooles CodePlex Projekt aufmerksam: FluidKit. Mit FluidKit werden einige schicke Controls mitgeliefert, welche z.B. als “Coverflow” von Apple bekannt sind.

Da Bilder bekanntlich mehr sagen als 1000 Worte, hier mal die Demoanwendung (welche mitgeliefert wird, man muss aber manuell in der App.xaml das jeweilige Element herauspicken). Beachtet auch immer mal wieder die Schieberegler – damit kann man das Verhalten anpassen.

“CustomShapes”:

“GlassWindow”

“DragNDrop”

“ElementFlow” – “CoverFlow”

“ElementFlow” – “TimeMachine”

ElementFlow” – “Rollercoaster”

ElementFlow” – “Rolodex”

Fazit: Ziemlich cool (und Open Source!)

Hier noch der Blogeintrag vom Macher selbst (ich find sein perșnlichen Kommentar drunter noch witzig Рwer will das nicht )

Vor einige Zeit hatte ich ein Silverlight HowTo geschrieben, in dem es um den bekannten "Spiegeleffekt" ging.

Im Prinzip habe ich das "Hauptobjekt" geklont und entsprechend verändert, damit ein Spiegelungseffekt auftritt. Allerdings bietet WPF noch eine andere Möglichkeit (vielleicht sogar noch mehr…) und zwar über den "VisualBrush".

Wer noch nicht so bewandert mit WPF ist: Ein Brush repräsentiert den "Anstrich" eines Objektes. Es gibt verschiedene Brushs, aber dazu sollte man lieber die MSDN kontaktieren.

Schritt 1: Fangen wir mal langsam an: WPF Projekt & Bild suchen

Wir wollen eine einfache Spiegelung eines Bildes (im meinem Fall ein Windows Standardbild) in einer WPF Anwendung.

Dazu legen wir ein WPF Projekt an – ich mach dies in diesem Fall mit Expression Blend, theoretisch geht es natürlich auch in Visual Studio):

… und holen uns noch ein entsprechendes Bild:

Schritt 2: Das Spiegel vorbereiten

Am Anfang haben wir ein weiße Arbeitsfläche vor uns – diese wollen wir nun mit dem Bild befüllen:

In dem "Grid" wird noch ein "StackPanel" geschrieben, welches ein "Border"-Element mit einem "Image" beinhaltet.

Ergebnis:

Schritt 3: Das Bild duplizieren

Jetzt kommt das große Geheimnis – der Einsatz des VisualBrush:

Der rosa umrahmte Teil wird zur Spiegelung. Über die Background Property setzen wir den Visual Brush auf unser originales Bild. Das ganze kann man dem Themengebiet Databinding zuordnen.

Ergebnis:

Schritt 4: Das Bild spiegeln

Das tatsächliche spiegeln erreichen wir über ein "ScaleTransform":

Ergebnis:

Schritt 5: Durchsichtigkeit in der Spiegelung

Eine Spiegelung setzt immer eine gewisse "durchsichtigkeit" im Verlauf voraus – ansonsten hat man diesen Effekt nicht.
Dies ist über die "Opacity" Property & "Opacity" Mask möglich:

Ergebnis:

Fertig

Wenn man nun noch für den Hintergrund einen netten Farbverlauf einspielt, bekommt man sowas:

Das ganze könnt ihr natürlich ganz unten downloaden.

Quellen

Ich geb zu – in diesem Fall war ich wenig kreativ. Ich habe diesen Blogeintrag gefunden, welcher im Prinzip genau dasselbe macht. Ich hab einige Verlinkungen bei mir hinzugefügt und es einfach mal selber ausprobiert

In der MSDN gibt es auch noch ein anderes Beispiel, allerdings war mir dies zu komplex, zeigt aber, was der VisualBrush alles kann: How to: Create a Reflection

Wer über die Performance nachdenkt, insbesondere in 3D Anwendungen, sollte diese beiden Seiten durchlesen:

• Maximize WPF 3D Performance
• Performance

[ Download Democode ]

Eine kleine Sache, die ich heute auf der VSone gezeigt bekam, was Expressen Blend alles bietet – da kam unter anderem auch das Thema: Wie kann man Schaltfläche in diese “Glass” Optik, welche z.B. auch in Vista zu sehen ist, implementieren.

Software die dazu nötig ist: Expression Blend 1 oder Expression Blend 2 (aktuell ist die December Preview draußen) – ich verwende Expression Blend 2

Schritt 1: Projekt erstellen

Wir erstellen in Blend ein neues WPF Projekt an.

Schritt 2: Rechteck zeichnen

Das Rechteck ziehen wir irgendwo auf unser Windows.

Schritt 3: Gradient Brush auf Rechteck

Über die Properties legen wir ein Gradient Brush (Schwarz zu Weiß) auf das Rechteck an:

Schritt 4: Ecken abrunden

Als kleinen Zusatz, werden wir den Button rund gestalten, dafür einfach in Blend die gewünschte Rundung einstellen:

Schritt 5: Rechteck duplizieren & Kopie verkleinern

Das ganze kopieren wir nun und verkleinern es so, dass es im unteren Drittel zu sehen ist:

Schritt 6: Gradient Brush abändern

Den Gradient Brush werden wir nun von Schwar zu Weiß, nach Weiß nach Schwarz abändern:

Schritt 7: Umrandung entfernen

Für das kleine Rechteck müssen wir nun noch die Standardmäßige schwarze Umrandung entfernen:

Schritt 8: Alpha Kanal setzen & Feinarbeit

Den weißen Bereich sagen wir nun noch, dass er durchsichtig sein soll. Dann noch etwas vergrößern/verkleinern und etwas Feinarbeit und im Grund war es das:

Fertig:

Naja – ein Designpreis gewinnt es so sicherlich nicht, geht aber in die richtige Richtung Wenn man noch ein wenig mit den Optionen rumspielt, vielleicht auch noch Schatten etc. reinbringt, wird es netter.
Vom Prinzip sollte das auch in anderen Grafikeditoren funktionieren.

[ Download Source ]

Wie man Spiegeleffekte erstellt hatte ich bereits hier erwähnt – allerdings hab ich mittlerweile gesehen, dass es im richtigen WPF (und nicht Silverlight) elegantere Möglichkeiten gibt.

“Next Generation User Interfaces” klingt schonmal stark nach Bullshit Bingo – daher ist es als Titel schonmal sehr gut

Durch die Wii wurde bereits ein gewaltiger Sprung erreicht – Microsofts Surface Tischlein geht ebenfalls in eine interessante Richtung. Die Kombination des Ganzen ist in etwa das “Minority Report-alike” UI – das Thema “User Interfaces” möchte ich heute etwas vertiefen und ein paar interessante Videos zeigen, was uns vielleicht in Zukunft erwartet wird.

Anfangen möchte ich mit einem eher weniger futuristischen Thema: Der normale Desktop eines PCs. Egal welches System – irgendwie sind alle ähnlich. Hier gab es die Idee, den realen Schreibtisch nachzuempfinden und mit Mausgesten zu steuern – das klingt erstmal langweilig, ist aber trotzdem sehr schön anzusehen:

Sieht doch schon schick aus, oder? Das ganze gibt es sogar als reales Programm!

Das sowas natürlich nicht die Spitze der Innovation ist, sollte auch jedem klar sein. Wie wäre es mit einem anderen Ansatz? Stellen wir uns doch mal unseren Desktop (oder Applikationen) nicht in grau und “steif” vor, sondern in einem schicken 3D Gewand oder mit netten Effekten. Auch wenn dies wenig “innovativ” scheint gibt es doch nach wie vor viel zu wenig “sexy” Programme. Microsoft (sicherlich gibt es Alternativen) mit WPF ein solches Werkzeug an. Was WPF alles kann, sieht man schön in diesem Video:

Oder man macht aus der Anwendung ein Cube:

Zugegeben: Alles bisher nette Spielerein die nett sind – aber es gibt ja noch mehr. Insbesondere in vergangener Zeit wurden Multitouch Screens immer wieder erwähnt – in Surface kommt sowas ebenfalls zum Einsatz.

Wie man sowas verwenden könnte, sieht man z.B. in diesem Video:

Sieht schick aus und ich denke, dass die eben genannten Sachen bald in den Massenmarkt Einzug (iPhone, Surface oder MacBook Air) halten – also Multitouch Screens und “sexy” Applikationen.

Eine etwas andere Art hat Microsoft vor einiger Zeit mal vorgestellt: Wie wäre es, wenn man die reale Welt und die virtuelle Welt miteinander verknüpft?

Eine längere Fassung gibt es hier zum Ansehen. Finde ich persönlich doch schon recht beeindruckend, auch wenn das Auto nur eine Projektion war.

Virtuelle Sachen “anfassbar” machen, hat auch ein anderer Hersteller versucht mit seinem so genannten “FogScreen”:

Solch ein FogScreen stell ich mir allerdings etwas unhandlich vor – daher gehen wir mal nun zum Non-Plus-Ultra über:

Holografische Screens wie bei Star Wars:

Welcher Nerd wünscht sich sowas nicht daheim? Das noch mit den anderen Sachen clever verknüpft und es wäre absolut “wow” \o/

Wie man sieht:

Konzeptionell gibt es bereits einige interessante Ideen – was tatsächlich umgesetzt wird und in der Realität angelangt, ist eine andere Sache – sicherlich hab ich auch noch viele Sachen vergessen. Unter User Interface würde auch sowas wie Sprachsteuerung etc. fallen – das fehlt hier allerdings.

Fazit: Spannendes erwartet uns

Jeder der Minority Report gesehen hat, wird sich so ein User Interface für Daheim wünschen – per Gesten witzige Sachen zu vollführen freute jeden, insbesondere die Nerds & Geeks.

Microsoft Surface ist dabei schon eine nette Sache – leider für Privatleute momentan (und wahrscheinlich in nächster Zeit) unerreichbar.

Johnny Chung Lee hat vor einige Zeit sein Wii Project der Öffentlichkeit gezeigt:

Das ist natürlich schon ziemlich cool – aber wie wäre es, wenn man das ganze noch mit einer WPF Applikation verknüpft?

“Project Maestro” ist ein Prototyp welches mit WPF, Xaml, C# und der Wii Remote schon “fast” an Minority Report und den Surface Tisch rankommt (3D fehlt natürlich noch) :

Für alle interessierten: Connecting to the Wii Control with WPF

Mal sehn wann der erste sowas nach baut – ohne Touch Screen natürlich