Category: Digital Storytelling

Readings on electronic literature, or conversations on digital narrative


I initially prepared the following list in preparation to guest lecture in an upcoming creative writing (fiction) course that will introduce students to ways of telling a story in digital media that takes forms other than linear prose.

First, why the term electronic literature (e-lit)? That’s a stiff sounding term that is a throwback to an earlier time before digital became commonplace. But e-lit is the term that seemingly has gained the most traction to refer to narratives that make innovative use of digital media. I have a slight discomfort with the term electronic literature (and also with digital literature) but my unease with the terminology is a topic for another post.

Any discussion of e-lit must involve the Electronic Literature Organization (ELO) at eliterature.org. That website is quickly overwhelming but the summary page What is E-Lit? is a good place to start.

The foundations of e-lit

An essay by Katherine Hayles offers a broad survey of e-lit (up to 2007). Hayles is an important figure in media studies and this essay is a good opportunity to introduce students to her works. Hayles includes references to landmark writers such as Kittler and Manovich and positions e-lit in a larger framework of the modern digital society.

This essay by Hayles is the first chapter in the book Electronic Literature: New Horizons for the Literary, which includes a companion website. The book attempts to establish a canon of early e-lit. But Janet Murray, another key scholar in the field of media studies, points out that these early works “are useful experiments, necessary failures, and limited successes, full of interesting mistakes that if appropriately acknowledged can push practice forward.” (Murray, Janet H. Hayles, N. Katherine. Electronic literature: new horizons for the literary. Modern fiction studies 55.2 01 Jan 2009: 407. Johns Hopkins University Press.)

A good summary of Hayles book on e-lit is provided on The Quarterly Conversation site in an article subtitled How Electronic Literature Makes Printed Literature Richer. Anyone who finds Hayles even slightly interesting should read her book How We Became Posthuman: Virtual Bodies in Cybernetics, Literature, and Informatics.

Pathfinders: Documenting the Experience of Early Digital Literature is the best source for understanding where e-lit comes from through an examination of pre-web hypertext literature in the years between 1986 and 1995. The scholarly literature on e-lit often refers to seminal works such as Shelley Jackson’s Patchwork Girl (1995) and other hypermedia texts created through tools developed by Eastgate System. However, the technology to actually read those works of e-lit today are inaccessible to most people. While Pathfinders does not provide a simulation of Patchwork Girl, it offers an intriguing methodology of showcasing how Shelley Jackson and readers interact with Patchwork Girl.

The present state of e-lit

There’s something odd about e-lit: it appears to be mostly discussed within academia and it’s difficult to find good examples on the web of what is called e-lit. How could that be?

Writer Paul La Farge provides a great comment:

“I actually don’t think digital literature is suffering from a lack of theory at this point; if anything, it suffers from a lack of practice. We need more writers! And a more diverse and robust way of getting their work into the world: not just more competent critics (we have some), but more kinds of competent critics, and more places where conversations about digital literature can happen, and more avenues by which digital lit can reach readers. All of this will surely happen in time. What I think the medium needs now is encouragement, and perhaps rescue from the forbiddingly technical language in which it has been theorized. It depresses me to think of digital literature as being exclusively an academic specialty: it’s as if Film Studies departments had sprung into existence all over the world, before anyone had made any movies.”

This quote is from an excellent series of posts by author Illya Szilak that appeared on the Huffington Post.

Note: I will be updating this post with new readings.

 

E-lit postings by Illya Szilak


Over the course of a year (late 2012 – late 2013) author Illya Szilak wrote a series of articles on Huffington Post about electronic literature that are worth reading for anyone interested in the topic. Szilak is the author of Queerskins – A Novel and Reconstructing Mayakovsky – A Novel of the Future.

Unlike most people who write about e-lit, Szilak is a physician and not an academic. As a creator of contemporary e-lit she brings a perspective that is often absent from the conversation on this topic.

Due to the navigational features of the Huffington Post it isn’t easy to read her articles in the order they were written. So, I arranged the following links to each article in chronological order.

The Death of the Novel: How E-Lit Revolutionizes Fiction 11/08/2012

Video in the House of the Word: How e-Lit Intersects With Cinema 11/20/2012

What Does a Polar Bear Do in a Jungle? How E-Lit Expands the Habitat of Literature 12/11/2012

The Death of the Author: E-lit and Collective Creativity 12/27/2012

