Issuu on Google+

how would you like to help today?

Composite Assignment 2 Group Members: Anoop Dhamoon Stephen Belyea Victoria Barnett


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

TABLE OF CONTENTS Make your time count with MyTime Title Page

...............................................................

Page 1

Table of Contents

...............................................................

Page 2

About MyTime

...............................................................

Page 3

MyTime Team

...............................................................

Page 4-5

Preliminary Designs

...............................................................

Page 6-9

Final Design

...............................................................

Page 10

Database Table Structure

...............................................................

Page 11-14

DIV Structure

...............................................................

Page 15

User Levels Explained

...............................................................

Page 16

User Navigation

...............................................................

Page 17-19

Wireframes

...............................................................

Page 20-23

Final Site Prototype

...............................................................

Page 24-26

Contact Us

...............................................................

Page 27


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

ABOUT MYTIME Make your time count with MyTime My Time is here for you and all of your causes. We specialize in bringing people together for a reason. We rally volunteers to lend a helping hand and we are here to find a match for exactly what matters to you. Make your time count with My Time. Obviously volunteers work for free - so why should it be difficult to find an opportunity and sign up to participate? Well, with My Time, it isn’t! We aim to make the interaction between volunteers and organizations as quick and painless as possible so you can get on with making the world a better place. Don’t believe us? Well, follow the link to our volunteer registration and you could be finding opportunities in as little as 30 seconds. Oh, and it gets even easier - by providing My Time with a head’s up on where you live and what you’re interested in, we will customize results just for you. It really is that easy. Why waste time? Sign up for My Time right now.


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

MYTIME TEAM Anoop Dhamoon As we began the process of this project we all seemed to have a good understanding of the roles needed to successfully complete the project. I had taken on the task of creating two flash banners. One was for the main site giving the viewer insight on volunteering and the second one was an advertisement for the Salvation Army and it has a click button that will redirect to the website of the Salvation Army once clicked. I also worked closely with Victoria and we both worked to get the html and the css pages created so that Stephen could input the php. We met quite often and ensured tasks were completed on time. As we got closer to the deadline we all worked together to fix all the last minute details. We worked very well together as a team. Everyone was willing to work and help each other out if it was needed.

Stephen Belyea After proposing the initial idea of a volunteer networking database and developing the basis for ‘My Time’s visual design, I was chosen to serve as the project leader. With the other group members’ strengths lying in design, development and organization of the project, and relishing a great challenge, I also took the lead on the PHP programming end of ‘My Time’. I am very fortunate to have worked with such a strong and self-disciplined group. We immediately implemented daily progress meetings, setup e-mail and chat connections, and set clear goals for the development of this project. As group leader, it was my responsibility to gauge and predict our targets and keep tabs on our movement . This never proved a challenge in our group dynamic and my job wound up consisting mostly of encouragement, final design decisions, and a few technical consultations. The most personally trying portion of my contribution laid in the PHP programming. With a limited (but functioning) grasp of the language and syntax to begin with, most of my progress was through pure trial and error. I still kept to self-imposed deadlines and only needed to scrap a few less-important side-goals in the site’s development (though not for lack of trying - and based more on due date than personal ability). I also handled the table structuring, copywriting, testing / debugging, and final formatting of files, folders and code for ‘My Time’.


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

MYTIME TEAM Victoria Barnett I was the task master! One major role I played was creating task lists/schedules for the team and keeping us to the schedules we set, as well as checking in/dividing up tasks! Because I like things to be ridiculously neat and organized, I spent a long time working on making all of the CSS coding even and in order so it could fit really easily within the magnificent php coding that Stephen worked on. I did the majority of the CSS styling and editing both for the front end and back-end and worked with Anoop on making it perfect! I also worked on the documentation and layout of this wonderful booklet! I enjoy organization and structure, so working on the documentation was a great task for me! The name MyTime was also my idea! We had an amazing team all around- setting goals and modifying them as necessary, and helping each other every step of the way!

Team Shot


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

PRELIMINARY DESIGNS Anoop Dhamoon

My preliminary design was based on a clean simple look where people can come and feel welcome. The skyline of Toronto gave the site a feeling of community. Having the slogan “Where volunteering is a way of life� big and on the front page gives the impression that this is a community where the volunteers will feel a sense of belonging. Having a feed on the sidebar allows the volunteer the ability to see the posts available as they come into the database and they will feel included with the experience of the website. I originally called the site Y.O.U. your opportunities unlimited. I soon realized the name did not fit our concept. I had the skyline of Toronto taken from my preliminary design and it was used in the design of the final design, which I feel gave the final site some depth.


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

PRELIMINARY DESIGNS Stephen Belyea

