H O M E
1	2	3	4	5
6	7	8	9	10
11	12	13	14	15
16	17	18	19	20

Who's who & who's in...

Long boring wait'n see part. Please have patience.

Meanwhile, please sign in.

Criteria for who get's in:

You must attend the first day of class. If you are absent, you will be placed at the bottom of the waiting list.
You must have satisfied all prerequisites or you cannot take the class.
Waiting list priority is:

Graduating major/minor
Multimedia graduate students
Senior major/minor
Junior major/minor
Sophomore major/minor
Freshman major/minor
Others, presumably anyone who isn't in the major or minor

The Prereq Check

The prerequisites for this class are ART3830 - Digital Imaging II, and either ART3825 - 3D Modeling, ART3840 - 3D Modeling, or ART3860 - Advanced Graphics.

More Administrative Stuff

This class is dependent on email communication. Send me your email!

You must put the word "student" in the subject line, if you don't my spam filter will delete you.

Put which section of the class you are in the body of the email, MW or TTH.

Have your email in to me by next class.

Your Web Server and Web Site

Please hand in a piece of paper with your full name, which section of this class your in (MW or TTH) and your password at break today. For privacy, hand it directly to me.

An acceptable password must have only lower case letters or numbers, no punctuation or spaces.

A great way to make un-guessable passwords is to think of a favorite sentence or quote you can easily remember and use the first letter of each word for the password.

"There but for the grace of god go I" becomes

tbftgoggi

"Jumping Jack Flash, its a gas gas gas" becomes

jjfiaggg

Good password: "tbftgoggi"

Bad password for pixel: "TbftgoGgi" "JJFiaggg" - no captilization

Bad password for any server: "my password" "james khazar" - no spaces

More info on your access is here.

