Fire and Ice: David Pallmann's Web and Cloud Blog

Taking a Fresh Look at the Windows Azure Development Experience

2012-01-27T13:14:00.000-08:00

Windows Azure has grown up over the years since it first debuted in late 2008. In this article we're going to take an updated look at what the cloud developer experience is with Windows Azure today. Here's what we'll cover, which will include a walk-through of developing a cloud application:

Key Online Resources
What You Need for Cloud Development
The Cloud Development Lifecycle
Application Development Walk-through

Key Online Resources
Azure.com
You can't be an effective developer these days without knowing where your online lifelines are! In Windows Azure, that's been made easy by giving you one place to find just about everything: Azure.com. Here are some of the things you can do there:

Set up an account or a 90-day free trial account
Estimate your operation costs with a pricing calculator
See your current and past billing activity
Visit a developer center
Download an SDK
Find documentation
Go to community forums
Go to the Windows Azure Management Portal to manage your cloud solutions

Whether you work in C# in Visual Studio or Java or PHP in Eclipse, Microsoft wants developers of all stripes to be able to use the Windows Azure platform. The Developer Centeron Azure.com lets you select your preferrred language/platform and gives you information relevant to the way you want to work.

Windows Azure Management Portal
The Windows Azure Management Portal is where you provision cloud services, manage and deploy your solutions, and view status. You can get here by clicking the Manage link on Azure.com, or by navigating directly to windows.azure.com.

What You Need for Cloud Development
Let's review what you need in order to develop for Windows Azure. You will typically develop and testing your solution locally (using a simulator) before you deploy to a cloud data center.

To Develop Locally
You will need the following in order to develop locally:

A Windows PC (running Windows Vista or later, WIndows 7 recommended)
A development environment, such as Visual Studio or Eclipse
The Windows Azure SDK (download from Azure.com), which includes the Windows Azure Simulation Environment
SQL Server Express

To Deploy and Run in the Cloud
You will need the following in order to deploy to a Windows Azure data center:

A Windows Azure account (note there is a 90-trial available, and if you have an MSDN subscription that will also give you some free hours)

The Cloud Development Lifecycle
In Windows Azure, the pattern is to develop and test locally as much as you can before deploying to the cloud. Once you're ready to run in the cloud, it's typical with the Compute service to first deploy to a Staging slot, test the solution in the cloud, and finally promote from Staging to Production (a one-click operation). After that, you allow people use your application, monitor and manage activity, and scale scale as needed if demand changes.

Eventually you'll want to change something in your solution and then the process repeats. In an upgrade situation, promotion Staging to Production is actually swapping them. This allows you to leave the older deployment in Staging until you're sure Production is working as it should, then you can remove it.

Application Development Walk-through
To illustrate what development is like, let's walk through provisoning, developing, testing, and deploying a cloud solution.

What We'll Build: T-Shirt World
In this example we'll build a simple order entry and order processing application named T-Shirt World. This is a rather simple application--nothing to write home about!--but it's more than a mere Hello, Cloud: it has a front end and a back end, and will make use of multple cloud services.

Activity Flow
There's a 4-step sequence of activity in T-Shirt World:

Submit an Order
Queue the Order
Dequeue the Order
Store the Order in a Database

The first two steps happen on the front end, a web page (what we call a Web Role). The last two steps happen on the back end, in a worker process (what we call a Worker Role).

Cloud Services We'll be Using
Any cloud solution you create is likely to use multiple Windows Azure services. We're going to make use of four Windows Azure services in this sample application:

Windows Azure Compute - hosts the web role (site) and worker role (back end process)
Windows Azure Storage - image files for the web site
Service Bus - we'll use a queue to route orders from front end to back end
SQL Azure Database - order records

Walk-through Step 1: Service Provisioning
We'll provision the services we're going to use up-front. Stricly speaking, this isn't necessary to do until later since the Compute, Storage, or Database service are available to you locally in the Windows Azure Simulation Environment. However, there's no local simulation of one of the service we're going to be using, the Service Bus, so we'll provision everything here and now.

Provisioning Hosted Service
In Windows Azure parlance, a Hosted Service is a project workspace in the Compute service that executes, such as a web site. We go to the Windows Azure Management Portal in our browser and navigate to the Hosted Services area, then click the New Hosted Service toolbar button. We fill in a dialog where we choose a name for the service, a unique DNS prefix, and select one of 6 data center locations. We'll use the name tshirtworld for our hosted service and select the South Central US data center.

After a minute or so the service is provisioned and appears in the portal. Here's how the service will look in the portal later on, once we have deployed our solution to its Production slot:

Provisioning a Storage Account
We want a place to keep web site images, so we will next provision a storage account for the Windows Azure Storage service which includes blob storage. Blobs are similar to files and can be accessed as Internet URIs. To provision a storage account, we navigate to the Storage Accounts area of the portal and click the New Storage Account button. In a dialog we specify a name for the account, a unique DNS prefix, and a data center locaton. We'll use the name tshirtworld for our storage account and again select the South Central US data center, as we want to keep all of our services in the same location for performance reasons.

After a minute or so the storage account is provisioned. Here's how it looks in the management portal:

Provisioning a Database Server
We want to store orders in a database, so we will provision a SQL Azure Database. To do that we first need to provision a virtual database server, and afterward we'll go on to provision a database for that server.

To create the "server" (there are actually 3 behind the scenes for redundancy), we click the Create Server toolbar button. As we walk through the multi-screen dialog we are choosing a data center location, specifying admin user credentials, and setting up firewall rules.We'll again select the South Central US data center.

Soon we have a database server. Unlike most of these other provisioning activities where we get to choose meaningful names, the database server is a cryptic, generated name ("lcuh7n0fna" in our case). Here's how the database server looks in the portal once we've provisioned it:

Provisioning a Database
We've just created a database server, now we need to create the database itself. Selecting the database server we just created, we click the New Database toolbar button and (you guessed it) fill in a dialog. We get to specify a name for the database--we'll use tshirtworld, of course--and a size (1-150GB).We'll choose the 1GB size.

Here's how our databaes appears in the management portal once it's been provisioned:

Provisioning a Service Bus Namespace
We'll be using the Service Bus for a durable queue that connects our front end and our back end to communicate newly submitted orders that are ready for processing. In the Service Bus area of the management portal, we click the New Service Bus Namespace toolbar button.

Once the namespace is provisioned, here's how it looks in the managment portal.

Credentials and Connection Strings
We now have our services provisioned. Many of them require us to specify credentials or a connection string in our code in order to use them. You retrieve this information from the management portal.

Walk-through Step 2: Create Solution
Now it's time to create our solution. We'll be using C#, the .NET Framework, and Visual Studio in this case but as previously mentioned you have the option of using many languages and development environments with Windows Azure.

Creating a Windows Azure Project
We'll create our solution by selecting File > New Project. Because we've previously installed the Windows Azure SDK and Tools for Visual Studio, we have a Cloud category and a Windows Azure Project template. We'll select that project template and name our solution Orders.

The project template puts us in a wizard to select projects for our roles. A role in Windows Azure Compute is a tier of your application. Here we want two roles, one for our front end and one for our back end. A Web Role is the appropriate container for our web site, it will give us a load-balanced HTTP endpoint and IIS. We want to use ASP.NET, so we select an "ASP.NET Web Role" in the wizard. For the back end, we can use a Worker Role which is similar to a .NET console program or a Windows Service. With our two roles identified, we click OK to generate a solution.

You might expect that the generated solution will have 2 projects, one for the web role and one for the worker role, but there are in fact 3 projects: a Windows Azure solution also includes a Windows Azure project that contains metadata. This metadata describes the shape of your application to the cloud data center (how many roles does it have? what kind of roles are they? what endpoints do you need?) as well as configuration information (what size VMs do you need, and how many?).

Using the Windows Azure Simulation Environment
Before we write any code, let's see what it's like to use the local Windows Azure Simulation Environment. This is integrated with Visual Studio, so all we have to do is press F5 and presto, we're running in the simulator. Let's do that now.

One hint that we're running in the simulator is the web address: 127.0.0.1:81. But we can see more, the simulation environment has a UI for its Compute Emulator. To bring that up, we find the blue Windows Azure system tray icon at the lower right of our desktop, right click, and select Show Compute Emulator UI. This give us an insightful view of our roles and VM instances. At the moment, we only have 1 web role VM instance and one worker role instance, but later we'll increase that.

Now that we've seen the simulator, let's stop the solution running in Visual Studio and proceed to implement our application. We could also use the simulator for storage and database, but since we've already provisioned those in the cloud we're just going to consume those services directly in this walk-through.

Walk-through Step 3: Using the Compute Service
Let's move forward in time and imagine that we've implemented an order entry form in HTML and CSS:

Before we launch this, let's up the number of web role instance from 1 to 2. We can do this by editing the ServiceConfiguration..cscfg file in the Windows Azure Project. There are two versions of this file, a local one and a cloud one. The local one applies to the simulator, the cloud one to an actual cloud deployment.

Now we can hit F5 to again launch the solution. Now we see our web form in the browser.

If we again launch the Compute Emulator UI, we see now that the web role has 2 instances because of the configuration change we made:

Let's stop the solution and proceed to look at storage next.

Walk-through Step 4: Using the Storage Service
Our web site has images of T-Shirts, and while we could just add those images to the ASP.NET project let's assume we'd like them to be dynamic and easily changeable. To accomplish that, we can use blob storage.

If you go back and look at the web solution, the images are not in the solution. Instead the HTML/CSS page references URIs like "tshirtworld.blob.core.windows.net/images/black-tshirt.png". This reflects that we're using blob storage. The URL format includes our storage account endpoint (tshirtworld.blob.core.windows.net), the path to our container (images), and the blob names (such as black-tshirt.png).

We put the images in storage using a storage tool--we'll use Azure Storage Explorer here, which is free. Cloud Storage Studio is also popular. We've created a blob container named images and we've uploaded our T-shirt image files to it. Because the images container was configured for public access, these image files can be accessed as Internet URIs. That allows us to referene them in our web page.

Walk-through Step 5: Using the Service Bus
Now we want to capture a submitted order and pass it to our back end for processing. We can use a queue for that. We have two kinds of queues available in Windows Azure: simple queues (part of the Storage service) or deluxe enterprise-class queues (part of the Service Bus service). We'll use a Service Bus Queue here.

In our web server code, when an order is submitted our handler will collect the order fields from the web form, construct an order message, and queue it. The code looks like this, and it uses credentials from the Service Bus namespace we set up when we provisioned our cloud services You might choose to put your order information in the body of the message (say in XML or JSON), or in message properties. We've actually done both below so you can compare them. Message properties are useful because you could filter on them for example to separate processing of air ship orders from ground ship orders.

protected void Submit_Click(object sender, EventArgs e)
{
    try
    {
        tP = TokenProvider.CreateSharedSecretTokenProvider(issuer, key);

        Uri uri = ServiceBusEnvironment.CreateServiceUri("sb", serviceBusNamespace, string.Empty);

        namespaceManager = new NamespaceManager(uri, tP);

        MessagingFactory factory = MessagingFactory.Create(uri, tP);
        MessageSender messageSender = factory.CreateMessageSender(queueName);

        string name = Request.Form["name"];
        string email = Request.Form["email"];
        string phone = Request.Form["phone"];
        string address = Request.Form["address"];
        string city = Request.Form["city"];
        string state = Request.Form["state"];
        string postalCode = Request.Form["postalcode"];
        string country = Request.Form["country"];
        string color = Request.Form["color"];
        string cardNumber = Request.Form["cardnumber"];
        string securityCode = Request.Form["secure"];
        string nameOnCard = Request.Form["namecard"];

        if (String.IsNullOrEmpty(name))
        {
            Status.Text = "Name is required";
            return;
        }

        if (String.IsNullOrEmpty(email))
        {
            Status.Text = "Email is required";
            return;
        }

        if (String.IsNullOrEmpty(phone))
        {
            Status.Text = "Phone is required";
            return;
        }

        BrokeredMessage message = new BrokeredMessage(
            String.Format("<Order><Name>{0}</Name><Email>{1}</Email><Phone>{2}</Phone><Address><Street>{3}</Street><City>{4}</City><State>{5}</State><PostalCode>{6}</PostalCode><Country>{7}</Country></Address><Color>{8}</Color><Card number=\"{9}\" securityCode=\"{10}\" nameOnCard=\"{11}\"/></Order>",
                name, email, phone, address, city, state, postalCode, country, color, cardNumber, securityCode, nameOnCard)
        );

        message.Properties["Name"] = name;
        message.Properties["Email"] = email;
        message.Properties["Phone"] = phone;
        message.Properties["Address"] = address;
        message.Properties["City"] = city;
        message.Properties["State"] = state;
        message.Properties["PostalCode"] = postalCode;
        message.Properties["Country"] = country;
        message.Properties["Color"] = color;
        message.Properties["CardNumber"] = cardNumber;
        message.Properties["SecurityCode"] = securityCode;
        message.Properties["NameOnCard"] = nameOnCard;

        // Send message to the queue
        messageSender.Send(message);

        Status.Text = "Thank you for your order!";
    }
    catch (Exception ex)
    {
        Status.Text = "ERROR";
    }
}

That's order submission on the front end, but we also need order processing on the back end. Let's tale a look at our worker role code, which has a Run() loop. We use the Windows Azure API to loop on queue messages and process them. Our processing consists of adding an order record to the database (we've left that part of the code for now because we'll look at it separately in the next section). Our code outputs trace messages, which we'll be able to view on the console window in the Compute Emulator UI.

public override void Run()
{
    // This is a sample worker implementation. Replace with your logic.
    Trace.WriteLine("$projectname$ entry point called", "Information");

    dbConnection = new SqlConnection(connectionString);

    tP = TokenProvider.CreateSharedSecretTokenProvider(issuer, key);

    Uri uri = ServiceBusEnvironment.CreateServiceUri("sb", serviceBusNamespace, string.Empty);

    MessagingFactory factory = MessagingFactory.Create(uri, tP);
    MessageReceiver orders = factory.CreateMessageReceiver("orders", ReceiveMode.PeekLock);

    while (true)
    {
        BrokeredMessage message = orders.Receive();

        if (message != null)
        {
            try
            {
                // Acknowledge receipt of order.

                Trace.WriteLine("-------------------- Order Received ------------------", "Information");
                Trace.WriteLine(message.GetBody<string>(), "Information");

                // Insert a record in database Order table.
                ...removed for brevity...

                // Remove message from queue
                message.Complete();
            }
            catch (Exception)
            {
                // Indicate a problem, unlock message in queue
                message.Abandon();
            }
        }

        Thread.Sleep(10000);
    }
}

Let's try this out. We again launch our solution with F5. We'll be sure to open the Compute Emulator UI and be viewing the worker role's console window before we submit any orders because we want to see the activity.

On the order form in the browser, we enter an order and click the Buy It button. After the message is submitted to the Service Bus Queue we'll see a confirmation message on the web page:

Now back to the worker role console window in the Compute Emulator UI. We soon see ---- Order Received --- and the order details displayed. We thus see the Service Bus Queue doing its job of coordinating our front end and back end.

Walk-through Step 6: Using SQL Azure Database
In the last step we showed how the Worker Role processes order messages from a queue, but we glossed over what the processing is, which is to add order records to our database. Let's see now how that is done.

You'll recall that earlier we created a database server and a database in the SQL Azure Database service. That service uses the same programming model and protocol as good old SQL Server, so using it is a very familiar experience. Here's the code within our Worker Role Run loop that inserts database records. We're using ADO.NET objects from the System.Data.SqlClient namespace like SqlConnection and SqlCommand.

// Insert a record in database Order table.

