Final Post before project hand in

As it is coming to the hand-in date I thought I would do an analysis of the website to see how it has progressed, and how it mobilizes the theoretical ideas proposed in my pilot.

The aim was to make a self-surveillance website by purely re-appropriating already existing social networking tools and combining these into one website. However, the aim in doing so was to re-appropriate it into a Orwellian style design in order for the audience to think about how these self-surveillance tools have become a new form of surveillance and control mechanism that can be used to watch over you.

In the pilot I made a pretty successful design - however the elements from other social networking sites were re-appropriated using the flash widgets that the social networking tools provided therefore I did not have any control over how this elements looked therefore the design was limited as it was all split into blocks:

Thus the aim of the project was to create a website without using these widgets so I had ultimate control over how the project looked. In essence the aim was to make the website from the coding level up, rather than having an external widget decide how these elements look.

Therefore the decision was made to use PHP to grab these elements off the social networking sites, by parsing the RSS feed onto my website and using CSS to format these elements how I wanted.

This process of using PHP took some time as I had no previous knowledge pf PHP therefore I had to learn the basics in order to get started on this project (and much of the workbook is dedicated to this process of learning)

First of all I learned how to grab the separate feeds into separate blocks and then used PHP to grab a single element and put it into its own division - therefore making it possible to apply CSS id's and classes to these components (therefore having ultimate look over how it looks)

Also because I have control over these elements I was able to apply javascript to each of the elements on the page so that if the user clicks on the twitter, photo or map a web 2.0 pops up (which are better than normal pop ups in many ways - as they are not blocked by the browser and have a better aesthetic look, and are more integrated into the design)

However In doing so I was able to positition the social networking elements as I wished and ended up choosing a spiral design where the elements spiral around an orwellian eye with the map in the middle.

The spiral was partly influenced by the Fibonacci spiral, whereby these data flow outwards and constitute a new surveillance culture - whereby spirals of this data equals spirals of your life being uploaded onto the internet.

Thus demonstrating how these social networking sites have become the new big brother, but instead of you being watched, you are encouraged to participate in this self-surveillance culture, and in essence create cycles of data for people to watch over you with (hence the cycle of photos and tweets).

But more than this the design is constructed like a big brother eye in which the flows of data that circle around it constitute a new control mechanism to look over you. Thus reflecting on how in contemporary culture, we in essence all have our own eye, and cycle of information that are used to watch over us whether thats through facebook, twitter, flickr or photobucket (or any other social networking tools for that matter).

http://www.mydataflows.co.uk 

But by re-appropriating these elements into a new design I hope it elicits the idea in the audience that these social networking tools are a new form of surveillance in contemporary society.

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.

Updates to design

Started to make the design look like the Photoshop image below. (Now to implement the twitter feeds)

Layout Design

Possible layout to be implemented, based on the Fibonacci Spiral

Creating Div For Photo image and Photo Title

I wanted to combine the photo title and photo image from the photo feed so each photo had a caption, to do this I did the same process as re-sizing each photo, but used concatenation to create different divs

// for each function loads photoitem, parameter in which if the counter for the photos is less than 6 + 1 photo
foreach ($photoxml->channel->item as $photoitem) {
	if($photocounter < 20){
	    $photocounter=$photocounter+1;
}  
// this is the proccess to create a new div for each photo, combining both the photo guid and the photo title (caption)
if($photo2counter < 20){
	    $photo2counter=$photo2counter+1;
}  
	//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. 
	print "
  
$photoitem->title 
";
	print "\n";
    if($photocounter==20){
	     break;
		    } 
}

Now the photo and the photo caption move around together when I change the positioning of them using CSS (sample selection below)

#photodiv1 {
position: relative; left: 0px; top: 0px; 
z-index: 100; 
color: #FFFFFF;
font-size: 16px;
text-shadow: 0px 2px 3px #555;
font-weight:900;
}
#photodiv2 {
position: relative; left: 0px; top: 0px; 
z-index: 100; 
color: #FFFFFF;
font-size: 16px;
text-shadow: 0px 2px 3px #555;
font-weight:900;
}
#photodiv3 {
position: relative; left: 0px; top: 0px; 
z-index: 100; 
color: #FFFFFF;
font-size: 16px;
text-shadow: 0px 2px 3px #555;
font-weight:900;
}

The css and the php produce in the HTML:

 
 is sitting at the couch! 
 
 is weight lifting 
 
 this is my wall 

Small Changes

