Technology POCs & Musings

HTML5 for mobile - Comparing JQueryMobile and Sencha Touch

2011-12-21T22:53:00.001-08:00

I have been playing around with some HTML5 / JS frameworks that allow creation of mobile web sites and can be integrated with platforms such as PhoneGap for creating mobile apps.

The two frameworks that I have tinkered around with are JQuery Mobile and Sencha Touch. Here is what I found...

JQueryMobile

Summary: Easier to learn framework with a strong focus on mobile web / apps. Has a larger corporate backing / partners, and is integrated with Adobe Dreamweaver CS 5.5.

Pros:

• Much easier to learn as compared to SenchaTouch

• Newer version has good basic themes and themeroller makes custom theming easy

• UI controls appear better focused on mobile devices e.g.

- By default labels are above the text input boxes which preserve real estate on mobile devices

- iPhone style Flip switches work out of the box and allow text on both sides of it Ref: http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-switch.html

- Placeholder text for dropdowns works as expected (broken in Sencha touch)

Cons:

• Less Object oriented / more web site programming like when it comes to wiring events etc. For non-trivial applications, it may almost require using another framework such as backbone or Knockout

• Rough at the edges, Transitions may flicker and sometimes are not smooth

• Some UI controls do not work very well (Fixed toolbars that are overlaid everytime on vertical scrolling make the UX very flaky)

Sencha Touch

Summary: A more robust OO style architecture with a strong focus on mobile web / apps.

Pros:

• True MVC style architecture

• Takes a SASS based object oriented approach to theming

• Much smoother / flicker free transitions than JQM

