Final Website Product

My group members and I have worked really hard on the web project.  It has been a pleasure to work with such a dedicated group and we are very happy with our end result.  I would like to thank them for a great learning experience.

Here is what the final banner looks like:

and here is the link to our website:

http://scah.cdu.edu.au/2012/NMD201/final/homepage/

I am surprised at how quickly the last 12 weeks have passed and am a little sad that my time in NMD201 has come to an end.  I have thoroughly enjoyed this unit and have learned an awful lot that I didn't think I was capable of doing.  I would like to work more on HTML and feel more confident in building websites.  I feel that I have only scratched the surface and that there is so much more to learn.  Composing was very satisfying and it has increased my passion for music and learning all I can about music is more on my agenda than ever before.  I believe I will be able use all the skills learnt in this unit and am now a little less afraid to dive into new software.

What is New Media?

I have been pondering over the article review that is part of the assessment for this blog and decided to find an article that deals with New Media itself.  I have just completed another unit in which I wrote an essay to define New Media and thought it only fitting to review an article about New Media for this unit.

I have chosen the article "Defining New Media Isn't Easy" by Bailey Socha and Barbara Eber-Schmid.  You can read the full article here.

“Defining New Media Isn’t Easy” written by Bailey Socha and Barbara Eber-Schmid from the New Media Institute is an article that defines what ‘New Media’ is. The New Media Institute (NMI) aims to better inform the general public about issues surrounding the Internet and other New Media and Barbara Eber-Schmid is the Executive Vice President and co-founder of the NMI.

The article begins by defining that the term New Media is a term that has been coined that relates to the Internet and the convergence of technology. It offers a definition of what New Media is and therefore what it is not. The authors quote Wikipedia and describe New Media as that which is often described as digital technologies, which generally can be manipulated, networkable and interactive. New Media is actually very hard to define as technologies are constantly changing and evolving. It has an effect on our society, economically, politically and socially and can also enrich the learning experience of students.

This article serves well to try and offer a definition of New Media and all that encompasses that term. It offers a great deal of information on the effects of New Media on our lives and society. The article is easy to read and uncomplicated and includes referencing. The authors genuinely appear to be qualified and experienced to write about this topic and it would make a good reference for other work. For anyone trying to get an understanding of what New Media is and where it may be headed, this article certainly offers some clarity and is an informative piece of writing.

Week 12 - Working on the Website

Tom, Claudia and myself all came in this week although there was no scheduled class, to make sure we are staying on track with our part of the website building.  Tom had arrived earlier and had done a great job of slicing the banner to create all the page links so it is certainly looking like a website now.

Our group is working on the program of events, a welcome page and also a page dedicated to past exhibitions.

Claudia had received an email from Sarah Pirie regarding some material from the previous couple of years exhibitions.  We went through the material together and made decisions on what to include on the site.  We decided to go with a link to the external site for a video from the 7:30 Report and an imbedded file for the other video.  We also decided to include a couple of images of some of the work included in the past exhibitions.

We have put together a brief program with the small amount of information that we now have regarding the inclusions in the event.  These have been listed out according to the venues and what will exhibit in these venues- The Amphitheatre, The Theatre and the Nan Giese Gallery.

I researched the previous exhibitions and found some articles written for CDU news.
Here is the link for the article regarding the 2010 exhibition - "Up Here"
www.cdu.edu.au/enews/versions/041010.../uphere_exhibition.html

and also the link to the article regarding the 2011 exhibition - "10 squared - Art from the Hot Lands"
www.cdu.edu.au/enews/versions/07112011/.../artexhibition.html

We thought we could possibly use these articles but decided that we already have enough content for the past exhibitions.  I also looked up a couple of course outlines that we hadn't been able to find as easily as others.  This information is on the page that informs the user about the students whose work is represented and what those student have been studying.

Website Development

It has been decided now that the assessment item for the web based product will definitely be a website about the end of year exhibition at CDU.

