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

Collapse
1: ASCII status bars and low tech status bars
Posted by Eric Wolfram on 04/25/03 02:33 AM
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
2: Re: ASCII status bars and low tech status bars (response to 1)
Posted by Randy Ferrer on 04/25/03 02:53 AM
Hey Eric - Very nice! Thanks for sharing this with the community. 😊)
Collapse
3: Re: ASCII status bars and low tech status bars (response to 1)
Posted by Tom Jackson on 04/25/03 08:48 AM

Cool, it works in Netscape! Thanks Eric.

Collapse
4: Re: ASCII status bars and low tech status bars (response to 1)
Posted by Malte Sussdorff on 04/25/03 08:50 AM
I will ask Kolja to add this bar (optional) to the survey module.
Collapse
5: Re: ASCII status bars and low tech status bars (response to 1)
Posted by Mike Sisk on 04/25/03 10:12 PM
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
6: Re: ASCII status bars and low tech status bars (response to 1)
Posted by Caroline Meeks on 04/25/03 10:13 PM
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
7: Re: ASCII status bars and low tech status bars (response to 1)
Posted by Tom Jackson on 04/25/03 10:40 PM

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
8: Re: ASCII status bars and low tech status bars (response to 1)
Posted by Eric Wolfram on 04/25/03 11:06 PM
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
9: Re: ASCII status bars and low tech status bars (response to 5)
Posted by Steve Manning on 04/25/03 11:36 PM
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
10: Re: ASCII status bars and low tech status bars (response to 1)
Posted by Peter Marklund on 04/26/03 09:09 AM
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
11: Re: ASCII status bars and low tech status bars (response to 1)
Posted by Don Baccus on 04/26/03 07:10 PM
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
12: Re: ASCII status bars and low tech status bars (response to 1)
Posted by Eric Wolfram on 04/26/03 08:53 PM
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
13: Re: ASCII status bars and low tech status bars (response to 1)
Posted by Mike Sisk on 04/28/03 11:42 PM

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:

It's noteworthy that both w3.org and ESPN have switched to table-free layouts and have saved bandwidth as a result. The article on ESPN was discussed on slashdot and has lots of useful comments.
Collapse
14: Re: ASCII status bars and low tech status bars (response to 3)
Posted by Alfred Werner on 04/29/03 06:03 AM
Works fine in Konqueror 3.0.4
Collapse
15: Re: ASCII status bars and low tech status bars (response to 5)
Posted by Andrei Popov on 04/30/03 02:05 PM
The next step could be getting rid of nested tables in form template (or maybe this should be the first step?)
Collapse
16: Re: ASCII status bars and low tech status bars (response to 1)
Posted by Caroline Meeks on 05/10/03 01:45 AM
http://www.aristoi.biz/developers/status-bar

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