Has expertise ranging from
   managing the client's expectations,
   advising the art director on technical feasibility,
   and interpreting the work of the designer to expand on,
to
   creating a tailored web user interface that embraces the possibilites,
   and fits the limitations of the chosen CMS platform to suit the database application developers.

Has a style of work that is independent and exactingly strict to open standards, but best suited to working with a close-knit team and involved at all stages of a project.

Expertise

• Accessibility
• HTML5
• CSS3
• XHTML
• AJAX
• Object-oriented
• Javascript
• JSON
• CSS2
• DHTML
• jQuery
• DOM-scripting
• PHP
• C#
• Graceful degradation
• Progressive enhancement
• Microformats
• Cross-browser compatibility
• Open source
• Search-engine optimization
• Virtualization
• Web-services
• Apple Mac OS X
• Microsoft Windows
• iPhone
• Ubuntu Linux

Skills

Portfolio

A portfolio of commercial web development projects can be found at www.woollymittens.nl. The password to which is "adkiuck".

Employment History

Supershift, Delft, The Netherlands
January 2007 - Present, Full time.

Supershift is a web-development company that prides itself in its ability to offer a full-service for the planning, design, development and hosting of Internet applications.

Position: Lead Front-end Developer.

Responsibilities:

• Working with art directors and interaction designers to determine the feasibility of complex and attractive user interface design elements.
• Accommodating the requirements of the database application developers to tailor a web user interface specific to their needs.
• Developing the client-side functionality of asynchronous JavaScript and XML (AJAX) applications.
• Providing reference server functionality using both Visual C# .NET and PHP: Hypertext Pre-processor.
• Constructing the rich user-interface of the in-house intranet, CRM and CMS software "WIM".
• Building websites with a high level of search engine optimisation (SEO).
• Implementing DHTML techniques without negatively affecting a site's accessibility.
• Responsibility for the in-house C#/PHP/DHTML development frame-work.
• Publication of the open-source version of the in-house C#/PHP/DHTML development platform.
• In charge of implementing new programming techniques and development methods.
• Mentoring the development process of the junior developers.

Tam Tam, Delft, The Netherlands.
November 1998 - November 2006, Full time.

Tam Tam is among the top full‐service internet companies in The Netherlands. It provides e‐business and e‐communication solutions for internet, intranet and mobile use. Tam Tam's experience ranges across the fields of user interface design, application development, project management, hosting and maintenance services. As a Microsoft Gold Certified Partner, Tam Tam always works with the latest Microsoft technology.

Position: Web-developer.

Responsibilities:

• Analysing functional-designs and advising the project team on required features and their impact on development.
• Checking graphical designs for features that may pose accessibility and conversion problems.
• Providing estimates of development time for project managers.
• Realizing web-development templates in (X)HTML to the standards for interoperability and accessibility set by the World Wide Web Consortium (W3C).
• Conversion of graphical designs to functional templates using Cascading Stylesheets and JavaScript.
• Testing stability of the web-development templates across browsers and operating systems.
• Managing the quality of the implemented web-development templates by database application developers.
• Issuing reports of the evaluation of finished websites according to the Web Content Accessibility Guidelines (WCAG).
• Providing maintenance work on the VBScript and C# source-code of existing websites.

Woolly Mittens, Delft, The Netherlands.
March 2005 - Present, Freelance.

Woolly Mittens is a company under sole proprietorship that facilitates the outsourced construction of user-interfaces for internet applications. Stand-alone webpage templates are constructed, from graphical designs, for easy implementation into content management systems.

Position: Self-employed Freelance Web-developer.

Responsibilities:

• In charge of implementing programming techniques and development methods.
• Providing comprehensive time estimates for client projects.
• Managing a small business administration.
• Realizing web page templates to customer specifications.
• Scripting the interactive parts of user-interfaces.
• Providing support on the user-interface of client's projects.
• Maintaining a generic C#/PHP/JavaScript framework for rapid development.

Services employed by:

• Suburban Media, Delft
• Hedgeapple, Amsterdam
• PUURPXL, Utrecht
• 105, Rotterdam
• Ciezo, H.I Ambacht

More employment history is available.

Centric Managed ICT Services, Rotterdam, The Netherlands.
September 1997 - October 1998

Centric's Managed ICT Services offers a variety of services for the continued availability and support of office automation. Centric manages the complete ICT-support and helpdesk services, both off-site and on location.

Position: First and Second-line Technical Support Technician.

Responsibilities:

• Installation and maintenance of software, hardware and network infrastructure for an office environment's workstations, servers and AS400 mainframe terminals.

Services employed by:

• ING Investment Management, The Hague, The Netherlands.
• Dun & Bradstreet, Rotterdam, The Netherlands.

Illusions Multimedia, Rotterdam, The Netherlands.
September 1996 - September 1997, Full time.

Illusions Multimedia was a multimedia software development studio that specialised in multimedia applications to formulate hair colouring products for use in hairdressing salons.

Position: Multimedia Developer.

Responsibilities:

• Designing and developing multimedia presentations on CDi / CD-ROM and internet sites.

Delft University of Technology, Faculty of Chemistry and Material Science, Delft, The Netherlands.
September 1995 - June 1996, Full time.

Building upon its proven strength in Chemical Engineering, the Department of Organic Chemistry and Catalysis develops the science and technology of functional nanostructured systems, from molecules up to the design of products and processes.

Position: Trainee.

Responsibilities:

• Individual research in the possibilities for the synthesis of organic hydroperoxides and reaction speeds of metal catalyzed oxidation reactions. Supervised by Drs. H. E. B. Lempers. Department supervision by Prof. R. A. Sheldon.

Published as:

H. E. B. Lempers, M. J. van Crey, "Molybdenum Catalyzed Epoxidations of oct-1-ene and cyclohexene with organic hydroperoxides: steric effects of the alkyl substituents of the hydroperoxide on the reaction rate.", Recl. Trav. Chim. Pays-Bas. 115, 542-546 (1996).

Delfland District Water Control Board, Hoek van Holland, The Netherlands.
August 1994, Full time.

Delfland ensures an optimum quality of the surface water in its management region. This key task entails the purification of wastewater and the limiting of discharges into surface water wherever possible.

Position: Laboratory analyst.

Responsibilities:

• Providing chemical analysis of the input and output quality at the "Nieuwe Waterweg" sewage treatment plant in Hoek van Holland. UV-VIS Spectrophotometric analysis, Electrochemical PH measurements.

Education

Rotterdam University of Applied Science, Delft, The Netherlands.
1992 - 1996, 4 years, Full time.

Higher Laboratory Education - "Hoger Laboratorium Onderwijs" (HLO)
Degree: Bachelor of Applied Science (BASc) in Organic Chemistry.

Westland zuid, Vlaardingen, The Netherlands.
1987 - 1992, 5 years, Full time.

Higher General Continued Education - "Hoger Algemeen Voortgezet Onderwijs" (HAVO)
Secondary education diploma for the subjects: Dutch, English, Math, Physics, Chemistry, Economics and Law.

Courses & Trainings

Australian Computer Society (ACS).

Assessed to be suitable for migration under 2231-79 (C# Specialist) of the ASCO code.

International English Language Testing System (IELTS).

Overall band score of 8.0 on the "general training" test.

Dutch Institute for In-company Emergency Services (NIBHV).

Diploma for Basic First Aid and Fire-Fighting/Evacuation Training.

Bartiméus institute for accessibility, Zeist, The Netherlands.

Certificate of participation in the web-accessibility course.

References

Letters of reference are available upon request from the following employers:

Professional Memberships

With permission of all involved employers the ClassBehaviours C#/PHP/JavaScript framework remains in the author's control and is published under the GNU General Public License at:

• Google Code (http://code.google.com/p/classbehaviours/)
• Sourceforge (http://sourceforge.net/projects/classbehaviours/)

Projects

More descriptions of project roles are available.

1. Summary
2. Introduction
3. HTML
4. CSS
5. Javascript
6. AJAX
7. Web-services
8. Accessibility
9. Blogging Framework
10. Open Source
11. Conclusion

• Appendix A: Project Credentials
• Appendix B: References

1. Summary

In this document I use the "ClassBehaviours" project to illustrate my progress in: HTML, CSS, Javascript, Accessibility, XHTML, DOM, AJAX, Webservices, AIR, Open Source.

2. Introduction

What came to be known as "ClassBehaviours" is a development concept that has shaped itself over the years to the requirements of a rapidly developing internet. Its development bears witness to my progress as a web developer. I will explain this development through all the components that make up my "ClassBehaviours" framework.

3. HTML

Though the syntax hasn't changed much, the way HTML has developed in a decade is a major compliment to it's accessibility.

HTML 3 and the Early Days

My experience starts with hand-coding "HyperText Markup Language" (HTML) 3₀ websites for the browsers "Internet Explorer 3" and "Netscape 3". Without style-sheets this proved quite a laborious work, as repeating blocks of markup in nested tables distracted from the actual layout and design.

Still these skills are not entire obsolete today as a lack of compatibility makes HTML 3 the lowest common denominator between e-mail applications. News-letters are still frequently marked up as HTML 3. However, to save time I borrow heavily from HTML 4, those parts that are universal.

<img alt="" src="spacing.gif" width="599" height="16" border="0"/><br/>
<table border="0" cellspacing="0" cellpadding="0">
	<tr valign="top">
		<td>
			<table bgcolor="#f0f0f0" border="0" cellspacing="0" cellpadding="16">
				<tr>
					<td>
						<img alt="" src="spacing.gif" width="132" height="1" border="0"/><br/>
						<font face="Arial, Sans Serif" size="3" color="#999999">
							<b>Het CBS is:</b>
						</font>
						<br/><img alt="" src="spacing.gif" width="1" height="6" border="0"/><br/>
						<font face="Arial, Sans Serif" size="1" color="#000000">
							<b>2.345</b> werknemers<br/>
							<b>1.567</b> vrouwen<br/>
							<b>1.947.869</b> werknemers<br/>
						</font>
					

HTML 4

Version 4 of HTML₀ didn't change markup methods much at first. Legacy support for version 3 browsers forced an uncomfortable compromise between the newly supported "Cascading Style Sheets" (CSS) and inline formatting. Only after the market share for Internet Explorer 4 and Netscape 4, grew sufficiently large, it became apparent that a new level of efficiency was possible. Sites would still have to degrade gracefully₀, but the design could depend on CSS along for markup.

Unreliably and non-standard rendering in browsers still forced the layout of a site to be accomplished through tables, but at least the markup became readable enough to allow an uncluttered view on complex web application.

<table class="outerTable">
	<tr class="outerRow">
		<td class="outerCol">
			<table class="innerTable">
				<tr>
					<td class="header">
						<div class="headerContent">
							TOP STORIES
						</div>
					</td>
				</tr>
				<tr>
					<td class="summary">
						<div class="summaryContent">
							WINDHOOS TREFT DORPEN<br/>
							IN GRONINGEN
						</div>
					

The fifth generation of browsers again showed an improvement in the consistence of rendering, but vendor lock-in of Internet Explorer and a noticeable absence of a 5th Netscape₀ delayed further progress to Internet Explorer 6₀ and the start of the Mozilla Project₀.

Layouts based on nested tables were exchanged for the block-layout₀ achieved though the "div" tag and CSS markup. This fully separated the content from the design of the page.

<link rel="stylesheet" href="http://www.woollymittens.nl/styles/markup.css" type="text/css" media="all">
...
<div id="content">
	<div id="document">
		<div class="homeBanner">
			<a href="#">
				<img alt="Lorem ipsum" src="http://www.woollymittens.nl/images/banner_home.jpg">
			</a>
		</div>
		<div class="homeIntro">
			<h1><a id="toContent">Home-pagina</a></h1>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
				do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				Ut enim ad minim veniam, quis nostrud <a href="#">exercitation
				ullamco laboris nisi ut aliquip ex ea commodo consequat</a>.
			</p>
		</div>
					

This is where the HTML side of web development has generally got stuck. A particularly stubborn group of users remain loyal to their Internet Explorer 6 browsers. Slow corporate update cycles and people locked out of updates by their illegal Windows installations are the main cause for this slow down.

XHTML

XHTML 1.0₀ and 1.1₀ are a subset of HTML 4 , tidied up to allow formatting as proper XML. It is my standard of choice for rich user interfaces, because the strict rules forces a high level of interoperability between developers.

The later chapter on "Document Object Model" scripting will show adequate examples of this.

XHTML 2 and HTML 5

XHTML 2₀ is an expansion of XHTML, which itself is a very useful adaptation of HTML for use in XML webservices. The syntax is not expanded dramatically, like HTML 5₀, but the hierarchy and structure has certainly become more important. Development of the standard has been rather slow though and it remains to be seen if it will be adopted as a standard before HTML 5 and if the two can co-exist.

HTML 5 is an upcoming attempt at enriching the HTML markup language. New tags are added specifically for allowing more semantic₀ code. If properly implemented, this would make accessing and searching the internet a lot more efficient.

To experiment with the promise of more semantic code, I have implemented HTML 5's specification as pseudo-tags in several of my latest projects. A server application to translate between HTML 5 and HTML 4 might yet speed up the acceptance of this standard.

<section id="mainSection">
	<header id="mainHeader">
		<a href="http://www.woollymittens.nl/" id="headerLogo">
			<img alt="Win je eigen Foundation" src="http://www.woollymittens.nl/images/headerLogo.png"/>
		</a>
	</header>
	<section id="contentSection">
		<article id="contentArticle">
			<h1>Bekijk hier de inzendingen</h1>
			<time>2008 08 11</time>
			<p>Dummy tekst. Dit is een</p>
		</article>
	</section>
	<nav id="mainNav">
		<ul>
			<li>|<a href="#1">Inloggen</a></li>
			<li><a href="#1">Contact</a>|</li>
			<li><a href="#1">FAQ</a>|</li>
		</ul>
	</nav>
	<footer id="mainFooter">
		<p>copyright &copy; 2008</p>
	</footer>
</section>
					

The example fragment shows the semantic nature of the markup. The purpose of all the components in this example is immediately apparent and would certainly result in more relevant search results.

The "time" element of HTML 5 would have been useful to avoid the blunder of a six year old news article nearly bankrupting United Airlines₀ in a stunning example of the "self fulfilling prophecy".

"Six-Year-Old News Story Causes United Airlines Stock to Plummet"
http://blog.wired.com/27bstroke6/2008/09/six-year-old-st.html

To me this holds a greater promise than the cosmetics third party plugins like Microsoft Silverlight₀ and Adobe Flash₀ can provide in enriching the internet with meaningful and accessible content. Don't worry though, in later chapters I will demonstrate how properly scripted DHTML can provide all the cosmetics needed to make a website attractive.

Since all browsers except Internet Explorer have implemented support for the proposed standards in some form, I added an interesting comparison between the different new standards to my "ClassBehaviours" website at:
http://www.woollymittens.nl/portfolio/_template/xhtml/index.html.

4. CSS

Unlike the chapter on HTML, my experience in web-design predates style-sheets. Right from the start it was clear that this development would have a major impact on efficiency.

Fonts and Colours

Limited though it was at first, to colours and fonts, CSS 1₀ at least simplified the clutter of font-tags in HTML. Examples 1 and 2 above clearly show the difference in complexity.

CSS Layout

CSS 2₀ not only allowed for the separation of style and content, but also enabled layout to be implemented through a style-sheet.

#content {
	padding-right : 8px;
}
#document {
	float : right;
	width : 560px;
}
div.banner {
	clear : both;
	width : 560px;
	height : 110px;
	margin : 0px 0px 1em 0px;
}
div.margin {
	padding : 10px;
}
					

This method of applying layout to a site is the general way things are done today. As sites grow more complex though, it becomes apparent that an unstructured list of styles has serious draw-backs. Not seeing at a glance what style inherits what from other styles, through the structure of the document, leads to sites that cannot efficiently grow in complexity.

DOM Reflection

The method I developed and has proved useful to me for years, borrows techniques used by visual programming languages₀ like Visual C++ and Visual Basic. In those languages an application's Graphical User Interface (GUI) is constructed visually, but every element in the GUI becomes an addressable part of the source code.

I apply the same rules to a style-sheet. Every hierarchical node in the Document Object Model (DOM)₀ is represented in the style-sheet and indentations are used to imply inheritance. There's another major advantage to this. An empty but otherwise complete style-sheet may be generated automatically.

#relatedCallUs {}
	#relatedCallUs h2 {}
	#relatedCallUs p {
		margin : 0px 0px 1em 0px;
	}
	#relatedCallUs ul {
		margin : 0px 0px 1em 0px;
	}
		#relatedCallUs ul li {
			list-style-type : none;
		}
			#relatedCallUs ul li a {}
			#relatedCallUs ul li a:link,
			#relatedCallUs ul li a:visited {}
			#relatedCallUs ul li a:hover,
			#relatedCallUs ul li a:active {}
				#relatedCallUs ul li a img {
					margin : 0px 0px 8px 0px;
				}
					

