Music, SxSW

South By Southwest Panel & Workshop Proposals

Today the Panel Picker for South by Southwest 2014 goes live.  For those of you who haven’t heard of South by Southwest (or SXSW), it is an annual music, film, and interactive conference in Austin, Texas in March.  In 2014 it will be March 7-16.  I have gone the past 5 years and have seen it as my “creativity recharge” where I get a full share of great conversations, discussions, and ideas for the coming year – there’s great music as well – I sketched a number of artists this year.    Based on my work as a technical evangelist at Microsoft and as an avid Journalist (one who keeps a journal), I have created two proposals for SXSW 2014 and if they sound interesting to you, please vote for them – even if you aren’t planning on attending.

The Physical Journal in a Digital Age

For the past 20 years while I have been employed in the world of software development, I have kept an avocation of creating physical journals.  This proposal is for a workshop on techniques for creating and keeping rich journals that I would be doing with my main journal supplier, Mychal Mitchell of Iona Handcrafted Books.

Details and Vote Here

Creating Connected Media Experience Packages

Over the past year I have been working with the record labels as part of a consortium to develop a new way of packaging music experiences with open technologies and standards, the Connected Media Experience (CME).  As part of the work, I published a Windows Store app, Authentic and in this panel, I will be joining Howie Singer from Warner Music and Prabhu Anbananthan from Sony DADC to talk about creating, playing and distributing CME packages.

Details and Vote Here

Voting takes only a minute or so and will help determine whether these sessions get selected.

Related Posts:
IxDA 2010 Workshop on Team Play
Tip 351: Expand your view
Silverlight and Web Analytics – the Next Generation
Windows Phone Launch
VizNotes Visual Note-Taking Workshop

Animation, Windows 8, Zoetrope

How Zoetrope can Create Movies from other Apps

When I was creating Zoetrope, I wanted to make it easy for other apps that work with images to take advantage of Zoetrope’s capabilities and create videos from those images.  There are two easy ways to do this with Zoetrope: using the file picker contract and using the share contract.

image

File Picking Contract

In Zoetrope, pressing the Add photos button opens the file picker which shows images from any apps that supports the file picking contract.  One interesting scenario is with SkyDrive – where you can use SkyDrive on the web, Windows, Windows Phone, Mac, or mobile apps (iOS, Android) to capture photos and then use the Zoetrope to create the animation.

Share Contract

The File Sharing contract enables apps to share data and content with other apps in a structured way.  Zoetrope acts as both a share target and share source.  As a share target, any app that shares images as StorageItems with Zoetrope will open a share pane and allow the immediate creation of a movie from the images.  As a share source, Zoetrope will create and share a .mp4 video of the current animation.  Decrease the speed to 0.2 FPS and you have an instant a slide show movie from a series of your photos with a 5 second interval!  In the screenshot below, the Authentic app is sharing a collection of images from a media package with Zoetrope to create a slide show video of those image:

image

Related Posts:
Zoetrope: Create Motion from Pictures on Windows 8
Halo 3 on MSN
How the lessons of Industrial Light Magic may portend the future for interactive designers
Tip 334: Design apps for Windows Phone
Windows Phone Launch

Animation, Media, Video, Windows 8, Zoetrope

Zoetrope: Create Motion from Pictures on Windows 8

PromoImage.414x180I just published Zoetrope a Windows Store app that makes it super easy to create movies from still photographs.  My inspiration for this app is seeing my boys build and play with LEGO and create adventures with their creations.  I wanted to make it easy for them to create movies with devices like the Surface RT which, with its back-facing camera, can serve as a perfect camera and film studio all-in-one device.

Screenshot (22)

Here is a move that my son Alex (age 11) just made with a Microsoft LifeCam Cinema attached to my PC

The Engine Behind this App – Media Foundation

To make this app work, I needed a way to create a video from a series of still images.  I started with this sample, creating a C++ WinRT component that had a simple interface where I pass an empty video file, a collection of image files, a width, height and frames per second:

IAsyncActionWithProgress<double> WriteAsync(
            IRandomAccessStream videoStream,
            Array<StorageFile> imageFiles,
            unsigned int width,
            unsigned int height,
            double framesPerSecond)

Once I did that, creating a Windows Store app around it was easy.   

Sharing Target

imageIf you have an app that creates or manages pictures and it shares those pictures (PNG, JPEG, ICO, GIF, or TIF) as a collection of StorageItems, Zoetrope can use those as a share target – giving your app an easy way to make stop-frame animations or slide show videos.

Sharing Source

