Project 3

Page 1

Internal assessment: Example 1

Student work: Criterion A

Transcripted notes of interview with Keith Findlater Date: February 4th, 2008 Describe your business Photography, working as a self‐employed photographer for a number of clients such as the local council, friends and contacts made locally. What problem(s) does your business face? Business is not growing as quick as I would like. I need to make more people aware of my services. At the moment, I have to work a daytime job to cover costs so I can only work on the business in the evenings and on the weekends. What ideas are you thinking about using to solve the problem? Flyers posted through local doors Advertisement in the local papers Advertisement in shop windows Website Describe each of the ideas in more detail I could create a flyer that would be posted through doors in the local area. I would probably start with 500 and see how much response I get. If it is successful, I would increase the number printed and cover a larger area. The advert would be placed in a number of local papers and would run for a month. If it is successful I would increase the number of papers I use or I will expand to advertising in photographic magazines. I could place advertisements in shop windows. The shops in York would be particularly targeted because they have a large number of people visiting them. The success of this approach could be evaluated after a month and a decision taken on whether to continue. A website could be created that would, after set up, require the least maintenance. It would also be possible to show examples of my work and be visible to the maximum number of people. I could also list all of my services as well.

Information technology in a global society teacher support material

1


Internal assessment: Example 1

Student work: Criterion A

Criterion A: Initial investigation Summary of problem My uncle, Keith Findlater (client), is a local photographer. His business currently relies on ‘word of mouth’ advertising among his family, friends and the people who have used his photography and consultancy services. At the moment Keith is not making sufficient income from his photography business for him to develop it further. In fact, he has been forced to take on another job to make up for the shortfall in income from the business. Keith believes his photography business would be more successful if he could reach a wider audience and make them aware of his photography and related services including his consultancy work (problem). An interview was carried out with Keith on 4th June 2008. Explanation of inadequacies of current situation As Keith states in his interview, “Business is not growing as quickly as I would like, I need to make more people aware of my services.” Because Keith has had to take on a full-time job to cover costs, he can only work on the business in the evenings and at weekends”. He also said “I need to make it possible for more people to see my photographs. Only then can I get business to pick up”. It is hoped that by providing Keith with an IT solution to the problem that he will eventually be able to work on this business on a full-time basis. Word count = 231

Information technology in a global society teacher support material

1


Internal assessment: Example 1

Student work: Criterion B

Criterion B: Analysis Proposed solution Keith and I initially considered the following options:  Flyers posted through local doors  Advert in the local papers  Advert in shop windows  Website using software on my computer eg. Microsoft Word, Notepad, Adobe Dreamweaver  Use of pre‐designed web based templates and using Web 2.0 tools After discussing the advantage, disadvantages and feasibility of the various solutions, Keith and I chose to create a website.

Requirement specification IT System requirements  Hardware – PC with Internet connection, memory stick for backup  Software – Notepad, Adobe Dreamweaver, Photo editing software such as Adobe Photoshop, web browser (i.e. Internet Explorer, FireFox, Opera), FTP software System interaction  The proposed website would need to work with the software on the ISP server  Ensure that his website functions correctly in a range of browsers such as Internet Explorer, Mozilla Firefox and Opera.  Dreamweaver is already installed on my PC. Input / output requirements Input requirements  Text about the business and references, personal profile and contact details will be provided by Keith.  Image files in jpeg format as thumbnails and full size for the galleries on the website: Architecture and Stained Glass, Portraiture and Fashion, Travel and Natural History Output requirements  Sections of the website to include Architecture and Stained Glass, Portraiture and Fashion, Travel and Natural History , home page, profile and services and contact information.  Consistent page layout with organizational colours and images  Images and text are to be displayed in a browser.  The thumbnails are to be clickable and linked to full size image files which then display in browser.  Alternative text to be provided for the images.

Information technology in a global society teacher support material

1


Internal assessment: Example 1

Student work: Criterion B