The hierarchical structure in example 6 is quite apparent and no element is left out of the tree that develops.

Below is my recursive function that analyzes the document structure and generates and empty style-sheet for any given document.

this.getNodeClasses = function(objNode, intRecursion, oldPrefix, onlyChanges, simplified)
{
	var tagPrefix, idPrefix, classPrefix, newEntry, newSuffix;
	// for every recursion add one tab
	var strTabs = '';
	for(var intB=0; intB<=intRecursion; intB++) strTabs += '\t';
	// for every childnode
	var objChildNodes = objNode.childNodes;
	for(var intA=0; intA<objChildNodes.length; intA++){
		childNode = objChildNodes[intA];
		// reset prefixes
		tagPrefix 		= (childNode.nodeName.indexOf('#')<0) ? childNode.nodeName : '' ;
		idPrefix 		= (childNode.id) ? '#' + childNode.getAttribute('id') : '' ;
		classPrefix 	= (childNode.className) ? '.' + childNode.getAttribute('class') : '' ;
		typePrefix		= '' // (childNode.type) ? childNode.getAttribute('type') : '' ;
		newPrefix 		= '';
		newEntry		= '';
		newSuffix		= '';
		// construct prefixes
		if(tagPrefix!=''){
			tagPrefix 		= childNode.nodeName.toLowerCase();
			idPrefix 		= (!this.isClassBehaviours(idPrefix) && !this.isFormElement(tagPrefix)) ?
									idPrefix : '' ;
			classPrefix 	= classPrefix.replace(/^\s+|\s+$/g, '').replace(/ /g, '.') ;
			typePrefix		= (typePrefix!='') ? '[type=' + typePrefix + ']' : '' ;
			newPrefix 		= oldPrefix + ' ' + tagPrefix + typePrefix + idPrefix + classPrefix;
			newPrefix 		= (newPrefix.split('#').length>1 && simplified) ?
									'#' + newPrefix.split('#')[newPrefix.split('#').length-1] : newPrefix ;
			newEntry 		= strTabs + newPrefix + ' {}\n';
			newSuffix 		= (tagPrefix=='a') ?
									strTabs + newPrefix + ':link,\n'
									+ strTabs + newPrefix + ':visited {}\n'
									+ strTabs + newPrefix + ':hover,\n'
									+ strTabs + newPrefix + ':active {}\n' : '' ;
		}
		// add the new style-sheet entry
		if(!this.isInstyle-sheet(newEntry, onlyChanges)) this.style-sheet += newEntry + newSuffix;
		// recurse if it this node has childNodes
		if(objChildNodes[intA].childNodes.length>0)
			this.getNodeClasses(
				objChildNodes[intA], intRecursion+1, newPrefix, onlyChanges, simplified
			);
	}
}
					

I cannot emphasize enough how much time this little tool has saved me over the years.
A practical example can be found here:
http://www.woollymittens.nl/details.php?id=make-a-prototype-style-sheet

5. Javascript

As must have become apparent from the appearance of a script example in the CSS chapter, Javascript is a very important tool for me.

Inline Kludges

My Javascript experience started with the usual one-liner scripts for simple visual effects in the version 3 browsers. Understandably little remains to show for now, but the experience gained by implementing these simple scripts in Content Management Systems (CMS)₀ was instrumental in the development of smarter and more efficient scripts that would auto-configure instead of require requiring server-side rewriting.

The most notable script from the early days was a method to compensate for frame-sets and the difficulty in getting all frames to display the correct content at the same time.

//-- script that tells the menu frames what content to display --
var fcode = 'harabibi'
var curID = 0
var waitloop = 0

function syncFrames(setID){
	var retry=0;
   	curID = setID;

	if (left){
		// waits for the frame to load then sets the colour
	 	if (left.inits==1){left.setproperties(setID);}else{retry=1;}
	}else{retry=1;}

	if (bottom){
		// waits for the frame to load then sets the colour
		if (bottom.inits==1){bottom.setproperties(setID);}else{retry=1;}
	}else{retry=1;}

	if (menu){
		// waits for the frame to load then sets the colour
		if (menu.inits==1){menu.setproperties(setID);}else{retry=1;}
	}else{retry=1;}

	//this seriously doesn't need to be start-up more than once at a time
	if(retry == 1 && waitloop == 0){
		waitloop = 1;
		setTimeout('waitloop=0;syncFrames(curID)',2048);
	}
}
					

Luckily frame-sets were a dead end in browser development. The complexity of such synchronization scripts often caused maintenance problems through their complexity.

DOM Scripting

With frame-sets out of the way and the onset of XHTML, it was possible to concentrate on getting complete control of the document structure through script.

A "parent" script was still constructed to control all the user-interface elements, like the frame-set scripts before, but without frames to contend with the behaviour could be reliable as well as complex.

// main user interface  object
function UserInterface(){
	/* properties */
	this.canvas			=	new Canvas(document.getElementById('parallax'));
	this.posters		=	new Sprites(document.getElementById('covers'), 150);
	this.titles			=	new Sprites(document.getElementById('titles'), 50);
	this.content		=	new Display(document.getElementById('content'));
	this.navigation		=	new Navigation(document.getElementById('navigation'));
	this.controls		=	new Controls(document.getElementById('controls'));
	this.banner			=	new Banner(document.getElementById('banner'));
	this.interval		=	null;
	/* methods */
	this.startUp 		= 	function(){
								// hide the scrollbar
								document.body.parentNode.style.overflow = "hidden";
								// start up the modules
								this.posters.start(-2);
								this.titles.start(-1);
								this.content.start();
								this.meta();
								this.navigation.start();
								this.controls.start();
								this.interval = setInterval("userInterface.update()",25);
								this.deep();
								this.canvas.start();
								this.banner.update();
							}
	this.update		=	function(){
								this.posters.update();
								this.titles.update();
								this.content.update();
								this.navigation.update();
								this.canvas.update();
								this.banner.update();
							}
	...
}
					

The design of example 9 is modular, but still highly specific to and hand-coded for each site. Out of this grew the idea of again making a self configuring script for often used user-interface DHTML behaviours.

Object Oriented Framework

Creating a library of these common DHTML behaviours led me to develop "ClassBehaviours", which is my personal javascript framework. The underlying principle behind this script is that common user-interface elements share the same class-name in the style-sheet. The "ClassBehaviour" framework will parse the document for these class-names and apply the event-handlers accordingly.

// scan the document object model for target classNames
this.parseNode = function(node)
{
	// for all childnodes of the given node
	var allNodes = node.getElementsByTagName("*");
	for(var a=0; a<allNodes.length; a++){
		// get its className
		nodeClass = ' ' + allNodes[a].className + ' ';
		// if this node has a className
		if(nodeClass!=null){
			// for all class behaviours
			for(var b=0; b<classBehaviours.handlers.index.length; b++){
				// if the behaviour name is in the className tested node, apply its behaviour
				if(nodeClass.indexOf(' ' + classBehaviours.handlers.index[b].name + ' ')>-1)
					classBehaviours.handlers.index[b].start(allNodes[a]);
			}
		}
	}
}
					

This method allows a junior developer, or a developer from a different discipline, to do as much or as little scripting as he or she is comfortable with. In the simplest application, all DHTML is applied through the use of pre-defined class-names. More confident developers, however, can freely add new modules that build upon the existing functionality.

The following people have used and contributed to the "ClassBehaviour" project directly. As lead developer, my responsibility is to help implement, debug and re-integrate their developments in the trunk of the project.

• Frank van Rooijen (Lead Application developer at Tam Tam) developed serve-side modifications to the Microsoft CMS server for "ClassBehaviours" in most of Tam Tam's projects.
• Xander Bindt (Web Developer at Tam Tam) implemented "ClassBehaviours" in relevant project font-ends and provided Flash-related feed-back.
• Erwin van Dijk (Web Developer at Supershift) implements "ClassBehaviours" user interfaces in his projects for Supershift to guarantee interoperability between his and my projects there.
• Marc Molenwijk (Technical Director at Supershift) creates custom behaviour functions to let "ClassBehaviours" interact with the content management system of his personal design.

My "ClassBehaviours" framework is continually growing, as customized solutions for projects are integrated back into the collection for later use. Currently there are over 50 distinct behaviours, covering anything from blinking text to complex AJAX Chat functionality.

