The End

Now that the project has come to an end I am overall happy with how it has turned out and I am happy with the progress I have made over the past few months and would like to take the project further and maybe turn it into an iPhone app.

The Final Countdown

Final week and still a number of things to get into the website, this weeks was spent putting all final touches on the website and performing spell checks and making sure all links where working. I spent a day tidying up and validating my website making sure that it met web standards and that the code was easily read and broke down.

Example diets and workouts

Both these pages have been created using information that I have gathered up during my own personal reading. I have created an example workout based around the workouts that I have provide within my website. It gives the user two example; one for people with a steady lifestyle and one for people with a busy lifestyles.

Both workouts are targeted to exercise the full body and have been split up so that the separate days are different, this will allow the user to keep their muscles guessing and the workouts wont get repetitive.

Example diets allow the user to see a quick guide to how they should be eating throughout a day when exercising. I provided a meal plan tat gives them all the nutrition that is needed to help the boy loose weight and tone up while helping build and repair muscle.

I put all this content on the page by using a simple table to hold the content; I also custom styled the table so it fitted in with the style of the website.

Top Ten

I also created a page that gives the user a top ten list of items that everyone who is looking to keep fit and have an active lifestyle should keep in their kitchen.

HTML5 Video

The more I looked at my website the more I began to think I didn’t have that much going on so I decided that I needed to add something else and since I am working with video what better than to add some HTML5 to embed the videos with.

At first I was not sure if it was a good idea to start making big changes at this stage but in the end I went for it and it didn’t take as long as I first thought. Also it had its advantages, as I was able to use videos with very small file sizes and still keep the quality of the video.

I had to provide both an .mp4 and .ogv format for the videos as the different browsers supported different video encoding types. Safari and Chrome both supported .mp4 while Firefox supported .ogv. Internet explorer did not support HTML5 at all which is why I still provided the vimeo uploads so that any browser that did not support HTML5 would automatically load the vimeo uploads.

When including the HTML5 code within my web pages everything seems to work fine until I viewed the videos in Chrome. Within Chrome the videos appeared to be pixilated when the same video loaded with perfect quality in Safari. This was very annoying as it made the rest of the webpage look untidy. This was a problem that I was unable to solve. I searched and search the Internet, I asked as many tutors and lecturers as I could and no one seemed to understand why this was happening. At first I thought it had something to do with the way I had encoded the video but I contacted Tim potter and asked him what he had used to encoded his videos for his HTML5 project vault.com and I followed the same steps he took and still ended up with no result. As a result of this I had to leave it as they where, although there was a small problem with quality it did not affect the users viewing.

Image Fade

Another problem that I had to fix this week was the image hove on the homepage. When the user hovered a particular muscle group the image faded out to grayscale leaving only the working muscle in colour. But within safari this don not work, instead it was very rigid and when the user hovered the image the fade did not happen, what did happen as the image stalled in its current state then jumped straight to the grayscale image without any effect.

I tested this effect within safari when it wasn’t in conjunction with any other jQuery documents and it worked fine so if was clearly an issue to do with different pieces of code interfering with each other.

To fix this problem I started from scratch with this effect and follow a different path, in the end the problem was solved and I was quite pleased.

Anatomy Tabs

I decided this week to change the way in which my muscle anatomy page is presented, instead of just having two basic images on the page I was going to use tabs do the user can switch between the two. The original way I had it just looked crap and it desperately needed to be changed.

Before

I used jQuery code that I had created for my jQuery module last semester, this code was simple and shot keeping my code tidy and it didn’t require me to have and external library installed apart fro the general jQuery 1.4 library.

	 $(document).ready(function(){
	    $('.anatomy div').hide();
	    $('.anatomy div:first').show(); 
	    $('.anatomy ul li:first').addClass('active'); 
	    $('.anatomy ul li a').click(function(){ 
	    $('.anatomy ul li').removeClass('active'); 
	    $(this).parent().addClass('active');
	    var currentTab = $(this).attr('href'); 
	    $('.anatomy div').hide();
	    $(currentTab).show();
	    return false;
	 });
	});
	

After

Problems

After the soft launch had passed it was now time to get stuck back into work and get the rest of the content for my site created and put together. I have a list of things that I plan to do over the next few weeks which included both new elements and updating current elements within the website.

New Elements

• Edit navigation (php)
• HTML5 video
• Stretches
• Example Workouts
• Example Diets
• Cardiovascular

Updated Elements/Problem Fixing

• Disclaimer
• Homepage Image Fade
• Image Loading Times

