Just Write

(Also pub­lished at God­bit.)

What is the best way to mark up text from the Bible? I’ve been think­ing about this ques­tion for more than a year, and in that time I have sought an answer, or at least a proposal.

If you’re impa­tient, here are the exam­ples: Exo­dus 20, Psalm 23, Matthew 5, and Matthew 6:5–15.

Caveats

Please remem­ber this arti­cle presents only a pro­posal for con­sid­er­a­tion. I am no the­olo­gian; nor am I a renowned expert on front-​end code. Nor does every page of every site I’ve ever built have “best” markup, how­ever I do make every effort to do so.

How­ever, it seems to me that–of all texts in the world–it should be impor­tant to make an effort toward best prac­tices in mark­ing up the Bible.

Of course, I wel­come cor­rec­tions and com­men­tary, any thoughts or additions.

Back­ground

Some good work has been done on cita­tion of online Bible quotes, includ­ing BibleRef and Open​Bible​.info. There are even some Word­Press plu­g­ins for BibleRef.

Bibleref is a sim­ple approach to auto­mat­i­cally iden­ti­fy­ing Bible ref­er­ences [in] web pages.

I use and rec­om­mend BibleRef, which is a foun­da­tional pro­posal that focuses directly on the cita­tion, for exam­ple: <cite class="bibleref">2 Tim 3:16</cite>. All of the present exam­ples use the BibleRef cita­tion format.

But I wanted some­thing more com­pre­hen­sive, that would help with mark­ing up entire bib­li­cal texts or even a whole Bible.

Bibleref is part of a gen­eral move­ment toward markup that expresses more seman­tic, rather than pre­sen­ta­tional, element.

So, my ques­tion is broader than cita­tion for­mat: what ele­ments should we use,
as best practice?

What’s “Best”?

When con­sid­er­ing what may be a “best” way to mark up the Bible, sev­eral require­ments or prin­ci­ples come to mind.

First, it means using (X)HTML in a way that is valid, min­i­mal, and seman­tic. In this case, the term “valid” means essen­tially “meet­ing the require­ments set by the W3C of the spec­i­fi­ca­tion selected by the Doc­type of that document.”

“Min­i­mal” refers to adding as few ele­ments and attrib­utes as rea­son­ably pos­si­ble to the text itself, while pre­serv­ing its structure.

And for pur­poses of this arti­cle, “seman­tic” means a few things: using mean­ing­ful ele­ments that match each por­tion of the text, and com­mu­ni­cate its func­tional mean­ing. In other words, if some text is a pri­mary head­ing, use an <h1></h1> (head­ing) ele­ment; if it’s a para­graph, use a <p></p> (para­graph) ele­ment; if a block quote, use a <blockquote></blockquote> ele­ment, etc.

The word “seman­tic” also man­dates gen­eral web stan­dards prin­ci­ples, including:

• no tables for layout,
• avoid inline styles,
• avoid frames,
• avoid numer­ous <div></div> and <span></span> ele­ments (espe­cially those with class attrib­utes that mimic other ele­ments, like head­ings and paragraphs),
• don’t require JavaScript or Flash.

CMS – Friendly

Another prin­ci­ple for my project is to rec­og­nize the ubiq­uity of the con­tent man­age­ment sys­tem. Most cur­rent con­tent on the web is no longer in sta­tic web pages; rather, it is stored in a data­base and pre­sented dynam­i­cally when some­one asks for it.

So, the four exam­ples I’ve pre­pared are all marked up using the excel­lent Tex­tile syn­tax, the “humane Web text generator”.

Not a Microformat

I sup­port and use Micro­for­mats, but it should be noted that this Bible markup pat­tern is not a Micro­for­mat, and for var­i­ous rea­sons it prob­a­bly never will be.

Cur­rent Practice

I did some research on how some pub­lish­ers and ver­sions are pre­sented on the web, basi­cally by look­ing at as many of these four exam­ples in the four ver­sions that were avail­able on these five sites: Bible Gate­way, Eng­lish Stan­dard Ver­sion, eBible, You­Ver­sion, and WEB Bible.

The markup was about what you might expect from large sites with big con­tent man­age­ment sys­tems. With very few excep­tions, the markup of the pages were all invalid, not min­i­mal, and not semantic.

How­ever, they all at least declared a Doc­type, and com­pared to many enor­mous com­mer­cial sites, most of the markup was rather clean. In fact, almost all used head­ing ele­ments well, and used some arrange­ment of mainly para­graph ele­ments with some class attrib­utes. Depend­ing on the con­tent man­age­ment sys­tem, my impres­sion is that much of this Bible text markup could be much improved with­out undue effort.

Thing One, and Thing Two

Some infor­mal study indi­cates there seem to be two basic seman­tic types or “gen­res” of bib­li­cal text.

The first type can be cat­e­go­rized as prose, and includes para­graphs, lists, and block quotes. The sec­ond type may be called verse, which includes poems, songs, and other lyri­cal matter.

I real­ize this may be gross over-​simplification, but when con­struct­ing any tax­on­omy there is a ten­sion in select­ing the num­ber of cat­e­gories. In this case, I pro­pose sim­ply two cat­e­gories, which adds seman­tic rich­ness while being sim­ple enough for this intro­duc­tory article.

The two main gen­res in the Bible are nar­ra­tive and poetry.
– Edi­tors’ Pref­ace to the ESV Lit­er­ary Study Bible

Even a sim­ple two-​category tax­on­omy can yield pow­er­ful results: pick up a Bible and com­pare Gen­e­sis to Psalms, which con­tain mostly prose and verse respec­tively. It’s obvi­ous they are pre­sented dif­fer­ently, and this basic pre­sen­ta­tional char­ac­ter can be pre­served in the markup.

Exam­ples

As exam­ples of this pro­posed Bible markup pat­tern, it seemed appro­pri­ate to use pas­sages from both Old and New Tes­ta­ments, includ­ing prose, block quotes, and verse.

I selected four texts as exam­ples, which are posted on my blog: Exo­dus 20, Psalm 23, Matthew 5, and Matthew 6:5–15. These pas­sages are also known as the Ten Com­mand­ments, the Beat­i­tudes, the Lord’s Prayer, and … the Twenty-​Third Psalm.

Each exam­ple is pre­sented in a dif­fer­ent ver­sion: Exo­dus 20 in the NIV, Psalm 23 in the ESV, Matthew 5 in the WEB, and Matthew 6:5–15 in the KJV.

Overview: The Method

1. Bible: The first step is sim­ple: a con­tainer ele­ment, such as a <div></div>, gets a class attribute of “bible”.
2. Head­ings: The sec­ond step is also easy: Head­ings use head­ing ele­ments, such as <h2></h2>, <h3></h3>, etc.
3. Para­graphs: Put almost every­thing else in a paragraph.
4. Block quotes: sur­round one or more para­graphs of a block quote in a <blockquote></blockquote> element.
5. Verse num­bers and Foot­notes: At first, I thought it would be clever to use ordered lists for the verse num­bers, but that only works if every­one begins all their Bible quo­ta­tions from the begin­ning of a chap­ter. So, verse num­bers are <sup></sup> ele­ments. Sim­i­larly, foot­note ref­er­ence num­bers are <sup></sup> ele­ments with a class attribute of “footnote”.
6. Verse, Poetry, etc.: As between “prose” and “verse,” I chose to make “prose” the default. If some or all of a pas­sage is verse, then enclose that text with an ele­ment (such as a <span></span>) with a class attribute of “verse”.
7. Addi­tional: There are a few addi­tional aspects, includ­ing div ele­ments to enclose multi-​paragraph “stan­zas” of verse (see Psalm 23), and the markup of the footnotes.

The Styles

For ease of ref­er­ence, the Bible style infor­ma­tion is embed­ded in the head of the exam­ples, so you can sim­ply view the page source.

In actual use, they should be included in a sep­a­rate CSS file with the other styles for that page. A sam­ple CSS file of the Bible styles is avail­able for down­load.

The Future

Some thoughts for the future:

• How to markup Selah or a clos­ing Amen? Per­haps class="affirmation"?
• Ini­tial caps for the chap­ter num­ber, super­sed­ing the verse num­ber of the first verse of that chapter?
• Per­haps a print stylesheet, for select­ing a slightly dif­fer­ent font stack, or siz­ing the printed text in points.
• And the one I’m almost afraid to ask, what about class="wordsofchrist"?

Let the dis­cus­sion begin….