Processing  Clicking on the images to generate a full size image.  Clicking on the e‐mail link will generate a blank e‐mail  Clicking on menu items to navigate through the website Security  The website files would be secured against unauthorized access by the use of a username and password protected system as part of agreement with the ISP.  Images on the website are to be protected by including a watermark  The image is then saved as a JPG Specific performance criteria to test functionality To measure the effectiveness of website a) Provide an easily navigable system to showcase his photographs b) To create a website that has a consistent style throughout c) To create a website that provides an easy way to contact Keith to enquire about purchasing photographs d) To develop a secure method to avoid photos being copied and pasted by users without charge and hackers gaining access to the files stored online

Information technology in a global society teacher support material

2


Internal assessment: Example 1

Student work: Criterion B

Justification of chosen solution We believe the website will provide maximum access to Keith’s photography and services and at the same time resolve the lack of income of the business. Keith wants to provide a relatively cheap method of publicizing his work in a short timeframe to a maximum number of people. He feels that the use of a commercial solution, such as using a web design company may be too expensive for his limited budget and the income he obtains from the site will not pay for this work, even though it may be superior in quality to this solution. The alternatives such as producing a flyer, poster using desktop publishing software are not realistic as Keith still needs to work full time to supplement his income to pay his mortgage etc and would not be able to spend the time creating the paper product or finance the cost of distributing it. The newspaper advertisement is expensive and all of the advertising is in black and white which will not adequately display any images that Keith includes of his work. Keith also felt this was a better solution than using an online template as it gives his website more flexibility to reflect the creativity of his work. This website will allow for changes in his business direction to be publicized more rapidly and allow, eventually, for a method for customers to buy photos online I have chosen to do this project as I have used Dreamweaver a lot, have it installed at school and on my home PC. As I have used photo editing software in school and at home for many years. The clients PC has Internet Explorer and a connection to the Internet. The website will be secured by requiring it to be uploaded onto the Internet through a secure FTP connection, once it in place the ISP. Word count = 307

Information technology in a global society teacher support material

3


Internal assessment: Example 1

Student work: Criterion C

Criterion C: Project Schedule

Date

Action

Details

Date Criterion completed

Jan 2008

Initial discussion with the ITGS teacher

Comments and follow up

After discussion with my ITGS teacher my ideas were approved

Make an appointment to talk to Keith

18th Jan 2008

A

4th Feb

A

24th Apr

A

18th May

B, D

10th June

B

15th June

C

25th June

D

Feb 2008

Apr 2008

May 2008

June 2008

June 2008

June 2008

Keith mentioned he wanted to advertise his business and this may need an ICT solution

Carry out Initial research into discussion similar with Keith situations to Keith Go to the web First Solution(s) and look at Interview discussed and similar website with Keith website was chosen solutions First draft designs Check that completed and Second Keith has the approved by Keith. meeting photos and We agreed on what with Keith other info for he needs for the the website final product. Checked I had suitable hardware Learn how use and software to Dreamweaver Choose the develop the solution website. Made sure and I could learn what I Contact Keith feasibility needed to do in to get the study order to develop selected photos the website. and information Preferred solution justified Project schedule Agree on a developed schedule indicating key for ---------milestones in developing discussion with the product Keith Detailed product designs developed Think about Design the in discussion with how to test the product Keith. Agreement product signed off by Keith

Information technology in a global society teacher support material

1


Internal assessment: Example 1

June 2008

Develop Test plan to be the product developed (start)

Ongoing

Product developed

Oct 2008

Website uploaded

Oct 2008

Solution tested

Nov 2008

Solution handed over to Keith with training

Dec 2008

Jan 2009

Student work: Criterion C

Discussions with Keith as required during the development of the product Product complete and installed on web server Website handed to Keith and tested to see if it works Spent a morning with Keith in how to use and edit the website

Keith completed a questionnaire to Feedback give feedback on received whether the from Keith product met his needs Following the questionnaire and any other feedback Ideas for from Keith improving recommendations the website were made for further improvements to the website.

Information technology in a global society teacher support material

28th June

E

24th Sept

E

Vacation July Investigate copyright issue involved with the use of images

5th Oct

----

Make changes requested by Keith

18th Oct

E

-----------

3rd Nov

F

-----------

2nd Dec 2008

B, C, D, F

10th Jan 2009

E, F

2


Internal assessment: Example 1

Student work: Criterion D

Criterion D: Product design

Overall structure The following sketches show the design of the website that was approved by Keith Findlater.

Information technology in a global society teacher support material

1


Information technology in a global society teacher support material

Â

Internal assessment: Example 1

Â

2

Student work: Criterion D


Information technology in a global society teacher support material

Internal assessment: Example 1

Â

3

Student work: Criterion D


Information technology in a global society teacher support material

Internal assessment: Example 1

Â

4

Student work: Criterion D


Th Th Th Th

Th Th Th Th

BASELINE INFO

BASELINE INFO

Text provided by Keith

Th Th Th Th

Information technology in a global society teacher support material

Th – thumbnail image that renders on a click into a full size image in a new frame

Text provided by Keith

Th Th Th Th

Th Th Th Th

LINKS TO ALL OTHER PAGES

LINKS TO ALL OTHER PAGES

Th Th Th Th

TITLE BAR

TITLE BAR

Nature + natural history

portraiture + fashion

BASELINE INFO

Th Th Th Th

Th Th Th Th

Text provided by Keith Text provided by Keith

BASELINE INFO

Images provided by Keith for thumbnails

Text provided by Keith

LINKS TO ALL OTHER PAGES

LINKS TO ALL OTHER PAGES

Text provided by Keith

TITLE BAR

profile

TITLE BAR

index (home)

Internal structure

Internal assessment: Example 1

Th Th Th Th

Th Th Th Th

Th Th Th Th

Th Th Th Th

BASELINE INFO

Text provided by Keith Text provided by Keith

LINKS TO ALL OTHER PAGES

TITLE BAR

BASELINE INFO

Text provided by Keith

services + contact

TITLE BAR LINKS TO ALL OTHER PAGES

architecture

5

Student work: Criterion D


Resizing of images to reduce file space and speed up loading to Internet To enable image to appear on screen in a way similar to a pop up

To improve the visibility to search engines

To ensure consistency across each of the webpages

Manipulation of graphics

Use of Javascript to customize pages and improve functionality

Manipulation of HTML to customize pages and improve functionality

Use of Cascading style sheets

Provide information about the image when the user hovers the mouse over them

Use of rollover image

Information technology in a global society teacher support material

To enable prospective customers to be able to contact Keith

Creation of e‐mail link

Editing the code in the template in the editable To create customized webpages sub‐regions

Details

Images files: Keith to provide these files

Obtained from http://www.huddletogether.com/projects/lightbox2/

Allows the images to be rendered in a new window

Details

List of resources and techniques

Techniques

Data

Lightbox2 Javascript files

Resources

Internal assessment: Example 1

6

Student work: Criterion D


Test data

Webpages

.css file

Images and links to them

e‐mail hyperlink

Customised style sheet (1)

Customised style sheet (2)

Links to images

e‐mail link to Keith

Information technology in a global society teacher support material

Links between pages

Hyperlinks between pages function

Product testing

Webpages load File naming to ensure from the cover page homepage is called in three different Index.htm locations

Yes

Yes

No

All components of file appear on webpages Images load either in new window Compose e‐mail message box appears

Content of .css file File naming convention and hyperlink target Button or hyperlink

Yes

All pages have house style

Link to stylesheet in page headers

Yes

Yes

Links function as planned

Loads as required from 3 different locations

Actual outcome

Hyperlinks

Links on cover page are relative

Expected outcome

Test plan

Part of system tested

Cover page testing – REQUIRED ELEMENT FOR CRITERION G

Test item

Internal assessment: Example 1

Disabled by student on Keith’s wishes

Ref in product

Comments

7