Just wanted to change the 'ches_cat' (the name of my twitter account) to 'me' in each of the twitter items. To do this I used the string replace, which searches each string and replaces a particular word or pattern:

//changing ches_cat in the feed to me, for all the first 20 feeds. 
  for ($i = 0; $i < 20; $i++) {
    $twitterxml->channel->item[$i]->title = str_replace('ches_cat',
        'me', $twitterxml->channel->item[$i]->title);
}

Now all matches found with 'ches_cat' are replaced with 'me', for the first 20 items. (this is how many the feed is taking)

Design based on Fibonacci Spiral

Came across this image in my research (the golden ratio:


(Source location: http://hmlowlifes.wordpress.com/2010/10/21/the-golden-ratio/)

Image grabbed from the lifestyle blog (so credit to this blog)









Therefore we can see how the twitter website obeys the golden rule of the Fibonacci spiral, in the same way I want to replicate this in the design of my website to reflect on this way of sharing our data on the internet:

(Click on image to see enlarged image):

Problem Solved

The problem with the relative positioning as that the iframe had absolute positioning and the divisions were being floated left therefore changing where they were displayed on the page.

The next task is to do some mock up designs of how I will display these items on the page, in which I show the linearity of this feeds,

Possibly like the Fibonacci Spiral as I mentioned before, but have it display exactly as I wanted.

Moreover have a tag under each picture explaining what I am doing

Problems with Relative Positioning

Having some problems with relative positioning on my page:

For example for photo 3, 4 and 5 grabbed from my feed I have to set the following positioning relative to the outside frame in order for them to be displayed next to one another.

It is is possible they are not getting relatively positioning to the outside frame, but it should automatically position to the container division.

This is a problem because it is hard to know how to position the elements on the page because they all work off different relative positions for some reason.

#photo3 {
width: 180px;
height : auto;
float: left; 
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
position: relative; left: 200px; bottom: -120px; 
z-index: 100; 
}
#photo4 {
width: 140px;
height : auto;
float: left;
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
position: relative; left: -50px; bottom: -200px; 
z-index: 100;

}
#photo5 {
width: 120px;
height : auto;
float: left;
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
position: relative; left: -250px; bottom: -230px; 
z-index: 100;

Updating Design and Twitter and Photo Layout

Testing

Just testing photos uploaded from my phone, they seem to work and get loaded from the feed as well as my twitter updates

All though having some problems with updating GPS via my phone, will do a proper test in the next couple of days:

http://mydataflows.herobo.com/myDataflows2/mydataflows2.php

Update

Design Problems:

Elements on the page moving around when a photo or tweet is added, needs to be fixed.

Designs

A different design for my website, I have opted for a block layout for displaying this data and laying it over the iframe map.

Screenshot: (click on to enlarge)

And link to website:

http://mydataflows.herobo.com/myDataflows3/mydataflows3.php

fibbonaci spiral

I was thinking about how to display the photos and the twitter updates, and was turned to the fibbonaci spiral as it provides a way to display the data as if spiraling outwards.


But more than this: 'In spiritual terms, the ever-outward growing shape of the Fibonacci Spiral perfectly traces the path we should all be journeying upon. From its inner centre at "0", which equates to us in our present physical form, here we have an ever-expanding pathway of enlightenment that symbolises our spiritual growth as we head out slowly towards the "Love Supreme".. Either way though, both versions offer us a return to source.' (http://www.medwaycropcircle.co.uk/article6.htm). Therefore resembles the spiral of life, which could tie into how we present our own lives on these social networking sites, data spiraling around, a endless cycle that will never end.


Therefore is something I could attempt to replicate when displaying the data.

Absolute versus Relative Positioning

The twitter divs and photo divs were moving around the page in accordance with the browser, to fix this I put a wrapper division around all the other divisions, and positioned them relative to the wrapper div:
Link: http://mydataflows.herobo.com/myDataflows2/mydataflows2.php
HTML/PHP

// as you can see a wrapper
// this is to add space to the top and the bottom of the wrapper, otherwise it collapses the wrapper


 

Last Update and Location: ";
// loads an external RSS file
$twitterxml = simplexml_load_file('http://twitter.com/statuses/user_timeline/64679821.rss');
$photoxml = simplexml_load_file('http://feed1122.photobucket.com/albums/l530/chesterloffman/account.rss');
$locationxml = simplexml_load_file('http://geekvault.no5.at/blogloc/feed/chesterloffman.xml');

// for each function loads photoitem, parameter in which if the counter for the photos is less than 6 + 1 photo
foreach ($photoxml->channel->item as $photoitem) {
	if($photocounter < 6){
	    $photocounter=$photocounter+1;
}  
	//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
	print "

";
    print "
";
// if the counter reaches 6, break the function, meaning that it will only display 6 photos in total from the RSS feed. 
    if($photocounter==6){
	     break;
		    } 
}
print "


";
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 */
    print "

$twitteritem->title
";
    print "


";
if($twittercounter < 6){
	$twittercounter=$twittercounter+1;
	if($twittercounter==6){
	break;
	}
	}
	}

