Critical evaluation

The web authoring tool and languages used were Dreamweaver MX, HTML and Javascript.

Dreamweaver MX has a very busy user interface, which can prove a little overpowering to the less experienced web developers. Intermediate level users may find Dreamweaver MX very useful, as little knowledge of HTML (Hyper Text Mark-up Language) is required to produce basic web sites. For more dynamic web sites Dreamweaver can be a bit frustrating. The software does have a habit of producing HTML code on the fly, when it attempts second -guess what the developer was trying to achieve.

The use of Javascript promotes the efficiency of the website due to the fact that it is a client-side scripting language. One of the main advantages of this is the speed of running code immediately on the client-side, negating the need to contact the web server with any queries and then having to wait for the server to perform the query and return any results. This functionality also means that server-side processing is cut down thus reducing the demand on the web server. For the purposes of this assignment, Javascript is more than capable of delivering the type of functionality necessary.

The designed framework has been produced using Dreamweaver MX and basic Javascript functionality. There are elements of the current framework that can be easily built on to react to change, such as the simple, but effective table templates that I have used for this project. Also, because the code, both HTML and Javascript, have been clearly commented and correct naming conventions used, this should help if any other developers where to take on this project and further develop it at a later stage.

There should have more use of Cascading Style Sheets (CSS) for this development as this helps to change any common fonts and attributes for the web site. Any appearance changes that would be required at a later date can be implemented at a single point when CSS are used.

With regards to the implementation of on-line registration and payment functionality there are a multitude of plug-in packages available that are easily integrated with the most basic of web pages. The vast majority of these packages fit seamlessly into any web site's design and remove the need for complex programming from the web developer.

Whilst developing this website I found the use of Dreamweaver MX very frustrating for some of the reasons highlighted earlier in this evaluation. The resizing of images to fit into a particular area of a web page can be very hit-and-miss when working in the design mode of Dreamweaver. Also, the differences in the web page layout can differ dramatically between the development environment and viewing the page in a browser. Sometimes, a lot of trial and error is needed to accomplish the desired results.

Being a .Net and VB6 programmer, I found the Javascript syntax radically different. Even the simplest of data manipulation can prove to be demanding, and often a little research is needed to ensure the correct syntax is implemented.

One anticipated problem in developing the website further would be the necessary interaction with a web server in order to process both registration and payment details, and how this would be implemented. One of the more widely used programming languages that allow developers to access databases is PHP (PHP Hypertext Pre-processor). This way of processing user requests can often mean that the developer will use trial and error in determining what works and what doesn't.

In order to safeguard competitive advantage in today's marketplace it is essential that a company has the correct procedures and processes in place to ensure that existing products/facilities are continually developed. Allied to this, any new developments need to be made available to the marketplace in as quick a time as feasibly possible.

This means that any web services need to incorporate the above also. Web site design is a rapidly developing area in itself and the World Wide Web Consortium (W3C) are keen to ensure the protocols and guidelines are in place to standardise use of the web.

To help companies streamline their processes and provide a simple way to integrate current systems with new ones, new technologies like XML (Extensible Markup Language), SOAP (Simple Object Access Protocol), WSDL (Web Services Description Language) and UDDI (Universal Description, Discovery and Integration) have been introduced. These are all part of an integrated web based service called Web Services.

The move to this approach is essential for any company wishing to maintain a competitive advantage and provide a more efficient approach to business processes.

Code for Website

Index

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>SmartCar</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="javascript" type="text/javascript">

<!--

// Display message if inactive link clicked

function dummyLink() {

alert("This is a dummy link! The only active link is 'Car'")

}

// code for scrolling message across status line

x = "Welcome to Smart Finance --- For all your financial needs "

x = x + x

i = 0

function scroll(){

window.defaultStatus=x.substring(i,x.length) + x

i++

if (i==x.length)

i=0 ;

tid=setTimeout("scroll()", 100)

}

y=" "

function noscroll(){

window.defaultStatus=" "

window.clearTimeout(tid);

}

//-->

</script>

<style type="text/css">

<!--

body {

background-color: #66CCFF;

}

style2 {font-size: 12px}

style3 {font-size: 24px}

style4 {

color: #3333FF;

font-weight: bold;

font-family: Verdana, Arial, Helvetica, sans-serif;

}

style6 {

font-size: 36px;

font-weight: bold;

}

style7 {font-size: 14px}

style9 {

font-size: 24px;

font-weight: bold;

font-style: italic;

color: #000066;

}

-->

</style></head>

