Information Technology - Creating a Web Site
A level Information Technology
Creating a Web Site
Minor Project
WEB SITE PROJECTS
A. MARKING & GRADE BOUNDRIES
Both minor projects are marked out of 45 broken down as follows:
Analysis & Design
3
Implementation & Testing
23
Evaluation
9
It is important to carry out thorough analysis before embarking on the implementation as, the Chief Examiner has pointed out, many brilliant pieces of practical work have scored badly because they have not been thoroughly documented. Similarly, the testing needs to be extremely thorough, covering all aspects of the system. Note that the Evaluation is worth 9 marks (20%) of the overall grade! It should not therefore be confined to a single page where you pat yourself on the back for a job well done! Read the notes on the evaluation section very carefully so that you understand how to gain maximum marks from this section.
As a rough guide to what the marks mean in terms of grades, in the 1999 examinations the following marks out of 45 were needed to obtain:
Grade
Mark (out of 45)
A
32
B
28
C
23
D
7
E
2
N
7
B. AIMS
The aim of the minor project is for you to demonstrate your ability to tackle a REAL problem and implement an effective IT solution. For this reason you need a real end-user who will be able to test your solution and assess how effective you have been in meeting their objectives.
C. BASIC GUIDELINES
Your project should roughly follow the stages in the System Life Cycle of development - 1. Analyse 2. Design 3. Implement 4. Test (& refine) 5. Document 6. Evaluate. To gain high marks you need to document the system at each stage of its development. You can use the structure of headings and side headings given below as a guideline of how to document your project. This is only a guide, and you may well choose to add your own sections or subsections.
PART 1 - ANALYSIS
SECTION 1 - INTRODUCTION & BACKGROUND TO THE PROBLEM
.1 THE ORGANISATION
Give a brief introduction outlining information about the organisation you will be dealing with. This might include: nature of business; location; size etc. It should also include the name and/or position of the person within the organisation who will act as your end-user.
6.3 BACKGROUND TO THE PROBLEM
Provide a "Problem Statement" outlining the problem that the end-user wants to solve. This section needs to be as detailed as possible and should really include some evidence that the needs of the end-user have been fully discussed and evaluated ( a pro-forma questionnaire or the transcript of an interview would suffice). If possible include, as detailed as possible, an overview of the current system (if any). In the case of a web site the main need of the end user is likely to include: increased exposure to a wider market; a reduction in the costs of promotion; a perceived need to establish a web presence; better methods of dealing with customer orders/enquiries/grievances (i.e. better customer communication); easily updateable publicity material. You should try and summarise the end-user's requirements into one or two paragraphs.
6.4 CONSIDERATION OF ALTERNATIVE SOLUTIONS
Compare at least two alternative solutions, identifying the benefits and drawbacks of each. In the case of WWW projects this would include comparing a web site with a printed catalogue or brochure produced using DTP. The WWW far outweighs DTP in most respects but don't forget that it also has its drawbacks: not everyone has access to the WWW; some technical expertise needed to maintain site; cost of hosting/domain name; customers need to be aware of existence etc.
6.5 CHOSEN SOLUTION
Based on an objective decision choose one of your solutions justifying your decision. If possible go back to the end-user to get their ideas about your chosen solution and to gauge exactly what they would be looking for from a web site (this might include: corporate identity; specific content to be included; record of number of visitors; easily found by casual surfers; easy to remember URL; specific content to be included; method of feedback; on-line ordering, minimise cost etc.) They may need prompting for ideas! End this section with a list of agreed user requirements.
SECTION 2 - INVESTIGATION
2.1 INTRODUCTION
Identify exactly what you intend to investigate in this section i.e. the factors that make a "good" web site and the techniques used by other web site developers. You should note that before you begin your own project you'll be looking at existing sites to get some ideas about what works well and what not so well. Explain the factors you'll be looking for in your investigation. These might include (time to download, use of colour and/or fonts, images used, method and ease of navigation, content, consistency across the site, animation and/or sound, search engine placement etc.) You can use this list of factors as a method of comparing the sites you look at.
6.3 WEB SITE INVESTIGATION
Compare at least 3 web sites using the criteria set out above. Detail what works well (e.g. no need to scroll down to find info; navigation always available; good use of colour to highlight key points, fast download; interesting features (feedback/ordering form, counter, site map, site search) etc. and be critical about what is poor (in your opinion): font difficult to read against background; images take too long to download; poor layout; features don't work (e.g. flash movie won't play because a plug in is missing). Make sure you evaluate both the technical ...
This is a preview of the whole essay
6.3 WEB SITE INVESTIGATION
Compare at least 3 web sites using the criteria set out above. Detail what works well (e.g. no need to scroll down to find info; navigation always available; good use of colour to highlight key points, fast download; interesting features (feedback/ordering form, counter, site map, site search) etc. and be critical about what is poor (in your opinion): font difficult to read against background; images take too long to download; poor layout; features don't work (e.g. flash movie won't play because a plug in is missing). Make sure you evaluate both the technical and aesthetic qualities of the site. The web site URLs below analyse some of the best (and worst) sites on the WWW.
http://www.devry-phx.edu/webresrc/webmstry/stylbest.htm
http://www.horrible-web.com/info.html
The second site also contains a checklist of things to avoid. Search www.infoseek.com for "web site design" for more sites based on web site design ideas.
6.4 CREATING A WEB SITE
Most of the web sites you looked at above will have used a combination of different techniques to produce their pages as HTML is limited in what it can do. The aim of this section is to show that you understand what your chosen package (Frontpage 98) is and isn't capable of. It should basically be an overview of current web techniques and/or technology available to web site builders and what each is capable of. Start by explaining what HTML is and what it does. You can break down the rest of the section into sub-sections which could cover supplementary tools used to create web sites: Java applets; Javascript, CGI scripts, Flash Movies, Image types (GIF, JPEG, PNG), Image Maps, Frames Pages, DHTML, ASP. Try to find sites using some of these techniques and use screen shots to illustrate your explanations. The web site www.whatis.com provides definitions you can use to explain the various tools and techniques available.
6.5 FACTORS AFFECTING PAGE LAYOUT
It is possible to create a visually stunning web site of no practical use whatsoever! This is because what you design and what the web user actually see depend on a range of factors. The aim of this part of the project is for you to show that you understand the factors you need to take into account when designing your pages (this is very important as it will largely affect the objectives section). You could divide this into subsections covering: screen resolution; use of frames pages; image types and file sizes; browser compatibility; browser settings; use of plug-ins (flash, real player etc.); non-standard fonts etc. Examples of how you could complete this section include:
Factor
Example
Image type and size
64 bit (16 million) colour produces the best quality images but if an image only contains 250 unique colours it would be better coverting it to an 8 bit image (max 256 colours) which uses less bandwidth (i.e) is a smaller file and therefore downloads faster
Frontpage active elements e.g. Scrolling marquee
Don't work in Netscape browsers
Screen resolution
800 x 600 gives sharper quality and allows you to see more on the screen at once. But many users have their monitor resolution set at 640 x 480 meaning they wont see part of your page without scrolling.
Non-standard fonts
Windows comes supplied with a set of standard fonts. If you use a non standard font (say one supplied with your printer) the end user wont see it unless he/she has it installed on their own machine
Frames
Some older browsers don't support the use of frames
Browser settings
Modern browsers such as IE4+ and Navigator 4+ allow the user to alter many of the browser settings e.g. graphic display can be disabled or javascript can be prevented from running
3rd Party Extensions
A number of multimedia effects such as streaming video/audio require the user to have a plug-in (extra program) installed onto their PC. Examples include Real Audio, Vivo video, Flash movies
The web pages:
http://www.dsiegel.com/tips/
http://www.projectcool.com/developer/
http://www.efuse.com/Design/
http://www.web-writer.com/tips.htm#design
http://www.ubc.ca/guide/guide.html
all provide a good guide of the factors you will need to take into account.
SECTION 3 - OBJECTIVES AND PLAN OF PROCEDURE
3.1 OBJECTIVES
Draw up a series of objectives for your web site design taking into account the end-user's requirements (section 1 - part 4), your analysis of exiting web sites (section 2 - part 2) and your knowledge of what factors will limit your design (section 2 - parts 3 & 4). This part of the project should be divided into 3 sections:
3.1.1 GENERAL OBJECTIVES
A simple list of what the end-user wants to achieve (refer back to section 1 - part 4). This can then be broken down into:
6.3.1 QUANTITATIVE OBJECTIVES (Objectives you can measure)
These can include a minimum download speed using different modem connections, visibility at different screen resolutions, text/images displayed in the correct position, compatibility with different browsers, page visible without scrolling, search engine placement, ability to record number of visitors, working search facility, on-line feedback or order form, correct fonts displayed, 100% accuracy (spelling), own domain name. Where possible refer back to your investigation i.e. screen resolution.
6.3.2 QUALITATIVE OBJECTIVES (Concerned with aesthetics)
These are subjective objectives (i.e. they depend largely on the view of the end-user). They might include: corporate identity maintained/established; are they happy with the general look and feel of design; ease of navigation; ease of updating information and or/maintaining the site.
If possible you should discuss these objectives with the end-user and get them to sign below the objectives to show they agree with your interpretation of their requirements.
6.4 CONSTRAINTS
Note here any constraints that will affect your progress with the project. These fall into 3 sections: availability and specification of hardware; availability of software; and end-user expertise. Note the equipment to be used at home, school and the organisation. Don't forget to include whether or not the organisation already has an internet connection and whether they have any available web space.
In this part of your project You can include a comparison of web design packages if you intend to use an alternative to Frontpage.
6.5 SCHEDULE
Draw up a detailed schedule for completing the project (this will probably be in the form of a Gantt chart). Make sure you include any sub-tasks that need to completed as well as major tasks e.g. implementation can be broken down by page and then by page content.
PART2 - DESIGN
SECTION 4 - DESIGN
4.1 INITIAL DESIGN IDEAS
Prepare a series of "rough" sketches for a series (three or more) different home page designs. The sketches should include different methods of achieving the same tasks (for example, different methods of navigation) and any detail relevant to the design (background colour or image, font/size to be used, spacing (in terms of % of screen), image placement etc.
6.3 CHOOSING A DESIGN
In discussion with the end-user you need to choose one of the designs for further development. When choosing the design you need to explicitly state any factors, which the end-user needs to take into account before making a final choice, based on your earlier analysis, e.g. an image heavy design will take a long time to download. You could prepare this section as a table:
Design No.
Benefits/drawbacks
User Comment (if applicable)
Choice (tick one)
2
3
6.3 DETAILED DESIGN SHEETS
After choosing a "rough" design idea to work from you need to complete a detailed design for each page in the site. These designs should include any "background" elements that the user wont see when viewing the page (such as tables with borders set to 0 to arrange elements on the page) and annotation to show elements that aren't clear from the design sheet (such as rollover images or animated GIFs). Make sure you include a "site map" diagram to show the links between the pages in the site.
Each element on the site needs to be referenced or numbered on your layout sheets. For example, an image on the homepage (page 1) might be numbered 1.1. The reason for this is that as the design progresses to implementation you will need to refer back to individual elements of the design. NOTE: Elements that appear consistently, for example, body text, only need to be referenced once.
6.4 MICROSOFT FRONTPAGE 98
Explain the features that are available in Frontpage 98 that CAN be used to implement your design ideas. Full marks can only be awarded for Analysis and Design if you "...indicate an appreciation of the appropriate software available and also, its limitations. There is an explicit statement of how the named software application is to be used." You should also explain which elements of the site will HAVE to be created with different tools such as javascript.
6.5 PLANNING FOR IMPLEMENTATION
Draw up a detailed schedule for implementation of the site, noting any important factors to take into account. The aim of this section is to help you break down a major project into a number of smaller more manageable subtasks. This section includes two parts; preparing content for the pages and detailing how the content will be put together.
6.5.1 PREPARATION
The aim of this subsection is to prepare the fonts, colours text and images to be used on the page:
a. Produce a printed page of different fonts and show which you intend to use e.g.
Times New Roman
Arial
Verdana
Use for body text
Matisse ITC
Lucida console
Impact
Use for headings
b. Once you have chosen a font compare it in different colours against different coloured backgrounds to find which are easy to read and which aren't. Again a simple table will suffice. You could get your peers to give you some feedback.
If possible involve the end user in your choice of font and colour scheme.
c. Scan and optimise any images that you will be using. Remember there is a trade off between quality and file size (download time). It is highly unlikely that you'll need to use 64 bit images as the human eye can't distinguish this many colours. E.g.
Image name = logo
64 bit
ACTUAL IMAGE
xxxxx bytes
32 bit
ACTUAL IMAGE
xxx bytes
6 bit
ACTUAL IMAGE
xxx bytes
8bit
ACTUAL IMAGE
Xx bytes
d. Prepare any text to be used as simple text files that can be copied and pasted into the web pages.
6.3.1 TASK PLANNING
A series of well-prepared tables will cover everything you need to include in this section. For example:
Page 1 - index.html
Task
Notes
Create 4 x2 table
Set width to 100%
Set border = 0
Background = default
Insert image
Image name = "logo.gif"
Table cell = (1,3)
Image size = 42w x 32h
Align = centre, top
Transparency = RGB value
Alt = "company logo"
6.3 TEST STRATEGY
Testing is an extremely important part of the project and is where most marks are lost. A testing strategy should be in place BEFORE you begin implementation. There are two types of testing to be carried out - unit testing and integration testing. Refer to section 6 for notes on the difference.
In this section you should start by explaining why testing needs to be carried out and then outline, in detail, he individual tests you intend to carry out in order to make sure:
6 You have fulfilled your objectives
7 You have produced a fully functioning site
An example of a unit test is given below.
UNIT TEST 1
Nature of test
Reason
Expected result
Actual Result
Comment
View in IE4 and Netscape
No scroll bars should be needed to see entire page
Whole page visible without scrolling
PART 3 - IMPLEMENTATION (TECHNICAL DOCUMENTATION) & TESTING
SECTION 5 - IMPLEMENTATION
6.3 TASK IMPLEMENTATION
Explain, making use of screenshots, how you pages have been constructed. This section should be as detailed as possible and cover ALL the steps needed to construct the web pages. NOTE: This section should be a guide as to how you have used Frontpage to create your site rather than a guide to Frontpage in general. The marking criteria specify that to gain full marks on this section "... the design could be used by a competent person for implementation".
Particularly important in this section are any changes that you made as the implementation progressed. For example, if an image resolution changed because it was taking too long to download make sure you document the changes.
Be systematic in your approach - take one page at a time and take time to explain why you have used a certain technique (if applicable). Don't forget to include minor details such as page names, background colours etc.
It is not necessary to include printouts of the HTML unless it has been manually changed - if you are trying to get the site placed on a search engine you will have to manually add the meta tags to the <Head> section of the home page. If you have used javascript the code should be printed and annotated.
Don't forget to include details about how the site was uploaded and if applicable how it's domain name was registered.
6.4 USER GUIDE
Your site should not be a one off exercise. The end-user should be able to update the site at a later date and therefore needs a simple guide of how to create a page and then upload it to the web. Your user guide should explain what each file in the site contains in terms of content, embedded images and links and how to open the files and make changes. For high marks you should consider creating a series of templates that the user simply adds content to and then explaining how to create a hyperlink on the home page. You must include instructions for uploading the pages to the site.
Remember this is a guide to maintaining an existing site NOT a guide about how to use FrontPage.
PART 4 - TESTING
SECTION 6 - TESTING
6.1 UNIT & INTEGRATION TESTING (Carried out by you)
Recall your test plan and complete the remaining two columns (Actual Result and Comment).
UNIT TESTING - Tests individual elements of the web site e.g. does an image display in the correct position? Is all spelling correct
INTEGRATION TESTING - Tests how different elements in the site interact e.g. Does a hyperlink work? Does a feedback form send an e-mail?
The results of the testing MUST be supported by EVIDENCE. It is not enough to simply say the site worked well. The "Comment" section is there for you to cross reference the test results to evidence e.g.
UNIT TEST 1
Nature of test
Reason
Expected result
Actual Result
Comment
View in IE4 and Netscape
No scroll bars should be needed to see entire page
Whole page visible without scrolling
Scroll bar visible in Netscape
See appendix 1 page 55
On page 55 you should have a screenshot of the page in both IE4 and Netscape. If possible try to explain why (if applicable) expected and actual results where not the same - in this case it is because Netscape doesn't support the margin tag that allows you to set a top margin of 0.
Be as rigorous as possible in your testing. Don't just test download time once - do it repeatedly, at different times to get an average speed. Test the site on different machines, at different resolutions, with different browsers, with different browser settings, follow all the hyperlinks, make sure the counter updates when the page is refreshed, check on-line ordering and/or feedback forms, make sure table borders aren't visible.
6.2INDEPENDENT TESTING
There are a number of organisations that will test your site for you:
http://www.websitegarage.com
This will provide you with independent test data.
6.3 END-USER TESTING
The above test the quantitative objectives of your site design - they can all be observed and measured. To test the qualitative objectives you will need to provide a questionnaire for the end-user to complete e.g. was it easy to navigate, was it easy to update, happy with layout etc.
PART 5- EVALUATION
SECTION 7 - EVALUATION
In this section of your project you need to critically evaluate your project in an intelligent manner. You gain marks for considering the limitations of your solution and recognising where improvements could be made. To gain high marks "outcomes must be evaluated against performance criteria" - i.e. the success of your project must be judged in light of your original objectives.
7.1 AIMS AND OBJECTIVES
Relist your original aims and objectives. Under each objective describe how successful you have been in meeting the objective. Your evaluations should be cross-referenced to other pages in the project to support your argument e.g. If the objective was to download the home page in less than 30 seconds and you succeeded refer to page xx in the testing section which shows the websitegarage results showing your page took only 23 seconds to download.
7.2 LIMITATIONS
Is the solution limited in any way? Would it be difficult for the end user to make radical changes? Would you have liked to add other features but either didn't have access to the necessary technology e.g. Flash movies.
7.3 ENHANCEMENTS
In light of the limitations and if you had more time how would you improve the site or the way the end-user interacts with the site? Would you create more templates? Would the site benefit from having its own domain name? Would you put it on a faster server? Could the graphics be improved (in terms of size/quality)? Would a better HTML editor allow you to achieve more (for example the use of layers in Dreamweaver)?
