LITERARY HIGH STREET

A Digital Media Studio ProjectProject Documentation - Submission 2

Spring 2012

Jessica Ruiz . Bing Liu . Bethany Wolfe . Yi Yang Haiyan Pan . Qingwen Xie . Guirong Zhang

LITERARY HIGH STREET

OVERVIEW

What is Literaty High Street?Literary High Street is a multi-platform application cre-ated by seven Design and Digital Media students from the University of Edinburgh in celebration of the Literature department’s 250th anniversary. The web-based applica-tion combines interactive map functions with a range of modern to medieval literature. The Literature Department asked us to create a prototype for their Literary Edin-burgh project, an eventual citywide mobile application.

The application is a new web/mobile/walking experience based around Edinburgh’s rich literary presence. The Literature Department provided us with 130 texts to use, of which we selected 24 to build the prototype. All of the texts are centered on the Royal Mile and are geolocated, so that users’ experiences on the Mile are tied to specific literary texts. We wanted to experiment with notions of ‘psychogeography,’ which is how a place evokes differ-ent feelings in people. With Literary High Street, we have the opportunity to tie this feeling to literature and to see how literary texts make a person experience and interpret the city.

ViewtorialWe have created a short viewtorial to demonstrate the use of the application. Please go to the link below to view the video. http://vimeo.com/41145641

Website URLHere is a link to our final prototype website. http://play-ground.ace.ed.ac.uk/~s1147248/DMSP/index.html

{beginning stages of development}

2

TEAM WORKThe Literary High Street Team The LHS team consists of seven Design and Digital Media students from the University of Edinburgh. All with diverse backgrounds, each member brings something unique to the project.

BiosYi Yang is the group’s creative director. He took charge of most HTML and CSS coding for the website design. The group unanimously de-cided to push forward his mock-up design for the prototype. He has brought a clean design approach that focuses on the functionality of the web-application. Yi also designed the poster which included Bing Liu’s transitional photographs.

Jessica Ruiz was in charge of selecting text, geolocating marker positions, and map overlays. This included using the v3 Google Map API, JavaScript, and HTML elements. She also completed miscella-neous group tasks including documentation, blogs posts and bro-chure design.

Bethany Wolfe serves as the LHS team leader. She organized & ran meetings, sent emails, and helped with general group organization. She also completed miscellaneous group tasks including documen-tation and blog posts and creating/narrating the viewtorial.

Bing Liu is the photographer for the LHS project. He created the panorama images of the royal mile and the beautiful transitional pho-tographs. Bing Liu also assisted Yi with website development includ-ing HTML, JavaScript, and audio output.

Guirong Zhang worked on creating the mobile version for the LHS project. This included elements of JavaScript, HTML5, and CSS. Gui-rong also worked with the Google Map API and assisted Yi with web design.

Haiyan Pan created the animation for the LHS project. The animation serves as a playful advert for the LHS application. She also assisted with the miscellaneous tasks including user testing & feedback. Qingwen Xie worked as the primary programmer for the LHS team. She worked with the database, javascript, and html aspects of the project. Her work included using and exploring the use of the v3 Google Map API, HTML5 and JavaScript.

{Bing Liu taking panoramas during our photoshoot on the Mile}

3

Team Work

The TextsThe literary texts are central to our project. These range from the medieval to the modern, fictional to histori-cal. The texts are all about Edinburgh, this fabulous city where we live, work, and attend university. They are var-ied in mood, tone, and subject matter. Some, such as the portions of Robert Louis Stevenson’s Catriona, are de-scriptive, focusing on the look and feel of the city. Oth-ers, like the fragment from Alexander McCall Smith’s The Right Attitude to Rain, comment on Edinburgh’s so-ciety, the humour and hypocrisy. Still others are poems, like Robert Burns’s “Address to Edinburgh.” The poems offer yet more views of the city, praising and damning it.

Sample Text

Of the over 100 texts provided by the Literature department, we selected 24 for inclusion in our prototype website and mobile ap-plication. The texts we selected cover many eras, ranging from classic authors such as Daniel Defoe and Robert Louis Steven-son, to more modern authors like Iain Banks and Liz Lochhead. We selected them for the variance, not just of mood and sub-ject matter but also location. We made sure that the texts cov-ered an area from the Castle to Canongate. We divided it into three journey lengths, short, medium and long, so that users can tailor their experience to how many texts they wish to read.

