Week 6 - Final Video

Final version of our video and also posted on website

Week 6 - Gifs

We did one Gif posted on the website, were it is shown how to use the paper towels correctly. The other version shows the incorrect way of using paper towels.

Week 6 - Updated website contents

Our team went over the final contents of our website, we added links to sources and tedxtalk inspiration of our project.

Week 6 - Audio clip for the website

Early on our planning, we wanted to add a knocking on the door audio for our website. The idea was to have a first page with audio and once the user click on the page they will go straight to the main page.

We asked help from our tutor Matt and he recommended to look up the audio tag for HTML 5.

I was able to grab a sample tag from w3schools (www.w3schools.com/html/html5_audio.asp), which also reminds me that this site was mentioned in the CSS guide video from stream. The audio was download on www.freesfx.co.uk

We simply copied the tag and paste this to our index page. 

 <audio controls>

<source src="filename" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Another change we did was to have the audio on auto play and asked Matt how to take off the audio bar player, which is simply just to take out controls on the tag.

   

gif

https://imgflip.com/gif/ltu75

Glasses

Glasses

Week 5 - Final Video: Improved rough cut

Below is the improved rough cut of our final video. We have yet to add the soundtrack and credits.

We also had a small presentation to our tutors and another group. We were able to get some feedbacks regarding our final video and website:

• Look at changing the text at the beginning of the video to match with the website
• Use gif for our second video
• Work on zooming in the tree -- to give a more sinister feeling

Week 5 - Final Video Shoot

Below are raw footages from the re-shoot:

On the first rough cut, some of the shots were out of focus. Below are two example of improved clips: The actor is grabbing a ton of paper towel--- first clip shows the camera goes out of focus and second clip is the resolved shot.

Below are clips of the pot plant. We are planning to add a voice over on editing.

More raw footage when Josh (second actor) comes in

Week 5 - Final Video Shoot

More raw footage from our final video shoot

Week 5 - Website Processes

Below are screenshots of the final design of our website and coding of HTML and CSS page.

• With the temporary name, we wanted the name of the project to appear on the top section of the dispenser. As the user scrolls down, they will recognise the object –then this will lead them to the paper feed.
• On the right-top corner, there are quick links to the feed. This feature was taken from the Web Template 3 via stream.

• Feed 1 - Features our main video for this project
• Feed 2  - A bonus video with research facts from our topic
• Feed 3 - Informative ways for user to save paper towels

•         We added a 4^th section to the layout which features our group

Our group decided to add a first page. We all liked the idea that the user will see a “vacant” toilet sign before they can go in to the main page.

• We’re also going feature an “engaged” page at the end of the website.
• Another feature we like to add on our website is an audio of a knocking sound before proceeding to the main page.