Cert IV web

like falling off a log

2008-10-27T13:59:00.000+11:00

An assignment for the subject: Monitor traffic and compile website traffic reports.

Write a few pages outlining which reports you would recommend from a web log analysis program for the following 3 groups: web owner, system admin & web developer.

Include some screenshots of each report and some information on how often they should be accessed; what information they are showing and why it is important to the viewer; and what problems might be indicated by the report (along with some ideas about how to solve them if they do come up)

Also include some analysis of a web site - particularly what times are the busiest and the slowest and when it might be best to schedule updates to the site.

Image: 'Log Texture'
http://www.flickr.com/photos/82518118@N00/2313754224

more validation

2008-09-15T17:49:00.000+10:00

I was thinking of u all fondly today and thought you deserve a little present:

fValidator is an open source (free) unobtrusive javascript tool for easy handling form validation. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It also displays error messages right where you want them - just the ticket for your form validation needs.

Image: 'My plane ticket'
http://www.flickr.com/photos/44124300615@N01/2432095214

absent note

2008-09-14T15:32:00.001+10:00

first up, please accept my apologies for being absent today. I did a pretty stupid thing on Saturday and need to lie around feeling remorseful for a bit (the pic here isn't my bike, but it's a pretty close approximation - I lost a little skin, sprained a few joints, cracked a rib, may have broken my thumb... and got off pretty lightly, all things considered).

On the Javascript front, I believe we just finished looking at form validation. To practice a bit I'd like you to create a contact form which prompts for a name, phone number, email address and comment - checking validity for each before submitting. For bonus points add an age field and check for a valid age (say between 5 and 105). Errors or omissions should be flagged by revealing an error message beside the relevant field using CSS and DOM magic.

Finished? Read through and try out some more advanced DOMination

CU soon, Peter

Image: 'Picture073_11Sep04'
http://www.flickr.com/photos/89689539@N00/373976620

loopy

2008-08-27T13:16:00.000+10:00

This week saw us trying out some JavaScript looping

Read through a little intro and try out the exercises I've uploaded here:

http://bathurst-tafe.nsw.edu.au/~pshanks/javascript/loops-exercises/

Image: 'loopy'
http://www.flickr.com/photos/86176561@N00/273326027

making choices

2008-08-11T09:38:00.000+10:00

Inclement whether prevents my attendance in person, but I'm with you in (e)spirit.

Today we're looking at conditional statements in JavaScript (if/then/else). These are described in the handout, page 14. Unfortunately that's not quite the whole story - you really need to know a bit about multiple if statements (and their clever cousin, the switch statement). See the web cheat sheet for a fine explanation/demonstration.

If you're keen to become a real JavaScript geek you might also want to know about the 'conditional operator' described about half way down this page by the Washington center for environmental visualisation(?).

Fully read up?

Try these interesting exercises (in groups, or as a hard old loner)...

Open http://bathurst-tafe.nsw.edu.au/~pshanksjavascript/conditionals-exercises/conditionals1.html in your favourite editor.
In this exercise, you'll write a function called guessAge() that, oddly enough, lets the user guess your age. The user's guess is in document.ageForm.ageGuess.value. The guessAge() function should pop up an alert box telling the user whether or not s/he guessed correctly.
Open http://bathurst-tafe.nsw.edu.au/~pshanksjavascript/conditionals-exercises/conditionals2.html in your favourite editor. You can copy your completed conditionals1.html to conditionals2.html if you'd like to edit your existing work rather than starting from scratch.
In this exercise, you'll modify your age guesser from exercise #1 to provide some additional feedback to the user. The guessAge() function's alert box should let the user know if s/he guessed correctly, if you're younger than the guess, or if you're older than the guess.
Open http://bathurst-tafe.nsw.edu.au/~pshanksjavascript/conditionals-exercises/conditionals3.html in your favourite editor.
Everyone knows that flowers need water to grow. This HTML page has a watering can and a flower. This particular flower needs to be watered three times before it can grow. When the user clicks on the watering can, it should change to the image shower.jpg. After one second, the watering can should stop watering the flower. (We provide this code for you; read the comments in the program carefully.) The third time the user waters the flower, the flower should bloom. (There's an image of a bloomed flower in flower.jpg.)

Image: '"It is our choices. . . that+show+what+we+are,++far+more+than+our+abilities."'
www.flickr.com/photos/12596956@N06/2699207704

JavaSkipped

2008-08-10T09:16:00.001+10:00

suddenly realised that I've been very remiss about posting relevant JavaScript links here. Time to make amends.

First up, we've been working from a document I found on the interweb: a JavaScript tutorial. Thanks to the wonders of modern science this plain web page is now available as an open office document (37k) or a microsoft word doc (180k).

So far we've worked through the following sections:
1. Introduction

2. Embedding JavaScript into your HTML document

3. Variables

3.1. What are Variables?

3.2. Values of Variables

3.3. Data Type Conversion

4. Literals

4.1. Integers

4.2. Floating-point literals

4.3. Boolean literals

4.4. String literals

4.5. Escaping characters

5. Arrays

6. Operators

6.1. Selected assignment operators

6.2. Comparison operators

6.3. Selected Arithmetic Operators

6.4. Logical Operators

7. Using JavaScript Objects

8. Functions

8.1. Defining a Function

8.2. Calling a Function

We also applied ourselves to the following exercises:

Variables: open document (33k), word (101k); and functions (grab the contents of http://bathurst-tafe.nsw.edu.au/~pshanks/javascript/function-exercises/ and fix the html pages: functions1.html through functions6.html).

Image: 'Zion and Tracy jumping'
www.flickr.com/photos/81859405@N00/260323975

SQL has a new home

2008-07-30T16:59:00.000+10:00

to celebrate our combined CertIV SQL class I've created a new blog just for our database subject. You can see it and read all about our subject on:

http://certivsql.blogspot.com/

SQL like a stuck pig

2008-07-23T15:32:00.000+10:00

Yahoo. Back for a new season of coding!

This semester we're going to spend a fiar slab of time learning structured query language (SQL to its friends).

To get into this we need to install a local web server, database server and database manager. Luckily someone has already put a package together for us to download and install. Xampp (38 MB from Apache friends) has everything an aspiring SQL guru could want.

After downloading and installing start the xampp control panel (it will be something like: C:\xampp\xampp-control.exe) and start up apache and mySQL by clicking on the start button for each.

Now open your web browser and test the installation by entering http://localhost into the address bar. You should be seeing something like this (you may need to click on the 'English' link first)...

click on the phpMyAdmin link in the tools section of the left hand menu to start up our database manager.

Before we can start entering SQL statements we need to create a new database to work with.

In this screenshot I'm about to create a new database called fred (you can click on the image for a larger version).

Now that we have a database we need a couple of tables and some data to play with. I've put together a little file to make this as panless as possible. Download ICAU4205A.sql and save it on your computer.

Once you've got it, click on the 'Import' tab at the top of the phpMyAdmin screen, browse to the file and click on the 'Go' button on the bottom right of the screen.

phpMyAdmin should do its magic and report back that "Import has been successfully finished, 16 queries executed." You should also see 5 new tables listed in the left hand column.

Time to get down to business.

For the next couple of weeks we're going to work through James Hoffman's Introduction to SQL

This week, everything up to the section on joins. Click on the 'SQL' tab at the top of the phpMyAdmin page and type in each of the examples in the document. Play a bit, have fun, and tune in here next week for another exciting installment...

Image: 'OINK! OINK!'
http://www.flickr.com/photos/49968232@N00/51679641

Debugging challenge

2008-06-23T13:33:00.001+10:00

Spot the fault...

Assessment for the subject: Locating equipment, system and software faults will consist of a document listing various JavaScript faults, how they present themselves, what caused the error and how to fix it.

Run through this list of debugging challenges and choose 2 or 3 from each section: Lexical Errors; Syntactic Errors; Execution Errors; Logic Errors. Write up a short description of the problem (how it presented itself), what you found and how you fixed it. Screenshots would be handy.

Original image: 'Fixed' http://www.flickr.com/photos/27384730@N00/109566859
by: Mike Fernwood

fine tuning

2008-06-10T06:18:00.000+10:00

We finished automating processes last week, looking at breaking down larger programs into sub-routines and procuedures. Next week we'll put the final nail in with a short quiz.

We followed that up with a look at functions and objects in JavaScript (which wasn't all that interesting), and revisited variables and data types (which was more relevant, if no more gripping)

We finished up with another look at locating equipment, system and software faults specifically, task 2: obtaining fault finding tools. To be honest, I'm not all that happy with these course notes (the readings are fine, but the activities seem too nebulous) - so I'm going to revert back to my original plan for this subject - concentrating mostly on debugging code, with a passing nod at equipment and some discussion of systems.

So, for task 2 I'd prefer that people investigated options for debugging JavaScript - either in the browser or using a stand-alone solution. Write up a blog post that discusses the options available for your platform of choice. Don't forget to include a description of that platform - versions and types of operating system and browser (if applicable).

The report should be about 500 words in length and should be ready for comment by next week.

Speaking of next week - we're going to make a start on 'Run standard diagnostic tests'. I had planned on testing web site performance, but have been told that the Cert III I.T. class will be attending the class too - and they've got no prior experience with web technologies, so we might need to take a different approach. Given that we've only got two weeks to cover the subject this will be a busy lesson - so don't be late :-)

Image: 'scroll & peg'
www.flickr.com/photos/46534015@N00/1899595427

looping

2008-06-02T06:21:00.001+10:00

Last week saw us spiraling out of control... exploring loops.

Try these revision questions, and a new, improved cloze test on while loops.

We also learned how to use JavaScript to validate a form on a web page, looking at form fields and loops in the process!

Finally, we started on the first task for Locate equipment, system and software faults... Identifying appropriate information gathering techniques

Image: 'Vatican Museum Spiral Stairs'
www.flickr.com/photos/57954193@N00/202549889

thinking back on it

2008-05-25T08:55:00.000+10:00

revising last week's programming lessons...

a short quiz on selection

a cloze test on conditional statements

questions about definitions and data types

fill in the blanks on data types

Image: 'thinking'
www.flickr.com/photos/83476873@N00/110993877

good news

2008-05-21T11:47:00.001+10:00

... also: for those of you keen to start on the module 'Locate equipment, system and software faults' I've uploaded some material for you to play with. See http://bathurst-tafe.nsw.edu.au/~pshanks/ICAT4221A/index.htm (or http://192.168.201.2/~pshanks/ICAT4221A/index.htm if you're trapped inside the firewall)

Image: 'untitled'
www.flickr.com/photos/88997175@N00/104197534

need... more... oxygen...

2008-05-19T21:18:00.001+10:00

Today's epic journey started in the plains of if-then-else before ascending the foothills of datatypes. It finished with an attempt on the icy peaks of JavaScript selections. This was a tough climb, but what a view there is from the top!

Believe it or not, this is as high as we're going to ascend. Next week we'll stay at this altitude for a short while, exploring the whacky world of loops before descending back to sea level.

Image: 'Peak of Snæfellsjökull in clouds'
www.flickr.com/photos/25147065@N00/506183053

exercise

2008-05-12T16:06:00.004+10:00

Some calisthenics for your brain...

1. Cut and paste the JavaScript code from the 'she's apples' entry below and then format it so each block of code is correctly indented.
2. Try out the Cloze test for IPO Models
3. Attempt the 'Develop an algorithm' quiz
4. Click randomly on terms and definitions in the JavaScript cloze test

Image: 'My name is Charles Atlas'
www.flickr.com/photos/37912374286@N01/98379123

she's apples

2008-05-12T15:54:00.000+10:00

Today we looked at developing algorithms.

This was followed by a quick look at JavaScript in JavaScript Basics, Part 1.

Extending the lesson a little we came up with the following super-apple-eating algorithm...

<script type="text/javascript">
var apples = 5;
alert('there are currently ' apples ' apples');
var eat = prompt('How many apples would you like to eat?', '1');
if (parseInt(eat))
{
if (parseInt(eat)>apples)
{
alert("don't be greedy!");
} else {
apples -= parseInt(eat);
if (apples > 0)
{
if (apples == 1)
{
alert('There is only one apple left!');
} else {
alert('Now there are only ' apples ' apples!');
}
} else {
alert('no more apples for you!');
}
}
} else {
alert('there are still ' apples ' apples');
}

</script>

Image: 'Granny Smith'
www.flickr.com/photos/90581837@N00/78379799

making a splash - refreshing your knowledge

2008-05-11T19:38:00.001+10:00

Time to reinforce those little lessons we learned last week. Try out these questions on trainingo2.net, and then take a few minutes to pit your wits on the cloze test for pseudocode.

Image: 'Grapefruit Splash'
www.flickr.com/photos/11419506@N08/2272752165

today's exciting installment

2008-05-05T16:04:00.000+10:00

This week we continued our exploration of the programming landscape.

After a quick bash at a cloze test on syntax, we created and worked through a new page on algorithms (including the creation of our first bit of javascript).

Wasn't that all fun? \*(^_^)*/

Image: '2008-03-04 (Field Guide to GP photos) - 05'
www.flickr.com/photos/68457656@N00/2322867309

pop quiz

2008-05-04T06:45:00.000+10:00

To recap what we covered last week in our first automate processes lesson, jump on over to trainingo2.net and try out this quick quiz

Image: 'Jellypops'
www.flickr.com/photos/99136715@N00/51613644

buried treasure

2008-05-01T10:13:00.000+10:00

I know you're all very busy, but if you get some time you should check out the resources on Smashing Magazine's Best Of April 2008 page - some of this stuff is gold.

Image: 'buried treasure'
www.flickr.com/photos/35468137797@N01/64228609

intro to programming

2008-04-29T16:33:00.000+10:00

Hope you all had a good break - I certainly did. It was totally unsullied by any menial tasks like marking web development assignments - but don't panic, I'll have some nasty comments for you by next week... I promise :-)

This week we're launching into programming proper, working through Robyn's excellent notes and converting them to web pages, which should give us plenty of html and css practice along the way. So, create a week1a page with some extra scripting and compiled languages on the relevant table, also create a home page linking to your week1a page and upload both new pages to your web space on the bathurst-tafe sever.

Images can be created from screen captures (hoversnap might be handy for this) or you can find creative commons licensed images via flickrcc (don't forget to add the attributions at the bottom of your web page)

Image: 'the only flow-chart you will ever need'
www.flickr.com/photos/55847834@N00/1229271594

taking shortcuts

2008-04-07T09:19:00.001+10:00

Today we're looking at a CSS template: blueprint
and an online grid editor for the same.

validation

2008-04-01T11:17:00.000+11:00

^ This is what you want to see. To test a page that's been uploaded to the server you can use the validation options on the firefox web developer toolbar (found under 'tools').

You can also go straight to the W3C validation page. Note the tabs on the page which allow you to enter a URL, upload a file or cut and paste code.

Finally, if you enjoyed yesterday's PMOG mission, there's another one on validation that you could take.

At the end of the day I'd like you to validate one or more pages on your Bathurst TAFE web site and include the little validation link that the W3C give out when you pass their test.

Image mapping

2008-03-30T17:19:00.000+11:00

Today we're giving PMOG a bash, with a little image map mission that I've put together for your learning pleasure. You'll need a login (send me an email if you need an invitation - I think they're out of beta now, but I could be wrong). You'll also need a firefox addon (there's a link on the PMOG site). Have fun.

happy easter

2008-03-23T21:18:00.000+11:00

I know you'll all miss our weekly get together - the same way I know you probably wouldn't do any exercises that I post here. So here's a compromise... an excellent CSS cheat sheet. Print it out, memorise it and then eat it so that it can't fall into enemy hands.

tables and backgrounds

2008-03-17T11:02:00.005+11:00

Today we worked through the backgrounds tutorial on tizag

If you want to experiement there's a background image library on http://www.grsites.com/textures/

We finished up with some work on creating tables, followed by a table exercise on the wikiversity.

If you're feeling chirpy, try the harder advanced table exercise

Image: 'buena vista'
www.flickr.com/photos/70825417@N00/358756373

CSS for layout

2008-03-10T09:15:00.004+11:00

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 interesting 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 so that there's a column on the left of the content. Put an unordered list of links to each detail page in this column. For bonus playing time, decorate your left hand column list using some CSS from the listamatic.

At the end of the day you should have some html that looks like:

<html>
<head>
<title>title</title>
<link rel="stylesheet"
type="text/css"
href="css/default.css" />
</head>
<body>
<div class="breadcrumbs">
<a href="index.html">Home</a> .
</div>
<div class="title">
<h1>Title</h1>
</div>

<div class="sidebar">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="thing1.html">Thing 1</a>
</li>
<li>
<a href="thing2.html">Thing 2</a>
</li>
<li>
<a href="thing3.html">Thing 3</a>
</li>
<li>
<a href="thing4.html">Thing 4</a>
</li>
<li>
<a href="thing5.html">Thing 5</a>
</li>
<li>
<a href="thing6.html">Thing 6</a>
</li>
<li>
<a href="thing7.html">Thing 7</a>
</li>
<li>
<a href="thing8.html">Thing 8</a>
</li>
<li>
<a href="thing9.html">Thing 9</a>
</li>
<li>
<a href="thing10.html">Thing 10</a>
</li>
</ul>
</div>
<div class="content">
<div class="pic">
<img src="xxx.gif" alt="a picture" height="200px" width="150px" />
</div>
<div class="wikiquote">
<p>some text from the wikipedia</p>
</div>
<div class="backgroundinfo">
<p>why this item made my list</p>
</div>
<div class="credits">
<p>Flickr Image: <a href="#">pic name</a></p>
<p>Wikipedia Article: <a href="#">wiki article title</a></p>
</div>
</div>
<div class="footer">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="thing1.html">Thing 1</a>
</li>
<li>
<a href="thing2.html">Thing 2</a>
</li>
<li>
<a href="thing3.html">Thing 3</a>
</li>
<li>
<a href="thing4.html">Thing 4</a>
</li>
<li>
<a href="thing5.html">Thing 5</a>
</li>
<li>
<a href="thing6.html">Thing 6</a>
</li>
<li>
<a href="thing7.html">Thing 7</a>
</li>
<li>
<a href="thing8.html">Thing 8</a>
</li>
<li>
<a href="thing9.html">Thing 9</a>
</li>
<li>
<a href="thing10.html">Thing 10</a>
</li>
</ul>
</div>
</body>
</html>

and some CSS that includes:

.content {
margin-left: 150px;
}
.sidebar {
float: left;
}

godzilla vs. filezilla

2008-03-03T16:58:00.000+11:00

Today we looked at installing and setting up our own ftp client - filezilla (the client not the server). For the full scoop on ftp, including the all important difference between active and passive modes, check out this little wikipedia entry.

Now, I need you to write a blog post on your ftp experiences so far. If you haven't tried your second ftp client yet, 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 (core ftp-lite).

In the blog post tell me which one (if either) will you be using from now on and why. Some other things you might mention include:

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. cu next week. bbb

Image: 'Houston, we have a problem.'
www.flickr.com/photos/76074333@N00/301015327

more on lists and CSS

2008-03-03T16:17:00.000+11:00

We re-visited our template today, looking at how we could apply CSS to the blocks on the page in more detail.

A couple of the areas we covered were:

playing with the padding, margin and border settings for each div
viewing the page in both firefox and internet explorer and trying to minimise the differences between them
using the margin-top, float and clear selectors to position various elements
creating some nifty effects by combining lists and CSS in imaginative ways

Here's how the html template looked like when we'd finished with it:

<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
</head>
<body>
<div class="breadcrumbs">
<a href="index.html">Home</a> .
</div>
<div class="title">
<h1>Title</h1>
</div>
<div class="pic">
<img src="xxx.gif" alt="a picture" height="200px" width="150px" />
</div>
<div class="wikiquote">
<p>some text from the wikipedia</p>
</div>
<div class="backgroundinfo">
<p>why this item made my list</p>
</div>
<div class="credits">
<p>Flickr Image: <a href="#">pic name</a></p>
<p>Wikipedia Article: <a href="#">wiki article title</a></p>
</div>
<div class="footer">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="thing1.html">Thing 1</a></li>
<li><a href="thing2.html">Thing 2</a></li>
<li><a href="thing3.html">Thing 3</a></li>
<li><a href="thing4.html">Thing 4</a></li>
<li><a href="thing5.html">Thing 5</a></li>
<li><a href="thing6.html">Thing 6</a></li>
<li><a href="thing7.html">Thing 7</a></li>
<li><a href="thing8.html">Thing 8</a></li>
<li><a href="thing9.html">Thing 9</a></li>
<li><a href="thing10.html">Thing 10</a></li>
</ul>
</div>
</body>
</html>

and here's the final CSS:

.backgroundinfo {
background-color: pink;
text-align: center;
margin-left: 20%;
margin-right: 20%;
border: 2px;
border-style: dotted;
border-color: purple;
}
.breadcrumbs {
background-color: red;
padding: 5px;
border: 0px;
border-color: blue;
border-style: dashed;
margin: 5px;
float: left;
width: 10em;
}
.breadcrumbs a:link {
text-decoration: none;
color: yellow;
}
.breadcrumbs a:visited {
text-decoration: none;
color: yellow;
}
.breadcrumbs a:hover {
text-decoration: underline;
color: blue;
}
.credits {
background-color: #eeeeee;
padding: 5px;
border: 1px;
border-color: blue;
border-style: dashed;
margin: 5px;
float: right;
width: 25%;
margin-top: -45px;
font-family: sans-serif;
font-size: x-small;
}
.footer {
clear:both;
}
.footer a:link {
color: white;
text-decoration: none;
padding: 3px;
}
.footer a:visited {
color: white;
text-decoration: none;
padding: 3px;
}
.footer a:hover {
background-color: skyblue;
color: navy;
text-decoration: none;
padding: 3px;
}
.footer li {
display: inline;
padding-right: 7px;
list-style-type: none;
}
.footer ul {
background-color: navy;
color: white;
padding-left: 0;
margin-left: 0;
font-family: sans-serif;
font-size: xx-small;
}

.title {
background: gray;
clear:both;
text-align:center;
margin-top:1px;
}
.pic {
background: skyblue;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
}
.pic img {
border: 5px;
border-style: ridge;
}
.wikiquote {
background-color: purple;
text-align: center;
font-style: italic;
margin-left: 20%;
margin-right: 20%;
margin-top: -20px;
border: 5px;
border-style: double;
border-color: orange;
}

body {
margin: 0px;
}

Image: 'consume now3'
www.flickr.com/photos/17949364@N00/202924682

making a list and checking it twice

2008-02-25T16:09:00.000+11:00

whew, what a wild ride we had this week.

We started out by creating a new page titled "Ten things I want to do before I die" - saving it as an index.html file in a new directory called tenthings. On this page we created an ordered list of... 10 things we wanted to do before shuffling off this mortal coil.

Then we spent a little time designing a topology map of a site we could build around this page; 10 more pages with details of each of our ten things, links to each of these pages from our index, links from each detail page to the index page and to the next and previous items in the list.

Next we looked at designing the layout for a typical detail page. Paragon of page design that I am I came up with the following jewel...

What followed was a whirlwind of activity...

Locating and saving an image (into an images directory) from flickrCC
Inserting said image on the page (including setting the alt, height and width attributes)
Making the image into a clickable link back to the original page on flickr
Using CSS to remove the unsightly blue border using an embedded or internal style tag in our document's head section
Creating a CSS div and adding a class name of "quoteblock" for a wikpedia quote about our goal.
Putting an H2 and blockquote into that div and cutting and pasting some wikipedia text there.
Setting the border, padding, background-color and font-style for our quoteblock class
Giving the other blocks on the page a similar treatment
Removing the CSS and putting it into an external style sheet so we can use it in the other 9 detail pages too.

Image: 'Dead Can9t Dance'
www.flickr.com/photos/19487674@N00/407283421

Head first into web development

2008-02-18T11:32:00.002+11:00

For this subject (and our CSS module) we'll be using the excellent text: Head First HTML with CSS and XHTML. It's not compulsory that you buy a copy ('though it wouldn't hurt), but you will need to visit their web site and download the example files.

Image: 'Freefall'
www.flickr.com/photos/17088109@N00/1157425229

Welcome

2008-02-09T17:31:00.000+11:00

Hello and welcome to the Bathurst web class for 2008. This will be a great year I think.

So that we can keep in contact, I'll be posting lesson notes here on the cert IV weblog which might be worth bookmarking (perhaps in a del.icio.us account).

During the course I'll be asking you to post material on-line; reflections, interesting finds and assignment answers (for a great example from last year's class, check out Sharlene's blog) If you don't already have one, I'd like you to create a blog of your own. Blogger is a good free offering, but there are many others.

Once you have a blog set up, bookmark it, write an introduction about yourself and what you hope to get from this course and then come back here and leave me a comment with the web address of your space (copy and paste from the browser's address bar) - when I get the URL I'll add it to the hall of fame on the right :).

Another tool we'll be using a lot this year is the Training O2 website. Create an account there and then search for htmldog. Visit the link that comes up for the html beginner tutorial and work through the first four lessons: getting started; tags, attributes and elements; page titles; paragraphs and headings. After you've worn yourself out go back to the detail page for htmldog on the training o2 site and leave a comment on what you thought of the tutorials. For bonus marks see if you can figure out how to vote for the htmldog web site.

Whew, that's probably just about a brainfull for the first day, but if you want to do more, post another entry on your blog about your impressions of the web course so far - I'd love to hear what you think.

Image: 'Entry into the Celaphopad'
www.flickr.com/photos/35034345972@N01/340449446

Monitoring traffic and compiling website traffic reports

2007-10-29T15:13:00.000+11:00

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

2007-10-22T07:07:00.000+10:00

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

2007-08-27T11:21:00.000+10:00

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:

all orders (show customer name and product name only)
all customers (and what they've purchased, if anything)
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

2007-08-10T14:42:00.000+10:00

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

Restrict the number of rows retrieved by placing criteria in the 'where' clause
Restrict the number of rows retrieved by placing specific criteria in the select statement
Use comparison operators in the 'where' clause to compare numeric, character, string, date and time data
Use Boolean operators with the correct precedence
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
Use SQL syntax to suppress duplicate values from query results
Take action to exclude null values from a query result

Write SQL statements that use functions

Use arithmetical operators with the correct precedence
Use string functions and operators to obtain the required query output
Use mathematical functions to obtain the required output, where required
Use date functions to obtain the required output
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

2007-07-30T08:29:00.000+10:00

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.

Create a customers table with an auto-incremented custno field, an indexed custname field and a single address field.
Write the SQL code that would insert 'J. Smith' into the custname field and 'Leeds' into the address field.
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

2007-07-23T13:08:00.000+10:00

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:

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
Who's trying to connect and the password (to keep out casual snoopers)
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

2007-07-20T14:29:00.000+10:00

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

2007-06-04T08:35:00.000+10:00

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

2007-06-02T14:05:00.000+10:00

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

2007-05-21T16:56:00.000+10:00

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: 5^th 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

2007-05-21T16:34:00.000+10:00

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

2007-05-16T15:44:00.000+10:00

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

2007-05-09T16:21:00.000+10:00

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

2007-05-09T16:09:00.000+10:00

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

2007-05-09T15:57:00.000+10:00

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

2007-05-02T16:59:00.000+10:00

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

2007-05-02T16:31:00.000+10:00

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

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

2007-05-02T15:02:00.000+10:00

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:

Order (X4)
Increase (scale) (X4)
Bold (X4)
Congested (X4)
Tension (X4)
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

2007-04-30T13:14:00.000+10:00

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

2007-04-21T12:43:00.000+10:00

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

2007-04-04T15:50:00.000+10:00

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

2007-04-04T15:21:00.000+10:00

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

2007-04-04T15:13:00.000+10:00

all about podcasting

Programming can be fun

2007-04-01T22:22:00.000+10:00

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:

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

2007-03-24T08:09:00.000+11:00

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

2007-03-21T12:06:00.000+11:00

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

2007-03-21T11:52:00.000+11:00

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...

2007-03-13T10:34:00.000+11:00

http://mirrors.creativecommons.org/

Got a CC license in mind for your own work?

Building with blocks

2007-03-13T09:54:00.000+11:00

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...

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

CSSpectacular

2007-03-05T15:19:00.000+11:00

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...

set the body background to a different colour (a light grey would be nice)
add margins to either side of the page (20%)
add margins around your ULs (15px)
set the font for the page to arial 12pt and make it a contrasting colour to the background
add a border and background colour to your OLs
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

2007-03-03T14:56:00.000+11:00

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

2007-02-28T15:02:00.000+11:00

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

2007-02-28T12:48:00.000+11:00

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...

2007-02-26T09:23:00.000+11:00

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:

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
Goal two
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'

2007-02-23T19:39:00.000+11:00

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

2007-02-21T12:40:00.000+11:00

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

2007-02-21T11:34:00.000+11:00

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

2007-02-21T11:23:00.000+11:00

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

2007-02-19T16:45:00.000+11:00

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

2007-02-19T16:22:00.000+11:00

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:

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

2007-02-13T09:58:00.000+11:00

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

a quick note on .htaccess

2006-11-28T14:21:00.000+11:00

here’s a little about using .htaccess to protect your phpMyAdmin directory

It protects a directory through 2 files; .htaccess and .htpasswd – you can read all about it on this Comprehensive guide to .htaccess

There’s an online tool you can use to create these files at the .htaccess Generator

Enter your user name and your current password (this is not compulsory, but convenient), and /srv/www/[yourusername]/public_html/phpMyAdmin/ as the path. (note, no tilde in the user name). Then Copy the information returned by the online tool and save the first file as '.htaccess' and the second file as '.htpasswd'. Upload them (as ASCII) to your public_html/phpMyAdmin/ directory and viola, it will be password protected.

JavaScript and the DOM

2006-09-25T08:43:00.000+10:00

Sorry folks, I’ve twisted my ankle and I’m not going to be able to make it in today. I know you’ll all miss me, but to dull the pain of separation, here’s a couple of tutorials to be going on with:

Javascript Basics Part 6 (internal link)

talking about the Document Object Model or DOM for short.

and…

Javascript Basics Part 7 (internal link)

examining the document object and the window object, both of which offer many useful functions.

When you’ve finished these you might like to try applying them to the Greening Bathurst form, so that error messages are displayed on the web page alongside the fields that they are all about (rather than in an alert box).

Want more? Have a look at error handling and AJAX:

Javascript Basics Part 11 (internal link)

how to account for errors and several different methods for general error handling.

Followed by:

Javascript Basics Part 10 (internal link)

An introduction to AJAX

Image: ‘A pint for the discerning standardista‘

Building a data-driven web site (reposted)

2006-09-04T14:04:00.000+10:00

this was originally posted last month, but got lost somehow, so here it is again in all its warty glory...

It's been a while, so this is likely to be a lengthy post...

To start off, we're going to look a the topography of our data-driven book site: a page that lists all the authors, with links from each author's name to a page that lists the books written by that author. For maintenance, we'll add pages that allow author records to be added, edited and deleted.

Before we get stuck into this, we'll need to know how to communicate with our database using SQL (structured query language) statements. Have a look at the SQL CHEAT SHEET for some examples of SQL that select, update, insert and delete records from a database. You can experiement with these in myPhpAdmin by opening a SQL window and typing in commands.

Master/Detail Pages

For our first page we're just going to display a list of authors. The pseudocode for this operation would read something like:
connect to the database engineselect a database to useexecute a SQL statement to retrieve some records from the databasedisplay each record on the web pageand the php code to accomplish this might look something like:

<?php

// connect to the database engine
@ $db = mysql_pconnect('localhost','username','password');
// do some error checking
if (!$db) {
echo 'error: couldnt connect to the database';
exit;
}
else {
//echo ' all ok with connection';
}

// select a database on the database server
mysql_select_db('your_db',$db);

// execute a SQL query to select records from the authors table
$result = mysql_query('SELECT * FROM authors');

// display each record on the web page
$numresults = mysql_num_rows($result);
//echo $numresults." records found";
for ($i=0; $i<$numresults; ++$i) {
$row = mysql_fetch_assoc($result);
echo $row['firstname'].' '.$row['surname'].'<br />'';
}

?>

So far, so good. But we want more, vis: links from the author names to a page that lists all the books they've written, so we'd need to update the echo statement to look more like:
echo '<a href="titles.php?authorID='.$row['authorID'].'">'.$row['firstname'].' '.$row['surname'].'</a><br />'';Wha? I hear you ask...

Quite simple really; we've wrapped an anchor tag around our author names, linking them to (an as yet unwritten) page: titles.php, which will list all the books written by that author.

So that our new page can list just one author, we need to give it a hint about what author we're interested in, and we do this by appending the authorID to the URL: ?authorID=nnn, where nnn is grabbed from the database and pasted into the link, a unique ID for each author.

At the other end (on the titles.php page), our script will grab this ID using $_GET and use it to build an SQL statement which gets just those books written by our author. Something like:

<?php

// connect to the database engine
@ $db = mysql_pconnect('localhost','username','password');
// do some error checking
if (!$db) {
echo 'error: couldnt connect to the database';
exit;
}
else {
//echo ' all ok with connection';
}

// select a database on the database server
mysql_select_db('your_db',$db);

// execute a SQL query to select records from the authors table
$result = mysql_query('SELECT * FROM titles where authorID = '.$_GET['authorID']);

// display each title on the web page
$numresults = mysql_num_rows($result);
//echo $numresults." records found";
for ($i=0; $i<$numresults; ++$i) {
$row = mysql_fetch_assoc($result);
echo $row['title']<br />'';
}

?>

Note the php which grabs our authorID from the URL and sticks it onto the end of our SQL statement:
'SELECT * FROM titles where authorID = '.$_GET['authorID']
Nice and easy, yes? On to...

Adding New Records

To add a new record we need to write a form with text inputs for each field in the table, and link to this new page from our original authors list. So, to start we'd add a little line of HTML to our authors.php page:
<a href="admin/authoradd.php">Add a new author</a>(note, we're putting our administration pages in a new sub-directory called admin. More on why later)

The form itself is rather simple, just asking for the firstname and lastname of our new author (we don't need to get an authorID because this is an autonumber field and the database will do this for us). Something like this should do the trick:

<h1>Add a New Author</h1>
<form method="post" action="authoradd2.php">
<table border="0" cellpadding="3" >
<tr>
<td>First Name:</td>
<td><input type="text" name="firstname" /></td>
</tr><tr>
<td>Surname:</td>
<td><input type="text" name="surname" /></td>
</tr><tr>
<td></td>
<td><input type="submit" value="Add Author" /></td>
</tr>
</table>
</form>

For simplicity the form will submit (POST) to a second php page: authoradd2.php which will do the actual work of creating the new record. The pseudocode for this operation would be:
Get the form elements into variablesConstruct an SQL statement from these to insert a new recordConnect to the database engineSelect a databaseExecute the SQL statementRedirect back to the authors list (authors.php) to display the new authorand the code might look something like:

<?php
// get the firstname and surname from the form
$firstname = $_POST['firstname'];
$surname = $_POST['surname'];

// build the SQL statement which will insert a record
$sql = "INSERT INTO authors (firstname, surname) VALUES (' ".$firstname." ', ' ".$surname." ') ";

// connect to the database engine
@ $db = mysql_pconnect('localhost','username','password');
// do some error checking
if (!$db) {
echo 'error: couldnt connect to the database';
exit;
}
else {
//echo ' all ok with connection';
}

// select a database on the database server
mysql_select_db('your_db',$db);

// execute the SQL statement
$result = mysql_query($sql);
// check that it ran correctly
if (!$result) {
die('Invalid query: ' . mysql_error());
}

// redirect to the authors list to show the results
header("location: ../authors.php");

?>

let's move on now to...

Editing a Record

This is really a combination of things we've already done. Firstly, we need to add an 'Edit' link next to each author's name (which must include the authorID in the URL). This would mean changing our authors.php file so that each author would be displayed as:

echo '<a href="titles.php?authorID='.$row['authorID'].'">'.$row['firstname'].' '.$row['surname'].'</a><a href="admin/authoredit.php?authorID='.$row['authorID'].'">edit</a><br />'';

The important new part being:

<a href="admin/authoredit.php?authorID='.$row[authorID].'">edit</a>

And the new authoredit.php page? It would take the authorID, select the author record from the database, and populate a form with these values, allowing the user to edit them. Someting like:

<?php

// connect to the database engine
@ $db = mysql_pconnect('localhost','username','password');
// do some error checking
if (!$db) {
echo 'error: couldnt connect to the database';
exit;
}
else {
//echo ' all ok with connection';
}

// select a database on the database server
mysql_select_db('your_db',$db);

// execute a SQL query to select the author record from the authors table
$result = mysql_query('SELECT * FROM authors where authorID = '.$_GET['authorID']);

?>

<h1>Edit Author</h1>
<form method="post" action="authoredit2.php">
<table border="0" cellpadding="3" >
<tr>
<td>First Name:</td>
<td><input type="text" name="firstname" value="<?php echo $row['firstname'] ?>" /></td>
</tr><tr>
<td>Surname:</td>
<td><input type="text" name="surname" value="<?php echo $row['surname'] ?>"/></td>
</tr><tr>
<td><input type="hidden" name="authorID" value="<?php echo $row['authorID'] ?>" /></td>
<td><input type="submit" value="Add Author" /></td>
</tr>
</table>
</form>

One trick to note: the authorID is being passed to authoredit2.php as a hidden field:

<input type="hidden" name="authorID" value="<?php echo $row['authorID'] ?>" />

We don't want the end user to edit this value, but need to send it through so it can be used when updating the record. Once submitted the form calls authoredit2.php, which performs the following operations:
Retrive the form valuesBuild an SQL statement from them to update the recordConnect to the database engineSelect a databaseExecute the SQL statementRedirect the user to the authors list to display the resultsI won't bore you with a full listing, just the first 2 steps:

// get the firstname, surname and authorID from the form
$firstname = $_POST['firstname'];
$surname = $_POST['surname'];
$authorID = $_POST['authorID'];

// build the SQL statement which will insert a record
$sql = "UPDATE authors SET firstname = '".$firstname."', surname = '".$surname."' WHERE authorID = ".$authorID;

The biggest trick here is to remember to wrap any text strings inside single quotes for the SQL statement. This can call for some tricky double quote stuff in the php. Perhaps a view of the final SQL will give you an idea of what we're aiming at here. If, for example, I wanted to author number 1 in the database to assume my name the SQL would look like this:
UPDATE authors SET firstname = 'Peter', surname = 'Shanks' WHERE authorID = 1
Nearly done now, just one more thing:

Deleting Records

Lucky for us, this is really the easiest operation so far. All we need do is add a little code right next to our edit links on the authors.php page:

<a href="admin/authordelete.php?authorID='.$row['authorID'].'">del</a>

As with the edit link, we're passing each author's ID in with the URL. This time we don't need a form, just the php to build the SQL and execute it before redirecting us back to the author list page:

<?php
$authorID = $_GET['authorID'];
$sql = "DELETE FROM authors WHERE authorID = ".$authorID;
require("../connection.php");

$result = mysql_query($sql);
if (!$result) {
die('Invalid query: ' . mysql_error());
}

header("location: ../authors.php");
?>

Of note here: I got sick of writing the database connection and selection code over and over. Instead I put it in a seperate file: connection.php, which I included in this one with the php function: require("../connection.php");

And that's it - we've built a fully functional, data-driven set of web pages. If you want to practice your skills further, add some pages which allow you to view book details when you click on titles, and add, edit and delete titles from the database.

Sessions

2006-09-04T13:40:00.000+10:00

So, we've been looking a bit at session variables. The scenario:

we're displaying a screenful of data to our web site visitors (like a list of authors), and we want to give authorised users the option to edit, delete and add new records - but we want to hide these pages from the average viewer. First, we need a login screen.

A simple form asking for a user's email and password should do. When the form's submitted, these fields would be checked against a database of users. Then the magic occurs...

If the user's email and password match, we'll be setting a session variable, that will let us know that they're authorised to see the administrative pages and links.

Sessions are like server-side files that store variables that can be read from, or written to, by PHP scripts. Each session file is unique to the user that created it and can only be accessed by subsequent requests from the same user.

For our login, we'll be setting a session variable called loggedin. The first piece of code on the page, and all other pages that need to access the variables, will be:

<?php session_start(); ?>

This piece of code does one of two things. If the user does not already have a session, it creates a new session - or - if the user does already have a session it connects to the existing session file. When a new session is created, PHP session management generates a session identifier.

After calling the session_start function, we're ready to do the email/password comparison with the user details in the database (you can do that), if they match we'd set the session variable:

$_SESSION['loggedin'] = 'true';

Subsequenly we can check for this value on any page. To selectively display bits of html (links to edit and delete functions, for example) we might add:

<?php
session_start();
if ($_SESSION['loggedin'] == 'true') {
echo 'Edit>';
}
?>

If we were restricting access to a whole page (say the add, edit or delete pages), we might add some code like this:

<?php
session_start();
if ($_SESSION['loggedin'] != 'true') {
header("location:login.php");
}
?>

This code checks to see if the session variable loggedin is set to true. If not, it redirects the user to the login page.

Thanks to iconjon for the pic

What should we build today?

2006-06-04T11:34:00.000+10:00

Here's a little task that should cover the remaining assessment events for a bunch of modules: complex mark up language documents, emerging web technologies, introduction to programming and the client server envirnoment. It's due on the 19th June 2006

The problem

I'd like you to create a web based form that allows someone to enter event details (these could be for greening bathurst events, an upcoming gig for your band, your social calendar, whatever).

The form should allow for the entry of a date, title, description, location and and url to further event details (or a web site home page if there are no details online).

Once submitted, the form should call some script that creates an RSS file with the event information. For now we'll assume that there will only be one event at a time in this file, but in a later, database driven version, we'll be looking at how to list multiple events.

What you need to produce

For 3756V - Introduction to Programming

An IPO table of the process

For 3756Y - Complex Mark Up Language Docuemnts

A form for entering the data. To make the date input unambiguous, allow the user to select days, months and years from dropdown boxes.

For 3756Y - Complex Mark Up Language Docuemnts, 3756X - Emerging Web Technologies & Standards and 3756W - WWW Client Server Envirnoment

An RSS file for the event generated by some PHP script. This can be in RSS 0.91, 1.0 or 2.0 format but it must be validated

For 3756Y - Complex Mark Up Language Docuemnts and 3756X - Emerging Web Technologies & Standards

a link to the RSS feed from a web page. The link should be from an image like this:

For bonus marks

see if you can add some client side JavaScript that prevents users from submitting the form with empty fields

What I need to see on or before the 19th June, 2006:

An assignment cover sheet attached to a copy of your IPO diagram and URLs to the pages with your RSS feed link and your form for entering new events.

Hints

You might find the followning web sites useful:

The BBC news page about their RSS feeds - for some insight on how and why RSS is being used in the real world
Tizag's lesson on PHP forms
The Zend tutorial on PHP file handling
XUL - a step-by-step tutorial on building and using RSS feeds.
The W3c feed validator: http://validator.w3.org/feed/

Thanks to The One True Stickman for a picture of his junk corner

Create your own development environment - just add water

2006-05-29T11:58:00.000+10:00

In the real world you will need a place to try out new web pages before you make them 'live' on the customer facing web site.

Today we're going to build a development environment that allows us to try out dynamic PHP pages on our local machines, with a database thrown in for good measure.

The ingredients we'll need are:

a web server (we'll use Apache)
the PHP interpreter
the database engine (MySQL)
some database management software (phpMyAdmin)

Getting all these things installed and playing nicely together can be a bit of a task. Fortunately there are folks out there who have done it already. One of those, dWebPro, will also run from a stand alone CD which you can give to your customers, relatives and friends.

To save on download times, I've put copies up on the local server - have a look in the dWebPro directory (or go here if you're inside the firewall) and you'll find the following files:

dwebpro_6.5.0.exe       7.9M - the web server
mysql40_package.exe     5.4M - the database software
php4_package.exe        7.5M - the PHP interpreter
phpmyadmin_package.exe  2.9M - database admin software

Download and install each of these in turn on a PC running Microsoft windows and you'll have your very own development environment.

Testing
If you installed with all the default options you can run the web server by clicking on the dWebPro icon on your desktop. After the spash screen you should see the phpMyAdmin screen displayed in the web browser. Note the URL. It doesn't point to a local file but calls http://127.0.0.1:8080/phpMyAdmin/ - you're looking at a page that's being served by a real live web server running on your PC with a local ip address (127.0.0.1, using port 8080).

Using it in anger
Now to try it out for yourself. Copy the form and php pages we created last week into the web server home directory. This should be: C:\DWebPro\deploy\www if you used the default installation.

Now open up the form page by entering it's server address in your browser's address bar. Something like: http://127.0.0.1:8080/testform.html

Submit the form, read the results and take a break.

thanks to David Reeves for "High Purity"

CSS and multiple media

2006-05-28T18:35:00.000+10:00

You might remember, way back when, that I mentioned that your web pages' CSS links can have a MEDIA attribute, which specifies the medium or media to which the style sheet should be applied.

This means you can have one lot of CSS for the screen, and another for - oh, lets say, the printer

it turns out there are ten defined media types:

all
aural
braille
embossed
handheld
print
projection
screen
tty
tv

Print is the one you'll see most commonly used. You can find out why, and some of the common tricks used in a print media type CSS file, by reading the article: css vs. media

Try it yourself. Add a print css media attribute to your project 1 hompage which strips out the navigation elements, removes the underlines from links and makes them black, sets the background colour to white, sets the text font to something with serifs and (for bonus marks) prints the URL of clickable links next to the original links on the page - then print it out to make sure it works.

The other up-and coming CSS media star is of course: mobile. The Opera browser folks have a good article on producing mobile content called Making Small Devices Look Great

How do you test the other media attributes?

So, we've seen how to test the print media attribute using your printer. How about the others? Well, you could try looking at mobile types on your G3 mobile phone (or if you're poor you can use an online emulator), and I guess you could always try producing braille types on a handy nearby braille embosser

Of course, if you're using Macromedia Dreamweaver 8, you can use the the "View > Toolbars > Style Rendering" menu option to test various media types in the IDE, including what a page looks like if CSS is ignored altogether.

thanks to adactio for the image: "CSS Mastery"

Some XML multi-choice practice

2006-05-23T09:41:00.000+10:00

I forgot to mention yesterday - I started to add an XML section to the updated toolbox. You can see it on the Bathurst TAFE server (or here if you're inside the firewall).

There's not much stellar content, but I did put together a short quiz with some typical XML questions, the type of thing you'll be doing in the test next week. Just click on the link marked: Test your knowledge of Complex Mark Up Language Documents

On the usability front, I've moved the activities list to the top of the page and shrunk the banner section to a minimal 20 pixels. I've also given the pop-up windows back all the functionality of a full fledged browser (navigation, menus and most importantly: the ability to be resized). What are your impressions? An improvement? Too much form lost for too little function? Or didn't it make any difference? Once more, feel free to post your comments.

Forms II - they're back, and they're not happy...

2006-05-22T14:54:00.000+10:00

When we created our first form we used a php script to list all of the global variables - useful for testing the form, but not much good if we want to actually use the information for something. This week we're going to look at how to get individual form elements into variables so we can bend them to our will.

Setting up

To start off make sure you've given the text area, checkbox and menu form elements meaningful name attributes:

name = "shipname" for the first text box
name = "tripdate" for the second
name = "exploration" for the first checkbox
name = "contact" for the second
name = "species" for the multiselect dropdown menu

Running

To process the form we'll need to create a new php page to process our form: testform.php

This will be a common, or garden variety html page, but buried in the <body> section we need to add a block of php code:

<?php

// set a variable from the shipname field on the form...
$shipname = $_POST["shipname"];

print("Thank you $shipname.");
?>

This code looks for an input control on the form called: shipname and assigns it to a php variable: $shipname, it then writes this variable and a quick thank you on the screen.

Update the form so that it's action="testform.php", and upload both files. Don't forget to set the testform.php file permissions to 'execute' so that the web server can run it.

Debug if necessary and once you have it working, try adding code to display the tripdate and exploration elements.

Being Selective

Did you notice how the exploration control returned a value (perhaps something like 'yes')? What we want to do is try some selection on this value before we write the expedition objectives on the screen. Something like:

print("<strong>Mission Goals:</strong> <br />");

$exploration = $_POST["exploration"];

if ($exploration == "yes") {
print("Exploration<br />");
};

Try adding this code to your own page. You might need to change the comparison string to match the value attribute of your form's checkbox. Once you get this working, add code for showing 'Contact' if the contact check box was selected.

An optional extra:

The final part of the form is a bit trickier. The crew species list can have more than one value selected. This will be returned as an array of values to the php form checking page, and so we need to do a bit of fancy php footwork to access it.

Firstly, we need to give the option control a php array-friendly name. If its currently called: name="species" you will need to add the array delimiters to its name, making it: name="species[]" - you should now have html on your form page which looks something like:

<select name="species[]" size="4" multiple>

In your php file you need to run a for loop through this array, printing each value on the screen:

print("<p><strong>Mission member's species:</strong><br />");
foreach($_POST['species'] as $species) {

print("$species <br/>");
}
print("</p>");

This takes the species array from the post array and itereates through it, assigning each selected species value to a $species variable, which it prints on the screen. Simple really (actually, a bit more advanced that we're expecting from anyone just yet, but I put it in for the terminally curious).

Where to next? I think we'll be using a form for gathering feedback on a website sometime soon, perhaps even for the greening australia assignment, so it would be useful to think about what fields you'd put on this sort of page, and how you might retrieve that information once it was submitted to the server.

Bonus Section

Try adding some radio buttons for the ultimate mission goal:

inter-galactic domination or
creation of a trade hedgonomy

These buttons will also have to be set up as an array, and will need processing similar to the species array.

Thanks to pvera for the picture: "Will code for food"

This entry linked to &amp;amp;amp;amp;amp;amp;amp;amp;lt;a href="http://not-a-real-namespace/http://certivweb.wikispaces.com/3756W" - WWW Client Server Environment"&amp;amp;amp;amp;amp;amp;amp;amp;gt;Wikispaces page (3756W - WWW Client Server Environment)&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt;

Image Maps

2006-05-22T07:16:00.000+10:00

Read about image maps and try the example

Download and install Mapedit or some other image mapping tool

Save the map above or find some other creative commons licensed map of Australia using flickrlilli (click on the image above for a full-size version)

Make an HTML page with an image map linking each state (and the other countries) to their relevant wikipedia entries.

Upload and link the page to your student portfolio

Image: "Australia and New Zealand 1788-1911" by hoovernj

This entry linked to &lt;a href="http://not-a-real-namespace/http://certivweb.wikispaces.com/3755A" - Create a Mark Up Language Document"&gt;Wikispaces page (3755A - Create a Mark Up Language Document)&lt;/a&gt;

Dublin Core

2006-05-16T10:43:00.000+10:00

Yesterday my collendar like memory failed me when trying to think up a common DTD that people use when they're creating XML documents.

Today it came back to me: the Dublin Core is a set of descriptors (such as the title, publisher, subjects, etc.) that are used to catalog a wide range of networked resources, such as digitized text documents, photographs and audiovisual media. Often it gets used in XML documents that describe a collection of web documents or files.

This Wikipedia article explains the Dublin Core , and there's a user guide here - go ahead and create some Dublin Core metadata for yourself using DC-dot

Can you think why it might be useful to have this 'metadata' available about your web site's contents?

Thanks to Peter Morville for the pic

This entry linked to &amp;amp;amp;amp;amp;amp;amp;amp;lt;a href="http://not-a-real-namespace/http://certivweb.wikispaces.com/3756Y" - Complex Mark Up Documents"&amp;amp;amp;amp;amp;amp;amp;amp;gt;Wikispaces page (3756Y - Complex Mark Up Documents)&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt;

Validating Website Performance

2006-05-14T15:49:00.000+10:00

An assignment, due 29th May:

For the Validating website performance assignment you're required to write a report on the Web Development Toolbox CD you received last term.

Task 1 - Broken Links
Do a link analysis on the web pages, listing any broken interneal or external links on the CD. You will need to run this on a PC with an internet connection to test the external links.

Task 2 - Download Times
Look for any large files on the CD - those that would take more than 10 seconds to download over a dial up connection. What impact would these have on running the disk from a web server. Specifically, how long would these files take to download over a 56k modem? What could be done to minimise the wait for users with slow connections?

Task 3 - Usability
Create a list of 5 tasks for a typical user to complete. Tasks might be somthing like: "find a list of common graphics file formats and what they're used for". As far as possible, the tasks should be tasks that real users would want or need to carry out when they use the toolbox.

Take a volunteer and sit them in front of a computer running the Web Development CD. Tell them you're going to ask them to carry out a few little tasks for you. Make sure that you tell them it's not they who are being tested; reassure them that you're only interested in getting data about how easy the website is to use.

First, ask them if they would use such a site if it were available. You don't need to make it too much like a market research survey but a few questions like that would be useful.

Be sure to record their answers! If you like, you can use the CamStudio software, a video recorder or voice recorder to make this easier for you to review later.

Ask the user to carry out each of your tasks one at a time. Don't say anything to them, other than what the task is.

Watch them as they attempt to do the task. If they say anything, make sure you record it. Also be sure to record instances where they press the wrong button and finish up at the wrong page. Be sure to make a note if they get lost!

If a user does get lost, gently point out where they made the mistake, and show them the correct way to achieve the task.

Write a report detailing the overall outcome of the performance and usability project. You should recommend changes to the CD based on both the performance measurements and the usability tests.

XML, DTD, RSS and other 3 letter combos...

2006-05-14T14:37:00.000+10:00

This week we're going to conquer those pesky 3 letter acronyms: XML, DTD and RSS.

XML
Like html, xml uses tags to delimit data. Unlike html, it's very unforgiving of syntax errors - mistyping the tag name, mixing upper and lower case, inproperly nesting tags and leaving out closing tags are all sudden-death events for an XML document.

For the important bits on XML, please read through the following W3Schools pages:

Introduction to XML
What is XML, and how does it differ from HTML?

How XML can be used
Some of the different ways XML can be used.

XML Syntax
The strict but very simple syntax rules of XML.

XML Elements
XML Elements, relationships, content and naming rules.

XML Attributes
How XML attributes can be used to describe elements or provide additional information about elements.

XML Validation
The difference between a Well Formed and a Valid XML document and how a DTD is used to define the XML document.

which brings us to our next acronym:

DTDs

XML's big trick is that you get to define the tags, which means you can use XML to describe just about any data.

So that other computers can understand what you're talking about, you need to give them some hints. Theat's where the DTD comes into the picture. A Document Type Definition dictates what the legal building blocks are for your XML document.

Once again, let's check out W3Schools for a DTD Tutorial

The good news:
We don't need to know how to build an XML document from scratch (yet).

The bad:
We do need to know how to create valid XML documents that conform to DTDs created by other people.

Here's one to practice on:

Google sitemaps are XML documents that describe websites so that the google search engine can crawl through them and include them in their search results.

Now, google will find pages by itself, but by using a sitemap you can speed up the process, and guide the robot to your best pages first. For your assignment: create a sitemap of your Bathurst TAFE web pages that conform to the Google sitemap specification - validate the sitemap and print the results, and submit them to me along with a printout of the sitemap itself.

Extra but interesing:
To add your own attributes to the XHTML specification you'll need to know how to extend existing DTDs.

RSS
One of the high profile uses for XML is RSS.

Really Simple Syndication has been used for years by web sites to broadcast the availability of fresh content; listing new pages in an XML file which special programs called aggregators can pick up and process, and tell real people about fresh content that they can read.

Like everything on the web, RSS has evolved. The important milestones are RSS 0.91, RSS 2 and the Google supported challenger: Atom. Read all about them on the Wikipedia

Coming up (next week?): we'll be looking at how to create a form and some script that will allow you to generate RSS 0.91 files for new pages as they're added to your TAFE website.

Thanks to kosmar for the
Web2.0 - extended mindcloudmap

This entry linked to &amp;amp;amp;amp;lt;a href="http://not-a-real-namespace/http://certivweb.wikispaces.com/3756Y" - Complex Mark Up Documents"&amp;amp;amp;amp;gt;Wikispaces page (3756Y - Complex Mark Up Documents)&amp;amp;amp;amp;lt;/a&amp;amp;amp;gt;

more on the emerging web tech assignment

2006-05-08T08:35:00.000+10:00

I'd hoped to have this conversation with you face to face, but a small accident this morning has kept me at home.

It's about the emerging web technology assignment I set last term. Frankly, I haven't seen enough evidence from anyone (except Matt), that you know the topics.

The idea behind having you blog and comment was that you could prove to me that you knew enough about each of the topics to either add some information, ask a pertinent question or answer a question posted by someone else - on each and every topic listed.

So, I need some more postings with solid evidence of subject mastery in them - failing that I guess we could go back to the tried and true: 'write me a 3000 word essay on the following topics...'

To be honest, the whole blog thing's a bit of an experiment, and has taken me more time than marking essays would have, so I'm more than happy to do the paper thing. I just thought it might be a better learning experience for you folks to read, analyse and comment on other postings, not to mention a bit less of a chore. The subject we're currently studying: Complex Markup Language Documents has an essay writing component too (about XML, RSS, DHTML and DTDs) - what would you like to do about this? More blogging or a straight up essay? Post a comment here to let me know.

In the meantime - please add some more content to the collected wisdom of the class blogs on emerging tech...

Forms, CGI and PHP

2006-05-07T21:07:00.000+10:00

Last week we played with some nifty form elements. If you missed the action, or just want to revise, the W3C have the definitive word on forms here, or you can find a gentler introduction on w3shools.

This week we'll try to implement a simple form. See if you can re-create the following useful web page:

Set the form's action attribute to point to dump-globals.php - which you can pick up from either here (if your outside the TAFE lab) or here (if you're inside the firewall).

Copy your new web page and dump-globals.php onto the bathurst-tafe web server, set the permissions, and test the page using both GET and POST methods.

If you have the time, you might want to see how to
create forms using CSS

This entry linked to &lt;a href="http://not-a-real-namespace/http://certivweb.wikispaces.com/3756Y" - Complex Mark Up Documents"&gt;Wikispaces page (3756Y - Complex Mark Up Documents)&lt;/a&gt;

toolboxin' around

2006-04-11T15:23:00.000+10:00

before taking off for our easter break, we did a little more work on the toolbox:

finished moving the 'requirements', 'installation guide', 'credits' and 'disclaimer' links from the old start page to the shared_files/nav_panel.html file
removed the tables from nav_panel and replaced them with unordered list elements
updated shared_files/css/nav_panel.css - adding code for a background image, and some showy looking code to display our new list as a set of buttons (we took some original code from listamatic and 'adjusted' it to suit our page)
tinkered a little with shared_files/frameset.html so that we didn't get the annoying scroll bars along the bottom of each frame.

If you don't want to code the html yourself, the updated files are available at http://www.bathurst-tafe.nsw.edu.au/~pshanks/webdevToolbox
(or http://192.168.201.2/~pshanks/webdevToolbox if you're inside the firewall)

by rights we should probably do another little usability test to check that our changes have worked - perhaps next term...

while on the topic of next term, here's the next few items on the redesign things-to-do list:

move (and possibly re-name) the links at the bottom of the writing basic html page
split up the webdevmag html for writing basic html into bite sized pieces (possibly adding some more content)
prevent these pages from opening in new windows
add some navigation elements so that our new pages show up in the breadcrumb trail and main navigation
re-design the top frame
update the credits page to add our names :-)

have a good break, see you in may (thanks to Easternblot for the Chocolate bunny pic).

background briefing

2006-04-09T11:56:00.000+10:00

One of the first things we'll be changing on the web development toolbox is the background - this can be an image or a colour or both.

For an overview of how this can be done using html, see the echoecho.com tutorial

If you're keen to put a background image on your pages, you might want to chose one from backgroundcity or roll one from scratch at the absolute background textures archive

As an exercise:

Create an index.html page with a background colour #FF0000

Put this background image on it from the absolute background textures archive's red border page

Add a table and apply the cloud image above as a background (right click on the clounds and chose 'save image as...' from the popup menu).

Set one cell's background colour to #00FF00.

Finally, upload the html and picture files into a new directory on your website called background.

You should have ended up with something that looks like this:

Ugly but illustrative. Unfortunately, the html bgcolor and background attributes have now been depricated in favour of CSS, but the exercise does give a good grounding for the tizag page on CSS backgrounds

Q: where would we add background information for our redesigned web development site?
This entry linked to &lt;a href="http://not-a-real-namespace/http://certivweb.wikispaces.com/3755A" - Create a Mark Up Language Document"&gt;Wikispaces page (3755A - Create a Mark Up Language Document)&lt;/a&gt;

redesigning the toolbox

2006-04-07T21:46:00.000+10:00

The usability study

What was your initial impression of the toolbox?

Could you tell what it was all about? Did you find a good road map for navigating through the content?

Was navigating to the correct section effortless or did you get lost along the way (or, like some of us, find it hard to even start)?

Was it easy to find the information you were after? Did you use the search function? The main navigation and the links to more information? Where they all well labled and obvious, or did cutesy language get in the way of understanding what lay at the other end of the links?

I think we all had some trouble at one point or another. For me, I had to think too hard about how to use the toolbox, and it didn't leave me with enough free brainpower for using the content.

What we did about it

To start with, we went for the 'low hanging fruit' - those changes which would be easy to implement but which would give the most obvious results. For a start, we renamed the index.html file and took the frameset.html file from the shared_files directory and copied it into the root directory of the site as our new index.html.

So that the links work we had to edit the file (adding "shared_files/" to the beginning of all the URLs in it). If you don't want to code the html yourself, the updated files are available at http://www.bathurst-tafe.nsw.edu.au/~pshanks/webdevToolbox/webdevToolbox20060403.zip
(http://192.168.201.2/~pshanks/webdevToolbox/webdevToolbox20060403.zip if you're inside the firewall)

So now the first page we see when we start the toolbox is the welcome message from arachnoid web services. It's still not perfect, but a whole lot better than 2 spash screens and a popup window. I would have perferred to have more orientation, but the actual orientation page was so light on information it wasn't a candidate. We'll just have to add more content to the welcome message later.

Because the original spash pages had some links to credit, setup and teacher oriented pages on them we have to add them back into the program somehow. The obvious sopot was the left hand navigation frame, so we made a start on that.

Next we hope to complete the re-design of the main navigation, and do some tinkering with the CSS to change the look and feel of the whole site with a minimum of effort. To that end, please take a look at some of the CSS showcases out there and pick a likely looking design for analysis and imitation (The CSS Gallery, Layout Gala, CSS Beauty
, and css Zen Garden
could all be worth a visit)

results just in...

2006-04-07T20:49:00.000+10:00

Here are the results from last week's html quiz and survey (click on the image if you need an enlargement):

The basics looked good, but perhaps we need a little more work on text elements.

Most of you were OK on lists, but patchy results on images.

Links could do with some more attention too, and a couple of you will need to revise with a tables lesson.

So, what did you think?

Do you want another face to face session on any of these areas, or could you muddle through with the tutorials I've linked to here? Post a comment if you feel strongly either way.

A site redesign project

2006-04-02T15:33:00.000+10:00

These days it's becoming a common task to redesign existing web sites.

I couldn't see anywhere in the current syllabus that this was being addressed, so I've decided to munge it into the modules I'll be teaching here.

For our subject, we'll take TAFE's own Web Design toolbox. If you don't have a copy you'll have to drop me a line so I can send you the CD.

This resource was created in 2002, and in my opinion is ripe for an update. We'll take it in tiny little steps and see how far we can go.

To start off we'll do a mini usability test to see how suitable the toolbox is for achieving the 'Create a Mark Up Language Document' learning outcomes.

First: download these usability test forms:
Post-Session Survey (PDF)
Observation Form (PDF)

Second: find a victim volunteer, and sit them down in front of a computer running the toolbox.

Third: have them run through some simple exercises and watch carefully for events that make them stop and think - these are the opportunities we'll be exploiting for improving the interface. As you observe, fill in the observation form.

Finally: after the exercise, have your subject fill in a post-session survey. If you're doing this exercise in class swap roles half way through so you both experience the process as a tester and observer.

Here are some sample exercises you might set your subject using the module learning outcomes:

Open the toolbox and navigate to the section called 'Write basic HTML'
Navigate to the orientation section and find what link will tell you how to use the toolbox.
Try the link. Did it tell you enough to confidently use the toolbox?
Return to the 'write basic html' section.
Can you find what competencies you're expected to master in this module?

Half time, swap roles if you're doing this exercise with another student and then complete the following tasks:

Can you find the section in the WebDevMag that explains how to add hyperlinks to a document? Is there enough detail here for you to understand the anchor tag?
Can you find the spider.gif mentioned on page 3 of the WebDevMag?
Close the WebDevMag window.
Find out from the chief programmer if there's any way to change the spacing between paragraphs.
Go to the 'Read other resources about basic HTML programming' section and visit the site: 'Barebones Guide to HTML'

For bonus marks, run through the section: 'Test your knowledge of basic HTML programming' and note any problems with the questions or interface.

By now you should have a good idea about how the toolbox works, and what parts of the interface design you might want to change. It's time for some brainstorming and planning...

Frames

2006-04-02T13:47:00.000+10:00

Before we start I feel I should warn you: there's no very good reason for you to create pages that contain frames.

Way back in 1996, Jakob Nielsen wrote Why Frames Suck and nothing's changed to make them any less sucky since then. (Want more? Have a look at the international I hate frames club)

That being said, you still need to know about HTML frames because

Your website could be caught in someone else's frameset

You might have to work on a pre-existing web site based on frames, and

it's in the syllabus :-)

So, what is a frameset? Have a look at QuirksMode for an example. Use the site to see how the use of frames affects it, then look at the page source.

Why would a modern site about JavaScript, CSS and the W3C DOM use frames? It's hard to find pros, but frames do have some advantages.

Wanna build a frameset of your very own? Let's have a look at what W3Schools have to say

That should be all we need to know about building frames.

Now, let's see about escaping from other people's framesets.

Why is being stuck in a frameset such a problem? Have a look at this exercise and you'll get to see first hand. And here's how to go about escaping a frameset

This entry linked to &amp;amp;amp;amp;lt;a href="http://not-a-real-namespace/http://certivweb.wikispaces.com/3755A" - Create a Mark Up Language Document"&amp;amp;amp;amp;gt;Wikispaces page (3755A - Create a Mark Up Language Document)&amp;amp;amp;amp;lt;/a&amp;amp;amp;gt;

an HTML survey

2006-03-30T15:56:00.000+11:00

I've put together a survey to see how much we've learnt about basic html so far.

It's a set of links to 6 quizzes on the following html subjects:

HTML Basics
Text
Lists
Images
Links
Backgrounds
Tables

Each quiz consists of 10 multi-choice questions. After taking each quiz record your mark on the survey.

These marks are not linked to you in any way, and won't be used for any assessment. I'm just interested in what areas we need to re-visit (if any), and how much you've learnt over the last few weeks as a group. So please don't just make up marks or re-send the survey. If you're not interested, just skip it.

To do all the quizzes and record the marks should take about 30 minutes.

Please note: when you click on the quiz links on the survey they will open in a new window. You may be told that you have a previous survey already open. If this happens, click on cancel to get to the new quiz.

Click here to do the quizzes and take the html survey, and have fun.

Validate Website Performance - an introduction

2006-03-28T13:19:00.000+11:00

This week we started to look at how we'd 'validate website performance'

Initially this entails learning about how to make websites that don’t suck. So far we’ve been learning all about how make websites work, now we’re going to look into what makes them work well.

To kick off, we had a think about what things annoyed us on the web. I didn't write any of these down, but you've probably got a pretty good list yourself.

If not, have a think about it now. Have a look at this website for some inspiration

Don't for a minute imagine that this is just a feel-good exercise - in 2004 a study of the U.S.A.’s online railroad booking service showed that poor website performance was costing Amtrak a cool $16 million dollars a year in lost revenue. Wouldn’t you just love a slice of that pie?

Come up with a good list of annoyances?

Here's a couple of lists made by other folks:

Check out:

Jakob Nielsen –
Top Ten Web Design Mistakes of 2005:
http://www.useit.com/alertbox/designmistakes.html
and his Top Ten Mistakes in Web Design:
http://www.useit.com/alertbox/9605.html
finally, a site dedicated to Web pages that suck:
http://www.webpagesthatsuck.com

We then went on to investigagte a few annoyances in more detail...

Usability

One of the recurrent themes is usability: poor navigation, inadequate search, bells and whistles getting in the way of the site's functionality, colour clashes - the list goes on.

How would you measure usability?

Read through this macromedia article and see what you could add to your own web site development toolbox:

http://www.macromedia.com/devnet/dreamweaver/articles/dwmx_design_tips.html

What if the web page can’t display at all?

Use html validation. Download, install and run html validator for firefox on some of your own pages:

https://addons.mozilla.org/extensions/moreinfo.php?id=249&application=firefox

Broken Links

Any excuse?
How can you avoid them?
How often should you check?

Download, install and run Xenu’s link sleuth on your own Bathurst-tafe pages:
http://home.snafu.de/tilman/xenulink.html

and that was about it for this week. Coming up: Site response times and stress testing.

Variable width CSS layouts.

2006-03-26T21:36:00.000+11:00

Flushed with last week's successful foray into using CSS for page layout, we move on from a fixed width, 2 column design to 3 variable width columns, as explained in Liquid layouts the easy way: "one method of achieving a successful liquid layout as well as providing basic definitions of liquid, fixed-width and em-driven layouts"

This entry linked to &lt;a href="http://not-a-real-namespace/http://certivweb.wikispaces.com/3756D" - Develop Cascading Style Sheets"&gt;Wikispaces page (3756D - Develop Cascading Style Sheets)&lt;/a&gt;

CSS layout

2006-03-19T11:17:00.000+11:00

This week we're looking into how to use css lay out page content (rather than using tables).

To start (and probably end with) we'll be working through a comprehensive CSS layout tutorial by enlighten designs

If you have the time, I'd recommend you read through Kevin Hale's excellent article: An overview of current CSS layout techniques

If you don't have the time, perhaps you should just use a CSS layout genrator. Something like the layout-o-matic or little boxes

Finally, try to re-create the table exercise posted on Sunday, March 12 2006 but using CSS layout instead of the outer table
This entry linked to &lt;a href="http://not-a-real-namespace/http://certivweb.wikispaces.com/3756D" - Develop Cascading Style Sheets"&gt;Wikispaces page (3756D - Develop Cascading Style Sheets)&lt;/a&gt;

Assignment: 3756X - Emerging Web Technolgies and Standards

2006-03-19T09:55:00.000+11:00

Find your blog in the table below and write a post about the technology or web standard marked. Your post should be a few hundred words in length and include links to relevant web sites. These sites should also be added to your del.icio.us account with at least the standard/technology name and 3756X as tags.

Some places you might go to start your research:

The del.icio.us tag page (enter your search term on the top left of the page)
Webmaster World
wikipedia
the world wide web consortium (w3c)
webopedia
and, of course, google

Once you have written your entry, you need to visit the other blogs in the table and add comments to their 3756X blog entries. The comments must be on topic and constructive: asking questions, adding information, making clarifications and suggesting extra links would all be suitable comments.

Your initial blog entry should be completed by Monday 27th March, with all comments left by the following week (Monday 3rd April) - setting up a bloglines group might make this easier by allowing you to easily see when each of the other blogs have been updated.

HTTP

SMTP

CGI

MIME

SHTTP

SOAP

W3C

IEEE

ECMA

HTML

XML

DOM

XHTML

an html editor

2006-03-14T13:26:00.000+11:00

This week we decided to move on from hand coding all of our html by installing and using a purpose built text editor: editplus

Once you install the latest version, it would be helpful to also install the template and tagset for XHTML transitional from the user files section (I used xhtml_1.zip an XHTML ctl and template by Jim Granger) - unzip this into your Program Files/editplus directory

To use the template, just click on File - New and select html

To see the XHTML specific tags you will need to select xhtml from the dropdown box on the cliptext tab on the left.
This entry linked to &lt;a href="http://not-a-real-namespace/http://certivweb.wikispaces.com/3755A" - Create a Mark Up Language Document"&gt;Wikispaces page (3755A - Create a Mark Up Language Document)&lt;/a&gt;