css link

I recommnded people make a link from a css page to all of their HTML pages, so when you want to change things in all the pages for example the navigation keys who don't have to change all the HTML separately.

hg

W3C markup validator

SO i have put my website though the W3C Markup validator. I have 5 errors which are my 5 navigation buttons. It say's:

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.


I have played around with it although nothing so far; Hopefully Geoff can show me in tomorrows tute??

Blog Theme & blog theme development link

Here is my blog theme & development

http://hayley-blogdevelopment.blogspot.com/

Helpful database

During this semester i have been introduced to a couple of new things, and have also become a member to them

Flickr: Pictures and or ideas for some good pictures

Other Blogging services: Tumblr & Wordpress (Blogger has been the best)

GC textures: I got my grunge themed background from this site.

Delicious: Loads of information, book marked websites, you can view (better than googling information)

I will continually use these as well.

websites versus draft #1

My Stonefest website looks similar to my design draft although, i have added a picture because it looked bare without one. The navigation button has also changed because it was easier to add the tab button. I found them on the following website:

embedding you tube videos as valid XHTML

http://www.bernzilla.com/item.php?id=681

This website was useful because my youtube wasn't valid in the W3C validator. This changes the URL of the youtube and makes it valid.

The End

My website is complete...

I just have to run it through the validator.

http://beepbeep.host-ed.net/

I could add more and change it etc. but need to start my blog theme.

the site must contain

At least one page with sub pages
The home/index page has a sub page to a faker you tube video.

At least one page to a page fragment
When you scroll to the bottom of the long pages, you can click 'back to top'. this is found on most pages. On some pages another nav key comes up so you can go straight to where you want (instead of scrolling down the page).

At least 6 links to external web sites
I have added links to the bands pictures. Once clicked on, they take you to the respective homepage, Myspace etc. On the about page, there is a link to the University Of Canberra web site. Along with links to the Stonefest Facebook page.

At least one email link.
This is found on the contacts & . Once clicked on, it will allow you to send an email to the University of Canberra.

At least one file download.
You can download the Stonefest poster, this is found on the home page
I have added pictures which were optimized for the web.

At least one form or form input field.
On the tickets page, you can join the mailing list.

At least one image.
The images which are present on the artists page are optimized for the web through Photoshop.

At least one Google Map
This is on the tickets page.

At least one You tube
I have placed a you tube video on a subpage which can be found on the home/index page.


THAT IS ALL!

CSS- trial and Error

TRIAL & ERROR definitely sums up CSS.

I thought i was finished this website years ago although the extension has made me add more, do more and spend way too much time on it.

"Floats are one of the primary tools of modern CSS-based web design, used to create multicolumn layouts navigation toolbars from lists, and table-like alignment without tables" (Robbins, 2007).

Although I can't manage to get the hang of it, in fact i haven't used any floating what so ever :( i need to focus on using it before the website is due.

I have created a link in each page to one css page that has all the main css in it (this doesn' make sense, i'm tired!)



hg

HTML

I have realised how easy Dreamweaver is compared to Notepad! I first started on notepad and didn't realize i had to put all the information that is automatically placed in Dreamweaver.

The following link is my HTML;

beepbeep.host-ed.net



W3C Valid (http//validator.w3.org/) was my enemy. At one stage i had around 40 errors... although after my HTML passed it was the biggest relieve and i loved it. The main problem I had i mentioned above, i didn't include the relevant information at the top of the page. Adding the You Tube video also made my HTML unworthy- i fixed this with help from You tube validation errors: a quick fix
This website explained how it had the same problem and found a way of fixing it.

HG

Web Services and Domains

So, i am having difficulty finding a free web hosting service that actually WORKS!!! Thought this process would be simple but it is not.. will find one soon.

Okay... I'm using 'Host-ed.net'. It comes with a free domain! Does anyone use this?

Well it only comes with a sub-domain, so i need a Domain Domain which i am going to BUY tonight from crazydomains. (Update; I only need a subdomain to get my website on the net. So i have found a perfect site as it's totally FREE!! To upload files you log onto the site and upload the files on there, it is really simple and easy to use i recommended it)

Sorted!!!

Once Upon a time...

Although i have finished HTML, i can still remember all the problems, frustration and solutions associated with designing a website.

So i have chosen to design something simple, although including grunge as a design aesthetic (as mentioned in my last assignment. This decision is based on my web making abilities (which is none) and the basic thought, that it looks good and is easy to read. A website is my opinion must have most conventions, for example email & facebook links, google maps and pretty much everything that must be included in the final website. A MAIN convention I prefer is when each page is set up that you can click to a another page you want, instead of having to click back all the time. I have chosen to include many photos as it looks better. After everything is complete i want to compare my website against Krugs list.

The end

Hg

draft #1- rough copy

Stonefest Website Review

• There's no search panel
• Very plain and in my opinion boring colours are used
  
• The layout doesn't compare with the originality used in other music festivals.
• It has a messy structure.
  
• The writing used is too small
• The website doesn't need poster shown
• There's a UC logo present in the right hand corner
  
• Pictures of the line up are not linked to further band information.
• All pages do not link back to the homepage.
  

Steve Krug's Trunk test & main questions

Krug's test, constitutes how to design and/or design a good website;

What site is this
What page am i on
What are the major sections at this level
Where am i, in the scheme of things
How can i search

I think the main questions to be asked are;

What's wrong with the stonefest site?
What can i change and make better, in regards to the stakeholders?
What constitutes a good website?
Is there any relevant insights i can gain from other music festivals websites? ie. big day out, pyramid & homebake

Design Reference

In regards to our future assignment, I have decided to focus on the Stonefest festival. I believe a Grunge Themed website would appeal to University Students, as well as its association with music/rock. It has interested me due to the unique nature of the characteristics’ which will in future help me to re-create the Stonefest website.

The following screen shots are five useful reference sites:

Bart-Jan Verhoef

Revolution Church

Biola Undergrad

Scouting For Girls

Edge Point Church

The following seven characteristics are present within grunge themed websites;

• Background: A textured background is an essential element in regards to a grunge design. For Example;

• Lines & Frames: The frames and lines within the references are crooked, irregular, have dirty edges and in some cases overlap. The references also have a fixed width, in which all the contents are placed.

• Colour: A key characteristic of a grunge themed design are the colours used. All of the reference sites mentioned use raw, dirty, dull and earthy colours, consisting of browns, purples, blues and dirty whites.

• Hand Drawn: A grunge theme includes unique hand drawn pictures and hand written words. For example;

• Heading: All the reference sites have a large heading in the left corner of the page. This heading is unique because in all five references the text is faded and missing, giving it a grungey/dirty look.

• Search Panel: Most of the reference designs contain a search panel.

• Options Menu: 4 out of the 5 sites have an options menu. These are present vertically on the top of the page.

References:

www.smashingmagazine.com

www.webdesignerwall.com

Media Design and Production site