Even though I am not teaching any of you in semester 2, 2006, I thought it would be a great idea to say hello and let you know about this blog.

It was created last semester (Semester 1, 2006) for use by the C123 and C475 students. As it was the first time it was used there were a few ideas that may not have worked, but it was worth the time to try it out.

This semester, you may find ideas come from myself that may help you sort problems out, as well as your lecturers also using this resource to communicate and collaborate with you.

Anyhow, on with the show (and please read the rest of the article).

Adrian

You should, by now, have created a blog of your own, if not take the time to do so now. You can use www.edublogs.org or www.uniblogs.org (preferred).

In your first blog entry, you should introduce (briefly) and upload a photo of yourself.

The idea behind this is to practice using the blog system before you have to use it intensely during the semester.

You’ll find a sample entry if you read the whole of this story.

If you want to read how to use the WordPress system then head over to Edublogs Workshop and download the PDF to give you instructions.

Introducing me

Hi I am Adrian Gould, lecturer in IT at Midland campus of Swan TAFE, Western Australia. I have been teaching IT for around 16 years and using computers and IT technology for nigh on 30 years.

During the semester I am aiming to add more skills to your arsenal and also to my own, so here goes…

Welcome to 2006, Semester 2!

Ady

PingBacks / Trackbacks

These are the way that you can tell if someone has referred to your story in their blog. Tackbacks are created by using the story URL as a link in an entry.

For example, http://c476.edublogs.org/2006/07/22/welcome-to-c476-semester-2-2006/trackback/ is the trackback URL to this story, so by adding this as a link, thus: Welcome to C476 [22/7/06] , you notify the blog entry’s owner that you have referred to their story / article.

When you create stories on your site that need to refer to another site, then make sure you create your links appropriately. It will help your blog grow in popularity and you never know who could end up reading it.

These blog entries should include the meeting minutes, meeting times, and other information such as what completed. This will enable you to work out where you are in the scheme of your work schedule.

By now you should have:

• scope of work
• contract (ready for signatures)
• initial concept drawings (sketches)

When you create an entry please create a comment that refers to your blog entry.

This is done by

1. publishing your entry
2. viewing the entry
3. right mouse clicking on the topic and copying the URL (web address)
4. go to bottom of this entry, and create a comment with your URL as an anchor (<a href=”…url…”>link text</a>)
5. publish the comment

I will then be notified that you have updated your progress reports.

Alternative method is to:

1. select the topic of this entry
2. right mouse clicking on the topic and copy the URL (web address)
3. create the blog entry on your blog, and refer to this entry and link to it with this URL as an anchor (<a href=”…url…”>link text</a>)
4. publish the blog entry

I will then be notified that you have updated your progress reports.

Ady

Technorati Tags: contracts, scope of work

This will make it easier for you, as I will be adding more links from non web design areas.

Ady

Technorati Tags: del.icio.us

If you want to write about something that is on this blog, then include a pingback to the article, and then you will have a comment automatically entered into the blog.

Technorati Tags: trackback

Contracts are often complex and difficult to understand, but they all seem to have common areas to be included.

We have discovered a number of points that need to be included into a contract, they are:

1. they are legally binding
2. disclaimer on site use
3. payment details
4. copyright statement
5. services to be performed by contractor
6. general provisions
7. restrictions
8. dealing with client delays
9. dealing with contractor delays (your own)
10. clients get limited ownership
11. milestones and project completion
12. obligations

and the second group of examples includes:

1. maintenance and technical support
2. code re-use
3. Scope of work and scope creep (feature creep)
4. Liability when things go wrong
5. intellectual property
6. domain names
7. content provision
8. insurance
9. confidentiality
10. advertising & linking to sites
11. search engine optimisation
12. limitations on liability

Any other areas, such as usability, accessibility requirements and so on may be added to this list.

As an exercise, you are now asked to investigate the areas listed, and submit comments on them as part of this blog. You can comment on other people’s entries as well, with an aim to improve our understanding of the subject.

You are to look at the ones numbered corresponding to the number you were given: 1. Di, 2. Samantha, 3. Peter, 4. Ben, 5. Naomi, 6. Rachel, 7. Erin, 8. Robyn, 9. Marc, 10. Alissa, 11. Brendan.

For each item you should write a short explanation of the subject (no more than 5 sentences) along with at least one reference to the subject material (site name, url and date visited).

If you locate sites with example contracts, then include these as a secondary comment.

Technorati Tags: contracts

They require a logo based around disability awareness. The logo should not be “disabled” but be more of a pointer to the support that disabled people can obtain.

The logo is eventually to be used at TAFE, if all goes well!

Let me know by email (put Disability Services Logo as the subject title), and I will forward your details to Amanda who made teh request.

DEADLINE for logo is 10 days (told ya it was urgent).

Ady

PS: you can easily add this sort of thing into your portfolio to show what you are able to do!

This tutorial aims to take you step by step through how to use the lightbox JavaScript system that was written by Lokesh Dhakar. The Lightbox is a way to present images onto the screen in a way similar to how they

are presented to a photographer who is using a light box to view negatives.

First you need to obtain the LightBox v2 system from the official

download site. This was version 2.02 when these notes were made.

Uncompress the files into a folder called LightBox2, so you can copy the required files.

In your web site create a folder called css, another called js and an images folder. In this sample site the folders are shown here:

In these folders you need to copy the following files:

Into the js folder:

• prototype.js
• lightbox.js
• effects.js
• scriptaculous.js

into the css folder:

• lightbox.css

into the images folder:

• loading.gif
• prevlabel.gif
• blank.gif
• next.gif
• closelabel.gif
• close.gif
• nextlabel.gif
• prev.gif

Now we can edit our page that has the picture(s) we wish to link to the lightbox.

The first stage is to make sure your images have two versions, a full

size and a thumbnail. I generally make the thumbnails in the range 64×64

pixels up to 128×128 pixels depending on the situation. If i had a picture

called photo001.jpg then the thumbnail woudl be something like picture001-thm.jpg.

Create a final folder called photos and put your photos, pictures and thumbnails

into this. This fourth folder is for any images you want to display that are not part of the general styling of the site.

Now we can insert the required javascript and css links into the document:

All these items go into the <head> … </head> area in the code.

The first bit you are familiar with (using CSS links), and that is:

• <link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />

This links to the css for the lightbox. It makes it only used on the screen.

Next we insert the javascript links. The system uses four files. The LightBox

file which contains the lightbox specific details, plus the files for

the effects (effects.js). The last two (lightbox.js and

scriptaculous.js) are specific “building blocks”

that provide a lot of extra functions that are beyond the scope of the

tutorial. They are required to get lightbox running.

these require links in the head area as did the css. The links look like

the following:

<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>

<script type="text/javascript" src="js/lightbox.js"></script>

Now the order is important.

Now we are ready.

The head section will look similar to this:

Any other CSS and JavaScript can be placed after line 8 in the sample

shown.

Now we can turn our attention to the actual images.

In the main body of your page, if you wish to use a lightbox effect on

any image then you do the following steps.

Insert the image as normal.

Insert the image’s thumbnail immidiately to the right of the image. For

example the code below shown the flow2a and flow2a-thm files inserted

intot he code:

<img src="photos/flow2a.jpg" alt="The

Flow" width="639" height="510" />

<img

src="photos/flow2a-thm.jpg" alt="The flow thumbnail" width="100" height="100" />

Now we modify the code to create our lightbox link:

We start by changing the first img src into an a href, removing the width

and height sections, plus the / before the >

<a href=”photos/flow2a.jpg” alt=”The

Flow”>

<img src=”photos/flow2a-thm.jpg” alt=”The flow thumbnail” width=”100″ height=”100″ />

Now change the alt to title and if you wish extend the title of the image:

<a href="photos/flow2a.jpg" title="The

Flow, and image ">

We now add the rel=”lightbox” attribute to the a href. This

is magic dust that makes the lightbox code work with the image.

<a href="photos/flow2a.jpg" title="The Flow, and

image " rel="lightbox" >

Now

add a </a> after the thumbnail:

<a href ="photos/flow2a.jpg" title="The Flow, and image " rel="lightbox" >

<img

src="photos/flow2a-thm.jpg" alt="The flow thumbnail" width="100" height="100" />

</a>

And there we have it. One photo lightbox.

If you do multiple images then you only need to repeat the steps for the

images.

Technorati Tags: lightbox, tutorial

This is fine, but what do we need to know to get a web site that looks presentable and professional?

What ideas besides how to create cross browser compatible accessible menus, can you think of?

Add your ideas to this story as a comment.

On that note see you on May 1st, 2006 for the second term.

A good example below shows the header and footer are fixed in position with a fixed width, centered layout. It comes from the 456 Berea Street article on Frames and Accessibility.

http://www.456bereastreet.com/lab/cssframes/

There are other variants of this including a very nicely done version at Sitepoint that includes a “ragged” / uneven edge that the text slides from beneath.

http://www.sitepoint.com/search/search.php?ps=10&q=fixed+border&submit=Search

Also full width, fluid layouts can use these headers if you so wish, and an example is shown at the CSS Play site.

http://www.cssplay.co.uk/layouts/fixit.html

the tutorial to show this is at: How to Create a Frames Layout with CSS.

The CSS play site also shows absolutely position content within the page. Nice little effect, but why we’d need it I am not sure (yet).

What can you see could be drawbacks of these methods? How much hacking is needed to get IE to behave correctly?

Do you know of any other examples for fixed header and/or footers?

Technorati Tags: CSS, Frames, Layout