More brainstorming took place and a conversation with Peter Houtmeyers.  As a class we have come up with the bones of the project and we have formed into four small groups.  We have decided that the site needs a welcome page, a schedule of events, a map of where the events will take place, and video, image and website galleries.  The welcome page will also list the focus units that will be in the exhibition and include a brief summary of these units.  We will also maintain a theme throughout the website by using the same banner for each page.

 Group 1 - Kozo, Sachin and Diego - image and website galleries

Group 2 - Edmar and Prashant  - video gallery

Group 3 - Tom, Claudia and myself -welcome page, past exhibitions info and schedule of events.

Group 4 - Chelsea, Brendan and Edmund will work on the layout and map pages.

Here is a photo of a proposed banner of sorts that will be universal across the pages:

Website Beginnings

A lot of brainstorming has been happening in class in regards to the form our web based product assessment will take.  It was suggested that we as a whole class group create an 'unofficial' website to promote the end of year exhibition that will be held for students from the School of Creative Arts and Humanities.

Here is the initial brainstorm map:

The only problem that I see at this stage is that the exhibition details are not yet worked out and we may not have enough information to complete the site, given that the exhibition takes place after the assessment due date and after unit has concluded.

Week 10 - Creating Links within an Image

Researching how to create links within an image, I have found out about using image maps and also about image slicing in Photoshop.

An image map or use map is when you take parts of an image and create a link.  You can specify exactly what part of an image will be a link by using the coordinates that relate to the image and in doing so create 'hotspots'.  So you could have a map of the world on your website and then have each different country as a hyperlink.  You would select Australia for instance and by using the coordinates of where Australia is in the image you could then create a link to an Australian website.

Using an image map is an easy way to link different parts of an image without having to divide the image into separate files.  There is a very informative and easy to understand tutorial on You Tube that explains exactly how to create image maps.  I found this video very helpful and also informed me of a great free resource for creating image maps online.  The tutorial uses an online image map editor at maschek.

You can view the video tutorial here.



Adobe Dreamweaver makes it easy to create image maps and there is useful information on how to do this here.

Another way to create links within an image is to use image slicing in Photoshop.  This might be particularly helpful in creating a banner on a website.  Photoshop has a 'slice tool'  (as shown left) that allows you to divide an image into smaller sections and it does this by creating straight edged sections like a table.


Here is an example of using the slice tool to create smaller sections within an image.

Notice that when you select an area with the slice tool, Photoshop automatically creates more slices to complete the image.  The slice that you originally created is highlighted.  You can manually move and resize the slices.

Slicing is an ideal way to optimize your image.  You can make adjustments to the image such as making it a gif and/or changing the amount of colours used in the image and make your file sizes much smaller, therefore making loading time much faster.

Week 9 - Dreamweaver

Adobe Dreamweaver is a web design program.  You can build a complete web site from the beginning without having to know or write very much HTML.  This program makes it easy for beginners to start creating their very own websites.  You are able to enter information and the program automatically creates the code, but you are also able to enter the code manually if you like.


Adobe TV has a video that talks about what Dreamweaver is:




There are some good tutorials for using Dreamweaver at Internet 4 Classrooms.

I created my very first webpage using Dreamweaver and I am very happy with the results.  I played around with the features and was able to get the heading and menu items to look how I wanted by using a table.

Here is what my page looks like:

You can view the actual page here.

I found How To Use Dreamweaver particularly helpful and it also had a list of useful vocabulary which I have listed below:

Vocabulary:

• Anchors: (also called targets) For the purpose of hyper-linking two places on the same web page or to, the target of the hyperlink.
  Image map: an image on a webpage that has geometric areas defined that function as clickable links.
