Category: Uncategorized Bits

Great Work from Hugh Macleod

Ok, I am not one to laugh out loud while trudging through voluminous stacks of bytes on the Internet, but this was one of the cartoons that got me recently.  Yes, and I buckled under the realistic hilariousness of this one.

http://gapingvoid.com/2009/05/25/httpgapingvoid-com20090525now-accepting-private-commissions-for-moleskines-and-cube-grenades/scc001b/

I'm Not Sold on HTML 5

Ok, let me get this straight.  HTML 5 is supposed to offer RIA (Rich Internet Application) type abilities to the browser rendered (i.e. no compile, Just In Time-JIT) web.  How JIT & no compile, markup based, mixed platform technologies are supposed to offer a comparable performance and UX/UI experience seems sketchy at best.  Now let me clause with, I am not writing this idea off, just hesitant to believe that there will be comparable performance to frameworks such as JavaFX, Silverlight, or Flash.  With out of browser Silverlight, or Adobe AIR Apps, or heaven forbid WPF based RIAs there really is NOT a performance comparison.  I can safely assume that Silverlight & WPF (mainly because I've seen them perform) will smoke HTML 5 for advanced rendering or solid advanced RIA style interfaces.  Especially in a Line of Business (LOB) type application.  There just is NOT a comparison in this sense.

The video & audio elements are an entirely different rant.  Sure, it looks great, the O3D demo looks great, but this is still not going to compare to Silverlight or Flash.  These tools are going to smoke HTML 5.  The complexity of getting video, audio, and these other advanced elements of HTML 5 supported has the same issue as Silverlight has for penetration.  Sure, the browsers will start having these things built in, but that will be completed about the same time as Silverlight has similar market penetration as Flash (i.e. the 98th percentile).

Now some, such as Matthew David, wax somewhat poetically about HTML 5.  His article Inside HTML5:  The Browser becomes a first class RIA citizen is an interesting read.  He obviously has great enthusiasm behind this idea.  But I'm not buying it.  The technology is not comparable, HTML is band aided already beyond belief (remember, it was supposed to render documents for linking kind of like a library – NOT for all the advanced things people tend to try and use it for these days).  HTML 5 is merely another band aid, albeit a bigger band aid, then the last several versions of HTML.  The core focus of the markup at this point is basically ignored.

The Positive

The cool thing, I will admit, is HTML 5 does add a lot of options to the browser based web.  I don't think we'll keep going down this rather archaic version of the web forever, but it does provide a stop gap between much more interactive applications.  It also provides a stop gap fix for companies that aren't ready, for whatever reason, to jump on the RIA bandwagon.  HTML 5 will provide great features, but I just don't see it as a prime mover, but more of a stop-gap between the next best way to connect to the web.  Maybe that is Silverlight, Flash, and AIR, or maybe it is some other type of platform or tool.

In the end, something will definitely eclipse HTML 5, but HTML 5 will be great in the meantime.  At least until we run out of fingers to poke in the holes of the dam (i.e. HTML 5).

Sketchflow and Clients

Sketchflow is a project template type that can be created to quickly prototype application design, quick UI experiments, and communicating design intent.  I decided, to get a bit more practiced at using the Sketchflow capabilities, that I would write a quick tutorial on starting and creating a basic Sketchflow Application.

First step, open up Microsoft Expression Blend 3.  Then click on File and then New Project.  In that dialog you will see the available Expression Blend Project Templates.  For this tutorial I selected the Silverlight Project Types, then the Silverlight 3 SketchFlow Application Project Template to the right.  (Click for full size image)

When the project opens up a standard XAML screen will be displayed called Screen 1 (Screen 1.xaml).  There is also a SketchFlow Map, if it is not showing use Shift + F12 or select Window and then SketchFlow Map on the menus.  That will get the following screens showing.  Feel free to position those wherever you need them to work within the SketchFlow Map.  (Click for full size image)

Next right click on the Screen 1 Node and rename the node to Set Credentials.  Now hover with your mouse over the node until the utilities drawer shows up.  Click on the Create a Connected Screen icon in the utilities drawer and hold down and drag.  This will allow you to create a connected node.  (Click for full size image)

I created each node as shown, one for the Set Credentials, View Scorecard, and Select Reports screens.  In the Projects tab that shows the Solution and the XAML files I renamed each file so it is easily referenced to the node that the XAML file represents.

Now that each screen exists, I have created the following screens.  The first one of course, is the Set Credentials Screen/SetCredentials.xaml.  The XAML is below to make creation of the screen super easy.

[sourcecode language="html"]
<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:pb="clr-namespace:Microsoft.Expression.Prototyping.Behavior;assembly=Microsoft.Expression.Prototyping.Interactivity"
    x:Class="AnalyticsScorecardApplicationSketchScreens.Screen_1"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot" Background="White">
        <TextBox x:Name="textAccount" Height="25" HorizontalAlignment="Left" Margin="79,88,0,0" Style="{StaticResource BasicTextBox-Sketch}" VerticalAlignment="Top" Width="136" Text="webtrends_com" TextWrapping="Wrap" ToolTipService.ToolTip="Enter your account here."/>
        <PasswordBox x:Name="passwordBox" Height="25" HorizontalAlignment="Right" Margin="0,88,103,0" Style="{StaticResource PasswordBox-Sketch}" VerticalAlignment="Top" Width="136" Password="XXXXXXX" ToolTipService.ToolTip="Enter your password here."/>
        <TextBox x:Name="textUsername" Height="25" Margin="241,89,263,0" Style="{StaticResource BasicTextBox-Sketch}" VerticalAlignment="Top" TextWrapping="Wrap" ToolTipService.ToolTip="Enter your username here." Text="Adron"/>
        <Button x:Name="buttonLoginSetCredentials" HorizontalAlignment="Right" Margin="0,159,103,0" Style="{StaticResource Button-Sketch}" VerticalAlignment="Top" Width="201" Content="Login &amp; Set Credentials">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pb:NavigateToScreenAction TargetScreen="AnalyticsScorecardApplicationSketchScreens.Screen_1_3"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        <TextBlock HorizontalAlignment="Left" Margin="81,60,0,0" Style="{StaticResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Text="Account" TextWrapping="Wrap"/>
        <TextBlock HorizontalAlignment="Left" Margin="242,60,0,0" Style="{StaticResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Text="Username" TextWrapping="Wrap"/>
        <TextBlock HorizontalAlignment="Right" Margin="0,60,181,0" Style="{StaticResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Text="Password" TextWrapping="Wrap"/>
    </Grid>
</UserControl>
[/sourcecode]

Now that we have this screen, I will step through some of the things I did to make this screen functional for the prototype.  The main thing, is to assure that the button is linked up to the right navigation.  Right click on the button and look for the Navigation items and select the screen it will navigate to, as shown below.

Next create the following two screens to show the appropriate navigation and screens to navigate to.

Select Reports / SelectReports.xaml Screen









[sourcecode language="html"]
<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:pb="clr-namespace:Microsoft.Expression.Prototyping.Behavior;assembly=Microsoft.Expression.Prototyping.Interactivity"
    x:Class="AnalyticsScorecardApplicationSketchScreens.Screen_1"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot" Background="White">
        <TextBox x:Name="textAccount" Height="25" HorizontalAlignment="Left" Margin="79,88,0,0" Style="{StaticResource BasicTextBox-Sketch}" VerticalAlignment="Top" Width="136" Text="webtrends_com" TextWrapping="Wrap" ToolTipService.ToolTip="Enter your account here."/>
        <PasswordBox x:Name="passwordBox" Height="25" HorizontalAlignment="Right" Margin="0,88,103,0" Style="{StaticResource PasswordBox-Sketch}" VerticalAlignment="Top" Width="136" Password="XXXXXXX" ToolTipService.ToolTip="Enter your password here."/>
        <TextBox x:Name="textUsername" Height="25" Margin="241,89,263,0" Style="{StaticResource BasicTextBox-Sketch}" VerticalAlignment="Top" TextWrapping="Wrap" ToolTipService.ToolTip="Enter your username here." Text="Adron"/>
        <Button x:Name="buttonLoginSetCredentials" HorizontalAlignment="Right" Margin="0,159,103,0" Style="{StaticResource Button-Sketch}" VerticalAlignment="Top" Width="201" Content="Login &amp; Set Credentials">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pb:NavigateToScreenAction TargetScreen="AnalyticsScorecardApplicationSketchScreens.Screen_1_3"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        <TextBlock HorizontalAlignment="Left" Margin="81,60,0,0" Style="{StaticResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Text="Account" TextWrapping="Wrap"/>
        <TextBlock HorizontalAlignment="Left" Margin="242,60,0,0" Style="{StaticResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Text="Username" TextWrapping="Wrap"/>
        <TextBlock HorizontalAlignment="Right" Margin="0,60,181,0" Style="{StaticResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Text="Password" TextWrapping="Wrap"/>
    </Grid>
</UserControl>
[/sourcecode]

 


 



















View Scorecard / ViewScorecard.xaml Screen


[sourcecode language="html"]
<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:pb="clr-namespace:Microsoft.Expression.Prototyping.Behavior;assembly=Microsoft.Expression.Prototyping.Interactivity" xmlns:local="clr-namespace:AnalyticsScorecardApplicationSketchScreens"
    x:Class="AnalyticsScorecardApplicationSketchScreens.Screen_1_3"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot" Background="White">
        <Button HorizontalAlignment="Right" Style="{StaticResource Button-Sketch}" VerticalAlignment="Top" Width="122" Content="Select Reports" Margin="0,24,158,0" Cursor="Hand">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pb:NavigateToScreenAction TargetScreen="AnalyticsScorecardApplicationSketchScreens.Screen_1_4"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        <Button Style="{StaticResource Button-Sketch}" Content="Set Credentials" Cursor="Hand" Height="30" HorizontalAlignment="Right" VerticalAlignment="Top" Width="122" Margin="0,25,19,0">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pb:NavigateToScreenAction TargetScreen="AnalyticsScorecardApplicationSketchScreens.Screen_1"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </Grid>
</UserControl>
[/sourcecode]

That’s it for this entry.  For now this is a complete working SketchFlow Application.  Just run it and you’ll see a screen that you can navigate around as shown below.

I’ll have another one when I get to fleshing out the various parts of the prototype more.  I intend to do a complete work-through, but we all know about intents and blog entries.  So I shall see.

Toy Adobe AIR Apps, Social Media Gets a Kick

Outlook and the team responsible for said product, are really pushing hard for the 2010 release.  Of course, I can’t talk about it, but yes, I have seen it and it looks & plays awesome!  However, social media got a slight extra kick from Microsoft recently with the Outlook Social Connect.  The Webtrends blog has an entry up Outlook’s Social Connect:  Social isn’t just AIR toys anymore! by Michelle Anderson.

This got me thinking about various efforts that I know are going on to bridge a lot of this social media deluge.  I get the feeling there are going to be some truly breathtaking applications hit the scene in the later part of the year or even early 2011.  My curiosity hangs around what will they bridge?  Outlook is a prime example of bridging data points that become truly useful information.  With all the addins that Outlook encompasses, one truly becomes a powerhouse power user with a tool like Outlook.

I have been working on some things myself, including proposing a new open source library to bring together services into a centralized library for ease of use.  Anyone got any ideas on that?  Interested?  Thoughts on which services should be brought together first?  The following are the services I am thinking about providing libraries for initially.

The reasoning behind these of course, is purely selfish.  I want to have easy access via an API to these services because I use them.  In addition, I figured there are others out there that may like a centralized library.  So toss me some ideas of other services, if anything, I can maybe create a starting point.

iPhone == IE6 ? Yeah, You Heard It? iPhone Dev is?

So I was reading some blogs related to Windows 7 on Mobile and iPhone Development.  I will say right off, I am biased AGAINST developing for the iPhone because the development environments, language, and other characteristics are horrible.  Horrible being a kind way to put it.  The iPhone may seem like some whiz bang advanced phone, but the development of it is somewhat archaic at best.

This character quirksmode wrote a great write up about The iPhone Obsession.  In the write up the IE6 and iPhone Parallel is drawn.  Eerily the writer makes a VERY good point.

For now, that is all, I liked the write up and want to do more mobile development, but the iPhone Development has got to feel some heat and either modernize and improve, or die.

I will admit, I love my iPhone.  Again though, I hate developing for it and the process compared to developing for most other things.  Even developing for the previous Windows Mobile Phones was better.  Albeit Windows Mobile phones of the past where HORRIBLE in UX and UI overall.  No comparison there.

I do see though, if Microsoft plays their cards right, they could make some serious inroads to Mobile Development with Windows 7 Mobile.  The initial screen shots and descriptions I have heard seem pretty awesome.  Some very very picky developers I know have seen and played with some of the devices, and they love it.

So we shall see.  May the battle begin!