Screen Shots of C.C.N.F.

Mapping Page via Google Maps

In addition to textually navigating C.C.N.F. in a variety of ways, one may also navigate the narrative spacially via a map I constructed especially for this project on google maps. Try it out below:

View Larger Map

You may also view the map on its page within the website: http://hannahmarchcampbell.com/ccnf/map.html

And feel free to access the C.C.N.F. Map directly through Google: http://maps.google.com/maps/ms?ie=UTF8&hl=en&msa=0&msid=105796261072621813468.000484758d8536240eb5d&t=h&z=16

The map itself is of a real life undeveloped neighborhood in Winterville, Georgia where much of the narrative within the website takes place. Specific chapters have been plotted to specific locations with blue “landmark” bubbles.

Reader Input: “Questions?” Form

I added a “Questions?” form to the “Help” page: http://hannahmarchcampbell.com/ccnf/help.html

This service is run through the Twitter-like question service called Formspring.

View questions/answers that have been posted already here: http://www.formspring.me/CCNF. If you have a second, please ask some from the bottom of the help page! Thanks!

Interactive Form Page

Today I created a reader-interactive form page where users/readers of C.C.N.F. may send me their additions to the story so it continues to evolve.

Credits go to Chris Coyier for the basic design of the form in his tutorial article “A Nice and Simple Contact Form.”

You can view the “Contributions” Page here: http://hannahmarchcampbell.com/ccnf/contribute.html

Sneak Peek

Besides a few tweeks, I’ve completed my page template. You can view it here: http://hannahmarchcampbell.com/ccnf/ I have also created 5 different CSS style sheets which my be accessed by clicking on the links at the top.  I will replace these text links in the final version with small icons.