• Bandwidth: The amount of data you can send through a network connection. Bandwidth is usually measured in bits-per-second (bps).
• Bit: one binary digit - this digit is represented either as a 0 or 1. Bits are usually used to measure transfer speed.
• Byte: a byte is 8 bits. Bytes are usually used to measure storage space.
• Contrast - To show differences when compared.
• Coordinates: Any of a set of two or more numbers used to determine the position of a point, line, curve, or plane
• Folder: another word for a directory on a computer. Folders are used to organize and store files.
• GIF: A image file invented by the CompuServe Company that uses indexed color-space. GIF files work better for graphic and clip art images.
• Hierarchy: a relationship between people or things that is organized.
• Home page: The first page on a Web site that acts as the starting point for navigation. Usually the home page offers hyperlinks that you can click to go to other pages on the web site.
• Hyperlink: An address to another webpage either internally within a wesite (relative link), or a web address to a webpage outside on the WWW (hardlink).
• Hypertext [ HTML Hypertext Markup Language] A term coined by Ted Nelson to refer to a nonlinear system of information browsing and retrieval that contains associative links to other related documents.
• Hypertext is the basic organizing principle of the WWW. The coded format used to create WWW documents. HTML commands control how a piece of text will appear. Files in html format are viewed with a Web browser.
• Image map: an image on a webpage that has geometric areas defined that function as clickable links.
• JPEG: (Joint Photographic Experts Group) A file format using lossy compression. Commonly used for photographic images on the Internet.
• Pixels: The basic unit of the composition of an image on a television screen, computer monitor, or similar display.
• Resolution: the amount of pixels per inch on a screen or dots per inch in print.

