ClickOffline.com

Show pictures from Picasa albums in your custom website using Zend Framework

Kris — Sun, 13 Jun 2010 12:47:11 +0000

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


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;
$sPrintThumbs .=$sLinkString ;
}
}
?>



 Loading pictures from Picasa Gallery




SampleGallery (Picasa)

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

CSS Hacks for IE8

Kris — Thu, 17 Dec 2009 02:26:49 +0000

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 }

Public waves in Google wave

Kris — Sat, 07 Nov 2009 15:16:13 +0000

Public waves allow wave users to publish and share their waves with other Google Wave users, and hence allowing everyone to contribute and make changes in the wave

Accessing public waves

To access public waves, you will need to enter the following keyword, in the search box

with:public

To search public waves, you can use a with:public following by the search string, for eg.

with:public Chennai

Will return all public waves with the keyword Chennai

Accessing public waves

Making a wave public

In order to make a wave public and to grant access to everyone, you will need to give access to the user called public@a.gwave.com. In the add contact screen , fill in public@a.gwave.com and Press “Enter”, even if the submit button is not activated, the public user will be added to your account. This looks like a bug in the wave system, expecting Google to fix it soon.

Once this user is added, any waves published along with this user will be available in public domain.

Google Wave Developer Preview - First Impressions

Kris — Thu, 22 Oct 2009 06:18:56 +0000

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

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

GW Error Messages

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.

Google Chrome on Ubuntu Linux

Kris — Tue, 20 Oct 2009 15:15:02 +0000

Atlast I managed to find the link for Ubuntu version of Google chrome. Please check below. This one runs faster and takes up very very less memory when compared to firefox. Very cool download

The minimalistic approach of Google chrome gives itself an unique edge over other browsers in terms of speed comparison ratios. Google has always pioneered in offering technology to meet the exact needs of people and thus attracting users by simplicity. It is so very evident in all their engineering, take Google search, Gmail, Gtalk, and now chrome. Google has been successful by offering just the basics in a perfect manner. And thats the same reason why I was attracted to install Google Chrome in Linux.

Also check this link for an interesting comparison of Linux based browsers, looks like Firefox is way behind when compared to Opera or Chrome..

http://penguininside.blogspot.com/2009/08/web-browser-comparison-and-benchmarks.html

Download Link: http://www.google.com/chrome/intl/en/eula_dev.html?dl=unstable_i386_deb

Google wave

Kris — Thu, 15 Oct 2009 11:37:51 +0000

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..

Optimized Event Delegation in jQuery

Kris — Tue, 14 Apr 2009 17:22:31 +0000

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



.
.
.


 UPS 
 2500 


 Mouse
 300 

 Keyboard 
 250

UPS	2500
Mouse	300
Keyboard	250

Javascript to highlight the selected cell

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.

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

Best captcha form ever

Kris — Fri, 03 Apr 2009 08:55:52 +0000

This one is a really cool captcha validation that I came across in a blog. The site was probably meant for some maths wizards I guess and they wanted to auto disqualify people who didn’t have enough level of maths understanding.

Behind the scenes - What happens when you open a page in a website

Kris — Wed, 18 Feb 2009 16:43:11 +0000

A lot of you may very well know what happens behind the scenes when a webpage is requested or being served, this article will explain the details and internals of what goes behind when you type http://www.clickoffline.com/index.php

The Internet Architecture

What is meant by internet is a collection of networks that interconnect a large number of content providing servers with the end users. Internet typically is a network of much smaller networks which are interconnected. Any network/machine that is connected to the internet can provide and retrieve content from the internet.

Since internet is a network, just like any other network it supports a wide range of protocols, one of the most frequently used protocols is the HTTP protocol. The HTTP (Hyper Text Transfer Protocol) is the main medium for content retrieval and delivery over the internet. Some of the other protocols that are frequently used are as follows

FTP – File Transfer Protocol
SMTP – Simple Mail Transfer Protocol
POP – Post Office Protocol
IMAP – Internet Message Access Protocol
HTTPS – Secure HTTP Protocol

All these protocols are dependent on the internet as the backbone for providing the infrastructure needed to communicate. However these protocols may be used in a wide range of networks, not just the internet, for example, you may run an ftp server in an intranet (local LAN), which is not exactly internet.

DNS Service

