http://www.h3rald.com/ H3RALD - Tag 'ajax' (Atom Feed) 2006-09-18T03:51:00Z Fabio Cevasco http://www.h3rald.com tag:www.h3rald.com,2006-09-18:/articles/39/ Why I like Netvibes 2006-09-18T03:51:00Z 2009-09-06T18:10:55Z The so-called “AJAX Start Pages” are not a new concept anymore, and like for almost any other offspring of Web 2.0 there is more than one to chose from. Hence the increasing number of comparative reviews on the Web nowadays (Yes, I’m guilty of that too). I soon learnt that for any “good and useful thing” on the web there are at least n clones: consider for example social bookmarking, community-powered news sites, php frameworks…
And no, you can’t use the word clone because it has a strong negative connotation nowadays so let’s just say that whenever someone comes up with a new idea, others examine it, process it and in a few weeks (days?) some very, very similar application comes out, and it’s better than the previous one.
Now, I don’t know exactly whether NetVibes was one of the first AJAX Start Pages created or not, but at any rate – in my very, very, very humble opinion, is the most advanced and the most usable of the lot, and an essential tool for lazy folks like me who want to keep up-to-date with what’s going on without having to visit dozen of websites everyday.

I can see people jumping up and down shouting “Pageflakes is better”, “Protopage kicks a$$” etc. etc. Well, yes, probably, as you like: different people like different things, and when it comes to AJAX Start Pages there’s really a lot to choose from: 3spots has an excellent (and complete, I believe) list of all the start pages currently available on the Net, so yes, you can try them out yourself and make out your mind :)

I made up my mind long ago after experimenting a few of those. Why Netvibes? OK, let’s see:

  1. Fast to load: Netvibes is fast. Relatively fast, of course, for sure is not as fast as a plain, old-style html page, but I think it’s perhaps one of the fastest AJAX start pages ever created. As they pointed out, with a 15 million investment performance can only get better…
  2. Tabbed pages: After tabbed browsing, tabs within a single page seem to gain popularity. Netvibes allows you to create more than one page to prevent cluttering and general chaos: you can create a tab for CakePHP feeds, one for some cute AJAX widgets you’ll never use, another for al that Web 2.0 rubbish you’ll never read — that’s what I do at least.
  3. Smart Google Module: Finally Netvibes has a proper Google search module, which enable users to search with Google and view results on Netvibes instead of opening up a browser tab.
  4. RSS done right: Their RSS reader is nice: by clicking on a feed title it opens up a virtual window inside the page with the whole story and a menu with links to the other stories included in the feed. This is the most convenient way to read whole articles like TechCrunch’s ones without leaving the page (and without loading the heavy TechCrunch UI).
  5. Public API for modules: For those who – unlike me – has some proper free time and would like to develop their own module, the Netvibes Mini Module API is public…
  6. Ecosystem : Netvibes Ecosystem includes hundreds of modules and podcasts and thousands of feeds and tabs which can be integrated into any Netvibes page with a single click. Some of my favourites: XE Currency Converter, Quick Translator, Google Map Daily Cartoons and Bitty Browser.
    CakePHP feeds? Loads!

Enough?

]]> tag:www.h3rald.com,2006-08-28:/articles/google-apps-for-your-domain/ Google Apps for your domain: a shared hosting killer service? 2006-08-28T03:51:00Z 2009-09-06T18:10:54Z A while ago Google started offering services like Google Mail (Gmail) and Google Calendar to domain owners. Sure everyone likes Gmail, but one of the few bad things about it is that it never feels “unique”: your email address is always gonna be gmail.com or <something>googlemail.com. Not a big deal? Well, sure, not really, but it really depends on the people using the service and how fussy they are:

  • small/medium business wouldn’t like this: @gmail.com gives farless credibility than @domain.com
  • When using Gmail with the Send As feature, messages will be sent “on behalf of”, and this can potentially mess things up as some spam filters don’t like it.

Now it seems to be official: Google is starting to offer customizable services to anyone who wish to sign up for it, not only as a restricted beta service.
What does this mean? Well, it can be the (free and easy) definitive web solution for small business, kids, grandmas and everyone who wants to establish a presence on the web by paying only the annual domain renewal fees…

Included applications

Note the title: Google Apps for your domain, not only Gmail. Here’s what you get:

  • Gmail – You know what it offers: a state-of-the art AJAX interface, speed, reliability, very effective spam filter, loads of space, tagging (labels) stars and all the rest.
  • Google Calendar – One of the best online calendar available. Features and AJAX interface, full integration with Gmail, ability to create private and public calendars, reminders,
  • Google Chat – Google’s instant messenger, available through Google Talk desktop application or online, seamlessly integrated in your Gmail interface.
  • Google Web Pages – aka Google’s page creator, easily create webpages using Google’s WYSIWYG online editor.

Now, try imagining these four services combined and (almost) fully customizable… Still no idea? Well, keep reading for a list of all the included features.

Included Features

In order to use Google Apps for your domain, you must of course own a domain. The next step involves changing your domain’s MX entry to “ASPMX.L.GOOGLE.COM”, and follow the instructions to create an administration account for your Google applications, and after a while every email sent to your domain’s accounts will be routed to your new Google-powered inbox. Similarly, in order to use Google Page Creator on your domain, you’re required to change the CNAME record of your DNS to “ghs.google.com”.

Note: in order to avoid inconveniences especially if a lot of users use your domain’s email, it is recommended that you pay attention on Google’s instructions on how to set the whole thing up. For further information refer to the official FAQ. In order to be able to use Google Page Creator on your domain, you must setup an URL to publish your webpages: of course do NOT set this to “www.yourdomain.com” or any subdomain currently in use or your visitors will access the pages you created with Google Page Creator.

Here’s what you get:

For a bigger image click here. Let’s now have a look at what are the main differences from the standard Gmail.

Include your own logo

Your own logo will be displayed on the upper left corner of every page. And this is truly sweet. All you have to do to change it is uploading a 143×59 PNG or GIF image from your domain management panel (see below).

Use your company name instead of Google’s

Besides a custom logo, it is possible to set a company name to be used instead of “Google” or “Gmail” in page titles and links. I chose “H3RALD.com Mail” and that’s displayed everywhere, including on the sign-in page.

Control Panel
All the custom settings can easily be managed through an easy-to use control panel:

It’s really easy to use and has wizards to setup all the included services and options like setting up user accounts, settings etc.

User Accounts
Through the control panel you can add new users and modifying existing user accounts to access your services. You can create administrators who are able to access administrative domain-wide settings, and standard users. Every user gets 2048MB of space for their emails, and that’s pretty generous considering that it seems that you’re able to create around 25 user accounts.

Already have a list of users you’re like to import? Just save them in CSV format and upload them.

Would you like to be able to contact all your users at once, e.g. via a newsletter? Google thought about this as well, and you can create your own personal newsletters which can be sent out automatically to your @yourdomain.com email accounts.

Internal Messaging System
But there’s more. We all know Google Talk: yes it’s nice, but probably MSN has more features, smileys and all the rest but it still remains a perfectly usable instant manager, which also allows file transfer. Your users can use Google Talk to communicate with each other or simply chat through their webmail interface, More features? Well, for example you can setup Google Talk to work on federated networks.

Appointments/Projects management
Google Calendar is an excellent online calendar, and now you can use it within your own domain as well. This means, for example, that it can be used to set your company’s appointments, reminder, project deadlines by creating an unlimited number of custom calendars to share with your collaborators.

Design your own site
I know a lot of restaurants, shops and people who would like to have a small site for their business or activity, but they can’t develop web application themselves. So the most obvious solution is to hire some professional web developer to rip them off… erhm, to create a website for them. Now it is not necessary: by setting the correct DNS parameters, you can allow users to create their own webpages using a foolproof and advanced web editor powered by Google: Google Page Creator.
I didn’t set it up on my own domain, but a preview of what you can do with Google Page Creator is available here.

Scenario

After considering all this, I came to the conclusion that what Google did can help a lot of people and at the same time prevent some evil webmaster to charge them hundreds of Euro (they really get away with it!) for basic “websites” with “three or more static pages”.
All you have to do is buy your own domain, and that can be as cheap as 8$ per year, the rest comes for free, from Google:

  • The best webmail interface you can possibly imagine
  • Nearly unlimited space for everything
  • A truly effective spam filter
  • About 25 fully-featured user account, possibly more if you ask nicely
  • Your own “corporate instant messenger”
  • Your own calendar to manage appointments, meetings etc.
  • An intuitive and advanced web page creator – not like Geocities

All this for free. Yes, with ads (I’m not here to discuss privacy concerns), but after all they’re not displayed on your main site.

What about Server Side technologies for my sites?

OK kid, now that would be a little bit too much, even if I can foresee some possible “Google Web Widgets” at some point. “Create your interactive and dinamic website within minutes, no programming knowledge required”… that would be great (for Google) and bad (for freelance web developers). One thing at a time, after all G(od|oogle) has the whole eternity to fulfill his Goals.

]]> tag:www.h3rald.com,2006-01-12:/articles/what-is-ajax/ What is AJAX? 2006-01-12T06:30:08Z 2009-09-06T18:10:53Z "The Web is changing. The 30-year-old terminal-like technology it was originally is gradually giving way to new ways of doing things. The power of AJAX allows for rich user interaction without the trouble that has bugged traditional web applications."This is the introduction to the script.aculo.us[1] website, and regardless your opinion about the so-called AJAX programming technique, they are fundamentally right: the web is changing. AJAX is at least one way to do things in a different way, enhancing - although arguably, in some cases - users' browsing experience.

Application examples
What is AJAX then? Nothing too new, but not too old either. I'd define AJAX as the rebirth of Javascript, for example, it's not only Javascript we're talking about. The acronym stands for Asynchronous Javascript And XML and it already gives an idea of the fundamentals of the technology: something build on asynchronous server requests and responses . This may be clear to coders, but the best way to try explaining this to everyday internet users is showing some famous applications:

Gmail[2]: The first example? The most famous? The most used? Perhaps. Google aimed to impress both end users and geeks with it's free, long awaited email service. What's so unusual in this webmail application?

  • An innovative and intuitive interface, more similar to a desktop application than a traditional webpage.
  • Rich formatting through an effective, easy-to-use editor.
  • Online spell checker.
  • Instant
    • (one click) email tagging, labels, contact groups etc.
  • Email auto save.


Kiko[3]: This is a very neat online calendar, free to use and customizable. Features include:

  • Multiple user/contacts/events administration.
  • Personalization of the right click menu
    • (it overrides your browser's default behavior).
  • Drag and drop events across the calendar.
  • Easily switch through different calendar views without any page refresh.
    -


Writely[4]: An online word processor. Although it is not as advanced as its desktop's cousins, this is a truly admirable effort to port a desktop application to the web. The service is free for now and it allows users to create, edit, share and export text documents. Among its features there are:

  • High degree of document formatting - modify font size, style, colors, alignment, insert images and links etc.
  • Enhanced exporting options - it can create html documents, Word documents, zip files etc.
  • Online spell-checker.
  • Ability to easily share and publish your work.


This list can continue[5], as new "AJAX-powered" applications are created nearly every day.
AJAX provides the web developer the ability to create web applications that look and feel like applications that run on the desktop. It does this by solving the 'partial update' problem. AJAX makes it possible for a web application to request data from the server (usually in response to a button click or other java script 'event') and change a part of the current page to reflect the result of the query. Prior to AJAX, if the web developer wanted to retrieve any information from the server a full page update was required. This may mean a full page load when the user clicks a help icon, spell checks a document or performs a drag and drop operation that changes data on the server. AJAX solves this problem and opens the door for a host of AJAX-powered web applications
There were some unconventional solutions to this problem prior to AJAX. I have ignored them for the purpose of this article as they were hacky or relied on a feature in a particular browser


How does it work?
Ajax[7] is fundamentally the union of various technologies - not something new by itself:

    • (X)HTML, CSS, etc., used as presentation layer and format the information retrieved by the server: nothing special here.
  • The XMLHttpRequest
    • [8] object, which allows data exchange between client and server "silently", in an asynchronous way, without the need of refreshing and reloading a whole web page
  • The Dom Object Model
    • (DOM)[9], a Object-Oriented way to represent and access HTML or XML.
  • XML and XSLT used for data interchange and manipulation


The magic is undoubtedly in the XMLHttpRequest object, originally invented by Microsoft as an ActiveX object and then made available as a standard Javascript class by Mozilla-based browsers. At least something which seems to be compatible with most browsers then.

A necessary step in any Javascript script using the XMLHttpRequest object would be something like:


if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}


In order to have an http_request object to use later on which is independent from the browser type.

Let's now examine an example of elementary Ajax application[10]. The following code is broken into different parts and commented, the uncommented source and a demo is available on degraeve.com[10].

For this simple example we need to create a simple server-side script which will be called by our Ajax application. The script can be in any language, this one is in Perl.


#!/usr/bin/perl -w
use CGI;

$query = new CGI;

$secretword = $query-param('w');
$remotehost = $query-remote_host();

print $query-header;
print "<p>The secret word is <b>$secretword</b> and your IP is <b>$remotehost</b>.


Basically it creates a new CGI object named $query, used to access the parameter which will be passed by our submission form, "w", and get the user's IP address.
The script will then print a the page header and a phrase containing the word entered in our form and the user's IP address.

And here's the simple Ajax application:


<html>
<head>
<title>Simple Ajax Example</title>

<script language="Javascript">


Comment: Just the first HTML tags of the page, and the beginning of the script


function xmlhttpPost(strURL) {
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}


Comment: First of all we create a function named xmlhttpPost, which takes the parameter strURL, i.e. the web address of the script we created earlier. In the first part of the function, we create the HTMLHttpRequest object independently of the browser, which in this case is called self.xmlHttpReq.


self.xmlHttpReq.open('POST', strURL, true);

self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');


