For a long time I've been a fan of Jakob Nielsen's work. His articles on paper prototyping are brilliant. At my work we've used these methods before when doing major website designs with overwhelming success.

However what about web forms. For the most part as web developers we just slap it together and worry more about the back-end functionality more then how it looks to the users, let alone how easy it is for them to use. How many of us have written some ultra cool little application that only we know how to use? I know that I have. We are so eager to get to the part we love (code)that we skip over the most important part, how users are going to interface with our code. This is what Manuel Clement calls "pouring concrete too early".

UI Design is more important to the user than our code. Why? Because the UI is what they see. It's what the feel, its how they interpret our application. It doesn't matter how great the application is, if the UI is bad the user will assume the rest of the application is bad too. How many users are going to care that we used serializable classes, or that we've written our error log to be an RSS feed? None! We need to take care of the users.

Why use PowerPoint for doing Prototyping. There are three simple reasons:

1. Almost everyone has it and can modify your prototype. Yes, let them change labels, something as simple as this makes the stakeholder feel more involved, there for you'll have more buy in on the project.
2. No coding is involved. This is very important, if you start trying to auto-fill dropdowns using dynamic form objects you're missing the point. This is not the time to be coding, we are defining the user interface. While this may seem like a very simple point you'll be amazed how often you keep reaching for you IDE to start coding.
3. You can give the user a feeling of how the application will behave. With PowerPoint you can link to other sides. In fact you can create clickable areas and disable Advance Slide "On Mouse Click". This allows you to create buttons, links, radio buttons, etc.

Why Webforms
The reasons for prototyping webforms in PowerPoint is it allows up the ability to make changes quickly to define what the user/customer wants. Again our goal here is not to do any coding yet. By prototyping we are actually extracting the customers requirements in a feedback loop much like agile programming methodology does.

There's nothing worst then a marathon programming session where you've killed yourself to get the webform done, to turn around and have all your labels changed and to find out you didn't have a clear understand of what the customer really wanted.

Here is the current PowerPoint Toolkit I'm using for Webforms. This is done in PowerPoint 2007, which is amazing. The drawing tools are more useful and complete then in previous versions of PowerPoint. As I do more and more prototyping I'm sure this will grow. This will give you a starting point for yours.

Web Form Toolkit.pptx (45.21 KB)

The best advice I can give you is to just try it. You'll be amazed how quickly you can create a simple prototype without writing one line of code.

Also here is a some helpful URLs I used started.

• Code Horror: UI First Software Development
• Wireframe Prototyping Using Powerpoint 2007 (Video)
• A List Apart Paper Prototyping
  

Happy UI Designing

I have a project at work coming up that will require some dynamic charts. As I don't feel the need to reinvent a wheel that others have perfected before me, I decided to take a look at Google Charts. The first thing I noticed was that this was extremely easy to use. It took me about 45 seconds to create the graphic used on this post. For a pie chart all you basically have to do is set the data and the labels and you're done.

Chart Type:cht=p3
Chart Size:chs=250x100
Data: chd=t:20,40,5,10,5
Labels: chl=muffin%7Ccoffee%7Cscone%7Cbagels%7Cdounut
So the URL to call the graph looks like this:
http://chart.apis.google.com/chart?cht=p3
&chd=t:20,40,5,10,5
&chs=250x100
&chl=muffin%7Ccoffee%7Cscone%7Cbagels%7Cdounut"

As you see this is a very simple example of what Google Charts can do.The documentation is fantastic. You can create just about any chart you'd like. The short list is: line charts, sparkline charts, bar charts, pie charts (2D and 3D), scatter plots, maps (yes maps), venn diagrams, radar charts and the google-o-meter.  Google Charts is a very nice full featured Chart API that I know I'll be using in the future.

Happy Coding

One of the things I've been working on for the past week was automating some SVN (Subversion) administrative tasks. As I originally come from a Unix background my first  thought was to use PERL. In the past I've used PERL for lots of these kind of tasks on Windows Servers. ActivePerl made it very easy to install on Windows boxes. Heck I even had a PERL script that FTPed into a remote server and downloaded files with a specific extension and deleted the files on the remote server after the download was over. That script ran for 3 years with minimum maintenance.

However I thought this time I'd see about using Microsoft PowerShell. I have to tell you I think PowerShell rocks. The best way I can describe PowerShell is it's the Windows equivalent of BASH or Korn shell in Unix or Linux. It allows you write a shell script for repetitive tasks, just like any other shell. In fact I found the syntax for PowerShell to almost be a blend of C# and PERL. So I felt comfortable writing PowerShell scripts very quickly.

In SVN I wanted to add new files to the repository.  If you're using TortoiseSVN, this task is easy to do with the GUI. However I want files to be added to the repository any time a automated file sync happens. So I wrote a quick script for this:

$results = @(svn st)
$pattern = "^\?"
$re = new-object System.Text.RegularExpressions.Regex($pattern)
$resultCount =  $results.length - 1

