eCommera
Table of Contents
Details
- Date Completed:20 November 2007
- Days/hours spent:4 days
- About the company:eCommera
- Software used:Photoshop CS3, Textmate
- Tag:CMS, CSS, Framework, MySQL, PHP, WordPress, XHTML
Currently working on…
Lots of freelance and e-commerce projects.
Latest Work
Search Portfolio
Developed this site for eCommera as their Senior Web Developer, which used my dust framework and Wordpress. This has to be the fatest website I've created with a working CMS, SEO consideration and viewable on all major browsers (Safari, Firefox, IE6-7 and Opera).
1. Introduction
"eCommera is an internet services business backed by West Coast Capital and Baugur Group that offers advisory, support and software services to help retailers develop and operate world-class e-commerce businesses." – http://www.ecommera.com/about/
When I first joined eCommera I discovered that their website wasn't up! My CTO was as keen as I to get a web presence online as soon as possible. I was given some photoshop files already with the design laid out and there's where I started my work…
2. Design
The only task left to me was to slice up the Photoshop files and convert it into web a page.
3. Development
I was given complete development freedom and naturally I choose my dust framework. I built this myself and knew it would get the site online quicker than if I were to search online for other alternatives.
eCommera solutions page turned into a web page
dust
A simplified version of my dust framework was used for this website. Not all my libraries were implemented and coding was easier. I tried to decrease the amount of effort that a designer spends trying to figure how to put a site together in HTML. The first things that I done was remove the necessity of having controller and model files. As most people wouldn't need a connection to a database or pre-processing infrastructure.
I also improved how the view files worked. A view file would now become like a HTML page with <html> tag, <head> tag, etc. Using these to get information to inject into the template being used. For example:
<html>
<head>
<title>This is a title of the page</title>
<script src="script.js" type="text/javascript></script>
</head>
<body>
<h1>Home page</h1>
<p>Some text for a paragraph</p>
</body>
</html>
The dust framework would now go through the view file and take everything inside the <head> tags and place them inside the <head> tags of the template. Everything inside the <body> tags would be placed into the variable $__view__ (which is already inside the template). I thought this would make it a lot easier for designers to place code specific to a page rather than sitting everything inside a template. They wouldn't have to remember annoying functions that injected code into the template.
Wordpress
For some parts of the website I thought it would be best to use a CMS so that others at eCommera could easily add items to the website without having to ask the web team. A quick analysis of the Photoshop concept designs I found the following needed CMS integration:
- Recruitment
- News and Events
- Clients (case studies)
Example of recruitment page using Wordpress backend
The rest of the site would be controlled by the web team (using static HTML). This made sure the site was under strict control and only specific pages could be changed.
Now all I had to do was link the Wordpress database with the dust framework a some simple SQL and I'm done:
SELECT wp_posts.post_title, wp_posts.post_name, wp_posts.post_date
FROM wp_posts, wp_term_relationships, wp_terms
WHERE wp_term_relationships.object_id = wp_posts.ID
AND wp_posts.post_status = 'publish'
AND wp_term_relationships.term_taxonomy_id = wp_terms.term_id
AND wp_terms.slug = '{$category}'
ORDER BY wp_posts.post_date;
This SQL allowed to get all the articles form a wordpress database under a certain category.
4. XHTML & CSS
All XHTML (to strict doctype), CSS and JavaScript was hand coded.