Interactive 1 Class Blog » class

Final Class

Gordon Brander — Mon, 10 May 2010 23:26:58 +0000

The final will be delivered via SmartClass in the Interactive_Media_1/final folder during class. Make sure you have your files on hand.

Delivery instructions

Create a folder in the final/ folder titled lastname_firstname (your last and first name).
Zip up your entire WordPress directory (right-click > Archive). Place it in your folder
Export your WordPress database, place the .sql file inside of your folder

Deploying WordPress fresh on NearlyFreeSpeech:

See: http://randomwindowstips.wordpress.com/2009/03/03/installing-wordpress-on-nearlyfreespeechnet/ for instructions on installing WordPress on NearlyFreeSpeech.

Alternate instructions: deploying what you have on your local environment

Here’s an outline for deploying your local site to NearlyFreeSpeech (advanced):

Charge up NearlyFreeSpeech with some cash
- Accounts > click on your account number
- Click Actions: Deposit funds (in sidebar)
Set up the Database
- Create MySQL process
  - Actions: Create a New MySQL Process
- Click on process
  - Actions: Create Database
- Export local database
- Import database
- Edit wp_options url
Upload files via FTP
- Launch your FTP editor (Fetch)
- Log in to NearlyFreeSpeech
- Upload the contents of your wordpress/ folder
Edit wp-config.php
- Edit database host
- Edit web urls

ShiftControl Studios Visit

Gordon Brander — Tue, 13 Apr 2010 16:07:16 +0000

Class this Wednesday will be held in Arts 194. We will be participating in a guest presentation by ShiftControl Studios. Attendance is mandatory. The event is open to all students. I anticipate it will be a very cool presentation, so feel free to bring a friend.

Event Details

What: Presentation by ShiftControl Studios
When: 7:00pm-9:00pm
Where: Arts 194 (click on map below)

Class: WordPress and Themes

Gordon Brander — Thu, 08 Apr 2010 00:27:41 +0000

Installing WordPress

Read detailed instructions here, or follow along in class.

Installing Themes

Download the Learn theme for WordPress: go to http://github.com/gordonbrander/learn and click “Download Source” toward the top-right of the page.

Take the theme folder (learn/) and put it into your wp-content/themes/ directory.

About Themes

Learn is an ultra-simple theme for learning WordPress theming, with lots of comments throughout.

The simplest possible theme looks like this:

my-theme/
- index.php
- style.css

The folder contains all of the theme files and can be named anything you want (avoid spaces and special characters, though). I’ve used my-theme as an example. index.php does pretty much what you would expect—it’s the default page that is loaded. style.css contains styles, but also a special CSS comment that tells WordPress about your theme.

Class: Intro to PHP

Gordon Brander — Thu, 01 Apr 2010 00:00:13 +0000

Follow along with the class tonight: Download hello-world.zip.

Using MAMP

MAMP is a Server-in-a-box. Basically, it turns your computer into a local web server. To use MAMP:

Launch MAMP.
Start the Servers. Wait until the dots are green.
Visit http://localhost:8888/ in your browser. This is your web root. It can only be viewed on your computer.
Place PHP programs in Applications/MAMP/htdocs/.

Comic of the day

Class: Developing CSS Systems

Gordon Brander — Thu, 11 Mar 2010 00:58:45 +0000

Developing a website is a complex endeavor, and it’s important to have a plan from the very beginning. One of the most important rules for developing a useful CSS system is this:

Create general styles first and specific styles last.

Styling your website is like creating a pyramid: create a good set of general styles as a base, with styles becoming fewer and more specific as you go. If you neglect to style your basic things first, you’ll end up with lots more specific styles, like an inverted pyramid. Not a very structurally sound prospect.

Why? Planning your styles in this way takes advantage of CSS’s concepts of inheritance and specificity.

Inheritance says that many of the styles applied to a parent item will be applied to it’s children as well. A familiar example of this is setting the font property on the tag. All children of will automatically inherit those font settings by default!
Specificity means that many styles can be applied to one object in different ways, and CSS will resolve conflicts by determining which one is more important. For example, I could apply a margin of 17px to all paragraphs, and additionally add color: blue; margin-left: 32px; to one of the paragraphs via a class. Can you guess what will happen? The browser will Make that paragraph blue and make all of its margins 17px, except for the left margin, which will be 32px.

What does this mean in practice? Put styles applied to tags toward the top of your css file. More specific styles for classes should go below that, and super-specific styles for IDs should go toward the bottom.

body {
   ...
}
a {
   ...
}
p {
   ...
}
.some-class {
   ...
}
#some-id {
   ...
}

Would you like to see an example of these principles? Download choose-your-own-adventure-example.zip. It’s a simple example of a website implementing these ideas.

Class: Buttons!

Gordon Brander — Mon, 01 Mar 2010 22:26:10 +0000

Download buttons-stub.zip

Cool Button Techniques

Zurb makes cool buttons with CSS
More cool (radioactive) buttons from Zurb
Sliding-door CSS buttons One of the most useful techniques to learn.
Sagmeister.com. This website is just wacky and cool.

Validate your code.

Class

Gordon Brander — Wed, 24 Feb 2010 23:13:30 +0000

Keep your code clean and error-free: validators for HTML5.
You can also validate your CSS.

Class: Layout Smackdown!

Gordon Brander — Mon, 22 Feb 2010 15:38:34 +0000

Download layout-stub.zip

Class: Wireframes

Gordon Brander — Thu, 18 Feb 2010 01:42:53 +0000

Wireframing Ideas

Need some examples of wireframes? Check out the Wireframing Tumblelog.
Jason Santa Maria shares his Grey Box Method of wireframing
The future of wireframes update 2010-03-04
All the wireframing-related links you could ever want

Quote of the Day

I prefer drawing to talking. Drawing is faster, and leaves less room for lies.

— Le Corbusier

Class

Gordon Brander — Tue, 16 Feb 2010 00:25:34 +0000

A couple people have asked about how wide they should make their website

The traditional maximum width for a website is 960px
You can design for your audience using Google’s browser size tool. This gives average screen sizes for everyone that visits Google (hint: that’s nearly everyone).

Since the web is a scrolling medium, try thinking of wireframing your site as if you are playing upside-down Tetris, stacking elements into “slots” on the page.

Remember that part of your page will always be below “the fold”.
Always ask “what if?”. What if that box had five paragraphs instead of three?

960.gs provides a ton of great resources for designing with grids on the web.