RSS
 

Archive for July, 2009

Browser Testing: How to learn the best coding practices

20 Jul

Its easy to install a virtual machine on your laptop or desktop computer that will allow you to run other operating systems within your main os (ie: linux, windows running inside MacOS).

Virtual Machines:

Parallels
VMWare

The uncommon browsers may not be the largest part of your UserAgent slice in web stats, but don’t belittle the gain you will get in building accessible web sites and testing with them.

Common Browsers:

Internet Explorer 6, 7, and 8
Mozilla Firefox 2.x (recently released 3.0)
Opera
Safari 3.x
Shiira (new comer to Mac OS that strives for complete W3C compliance)

Unlikely Browsers:
Lynks (command line browser for the shell: linux, bsd, *nix)
Links2 ( some support for basic javascript and css, command line browser)
Gnopernicus ( open source screen reader available for Linux)

Its important that your clients have the ability to access your web site in a plain-text html fashion (no CSS or JavaScript) should their own personal needs require it.

You will learn a bit more about the importance of using semantic markup after looking at your site in Lynx for example. Using Gnopernicus is another great test to see how your web site holds up to text readers (otherwise known as “screen readers”). It is freely available on Linux.

There are a few handy tools for Firefox as well that will let you disable javascript, images, and css at the click of a button. You can also resize your window to see if it scales well down to minuscule screen sizes such as a mobile phone.

VN:F [1.9.3_1094]
Rating: 2.0/10 (1 vote cast)
VN:F [1.9.3_1094]
Rating: +1 (from 1 vote)
Retweet
 
Comments Off

Posted in UI Design

 

Docbook Customization Layer

13 Jul

I decided to use Docbook as the place to store user interface documentation for my employer’s web applications.

The UI documentation has the “customization layer” implemented as described in the Docbook XSL book available online.

The customization layer, generally speaking, is a way to override the default docbook xsl stylesheet rules and templates in favor of our own.

For example a docbook paragraph may be defined as:

sample.xml fragment:

<book>
	<section>
		<title>User Interface Help</title>
		<para>Content goes here...</para>
	</section>
</book>

The default docbook xsl template for “section” might produce something unwieldy like this:

<div class="section">
	<div class="title">
    		<font size="4">User Interface Help</font>
	</div>
	<div class="para">
		<p>Content goes here...</p>
	</div>
</div>

A customization layer for a docbook xsl template enables us to write our own templates producing cleaner markup after the xml -> html transformation:

<div class="help">
	<h2>User Interface Help</h2>
	<p>Content goes here...</p>
</div>

The UI docbook customization layer can be found here in trunk:

	/myproject/ui/source/xslt/docbook

Only customized docbook xslt files belong in the above directory.

The “default handling” for docbook XML tags are pulled from the file system’s location of docbook as installed on the operating system (and should *never* be modified because changes will not be distributed):

	/usr/share/xml/docbook/stylesheet/nwalsh

This location may be different based on your local environment, and is defined in a configuration file somewhere under /etc and picked up by the xml processor from the DOCUMENT type declaration in a given docbook file (ie: the user interface’s glossary.xml file).

VN:F [1.9.3_1094]
Rating: 10.0/10 (1 vote cast)
VN:F [1.9.3_1094]
Rating: +1 (from 1 vote)
Retweet
 
Comments Off

Posted in Development

 

Reviewing the HTML5 Specification

05 Jul

In case you’ve missed the recent news in the past few months, XHTML 2.0 has been dropped by the W3C…in favor of HTML5.

The best additions are the semantic tags describing divisional areas of a web page or layout: “header”, “footer”, “content”, “menu”.

I also like the “section” tag with its heading tags ( almost identical to Docbook semantics )…an obvious usage for web-based e-books or those who like to do “part x” series — like splitting up blog postings or news stories into more than one page.

Web page developers may get some mileage out of the “section” tag simply by breaking down the content area into sections like “Latest” and/or “Popular” as sections of the “content” area, for example.

The two tags “meter” and “progress” I find redundant and confusing to have both. “Progress” is much more suggestive and semantic than “meter” — in my opinion.

I suspect “meter” will likely end up being dropped, as it doesn’t have a well understood meaning or conjure up anything other than a speed-o-meter, parking meter (payment implied?) or gas gauge — at first glance anyway. Progress bars on the other hand, have been around for decades in software applications, since the first GUI download meter was introduced.

The confusion of introducing two new tags to mean basically the same thing reminds me of the two tags “acronym” and “abbr”. In the end nobody cared that much if it was misused by people who confused the difference between and acronym (CIA) and an abbreviation (ETC). One tag is enough to handle both cases semantically and they eventually kept the shorter tag “abbr”.

VN:F [1.9.3_1094]
Rating: 4.0/10 (1 vote cast)
VN:F [1.9.3_1094]
Rating: 0 (from 0 votes)
Retweet
 
Comments Off

Posted in UI Design