PHP Navigation

The first thing I change was the navigation. I realised after it going live that the workouts button in the main navigation did not really make sense and did not explain its destination very well. It was labeled ‘workouts’ when really it brought the user to a section that provided them with the ability to select different muscles. After deciding to rename and change this button I realised that I was going to have to make my way through around 15 or more different HTML files and change them individually.

I decided to use a tiny piece of php that would allow me to create the header as its own php document and be called in to each of the different pages, this meant if I ever needed to make changes to the header again I only needed to change one file which would in turn charge them all. I used this code to do the same with the footer as both these would be consistent through the entire website.

Image Size

One other problem that I needed to fix right away was the image loading time, the images that I was using throughout my website where quite details so they seemed to be taking a long time to load when the website was online, this was a problem as no-one wants to sit around waiting on images loading.

I needed to go back to the image folder and bring all my images into Photoshop and save them for web (something I should have been doing from the very start). This was time consuming but in the end it is going to save a lot of time in the long run.

Stretches and Cardiovascular

This week I went back to the gym to record the remainder of my workout videos and gather images for my stretches and cardio sections.

So I spent some of this week doing more video editing and writing content for these new sections. The stretches section shows the users the best ways to warm up and cool down before and after exercise.

For the cardio and stretches sections I mostly spent time typing out content and cropping/editing images.

Soft Launch

This week was the deadline for soft launch so I had to make sure I was ready.

Within this final week I finished off putting content into my website, I got the last few videos finished at the start of the week which just left me with writing the rest of the instructional information for the workout videos.

At the moment I am happy with where my website is going but there is still a lot of work to be done, at present only around half of the website content is in and I still have several videos to record.

I hope that this soft launch will be able to get me some good feedback from user on what I could do to change the usability of the website for the official launch in the upcoming weeks.

Workout Content

Throughout week eight I continued to create the content for the muscle workout pages and by the end of this week I had managed to get 90% of the web pages created.

Nutrition Overview

I also used this week to write the content for my nutrition pages. The content that I gathered for these pages was all generated from reading that I have done over the past year. Within the page I included a brief overview on why nutrition is important and why you need to concentrate more on your food intake that you do on your weight training.

Within the nutrition page I have also included a chart that shows how your daily food intake can be broken down into 6 small meals so that your body will get an even supply of food throughout the day.

Protein Overview

As protein is a very important part of muscle building I have provided a page that contains an over view on protein and why it is important and a list of foods that are all high in protein and will help build and repair muscle.

The protein section was easy enough to write as I have spent plenty of time personally experimenting with different foods over the past year so I was able to provide a list of foods that have helped me build muscle and foods that have high protein content based on their weight.

This week I have been very busy getting all of my content typed and rounded up as it is coming very close to the deadline for the soft launch. For this hand in a plan to have the guts of the website built and most of the content included this would mean that within the last few week all I will need to do is add more content and fix up minor problems that might arise over the weeks following soft launch.

Muscle Anatomy

The muscle anatomy section of the website was created this week. I have provided two images that both show an annotated illustration of the human body.

Within the two images I have provided a list of each of the main muscle groups and a list of each muscle that is being exercised during any of the videos that I am including within this website. The reason I included this is to give the user a greater understanding of where each muscle is located.

Workout Content

This week I decided to change the layout of my exercise workouts page, I had too many problems with the div styling and layout because of the way the code I had was being executed also I was not liking the direction that the look of it was taking.

I followed another tutorial that’s allowed me to change the layout of the workouts page and include a better user-friendlier layout.

I like this page a lot better than the previous one as it is more clear and easy to read. Within this new layout I have been able to include a lot more information than before.

Within the new workout page I have been able to include:

• List of muscle exercises.
• Muscle information.
• Illustration of muscles active in the chosen workout.
• List of muscles active in the chosen workout (Primary and secondary muscles.)
• Secondary navigation containing the list of muscles.

Now that I had decided on how the layout of my workouts page would look I started to place the content into these pages. I had now gotten each of the first set of videos uploaded to vimeo and had the ability to link them into my website. The content for each muscle included a step-by-step guide on how each exercise was performed it also included some points that needed to be taken into account when these exercise where being performed.

When the user clicks the different exercise there is a simple animation slider that takes effect to allow the content to be change on the page. This allows me to keep all muscles and their particular exercises kept together on one web page instead of having folders full of separate webpage’s. The simple animation is shown in the screens shots below.

Step One

Step Two

Step Three

Video Editing

