mock up

Mock up

Early mockup, testing Colours from Kuler (Adobe)
#1A1F2B #30395C #4A6491 #85A5CC #D0E4F2



PLEASE ADD TO POOL (I cant edit your posts m8 ^^)




ANTI its up too you! Different styles will help us more - CHRIS

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Mock up

Hi guys I have a question. Can I change the style or I should follow the same that Craig have done?

A consideration of Copy Right issues

A consideration of Copy Right issues in relation to Cloud Fish.

Images -
Fonts used -



Images
Any images we might use will be Creative Commons based.
http://creativecommons.org/licenses
This means in short that as long as we abide by the authors request (this maybe just to reference them somehow in the content) we can use the content created by them, tweek and even use the images for commercial use.

Fonts
A font will come with its own set of licensing rules. With the onset of HTML5, custom embedded fonts leaves developers open to copyright infringement in reference to the fonts they use.
A font by legal definition is regarded to be the same as software and hence taken very seriously. That is why we will be using free font websites.
http://www.fontsquirrel.com is a site that provides free commercial and non-commercial fonts with no strings attached.


"Look & feel"
A relatively new consideration, thanks to major lawsuit cases such as Apple suing Microsoft over the "look and feel" of Windows new operating system. This also transfers over to web pages.

We can safely sat that Cloud Fish is unique and isn't copying layout/colour schemes of other websites.

mockup

session_start();

I have managed to manage secure access to the cloudfish site once logged in by using php sessions which redirect to the loggin page once a session has finished. I have done this by giving the session a value to that of the $_post['user_name'] and then checking for it at the top of every page.

Once the session has been ended on logout users are automatically redirected to the splash page.

Logout script:

unset($_SESSION['user_name']));
session_destroy();

Secure file upload checklist

Whilst researching the file upload script that will be used to add avatar photographs to the contact book I found this piece which I'm sure will prove useful. This is a checklist of different measures to help prevent unwanted files being sent to the server maliciously or by accident.

http://hungred.com/useful-information/secure-file-upload-check-list-php/

Important information for transferring info to db

Whilst researching the login section of the splash page and checking credentials against those in the database I found important information about mysql_real_escape_string function that protects information when it is transferred to the database. This is particularly important for data such as usernames and passwords.

Details:

http://us.php.net/mysql_real_escape_string

Database and Website maps (Group Pool)

Website Maps

Initial idea

 

Deadlines & Brief

Overview
You are to specify, build and evaluate a small/medium sized application to run across the internet. The actual site you build is entirely your choice, so long as it is able to address the criteria appropriately, and guidance and feedback regarding your proposed ideas will be given during workshop sessions between weeks 3 and 7.

Element 2S: Specification of the proposed system worth 25% due week 7: Your specification should be sufficiently detailed to enable a prospective user or purchaser to select the application and for another programmer to be able implement the application. Include the following elements:

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

The following elements are likely to form a significant part of a complete specification:

• A strong concept. 
• Evidence of research both technical and contextual. 
• Evidence of consideration of alternative solutions. 
• Evidence of consideration of feasibility. 
• A complete site map. 
• Two example input page mockups, two example output page mockups. 
• Data specification (usually ER and EA diagrams). 
• Specification of dynamic pages (inputs, purpose, validation). 
• Consideration of development language and tools. 
• Consideration of broad security issues. 
• Consideration of copyright issues. 

Element 2A: Demonstration of the finished application worth 50% due week 14:

A functional prototype of your application is to be published live on an Internet server.

If any parts of the system are password protected you must clearly give the necessary password details in a file passwords.txt submitted via the Online File Submission. Keep a backup copy of your work (which works on Localhost).

Demonstration of application:

• You are required to demonstrate your completed application in week 14. 
• A schedule of demonstration times will be posted under Submission Details below. 
• The demonstration is an integral part of the assessment process. 
• Failure to demonstrate your application will result in a maximum mark of 49% 
• The purpose of the demonstration is to: 
• provide confirmation that the application is your own work 
• allow you to respond to comments or questions about your work from the assessor 
• explain any points about your work not otherwise covered 

You will be required to explain your work both in terms of a user's perspective and from a technical perspective.

Names and Logo Ideas (Group Pool)

Note - All users use this space so we can keep everything together :)


Name Ideas for  (CLOUD FISH) !

• tree dwellers
• my family hub
• family central
• myFamily
•  

Logo Ideas

(Chris)

Just thought i would play with the idea of mixing the two components of our site name. It's very rough but you get the idea.

I created another tow Logo..

Logo 

Wire Frames (Group Ideas Pool)

In this idea we start with a tear drop style. You begin at the top with "you" and have multiply branches. Similar to a family tree and would play on the theme of family which we would like to use.

To create a new set of contacts you would simply "add member" and rename the surname field.


(CONCEPT IDEA)

This image shows what a message board system could look like.

The board would be neatly at the bottom of the page out of the way of the main content. Avatars, messages and dates would be displayed.

(CONCEPT IDEA)

This is a copy of Craig's layout, just seeing if it would work with my logo idea.

This is is more of a traditional social media layout whereby the user would rarely need to navigate away from the main page once logged in. Details would be displayed dynamically below the form in the style of a more traditional contact book.

