Resources

Table of contents:

Services at Pitt

Lynda Online Learning
This is a portal for high-quality, often in-depth, video and screencast tutorials for a wide variety of digital tools: from audio, image, and video editing, to web design, to photography and graphic design, to programming languages. Your tuition dollars give you access while you're at Pitt; might as well take advantage while you can!
DMAP site
The English department maintains a Digital Media And Pedagogy site with a number of useful resources, including recording equipment you can check out, easy-to-reserve office hours with either a grad student or faculty digital media consultant (see the sidebar), and a way to reserve the DMAP studio (CL 463) for up to eight people.
Pitt Writing Center
Though not every consultant will have experience in multimodal composing or digital media, some will; but more importantly, the Writing Center's emphases on process-oriented reflection and rhetorical thinking makes every consultant a useful sounding board for developing ideas, getting feedback from an outside reader, and getting organized for revision and reflection. It's a good idea to plan for your visit and to make an appointment before you go.
Disability Resources
If you have a disability for which you are or may be requesting an accommodation, you are encouraged to contact both your instructor and the Office of Disability Resources and Services, 140 William Pitt Union, 412-648-7890 / 412-624-3346 (Fax), as early as possible in the term. Disability Resources and Services will verify your disability and determine reasonable accommodations for this course.
Counseling Services
Pitt also offers free counseling for students who are experiencing personal or emotional difficulties. The Counseling Center, located on the 2nd Floor Nordenberg Hall, offers Psychological Services and Sexual Assault Services (412-648-7930) (8:30 am-5:00 pm, Monday-Friday) or (412-648-7856) (after 5 pm, Monday-Friday or on weekends).

Help with Git and GitHub

Git and GitHub for Poets
A delightfully nerdy, yet strangely accessible, playlist of tutorial videos on using GitHub and Git (in that order) to keep track of changes to a text file. A great way to learn more about the features that make these tools appealing to coders and non-coders alike.
Git Cheat Sheet
Two pages containing everything you need to know for everyday version-tracking, from how to set up your local repository to how to recover past versions, with your normal status->add->commit->push-> workflow prominently placed. This is all for the command line; if that makes you uncomfortable, see the Command Line Crash Course, below.
ohshitgit.com
We can pretend that the three words in that URL all have three letters, but let's face it: there are times when even experienced users of git feel that something has gone terribly wrong. This is a great resource of quick command-line fixes for common problems, compiled by someone who feels your pain.
GitHub Learning Lab
Should you feel enticed by our course to want to go deeper into the capabilities of GH and go with the GitHub Flow, come here: it's a system of tutorials built directly into the GitHub web interface, with a "robot" that gives you prompts and affirmations of success right in the Issue Queues and Revision Histories of your own repositories. (Each new "course" you take in the Learning Lab will auto-generate a new repository to play with.) To enable this magic of automation work, you'll have to give the app some major permissions on your account – but since it's written by the same people who make GitHub, I felt pretty comfortable trusting them anyway. (They already keep all my stuff, you know?)
Get free private repositories
Important for starting out: GitHub defaults to making repositories public, and ordinarily you would have to buy a paid account to keep your projects private. But if you have a .edu email account, you can request a discount that lets you get unlimited private repositories for free. Click the link to find out more.

Free and Licensed Images, Sounds, and Other Assets

search.creativecommons.org
A portal for searching multiple sites that have built-in CC licensing, including flickr, jamendo, and ccmixter

Sounds and Music

Freesound
As they put it in their FAQ, "Freesound aims to create a huge collaborative database of audio snippets, samples, recordings, bleeps, ... released under Creative Commons licenses that allow their reuse." Note that this won't have music as such; it's more for incidentals.
CCMixter
SoundCloud
Jamendo
Three sites where you can find music with open licenses for remix. Each has its own community and search interface; I've had some success using CCMixter's tag search feature. Pay attention to the licenses for the specific tracks you want: some have the non-commercial Creative Commons license, and some are licensed only to listen to, especially on SoundCloud, where a lot of professional recording artists post to build buzz. If you're planning on doing any cutting or distorting, look for something you can modify (which includes CC-BY or CC-BY-NC).

