Web Applications

Online radio @ di.fm

Digitally Imported is an online radio website that offers a large list of radio stations available for streaming to a users computer anywhere in the world. This website relies on audio clients such as itunes, winamp, windows media player or VLC on end users machines to process the .pls stream files.

Premium quality streams are provided at a cost if desired, however there is a large array of free streams. This allows users who are at any internet connected computer in the world access to free music.

Revenue is made from advertising within the radio streams and sale of premium quality services.

Social Bookmarking @ Digg.com

Digg bookmarks links to websites that are flagged interesting by users, the more flags for a specific website, the higher it is listed on the digg.com index. When a user visits digg.com, they are shown a list of the most popular links of recent times. Digg can be used to raise awareness about interesting yet largely unknown information, and as the index is determined by user popularity, only truly interesting or popular links are listed.

The listings are updated frequently to keep the website fresh, and users coming back for more info regularly.

Online Television @ Joost.com

What’s Joost?

It’s a way to watch videos – music, TV, movies and more – over the Internet. We could just call it a website … with videos … but that’s not the whole story.

We’re giving you new ways to find what you’d like to watch. You can search in “traditional” ways – by title or category – or you can find suggestions from other people on Joost. They may be your Friends, or they may just be people who have something in common with you – but either way, they can direct you to great things to watch.

How does Joost work?

It’s pretty complex – there are a bunch of components that make Joost work. We have servers for the website, servers for the data that tell you information about the shows we have, and servers that manage your relationships. For the video, though, we do things a little bit differently, which is why we have a the proprietary video plugin, which we fondly call the Joost Plugin. Joost uses a peer-to-peer (P2P) network, which means that you don’t pull the video from one specific source, but you pull bits of the video from the other peers (a.k.a. people like you) who are on Joost.

from joost.com

Google Docs vs Microsoft Office Workspace

To compare these two services, I would require access to both; however as I run on an ubuntu machine Microsoft has ruled itself out by not supporting Linux. Google has already won!

Google: The GoogleDocs service allows uploading and editing of the following file types:

Documents (up to 500KB)

HTML files and plain text (.txt). Microsoft Word (.doc), Rich Text (.rtf), OpenDocument Text (.odt) and StarOffice (.sxw).

Presentations (up to 10MB from your computer, 2MB from the web, 500KB via email)

Microsoft PowerPoint (.ppt, .pps).

Spreadsheets (up to 1MB)

Comma Separated Value (.csv). Microsoft Excel (.xls) files and OpenDocument Spreadsheet (.ods).

PDF Files (up to 10MB from your computer, 2MB from the web)

A folder tree is allowed, A user can have a total of 5,000 documents and presentations, 5,000 images, 1,000 spreadsheets, and 100 PDFs.

Uploading can be done from a local machine or the web, batch or singular, however different size limits apply, online document creation and editing is supported.

Microsoft Office Workspace:

Storage: 500mb.

File Types: editable: HTML, .txt, .doc .rtf, .odt, .xls, .csv, .ods, .tsv, .tsb, .ppt, and .pps. uploadable: PDF’s, images and anything else.

File Sizes: 500kb for each document, 2mb per image, presentations to 10mb, spreadsheets also have cell, row, column and forumla limits.

Uploads: Also available batch or singularly.

Folder System: Within a workspace, folders and sub-directories are creatable just like on a computers file-system.

As Microsoft’s solution doesnt even open on a linux machine, Google is the winner here.

AJAX

AJAX stands for Asynchronous Javascript And XML and is a way browsers can use javascript and xml to interact with each other.

Asynchronous meaning that the javascript can send and receive information indepentently to the rest entire page loading. This means you can send bits of data to and from the server without reloading the entire web-page, a much more efficient design.

The XMLHTTPRequest (XHR) is an API that facilitates the transfer of information to and from XML files on a webpage.

The readystate property tracks the progress of a XHR so that transfer of data may be checked upon, as the page does not need to reload this is a separate way to tell if transfer has completed or what status that its in.

Use of the XHR and AJAX to transfer data in and out of html is much more efficient than reloading a page every time information is requested from the server.

Sources: wikipedia and ME

File storage facilities.

Imageshack.us

This website allows anonymous storage of images and provides the user with a link to access them. A login account is not required however this website will only store images and size limits are enforced.

getdropbox.com

This website requires a free account to be set up, and optionally allows the download of an application to allow auto-synchronisation between specified folders and online counterparts. The files are then accessible through a browser on any other computer. 2Gb of data is stored free.

Websites you “log in” to.

Surveyed websites: I surveyed various websites related to their login systems, overall they’re generally the same.

WordPress.com:

WordPress before logging in.

WordPress after logging in.

Gmail.com:

gmail before logging in

gmail after logging in

Del.ic.ious:

DHTML DOM

The DOM allows authors direct and programmable access to individual components of web documents. This allows pages to interact with user input, execute scripts and display new content without downloading additional documents.

The DOM gives every HTML element the ability to be programmable and run a script and / or interact with the user.

1. Internet Explorer fails to make use of the WC3 standards of DOM in some cases, this means when an author codes a web-page, he must accomodate both the Wc3 standards and the special cases for Internet Explorer. To access a particular element in Firefox,  getElementById() can be used to grab everything inside a specific element, in IE this is done by using an All collection, that also grabs everything inside an element, however uses different code. Both these methods need to be enacted in a HTML document so the author gains maximum usage.

2. Keypress events: A keypress event is triggered when a keyboard key is pressed down and release, whereas a keydown event is triggered as soon as a keyis pressed down, regardless of release.

3. Bubbling is a process that passes unhandled events up the element tree until they are handled by some parent element. This is useful as it allows a single handler to handle many child events of an element. Previously if each event wasn’t handled explicitly, it would be lost.

