Assignment

My assignment

Source Log

Music

• Era Vulgaris by Queens Of The Stone Age, a free track, downloaded from www.thefade.net
• Desert Flowers by Simon Thomson, original work
• Album Preview of Era Vulgaris hosted free on www.qotsa.com
  

Videos

• Charity by the Remainders, Video clip from http://www.myspace.com/remaindersthe
  

Pictures

• Site Background from www.capricornexpedition.com
• Article Picture from www.geocities.com
• Photo Gallery: Che: www.lastfm.pl, Fu Manchu: www.wma.com, Masters of Reality: www.3voor12vpro.nl, Mark Lanegan: www.onewhiskey.com, Old Masters Of Reality: www.sing365.com, Nebula: www.2ksports.com, Queens Of The Stone Age In The Desert: www.yottamusic.com, Queens Of The Stone Age In The Woods: www.monliazariston.com, Queens Of The Stone Age: www.punknews.org, Unida: www.postmandan75.tripod.com
  

7/8. A site map

My site map is also my NavBar which I found better suited the needs of my site as an extra site map would just clutter it unnecessarily.

The ul navbar tag had to be placed in my sidebar section of my html template as it acts as its own side bar. Its padding is to the left so it doesn't clutter the main sidebar.

Its position is fixed so it floats with the pages text. From it, my assignment log and source log can be accessed as well as my 'labels' (events). It has a home function which takes the user back to the main page. It also has a link to my photo gallery on Liskov.

The links for the navbar can be placed anywhere in the body of the html template but the corresponding positioning and tag has to be in the sidebar section of the template.

This way as most of my main material is on my main page, the navbar can be my site map to things which are not on the main page.

6. One edited video

My video is that of a band that I'm friends with and I have their permission to use the video.

It has a title and transitions. As it was already being hosted on YouTube, I used object embed to place it in html page element in my sidebar. Its size was an issue as it was to big for the side bar so I proportioned its html width and hight so it would fit.

5. Music Downloads

Instead of an image map I have music download links where the music comes from a absolute URL from www.fileden.com where the music has been uploaded and can be downloaded for listening by a user.

These absolute URLs are links that have been placed as html in a sidebar hmtl page element.

One song is my own which I created and mixed myself, the other is a Queens of the Stone Age song which was distributed by them freely onto the internet.

I also have a Album preview of Queens of The Stone Age's new album which is being hosted freely on their website.

Using an iframe flash player I have inserted the html for this player into a html page element on my sidebar. iframe allows the flash player to play automatically

4. A gallery of photographs

I collected pictures of different Desert Rock bands from the internet and created a gallerie album with them. The file was then zipped using mac's archive function and then placed in a directory on my desktop. Then using mac's terminal function I sent the directory to Liskov for public viewing.

The album's address on Liskov was then used as a absolute URL which was placed on my site map.

3. A form

My form is a general questionnaire about what users think of the site, there location and what Desert Rock bands they like.

It uses a

• two text field inputs for the users names.
• two drop down boxes allowing users to tell me what country they are from and what their favorite Desert Rock band is.
• A set of 5 radio buttons allowing the user to rate the site's quality on a scale of 1-5.
• A set of check boxes is also available to for users to check using positive descriptive words to describe the site.
• There is a text area input called other that is left blank for users to place their own favorite desert rock band if it is not available in the drop down box.
• There is a mailto form action which is activated by the input value' send' which prepares an email of the data collected to be sent to my email.
• A reset input value is also in place for the user to clear unwanted data.

The form was then placed as a html page element on my sidebar.

2. A CSS for the web site

My site's main css I used a image with 4 rules which were placed in the body of the site's html editor.

• It was a background image from another URL
• 'background-repeat: no-repeat;' So that it was the one image instead of tiles.
  
• It had a positioning of 50% 20% so that it was centered.
  
• And that its attachment was fixed so it remained stationary
  

