Create a Mobile Friendly Website with ASP.NET Themes

by Justin 8. November 2008 10:15

Download the Demo (ASP.NET 2.0)

If you're reading this you realize the value of optimizing websites for mobile devices. I created an ASP.NET website that chooses a different theme depending on whether or not the device accessing the page is a mobile device. If a mobile device is recognized the theme displays a red background, otherwise a different theme is chosen which displays a blue background. Feel free to check out my online demo for custom theming mobile devices, and download a zipped version of the demo to see exactly how it works. Be sure to view the demo in both a mobile and non-mobile browser to get the full effect. If you don't have a mobile device try using the online Opera Mini simulator.

Supported Mobile Devices:

  • Apple iPhone
  • Apple iPod
  • Google Android
  • Opera Mini
  • PlayStation Portable
  • Handspring Blazer
  • Motorola Internet Browser
  • Pocket IE
  • RIM Browser
  • Nokia
  • Compact NetFront

How it Works

I've added some custom browser definitions to the App_Browsers folder. This extends the default ASP.NET browser definitions, which are not very good for recognizing mobile devices. There are two .browser files, courtesy of Owen Bradly's website, that contains the definitions. (I'll note that I added a definition for recognizing the Google Android as it was not in Owen's files.) Each time the Default.aspx page is request I check to see if a supported Mobile device is requested the page. If so then I change the theme to the mobile theme. The code to do this is very simple.

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page 
{
    protected void Page_PreInit(object sender, EventArgs e)
    {
        if (Request.Browser.IsMobileDevice)
            Theme = "Mobile";
    }
}

If you're using Master pages you can always set this in the master page's code behind instead of each individual page's code behind.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , ,

asp.net

The Youtube Generation vs Moribund TV Technology

by Justin 27. September 2008 14:27

It boggles my mind that television networks still don't get it. Executives have chosen to bring back shows like 90210 in hope it will woo the younger viewers who aren't watching TV anymore. The truth is, we want to watch television, but we want to watch it when we want to watch it. We have been spoiled by the internet.

Television networks are still "time-slot-centric." They chose to strategically place shows on different days to compete with other networks, and to run these at certain times. If television executives really want to land younger viewers they are going to have to become "viewer-centric." That is, they must redefine television technology. With today's technology any episode from any television channel should be available at any time. Not just modern shows, but shows that go as far back as TV goes should be readily available for viewing.

It is this on-demand capability that make youtube so.. friendly. How many times have you turned on the boob tube, flipped through the channels and thought, "there's not a single thing worth watching on TV." How many times have you wanted to watch two different TV shows, but you had to miss one because two competing stations put them in the same time slot on the same day? So what do you do? You jump on the computer, navigate to youtube, and within moments you can find the show. On the other hand, with youtube there's a sense of adventure because I often discover a video of something new and fascinating. TV as it is now just can not compete with this!

My generation wants to go to the History Channel, browse through an endless list of shows, and have the ability to download (or stream) any show that I want to see. I'm talking about true on-demand television, I'm talking about completely shifting the paradigm of TV as we currently know it. I'm tired of being forced to watch boring Ice Road Trucker marathons!

In this type of conversation it's inevitable that someone will mention TiVo, but while TiVo is a step in the right direction it is NOT the solution. Its problem is that you have to schedule when the shows are to be recorded.  There's a certain amount of effort and research to find the shows you might want to see in the future. Then you have to schedule TiVo to record the show, and then find time later to watch the show.

That's too much work! I don't want to do any research at all! I want to be able to turn on the TV whenever I feel like it and choose what I want to watch, right now. I want nearly unlimited options. That's the problem with modern TV, it's old technology that is dragging its feet. It simply can not compete with the internet. The same thing that happened to the recording industry about a decade ago is now happening with the television industry. They need to wake up and smell the technology!