foreach ($locationxml->entry->title as $locationitem) {
	if($locationcounter < 1){
	    $locationcounter=$locationcounter+1;
}  
	//grabs the latest feed for location update, date and place
	print "

$location$locationitem'
";
    print "
";
// if the counter reaches 1 it will break the function as I only want to grab the first function
    if($locationcounter==1){
	     break;
		    } 
}

?>



 

CSS: (as you can see all the elements are positioned relative, and I now have a wrapper division.

body {
background:gray;
text-align:center;
margin:0px;
padding:0;
font:normal 0.8em/1.2em verdana,aria,sans-serif;
color:#666;
	}
.resize {
width: 100px;
height : auto;
}
.resize {
width: auto;
height : 150px;
}
.divtwitter {
font-family:"Times New Roman", Times, serif;
font-size:20px;
color:white;
text-align:left;
float: left;
width: 400px;
height: auto;
}
.divphotobucket {
float: left;
}
#divspacer {
  clear: both;
  }

#wrapper {
	width: 1024px;
	margin-left: auto ;
	margin-right: auto ;
	border: 1px solid black;
	padding: 0px;
}
#photo1 {
width: 250px;
height : auto;
border: 5px solid #ddd;
padding: 5px; /*Inner border size*/
background: #fff; /*Inner border color*/
float: left;
position: relative; left: -50px; bottom: -10px; 
z-index: 100 
}
#photo2 {
width: 220px;
height : auto;
float: left;
filter:alpha(opacity=90);
-moz-opacity:.80;
opacity:.80;
position: relative; left: 300px; bottom: 10px; 
z-index: 100;
}
#photo3 {
width: 180px;
height : auto;
float: left; 
border: 5px solid #ddd;
padding: 5px; /*Inner border size*/
background: #fff; /*Inner border color*/
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
position: relative; left: -40px; top: 200px; 
z-index: 100; 
}
#photo4 {
width: 140px;
height : auto;
float: left;
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
position: relative; left: -40px; top: 200px; 
z-index: 100;

}
#photo5 {
width: 120px;
height : auto;
float: left;
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
position: relative; left: -40px; top: 200px; 
z-index: 100;
}
#photo6 {
width: 80px;
height : auto;
float: right;
border: 5px solid #ddd;
padding: 5px; /*Inner border size*/
background: #fff; /*Inner border color*/
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
position: relative; left: -40px; top: 200px; 
z-index: 100; 
}
#twitter0 {
font-size: 26px;
color: white;
text-shadow: 0px 2px 3px #555;
float: left;
padding-top: 20px;
position: relative; left: -40px; top: bottom: -50px; 
z-index: 100; 
}
#twitter1 {
font-size: 26px;
color: white;
text-shadow: 0px 2px 3px #555;
position:relative;
padding-top: 35px;
float: left;
position: relative; left: 70px; bottom:: 400px; 
z-index: 100; 
}
#twitter2 {
font-size: 26px;
color: white;
text-shadow: 0px 2px 3px #555;
float: left;
padding-top: 25px;
position: relative; left: 150px; bottom: 350px;  
z-index: 100; 
}
#twitter3 {
font-size: 26px;
color: white;
float: left;
text-shadow: 0px 2px 3px #555;
position: relative; left: 200px; bottom: 300px; ; 
z-index: 100; 
}
#twitter4 {
font-size: 16px;
color: white;
float: left;
text-shadow: 0px 2px 3px #555;
position: relative; left: -40px; bottom: 400px; 
z-index: 100; 
}
#twitter5 {
font-size: 12px;
color: white;
float: left;
text-shadow: 0px 2px 3px #555;
position: relative; left: -40px; bottom: 100px;  
z-index: 100; 
}
#twitter6 {
font-size: 8px;
color: white;
float: left;
text-shadow: 0px 2px 3px #555;
position: relative; left: 500px; bottom: 100px; 
z-index: 100; 
}
#location1 {
font-size: 15px;
color: white;
float: left;
position: relative; left: 300px; bottom: 598px;  
z-index: 100; 
}
#map_canvas {
	float: left;
	position: absolute; top: 0; bottom: 0; 
