Chapter: XML and Web Services : Building XML-Based Applications : Formatting XML for the Web

Coca Cabana Technology Shop Case Study: Building a Web Site for the Future

XHTML 1.0 is a tremendous tool for helping Web site developers get their Web sites quickly transitioned to XML compatibility. In this mini case study, we will take a quick visit to the Coca Cabana Technology Shop to see how they made their Web site XHTML 1.0 Transitional compliant.

Coca Cabana Technology Shop Case Study: Building a Web Site for the Future, Part I

The owners of Coca Cabana Technology Shop have always prided themselves on being up to date on the latest technology for the computers they sell. However, recently it was pointed out to them by one of their clients that although their computers are great, their Web site is beginning to fall behind the times. The owners decided that in order to keep up the appearance of being on top of their industry, they would need to upgrade their Web site.

After a bit of research, they found out that XHTML, an XML application, would better serve their e-commerce needs and move them to the cutting edge of technology on the Web.

Because most of Coca Cabana Technology Shop’s business is over the Internet, they decided that they better upgrade their Web site to XHTML 1.0 immedi-ately. In order to achieve compatibility as quickly as possible, they went with the XHTML 1.0 Transitional DTD.

The first step was to review the HTML code currently used to make up their Web site (for expediency purposes, we are simply going to look at the home page of Coca Cabana Technology Shop). Here’s the code for Prexhtml_Home.html (which you can download from the Sams Web site):

<HTML>

<HEAD>

<TITLE>Welcome to Coca Cabana</TITLE>

<META name=”description” content=”Welcome to Coca Cabana, The best technology

shop on the Web!”>

</HEAD>

<H1>Welcome to Coca Cabana Technology Shop!</H1>

<H3>The <FONT COLOR=”RED”>best</FONT> darn shop on the internet!</H3> <P>

Here at Coca Cabana we pride ourselves on having the most up to date technology at the best prices you will find anywhere.

<HR>

<TR>

<!--

These links do not actually go anywhere - they are included for demonstration purposes

-->

<H4>Site Links:</H4> <UL>

<LI><A HREF=news.html>Latest News</A>

<LI><A HREF=catalog.html>Catalog</A>

<LI><A HREF=support.html>Support</A> <LI><A HREF=aboutus.html>About us</A> </TD>

<H2>Check out our laptop blowout!</H2>

<FONT SIZE=”4”>Special selections from our award winning laptop line! <UL>

<LI>COCA PENTIUM III Laptop - <b>$999.00</B> <LI>COCA PENTIUM II Laptop - <b>$799.00</B> <LI>COCA PENTIUM Laptop - <b>$599.00</FONT></B> </TD>

</TR>

<TR>

<H4>We have some other great specials that you should see!</H4> <FONT SIZE=”3”>The following low prices are always

available at Coca Cabana! <UL>

<LI>COCA PENTIUM III DESKTOP - <b>$1299.00</B> <LI>COCA PALM-TOP - <b>$299.00</B>

<LI>COCA 10 GIGABYTE HARDDRIVES - <b>$109.00</B> </TD>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

<HR>

<CENTER><FONT SIZE=2>Thanks for shopping at the Coca Cabana Technology shop!<BR><B>Please come again soon!

</BODY>

</HTML>

What the owners of Coca Cabana Technology Shop discovered was that although their Web site displayed on the Internet well, the HTML code making up the page was not XHTML compliant and, in some cases, was down right sloppy. Here’s a list of the major problems they found:

The XHTML 1.0 specification dictates that element names and attribute names should not be capitalized. This needs to be changed on the Coca Cabana Technology Shop site.

All attribute values must appear in quotes. Only some of the attribute val-ues were quoted on the Coca Cabana Technology Shop site.

All elements must have both opening and closing tags. Also, empty ele-ments must have the slash character (/) before the closing “>”. This is also a problem on the site.

Finally, they found several instances of elements not properly nested.

In addition to these needed changes, they also have to make sure they add the proper Document Type Declaration with a reference to the XHTML 1.0 Transitional DTD. The document that they came up with after making all the necessary changes is shown in the following file, Postxhtml_Home.html (which you can download from the Sams Web site):

<!DOCTYPE html PUBLIC

“-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html>

<head>

<title>Welcome to Coca Cabana</title>

</head>

<h1>Welcome to Coca Cabana Technology Shop!</h1>

<h3>The <font color=”RED”>best</font> darn shop on the internet!</h3> <p>

Here at Coca Cabana we pride ourselves on having the most up to date technology at the best prices you will find anywhere.

</p> <hr />

<tr>

<td width=”15%” valign=”top” bgcolor=”TAN”> <h4>Site Links:</h4>

<!--

These links do not actually go anywhere - they are included for demonstration purposes

--> <ul>

<li><font size=”2”><a href=”home.html”>Home</a></font></li> <li><font size=”2”><a href=”news.html”>Latest News</a></font></li> <li><font size=”2”><a href=”catalog.html”>Catalog</a></font></li> <li><font size=”2”><a href=”support.html”>Support</a></font></li> <li><font size=”2”><a href=”aboutus.html”>About us</a></font></li> </ul>

</td>

<h2>Check out our lap top blowout!</h2>

<font size=”4”>Special selections from our award winning laptop line!</font>

<ul>

<li><font size=”3” color=”MAROON”>COCA PENTIUM III Laptop – <b>$999.00</b></font></li>

<li><font size=”3” color=”MAROON”>COCA PENTIUM II Laptop – <b>$799.00</b></font></li>