This arti­cle is © Mont­gomery 2008. Some rights released with a Cre­ative Com­mons Attribution-​NonCommercial-​ShareAlike 2.5 License.

Let’s say your new Word­Press site has been set up, and you know how to login. Some­thing called the “Dash­board” is on the screen. Now what?

This is an intro­duc­tion to a few of the basics to using WordPress.

Write a New Post

(This arti­cle is writ­ten for Word­Press 2.5 and sim­i­lar later versions.)

The first thing you notice is a big orange bar that says “Right Now,” and has but­tons for “Write a New Page” and “Write a New Post”.

That last one sounds good, so click it: “Write a New Post”.

Now there’s a “Title” box (that one seems self-​explanatory), and a “Post” box (and some other stuff down below). Type a title in the obvi­ous place, and then let’s con­sider this “Post” box, with its asso­ci­ated tool buttons.

First, to the right of the label “Post” are two tabs: “Visual” and “HTML”. Even­tu­ally, you’ll want to use the HTML set­ting, so your code is as good as your prose.

For now, con­firm that “Visual” is selected, and start typ­ing your post.

For­mat­ting Buttons

There are sev­eral pre­sen­ta­tional but­tons, in a row along the top of the “Post” box. You can select some text, then click these to make it bold, italic, etc. (Again, this pro­duces HTML code that is pretty messy, so you’ll want to leave this “Visual” set­ting behind someday.)

Three of these for­mat­ting but­tons, I just don’t rec­om­mend for non-​technical peo­ple: Insert Image, Insert More Tag, and Show/​Hide Kitchen Sink. So if you want to insert an image, instead use the “Add Media” but­tons just above the main for­mat­ting buttons:

Add Media

With these but­tons, you can add an image, video, audio, or other media.

Add an Image: To add an image into your post, place the cur­sor about where you want the image to be. Click “Add an Image” (not the but­ton with the pic­ture of a tree, rather the but­ton next to “Add media”).

Remem­ber, do not use the “Insert/​edit image” because it’s a bit more geeky, and assumes the image is already uploaded to the inter­net (rather than on your computer).

A pop-​up thing will … pop up. (Tech­ni­cally, this is called a “modal win­dow.” Now you can impress peo­ple at par­ties with your tech­ni­cal knowledge.)

To select an image on your com­puter, click “Browse…” and select it from the right folder (“My Pic­tures,” for exam­ple). After click­ing Okay or Open, click “Upload.” Then, you may wish to edit the title, cap­tion or descrip­tion. And you may wish to delete the “Link URL.” Next, select an “Align­ment” and “Size,” and click “Insert into Post.”

Add Video and Add Audio use sim­i­lar methods.

Add Media is also sim­i­lar, but can be used to upload a PDF doc­u­ment. If you do upload a PDF, make sure to keep the link address that is auto­mat­i­cally gen­er­ated, since that is the link to the PDF doc­u­ment.

Cat­e­gories

Depend­ing on which Theme you select for your Word­Press site, most of the options below the main post won’t be rel­e­vant yet.

The one that’s prob­a­bly impor­tant is “Cat­e­gories” (or per­haps “Tags”), because your designer may have used them to dic­tate on which Page this post should go. For exam­ple, a post with cat­e­gory “Blog” will go on your blog page, and a post with cat­e­gory “Arti­cles” will go on your arti­cles page, etc.

When you’re done with your post, click “Pub­lish” and take a look at your site. If all looks well, hooray!

If not, just go to the “Man­age” tab (and the “Posts” sub-​tab), and click the post to edit it.

Next Steps

Future arti­cles may cover other aspects of main­tain­ing your Word­Press site. Till then, enjoy pub­lish­ing your content.

These are the best of times for South Florida web devel­op­ment, or at least they seem so far.

I’m all agog over upcom­ing events, con­fer­ences and meet-​ups:

First, I’m going to attend the FOWA con­fer­ence in Miami on Thurs­day & Fri­day of this week. The venue is the Arsht Cen­ter for the Per­form­ing Arts.

Then, I’m par­tic­i­pat­ing at Bar­camp Miami.

And next week, SXSWi!

Part 2 of 2

Part 1 was pub­lished last week.

• MM:

You describe your role as “web devel­oper and infor­ma­tion archi­tect” includ­ing “Cold­Fu­sion, Javascript, HTML IA choices? Did you use any per­sonas or wireframes?

• DL:

Orga­niz­ing the con­tent can often be tricky, and there’s been a num­ber of dif­fer­ent struc­tures over the last sev­eral years. We knew we needed to clean things up, and we wanted to group the con­tent together more over­all. In the col­le­giate world, there are a lot of phrases that maybe aren’t the best but are com­mon­place and expected, so we did a lot of research to see what kind of lib­er­ties we could get away with. We ended up with two wire­frames, and con­ducted some focus groups and user test­ing to see what was most successful.

• MM:

Tell us about “Biola red.”

• DL:

Pan­tone #185. Biola’s col­ors are red and white, so our web sites need to fea­ture that color in some capac­ity. Usu­ally it’s just in the mark, but on the Under­grad site it’s used more prominently.

• MM:

One of Godbit’s pre­mière inter­view­ers, Yan­nick Lyn Fatt, had some ques­tions for you on the forum:

what was the inspi­ra­tion for the design (also the print design since the web­site was based on that)? I’m guess­ing the fact that the Uni­ver­sity is in SoCal had some­thing to do with it (cor­rect me if I’m wrong) but the design is cer­tainly unusual for a school website.

• DL:

Here’s Jes­sica Nel­son on that:

The gen­eral con­cept behind the design was the idea of con­ver­sa­tion. We wanted the stu­dents and par­ents to feel like the uni­ver­sity was invit­ing them in to Biola’s cul­ture. The mor­ph­ing that occurs in a lot of the illus­tra­tions comes from the idea that Biola is a uni­ver­sity whose faith is inte­grated into every major – and that the cam­pus on the whole is very inte­grated. We wanted to com­mu­ni­cate the com­mu­nity that exists here, and the crossover between majors

* YL:

Also what was the message/​feeling that you wanted peo­ple to get from the design of the web­site. Did the prin­ci­pal and other admin­is­tra­tors give you and your team free reign over the design? Did they play a role in giv­ing you ideas for the design?

• DL:

I’ll let Brian Miller, who was the project man­ager for the entire Biola Under­grad cam­paign, answer that one:

When stu­dents visit our web­site or read our ads or print mate­ri­als we want them to expe­ri­ence a high level of qual­ity, pro­fes­sion­al­ism and clear com­mu­ni­ca­tion that leaves the dis­tinct impres­sion that Biola is a uni­ver­sity focused on its mis­sion to equip men and women to impact the world for the Lord Jesus Christ. The design style itself is not intended to be the focus, but rather the back­drop to the mes­sage we want to communicate. We believe the design and lay­out will serve to draw peo­ple in and set a back­ground tone that enhances a curi­ous student’s expe­ri­ence with Biola as they explore.

Biola admin­is­tra­tion has been very sup­port­ive of our endeav­ors to cre­ate qual­ity mar­ket­ing materials. They have empow­ered us to make deci­sions that are in the best inter­est of the uni­ver­sity and we are very thank­ful for that.

• MM:

Your blog men­tioned the lack of “an ele­gant Cold­Fu­sion solu­tion”, that you “needed some­thing new”:

fol­low­ing the MVC/​MTV as much as I could (it’s the Django influ­ence on me) and the cus­tom tag I designed merely includes two files. The first is some­thing like a Django view except of course it doesn’t deter­mine which tem­plate will be called; it just sets up some vari­ables that the tem­plate will have access to. The sec­ond is the base tem­plate that the con­tent page is extending.

So, is that a cus­tom CMS, or what exactly in the backend?

• DL:

It’s not a full-​fledged CMS because most of the con­tent sit in html files on the server and are browsed to directly. That’s why it’s only mar­gin­ally sim­i­lar to Django tem­plates. Pieces of con­tent are man­aged by a Cold­Fu­sion solu­tion I designed (a “per­son­al­iza­tion sys­tem” for lack of a bet­ter name). All the links in the footer and the coun­selor greet­ings and pho­tos are from that sys­tem. Of course that makes it com­pli­cated when some of your con­tent is in the file sys­tem and some is in a data­base. But when you’re deal­ing with a server that doesn’t have regex URL han­dling… well you do what you can.

• MM:

