Portfolio

Aspaas Sykler web site

• Client: Jørn Aspaas Hansen
• Developers: 1
• Users: Unknown
• Availability: Web page
• Started: July 2007
• Status: Production

Description

Aspaas Sykler is a bicycle sales & repair company in Larvik, Norway. During development I focused mainly on accessibility and usability, to be able to reach as many customers as possible, and then on flexibility in the content and design. The result:

• The content is highly semantic. This makes it easier for search engines and browsers without CSS support to do useful things with it.
• Everything works even if JavaScript is turned off or not supported.
• The markup and style sheets are standard compliant, and should therefore be parsed and displayed correctly by all existing and future standard compliant browsers.
• Design, content and logic are decoupled, so it’s not necessary to edit more than one file for most changes.
• The pages can be viewed on big and small screens and zoomed in and out without breaking the layout.

Technologies & techniques used

• XHTML
• XSLT
• PHP
• CSS
• JavaScript
• hCard
• vCard
• hCalendar
• Atom

Misc. shell scripts

• Client: N/A; personal project
• Developers: 1
• Users: 1
• Availability: Web page
• Started: 2006
• Status: Production

Description

After developing a few shell scripts for personal use, I’ve started to make them more generic and to publish them as they are built on my blog. Some example scripts:

• Create symbolic links to files recursively
• Synchronize vCard address books with mobile phones
• Mount and unmount ISO files in Nautilus & shell

Technologies & techniques used

• Bourne shell
• Bash
• Perl
• Subversion
• vCard
• WordPress
• FTP

SharePoint site defaults

• Client: CERN IT department
• Developers: 1
• Users: 1
• Availability: N/A
• Started: October 2007
• Status: Production

Description

By deploying this package on a SharePoint server, a site administrator can apply the CERN specific settings. This includes changing some site properties and enabling a feature staple feature, which is a “meta-feature” to enable other features.

Technologies & techniques used

• PowerShell
• C#
• Batch files
• XML
• Visual SourceSafe

Database sanity checks

• Client: Orange Communications SA
• Developers: 1
• Users: 1
• Availability: N/A; Company property
• Started: November 2006
• Status: Production

Description

As responsible for reference data on several schemas on three databases, it’s useful for me to get quick reports about the status of environments. To this end, I’ve created scripts to do the following:

• Run SELECT 1 FROM synonym WHERE ROWNUM = 1 on all synonyms to check that they are pointing to accessible objects. Returns user name, database, synonym name, error number, and error text for each error.
• Collect synonym names from several users into a table belonging to a separate user. Used with an SQL query to determine which synonyms are missing. It’s worth noting that the previous script to obtain the same information was reported to take about 5 hours to run, while the new script and SQL together take about 5 minutes.
• Escalating comparisons of tables in two environments:
  1. Tables exist
  2. Columns and data types are identical
  3. Row counts are identical

All of the scripts are robust (checking that the correct input parameters and files are available before processing, reporting any SQL or SQL*Plus errors), fast (minimized complexity and amount of SQL*Plus executions), unintrusive (they don’t change the target environments, and don’t require extra grants), suitable for pipelining, and properly documented.

Some auxiliary scripts:

• Output all synonyms for a single user
• Unit tests of the main scripts
• Output any single column

Technologies & techniques used

• Korn shell
• Oracle SQL
• Oracle SQL*Plus
• Perl

MTF List Interface

• Client: CERN TS department
• Developers: 3*
• Users: All (5397 in August 2006) MTF users have access
• Availability: Source code Other files
• Started: July 2005
• Status: Production

*No functional changes were done by the other developers.

Description

One of the limitations of the MTF web interface was that objects could only be edited individually. Using the existing search facilities as an entry point, the MTF List Interface enables users to edit attributes or add documents to any or all objects. The programming included changing the existing editing functions to handle multiple objects, adding some new editing functions, adding a filtering feature after the search page, and creating the web interface.

Technologies & techniques used

• Oracle PL/SQL
• Oracle SQL
• XHTML
• CSS
• WCAG

Screenshots

• The entry page, enabling users to filter which job types they want to edit

• The main interface, showing a table of jobs selected for editing

LIMO

• Client: CERN TS department
• Developers: 1
• Users: 3 teams from external contractors
• Availability: Anonymous Subversion repository
• Started: January 2005
• Status: Production

Description

For several years, Microsoft Excel templates have been used to import MTF data. This has been time consuming, mainly because typing errors are only detected on import, and the file will then have to be returned the user, corrected, and re–submitted. Data could also be imported via the web interface, one object at a time.

For the installation phase of the LHC project, there would be no Internet connection (making import using the web interface impossible), and the data sent at the end of the work day would have to be imported by the next morning (making the use of Excel templates increase the risk of work delay). To ameliorate this, I proposed using an XForms based client–side system where users would be notified if they attempted to enter invalid data. The resulting system is now used by external contracters at CERN working in the LHC tunnel, and has improved the quality of the submitted data.

Major features include:

• Graphical installer / uninstaller
• Input validation
• Nearest neighbor search
• Work history
• Keyboard shortcuts

The installation package includes:

• Java SDK
• Apache Tomcat
• Chiba
• LIMO XForms and auxiliary files
• Mozilla Firefox
• Start menu shortcuts

Technologies, software & techniques used

• XForms
• XHTML
• XML Schema
• XSLT
• NSIS
• CSS
• WCAG

Screenshots

• Main interface of LIMO during work

• Typical error message