Student work: Criterion D


I confirm that the requirement specification meets my needs and the designs above are appropriate for the creation of the product.

Agreement of client

Information technology in a global society teacher support material

Internal assessment: Example 1

(Client)

8

Student work: Criterion D


Internal assessment: Example 1

Student work: Criterion E

Criterion E: Product development Complex techniques used to address the client’s requirements: 

Manipulated graphics (pages 8‐9)

Use of Javascript to customize pages and improve functionality (pages 3, 6‐7)

Use of HTML to customize pages and improve functionality (pages 3, 5‐7)

Cascading style sheets (pages 3, 6)

Editing the code in the template in the editable sub‐regions (page 4)

Information technology in a global society teacher support material

1


Internal assessment: Example 1

Student work: Criterion E

Organisation of the website (Document object model) This indicates how the website is structured: Product files

Webpages

index.htm profile.htm

css files (css)

Design_3A files (jpg)

Img

Image test (jpg)

Common (gif)

Glyph (gif)

image files (jpg)

Lightbox files (js)

Javascript files (js)

Icons (gif)

css (css)

Images (gif)

Content has been placed in appropriate folders with logical folder names. For example, all the original images provided by Keith are added to the images folder. The images are all in one folder to make them easy to locate. Again this may need to be changed as more images are included so the image folders correspond to the webpages The webpages are all in the same folder as the homepage (index.htm), on a bigger site these pages may be needed to be placed in different folders to assist maintenance.

Information technology in a global society teacher support material

2


Internal assessment: Example 1

Student work: Criterion E

The structure and organisation of the webpages Technique: css The website was created using Adobe Dreamweaver and is relies on the use of a cascading style sheet file (.css). This file enables consistency between the pages. This makes it possible for each page to have exactly the same style, eg. heading style, text size and colour, spacing as well as enabling web pages to load faster as less code is located on the page. The stylesheet is inserted into the head of the webpage between the <HEAD> and </HEAD> tags. The style sheet is linked as follows: <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

This one style sheet can be referenced on many web pages and can affect every one of those pages. Statement

rel=”stylesheet”

href=”css/lightbox.css” Type=”text/css”

Media=”screen”

Meaning This defines the relationship between the HTML page and the stylesheet. This is the default relationship and is the preferred optio., Alternative stylesheets may be used they are referred to by a different name. This tells the browser to locate the lightbox cascading style sheet allowing this feature to be used This allows the page only to support css or text stylesheets, all others are not supported This is the default value for the (the default value), the presentation on non‐paged computer screens. Other media that may be supported are Braille, printer, projection and aural

The use of a cascading style sheet also allows for absolute positioning. This means that you can determine the order that a search engine spider will come to the text without affecting how the page is viewed in a browser. Below is an screenshot of the cascading style sheet (style.css)

Information technology in a global society teacher support material

3


Internal assessment: Example 1

Student work: Criterion E

Technique: editing templates Every page is based on a template which is part of the Dreamweaver package. This makes sure the layout, fonts, background colours, etc. on Keith’s website are the same. The template I have used is shown in the screenshot below.

The screenshot below shows the master template.

On this template, there are three editable regions, as follows:  “EditRegion5”,  “leftpage‐content”  “rightpage‐content”. This enables the content to be changed for each individual page.

Information technology in a global society teacher support material

4


Internal assessment: Example 1

Student work: Criterion E

The internal structure and organisation of the webpages Technique: use of HTML to improve functionality On each page divisions are used

First division called “container”

Second division called “navigation”

This shows the use of layers (indicated by the div tag) which allow valuable content required by Keith can be added to the pages such as text, images and other page elements. These can be placed it at the top of the source code for an added boost in prominence and relevancy. The use of layers also ensures maximum cross‐browser compatibility Each of the divisions has an identifier to allow them to be used to create CSS rules that, when applied, change the style and positioning of the layers. Each of the images is linked to the webpages as follows:

<a href="images/image-061.jpg" rel="lightbox" title="061"><img src="images/thumb-061.jpg" width="100" height="100" alt="" /></a>

Statement

Comment

This is the location of the image that the link will open when clicked This tells the browser to overlay an image in a rel="lightbox" box on the webpage, it does not create a new page title="061"> Title of the image The name of the image that forms the hyperlink, <img src="images/thumb‐061.jpg" when this is clicked the image named “image‐ 013A.jpg” will be opened on the window Alternative text that appears when the mouse alt="" hovers over the image The width of thumbnail image in pixels, this was width="100" reduced to 100 using HTML code from the original size of 504 The height of thumbnail image in pixels, this was height="100" reduced to 100 using HTML code from the original size of 360 Technique: use of Javascript to improve functionality <a href="images/image‐061.jpg"

Information technology in a global society teacher support material

5


Internal assessment: Example 1

Student work: Criterion E

To allow the photos to appear in the manner Keith required javascript code was used. This was taken from websites as open‐source code. The code for the lightbox function was taken from: Dhakar, Lokesh. "Lightbox2." Huddletogether.com. 03 Sep 2008. 25 Oct 2008 <http://www.huddletogether.com/projects/lightbox2/>.

Below is a screenshot of some of the instructions on the website, Lightbox2 I have used this technique because it places images above the current page, not within. It also automatically adjusts the size of the frame to fit the image. As the directions indicated in step 1 below I downloaded the three files. As the directions indicated in step 2 below I edited my HTML code to improve the quality of my website.

Information technology in a global society teacher support material

6


Internal assessment: Example 1

Student work: Criterion E

This was then pasted into the website and linked to the relevant files in the javascript folder.

Information technology in a global society teacher support material

7


Internal assessment: Example 1

Student work: Criterion E

Diagram to show relationship between the link from the image on the webpage (gallery.htm) and javascript functions

Image from gallery.htm images/image-061.jpg

On click the functions is “called”

The functions are:  Prototype.js  Scriptilicious.js  Lightbox.js

Image is rendered on webpage

Image 061 rendered on screen

Information technology in a global society teacher support material

8


Internal assessment: Example 1

Student work: Criterion E

Technique: Image manipulation All the images for the website were taken by Keith Findlater with his Nikon D700. In this case Photoshop was used to create thumbnail images. The original file was reduced in size and resaved as a thumbnail. The original image taken was 3264 x 2448 pixels (3.58 Mb). The resolution of this image was 180 pixels per inch. This was reduced to 504 x 360 to be used on the website with a resolution of 72 pixels per inch. See screenshot below:

I also reduced this image to a thumbnail which was 100 x 100 pixels.

Information technology in a global society teacher support material

9


Internal assessment: Example 1

Student work: Criterion E

The image size and resolution was reduced to increase the speed of loading of the webpage, reduce the size of the images that were required to be uploaded to ensure Keith did not exceed the allowance provided by his ISP. Many of the images, including this one had a poor colour balance and this was corrected by using the adjustments menu in Adobe Photoshop CS4.

Information technology in a global society teacher support material

10


Internal assessment: Example 1

Student work: Criterion E

The above images show the before and after results of using the adjustments of color balance and hue/saturation. To make these changes the following techniques were used: 

Lightness was reduced by 20%

Saturation was reduced by 20%

The level of red was increased by 32%

The level of blue was increased by 17%

The level of green was increased by 12%

Information technology in a global society teacher support material

11


Internal assessment: Example 1

Student work: Criterion E

Other information  Keith is aware that if he wishes to have webpages running file types such as .asp and .php, he will need to increase his subscription to the ISP. Currently he can only run basic webpages.  He has a restriction on the size of webspace allowed, but he is concerned that as he increases his website he may need to purchase additional storage. The website is uploaded using the ftp facilities in Adobe Dreameaver using the connection available in the software.

Connect

Put Get

This creates the activity indicated below:

The screenshot below shows the site definition for Keith. This allows him to change settings for the connection, the remote folder and any passwords needed to gain access to his site.