for($j=0; $j -le $resultCount; $j++)
   {
    $add = $results[$j]
    $match = $re.Match($add);
    if($match.Success)
    {
    $add = $add -replace("^\?.{6}","")
    svn add $add
    }
}

Let's go over what this script is doing. First we load the results of the "svn st" command in an array. $results = @(svn st)

Now we use a regular expression to find the items that need added. These are denoted by the "?" at the beginning of the line. So we define the pattern and set the System.Text.RegularExpression object. (This is the .NET System.Text.dll) Then we set the pattern "$re = new-object System.Text.RegularExpressions.Regex($pattern)".

Next we create a $resultCount variable that holds the number of items in our array. This will be used in our "for loop". Now we look through the items in the array, and if the item matches the regular expression it will be added to the SVN repository. However there's one hicup. The file path to be added from our array starts with "?      ". So we need to trip that off. Again we use a simple regular expression and the -replace parameter, and now we have a correct path.

It's added to the SVN Repository and we're done. Well almost. We have to save the script into a ".ps1" file. However it won't run just yet. It has to be signed. Signing a PowerShell script isn't hard, but it does require some work. Scott Hanselman has a great post on his blog about Signing PowerShell Scripts that is just excellent, I highly suggest you read his tutorial.

Happy Coding

I'm sure by now everyone has seen an Apple iPhone. The iPhone's true genius lies in its user interface. The ability to scroll through lists with a swipe of your finger or to resize an image by putting two fingers on the screen and moving them apart is both brilliant and intuitive. This kind of innovation is what is needed for consumer electronics. I’ve had several PDAs including an iPaq with a full size keyboard attachment, yet I was never completely comfortable with it as a single source for all my needs. Most of the time I  carried a laptop around with me too. There always seemed to be this lack of understanding between me and the device on how we should communicate. Being left handed the handwriting recognition and I never saw eye to eye. The stylus was another point of contention. Poking at the device with an object smaller than a crochet hook just didn’t seem like a good way to interact with it, let alone try to put in anything more than a couple of words.

The Wii, and more specifically the Wiimote has shown that consumer electronics that are easy to use will rule the market. Let’s face it for the last two holiday seasons in a row people have lined up to purchase a Wii. There are a plethora of articles about the elderly using and loving the Wii. This is because Nintendo understood that changing how we interacted with the games was more important than having the most realistic graphic engine. I’ve played both the Xbox 360 and the Playstation 3, and they are amazing. The graphics are crystal clear and photorealistic. However they just aren’t nearly as much fun as the Wii. The Wii is just plain fun and anyone of any age group can play it. Again the Wiimote is the reason for this.

The Wiimote is a simple controller built on great technology. It connects to the Wii via Bluetooth technology. The way the Wiimote tracks your movements is done by a infrared camera in the remote, and the Wii sensor bar has infrared LEDs in it which the camera can see. Using these common technologies allow the Wiimote to be used for other uses. That is something that Johnny Lee has done and has done well. He recently gave a TED Talk in Monterey California. If you watch this video until the end you'll notice he gets a well deserved standing ovation.

If you haven’t heard of Johnny Lee he is a research scientist at Carnregie Melon University. Instead of using hyper-expensive hardware that most people won’t have a shot at even seeing he uses the Wiimote to do some amazing things with user interfaces. Being a person that wants to share these technologies he’s put the software that he’s written up on his website. What I really appreciate about his work is that he’s made it freely available, but also decided to use tools that are freely available to almost anyone with a computer and an internet connection.

I feel these kind of innovations are vital and I applaud Johnny Lee and his work. The great thing about these technologies is that you can get your hands on it right now. If you have a Wii, you can start playing with the software with just five dollars worth of parts from Radioshack. You can even buy the IR LEDs and the Safety Glasses with LEDs for under 20 bucks.

7 years of bliss

Tomorrow my Beautiful Wife and I are leaving for an extended weekend getaway. We plan on spending some time with nature and each other. I've been looking forward to this trip for months as I know she has too. It's not that often we get out just the two of us, so this is something special.

Saturday will be our 7 year wedding anniversary, again it's something special. My Beautiful Wife is the Love of my Life, and my Best Friend. She has a beautiful heart and a rare and deep understand of people and emotions. Not only that, but she's got a great sense of humor. For those of you out there on the interweb not married yet, go with the girl with the great sense of humor she will make you happy for the rest of your life, and she'll make sure you don't take yourself too seriously.

As you may or may not have noticed, I've been working to post something of interest at least twice a week. Mondays and Fridays to be exact. I've decided that each post should do one of two things. Make you laugh, or be informative. Since I'm not going to be here Friday or Monday, here are five links that will make you laugh and five links that are informative.

Something Funny:

1. Pearls of Wisdom from Merlin Mann: I read this pearl of wisdom and couldn't stop laughing to 5 minutes.

2. Why I Cropdusted a Three Year Old: Danny Evans, is funny, wrong, but funny. Warning: yes this is a fart joke.

3. More Merlin Mann Funnies: This one is entitle "Elanor's Agenda", just watch and enjoy.

4. Bottoms Up: My good friend Rick is a nature photographer who specializes in birds. He's found that some times birds just don't want to be photographed. Here's one of his photos that proves that point.

