Web Application

There are hundreds if not thousands of publicly accessible web applications available today. I will pick two of them and ldiscrib the features that they provide.

CalendarHub: http://www.calendarhub.com/

Stay Organized
Create a personal calendar and add birthdays, social functions, random get-togethers with friends, and while you’re at it, create reminders for paying bills, remembering special occasions, or checking that online auction. Get organized! Coordinate Your Team
Create a calendar for your office. Keep track of todos, milestones, and deadlines. Set some goals, get everyone on board, and then… Get started!

Promote Yourself
Create a calendar for your church, your band, your team. Publish a event feed on your own website or blog so people can follow you and get involved. Get noticed!

Inform Your Audience
Teachers: Publish exam dates, homework due dates, project deadlines, etc. Students: Subscribe to your class’ calendar, or else create your own class calendars then roll them up into one view so you can stay abreast of it all. Get A’s!

Stay in Touch with Friends and Family
Create a schedule for your family. Create reminders for all your children’s scheduled activities. Get together!

visualthesaurus: http://www.visualthesaurus.com/

The Visual Thesaurus is an interactive dictionary and thesaurus which creates word maps that blossom with meanings and branch to related words. Its innovative display encourages

exploration and learning. You’ll understand language in a powerful new way.Say you have a meaning in mind, like “happy.” The VT helps you find related words, from “cheerful” to “euphoric.” The best part is the VT works like your brain, not a paper-bound book. You’ll want to explore just to see what might happen. You’ll discover — and learn — naturally and intuitively. You’ll find the right word, write more descriptively, free associate — and gain a more precise understanding of the English language.

With both versions of the Visual Thesaurus, you can:
Find the right wordThe VT has over 145,000 English words and 115,000 meanings. Find the word you need and discover related meanings.
Develop a better vocabulary. See how words are used in different parts of speech.

Use words precisely. The intuitive interface helps you find words through their semantic relationship with other words and meanings.
Master word usage. Roll over a meaning to see its definition and example sentences that express that meaning.
Improve your grammar. Meanings are color-coded to indicate parts of speech.
Explore 39,000 proper nouns. Historical figures, phrases and trademarks are included. Look up Mozart, Manda or simply, “M.”
Check your spelling. The VT suggests a word if you spell it wrong.
Hear words pronounced correctly. The VT offers both American and British pronunciations (Internet connection necessary)
Personalize your experience. Use the Settings Panel to control font size, filter content, display up to 17 semantic relationships and more.
Browse language in 2D or 3D. Rotate word maps in three dimensions to reveal complex relationships.
Connect to the Internet. Right-click on any word to launch an Internet search for images or information.

google docs vs office live

Feature-by-Feature Comparison

Both Google Docs and Office Live Workspace are free services, but each has its own unique set of features. comparison for some features.

Storage Space

Microsoft Office Live Workspace is limited to 500 MB of space, which equates to about 1000 Microsoft Office documents.

File Types

Google Docs is limited to the types of files their service allows you to edit online: HTML, .txt, .doc .rtf, .odt, .xls, .csv, .ods, .tsv, .tsb, .ppt, and .pps.

Office Live Workspace allows you to upload all kinds of files, not only Office document file types. So, in addition, you can upload .PDFs, pictures, or seemingly any kind of file except those on the blocked list, which are blocked to protect users as they are file types Windows sees as executable files.

File Sizes

Google Docs allows for documents of 500 K each, plus up to 2 MB per embedded image. Presentations can be 10 MB in size. Spreadsheets can be 10,000 rows, or up to 256 columns, or up to 100,000 cells, or up to 40 sheets – whichever limit is reached first. Each spreadsheet can have up to 20,000 cells with formulas.

Regardless of the file type, Office Live Workspace allows for individual files as large as 25 MB.

Sharing

Google Docs allows for sharing of a file or files by checking the checkbox next to them and clicking “share” from the menu. Those you are sharing with can be invited as “Collaborators” or “Viewers.” You can add a short note along with the invitation. Documents and presentations can be shared with 200 combined viewers, but spreadsheets have no limit.

Similarly, Office Live Workspace allows you to share documents or workspaces with others and mark them as “editors” or “viewers”. You can add a note along with the message. You can also check a box to allow “everyone to view this without signing in,” and/or a box to “send me a copy of the sharing invitation.” Below, a read-only preview of the file is displayed. Files or workspaces can be shared with up to 100 people.

