SQLHTML

JavaScript and XHTML…

lcmk132 — Thu, 09 Apr 2009 02:58:55 +0000

Uses of JavaScript in XHTML

JavaScript is a lightweight programming language that was developed to enable more interactivity on static web pages.

JavaScript can be used in an HTML document between the

When a script is an external file-

If… Statements-

There are 3 types of If Statements, which are all code that is to be executed upon a conditional statement.

If…

Only if the specified condition is true

If…Else

Use this statement if you want to execute some code if the condition is true and another code if the condition is false

If…Else…If

Use this statement if you want to select one of many blocks of code to be executed

Loops-

Loops in JavaScript are used to execute the same block of code a specified number of times or while a specified condition is true. For example, you can write code that will produce output that sums mathematical equations. If the start of the loop was 1 and you wanted to write answers for startLoop + 12,358 it would give u the answers.

There are 2 types of loops-

Runs a loop through a block of code as many times as it has been specified

While

Runs code while a condition is true. This type of loop can lead to infinite loops until the statement is false.

Loops can be broken in 2 different ways:

Break: The Break statement stops the current while or for loop and continues executing the code that follows after the loop (if any).

Continue: A Continue statement terminates execution of the block of statements in a while or for loop and continues execution of the loop with the next iteration.

Functions-

Functions are a way of organising and controlling different sequences of code which work together with other functions, page elements and input from the user. A function typically contains a set of commands for a specific purpose which you want to run at a certain time.

Each function in a script is given a unique name. The example below is named “doSomething”, although it could be given any name you like.

function doSomething() {
 // The function code goes here
}

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.

Box #1

Box #2

could be minimised to:

Return Values-

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

return variable;

Posted in Uncategorized

All about CSS…

lcmk132 — Wed, 08 Apr 2009 08:11:47 +0000

Importance of CSS

CSS is responsible for the overall presentation of a web document. CSS set the properties for all elements contained within HTML. CSS enables every element to have a style attached to it. Without CSS, HTML documents would be extremely plain and not aesthetically pleasing.

Implementation of CSS

When implementing CSS to a HTML document there are three options available:

1. Internal

2. Inline

3. External

Internal style sheets are implemented in the using the

Inline style sheets are implemented in the crux of the HTML document. The style is defined within each element. This can lead to a build up of styling and a lot of time is wasted from writing the same styles.

Coding for Inline:

This is a paragraph

Using an external style sheet means that there is a separate document which has saved the CSS code. There is no CSS code embedded in the HTML document, making it more streamlined and faster. The coding is similar to an internal style sheet however, instead of it being embedded in the HTML document between it is in a separate document.

Using your own CSS- IE

With IE it is very easy to view web pages using a different style sheet to the one already implemented. To override the style sheet already in place, the user should:

1. Tools > Internet Options
2. Appearance > Accessibility
3. Check Box: Format documents using my style sheet.
4. Locate own style sheet> OK.

Using your own CSS- FF

Using your own CSS on FF is a little more difficult than with IE however, it is possible.

1. My Computer > Local Disk (C:)> Program Files > Mozilla Firefox

2. Defaults > Profile > Chrome

3. Rename “userContent-example.css” to “userContent.css”

4. Edit this using Notepad

5. Save userContent.css

6. Restart Firefox

Posted in Uncategorized

Skype, Dizzler and File2HD Web Apps…

lcmk132 — Tue, 07 Apr 2009 02:45:27 +0000

SKYPE
http://www.skype.com/intl/en/

Skype is a free web application that provides users with telephone capabilities over an internet connection aka VOIP.

• Search
Search enables users to find friends and family by entering their full name, email address or Skype name. You can also narrow this search down by entering a country/region, state, city, language, gender and age range.
• Contacts
Contacts are sorted on the main Skype page. They are by who is ‘online’ and in alphabetical order. Offline contacts appear in grey and online contacts in green.
• History
History- gives a log of all activity including calls, chat and file transfers. It gives the date, caller ID, time and file name.
• Chat and File Transfer
Chat is very similar to MSN messenger. Both parties can type messages to one another and it is stamped with the username, date and time of message. Messages can be sent whilst the receiving user is offline, the message appears when they next log in.
• Conference
Conference chat and calling is provided on Skype. Users can invite a third party to join a chat or calling group.
• Status
A status can used to identify what the user is doing. Some of these are ‘away’, ‘do not disturb’, and ‘not available’. An interesting status is the ‘skype me!’ status which means that anyone who finds you in the Skype directory can call you.
• Profile Customisation
Your profile picture can be customised. Users can add their country, state, city, language, gender, birth date, home page, about me, email address, phone numbers, number of contacts and myspace page connection.
• Skype Credit
Skype credit can be purchased with a fee to enable users to call land line phones or mobiles.
• Importing Contacts
Contacts can be imported from such programs as Microsoft Outlook, Outlook Express, MSN hotmail and Yahoo!
• Language
There are over 20 languages which Skype can be set in.
• Video
Skype doesn’t only allow for voice over the internet but also video if the user has a web cam.

