Creating Prototype websites

Post on 09-May-2015

328 views 0 download

Transcript of Creating Prototype websites

IT Applications Theory Slideshows

By Mark KellyMcKinnon Secondary College

Vceit.com

Prototype website

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

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

The original mouse!

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.

Like this

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

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.

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.

But how?

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

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

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

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

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.

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!

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.

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.

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!

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