Week 9: Web Context for Video

What is the context for publishing video online? Concretely, we can look at our final projects as an example. What constraints / components / parameters / limitations do we have for the final web project?

Some example projects that demonstrate interesting digital media storytelling techniques and possibilities:
You Suck At Photoshop tutorials ( Screencasting / tutorials

Miranda July’s website for promoting a new book of hers in 2007. ( How can text and image work together? )

Scott Mccloud’s webpages as infinite canvas.

Patrick Farley’s Spiders ( via wayback machine, a service from archive.org that allows re-viewing of old versions of webpages stored on their server ).

Farley has recently relaunched his site using the crowdfunding source, kickstarter. ( See fundbreak.com.au for a similar service in Australia )

How to choose a typeface / font.

Rap News from Melbourne.. “the news source for the discerning viewer, delivering a bulletin to restore your faith in the fourth estate; make you nod your head to the beat, even as you shake it in disbelief.

Research Task:
1. Browse this collection of interactive narratives,
and find 3 different sites that showcase some digital storytelling and design ideas that could be adopted for your final project ( or a future project ).

2. What is diegetic sound and non-diegetic sound? How might this relate to web based video?

For today’s tasks, you will need to install the free ‘measure it‘ web app for Firefox, Chrome or Safari, which allows easy pixel measurement of any portion of a website.

A. Create new page for final project in wordpress ( instructions )
– Set to private (click edit, next to Visibility / Public ), so you can keep developing your project.
– Make a note of the pixel dimensions within your new page
– Note also, the pixel dimensions for your blog’s sidebar

B. Create a banner image for your experimental video.
– Measure the dimensions needed for a banner image.
– Make image in Photoshop, then ‘save for web’.
– Publish your banner image and video in a blog post, or within a special page.

( See Instructions on publishing vimeo clips, including capacity to change video width and height.
Note 1 : When pasting in Vimeo’s suggested ‘video embedding code’ into a wordpress post, be sure to have selected your HTML tab in the wordpress dashboard, not the visual tab. )
Note 2: Vimeo’s basic uploader seems to work more reliably at RMIT, than vimeo’s flash uploader.)

C. Create an image map for use in wordpress.com
1. Upload an image to flickr or wordpress, so that it has a URL – eg http://www.site.com/imagename.jpg
2. Enter your image URL at: http://www.image-maps.com/
3. Draw the areas you wish to have as links, and write the related URLs.
4. When finished adding all links, click ‘get your code’
5. Click the HTML Code tab, and copy all the code from:

<img id= … until and including </map>

6. Inside your wordpress blog post – click HTML editing mode ( rather than visual), and paste your code in here.
7. Click ‘Visual’ editing mode to see what it looks like, then press publish, and mouse over link areas to test.

D. Create an image for your sidebar
(This can be for your project, for linking to other accounts / sites, or for anything randomly of interest to you.. )
– Measure the dimensions needed for a sidebar image.
– Make image in Photoshop, then ‘save for web’.
– Upload your image to generate a URL for it.
– In WordPress ‘Appearance’, drag your image widget onto your sidebar, and enter relevant image details.
( If you wish to use an image-mapped image in your sidebar, use the text widget, and paste your image map html code in there. )

1. Finish and publish video experiment from last week. Publishing on your blog means everyone can start to easily see each other’s remixes here.

2. Set up Final Video Project
– Open new project
– Change project settings to these settings
– place your 1 minute soundscape on the timeline
– Save your project
– bring in the ABC POOL clips you are using, to the media bin
– bring in any of your own footage, to the media bin
– Think about thumbnails you wish to represent your video at vimeo and POOL.
( Generate stills from a video through export settings, or screen capture ( option+command+4))


3 Responses to “Week 9: Web Context for Video”

  1. Settings for Your Final Project « Design Studio 2010 Says:

    […] with links that you may like to read and a little inspiration and ‘know-how’ is the Web Context for Video post. If you want to have a peruse of what the Design Studio students outside of our class are up to […]

  2. TROUBLESHOOTING HELP « Design Studio 2010 Says:

    […] Also this post might help you ( See Instructions on publishing vimeo clips, including capacity to change video width and height – http://en.support.wordpress.com/videos/vimeo ) […]

  3. Par – tis – i- pay- shon « TysonYeo's Blog Says:

    […] Web context for Video […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: