Category Archives: Development

Unobtrusive Validation in ASP.NET 4.5

While listening to the 2011 BUILD presentations, I overheard one of the speakers talking about “unobtrusive validation” in ASP.NET 4.5 Web Forms. Well, I had to see this for myself. Let me give you a little background: validation on the web is a tricky business. To ensure the integrity of data feeding into your web [...]

Posted in Development | Tagged , , , , | Leave a comment

Developing a Web Application Locally with IIS7 and Web Developer Express

This post will guide you through developing a web application locally with IIS7 and Web Developer Express. 1. Install IIS7 Of course, the first thing we’ll need to do is install Internet Information Services (IIS). IIS will be the web server that hosts our web application. 2. Install Visual Web Developer 2010 Express Next, we’ll [...]

Posted in Development | Tagged , , | Leave a comment

Create an Iframe Portal

To get a little practice with CSS3 keyframe animations, let’s do something a little strange: create an iframe portal like the portals in Portal. Check out the demo in either Firefox or Chrome (click anywhere to shoot a portal). Here’s a screenshot of the the end result: To start, let’s make an iframe that looks [...]

Posted in Design, Development | Tagged , , , | Leave a comment

Extending the UCLA Mobile Web Framework Geolocation API

If you tried out my UCLA Mobile Web Framework (MWF) treasure hunt demo, you may have noticed that the geolocation was a little spotty. Depending on your phone, service provider, geolocation settings, or any number of other variables, you might be (virtually) digging up treasure in a completely different location than someone (physically) standing right [...]

Posted in Development | Tagged , , | Leave a comment

Device Classification in the UCLA Mobile Web Framework

UPDATE: The device classifications covered in this article are now fully documented. As the UCLA Mobile Web Framework is rapidly evolving, you’re better off getting the information straight from the source. The UCLA Mobile Web Framework (MWF) classifies devices into three basic categories: basic, standard, and full. These categories are hierarchical (a “full” device can [...]

Posted in Development | Tagged | 2 Comments

Set Up UCLA Mobile Web Framework on WampServer

UPDATE: If you read this post before, you might be wondering where all of the stuff about WURFL went. Well, since version 1.2, the UCLA Mobile Web Framework no longer depends on WURFL. This actually makes the installation process much smoother. Device capabilities are now determined by storing information from Modernizr in a cookie. I [...]

Posted in Development | Tagged , , | Leave a comment

Create a Treasure Hunt Game With the UCLA Mobile Web Framework

The UCLA Mobile Web Framework (UCLA MWF) is a cross-platform mobile web framework from UCLA. It allows developers to quickly create mobile websites with some basic markup and a few CSS classes. To test it out, I created a small demo, called Treasure Hunt. It’s a simple mobile game where you can bury treasure in [...]

Posted in Development | Tagged , , , , | 3 Comments

HTML5 Canvas Balloon

Today we’re going to draw a balloon on the HTML5 canvas element. Why not, right? Here’s the final result: The balloon shape is basically a circle stretched out in various places. However, it’s not that straightforward to simply draw a circle and then stretch it with the canvas API. Instead, we need to recreate a [...]

Posted in Development | Tagged , , | Leave a comment

Capturing Cursor Speed with jQuery

I’ve been playing around with the canvas element lately, and I came up with a few fun ideas that would require capturing the speed of the User’s cursor movements. I looked around a little and only found a few bare scripts here and there, so I decided to package the logic into a jQuery plug-in [...]

Posted in Development | Tagged , | 4 Comments

HTML5 Circle Puzzle

I was messing around with the HTML5 canvas element this morning, and I came up with something kind of fun. It’s basically a puzzle built with a series of rotating concentric circles that you can drag. Here’s a screenshot: Check it out. Keep in mind that I didn’t add any logic to confirm that you’ve [...]

Posted in Development | Tagged , | Leave a comment