// blinks a node between the classes "blinkon" and "blinkoff" 
classBehaviours.handlers.blink = {
   // properties
   name:          'blink',
   nodes:         new Array(),
   index:         -1,
   interval:      null,
   // methods
   start:         function(node){
                     // set the starting class, if not present
                     if(node.className.indexOf('blinkon')<0) node.className += " blinkon";
                     // make new blink entry and fill it with the node's settings
                     blinkObject = new classBehaviours.handlers.blink.BlinkObject;
                     blinkObject.node = node;
                     blinkObject.jiffy = parseInt(
                     	classBehaviours.utilities.getClassParameter(node, 'jiffy', '1')
                     );
                     this.nodes[this.nodes.length] = blinkObject;
                     // start blink loop only the first time
                     if(this.index<0){
                     	this.index++;
                     	this.interval = setInterval("classBehaviours.handlers.blink.loop()", 512);
                     }
                  },
   // events
   loop:         function(blinkIndex){
                     var blk = classBehaviours.handlers.blink;
                     // count this update
                     blk.index = (blk.index>100000) ? 0 : blk.index + 1 ;
                     // for all blink objects in the list
                     for(var a=0; a<blk.nodes.length; a++)
                        // check if this count is the right jiffy
                        if(blk.index%blk.nodes[a].jiffy==0)
                           // toggle the blink class
                           blk.nodes[a].node.className = (blk.nodes[a].node.className.indexOf('blinkoff')>-1) ?
                              blk.nodes[a].node.className.replace('blinkoff','blinkon') :
                              blk.nodes[a].node.className.replace('blinkon','blinkoff') ;
                  }
}
   classBehaviours.handlers.blink.BlinkObject = function(){
      this.node = null;
      this.jiffy = 1;
   }
					

I keep above example in the library to have an easy way of explaining a single behaviour. The "start" function is called by the main parsing script of example 10, if it finds an element with the class-name "blink". The cosmetic class-name "blinkon" is verified and the "loop" function is launched to do a string replace on this class-name at intervals.

.blink.blinkon {
	visibility : hidden;
}
.blink.blinkoff {
	visibility : visible;
}
					

If the style-sheet contains references to "blinkon" and "blinkoff", like example 12, any element with the class-name blink will alternate between being visible and being hidden ever second, thus blinking.

For working examples and documentation of all available behaviours, please consult: http://www.woollymittens.nl/

6. AJAX

AJAX is an abbreviation of "Asynchronous Javascript and XML"₀ and is a method for retrieving extra (XML) content from a server without reloading the page. This gives web-applications a more responsive and uninterrupted feel, like the user is used to from applications outside their browser. AJAX is an often used tool in the Web 2.0₀ boom.

As mentioned before, "ClassBehaviours", through time has expanded to contain all useful scripts developed en re-used in over a 100 projects over the best part of a decade. A notable expansion is the development of an AJAX framework to complement behaviours that require server interaction.

this.handleQueue = function()
{
	queue = classBehaviours.ajax.queue;
	// if the first item in the queue is a completed request
	if(queue.length>0){
		if(queue[0].ready==4 /*&& ajax.queue[0].status==200*/){
			// remove the completed request
			queue.reverse();
			queue.length = queue.length - 1;
			queue.reverse();
		}
	}
	// if the first item in the queue isn't allready in progress
	if(queue.length>0){
		if(!(queue[0].ready<4 && queue[0].ready!=null)){
			this.makeRequest(queue[0]);
		}
	}
}
this.progress = function()
{
	queued = classBehaviours.ajax.queue[0];
	// remember the readyState
	queued.ready = queued.request.readyState;
	// only if req shows "complete"
	if(queued.request.readyState == 4){
		// remember the status
		queued.status = queued.request.status;
		// only if "OK"
		if(queued.request.status == 200 || queued.request.status == 304){
			// update optional progress indicator code
			if(queued.doOnProgress) queued.doOnProgress(1, queued.referObject);
			// prepare the document
			queued.document = queued.request.responseXML;
			queued.text = queued.request.responseText;
			// trigger the load event
			if(queued.doOnLoad) queued.doOnLoad(queued.document, queued.referObject, queued.text);
			// request the next item in the queue to be handled
			classBehaviours.ajax.handleQueue();
		}else{
			// update optional progress indicator code
			if(queued.doOnProgress) queued.doOnProgress(-1, queued.referObject, queued.request.status);
		}
	}else{
		// update optional progress indicator code
		if(queued.doOnProgress) queued.doOnProgress(queued.request.readyState/4, queued.referObject, 200);
	}
	// return the status if desired
	return queued.request.readyState;
}
					

I programmed this myself, because I insisted on a queueing mechanism for calls. Something not present in many third party AJAX toolkits, but absolutely vital for a modular framework like "ClassBehavours". Even if multiple behaviours request a server interaction at the same time, nothing is lost and everything is handled from a neat queue.

Many behaviours present in "ClassBehaviours" use some sort of AJAX functionality. The most notable is an entire multiplayer strategy game "Tank-o-Furry"₀

Stretching the concept of "ClassBehaviours" to its limits, my tank game proved the stability of the framework, while its ease of use managed to reduce the development time to just three weeks.

7. Web-services

AJAX applications require an XML web-service₀ to run on the server and because from my primary focus on client-side scripting, came the necessity for a simple universal web-service application.

C#

I developed a universal web-service primarily to give myself a server-side application to test prototype AJAX applications against, but the code has proved very useful in several complete applications.

XML is used as the database, because that is easiest to back-up and transfer to other platforms. The minimum requirement was to facilitate "store", "retrieve" and "move" scenarios, so the web-service accepts two sets of mutations to the nodes in the XML database in one "POST" or "GET" call.

	// Some things we do not allow
	if(sXmlFileName!="content" && && sXmlFileName!="rss"){

		// LOADING THE XML FILE
		// request the xml file
		WebRequest myXmlRequest = HttpWebRequest.Create(sDomain + "xml/"
											+ sXmlFileName + ".xml");
		WebResponse myXmlResponse = myXmlRequest.GetResponse();
		// recieve the xml file
		Stream receiveStream = myXmlResponse.GetResponseStream();
		StreamReader readStream = new StreamReader(receiveStream, System.Text.Encoding.UTF8);
		string xml = readStream.ReadToEnd();
		// load the xml file
		XmlDocument myXmlDocument = new XmlDocument();
		myXmlDocument.LoadXml(xml);

		// UPDATE THE XML NODES WITH THE NEW INPUT
		// if the index is a negative number, 
		// clone the prototype node to the end of the file and use that
		if(iParentNodeIndexA<0)
		{
			XmlNode newNode = myXmlDocument.GetElementsByTagName(sParentNodeName)[0].CloneNode(true);
			myXmlDocument.GetElementsByTagName(sRootNodeName)[0].AppendChild(newNode);
			iParentNodeIndexA = myXmlDocument.GetElementsByTagName(sParentNodeName).Count - 1;
		}
		// for the target node, fill the childnodes with the name value pairs
		for(int a=0; a<aChildNodeValuesA.Length-1; a+=2)
		{
			// set the xml name/value pair
			myXmlDocument.GetElementsByTagName(sParentNodeName)[iParentNodeIndexA].
				SelectSingleNode(aChildNodeValuesA[a]).InnerText = aChildNodeValuesA[a+1];
		}
...
		// CLOSING THE XML FILE
		myXmlResponse.Close();

		// WRITING THE XML FILE
		// write the xml-file to disk
		XmlTextWriter writer = new XmlTextWriter(Server.MapPath("http://www.woollymittens.nl/xml/"
										+ sXmlFileName + ".xml"), System.Text.Encoding.UTF8);
		writer.Formatting = Formatting.Indented;
		myXmlDocument.WriteTo(writer);
		writer.Close();

		// WRITING THE XML OUTPUT
		Response.Clear();
		Response.ContentType = "text/xml";
		XmlTextWriter xmlTextWriter = new XmlTextWriter(Response.OutputStream, System.Text.Encoding.UTF8);
		xmlTextWriter.Formatting = Formatting.Indented;
		myXmlDocument.WriteTo(xmlTextWriter);
		xmlTextWriter.Close();
		Response.End();
	}
					

This universal web-service allows me to make AJAX applications that can store and retrieve their data from a generic XML file on the server. The realtime AJAX chat application in the "ClassBehaviours" framework is an example of this, but the system is versatile enough to also support the strategy game of example 14.

PHP

Since the DHTML in "ClassBehaviour" framework is not bound to any specific platform, it would not do to have the web-service constrained to C# and the .NET framework. The PHP version I added is completely interchangeable.

<?php
	// FUNCTIONS
	function getReplies() {
		$sXmlFileName = @$_REQUEST['xml'];
...
		// Some things we do not allow
		if ($sXmlFileName!=="content" && $sXmlFileName!=="rss") {

			// LOADING THE XML FILE	
			$xmlDoc = new DOMDocument();
			$xmlDoc->load('http://www.woollymittens.nl/xml/' . $sXmlFileName . '.xml');

			// UPDATE THE XML NODES WITH THE NEW INPUT
			// if the index is a negative number, 
			// clone the prototype node to the end of the file and use that
			if ($iParentNodeIndexA<0) {
				$newNode = $xmlDoc->getElementsByTagName($sParentNodeName)->item(0)->cloneNode(true);
				$xmlDoc->getElementsByTagName($sRootNodeName)->item(0)->appendChild($newNode);
				$iParentNodeIndexA = $xmlDoc->getElementsByTagName($sParentNodeName)->length - 1;
			}
			// for the target node, fill the childnodes with the name value pairs
			$count = count($aChildNodeValuesA) - 1;
			for ($counter = 0; $counter < $count; $counter += 2) {
				$xmlDoc->getElementsByTagName($sParentNodeName)->item($iParentNodeIndexA)->
						getElementsByTagName($aChildNodeValuesA[$counter])->
								item(0)->nodeValue = $aChildNodeValuesA[$counter+1];
			}
...

			// WRITING THE XML FILE
			$xmlDoc->save('http://www.woollymittens.nl/xml/' . $sXmlFileName . '.xml');

			// RETURN THE XML OUTPUT
			$xmlDocSave = $xmlDoc->saveXML();
			return $xmlDocSave;
		}
...
	}
?>
					

Thanks to having both a C# and a PHP version of my universal web-service, simultaneous AJAX development is possible on Windows, Mac OS X and Linux.

8. Accessibility

One thing that is easily overlooked in the trend towards Web 2.0 style applications and AJAX in particular is accessibility. An application should not be completely dependent on Javascript or Flash.

Certificate of Accessibility

After completing a course on accessibility at the The Bartiméus Accessibility Foundation₀, not only could I judge existing sites according to the government's₀ and the W3C's₀ accessibility standards, I could also use this knowledge to ensure the accessibility of all the projects that followed.

Wether it is a project requirement or not, all projects using the "ClassBehaviour" framework contain basic accessibility features such as scalable fonts, table-free layout and compatibility with screen-reader software. Such features are best included as standard, since adapting code for accessibility afterwards is very difficult.

<dl class="harmonicaList">
	<dt class="toggleNextNode link">Lorem ipsum dolor sit amet</dt>
	<dd class="hideThisNode">
		<div class="border">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
			incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
			exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
			irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
			nulla pariatur.
		</div>
	</dd>
	<dt class="toggleNextNode link">Ut enim ad minim veniam</dt>
	<dd class="hideThisNode">
		<div class="border">
			Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
			mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit
			voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
			ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
		</div>
	</dd>
</dl>
					

Example 16 is a Frequently Asked Questions (FAQ) list that hides and reveals sections using DHTML. To ensure accessibility the list is made up of semantic "Definition List" elements, so a screen-reader can actually tell that this is a list of definitions. To make sure users without javascript still have full access, the entire list is displayed fully opened by default and only later obscured using Javascript.

Hijax

Hijax₀ is a name coined by Jeremy Keith on his web-design blog "DOM Scripting", that describes a technique where a fully server-side application is enhanced with DHTML instead of replaced. My AJAX applications embrace this concept fully, but this involves a tight cooperation between the front-end and the back-end developer.

I used a variation on this technique in an AJAX social healthcare premium calculator for the Dutch Ministry of Health, Welfare and Sport, shown in example 17. Although AJAX was to be used, accessibility was the first priority. All client-side functions were duplicated server-side so the application degraded gracefully to all browsers and screen-readers. Example 18 and 19 are show the duality of the application.

this.toCalculation = function()
{
	// store the active page
	calculation.section = 'calculation';
	// figure out the value limits on the sliders
	calculation.setLimits();
	// is there a relevant second partner?
	hasNoPartner = (document.getElementById('isSingle').checked ||
						document.getElementById('hasSingleIncome').checked ||
						document.getElementById('isPlus65Single').checked);
...
	// hide any cell from the second partner if irrelevant
	allNodes = document.getElementsByTagName("*");
	for(var a=0; a// if it's part of the second partner's column
		if(allNodes[a].className.indexOf('colPartner1')>-1){
			// restore the partner cells if a partner is involved
			allNodes[a].style.display = (hasNoPartner || calculation.smallMode) ? 'none' :
													classBehaviour.getVisibleState(allNodes[a]) ;
		}
...
	}
	// hide the application(s)
	document.getElementById('constants').style.display = 'none';
	document.getElementById('serverStatus').style.display = 'none';
	document.getElementById('disclaimer').style.display = 'none';
	// show the calculation
	document.getElementById('calculation').style.display = 'block';
	// order the start values to be calculated
	calculation.server.send();
	// cancel the submit
	return false;
}
					

