web design i technical slides. internet friend or foe

Web Design I

Technical Slides

InternetFriend or Foe

Updated 8/17/2008 Scott Nelson, Instructor [email protected]

3

What is the Internet?• A single computer• A Network connects workstations to a Server• Servers

– File and Print– Application– Web

• A Local Area Network (LAN)• A Wide Area Network (WAN)• A network of networks


4

How did the Internet start?• Advanced Research Projects Agency Network, was started

in the 1960's by the U.S. Defense Department. ARPANet is the predecessor to the Internet.

• De-centralized• No single network administrator• Runs on TCP/IP


5

Network Models• Network Interface

Layer– Physical– Datalink

• Network Layer– Internet Protocol (IP)

• Transport Layer– Transfer Control

Protocol (TCP)

• Application Layer– Presentation– Session– Application


6

HTTP• HTTP

Hypertext Transfer Protocol

• Hyperlink

• Hypertext


7

Internet Protocols• HTTP (Port 80)• HTTPS (Port 433)• E-mail (Port 25)• FTP

File Transfer Protocol (Port 21)• Gopher (Port 70)• RTSP

Real Time Stream Control Protocol (Port 554)• Telnet (Port 23)


8

ASCII/HTML• ASCII

American Standard Code for Information Interchange

• HTMLHypertext Markup Language


9

XHTML and XML• XHTML

Extensible HTML

• XMLExtensible Markup Language


10

The Web Browser• Internet Explorer• Firefox• Netscape• Safari

• Opera• AOL• Google?!??!Source:

http://www.w3schools.com/browsers/browsers_stats.asp

2007 IE7 IE6 IE5 Fx Moz S OJ uly 20.10% 36.90% 1.50% 34.50% 1.40% 1.50% 1.90%J une 19.70% 37.30% 1.50% 34.00% 1.40% 1.50% 1.80%May 19.20% 38.10% 1.60% 33.70% 1.30% 1.50% 1.70%April 19.10% 38.40% 1.70% 32.90% 1.30% 1.50% 1.60%March 18.00% 38.70% 2.00% 31.80% 1.30% 1.60% 1.60%February 16.40% 39.80% 2.50% 31.20% 1.40% 1.70% 1.50%J anuary 13.30% 42.30% 3.00% 31.00% 1.50% 1.70% 1.50%


11

Browser plug-ins• Adobe Flash

• Adobe Acrobat

• Adobe Shockwave

• Apple QuickTime

• Microsoft SilverLight

• Real Player

• Sun Java


12

Music• Ghetto Gospel, by Tupac Shakur, is inspired

by which Elton John / Bernie Taupin song?


13

Music• Ghetto Gospel, by Tupac Shakur, is inspired

by which Elton John / Bernie Taupin song?

• Indian Sunset– From Mad Man Across the Water

XHTMLExtensible Formatting Language of the Web


15

What Happened to HTML• eXtensible Hypertext Markup Language

• Combines of HTML and XML

• XHTML is an adopted standard

• Support is universal among current browsers

• Allows support for mobile devices

• More strict code formatting than HTML


16

Example Page• This is how a basic XHTML page is

displayed in Internet Explorer

• Looks like anyHTML page


17

Viewing Source• Click on View, Source


18

XHTML Source Code• This is the information that causes the page

to be rendered


19

XHTML Structure• All XHTML documents have two

sections– Head

This information is not seen on the web page


20

XHTML Structure– Body

This information is displayed on the web page


21

XHTML Tags• Tags are denoted and surrounded by

the less-than and greater-than signs < >

• Tags MUST be lowercase

• Tags may have attributes

• Attributes may have a value– Attribute values MUST always be enclosed

in double-quotation marks " " (not “”)


22

XHTML Tags• Attributes are separated by a single space• Some tags have opening and closing tags

– Closing tags are denotes by the preceding forward slash / in the tagExample: </body>

– Tags that do not have a separate closing tag are closed with a forward slash before the closing greater-than signExample: <br />


23

XHTML Tags• Nested tags MUST be closed in the opposite

order in which they were opened– Example:

<td><div>Content</div></td>


24

Astronomy• How many planets are in our solar system?


25

Astronomy• How many planets are in our solar system?

• Eight. Pluto was demoted in August 2006 by the International Astronomical Union.

DefinitionsLet’s Get on the Same Page

DefinitionsComputer Stuff


28

Client, Workstation• A single computer on the network• Web site visitor• Customer


29

Server• A computer provides services to a network• Common types of servers

– Web– File and Print– Application– Authentication


30

Credentials• Username, I.D., Logon Name• Password


31

WebDAV• Web-based Distributed Authoring and

Versioning

• It is a set of extensions to the HTTP protocol which allows users to collaboratively edit and manage files on remote web servers

• Using HTTPS, is more secure than FTP


32

FTP• File Transfer Protocol

• Universal

• Less secure than WebDAV

• Comes in FTPS flavor which encrypts transmission

DefinitionsBrowser Stuff


34

Title Bar


35

Browser Window


36

Status Bar


37

URL• Uniform Resource Locator

• Uniform Resource Indicator (URI)

