The first, most popular one is the venerable scriptaculous. It does require another, lower-level library called Prototype, which is a heavy download at 140k. BUT someone has done the web a favor and managed to super-ultra-compress it down to 14k, which is quite acceptable.

Scriptaculous is very popular, and lots of people have written stuff with it that is available for anyone to use – check out this set of awesome tooltips, for example. But it does pretty much anything we’d need out of the box, and it’s very well documented.

The second candidate is jQuery UI, which is built on the other major JS framework, jQuery. I haven’t used jQuery UI, but it seems to do about the same stuff as scriptaculous, and it is also popular enough to have some free extensions / implementations, like these tooltips.

And then there is YUI, which is a standalone UI library. It is also in wide use and does pretty much anything we’d need.

My recommendation would be that whoever is building the front end code should pick whichever one they’ve worked with before, to minimize dev time. If all three are unfamiliar, I guess I’d recommend Scriptaculous because I’ve used it and I remember it being pretty straightforward.

Here’s quick rundown of my evaluation process. My experience with CMSes has largely been with two systems – WordPress and the inhouse Java-based CMS we use at MTV. I have not tried to do any heavy-duty customization of WordPress, but it seems to me that it is focused on templates, and its underlying data model is mostly conceived in terms of pages, snippets, and a single data type (the post). It is not really designed for custom data objects as much as for customized presentation of data. This is why, even after you hack at it a lot, it’s still basically a blog on the inside.

MTV’s CMS is at the other extreme – all the data objects in it are custom-built Java classes that go through some kind of ORM and end up in Sybase. Content producers fill out HTML forms through a user-unfriendly front end that generates or updates whatever object they want (promo set, news story, playlist, etc.) The presentation is done through a JSP-like system that pulls the objects back out of the database (using more custom Java on top of an app server) and makes them available to page code, which can then manipulate them and wrap them in whatever markup is appropriate, usually sending it through an XML/XSLT transformation before generating the final HTML and JavaScript for the browser.

So to me there are two fundamental questions. First, do we conceive of the site as a set of pages, with a few bits of markup that are reused across several pages, or do we think of it as a front end for a set of custom objects? Second, how important is the interface for editing the content?

To me our site seems like a set of data types – tutorials, games, glossary entries, users – which have sub-components and are interlinked in ways that do not map simply to a page apiece. But I have also been working with MTV’s system for a long time, and it’s possible that building a data-driven system is overkill. This is something we will need to decide as a group, I think.

If it is going to be a data-driven site, we’re going to need to do some fairly deep customization of an existing product, or build something of our own in CakePHP. If we build something in CakePHP we’ll have more flexibility, but our code won’t be as solidly tested as the existing systems, and we’ll have to write our own front end for editing the data, which will both take extra time and not be as user-friendly as the existing ones. If we modify one of the existing ones we will need to figure out how to create custom data objects within them – they all support this, and they all claim it is super easy, but we will have to learn each system’s terminology (they are all different) and build an understanding of their code structure before it is easy.

So, if this will be a data-driven site, I think the most important feature will be the documentation and community. Based on that, I would recommend ModX, as Concrete5’s doc is a little sparse. (SilverStripe’s is decent but ModX seems easier to understand.) If we want to build our own in CakePHP, we should do some knowledge transfer from John or anyone else in the group who has worked with it, have some design meetings, make a dev plan and fork the group into coders and content developers so we can work in parallel.

If we’d prefer to handle the site as a set of pages, then any of Concrete5, SilverStripe or ModX will work fine and we should choose the one with the page model that most closely matches our content structure. I tried to get this done over the weekend but it is a significant amount of work – a couple hours for each one probably – so I wanted to make sure that we actually need it before doing the work.

Please let me know your thoughts and if there’s any questions I can answer.

I have dug around in the very large world of free CMSs, focusing on those based on PHP, and narrowed our options to a few. Without further ado:

1. Drupal. People love Drupal or they hate Drupal. It is famously unfriendly in its initial setup and configuration, and there are some basic things it doesn’t do out of the box, like storing images. But there are thousands of extensions and an enthusiastic user base.
   Pro: will do everything we need it to do.
   Con: steep learning curve.
2. ModX or SilverStripe. Friendly and lightweight, built on frameworks with well-documented APIs. Each has plenty of free extensions and an active user base. From what I can see they cut corners mostly in the area of workflow, which really shouldn’t be a problem for a small group like ours. They support forums and restricted areas (e.g. if we want to require a password to get into Lesson 4 or whatever).
   Pro: user-friendly, pretty interfaces, object-oriented code, short learning curve.
   Con: possibly too lightweight – a blow-by-blow feature analysis is forthcoming.
3. Concrete5. Similar to ModX and SilverStripe, except that many of the plug-ins are not free. On the other hand they’re not expensive – the forums extension is probably the priciest at $55. Going by their site they really try to make it easy both to develop and to create content. I am not yet sure whether they are actually better at this than SilverStripe or ModX.
   Pro: user-friendly, pretty interface, object-oriented MVC code, short learning curve.
   Con: again, possibly too lightweight. Further assessment is needed.
