Endless Hybrids

Life, Creativity, & Learning

Digital history course project

In the second class of the digital history course. We focused on working with data, which is the largest part of the course project.

We started by reviewing two readings involving our case study of the Legacies of British Slave-ownership. Appendices 1 & 2 of the book about that project provide insights into prosopography and database development. As we reviewed those readings, I explained terms that were not yet familiar to the students. And we explored concepts around collecting and organization data about individuals. The course project page provides further background on the project and a few sample maps.


Creativity and Code

The third class of multimedia storytelling design is focused on what I call creativity and code. Continuing the focus on Snow Fall, the class reading for today is How We Made Snow Fall. That last link is a really good article, worth reading closely.

Creative thoughts from the how Snow Fall is made article:

  • Making a single story out of the digital assets….”to weave things together so that text, video, photography and graphics could all be consumed in a way that was similar to reading–a different kind of reading.” Talk about the origin of the word text…Latin…to weave (see Latin dictonary)
  • The design process: initial prototyping, collaboration, integration of graphics and video into “the narrative experience”
  • “a lot of trial and error and experimenting”
  • “design revisions and tweaks”
  • filmmaking techniques, but reading centric
  • “We focused on the pacing, narrative tension, and story arc–all while ensuring that each element gave the user a different experience of the story.”
  • moving images…pauses at “critical moments in the text”
  • “Having a tight edit that slowly built the tension of the narrative was the overall goal.”
  • Color palettes
  • Biggest challenge: “managing the path we wanted the reader to follow”


Much of this class period will be getting students to do HTML hands-on. We’ve talked a lot about HTML in the first class and looked at a lot of HTML code, but I want to get a sense as to how far the students are coming along with actually doing something with HTML. I suspect not far.