I propose paying for subscriptions to television channels. For instance, if I want to watch just the History Channel, Comedy Central, and the Travel Channel I can subscribe to those for a fee. Preferrably I could choose unlimited downloading of all shows, without commericials, for one fee; and then pay less for a streaming version of the channel with commercials. Why isn't this being done? The problem with TV is that it isn't as tailored to the viewer as much as the internet is. You have to watch whatever it is the channel wants you to watch, and if you miss a show you have to find the next time it reruns and catch it then. People today do NOT want to schedule their lives around TV shows!

Is it any wonder that ratings have dropped for season premiers on all the major networks? It's not that the shows are bad, it's just the technology is lame. More than likely more people are watching the shows, but they're probably downloading it online instead. TV is going to have to evolve, rather quickly, to be as flexible (or almost as flexible) as the internet or continue its inevitable death.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: ,

The Rules of Web Development

by Justin 26. July 2008 16:04

As far as I'm concerned, there are only two rules when it comes to developing for the web.

  1. Do NOT use the <blink> tag
  2. Do NOT use Comic Sans
  3. Do NOT use the <center> tag
Everything else is open to debate.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

Firefox World Record and IMSLP Returns!

by Justin 3. July 2008 01:23

First, champions of public domain rejoice! IMSLP (International Music Score Library Project) is back online! It was shut down last year when Universal Edition threatened to sue the site for copyright infridgement. Of course, if you don't know, IMSLP only contains scores that are in the public domain. That means free and legal. So most of the works you'll see there are PDF scans of very old sheet music. However, that doesn't sit well with companies that make good money off of long dead composers. So they used lawyers to intimidate the college student behind IMSLP, who does not have the means to legally protect himself. Thankfully, many people got behind the kid and offered support, including some prominent university legal experts. Regardless, it's back online!

Second, Firefox indeed set the Guiness World Record for Most Downloads in a 24-hour time frame. According to Spread Firefox: "We set a Guinness World Record for the most software downloads in 24 hours. With your help we reached 8,002,530 downloads."

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

Uber Geeky

by Justin 26. June 2008 00:20

I'm a professional computer programmer with a degree in Computer Science. Needless to say, I've seen some pretty geeky things done by some pretty geeky people, but nothing tops what a co-worker showed me the other day.

If you telnet to towel.blinkenlights.nl then you'll see an entire scene-by-scene recreation of the first (er, fourth) Star Wars movie done in ASCII!

  1. In Windows go to Start > Run..., or hold down the windows key and press R. 
  2. Type "telnet towel.blinkenlights.nl", without the quotes.
  3. Marvel.



Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

Firefox 3.0 To Be Released 6/17/2008

by Justin 14. June 2008 12:09
Version 3.0 of Firefox will officially be released to the public on June 17th, 2008. You will be able to download it from http://www.spreadfirefox.com/en-US/worldrecord. You can view the release notes at http://www.mozilla.com/en-US/firefox/3.0/releasenotes/.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

Using the HTML label element with ASP.NET

by Justin 1. May 2008 00:28

You've probably noticed that a <asp:Label /> element actually renders a <span> tag, not the <label for="name"> tag that's been around since HTML 4. Luckily, it's pretty easy to include the label element in your ASP.NET forms.

ASP.NET 2.0, 3.0, 3.5 and Later

To make the <asp:Label /> control render as a <label> instead of a <span> include the AssociatedControlID attribute like so.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>Untitled Page</title>
</head>
<body>
	<form id="form1" runat="server">
		<asp:Label ID="Label1" runat="server" AssociatedControlID="TextBox1" Text="Label"></asp:Label>
		<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
	</form>
</body>
</html>

 

ASP.NET 1.0, 1.1

Unfortunately, older versions of ASP.NET don't support the AssociatedControlID attribute. Instead, you'll have to create a regular HTML <label> element and manually write out the ID of the associated control in the "for" attribute. 

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="test.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
	<title>WebForm1</title>
	<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
	<meta name="CODE_LANGUAGE" Content="C#">
	<meta name="vs_defaultClientScript" content="JavaScript">
	<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
	<form id="Form1" method="post" runat="server">
		<label for="<%=TextBox1.ClientID %>">Label</label>
		<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
	</form>
</body>
</HTML>

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

Decompile a .NET DLL into a Visual Studio project

by Justin 26. April 2008 09:34