DIZZLER
http://www.dizzler.com/

Dizzler is a free media player that plays free streaming music, radio, video, and games. Dizzler offers a way to access free media content on the web as safely and easily as possible without any SPYWARE, ADWARE or storage constraints.

• Profile customisation
Users have the option of customizing their profile regarding colors, pictures, how their ‘player’ appears, adding their websites, myspace usernames, youtube user names, music preference, description and location.
• Bands can upload music
Upon subscription bands can upload music files up to 100MB.
• Put Dizzler on facebook/myspace/Friendster
With Dizzler uses have the opportunity to add code to their facebook/myspace/friendster page so that their Dizzler player appears on their profile with their playlist.
• Search (music, video, lyrics)
The search function of Dizzler makes it very easy for the user to find their favoured artists, videos and lyrics.
• Compile Playlists
Users can search to find music and add it to their playlist.
• Download desktop Application
Users can download a desktop application which makes it
• Email Playlist
Users can email playlists to singular or up to 10 email addresses. A unique address is emailed to allow for this.

FILE 2 HD
http://file2hd.com/

File2hd is a web application which allows any file from a website to be downloaded to a user’s hard drive. Files include; Audio, Movies, Links, Applications, Objects, Style Sheets and Images.
The user inserts the URL from which they want to download a particular file into the text box, read and accept the terms and conditions then click ‘get files’. Below are all the files that can be downloaded at the user’s discretion.
This application is very simple with very minimal styling. It is most useful for downloading YouTube videos and audio. It is also useful for retrieving music from Myspace music profiles which allows the user to have a song on their hard drive.

Posted in Uncategorized

Office Live Workspace VS. Google Docs

lcmk132 — Tue, 07 Apr 2009 01:05:45 +0000

Google Docs and Office Live Workspace are essentially free online storage and sharing web applications. They are very similar; however each has its own unique set of features. Below is an outline of the features that each application provides relating to file extension support, folder trees, file sizes, upload/download features and online document creation and editing.

FILE SUPPORT

Google Docs supports:

Documents (up to 500kb)

HTML files and Plain text

Microsoft Word, Rich Text, OpenDocument Text and Star Office

Presentations (up to 10MB from Computer, 2MB from the web, 500KB from email)

Microsoft Powerpoint

Spreadsheets (up to 1MB)

Comma Separated Value

Microsoft Excel and OpenDocument Spreadsheet

Limit of 1000 spread sheets

PDF (10MB from computer and 2MB from web)

Overall, there is a combined limit of 5000 documents and presentations and 5000 images with Google Docs. Office Live Workspace allows for individual file sizes up to 25MB regardless of file type and up to 5GB of storage.

Office Live Workspace supports all of these files listed above however, has a blocked list which users can not upload for the protection of the user.

FOLDER STRUCTURE

In terms of layout of folders in the two web applications the easiest is definitely Google Docs. It is very similar to what a user would be utilising on their computer already in My Computer. The folder tree is on the right and uses plus and minus signs to signify extending and collapsing of folders. It also allows for subfolders to be added. This is different from what Office Live Workspace offers. OLW offers ‘workspaces’ which is basically a folder containing folders you want to combine together. However, there is no option for subfolders and I think it is harder for the user to comprehend. On both there is no drag and drop capability.

ONLINE VIEWING CAPABILITY

Both web applications offer online creation and editing of documents in real time. However, files cannot be edited within a workspace on OLW Microsoft Office opens upon clicking ‘edit’. Add ons have to be downloaded and browsers shut to complete installation (annoying).

UPLOAD/DOWNLOAD FEATURES