<body background="backgroundtile.GIF" onLoad="scroll()" onUnload="noscroll()">

<table width="1000" height="481">

<tr>

<td height="91" colspan="3"><img src="Smart_finance.GIF" width="348" height="68"><span class="style6"> INTRODUCES <img src="Smart_cars.GIF" align="baseline" width="348" height="68" ></span></td>

</tr>

<tr>

<td colspan="3"><img src="line1.gif" width="1003" height="8"></td>

</tr>

<tr>

<th width="145" height="334" rowspan="2" align="left" valign="top" bordercolor="#3333FF" bgcolor="#3399FF">

<li style="width:140px; font-size: 24px; color: #6633CC; font-weight: bold;"><u>Products</u></li>

<span class="style3"><u>

<!-- <div><div style="width:140px;top:0px;left:0px;"><ul style="">

<li><a href="" target="_new">Insurance</a></li>

-->

</u></span> <li>Insurance</li>

<div><div style="width:140px;top:-18px;left:127px;"><ul style="">

<li><a onClick="dummyLink()"><u>Life</u></a></li>

<li><a onClick="dummyLink()"><u>Home</u></a></li>

<li><a href="insur_quote.htm" target="_parent">Car</a></li>

</ul></div></div>

<li><a onClick="dummyLink()"><u>Mutual Funds</u></a></li>

<li><a onClick="dummyLink()"><u>Annuities</u></a></li>

<li>Plans</li>

<div><div style="width:140px;top:-18px;left:127px;"><ul style="">

<li><a onClick="dummyLink()"><u>Pension</u></a></li>

<li><a onClick="dummyLink()"><u>Retirement</u></a></li>

</ul></div></div></li></th>

<td height="31" colspan="2"><span class="style4"><u>Welcome to SmartCar - a subsidiary company of Smart Finance</u></span></td>

</tr>

<tr>

<td width="606" height="281" align="left" valign="top"><p><strong>Smart Finance is a prestigious company offering a wide range of financial services. </strong></p>

<p class="style7">Whether you are looking for affordable insurance quotes for Life, Home or Car we can provide very competitive quotes. Just go to the relevant web page,<i> by clicking on the link to the left,</i> and fill out the easy-to-use online forms. There are special discounts available for taking out more than one policy with <em><strong>Smart Finance</strong>.</em></p>

<p class="style2">Other products available include : </p>

<dl>

<dt class="style2"><strong>Mutual Funds</strong></dt>

<dd class="style2">The best in open-ended funds</dd>

<dt class="style2"><strong>Annuities</strong></dt>

<dd class="style2">Want to invest a lump sum now for an income for later</dd>

<dt class="style2"><strong>Pension Plans</strong></dt>

<dd class="style2">Defined benefit or defined contribution </dd>

<dt class="style2"><strong>Retirement Plans</strong></dt>

<dd class="style2">Set aside some capital to enjoy retirement</dd>

</dl>

</td>

<td width="244" align="left" valign="top" bordercolor="#000000" bordercolordark="#000000" ><p><span class="style9">We are now pleased to be able to offer car insurance. </br>

Please click on the button below to receive a competitive quote</br>

</span></p>

<p><span class="style2"><img src="car2.gif"> </br>

</span><a href="insur_quote.htm"><img src="quote.gif" width="119" height="26" hspace="30" border="0"></a></p> </td>

</tr>

<tr>

<td colspan="3"><img src="line2.gif" width="999" height="12"></td>

</tr>

<tr>

<td colspan="3"><img src="police_chase.gif" width="998" height="36"></td>

</tr>

</table>

</body>

</html>

Quote Page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Get an Insurance Quote</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="javascript" type="text/javascript">

<!--

// Validate user input on listboxes by checking the index values, where 0 means no selection has been made. //

//

//

function val_input(y){

x = document.getElementById("selAge");

x1 = document.getElementById("selCar");

x2 = document.getElementById("selCarAge");

x3 = document.getElementById("selLic");

x4 = document.getElementById("selTown");

x5 = document.getElementById("selPark");

x6 = document.getElementById("selClaim");

var aField = new Array ();

aField[0] = x.selectedIndex;

aField[1] = x1.selectedIndex;

aField[2] = x2.selectedIndex;

aField[3] = x3.selectedIndex;

aField[4] = x4.selectedIndex;

aField[5] = x5.selectedIndex;

aField[6] = x6.selectedIndex;

//alert("Start y="+y);

// loop through list boxes on form to check whether a selection has been made

for (var i=0; i<7; i++){

//alert("aField(i)= " + aField[i] + ";;for i= " +i)

if (aField[i]== 0){

y = y + 0;

} else {

y = y + 1;

}

// alert("i= "+i);

// alert("y= "+y);

}

// if all fields have been populated, calculate cost, otherwise throw up warning message

if (y == 7){

// alert("call to calc_cost. y=" + y);

y == 0;

// alert("y now equals "+y);

calc_cost();

} else {

alert("Please complete all relevant fields where \r\r Please select ... \r\ris showing");

y = 0

}

}

