2014, January
When it comes to websites, my competency is in a site's
structure and in the technical implementation of a design. I
prefer simple visual designs (like this website), but am able to
implement more complex visual designs using modern web
technologies. In particular, I work best in
- HTML (XHTML compliant doable, familiar with many new HTML5 elements)
- JavaScript (mostly standard JavaScript, but can use JQuery as well)
- CSS
- PHP (some JSP, or CGI using Perl and C; ASP and others not a strength)
- MySQL/PostgreSQL databases
- Apache web server
- Linux hosting environment (preferrably with SSH access)
- Drupal configuration
Below you'll find a portfolio of pages I've worked on, including screenshots.
Websites I have worked on
University of Guelph's Graduate Student Association
Current website: http://www.uoguelph.ca/gsa/
Old website: see screenshots below
The University of Guelph's website was formerly hosted by the
Canadian Federation of Students (CFS), which resulted in limited
control and access to the underlying site, and the need to go
through extra work to modify content. After consultation with the
GSA Executive, it was determined that it would be best for the GSA
to host their site themselves, allowing quick and timely control
over content, presentation, and features.
This task involved setting up a new Drupal installation (7.x
series) on webspace the GSA acquired through the University of
Guelph's Computing and Communication Services group (CCS), and
porting over existing content. It also involved developing a new
theme (based on the existing Drupal Bartik theme). Drupal
configuration included selecting and integrating modules to ensure
easy content management for the GSA intern who would be
responsible for updating content.
Also involved was creating a web manual for GSA members on how
to update content within the site, as well as creating new
sections, and modifying core elements of its visual identity
(logo, colours, font, banner). It includes videos using HTML5
demonstrating how to make each change, as well as a dynamic table of contents
using JavaScript making updating the manual a bit easier.
Finally, a technical manual was also created explaining to
future website developers the design and structure of the site,
and guidelines for maintenance and upgrading.
|
After (2012) |
|
|
Current (2013) |
|
Before
(it had a low res logo before, missing in screenshot) |
|
Canadian Iaido and Jodo Fund
Current website: http://www.iaido-canada.com
Old website: old copy
The Canadian Iaido and Jodo Fund has had a functional website
for a while. While doing other work on it, maintaining content,
I requested permission to also update the style and layout.
Here I used PHP to template the common, invariant sections of
pages, and provide some neat effects, like a special wallpaper
for members, a visual identity, embeded video in pages using
HTML5, a custom error page that e-mails the administrator when
someone encounters a 404, and so forth.
|
|
After |
Before |
|
|
After |
Before |
Guelph Queer Equality
Current website: http://www.uoguelph.ca/~gqe/
Guelph Queer Equality supports members of the University of
Guelph LGBTQ+ community. For various reasons, when I happened
upon them they no longer had a web presence so I offered to
create one meeting their design idea.
The website is bright and welcoming. It uses HTML5's canvas to
draw a rainbow bordering the content area, web fonts, embeds a
Google Calendar, and manages updates through Blogger, making
updating the blog easy and simple.
|
|
After |
Before |
Global Newt Games
Current website: http://globalnewt.com
Old website: old copy
Global Newt Games is a provider of educational board games
educating children in zoology. They were interested in updating
their site before a trade show. The old site featured a
scrolling box, a tiled logo background, lots of visibly HTML
tables with bezel. Its information was also distributed over
more pages and required more clicks to find content. The
updated design flattened everything, provided more information
organised neatly on the home page, and provided a consistent
navigation structure through an invariant sidebar between
pages.
|
|
After |
Before |
South Grey Museum
Current website:
http://www.southgreymuseum.ca
Old website:
archive.org copy, http://www.greyhighlandsmuseum.com
The South Grey Museum is situated in my hometown of Flesherton,
Ontario, and serves the municipality of Grey Highlands. I found
out that the curator was having issues keeping it up to date,
because they did not have an accessible way to modify content
themselves. They typically sent changes to a web developer that
could take months to appear on the site, could have errors, and
cost money each time they had to do it.
Based on a conversation, it seemed that a small museum without
IT or financial resources to spare needed something that was
- free, or close to it
- required no technical maintenance on their part
- had an easy interface through which the curator could update directly
Consequently, after reviewing a few different options, it was
determined that Google Sites would be the best candiate. Google
Sites has the unfortunate draw-back of having limited theming
options.
|
|
After |
Before |
Some fun things involved using SVG to re-vectorise their logo,
whose original art was no longer available, and was previously a
JPEG with visible noise. Some other nice features, in going with
Google Sites, was free RSS syndication, mobile view, and the
ability to embed Google Docs.
KosmoKaryote
Current website:
http://www.kosmokaryote.org
This is the website you're currently at. I've had various
websites over the years, but this has existed since 2009,
perhaps.
- Cookie crumb trail (look under the title at the top of the page)
- Categories with RSS links
- Dynamic coloured star field (with a few 'shooting stars'
falling from sky) using JavaScript and CSS3
- Error pages that notify me of 404/403/etc.
- Web fonts
- Maintained via a git version control repositroy.
|
|
After |
Before |