Both offer address book integration for finding recipients’ email addresses.

Collaboration

In Google Docs, collaborators have the ability to work on files together, in-real time. Ten people may edit and/or view a document or presentation at any given time. Fifty people can edit a spreadsheet at the same time.

Although Office Live Workspace allows for collaboration, it’s not real-time, online collaboration. Instead, if one user is editing a file, another will be informed the file is “checked out.” When they finish editing and save their changes the document is checked back in for other users to access.

Versioning

Both Google Docs and Office Live Workspace keep track of older versions of a file. You can use the web interface of either to roll back to a previous copy.

More AJAX and XMLHttpRequest

 

readyState Property

Retrieves the current state of the request operation.

Syntax

 

[ nState = ] object.readyState

Possible Values

nState

Integer that receives one of the following values. 0 (Uninitialized)The object has been created, but not initialized (the open method has not been called). 1 (Open) The object has been created, but the send method has not been called. 2 (Sent) The send method has been called. responseText is not available. responseBody is not available. 3 (Receiving) Some data has been received. responseText is not available. responseBody is not available. 4 (Loaded) All the data has been received. responseText is available. responseBody is available.

The property is read-only. The property has no default value.

In Summary, The benefits of XMLHttpRequest object are:

• • Update a web page with new data without reloading the page

  • Request data from a server after the page has loaded

  • Receive data from a server after the page has loaded

  • Send data to a server in the background

 

 

Resources: http://msdn.microsoft.com/en-us/library/ms534361(VS.85).aspx ,  http://www.w3schools.com/xml/xml_http.asp

AJAX

What is AJAX

AJAX is not a new programming language, but a technique for creating better, faster, and more interactive web applications. AJAX stands for Asynchronous JavaScript And XML. AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.

What exactly is XMLHTTPRequest?

The XMLHttpRequest object provides a way to communicate with a server after a web page has loaded.

Creating an XMLHttpRequest object is done with one single line of JavaScript, but it differed on how to initialize XMLHttpRequest from IE to firefox.

First, we’ll have a look how IE treat XMLHttpRequest. To create XMLHttpRequest the syntax will be:

var xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”)

second,  to create XMLHttpRequest the syntax will be:

new ActiveXObject(‘Msxml2.XMLHTTP’);

This should be done as a try/catch block, with the call that will work in Firefox and Internet Explorer 7 coming first as it is the most likely to succeed.

try {
  var objXHR = new XMLHttpRequest();
} catch (e) {
try {
  var objXHR = new ActiveXObject(‘Msxml2.XMLHTTP’);
} catch (e) {
try {
  var objXHR = new ActiveXObject(‘Microsoft.XMLHTTP’);
} catch (e) {
  document.write(‘XMLHttpRequest not supported’); }
}
}

Online storage

Data Deposit Box:  http://www.datadepositbox.com/

Data Deposit Box™ is a comprehensive online backup service developed upon two guiding principles: make it simple for users by making it smarter than any other solution.

Their backup service enables everyday PC computer users to easily backup, restore, access, and share their online backup data. The core of Their service is their patented Continuous Backup™ system, which allows Them to continuously monitor selected folders, looking for changes. When a change is detected, it is immediately extracted, compressed, encrypted, and then securely transferred to their secure online backup data center. Some of their features:

Continuous Backup

You make a change, They spot it and save – instantly and automatically. This means no delays, and no heavy back-up periods slowing your computer down.

Open Files Driver

Most backups don’t protect open files. This feature does just that. Perfect for files left open for lengthy periods in apps such as Outlook.

Sharing

Send someone a special password allowing them access to just the files you want them to have. And imagine the convenience of sending a link to access large files – photos, for example – rather than jamming someone’s inbox.

Access Backed Up Data, Photos, Files, Music, Emails & Documents Anywhere

Wherever there’s an internet connection, you’re a click away from any of your backed-up data. Just think of the convenience.

Secure Bank Grade Encryption

This is the strongest encryption available. It has never been cracked. So you can rest easy that your valuable data is safe.

File Versioning

They keep multiple versions of every saved file, so you can restore older or deleted versions of your files.

Live Drive deposite: http://www.livedrive.com/

Unlimited Online Storage for your music, photos, videos, documents and other files. Some of their features:

Unlimited storage space

Never run out of storage space again! Get unlimited storage for all your files.

Works like a normal hard drive