Zoetrope can also act as a sharing source to share the movie that you are creating with someone via email, to SkyDrive, to your Windows Phone, or any other app that is a share target for .mp4 videos.

Multi-Camera Movies

Using the PeerFinder, you can very easily make a connection to nearby PCs running the same app.  In Zoetrope, I wanted to make it easy to use another PC to simultaneously capture photos and then send photos or videos between the two PCs.  The PeerFinder works over TCP/IP, Bluetooth or Wi-Fi Direct and supports the following scenario once the connection is established:

  1. Pressing the photo button on the controlling PC takes a photo on the controlled PC.
  2. After photos are take, the user can select individual photos and then press Send to send the photos to the other PC or create a movie and send that to the other PC.

In Zoetrope, I only work with a single pair of PCs, but from looking at the API, I could have simultaneous connections between multiple PCs – that could get pretty interesting.

Printing a Zoetrope

imageEver since I was a child, I’ve loved creating things with paper and wanted to come up with a way to print out the images to make a cut-out Zoetrope device – this is a work-in-progress and any feedback would be appreciated.  Like all Windows Store apps, open the Devices charm and select a printer

 image

Play-To Support

If you have a DLNA-compliant TV and want to use it as supplemental monitor when making a Zoetrope movie – whichever image you select is sent to the wirelessly connected TV.

Localization

Zoetrope is available in all markets worldwide but is only in English today.  I have globalized the app and I’m ready to add language-specific resources to it.  If anyone is fluent in other languages and would like to translate a resource file for me, please send me a message – I will add you to the app credits if it works out!

Share The Movies That You Create

In my career, my passion has been in crafting tools to support creative design processes and for me this is the next step in that journey.  If you create a movie with Zoetrope, please post it as a response to Alex’s movie here.

Related Posts:
How Zoetrope can Create Movies from other Apps
Tip 334: Design apps for Windows Phone
Windows 7 Sensor Trigger for WPF Applications
About Chris Bernard
Dotfuscator for Windows Phone Released

Azure, JavaScript, Music, Windows 8

Authentic: a Connected Media Experience Player

For the past year I have been working with the record labels (Sony Music, Warner Music Group, Universal Music Group) on building a new way of creating digital connected albums, called Connected Media Experience, or CME.    It is based on a zip package with an XML manifest and HTML, JavaScript, CSS, and media content within it.  Throughout the process of developing the specification I have served as Microsoft’s voice on the technical working group and steering committee and helped drive the specification towards completion of a version 1.0 document – which you can download for free here.  As you look at the specification, you will notice that it is based on industry standards like zip archives, HTML5, CSS, JavaScript, WOFF Fonts, h.264 video, MP3 audio, JSON, RSS, ATOM, JPEG, PNG, and GIF – nothing proprietary or device-specific.

As I was working on the technical working committee, I found it necessary to start prototyping a CME player and experimenting with building packages.  Building technology while writing the spec helped us write a more complete and usable specification – and helped us find inconsistencies and problem areas early on – when they were easy to fix.  The prototype evolved and I finally released it yesterday as a free Windows 8 App, Authentic.

Screen shot 2

The first version of this app plays back the CME Packages and shows packages in your My Music and SkyDrive as well as an Azure service.  I am working on enabling authoring tools in the app to make it possible to create CME packages as well as Windows 8 apps that wrap those packages in future versions – so CME Packages could be sold as apps in the Windows Store.

Though the CME format was conceived of for music experiences, there is really nothing in it that precludes it from being used for any other type of publishing.

Technical Details

  • The App is built in HTML, CSS, and JavaScript with some parts built in C# and exposed as Windows Runtime Components
  • The package is a Zip archive with a .CME extension – with an XML manifest, HTML, CSS, JavaScript, MP3, and h.264 video – and WOFF Fonts
  • Download the spec here http://connectedmediaexperience.org.
  • This works by unpacking the Zip archive into local storage and then setting up an iframe which points to a http://localhost:xxxx service.  I setup a StreamSocketListener in the app to get all HTTP get traffic to that port and then just serve up the files that are requested.
  • When .html files are requested, I inject additional CSS and JS to make it feel like a native app on Windows 8.

The first CME Package available for testing and demonstrations is based on content from John Common which includes video, images, music, liner notes, and biographical information.  It uses jQuery and Knockout JavaScript libraries for UI and data templating capabilities.  Download it here.  If you want to see the simplest package possible, download this.