try
{
    dbConnection.Open();

    dbCmd = new SqlCommand(
        String.Format("INSERT INTO [Order] (Name, Email, Phone, Address, City, State, PostalCode, Country, Color, CardNumber, SecurityCode, NameOnCard) VALUES ('{0}', '{1}', '{2}', '{3}', '{4}', '{5}', '{6}', '{7}', '{8}', '{9}', '{10}', '{11}')",
            message.Properties["Name"],
            message.Properties["Email"],
            message.Properties["Phone"],
            message.Properties["Address"],
            message.Properties["City"],
            message.Properties["State"],
            message.Properties["PostalCode"],
            message.Properties["Country"],
            message.Properties["Color"],
            Convert.ToString(message.Properties["CardNumber"]).Substring(0, 4) + "XXXXXXXXXXXXXXXXXXXX",
            message.Properties["SecurityCode"],
            message.Properties["NameOnCard"]
        )
    , dbConnection);

    dbCmd.ExecuteNonQuery();

    dbConnection.Close();

    Trace.WriteLine("Order stored in database", "Information");
}
catch (Exception ex)
{
    Trace.WriteLine("Error inserting order in database - " + ex.Message, "Error");
}

Let's view our data. We can use SQL Server Management Studio (2008 R2 edition) or the Windows Azure Management Portal to query. We'll use SSMS here. Here's the conection dialog:

Now we can open a query window and perform a SELECT * FROM [Order} to see the orders we've been submitting. As you can see, this is a very familiar experience using tools you already know, but with some new aspects like the formats of the server address and username.

Walk-through Step 7: Deploy to the Cloud
At this point, we've seen the application do everything it's supposed to: web order entry form, order queueing, order dequeing, and database storage. We've been using using real cloud services already for storage, database, and the service bus--but we've been executing locally in the simulation environment. Our solution is not yet running in the cloud and no one else can use it. So it's time to deploy our solution to Windows Azure Compute as a hosted service.

There are a few different ways we can deploy to the cloud:

Package the solution and upload through the management portal
Package and publish the solution all from within Visual Studio
Command line / scripting
In code, using a Service Management API

We're going to use the first method. Specifically, we'll ask Visual Studio to package the solution and then we'll manually upload it to the Management Portal.

To package our application, we go to Visual Studio's Solution Explorer, right-click our Windows Azure Project, and select the Package action. This will create a package file named Orders.cspkg ("cloud service package"), which is a zip file of the solution's runtime code and content, encrypted.

When the process completes, a Publish folder will open in Windows Explorer showing two files: the package file, and your cloud service configuration file. We'll need to upload both files. The reason the configuration file is kept outside the package is so we can make changes after deployment, such as increasing the number of VM instances in a role.

Now we can return to the Windows Azure Management Portal to upload our package. We navigate to the Hosted Services area and find the tshirtworld hosted service project we provisioned earlier. We click New Staging Deployment or New Production Deployment, depending which slot we want to deploy to, and fill in a dialog. The dialog prompts us for a label for the deployment (I usually put the date and time here), and is where we upload the two files that the Package action generated for us: a .cspkg and a .cscfg file.

It will take 15 minutes or so for the deployment to complete. When it's done, you can access your solution in the cloud. The access URL will be name.cloudapp.net, where 'name' is the unique production name you chose (for a Production slot) or is a generated cryptic name (for a Staging slot). You can see and these URLs in the managment portal.

To promote from Staging to Production (or to swap them, if both slots are occupied), use the Swap VIP toolbar button. This will exchange the virtual IPs, and only takes 20-30 seconds typically. I like to leave the older deployment up in Staging until I've verified what's in Production is working, then remove the Staging deployment. You do want to make sure you undeploy anything no longer needed, else you'll be spending money needlessly.

Well, there you have it. The Windows Azure development experience has come a long way since its debut a few years back and it is constantly being improved. I encourage you to get the 90-day Windows Azure Free Trial and take it for a spin!

Upcoming Sessions on Web and Cloud at SoCal Code Camp Jan 28 2012

2012-01-26T12:53:00.000-08:00

Here are some talks I and my Neudesic colleageus are giving on web, cloud, and programming at SoCal Code Camp this weekend in Orange County:

SoCal Code Camp
Sat Jan 28 2012 - Sun Jan 29 2012

Mobile & Global with HTML5, MVC and Windows Azure
David Pallmann (@davidpallmann) Sat Jan 28 12:15p

What happens when the web meets the cloud? The modern web (HTML5, mobile devices) is revolutioning the front end and our experiences, while at the same time the cloud (cloud computing, social networks) is revolutioning the back end. Putting them together gives you web-cloud applications that can run anywhere and everywhere.

In this session you'll see how to create solutions that are "mobile & global" by combining HTML5, mobile devices, and open standards on the web client with the MS web platform, Windows Azure cloud computing, and social networking on the web server. We'll progressively develop a "mobile & global" application in 7 steps, starting with design comps and ending with global deployment on 3 continents.

Windows Azure Design Patterns
Mickey Williams (@mickeyw) Sat Jan 28 2:45p

In order to design great cloud solutions architects need to understand the design patterns intrinsic to their cloud platform. In this session we will review the design patterns inherent in the Windows Azure platform services, followed by a discussion of application patterns for combining those services. Design patterns will be reviewed for compute, storage, relational data, communication, security, and networking. Key patterns will be illustrated with application examples.

Using Lucene for Full-Text Search in Azure
Mickey Williams (@mickeyw) Sat Jan 28 4:00p

SQL Azure does not currently support full-text indexing. In this talk, we will walk through the use of Lucene to provide full-text search capabilities.

F# - Functional Programming Fundamentals
Oleksiy Tereshchenko Sat Jan 28 4:00p

F# is functional programming language. Originally, developed by Microsoft Research. Iit is fully supported by Microsoft Development Division in Visual Studio 2010. Presentation will provide overview of the language and include fundamental programming concepts. Attendees will be able to understand what it is about F# that is interesting and exciting, even if they can’t necessarily see how to apply it themselves just yet.

F# - Functional Programming Progamming Techniques
Oleksiy Tereshchenko Sun Jan 29 9:00a

F# is functional programming language. Originally, developed by Microsoft Research, it is fully supported by Microsoft Development Division in Visual Studio 2010. Presentation will provide overview of the functional programming techniques and demonstrate them using calculator parser. Attendees will be able to experience functional style development.

Adventures in HTML5: Debug Hero game featuring CSS Sprites and jQuery Animation

2012-01-17T20:58:00.000-08:00

I’ve created my first HTML5 game, which I call Debug Hero.You can play it online here. Theobject is to kill bugs. This is not an HTML5 canvas game; rather, it uses CSSsprites and jQuery animation, combined with purchased stock art characters andbackgrounds. The art came from several different sources but works welltogether.

In Debug Hero, you’re the nerd and it’s your job, naturally,to kill all the bugs. On each level, the variety of bugs increases and so doesthe effectiveness of your weapon. Bugs include the ground-based roly poly, thelow-flying dragonfly, the high flying bees, and the mosquito (which can end thegame for you if you get stung). Your weapons begin with a spray can ofinsecticide, then you graduate to a small sprayer and then a large sprayer. Youneed a certain amount of energy to operate your weapon, and you can recharge byvisiting the vending machine for some caffeine.

Here’s the entire body of the page, which couldn’t besimpler: it’s just divs.

I’m using CSS sprites to avoid lots of image downloads.Characters like the bee bug have several different appearances (standing,dancing, afraid) but are contained in a single image. By changing the CSS classon a div I can change the appearance to select the portion of the image I wantto be visible. The other bugs types, weapons, and the nerd are all handled withthis technique.

.beebug1 { background: transparent url('../../Content/Images/bugbee_sprites.png')0px 0px; height: 70px; width: 70px }

.beebug2 { background: transparent url('../../Content/Images/bugbee_sprites.png')0px -70px; height: 70px; width: 70px }

.beebugHit { background:transparent url('../../Content/Images/bugbee_sprites.png')0px -140px; height: 70px; width: 70px }

Here’s the CSS for the game, also short and sweet:

.canvas1 { position: relative; top: 0px; left: 0px; width: 800px; height: 800px; background: black url('../../Content/Images/background1.png')}

.canvas2 { position: relative; top: 0px; left: 0px; width: 800px; height: 800px; background: black url('../../Content/Images/background2.png')}

.sprite { display: inherit; position: absolute; height: 100px; width: 100px; float: none }

/* Notification */

.message { position: absolute; background: transparent; color: White; font-family: Arial; font-size: 1.75em; opacity: 0.5; width: 800px; top: 10px; left: 10px }

.level { position: absolute; background: transparent; color: White; font-family: Arial; font-size: 1.75em; opacity: 0.5; width: 800px; top: 10px; left: 350px }

/* Bug sprites */

.hiddenbug { display:none; }

.beebug1 { background: transparent url('../../Content/Images/bugbee_sprites.png')0px 0px; height: 70px; width: 70px }

.beebug2 { background: transparent url('../../Content/Images/bugbee_sprites.png')0px -70px; height: 70px; width: 70px }

.beebugHit { background:transparent url('../../Content/Images/bugbee_sprites.png')0px -140px; height: 70px; width: 70px }

.dragonflybug1 { background:transparent url('../../Content/Images/bugdragonfly_sprites.png')0px 0px; height: 70px; width: 70px }

.dragonflybug2 { background:transparent url('../../Content/Images/bugdragonfly_sprites.png')0px -70px; height: 70px; width: 70px }

.dragonflybugHit { background:transparent url('../../Content/Images/bugdragonfly_sprites.png')0px -140px; height: 70px; width: 70px }

.rolypolybug1 { background:transparent url('../../Content/Images/bugrolypoly_sprites.png')0px 0px; height: 70px; width: 70px }

.rolypolybug2 { background:transparent url('../../Content/Images/bugrolypoly_sprites.png')0px -70px; height: 70px; width: 70px }

.rolypolybugHit { background:transparent url('../../Content/Images/bugrolypoly_sprites.png')0px -140px; height: 70px; width: 70px }

.mosquitobug { background:transparent url('../../Content/Images/bugmosquito.png')0px 0px; height: 70px; width: 70px }

/* Nerd sprite */

.geek1 { background: transparent url('../../Content/Images/nerd_sprites_100.png')0px 0px; }

.geek2 { background: transparent url('../../Content/Images/nerd_sprites_100.png')0px -100px }

.geek3 { background: transparent url('../../Content/Images/nerd_sprites_100.png')0px -200px }

/* Status */

.energy0 { position: absolute; background: transparent url('../../Content/Images/energy.png')0px 0px; height: 29px; width: 175px; top: 4px; left: 622px }

.energy1 { position: absolute; background: transparent url('../../Content/Images/energy.png')0px -29px; height: 29px; width: 175px; top: 4px; left: 622px }

.energy2 { position: absolute; background: transparent url('../../Content/Images/energy.png')0px -58px; height: 29px; width: 175px; top: 4px; left: 622px }

.energy3 { position: absolute; background: transparent url('../../Content/Images/energy.png')0px -87px; height: 29px; width: 175px; top: 4px; left: 622px }

.energy4 { position: absolute; background: transparent url('../../Content/Images/energy.png')0px -116px; height: 29px; width: 175px; top: 4px; left: 622px }

.energy5 { position: absolute; background: transparent url('../../Content/Images/energy.png')0px -145px; height: 29px; width: 175px; top: 4px; left: 622px }

.energy6 { position: absolute; background: transparent url('../../Content/Images/energy.png')0px -174px; height: 29px; width: 175px; top: 4px; left: 622px }

.energy7 { position: absolute; background: transparent url('../../Content/Images/energy.png')0px -203px; height: 29px; width: 175px; top: 4px; left: 622px }

.energy8 { position: absolute; background: transparent url('../../Content/Images/energy.png')0px -232px; height: 29px; width: 175px; top: 4px; left: 622px }

.energy9 { position: absolute; background: transparent url('../../Content/Images/energy.png')0px -261px; height: 29px; width: 175px; top: 4px; left: 622px }

.energy10 { position:absolute; background:transparent url('../../Content/Images/energy.png')0px -290px; height: 29px; width: 175px; top: 4px; left: 622px }

/* Furniture */

.toolbox { background: transparent url('../../Content/Images/toolbox.png')0px 0px; height: 37px; width: 75px; top: 720px; left: 30px; }

.vending { background: transparent url('../../Content/Images/vending_machine_100.png')0px 0px; height: 120px; width: 49px; top: 620px; left: 720px; }

.vendingLogo { background:transparent url('../../Content/Images/sodacan.png')0px 0px; height: 37px; width: 37px; top: 620px; left: 720px; }

.vendingLogo2 { background:transparent url('../../Content/Images/NeudesicLogoIcon.png')0px 0px; height: 36px; width: 36px; top: 620px; left: 720px; }

/* Weapon sprites */

.left-facing { -moz-transform:scaleX(-1); -o-transform:scaleX(-1); -webkit-transform:scaleX(-1); transform:scaleX(-1); filter:FlipH; -ms-filter:"FlipH"; }

.weapon1 { background: transparent url('../../Content/Images/spraycan.png');height: 29px; width: 25px; }

.weapon2 { background: transparent url('../../Content/Images/sprayer-yellow.png');height: 34px; width: 21px; }

.weapon3 { background: transparent url('../../Content/Images/sprayer-orange.png');height: 62px; width: 34px; }

.weapon4 { background: transparent url('../../Content/Images/honey.png');height: 62px; width: 42px; }

The biggest part of the game is the JavaScript code whichhas the game logic, game.js. Bugs are stored in JSON objects like these:

bugs.push({

id: 'bug0',

obj:$('#bug0'),

type:'mosquito',

x:100,

y:100,

alive: true,

hit: false,

hitDelay: 0

});

jQuery animations are used to move the characters. Forexample, here’s a bug movement being animated:

bug.obj.animate({

top: y,

left: x

}, 900);

The cloud of insecticideemitted by the weapons is another matter: it swells, floats slowly upward, andfades. For this I used the smoke puffing effect from http://www.gayadesign.com/diy/puffing-smoke-effect-in-jquery/with some minor modifications.

In the more advanced levels, you are combating multiple kinds of bugs at the same time. You can go to a toolbox andselect from a variety of different weapons.

As you can see, CSS sprites and jQuery animation are quite powerful.

I have plans to also support touch so Debug Hero can be played on tablets and perhaps even phones at some point but that's not in place yet.

Debug Hero is hosted in the Windows Azure cloud but could really be hosted anywhere as there's no server-side logic or storage.

Regrettably I can’t release the source code for Debug Hero sinceI’m using stock art I can't distribute.

Mobile & Global with HTML5, MVC & Windows Azure, Step 7: Globally-Deployed

2011-12-27T07:44:00.000-08:00

• Create hosted services in multiple data centers
• Configure traffic management
• Update the Access Control Service to support the new data centers
• Enable Content Delivery Network for image blobs
• Deploy the solution to multiple Windows Azure data centers around the world
• Set up automated traffic management
• Set up a friendly DNS for the solution

Creating Hosted Services in Multiple Data Centers

In Step 6 we deployed the solution as a Windows AzureCompute hosted service in a single Windows Azure data center (we chose the SouthCentral US location, which is in Texas). Now imagine we are serving a worldwideaudience, and that we’d like a global presence. We can achieve that by creatingadditional hosted services in other parts of the world.

There are currently 6 Windows Azure data centers to choosefrom: 2 in North America, 2 in Europe, and 2 in Asia. We’ll plan on running oursolution in two additional places: Western Europe (Amsterdam) and East Asia(Hong Kong).

To streamline the work we need to do in this step, it’ll workout best if we create the hostedservices now in the Windows Azure portal (noting their names and productionURLs) but do not deploy our solutionto them just yet. We need to note the production URLs for our hosted services. Inour example, they are responsive-us.cloudapp.net,responsive-europe.cloudapp.net, and responsive-asia.cloudapp.net. Your nameswill be different, as they must be unique.

A decision to make at this point is whether to create threeseparate editions of your web site project. If you will be customizing contentbased on location (for example, using different languages or content for eachlocale) or creating a separate database for each data center (which would be necessaryin a real setting for performance), you may want to split out the web projectsseparately or do the equivalent with clever build configuration. In oursample code we have simply made three copies of the project (named /us, /europe,and /asia), one for each data center.

Configuring TrafficManagement

A nice feature of Windows Azure is the Traffic Managerservice (currently in Community Technology Preview), which will allow us tohave a single .com address for our deployment even though it will exist in 3data centers on 3 continents.

