Feeds:
Posts
Comments

Archive for February, 2011

Write an introductory post on the use of Javascript in XHTML documents.  Topics could include if, loops, functions, parameters and return values. Be sure to cover script embedded in the document and external scripts.

The utilisation of JavaScript within a XHTML document has been plaguing me for some weeks. The DOM in it structure is quite simple to understand when you lay it out. When coding, however, there are certain styles of addressing certain parts of a program. Practice is always so very different from theory.

For example, say one would wish to either count all the boxes checked within a form, or detect when not looking at a picture from a pop up.

Name and Address – Due to confines of web browsers (only IE, the main source of internet standards conflicts and slow adoption) DOM version 0 (zero) is the main orientation. Now to be brief, while we could find certain elements via their name or tag, the best is id. This allows quick and unique application to that area and works browser wide and is fairly compaitible/adaptable. Note that this is actually a JavaScript method! Example:

document.getElementById("userForm123")

…and the best way to trim that down, rather than use it every time you wish to address it in a code is assign it to a variable:

var formAccess  = document.getElementById("userForm123");

Capturing and securing – the events and handling on the page  revolve around dynamic interaction on the page once it has been loaded. The page reacts to certain things, and specifically im looking at the blur (onblur) that activates when a user goes from having it ‘in focus’ meaning, interacting with that part so to speak. a good example is switching between windows – they blur when you select a diferent window. Rather cmmon with internet advertisments and how they pop up alerts askign “DO YOU REALLY WANT TO LEAVE? 😥 BUT YOU WON $ 100000”. Another example could be when a form submit button is pressed at finialisation (onsubmit).

Implementation – So we have a form, we know how to access it and who to react to triggers that are of use. A classic example i mentioned before to count how many radio buttons have been pressed would be running a FOR loop and checking every true value and chalking up a score as you go along, then writing  or piping that to another text area or even writing it into the html page!

I’m going to head out now and try some codes within the assignment and flesh this out with my finding!

Later: Okay, so i managed to find some really simple code that will is easy to understand, while also applying to the assignment. Very exciting!

Here is an example of grabbing content and piping it over to another spot. Firstly, the HTML and ID references. ( i will take out ending tags for readability)

<form name="myform">	
<table border="0" cellspacing="0" cellpadding="5">
<textarea name="inputtext">
<input type="radio" name="placement" value="append" checked> Add to Existing Text<br>
<input type="radio" name="placement" value="replace"> Replace Existing Text<br
<input type="button" value="Add New Text" onClick="addtext();"></p>	
<textarea name="outputtext"></textarea>
</form>

When the button is clicked, the function addtext() is called. What is addtext?
<script language="javascript" type="text/javascript">	
function addtext() {				
var newtext = document.myform.inputtext.value;	
if (document.myform.placement[1].checked) 
{	
document.myform.outputtext.value = "";
}
document.myform.outputtext.value += newtext;
}
</script>

Now, I thought it would use the getElementById, but this example is obviously too simple. Maybe this way of calling the element by name is more compatible? All browsers support it, but it does not pass technical validation.

I will definitely adapt it and post back my results!

Read Full Post »

Cascading Style Sheets

Write a blog post on why cascading style sheets are important when developing a web application.What options are there for providing styles to parts of a document?  What can you do if you want to use your own style to read a web document in Internet explorer?  How can an alternate style be used in Firefox?

Cascading Style Sheets

The internet today would not look near the same style and quality we see today without the aid of Cascading Style Sheets. Here is why:

  1. Style – CSS has more options orientated to how the browser will render the page, far supassing the ability of the tags. Though the likes of HTML5 tags have advanced considerably (here, here and here) , CSS (versions 1 to 3) will always excel at implementing fonts, colours, images, borders and layouts. The level of command and ease to apply graphic changes has it heavily implemented in the majority of popular web applications – wordpress is one classic example.
  2. Web efficiency – As CSS was designed to seperate document presentation from content, one style sheet can be attached externally (css can be within the page also), affecting a potential of thousands of pages at one domain. This caching, among other benefits such as being easy to read and code, means that bandwidth is cut down and page rendering is quicker.
  3. Mobility – different style sheets can be applied to different scenarios (ie a print version or a night-time style, via Javascript, PHP, etc). For mobile devices, it makes life a lot easier to have a a ‘mobile version’ or ‘lite site’ which takes into account bandwidth, screen dimensions and functionality.
  4. Disabilities – One of the major focuses within websites for businesses (and im talking couciles and corporations here) is accessibility.  This specific catch cry originates from statistic leading to say that nearly 1-12 people on the web have some level of visual impairment (mostly colour blindness). However, consider the blind whom have a treacherous and expensive time venturing out to do things such as bank and shop. CSS helps (on top of other areas) to adapt and hold content relative to making their experience perfectly useable.

