Welcome to Spatial Design Multimedia: Digital media techniques and concepts for spatial design communication.
Project 02: HACKING SPACE
A hacker is someone who loves to program or who enjoys playful cleverness, or a combination of the two. The act of engaging in activities (such as programming or other media) 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, thereby doing something exciting and meaningful. - wikipedia (yuss)
Week 11 WordPress Steps
- Firstly, go to your groups website. It will be http://idea-edu.com/group1/ (but with your group’s number)
- 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
- Now use the “dashboard” login and password information that I emailed to you to login.
- 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)
- In Macos, Open the Cyberduck application.
- Click on the “Open Connection” button.
- Make sure the connection type is “FTP”, sometimes it is on other protocols by default.
- Type “idea-edu.com/group1/” as your server
- Now use the “ftp server” login and password information that I emailed to you to login.
- Now you can navigate to your theme folder, it will be in “/wp-content/themes/”
- Make sure you double click on the folders to navigate into them.
- 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)
- Now you can edit the local copy of your theme (the one you just copied to your desktop)
- 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)
- Now refresh the website in your browser.
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:
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.
Studio Exercise 2 CSS Hack presentations,
Intro to the Internet/Web: (whiteboard diagramming with focus on JS, JQuery, libraries, resources and hint toward advanced coding practices, animation, interactivity)
Hacking template JS file created (on student shared)
Studio Intervention Documentation HTML Hack presentations
Intro to the Internet/Web: (whiteboard diagramming with focus on CSS, multi-file sites)
Studio Exercise 2 CSS Hack
CSS tutorial session (multi page site, presentation, composition/framing)
Using template CSS file created (on student shared under “361\Week 08\”
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
Starfish: New Materialism
Refer to Studio blog page for brief.
Week 01: Temporal Typography
Week 02: Real Time/Space
References, helpful links and other cool stuff:
> Check out final cut studio tutorial for overview of Final Cut Pro and motion
- 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:
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
http://www.kenstone.net/fcp_homepage/fcp_homepage_index.html - (Final Cut Pro)
Stock movies and images:
- http://www.archive.org/ movies and images
- http://www.sxc.hu free stock images
- http://www.imageafter.com/ free stock 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)