How You Can Participate

  • Create CME Packages using the HTML skills that you already have learned for building websites.
  • Build players for other platforms like Windows Phone, Android, and iOS.
  • Build authoring tools and workflows to ease the creation of CME packages.
  • Join the Connected Media Experience consortium to join the discussion and drive the evolution of this exciting format.

  • 5/31/2013 – MSS: Added a link to a simple .CME package.

Related Posts:
South By Southwest Panel & Workshop Proposals
Tip 292: How connected are your connections?
Sketchflow Part 2 – Fast and Easy Interactivity
Digital Brand Experience Matters
UX is Game Theory

Uncategorized

Windows Store App Xaml GridView with Variable Templates

image

One of the useful controls to use when creating a Windows Store app for Windows 8 is the GridView which can use a VariableSizeWrapGrid to support item templates of varying size.  Using this in conjunction with an DataTemplateSelector makes it possible to vary both the size and data template of the items in a GridView.  Here is how you do it:

Setting the VariableSizeWrapGrid Item Height and Width

The VariableSizeWrapGrid works with a unit size and you can define whatever unit size you want – each template should be a multiple of that.  In your GridView.GroupStyle, you should define the ItemHeight and ItemWidth.  Add the spacing between the columns & rows; based on the Microsoft guidelines, the height and width should be layed out on a 20-pixel grid and the spacing should be 10 pixels between each item.  So in this case each item would be 200x100 with 10-pixel spacing, so ItemWidth=210 and ItemHeight=110.

<GroupStyle.Panel>
    <ItemsPanelTemplate>
        <VariableSizedWrapGrid Orientation="Vertical" 
            Margin="0,0,80,0" 
            ItemHeight="110" 
            ItemWidth="210"/>
    </ItemsPanelTemplate>
</GroupStyle.Panel>

Create Data Templates for each item type

Create Data Templates in a resource file that would be used for each item type.  In this case, I have a ProjectItemTemplate and  FavoriteProjectItemTemplate in a Xaml resource file included in my App.xaml.  The FavoriteProjectItemTemplate shows a Gold Star (xE082 in the Segoe UI Symbol) and additional project information that I only want to load for favorite projects:

    <DataTemplate x:Key="ProjectItemTemplate">
        <Grid HorizontalAlignment="Left" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" Width="200" Height="100">
            <StackPanel Margin="5">
                <TextBlock Text="{Binding Name}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}"/>
                <TextBlock Text="{Binding Description}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
                <TextBlock Text="{Binding UpdatedAt}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
            </StackPanel>
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="FavoriteProjectItemTemplate">
        <Grid HorizontalAlignment="Left" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" Width="200" Height="210">
            <TextBlock HorizontalAlignment="Right" VerticalAlignment="Top" x:Name="Star" TextWrapping="Wrap" Text="&#xE082;" FontFamily="Segoe UI Symbol" Foreground="Gold" FontSize="24" Margin="0,5,10,0"/>
            <StackPanel Margin="5">
                <TextBlock Text="{Binding Name}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Margin="0,0,32,0"/>
                <TextBlock Text="{Binding Description}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
                <TextBlock Text="{Binding UpdatedAt}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[0].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" discussions" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[1].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" todos" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[2].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" files" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[3].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" text documents" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[4].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" dates" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[5].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" people" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
            </StackPanel>
        </Grid>
    </DataTemplate>

Create an Item Template Selector

The Item Template Selector is called each time a new item template is needed.  In this, you should pick the item template and set the number of columns & rows the item should span.  In this case if the project.IsStarred is true, then the template would use the FavoriteProjectItemTemplate and set VariableSizedWrapGrid to span 2 rows instead of 1.

    public class ProjectDataTemplateSelector : DataTemplateSelector
    {
        protected override Windows.UI.Xaml.DataTemplate SelectTemplateCore(object item, Windows.UI.Xaml.DependencyObject container)
        {
            var project = item as Project;

            var uiElement = container as UIElement;

            if (project.IsStarred)
            {
                VariableSizedWrapGrid.SetColumnSpan(uiElement, 1);
                VariableSizedWrapGrid.SetRowSpan(uiElement, 2);

                return App.Current.Resources["FavoriteProjectItemTemplate"] as DataTemplate;
            }

            VariableSizedWrapGrid.SetColumnSpan(uiElement, 1);
            VariableSizedWrapGrid.SetRowSpan(uiElement, 1);

            return App.Current.Resources["ProjectItemTemplate"] as DataTemplate;
        }
    }

Adding the ItemTemplateSelector to the GridView

On the page resources, add an instance of the ItemTemplateSelector and then reference it in the GridView.ItemTemplateSelector=”{StaticResources ProjectTemplateSelector}”