Examples on how to apply (and read) CSS are in three forms:

  • Application to, and superseding, html tags:  for example the p for the <p> paragraph tag. A very powerful ability indeed, and essential for modern design.
  • Application to Span classes: notably written with a dot in front of them (i.e. .span eg.docTitle) and spans across a ‘block’, and every one names after it. For example, this could apply to a <div> that covers the centre of your main text conent, of each post.
  • Application to ids: Id’s are unique (#uniqueTitle), which means a specific application is in order; which ever tag has that name will have that style applied to it. Furthermore, that id can only be applied (or, acknowledged by the browser) once per page. This makes sense as it both differentiates from the normal span class in name and application – instead of having all spans and some only being used once, there is ID.

As a further note on style sheets, one might apply there own, helping accessibility and the like. If you need  all text to be permanently larger, or certain colours only, this would be a brilliant option. Further information here. Though that tutorial  and option is specifically offered by Internet Explorer, Mozilla’s Firefox has many plugins and extensions available to help with accessibility. Also via javascript. As such, the user has a choice between either no style sheet, the basic sheet or an alternative sheet. This alternative sheet is set by the developer with this such line in the header:

<LINK type="text/css" rel="alternate stylesheet" href="alternate.css" title="Alternate Style" />

 

 

 

Read Full Post »

The form Tag

When wanting to make use of the users input the FORM tag holds the key. Development for any business eventually leads down the road of customer feedback – whether reflection of a the quality of product, bugs in a site, or purchase or merchandise. One of the most common examples of form utilisation would be a questionarre, such as seen currently on the Bond university website by iPerceptions.

While the <form> tag can be an extensive subject , in short it gives the means for a developer to acquire a range of input from the user. Further more, the input can trigger other things on the page, other pages and be sent to servers for different responses.

As to what functions can be found within a form:

  • text and text boxes
  • drop-down options
  • check box and radio button
  • reset button to clear
  • submit button (linked to other parts)

Other tags within and relative to the form are:

  • Action – URL of the Common Gate Interface program; basically the bridge between the user and the application on the web-server dealing with the information.
  • Method – How its sent to the CGI
  • Name of the form
  • Enctype: type of form (get/post)
  • Accept: what files will be accepted (MIME)

Now, to get to basics, let’s look at the form ‘action’.
Action is the action which happens upon submit. The tag and attributes are located in the form tag like this:

<form action="form_action.asp">

This action will equal the execution of form_action.asp. What is executed could be anything from PHP to java to even the old and unweildly mailto: – not just the asp file noted. such as:

<FORM ACTION="/cgi-bin/formmail.pl" METHOD="POST">

What this code is that executes could be anything. Most commonly it will be sent to a server with a database to be recorded or e-mailed on to whomever it is most important. An example that comes to mind could be part of a shopping cart which sends on details to the shipping department.

In the example code above, the Method tag can be seen in reference to the action. Get is the default option and orientates to small query only content. It essentially ‘gets’ data from the server. Post on the other hand can involve a lot more and sends it’s information to the server to be processed. Post can become an issue when sent multiple times. An example of post might be the request to join a news group by sending your name and e-mail address.

Finally, enctype. This bit of code helps in enforcing how the information should be encoded for the server. such as this:

<form action="form_action.asp" method="get" enctype="text/plain">

Also, these values can be used:

  • multipart/form-data – no characters are encoded
  • application/x-www-form-urlencoded – all characters are encoded (default
  • text/plain – very common (google search URL) where the spaces are converted to + signs

 

<form action=”form_action.asp” accept=”image/gif, image/jpeg”>
First name: <input type=”text” name=”fname” /><br />
Last name: <input type=”text” name=”lname” /><br />
Your image: <input type=”file” name=”pic” id=”pic” /><br />
<input type=”submit” value=”Submit” />
</form>

 

Write a blog post entitled ‘The <form> Tag’ that summarises:

  • the typical contents found between <form > and </form>
  • the significance of these attributes of <form>:
    • method
    • action
    • enctype

Use any source of information but please don’t simply copy and paste text. If your sources are web pages include the links at the end of your post. [Hint: On our Resources page check the books on HTML from Safari and Books24x7, and maybe a key online portal like http://www.w3schools.com.]

Read Full Post »

My Tech Experience

Aside from being hooked on the entertainment side of electronics and the quality and comfort of life they bring to ones life, I have focused on it as a career option.

I spent a pretty pleasant year studying Web Design at Kingscliff TAFE and succeeded in finishing it, taking away friends and a means to start a business. I Then went on to start the NEIS scheme – a government funded scheme that aims to help starting businesses through their first difficult year. During that year I dealt with all sides of the business and more specifically, the entire creation of the websites people where now paying me for. It was as I started to get larger jobs that it dawned upon me that I really did not know how to create modern websites to the degree i needed. To say the least, it was a rocky year but through it’s crash course I learn a fair amount.

Thereafter, after i left it behind 18months later to manage a cafe full-time, I still found myself called upon to do websites. Tech work has the propensity and trap of calling upon charity. recently i have found myself working on wordpress sites alone due to the speed and availability of the structure and community running it. Even spending 10 hours tinkering to customise layout is still less effort and time than creating anything similar from scratch.

Most recently, the first semester in Bond University late 2010 had me thrown in the deep end with VBA and Oracle PL/SQL. As it turned out I grasped these quickly and managed to do fairly well in the courses, of which I feel I my experience with JavaScript and (minorly)PHP helped.

To recap in specifics, i will throw down a list of my history…..

Old/interest/non-educational:

  • BATCH – Windows command and scripting. Mighty useful for mounting a true crypt volume, basic tasks or creating a basic rabbbit-style virus.
  • Photoshop script – actions save you time! Manual editing can help too.
  • Linux – Just getting into linux more now, know how it works and very basic commands. I have plans to put a (home) server into gear shortly. I prefer Ubuntu and all variants.
  • Pyhton – just learning the ropes now. love it.

Web design – TAFE and Business

  • XHTML
  • XML
  • FLASH (actionscript 1,2)
  • CSS
  • Javascript
  • PHP

Bond University

  • VBA
  • PL/SQL (oracle)
  • JAVA (currently undergoing)
  • Ajax (soon)

Programs I am very familiar with:

  • Adobe photoshop, Illustrator, Flash, Fireworks, Indesign and especially Dreamweaver
  • Notepadd++,  BlueJ, firefox/chrome (+plugins), MS Office
  • Windows 98/ME/XPhome/XpPro/Vista/Windows 7 Ultimate
  • Ubuntu, kubuntu, xubuntu, RedHat, Knoppix, pup, Damn Small Linux,
  • PfSense, m0n0wall.

Read Full Post »