HTML Pages

Here are my HTML pages to the National Folk Festival website.

Main Menu
Festival
Program
Tickets
Attending
Apply
News
Contact

Sub Menu
Management
History
Location
Sponsors
Links
Highlights

Tip of the Day

Working full time, studying part time with 5 weeks left of pregnancy is not the smartest idea….

Website Report

Web planning, design and implementation
I've decided to develop the National Folk Festival website for my assignment. At the start of the semester, I started thinking about how my website would look, keeping in mind the diverse targeted audience age. I wanted my website to be simple from the user point of view, by keeping it easy to work out what page you are on and have visited. To do this, I underlined the navigation menu tabs when you click on the individual pages to identify the page you are currently on. I also named the title of the page in the title header. Additionally, I used a hover effect; this is when you pass the cursor over the tabs, the link changes into different colours and effects.

To start off my design, I jotted down on paper some ideas and used a few web conventions which I find useful in a website. These conventions included:
Usability
Logo
Content/page name
Sections
Local navigation
Colours/design
Search function

I then created my designs in Photoshop and applied it to my web pages. At first, I used Photoshop to slice individual images. This became a problem later on when styling the web site. It coursed all nasty things to happen with the images and I ran out of time to work out how to fix the problem. So the only thing I could do was start all over again. The good thing though was that I already had my Photoshop design so I didn’t have to worry about that aspect again.

Another issue I encountered was that my web site works for Firefox, however it does not display correctly in explorer. I have not been able to fix this problem to date.

For me, research was a major component of this assignment. I used google on a very regular basis to help me develop my website and give me more in-depth understanding of how I go about achieving my desired outcome.

I personally feel that I have demonstrated my knowledge and understanding of how to create external links and have left a few out. These are highlighted in green or underlined within the paragraphs of the content on some of the pages.

My website contains:
A navigation menu (‘festival’ page)
A sub navigation menu (from the “festival” page)
Images (mostly in gif format for ease of downloading the web page)
External links (on program and sponsors pages)
Page fragments which take you to the top of the page
Email link (featured on the ‘contact’ page)
You tube video (featured on the ‘highlights’ sub page)
Search function (on every page – I used Freefind to develop my search function)
Downloadable files (on the ‘history’ and ‘management’ pages)
Google map (featured on the ‘location’ page)

Our internet account is with AAPT who also provide a webhosting component. I used this to host my website for this assignment. I was unable to change the name of the site as its a fixed service. If I could however, I would of named the site/link something suitable like National Folk Festival. I found it useful to test my site by up loading to my web server. This allowed me to see if something wasn’t working as it should and allow suitable time to fix the issue.

I believe I have covered off the major component of this assignment as my site consists of:
10 pages of text from the site
A main menu with links to at least 4 pages
Sub pages, images, email link, external links, fragments, a downloadable file, google map, text input field and a youtube video.
I’ve renamed a page to best fit my design; this is evident in the Contact tab.

Overall, I felt that this assignment was quite challenging for me as I have no prior experience or rather quite limited experience in the use of photoshop and have never used HTML or CSS before. Due to this I found the assignment time consuming as I needed to research quite a lot of information. In saying that, I am pleased that I had the opportunity to challenge myself to complete this unit and I am confident that I have met the learning outcomes and expectations of this unit.

Website

Here is my website

http://people.aapt.net.au/~dean_suzie/index.html

Blog Theme

I personally find it difficult to change the HTML in blogger. However, I have managed to change the background colour, text colour, the background image (which I designed in Photoshop) of the title and the text alignment.

I believe a blog layout should be simple, hence the look of my blog. This enables the viewer to concentrate on the actual blog post instead of the background and other graphics.

background image test

To Do List...

I've got a few things I need to do this week.

1. find out how to add a hover function to the website
2. how to add a vertical drop down menu
3. research FTPs - to transfer my data onto the host site
4. research for creating a search field for my website?

I've come across a couple of things for the hover function, the vertial drop down menu and the FTPs, still looking around for the search field function for the website.

Week 7

