CSS Assignment

Penn State University -- School of Visual Arts
Fall 2011
ART 416 Advanced Web and Net Art: Multimedia Publishing
Professor: Eduardo Navas (ean13@psu.edu)
T TH 02:30P - 05:30P

Office Hours: Tuesday 12 PM - 2 PM, by appointment
Please contact me via e-mail

Back to 416 Main Page

Introduction to YouTube APIs

This lecture is for the weekly assignment due on November 15, 2011. Please make sure to read through it and complete the assignment on time.

First, make sure to look over the following page:
http://www.ibm.com/developerworks/xml/library/x-youtubeapi/

Once you are familiar with the description of the different options for API access, download the Zip file with all the php pages. The zip is available at the bottom of the link listed above. You can also download the file from Angel.

Upload the pages to your server and test them.

The following pages should work. I provide their names with online examples:

most-frequent.php: http://newmediafix.net/youtubeapi_ready/most-frequent.php
top-five.php: http://newmediafix.net/youtubeapi_ready/top-five.php
travel.php: http://newmediafix.net/youtubeapi_ready/travel.php

There are three pages that don't work properly. The reasons for this vary, but in part it has to do with the files being developed in 2008. The files that don't work properly are: categories.php, details.php, search.php

I will explain how to adjust the search.php file, as this one would be very beneficial for you to include as a page on your website. But before I go over the modification of that file, I want to explain how you would adjust the CSS for all the pages you will use.

CSS Implementation

When you open the pages, make sure to look at the code. The easiest and most efficient thing to do is to place your CSS "div" tag or "style id" which you developed for the main content of your website right before where the php starts:

<body>

<div id ="content" >
<?php
// set URL for XML feed containing category list
$catURL = 'http://gdata.youtube.com/schemas/2007/categories.cat';

---

php API content here

---

end of php page

</div>

</body>

---------------------

When you do this, you must also make sure that you are linked on the head of the page to the proper CSS style sheet as follows:

<head>

</head>

--------------------

Note that if you have specific ids for your links on your regular site, you will need to adjust these on your API page as well. You will need to study the file and decide where to place the div ids between the php--test and debug. Just make sure to place the opening div tag before any "<?php" tag, and to place the </div> after the "?>" tag. Otherwise you will get an error. Take your time when doing this.

--------------------

Adjusting the Travel File

The file you are most likely to use aside from the search.php file is the travel.php file. You can modify this file to search for any word of your choice. To do this, open the travel.php document, and look for the following rss feed on line 12 (if you're using a web editor such as Dreamweaver):

$feedURL = 'http://gdata.youtube.com/feeds/api/videos/-/Travel/';

You can change the word "Travel" at the end of the line to an of your choice: rugby, cg, animation, sound, gaming, etc. You will then get the proper feed from YouTube, for example:

$feedURL = 'http://gdata.youtube.com/feeds/api/videos/-/Rugby/';

Rename the page and save it. It should work. You can then adjust the CSS as previously explained.

---------------------

Adjusting the search.php Page

If you access the search.php as is, you will be able to input information, but you will get an error when you submit your query. Therefore you need to make a couple of adjustments for the search page to work properly.

When submitting a query, you will get an error that tells you that the class "Pager/pager.php" does not exist. What you will need to do is create a page named "pager.php" and place it in a folder titled "Pager" then place that folder inside of the folder that holds the search.php file.

On the pager.php page you will need to copy and paste part of the code that is already available on the search.php file. It begins with <h1>Search results</h1> and ends with </table>

I include the code below. Please make sure to read past the code to continue with this lecture.

Copy and paste the following code to your pager.php:

<body>

<h1>Search results</h1>
<?php echo $total; ?> items found.
Showing items <?php echo $startOffset; ?> to
<?php echo $endOffset; ?>:
<p/>

<?php
// print page links
echo $links['all'];
?>

<table>
<?php
// iterate over entries in resultset
// print each entry's details
foreach ($sxml->entry as $entry) {
// get nodes in media: namespace for media information
$media = $entry->children('http://search.yahoo.com/mrss/');

// get video player URL
$attrs = $media->group->player->attributes();
$watch = $attrs['url'];

// get video thumbnail
$attrs = $media->group->thumbnail[0]->attributes();
$thumbnail = $attrs['url'];

// get <yt:duration> node for video length
$yt = $media->children('http://gdata.youtube.com/schemas/2007');
$attrs = $yt->duration->attributes();
$length = $attrs['seconds'];

// get <yt:stats> node for viewer statistics
$yt = $entry->children('http://gdata.youtube.com/schemas/2007');
$attrs = $yt->statistics->attributes();
$viewCount = $attrs['viewCount'];

// get <gd:rating> node for video ratings
$gd = $entry->children('http://schemas.google.com/g/2005');
if ($gd->rating) {
$attrs = $gd->rating->attributes();
$rating = $attrs['average'];
} else {
$rating = 0;
}

// get video ID
$arr = explode('/',$entry->id);
$id = $arr[count($arr)-1];

// print record
echo "<tr><td colspan=\"2\" class=\"line\"></td></tr>\n";
echo "<tr>\n";
echo "<td><a href=\"{$watch}\">
<img src=\"$thumbnail\"/></a></td>\n";
echo "<td><a href=\"{$watch}\">
{$media->group->title}</a><br/>\n";
echo sprintf("%0.2f", $length/60) . " min. | {$rating} user rating |
{$viewCount} views<br/>\n";
echo $media->group->description . "<br/>\n";
echo "<a href=\"details.php?id=$id\">More information</a>
</td>\n";
echo "</tr>\n";
}

?>
</table>

</body>

Once you have this set up, you will be able to get search results for any term or series of terms. But you will have some bugs if you search for 100 selections at a time. Just make sure that you are able to search for "user views" up to 50. 100 views will give you a major bug which I'm looking into at the moment.

You will also get an error at the very bottom of your search results. This one will not be visible unless you scroll all the way to the bottom. It looks like this:

Fatal error: Class 'Pager' not found in /home4/newmedia/public_html/youtubeapi_ready/search.php on line 106

I'm working on these bugs and will let you know when I have them worked out. In the mean time you can use the pages with the current adjustments.

---------------------

Here is my example of the search.php page. Search any terms you like:

search.php: http://newmediafix.net/youtubeapi_ready/search.php

The adjusted files are also available on Angel, so make sure to download them as well.

---------------------

Homework due on November 15, 2011 at the beginning of class:

Incorporate your own version of the travel.php file on your website. You should include a search option, which means that you will have to combine the code of the travel.php as well as the search.php page into one page.

I suggest that you make these files work properly separately, and once they are fine you can combine them into one file. Make sure your CSS style sheet is properly linked as well.

Any questions, don't hesitate to contact me as usual via Angel or through my PSU e-mail: ean13@psu.edu