//AFter validation, calc costs based on user input

function calc_cost() {

//Calculate the adjument factor for gender

// oListBox = document.getElementById("selGen");

// var genAdjust

// switch (oListBox.selectedIndex)

// {

// case 1 : genAdjust = 1.2

// break

// default: genAdjust = 1.0

// }

var genAdjust

if (selGen[0].checked)

genAdjust = 1.2

else

genAdjust = 1.0

//alert("The Adjustment is " + genAdjust);

// Calculate the adjustment factor for age

oListBox1 = document.getElementById("selAge");

var ageAdjust

switch (oListBox1.selectedIndex)

{

case 1: ageAdjust = 1.30

break

case 2: ageAdjust = 1.25

break

case 3: ageAdjust = 1.20

break

case 4: ageAdjust = 1.15

break

case 5: ageAdjust = 1.10

break

case 6: ageAdjust = 1.05

break

case 7: ageAdjust = 1.00

break

default: ageAdjust = 0.75

}

//alert("The Adjustment is " + ageAdjust);

// Calculate the adjustment factor for age of car

oListBox2 = document.getElementById("selCarAge");

var carAgeAdjust

switch (oListBox2.selectedIndex)

{

case 1: carAgeAdjust = 1.30

break

case 2: carAgeAdjust = 1.25

break

case 3: carAgeAdjust = 1.20

break

case 4: carAgeAdjust = 1.15

break

case 5: carAgeAdjust = 1.10

break

case 6: carAgeAdjust = 1.05

break

case 7: carAgeAdjust = 1.00

break

default: carAgeAdjust = 0.75

}

//alert("The Adjustment is " + carAgeAdjust);

// Calculate the adjustment factor for driving experience

oListBox3 = document.getElementById("selLic");

var licAdjust

switch (oListBox3.selectedIndex)

{

case 1: licAdjust = 1.30

break

case 2: licAdjust = 1.25

break

case 3: licAdjust = 1.20

break

case 4: licAdjust = 1.15

break

case 5: licAdjust = 1.10

break

default: licAdjust = 1.05

}

//alert("The Adjustment is " + licAdjust);

// Calculate the adjustment factor for car

oListBox4 = document.getElementById("selCar");

var carAdjust

switch (oListBox4.selectedIndex)

{

case 1: carAdjust = 1.30

break

case 2: carAdjust = 1.25

break

case 3: carAdjust = 1.20

break

case 4: carAdjust = 1.15

break

case 5: carAdjust = 1.10

break

default: carAdjust = 1.05

}

// Calculate the adjustment factor for town

oListBox5 = document.getElementById("selTown");

var townAdjust

switch (oListBox5.selectedIndex)

{

case 1: townAdjust = 1.30

break

case 2: townAdjust = 1.25

break

case 3: townAdjust = 1.20

break

case 4: townAdjust = 1.15

break

case 5: townAdjust = 1.10

break

case 6: townAdjust = 1.08

break

case 7: townAdjust = 1.06

break

default: townAdjust = 1.00

}

// Calculate the adjustment factor for parking

oListBox6 = document.getElementById("selPark");

var parkAdjust

switch (oListBox6.selectedIndex)

{

case 1: parkAdjust = 1.10

break

case 2: parkAdjust = 1.05

break

case 3: parkAdjust = 0.95

break

case 4: parkAdjust = 1.00

break

default: parkAdjust = 1.10

}

// Calculate the adjustment factor for no claims discount

oListBox7 = document.getElementById("selClaim");

var claimAdjust

switch (oListBox7.selectedIndex)

{

case 1: claimAdjust = 1.00

break

case 2: claimAdjust = .95

break

case 3: claimAdjust = .90

break

case 4: claimAdjust = .85

break

case 5: claimAdjust = .80

break

default: claimAdjust = .75

}

// Calculate the total cost and display result

var totCost = 500 * genAdjust * ageAdjust * carAgeAdjust * licAdjust * carAdjust * townAdjust * parkAdjust * claimAdjust

totCost = Math.round(totCost * 100)/100;

total_cost.value = totCost;

}