To set up the traffic manager, we use the Windows Azureportal, choosing a unique name prefix for the Traffic Manager. In our examplethat name is responsive, making the Traffic Manager endpoint http://responsive.ctp.trafficmgr.com.This will ultimately be the endpoint we can use to access Responsive Toursregardless of location. We then enroll each of our three hosted services (US,Europe, Asia). Of course the hosted services aren’t deployed yet, but we’re doingthis now because we’ll need the Traffic Manager URL for configuring security.

We get to choose a policy in our Traffic Manager configuration(performance, failover, or round-robin). The best choice for this scenario would be Performance-based routingbased on location, but we’re going to use Round Robin in our example since itis a demo, to prove that as you access the site at different times youwill in fact be routed to different data centers. In our HTML code, we’vechanged the footer text of each site to indicate which location it is in so wewill have an easy way to detect that when we visit the site.

Updating AccessControl Service to Support the New Hosted Services

The Access Control Service we are using for authenticationneeds to be configured to allow the additional data centers. You might think weneed to identify each hosted service as an additional Relying Party, butactually all we have to do is identify the Traffic Manager endpoint as an RP.

One other change we need to make is in the Windows IdentityFoundation configuration in the Web.config file of our web project(s). In thewsFederation element, we need to set the realmto the Traffic Manager endpoint.

<federatedAuthentication>
  <wsFederation passiveRedirectEnabled="true" issuer="https://[MY-ACS-NAMESPACE].accesscontrol.windows.net/v2/wsfederation" realm="http://[MY-TRAFFIC-NAME].ctp.trafficmgr.com/" requireHttps="false" />
  <cookieHandler requireSsl="false" />
</federatedAuthentication>

Enabling Content Delivery Network for Image Blobs

Our promotional images are residing in Blob Storage in theSouth Central US Data Center. We can enable efficient worldwide access throughthe Windows Azure Content Delivery Network. The CDN will use a worldwide networkof 24 edge cache servers to serve images with high performance based on locale.

Configuring the CDN for our storage account in the WindowsAzure portal provides us with a special CDN endpoint for our images. We change ourview pages to use the new endpoint.

<!-- begin - homepage promos -->
<div class="home_promo_container">
 <div class="home_promo">
  <div class="home_promo_content" style="background-image:url(http://responsive.blob.core.windows.net/images/@(ViewBag.Promos["1"].ImageURL));">
   <h2 data-bind="text: PromoTitle1"></h2>
   <p  data-bind="text: PromoText1"/>
   <a class="button" href="#">Learn more &raquo;</a>
  </div>
 </div>
 <div class="home_promo">
  <div class="home_promo_content" style="background-image:url(http://responsive.blob.core.windows.net/images/@(ViewBag.Promos["2"].ImageURL));">
   <h2 data-bind="text: PromoTitle2"></h2>
   <p  data-bind="text: PromoText2"/>
   <a class="button" href="#">Learn more &raquo;</a>
  </div>
 </div>
 <div class="home_promo">
  <div class="home_promo_content" style="background-image:url(http://responsive.blob.core.windows.net/images/@(ViewBag.Promos["3"].ImageURL));">
   <h2 data-bind="text: PromoTitle3"></h2>
   <p  data-bind="text: PromoText3"/>
   <a class="button" href="#">Learn more &raquo;</a>
  </div>
 </div>
 <div class="clear_both"></div>

Deploying the SolutionWorldwide

Now it’s time to deploy our hosted services to the US,European, and Asian data centers. As in Step 6, we can use Visual Studio topackage and publish the solutions. When we’re done, we should see 3 deployments ready in the Windows Azure portal.

Once we’ve deployed all 3 hosted services, we’re in aposition to serve a worldwide audience.

Testing the GlobalSite

Now we’re ready to see our mobile and global solution workin its global deployment. All we have to do is visit our Traffic Managerendpoint with a desktop browser, tablet, or phone. In our example the endpointis http://responsive.ctp.trafficmgr.com.The site comes up just as we expect it to, and as we do this from multiplesessions and devices we can see that the location (shown in the page footer) variesbetween South Central US, Western Europe, and East Asia. Note, you may get an occasional hiccup because we are not routing traffic based on location.

Friendly DNS
One last thing we can do is give our web site a friendly DNSname. We’ll do this by purchasing the domain responsive-tours.com from GoDaddy.Now you can access the global site at http://responsive-tours.com.There are a number of ways we can forward the domain, we’ll deliberately choosehere to do simple forwarding--so you can see the URL change when you visit thesite to show the Windows Azure TrafficManager is at work.

Summary

In Step 7 we enabled the CDN for edge caching of blobimages, deployed the solution globally to 3 continents, and used the WindowsAzure Traffic Manager to manage traffic. Our site now has the followingfunctionality:

• Embodies responsive web design and runs on desktops,tablets, and phones.
• Uses HTML5 and open standards on the web client
• Uses the Microsoft web platform on the web server.
• Provides server-side dynamic content (promotional items)
• Provides client-side dynamic content (Bing Maps)
• Is set up for Windows Azure Compute
• Can authenticate against web identities
• Is hosted in Windows Azure Compute
• Stores images in Windows Azure Blob Storage
• Stores promotional content in SQL Azure Database
• Uses Content Delivery Network for worldwide image caching
• Manages global traffic across 3 data centers on 3 continents

In this series we’ve seen the power that comes from combiningHTML5, open standards, mobile devices, and responsive web design on the frontend with the Microsoft web platform and Windows Azure cloud computing on theback end: true “mobile and global” web/cloud solutions that truly run anywhereand everywhere.

Mobile & Global with HTML5, MVC & Windows Azure, Step 6: Cloud-Deployed

2011-12-27T07:32:00.000-08:00

In this series of posts we’re progressively demonstrating amobile and global sample, Responsive Tours. The source code for all 7 steps ison CodePlex at http://responsivetours.codeplex.com.

Here in Step 6 of 7 we’re going to deploy the solution to aWindows Azure data center. In this step we will:

• Migrate the local SQL Server database to a SQLAzure database in the cloud
• Migrate the promotional item image files to Blob Storage
• Update how we handle session cookies to be compatible with Windows Azure
• Package the application and publish it to the Windows Azure Compute Service
• Configure the Access Control Service for the hosted service

Migrating theDatabase to SQL Azure

Since Step 3 we’ve been using dynamic content forpromotional items, driven by a Promotions table in a SQL Server database. Nowwe’ll need to move that over to a SQL Azure database in the cloud. To do that,we use the Windows Azure portal tocreate a virtual database server in the cloud. This involves selecting a datacenter, specifying an admin username/password, and setting up firewall rules.

Once the database server is created we need to create aTours database. We can go with the smallest size (1GB) since we’re only storinga small amount of data in this sample.

From this point, working with the database is much likeworking with SQL Server. We have the choice of using familiar tools like SQLServer Management Studio or managing design and data through the SQL Azure portal.We need to design the Promotions table and migrate the promotional item recordswe previously created in a local database.

There’s one last item to attend to on the database. With ourdatabase now in SQL Azure, we must change the connection string in the web project’sWeb.config to reference the cloud database.

  <connectionStrings>
    <add name="Tours" connectionString="Data Source=[MY-SQL-AZURE-SERVER].database.windows.net;Initial Catalog=Tours;UID=[MY-SQL-AZURE-USER]@[MY-SQL-AZURE-SERVER];PWD=[MY-SQL-AZURE-PASSWORD];" />
  </connectionStrings>

Migrating Images to BlobStorage

Up till now our promotional images have been part of the webproject. To make them truly dynamic like the rest of the promotional content weshould be able to change them out quickly and easily. We can achieve this byrelocating the image files to Windows Azure Blob Storage, where they can beaccessed as Internet URLs if we set appropriate permissions.

We first need to create a Windows Azure storage account inthe Windows Azure portal. We’ll need to capture the storage account’s uniquename and a storage key.

With the storage account created, we can create a container(allowing public read access) and upload our promotional images to it. Use atool like Cerebrata Cloud Storage Studio orAzure Storage Explorerfor this.

With the images in a new location we must change thepromotional item markup on our HTML pages to match. We use the blob container’sURL format, [STORAGE-ACCOUNT-NAME].blob.windows.net/[CONTAINER-NAME]/[BLOB-NAME].

<!-- begin - homepage promos -->
<div class="home_promo_container">
 <div class="home_promo">
  <div class="home_promo_content" style="background-image:url(http://responsive.blob.core.windows.net/images/@(ViewBag.Promos["1"].ImageURL));">
   <h2 data-bind="text: PromoTitle1"></h2>
   <p  data-bind="text: PromoText1"/>
   <a class="button" href="#">Learn more &raquo;</a>
  </div>
 </div>
 <div class="home_promo">
  <div class="home_promo_content" style="background-image:url(http://responsive.blob.core.windows.net/images/@(ViewBag.Promos["2"].ImageURL));">
   <h2 data-bind="text: PromoTitle2"></h2>
   <p  data-bind="text: PromoText2"/>
   <a class="button" href="#">Learn more &raquo;</a>
  </div>
 </div>
 <div class="home_promo">
  <div class="home_promo_content" style="background-image:url(http://responsive.blob.core.windows.net/images/@(ViewBag.Promos["3"].ImageURL));">
   <h2 data-bind="text: PromoTitle3"></h2>
   <p  data-bind="text: PromoText3"/>
   <a class="button" href="#">Learn more &raquo;</a>
  </div>
 </div>
 <div class="clear_both"></div>

Updating Session Cookie Handling for Windows Azure

By default, our WIF-enabled ASP.NET MVC3 application is encrypting session cookies using the Data Protection API (DPAPI). DPAPI is not compatible with Windows Azure, so we need to add some code to encrypt cookies with RSA using a certificate. We do this in global.asax.cs.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
using Microsoft.IdentityModel.Tokens;
using Microsoft.IdentityModel.Web;
using Microsoft.IdentityModel.Web.Configuration;
using System.Security.Cryptography.X509Certificates;
using System.Text;

namespace html5_mvc_razor
{
    // Note: For instructions on enabling IIS6 or IIS7 classic mode, 
    // visit http://go.microsoft.com/?LinkId=9394801

    public class MvcApplication : System.Web.HttpApplication
    {
        /// Retrieves the address that was used in the browser for accessing 
        /// the web application, and injects it as WREPLY parameter in the
        /// request to the STS 
        /// </summary>
        void WSFederationAuthenticationModule_RedirectingToIdentityProvider(object sender, RedirectingToIdentityProviderEventArgs e)
        {
            //
            // In the Windows Azure environment, build a wreply parameter for  the SignIn request
            // that reflects the real address of the application.
            //
            HttpRequest request = HttpContext.Current.Request;
            Uri requestUrl = request.Url;
            StringBuilder wreply = new StringBuilder();

            wreply.Append(requestUrl.Scheme);     // e.g. "http" or "https"
            wreply.Append("://");
            wreply.Append(request.Headers["Host"] ?? requestUrl.Authority);
            wreply.Append(request.ApplicationPath);

            if (!request.ApplicationPath.EndsWith("/"))
                wreply.Append("/");
            e.SignInRequestMessage.Reply = wreply.ToString();
        }


        public static void RegisterGlobalFilters(GlobalFilterCollection filters)
        {
            filters.Add(new HandleErrorAttribute());
        }

        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                "Default", // Route name
                "{controller}/{action}/{id}", // URL with parameters
                new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
            );

            routes.MapRoute(
                "Map", // Route name
                "{controller}/{action}/{id}", // URL with parameters
                new { controller = "Map", action = "Index", id = UrlParameter.Optional } // Parameter defaults
            );

        }

        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();

            RegisterGlobalFilters(GlobalFilters.Filters);
            RegisterRoutes(RouteTable.Routes);

            FederatedAuthentication.ServiceConfigurationCreated += OnServiceConfigurationCreated;
        }

        void OnServiceConfigurationCreated(object sender, ServiceConfigurationCreatedEventArgs e)
        {
            //
            // Use the <serviceCertificate> to protect the cookies that are
            // sent to the client.
            //
            List<CookieTransform> sessionTransforms =
              new List<CookieTransform>(new CookieTransform[] {
                new DeflateCookieTransform(), 
                new RsaEncryptionCookieTransform(e.ServiceConfiguration.ServiceCertificate),
                new RsaSignatureCookieTransform(e.ServiceConfiguration.ServiceCertificate) });
            SessionSecurityTokenHandler sessionHandler = new SessionSecurityTokenHandler(sessionTransforms.AsReadOnly());
            e.ServiceConfiguration.SecurityTokenHandlers.AddOrReplace(sessionHandler);
        }

    }
}

If we were using SSL for this site we'd use the SSL certificate. Since we're not, we upload our own certificate to the Windows Azure portal for this purpose and specify it in our Web.config.

  <microsoft.identityModel>
    <service>
      <audienceUris>
        <add value="http://MY-SERVICE-NAME.cloudapp.net/" />
      </audienceUris>
      <federatedAuthentication>
        <wsFederation passiveRedirectEnabled="true" issuer="https://[MY-ACS-NAMESPACE].accesscontrol.windows.net/v2/wsfederation" realm="http://MY-SERVICE-NAME.net/" requireHttps="false" />
        <cookieHandler requireSsl="false" />
      </federatedAuthentication>
      <applicationService>
        <claimTypeRequired>
          <!--Following are the claims offered by STS 'https://[MY-ACS-NAMESPACE].accesscontrol.windows.net/'. Add or uncomment claims that you require by your application and then update the federation metadata of this application.-->
          <claimType type="http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name" optional="true" />
          <claimType type="http://schemas.microsoft.com/ws/2008/06/identity/claims/role" optional="true" />
          <!--<claimType type="http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier" optional="true" />-->
          <!--<claimType type="http://schemas.microsoft.com/accesscontrolservice/2010/07/claims/identityprovider" optional="true" />-->
        </claimTypeRequired>
      </applicationService>
      <issuerNameRegistry type="Microsoft.IdentityModel.Tokens.ConfigurationBasedIssuerNameRegistry, Microsoft.IdentityModel, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
        <trustedIssuers>
          <add thumbprint="ED98B07917624AEE89EDDC086589A6149ADE6859" name="https://[MY-ACS-NAMESPACE].accesscontrol.windows.net/" />
        </trustedIssuers>
      </issuerNameRegistry>
      <serviceCertificate>
        <certificateReference storeLocation="LocalMachine" storeName="My" x509FindType="FindByThumbprint" findValue="308EFDEE6453FFF68C402E5ECEEE5B8BB9EAA619"/>
      </serviceCertificate>
      <certificateValidation certificateValidationMode="None" />
    </service>
  </microsoft.identityModel>

Publishing the Site toWindows Azure Compute

Back in Step 4 we set the site up for hosting in WindowsAzure Compute but up till now we’ve only been running it locally in the WindowsAzure Simulation Environment. Now we want to deploy the solution to aWindows Azure Data Center.

We first create a Hosted Service in the Windows Azuremanagement portal. In our example we chose the South Central US data center and call the service responsive, which means its production URL will be http://responsive.cloudapp.net. Your name will be different as they must be unique.

After setting the number of VM instances in the WindowsAzure project’s .cscfg file (to 2, the minimum for high availability), we are almost ready to deploy but we need to make one change to the project first relating to security.

