Website for Amadis-in-Translation

[ebeshero]

@setriplette @HelenaSabel We need to do some large-scale thinking about the web presence of this project. Stacey, you and I have discussed this in very early stages, back when we were just pipe-dreaming this project, and I know that what we make on a public-facing website is something you want to complement your long-range work on Amadis and perhaps on translation studies more broadly.

Now, Helena and I have started extracting data and transforming it for web view, almost without thinking about the bigger picture of what we are designing for the long term. Before we go any further, I want us to discuss what kind of web presence we want for this project, so we are all clear on our goals and so we can share the stylistic decisions. It's too easy for either Helena or me to dig material out of our other web projects and run with it, without discussing it first--and before long we commit ourselves without thinking to design decisions we should have made together. So, before we do any more web work, I need you both to help me with answering some fundamental questions. I'm going to give my own sense of the answers first, but I'd like you each to add your thoughts, perhaps just by editing this Issue page here on our GitHub site, and adding your initials as I'll do here:

What are the purposes of a Website for this project?

(ebb): Short-term: We want a way to project and share information at the TEI Conference, and future conferences. Long-term: Web views should help us to see patterns and learn from our markup. We should be able to see: 1) where Southey's translation aligns with, deviates from, or alters Montalvo. 2) what kinds of changes are applied:

• from chapter to chapter, and
• across the whole of the two books (or at least the "whole" of what we've encoded so far.

We also want to provide a good digital edition and reading experience of each text, since this is especially difficult to find on the web. If I understand this correctly, we want to make the site a useful resource for students and first-time readers of Amadis--and thus our work with tracking and annotating proper names should help make it easy for readers to "jump in" at any point of interest and learn something of who the characters are and their backstory.

We might imagine people coming to read chapter by chapter, either Montalvo or Southey, or both. But those interested in our studies in translation (including our own selves, who may be the most frequent visitors of our own site) may want to jump quickly to the chapters that feature the most omissions or alterations by Southey.

How shall we design our website?

(ebb) Let's think about the hierarchy of the site. Please modify as you have ideas!

• Main index page: describes project as a whole and surveys site content.
• "Global" Table of Contents (TOC) page: to show the intro and chapter contents of Montalvo and those of Southey side by side, and how they align with each other (See Helena's book skeleton post). Montalvo sits on the left and Southey on the right. This page links to the chapter views. Perhaps it also contains small "summary" visualizations to help highlight which chapters feature the most extreme alterations of Southey(?) I imagine these could be perhaps plotted as narrow horizontal bars, color coded (with a legend) according to our color scheme for omissions, additions, (other things?). Perhaps we could position 1 to 3 small horizontal color-coded bars to sit directly beneath each chapter title of Southey? Here's a not-so-great example of small horizontal bar plots, perhaps enough for an idea. Basically, my idea is to put a clear signal on the TOC page of which chapters feature the biggest alterations or the Most Interesting Stuff we want to be studying.
• Consistent and unobtrusive navigation menu bar across all pages. Horizontal, because we do a lot of side-to-side work on internal pages? What goes on the menu bar? Note: We can make this in its own separate file to call (as a "server-side include") across our pages, so we can keep modifying it easily just in one place as we develop our site.
• Detailed page(s) on Editorial Methods. With this, our Punctuation list with images.
• Site Index --pull info from this as needed, as referenced in mouse-over pop-up boxes throughout site, but also feature and present as its own page? Note: we may (eventually?) want to look for small image files to complement site index entries...
• Montalvo-Southey side-by-side reading views. Anchor start points in Southey to be illuminated with small (unobtrusive) ornament marks. On click of an anchor ornament, the corresponding Montalvo passage aligns on the left. On scroll of Montalvo, or similar on click of ornaments, corresponding alignment point in Southey on right?
• Table pages to analyze translation changes: sortable based on __? (discuss...) Where do these sit in relation to the reading views and the main project site? Should we be able to enter a table page for a particular chapter from the side-by-side reading view of that chapter, and vice versa?

--We may want chapter by chapter table pages, as well as a "global" table--a table or chart that lets us see at a glance a chapter-by-chapter summary of our major findings. And we may not be ready to make that yet.

Color Scheme and Fonts!

Give me some leads here: background colors, font color, font type. Colors for dividers and such. What colors and font are appropriate to Amadis?

[HelenaSabel]

Sorry! I only have a few seconds to answer, so I only want to make a quick comment about the color schemes. Would it be easier to look first for the images we want to insert in the site and then generate a color palette out of it so it matches? If we are going to depend on the printed drawings of Amadis, maybe a black and white site can be fitting (because black and white doesn't mean boring). There is also the image from one of the facsimiles that has the title in red and the background pale-pink orangeish: maybe red could also be the color of our main headings and the we look for other fitting colors. So anyway, my proposal is to talk about the images before talking about the color schemes. More later about the many other visualization issues!

[ebeshero]

@HelenaSabel Yes, I agree that we should generate a color palette from images--it's a good strategy. @setriplette Want to point us to some good images?

[setriplette]

Hi all!

For menu buttons, I imagine “about”, something like “visualizations” or “statistics,” Southey by chapter, Amadís by chapter, and comparisons by chapter (or some sort of comparison generator tool). Bibliography might also be helpful to build, since it could support other scholars. Once we start having our own essays published on this topic, we will likely be able to link or post them on the site, and we should do that prominently.

As for color palette, there aren’t any illuminated Amadises, so that’s out. The most beautiful ones are the 1533 Venice and the 1540 Paris—lots of woodcuts, no color. We can incorporate some of these images into our design, though.

This genre DOES have a medieval history in Spain and one very beautiful illuminated manuscript. I like the rich color palette of the Libro del caballero Zifar.

I especially love the red, blue, parchment color, and brown you get from the image of the page with the large initial letter. We don’t have to invest in the full rainbow as the illustrations do!

It’s very exciting to think about the web page.

S

[cid:90C4D34C-E053-40CB-8061-90AE67D33C4B@lan]

[cid:BAE1BDB2-3576-4056-AF9A-9371499FB8FD@lan]

— Stacey Triplette Assistant Professor of Spanish and French Humanities Division University of Pittsburgh at Greensburg Faculty Office Building 200 150 Finoli Drive Greensburg, PA 15601

On Oct 11, 2015, at 12:01 AM, Elisa Beshero-Bondar notifications@github.com<mailto:notifications@github.com> wrote:

@HelenaSabelhttps://github.com/HelenaSabel Yes, I agree that we should generate a color palette from images--it's a good strategy. @setriplettehttps://github.com/setriplette Want to point us to some good images?

— Reply to this email directly or view it on GitHubhttps://github.com/ebeshero/Amadis-in-Translation/issues/27#issuecomment-147128968.

[ebeshero]

@setriplette I think your links didn't make it. Is this the page you're talking about? (Looks like it's got the colors...) https://commons.wikimedia.org/wiki/File:Libro_del_caballero_Zifar,_f32r.JPG

[setriplette]

Yes, that’s it exactly!

My internet doesn’t upload quickly, so I’m not surprised.

S

— Stacey Triplette Assistant Professor of Spanish and French Humanities Division University of Pittsburgh at Greensburg Faculty Office Building 200 150 Finoli Drive Greensburg, PA 15601

On Oct 11, 2015, at 4:02 PM, Elisa Beshero-Bondar notifications@github.com<mailto:notifications@github.com> wrote:

@setriplettehttps://github.com/setriplette I think your links didn't make it. Is this the page you're talking about? (Looks like it's got the colors...) https://commons.wikimedia.org/wiki/File:Libro_del_caballero_Zifar,_f32r.JPG

— Reply to this email directly or view it on GitHubhttps://github.com/ebeshero/Amadis-in-Translation/issues/27#issuecomment-147197226.

[ebeshero]

I'm liking this color palette generator. Good range of colors and CSS codes when I run our picture above through it!

[ebeshero]

@setriplette @HelenaSabel Here's a splash page for our website: http://newtfire.org/amadis/ What do you think of this style? You can edit the CSS here on our GitHub--it's in the html folder (amadis.css), and look at it locally on index.xhtml saved in the same folder.

It's just a start! I sort of cobbled together the menu items both from our earlier conversation and a sense of what we're building with the table of contents (which we're thinking could contain graphs as small visual summaries, plus more detailed views with the tables underway, and presentation of the texts...

[ebeshero]

@HelenaSabel I knew this before but forgot! I discovered that NewtFire doesn't let server side includes run on files with extensions with .xhtml. The file can be coded as XHTML and nothing really has to change about it, but we just need to use .html extensions. I renamed the files in our HTML directory in the likely case that we'll be using them on the site in some form and might want an SSI to run on them.

[ebeshero]

@HelenaSabel Okay, here's something more on doctype declarations and such as we work on building pages. When running XSLT and XQuery to generate HTML, here's how I'm setting the xsl:stylesheet and output statement for my project sites:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema" xpath-default-namespace="http://www.tei-c.org/ns/1.0" xmlns:math="http://www.w3.org/2005/xpath-functions/math" exclude-result-prefixes="xs math" xmlns="http://www.w3.org/1999/xhtml" version="3.0">

<xsl:output method="xhtml" encoding="utf-8" doctype-system="about:legacy-compat" omit-xml-declaration="yes"/>

This is different from what David uses on Obdurodon, since he sets the output method to "xml" because he wants to keep the XML declaration to validate his XHTML as XML. I opted the other way when I was dealing with white-space control issues in transforming letters and headnotes on the Digital Mitford project. I discovered that if I set the output method to xml, it was actually generating white space issues in browsers (on mouse-over of a text tagged with <span class="whatever">...</span> and styled with an underline, on mouseover, the underline would stretch--and that had nothing to do with JavaScript and everything to do with a browser dealing inconsistently with white space(!) So you can use the output method="xml" but to control the white space problem I had to set indent="no"--which meant my output HTML was a wall of code with no spaces, and really not human readable to anyone who'd want to view the page source. So (after consultation and experimentation), I chose this output method with xhtml as best for my projects. To use it, though, I have to omit the xml declaration at the top of the page, and that's fine with me. I'm outputting html in the xml syntax, and I'm generating XHTML 5 that checks with the w3c validator. Anyway, we should probably be outputting the same kind of HTML, so...there's the current form I'm running for NewtFire!

[setriplette]

Hi Elisa,

I like this for a start!

Some thoughts:

In my book I use Amadís de Gaula when I mean the general phenomenon, with the accent mark, even though as you can see in the 1547 printing the accent wasn’t in there yet.

I don’t expect most of our readers to know historical orthography; I didn’t until I started working so closely with the 1547. I think we can use Southey’s title, Amadis of Gaul, or modern Spanish Amadís de Gaula, or the French Amadis de Gaule, but not Amadis de Gaula without looking like we’re not familiar with Spanish. I just confirmed with a web search that when people spell Gaula with an a at the end, it’s always Amadís with accent. We’ve added accents in the transcriptions to show people how to pronounce, so we’ll just do the same with the title—otherwise his name in Spanish would be A-MAH-dis instead of A-ma-DIS, which would sound weird.

The other thing I wonder is whether the bullet points in green could be a menu bar at the top, and the image could be wrapped, so that the web page is less wide. I’m always looking at things in narrow windows with my small devices.

S

— Stacey Triplette Assistant Professor of Spanish and French Humanities Division University of Pittsburgh at Greensburg Faculty Office Building 200 150 Finoli Drive Greensburg, PA 15601

On Oct 20, 2015, at 5:53 AM, spadafour notifications@github.com<mailto:notifications@github.com> wrote:

@setriplettehttps://github.com/setriplette @HelenaSabelhttps://github.com/HelenaSabel Here's a splash page for our website: http://newtfire.org/amadis/ What do you think of this style? You can edit the CSS here on our GitHub--it's in the html folder (amadis.css), and look at it locally on index.xhtml saved in the same folder.

It's just a start! I sort of cobbled together the menu items both from our earlier conversation and a sense of what we're building with the table of contents (which we're thinking could contain graphs as small visual summaries, plus more detailed views with the tables underway, and presentation of the texts...

— Reply to this email directly or view it on GitHubhttps://github.com/ebeshero/Amadis-in-Translation/issues/27#issuecomment-149424576.

[setriplette]

Clarification on accent:

Helena, please weigh in on this, but I think Amadis in Translation is fine (Amadís in Translation would also be fine); any time we say “Spanish” or “Gaula” or “Montalvo” or “Castilla” etc it needs the accent.

We have to pick a name for the general phenomenon, and I think as long as we explain it somewhere in the site, we can justify Amadis in Translation or Amadís in Translation. I don’t know whether the accent mark will make us less searchable for non-Spanish speakers, or the lack of accent mark would make us harder to find because it’s the less-known version of the name. I would want Google to be able to pick us up if someone searched for either Amadís or Amadis.

S — Stacey Triplette Assistant Professor of Spanish and French Humanities Division University of Pittsburgh at Greensburg Faculty Office Building 200 150 Finoli Drive Greensburg, PA 15601

On Oct 20, 2015, at 5:53 AM, spadafour notifications@github.com<mailto:notifications@github.com> wrote:

@setriplettehttps://github.com/setriplette @HelenaSabelhttps://github.com/HelenaSabel Here's a splash page for our website: http://newtfire.org/amadis/ What do you think of this style? You can edit the CSS here on our GitHub--it's in the html folder (amadis.css), and look at it locally on index.xhtml saved in the same folder.

It's just a start! I sort of cobbled together the menu items both from our earlier conversation and a sense of what we're building with the table of contents (which we're thinking could contain graphs as small visual summaries, plus more detailed views with the tables underway, and presentation of the texts...

— Reply to this email directly or view it on GitHubhttps://github.com/ebeshero/Amadis-in-Translation/issues/27#issuecomment-149424576.

[HelenaSabel]

This is very exciting! Lovely work, Elisa. I'll change my XSLT accordingly (even if it's very doubtful that we'll want to upload those files). About the accent discussion, I prefer “Amadis in translation” for the project title and then, as @setriplette points out, every time we are talking about the Spanish/Castilian version, we should write "Amadís" (by the way, "Amadis de Gaula", with no accent, is the Portuguese spelling). Thank you, @setriplette, for reminding us of making our site searchable. I'm going to open an issue now for adding keywords in the metadata section of our HTML files, because that's the information search engines first look for. We can list over there all the keywords we want to add.

[ebeshero]

@setriplette @HelenaSabel Thanks for explaining the use of the accent mark! I'll update as you've decided here, and also will switch over to a horizontal menu, or at least move it over to the left. I've got some spacing stuff to adjust in the CSS. Updates coming later today or tomorrow while I am finishing a grading marathon!

[ebeshero]

@HelenaSabel if you want to play with restyling your pages, use my CSS, and also generate the color palette from the page I linked earlier...using the Libro del Cavallero image I mentioned earlier--in our HTML folder on this GitHub.

[HelenaSabel]

Helistaceas, I did some new charts for the site (charts.html in the html folder). Is there anything I should add/delete? Since we only have three chapters, I thought it was more efficient to have one page containing all of them, but maybe it'd be better to have one per chapter from the very beginning. In the word rate, I color-coded whenever Southey did a compression higher than 70%, and also all the expansions (since they are less common, I thought it would be interesting to locate those as easy as possible).

[ebeshero]

@HelenaSabel @setriplette I just quickly updated the CSS and index page for the website so it's a horizontal menu across the top. It kind of looks like the Mitford project now--but we can change that if we want to. Go here and hit "refresh" on your browser: http://newtfire.org/amadis/ Does that work better on a small screen / mobile device?

I nearly linked the toc.html page, but I want to wait and if we like this design, I'll make an SSI for it and we can make a standard header line for our pages.

[ebeshero]

@HelenaSabel @setriplette Ahh--I've got a familiar old CSS problem: when you shrink the screen, the image overlaps the text. I solved it on the Mitford project, but I need something more to solve it here. No time to look it up now...on my way to class. Feel free to repair it! ;-)

[HelenaSabel]

About the toc.html is better to wait, specially because I didn't realise that I chose the same color you did for the menu, so I think I'm going to change the graphs. Did you have time to see the charts? If we are going to keep all the chapters in the same page, I'd like to add a moving side bar so you can jump from one to the other easily. I didn't do it before because you might prefer one page per chapter.

[HelenaSabel]

Fixed the overlapping problem by adding overflow:hidden to the image. However, there was a more elegant way to do it by using flexboxes (you know I love those) and making the image shrink according to the proportion you want ;-)

[HelenaSabel]

@ebeshero may I make a CSS suggestion? It might be a quirk of my browser (Firefox for Ubuntu) but I have a horizontal scroll due to giving a width:100% property to body and div#menu. I've tried commenting those off locally and didn't see any additional problems, but since browser compatibility doesn't work as it should, I didn't dare doing it for real.

[ebeshero]

@setriplette WEBSITE UPDATE! I've moved our site address to: http://amadis.newtfire.org/ And please to notice, ye Helistaceans, the nifty favicon on your browser tabs!

That involved filing it in a new directory location, so I'm now deleting the old one-- newtfire.org/amadis will no longer work from now on.

@HelenaSabel They're commented out in my current CSS after I synced, so you must have saved and pushed it through. I don't see any problems with it here, besides my needing to look into the flex box stuff which is still throwing an error in oXygen and now ALSO the w3c validator, for slightly different reasons: Here's the w3c validator report on amadis.css

If that doesn't work, here's the text of the validation error message: Property -webkit-flex is an unknown vendor extension

[HelenaSabel]

The favicon is awesome! Sorry! I didn't mean to push that but I'm happy that it didn't do any harm. About flexboxes and oXygen, the only solution is to tell oXygen to not consider them a mistake, so I add all properties to the CSS validator option: display, align-items, align-self, justify-content, flex-wrap, flex-shrink, flex-grow, flex-direction, order (I hope I didn't miss any so you can just copy and paste the list, if you want) When I first began with flexboxes they were already supported in all browsers and I remember reading that you needed to add the -webkit- prefix for Safari. So you type -webkit-align-items:flex-start because that's a new property, but display:-webkit-flex (because display is a common property and it's the flex value the one that needs the prefix). So I'm surprised about the error message...

[HelenaSabel]

I changed the display: -webkit-flex for display:-webkit-box as suggested here: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html

[ebeshero]

Nope--w3c doesn't like -webkit on flex, but it's fine with simply display:flex;

So I'm keeping that and commenting out the webkit prefix, which is apparently deprecated now. Let me know if this causes display problems. It shouldn't. See http://caniuse.com/#search=flex

I'm going to file a bug report with oXygen so they don't flag this as wrong.

[ebeshero]

Now we're good with the w3C: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Famadis.newtfire.org%2Famadis.css

[ebeshero]

@HelenaSabel Good news! With today's new release of <oXygen/>, the CSS for display:flex; is green and valid. Huzzah! (No need for bug reports or to reset anything in oXygen--yay). I am probably overly obsessed with w3c validation lately...but it's nice to be recognized to be in the right by oXygen now.

[setriplette]

Hi all,

Elisa, I’m really liking the website. I’ll bookmark the new address. And you are quite right that I need a bit of help on the visualizations—fortunately I’ll see you on Saturday! Thank you both for the flurry of work. It’s very exciting! (even when beyond my current level of computer literacy)

S — Stacey Triplette Assistant Professor of Spanish and French Humanities Division University of Pittsburgh at Greensburg Faculty Office Building 200 150 Finoli Drive Greensburg, PA 15601

On Oct 22, 2015, at 3:24 AM, Elisa Beshero-Bondar notifications@github.com<mailto:notifications@github.com> wrote:

@HelenaSabelhttps://github.com/HelenaSabel Good news! With today's new release of , the CSS for display:flex; is green and valid. Huzzah! (No need for bug reports or to reset anything in oXygen--yay).

— Reply to this email directly or view it on GitHubhttps://github.com/ebeshero/Amadis-in-Translation/issues/27#issuecomment-150070895.

[HelenaSabel]

Hello! Since @setriplette did all the stitchery for a new chapter, I ran again the transformations to add it. I'll proofread chapter 22 today. Anyway, I thought the volume of data was now too big for having the charts in only one file, so I did an HTML file for each chapter with a table of contents that allows you to jump from chapter to chapter. If there is anything you would like to change, you only have to say so ;-) I do have a question for you about the main table of contents (that is toc2.html): I used the <head> of the chapters, but Montalvo's edition is not very consistent and now we have an abbreviation for "capítulo". Do you prefer a regularized version? I kind of like "Comiença la obra" for chapter 0, but I think the following ones should be "Capítulo ...". Also, the Southey ones might look better without the dot, right?

[ebeshero]

Agreed--and it looks like we've implemented these changes on the site! We're now working with toc.html and I think toc2.html isn't in our repository anymore, so I think we've decided this one(?) @HelenaSabel

[HelenaSabel]

Yes, I think we made some decisions in a different issue, and when I sorted out a little bit the repository, I changed some file names. I guess one of the following steps to take is the implementation of the reading views, so we'll need to change the table of contents to include the new information once is ready.

[ebeshero]

Right--and we need to work out the navigation on internal pages--I hope to work on both of these a bit over the next few weeks in between semesters!

[ebeshero]

Flexible menus and suchlike (for future reference): http://www.w3schools.com/css/css_rwd_viewport.asp

and https://github.com/SDavis-Pitt/GoTDH/issues/22#issuecomment-196459562 (Thanks, @HelenaSabel --snagged from the Musicality issues board) ;-)