Watkins Web 2: Blog

Posts tagged with “admin”

Web 3 Syllabus

Hope you all are enjoying the winter break. I’ve just posted the syllabus for next semester — you can download it below. I look forward to seeing you in January!

Web 3 Syllabus

Web 3 Preview

Web 3 will be a workshop-style class, meaning you will take on more of the definition of the scope and goals of your projects. That said, the exercises and projects will revolve around two topics:


The first emphasis will be on learning the fundamentals of Wordpress. While optimized for blogging, Wordpress can be used as a general-purpose Content Management System (CMS). Because it is fundamentally a collection of PHP files, you can mix in your own PHP alongside Wordpress’s built-in functions, variables, and looping structures. And, of course, Wordpress enables you to build a site that can be managed and updated by a client who has no knowledge of HTML.

We’ll use Wordpress to explore the contemporary notion of designing a system, rather than creating a static, one-time product. The site you build will require you to design and program templates, re-usable modules of code, and conditional rules that control the way elements (text, images, video) interrelate and combine. The rules may be simple or complex, but the outcomes they produce in the form of pages viewed at any given moment can be diverse.

Interactive Experiment

The second emphasis (and project) will be in building a more experimental, free-form web site that visualizes a dataset or creates artwork in a dynamic way.

For inspiration we will be looking at work by the new generation of artist/programmers and studios like Jonathan Harris, Ben Fry, Aaron Koblin, Stewart Smith, and Lust. We will be exploring data structures like MySQL, RSS and XML, and the ways they can be manipulated with PHP.

For this project, invalid code and HTML hacks are encouraged.

Project 2 Details

The final versions of both projects are due at 6pm on December 8th.

From the syllabus, here are the requirements:

  • A minimum of five pages
  • Recurring navigation controlled by PHP include(s)
  • A contact form that sends an email to an address
  • An events listing/calendar
  • If relevant, a Blog/News pages (both landing page and example of a single article page)

If your name is Joe Schmoe, your projects should be accessible at the following addresses:

  • http://watkinswebdev.com/jschmoe/project1/
  • http://watkinswebdev.com/jschmoe/project2/

(Technically, the above URLs refer to directories, not documents, since they end in a slash. Make sure to name your home page index.php to ensure it loads by default). Whether you also want to link to these projects from you space’s home directory (http://watkinswebdev.com/jschmoe/) is up to you.

In order to get the required PHP includes and contact form working, you will need to be testing the site live on the server. Once again, please use all-lowercase file and directory names. (Very often the Mac filesystem will forgive case inconsistency as you develop locally, but a web server will not, causing your site’s links to break once you upload.)

Finally, please review the Project 1 details post for guidelines on file organization, image optimization, proofreading, typography, smart CSS, etc.

Welcome to Web 2

Hi everyone,

Great to see you all again last week, and also to see a few new faces. Like last semester’s website, this one will be used for announcements, tutorials, helpful links, show-and-tell screenshots, and exercises. Please feel free to post links, sites, artwork, etc. that you think others in the class can learn from.

You can download the syllabus here if you need a copy. And here, for reference, is the section on the two main projects:

Project 1: Personal Site

Create a website that presents you and your work to the public.

Do not use design elements or ideas from last semester’s work: you should take this project as an opportunity to write, research, and design a new (and more advanced) website, one with a more polished and cohesive visual design. You will be taking your site from concept to wireframe to Photoshop mockup to working code, so assemble your raw materials as early as possible.

Design thinking is encouraged: what visual or conceptual ideas can you incorporate to distinguish your site from others? Consider how your site’s dynamic elements can play against consistent elements to create interest without sacrificing usability. What roles can color, typography, imagery, and texture play that aren’t merely decorative? What structures (visual or otherwise) can you incorporate that relate to or highlight qualities in your art/design work?


  • Your site must contain a gallery of art/design work, your contact information, and a short bio. Additional content might include an artist’s statement, a résumé, writing samples, a links/inspiration page, and/or a client list.
  • You are also free to incorporate dynamic embedding (Flickr photos, Twitter feed, etc) if that content makes sense as part of your concept and can be thoughtfully integrated.

Due Date: October 13, 2011

Project 2: Client Site

Create a multi-page website for an organization your participate in, work for, or know well.
The organization you chose could be a small company, non-profit, church, or club. While you must research your organization and use as much real content as possible, you are encouraged to bring your own sensibility and priorities to the project. To that end, the only mandatory visual design element is the organization’s current logo (if one exists). Your choice of organization must be approved by the instructor.

Once again, you will develop the site from concept to live code, evaluating your design decisions at every stage. What is the purpose of the organization, and how can the design of a website express and support it? What tone does it adopt in its print publications or advertisements, and to what extent should the website match that tone?

(This is “speculative” design, intended for your benefit — it is not recommended that you offer the real organization free work, especially without consultation and communication during the design process.)


  • A minimum of five HTML pages
  • Recurring navigation controlled by PHP include(s)
  • A contact form that sends an email to an address
  • Events listing/calendar
  • Blog/News pages (both landing page and example of a single article page)

Due Date: December 8, 2011