<asp:PlaceHolder ID="plhCanvas" Runat="server">
<div id="canvas">
	<asp:PlaceHolder ID="plhConstants" Runat="server">
	<div id="constants">
		<h1>Rekenhulp</h1>
		<asp:PlaceHolder ID="plhchosePlus65" Runat="server">
		<div id="chosePlus65" class="choiceRow step1">
			<h2><label for="isPlus65Yes">Bent u 65 jaar of ouder?</label></h2>
			<ul class="radioLine">
				<li>
					<asp:RadioButton ID="isPlus65Yes" Runat="server" CssClass="radio" G
							roupname="isPlus65" value="true" />
					<label for="isPlus65Yes">Ja</label>
				</li>
				<li>
					<asp:RadioButton ID="isPlus65No" Runat="server" CssClass="radio"
							Groupname="isPlus65" value="false" />
					<label for="isPlus65No">Nee</label>
				</li>
			</ul>
		</div>
		</asp:PlaceHolder>
					

9. Blogging Framework

With several developers using the "ClassBehaviours" framework and still more providing support for sites developed with it, an online source for examples, documentation and discussion was required. I developed a blogging engine myself to avoid mixing third party tools with my own and causing licensing problems later on.

C#

The C# version of my blogging engine uses an RSS feed₀ to store all the blog posts. Doubling as a database, the RSS syndication ensures easily portable code.

protected void writeSummaries(string sCategory, string sId, XmlDocument myDocument)
{
	// WRITING THE GROUPED CONTENTS
	// make a new data-table for the required data
	DataTable dt = new DataTable();
	dt.Columns.Add("title", typeof(string));
	dt.Columns.Add("link", typeof(string));
	dt.Columns.Add("description", typeof(string));
	dt.Columns.Add("author", typeof(string));
	dt.Columns.Add("category", typeof(string));
	dt.Columns.Add("pubDate", typeof(string));
	dt.Columns.Add("matchingId", typeof(string));
	// get all item nodes
	XmlNodeList xnl = myDocument.GetElementsByTagName("item");
	// for all item nodes
	for (int a = 0; a < xnl.Count; a++) // foreach (XmlNode xn in xnl)
	{
		XmlNode xn = xnl[a];
		// is this a different item with the same category
		if (xn.ChildNodes.Item(4).InnerText.IndexOf(sCategory) > -1)
		{
			// make a new row in the data table
			DataRow dr = dt.NewRow();
			// fill it with the requited data
			dr["title"] = xn.ChildNodes[0].InnerText;
			dr["link"] = xn.ChildNodes[1].InnerText;
			dr["description"] = xn.ChildNodes[2].InnerText.Split('~')[0];
			dr["author"] = xn.ChildNodes[3].InnerText;
			dr["category"] = xn.ChildNodes[4].InnerText;
			dr["pubDate"] = xn.ChildNodes[5].InnerText.Replace(":00 +0100", "");
			dr["matchingId"] = (xn.ChildNodes.Item(1).InnerText.IndexOf(sId) > -1) ? "active" : "";
			// and add it to the table
			dt.Rows.Add(dr);
		}
	}
	// bind the data to the repeater
	rptSummaries.DataSource = dt;
	rptSummaries.DataBind();
}
					

The DOM syntax is used instead of serialization to allow variation in the XML source to be adopted rapidly.

Using a second RSS feed as a data-source for replies has made it very simple to add forum functionality to the different articles. This also means that discussions are automatically syndicated to those whom wish to follow them.

protected void addReply()
{
	// IF THE CAPTCHA WAS USED
	if (Request.Form["tbxPassword"] == "bunny" &&
				Request.Form["tbxDescription"] != "" && Request.Form["tbxAuthor"] != "")
	{
		// LOADING THE COMMENTS XML FILE
		// request the xml file
		WebRequest myReplyRequest = HttpWebRequest.Create(sDomain + "xml/rssChat.xml");
		WebResponse myReplyResponse = myReplyRequest.GetResponse();
		// recieve the xml file
		Stream receiveStream = myReplyResponse.GetResponseStream();
		StreamReader readStream = new StreamReader(receiveStream, System.Text.Encoding.UTF8);
		string xml = readStream.ReadToEnd();
		// load the xml file
		XmlDocument myReplyDocument = new XmlDocument();
		myReplyDocument.LoadXml(xml);

		// ADDING THE FORM DATA TO THE COMMENTS XML FILE
		// make a new item tag from an old one
		XmlNode newNode = myReplyDocument.GetElementsByTagName("item")[0].CloneNode(true);
		// fill the childnodes of the item
		newNode.ChildNodes[0].InnerText = "this";
		newNode.ChildNodes[1].InnerText = Request.Url.ToString();
		newNode.ChildNodes[2].InnerText = Request.Form["tbxDescription"];
		newNode.ChildNodes[3].InnerText = Request.Form["tbxAuthor"];
		newNode.ChildNodes[4].InnerText = "replies";
		newNode.ChildNodes[5].InnerText = DateTime.Now.ToString("ddd, dd MMM yyyy hh:mm:ss");
		// add the new item tag to the document
		myReplyDocument.GetElementsByTagName("channel")[0].AppendChild(newNode);

		// CLOSING THE COMMENTS XML FILE
		myReplyResponse.Close();

		// WRITING THE COMMENTS XML FILE
		// write the xml-file to disk
		XmlTextWriter writer = new XmlTextWriter(Server.MapPath("http://www.woollymittens.nl/xml/rssChat.xml"),
											System.Text.Encoding.UTF8);
		writer.Formatting = Formatting.Indented;
		myReplyDocument.WriteTo(writer);
		writer.Close();
	}
}
					

The "captcha" this funtion refers to is always the same, but it fools spammers admirably. I've even found back SQL injections in the replies log, ineffective of course since the functionality is based on the XML DOM.

PHP

Exactly the same functionality was replicated in PHP to keep the blog free of hosting restrictions as much as possible.

function getSummaries($doc, $filter, $id) {
	$result = array();

	$items = $doc->getElementsByTagName('item');
	foreach ($items as $item) {
		if (strpos($item->getElementsByTagName('category')->
				item(0)->textContent, $filter) !== false) {
			$row = array();
			$row["title"]	 	= $item->getElementsByTagName('title')->item(0)->textContent;
			$row["link"]		= $item->getElementsByTagName('link')->item(0)->textContent;
			$description 		= $item->getElementsByTagName('description')->item(0)->textContent;
			$description 		= explode("~", $description, 2);
			$row["description"]	= $description[0];
			$row["author"]	 	= $item->getElementsByTagName('author')->item(0)->textContent;
			$row["category"]	= $item->getElementsByTagName('category')->item(0)->textContent;
			$row["pubDate"]	 	= $item->getElementsByTagName('pubDate')->item(0)->textContent;
			$row["isActive"]	= (strpos($item->getElementsByTagName('link')->item(0)->
										textContent, $id) !== false) ? "active" : "" ;

			$result[] = $row;
		}
	}

	return $result;
}
					

Since PHP is more suitable for DOM operations, this version seems the most compact and efficient of the two.

AIR

Adobe AIR₀ is a new platform for distributing web-applications as installed programs and widgets. This seemed a useful platform to experiment with, because packaging internet applications as desktop appliances makes the functionality very easy to access by the user.

To complement the online documentation, an installable Air Application was constructed for the distribution of examples and documentation.

AIR also proved itsself the perfect platform for distributing the online strategy game I wrote about in an earlier chapter.

AIR will prove to be a very useful tool for bridging the boundary between internet and desktop development.

10. Open Source

Now my "ClassBehaviour" library has proved itself useful to the developers around me, I felt it was time to release the code to see if it may prove useful to more developers still. Builds are now published regularly to several online repositories under the GNU General Public License (GPL)₀.

Source Forge

Source Forge₀ is a large repository for Open Source projects and it seemed a natural first choice for a cross platform framework aimed at developers.
http://sourceforge.net/projects/classbehaviours/

Google Code

I chose Google Code₀ as a secondary repository, because the focus there lies more on web applications.
http://code.google.com/p/classbehaviours/

11. Conclusion

In the decade of my professional career, humble web-development beginnings have grown out to an efficient and complete framework for development used in over a hundred projects and by many fellow developers. As the internet is growing into a more and more indispensable tool for productivity, further embracing of new technologies seems an exciting prospect to me.

Appendix A: Project Credentials

A list of projects my "ClassBehaviour" framework is used in can be found here: www.woollymittens.nl

Appendix B: References

The following sources and websites have proved of importance to this project.

1. Raggett, Connolly. (1997). Introducing HTML 3.2 [online]. World Wide Web Consortium (W3C) Available at: http://www.w3.org/MarkUp/Wilbur/ [2008 09 20].
2. Maurice van Creij. (2008). Newsletter Template [online]. Central Bureau of Statistics. Available at: http://www.woollymittens.nl/portfolio/CBS/newsletter/newsletter.html [2008 09 20].
3. Raggett, Le Hors, Jacobs. (1999). HTML 4.01 Specification [online]. World Wide Web Consortium (W3C). Available at: http://www.w3.org/TR/html4/ [2008 09 20].
4. Peter-Paul Koch. (2002). Fluid Thinking [online]. Digital Web Magazine. Available at: http://www.digital-web.com/articles/fluid_thinking/ [2008 09 20].
5. Maurice van Creij. (2008). Newsletter Template [online]. RTL Nieuws. Available at: http://www.woollymittens.nl/portfolio/RtlNieuws2/xhtml/T22_RTL_Nieuwsbrief.html [2008 09 20].
6. The Netscape Archive [online]. Netscape. Available at: http://browser.netscape.com/ [2008 09 20].
7. Internet Explorer [online]. Microsoft. Available at: http://www.microsoft.com/windows/products/winfamily/ie/default.mspx [2008 09 20].
8. The Mozilla Project [online]. Mozilla.org. Available at: http://www.mozilla.org/ [2008 09 20].
9. Bert Bos, Håkon Wium Lie, Chris Lilley, Ian Jacobs. (1998). Visual formatting model [online]. World Wide Web Consortium (W3C). Available at: http://www.w3.org/TR/CSS2/visuren.html [2008 09 20].
10. Maurice van Creij. (2008). Website Template [online]. Hypotheker. Available at: http://www.woollymittens.nl/portfolio/Hypotheker/xhtml/homepage.html [2008 09 20].
11. Steven Pemberton, et al. (2000). XHTML™ 1.0 The Extensible HyperText Markup Language. 2nd. World Wide Web Consortium (W3C). Available at: http://www.w3.org/TR/xhtml1/ [2008 09 20].
12. Shane McCarron, et al. (2007). XHTML™ 1.1 - Module-based XHTML [online]. 2nd. World Wide Web Consortium (W3C). Available at: http://www.w3.org/TR/xhtml11/ [2008 09 20].
13. Jonny Axelsson, et al. (2006). XHTML™ 2.0 [online]. Working Draft. World Wide Web Consortium (W3C). Available at: http://www.w3.org/TR/xhtml2/ [2008 09 20].
14. Ian Hickson, et al. (2008). HTML 5 [online]. Editor's Draft. World Wide Web Consortium (W3C). Available at: http://www.w3.org/html/wg/html5/ [2008 09 20].
15. Jesse Skinner. (2006). Writing Semantic HTML [online]. The Future of the Web. Available at: http://www.thefutureoftheweb.com/blog/writing-semantic-html [2008 09 20].
16. Maurice van Creij. (2008). Website Template [online]. AGIS. Available at: http://www.woollymittens.nl/portfolio/Agis2/xhtml/wjef_T1_Home.html [2008 09 20].
17. Kim Zetter. (2008). Six-Year-Old News Story Causes United Airlines Stock to Plummet [online]. Wired. Available at: http://blog.wired.com/27bstroke6/2008/09/six-year-old-st.html [2008 09 20].
18. Microsoft Silverlight [online]. Microsoft. Available at: http://www.microsoft.com/SILVERLIGHT/ [2008 09 20].
19. Adobe Flash Player [online]. Adobe. Available at: http://www.adobe.com/products/flashplayer/ [2008 09 20].
20. Håkon Wium Lie, Bert Bos. (1996). Cascading Style Sheets, level 1 [online]. World Wide Web Consortium (W3C). Available at: http://www.w3.org/TR/REC-CSS1.html [2008 09 20].
21. Bert Bos, et al. (1998). Cascading Style Sheets, level 2 [online]. World Wide Web Consortium (W3C). Available at: http://www.w3.org/TR/CSS2/ [2008 09 20].
22. David W. McIntyre. (2001). comp.lang.visual Frequently-Asked Questions (FAQ) [online]. comp.lang.visual (Usenet). Available at: http://www.faqs.org/faqs/visual-lang/faq/ [2008 09 20].
23. DHTML - HTML Document Object Model (DOM) [online]. W3Schools. Available at: http://www.w3schools.com/dhtml/dhtml_dom.asp [2008 09 20].
24. Maurice van Creij. (2008). Website Template [online]. Royal Bank of Scotland. Available at: http://www.woollymittens.nl/portfolio/Abn_Rbs/xhtml/T01_Homepage.html [2008 09 20].
25. What is a Content Management System, or CMS? [online]. Contentmanager.eu.com Available at: http://www.contentmanager.eu.com/history.htm [2008 09 20].
26. Ferry den Dopper, Maurice van Creij, et al. Dutch Meat Advisory [online]. Tam Tam bv. Available at: http://www.vlees.nl/ [2008 09 20].
27. Maurice van Creij. (2008). Website Template [online]. VdBJ Communicatie Groep. Available at: http://www.woollymittens.nl/portfolio/VdBJ/xhtml/misc_scroll.html [2008 09 20].
28. Maurice van Creij. (2008). ClassBehaviours, the javascript framework based on class-name parsing [online]. Available at: http://www.woollymittens.nl/ [2008 09 20].
29. Greg Murray. (2005). Asynchronous JavaScript Technology and XML (Ajax) With the Java Platform [online]. Sun. Available at: http://java.sun.com/developer/technicalArticles/J2EE/AJAX/ [2008 09 20].
30. Tim O'Reilly. (2005). What Is Web 2.0 [online]. O'Reilly. Available at: http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html [2008 09 20].
31. Maurice van Creij. (2008). Tank-o-Furry [online]. Woolly Mittens. Available at: http://www.lolitalapine.nl/games/Tank-o-Furry/index.html [2008 09 20].
32. Venu Vasudevan. (2001). A Web Services Primer [online]. xml.com. Available at: http://webservices.xml.com/pub/a/ws/2001/04/04/webservices/index.html [2008 09 20].
33. All you need to know about Internet en software accessibility [online]. The Bartiméus Accessibility Foundation Available at: http://www.accessibility.nl/?languageId=2 [2008 09 20].
34. The Web Guidelines quality model [online]. 1.7. Ministry of the Interior and Kingdom Relations Available at: http://www.webrichtlijnen.nl/english/ [2008 09 20].
35. Wendy Chisholm, et al. (1999). Web Content Accessibility Guidelines 1.0 [online]. Place of publication: Publisher (if ascertainable). Available at: http://www.w3.org/TR/WCAG10/ [2008 09 20].
36. Jeremy Keith. (2006). Hijax [online]. DOMscripting Available at: http://domscripting.com/blog/display/41 [2008 09 20].
37. Maurice van Creij. (2008). Website Template [online]. Ministry of Health, Welfare and Sport. Available at: http://www.woollymittens.nl/portfolio/MinVwsPremieberekening/xhtml/premieberekening.html [2008 09 20].
38. RSS 2.0 at Harvard Law [online]. Berkman Center for Internet & Society at Harvard Law School. Available at: http://cyber.law.harvard.edu/rss/rss.html [2008 09 20].
39. Adobe AIR [online]. Adobe. Available at: http://www.adobe.com/products/air/ [2008 09 20].
40. GNU General Public License [online]. GNU.org. Available at: http://www.gnu.org/copyleft/gpl.html [2008 09 20].
41. SourceForge.net: Create, Participate, Evaluate [online]. Source Forge. Available at: http://sourceforge.net/projects/classbehaviours/ [2008 09 20].
42. Google Code [online]. Google. Available at: http://code.google.com/p/classbehaviours/ [2008 09 20].

