Creating Prototype websites

18
IT Applications Theory Slideshows By Mark Kelly McKinnon Secondary College Vceit.com Prototype website

Transcript of Creating Prototype websites

Page 1: Creating Prototype websites

IT Applications Theory Slideshows

By Mark KellyMcKinnon Secondary College

Vceit.com

Prototype website

Page 2: Creating Prototype websites

Prototype website

Prototype: A working model of a real product.It may lack full functionality.It may simulate some behaviours.It may have a sample of items rather than a full collection of items.

Prototype of an Android mobile phone

Page 3: Creating Prototype websites

Tips

• Prototypes are demonstration models.• Prototypes need not be exhaustive…• A real multinational auction site might have

thousands of items listed… your prototype might have a few… just enough to show the idea of what you have in mind.

• It’s like a proof of concept

Page 4: Creating Prototype websites

The original mouse!

Page 5: Creating Prototype websites

Fake it• Functions you can’t create for real can be

simulated.• Don’t worry about engineering complex

functions such as discussion forums: fake them!

• Take a screenshot of a real tool and edit it so it looks like your VT is using it to share knowledge or make decisions.

Page 6: Creating Prototype websites

Like this

Page 7: Creating Prototype websites

Skills requiredOnly modest web editing skills are needed…• Create and appropriately name pages• Control placement of items (e.g. with tables)• Add text and images• Format text • Put links to pages and anchors on pages• Edit images to make them look relevant

Page 8: Creating Prototype websites

What you need to do• Create a website that shows that you know

what sorts of tools can help a virtual team.• It’s this evidence of your understanding that

earns marks, not hot-dog PHP/Javascript programming skills.

Page 9: Creating Prototype websites

Example

• You realise the website should be secure because the VT deals with sensitive data

• You demonstrate this knowledge by creating a login screen to keep out unauthorised people.

Page 10: Creating Prototype websites

But how?

• You are not expected to actually produce a working password-protected site!

• Be cunning and creative. Fake it. For example…

Page 11: Creating Prototype websites

But how?

1. Get a screenshot of a genuine login box (e.g. internet login box) with a fake login name

Tip: press ALT+PRINTSCREEN to capture the active window

Page 12: Creating Prototype websites

2. Paste it into Paint, Photoshop – whatever you use to edit images. Edit it so it looks like the virtual team’s login box

Page 13: Creating Prototype websites

3. Create a webpage and drop in the image of the login box.

4. Here’s the cunning bit…

5. Define a hot spot in the image over the OK button. Link the hotspot to a second page, the true opening page of your site.

Page 14: Creating Prototype websites

Voila!• When index.htm opens in a browser, it shows

the login box. • The user clicks the OK button.• The linked hotspot jumps to index2.htm, the

actual first page of the site.• It looks like someone had to log in to get into

the site.• You’ve demonstrated your understanding of

the security needs of the virtual team!

Page 15: Creating Prototype websites

Take it further• If you had better IT skills, you could have

made the username and password boxes so the user could type in them.

• Better realism = some better marks• But it’s the understanding of a VT’s needs that

carries most weight, even if your skills are only average.

• Don’t waste too much time on frills & decoration.

Page 16: Creating Prototype websites

Be clear

• Make it really clear in the site that you’re adding tools for an obvious reason.– E.g. “Remember to fill in your schedule in the

networked calendar so other team members can see when you’re available”

• This shows you know why the tool would help the team.

• Clicking the link would lead to convincingly-faked networked calendar.

Page 17: Creating Prototype websites

Further information

See a movie demonstrating a genuine prototype website created by a student (30M, DivX)

http://www.mckinnonsc.vic.edu.au/vceit/videotute/ITA-u3o2-prototype-website-mkelly.divx

Good luck!

Page 18: Creating Prototype websites

By Mark KellyMcKinnon Secondary Collegevceit.com

These slideshows may be freely used, modified or distributed by teachers and students anywhere on the planet (but not elsewhere).

They may NOT be sold. They must NOT be redistributed if you modify them.

IT APPLICATIONS SLIDESHOWS