Category Archives: Mobile

Custom Search with Azure Mobile Services in JavaScript

image I’ve published my first little Windows 8 app using the Azure Mobile Services in JavaScript. It was incredibly quick to get up and running and more flexible than I thought it would.

The one thing that was tricky was that I’m using JavaScript/HTML5 to build my app and since I don’t have Linq in JavaScript, doing a custom date search was difficult. Fortunately I got to sit down with Paul Batum from the Azure Mobile Services team and he learned me a thing or two.

I already knew the backend of Azure Mobile Services was node.js. What I didn’t realize is that we can pass in a javascript function to be executed server side for a highly custom search the way that we can with Linq from C#. The syntax is a little weird but it works a treat.

itemTable.where(function (startDate, endDate) {
            return this.Date >= endDate && this.Date <= startDate;
        }, startDate, endDate)
    .read()
    .done(function (results) {
        for (var i = 0; i < results.length; i++) {
           //do something interesting
        };


Notice that inside the where function, I’m passing in another function. This function gets passed back and operates server side. The slightly wonky part is that the function has to accept the parameters that you pass in as well as you have to pass the variables that will be passed to this function. So reading that sample carefully, see that we’re passing three variables to the server side including the function and then the two actual variables that we want to pass to the function that executes on the server.

This allows for some awesome flexibility, well beyond custom date searches. 🙂

Getting Started with Windows Phone

prod_nokia710colors_page[1]There’s a lot going on with Windows Phone development these days and the great news is that you’re not out in the cold on your own here. There are a ton of of great Windows Phone resources that will give you thoughts, ideas, code, sample images and much much more. This blog post is going to be a growing repository of resources that I have that are available to Windows Phone developers specifically in Ireland but many of these resources are available to anyone.

Groups

Windows Phone Ireland LinkedIn Group – this is the best way to stay informed about all of the events and promotions in Ireland!!! For example, we’ve got a number of testing sessions coming up as well as tons of training events.
Windows Phone Developer Users Group in Ireland – coming soon…

Windows Phone

Consumer site

Windows Phone YouTube Channel (Watch Social, App and Web videos)

WP Central – Independent Source on everything Windows Phone

Tools

Believe it or not, the tools are free.

Windows Phone Tools

Now, there are more complete versions of the tools (that do more than just phone stuff but everything that you need is free).

If you are in BizSpark or have MSDN – you get these more complete versions of the tools for free already as well. If you are a startup, sign up for BizSpark at http://www.bizspark.ie.

If you are a web consultant in a shop that’s less than 10 people, you can get these tools for free as well through WebsiteSpark at http://www.microsoft.com/web/websitespark/support.aspx?tab=ProgramDetails.

Twitter Accounts you should follow

Windows Phone
Windows Phone Design Team
Arturo Toledo – UX Designer Developer Experience
Corrina Black – Windows Phone Design Lead for Developer Experience
Josh Holmes – yes, shameless plug
Jeff Blankenburg – Developer Evangelist in the US
Susan Todd – Design Research Developer Experience
Windows Phone Design Twitter List
Mike Kruseniski

Education

Jeff Blankenburg has a fantastic couple of series on Windows Phone development.

31 Days of Windows Phone
31 Days of Mango

Design Resources

Windows Phone UX Guide MSDN

Design Templates for Windows Phone 7

Windows Phone Grid 

Silverlight Windows Phone 7.1 (Mango) Toolkit

Microsoft Design .toolbox Tutorials

Microsoft Design .toolbox Courses

Windows Phone Geek – UX Resources

Jeff Wilcox’s “Metro” design guide for developers, v1.00

Videos

Full Day Event Windows Phone Design Sessions

BUILD 2011

Windows Phone User Experience Design

MIX11

All Thumbs: Redesigning an Existing UI to Suit Windows Phone 7

Analyzing and Improving Windows Phone Application Performance

Application Design for Windows Phone

Windows Phone UI and Design Language (MIX10)

Design Talks

Mike Kruzeniski: Personal, Relevant. Connected: Designing Integrated Mobile Experiences for Apps and Web

How was CocktailFlow Designed? Creating a Beautiful Windows Phone 7 Application

Albert Shum Talking about Windows Phone

ReMIX South 2011 Keynote with Albert Shum and Arturo Toledo

Channel 9

Silverlight TV 81: Four Great Windows Phone UX Tips

Silverlight TV 69: UX and Perceived Performance of WP7 Apps

Silverlight TV 83: Using Wireframes to Visually Communicate a Windows Phone Experience

Silverlight TV 75: Quick and Dirty UX Testing (Design Tips Mini Series)

Silverlight TV 78: Designing Tiles and Splash Screens for Windows Phone (Design Tips Mini Series)

Inside Windows Phone #24 – User Experience for Windows Phone Apps

Windows Phone Design Studios Tour Decks

Windows Phone Design Deck
Metro Design Deck
Refine Design Deck
Think Design Deck

Is that a Rich Web in Your Pocket?

clip_image002I had a fantastic opportunity recently as I was asked to speak at the Google Tech User Group on HTML5. Eoin Bailey, co-founder of Hit the Road and one of the founders of the Dublin GTUG, invited me to speak on HTML5 with some of their other speakers to give a full out HTML5 day at the Dublin GTUG. I couldn’t pass up the opportunity to speak at Google so I rearranged my schedule to make sure that I could make it. 🙂

 

The schedule was as follows.

1. Ilmari Heikkinen, "Sprucing up your pictures with HTML5" – Ilmari will cover some HTML5 basics – the enhancements that it provides over previous web standards and will focus on how image and video filters can be used, demonstrating some examples.

2. Neil Turner, "Lessons learned with HTML5" – Neil has built some web applications based on HTML5 and will talk about his experience doing this, including browser support issues, compatibility, responsive web design and performance.

3. Josh Holmes, “Is that a Rich Web in Your Pocket?” – A fast moving trend is building for mobile with HTML5. In this talk, Josh Holmes will show what can be accomplished with a mobile browser app and talk about the design considerations for that form factor.

I borrowed some of the slides from Joe Marini’s MIX talk on Mobile and put my very demo heavy spin on it. My slides are at http://www.slideshare.net/joshholmes/is-that-a-rich-web-in-your-pocket.

Slide1I’ve been passionate about mobile and mobile web for quite some time. I’ve been doing on device mobile development for the better part of 10 years now starting back with CE 4 in January 2002. It’s amazing to me, however, how far the mobile industry has come in that time period. It’s been a fast and furious but fun ride in that time…

Slide2Do you remember the pain of trying to develop on for the text based browser? Remember  when WAP (Wireless Applications Protocol) development was all the rage? It seems soooo long ago at this point and so old school. In actuality, the WAP forum who were the main drivers of WAP was actually consolidated in 2002. And I remember when it was such a huge deal that the ASP.NET Mobile Toolkit could produce WAP compliant mark-up which meant that I didn’t have to…

Slide3

But the mobile web development space has exploded. Smartphones these days, including the Windows Phone, are capable of running some amazing things. To demonstrate I showed HamsterDance Revolution which uses javascript, CSS3, the audio tag and more with some serious performance on a Mango device. Next I showed the FishIE Tank and the Speed Reading in rapid succession and then moved over to the Mango emulator for my demos.

Slide4Phones these days have the potential to be much more than just a small computer in our pocket. Phones these days know what time it is (clock), where it is (geo-location), what the lighting is like (light sensor), if it’s moving (accelerometer), where it’s going (compass) and can even see (camera) and hear (mic). It’s amazing what they are capable of these days. With all of that knowledge of their surroundings, mobile apps and sites should be augmented by reality. They should geo-locate you to give you directions to the closest train stop (for instance) rather than you having to pick from a list. If the lighting is bad, they should go with a high contrast colour scheme. If it’s loud around you, they should not ask for voice input. If you’re moving, minimize text input. And so on. At the moment, the browser doesn’t have access to all of these sensors but I can’t imagine that that’s that far away.

Slide5In addition, the way that people use devices in a mobile context is vastly different than a desktop development. It’s more than just the screen size that matters here. People who are using mobile are on the go and need immediate information. As part of that, I showed the United Airlines mobile site, Facebook, Twitter and the like.

Slide6When people are sitting at their desk, they are in a controlled, stable and (a lot of the time) comfortable environment. They are able to do sustained browsing and research.

When people are on the go, they need quick, "glance-able” information that will give them the information that they need at the moment. For example, that could be directions to the venue that they are headed to or a phone number or any number of discrete bits of information that they need while on the go.

Slide7Then I moved on to talking about designing for the finger verses the stylus/mouse/keyboard. First of all, the finger is not as accurate as a stylus or mouse. If I turn my finger on it’s side and am very careful, my finger is still at least 40 pixels across and most of the time it’s closer to 80 pixels. And then there’s all of the sites that are so dependent on the mouse and/or keyboard.

As an example, I pulled up http://thekillersmusic.com/html5 in IE9 and showed how fantastic of a site it is and then showed the same site rendering on Mango but talked about the fact that it’s too reliant on the mouseovers and the like to be useful in a mobile context. Same thing with Pacman in IE9 verses on a mobile device. While it renders and plays, it requires a keyboard for navigation.

Slide8

Mobile sites need to be clean and crisp without a lot mixed fonts, colours and the like. Don’t overuse graphics, gradients and  heavy background images as they can all effect download speed and/or view-ability in direct sunlight. Make sure that you’ve thought about the readability and the usage of whitespace. Obviously you don’t want to go nuts with the white space because you’ve got so little real estate to start with but a little bit of white space can make all the difference.

Slide9

Work as hard for your user as you can. In other words, minimize the user’s input by providing intelligent defaults and picking up as much from the sensors as you can to make as many decisions as possible. Make sure that you store user’s previous inputs and where possible, use them to help streamline future engagement.s

Slide10Lastly, think carefully about your mobile strategy. It can range from doing nothing to going hog wild with a mobile specific design.

One of the key things here is that you make a deliberate choice with regards to your mobile strategy because almost guaranteed you’ll have users browsing your site from their mobile devices.

  • Do nothing
    • No special content adaptation, result is the desktop site being delivered to the device. Sometimes, this is the right choice. It’s definitely the default choice and the easy one to go with.
  • Basic Mobile Adaptation
    • Content laid out so it will at least be consumable on a device, special META tags indicate that page is ready for mobile. This one is slightly more difficult to pull off as you have to make sure that your content works on both desktop and mobile.
  • Multi-Serving Content
    • Same page is sent to mobile and desktop, styled differently for each. This is not as hard as you’d think. You can accomplish this through the use of the @media tags to reformat the layout dependent on screen width and the like.
  • Mobile Specific Design
    • Parts of site are designed for mobile specifically, kept in separate domain or subfolder, redirected to when necessary. This is a high end strategy that requires a lot more work as you’re effectively building two different sites. On the other hand, it makes the mobile experience fantastic but doesn’t require you to compromise on the desktop experience.

Slide12

The quick couple of take aways are that mobile web has evolved tremendously over the past handful of years. As a result you should really think about your mobile strategy and consider your mobile user’s context as part of that strategy.

Oh – and in my last moments I threw up http://ie6countdown.com to hopefully push out the last bits of IE6 around. 🙂

This was a fun talk to give and I hope to expand on this talk and do a much richer version in the near future.

Silverlight for Windows Mobile

I’m way behind on blogging all of the things that I’ve run across in the past couple of weeks.

I found this video with Scott Holden and Derek Synder showing Silverlight running on a Windows Mobile 6 device. This is a very early prototype so they didn’t commit to a time frame, feature set or anything else but it’s cool. Of course, now that they’ve shown it and gotten some serious buzz going, I’m assuming that they will have to ship something in this space and we’ll get more details on that as time goes on and we get closer to the Silverlight 1.1 release.

I also really like that device but I doubt that it’ll be out on Verizon any time soon.

Source: YouTube – Silverlight for Windows Mobile

 

Technorati tags: ,

Mobility Touchdown Resources

These were interesting links that we put together at the end of the Mobility Touchdown

Windows Mobile Developer Wiki
http://channel9.msdn.com/wiki/default.aspx/Mobile

Developer HomePage MSDN Windows Mobile
http://msdn2.microsoft.com/en-us/windowsmobile/default.aspx

MSDN Windows Embedded (CE)
http://msdn2.microsoft.com/en-us/embedded/default.aspx

Loke Uei’s blog
http://blogs.msdn.com/lokeuei/

Josh’s Moblog
http://foreme.spaces.live.com/

Ann Arbor .Net Developers Group
http://www.aadnd.org/

Great Lakes .Net Developers Group (Southfield)
http://www.migang.org/

West Michigan .Net Developers Group (Western Michigan)
http://www.grdotnet.org/

.NET To Go Mobility Roadshow in Grand Rapids – Followup

I want to thank everyone for coming out to the .NET To Go Mobility Roadshow
in Grand Rapids. I had a great time and hope to come back to Grand Rapids more
often.

We had about 40-45 participants and all seemed to enjoy themselves and were
really engaging. If I had a typical Grand Rapids group – I’m definitely going to
have to speak there more often. I was a little disappointed at the student
attendance as we only had about half a dozen or so and getting students to
attend was one of the reasons that we held it at the GVSUAuditorium (Nice facility).

Many thanks go to GVSU – for hosting the event, Eric Maino
for organizing and running the event and West Michigan .NET Users
Group
and the Grand Valley State .NET Users Group for helping with
marketing.

As promised – below is the link to the code samples that I wrote or showed
during the show. The Scan and Amazon only works on a Symbol device
with a barcode scanner and the Symbol .NET SMDK installed.

Grand Rapids is getting the .NET Mobility Roadshow on Dec. 2.

.NET To Go Mobility Roadshow on Thursday, December 2, 2004 at the
DeVos Center-Loosemore Auditorium.

.NET To Go

The .NET To Go Mobility Roadshow will provide
you with the answers to your mobile development questions. Digging into the
details, using more code and fewer slides, these technical sessions will show
you how to develop and implement mobile solutions using the .NET Compact
Framework and languages you are already familiar with. To register for this
FREE event or to learn
more, go to www.msmobilitytour.com
.

Registration is required to make sure that you can get in. You can register
at the MS Events page.

.NET To Go Mobility Roadshow

GANG (Great Lakes Area .NET Users
Group)
 is helping to host the .NET To Go Mobility
Roadshow
 on Wed., Oct 20, 2004 at the Microsoft Offices in Southfield.

.NET To Go

The .NET To Go Mobility Roadshow will provide
you with the answers to your mobile development questions. Digging into the
details, using more code and fewer slides, these technical sessions will show
you how to develop and implement mobile solutions using the .NET Compact
Framework and languages you are already familiar with. To register for this
FREE event or to learn
more, go to www.msmobilitytour.com
.

Registration is required to make sure that you can get in. You can register
at the MS Events page – http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032259728&Culture=en-US.