<support:ProjectDataTemplateSelector x:Key="ProjectTemplateSelector"/>

Responding to Changes in the Data Model

If the selection criteria changes and you need the selector logic to run again, just reset the selector.  Thanks to this StackOverflow answer for the assistance here.

var projects = this.selector.SelectedItems.Cast<Project>();

foreach (var project in projects)
{
    project.IsStarred = !project.IsStarred;
}

var itemTemplateSelector = this.selector.ItemTemplateSelector;
this.selector.ItemTemplateSelector = null;
this.selector.ItemTemplateSelector = itemTemplateSelector;

Summary

Varying the item template and size of items increase the visual interest of your app and can help highlight important differences when standard DataTemplate binding won’t work.

Related Posts:
Tip 262: Go template shopping
Tip 305: Silverlight with style
Tip 320: Make it easy with a template
Designing for Windows Phone 7
WP7 UI Guide and Design Templates

Design, inspiration, print design, UX

Print Design Ques for App Creators

Post image for Print Design Ques for App Creators

I’m going to date myself right out of the gate and get it over with. The first couple years of college I learned mostly print layout and mechanical drafting (I checked my Pine account twice a week in the basement of the math building…tease away). The mid-90’s was a chaotic time to step into technology. But, there were some nice benefits. Fast forward a few years and I would have missed perspective drawing, light and color study, and lessons on exploded assembly, eye flow, alignment and positioning.

Should it really matter that I used a t-square and cut print layouts from acetate sheets?

 
Yes, these are better days. Broadband internet and high resolution screen space has allowed us to return to the foundations of design. The eye candy of a style magazine, the full page hero image with beautiful text flowing atop, is now in an app designers’ bag of tricks. What’s old is new again. More accurately, rich, pleasing design practices are possible digitally. Here are some simple print lessons I love.

 

Full page photo-editorials

Hero prototype for Windows 8

In web design terms, a hero shot, describes high impact imagery either illustration or photography. This doesn’t have to be at the exclusion of your content, however. Fast Company Design does an amazing job with images. Watch as the page loads a full page hero shot and then loads the content around it. As you scroll down through the articles, you are offered an almost entirely visual browsing experience.

 

Eye flow

Visual movement helps you move a user’s eye through the content. Eye flow is important in any experience (you notice when it’s absent), but it becomes critical when you need to visually explain what your product does or what users need to step through to either get started or discover functionality.

Visual Flow Patterns

The eye tends to like what the eye likes. We see this time and again with eye tracking studies. Even when the page is poorly constructed, the eyes trace back and forth searching those familiar places. The patterns I learned to follow are ‘C’, ‘L’ and ‘S’ flows. Placing content and/or hinting along those lines can guide users though an experience quickly and without confusion.

There’s many more great print practices I could have included. If I missed your fav, let me know!

Related Posts:
Design Police | Bring bad design to justice.
iPad Sketch Prototype Template
Converting SVG to XAML with IE9 and the Microsoft XPS Document Writer
Silverlight in the News
Dear Kerning Game, A Love Letter

design process, inspiration, prototype, Prototyping, Windows 8

Prototyping Proportion for Windows 8

Post image for Prototyping Proportion for Windows 8

In preparation for a busy fall conference season, I’ve been furiously testing, retesting then codifying the methods I used to help brands prototype their Windows 8 app experiences. Afterwards each process trick gets a photo shoot (I’m not the best photographer, but the tripod helps).  Once I’ve paid the ideas due process, I can start putting them to words. What follows is a quick trick I discovered while tinkering with content proportioning.

Proportion is almost always referenced as; the rule of thirds, golden ratio, golden mean, golden number…apparently anything beginning with ‘golden’ will do. Windows 8 has already baked the rule of thirds right into the pie filling with OS functionality like Snap view. So I look at proportion in app design by its basic definition: relative size. Relationship of each piece to one another, like folding a sheet of paper in half and half the half, etc…

Early Days

Prototyping content sizing and placement is an action that comes early in the process but after you’ve decided the goals of the app and the coordinating user scenarios. Relative sizing choices come from that clarity. And once you understand users’ priorities you can then give those back to them visually with the experience. I call that empathy, but it’s simply facilitating great UX.

Post-it Notes for Prototyping Proportion  

 

I found that the easiest way to play with content layout and variety is with Post-it notes. Here I’ve printed out the gridded tablet sheet (steal it here) and cut the standard 3 by 3 inch Post-it in descending sizes. This configuration could be used for a piece of featured or new content with its related companions clustered around it. Of course, this is just one way to express a content group. Experiment liberally as a reminder that visual variety and playful content flows are a key piece of a great app.

