Team BASK

By Amir Sezavar Keshavarz

This document will record our work plan for this project.

This work plan will act as a guiding document for the activities to be carried out and also as a convincing document for approval of decision makers.

By Amir Sezavar Keshavarz

For the first phase of our project development, we excluded the connectivity of our SNS to other SNS. However based on our project vision, this is defined in our plan.

• By use of Facebook API, we would like to bridge our SNS to Facebook allowing students to find their Facebook friends in SOTON Student Connect system. Also, we would like SOTON Student Connect users to be able to post their activities in our system in Facebook system.
• We would like to connect our system to Twitter allowing users to interact more with their friends.
• We also want to connect our system to some other RSS and news server in order to import relevant news for users.

If we had enough permission from the University of Southampton, we could connect our system to resources of university such as iSolution or SUSSED. In this Mashup, we could also import notes of all modules to academic section of our website providing an area for user to put their own personal notes on course materials and allowing other students to see those notes and interact more. At first, this was our vision. However we noticed that this is not possible.

First of all, we considered MVC architecture in our system. View layer is separated from logic layer and we have a complete separate POJO classes to model the domain. Furthermore we have a database controller in order to connect to the database.

For our database, we decided to choose MySQL Server as it is both easy and powerful database server. It integrates well with Java, our programming language, and performs very well on web-based systems.

We choose Java for our programming language. The reason of choice is that we have portability defined in our non-functional requirements so we did not want our system to be depended to an operating system. Java has a lot of resources and as the team members were familiar with Java, we did not have any problem in this aspect.

For our view layer, we have chosen HTML, CSS, and JavaScript. Our UI is easy and strait-forward as we thought a good SNS should indeed have a simple and quick UI. We developed three prototypes and we asked our friends to comment on them. We chose one of them based on feedbacks and designed one of them. After implementation was done, we applied the UI design to our system.

By: Amir Sezavar Keshavarz

This is demonstration of our working system. This working system and demo proves the feasibility of this project.

By: Amir Sezavar Keshavarz

1 – LoginPage

2 – Profile Page

3 – Public Profile Page

4 – Search Result Page

5 – Module Thread Page

6 – Accommodation Page

7 – Accommodation Review Page

8 – Event Page

9 – Group Page

10 – Group Specific Page

11 – Messages Page

12 – LogoutPage

By: Amir Sezavar Keshavarz

As specified in the project schedule, I implemented the Search module and Public Profile Module:

• Search Module: This module is very crucial to our domain as the users can find their friends via this module. This module is in its first cycle and hence it only supports limited features. However the goal of this module is the user will enter a search query which might be anything related to our domain. The system gets the search input and will retrieve all the related entries in the database and shows them in a central space. This can be anything such as other users, accommodation, field of study, study threads, groups and events, and others.
• Public Profile Module: Public profile module is in its first cycle and also supports limited features. The user clicks on another user’s public profile page link which he finds by searching, navigating, or that user is in his friend list. After that the system will show the public profile page of that user.

Although these two modules should improved in order to meet our requirements, in this stage, they seem to be sufficient. So, I will just finalize that and apply them to the whole system and I will start working on other modules. Later in the project cycle, I can come back and add other features.

Furthermore, all the pages have been improved. For instance, all the codes that were required in all pages, have been moved to another public page and in those pages that I need them, I included that public page.

By: Amir Sezavar Keshavarz

As specified in the project schedule, I worked on Accommodation Module and it is now finished.

This module needs more work. Specifically, I have to add ranking and photo abilities later.

This module is able to:

• By entering into this module, the user is able to see a list containing all the accommodation of the University of Southampton and their address.
• Then, they can choose either to see more photos, ranks, or reviews. They first two options have not implemented yet and I will work more on them later.
• The review section is finished. The user is able to read all the reviews of accommodation.

At the moment, and mainly because of time limitation, the user is unable to edit or add anything and he is only able to read information. For instance, in this module, the user is able to read reviews or accommodation detail information. I decided to first focus on reading of materials and then add editing and writing section to all modules. For now, we do have sample data in our database.

But what’s good about this approach?

This approach will help us to design and implement the system very rapidly and then show it to our users and get updates and feedbacks. Furthermore we can ask their opinions throughout the work. This approach seems to be more rapid and we can design and implement the system quickly. After we get the final approval of users, I will add the editing and add features so they are able to modify information.

Now about the next module. I would like to work on search section and viewing friends profile as these two seems to be the most important thing in a successful social site. I have to think about whether the system is going to have two different kinds of profile (one for the user himself, and the other one which could be like a public profile). If I go with the second approach, later in the project life cycle, I can add security module easier. For instance I can have a trust module in which the public profile would be dynamic to different friends and people.

By: Amir Sezavar Keshavarz

In this phase, we are going to be more concerned about the implementation of the project.

From project analysis, we understand about UML diagrams. Use Case Diagrams help us to capture all the requirements and assure that we are going to implement all the features and needs. Furthermore Class Diagram and Sequence Diagram will help us in implementation. All the UML diagram will be uploaded in the website as soon as possible.

We also analyse the database domain. The database schema gives us a general view to the database and all the tables that we are going to implement.

We also have three prototypes which base on our survey and interview, we are going to design one of them. All the questionnaire, interviews and survey and their result will be uploaded in the website.

This document, Prototype Version 3, is available to download from DropBox. In case of any modification, please update all the versions. You have to update word document, PDF document in DropBox Folder and Also this post.

