It's all over

SATURDAY, NOVEMBER 29 2008

Validation

Before finally handing in my assignment I need to validate the pages using the W3 validation tools to check all web pages. First I will need to upload my pages to my lovely ISP and then check each page. (Castro 2007, 345)

• Index – Passed
• Nippers – 2 errors my &amp is missing the colon; Passed
• Age Managers – Passed
• Patrol – Passed
• Members – 1 error same id name used twice; changed; Passed
• News – Passed
• Training – Passed
• Sponsors – 1 error, again the use of &, fixed; Passed
• Calendar – 18 errors; Passed
• Contact Us – 4 errors for & id attributes must have single word names; Passed
• Finally the CSS – 4 errors; passed

Finshed

Last item of business before we upload this beautiful prototype to the dropbox will be to ensure that each page is commented. Done.

Zip & upload

Zip file and upload to dropbox

Well I think that’s just about all I have time for for this assignment, I am very pleased with my progress and I hope to be able to use what I have learnt in the future.

REFERENCE LIST

Adams, Camerson, Jina Bolton, David Johnson, Steve Smith, and Jonathan Snook. The Art & Science of CSS. Collingwood, Victoria: Sitepoint, 2007.

Castro, Elizabeth. HTML, XHTML & CSS 6th Edition. Berkeley, CA: Peachpit Press, 2007.

Lloyd, Ian. Build your own Web site the Right way using HTML & CSS. Collingwood, Vic: Sitepoint, 2006 (Revised 2007).

Shea, David, and Molly e. Holzschlag. The Zen of CSS Design. Berkeley, CA: Peachpit Press, 2005.

Weinmann, Elaine, and Peter Lourekas. Photoshop CS3. Berkeley, CA: Peachpit Press, 2007.

Down to the Wire

FRIDAY, NOVEMBER 28 2008

Today is the last day, I have asked for an extension but I would really like to have everything finished off today so that all I have left is the finishing touches on my blog and then all done.

This has been a fantastic subject I have really enjoyed learning to code html and not just use WYSIWYG program and being unable to work out what is going wrong. I look forward to NED12

Forms

Well I really wanted to ad a form on the Contact Us page but as I don’t know PHP yet it’s a none working form. Pretty.

Between 3 books I have been able to get my form on my site and looking pretty, I have used very simple labels and a text area, oh and don’t forget the submit button.

The most helpful book for forms was Build your own web site the right way using HTML & CSS by Ian Lloyd. (Lloyd 2006 (Revised 2007), 266-282)

Problem

I have just noticed that my table has reverted back to an older version, OMG!!!! What has happened, it looked fine yesterday

Damn how am I supposed to work that out, and all the plans I had to get things done today have just been postponed. Bugger! Looking at my CSS for this section of code it seems a bit short luckily I saved a copy to my USB pen yesterday before I uploaded to the Student Webspace. Checking this copy somehow I have lost part of my CSS. I have now copied it back and wolla, crisis averted.

It currently looks like this

And it should look like this

I don’t know what happened but it is fixed now and that is all that matters. Now back to the items on my to do list.

Calendar

Create a new ‘calendar’ page that will contain a calendar. With the help of The Art of Science of CSS I have add the table and details for the month of November and add notes to the required days. I have then added the CSS to format the calendar and tested in both Firefox & IE, but in IE the top of the Caption is cut off. See below.

Add a line-height to the CSS of 20 pixels better but still not fully displayed, try 25 pixels, yes that it. (Adams, et al. 2007, 196-199)

Using the same theory as for the Submit button on my contact page I am going to add Previous and Next buttons below the calendar so that the user can go to the previous month and the next month, now to research how to get only the required month to display on screen by using the previous and next buttons. Wow, with all the books that I have now and I can’t seem to find anything that explains how to do this. (Castro 2007, 272)

Time to surf the net for an answer... well it seems that without the use of PHP I can’t add this feature to my site, so for now it is a calendar of the current month with none working next & previous buttons.

Looking at the calendar the information seems to be too much but how can I shorten it without losing information. I wonder if I can use the title attribute, yes I can. Now what do I shorten things to... the venue, no that doesn’t give enough information as people will have children of a certain age and would be looking for carnivals for their children. That’s perfect I should just put the age into the calendar and then put the full information in the title. But how will people know, I will need to put a comment in the content telling people to hover over the items for further information. (Castro 2007, 78)

SEO

Finally Castro states to use keywords in your title & headers. I have checked that these are straight to the point and would add value to SEO,

Keep content of your page specific and focused, done.

