War of Currents

Coding and Structure

For the War of Currents project, we used several coding languages in building the website, marking up text, and structuring the data.

XML

Short for eXtensible Markup Language. It's used for storing and accessing information, providing an excellent method for marking up our documents. It's also cross-platform and used freely around the world.

    <?xml version="1.0" encoding="UTF-8"?>
<?xml-model href="../../resources/schema.rnc" type="application/relax-ng-compact-syntax"?>
<document>
    <head>
        <fileDesc>
            <titleStmt>
                <title>A MAGIC BEYOND THE MAGICIAN'S.</title>
                <subtitle n="1">WONDER-MOVING FEATS THAT SCIENTISTS PERFORM.</subtitle>
                <subtitle n="2">Plates and Nails that Dance -- A Lamp that Burns Under Water.
                    Nikola Tesla's Fiery Hand.</subtitle>
                <author>THEODORE WATERS</author>
                <encodingHistory>
                    <work role="encoder">Allyson Hall and Aaron Newton</work>
                    <work role="transcriber">Allyson Hall</work>
                    <work role="copyEditor">Aaron Newton</work>
                </encodingHistory>
            </titleStmt>
            <publicationStmt>
                <publisher>Unknown</publisher>
                <pubDate>1894-12-09</pubDate>
            </publicationStmt>
        </fileDesc>
    </head>
    <body>
        <p>Any one of our modern electrical scientists could, by departing from the dignity of his
            calling, launch out as a professional magician and make a fortune on the stage.
            <persName ref="#Tesla">Nikola Tesla</persName>, <persName ref="#Edison" 
            >Edison</persName>,<persName ref="#Thomson">Prof. Ellihu Thomson</persName>, and
            many other earnest workers surpass in their laboratory experiments anything done behind
            the footlights. No Hindoo juggler can do more in the gentle art of mystifying than the
            electrician. His apparatus is simple and his results are amusing enough to sound a
            recall. <persName ref="#Edison">Thomas A. Edison</persName> several years ago had a
            small motor which ran without any apparent electrical. connection. It stood upon a table
            and whirled rapidly. It was very mystifying in the then stage of electrical science and
            savored of perpetual motion. The real secret lay in the fact that projecting from the
            base of the motor were two sharp metal pins which, when the motor was laid upon the
            table, penetrated the thin veneer of the table top and made connection with wires
            underneath. An electrician would disdain such a device now. Recent progress has shown
            that it is not necessary to have even the connecting wires. Motors now run and depend
            for their driving power on the electrical excitement of the atmosphere. They may bo far
            removed from the appliance generating the power and yet work away merrily. <persName 
            ref="#Tesla">Tesla</persName> will hold a lamp in his band, stand in the middle 
            of a large room away from all wires or metallic connections, and the lamp will glow and 
            send forth a radiance not to be equalled. What could be more magical than this?</p>
    </body>
</document>

RelaxNG

An acronym for REgular LAnguage description for XML Next Generation. RelaxNG is used for creating template rules to write XML in, allowing us to code multiple documents without human error. Here is our schema for this project:

datatypes xsd = "http://www.w3.org/2001/XMLSchema-datatypes"
start = document
document = element document {head, body}
head = element head {fileDesc, publicationStmt*,url?}
fileDesc = element fileDesc {titleStmt, publicationStmt}
titleStmt = element titleStmt {author & title & pubSource? & subtitle* & encodingHistory & text?}
publicationStmt = element publicationStmt {(publisher | pubDate)*}
publisher = element publisher {text}
pubDate = element pubDate {xsd:date}
pubSource = element pubSource {text}
title = element title {text}
subtitle = element subtitle {mixed{n}}
n = attribute n {xsd:integer}
author = element author {text}
encodingHistory = element encodingHistory {work*}
work = element work {(role | text)*}
role = attribute role {"transcriber" | "encoder" | "copyEditor"}
url = element url {text}

body = element body {(p | heading)*}
p = element p {mixed{(event | loc | date | xsd | persName | current | company | name | event)*} | heading*}
heading = element heading {mixed{persName*}}
loc = element loc {text}
date = element date {xsd, text}
xsd = attribute xsd {xsd:date}
persName = element persName {ref* & text}
ref = attribute ref {"#Tesla" | "#Westinghouse" | "#Edison" | "#Thomson" | "#Rau" | "#Other"}
current = element current {type, text}
type = attribute type {"AC" | "DC"}
company = element company {name, text}
name = attribute name {"Edison" | "Westinghouse" | "Thomson-Houston" | "Siemens" | "Other"}
event = element event {loc* | text}

HTML

Short for HyperText Markup Language. HTML and XML are similar languages, but HTML is used for presentation and display while XML is used for the storage of information. We used HTML in conjunction with CSS to build and style our website.

CSS

Short for Cascading Stylesheets. CSS is used to style code and display it on websites.

JS

Short for JavaScript. JS was used to create our menu bar, making it dynamic and more functional than a menu might be without using a language other than HTML. Here is the code we used for the JS portion of our menu.

window.onload = init;

function init() {
    scroll();
}

function scroll() {
    var y = window.scrollY;
    if (y >= 130) {
        document.getElementById("id").className = "show"
    } else {
        document.getElementById("id").className = "title"
    }
};

window.addEventListener("scroll", scroll);