(source:  http://www.ncsu.edu/viste/how_to_use_DW/vocabulary.html)

Week 8 - FTP/Cyberduck

FTP stands for File Transfer Protocol and it is used to transfer files from one computer to another over a network such as the Internet.  Usually the file is transferred from your computer to a web server.  FTP is faster than other protocols like HTTP and when exchanging large files, FTP would work well.  (http://www.dynamicwebs.com.au/tutorials/ftp.htm)

The tutorial referred to above states that the objective of FTP were:

1. To promote sharing of files (computer programs and/or data),
2. To encourage indirect or implicit (via programs) use of remote computers,
3. To shield a user from variations in file storage systems among hosts, and
4. To transfer data reliably and efficiently.

There are commercial programs available for using FTP and one of those programs is Cyberduck

I started using Cyberduck in class and had a go at uploading a picture file to Cyberduck and to the CDU Server SCAH.

When you open Cyberduck you see this page:

I found some information that runs through how to manually upload a site using Cyberduck 

Below is a helpful video on using Cyberduck

HTML Help

I have found a few websites that have helped me in creating my very first webpages.

w3schools   tizag   HTML Source   and   HTML Dog

HTML Dog has this nifty list of   HTML Tags that really helped me out too.

I had no trouble creating my index and page 1 pages but could not get my image to show.  I was about pulling out my hair and cursing my computer when I found some help.  Thanks Page Resource!  You helped me work out why my image wasn't showing up on my webpage and I was able to fix my small error and now it works!

Week 7 - Raw HTML

It is time to move on from compositions and begin learning about building websites.  The fundamental part of building a website is having an understanding of raw HTML.  HTML stands for Hypertext Markup Language.  Markup refers to how the text is presented - is it bold or a heading for example.

HTML is all about codes and tags.  It is a language for creating web pages and determines how information will look in a web browser.  There are some basic rules that you should follow when working with HTML.

1. All file names should be in lowercase
2. No special characters should be used except for underscore
3. Remember to use the 'html' extension

HTML is about lots of 'tags' and they usually work in pairs - a beginning tag and an ending tag.  To begin HTML you need to start it with the tag <html> and at the end the tag is </html> (the slash is used for the ending tag).  You also need to remember that any spaces will be ignored and that spaces need to be written in.  The <p> tag will give you a new paragraph.

There is a general basic structure when starting a new page:

<html>

<head>

<title> name of the page </title>

</head>

<body> </body>

</html>

The majority of information goes between the <body> </body> tags.

This is a really good site for Getting Started with HTML

Week 6 - Reason

Now it is time to use another piece of software called Reason from Propeller Heads.  Reason makes the instrument sounds come alive.  After listening to the sounds of MIDI while working in Sibelius it was fantastic to hear the difference when it is played in Reason.

To use Reason I exported a MIDI file and imported it into the program.  It automatically puts in the instruments but then a range of combinator patches can be selected to produce the sound that works best.

Using Reason is like being in a virtual recording studio.  There are so many things to get my head around in this program!

Here is an image of what choosing a combinator patch looks like:

The amazing thing about the Reason program is how life like the elements are.  You can even take a look at the back of the equipment and see all the wires plugged in!

I found this video tutorial which has really helped me to understand how to use Reason.

Week 6

Well it turns out that I forgot to check if the videos had a creative commons licence and unfortunately all of the videos that I have watched and thought I might like to compose to, I can't use.

So it's back to the drawing board and more video searching for an appropriate clip that I like....

Animation Selections

After extensive searching, viewing and now feeling like I have square eyes, I have found three animations that I like.  They all have creative commons licences and so I am able to use them!

The first one below is Stop-Motion Biscuit Cake by Alan Travers.


Stop-Motion Biscuit Cake from Alan Travers on Vimeo.

Next, Grumpy Grandma


Grumpy Grandma from magnum703 on Vimeo.

And finally, The Scrollwheel by Guy Collins


The Scrollwheel from Guy Collins on Vimeo.

Week 5 - Chord Progressions

A chord progression is sometimes also called a harmonic progression.  It is a series of chords that are based on key signature of the music.  Chords and chord progressions are the basis of harmony.

A chord is a group of usually 3 or more notes that are played together and so a chord progression is then a group of chords that are played in a certain order.  Chords are numbered with Roman numerals and they also have technical names such as dominant, subdominant and tonic.  The tonic is the root note of a scale e.g. the C Major scale root note is C and a chord built on C - C, E, G is so called the tonic chord.  The fifth note of the C Major scale is the dominant note which is G, so the dominant chord of C Major is G, B, D.

My weekly task involved composing a melody over a chord progression and this meant thinking about what notes sound like when played together and also about what sort of feeling I want to convey with my composition.  If I choose notes that sound nice together then the music will sound resolved and if I want to create tension I can perhaps choose notes that don't blend together so well.

Here is a chart of common chord progressions that I found at Easy Lead Guitar

In most popular songs there are the same basic chord progressions.  It appears to be very easy to compose songs around these chords and make them sound good and ultimately sell songs.

Check out this video that is a fantastic example of how so many songs that we hear on the radio can be built around the same chord progressions.  (Please note that there is some swearing in the video)  This video features many songs built around the I, V, VI, IV chord progression.

Creative Commons

Creative Commons or CC is a non-profit organisation that provides free licences for authors, musicians and other creators.  Work created by someone is automatically protected by copyright, but a creator can apply a Creative Commons licence and allow the general public to access and use their content for their own purposes, so long as it follows the conditions set by the creator.

There is a great PDF designed for teachers and students to understand Creative Commons.  You can view the PDF here.

The different licences available are:

Attribution

Attribution Share Alike

Attribution No Derivative Works

Attribution Non-Commercial

Attribution Non-Commercial Share Alike

Attribution Non-Commercial No Derivatives

 This is the information regarding the Licence terms:

Attribution BY	Noncommercial NC	No Derivative Works ND	Share Alike SA
This applies to every Creative Commons work. Whenever a work is copied or redistributed under a Creative Commons licence, the original creator (and any other nominated parties) must be credited and the source linked to.	Lets others copy, distribute, display and perform the work for noncommercial purposes only.	Lets others distribute, display and perform only verbatim copies of the work. They may not adapt or change the work in any way.	Allows others to remix, adapt and build on the work, but only if they distribute the derivative works under the same the licence terms that govern the original work.

Smart Copying has a comprehensive list of "Creative Commons and other Open Access Resources on the Web".

There are also a couple of animations on the Creative Commons website that are fun and simple to help understand how Creative Commons works.  Here is the link to the 1st animation "Mayer and Bettle" http://creativecommons.org.au/content/mayer-and-bettle.mov

Animation

After searching further I found "Gulp" directed by Sumo Science and shot entirely on a Nokia N8:



Gulp. The world's largest stop-motion animation shot on a Nokia N8. from Nokia HD on Vimeo.

I think that this might just be the animation for me!  Now to think about the composition...

Week 4 - Animation Research

Now it's time to research some animations for my assessment task.  The first clip I watched was "Lag" by Guy Collins.

I think that I could have a lot of fun composing to this clip with all the problems that the character runs into.



A SHORT LOVE STORY IN STOP MOTION from Carlos Lascano on Vimeo.

This is another animation that I like.



SCINTILLATION from Xavier Chassaing on Vimeo.

And another.

They are all quite different and would require very different compositions to match the animation.  There is lots to think about in terms of where my composition will lead.

Sharps and Flats

We've been talking about music theory in class and I feel very fortunate to be studying my second semester of music theory and feel like I have a head start on this.  Our last activity was to create some scales in Sibelius and that leads me to sharps and flats.

A sharp or flat on a keyboard is generally the black keys.  They are a semi-tone higher or lower than the white key beside it. There is a symbol that represents a sharp and another symbol that represents a flat, and these symbols must be written in front of the note you wish to raise or lower on a score.

Here is how the notes would be written:

And this is where the notes are on a keyboard:

Week 3

We listened to each other's simple compositions today.  It was great to see what everyone had come up with.  Here is what my final composition looked like.

I received some pretty positive feedback and had a lot of fun with the composition.  Our challenge is to post both the score (above) and the audio and that I am having trouble with.  I have looked at so many websites explaining how to do this and have tried many different things, but still can't get my audio uploaded.

MIDI

As part of our homework for week 2, we were asked to read "MIDI 101", by Scott Wilkie.

You can view an online version here.  This is a very in depth article explaining Musical Instrument Digital Interface, otherwise known as MIDI.  It was developed over 20 years ago now, as a way for synthesizers from different manufacturers to be able to communicate easily.  

Before reading this article, I didn't realize just how much there actually was to MIDI.  Sure I had heard the term and understood that it was a digital music communication tool and even learnt a little bit about it in another unit I studied, but I never really took much notice of it!

I particularly like the fact that you can play around with the tempo with a MIDI and this wont affect how the music sounds.  If you slow down or speed up a normal audio recording you end up with music that sounds like its from another planet.  MIDI's can be slowed, or sped up, with no alteration to the pitch, which is fantastic!
I think that most people would think that MIDI is sounds or audio that travels through the MIDI cables, however this it not true.  MIDI is really a system of sending instructions between MIDI devices.  So if you play a 'C' on a keyboard, an instruction is sent that the c key has been pressed and the same when you stop pressing the key.  The simple "note on" and "note off" instructions tell the output device what to do.  Even how hard you press the key is detected and the information sent through to the device via a 5 pin MIDI cable.

Week 2

In this weeks class we talked about the elements of musical composition.  To compose music you should take into account four elements.  The essential three elements include rhythm, melody and harmony.  The rhythm is the timing of your music or the beat it follows.  Melody refers to the main tune of your music and harmony is really the other notes that complement your melody when it is all put together.  The final element, timbre, is the quality of the sound and the character of the instruments.

There is not really a 'one size fits all' way of composing and musical composition is somewhat a kind of a mystery, but if you make sure that all the elements fit together then hopefully you will compose music that sounds good!  Jack Tinapple described it as like going on a journey.  You start out on the journey, then you go through some ups and downs and then finally you come home from your journey.

After class I worked on this weeks task of composing a short piece of music made from a beginning phrase. I copied this phrase three more times and altered each one.  I called my piece Violin Dance, as I composed it using the violin and have hopefully made a tune that is dance like, with a simple triple time signature.

Sibelius

For the beginning of the unit we are using a program called Sibelius.  We downloaded a midi file, I chose Abba's Mamma Mia, then played around with the score in Sibelius.  The first weekly task was to chose a phrase in the music we liked and repeat the phrase 4 times.  Then play around slightly changing the notes etc to change it a bit.  Quite fun!

Here is a screen shot of part of my "Mamma Mia Modified"

Week 1

Yesterday I attended my very first class of New Media Intermediate Studio.  What a thoroughly enjoyable class.  I am very excited to be studying this unit and learning new skills.  The class was very small and it seems to have a great mix of people and abilities.  Here's to an exciting semester ahead!