Resources

A Brief History of the GIF

Netscape GIF

The Graphic Interchange Format, or GIF, is a bitmap image format that stores a short sequence of images within a single file, allowing brief loops of basic color animations. In 1987, CompuServe created Image Format 87a, seeking to develop an animated 256 color image format for their file loading areas that, up to that point, employed exclusively a black and white RTF format. In 1989, CompuServe devised an enhanced version, called 89a, which added support for animation delays, transparent background colors, and storage of application-specific metadata. The updated 89a specification also supported the incorporation of text labels. Ultimately, the GIF became a popular format (employed by both software companies such Microsoft and Netscape and everyday users) because it used a kind of data compression that was more efficient than the formats used at the time—fairly large images could, therefore, be downloaded in a reasonably short time, even with dial-up modems. With the rise of Web 2.0, the GIF format has experienced a unique revival, and GIFs are ubiquitous in social media, on blogs and online forums, and everywhere online community dialogue is ongoing.

Kress (2010) emphasizes that a mode is a “socially shaped and culturally given semiotic resource for making meaning” (p. 79). Since, as he says, “representational and communicational practices are constantly altered, modified” alongside cultural changes, these “semiotic resources” are continually shifting, albeit temporarily deployed for specific social occasions (pp. 7–8). These “resources for representation,” are constantly being remade—“never willfully, arbitrarily, anarchically but precisely, in line with what I need, in response to some demand, some ‘prompt’ now” (p. 8). The linkage between culture and meaning making is perhaps nowhere more apparent than with file formats such as the GIF. The contents of GIF files that widely circulate online are overwhelmingly re-appropriations of particular cultural materials, specifically popular film, television, and/or re-mixed versions of born-digital materials. The GIF format in our classrooms, we learned, served as a tool for our students to read, re-read, and re-mix existing texts—to “tinker” with received cultural artefacts—as well as a way to deepen and supplement their reflections on course experiences and canonical texts by encouraging more sophisticated, multimodal compositions.

Logistics

To be clear, the assignments described here did not ask students to make GIFs. Instead, these assignment created opportunities for student to employ premade GIFs in their HTML code to express their interpretations of texts and to reflect on their own work. Logistically, this meant that the majority of instruction involved the workings of HTML and CSS and the use of GIFs was only one part of the composition practice. For most of the students, this was their first experience creating a website. Understanding the way that HTML and CSS influence layout and content display were also important elements of the larger assignment, although not extensively addressed here. That said, because in the context of this assignment coding instruction was necessary for students to employ GIFs, this section will address some of the nuts and bolts of teaching hypertext composition.

The assignment presented a few logistical challenges and limitations in both of our classrooms. First, both classes had to provide venues to train undergraduate students to code basic HTML and CSS and offer manageable software for students to use. Second, technological logistics, such as how to store and host students’ digital projects, had the potential to pull attention away from discussions of reading, coding, and composing. Third, the limitations of the GIF file itself posed durability concerns, particularly regarding the potential instability and degradation of GIFs hosted on external sites.

Physical Venue

Finding both time within the semester schedule to teach HTML and venues in which to do it was the first challenge. Meaghan and Josh were lucky to have Florida State University’s Digital Studio as a site for the kind of coding work they envisioned, and they were both able to schedule full class sessions in the space. Opened in 2008, FSU’s Digital Studio is affiliated with the Reading and Writing Center and is staffed by the English Department. The Digital Studio is a learning facility that focuses on supporting students and faculty in their efforts to compose digital and multimedia assignments and projects. The Digital Studio offers an array of tools to support this work, including publishing software, image manipulation software, video production technology and video editing software, and, most crucially, editors for web and programming languages. The Digital Studio tutors also offer “travelling tutor” services, in which experienced tutors assist individual classrooms to support teachers and students with technology-heavy lessons. Meaghan and Josh acknowledge that they were well positioned in regards to classroom resources; however, even in an institution in which no such support is available, instructors could employ online resources in a traditional classroom setting to recreate assignments such as these.

Sponge Bob Imagination Rainbow

