Web Applications

SkyLook.biz

Skylook is a comprehensive wep application that allows users to record skype calls, among many other things. It is extremely useful to me, because I often Skype with my friends and family. If ever something is said that I need to remember, it is often very difficult. Now, I record all my Skype calls so that any information can be recalled whenever I need. The application lists the following features:

Call Outlook contacts’ phones or PCs using Skype™.

Record calls to MP3, WMA or other audio formats.

Receive voice mail messages in the Outlook inbox.

Automatically forward voice mail messages to any email address.

Receive alerts via SMS or phone when important appointments are due.

Get IMs forwarded to SMS or your phone when you are away from your PC.

Have important emails read to you over your phone when you are away from your PC.

Receive alerts via SMS or phone when important contacts come on-line.

Take notes about each call during and/or after the call.

Archive all communications including calls, voice mail, IMs and SMS.

Screen/Monitor calls from your PC or from your phone.

Synchronize your Outlook contacts with your Skype contacts.

Review all communications with a contact in one place, including calls, IMs and email.

Use Outlook to manage follow-up on calls and voice messages, just like you currently do with email – e.g. mark as unread, move to folder, flag.

See who is on-line without leaving Outlook.

Answer calls automatically with a Skype Answering Machine built into Outlook.

This application could also prove extremely useful in a corporate situation when business meetings are held over Skype. This is increasingly common. Meeting notes don’t have to be written at the time. The meeting can be recorded and recalled for later use.

My rating:

2. E-messenger.net

E-messenger.net allows its users to access a wide range of online messaging clients through one application.

Chat with all your friends, everywhere

You have friends on both MSN and Yahoo? Or you have two MSN accounts? No problem! With eBuddy Web Messenger you can have all your buddies from multiple IM accounts in one single list.

At school and unable to install? At work behind the firewall? In an internet cafe while traveling? Or at home on a slow computer? Chat everywhere with eBuddy Web Messenger! Directly in the browser of any computer and it’s fast and easy-to-use.

Chats and contacts in one screen

Don’t like windows that popup? Or too many chat windows? With eBuddy Web Messenger you have everything conveniently in one screen: your contact list and all your chats!

New chat conversations will appear as tabs in the same screen as your contact list, so you can easily switch. The tab will blink to let you know about new messages, so you don’t miss out on anything.

Express yourself everywhere

If you’re not at home, it doesn’t mean that you cannot have your own cool avatar with you. With eBuddy Web Messenger you can take it with you everywhere you go! The same goes for your screen name and personal message.

Also, don’t be afraid to express yourself in your chat. Change the font, change the color and use emoticons to personalize your chat exactly like you want it.

Manage all your contacts easily

Did you know that an average eBuddy user has more than 200 contacts? That’s why eBuddy Web Messenger makes it easy for you to manage all your social contacts.

Now you can search for friends instead of scrolling up and down your contact list. You can also organize your friends in groups or sort them per IM network.

This is extremely useful for me because I have many friends that only use one type of  messenger, and this may differ to the type that another friend solely uses.With this application, I can remain in touch will all my friends, regardless of what messenger they use.
My rating:

3. Fototrix.com

Photo Tricks is a web application that allows users to upload photos of themselves and their events and create calenders, comics and many other things with them. The features include:

1. Image Processor – Add different effects, including Brightener, contrast, black and white, cropping, resizing and distorting.
2. Framer – can add different pre-made frames
3. Your Face here – can add users face to different bodies
4. Scrapbooker – add pictures and text to premade scrapbooks
5. Comic Maker – make own comics out of user photos
6. Photo Cards – 500 postcard templates to create own postcard
7. Magazine Cover – hundreds of pre-made magazine photos that user can add their own photo to
8. Calender – create custom made calendar from users photos

I always enjoy creating new, fun things and finding different ways to use my favourite photos. If you have a bit of spare time and a bunch of your favourite photos, this is definitely worth it!!

My rating:

GoogleDocs vs OfficeLive

GoogleDocs:
GoogleDocs allows a user to have up to 5000 documents, 5000 images, 1000 spreadsheets and 100 PDFs uploaded to a single account. Over 10 documents can be open simultaneously. Google docs supports all office file types, PDFs, the main picture types and many more. File types are consistently being updated and added. Each individual document/image may not be larger than 500kb and each. There is a limit to one document/image that can be downloaded/uploaded at one time. GoogleDocs uses a heirarchical view of all documents, allowing documents to be placed in folders to be easily categorised and viewed. One document/presentation may be viewed an edited at the same time by up to 10 users, however, spreadsheets can be viewed and edited by up to 50 users.

Office Live:
OfficeLive allows each user account to upload a maximum of 500mb of data. The following filetypes are allowed: HTML, .txt, .doc .rtf, .odt, .xls, .csv, .ods, .tsv, .tsb, .ppt, and .pps. Like GoogeDocs, OfficeLive limits each document to 500kb each, however, presentations may be 10mb in size. Each file must be uploaded seperately, however, it has drag-and-drop functionality.

