Andy Cox

University of Texas at Austin – information on dealing with long links

Sound – simply link to the sound file <a href=”sound.wav”>Play sound file</a> Embedding the file and playing automatically involves the use of non-supported XHTML and is not supported by all browsers. See About.com article

Image maps – may work on some browsers but not recommended. If you need to link from parts of an image, divide the image in separate smaller images.

The web as a story-telling medium.

The I Ching c. 100 – 200 BC

Jorge Luis Borges, The Garden of the Forking Paths, 1944

Raymond Queneau, One Hundred Thousand Billion Poems, 1961

Crowther and Woods, Adventure, 1975

Michael Joyce, Afternoon, a story, 1987, first work of hypertext fiction.

Stuart Moulthrop, Victory Garden, 1992, classic hypertext about the Gulf War.

David Cage, The Indigo Prophecy, 2005; Heavy Rain, 2010

World of Warcraft, Facebook?

References:

Janet Murray, Hamlet on the Holodeck – The Future of Narrative in Cyberspace, 1997 – excerpt murray-holodeck

Espen Aarseth, Cybertext – Perspectives on Ergodic Literature, 1997 – sample chapter

DESIGN / EMULATE / VALIDATE

Design

Keep it simple!

The most common screen size is 240 wide x 320 high (aka QVGA), but do not use absolute measures, e.g  do not fix the body width because then the text won’t wrap within the screen on older phones.

Do NOT use: tables, frames, javascript, inline css, images larger than a thumbnail, special fonts

DO use: Basic XHTML with an external style sheet. Check that the site looks OK even if the style sheet is not applied.

Mobile Web Design Trendes for 2009

7 usability guidelines for websites on mobile devices

How to write Web Pages for the iPhone and Other Wireless Devices

Showcase of Designs Optimized for iPhone

Emulate

Check you mobile site on one of the available phone emulators.

dotMobi phone emulator

Opera Mini Simulator

iPhoney

Validate

Validate your site for mobile devices at W3C.

W3C mobileOK Checker

(877) 4-WAX-AXIS

(877) HIT-AXIS

(877) FLUX-WAX

(877) DING-WAX

(888) HYPE-WAX

(877) HULA-DATA

(877) ROOT-WAX

(877) HALO-SUM

(888) ZERO-BOX

(888) WAX-KNOT

(877) LOCUS-WAX

(877) MODE-BOX

(877) MOB-POINT

(877) NODE-BOX

(877) WAX-THEN

(877) LEFT-NET

(877) ELSE-NET

(888) NULL-WAX

The senior show is scheduled for April 24/Saturday.  It’s a time when seniors (and often others) are featured in each area showing work on walls/in hallways and rooms.

I’m forwarding the email from Mark Johnson below.

We emphasize work done in the classes to feature CIA.

The immediate things are:
1. to assign point people from your class to work with space/installation (putting up and taking down).
2. have students fill out forms so that their names appear on the pr postcards. they will need to submit their forms to the gallery by this Wed.

Will you designate a student or students from your class to organize the work to be shown and be part of a group that works out space requirements and send their names to me and Lauren and Matt? I’m asking Lauren and Matthew to be the contact people for the gallery to arrange materials for room/space preparation.

Usually that preceding  friday (April 23)  is the day that installation takes place and the show runs on Sat. generally between 11 or 12 and 5 or 6.  The art department areas are opened up as studios and students fills that space with work.

I’m enclosing a rough timeline for info and organization.  Let’s talk more tomorrow. If you have students who have some really good work we  can feature them in the Martin Wong gallery. See if they are interested and send me their names, contact information and a description of their projects along with equipment needs. I’ll send that on to Mark. Best to get this to me early this week if you can. The Wong space is limited.

Tuesday April 13:
Assign point students in the class and email their contact info to me/Lauren and Matthew
Please allow some time in the class for these students to gather info on space, equipment needs.

Thurs April 15:
Have the point people gather the project description, space and equipment needs and email it to Matthew, Lauren and me.

Friday April 23:
installation of work.