The images below show that the website has been uploaded and is available on the Internet.

Information technology in a global society teacher support material

12


Internal assessment: Example 1

Student work: Criterion E

Word count = 958

Information technology in a global society teacher support material

13


Internal assessment: Example 1

Student work: Criterion F

Criterion F: Feedback and future product development Client Evaluation Evidence of feedback with Keith following handing over of product A questionnaire was given to Keith on 1st November 2008 which he completed. Evaluation of specific performance criteria outlined in Analysis section (Criterion B) a) Provide an easily navigable system to showcase his photographs This objective has been partially met. The links to all pages are working, but there are temporary pages for the architecture and portraiture sections as not all relevant permissions have been obtained. b) To create a website that has a consistent style throughout This objective has met. This is a possibility for future development by adding additional pages and revising colour schemes. c) To create a website that that provides an easy way to contact Keith to enquire about purchasing photographs This objective has been met. There are e‐mail links (disabled in this example) on most pages to allow Keith to be contacted d) To develop a secure method to avoid photos being copied and pasted by users without charge This objective has been not been met. At the moment the images have not been made secure against being copied and pasted in their original forms. It will be necessary to add information to the photos to make this possible.

Information technology in a global society teacher support material

1


Internal assessment: Example 1

Student work: Criterion F

Recommendations for the future development of the product The website proved to be successful, Keith has noted there has been significantly more interest in his business, see success criteria above. Keith now believes that he can take his business further by developing four areas: 1. Development of the website to include architecture and portraiture 2. Development of a payment area on the website to allow customers to purchase photos online 3. Addition of information to images to prevent them being copied and pasted directly from the Internet 4. Development of secure client site Keith believes that the development of the payment area will allow him to sell his work to a much wider audience and to effectively to have a shop window open to the world. He appreciates that this will require more complex programming skills than he has and negotiations with both his bank and local small business advisor (see feedback) may make this possible to be funded. He also would like to increase the range of services offered, this would include using the website to publicise his portraiture work, something he has yet to address as he knows he will need to gain consent from the subjects before he can include them on his website. To do this he is aware that he will need to purchase specialised web hosting facilities as his current ISP will not allow webpages using the .asp format. Keith would like to create a secure site where existing customers can browse through a range of materials, that are not available to the general public. As above he will need to consider a new ISP.

Word count = 243

Information technology in a global society teacher support material

2


Internal assessment: Example 1

Student work: Criterion F

Questionnaire to gather feedback from Keith Findlater Question 1 Are you pleased with the final product? 2 What are the strengths of the website?

Yes/No Yes

‐‐‐

3

What areas of the website need more development?

‐‐‐

4

5

6

Have you been happy with the level of consultation throughout the development of the website? Was the product completed on time?

Have the specific performance criteria been met? a) Provide an easily navigable system to showcase his photographs b) To create a website that has a consistent style throughout c) To create a website that that provides an easy way to contact Keith to enquire about purchasing photographs

Yes

No

Comments The completed pages look good and I look forward to the security being added later  It is easy to navigate  The images are clear  The pages have a consistent style  It is easy to be contacted by e‐mail or to see the website  Some of the images on the home page are a little difficult to see  Some of the text on the web site is difficult to see and the text needs to be left aligned  Images can be copied and pasted from the website and used free of charge  There are no ways for potential customers to purchase images I have been very pleased with the level of communication between myself and the student throughout the development of the website A partial product was completed by the deadline, but copyright and subjects’ consent could not be reached within the allotted timescale

Yes Yes

I really like the way the website allows photos to appear individually in their own pop‐up window However, I think the colours of the text may need to be changed

Yes

Information technology in a global society teacher support material

1


Internal assessment: Example 1

d) To develop a secure method to avoid photos being copied and pasted by users without charge Would you use my services again in the future? Signature Date: 2nd December 2008

Student work: Criterion F

Hopefully this will be added in 2009

No

Yes

Information technology in a global society teacher support material

2


Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.