[sword-devel] Web Interface: Mock-up page 1

Mon, 3 Mar 2003 11:43:12 -0600

 I have one page of the Sword Web interface proposal up. I was hoping to
have several mock pages together by now, but I don't have them together yet.
I figured I might as well share this one, because if everyone hates it, I
can change gears before getting too far along. :)

What you see here http://elbourne.org/swordweb/passagestudy.html is my idea
of what the "passage study" results page would look like. Everything is
marked up in semantically structured XHTML without any visual markup in the
page itself. Everything is done through CSS so that the entire site look and
feel can be changed at will. This should also make the generation of the
HTML simpler on the programmer. For example no FONT tags, the headings are
simple <h1><h2> headings, the lists are marked up <ul> as lists, etc.. If
you have a browser that utilizes alternative style sheets, I have a blank
one associated with it in addition to the blue theme to show the structure
of the document. Perhaps we could have several alternate style sheets and
allow the user to switch according to his/her tastes/needs. But enough of
that....

The heading and navigation items across the top are simply place holders. We
will have to think about what all will be best to place there, depending on
what features we end up implementing.

The search box to the top left would appear on the homepage as well so that
users can jump straight into the two most commonly used features of an
online Bible. Either a quick search for word/phrase, or a passage look-up.
Then of course there is a link to a more powerful search where the user can
limit the search to a particular portion of scripture, search other
translations, books, etc.

The page I have up now would be the result of typing "Romans 8:26-39" and
clicking "go."  Down the left column is a list of all the Bible translations
available. The links would already be set to the desired passage. The same
thing for commentaries would be in the right hand column. The center column
would contain the text. The passage reference would be displayed as a
heading and the book name underneath. The sub navigation bar allows the user
to progress forward a chapter, backward a chapter, or view the entire
chapter. Of course the links in the side columns should follow the focus of
the main content in the center.

I have a lot of translations there listed. Perhaps it would be best to limit
the list to a default group, for example only English translations. The user
could then change what translations are included with their preferences. I
also have several commentaries listed in the mock-up. I'm assuming that it
would be trivial to limit this listing to only those books that have entries
for the current passage under investigation.

From the homepage the user is only two clicks away from any content related
to their desired passage.

Two features can be built into this view page that I do not have shown yet.

1. Using the KJV2003 text, each word could contain a link into a "Word
Study" page where the definitions from any available lexicons/ dictionaries
would be displayed, along with a concordance listing of every occurrence of
that word.

2. Cross references could be included between each verse from the Treasury
of Scripture Knowledge. Perhaps this feature could be toggled off an on in
the user preferences.

Back to the layout... the template is very simple. Basically:

<body>
  <div id="header">
    <h1>Insert Header Here</h1>
   </div>

<div id="content-wrap">

    <div id="content-sub-1">
        <!-- Insert Search Box  -->
        <!-- Insert Translation List  -->

   <div id="content-sub-2">
        <!-- Insert Commentary List  -->
    </div>

     <div id="content-main">
        <!-- Insert Main content  -->
    </div>

</div>

    <div id="footer">
        <!-- Insert Footer Info  -->
    </div>

</body>

CSS takes care of the layout. I still will probably need to tweak it some,
but this is the main idea. I've not tested it on all browsers yet, so give
me some feed back on how it looks. It should fill your browser window no
matter what size or screen resolution you have set. The center column is
fluid and the two side columns are fixed. Go ahead and resize your browser
window and see. :) I swiped the basic CSS from a template site and then made
a few changes as needed, so it should be ok. It is supposed to even degrade
and work for NS4. The page validates as XHTML 1.0 Transitional.

by grace alone,

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