361 multimedia

Welcome to Spatial Design Multimedia: Digital media techniques and concepts for spatial design communication.

224.361_Paper Outline | Assessment Schedule


A hacker is someone who loves to program or who enjoys playful cleverness, or a combination of the two.[3] The act of engaging in activities (such as programming or other media[4]) in a spirit of playfulness and exploration is termed hacking. However the defining characteristic of a hacker is not the activities performed themselves (e.g. programming), but the manner in which it is done: Hacking entails some form of excellence, for example exploring the limits of what is possible,[5] thereby doing something exciting and meaningful.[4] – wikipedia (yuss)


Week 11 WordPress Steps

WordPress dashboard.

  1. Firstly, go to your groups website. It will be http://idea-edu.com/group1/ (but with your group’s number)
  2. If you theme supports it, there will be a “login” link somewhere, but if not, go to the wordpress login page: http://idea-edu.com/group1/wp-login.php
  3. Now use the “dashboard” login and password information that I emailed to you to login.
  4. After logging in, there should be a dark-grey bar at the top of your website, you can use this to go to the dashboard, add posts, edit posts that you are on and more.


Cyberduck FTP (File Transfer Protocol)

  1. In Macos, Open the Cyberduck application.
  2. Click on the “Open Connection” button.
  3. Make sure the connection type is “FTP”, sometimes it is on other protocols by default.
  4. Type “idea-edu.com/group1/” as your server
  5. Now use the “ftp server” login and password information that I emailed to you to login.
  6. Now you can navigate to your theme folder, it will be in “/wp-content/themes/”
  7. Make sure you double click on the folders to navigate into them.
  8. Now you should make a backup of your theme, so simply drag the folder from cyberduck to your desktop (or your carefully named website backups folder)
  9. Now you can edit the local copy of your theme (the one you just copied to your desktop)
  10. After editing a file, you can simply drag it back into the cyberduck window (make sure you drag it into the correct place, you want to overwrite the old file on the webserver with the local copy you just edited)
  11. Now refresh the website in your browser.



Week 10

WordPress is a free and opensource website development platform used to run small, medium and large scale websites. It is suitable for both inexperienced beginners and experienced web designer/developers.

The final portion of this project will be developing and hacking wordpress to compliment your groups studio project.


The spatial blog and spatial student archive is run using wordpress, also check out the wordpress site showcase

Don’t freak out! We aren’t expecting that you build a complete website from scratch! This is why we are using wordpress as there are 1000’s of other users that have created themes and plugins that we can use to get basically what we want and then edit/hack to get exactly what we want.


As more and more clients become web savvy
they are actively seeking web designers who can
build impressive websites in WordPress.

Why? Because many clients like the functionality
WordPress offers and they want to be able to
make small edits to their website (like changing
text or adding blog posts) on their own. – Conrad Feagin (web designer)


Remember playful cleverness!
Edit something, see what happens, adjust, repeat. This will quickly build your working knowledge of html, css, js, php and wordpress.


Week 10 Tasks:

00: Javascript Presentations

Please put your javascript exercises on the 10B12 projector imac desktop so we can quickly run through them all.


01: Set up the Groups

Please enter the information for your studio/multimedia groups with individual members names and email addresses.
After you have input the info, I’ll create users and send you all passwords to your very own live, functioning wordpress website!.


02: Overview of WordPress:

WordPress Overview Diagram:


03: Overview of the WordPress Dashboard



04:  Overview of CyberDuck and FTP

student shared for password


05:  Lab session

In your groups, login to the wordpress Dashboard (using a web browser) and the FTP webserver (using CyberDuck).

Using the dashboard, Add a post and a page, change the site name and description.

Look for a new theme using the dashboard interface, preview before installing, install it.

Now edit the theme using CyberDuck. You’ll need to download the theme to your computer using CyberDuck, edit the files in Textwrangler, then re-upload  using CyberDuck to overwrite the files on the ftp server.



Week 09

  1. Studio Exercise 2 CSS Hack presentations,

  2. Intro to the Internet/Web: (whiteboard diagramming with focus on JS, JQuery, libraries, resources and hint toward advanced coding practices, animation, interactivity)

  3. JS Hack

  4. Javascript (jQuery) tutorial (studio snapshot, animation, interaction, breaking the frame, spatiality, webpage as workbook, infinite space)

  5. Hacking template JS file created (on student shared)

  6. http://www.w3schools.com/jquery/default.asp

  7. http://api.jquery.com/



Week 08

  1. Studio Intervention Documentation HTML Hack presentations

  2. Intro to the Internet/Web:  (whiteboard diagramming with focus on CSS, multi-file sites)

  3. Studio Exercise 2 CSS Hack

  4. CSS tutorial session (multi page site, presentation, composition/framing)

  5. Using template CSS file created (on student shared under “361\Week 08\”

  6. http://www.w3schools.com/cssref/default.asp



Week 07

Studio Intervention Documentation: HTML Hack

Hack/Use/Edit/Alter/Change/Modify/Re-do/Manipulate the template index.html file I created (on student shared under “361\Week 07\”) to present and document your Studio Intervention.





please refer to Studio blog page for updates



Project 01_2013

Starfish: New Materialism

This project is run in conjunction with 224.351_Studio III and 224.381_Theory.

Refer to Studio blog page for brief.


Week 01: Temporal Typography

Oli’s Example:

Week 02: Real Time/Space

Oli’s Example:




References, helpful links and other cool stuff:


> Check out final cut studio tutorial for overview of Final Cut Pro and motion

> Project 1 recommended reading – check this out!


  • Angell, D. (2008). The Filmmaker’s Guide to Final Cut Pro Workflow. Amsterdam: Focal Press.
  • Brenneis, L. (2008). Final Cut Pro 6: Visual Quickpro Guide. Berkeley, CA: Peachpit Press.
  • Weynand, D. (2007). Final Cut Pro 6. Berkeley, Calif: Peachpit Press.


How to make an animated gif:


Useful and interesting sites:

Vimeo or youtube – embed movies to your site using vimeo or youtube

Lightbox – experiment with the display of your images using lightbox! see below for tutorials

Design Meltdown – have a look at how others are putting their sites together

FFFFOUND!! – Image bookmarking – sweet way to find funky new design

dafont – find cool fonts to easily download


design you trust

http://www.kenstone.net/fcp_homepage/fcp_homepage_index.html – (Final Cut Pro)

Stock movies and images:


Help me …!!

The internet can tell you everything you need to know to make your site look/do funky stuff

the best is: http://www.w3schools.com/html/default.asp



…an awesome tool to help you see when things go wrong – it’s an add on to Firefox…


Once you have installed this, right click on your screen and click “inspect element” – a window will appear at the bottom of the screen displaying your code.  You can modify this on the fly to try and fix your issue.


Other interesting sites:




http://www.dailyslurp.com/ < check this one out daily for cool sites

http://foxie.ru/ <not flash

http://www.ndesign-studio.com/resources/tutorials/illustrator-cs2-splash/ < make funky graphics


http://www.resn.co.nz/ < these guys do some really hot work [flash]


http://www.sebdesign.eu/ < sweet graphics


http://monochrom.pheist.net/ < you can put background images on your body….



lauren skogstad – online portfolio (past graduate now specialising in digital design)