Brian Webster - Blog

Tomorrow, I will give a presentation titled “Consuming Feeds” at the Extension Technology Showcase. John Dorner asked if I would share the presentation. The only PowerPoint I have is some screen shots that I’ll use if the Internet connection doesn’t work. Rather than sharing that (not too exciting), I’ll publish the outline I’ll be using.
Introduction (5 minutes)

1. Visual Aid
2. What is a feed?
3. Show “Trends” from Google Reader
4. Not just for technologist, Lynette and eXtension News

Demonstration Google Reader (15 minutes)

1. How to get an account
2. Navigating the Subscription List
3. Expanded vs List View
4. Add Star, Share, Email
5. Starred items

Other Readers (5 minutes)

1. FeedReader3
2. BlogLines
3. Outlook

What to look for on the page (5 minutes)

1. Firefox
2. Internet Explorer
3. Icons on the page

How to Subscribe (5 minutes)

Show Example Feeds (5 minutes)

Questions (5 minutes)

I hope the opening visual aid works. I have 15 brown paper lunch bags. Most have a few pieces of candy, a couple don’t have any. Many of the bags also have some packing peanuts. People will be encouraged to pick up some candy as they enter the room.

The presentation will start by explaining that the paper bags represent web pages, the candy represents content, and the packing peanuts is the “fluff” (ads, navigation, etc.) It’s a pain getting things from individual sites, and you probably stop once you find something that is acceptable. While talking about this, I’ll dump all the bags into a basket and sort out most the peanuts, and explain that this is what a reader does. ie It puts all your content into a single location, and makes it much easier to see what’s available to you. It also removes most of the fluff, you just see the content.

In .NET, it is really easy to check whether a user is entering a date into a form field, although it’s not necessarily obvious how to do so. What you need to do is include a CompareValidator in your web form. The code would look like this:

<asp:TextBox ID="txtBirthDate" runat="server"></asp:TextBox>
<asp:CompareValidator ID="CompareValidator1" runat="server"
	ErrorMessage="CompareValidator" ControlToValidate="txtBirthDate"
	Operator="DataTypeCheck" Type="Date"></asp:CompareValidator>

The three important properties that you need to set in the CompareValidator are:

1. ControlToValidate - This is the ID of the Textbox
2. Operator - Default is “Equal”, need to change to DataTypeCheck
3. Type - Default is String, set to Date

This will cause the validator to return the error message when an invalid date is entered. It will accept dates such as “4/18/2004″, “9/12/95″ and “02/29/2004″, however would cause the error message to be displayed on “14/14/2000″, “02/29/2005″, and “January 1, 2000″. I’d like to see it accept the last one, however, the date should be in the format mm/dd/yyyy, be sure to tell the users to enter this format.

Of course, to be semantically correct, you’d want to give your Textbox a label on the form, and the CompareValidator a more descriptive error message. Also, be sure to enable server side validation, see “Server-Side Validation“.

This tip came from Peter Blum, on dnrTV. Peter has done a ton of work with validation in .NET. His product, Professional Validation and More looks very promising.

The last few evenings, I watched broadcasts from DotNetRocks and dnrTV. I started with three episodes featuring Miguel Castro where he talks about building web controls. In them, he builds a fully functioning e-mail feedback control that can be reused in multiple projects.

