Showing posts with label class-assignment. Show all posts
Showing posts with label class-assignment. Show all posts

Thursday, January 23, 2014

Resources for Today's class: 1/23/14

HTML - basic definitions.

A basic HTML intro, from a great web design resource site, W3schools:

http://www.w3schools.com/html/html_intro.asp

HTML elements:

http://www.w3schools.com/html/html_elements.asp

A guide on how to write html using TextEdit (taken from about.com):



If you use a Macintosh, you don't need to buy or download an editor to write HTML. You have a perfectly functional editor built into your operating system -- TextEdit.

For many people this is all the HTML editor they will ever need.

There are only a few steps to creating a Web page with TextEdit:

Open TextEdit
Open a Finder window
Switch to the Applications folder
Scroll down to TextEdit and double-click on it


Change the format to plain text
TextEdit defaults to a rich text format, so you need to switch it to plain text to write HTML
Open the Format tab
Choose "Make Plain Text"
You can also hit Shift-Apple-T to switch to plain text


Start writing your HTML
Remember that you need to be more careful than in an actual HTML editor. You won't have elements like tag completion and validation.

Save your HTML to a file
This is the tricky part. TextEdit normally saves files as .txt. But since you're writing HTML, you need to save the file as .html.
Go to the File menu
Choose Save As... (or Shift-Apple-S)
Change the file extension from .txt to .html
A popup will ask you if you want to append the extension ".txt" to the end. Choose "Don't Append"

Opening an html file in TextEdit(from www.askdavetaylor.com):


Go to TextEdit --> Preferences... and choose "Open and Save". You'll see:


The key is the first option under "When opening a file": you want to check Ignore rich text commands in HTML files. Check that option, then quit TextEdit.
It turns out you can also do this by manually selecting File --> Open..., choosing the file, and also selecting the option in the Open dialog window of "Ignore rich text commands", but since i'm always double-clicking on files or otherwise launching TextEdit, it's a much easier solution to simply fix the preferences and never worry about it again.

Here is a battery of links that may be useful to you in the formatted poem, our first html-based assignment:

I want you to take a poem or song lyrics, and use text formatting to "design" the text in ways that emphasize properties of the poem/song (for instance, if there is a line that's very angry, perhaps the font is larger and red for that section). I want you to use at least six different text properties (color, font face, size, alignment, etc.) in the course of the poem/song.

Links to CSS text and font info:



http://www.w3schools.com/css/css_text.asp


http://www.w3schools.com/css/css_font.asp

The "span" tag (for modifying elements outside of "p" and "header" tags):

http://www.w3schools.com/tags/tag_span.asp

Web colors:

http://www.w3schools.com/html/html_colors.asp



Link to CSS examples:

http://www.w3schools.com/CSS/css_examples.asp

An online resource for getting the text of a poem:

http://www.bibliomania.com/

Emily Dickinson, defaced via CSS:



http://sncweb.110mb.com/class/EMILY_PLAIN.html

Monday, April 29, 2013

Web Design Final

Please fill out the course evaluation form at:

https://www.surveymonkey.com/s/Lanier_Christian_DART_305_405

Our final is officially on Tuesday, May 14,  from 8-11; however, it will only take us a couple hours to cover what we need to cover, so we'll meet from 9-11.

On the final, you will give an oral presentation on your finalized website - this will be accompanied by a short written essay about your website, posted to this blog (which should also include a link to your completed website). The oral presentation and written essay will be about your visual design choices, and your problem-solving accomplishments, and will specifically address the following questions:

1. How would you describe the overall "look and feel" of your site? What choices did you make to arrive at that look and feel, and how does the end result relate to the audience you are trying to attract to your site? What assumptions do you think your audience will make about you, and why?

2. Describe the choices you made in picking and displaying images on your site. How would you describe the emotional and aesthetic qualities of the images you are using? Address the sizing, composition, and general color palette of your images, as well as the content of the images themselves.

3. Describe your choices in picking fonts, color palettes, and layout. What were the choices you made in each of these areas, and why? How do they relate to the sorts of design choices you see in websites from "genres" that are similar to yours? Pick a competitor website, and compare and contrast the design choices your competitor made.

4. Pick two major problems you solved over the course of designing your website - they can be technical problems, content problems, or design problems. In each case, how did you identify the problem, what was the solution to the problem, and how did you figure out that solution? Feel free to re-purpose material from your problem log for this.

5. What is your plan for getting visitors to your site? Please research how sites in your "genre" have generated audiences for themselves.




Thursday, February 21, 2013

Tuesday assignment: starting your problem log

Due next class, Tuesday the 26th -- I want you to post, to the blog, the first draft of a document that will list out the problems you have encountered and solved in the course of your website project. I'm not looking for a full academic paper, with full sentences, and so on -- but I do want you to make a list of the technical and design issues that have presented themselves to you, and the solutions you found for them. Start your document with an opening paragraph explaining what your site is, who the intended audience is, and then list out the various problems you have encountered and solved. Label the post with the tag "problems."

For instance, two years ago, I know when Ethan Rollo was first using Wix, there was a white halo around some of the graphics he uploaded to his site -- and I believe fixing it was a matter of saving his images in the PNG 24 format. And another issue was the long load-time for his shopping gallery -- fixing that meant finding out what the maximum display size was for the gallery pics, and scaling his images down to that size before uploading them, drastically reducing their file sizes. So a "Problem-Solving" list could simply go:

Problem: uploaded graphics have white halo.
Solution: Used PNG 24 format with transparency for images with a transparent background.

Problem: Long load-time for shopping gallery.
Solution: Found out pixel dimensions of the gallery windows, and downsized gallery pictures to that size before uploading.


If there are helpful links for any of your solutions, include them as well. For instance, I know Nick Cahill, when he took the class, looked at a few options for javascript slideshows -- a list item with a link could go:

Problem: Wanted a slideshow with thumbnails, not flash-driven, so it would show on iPads.
Solution: galleria slideshow: http://galleria.aino.se/; found out it can be modified by changing options in the code (see this page: http://galleria.aino.se/docs/1.2/options/); if there is more than one option used, use a comma between options to separate them.


Not all problems have to be strictly technical problems. For instance, they could relate to decisions you make in terms of using imagery on your website, or the way you name your navigation bars, or the way you manage comments on a forum in your site – problems that relate to design, or to capturing the audience you intend to capture.

I'm interested in having you go through this process for a number of reasons -- one, to develop some documentation on your own problem-solving process, and two, to build up a sort of database of helpful hints that can be posted to the blog -- and which you (and other students) can refer to if you encounter any similar web design problems. This will be a single post that you update as you go along -- clicking on the "edit post" option (the little pencil that appears under your post) to add to your list.

Obviously, you first post is only going to have the beginning stages of this process. This first post should include:

1. What your site is – this should be more than a one-sentence description; it should be a full paragraph, if not two or three. Imagine that you have to write up a description of your prospective website to secure funding, or to explain the details to a design firm you are hiring to design it. What are the features of the site, and how will it stand out from other sites that have similar content?

2. Who the intended audience is. What is their demographic, and what do you intend to do to attract and retain their attention?

3. By now, you should have chosen the two hosting options for your site, whether you are making it from scratch, or using a hosting/template service. Explain which options for hosting you chose, and why. Are their features that will make it easier for you to update content? Are their features that will allow you to capture your audience in some important way? This is a very early "problem" in building a site: what platform (or platforms) are you going to use to create it?

Wednesday, February 20, 2013

Assignment: Research your platform/template

YOUR ASSIGNMENT FOR TUESDAY IS TO REVIEW THE OPTIONS FOR YOUR WEBSITE, LINKED BELOW, INVESTIGATE WHICH ROUTE WOULD MAKE THE MOST SENSE FOR YOUR SITE, AND CHOOSE YOUR HOSTING OPTION.

If you're building a site for that you're hosting yourself, there are many templates available here:

http://www.free-css-templates.com/

For more, google "free css templates"

For a hosted, customizable template solution, you can use:

http://www.weebly.com/

You sign up, enter a name for the site, and hosting with the "weebly" in the url is free (I set up a quick test site at:
http://sncwebclass.weebly.com)

For a hosted, customizable HTML5 solution, you can use:

http://www.wix.com/

Like weebly, this is free with "wix" in the URL; you have to pay something for a domain name without the "wix."

Here's a wix site a student made two years ago (with the flash option):

http://www.wix.com/andremacdrizzle/localknits

For a customizable template with social networking options, there's this (which, at it's cheapest level, costs about $20/yr):

http://www.ning.com/

If you're using a blog platform, here are some options:

blogger.com

You can add static pages to your blog with the "Pages" option in your blog editor.

Here are some wordpress links – wordpress can be easily integrated into your site with godaddy as a host:

http://wordpress.com/

Sites powered by wordpress.

http://www.wordpresstemplates.com/

The jetpack plugin for wordpress:

http://jetpack.me/

Tuesday, February 12, 2013

References for class: 2/12

Today, in class, I'd like you to choose an html template from Dreamweaver (one of the two-column options with a header and footer), and re-style several elements. Don't just change the elements in a random manner – try to make all your styling cohere into an attractive design. There are at least six elements I want you to alter:

1. Insert new text, instead of the Dreamweaver "dummy" text. You can use Lorem Ipsum text.
2. Style the text differently.
3. Change the margins and/or padding on some elements.
4. Insert a few links in the text, and change the styling of the links.
5. Insert at least two images, and "float" them relative to the text.
6. Change the background color of all the elements (header, footer, sidebar, content).

And here are some links to online color palette resources:

Colour lovers

 Design seeds

Thursday, February 7, 2013

Web References for Thursday, 2/7

Using list elements to make a nav bar:

http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/

After I've gone over this page, take the source code from the finished example, then paste it into a blank text edit file, and save it as an html page to your computer. Edit the css for the page, and make the following stylistic changes:

1. change the names of all the nav buttons, and make them all external links to actual websites.

2. change the font face in the nav bar.

3. change the color of the nav bar, including in the "hover" state.

4. change the dimensions of the padding on the nav bar.


Your assignment for Tuesday's class is to have:

1. A website wireframe prepared for one of the sites you picked that is in the same "genre" of the site you'd like to make, their first and second level pages. A wireframe example (click to enlarge):



2. Make a website flowchart as well (you can do a google image search for "website wireframe" and "website flowchart" to see examples).

 A flowchart example (click to enlarge):



Be ready to talk about the sites you analyzed (via drawing up the wireframe and flowchart) with your fellow classmates next class. Write and print out a list: what were the elements you liked about the site? What are the elements you disliked about the site? What elements would you like to incorporate into your own site?

I usually use illustrator for doing up wireframes and flowcharts -- if you have any familiarity with Illustrator, it's a good tool for dealing with text, lines, and boxes. There's a tutorial here that has some good time on wireframing in Illustrator.

Photoshop would be fine too -- though if you're unfamiliar with both Photoshop and Illustrator, I'd recommend just drawing these out by hand. Just make sure the names for all the navigation and content are legible. It might help to use graph paper.

The wireframe is to give an idea of all the pieces of content you need on a particular page. There might be some layout information in it, but it's far more about content than design. And since most sites have homepages that function differently than their interior pages, it's necessary two have at least two wireframes (for first and second tier page functionality) to give an idea of what's going on.

A flowchart, on the other hand, doesn't give an idea of everything that's on a page, but rather gives an idea of how the site as a whole is organized -- how the menu breaks the site into various sections, that may or may not have subsections. You don't need to draw out every single page, but you do need to draw out each section or subsection of your site.

The reasoning behind this exercise is to get you to dig deeply into the site architecture of a site that is trying to solve the same sorts of problems you'll want to solve for your own website. It will hopefully give you some ideas on how to organize your own site (or how not to organize it, as the case may be).

Tuesday, February 5, 2013

Assignment for Thursday's (2/7) class

On this blog, post a one or two paragraph description of the website you'd like to make for the first major "website project" for this class, and provide at least five links to websites that are in the same "genre" of the website you'd like to make -- make sure at least two of the links are sites you think are designed particularly well. In your paragraph, be sure to include who you think the audience for your website will be.

Wednesday, January 30, 2013

Resources for class, 1/31

The "href" tag:

http://www.w3schools.com/tags/att_a_href.asp

The "img" tag:

http://www.w3schools.com/tags/tag_img.asp

Aligning images with CSS:

http://www.devlounge.net/design/aligning-images-the-right-way-using-css

Here's a downloadable zipped file with css and an image to play with:

http://www.box.net/shared/j96gr8e650

Here's a paragraph from a story we'll be talking about today -- and creating some hyperlinks with as well:

I said out loud: I must flee. I sat up noiselessly, in a useless perfection of silence, as if Madden were already lying in wait for me. Something--perhaps the mere vain ostentation of proving my resources were nil--made me look through my pockets. I found what I knew I would find. The American watch, the nickel chain and the square coin, the key ring with the incriminating useless keys to Runeberg's apartment, the notebook, a letter which I resolved to destroy immediately (and which I did not destroy), a crown, two shillings and a few pence, the red and blue pencil, the handkerchief, the revolver with one bullet. Absurdly, I took it in my hand and weighed it in order to inspire courage within myself. Vaguely I thought that a pistol report can be heard at a great distance. In ten minutes my plan was perfected. The telephone book listed the name of the only person capable of transmitting the message; he lived in a suburb of Fenton, less than a half hour's train ride away.

Here's the wikipedia page for the story, which contains a link to the full text of it.

Lastly, for Tuesday's class, I'd like you to read the below article about hypertext (from the defunct website "five standing"), and answer the following questions (print out your responses and bring them to class):

a. List three ways in which reading on the internet is different than reading from a book.

b. How is the web-reading experience "non-linear"? And how does linear thinking differ from non-linear thinking?

c. In what way does non-linear reading invite us to be the "author" of texts that we read, even if we didn't in fact write those texts?



'Naturally my attention was caught by the sentence, "I leave to various future times, but not to all, my garden of forking paths." I had no sooner read this, than I understood. The Garden of Forking Paths was the chaotic novel itself. The phrase "to various future times, but not to all" suggested the image of bifurcating in time, not in space. Re-reading the whole work confirmed this theory. In all fiction, when a man is faced with alternatives he chooses one at the expense of the others. In the almost unfathomable Ts'ui Pen, he chooses - simultaneously - all of them. He thus creates various futures, various times which start others that will in turn branch out and bifurcate in other times. This is the cause of the contradiction in the novel.'
Jorge Luis Borges, 'The Garden of Forking Paths'


The Internet brings with it a new format of communication and thus affects and challenges our assumptions regarding textuality, reading, writing, and authorship. Hypertext implies and, paradoxically, demands new methods of writing and inevitably produces an extended text, one that is made up of individual, and sometimes, independent fragments that coalesce to create a whole greater than the sum of its constituent segments.

There are numerous essential differences between a hypertext and a written text. Primarily, instead of encountering it in a paper copy, the text is read on a computer screen. Contemporary screens, which have neither the portability (unless one owns a lap or palmtop computer) nor the tactility of printed books, make the act of reading somewhat more difficult - imagine sitting back on your bed or couch, a steaming cup of coffee on the table next to you and your favourite book in your lap. Now imagine doing this with a computer screen. Impossible. This is an immediate hindrance.

Reading a hypertext does, however, offer certain advantages - the reader can change the size and even style of font to facilitate the act of reading. Although such vacillate modifications cannot be permanently implemented in the text as seen by others, the reader is capable of making them whenever he or she wishes to. More importantly, the reader is in control of the text. He or she can move forwards and backwards through the text, changing and manipulating the text into fresh permutations, each alteration bringing new meaning to the text, increasing the interpretory vicissitude and creating a perceptual dissonance unique to the reader.

Hypertextual Consciousness is the science of writing displaced into a cyberspatial geography, a transcendental region where language is able to evolve, adapt and synchronise itself with the machine. Once this symbiotic interaction between language and narrative environment makes its way into cyberspace's eidolonic reality, then the Hypertextual Consciousness itself, as an 'event horizon' in the development of the gestalt-self, makes it possible for a discursive network to continually circulate without any need for something as overdetermined as the single reader (or indeed, the singleauthor.

Hypertext, as a concept, suggests an alternative to the more inflexible, authoritarian linearity of a conventional text. In the middle of reading a hypertext (and it is arguable that the reader is continuously in the middle of reading a hypertext), the reader is supplied with a number of options to select from so as to break away from the text-block being presently read, thus the reader become complicit in the manner in which the text unfolds and enabling him or her to immediately enter a new writing or textual space.

These options are reminiscent of the remote-control devices we use to 'channel-surf' with our televisions. A hypertextual viewing style would be one where the reader actively 'clicks' their way into new graphological, textual or audio-visual spaces. Hypertext, as a more narratologically-generated,
manually manipulated reading format, can be construed as a kind of literary MTV.

Roland Barthes describes an ideal textuality that precisely matches that which has come to be called hypertext. That is to say, a text composed of blocks of words (or images) linked electronically by multiple paths, chains, or trails in an open-ended, perpetually unfinished textuality described by the terms link, node, network, web, and path: 'In this ideal text,' says Barthes, 'the networks are many and interact, without any one of them being able to surpass the rest; this text is a galaxy of signifiers, not a structure of signifieds; it has no beginning; it is reversible; we gain access to it by several entrances, none of which can be authoritatively declared to be the main one; the codes it mobilises extend as far as the eye can reach, they are indeterminable...; the systems of meaning can take over this absolutely plural text, but their number is never closed, based as it is on the infinity of language'.

Like Barthes, Michel Foucault conceives of text in terms of network and links. In The Archaeology of Knowledge, he points out that the 'frontiers of a book are never clear-cut,' because it is caught up in a system of references to other books, other texts, other sentences: it is a node within a network... a network of references'.


Like almost all structuralists and poststructuralists, Barthes and Foucault describe text, the world of letters, and the power and status relations they involve in terms shared by the field of computer hypertext. Hypertext, a term coined by Theodor H. Nelson in the 1960s, refers also to a form of electronic text, a radically new information technology, and a mode of publication. 'By 'hypertext,'' Nelson explains, 'I mean non-sequential writing - text that branches and allows choices to the reader, best read at an interactive screen. As popularly conceived, this is a series of text chunks connected by links which offer the reader different pathways'. Hypertext denotes text composed of blocks of text - what Barthes terms a lexia - and the electronic links that join them.

Hypermedia extends the notion of the text in hypertext by including visual information, sound, animation, and other forms of data. As hypertext links one passage of verbal discourse to images, maps, diagrams, and sound as easily as to another verbal passage, it is relatively easy for the computer based medium to effectively combine these into an aggregate product - hypertext intimates an information medium that links verbal and nonverbal information. Electronic links connect lexias 'external' to a work as well as within it, thereby creating a text that is experienced as a nonlinear, or, more properly, as multilinear or multisequential. Although conventional reading habits apply within each lexia, once one leaves the shadowy bounds of any text unit, new rules and new experience apply.


If you wish to continue investigating 'hypertext' and 'narrative theory', you may find it beneficial to examine the weblinks provided in the 'links' section of this website, as it is far easier to unearth information online than from physical texts. However, if you prefer to examine text books, I suggest you track down some of the following.




  • Amiran, Eyal and John Unsworth; Essays in Postmodern Culture, (Oxford University Press, 1993)
  • Bal, Mieke; Narratology: Introduction to the Theory of Narrative, (University of Toronto Press, 1997)
  • Barthes, Roland; S/Z, trans. Richard Miller, (1970)
  • Coste, Didier; Narrative As Communication, (University of Minnesota Press, 1989)
  • Currie, Mark; Postmodern Narrative Theory, (Macmillan Press Ltd, 1998)
  • Danow, David K.; Models of Narrative: Theory and Practice, (St. Martin's Press, 1997)
  • Genette, Gerard; Narrative Discourse: An Essay in Method, (Cornell University Press, 1979)
  • Gibson, Andrew; Towards a Postmodern Theory of Narrative, (Edinburgh University Press, 1996)
  • Landow, George; Hypertext: the Convergence of Contemporary Critical Theory and Technology, (1992)
  • Landow, George; Hyper/Text/Theory, (The Johns Hopkins University Press, 1994)
  • Lehman, Daniel W.; Matters of Fact: Reading Nonfiction over the Edge, (Ohio State University, 1997)
  • Martin, Wallace; Recent Theories of Narrative, (Cornell University Press, 1986)
  • Mitchell, W.J.T.; On Narrative, (University of Chicago Press, 1981)
  • Phelan, James; Narrative As Rhetoric: Technique, Audiences, Ethics, Ideology, (Ohio State University, 1996)
  • Rabinowitz, Peter J.; Before Reading: Narrative Conventions and the Politics of Interpretation, (Ohio State University, 1997)
  • Richardson, Brian; Unlikely Stories: Causality and the Nature of Modern Narrative, (Univeristy of Delaware Press, 1997)
  • Richter, David H.; Narrative/Theory, (Longman Publishers, 1995)
  • Roemer, Michael; Telling Stories: Postmodernism and the Invalidation of Traditional Narrative, (Rowman and Littlefield Publishers, 1995)
  • Schank, Roger C. and Gary Saul Morson; Tell Me a Story: Narrative and Intelligence, (Northwestern University Press, 1995)
  • Tabbi, Joseph and Michael Wutz; Reading Matters: Narrative in the New Media Ecology, (Cornell University Press, 1997)




Last updated: Monday, 10th May 1999
[ back | five standing | the team | technical considerations | links ]

Monday, January 28, 2013

Resources for 1/28 class

HTML - basic definitions.

A basic HTML intro, from a great web design resource site, W3schools:

http://www.w3schools.com/html/html_intro.asp

HTML elements:

http://www.w3schools.com/html/html_elements.asp

A guide on how to write html using TextEdit (taken from about.com):



If you use a Macintosh, you don't need to buy or download an editor to write HTML. You have a perfectly functional editor built into your operating system -- TextEdit.

For many people this is all the HTML editor they will ever need.

There are only a few steps to creating a Web page with TextEdit:

Open TextEdit
Open a Finder window
Switch to the Applications folder
Scroll down to TextEdit and double-click on it


Change the format to plain text
TextEdit defaults to a rich text format, so you need to switch it to plain text to write HTML
Open the Format tab
Choose "Make Plain Text"
You can also hit Shift-Apple-T to switch to plain text


Start writing your HTML
Remember that you need to be more careful than in an actual HTML editor. You won't have elements like tag completion and validation.

Save your HTML to a file
This is the tricky part. TextEdit normally saves files as .txt. But since you're writing HTML, you need to save the file as .html.
Go to the File menu
Choose Save As... (or Shift-Apple-S)
Change the file extension from .txt to .html
A popup will ask you if you want to append the extension ".txt" to the end. Choose "Don't Append"

Opening an html file in TextEdit(from www.askdavetaylor.com):


Go to TextEdit --> Preferences... and choose "Open and Save". You'll see:


The key is the first option under "When opening a file": you want to check Ignore rich text commands in HTML files. Check that option, then quit TextEdit.
It turns out you can also do this by manually selecting File --> Open..., choosing the file, and also selecting the option in the Open dialog window of "Ignore rich text commands", but since i'm always double-clicking on files or otherwise launching TextEdit, it's a much easier solution to simply fix the preferences and never worry about it again.

Here is a battery of links that may be useful to you in the formatted poem:

Links to CSS text and font info:



http://www.w3schools.com/css/css_text.asp


http://www.w3schools.com/css/css_font.asp

The "span" tag (for modifying elements outside of "p" and "header" tags:

http://www.w3schools.com/tags/tag_span.asp

Web colors:

http://www.w3schools.com/html/html_colors.asp



Link to CSS examples:

http://www.w3schools.com/CSS/css_examples.asp

An online resource for getting the text of a poem:

http://www.bibliomania.com/

Emily Dickinson, defaced via CSS:



http://sncweb.110mb.com/class/EMILY_PLAIN.html

Wednesday, March 21, 2012

Resources and Templates for websites

YOUR ASSIGNMENT FOR MONDAY IS TO REVIEW THE OPTIONS FOR YOUR WEBSITE, LINKED BELOW, INVESTIGATE WHICH ROUTE WOULD MAKE THE MOST SENSE FOR YOUR SITE, AND CHOOSE YOUR HOSTING OPTION.

If you're building a site for that you're hosting yourself, there are many templates available here:

http://www.free-css-templates.com/

For more, google "free css templates"

For a hosted, customizable template solution, you can use:

http://www.weebly.com/

You sign up, enter a name for the site, and hosting with the "weebly" in the url is free (I set up a quick test site at:
http://sncwebclass.weebly.com)

For a hosted, customizable flash solution (with lots of potential for interactive animations), you can use:

http://www.wix.com/

Like weebly, this is free with "wix" in the URL; you have to pay something for a domain name without the "wix." It also looks like they have added HTML5 sites as an option.

http://www.wix.com/flash-templates/classic-portfolio

Here's a wix site a student made last year:

http://www.wix.com/andremacdrizzle/localknits

For a customizable template with social networking options, there's this (which, at it's cheapest level, costs $20/yr):

http://www.ning.com/

If you're using a blog platform, here are some options:

blogger.com

You can add static pages to your blog through the edit/ass posts menu - go to the "posting" tab, and click the "add pages" tab underneath.

Tips for making a website with blogger.

http://wordpress.com/

Sites powered by wordpress.

http://www.wordpresstemplates.com/

Tuesday, March 6, 2012

Notes for Tuesday, March 6

Hi all. My apologies for not showing up today, I'm very under the weather – feeling like death warmed over, pretty much, but I picked up some antibiotics and will definitely be there this thursday, even if I'm still feeling crummy, so we can have a decent check-in before spring break.

I was going to have you look at each others' initial round of designs for the first-and-second level web pages, so we could all get some ideas, and you could get some feedback on your designs. Instead, I'll just have you push on and continue to work on your second, "alternate" design for those pages. It would be great if you could have all four of your pages (first design of home and second-level page, "alternate" design of home and second-level page) by the beginning of next class, and then we'll look at your work on Thursday.

I'd recommend you show your current work to whoever sitting next to you, to get some feedback in process. Again, sorry to not be there today, but have a good work period – I'm looking forward to seeing your designs on Thursday.

ALSO- AND THIS IS VERY IMPORTANT - THURSDAY IS YOUR LAST SHOT FOR GETTING MISSING ASSIGNMENTS TO ME BEFORE THE MIDTERM.

As I've said in class, I will accept late assignments (with a grade point knocked off them for a penalty) - but a late assignment is much better for your grade than an entirely missed assignment. Your finished website if going to make up the bulk of your final grade for the class, but if you've been blowing off a lot of these smaller assignments, it's really going to bite into that grade. As always, you can click on the "sort class assignments" link on the left sidebar of this blog, under "Useful Links," to see all class assignments, but I'll make it one easier by listing out the assignments to date (leaving off the in-class assignments we've done):

- Your position on copyright and "transformative works" (printed)
- List of five design elements of the most successfully designed site in your "genre" (blog post)
- Wireframe/flowchart for your site (printed)
- Wireframe/flowchart of one site in your "genre" (printed)
- Description of the site you're making for this class, with links to five sites in a similar "genre" (blog post)
- Response to the article about Hyperlinking - how the internet changes reading (printed)
- SOPA/PIPA stance (printed)
- Outline of the design/format of a website you visit, for your presentation (printed)
- Intro post on this blog, with picture and description of yourself (blog post)

Tuesday, February 28, 2012

Due Thurs, March 1: One set of photoshop designs

At the beginning of Thursday's class, you need to have two pages mocked up for your website, in photoshop: one homepage, one second-level page. The design should be consistent across the two pages. We'll take a look at them in class.

Thursday, February 23, 2012

Assignment for Tuesday (2/28)

At the beginning of class Tuesday, one photoshopped design for your homepage is due.

In addition, download the a case study on copyright and fair use here. We'll be discussing the case study next class. It's about intellectual property rights, particularly in light of digital media and the internet as a distribution system.

For this class, you won't be answering all the questions at the end of the case study, just Part 1. A and Part 2. A, the questions below. Write your answers and have a printed out version to hand in to me during the class.

A. Explain how your solution defines/ interprets “transformative”? What is the intention of this language? Where is the line between “sufficiently” transformative and “not” transformative? Consider the social benefits and costs of your solution

A. Lay out how, in your solution, the proposed language modification would work in practice? Who will determine “transformative”? Would a new office be assigned this task or can it be absorbed into current duties? What would it allow in terms of creativity? How would artists, record label companies and music publishers be guaranteed satisfactory compensation? How would artists, individuals and groups get access to material?

Tuesday, February 21, 2012

References for Tuesday, 2/21

Now we'll take your wireframes to the next step – actually doing layout and design, using the content you set down in the wireframe as a guide. Ultimately, I want to see two distinct design variations for your site, and I want to see a homepage design and a second-level page design (since you're making two contrasting designs, this will total 4 pages of design mock-ups: style 1, homepage and second-level page, and style 2, homepage and second-level page).

Before starting on your designs, I want you to make a post on this blog, focusing on the design of one site that you flagged as being in the genre of the site you're making – pick the one that has the most appealing design to you. In the blogpost, list out at least five specific, concrete elements of that design. I'd like you to use those elements as a sort of guide for one of your designs. It's important that you can identify the successful elements of that design – without duplicating the design itself. This is basically an exercise in slowing your eye down, and helping make you more aware of design choices, so that you can be more conscious in your own design choices.

Once you've worked out one design, I want you to start on a design where you're making deliberately different choices, for a different look and feel. Some areas to focus on could be:

Different palette
Different font choices
Different layout of elements
Different images or relationship of images to text



Here are some resources that we'll look into during class:

The 960 Grid System

960 grid examples here

Breaking out of the grid

Palettes

Fonts

Free stock photos

A good guideline for the "above the fold" dimensions of your site would be 960x600 pixels.

Wednesday, February 15, 2012

References and downloads for Thursday, 2/16

The CSS Box Model:

http://www.w3schools.com/css/css_boxmodel.asp

The position declaration:

http://www.w3schools.com/Css/pr_class_position.asp

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Positioning elements with CSS:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

CSS Positioning Tutorial below. Note -- there are a couple glitches in the directions. Step 11 should say "{h3}Sidebar" instead of "{h2}Sidebar." Step 17 is completely erroneous, and will result in a file where the bottom of the content in the sidebar will push down all the content in the "Maincontent" div from the second header. Instead of following the directions on the pdf, do the following:

For the CSS rules for the "maincontent" div, add a "float left" property. In order for the text in the "maincontent" div to have some space between it and the sides of the div, add 20 pixels of padding to the left and right margins. Add 5 pixels of padding to the left and right margins of the "sidebar" div as well. Finally, add the "clearfloat" class to a "br" tag just before the footer, following the directions at the bottom of page 14.


http://www.box.net/shared/e1xxy2tyib

The start.html file to begin the tutorial:

http://www.box.net/shared/fefsodgohv

Follow this tutorial to page 17 only – disregard the last three pages.

Tuesday, February 14, 2012

Materials and reference for today's class (2/14)

An intro to the Dreamweaver Interface:

http://www.webtrixportal.com/dreamweaverinterface.html

Today, in class, I'd like you to choose an html template from Dreamweaver (one of the two-column options with a header and footer), and re-style several elements. Don't just change the elements in a random manner – try to make all your styling cohere into an attractive design. There are at least six elements I want you to alter:

1. Insert new text, instead of the Dreamweaver "dummy" text. You can use Lorem Ipsum text.
2. Style the text differently.
3. Change the margins and/or padding on some elements.
4. Insert a few links in the text, and change the styling of the links.
5. Insert at least two images, and "float" them relative to the text.
6. Change the background color of all the elements (header, footer, sidebar, content).

Thursday, February 9, 2012

Assignment for Tuesday (2/14)

For next class, please have a wireframe for the site you're going to make. You will hand in four pages total.

I want to see a wireframe of the homepage, and a second-level page.

Then, I want to see another version of that homepage and second-level page, with you re-thinking the "buckets" (the titles for your navigation, and perhaps even some of the organizational logic behind the categories for your "buckets").

Thursday, February 2, 2012

Resources for Thursday (2/2)

Using list elements to make a nav bar:

http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/

After I've gone over this page, take the source code from the finished example, then paste it into a blank text edit file, and save it as an html page to your computer. Edit the css for the page, and make the following stylistic changes:

1. change the names of all the nav buttons, and make them all external links to actual websites.

2. change the font face in the nav bar.

3. change the color of the nav bar, including in the "hover" state.

4. change the dimensions of the padding on the nav bar.


Your assignment for Thursday's class is to have:

1. A website wireframe prepared for one of the sites you picked that is in the same "genre" of the site you'd like to make, their first and second level pages. A wireframe example (click to enlarge):



2. Make a website flowchart as well (you can do a google image search for "website wireframe" and "website flowchart" to see examples).

 A flowchart example (click to enlarge):



Be ready to talk about the sites you analyzed (via drawing up the wireframe and flowchart) with your fellow classmates next class. Write and print out a list: what were the elements you liked about the site? What are the elements you disliked about the site? What elements would you like to incorporate into your own site?

I usually use illustrator for doing up wireframes and flowcharts -- if you have any familiarity with Illustrator, it's a good tool for dealing with text, lines, and boxes. There's a tutorial here that has some good time on wireframing in Illustrator.

Photoshop would be fine too -- though if you're unfamiliar with both Photoshop and Illustrator, I'd recommend just drawing these out by hand. Just make sure the names for all the navigation and content are legible. It might help to use graph paper.

The wireframe is to give an idea of all the pieces of content you need on a particular page. There might be some layout information in it, but it's far more about content than design. And since most sites have homepages that function differently than their interior pages, it's necessary two have at least two wireframes (for first and second tier page functionality) to give an idea of what's going on.

A flowchart, on the other hand, doesn't give an idea of everything that's on a page, but rather gives an idea of how the site as a whole is organized -- how the menu breaks the site into various sections, that may or may not have subsections. You don't need to draw out every single page, but you do need to draw out each section or subsection of your site.

The reasoning behind this exercise is to get you to dig deeply into the site architecture of a site that is trying to solve the same sorts of problems you'll want to solve for your own website. It will hopefully give you some ideas on how to organize your own site (or how not to organize it, as the case may be).

Tuesday, January 31, 2012

Class References: tables & iframe

Here's where our hypertext "story" will be hosted:

http://snc-web-class.netne.net/

I'll use the file manager to upload the files:

http://file-manager.000webhost.com/file-manager/index.php

This is a free service through 000webhost.

Here is some more information on how to deploy images as backgrounds for a page:

Setting a background image via CSS.

Setting a background image to 100% of a browser window.

Here are some references for a couple html tags we'll be examining today:

HTML: tables.

HTML: the iframe tag.

Download a "vanilla" table with comments:

http://www.box.com/s/9vnv4xjdtrk9aoik3zxi

Please download the above file, and using some of the methods shown in class, I want you to make the following adjustments to the table:

1. Give the table a border.
2. Make one table cell an iframe.
3. Use one instance of a colspan or a rowspan.
4. Adjust the color of at least one table element.
5 Incorporate two images into your table.

If you can do all this quickly, then take a shot at using css to style some of these elements, rather than inline html. Here is a reference for styling tables with CSS:

http://www.w3schools.com/css/css_table.asp

Here is a great gallery of css-styled tables:

http://icant.co.uk/csstablegallery/tables/97.php

And here's a table with some css styling, for you to download and play with:

http://www.box.com/s/oyemzoe47i4h1vnqcq1u

Lastly, here is your assignments due before the start of Thursday's class:

On the blog, post a one or two paragraph description of the website you'd like to make for the first major "website project" for this class, and provide at least five links to websites that are in the same "genre" of the website you'd like to make -- make sure at least two of the links are sites you think are designed particularly well. In your paragraph, be sure to include who you think the audience for your website will be.

Wednesday, January 25, 2012

Resources for class, 1/26

The "href" tag:

http://www.w3schools.com/tags/att_a_href.asp

The "img" tag:

http://www.w3schools.com/tags/tag_img.asp

Aligning images with CSS:

http://www.devlounge.net/design/aligning-images-the-right-way-using-css

Here's a downloadable zipped file with css and an image to play with:

http://www.box.net/shared/j96gr8e650

Here's a paragraph from a story we'll be talking about today -- and creating some hyperlinks with as well:

I said out loud: I must flee. I sat up noiselessly, in a useless perfection of silence, as if Madden were already lying in wait for me. Something--perhaps the mere vain ostentation of proving my resources were nil--made me look through my pockets. I found what I knew I would find. The American watch, the nickel chain and the square coin, the key ring with the incriminating useless keys to Runeberg's apartment, the notebook, a letter which I resolved to destroy immediately (and which I did not destroy), a crown, two shillings and a few pence, the red and blue pencil, the handkerchief, the revolver with one bullet. Absurdly, I took it in my hand and weighed it in order to inspire courage within myself. Vaguely I thought that a pistol report can be heard at a great distance. In ten minutes my plan was perfected. The telephone book listed the name of the only person capable of transmitting the message; he lived in a suburb of Fenton, less than a half hour's train ride away.

Here's the wikipedia page for the story, which contains a link to the full text of it.

Lastly, for Thursday's class, I'd like you to read the below article about hypertext (from the defunct website "five standing"), and answer the following questions (print out your responses and bring them to class):

a. List three ways in which reading on the internet is different than reading from a book.

b. How is the web-reading experience "non-linear"? And how does linear thinking differ from non-linear thinking?

c. In what way does non-linear reading invite us to be the "author" of texts that we read, even if we didn't in fact write those texts?



'Naturally my attention was caught by the sentence, "I leave to various future times, but not to all, my garden of forking paths." I had no sooner read this, than I understood. The Garden of Forking Paths was the chaotic novel itself. The phrase "to various future times, but not to all" suggested the image of bifurcating in time, not in space. Re-reading the whole work confirmed this theory. In all fiction, when a man is faced with alternatives he chooses one at the expense of the others. In the almost unfathomable Ts'ui Pen, he chooses - simultaneously - all of them. He thus creates various futures, various times which start others that will in turn branch out and bifurcate in other times. This is the cause of the contradiction in the novel.'
Jorge Luis Borges, 'The Garden of Forking Paths'


The Internet brings with it a new format of communication and thus affects and challenges our assumptions regarding textuality, reading, writing, and authorship. Hypertext implies and, paradoxically, demands new methods of writing and inevitably produces an extended text, one that is made up of individual, and sometimes, independent fragments that coalesce to create a whole greater than the sum of its constituent segments.

There are numerous essential differences between a hypertext and a written text. Primarily, instead of encountering it in a paper copy, the text is read on a computer screen. Contemporary screens, which have neither the portability (unless one owns a lap or palmtop computer) nor the tactility of printed books, make the act of reading somewhat more difficult - imagine sitting back on your bed or couch, a steaming cup of coffee on the table next to you and your favourite book in your lap. Now imagine doing this with a computer screen. Impossible. This is an immediate hindrance.

Reading a hypertext does, however, offer certain advantages - the reader can change the size and even style of font to facilitate the act of reading. Although such vacillate modifications cannot be permanently implemented in the text as seen by others, the reader is capable of making them whenever he or she wishes to. More importantly, the reader is in control of the text. He or she can move forwards and backwards through the text, changing and manipulating the text into fresh permutations, each alteration bringing new meaning to the text, increasing the interpretory vicissitude and creating a perceptual dissonance unique to the reader.

Hypertextual Consciousness is the science of writing displaced into a cyberspatial geography, a transcendental region where language is able to evolve, adapt and synchronise itself with the machine. Once this symbiotic interaction between language and narrative environment makes its way into cyberspace's eidolonic reality, then the Hypertextual Consciousness itself, as an 'event horizon' in the development of the gestalt-self, makes it possible for a discursive network to continually circulate without any need for something as overdetermined as the single reader (or indeed, the singleauthor.

Hypertext, as a concept, suggests an alternative to the more inflexible, authoritarian linearity of a conventional text. In the middle of reading a hypertext (and it is arguable that the reader is continuously in the middle of reading a hypertext), the reader is supplied with a number of options to select from so as to break away from the text-block being presently read, thus the reader become complicit in the manner in which the text unfolds and enabling him or her to immediately enter a new writing or textual space.

These options are reminiscent of the remote-control devices we use to 'channel-surf' with our televisions. A hypertextual viewing style would be one where the reader actively 'clicks' their way into new graphological, textual or audio-visual spaces. Hypertext, as a more narratologically-generated,
manually manipulated reading format, can be construed as a kind of literary MTV.

Roland Barthes describes an ideal textuality that precisely matches that which has come to be called hypertext. That is to say, a text composed of blocks of words (or images) linked electronically by multiple paths, chains, or trails in an open-ended, perpetually unfinished textuality described by the terms link, node, network, web, and path: 'In this ideal text,' says Barthes, 'the networks are many and interact, without any one of them being able to surpass the rest; this text is a galaxy of signifiers, not a structure of signifieds; it has no beginning; it is reversible; we gain access to it by several entrances, none of which can be authoritatively declared to be the main one; the codes it mobilises extend as far as the eye can reach, they are indeterminable...; the systems of meaning can take over this absolutely plural text, but their number is never closed, based as it is on the infinity of language'.

Like Barthes, Michel Foucault conceives of text in terms of network and links. In The Archaeology of Knowledge, he points out that the 'frontiers of a book are never clear-cut,' because it is caught up in a system of references to other books, other texts, other sentences: it is a node within a network... a network of references'.


Like almost all structuralists and poststructuralists, Barthes and Foucault describe text, the world of letters, and the power and status relations they involve in terms shared by the field of computer hypertext. Hypertext, a term coined by Theodor H. Nelson in the 1960s, refers also to a form of electronic text, a radically new information technology, and a mode of publication. 'By 'hypertext,'' Nelson explains, 'I mean non-sequential writing - text that branches and allows choices to the reader, best read at an interactive screen. As popularly conceived, this is a series of text chunks connected by links which offer the reader different pathways'. Hypertext denotes text composed of blocks of text - what Barthes terms a lexia - and the electronic links that join them.

Hypermedia extends the notion of the text in hypertext by including visual information, sound, animation, and other forms of data. As hypertext links one passage of verbal discourse to images, maps, diagrams, and sound as easily as to another verbal passage, it is relatively easy for the computer based medium to effectively combine these into an aggregate product - hypertext intimates an information medium that links verbal and nonverbal information. Electronic links connect lexias 'external' to a work as well as within it, thereby creating a text that is experienced as a nonlinear, or, more properly, as multilinear or multisequential. Although conventional reading habits apply within each lexia, once one leaves the shadowy bounds of any text unit, new rules and new experience apply.

If you wish to continue investigating 'hypertext' and 'narrative theory', you may find it beneficial to examine the weblinks provided in the 'links' section of this website, as it is far easier to unearth information online than from physical texts. However, if you prefer to examine text books, I suggest you track down some of the following.



  • Amiran, Eyal and John Unsworth; Essays in Postmodern Culture, (Oxford University Press, 1993)
  • Bal, Mieke; Narratology: Introduction to the Theory of Narrative, (University of Toronto Press, 1997)
  • Barthes, Roland; S/Z, trans. Richard Miller, (1970)
  • Coste, Didier; Narrative As Communication, (University of Minnesota Press, 1989)
  • Currie, Mark; Postmodern Narrative Theory, (Macmillan Press Ltd, 1998)
  • Danow, David K.; Models of Narrative: Theory and Practice, (St. Martin's Press, 1997)
  • Genette, Gerard; Narrative Discourse: An Essay in Method, (Cornell University Press, 1979)
  • Gibson, Andrew; Towards a Postmodern Theory of Narrative, (Edinburgh University Press, 1996)
  • Landow, George; Hypertext: the Convergence of Contemporary Critical Theory and Technology, (1992)
  • Landow, George; Hyper/Text/Theory, (The Johns Hopkins University Press, 1994)
  • Lehman, Daniel W.; Matters of Fact: Reading Nonfiction over the Edge, (Ohio State University, 1997)
  • Martin, Wallace; Recent Theories of Narrative, (Cornell University Press, 1986)
  • Mitchell, W.J.T.; On Narrative, (University of Chicago Press, 1981)
  • Phelan, James; Narrative As Rhetoric: Technique, Audiences, Ethics, Ideology, (Ohio State University, 1996)
  • Rabinowitz, Peter J.; Before Reading: Narrative Conventions and the Politics of Interpretation, (Ohio State University, 1997)
  • Richardson, Brian; Unlikely Stories: Causality and the Nature of Modern Narrative, (Univeristy of Delaware Press, 1997)
  • Richter, David H.; Narrative/Theory, (Longman Publishers, 1995)
  • Roemer, Michael; Telling Stories: Postmodernism and the Invalidation of Traditional Narrative, (Rowman and Littlefield Publishers, 1995)
  • Schank, Roger C. and Gary Saul Morson; Tell Me a Story: Narrative and Intelligence, (Northwestern University Press, 1995)
  • Tabbi, Joseph and Michael Wutz; Reading Matters: Narrative in the New Media Ecology, (Cornell University Press, 1997)





Last updated: Monday, 10th May 1999
[ back | five standing | the team | technical considerations | links ]