Transcript COS 125 day 5

COS 125
DAY 5
Agenda


Questions from last Class??
Assignment one graded


Assignment #2 posted



Suggestion is to create a web page os some sort
Quiz #1 on Feb 12



Due Feb 15
We will discuss later in class
Capstone proposals due Feb 15


8 A’s, 1 B, and 1 MIA
20 M/C, 4 Short essays, One extra Credit
Chap 1-26
Today’s Topic

Using the World Wide Web
How Web Pages Work
Pages “live” on the World Wide Web
 Connected to each other using Hypertext
 Pages are written in HTML
 Works on Client/server model

Web Site Structure
First page is called the Home Page
 Other pages are organized in one of
three possible types

Tree
 Linear
 random

Tree structure
Home page
page
page
page
page
page
page
page
page
page
page
page
page
Linear Structure
Home Page
Page
Page
Page
Page
Page
Random Structure
Home Page
Page
Page
Page
Page
Page
Page
Page
Page
How Web Browsers Work

Web Browsers interpret and display web
pages
HTML
 DHTML
 XML
 Scripts
 Applications and programs

Helper apps
 Plug-ins

Web Browsers

Two most popular and competitive
browsers
Internet Explorer
 Netscape Navigator




Dead as of Feb 1, 2008  RIP
Both have very similar features
New entries
Firefox
 Opera

Web Codes

Successful Transactions





Redirection Transactions




200 The request was fulfilled.
201 The POST request was completed successfully.
202 Request accepted for processing of unknown type. Rare.
203 Request partially fulfilled.
301 The requested resource has been permanently moved to a new URL. Usually accompanied by
Location: newURL which automatically connects to the new URL.
302 Requested resource found, but at a different URL. You'll get a 302 Redirection if you omit the
trailing slash when pointing at a directory (sometimes called a malformed request).
304 Unmodified data not returned in response to a GET request with the If-Modified-Since field. Occurs
when a browser requests data found in cache.
Error Messages







400 Error in request syntax.
401 Request requires an Authorization: field, and the client did not provide one. This response is
accompanied by a list of acceptable authorization schemes use WWW-Authenticate response headers.
Error 401 can be part of a client/server dialogue to negotiate encryption and user authentication
schemes.
402 The requested operation costs money, and the client did not specify a valid Chargeto field.
403 Request for forbidden resource denied.
404 Requested resource not found.
500 The server has encountered an internal error and cannot continue processing your request.
501 Request okay but denied because server doesn't support transaction method.
How Markup Languages Work

Markup languages contain two things


Content
Instructions on how to format content (tags)

Markup languages are NOT programming
languages
 3 types of markup languages exist on the
WWW



HTML and xHTML
DHTML
XML
HTML and xHTML
Uses <tags>content</tags>
 Latest version is HTML 4.01



Full specification available at
http://www.w3.org/TR/html4/
HTML can be written with any text editor
but specialized HTML editors have been
developed

We will be using Macromedia Dreamweaver
2004 in this class
Example HTMLs
Block Level Tags
 Text Formatting
 Using Images
 Tables
 Frames
 More examples


http://perleybrook.umfk.maine.edu/samples/
DHTML

DHTML is Dynamic HTML



Allows changes to the HTML “on the fly”
Great for animation and special effects
Uses 3 Technologies

Document Object Model (DOM)


Cascading Style Sheets (CSS)


tracks every object and element on a web pages
Formatting and style information for a web pages
Client-Side Scripting

Provide access to DOM and CSS to change them
Example DHTML

Lots of examples available on the web

W3Schools.com


JavaScript Workshop


http://www.w3schools.com/dhtml/dhtml_examples.asp
http://www.jsworkshop.com/dhtmlexamples.html
Game written by COS 381 students

http://perleybrook.umfk.maine.edu/classes/cos381/jumble
1.htm
How XML works

Allows the creation of new markup
languages
Make your own tags that have special
meaning for a group of people
 There is no presentation information in an
XML document
 Example XML
http://perleybrook.umfk.maine.edu/SourceC
ode/w4code7/xslplane.xml

How XML works

XML languages are defined in

Data Type Definitions


Schemas


http://perleybrook.umfk.maine.edu/SourceCode/w4code7/planes.
dtd
http://perleybrook.umfk.maine.edu/SourceCode/w4code7/planes.
xsd
XML pages are formatted with


CSS

http://perleybrook.umfk.maine.edu/samples/text/planescss.xml

http://perleybrook.umfk.maine.edu/samples/text/planes.css
XLST
 http://perleybrook.umfk.maine.edu/samples/text/xslplane.xml
 http://perleybrook.umfk.maine.edu/samples/text/xslplane.xsl
How XML works
DTD
Document Type
Definations
XML
Schemas
XML
Document
XSLT
Style Sheets
CSS
Browser
Display
Future of XML

XML is the lingua franca for Net Services,
Microsoft’s .NET, Oracle, and many other
Internet based distributed architectures.
 All of HTML can be done in XML and has been
in xHTML
 XML resources



www.xml.com
www.xml.org
http://www.w3.org/XML/
How AJAX works