My 5 styles are named “main” for a plain look of grays and white; “skin” for a skin-colored appearance with a background image of eyes; “blackout” an all-black design (the text can be read by typing “Command A” [mac] or “Control A” [non-mac] to “select all” text, thereby making it visible; “whiteout” the inverse of “blackout”; and “story map” in the traditional blue, red, white, and cream of the “Story Map” print series from which this website idea originated.  You may also select “no style” to view the plain HTML page structure, links, and text without any CSS styling.

With each link you click to change style, note that you are not going to a new web address or web page–you are merely changing the “style sheet” which the browser is accessing. The browser reads the HTML file, or the webpage itself, i.e. http://hannahmarchcampbell.com/ccnf/index.html for all of the basic information like what the text says (not its actual font or color–but the text itself as symbol,) what the links are and where they go, where the “head” of the page is (this is where code and CSS links are found.)

Things in the “head” of an HTML document are not visible on the page but the browser reads the information there vs. the “body” of the page (this is where the visible content of the page is located), and certain basic structural information like h1 and h2 tags for a larger font at the beginning of a section of type. All of the font styles, colors, locations of boxes of text, borders on blocks of text, text wrapping, image placement, page background image, etc. are controlled by the “style sheet” and, therefore, can be changed at the will of the viewer/reader by using the aforementioned links “main,” “skin,” “blackout,” etc.

Each of these styles will be available on every page within the site. There will be 20-22 separate “story” pages as well as a “help” page explaining navigation, an “about” page explaining the project and its goals, a link to this blog, and possibly a “map” page for an alternate navigation system.

“Net.Art” Aesthetic, CSS, & Inspirational Hypertext Narratives

As a project for an Art History class, C.C.N.F. is, necessarily, speaking to a past web aesthetic. Specifically, the aesthetic of early narrative websites might include: simple text, icons, and small images (for the lower bandwidth access of the past) rather than Flash animations and “slick” menus. Consider such examples as Sunshine69, Delirium, and Oliana Lialina’s “My Boyfriend Came Back From The War.”

As Christiane Paul wrote on page 114 of her text Digital Art, “My Boyfriend Came Back From the War” of 1996 was “…developed into an archive of variations on the work by other artists. The project points to the possibilities for creation and presentation offered by digital networks, such as the infinite reconfiguration of information in an open system.” This, Paul notes, is a special condition of Digital Art, and WWW art, in particular, as museums can generally neither contain nor tolerate this flexibility and remixing of an artist’s work.

Inspired by Lialina and in order to make my text accessible for the same sort of remixing, I will offer a downloadable text document containing all of the original writings if anyone wishes to remix it into a new presentation!

C.C.N.F. is, in part, a tribute to Alexi Shulgin’s Form Art Competition (1997) which encouraged people “…to create art out of formal elements, such as radio buttons, scrollbars, and pull-down menus.” (Digital Art, Christiane Paul, p. 113) except that I am adding narrative and using a more contemporary “formal” element system than HTML: CSS (cascading style sheets), as I have discussed in previous posts (See: Alternate Style Sheets” and “HTML & CSS: Structure and Appearance“).

I am inspired by the aforementioned works Sunshine69, Delirium, and Oliana Lialina’s “My Boyfriend Came Back From The War” and their use of simple elements to create vast pathways of exploration in the fields of Internet Art and Narrative.

Early internet art was produced between the years of 1995 and 1999 and dealt largely with the network itself. (Galloway 219)  As Alexander R. Galloway wrote in his book Protocol: How Control Exists After Decentralization,  “…the first and most important theme of Net art is the Internet itself.  Net addresses its own medium; it deals with the specific conditions the Internet offers.  It explores the possibilities that arise from its taking place within this electronic network and is therefore ‘Net specific.’ Net art plays with the protocols of the Internet, with its technical peculiarities. It puts known or as yet undiscovered errors within the system to its own use.” (Galloway 216).
(Alexander R. Galloway, “Internet Art,” in Galloway, Protocol: How Control Exists After Decentralization, Cambridge, MA, MIT Press, 2004, pp. 208-233)

Experiments in Textuality, Design Reading, and “…the application of psychology in a visual and functional context.”

As I begin to formulate my various style sheets for control of placement and visual aspects of my narrative, I am considering the phrase experiments in textuality as well as the concept of design reading, which bring me back to the post I made yesterday about how “problems” (in my case narrative/plot) are solved with technology through the use of design or, as designer Jason Kottke put it, through “…the application of psychology in a visual & functional context.”

To me, that phrase means playing on the brain’s biases to problem solve. In my case, that means playing on the brain’s natural tendencies to suggest a potential storyline or storylines through my “database” of narrative paragraphs known as Contemporary Creative Nonfictions.

For the purposes of this website, I have narrowed down what I believe to be a few major visual/psychological biases of a viewer when they consider text. I based my decisions on common advertising and web page techniques to create hierarchy of content (which is really what CSS style sheets are all about.) See the article “Designing for a Hierarchy of Needs” for more information.

My main tools of enticing the reader to a particular area of the page, thereby starting them down a particular narrative path will be:

1. Typography: we all have favorite fonts, so this could play a role in our choices. Also, certain fonts are more easily readable (serifed vs. sans serifed.) Bolder fonts, larger fonts, and text in italics receive special attention.
2. Direction: Western cultures are trained to read “left to right,” but there are other ways of going through text such as “right to left,” “bottom to top,” “top to bottom,” “skimming,” and “plowing the field” (the ancient reading practice of “left to right, down, right to left, down, left to right, etc.)
3. Clickability: Viewers might be more interested in hypertext than text because they understand it will lead to more content/further explanation.
4. Color
5. The Text Itself
6. Spacial Hierarchy: Location on the page. This could mean things that come first appear more significant to the reader. Also, as a website viewing population, we are accustomed to the “Header, Sidebar, Content, Footer” grid-like layout of a webpage as well as the implied meanings of each of these areas.

Contemporary Creative Nonfictions will be comprised of 20 separate pages with the possibility of an additional “map” page for navigation. The first page accessed will contain all of the site’s information (a sort of display of the full “database” of action and characters from which the “story” will be created via reader choices in navigation.) Moving through this information by choosing what/where to click will take the reader to a specific piece of narrative on its own page.As the reader clicks on hypertext, they will in a sense be stacking and/or unearthing aspects of the narrative.

Each page itself is created out of simple “div” or “divider” tags wrapped around paragraphs of text, links or information. Viewed without CSS, the text would appear in the reader’s browser defaults, in a traditional hierarchy of Header, Sidebar, Main Content, Footer with the browser default color and size for text, links, background, etc. In addition to being able to navigate a path of one’s choice through the text and hypertext, the reader will also be able to “navigate” through a variety of styles by clicking on their choice of small, colored icons. By clicking on an icon, the information on the page will not change, but the styling of that information will alter accordingly. I.E., the color of the links, the location of the paragraphs, the background color, etc.

To summarize, C.C.N.F. is a “choose your own adventure pathway” style narrative which supplies the reader with a database of mini-narratives which may be navigated according to textual and psychological choices as well as aesthetic ones.

Total Linkage

Today I am thinking that I might make every word, every snippet of text on my pages (or nearly so) should be a link in order to maximize the potentiality of the narrative. I will make the links to both internal and external sites, much in the way of the piece we discussed in class (which I do not remember the name of right now but will look up and update this post with) that was a detective story for a missing person. It even linked to real missing persons databases on the web with a page for the fictional missing person in the story.

In this way, I will be creating a web of both truth and fiction–a personal story net.

Some Interesting Links I found today:

1. Trace Archive, Online Writing Community
2. A PDF on Reading and Writing Fluid Hypertext Novels
3. An article declaring that “cybertext” has killed “hypertext.”
4. An argument for putting History documents into hypertext format
5. Excerpt from an interesting journal article: “Cybernetic Esthetics, Hypertext and the Future of Literature” by Molly Abel Travis; Mosaic (Winnipeg), Vol. 29, 1996

Alternate Style Sheets

In terms of styling my web page (color, font size, font face, and so on,) I would like to put these options in the hands of the user or “reader,” as well. In order to do this, I have been learning about how to implement alternative style sheets and give the user the choice of which style sheet will control the styling attributes of the page they are viewing (see my earlier example of http://dylanjameswagner.com/ where you can change the colors of the page just by clicking on the tiny square graphics in the upper left-hand corner of the page.)

So far, I have learned to create alternate style sheets and how to have them accessible through the “View” menu on your browser menu bar by clicking on “View” and then “Page Style” and then selecting which style sheet you want to control the styling properties of the webpage you are viewing.

I am having trouble, however, putting this choice into the physical page itself as a hyperlink. The Lynda.com tutorials I’ve been using want me to pay more money to learn this new trick, so I’ve been searching the web for answers and have found that it can be done using Javascript. I found this site which describes the Javascript I might need: http://www.alistapart.com/articles/alternate/. I hope I can figure it out, as I think adding styling choices as another option would really help to make the site more dynamic and user-choice oriented.

HTML & CSS: Structure & Apperance

I am creating two narrative website projects this semester. One will be a more visual layout and somewhat more typical of current times in terms of style and design. The second website, which is the one for this course, will be based more on a purely hypertext structure. I will focus on the depth of linkage fields, changing text properties, and exploring multiple possibilities.

In this way, the website for this course will relate more to Alexander Galloway’s idea of the first phase of website art from 1995-1999, in which structure was explored over software and commercial implications explored in the second phase. This website will relate more closely to the history of Internet art by being more about structure than commercial context, but I will introduce some more modern forms of structure/appearance such as CSS.

Originally, HTML (hypertext markup language) was the standard for controlling both structure and appearance of web pages. CSS, or cascading style sheets, were then formed to help describe the appearance of pages, with HTML still being used for basic structure. In current web design, it seems that while HTML is still used for the most basic structure, CSS is starting to control some elements of structural layout as well with properties like “Float.”

Below are some recent inspirational links for this site.

1. I really like both the title of this website as well as their design. As you click on each area, the new pages that appear have small bubbles to click once more and take you off in a variety of directions: Nonfiction Design Collective.
2. These are more visual mapping, but even just the branching structures are inspirational in terms of possible pathways of clicking: Visual Complexity
3. The Web of Data: Creating Machine-Accessible Information discusses the three main forms of the Internet: “…the Web of Data, the Web of Services, and the Web of Identity providers.” I am particularly interested in the Linking Open Data (LOD) project.
4. The layout of constellations in the sky is an interesting metaphor for “images” created by following a certain hypertext narrative path. The Snail and the Cyclops

Linking Open Data