Use keywords in images, done.

Don’t create headers out of gifs, don’t use keywords where they don’t make sense, and don’t repeat keywords endlessly, Check.

REFERENCE LIST

Adams, Camerson, Jina Bolton, David Johnson, Steve Smith, and Jonathan Snook. The Art & Science of CSS. Collingwood, Victoria: Sitepoint, 2007.

Castro, Elizabeth. HTML, XHTML & CSS 6th Edition. Berkeley, CA: Peachpit Press, 2007.

Lloyd, Ian. Build your own Web site the Right way using HTML & CSS. Collingwood, Vic: Sitepoint, 2006 (Revised 2007).

Shea, David, and Molly e. Holzschlag. The Zen of CSS Design. Berkeley, CA: Peachpit Press, 2005.

Weinmann, Elaine, and Peter Lourekas. Photoshop CS3. Berkeley, CA: Peachpit Press, 2007.

Feedback

THURSDAY, NOVEMBER 27 2008

First thing to do today is to upload my current pages to the Student Webspace and ask my peers for feedback, it’s a bit late in the piece but maybe there is someone out there that will have time to critique the progress so far.

View the pages, where is my club logo, damn Paint it has changed my file extension to capitals again. Now how did I change this last time, paint... no, MS Picture manager... no, I remember Photoshop has this wonderful little check box on the Save as feature that says ‘Use Lower Case Extension’. I am quickly becoming a Photoshop convert even though I am still quite lost once I open it. Now to resave all the images that were effected and upload them to the webspace. Done. (Weinmann and Lourekas 2007, 58)

Now add to the discussion board ... wow I have been so into all these assignments all week I’m not sure when the last time I logged on was and there are 144 post to read... aaaaahhhhh! L

Ooowwww an extension, I’ll apply for that, thanks Mary. That will give me time to finish off this research document to ensure that I have referenced everything.

Aaah results are in for the prototype and I am so proud of myself, woo hoo !!!!

Some very constructive feedback, great, oohh I have dealt with a few of these already but I better get cracking on the other 2.

Feedback from Mary - Thanks Mary, here is how I have covered these items.

Target Links

Feedback from prototype is to include some target links, mmm where from ... oh there’s one on the Home page that can link to the ‘Carnival’ section of the Nippers page, ooww and it works too.

Where else... mmm... aha there on the Members page, all references to ‘Contact Us’ can link to the ‘Contact Us’ section of the ‘Contact Us’ page. Wow that was a mouth full maybe I should have considered calling the Contact Us page About Us or something... oh well too late now. (Castro 2007, 106-107)

Cool!

Whitespaces

Top – I always wanted a centred site so through redesigning that positioning from absolute this fixed all that white space between the header and the images.

Footer – this one was too hard for my poor little brain to comprehend for the prototype but with more research I have been able to work out the floaty thing with the footer and I agree with you here it’s much more professional.

Horizontal scrolling

This one is much harder, I have been able to fix the problem where my club logo slips to the next line and behind my navigation when the window is reduced in size but through making the site fixed at 1024 I seem to have limited myself a little. More research needed on this one today to finish off with your recommendations.

Thanks Mary, your feedback throughout the course has been invaluable.

Code Check

Today I have uploaded my pages to the Student web site for criticism, in the mean time I am going to check all of my code to ensure that all tags have a closing tag and that all code is commented.

Whilst completing this checking I have found the following problem, a section of code that needs some cleaning up

Current: note the current code has 3 sets of tags

New cleaner code has one set oftags that do the same job as the coding above but is neater.

Much better, but I have just noticed, while doing more code checking, that when I corrected the above tags that I have inadvertently created 2 footer div ends on some pages and on others the end footer div tag is below the end center tag. Another correction to add to the list.

Another error, my Age Managers page has a missing tag, fixed. And another on the same page, must have been getting tired last night while doing all the content typing. And another one on the Members page, slack.

Ensure that all ‘hover’ text is displaying correctly in all browsers. Eeew, the Club logo is displaying as “logo” on all pages this has now been corrected to say “Club logo” and using the title attribute the hover text on all pages will say ‘return to home page’. (Castro 2007, 78)

Now to check all the links and images, well none of the links have any text so I’ll correct again with the title attribute on all links and images with links, that so people know what they are doing and where they are going before they click on a link. (Castro 2007, 78)

REFERENCE LIST

Adams, Camerson, Jina Bolton, David Johnson, Steve Smith, and Jonathan Snook. The Art & Science of CSS. Collingwood, Victoria: Sitepoint, 2007.