OLW posts documents to your workspace by clicking ‘add documents’ button. A pop up of files from My Documents appears. User selects document to upload and the document file appears on the workspace. GD is similar, however the user is navigated away from the page upon clicking on the ‘upload’ button. The user can select ‘Browse’, or entering a URL and gives the option of renaming the file. I have just been prompted by GD that they don’t support docX. I select a different file to upload and it appears in front of me and provides me with all the editing tools that are available on Microsoft Office.

Downloading files that I have created online are easily downloadable through clicking on the file so it appears. Selecting ‘file’ then ‘download file as..’. There are many options as to how you wish to download this file.

RECOMMENDATION

I prefer and recommend Google Documents. It is easier to use and would be much more familiar to any PC user. The OLW has a unique touch however, it was too fiddly when it came to editing documents (add ons had to be downloaded and browsers shut to complete installation). GD was far more streamlined in the folder structure and general layout.

Posted in Uncategorized

How Web Apps Handle Layout…

lcmk132 — Wed, 01 Apr 2009 10:54:02 +0000

GMAIL: Email Web Application

Gmail: Login Page

Gmail has used 2 text boxes for users to sign in. The input password textbox value will be hidden with black dots to increase security and the possibility of someone accessing a password. A checkbox is used to signify if the user wants to be remembered on a particular computer. The ‘Sign In’ Button is a submit button which onclick will access the XML document and check if username and password are true. If false “The username or password you entered is incorrect. [?] ” is displayed and the password box is cleared.

Gmail: When Logged In

Before this page is displayed a page is displayed showing the progress of how long it will take for your computer to load data from the server. This is displayed after the computer is connected to the Gmail server. The top right shows ‘lkierath@gmail.com’ indicating that I am signed in. Also the ‘Sign Out’ button is displayed. The left bar shows a green symbol and ‘Louisa Kierath’ also indicating that I am signed in.

WORD PRESS: Blogging Web Application

Word press: Login Page

This login in box is very similar to Gmails in that it provides a user name and password textbox. It also has a “remember me” checkbox. The ‘Login’ button is the ‘submit button’. WordPress also displays a small padlock above the username textbox. I thought this was a nice touch to indicate or even give the impression that the site was safe.

When password or username weren’t returned as true

WordPress: When Logged In

When logged into wordpress the user knows they are logged in as their blog(s) are displayed on the left hand side of the page. It also welcomes users by “welcome back, (username here)”.

DEL.ICIO.US: Bookmark Organiser Web Application

Del.icio.us: Login Page

The final investigation which was into Del.icio.us was again similar to the last two web applications. If the username and password did not return true then a red warning message appears on the same page

Invalid username or password.
Please try again

The password textbox clears…

Del.icio.us: When Logged In

When the user is logged into Del.icio.us their username is used to personalise the whole page. All of the users bookmarks are displayed on the right hand side bar and also in the centre of the page. The ‘sign out’ button is displayed in the top right corner.

Overall, there are small differences in the layout that various web applications use. It is very common for websites to personalise based on what a users log in name is. However, there were differences when it came to users not entering the correct password. Page refreshes, new pages and even AJAX elements were used.

Posted in Uncategorized

AJAXxXxX…

lcmk132 — Wed, 01 Apr 2009 09:46:01 +0000

AJAX stands for Asynchronous JavaScript And XML. AJAX is a new type of programming that provides for a way to use existing standards. With AJAX a programmer can create better, faster and more user-friendly web applications. It is based on JavaScript and HTTP requests. With AJAX, web applications can retrieve data from the server ‘asynchronously’ in the background without interfering with the display and behaviour of the existing page. Asynchronously means that a webpage users HTTP requests between the browser (eg. Firefox) and the web server. It also means that data is not sent in a sequence. Ajax makes it possible to update a page without a refresh. Using Ajax, we can refresh a particular DOM object without refreshing the full page.. An advantage of this is quicker response, increase interactivity, allowing pages to be reloaded individually. The development of this language has led to an increase in the use of animation of web pages.

XMLHttpRequest allows a JavaScript program to send an HTTP request to a server and receive back a response containing an XML document. Firefox and IE treat this differently:

CODE for XMLHttpRequest

For IE, use the following Javascript:

var req = new ActiveXObject(“Microsoft.XMLHTTP”);

…for other browsers, use:

var req = new XMLHttpRequest();

http://www.omnytex.com/articles/xhrstruts/

Differences in IE and Firefox treatment of XMLHTTPRequest

http://powerdream5.wordpress.com/2007/10/11/ajax-ie-and-firefox/

readyState and XMLHTTPRequest?

