The Invisible Wiki

Everyone knows what a wiki looks like: Wikipedia, right?

And everyone knows what a wiki is for: letting anyone contribute, right?

Well, not necessarily. A wiki engine (the software used to create and run wikis like Wikipedia) doesn’t actually care if you use it to make a “proper” wiki or not. 

In fact, since wiki engines allow some users access to edit pages and stop others, what if you only allowed yourself access? Do you then still have a wiki? Or just a really easy-to-edit web site? One that you can edit from anywhere you can get to the internet?

But what about the plain-vanilla wiki look? What about the history/revision links, last edit information, and all the other clues that the user is looking at a wiki engine? 

Enter our friend the CSS stylesheet, and one of our favorite commands,

{display:none;}

Voila! Restrict access and hide the wiki features, and you have an easy-to-edit, open-source-powered web site. A few examples:

http://www.yanb.be
http://www.ifccc.org
http://nitens.org/taraborelli

OK, so they still look pretty plain, but they certainly don’t look like wikis. And with some CSS trickery, they can look like anything you want.

A wiki engine is simply that: an engine. And like any engine, it provides power; what you do with it is only limited by your ideas.

Here’s a quick tutorial to get started (specifically using the Wikka engine, but the concepts involved will work with most others):

http://docs.wikkawiki.org/InvisibleWiki

And a quick video tutorial:

How to run an invisible wiki from AcademicProductivity on Vimeo

Inaugural Fun: Make Your Own Obama Icon

The good folks at Paste Magazine are definitely in on the spirit of inaugural fever with this gadget:

http://obamiconme.pastemagazine.com

…which they describe succinctly:

 Make your own “Obamicon” — your image in a style inspired by Shepard Fairey’s iconic poster.

[...]

Take your picture with a webcam or upload a photo, choose your own message, and submit to the gallery. 

It requires Flash Player 10, which took me about 20 seconds to download and install, and there is a quicky email registration. 

Then it’s pure fun. Upload a photo or use a webcam to take your pic. Mac iSight users: right click the frame, click “Settings”, and choose “USB Video Class Video” (sic).

Then choose your tagline. Think: as Obama is to “Hope”, you are to “________”.

I thought this really captured my spirit. I tried one in drag for “Change”, but it didn’t quite work out…

Have fun!

CSS Grid Design Made Easy

Via ISO50 comes word of an excellent (and free) tool for grid-based CSS layout: Grid Designer 2, by Danish web developer Rasmus Shultz.

For anyone not yet on the grid, here are two nice introductory pieces, some more resources, and a couple of well-known systems.

Grid Designer 2 allows you to mock up a complete grid design online in a single open source script. Incredibly, it’s only three simple steps:

1. Columns

Input the number and width of the desired columns. Use the buttons, or type in numeric values. You can play with the gutters and margins to your heart’s content, while previewing live on screen.

2. Typography

Now it gets fun. Adjust the fonts, styles, leading, spacing, line height and more, again with live preview. Paragraph and H1 through H6 are all available.

3. Export

Are you kidding? Yes, unbelievably, we’re done. Grid Designer outputs the CSS style sheet and an html container, scalable if you wish. Copy it, use it, love it.

I’ve just begun playing with this, but as I’m sure you can tell, I’m pretty impressed. I’m sure the output will require some tweaking unless you want a straight-laced, magazine-style grid.

Also, despite the alert stating “NEW! Now supports designs with spanning columns!” it looks to me like you’d have to add these manually after the fact. If anyone can see that I’m missing something, please let me know.

In any case, Grid Designer 2 gets five stars so far, and I look forward to using it for real very soon. Thanks Rasmus!