How to use this blog

We will be using this wordpress site for most things we do in this course. This website is implemented as a customized WordPress blog. For general information about editing WordPress pages, see this resource, or this one. To get started publishing, log in here.

Student assignments will be submitted in the form of WordPress Posts (not Pages), that you edit and publish with the WordPress editor after logging in. You will also be required to submit your code via TurnItIn.

EMBEDDING UPLOADED IMAGES

Customary varieties of web-ready images (.jpg, .gif, .png) can be uploaded to our site using the “Add Media” button in the top left of the WordPress post editor. Click this button, upload your media to the site, and then be sure to “insert into post”. (If you forget to insert the image into your post, it will just languish in a directory of uploaded images.) Here’s what the “Add Media” button looks like:

addmedia

Note that there are restrictions on the maximum file size (10MB) you may upload. Contact the professor if this presents a problem, or try saving your file with a smaller file size using Photoshop’s “Save for Web & Devices” feature.

EMBEDDING EXTERNAL MEDIA IN YOUR POSTS

Many assignments will require you to embed a variety of external media objects into a WordPress post. For example, you may wish to embed a YouTube video documenting one of your projects. For this purpose, our course blog makes use of the powerful WordPress Jetpack plugin. Jetpack provides the following shortcodes to embed your media:

[blip.tv]
[dailymotion]
[digg]
[flickr]
[googlemaps]
[polldaddy]
[scribd]
[slideshare]
[soundcloud]
[videopress]
[vimeo]
[youtube]

EMBEDDING SYNTAX-COLORED CODE

This WordPress uses the Make WP-Syntax plugin by Akinori MUSHA. This plugin provides syntax highlighting for a wide range of popular languages. To highlight Processing code In the WordPress editor’s HTML or “Text” mode, wrap your code blocks with <pre lang=”java”>and</pre>

void setup() {
size(200, 200);
}
void draw() {
smooth();
background(#ffffff);
rect(0,0, width-1,height-1);
ellipse (100, 100, random(80), random(80));
line (0,0, mouseX, mouseY);
}