• Miguel Castro on Web Controls (DotNetRocks #133)
• Miguel Castro Builds a Web Control, part 1 (dnrTV #1)
• Miguel Castro Builds a Web Control, part 2 (dnrTV #2)

Wow, I wish I would have known this stuff when we started building sites in .NET a few years ago. I’ve always wanted to go in this directions, just have not had a clear picture of it, therefore could not express it in a way our developers understood. These broadcasts help me take a giant step forward.

For a long time, I’ve kept an item on our project list for ISUE Framework. This framework would be a library of reusable controls to share between all the projects we develop. It will take a while to build, and will likely be built by writing code for a given project, then deciding that with some tweaks, it can be customized to add customization for use in other projects.

This week, there has been talk that a few states are planning on working with SharePoint and/or MOSS, and we are looking at ways we might share resources. There are many possibilities for how we can work together. At the very least, I hope that we will share controls what we develop in-house so we all can benefit from them.

Last night I was watching a DotNetRocks TV broadcast by Peter Blum on Web Controls and Validation. During his presentation, Peter said something, in passing, that triggered a major “ah ha” moment. One where you dent your forehead with your palm.

He mentioned a property that was added to the Page object in .NET 2.0 called MaintainScrollPositionOnPostback. I stopped the video right then, pulled up my Visual Studio, and tried it out. It worked!

One of the problems we’ve had in our CMS system is that when you change certain publishing options, it triggers a PostBack of the page. Basically, the page gets posted to the server, then reloaded on the browser. When this happens, it takes you to the top of the page in the browser. The publishing options are at the bottom of the page, so the user needs to scroll back down to where they were. Not cool.

With this new feature in .NET 2.0, we can add one line of code with will make the PostBack return you to the previous location on the screen. The code is:

Page.MaintainScrollPositionOnPostBack = true;

Now I just need to figure out where is the best place to use this feature. Right now I’m thinking it should go in the UserControl that displays the publish options on the edit screen.

Usability is something everybody on your team– not just the designers– should be thinking about throughout the lifecyle of your project.
Jeff Atwood (Coding Horror)
The Peanut Butter Theory of User Interface Design

Well said Jeff.

“CSS Mastery (Advanced Web Standards Solutions)” by Andy Budd, Cameron Moll, and Simon Collison, is a good resource for how to use web standards and CSS in designing and laying out web sites. Although it’s by different authors, it is a good followup to the book “Web Standards Solutions“.

This book takes a task, and explains in detail how you might handle it. For example, chapter 5 is on creating navigation bars and chapter 7 is about site layout using CSS. We use many of these techniques in most of the web sites we develop.

Other useful chapters are on troubleshooting problems with your CSS, and hacks to deal with browser incompatibilities. We have Microsoft to thank for many of these hacks. IE 7 is much improved over previous versions. It is still good to be aware of these techniques.

Here is a link to the publisher’s web page for the book.

The two Web Standards Solutions books give a good starting point for people that want to learn more about CSS. In addition, there are thousands of web sites that offer help with CSS. I also recommend having an expert you can ask questions, thanks again Matt.

Recently, I was asked if I know of any training on using CSS, so I’m looking for recommendations. If you know of any professional development opportunities on learning CSS, either online or traditional, please post a comment.

Floyd asked me to post an example showing some formatting on a <div> element. I built a test web page using the code from “Which to Use - div or span?” and some text borrowed from a recent ISU Extension News Release. Without any formatting, the page looked like this.

By adding a couple of styles, it was easily changed this to look like this.

Remember that the <div> element had an id=”message” and the <span> tag had class=”date”. These hooks are used by the styles.

#message {
width:185px;
float:right;
border:solid black 2px;
margin-left:10px;
padding: 0px 10px;
background:red;
}

#message .date {
font-weight:bold;
color:blue;
}

This is just a very simple example that touches on what can be done by styling <div> and <span> elements. I recently worked on a web site using this technique, but can’t show it here because the site is password protected.

Using styles with <div> tags is one of the major factors that allow us to layout pages without the use of <table> tags. It takes a more <div> tags and styles than I wanted to show in this post, but can be fairly easy to accomplish. Let me know if you want to see more about how we do tableless layouts.

BTW - I’m a firm believer that <table> tags should only be used for tabular data, not for laying out web pages.

Today I read an article titled “Primary & Secondary Actions in Web Forms“. They tested 6 forms where they changed the location and/or appearance of the primary and secondary action buttons, ie “submit” and “cancel”.

It surprised me that the users finished the form quickest when the two buttons had the same appearance. I would have thought that by having the submit button stand out more, it would have been faster because it would pull the user to the correct button. However, when tracking the eye movement, users had more fixations when the buttons had different appearances.

Although it was slightly slower, users said they appreciated the visual effect of having the submit button stand out more than the cancel button. It made them more confident that they were clicking on the right button.

The article also made the point that many forms do not need secondary actions. Don’t include them unless they serve a real purpose.

This article is an interesting read, and will be a part of a book by Luke Wroblewski titled “Web Form Design Best Practices“. After reading this article, I am looking forward to reading the book once it come out in early 2008.

When I’m writing code for web pages, I normally have to stop to think when to use a <div> tag, and when to use a <span> tag. The big difference is that <div> is a block-level element while <span> is an inline element.

Block-level elements usually contain other elements, including text, inline elements, and other block-level elements. You can think of them as boxes. They are normally displayed with space before and after this box, unless you modify this behavior with CSS.

Inline elements usually contain text or other inline elements, and are displayed where they occur. They are usually used to give your document more semantic meaning.

Here is a simple example:

<div id="message">
  <p>The current date is <span class="date">August 28, 2007</span>.
  Labor Day is just around the corner.</p>
</div>

Notice how the <div> tag surrounds a chunk of content that contains a <p> tag, which is another block-level element. The <span> tag simply surrounds text within the content.

With these tags in place, we have plenty of hooks for CSS to use to format this content. By having the date in the <span> tag, we can do special formatting on the date if we choose.

Last week, I was talking with Lynette about a problem she was having with a web page. During the conversation, she said she usually uses Firefox, however there are a few pages in which she needs to use IE. I told her about a Firefox Add-on I use called “IE View Lite“.

When you have IE View Lite installed, it adds an option in the right-click menu for “View This Page in IE”. This makes it very easy to switch to IE when you run across a page that doesn’t work in Firefox. Simply right click on the page, and select this new option in the dropdown menu. If this is a page you need to use a lot, you can configure IE View Lite to always use IE  for that page.

While useful for normal users of the web, I consider this tool a must have for web developers/designers. It allows you to use Firefox for your development, then easily switch to IE to find out what IE breaks.