Client Project - Update 3

So here is what my homepage currently looks like. As you can see, it's not exactly how I initially designed it, and there is a good reason for this.

I've decided that given the timescale I have to build the other pages as well as the flash that needs to be embedded and coded, that it would be a better idea to produce a basic version of each element beforehand that focuses on function rather than appearance.

So far I've implemented the basic flash banner that sits below the navigation. I spent a long time messing around with many tutorials that either didn't work or were for AS2 instead of AS3. In the end I opted to not use Actionscript as that would only be required for a banner that has the option of the user choosing which picture they like, the basic version being just some images and some simple fades. I think still works just as well, however it is obviously less difficult to make and that therefore mean less credit, so I think once I have built the basic version of the site, this will be first element that I will advance.

I've also added a basic twitter feed which I also had to spend a lot of time fixing. After following a tutorial that ultimately ended up working, except for problem:

The feed is made up of three images. The top image, which includes the ''Recent Tweets'' header and the top of the speech bubble, a middle image of a 1px strip that is repeated as to accomodate any size tweet and a bottom image that comprises of the bottom of the speech bubble. Because of some formattig issues with the margins, this error occured. Although after much searching, I found the code to recitify this problem and close the gap.

''* {
                 margin: 0;
                   padding: 0;
  } ''

By placing this code at the top of my css document, the formatting was reset to default.

Apart from the usual issues with wrappers and positioning that css seems to bring, there have been few other problems and progress has been relatively smooth apart from the banner issue and the margin issue.


I had to make some changes to the design to accomodate users that may not have a wide/larger resolution. Initially I planned to have the dirt background for banner extend across the users screen, no matter what resolution. The same would have applied for the navbar. I decided against this for a few reasons:

1. Users with a wider resolution may suffer from longer loading times due the fact that they would be required to download a larger image for the dirt background. Obviously this affects accessibility as research has shown that websites with slower load times are generally less likely to hold the users attention. 
2. Another problem for users with wide resolutions is that the logos on the right-hand side of the navigation as well as the size alteration buttons on the opposite side, would leave large empty spaces either side of the content, making the website looking incomplete and unprofessional. 
3. I opted for a recent tweets as opposed to recent news. Again, this is the more basic element of an original piece of php. It does have it's benefits, one being that it's more secure as the login is based on a server with tighter coding (twiiter.com), it hold greater aesthetic value and also that it requires less coding for effectively the same effect. However, only one tweet can be shown at any given time, to view other tweets the user would have to click the hyperlink embedded within the recent tweets element.
   

I have also decided that an rss feed would be quite useless, as rss feed generally are used for websites that contain topical information. Many rss feeds that I have looked at on a range of websites encorporate links to other pages that feature related information or an article. While this could incorporated, I don't believe it's 100% neccessary. When I finally go to take pictures of the farm itself I will ask their opinion whether or not it would something they would have interested in/found useful. 

Currently, as the basic version goes, the rss will not be featured. 

Things to do:

• Gather content for other pages.
• Build Recent Events element, footer and text size alteration feature.
• Modify dirt background to emulate developed design.
• Code flash image gallery 

UPDATE:

I've inserted the text size alteration buttons, but am having trouble actually getting it to work. It could be a number of things. 

 I think It may have something to do with the banner, as the code is all correct and works in it's own document. The <script src> isn't meant to be there for text size alteration. It should  just be <script type='text/javascript>. To try and amend this I will duplicate index.html and remove the banner from one of the copies and alter the script and see if that makes a difference.

It could also be because the text itself isn't within the same wrapper as the javascript. I'm not sure how to get around this as usually the javascript is contained within the <head> tags, as opposed to the <body> along with all the other <divs>. As you can see, the bit highlighted in red is the corresponding tag given to the text to associate with the javascript. However this doesn't work.

I've also inserted the footer and some basic images for the recent events that will take the use to the events page. This took a lot longer than I anticipated, mainly because of formatting issues with the whole website being 200px to right for some reason, apparently it was something to do with the way I had coded the navigation. Initially the fb and twitter logos were in there own div which was wrapped in the navigation div, which was wrapped in a header gif to hold it all together. I removed the fb and twitter divs as well as the header which just left me with a navigation wrapper that is 1024px wide. I then had to insert two buffers either side of the linked pictures to make sure it all adds up and everything is where it should be. 

UPDATE 2: Text size alteration and the banner now work without conflict. Turns out that all I needed to do was insert the javascript just above the <p id='content'>. I initially feared that I could not have both as I moved the <script src='Scripts/AC_RunActiveContent.js" to within the <imagescroller> id and the size alteration worked, but the banner did not. 

That's all fixed now. One thing I should mention, is that instead of increasing the text size to set amounts (i.e. 12px, 18px, 22px and so on) the script simply multiplies the size by 0.2 or vice versa each time a button clicked. This allows for greater flexibility as the set sizes may not accomodate everyone and faster loads times thank to the reduced amount of code required. Here's a screenshot of it in action:

Text size after 2 clicks from default.

Text size after 4 clicks from default.


So as you can see it works well, there is one small snag though. After increasing the text 4 times the entire wrapper shifts around 5-10px to the right, but doesn't move again no matter how much the text is increased. I have no idea what causes this and if I have time i'll fix it. However it's not the biggest priority.