Summary:
I would recommend GoogleDocs because of its simplicity. It still has all the features, however it is much easier to use.

AJAX

AJAX:
Stands for Asynchronous JavaScript and XML. It allows data from a server to be delivered to a web application without stopping the existing page or reloading the page.
XMLHTTPRequest:

XMLHTTPRequest is the object that allows the javascript to communicate with the server without the need to reload the page. It is supported by all browsers, including IE and mozilla. ReadyState is where the servers status is stored. There are four states the server can be in: ready, processing, downloading or completed. A function can be set up to respond each time the server status changes. This allows the coder to know when the state returns to ready, to send another request. There are three main benefits of this:

1. Able to update a page without reloading it
2. Request data after a page load
3. Receive data after a page load
4. Send data to server in background, without interrupting user.

Storage Sites

Box.net

The following are the features that box.net offers with a free membership:

1. Online Workspaces - Create shared workspaces and easily invite team members to upload files, start discussions and collaborate online.

2. File Sharing - Easily share large files both within your company and with external partners replacing FTP software and email attachments. You can even see when your files are downloaded!

3. Folder Layers - Create and organize multiple layers of folders replacing your file server with an online company-wide file system.

4. Mobile Access - View your files on any browser-enabled mobile device and use Box’s apps on the iPhone and Blackberry.

5. File Commenting, Group Discussions and Online Documents - Leave comments attached to a specific document, start a group discussion, or create and share a simple document.

6. Updates - Like a newsfeed for your shared workspace, keep up with all activity via the Updates tab in Box and through email.

7. Version History - View previous versions of your files even after changes are made and new versions are uploaded. *Business only

8. User Management - Manage users easily, control data access and review reports on content usage and activity using the Admin Console. *Business only

9. Security Controls - Set various levels of view and edit permission, set up a time to auto-delete a file or deactivate a link, and password protect sensitive folders or files *Business only

10. Easy-to-Use - Minimize user training and support costs, eliminate software or hardware maintenance, and get started in just minutes.

MegaUpload.com

MegaUpload offers the following features with a free membership:

Free 200 GB online storage with file manager
Free Upload and Download manager for fast transfers
Free Megaupload Browser Toolbar for fast transfers
Waiting time before downloads are available	25 seconds	45 seconds
Support for resuming broken uploads and downloads
File Folders: Combine multiple Megaupload links
Earn and redeem reward points for free premium services

Summary:
I chose box.net because it had a very simple design and was extremely easy to use.

Login Procedures

Summary:
Only having a password for WordPress meant that I could only document the login procedure for that site. However, I found it to be very neat, efficient and easy to use. It clearly outlined whether a user was or wasn’t logged in.

DOM

document.getElementByID() Method:
This method allows elements to be sourced via a user specified ID, and assigned to a variable. The element can then be manipulated in any way that the properties for the specific element allow.

Key Press vs Key Down:
The Key Press event is fired when a key is pushed and then released. However, if the key is held, many Key Press events will fire.
The Key Down event is fired when a key is pushed. A release of the key is not necessary to fire the event. However, when a key is held, only one key down even is fired. Depending on the implementation, this can lead to errors because the coder is unaware of this fact.

Event Bubbling:
Event bubbling is a feature that was introduced in IE4.0. It allows authors build code that is compact, simpler, and easier to maintain and is an efficient model for incorporating event handling into Web documents. It allows any unhandled events to continue moving up the element hierarchy until it is handled, or until it reaches the document object.

Canceling an Event:
However, without cancelling the event, the event will continue to ‘bubble’ up the hierarchy, even if it has been handled. This means that once the event has been cancelled, the window.event.cancelBubble property must be set to true in the event handler. This will stop the event’s progression up the heirarchy.

Javascript

Introduction:
Javascript is a client side, lightweight programming language, also known as a scripting language. Its function is to allow a heightened level of interactivity in static HTML pages. It can be embedded directly into a  HTML file, or referenced and used from an external file.

External Referencing:
To reference an external file, the following code is used:

<script type=”text/javascript” src=”helloworld.js”></script> 

If.. Else Statement:
This is used when the execution of code is based upon a conditional statement. If the statement returns true, the first block of code will be executed. If not, the else block of code will be executed.

Loops:
There are two types of loops –

• For -  Runs a loop for a specified amount of time. The block of code will be iterated as many times as has been specified
• While – Runs while a condition is true. This is not necessarily a specified amount of time, and can lead to infinite loops. The block of code will be iterated until the statement is false.

However, loops can be stopped in one of two ways:

• Break; If used inside a nested loop, this command will discontinue all loops and continue to any code that follows outside the loop.
• Continue; If used inside a nested loop, this command will discontinue the loop it is placed in, but will continue to the code in the loop outside it.

Function:
The use of a function is to stop the browser from executing the code on page load. This means that the function must be ‘called’ to execute its code. The syntax for creating a function is:

