COS 125

DAY 5

Agenda

Questions from last Class?? Assignment one graded

8 A’s, 1 B, and 1 MIA Assignment #2 posted

Due Feb 15 We will discuss later in class

Capstone proposals due Feb 15 Suggestion is to create a web page os some sort

Quiz #1 on Feb 12 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 WebConnected to each other using HypertextPages are written in HTMLWorks on Client/server model

Web Site Structure

First page is called the Home PageOther pages are organized in one of

three possible typesTree Linear random

Tree structure

Home page

pagepage

page page

page page

pagepage page pagepage 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 pagesHTMLDHTMLXMLScriptsApplications and programs

Helper appsPlug-ins

Web Browsers

Two most popular and competitive browsers Internet ExplorerNetscape Navigator

Dead as of Feb 1, 2008 RIPBoth have very similar features

New entriesFirefoxOpera

Web Codes

Successful 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.

Redirection Transactions 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 developedWe will be using Macromedia Dreamweaver

2004 in this class

Example HTMLs

Block Level TagsText FormattingUsing ImagesTablesFramesMore 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)

tracks every object and element on a web pages

Cascading Style Sheets (CSS) 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 webW3Schools.com

http://www.w3schools.com/dhtml/dhtml_examples.asp

JavaScript Workshop 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 languagesMake your own tags that have special

meaning for a group of peopleThere is no presentation information in an

XML document Example XML

http://perleybrook.umfk.maine.edu/SourceCode/w4code7/xslplane.xml

How XML works

XML languages are defined in Data Type Definitions

http://perleybrook.umfk.maine.edu/SourceCode/w4code7/planes.dtd

Schemas 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

XMLDocument

DTDDocument Type

DefinationsXML

Schemas

CSSXSLT

Style Sheets

BrowserDisplay

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 Not a new standard but a new “way” A Google innovation http://maps.google.com/

Combines 5 technologies XHTML JavaScript DOM (DHTML) CSS XMLHTTPRequest

Allows parts of the page to be update without affecting the entire page 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 WWWLike 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

Center and radiusRectangles

Top Left X and Y and Bottom right X and YPolygons

X and Y for each vertex of the Polygon

Finding regions

Link to www.harleydavidson.com

Link to www.montana.com

Link to www.bluesky.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

Client PC

BrowserWebserverApplication

Webserver

Webpage Consists of Three FilesRendered as a Single Page On-Screen

AsDisplayed

2Graphics

Files

HTML Document

Downloading a Complex Webpage with Two Graphics Files

HTML Document

Client PCBrowser Webserver

Application

Webserver

Download Requires 3HTTP Request-Response Cycles;

Downloads HTML Page FirstIt has Tags to Identify Other Files

AsDisplayed

2Graphics

Files

HTML Document

Downloading a Complex Webpage with Two Graphics Files

Client PC

Browser WebserverApplication

Webserver

Based on Tags in HTML Document,Browser Requests Downloads of

Remaining Graphics or Other Files

Browser Renders Combined Webpage on Screen

AsDisplayed

2Graphics

Files

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 followingProvide a management interface to manage

files, directories and virtual directoriesProvide a security and authentication

mechanismProvide logging Provide statistics

How web servers work

How Web sites work with databases

Most large web sites are actually database drivenmy.yahoo.commy.msn.com

Used forGathering information from usersDisplaying information to usersPersonalization of web pages

CGI and Databases

Example:http://www.umfk.maine.edu/offices/bio.cfm?recordID=40

3-Tier Architecture

Client PCwith

Browser 1.Form

Web-server Application

Server

Mainframe

DatabaseServer

Server ofExternal Company

2.Data

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:

White Pages By name

Yellow Pages By type

Green Pages Details of how to use, payment, etc.

Client PC

UDDI Server UDDI Server

Server withWeb Service

1.UDDI

Request forInformation,Response

2.Web Service Interaction

Interaction BetweenUDDI Servers

to Fulfill a Request

Web Service Description Language (WSDL)

Protocol for asking a corporate webserver about the company’s SOAP-compliant services

Client PC

CorporateWebserver

WSDLRequest-Response Cycle

How Web Services Work

Now that you have found the service and figured out how to use itSend 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

HTTP Response

HTTP Request

Client PCWebserver

SOAP-CapableBrowser

WebService

--Interface

PropertiesMethodsSOAP Message

Using XML Syntax

Web Service

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 butthe sender and receiver cancreate new tags thatthey can then use intransactions, such as<price>$33</price>

HTTP Header

SOAPBody

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

SendingObject

PricingObject

Request(PartNum, Quantity, ShippingType)

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

ExamplesSeti@home BeowulfFactoring 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 15Using Microsoft WordAssignment 2

Microsoft Word

Can automatically create web pagesProblems

“bloat” codeProprietary code

Good for quick jobsBad for anything that has to be maintained

over time

Microsoft Word as a Web Page Design Tool

Select “new” from file menuSelect “blank web page”Type out web pageAdd graphicsSave 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/