search

lmcneil7 / teen-titans

project for digital humanities spring 2020 (a continuation from fall 2019 DH course)
2 stars 0 forks source link

Meeting Recap! #14

Closed smdunn921 closed 4 years ago

smdunn921 commented 4 years ago

(Including with this a picture of the board.)

IMG_6538 (1)

ebeshero commented 4 years ago

@smdunn921 and @lmcneil7 How's it coming along? Let me know when you're ready with some code for us to tinker with that display window. (I see lots of commits today--but let me know when you're ready for us to play with your code!)

smdunn921 commented 4 years ago

@ebeshero okay so i pushed xslt and outputs of episode 3 and issue 6 and made an XSLT folder on here for easy finding. i watched the flexbox video and looked through the other walkthrough you linked but haven't gotten to actually doing it yet because i'm not sure how to get both of the files to display on one screen? Also i looked at the picture from the board again and wanted to ask what the tag is for?

@lmcneil7 we'll probably want to add span/class to the parts of both the comics and episodes you want to highlight that have the similarities between them.

ebeshero commented 4 years ago

@smdunn921 So, the idea here is to place the contents of the episode in one <div> and the contents of the issues it's associated with in the other <div>. That means making one HTML file to hold the whole thing, and just pasting in the body content into each div element so they can sit side by side.

<xsl:result-document> is a little bit advanced (we haven't shown you this in class), but it's not too hard to work with. If we're doing an <xsl:for-each> over each episode XML file in your collection, we can output one whole HTML document for each episode XML file, instead of making one giant HTML file that holds all the episodes. I want to show you how to set that up, so I'll push some code this evening!

ebeshero commented 4 years ago

@smdunn921 I've just pulled in your code: nice work on prepping the issues and episodes! I think I can explain how to put them in one file with a code block here. 

<html>
   <head> <!--head stuff with link to CSS and script for JS --></head>
   <body>
    <!--site menu code and other stuff for the top of your page  -->
      <section><!--this is a "wrapper" for the two div elements we'll set side-by-side. -->
         <div id="episode">
                 <!--plug in all the code that represents the episode here. 
That would be the contents of your <body> element in your current ep3-output.html for example. - -->
         </div>        
         <div id="issue">
                 <!--plug in all the code that represents the associated issue(s) here. 
That would be the contents of your <body> element in your current issue6-output.html if this is meant to match up with episode 3. - -->
         </div>
     <section>
<!--any code you want for the bottom of the page.  -->
  </body>
</html>

For CSS flexboxes to work with this, you'd set a display:flex; on the <section> element that wraps around the two <div> elements. Does this make sense?

smdunn921 commented 4 years ago

@ebeshero okay i''ve just pushed up what i've done so far for putting episode 3 with issue 6

ebeshero commented 4 years ago

@smdunn921 I just pulled it in, and it looks good! I wonder if you want the episode to take up proportionally more of the screen than the metadata from the issues... Meanwhile, I'm setting up the XSLT that should help generate these episode-issue pages...more in a bit!

ebeshero commented 4 years ago

@smdunn921 I'm looking at the output HTML code in oXygen and noticing lots of errors to do with <span> elements wrapping around <p> elements. That's not allowed in HTML (spans are supposed to be an "inline" element, inside paragraphs). So instead, I'd suggest using <div> or <section> elements for Acts. I'm changing that in the XSLT for episodes that I'm building out of yours: for now to <div class="act">.

ebeshero commented 4 years ago

@smdunn921 One more correction: HTML is silly and doesn't allow @n attributes the way we like to use them to number things like acts in XML. If you want to output the act numbering (from zero on for prologue, etc), I'd recommend putting it in an @id attribute on your <h2> elements, like this:

<div class="act" id="A1">

         <h2 id="n1">Act 1</h2>
....

</div>

In HTML, @id attributes are supposed to contain a letter and a number. You could then make the <h2> elements be the targets of links from the top of the page if you like, just like we did on the Emily Dickinson collection.

ebeshero commented 4 years ago

@smdunn921 I made these repairs in the XSLT I'm writing--it was pretty easy to do. I used your XPath that you applied to make your links and ids on the acts, and just moved them to the h2s. And I put each act in a div with class="act".

lmcneil7 commented 4 years ago

Okay, @ebeshero, don't hate me too much. As I was adding the issueList element to the episodes, I realized that I switched episode 3 and episode 6 in my head. Instead of issue 6 connected to episode 3, it's connected to episode 6.

ebeshero commented 4 years ago

@lmcneil7 No worries! Just push up your code and I'll pull it in and run it! I think I've got the XLST to process episodes with issues ready now--and you'll just need to re-run the XSLT every time you make an update like that.

ebeshero commented 4 years ago

@lmcneil7 So, just repair the XML the way it's supposed to be and push it up--let me know when you've fixed it there and I can pull it in. I'll run my XSLT here and post some HTML output to match. And then I'll pass it on to you and @smdunn921 to keep tinkering!

lmcneil7 commented 4 years ago

I fixed it already, so the files are already up of the corrected way.

ebeshero commented 4 years ago

@lmcneil7 Okay! I've pushed HTML to match it--so you can pull that in! :-) @smdunn921 I've got the XSLT ready that processes episodes together with matching issue files. And I think I've even got it matching your CSS. Make sure the elements all line up and are behaving as you expect in the styling. I changed some spans (around acts) into <div> elements, and I moved around the @id attributes (see above), but I think everything matches up.

Both of you: Try opening locally in your web browser the files in the web/html/episode-issue directory that I created. Those are each of your episode HTML files output with corresponding issue information. Note a couple of things I did, using <xsl:choose>:

We may want to make it so you can follow a link at the bottom to the next episode in the sequence... That may be a little tricky, but since they are all numbered, we should be able to make a link that points to the very next one based on the number in its filename...

ebeshero commented 4 years ago

@lmcneil7 @smdunn921 I've just pushed another commit ( https://github.com/lmcneil7/teen-titans/commit/419ae65372c92baeed5ef6b49049cac8bd778063 ) where I added the TV episode numbers explicitly on the HTML page, and also made links to the previous and next episode page (if applicable). Check it out!

And I have a question: Do you have issues marked up without any matching TV episode? If so, do you want to make a special area of the website to archive your metadata about those?

ebeshero commented 4 years ago

@smdunn921 @lmcneil7 Here's the XSLT I worked on last night: https://github.com/lmcneil7/teen-titans/blob/master/XSLT/episode-and-issues-to-HTML.xsl

It's a little complicated, so I'll walk you through it when I next see you. But basically it takes two of @smdunn921 's XSLTs and fits them together so they output an HTML file containing one episode with your data on its corresponding comic issues. Some of the element names got changed a little to make sure it's producing valid HTML, and the @id's to @hrefs for internal links changed a little, too but I think it's all working with your CSS.

smdunn921 commented 4 years ago

Pushed the new outputs because I ran the XSLT over the finished comic xml files so those are up. Fixed the one part on CSS so the text is all white. @ebeshero Only thing is that the charsPresent isn't out in a list so do we wanna put a rule in to output those into a list? Or should I go through manually doing it?

@lmcneil7 did you start on tagging similarities between them? We can write javascript to highlight them or something. Also did you wanna meet to go over the license thing? We can also take some time later if there is time to spare and put some more stuff in the about page.

ebeshero commented 4 years ago

@smdunn921 Yes, you may want to edit that XSLT to make sure that charsPresent is coming out as you wish. We'll need to do a little careful reading to figure out where to add it. Is this for the comic issues (right side of the page), or for the TV episode side?

ebeshero commented 4 years ago

@smdunn921 On that XSLT I did a little more modal magic (as in, I added a couple more modes) to deal with the comics issues, so those elements would be treated differently. I didn't use them on everything, but only where I saw an element needed to be handled differently in the comic issues vs. the episodes.

smdunn921 commented 4 years ago

@ebeshero it's for the comic issues side. There's a few names at the end of the summaries of what's happening in each setting which in the XML are char tags wrapped in a charsPresent tag

ebeshero commented 4 years ago

@smdunn921 I can't remember if there's a template rule for that. The way to find out is to do a "Find" and search for match="charsPresent" in the XSLT file. Do you see a rule?

smdunn921 commented 4 years ago

@ebeshero Looks like there is not one in place

ebeshero commented 4 years ago

@smdunn921 okay! You should just make one, then, and it won't need a mode, since it's only being handled in one way. Check the output to make sure it's valid HTML.

smdunn921 commented 4 years ago

@ebeshero okay sorry it took so long to push and get back but I fixed that so now the issue (which I don't know if you fixed it and then I messed up again in the process of doing this) is the internal links with id and hrefs on the outputs that have multiple comics

ebeshero commented 4 years ago

@smdunn921 So, what I did was, I made the id’s and hrefs on the comics issues come out with an ‘s’ prefix for setting, instead of an ‘a’ prefix which you were using for acts in the TV episode. That prevented duplicate ids on the html page. Is that the issue?

smdunn921 commented 4 years ago

@ebeshero the issue has to do with that, yes-- on the pages where there are multiple comic issues, they all still have the a prefix, which makes duplicates of the s ones. So, for example, since episode 4 pairs with 2 issues, the links in both of the Settings toc only go to the corresponding settings in the first issue, since the second issue linked has the same id names.

ebeshero commented 4 years ago

@smdunn921 Ooooh! oops. I had not checked each of the pages and didn't notice that issue. So we need a strategy for generating id's for all the settings that is a little more complicated than just an s prefix. What can we do? Can we take some distinct property of the <setting> element and plug them into the ids? Or...maybe I had better take a closer look at the XSLT to make sure I understand how this is really working.

Can you point me to a bad output file, and to the current state of the XSLT?

smdunn921 commented 4 years ago

@ebeshero the first one i noticed it in was the episode-4.html output. Looking at what lauren marked up in the actual issue xml files, i dont think there is anything that has no overlap with others, unless we want to somehow incorporate the issue number into each of the id links to make it more distinct, if that's something possible-- like S361 for the first setting in issue 36? You can look around and see if you find anything that works better, though. I've pushed everything I've done thus far and like I said, the output episode-4.html is the one I had been looking at.

ebeshero commented 4 years ago

I like that idea of yours: to output the issue number in each of the @ids and corresponding @hrefs. Can you see your way how to do it? (I have your XSLT open now and can give it a try here...)

ebeshero commented 4 years ago

@smdunn921 I think I figured out how to do it...I'm testing it here, and will push if it works!

ebeshero commented 4 years ago

@smdunn921 I just pushed a repair to the XSLT file and fresh output of your HTML. Take a look: I think this resolves that issue with the setting ids...Here's the commit so you can click to see what changed in the files: https://github.com/lmcneil7/teen-titans/commit/30bece5eec3fb20bac287f8904dd14008e349ec5

smdunn921 commented 4 years ago

@ebeshero That looks like it did it! Thank you!

smdunn921 commented 4 years ago

Hey so I know it's 4:40am but I fell asleep for a little then woke up to actually get the texts up on the site. I put them under the Texts link and just linked episode 1 to that, since there's those handy dandy previous and next episode links (which are beautiful thank you Dr. B) but the SSI is ugly with it and I wanted to get opinions and ideas for how to make it not look the worst @ebeshero @alnopa9

ebeshero commented 4 years ago

@smdunn921 Good morning! I think we'll want to change that SSI for those pages, and maybe the archive portion of the site (your collection of texts) should have a special menu anyway (and maybe it doesn't need to be the SSI that's in use on the other pages). I can see putting the navigation arrows for previous and next episode in a site menu that's just static (doesn't need to float), and sits at the top and at the bottom of the page. And maybe the footer just has some extra content like your Creative Commons license, etc. What do you think?

Also, how about those beautiful sorted SVG graphs? Where will they live on the site?

ebeshero commented 4 years ago

@smdunn921 Another thing to consider is simply not making the SSI float down the page. You still might want to give your visitors some way to navigate when they're reading around the bottom of these long pages, though.

I generated those previous and next issue links with XSLT and they're of course different on every page in the collection, so we can't really put that the SSI. That's why I was thinking you might just output the menu information (complete with arrows) in the XSLT for these pages (and don't use an SSI there since the navigation is what we call "context dependent").

smdunn921 commented 4 years ago

@ebeshero I don't know if this will make it to you before midnight, but I have one last problem I'm trying to troubleshoot: the SSI bar shows with it's black background in the index.html page, but over in the about page, it is see through and I don't know why that is or how to fix it.

update: so it shows up black over pictures, which means that it's just the text that shows through the background

update again: i got it. i'd put a position rule on one of the div or section elements in the css that made it be like that. so sorry if you get a last minute push it was mega bugging me