Yahoo Acquires Zimbra

Zimbra, one of the trade mark applications of web 2.0 paradigm is taken .. According to zimbra.com yahoo has bought zimbra for $350m .. neat eh ?

We are excited to announce today that Yahoo! is acquiring Zimbra to extend its email leadership to the University, Business and ISP markets.. In order to focus on this effort, the Zimbra team will report to the communications group where we will remain fully committed to the community and to our customers and partners while leveraging opportunities to enhance their current experience.

Well it maybe a great step to regain ground in mail section, which it is loosing to gmail, Also I think its a measure to counter gmail for enterprises market, Google is doing good with Google apps and yahoo needed to counter that and zimbra might actually pull that off. Zimbra is an open source framework which allows developers and enterprises to integrate their services with zimbra services, Organizations have integrated zimbra with ERP and Inventory systems.. Ask me "How open source ppl earn money" And I might have an answer for you this time :)..

Read More...

Summary only...

FireBug -- The Wonder Tool

For the ajaxkarma devotees [:P]:
" Firebug has been around for quite some time now and just because it is mentioned for the first time here, doesn't make it a new in the market beta tool "
For quite sometime I have been planning to write a short tutorial on how to debug javascript and basically "how to be a javascript developer and still be non suicidal", Javascript can really get to your nerves and haunt you at nights with malformed pop ups .. But then its like friction "A necessary evil" you cant make any ajax request or display creamy web widgets without javascript .. For the optimism I have in me ,I am gonna cut short the gloomy airs around JS. Joe Hewitt like a mesiah came to our rescue and made this wonder tool firebug .. Firebug is a javascript, CSS, HTML analyzer which reports almost everything you can imagine about a web page.
This 250kb extension to firefox is better than any debugger, profiler tool you would have worked on your IDE's. It allows you to change DOM in real time allowing you to see changes live, and so CSS and other property you can think of, It contains a script engine to test javascript before incorporating into your page. As I ramble on, I am realizing that nothing I say would aptly describe this tool, So you need to hear it from the man himself, Watch this excellent video which explains the ins and outs of FireBug.

Read More...

Summary only...

And We Are Back

Ok, I have used backspace some 20 times trying to figure out something funny to write after my trip to caves in guatemala [:)] (have been reading a lot about xibalba and stuff), So yeh I am back again with some changes, I plan to keep this blog as a journal of web 2.0 related activities which i find interesting and worth mentioning. I am planning to have a separate web site for the tutorials and the knowledge base of web 2.0 for which i pledge to work [:P] I do I do .. No kidding !!!

Read More...

Summary only...

An Interesting study of Digital Text

We Sure have advanced a lot !! Application is faster than the speed of thought and really its hard to predict the face of web and the way we communicate.

Read More...

Summary only...

Dojo 0.9 Beta scheduled for today

Love Dojo ? Well you have a reason to jump off the roof (in ur swimming pool of course) and get back to ur work stations to adapt your skills to a very different but lightning fast version of dojo. Yes today is the beta launch day of dojo 0.9 and dojo guys have worked very hard on saving your Kb's and CPU cycles. Well those of you who thought that dojo is hard to learn, will be buying food for ever hungry dojo hackers!! 0.9 book is not finished and is a work in progress but those of you who need a porting guide, can smile a little as porting guide is presentable and if you are a quick learner then sufficient.
So get ready with your local test site !!

Read More...

Summary only...

Remember The Milk -- The Bob Story

Google loves to surprise both its user and developer community, gd7 delivered more than expectation when it came to powering the developer with ammunition. With gd7 came Google gears, Mapplets and Mashup editor (very much in Beta). One of the early adapters of Google gears is Remember the Milk (Bob the monkey) website. They have a impressive UI and their integration with google services look very sturdy, remember the milk is an impressive example of web 2.0 which brings a fanktacular UI and reliable functionality.
Remember The milk is a web application which helps you manage your TODO list in a fun way,It notify of your events and tasks via IM, e mail etc ... Do check it out !! Maybe it acts as a panacea to your procrastination problem ...
Great Work BoB !!!

Read More...

Summary only...

Google Gears and Dojo Offline

