The FitPro Spring Convention 2007
Table of Contents
Details
- Date Completed:14 December 2006
- Days/hours spent:12 days, 4 hours
- About the company:Fitness Professionals
- Software used:Photoshop CS, TextMate
- Tag:Coldfusion, CSS, Framework, SWF (Flash 6 Actionscript 1), XHTML
Currently working on…
Lots of freelance and e-commerce projects.
Latest Work
Search Portfolio
I developed, hand coded the HTML/CSS and partially designed this website as FitPro's Middleweight Web Designer.
I had more of Front-End Web Developer role for the website this year; focusing my efforts on providing better usability, SEO (search engine optimisation), JavaScript functionality and code optimisation. As opposed to last year; where I concentrated mostly on the design and usability.
1. Introduction
FitPro has a Spring Convention based in Loughborough. It has a range of sessions consisting of lectures, master classes for freestyle fitness, personal training, children's fitness, etc.
"The event programme allows delegates to cross between disciplines and experience presentations from a more diverse range of presenters, on a wider scale then ever before. The FitPro Spring Convention therefore caters for today's multifaceted fitness professionals, without compromising the content and high standard that each of the individual events has attained over the years."
2. Design
I designed a concept based on a combination of one of the print designs that was under consideration and our Senior Web Designer's Photoshop template from which we tried to extract the main image of the man and to use it in an energetic and vibrant manner. We also thought it would be a nice touch to use part of the typography and create unusual shape that could be overlaid onto the menus and panels used across the website.
My concept design
While the look for the brochure was being considered, our Senior Web Designer started creating a design for convention website while I worked on developing the Cold Dust framework and hand coding all the HTML/CSS for the website.
He produced a good design, which I thought was a step forward in terms design improvements from last year. It had all right components for getting us started off.
Our Senior Web Designer's concept
I think the major difference was that he'd done a concept design for all the main pages. This really helped us found out what kind of functionality we needed from Cold Dust and the database. He also laid out the sitemap on a nice big piece of A3 (with small thumbnails of the pages) and this really helped me navigate my thoughts around what we should do web-wise to bring the website together in a consist way.
When the final design for the brochure was signed off. Luckily, we only had to spend one afternoon changing the design around to make it look similar.
The final concept
3. XHTML & CSS
Using XHTML Strict
The task of hand coding this whole website from scratch was my job. I had to make sure the HTML was written clearly and with comments so that we could use it for next year.
I wanted to move away from using the XHTML transitional DTD, as it was created to help people move away from HTML 4.0. Therefore, I changed the DTD to Strict for the templates. I did find some attributes, which were invalid (i.e. target for anchor tags or border for images, etc…) this was slightly annoying however it made me think of finding ways around these.
I also thought using the Strict DTD would also improve the way I wrote and used HTML. As this DTD tries to get one to rely more on CSS for positioning and styling rather than applying these inside the HTML tags. It allowed me to think about giving HTML elements better ID and class naming.
i.e. Using classes to apply certain looks and then the ID attribute to specify unique changes that might occur.
Splitting CSS code
Most web designers have one or two files for storing all their CSS. I used to have one file at first, with everything in it. Then I learnt to split the files into structure and typography, but I found that most of the CSS ended up going into typography. With these latter methods, I found it very difficult to go back and update a bit of CSS because it was everywhere.
When I was developing the Cold Dust (Coldfusion) and Dust (PHP) frameworks, I realised splitting data into their own unique files helps maintain and write more independent code. I applied this methodology, and found that this code separation also leads to less CSS errors and bugs on IE. As the CSS is maintainable and I think that's the key word.
For example, the navigation menu was put into the menu CSS file (menu.css). This way I could easily fix and maintain any errors without having the CSS scattered across one big file. The same was applied to forms, lists, typography and the structure (deals with the look of the website).
These were imported into a single CSS file (screen.css) and using the <link> method to attach it to the HTML file instead of using @import within <style> tags, as I found these to be clumsy and they don't work in IE 5.0 either.
Splitting CSS files
Eliminating IE hacks & CSS bugs
Internet Explorer, the bad boy of the all browsers. Never I have come across a web browser with so many unusual and strict CSS/JavaScript rules. That browser certainly likes to do its own thing when it comes to CSS. Therefore trying to eliminate the use of IE hacks or IE conditional statements is a difficult task, one that needs to be initiated right from the start.
And this is exactly what I did, right from the beginning when I was hand coding the HTML. I was using our Senior Web Designer's design concepts (printed out) and drawing out where the divs, paragraphs, etc would be called.
I then started to write the CSS code, using the V-model (for system design). This is where new code is tested against the system (or systems, i.e. in my terms on all major web browsers). It seems like very slow and painful task, but through my experience now, I know what the major browsers can do in terms of CSS.
So the code for each div in the layout (i.e. div#wrapper, div#pageBody, div#content, etc) was tested on all the major web browsers. This made sure that the CSS I was writing built a solid foundation for the website.
It was also very important to get away from using .class_name or #content and start being more specific to which element the CSS was pointing to. So using div.class_name or p.class_name, would make sure that any other elements with the same class names were not effected. I found this to be a common mistake of mine which would lead into CSS bugs.
4. JavaScript
Autocompleter
We decided on implementing a search functionality for people who knew what they wanted. As it would be quite time-consuming to go around the website looking for a presenter or session they already knew existed.
I had a play around with a lot of different "live search" JavaScripts. Before I chose one, I started testing them on all our installed browsers (IE5.5, IE6, IE7, Safari, Firefox), to see if they worked realiably. I really wanted to use a jQuery plugin as the jQuery framework is lightweight. However, the functionality we required was only found to work best in script.aculo.us library.
The implementation was fairly simple:
<script type="text/javascript">
// <![CDATA[
new Insertion.After('search_form', '<div id="search_results"></div>');
$('search').value = 'Search Presenters...'; // Default text in the search box
$('search').onclick = function() { if ($F('search') == 'Search Presenters...') $('search').value = ''; }
$('search').onblur = function() { if ($F('search') == '') $('search').value = 'Search Presenters...'; }
new Ajax.Autocompleter("search","search_results","/education/application/view/springconvention/search.cfm?ajax=true&");
// ]]>
</script>
I used the Autocompleter function in the Ajax prototype, which submitted data from the form to a file. All I need to do, was create an file which accessed the database and brought back results based on what the user typed in. The Autocompleter would do the rest for me.
script.aculo.us Autcompleter function implemented on the website
Sane JavaScript implementation
My short time as a developer (naturally being a designer), I've come to learn a solid model for implementing JavaScript onto any website. The first step is to create the non-JavaScript method (ie with normal page loading, form submission etc) using mircoformats. So that the data collected is separate from the HTML page. Then using JavaScript to submit or gain access to the data from the microformat page. This way both methods get the same data but in different ways.
Sane JavaScript implemenention
This model will keep the structure of the website secure in both non-JavaScript and JavaScript environments.
5. GoogleMaps
I thought it would be a good idea to implement GoogleMaps as I found it be a useful tool for locating places, and it was good chance to further improve my JavaScript skills.
The FitPro Spring Convention is located across several different parts of Loughborough university. I created a function which would apply a marker to the map with some basic text if the user clicked on it.
function createInfoMarker(point, html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click",
function() {
marker.openInfoWindowHtml('Loughborough University:
' + html + '');
}
);
return marker;
}
Now the difficult thing, was to find the exact locations and implement these into GoogleMaps. I couldn't use geocoding as that would need a database backend to search. The longitude and latitude computations made in GoogleMaps were different to standard ones. Therefore, I used GoogeEarth to find the longitude and latitude of sports hall, netball center, registration offce, etc. Then after much searching around on the net, I came across a website which would convert proper longitude and latitude coorindates into GoogleMaps coorindates.
Using GoogleEarth to find the exact locations of places in Loughborough university
var student_union = createInfoMarker(new GLatLng(52.76926666666667, -1.2276805555555557), 'Student Union');
map.addOverlay(student_union);
I applied these coordindates into GoogleMaps and the markers were positioned exactly
6. Flash
Home page banner
The purpose of the home page banner was to attract users to any promotion offers we had. In my eyes it also helped bring some spark to a website with a lot of text!
I love using Flash, but when I start, I think "Why I'm using this program at all!". Once I get back into my old "flash habits" and begin to love the program again and all the cool advantages it has over normal HTML. The way I can use vectors in Flash is like no other program I've seen before.
The Flash banner needed to have the same gradient used on the menu (located on the far left). This was fairly easy and the real creativity came in using the design, fonts, colours we had and make it come alive with animation.
Using the font (Hardy Fatt), I broke it up and applied a mask to each number of 2007. Then I animated the mask around the number to show like it's being drawn.
Creating the home page flash banner
Sponsors logos
Like with FitPro's Business Conference, there are a number of sponsors for The FitPro Spring Convention. I used the flash file that I created for the Business Conference. As I had reusability in mind when producing the file, so I made sure most of it could be used for another website in minimum setup time.
I had three frames, first for the initial setup, second frame for the incrementing the array and third for attaching the logo to the fade-in/fade-out move clip.
First frame
I used a multi-dimensional array to hold all the names and any other attributes for each logos.
_global.aSponsors = new Array ( ['eyetoy',0,false], ['premier',0,false]);
The first value is the name of the logo, while the second value is which group type (if applicable) the logo is in and the third value is whether it needs a background color.
Second frame
I used a variable called current_sponsor, and incremented that each time it played over this frame. I also applied an if statement to check to see if it was the last sponsor in the array, so it would loop back to the first logo.
Third frame
This frame was where the sponsor logo was attached to the animation in the movie clip. All the logos were placed inside their own movie clips and given linkage names, so that they could be used in the ActionScript.
this.sponsor.image.attachMovie (aSponsors[current_sponsor][0], 'movie1', this.getNextHighestDepth ());
this.sponsor.gotoAndPlay ('start');
Creating the Event Sponsors
Countdown
This would be a basic countdown that shows the number of days left till a specific day.
The first day for the convention is the 12th of April 2007. So I created this date and the current date using the Date class in Flash. The tricky part was finding out how many days are left from the current to the specific day of April 12th 2007.
I created variables for each month lending up to April. Then I put theses variables inside an array. I placed the array inside a for loop, with a couple of if statements adding or subtracting the number of days for that month onto the total number of days.
var convention_date = new Date(2007, 3, 13);
var today_date = new Date();
var nov_date = new Date(2006, 10, 30);
var dec_date = new Date(2006, 11, 31);
var jan_date = new Date(2007, 0, 31);
var feb_date = new Date(2007, 1, 28);
var mar_date = new Date(2007, 2, 31);
var apr_date = new Date(2007, 3, 13);
var month_array = Array ( nov_date, dec_date, jan_date, feb_date, mar_date, apr_date);
var days_left = 0;
for (var i = 0; i < month_array.length; i++) {
if (today_date.getFullYear() == '2006') {
if (month_array[i].getMonth() == today_date.getMonth()) {
days_left = month_array[i].getDate() - today_date.getDate();
} else {
days_left += month_array[i].getDate();
}
} else {
if (today_date.getMonth() == month_array[i].getMonth()) {
days_left = month_array[i].getDate() - today_date.getDate();
}
else if (today_date.getMonth() < month_array[i].getMonth()) {
days_left += month_array[i].getDate();
}
//trace("2007:" + month_array[i].getMonth());
}
}
this.days_text.text = days_left;
7. Development
Cold Dust
Development of Cold Dust went from strength to strength, ideas coming in left, right and centre! We realised we needed a way of globalising all logos, presenter images, styles, etc.
The framework will (if deemed useful) be used on all of the FitPro websites as a global framework to help bring all the websites inline with a constant look and feel.
Building on top of version 0.1.9 which is used for the Ambassador Programme website, I made some significant changes to the core system.
/system/
The system now contained folders for:
- Global adverts: adverts in Flash or GIF
- Global JavaScript: prototype/jquery to easily update all websites using it
- Global data: contact information, locations (stored as coldfusion structures)
- Global HTML: header, menu system, footer, templates, HTML files (such as terms and conditions or privacy commonly used all over the websites)
- Global images: sponsor logos, presenter images to easily update across all websites using it
- Global styles: common stylesheets used across the websites for consistency look and feel
/system/core/
The core folder also has a debugging file that shows relevant information for the current application.
I also added a route file, which applies a regular expression taken from the application configuration route file for the current controller. This means that one can specify characters what the URI can contain. If it doesn't contain the specified characters it will give the user a 404 error page.
i.e. http://www.website.com/index.cfm/music/file/12
<cfset add_route(Array('[[:alpha:]]', '[[:alpha:]]', '[[:digit:]]'))>
The above function only allows the first segment of the URI (the controller) to be alphabetic characters, as the same with the second segment (the view). The third part has to be a digit.
/application/view/controller/subview/
I also built the functionality to add subview pages. So pages within a view file. I know it adds complexity, but ever since I started using Cold Dust for creating this website I realised the greater need for flexibility. I tried to make the integration as simple as possible.
So I would create a subview folder, same name as the view file. Inside the view file, I'd put the following:
<div id="menu">
<cfset submenu('view_file')>
</div>
<div id="content">
<cfset subview('view_file')>
</div>
Now this (submenu() function) would generate a menu (unordered list) by reading the subview directory. The subview() function would then get the third part of the URI and insert the correct subview file. Simple!
SEO
Search Engine Optimisation is becoming ever increasingly important for websites. The need to complie, to how search engine bots go through your website is very important nowadays and companies even hire people specialised in this field.
Good for me though, as the Cold Dust framework was designed for this in mind. All the URL's even the dynamic ones would look as if they were static pages.
i.e. http://www.fitpro.com/education/index.cfm/springconvention/streams/personal-training
This URL is looking for the controller springconvention, view file streams and subview personal-training.
i.e. http://www.fitpro.com/education/index.cfm/springconvention/sessions/63
The URL is looking for the session with ID 63. Now this is a prettier and more logical URL than
http://www.fitpro.com/education/index.cfm?c=springconvention&v=sessions&id=63
Don't you think?
8. The future for Cold Dust
Continuing development work is still being carried out on Cold Dust (now at v0.2.1.5) to add improved menu control, subview control, application creation, and error handling.