It was added to give the site some style, I changed the site texts colours in the variable definitions section of the html editor. I changed the written text to black (#000000) so it could be visible and changed the link text colours to a dark red (#990000) to differentiate.

1. A Mission Statement, and goals for the web site

I used a table element with a css border rule and span style text to create a table informing the site viewers of what my goals are in a neat and precise way.

The table also reflects what I plan to do with the website and to what audience this is directed at. This table was added to a html page element on the site's sidebar layout editor.

A short mission statement is added to the header underneath the title.

Journal 7

Objectives

• Display some javascript on my page

Outcomes

• Using a 'for loop' that would run a set on instructions multiple times. The 'for loop' allows this to be predetermined.
• The loop starts with i=0. The loop will continue to run as long as i is equal to 5. i will increase by 1 each time the loop runs. It was set to run to for 5 times.
• Creating a script function with this data in bloggers hmtl template allows for a single 'input' type button to be created that corresponds with the loop and can be posted along with an explanation in a single post.
  

Maths

Explanation:

This for loop starts with i=0.

As long as i is less than, or equal to 5, the loop will continue to run.

i will increase by 1 each time the loop runs.

Journal 6

Objects:

• Produce a Quicktime video
  
• Inline the video

Outcomes

• Selected a video and added effects and transitions to it using Imovie, then compressed it into a web based Quicktime video using Imovie's share function.
  
• Using mac's terminal function, the compressed video could be sent to a directory at Liskov where it would have a location from where it could be viewed by the public.
  
• Created a video code using Pageotx and inserted the video's absolute URL at Liskov, then I could insert the html into my blog allowing for the hosting of the video on my blog as well as on Liskov. The URL has to be absolute so it can be accessed by anyone on the net, a relative URL woould mean hey would have to go to Liskov first.
  

Movie

Journal 5

Objectives:

• Create a photo gallery using
  
• Glerie and Iphoto
  
• Upload the photo gallery to ANU's liskov website where it can be viewed by anybody.

Outcomes

1. Find images and upload them to Iphoto and then create a Galerie photo gallery
2. Put the gallery into a directory zip it using unix terminal, send to a new directory at ANU's liskov course work web server.
   
3. Unzip the file and make sure it is in the public viewing directory so it can viewed by anybody
   

Problems

• Could not upload the gallery straight to my blog because blogger is not compatible with a image gallery as each image relative link is in a different place to its absolute link. So each images link would have to be routed to a different directory when they must be from the same one. It is not possible in blogger to do this.
  

• A gallery would not be feasible because each image would be from a different location and source code and there is no allowance for galleries within blogger's template and nav bar layout. There also appears to be no accessible html code to paste into a template from Gallerie.

Link To Gallery on liskov

Journal 4

Objectives For Lab 4

• Create Table

• Style The Table

• Create A Form

Outcomes For Lab 4

• Created a table containing information on goals, audience and content. I was able to do this by using table tags, table row tags and table data tags, understanding that using a tag instead of the row tag, creates a bold heading to be used where appropriate as opposed to just text or images.

• Styled the table so that it conforms with the rest of my blog, changing the colour of my text to aqua using colour html text in my style sheet so the blog is more pleasant to look at. For some reason, when displayed on my blog, there was a large gap between the title and the table, a fault that neither I nor my tutor could explain.

• I created several forms my writing in the necessary html such as the form container tag which is used to define all forms. The input tag must be used to establish what type of form is being used whether it be a radio button or text area box. Forms are quite easy to construct whereas tables are trickier to construct and get right.

Product Survey

Product Survey For Maton BB1200 Guitar

First name:

Last name:



rating out of 1-5 for what you thought of the quality of the guitar
12345

words that describe the guitar
Diverse Sound
Easy To Handle
Fair Price
Good Design
An Investment

Guitar Magazine Guitar Shop Maton Website Friend From A Band

general comments about the guitar

GAC Table

Goals Audience & Content
GAC	Goals	To better understand how html works
		To be able to succesfully construct a web site
	Audience	Tutor and Lecturer
		Other Students of Comp 1710
	Content	Journal of achivevments and problems with editing html on website
		Actual visual changes to site due to editing of html

Goals, Audience & Content

Third Post

Well I have now made a solution to my lack of a picture by adding the source html to my html for the last post, which now not only only shows the picture but also if clicked goes to the pictures location on the web. Unfortunately there is no image map with written words ad blogger has errors when trying to upload this type of image.

I added some style to my page by inserting some CSS into the body my html template. I have made the background and the text red. I have also added a navbar to my left sidebar by inserting navbar html into my sidebar section in my html template, along with this I created a repeating image from another website for my background. I used the W3Schools website to show me how this was done. Now my blog has some style.

The style type was text/CSS and it allowed a background image to repeat itself while text was visile over the top of it. The ul class navbar has its href's in the body while the positioning is placed in the sidebar content of the html editor. It's positioned is fixed so it remains stationary in the the top left hand corner.

Second Journal Entry

I can't enter a events tag in my journal because it is in blogspot which doesn't have extra menu items such as reviews and events. Instead I have put a labels tag, called journal entries on each entry, allowing the reader to access a separate page containing all the entries. My blog already has an archive system in place to allow for linking of posts to certain dates. The "style" html does not work on blogger because it merely creates a style which blogger already contains and does not effect content which blogger already contains.

I have incounted a problem with using blogger and image maps as blogger seems to be unable to upload them. Having done the required editing in photo image program I was then unable to upload the image map onto blogger. Instead I have pasted the image's html onto this post showing where the picture should be. when clicked though it does go to the image. I may have to try and upload the image map onto a image sharing program so it can be viewed.

First Jouranal Post

I have successfully entered in first post confirming that I have completed assigned tasks in lab session.

This included logging in and logging out using my computer account in the ANU Student Computing Environment, using some basic features of the MacOSX user interface, and some more advanced ones, and also using the Safari browser to read WWW resources and use a web mail interface to read and send e-mails from my ANU account, with an attachment.
Also signing up to Blogspot instead of Xanga due to my already familiarity with the site.

Having done these thing I feel ready to progress to the next stages of interfacing with the web.