creating prototype websites
TRANSCRIPT
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