A friend of mine recently asked me about creating forms with XHTML/CSS and since I've been recycling some simple form code for a while now I thought I'd share it.  I've also seen a lot of sites that are standards-compliant that still use tables to layout their forms when it's not all that difficult to do it with some CSS... so here's a basic demo.

First off, we'll have some HTML for our form... Basically what we're going to do is wrap our form fields and labels (because all fields need associated labels) in some div and span tags which we'll then style with CSS.

    

        

            First Name:
            
        
        

            Last Name:
            
        
        

            Email:
            
        
        

            Zip:
            
        
        

            
            
                I would like to be contacted periodically to receive more information.
            
        
        

             
            
                
            
        
    

Next we'll use some CSS to float the labels and form fields next to each other and give them a simple background color.

div.formRow { width: 550px; overflow: hidden; clear: both; margin: 0 0 3px 0; padding: 5px 0; font-size: 12px; background: #efefef; }
	div.formRow span.formLabel { width: 125px; font-weight: bold; text-align: right; float: left; }
	div.formRow span.formControl { width: 405px; text-align: left; float: right;  } 
	div.formRow textarea { width: 300px; height: 120px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
	div.formRow input.formButton { background: #666; font-weight: bold; color: #fff; }
	div.formRow label { display: inline !important; }
	.currentRow { background: #ffc !important; }

Lastly, we'll use a simple jQuery function to highlight the row of the form field you're in. This works by applying/removing a CSS class when you click in/out of form elements. I use a class of "focusable" on the form field itself as the selector for jQuery to find and apply the function.

	$(function(){
		$('.form .focusable').focus(function(){
			$(this).parents('.formRow').addClass("currentRow");
		}).blur(function(){
			$(this).parents('.formRow').removeClass("currentRow");
		});
	});

That's it. Note that this is a pretty simple example. It doesn't include any validation or tooltip descriptors of form fields and certainly isn't meant to be the definitive guide on CSS forms. It's just some simple code that you can use a starting point to get a nice looking form up very very quickly.

See a demo of this CSS form code in action.

I've blogged before about services such as BrowserCam which you can use to test your websites across browsers and platforms. Screen capture services are increasingly hard to use since many websites these days rely on JavaScript and AJAX functionality which can't be tested by a screenshot. Remote access solves that problem but that can often be time consuming and tedious. Wouldn't it be great if you could just run the browser on your machine?

Thanks to Xenocode's browser sandbox you can do just that. Xenocode is an application virtualization system that allows developers to make their applications available in virtual executables that can be deployed pretty much anywhere, such as via the web or on a USB key. It's pretty cool technology and as a showcase, they currently have a browser area where you can run multiple browsers simultaneously without having to install them on your machine.

This browser sandbox doesn't have the myriad of browser/platform combinations that BrowserCam offers but let's face facts... most of us developers spend the majority of our time trying to make sure that our sites and apps work in IE6. Xencode will let you open IE6 (as well as 7 and 8) right on your desktop so that you can easily test, tweak, and troubleshoot your code. It's a great asset to any developer's toolbox.

Visit the Xenocode Browser Sandbox

It's hard to believe that I started this blog way back in 2005. Several years later I decided it was time to give Code Scene it's first ever "redesign". I use the term redesign lightly since A) I am definitely not a designer and B) it doesn't look radically different than before.

Here are a few of the changes on the site:

• The site is now wider to support a more standard 1024x768 resolution
• I've added an addthis.com widget and links to my social networking profiles.
• I've joined the Free The Web movement in boycotting IE6.  There may be a few IE6 problems with the new templates but I've stopped caring. 
  
• I'm using jQuery UI for the accordion and tabbed panels in the templates.
• Added search keyword highlighting using the FastSearch plugin for Movable Type.
• Moved hosting companies once again, this time to Media Temple.
• Added code highlighting for any code samples on the site, courtesy of SyntaxHighlighter by Alex Gorbatchev.
• Created a mobile version of the site at m.codescene.com using MoFuse and a mobile redirection script.
  

I'm still making some tweaks and adjustments to the site but let me know what you think or if you find something wrong.

I use Dreamweaver for XHTML/CSS work and Visual Studio for ASP.NET.  You can say what you want about either of them or about the purity of hand-coding in Notepad, but the reason I use programs like that is primarily because of their "intellisense" and code-complete features.  I still hand-code all my XHTML & CSS but using Dreamweaver allows me to type the code exponentially faster.  I type "m" and it fills in "argin" for me.  This might seem trivial but when you spend your life at the computer this adds up to thousands of saved keystrokes a week.  Code completion features can also be a great learning tool for junior developers and developers getting used to a new language.

Pretty much every web project I've done recently has involved some sort of jQuery coding.   There are some plugins available for Dreamweaver and Visual Studio to add code-complete for jQuery but as of this writing I haven't found any that I love.  Enter Aptana Studio.

Aptana Studio is full-featured IDE with a vast array of features for coding in XHTML/CSS, PHP, Ruby on Rails, Python, and more.  It also features integrated FTP, JavaScript debugging with Firebug, a DOM navigator, and complete set of database tools.   It's a fantastic program, it runs on Windows, Mac, and Linux, and best of all… it's free.  (There is a $99 "Pro" version for hardcore users but the free version has an incredible feature set)

So while there are dozens of reasons to give Aptana a download, the reason I love it right now though is because it has an awesome code assist function for jQuery.   For those of you not using jQuery it also supports and/or has plug-ins for Prototype & Script.aculo.us, Dojo, Ext JS, YUI, MooTools, and pretty much anything else you can imagine.

Here's how to enable code assist for jQuery in Aptana Studio

• Open Aptana Studio
• Click Window > Preferences
• Expand the Aptana node, then the Editors node, then the JavaScript node
• Click on Code Assist
• Check the boxes for libraries you wish to use
• Click Okay and restart the program

Overall Aptana Studio is a great program and a viable alternative for other development environments, especially if you don't want to shell out hundreds of dollars to Adobe or Microsoft.

Download Aptana Studio here.

As a developer I work with many different designers.  Often times I'll just be given a zip file full of Photoshop PSD files to cut up and turn into XHTML/CSS/JavaScript templates.  How the PSDs were created will determine how long it will take to build them.  If you're a designer and you're handing Photoshop files off to a development team, here are six quick tips that will make the production easier.  This should in turn save you money since it will take the developer less time.

• Use multiple layers - Much of web development involves turning elements on/off to export transparent images and background graphics.  Having multiple items all on the same layer makes this process more difficult and more time consuming.
• Name and group your layers - When creating new layers be sure to give them proper names. If your logo consists of twelve different layers named things like "Layer 4 copy" and "Shape 16" this will make things much harder than if you combine them all into one layer or group named "logo".
• Delete unused layers - Often times during the design process a designer will try different techniques before settling on a final design.  By making sure that you remove all unused layers before sending the PSD to the developer you can ensure there will be no confusion over the final design.
• Create all rollover and active states - If your design has different states for nav buttons, include all of them for each and every item in the nav, preferrably in named layer groups.  If you only include one nav item to illustrate the idea then you force the developer to create the other states.  Depending on the design and the developer's Photoshop skills this will often take longer than creating them yourself.
• Include any non-standard fonts - If you're using a non-web font for things like headers or nav items, include those font files with your PSDs. It's likely that your developers will need them to create additional graphics and/or to include in sIFR files.  OpenType fonts will help ensure that they can be opened on Macs or PCs
• Use the notes feature - If you have JavaScript functionality in mind for things like rotating promos or an accordion nav you can annotate your Photoshop file by adding notes. These can help eliminate confusion and ensure you get what you want without wasted hours.

By following those rules and cleaning up your PSD files before you send them on to development you'll make sure that the development process goes as smoothly as possible.  This saves time, money, and keeps your development team happy.

I love Movable Type and have used it for dozens of sites and blogs over the last several years.  With each release the platform gets better and better but one thing that's always bugged me is that while the majority of the code is now PHP-based the search feature still relies on a Perl script.

[EDIT: As a Twitter follower pointed out... MT is NOT mostly PHP-based which is true.  What I meant to say was that the front-end can be published to a mostly PHP-based site, except for certain things like the serach feature]

While this probably isn't an issue for most users, advanced users will find this somewhat limiting.  Most of the templates I develop include various bits of PHP code in them.  Since the search feature runs as .cgi none of my PHP code will execute.  In order for my site to function I have to have a separate (often stripped-down) template just for the search feature.

Fast Search from MT-Hacks.com is the solution to this problem.  It's an easy to use plug-in that will allow you to use PHP in your search template. That alone is reason enough for me to use it. It does however, provide a whole bunch of other features such as faster searches, pagination, and search term highlighting.  You can use the plugin for free provided that you include a message noting that your search results are powered by Fast Search.  Otherwise, non-commercial licenses are $33 and commercial licenses are $97 for up to 5 blogs... a steal for a plug-in that solves one of Movable Type's biggest issues.  Find out more or download the plug-in at the MT-Hacks Fast Search page.

Movable Type veterans will note that commenting is also done via a Perl script and suffers from this annoyance as well.  Ryan Taylor at Havoc Inspired has a simple but brilliant solution for this problem.

Being able to include custom PHP code into ALL of your Movable Type templates opens up some new doors for developers making Movable Type and even more robust platform.

I spent several hours this week troubleshooting an obscure Firefox 2 issue so I'm posting it here in case anyone else has the same problem.

Like many people I use the Suckerfish method for creating dropdown menus in my web projects.  I've used it on dozens of sites over the last couple of years without any problems until a few days ago.  I had a new site, setup the way I normally do.  The site worked fine in every browser I tested in except for Firefox 2, even IE6 worked fine.  The problem in Firefox 2 was that my dropdown menus would appear underneath and obscured by all of the content below them.

My first thought was to check the position and z-index attributes on all of the elements but that did nothing to solve the problem. After several hours of Google searching and some good old trial and error I finally nailed the issue down.  On the "header" div tag, which contained the dropdown nav, there was an extraneous "overflow: hidden;" attribute.  I use overflow: hidden on container elements to clear floats but in this case I didn't actually need it.  Removing that attribute instantly fixed the problem.

I'm not entirely sure why Firefox 2 choked on this attribute when every other browser rendered things just fine... but if you run into a similar issue check the overflow elements first.  You may find the problem there.

I missed this a week or so ago when it happened so it may be old news by now but... Microsoft has recently released a free set of charting controls for ASP.NET 3.5.

While ASP.NET has long had a wide variety of excellent charting options from 3rd-party vendors such as ComponentArt and Telerik, this is the first robust suite of charts available directly from Microsoft.  To sweeten the deal, these controls are completely free while 3rd-party tools are typically expensive and may be cost-prohibitive for smaller projects.

The controls support pretty much what you'd expect from a charting suite...from regular pie and bar charts to more complex charts like candlestick displays for financial data and AJAX-enabled interactive charts.  The controls dynamically render cachable image files to display the charts in 2D and 3D formats which look clean and professional.  They also support  both static data defined in the control itself as well as databinding syntax for creating charts dynamically from data within your database.

It's nice to see Microsoft continue to build upon the ASP.NET platform by continuing to release new features and controls like this.

Download the Microsoft Chart Controls

Download the Chart Controls Add-on for Visual Studio 2008

Download the Chart Controls Samples

Download the Chart Controls Documentation

Check out the Microsoft Chart Control Forum

Today I attended Microsoft's TechDays in Northern Virginia, an event designed to promote awareness and adoption of some of Microsoft's newer technologies.  I sat through the developer track which consisted of three sessions.

Part 1 - Introduction to ASP.NET AJAX

While I was most excited for this session it was, as the name implies, very introductory.  The fact that AJAX.NET has been out for so long and they're still doing "What is AJAX?" presentations perhaps speaks to the lack of adoption in the Microsoft community. 

They did talk briefly about some of the new features such as AJAX History which can allow for bookmarking and/or use of the back button in the middle of AJAX processes and script combining which can compile your .js files together on the server to decrease download time.

The most exciting topic of discussion however, revolved around Microsoft's recent decision to ship jQuery with Visual Studio.  While this is somewhat old news, I did learn that there is an intellisense plugin for jQuery in Visual Studio that was released just yesterday.

Just download jquery-1.2.6-vsdoc.js and then add a reference to it by placing the following line at the top of your jQuery JavaScript file:

Part 2 - Introduction to Silverlight 2

I've never been sold on Silverlight and today's presentation really didn't do much to change that opinion.  If you're not familiar with Silverlight, it's a plugin from Microsoft, somewhat similar to Adobe's Flash plugin, except that it's built on the .NET framework.  In theory this seems like  a great idea but in practical application I'm not sure it's a viable solution just yet.  For starters, many people still don't have the plugin.  Secondly, the learning curve for designers and developers is much higher than Microsoft would like us to believe.  Lastly, most of what Silverlight does can be accomplished through other means like AJAX or Flash.

Overall it's an interesting concept and it's definitely come a long way since it's release last year but I'm still on the fence as to whether I'd acutally use it for a project.

To find out more and to keep tabs on this new technology, visit Silverlight.net

Part 3 - Servers and Services

This talk was largely about the enhancements made in IIS7.   This looks to be a complete overhaul of the server environment with ASP.NET baked in directly this time, making it a "first class citizen" as the Microsoft team put it.  This will lead to better performance and easier customization.  (Never fear, there is a "Classic Mode" to the pipeline for backwards compatibility)

All of the configuration is now XML-driven as well so it's not only easy to update but also easy to move or share configuration options between servers.

Lastly, the new integrated approach to ASP.NET means that all modules can now provide services for all content types since everything runs through the .NET process.  So for example, if you enable forms authentication, all of your images, videos, and other non-aspx files will also now be protected.

 -----

Overall it was a decent event.  The Thursday session has talks about REST services and the new MVC framework so I'm looking forward to that as well.

Several of my clients use Constant Contact to manage their email newsletter subscription lists.  It's a cost-effective solution to handle user signups, send and track emails, and manage unsubscribe requests.  The default web form that Constant Contact gives you however, leaves a lot to be desired in the design department.  For direct integration into your website you need to leverage their API which, at the time of this writing, is somewhat poorly documented and doesn't include any code samples for ASP.NET.

Below is a simple code example of how you can use the API to embed a simple form on your site that will submit a request to Constant Contact and add a user to your list.  I'm sure there is much more you can do with the API but this is the basic requirement for most implementations.

Step one is to request an API key from Constant Contact.  Go to http://developer.constantcontact.com/apikey/login and input your username and password to generate the key that you'll need for API access.

We can now use this authentication to make an HTTP POST to the Constant Contact server and submit our user's form data.

Step two will be to setup a form with validation controls that will allow a user to enter their first name, last name, email address, and other fields that you may want to capture (like their company name).  If you're reading this post I'm assuming you know how to setup an ASP.NET web form. If not, buy Stephen Walther's book.

Step three is the actual code you need to transmit the data that the user entered into the form.

Imports System.Net
Imports System.IO

'Setup your variables
Dim sUsername As String = "CONSTANT_CONTACT_USERNAME"
Dim sPassword As String = "CONSTANT_CONTACT_PASSWORD"
Dim sUri As String = "http://api.constantcontact.com/ws/customers/" & sUsername & "/activities"

Dim sListUri As String = "http://api.constantcontact.com/ws/customers/" & sUsername & "/lists/1" 'If you have more than one list, change this number to whichever list you're targeting
Dim sAPIKey As String = "CONSTANT_CONTACT_API_KEY"

'Setup an HttpWebRequest to send the data
Dim address As New Uri(sUri)

Dim request As HttpWebRequest = TryCast(WebRequest.Create(address), HttpWebRequest)
request.Credentials = New NetworkCredential((sAPIKey & "%" & sUsername), sPassword)
request.Method = "POST"
request.ContentType = "application/x-www-form-urlencoded"

'Build an encoded string of the data to pass to Constant Contact

'More info on this can be found at http://developer.constantcontact.com/doc/activities
Dim data As New StringBuilder()
data.Append("activityType=" + HttpUtility.UrlEncode("SV_ADD", Encoding.UTF8))
data.Append("&data=" + HttpUtility.UrlEncode(("Email Address,Email Type,First Name,Last Name,Company Name" & Chr(10)), Encoding.UTF8))

data.Append(HttpUtility.UrlEncode((txtEmail.Text & ",HTML," & txtFirstName.Text & "," & txtLastName.Text & "," & txtOrganization.Text), Encoding.UTF8))

data.Append("&lists=" + HttpUtility.UrlEncode(sListUri)

'The "guts" of the code to execute the request and return a response
'The response (returned as 'strResponse') will be XML.  You can parse this for status messages if you like, or just ignore it.
Dim byteData As Byte() = UTF8Encoding.UTF8.GetBytes(data.ToString())

Dim st As String = String.Empty

request.ContentLength = byteData.Length
Using postStream As Stream = request.GetRequestStream()
	postStream.Write(byteData, 0, byteData.Length)
End Using

Using response As HttpWebResponse = TryCast(request.GetResponse(), HttpWebResponse)
	Dim reader As New StreamReader(response.GetResponseStream())
	st = reader.ReadToEnd()
End Using

Step four would be to provide the user with some sort of confirmation.  Perhaps redirect them to a "thank you page" or turn some panels on and off to signal completion of the process.

That's it!  I'm sure there are other ways to do this, probably more elegant ones, and I'd love to hear from anyone who's done more Constant Contact integration work with .NET.  If you're just looking to quickly and easily integrate a sign-up form on your site though, this should get you started.

Special thanks to "cbaugh" on the Constant Contact forums who provided a C# example which was the baseline for this VB code example that I've documented here.