readyState: Return the current status of the request, read-only property.

The readyState property can take a value from 0 to 4 (0=UNINITIALIZED, 1=LOADING, 2=LOADED, 3=INTERACTIVE, 4=COMPLETED). A value of 4 (i.e., COMPLETED) means that receiving the response from the server is completed and the response data is available through properties of the XMLHTTP object. For the readyState property to reach the value of 4, this property changes the value four times (i.e., from LOADING to COMPLETED), so the HandleResponse function gets called four times for each response. To make sure that the data is available in the XMLHTTP object, the XmlHttp.readyState property is compared to the value of 4 in the HandleResponse function.
If the readyState of the XMLHTTP instance has a value of 4, we then need to check its status property to make sure that a valid response was received.

Major benefit of using XMLHTTPRequest?

The major benefit of the XMLHTTPRequest is that there is no need for a page to refresh to show an addition of data.

Resources:

http://www.w3schools.com/Ajax/Default.Asp

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

http://www.w3schools.com/Ajax/ajax_httprequest.asp

Posted in Uncategorized

Online Storage…

lcmk132 — Wed, 01 Apr 2009 07:09:00 +0000

Online storage sites:
• Z-share: http://www.zshare.net/

• Photo bucket: http://photobucket.com/

Z-SHARE

Z-share is primarily a free site which enables users to upload files, images, audio and flash. The maximum upload size is 500MB and up to 2GB for premium users. A premium user accounts starts at 30 days for $5 and up to $30 for a 1 year account. If you are not a member the upload limit is 500MB, there is unlimited downloads in 24 hours, there is 50 seconds waiting time before each download begins, there are very limited maximum parallel downloads, cannot upload multiple files at once, there is the maximum amount of advertising, no protection of files, you can send files to friends, and there is no use of download accelerators. Z-share files are only held for 60 days.

After uploading you are given a link to your files that can be shared via email, forums, myspace etc.

PHOTOBUCKET

Photobucket is a site for uploading, sharing, linking and finding photos, videos and graphics. A free Photobucket account can store thousands of photos and hours of video.

Can share photos, videos and albums by email, IM, and mobile phone. Z-share does not provide a sharing via SMS utility. Friends and family don’t need a Photobucket account to see files. This is the same as z-share. Allows group albums, to let you collaborate together with friends in a single group album of photos and videos. Z-share does not provide this. Hundreds of album themes are provided to design and personalize photos and video albums. Z-share is much more basic than this. There is no option for personal customization. A built in organizer is provided. This is provided on z-share when you pay to become a member or premium member. As a free user z-share does not offer this. Photobucket offers a built in full featured photoeditor that allows users to fix photos, as well has edit them in a unique way with frames, stickers, and special effects. Again, Z-share is not as elaborate as this. Built in searching to find that latest and best photos, images and videos is provided by photobucket. Z-share does not provide a search utility. A scrapbook builder is provided by photobucket to build online and printed scrapbooks by simply dragging and dropping into one of the hundreds of pre-built scrapbook designs for share. Z-share does not offer this service. Photobucket also provides a slideshow building with lots of fun styles for posting and sharing on websites, blogs or your profile. There is no option for building slideshows with z-share. It only provides links for downloads that can be posted on websites and blogs. Photobucket provides a photo and prints gift sore that lets you print pictures as well as add them to various items (greeting cards, shirts etc), you can also pick up prints if in the US from Target stores. There is no option to do this on Z-share.

Photobucket is a much more elaborate site with many more options and facilities for the user. Z-share is very basic and essentially only offers and upload and store service.

Posted in Uncategorized

DHTML Object Model…

lcmk132 — Wed, 04 Mar 2009 11:32:32 +0000

After reading “About the DHTML Object Model (DOM)” it gave me insight into what happens when the DOM is implemented. Basically this model allows for specific HTML elements to be programmed. Each element can have it’s own script behind it to allow for user interaction.

The model focuses on collections of elements. There are 3 different types of collections:

1. All: Contains all elements that are beneath that element in the hierarchy

2. Parent: Element directly above a child element

3. Child: Direct decedent of an element

Internet Explorer supports the all collection whereas the W3C standard uses the getElementById() method. Describe the difference this makes to accessing a particular HTML element in JavaScript.

The following document object properties are not supported in the W3C Document Object Model:

document.layers[]

id_attribute_value

document.all

document.all.id_attribute_value

document.all[id_attribute_value]

