< Browse > Home / Archive by category 'Web Development'

| RSS

Zend Framework and Zend Gdata API provide a simple and effective solution to display pictures and galleries from your picasa account in your own custom website. Lets take one of the public galleries in picasa show it in a custom php page in this website.

Zend Framework
Before we start. In order to use Zend Gdata API, you need to have Zend framework (1.6 or higher) installed, If you have the full framework package installed , you won’t need to worry about anything, you can go ahead and start calling the APIs directly, In case if you don’t have the full framework package installed, you will have to download and configure Google Data Client Library. Details of setup and configuration are listed in the following link

http://code.google.com/apis/gdata/articles/php_client_lib.html#gdata-installation

CODE :)
The following url refers to a public picasa gallery

http://picasaweb.google.com/shasankar/SampleGallery#

The URL has two important pointers, the picasa user id the one that follows the picasaweb.google.com domain, its usually the picasa user name, in some cases it can also be a long alphanumeric string, this is the user id, the other one is the gallery name, in this case it is ‘SampleGallery’

The following script allows you to load pictured directly into your website


<?php
error_reporting(E_ALL);
require_once 'Zend/Loader.php';
Zend_Loader::loadClass('Zend_Gdata_Photos');

// Album and User
$sUserID = "shasankar";
$sAlbumName = "SampleGallery";

$serviceName = Zend_Gdata_Photos::AUTH_SERVICE_NAME;
$gp = new Zend_Gdata_Photos();
$query = $gp->newAlbumQuery();
$query->setUser($sUserID);
$query->setAlbumName($sAlbumName);
$query->setImgMax("800");
$query->setThumbSize("160");
$albumFeed = $gp->getAlbumFeed($query);
$sPrintThumbs = "";

foreach ($albumFeed as $albumEntry) {
if ($albumEntry->getMediaGroup()->getThumbnail() != null) {
// Load Thumbnail Info
$mediaThumbnailArray = $albumEntry->getMediaGroup()->getThumbnail();
$ThumbnailUrl = $mediaThumbnailArray[0]->getUrl();
$ThumbnailHeight = $mediaThumbnailArray[0]->getHeight();
$ThumbnailWidth = $mediaThumbnailArray[0]->getWidth();
// Load Picture Info
$mediaArray = $albumEntry->getMediaGroup()->getContent();
$ImageUrl = $mediaArray[0]->getUrl();
$sImageTitle = $albumEntry->getMediaGroup()->getDescription()->text;
$url = $albumEntry->getLink('alternate')->href;

$sLinkString = <<<LTEXT
<a href="$ImageUrl" title="$sImageTitle"><img src="$ThumbnailUrl" width="$ThumbnailWidth" height="$ThumbnailHeight" /></a>
LTEXT;
$sPrintThumbs .=$sLinkString ;
}
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Loading pictures from Picasa Gallery</title>
</head>
<body >
<div>
<div>
<h3>SampleGallery (Picasa)</h3>

</div>
<div>
<?php echo $sPrintThumbs; ?>
</div>
</div>
<div class="clear"></div>
</body>
</html>

The Api allows lot of customization options, thumbnail size, final image size, number of results per page, etc, these setting have to passed along with the Album query that is sent to picasa.

Picasa album in Custom Webpage

Related Links

If you want to display private picasa galleries in your website, you can make use of zend authentication api, you can read more about it here

http://www.ibm.com/developerworks/library/x-picasalbum/#c5

[ View Post ]

CSS Hacks for IE8

[ More ] Dec 17, 2009 | No Comments | Posted in HowTo, Web Development |

Here it is, CSS Hacks for IE8, But, be little cautious while using them, sometimes, they may not work well with complex CSS syntaxes.

IE8 Standards-Mode Only:

.test { color /*\**/: blue\9 }

All IE versions, including IE8 Standards Mode:

.test { color: blue\9 }

[ View Post ]

At last I got my Google wave account activated yesterday, but it didn’t carry any additional invites that can be passed on to others. Its a bit tricky if it doesn’t carry additional invites, since you wont be able to share and evaluate this technology with others. Please take a look at some of the Screenshots of Google Wave.

Google Wave Homepage

Google Wave Homepage

A Public Wave

A Public Wave

The Wave API will allow plug-in developers to develop extensible plug-ins. Sudoko plug-in was quite interesting. So was the Google Maps plug-in, the live connectivity was just too good.

Playing Sudoko in GW

Playing Sudoko in GW

GW Error Messages

GW Error Messages

Google Wave Extensions

Google Wave Extensions

On a overview, Google wave seems to show the light of how the next generation of communications will look like. This technology has the prospect to replace email altogether (am i hyping it too much ??). But on an overview i am not able to define Google wave properly, yes it is a collaboration platform, but its a mix of email, instant messaging, blogs and other things. I will not term Google wave as a social networking platform/tool, because this is more sort of a communications platform, more to do with interactions and collaboration, and real time information exchange (more reason being, it could attract an access ban by employers, if termed so.. he he :) ). I will take a look at API’s now, and will try to post if i am able to build something out of it.