1. Summary
2. Introduction
3. Requirements
4. Design
5. User Interface
6. Scripted Functionality
7. Development Feedback
8. Conclusion

• Appendix A: References

1. Summary

In this document I use the "VdBJ" project to illustrate my progress in: Application Design and Development.

The resulting website can be found at: http://www.vdbj.nl/, but a functional prototype can be visited in my portfolio at: http://www.woollymittens.nl/portfolio/VdBJ/xhtml/misc_scroll.html should the original source disappear.

2. Introduction

An advertising company called "NLXL"₀ provided this project to "Supershift". Whilst perfectly capable of making their usual fare of marketing websites, they found themselves in over their head with the special wishes of a customer. The customer in question is a specialty magazine publisher called "VdBJ"₀, whom apparently are very particular about their corporate style.

Example 1 shows a sketch of the web-design they desired. Notable are the lack of scroll-bars in the conventional places or textual content for that matter. The background to the page is implied to be a continual animated parade of magazine covers.

3. Requirements

From the designs, I noted the following features and requirements.

• The background is a decorative slideshow of magazine covers and titles. Refreshing the page would disturb the continuity of the effect.
• There are controls for the speed, direction and even colour of the slideshow. All the settings would need to be stored reliably.
• Since a browser can change in size, so should the interface. Absolute positions would be difficult to maintain.
• Good search-engine access and general accessibility is always a high priority. No Flash was to be used.
• Not all Javascript engines in all browsers are equally efficient. Speed differences have to be taken into account.
• Scroll-bars appear customized. Despite my protests about accessibility, they would have to be scripted.
• The content loaded in the scrolling sections appear to require full dynamic interaction also. Clashes between scripts are to be expected.
• The navigation needs to change the slideshow without causing a visual disturbance.

The development of a user-interface for a marketing website with limited interactivity typically takes about a week and can be performed by a junior developer. A realistic estimate for functionality of this scope, however would be about 3 weeks to a month. The impact of the special features on this estimate was communicated to the customer.

The interface is clearly unconventional, so the usual approach in employing my "ClassBehaviour" framework₀ would not suffice. I decided on an approach similar to that used for a desktop application. All screen elements were to be addressed like elements of a "Graphical User Interface" (GUI)₀.

4. Design

The following GUI elements were isolated for development.

Parallax scrolling layers of graphics and titles

A list of covers and titles will need to traverse the screen from either direction at controllable speed. The traverse needs to loop seamlessly regardless of changing browser dimensions or content.

Meta Navigation

A row of meta-navigation about the site in general must load a different kind of panel independent of the regular content.

Content Panel

A scrollable panel of content needs to come in from off screen when a poster or title is clicked. The dimensions of this panel must be configurable and the content must be able to be "Dynamic HTML" (DHTML) itself.

Main Canvas Position

The position of many elements are relative to the screen size available. These must be centered correctly.

Chapter Navigation

The menu items must be able to load new contents for the parallax layers and reset any content panel that may be open. The menu is context sensitive and a layer of sub-navigation opens depending on the active chapter.

Banner for Special Events

The menu sports a decorative banner that floats over the parallax layers and is only present for special events listed on the initial screen.

Interface Controls

There is a bank of buttons and sliders controlling the direction, speed and colour of the parallax layers. The menu can be hidden and revealed with a button in case it gets in the way.

5. User Interface

In strict XHTML the user-interface is constructed from two parts. All the elements on the page must have a semantic representation in tags. The information on the page is to stay meaningful, even when stripped of all markup. The markup and layout of the design is achieved through styles defines in "Cascading Style Sheet" (CSS) rules in a style-sheet and is added as decoration to the already semantic content.

Semantic prototype in XHTML

In a site with this many dynamic features, it's difficult to present the content in a meaningful way when stripped of markup and scripting. Nevertheless accessible ways to represent the content were found and the following examples are the most notable.

Covers and Titles in XHTML

The clip of XHTML of example 3 show three titles and two covers with their descriptions. Without markup they display simply as the bulleted lists and thumbnailed links in example 4.

<ul id="titles">
	<li>
		<a href="http://www.woollymittens.nl/iframe_scroll.html?0" class="width_1 height_1">
			Lorem ipsum dolor sit amet &gt;&gt;&gt;
		</a>
	</li>
	<li>
		<a href="http://www.woollymittens.nl/iframe_scroll.html?1" class="width_1 height_1">
			Consectetur adipisicing elit &gt;&gt;&gt;
		</a>
	</li>
	<li>
		<a href="http://www.woollymittens.nl/iframe_scroll.html?2" class="width_1 height_1">
			Sed do eiusmod tempor incididunt &gt;&gt;&gt;
		</a>
	</li>
</ul>
<ul id="covers">
	<li class="floatingDescription width_280">
		<a href="http://www.woollymittens.nl/iframe_scroll.html?0" class="width_1 height_1">
			<img alt="Description of cover 0" src="http://www.woollymittens.nl/images/cover_0.jpg"/>
		</a>
		<div class="description">
			<h2>Lorem ipsum dolor sit amet</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur<br/>
				adipisicing elit, sed do eiusmod tempor<br/>
				incididunt ut labore et dolore magna aliqua.
			</p>
		</div>
	</li>
	<li class="floatingDescription width_280">
		<a href="http://www.woollymittens.nl/iframe_scroll.html?1" class="width_1 height_1">
			<img alt="Description of cover 0" src="http://www.woollymittens.nl/images/cover_1.jpg"/>
		</a>
		<div class="description">
			<h2>Lorem ipsum dolor sit amet</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur<br/>
				adipisicing elit, sed do eiusmod tempor<br/>
				incididunt ut labore et dolore magna aliqua.
			</p>
		</div>
	</li>
</ul>
					

If the content is meaningful without markup, search-engines and screen-reader software will do a better job to process it into useful results. "Lynx"₀ shown in example 3, is a text-only browser that is a decent representation of how a screen-reader or search-engine perceives the site. As shown in the screenshot, the content of the website is perfectly browsable.

Content in XHTML

The next example shows the XHTML construction for the customized scrollbar that had to be included against my advice. For accessibility it is not wise to replace the real scrollbar for a javascript one, because not everyone will be able to make it work correctly. In order to limit this problem the functionality doesn't get added in an intrusive way. There is not inline scripts in this example, despite its DHTML function.

<div id="scrollCanvas">
	...
	<div id="description" class="dualColumns">
		<h1>Blauw</h1>
		<h2>Project</h2>
		<p>
			Lorem ipsum amet, <a href="http://www.woollymittens.nl/iframe_scroll.html" class="transFrameLink width_1 height_1">
			elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			Ut enim, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
		</p>
		<p>
			Duis aute irure dolor in reprehenderit in esse cillum dolore eu fugiat nulla pariatur.
			Excepteur sint occaecat cupidatat non culpa qui officia deserunt mollit anim id est laborum.
		</p>
	</div>
	<div class="clear"></div>
</div>
<ul class="virtualScrollbar id_scrollCanvas">
	<li class="scrollUp">
		<a href="#scrollpoint">
			<img alt="" class="srcMouseHover" src="http://www.woollymittens.nl/images/scroll_up_link.png"/>
		</a>
	</li>
	<li class="scrollIndicator">
		<a href="#scrollpoint">
			<img alt="" class="srcMouseHover" src="http://www.woollymittens.nl/images/scroll_pickle_link.png"/>
		</a>
	</li>
	<li class="scrollDown">
		<a href="#scrollpoint">
			<img alt="" class="srcMouseHover" src="http://www.woollymittens.nl/images/scroll_down_link.png"/>
		</a>
	</li>
</ul>
					

The DHTML event-handlers are added based on the class-name "virtualScrollbar" and only after it is confirmed that there are not apparent compatibility problems. For browsers with disabled javascript, the scrollbar will default to a normal one. The same happens when the site is rendered with an alternative stylesheet or none at all. The impact of the accessibility problem is minimized as best as possible this way.

This technique for applying javacript non-intrusively is called "Class Behaviour" and I developed this into a framework to be distributed as free open-source software. More about this in another report ("Classbehaviours, the Javascript Framework Based on Class-name Parsing").

Navigation in XHTML

The last example is a clip from the site's navigation menu. Since the links are supposed to open in a heavily sliding display panel, inaccessible javascript links are expected. The accessible approach however was to default the list to a hierarchical list of links.

<div id="navigation">
	<a href="#close" class="close">
		<img class="srcMouseHover" alt="Sluit de navigatie" src="http://www.woollymittens.nl/images/skin0/close_normal_link.png"/>
	</a>
	<a href="#open" class="open">
		<img class="srcMouseHover" alt="Open de navigatie" src="http://www.woollymittens.nl/images/arrow_link.png"/>
	</a>
	<ul>
		<li class="home"><a href="#1">Home</a></li>
		<li>
			<a class="showSourceCode" href="http://www.woollymittens.nl/xml/newItems0.xml" class="width_1 height_1 style_normal importXml link">vdBJ</a>
			<ul>
				<li>
					<a class="showSourceCode" href="http://www.woollymittens.nl/xml/newItems0.xml" class="width_1 height_1 importXml link">
						New Items 0
					</a>
				</li>
				<li>
					<a class="showSourceCode" href="http://www.woollymittens.nl/xml/newItems1.xml" class="width_1 height_1 importXml link">
						New Items 1
					</a>
				</li>
				<li>
					<a class="showSourceCode" href="http://www.woollymittens.nl/xml/newItems2.xml" class="width_1 height_1 importXml link">
						New Items 2
					</a>
				</li>
			</ul>
		</li>
		<li><a href="?2" class="link">Portfolio</a></li>
		<li>
			<a class="showSourceCode" href="http://www.woollymittens.nl/xml/newItems1.xml" class="width_1 height_1 style_normal importXml link">Klanten</a>
			<ul>
				<li>
					<a href="http://www.woollymittens.nl/iframe_scroll.html?5" class="width_1 height_1 link">Alfabetisch</a>
				</li>
				<li>
					<a href="http://www.woollymittens.nl/iframe_scroll.html?6" class="width_1 height_1 link">Datum</a>
				</li>
				<li>
					<a href="http://www.woollymittens.nl/iframe_scroll.html?7" class="width_1 height_1 link">Specialisme</a>
				</li>
			</ul>
		</li>
		<li class="contact"><a href="?2" class="link">Contact</a></li>
		<li class="sitemap"><a href="?3" class="link">Sitemap</a></li>
		<li class="search"><a href="?3" class="link">Zoeken</a></li>
	</ul>
