Friday 4 November 2011

Evaluation of wire frames

Evaluation of wire frames/ mockups
We wanted to to turn our paper wire frames into more realistic mockups, so we went away and used programs such as Photoshop or Balsmiq mark ups to generate a layout and overall theme for our site. This was also a good opportunity to try out any colour schemes.

If we look at all the designs as a whole we can see we have incorporated a 'modular' type look.
The reason why we choose this style is:
  • A visually pleasing and logical layout.
  • For mobile devices we can use css that will accommodate the smaller screen size. So for example instead of being fixed across a large screen area, the elements or modules will stack on each other. This system would favor both desktop monitors and mobile devices.
  • This style should also translate well across the different internet browsers. 
Colour
Our web page's theme will hopefully be "super clean". Basically a page witch is simple but elegant. The colours we use will reflect this. We have used tools such as adobe "kuler", this helps us pick colours witch complement each other. Simple light to dark blues will help give the modules that "layer" look while keeping it simple.

Spec allocation Progess


Concept and context - 20%
Site layout and design - 20%
Backend design - 40%
Advanced issues - 20%

------------ 25 % of module grade ------------ 

Just an area were we can see what we have done! If there's anything missing then please add.


What we have done

x Consideration of Copy Right issues
x PHP wall
x Logo Design Process + explanation
x Site Plans
x Cookies
x Wire-frame explanation

x Database Design
x Concept
x Pros/Cons of Cloud
x Session
x HTML5/CSS3
x Name Ideas
x Brainstorm/original ideas
x Encryption





I think we have covered all the bases.

Cookies

Cookies
A cookie is used to return a users browser to some sort of previous state. For example remembering a user-name so the user doesn't have to retype it. Also know as HTTP cookie/browser cookie, it makes for a better user experience. Cookies are simply a string of characters no larger than 4kb. The most important variables to a cookie are max-age, path and domain. Which are self explanatory.

Why use them in our project?
For our project we intend to use "sessions", a session cookie will only last for the duration that the user is on the page. As soon as the page is closed the cookie will expire. We will also use them to remember user names and possible passwords.

How do we use them?
Creating a cookie is relatively simple process. In the html file we can use java script functions to remember the user's name. In this example http://www.echoecho.com/samplecookie1.htm the user will enter the name once and the code will remember them the next time they visit the page. The name is simple saved into a var and returned the next time they visit. We could implement this script into our project for the user name so you wouldn't have to retype it. This example also shows a function that gets rid of the cookie. This would be useful if the user was on a public computer and didn't want to share their details.


Site Plans

What is a site plan?
A site plan is simply a visual representation of how the website will flow from page to page. This will help us to plan how we build the site and contemplate logically any additions we want to make.

Ours

Explanation
As you can see our splash page will be the first thing the users will encounter  when entering our site. They will have the option to either log-in if they have previously registered or register for a new account. The new user will have to enter their personal details and upload an avatar. They will then navigate to the main page were they can see all their contacts and view the groups "wall" or "shout box". Users that have already will jump to this page. From here you will also be able to invite others to join your group.

Wednesday 2 November 2011

Evaluation of our work



The previously research is selected for creating a particular project called CloudFish.
Function of the CloudFish (address book on the web)
First of all a registration must be done in the web book called CloudFish in order to create a personal profile. This book includes a list containing personal contacts such us the whole name, cell phone number, mobile phone number, e-mail and location of a member. A box of massages is also included in the registration profile list. There can type a personal massage.

Logo Design (As a process)

Logo Design Process

The hardest part of the design process was choosing a name as it would dictate the majority of the design decisions. We came to Cloud Fish and liked it. From there we were able to imagine the type of logo we wanted. The group decided that the integration of some sort of cloud and a fish would render a unique logo idea. This theme of clouds and fish could appear over the website.

What we wanted to convey
We wanted a light heated and friendly logo that would be suitable for family eyes. The concept of cloud storage (address book on the web) is represented by the cloud and the 'hook' is the fish. This could convey a sense of a school of fish (lots of members).



Here is the Group pool of logo ideas. Note we are using the first.

-------------------------------------------------------------------------------------------

How can we improve on our chosen logo?
The logo in it's current form is very basic and lacks detail. We will consider maybe adding lines in the cloud or maybe to stick with the theme of an address book, little notes/address books.

PHP Wall

What is a wall?
A wall is basically like a message board where member's of the site can post serqenally post comments in order of time. Also referred to as 1,2 and 3 sites that utilize this feature are generally a richer experience for users. It's also fair to comment that this is a web2.0 feature.

Pros
  • Adds functionality to the site
  • Richer social experience for users

Cons
  • Can be abused (bullying and 'trolling*') 
  • We will have to use script to remove any html tags such as iframes so users cannot damage the site's appearance
  • Swearing on some forums and message boards is strictly forbidden. We will decide if we want to include such a feature
  • Spamming
  • Double posting (accidental)

How we will use ours
As you can see from our mockups, it's our intentional to have a module style wall on the right hand side of the page. This will hopefully give the impression of a site that has a strong social element. A site where you can look up your family and friends details and post quick messages that everyone in that group can see. Each user's post will also have their avatar next to it so members can see each other.

We could also include a emoticon  feature that lets users use 'smilies' on the wall. This would mean we would have to have a data bank of emoticon's and script that scanned and replace something like :) with the small picture file.

We will stop anyone from using html tags such as iframes from threatening the integrity of the page. We will also look into rules governing how often people can post to the wall. To stop spamming and doubles posting.

Quick Code example
Using a worked example from http://www.nairaland.com/nigeria/topic-214623.0.html we were able to learn the basics about walls through php.
<?php
$text="<hr align='left'>".date("m:i:s ").$_REQUEST['text'];
$handle = fopen("wall.txt", "a");
fwrite($handle,$text);
fclose($handle);
echo $text;
?> 

 We then use simple script on the html page with functions that can call previous posts form a .txt file then post to the text file. We will also incorporate an avatar. We will create a new table with user IDs and a url to the photo that they uploaded. 



*Troll definition
"Forum trolls are users that repeatedly and deliberately breach the netiquette of an established online community, posting inflammatory, extraneous, or off-topic messages to bait or excite users into responding or to test the forum rules and policies, and with that the patience of the forum staff. Their provocative behavior may potentially start flame wars (see below) or other disturbances. Responding to a troll's provocations is commonly known as 'feeding the troll' and is generally discouraged, as it can encourage their disruptive behavior."

Updated db design

I have created an updated database design taking in the requirements of the module and opening up new functionality possibilities.