Hats off to CodeProject, Intel

CodeProject is currently holding a Windows 8 & Ultrabook App Innovation contest and I was fortunate enough to make it to the second round. It's a great contest, as all first round winners, myself included, were winners of a brand spanking new prototype model Ultrabook for development:

4Gb memory, Intel I-7(Ivy Bridge) Processor 2-2.5GHz,
160Gb HD, 5 Touchpoint Screen, Windows 8 OS.

I don't really have any technical points in this post, but I wanted to give some kudos to the folks at CodeProject as well as Intel, since I did have an issue with my screen cracking after a week or two. Since it was a free laptop, and CodeProject barely knows who I am, I was not hopeful about being able to get this issue resolved. And it's an unbranded prototype, so I wasn't really sure what manufacturer would be able to help me. Plus, it's a touch screen, so you can't just replace the glass like other laptops (even though it was still fully functional using mouse and keyboard).

But Chris at CodeProject pointed me to Premier Intel support, which came with the laptop, and they swapped it out for me as soon as I could give them a UPS tracking number. Five days later, I'm up and running on the replacement, and it's the best laptop I've ever owned. Fast, responsive, and boots to a functional Windows 8 login screen within 5 seconds. Thanks, CodeProject!

Deploying HTML5 Metro apps to the Windows Store...some common gotchas

After going through all the effort to build a Windows 8 Metro app before the OS is released, you'd think the hard part is behind you when development is done - what with the in-progress documentation, empty Google searches, and constantly mutating API. Now it's time to deploy to the Windows Store. How hard could that be?  Based on my own experiences, and insights from other early-bird developers, here's a look at some of the common offenses that will surely take you down the path of rejection:

1). Read the Certification Requirements. Really.
2). No items in the left and right swipe margins. No exceptions.
3). Buttons, in app functionality, credits, go down in the app bar or under Settings, not on screen.
4). Snapview - your app has to be usable when "snapped" to the 320 pixel sidebar section in Windows 8.

There are standard ways to handle the switch to Snapview in Windows 8, but for Metro HTML5/JavaScript apps you also should consider using Responsive Design,  Which I'll talk about next week.

PhoneGap HTML5 Portability II - Chrome Web Store Hosted Apps

Last week I talked about the Chrome Web Store being another good high-traffic outlet for your PhoneGap HTML5 codebase.

One of the first issues I encountered with my Packaged App in this new outlet was with advertising.  The ads displayed just fine, as they do on the main website, except for one thing - for every click, the earnings were always $0.00.  That's not good.  After an exhaustive search, I came across this promising answer, but still, $0.00 every time.

The actual problem was that I was using a Packaged App, which essentially is your entire codebase running locally on the user's machine. It ends up that ads within a Packaged App don't have a "legitimate" source URL, according to AdSense, since it's really just local code on the user's machine.  The Chrome Web Store's alternative to a Packaged app is a Hosted App - which is a link to the URL of your application. 

The Hosted App solution is not only appealing as a valid source to display ads, but from a maintainability standpoint I now have one less place to deploy to.  All I need now for deployment is my manifest file and app icons - the Web Store app just piggybacks on my already-existing website.

Here's a sample manifest file for a hosted app:

{
  "name": "My Cool App",
  "description": "This is a test of the Chrome Web Store",
  "version": "1.0.0.1",
  "app": {
    "urls": [      
      "*://www.yourwebsite.com /mail/",
      "*://www.yourwebsite.com /otherarea/"
    ],
      "launch": {
      "web_url": "http://www.yourwebsite.com/"
    }
  },
  "icons": {
    "128": "icon_128.png"
  },
  "permissions": [
    "unlimitedStorage",
    "notifications"
  ]
}

Note that you need to specify a launch URL, as well as any other non-asset URLs you'll be using.  And you will need to verify that you are the owner of this site using Google's Webmaster Tools.

So the quest for a solution to the AdSense problem sent me down the path of investigating Chrome Web Store "Hosted Apps", which not only resolved my advertising issue, but ended up being a better solution in general for my needs.

 If you're debating which type of app would work best for you, here is a good comparison of Hosted vs Packaged apps

HTML5 Portability beyond PhoneGap - The Chrome Web Store

One of the great benefits of doing mobile development using PhoneGap is the portability of the codebase. The same HTML application is easily wrapped and built for all major devices using PhoneGap and/or PhoneGap Build. And since your app is written using HTML, CSS and Javascript, you can make it accessible as a web app as well.

