This document describes the information architecture of the site and all its elements to facilitate and guide development. All document types, fields, categories, pages, etc. will be described here.
The Video Game Crash will be built upon the Craft CMS. Resources:
Craft CMS Docs: https://buildwithcraft.com/ Craft Supplemental Tutorials and Docs: http://straightupcraft.com/ Craft Google Group: https://plus.google.com/communities/106505340287442511226
These are the animations that appear in the margins and elsewhere. They function like pull quotes attracting the reader to a section. Shortcodes will tell js where to drop these animations into the DOM.
The sidebar is the dynamic marginal notes or side notes displayed on the right of the page. as the user scrolls these notes change depending on the chapter. We way need to find a way to have more than one batch of side notes per chapter.
The sprite tray lives in the left margin of the page on a desktop view and possibly in the nav bar on a mobile viewport. It is an accordion of drop down menu that displays the sprites the reader has collected.
The timeline is a feature that helps readers skim the story. It lives at the bottom of the page providing a description of events that took place in the story on the year the reader is currently reading. The reader can click on the timeline and be pulled to a new chapter of the story.
A story is the complete narrative of a company, event, or concept. It's the vertical element of the larger narrative. ex. The story of Atari or the story of the Arcades. A story is made of a series of chapters.
| | |*| chapter | | |*| chapter | | |*| chapter | |
In the Craft CMS a story is represented by a category. ex. nintendo or moral panic. Chapters will be called levels and be arranged in order by the chapter number to form the story. Stories also have one storyTimeline entry that renders the timeline in the browser.
aside-category will be a category model describing the kind of aside. It will be used for layout options:
bio,company,event,source,excerptasides that have short descriptions of people, events, etc and allow the reader to acces other chapters and stories.
A chapter is a part of the story. Chapters will be entries of type chapter in the Craft CMS. Chapters have the following fields:
numberinteger representing level/chapter number [req]title[req]chapterBodyMatrix field for the content of the story. Field for images and blockquotes. Shortcodes go in text.sidenotesOne or more things that appear in the sidebar as user scrolls through. References toasideentries [req]bannerlarge image to break up flow. reference to an imageassetspriteif this chapter earns the reader a sprite. reference tospriteentrytagsCraft CMS tag field for semanticsjavascriptstring ron the name of the javascript file that will run the animations for this chaptercitationsList of citations that appear in accordion at bottom of the chapter. Reference tocitationentries
Unaswered question: It may be best to use the matrix field to pull together all of the body content (images, pullquotes, etc). The matrix field might eliminate a lot of our need for shortcodes.
An aside is an entry that refers to and is referenced by one or more chapters. These will be displayed in the sidebar. Asides provide in context information and cross links. Asides can have a few different categories bio, company, event, source. Asides have the following fields:
title[req]quotea pithy quote about the thing in the asidebodythe content of the aside. A brief paragraph written in Craft's GUI. [req]chapterchapters that this aside appears in [req]sidenotesWhat what this supposed to be??? Things that appear in the sidebar as user scrolls through. References toasideentries [req]linksLinks/references to other entries for further reading. these links can be bookmarkedspriteif this aside earns the reader a sprite. reference tospriteentrytagsCraft CMS tag field for semantics –citationgenerally for excerpt asides
A media entry will be a video or image gallery. Media entries will be listed in the side-notes and slide in like the asides.
titleshort description/title of the entryimagesreferences to image assets [req]videoa link to a video [req]bodyshort description of the media entry. [req]tagsCraft CMS tag field for semantics –citation
A citation is an entry that contains metadata for creating a citation at the bottom of a chapter. These will follow APA style. Citations contain the following fields:
titlebook or journal title [req]articletitle of artcleyear[req]author[req]pageaddressweb address for online publicationtypetype of publication ie book, periodical. Used for layout purposes [req]side-notefor major sources or authors ie. Tristan Donovan or Vending Times. A referesnce to anasideentry ofaside-category==source
A sprite is an entry that serves a few functions: bookmark, reminder, achievement. Sprites help readers track their progress, get access to things they've read to remind them, and encourage them to return to the story and earn more sprites. Sprites will be displayed in a pull dawn tray. Readers open the tray and see which sprites they've collected and what's missing.
imagethe small (30x30px) image that represents the sprite [req]namename of the sprite. will appear on hovering over the sprite [req]linkreference to anaside,media, orchapterentry. this is the bookmark function [req]originwhere the sprite was earned [req]
timeline entries will be used for timeline data for a story category. Timelines will use text field for each year in the story from 1977-1985.
years Matrix field. Divided into year blocks with year and description fields. The last entry of years should be a today field. Max: 10 blocks
Short codes will be used in entry bodies to generate content like animations, footnotes, etc.
Will generate a footnote. Probably refers to a citation entry.
TODO: define the syntaxt and functionality of this
This shortcode might refer to an aside entry that is (or is not) listed in the side notes.
TODO: define the syntaxt and functionality of this
Replace the animation shortcode with the elements required by the scrollmagic animation js file referenced in the javascript field of the chapter
These shortcodes will indicate how to display a particular pull quote ie. left, right, center, etc. Could be used to drop an image into the page as well.