• Nicer iPhone style theme and icons (better than JQM's, IMO)

Cons:

• Steeper learning curve, changes from Sencha 1.x to 2 in coding styles etc. do not help

• UI is more oriented towards web design than mobile design e.g.

- Form style UI layout with labels on the side of text boxes

- iPhone style Flip switches (Toggle in Sencha world) require .css changes (https://github.com/tomalex0/SenchaTouch-Form-iosToggleField/commit/0b7de60782...

For Adobe AS3 XMLNS = 'XML Non Sense'

2010-01-11T22:49:00.000-08:00

I have been playing around with Adobe Actionscript 3 & had a pretty frustating experience. My AS3 / Flex program is calling a web service & getting back an XML response. All I want to do is put this XML into Flex UI using a grid view control by culling selective nodes from the XML into an Array.

This proved to be a Herculean task & took me a few days to figure out. Now, I am certainly a newbie to Actionscript but not new to programming in general. Getting an XML response back from a web service & displaying it on UI is usually a breeze (esp. in .Net etc.).

Unfortunately, AS3 has a bug due to which it cannot parse XML with namespaces very well. As a matter of fact, it simply cannot traverse the XML tree to give you the nodes unless you have stripped it free of the namespaces. Considering that Actionscript is in its third incarnation (& considering that XML has been around for a while), this just seems unacceptable.

Here is the function / workaround that I found on this blog to strip off the namespace...

private function removeNamspaces(...rest):String
{
rest[0] = rest[0].replace(/xmlns[^"]+\"[^"]+\"/g, "");
var attrs:Array = rest[0].match(/\"[^"]*\"/g);
rest[0] = rest[0].replace(/\"[^"]*\"/g, "%attribute value%");
rest[0] = rest[0].replace(/(<\/?|\s)\w+\:/g, "$1");
while (rest[0].indexOf("%attribute value%") > 0)
{
rest[0] = rest[0].replace("%attribute value%", attrs.shift());
}
return rest[0];
}

After dealing with Adobe AS3's buggy XML parsing, MSFT sure does not look bad ;-)

Review: Stickysorter - Free Cardsorter / Digital Post Its Software

2009-10-20T07:50:00.000-07:00

Stickysorter from Microsoft Research is an interesting tool on two fronts - One, it is simple to use; Two, it is a good example of "do one thing reasonably well" software i.e. it has limited features which are easily accessible. To add to the sweetness, it is available for free (Yep..not shareware or evaluation versions - Free).

That said, it is a Windows PC Installed application, not a remote / online one but if you have a Webex / netmeeting or something similar, you can utilize it for remote cardsorts as well.

Stickysorter allows for grouping of cards, addition of custom fields, stuff that you can put on the other side (to flip later), different color coded cards (limited to a few though) etc. It saves everything as a .CSV file so that the results can be later opened / printed like a spreadsheet.

This also means that for the folks who likes spreadsheets better, you can take your card sorts, group them in a visual post it style approach, then close Stickysorter, open the .csv with Excel (or something similar), autofilter & utilize the full Excel UI experience (Accountants rejoice!!).

Disclaimer: I have not used other card sorting tools, so not sure if what I find cool about this are standard features or not. Stickysorter is freely downloadable from Microsoft Research Site

Sketchflow "How To" resources

2009-09-03T20:34:00.000-07:00

Someone recently asked me how a designer can to go about trying out Sketchflow without getting into all the development related learning that Expression Blend may need. Here is an excerpt from my response. Hopefully, this will benefit anyone else who may be interested.

Frankly, I really just downloaded the evaluation version & took a few stabs at it. I had to refer to the Expression Blend Help Guide for a few things. But, here are the two that I referred to from a how to perspective that give you a sense of using it without writing any code really.

Canadian UX Blog by Qixing of Microsoft

Sample chapters / Zipped example from Chris Bernard's upcoming book

Other then that, just hang in there with an eval version & try a few different things. I paused the Canux video several times to see where she is navigating within the Sketchflow application.

One more that I used to understand what Sketchflow can do for me was the Visual Kitchen infomercial that MSFT did...

Maybe it would be cool to put together something that shows a step by step process (like a flowchart). Kinda like learning Sketchflow using Sketchflow Maps. So, it can be a Sketchflow Map that branches in four different direction (Say for developer, designer, project manager & business analysts) & explains individual steps/features/benefits with screenshots or embedded videos.

Maybe I will do one of those if I find some free time :-)

My First Sketchflow App

2009-08-03T00:29:00.000-07:00

Microsoft has recently introduced Sketchflow, a dynamic prototyping app with their latest Expression studio release. Here is my first app created using Sketchflow, hosted on Silverlight streaming & embedded in this blog.

I wanted to try out & actually see how well will it work for a distributed audience, with its ability to produce something that can be shared, annotated & yet be interactive without putting too much effort.

The mockup hosted here is a very rough (2 webpages only) but working example..You can enter username / password, click enter & navigate to the second page (that is all I have for now).

NOT AN IMAGE, INTERACTIVE PROTOTYPE, CLICK ON IT

What is nice is that you can comment by clicking in the feedback pane or draw on this prototype using the highlighter tool from the feedback pane. You can also look at the overall site layout through the map tab.

Once done, you can actually save the feedback by using "Show feedback Option" (The rightmost button on the feedback pane) & selecting Export feedback, which allows you to save your feedback on your machine.

This feedback can than be emailed to the prototyping team & imported back into the Sketchflow, along with feedback from other participants. I think this is a pretty cool tool.

It took me about 2 hrs from downloading, installing Sketchflow to creating first mock up, hosting it on Microsoft's Silverlight Infrastructure & embedding it into my blog. I will blog a screenshot by screenshot version of how I did this in a later post.

My First Silverlight App - Demo

2009-02-19T19:59:00.000-08:00

Silverlight is Microsoft's alternative to Adobe's Flash. It allows building RIA (Rich Internet Application) using ASP.Net (C#, VB.Net).

The idea is not new, but more of a spin on the "Google Suggest" type search with images etc. Hopefully, if I find time I would like to maybe try prettying up the UI, give a slight zoom on mouse hover & hyperlink images (& maybe even put different images / sample data).

~~The Silverlight code is hosted via Silverlight Live Hosting infrastructure from Microsoft.~~ Since Microsoft pulled the plug on Live hosting infrastructure (at least the freebie version), I have updated the link to my website.

Thanks for watching.