Our impending change in deployment location will cause ACS authentication to fail unless we change our web project's configuration settings (which we'll do now) and ACS configuration (which we'll do later in this post). In the web project's Web.config file, change the realm attribute in the wsFederation element to reflect the new production URL.


<federatedAuthentication>
  <wsFederation passiveRedirectEnabled="true" issuer="https://[MY-ACS-NAMESPACE].accesscontrol.windows.net/v2/wsfederation" realm="http://MY-SERVICE-NAME.net/" requireHttps="false" />
  <cookieHandler requireSsl="false" />
</federatedAuthentication>

We can now proceed to packageand deploy our solution, which can done directly from Visual Studio. We do this inSolution Explorer by right-clicking the Windows Azure project (ResponsiveSite.Azure)and selecting Publish. A wizard thenguides us through the publishing action, which packages up the solution and itsconfiguration, uploads both to the cloud, allocates VM instances, and deploysan image to them that includes our web site.

The Publish action can take 10-20 minutes, and when completewe’ll see the hosted service showing a status of Ready in the Windows Azuremanagement portal.

Configuring Access Control Service for the Hosted Service
In Step 5 we configured the Windows Azure Access Control Service to allow our local development endpoint as a Relying Party. Now we need add another RP, our hosted service endpoint (http://responsive.cloudapp.net in our example) using the Windows Azure portal.

Running the Solutionin the Cloud

All that remains now is try things out. Our hosted servicein the cloud is accessed at a production URL based on the unique name we chosewhen the hosted service was created – http://[SERVICE-NAME].cloudapp.net. Ourexample deployment is at http://responsive.cloudapp.net.Whenwe access this URL, we see the hosted service respond, now using a database inthe cloud for promotional content and promotional images served up from blob storage. As inthe past we first have to sign in with a web identity. In short, the site looksand acts like it has in previous steps except that it is now running in aWindows Azure data center accessible on the Internet.

Summary

In Step 6 we moved to the cloud, by hosting our web site inWindows Azure Compute, our promotional images in Blob Storage, and ourpromotional content in SQL Azure Database. Our site now has the followingfunctionality:

We've come pretty far, but there's more we can do. In the next step, we'll deploy the application globally tomultiple Windows Azure data centers around the world.

Next: Mobile &Global with HTML5, MVC, and Windows Azure, Step 7: Globally-Deployed

Mobile & Global with HTML5, MVC & Windows Azure, Step 5: Secured

2011-12-26T22:12:00.000-08:00

In this series of posts we’re progressively demonstrating amobile and global sample, Responsive Tours. The source code for all 7 steps ison CodePlex at http://responsivetours.codeplex.com.

Here in Step 5 of 7 we’re going to make the site secure byrequiring sign-in with a web identity. To be friendly we’ll let users apply anexisting web/social identity and give them a choice of several identityproviders. In this step we will:

• Configure the Windows Azure Access Control Service withseveral identity providers
• Implement authentication in the web site with Windows Identity Foundation
• Retrieve claims information (display name) after the user authenticates

Configuring theAccess Control Service

The Windows Azure Access Control Service provides claims-basedsecurity federation. We’ll be using it to handle authentication. After creatingan Access Control Service namespace in the Windows Azure portal it’s necessaryto configure it, which will involve several configuration screens.

First off we authorize identity providers. For this samplewe’ll use the 3 that are easiest and already built-in to the service: Google,Windows Live ID, and Yahoo!

Next we configure a relying party (RP)—that is, an applicationpermitted to authenticate with this ACS namespace. For the time being, thatwill be our local machine Window Azure Simulation Environment address,http://127.0.0.1:81/. In later steps we’ll add our deployment addresses in thecloud.

We configure claim rules for our relying party. Claims arename-value pairs our application will be able to retrieve after authentication.Google and Yahoo! will give us a display name, while Windows Live ID does not supplythat value.

Finally, the Application Integration area of the portalgives us a WS-Federation Metadata address which we’ll use in the next section.

ImplementAuthentication with Windows Identity Foundation

We can instrument our application for claims-based authenticationwith Windows Identity Foundation (WIF). WIF can be used to directlyauthenticate against security token services (STSs) for domain identity and webidentity; and we can also use it to talk to the Windows Azure Access Control Service.

We add WIF to the solution by right-clicking the web projectand selecting Add STS reference. Thatbrings up a wizard in which we enter our WS-Federation Metadata address (seeprevious section). WIF updates the application and its configuration forclaims-based security.

The WIF wizard adds the following configuration toWeb.config:

  <microsoft.identityModel>
    <service>
      <audienceUris>
        <add value="http://127.0.0.1:81/" />
      </audienceUris>
      <federatedAuthentication>
        <wsFederation passiveRedirectEnabled="true" issuer="https://MY-ACS-NAMESPACE.accesscontrol.windows.net/v2/wsfederation" realm="http://127.0.0.1:81/" requireHttps="false" />
        <cookieHandler requireSsl="false" />
      </federatedAuthentication>
      <applicationService>
        <claimTypeRequired>
          <!--Following are the claims offered by STS 'https://[MY-ACS-NAMESPACE].accesscontrol.windows.net/'. Add or uncomment claims that you require by your application and then update the federation metadata of this application.-->
          <claimType type="http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name" optional="true" />
          <claimType type="http://schemas.microsoft.com/ws/2008/06/identity/claims/role" optional="true" />
          <!--<claimType type="http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier" optional="true" />-->
          <!--<claimType type="http://schemas.microsoft.com/accesscontrolservice/2010/07/claims/identityprovider" optional="true" />-->
        </claimTypeRequired>
      </applicationService>
      <issuerNameRegistry type="Microsoft.IdentityModel.Tokens.ConfigurationBasedIssuerNameRegistry, Microsoft.IdentityModel, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
        <trustedIssuers>
          <add thumbprint="ED98B07917624AEE89EDDC086589A6149ADE6859" name="https://MY-ACS-NAMESPACE.accesscontrol.windows.net/" />
        </trustedIssuers>
      </issuerNameRegistry>
      <certificateValidation certificateValidationMode="None" />
    </service>
  </microsoft.identityModel>

If we were doing an in-depth application, we’d configure someparts of the site to require authentication and other parts not to. As this isa demo, we’ll just keep things simple and require authentication to access anyof it.

Retrieve ClaimsInformation

We’d like to retrieve and show a display name when one isavailable (some of the identity providers will give us this claim and some donot). Below we add code to the MVC project's Home controller to retrieve a display name claimif available and fashion a welcome string. The welcome string will be passed tothe view via its ViewBag.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data.SqlClient;
using System.Threading;
using Microsoft.IdentityModel;
using Microsoft.IdentityModel.Claims;

namespace html5_mvc_razor.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        [ValidateInput(false)]
        public ActionResult Index()
        {
            LoadClaims();
            LoadPromos();
            return View();
        }

        private void LoadClaims()
        {
            ViewBag.Welcome = "Welcome Back!";
            var principal = Thread.CurrentPrincipal;
            var identity = principal.Identity as IClaimsIdentity;
            var claims = identity.Claims;
            ViewBag.Claims = claims;

            string displayName = null;

            if (claims != null)
            {
                string claimType;
                foreach (Claim claim in claims)
                {
                    claimType = claim.ClaimType;
                    if (claimType.EndsWith("/nameidentifier"))
                    {
                        displayName = claim.Subject.Name;
                        break;
                    }
                }
                if (!String.IsNullOrEmpty(displayName))
                {
                    ViewBag.Welcome = "Welcome back, " + displayName;
                }
            }
        }

        private void LoadPromos()
        {
            ...
        }

    }

    ...
}

<nav>
    @(ViewBag.Welcome)
 <a href="">Home</a>
 <a href="Map">Walking Map</a>
 <a href="#">About Us</a>
</nav>

Testing Authentication

Now it's time to see it work. When we run the solution (with F5 out of Visual Studio), we see a sign-in screen. That's because the application realized it did not have a security token and redirected us to the Access Control Service for sign-in. The sign-in screen requires the user to select an identity provider, after which the user will sign in with that provider.

Once we successfully sign in with an identity provider, we are redirected back to the application which is now happy because it sees a security token this time. We can see the display name claim is being retrieved via the "Welcome back, " message on the web page.

Summary

In Step 5 we secured the site by authenticating webidentities using the Windows Azure Access Control Service. Our site now has thefollowing functionality:

• Uses HTML5 and open standards on the web client
• Embodies responsive web design and runs on desktops, tablets, and phones.
• Provides server-side dynamic content (promotional items)
• Provides client-side dynamic content (Bing Maps)
• Is set up for Windows Azure Compute
• Can authenticate against web identities

In the next step, we'll deploy the application to a WindowsAzure data center.

Next: Mobile &Global with HTML5, MVC, and Windows Azure, Step 6: Cloud-Deployed

Mobile & Global with HTML5, MVC & Windows Azure, Step 4: Cloud-Ready

2011-12-26T18:51:00.000-08:00

In this series of posts we’re progressively demonstrating amobile and global sample, Responsive Tours. The source code for all 7 steps is on CodePlex at http://responsivetours.codeplex.com.

Here in Step 4 of 7 we’re going tomake the project ready for cloud computing with Windows Azure. For the timebeing we are still going to be running the project locally on our developmentmachine, using the Windows Azure Simulation Environment. In thisstep we will:

• Add a Windows Azure project to the solution
• Configure the MVC project as a Windows Azure web role
• Run the solution in the Windows Azure Simulation Environment

For this step and successive steps you need the Windows Azure Tools for Visual Studio & SDK version 1.6.

Adding a WindowsAzure Project to the Solution

To make the solution runnable in Windows Azure we must add aWindows Azure project to it that contains metadata describing the solution’sshape and runtime requirements. We can do this easily by right-clicking thesolution in Visual Studio Solution Explorer and selecting Add Windows Azure Deployment Project.

This action adds a new ResponsiveSite.Azure project to thesolution and makes it the start-up project.

Configuring a WebRole

Windows Azure solutions consist of one or more roles. A role is like a tier of asolution, and there are several varieties. In this case we want to let the WindowsAzure project know that our solution has a WebRole, and that the ResponsiveSite (MVC) project is that web role. All ittakes to do this is to right-click the ResponsiveSite.Azure project’s Roles folder and select Associate With > Web Role Project inSolution. The ResponsiveSite project now appears under the Roles folder asshown below.

Configuring Instances

The metadata files in the Windows Azure project allow us toconfigure runtime information including the number of instances for each role.We’ll set the number of VM instances for our web role to 4 in ServiceConfiguration.Local.cscfg (usedin the local simulator) and 2 in ServiecConfiguration.Cloud.cscfg (used in anactual deployment to a cloud data center). Note 2 is a minimum for high availability.

<?xml version="1.0" encoding="utf-8"?>
<ServiceConfiguration serviceName="ResponsiveSite.Azure" xmlns="http://schemas.microsoft.com/ServiceHosting/2008/10/ServiceConfiguration" osFamily="1" osVersion="*">
  <Role name="ResponsiveSite">
    <Instances count="4" />
    <ConfigurationSettings>
      <Setting name="Microsoft.WindowsAzure.Plugins.Diagnostics.ConnectionString" value="UseDevelopmentStorage=true" />
    </ConfigurationSettings>
  </Role>
</ServiceConfiguration>

Running the Solutionin the Windows Azure Simulation Environment

We’re now ready to run the solution in the Windows AzureSimulation Environment, a feature that allows local development and testing ofcloud solutions. Press F5 in Visual Studio, wait for the simulation environmentto initialize, and note the solution starts up as usual.

One clue that you’re running a little differently under the hood is the webaddress you’ll see in the browser: 127.0.0.1:81. To get a better sense for what’shappening, we can use the Compute Emulator UI that is part of Windows Azure SimulationEnvironment. To do so, right-click the blue Windows Azure icon in your systemtray (bottom right on the Windows desktop) and select Show Compute Emulator UI.You’ll soon see a display like the one below showing each of the VM ‘instances’running (in the simulator, they are processes).

We won’t be deploying to the public cloud for a few moresteps, but we’re set up for cloud hosting at this point with the Windows AzureCompute Service. When we do deploy to the cloud, we’ll also move our SQL Serverdatabase to a SQL Azure database in the cloud.

Summary

In Step 4 we made the solution ready for Windows Azure by adding a Windows Azure project, declaring the web project a web role, and configuring instances. Our site now has thefollowing functionality:

• Uses HTML5 and open standards on the web client

• Embodies responsive web design and runs on desktops, tablets, and phones.
• Provides server-side dynamic content (promotional items)
• Provides client-side dynamic content (Bing Maps)
• Is set up for Windows Azure Compute

In the next step, we'll secure the application for sign-inwith a web/social identity.

Next: Mobile &Global with HTML5, MVC, and Windows Azure, Step 5: Secured

Mobile & Global with HTML5, MVC & Windows Azure, Step 3: Dynamic Content

2011-12-26T18:12:00.000-08:00

In this series of posts we’re progressively demonstrating amobile and global sample, Responsive Tours. The source code for all 7 steps is on CodePlex at http://responsivetours.codeplex.com.

Here in Step 3 of 7 we’re going toimplement some dynamic content for the site—specifically, dynamic promotional itemcontent and map integration. In thisstep we will add:

• Server-side dynamic content for promotional items driven by a database
• Client-side dynamic content for Bing Maps integration using device current location

Server-side Dynamic Content for Promotional Items

The bottom area of our web pages is for promotional items. There is room for three items each with an image, title, and description. We would like all of this to be dynamic so that new offers can be easily advertised.

There are several ways we might store content (database,primitive storage, content management system). In this case we’ll use a SQLServer database for the content and create a Promotions table that holds theimage URL, title, and description for each promotional item. We add a databaseproject to the solution for this purpose. We define three records ofpromotional content.

Now that we have this data, we need to implement retrieving it in our web project on the server side. The right place to do that isin our MVC controllers, by querying our database table and storing acollection of Promo items in the ViewBag for our views.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data.SqlClient;

namespace html5_mvc_razor.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            LoadPromos();
            return View();
        }

        private void LoadPromos()
        {
            Dictionary<string, Promo> Promos = new Dictionary<string, Promo>();

            try
            {
                using (SqlConnection conn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["Tours"].ConnectionString))
                {
                    conn.Open();

                    using (SqlCommand cmd = new SqlCommand("SELECT * FROM Promotions ORDER BY Id", conn))
                    {
                        using (SqlDataReader reader = cmd.ExecuteReader())
                        {
                            while (reader.Read())
                            {
                                Promos.Add(Convert.ToString(reader["Id"]), new Promo
                                    {
                                        Title = Convert.ToString(reader["Title"]),
                                        Text = Convert.ToString(reader["Text"]),
                                        ImageURL = Convert.ToString(reader["ImageURL"])
                                    }
                                );
                            }
                        }
                    }
                    conn.Close();
                }
            }
            catch (SqlException)
            {
                // TODO: log exception
            }

            ViewBag.Promos = Promos;
        }

    }

    public class Promo
    {
        public string Title;
        public string Text;
        public string ImageURL;
    }
}

One way to set dynamic content in MVC is with Razor. We canset the image URLs based on what’s in the ViewBag using the @ syntax:

<!-- begin - homepage promos -->
<div class="home_promo_container">
 <div class="home_promo">
  <div class="home_promo_content" style="background-image:url(images/@(ViewBag.Promos["1"].ImageURL));">
   <h2>...</h2>
   <p>...</p>
   <a class="button" href="#">Learn more &raquo;</a>
  </div>
 </div>
 <div class="home_promo">
  <div class="home_promo_content" style="background-image:url(images/@(ViewBag.Promos["2"].ImageURL));">
   <h2>...</h2>
   <p>...</p>
   <a class="button" href="#">Learn more &raquo;</a>
  </div>
 </div>
 <div class="home_promo">
  <div class="home_promo_content" style="background-image:url(images/@(ViewBag.Promos["3"].ImageURL));">
   <h2>...</h2>
   <p>...</p>
   <a class="button" href="#">Learn more &raquo;</a>
  </div>
 </div>
 <div class="clear_both"></div>
</div>

Of course the images aren’t really dynamic yet—they’re stillstatic files that are part of our web project—but once we change that in a later step wehave a way to indicate the URL dynamically from our database.

Now let’s look at a more modern and versatile way to passdynamic content from an MVC web back end to an open standards web client: databinding with Knockout.js. The Knockout library lets us apply the Model-View-ViewModelpattern to JavaScript. To do this, we need to:

• Use Razor to generate JavaScript code to create aViewModel (JavaScript object) with content.

• Annotate HTML DOM elements with data-bind attributes to denote where databinding should occur.
• Initialize and call the Knockout library to apply data binding to the HTML.

You can see all three of these activities in the Home viewpage (Views/Home/Index.cshtml):

@{
    ViewBag.Title = "Responsive Tours";
}

@* Optional : Include additional stylesheets *@
@section StylesTop
{
<link rel="stylesheet" type="text/css" href="~/../css/stylesheet.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:550px)"  href="~/../css/screen_small.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width:551px) and (max-width:800px)" href="~/../css/screen_medium.css">
<!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <link rel="stylesheet" type="text/css" href="~/../css/stylesheet_ie.css" />
<![endif]-->
}