Castro, Elizabeth. HTML, XHTML & CSS 6th Edition. Berkeley, CA: Peachpit Press, 2007.

Lloyd, Ian. Build your own Web site the Right way using HTML & CSS. Collingwood, Vic: Sitepoint, 2006 (Revised 2007).

Shea, David, and Molly e. Holzschlag. The Zen of CSS Design. Berkeley, CA: Peachpit Press, 2005.

Weinmann, Elaine, and Peter Lourekas. Photoshop CS3. Berkeley, CA: Peachpit Press, 2007.

Are we there yet?

WEDNESDAY, NOVEMBER 26 2008

Background
Have I reduced the Opacity enough, on viewing the site after a good night’s sleep I think it could be reduced a little more. Let’s repeat the process from yesterday and reduce the opacity to say 70% of the reduced image and see if this is a better image. Woooooo too glarey, I think I need shades for that one, didn’t look too bad in Photoshop but behind the content wow too much white light. I’ll take it back to 50% of the reduced image, that’s better. (Weinmann and Lourekas 2007, 192-196)










Content
Now today is all about content. I have received instructions from the client as to site content and there is a lot of it so this could take all day.

I wasn’t wrong that did take all day. Also today I have linked all the club documents as PDFs and reformatted the training and patrol rosters so that they look similar but different colours, bringing my Word skills into the picture.

Sponsors
Now the Sponsor page, I would like to make the images float beside the text for each of the sponsors, sort of a left right thing. The Zen of CSS has a lot of info about floats and page 88 gives a simple example of exactly what I am after for this section.

Looks good but that Woolworths logo is too big, maybe I could wrap the Crew Marine section around it. No, maybe I should change the order and put the Woolworths one at the bottom. Better but still not good enough, I know I am a perfectionist on these things.

How about changing the order to a right left, no, maybe there is just too much text for each of the sponsors, I could limit it. Still not right. How about I move all of the logos to the left, aaahhh why didn’t I try that first would have save a lot of time that I could have been spending on other things. The answer was right next to me in another book. (Lloyd 2006 (Revised 2007), 165-170)

Text for this page has been drawn from the sponsor’s pages with their permission.











Links
Now, to test that all the links work:

• Navigation – check
• Bottom navigation – check
• Links with pages – check
• Links to external pages – check
• Home links from club logo – check
• Document links – check
• Email links - check

Newsletters
Woops, forgot to add these, the club has asked that newsletters are linked from the news page and that an ‘Archive’ of old newsletter be set up. These links were set up in the same side by side format as the bottom navigation and the links were set up the same as linking an image to a page using Castro. (Castro 2007, 104)

Wow it’s getting late but while these things are in my head I need to get them done before I lose them.







Carnivals
I have set up an unordered list of carnival details it looks like this:

• U8-14 Rainbow Beach – 11th October 2008
• U11-14 Team Carnival Met. Caloundra – 1st November 2008

You get the idea but with 8 of them in the list I don’t think it very user friendly when it comes to readability. What if I put the details in a table, I know we aren’t allowed to use tables unless for spreadsheet type data and this is spreadsheet type data that lends itself perfectly to a table format better than the current format anyway.

Now which book will help me with this one, Castro... No, Sitepoint The Art & Science of CSS has a whole section on this Chapter 7. Looks pretty straight forward, put the info in the format on the page, done. Now add the CSS styling, wow much better and readable to boot. (Adams, et al. 2007, 182)









Contact Info
There are now 3 pages that contain contact information for various people within the club, Training, Sponsor and Contact Us pages. Ensure that all information is readable and that any links are functioning, especially email links.

Strong
To add some effect and make key words stand out I have added the attribute in a few place, this will ensure that the audience are drawn to these words or phrases. (Castro 2007, 70)

REFERENCE LIST

Adams, Camerson, Jina Bolton, David Johnson, Steve Smith, and Jonathan Snook. The Art & Science of CSS. Collingwood, Victoria: Sitepoint, 2007.

Castro, Elizabeth. HTML, XHTML & CSS 6th Edition. Berkeley, CA: Peachpit Press, 2007.

Lloyd, Ian. Build your own Web site the Right way using HTML & CSS. Collingwood, Vic: Sitepoint, 2006 (Revised 2007).

Shea, David, and Molly e. Holzschlag. The Zen of CSS Design. Berkeley, CA: Peachpit Press, 2005.

Weinmann, Elaine, and Peter Lourekas. Photoshop CS3. Berkeley, CA: Peachpit Press, 2007.