Sat/April 24:
open studios (as well as the opening of the mfa show and selected seniors in the martin wong.

Some notes:
- If students use CIA equipment, they are responsible for making sure that the equipment is not left unattended.

- The spaces we use are the two classrooms and the entire hallway with all it’s nooks and crannies from the elevator to the window straight down the hall.  We leave the back room locked to hold all the tables, the beverages and food.

thanks a lot for this. You will have students who have never shown before.

Let’s talk more tomorrow and Wed.

Paula

——–
From Mark Johnson, Fine Art Gallery

Subject: Senior Open House

Dear Art Faculty:

I am writing again about Senior Open House, which is scheduled for
Saturday, April 24 – the same day as the MFA opening.

Please ask your “Senior-standing” students to look to the envelopes
posted around for sign-up sheets (they don’t have to be graduating this
semester).  Everyone is invited to exhibit two works.  We will design
the post card this Wednesday, so it would be great if they could turn in
the sign-up forms by Wednesday to enable us to get their name on the
post card.

We anticipate using the spaces that have been made available in the
past, including the seminar rooms for painting, photography, CIA, and
ceramics – as well as the Martin Wong Gallery.  I would appreciate it if
you could help me identify a student or two from each discipline to help
with installation on Friday, April 23.  We will need to prepare the
rooms before installation which takes a good deal of time, and we also
know from experience its great if someone from each discipline is there
to help with installation questions.

Art Historians and Art Education students are invited to participate as
well.  Art Historians are invited to submit an abstract of their Senior
Thesis on a sheet of 8-1/2 x 11 inch paper with a related color
reproduction – and we will prepare a display area.  Art Education
students are invited to show either an abstract of research or studio work.

Please let me know if you have any questions – and thanks a million for
your help.  I know everyone is getting close to burn-out at this time of
year, and appreciate your involvement very much.

best,
Mark

WHAT IS JAVASCRIPT?

• JavaScript is a scripting language used to enhance the behavior of HTML pages.
• A scripting language is a lightweight programming language.
• JavaScript is embedded in a web page.
• With JavaScript you program the behavior of the browser which is why it is called client-side scripting. This is different to server-side scripting which is about programming the behavior of the server.

WHAT IS JAVASCRIPT USED FOR?

JavaScript has many uses, including the following:

• Pop up and pop under windows (example)
• Dropdown menus (example)
• Rollover effects
• Browser detection
• Creating cookies
• Slide shows (example)

HOW DO I USE JAVASCRIPT IN MY WEB PAGE?

A JavaScript can be placed anywhere on your page, like this:

<html>
<body>
<script type=”text/javascript”>
document.write(“Hello World!”)
</script>
</body>
</html>

This will display Hello World! on your page.

or insert an external JavaScript .js file

<script language = "javascript" type="text/javascript"  src="menu.js"></script>

Typically, the JavaScript function is defined in the head and used in the body, as in the pop up window below:

POP UP WINDOW

In JavaScript a pop up window is opened using the window.open function, which takes the following form:

window.open ("URL", "windowName"[, "windowFeatures"])

The items in the square brackets are optional and consist of the following: left / top / height / width / menubar / toolbar / resizable / scrollbars / dependent. For a full list, see https://developer.mozilla.org/En/DOM/Window.open

Here is an example:

<head>
<script type="text/javascript">
<!--
function myPopup2() {
window.open( "http://www.google.com/", "myWindow",
"status = 1, height = 300, width = 300, resizable = 0" )
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup2()" value="POP2!">
</form>
<p onClick="myPopup2()">CLICK ME TOO!</p>
</body>

This example is from tizag.com

Note: since target=_blank has been deprecated, you need to use JavaScript to open a new window from a link.

AUTOMATIC POP UP WINDOWS

Use the window.open function and the the onLoad function.

<BODY onLoad="myPopup2()">

Your target page (the one you are opening) should have the following in the head:

<SCRIPT TYPE="text/javascript">
	<!-- 

	window.focus();

	//-->
</SCRIPT>

This will ensure the window will regain the “focus” on , ie come to the front when the calling page is reloaded, even if it is already open. If you don’t include the window.focus() function, the window will remain in the background.

WHERE CAN I FIND OTHER JAVASCRIPTS?

Try http://javascript.about.com/od/scriptlibrary/Javascript_Script_Library.htm or simply Google what you are looking for.

http://userwww.sfsu.edu/~dashley/sfsu/art511.01/ Dillion Ashley

http://userwww.sfsu.edu/~abeebe/ Adam Beebe

http://userwww.sfsu.edu/~cwblack/ Christopher Black

http://userwww.sfsu.edu/~alerterb/ Al Bungay

http://userwww.sfsu.edu/~sasabee8/art511/art511.html Beatrice Cheung

http://userwww.sfsu.edu/~mjm87/art511.html Marilyn McGowan

http://userwww.sfsu.edu/~alonzor/ Alonzo Ruiz

http://userwww.sfsu.edu/~sosha/ Sosha Young

http://userwww.sfsu.edu/~confused/ Matthew Dalton

[no site posted] Sergey Krasilovskiy

511_calendar_spring_2010_031810

Do this using div tags, like this:

In your HTML

<body>

<div id=”allcontent”>

YOUR WEB PAGE CONTENT HERE

</div>

</body>

And in the style sheet

#allcontent {

width: 800 px;

margin-left: auto;

margin-right: auto;

}

This centers the content in the browser and constrains the width to 800 pixels.

“div” tags are used to divide your web page content into sections. For example, here’s an entry surrounded by div tags

In your HTML

<div id=”important”>

<h2>This is Something Important</h2>

<p>I’m going to write about something really important……. but first here’s an image:

<img src=”important.gif” alt+”important” />

</p>

</div>

And in your style sheet

#important {

border-width: thin;

border-style: solid;

boder-color: black;

width: 200 px

padding-right: 20 px

padding-left: 20 px

padding-bottom: 20 px

margin-left: 40 px

}