Asynchronous JavaScript and XML



Combines 5 technologies






XHTML
JavaScript
DOM (DHTML)
CSS
XMLHTTPRequest
Allows parts of the page to be update without affecting the entire
page



Not a new standard but a new “way”
A Google innovation http://maps.google.com/
Does not require a page refresh or reload
Prompts greater user interactivity with the web page
Tutorial

http://www.w3schools.com/ajax/default.asp
http://www.javareference.com/jrexamples/viewexample.jsp?id=111
Hypertext
How Hypertext works

Hypertext is text which is not constrained to be linear.
 Hypertext is text which contains links to other texts.
 HyperMedia is a term used for hypertext which is not
constrained to be text: it can include graphics, video
and sound , for example.
 Hypertext and HyperMedia are concepts, not products.
 Hypertext works with hyperlinks


Word, Icon or Graphic
Hypertext is embedded in WebPages using HTML
 Examples of embedded hyperlinks
Short History of Hypertext
From the book Multimedia and Hypertext: The Internet and Beyond

















1945 Vannevar Bush proposes Memex
1965 Ted Nelson coins the word "hypertext“
1967 The Hypertext Editing System and FRESS, Brown University, Andy van Dam
1968 Doug Engelbart demo of NLS system at FJCC
1975 ZOG (now KMS): CMU
1978 Aspen Movie Map, first hypermedia videodisk, Andy Lippman, MIT Architecture Machine Group
(now Media Lab)
1984 Filevision from Telos; limited hypermedia database widely available for the Macintosh
1985 Symbolics Document Examiner, Janet Walker
1985 Intermedia, Brown University, Norman Meyrowitz
1986 OWL introduces Guide, first widely available hypertext
1987 Apple introduces HyperCard, Bill Atkinson
1987 Hypertext'87 first major conference on hypertext
1991 World Wide Web at CERN becomes first global hypertext, Tim Berners-Lee
1992 New York Times Book Review cover story on hypertext fiction
1993 Mosaic anointed Internet killer app, National Center for Supercomputing Applications
1993 A Hard Day's Night becomes the first full-length feature film in hypermedia
1993 Hypermedia encyclopedias sell more copies than print encyclopedias
How URLs work

A URL is a unique identifier for a
resource on the WWW


Like a address
Example

http://perleybrook.umfk.maine.edu/logo/logo_files/frame.htm

Translation: go to the server perleybrook.umfk.maine.edu and
get the hypertext file “frame.htm” that is in the “logo/logo_files”
directory using the protocol “http”
Image Maps

An Image map is an image with regions that
link to different destinations
 Two types

Client Side Image Maps




Faster
Most common
Users can see the HTML that creates the map and the
possible destinations
Server Side Image Maps

Require a special program (CGI) running on the server


Requires programming skills
Hides the destinations from “View Source”
Creating an Image Map

First divide the image into regions

Circles


Rectangles


Center and radius
Top Left X and Y and Bottom right X and Y
Polygons

X and Y for each vertex of the Polygon
Finding regions
Link to www.bluesky.com
Link to www.montana.com
Link to www.harleydavidson.com
What is a form?

A form is a way to actively collect or display
information to or from a web site to a user
 What can you do with forms?






Get feedback
Have a guestbook
Take a survey
See who’s visiting you
Sell stuff
And much more!
Form example
http://perleybrook.umfk.maine.edu/samples/Black Jack.htm
Form Example
What is a form?

Two basic parts

Structure or shell





Fields
Labels
Buttons
Graphic User Interface (GUI) components
Scripts to process information collected



CGI
JavaScript
ASP
About CGI Scripts

A script is a program written in a scripting
language




Perl
VBscript
JavaScript
Script runs on Web Server through a Interface





Requires Web Server administrator
Common Gateway Interface CGI
ASP engine
.NET framework
JavaScript interpreter
How Web Servers Work

The most basic function that a webserver does is to deliver
requested files over the network

http://www.serverwatch.com/tutorials/article.php/10825_1407961_1
Downloading a Complex Webpage with
Two Graphics Files
HTML Document
Browser
Client PC
Webserver
Application
Webserver
As
Displayed
2
Graphics
Files
Webpage Consists of Three Files
Rendered as a Single Page On-Screen
Downloading a Complex Webpage with
Two Graphics Files
HTML Document
HTML Document
Browser
Client PC
As
Displayed
Webserver
Application
2
Graphics
Files
Webserver
Download Requires 3
HTTP Request-Response Cycles;
Downloads HTML Page First
It has Tags to Identify Other Files
Downloading a Complex Webpage with
Two Graphics Files
Browser
Client PC
As
Displayed
Webserver
Application
2
Graphics
Files
Webserver
Based on Tags in HTML Document,
Browser Requests Downloads of
Remaining Graphics or Other Files
Browser Renders Combined Webpage on Screen
Downloading a Complex Webpage
with Two Graphics Files

Quiz: Your browser downloads a
webpage with three graphics images, a
sound sequence, and a Java applet.
How many files will your browser have to
download?
How Web Servers Works

Web Servers may also run special program
called CGI applications
 CGI applications are often used to process
