Watkins Web 3: Blog

Posts tagged with “admin”


Thank you all for a great semester! Your latest work is now linked from the projects page.

While I have no plans to take down this site, you can save its contents by clicking all posts and then (once it’s finished loading) print to PDF. If you want to grab all the exercises, view the exercises tag and hit all the download buttons.

New Watkinswebdev.com setup

Hi everyone,

We found a solution, which is to migrate everyone to his/her own subdomain. So if your stuff was at http://watkinswebdev.com/jschmoe/ before, it’s now at http://jschmoe.watkinswebdev.com/ (and your blog is at http://jschmoe.watkinswebdev.com/blog/).

I’ve already migrated all your stuff to the new location(s), but there’s some work left to do. To get set up with the new arrangement, please do the following.

Change your Cyberduck bookmark

  1. Open Cyberduck and get to the “Bookmark view” screen (you may have to disconnect and click the “book” icon).
  2. Highlight your bookmark and click the pencil icon to edit it.
  3. Under More Options, change your Path from watkinswebdev.com/jschmoe to jschmoe.watkinswebdev.com.
  4. Save the bookmark: it may be easiest to close the panel and drag the whole bookmark icon to the desktop. Then throw away the old one from your flash drive and drag the new one into its place.

Fix your Wordpress settings

Home URL

