to get the file - Korea University

Lecture 1.Internet & WWW1

Computer Network• A computer network is a system for communicationbetween computers.• These networks may be fixed (cabled, permanent) ortemporary (as via modems or null modems)• Wireless internet generally works over wifi or cellularcarrier's networks• LAN (Local Area Network) is a computer networkcovering a small local area such as office• WAN (Wide Area Network) is a computer networkcovering a wide geographical area such as building2

Communication Protocol• A set of standard rules for data representation, signaling,authentication, and error detection required to sendinformation over a communications channel• TCP/IP (Transmission Control Protocol / Internet Protocol)• FTP (File Transfer Protocol)• SMTP (Simple Mail Transfer Protocol)• HTTP (Hyper Text Transfer Protocol)• PPP (Peer-to-Peer Protocol)• SLIP (Serial Line Internet Protocol)3

A Brief Intro to the Internet• Origins: ARPAnet• Late 1960s and early 1970s• Funded by DoD‟s Advanced Research Projects Agency• Focused on the network reliability (robustness)• Connecting ARPA-funded research organizations only• BITNET, CSNET - late 1970s & early 1980s• email and file transfer for other institutions• Because It‟s Time Network / Computer Science Network• BITNET began at the City University of New York• Could not become a dominant national network4

A Brief Intro to the Internet• NSFnet - 1986• Sponsored by National Science Foundation (NSF)• Initially connected the NSF-funded supercomputer centers• Soon, available to academic institutions /research labs• By 1990, it had replaced ARPAnet for non-military uses• Soon became the network for all (by the early1990s)• In 1995, a small part of NSFnet as research network• The rest eventually became known as the Internet5

A Brief Intro to the Internet• Domain names• IP address in the textual form rather than numbers• Host machine name followed by domain names• First domain is the smallest; last is the largest• Last domain specifies the type of organizationex) In the U.S. com for companygov for governmentedu for educational institutionsOtherwise, country name such as .kr for KOREA• Fully qualified domain name - the host name and all ofthe domain namesex) movies.comedy.marxbros.com8

A Brief Intro to the Internet• Fully qualified domain names and IP addresses areequivalent• IP address and Domain Name are 1:1• IP address: numbers only, difficult to remember• Domain Name: text, easy to remember• Their conversions are done by software systemscalled name servers• Domain Name System (DNS) server9

Domain NameWebServerDomainNameInternetDomainNameInternetIPAddressIPAddressNameServer10

Domain Name• By the mid-1980s, several different protocols had been invented and were being used on the Internet (Telnet, FTP, Usenet, mailto)=> Users should learn all the different user interfaces• A possible solution to the proliferation of differentprotocols being used on the Internet=> World Wide Web• World Wide Web: Internet-based hypermedia initiativefor global information sharing11

The World-Wide Web• Origins• Proposed by Tim Berners-Lee et al at CERN in 1989,who wrote the first web client and server in 1990• Allow scientists to use the Internet to exchangedocuments describing their work• Documents have a form of hypertext• Use embedded links to access other documents fornon-sequential browsing• Unit of information: Pages / Documents / Resources• Hypermedia – when a document contains more than justtext – images, sound, etc.* CERN: the European Particle Physics Laboratory12

WWW (World Wide Web)• Web or Internet?• The Internet is a collection of computers and otherdevices connected by equipment to communicate• The Web is a collection of software and protocols thathas been installed on most computers on the Internet• Global information space which people can read andwrite via computers connected to the Internet.• World Wide Web is combination of four ideas :• Hypertext• Resource identifiers• Client-server architecture• Markup language13

WWW (World Wide Web)• Hypertext, that is the ability, in a computer environment, tomove from one part of a document to another or from onedocument to another through internal connections amongthese documents (called "hyperlinks");• Resource identifiers, that is the ability, on a computernetwork, to locate a particular resource (computer,document or other resource) on the network through aunique identifier;• The client-server model of computing, in which clientsoftware or a client computer makes requests of serversoftware or a server computer that provides the client withresources or services, such as data or files; and• Markup language, in which characters or codes embeddedin text indicate to a computer how to print or display thetext, e.g. as in italics or bold type or font.14

