<html><head></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><br><div><br><div>Begin forwarded message:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"><span style="font-family:'Helvetica'; font-size:medium; color:rgba(0, 0, 0, 1);"><b>From: </b></span><span style="font-family:'Helvetica'; font-size:medium;">Chris Burrell <br></span></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"><span style="font-family:'Helvetica'; font-size:medium; color:rgba(0, 0, 0, 1);"><b>Date: </b></span><span style="font-family:'Helvetica'; font-size:medium;">April 25, 2010 4:57:48 PM EDT<br></span></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"><span style="font-family:'Helvetica'; font-size:medium; color:rgba(0, 0, 0, 1);"><b>Subject: </b></span><span style="font-family:'Helvetica'; font-size:medium;"><b>A few mockups online!</b></span></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"><font class="Apple-style-span" color="#000000"><b><br></b></font></div>Some mock ups from me are now on the Tyndale Programming blogs: <a href="http://tyndalestep-prog.blogspot.com/search?updated-min=2010-01-01T00:00:00-08:00&updated-max=2011-01-01T00:00:00-08:00&max-results=50">http://tyndalestep-prog.blogspot.com/</a><div>
<br></div><div>Comments are welcome, whether good or bad!!! I think whatever happens, the icons would need to be harmonized (colour an style) and thought through a bit. And obviously the colour scheme would need to be chosen carefully (do we also want to make colour blind people have easy access, etc.?)<br>
</div><div><br></div><div><a href="http://tyndalestep-prog.blogspot.com/search?updated-min=2010-01-01T00:00:00-08:00&updated-max=2011-01-01T00:00:00-08:00&max-results=50"></a><br><div>The first two screenshots go together:</div>
<div><a href="http://3.bp.blogspot.com/_4q-hr4DqduU/S9SnQsGWsoI/AAAAAAAAADs/t2ijJOFqFPc/s1600/tyndale+step-750569.PNG">http://3.bp.blogspot.com/_4q-hr4DqduU/S9SnQsGWsoI/AAAAAAAAADs/t2ijJOFqFPc/s1600/tyndale+step-750569.PNG</a></div>
<div><a href="http://4.bp.blogspot.com/_4q-hr4DqduU/S9SnQEI12uI/AAAAAAAAADk/Qxp-v2p_QEM/s1600/tyndale+step+with+popup-747928.PNG">http://4.bp.blogspot.com/_4q-hr4DqduU/S9SnQEI12uI/AAAAAAAAADk/Qxp-v2p_QEM/s1600/tyndale+step+with+popup-747928.PNG</a></div>
<div><br></div><div>where the second one is when the user has clicked a button on the left hand side.</div><div><br></div><div>And then there's the explanations of some of the layouts if need be:</div><div><a href="http://2.bp.blogspot.com/_4q-hr4DqduU/S9SnaPNzSBI/AAAAAAAAAD8/npX67PYsUqc/s1600/tyndale_step_description-788925.PNG">http://2.bp.blogspot.com/_4q-hr4DqduU/S9SnaPNzSBI/AAAAAAAAAD8/npX67PYsUqc/s1600/tyndale_step_description-788925.PNG</a></div>
<div><a href="http://3.bp.blogspot.com/_4q-hr4DqduU/S9SnaI4ERiI/AAAAAAAAAD0/XL_u75zTlkE/s1600/tyndale_step_with_popup_description-788049.PNG">http://3.bp.blogspot.com/_4q-hr4DqduU/S9SnaI4ERiI/AAAAAAAAAD0/XL_u75zTlkE/s1600/tyndale_step_with_popup_description-788049</a><a href="http://3.bp.blogspot.com/_4q-hr4DqduU/S9SnaI4ERiI/AAAAAAAAAD0/XL_u75zTlkE/s1600/tyndale_step_with_popup_description-788049.PNG">.PNG</a></div>
<div><br></div><div>Finally, there's a couple of extra screenshots:</div><div><br></div><div>The first showing an alternative of the bit in the middle of the book:</div><div><a href="http://3.bp.blogspot.com/_4q-hr4DqduU/S9SpdQ5XfBI/AAAAAAAAAEM/3Rw7bs3AQ6k/s1600/tyndale+step+no+bookmarks-713151.PNG">http://3.bp.blogspot.com/_4q-hr4DqduU/S9SpdQ5XfBI/AAAAAAAAAEM/3Rw7bs3AQ6k/s1600/tyndale+step+no+bookmarks-713151.PNG</a> where it would list the content we have about a particular passage</div>
<div><br></div><div>and then one that looks particularly green (the green from one of the logos that was on the blogs a few weeks ago: <a href="http://3.bp.blogspot.com/_4q-hr4DqduU/S9Spc_NlF3I/AAAAAAAAAEE/EF3stgSdQ18/s1600/step1_green-711941.PNG">http://3.bp.blogspot.com/_4q-hr4DqduU/S9Spc_NlF3I/AAAAAAAAAEE/EF3stgSdQ18/s1600/step1_green-711941.PNG</a>)</div>
<div><br></div><div>A few other remarks:</div><div>1st: we're going to run this thing in a browser (whether online or offline), so we can make use of the browser buttons (back and forth), most naturally to capture content change, similar to the bookmarks, going back and forth through the passages we've visited. (that is stateless, i.e. if we came back tomorrow that history would be forgotten about).</div>
<div><br></div><div>2ndly, it's a browser, so we can expand the page downwards (by inserting content at the top), or at the bottom. We can also use internal links to go between one screen and another.</div><div><br></div>
<div>3rdly: we could include some sort of menus at the top to make it feel more desktop-like. Not sure what I think about that. </div><div><br></div><div>4th: we do need a place of general configuration and user preferences (things like proxy settings, installing more sword modules/bibles, etc.). Generally most of that can be done on a separate page, but we need a way of accessing it, even if it's just one button at the top right, or something like that.</div>
<div><br></div><div>I think that's it from me for now...</div><div><br></div><div>Please do let me know what you all think!?</div><div>Chris</div><div><br></div><div><br></div><div><br></div><div><br></div><div><br><br>
<div class="gmail_quote">On 23 April 2010 19:12, Chris Burrell <span dir="ltr"><<a href="mailto:chris@burrell.me.uk">chris@burrell.me.uk</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0.8ex; border-left-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; padding-left: 1ex; ">
Let me introduce David IB to the list. David is the "sponsor" from Tyndale House. He's leading the data side of things and has a good idea of where Tyndale STEP will be heading.<div><br></div><div>Further to his email, if someone wants to make a mock-up that would be brilliant! Probably from the mock up we can easily divide into discrete features which I'll enter into JIRA and then we can assign them to people. It should be fairly easy to develop some of those in parallel and have the different parts of the application communicate via the Event Bus.</div>
<div><br></div><div>I'll try and knock something up myself, but I'm not very good at the whole visual side of things, so it would be good to see other impressions too!</div><div><br></div><div><font color="#888888">Chris</font><div>
<div></div><div class="h5"><br><br><div class="gmail_quote">---------- Forwarded message ----------<br>From: <b class="gmail_sendername">David Instone-Brewer</b> <span dir="ltr"><<a href="mailto:Technical@tyndale.cam.ac.uk" target="_blank">Technical@tyndale.cam.ac.uk</a>></span><br>
Date: 23 April 2010 17:35<br>Subject: Re: User Interface design for Tyndale STEP<br>To: <a href="mailto:chris@burrell.me.uk" target="_blank">chris@burrell.me.uk</a><br><br><br><div>Chris, this was bounced by the JSword and Sword mailing lists while my membership awaits approval. <br>
Do you think you could forward it? <br>Thanks <br><br>David IB<div><div></div><div><br><br>At 22:38 22/04/2010, Chris Burrell wrote:<br><blockquote type="cite">Just thought I'd share a few sites that have cropped up recently from various people in the listings and outside. If we could pull ideas off those interfaces, I think we could end up with something really good.<br>
<br>1- <a href="http://my.offlinebible.com/index.php" target="_blank">http://my.offlinebible.com/index.php</a><br>2- <a href="http://code.google.com/p/xulsword/" target="_blank">http://code.google.com/p/xulsword/</a><br>3- <a href="http://www.bibleglo.com/" target="_blank">http://www.bibleglo.com/</a><br>
<br>Chris</blockquote><br>I like lots of things in XulSword. <br>What I liked about OffLineBible:<br>* Bookmarks - click on it, and it displays the ref it is marking.<br>* different formats (no Strongs; inline Strongs, interlinear Strongs, columns <br>
* the line along the top where you can pick a chapter (a bit fiddly to use, but an interesting idea)<br>BibleGlo<br>* all the bling. OK, it isn't necessary, but it looks cool - well, impressive. <br>* the add campaign (now that advertising can be free, who says it doesn't pay?)<br>
<br>OK, Here are some positive ideas: <br><br>I like the idea of two panes of text, as in the prototype, and in XulSword, <br>with a wide tab area for navigation on the left as in XulSword, <br>* the XulSword tabs are in two columns with a narrow left-hand column of OT/NT, <br>
and a wider right-hand column which lists of books for OT or NT<br> but I think we can develop that further: <br> Instead of having just OT and NT in the narrow left-most tab, we can have other things, <br> which bring up more things in the wider right-hand tab:<br>
- OldT - listing OT books<br> - NewT - listing NT books<br> - Geog - listing placenames<br> - Hist - listing periods<br> - Lit - listing significant extra-biblical books<br> - Lang - listing languages<br> - Who - listing people<br>
- Find - a search box listing results <br><br>With some of these, we will have to display a cut-down list, perhaps with <br>[+] at the side to open up the item into more detail, eg for people: <br>[+] Aaron <br>[+] Baalam<br>
[+] Caanan<br>- giving just 26 entries displayed. <br>For Languages I'd suggest an interface like <a href="http://2LetterLookup.com">2LetterLookup.com</a><br><br>The equal sized panes of text could be like in XulSword, ie:<br><br>* each pane can show a different chapter of the Bible <br>
or the same chap in a different version, or they can be <br> linked to show more of the chapter, flowing from one to the other. <br>* a raisable bridge icon (like London Tower Bridge?) can join or separate them <br><br>
* both panes have an identical set of tabs across the top<br>* these tabs need to be in two layers, classifying them into <br> - English (ie PD versions)<br> - European, (ie other language groups)<br> - African<br> - Eastern (etc as needed)<br>
- Online (ie IFrames to NIV and other commercial version websites)<br> - Ancient (ie Greek, Hebrew, ancient versions)<br>* at the bottom of each pane, there's a box which minimises when not in use<br>* below this box is another set of tabs determining what these boxes show<br>
(and when the box is minimised, they remain as a set of buttons)<br>* These tabs include: <br> - footnotes (ie all the footnotes of verses in that chapter)<br> - cross-refs (ie all the crossrefs of verses in that chapter)<br>
- personal notes (for that chap)<br> - names (ie all the people and places named, with links to dictionaries)<br> - timeline (ie a minimised view of the time represented by that chapter) <br> - vocab (ie all Greek, Hebrew and English words which occur in the chapter)<br>
<br>* between the two text panes put a column of bookmarks, <br> with an arrow in both directions, so you can open in either pane<br>* at the top are "manual" bookmarks and at the bottom are "automatic" bookmarks<br>
- add a manual bookmark by clicking on an arrow at the top middle of each text <br> - an automatic bookmark is added everyone a pane moves away from a chapter <br> by any means other than scrolling<br>* the two sets of bookmarks accumulate vertically in order of setting them<br>
and when they run out of room, there is a scroll function to see older ones<br>* a "back" button at the top of each text pane keeps a history of what was displayed on that pane<br><br>* when you hover over a tagged word, definitions etc appear as a hover<br>
* this hover does NOT appear next to the cursor, but always in the Tab area on the left, <br> because this area is not being used once a person has gone where they want to go, <br> whereas an overlay by the cursor obscures the exact text being studied<br>
* hover works within the text panes, and also in the boxes <br> - hovering over a cross-ref shows the verse, <br> - hovering over a Greek word in the text pane or a box shows a lexicon entry<br> - hovering over a place name in text or pane or a box shows dictionary entry <br>
etc<br>* when you click on a ref (rather than hovering over it), the left-hand text pane <br> goes to that chapter and highlights the verse clicked on<br>* when you click on a word or place or date (rather than hovering over it), <br>
the right-hand text pane shows a full lexicon or map or timeline. <br><br>* A Search box is permanently visible at top left, above the Tabs <br> and results appear in the wider right-hand Tabs area <br> - this searches for English, Greek, Hebrew, numbers (for Strongs) and Refs <br>
working out for itself what it is searching for. <br><br><br>We have LOTS of data to display, but we want to try and accommodate small screens - big problem!<br>Let's assume that phone screens will get bigger. <br>
My Toshiba G910 has 800x600 pixels in eye-watering 2.5"x1.7" size, which is great for those under 40, <br>but as soon as your lenses harden, you need +3 glasses to see the details. <br>I think phones will go in the way of high-density screens, though laptops may not follow. <br>
But I don't think we should assume that we will have this much space. <br>Although we can display a lot, people can't see so much detail. <br><br>On small screens, we can treat the three areas (tabs on the left, and two text panes) <br>
as separate screens which you drag into view as on an iPhone. <br>With small screens, the hover area will have to be near the cursor, as in most systems. <br><br>Can someone with artistic skills make a visual of all this? <br>
<br>David IB</div></div></div></div><br></div></div></div></blockquote></div></div></div>
</blockquote></div><br></body></html>