What we found intriguing is that the texts all present Edinburgh dif-ferently. There are similarities, praising the city’s varying architec-ture, the heights of the hills, amazement at the physical beauty, or looking at the darker underbelly. The seedy is apparent in works like Irvine Welsh’s Trainspotting. Despite these differences, there are similarities. The works all capture Edinburgh’s multiple facets.

“One night in the springtime — or say one morning rather, at the peep of day — late folk may hear the voices of many men singing a psalm in unison from a church on one side of the old High Street; and a little after, or perhaps a little before, the sound of

many men singing a psalm in unison from another church on the opposite side of the way.”

-Robert Louis Stevenson

LITERATURE

4

PsychogeographyThe texts captured Edinburgh’s mood and fall into the psychogeographical realm. Psychogeography is a means of exploring one’s surroundings, developed by Guy Debord and the Situationists International in the mid-20th century. In its most simple form, psy-chogeography is how an environment makes a per-son feel.The texts that were provided all provide a specific view of the Mile, as touched upon previously.

The application itself, through providing texts and imag-es, shapes the way that the users experience the Royal Mile. The application is not a tourist application; rather, it is a psychogeographic experience that anyone can use. The tourist can gain a new look into the city through texts, per-haps they are visiting because of a favourite book. The resident’s morning commute is enhanced and altered, the narratives forcing the user to notice something new.

The Experience

“An urban neighborhood is determined not only by geographical and eonomic factors, but also by the image that its inhabitants and those of other neighborhoods have of it.” -Chombart de Lauwe

5

PanoramasThe panoramas on our website capture the look of the Royal Mile. This is important, as at-home users will be able to explore the Mile when on the other side of the world (or, the other side of the city). A user can feel as though he or she is in the middle of the city, or see what the text is referring to. We aimed to create an immersive environ-ment, and the panoramas are our way of doing just that.

The photos were taken using a Canon 5d cam-era, tripod, and stitched together to create a smooth panorama. We have provided 5 panora-mas with a handful on text in each. For example, If you select a marker near Hunter’s Square, you will find about five other texts in the area.

Photography

Transitional PhotosThe transitional photos, which began as an inspiration project by Bing Liu, have become central to our project. They really represent how the literature is in the city, ever present and often hidden just beneath the surface. There are multiple layers to Edinburgh, which we started to peel away throughout the project.

Edinburgh is a city that has a sense of history and permanency. We explore this through the texts selected. We felt that we needed a visual counterpoint to the texts, something that illustrated how the city has become modern, yet remains connected to the past. Bing’s images, cre-ated by combining old photographs and paintings with his own photog-raphy, do just that. The images give the user a sense of the old and the new, that time is layered. The two worlds exist simultaneously.

6

The map plays a critical role in the Literary High Street ap-plication. From the beginning stages of development, the group had decided that the map would be the focal point of the website homepage. We used the v3 Google Map API that provided us a range of options and functions that suited our project well.

The Maps

As a multi-platform application, the map can be accessed from a personal computer, tablet, or smartphone. The dynamic nature of the appli-cation allows the application to be accessed in any location. For example, someone in California could use the application and the map would populate markers on the Royal Mile. When using the application from a tablet or smartphone on the Royal Mile, the map traces your location while text populate around your location.

Creating a map that worked differently for a mo-bile version as opposed to a personal computer was one of our many technical challenges. We were unsure of how to place bounds on the map if you were in a certain area, and otherwise just display the map of the Royal Mile with all of the markers. Because we wanted the mobile version to track the user’s location, we created a separate map for the mobile version. Both map versions include dynamic markers pulling text information from our website database.

7

8

The Google Map APIWe set off to explore the use of the v3 Google Map API which gave a wide range of options for the group to experiment with. The API documentation was very straight-forward with a range of code samples are available on the API documentation page. That said, members of the group did have to dedicate time to learning and under-standing the API coding and language. A lot of tweaking and experimenting with codes was necessary to create the desired map functions for the LHS website.