The “per­son­al­iza­tion sys­tem” sounds inter­est­ing, as a way of per­son­al­iz­ing the site based on each person’s activ­ity. You say “It’s cur­rently only being used in a few places; one of the unfor­tu­nate real­i­ties is no one has a lot of time to sit and think about what’s pos­si­ble.” Any thoughts on how it works and whether it can that be automated?

• DL:

It’s based on the infor­ma­tion the vis­i­tor gives us as well as basic visit pat­terns, and on the con­cept of “goals” that the admis­sions staff wants each vis­i­tor to accom­plish (which could be com­plet­ing a form or just vis­it­ing a spe­cific page). The value, or pres­ence or absence, of any one of these bits of data can be lever­aged to influ­ence pretty much any­thing on the site.

For exam­ple, every fea­ture on the home page could be adjusted to adver­tise events or con­tent that is most likely appro­pri­ate from where you’re at in your research and inter­est in Biola. Or, every sin­gle stu­dent quote could be from stu­dents that are from a sim­i­lar eco­nomic or cul­tural back­ground. There’s a lot of poten­tial. Ulti­mately, I think the sys­tem will need to be imple­mented in some­thing like Django in order for that poten­tial to be real­ized. Split­ting up con­tent between data­base and file sys­tem is a hindrance.

• MM:

Any spe­cific chal­lenges bring­ing the print design of the cam­paign to the web?

• DL:

One of the tougher chal­lenges was keep­ing file size down. The many graph­ics and tex­tures made that very dif­fi­cult. In the end, it’s still a pretty hefty down­load but it could have been worse.

• MM:

I noticed the default blue+underline links; is that for acces­si­bil­ity purposes?

• DL:

One of our high­est pri­or­i­ties was to make the infor­ma­tion easy to find. The cre­ative ele­ments and illus­tra­tions are very impor­tant, but we wanted the con­tent itself to be clean and read­able, and links to be obvi­ous. I think that’s why we didn’t stray far from the default blue.

• MM:

Elas­tic lay­out, very nice.

• DL:

Thanks! That was a fea­ture I was very inter­ested in adding. I cre­ated an ear­lier ver­sion of the core lay­out CSS, and it used em-​based dimen­sions so that the lay­out would enlarge or dimin­ish based on the font size you had set. We quickly real­ized that sort of approach wasn’t best for our core audi­ence, and Tim worked on imple­ment­ing the elas­tic lay­out you see now. It’s one of my favorite ele­ments, espe­cially the ban­ners at the tops of the main pages that adjust to the size change.

• MM:

Search­ing the site for “web design” yields zero results. Does Biola teach web design/​development, and do they teach web standards?

• DL:

Unfor­tu­nately you’ve stum­bled across a weak­ness there: it’s not a full-​text search, just keyword-​based and we’re miss­ing a few key­words. Biola does in fact have an excel­lent art major BFA and a design empha­sis. While tra­di­tion­ally much more print-​oriented, the web courses are get­ting better.

A friend of mine has started teach­ing the classes and he’s very standards-​aware and teaches CSS and valid XHTML. I had the oppor­tu­nity to guest lec­ture last year, and will be involved again this year so I’m really look­ing for­ward to that. The inter­est in web design is grow­ing, and I’m really hop­ing more stu­dents come into the pro­gram with the pas­sion to learn and excel. Look for great things to come from Biola-​trained web designers!

• MM:

Any rec­om­men­da­tions for new web design­ers? How did you learn, and how should new web design­ers learn?

• DL:

The desire to learn is most impor­tant. Get your hands dirty. Learn how to write semantically-​meaningful markup (you need good source mate­r­ial). Start play­ing around with as much CSS as you can. Don’t know what a spe­cific prop­erty does? Find out! And get inspired by scour­ing the web for great designs. Fig­ure out how they did what they did. Then start adding to your arse­nal with things like DOM script­ing and frame­works. The more you know about the big­ger pic­ture of web devel­op­ment, the bet­ter a designer you’ll be. Oh, and attend Biola.

• MM:

Thanks again.

• DL:

Thank you, Michael, it’s been a plea­sure.

This arti­cle is © Mont­gomery 2007. Some rights released with a Cre­ative Com­mons Attribution-​NonCommercial-​ShareAlike 2.5 License.

Also pub­lished at God­bit.