It’s Got a Good Beat and You Can Dance to It: E-lit Plays With Time 1/17/2013

New Wor(l)d Order: E-lit Plays With Language 2/7/2013

It’s All Fun Until Someone Loses: E-lit Plays Games 3/7/2013

Just Playing Around: Why E-lit Matters 3/15/2013

Killing the Literary: The Death of E-lit 3/19/2013

Books That Nobody Reads: E-lit at the Library of Congress 4/24/2013

Fleshly Data: E-lit and the Post-Human 5/10/2013

Remembering the Human: E-lit and the Art of Memory 5/15/2013

Reorienting Narrative: E-lit as Pyschogeography 6/11/2013

The Silent History: E-lit Looks to the Future 7/1/2013

A Book Itself Is a Little Machine: Emily Short’s Interactive Fiction 10/30/2013

A Book Itself Is a Little Machine: Emily Short’s Interactive Fiction, pt 2 11/4/2013

Electronic Literature, Digital Humanities, & Creative Writing


This morning we met with a professor teaching Fiction Writing who wanted to incorporate a DH assignment into the course that required the students to tell a story through a new technology of their choice.

The students will start by completing a 3-page writing assignment with pen and paper. Then they will be asked to translate that story into a digital medium. The keyword here is translate. Is chopping a thousand words of prose into 50 tweets a translation of prose into digital medium? I would say not. As with any translation, how does the language of the digital medium impact the text? How does the language of the digital medium provide different capabilities (or affordances) that inspires new forms of creativity?

As an assignment, students will have to grapple with the technological platform (the language) that they have chosen for their translation. Students must learn that every platform choice comes with limitations and constraints that have significant impacts on determining the structure of their narrative. While these restrictions appear to be determined by the technology, students should grasp that the limitations are the functions of the underlying software. The code behind the platform reflects the dictates of software developers.

Many examples of electronic literature try to work within or around those constraints. That likely is a simple reflection of the coding limitations of the authors.

I would prefer that students start their translation process not with the choice of platform. But start with creativity. And again with pen and paper. Approach the digital with a blank slate and not with the limitations of an imposed piece of software. Sketch out in pencil what would be ways of representing this narrative if the choice of digital medium was wide open. Have the students describe the capabilities that the software would provide to tell the story. Have the students create a storyboard, a flow of the narrative, with the technologies of their imagination. These tools may not yet even exist. But if they can be imagined, then the algorithms  can be created.

What’s important is not that the students learn to tell a story in prezi or twitter, but that they learn that digital media is software that has capabilities and limitations defined by its creator. The process of software development is a creative act. While students in a fiction writing course will not become coders overnight, this exercise could inspire them to see the linkage between the creative process and the process of developing the tools that we all use to tell the stories in digital media.

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:

Structure

  • 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>

Text

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

Blockquote

Many semantic elements are not used very often

Editors: time to fire up Atom?

Images

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

<img>

Image formats

Resolution

Raster & vector images

Animated GIFs

Transparency

 

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!

Digital storytelling: past and present


For the last 15 years I’ve been on this path: exploring the intersection of databases and narrative.

Stories have always attracted me as the ideal form for understanding life, both present and the past. Perhaps more importantly, I have envisioned my future as a series of stories that I’ve told myself. I’m fascinated with how stories give us the capacity to reinvent ourselves. Stories, in the form of myths or religion (if you must), give structure and meaning to our lives.

As a librarian, the foundation of my profession is built upon carefully organizing information to be used by others. That’s a very valuable function within society, but it’s not enough to satisfy my curiosity. In this digital era, the database is the access point for discrete chunks of content that can be queried and analyzed. Consequently, those parcels of information can be reshaped into stories.

Any reader informed by media studies will notice that I’m channeling Manovich.

What prompts these musings yet again? Next week I start teaching two courses: digital history & multimedia storytelling design. Both courses examine ways of presenting narratives on the web. My co-teacher for multimedia storytelling design is a journalism professor and most students are journalism majors. We’ll be exploring how you tell a web-based story about a contemporary issue. In digital history I’ll be examining with the students how you tell a web-based story about an issue in the past. Both forms of storytelling rely heavily on primary sources and are structured as narratives. Both forms of storytelling rely on content that is organized and structured.

I’m looking forward to the next four months of teaching digital history and multimedia storytelling design. It will be interesting to see where those two courses intersect.