Cert IV in IT (Web Design) » Design

Logo design needed (URGENT)

Ady — Tue, 16 May 2006 07:39:33 +0000

I have been asked if anyone would like to design a quick logo for a group of management students.

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!

Creating a Lightbox for your images

Ady — Wed, 19 Apr 2006 02:30:21 +0000

How to use the LightBox version 2.

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 … area in the code.

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

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:

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:

Flow" width="639" height="510" /> 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 >

Flow”>

Now change the alt to title and if you wish extend the title of the 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.

Now

add a after the thumbnail:

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

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

What do we need to learn?

Ady — Wed, 12 Apr 2006 08:52:27 +0000

The break between the two terms is here, and we’ve achived a fairly good look at CSS, navigation concepts, XHTML, information architechture, and testing.

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.

CSS, Frames and usability

Ady — Wed, 12 Apr 2006 06:55:54 +0000

Creating frames of information is possible in CSS, but not quite the same way that you may be familiar with FRAMES in HTML.

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

Centering blocks

Ady — Tue, 11 Apr 2006 07:39:53 +0000

a quick pointer to centering blocks was written last year and is shown at: http://c476.edublogs.org/2005/11/15/css-hints-centering-blocks/

Testing web sites

Ady — Tue, 11 Apr 2006 06:44:01 +0000

Site testing can be overlooked easily, but it is a vital part of the process of design and development of any web site.

What do you need to test and how do you test the site?

What criteria do you place against the tests to say that the site has reached the required level of “satisfaction”?

As a class, Ben, Raylene, Robyn, Marc, Brendan, Alyssa and Sam came up with the following areas for testing to be performed within the site:

Link checks (on site, off site and eMail)
Speed
Search engine placement & optimisation
Accessibility
Images
Multimedia
Audience
Accuracy
Readability
Page size & browser compatbility
Hits & other data

These items all have areas to be checked against. They include such things as “meta data”, “size”, “readability index” and “performance under load”.

What are your thoughts on what criteria should be placed on the testing for each area, and how can you test them?

Are there any ways to automate this testing (for example a links tester to check if links are valid)?

How should you document the results of your tests?

What ideas do you have?

[Remember to use the comments option and to put all your reference web site titles and hyperlinks into your answer.]

Technorati Tags: accessibility, search engine optimisation, speed, testing

Web Accessibility and Usability Standards

Ady — Tue, 21 Mar 2006 05:53:27 +0000

Are there standards that we can apply to our web sites so that we have a site that is accessible to a broad range of users and usable by people with a wide range of skills and knowledge?

There are! Depending on where you are located those standards will vary from country to country and even state to state within a country.

Australia has commonwealth and state guidelines. The USA has government standards, as do New Zealand, the UK, the European Community and others. Then there is also the W3C and its standards.

What could be ten key points from standards around the globe that should be applied to your web site design and implementation?

Tutorial – Albino black sheep – CSS Live Design

Ady — Sun, 12 Mar 2006 12:27:33 +0000

OK, please follow this tutorial through and you will be surprised what you will see from the code and examples.

Albino Black Sheep – CSS Live Design

Also useful will be the HTML and XHTML tutorial. Then there is also a CSS & Fonts tutorial to help you, and finally a CSS Backgrounds tutorial.

Ady

Further Links – CSS and more

Ady — Thu, 09 Mar 2006 08:10:35 +0000

CSS Tutorials

Ady — Thu, 09 Mar 2006 05:57:44 +0000

After being asked about how do floats work, I found a series of very good tutorials on floats and other concepts that are very important in CSS. You are recommended, no let me make that required to read if you are having problems.

I suggest you look at them in the order I have given them, so that the content builds up and you become familiar with the techniques involved.

Selectutorial at maxdesign shows the various ways to use selectors in CSS.

Listutorial investigates the use of CSS and lists.

Floatutorial is simple superb and shows you basics through to more advanced concepts.

Building a page template in CSS shows the steps in creating a web page template from the starting mock up to the finished product. Especially useful for the “personas plus” development you are undertaking.

From tables to full CSS shows a method of converting a tables based site layout to use CSS.

Basic web standards workshop shows you the basics of web standards and their use. There are seven parts to the workshop, covering content that includes: Web Standards, What are Web Standards about, and the ideal page structure. (X)HTML and the XHTML dilemma. Semantic markup. Accessibility and why we should bother with it. An introduction to CSS, including why use CSS to separate content from presentation, grouping selectors, shorthand rules, selectors, inheritance and the cascade. Floats and their use including basic float rules, is width required on floats, and floating multiple images to right edge. CSS issues and bugs including margin collapse, trapping margins and IE and the box model to name but a few

Liquid layouts, the joy, pain and tears looks at some of the troubles and pitfalls associated with creating a liquid layout in CSS.

Page source order and accessibility is a presentation that covers one of the most fundamentally important aspects of accessible semantic web design.

CSS Image text wrap shows one way of achieving uneven image wrapping.

Read and use the information here to assist you in your work on the Personas Plus page you are developing.

Aside: a comprehensive HTML tutorial is also found at tizag.com where also you can find a CSS tutorial as well. Note that the HTML tutorial is really aimed at HTML 4 and not XHTML which is what you are required to use for this course.