5. Chuck Norris Facts: You've all heard the legends and the urban myths, here's the low down on Chuck.

Something Informative:

1. The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!): Joel On Software explains Unicode, and this is something every Web Developer and Software Engineer should read!

2. The First Rule of Programming: It's Always Your Fault : Yes, it is your fault, and Jeff Atwood explains why.

3. The Developer Life, Yo: Dead Programmers Cafe explains just what a Sr. Developer does. I loved this article, it explains it so well, I was speechless.

4. Is Eeyore Designing Your Software?: Yes it's a strange question, but it's a great blog post on software design.

5. Twitter: The Uselessfulness of Micro-blogging: Scott Always has something funny and interesting to say.

The Challenge

One of my current projects is to making our error and alert messages on the website more flexible and usable. I've actually been thinking about this subject for a little while. I've been noticing some very nice messaging on some of the bigger Web 2.0 sites, such as Flickr and YouTube. They've been doing a great job of letting the user know when they'll be performing maintenance, without negatively affecting the user experience. I know some people aren't terribly keen on "Web 2.0" and other buzz words like it, but you have to admit that some of these sites have really gotten it right when it comes to a rich, usable and cohesive web experience. We're seeing a higher demand for this kind of web experience in surveys and feedback from users. They simply expect and demand these kind of experiences from their online services such as Online Banking.

Of course when I think of website usability, I think of useit.com. This is a wonderful site by Jakob Nielsen. This man knows usability. To say he is an expert in usability and the web experience is an understatement. So I felt sure I'd find exactly what I was looking for on his site. While I did find articles that I felt were relevant to the topic. I didn't find quite what I had in mine. However I definitely think every web developer should read his article on Error Message Guidelines, it's a wealth of information. One of the best take aways I got from the article, is that a common mistake that we all make is to simply display some red text as an error, a thinking that's good enough. Well that's all well and good, but what if the user is color blind, or is viewing your site with a screen reader like Jaws. These are factors we should keep in mind but often don't.

However like I said I was looking for something a little different. You see in our implementation of error and alerts we'll put up a variety of messages. Error messages letting them know that a transaction was not completed and the reason why. Warning messages about upcoming scheduled maintenance. Information messages that let the users know about new features that are available to them. We want this messages to be highly visible to the user, without being completely annoying and making them feel as if they are being bombarded. As you know this is not an easy task.

The Idea

I wanted to create an easy to use and intuitive method for conveying to the user the importance of any given message. There may be multiple messages for the user to read. So this system must allow users to quickly identify which messages are important versus which messages are just information to them is mandatory. So I decided I needed to use a design metaphor that allows me to relay the severity of a message to the user in a way that's easy to understand.

As mentioned in a Jakob Nielsen article using a metaphor can be tough, especially when you are designing for international usability. So I decided to use a metaphor that most people use everyday, Traffic signs. Most people see traffic signs and understand what will be required of them at a glance. That is by a very specific and exacting design. Have you ever seen the design specifications related to Standard Highway Signs? These documents are huge. I mean there is not one thing left to chance. Font size, font weight, font color, sign size, sign ratios for curves, all of it has been meticulously documented. The Regulatory sign section alone is almost 200 pages.

So with my design metaphor I won't be as strict as the Federal Highway Administration, I'm just going to use red, yellow and blue in my palette. This quick visual aid should help to get the point across nicely. Red means, stop, and pay attention, yellow means that this is a warning message and some action maybe needed soon. And blue of course means that this message is informational, and no action will be required of you.

Along with the color coding, Icons will be used to help show the severity of the message. Since these Icons will be graphics, we can assign them a severity in the image alt attribute as well. This should take care of both those who are color blind as well as those that use screen readers.

Implementing the Idea

Up to this point I have an idea, I have a color scheme picked out that works with the design metaphor I've chosen, but now I need to figure out how to best implement this idea. Specifically I need to figure out what size my message should be and more importantly where the location of the message will be. The location is key to our message being read. I need to choose a location that assures that the message will be read, while also making sure that I'm not changing the design that would cause a negative user experience After that will need to make it fit into our existing design. Fortunately this is a wheel we don't have to reinvent.

Most people read websites in a very specific and repeated pattern. This pattern is actually shaped like the letter F, therefore it's called The F-Shaped Reading Pattern. Again useit.com has an article on "F-Shaped Pattern for Reading Web Content" that I believe all web developers should read. It's well worth the time. One of the things this article mentions is that users simply will not read all of your content. They will choose to scan the page looking for what they feel is the most relevant information. So that very top line of the F Shaped Pattern is critical. The most important information needs to be on this line.

So do we put these messages at the top of the page? No, no we don't. Why?, because that isn't where the F Shape Pattern for web content starts! Again we go back to our usability Guru Jakob Nielsen to find out why. This time we're going to look at an article called "Banner Blindness: Old and New Findings", what they discovered is that anything above the primary navigation is simply ignored. Users have learned that content above the primary navigation is advertising, so they simply don't look at this area any more. Where does the top of the F Shaped Pattern start then? At the top of the content area, of course.