left: 0; right: 0;
	padding-top: 155px;
}

Possible design for the layout

I have designed a layout for the website, as you can see I want the twitter updates and photo updates to spiral inwards on the latest location I am on the map, with the latest twitter and update being the biggest:

MyDataFlows URL

http://mydataflows.herobo.com/mydataflows.php

Small Update - Adding update and last location

I have added the latest location and place from the blogloc RSS feed by grabbing the latest update from the feed

Screenshot: (below 'MyDataFlows')

Code that produces the date and location update:

foreach ($locationxml->entry->title as $locationitem) {
 if($locationcounter < 1){
     $locationcounter=$locationcounter+1;
}  
 //grabs the latest feed for location update, date and place
 print "
$location$locationitem'
";
    print "
";
// if the counter reaches 1 it will break the function as I only want to grab the first function
    if($locationcounter==1){
      break;
      } 
}

Review

What needs to be done next:

- Design, relation between text, images and map - design several CSS style sheets to see what looks best
- Print code in the background of the website to self-reflexively show how it grabs all this data from external websites

Update - Iframe overlay

Managed to display the googlemaps as an iframe in the background using absolute positioning and using z Index to position the elements in terms of order of the divs and which becomes overlayed over what, and using positioning attached to each frame to decide where it is displayed over the map

Screenshot: (click to see bigger version)

Current code:

  








channel->item as $photoitem) {
	if($photocounter < 6){
	    $photocounter=$photocounter+1;
}  
	//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
	print "

";
    print "
";
// if the counter reaches 6, break the function, meaning that it will only display 6 photos in total from the RSS feed. 
    if($photocounter==6){
	     break;
		    } 
}
print "


";
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 */
    print "
$twitteritem->title
";
    print "


";
if($twittercounter < 6){
	$twittercounter=$twittercounter+1;
	if($twittercounter==6){
	break;
	}
	}
	}
?>

CSS Stylesheet:

body {
background:gray;
text-align:center;
margin:20px;
padding:0;
font:normal 0.8em/1.2em verdana,aria,sans-serif;
color:#666;
	}
.resize {
width: 100px;
height : auto;
}
.resize {
width: auto;
height : 150px;
}
.divtwitter {
font-family:"Times New Roman", Times, serif;
font-size:20px;
color:white;
text-align:left;
float: left;
width: 400px;
height: auto;
}
.divphotobucket {
float: left;
}
#photo1 {
width: 320px;
height : auto;
border: 5px solid #ddd;
padding: 5px; /*Inner border size*/
background: #fff; /*Inner border color*/
float: left;
position: absolute; left: 50px; top: 150px; 
             right: 0px;
z-index: 100 
}
#photo2 {
width: 320px;
height : auto;
float: left;
filter:alpha(opacity=90);
-moz-opacity:.80;
opacity:.80;
position: absolute; left: 300px; top: 500px; 
             right: 0px;
z-index: 100;
}
#photo3 {
width: 260px;
height : auto;
float: left; 
border: 5px solid #ddd;
padding: 5px; /*Inner border size*/
background: #fff; /*Inner border color*/
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
position: absolute; left: 800px; top: 400px; 
             right: 0px;
z-index: 100; 
}
#photo4 {
width: 220px;
height : auto;
float: left;
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
position: absolute; left: 400px; top: 300px; 
             right: 0px;
z-index: 100;

}
#photo5 {
width: 180px;
height : auto;
float: left;
filter:alpha(opacity=20);
-moz-opacity:.20;
opacity:.20;
position: absolute; left: 900px; top: 300px; 
             right: 0px;
z-index: 100;
}
#photo6 {
width: 120px;
height : auto;
float: right;
border: 5px solid #ddd;
padding: 5px; /*Inner border size*/
background: #fff; /*Inner border color*/
filter:alpha(opacity=10);
-moz-opacity:.10;
opacity:.10;
position: absolute; left: 1000px; top: 300px; 
             right: 0px;
z-index: 100; 
}
#twitter0 {
font-size: 40px;
color: white;
text-shadow: 0px 2px 3px #555;
float: right;
padding-top: 20px;
position: absolute; left: 1100px; bottom: 100px; 
             right: 0px;
