How the Web WorksHow the Web Works

Internet vs Web

Internet vs Web

There is no “center” or main-server of the Internet; it is a highly decentralized network designed for sharing information.

Email, VoIP, and the World Wide Web are parts of the Internet.

Server

A server computer is a computer dedicated to running a server application.

Apache (open source) & Microsoft Internet Information Services (IIS)

Client

A user's software program that interacts with a "server"

Protocol

Protocol:a convention or standard that controls or enables the connection, communication, and data transfer between computing endpoints. In its simplest form, a protocol can be defined as the rules governing the syntax, semantics, and synchronization of communication.

Common ProtocolsIP - Internet Protocol

UDP - User Datagram Protocol

TCP - Transmission Control Protocol

DHCP - Dynamic Host Configuration Protocol

HTTP - Hypertext Transfer Protocol

FTP - File Transfer Protocol

Telnet - Telnet Remote Protocol

SSH - Secure Shell Remote Protocol

POP3 - Post Office Protocol 3

SMTP - Simple Mail Transfer Protocol

IMAP - Internet Message Access Protocol

Web Page Address (URL)

Uniform Resource Locator (URL)

http://www.youtube.com/watch?v=aOhb7uc8IGU

http Protocol used in the communication between the browser and the web server.

: Colon simply separates the protocol from the other part of the web address.

// Indicates a request to a server

www.youtube.com Name of the web server

/ Indicates the root folder of the folder system hosted by the web server www.youtube.com

watch?v=a0hb7uc8IGU Name of file to be served

Web Page Address (URL)http://www.youtube.com/watch?v=aOhb7uc8IGU

HTML Document

Usually comprised of 2 or more parts

1. text document with code

2. separate graphic file(s)

ex. http://www.learningwebdesign.com/materials/chapter02/kitchen.html

Diversity & Accessibility

Use clean HTML - marked with appropriate and meaningful HTML, content in logical order

Provide alternatives - alternative text, transcripts for audio, captions for video

Allow text to resize - font size in em or %

No text in graphics

Use accessibility features in tables & forms

Be careful with colors and backgrounds - plenty of contrast

Coping with the Differences

User Preferences

Different Platforms

Connection Speed

Browser Window Size and Monitor Resolution

Monitor Color

User Preferencesin addition to font and color changes

Ignore style sheets or apply own

images off

Java and Javascript off

turn off pop-up windows

User Preferences

Tools -> Internet Options (IE)

Tools -> Options -> Content (Firefox)

Change fonts and / or color

Need to design for flexibility

Different Platforms

Operating systems have different fonts

Form elements - lists, pull down menus

Plug-in media players - Windows Media Player not supported, Flash and Quicktime are supported

Connection Speed

Not everyone is on broadband

We have a long way to go to catch the number one country, South Korea. The Koreans have 85% high speed penetration while the US is stuck at less than 50%. Of those 50% very few have a connection faster than cable or DSL.

http://www.internetworldstats.com/stats.htm

http://news.cnet.com/8301-1035_3-10454133-94.html

Browser Window Size and Monitor Resolution

Common resolutions / Page Dimensionhttp://en.wikipedia.org/wiki/Display_resolution

Coping with Window Size

Liquid Layout http://www.w3.org

Fixed Layout http://www.csszengarden.com/?cssfile=/211/211.css&page=0

Monitor Color

Gamma - overall brightness of a monitor. Macintosh has a lighter gamma than Windows or Unix

Number of colors - over 80% have 24-bit or 17 million colors. Rest have 16-bit monitors that display 65,000 colors.

http://www.techbomb.com/websafe/

http://en.wikipedia.org/wiki/Computer_monitor

Creating a Simple Page

Creating a Simple Page

Step by Step

Start with Content

Give document structure by adding XHTML elements

Identify the text elements

Add image

Change the look with a style sheet

ContentBlack Goose Bistro

The Restaurant

The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight the freshest ingredients.

Catering Services

You have fun... we'll do the cooking. Black Goose Catering can handle events from snacks for bridge club to elegant corporate fundraisers.

Location and Hours

Bakers Corner in Seekonk, Massachusetts

Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight

File Naming Conventions

Use correct suffixes (.html, .gif, .png, .jpg)

Never use spaces in file names

Avoid using special characters (?, %, #, /, :, ;, •) Letters, numbers, underscores, hyphens, and periods only

Use lowercase letters only

Keep filenames short as possible

Be consistent with your naming

Document Structure

• <element name> CONTENT </element name>

• <opening tag> CONTENT </closing tag>

Document Structure<html>

</html>

<head>

</head><title> Title Here </title>

<body>

</body>Web Page Content Here

Add Basic Doc Structure

<html>

<head>

<title>Black Goose Bistro</title>

</head>

<body>

Black Goose Bistro

The Restaurant

The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight the freshest ingredients.

Catering Services

You have fun... we'll do the cooking. Black Goose Catering can handle events from snacks for bridge club to elegant corporate fundraisers.

Location and Hours

Bakers Corner in Seekonk, Massachusetts

Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight

</body>

</html>

Add Text ElementsBlock and inline

<html><head><title>Black Goose Bistro</title></head>

<body>

<h1>Black Goose Bistro</h1>

<h2>The Restaurant</h2>

<p>The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight the freshest ingredients.</p>

<h2>Catering Services</h2>

<p>You have fun... <em> we'll do the cooking </em>. Black Goose Catering can handle events from snacks for bridge club to elegant corporate fundraisers. </p>

<h2>Location and Hours</h2>

<p>Bakers Corner in Seekonk, Massachusetts </p>

<p>Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight </p>

</body></html>

Empty Text Elements

Elements which do not have text content because they provide a simple directive.

<directive space />

<img /> - Load a graphic

<br /> - insert a line feed

<hr />- insert a horizontal rule (line)

Example: <p>100 Church St. <br />Burlington, VT </p>

Adding an Image

<html><head><title>Black Goose Bistro</title></head>

<body>

<h1><img src=”blackgoose.gif” alt=”Black Goose logo” />Black Goose Bistro</h1>

<h2>The Restaurant</h2>

…

Changing the look with Style Sheets

<style type=”text/css”>

body {

background-color: #C2A7F2; font-family: sans-serif;

}

h1 {

color: #2A1959;border-bottom: 2px solid #2A1959;

}

h2 {

color: #474B94;font-size: 1.2 em;

}

h2, p {

margin-left: 120px;

}

</style>

Added before the </head> tag.This is an example of an embedded style sheet

Questions?

Assignment

work through chapter 4 in book

1-paper on how to register a domain name