Tuesday 6 March 2012
Monday 16 January 2012
Paperwork to pdf
Specification - ClanTacts
To use our website, you may create your own profile or use the following logins. Please use one of the logins to demonstrate how other users can share their contacts with you.
username: chrish2213 password: password
username: craigo password: password
The url for our site is - http://zappa.uwl.ac.uk/~21022716/clantact_three/
Concept
Our concept is that ClanTacts will be a useful website for groups of people that want to have up-to-date contact information on each other. They will also be able to add contacts that are not part of the website. A sharable address book is another way of describing our site. An example of who would benefit from using the website could be a group of employes, maybe a sales team that need to maintain contact with each other.
Change from original specification
We modified our original idea, as people would have to be registered to the site for them to be in your contact list. We felt that making it so that you needed to get the other person to sign up, reduced functionality. What if you wanted to store details of a person that didn’t want to sign up to our website.
To use our website, you may create your own profile or use the following logins. Please use one of the logins to demonstrate how other users can share their contacts with you.
username: chrish2213 password: password
username: craigo password: password
The url for our site is - http://zappa.uwl.ac.uk/~21022716/clantact_three/
Concept
Our concept is that ClanTacts will be a useful website for groups of people that want to have up-to-date contact information on each other. They will also be able to add contacts that are not part of the website. A sharable address book is another way of describing our site. An example of who would benefit from using the website could be a group of employes, maybe a sales team that need to maintain contact with each other.
Change from original specification
We modified our original idea, as people would have to be registered to the site for them to be in your contact list. We felt that making it so that you needed to get the other person to sign up, reduced functionality. What if you wanted to store details of a person that didn’t want to sign up to our website.
We decided to focus our idea so to more of an address book approach. You would have a group of contacts that wouldn’t have to be registered to the website. We intend the site to be used by groups of people that want up to date details on each other. For example, a sales team or even a group of students in a class. We also decided to change the name from Cloud Fish to ClanTacts. We decided to rename the site because we feel that the name CloudFish limited our design ideas and wanted to experiment with a wider array of themes.
Design
We wanted our design to be business orientated and therefor it must echo a professional elegance. Black and white is understated and practical witch echoes the concept of the project, an efficient contact information tool. Typography of the website matches the modern look and feel. Text is also easy to read and scales well for visual impaired people who may use the zoom function on their browser to make text bigger if needed.
Requirements for ClanTacts
We need a site where a user can register, login/out and add contacts. The user will also be able to share their contacts with other users, making it a 'social' address book that could potentially be very useful. We have also included profile pictures and features such as search or edit contacts. We must also consider security and validation to insure that our website is as reliable as possible.
Technologies/Languages Used
MySQL – Tables in our database, integration of database
PHP – We can use php in a number of ways. We used it for includes, validation, accessing the database and manipulation of variables that we will be using for the website.
JavaScript – Validation and … [TBC]
HTML – For the general layout of the website and components such as forms.
CSS – For the styling of different elements of the webpage
Database
As the nature of our project had to be database orientated, we have used mySql tables. Heres a list of them and their purposes.
* Avatar - The table stores the url of the image and the users id so the profile picture can be used.
* Contact card - Where details of contacts are shared, for example name and address.
* Log in details - This is where we store the username and password of users.
* Share - This table is used to show who shares contacts with who.
Security measures
* Hidden field - On the create a new user form (the only form where you don't have to be logged in) we have created a hidden field. The purpose of a hidden field is to detect fot bots trying to spam the site. Bots will simply fill in all inputs on the page, whereas humans won't as they cannot see them. We use a simple script that checks to see if the hidden field has text in it. If it does, we simply bounce them back.
* Client & server side validation - This is the Javascript and PHP code that checks to see if the information people type into input boxes falls within certain aceptable ranges. For example, if a telephone number is a certain amount of digits or a name is at least 2 characters long.
* md5 encryption - For our password field, we decided that it would important to encrypt it. Setting up an md5 field on PHP my-admin interface is relatively easy however the code on the PHP file using it is slightly harder. A PHP decode function is used to verify the password.
* Sessions - This is the backend and point of logging into a website. This stops you viewing certain pages without being logged in. If you have been logged in without activity for a certain amount of time, the code will log you out to protect your account. On the start of each page of code that we need to protect, we need to use an include statement to make sure your logged in. This also insures that a user can only log in to their own details.
What we would have done if we had more time
* Password retrieval - If you have forgotten your password, the server will send you a new one. This would mean that we would also implement a security question to make sure users who have a compromised mailbox cannot have the details stolen off the website
* Profile picture's for contacts - When you add a person's details who aren't registered to the website, you would also be able to add a photograph for their contact card. For now we have just added a default picture so you get the general idea of how it should look.
* E-mail confirm field - This is a feature of most websites that you sign up to. The site makes you input the e-mail twice and then checks the 2 input boxes to make sure their the same. This will save people from making typing mistakes.
* E-mail confirmation - This is were you have to go to your inbox and click the link the website gives you. This is another layer of protection of spamming bots. However, it can also be a frustrating experience for the users. We haven't decided whether or not we would use this. Using research into user experience with websites may give us our answer.
* Removing or un-sharing your contact book with other users - Say for example if you shared your contact book with the wrong user, it would be an important feature to be able to undo that.
* Block or delete other peoples contacts - This would be useful if someones trying to spam you, simply blocking them would be a good option for people to have. Deleting unwanted contacts is another useful feature that we would have added if we had more time.
* Early screenshot
Testing methods
Why do we need to test and what for?
Trying to "break" the website is an important part of the testing process before we release the website into the public domain.
Validation
Heres a list of pages where the user can interact with the server and potentially damage the site by entering incorrect information. We use validation to stop this and to insure the integrity of data.
- Create a new user
Username and password both have Spry Javascript validation as client side protection. We have also included PHP validation for the server side. This means that if someone has Javascript disabled, the site will still stop them from entering potentially harmfull information into the inputs.
We have set default values for the remainder the of the form. So for example if you didn't want to have your house number on the website, it would simply say "not provided". If you do however type a post code for example, this is checked to make sure its the right length and contains alpha-numeric characters. For the e-mail address field, we have taken advantage of html5 and used the 'e-mail' input field type, this means when the submit button is pressed, it will look for the pattern of an e-mail address and inform the user that they must change it.
- Log in
Username has Javascript and PHP validation to ensure that the username is between the min and max number of characters. Password also needs to be a certain number of characters but any characters are replaced with "*" 's to stop people being able to see the password. We have also used md5 encryption to stop people form logging in with someones else's account.
- Add a new contact
On this form, we require users to enter both names of the contact and also their e-mail address. All the field's if they choose to enter information into them, they have Javascript and PHP validation to protect the database. Again we also used html5 input type "e-mail" as another way of validating e-mail.
- Search user
Simple JavaScript and PHP to make sure the input is a certain length and also only contains letters.
- Edit contact
Another page witch has the same PHP and Javascript validation as the create new user page.
- Amend profile
The amend page has all of the same validation that the "create new user" has. Please refer to the section above.
- Change avatar
The change profile picture form has two elements that protect it. The first is a file size limit. For out example we has specified that 0.5 mb is the limit. If the PHP code detects that your file is too big, it will redirect back to the upload page and give you the message "File limit is 0.5 mb". However if the upload is successful, it will redirect you to the main profile page. We have also specified that the file must also be an image. Being able to upload anything is a security risk. We used PHP to make sure that people only upload jpg, png and gif images.
Testing the validation...
--------------------------- PHP Validation ------------ Javascript Validation --------
Login * *
New-user * *
Add contact * *
Search * *
Edit Contact * *
Amend Profile * *
---------------------------------------------------------------------------------------------------
For the avatar, I needed to try uploading files that were not images and over the size limit. Happily the PHP validation stopped me from doing both.
What if the users has disabled CSS?
In this very rare case, the site still has a logical and readable flow. The user cannot expect the same visual experience in this case, so we don't have to pay that much attention to this factor.
Dead-links
After going through every page and testing every link, I found that only one page had a dead link. It was trying to link to a page that we had deleted. I changed the link so its no longer an issue. I was pleased that I didn't find many errors, however thats due to the fact that we extensively tested each piece of code we added.
Duplication
An important aspect of a database system is that there isn't duplicate data. This a fundamental rule of good databasing. So for my testing section I tried added a contact with the same name as one witch had previously been added and the PHP code stopped me and gave me a message that it had found the same entry. The username also had code that would search for duplicates and stop the user from entering the same information twice.
Design
We wanted our design to be business orientated and therefor it must echo a professional elegance. Black and white is understated and practical witch echoes the concept of the project, an efficient contact information tool. Typography of the website matches the modern look and feel. Text is also easy to read and scales well for visual impaired people who may use the zoom function on their browser to make text bigger if needed.
Requirements for ClanTacts
We need a site where a user can register, login/out and add contacts. The user will also be able to share their contacts with other users, making it a 'social' address book that could potentially be very useful. We have also included profile pictures and features such as search or edit contacts. We must also consider security and validation to insure that our website is as reliable as possible.
Technologies/Languages Used
MySQL – Tables in our database, integration of database
PHP – We can use php in a number of ways. We used it for includes, validation, accessing the database and manipulation of variables that we will be using for the website.
JavaScript – Validation and … [TBC]
HTML – For the general layout of the website and components such as forms.
CSS – For the styling of different elements of the webpage
Database
As the nature of our project had to be database orientated, we have used mySql tables. Heres a list of them and their purposes.
* Avatar - The table stores the url of the image and the users id so the profile picture can be used.
* Contact card - Where details of contacts are shared, for example name and address.
* Log in details - This is where we store the username and password of users.
* Share - This table is used to show who shares contacts with who.
Security measures
* Hidden field - On the create a new user form (the only form where you don't have to be logged in) we have created a hidden field. The purpose of a hidden field is to detect fot bots trying to spam the site. Bots will simply fill in all inputs on the page, whereas humans won't as they cannot see them. We use a simple script that checks to see if the hidden field has text in it. If it does, we simply bounce them back.
* Client & server side validation - This is the Javascript and PHP code that checks to see if the information people type into input boxes falls within certain aceptable ranges. For example, if a telephone number is a certain amount of digits or a name is at least 2 characters long.
* md5 encryption - For our password field, we decided that it would important to encrypt it. Setting up an md5 field on PHP my-admin interface is relatively easy however the code on the PHP file using it is slightly harder. A PHP decode function is used to verify the password.
* Sessions - This is the backend and point of logging into a website. This stops you viewing certain pages without being logged in. If you have been logged in without activity for a certain amount of time, the code will log you out to protect your account. On the start of each page of code that we need to protect, we need to use an include statement to make sure your logged in. This also insures that a user can only log in to their own details.
What we would have done if we had more time
* Password retrieval - If you have forgotten your password, the server will send you a new one. This would mean that we would also implement a security question to make sure users who have a compromised mailbox cannot have the details stolen off the website
* Profile picture's for contacts - When you add a person's details who aren't registered to the website, you would also be able to add a photograph for their contact card. For now we have just added a default picture so you get the general idea of how it should look.
* E-mail confirm field - This is a feature of most websites that you sign up to. The site makes you input the e-mail twice and then checks the 2 input boxes to make sure their the same. This will save people from making typing mistakes.
* E-mail confirmation - This is were you have to go to your inbox and click the link the website gives you. This is another layer of protection of spamming bots. However, it can also be a frustrating experience for the users. We haven't decided whether or not we would use this. Using research into user experience with websites may give us our answer.
* Removing or un-sharing your contact book with other users - Say for example if you shared your contact book with the wrong user, it would be an important feature to be able to undo that.
* Block or delete other peoples contacts - This would be useful if someones trying to spam you, simply blocking them would be a good option for people to have. Deleting unwanted contacts is another useful feature that we would have added if we had more time.
Testing methods
Why do we need to test and what for?
Trying to "break" the website is an important part of the testing process before we release the website into the public domain.
Validation
Heres a list of pages where the user can interact with the server and potentially damage the site by entering incorrect information. We use validation to stop this and to insure the integrity of data.
- Create a new user
Username and password both have Spry Javascript validation as client side protection. We have also included PHP validation for the server side. This means that if someone has Javascript disabled, the site will still stop them from entering potentially harmfull information into the inputs.
We have set default values for the remainder the of the form. So for example if you didn't want to have your house number on the website, it would simply say "not provided". If you do however type a post code for example, this is checked to make sure its the right length and contains alpha-numeric characters. For the e-mail address field, we have taken advantage of html5 and used the 'e-mail' input field type, this means when the submit button is pressed, it will look for the pattern of an e-mail address and inform the user that they must change it.
- Log in
Username has Javascript and PHP validation to ensure that the username is between the min and max number of characters. Password also needs to be a certain number of characters but any characters are replaced with "*" 's to stop people being able to see the password. We have also used md5 encryption to stop people form logging in with someones else's account.
- Add a new contact
On this form, we require users to enter both names of the contact and also their e-mail address. All the field's if they choose to enter information into them, they have Javascript and PHP validation to protect the database. Again we also used html5 input type "e-mail" as another way of validating e-mail.
- Search user
Simple JavaScript and PHP to make sure the input is a certain length and also only contains letters.
- Edit contact
Another page witch has the same PHP and Javascript validation as the create new user page.
- Amend profile
The amend page has all of the same validation that the "create new user" has. Please refer to the section above.
- Change avatar
The change profile picture form has two elements that protect it. The first is a file size limit. For out example we has specified that 0.5 mb is the limit. If the PHP code detects that your file is too big, it will redirect back to the upload page and give you the message "File limit is 0.5 mb". However if the upload is successful, it will redirect you to the main profile page. We have also specified that the file must also be an image. Being able to upload anything is a security risk. We used PHP to make sure that people only upload jpg, png and gif images.
Testing the validation...
--------------------------- PHP Validation ------------ Javascript Validation --------
Login * *
New-user * *
Add contact * *
Search * *
Edit Contact * *
Amend Profile * *
---------------------------------------------------------------------------------------------------
For the avatar, I needed to try uploading files that were not images and over the size limit. Happily the PHP validation stopped me from doing both.
What if the users has disabled CSS?
In this very rare case, the site still has a logical and readable flow. The user cannot expect the same visual experience in this case, so we don't have to pay that much attention to this factor.
Dead-links
After going through every page and testing every link, I found that only one page had a dead link. It was trying to link to a page that we had deleted. I changed the link so its no longer an issue. I was pleased that I didn't find many errors, however thats due to the fact that we extensively tested each piece of code we added.
Duplication
An important aspect of a database system is that there isn't duplicate data. This a fundamental rule of good databasing. So for my testing section I tried added a contact with the same name as one witch had previously been added and the PHP code stopped me and gave me a message that it had found the same entry. The username also had code that would search for duplicates and stop the user from entering the same information twice.
Tuesday 20 December 2011
Progress so far ...
* note... We have decided to rename the site from CloudFish to Clantacts (not final). We feel that the name CloudFish limited our design ideas and wanted to experiment with a wider array of themes.
In the group session before Christmas we sat down and came up with ideas for the design of the website. We didn't need at this stage to have a completed design, just a exoskeleton that we could bounce ideas off and begin to establish our design. Here is a screen shot of our idea.
Current url: zappa.ac.uwl/~21022716/clantact/
In the group session before Christmas we sat down and came up with ideas for the design of the website. We didn't need at this stage to have a completed design, just a exoskeleton that we could bounce ideas off and begin to establish our design. Here is a screen shot of our idea.
Current url: zappa.ac.uwl/~21022716/clantact/
We met up during the break to create our tables and to start coding our pages. Here is a screen-grab of the tables we have created so far.
We then made a form that puts all the details from the registration form into the mysql tables. After this, we created a simple login page, (using code from assignment 1) after a successful login, users could see the data in there own profile*. (See the first image.)
Things to do : (please add yours craig :) )
- Wall
- Wall
- Upload an avatar
- Invite
- Lost password retrieval e-mail
- Lost password retrieval e-mail
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:
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.
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.
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.
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.
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.
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.
Subscribe to:
Posts (Atom)