Forum OpenACS Q&A: ASCII status bars and low tech status bars
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:
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.
Have a wonderful day,
Cool, it works in Netscape! Thanks Eric.
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.
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?
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.
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.
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.
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.
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.
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,
$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.)
* * 52%
* * 50% ***
* * *** * *
* * * * * *
* * * * * *
* * * * * *
* * * * * *
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:
- http://devedge.netscape.com/viewsource/2003/espn-interview/01/ 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.