Google launched Google gears which helps a developer to make its web application work offline, Google Gears is a set of API which works in tandem with a Local Server, Database and a Worker Pool to enable a web application to work offline. Dojo launched a simillar kind of toolkit called Dojo Offline about a month ago, Its time to watch out performance of both the developer toolkits, though Google has the Big G factor to it .. I am particularly impressed by dojo toolkit which AJAXify your web app in a click of a thumb and also gives you a very rich web 2.0 UI with really sweet widgets to cutify your website. Dojo Offline has this edge of being open source and hassle free IP issues which makes it a better contender to provide a complete solution to the offline paradigm. Its two of my favorites competing and I am gonna be hurt anyway. If I get time to work on google gears (which I have to manage with my placements coming), I will publish some tutorials and examples on ajaxkarma, so keep looking !!

Read More...

Summary only...

Dijit Form Widgets Tutorial -- TextBox, CheckBox, Button

Lets quickly see these simple Dijit Form Elements, so that we will have more time to invest on fancier one's.
BOOTSTRAPPING:
BootStrapping is still done with good old dojo.js by sourcing this script file in our environment. It does all the work at the background to give u the dojo object.
<script type="text/javascript" src="www_root/js/dojo/dojo.js"></script>
This you will need in any dojo enabled page and dojo.js contain the most important and frequently functions.
DOJO REQUIRES:
To make dijit work You will need to import corresponding Widget Script File in your environment. To parse the widgets you need a parser JS file which can be obtained by
dojo.require ("dijit.util.parser");
This is needed in almost all markup based widget creation, where you create widgets by calling them in html tags.

GETTING STARTED WITH TEXTBOX, CHECKBOX AND BUTTONS:
To make Textbox, checkbox or Button work you will have to dojo require the appropriate JS file in your environment..

Lets see how to define a TextBox in a input tag ...
<input dojoType="dijit.form.Textbox" type=text name="name">

You can set following properties:

trim : Removes leading and trailing whitespace if true. Default is false.
ProperCase: Converts the first character of each word to uppercase if true.
upperCase : Converts all characters to uppercase if true. Default is false.
lowerCase:
Size: Size of the text Box

Following event handlers work as in normal textbox:

onfocus
onblur
onkeyup

Lets see how to use above info ...

<input dojoType="dijit.form.Textbox" type=text name="name" trim="true" propercase="true">

Similarly the obove eventhandlers can be used to call appropriate functions..

Some Functions of TextBox object are
getTextValue
getValue
setTextValue
setValue

Note: You can acess these functions when you create TextBox programatically

Making a TextBox Programatically :
function create_textbox()
{
var parameters = {
name:"email",
trim:"true",
propercase:"true"
};

var text = new dijit.form.Textbox(parameters,dojo.byId("hello"));
text.setTextValue("Value set by setTextValue");
}

<form >
<button dojoType="dijit.form.Button " onClick="create_textbox"> Textbox Programatically
</button>
</form>
</div>
<div id="hello"></div>

BUTTON:
Button is a very rich widget of dijit in terms of looks, functionality and flexibility, As button is used very often in pages the versatility is very much appreciated by developers.
Types of Button We can create are :
1> Normal Cickable Button
2> Drop Down Button ( Using DropDownButton and Menu Widget)
3>Combo Button (Using ComboButton and Menu Widget)

Normal Cickable Button:
We can create a Paser based mark up button as follow:

We need to dojo require the Button Js file by
dojo.require("dijit.form.Button ");

<button dojoType=" dijit.form.Button" onClick="create_textbox">
Click Me!
</button>


Other Attributes of Button are :
Caption: Set caption on button

Function Available to Override:
setCaption: set the caption on button
buttonClick: internal handling of button click

CallBack Funtion:
onClick: Called When button is Clicked

You can have image on button by using <img> tag before closing the button or input tag.

Creating Normal Clickable Button Programatically:
function create_button()
{
var parameters = {
caption:"I m programatically created. Please Click Me",
onClick:"call"
};

var but = new dijit.form.Button(parameters,dojo.byId("hello"));
}

You can call it as callBack handler on onClick or any other way you choose to.

Drop Down Button:
Drop Down Buttons are rendered with the help of Menu Widget and as the Drop Down Button class is in the same JS file as Button class therefore we dont need explicit dojo.require for it. It will come with dojo.require("dijit.form.Button").

Lets see how to create a Drop Down Button quickly ..

<button dojoType="dijit.form.DropDownButton" menuId='FileMenu'>
File </button>

<div dojoType="dijit.PopupMenu" id="FileMenu" toggle="fade" toggleDuration="500" style="display: none;">
<div dojoType=" dijit.MenuItem" caption="New" accelKey="Ctrl+N" onClick="new" </div>
<div dojoType="dijit.MenuItem" caption="Open" accelKey="Ctrl+o" onClick="loadFile"></div>
<div dojoType="dijit.MenuItem" caption="Save" accelKey="Ctrl+s onClick="send"></div>
</div>

