Feeds:
Posts
Comments

Archive for March, 2011

Ironically two articles back, whilst looking  at Gmail, i briefly went over the synergy of technologies called AJAX.

AJAX stands for Asynchronous JavaScript + XML which is a combination of these technologies:

  • XHTML and CSS;
  • Document Object Model;
  • XML and XSLT;
  • XMLHttpRequest;
  • JavaScript

Again, Jesse James Garret coined the term within his writings.

Now, the first ‘A’ stands for asynchronous and points entirely to the was the client interacts with the server. Asynchonous is essentially the traversal of data two ways. What this means is that Normally there is simple, if not disjointedly rigid forms of interaction between serve and client; only occurring at the seeking of a page or the sending of a form. It’s nto the case with AJAX and here is a diagram Mr Garret used himself here.

The key in this scenario is the the XMLHttpRequest which,  facilitates the transfer of data over the HTTP ports to and from the server. XMLHttpRequest is an object within the Javascript language and allows scripts  such as submitting form data or loading data from a server.

The XMLHttpRequest object implements an interface exposed by a scripting engine that allows scripts to perform HTTP client functionality, such as submitting form data or loading data from a server.  It can: ‘open’ to create a connection to the server and ‘send’ a request functions of the server. The server can then give feedback through either XML text or an XML file.

As per usual,  there is a difference between how Internet Explorer and the Netscape (firefox) program cores deal with this. Initially it was Microsoft that jumped on the band wagon first and implemented XMLHTTP and then later an ActiveX object to deal with the XMLHTTP and requests. Most popular browsers went on to adopt the XMLHTTPRequest JavaScript object (as a universal option) and the the World Wide Web Consortium then standardised it. Though the initial push was instigated by Microsoft, Internet Explorer 7 ironically adopted the more popular Javascript object.

Therefore, the difference between Internet Explorer and Firefox points to the code that initially instigates the XMLHttp request (and now, only prior to IE 7). The code goes somethign like this: (w3 schools)

variable=new XMLHttpRequest(); // Firefox, IE7, etc

variable=new ActiveXObject(“Microsoft.XMLHTTP”); // IE 5 & 6

such as:

var xmlhttp;
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }

To follow this interaction between client and server is the code ‘readyState’. the readyState function retains the code given fromthe server, so as to remember where the server is up to. Each time the readyState changes then our onreadystatechange function executes. Here is a list of the the ready state codes: (w3c)

onreadystatechange Stores a function (or the name of a function) to be called automatically each time the readyState property changes
readyState Holds the status of the XMLHttpRequest. Changes from 0 to 4:
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
status 200: “OK”
404: Page not found

example:

// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){
		document.myForm.time.value = ajaxRequest.responseText;
	}
}
ajaxRequest.open("GET", "serverTime.php", true);

Therefore, the reasons to use XMLHttpRequest revolves around two outcomes. Firstly, it helps coordinate the functions of whatever online software you might be developing – You might want to trigger music to be played while something is viewed, but without a dependable trigger you may be left either silence, or a inappropriate timing and lingering. Secondly, the client side user experienced can be enriched a great deal, demonstrating smooth and organised site – nothing scares away potential customers quicker than a clunky, unprofessional/unmodern site that wipes details away systematically, like one that does not employ AJAX.

References

http://www.adaptivepath.com/ideas/e000385 //   http://en.wikipedia.org/wiki/XMLHttpRequest

http://en.wikipedia.org/wiki/Ajax_(programming) //  http://en.wikipedia.org/wiki/Ajax_framework

http://www.wrox.com/WileyCDA/Section/id-303217.html

http://developer.apple.com/internet/webcontent/xmlhttpreq.html

http://www.alexhopmann.com/story-of-xmlhttp/ //  http://www.aaronsw.com/weblog/ajaxhistory

http://gfxmonk.net/2010/07/04/defer-taming-asynchronous-javascript-with-coffeescript.html#1

http://www.w3schools.com/ajax/default.asp // https://developer.mozilla.org/en/AJAX

http://ajaxian.com/by/topic/ajax // http://www.xul.fr/en-xml-ajax.html

https://developer.mozilla.org/en/AJAX

Read Full Post »

There is a difference between file hosting, remote back up and cloud storage, though they sound much of a muchness.

The most useful to the home user for sharing files between work and home, or securing the safety of precious data is is remote back up and files storage.

In this review we’ll look at the free online storage services: Binfire, SkyDrive, Wuala, iDrive and Mozy.

Binfire

The most simple, no-frills service is Binfire. I’m not sure where that name comes from, but it’s about “running your online office”. This is derived from its collaboration functions and affinity for having contacts with and messaging other members. I feel this would be most suited for use at school, or institutions where you are working off a simple computer with very limited privileges.

It has a good clean layout with supportive, functional buttons for your files and services.

Ultimately it feels like navigating through colourful FTP, but what was most perturbing was when I found the public files section. There seemed to be many of people’s files open to browsing and search and I’m not sure of the real use of this…

 

…But one of the other features is the online collaboration with other members. This may be of real use when working with others team members at different locations. It ‘s easily the best service for users with limited technical ability and was the only one found to have live chat technical support.

 

Binfire is, therefore, an option worth considering but a simple one that is superseded by higher storage.

Get started with Binfire

Skydrive

SkyDrive is Microsoft’s answer to the free online storage movement and supports its own online services and applications suite. You can synchronise your computer and devices with Windows Live Essentials, otherwise navigate through the online web interface. SkyDrive offers you a INSANE 25 gb free, which is the largest I’ve found and is the best value by far but, this is offset by the 50MB per file upload limit. Some archive programs (winRAR/7zip) can separate archived files into certain amounts. The advertising is a bit of a pain aswell – a common trait as it is within the MSN Messenger program as well.

 

SkyDrive is a solid option with astute upload and download times and a blatant flow to useability. If your already part of the Microsoft “LIVE” circle, such as using MSN Messenger or Hotmail , this simple and easy 25GB worth of storage is already awaiting you.

Get started with Skydrive

Wuala

Wuala (pronounced wah-lah) is a unique and technology driven service from the storage company LACIE, that will have every security minded user happy; as everything is encrypted prior to upload, using  128 bit AES, 2048 bit RSA or SHA-256 algorithms for encryption, signatures, integrity checks and even has fragments sent to multiple locations. They have a small introduction video that introduces you to every feature and concept. Initially a free user is given a miniature 1Gb, only expanded further by referrals to friends (up to 6gb), purchase or trading.

 

Through trading local storage, a user can attain the same amount online for ‘free’, up to a 100Gb. One of my main issues is that I never have enough space, so I’m not entirely sure how applicable this is. Most notable is the online and local application as they are exactly the same: the “Remote Access”  utilising Java looks and acts exactly the same as the desktop application.

 

For super secure and fast upload storage Wuala is your best option above all. Keep in mind though, for all the strengths of  Wuala, the space constriction is its largest weakness.

 

Get started with Wuala

iDrive

iDrive is a jack-of-all-trades free storage with up to 12GB of storage. It starts out with 2GB and then with a quick mail out to e-mail contacts (via Hotmail or Gmail), you will have an extra 10GB of storage immediately  and that’s the end of the story. Take note that no one has to click or sign up.

 

iDrive has both an online login in as well as an application. This application integrates into your system for drag-and-drop back ups and automatic synchronizing of specific files automatically. Furthermore, iDrive has encryption to, from and on the server, a WordPress plug-in for site backup and a mobile device backup  application (iPhone, Blackberry and Android).

 

Now this is definitely a favourite and surely makes it easy to have those files you need backed up for remote access. But even then, with all the options, the useability can suffer a little. This is where Mozy comes in.

Get started with iDrive

Mozy

Mozy seems to have been created  with useability strongly in mind, having a heavy modern-styled Mac OS feel to its website and application. Mozy is very similar in many respects to iDrive with support, an application that automatically synchronizes files,  throttles bandwidth and it even has a referral service earning you 256MB of storage per viewed e-mail.

 

I didn’t find the ability to upload files via the Mozy website, so downloading the application is the only way to go. The good news is that the application is straightforward to use and will not crowd you with too many options. It will, however, initially want to back up your bulk file types but, with access to a few settings, single file and encryption are easily manipulated.

 

Mozy even goes so far as to put an explorer function in, similar to iDrive, yet seemingly more direct and functional. Again Mozy improves by providing a support area that helps out with troubleshooting and fills you in on some details.

 

So if the multitude of options is getting you down and the technical details are too much – I’m sure Mozy will help you out.

Get started with Mozy

There are so many remote backup services out there that it’s worth signing up for at least one. There are so many quality brands with brilliant features that is was hard to keep it simple. So do not hesitate getting one now, if only to set up a weekly file sync. There are so many of us that have had hard drive failure, let alone fire or theft destroy our data, so protect yourself today.

