COMP 266

Serge Potechnykh 3480289

Unit 1 - Site Design

1. Theme and Scope

The chosen theme for the web site is a resource and learning environment for programmers,
testers, and computer science and information technology students. The site will provide code
examples, pseudocode, flowcharts, links to popular documentation and resources. It will have a
feature allowing the users to interactively run selected algorithms coded in JavaScript, providing
input and viewing the output. The name of the site will be the "Computational Tool Kit",
abbreviated CTK.

2. Personas

A) Ryan Zbigniew

www.pexels.com/photo/men-s-white-dress-shirt-936229

Age: 24
Gender: Male
Occupation: Student
Interests: Programming, information processing
Motives: Improving coding skills, gaining computer knowledge and practice
Type of user: Hands-on, will keep using a good resource

Ryan is a first-year Information Technology student. He is learning about the context of computer
use, while also starting to get his feet wet with programming, algorithms and data structures. He
is searching the web for resources that could help him out. He is looking to find code examples,
and he needs to know where to find reference resources for HTML and CSS.
B) Mike Ramirez

www.pexels.com/photo/man-in-white-shirt-709188

Age: 44
Gender: Male
Occupation: Developer
Interests: Web development and design
Motives: Brush up on development practices, build new web application
Type of user: Unstructured approach based on heuristics

Mark is a web developer and is starting to work on a new web application. He is trying to find a
site that would contain code examples for various tasks, such as sorting, searching, parsing input.
He needs to recap some JavaScript syntax and concepts and adapt those to his new application.
His application has got to work reliably, otherwise his reputation might be at stake. It has been a
while since the last application build, so he needs the resources to aid him on the project.

C) Sharon Li

www.pexels.com/photo/photo-of-a-woman-smiling-1520760

Age: 35
Gender: Female
Occupation: Tester
Interests: Quality Control, Testing
Motives: Create a comprehensive test plan for a project
Type of user: This user prefers an approach they believe is best

Sharon works in QA and is preparing a test plan. She is searching the Web for information that
could help her prepare the test scenarios. As part of a project at work, her team needs to test a
complex application that has just finished development and has been handed off for testing. It is
her responsibility that the test cases created have a wide coverage and ensure the proper
functionality of the application.

D) Shawn Fran

www.pexels.com/photo/woman-in-black-tank-top-holding-white-ceramic-cup-3779760

Age: 25
Gender: Female
Occupation: Student
Interests: Science, coding, design
Motives: Enlarging the knowledge base
Type of user: This is a focused user, seeking an in-depth perspective

Shawn is a second-year computer science student and she is looking for resources to complement
her study of algorithms and their implementations. She needs this to excel in her courses, and to
grow in her field. This includes theoretical knowledge, design of software, flowcharts, as well as
implementation of algorithms using various languages.

3. Scenarios

A) Ryan is searching the Web using his laptop and comes across the CTK site, where he finds
code examples that he can refer to for coding practice. He needs to keep practicing because his
program has a lot of hands-on problems and tests to do. Ryan also appreciates links to helpful
documentation.

B) Mike is using a search engine on his iMac desktop machine to find web development
resources for the new application he is building. He finds that the CTK site allows him to view
the code for common JavaScript programs. He can refresh his memory on coding practices and
tailor code for the task at hand. This saves a lot of time and enables him to stay on schedule.

C) Sharon is using her work PC to expand her test plan. She comes across the CTK site and finds
the runnable algorithms useful for that purpose. Sharon can select among a number of common
programs and run them with different sets of inputs. The programs can be run online interactively
and results are displayed. This aids Sharon in determining the expected results and preparing test
cases.

D) After her classes, Shawn does her study. While looking for flowcharts using her laptop in the
library, she opens the CTK site with pseudocode examples and flowcharts. She goes over these
examples to enhance her understanding and then practices implementing them in a different
programming language. This puts her in a good position for doing her term project.
E) Ryan has bookmarked the resourceful CTK site, and returns to it for more coding practice.
Coding and debugging software is his passion and he sees it as imperative to later employability.
He also needs to open his reference documents and have them handy and gets pointed in the right
direction.

F) Fred Young is a developer by trade and a part of the open source movement. He uses his tablet
to look up syntax for a piece of code that he needs to write to add a new software feature. He is
easily able to do so with the Computational Tool Kit. He can also trigger the code prior to
inspecting it, to make sure that it runs with his expected parameters.

4. Site Map

Main

Scripts Code Flowcharts Reference Links

Pseudocode Code Language 1 Language 3

examples examples

Language 2

Basic Sorting Searching Other

GCD Bubble Sort Linear Search Shift Cipher

Addition Selection Sort Binary Search

Input Insertion Sort

5. Mock-ups

Main page

All pertinent functions are accessible via a menu on the left side.
Scripts page

The category is chosen by hovering the mouse over its name, then the desired script is selected by
clicking it. The page will open where the script can be tested.
Script testing

Script is runnable with a user’s choice of input. It can be run as many times as they like. View
shows the script source.

Flowcharts page