<li><font size=”3” color=”MAROON”>COCA PENTIUM Laptop – <b>$599.00</b></font></li>

</ul>

</td>

</tr>

<tr>

<h4>We have some other great specials that you should see!</h4> <p>

<font size=”3”>The following low prices are always available at Coca Cabana!</font>

</p>

<ul>

<li><font size=”3” color=”MAROON”>COCA PENTIUM III DESKTOP – <b>$1299.00</b></font></li>

<li><font size=”3” color=”MAROON”>COCA 10 GIGABYTE HARDDRIVES – <b>$109.00</b></font></li>

</ul>

</td>

</tr>

</table>

</td>

</tr>

</table> <hr />

<center><font size=”2”>Thanks for shopping at the Coca Cabana Technology shop!<br /><b>Please come again soon!</b></font></center>

</body>

</html>

After making all the necessary changes to ensure their Web site is XHTML 1.0 Transitional compliant, the owners of Coca Cabana Technology Shop decided to add one more little touch to their home page. Just before the closing </body> tag, they added the following five lines of code:

<p>

These lines of code add an image to the home page that, when clicked, redi-rects visitors to a validator on the W3C organization’s Web site. This validator checks to ensure that the referring Web page is made up of valid XHTML. Even though the validator is not required for the page to actually be valid, They thought this would be a neat touch to let visitors know that they are up with the latest Web technology as well as the latest computer technology. Anyone clicking the image would instantly know that his Web site is XHTML 1.0 valid.

Coca Cabana Technology Shop: Building a Web Site for the Future, Part II

During the course of their research on XHTML 1.0, the owners of Coca Cabana Technology Shop realized that XHTML Basic was becoming an important markup language for delivering content to alternative devices. In line with the idea that they should be on the cutting edge with their Web site, they decided that they needed to make a version of their site that would be easily accessible to alternative devices.

Because XHTML Basic is such a simplified language and considering the limited bandwidth and processing power that alternative devices possess, the Coca Cabana Technology Shop owners decided that they would simply put together an XHTML Basic page that advertises their specials. First, they reviewed the por-tion of their home page that lists their specials. This is shown in the file Postxhtml_Home.html, which you can download from the Sams Web site:

<!DOCTYPE html PUBLIC

“-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html>

<!-- Please note that this is only a partial listing of Postxhtml_Home.html that was originally listed in part one of this mini-case study

-->

…

<h2>Check out our lap top blowout!</h2>

<font size=”4”>Special selections from out award winning laptop line!</font>

<ul>

<li><font size=”3” color=”MAROON”>COCA PENTIUM III Laptop – <b>$999.00</b></font></li>

<li><font size=”3” color=”MAROON”>COCA PENTIUM II Laptop – <b>$799.00</b></font></li>

<li><font size=”3” color=”MAROON”>COCA PENTIUM Laptop – <b>$599.00</b></font></li>

</ul>

</td>

</tr>

<tr>

<h4>We have some other great specials that you should see!</h4> <p>

<font size=”3”>The following low prices are always available at Coca Cabana!</font>

</p>

<ul>

<li><font size=”3” color=”MAROON”>COCA PENTIUM III DESKTOP – <b>$1299.00</b></font></li>

<li><font size=”3” color=”MAROON”>COCA 10 GIGABYTE HARDDRIVES – <b>$109.00</b></font></li>

</ul>

</td>

</tr>

</table>

</td>

</tr>

</table>

…

</html>

One of the main things they realized after reviewing the specials listed on their home page was that some of the markup was no longer supported by XHTML Basic (such as the <font> elements). These would need to be removed. Another thing they noticed was that they used a nested table on their home page. Table nesting is not supported in XHTML Basic. Also, the Document Type Declaration would need to be updated to point to the XHTML Basic DTD. Taking these items into consideration, they came up with the following XHTML Basic document, Xhtmlbasic_home.html (which you can download from the Sams Web site):

<?xml version=”1.0” encoding=”UTF-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML Basic 1.0//EN” “http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” > <head>

<title>Welcome to Coca Cabana Technology Shop</title> </head>

<body>

<h1>Welcome to Coca Cabana Technology Shop!</h1> <h3>The best darn shop on the internet!</h3> <h2>Check out our lap top blowout!</h2>

<ul>

<li>COCA PENTIUM III Laptop - <b>$999.00</b></li> <li>COCA PENTIUM II Laptop - <b>$799.00</b></li> <li>COCA PENTIUM Laptop - <b>$599.00</b></li> </ul>

<h4>We have some other great specials that you should see!</h4> <ul>

<li>COCA PENTIUM III DESKTOP - <b>$1299.00</b></li> <li>COCA PALM-TOP - <b>$299.00</b></li>

<li>COCA 10 GIGABYTE HARDDRIVES - <b>$109.00</b></li> </ul>

<h5>Thank you!</h5> </body>

</html>

You can see from the XHTML Basic version of the Coca Cabana Technology Shop home page that it has been simplified a great deal. All unsupported elements and attributes have been removed. Also, all table structures have been removed. Removing the table structures makes the page easier to render for alternative devices(although, consider that this would probably still be too much to display on a cell phone—it is probably better suited for a handheld PC display). The owners of Coca Cabana Technology Shop can now proudly say that their Web site is accessible by alternative devices on the Internet.

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

XML and Web Services : Building XML-Based Applications : Formatting XML for the Web : Coca Cabana Technology Shop Case Study: Building a Web Site for the Future |