Visuals

Unsplash
A collection of high-res, large-scale images that are free for personal and commercial uses; they may be especially useful for splashy website headers and homescreens.
Font Squirrel
Fonts that are free for personal and commercial uses, making them especially handy for advertising campaigns and the like. The site also includes some useful educational resources for learning more about font history and font selection.
The Noun Project
A collection of liberally licensed icon sets aiming to create "icons for everything," though as the name suggests, they specialize in things, rather than actions. If you realize you don't want all the detail of a photo when a simple line drawing would get the idea across, try searching their million-plus collection.
Adobe Color CC
Paletton
Color-Hex
Tools for color selection, for when you want to find a palette of complementary tones, or just to find the hex codes along an axis of saturation or intensity.

Web Frameworks

templated.co
html5up.net
There are a lot of websites that offer collections of free website themes and templates. These are two of my favorite sources for starting up static sites with built-in semantic html5 and responsive css.
Bootstrap CSS Framework
and other CSS libraries

Once you're clear on what a CSS class is, and how to add it to an HTML element, you can pretty much work from scratch designing your own CSS rules and building from there. But sometimes it helps to have a leg up, and that's where libraries come in: with a single line in the <head> element of your web page, you can import a whole slew of pre-made CSS rules (and even some related JavaScript actions), so that you can just start adding them to your html. It's a little like Lego for web design, only free.

Bootstrap is one of the most popular CSS libraries right now – I guarantee you've seen more than one website that uses it – and it's got enviably clear documentation for specific classes. One of the key advantages is that Bootstrap divs can split the page into a convenient grid for you, and they can automatically resize responsively for different screens. The latest version, Bootstrap 4, uses Flexbox and is therefore now much better at aligning and centering things along both vertical and horizontal axes than was true in the past (and even in the past it was pretty good).

Jekyll step-by-step
Jekyll on GitHub from scratch
Jekyll Quickstart (aka your quickest reference after setup)

Jekyll is actually a program in the Ruby language, but it functions as a tool for incorporating templates and variables into your web pages – so you can, for example, write the navigation once, and automatically have it pulled into every other html page you write. Especially useful for sites where you'll keep adding new pages, like blogs. (Or lesson plans! To see the code I use for this website, see the corresponding GitHub repo; there's a link in the footer.)

Most importantly, it's also pre-installed on GitHub Pages, so you can easily deploy it for your web project. The first link above will take you to a step-by-step set-up for getting Jekyll running locally; if you do this in your website--username repository, you'll be good to add/commit/push and have your Jekyll-enabled code work online!

Unit-Specific Resources

This section will expand as we move forward; feel free to suggest others that you come across! (You can edit this page and file pull request, or just email me.)

Audio

Under the assets listings above, you might find FreeSound, CCMixter, SoundCloud, and Jamendo especially pertinent. See also the sections on file compression and the link to Courtney Danforth’s soundwriting advice, below.

Audacity Wiki
Members of the community that created the tool have contributed their own tips and tricks; in this case, it comes in the form of a minimally styled wiki. I find it not always as clear as I might like, but many of my initial searches led here, regardless, so it's worth familiarizing yourself with the sections. I do recommend at least starting with their Audacity Tour Guide, and the documentation on how to properly install Audacity and add mp3 export is essential.
10 Tips for How to Keep Audacity from Crashing
The title says it all. I haven't had problems, but if you start to, have a look here.
Recommended smartphone recording apps
The New York Times's Wirecutter review site has a relatively recent roundup of free and nearly free apps for iPhone and Android. Save yourself some time trying to find the app with the least intrusive ads, and start with something pre-vetted and user-tested.
Examples of Soundwriting
There is kind of a glut of good radio out there, especially in the form of podcasts produced by NPR (National Public Radio) or PRX (Public Radio Exchange). You can look for something in the same genre as the piece you want to re-mediate.
I'll assign a few of my favorites over the next week or two.
Also, Courtney Danforth, a professor at the College of Southern Nevada and a prominent voice in favor of soundwriting in composition, has compiled a list of her favorite sound essays and audio stories as part of her three-page handout on Getting Started with Soundwriting.
Ira Glass's composing process
Glass, in case you haven't heard of him yet, is the host of This American Life, one of those much-beloved NPR podcasts I mentioned above. He's been called upon, on a number of occasions, to talk about how he makes the show work. Here he is holding forth on the basic building blocks of storytelling for broadcast.
And here's a longer lecture on "making better radio," punctuated with examples, that he gave back in 1998 (many of the principles – and critiques – still hold).
This may be less relevant for this particular assignment, but I was searching the web for a recording of Ira Glass talking about This American Life and how to write stories for the radio, but instead I found an interview-in-writing – for LifeHacker, of all things – in which he answers the question, "What everyday thing are you better at than everyone else? What’s your secret?" with a really great and concise rendering of how he takes hours of tape and condenses them into a story. So if you've got too much textual material for your audio remediation, and you're not sure how to render it down, click the link above and search for that question.
On minding P's and S's