Some Rules :(

Copyrighted Materials

Defined: Basically, anything you didn't make yourself. This includes Photography, Illustration, Text, and Music. There's a good definition here.

Fair Use: "reproduction by a teacher or student of a small part of a work to illustrate a lesson."

But - do so only with proper attribution:

"Photograph by Billy B. Baloney"

Hand Coding

The first 3 lectures of this class will be taught without the aid of a WYSIWYG tool. We will be hand coding with Notepad on the PC or TextEdit

Flash

Sorry, NO FLASH. I know, many of you are anxious to use it, but we'll have to leave that for Art 3800 and 4200.

My reasoning: We're focusing on HTML, XHTML and CSS.

Review Overview (AKA Syllabus)

Here

History of the Web

Early History

1945	Vannevar Bush proposes first concept of hypertext, called Memex, to President Roosevelt. There's a good history of Hypertext here.
1950's	The "Red Menace" and sputnik lead to the "Advanced Research Projects Agency" or ARPA in the Department of Defense
1965	Concept of a distributed network of connected computers developed. Key to the concept: If it’s distributed, you can’t kill it with an A-Bomb
1969	Department of Defense commissions ARPANET. The internet is born.
1970's	ARPANET and the NSF get firm foothold in academia Telnet invented Email invented Chat invented Ethernet invented USENET invented MUDs invented
1980's	TCP/IP (Transition Control Protocol/Internet Protocol) DNS (Domain Name System) The Whole Earth ‘Lectronic Link WELL 1988 First internet worm
1991	World Wide Web WWW released by CERN

The Web comes of age

1993	Mosaic, first GUI browser, takes the Internet by storm
	WWW proliferates at 341,634% annual growth rate.
1995	Netscape goes public
1996	Browser Wars between Netscape and Internet Explorer
1996	1st Flash Player
1998	Mozilla 1.0 (Netscape 4.5B1) first XHTML compliant browser
2000	Macintosh Internet Explorer 5.0 XHTML compliant browser
2001	Windows Internet Explorer 6.0 XHTML compliant browser, the majority of the web catches up.

A more complete version of an internet timeline here.

Web Servers & How They Work

The web server lives somewhere out there, and is connected to the internet. So is your computer, or client.

The server has a domain name, like www.khazar.com

It also has an IP address, like 66.117.153.38. You can find out any domain's IP here.

Computers can only talk to each other through the IP address, but a Domain Name Sever (DNS) that lives on the web intervenes and directs your inquiry to the right server.

Once the request is made, the file comes from the server to you.

The Universal Resource Locator (URL)

Deconstructed:

http://www.khazar.com/art4theweb/lect/lect01.htm

http tells the browser to use HyperText Transfer Protocol when accessing the internet

:// tells the browser that what comes after it is the server location information

www.khazar.com
Domain name. The location of the server that holds the domain’s web files is kept by a Domain Name Server DNS. http://www.howstuffworks.com/dns.htm Web connections are really done by IP addresses, but the DNS will translate the request.

/art4theweb/lect/
The path on www.khazar.com’s web server that holds the HTML file (more later)

lect01.htm
The name of the HTML file that has the web page your looking at right now.

Alphabet Soup

HTML

HyperText Markup Language.

One of the languages that browsers use to render a web page . Web pages contain a bunch of HTML and live on the server as a file

XHTML

eXtensible HyperText Markup Language

The improved version of HTML that works in modern browsers.

XML

eXtensible Markup Language

The future language of the web. A build-your-own-commands language kit.

FTP

File Transfer Protocol

Transfer protocol for moving both text and binary (like graphics) files to and from a client to a web server.

But wait, there's more!

CGI, PHP, CSS, DHTML, POP3, SHTML, SLIP, SMTP...

Focus on Files

Your FTP & Web Location

Where do your web files live? On a hard drive on a server that lives in a little room down the hall.

Its name is pixel.

If you were to sit at that server's monitor, you'd see your files at:

d:\inetpub\wwwroot\wwwroot_pixel\art3870\001

That is, on drive d:, in a folder called 001 (or whatever your assigned number is) in a folder called wwwroot_pixel in a folder called wwwroot in a folder called inetpub.

More about paths .

But you have to connect through an FTP program, which wants to know the name of your server, in our case:

pixel.csuhayward.edu

Instructions on how to use FTP are here .

HTML & XHTML

What are HTML & XHTML?

Languages used to tell web browsers how to render a web page.

Why XHTML?

It's the 21st century, and time to learn the new standard for programming modern browsers.

Proper use of XHTML will help to separate structure from presentation. More on this as we go along.

XHTML is a tighter specification for web page authoring, and as such will render better in future versions of browsers, something HTML will not do. Many HTML commands are "deprecated", or make obsolete.

And besides, working to older versions is a nightmare. Take the <marquee> command. Or don't

It Looks Like This

It Renders Like This:

OK, That's An Over-
simplification

Look at the source for a page like the one your looking at now...

Tags

What's A Tag?

Structural Tags

Define the "skeleton" or structure of an html document.

What Tags Can Control

Comments

The color, font face,weight,size and style of text

<h1>Hello World!</h1>

<font color="black" face="sans-serif" size="+1"><b><i>Hello World!</i></b></font>

Tables

<table width="100%" border="1">

<tr>

<td>

<p>Hello</p>

</td>

<td>

<p>World!</p>

</td>

</tr>

</table>

Lines (or Horizontal Rules - <hr />)

<hr />

Forms

<form name="form1" method="post" action="">

<input type="text" name="textfield">

</form>

Links

<p>

go to <a href="http://www.google.com">google</a>

</p>

go to google

Complex Interactions

<a href="#"

onMouseOut="doButton('Norm','home','home');"

onMouseOver="doButton('Over',hello,hello)"

onMouseUp="doButton('Norm',hello,hello)"

onMouseDown="doButton('Down',hello,hello)">

<img name="hello" src="images/home.gif"

width="137" height="23" border="0"

alt="">

</a>

Yikes! Homework!

Ars Gratia Artis

Check out these sites by next class so we can discuss. Note that some of these links may be dead — you never know on the web:

All the Catalogs

By Penelope Umbrico. An all text piece that is comprised of the names of all the available mail-order catalogs listed on the internet, 15,194 in total, at time of compiling in 2002.

Alphanumeric Labs

By August Highland. Poetry based site.

Back to Life

By Albay at Xurban.net. "An experiment on animal behavior .social isolation issue in a special type aquarium."

The Salvaggio Museum

Collection of different web artists.

Meaning Arises Through Use

Art and politics in a junction between on-line and real world.

North Country

Interactive story by Helen Thorington

Color Stories: Yellow

Abstract works by Kanarinka