Wednesday, 16 February 2011

W3C Validator Compliancy for Microsoft Office Live Web-Hosting and Facebook Buttons (1)

(For the latest PDF files Merger Software please have a look at the top of the left margin, inside the red box.) I already had some of my experiences with Microsoft Office Live (OL) web hosting, which came useful for some of the visitors of this Blog. Recently my daughter had a look at my website with her FireFox browser and noticed that some pages of my site was not much readable from non-IE browsers. That gave me the idea that I should make my site standard based on the WWW authority criteria. I already had used the generic ASP template of OL, but with the loading of my designed pages from Documents Gallery of OL rather than the root directory. That makes the custom design more practicable. I can keep a couple of pages or even only one page in the root and the remaining pages of my site in the OL Document Gallery. (Even if you had an Apache server as your own personal host you would do that. This makes migration and other tweaking easier, too) Yet, using a note-pad for design meant no way of controlling it for the errors and we know that browsers are robust entities that interpret and run any design without much taking heed to errors or informing us about them. To control the errors I needed an intelligent IDE for design of pages. There are few free IDE's available, including Microsoft Visual Express Studio (now version 2010). I preferred to use NetBeans (NB) IDE latest version. Both IDE's have intelligent interfaces with capability to suggesting a list of possible codes and showing errors. NB shows mis-spelled words too. Hence, I opened one of pages with that IDE. Lo, and behold! All the lines were underlined with red as the error laden codes. Tables were not nested properly, tags were not furbished with correct way of tag-ending. Tags were used in wrong positions. Some tags and attributes were deprecated. A mixture of capital and lower cases were used for some tags. But the most important I found was the "Standard" that you declare at the top of the document from the W3C source. Some people have got the wrong idea that if you declare, say, two standards as HTML 4.01 and XHTML 1.0, it is helpful for interpretation by browsers. They say if you forget "/" at some tags like <img> then the page complies. This is not a correct way of practice. Hence, I decided to select one that looks easier to follow. I typed <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >. I knew that there is no compromise on capitalisation. For example, if I write "/tr/" in place of "/TR/" an error occurs. That forces me to change <html> beginning tag to <html xmlns="http://www.w3.org/1999/xhtml">. Having typed that, all the error points changed and their number reduced but new errors came out. <br> without ending "/" is not allowed. I used the "Edit -> Replace" command of IDE to do that job for me. Another simple change is that no tag or attribute or its value is allowed to remain capital. You cannot type <TABLE> or FONT-SIZE. They should be <table> and font-size, respectively.  The funny thing happened when I used "Replace" command to change table row tags from capital "TR" to lower case "tr" Suddenly number of errors rocketed up. Yes, the before mentioned file path, "/TR/" in the topmost declaration for using transitional XHTML also had been changed to lower case. Using the "Replace" command should be acompanied with caution to prevent damaging capitalisation of the content of the page already written. If I want to change all the paragraph tags and their end tags from capital to lower case with one command and with no qualm about the content I should say (to include end tags, as well) replace "P>" with "p> " Then no capital P at the beginning of a sentence will be changed. (Peter will not come as peter!) I changed all the deprecated attributes to correct ones, as well, without being worried about any mistake. I changed obsolete "name" attributes to "id" attributes. I followed the rules of W3C in using the correct literal adjectives instead of using those which looks correct to a coder's mind. For instance nowrap="true" should be replaced by nowrap="nowrap". Align attribute for image tag is "middle" but in other places it should be "center". I could not use <li> </li>without nesting them in <ul></ul>. I used the automatic intelligent tabs of the IDE to gradually correct my tables nesting structures by checking the returning columns of line-feeds until each table and each row and each column of it become closed at the right position symmetric to opening tags. Once you put the "id" of a data column in a row of a table it is not necessary to repeat it in other columns (one of the common errors of my OL template). I continued until my file opened in the NB IDE didn't show any error or any warning. I deleted the old file from the Microsoft Office Live Document Gallery and uploaded the new file then I went to W3C site and checked my newly uploaded page. Congratulation page appeared for my web page. Now, gradually I am refurbing other pages. There are some tag extensions out there not in coordination with W3C bodies. One of them is the <fb:like> for facebook's "Like" button. or tags for embedding objects. If your page fails only for using tags like that but in terms of everything else is correct, use the W3C emblem. The visitor can check and appreciate that you have been meticulous in your design, but only failed for a widely used tag not yet been standardised. At the same time time put pressure on developers of Facebook, Creative Commons and some other important web entities to standardize their codes with neater extensions by offering them through RFC or other means to decision making committees of www. (I haven't checked, yet, if I can nest them as CDATA inside a script tag as work-around to pass the validator check, but I'll do and inform you later.)
Update 17/Feb/11: I worked it out now.
Change your <html xmlns="http://www.w3.org/1999/xhtml"> tag to <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb=http://developers.facebook.com/schema/> to accommodate for Facebook extension. Then at the place that you wanted to plug the Facebook button in add the following Java Script:

Change attributes according to your requirements and taste. Please note that CDATA is commented out. My "Downloads Page" with "Facebook" button, now have passed the W3C Validator check successfully.