Web Interface - Parallel Version Display, was Re: [sword-devel] Please test

Sat, 7 Jun 2003 16:08:12 -0500

I probably ought to apologize for my rant this morning. the scream was half
in jest, well probably more like 90% in jest. :) I did freak out  a little
bit when I saw the align tags, width tags, and inline style smattered
throughout the page. But after a closer look, there are only a few things
that could be cleaned up and moved to the external CSS pretty easily.

The table itself is actually a great idea. For all the things I've said
against table based design, tables do have their place. Their place is to
display tabular data. The parallel translations are tabular data and thus
well suited for a table. We just need to take out any presentational mark-up
and replace it with semantic markup.

Another issue with the table is space. With the table being squished into
the center column, things get real cramped real quick. I'm not sure what
ought to be done about that. Removing the outer columns and just using one
big table across the page would be one option, but you lose the cool one
click feature that is working there now.

One option might be to have a separate page, or another section on the
preferences page, that would allow the person to select the translations
they want displayed.

by grace alone,

Don A. Elbourne Jr.
http://elbourne.org

----- Original Message ----- 
From: "Don A. Elbourne Jr." <delbourne@cox.net>
To: <sword-devel@crosswire.org>
Sent: Saturday, June 07, 2003 7:27 AM
Subject: Re: [sword-devel] Please test

> AAAAAAAGGGGHHHHHH!!!!!
> http://www.crosswire.org/sword/biblenew/parallelstudy.jsp
>
> ok ok I'm calm. I just had to get it out of my system.
>
> Let me get another cup of coffee and I'll be right back.
>
> OK. A good bit of presentational markup has crept in there. One of the
goals
> of the design was to separate content and structure from presentation.
Allow
> me to cross-post something I sent out yesterday to a church-webmaster list
I
> am on.
>
> ----------------------------------------------
>
> We have been talking about the advantages of valid XHTML and CSS. One of
the
> real advantages is that you can separate your content from presentation.
In
> other words your HTML file will have just your content with tags that
define
> the content instead of bloating the page with presentational information.
> See my previous message to Paul, where I showed how to replace a big block
> of presentational markup with a simple <h2> tag. Instead of defining the
> size, color, justification, and margin of the text, we defined it by what
it
> is, a heading. You can use the same thing with divs by using either an id
or
> a class, like this <div id="navigation"> or <div class="content">
>
> Once the structure of your page is in place you can style all of the
> elements with one external style sheet. Lets suppose you have 50 pages on
> your site. If all your navigation lists are marked with presentational
code
> like  <font> tags then to make a change you will have to go to each of
those
> 50 pages and make your changes. But if you code them with
non-presentational
> markup like <div id="navigation"> you can then make changes to your one
CSS
> file and it will effect every page of your site at one go. Cool huh?
>
> This is what I tried to do with my church web site. Here is what it looks
> like without the CSS:
> http://lakeshorebaptist.net/nocss.shtml
> And here is what it looks like with the CSS:
> http://lakeshorebaptist.net/
>
> I know my site is sort of plain-Jane looking, but if I wanted to change
the
> complete look of the site, all I would have to do is change the CSS, not
> every page of the site.
>
> My site is not the best example. If you want to see something really cool,
> check out the CSS Zen Garden. The page is marked up in pure
> non-presentational XHTML.  The challenge went out to designers to
transform
> the page with nothing but the magic of CSS. I could not find an unstyled
> version of the page on the site so I mirrored it here:
> http://elbourne.org/temp/zengarden.htm Now check out the styled version:
> http://www.csszengarden.com/ Follow the links in the navigation to view
> other designs. I think my favorites so far are Michael Pick's "Dead or
> Alive" and  Golden Mean by Douglas Bowman. The amazing thing is that all
of
> these pages are the same exact page. No changes were made to the HTML
> itself. the only difference is that different style sheets are being
> imported. Remarkable.
>
> I know that is just one page, but let's suppose it was a site with
thousands
> of pages. Can you imagine trying to make drastic changes like that to the
> entire site, page by page? Big names like ESPN.com are starting to see how
> much time can be saved with this method and they recently switched over to
> semantic XHTML. Probably none of us have church web sites with thousands
of
> pages, but the same principles work well no matter what the content.
> -----------------------------------------------
>
> I use the CSS Zen Garden as an example of the remarkable stuff that can be
> done using CSS when it is applied to pure semantic XHTML. When I started
> designing the Sword web interface, I intended for the CSS to be a working
> demo of one possible design. If we keep the XHTML pure and without
> presentational markup we can then come back and do whatever with the CSS
and
> not have to re-code the source. Perhaps we could even get a real designer
to
> come in and provide an outstanding CSS, in opposition to my feeble
attempts.
> Or we could provide more than one CSS and the user could choose their
> preference. These things are only possible if we stick to
non-presentational
> well-formed valid XHTML in the page itself.
>
>  Tristan Nitot can say it better than I can. Check out the great article "
> The Business Benefits of Web Standards."
> http://devedge.netscape.com/viewsource/2003/why-web-standards/
>
> Alright enough of that.
> </rant>
>
> by grace alone,
>
> Don A. Elbourne Jr.
> http://elbourne.org
>
>
>
>
> _______________________________________________
> sword-devel mailing list
> sword-devel@crosswire.org
> http://www.crosswire.org/mailman/listinfo/sword-devel