WWW (World Wide Web)• Send and retrieve multimedia documents including text,images, graphs, sounds, and video• Web Browser• Client program for viewing Hypertext document• GUI (Graphic User Interface)• Contributed to booming up the web• HTML (Hyper Text Markup Language)• A set of pre-defined tags• WYSIWYG(What You See Is What You Get) authoring tool• SGML (Standard Generalized Markup Language)• HTTP (Hyper Text Transfer Protocol) : protocol forsending/receiving HTML documents15

Web Browsers• Client program for viewing Hypertext documents• Mosaic - NCSA (Univ. of Illinois), in early 1993• First to use a GUI, led to explosion of Web use• Initially for X-Windows, under UNIX, but was ported toother platforms by late 1993• Browsers are clients - always initiate, servers react(although sometimes servers require responses)• Most requests are for existing documents, usingHypertext Transfer Protocol (HTTP)• But, some requests are for program execution, withthe output being returned as a document• Internet Explore / Netscape / Mosaic / FireFox16

Web Servers• Web servers are programs that provide documents torequesting browsers• Slave program in that they act only when requests aremade to them• Apache• the most commonly used web servers• takes 59% over 110 million web hosts as of March 2007• Microsoft‟s Internet Information Server (IIS)• runs under Windows OS• takes 31%17

Web Server Operation• Provide responses to browser requests, either existingdocuments or dynamically built documents• Browser-server connection is now maintained throughmore than one request-response cycle• All communications between browsers and serversuse Hypertext Transfer Protocol (HTTP)• Web servers run as background processes in theoperating system• Monitor a communications port on the host, acceptingHTTP messages when they appear18

Web Server OperationsSummarizing1. Monitor a communications port on its host machine2. Accept HTTP commands through that port3. Perform the operations of the commands4. Send the output to the requesting client• HTTP commands include a URL, which can specifyone of two different things• the address of a data file on the server• a program stored on the server that the client wantsexecuted19

General Server Characteristics• All web servers have a common ancestry• the server developed at CERN in Europe• the server developed at NCSA at the Univ. of Illinois• Two separate file directories• Document directory stores the Web documents• Server directory stores the server and its support software• Typically, clients do not access the document rootdirectly in URLs => use directory mapping• Virtual hosts: secondary hosts when servers cansupport more than one site on a computer• Proxy servers: when servers can serve documents in thedocument root of other machines on the Web20

Virtual Hosts SettingServer IP : 192.168.10.120Domains: www.linux.com at /usr/local/apache/htdocswww.flower.com at /home/flower/public_html1. Put the following into /etc/hosts192.168.10.120 www.linux.com192.168.10.120 www.flower.com2. Put the following into httpd.confNameVirtualHost 192.168.10.120ServerAdmin webmaster@linux.comDocumentRoot /usr/local/apache/htdocsServerName www.linux.com...ServerAdmin flower@linux.comDocumentRoot /home/flower/public_htmlServerName www.flower.com...21

Apache Server• began as the NCSA server, httpd, with some addedfeatures• has nothing to do with the native American tribe• named from “a patchy version of the httpd server”• reasons for its popularity• fast and reliable• open-source software• best available server for Unix-based systems• httpd.conf: configuration file that stores directives tocontrol an Apache server‟s behavior• details at http://httpd.apache.org/docs/2.2/mod/quickreference.html• ported to the Windows platform22

Service DirectivesDirective NameServerNameServerRootServerAdminDocumentRootAliasRedirectDirectoryIndexUserDirPurposeNames the server systemPath to the server rootThe site administrator‟s addressPath to the document rootThe document root‟s virtual and physical pathsA pointer to a document or document directory ona different serverNames of the welcome pagesSpecifies whether local users can add/deletedocuments23

IIS (Internet Information Server)• supplied as part of Windows OS• shows reasonably good performance most Windows-based Web servers use this• Apache and IIS provide similar varieties of services• Difference in the view of site manager• Apache controlled by a configuration file• IIS controlled by a window-based management programcalled IIS snap-in24

URL (Uniform Resource Locator)• Used to identify documents (resources) on the Internet• URL format: scheme:object-address• The scheme is often a communication protocol(Ex) http, ftp, gopher, telnet, file, mailto, news• In the case of HTTP, the object address is//Domain Name/document path/document name (or IP Address)Ex) http://www.naver.com• The hostname is the name of the server computer thatstores the document• Messages to a host machine must be directed to theappropriate process on the host for handling, which isidentified by the port number• The default port number of Web server process is 8025

URL• URLs cannot include spaces or any of a collection ofother special characters (semicolons, colons, &, ...)• To include them, the character must be coded as a %followed by its hexadecimal ASCII code(Ex) San Jose for domain name San%20Jose• The doc path may be a complete path or abbreviatedas a partial path• A partial path is relative path to some base pathspecified in the configuration file• The rest is furnished by the server configuration(Ex) http://www.gum.com/files/f99/map.html= http://www.gun.com/map.html with root directoryfiles/f99 in the configuration file.26

URL• If the doc path ends with a slash, it means a directory,not a single file(Ex) http://www.gumboco.com/departments/• If a directory is specified with no name as in(Ex) http://www.gumboco.com/The server searches at the top level of the directory inwhich servable documents are normally stored forsomething it recognizes as ( home page ).index.html• By convention, this file is named as ( ).• If no home page found, a directory listing isconstructed and returned to the browser.27

Multipurpose Internet Mail Extensions (MIME)• Originally developed for email• Used to specify to the browser the form of a filereturned by the server (attached by the server to thebeginning of the document)• Type specifications: type/subtype• Ex: text/plain, text/html, image/gif, image/jpeg• The most common MIME types: text, image, video• Server gets type from the requested file name‟s suffix• Ex) .html implies text/html• Browser gets the type explicitly from the server28

HyperText Transfer Protocol (HTTP)• The protocol used by ALL Web communications• Its complete specs available at http://www.w3.org• HTTP consist of two phases: Request and Response• Each communication consists of a header and a body• Header contains information about the communication• Body contains the data of the communication• General form of an HTTP Request1. HTTP method domain part of the URL HTTP ver.2. Header fields3. Blank line4. Message body(Ex) GET /cs.uccp.edu/degrees.html HTTP/1.129

Request Methods• Most commonly used methods:• GET – Fetches the contents of the specified document• POST - Executes the document, using the data in body• HEAD - Fetches just the header info. of the document• PUT – Replaces the document with the data in body• DELETE - Removes the document from the server• GET and POST are the most frequently used.• POST was originally for posting a news article to anewsgroup.• Its common use now is to send form data to the server,along with a request to execute a program on the serverto process the form data30

