Took me a little while to track this down, so I'm posting it here.
The URL mallarme.uvic.ca points to /lang02/www/fall_07/coupde/penultima2/ . The coupde folder also contains a penultima and a penultima2noindents folders, which are older versions of the same code as in penultima, now derelict.
That lang02 account also contains a www/coupdedes folder, which has older dev copies of various versions of the poem and GUIs for it.
We should move the production instance either to a new account on the university's unix box, or to the hcmc web server and then have the mallarme.uvic.ca domain name pointed at the new instance.
I took the "how to use this website" file which was a word document and
turned it into a web page (http://mallarme.uvic.ca/how_to_use.php). The
"How to use this web site" link in the footer now links to that new web
On the how_to_use page I added a video player after the text of the
instructions. The video player seems to work in all browsers except
Internet Explorer. The page (including the player) validates, so I'm not
too keen to spend a ton of time writing special code to work only with
IE. Immediately below the video player I've added a link that lets the
user go to the Youtube site and play the video there.
<!-- Here's the original code generated by Youtube, which isn't valid in XHTML 1.1 -->
<object width="640" height="480">
<param name="movie" value="http://www.youtube.com/v/X9-rpwoEjww?version=3&hl=en_US&rel=0"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/X9-rpwoEjww?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="640" height="480" allowscriptaccess="always" allowfullscreen="true"></embed>
<!-- And here's the output when the code block above is passed through http://www.tools4noobs.com/online_tools/youtube_xhtml/ which does validate -->
<object type="application/x-shockwave-flash" style="width:640px; height:480px;" data="http://www.youtube.com/v/X9-rpwoEjww?version=3">
<param name="movie" value="http://www.youtube.com/v/X9-rpwoEjww?version=3" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
Met with Annick to discuss how to mark up the poems and the various readings for each. Changes from the conventions for Coup De Des necessary because:
- more than one segment can appear on 1 line
- a segment can extend over 2 lines
- a reading can have segments not in sequential order
The second problem is the most potentially problematic, as it makes it much more difficult to write a hierarchical data structure which includes lines and line groups. We may have to include segments consisting of nothing but an empty line to capture white space between line groups
<segment id="s2">la nue accablante tu</segment>
Here's how two readings might look:
reading = new Array(); // reading
reading = new Array(); // line 1 of this reading
reading = "s1"; //id of the first segment of this line of this reading
reading = "s2"; //id of the second segment of this line of this reading
reading = new Array(); // line 2 of this reading
reading = "s3"; //id of the first segment of this line of this reading
reading = new Array();
reading = new Array();
reading = "s3";
reading = new Array();
reading = "s4";
Spent time over last couple of days creating a couple of visualizations
1) Next Node for target node's readings
Get target segment, find out all readings of which this segment is a member, get next segment (if any) for the reading, highlight current segment and each segment which is a next-segment in at least one reading. That didn't show how many readings each next-segment was a member of, so modified the code to increase saturation of highlighting colour proportional to number of readings that segment is the next-segment of.
2) All subsequent nodes for target node's readings
Get target segment, find out all readings of which this segment is a member, get all subsequent segments (if any) for the reading. Each reading highlighted in a different colour. Used css:before and css:after attribute to put an explicit "start of reading" and "end of reading" characters into page (by using js to add a class to the relevant segments). Three problems: A) Readings which skip elements (1,3,5) where some of those segments are in another reading (1,2,3,4) can't be distinguished from (1,2,3,4,5 and 1,2,3,4). B) Smaller problem (conceptually, but still a problem for UI) when one reading is a subset of another (1,2,3 and 1,2,3,4), only segment 4 appears in its colour - segments 1,2,3 appear in the colour for that reading. C) Can't visually display how many readings a given segment is a member of - though maybe that could be done in a way similar to the changing saturation solution I used above.
In general, the problem is to show:
1) remaining segments in all readings for which target segment is a member
2) which reading(s) each of those segments is a member of
3) how many readings(s) a given segment is a member of
I can't use text size, location or italics as they're features of the data. I can use underline/line-through, text colour, bg colour, border attributes, text weight, css:before and css:after based on manipulating the className attribute of the segment.
The box and stick visualization looks rather clunky, so discussed other options with Greg. We hit on the the idea of viewing the page at a low angle from the horizon, with the words standing up off the page and coming towards you. The closest word is the largest and the words on the rest of the page fade away (in size and/or colour). The interface will allow you to choose a reading and have the page go through it, or allow you to choose a node, present which nodes you can go to next and a means to allow you to choose which node you want.
Emile dropped by and seemed impressed with the ideas, but wondered how to do that while making the poem still look like what's on the printed page - I don't see any way to have one representation be simultaneously completely different and reassuringly similar, so we'll have to have some way to instantly navigate from an unconventional presentation to a conventional one.
:: Next Page >>
This project aims to allow users tools to facilitate the large number of ways of "reading" the poem Coup De Des by highlighting and suppressing selected phrases of the poem. Largely an exercise in GUI design based on fairly simple DOM and attributes.
|<< <||> >>|