This will result in a 200 pixel-wide box around the entire entry. Note that the width applies to the content area; not the total width including padding and margins. In the case above the total width is 200 + 20 + 20 + 40 = 280 pixels.

All paragraphs, headings, images, and other elements are in CSS boxes which you can manipulate.

From: http://www.w3.org/TR/CSS2/box.html

We will be applying an external style sheet to our basic HTML or XHTML. First you must remove all inline styles from your HTML and validate it.

File format: style.css (your style sheet can have any name)

Style sheet files are plain text files with no headers, no html, just the sytle definitions (see below):

Linking to your web page:

  <HEAD>
    <LINK href="style1.css" rel="stylesheet" type="text/css">
  </HEAD>
Simply upload your style sheet to the same folder as your index.html file

General Form of a Style Definition:

ElementSelector {

Property 1: Property Value 1;

Property 2: Property Value 2;

Etc

}

The properties and their values will be applied to all instances of the element.

Example

body {

background-color: red;

font-family: sans-serif;

}

Unless contradicted by a lower level style definition e.g. for ‘p’ the whole page will have a red background and a generic sans serif font.

Applying Styles to More than One Element

Example

h1, h2 {

color: gray;

font-weight: bold;

}

Along with the body style definition above, this will result in bold, gray, sans serif headings on a red background.

Applying Styles to Particular Instances of an Element

This is done using a “class”. The general format is:

ElementSelector.id {

Property 1: Property Value 1;

Property 2: Property Value 2;

Etc

}

Example

In the style sheet

p.special {

color: green; /*this is font color*/

font-weight: bold;

}

In the HTML

<p id=”special”> my text here </p>

The text for this paragraph only will be green and bold; but will still be sans serif as defined in the body style.

Preparing Style Sheets

We will be using the free CSS editor JustStyle This is a Java application and you will need to download it. Use the JustStyle CSS Editor 1.3.3 Suite for Java^™2 platform (not Windows).

1822 – Charles Babbage Difference Engine http://web.arch.usyd.edu.au/~sriz8189/difference.jpg / JMW Turner, Battle of Trafalgar http://upload.wikimedia.org/wikipedia/commons/d/de/Joseph_Mallord_William_Turner_027.jpg

1847 – George Boole http://upload.wikimedia.org/wikipedia/commons/4/43/Baops.gif / Millet, The Winnower http://www.wga.hu/art/m/millet/01winnow.jpg

1937 – Turing Machine http://www.ipod.org.uk/reality/reality_turing.gif / Guernica http://terresdefemmes.blogs.com/photos/uncategorized/guernica.jpg

1945 – Memex http://www.kantl.be/ctb/vanhoutte/teach/slides/graphics/memex.jpg / Frida Kahlo http://earlywomenmasters.net/frida_kahlo/slides/1945_small_monkey_dog.html

1946 – Eniac http://www.mrsec.wisc.edu/Edetc/SlideShow/slides/computer/eniac.html

1961 – Spacewar http://grindingtovalhalla.files.wordpress.com/2009/11/spacewar.jpg / Nam June Paik http://www.denstoredanske.dk/@api/deki/files/22182/=287998.501.jpg

Ted Nelson and Xanadu http://www.xanadu.net/

1965 – First geosynchronous satellite Intelsat 1 http://upload.wikimedia.org/wikipedia/commons/a/ab/INTELSAT_I_%28Early_Bird%29.jpg Yoko Ono, Cut Piece http://www.youtube.com/watch?v=ZcxLoS1C7KE