• Slot search result

• Equipment tab

ETRACS

• Client: CERN TS department
• Developers: 3
• Users: Unknown*
• Availability: Source code Other files
• Started: April 2005
• Status: Production

*User statistics are not created, but one week (February 6–12, 2006) 21 requests were sent.

Description

CERN has long had a web interface, EDH, where transport of physical objects can be requested. Some of the requests are created often, are triggered by known processes, follow specified rules for their contents, and are necessary for insurance matters up to 1 million Swiss francs (about $760,000). I did most of the programming of a system to automate this process, which has now been extended several times to handle other transport types. The development was done in collaboration with IT department personnel working on EDH.

Points 2 through 5 of the process which follows is handled by my code:

1. A user changes the status of an object in MTF
2. A periodical job running on MTF catches the event(s)
3. Code on the MTF side gathers the necessary information and generates XML
4. The XML is sent to EDH
5. An email is sent indicating the result of the sending and the handling of the previous round in EDH
6. A periodic job at EDH generates a transport request from the XML
7. EDH updates the status of the XML, indicating any errors

Technologies & techniques used

• Oracle PL/SQL
• XML

Screenshots

• EDH document created by ETRACS

LHC Installation Circular Dashboard

• Client: CERN TS department
• Developers: 1
• Users: All >5000 MTF users have access
• Availability: Source code
• Started: January 2006
• Status: Production

Description

The original LHC Installation Dashboard in MTF shows individual functional positions (‘slots’), and the status of the work (‘jobs’) on each slot which have to be done to finish the installation. The resolution is on the individual jobs, and the information is shown in a table. Later, an interface was needed to show the aggregated status of slot installation for the whole LHC. Since the LHC tunnel runs in a circle, it would be appropriate to display information for the whole tunnel as a ring. I suggested using SVG for this, and developed a system which would generate a line for each of the slots, and then rotate them into place according to their position. The cryogenic distribution line (QRL) and magnet slots are separate, and are therefore displayed in two rings.

Technologies & techniques used

• Oracle PL/SQL
• SVG
• XHTML
• CSS
• WCAG

Screenshots

• The LHC Installation Circular Dashboard

MTF markup & CSS tweaks

• Client: CERN TS department
• Developers: 1
• Users: All (5397 in August 2006) MTF users have access
• Availability: Source code; see list below
• Started: N/A; Several independent developments
• Status: Development / Production

Description

By introducing CSS and semantic markup as an alternative to table layouts and presentational markup, I have reduced the size and load time of all the MTF web pages. Measurable improvements include:

• MTF footer, reduced markup by 82%* and code by 68%†
• The central text output function, reduced markup by 60% and code by 97%
• The MTF main menu, reduced markup by 79%, and code by 53%
• Added one CSS file

*Measured in bytes

†Measured in lines of code

Other improvements:

• Looks nearly identical all browsers
• Better WCAG compliance
• Better semantics for screen readers and other machine processing
• Better readability, since the background no longer shows up between text lines
• Better maintainability, because of shorter code and output

Technologies & techniques used

• Oracle PL/SQL
• XHTML
• CSS
• WCAG

Screenshots

• Before modifying the MTF main menu
• After modifying the MTF main menu

Filterous

• Client: N/A; personal project
• Developers: 1
• Users: N/A
• Availability: source & installation files
• Started: February 2005
• Status: Production

Description

del.icio.us is an online bookmarking service which uses tags to order the bookmarks for later retrieval by filtering using the “AND” and “NOT” operators. After using this service for about a month, I found the filtering facilities on the site lacking, since no “OR” operator was available, and the “NOT” operator was not very practical.

Since all bookmarks could easily be downloaded using the API functions, I wrote a web interface where I could synchronize the bookmarks locally and filter them using the “AND”, “OR”, “XOR”, and “NOT” operators. Later, I expanded the functionality so that any del.icio.us user could use it, and so that the URL, description, or notes fields could also be used for filtering. In the latest iteration, the interface is now a shell script.

Technologies & techniques used

• Python
• PHP
• XHTML
• XSLT
• CSS
• JavaScript
• XML
• WCAG

Infoarket

• Client: NTNU
• Developers: Unknown*
• Users: Unknown; 4570 copies distributed
• Availability: Original (39.7 MB) PDF
• Started: June 2003
• Status: Unknown

*Previous versions were made by other employees in earlier years.

Description

Infoarket is a two page pamphlet with instructions for how to get a user name and password for the NTNU computer systems, and with an ad for a student PC offer on the verso page. It is distributed to new students by the faculties.

Software used

• Adobe InDesign
• Adobe Photoshop
• Adobe Illustrator
• Adobe Reader
• Acrobat Distiller

The Computer Guide

• Client: Orakeltjenesten
• Developers: Unknown*
• Users: Unknown; 5000 copies distributed
• Availability: Original (3.3 MB) PDF
• Started: June 2003
• Status: Obsolete

*Previous versions were made by other employees in earlier years.

Description

The Computer Guide, “Dataguiden” in Norwegian, is an information leaflet with miscellaneous tips for students and faculty at NTNU, regarding the use of the computing facilities. The Computer Guide is maintained and distributed by NTNU’s central helpdesk, Orakeltjenesten. My changes included making the flow around images automatic, so it did not have to be controlled by adding whitespace manually, and updating the content.

Software used

• Adobe InDesign
• Adobe Photoshop
• Adobe Illustrator
• CorelDraw
• Adobe Reader
• Acrobat Distiller