The following philosophies and features drive the design and functionality of the theme:
Posts, posts and more posts
Charrette uses standard WordPress posts and categories to help store and organize the slew of material that arises during a semester-long course or intensive workshop. Forget about pages. Forget about custom post types with custom taxonomies. The post is the smallest unit and can be attached to as many categories as you need. Content can often be described and categorized multiple ways. It’s a reading and belongs to Unit 2. It’s a link and a reading. It’s an assignment and part of Unit 3. Charrette uses standard posts and special category names to organize course content.
Prioritizes what’s new, but with easy access to all content
The latest activity appears by default as an infinitely scrolling feed. The outline tab takes the place of a traditional syllabus — with posts, readings and other content organized into chunks (units, assignments, by week). Categories within the “Outline” category get placed in the outline. Posts categorized as Assignments get placed in the Assignments tab.
Searching works well in WordPress
Searching in WordPress is a great way to find content. That’s why the search icon is played up so highly.
Take attendance with the “Absences” custom post type
Note and record absences as they happen, with full disclosure to the student. The absences custom post type is an admin-edit-only area where you can keep track of attendance. The attendance record only shows up if a user is logged in.
More on attendance
Author pages act as a class portfolio
Students can upload their work to the website and connect it to the assignment. Each student’s final page becomes the student’s class portfolio. WordPress stores the high-resolution files and the Contact Sheet plug-in displays images at the sizes that you set in the Media settings panel.
See an example
A theme in WordPress is the design and functional layer that sits on top of the WordPress content management system. If you’ve used WordPress, you’re already up to speed. Simply install the theme (with or without Contact Sheet image plug-in).
Step 1: Download the theme for free
Step 2: Install WordPress.org on a Web server, upload theme
If you don’t have a hosting account (Dreamhost, school server, etc.), nab a domain name and a shared hosting account. Most hosting services have one-click installations for WordPress and automatic updates. Upload the theme and plug-in as .zip files.
Step 3: Add users
Add yourself, your TA, and your students as users. Have all users set up a Gravatar, bio and URL
More on Gravatars
Step 4: Change your Discussion Settings
Be sure to limit discussions to registered users. This way, you won’t have to worry about comment spam. It also encourages your class to be logged in, which encourages more activity.
Step 5: Add posts and categories
Add an Outline and an Assignments category to be parent categories for your curriculum. Add other magic categories as you add content.
More on magic categories
Posts categorized as “Assignments” or “Homework” will be listed underneath the “Assignments” tab on the main index. This tab is where the instructor’s assignments can be easily seen in reverse chronological order.
The below project is something I assign to sophomores at RISD as part of a three-week formmaking Web workshop titled “Digital Bits.”
Designer Paul Elliman has been collecting small found objects that resemble typographic glyphs. Whether found on the side of the road, at someone’s house or at the hardware store, the objects become silhouetted and kept at actual size. He calls the monochromatic collection of objects, “Bits”. The formal language used can be traced to photograms, a one-to-one photographic black and white copy of an object. The photogram effectively makes two dimensional and graphic any three-dimensional object.
This assignment asks you to collect objects of your own, whether in your home, around town, at RISD 2nd life, etc., and draw them using HTML and CSS. Do not choose electronics. Try a band aid, for example. With CSS3, it is possible to draw non-rectangular shapes right in the browser. You may use any foreground and any background color, but be sure to use only one color for each — thereby working with form and counterform only. You may stylize (simplify) your original object as needed, but the goal is to make a faithful copy of the object. Consider the perspective that you choose for the object. You are encouraged to sketch out your objects in your F&C course notebook first.
Make five digital bits. Create an html file for each digital bit, and upload your html files into a post on the class website. Attach the post to the category Assignment 2. Title the post with the names of your bits (if they have names).
See how the theme is used in various studio courses. Plus, note the link to the demo site listing out all the features.
Students are introduced to the structural elements and properties of HTML and CSS through hands-on demos and a take-home assignments. Tight technical HTML drawings in week one give way to looser, full-screen abstract compositions in week two.
-webkit-for Safari and Chrome,
-ms-for Internet Explorer,
-o-for Opera allow us to use CSS3 properties as the standards evolve.