Now that we know where we should place our message, lets see how to make it fit into our design. I've mocked up a couple of wireframes for a pretty basic 2 column website design. In the first wireframe design we have just the basic site layout. Logo in the top left hand corner, primary navigation next to that. Below the logo we have the secondary navigation and next to that is the content area. Now in our second wireframe design with the message is only change very subtly. We basically just move the content area down a little bit so that it's now at the top of the F Shape Pattern. However we only do this when we have a message to display. This way we do no disturb the F Shape Pattern. The last thing we want to do is change the way our users read the content.

This brings up another very important point. If a message is warning or informational the users should be able to choose not to see the message again. This allows the user to acknowledge the message, but also to clear it out of their view. Remember we're not pretending that the message is the content they wanted. We are just telling them about an error, a warning or something informational. I feel that error messages are to be shown until the error is resolved. Warning messages are shown once per session. And Informational messages can have a "please don't show me again" option. Along with our design metaphor this helps cement in the users mind the importance of each of the messages.

Conclusion

A little research into usability goes a long way in designing anything on your site. Fortunately there are great resources out there that we can use and incorporate into our designs. We don't have to reinvent the wheel. In fact it's best if we don't, because using a "standard" way of doing things allows our users to better and more quickly navigate and use our site. In the end, isn't that really what we as designers want?

Happy Designing

Today I was taking a little time to look through the web logs for the blog and found it very interesting to see which posts were the most popular. It's always interesting to see how people get to your blog and what search terms they used. After reviewing this data I decided to make a quick list of the top 5 technical posts. So what I did was compile them by both visits and search results. I think my favorite part about this list is it's all over the map as far as technology goes. The fact the number 1 post is about trying to write software using a Microsoft language on an Apple computer is my favorite part.

5. Playing with Google Maps: It seems that I'm not the only one that gets a kick out of playing with google APIs.

4. Teaching XSL and AJAX to work together Part I and Teaching XSL and AJAX to work together Part II: Yes, I know these are actually two posts, but it's a series, and I thought I'd listed them together. XSL and AJAX work well together with just a few tricks.

3. Browser Troubleshooting 101 Part I and Browser Troubleshooting 101 Part II: Another series of post that came about from training some of our help desk people on how to trouble shoot browser issues.

2. Searching Indexing Services with ASP.NET and C# and Searching Indexing Services with ASP.NET and C# Part II: Yet another series of post. This one came out of a project that I had write for our Board of Director. They needed an extremely fast search function for the Extranet application they used. This series of post also comes up almost daily in search results.

1. Writing in C# on Mac OS X: After listening Scott Hanselman's Hanselminutes Podcast I had to try playing with Mono on my Beautiful Wife's Mac. This post was the result of that playing around and the post shows up every day in the referral by search category.

I hope you found this quick list helpful.
Happy Coding

What is a Web Browser: Simply put, it's a software application used to locate and display web pages. Okay that's simple enough. What is HTML?

HTML is the the standard method used for the creation of Web Pages. HTML is an acronym for Hyper Text Markup Language. All browsers understand HTML is it is a web standard. The W3C says that "HTML is the publishing language of the World Wide Web. Who is the W3C ? Well in their own words, "The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential."

The current version of HTML is HTML 4.01 which was approved and recommended by the W3C on December 24, of 1999. However there is a reformulation of HTTML 4.0 that is a combination of HTML 4.01 and XML 1.0 called XHTML 1.0. Most modern browsers are XHTML 1.0 compliant as well.

So why do we care about this stuff. Well if HTML is the publishing language of the web, that means that all of our website use html. Even though Online Banking is a very complicated application, in the end HTML is sent to the members browser. Okay, so now we know that all the websites send HTML to the members browser, but there is a standard so all browser should render it the same way right. Well, no they don't you see different companies interrupted the standards different from others, and other companies (Microsoft) deviated completely.

