ITI Home Page  

Education: 

Information Technology Institute (ITI)

Web Presence

The web presence project was designed around a real world web site development situation.  For the project we developed a simulated  web development company (Forward Multimedia Inc.) consisting of 6 team members.  We decided to develop a site for a fictitious wine and spirit importer, called the House of Castagliari, based in Europe.  The rationale for the the client company's desire to development a web presence was to expand operations to North America whilst maintaining a high end image.

Upon completion the team presented the project to a fully E-commerce wine merchant.   The response we received from the owner of Discovery Wines was very positive.   The final step was a presentation to both our fellow students and facilitators.

The team decided that our goals were to build an E-commerce site, with a very clean and sophisticated appearance.  We also wanted to utilize a graphical animation program to create a high impact introduction.  We then carried out research on similar web sites, discussing there attributes both for and against.  We also looked at sites which utilized similar techniques to the ones we wanted to incorporate.  From here we generated a rough web site plan.  Over the following 4 weeks we developed our initial ideas and refined our site design.

Skills Developed

Site Guided Tour

The first page in our site was used to detect the users browser and depending on the type of browser, inform the user that the site was best viewed with Internet Explorer.   The screen also allowed the user to bypass the Flash movie if they did not have the Flash Player plug in.

The Flash movie consists mainly of animated text to generate an eye catching introduction.   Click here to view the movie.  Use the movies enter button to return to this spot.

Flash Introduction

Screen Shot from the Flash introduction

After the movie the user enters the main page that consists of two frames.  The left frame is used for site navigation and is constant through out the site.  This was done to allow the user direct access to any section of the site from all the site pages.  It also created a consistent look for the site.  The right frame was used to present the content.

wpe6.jpg (18060 bytes)

Main Page

The History page presented a short family history of the Castagliari's and the formation of the company.  The Product pages were organized in to product types.   By moving the mouse over the different product types,  product summary information appears at the top of the screen.  On selecting a product a second navigation bar appears allowing navigation to the different product brands.

Product Brand Information

Cognac Brand Page

On mouse over of a product brand (for example Courvoisier) a short product history is displayed in the right most frame.  On clicking the brand the right frame is filled with product information.

Courvoisier Brand Details

The Courvoisier Product Page

The Aficion page was included to encourage the audience to try new high quality wines and spirits by telling them how to appreciate the different products and which foods complemented the different wines.

Product Appreciation

Appreciation Page

The News section allowed the advertising of recent  industry news, events and product special offers.  It was also an opportunity to use scrolling ActiveX component. 

The final section in our site is the orders pages.  These pages use use ASP server side validation.  This avoided the standard windows popup boxes and helped to maintain the high end feel of the site.

wpe3.jpg (22735 bytes)

wpe6.jpg (18697 bytes)

Orders Pages

The Castagliari logo present in the corner of the screen shots was used to aid site navigation of the products.  As the user scrolls up and down the pages the logo maintains position therefore it is always available.  If the logo is clicked an ActiveX menu appears listing the different product types.  Clicking on any of the items takes the user directly to that product type instead of having to go through the main product pages. 

E-Portfolio Home Page . ITI Home . Web Presence . Visual Basic . Visual Age for Java . Oracle 8i . Web Development . Database . Application Development . UML and GUIDS . RFP and Proposals