One of the more common challenges of recording speech is that sibilants (s sounds) and plosives (especially p sounds) tend to pop out in stark contrast to the sounds around them. Some of the extended early readings in the unit talk about ways to fix this when first recording, but there are also lots of tutorials out there describing Audacity tricks for filtering them out once they're in the mix.

Visual

Under the assets listings above, you might find FontSquirrel and The Noun Project especially pertinent here.

GIMP Tutorials
As with Audacity, the community making the tool knows it best, and so you can find quite a few intro-level tutorials on the GIMP site itself, at www.gimp.org/tutorials. These include "GIMP Quickies" and a tutorial on layer manipulation called "Simple Floating Logo." "Layer Masks" may also be useful, e.g. if you want to make an image fit into a specified shape or shadow.
GIMP also has a separate user manual.
If you get stuck, I highly recommend Chapter 4: Getting Unstuck!
Examples of Visual Rhetoric in Action
Thinker/Thought, a collection of academic infographics by Nathaniel Rivers. In addition to being useful for how he handles design elements, quotation, and citation, some of the content deals with ideas on multimedia composing and rhetoric.
Visual Design Lessons
There are lots of tutorials out there. One I've been enjoying is a series of blog posts by designer Julie Thompson on teaching middle-schoolers about principles of graphic design. You can read the whole series (from bottom to top), or jump to lessons on positive and negative space, ways to create visual dominance and hierarchy, or rhythm and movement – even in static images. The exercises are designed for a non-digital space, but the lessons easily apply in digital realms.

Web Design

In the assets listings above, you might find Unsplash especially useful here (for banner images), as well as FontSquirrel (check the web licenses) and The Noun Project (for icons)… in addition, of course, to the web frameworks themselves.

internetingishard.com/html-and-css
Your one-stop shop for learning basic web architecture from the ground up. I'll assign this for homework. UPDATE: The website went down some time between February 14th and February 19th of 2019! Luckily, there's a copy on The Wayback Machine. If the main link doesn't work, go there!
Web Design in 4 Minutes
We walked through this demo on the first day of the unit; if you're at a loss for what to include in your stylesheet, you can do far worse than adding the basic spacing rules Jeremy Thomas sets up here.
How CSS Selectors Work (CSS-Tricks)

This could be a very useful follow-up to the Interneting is Hard tutorial, or perhaps just a handy reference for some of the more common "advanced" CSS selectors. It starts from basic ways of matching style rules to html elements, and then proceeds to discuss what happens when multiple rules apply to the same element – which rule "wins," or supersedes the other. To sum up, it's not simply which one comes last in the \*.css file (though that also matters): in general, the more narrowly defined rule will still override a more broadly defined one. Read on for more details.

Also, it's worth saying that many of my Google searches for solutions to CSS problems lead me here, so I figured I'd point it out early and reassure you that it's legit. Some very clear explanations not only of what to do, but why it works – and, often, alternative approaches to the same challenges.