At the beginning of this week I continued editing my workout videos, I managed to get them finished by Tuesday and get them all updated to vimeo by Thursday evening.

Toolbox Content

This week I worked on getting the toolbox section of the website completed, within this section I had two calculators one calculating body fat and the other calculating the users B.M.I. The two calculators where created using JavaScript and can be found here (link). I then personally custom styled them using CSS.

The first calculator I created was the B.M.I. calculator, I decided to style it so that the main element of the calculator was the result, and I increased the font size dramatically so that it stood out from the rest of the page.

Within this page I included an introduction to what your B.M.I. is and a formula that would allow the user to calculate their body mass index when they are away from the website.

A table was also included that gave the user a chart to show them where they stood on the scale of weight classification.

At first I planned to includes both calculator on the same page but after creating and styling the second calculator I found that the scripts that where needed to run each of the calculators cancelled each other out, this meant that I then needed to put each of them on a separate page so that each script was being executed individually.

Video Editing

After getting a handful of my videos taken last week I have brought them into Final Cut and have began editing them. I want to keep them simple and do not want to many effects going on and result in the user being distracted from the main point at hand. I want the video to be all about the exercise.

Before I could begin doing any cropping or video editing I firstly needed to create custom settings so that the videos I was importing from the camera would stay ate their current quality and resolution.

I want to keep my videos short so the user does not loose interest; I have cropped the videos down to around 20-30 seconds each. I wanted to give my videos more of a personal feel by adding some effect so I have added a title image at both the start and end of the video, like I have stated previous I do not want my videos to be too in your face so the only effect I have added is a simple fade in/out.

I was quite happy with how my videos turned out once they where exported from final cut, the resolution of them was very high and the file size was quite large meaning it was going to take some time to get them uploaded to vimeo.

Vimeo

After testing my videos with vimeo I have decided that I will use this website to host my website, vimeo is the best hosting site I found as the style of the video is clean and professional looking and allows me the ability to customise the video embed.

Content Styling

This week I done a bit of research into how I could get my thumbnails scrolling from left to right when the mouse was placed within the div.

I wanted to be able to use jQuery to call in each video so that I would not have to create a web page for each individual muscle. To do this I found a tutorial that gave me a tab option that meant each video would be hidden but would have the ability to be shown when selected.

The tutorial I used can be found online at (link). It was a fairly easy tutorial to follow and I was able to customise it to suit my own personal project quite well. Within this page I will be providing the user with both a video in which the user can watch the exercise be preformed and a list of important points that need to be taken into account when performing the exercise.

Using this type of element within the webpage will save me a lot of time and save the user a lot of hassle when it comes to browsing the website.

Using this type of element within the webpage will save me a lot of time and save the user a lot of hassle when it comes to browsing the website. I have tested it out and found that it works with Vimeo. To do this I simply embedded a video that my friend Sean Mulvenna has hosted on his Vimeo account.

Video Recording

Also this week I managed to get a handful of my videos taken. I done a bit of networking and in the end found someone who works in the UUJ gym that could help me. He was able to get me access to one of the private strength and conditioning suites, which meant any other gym goers did not disturb us. This also meant I did not have to worry about the risk of other people having a problem with the camera being in the gym.

I got the videos uploaded and most of them turned out very well, I now have a handful of videos that I can edit an use to populate my website in time for the soft launch.

Primary Navigation Scroll

This week I done a bit of research into how I could get my thumbnails scrolling from left to right when the mouse was placed within the div.

After a bit of research I found a tutorial that let me do just that (link). After playing around a finally getting it working I then decided tat having a set of static thumbnails that scrolled from left to right was not enough.

As I stated before my plan is to make my website as interactive as possible but keep it looking professional. So I decided to add a gentle grayscale fade on image hover so that the user was given some feedback to let them know which muscle group the are selecting.

To do this I also followed a tutorial online (link) that used jQuery and CSS. The jQuery executed an event that selected a CSS class to reposition the image giving the effect of a fade.

I still was not leased with how the hover was looking so I though of grey scaling out the muscles that are not being used and keep the primary muscles used for the selected muscle highlighted. I also added a very faint radial gradient to give more of faded out effect.

Below is an example of how this mouse scroll will be presented on my index page of the website. I am happy with how this has turned out and I find it to be simple yet effective and is a nice way for the user to be presented when they first visit my website.

Disclaimer

After speaking to Paul we also decided I should put some sort of disclaimer to keep myself safe. This disclaimer will warn any users that they need to consult their doctors before performing any exercises and that muscleandsize.com will not be held responsible for any injuries caused while using the information and content contained within the website.

