Photosounder wall by Joe Fuchsen is a nice example of both time lapse, and the relationship between sound and image. Joe used the program Photosounder to analyse his image and produce related sound, with higher pitches happening when sticking pieces of paper up higher on the wall. Joe has also made a great visual surrounding for that video on one of his HTML project pages.
Archive for the ‘html’ Category
A few tips on creating the Audio Embedding Code for your Soundscape:
– Create an audio folder on your server with fugu / fetch etc, and upload your mp3 into it, note URL of audio.
– Test this in the browser : eg http://raws.adc.rmit.edu.au/~s1234567/foldername/filename.mp3 If correct, this should play your sound.
– Insert audio URL into PageOt to generate code, (note – make height=0, so you get a controller without a blank video window) Insert this code into a HTML page made in PageSpinner, include links for any sourced material.) Width can be adjusted to make the controller suit the width of page design elements. Clicking controller on/off will have it display or not, and loop and volume allow further controls. Press ‘code and options’, paste this into a HTML page, upload – and bingo!
[ Or try this web based option for generating embedding CODE. ]
What to do with your soundscapes?
Aside from publishing within your final project – where else can you publish them, and what else can you publish them with? ( Eg text, images, links to your project / music / blog etc ) And what are useful tags to use when publishing them?
Soundcloud is obviously an option, but there are also several dedicated soundscape related websites:
eg Freesound (which hosts creative commons samples), http://www.soundcities.com/, http://aporee.org/maps/ and http://turbulence.org/soundtransit/
This week: time-based media and HTML. We’ll be covering everything needed for the video and sound part of your final assignment – Time Lapse Video techniques, sound and video compression – and below, how to publish these files within your webpages.
There are 3 main ways to display media files within a web page.
Method 1: Direct linking to a media file.
1. Upload your media file to a server. Noting the location on the server, figure out the URL for this file.
2. Enter the full URL in a browser. If pointed to the address of a media file stored online, a web browser will play back the file in the centre of a blank web page. eg the link below:
That same URL can be used with hyper-linked text (eg my time lapse video file ), to take viewers to a separate page with the media file.
Method 2: Using Files Hosted at Online Services
Most media hosting services such as Youtube, Vimeo and Soundcloud etc will give you embedding code for a file, which can then be placed within the body of your HTML page. While this allows positioning of the media file (instead of having it centred in an empty page), it still limits control over playback of the media file, and limits the look of the media player.
Method 3: DIY Embedding Codes
The most flexible, customisable option for embedding media files – is only a couple of steps more difficult than the other 2 options above, but through learning this method, we gain the capacity to play sounds in the background (by setting the values of the player visibility), add the ability to loop playback, design the look of the media player, and several other functions.
What Code Do We Need for Embedding Media Files?
W3Schools outlines the structure and syntax of HTML, and explains the relevance of elements within that structure. For embedding time-based media files, we are interested in the Object Element which ‘supports many different media types, like Picture, Sounds, Videos and other multimedia Objects’.
Below is a HTML page with a table in it, and the code for a video file embedded within that table. This allows control of where the video player is located on the page. Use the browser menu to view the source code for the page.
Having viewed the code, note there are two options for generating the relevant codes for embedding time-based media files within webpages.
1. PageOT is free software ( mac + PC ), that “an immediate access to the complex features of QuickTime plug-ins, and gives you the power to create interactive playlists and presentations.” (If installing PAGEOT in the mac lab, install into a folder on the desktop, as you don’t have permission to install into the applications folder)
2. A web based generator of embedding CODE for embedding ]
For both processes, you will need to enter the URL of your media file, choose various settings, then collect the relevant code outputted, and then place this within your HTML page.
And some context for the near future of web publishing – HTML 5 – audio and video:
“HTML5 is not yet an official standard, and no browsers have full HTML5 support. But all major browsers continue to add new HTML5 features to their latest versions.”
How will we be assessing the Creative Project? Ed has noted a few guidelines to keep in mind while developing and creating your project. Have a good read through, and think about how your project addresses each of these.
After learning to write HTML ourselves, and understanding the structure and rules we can now graduate to using HTML editor software, which allows us to use a range of short cuts for generating relevant code.
WSYIWYG (What You See Is What You Get) software such as Dreamweaver or Frontpage cannot be used to create your project. We emphasise the use of simple HTML editor software so the rules and structure of HTML are absorbed as much as possible.
To Install Pagespinner
Create a new folder on your desktop called ‘Other Apps’. ( We do not have permission to install applications into the official applications folder)
Download Pagespinner. (See also The Pagespinner FAQ)
find your downloaded application, double click, and drag the Pagespinner folder into your ‘Other Apps’ folder. Go inside the folder, click Pagespinner and explore.
Some PageSpinner Tips:
The Opening menu offers suggestions for :
New Empty HTML page – which gives you a blank page, with the necessary tags, to start a page from.
New Page Assistant – choose an example template ( eg a page with some tables in it, or a page with a long list of sample editable links included )
Or, from the menu at the top of the screen, clicking File and ‘New Empty Page’ will also get you started..
– Choose ‘Window’ then ‘setup’ then ‘select browser’ and choose Firefox. This will allow you to test your page in Firefox by pressing the navy icon in the far top right of the Pagespinner code window.
– Generally you will work within PageSpinner using page for writing text and code within, and keep a smaller ‘HTML Assistant’ window open beside it. Find this using Pagespinner -> Window -> HTML assistant. The HTML Assistant can also be used to easily insert necessary code for transforming parts of the page.
– When starting a new page, use the pull-down menu in the HTML Assistant window and choose ‘document body’. This will give you options for defining the text colour, background colour or a background image for your page.
– Want to quickly change the colour of particular text? Highlight your text, then from the top screen menu choose ‘text’, then ‘text colour’ and ‘other’ if you wish to use a colour other than the ones they suggest.
– Want to quickly formatting text or photos to be centred? Highlight the text, then click on the ‘centre text’ icon. Change the code from ‘center’ to ‘left’ or ‘right’ if need be.
– Note, to delete any code or text from a page, you need to highlight the text, then press ‘command + delete’.
Ed has written up a very useful guide for the Presentations which happen next week.
Why are we doing these presentations? They help emphasise a few project management skills – time management and communication.
– By Week 6, it’s important that your ideas are refined and that you’ve budgeted enough remaining time in the semester to produce and refine your project.
– Being able to clearly describe your project to peers and potential audiences, increases the possibility of meaningful feedback, collaboration, further interest in your project and importantly – it helps focus your own ideas about the project’s development and priorities.
You have a small amount of time to do your presentation – so prioritise the delivery of your ideas. What is most important and interesting about your project? Why would anyone be curious or excited to explore your project? Being mindful of these questions will help shape your project in worthwhile directions. With a good project underway, part of the challenge for anyone in a creative industry is framing their project in a way that will attract interest and attention. The old advertising phrase – ‘Sell the sizzle, not the sausage’ – suggests that selling sausages can be done more easily by selling people on the idea of an enjoyable BBQ, or the memorable sensations surrounding it, rather than the product itself. In what ways might web viewers be lured deeper into your web project? In what ways might next week’s presentation audience be lured into your project?
Ongoing Project Development
1. Clarifying and refining project idea. (Is it feasibly scaled? Is it framed well?)
2. Storyboarding and mapping out your overall site plan.
3. Developing media assets:
– Write any needed portions of text
– Create any needed photographs, graphics, navigation buttons, background images etc
– Create necessary Time Lapse video. A time lapse video is a series of images / frames / photographs taken over a long period of time. We will delve into the technical specifics of creating this video later, at this stage your idea matters most. What is it that you wish to document with the passing of time? ( A journey to a destination? Movement of people, objects, clouds?) Think about what will work well with this special effect, and think about how it can relate to and enrich your project. What would be an ideal setting and composition? Learn from the network: research timelapse videos and techniques within vimeo. How many photographs will you need to produce a 1 minute time lapse video? What size and format should they be?
– Create necessary 1 minute Soundscape from Melbourne. What is an appropriate / interesting / provocative / evocative soundscape that would add richness and depth to your web project? Where do you need to record this? What will be the web context of this soundscape, and it’s relationship with onscreen imagery?
4. Building website with all of the above, and testing, refining, getting feedback, testing, refining.
Having already learnt a little about the structure and principles of HTML pages, this week we will explore techniques for controlling the layout and design of a webpage. But first, via w3schools, let’s examine the context of HTML in 2011.
HTML = Hyper Text Markup Language (designed to display data)
XML = eXtensible Markup Language. (designed to transport and store data.)
XHTML = a stricter cleaner version of HTML, eXtensible Hypertext Markup Language. It combines everything within HTML 4 with the strict syntax of XML. (Unlike HTML, XHTML documents require all coding rules to be adhered to, for pages to work properly. This makes it ideal for running on mobile phones which do not have the resources or power to interpret documents with poorly formed code).
RSS is written in XML and stands for Really Simple Syndication, and defines an easy way to share and view headlines and content.
CSS = Cascading Style Sheets. Whereas HTML defines the content and structure of a document (eg it states which part is a heading, or a paragraph, using appropriate tags), CSS defines how these HTML elements are displayed (eg what font + font colour should be used etc ).
That’s our context above.
Given that this isn’t a web design course (we have a much wider focus than just the technicalities of building webpages, including analysis of the social, cultural, legal and economic dimensions of the online environment, as relevant to the music industry), and given that we have limited time – we’re focussing on learning a foundation of HTML to build webpages and just a little CSS to control how those pages look. If later desiring to pursue web development in more detail, the above context should help. And so, onto lay-out and design – which means HTML + CSS.
HTML Lay-Out – Introducing HTML Tables
The W3Schools HTML examples page hosts a large and useful series of examples all on one page. These range from the basic structure of a document through to links, images, advanced form functions and our focus today – tables. Tables allow content in a webpage to be arranged within grids of rows and columns. By creating tables of certain sizes, and putting content within specific table rows or columns, and leaving other rows or columns empty if we wish, we can control where content appears on the page, eg:
|Column 1 text
|(empty column)||Column 2 text|
TASK: Construct a html page which includes a table.
Your table should have 3 columns, 2 rows and some example text.
Adjust your table so it is 800 pixels wide. Experiment with the width of each column. (table width/
– Have a look at the code for a basic table at W3Schools, try altering some of the code, then press ‘edit can click me’ to see changes. Then move onto this table tutorialand use this to help build your html page with table. Name your new page table1.html and upload to your server with Fetch.
Using CSS to Control Colours + Fonts
There are 3 ways to use CSS to format a document in a particular style:
1. An External Style Sheet. This is a separate document with the extension .css, which lists the styles wanted for the document ( eg font colour, background colour. If a .css file is linked in the head section of a HTML document, that HTML document will be displayed according to the style rules of the .css file. This is the easiest method to style many pages.
2. Internal Style Sheet. This method inserts a list of style rules, using the style tag, inside the head section of a HTML page. This is an easy way to style a single page.
3. Inline Styles. This method inserts a style into a specific HTML tag, by using the style attribute.
CSS TASK: Experiment with the 3 methods of CSS formatting.
Use your previously saved HTML page to experiment with the following:
– Changing the colour of the page background
– Changing the colour of the text
– Placing an image in the background
– Adjusting your table.
Below are a range of online projects that might generate some ideas for your projects – or perhaps some questions, some challenges to consider. Many of these are quite advanced projects, the result of many more hours effort than we have available this semester. There is still much we can learn from them though. When browsing these projects, ask yourself about the techniques they use. Which of these techniques might be suitable for your project? Which of these techniques demonstrate, and take advantage of, the web’s affordances? What can you learn from each of these projects, about how to better make your project more ‘web native’, and less like a linear, print based project? What can you learn from each of these projects about how to create a more engaging and compelling project, that draws the viewer/ reader / listener into the world of your making? What new creative problems do these projects suggest about your project?
Interesting use of navigation, non-linear design?
Wax Or the Discovery of Television Among the Bees is the first independent feature film to have been edited on a digital non-linear system. It is also the first film to have been re-formatted as hypertext and posted on the internet.
Example projects that feature interesting relationships between image and text? ( Online comics are often innovators here.. See also, Scott McCloud’s discussion of image and text relationships.) Image and sound? 10 tips for effective web sound design. Gamers have long been thinking about non-linear uses for sound and issues that arise. Some of these game desig thoughts about interactive audio might be useful in thinking through how sound could work on your website.
Collaborations and crowdsourcing?
Projects built by engaging with an audience / promoting during development / aggregating content?
Star Wars Uncut – Features a constantly changing version of a the film, constructed with 15 second clips made by anybody, with the highest voted clips at any time, being included in the current playing version. See the CNN profile about the project creators
White Glove Tracking – volunteers isolated Michael Jackson’s white glove in all 10,060 frames of a video clip, so that this data could be used by anyone to create remixes or special effects.
Webcam Sour project – “The cast were chosen from Sour’s international fan base and filmed entirely via webcams.”
Where is Gary? Using social media and the audience to track down a scammer, and build a documentary around this.
Episode Based Productions
Taking advantage of subscription based technologies and social media to develop projects and build audiences over time…
The XKCD comic ( now a book, like many webcomics that’ve gained popularity )
Rocketboom ( daily 3 minute video news )
Ze Frank a whole range of ideas and projects, many collaborative.
thejuicemedia Satire and hiphop meets current affairs in the Melbourne based ‘Rap News’.
Ask A Ninja
And Bringing it Back to Basics
We’ll be exploring some more project management and multimedia storyboarding ideas next week, along with our next dive into HTML (bring along some sample text and images for use). Below is some useful reading in regards to framing and designing your project.
Tips on building portfolio sites, “Your site is a frame: A frame exists to hold its art. It should compliment your work, but never overshadow it. Think of your portfolio site as a frame for your work. Keep it clean and easy to navigate. Don’t let your site get in the way of letting me see what I really came for.”
Advice for designing your website layout.
Hopefully you’ve enjoyed the long weekend. Although there was no Monday class this week, a Tuesday class happened, and there is a range of work we need to do to keep the semester’s timetable on track. For week 3 we wanted to look at a range of online project case studies, each leveraging certain aspects of the online environment. I’ll post a collection of those projects later today – please have a browse and reflect about what makes these interesting. How might some of these techniques / principles / ideas help improve your project / practice ?
In The Meantime
Have a look at these previous examples of projects by Concept Development students. Aside from their chosen topics, what makes them succeed or fail as websites? Who has integrated audio in an interesting way? Who has interesting relationships between text and image? Which sites are easy to navigate, and why? Make some notes about any ideas you find, and write about how they relate to your project.
VooPoo Dolls.., Dog Meat Records, Noise Pig Productions, DIY Home Recording, A World Percussion Tour & The S.A.T.O.R. Chronicles, Meliki’s musical quest, running small events, Take Away Food Project, ‘NV‘, From Bedroom to Rockstar, Groove Swing Blast ( a site for Melb drummers ), Behind the scenes of Sid The Serpent, Australian Teens Against Animal Cruelty, Recycling CDs, DVDs, Awe Presents ( Online Music Marketing ), Music and Visual Images, an audiovisual diary of inner city retreats.
We’ll be discussing both of these readings in Week 4:
Aguiton, Christophe @ Cardon, Dominque, 2007: The Strength of Weak Cooperation: an Attempt to Understand the Meaning of Web 2.0,Accessed Feb 2011: <http://www.idate.fr/fic/revue_telech/696/CS65_AGUITON_CARDON.pdf>
Ganaele Langlois (2011) Meaning, Semiotechnologies and Participatory Media, Culture Machine, 12, 1-27 Accessed Feb 2011: <http://www.culturemachine.net/index.php/cm/article/view/437/467>
Like architects learning about carpentry – or film-makers learning about lighting – or musicians(!) learning about how webpages work – today we dive into the world of HTML (Hyper Text Mark-up Language) : “a text and image formatting language used by web browsers to dynamically format web pages”.
This week, then:
What does a simple page contain?
Learning the structure and syntax (rules/principles) of HTML ( such as tags, elements etc )
Once HTML files have been made, where do you put them? ( servers / how to upload / how do URLs work? / What is the difference between relative and absolute addressing? )
How do we link pages to one another?
We will be relying mostly on W3schools to explore these ideas. Feel free to explore each topic in the W3schools sidebar in your own time.
Create a new folder within your section of the RMIT server, giving it the name of your project.
Create an example page that includes your name, a link to your blog and one sentence about what you wish to achieve with your project. Save the page as ‘index.html’
Create a second page that briefly describes what your time lapse video will be about. Include a link to your main project page ( eg link – http://raws.adc.rmit.edu.au/~s123456/projectname/index.html ) Save this file as timelapse.html
And finally, write up a brief blog post about your project and include a link to your project website. This will mean everyone will be able to read about all the projects in each of the 3 classes, by reading the Rss feed for the group.