</div>
					

The links in the list do refer to the actual content to be displayed, but without javascript these will simple open as plain HTML documents in the browser. Search engine robots and people using screen-reader software have full access to the content.

Visual Design in CSS

The decision to approach the site as a GUI has implications for the complexity of the stylesheet. In order to grow gracefully and stay maintainable throughout the life of the site, the structure of the stylesheet will mirror the hierarchy of the semantic XHTML perfectly. Below are the same features discussed in examples 3, 4, 5 and 6, but this time represented by their structured CSS rules.

Covers and Titles in CSS

The markup belonging to the XHTML for the covers and titles of example 3 is features below in example 7.

#titles {
	position : absolute;
}
	#titles li {
		list-style-type : none;
		position : absolute;
		z-index : 2000;
		margin : 0px;
		padding : 0px;
		width : 320px;
	}
		#titles li a {
			font-size : 120%;
			font-weight : bold;
			line-height : 140%;
		}
			#titles li a:link,
			#titles li a:active,
			#titles li a:visited {
				text-decoration : none;
				color : #ffffff;
			}
			#titles li a:hover{
				text-decoration : none;
				color : #ffffff;
			}
#covers {
	position : absolute;
}
	#covers li {
		list-style-type : none;
		display : inline;
		position : absolute;
		z-index : 3000;
		margin : 0px;
		padding : 0px;
	}
		#covers li a {
			position : relative;
			display : block;
		}
			#covers li a img {}
		#covers li div.description {
			display : none;
		}
					

Notice how every XHTML element is features as an indented CSS entity. If an overview of the application is to persist, mirroring the structure of the document is vital.

Content in CSS

In example 8, the styles are shown that position the content area and the scroll bar in an absolute position relative to the screen. Javascript will control this position to show and hide the content.

#content {
	position : absolute;
	right : 10px;
	top : 50px;
	z-index : 4000;
	background-color : #000033;
	border-left : solid 1px #ffffff;
	border-right : solid 1px #ffffff;
}
	#scrollCanvas {
		position : absolute;
		z-index : 5000;
	}
	ul.virtualScrollbar {
		margin : 0px;
		padding : 0px;
		position : absolute;
		right : 0px;
		top : 0px;
		z-index : 6000;
		width : 18px;
		height : 100%;
		border-left : solid 1px #ffffff;
	}
		ul.virtualScrollbar li {
			position : absolute;
			list-style-type : none;
			width : 18px;
			height : 18px;
		}
		ul.virtualScrollbar li.scrollUp {
			right : 0px;
			top : 5px;
		}
			ul.virtualScrollbar li.scrollUp a {}
				ul.virtualScrollbar li.scrollUp  a img {
					margin : 0px 4px 0px 4px;
				}
		ul.virtualScrollbar li.scrollIndicator {
			top : 22px;
			right : 0px;
			width : 18px;
		}
			ul.virtualScrollbar li.scrollIndicator img {
				width : 17px;
			}
		ul.virtualScrollbar li.scrollDown {
			right : 0px;
			bottom : 3px;
		}
			ul.virtualScrollbar li.scrollDown a {}
				ul.virtualScrollbar li.scrollDown  a img {
					margin : 0px 4px 0px 4px;
				}
					

The scroll-bar, no more than a couple of list items in HTML, get their shape from a cascading hierarchy of styles. Since the scroll-bar is a "ClassBehaviour" function, detailed documentation of the scrollbar can be found here: http://www.woollymittens.nl/details.php?id=artificial-scroll-bar

Navigation in CSS

The navigation was designed as a column of links, sporting hidden lists of sub-navigation.

#navigation {
	position : absolute;
	left : 0px;
	top : 0px;
	z-index : 4000;
	width : 170px;
	height : 500px;
	overflow : hidden;
	background-image : url(http://www.woollymittens.nl/images/navigation_back.png);
}
	#navigation ul {
		padding : 0px;
		margin : 6px 10px 10px 10px;
	}
		#navigation ul li {
			list-style-type : none;
			padding : 3px 0px 0px 0px;
		}
			#navigation ul li a {
				padding : 0px 0px 0px 20px;
				background-repeat : no-repeat;
				background-position : 0px 10px;
			}
				#navigation ul li a:link,
				#navigation ul li a:active,
				#navigation ul li a:visited {
					color : #ffffff;
					text-decoration : none;
					background-image : none;
				}
				#navigation ul li a:hover {
					color : #ffffff;
					text-decoration : none;
					background-image : url(http://www.woollymittens.nl/images/navigation_bullet.png);
				}
				#navigation ul li a.active:link,
				#navigation ul li a.active:visited,
				#navigation ul li a.active:hover,
				#navigation ul li a.active:active {
					color : #ffffff;
					text-decoration : none;
					background-image : url(http://www.woollymittens.nl/images/navigation_bullet.png);
				}
					#navigation ul li a img {
						vertical-align : middle;
					}
			#navigation ul li ul {
				background-image : none;
				height : auto;
				margin : 0px 10px 0px 10px;
			}
				#navigation ul li ul li {}
					#navigation ul li ul li a {}
						#navigation ul li ul li a:link,
						#navigation ul li ul li a:active,
						#navigation ul li ul li a:visited {}
						#navigation ul li ul li a:hover {}
					

Nothing is hidden by default however. Without javascript the list is fully revealed.

6. Scripted Functionality

Every object represented by the XHTML and CSS now need to be provided with scripted functionality. Using the same hierarchy again a user interface object is built in javascript.

function UserInterface(){
	/* properties */
	this.canvas			=	new Canvas(document.getElementById('parallax'));
	this.posters		=	new Sprites(document.getElementById('covers'), 150);
	this.titles			=	new Sprites(document.getElementById('titles'), 50);
	this.content		=	new Display(document.getElementById('content'));
	this.navigation		=	new Navigation(document.getElementById('navigation'));
	this.controls		=	new Controls(document.getElementById('controls'));
	this.banner			=	new Banner(document.getElementById('banner'));
	this.interval		=	null;
	/* methods */
	this.startUp 		= 	function(){
								// hide the scrollbar
								document.body.parentNode.style.overflow = "hidden";
								// start up the modules
								this.posters.start(-2);
								this.titles.start(-1);
								this.content.start();
								this.meta();
								this.navigation.start();
								this.controls.start();
								this.interval = setInterval("userInterface.update()",25);
								this.deep();
								this.canvas.start();
								this.banner.update();
							}
	this.update		=	function(){
								this.posters.update();
								this.titles.update();
								this.content.update();
								this.navigation.update();
								this.canvas.update();
								this.banner.update();
							}
}
					

The main object provides the back-bone of the application and manages a central update and redraw cycle. Every GUI element gets its own separate object from here to initialize its event handlers and manage its update cycle.

Posters and Titles

The moving screen elements of the magazine covers and titles make up the largest part of the complexity of this project. Example 11 shows the function called in example 10 to start the display routine for the moving parts, called "sprites" after their video-game equivalents.