function functionname(var1, var2, …, varX)
{
code
}

Parameters:
Parameters may or may not be used with a function. A function may be called without parameters: function(); or have parameters: function(parameter).
This allows code to be minimised if paramters are used correctly. Ie:

<script language=”JavaScript”>
function box1(){alert(“You just opened box #1″);}
function box2(){alert(“This is box #2″);}
</script>
<a href=”#” onClick=”box1()”>Box #1</a><br>
<a href=”#” onClick=”box2()”>Box #2</a>

could be minimised to:

<script language=”JavaScript”>
function box(whichText)
{alert(whichText);}
</script>
<a href=”#” onClick=”box(‘You just opened box #1′)”>

Return Values:
The return statement is used to specify the value that is returned from the function. It is referenced by:

return variable;

Cascading Style Sheets (CSS)

Importance:
Whilst HTML provides the building blocks, Cascading Style Sheets (CSS) set the properties for every element. Without CSS, HTML pages would fundamentally be black text on a white background. With CSS, every elements properties can be changed to create a visually pleasing .. or extremely non-pleasing.. effect.

Implementation Options:
There are three different ways in which CSS can be implemented in a HTML document.
- Inline: every style is defined within each element. These are discouraged as there can be a lot of styling redundancy – ie: exactly the same code is written in more than one element.
- ie: <table style=”border-size: 2px;”></table>
- Document level: this is the most common form of implementation. The CSS code is placed in the head of the document and can reference every element or the class and ID of elements if need be. If written efficiently, there should be no styling redundancy as more than one selector can be referenced for each styling rule.
- ie: <style type=”text/css”>
table {border-size: 2px;}
</style>
- External: this is when the css code is saved in a seperate .css document and referenced from the HTML page. There is no inline or document level code. This is the most efficient when more than one page is using a single style sheet.

IE Style Sheets:
IE allows users to view web pages using a style sheet of their own. This overrides the style sheet that is already in use by any page viewed. To do this:
1. Tools>Internet Options
2. Appearance>Accessibility
3. Format documents using my style sheet.
4. Locate own style sheet>OK.

Firefox Style Sheets:
Although changing the style sheet of a page is not as easy in Firefox, it can still be done.
1. Find your Firefox profile.
2. In the chrome subdirectory, there should be a file called userContent-example.css. Rename it to userContent.css and edit it using Notepad.
3. Save userContent.css and restart Firefox.

The <Form> Tag…

Is the most exciting tag ever…

Purpose:
To provide the boundaries of a data input form on a page. Encapsulates all the form elements.

Attributes:
Name – Specifies the name of the form.
Action - Specifies the URL  the data should be sent too when the browser is told to (often the submit button).  
Method – Specifies the way the data will be sent in the HTTP request. This can be one of two values – get or post. Get will show the parameters in the URL, post will send it in the body of the request.
Encryption – Specifies in what manner the data will be encrypted. On default (“application/x-www-form-urlencoded”) all spaces are converted to + and all special characters are changed to ASCII HEX. When a file upload control is used in the form, the “multipart/form-data” value should be used. Finally, “text/plain” can also be used which converts all spaces to + but doesn’t change the special characters. Often implemented when a mailto is used.
Target – Specifies the window that is used when loading the response from the HTTP request. Possible values enclude: “_self” -  the same window already being used (default). “_blank” – a new window. “_parent” – loads in parent frame when frames are used. If used when no frames are in the window, I’m fairly sure it loads in the same window already being used. “_top” – loads in the topmost frame if frames are being used within the page. If used when no frames are present, I’m fairly sure it loads in a new window.

 Tags:
Input – this element forms the majority of all form tags used. Types include: text, password, file, checkbox, radio, submit, reset, hidden and many more.
Button – as well as using the input element to create buttons, button has an element of its own. There are 3 types – button, submit and reset.
Select – creates a drop down menu. The “optgroup” control can be used to create headings in the list. All list items are surrounded by the <option> tag.
Textarea – is similar to the <input type=”text”> control, however it allows for multi lined entry. The number of rows and characters per row can be specified.
Fieldset – is used to group controls. Draws a box around the controls that are encapsulated by the fieldset tags.
Label – is used to group a control with its text label. Tags are placed around the  text and the control.

Sources:
My brain.. class notes.. “http://www.w3schools.com/tags/att_form_enctype.asp” for the enctype values.

My Previous IT Experience.

I’m an ‘08 highschool graduate soI have no corporate experience.
However, through highschool and my own studies I have learnt:

HTML/XML – in depth since yr 4.
Been writing stupid personal web pages since then =P

CSS – yr 10.
Style sheets used in HTML documents to style pages.

Javascript – yr 10.
Relative amount of use in HTML documents.

VB/VBA – yr 11/12
Used in a fairly complex way to create a program.

SQL - yr 11/12
Used with access.

I’m sure the rest of you have more interesting histories than I do. =P