desalasworks presents:

a selection of works by steven de salas

CMS, Websites

Species Finder Tasmania

University of Tasmania professor Peter McQuillan and former student Javier de Salas came up with an idea to enable the public to contribute to the worthy cause of cataloguing Tasmania’s fantastic biodiversity.

This is an example of how a simple wordpress site can turn a big idea into workable website.

Species finder helps the public catalog new species

The site enables anybody in the public to ‘Upload’ any photos they have taken of potential new species, where a few selected ‘Specialists’ can review them. Once a new species, or example or a rare species has been found, it is catalogued and added the site including the location where the particular specimen was found.

Rare species can be catalogued by specialists and located on a map for future reference.

If you would like to contribute to this worthy cause please follow this link for instructions.

CMS, Code

WordPress Compression Plugin

This plugin allows your WordPress blog to output pages compressed in gzip format if a browser supports compression.

Plugin Homepage

You can now find the plugin listed in WordPress.org.

Coding the Plugin

  • I noticed once I installed WordPress and started using it for desalasworks.com that it does not support gzip HTTP compression, apparently this support was removed from version 2.5 onwards.
  • HTTP Compression is a no-brainer for optimising your blog. HTTP compression generally means a 60-80% reduction in page size (and broadband usage) as well as an increase in download speeds of 3x to 4x.
  • As of January 2010, more than 99% of browsers support compression. For the less than 1% that do not, WordPress will still send them uncompressed pages.
  • Having already enabled compression on my own VisualSite (.NET) Content Management System I decided to write a plugin for WordPress to enable this as well.
  • The key component of the plugin is a call to the zlib PHP compression library as follows
    • if(!ob_start(“ob_gzhandler”)) ob_start();
  • For more information have a look here: PHP ob_gzhandler

Download The Plugin

Installing the Plugin

  1. Download the `wp-http-compression.zip` plugin to your desktop.
  2. Navigate to the ‘Plugins’ menu in WordPress
  3. Click ‘Add New’.
  4. Select ‘Upload’ from the options at top of the page.
  5. Select the file `wp-http-compression.1.0.zip` and press ‘Install Now’.
  6. You should get a message saying ‘Plugin Installed successfully’.
  7. Activate the plugin.
  8. Go to http://ismyblogworking.com/ to test compression
  9. Check “Page GZip” on the right hand size.
  10. Check “Bandwidth saved by compression” on the left hand side.

CMS, Websites

Segresco.com

A company brochure website template built on a bespoke ASP.NET content management system: VisualSite CMS which I have built and continue to maintain for a small client base.

Designing the Front Page Template

  • Black/Yellow design following client branding
  • Construction “Blueprint” features indicating nature of the website
  • Simple and striking looks.

Segresco.com Main Page

Designing the Sub-Page template

  • Sub-menu uses the yellow band directly below 1st level
  • Notice the “VisualSite CMS” button used to log into admin area

Segresco Subpage

In-Context Editing

  • Apply in-context editing for changing content directly on the page
  • Notice “Administration” area and “Log out” button to revert to normal format

Segresco - In Context Editing

Managing Image Library

  • Image Uploads and File Management
  • Integration into rich HTML editor tool

SEGRESCO Image Library

CMS, Websites

Barclays Private Equity

Template design and implementation of Vignette CMS (Content Management System) for Barclays Private Equity, a well known UK and European Private Equity firm.

Designing the Front Page Template

  • Light-Blue page designed based on Parent Company – Barclays PLC.
  • Rounded borders implemented in CSS
  • Highly accessible Menu and Search function using CSS and W3C standards.
  • No HTML tables.
  • News / Award boxes implemented as Vignette “content types”
  • Uses JSP-based component model and Java framework.

BPE Main Page

Designing the Sub-Page Template

  • Mostly based on the home-page with few modifications
  • Menu implementation using a faded version of Barclays Blue
  • Collapsable Right-Hand Box model.

BPE Subpage

Designing Specific-Area Templates

  • Mostly based on the home-page
  • Tabular format based on available data
  • Using CSS and W3C Accessible specifications

BPE Deals

Workflow Implementation

  • Create content approval workflows in Visio
  • Export into XML format
  • Import into Vignette platform

BPE Workflow

All Together Now

  • Implementation on Vignette 7 CMS Platform
  • Proprietary Java framework
  • JSP, XSLT template component model

BPE Vignette CMS

CMS, Intranet

Nandos’ Intranet

A central point of contact for all Nandos’ stores. From the central login page each user has a set of applications which they can launch automatically by just clicking on the icon.

Designing the Front Page Layout

  • 3-Column template using highly-colourful branding as per Nandos’ image.
  • Content is based on user profile with 3 types of users: Store Login, Area Manager Login, IT Login
  • Icon-Based navigation used for launching applications.
  • “Pass-though” authentication, user login parameters are forwarded to each application using HTTP POST
  • Login information and Noticeboard.

Nandos Intranet Point of Entry

Designing Application Layout for a Store

  • Sample screen for a Nandos Store Login
  • Menu contains customised options
  • Key item is “End Of Day” button that stands sepparate from the rest

Nandos Store Login

Putting it all together with a Content Management System

  • Site integrated into ActiveWeb CMS writte in ASP.NET
  • ASP.NET C# and XML/XSLT based templates to provide flexibility
  • CMS can add new application for users to launch as needed.

CMS, Websites

Sdesalas.com

The 6th incarnation of my travel blog. This time using a template over a bespoke Content Management System (VisualSite CMS) that I wrote myself using ASP.NET C# and CSS / Javascript.

Designing the Front Page Template

  • Blue/White “Where in the World is Steven de Salas?” design borrowed and enhanced from previous offering.
  • Accessible CSS Menu Navigation
  • XHTML and W3C standards compliant
  • Featuring new Search Box and RSS subscription

Sdesalas.com CMS Template

Designing the Sub-Page Template

  • Mostly based on Home page with a few exceptions
  • Page heading as white on dark blue.
  • Two-stage menu layout, featuring top level and side-level menus

SDESALAS Subpage

Designing the Search Results Page Template

  • Search result listing using CSS and W3C standards
  • Support for Pagination (Page 1, 2, 3 etc).

SDESALAS Search Results

Menu Administration

  • Using Drag-and-Drop tree interface for easy menu changes.
  • Support hidden pages and redirects

SDESALAS Menu Admin