Client: Gallery

To display a range of photographs taken by photographer of each shop interior I have created a Gallery. These can be navigated to from 'Wild' and 'Wilder' pages.

I have used inline Javascript to toggleDiv. This fades out the background image and displays a grid of images.

Each image's opacity increases slightly when hovered over and links toLightbox.

The Lightbox version I have used fades outthe background again and allows you to view all images by clicking 'next' and 'prev'.

The images displayed are extracted from the database

and so the client can change the selection of images by removing images and inserting new ones.

Client: Activate/Disable Competition

Wild Clothing have decided to run a 'Design a T-shirt' competition aimed at students. This competition will not run all the time and so I have made it possible to activate and disable it.

The callout displayed at the top, over the header is the only link to the competition page and appears on all pages.

To disable the competition the client can navigate to the comp page in the CMS and click the 'disable' button. This will change details in the database and prevent the callout being displayed on all pages.

SPP3: Catalogue Pictures

Today Sarah, Ashley and myself edited the profile photographs taken on Tuesday's Photoshoot. We were all really chuffed with the turn out with only 7 no-shows from the entire course. Well done Sarah for orgainising it and thanks to Ollie-our photographer!

Client:Content Management System

My new and improved Content Management System is now up and running.

There are a few things I need to do but, I have added the function to insert new entry's as well as removing images and a basic text editor allowing my client to add bold, underline, italic,

• lists
• lists
• lists

and

1. numbered lists
2. numbered lists
3. numbered lists

This was done using TinyMCE.

I have also incorporated Javascript/JQuery to create a swish 'Insert Content' form. The next section appears when required fields have been filled. I'm hoping that this will make it easier to use as it will follow a more logical order. This form also works if Javascript is disabled. Again to make things easier for my client I have used inline javascript to toggleDiv a help prompt. At the moment I only have one which explains why an Image Description is needed.

Google Analytics has been linked and there are also links to the main website for easy access.

I have asked my Client to start entering content so I can help him if he has any issues and adapt the CMS if necessary. Following a phone call today it seems he is having trouble so change may well have to be affected. A user manual may have to be created as the client has limited experience online.

Client: Database Design

Client: Meeting #4: 10th March

At the fourth meeting with my client,I presented a functioning website following my newest design. This is currently accessible online along with my customised Content Management System.

Photo's of in and around the shop have been taken by a photographer and are now available. Robin is currently selecting a short list from the mass of images and I will collect these shortly. I have also suggested that by Robin inputting the content into the CMS soon, as this will allow me to make any alterations to make it easier for him to use.

To Do List

1. Link Website to CMS
2. Link CMS to Analytics
3. Photoshop product logo's into wild shop front image
   
4. Make interactive shop front (Javascript)
5. Add upload image function to CMS
6. Develop CMS textfield to include formatting (tinymce??)
7. Look into using SifR text replacement for strap line.
8. Create grid of images with lightbox
9. Input background images
10. Contact form
11. Competition form
12. Allow Competition to be Activated and Disabled via CMS
    
13. Photoshop Competition Callout
    
14. Cross Browser Checks
15. Validation
16. Create CMS Help sheet
    

I am aiming to do all of this by the end of next week so I can carry out user testing and cross browser checks before submission on March 24th.

I have also given Robin an invoice for the Domain and Hosting costs, a copy of which will be included in my submission.

Client: TinyMCE Alternatives

TinyMCE is a Rich Text Editor that allows you to format text. e.g. bold, italic, strike through, bullet lists etc. It basically attaches itslelf to text fields.

I am thinking of using TinyMCE in my Content Management system so my client doesn't have to learn html tags inorder do simple formatting. The main functions i want him to be able to have are:

• Bold
• italic
• bullet points
• links
• underline

Some alternatives:

MooEditable
WMD Editor
YUI(Yahoo)
CKEditor
TinyRTE

Client: Page Designs

The background image of each page will fill the screen even when zooming in and out of the page. It will also be changeable by the user through links. e.g. the location of Wild Clothing "3-5 Broad Street" will change the background to Google Maps. Find example here

Similar to the competitions page (navigated to via home page), the sidebar will be scrollable to allow for future additions of text.

The homepage will look very similar to the 'Wild' page but the shop window will have hover states to allow for interactivity. Product information will be viewable from this page.

Client: Designs-Competition page

Robin has decided to run the competition so here are some page designs following my new template.

The side bar on the RHS will be scrollable while the rest of the page will stay fixed shown by the first two images.

I am currently undecided about using background images on this page. My current choice of images makes the page busy in comparison. To make text legible I have included transparent boxes behind, however this make it even busier. The images used in these screen shots are ones I have taken in Wild Clothing. A photographer is due to take more and so if these suit these page layouts then I may include them.

Client: Meeting-photo's

While meeting Robin to discuss more designs, I took a range of images of Wild Clothing's interior. This was for reference of the shops interior when not there as the website should be a reflection of the shop and i don't have picture perfect memory! These images may also be included in the website, as my client wishes to have a gallery of images.

PRP: Creating a Facebook Application

For my next artefact I am thinking of clinking my pig website to facebook. This youtube tutorial provides the step by step process of creating a facebook application. I'm sure it sounds easier than it is!

Click here for full tutorial

Client Project: Menu bar

I have chosen this kind of 'bar style' navigation for wildandwilder.com and I wanted each bar to grow when the mouse hovers over the link.
CSS only allows the bar to be one size when the mouse is hovered over the link (a:hover) and another size when the mouse is off the link (a:link) so I have opted for a Javascript alternative that animates a div's size. I found an example of growing and shrinking a div and by changing a few values and altering the CSS I have managed to create an animated menu using javascript.

Client: Jquery Form

Having never attempted JQuery before, I thought it wise to take a tutorial and adapt it to my situation rather than wasting time learning how to do something like this from scratch.