I started this design, as I do most, by perusing online for clean and up-to-date design styles. I chose to incorporate a few design trends I enjoy, such as a browser-wide header, a clean and well-spaced layout, a sparse and minimalistic spread of content, a very simple colour palette, and a basic two-column method of organization. The colour choices are based on a 2012 predictive paint swatch from Sherwin-Williams (toned slightly more vibrantly for increased colour contrast) and all originate from only four separate colours (‘Burnished Clay’,


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

PRELIMINARY DESIGNS Stephen Belyea continued ‘Lunar Month’, ‘Fried Rice’, and ‘Slightly Sour’ - according to the swatches). Apart from a light gradient for the background, the only texture I employed is a simple semi-transparent layer of patterned squares set into the header. I felt it offered a nice separation from the simple colours offered on the rest of the design. The navigation bar’s corners were slightly rounded while light drop shadows were placed on it and the header to assist in separating the elements. The original font choice was a warm and lightly rounded sans-serif with titles and headings placed in lower case. The title (‘Find The Time’) was a quick pick chosen for its size, balance of letters, and assonance (the final title - ‘My Time’ also carries the same device).


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

PRELIMINARY DESIGNS Victoria Barnett

My preliminary design was based highly on getting volunteers involved and engaged in the project. I focused on the volunteer experience - the image in the header (which would have been a flash banner) shows happy people volunteering, and the main text on the page is centered around how and why someone would want to volunteer. From my design we used the idea of a feed on the home page, as well as we used my organization name of “MyTime�.


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

FINAL DESIGN

The final developed design of ‘My Time’ uses essentially the same colours (with one added - ‘Red Jujube’ - to identify clickable links), spacing, font choice, and two-column layout, as Stephen’s design. The rest of the content is harvested from a combination of the other designs. Features such as the skyline in the header and the database-fed listing of recent postings come directly from those original designs. These were easily integrated along with the flash content and various other important features. The drop shadows were left out for practicality while a logo was introduced and login / registration links added in the previously empty space above the header. A quick login form was also included in the sidebar of all non-member pages for the sake of efficiency and ease of navigation. The content remains intentionally clean and lacking cluttered, messy extras strewn about. My Time is intended to establish quick and easy connections between volunteers and organizations.


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

DATABASE TABLE STRUCTURE Introduction The database consist of 5 different tables: - mytime_pages - mytime_users - mytime_organizations - mytime_posts - mytime_joined

mytime_pages -id: Generates auto-incrementing integer for every page entered into the table. ID numbers are unique to each page up to 11 digits. Used for quickly and accurately identifying each page. -user_level: Sets user level based on numerical value required to access a given piece of content. There are 4 levels in this CMS: Administrators at 9, Organizations at 6, Volunteers at 3, and Public at 0. -title: Variable character column containing individual page names. Title is inserted into the page on the top browser bar and into the heading for each page. -content: Contains the body of text available to be inserted into the associated web page. This is the only column in this table that allows HTML tagging. -template: Links PHP template file to page content. Templates remain individual to their associated pages for the purposes of this CMS. -url: Url name for specific page - typically the same name as the template. Used in order to target the page and open its content for viewing. -summary: Extra variable character field available for summarizing content of page. This column is a NULL value and is not required to be filled out for the purposes of this database.


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

DATABASE TABLE STRUCTURE mytime_posts -id: Generates auto-incrementing integer for every post created by an organization. Individual number for each posting. -user_level: Dictates the access level required by a user in order to access a posting. Posts are automatically assigned the same level (3) that places them out of view of unregistered public visitors. -title: Title of the posting / event. Provided by the organization upon creation. -day / month / year: Three separate columns for organizations to enter the date on which their posting will take place. Columns are limited to two digits each for day and month, and 4 digits for the year. Stored in separate columns in order to allow possible comparison to current date so the posting can be removed once it has expired. -content: Allows detailed description for the posting. Open to HTML tagging for emphasis / limited styling to text. -category: Selected by the organization in order to more efficiently recommend opportunities to potential volunteers. Matches the same twelve choices offered to users and organizations upon registration. -area: Region in which the posting is set to take place. Choice of the same five GTA regions as organizations and users are offered. Again, allows sorting and recommendations. -organization: Colum to match posting to the organization which created it. Entered automatically based on organization’s login when new post is added to the database.

mytime_joined -timestamp: Records the time and date that a user joins an organization’s posting. Also used as individual ID for each entry in the table. -user: Records integer value of user’s ID number when they join a posting. Used for matching and displaying a user’s commitments when they are logged in. -post: Records ID number of posting for matching users to opportunities.


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

DATABASE TABLE STRUCTURE mytime_users -id: Generates auto-incrementing integer for every user registered in the database. ID numbers are unique per user and do not allow duplicates. -user_level: Integer value to determine access level of the user based on the page and content they are attempting to view. -password: Encrypted password originally entered by the user upon registration. Can be changed at any time through their profile. -email: Email address entered by the user. Employed as a username for logging into the website. -category: Stores a short description of one of twelve basic categories of volunteer interest chosen by the user. Used to recommend organizations and volunteer opportunities to the user. Can be changed through the user profile at any time. -area: Geographic region in which the user resides. Regions currently available are Halton, Peel, York, Toronto, and Durham. This column, like the category, is used for recommending opportunities to a volunteer. -first_name: User’s first name. -last_name: User’s last name. -profile_pic: Attaches filename of image selected and uploaded by the user. A default image is assigned to all users when they originally register for the website. Used for display in user profiles. -timestamp: Records the date and time that a user first registers for the website. Used in their profiles to provide a ‘member since’ date for each user. -url: Automatically generated text string based on user’s name and email address. Used for locating individual user profiles.


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

