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.

Design for Humans

Yesterday I came across this article that I thought really drove him some of the key points of consideration that web designers in their toolbelt. The article is called "Human to Human Design" by Sharon Lee. She makes a great first point by saying, we have to remember that the user on the other side of the computer is a human, our intended audience.  She basically gives a good case for using user case studies in your design. For example, you are creating a website that Loan Officers login to and check what leads they have to work with today. These are busy people who just want the information, but may want to be able to sort it by a couple of different yet common columns. Knowing that about your customer, you aren't going to want to have a large flash based splash page that takese 30 seconds to load and 60 seconds of play time. That's not what they want or need. They want to get in, get their data and get out. So thinking about them while designing, you end up designing a page that is lightweight and quick, gives them their data, the way the want it.  Anyhow, I think it's a great article and definitely worth the read.

 

Time for Accuracy

    As a Developer you always want your application to be fast, useful and well liked. It's great when things work well. However, things don't always work well. From time to time due to hardware or application performance the application is "slow". "Slow" is a word that most Web Developers just hate. Mostly because it is so subjective. 30 seconds may be perfectly acceptable to one user, while another will complain that it's too slow and that they just cant work like that. The subjectivity of time makes it really hard to see what the real problem is. This is where having something in place that takes the subjectivity out of the equation and add objectivity back. So I wrote a down and dirty little app that proxies a URL and times how long it takes the network to get that page, and then javascript is inserted on the page so I can measure how long it took the page to load on the users end too.  Fun Stuff.

Well I haven't written an actual post in a while. I don't claim that this one will be an actual post either, but it will be closer to one them my last three or four attempts. Well between work, family and my hobby (obsession, yes you are right my Beautiful Wife) I've been keeping myself pretty busy. I haven't felt much writing. A blog or, well any other form of writing, journals, short stories, novels, three volume novel etc, are all ways of expressing ones self. Lately I've been doing that with my photography. So I haven't really felt the need to write. However dear friend I've recently experienced something that photographs cannot capture. Mostly because it's auditory.  So on to the back story, from the time I was about 14 years old till I was 24 or so I worked construction with my Dad. It was some of the hardest work and most fun I've ever had. I don't know if you've ever been on a construction job site, but in the 80s and early 90s when I was, there was always one radio on the jobsite with the volume knob turned to 11, blasting rock. Big Hair rock to be exact. Skid Row, Poison, Slaughter, Firehouse, White Lion and many many more. So as with most people, these songs bring back memories of the good times.

Some more back story, As many of you know my Grandma K passed away in November, in a very wise decision, my Mom and Dad and Grandpa K are remodeling Grandpa Ks house, so they can all live together. Being that both of my Brothers are in construction, my Dad is a Sr. Building Inspector for the city, and I have ten years in construction, we felt and knew that we could handle most of the work ourselves. It cuts down on costs and we know it is done right. So the first phase of the remodel/addition is to remodel the kitchen. It was just too small for the number of people cooking in it at one time Sis/Mom/Dad/Brother J, sometimes Brother K and occasionally me. So some walls were moved, some were removed and viola the kitchen is bigger, now we need cabinets for the new walls. We are effectively tripling the amount of cabinet and counter space in the kitchen. Which means there are a lot of cabinets to make. Well cabinetry was and still is one of my favorite facets of construction. So this was the part I was asked to help with.

Sunday was my first day helping build cabinets. We worked till 7pm that night, I was so stiff and sore. I had used construction muscles I haven't used in a decade. However it was a lot of fun. All the tools have been updated. The nailguns are lighter, the miter saw has  a laser sight on it, so you know where your cut will be. And the cordless drills are stronger lighter, and even have a light on them that shines when you are driving in a screw. So while these toys... I mean tools were very enjoyable to work with. Working with my Dad and Brothers was even better. It was like old times, but just a little bit better, because we are all a bit older and maybe even a little bit wiser. As the tools were updated, so was the radio, the Boys were cranking 80s music, however it was from a channel called "Hair Nation" on Sirius Satellite Radio. Man did this take me back.

Well last night I went over to help, we still have a ton more cabinets to build. And of course, we were listening to 80s rock. So I guess that until this project is done, I'll be a cabinet member of hair nation.

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.