@* Optional : Include additional immediately executed script references *@
@section ScriptsTop
{

}

@* Optional : Header content *@
@section Header
{
<meta name="description" content="This site was created from a template originally designed and developed by Codify Design Studio. Find more free templates at http://www.adobe.com/devnet/author_bios/chris_converse.html" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
}

@* Required : Render body container here *@
  <div class="page">
   <header><a class="logo" href="#"></a></header>
   <div class="page_content">

     
     <!-- begin - homepage promo -->
     <div class="marquee_container">
      <div class="marquee_photos"><br/><br/>loading...</div>
      <div class="marquee_caption">
       <div class="marquee_caption_content"></div>
       
      </div>
      <div class="marquee_nav"></div>
      <div class="marquee_panel_data"></div>
     </div>
     <div class="marquee_smallscreen"><br/><br/>loading...</div>
     <!-- end - homepage promo -->
     
     <!-- begin - homepage promos -->
     <div class="home_promo_container">
      <div class="home_promo">
       <div class="home_promo_content" style="background-image:url(images/@(ViewBag.Promos["1"].ImageURL));">
        <h2 data-bind="text: PromoTitle1"></h2>
        <p  data-bind="text: PromoText1"/>
        <a class="button" href="#">Learn more &raquo;</a>
       </div>
      </div>
      <div class="home_promo">
       <div class="home_promo_content" style="background-image:url(images/@(ViewBag.Promos["2"].ImageURL));">
        <h2 data-bind="text: PromoTitle2"></h2>
        <p  data-bind="text: PromoText2"/>
        <a class="button" href="#">Learn more &raquo;</a>
       </div>
      </div>
      <div class="home_promo">
       <div class="home_promo_content" style="background-image:url(images/@(ViewBag.Promos["3"].ImageURL));">
        <h2 data-bind="text: PromoTitle3"></h2>
        <p  data-bind="text: PromoText3"/>
        <a class="button" href="#">Learn more &raquo;</a>
       </div>
      </div>
      <div class="clear_both"></div>
      <!-- begin - homepage promos -->


    </div>
    <nav>
     <a href="">Home</a>
     <a href="Map">Walking Map</a>
     <a href="#">About Us</a>
    </nav>
   </div>
   <footer>&copy; 2011 &bull; Responsive Tours (a fictitious company)</footer>
  </div>

@* Optional : Include fooder content *@
@section Footer
{
}

@* Optional : Include additional deferred script references, or page initialisation *@
@section ScriptsBottom
{
<script type="text/javascript" src="~/../scripts/farinspace/jquery.imgpreload.min.js"></script>
<script type="text/javascript" src="~/../scripts/farinspace/template.js"></script>
<script type="text/javascript">
    var timeToChange = 6;     //seconds
    var transitionTime = 1.5; //seconds
</script>
<script>
$(document).ready(function () {

    // Knockout view model.
        
    var viewModel = {
        PromoTitle1: "@(ViewBag.Promos["1"].Title)",
        PromoTitle2: "@(ViewBag.Promos["2"].Title)",
        PromoTitle3: "@(ViewBag.Promos["3"].Title)",
        PromoText1: "@(ViewBag.Promos["1"].Text)",
        PromoText2: "@(ViewBag.Promos["2"].Text)",
        PromoText3: "@(ViewBag.Promos["3"].Text)"
    };

    // Activates knockout.js
    ko.applyBindings(viewModel);
});
</script>
<!-- Knockout data binding -->
<script type="text/javascript" src="~/../scripts/libs/knockout-1.2.1.min.js"></script>
}

With all of this in place, when we run the project we nowsee the promotional item content is loaded from the database on the server side and bound to the web page on the client side. Voila! -- dynamic content.

Client-side Map Integration

Theother area of dynamic content is the map view. When a user clicks the WalkingMap link, they are supposed to get an interactive map that is initiallycentered on their current location. This is an integration we can handle on theclient side. We’ll do it using Bing Maps and HTML5’s geolocation feature.

With a Bing Maps key in hand, a small amount of JavaScriptis all that is needed to render an interactive map, obtain the current location(if the user grants it), and center a map on that point. Thecode selects one of two map elements (“map1” or “map2”) based on which isvisible for thr active device layout.

<!-- Bing Maps -->
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
    var map = null;

    function getMap() {

        var mapOptions = {
            credentials: 'PucpG1...BING-MAPS-KEY...ByFfkTmeGP',
            mapTypeId: Microsoft.Maps.MapTypeId.automatic,
            zoom: 17
        }

        var mapElement = document.getElementById("map1");
        if (!isVisible(mapElement)) {
            mapElement = document.getElementById("map2");
        }
        map = new Microsoft.Maps.Map(mapElement, mapOptions);
    }

    function setMapZoom(zoomLevel) {
        map.setView({ zoom: zoomLevel });
    }

    function getCurrentLocation() {
        var geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(map);
        geoLocationProvider.getCurrentPosition({ errorCallback: errorCallback, successCallback: displayCenter });
    }

    function displayCenter(args) {
        setMapZoom(17);
    }

    function errorCallback(object) {
        alert('Error callback invoked, error code ' + object.errorCode);
    }

    function isVisible(obj) {
        if (obj == document) return true

        if (!obj) return false
        if (!obj.parentNode) return false
        if (obj.style) {
            if (obj.style.display == 'none') return false
            if (obj.style.visibility == 'hidden') return false
        }

        //Try the computed style in a standard way
        if (window.getComputedStyle) {
            var style = window.getComputedStyle(obj, "")
            if (style.display == 'none') return false
            if (style.visibility == 'hidden') return false
        }

        //Or get the computed style using IE's silly proprietary way
        var style = obj.currentStyle
        if (style) {
            if (style['display'] == 'none') return false
            if (style['visibility'] == 'hidden') return false
        }

        return isVisible(obj.parentNode)
    }
</script>

When we run the project, select the map view, and givepermission to use our location we are greeted with an interactive map initiallyshowing our current location. We can use this in a walking tour of a city tosee where we are, find points of interest, bookmark favorite spots, and findothers in our party.

The final result of all this integration is a web site that has bothclient-side and server-side dynamic content: an interactive map for walking tours, and promotional items that can be easily changed via a database.

Summary

In Step 3 we enabled server-side dynamic content for promotional items using a database, MVC Razor, and Knockout. We also enabled client-side dynamic content via Bing Maps. Our site now has thefollowing functionality:

• Uses HTML5 and open standards on the webclient
• Embodies responsive web design and runs on desktops, tablets, and phones.
• Provides server-side dynamic content (promotional items)
• Provides client-side dynamic content (Bing Maps)

In the next step, we'll prepare the application for cloudcomputing on Windows Azure.

Next: Mobile &Global with HTML5, MVC, and Windows Azure, Step 4: Cloud-Ready

Mobile & Global with HTML5, MVC & Windows Azure, Step 2: Web Project

2011-12-26T14:50:00.000-08:00

In this series of posts we’re progressively demonstrating amobile and global sample, Responsive Tours. The source code for all 7 steps is on CodePlex at http://responsivetours.codeplex.com.

Here in Step 2 of 7 we’re going tofocus on taking design assets and creating a web project, using open standardson the web client and the Microsoft web platform on the web server. In thisstep we will:

• Create a web project from a template.
• Import the designer assets into the web template.
• Be able to run the site from Visual Studio.

HTML5/MVC Web ProjectTemplate
In Step 1 we were fortunate to be working with a progressivedesign outfitted with good designer tools, and so the web developer receives designerassets already in the form of HTML5, CSS, JavaScript, and media files. They’ve alreadybeen coded for responsive web design that will adapt to desktop, tablet, orphone size screens.

It’s now the web developer’s job to take these assets andput them into a web project. In this scenario we’ll use a Visual Studio template for our project we use at Neudesic that combines open standards on theweb client with the Microsoft web platform on the server side. Specifically, onthe front end we’ll be using HTML5, CSS3, JavaScript, and the popular librariesModernizr and jQuery. On the back end we’ll be using Windows Server, IIS,ASP.NET, MVC3, and the Knockout.js library.

Importing theDesigner Assets into the Web Project

It’s not difficultto move the designer assets into this project format, but it does require beingcareful and paying attention to detail. Here are some of the things that needto be done in order to move the assets into the web project:

• CSS files need to be moved from the includesfolder to the project’s CSS folder.
• Script files need to be moved from the includes folder to theproject’s scripts folder.
• Image files need to be moved from the images folder to the project’simages folder.
• The index.html and map.html markup need to be turned into Home and MapMVC views.

Of all of the above, it’s converting the HTML pages intoviews that is the most work. Our template wants well-separated sections, so wemust surgically move sections of the original HTML markup into the view pages.

When we’re done, we have fitted our design assets into awell-factored MVC3 project organization:

Result: A Web Projectfor Developing the Application

The final result of all this is a project we can run out ofVisual Studio with F5. It doesn’t look or act any differently from the designerassets produced in Step 1, but we now have a web project and server back end inplace. This gives us the foundation to turn this site into a real application.

Summary

In Step 2 we created a web project from design assets, with open standards on the web client and the Microsoft web platform on the server. Our site now has the following functionality:

• Embodies responsive web design and runs on desktops, tablets, and phones.
• Uses HTML5 and open standards on the web client
• Uses the Microsoft web platform on the web server.

In the next step, we'll bring the application to life by implementing dynamic content.

Next: Mobile &Global with HTML5, MVC, and Windows Azure, Step 3: Dynamic Content

Mobile & Global with HTML5, MVC & Windows Azure, Step 1: Design

2011-12-26T13:37:00.001-08:00

Starting Point:Responsive Web Design Sample

What designers produce for web developers can vary: if you’refortunate, you might get assets in the form of HTML and CSS you can directlywork with; other times you may only receive wireframes and graphic assets and haveto craft your own markup and stylesheets. As web design tools improve in thewake of the HTML5 revolution, it’s increasingly likely your web designer may beable to just hand you HTML5, CSS3, and JavaScript. That’s the scenario we’regoing to assume here, that a web developer is using sophisticated tools: Dreamweaver,part of the Adobe Create Suite 5.5.

Designers and developers also need to be in agreement onapproach. In this scenario we’re assuming progressive designers and webdevelopers who have agreed to use responsive webdesign. This will yield adaptive layout that works across desktop, tablet,and phone-size screens on modern browsers. This is accomplished through the useof a fluid grid layout system, CSS media queries to switch to the mostappropriate layout, and media sizing.

The starting point we’ll use for this project is a samplefrom Adobe for an Adobe Dreamweaver tutorial that is already set up for responsiveweb design (previewit here). This is a front-end web site with HTML/CSS/JavaScript code but noback end. When viewed in Dreamweaver with the Multi-screen Preview viewer, it lookslike this:

You can run the project by opening index.html in a browser.Note that as you resize the browser to desktop, tablet, and phone sizes thelayout adjusts. As you run the sample, you’ll see that the sample hasanimation: there are 3 main pictures and marquees that periodically rotate.

Customizing theContent

This sample is a pretty good fit for our tour operatorscenario—even the images fit! —but we do of course want to customize thecontent a bit even if this is just a demo. Let’s tackle the following contentcustomizations:

• A logo for Responsive Tours
• Different links (Home and Walking Map in place of Who We Are and What We Do)
• Custom text for the 3 marquees (brown slides)
• A second HTML page, map.html, with a placeholder for an interactivemap.

The designer can make most of these changes directly inDreamweaver. There’s a nice Multiscreen Viewer facility for previewing the sitein 3 screen sizes.

One area of content we are not changing in this step is the3 promotion items on the bottom of the page. We want those to be dynamic content,so that will be left of the web developer in a future step.

With the above content changes, our site now looks likethis:

At this point, we have a good start on the site design andthe assets are already in the form of HTML5, CSS, and JavaScript plus mediafiles. However, we only have the front end. In the next step, we’ll hand thisoff to a web developer who will add the necessary server side to the webproject.

Summary

In Step 1 we created design assets from a responsive web design HTML5 template. Our site now has thefollowing functionality:

• Embodies responsive web design and runs on desktops, tablets, and phones.
• Usesd HTML5 and open standards on the web client.

In the next step, we'll create a web project and import the design assets into it.

Next: Mobile &Global with HTML5, MVC, and Windows Azure, Step 2: Web Project

Mobile & Global in 7 Steps with HTML5, MVC & Windows Azure

2011-12-26T13:36:00.000-08:00

In this series of posts I’ll be walking you through a samplethat shows web and cloud working well together. Recently I’ve been writingabout responsiveweb design and a complementary concept, responsivecloud design. This sample and tutorial show them in action. The sampleillustrates an application that is truly mobile and global, that can runanywhere and everywhere. It leverages HTML5 and open standards on the web client; works across desktop browsers,tablets, and phones; uses the Microsoft webplatform (notably MVC) on the web server; runs on the Windows Azure cloud computingplatform; and is globally deployed to data centers on 3 continents withautomatic traffic management. That’sa lot of capability, but we’re going to accomplish all this in 7 straightforward steps.

Responsive ToursSample

The sample is for a fictitious company that operates citytours named Responsive Tours. The source code is on CodePlex at http://responsivetours.codeplex.comand the final result can be accessed online at http://responsive-tours.com.

Workflow

This sample is also intended to show designer <->developer <-> deployment workflow. The source code is in 7 progressive projects:

1. Design: Design site front end
2. Web Project: Import into web template
3. Integrate: Add dynamic content
4. Cloud-ready: Set up for Windows Azure
5. Secured: Sign-in with web/social identity
6. Deployed: Deployed to the cloud
7. Global: Deployed worldwide with traffic management

Of course, there should be overlap and iteration between designer and developer but as we're dealing with a relatively simple application here we can proceed serially.

In this first post we’ll give you an overview of the sample, and in Parts 2 through 8 we’ll go into each step of this workflow in some detail.

1. Design: Design Site Front End

In this step a responsive web design HTML5 sample from Adobe is used as astarting point. It detects device characteristics and dimensions and adapts todesktop, tablet, or phone size screens automatically. The designer uses AdobeDreamweaver to customize the sample for a fictitious city tour operator,Responsive Tours.

This is Project 1 in the sample. You can run this project locally in a browser by opening index.html.

2. Web Project: Import into Web Template

In this step the design assets (HTML, CSS, JavaScript, images) are handed offto a web developer, who inserts them into a web template to create a webproject. The developer can now work in Visual Studio. The web project'sfront-end is open standards-based and the back end uses the Microsoft webplatform, including MVC3.

This is Project 2 in the sample. You can run this project locally by opening the solution in Visual Studio andpressing F5.

3. Integrate: Add Dynamic Content

In this step the developer implements dynamic content for promotional items,querying a database on the server side. MVC-Razor and Knockout.js are used fordata binding. Visual integration with Bing Maps is also added onthe web client side.

This step requires you to set up a database with a table for promotional items, and also to obtain a Bing Maps key.

This is Project 3 in the sample. You can run this project locally by opening the solution in Visual Studio andpressing F5.

4. Cloud-ready: Set up for Windows Azure

In this step the developer adds a Windows Azure project to the solution so thatit can be run as a web role in the Windows Azure Simulation Environment on thelocal machine.

This is Project 4 in the sample. You can run this project locally by opening the solution in Visual Studio andpressing F5. It will run in the Windows Azure Simulation Environment.

5. Secured: Sign-in with web identity

In this step the developer sets up authentication using the Access ControlService. The user can sign in with a Windows Live, Yahoo!, or Google social/webidentity.

This step requires you to configure an Access Control Service namespace in theWindows Azure portal.

This is Project 5 in the sample. You can run this project locally by opening the solution in Visual Studio andpressing F5. It will run in the Windows Azure Simulation Environment.

6. Deployed: Deployed to the cloud

In this step the developer deploys the solution code and data to a the cloudWindows Azure data center. The promotional item images are moved to blobstorage.

This step requires you to create, configure, and populate a Hosted Service,Database, Blob Storage, and Access Control Service in a Windows Azure datacenter.