The practical introduction to HTML and CSS for Meaghan’s HoIT class occurred in a one-day intensive seminar in the Digital Studio, where students were introduced to the syntax and form of coding. There were also two in-class workshop periods, so that students could collaborate and gain assistance from the instructor for any issues that arose. In their informal reflections, several students appreciatively discussed the ability to use trial and error in their composition process; as one put it:

Since the webpage is done through a computer system you are allowed to go back and alter and change each entry.... Unlike medieval manuscripts this type of writing system is more tedious in the since [sense] of function and memory, but more relaxed in the since [sense] of creating errors and being cautious while working

The student felt that because it was easy to revise and correct errors, the composition process of creating the hypertext document was less stressful than the creation process in other media. Interestingly, he put emphasis on the iterative process of revision, specifically comparing it to the precision and care he saw as necessary for manuscript production.

Digital Venues

HoIT

For the majority of students in the History of Illustrated Texts course, this assignment was their first experience with coding in HTML and for all but one, their first exposure to CSS. Because students were asked to think about the structures and organization facilitated by the encoding languages, they were encouraged to code without the aid of a graphic user interface like the kind provided by DreamWeaver. Most did their coding with TextWrangler, the free text editing software suggested by the Digital Studio tutor during our one-day seminar. Students were divided into groups of between three and five to work on the page together. Working in groups allowed students who are new to coding to engage more with the content, while offering opportunities for students who were more experienced to take on leadership roles. When Meaghan first designed this project several years ago, students repeatedly expressed a sense of pride and ownership over their finished project in their assignment reflections. Although she expected this to decrease with the switch to a group project (and it did), the development of more individual hands-on projects such as the Medieval Manuscript Mock-up and the relief printing exercise allowed that “maker” feeling to permeate the course more evenly. In their reflection papers, students expressed an appreciation for the group dynamic. A student without previous coding experience noted that working in a group allowed him to feel like he contributed by sourcing materials or providing readings, “even though I don’t know much about HTML mark-up.” Other students expressed the “tinker” idea that HTML was particularly suited to group composition because they already saw digital composition as a collaborative activity, borrowing from texts and content provided by other users. By working in groups, students were able to collaboratively contribute material (finding pictures or GIFs, selecting the excerpt) and collaboratively troubleshoot the code as it was produced.

Much of the theoretical introduction to hypertext in the HoIT setting focused on ways in which reading and experiencing hypertext differed from other media covered in the course. Coming to the unit after a discussion of graphic novels focusing on Art Spiegelman’s Maus, students were eager to discuss and implement layout considerations, including the size and placement of images in relation to the text. As much of the printed media studied over the course the semester was monochrome, they were excited about the flexible possibilities of color in digital composition, a focus encouraged by the use of the MudCube color visualizer. We examined several different kinds of websites, from the school’s library catalogue to blogs to online editions of The Canterbury Tales, and discussed the rhetorical features of their layout and navigation. For assistance in the mechanics and grammar of coding, students were directed to W3Schools, particularly the “make it and break it” demonstrations.

WEPO

On the other hand, while Josh’s WEPO class had access to the Digital Studio space during the brief summer session, tutors were not available to assist them. Aware of this, Josh designed students’ introduction to HTML as a combination of student self-tutoring over the course of the semester and a week of intensive coding together as a class. In the first week of the semester, he requested that each student sign up for the free online coding tutorial CodeAcademy. In the second half of the semester, students were asked to begin the tutorials in preparation for the week of coding. As opposed to Meaghan’s class, the WEPO class used the Adobe’s DreamWeaver software; Josh felt that providing a coding program with a more user-friendly and visually appealing graphic user interface would help prevent spending too much class time troubleshooting the software interface instead of directing attention to the experience of coding itself. For the group coding exercises, students began the week by practicing basic coding syntax—including tags, making links, inserting images, and composing text—and working their way to more complex tasks, such as coding multiple web pages with an array of content unified with a Cascading Style Sheet. The results, although constructed with basic HTML coding, were projects that employed text, images, and design elements in thoughtful, surprising, and inventive ways.