• Address

• Web Address

http://www.WebDesignSB.com/Information/MAT153/


38

Domain• In the web address:

http://www.WebDesignSB.com/information/MAT153/

• WebDesignSB.comis the Domain

DefinitionsGraphic Stuff


40

Alias, Anti-Alias• Alias is an abrupt change between two colors in an image• Anti-Alias is a smooth change between two colors in an

image


41

JPEG• Joint Photographic Experts Group• Millions of Colors• Lossy Compression• One of two Web-Ready image formats


42

GIF• Graphics Interchange Format

• 256 Indexed Color

• Loss-less Compression

• Transparency

• Animation

• One of two Web-Ready image formats


43

PNG• Portable Network Graphics

• Millions of colors

• Loss-less compression

• Rapidly gaining acceptance

• Not universal enough yet to recommend


44

Flat Color• A single smooth expanse of a single color


45

Dither• The combining of several colors in an image

to trick the eye into seeing a single color that is other than the colors in the image


46

Feather-Edged• A smooth or fuzzy transition between two

composited images or an image and the background

• Opposite of Hard-Edged


47

Hard-Edged• A sharp distinct transition between a

composited image and the background or another image


48

Raster, Rasterize• Raster is a bit map image

• Each pixel in the image is stored as a byte of information

• The number of bits in the byte determines the color depth


49

Vector• Images that are represented by points and lines,

rather than by individual pixel values• Vector image file size a generally very small as

compared to Raster images• Flash uses vector images to

animate quickly with a relatively small file size


50

Web-Safe Color• Also know as

Browser-Safe colors• One of 216 colors that

are a part of the color pallets of Mac/OS, Unix and Windows

• Not really an issue any more!


51

Tile• Tiles are used for background images on

Web pageshttp://www.scottandtammy.com/mat122/seamless_graphics/


52

Tile Example

DefinitionsMonitor Stuff


54

Pixel• Picture Element

• A single dot on a computer or television screen


55

PPI• Pixels Per Inch

• Used to define monitor resolution

• 72 PPI is typical monitor resolution

• 2540 PPI is typical for print publishing


56

DPI• Dots Per Inch

• Defines the sharpness of the image

• 72 DPI is for the Web

• 600 DPI is most home printers

• 1200 and greater is for professional printing


57

Resolution• The X and Y coordinates of the

number of pixels displayed on a computer monitor

• Typical resolutions are:

– 640 x 480 - Universally Compatible

– 800 x 600 - Good current minimum standard

– 1024 x 768 - Good minimum for production houses

– 1280 x 1024 - Maximum Standard Desktop Size

– 1680 x 1050 - Apple Cinema Display

– 1920 x 1200 - Apple Cinema HD Display

– 2048 x 1280 - Apple Cinema HD Display

– 2560 x 1600 - Apple Cinema HD Displayer

http://www.scottandtammy.com/mat122/




58

CMYK• Cyan, Magenta, Yellow, and Black

• Used in print media


59

RGB• Red, Green Blue• Used for screen delivery• These three colors sum together to display all of

the millions (16.7) of color you see on your computer monitor

DefinitionsXHTML and Dreamweaver Stuff


61

XHTML• Extensible Hyper-Text Markup Language


62

XHTML Text• Text that is displayed in the browser windows that has been

typed directly into the XHTML code


63

Mouseover, Rollover, Image Swap• Terms used interchangeably to describe a change in image

when the mouse pointer hovers over an image


64

Table• Like a spreadsheet• Tables used to be used to format pages and hold sliced

images together• This is fallen out of favor


65

Nested Table• An HTML table that is inside the cell of

another HTML table


66

CSS• Cascading Style Sheet


67

Divisions and Spans• <DIV>

– Div’s are used in CSS layouts to apply a style to an area or element

• <SPAN>– Span’s are used in CSS layouts to apply a style

to an area or element– Span’s can be applied in mid-sentence without a

line break

The File SystemKnow Your Enemy


69

Folder and Filenames• Adopt the 8.3 (MS DOS convention) nomenclature

when you will be converting between Windows OS and Mac OS/9 and older

• For Mac OS/9 compatibility, filenames should be 31 total characters or less

• Use all lowercase letters– Unix, Linux and Apple servers are case-sensitive– Windows servers are not case-sensitive


70

Characters to Use• Letters a - z

• Numbers 0 - 9

• Dash or Hyphen -

• Underscore _


71

Characters Not to Use• Space• Forward slash /• Back slash \• Colon :• Asterisk or star *• Question mark ?• Double Quotation “

• Greater than and less than signs ><

• Pipe |• Pound or number sign #• Percent sign %• At sign @• Comma ,• Apostrophe ‘


72

Special File Names• First page of a web site must be one of these

file names– index.htm (most universally compatible)– index.html (not supported IIS by default)– Default.htm– Default.asp– Default.aspx


73

Zoology• What is a pregnant gold fish called?


74

Zoology• What is a pregnant gold fish called?

• A twit


75

Questions and Answers

Thank You!That wraps it for tonight. Thanks for your attention!

web design i technical slides. internet friend or foe

Documents