4. Wordpress. Wordpress won the Best Open Source CMS award (from Packt) last year, so I guess there’s something there. I am personally hesitant to build a site on Wordpress that is not at its heart a blog – I feel like we’d constantly be hacking things to do something they weren’t meant to do. But it does function as a powerful and flexible CMS and lots of people like it, so I think it should be part of our evaluation process.
   Pro: popular, powerful, familiar to all of us
   Con: intended to make blogs, which is not how our site is fundamentally structured

I’ll post the feature breakdown here by Thursday for your further consideration. But if you have strong feelings about any of the above (and I know from the poll that some of you do), now’s the time to speak your mind.

edit Here are links to live demos:

• Drupal
• SilverStripe
• MODx 1.0.2
• Concrete5

And you can log in and play with Wordpress right here. MODx has a later release with (apparently) significant differences; I’m going to install 2.0 on my hosted account to play with. Will update this post with a link when it’s running.

Instructables.com – The overall effect strikes me as “you can learn here and we’re not going to treat you like an idiot”. Approachable, science & tech site. Could be ordered better.

Roundhouse.org.uk – Nice and clean overall layout. Like the judicious Flash nav embed. Graphics are quality without being overbearingly trendy. Might be boring for younger folk.

Kotaku.com – Like Instructables, overall effect is approachable, but could be a little more orderly.

Gotmilk.com – Obviously this is a Flash site and isn’t the layout we’re looking for, but I think they do a good job of making fun, design-y graphics that teens could be into.

Katamariforever.com – This just looks like a lot of fun.

Game Idea:

In our Major Studio class, Minhao pointed out that a difficult fact of climate change is that it occurs very slowly. So the idea here is that instead of speeding up to increase difficulty, it slows down.

Pollution rains from top of screen, player is at bottom. There are flowers and wonderful earth at the bottom. When moving quickly, the pollution can be seen to collect on the plants. The player can remove it before the plants absorb it. The slower it gets, the less visibly it collects, but the plants absorb it at the same rate. If the plants absorb too much pollution, they die.

1) Our site will be a resource page for a self-selecting community. What other sites are out there and how do they organize their content?

• http://processing.org/
• http://www.openframeworks.cc/
• http://creators.xna.com/en-US

2) Our site is primarily about games and game design. How are other sites handling artistic design based on this topic?

• http://www.kongregate.com/
• http://www.miniclip.com/games/en/
• http://www.crazymonkeygames.com/

The second set of examples don’t seem to focus on a connection between the art direction and the content. However, after looking a bit more, I found these sites (smaller studio driven sites) that seem to focus a little more on the connection.

• http://blurst.com/
• http://www.nitrome.com/

Some of the sites are might relevant for our project, here are the highlights:

Engineer Your Life: Very relevant reference, a website which promotes engineering and technology to high school girls.

I really liked the interface design, very simple but fun and NOT childish.

Girls Go Tech: Web sites that promotes math, science and technology for girls, uses games as well. The Interface design is really neat and fun.

I really liked the fun idea of using Cryptic codes in the website. I was thinking that this is might be a cool idea to use for the activate site. sort of our own Cryptic code for different needs.

This is the Cryptic code for ACTIVATE!

Girls Health: a bit different direction but still very relevant.

A banner from the girlshealth.gov home page took me to: Best Bones Forever!

I really liked the fun approach to a not very attractive health care issue.

Resource management/energy game: Match two items to change the city or to encourage NPCs to behave more responsibly. (Model: Kablooey)

Sustainability game: Create products for consumers while offseting the environmental consequences of material choice, production, transportation, etc. (Model: McDonalds Game)

Habitat game: Select different kinds of objects (plants, animals, insects, etc) to develop an empty patch of land into a diverse ecosystem. Players develop different strategies and results during game play.

Cloud game: As a cloud, you must collect water from oceans, rivers, lakes, etc to create rain for crops. You must avoid obstacles like polluted clouds and water sources.

Park/forest tower defense: Set up objects in a park/forest to encourage responsible behavior from NPCs such as people and animals.

Energy “Diner Dash”: Manage lights, appliances, etc in a house. Earn power-ups that support energy efficiency. (Model: Diner Dash)

Keep the Earth’s temperature in check: Managing CO2 concentrations to keep the temperature at a reasonable level.

CSO tower defense: Manage stormwater in a growing city. Choose where to place treatment plants and pumps to manage waste water and keep it out of the river.

Ecosystem tower defense: Manage a food web representing populations of animals, plants, insects, etc.

Katamari recycles: Roll up recyclables such as paper, plastic and metal.

Green your city: Reverse Sim City. Demolish buildings to green your environment.

Past, present, future world: Makes decisions to balance the environmental states of the three different eras. Switch between eras to see how actions effect each era.

Green the office: Take action around the office to make the office greener.

Human animal game: Make the world inhabitable for humans and animals. During game play you switch species to see how your actions have changed the habitats and living conditions of your human and animal player.

Wind puzzler: You control the wind to solve different puzzles. Puzzles involve powering objects (lights, elevators, trap doors, platforms, etc) with wind power.

Energy manager: You control a robot with a limited power supply. Find charging stations to charge the robot and get to the next charging station.

Mange resources: Mix and match collectible recyclables to make new objects for you player. Three balls of paper make a kite for flying? Five tin cans make armor?

Lost vikings game: Player controls three characters each with their own special environmental ability. Use each player to advance through the levels.