Office Live vs. Google Docs

The first thing that stands out when you log in to both services is the fact that Microsofts login page features a small advertisement. This is a good thing because users can hope that the service will stay free. Office Live features templates or blank “workspaces”, Google Docs has the folders. Microsoft’s service lets you upload any kind of file up to 25mb of size while Google limits its service to html, txt, doc, rtf, odt, xls, ods, tsv, tsb, ppt and pps. It misses the highly spread pdfs as well as pictures. Furthermore, the maximum file size allowed is 500kb or 10mb for presentations.

While sharing is available in both services, Office Live distinguishes between two different roles, editor and viewer. Versioning is supported by both.

Mobile access is available for Google’s solution while Office Live features comments and an activity overview.

JSON

JSON (JavaScript Object Notation) is a text format, independent yet within the conventions of programming languages. Its main function is to handle data. An example for a tweet could look like this:

JSON:
{
“userpic”: “profilePic001″,
“username”: “Johannes”,
“message”: {
“updateText”: “This is my update”,
“dateCreated”: “01.01.2001″,
}
}

XML:

/images/profile001.jpg
Johannes
This is my update
01.01.2001

*WordPress keeps deleting the XML tags

jQuery

jQuery is an open-source JavaScript library developed at BarCamp 2006 by John Resig. Its aim is to simplify the interaction between HTML and JavaScript.

Minify in the context of jQuery means that your code is being compressed by jQuery’s compression tool. Basically, this avoids frustration on the user side by decreasing download times for websites. To even further reduce the amount of code the “chainability” of jQuery code is helping: Each of the individual methods return the jQuery object, allowing you to continue applying methods to the current set of elements.

Postgrad Assignment

Since I strongly believe that IT should make people’s life easier, I came up with the idea to design a website where tickets for Bond events, especially the ones hosted by the Student Council, can be bought. the long queues even in this slow semester are a reason why at least part of the available tickets should be able online. In addition to that, I assume it would make life easier for the members of the student council since they don’t need to show up on multiple days until al the tickets are sold. Even if only the remaining tickets would be sold online, it would be a convenient service.

The site would obviously contain basic shop elements (either realized with PayPal or manually) and needs several control mechanism:

- user authentication (Student ID)

- check if tickets are available

- Payment method

- Purchase history

- Receipt by email or print from purchase history

- RSS to inform students about upcoming events

…

When I started thinking about the project I started to sketch the index page with Photoshop and this is my result so far. If the project gets approval, I’ll start converting the Photoshop sketch into a CSS layout.

Layout Demo for Postgrad Assignment

AJAX or thanks again Google

AJAX stands for Asynchronous Javascript and XML and was introduced by Google in 2005. It is not a new language but new way to use already existing standards to create rich user experiences online like Google Mail. The main advantage of AJAX is that it lets you reload only certain parts of a website unlike the regular procedure of reloading the entire document even if only one character was changed. This is archived with the XMLHTTPRequest. The progress of a response by server can be accessed with the readystate property. With an if statement the status can be retrieved. The possible responses are: not initialized, request has been set up, has been sent, is in process, and is complete.

Web Applications built with AJAX deliver higher usabilitity and a desktop app like feel.

DOM – A brief explanation

HTML DOM is a standard object model for HTML as well as a standard programming interface. Furthermore, it is platform independent. It defines the objects and properties of HTML elements and methods which make them accessible meaning how to get, change, add and delete elements within HTML code. DOM clusters everything within the HTML code in nodes.

There are slight differences at some points, especially the getElementById method and the old document.all. document.all was supported by IE and Opera browsers while newer versions of them as well as Mozilla browsers supported the newer getElementById method.

Twitter – Yet another Web 2.0 Application

Twitter is a social-networking Web 2.0 Application that allows its users to share any updates in a persons life to be shared with friends in 140 characters or less. Because of the limited amount of symbols you are allowed to use, it is also called a micro-blogging application. It was built using Ruby on Rails and as most Web 2.0 Applications its API can be used for mashups of any kind. Simular services are Plazes.com with the addition of a more in-depth profile and geo locating feature. Both applications built a bridge between the web and mobile phones. Along with many other applications, Twitter introduced their own terminology. A follower is someone who registered to be notified about updates of another user while being followed obviously means that someone else wants to stay in touch with you and is reading your updates.

The Form Tag

The form tag, obviously, creates a form within a website. Those forms contain textfields, radio buttons, checkboxes, and other elements that a user can manipulate and finally submit to communicate with a server, send a search request and many other things. Here’s an example that contains the typical elements of a form, Simple Form Example.

If you take a look at the source code you’ll notice that form action tag contains the url where the form data is being send to. As I said the before, it’s a very basic form, the only tricky part (not really but I had some problems with that way back) is that if you have radio buttons and you want the user to be limited to make only one selection (otherwise you’d use checkboxes) make sure that the “id” is the same except for a number counting upwards for every possible selection:

…id=”Selection_1″
…id=”Selection_2″
…

If the id’s not matching the form will allow users to make more than one selection. If you want to learn more about forms simply check out a tutorial website like Pixel2Life and try one of the PayPal form tutorials. They contain a lot of different issues and have “real world” touch.