Scripts that use these properties will not execute in Firefox, Camino, Seamonkey or other standards-compliant browsers. So that these properties do execute the W3C access attributes and access methods should be used. These are supported by internet explorer too.

IE-specific ways to access elements W3C web standards replacements

id_attribute_value document.getElementById(id_attribute_value)

document.all.id_attribute_value document.getElementById(id_attribute_value)

document.all[id_attribute_value] document.getElementById(id_attribute_value)

FormName.InputName.value document.forms["FormName"].InputName.value or
document.forms["FormName"].elements["InputName"].value

InputName.value document.forms["FormName"].InputName.value or
document.forms["FormName"].elements["InputName"].value

FormCtrlName document.forms["FormName"].FormCtrlName or
document.forms["FormName"].elements["FormCtrlName"]

document.forms(0) document.forms[0]

What is the difference between the keypress and keydown events?

Onkeypress: Presses and releases a key (full down and up cycle). however, if a key is held down, multiple onkeypress events are fired.

Onkeydown: presses a key. Only a single event is fired, even if they key is held down.

What is meant by event bubbling?

Event bubbling makes it easier for the HTML author to handle events. It allows for multiple common actions to be handled centrally. It reduces the amount of overall code and code changes required to update a document.

How do you cancel an event?

If an event is not canceled it bubbles through the document to the parent element unless the event is canceled. To cancel set the “window.event.cancelBubble=true;” in the event handler.

Posted in Uncategorized

The Tag

lcmk132 — Mon, 09 Feb 2009 12:21:39 +0000

The purpose of the
tag is to create an application like box in which a user can input data. Form tags are used for survey like web pages where a user may need to input data such as ‘Name’.

The typical contents found between and
is the ‘action’ attribute, ‘method’ attribute, ‘div’ element, ‘label’ element, ‘input’ element, ‘textarea’ element, ‘row and column’ attributes, ‘size’ attribute, and ‘input’ element.

The ‘action’ attribute specifies a URL to where information from the form is to be sent. The ‘method’ attribute specifies the HTTP method that will be used to make the request. This is either done via the ‘get’ or ‘post’ attributes. The ‘div’ element defines logical divisions within the document. This means that when you use a
element, you are indicating that the enclosed content is a specific section of the page. The ‘label’ element is used to associate text with another element on the form. For example ‘age’ is the label. The ‘input’ and ‘textarea’ elements are HTML controls. The ‘input’ element displays a box one character tall by a number of characters wide that is specified using the ‘size’ attribute. The ‘textarea’ control is similar however, it allows the user to enter multiple lines of data. The size of ‘textarea’ is specified using row and column attributes. These are the typical contents that are found between
and
. ‘Enctype’ determines how the form data is encoded. Whenever data is transmitted from one place to another, there needs to be an agreed upon means of representing that data.

Posted in Uncategorized

Numero Uno…

lcmk132 — Tue, 03 Feb 2009 06:28:20 +0000

Welcome to SQLHTML!

Currently, I am running another blog http://madnessandextravagance.wordpress.com

I blog about anything that I find interesting mostly within fashion, culture, art and music. I’ve only recently started doing it and I haven’t done a post in weeks.

As for experience in programming I’ve got zero. However, I’m interested to know how to do it :)

Posted in Uncategorized

IE-specific ways to access elements	W3C web standards replacements
id_attribute_value	document.getElementById(id_attribute_value)
document.all.id_attribute_value	document.getElementById(id_attribute_value)
document.all[id_attribute_value]	document.getElementById(id_attribute_value)
FormName.InputName.value	document.forms["FormName"].InputName.value or document.forms["FormName"].elements["InputName"].value
InputName.value	document.forms["FormName"].InputName.value or document.forms["FormName"].elements["InputName"].value
FormCtrlName	document.forms["FormName"].FormCtrlName or document.forms["FormName"].elements["FormCtrlName"]
document.forms(0)	document.forms[0]

SQLHTML

JavaScript and XHTML…

All about CSS…

Skype, Dizzler and File2HD Web Apps…

Office Live Workspace VS. Google Docs

How Web Apps Handle Layout…

GMAIL: Email Web Application

WORD PRESS: Blogging Web Application

DEL.ICIO.US: Bookmark Organiser Web Application

Invalid username or password. Please try again

AJAXxXxX…

Online Storage…

DHTML Object Model…

The Tag

Numero Uno…

Invalid username or password.
Please try again