Cross Browser Test for final design:

Tested on 20" monitor for exhibition

Chrome:

Firefox:

IE:

Safari:

New Version of website up

http://www.mydataflows.co.uk

Updating timezones

Worked out how to to change the timezones and format to what I want using the following code:

// changes the timezone to GMT
date_default_timezone_set('Europe/London'); 


//loads rss feed variable of the image, concatination used to add a counter e.g. 1,2,3... to each photo so that they can be individually edited - using css ID, however had to apply ID to the image source not ID for css styles to work
// also loads the description under each picture to explain what they the picuture shows. 
    // changes the pubDate timezone from the rss feed when it is parsed
	$ipubDate = $photoitem->pubDate;
	$ipubDate = strftime("%Y-%m-%d %H:%M:%S", strtotime($ipubDate));
	print "
 $ipubDate
";
	print "\n";
	print "\n";
//breaks the photo feed if it reaches the selected number
    if($photocounter==19){
	     break;

Pop-up Update

Using a couple of web 2.0 updates:
(the images use lightbox javascript, and the location and twitter feed use gray box)
When you click on the twitter, location or map feed...

Below is an example code, as you can see in the 'rel' tag it references the lighbox, a javascript web 2.0 pop up, and the information such as time and description is included with the picture in the lightbox.

//loads rss feed variable of the image, concatination used to add a counter e.g. 1,2,3... to each photo so that they can be individually edited - using css ID, however had to apply ID to the image source not ID for css styles to work
// also loads the description under each picture to explain what they the picuture shows. 
    // changed timezone to GMT and formats
	$ipubDate = $photoitem->pubDate;
	$ipubDate = strftime("%Y-%m-%d %H:%M:%S", strtotime($ipubDate));
	print "
 $ipubDate
";
	print "\n";
	print "\n";
//breaks the photo feed if it reaches the selected number
    if($photocounter==19){
	     break;
		    } 

Cross Browser Testing

Just testing the website across IE, Firefox and Chrome

(Chrome - everything displaying fine)

(firefox - everything displaying fine)

IE - everything displaying fine, however as already known IE doesn't support curved boxed in CSS so they display as squares instead.

Server and Hostname bought

Host server and domain set up

official url:

http://mydataflows.co.uk/

!!!!

Adding Lightbox functionality to the image

Adding a lightbox (using css) to the images so that when you click on them a larger image is loaded:

Live Version: http://mydataflows.herobo.com/prototype9/

Design Layout Update and Css

I have changed the twitter boxes to having a curved edge on two sides using the following code:

#twitter18 {
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
border:1px solid #474747;
font-size: 2px;
color: white;
background-color: #A8A8A8;
width: 50px;
height : 40px;
font-weight:900;
text-shadow: 0px 2px 3px #555;
z-index: 100; 
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
margin: 60px 0px 0px 230px;
z-index: 100; 
position: relative;
}

Result: (click on to enlarge) - now all the twitter elements have curved edges. (N.B. only works in Firefox and Chrome)

Live version: http://mydataflows.herobo.com/prototype8/

Adding links to each twitter and image element

Adding a link to the external element to each twitter and image feed

foreach ($twitterxml->channel->item as $twitteritem) {
	/*loads rss feed of the twitter same proccess as above, but different paremeters have been used in the CSS stylesheet for each individual twitter update.
	however unlike the photos above div id is added to the div */
	// as you can see there is a link around each element that links to the external source
    print "
$twitteritem->title $at $twitteritem->pubDate
";
    print "\n"; 
    print "\n";
if($twittercounter < 20){
	$twittercounter=$twittercounter+1;
	if($twittercounter==20){
	break;
	}
	}
	}

new design

More of a spiral on this design and an eye shape, this is to bring up connotations of this idea of these participatory self-surveillance tools being a new form of surveillance watching over you, hence the user of an orwellian style eye.

Link to working prototype: http://mydataflows.herobo.com/prototype6/

Need to implement the twitter feed into the spaces now.

Update to design

Made the pictures and tweets have more of a spiral so they fade off the circle.

 Working Prototype:
http://mydataflows.herobo.com/prototype5/

Update

Design Update

Designed a version of the website, as you can see it spirals around and now has a flashing arrow to indicate where I am.

http://mydataflows.herobo.com/prototype4/

Problem

            http://s1122.photobucket.com/albums/l530/chesterloffman/?action=view&current=748b817d-5d32-4ab7-8b7c-d6e6787f1004.jpg&newest=1
            chesterloffman
            <p><a href="http://s1122.photobucket.com/albums/l530/chesterloffman/">chesterloffman</a> posted a photo</a></p><p><a href="http://s1122.photobucket.com/albums/l530/chesterloffman/?action=view&current=748b817d-5d32-4ab7-8b7c-d6e6787f1004.jpg&newest=1" title="748b817d-5d32-4ab7-8b7c-d6e6787f1004.jpg"><img src="http://i1122.photobucket.com/albums/l530/chesterloffman/th_748b817d-5d32-4ab7-8b7c-d6e6787f1004.jpg" alt="748b817d-5d32-4ab7-8b7c-d6e6787f1004.jpg"
 /></a><br>sunny again! - 748b817d-5d32-4ab7-8b7c-d6e6787f1004.jpg</p>
            http://i1122.photobucket.com/albums/l530/chesterloffman/748b817d-5d32-4ab7-8b7c-d6e6787f1004.jpg
            
            
                sunny again!
                
                
            
            Fri, 8 Apr 2011 10:28:53 MDT

When I open the feed open on the web page: http://feed1122.photobucket.com/albums/l530/chesterloffman/account.rss the times (in GMT) I took the photos are all displayed correctly, but when I use PHP to grab the pubdate from this feed it displays it in MDT:

sunny again!
08 April 2011 17:28

chesterloffman posted a photo

748b817d-5d32-4ab7-8b7c-d6e6787f1004.jpg
sunny again! - 748b817d-5d32-4ab7-8b7c-d6e6787f1004.jpg

I've been looking for a while by I'm not sure if theres something I have to change on the PHP side of the server, or actually write a function to change the timestamp - or pubdate.

Quick Update

In regards to show I have added a automatic refresh function for the website so that It will automatically refresh when in the exhibition.

using:

  <meta http-equiv="refresh" content="40" >

Chester.

Design Implementation

I have decided to implement the following design:

Now I am going to arrange this design using CSS.

New Design Layout

Another possible implementation, smaller map display so I can fit more of a spiral on the page.

Update

Design with time stamps:

http://mydataflows.herobo.com/prototype3/

Implementing a design on the website:

I have implemented one of the designs using css and relative positioning, however it only displays like this on chrome (how I want it to display)

it displays like this on firefox (the elements are positioned differently) 

http://mydataflows.herobo.com/prototype1/ (Link to relative positioning layout)

I am now going to try to use margin positioning to see if there is more cross-platform compatibility

Update:


Using Margins to position the data on this version of the website (seems to display the same on all the browsers - but still some issues with how the data gets populated, some elements move when I add a new image)

http://mydataflows.herobo.com/prototype2/

Three more possible designs

Staying with the theme of the big brother eye. I will now try to implement one of these designs into my web-page. (click on to enlarge)

Design Bellow populated with images and twitter feed

Design Update

Made another eye to look like a big brother eye, almost with the map being the pupil. This kind of bringing up connotations in the audience about big brother watching you, but you in a sense create this 'big brother' through this surveillance technology.  Thus we are in a sense creating self-surveillance technology made up out of participatory media. 

This is one possible design to be implemented:

I need to have more of a focus to this design aspect, creating different designs and see how those designs embody  the purpose of my project.