4. To cancel an event, you must set the window.event.cancelBubble property to “true” in the event handler.

Week 7.

JS in XHTML

Javascript is used in XHTML as a scripting language that can perform calculations, browser and server functions (such as open a new window or calculate the time and return it to the html).

Javascript is a mini-programming language, much like Java. It has all sorts of attributes such as variables, IF conditional statements, loops, functions, parameters and return values. I’ll explain what each one is.

A variable is an object that can hold a value, the object can have a name, and is referenced by that name. (eg: x = “hello”)

IF statements are conditional statements where the code run is dependent on the result of the condition. EG if (x = “hello”) {document.write(“goodbye”)}. In this case, goodbye is only written on the html document if the variable x holds the value “hello”.

Loops are used when there is a need for an iterative event, like going through a list and changing all the values of the list in some way.

Functions are defined processes that can be thought of as a black box, when they are run they can be given a value to use or their result assigned to a variable. They do a process defined, then they may or may not return a value to the invoking variable. Enclosed by curly brackets in JavaScript, functions are a great way to minimise your lines of code, if you’re doing the same process a couple of times it is always better to turn them into a function then to repeat the code.

A function looks like this: function(), inside the bracket there may or may not be parameters: function(parameter) that is sent along with the function to run. The function then treats the parameter as a variable for use in the process, often the output of a function is derived from the input is is given. Multiple parameters can be given for a function.

Return values are also results of a function where you may want a variable to be the result of a function, for example:
x = function(y, z). in the function(y, z) somewhere it will say something like: return(result). Inside the function the variable called result will be the overall return value of the function, and in the example x will be the same as the result.

Javascript can be included within <script> tags of html or in an external file, included with the src=”" attribute of scripts. These are known as external or internal scripts.

Cascading Stylesheets – CSS

Cascading Stylesheets, or CSS are used as a way to separate the content of a webpage from the way in which it appears.It is very important for many reasons:

• Web pages can be displayed on devices of many sizes and shapes (huge desktops all the way to mobile phone browsers or even a style for printing) and the user is not disadvantaged by their device.
• A convenient and defined way for the web-developer to customise his/her web page.
• Customisable for the user, they can create their own styles for use on any webpage (using IE)
• Customisable by the developer to give the user choices, a user might choose from a list of styles, ie. (high visibility). (Using Firefox)

Styles can be applied to any and all parts of a html page with the ability to use ID tags on specific items (p id=”FirstPara”)so that the developer is in complete control of what is changed and what is not.

The options of Internet Explorer allow users to customise what styles the browser displays by giving the user the option to choose their own .css file for styles intstead of the styles linked to, or used in, the html page.

Firefox has its own option, where if the developer chooses to, they can link multiple stylesheets (.css files) to the one html page and the user can choose which he/she would prefer.

CSS – Neccessary and Useful.

The Form tag

So here’s the deal, I tell you ’bout the form tag, & you like it.

The form tag signifies the start of a form in HTML. Forms contain things like text fields, check boxes, radio buttons, menus, textareas and the like. We use forms to send data from the web page, to the server.

What you might find in a <form>

• Input
  • Text – A single line text box
  • Password – A single line password box, browsers show this box without the correct characters
  • Checkbox – There can be many with the same name, you may select 0 or more
  • Radio – There can be many with the same name, you must select 1.
  • Submit – A button to submit the form data to the server
  • Image – A way of displaying an image in a form
  • Reset – A button to clear the form entirely
  • Button – A button that may be used for whatever the page designer requires
  • Hidden -  A field that does not render in browsers, but that can send information to the server when submitted
• Button
  • submit – Another way to send form data
  • reset – Another way to reset the form
  • button – Another button for whatever is required
• Select – A menu
• Option – A menu item
• Optgroup – Heading in a hierarchical menu
• Textarea – Multi line text input area
• Label – To associate with controls
• Fieldset – To visually group controls
• Legend – To add a caption for the fieldset

They all do various things like i’ve listed and all commonly found inside a form.

Form Attributes

These are the attributes of <Form>’s that I’ve found to be important:

• Method – This is the type of form you’ve got running, the way it will send its data to the server.
  • Get – Here the form information is sent along with the URL, this method is suited to things like searches, also you can bookmark the result of a Get form.
  • Post – Here the form information is sent along with the body of the HTTP request, it is not stored in the URL
• Action – Whatever you put here is the URL where the info is sent to.
• Enctype – Stands for Encoding Type: There are 3 mimetypes.
  • “application/x-www-form-urlencoded” this is the default, under this every character is encoded before being sent.
  • “multipart/form-data” No characters are encoded here, this type is required when there is a file upload
  • “text/plain” All spaces in the data is converted to “+”. Special characters are not encoded.

So thats all I got for yas now… Hope you’re all well informed about form tags!

Past Experience

Before my so-far short-lived blogging career, I was a kid who did school, took software and and IPT and went to Sydney once for a couple days, NCSS.
Stuff done:

• SfaS at Bond, Intro to Programming (java) what a fun time…
• NCSS at USyd, building a website / search engine in Python
• Year Book at School, project leader of making a book publication and dvd to go with, huge database – flat file.
• Interview System at School, group project to create a parent teacher interview system, MySQL database /w Access connect + HTML/php webforms.
• Apps for School, Software class projects: MDC – written in VB, changes ur desktop picture randomly every x seconds from a specified directory.
• Petrol grapher: Manual input of information into the source, once run the app used excel to tabulate data and create a graph and export the graph to the app, and gave fields for adjustments to data. Excel was run entirely in the background and not seen by user. 

So I’ve touched a little bit on some things but i’m sure you, the reader, knows more!

-Levi