Right now you’re probably seeing an Error 404 message at the address of your blog home page (http://jschmoe.watkinswebdev.com/blog/). We need to tell Wordpress where the new files are.

  1. Log into Wordpress at http://jschmoe.watkinswebdev.com/blog/wp-admin/
  2. Click on Settings > General
  3. Now change your Wordpress Address and/or Site Address to reflect the new location. Both of them should be the same: http://jschmoe.watkinswebdev.com/blog/.
  4. Click Save Settings
  5. Visit your blog home page: content should be loading now.

Fix Permalinks

Very likely the home page is working, but clicking into page or post permalinks throws an error. To fix this, we need to get Wordpress to generate a new .htaccess file

  1. In Cyberduck, connect to your web space and double-click into the blog folder.
  2. Make sure your hidden files are being shown (if necessary, choose View > Show Hidden Files).
  3. If you see the .htaccess file, delete it by clicking on it and choosing File > Delete. If it’s not there, I already deleted it.
  4. Disconnect
  5. Now go back to your Wordpress dashboard and choose Settings > Permalinks. Choose Post name or whatever setting you had before. Click Save Changes.
  6. Test your public site: permalink URLs should be working now.

Watkinswebdev.com Server Status

Looks like PHP files aren’t running (no input file specified) on watkinswebdev.com.

3/30, 12pm: Steve has a note in with tech support
4/1, 10pm: Ugh, it looks like Dreamhost changed the rules so that now sub-users cannot run PHP files. Everybody’s data is still there, and we’re looking into alternative setups.
4/2, 1pm: Ok, everyone has been moved to a new space. Please read up on the changes and follow the instructions.

Project 2 Details


Create an online visualization of an external dataset or source of visual material.

First choose an external source of text, data, or imagery to work with. Then buld a site that generates a visual expression from that source. Your final pages may be primarily typographic or image-based, informative or beautiful, organized or haphazard, but they should enhance or comment on the source material, and they should change over time or in response to user input. It is crucial that you sketch multiple ideas — both in Photoshop and in code — before arriving at your solution.

Do not feel beholden to traditional representations of your chosen source material; in fact, it may help to avoid them. What would the news report look like as a series of colors? How could a Flickr stream be expressed through typography?

Some possible data sources you might consider:

  • The news, via Google or Yahoo: stories published in real-time, quantity of coverage that two opposing views receive, stories about a particular person, etc.
  • Weather conditions, via Google or Yahoo: display a full report, the forecast for a given zip code, or focus just on a location’s temperature, wind speed, etc.
  • Twitter: timelines on a per-user basis, a hashtag over time, or a search term of the user’s choosing.
  • Wikipedia: articles on a given topic, edits to a particularly controversial entry.
  • Flickr: images tagged with a particular phrase, popular images, etc.


  • Your site must use a source of text or images that you did not create, and must be approved by the instructor.
  • Your site must not be static: it should change over time, in response to user input, depending on the user’s location, or all of the above.
  • Your site does not need to adhere to the traditional rules of accessible, efficient web design. You are free to make use of inline styles, Javascript dependencies, image- heavy layouts, browser bugs, and other hacks.

Due Date

May 2, 2012

Starter Kit bugs

It looks like category.php has a mistake in it. There’s an extra wrapping div around the nav include that shouldn’t be there.

So change these lines….

<div id="nav">
<?php include('nav.php'); ?>
</div><!-- #nav -->

to just this:

<?php include('nav.php'); ?>

Project 1 Sketches/Wireframes

Quick reminder: your sketches/wireframes for Project 1 are due Monday, February 6. A good place to start would be sketching the design of the home page, a single post (aka permalink) page, and the complete archive page. And you should have some sample descriptions or images that represent the kind of content you will be posting.

We’ve been doing a lot of code exercises and review over the past few weeks, which will of course be necessary for you to build your site. But right now I’d encourage you to put all that aside and think more generally about structure and visual presentation.

  1. Think critically about the form and content of your blog and the way the two will interrelate. Will your site be an all-purpose notebook to which you add any and all images and text that interest you — a sort of online stream-of consciousness in the manner of Tumblr? Or will it be a more carefully curated and written site, where you publish less frequent but longer posts that guide the reader through a theme with text and images?
  2. What kind of design “moves” will contribute to the goals you have for your site? Should the home page put your reader directly into the full text of a recent post, or does it make more sense to let them choose from the 10 your recent posts? If the latter, should the choice be a visual one (a grid of thumbnail images) or short excerpts from the post text (with “Continue Reading →” links). Is there a role for a icon-drive or color-coding system to help organize your site? What about tagging?
  3. If you are inspired by a website or techinque you’ve seen elsewhere, don’t plan to lift it wholesale for your site. Think about how you might re-invent or change it to suit your needs, and in what ways it will support the “big ideas” behind your project.

Finally, remember that this semester is more about you taking the initiative to explore your own ideas with design and code than it is about completing a pre-defined set of tasks. PHP, HTML, CSS, and Javascript are the tools, not ends in themselves. So above all, choose an interest or set of interests that you will be most enthusiastic about translating into an online project.

New Calendar

Hi everyone,

To help keep things organized, I’ve made a new Google calendar with due dates, Show and Tell assignments, etc. You can still view everything in this site’s calendar page, but you may want also to subscribe to the Google version in google calendar or iCal. Try copying and pasting the link below.

Watkins Web 3 Calendar

Starter Kit 1.0

Ok, here’s the bare-bones Wordpress theme you’ll be working from.

  1. Download the zip to your machine’s desktop
  2. Log into your Wordpress installation and choose Plugins > Add New
  3. Choose Upload and then Choose File and navigate to the zip on your desktop
  4. Upload the zip file and activate the theme

Download Starter Kit

And here’s a “map” of the way the primary templates use includes:

Starter Kit diagram

Project 1 Details

Just wanted to re-post the description and requirements for project 1.


Create a blog, entirely controlled by Wordpress, that serves as an online notebook of and about your design process.

You should design and structure the blog to accept multiple kinds of content: samples of your work in progress, others’ design/artwork that inspires you, questions about design or code, web bookmarks, etc.

The success of this project depends both on the design of your blog and the content you add to it. While blogs are by their nature templated, you should not treat yours as a generic container: its design should express an idea or emphasis that is important to your work and methods. Take advantage of native Wordpress features like categories, tag, and pages to highlight difference and variation in your posts.


  • Your site must contain, at minimum, a permalink page for each blog post, a chronological archive of all posts, and an about page.
  • While you are encouraged to use the class’s “Starter Kit” theme as a foundation, your final blog should be customized — both visually and structurally — to reflect the interests, biases, and ideas in your own work. You do not need to follow the traditional “main column and sidebar” blog format when it comes to layout.
  • You are expected to add posts to your blog before, during, and after the completion of the design/ templates. No backdating!

Due Dates

March 21, 2012 (Preliminary Grade: structure must be complete)
May 2, 2012 (Final Grade)

Welcome to Web 3

Happy New Year! Here’s the syllabus:

Web 3 Syllabus