Initial ideas and final layout.

Bellow are 2 layouts that i have come up with for the BBc Wildlife page.

 

 this is the first layout i came up with. the large box at the top is a carocell of the images that rotate, the 2 small boxes at the top are for the twitter and facebook icons, the top right is for the logo, the set of 6 boxes is the menu bar, the box just bellow is the bread crum trail.

The lower box is also a moving carocell but for featured stories instead the buttons eather side are to move the stories left and right.

 I decided not to go with this idea, altho i like it alot it dosent really suit the client, but i will most likely use it in the future. 

 

This is the second layout i have come up with and this is the one i will be using in my final project it fits the purpose and is far more simple and easy to navigate. 

refer to the anotations for more information :) 

  

Evaluation.

I started off this project well doing all i could to learn and gain experience in dream weaver i feel that i have learnt a lot, like how to lay out a page from scratch using dividers and containers and how to put together a rotating marquee, but am very disappointed in how my work turned out even as the first web page ive ever done i hoped it would look a lot better. for how much time and effort it took to make. this time was usually spend tearing my hair out at annoying little problems that would take AGES to sort out! 

Both the homely house site and the BBC wildlife pages work and i am proud of aspects of them but wish i knew how to make them look a lot nicer, and this would have defiantly motivated me to add more content to the pages.

All in all if i could go back and do this project again i would not underestimate how much time can be spent doing the most simple tasks and would probably ask for a lot more help rather than trying to puzzle my way through. and although i feel this project was a bit of a disaster it has not put me off web design and i hope to use the techniques i have learned into my final major project. 

BBC Rotating Marquee

homely house excercise

 

The purpose of this excercise was to create a simple web page with links text and some images, believe it or not i learned alot from this, mainly in how to lay out a page using divs/containers and styling a pages using CSS. 

 

the about us page 

contact us page 

and finally the rooms page, i didnt put much effort into these pages as i wasnt geting marked for doing it...

Fluid or Fixed

this is essentially how versatile a web page is across different technical platforms, this is increasingly relevant with the new age smart phones and other portable media devices all having different sized displays. due to the nature of small screens/displays it can be hard for a user to see all the information, a fluid web page will re size itself to fit but a fixed one will not. this makes it very difficult for a user to enjoy the content as they will not be able to read the thing with out moving the page side to side making a user think like this will break concentration 

A good example (even if its common) of a fluid web page is wikipedia by re sizing your browser you can see the information will re size and adapt to fit making it easy to read the information no mater how small your screen is.

This is how the page looks on a full screen, as you can see all the info takes up the full page.

once i down size the page the sections re-size and adapt to match, so i don't miss any information! perfect example of a fluid page.  
http://en.wikipedia.org/wiki/Main_Page

an example of a fixed page would be youtube this is probably due to the fact it is harder to make a fluid page with video. but to counter this they have released an app for phones allowing viewing on a smaller scale.

This is youtube on a full screen as you can see all the sections are visible, no complaints. 

unlike Wikipedia youtube barley adapts to fit the screen at all, leaving information hidden to the viewer. so a perfect example of a fixed webpage.
http://www.youtube.com/

Web Standards

exactly what it says on the tin... a way of standardizing web pages to ensure that the run on all internet browsers.

this is done  using these standards: 

Markup languages, such as Hypertext Markup Language (HTML), Extensible Hypertext Markup Language (XHTML), Scalable Vector Graphics (SVG), and XForms, from W3C

Stylesheets, especially Cascading Style Sheets (CSS), from W3C

Standards for ECMAScript, more commonly JavaScript, from Ecma International.

Document Object Models (DOM), from W3C

Properly formed names and addresses for the page and all other resources referenced from it (URIs), based upon RFC 2396, from IETF

Proper use of HTTP and MIME to deliver the page, return data from it and to request other resources referenced in it, based on RFC 2616, from IETF

Aesthetic Qualities 

The aesthetics of a website refers to the visual characteristics of each page. A few examples of what this include are : pictures ( background images, thumbnail images, banners and logos), colour schemes ( font colour, menu colour ectect) and layout (where things like side bars, titles, logos, pictures, menu bars and information  are positioned on the page).

http://ironmanmovie.marvel.com/

the image above is a good example of a visual web page infact the page relies on aesthetics alot, they have obviously spent alot of time and money making sure the site looks amasing this is because it it is for a movie so need to look good otherwise it will put people off seeing the film. the sight includes stunning interactive graphics of the iron man suit, clips, teaser trailers and extra information about the film and characters all this is intended to both promote the film and enhance the users experience by giving them extra information.

http://www.google.co.uk/
not all web pages need to be so extravagant with the visual side in some cases functionality far out ways visual appeal, the search engine GOOGLE is a prime example of a simple, functional yet still visually pleasing web page. it needs to be this simple so it doesn't distract from the information the user is searching for. also it makes the search procces to be alot faster!