Forum OpenACS Q&A: ASCII status bars and low tech status bars

I was working for a client who had a 30 page survey that they required users to take (the users had great incentive to take the survey, so there was an 80% completion rate.) Anyway, they wanted to increase that percentage. So they wanted to add a status bar on each page to set the user's expectation as to how much of the survey was completed.

A designer made a gif images that looked like a pie graph, and I thought it was too much. I encouraged the client to use an ASCII solution like:

      60% Completed
[==============||=========]
              60%

The designer and his posse almost laughed me out of the room. So next I made a 100% HTML version and both the client AND the designer liked it better then the gif images. Success!

I wanted to share the code with this OpenACS community because I'm proud of it and because I thought someone here might use it. Check it out the HTML version of a status bar at the following URL.

http://wolfram.org/writing/howto/ascii_slider.html

Have a wonderful day,
Eric

Collapse
Posted by Randy Ferrer on
Hey Eric - Very nice! Thanks for sharing this with the community. :-))
Collapse
Posted by Tom Jackson on

Cool, it works in Netscape! Thanks Eric.

Collapse
Posted by Malte Sussdorff on
I will ask Kolja to add this bar (optional) to the survey module.
Collapse
Posted by Mike Sisk on
This is cool html hack, but I'd like to see us using XHTML/CSS-based layout instead of this nested-table stuff.

You can make a status graph just like this with a few lines of CSS, a blue graphic and a couple div tags. Heck, I bet someone better than me at CSS could do it without the graphic at all.

Just something to think about -- I think it's time to banish table-based HTML layout and move on, IMHO. YMMV.

Collapse
Posted by Caroline Meeks on
We wrote something similar for our last project management project. Next week I'll post the code, its in the form of a proc that takes percent_complete and returns a very similar table, also using 1 gif.

This seems like its a common requirement. Is there a third person who has writen this? (thus fufillng Pind's rule of 3) Shall we make a standard proc for the tool kit?

Collapse
Posted by Tom Jackson on

Mike:

I agree with trying to do away with tables. I tried to do this completely for a smallish site, but wasn't completely successful. I had a problem when trying to align two chunks of html side by side, I eventually had to just use a simple table with one row and two table details.

Is there any web reference on really getting rid of tables? You can check out what I did at the UniquesUnicycleClub.org site.

Collapse
Posted by Eric Wolfram on
Just to be clear, I agree that nested tables can cause problems and I'm really glad that there aren't tons of nested tables in the openACS. Don't add any on my account. Nested tables can really suck.

Same with font tags, needless images and image-navigation. The lack of them on OpenACS is one of the big reasons that I like OpenACS.

Every choice usually has some benefit or weakness. I often wondered if this nested table status bar trick created a larger K or browser render time for the user then the simple gif image that the designer made in photoshop! I hope not -- but it might.

But it's no big deal. Take it or leave it. I guess I liked this hack because some designer thought it was worthy of his "taste". Strange world. I prefer the ASCII version.

Collapse
Posted by Steve Manning on
My experience is that pure CSS design whilst desirable is not possible until all the browsers support CSS in the same way.

The tableless sites that I've seen bend over backwards to cope with the differences between browsers - or simply don't bother  so unless your using IE5+ on Windows the layout sucks.

By the way I've used this trick to produce a simple histogram - its not just limited to a status bar.

  Steve

Collapse
Posted by Peter Marklund on
Steve,
I second your experience with CSS and HTML tables. Fortunately you can use HTML tables and still be XHTML 1.0 strict compliant (but you can't use width on your td elements or colors etc).

I'll start a separate thread to discuss doc types and HTML/XHTML compliance.

Collapse
Posted by Don Baccus on
There was a simple histogram-generating proc in 3.x (polls used it) and it may still be in the 4.x code.  I generate histograms in a very similar way at my birdnotes.net site.

So this easily breaks the rule of 3, we're up to four at least :)  Though Eric's code adds a background "not completed" bit to the histogram so it's a bit different (and looks very nice.)

It would really be nice to have a suite of simple widgets like this.  Lars and I have discussed this (in fact I think it was in Amsterdam last June, which means Peter and a few others were there too), not just graphics out put but widgets for things like "[edit | delete]" command selectors and the like.  Templated so modifiable.

Site customizing is certainly easier with CSS.  I think we'd have to subject a central utility proc to the "does it work with NS 4.7?" rule, though, given that there are still disturbing numbers of people out there who apparently use it.

Collapse
Posted by Eric Wolfram on
your histograms here:

http://redirx.com/?g1u

Work in NS 4.08, Opera 7.0 and IE 5.000192893 (laugh at that IE version number) Anyway...your histogram is a real good way to display that information visually. I tend to spend too much time making ascii things like this,

$1000                                              *
  |                                                  *
  |                                                *
  |                                                *
  |                                              *
  |                                              *
  |                                            *
  |                                          **
  |                                      ****
  |                                  ***
  |                              ****
  |                          !*****
  |            *************
  | *************
$50
$Old equipment----------------------------> $bleeding edge

(! = where I like to buy my technology equipment)

If you make a proc in OpenACS, it's got to work and look good on all browsers -- or else it totally sucks. I found that using the nested color BG tables made the output more visually exciting or meaningful to the client. I think I had to use that dot_clear image to force the output to work in all browsers -- so it's a total hack. However, maybe the image alt tag could make the information accessable to blind people. It's still a hack though.

What about a histogram that went vertical? -- for some reason that seams harder in HTML but maybe it's possible. Does anyone do stuff like this? (I've dug these two examples out of my outgoing email and now I've put them on that status bar page -- please send examples of HTML and I'll look at it.)

60%
***
* *
* *          52%
* *    50%    ***
* *    ***    * *
* *    * *    * *
* *    * *    * *
* *    * *    * *
* *    * *    * *

Eric

Collapse
Posted by Mike Sisk on

Sorry for the delay; I meant to get back to this thread sooner.

Yes, I'm still using table-based layout myself, mostly because I haven't had time to properly learn to do it the right way. I'm thinking of redoing our site and implementing it in table-free layout.

BTW, have y'all checked out the Collaboraid site recently? Very nice design -- I'm jealous and might steal it for my own use. ;)

Here are some links on doing away with table-based layout:

Collapse
Posted by Alfred Werner on
Works fine in Konqueror 3.0.4
Collapse
Posted by Andrei Popov on
The next step could be getting rid of nested tables in form template (or maybe this should be the first step?)
Collapse
Posted by Caroline Meeks on
http://www.aristoi.biz/developers/status-bar

Another example using the same principle with nested tables though only 2.