data from forms
How web servers work

In order to increase functionality most
web servers also do the following
Provide a management interface to manage
files, directories and virtual directories
 Provide a security and authentication
mechanism
 Provide logging
 Provide statistics

How web servers work
How Web sites work with databases

Most large web sites are actually
database driven
my.yahoo.com
 my.msn.com


Used for
Gathering information from users
 Displaying information to users
 Personalization of web pages

CGI and Databases
Example:
http://www.umfk.maine.edu/offices/bio.cfm?recordID=40
3-Tier Architecture
Client PC
with
Browser
1.
Form
Webserver
Application
2.
Server
Data
Mainframe
Server of
External Company
Database
Server
How .NET and Web Services Work

Allows computers on the internet to use
applications and services on other computers
connected to the internet
 How it works

First you find a service you may need

For example




Finding Zip Codes
Calculating Tax Rates
Finding and comparing prices
Use UDDI to find the web service and WSDL to figure how
it works


UDDI --Universal Description, Discovery amd Integration
WSDL -- Web Services Description Language
Universal Description, Discovery, and
Integration (UDDI) Server for Web Services
UDDI Functions:
Client PC
2.
Web Service Interaction
1.
UDDI
Request for
Information,
Response
UDDI Server
Server with
Web Service
Interaction Between
UDDI Servers
to Fulfill a Request
White Pages
By name
Yellow Pages
By type
Green Pages
Details of how
to use,
payment, etc.
UDDI Server
Web Service Description Language
(WSDL)

Protocol for asking a corporate
webserver about the company’s
SOAP-compliant services
Client PC
WSDL
Request-Response Cycle
Corporate
Webserver
How Web Services Work

Now that you have found the service and
figured out how to use it
Send a SOAP (Simple Object Access
Protocol) message using XML to interact
with the Web Service
 Example on following slide show a SOAP
request for a price of a product

Web Service
Web Service
HTTP Request
Client PC
SOAPCapable
Browser
HTTP Response
SOAP Message
Using XML Syntax
Web
Service
Webserver
-Interface
Properties
Methods
Simple SOAP Request and
Response

Simple Object Access Protocol (SOAP)
 Carried in HTTP request or response message
 Formatted using XML Syntax

Similar to HTML syntax but
the sender and receiver can
create new tags that
they can then use in
transactions, such as
<price>$33</price>
HTTP Header
SOAP
Body
Simple SOAP Request and
Response

Situation


There is a pricing object that returns the price if
another object sends the part number, quantity, and
shipping type (rush, etc.) on an interface
Objects can be on different computers
Request
(PartNum, Quantity, ShippingType)
Sending
Object
Pricing
Object
Response
(Price)
Simple SOAP Request and
Response

SOAP Request Message
HTTP Request Header pointing to program
<?xml version=“1.0”>
<BODY>
<QuotePrice xmlns=“QuoteInterface”>
<PartNum>QA78d</PartNum>
<Quantity>47</Quantity>
<ShippingType>Rush</ShippingType>
</QuotePrice>
</BODY>
Note: xmlns specifies an XML namespace for the object
..defines a XML schema
Figure 11.14: Simple SOAP Request
and Response

SOAP Response Message
HTTP Response Header
<?xml version=“1.0”>
<BODY>
<QuotePrice xmlns=“QuoteInterface”>
<Price>$750.33</Price>
</QuotePrice>
</BODY>
Microsoft .NET

http://www.microsoft.com/net/basics.mspx
Perspective on Web Services

Benefits of Web Services



Offers a way to standardize interactions between
objects over the Internet
Can make distributed computing far simpler once
Web services standards are fully developed
Concerns



High overhead (very chatty)
Standards immaturity
Security is embryonic
How Grid Computing Works
Using many (>100 and more like 10000)
ordinary computers connected together
over a network to perform a single task
or a series of related tasks
 Examples

Seti@home
 Beowulf
 Factoring large numbers

Seti@home
Largest number ever factored
How FTP works

Used to transfer files over the Internet

Needed

Client software




Can use Internet Browsers
Username/Password
FTP site
We will be using FTP in this class to place web
page assignments on the web server

Common practice
Ftp using Windows Explorer

In address bar

ftp://perleybrook.umfk.maine.edu

Login with the same info as you login in to
these computers
 Select COS 125 folder
 Select the folder with your first name
 Moving files



Drag and drop files
Use menu edit copy/paste
Click on file and right mouse for context menu
Assignment #2
Your first web page!
 Due Feb 15
 Using Microsoft Word
 Assignment 2

Microsoft Word

Can automatically create web pages

Problems
“bloat” code
 Proprietary code

Good for quick jobs
 Bad for anything that has to be maintained
over time

Microsoft Word as a Web Page
Design Tool
Select “new” from file menu
 Select “blank web page”
 Type out web page
 Add graphics
 Save as “Web Page (*htm;*html)”
 If you use graphics, Word will create a
folder with the graphic files


http://www.pickens.k12.sc.us/Pickens.ms/word_course
.htm
COS 125 Web Site

http://perleybrook.umfk.maine.edu/classes/cos125/