// code for scrolling message across status line

x = "SmartCars Insurance 10% discount for online purchases "

x = x + x

i = 0

function scroll(){

window.defaultStatus=x.substring(i,x.length) + x

i++

if (i==x.length)

i=0 ;

tid=setTimeout("scroll()", 100)

}

y=" "

function noscroll(){

window.defaultStatus=" "

window.clearTimeout(tid);

}

//Reset all the values on the form

function reset() {

oListBox1 = document.getElementById("selAge");

oListBox1.selectedIndex = 0;

oListBox2 = document.getElementById("selCarAge");

oListBox2.selectedIndex = 0;

oListBox3 = document.getElementById("selLic");

oListBox3.selectedIndex = 0;

oListBox4 = document.getElementById("selCar");

oListBox4.selectedIndex = 0;

oListBox5 = document.getElementById("selTown");

oListBox5.selectedIndex = 0;

oListBox6 = document.getElementById("selPark");

oListBox6.selectedIndex = 0;

oListBox7 = document.getElementById("selClaim");

oListBox7.selectedIndex = 0;

total_cost.value = "";

}

//-->

</script>

<style type="text/css">

<!--

body {

background-color: #66CCFF;

}

style1 {

color: #FF0000;

font-weight: bold;

}

style3 {font-size: 12px}

style4 {

font-size: 36px;

font-weight: bold;

}

style7 {font-size: 16px}

style8 {

color: #FF3333;

font-size: 14px;

font-weight: bold;

}

style9 {

font-size: 14px;

font-style: italic;

}

