i've finally found the ultimo mp3 integration for my auto.  i don't have a new car, i don't have an aux jack, and i'm no longer in high school where i care about deep bass or wicked features, my factory stereo works fine thank you very much.  fine, that is, except that i can't play my mass collection of audio (unless i do it 6 CDs at a time).

well, i've found it.  unfortunately the actual store is in atlanta, ga, usa.  a little too far for me to drive and get it installed...so i begin my research of installing it myself (yes, i know i'm about to venture on a bad idea).  the company provided me with the installation manual so i can assess my pre-purchase jitters.  while the end result of the installation looks incredibly wicked cool (the kind that will make the skool kidz say "d00d"), it isn't as easy to install (to the lay person who doesn't install car stereo equipment on a daily basis).

but the company has provided me with some complete expectations post-install.  in a way they're providing me some pre-warnings on my user experience.  here's a choice statement from their guide:

The <productname> module is a very complex piece of hardware that is responsible for very complicated communications between your <mp3 player> and your <car>.  It will not just "work" once you plug it in.  Much like a computer, it requires patience and an understanding of the hardware and its operation to use.  You MUST be patient when operating the integration kit.  The <productname> has a learning curve.

i was laughing.  mother-in-law proof?  um, no.  the words complex, patient, and phrase 'not just work' are repeated...that's a goucher for sure not being mo-in-law proof.  yes, they reall have the word work in quotes.  it is beautiful.

but it makes me think if this is a good user experience or not.  after all, if i acquire the product, the expectations are being set clear for me.  does that make it a good ux?  i think about these scenarios in software development as well, namely in the initial deployment stage.  if companies writing software go out and say "okay, this is a great piece of software, but you have to ensure that your flux capacitor has been modified with the latest plugin and your alarm shields are down -- only after that will things work...be patient" would that enhance their product?

