Cert IV in IT (Web Design)

Project progress reports (Wednesday 07 June 2006)

Please note that you should be completing your project progress reports via your own blogs.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 publishing your entry viewing the entry right mouse clicking on the topic and copying the URL (web address) go to bottom of this entry, and create a comment with your URL as an anchor (<a href=”…url…”>link text</a>) publish the comment I will then be notified that you have updated your progress reports.Alternative method is to:select the topic of this entry 3.

Web Accessibility and Usability Standards

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?… What could be ten key points from standards around the globe that should be applied to your web site design and implementation?

Assessment 2006 S1 – Site Design & Site Implementation

Please remember to email me as instructed in the assessment outline.This will be the only way to obtain the files required, as I will use the email to verify everyone has got the required files.Note – if you obtain them any other way then I’ll be asking why you did not follow some simple instructions.

CSS Tutorials

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.

Navigating a site

When using web sites we encounter a large number of types of navigation methods. These include:

• Lists
• Breadcrumbs
• Tabs
• Drop downs
• Multi level tabs (usually horizontal tabs with a submenu)
• Hierarchical, and
• Pagination

This is not all the list as Ben Hunt shows on his pages about navigation models.

Problem: Identify two examples for each type of navigation and explain (in one or two sentences) why you believe they are that type of navigation model.

For example:

Could be a tabbed menu, or a horizontal top bar. This is because the menu contains a list of items across the page. The items are highlighted when the mouse rolls over. The current “area” is highlighted by an underline.

is most probably a list of contents. This is because there is a list of items that may be accessed by clicking on the links. Visited and active links are also highlighted.

Both these navigation types were displayed on the site “465 Berea Street” [visited: 07/03/2006]

What sites have you found and what navigation types?

Colour links

In class today we looked at resources for colour harmony…. Problem – What sites do we have on colour theory?

What do we know about… CSS?

What is the order of precedence (highest to lowest), when using all three types of Cascading Style Sheets (CSS) styles in a document?… Write the CSS rule that sets the margins on the body of a web page to zero.

What do we know about… Standards?

What should you do when documenting your code (XHTML, CSS, or other)?… Why should you be familiar with the Australian Computer Society Code Of Ethics?

What do we know about… Javascript?

What is another name for a collection of JavaScript statements that are executed only when called?… What events are attributes of a <body> tag and available for 4.0 or higher version browsers?

What do we know about… Information Architecture?

What does IA refer to? What is an affinity diagram?