Monitoring traffic and compiling website traffic reports

For this assignment you will need to write a short report on the Bathurst TAFE website or a part thereof, say: your web page(s).

The report should...

• Identify and analyse available site analysis software - what software or reporting service would you recommend and why.
• Give a brief description of how to obtain and install the most suitable site analysis software
• Identify the required report options
• Develop a traffic monitoring program
• Show examples of the required traffic reports
• Analyse reports to identify any improvements that might be made to server/site performance
• Apply forecasting methodologies to predict traffic peaks
• Recommend changes in hardware and/or software that might be needed
• Suggest what training might be required to use the package
  

In particular, I'd like to know:

• how many people come to visit the site in a week
• how long they spend on the site
• which are the most popular pages on the site
  
• where they're coming from (both where they live and how they might have found the web site)
• what search terms were being used if they arrived through a search engine
  
• what browser and operating systems they are using
• when the busiest and slowest times are on the site

You can blog your answer or print it out with a cover page. Try to get it all done and posted by Monday 19th of November.

---

Image: '1D3_03323p_1310'
www.flickr.com/photos/84739639@N00/1432102881

Political Accessibility

To flex our accessibility assessment muscles we're going to analyse a real live web site and blog the results.

Pick one of the sites being maintained by the Australian politician or party of your choice (e.g. the Labor Party, Liberal Pary, Kerry Bartlett, Bob Debus)

What demographic do you think is being targeted? Describe the target audience's age, education and reading level. Analise some key pages on the web site for reading and comprehension levels (juicy studio might be useful here) - does the copy match up with the audience's education level?

What are the legal (and ethical?) accessibility requirements for the web site? Does it meet these requirements? (UITest might be helpful here, along with the usability checklist set out in the Victorian Government Accessibility Toolkit)

What changes would you make to the site to improve its accessibility and/or make it comply with current legal requirements?

Post your answer or print and submit by Monday the 5th of November.

---

Image: 'Have you?'
www.flickr.com/photos/19487674@N00/291687660

a joint venture

We've had a little excursion into table joining - extracting data from tables that have a relationship between them (sharing primary and foreign keys that is)

to get some practice, let's extend our earlier customer table, making two more tables so we can let them place orders for products. These tables will be:

Products
productID (int, 11, auto_increment)
productname (varchar, 250)
price (decimal, 25)

and

Orders
orderID (int, 11, auto_increment)
productID (int 11)
customerno (int 11)

the productID and customerno in the orders table are foreign keys to the products and customers tables, and so our customers can have orders for many products, and our products can be in many order records.

Once you've built the tables put some test data into them - let's say 4 customers, 4 products and 4 orders - make sure that only 2 of your customers have placed orders (the other 2 are still thinking about it), and that only 2 of your products appear in any order (the other 2 are just gathering dust)

Once you have your test data in place create 3 SQL queries to show the following data:

1. all orders (show customer name and product name only)
2. all customers (and what they've purchased, if anything)
3. all products (and who purchased them, if anyone)

the first query is a straightforward inner join, the last two will be left and right outer joins

Once you have the SQL working correctly, try building a set of php pages to display each one. For bonus marks, only show the customer name once on the all customers report (with a list of purchase items), and the product name once on the products report (with a list of customer names)

Finally, make an index page that points to each of the 3 reports - upload the lot (and your tables and test data) to the bathurst-tafe server and post a link back to the index in your blog.

---

Image: 'Join Us'
www.flickr.com/photos/16682940@N00/94736480

Cheating

Last week we looked at creating a table, inserting some information and showing the results.

You could have written the code from scratch - or done the smart thing and used phpMyAdmin's 'show php' feature.

This will take you a long way towards most of the things you want your web pages to do, but you might need some help getting phpMyAdmin to do its tricks in the first place - which is where the ilovejackdaniels cheat sheet comes in handy.

This page will list the common select statements and functions - and contains enough information for you to accomplish the following performance criteria:

Write an SQL statement that selectively retrieves data

1. Restrict the number of rows retrieved by placing criteria in the 'where' clause
   

2. Restrict the number of rows retrieved by placing specific criteria in the select statement
   

3. Use comparison operators in the 'where' clause to compare numeric, character, string, date and time data
   

4. Use Boolean operators with the correct precedence
   

5. Use criteria in the 'where' clause to check for a range of values, to select values from a list, and to check for values that match a pattern
   

6. Use SQL syntax to suppress duplicate values from query results
   

7. Take action to exclude null values from a query result
   

Write SQL statements that use functions

1. Use arithmetical operators with the correct precedence
   

2. Use string functions and operators to obtain the required query output
   

3. Use mathematical functions to obtain the required output, where required
   

4. Use date functions to obtain the required output
   

5. Use SQL aggregate functions to obtain the required output

Go on, try it out (you won't regret it)

---

Image: 'Blatent Cheating'
www.flickr.com/photos/81719291@N00/88894036

pop quiz

Here's a short exercise to practice what we've learned so far.

Create SQL statements to accomplish the following tasks. Post your answers in your blog. Hint: you might find this easiest to do using phpmyadmin.

1. Create a customers table with an auto-incremented custno field, an indexed custname field and a single address field.
2. Write the SQL code that would insert 'J. Smith' into the custname field and 'Leeds' into the address field.
3. Write the SQL code that would extract all the customer details from the customers table in alphabetical order

For bonus marks:

Create an html page with a form for entering new customers. Link the form to a php page that inserts these values into your table. To include this code into your blog, you're going to have to do some formatting (blogs don't like < and > characters) - cut and paste your code into and out of the postable site to fix this.

---

Image: 'We Won the Quiz'
www.flickr.com/photos/24204505@N00/148260617

Cutting Code

catching up with some things I glossed over last week...

Creating a table

once you have a database server and a web server set up on your local machine, you'll need to open a web browser and start up phpMyAdmin. Something like: http://127.0.0.1/phpmyadmin (the capital letters may or may not be important)

The first time you log in the default administration account for mySQL is root with a blank password. Since this database will only be used for development we can keep this, but if you were setting up a database on an internet facing web server you'd want to set the password (or better, create another user and delete the root user altogether).

Once you're logged in to the database server you'll need to create a database (test) and create a table on it (contacts) with the following fields (as set out in the tutorial):

Name	Type	Length	Description
id	INT	6	A unique identifier for each record
first	VARCHAR	15	The person's first name
last	VARCHAR	15	The person's last name
phone	VARCHAR	20	The person's phone number
mobile	VARCHAR	20	The person's mobile number
fax	VARCHAR	20	The person's fax number
email	VARCHAR	30	The person's e-mail address
web	VARCHAR	30	The person's web address

Inserting some data

In order for our php interpreter to use data in the database you need to tell it a few things:

1. where the database server is located (on the development machine that's easy, it's the localhost, but in the real world the database server is usually another computer with an ip address all of its own
2. Who's trying to connect and the password (to keep out casual snoopers)
3. The name of the database you're trying to access (a database server can host mutliple databases - each database consisting of a collection of tables and indexes)

Typically this information will be kept in a single file which gets included on all the php pages that access the database. This means you can change the details in just one spot to update the whole site when you come to move it from the development environment to the production server.

I keep this information in a connect.php file which has the following code in it:

<?
$user="root";
$password="";
$database="test";
mysql_connect(localhost,$user,$password);
@mysql_select_db($database) or die( "Unable to select database");
?>

$user, $password and $database are all variables (php variables all start with a $ sign) which can be changed at any time. You can include it in your php pages by inserting the following code:

include "connect.php"

the actual process of inserting records is outlined quite well in part 3 of the tutorial.

This week we went on with part four looking at how we get new values from a form to insert into the table. We then worked through the rest of that part to see how to display the contents of the table on a web page.

And that was about it for this week - next week we'll look into how to create a search form, and how to sort the results.

Still to come: editing and deleting records, and then: using a multi-table database.

---

Image: 'Neon scissors'
www.flickr.com/photos/48889087714@N01/9658510

prequel to SQL

Time to star thinking about using structured query language (SQL) to create database structures and manipulate data

But before we do, we'll be needing a local development environment with a web server, database server and php scripting engine all rolled into one... XAMPP

Install this on your operating system of choice and bingo - you've got a grown up web server in a tiny little package.

To check that it's working start the program (on a windows machine that will be something like running C:\xampplite\xampp_start.exe) and then type: http://127.0.0.1 into your web browser's address bar. This should display the home page for your new local web server.

If everything's working OK you should see the xampp home page - and on the left a link to your phpMyAdmin page where we'll be setting up a database and single table as outlined in this PHP/mySQL tutorial

Try it out and post some php pages to the local server's root (somewhere like: C:\xampplite\htdocs) remember, test them by calling the local host ip address (e.g. http://127.0.0.1/test.php)

---

Image: 'Will code for food'
www.flickr.com/photos/67523311@N00/114420037

the world accordion to me

One of the things I forgot to blog about last week was scriptaculous - a JavaScript framework that we started to work with in the face to face class.

A search for scriptaculous on Training o2 will turn up links to the stuff we covered. Have a browse through and then...

Install scriptaculous and see if you can't fix this FAQ so that it only shows the questions. When a visitor clicks on a question the FAQ content for that question should be expanded 'accordion style' onto the page. Just cut and paste the contents section off the FAQ page for this project, don't worry about the navigation stuff, then upload to the bathurst-tafe server and blog about it so I can go look.

For bonus marks, add a link in each FAQ answer that closes down that division, or automagically close any open divison when you open up a new one.

For 'hero' status, add code that ensures your JavaScript is accessible. (you'll need to do some research into accessibility and look into unobtrusive JavaScript)

---

Image: 'Toy Accordion'
www.flickr.com/photos/79483207@N00/123986970

briefly back from a break

Hi folks, I've not forgotten you all, I'm just a bit busy at the moment with some assignments of my own (3 more and I finish my degree).

I've also been busy building a web site for students and trainers. Called Training O₂ - it's a resource portal, and it's where I want to point you for our next educational foray.

If you have a look at the topic: Determine and apply appropriate development methodologies you'll find I've left some links there to various interesting sites (if your definition of interesting is somewhat broad, that is).

Your mission: read through the quick study resource, then browse the other methodology sites I've linked to. After you've thought about them a bit, come back to TO2, register, and vote on the methods you liked the most; or leave a comment on the quick study resource telling me which methodology appealed most and why (or, if none of them are your cup of tea, what you'd prefer to use). For bonus marks, see if you can find some other 'development methodology' links and post them to the TO2 site.

Hope the business card assignment's keeping you thinking - catch you next week,
peter

Another design project

Here's another assignment from Nicole, the design teacher:

Typographic Portraits

You will be assessed on your ability to: Receive and interpret this brief Generate a range of graphics in response to the concepts. Hand work in on time and in the appropriate format.

TEACHER / ASSESSOR: Nicole Welch

DUE DATE: 5th June

RESULTS WILL BE PRESENTED AS A:MARK

DESIGN BRIEF:

Typography is the definitive tool for the designer and most design solutions can be found through an effective use of text. For this exercise you should try to move beyond the literal and take a more conceptual approach. You must use your own name for each of the following business card designs. This set’s limits on your use of words to solve the problem and you must instead find a creative visual solution. Create a business card for each of the following personalities, using your own name each time. The text for each should read: (see examples.) My name is (your name) and I’m a Chameleon My name is (your name) and I’m an Acrobat My name is (your name) and I’m an Amphibian My name is (your name) and I’m a Taxi Driver My name is (your name) and I’m a TV Evangelist My name is (your name) and I have an Allergy My name is (your name) and I live in a nuclear fallout area My name is (your name) and I have the Hiccups My name is (your name) and I’m Accident prone. My name is (your name) and I’m a Magician. In each design it is your name that will take on various visual attributes of the thing described. Your graphics must share the same ratio as an actual business card but must be larger and at 300 DPI.

---

Image: 'untitled'
www.flickr.com/photos/13584435@N00/498752523

Bug Crushing

This week we'll be looking at squashing bugs.

First up though, you might enjoy finding out if you've got the makings of a programmer

Don't sweat it if it turns out you should be tending gardens instead of web sites, I haven't met anyone who couldn't do this stuff yet (just a few who can't seem to enjoy it much - go figure :-)

In my experience, the folks who enjoy programming the least are those who haven't got the hang of debugging.

The simple truth is that half your development time is going to be spent tracking down and fixing bugs, and the quicker you can do this the better you're going to feel about the whole coding thing.

So, without further preamble, here's a couple more sites describing the fine art of debugging JavaScript with firebug:

• the Aptana pages on Inspecting and debugging with Firebug
• and for the programming experts, a shorter cheat sheet
  

Finally, here's some Debugging Challenges for you to practice on. Once you've tried out a few, take a turn at creating one of each of the four bug types identified on the Wikiversity page.

---

firebug

This week we're going to start on a new subject: 'Locate equipment, system and software faults' (also known by its friends as ICAT4221A). You can read the gory details on the Training Packages Unwrapped site

If you've started doing any of the JavaScript challenges you should have plenty of material that needs troubleshooting :-) what I would like to do here is introduce a tool that will help with your fault finding.

It's a firefox extension called firebug - you'll need to install it and restart firefox before you can continue. Then have a look at the following couple of movies:

• Joe Hewitt (the developer) showing it off to the folks at Yahoo, and
• a guide to JavaScript debugging using Firefox and firebug

Once you've seen these, try setting a breakpoint and stepping through some of the JavaScript code you've written so far. Once you've gotten the hang of it, try introducing an error or two to see how firebug reacts.

---

Image: 'Grumpy'
www.flickr.com/photos/95118988@N00/217217600

a little mixed up

If you followed through the javascript exercises I recommended last week, you might have had some problems with the final parts of lesson 3 - turns out there were more than a couple of coding horrors buried there.

I won't spoil all your debugging fun by listing them, but here's some hints:

- strings must start and finish with the delimiter (a ' or a ") but cannot include that delimiter inside the string (unless you do some tricky escape character thing - look it up if you need to know how).

- if you use else if statements then the program will quit checking after the first if statement it finds to be true.

- the final if statement is all twisted up, and your error message won't show up properly if you run it the way its written.

And now, upwards and onwards...

it's time to look a little deeper into manipulating the document object model (DOM to its friends). Work through the javascript basics lessons six and seven. Then have a crack at these JavaScript challenges. Let me know how you get on with an upload and blog post . Don't rush this, there's some deep thinking required - but master it and you'll be on top of the client scripting pinnacle of fame :-)

---

Image: 'MichaelwheredyougetthosepeepersHQ'
www.flickr.com/photos/90732224@N00/367500518

image mapping

tying up a loose end in the html subject, we looked at image mapping - defining 'hotspots' on an image which become hyperlinks to other pages.

not particularly useful imo, but worth knowing about.

you can read up on the creature on the HTML code tutorial site, and if you're not too interested in coding by hand, Rany's found a great online tool that will ease the pain: the HTML-Image map Creator WYSIWYG

to practice, find a creative commons licensed image using flickrCC, build a web page around it and create some hyperlinks off it to relevant wikipedia articles. The example we used in class was a map with links to relevant cities/states, but any image offers possibilities - e.g. linking the eyes of a portrait to the article on eyes in wikipedia, let your imagination run with it.

Don't forget to add the attribution for your image.

As always, upload, add a link from your exercises page, and blog to let me know there's something to look at.

---

Image: 'Lost'
www.flickr.com/photos/25159586@N00/48302937

4x4

I just found out that the (X4) next to each of the topics in the Black Squares exercise mean that you'll need to create 4 images for each topic - that's 24 images in all - 96 black squares - 79,040 pixels

have fun.

---

Image: 'IMG_3116'
www.flickr.com/photos/15066227@N00/36422830

looking into forms

The first screen you'll need to build for a login application will be a simple form that asks for a user name and password.

To save the server unneccessary work, and your web visitor unneccessary delays while they wait for an answer, it would be good to have some way of preventing the form from being submitted until the visitor has entered both a name and a password.

We do this by writing some client side script which checks the form before it gets sent to the server. If it finds that either the name and/or the password fields are blank it should alert the user and let them remedy the situation before sending the form off.

Here's a blow-by-blow analysis...

Calling a script when the submit button is pressed

First we need a function to call. In the head section of your login form page, add the following script:


function validateForm(){
alert('we're now validating the form');
}

</SCRIPT>

And in the form tag of your page add an ONSUBMIT attribute that calls the function:

<FORM ONSUBMIT="return validateForm();">

Onsubmit is an 'event' that gets called when someone clicks on the submit button for a form. Try this out in your form and you should see an alert box when you click on the submit button.

Preventing the form from being submitted

If you had sharp eyes you might have noticed that the value for the onsubmit attribute said: "return validateForm();" - it returned a value picked up from the validateForm function to the browser.

If that value is 'false' then the browser will not process the form any further.

Don't just take my word for this, try it out by adding the following line to your validateForm function:

function validateForm(){
alert('we're now validating the form');
return false;
}

Now try submitting your form with some values in it and you should see that they stay there when you try to submit the form. It won't get submitted because you're passing the 'false' value that validateForm sends back through to the browser.

Checking for a form value

All well and good so far, but we still haven't got anything that checks the value our user's typed into the form.

To do this we need to add a little more code.

Firstly, we'll need to be able to identify our form elements. We do this by adding id attributes to the input tags, something like:

<input type="text" id="name" />

We can see the value in this field now by calling a JavaScript function: getElementById.

Try it by replacing your validateForm function with the following code:

function validateForm(){
alert('hello '+document.getElementById('name').value);
return false;
}

Type something in the name field of the form and submit it and you should see the name pop up in an alert box.

Go ahead now and add an ID and some JavaScript code to show the password in the same way.

Checking for empty fields

From here it's a simple task to check for an empty field and optionally show an error message.

Try this code in your validateForm function...

function validateForm(){
if (document.getElementById('name').value == '') {
alert('you must enter a user name');
}
return false;
}

Test it with and without anything in the user name field, then add some code that checks for a password in the same way.

Reducing user frustration

If you've gotten this far you probably have a script that brings up two alert messages if the user submits with both fields empty.

It would be better to just show one message with all the errors listed together. It would also be good if the form submitted properly when they've entered the required information.

We can kill these two birds by building an error message string during the testing phase of our script, and then either displaying the error message if there is one, or returning 'true' and allowing the form to be submitted if there is no error message to show.

It should look something like this:

function validateForm(){
var errormessage = '';
if (document.getElementById('name').value == '') {
errormessage = 'you must enter a user name';
}
if (document.getElementById('password').value == '') {
errormessage += 'you must enter a password';
}
if (errormessage == '') {
retrun true;
} else {
alert(errormessage);
return false;
}
}

What?

Let's look at what's going on here.

We start out by creating a variable called errormessage and assigning it an empty string (the two single quote marks side by side)

Then we look to see if there's any user name entered. If there isn't, we set the error message to prompt the user for one.

Next we check for a value in the password field. This time, if we find nothing, we add a message to whatever is already in the errormessage variable. By using the += we're telling the program to add a string to anything that's already in the variable.

Finally, we check to see if there's anything in our errormessage variable. If there isn't we return true, which will tell the browser to go ahead and submit the form.

If there is a message, we display it and return 'false', preventing the form from being submitted.

Try it out. Add the code and test it with the 4 scenarios (nothing etnered; name or password only entered; and both name and password entered)

Postscript

Just one little bit of tidying up to do.

Right now the error message for the 'nothing entered' case looks a bit ugly. To get the error messages appearing on seperate lines we need to add the newline character to our first error string:

errormessage = 'you must enter a user name\n';

There, now it's perfect :-)

Further reading

If you've still got some JavaScript curiosity left, I've put some pages up for you to read through. Try the first three JavaScript primers then take a well earned break.

---

Original image: 'The thief eats a seed'
www.flickr.com/photos/11334344@N00/124302244
by: Bob Travis

another piece of the puzzle

Continuing our 'intro to programming' series, here are a couple more worksheets...

• Selection
• Data Types &
• Repetition

Once again, try implementing your solution in JavaScript - upload and let me know where I can see it :-)

---

Image: 'Ice form'
www.flickr.com/photos/65919269@N00/218966763

designing - outside the box

I'm still worrying about the arty side, and asked what the other web students were up to. It turns out they've got an assignment. Here's the brief:

THE BLACK SQUARE PROBLEM

You will be assessed on your ability to:

• Receive and interpret this brief
• Generate a range of graphics in response to the above concepts.
• Hand work in on time and in the appropriate format.

TEACHER / ASSESSOR: Nicole Welch

DUE DATE: 15th May

RESULTS WILL BE PRESENTED AS A: Grade
This assessment is Grade code 72:
Distinction 83% to 100%
Credit 70% to 82%
Pass 50% to 69%

DESIGN BRIEF:
Using only four black squares for each design, create graphic images to express the meaning of each of the following six words:

1. Order (X4)
2. Increase (scale) (X4)
3. Bold (X4)
4. Congested (X4)
5. Tension (X4)
6. Playful (X4)

Consider the following principles to help you find creative solutions:
Framal reference, touching, overlapping, cropping, contrast of size and the dynamics of negative –positive relationships.

SPECIFICATIONS

Each graphic must be:

• Created in Photoshop and saved as a JPEG or GIF.
• 10cm x 10cm
• 72 DPI

Note: Always keep a copy or record of your assignment. Loss or misplacement of your assignment will not be accepted as an excuse for non-submission.

I'm pretty sure we can manage this one online too - with a few minor adjustments :-)

For starters, I'm not overly concerned about what graphic editing package you use. My personal preference would be the Gimp, but use whatever you're comfortable with.

Also, I'd like you to experiment a bit with the presentation. You could try some JavaScript gallery script to create a page of your own, or upload the images to flickr and make a slideshow there, then look for scripts that you can include on your own web pages to display the flickr slideshow - do a search for options. As always - put a post on your blog with a link to your efforts (and some comments on what you've learnt along the way).

Nicole also had a little exercise for you to try. Take a look a some of the sites featured on web pages that suck - pick your two favourites and link back to them in a blog post about what you hate about them most (or find a couple all by your lonesome and write about them instead). Then do the same with two sites that you admire. You might start your search by browsing through this flickr photoset. Once again, link back to them in a blog post about what you like about these sites.

---

Image: 'a crowd'
www.flickr.com/photos/48553010@N00/111126800

log on

Consider this scenario: You need to build a login so that users can leave comments on your web site.

The processes that need to be implemented would include:

• Logging in
• Creating new accounts
• Sending lost passwords
• Editing account information

How would you design this 'web application' and represent it as a flowchart?

---

Image: 'climbing'
www.flickr.com/photos/19907278@N00/6107473
by: Ard Hesselink

design or die

hi folks,
I haven't forgotten you (I've just been ignoring you all :-)

I'm a bit worried about how much emphasis I've been putting onto the nuts-and-bolts side of the web development process. For the face to face students that's fine - you've got other teachers to take you through the tools, design and documentation elements; but for the online folks, there's been a bit of a gap in your official education.

So, it's time to change all that. To kick off, lets start looking into design elements.

I just came across a pretty reasonable article where 35 designers were each asked 5 questions about their design practice. Result: 175 professional suggestions, tips and ideas from some of the best web-developers all around the world. This has got to be better than anything I can cook up. Check it out at SmashingMagazine

Another area I've been worried about is the planning and contract side of the webdev biz.

Now, I know you're all over podcasting, since I gave you a link to the excellent Ask a Ninja explanation, and... good news, Boagworld have just finished covering client contracts in nitty, real-world detail over several podcasts (starting in week 64). Check it out at the Boagworld podcast archive

Hope you're all fired up with enthusiasm, this should be an interesting few weeks...

forming up

This week we'll played with some nifty form elements. The W3C have the definitive word on forms here, or you can find a gentler introduction on Tizag.

Once you've gotten across it all, try to implement a simple form. See if you can re-create the following useful web page:




To get it looking just like this, you'll need a couple of divs, one floated to the left, or you might want to see how the pros do it on the create forms using CSS page.

Once you have the form all built, set its "action" attribute to point to http://www.bathurst-tafe.nsw.edu.au/~pshanks/dump-globals.php

Try it out with both GET and POST methods.

That should be enough to get you through the Easter break, see you all in a couple of weeks and don't eat too much chocolate.

spread your programming wings and fly

If the JavaScripting hints in the last programming post were too obscure, here's a link to an exercise with a little more meat to it - it includes all the script tag, prompt and alert messages you could possibly want to complete the first week's exercises for 'sequence'.

To follow up, we'll be looking at how to represent 'selection' in pseudocode and flowcharts. There are some paper exercises in this little document - try them out and then see if you can implement exercise 2 and 3 in JavaScript. You might find JavaScript Basics Part 2 useful. As usual, upload your solutions and add a blog entry about your trials and tribulations.

---

Original image: 'Transparent dove'
by: Vince

it's podcasting, Jimmy

all about podcasting

Programming can be fun

Just so you don't turn out like the poor ex-student shown here, I've uploaded a couple of 'ease-into-programming' worksheets.

Try out the first few:

• a Programming Overview
• an Introduction to Algorithms, and
  
• Algorithm Development

When you get to the exercises at the end of each, try to implement your designs using JavaScript. To do this you will need to know a little about setting up a script section, creating variables, getting input from the user, and writing output to the web browser.

Have fun, and please... if you find yourself waving the keyboard around and screaming, take a break and think about just how stupid the average computer really is.

---

Original image: 'Programming'
by: Jean-Philippe Daigle

what was, is and could be

today's movie is a little bit of history and some science fiction...

Set in 2014 it charts the history of the Internet, the evolving mediascape and the way news and newspapers were affected by the growth in online news. It coins the word "Googlezon" from a future merger of Google and Amazon, and speaks of the upcoming news wars with the Times, who take Googlezon to court for copyright infringement."

There's some good food for thought in this short flick. I hope you enjoy it as much as I did.

code cutting

Now is the time, the walrus said, to speak of many things...

It's time to get serious about writing code. To start we'll explore some programming concepts (sequence, selection and iteration), along with some ways that people go about planning their programs (using IPO, or input, processing and output charts; pseudocode; flow charts) - and one that no-one should ever have to use: Nassi Schneider diagrams.

For this subject (Automate processes, also known as ICAB4225A), I've started to put together a regular on-line course. You can find it on http://moodle.bluemountains.net

Create a log-in on the site, then click on the link marked Automate Processes. Once you're there, read through the scenario and then the reading for topic 1 before trying out the topic 1 exercises. Finally, have a crack at Assignment 1 and upload it via the moodle interface (at the bottom of the assignment 1 web page).

If you're having trouble, blog, email, meet in the Bathurst IT meeting room (Wednesday 1pm - 2pm) or wait on my next phone call - but whatever you do - DON'T PANIC

---

Original image: 'Flock code'
by: Will Pate

PractiCSS

Time to put our CSS skills to use...

Try CSS Challenge #3 (you might want to try 1 and 2 as well). Once you've got it right, upload to your web space and write a short blog post pointing to it.

If you haven't tried your second ftp client yet, now would be a good time to pick one from the list, install it, and take it for a spin - then post an entry on your blog comparing it to your first client. Which one (if either) will you be using from now on and why? I need this second ftp entry before we can finish off the Transfer Content subject.

---

Original image: 'Practice + Pain = Pose and Poise'
by: Pandiyan V

your in-flight entertainment today...

http://mirrors.creativecommons.org/

Got a CC license in mind for your own work?

Building with blocks

This week we're looking at how to use CSS to lay out a page. To kick off, work through this tutorial on subcide called 'Creating a CSS layout from scratch' (up to, but not including page 10, the navigation).

There are some interestnig techniques used here to ensure the divisions stay in the right places. And some not-so-interesting uses of graphics instead of text (did you spot them? What would you do differently?)

One thing I noticed was a lot of code in this tutorial that set the padding and margins for various elements to zero. If you're wondering why, there's a good article on the subject called 'No Margin For Error'

Taking the idea of stacking DIV boxes to make a page layout one step further, here's two more web pages to look at:

• layout-o-matic - which lets you plug in some variables and automagically generate some CSS
  
• Little boxes - which has a set of templates ready to download
  

Once you've explored these a little, revisit your '10 things' page and apply some CSS layout...

1. Link a CSS file to the '10 things' page
2. Create a DIV with a unique ID around your heading
3. Set the background colour, border and padding for this div to have it stand out on the page
4. create divisions for the list and your image(s) so that they display side by side on the page in a 2 column layout
5. put in a 'footer' div with copyright, navigation and validation links in it
6. Upload and post a blog entry to let me know when it's ready to view
   

CSSpectacular

After installing the HTML Validator and using to fix up your '10 things' page, I'd like you to use some Embedded CSS to smarten it up...

1. set the body background to a different colour (a light grey would be nice)
2. add margins to either side of the page (20%)
3. add margins around your ULs (15px)
4. set the font for the page to arial 12pt and make it a contrasting colour to the background
5. add a border and background colour to your OLs
6. set the colour of the hyperlinks:

• :link {color: #0000dd }
• :visited {color: #dd00dd }
• a:active {color: #ff0000 }
• a:hover {color: #0099ff }

Upload, link and blog

Web 2.0 ... The Machine is Us/ing Us

I showed a little film in class a couple of weeks ago, and it's had me thinking about what the web's becoming and our part in it as developers.



As someone who's going to build the tools that make web-based user-generated artificial(?) intelligence possible, you'll need to start thinking about some of the issues flagged:

• copyright
• authorship
• identity
• ethics
• aesthetics
• rhetorics
• governance
• privacy
• commerce
• love

I was going to start building a list of links based on these, but quickly realised that each one is a website worth by itself. And a subjective, highly personalised one at that. So I'll leave it to you to build you own meaning, and restrict myself to pointing out a few interesting directions as we muddle through the year. I expect you to return the favour... drop the odd link into your own blog so we can all share the goodness.

Here's one to start off with. Another movie; this time exploring the creative commons. So, invite around your favorite friend, make the popcorn, and settle down for 'Get Creative'

Validation and DOCTYPE

Perusing your '10 things' lists, I noticed a few problems lurking beneath otherwise good-looking HTML. Many of these could be identified and avoided by using validation - either submitting your uploaded page to the W3C Markup Validation Service or by installing the HTML Tidy firefox extension and running this in your browser. A practice I heartily recommend to you, and expect you'll take up from now on.

If you do run a validator on your pages, one of the first things you'll find is that it insists on finding a DOCTYPE.

Why specify a doctype? Because it defines which version of (X)HTML your document is actually using, and this is a critical piece of information needed by browsers or other tools processing the document. Without it, many browsers will render the page in 'Quirks mode' - usually the stupidest option, where the browser assumes you’ve written old-fashioned, invalid markup as per the late 1990s - so it's important to get this right. Here's the W3C list of recommended DOCTYPES

Now things get interesting. To start, we need to decide what sort of (X)HTML we want to use. As a legacy of the browser wars there's a swag of HTML versions to choose from (including a couple that are still being developed), but for my money, you'd be mad not to go for a version of XHTML. It may be more work to get a valid page, but in the long run you'll save on re-development time and effort. Perhaps a read through HTML Versus XHTML will help you decide (although you're going to need some more research before you settle on a particular version).

So what will you be using for your pages? Have look through the links above and search for some more material on the web. Then try adding some DOCTYPEs and validating a few of your pages - and share the pain in a blog entry. In your entry I'll be looking for links to the resources you've read through; a definitive statement about your preferred markup version and type (strict or transitional), and a short sentence on why you feel this is the best one for you and your visitors.

setting the table

In the dim dark past (all of 3 years ago now), tables were used extensively for laying out web pages. But that's all in the past now. Repeat after me: "tables are only for displaying tabular data".

Very good, now we've got that straight, have a go at the table tutorial on Web Design from Scratch, which covers the subject in plenty of detail. Once you've finished, try out the Tables for tabular data HTML challenge.

---

Image: 'LED Dining table'

a todo list for life...

It's time we put some of our new found knowledge into practice with a quick exercise...

I'd like you to create a web page (complete with doctype, title and a heading) which lists 10 things you want do do before you die. They can range from the trivial to serious; but display them as a numbered list.

Once you've built your list, make at least one item into a nested list of the steps you'd need to take to accomplish that goal. For example:

1. have my cake and eat it too
   
   1. get a cake
   2. hide from family and friends
   3. scoff cake like there's no tomorrow
2. Goal two
3. Goal three etc.

Add some hyperlinks from your items and/or steps to resources on the web that could help you accomplish your goal (in the example above this might be something like: get a cake)

Include some images on the page that are relevant to your project (perhaps using something like flickrCC)

For bonus points you might want to try adding CSS to:

• colour your heading and list elements' text and background
• add a margin to your image(s) and/or list elements
  
• add rollover effects to your hyperlinks
• add a drop shadow to your image(s)
• format your lists
• position elements on the page
  

Once you've finished, upload the lot to your web space and link to it from your home page and your blog.

---

Original image: 'IMG_7477'
by: tookie

firefoxin'

Here's a little shopping list for you firefox using web developers out there ...

• Web Developer - a whole bunch of development tools in one handy package - the ability to live edit CSS and HTML alone is worth the price of the download.
  
• Firebug - lets you ‘edit, debug, and monitor CSS, HTML, and JavaScript live in any web page’ - white man's magic at its best
  
• HTML Validator - On the fly validation for W3C standards (this function is included in the web developer add on, but I have a soft spot for the original).
  
• JSView - makes peeking into external javascript and CSS files into a simple mouse click activity.
• View Source Chart - Creates a Colorful Chart of a Webpage's Rendered Source Code, which is pretty handy when you're just learning the ins and outs of tables, divs and the like.
• Execute JS - lets you type in and debug JavaScript code on the fly. This will come in handy when we're studying client side scripting.
  
• Live HTTP Headers - allows you to view HTTP headers of a page while browsing. This will come in handy when we're developing forms

---

Original Image: 'Firefox in the Hen House'

a picture's worth 1024 words

Our brains are wired to react to the things we see - as opposed to that what we read. As you will probably notice in this little experiment...

Tigers (Panthera tigris) are mammals of the Felidae family and one of four "big cats" in the Panthera genus. They are apex predators and the largest feline species in the world, comparable in size to the biggest fossil felids. The Royal Bengal Tiger is the most common subspecies of tiger, constituting approximately 80% of the entire tiger population, and is found in the Indian subcontinent. An endangered species, the majority of the world's tigers now live in captivity

What did you see first? The picture or the text? What left a lasting impression? I'm betting it was the picture that grabbed your attention, and that no matter how much information I put into the description, you'd have a much better idea of what a tiger's all about from that little 9k picture.

So how do we go about tapping into all that pictorial goodness? By using the IMG tag, mais oui!

Try this gentle introduction to the subject on HTMLdog. For a more in-depth exploration, see w3schools - including the various examples at the bottom of the page (but don't worry too much about the image maps just yet, we'll cover these in a seperate post).

After you finish reading the words - plug some images into a page of your own: find a copyright free image on flickr using flickrCC. Download the pic into an images directory and then write up a page that includes the image on the left hand side, along with a heading and some descriptive text (perhaps from wikipedia) which appears to the right and wraps around the picture. For bonus marks:

• have the picture link to the original image on flickr
• prevent the blue/purple border from appearing around the hyperlink
  
• add a 15 pixel margin around the picture using CSS
• add a drop shadow to the image using CSS (this is distinction level stuff)
• add the correct attribution to your image and text
  

Save as images.html and link to your new page from your index page - upload the lot (don't forget the images directory and its contents) and then sit back and enjoy the view.

---

Image: 'Tiger'
Wikipedia article: 'Tiger'

linking up

A web page on its own is a lonely thing. Fortunately we can link it up with friends using the ultra-hip hyperlink (known to its friends as the anchor tag).

This Tizag article is a good introduction, but it doesn't discuss the depricated attributes (these are the bits that are no longer supported - usually because CSS does a better job). I'd recommend a follow up reading in the XHTML tutorial which covers these aspects.

Once you've read through these, have a bash at the hyperlink challenges I've set up for you on the wikiversity - if you've done the lists.html page, use this as your target for local links, and add a link on the lists page back to your links.html page so you can navigate backwards and forwards between them. Upload the lists.html and links.html pages to your web site and drop me a line so I can have a look at how you're getting on.

---

Image: 'ORLY?'

making a list and checking it twice

Today's post is being brought to you by the HTML tags: UL, OL and DL...

Lists are a handy styling element for presenting data in bite sized pieces. HTML gives you three basic flavours: the unordered list; the ordered list; and the definition list. Find out how each of these is works in this List Tutorial

Once you've mastered the syntax, flex your list building muscles with the Lists, lists and more lists HTML challenges. Save the exercises as a web page called lists.html and nestedlists.html - we'll be using them later to practicing linking.

Want to see something really cool? Listamatic takes a plain unordered list and CSSs the snot out of it - it's got to be seen to be believed.

---

Image: 'New holiday: No Internet Thursday'

Moovin and a groovin

Time to upload a file.

First up, we'll need to understand what file transfer is all about - the wikipedia article's a good spot to find out.

Next, we'll need an ftp client to play with. Peruse the list on wikipedia, or search google and select one that will fit your pocket and operating system.

Install your client of choice and connect to the bathurst tafe web server using the login details provided (if you've lost them, or not received them yet, give me a call and I'll see what I can cook up). Once you're logged in, upload the index.html file you created earlier and see if you can bring it up in a web browser: http://www.bathurst-tafe.nsw.edu.au/~yourname

Got troubles?

• make sure you're using Active rather than Passive transfers in your ftp client
  
• double check the user name and password
• remember, if you're in the computer lab, our ip address is different from the bathurst-tafe.nsw.edu.au address
• the web server can only see the public_html folder
  
• you may need to change the permissions on the file so that others can read it

Once you finish this challenge, go to (or create) your blog and write a short post on the experience. Make shure you mention:

• The name of your ftp client
• The URL you got it from
• any installation woes you encountered
• some comments on its ease of use
• $
• the platform(s) it works on
• the install file size

and any other interesting bits of information you came across

Create a basic document

Time to catch up with a few things...

For a path through the HTML/CSS maze, you could do worse than to try the following exercises and tutorials:

• An introduction to using CSS styles
  
• Adding html headings
• Using CSS for custom heading tags
• Add a bit of text
  

Once you get your head around this, create a new web page about yourself: index.html using the tricks you've just learnt.

Welcome to a new year of web development

For those of you just starting, a warm welcome to the 2007 web development course. And welcome back to those of you who are continuing their learning journey.

I haven't been idle over the break. Together with a teacher at Blue Mountains TAFE I've been helping to build some web development resources on the wikiversity. We've outlined the course onthe Cert IV Websites Qualification in Australia and will be building this into a complete course over the coming months. If you're just starting out, the page for ICAB4135A, Create a simple mark-up language document to specification could prove useful.

If you're just beginning, a visit to Tizag for some practice with their beginner tutorial might help. For those a little more comfortable with HTML, we'll be working through the Tizag HTML lessons over the next few weeks; with an emphasis on using CSS in place of attributes to change the look of our HTML.

If you're already using HTML try out some of the HTML challenges we've put together.

I'll be dropping by here regularly with more suggestions about picking a path through the study material, and talking to you all each week, but don't be shy about getting in contact - call me on 6338 2448 or email peter.shanks at tafensw.edu.au - another interesting option for you might be to start your own blog here on blogspot. Use it to keep a learning journal - jotting down notes, observations and questions after each study session. If you do, drop me a line with the url and I'll add it to the blogroll here.

All the best with your studies, this should be a fun year I think.

---

Image: 'Footprints'
by: Joshua Davis