Happy Birthday

TUESDAY, NOVEMBER 25 November

Happy Birthday to me, Happy Birthday to me, Happy Birthday dear Linda, Happy Birthday to me.

Well with that over and done with I can get on with my assignment and today is the background.

Background

Background image, I would like to add a background image of the ocean and the beach. The club supplied a disc of images taken by the club photography to be used as options throughout the website. Wow there are a lot of them ... this could take awhile. I’ll come back later when I have narrowed down the choices.

Ok it’s down to 2, first I need to add the code to the CSS and the Zen of CSS runs me through a basic how to. So now let’s try it one.(Shea and Holzschlag 2005, 131)

First image of a lot of water with a boy in the middle, the boy would be covered by the Outer div, nope it seems his hand would stick out the side, cute but not very professional, and what would happen if I shrink the window, hehehe more and more of the boy will appear on the right. Not this one. And that will rule out the other image as well. Back to the drawing board.

The second picture is too small, that’s fixable but stretching the image would make the child appear on one side and that puts us in the same position as the previous image.

Back to the discs and I have 2 more possible, let see how they fair.

First up is an image of 9 kids on boards, maybe I could repeat this image and have the board riders down either side, looks good, but wait the horizon isn’t straight which makes one side look higher than the other, and it makes me tilt my head to one side.

NEXT!

Now the other image, I really like these ones of the kids lined up along the sand, this shows the kids, the club colours, the club house, it’s got everything.

But wait the image is sort of diagonal and would look good no matter how big the window was made. Nar maybe not it looks kind of weird at that angle sort of like the world is going to pour out of the page.

Back to the disc again ... and there were more of these images so let’s find one that is a bit straighter...

Yes, there’s one, it fits the criteria, passes all the test, yeah!!!!!

This image is perfect for the background but does need to be stretched a little as my laptop has a rather large screen and the image doesn’t quite make it all the way across.

I created a larger image to cover the whole page using the stretch and skew feature of paint, now load the page, better. This will ensure that if someone has a screen as wide as mine they will not run out of image. But the colours in the image are very bright and I think distract the eye from the content, which is why people are here to view the site.

Using Photoshop I’ll add another layer to the photo, double click the new layer and change the Blend Mode to lighten. Now adjust the Opacity to 50%, save and view. Much better, the image no longer distracts the eye from the content; this faded image makes the content pop and sends the background image to the background where it belongs. (Weinmann and Lourekas 2007, 192-196)

REFERENCE LIST

Adams, Camerson, Jina Bolton, David Johnson, Steve Smith, and Jonathan Snook. The Art & Science of CSS. Collingwood, Victoria: Sitepoint, 2007.

Castro, Elizabeth. HTML, XHTML & CSS 6th Edition. Berkeley, CA: Peachpit Press, 2007.

Lloyd, Ian. Build your own Web site the Right way using HTML & CSS. Collingwood, Vic: Sitepoint, 2006 (Revised 2007).

Shea, David, and Molly e. Holzschlag. The Zen of CSS Design. Berkeley, CA: Peachpit Press, 2005.

Weinmann, Elaine, and Peter Lourekas. Photoshop CS3. Berkeley, CA: Peachpit Press, 2007.

Implementing Change

MONDAY, NOVEMBER 24 2008

5 days to go and countless research later it’s time I started to attempt to make the changes I have been researching.

Footer
First change to be made is the Footer menu links as an added navigation choice. This navigation list will include those pages that aren’t included in the navigation bar. (Sponsors and Training pages). The navigation will be side by side ie. Home Nippers Age Managers, across the bottom of each page above the footer. I got this idea from the competition and I think it is a good idea for longer pages so that users aren’t scrolling back to the top of the page to use the navigation.
We will also need to add the CSS to float the footer on each page so that it moves with the different lengths.

Content
Now to centre the web site, first I have created a outer div so that I can use a different background colour outside of the content area. In my CSS I have added a background colour to distinguish it from the outer div, perfect. This is a temporary colour until I have the design right.

Create an outer and inner divs within the pages and within the CSS, now remove all the absolute positioning and the images will all appear within the outer div area.
Next change the width of the header, outer & inner sections to 1024 pixels.

Logo sizes
Now to fix the masthead and logo so they fit together on the page, Castro talks about Image properties in chapter 5 so let’s have a look at the properties of these 2 images and see if that can shed some light on how to fix this problem. (Castro 2007, 92)

The masthead properties are






The Club logo properties are






