justanotherdavemartin: November 2011

Sunday, 27 November 2011

A Charity Website

instruction

Our first assignment on the UWE Introduction to the Web Module has been to complete this blog, a 1000 word report on the blog and a 3-page website for a charity. I've been looking forward to making a website and immediately tried to find a charity who needed a website. However, this didn't prove easy and with time at a premium I decided to create a website for a fictitious environmental charity.

inspiration

My first thought for an environmental charity was Polar Bears as there is a rather iconic image of a Polar Bear stood on a very small iceberg. This image always reminds me of the bear on the foxes glacier mints package. So I thought I'd change the reason for the Polar Bear's plight from Global Warming to the mints disappearing!

perspiration

The design I chose was mostly from my imagination but the layout was inspired from a blog post from KISS metrics on the anatomy of a perfect landing page. I eventually changed the design (once I had coded my website frontpage and realised I needed another page of content), but the original draft, made in fireworks, looked like this...

Notice how the "call to action" text and button is highly contrasted against the blue. I've used palettebuilder to help me with the colour scheme.

I chose to use font's from fontsquirrel as they are free to use and provide all the files and css needed. I put this css in a different folder so that my main css file would validate.

precipitation

I wanted to add some Javascript to the website and found a neat snow generator which I thought would be quite fun. Unfortunately it's a little CPU intensive as there are a lot of flakes on the screen however this was the best of the 3 that I tried.

Bad Form

The most troublesome part of the website for me was the form. I think the main problem was that I didn't plan this before hand and jumped straight into designing in HTML and CSS. The problem came when testing the site in different browsers. I'm still not happy with how some of the radio buttons and checkboxes look in Opera and IE.

Monday, 14 November 2011

Well Behaved Javascript

Javascript

This week we've covered Javascript. For me this is the most exciting thing we've covered so far on the course as I've had very little exposure to it before. I have created sites that have used JQuery plug-ins - a Javascript library that helps simplify coding but until now had not written any code. Javascript enables web pages to respond to events such as the web page loading or a click of a mouse on a button.

Here is a link to a prototype of my personal site landing page. I've written some code (with the help of the W3Schools tutorial) that reacts to the browser window either loading, or being resized, and changes the font size based on the width of the screen. (Other responsive elements are created by using percentages (eg. Width = 100%) in the CSS).

Lab Sessions

In the lab sessions we looked at some examples of event driven Javascript and I created a Miles to Kilometers converter and an example of an onMouseOver event.

Additions to the blog

I've made a few additions to the blog in the form of gadgets. I've added a pop-up form for subscribing to the feedburner. This involved editing the HTML of the blog rather than adding in a HTML/Javascript gadget as the notes on the lab session exercise. It's interesting to see the options from the template designer are being used as variables in the Javascript for the page.

Thursday, 3 November 2011

Responsive CSS

960 grid designs

960 is a great number. You can divide it by 2, 3, 4, 5, 6, 8, 10, 12, etc. and 960 pixels fits inside most modern desktop screens. It's great for using with grids and there is a fantastic resource available called 960.gs where you can download all sorts of 960 related templates. To use a 960 grid create a div with an ID of wrapper in your HTML...
<body>
<div id="wrapper">
...and in your css use the auto attribute of the margin property, like so...
#wrapper {
width: 960px;
margin: 0 auto;
}
...which will automatically centre the div in the middle of your browser window!

Desktop Dinosaurs

I've been looking at responsive web design as there is a growing need to accomodate screen sizes smaller than desktops. 960px is fine if you have a decent screen, but no good for notebooks or smart phones. By using @media queries in your CSS you can specify different styles for different screen sizes (and different media such as the printed page) as this a list apart article demonstrates. You can also be responsive so screen sizes by using %ages instead of fixed pixel widths on elements.

In the lecture/lab session

This week we looked at more CSS in the lecture and practiced it in the lab session. Dan spoke about inline and block elements again. A block element spans the page, whereas an inline element doesn't. Therefore block elements can contain inline elements, but inline elements cannot contain block elements. It's useful to be able to change an inline element such as an anchor to a block so that you can set it's width as demonstrated in this week's lab session exercise: creating a horizontal navigation bar with hover-effects.

justanotherdavemartin

Pages