Splash Page/ Cookies/Table (Week 2 Ideas)

Splash page

With other examples of online address books and social media sites, its important to have a splash page were users can either sign up or log in to their existing profile.

To the right is a quick mock-up of a possible design for our splash page.

Cookies 

A cookie will be useful for users who wish to log back in, so they won't have to re-enter their details onto the website. So the minimum we will have is the user name and password cookie. We can set the password to display * 's instead of characters however encryption of the password is another subject of research. A good example of cookies in action is at http://www.cookiecentral.com/demomain.htm view page source to see how its called and used.


Tables  (for data base)


What we will need:

User ID -
First name
Secondname
DOB
Address
Telephone Number
Mobile Number
Photo
Family Tie

We will also be looking into encryption of this table.

PHP Wall

Using a work example from http://www.nairaland.com/nigeria/topic-214623.0.html I was able to upload my own PHP wall to zappa.
My example is here - http://zappa.uwl.ac.uk/~21108489/

The php
<?php
$text="<hr align='left'>".date("m:i:s ").$_REQUEST['text'];

$handle = fopen("wall.txt", "a");
fwrite($handle,$text);
fclose($handle);

echo $text;
?>
The functions for download and post are located in the html file. It should be quite easy to implement this into our website so the users can have a message board feature to the page.

Geo-location & Printing with HTML 5

Geo-location Example - http://merged.ca/iphone/html5-geolocation

This is a great example as it works on Firefox, Safari, Chrome and the iphone. It works by first calling JavaScript object navigator.geolocation. (Html5).

        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(
                 function (position) {  
                mapServiceProvider(position.coords.latitude,position.coords.longitude);    },

Next we need to declare our mapping server this is done by -

        function mapServiceProvider(latitude,longitude)
        {
            // querystring function from prettycode.org:
            // http://prettycode.org/2009/04/21/javascript-query-string/
        
            if (window.location.querystring['serviceProvider']=='Yahoo')
            {
                mapThisYahoo(latitude,longitude);
            }
            else
            {
                mapThisGoogle(latitude,longitude);
            }
        }

The provider could be most any search engine with mapping.

        // be sure to include the script to initialize Google or Yahoo! Maps
        function mapThisGoogle(latitude,longitude)
        {
            var mapCenter = new GLatLng(latitude,longitude);
            map = new GMap2(document.getElementById("map"));
            map.setCenter(mapCenter, 15);
            map.addOverlay(new GMarker(mapCenter));
        
            // Start up a new reverse geocoder for addresses?
            geocoder = new GClientGeocoder();
            geocoder.getLocations(latitude+','+longitude, addAddressToMap);
        }

Update>
We have decided not too use geo location in our project...

_________________________________________________________________________________

Printing in HTML5

Focus on having a CSS rules- setup for printing

 TBC

Advantages & disadvantages of cloud Storage (not finished)

Advantages:
The primary advantage of cloud storage as a means of keeping your data is that you will be able to access it anywhere that you can gain access to the internet, this could be a computer anywhere in the world, a mobile phone or through a tv that is connected to the internet. This is an obvious positive point for those who would otherwise have to carry around large amounts of data on their devise or on hard drives.
The second biggest selling point of cloud storage is that it negates the need to have large amounts of storage on your computer or mobile device as all of the space needed is on a server elsewhere, and so allowing your personal computer to run faster. Another vertue of cloud storage is security. Should your device be stolen, files that would have otherwise been stored on it would not be lost and you would still have access to your files once you had replaced your device.

Disadvantages:
The two biggest disadvantages to cloud storage would be access and security. Firstly, you only have access to your files when you have an internet connection, and when the servers where they are stored are connected to the internet. Secondly, files could become vulnerable to unauthorised access and thus could potentially view large amounts of your data.

Desktop Contact Management

There are two main desktop address book applications that are shipped with computer operating systems:

Address book for the OSX : This is the apple based address book application that syncs with the same program on the iphone and ipad. This is an easy to use application which efficiently stores all details, but until the recent face lift included as part of the Lion OSX was to particularly attractive to look at.

Microsoft Outlook Express : Outlook express is shipped with the windows OS on most PCs and is familiar to most computer users. The contact book is simple to use and configure but once again is not appealing to look at and would be over complicated to those who are used to using an internet based email client. Outlook express is similar in appearance to the business orientated contact management systems advertised on so many web sites.

Examples of online contact management

There are many examples of websites and and downloadable online applications for storing contact details. It would appear that this market is primarily aimed at the business sector and the need to store vast numbers of contacts that could be shared amongst for example a sales team.

Here are some examples of online contact management:

http://www.plaxo.com  This is the most modern and useful interface of all of the sites that i visited. Plaxo is the only site that did not appear to be totally business orientated.

http://www.hyperoffice.com/online-contact-management  This site is typical of the address book sites that are readily available. The interface clunky and a bit dated to look at. It would seem that ease of use is not the top priority when dealing with the business sector and that focus is on the inter-connect-ability and power of the database.

http://www.infostreet.com/cloud-apps/address-book/ This is one of the sites that is using the new buzz phrase 'cloud storage' to entice users.

Other examples include: workbooks.com, beiley.com