i think sometimes we are limited in scope what we can do in setting ux expectations (clearly this particular manufacturer hasn't ironed out the ideal kinks in their system, or perhaps they have and thus are delivering the best possible solution to us old car dweebs) and our users suffer.  lowest. common. denominator.  if you are developing your solution both technically and how your users will interact with it, you must take into account the turn on experience (or out-of-box experience).  first impressions are said to be lasting ones.  will yours be one?

well, in my previous examples, i was using a free linux hoster.  i found another one that was much more reliable from a responsiveness standpoint, but found a snag and wanted to share.

you see on some free hosters, in order to be free they'll add banner adds to your pages.  for my purposes, who cares.  i signed up with this particular one and none of my samples were working.  huh, weird i thought.  until you look at the error message of 'unknown namespace' from silverlight.  ahh...

you see what the free host was doing was injecting their banner ad code into *every* served request.  so when the xaml page was requested, it was being injected into the root of the xaml, thus putting in stuff like <div>my banner ad</div> before the root <Canvas> node.  the silverlight parser looked at that and said 'sorry man, homey don't play that.'

argh, off to find another...anyone know of a good free linux host (ad supported is okay as long as it doesn't do the above)?

i saw a post over in russell myers' land seemingly acknowledging the confusion that might be out there of hosting silverlight.  he noted my previous post about the topic.  in his note though, russell mentions:

...it seems entirely possible to take a Silverlight application and integrate it on an existing Apache server to create a Silverlight experience within PHP or any other language that can embed the XAML content.

he's right on here, in fact, i'm not sure even samples will do it justice, but i tried anyway :-).  take for example another quick swag sample using flickr.  how can i use flickr services via php, get some images and display them in a silverlight application?  simple.

first, let me stress again 2 things: i'm not a php developer (so be kind on my code) and i'm not saying this is the end-all-be-all of samples...just merely making a point.

in this example my goal is to have a form that accepts user input, which in turn does a tag search on flickr for some images using their REST api's via PHP.  those images are then referenced in a silverlight control that creates a simple little control displaying the image and then for completely gratuitous reasons adds a web 2.0 reflection on the bottom of them :-).

here's what we are doing...first, the php application.  now, in my sample here that i'll provide a link to (btw, i'm using a free host that appears to be having issues, so unless someone can point me to a free, reliable PHP host that is what i'm stuck with) we are using flickr's REST apis.  i'm using a pre-packaged PHP library for flickr called phpFlickr oddly enough.

step one is creating the php interaction (did i already say i wasn't a php developer?).  here's my basic code:

<?phprequire_once("phpFlickr/phpFlickr.php"); $flickr = new phpFlickr("YOUR API KEY HERE"); $i = 0; $tagName = $_POST["flickrTag"];if ($tagName == "") { $tagName = "silverlight"; } $photos = $flickr->photos_search(array("tags"=>$tagName, "tag_mode"=>"any", "per_page"=>"6", "page"=>"1")); ?><script type="text/javascript"> <?foreach($photos["photo"] as $photo) { $purl = $flickr->buildPhotoUrl($photo, "Square"); echo "photoArray.push(\"$purl\");"; } ?></script>

so we are essentially calling out to flickr and getting a search result back.  now when you look at the foreach loop here's where you'll see the silverlight 'integration' part 1.  in another javascript file i have declared a global javascript array called photoArray.  in my loop here, i'm essentially building out the URL to the flickr photo and then jamming that into the array object.

once the content i need to manipulate for silverlight is in my javascript (or .NET code for v1.1) objects, they are on the client.  read: no more server stuff... so really in this sample and others, PHP is simply providing some data, whether directly itself emitting XAML that will be consumed (as in this screencast), or providing data for the client to iterate through and create XAML elements on the fly in my sample here.  in my example, with this new photoArray i'm instantiating a simple little control i had added (this is the ThumbnailImage.xaml file in the download) -- essentially a pre-build glob of XAML representing my end result. 

i iterate through the array and create those elements:

for (var i=0; i < photoArray.length; i++) { var rimg = this.control.content.createFromXaml(xamlFrag, true); this.root.children.add(rimg); new PhpFlickr.Thumbnail(this.control, rimg, photoArray[i], left, top); left += 80; }

the PhpFlickr.Thumbnail object is a javascript prototype class that sets the canvas' inner elements to the image reference.  you can learn about creating these little user controls for silverlight here (v1) and here (v1.1):

PhpFlickr.Thumbnail = function(control, target, imageSource, x, y) { this.target = target; this.thumb_image = target.findName("Thumbnail"); this.thumb_reflex = target.findName("ThumbnailReflect"); this.thumb_image.Source = imageSource; this.thumb_reflex.Source = imageSource; this.target["Canvas.Top"] = y; this.target["Canvas.Left"] = x; }

the end result of this sample looks something like this:

so as you can see, very little php code happening here...and that is kind of the point!  yes, silverlight can be served up via any web server, and yes, silverlight can be used with any technology.  again, my sample may not resonate to "get it" for you, but hopefully you will see the point that the interaction is on the client.  so if you have php web services, great, silverlight can use them.  if you want php to dynamically generate xaml and deliver it to the silverlight control, yes that can be done.

the sample is online here (again, shared/free host so don't hate me if it isn't up/working), and the sample code is below at the end of this post.  i hope this helps clear some things up again, if not, please let me know.

Sample Code: SilverPhp.zip

UPDATE: visit rob relyea's post on more mime types for all xaml supported apps including xaml browser apps as well.

i've been seeing some discussion lately about hosting silverlight.  maybe i can take a moment here to help clarify some things and show some options.

there are hosters out there that are promoting as silverlight hosters.  while i think that is great, i think some of the messaging has confused others.  for example, if you go to a hoster that doesn't list silverlight support, are they incapable of hosting silverlight?  no.

in fact, a windows server isn't even required for straight-up silverlight hosting.  of course the caveat here being if your silverlight application is embedded within an asp.net application, then yes, of course, windows would be needed.  but lets assume simple lame examples here.  i took 10 minutes (longer to find a good rated one) and setup a free linux host account.  the particular host i selected is running apache 1.3.37 on some unix blend (read: no windows).  i created a silverlight 1.0 application and a silverlight 1.1 application.  i logged in to my free account, uploaded the files, and voila.

• sample 1: silverlight 1.0 lame application served via apache
• sample 2: silverlight 1.1 lame application served via apache with c# code
• sample 3: silverlight application media player served via apache (sample code here)

so there you have it, no windows and still silverlight.  why?  well the server just needs to deliver the assets to the browser (where the plugin is) -- as silverlight is a client technology.  apache is even just serving up the windows media file as a progressive download.

so in 10-15 minutes i created 3 lame applications, a totally free *nix/apache host and put up some silverlight.  proof enough?

now what about windows you ask?  some of you may have listen to the most excellent .NET Rocks! podcast.  some of you may have even heard the recent silverlight discussion with shawn wildermuth.  in that show carl mentioned to shawn that he had to install .net 3.0 on his windows server to get silverlight to work.  as i was listening to this (as i'm sure shawn was) i was confused.  it was a time i wish .NET Rocks! was live so i could call in talk some smack.  but carl's not a dumb guy and although they didn't debug the situation on his show, he did bring out a point.

you see, your typicall windows server installation these days with iis6 is pretty locked down.  so much to the point that unknown file types are served 404 style from the server (which i believe what was happening to carl).  it's been pointed out a few times in the forums as well.  what is going on you ask?  well, likely it is the .xaml file.  iis6 doesn't know this file type and there is no wildcard mime types set up to just allow freestyle.  if you find yourself in this situation, don't panic.  simply add the mime type (file: .xaml; type: application/xaml+xml -- or you can even use text/xml -- there are reasons you might want xaml+xml for XAML browser apps, etc.) and you are fine.  in fact if you are in a shared host environment and they don't have that setup, you can't get to it, whatever then guess what: just rename your xaml files to .xml -- or heck .txt.  now this may pose some annoyances in your dev toolset, but it is a workaround.  where do you change MIME types you ask?  when you start the iis manager, you can right click on the server name, choose properties and you'll see a mime types button -- go there.  this will change it globally.  you can also just add on a per site basis if desired, just look in the site properties.

so why did carl think .net 3 was required and it was working after he installed it?  well, .net 3 supports XAML browser apps (xbaps).  the installation of the framework adds the supported types for you if iis exists.

what about other hosting options.  well, there is also silverlight streaming services, a free service from microsoft enabling you (currently) 4GB of space and will essentially host your silverlight application for you and enable various ways of streaming it out via code or through simple iframe calls as well.  this requires no server on your part :-).

so let's replay our options here for silverlight hosting:

• windows required: no
• must be silverlight enabled: depends on how locked down the server was, possible mime type change is all that is needed
• *nix/osx/pick-your-os: yes as long as a web server can respond to HTTP GET
• silverlight streaming services

i hope this helps clear things up and at least not make them more murky waters for you.  if so, drop a comment and lets clear it up.  i think it is great hosters are recognizing silverlight and are noting it as a feature for their customers to look for, but just remember that any web server can serve up silverlight content.

well, you've seen the flurry of tafiti no doubt (at least if you are a regular subscriber to things silverlight).  i'm not here to say "go check it out" and add another post to the flurry, but instead to perhaps look at why tafiti is important.

you see, when i look at the site, i think it is cool, interesting, unique, <insert-favorite-word-here>.  but at the same time i'm a little opinionated about the ui design choice.  i should be clear that i'm no professional designer at all, and all of this is my opinion of course.  but i look at the home page of tafiti and i see a lot of things going on and elements that i'm not sure interact with each other.  there seems to be a theme of some type of desk/drawer.  maybe i'm just not a fan of woodgrain :-).  now because my mom is a librarian and i grew up singing family songs about the dewey decimal system (ah, good times), i can visually see that this drawer emulates a card catalog box (hence the single hole punch in the search box area), but are those elements matched with the other experiences?  i feel like i'm looking at a card catalog sitting in an ocean scene.

perhaps i'm being too picky (and i'm sure i am).  but one of the most unique features of tafiti is not being demonstrated in the user's face enough IMO and maybe should be a default view given this experimental project.  that's the tree view i'm speaking of.  what?!  you haven't seen it?  do a search and then in the top there is a link to "tree view" -- click it now.