HyperText Transfer Protocol• Four categories of header fields:1. General: For general info. such as the date2. Request: Included in request headers3. Response: For response headers4. Entity: Used in both request and response headers• Common request field is accept, which specifies apreference of the browser for the MIME type of therequested document.Accept: text/plainAccept: image/gifAccept: text/htmlAccept: text/*• If the request has a body, the body length must begiven with a Content-length field.Content-length: 488Content-type: text/html31

Request with GET methodGET /cgi-bin/form1?srch=dogfish&srvr=Canada HTTP/1.0Accept: text/plain..........User-Agent:NCSA Mosaic for X-Win/2.4 libwww/2.12 modified/* blank line/* empty body32

Request with POST methodPOST /cgi-bin/form1 HTTP/1.0Accept: text/plain..........User-Agent:NCSA Mosaic for X-Win/2.4 libwww/2.12 modifiedContent-type: application/x-www-form-urlencodedContent-length: 24/* blank linesrch=dogfish&srvr=Canada33

HyperText Transfer Protocol• Can communicate with HTTP server without a browser/* creates a connection to the http port on theblanca.uccs.edu server> telnet blanca.uccs.edu http/* the server responds withTrying 128.198.162.60 ...Connected to blancaEscape character is „^]‟./* after connection, can give any http commandsGET /respond.html HTTP/1.1Host: blanca.uccs.edu34

Response Phase• General Form:1. Status line2. Response header fields3. blank line4. Response body• Status line format:HTTP version status code explanation(Ex) HTTP/1.1 200 OK (Current version is 1.1)404 Not Found /* file was not found200 OK /* handled without error500 /* encounter a problem35

Status code• Status code is a three-digit number; first digit specifiesthe general status1 => Informational2 => Success3 => Redirection4 => Client error5 => Server error36

HTTP Example• The essential header field is Content-type• An example of a complete response header:HTTP/1.1 200 OKDate: Tues, 18 May 2004 16:45:13 GMTServer: Apache (Red-Hat/Linux)Last-modified: Tues, 18 May 2004 16:38:38 GMTEtag: "841fb-4b-3d1a0179"Accept-ranges: bytesContent-length: 364Connection: closeContent-type: text/html, charset=ISO-8859-137

Toolbox• Client-side• XTHML: markup language• XML: meta-markup language• JavaScript: programming language• Java• Server-side• Perl, PHP, Ruby: programming languages• Java• Web technology• AJAX: uses JavaScript and XML38

Toolbox: XHTML• To describe the general form and layout of documents• An XHTML document is a mix of content and controls• Controls are tags and their attributes• Tags often delimit content and specify something abouthow the content should be arranged in the document• Attributes provide additional information about the tagcontent• History• XHTML1.0 introduced in early 2000 by the W3C(www.w3c.org)• Alternative to HTML 4.01• Same except stronger syntactic rules• XHTML 2.0 in May 200139

Toolbox: XHTML• Tools for creating XHTML documents• XHTML editors• make document creation easier• Shortcuts to typing tag names, spell-checker,syntax-checker• WYSIWYG XHTML editors• Need not know XHTML to create XHTML documents• MS FrontPage, Macromedia Dreamweaver, AdobePageMill• Plug ins: Integrated into tools like word processors,effectively converting them to WYSIWYG XHTMLeditors• Filters: Convert documents in other formats such asLaTex or Word to XHTML40

XHTML Example• image.html• line.html41

Toolbox: XML• A meta-markup language• Used to create a new markup language for a particularpurpose or area• Because the tags are designed for a specific area,they can be meaningful• No presentation details• A simple and universal way of representing data ofany textual kind42

XML ExampleEveryday ItalianGiada De Laurentiis200530.00Harry PotterJ K. Rowling200529.9943

Toolbox: JavaScript• A client-side XHTML-embedded scripting language• Its primary usage is(i) to validate form data and(ii) to create dynamic XHTML documents• Only related to Java through syntax• Dynamically typed and not object-oriented* C++ and Java: Strongly typed languages• Provides a way to access elements of HTMLdocuments and dynamically change them44

JavaScript ExampleGrocery Menu - milk, bread, eggs, cheeseWith size = 1 (the default) milk bread eggs cheese 45

JavaScript Example The onLoad event handler> Microsoft Internet Explorer!You are visiting the home page ofPete‟s Pickled PeppersWELCOME!!!OK46

PHP Example…. Buyer's Name: Unpopped Popcorn (1 lb.) $3.00 47

Welcome to Millennium Gymnastics Booster Club Popcorn SalesBuyer’s Name:Street Address:City, State, Zip:Joe Popcorn123 Popcorn LanePopcorn City, Iowa, 22222Product Price QuantityUnpopped Popcorn(1 lb.) $3.00 3Caramel Popcorn(2 lb. canister) $3.50Caramel Nut Popcorn(2 lb. canister) $4.50 4Toffey Nut Popcorn(2 lb. canister) $5.00 5Payment MethodVisaMaster CardDiscoverCheckSubmit OrderClear Order Form48

Toolbox: Java• General purpose object-oriented programminglanguage• Based on C++, but simpler and safer• Our focus is on applets, servlets, and JSP49

Toolbox: Perl• Provides server-side computation for HTMLdocuments, through CGI• Perl is good for CGI programming because:• Direct access to operating systems functions• Powerful character string pattern-matching operations• Access to database systems• Perl is highly platform independent, and has beenported to all common platforms• Perl is not just for CGI50

Toolbox: PHP• A server-side scripting language• An alternative to CGI• Similar to JavaScript• Great for form processing and database accessthrough the Web51

PHP Example powers.php Powers table Number Square Root Square Cube Quad 52

PHP Example

ResultPowers tableNumber Square Root Square Cube Quad1 1 1 1 12 1.4142125623731 4 8 163 1.7320508075689 9 27 814 2 16 64 256567891054

Home page, Web page, Web site.• Terminology• Home page / Web page / Web siteHome pageWeb siteWeb page Web page Web pageWeb PageWeb page Web page Web pageWeb page Web page Web page55

Fundamentals of Web page design• Attractive web sites are also profitable• Banner ad.• High quality contents and artistic beauty• Components of web page• Header: determines first impression• Body: contains actual contents• Footer: update date, e-mail address, copyright, counter• Banner ads are usually located in the header or footer56

Bad web sites• No purpose or Poor contents• A few photos in the personal home page, or• Greeting from CEO in the enterprise home page.• Poor consideration for diverse users• Tremendous loading time• 10 second‟s rule• Strange usage of colors• Misc.• Script error• Strange plug-in• Many “under construction”s57

Factors for good web sitesCorrectness Reliability MaintenancePortabilityWebSiteSecurityFriendliness Worth Extension58

Creating Web Site (1)• Purpose of a web site• Personal home page• Enterprise advertising• Providing information• E-commercial• Internet service• Design factors• Business: objection and goal, client, work, interaction• Contents: application/theory, information/entertainment• System: DB and system performance, Maintenance59

Creating Web Site (2)• Choose target: Representation and contents• Story Board• Brain storming• Classifying contents based on Site Map or Flow Chart• Creating web page draft on the paper• Creating web pages• Using HTML or WYSIWYG authoring tool• Preparing related images• Creating web pages• Establishing links among pages60

User interface and search mechanisms• How to present to users: determine connections of pages• Should be designed for users• Web site searchHOMEHOMELinearHOMEMesh Hierarchy Linear + Hierarchy61

Search mechanisms• Text + bullet• Common buttons• Image Map• Site Map• Remote control window• Metaphor• Graphic symbol or symbolic imagemetaphor62

Site maps• Sitemaps are an easy way for webmasters to informsearch engines about pages on their sites that areavailable for crawling. In its simplest form, a Sitemapis an XML file that lists URLs for a site along withadditional metadata about each URL (when it was lastupdated, how often it usually changes, and howimportant it is, relative to other URLs in the site) sothat search engines can more intelligently crawl thesite.63

Site map example64

Web Page components• Various text format• Graphic text• Text format in the page• List, Enumeration• Table• Space-conscious placement• Use of Frame65

Principle of Web Page design• Home page downloading in 10 seconds• Update Frequently• Avoid any confusing links• Design overall web structure easily• Design to traverse among pages easily• Site links using relative path• Avoid excessive use of animation/graphic• Avoid emphasizing minor items• Avoid excessive use of frames66

For Better Web Page• Web page titles should be meaningful• Use of preview images• Web pages should be intended for generalenvironment• Web pages should be created for users• Long downloading should be with a warning message• Links within a sentence should be avoided67