As a professional developer you will eventually have to view or edit some code that you do not have the original source to. The original source could've been lost, accidently deleted, or never given to you when it should've been. When you are in one of these situations try the following.

  1. Download Reflector, which allows you to open an assembly (i.e. DLL file) and view its contents. However, by default you can not modify or export the contents of the DLL. You will need Add-Ins to do that.
  2. Extract Reflector into a directory on your computer. I chose C:\Program Files\Reflector\ as my directory.
  3. Download the File Disassembler Add-In, which allows you to export the contents of the assembly into a Visual Studio project.
  4. Extract Reflector.FileDisassembler.dll from the zip and into to the same directory as your Reflector application.
  5. Open the Reflector application.
  6. Chose whichever version of .NET that you're currently using.
  7. Go to View > Add-Ins and click the Add... button.
  8. Double click Reflector.FileDisassembler.dll to selected it, then click Close.
  9. On Reflector's menu bar under Tools there's now an option called File Disassembler.
  10. Use File > Open to open the name of the assembly that you want to decompile. It will load in the left pane after the Microsoft assemblies.
  11. Click on the assembly's name once to select it.
  12. Go to Tools > File Disassembler to open up the file disassembler's pane. Tip: Close any other pane's that may be obstructing your view.
  13. Make sure you're okay with the Output Directory and you have your language of choice selected in Reflector. (i.e. C#, Visual Basic, etc.)
  14. Click the Generate button in the File Disassembler pane.
  15. Navigate to the directory that the DLL was decompiled to and enjoy!

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , ,

How to Run WebKit On Windows

by Justin 25. April 2008 02:05

So I've been noticing a buzz in the web dev community lately about a web browser called "WebKit. " It made some news recently when it tied with Opera as being one of the first browsers to pass the Acid 3 test.

Don't get too excited, it's just an open source version of Safari. Well, it's the rendering engine that Safari is built off of, which is apparently based on the same engine that's used by Konqueror. (Now there's a browser we haven't heard of in a while.) It seems that in order to "install" WebKit you basically have to run a script that uses an existing Safari install as its user interface. The install seems to be temporary.

Running Web Kit

  1. If you don't already have it installed, then download Safari and install it.
  2. After it's installed check out the Acid 3 test, and you'll see that Safari fails it (as of 4/24/2008).
  3. Download the latest build of WebKit.
  4. Extract the zip to your desktop.
  5. Double click the run-nightly-webkit.cmd script. The old MS-DOS console will open and will spit out a series of file updates.
  6. Safari will automatically launch, and even though it says it's Safari it's actually WebKit. Navigate to the Acid 3 test and you'll see that it passes it. Note that your original Safari install is unaffected.
 

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: ,

Add a Fade Effect to Your Forms

by Justin 6. April 2008 00:08

Forms are boring! Or are they? Make any form more interesting by morphing between your form's questions using mootools, a JavaScript framework. Just click the first link below and click "Next Question >>" to see the effect in action. Then click the second link to see what the page would look like if the user had JavaScript disabled.

Demo with JavaScript Enabled

Demo with JavaScript Disabled (Simulated)

Not only can this be used with a form, but with anything that you want to break up into steps, such as a wizard that guides the user through a list of new features for a product.

The technique I use is known as unobtrusive JavaScript, which means the page does not rely on the JavaScript to work. Rather, enabling JavaScript will result in some "bells and whistles," but if it's turned off the page is still 100% functional. My goal was to keep this script as simple as possible, so feel free to edit it and use it on any of your projects—free of charge or limitation.

The script basically works like this:

  1. Get all the questions, or steps, in the form.
  2. Dynamically add some navigation controls to move forward and backward for each question.
  3. Hide all the questions or steps, except for the first step.


Whenever a link is clicked an event is called to handle which step is faded in as the current step is faded out.

Download mootools script
Download fade effect script 

Note: Everything in the "options" section of the class is there to allow you to easily customize the script. The "initalize" section is basically a constructor for the class itself.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , ,

Powered by BlogEngine.NET 1.4.5.0
Theme by Mads Kristensen