z-index: 100; 
}
#twitter1 {
font-size: 30px;
color: white;
text-shadow: 0px 2px 3px #555;
position:relative;
padding-top: 35px;
float: left;
position: absolute; left: 1000px; bottom: 200px; 
             right: 0px;
z-index: 100; 
}
#twitter2 {
font-size: 26px;
color: white;
text-shadow: 0px 2px 3px #555;
float: right;
padding-top: 25px;
position: absolute; left: 900px; bottom: 300px; 
             right: 0px;
z-index: 100; 
}
#twitter3 {
font-size: 22px;
color: white;
text-shadow: 0px 2px 3px #555;
position: absolute; left: 800px; bottom: 400px; 
             right: 0px;
z-index: 100; 
}
#twitter4 {
font-size: 16px;
color: white;
text-shadow: 0px 2px 3px #555;
position: absolute; left: 700px; bottom: 500px; 
             right: 0px;
z-index: 100; 
}
#twitter5 {
font-size: 12px;
color: white;
text-shadow: 0px 2px 3px #555;
position: absolute; left: 600px; bottom: 600px; 
             right: 0px;
z-index: 100; 
}
#twitter6 {
font-size: 8px;
color: white;
text-shadow: 0px 2px 3px #555;
position: absolute; left: 500px; bottom: 700px;  
             right: 0px;
z-index: 100; 
}
#map_canvas {
	position: absolute; top: 0; bottom: 0; 
left: 0; right: 0;
	padding-top: 150px;
}

Next:

The next step is to be able to display the google maps in the background of images and twitter updates.

- Possibly using an Iframe as a background image if possible

Print Screen of Website Currently

Producing individual Divs for each twitter update and photo

This shows produces an individual div for each element taken from the RSS file :

  




channel->item as $photoitem) {
	if($photocounter < 6){
	    $photocounter=$photocounter+1;
}  
	//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
	print "

";
    print "
";
// if the counter reaches 6, break the function, meaning that it will only display 6 photos in total from the RSS feed. 
    if($photocounter==6){
	     break;
		    }
 
  
}

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 */
    print "
$twitteritem->title
";
    print "
";
if($twittercounter < 6){
	$twittercounter=$twittercounter+1;
	if($twittercounter==6){
	break;
}
     
}
}
?>

Update: what to do next

I now have to work out how to split individual parts of the RSS feed into div tags rather than them all displaying in one division, therefore enabling me to place each twitter and photo feed where I want on the place, and are able to customize each image as I want using CSS styles.

1) I have to use concatination - joining two strings together
2) Using an array function
2) Using a for each function to display individual divisions for each element of the XML file
4) Using a counter to plus 1 to each image, so that they have individual class names e.g. 'photo1' 'photo2'
5 Putting a break function in so that it only displays this for a set amount of photos/twitter feeds.

PHP Parsing Photobucket

Here is the Photobucket feed which is being parsed:

  




 and 
 functions

print "
\n";
foreach ($twitterxml->channel->item as $twitteritem) {
    print "
$twitteritem->title
\n";
}
print "
";

print "

";

print "
\n";
foreach ($photoxml->channel->item as $photoitem) {
	//loads tss feed variable of the  image and and img tags display as a jpeg, also resizing the images as thumbnails
    print "\n";
}
print "
";

?>

And the HTML that is produced:

  




ches_cat: about to go off to uni... time for some film philosophy
ches_cat: is about to get started on this essssayyyyyyyyy!
ches_cat: yooooo

ches_cat: also sopranos what an awesome show! where has it been all my life?
ches_cat: is about to sleep

lots to think about - dissertation, my web project and a philosophy exam! But was happy to get a 69 for his exam!!
ches_cat: yo
ches_cat: hello
ches_cat: hi
ches_cat: i am sitting in the su with ant, marta and aggi
ches_cat: enjoyed misfits. whos the masked dude??
ches_cat: doesn't like gin anymore :'(
ches_cat: loved 'how to train your dragon' ace animation!

ches_cat: whos watching?
ches_cat: has just finished his second run of the week, a bit hard this time. getting cold.
ches_cat: is going to have a cup of tea with nem. woop.
ches_cat: is feeling a lot better. roll on game studies presentation.
ches_cat: is feeling ill :(
ches_cat: has just been on a run, feels energized!!!
ches_cat: is ready to start the week! still slightly hung-over though.
ches_cat: is hungovvvver