style11 {font-size: 14px; color: #0000FF; }

style12 {color: #0000FF}

style13 {

font-size: 18px;

font-weight: bold;

}

style14 {color: #000066}

-->

</style></head>

<body background="backgroundtile.GIF" onLoad="scroll()" onUnload="noscroll()">

<table width="1003" height="560">

<tr height="85">

<td colspan="4"><img src="Smart_cars.GIF" width="348" height="68"><span class="style4">- competitive car insurance</span></td>

<td><p><img src="Stop.gif" width="80" height="91" align="right"></p>

<p class="style1">&nbsp;</p>

<p class="style1"><span class="style7">Don't be stupid - be <b>SMART!</b></span></p></td>

</tr>

<tr>

<td colspan="5"><img src="line1.gif" width="991" height="8"></td>

</tr>

<tr>

<td colspan="4"><span class="style1">Personal Details</span></td>

<td width="237"><a href="index.htm"><img src="home.GIF" hspace="5" border="0" align="absmiddle"></a></td>

</tr>

<tr>

<td width="175" height="30"><strong>Gender:</strong></td>

<td width="158">

<!-- <select name="selGen" id="selGen">

<option value="0">Please select ....</option>

<option value = "1">Male</option>

<option value = "2">Female</option>

</select>

-->

<input type="radio" name="selGen" value="1" checked>Male

<input type="radio" name="selGen" value="2">Female

</td>

<td colspan="2" rowspan="6" align="left" valign="top"><div align="left" class="style9">

<p align="center" class="style13"><u>Please Note</u> </p>

<p>This process for new quotations will supply a cost based on the information provided. There is no need for you to take up the quotation and you can revisit these details at a later stage by retrieving the quote (See below). </br>

All formal quotations are valid for 28 days from the date the quotation was produced.</br>

Customers that already have home and/or life insurance will also be eligible for a 15% discount on the cost shown here.</br> * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * </p>

</div></td>

<td rowspan="2"><img src="car3.gif" align="middle" hspace="10"></td>

</tr>

<tr>

<td height="42"><strong>Age Band:</strong></td>

<td>

<select name="selAge" id="selAge">

<option value="0">Please select ....</option>

<option value = "1">18-24</option>

<option value = "2">25-29</option>

<option value = "3">30-34</option>

<option value = "4">35-39</option>

<option value = "5">40-44</option>

<option value = "6">45-49</option>

<option value = "7">50-54</option>

<option value = "8">55-59</option>

<option value = "9">60-65</option>

<option value = "10">Over 65</option>

</select>

</td>

<tr>

<td height="27" colspan="2"><span class="style1">Details of the car requiring insurance:</span></td>

<td rowspan="2"><span class="style3">We would love to have you covered </br>so please contact us if the displayed </br>cost is more than quoted elsewhere </span></td>

</tr>

<tr>

<td><strong>Make of Car:</strong></td>

<td><select name="selCar" id="selCar">

<option value="0">Please select ....</option>

<option value = "1">Car 1</option>

<option value = "2">Car 2</option>

<option value = "3">Car 3</option>

<option value = "4">Car 4</option>

<option value = "5">Car 5</option>

<option value = "6">Car 6</option>

</select></td>

<td width="10"></td>

</tr>

<tr>

<td><strong>Reg year of car:</strong></td>

<td>

<select name="selCarAge" id="selCarAge" >

<option value="0">Please select ....</option>

<option value = "1">2005</option>

<option value = "2">2004</option>

<option value = "3">2003</option>

<option value = "4">2002</option>

<option value = "5">2001</option>

<option value = "6">2000</option>

<option value = "7">1999</option>

<option value = "8">1998</option>

<option value = "9">1997</option>

<option value = "10">1996</option>

<option value = "11">1995 or less</option>

</select>

</td>

<td><img src="quote.gif" hspace="10" border="0" align="absbottom" onClick="val_input(0)"> </td>

<!-- <td><img src="quote.gif" hspace="10" border="0" align="absbottom" onClick="calc_cost()"> </td>

-->

</tr>

<tr>

<td><strong>Licence held for:</strong></td>

<td><select name="selLic" id="selLic">

<option value="0">Please select ....</option>

<option value = "1">Less than 1 yr</option>

<option value = "2">1 - 2 yrs</option>

<option value = "3">2 - 3 yrs</option>

<option value = "4">3 - 4 yrs</option>

<option value = "5">4 - 5 yrs</option>

<option value = "6">over 5 yrs</option>

</select></td>

<td><u><strong>Insurance Cost</strong></u> <input type="text" name="total_cost" id="total_cost" size="10"> </td>

</tr>

<tr>

<td><strong>Address/Town:</strong></td>

<td><select name="selTown" id="selTown">

<option value="0">Please select ....</option>

<option value = "1">London</option>

<option value = "2">Birmingham</option>

<option value = "3">Glasgow</option>

<option value = "4">Liverpool</option>

<option value = "5">Leeds</option>

<option value = "6">Sheffield</option>

<option value = "7">Edinburgh</option>

<option value = "8">Bristol</option>

<option value = "9">Manchester</option>

<option value = "10">Leicester</option>

<option value = "11">Coventry</option>

<option value = "12">Bradford</option>

<option value = "13">Cardiff</option>

<option value = "14">Belfast</option>

<option value = "15">Newcastle</option>

<option value = "16">Other</option>

</select></td>

<td width="2"></td>

<td width="403"><span class="style14"><u><strong> * * E X I S T I N G - C U S T O M E R S</strong></u><strong><u> * * </u></strong></span></td>

<td><img src="reset.gif" hspace="10" border="0" align="absbottom" onClick="reset()"> </td>

</tr>

<tr>

<td height="37"><strong>Parking:</strong></td>

<td><select name="selPark" id="selPark">

<option value="0">Please select ....</option>

<option value = "1">Street</option>

<option value = "2">Driveway</option>

<option value = "3">Garage</option>

<option value = "4">Secure Car Park</option>

<option value = "5">Car Park</option>

</select></td>

<td></td>

<td><span class="style11">Existing customer can retrieve a valid quote by entering the quote number below and then clicking the "Retrieve Quote" button</span></td>

</tr>

<tr>

<td height="29"><strong>No Claims:</strong></td>

<td><select name="selClaim" id="selClaim">

<option value="0">Please select ....</option>

<option value = "1">None</option>

<option value = "2">1 yr</option>

<option value = "3">2 yrs</option>

<option value = "4">3 yrs</option>

<option value = "5">4 yrs</option>

<option value = "6">5 yrs and over</option>

</select></td>

<td></td>

<td><span class="style12">Enter Quote Ref</span>:

<input type="text" name="old_quote" title="old_quote">

<img src="old_quote.GIF" align="texttop" onClick=alert("Dummy_Button")></td>

<td>&nbsp;</td>

</tr>

<tr>

<td height="13" colspan="5"><img src="line2.gif" width="964" height="11"></td>

</tr>

<tr>

<td height="50" colspan="5" align="left" valign="top"><img src="car15.gif" width="322" height="44"> <span class="style7">Drive away with a bargain deal today!</span>!<img src="car_explode.gif" width="122" height="55"><span class="style8">Don't blow your chance TO SAVE MONEY!!!</span></td>

</tr>

<tr>

<td height="2" colspan="5"></td>

</tr>

</table>

</body>

</html>