Wednesday, January 17, 2007

XHTML vs. HTML

Right now, the "web" is filled with poorly-formed documents. That is, websites that do not conform to the HTML 4.01 standard. Believe it or not, there are specific rules for coding in HTML. XHTML is a combination of XML and HTML. XHTML, when properly formed, is compatible with every XML reader (that conforms to the XML standard). Rather than separating web browsers and XML browsers, they can be combined.

Most browsers now-a-days (Firefox and Internet Explorer included) are very forgiving when it comes to poorly-formed HTML documents. For example, it is required that every meta tag be closed.
<b>Hello World</b>
Traditionally, some tags were never closed:
<p>Hello World!
This caused problems. The browser would have to determine where the tag was to end and when you present this feature in an XML document (A tree based architecture, nodes, branches, etc...) the

tag represents a node and the node MUST be closed.

XHTML is the first step to document standardization. It requires four aspects of programming to be considered a well-formed document. They are:

  1. All elements must be properly nested.
  2. All elements must be closed.
  3. All elements must be lowercase.
  4. All documents must have one root node (I.E. <html>)
This is why XHTML should be used instead of HTML. It is the first step to standardizing the web.

posted by Alex Block at 9:59 AM 0 Comments  

Tuesday, January 16, 2007

DOM: The Document Object Model

While DOM is not a new thing, I have finally jumped into understanding it. I've been using elements of DOM (parts of DOM, not the elements themselves... even though that's what they are) for quite some time: manipulating HTML after it has been rendered using Javascript. Basically it is the aspect of AJAX and DHTML that make it Asynchronous and Dynamic.

DOM treats the entire HTML page as an XML document. The document is an object. Each element of HTML is an object as well, called a node. This allows one to control any aspect of anything on a website.

Like I said, this is not new and I am not just discovering this now, but I am finally exploring its manifest functions and its overall purpose.

I wrote a small script to demonstrate the essence of DOM which you can view at http://sandbox.ctv15.org/domexample1.html.

Here is the main function of the page:

function do_nodes(){
var parent = document.getElementById("parent");
nodeList = parent.childNodes;
child1 = nodeList[1];
child1prime = document.getElementById("child1");
if (child1 == child1prime){
alert("True");
}else{
alert("False");
}

}

As you can see from the example that child1 is in fact the same as child1prime. This proves that the object in the child list (nodeList) is the same as the one returned by getElementById.

I will expand on this later with a better example of the full features of DOM.

posted by Alex Block at 2:16 PM 0 Comments  

Monday, January 15, 2007

Pseudo-Ascynchronous File Transfer

As you may have seen on some websites such as gmail.com, files are uploaded asynchronously. That is, the website does not reload or refresh or go to any other location, the file simply starts uploading. It is not possible to upload a file via HTTP without submitting a page request because XMLHttpRequest does not handle file uploads. One technique to accomplish the task of uploading a file without reloading a page is to use an iframe. An iframe is an inline frame (As opposed to a block-level frame which takes up an entire segment of a website). Instead of refreshing the document (The parent object), you simply use an iframe to hold the form and do your uploading from that.

This technique is easy to implement. Simply make an iframe with the file upload form in it, and put the iframe on your page. I have used a similar method but employed DTK (DojoToolkit). Dojo has a special transport called IframeTransport.

You can see it in action here: http://sandbox.ctv15.org/async2.html Locate a file on your computer and click upload. While the file is uploading you can switch between tabs. It will also inform you if the upload fails or not. You can view the dynamic source here: http://sandbox.ctv15.org/async1engine.php

My first test before I found that part of dojo was to create two different forms, one in an iframe and one not. Then, when the user submits the original form, it copies the data to the hidden iframe form and submits that one. Unfortunately Firefox won't let you do that:
Error: uncaught exception: [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: "http://sandbox.ctv15.org/.
It took a long four hours to figure that one out.


Labels: , , ,

posted by Alex Block at 11:58 AM 0 Comments  

The Sandbox Devlog

Here I will post scripts and documents regarding programming techniques with which I have been experimenting. I will post links to scripts that will demonstrate the technique. I cannot guarantee that the link will work, or you will understand what happens in the script. You may play around with them in any way you wish. These scripts are experimental, do not report any errors to me.

Labels:

posted by Alex Block at 11:51 AM 0 Comments