Internet also has services that are used by other applications. DNS or Domain Name System is the one of the most important one. DNS works like a telephone directory. DNS typically is a collection of servers, which have a list of domain names matched with their internet IP addresses. Since every machine in the internet can be assigned with a unique IP address, and remembering the IP address is not so easy. DNS helps in referencing these Domains with IP addresses

A sample DNS table is shown below.

Domain Name	IP Address
www.google.com	[209.85.153.104]
analytics.google.com	[209.85.175.147]
www.yahoo.com	[69.147.76.15]
www.clickoffline.com	[74.220.219.58]

So when you request a page from Google.com, the browser sends a request to the DNS server to find a match for ‘www.google.com’, the DNS servers will in turn, return the IP address of the respective Domain Name by doing a looking in the DNS table. When this operation is performed in reverse, i.e identifying the default domain name from a given IP address, it is referred to as Reverse DNS Lookup or rDNS.

Steps and processes involved in obtaining an html webpage

Request a web page

Once you type the URL in your browser, which may be IE or Firefox; the steps as described above happen sequentially before we get to see the page on our browsers. Let’s look at each of these steps in detail.

Components of the URL

The first phase is to understand the URL or identifying the components of the URL. A typical URL consists of the following components

•    Protocol
•    Domain Name
•    Resource Name

However there are other components that can be plugged into a URL which include, usernames, passwords and port numbers; we can ignore them as they are not used prominently.

The figure above explains the components of the URL. Now were ready to send the HTTP Request.

Construction of the HTTP Request

The browser composes a request called the HTTP Request that should be sent to the server to retrieve information from the server.

Sample


GET /index.php HTTP/1.1
Host: www.clickoffline.com

Since HTTP is a connection-less protocol, all information related to the session are sent along the request every time, this includes, resource name, protocol version, browser name, version and OS, supported content types, cookies if any, etc.

Identifying the server

Before sending out a HTTP request, we will need to identify the remote server; this is done by identifying the IP address using DNS for the domain specified in the URL. The HTTP Request is sent to eth remote server by establishing a route between the local machine and the remote server.

Wait For Response

The client browser waits for the response for the server.

Analysis/ Rendering of HTTP Response

The HTTP Response consists of a HTTP Response Header and the HTTP Response Data.
The Response Headers provide information related to the HTTP Response, the most important field is the Response code. Different response codes mean different statuses

200	OK
301	Moved permanently
302	Found
303	See Other
403	Forbidden
404	Not Found

The browser analyzes the HTTP response and renders the response one the screen, any dependencies like Images, CSS, java scripts that arise from the source html page follow the same processes to load int eh client, except that the URLs of the resources is loaded automatically by the client browser instead of a user typing it.


HTTP/1.1 200 OK
Date: Wed, 18 Feb 2009 16:19:57 GMT
Server: Apache/2.2.11 (Unix)
X-Powered-By: PHP/5.2.8
X-Pingback: http://www.clickoffline.com/xmlrpc.php
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html; charset=UTF-8

Advanced Resources
•    Specfications for URL (RFC 1738): http://www.w3.org/Addressing/URL/url-spec.txt
•    Specifications for DNS (RFC 1035): http://www.ietf.org/rfc/rfc1035.txt
•    HTTP Protocol Details: http://en.wikipedia.org/wiki/HTTP

Disclaimer: The views expressed on this webpage are my personal views and do not necessarily reflect views of my employer.

Password protect external access to WebApp - Securing Apache

Kris — Tue, 10 Feb 2009 18:13:01 +0000

I had this weird problem, where i had to secure a web server, to which access form the local network is granted by default, but if anyone who is not in the local network tires to access a web page, we had to validate him for username and password.

After some googling, i found this configuration that allowed me to secure the apache directory, this is the configuration




AuthType Digest
AuthName "Intranet"
AuthDigestDomain /
BrowserMatch "MSIE" AuthDigestEnableQueryStringHack=On

AuthDigestProvider file
AuthUserFile /physical/path/to/.digest_pw
Require valid-user
Order Allow,Deny
Allow from 192.168.0.0/255.255.255.0

Satisfy any

There are typically two kinds of authorizations here,
1) Allow from Directive
2) AuthUserFile Directive

The Allow from directive allows traffic from the specified ip range, and the AuthUserFile validates allows the validation of user credentials, if he/she has given them. The Satisfy any directive allows apache to validate any one of teh above conditions to grant access to the specified resources.