Welcome | Book 1 | Book 2 | Book 3 | Graphs | About


Commentary/Process - Members, Goal, Process, Decisions, and Suggestions



Jayna Rowe - Group leader, Images, Episode Descriptions, HTML, XML Markup
Rowyn Hope - CSS, Formatting, XML Markup, XML Schema, HTML
Shannon Dunn - Group Mentor, XML Markup, Suggestions
Michael O'Malley - XSLT, XQuery, SVG, HTML, SSI, Layout
Andrew Soberdash - XML Markup, XQuery, Network Graph, HTML


The Avatar Project is a two-semester project that involved our team creating a website based on the Nickelodeon hit TV series, “Avatar: The Last Air Bender.”

The first semester team chose to focus on timelines of the redemption arc of Prince Zuko. This would include pivotal moments outlined by the official Avatar Youtube channel presented in a quick and easy overview of the entire series. Images, descriptions, and the transcript all contribute towards how Zuko progressed throughout the show.

The second-semester team added Aang's character arc in the same manner. Having both of the main characters of the show then allowed us to analyze their relationship to other characters through both bar and network graphs.

Process and Decisions

We began by sourcing the transcripts from avatar.fandom.com, which involved XML markup, schema creation, and looking ahead towards how we would use those transcripts. We ran the completed XML markup collections through XSLT to quickly convert the markup into HTML files for each book. These HTML files categorized the transcripts for Water, Earth, and Fire with CSS to match each design language for each of the seasons. HTML/CSS timelines served as a launching point to each section of the transcripts. Additionally, the timelines offer the user a quick and simple way to view Aang and Zuko's growth over time. Running the XML files through XQuery allowed us to create graphs that show Aang and Zuko's interaction with other characters at pivotal moments. A server side include (SSI) provided navigation between every section of the website at the top of the page. We chose to focus on just two characters due to the impressive size and scope of the world of Avatar.


We suggest spending plenty of time insuring the backbone of the site, XML markup and schema, are free from errors and allow flexibility with the HTML, CSS, and other languages you plan on incorporating. Organizing your folder structure, workflow, and overall organization of your page leads to a smoother, more efficient experience for your team.

Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License