Students were tasked with completing two assignments during the week: first, to create a basic webpage using HTML and CSS, incorporating coding elements such as links, fonts, color, images, and formatting. Second, as part of this web page, students were asked to compose a final reflection on the course in HTML, integrating GIF files into their text, and linking this reflection to their webpage. For most of the WEPO students, this was their first encounter with HTML and the experience was challenging, requiring them to think about the creation of texts in a vastly different way. Although DreamWeaver provided error messages and offered prompts for code as users typed, students found the process at first frustratingly slow and obscure. As in Meaghan's class, students worked collaboratively to gain some degree of mastery, although this group dynamic was more spontaneous. While students worked on their own individual projects, either on laptops or on computers Will Ferrell and John C. Reilly
            in Step Brothers provided in the Digital Studio, they worked together to ask each other questions about code, to troubleshoot, to exchange ideas, and to provide feedback. A few students in the class had some experience with HTML, and one student in particular had a much higher degree of fluency than others. This student frequently moved throughout the class answering students’ questions and concerns. In this way, although Josh was also available to assist students with coding roadblocks, ultimately it was the class that worked collaboratively to resolve the issues that inevitably arose as students worked in this unfamiliar format.

At the end of the week, many students noted the complexity of coding and were grateful for both the pace and the availability of support through their instructor and other classmates, as well as online resources. One student wrote in her journal:

I must be naïve, but I never knew that the Internet was this complicated. I take for granted how easily I can navigate from the click of a button, but doing this coding project made me realize just how hard it is to create elaborate websites; it is not only writing, there is a certain science to it as well!

Much like with Meaghan’s HoIT students, who articulated the challenge of “abid[ing] by certain rules” when coding, many WEPO students commented on the precision required to code a working website. Another student wrote:

Even when I thought my codes were exact, some still did not work. After several close observations, I realized it was due to something so minor like a semi-colon missing. It was interesting to see how even the smallest mistake in a code would prevent the entire code from working properly

As a whole, students appreciated the structure of instruction, with projects building towards a unified whole, as well as support from online, their peers, and their instructor.

Hosting and Storage

A second logistical challenge involved how to store and host students’ digital projects. Josh and Meaghan approached issues of file hosting differently. For History of Illustrated Texts, Meaghan took advantage of webspace on the English departmental server, requesting a single master site for the class as a whole. Students submitted files by email (a lesson which reinforced the differences between relevant and absolute links) and the files were then uploaded to the server by the instructor. ASCII man walking She also created the index page in class and its accompanying CSS, to serve as a working demonstration of design elements. On the other hand, under the stricter time constraint of a six-week summer course, Josh opted to avoid the additional complexity for students and chose to grade his student submissions offline. Josh felt that the use of an additional class to focus on the use of Secure Shell Handling and troubleshooting problems with relative links would detract from WEPO’s mission and the central motivating questions for the assignment itself: what is the relationship between coding and composing?

Limitations of the GIF

Third, on a smaller scale, the limitations of the GIF file itself posed logistical challenges for both Meaghan and Josh: specifically, the instability and degradation of the links to GIFs our students created in their projects. Due to the logistics of grading student work offline, as well as time constraints, many (if not all) students in both classes coded via hotlinks to the GIFs they selected. Although the timeframe of Josh’s class was short, and broken links was not an issue for grading their projects immediately after, upon returning to these projects, some of the links have already begun to degrade. In terms of employing GIFs in the classroom, it is clear that the ideal practice involves recognizing that GIFs are temporary files and are hotlinked as a practice. Even though Meaghan encouraged students to download and submit all image files as part of their package, to promote relative linking and stable hosting on a departmental server to maintain the integrity of student work, this was neither possible nor convenient for students intent on working with GIFs. While the authors have provided image files for all the GIFs employed in this paper, they would like to emphasize that this is not typical of composing with GIFs, which typically relies on external hosting, hotlinking, and the temporary existance of the GIF-supplemented narrative. Any theoretical framework encouraging the use of GIFs must take into consideration the impermanent nature of these web texts in their typical use.