This is Project 6 in the sample. You can run this project online by directing your browser to the production URLfor your hosted service. After signing in with the identity provider of yourchoice, the web site will run from a Windows Azure data center.

7. Global: Deployed worldwide with traffic management

In this step the developer deploys the solution to additional data centers forworldwide presence and sets up automated traffic management. The promotionalitem images are accessed via the Content Delivery Network for performance basedon locale.

This step requires you to create, configure, and populate 3 Hosted Services(each in a different data center), a Database, Blob Storage, the Access ControlService, and Traffic Management in Windows Azure.

This is Project 7 in the sample. You can run this project online by directing your browser to the trafficmanager URL for your hosted service. After signing in with the identityprovider of your choice, the web site will run in a randomly selected datacenter (US, Europe, or Asia).

Next: Mobile & Global with HTML5, MVC, and Windows Azure, Step 1: Design

Responsive Cloud Design

2011-12-16T07:24:00.000-08:00

As readers of this blog know, I’m big on both web and cloud,especially when used together: particularly, HTML5 and mobile devices on the frontend and the Microsoft cloud (Windows Azure) on the back end. A big movement inthe modern web world is Responsive WebDesign (RWD), the brainchild of Ethan Marcotte. When web and cloud are usedtogether, what is the cloud’s role in an RWD approach? I’d like to suggestthere are symmetric principles and that there is such a thing as Responsive Cloud Design (RCD). RWD andRCD are a powerful combination.

Principles of ResponsiveWeb Design

Responsive Web Design lets you create a single webapplication that works across desktop browsers, tablets, and phones. Here’s anexample of responsive web design (from an Adobesample):

The driving idea behind RWD is that your web application detects the dimensions and characteristicsof the browser and device it is running on and adapts layout and behavior accordingly. That means working wellfrom big screens on the desktop down to tablets and phone-size screens. It alsomeans supporting touch, mouse, and keyboard equally well. This involves use offluid grids, media queries, browser feature detection, and use of percentagesand proportional values in CSS, all of which are explained well in Ethan’s book. A corollary of this approach is that to be efficient you will download smallermedia content for a small screen than you would for a large screen.
1.      Detection:Sense what you are running on
2.      Adaptation:Adapt layout and behavior to what you are running on
3.      Efficiency:Deliver appropriately-sized content for efficiency

I can’t help expanding on these three core tenets because theRWD philosophy so easily applies to other key considerations we see in theweb/mobile space. I like to add three more: location, availability, and sync. Inlocation, we adjust content and inputdefaults (and perhaps even language) according to where a user is right now.Just as we detect device characteristics for a fluid layout we can also detectlocation to give a localized experience. In availability,the user should be able to access the web application no matter where they areand whether or not they are online at the moment. This is more than just beingable to render well on any convenient device, it also means the application canintelligently know where to find its back end services (which may be multiply deployed)and can handle temporarily disconnected use. Lastly, sync is vital to making availability a reality so that userinformation and state can be consistently maintained despite switching betweendevices and being occasionally disconnected. This means having a well-thoughtout data and state strategy that leverages local browser/device caching andstorage as well as back-end services and storage, possibly across multiple datacenters.

4.      Location:Detect location and adjust content accordingly
5.      Availability:Your web application is always available to you
6.      Sync: Dataand state consistency across devices

RWD is awesome. What about the back end? You can appreciatehow the server side of your web application can play an important role inserving up tailored, efficient content and supporting the web client well.Anders Andersen has a good presentation on RESS,RWD with server-side components. I think if you add cloud computing to the mixand use its strengths, you not only support RWD well but extend it withsynergistic capabilities. Let’s see what that looks like.

Principles ofResponsive Cloud Design

You might say that on the front end we think about the user whereas on the back end we mustalso think about the users overall. I’vewritten previously about how both web and cloud have synergistic considerationsof elasticityand location.

It turns out there is a pretty direct symmetry between the useof RWD on the web client side and what you should do on the back end to supportit, especially when using cloud computing for hosting, storage, and otherservices. Each of the six considerations I’ve described above has a cloudcounterpart.

Although detectionis a client-side activity, the server can use that information as well as logit for analysis. Analytics will tell you how many users you have, what thebreakdown of devices and browsers is, and provide raw data you can mine toanalyze behavior. Although you could use an analytics service, you might alsochoose to store your own analytics in cheap cloud storage where you can addbusiness context to the data.

Adaptation is somethingboth the web client and the web server can and should participate in. There’slittle point in serving up content that won’t be used, so intelligent servingbased on device characteristics is highly preferable to a top-heavy client-sideapproach where unneeded elements are merely hidden from view which is wasteful.Those who develop in .NET should look at the upcoming .NET 4.5 / MVC4 wherethere is a lot of support for device-adaptive serving, mobile views, and jQuerymobile.

Efficiency is amajor back end concern so that the entire user population is served well. Inaddition to serving up appropriately sized media for a user’s device, cloudcomputing really shines here. First, there is the elastic scale of the cloudthat allows it to be cost-efficient whether you run at small, medium, or globalscale. Your application can adjust its deployment size based on anticipated ormeasured changes in load. Cloud platforms also provide services for caching andlocalized delivery of content. In Windows Azure we have the Cache Service, adistributed memory cache, and the Content Delivery Network (CDN), a worldwidenetwork of 24+ edge servers that cache and distribute static and dynamiccontent efficiently.

For location,cloud computing allows you to support a regionally broad or worldwide audience.First, the aforementioned use of Content Delivery Networks senses a user’slocation and delivers content efficiently through the use of edge servers andcontent caching. Second, traffic management can direct a user to the nearestdata center. In Windows Azure this service is provided by the Windows AzureTraffic Manager, which can route users to hosted cloud applications based onlocation or other criteria. A user in Nebraska visiting www.myapp.com might berouted to a North American data center while a user in the UK entering the sameURL might be routed to a European data center.

The cloud plays a crucial role in providing access and availability. There’s no greater way to provideuniversal access than to use the cloud. The redundancy of application serversand storage units combined with intelligent infrastructure and disasterrecovery procedures keeps your web application back end highly available. You’lltypically see an SLA of 3 to 3 ½ 9’s in cloud computing platforms. When yourapplication is deployed to multiple data centers, there are failover behaviorsyou can take advantage of. For example, Windows Azure auto-replicates storageacross pairs of data centers, and the Traffic Manager service can performfailover routing to an alternative data center if an application becomesnon-responsive.

To support sync,cloud computing is useful in providing backing storage (both relational andnon-relational) for web applications. Well-designed web services and the strategicuse of identity, sessions, and cookies can allow you to manage state and dataeven though your user may change devices on you or go offline at times. Cloudidentity services such as the Windows Azure Access Control Service let yousupport logon through one or more web identities easily. When there are multipledeployments in multiple geographies, you may wish to keep some datasynchronized across data centers. In Windows Azure, a SQL Azure database can besynchronized with other cloud or on-premise databases using the SQL Azure Data Syncservice. Cloud middleware such as the Windows Azure Service Bus can help route notificationsand processing tasks. Syncing with social networks also applies here--there are many "clouds" to consider, not just the one you're using to host your application.

The Combination

RWD and RCD together are a force to be reckoned with. Theylet you create web applications that can be run anywhere and everywhere: fromsmall devices to large, from small-scale to global scale. I consider the modern web to be driven by 4 pillars: HTML5, mobility, cloud, and social. RWD covers the first two and RCD the latter two.

By now, you’dprobably like to see an example of web and cloud working togetherresponsively. Here's one, called Responsive Tours (8-part tutorial, source code, online demo).

An HTML5-Windows Azure Dashboard, Part 2: HTML5 Video

2011-11-08T12:42:00.000-08:00

As I continue to experiment with HTML5-cloud dashboards, I wanted to move beyond charts and also include media content, especially HTML5 video. More and more, modern interfaces need movement and video is one source of movement. Of course, it should only be there if it’s providing some value and you definitely don’t want to overdo it. In particular you need to think about the impact of video on tablets and phones where download speed and device power may be constrained.

In my second dashboard prototype, I created another fictional company, Contoso Health. In this medical scenario there are plenty of places for video: patient monitoring, MRIs, endoscopy, even reference materials. It is in need of someoptimization for tablets and especially phones but it’s off to a good start. It demos well on computers and tablets and works in the latest editions of Chrome, FireFox, IE, and Safari. While there is plenty of work still to be done to make this a real functional dashboard—the content is somewhat canned in this first incarnation-- it does convey a compelling vision for where this can go.

HTML5 Video
This was my first opportunity to play with HTML5 video.

The good news about HTML5 video is we can do video and audio in modern browsers without plug-ins, and thanks to hardware acceleration we have more horsepower on the web client side than ever before. Even the media controls are built into the browsers. Belowyou can see the browser controls for IE9, Chrome, and FireFox (which onlyappear when you hover over or touch the video). In addition, Safari Mobile onthe iPad will let you take a video full-screen.

The bad news is, video can be complicated at times and there is no single best format: the browser makers have not been able to come to agreement on a common video format they will support. That means you’ll be encoding your video to several formats if you want broad browser coverage.

A good place to see what HTML5 video looks like is at the HTML5 video online tutorial at w3schools.com. Within a <video> tag, you specify one or more video sources. If the browser doesn’t support any of your choices, the content within the<video> tag is displayed, most commonly an apologetic message or fallback content such as an image.

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

Now about video formats. Microsoft is championing H.264,which several other browsers also support, and FireFox prefers OGG-Theora.From my experimentation, if you provide your video content in these two formatsyou’ll be largely in good shape across popular browsers and devices. If youfind you need more coverage and want to add a third format, you might look intoWebM.

My starting point was stock footage MPEGs, and I needed tocreate H.264 and OGG video content from that. My first thought was to useExpression Encoder but it turns out the version available to me doesn’thave the codecs needed. I ended up using AVS Video Converterfor conversion to H.264 video and FoxTab Video Converter for conversionto OGG, both low-priced tools.

My video tags ended up looking like this:

<video id="video1" controls="controls" loop autoplay>
  <source src="heartscan.mpg" type="video/mp4" />
  <source src="heartscan.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

In addition to having good format coverage, the correct MIMEtype (Content-Type header) needs to be served up for each video. Since we’reaccessing the video blobs from Windows Azure blob storage, we put them in acontainer that allows web access and set each blob’s ContentType metadatafield. I received the best results with “video/mp4” for H.264 and “video/ogg”for OGG. I didn’t use WebM, but if you’re planning to I believe “video/webm”is the right content type to specify.

Now that I’ve made some progress envisioning the dashboarduser experience it’s time to start making it functional. Stay tuned!

An HTML5-Windows Azure Dashboard, Part 1: Design Decisions

2011-11-06T23:35:00.000-08:00

Business dashboards are big, and my aim is to create astunning one that combines my twin passions for HTML5 and Windows Azure. Inthis series I’ll be sharing my progress on iterative development of an HTML5dashboard hosted in Microsoft’s Windows Azurecloud that works on computers, tablets, and phones. Here in Part 1 I’ll shareinitial thoughts on design and a glimpse of our first prototype,themed for a fictional company named Fabrikam Imports. In subsequent posts I’llhave additional companies set up with a variety of themes and content.

Goals

Here are my goals for the dashboard, which will be realizedin steps:

Compelling. I wantto provide a compelling user experience with animation and transitions. It willtake some refinement to find the balance between an interesting level ofmovement and being overly flashy or distracting.

Branded. Since the dashboard will mostoften be used by businesses, it will need to carry their branding. This can bedone overtly with a corporate logo and reinforced with a background , suchas the bamboo image we’re using for Fabrikam Imports.

Broad Reach. The dashboardneeds to be accessible across computers, tablets, and phones and work wellwhether accessed by mouse or touch. This means fluid layout that accommodatesdifferent form factors and orientations, and interactive elements large enoughto support touch.

Useful. Thedashboard is more than eye candy: it also needs to be a valuable source ofaggregated business information. Which means it had better be able to integrateto many kinds of data sources.

Content Versatility.Charts aren’t the only content to be shown. I’d ultimately like to also supporttables, maps, media, and other content. In some cases we’ll provide more thanone view of the same content.

Data Source Versatility.Supporting the most popular formats and access methods should make it easyto integrate dashboards to many kinds of data sources without a lot of rocketscience. I initially plan to support data in XML and JSON format data that canbe retrieved from cloud blob storage, web services, or feeds.

Explorable. WhileI’m not trying to compete with BI offerings, I would like to havemore than one dimension to the data. When viewing a chart of data, you shouldbe able to select a value of interest and drill down a level if the data allowsthat.

Lightweight and DeluxeEditions. For my dashboard, I’m envisioning a lightweight edition and a deluxeedition. I’ll explain the differences later in this post.

Fast Setup. Thelightweight version should allow you to set up a decent dashboard in justan hour or two if you have your data available in XML or JSON format. Setuptime for the deluxe implementation will depend on how ambitious you are and will typically involve some custom integration work.

The FrontEnd

If you’ve been following this blog, you’ve noticed that manyof my recent experiments in HTML5 have been around controls such as a counter,barchart, and ticker.That’s all been driving toward creation of a dashboard. But creating all thecontrols I need on my own (and taking them to commercial grade) would take along time, so the best approach will be a flexible dashboard that can adapt toinclude controls from a variety of sources. With this approach, I can combinebest of breed controls with my own. For charting, I’m currently trying out JSCharts. So far I’ve found JSCharts to beeasy to use and it displays very efficiently. I am encountering some displayissues however after resizing so the jury is still out on whether I’ll be usingit in the long term. Either way, I eventually want to support multiple chart packages.

The current layout has a corporate logo and a ticker at top (whichcan be paused/resumed with a click or touch). Below this I have three views inmind: list, tiles, and zoom.

List, Tiles, and Zoom Views

List View. In listview, you’ll see a list of content that’s available. You can check an item tocontrol whether it is shown or hidden in other views, and you can select anitem to go directly to it in zoom view.

Tiles View. Intiles view, you’ll see all of the content (except items you’re chosen to hide)shown in fluid layout to fit your device. Content buttons allow you to takeactions on the data, such as zooming in for a detail view.

Zoom View. In zoomview you’re focused on one item of content and it fills the full window. Hereyou might be able to see the content in more than one way, such as a table andchart side-by-side. It’s also from here you may be able to explore some datasets by drilling down.

Implementation technologies for the front end are HTML5,CSS3, JavaScript, and JQuery. Content controls will be a mix of my HTML5 controlsand public/commercial controls.

The BackEnd

The back end runs in the Windows Azure cloud. I mentionedearlier I have two editions in mind, a lightweight edition and a deluxeedition.

Lightweight Edition

The lightweight edition is meant to be fast and simple toset up and incredibly cheap to operate. It runs completely out of Windows Azureblob storage and that’s also where the data is kept. This will generally costjust a few bucks a month to operate. Accessing the dashboard URL in a browsertransfers the front end code down to run in the web client. Ajax calls issuedby the web client pick up data files from blob storage (which are in XML orJSON format) and the dashboard content is populated. To update the data in thedashboard, you push out new data in the form of XML or JSON files to blobstorage. This can be done with small ‘update agent’ programs that integrate toyour internal systems or manually. This model does have some limitations, namelyauthentication. The best you can do to secure this is to generate shared accesssignatures (secretive URLs) for the blob container. On the plus side, this model is fast and cheap, and it's fantastic for throwing together great looking demos at a moment's notice.

Lightweight Dashboard Model

Here’s how access works in the lightweight model:

1. User visits their dashboard URL, an HTML file hostedin Windows Azure Blob storage.

2. The dashboard client HTML5/CSS/JavaScript startsrunning in the user’s browser, which could be on a PC, tablet, or phone.

3. The web client issues asynchronous Ajax queries tothe dashboard web services to retrieve content. The content is in the form ofXML or JSON data files stored in blob storage. As the data is returned back tothe web client it is rendered as content panels in the dashboard.

Deluxe Edition