dijit.PopMenu and dijit.MenuItem are sourced into environment by dojo.require("dijit.Menu");

Combo Button:
<button dojoType="dijit.form.ComboButton" menuId='FileMenu' onClick=file>
File </button>

and PopMenu can be defined as above in drop down Menu ..

CHECKBOX:
Checkboxes can be used simillarly, we need dojo.require("dijit.form.Checkbox")
They have the same properties as normal Html Checkboxes like

value
checked

<input dojoType="dijit.form.Checkbox" type="checkbox" name="vote" checked="true" value="on" onClick=alert( this.value)>

Other Callback Handlers are:

onChecked
mouseOver
mouseOut

RadioButtons:
<input dojoType=" dijit.form.RadioButton" type="radio" name="album" checked="true" value="snm" onClick=alert(this.value)>

<input dojoType="dijit.form.RadioButton" type="radio" name="album" value="load" onClick=alert( this.value)>

<input dojoType="dijit.form.RadioButton" type="radio" name="album" value="master of puppets" onClick=alert(this.value)>


Closing:
Whew !! Well I have covered almost all aspects of these widgets in accordance to nightly build of 23 May !! We will next see other form elements which are unique to dojo like InlineEditbox,
dateTextBox, CurrencyTextBox, Autocompleter etc ... Keep Checking this blog !!

Read More...

Summary only...

Dojo 0.9 M2 is out !!

Well Many of You already know that Dojo is on its way of a major release which is gonna affect our knowledge of applying dojo in our solutions. Dojo 0.9 Milestone 2 release is out and can be obtained from here.

Dojo Widget has its own new Name and will be called "Dijit" officially, Dojo core is slimmer and faster as per Alex Russel . I downloaded 24th May's nightly build and started looking in it and ran some tests, which were impressive and convincing for the widgets supported till now by dijit. I will start writing on small How To's here to show the usage of Dijit widget which is easier to understand and less clumsier than the overall bash of dojo 0.4 .

I will first cover form widgets of dijit and ways to use them in your pages and then we can move on to more fancy one like Editor and Tree's or we can mix the order, It all depend on the mood and time constraints.

Read More...

Summary only...

FeedControl update to Google AJAX Feed API

FeedControl was added recently by google to AJAX feed API which works like GSearchControl in Google AJAX Search API. This class makes it easier to add multiple feeds and to draw them up by basic predefined google CSS which can be overidden as needed.

FeedControl constructor doesnt take any argument and has three methods associated with it

1. addFeed(url,title)
2. draw(element,options)
3. setNumEntries(num)
4. setLinkTarget(Target)

There are already very good examples given by google AJAX API group which covers almost all methods and options of this new class. I specially liked to see the tabbed feed drawoption one, which looked very fancy and can be used effectively in creating neat and clean mashups.

Please look at the reference of this class to find out more on these methods but I will give a brief introduction of these methods although they dont require much explaination.

addFeed(url,title) : to add a new feed to your feedcontrol object and the second argument is used to give it a label which is displayed accordingly by the CSS attached to it.

draw(element,options): To load the feed and draw on the page, It takes the DOM element as its argument which will act as the container of the feed and also it takes a optional second argument which can instruct of other options of drawing, currently there is one option called DrawMode which can take two value

google.feeds.FeedControl.DRAW_MODE_TABBED
google.feeds.FeedControl.DRAW_MODE_LINEAR.

setNumEntries(num): Num of entries to be pulled when draw is called.

setLinkTarget(target): where should the link open when clicked. Default is the same window, Pl check the documentation for possible values.

ADVANTAGES:

few advantages that can be observed by addition of feedControl in feed API are:
>Simpler programming model
>Drawing is done by the API itself, which can be controlled by overidding the CSS
>Title now contains the link to the entry too :)
>Default CSS which can be used where no sophisticated layout is needed.

3 Examples are given by the Google team, which can be accessed from here

Read More...

Summary only...

Programming Mashups using Google Ajax Feeds API -- Part 2 of 2

Deviating from default:
In the previous part we learned how to pull a feed into a mashup using bare bones of the AJAX feed API.In this part we will see what customization is possible in the API and how !!

Things That can be changed:

• Number of entries in default pulling is 4, this can be changed
• Result format by default is JSON, this can be changed to XML

Changing Number Of Entries:
This can be changed by calling setNumEntries method of feed object. the argument of this methods is number of entries you wanna pull in each result object. This is a important method and would come in handy in almost all mashup programming.