As this piece of information is not going to require a lot of space I have decided to present it using a light-box type effect. I will add and effect so that when the link is selected it will present the user with a small div with content that will overlay all the sites content and also add a mask to block out the irrelevant content.

Navigation

Also this week I have looked into my website navigation, I am stuck at the point whether or not to have an animated jQuery navigation or just to stick with static HTML and CSS. Although I want to have as much interaction as possible I do not want to over do it and the site to be sore on both the eyes and head. I think that as I have used jQuery within the main scroller on the homepage that I could get away with having the secondary navigation static rollovers.

After playing around with the navigation and adding things such as a fade I decided to just stick with the static CSS rollover, this way any text links within the website will all be kept consistent.

Below is an example of how my homepage looks so far.

Experimentation

After playing around with the image map last week i done some more searching and managed to find another one that let me select more that one hotpoint at a time, this could come in handy as could provide the user with both the muscle image as well as a named muscle description.

Below is an example of how this image map will work, the example is a very simple one and if used i will spend a lot more time fixing it up to look professional.

Sketches

I have created a very quick and simple sketch idea for a website layout. I plan to stick with my initial idea of having the human body as the main navigation the website index.

Photoshop Comps

After looking at the sketch I also put together some Photoshop comps of what I would like my website to look like. I want the site to stay interesting and not to be like other fitness websites that all seem to have a theme that they stick to. I took the initial sketch and made two Photoshop variations of it using slightly different styles.

After doing the sketch and putting together the two Photoshop comps I realised that I have not really taken the fact that I planned on using jQuery within my website into account, yes the image hover used a little bIt of jQuery to produce the colour fade when a muscle was hovered but I want to provide more interaction with the user.

I decided to try a different approach and forget about having the human body as a whole on the opening page and thought about making each muscle group into thumbnails and using these thumbnails as a means of interaction.

Once again I done another very quick sketch followed by a Photoshop test showing a potential website layout.

Above is a third idea that I put together using thumbnails. I plan to have the images scroll along the centre of the screen on mouse movement left or right. This will allow me to have more interaction plus it will enable me to include more elements of jQuery within my website.

Experimentation

During the first week back I have been playing around trying to figure out the best way to create a rollover effect that will allow the user to hover over and highlight each muscle group on an image. Below is an example of what I want to happen on image rollover.

At first I was planning to use Flash but I decided against it and plan to stick to using jQuery or simple CSS. My second thought was to use image rollovers but this would mean that I would be activating the rollover before I had reached the muscle as the image would have to be square meaning I would not be able to get the custom muscle shape I needed. I would use the z-index option within the CSS to place the image on top of the muscle body image; one other problem with this option is that internet explorer changes the co-ordinations of these images meaning I would have hover effects happening in all the wrong places.

After doing some research I came across an image map that allowed me to add hot-spots then animate them using jQuery. The jQuery plug-in was called maphighlight. I was able to draw the hot spots using pixel co-ordinates meaning it gave me a custom shape that suited my needs. I still plan to continue working on this element until I find the best approach to this task. I have included an example of this experiment below.

Things To-do

Within the first week back I have got quite a shock after realising just how much work has to be done within the next few months. After the lecture I have realised that one of my first tasks to carry out is to organise my time, I will have to review my Gantt chart and edit all changes I have made to my project over the last month. Also I will need to organise all my resources so I know exactly where everything is located within my system this means I don't have to rick loosing or misplacing any important content.

Now that I'm back I am glad I kept my brain working over the break as I have found it easy enough to get straight back onto work again. Only thing I am feeling a bit nervous about is the fact that I can't seem to get a decent layout sorted for my website as I have made so many changes to my software choice.

Research

Throughout the Christmas period I spent most of my time fixing up my blogs and doing further research on my topic. Since I had a late change in my use of software I spent a bit of time experimenting with different jQuery examples.

Now that I'm back I am glad I kept my brain working over the break as I have found it easy enough to get straight back onto work again. Only thing I am feeling a bit nervous about is the fact that I can't seem to get a decent layout sorted for my website as I have made so many changes to my software choice.

Portfolio Site

Over the last 2 weeks of the Christmas period I purchased my own personal domain name and built a portfolio site that would be hosted on it. I built this portfolio site using XHTML, CSS and jQuery. I was quite pleased with how it turned out and I have tried to show my personality throughout the site and have tried to show that I enjoy my work and see it as fun and not just a job.