htmlreference.io
cssreference.io
There are a *lot* of html elements and CSS attributes that you'll find in your travels through the web. As with book literacy, you'll pick up the vocabulary mostly by encountering them in the world, on websites, not by starting with a dictionary. But when you do find them, you'll want a good dictionary where you can look them up and learn more about how they're supposed to work. These are pretty well organized, and (unlike some of the "official" documentation) give usually you visual examples of what the elements and rules mean and do. And when you do want that official documentation, you can find it by clicking on the "MDN" link at the top right of any definition page.
loremipsum.io
Lorem ipsum is the shorthand name for the most commonly used placeholder text around. (There are also a lot of variants.) Essentially, you can use this text to fill in for the kind of writing that will change frequently: article or blog post text, for example. By quickly letting you fill out several paragraphs, you can start to see what your design is really doing on the page. This particular site, in addition to offering lorem ipsum generators and links to several others, gives a nice overview of the history and debates around this kind of placeholder.
Optimizing Images for Website Performance

You can find some beautiful free images out there, at very high resolution – and your own digital camera (even the one on your phone) probably defaults to a ridiculously high number of pixels, too. All those pixels come at a cost. If you find that your site is loading slowly, and especially if you see the images appear with some lag behind the text, you may want to scale down.

Luckily, you have a tool that can help you do it: GIMP! Check the link above for some tips on pixel counts, resolutions (pixels per inch), and jpeg compression quality.

WebFont Generator, by FontSquirrel
When you find a good font, before you can use it on the web it has to be formatted for browsers to render properly. Some fonts on your favorite font sites will already have webfont versions. If they don't, you can convert them to web-ready fonts using this tool. Just make sure you have permission to do so, okay?
Web Developer Plugins
This is a browser plugin, available for Chrome, Firefox, and Opera, that allows you to test your web pages by manipulating them in various ways – by temporarily turning off JavaScript, for example, or replacing all images with their alt text. (I've found the latter tool particularly useful.) It also includes html and css validators, to help you find typos that are throwing off your code.
caniuse.com
CSS is a live language, and the ongoing development of new CSS capabilities means that some browsers are slower to adopt the most current standards than others. To confirm that a particular rule will work across browsers, you can check here: just enter the CSS attribute you wish to set in the big "Can I use ______?" search box at the top of the page.

File Compression

If you’re having trouble uploading large files to GitHub or through email, you can try compressing the files. But while most computers come with built-in compression algorithms, they tend not to be very good. Luckily, there are several excellent and free applications that will happily shrink your file sizes. Here are some 2017 roundups:

Twine / Interactive Narrative

Twine wiki
The starting point on your Quest to Learn Twine. Lots of useful info here, including descriptions of the various "story modes" (alternate syntaxes) and their relative advantages. Pay attention to the syntax being used in any particular code snippet!
Harlowe Documentation
This is the official documentation of the default editing mode for Twine 2.1. Head here if you're looking for ideas about what Twine is capable of under the hood.
Intro to Twine 2.0
This is a basic walkthrough of how to set and call variables in Harlowe – and why it's to your advantage as a storyteller.
A slightly more advanced intro to Twine 2.1
This has some great advice on how to organize your files so you can reliably include images and music, without needing to summon them from across the web (where someone else might take them down). But be warned: a lot of the example scripts here use SugarCube, an alternative syntax to the default Harlowe. Use the tutorial to get a sense of what's possible, but then look up the equivalent syntax in the Harlowe documentation wiki, above.

Other Resource Roundups

Especially in the realm of digital production, there’s no need to reinvent the wheel; just as there are many excellent tutorials and sites on which to locate assets, there are many excellent lists of such tutorials and sites. Here are a few to draw on:

  • Noel Tague's bag of tricks is quite extensive, and includes sections on fair use, on archives of materials you can use or cite, on strategies for working with audio and video, and links to free / open source software.
  • Annette Vee's CDM resources page includes guidance on GitHub and Markdown (a widely used shorthand for HTML, with a bunch of variants a.k.a. "flavors").
  • Kelsey Cameron, another veteran Composing Digital Media instructor, has posted her own preferred links; the Sound section may be especially useful, as I've modeled our audio unit on hers.
  • Courtney Danforth has a full three pages of resources on Getting Started with Soundwriting that I expect will be useful in the audio unit.

As the semester goes on, we can identify our own list of favorites!