function Sprites(node, offset){
	/* properties */
	this.node		=	node;
	this.speed		=	-2;
	this.paused	=	false;
	this.list		=	new Array();
	this.index		=	0;
	this.next		=	1;
	this.offset	=	offset;
	/* methods */
	this.start 	= 	function(speed){
							this.speed = speed;
							// clear the list
							this.list = new Array();
							this.index = 0;
							this.next = 1;
							// all items
							allItems = this.node.getElementsByTagName('li');
							// for every item on the list
							for(var a=0; a<allItems.length; a++){
								// make a new sprite object
								this.list[a] = new Sprite(allItems[a]);
								// set the start position
								this.list[a].start(this.speed);
								// get the node's link
								itemLink = this.list[a].node.getElementsByTagName('a')[0];
								// set the even-handler for the click
								itemLink.onclick = this.open;
							}
							// trigger the update funtion once to give the sprites a starting position
							this.speed -= 50;
							for(var a=0; a<25; a++) this.update();
							this.speed += 50;
						}
...
					

In the loop through all these "sprites" an object is created for each with positional information and a set of functions that manage position and timing.

Each sprite can take care of its own position, movement and visibility.

function Sprite(node){
	this.node		=	node;
	this.xPos		=	-1000;
	this.yPos		=	0;
	this.zPos		=	0;
	this.xMin		=	0 - this.node.offsetWidth;
	this.xMax		=	userInterface.canvas.node.offsetWidth;
	this.yMin		=	55;
	this.yMax		=	userInterface.canvas.node.offsetHeight - this.node.offsetHeight - 35;
	this.speed		=	0;
	this.active	=	false;
	this.start		=	function(speed){
							this.reset();
							this.update(speed);
							this.reset();
						}
	this.update	=	function(speed){
							// store the speed and direction
							this.speed = speed;
							//calculate the x-position
							this.xPos += speed;
							// calculate the limits
							this.xMin = (this.node.offsetWidth>0) ? 0 - this.node.offsetWidth : -130 ;
							this.xMax = (document.body.offsetWidth>0) ? document.body.offsetWidth : 160 ;
							// update the object if it's inside the screen otherwise reset it
							this.node.style.left = (
								(this.speed<0 && this.xPos>this.xMin) ||
								(this.speed>0 && this.xPos<this.xMax)
							) ? Math.round(this.xPos) + 'px' : this.reset();
							this.node.style.top = this.yPos + 'px';
							// set  the visibility
							this.node.style.visibility = 'visible';
						}
	this.reset		=	function(){
							this.active = false;
							this.node.style.visibility = 'hidden';
							this.xMin = (this.node.offsetWidth>0) ? 0 - this.node.offsetWidth : -130 ;
							this.xMax = (document.body.offsetWidth>0) ? document.body.offsetWidth : 160 ;
							this.xPos = (this.speed<0) ? this.xMax : this.xMin;
							this.yPos = Math.round((this.yMax-this.yMin) * Math.random() + this.yMin);
							return Math.round(this.xPos) + 'px';
						}
}
					

Sprites turn themselves off when they leave the screen, they trigger their own "reset" function when they stray outside screen limits. This limits the load on the processor to render them. Moving objects is a real problem for some browsers, like Internet Explorer, so care has to be taken not to waste resources positioning objects outside the screen.

The "update" function in example 10 groups several redraw functions together. The one below is the one belonging to the sprites as a group.

this.update	=	function(){
						var lastActive = 0;
						var totalActive = 0;
						// if the list is not paused
						if(!this.paused){
							// for every sprite on the list
							for(var a=0; a<this.list.length; a++){
								// if its on screen
								if(this.list[a].active){
									// ask it to update its position
									this.list[a].update(this.speed);
									// store its index
									totalActive += 1;
								}else{
									this.list[a].reset(this.speed);
								}
							}
							// start the next index when there's space after the last one
							if(this.list.length>0){
								offset = (this.speed>0) ?
									this.list[this.index].xPos :
									this.list[this.index].xMax-this.list[this.index].xPos
										+this.list[this.index].xMin;
								if(offset>this.offset || totalActive==0){
									// pick the next one in row
									this.index = (this.speed<0) ?
										(this.list.length + this.index - 1) % this.list.length :
										(this.index + 1) % this.list.length;
									// if the item is not allready active
									if(!this.list[this.index].active){
										// set its initial position
										this.list[this.index].update(this.speed);
										// allow it to move
										this.list[this.index].active = true;
									}
								}
							}
						}
					}
					

In the first loop every sprite is asked to update its own position. The second part of the function (re)activates sprites as more screen space is freed up by the movement.

Controls

The bar of controls for the parallax display of covers and titles is a complex affair. Speed, pausing, direction, and colour all have to be adjustable without disrupting the displayed content. The settings should also be saved and restored in a later session.

function Controls(node){
	/* properties */
	this.node			=	node;
	this.speedDrag		=	false;
	this.speedIndex	=	2;
	this.directionIndex =	-1;
	this.speedBar		=	null;
	this.speedNodes	=	null;
	this.speeds		=	new Array(
								new Array( 0.002, 0.001),
								new Array( 1,	 0.5),
								new Array( 2,	 1),
								new Array( 3,	 1.5),
								new Array( 4,	 2)
							);
	this.colourIndex	=	0;
	this.colourBar		=	null;
	this.colourNodes	=	null;
	/* methods */
	this.start			=	function(){
								// get all speed buttons
								this.speedBar = document.getElementById('slider');
								this.speedNodes = this.speedBar.getElementsByTagName('img');
								// set the events for the slider
								this.speedBar.onmousedown = this.enable;
								document.onmouseup = this.disable;
								this.speedBar.onmousemove = this.drag;
								// set the events for the speed
								for(var a=0; a<this.speedNodes.length; a++){
									// this.speedNodes[a].onmouseover = this.hover;
									this.speedNodes[a].onclick = this.speed;
								}
								// set the events fotr the pause
								document.getElementById('pause').onclick = this.pause;
								// set the events for the direction
								document.getElementById('back').onclick = this.reverse;
								// set the events for the colours
								this.colourBar = document.getElementById('colours');
								this.colourNodes = this.colourBar.getElementsByTagName('dd');
								// set the events for the colours
								for(var a=0; a<this.colourNodes.length; a++){
									this.colourNodes[a].onclick = this.colour;
								}
								// set the initial values
								this.restore();
							}
					

As example 14 shows a lot of event handlers are set for the buttons. The last function call is "restore" which retrieves any settings left over from a previous session. This function is shown in example 15.

this.restore		=	function(){
							// get the settings string
							vdbjPrefs = getCookie('vdbjPrefs');
							// if there was a cookie
							if(vdbjPrefs){
								// restore speed settings
								speedSettings = vdbjPrefs.split('speed=');
								speedSettings = (speedSettings.length>1) ? parseFloat(speedSettings[1]) : 2 ;
								this.speed(this.speedNodes[speedSettings]);
								// restore the direction setting
								directionSettings = vdbjPrefs.split('direction=');
								directionSettings = (directionSettings.length>1) ?
									parseInt(directionSettings[1]) : -1 ;
								if(directionSettings>0)
									this.reverse(document.getElementById('back'));
								// restore the colour settings
								colourSettings = vdbjPrefs.split('colour=');
								colourSettings = (colourSettings.length>1) ? parseInt(colourSettings[1]) : 0 ;
								this.colour(this.colourNodes[colourSettings], true);
							}
						}
this.saveSettings	=	function(){
							settingsString = "speed=" + userInterface.controls.speedIndex + "&direction="
										+ userInterface.controls.directionIndex
										+ "&colour=" + userInterface.controls.colourIndex;
							setCookie('vdbjPrefs', settingsString, getDaysFromNow(30), "/", null, null);
						}
					

The hard work of splitting a string of variables is done by a function from my "ClassBehaviour" framework. To illustrate how the settings are processed, please refer to example 16.

this.speed		=	function(that){
						var objNode = (typeof(this.nodeName)=='undefined') ? that : this ;
						// what speed element has been pressed?
						speedIndex = parseInt(objNode.className.replace('speed',''));
						// set the indicators
						for(var a=0; a<userInterface.controls.speedNodes.length; a++){
							speedNode = userInterface.controls.speedNodes[a];
							speedNode.src = (a<=speedIndex) ?
									speedNode.src.replace('_link','_active') :
									speedNode.src.replace('_active','_link') ;
						}
						// get the dedined direction
						direction = (userInterface.posters.speed<0) ? -1 : 1 ;
						// set the defined speed
						userInterface.posters.speed = userInterface.controls.speeds[speedIndex][0] * direction;
						userInterface.titles.speed = userInterface.controls.speeds[speedIndex][1] * direction;
						// store the selected speed
						userInterface.controls.speedIndex = speedIndex;
						userInterface.controls.saveSettings();
					}
					

The "speed" function is the most straight forward. The speed of the scrolling layers is set in pixels per update cycle. The preferred speed is multiplied by the direction and updated to a constant. If you recall example 12, every sprite handles its own movement based on this constant.

this.colour	=	function(that, noReload){
						var objNode = (typeof(this.nodeName)=='undefined') ? that : this ;
						// what speed element has been pressed?
						if(objNode){
							colourNode = objNode.getElementsByTagName('img')[0];
							colourIndex = parseInt(colourNode.className.replace('colour',''));
							// store the selected colour index
							userInterface.controls.colourIndex = colourIndex;
							userInterface.controls.saveSettings();
							// set the appropriate styles
							document.body.className = 'skin' + colourIndex;
							// change the appropriate images
							allImages = document.getElementsByTagName('img');
							for(var a=0; a<allImages.length; a++){
								allImages[a].src = allImages[a].src.replace(/skin+[0-9]/, 'skin' + colourIndex);
							}
							// set the indicators
							for(var a=0; a<userInterface.controls.colourNodes.length; a++){
								colourNode = userInterface.controls.colourNodes[a].getElementsByTagName('img')[0];
								colourNode.src = (a==colourIndex) ?
										colourNode.src.replace('_link','_active').replace('_hover','_active') :
										colourNode.src.replace('_active','_link') ;
							}
							// reload
							if(!noReload){
								url = userInterface.content.node.getElementsByTagName('iframe')[0].src;
								userInterface.content.node.getElementsByTagName('iframe')[0].src = '';
								userInterface.content.node.getElementsByTagName('iframe')[0].src = url;
							}
						}
						return false;
					}
					

The "colour" function has to invoke a lot of changes. The "body" element of the HTML document gets a new class-name. In the stylesheet a colour scheme is defined for all classes the "body" element can be changed to. Because not all images are set though the style-sheet, a loop is needed to replace the filename of any image on screen that uses a changeable colour. Any content loaded in the display panel is reloaded to adjust to the new colour choice. All this is done without disturbing the scrolling layers.

Navigation

The most interesting thing about the navigation menu is its use of AJAX to update the scrolling display. Clicking a menu option will load a new set of covers and titles, which replace the current ones without stopping their motion. As discussed earlier, each sprite takes care of its own motion, so replacing them involves replacing their instructions too.

this.importXml	=	function(that){
						var objNode = (typeof(this.nodeName)=='undefined') ? that : this ;
						var nav = userInterface.navigation;
						// import new sprites using ajax
						classBehaviour.xmlDoc.addRequest(objNode.href, userInterface.navigation.processXml,
							userInterface.navigation.waitForXml, null, objNode);
						// activate the link
						nav.activate(objNode);
						// cancel the click
						objNode.blur();
						return false;
					}
this.waitForXml	=	function(status){
						// status indicator here
				//		debug(status);
					}
this.processXml	=	function(documentObj, referedNode, documentText){
						// stop the render engine
						userInterface.content.paused = true;
						userInterface.posters.paused = true;
						// remove the xml tags from the xml output
						inputHtml = documentText.replace('<?xml version="1.0"?>', '')
										.replace('<root>', '')
										.replace('/<root>', '');
						// get the titles html from the xml output
						titlesHtml = inputHtml.split('<ul id="covers">')[0]
										.replace('</ul>', '')
										.replace('<ul id="titles">', '');
						document.getElementById('titles').innerHTML = titlesHtml;
						// get the covers html from the xml output
						coversHtml = inputHtml.split('<ul id="covers">')[1].replace('</ul>', '');
						document.getElementById('covers').innerHTML = coversHtml;
						// restart the render engine
						userInterface.content.hide();
						userInterface.posters.start(-2);
						userInterface.titles.start(-1);
						userInterface.controls.restore();
						// re-activate the classbehaviours
						classBehaviour.parseDocument(document.getElementById('covers'));
					}
					

When a link is clicked in the navigation menu, it will target a new list links for the scrolling display. Without javascript this is all that is needed to make the content in those links accessible, but when javascript is available those links need to be displayed scrolling on screen. The "importXml" function takes the link to the new list and imports it as an XML object. This object is then treated as the source of new sprites by the "processXml" function to rebuild the display.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="newsItem.aspx.cs"
	Inherits="repository_newsItem" %><?xml version="1.0"?>
<root>
	 <ul id="titles">
	    <asp:Repeater runat="server" ID="uxRepeaterTitles" >
        <ItemTemplate>
        	<li>
        		<asp:HyperLink ID="uxRepLinkTitles" runat="server">
        		<asp:Literal ID="uxTitle" runat="server" /></asp:HyperLink>
        	</li>
        </ItemTemplate>
	    </asp:Repeater>
	 </ul>
	 <ul id="covers">
        <asp:Repeater runat="server" ID="uxRepeaterCovers" >
        <ItemTemplate>
        	<li class="floatingDescription width_280">
        		<asp:HyperLink ID="uxLink" runat="server">
        			<asp:Image runat="server" ID="uxImage" /></asp:HyperLink>
        			<div class="description">
        				<h2 id="uxDescriptionField" runat="server">
        					<asp:Literal ID="uxTitle" runat="server"></asp:Literal>
        				</h2>
        				<p>
        					<asp:Literal ID="uxDescription" runat="server"></asp:Literal>
        				</p>
        			</div>
        		</asp:HyperLink>
        	</li>
        </ItemTemplate>
	    </asp:Repeater>
	</ul>
</root>
<asp:Literal runat="server" ID="uxHidField" />
					

Example 19 shows the structure of the XML the web-service returns. Since XHTML was chosen as the standard for the document instead of HTML, replacement parts of the document can easily be imported as valid XML.

In example 20, the accompanying C# function is show for example 19's ASPX.

void uxRepeaterCovers_ItemCreated(object sender, RepeaterItemEventArgs e)
{
    OverviewElement item = e.Item.DataItem as OverviewElement;
    Image uxImage = e.Item.FindControl("uxImage") as Image;

    item.File.Apply(uxImage);

    uxImage.ToolTip = "";
    uxImage.AlternateText = "";

    Literal uxTitle = e.Item.FindControl("uxTitle") as Literal;
    Literal uxDescription = e.Item.FindControl("uxDescription") as Literal;

    uxTitle.Text = Server.HtmlEncode(item.Title);
    uxDescription.Text = Server.HtmlEncode(item.Description);


    if (item.Page.FolderId == 23)
    {
        HtmlGenericControl uxDescriptionField = e.Item.FindControl("uxDescriptionField")
        		as HtmlGenericControl;
        uxDescriptionField.Attributes["class"] = "people";
    }

    HyperLink uxLink = e.Item.FindControl("uxLink") as HyperLink;

    uxLink.NavigateUrl = item.Page.HRef;

    switch (item.Size)
    {
        default: uxLink.Attributes["class"] = "width_1 height_1"; break;
        case 1: uxLink.Attributes["class"] = "width_0 height_1"; break;
        case 2: uxLink.Attributes["class"] = "width_0 height_0"; break;
        case 3: uxLink.Attributes["class"] = "width_1 height_0"; break;
    }
}
					

The function is re-used from the initial screen buildup, since it only has to retrieve new cover pictures and write them out as XHTML. The XHTML generated for the initial homepage functions just as well for the web-service.

7. Development Feedback

Developing the user-interface for this site took about 3 weeks and 900 lines of javascript for the main object controlling the page. It was very important to recycle any new development for later reference. In this case the replacement scroll-bar, resizing interface, several improvements to the DOM-parsing and AJAX framework were integrated in my open source "ClassBehaviour" framework.

8. Conclusion

Managing the customer's expectations were a large part of my job here. The customer had a very clear idea of what they wanted, but no insight into the impact their choices had on the budget and deadline. More importantly, they had no frame of reference from the viewpoint of an end-user trying to access information on the site. After the impact of their choices were explained to them a compromise was reached that satisfied both the developers and the designers.

The main challenge here was translating what must obviously have been a fanciful brainstorm session on their side into a practical implementation that adhered to my standards for accessibility and maintenance.

For a website, this application is of nearly unrivaled complexity in my portfolio. My method and framework for rapid web development proved up to the challenge and though aimed at simpler web-sites, scaled well to a site developed using an approach more often used for desktop applications.

Appendix B: References

The following sources and websites have proved of importance to this project.

1. Loading "NLXL" | Visual communication & Interaction design [online]. Supershift, the Netherlands. Available at: http://www.nlxl.nl/ [2008 09 24].
2. Maurice van Creij. (2007). VdBJ Communicatie Groep [online]. Supershift, the Netherlands. Available at: http://www.vdbj.nl/ Mirrored at: http://www.woollymittens.nl/portfolio/VdBJ/xhtml/misc_scroll.html [2008 09 24].
3. Maurice van Creij. (2008). ClassBehaviours, the javascript framework based on class-name parsing [online]. Available at: http://www.woollymittens.nl/ [2008 09 20].
4. A History of the GUI [online]. Ars Technica. Available at: http://arstechnica.com/articles/paedia/gui.ars [2008 09 20].
5. Thomas Dickey Lynx source distribution directory [online]. Internet Software Consortium. Available at: http://lynx.isc.org/ [2008 09 20].

1. Summary
2. Introduction
3. Lightwave
4. Photoshop
5. Java
6. Conclusion

• Appendix A: References

1. Summary

In this document I use the "Commodore Gaming" project to illustrate my progress in: Photoshop, Lightwave, UV Textures, Flash, Actionscript, JAVA.

2. Introduction

There's more to web-development than writing code. In highlighting one project "Commodore Gaming", I hope to give an insight in the broad skills required to bridge the gap between design and development.

When the name Commodore was revived for the the branding of a high end gaming PC, custom decorated cases were to be a unique selling point. A computer case with a decorative skin is easier to sell if it can be seen from all sides in person. In a physical show-room, however, it would be impossible to show all possible modifications.

The "Commodore Gaming" site was to have a virtual PC case for users to preview all available customizations.

3. Lightwave

While 3D graphics are a different trade altogether, it proves to be useful to have at least the basic skills. 10 years of seeing to my own needs for 3D graphics have left me with a firm grip on Newtek's Lightwave 3D₀.

Geometry

Since the project was only just in the concept phase, only measurements and photographs were available to make a model of the Commodore PC case.

An additional complication was the requirement to keep the model's complexity to a minimum for rendering in a browser.

UV Textures

Because the online shop was to feature almost limitless decorative variations, the texture of the case would have to fit in one file and be easy to duplicate and modify.

A UV-map can be explained as an unfolded box. Reducing all the sides of the object to one flat projection. This made it easy for Commodore's marketing team to rapidly develop many decorative skins for their website.

4. Photoshop

A template for the UV map from Lightwave was made into a photoshop document and an example skin was made to explain the principle.

Commodore's marketing team had only to use this template to easily create skins for the virtual computer case.

5. Java

To display the virtual computer case in 3D, the Holomatix' Blaze 3D₀ was used. This application provides a JAVA plugin to display 3D models in a browser.

// load the external texture
var newTextureUrl = (_root.textureUrl) ? _root.textureUrl : 'skin_0.jpg' ;
externalTexture.loadMovie(newTextureUrl);

// change the skin
replacementTexture = _root.renderWindow.Object_009.model.getMaterial("Object_009_Object_001_SkinTriSet");
replacementTexture.setData("texture", 1, "name", externalTexture);
replacementTexture = _root.renderWindow.Object_010.model.getMaterial("Object_010_Object_002_SkinTriSet");
replacementTexture.setData("texture", 1, "name", externalTexture);
replacementTexture = _root.renderWindow.Object_013.model.getMaterial("Object_013_Object_003_SkinTriSet");
replacementTexture.setData("texture", 1, "name", externalTexture);
replacementTexture = _root.renderWindow.Object_016.model.getMaterial("Object_016_Object_004_SkinTriSet");
replacementTexture.setData("texture", 1, "name", externalTexture);
					

Modifications were made to allow the loading of external skin files from the web-site's content management system.

6. Conclusion

Many different skills are all grouped under the name "web-developer". One cannot merely master C#, .NET or PHP and develop a rich and complete experience for the user.

As the jack of all trades that web-development demands one to be, I feel that I have a very broad skill-set to work with. I can only hope that as the internet matures, such richness in skills is forsaken for a assembly line mentality.

Appendix A: References

1. Lightwave 3D [online]. NewTek. Available at: http://www.newtek.com/lightwave/ [2008 09 21].
2. Holomatix - Realtime Interactive Rendering Ray-tracing Software [online]. Holomatix. http://www.holomatix.com/ [2008 09 21].
3. Maurice van Creij. (2007). Website Template [online]. Delft, the Netherlands, Supershift. Available at: http://www.woollymittens.nl/portfolio/Commodore_Gaming/xhtml/T57_Select_C-kin.html [2008 09 21].

Introduction

ClassBehaviours is the result of several years of my development on a javascript platform that provides an easy way to implement often used user interface elements.

The principle behind my library is the parsing of an HTML document for certain keywords in the class-attribute of the elements (tags). When a class-attribute containing a keyword is found, the ClassBehaviours library will apply the relevant event handlers belonging to the keyword.

This way the scripted behaviour of user interface elements in a web page can very easily be applied and re-used without cluttering up the HTML source code with inline javascript.

My ClassBehaviours library has been successfully implemented in over a hundred websites, most of which can be found in the portfolio attachment of my CV or on the classbehaviours.com website.

Technical Aspects

Data Structures and Algorithms

I made the ClassBehaviours library itself object oriented and the main object contains modular child objects that provide the functionality. These modules include the main startup "class-attribute parsing" function as well as scripts I wrote for AJAX calls, sorting, searching, whipes/fades, cookies and browser-interoperability. Unused modules can easily be disabled and removed to save bandwidth.

To support the client-side Javascript functionality I developed XML web-services in C# and PHP to make prototype AJAX applications. The framework's documentation and examples website at ClassBehavours.com is also built in both C# and PHP, so example code can be used on Windows, Mac OSX and Linux development environments.

In my attached article "Technical Biography - Classbehaviours, the Javascript Framework Based on Class-name Parsing" in chapter "5. Javascript" I expose the source code of the core functionality of my framework as well as further explanation.

The ClassBehaviours library, through the years, has grown into a complex structure of objects and functions that has taught me a complete mastery of the Javascript API, a good knowledge of C# and PHP as well as advanced concepts such as object oriented programming, asynchronous javascript and XML (AJAX) and document object model (DOM) manipulation.

Ethical/Social Implications/Professional Practice

As soon as it became apparent that my ClassBehaviours library provided a useful and infinitely re-usable tool, my then employer Bart Manuel of Tam Tam bv allowed the source code to be made open source (GPL) with me as the project administrator and rights owner. As well as an ethical choice of my part, his permission has allowed me to transfer my framework between employers, their business partners and my peer developers without fear of legal conflicts about intelectual property. The code is never sold, but all parties involved profited greatly from the rapid development of web sites my framework facilitates.

Maintaining and managing my open source project has given me skills and knowledge about intellectual property law and the principles behind the GNU General Public License.

My project website at classbehaviours.com gives more information about the nature of the GPL licence.

Interpersonal Communications

My ClassBehaviours framework is used by many developers, both senior and junior. Integrating feedback and providing support is an important factor in the stability and interoperability of my framework.

I take great care in maintaining documentation and working examples for peer developers to work with.

Managing bugs reported by clients and features requested by my peers has greatly improved my skills in communications over the course of my framework's development. I also regularly consult management, designers and sales people in the ways my framework can be applied to decrease development time.

Program Design and Implementation

While it is true that my ClassBehaviours has grown into its role over the years as my skills increased, the core structure has been redesigned numerous times by me. When new browser technology is available it is incorporated in my framework as I redesign old and add new modules of functionality.

Javascript is the de-facto language of choice for client-side scripting in web sites, but I expanded on this choice by strictly maintaining an object oriented nature. I develop the supporting server-side code in both C# and PHP so the server platform used is not bound to any one operating system.

Every time my framework is implemented in a web-site it goes through the testing regime of the project in question. The feedback from this testing provides bug-reports the solution to which I can incorporate into the main trunk of my code.

I also maintain working examples and a complete documentation of all ClassBehaviours modules on a central project web site at classbehaviours.com

In keeping myself to these high standards, I have acquired very useful skills in the implementation and design process involved in the development of my framework.

Project Management

I am the project owner for the main trunk of my ClassBehaviours platform. My code is distributed under the GPL 3 open source licence on SourceForge.net and GoogleCode.com and I manage the code releases, expansions and redesigns.

Since my framework is meant to reduce development time, estimates for user interface elements are often asked of me. I consult in planning the required adaptations or extensions and set goals for their quality and performance in the resulting web site.

Managing the framework's development to encompass the wishes and requirement of clients and peers has proven to be very good training in project management.

Software Engineering and Methodologies

Developing, expanding and maintaining my ClassBehaviours framework is an ongoing and cyclic process.

Every website that implements the framework starts a new cycle of adaptations, bug fixes and redesign. As new projects introduced new demands, the framework has grown to support traditional web applications, AJAX applications and even desktop installation through Adobe Air. These expansions are not added without being rigorously tested for backward compatibility though.

The cyclic development methodology on the core of my framework was a very complex skill to develop, but a very important one to keep my framework modern and reliable.

Conclusion

My ClassBehaviours library is a very large project that has taken many years and is still in continuing development. As it has grown into a complete solution for user interface development, so have my skills in developing and managing the framework. ClassBehaviours contains the sum total of my programming skills and is a good example of my development as a programmer.

References

Please see my attached article "Technical Biography - Classbehaviours, the Javascript Framework Based on Class-name Parsing" for a complete documented explanation of this project with code samples.

More information on the ClassBehaviours framework as well as the working examples can be found on http://www.woollymittens.nl/

Introduction

For VdBJ I kept very good documentation about the development process. I was involved from concept to completion and the development cycle involved a wide range of techniques.

Technical Aspects

Data Structures and Algorithms

I constructed an XHTML web template from the graphical design using Cascading Stylesheets (CSS) for the layout. I chose an object oriented approach for structuring the Javascript required for the functionality of the interface. For the server interaction I developed a prototype XML web-service in C#.

To the main object I added child objects for every functional element represented in the graphical design. Using this structure of objects as a "skeleton" for the functionality I implemented all the properties, methods and event handlers. This modular design ensured that no screen element has dependencies on other elements in different branches or lower in the hierarchy of objects.

As website designs grew richer and more dynamic over the years I developed these skills as a method of keeping the development manageable.

Chapter "6. Scripted Functionality" of my attached article "Technical Biography - VdBJ a Marketing and Communications Website with an AJAX Interface" contains code examples and further documentation of the data structures used in the VdBJ project.

Ethical/Social Implications/Professional Practice

The design for the VdBJ website called for a completely scripted interface. Doing so without regard for the accessibility of the resulting site for users with visual disabilities or other restricting circumstances was unacceptable to me. After consulting the customer extra development time was put into the budget for making the site accessible for screen reading software and text browsers. As a result I was able to make a website that exposes it's content in a useful way to everyone, including search engine robots.

The XML web-service used for the retrieval of content from the database can render this to static HTML when more complex (AJAX) methods are not available to the user.

I have built websites to the strict standards of interoperability set out by the World Wide Web Consortium (W3C) as a matter of principle ever since my participation in the accessibility course of the Bartiméus institute for the blind. Accessibility is a legal requirement for all web-sites commissioned by the Dutch and many other governments and I have a good knowledge of these laws and regulations.

Interpersonal Communications

The customer had made the design for their website themselves, since they were part of the graphical sector. I had to consult the customer on the implications many of their design decisions had on the development time and build quality. A compromise was reached that allowed for most of their graphical design, without sacrificing accessibility.

From complex sites like this I have gained the skills needed to guide the customer to a satisfactory compromise between form and function.

The navigation of the website is based on AJAX functionality. This technique involves using an XML web-service to fetch data from the server without reloading the application after every user interaction. I designed the prototype of this web-service and worked closely with the database application developer assigned to this project to realize the designed functionality.

Developing the more database intensive AJAX applications has built my skills in working with the back-end developers.

Program Design and Implementation

I designed the VdBJ website as a single complex web application. All designed elements are tied into a structure of objects and functions.

Javascript is the de factor standard for the scripting of DHTML applications, but I expanded this choice into an object oriented method.

C# was chosen for the server-side component of the application. It was realized as an XML web-service as wel as for rendering in plain HTML.

The modular design allowed me to test the performance and correct function of each component independent of the rest.

Every instruction was documented in the source-code with comments and the methods used are all presented with working examples and detailed explanations on the project website of my development framework at ClassBehaviours.com .

The skills I gained from this approach allow web applications constructed this way to be supported and updated with very little effort.

Project Management

Managing the customer's expectations were a large part of my job here. The customer had a very clear idea of what they wanted, but no insight into the impact their choices had on the budget and deadline. More importantly, they had no frame of reference from the viewpoint of an end-user trying to access information on the site. After the impact of their choices were explained to them a compromise was reached that satisfied both the developers and the designers.

I was responsible for realizing the design as well as code stability and proper accessibility of the end product. Being involved in the complete process cycle forms very useful project management skills.

Software Engineering and Methodologies

The main challenge in the VdBJ project was translating what must obviously have been a fanciful brainstorm session on their side into a practical implementation that adhered to my standards for accessibility and maintenance.

Builds of this complexity benefit greatly from an object oriented approach. I developed the VdBJ website using a methodology one would develop a major desktop application with. This is quite uncommon for most dynamic scripted sites found around the internet, but something I insist on now for all my work.

Please refer to my attached article "Technical Biography - VdBJ a Marketing and Communications Website with an AJAX Interface" to follow this approach from concept to realisation.

Conclusion

The complexity and chosen development process for the VdBJ project offers a very good reflection of my skills as a web user interface developer, as I was involved in every stage.

References

Please see my attached article "Technical Biography - VdBJ a Marketing and Communications Website with an AJAX Interface" for a complete documented explanation of this project with code samples.

The developed website can be found at http://www.vdbj.nl/ , or failing that the original page templates can be found at http://www.woollymittens.nl/portfolio/vdbj/xhtml/ .