How bad can it be? The Web Standard Project created the Acid Test II It is an HTML document that is written that uses HTML,CSS and PNG written to the current W3C standards. Its amazing how differently it looks in the different browsers. (If you'd like to learn more about the Acid Test, check out this article .) Heres a quick example of how the Acid Test looks in some of the common browsers.

Firefox 2.0.0.x:

Internet Explorer 6.0:

Opera 9.2:

Safari 3.0 Windows:

As you can see the difference range from very slight to no where near the mark. Now we see the importance of knowing the each browser will render the same page differently. So what a can we do if troubleshooting and figure this out....Well this one you get to blame on the Developer. 

Getting Started

To get started first we will need to learn how browsers get web pages. Then we will need to set up our test machine (virtual machine) and load several different browsers in it. Let’s start with how browsers get a web page by learning its protocols.

HTTP Protocol

What’s HTTP

Before trying to start troubleshooting browser issues we should take a quick look at the HTTP. HTTP is an acronym for Hypertext Transfer Protocol. This is the basic protocol that all browsers use to sent request and receive responds to display web pages. This request/response happens between a client (the web browser) and the web server. The client, sends a request to the web server in the form of a URL (Uniform Resource Locator), for example http://www.mydigitalsplendor.com. The web server takes that request and response by giving the browser that page (see figure 1.1).

Figure 1.1

HTTP is a stateless protocol, which means that once the Request and Response is done, the server has no idea what is on the clients browser and the browser has no idea the server exist, till the next request.

HTTP Cookies

HTTP cookies, sometimes known as web cookies or just cookies, are small blocks of text sent by a server to a web browser and then sent back unchanged by the browser each time it accesses that server. HTTP cookies are used for authenticating, tracking, and maintaining specific information about users, such as site preferences and the contents of their electronic shopping carts.

Allowing users to log in to a website is another use of cookies. Users typically log in by inserting their credentials into a login page; cookies allow the server to know that the user is already authenticated, and therefore is allowed to access services or perform operations that are restricted to logged-in users.

Another use for cookies is to maintain a session state with the web browser. But wait a minute, you just said that HTTP was stateless, so what is this session state stuff. You see web application Frameworks like ASP.NET (what Online Banking uses) or PHP use mechanisms for storing information session information, and give that information a unique id or session state id as a method for working around the fact that HTTP is stateless.

So what does a cookie look like:

Set-Cookie: SessionId=732423sdfs73242; expires=Fri, 13-Jul-2007 23:59:59 GMT; path=/; domain=mydigitalsplendor.com;

HTTP Headers

HTTP headers are how HTTP handles the request/response nature of the protocols. Both web browsers and web servers use Headers to communicate what they want and what they are giving each other. For example a request from a web browser will look like the following:

GET / HTTP/1.1
Host: www.mydigitalsplendor.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4
Accept: application/x-shockwave-flash,text/xml,application/xml,application/
xhtml+xml,text/html;q=0.9,
text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive

 

Okay, great, that’s what it looks like but what does it mean. Well let’s go through each field and talk about what they mean and do.

GET / HTTP/ 1.1 : Hey web server, I want something and this is what protocol I’m using to communicate with you. host: www.mydigitalsplendor.com: This is where I want the page from. The server is set to serve up a specific page when just the domain is given as in this example, but we could ask for www.mydigitalsplendor.com/blog/default.aspx and get the same thing. Now the rest of the Header is telling the server what the client it and what it can do.

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4: this is simply the type of browser you are using and what operation system you are on. So from this User-Agent information, we can see that the user is on Windows XP, they are using an US version of windows, and they are Using Firefox 2.0.0.4 with a version that is using the Gecko html rendering engine.

Accept: application/x-shockwave-flash,text/xml,application/xml,app-lication/xhtml+xml,
text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5 This is all the things the browser is capable of doing. For example, this one says it can handle, flash, xml, xhtml, html, plain text and images.

Accept-Language: en-us,en;q=0.5 Is just what you think it is, it tells the server what a language the browser is set to use. So from this line we can see that the language being used here is English, however it also tells us the country as well, so not only is it English, but it is English spoken in the US. This is helpful to the server to allow it to server correct content. A good example of this is currency. If the server sees this field and its EG-US, it uses the US Dollars as the currency to calculate, however if its EG-GB (Great Britain) it will use the British Pound for the currency.

Accept-Encoding: gzip,deflate

Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7: This is what character set the browser is using. This one is especial helpful when you see a square box or question mark instead of the letter "A". IS0-8859 is character set known as western. UTF-8 is the Unicode 8 bit character set. So this browser is telling us it can handle both of them. Keep-Alive: 300: This one simply says, this is how long I will keep the connection open waiting for you to give me a response to my request.

Connection: keep-alive: This means that the browser will keep the connection alive waiting for the response to the request.

Now that we've sent our request, the server responds with this HTTP Header which looks like the follow:

HTTP/1.x 200 OK
Cache-Control: private
Date: Fri, 13 Jul 2007 14:58:43 GMT
Content-Type: text/html
Server: Microsoft-IIS/6.0
X-Powered-By: ASP.NET
Content-Encoding: gzip
Vary: Accept-Encoding
Transfer-Encoding: chunked

Let's go over the response like we did the request. It's full of HTTP goodness. so let's check it out.

HTTP/1.x 200 OK : This is the server saying, hey, we're using the same protocol and everything is A-OK with your request. The code 200 is what tells us that.
Cache-Control: private : This tells us that the server wants the cache to be controlled by the browser and not let some proxy service getin the way.
Date: Fri, 13 Jul 2007 14:58:43 GMT: This is the date and time that the page was served up and sent to the browser.
Content-Type: text/html : Here we have the content type of what is being served. So its giving the browser an HTML page,
Server: Microsoft-IIS/6.0: This is the kind of server that is giving us the date. Microsoft, is the software creator, and IIS/6.0 is the web server products name and version number.
X-Powered-By: ASP.NET : This field tells us what framework the server is using, which in this Server happens to be ASP.NET,
which is what you'd expect from a IIS server.Content-Encoding: gzip: Content-Encoding is telling us that content coming from the server has been compressed using HTTP-Compression and that the browser is going to have to uncompress the content to be able to read it.
Vary: Accept-Encoding: This field is saying that it can Accept-Encoding in a Variety of ways and it "Varys" depending on the browser.
Transfer-Encoding: chunked : This field means the message body is send to the client as chunks that are stamped with the
size of the chunks. With chunked transfer encoding, the client can make sure that it has received all of the data that the server sends.
In Part II we'll go over Browsers....The good, the bad and the ugly.

In the previous post we went over the basics of AJAX and how to call and use the XMLHTTPRequest object. In this post we are going to go over how to write the javascript calls in our xsl code, with out it getting messy and blowing up on us. Believe me nothing is worst then getting the the document is not well formed error message when you're working with XSL.

Links

One of the easiest ways I've found to use javascript in xsl is to call the javascript is from a link or <a href=""> tag. Let's just say you have a javascript function you want to use called getContentById(id). This function loads a div tag with the content from the function, that is pulling the data through the XMLHTTPRequest object. So how are we going to call this function. It's pretty easy actually all we have to do to invoke this function is to pass it an ID from the XML node then it'll get the content from that node. So how do we set in that node id when we are dynamically looping through the xml. There are a couple of ways of doing this. I find using XSL Attributes to be the easiest way to accomplish this task.  So lets look at the code that would call our javascript and use XSL Attributes.

 

<?xml version="1.0" standalone="yes"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes" version="4.0" media-type="text/html" />
<xsl:template match="/">
<div id="wrapper">
<ul>
<xsl:for-each select="site/content">
<li><a>
<xsl:attribute name="href">javascript:getContentByID('<xsl:value-of select="@id" />');</xsl:attribute>
<xsl:value-of select="question" />
</a>
</li>
</xsl:for-each>
</ul>
</div>
</xsl:template>
</xsl:stylesheet>

So lets go over what the XSL is doing. At the <xsl:template> it matches the root XML Node to start applying the style. Then it creates a <div> tag that is the wrapper for applying style. Next it creates a <ul> tag to start the ordered list. Next is our for-each statement. So for every instance of the content node with in the site node, it creates a open <li> builds a link, and in the link sets the "href" for the link to "javascript:getContentByID('1');" for the first node, and just increments from there depending on the content nodes id attribute. Now when this link is click the Javascript is invoked. It finishes up by closing up the </a> tag and the </li> tag, then it finishes with the for-each and closes the </ul> tag and the <div> wrapper tag.

So were is the Javascript. You many be thinking, well you've shown me how to call the javascript, but where is the actual javascript.  Well It's on the page that calls the XSL XML Transform. You see, the XML/XSL/XSLT complaint web browsers are still doing things a little different. So because of that I do my XSL transform on the server side. So I just calling my javascript on that page, and then call in the function that transforms the XML/XSL. I hope you've found this useful. If you'd like to see an example of a XML/XSL transform in Classic ASP, ASP.NET 1.1 or ASP.NET 2.0 let me know, I write a post on that.

Happy Coding

Where I work we use a CMS (Content Management System) for our external site. We happen to have a very flexible system from a great design and software house in Houston, BrandExtract. This system works well because it uses XML as its base. This allows us to use XSL to create our page templates. This allows us a great deal of flexibility, however even XSL has it's limitations. Embedding Javascript in to your xsl can be a little tricky at best and down right aggravating most of the time.

We have a project to integrate a part of our site with a partner using Web Services. I figured that this would be the perfect time to use AJAX to delivers the content and throw in a couple of bells and whistles that give the application that ""Web 2.0" feel. I wrote the AJAX library we're using for the content delivery and we are using  Scriptaculous to handle the shiny  User Interface Effects.. Now let me stop right here for a minute. I'm using Scriptaculous to handle some of the DHTML effects used to provide the interface effects that people equate "Web 2.0" with.

I also want to clarify something. I believe that "AJAX" and "Web 2.0" are used interchangeably, when they really shouldn't be. One is used in the other, however are not interchangeable. You see "Web 2.0" is a group of features and technologies a site may have including: RSS, tagging, user provided content displayed in a community selected method, AJAX, and DHTML to improve the web interface. If you'd like to read more about Web 2.0, Tim O'Reilly, coined the phrase and has a great article on what he believes the platform of Web 2.0 to be. Several good examples of Web 2.0 applications are flickr and digg.

However AJAX is different, in that it is much more of the data transportation method used to refresh data on the page without having to reload the page in the users browser. AJAX stands for "Asynchronous Javascript and XML". So what AJAX basically does is to use the "XMLHTTPRequest" object in Javascript to retrieve or post data to the server, so that there is still a round trip to the server.

Alright so we have the basics. I use a javascript library, that I wrote that's pretty simple but so far has been able to handle most of the ways I've used AJAX, which is mostly retrieving data from the server from a specific URL with specific parameters. I wrote three functions in Javascript that helps make getting the data and putting it in a "<div>" tag, and I'm done. So let's take a look at the code and go over the functions.

function getXmlData(newUrl, div)
{
xmlHttp= GetXmlHttpObject();
myDiv = div;
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return
}
var url=newUrl;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged()
{
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
    {
    loadDataToDiv(xmlHttp.responseText, myDiv);
    }
}

function loadDataToDiv(text, div)
{
document.getElementById(div).innerHTML = text;
}

function GetXmlHttpObject()
{
var objXMLHttp = null
    if (window.XMLHttpRequest)
    {
    objXMLHttp = new XMLHttpRequest()
    }
    else if (window.ActiveXObject)
    {
    objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
    }
return objXMLHttp
}

So the first function we'll go over is the GetXmlHttpObject(), this function returns a XmlHttpRequest object, bascially it just figures out which version of the XmlHTTPRequest object to use depending on your  browser, and returns it for use in other functions. The next function is loadDataToDiv(text, div), this function is actually a method that takes the parameters text, and div, and simply puts what text is passed to it and sticks it in the div that you asked it too. The next Function is stateChange(), which is very XMLHTTPRequest object specific function, which checks the state of the request and if the state is ready (xmlHttp.readyState ==4 || xmlHttp.readyState == "complete") then it calls the loadDataToDiv function and passes the xmlHttp.responseText, and the div you've called.  The final function, which is the one that you actually call in your code is getXMLData(newUrl, div), this is the function the brings it all together, you give it the url of the content you want you AJAX app to display and the div tag id that you want to refresh the content in.

Alright so far, we have the Javascript/AJAX part taken care of, now we need to talk about the XSL part of the equation. We will talk about that in part two.

At work we have a system that I feel works pretty well, it does have some hiccups from time to time but overall the pros outweight the cons. You see we have our development machines as virtual machines. We have a beefy server that we've installed Microsoft Virtual Server 2005. On that server we have our development virtual machines setup. This setup works very well for two reasons. One, you always have access to your code on your development machine as long as you have internet access. I've tried syncing a laptop to a desktop and it never worked that well for me. Second it's a server on the network, therefore it is in the backup schedule. It's easy to think to yourself, I know I should back this machine up tonight, but I'll do it tomorrow. But having things done this way, you actual have a backup.

However once in a while you find little issues that crop up because of it. Issues that won't happen on a regular machine. This morning I was using Visual Studio 2005, and decided that I would trying doing this the new way, and create a database in SQL 2005 Express through VS2005. That's when I ran in to the error.

Failed to generate a user instance of SQL Server due to a failure in starting the process for the user instance. The connection will be closed.

Well after several google searches I still couldn't figure out the issues, everything looked configured correctly. Then I found the answer, I can't say it was one I was happy with but it was the anwser. It was right there clear as day in Microsoft's Knowledge Base Site. http://support.microsoft.com/?id=896613

Cause

This problem occurs because the Local Security Authority (LSA) uses the remote session's token for the SQL Server client's session token. The remote session's token is from session 1, and the SQL Server client's session token is from session 0.

The Fix

Well that is where things get a little sticky. Microsoft doesn't have an official hotfix for this issue on their site. They do have one but you have to call Microsoft support and support has to double check that your issue is specific to trying to use SQL Server 2005 Express through Terminal Services. And then they'll give you the hotfix. Which sounds like it could introduce more issues than it fixes, so for today, I'll just use my SQL Server 2000 development server and be happy with it.

My Beautiful Wife sent this to me, and I have to say I just love this. I've watched it 5 or 6 times in a row.

One of the things that has been occupying a good portion of my time at work lately is page load times. Sounds simply I know but believe me it is more complicated than you think. So why are load times important? Simply put your customers feel that the speed of your site, reflects the level of service that you are trying to offer them. And to a certian extend that is true.  Also most users don't know the difference between a 5kb static html page, and a n-tier application, that connects to a database on the backend and connects to a web service to get a calculation for some complicated insurance rate algorithm.  Should they? No, not really, so it is our jobs and developers to make the two very different examples have the same load times. Is that really possible? No it's not, but there are certainly some things that can be done to help.  There is tons written on code optimization, so we will let other people talk about that. We are going to go over some web server optimizations that can be done. These apply to whatever server you are on, as these are just basic web development principles that we all know, but somehow don't have time to follow.

Just say no to 404 errors.
This sounds really simple, but is terribly important. Our external website gets 100,000 to 200,000 visits a month. Not to bad, however lets just say that you have a broken image in the footer. Well know you have a 404 error per page load, not so good. And depending on the image, the web servers response can actually be larger than the image you requested. So how do you know if you have broken images, besides the obvious little red box with an X. What if you use firefox and it just hides it. Well, that is where checking your work in mulitiple browsers comes in handy. I am firefox user, however the Add-on I use the most is IETab. You can quickly open a new browser tab in IE (Internet Explorer) or change the browser engine for the current page you are on. One warning though this creates a new session for the new browser engine.

Another great firefox Add-on that helps sniff out 404 errors is Live HTTP Headers. There is a Internet Explorer utility very similar to Live HTTP Headers called ieHTTPHeaders. Both of these utilities write out every HTTP Header requests. Of course it helps if you know what the HTTP Status Codes are to decypher what their output. Another application that I have found extrodiarily useful is Fiddler. This application is one of those apps, written by Microsoft, but isn't widely known. Fiddler acts as a proxy between Internet Explorer and your internet connection and records every request and response. Infact you can record a request/response session, save it and replay it. Fiddler is also extensible. A quick change of it rules.js and you can add HTTP Headers to every page request and even slow down connection speeds, to reproduce real world speeds.

304 is your friend
The 304 HTTP status code is one that just makes you smile. Basically it just tells the web browser that object it has requested has not changed, so just use what it has in cache. This is good news for your web server as it only sending a 1kb response instead of a entire page or graphic.

Two articles I've found amazingly useful
Article 1
Article 2

The other day I was surfing the web, and off of a link on digg I ran across  "Reflections.js". It is a brilliant little piece of code that I've used on a site I'm building for a friend. I'm sure by now you all know that I am a big fan of apple, and the new album feature in itunes, where you see the album cover and it looks like it is being reflected on a glass surface, is something I find very pleasing to the eye. However to do a large site requires either a ton of time in photoshop, or something brilliant like Reflections.js. This is a terribly easy to use. You simply call the javascript into the page.

<script type="text/javascript" src="reflection.js"></script>

Now all you have to do is in your image tag add "class=reflect" and your image has a beautiful reflection.

<img src="myimage.jpg" alt="" class="reflect rheight75 ropacity65">

Add "rheight75 ropacity65" to the end of the reflect class call and now you've set the height of the reflection and the opacity of it too. Simply Brilliant!

Happy Coding

Well today I'm leaving for Las Vegas for this years Devconnections. I'll be taking the ASP.NET track and am really looking forward to learning the ins and outs of ASP.NET 2.0. I've dedicated my track of learn to AJAX. I know that it's the Web 2.0 buzz word, but there is something there. When you can use it as a design tool I feel that you can really add to the user experience. Well as I learn, I'll share, so I'll do my best to post some example from Vegas this week.

Happy Coding

As a web developer load times are always a very important thing. There is nothing worse than someone saying, "hey the site is slow" and give you no more information than that. So today I was tired of trying to stopwatch a pageload because it is still a psuedo subjective measurement. So after a quick google search I found fasterfox. A great extension that has a pageload timer built-in and it displays right in the status bar at the right corner. Check It Out

Today I wrote some code that I've been wanting to play around with for a while. I know that Google Map API has been out for a while, infact its in its second version. So this afternoon I took sometime to check it out. My first impression was that it was going to be complicated. However I couldn't that couldn't of been further from the truth. If you know javascript, this is a cake walk.

The first thing I have to say is that Google did an excellent job on documentation and examples. Also when you sign up for your API key they give you an html example to start with that is amazingly helpful. Its the most basic google Maps functionality there is, but I found it to be a great starting point.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

This pretty much has everything you need to start. It shows you how to call the Google Maps API with your key. It shows you how to create a GMap2 object and what you div and body code should look like. Well I decided for my test I would mapout the locations of the Credit Union's Southern California branches. What I wanted was something simple and would give some branch information when you clicked on the pushpin icon. Of course like I mentioned earlier Google did a great job with the documentation and I started with the "Using Xml and Asynchronous HTTP with Maps examples". It basically shows how to use their GXml parser for javascript. Which seems to be really fast and easy.

GDownloadUrl("data.xml", function(data, responeCode){
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");

Of course you need an xml document, which is simple enough, a documentElement of <markers> and the elements <marker> with attributes "lat", "lng", "branch", "address" and "phone". However my little problem was I didn't know how to figure out that latitude, after a quick google search I had what I needed.

<?xml version="1.0" ?>
<markers>
 <marker lat="34.191459" lng="-118.348875" branch="Burbank" address="2340 Hollywood Way<br >
 Burbank, CA 91510" phone="(800) 328-LFCU"/>
</markers>

Well now I just needed a function to write out the data to the InfoWindowHtml, well with the little sample code I was about to write a function that took the data from the xml and fill the InfoWindowHtml.

function createMarker(point, address, branch, phone){
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function(){ 
marker.openInfoWindowHtml("

" + branch + "
" + address + "
" + phone);
});
return marker;	
}

Now that I have my marker function I just need to bring it all together.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps - LFCU Southern California Locations/title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(34.191459, -118.348875), 9);
				
				
function createMarker(point, address, branch, phone){
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function(){ 
marker.openInfoWindowHtml("<div style='font-family:arial, verdana, helvetica, sans-serif;font-size:10pt;'>
<strong>" + branch + "</strong><br />" + address + "<br />" + phone);
});
return marker;	
}
				
GDownloadUrl("data.xml", function(data, responeCode){
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for(var i = 0; i < markers.length; i++){
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
var address = markers[i].getAttribute("address");
var branch = markers[i].getAttribute("branch");
var phone = markers[i].getAttribute("phone");
map.addOverlay(createMarker(point, address, branch, phone));
}
});
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 700px; height: 500px"></div>
</body>
</html>

That's it, if you know javascript, c