____________________________________ ____________________________________ First Name : Anthony Last Name : Ku Ong Student Number : 991040119 First Name : John Last Name : Ngo Student Number : 990991085 Course : CSC309 H1F Date : Friday October 17, 2003. Part 1 (a) Question 4.6 <html> <head> <!-Project 1 CSC309 ---------------Member #1 : Anthony Ku Ong (991040119) Member #2 : John Ngo (990991085) --> </head> <body> <!-- the original image --> <img src = "deitel.gif" alt = "deitel.gif orig"> <br> <!-- Question 4.6 a) Increase the image size to 100% --> <img src = "deitel.gif" width = "400" height = "300" alt = "deitel.gif 4.6 a)"> <br> <!-- Question 4.6 b) Increase the image size to 50% --> <img src = "deitel.gif" width = "300" height = "225" alt = "deitel.gif 4.6 b)"> <br> <!-- Question 4.6 c) Increase the image size to 2:1 ratio --> <img src = "deitel.gif" width = "400" height = "200" alt = "deitel.gif 4.6 c)"> <br> </body> </html> Part 1 (b) Question 4.7 <!-Project 1 CSC309 ---------------Member #1 : Anthony Ku Ong (991040119) Member #2 : John Ngo (990991085) --> <!-- PART 1 XHTML --> <!-- (a) 4.7 Create a link to each of the following --> <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Part 1(a) Question 4.7</title> </head> <body> <!-- create an unordered list --> <ul> <!-- (a) index.html located in files directory --> <li><a href="files/index.html">Index.html Located in Files Directory</a></li> <!-- (b) index.html located in text subdirectory of the files directory --> <li><a href="files/text/index.html">Index.html Located in Text subdirectory</a></li> <!-- (c) index.html located in the other directory in your parent directory --> <li><a href="../other/index.html">Index.html Located in Other Directory</a></li> <!-- (d) A link to the President of the United States' email address ([email protected]) --> <li><a href=" mailto:[email protected]">President's Email</a></li> <!-- (a) An FTP link to the file named README in the pub directory of ftp.cdrom.com --> <li><a href=" mailto:[email protected]"> ftp://ftp.cdrom.com/pub/README</a></li> </ul> </body> </html> Part 1(c) Question 4.8 <html> <head> <!-Project 1 CSC309 ---------------Member #1 : Anthony Ku Ong (991040119) Member #2 : John Ngo (990991085) --> </head> <body> <!-- Question 4.8 Write in XHTML a markup version of your resume> <!-- Title of my Resume --> <center> <h1> John Derrick Ngo <h2> 26 Murray Ave. <br> Scarborough, Ontario <br> M1S-2A2 <br> <br> </h2> </h1> </center> <!-- Profile of My Resume --> <h3 align = "left"><u> Profile: </u></h3> <ul> <li> A self-motivated and quick-learning team player seeking to design and implement <br> professional websites with opportunities to utilize exceptional technical, artistic, <br> and communication skills.<br> </li> <li> Able to learn and adapt quickly as a result of a strong problem solving and <br> Computer Science foundation at U of T. <br> </li> </ul> <br> <!-- My Education --> <h3 align = "left"><u> Education: </u></h3> <b> University of Toronto </b> <br> September 2000 to Present <br> Toronto, Ontario <br> <i> Honours in Computer Science and Economics - 4th Year </i> <br> <i> Specialist in Information Systems Program, Major in Economics </i> <br> <br> <b>St. Andrews College </b> <br> September 1998 to June 2000<br> Aurora, Ontario <br> <i> Grade 11 to OAC </i> <br> <br> <br> <!-- My Computer Skills --> <h3 align = "left"><u> Computer and Language Skills: </u></h3> <ul> <li> Proficient using utilities from Dreamweaver, Flash, Photoshop, MS Front Page, Word, PowerPoint and Excel </li> <li> Capable of scripting and Web development using Perl, Shell, Javascript, SQL /MySQL HTML, XML, ASP, CGI, PHP </li> <li> Java, C/C++, DB2, Visual Basic Language Programmer </li> <li> Experienced in Internet hardware/software/ISP selection and LAN/OS/software installation. </li> <li> Comfortable working in Windows 95/98/NT and Unix Environments </li> <li> Speaks English Mandarin and Filipino Fluently </li> </ul> <br> <!-- My Work Experience --> <h3 align = "left"><u> Work Experience: </u></h3> <b> Web Designer - Blah Technologies Limited </b> <br><i> April 2003 to Present </i> <br><br> <ul> <li> Created WebPages for the company </li> <li> Regular site maintenance and updates for the company </li> <li> Created graphics/logo for the company website </li> </ul> <br><br> <b>Computer Operator - Trapp Inc. </b> <br><i>January 2000 to August 2002</i> <ul> <li> Assists in operating equipment including terminals and peripheral equipment </li> <li> Performs routine tasks such as monitoring and controlling disks and tapes </li> </ul> <br><br> <!-- Awards Recieved --> <h3 align = "left"><u> Awards Recieved: </u></h3> <ol type = "i"> <li> Governor General’s Millennium History Prize 2000 </li> <li> Michael’s Prize for the Highest Mark in OAC History </li> <li> Silver Medallist Ontario Winter Games 2000 </li> <li> Ontario Scholar 1999-2000 </li> <li> Honour Roll, St. Andrews College </li> <ol> <br> <br> <br> <!-- Awards Recieved --> <h3 align = "center">References Provided Upon Request</h3> </body> </html> Part 1(d) Question 5.7 <!-Project 1 CSC309 ---------------Member #1 : Anthony Ku Ong (991040119) Member #2 : John Ngo (990991085) --> <!-- PART 1 - XTHML --> <!-- (d)5.7 Create XHTML markup that produces the table in Fig 5.12 --> <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Part 1(d) Question 5.7</title> </head> <body> <table border = "1"> <!-- note there is no header --> <thead> </thead> <tbody> <!--sets the first row (and only row) of this table --> <tr> <!--The first column of this row, sets table data--> <td width = "65%" > <h1>Objectives</h1> <p> <ul> <li>To be able to create tables with rows and columns of data.</li> <li>To be able to control the display and formatting of tables</li> <li>To be able to create and use forms.</li> <li>To be able to create and use image maps to aid <br>hyperlinking</br> </li> <li>To be able to use the <strong> frameset</strong> element to display multiple <br>Web Pages</br></li> </ul> <em> Yea, from the table of my memory I'll wipe away all trival <br>fond records. </br> </em> William Shakespeare </p> </td> <!--The second column of this row, which has the camel image--> <td align = "center"> <img src = "camel.gif" width = "205" height = "167" alt = "Picture of a camel" /> </td> </tr> </tbody> </table> </body> </html> Part 1(e) Question 5.8 <html> <head> <!-Project 1 CSC309 ---------------Member #1 : Anthony Ku Ong (991040119) Member #2 : John Ngo (990991085) --> </head> <body> <!-- Question 5.8 --> <h1 align = "left"> Table Example Page </h1> <table border = "1" align = "left" width = "24%"> <caption align = "left"> Here is a small example table.</caption> <!-- the head of the table --> <thead> <tr><th> This is the head. </th></tr> </thead> <!-- the body of the table --> <tbody> <tr><td> This is the body.</td></tr> </tbody> </table> </body> </html> Part 1(f) Question 5.7 <!-Project 1 CSC309 ---------------Member #1 : Anthony Ku Ong (991040119) Member #2 : John Ngo (990991085) --> <!-- PART 1 - XTHML --> <!-- (f)5.9 This is a University feedback form --> <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>University Feedback</title> </head> <body> <h1>University Feedback Form</h1> <p>Please fill out this form to help us improve your next campus visit.</p> <form method = "post" action = "/cgi-bin/formmail"> <p> <input type = "hidden" name = "recipient" value = "[email protected]" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> </p> <!-- Defines a Name field to enter your text --> <p><label>Name: <input name = "name" type = "text" size = "25" /> </label></p> <!-- Defines an address field to enter your text --> <p><label>Address: <input name = "name" type = "text" size = "25" /> </label></p> <!-- Defines an email field that is "masked" with asterixes when entered --> <p><label>E-mail Address: <input name = "email" type = "password" size = "25" /></label></p> <p> <!-- Defines a text area where comments can be made --> <p><label>Comments:<br /> <textarea name = "comments" rows = "4" cols = "36"></textarea> </label></p> <!-- Defines check boxes where you can select an entry --> <strong>Things you liked mout about the campus:</strong><br /> <label>Students <input name = "thingsliked" type = "checkbox" value = "Students" /></label> <label>Location <input name = "thingsliked" type = "checkbox" value = "Location" /></label> <label>Campus <input name = "thingsliked" type = "checkbox" value = "Campus" /></label> <label>Atmosphere <input name = "thingsliked" type = "checkbox" value = "Atmosphere" /></label> <label>Dorm Rooms <input name = "thingsliked" type = "checkbox" value = "Dorm Rooms" /></label> <label>Sports <input name = "thingsliked" type = "checkbox" value = "Sports" /></label> </p> <!-- Radio Buttons that ask prospective student how they <!-- became interested in the university. <!-- Note: only one radio button <!-- in a group can be selected. <p> <strong>How did you get interested in the University: </strong><br> <label>Friends <input name = "howtosite" type = "radio" value = "friends" checked = "checked" /> </label> <label>Television --> --> --> --> <input name = "howtosite" type = "radio" value = "tv" /></label> <label>Internet <input name = "howtosite" type = "radio" value = "internet" /></label> <label>Other <input name = "howtosite" type = "radio" value = "other" /></label> </p> <!-- Submit and Reset Buttons for the form, note when clicked, they do nothing --> <p> <input type = "submit" value = "Submit Entries" /> <input type = "reset" value = "Reset Entries" /> </p> </form> </body> </html> Part 2 (a) Question 6.8 <!-Project 1 CSC309 ---------------Member #1 : Anthony Ku Ong (991040119) Member #2 : John Ngo (990991085) --> <!-- PART 2 - CSS --> <!-- 2(a) 6.8 Displays the results of a Colour Survey --> <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Favourite Colour Survey</title> <link rel = "stylesheet" type = "text/css" href = "style_2a.css" /> </head> <body> <h1>Favourite Colour Survey</h1> <form method = "post" action = "/cgi-bin/formmail"> <p> <input type = "hidden" name = "recipient" value = "[email protected]" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> </p> <!-- See style_2a.css for more --> <div class="vote"> <!-- Creates Radio buttons for the user to check their favourite color --> <p><strong> Vote for your favourite Colour</strong> </p> <p><label class="percent">Red <input name = "howtosite" type = "radio" value = "red" checked = "checked" /> </label></p> <p><label class="percent">Blue <input name = "howtosite" type = "radio" value = "blue" /> </label></p> <p><label class="percent">Yellow <input name = "howtosite" type = "radio" value = "yellow" /></label> <p><label class="percent">Green <input name = "howtosite" type = "radio" value = "green" /></label> <p><label class="percent">Orange <input name = "howtosite" type = "radio" value = "orange" /> </label></p> <!-- Includes a reset and submit button --> <p> <input type = "submit" value = "Submit" /> <input type = "reset" value = "Reset" /> </p> </div> <!-- the <table> tag opens a table --> <div class="colorChart"> <!-- creates an "invisible table" without any borders for the results of the colour survey --> <table border = "0" cellspacing=15 width = "100%" summary = "This table provides information about the price of fruit"> <!-- the <thead> is the first section of a table --> <!-- it formats the table header area --> <thead> <tr> <!-- <tr> inserts a table row --> <th>Current Results of Favourite Colours</th> <!-- insert a blank entry--> <th> </th> </tr> </thead> <!-- all table content is enclosed --> <!-- within the <tbody> --> <tbody> <tr> <td class="red">Red</td> <!-- insert a data cell --> <td class ="percent">25%</td> </tr> <tr> <td class="blue">Blue</td> <td class ="percent">42%</td> </tr> <tr> <td class="yellow">Yellow</td> <td class ="percent">11%</td> </tr> <tr> <td class="green">Green</td> <td class ="percent">9%</td> </tr> <tr> <td class="orange">Orange</td> <td class ="percent">13%</td> </tr> </tbody> <!-- there is no <tfoot> in this table. It is the last section of a table it formats the table footer --> <tfoot> </tfoot> </table> </div> </body> </html> Style Sheet for 2 (a) Question 6.8 /* Project 1 CSC309 ---------------Member #1 : Anthony Ku Ong (991040119) Member #2 : John Ngo (990991085) */ /*PART 2 - Style Sheet for Question 6.8 This is the style sheet for Part 2a ,Question 6.8 which defines the styles for the file 2a.html */ body, td, th { font-family: Serif,Arial; font-size: 14px; } .vote{ /* uses absolute position to place the text of the vote in the top left area */ position: absolute; left: 100px; top: 80px; } .colorChart { /* uses absolute position to place the text of the results in the top right area */ position: absolute; left: 350px; top: 65px; width: 500px; text-align: left; } /* Used for the background colors of the survey results */ .red { background-color: red; } .blue { background-color: blue; } .yellow { background-color: yellow; } .green { background-color: green; } .orange { background-color: orange; } /* defines the text that present the Percentage of the results */ .percent { text-align: left; font-size: 30px } strong { font-family: Verdana, Arial, sans-serif; font-sze: 16px; text-align: center; font-style: oblique; } h1{ font-family: Verdana, Arial, sans-serif; font-sze: 16px; text-align: center; } Part 2 (b) Question 6.9 <html> <!-Project 1 CSC309 ---------------Member #1 : Anthony Ku Ong (991040119) Member #2 : John Ngo (990991085) --> <head> <style type = "text/css"> h1 {color: blue} a { text-decoration: none; color: blue} a:hover {background-color: yellow} </style> <title> Internet and WWW How to Program </title> </head> <body> <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!--Fig 4.5:links.html --> <h1> Here are my favorite sites</h1> <p><strong>Click a name to go to that page.</strong></p> <!--Create four text hyperlinks --> <p> <p> <p> <p> <a <a <a <a href href href href = = = = "http://www.deitel.com">Deitel</a></p> "http://www.prenhall.com">Prentice Hall</a></p> "http://www.yahoo.com">Yahoo!</a></p> "http://www.usatoday.com">USA Today</a></p> </body> Part 3 (a) Question 7.16 <!-Project 1 CSC309 ---------------Member #1 : Anthony Ku Ong (991040119) Member #2 : John Ngo (990991085) --> <!-- PART 3 Javascript --> <!-- (a) 7.16 Write a script that asks the user to enter 2 numbers obtains the two numbers from the user and outputs XHTML text that displays the sum, product, difference and quotient of the two numbers. Use techniques in Fig 7.6 --> <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Part 3 (a) Question 7.16 --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>PART 3(a) - 7.16</title> <script type = "text/javascript"> <!-var firstNumber, // first string entered by user secondNumber, // second string entered by user number1, // first number number2, // second number product, // product of number1 and number2 difference, // difference of number1 and number2 quotient, // quotient of number1 and number1 sum; // sum of number1 and number2 // read in first number from user as a string firstNumber = window.prompt( "Enter first integer", "0" ); // read in second number from user as a string secondNumber = window.prompt( "Enter second integer", "0" ); // convert numbers from strings to integers number1 = parseInt( firstNumber ); number2 = parseInt( secondNumber ); // add the numbers sum = number1 + number2; // product: multiplies the numbers product = number1 * number2; //difference : subtracts the numbers difference = number1 - number2; //quotient : divides the numbers quotient = number1/number2; // display the results document.writeln( "<h1>The document.writeln(" <h1>The document.writeln( "<h2>The document.writeln( "<h2>The document.writeln( "<h2>The document.writeln( "<h2>The First Number is " + number1 + "</h1>"); Second Number is " + number2 + "</h1>"); sum is " + sum + "</h2>" ); difference is " + difference + "</h2>" ); product is " + product + "</h2>" ); quotient is " + quotient+ "</h2>" ); // --> </script> </head> <body> <p>Click Refresh (or Reload) to run the script again</p> </body> </html> Part 3 (b) Question 7.17 <!-Project 1 CSC309 ---------------Member #1 : Anthony Ku Ong (991040119) Member #2 : John Ngo (990991085) --> <!-- PART 3 Javascript --> <!-- (a) 7.17 Write a script that asks the user to enter two numbers, obtains the two numbers from the user and outputs XHTML text that displays the larger number followed by the words "is larger" in an information message dialog. If the numbers are equal, output XHTML text that displays the message "These numbers are equal". Use techniques in Fig 7.15 --> <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>PART 3(b) Question 7.17</title> <script type = "text/javascript"> <!-- var firstNumber, // first string entered by user secondNumber, // second string entered by user number1, // first number number2, // second number largest; // larger number // read in first number from user as a string firstNumber = window.prompt( "Enter first integer", "0" ); // read in second number from user as a string secondNumber = window.prompt( "Enter second integer", "0" ); // convert numbers from strings to integers number1 = parseInt( firstNumber ); number2 = parseInt( secondNumber ); // display the results document.writeln( "<h1>The First Number is " + number1 + "</h1>"); document.writeln(" <h1>The Second Number is " + number2 + "</h1>"); //Finds the largest number by comparing each pair. if(number1 > number2) largest = number1; else largest = number2; //The case where the numbers are equal if(number1 == number2) document.writeln( "<h2> These numbers are equal</h2>" ); //When they are not equal, we know what the largest number is else document.writeln( "<h2> " + largest + " is larger " + "</h2>" ); </script> </head> <body> <p>Click Refresh (or Reload) to run the script again</p> </body> </html> Part 3 (c) Question 7.20 <html> <head> <!-Project 1 CSC309 ---------------Member #1 : Anthony Ku Ong (991040119) Member #2 : John Ngo (990991085) --> <script type ="text/javascript"> <!-- document.write("<pre> </pre>"); document.write("<pre> </pre>"); document.write("<pre> </pre>"); document.write("<pre> </pre>"); document.write("<pre> </pre>"); document.write("<pre> </pre>"); document.write("<pre> </pre>"); document.write("<pre> </pre>"); document.write("<pre> </pre>"); --> </script> ********* *** * * * * *** * * * * * * * * ***** * * * * * * * * * * * * * * * * * * * * * * * ********* * *** * * * * * * * * * * * * * * * </head> <body> </body> </html> Part 3 (d) Question 7.26 <!-Proejct 1 CSC309 ---------------Member #1 : Anthony Ku Ong (991040119) Member #2 : John Ngo (990991085) --> <!-- PART 3 Javascript --> <!-- (d) 7.26 Write a script that reads 5 integers & determines and outputs XHTML text that displays the largest integer and the smallest integer in the group. --> <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>PART 3(d) Question 7.26</title> <script type = "text/javascript"> <!-var firstNumber, // first string entered by user secondNumber, // second string entered by user thirdNumber, fourthNumber, fifthNumber, number1, number2, number3, number4, number5, largest, smallest; //third string entered by user //fourth string entered by user //fifth string entered by user // first number // second number // third number // fourth number // fifth number // current largest number // current smallest number // read in first number from user as a string firstNumber = window.prompt( "Enter first integer", "0" ); // convert number from strings to integer number1 = parseInt( firstNumber ); // read in second number from user as a string secondNumber = window.prompt( "Enter second integer", "0" ); // convert numbers from strings to integers number2 = parseInt( secondNumber ); // read in third number from user as a string thirdNumber = window.prompt( "Enter third integer", "0" ); // convert numbers from strings to integers number3 = parseInt(thirdNumber ); // read in fourth number from user as a string fourthNumber = window.prompt( "Enter fourth integer", "0" ); // convert numbers from strings to integers number4 = parseInt(fourthNumber ); // read in fifth number from user as a string fifthNumber = window.prompt( "Enter fifth integer", "0" ); // convert numbers from strings to integers number5 = parseInt(fifthNumber ); //Finds the largest number by comparing each pair. if(number1 >= number2) largest = number1; else largest = number2; if(number3 >= largest) largest = number3; if(number4 >= largest) largest = number4; if(number5 >= largest) largest = number5; //Finds the smallest number by comparing each pair. if(number1 <= number2) smallest = number1; else smallest = number2; if(number3 <= smallest) smallest = number3; if(number4 <= smallest) smallest = number4; if(number5 <= smallest) smallest = number5; // display the results document.writeln( "<h1>The five numbers entered + number2 + " " + number3 + " " + number4 + " " document.writeln(" <h1>The largest number is " document.writeln( "<h1>The smallest number is " + "</h1>" ); are: " + number1 + " " + number5 + "</h1>"); + largest + "</h1>"); + smallest </script> </head> <body> <p>Click Refresh (or Reload) to run the script again</p> </body> </html> PART 4 – Style: Address the following research question. a) [5] We have discussed the importance of style in class. Choose a product or service of your choice and compare the web sites of three competing companies. Present a table that lists the advantages and disadvantages of each company’s website with respect to style. We have chosen our product to be Doughnuts. Company 1: Dunkin Doughnuts http://www.dunkinDoughnuts.com Advantages Disadvantages 1) Balance: There were not a lot of heavy images and the logos and pictures that were displayed had colors such as purple and pink that was offset by a white background. 1) Navigation is pretty bad. It took a while to find any information about “Doughnuts”. Apparently it was under the “nutrition” section of the page, and it didn’t have a separate “doughnut” page. What they did have on the left column was two heading “Shop for Coffee” and “Shop for Gifts”. I think that this is misleading because coffee and gifts are not the only two major items that Dunkin Doughnuts sells. 2) Text Position: The location of the “Features” and special product were positioned on the top right of the screen where most people look at (as discussed in lecture). 3) Color scheme: The Purple complemented the pink that was on the page. 4) Legibility: The size of the font was not too small, readable and spaced out. It was distributed about the page equally. The white space helped so the text wasn’t too clumped especially since there was quite a bit of text on the page. 5) The load time of the page was pretty quick since the graphics on the page were very small. 2) Clarity and Simplicity: The page has a fairly simple design, yet the main links were not clear, and had heading such as “Delivery Program” and “By the pound” under their “Shop for Coffee” section. As mentioned in class, we need to organize the website as if it were a real store. A real store wouldn’t be this confusing to navigate through. 3) Artistic and Original Design: By looking at the Doughnuts Industry, I thought that the colors used were very colorful and “child” like. The fonts used looked like crayon scribbles and were not appropriate to the appropriate demographics. Most people who come to buy doughnuts or coffee are middle aged people. 4) Color Scheme that matches: The Color scheme did match, however the purple and pink theme gave an impression that the site was catered to children, and not to the appropriate demographics. Company #2: Tim Hortons http://www.timhortons.com/ Advantages Disadvantages 1 Design and Demographics: The main page had an option to enter the page in “English or French”. Thus they have considered their audience. 1 Design and Demographics: The main page had an option to enter the page in “English or French”. Thus they have considered their audience. 2. Balance: I found the pictures and the text on the page balanced. The coffee cup on the bottom of the menu, along with the top brown banner on top of the page frames it, so your eyes are kept to the center of the page. 2. Balance: I found the pictures and the text on the page balanced. The coffee cup on the bottom of the menu, along with the top brown banner on top of the page frames it, so your eyes are kept to the center of the page. 3. Legibility: The size of the font was not too small, readable and spaced out. It was distributed about the page equally. The white space helped so the text wasn’t too clumped especially since there was quite a bit of text on the page. 3. Legibility: The size of the font was not too small, readable and spaced out. It was distributed about the page equally. The white space helped so the text wasn’t too clumped especially since there was quite a bit of text on the page. 4) Color Scheme that matches: The Color scheme of the brown, and yellow did match the background which was white. These are the colors associated with coffee and old age. 4) Color Scheme that matches: The Color scheme of the brown, and yellow did match the background which was white. These are the colors associated with coffee and old age. Company #3: Krispy Kreme http://www.krispykreme.com/ Advantages Disadvantages 1) Color themes: I found that this page used a good color scheme that suited their audience. The pictures were unbiased and catered to both the young and the old. This is unlike Tim Hortons whose color theme and design was very dull (it appeared to cater to those who were of an older audience). This is also unlike Dunkin Doughnuts which was the other extreme, and their colors theme to indicate a younger audience. 1) The load time of the page was heavy since it contained a lot of graphics. Customers may not appreciate the long wait especially if there is traffic on the page. 2) Simplicity in Menu: The page is very simple in terms of design. The organization of the page is really good because the website is organized as if it were a real store or business! (As mentioned in class). This is because it is clear where to get information about the products they sell. By having their main menu options as the items they sell, such as “Doughnuts”, “Coffee”, and “Collectibles”, its similar to how their menu would be subdivided in the store itself. 3) Navigation: This is far best one of the best aspects since they have eliminated their navigation to only six links, and they have considered what interests people. Notice that “Krispe Kreme” and “Doughnuts” are the first items because this is what customers would like to get information about. In other words, the navigation is organized in order of importance which I think makes it easy to find what you are looking for. 4) Legibility: The size of the font was not too small, readable and spaced out. It was balanced with nice big pictures. 2) Placement of text: The most important information is not on the top right of the screen, in fact most of it is on the bottom middle, or bottom right which isn’t the best strategy according to what was said in class. Most of us look at the right top, and scan to the left. 3) Inconsistent Colors: I found that the colors used for each page wasn’t consistent and that some of the colors seemed to be arbitrary. 5) Clarity using good User Interface: I liked the fact that in many places of the site such as the doughnut selection, you could run over your mouse to select the different types of doughnuts and get information for each of it. It was very appealing by using pictures to describe the product and only giving you information when you put your mouse over the picture. b.) Suppose you were hired to create a website for a new company that sells the product or service from part a. Based on your study in part a, describe the design that you feel will be optimal for this company with respect to marketing. Answer: We have to keep in mind that the type of industry that we want to enter in is the “donut industry” therefore our recommendations should be aimed to improve the marketing of this. From observation from section 4a, I believe that an important aspect of designing our website is having a constant color theme within the entire site. This means that all the website should follow the theme you have chosen. Moreover, I think the color scheme should complement each other. What I mean by this is that if you have chosen a bright color in one of your aspects of the website then you should balance it out with a dark color. We do not want to have our website to have too bright or too dull of a color combination. Also in choosing your color you want to pick a something that can attract more customers as possible. As a result we should pick neutral colors that can attract the tastes of majority of the population. Another thing that we want to implement in our website is to have a site with a sizable amount of pictures showing our product. Since we are selling donuts, our customers want to see the donut they wish to purchase and eat. However, we should be careful with the size and amount of pictures we want to put on the site. We do not want to over-flood the site with pictures and cause older machines and slower Internet users to have a hard time accessing our page. We also want to put a small description beside our products to let the user be aware on what the specifications of our products. The font sizes we plan to use should be not too small, must legible and informative. Following the concept of Krispy Kreme that we mentioned above, they have eliminated their navigation to only six links, and they have considered what interests people. In other words, the navigation is organized in order of importance which I think makes it easy to find what you are looking for. This is the type of navigation system we plan to implement. It looks simple but sorted in a way that is comfortable to the user. The website should also be artistic. This is a good way to attract customers regarding your site. However, we would like to be careful on what artistic elements we wan to implement in the site. We have to choose something that is contemporary and would appeal to the current generation of customers. We are planning to use fashion trends on what people want today and implement these designs in the web page. We will definitely find a good web-hosting server. We do not want annoying popups that drive customers away. We’re a reputable donut company and probably would spend a bit to improve on this aspect of our marketing.
© Copyright 2026 Paperzz