By Boton Li
Posted By Amir Sezavar Keshavarz

This document, Prototype Version 2, is available to download from DropBox. In case of any modification, please update all the versions. You have to update word document, PDF document in DropBox Folder and Also this post.

Introduction

This artefact is aimed to discuss different aspects and rationale of the proposed GUI prototype for the SOTON Student Connect application.

There are three part of explanation.

Main page, Personal profile and Accommodation,

Main page is the only we can see before we logged in. and the others are similar page but following which option we choose after log in.

Screen shots

1. Main Page

Main

Features.

From the top, There is a logo but it has not been chosen the placement. Possibly left side or middle side, But not good for right side.

Main menu bar has 6 menu which we discussed before,

Main login page is placed on the left side.  If we are connected with School Database then we do not need join button in Login form otherwise, we will need.

Notice board page is placed on the right side.

This will construct with frameworks so after coding, We just need to modify the middle section

Where Login page and notice page.

2. Personal Profile (After Login Page)

Personal Profile

Features

As you can read above in main page. Top side is same as before.

After login, You could see personal information on the Left side. You can log out,

Read a message, possibly can see the friends.

The right side is more detail for Personal Profile, Name, Hobbies, Introducing.

The thing is if we are conneced with school database it will come up automatically, and we will modify or add information on our projcect site.

3. Accommodation (After Login Page)

Accommodation

Features

This is another page of menu.

Left side is same as the other page.(of course if we need to modify this page, easily re coding fot only this side)

Right side is information about accommodation.

As you can see, if we choose one of the option of menu then we could see where we are through between menu and main section. This is same as other option of menu.

Strengths

The strengths of the proposed prototype can be listed as follows:

1. Taking advantage of the rich user interface design

2. Easy to use.

3. Easy to coding because of separated page with frameworks

4. quick and instant access to the most important features of the system

Weaknesses

A number of weaknesses can be listed for the offered prototypes as below:

1. Design cannot be changed by user.

2. Administrator should be mange at least a day

This document, Prototype Version 1, is available to download from DropBox. In case of any modification, please update all the versions. You have to update word document, PDF document in DropBox Folder and Also this post.

Introduction

This artefact is aimed to discuss different aspects and rationale of the proposed GUI prototype for the SOTON Student Connect application.

The document will start by including the main screen shots of the prototype along with a full discussion on the rationale for each section and then proceeds to offer the rationale of the design by discussing a number of typical user stories. Finally the strengths and weaknesses of the design will be listed.

Screen shots

1. Home Page

Index

Figure 1

Highlights

Figure 1 depicts the starting page of the system. The design includes a three column paradigm with a banner at the top and a footer to indicate the end of the page. The banner includes the system’s logo, application’s name and the status of the user currently viewing the page. From the status bar user can see whether she has signed in to the system or if the user has not created a account for herself, the system indicates that the current user is viewing the site as a guest and offers her the option to sign up to the system.

The body of the page consists of three columns. The left most column illustrates a picture to graphically indicate the purpose of the system. The middle column offers a textual description of the site highlighting the features and benefits of the system. Finally the right hand side column provides the login facility for users who have already created an account in the system.

The main page follows the traditional page based Web application’s paradigm as it does not include high degrees of interaction and in addition, the conventional types provides more security regarding users sensitive data such as login credential compared to rich technologies for which security remains an unsolved concern.

2. User Home Page

User Main Page

Figure 2

Highlights

Figure 2 depicts a registered user’s home page which acts as a portal giving access to all the features and facilities of the site in a single page. This page is essentially a mix of rich and traditional user interface paradigm in that the main and frequently used features of the application has been included as widgets which update dynamically upon user’s interactions which does not require the page to be refreshed. This way the performance of the system will be highly improved and the interface would be more compact and user friendly.

The top banner remain enact to maintain the consistency of the system. The status bar however will be updated to show the status of the user as logged in and providing a sign out facility.  The footer also still present the indicate the end of the page.

The left hand side navigation bar contain the profile picture of the user along with a list of links to less frequently used features of the system or to pages which should be opened in a new window or as a front layer to the current page.

The main content pane includes a number of widgets which could be managed, closed, minimised or being replaced by other widgets available. Default widgets includes the user’s calender which is one of the most important and most frequently used feature of the system, enrolled modules list which present to the user the full list of the modules she has currently enrolled and contains links to each module’s resources and discussion pages. The notifications and actions widget lists all the recent activities, post, tags, friend’s statuses etc which are relevant to the user. The finder widget offer the facility for the user to search for people, friends, groups, events and activities through the system. The suggestion menu offers friend suggestions which is based on the system’s recommender system. Other widgets which can be included to the system would be accommodation section widget, each of the enrolled groups or activities widget, rss feed of subscribed friends, events or groups widget and so forth.

Please note that these are only the two so called landing pages of the system. If the design is accepted in the prototype review sessions, the prototype will be extended to cover the full details of the system.

Strengths

The strengths of the proposed prototype can be listed as follows:

1. Taking advantage of the rich user interface design
2. improved performance
3. ease of use
4. ease of navigation through the system
5. highly customisable user pages
6. quick and instant access to the most important features of the system
7. high level of user interaction
8. clear and intuitive interface design
9. light weight widget based minimalistic design

Weaknesses

A number of weaknesses can be listed for the offered prototypes as below:

1. lacks accessibility features
2. implementation and coding challenges
3. lack of standardised methodologies for implementation

Prototype to be expanded upon acceptance