December 16, 2007

Google Profile - What is it?

Google is about to launch another product called Google Profile. Google defines it as :

lets you tell others a bit more about who you are and what you’re all about. You control what goes into your Google Profile, sharing as much (or as little) as you’d like.


So, what's the idea? It will integrate all Google services you use and give you an identity. Further it will help you to manage your contacts.


You can find Google Profile in its initial state at Google Maps and Google Reader. These profiles are public and contain basic information about yourself. In Google Maps, you will find you profile on top and in Google Reader you will find it in "Friends" tab in settings. But I found that these are not in Sync for now. So you will have to edit in both the services. The big advantage of the Profile will be in searching individuals. It will be interesting to see how these public profiles will get integrated to Orkut and other social services.

Another minor topic is the addition of support for OpenID for commenting in blogs. So, what will be advantages with this feature? Google seems to be moving to the "Social Networking" in a fast rate!

December 15, 2007

Making better use of Google Analytics

Many bloggers and small companies make use of Google Analytics to analyze their web traffic. But how many of them are making full use of it? Analytics don't end at installing the code and setting Goals. There are many fine tuning a web developer needs to do in order to track better. Google itself has added new features from time to time to help its customers track and analyze better. Let's have a look at some tuning to your existing sites or blog.

Before we start, make sure you are using the new Analytics code. To check if you are using new code or not, here is a sample of new code:
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : " http://www.");
document.write("\<script src='" + gaJsHost + " google-analytics.com/ga.js' type='text/javascript'>\<\/script>" );
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-XXXXXX-X ");
pageTracker._initData();
pageTracker._trackVisit();
</script>


You can get the step-by-step procedure here.

A blog or web site contains different types of links like documents and media files. Apart from these, the site may contain links to external pages which you provide as references. For example, I have link to my Resume below by Profile section. How do I track how many people download my Resume? An instant answer is to set a goal with the specified target URL. But Analytics provide a better solution!

To track downloads of media files like PDF,Doc and others, you can make use of the method _trackVisit(). For example, lets say I want to track my Resume's download. I update my link as follows:


<a href="http://olakara.googlepages.com/Abdel-Resume.pdf" onClick="javascript: pageTracker._trackVisit ('/Resume_Download'); ">Resume</a>


Now each download will be tracked as a visit to Resume_Download page. But our code update is not complete. We have some more modifications to make. If you look closely at the basic Analytics code, you will see that we are making use of pageTracker object and calling method like _initData. You need to add _trackVisit(),_setAllowLinker _trackTrans(). Another point to remember is to keep the Analytics code on top, may be the first thing in body tag.

That's not all, before we complete lets see how we can track java script events. For and example, if you click "About Me" from my top menu, I load a page using java script. To tract such event use can make use of the parameterized _trackVisit(). just like how we did in the previous case. But rather than calling it on the link, I call it in my java script functions. This way you can track even the Ajax requests. To track execution of a particular function all you have to do is add:

pageTracker._trackVisit("/home/about_me");


So now you have a better tracking of your blog or web site. I am still trying out these features and will bring out another update. But these days I get less time to do research. I will be soon releasing my blogger template for others to download as some of you have asked me. Plus, I have started to work on new template and this time it's going to be using Blogger API's. So watch out!

December 08, 2007

Google's API for creating Charts and Graphs

Google just keeps innovating! They just released their new API which is all about creating charts and graphs. It’s called Google Chart API. In one look, it’s a down to earth API for creating charts and graphs by simply passing values to an URL. This is what struck me the most! The API has only an URL to which you pass values like chart size, data and chart type. In turn the API creates the chart as image and you have it! Creating chart is as simple as that. Let’s have a peep inside…

This might be one of the best API’s available now. The reason? Everything is through the URL. Google defines their new charting API as:


The Google Chart API is an extremely simple tool that lets you easily create a chart from some data and embed it in a web page. You embed the data and formatting parameters in an HTTP request, and Google returns a PNG image of the chart. Many types of chart are supported, and by making the request into an image tag you can simply include the chart in a web page.


The API provides different types of charts like Line, Bar, Pie, Venn diagram etc. To create any chart, we just have to pass some parameters to the URL: http://chart.apis.google.com/chart, specifying chart size, type and date. The generic syntax will be as follows :

http://chart.apis.google.com/chart?<parameter1>&<parameter2>&<parametern>
For a simple pie chart, here is the code (URL):




So, you just created your Hello World chart using the API. All charts are generated as PNG images. Now lets look at the analyze the “Hello World” chart we just wrote.
You should have noticed that we passed 4 parameters, cht, chd, chs and chl. “ch” obviously stands for chart.. cht represents the chart type, chd the data, chs the size of chart and chl the charts label. The API provides different type of data encoding like simple, text and extended encodings.

Here’s some example..





Let me dig deeper and see how I can make use of this library! :)

December 05, 2007

XML declarative frameworks

I am not sure who started it, but what I am going to explain here is how XML declarative frameworks are evolving in web technology. XML has brought a big revolution to web technology and it’s still making ground. AJAX brought the revolution in many ways. But the major problem was that developers had to be an expert in browser compatibilities, CSS, JavaScript and had to have really good programming skills. Those are now the old days! We have many small and big Ajax libraries that provide reusable components. But the problem was the about amount of coding required. How do we reduce UI coding involved and concentrate of the functionality? An innovative solution to this is XML declarative UIs. And it’s happening in a big way!

Many developers would have heard of Adobe Flex. It makes use of MXML to create a UI and ActionScript to do the event/actions responses. Things didn't stop there ,OpenLaszlo came up with LZX, which is declarative XML description of an application interface. I admire the OpenLaszlo library because it gives the facility to compile its code to Flash and DHTML. These two products are much mature, but there are other libraries to lookout for.

Apache’s XAP (Extensible Ajax Platform) is a XML-based declarative framework for building, deploying and maintaining rich, interactive Ajax powered web applications. The project is in ASF incubator. The framework aims at providing rich UI using XML, a generic layer on top of existing JavaScript like jQuery, Prototype etc.. So you can have any javascript library and code the UI using XAL (Extensible Application Language). The XAP maps XAL markup to specific UI widgets. An XAP DOM, separate from the HTML DOM, maintains the UI state. The architecture of XAP is explained here.

Google too is in pursuit of Declarative XML structure for defining GWT widgets. The project is in still incubator. But this framework will be only for GWT. When compared to Apache’s XAP, DeclarativeUi is not generic and have less features.

Apache and Google may be very well known, but I found a hidden treasure called ZK. ZK claims to be yet another “#1 Ajax and mobile framework”. ZK makes use of off-the-shelf XUL and XHTML components, and manipulate them by listening to events triggered by users. ZK is available for Mobiles also, so applications will work on any devices that support J2ME, without any modification to applications. ZK has come up with the ZUML which is based on XUL. This makes it more generic and is highly integrated with Java. The framework provides a huge set of widgets and functionality.ZK framework's architecture is explained here.

I am yet to try out programming using these frameworks, but looking at the architecture and documentations, I feel ZK is more superior in XML declarative UI building among the XAP and DeclarativeUi. But the concept of XAP to support multiple JavaScript libraries is a plus for it. At the same time I have not reviewed the Microsoft technologies (will look into them later). These frameworks will reduce the amount of time spent on UI design but, we still lack visual editor for all these. May be Flex has FlexBuilder, but others like XAP or ZK should be looking forward to provide Eclipse plugins where developers need only to drag and drop to design UI.