Related Posts:
Dynamic Prototyping
Metro Style – Beyond the Grid
Dynamic Prototyping With SketchFlow in Expression Blend
New Prototyping Sketch Sheets for WP7
Did I mention I am writing a book?!

Austin, Design, inspiration, UX, Windows8

Metro Style – Beyond the Grid

Post image for Metro Style – Beyond the Grid

Order, alignment and proportion, to designers of all stripes, are like pen and paper. Critical tools we use again and again to create beautifully designed systems.

Foundational texts like, Grid Systems in Graphic Design by Josef Muller-Brockmann, is a print reference first published in 1961.  But the grid method is so sound and elemental that it has a home in modern application and software design. And Metro style is a pure manifestation of Josef’s lasting principles.

My copy of Grid Systems, sun bleached spine and all, is displayed prominently in my office as a visual reminder to honor the grid. Honor. Not obey. Why not, you ask? Because slavish devotion is narrowing and dogmatic and good design can’t be so single-minded.

Now, let me knock this down a peg. As this high-minded, postulation gets designers (and design as a discipline) in trouble. So I’ll be concrete.

I’ve been working on Windows 8 apps for nearly 9 months. Live, sleep, eat Metro style. To help folks get started with such a large shift in application design the Windows team made some amazing Photoshop templates. They’re an essential tool and perfectly lay out the grid system that the entire OS depends on. A great example is the Metro silhouette (I know, Metro, Metro, Metro). Without it, switching between apps would feel unorganized and disconnected. Designing with the grid creates unity, structure and user trust in a way that only great visual systems can.

Loku_Windows8_thirteen23  

 

But. Within every design system there’s spacious room to creatively push boundaries. And you should.
Each application, with its unique features, brand focus and user scenarios means a fresh, objective analysis generates the best results. Take the Loku design created by the ass-kicking design studio, thirteen23, for example. They’ve respected the grid but pushed hard to ensure that the social/local heart of the product was front and center. As you explore categories, the map is ‘always on’ and interactive so users can toggle interests via location simultaneously. Loku for Windows 8 is a stunningly innovative lesson in moving beyond the grid while honoring the system.

Related Posts:
New Prototyping Sketch Sheets for WP7
Intro to Metro, the design language of Windows Phone 7
Making a Great Snapped View for your Web Site on IE10 on Windows 8
Designing for Windows Phone 7
Windows Store App Xaml GridView with Variable Templates

IE10, Metro, Windows 8

Making a Great Snapped View for your Web Site on IE10 on Windows 8

One of the great features of Windows 8 Metro Applications is the Snapped View where app developers create a 320px wide view of their app.  When the user snaps their app to the left or the right of the screen they can continue using their primary app while still having the secondary app visible in a thinner view.  The project templates in Visual Studio come with this capability built-in to make it easier to address this important part of the application experience.  If you build your Metro application with HTML, you see that this is done with CSS Media Queries, a feature supported in all HTML5 modern browsers.  This is also the way that you support snapped view for your website, with the @-ms-viewport rule (since it’s Microsoft-specific today, it has the –ms- prefix and can be safely ignored by other browsers.

@media screen and (max-width: 400px) {
  @-ms-viewport { width: 320px; }
  /* CSS for 320px width snapped view goes here */
} 

Since Mobile browsers like Windows Phone’s IE and the iPhone both report their width as 320 px, you may be able to reuse the media queries that you created for mobile for the snapped view by adding one line of css to your style sheet.  If you are intrigued by CSS Media Queries, and want to see more examples of responsive design that use them, take a look at the Media Queries site which hosts a great collection of them. 

You can also take a look at a site that I’ve been working on that uses media queries and implements the snapped mode media query at TimeLapseApp.com.

Screenshot (5) Screenshot (4)

More details

Related Posts:
Windows Phone Design
Tip 286: Don’t forget fallback fonts
Tip 300: Am I up-to-date?
Microsoft Silverlight Analytics Framework 1.4.6 Released
Tip 333: Is your site making an impression?

Tricks of the Trade

Pixel-Perfect.

ustwo, an agency in the UK, recently released a great little guide for working with pixel-aligned imagery when using photoshop. It also has some other good tips that are worth reading before pushing pixels around.
PPP_v3.jpg

Related Posts:
Cinnafilm: GPU-Powered Image Processing for Video
WP7 UI Guide and Design Templates
Tip 287: Position perfect
Phone 7 Photoshop templates
Homage to Shirky’s Cognitive Surplus