So that’s 910 + 158 = 1068 that’s 44 pixels over the limit set for the inner area. I need to shorten the masthead by 6% this will reduce the height to the same as the club logo and reduce the width so that both images appear side by side. This can easily be done in Paint using the Stretch and Skew feature and changing both the horizontal and vertical percentages to 94. Save and refresh. Fantastic.

Stats for the masthead are now







Text
Next is the text, create an inner div (this will replace the content div) making the margin and bottom padding 0, add a top padding of 5, right 20 and left 200. This will move the text over so that it is not wrapped around the menu navigation.

Footer
Well it seems by removing the absolute positioning of my footer it has made it a floating footer, trick for young players there.

Viewing the progress I don’t think I like the look of the footer, currently I have the copyright info in a band of colour, I don’t like the sand colour I have chosen or the olive text colour it just really looks strange. What if I include the bottom navigation in the band of colour, no that makes the band look too big and still the colour. Change the colour to grey, no it still looks strange, what about if I remove the colour, that looks better but you sort of loose the end of the page.

Back on the net and let’s have a look at how the competition does it. Well I think the way noosa have set up their site looks good and they have the band of colour around the bottom navigation only so let’s try that. To start I’ll use grey just to see how it looks, and I have to agree it does look better, so to pick a colour. It seems that grey is out, he he, and sand is out, red is out navigation colour but I think there are times when you can have too much red so what about forest green the same as the top. Oh yeah much better but wait ... Woops you can no longer see the links, what about changing the colour of the links to white instead of blue and yellow instead of purple. Aahhhh... much better and the other colours can stay as they are as the contrast for those is viewable. (Castro 2007, 146)

REFERENCE LIST

Adams, Camerson, Jina Bolton, David Johnson, Steve Smith, and Jonathan Snook. The Art & Science of CSS. Collingwood, Victoria: Sitepoint, 2007.

Castro, Elizabeth. HTML, XHTML & CSS 6th Edition. Berkeley, CA: Peachpit Press, 2007.

Lloyd, Ian. Build your own Web site the Right way using HTML & CSS. Collingwood, Vic: Sitepoint, 2006 (Revised 2007).

Shea, David, and Molly e. Holzschlag. The Zen of CSS Design. Berkeley, CA: Peachpit Press, 2005.

Weinmann, Elaine, and Peter Lourekas. Photoshop CS3. Berkeley, CA: Peachpit Press, 2007.

The Final Mile

MONDAY, NOVEMBER 17 2008

Images & Placeholders
Assignment 3 is underway and it’s time for fine tuning. Firstly copy all the styling from the index page to all other pages and remove the second set of styles from the CSS page.

Add masthead and club logos to all pages where placeholders currently are. Ensure that Club logo is still a link to the home page from all other pages. Woops lost that better put it back. Castro has a lot of information about linking in chapter 6, this particular link is on page 114, that’s better. (Castro 2007, 114)

Add Sponsor logos in sponsor sections on member & news pages where placeholders currently are, again these sponsor logos are links to the sponsors own pages so back to Castro for the how to on page 104, linking to another web page. (Castro 2007, 104)



Sponsor Page
Next we need to update the sponsor logos on the sponsor page where placeholders currently are, again these need to link to sponsor sites using the same method as we did above. Good work. But wait sponsor 3 & 4 are different sizes to 1 & 2 and they do look a little silly all different, yes my pedantic side is coming out, so I’ll just adjust them using the Paint Stretch/Skew feature. Better

Now they are similar sizes they don’t look right side by side as proposed, how about I put greeked text before each logo, yes better, I’ll have to think about this one and come back later.

Ideas for change that I have been researching:
• Fixed centred website
• Wrapped text to right and left of sponsor logos
• Floating footer
• Footer menu items
• Contact form
• Calendar
Continue research and then we will implement changes.

REFERENCE LIST

Adams, Camerson, Jina Bolton, David Johnson, Steve Smith, and Jonathan Snook. The Art & Science of CSS. Collingwood, Victoria: Sitepoint, 2007.

Castro, Elizabeth. HTML, XHTML & CSS 6th Edition. Berkeley, CA: Peachpit Press, 2007.

Lloyd, Ian. Build your own Web site the Right way using HTML & CSS. Collingwood, Vic: Sitepoint, 2006 (Revised 2007).

Shea, David, and Molly e. Holzschlag. The Zen of CSS Design. Berkeley, CA: Peachpit Press, 2005.

Weinmann, Elaine, and Peter Lourekas. Photoshop CS3. Berkeley, CA: Peachpit Press, 2007.