Read Full Post »

Gmail – oh so easy

We all know Gmail – gmail is the best name in free e-mail. As a gmail user with several accounts and a relationship thats lasted since it’s beat period, im going to show a quick demo of how it logs in, and where it’s technology is derived from.

 

 

You can click on these images to enlarge.

Gmal focuses on being simple, quick and uniform – changes pages is less about traveling to a different destination and more about shifting around what is already there (so says the lead designer). To do this, Google utilises white ( ie a lot of white space) and light blues with black text – easy on the eyes, readable, classy and super fast to load.

Mow, straight away Gmail hooks the user up to HTTP…using SSL to encrypt interactions for security. the top line looks like this for me:

https://www.google.com/accounts/ServiceLogin?service=mail&passive=true&rm=false&continue=https3A%2F%2Fmail.google.com%2Fmail%2F%3Fui%3Dhtml%26zy%3Dl&bsv=llya694le36z&ss=1&scc=1&ltmpl=default&ltmplcache=2&hl=en-GB

This is quite the URL (ready for post). This is the first give away that there is a bit going on behind the scene and ‘under the hood’. To give an indication, including the style code and javascripts, this simple login page comes to 660 lines of code. What is seen here is that Google loves AJAX, building the foundations of their products on this combination of:

The contextual document is HERE and goes on to explain how these technologies all work together to enhance user experience and interaction, along similar lines as to that of desktop applications. While the user interacts, behind the scenes the server and AJAX environment gathers and prepares for potential furtur interactions and processes. The stop and start nature of the web is thus smoothed out.

To continue, here is what happens when the correct login occurs. This would be a function to decypt and check the details for success, before forwarding it on.

https://www.google.com/accounts/ServiceLoginAuth

 

The page then goes to the next in between page to preload the files and code. The loading bar animates – flash is common in AJAX. The URL has now change to this:

https://mail.google.com/mail/u/0/?shva=1#inbox

And upon completion i arrive logged in:

Now i was able to edit my layout with a different theme, so as to explain the darkness of the pictures.

To show that I’ve logged in, aside from a list of my contacts online and the massive list of e-mails, is up the top right there will be the e-mail address with a few related links (multiple login, settings, sign out of account). Signing out now takes me back to the login page once more.

 

Further readings

http://johnvey.com/features/gmailapi/ – technical document on some of the technology in Gmail

http://www.adaptivepath.com/ideas/e000385 – had a bit to do with the development and sensation of AJAX

Read Full Post »

 

Internet Explorer supports the ‘document-all collection’ whereas the W3C standard uses the getElementById() method

The javascipt function getElementById revolves around the utilisation of ID tags, which within a tag in the HTML code (ie <div id=”divIdName”> text </div>). Thsi effectively is a shortcut to its specific element of the document. An alternative method to doing getElementById is to use document.all[“elementID”] or document.all.elementID. It was the original of the two, by quickly superseded – it’s a  IE4+ exclusive array that contains all of the elements within the document.  As such, there seems to be alot of this style of code around still, even though IE5 was realeased in 1998 and W3 Standards had been set:

if (document.all) { element = document.all[id]; } else { element = document.getElementById(id); }

The difference between the keypress and keydown events?

Events, as triggers to certain criteria through the DOM, react in specific ways. To be more specific, while on a web page and typing away, each keystroke generates an event which in turn, can be utilised with code. There is, however, a primary difference between the ‘keypress’ event generated in FireFox and Safari, and the ‘keydown’ event generated in most instances. This difference is that keypress only reacts to the input of characters, while keydown reacts to the initial depression of any key. Notably, keyup reacts exclusively to the release of any key.

Also of note, is the difference in realtionship to the key event that some browsers  have. A good site as reference is this one.

What is event bubbling?

When two elements are nested together, identical in nature and triggers, the browser must take a stance on how to deal with which one is addressed first.For instance, if a user clicks on this inner element, does the program echo or bubble out through triggering all inner elements outwards to the outer elements? Netscape didnt seem to think so, and came up with ‘event capturing’ and went from the outside in. Everyone else seems to have gone with bubbling and W3 schools encourages this, if not more towards the middle ground. Noteably, this also makes for means to cancel the bubbling.

How do you cancel these bubbles and events?

  • event.stopPropagation() cancels the events and bubbling for W3C conforming browsers
  • the command for internet explorer:  event.cancelBubble = true

    Read Full Post »