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