Comment: with the method open we initialize the connection, specifying that we want to send a POST request to the page "strURL" and that the connection is asynchronous (true). The third parameter is actually true by default and could have been omitted in this case.
As we want to use the POST method, we need to set the content-type header for our request, in this case "application/x-www-form-urlencoded".


self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
updatepage(self.xmlHttpReq.responseText);
}
}
self.xmlHttpReq.send(getquerystring());
}



Comment: This is the crucial part, as we need to send the request and also define the behavior of our application once the response is received. The request is sent using the "send" method, which sends a properly formatted query string (see below), but before that we need to setup a "listener" to monitor what happens to our request.
The readyState variables is updated according to the status of the connection, and can assume the following values:

  • 0 - Uninitialised
  • 1 - Loading
  • 2 - Loaded
  • 3 - Interactive
  • 4 - Completed


We want to update our page once we are sure that the connection with the script has been established, therefore we setup a listener (onreadystatechange) to update the page via the function update page defined below only if the connection's state is "Completed" (self.xmlHttpReq.readyState == 4). The self.xmlHttpReq.responseText variable which is sent to the update page function contains the response generated by our CGI script.


function getquerystring() {
var form = document.forms['f1'];
var word = form.word.value;
qstr = 'w=' + escape(word); // NOTE: no '?' before querystring
return qstr;
}


Comment: This function simply formats the parameter sent to the script as "w=typedword" where "typedword" is the word typed in the form of our application.


function updatepage(str){
document.getElementById("result").innerHTML = str;
}


Comment: Finally, this function inserts the response we got from the CGI script into an HTML element with id=result, through the method innerHTML.


</script>
</head>

<form name="f1">
<pword: <input name="word" type="text" >
<input value="Go" type="button" >onclick='JavaScript:xmlhttpPost("/cgi-bin/simple-ajax-example.cgi")'</p>
<div id="result"></div>
</form>
</body>
</html>


Comment: This is the final part of the application, which defines our form containing a text field and a submit button. Note that our xmlhttpPost function is called once the button is clicked, through the on click attribute.

That's it.
The first reaction after reading so far would probably be "Ajax is not easy at all", well, I never said it was. To create a simple application which just prints something on the screen we had to go through a lot of code, and we could have done something similar with much less hassle. This was just a trivial example, very different from those large scale applications available online.

There's good news though, there are plenty of frameworks and toolkits which makes life easier for developers interested in using this programming technique. There are in particular various libraries built upon the Prototype[11] framework such as the already mentioned Script.aculo.us[1] and Rico[12] for examples, and various frameworks which integrate Ajax in some way in any server side language, like Ruby on Rails[13] or CakePHP[14], for example.

Conclusion
Undoubtedly Ajax can be used to create really powerful and innovative applications, but it shouldn't be abused or mis-used. There are a few things to keep in mind, when developing an Ajax application:

  • It requires Javascript to be enable on the client browser, and the developer obviously can't control that
  • The application may not compatible with all browsers, in particular older browsers will definitely not be able to access it.
  • It can be too much of a surprise for the user who never used an Ajax application before: it may experience delays in responses, some basic functionalities like the "Back" button might not work as expected etc.


There are actually many more things to consider [15] before even start planning to develop an application, and can basically be summarized as follows:

"Do not use Ajax in your web application unless you know what you're doing"

Luckily, there are a lot of articles and resources[16] out there, waiting for you.


Notes and Resources
[small]
[1] Script.aculo.us AJAX toolkit: http://www.script.aculo.us
[2] Gmail - Google's online webmail: http://mail.google.com/mail
[3] Kiko - Online calendar: http://www.kiko.com/
[4] Writely - Online word processor: http://www.writely.com/
[5] A venture forth Blog - Top 10 Ajax applications: http://www.aventureforth.com/?p=13
[6] HTTP - Webopedia entry: http://www.webopedia.com/TERM/H/HTTP.html
[7] AJAX - Wikipedia Page: http://en.wikipedia.org/wiki/AJAX
[8] XMLHTTP Wikipedia Page: http://en.wikipedia.org/wiki/XMLHTTP

[9] Dom Object Model - Wikipedia Page: http://en.wikipedia.org/wiki/Document_Object_Model
[10] degraeve.com - Simple Ajax Example: http://www.degraeve.com/reference/simple-ajax-example.php
[11] Prototype Javascript Framework: http://prototype.conio.net/
[12] Rico open-source Javascript library: http://openrico.org/
[13] Ruby on Rails: http://www.rubyonrails.org
[14] CakePHP framework: http://www.cakephp.org
[15] Alex Bosworth's Weblog: Ajax Mistakes: http://sourcelabs.com/ajb/archives/2005/05/ajax_mistakes.html
[16] AjaxMatters.com: http://www.ajaxmatters.com/r/welcome
[/small]]]>