After I had already published a few apps to the Android Market using this technique, I read about the Chrome Web Store. And once I digested their publishing and deployment specs, I noticed that the same PhoneGap codebase could easily be deployed to this outlet as well. I re-deployed the same apps to the Chrome Web Store a few months ago, and my experience was so positive, I wanted to share a quick overview of how to deploy to this store, and some things you'll want to think about:

The deployment is simple for Chrome Web Store Packaged Apps - basically you create a .zip file of your HTML app, along with a simple .manifest file, the app icons, and preview images. Here's a sample manifest that launches splash.html at the root of your app:

{
  "name": "My Cool App",
  "description": "This is a test of the Chrome Web Store",
  "version": "1",
  "app": {
    "launch": {
      "local_path": "splash.html"
    }
  },
  "icons": {
    "16": "icon_16.png",
    "128": "icon_128.png"
  }
}

(Full documentation)

The preview images are not required, but you'll never get very high in the rankings without them... and of course the image sizes don't match the Android Market sizings, so you'll need to create new ones. And they will not accept them until the images meet their aesthetic criteria - I had two go-arounds with them because of font sizing.

...but the pleasant surprise was the traffic:

The identical app in the Android Market after 6 months or so has about 2400 downloads, and is approaching 1000 active installs.

In the Chrome Web Store, there are 3500+ users in less than two months, and 250+ users daily, 14,000+ total. Rarely is there inactivity when using Google Analytics' real-time tools.

The manifest sample I showed was for a Chrome Web Store "Packaged App", but for my needs I found that a "Hosted App" was the better way to go - and even easier. My post next week will highlight the advantages of using a Hosted App, plus some tips on using advertising.

Referencing Sitefinity 4.1 Themes, CSS From External Pages

Global styling in Sitefinity 4+ is handled by creating and registering a theme, and then applying it using the admin tool to your Sitefinity page templates:

Pretty easy, but what about if you need to reference that style sheet from an external web page that wasn't created within Sitefinity? Or to reference it right from the markup of your page templates/master pages? Looking at the solution the path will be something like:

/App_Data/Sitefinity/WebsiteTemplates/HomePage/App_Themes/Teal/Global/main.css

But we know the ASP.Net App_Data folder has special permissions that will not allow us to directly reference files within it... if we try to use this path to reference the stylesheet, we'll get a 403 error.

Fortunately, after you register a theme, Sitefinity will automatically re-route directly from the /Sitefinity folder at the root of the application into the /Sitefinity folder that exists at /App_Data/Sitefinity... kind of a client-side backdoor into your themes and templates.

So the easy answer to referencing your Sitefinity themes client-side, is just remove the "/App_Data" from the path. You can see this pathing structure if you look at the source code of your Sitefinity pages as well - example:

<link href="/Sitefinity/WebsiteTemplates/HomePage/App_Themes/Teal/global/main.css" type="text/css" rel="stylesheet" />

Styling / Formatting Sitefinity 4 controls

One of the big differences between Sitefinity 3.x and 4 is in the way the style and layout of the controls is handled. In the older versions, you had direct access to the .ascx code in either the ControlTemplates folder or the UserControls folder. In 4.x, all Sitefinity widgets have been compiled into .dlls, with each widget exposing a LayoutTemplatePath property, which allows you to specify a path to your own .ascx file if you need to change the layout beyond what is possible via the other widget properties. It's a cleaner way to do it - in the past, upgrades could overwrite revised template code - now your revised layouts are preserved when upgrading.

You can get to the default LayoutTemplates at Design > WidgetTemplates in the Sitefinity admin area. But here's one problem - many controls, like in my case the Login control, don't have any sample layout code exposed. The first thing I tried was to use the LoginControl ascx from Sitefinity 3.7. The first error message you'll get is:

C001: LayoutTemplate does not contain an IEditableTextControl with ID UserName for the username.

You can rename your controls to get through these errors, but you'll eventually hit a brick wall, as you really need the layout code. Fortunately, Grigori at Sitefinity was good enough to send me the actual LayoutTemplate code, which is not exposed anywhere within Sitefinity. Here is the actual Sitefinity 4 LoginControl LayoutTemplate Code. Grigori tells me this will be included in the next release.

Adding this code to your project, and pointing your LoginControl's LayoutTemplatePath to this ascx will allow you to format your login control any way you want:

Default LayoutTemplate appearance:


Login control using custom theme, css: