Rich's Wonderblog

Session 9: What I have learnt about XSLT

richbrennan — Tue, 28 Nov 2006 21:28:53 +0000

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.

Activity 803: Applying additional styles to XML

richbrennan — Mon, 20 Nov 2006 20:43:40 +0000

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.

Activity 802: Making links with XML

richbrennan — Mon, 20 Nov 2006 20:18:09 +0000

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.

Activity 801: My XML web page

richbrennan — Mon, 20 Nov 2006 19:24:34 +0000

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).

Activity 702: Completing the XML workbook

richbrennan — Mon, 13 Nov 2006 20:34:49 +0000

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.

Activity 701 :Making CSS Lists

richbrennan — Mon, 13 Nov 2006 19:03:24 +0000

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 .

Activity 602: Details of my assignment

richbrennan — Mon, 13 Nov 2006 10:43:46 +0000

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

My multiple column web page

richbrennan — Wed, 25 Oct 2006 09:15:34 +0000

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.

Using different types of positioning

richbrennan — Tue, 24 Oct 2006 20:45:32 +0000

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.

Building a usable/accessible web site

richbrennan — Tue, 24 Oct 2006 16:48:36 +0000

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.