[ View Post ]

Google wave

[ More ] Oct 15, 2009 | No Comments | Posted in General, Web Development |

Last week, one of the developer in my office was talking about Google Wave, although I had heard about wave before, I thought it was just a social networking tool just in lines of flock , more to do with service integration (assumption is the biggest evil). but only until i saw this small(but long) video about Wave on Google I/O did i realize .. that this technology has the potential to bring a change in the way we communicate, interact and do things with the internet.

Look at this video

This is too cool :)

I am anxiously waiting to get my wave invite..

[ View Post ]

Often when working with large datasets, you will come across issues related to intense event overload for objects like table cells. This could translate to poor client JavaScript performance. The root cause for the performance lag is the large number of events that are associated and handled by web page at the client. Lets consider a scenario of highlighting cells in a table as follows

HTML


<table id="resultSetTable">
<tr id="row1">
<td class="nameCell"> UPS </td>
<td class="priceCell"> 2500 </td>
</tr>
<tr id="row2">
<td class="nameCell"> Mouse</td>
<td class="priceCell"> 300 </td>
</tr>
.
.
.
<tr id="row859">
<td class="nameCell"> Keyboard </td>
<td class="priceCell"> 250 </td>
</tr>
</table>

Javascript to highlight the selected cell


<script type="text/javascript">
$(function(){
$('.nameCell').click(function(){
if ($(this).css('background-color') != 'rgb(255, 0, 0)')
$(this).css('background-color', 'red');
else
$(this).css('background-color', 'green');
});

});
</script>

Although the code above works properly, the inefficiency of the above list code can be identifeid if the code is put through large datasets, since the javascript has to assign the event handler to all cells of the class “nameCell”, the Javascript engine gets overloaded with events, in a scenario of a few thousand rows, there are equal number of events being declared and handled simultaneously. This in some cases might cause the browser to crash. I got the following error when I tested this code with a large dataset on Firefox.

A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.
Script: jquery-1.3.2.min.js:18

An alternate way to handle this problem will be to assign the event handler to a larger parent object, and to execute the event handler by validating the properties of the event. In this case the larger parent object is the Table. We can drill down to the class of the clicked cell of the table, see if it matches the ‘nameCell’ class type and then run the instructions, based on the validation. This mechanism is known as event delegation.


<script type="text/javascript">
$(function(){
$('table').click(function(event) {
var $thisCell, $tgt = $(event.target);
if ($tgt.is('td')) {
$thisCell = $tgt;
} else if ($tgt.parents('td').length) {
$thisCell = $tgt.parents('td:first');
}
// now do something with $thisCell
if ($($thisCell).attr("class")=="nameCell")
{
if ($($thisCell).css('background-color') != 'rgb(255, 0, 0)')
$($thisCell).css('background-color', 'red');
else
$($thisCell).css('background-color', 'green');
}
});
});
</script>

The web application saves lots of client computing power by avoiding the replication of thousands of events by delegating the event to a parent object. Proper use of event delegation in jQuery can help in excellent performance optimization of the web application.

References

  • Working with Events by Karl Swedberg -
    http://www.learningjquery.com/2008/03/working-with-events-part-1
[ View Post ]

  • Page 1 of 2
  • 1
  • 2
  • >