Thursday, March 30, 2006

an HTML survey

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.

Tuesday, March 28, 2006

Validate Website Performance - an introduction

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.

Sunday, March 26, 2006

Variable width CSS layouts.

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"


Sunday, March 19, 2006

CSS layout

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

Assignment: 3756X - Emerging Web Technolgies and Standards

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:


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.


3755assignment

Bennji

Bog

Brads Page

Brettos Blunder

chris - MySpace Blog

cragio

Dann Lost His Camel

Justin's Blog

MattSplog

School Days

Sharon's Blog

Tafe Blog

HTTP

X













SMTP


X












CGI



X











MIME




X










SHTTP





X









SOAP






X








W3C







X







IEEE








X






ECMA









X





HTML










X




XML











X



DOM












X


XHTML













X

Tuesday, March 14, 2006

an html editor

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.

a wikispace for Cert IV web stuff

In an idle moment last weekend I set up a wikispace for some of our Cert IV web subjects: http://certivweb.wikispaces.com/.

If you haven't come across a wiki before, they're an interesting web based application that allows anyone to edit the page contents. The most famous wiki would have to be the wikipedia (where you can find out more about what a wiki is)

Currently, most of the pages on the certivweb wiki are generated from del.icio.us RSS feeds, but there is one page with some more information: the page devoted to 3756X - Emerging Web Technologies - where you'll find the subject outline and learning objectives along with some relevant links.

Next week we'll be dividing up these objectives and writing blog entries on them, so have a look through the list and some of the links to give yourself a handle on where we'll be going.

Sunday, March 12, 2006

A table exercise

Try re-creating the following page (click on the image for a bigger, more readable picture)







Monday, March 06, 2006

Tables

Today we created a bunch of tables

in the dim dark past, way back in the early parts of this century, people used tables extensively for page layout; putting headers, navigation bars, content and footers into various cells. now, of course, we would use CSS, but its inportant to realise that there are plenty of table based pages still out there - some of which you might have to work on in the future.

tables are still very useful for displaying tabular data in a spreadsheet like layout. things like telephone lists.

to see how tables work have a look at the html code tutorial on tables - the navigation's a bit iffy, but it's worth ploughing through up to and including the css background section; just click on the next page link on each page

for more: see the w3schools tables page

creating an index.htm file

a fact I've neglected to mention: if a directory has an index.htm file in it, this file will be displayed by default. So if you visit my directory: /~peter you'll see the index.htm file that's there.

Exercise:

  1. Create a new directory in your public_html space called exercises

  2. upload the list exercise you completed today and the image and css files we created last week

  3. create a new page: index.htm with links to the two exercises

  4. test your page by entering http://www.bathurst-tafe.nsw.edu.au/~yourname/exercises into your browser address bar. note that the web server will send you the index.htm file by default if you don't add any specific page name to the URL



A list exercise

For today's exercise I'd like you to recreate the following list, displayed here in three pictures (you might need to click on the third image to read it):











Some hints for minimising the pain:

  1. Create the outer lists first. For example, create an ordered list with three list elements for "history, tags, design and text", "Using CSS, Images and Links" and "Lists. There are 3 sorts of lists", then test it before filling in the next nested list

  2. Whenever you type in an open a tag, type the matching closing tag, then fill in the text between them, that way you won't get lost in your open tags

  3. to show a < character use the special character &lt; - for a > use &gt;