We created unique markers that represent different text and journey times on the royal mile. Each marker has an info box and when clicked, unique text information is provided for the user. We also used the v3 Google Map API Overlay function for histori-cal maps and opacity controls. The Journey FunctionAnother function we included was the ‘Jour-ney’ length or ‘tour time.’ This option allows users to select how many text they want to read while using the application. For exam-ple, if a user only has 30 minutes to explore the Royal Mile, they might want to tick the ‘short’ option and a limited group of text markers will populate on the map.

OverlaysThe map overlays were created using the v3 Google Map API Overlay function. The Na-tional Library of Scotland provided the use of historical maps for the LHS team to pick and choose from. Chief map curator, Christopher Fleet, met with the group and walked through how to use the geolocated maps even offering some code samples for the website.

We hope that the overlays contribute to the psychogeographic experience on the royal mile. The maps serve as a representation of project aims and hopefully create a unique experience for users.

Below is a link to check out the overlay’s as an indepdent feature. http://playground.ace.ed.ac.uk/~s1154389/lhsweb/overlay_opacity.html

{Above is a map overlay from 1875 with the opacity set to 50%. There are three opacity options as well as an add/remove feature.}

The API

The mobile version can be used on either a tablet or smartphone platform. When designing the mobile version, we designed an interface that would be friendly and easy to use for the on-the-go user. To use the mobile version, you can either choose the full text through the ‘list’ option, or receive a shorter version of the text through the using the geolocated maps. Guirong Zhang and Wen Xie devel-oped this functionality. The design streamlines and adapts Yi Yang’s website design for the mobile platform. It is best viewed on a tablet, but is also viewable on a smartphone.

Having a mobile version of the website was a key part of the project. It is incredibly important that users can explore the Mile while using the application. The mobile applica-tion allows users to have the texts delivered to them, so that they can read certain texts in the area they are written about.

The team did conducted research in designing for touch screen devices. This article titled, “Designing for Touch” from netmagazine.com, was helpful in describing differ-ences in user experiences for touch screen vs. desktop computers.

Mobile URL Below you can find a link that will direct you to our mobile version. You can also access this version by clicking on the phone icon in the upper-right hand side on the website.

http://playground.ace.ed.ac.uk/~s1147248/DMSP/Mobile.html

Mobile Version

9

Literary High Street is very much a work in progress. It was conceived as the prototype for the larger Literary Edinburgh project. As a prototype, there are several areas that could work better in a final version. Firstly, we ran into a couple of technical difficulties which resulted in scrapping portions of the project. We continuously ran into trouble with the JavaScript, getting the texts to show up and the texts to interact properly with the panoramas. While we do have the texts showing up now, navigating to the texts is not the most user-friendly experience. To read the text, click on a marker. In the dialogue window, select ‘change panorama’ and then select ‘go’ in the main interface. This will bring you to the new page. To return to the map, click ‘back’ on the text page.

Due to our difficulties with the JavaScript and getting the maps to work, we were not able to incorporate Cere-Proc in this version of the website. We felt it was more important to have the mobile and website functioning before adding in another element. Future versions of the website will incorporate CereProc. We also do not have all 130 of the texts included. For our prototype, we wanted to make certain that the website worked, and therefore selected 24 texts. Later versions will include all of the texts.

Lastly, the mobile version is best viewed in Safari. We are not sure why (probably a JavaScript issue or out of date browser) but the version of Firefox installed on the University’s machines does not allow users to click on texts in the List page and read the full text; however, when running tests we noticed that while Safari will not do geolocation, Firefox will. The map overlays are not working due to a JavaScript/geolocation miscommunication.

We hope our project serves as a useful prototype for the larger Literary Edinburgh Project. We have brought a lot of fresh ideas to the project including voice narration and the interactive panoramas. Although we have had a few technical issues, we are very happy with the prototype and hope users can experience literature in a new and exciting way.

Future Developm

ent

10

Thank you to:the University of Edinburgh English Literature Department for the texts,the National Library of Scotland for access to the georeferenced maps.Matthew Aylet and Cereproc for providing the narration,and Mark Wright, John Lee, Miranda Anderson, Amy Guy, and Simon Biggs for guiding our project.

ACKNO

WLED

GEM

ENT

11