We believe that using an online hard drive should be no different to using a normal hard drive … and that’s exactly how Livedrive works.

Video player

Watch your videos online without having to download them to your computer.

Mobile

Your files really can be accessed from anywhere as Livedrive is even optimised for mobile phones.

Works even when your PC is disconnected

Livedrive is the only online hard drive in the world that allows you to access your files even when your computer isn’t connected to the Internet.

Send files to anyone

Send large documents, presentations and ZIP files to contacts and clients. Forget the hassle of emailing attachments.

Facebook

Manage your photo albums with Livedrive’s new Facebook integration.

Work online – Office compatible

Edit and create Office documents via the web to get full power of Microsoft Office from anywhere and with no need to install software or purchase licenses.

iTunes

Access the same iTunes music library from all of your PC’s and automatically back-up your music.

More Login Page Examples

Gmail Login Page

Now, we will take gmail login page, which is an email website. The following image represent how the login looks like and you will find it in the right of the screen:

The following image represent how gmail website indicate that user is signed in by saying for instance “yasmine007@gmail.com. You will find it on the right of the screen. We can see as it is email page,

My Conclusion

Although there are some differences in the log in page layout for these three websites as some can be on the right of the screen and some on the left and some allow picture some don’t allow. however, we can see that all provide the same information: user name + text area, password + text area, checkBox + keep me sign in, and then the submit button. Moreover, they all indicate that the user is signed in by using his/her user name.

login Layout

Different Log in for Different Websites

In this blog I would like to present how different websites handle the layout of the login page:

Delicious Login Page

firstly, We will take the ” del.icio.us”  website which is public bookmarks website,  the following image present their login layout, we can find it in the home page at the right of the screen.

As we can see, there are user name and password and under each there are the text areas where the users enter their information.

The following image present how the del.icio.us website show that the user is signed in and we will find this on the top right of the screen, Saying that: “signed in as yasminati” :

WordPress Login page

Now, we will take the WordPress website which is blogging website, the following image present their login layout, you will find it on the left of the screen.

The following image present how the wordpress website welcom the user to indicate that he/she are signed in and this is their page, you will find it also on the left of the screen, and we can see that they give the user the opportinity to put a photo:

More of DOM

Events:

Every element on a web page has certain events which can trigger JavaScript functions. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags.

Examples of events:

• A mouse click

• A web page or an image loading

• Mousing over a hot spot on the web page

• Selecting an input box in an HTML form

• Submitting an HTML form

• A keystroke

another event such as onKeypress and onkeydown. The first one has the focus and a key has been pressed and released. The onkeydown element has the focus, and a key has been pressed.

DHTML Object Model

What is DOM?

The DOM or Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.

According to the DOM, everything in an HTML document is a node.

The DOM says:

 The programming interface to the DOM is defined by a set standard properties and methods.

Properties are often referred to as something that is (i.e. nodename is “p”).

 Methods are often referred to as something that is done (i.e. delete “p”).

 

Accessing Nodes

You can access a node in three ways:

1. By using the getElementById() method: The getElementById() method returns the element with the specified ID:

     for example: document.getElementById(“intro”).

2. By using the getElementsByTagName() method: getElementsByTagName() returns all elements with a specified tag name:

     for Example: document.getElementsByTagName(“p”);

3. By navigating the node tree, using the node relationships:

 

Node Properties

In the HTML Document Object Model (DOM), each node is an object.

Objects have methods (functions) and properties (information about the object), that can be accessed and manipulated by JavaScript.

Three important HTML DOM node properties are:

• nodeName

• nodeValue

• nodeType

 

Resources: http://www.w3.org/DOM/

                     http://www.w3schools.com/htmldom/dom_nodes.asp

More JavaScript

JavaScript Statements

A JavaScript statement is a command to the browser. The purpose of the command is to tell the browser what to do. For example:

document.write(“Hi everybody, this is a javascript statement.”);

JavaScript Variables

JavaScript variables are used to hold values or expressions,

Rules for JavaScript variable names:

• Variable names are case sensitive (y and Y are two different variables)

• Variable names must begin with a letter or the underscore character

Example:

var firstname;
firstname=”Hege”;

Conditional Statements

Very often when you write code, you want to perform different actions for different decisions.

You can use conditional statements in your code to do this.

Examples:

if you want to send greeting to the user you can do:

var d = new Date();
var time = d.getHours();

if (time < 10)
{
  document.write(“<b>Good morning</b>”);
}