For deluxe implementations, you will want domain identity orweb identity authentication of your users and deeper integration to yoursystems. For that we will run on Windows Azure Compute and integrate moreformally with internal, partner, or online data sources which might includeyour CRM, data warehouse, and other sources of business intelligence accessed viafeeds or web services. The data can be pulled on-demand from its source systemsin real time, or the data can be periodically pushed up to blob storage as in thelightweight model. For this level of dashboard you will want to combine thedashboard core with a consulting engagement to set up the authentication and integration.

Deluxe Dashboard Model

Here’s how access works in the deluxe model:

1. User visits their dashboard URL, an ASP.NET MVC3web server hosted in Windows Azure Compute.

2. User is sent to the designated identity providerto sign in. This could be ADFS, a web identity, or the Windows Azure AccessControl Service.

3. Upon successful sign-on, the user’s browser isredirected back to the dashboard web server and the dashboard clientHTMl5/CSS/JavaScript starts running in the user’s browser, which might be on aPC, tablet, or phone.

4. The web client issues asynchronous Ajax queries tothe dashboard web services to retrieve content. That content can come fromquerying enterprise systems, feeds, or web services directly or by returningrecent data snapshots out of blob storage. With either approach, XML or JSONdata is returned back to the web client and rendered as content panels in thedashboard.

The first prototypeimplements some of the above design goals in the lightweight model, all hostedout of Windows Azure blob storage. More to come!

Next Part 2: HTML5 Video

Adventures in HTML5: An HTML5 Canvas Ticker

2011-10-31T18:30:00.000-07:00

For my third experiment in JavaScript, I created a ticker that you could use to scroll stock information, news, or pretty much any textual content that has a label and a value. It looks like this and animates by scrolling to the left in a loop,. You can see a running version here. All the source is right there in the page, and there's a full listing at the end of this post as well.

I considered using CSS animation for this, but as it is not supported sufficiently in the widestream browsers yet I decided to go with HTML5 canvas and JavaScript.Let's start by looking at the HTML. In the body, we define a canvas named "tape" within a div container named "ticker". The canvas should be set to twice the width it needs to be for the widest size you expect to run it in--that's because we do some repetition of content in order to smoothly scroll it continuously.


<div id="ticker" style="width:1920px">
    <canvas id="tape" width="4096" height="40">Your browser doesn't support canvas</canvas>
</div>

A small amount of JavaScript in the onload event starts the ticker running with data--an array of objects each with a Symbol and Value property.


<body onload="OnLoad();">

<div id="ticker" style="width:1920px">
    <canvas id="tape" width="4096" height="40">Your browser doesn't support canvas</canvas>
</div>

...

<script>
    function OnLoad() {
        var items = [];
        items.push({ Symbol: 'AAA', Value: '1' });
        items.push({ Symbol: 'BBB', Value: '22' });
        items.push({ Symbol: 'CCC', Value: '3.3' });
        items.push({ Symbol: 'DDD', Value: '44 1/4' });
        items.push({ Symbol: 'EEE', Value: '5,000' });
        items.push({ Symbol: 'FFF', Value: '-66' });
        items.push({ Symbol: 'GGG', Value: '700' });
        items.push({ Symbol: 'HHH', Value: '88' });
        items.push({ Symbol: 'III', Value: '9999' });
        items.push({ Symbol: 'JJJ', Value: '10' });
        Ticker("ticker", "tape", items);
    }
</script>

</body>

In the JavaScript, there is a Ticker function that starts off the ticker, a MoveTicker function that continues the animation based on a timer, and a TickerState object that maintains housekeeping information for the animation between calls to MoveTicker.

In Ticker, the first order of business is to write out the symbols and values in the data array that was passed in. This is done, as many times as needed, to fill the canvas for the target width. That allows scrolling that looks smooth, even if the data doesn't fully fit the ticker width, and the animation can be reset back to its starting point without any visual roughage. Ticker's final act is to start a timer to call MoveTicker. The interval affects the scolling speed: 10 is fast, 50 is medium, 100 is slow.

In MoveTicker, we use CSS to move the ticker left--specifically by decrementing the canvas left margin(which is negative throughout) and counter-adjusting the ticker tape rectangle with CSS clip. This creates the illusion of a ticker rectangle that does not appear to move but has content that does. Once a full set of the data has been slid off the left of the screen, it is reset back to the starting offset. MoveTicker then sets a timer again so it will be called over and over. The result is a gliding ticker tape.


    var TickerState = {
        canvas: undefined,
        ctx: undefined,
        tickerX: 0,
        dataWidth: 0,
        interval: 10 /* Fast: 10 Medium: 50 Slow: 100 */
    };


    function Ticker(divId, canvasId, items) {

        ticker = document.getElementById(divId);
        maxWidth = parseInt(ticker.style.width);

        TickerState.canvas = document.getElementById(canvasId);
        TickerState.ctx = TickerState.canvas.getContext('2d');

        TickerState.ctx.font = "20px sans-serif";
        TickerState.ctx.font = "20px Nova Flat, 20px sans-serif";
        TickerState.ctx.textAlign = "left";

        var x = 10;
        var y = 20;

        var firstTime = true;
        while (x < maxWidth * 4) {

            for (var i = 0; i < items.length; i++) {

                TickerState.ctx.fillStyle = "Blue";
                TickerState.ctx.fillText(items[i].Symbol, x, y);
                x += TickerState.ctx.measureText(items[i].Symbol).width;

                TickerState.ctx.fillStyle = "Green";
                TickerState.ctx.fillText(items[i].Value, x, y + 10);
                x += TickerState.ctx.measureText(items[i].Value).width;
                x += 10 + 6;
            }

            if (firstTime) {
                TickerState.dataWidth = x;
                firstTime = false;
            }

        }
        setTimeout(MoveTicker, TickerState.interval);
    }

    function MoveTicker() {

        TickerState.tickerX += 1;

        if (TickerState.tickerX >= TickerState.dataWidth) {
            TickerState.tickerX = 10;
        }

        TickerState.canvas.style.marginLeft = "-" + TickerState.tickerX.toString() + "px";
        TickerState.canvas.style.clip = "rect(0px " + (maxWidth + TickerState.tickerX).toString() + "px 40px -" + TickerState.tickerX.toString() + "px)";

        setTimeout(MoveTicker, TickerState.interval);
    }

Here's the HTML page in its entirety:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Ticker</title>

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Nova+Flat">


    <style>

    #ticker {
        font-family: 'Nova Flat', cursive;
        font-size: 20px;
    }

    #tape {
        font-family: 'Nova Flat', cursive;
        font-size: 20px;
        position: absolute; 
        clip: rect(0px 2048px 40px 0px); 
        vertical-align: top; 
        margin-left: 0px; 
        background-color: LightYellow;
    }
    </style>


<script>

    var TickerState = {
        canvas: undefined,
        ctx: undefined,
        tickerX: 0,
        dataWidth: 0,
        interval: 10 /* Fast: 10 Medium: 50 Slow: 100 */
    };


    function Ticker(divId, canvasId, items) {

        ticker = document.getElementById(divId);
        maxWidth = parseInt(ticker.style.width);

        TickerState.canvas = document.getElementById(canvasId);
        TickerState.ctx = TickerState.canvas.getContext('2d');

        TickerState.ctx.font = "20px sans-serif";
        TickerState.ctx.font = "20px Nova Flat, 20px sans-serif";
        TickerState.ctx.textAlign = "left";

        var x = 10;
        var y = 20;

        var firstTime = true;
        while (x < maxWidth * 4) {

            for (var i = 0; i < items.length; i++) {

                TickerState.ctx.fillStyle = "Blue";
                TickerState.ctx.fillText(items[i].Symbol, x, y);
                x += TickerState.ctx.measureText(items[i].Symbol).width;

                TickerState.ctx.fillStyle = "Green";
                TickerState.ctx.fillText(items[i].Value, x, y + 10);
                x += TickerState.ctx.measureText(items[i].Value).width;
                x += 10 + 6;
            }

            if (firstTime) {
                TickerState.dataWidth = x;
                firstTime = false;
            }

        }
        setTimeout(MoveTicker, TickerState.interval);
    }

    function MoveTicker() {

        TickerState.tickerX += 1;

        if (TickerState.tickerX >= TickerState.dataWidth) {
            TickerState.tickerX = 10;
        }

        TickerState.canvas.style.marginLeft = "-" + TickerState.tickerX.toString() + "px";
        TickerState.canvas.style.clip = "rect(0px " + (maxWidth + TickerState.tickerX).toString() + "px 40px -" + TickerState.tickerX.toString() + "px)";

        setTimeout(MoveTicker, TickerState.interval);
    }
</script>

</head>
<body onload="OnLoad();">

<div id="ticker" style="width:1920px">
    <canvas id="tape" width="4096" height="40">Your browser doesn't support canvas</canvas>
</div>

&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
Hello

<script>

    var loaded = false;

    function OnLoad() {
        loaded = true;
        var items = [];
        items.push({ Symbol: 'AAA', Value: '1' });
        items.push({ Symbol: 'BBB', Value: '22' });
        items.push({ Symbol: 'CCC', Value: '3.3' });
        items.push({ Symbol: 'DDD', Value: '44 1/4' });
        items.push({ Symbol: 'EEE', Value: '5,000' });
        items.push({ Symbol: 'FFF', Value: '-66' });
        items.push({ Symbol: 'GGG', Value: '700' });
        items.push({ Symbol: 'HHH', Value: '88' });
        items.push({ Symbol: 'III', Value: '9999' });
        items.push({ Symbol: 'JJJ', Value: '10' });
        Ticker("ticker", "tape", items);
    }
</script>

</body>
</html>

Adventures in HTML5: Bouncy Bar Chart

2011-10-24T06:50:00.000-07:00

Today I'm sharing a bar chart I recently built in JavaScript using HTML5 canvas. You can see a demo here (simple bar chart, multiple bar charts) and download the code here. Below I walk through the steps I went through to create this.

I'm learning JavaScript right now, and I recently shared my first JavaScript program of any consequence, a doomsday counter. This is my second JavaScript program. I time-boxed this experiment to one day (and spent a few additional hours afterward making the code pretty for this post).I was pleasantly surprised to see how much I was able to accomplish in one day. As I get more comfortable with JavaScript, I'm starting to look past the rough edge in the language and appreciate its good points. I'm sure my code technique still reflects a beginner, but as I learn more from Pluralsight courses and books like JavaScript: The Good Parts and use tools like jslint I'm getting there.

Inspiration: Jelly Charts

My inspiration for this bar chart control is a very cool online chart demo done in Silverlight I found a few years back called RichardZ's Jelly Charts. They are remarkable--highly animated and responsive, they render on the screen with a bouncy, cascading effect that is mesmerizing and addictive. Unfortunately as far as I cacn determine no source or binaries or available, but now that I'm going deep on HTML5 this provided an opportunity to create something similar. So that was my mission, to essentially match Jelly Bar in HTML5 canvas and JavaScript.

Step 1: Basic Canvas Drawing

The first thing I needed to do was get acquainted with HTML5 canvas and basic operations like drawing a line or a rectangle. The HTML5 canvas feature allows you to declare one or more elements in your HTML page, which JavaScript can then render graphics to using methods like fillRect to draw a rectangle. A good introduction to the basics of canvas and other HTML5 features can be found on w3schools.com.

Step 2: Calculations and Drawing

With some basic canvas skills it was time to write the code to do the math and draw it. Plotting axis lines, tick marks, and bars. Straightforward, but a lot of work to allow the caller flexibility of canvas size and range of values.

Step 3: Gradients & Text on Canvas

As I got the basic elements drawn it was time to master more subtleties including gradient colors and text on canvas and font control. It was easy enough to find online examples of what I needed, though in the back of my head I was wondering if I shouldn't be leveraging CSS for some of this--I need to learn more about whether there is a way to apply CSS to canvas elements. For now, it's done in the JavaScript--but the ultimate result does allow the caller to control things like colors and fonts. I also added ability to specify a chart title, column titles for the X-axis, and value labels for the bars.

Step 4: Dynamic Resizing

A chart control isn't much use unless the caller can control its size as well as the web user being able to resize their browser window. Although my work so far had not made any assumptions about canvas size or value ranges, more code would be needed to dynamically redraw the chart if the browser window was resized. I found I could use code like this in my HTML page to resize the canvas in response to a browser resize. Although this sort of worked, the browser would sometimes add scroll bars; to counter this I ended up reloading the page on resize and then dynamically sizing the canvas and drawing the chart. Not ideal, but it does work.

Step 5: Fluid Bar Animation

One of the most attractive things about the Jelly Charts are their animation. The Jelly Bar has a vertical bounce effect where the bar is drawn up, higher than its resting height, and then bounces down into position. It also draws the bars left to right with a slight delay so that there is a cascading effect horizontally. While I didn't quite equal this effect in my one-day experiment, I was able to approximate it. I used a timer to draw the bar up to an exagerrated height, and then to lower it to its correct height.

Step 6: Object Parameters & Multiple Charts

In my initial prototyping I just had a sea of global and local variables; to make the chart something useful it would need to be tidied up so that it could be easily called, controlled by the caller, and allow for multiple charts. Using JavaScript objects took care of that problem. The caller registers a chart by calling BarChart(chart) in the JavaScript library, where chart is a Chart object that includes the canvas Id to render the chart to. Charts tend to have a lot of parameters, so intelligent defaulting of chart values was an important part of this work.

Step 7: Multiple Series and Customization

If we're supporting mutliple charts, we might as well support multiple series within a bar chart too. Now Chart.bars is an array of series, where each series is an array of bar objects. I also added customization of colors, and the ability to have a transparent background in case you wanted an iamge or some other background controlled by the HTML/CSS (2-chart demo).

Step 8: Hover & Highlighting

The Jelly Bar allows you to hover over a bar and highlight it in a different color, and I also wanted to create this behavior in my edition. This gave me an opportunity to learn about mouse events. I added a mousemove event listener for the canvas of each registered chart, and also maintain a "hit list" of rendered bars. In response to a mouse move, I scan the mouse coordinates against the hit list to see if the mouse is over a bar. If we have moved over a bar (or off a bar we were previously over), the bar is either highlighted in a different color or restored respectively.

Well, there we are--not bad for a day's work. It seems to work well across mainstream browsers as well as tablets and phones though I can see I need to do some thinking about adjusting the rendering animation speed for various devices and display sizes. I had fun doing this and am finding a promising increase in velocity as I continue to work on my mastery of JavaScript and all things HTML5. Links to the code and demos are at top.

The Cloud Gourmet 30-Minute Meal: Simple Database Migration to SQL Azure

2011-10-16T20:34:00.000-07:00

Bonjour and welcome again to The Cloud Gourmet with Chef Az-ure-D.

Today we have another “30 minute meal” recipe for Windows Azure. This time we will move a simple database into the cloud. For databases that meet our criteria, this is a “piece of cake”.

I must emphasize we are talking about simple databases: large or complex databases will certainly take more than 30 minutes; some take weeks! Below we are specific about the criteria for an easy migration.

Of course we often think of a database as just one tier of a complete solution, but this is not always the case. Sometimes a database on its own is a valued asset, such as reference data that many consume for different reasons. Even if you do need to migrate a complete solution, this recipe can be of use, because it is often the best approach to migrate the data first and then the application code.

To illustrate the steps of the migration, we will use the AdventureWorksLT database from Microsoft. If you wish to practice using the same data, you can obtain it here.

Recipe: Migrating a Simple SQL Server Database to SQL Azure in 30 Minutes

Databases on the Windows Azure platform are hosted by the SQL Azure Database service, available in sizes from 1-50GB at a cost of $9.99/GB/month plus bandwidth charges. SQL Azure is very similar to SQL Server and uses the same protocol (TDS) and programming model. You can work with SQL Azure databases using both the familiar SQL Server Management Studio tool (2008 R2 edition) and the SQL Azure section of the Windows Azure Management Portal.

Plan

An excellent tool for migrating SQL Server databases to SQL Azure is the SQL Azure Migration Wizard. We will use this tool to analyze, revise, and migrate the schema and data from an on-premise database to a cloud database. Nothing we will do will modify the source database in any way.

There are 5 steps we will perform:

1. Create a SQL Azure Database Server
2. Create a SQL Azure Database
3. Migrate the Database
4. Review SQL Azure Database in SSMS
5. Review SQL Azure Database in Portal

