silly video portal – an experiment using tiddlywiki to make a generic web app (no TW look’n’feel)

19 Dec

http://tiddlywiki.mahemoff.com/video.html

(tested in FF 3.6)

The tiddlywiki above is a lame video portal that looks like a generic
web app (only uglier). However, behind the scenes, it’s a tiddlywiki.
Actually, that’s not such a big secret as you probably saw a FOUT –
Flash Of Unwanted TiddlyWiki (cf
http://en.wikipedia.org/wiki/Flash_of_unstyled_content) – before the
page loaded. I’m not sure how easy it is to get rid of that – perhaps
a plugin that writes to the MarkupPeHead shadow or something.

But anyway, the point is to show how such a page can be styled.

There is actually a bit of a secret here. If you hover up to the
top-right, you’ll find a secret Backstage button. It gives you power
access to the rest of the tiddlywiki. I have in mind to replace that
with a “flip” button that would flip the UI into a regular TiddlyWiki.
(Would be awesome to do a 3D flip effect a la
http://lab.smashup.it/flip/ .)

It uses the TiddlyWiki theme concept. You make a tiddler with any of
three sections (blocks with headings): StyleSheet, ColorPalette, and
PageTemplate. Then switchTheme(“nameOfTiddler”) will switch the theme.
There are various plugins to peform this action on behalf of users.

However, the standard theme mechanism has a couple of catches –
there’s no CSS reset (I think there should be an option to attempt to
blank out any CSS before applying the theme); somewhere in the code,
there’s an assumption the PageTemplate contains a div called
“tiddlerDisplay” (I guess that’s a bug; thanks to @FND for helping me
on this point). Taking those into account, here’s how I made this
custom UI:

* Make a new tiddler called fancyTheme. It looks like this:

|StyleSheet|##StyleSheet|
|PageTemplate|##PageTemplate|

!StyleSheet
/* CSS RESET */
// a big ol’ CSS reset stylesheet, using Eric Meyer’s scheme. see my
recent post on those.

/* HACK TO ALLOW a “tiddlyDisplay” element */
#tiddlerDisplay { display: none; }

/* TIDDLYWIKI INTEGRATION */
#backstageButton a { height: 20px; opacity: 0.01; }
#backstageButton a:hover { opacity: 1; }
// in the future, there will be more stuff to switch back and forth
between regular tiddlywiki and the custom UI

/* CUSTOM STYLES */
// the custom style, in this case the style for a video portal

!PageTemplate

Not Another Video Freakin’ Portal

…etc….

——-

All this is related to the TiddlyWiki MU vision I described in
http://softwareas.com/multi-user-tiddlywiki . If users can spin off
new instances, TiddlyWiki could be used as a general engine for making
generic web app, not just TiddlyWiki++ UIs, but UIs that look
radically different. The nice thing about the Flip concept is that
vanilla TiddlyWiki is a handy interface for performing basic admin, a
little like the Rails scaffold concept, or the earlier Naked Objects.
You build a web app centered around a tiddler-based data store; anyone
permissioned can edit those tiddlers.

This is the plan for Scrumptious Trails (http://trail.scrumptious.tv).
I’ll be porting over the generic web interface to a TiddlyWiki one
using the techniques described above.

Advertisements

2 Responses to “silly video portal – an experiment using tiddlywiki to make a generic web app (no TW look’n’feel)”

  1. Anonymous April 7, 2010 at 5:00 am #

    Hi, nice post. I have been thinking about this topic,so thanks for sharing. I will likely be coming back to your blog. Keep up the good work<a href="http://www.barbiehandbags.com/fendi_handbags.html&quot; title="fendi handbags">fendi handbags</a>

  2. Anonymous April 12, 2010 at 6:00 am #

    Wow…this was a really good article. interesting…., thanks for sharing the info, keep up the good work going….<a href="http://www.zframez.com/protocoltestingtraining.html&quot; title="Protocol Testing Training Bangalore">Protocol Testing Training Bangalore</a>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: