METHODOLOGY

Part 1: The Teen Titans Fandom

First of all, we love Teen Titans with our entire heart and this idea came from that love. When the project was introduced, I wanted to focus on something that I could work on from hours which lead me to Teen Titans. Shannon decided to join me on this Teen Titans' ride for that exact reason as well. One of the main reasons we wanted to work on Teen Titans was to be able to learn more about Teen Titans, but also be able to nerd out about a tv series we really enjoy. Now, my original plan with this idea was getting a better image of where Teen Titans orginated from, that being the comics. As common for superheroes, there have been many versions of Teen Titans, so I didn't read the comics expected a verbatim of everything the series did; however, even keeping the mind, I was pleasantly surprised.

Part 2: Coding Method

Fall Semester

Basically, we started by marking up all of the tv episodes, which were luckily provided to us on the Teen Titans Episode Wiki. We tagged characters, stage directions, character descriptons, and a couple of other things which you can find if you look at the XML folder on our Github page. We wanted to do more with being able to use Javascript and make some things changeable, but due to time restrictions, all we were able to give you right now is that you can click to highlight the characters names when they speak on the "Episode" side of the Texts page.

For the Comic Issues, Lauren went through and read the comics, putting the metadata into an XML file, including the settings of each scene, the characters in each scene, and a synopsis of what happens. If we had more time, the plan was to tag differences so that we could use Javascript to highlight the differences between the issues and the episodes, but I suppose one can dream; it might get done one day.

After we had all of the texts marked up, our lovely professor, Dr. Elisa Beshero-Bondar helped us make some XSLT that would provide the desired outcome of XML to HTML files, for which we are ever so grateful. The XSLT pulled from the separate collections of XML files for the tv and comic book and output html files to combine the tv episodes and corresponding comic issues. This was mega cool because she used a tag that would output separate html files instead of producing one whole big file of them all. We had to tinker with this a little bit, because on pages of episodes that were associated with multiple issues, the link for jumping down the page to a certain setting on an issue originally was just id tagged as s1, s2, s3, etc. for the settings that there were. The issue with this is that if there are multiple s1 id tags, one will override the other and they will never both work. To fix this, we changed the setting id tags to include the issue numbers, because there will never be any overlap on setting one of issue 18, or any other given issue.

Between all of this, we were on and off working on the actual website design aspect. We definitely wanted to go with a dark background, because it only seems right to give a project such as this a dark background. That way, we can use bright colors and they will stand out more. It was especially fun getting to learn about flexboxes and how they work on a page. There was quite a bit of back and forth trying to get things just right, but that's half the fun. As stated before, I wish we were able to put up the comparisons in the texts to be able to highlight them, because that would have looked super cool. Another enjoyable, albeit easy, thing was learning how to change link colors. As you've noticed, the link colors are different when they haven't been clicked, when they're hovered over, and when they have been clicked. I spent at least 30 minutes trying to pick good colors to use for them, and I'm pretty happy with the outcome.

Making the SVG graphs, which you can view on the SVG page, as well as the Season 1 and Season 2 episode pages, was something of a challenge as well. I again have to thank our lovely professor for helping to create a good XSLT that would output usable graphs. I manually went in and took out the characters who spoke less thant 5 times, just because they made the charts unbearably long and it's unnecessary to see whether or not a character who appears one time in the prologue spoke at all. You can again go to our analysis page to learn more about our findings with these and just the general overview comparison.

Spring Semester

Since both Shannon and I decided to come back for Spring, we discussed doing another semester of Teen Titans; spoiler alert, we did. Unlike the first semester, when I presented Teen Titans as a project proposal, I had no idea what we were going to do, so I tried to picture it from another perspective. I did make another project proposal for Adventure Time, which you can find here that ended up being the direction we went in with Teen Titans. I also wanted to incorporate some of the ideas we got from comments on Presentation which lead to a final goal being a map of Jump City and mapping the routes of the five Titans.

Like last semester, we started with marking all the episodes in Season Two. We did end up changing the XML but started with the same tags such as head, characterList, body, char, spkr, sp, etc. We took out the tags that the main purpose was for comparison and started with simple formatting the scripts. Since I knew I wanted to do mapping of Jump City, I created a tag called setNote that's purpose was for any information around the setting like "across the street from ___" or "in front of the pizza store." There's not much setting information because Teen Titans wasn't worried about the location so that we would deal with that fact later on. I made a location tag in the body tag to make a similar list like characterList but instead locationList. At first, we started with believing we didn't need the sd tags, but went back and used it for format. Lastly, the most important tag action. Action was a tag I created to track the characters' movements. It would go in front of the Titan's name in one of the stage directions, and we would give them an action tag for whenever they moved. The action tag had four attributes: mrkr, with, move, place. You can check out the finish product on our GitHub in the season-2 folder in the tv folder in XML. While I didn't keep a file of all the changes and modifications that the schema went through, I would suggest checking it out to understand the markup better: Schema Here

While we didn't do anything with the comics like last season, I tried my hand at Comic Book Markup Language(CBML). It's pretty different from the metadata we used for last semester, as it's more of a transcript of the comic. I only did it for season 2 and probably won't do it for the first season. The second season is based on the Judas Contract, but there's the development of Terra in the issues I did last semester.

As we were finishing up the episode markup, it became time to deal with how we were going to make the map for Jump City. Going off my basic knowledge, I looked into Google Maps, which has a function where you could make your map by taking an actual place in the world and getting to use it as a template, putting your labels and such on it. It seemed adequate for what we needed it for, and our advisor, Fiona, told us about KML, which also uses Google Maps. I ended taking it off the options because I was trying to avoid using San Francisco, a place in which Jump City is supposedly based off out. After doing some more research for like island generators, Fiona told us about QGIS. It's similar to KML, but it has a layering effect and more in-depth maps, so I thought this was the better option. The main reason I chose QGIS at first was to make an interactive map where you could click on certain locations and link to the scripts that refer to that location. We could look into that as a future idea, but I ended up going for a different idea with the map. Now, originally, I believed that KML wouldn't be ideal because I didn't want to do San Francisco, but realistically, we could have done that too.

I did think it might have been a better idea to pick a random island or city and use it in for the base of the map, but I went with San Francisco, and I am glad of that decision. With San Francisco, we chose places based on the location name, for example, a pizza place. We went through pizza places in San Francisco and chose the pizza place using the setNotes. Using the pizza place example, one of the requirements of the pizza place had to be across or near a park. This helped to choose and make a semi-accurate map of Jump City if it was based in San Francisco as theorized. It also made the mapping part more fun.

Lastly, we needed to visualize the routes of the characters somehow. My initial thought was using SVG to create a line graph and layering it over the map. I don't remember the reason Fiona said that probably wasn't going to work, but then she proposed the idea of animation. We decided to go with animations; we went through the episodes and added a timestamp attribute to each action tag. We wanted to make an animation that went from episode 1 to episode 13, so we went through together to do them. While it doesn't have any important, I chose January 4th on the timestamps because it's when the first episode of the second season aired. One of the problems I ran into when creating the map was someone visualizing when multiple titans show up in one place.

Shannon did SVG for this season through the same way she did with for the first season. Since we didn't have any comics that needed to compare, she added the graphs on the episode HTML pages. It leads to her wanting to move the graphs from season 1 to the episode side of the comparison pages, so she went through and made those changes. She also made two large graphs comparing who spoke the most out of all of their speeches being added together. The first season Cyborg spoke the most, which wasn't that surprising considering the episode where he does way more speaking than any of the other members. The second season Robin spoke the most, I don't think it's that surprising, but it does make it interesting considering the season centered around Terra. Shannon was bothered by the analysis page and had a great idea to make banners for each member. Since I wanted to add more analysis for each member, we gave them each their own analysis page.

We did gain another member during this semester, and her name is Amber. She's great, and she helped a lot, including the navigation bar and the banner that hangs above all the pages. She was in charge of the Network Analysis and did some analysis of the character speeches. She first did season 1 because we didn't have all of the markup of season 2 done. She was able to find a lot of problems with the markup of season 1, and Shannon went through and cleaned it up a bit. She gives a helpful overview to help understand Network Analysis and created two graphs, one for each season. She does explain it all on the Network Analysis page (Season 1 or Season 2), so I would go over there if you want to see some more of the result/process.