Rich’s Wonderblog

I copied the example text and made a couple of changes to the header and footer. I can see where these extra bits fit in and how the font and colour changed, but am a bit unsure about the ‘node () |@*’ part.

I understood how the book list and anchor tags fit within the XSLT style sheet, and how they were created, although its getting a bit like programming, not one of my strong points.

The additional practise provided by the netskills booklet has helped me to understand some of the class material, whilst introducing some even more complicated stuff as well. Think I’ll probably go over it again sometime soon to help get to grips with it. Not sure if XSLT will make it into my assignment.

I duplicated the first XML page design and made a few changes, then did the same to the CSS to change some of the colours and move the navigation from the left to the right.

Despite the unfamilar options linking in XML can produce the same results as HTML using the same CSS techniques, making this a straighforward topic to learn.

Linking in XML using X-Link is a little more complicated than with HTML because of the number of mandatory options that need to be set, however like HTML should be straighforward once I’ve learnt the syntax.

Styling with CSS was easy enough, although I did put the navigation inside the text content at first so it didn’t work to begin with, although this was easy to diagnose. I used absolute positioning for the navigation and the text content, instead of a left margin.

What I’ve learnt:

• When I defined an XML tag called ‘title’, the CSS didn’t apply to it. I think this might have something to do with it being an HTML tag. I changed the tag name to ‘pagetitle’ and the style worked.
• I defined a tag called ‘firstline’ for the first line of each paragraph. This prevents the paragraph tags from containing mixed content (text and tags). This also allowed me to style the first line of each paragraph specifically.
• I found the process straightforward. I first wrote the XML, then built the styles up so that the page looks similar to the activity example, albeit with different colours. I think the similarity between XML and HTML and CSS for both makes it easy to understand (so far).

I finished the XML workbook during the lesson. I found it straighforward as it is quite simliar to HTML in that it uses tags that wrap around each other and/or content in order to differentiate them in some way. Styling XML with CSS was also straightforward because it is very similar to formating HTML . DTD’s take this further by imposing a pre-defined stucture to the document.

From this simple tutorial I can see that XML has the potential to be a powerful web language as it allows data to be defined on a web page in a way that reminds me of the way a database defines attributes.

Here is a link to the original list from the Listamatic web site:

http://richbrennan.pbwiki.com/f/csslists_before.htm

It is a horizontal list with red and grey background colours.

Here’s my new improved version:

 http://richbrennan.pbwiki.com/f/csslists_after.htm

In this simple example I changed the background colours to a brighter yellow and blue scheme and made the list horizontal .

From the work so far I have identified some potential users and characteristics for my assignment:

General User

• Usability – (applies to all users)
  
• Effective use of colour and type
• Consistent and effective navigation
• Accessible layout
• Images
• Can cope with varied colours and smaller type

User with Learning Difficulties

• Simple use of colour with effective contrast
• Consistent text based navigation
• Consistent page layout
• Small paragraphs, not too wide
• Limited use of browser plug-ins
• No small type or irregular fonts

Visually Impaired User

• Use colour as a visual aid not just presentational
• Use of alt text
• Text navigation
• Colours with suitable contrast
• No small type or irregular fonts
• Text version of any page audio
• Limited use of browser plug-ins, especially graphic ones
• Limited use of graphics

Print Layout

• Serif font, maybe Times New Roman
• A4 layout – size and margins
• Black on white colours
• Justified text
• Limit use of graphics
• Only print appropriate content, not navigation, page headers, footers

Here is a link to my CSS styled web page:

http://richbrennan.pbwiki.com/f/se5ac3_CSS_Page.html

It uses the same page design as for the activity “Building a usable/accessible web site”, however rather than using a table to produce the layout in mark-up it has been made using just CSS.

As before I believe that the colours are interesting whilst providing enough contrast for the site to be usable, and it allows for navigation to be present on all pages, thus providing a consistent and familiar view for the user.

UPDATE: I have made the width of the page percentage based rather than pixel based so it now resizes as the browser window is made smaller.

Here are my ‘experiments’ with different types of positioning:

http://richbrennan.pbwiki.com/f/Positioning.html

For the purposes of single page activities I’ve included the CSS in the html, so it can all be seen by viewing the source code.

The relative, absolute and fixed positioning examples don’t reveal much about the workings of the three methods, however I learnt about there differences whilst constructing the page.

The effect achieved by ‘floating’ div’s seven, eight and nine could also be obtained by making them ‘inline’ elements rather than floats. Interestingly the ‘boring old fixed positioning’ effect could also be achieved here by making the three floats ‘clear’, highlighting that in CSS there are often various ways to achieve the same end.

Here’s the link to my useable site:

http://richbrennan.pbwiki.com/f/se4pg0.html

I believe that the colours are interesting whilst providing enough contrast for the site to be usable. The navigation bars are both the same colour for consistency and links change colour when they are hovered over, and remain that colour on the page when clicked using the ‘menuhere’ concept. On pages one and two the banner provides a link back to the home page.