Some thoughts on topics to cover in today’s class:

  • Have the students open up the W3schools site. A good reference source for tags. But, also, for those new to HTML: the try it yourself  online editor is an extremely simple way for seeing how tags work.
  • Tell students about lynda.com. Not required for this class but a great resource for learning on your own. In future versions of this course, I might think about requiring lynda.com access rather than a book.
  • What is a plain text file? Contrast with binary files using machine code and with WYSIWYG document editors. What’s a text editor? A code editor? Try opening a binary file in a text editor.
  • File extensions. Nice to show those extensions in Mac OS X (Finder>Preferences>Advanced>Show all filename extensions.

I had a student email me with a problem in getting an HTML document display in the browser as a Web page. Instead, the page simply showed the HTML code. The problem was that the student followed the instructions in the Duckett book and used TextEdit on the Mac to create the page. TextEdit, being a rather confusing software program for writing HTML, saved the document as RTF (even though the student had correctly added the .html extension). There’s a non-intuitive option within TextEdit for saving as plain text.

For this class I’m recommending the use of Atom, which is already installed on the iMacs in the journalism lab. But make sure that students know how to install this on their own laptops.

  • Do students understand that a website is a directory (i.e., folder) on a server?
  • Create a basic web page in HTML. Perhaps by just copying over what they had done in the w3schools try it editor.
  • Save the page as index.html…as a way of introducing the importance of index.html as a filename in web site directories. Stress, though, that not any directory can serve web pages. You need a directory that is associated with web server software. In the next class we will look at actually uploading the pages to a server.
  • Play around with HTML. Go over again the head and body. Title. H# tags.
  • Introduce lists and links.
  • Relative and absolute URLs.
  • Talk about text formatting (non-CSS).
  • Take questions.


The simplicity of the web

The second class of multimedia storytelling design is focused on what I call the simplicity of the web. My advancing age, almost 50, gives me the advantage of having witnessed the evolution of the web from a text-based browser to the apparent complexity of modern web sites. I encourage those learning the web to break down the complexity and focus first on the simple, foundational aspects.

For our text in this course we’re using Jon Duckett’s HTML & CSS: design and build websites. Written for beginners, this book presents the basics in an engaging manner (with beautiful page layouts). I did choose, however, not to assign all the chapters in the same order as in the book. For the first class, we’re focusing on chapters 1, 2, & 5. Throughout this class we’ll be using the example of NY Times Snow Fall. It’s a complex piece but useful for these (mostly) journalism students to know how it was constructed.

Here are some of the questions (and occasional commentary) guiding discussion in this two-hour class:


  • What do we mean by structure?
  • Why are we talking about documents?
  • What are the structural elements on Snow Fall?
  • How can you see those HTML elements in the browser? How do you turn off the styles?
    • View Source
    • Unusually, the view source for Snow Fall is the whole article and not just what is visible.
    • What’s happening in the head and body?
    • Chrome needs the web developer plugin to disable all styles. (What’s an extension for a browser?)
    • In Firefox, it’s easier to view a page without styles
      • Firefox – View – Page Style – No Style.
    • A page without style: THAT is the simplicity of the web.
      •  In Firefox, show how you can hover over element with mouse and see the code view.
    • Chrome – Inspect element. I prefer how Chrome hover highlights the full element.
  • Do you see a hierarchy of information? Start with the <html> tag.
  • What’s a title in HTML?
  • What’s a header?
  • What’s the body?

In the view source of Snow Fall, (finally) around line 827, you’ll find:

<h1>Snow <span>F</span>all</h1>
<h2>The Avalanche at Tunnel Creek</h2>

Let’s look at that first paragraph.

  • What’s a heading?
  • What’s an element? What are tags? Any difference between an element and a tag?
  • What is markup and why is it used? What’s the purpose of elements and tags? Why is it necessary?
    • The machine reads character by character. A simple concept. Maybe so obvious that it’s not clearly grasped. Very important to slow down and read a page as the machine, the software, reads the page. The angle brackets are signifiers to the machine. Literally, signs that give directions to the browser about what to do.
  • What is plain text? What’s the difference between a plain text file and, say, a Microsoft Word file? Are there other types of markup languages?
    • Mention the Scholarly Text Encoding course
  • What are attributes of an elements?
  • Can I just use any tag? What tags are possible and how do I know?
  • Key HTML elements for beginners:
    • <body>
    • <head>
      • What’s the difference between the <head> element and a heading?
    • <title>


Think about the separation of content from markup. Then think about the separation of content/markup from style/presentation.

Structural markup: show  examples of each in Snow Fall.

Semantic markup: examples of each in Snow Fall.

Heading tags: choose based on structure and not appearance.

The all important paragraph <p> tag.

Why is Duckett even mentioning <b> and <i> and not <strong> and <em>?

White space collapses on a web page.

Line breaks <br/>, horizontal rules <hr/> and empty elements


Many semantic elements are not used very often

Editors: time to fire up Atom?


Keeping your images in a folder. Remember that a web site is simply a folder, right?


Image formats


Raster & vector images

Animated GIFs



When examining Snow Fall, take a moment and talk about not over linking. What’s the difference between this article and a Wikipedia page filled with links? What impact does that have on readability? On keeping you engaged with the story? Or, possibly more importantly, on the site?

With Snow Fall, what’s the difference between reading just the text and viewing the site? Do you wonder how many people actually read the whole article? Would another format actually have done more justice to the writing? (That’s a strange phrase…”done more justice”….privileging the written word over other forms of storytelling?)





A new course: multimedia storytelling design

This morning starts the first class of a new course on multimedia storytelling design that I’m co-teaching with Professor Toni Locy of our journalism department.  The subtitle of the course is “How’d They Do that?” The benefit of co-teaching with a journalist is that the copywriting is great! Here’s the course description:

Have you ever wondered how The New York Times and The Guardian put together their Pulitzer Prize-winning interactive stories, Snow Fall: The Avalanche at Tunnel Creek and NSA Files Decoded: What the Revelations Mean to You? This course introduces students to digital tools that will help them imagine, design and create powerful, compelling interactive features with audio, video, graphics—and words—that are on the cutting edge of journalism and mass communications. Students will learn basic web design and programming skills through HTML, CSS and JavaScript.

This course is designed for students with little or no coding experience but who have a burning desire to learn, “How they did that,” so they no longer are mystified by what’s behind the curtain on websites. Students also will learn key terminology and practices that will enable them to envision, report and execute compelling online narratives through the interplay of text, images, sound and video that optimizes the reader experience. By the end of the term, students will appreciate the power and potential of interactive storytelling, and the creative possibilities of gathering and delivering the news in the 21st century.

The course meets Monday and Wednesday 10am – noon in the journalism lab, which is equipped with 15 iMacs. This is a very hands-on class, though we do not expect students to have had any prior experience with web design and development.

Wait!? No prior experience with web design? That does make it challenging since we need to teach the basics of HTML and CSS. Obviously, there’s no way that anyone can fully come up to speed on interactive web design in course of only one term. We aim to showcase the possibilities and to ensure that the students learn the foundations of web design. We want the students to come out of this course with the confidence and excitement that they can pursue careers in this area. Some may be enchanted by the design aspects, others may be intrigued by the possibilities of coding. And others may not pursue a technical career in web work, but at least will know how to converse intelligently with designers and developers.

The course is structured around deconstructing several examples of high-quality multimedia journalism. Among the sites we’ll be examining:

Each class period will start with the students discussing their reactions to various elements of a particular site. We want the students to think about the elements (interactivity, color, typography, etc.) used by each site to engage readers. Then we’ll pull back the curtain, so to speak, to dissect the actual construction of the site. Along the way, we will teach HTML and CSS from the ground up.

The students also will work on a course project as a team. The project will incorporate everything that they’ve learned. Since this is a journalism class, the project will have a significant reporting component. Students will brainstorm and storyboard the project, then implement it as a web site. The result will be an interactive multimedia story.

This is going to be an exicting and intense course!

Prepping for the digital history class

This afternoon I’m teaching the first class on Digital History taught at Washington and Lee University. This is a one-credit class that is part of our DH Studio series, which is a set of one-credit lab courses for the humanities. I’m not a historian. I’m a librarian. I’m a technologist. And I’m fairly confident in saying that I know as much about Internet technologies as anyone. And what I don’t know off-hand, I know how to learn quickly. And that knowing how to learn technologies is one of the core concepts I’m emphasizing in the course.

History, the study of the past, is the context in this course through which we will study digital methodologies and tools. One could adapt this same course, with some variation, to the study of other disciplines: literature, journalism, sociology, anthropology, art history, politics, and so forth. The examples utilized would be different and certain approaches would vary. But a commonality exists among the ways that digital media facilitates discipline-specific inquiry. At the undergraduate teaching level it’s particularly important to emphasize that these digital approaches are not restricted to the academy. These skills transfer directly to a career in practically any industry and line of work, whether private or public.

I strongly feel that liberal arts students, particularly those studying the humanities, are in a very advantageous position to pursue technology-based careers. Without wanting to sound arrogant, I always cite myself as an example. As an English major at a small liberal arts college I avoided technology as much as possible. There wasn’t much of it around in the mid-1980s anyway. But when I got to graduate school, I was dragged kicking-and-screaming to the computer. I came to realize that technology was all about logical thinking. Learning a new technology was about breaking down complexity, identifying the logical components, and piecing together the structure. That’s the same process I had learned in studying literature, history, religion, and philosophy. I was very comfortable as a liberal arts student in dealing with ambiguity. But technology is not at all ambiguous.


The first day of class

As a one-credit course this class meets only once a week. We’re scheduled to meet for two hours every Thursday afternoon in the IQ Center, which is a great facility for collaborative learning. Students are expected to bring their laptops to class since there will be a lot of hands-on learning. The first hour of each class will be discussion. We’ll have a conversation about the resources, methodologies, and tools we’re examining. One of my goals for any undergraduate class is that I really want these college-age students to develop an ease in communicating and collaborating with someone who is thirty years older. That’s how life is in the workplace. You don’t just work with people your own age.

The second hour will be hands-on. And it’s likely that we won’t always meet for the full two hours, but I wanted to have the time blocked out so that the students could have time with me every week to work with the tools.

The class enrollment is small: only 2 students. Understanding why the course is so under enrolled is a post for another day, and a talk I’m giving at the upcoming DLF Forum. But, actually, it’s great just to have 2 students. And it’s especially great for them. Talk about the benefits of small class size! That’s why you go to a small liberal arts college: not to be stuck in an auditorium with dozens of other students.

The small class size means that attendance is really important. And the discussion should be a lot more engaging. Class participation 30% of the grade.


Course structure

This class could serve well as a companion to a regular history course. But there are a lot of logistical issues in scheduling a one-credit course as a co-requisite to a three-credit course. I needed to find some historical context in which to explore the digital methodologies and tools. I decided to focus on the history of Washington and Lee University (W&L). The namesakes of the university lend enough historical material, much of which is controversial (particularly with Lee). But the course is not primarily a history of W&L. The historical matter is simply a context. And that’s what makes this course different from a history course. Students will learn a lot about W&L history, but that’s not the primary goal of the course. My expectation is that this digital history course will continue year-after-year and the projects developed through this course will build on each other every year. Ultimately, through this course, we aim to develop a digital research environment for the study of W&L.


Case studies

To gain an informed understanding of digital history we will explore a few projects. A project we will examine closely is the Legacies of British Slave-ownership (LBS). The legacy of slave ownership is relevant to the history of W&L. And from a digital perspective, the LBS site is an outstanding example of digital scholarship that also demonstrates the connection to print scholarship through the scholarly book that was produced by the project team.

Other projects we will examine include the Trans-Atlantic Slave Trade Database, Visualizing Emancipation, and Photogrammar.


Course project

As a lab course, we need to centralize our work around a course project. Our starting point will be to learn about the shift in student demographics at W&L over time.  Some still think of W&L as a Southern institution, but any conversations with students on campus today quickly reveal that the student body includes many from New Jersey, Massachusetts, and other Northern states as well as the midwest. But how do we quantify and visualize that information?

And there’s the strong assumption that W&L students historically have been from the South. We will collect the data to show exactly where W&L students have come from over the years. We will develop an interactive map that visualizes the origins of W&L students from 1790 until 2015. In this Fall Term we will not complete every year of that data set, but we will establish the structural foundation and create version 1.0 of the interactive map.


It’s almost time for class. In another post I’ll review one of the methodologies (prosopography) that we will be exploring as well as a key tool (CartoDB).


Get every new post delivered to your Inbox.