DATABASE TABLE STRUCTURE mytime_organizations -id: Generates auto-incrementing integer for every organization registered in the database. ID numbers are unique per organization and do not allow duplicates. -user_level: User levels are the same for every organization (6) and are automatically entered with their information when a new group is registered. User level is used to allow organizations access to content designed specifically for their purposes. -password: Encrypted password originally entered by the organization upon registration. Can be changed at any time through their profile. -email: Email address entered by the organization. Employed as a username for logging into the website. -category: Stores a short description of one of twelve basic categories of focus chosen by an organization upon first registering for the site. Can be changed at any time through their profile. Used for recommending organizations to users. -area: Geographic region in which the organization operates. Employs the same five GTA regions as the users. Meant for suggested matching of organizations to users. -name: Organization’s operating name. Can be edited through their profile. -about: Can only be added after an organization has registered for the website. Accessed through editing their profile. Text field is open for HTML tagging to allow paragraph spacing, strong text, italics, etc. in order to allow the organization some freedom to emphasize portions of their description. -logo_pic: Identical to the user’s profile_pic column. Matches a filename to an uploaded image. A default logo is provided for each organization upon registration. Can be changed through their profile. -timestamp: Records the date and time that an organization first registers for the website. Used in their profiles to provide a ‘member since’ date for each organization. -url: Automatically generated text string based on organizations name and location. Used for locating individual organization profiles and for browsing by users.


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

DIV STRUCTURE

This chart refers to the DIVs within the main column and the sidebar. We created this chart to help with the styling and with adding content to the different pages. It was also very useful for when the content and styling had to be transferred over into the PHP.


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

USER LEVELS EXPLAINED Types of Users We have 4 users types: Public= anyone who comes to the site and has not logged in, Volunteer= someone who has registered as a volunteer and has volunteer access as per below, Organization= someone who has registered as a organization and has organization access as per below, and the Administrator role, as per below.

Public (level 0) - can register to be an organization or volunteer (organizations require administrator approval) - can view some recent postings

Volunteer (level 3) - can edit/publish own user profile - can login to view all organizations posts - can upload own user profile image

Organization (level 6) - can edit/publish own user profile - can post events/volunteer callouts for own organization, and view other organizations - can delete own content - can upload own user profile logo/image

Administrator (level 9) - can edit, post and delete all content - manages users (organizations and volunteers), and approves organizations - can create templates


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

USER NAVIGATION Public (level 0) HOME

Register Organization

Register Volunteer

Contact

Registration Form

Registration Form

Contact Form

Submit

Submit

Submit

Login

- can register to be an organization or volunteer (organizations require administrator approval) - can view some recent postings


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

USER NAVIGATION Volunteer (level 3) HOME

LOGIN

Opportunities

Organizations

Profile

Contact

Select from sort by

View organization list

View Profile

Contact Form

Click Posting

View individual Org.

Read and join

- can edit/publish own user profile - can login to view all organizations posts - can upload own user profile image

Submit Edit Profile

Change image


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

USER NAVIGATION Organization (level 6) HOME

LOGIN

New Post

Organizations

Profile

Contact

Posting form

View organization list

View Profile

Contact Form

Submit

View individual Org.

Submit

Edit Profile

Change image Edit/Delete Posts

- can edit/publish own user profile - can post events/volunteer callouts for own organization, and view other organizations - can delete own content - can upload own user profile logo/image


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

WIREFRAMES Home

Login

Register- Volunteer

Register- Organization


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

WIREFRAMES Create/Edit Profile

Upload Image/Logo

Profile- Volunteer

Profile- Organization


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

WIREFRAMES Organizations

Create Posts

Volunteer Opportunities

Single Volunteer Posting


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

WIREFRAMES Contact Us

Logout


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

FINAL SITE PROTOTYPE Home

Login

Register- Volunteer

Register- Organization


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

FINAL SITE PROTOTYPE Create/Edit Profile

Upload Image/Logo

Profile- Volunteer

Profile- Organization


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

FINAL SITE PROTOTYPE Organizations

Create Posts

Volunteer Opportunities

Single Volunteer Posting


Composite Assignment 2- Anoop Dhamoon, Stephen Belyea, Victoria Barnett

how would you like to help today?

CONTACT US Contact the MyTime Team Got a burning question about this website that was not answered? Want to work with the MyTime team or individual members of it? Want more information about teh hows and whys of this site? Please contact us: Anoop Dhamoon: adhamoon@hotmail.com Stephen Belyea: belyea.stephen@gmail.com Victoria Barnett: veegs42@gmail.com


My Time Documentation