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