About this Assignment

Our readings describe some of the distinctive features of oral history as a genre and a mode of historical inquiry. In this exercise we experiment with oral histories on the web, combining your recently-gained coding skills with an analysis of the possibilities and limitations of oral history.

Please see your assignment page for full details about what’s expected. THis README describes mostly the technical set-up of the repository & the steps you will need to undertake in order to be successful.

Getting Started

First, make sure you have installed both Atom Editor and Github Desktop, and that you have a working Github Account. Then, do the following:

• fork this repository by clicking on the “fork” button in the top right.
• from the newly-formed repo, click the green “clone or download this repo” button
• choose ”Open with Github Desktop”. The repository will be copied to your computer
• from Github Desktop, click on a file and choose Repository --> Open With Editor. Hopefully Atom will open
• you are ready to get to work!

How This Project Works

This is a very small, simple, stand-alone website (consisting of just one page!). It looks pretty good, but most of the heavy lifting is done by outside libraries:

• jQuery is an important piece of web infrastructure, widely used in many projects.
• Remarkable is a “markdown parser” – it allows us to write the body of the essay in markdown and render it directly as HTML. A really big win.
• Bootstrap is the most popular “web framework” in the world. It’s a sophisticated CSS & Javascript system that gets a lot of work done out of the box, and saves a huge amount of time

Using these libraries gets us one step closer to “real-world” web development, where HTML and CSS is just a small part of your development time

Your project has just a few files:

• index.html, which loads the frameworks described above, adds a little extra Javascript which you can change if you want (but don’t need to), and sets up a basic HTML framework to give structure to the page (which you’re welcome to change and probably will want to).
• style.css, which adds some style information, which, again, you are likely to want to change
• index.md, where you will actually write your assignment! You’ll do it in Markdown, introducing fragments of HTML as you go where you need them. The current content of that file has examples of most of the syntax you’llwant to use. index.md will be loaded by remarkable and inserted into an otherwise empty div in index.html.
• your audio file, which is not being stored in this repository because it’s not such good practice to have a big file like that in the repository if no one’s going to use it. You will have to add the file to the repository and make sure the <audio> <source> points to it.

You should edit your files in Atom and make sure you have the htnl-preview package installed (go to Settings -> Install and search for “html preview”. Remarkable will only be able to access the contents of index.md properly when index.html being served by a webserver – fortunately the html preview runs a tiny server for you inside your editor. But if you try to just double click on index.html and open it in Google Chrome, you’ll be disappointed.

Tips and Tricks

• use the javascript `seek` function I defined to queue the audio file to a specific timecode in the file. You can call it with `<a href=”javascript:seek(135)”></a>` – just replace `135` with whatever time you want to seek to, in seconds. Unfortunaely you’ll have to write this in plain old HTML as remarkable has trouble parsing javascript links.
• load a different Bootstrap theme by copying the CSS link from the Bootstrap CDN. Feel free to experiment

Handing this Assignment In

Please hand this in by means of Github Pull Request:

• check all your code to make sure you’re happy with it.
• “stage” and then commit your changes (you can now do this directly in Atom – so you don’t really need Github Desktop anymore!)
• make sure that you have added your audio file to the repository, otherwise I won’t have access to it!
• submit a pull request to my repo. That’s it!

More Info

For details about marking, content, etc. please see the assignment page in the class website.