feed.setNumEntries(7);

This method should be called before calling load.

Changing Result Format:
Like Number of entries this can also be changed by calling a method on the feed object, Method of interest in this regard is setResultFormat(format). Format can take one of the three values
1> google.feeds.Feed.JSON_FORMAT (default)
2> google.feeds.Feed.XML_FORMAT
3> google.feeds.Feed.MIXED_FORMAT

feed.setResultFormat(google.feeds.Feed.XML_FORMAT)

Example Mashup:
In this example we will try to use all the concepts learned till now, This will contain a mashup of 2 feeds, one pulled as JSON and other pulled as XML. More of number of entries will also be different in both the feeds. This should suffice the usage of all API's present in the armour.

Function to pull a feed with result in JSON format:

function pull_json(feed_url,container_id,num_entries)
{
var feed = new google.feeds.Feed(feed_url);
feed.setNumEntries(num_entries);
feed.load(function(result) {
if (!result.error) {
var feed_container = document.getElementById(container_id);
for (var i = 0; i <= result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
var link = document.createElement("a");
link.href=entry.link;
link.innerHTML=entry.title;
div.appendChild(link);
div.appendChild(document.createElement("br"));
div.appendChild(document.createTextNode(entry.contentSnippet));
feed_container.appendChild(div);
}
}
});
}


Function to pull a feed with result in XML Format:

function pull_xml(url,container_id,entries)
{
var feed = new google.feeds.Feed(url);
feed.setNumEntries(entries);
feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
feed.load(function(result) {
var feed_container = document.getElementById(container_id);
if (!result.error) {
var items = result.xmlDocument.getElementsByTagName("item");
for (var i = 0; i < items.length; i++) {
var titleElement = items[i].getElementsByTagName("title")[0];
var title = titleElement.firstChild.nodeValue;
var linkElements = items[i].getElementsByTagName("link")[0];
var link_url = linkElements.firstChild.nodeValue;
var descElements = items[i].getElementsByTagName("description")[0];
var desc = descElements.firstChild.nodeValue;
var div = document.createElement("div");
var link = document.createElement("a");
link.href=link_url;
link.innerHTML=title div.appendChild (link);
div.appendChild(document.createElement("br"));
div.appendChild(document.createTextNode(desc));
feed_container.appendChild(div);
}
}
});
}


Full Source with minimal layout can be found here
Sample Demo Of above mashup can be viewed here

Conclusion:
Mashup programming is made easy by Google AJAX Feed API, and we learned how !! This 2 article series covered the API with examples and I will soon put a cool sample mashup using google AJAX API as soon as I get time.

Read More...

Summary only...

Programming Mashups using Google Ajax Feeds -- Part 1 of 2

Mashups
Mashups are information rich portals which pull data from different sources and present at one logical accessible place like a website. Mashups can be ideally created from feeds which follow RSS/Atom Specification. RSS/Atom is a XML stream or file which can be parsed by a SAX or DOM parser to obtain the content desirable for your site.
Google AJAX Feed API:
Google some days ago launched AJAX feed API which does all the dirty work behind the scenes for you to retrieve feeds and make the data available in JSON or XML format in a feed object. This object can be iterated over to extract information and display on your web site. You can pull more than one feed and place in different containers governed by your CSS style, Hence giving birth to a mashup.
Preliminaries of AJAX Feed API:
The API has only one public class called google.feeds.Feed, Constructor of this class take the feed url as parameter. The object returned contains the feed information and elements in the field. The default format for the feed content is JSON but it can be set to XML as we will see later. We associate a callback function to handle the XmlHttpResponse with feed object by calling load function which takes a callback function as the argument.

To summarise preliminaries of AJAX Feed API:

• Feed Object is created by passing the feed url as parameter to the feed class.
• CallBack Function is Associated with feed by calling google.feeds.Feed.load(callback())
• Data Format can be shifted between JSON and XML, by default its JSON.

Example: Retrieving Google News Using AJAX Feed API:
Lets do some pulling with the Feed API. In this example we will pull data from google news
and display it on our portal, This is a bare bone skeleton example that should get you started on using the Feed API. Designers should apply their creativity to layout data from different feeds to attract users. We Will use the default JSON format to represent data but that is implicit to the feed object.

Here is the Code To get You started:

<html>
<head>
<!-- This is the place where you call the google API source file by
supplying your API Key after ?Key= Do not forget to Close the script tag -->

<script type="text/javascript" src=" http://www.google.com/jsapi?key="Key_u_got_from_google"
</script>

<!-- Local Logic to Instantiate feed Object and use it to pull data -->
<script type="text/javascript">
// This is Google AJAX API function which says that you
// that you are loading the feed API and the version of the API is 1
google.load("feeds", "1");
// Function that needs to be called when the AJAX request returns
function newsInit() {

var feedurl = "http://news.google.com/?output=rss&amp;amp;ned=:ePkh8BM9E8JmByvQDgMWHLYAAJLIBto " ;

// make the feed object var newsFeed = new google.feeds.Feed(feedurl);

// Assign a Callback function
newsFeed.load(function(feed_result) {
if (!feed_result.error) {
var feed_container = document.getElementById("newsFeed");
// Display by Manipulating DOM
for (var i = 0; i < feed_result.feed.entries.length; i++)
{
var entry = feed_result.feed.entries[i];
var div = document.createElement("div");
var link = document.createElement("a");
link.href=entry.link;
link.innerHTML=entry.title;
div.appendChild(link);
div.appendChild(document.createElement("br")); div.appendChild(document.createTextNode(entry.contentSnippet)); feed_container.appendChild(div);
}
}
});
} google.setOnLoadCallback(newsInit);
</script>
</head> <body>
<div id="newsFeed"> </div>
</body> </html>

This Should fetch 4 entries from google news. You can layout newsFeed div element to display news feed nicely and cleanly.

Note: Google uses feedFetcher to crawl and pull feeds at the backend, accoring to google policy it refreshes the feed value in about an hour, therefore the websites whose feed changing frequency is pretty high, the entries will not be refreshed.

In next Part I will show how to configure options of retrieval and how to use XML as a data model. We Will also create a web Page with more than 2 feeds pouring in data.

Read More...

Summary only...

What is web 2.0 ?

Web 2.0 is a term coined to explain conceptual amalgamation of technologies, specialised applications, community collaboration and overall change of user experience on Internet observed by everyone. Right from Google Maps to Wikipedia or WordPress to Drupal come under the umbrella of Web 2.0. They share the fraternity under the fatherhood of web 2.0. This term has nothing to do with any updates in technological specification of WWW or HTTP, Its just a term to express advancements in internet applications which has definately changed the way Internet is used and perceived by us.

Web 2.0 as a Amalgamation of Technologies:
AJAX has been a buzz word since 2005 and has really proved its potential in bringing out the paradigm changes to User Interfacing. Web Portals are no Longer some dead pages with some business logic at backend waiting for a user request, It has transformed into a complete software killer applications deployed over the Internet. Best Example I can think of such kind of transform is google docs and spreadsheets and all this is made possible by AJAX and other supporting technologies.

Why Amalgamation ?
AJAX is not a technology in itself, but a collection of other technologies arranged in a way to deliver stunning highly responsive GUI applications on Internet.

Component Technologies of AJAX :
Javascript
XMLHttpRequest or ActiveX Object capability of browsers
DOM Manipulation (By JavaScript)
CSS Manipulation (By JavaScript)

RSS/Atom is another technology which eases information dissemination and has become dominant on internet in the name of feeds.Businesses can reach potential customers using these feeds which serves as a boradcast message.RSS/Atom is based on XML which is open standard and human readable, Feeds can be used to create mashups based on your interest or the interest of your potential users. You can mix and match and really make a information rich web portal.

Web 2.0 as an amalgamation of special applications:
Wiki, CMS, blogs, forums,social networking are special internet applications which have changed the way user look for information on internet. Moreover these are easily pluggable applications which attach themselves to your web site and help the administrator to maintain large information base in a clean way. Most of these applications are open sourec and can be integrated for free with little or no configuration, some of the good examples being drupal, wikimedia, wordpress, joomla etc. Community Wiki's can be exploited to create a large information base of some particular area and hence create specialised wiki's. Please read here to find out how wiki works.

Web 2.0 from the perspective of Clustering information:
Social bookmarking, tagging (folksonomy), permalink etc are ways to give an order to information spread across internet. A single institution can not do it, so the job is taken up by common users who tag information into labels that interest them. These labels help bring order to the information on internet, Sometimes these tags can also be used to search information on internet. Users also share there information in terms of bookmarks which is now popularly called social bookmarking (del.icio.us) .These tags can be very useful when you are looking for information on internet.


I hope it gives you some information as to what are we looking at !! Puprose of this blog is to expose ways of creating such applications practically and to use all aspects of web 2.0 to create a information rich and attractive web portal. We would look at technologies like AJAX, RSS/Atom web services in great depth and from practical point of view .

Read More...

Summary only...