For this lab you will demonstrate your multimedia skills on the web by creating an active desktop with your blog entries and photo gallery.
For this lab you will need:
- Google Blogger (Blogspot) Account
- Yahoo Flickr Account
- Flickr API Key
Part of you lab is showing that you have the knowledge and problem solving skills required to figure out what the above are and how to get them.
In your Documents folder create a file called lastname_firstname.html and using your favorite text editor or Dreamweaver or whatever you prefer create an html page for yourself that has at least the following:
<html>
<head>
<title>Firstname Lastname's Blog & Pics</title>
</head>
<body>
<div style="float: left;" id="blogger">
If this content remains, the Blog failed to load :(
</div>
<div style="float: left;" id="images">
If this content remains, the Pics failed to load :(
</div>
</body>
</html>
If you save it and open it in any w3c complaint browser (which includes IE only if you're using Chrome Frame)
You should see that your blog and your pics failed to load. Sad day, eh?
Well, have no fear, jQuery is here!
To activate your jQuery put the following code just above </head>, save, and reload.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
To create a simple Blogger widget put the following code just above </html>, save, and reload.
<script style="text/javascript">
var yourBlog = 'http://seriouslysoblessed.blogspot.com'; // FULL style example
var yourBlog = 'http://sweetnlopes.blogspot.com'; // SHORT style example
// How to switch between SHORT and FULL
// http://help.blogger.com/bin/answer.py?hl=en&answer=42662
var howManyPosts = 15; // Max 100
/**
* Retrieves N feeds as JSON and populate the 'blogger' div.
*/
bloggerFeed = '/feeds/posts/default?alt=json-in-script&max-results=' + howManyPosts + '&callback=?';
$.getJSON(yourBlog + bloggerFeed, function (json) {
var entries = json.feed.entry;
// in this loop we get the entry from the feed and parse it
$.each(entries, function(i, entry) {
// if the Blogger-feed is set to FULL, then the content is in the content-field
// if the Blogger-feed is set to SHORT, then the content is in the summary-field
var postcontent = "";
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
}
var posttitle = entry.title.$t;
var posturl;
// check all links for the link with rel = alternate
if (i == entries.length) {
return false;
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
// get the postdate, take only the first 10 characters
var postdate = entry.published.$t.substring(0,10);
var postauthor = entry.author[0].name.$t;
$('#blogger').append('<br>'
+ '<h3>' + postdate + ' — ' + entry.title.$t + '</h3>'
+ postcontent + '<br>'
+ '<br/><a href="'+ posturl + '" style="font-size: small;">Read it on Blogger</a><br>'
+ '<br>'
);
});
});
</script>
To create a simple Flickr widget put the following code just above </html>, save, and reload.
<script language="text/javascript">
var flickrId = "99999999@N99";
var flickrApiKey = "00000000000000000000000000000000";
//var flickrAuthTok = "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA";
//var flickrApiSig = "FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF";
var flickrFeeds = "http://www.flickr.com/services/feeds/";
var flickrREST = "http://api.flickr.com/services/rest/";
var flickrOpts = "extras=media&format=json&jsoncallback=?"
var flickrTags = new Array();
var flickrSets = new Array();
/**
* Load a single image or video with a link
*/
function loadMedia(i, photo) {
//$j.each(data.photoset.photo, function(i, photo) {
var mediaType = '#' + photo.media;
var mediaImage = '';
photo.resource = "http://farm" + photo.farm + '.static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + "_m.jpg";
if ('video' == photo.media) {
mediaImage = "
";
}
$j("<div style='position:relative;' id='" + photo.id + "'/>")
.appendTo(mediaType)
//.appendTo('#video')
.append("<img src='" + photo.resource + "'")
.append("<center><h6>" + photo.title + mediaImage + "</h6></center>")
.wrap("<a target='_blank' href='http://www.flickr.com/photos/" + flickrId + '/' + photo.id + "'></a>");
//});
//$j('#images').slideDown();
}
// Photos
$j.getJSON(flickrREST + "?method=flickr.people.getPublicPhotos&user_id=" + flickrId + "&api_key=" + flickrApiKey + '&' + flickrOpts, function(data){
//alert('data: ' + $j.toJSON(data));
$j.each(data.photos.photo, loadMedia);
$j('#images').slideDown();
});
</script>
For extra credit, find any other web service (Google has several) and add a widget for it to your homepage.
No comments:
Post a Comment