and there in lies the importance to me of tafiti.  a different experience on search.  you see, the default search results are just that -- default.  they give me a header and some initial text sorted (apparently in relevant order).

SIDENOTE: when i do a search in tafiti that is powered by live search (i thought) the search results are different then when i go to live.com.  hmmm...

here's where i think rich internet applications (beyond rich media experiences) have a real opportunity to excel...different visualizations of data.  why is that important?  well, i'll take it from my perspective as not to assume i speak for the rest of the human race.  for me, tafiti is good and there are some demonstrations of the platform of silverlight, etc. -- but for me at the end, it still is search.  until you see the tree view.  here's a look:

you see the tree view "grows" a tree out of the results (i'm still trying to understand the sort order, but for this purposes this is irrelevant).  each branch becomes a result and sways in the wind in front of you.  one could argue (i'll be that one) that this might not be the best demonstration of this visualization (because you want to see relevant data in searches displayed more prominently), but the point is that it is a different twist on an existing problem domain.  i find myself going back and playing with the tree view for the silverlight aspects, but also to see if it does make some sense from a presentation sense for the results...either way it has kept me engaged on something that is old hat: search.   and to me, that's where rich internet applications can excel.

let's take another example using this same paradigm, family trees.  i'm huge into genealogy.  i've researched my family as far back as i can take it without digging out old documents in libraries that i don't have access too.  my tool of organization for this has historically been personal ancestry file (affectionately referred to as PAF).  for the most part, PAF is an excellent tool and gets the job done.  pedigree charts can be rendered just like any other pedigree chart in every other online/offline application.  then came mix07 and my friend scott stanfield and his team at vertigo.  what did they do?  they took a different look at an existing problem domain.  the result?  family.show.  you see, they didn't re-invent genealogy nor the pedigree concept, but the provide me a new visualization of the information...keeping me engaged and wanting more as a user.  take a look:

they are showing my family tree as real people, not flowchart lines.  oh, and they give me instant clues as to what i'm looking at: the star is me, the line connecting my wife, the fact that we have children, my sister and the fact she has children.  oh, and bill, my half brother -- they even provide a view on that challenge of representing multiple lineages that intersect.  (note: i don't have a half brother, but added that here to show a point.)  another cool feature vertigo added was the timeline snap.  curious what the family tree looked like years before?  move the timeline:

notice the grayed out areas -- they aren't gone, but filter out in the background showing what the pedigree looked like at any given time.  sweet.  family.show has provided a new experience on an existing problem domain.  and in doing so has made it a rich experience, an engaging one, and one that gets me excited again about the topic.

so what's my point?  who knows really :-) -- in a nutshell it is bravo vertigo and tafiti, for providing some unique differences on existing scenarios.  thanks for helping me understand that "rich internet application" doesn't have to always mean "new idea" all the time.