Databases come in all sizes and complexities. The majority of the world’s databases are small in size and simple in nature. Database products come in all sizes and complexities too. Check that you meet the criteria below before using this recipe.

Criteria

Migrations to SQL Azure are smoothest and fastest when the following are true:

• SQL Server Database. Your starting point database should be in SQL Server or SQL Server Express, preferably a recent version like 2008 or 2008 R2. If this is not the case, you can expect a longer migration time and you may have to work through feature differences. If you are migrating from a different database product or a very old version of SQL Server, it is recommended you “stage” your migration by moving your database over to SQL Server 2008 R2 first, and then up into the cloud on SQL Azure.
• Small Database. Database size matters in migrations for several reasons. First of all, there is an upper size limit for a SQL Azure Database (currently 50GB); if your database is larger, then you will need to partition into multiple databases. Second, large data takes a long time to transmit (days perhaps) and you are more likely to be encountering occasional communication failures during upload. If you measure your database size in megabytes, this 30-minute recipe is for you. If you are dealing with gigabytes of data, you can still use this recipe but expect to spend one or more days migrating and you may want to employ the services of an expert.
• Simple Database. A simple database is one that is mostly about the data. Complex databases are those that depend on database server features which may extend the migration time or pose barriers to migration. Use of features like constraints, granular security, or stored procedures are often fine but can sometimes pose complications. Features like Windows authentication, SQL Agent jobs, replication, full text search, XML indexing, distributed transactions, and transparent data encryption are not available yet in SQL Azure.

Ingredients:

1 SQL Server database meeting the above criteria

You Will Need:

• A Windows Azure subscription
• The SQL Azure Migration Wizard.

Directions

Step 1: Create a SQL Azure Database Server

In this step you will create a SQL Azure database server using the Windows Azure management portal.

Note: if you have already created a SQL Azure database server, proceed to Step 2.

1A. In a large bowl.. .er, I mean In a web browser, go to the Windows Azure portal.

1B. Navigate to the Database category on the lower left.

1C. Select a subscription on the upper left.

1D. Click the Create button in the Server toolbar. A dialog appears.

1E. Specify the data center locale where you want to create your database server and click Next.

1F. Now specify a name you would like to use for an Administrator, along with a strong password. Record the administrator name and password for safekeeping. Again click Next.

Note: it’s possible to change the password in the future, but not the admin name.

1G. Finally, you will be prompted to set firewall rules. In order to access the database we will need to add a firewall rule.

  A. Check the Allow other Windows Azure services to access this server checkbox.
  B.Click Add.
  C. Enter a rule name.
  D. Enter a starting and ending IP address. You can either specify your own IP (shown in the dialog), or some other range. If you want to allow access for all, you can specify 0.0.0.0 through 255.255.255.255.
  E. Click OK and Finish to close the dialogs.

1H. A database server will soon appear in the main area of the Windows Azure portal. You will need to capture the server name, which is auto-generated and cryptic. In our example, it is b7e77waic7. Your name will be different.

So far we have created a database server (It is actually multiple servers, but this single virtual server name fits the SQL Server connection string model). The next step will be to create a database on that server.

Step 2: Create a SQL Azure Database

In this step you will create a database on the database server you created in Step 1.

2A. In the Windows Azure portal, select your database server.

2B. Click the Create button in the Database toolbar. A dialog appears.

2C. Specify (and record) a name for your database, and select an edition/size sufficient for your database. The Web edition offers 1/5GB sizes and the Business edition 10/20/30/40/50GB. Then click OK.

2D. Verify the database was created by finding it and selecting it in the outline at upper left. Notice that in addition to your database the database server also contains a master database.

Now that we have created our cloud database, we can begin the migration.

Step 3: Migrate the Database

In this step you will use the SQL Azure Migration Wizard to migrate your SQL Server database to the SQL Azure database created in Step 2.

3A. Launch the SQL Azure Migration Wizard and select the Analyze and Migrate / SQL Database option. Then click Next.

3B. In the Connect to Server dialog that appears, specify your source database server and authentication credentials as described below. Then click Connect.

• Server name: Here you must specify server-name or server-name\instance-name. If you are running full SQL Server on your local machine and using the default SQL Server instance, just leave the setting to its default of localhost. If you are running SQL Server Express on your local machine, you are most likely using the .\SQLEXPRESS instance.
• Authentication: Your source database may be set up for Windows authentication or SQL authentication. Select the appropriate option. For SQL authentication, also enter your username and password credentials.
• Database. Leave this at its default value of Master DB. This will cause the databases to be listed for you on the next screen.

3C. On the next screen (Select Source), select your database and click Next.

3D. On the Choose Objects dialog, leave the default of Script all database objects and click Next.

3E. On the Script Wizard Summary dialog, make no changes and click Next. When prompted Ready to generate SQL script?, click Yes.

3F. When the Results Summary dialog appears, review the report content fully to see if there are any problems. You may also use the Save button to save a copy of the report.

In the case of the AdventureworksLT sample database we are using to illustrate this recipe, there is a problem noted in the report for the ProductionDescriptionsSchemaCollection table: XML Schema Collections are currently not supported in SQL Azure. This means our source database is using an unsupported feature in this one table. In our case we are unconcerned and decide to proceed without that one table. If you encounter errors, you will need to evaluate how serious they are and what action you should take about them. Note that it is possible in Step 3D earlier to specify which database objects are and are not included in the migration.

3G. If you have chosen after reading the report to proceed with the migration, click Next. A Connect to Server dialog appears. Otherwise click Exit and you will need to work on resolving your issues.

3H. Specify the information below to connect to the SQL Azure database you created earlier in Steps 1 and 2. Then click Next.

• Server name: Specify the server name in the form SERVER.database.windows.net where SERVER is the generated database server name from Step 1H (b7e77waic7 in our example).
• Authentication: Specify Use a specific user ID and password
• User name: Specify an administrator username in the form USERNAME@SERVER where the administrator user name is the administration name you made up in Step 1F and the server name is the generated database server name from Step 1H (chefazured@b7e77waic7 in our example).
• Password: Specify the administrator password from Step 1F.
• Database: Select the Specify Database option and specify the name of the database you created in Step 2C (adventureworks in our example).

3I. On the Setup Target Server Connection dialog, confirm the database name is correct and click Next. When prompted to Execute script against destination server?, click Yes.

3J. Now sit back as the database is migrated. The running report will show you what is happening, including errors and remedial actions. Just how long this takes depends on the size of your database and the quality of your Internet connection.

3K. When the processing completed, you’ll see Processing finished on the bottom of the report. Review the report and decide if you think the migration was successful. You can save this report with the Save button if you wish. Then click Exit.

The last thing to do is confirm the database migration was successful. You can do this with SQL Server Management Studio (Step 4) or the Windows Azure Portal (Step 5).

Step 4: Review SQL Azure Database in SSMS (Optional)

In this step you will confirm your database was successful migrated to the cloud by accessing it with SQL Server Management Studio. You need the 2008 R2 edition of SSMS for this.

4A. Launch SQL Server Management Studio. The Connect to Server dialog appears.

4B. In the Connect to Server dialog, specify the connection information below:

• Server name: the generated server name from Step 1H.
• Authentication: SQL Server Authentication.
• Login: The login name from Step 1F.
• Password: the password from Step 1F.
• Remember password: check if you don’t want to have to re-enter this info.
• Options / Connect to Database: click the Options button and enter the database name from Step 2C under Connect to Database.

4C.Click Connect to connect to the database. If it fails, check the following:

• Did you create your database server?
• Did you create your database?
• Are you specifying the correct database server name in the right format?
• Are you specifying the correct admin username and password?
• Did you specify the database name on the Connection Properties tab?
• Are there any extraneous leading or trailing spaces in what you entered?
• Does your firewall prevent port 4133 (which SSMS required).

4D. Now inspect your database, start by expanding the SSMS outline at left and ensuring the tables you expect to be present are there.

4E. Perform some SELECT queries to ensure the data looks right. Do tables contain the number of rows you expect? Does table data look like you expect?

Step 5: Review SQL Azure Database in Portal (Optional)

This step is optional. If you would also like to see your data in the SQL Azure Portal, or if you were unable to use SSMS in Step 4, follow these steps:

5A. In the Windows Azure Management Portal, return to the Database area where you were working in Steps 1 and 2.

5B. Select your database on the outline and left and click the Manage button in the Database toolbar.

5C. In the sign-in dialog, specify the administrator username and password from Step 1F. Then click Log on.

5D. Click Tables at left and the database tables will be listed. Confirm the tables you expect are all there.

5E. Select a table you want to view. Click the Data icon to view its data, or the Design icon to view its design.

Concluding Remarks

Congratulations, you were magnificent! Vous avez été magnifiques! I am very proud of you.

I very much hope that your migration went well. If you ran into complications, if the souffle did not rise, do not depair. You must appreciate that not all database migrations are simple affairs. For help you can make avail of the excellent online guidance, support forums, community blogging, and perhaps consider obtaining help from an experienced consultant.

Adventures in HTML5: A JavaScript Doomsday Counter

2011-10-11T00:39:00.000-07:00

Part of mastering HTML5 is mastering JavaScript, a big focus for me and 120 colleagues this month. The best way to go deep on anything in the software world is to be constantly building stuff with it, so here’s something I developed over the last few days: an animated odometer-style counter control suitable for counting down to a deadline.

DEVELOPING THE CONTROL

I didn’t start out intending to write a counter control at all, I was trying to find one to use in a dashboard. I want to be building some cool HTML5 business dashboards in the months to come, and a counter is one of the many widgets I’ll need. I started out looking for one, and sure enough there are a number of free JavaScript counters with source to be found online. Unfortunately, after some evaluation I found issues with each of the ones I tried and I wasn’t able to control appearance or behavior to my satisfaction. Ultimately, I decided to take a shot at creating my own counter control. I wasn’t sure how far I’d get but if nothing else it would be a good learning experience. Rather than writing a simple counter that shows a single value, I chose to create a days-hours-minutes-seconds counter that would count down to a deadline.

The first step was to obtain graphics for the odometer images, then think through how the digit display should work. If we were merely displaying and updating digit images this would be no big deal, but for this control I wanted the seconds digits to be moving as well as the minutes, hours, and days digits when they get decremented. I created a filmstrip-like image (below) with the digits 0-9 arranged vertically beneath each other. Using this image as the background for each digit, showing any particular value is just a matter of clipping the image and changing its top offset. Moving the image only requires use of a timer to increment or decrement the clip area and top offset until the new digit has rolled into place. As you can imagine there’s quite a bit of logic needed to do this well and bump seconds to minutes to hours to days.

Using top margin and CSS clipping to show and roll digits

To show one digit from the image, I used the CSS clipping feature. I created CSS classes for each digit that set the image’s top margin and clipping area. One complication of CSS clipping is that it requires absolute positioning, something I didn’t want. It turns out you can have it both ways, by using absolute positioning inside a DIV tag container that uses relative positioning.

/* Digit classes */

.d0 { position:absolute; clip:rect(39px 37px 78px 0px); vertical-align: middle; margin-top:-39px; }

.d1 { position:absolute; clip:rect(78px 37px 117px 0px); vertical-align: middle; margin-top:-78px; }

.d2 { position:absolute; clip:rect(117px 37px 156px 0px); vertical-align: middle; margin-top:-117px; }

.d3 { position:absolute; clip:rect(156px 37px 195px 0px); vertical-align: middle; margin-top:-156px; }

.d4 { position:absolute; clip:rect(195px 37px 234px 0px); vertical-align: middle; margin-top:-195px; }

.d5 { position:absolute; clip:rect(234px 37px 273px 0px); vertical-align: middle; margin-top:-234px; }

.d6 { position:absolute; clip:rect(273px 37px 312px 0px); vertical-align: middle; margin-top:-273px; }

.d7 { position:absolute; clip:rect(312px 37px 351px 0px); vertical-align: middle; margin-top:-312px; }

.d8 { position:absolute; clip:rect(351px 37px 390px 0px); vertical-align: middle; margin-top:-351px; }

.d9 { position:absolute; clip:rect(390px 37px 429px 0px); vertical-align: middle; margin-top:-390px; }

Lots of JavaScript code later, I had a decent working prototype control. This afforded me an opportunity to learn more about JavaScript as I tackled events, timers, dynamic DOM alteration, and date calculation. Although I’ve only implemented decrementing deadline counters so far, the code is written in anticipation of other counter types in the future. While my code is in need of completion and refactoring, I’m still proud of it for a first effort.

CREATING THE DOOMSDAY COUNTDOWN DEMO

Next it was time to incorporate the countdown control into a demo application, and it would need to involve one or more deadlines. With all the end-of the-world date setting going on these days, it seemed a natural to create a tongue-in-cheek “Doomsday Countdown” web site that shows the running countdown to the various end-of-the-world dates. Check it out here. Unfortunately there are some positioning problems in Firefox I have yet to figure out with the days counter, but it renders just as it should on Chrome and IE.

In my HTML page, the application references JQuery, the counter.js library for the control, and the counter.css CSS for the control.

// Create an array of counter objects.

var counters;

      var counterCamping = {
          Prefix: "Camping",
          CounterType: "Date",
          Direction: -1,
          EndDate: "10/21/2011",
          Hours: 8
      };

var counterBibleCode = {

          Prefix: "BibleCode",
          CounterType: "Date",
          Direction: -1,
          EndDate: "01/01/2012",
          Hour: -16
      };

var counterMayan = {

          Prefix: "Mayan",
          CounterType: "Date",
          Direction: -1,
          EndDate: "12/21/2012",
          Hour: 0
      };

var counterRasha = {

          Prefix: "Rasha",
          CounterType: "Date",
          Direction: -1,
          EndDate: "01/01/2280",
          Hour: -16
      };

var counterNostradamus = {

          Prefix: "Nostradamus",
          CounterType: "Date",
          Direction: -1,
          EndDate: "01/01/3739",
          Hour: -8
      };

var counterSun = {

          Prefix: "Sun",
          CounterType: "Date",
          Direction: -1,
          EndDate: "01/01/99999",
          Hour: 42
      };

counters = [6];

counters[0] = counterCamping;

      counters[1] = counterBibleCode;
      counters[2] = counterMayan;
      counters[3] = counterRasha;
      counters[4] = counterNostradamus;
      counters[5] = counterSun;

// Load event handler - add counters to the DOM and start update timer.

function load() {

          SetCounters(counterCamping);
          SetCounters(counterBibleCode);
          SetCounters(counterMayan);
          SetCounters(counterRasha);
          SetCounters(counterNostradamus);
          SetCounters(counterSun);
          StartCounters();
      }
<script>

The onload event handler calls the counter.js library to insert counters into the DOM and start a countdown timer running. From there the counters count down all by themselves.

The body of the document is a header, a table that holds the counters and labels, and a footer. Yes, I’m well aware that tables aren’t cool these days—but I had to timebox this experiment and was focused on the JavaScript. As you can see, the Ids used in the table entries match the JavaScript object prefixes seen above. The counter.js library assumes for a counter object with name X that there are elements named XDays, XMinutes, XMinutes, and XSeconds.

<tr>
<th class="Label SideLabel">Mayan Calendar</th>
<td> </td>
<td class="Label DateLabel">2012-DEC-21</td>
<td> </td>
<td><div id="MayanDays" class="BigCounter" /></td>
<td class="sep"> &#8226 </td>
<td><div id="MayanHours" class="Counter" /></td>
<td class="sep"> &#8226 </td>
<td><div id="MayanMinutes" class="Counter" /></td>
<td class="sep"> &#8226 </td>
<td><div id="MayanSeconds" class="Counter" /></td>
</tr>

Was this the valuable learning experience I expected it to be? It was. I wouldn't have gotten very far without the many useful tips and code snippets about JavaScript online. For the application heading I found a nice fire text effect on UI Hacker. The application also uses a function or two from the JQuery library.

With the understanding this is only prototype code and there is a display issue on Firefox, the Doomsday Countdown application and countdown control may be downloaded from here.

(we're counting on you, but if you don't use it, it's not the end of the world)