Jesse Liberty was kind enough to invite me back on to his cleverly named podcast, Yet Another Podcast, to talk about the technology of been focused on lately, HTML5.
In YAP episode #48, we talk about the type of work I do as a UI/Interactive/Visual Design Developer and the sometimes large or small degrees between the design and development teams. After that we dive into thoughts on building HTML5 apps, mainly focused on data visualizations and games.
“How do I…do something new in and cool in Windows Phone ‘Mango’? This is Adam Kinney for Microsoft and today we’re going to answer that question by…”
If you are new to Windows Phone 7 Development or you want to get a look at on e of the new features in action check out the new Windows Phone “How Do I” Video Series
Each 10-15 minute video focuses on a single topic and walks through an example of code. I had a lot of fun putting these together and I think the “Mango” update will be huge for Windows Phone 7 developers and users. They’ve thrown in some really nice new features in there like deep linking tiles, flipping notification tiles, sockets, local database and more OS integration with new tasks and access to contacts and appointments data.
Here’s the full list of videos:
I’ve been looking forward to the BUILD conference since it was announced. Seeing the Windows 8 demo, with its fancy new Metro evolved look and the fact that new development technologies are on the horizon, makes me feel giddy at the idea of once again a new technology to explore, hate and love.
I had all my plans in place and everything was set until Friday night I caught wind of the HIVE conference happening right here in the Seattle area.
A design and tech conference happening right here, with all the cool kids in the neighborhood? How could I miss it?
Well, I almost could have because it happens to be on September 16th the last day of the BUILD conference. Hmm, the last day of a 4-day conference, that’s where the conference organizers tend to place the sessions that they should run, but are not the most excited about. I bet if I catch those online later, I won’t miss too much.
So the decision is made. Fly down to Anaheim for BUILD, soak up Windows 8 and HTML5 goodness then come home a day early to attend HIVE and ruminate over design and developer workflow and be inspired to do greater work.
Anyone else doing the BUILD HIVE combo?
After reading through all of the Windows Phone 7 “Mango” documentation, this is one tip that stuck out as a simple but nice feature that I haven’t seen mentioned much.
Search on Windows Phone 7 “Mango” has been upgraded to include the concept of an App Instant Answer.
For example, you search for “xbox” and right inline with the results, in the prime top spot, is a link to Bing’s top WP7 app result for that search term.
From there you can tap the thumbnail to download or launch the app.
This new feature and the addition of quick cards is a nice example of how the WP7 team is focusing on improving the flow of using a mobile device. +1 for the deep integration between Bing and Windows Phone.
Now the nice thing is that when the app is launched, a parameter is passed via query string so that you can discover and track when your app has been opened using App Instant Answer.
You can easily grab the search term by using this code:
if(this.NavigationContext.QueryString.ContainsKey("bing_query"))
{
string searchTerm = this.NavigationContext.QueryString["bing_query"];
//do something awesome with searchTerm
}
And you can debug your app in Visual Studio by updating the task in the WPAppManifest.xml file:
<DefaultTask Name ="_default" NavigationPage="MainPage.xaml?bing_query=xbox"/>
For a full tutorial on this topic see How to: Integrate with App Instant Answer for Windows Phone
This week I had the unique opportunity to take part in the Kinect Code Camp, a quiet event starting 24 hours before the public launch of the Kinect SDK.
From the beginning there was a great vibe going on provided by the Channel 9 and Coding 4 Fun folks. Everyone was excited about the possibilities of Kinect and we were all ready to see what we could build in 24 hours.
Here’s a brief run through of how the event went down:
0900 – An overview of the new Kinect SDK is presented by Dan Fernandez and Clint Rutkas.
1015 – Team Chupacabras consisting of Rick Barraza, Dennis Delimarsky and myself begin coming up with an idea for our project.
1205 – We knew we wanted to do something with the Joints API and we’d been working with Windows Phone lately – thus Bunny Hop was born. A multiplayer co-op game where one player uses a Windows Phone as the birds-eye view navigator and the other hops through the maze with a first-person view using the Kinect.
1400 – At this point, Dennis and I had gotten through the mystery of connecting the two clients (Phone and WPF app) to the service. Rick had a WPF 3D world up and running from scratch. With the mysteries out of the way it was time to write app-specific code.
2100 – Correct data is now flowing from Phone to server and on to WPF app, as well as from WPF app to server to Phone App. Direction of the player comes from the phone using accelerometers, hopping (moving forward) and grabbing and dropping objects comes from the WPF app using the Joints API. Rick begins integrating the Kinect-enabled WPF app with the networked WPF app.
0530 – After hours of debugging, fine-tuning, eating snacks and hiding under space blankets, we decide to try and grab some sleep before the big live show.
0815 – Arrive back at Code Camp (showered, somewhat refreshed) we still need to clean up graphics on both Phone and WPF app.
0845 – Bus shows up to take us to Studio 20 for the Live event, finishing up graphics in the Lobby.
1000 – We head into the studio to demo our brand new Phone/Kinect game on Channel 9 Live. You can see our demo by viewing this video and fast forwarding to minute 40.
1030 – Back to the Code Camp to talk to the press about our experience:
Here’s a screenshot of the Bunny Hop game in the bird’s eye view on the Phone, followed by the first person view in the Kinect-enabled WPF app.
In Conclusion..
It was a great experience and the Kinect SDK is really well put together, its very easy to get started with. Although our game was hastily put together, I am very happy with the results. The big win though was taking time out to go through the process of building a Kinect-enabled app and thinking through the new dimension the Kinect adds to software development.
And thanks to Jessica Chobot for enhancing the name. It is no longer just “Bunny Hop”, it has been renamed “Super Hyper-Cute Bunny Hop”. Hop along now.
The Book of CSS3, from Peter Gasston, is your ticket from understanding the long-lived CSS2.1 to the new world full of possibilities with CSS3.
Yes, there are issues understanding which features of CSS3 have been properly recommended and are currently supported by modern browsers. But this is where Peter’s extensive knowledge of the past, present and future direction of CSS3 transcribed into this book is so valuable.
His writing style is clear, concise and casual and although the samples are not pulled from real-world apps, their brevity keeps the focus on the feature of discussion. Walking through each example step-by-step, Peter manages to cover the major features while explaining how to implement them successfully in each browser.
After reviewing the past and present, the book ends with Chapter 17 “The Future of CSS”. Although most features discussed have limited or no implementations, it’s fun to look at new ideas and the chapter acts as a reminder that CSS is ever expanding and becoming more and more powerful.
You may have other display technologies and frameworks of choice, but you would be remiss to ignore the current and future most popular display technology. This book is a great guide to updating your CSS knowledge, ensuring you are not left behind.
I wanted to see what would happen if all of the apps on the Windows Phone 7 Start screen received a tile notification, causing the flip feature to activate, at the same time.
It’s actually pretty flippy.
I didn’t plan on sharing this email with the public, but I thought it may be useful for others.
My wife is pretty computer savvy but she’s not a developer or a tech geek, so I translated a bit of the marketing speak for her.
—–
The full site for iOS5 is here: http://www.apple.com/ios/ios5/ Check out the video when you have a chance.
Here’s a few details I thought you’d like:
And best of all it will work on the iPhone 3GS – so there’s no need to feel bad that you have the iPhone 4, and I’m using the old 3GS 
I mentioned I was going to shelve this project for now, but I started thinking about implmenting the same style and layout in HTML.
“Metro in HTML?!”
Yes, I said it. And its really not too far of stretch, especially when you think of the style of menus, focus on typography and the print and infographic-based design concepts. That’s very “webby”.
If you remember from the previous post, the goal was to match a Silverlight for Windows Phone page to the PSD Design Templates provided by the Windows Phone Design team. By the end of it, I was able to get very close only truly stumbling on the lack of font tracking or charcter spacing in Silverlight on the Windows Phone.
Instead of waiting for Silverlight 5 (which includes charcter spacing) to get on the Windows Phone (next year?) I thought I would try the same exercise in a technology that does in fact allow you to set font tracking – CSS.
You can see the results in action here -> Metro Line View double line in HTML.
Or check out the image below:
A few notes on the implementation:
- I started the project using the HTML5 Boilerplate is a project template. It includes a CSS rest and normalization and a load of other useful features. I expect to use it again in the future.
- There is no special CSS casing for different browsers. I wanted to serve them all the same plate and see how they would render.
- I switched to “Segoe UI” from “Segoe WP” which works much better in the browser (which makes sense, of you think about it) so there are slight chracter differences no matter how close the layout.
- Letter-spacing is tricky (especially since the fonts are not the same). It appears that in the first line item “Text” could use less space and “example” could use more. I went with a happy medium for all.
- I went the easy route and decided to use absolute positioning and pixel values since the exact heights were important. In a real implementation, I’d likely need to move to a relative solution.
Relative values especially become important when you start thinking of different screens and devices. In the photo below you can see the test page loaded in an iPhoen 3GS, iPhone 4 and Samsung Focus (WP7 NoDo).
The viewport is set to device-width and the initial scale is set to 1, the difference is the absolute values for font size and spacing mixed with the different levels dpi per screen and browser upscaling. If I were to switch over to relative values I could get much more consistant results.
This was a fun exercise, but is it the first and last time, I’ll be implementing the Metro design language in HTML?
No, I don’t think so.
I was recently working on a Windows Phone 7 application where one of the goals was to be very true to the Metro design guidelines. Like many applications we were using the trusty ListBox to show items with titles and subtitles, which all works pretty smoothly until that title starts wrapping. Then it quickly becomes apparent how much work is need to adjust the Silverlight templates to match the PSD Design Templates.
We did get very close to parity with the design templates and I thought I’d share the process for those interested in matching the native layout of the — List View double line.
If you don’t have them already download the Design Templates for Windows Phone 7. After extracting the files open the enclosed PDF which will act as a guide to the contents of the many large PSD files. Each files focuses on design and layout of different native WP7 components, not all components have a directly related Silverlight control, but its pretty simple to find something similar.
For a full walkthrough of the Design Templates check out this video screencast on the .toolbox site.
Open the “ListView_PSD.psd” file and you’ll see six different templates for the List view. The target is the view in the center of the top row — Double Line.
In order to create a lightweight image to use for comparison, I quickly grabbed and flattened the target.
Now the goal is just to create the matching XAML and templates which can be reused within real applications. Thankfully Expression Blend has a project template that gets us more than halfway there.
And right away, MainPage is loaded with a ListBox which includes some runtime and designtime data and a similiar data. The image to the right is an overlay of our target and current layout.
In order to use the target as a guide it will be much easier if the text is the same.
To avoid all the typing, you can download the edited files here.
Even though our focus is the ListBox, layout starts at the top of the page so we need to get that right first.
Now other than the tracking of -10 on the PageTitle we’re set. Unfortunately adjusting font tracking in Silverlight 4 is not possible, but it is planned for Silverlight 5!
Now that the header is looking good its time to address the list items. We’ll do this first by adjusting the position of the ListBox which acts the origin for all items.
The first list item looks good now, other than the aforementioned tracking issue.
Although the text is now lining up properly for the first and second items, you may notice that the subtitle of the second item is breaking when it shouldn’t.
The StackPanel used as the container element for the ItemTemplate is not wide enough, although looking at the default width of 432 it matches the redlines in the target.
480 device width minus 24 pixels on each side equals 432, so where’s the disconnect? Its in the default styling of the title text box and in the visual vs hit target. Setting the background of the StackPanel to red highlights the answer. The StackPanel is 9 pixels away from the edge and not 24 as it appears to be.
We need to increase the width to account for this, as well as address the TextBlock spacing for the subtitle
And now for the final feat and the most advanced bit of trickery, adjusting the template to accommodate for the wrapping behavior. In Silverlight we do have control over Line Height but you must first change the lesser known LineStackingStartegy property.
To explain the previous steps, after setting the LineStackingStrategy for the title, we found a height that matched the target and then adjusted the margins accordingly. Then realizing that the MinHeight value is not going to work for the wrapped title items we shifted to adding a margin bottom to the subtitle.
Although it takes a little extra fine-tuning you can see that it is possible to get pretty close to the Metro design templates for your WP7 apps.
The one big thing missing is font tracking, but that will show up in Silverlight 5 as a Character Spacing property on text controls. Since the upcoming WP7 “Mango” release will bring the phoen up to Silverlight 4, I’m guessing I’ll revisit this post summer 2012 around when Silverlight 5 makes it to the phone. Then we can finally rest and reproduce a perfect match.
Until then, this little project is going on the shelf.
You can download the final source code here.