I've finally had the chance to check out this weeks lecture. I've realised that the way I have developed my site is quite different to that of the tutors. As you may have read in my previous post, I've been using the slicing tool in PhotoShop to create individual images for my web layout. I found this method after some intensive researching on the web. I have been using CSS to create styling for my content and a few other little things within the pages of the site. I'm now unsure if this is enough for passing the unit.

On another note, I found this lecture quite useful as I was having issues with my content running off the page. I now know how to fix this by using the repeating of the screen and amending in PhotoShop. Just goes to show that it pays to listen/view the lectures....

First page....

I've completed my first page for the website... YIPPEE!! Now I need to concentrate on completing the other pages.

Using the Slice Tool in Photoshop

I've just discovered that when using the slice tool in Photoshop for making individual images for a web page, you need to make sure your slices are exact. Otherwise you end up with sections of the image missing when converting to HTML and adding href's. I'm about to try for the second time to re-slice the images. Fingers crossed it works...

After some frustrating hours of searching the web for some ideas on how to fix this problem. I found out that its a bordering issue in HTML. All I need to do is add some extra coding and the problem goes away! YAY!!!!

Week 5

I've changed my mind as to which music festival site I am doing for my assignement. I did a couple of different web designs and decided to go with National Folk Festival. I've now uploaded this onto the unit site under Gallaries.

Week 4

I've created my first HTML document. To do this I followed the exercise in Chapter 4 of the Learning Web Design text book.

I've also started working on my website design in Photoshop. So far so good. I've never used Photoshop before so it's taking me a while to get the hang of it. I've found that there is a lot of useful information on the Internet, particularly on how to use Photoshop. I've also invested in a book called Photoshop for dummies...

Design Reference

I’ve chosen 5 music festival websites for my design reference post. The sites are:

1. Glastonbury Festival – in the UK
2. Byron Bay Arts and Music Festival
3. Falls Festival
4. Good Vibrations Festival
5. Coachella – California USA

I’ve used some of Steve Krug’s web standards from the ‘Trunk Test' within my 7 Characteristics, which include:
1. Logo
2. Content/page name
3. Sections
4. Local navigation
5. Colours/design
6. Usability
7. Search function

I've highlighted some of these characteristics in the screen dumps below.

Glastonbury

Byron Bay

Falls Festival

Good Vibrations

Coachella

Summary

Each of the above sites has a logo at the top of the page, some of which the logo is also a Home page button. The good thing about this is it allows the user to identify and brand the site. Other aesthetics shared by all the sites are:

1. a header
2. navigation/menu bar – which allows one to view other sections of the site
3. context/information
4. links
5. design features

6. colour for excitement

These characteristics allow the user to navigate easily throughout the site, and know where they are at all times.

A couple of other features I personally like are:

• Quick loading


• Reduced size images


• Menu at the top


• Logo linked to home page


• Easy to navigate. I like the fact that the Falls Festival site used SMIL (Synchronized Multimedia Integration Language) http://www.w3.org/TR/REC-smil/ it’s a simple yet effective way to present a range of images.

The Falls Festival site has also taken into consideration user preference for those who have slow internet speeds. to achieve this the designer has created an entry page where it allows you to choose the speed of your internet connection.

I believe that these conventions are relevant to the site I will be developing and will try to incorporate some/most of these features into my site.

Week 2

In the tut we discussed what needs to be done to complete the Design Reference assessment. I've done a bit of research through examining a range of music festival sites both in Australia and Overseas.

Here is a list of site that I’ve looked at:

Big Day Out
Good Vibrations
V Festival
Future Music Festival
We Love Sounds
Coachella – California
Glastonbury – UK
Reading - UK
Leeds - UK
Creamfields – UK

The thing I found interesting is that if tickets aren’t on sale the website isn’t very interactive.

So for this week, I’m still waiting on my text book to come in… But on a positive note, I’ve chosen my 5 sites and my 7 characteristics that I will be analysing for my Design Reference.

Week 1

Well I’ve read the unit outline a couple of times now and I’m a little scared as I’ve never created a web site before. So this will be a real challenge for me! BRING IT!

This weeks task is to look around at our favourite websites for their visual and functional attributes. So far, I've seen ones I like and dislike. Now I just need to get started.

I've done the blog, getting the text, and at this stage I’ve chosen stonefest http://www.stonefest.com.au/ for my music site.