1968 – Douglas Engalbart, SRI > Xerox PARC http://upload.wikimedia.org/wikipedia/en/f/f2/Xerox_8010_compound_document.jpg

1969 – ARPANET online http://personalpages.manchester.ac.uk/staff/m.dodge/cybergeography/atlas/arpanet2.gif / Bed-In for Peace http://img.timeinc.net/time/photoessays/2009/civil_disobedience/john_yoko.jpg

1976 – Adventure http://www.spitenet.com/cave/images/AdventureMap.jpg / Send/Receive Satellite Network 1977 http://3.bp.blogspot.com/_iRQmRdwmotA/SZJFLZbRkPI/AAAAAAAAAjE/RwgzIdMKDSA/s400/55.jpg

1982 Robert Adrian – The World in 24 Hours http://mass.nomad.net.au/wp-content/uploads/2009/05/theworldin24hours.jpg

1984 – Macintosh 128k http://upload.wikimedia.org/wikipedia/commons/e/e3/Macintosh_128k_transparency.png /Superbowl Commercial http://www.youtube.com/watch?v=OYecfV3ubP8

1990 End of ARPANET / Birth of the WWW http://info.cern.ch/

1993 Mosaic Browser http://www.yourdictionary.com/images/computer/_MOSAIC.GIF

1996 Olia Lialina – My Boyfriend Cam back from the War http://www.teleportacia.org/war/

http://artport.whitney.org/commissions/idealine.shtml#

Tables were once the preferred method of laying out web pages; now the preferred method is style sheets. However, tables still have an important role for the display of structured data and information.

The HTML code for a table is as follows:

<table border=”1″>
<tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
</tr>
<tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
</tr>
<tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
</tr>
</table>

This displays a table that looks like this:

Note that on my blog the table is displayed in a custom mode defined by the blog’s style sheet.

This example is from http://www.w3schools.com/html/html_tables.asp

<tr> is a row

<td> is a data cell in a row

<th> is a heading cell

The w3school’s Tryit Editor is useful to practice coding tables. http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables

1. Create new image.

2. Create animation elements on separate layers.

3. Open animation palette (older versions it’s in ImageReady).

4. Click on first frame.

5. In layer palette make elements visible that appear in first frame.

6. Duplicate first frame.

7. Repeat Step 5. for the second frame.

8. In main image window move elements in the second frame to create the animation.

8. Select time of each frame in dropdown under frame.

9. Select two adjacent frames and tween.

10. Repeat as necessary.

11. Save as optimized.

12. Insert in web page.

Kompozer User Guide

Kompozer User Forum

Email below from Lauren Bjelde

Lauren Bjelde here – myself and Jordan Perkins-Lewis will be the CIA lab managers
for this semester.

Summary of web_technologies As shown in class on 2/4.

Many students are experimenting with Kompozer to add various embellishments such as fonts, backgrounds, tables, etc to their pages. It’s great to experiment but that is not part of the current assignment. The current assignment is to create the structure of a web page using basic HTML.  I need your page to look something like the basic one I have prepared at http://www.userwww.sfsu.edu/~cox but with the content added which is described in the assignments. As I have explained your sites will evolve from the content – and content is king as far as grading (and web design) is concerned. Later, we will be adding style and layout to your page(s) using a separate document called a style sheet, thereby separating structure from style which is an intrinsic part of good web design. Having a separate style sheet means that the style can be applied across all your tags and all your pages automatically, instead of adding the sytle (fonts, font size, background colors etc) to every tag on every page of your site. On a related topic many of you are using fonts that are unlikely to exist on someone else’s computer and will therefore be rendered in a default font. Ignore fonts for now! And don’t add any style or formatting from within Kompozer! Your site will soon be a morass of <div> tags and debugging will become very difficult if you don’t know HTML coding. You have been warned.

Don’t get me wrong, experimentation is good, but learning web design in this class will proceed in a structured, logical manner. The aim of this class is not to produce a personal web site it is to produce a web site for the assigments for this class. If you already have an sfsu web site or you want a personal sfsu web site, please work on that separately and place all your 511 work in a seperate folder called “511″. I will go through this again on Tuesday, but if you are working on your site before then please follow these instructions.

If you are in need of an online web design resource, I recommend http://webdesign.about.com/ I also recommend the about.com guide’s book

And please feel free to email me if you need any help or want me to look at what you’re working on.