Скачать презентацию LIS 650 lecture 5 information architecture javascript http Скачать презентацию LIS 650 lecture 5 information architecture javascript http

dfa8025e36b1a942e07f25c5c8e7333d.ppt

  • Количество слайдов: 99

LIS 650 lecture 5 information architecture javascript, http and apache Thomas Krichel 2004 -12 LIS 650 lecture 5 information architecture javascript, http and apache Thomas Krichel 2004 -12 -18

Sensitivity exercise • What do you hate about a web site? • What do Sensitivity exercise • What do you hate about a web site? • What do you like about a web site? • All issues to do with that fall into three categories – Technical – Look and Feel – Architecture

Reasons to hate a web site • • Can't find it. Page crowded Loud Reasons to hate a web site • • Can't find it. Page crowded Loud colours Gratuitous use of technology Inappropriate tone Designer centered Lack of attention to detail

Reasons to like a web site • • • useful attractive to look at Reasons to like a web site • • • useful attractive to look at thought provoking findabilty personalisation

Why is it so difficult • technical expertise • graphical design expertise • overall Why is it so difficult • technical expertise • graphical design expertise • overall structure

IA determines • organization • content • functionality – navigation – labeling – searching IA determines • organization • content • functionality – navigation – labeling – searching

Good IA is important for the producer • web site an important point of Good IA is important for the producer • web site an important point of first contact • needs to determine overall design before the site is built • reorganizing a site is – costly – difficult

Topics covered • • classification navigation labelling making a site searchable Topics covered • • classification navigation labelling making a site searchable

The challenge of classification • ambiguity: ``a tomato is a red or yellowish fruit The challenge of classification • ambiguity: ``a tomato is a red or yellowish fruit with a juicy pulp, used as a vegetable, botanically it is a berry. '' • heterogeneity – in a library – on a web site • granularity • format • difference in perspective • internal politics

Organizational schemes • Exact schemes – alphabetical – chronological – geographical • ambiguous schemes Organizational schemes • Exact schemes – alphabetical – chronological – geographical • ambiguous schemes – topical: should be there, but not the only scheme – task-oriented – audience-specific: open or closed • metaphor-driven: not as overall organization • Hybrid schemes are not good

The mixed-up library • • adult arts and humanities community center get a library The mixed-up library • • adult arts and humanities community center get a library card learn about our library science teen youth

Organizational form: hierarchies • • • keep balance between breadth and depth obey 7 Organizational form: hierarchies • • • keep balance between breadth and depth obey 7 +-2 rule horizontally, no more than 5 levels vertically cross-link ambiguous items if really necessary keep new sites shallow

organizational forms: hypertext • great flexibility • great potential for confusion • not good organizational forms: hypertext • great flexibility • great potential for confusion • not good as a prime organizational structure

organizational forms: database • • powerful for searching useful if there is controlled vocabulary organizational forms: database • • powerful for searching useful if there is controlled vocabulary easy reorganization on the fly or static generation of pages – but ensure robot indexing • not good for heterogenous data

Navigation aids • • provide context allow for flexibility of movement support associative learning Navigation aids • • provide context allow for flexibility of movement support associative learning danger of overwhelming the user

browser navigation aids • They include – – – – open back forward history browser navigation aids • They include – – – – open back forward history bookmarks prospective view visited url color • sites should not corrupt the browser.

navigation • the ``you are here'' mark – – pages should indicate site name navigation • the ``you are here'' mark – – pages should indicate site name navigation should be consistent navigation not to refer to current pages highlight current page in a different way • allow for lateral navigation

Types of navigational systems • global hierarchical navigation systems – text – icon • Types of navigational systems • global hierarchical navigation systems – text – icon • local navigation systems: integration with global system can be challenging • ad hoc navigation: clear label are required

Frames are problematic • • potential waste of pages real estate speed of display Frames are problematic • • potential waste of pages real estate speed of display disrupt the page model complex design

remote navigation system I • table of contents – – good in a hierarchical remote navigation system I • table of contents – – good in a hierarchical web site reinforce the hierarchy facilitate known-item access resist temptation to overwhelm user • indexes – – presents key term without hierarchy key terms found from search behavior links terms to final destination pages use term rotation

remote navigation systems II • site maps – – – is a graphical representationof remote navigation systems II • site maps – – – is a graphical representationof the site's contents new because no equivalent in print there automated tools to generate site maps seldomly well-done to be kept simple • guided tours – important for sites with restricted access – should feature linear navigation

labelling • a label is short expression that represents a larger set of information. labelling • a label is short expression that represents a larger set of information. • example: ``contact us'' • labelling is an outgrowth of site organization, that we have discussed previously. • labelling communicates the organization of the site

Why bother • we need to guess at how users respond to a label Why bother • we need to guess at how users respond to a label • users will not spend much time interpreting the label • appropriate tone, no ``hot'', cool'', `stuff'' • should reflect thinking of the user, not of the owner • it is easy to have unplanned labelling

Good labelling • Sticking with the familiar – – – main, main page, home Good labelling • Sticking with the familiar – – – main, main page, home page search, find browse contact, contact us, feedback Help, FAQ, Frequently Asked Questions About, About Us • Labels may be augmented with scope notes

Grammatical consistency • contact us, search our site, browse our content • contact, search, Grammatical consistency • contact us, search our site, browse our content • contact, search, browse • contact information, search page, table of contents • (also good in student essays)

Labels as indexing terms • use in <meta>tags, or in <title> tag • use Labels as indexing terms • use in tags, or in tag • use as controlled vocabulary in the database • but some search, in fact almost all, engines do not use metadata </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Textual labels born in Völklingen, (Saarland) in 1965, I studied Economics and Social Sciences" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-27.jpg" alt="Textual labels born in Völklingen, (Saarland) in 1965, I studied Economics and Social Sciences" /> Textual labels born in Völklingen, (Saarland) in 1965, I studied Economics and Social Sciences at the universities of Toulouse, Paris, Exeter and Leicester. Between Febrary 1993 and April 2001 I lectured in the Department of Economics at the University of Surrey. In 1993 I founded Net. Ec, a consortium of Internet projects for academic economists. In 1997, I founded the Re. PEc dataset to document Economics. Between October and December 2000, I held a visiting professorship at Hitotsubashi University. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="labels as headings • good practice: – consistency in terminology: wording on labels is" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-28.jpg" alt="labels as headings • good practice: – consistency in terminology: wording on labels is" /> labels as headings • good practice: – consistency in terminology: wording on labels is uniform and cohesive – consistency in granularity • chunks covered by labels at the same level is roughly equal • chunks covered do not vary by their depth </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Iconic labels • There is only a limited ``vocabulary'' of commonly understood labels •" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-29.jpg" alt="Iconic labels • There is only a limited ``vocabulary'' of commonly understood labels •" /> Iconic labels • There is only a limited ``vocabulary'' of commonly understood labels • it is fine for some key concepts • labels need to be very consistently placed • they can communicate a graphic identity for the page • they are easy to find on a page, provided that page is not long </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Designing labelling systems I • start from existing one – put in table or" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-30.jpg" alt="Designing labelling systems I • start from existing one – put in table or" /> Designing labelling systems I • start from existing one – put in table or tree (on paper) – make small changes towards consistency • ``benevolent plagiarism'' from competitors and academic sites • use controlled vocabularies, example yellow pages </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Designing labeling systems II • use a thesaurus, example legislative indexing vocabulary – –" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-31.jpg" alt="Designing labeling systems II • use a thesaurus, example legislative indexing vocabulary – –" /> Designing labeling systems II • use a thesaurus, example legislative indexing vocabulary – – ``see'' link ``see also'' links broader terms narrower terms • labels from contents: best judged by an outsider • • • labels from query logs labels from user interviews labels from modeling user needs </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="fine tuning a labelling system • • • remove duplicates sort alphabetically homogenize case" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-32.jpg" alt="fine tuning a labelling system • • • remove duplicates sort alphabetically homogenize case" /> fine tuning a labelling system • • • remove duplicates sort alphabetically homogenize case and punctuation and grammar remove synonyms according to audience make labels as different from one another as possible search for gaps look into the future keep scope focussed consider granularity </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="why not make a site searchable • • not a tool to satisfy all" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-33.jpg" alt="why not make a site searchable • • not a tool to satisfy all" /> why not make a site searchable • • not a tool to satisfy all user's needs not good on poor contents not a cure for bad browsing! needs good planning </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="why make a site searchable • cope with bad organization (Foyle's) • dynamic contents" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-34.jpg" alt="why make a site searchable • cope with bad organization (Foyle's) • dynamic contents" /> why make a site searchable • cope with bad organization (Foyle's) • dynamic contents • large contents </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="user needs • • some want overview, others want detail some need accuracy, others" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-35.jpg" alt="user needs • • some want overview, others want detail some need accuracy, others" /> user needs • • some want overview, others want detail some need accuracy, others don‘t care much some can wait, others need it now some need some info, others need a comprehensive answer </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="user's searching expectation • • known-item searching existence searching exploratory searching comprehensive searching " src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-36.jpg" alt="user's searching expectation • • known-item searching existence searching exploratory searching comprehensive searching " /> user's searching expectation • • known-item searching existence searching exploratory searching comprehensive searching </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="integrated searching and browsing • literature deals with separate browsing and searching systems •" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-37.jpg" alt="integrated searching and browsing • literature deals with separate browsing and searching systems •" /> integrated searching and browsing • literature deals with separate browsing and searching systems • browsing and searching in a single system • with multiple iteration • and associative learning takes place </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="designing search interfaces I • level of expertise – boolean? – concept search? •" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-38.jpg" alt="designing search interfaces I • level of expertise – boolean? – concept search? •" /> designing search interfaces I • level of expertise – boolean? – concept search? • amount returned – comprehensive? – verbose? • how much to make searchable </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="designing search interfaces II • search target – navigation pages? – HTML only? •" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-39.jpg" alt="designing search interfaces II • search target – navigation pages? – HTML only? •" /> designing search interfaces II • search target – navigation pages? – HTML only? • are there specific types of data that users will want multi-lingual? • audience difference </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title=" • • features of sophisticated search engines fielded searches sophisticated query languages reusable" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-40.jpg" alt=" • • features of sophisticated search engines fielded searches sophisticated query languages reusable" /> • • features of sophisticated search engines fielded searches sophisticated query languages reusable results set customizable relevance </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Deal with problems • getting too much: suggest boolean AND • getting nothing: suggest" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-41.jpg" alt="Deal with problems • getting too much: suggest boolean AND • getting nothing: suggest" /> Deal with problems • getting too much: suggest boolean AND • getting nothing: suggest boolean OR or truncation • bad answers: suggest to contact an expert, may be not. . . </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="today • information architecture • javascript • http • apache introduction " src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-42.jpg" alt="today • information architecture • javascript • http • apache introduction " /> today • information architecture • javascript • http • apache introduction </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="the <script> • <script> is an element that calls a script. • It requires" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-43.jpg" alt="the <script> • <script> is an element that calls a script. • It requires" /> the <script> • <script> is an element that calls a script. • It requires a "type" attribute that gives the type of the script language. e. g. type="text/javascript". • It takes the "src" argument that gives a URI where the script can be found. Such a script is called an external script. • It takes a "defer" attribute. If set as defer="1" you tell the user agent that the script will generate no output. This helps the user agent in that case. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="example <script type="text/javascript"> document. write("hello, world"); </script> • Interestingly enough, you can place this" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-44.jpg" alt="example <script type="text/javascript"> document. write("hello, world"); </script> • Interestingly enough, you can place this" /> example <script type="text/javascript"> document. write("hello, world"); </script> • Interestingly enough, you can place this script in the head or the body. • This is an example of an automated script. The user has to do nothing to get the script to run. • You can also trigger a script. To do that, we have to study some more HTML attributes. We will do that later. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="external script • You can also create an external file, say hello. js with" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-45.jpg" alt="external script • You can also create an external file, say hello. js with" /> external script • You can also create an external file, say hello. js with the line document. write("hello, world"); • Then you can call it up in the html file <script type="text/javascript" src="hello. js"/> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="default script language • You should set the default scripting language used in the" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-46.jpg" alt="default script language • You should set the default scripting language used in the" /> default script language • You should set the default scripting language used in the document using the <meta> element in the <head> • <meta http-equiv="content-script-type" content="text/javascript"/> • If you don't the validator does not complain, but I don't see other ways to specify the language. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Javascript history • A programming language that was developed by Netscape for their browser" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-47.jpg" alt="Javascript history • A programming language that was developed by Netscape for their browser" /> Javascript history • A programming language that was developed by Netscape for their browser in 1995. • To counter, Mickeysoft developed Jscript. • It has been standardized by the European Computer Manufacturers Association as ECMA 262. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="principal features • It contains instructions for a user agent to execute. Javascript is" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-48.jpg" alt="principal features • It contains instructions for a user agent to execute. Javascript is" /> principal features • It contains instructions for a user agent to execute. Javascript is not run by the server. • It resembles Java, but not the same language. • It is an object-oriented language. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="object • In an object-oriented language, an object is the prime focus of attention." src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-49.jpg" alt="object • In an object-oriented language, an object is the prime focus of attention." /> object • In an object-oriented language, an object is the prime focus of attention. • An object has properties and methods. • Example from real life. Let a bus be an object. – “color” of the bus is a property – “move to next station” is a method </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="objects in javascript • Properties are accessed by object_name. property_name • Methods are accessed" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-50.jpg" alt="objects in javascript • Properties are accessed by object_name. property_name • Methods are accessed" /> objects in javascript • Properties are accessed by object_name. property_name • Methods are accessed by object_name. method_name() • where object_name is the name of an object, property_name is the name of a property and method_name() is the name of an object. Note the use of the dot and the parenthesis. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Example • Syntax rules – Comments are started with // and go to the" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-51.jpg" alt="Example • Syntax rules – Comments are started with // and go to the" /> Example • Syntax rules – Comments are started with // and go to the end of the line. – Instructions are terminated with semicolon • Example // create a new object called bus new bus = Object(); // paint it white --- set a property bus. color = ‘white’; // move to next stop --- apply a method bus. movetonextstop(); </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="event attributes • Event attributes can be given to elements (like any attribute, really)" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-52.jpg" alt="event attributes • Event attributes can be given to elements (like any attribute, really)" /> event attributes • Event attributes can be given to elements (like any attribute, really) • The name of the attributes gives a certain event that could happen to the element. • The value of the event attribute is the script to be executed when the event occurs on the element that has the event attribute. • Example <p onmouseover="stink">Cow shit is. . . </p> as the user moves the mouse over the paragraph, the browser fires up an imaginary script called stink that makes it start to stink. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="core event attributes I • "onclick" occurs when the pointing device button is clicked" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-53.jpg" alt="core event attributes I • "onclick" occurs when the pointing device button is clicked" /> core event attributes I • "onclick" occurs when the pointing device button is clicked over an element. • "ondblclick" occurs when the pointing device button is double clicked over an element. • "onmousedown" occurs when the pointing device button is pressed over an element. • "onmouseup" occurs when the pointing device button is released over an element. • "onmouseover" occurs when the pointing device is moved onto an element. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="core events attributes II • "onmousemove" occurs when the pointing device is moved while" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-54.jpg" alt="core events attributes II • "onmousemove" occurs when the pointing device is moved while" /> core events attributes II • "onmousemove" occurs when the pointing device is moved while it is over an element. • "onmouseout" occurs when the pointing device is moved away from an element. • "onkeypress" occurs when a key is pressed and released over an element. • "onkeydown" occurs when a key is pressed down over an element. • "onkeyup" occurs when a key is released over an element. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="special event attributes • "onfocus" occurs when an element receives focus either by the" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-55.jpg" alt="special event attributes • "onfocus" occurs when an element receives focus either by the" /> special event attributes • "onfocus" occurs when an element receives focus either by the pointing device or by tabbing navigation. This attribute may only be used with the <a> element, and some form elements that we have not covered. • "onblur" occurs when an element loses focus either by the pointing device or by tabbing navigation. It may be used with the same elements as onfocus. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="more special event attributes • "onsubmit" occurs when a form is submitted. It only" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-56.jpg" alt="more special event attributes • "onsubmit" occurs when a form is submitted. It only" /> more special event attributes • "onsubmit" occurs when a form is submitted. It only applies to the <form> element. • "onreset" occurs when a form is reset. It only applies to the <form> element. • some more are only used with other form elements. . . • Let us look at some examples </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="two stupid examples <html><head><title>javascript test

time


" src="https://present5.com/presentation/dfa8025e36b1a942e07f25c5c8e7333d/image-57.jpg" alt="two stupid examples javascript test

time


" /> two stupid examples javascript test

time


joke

Bush in the bush

bush in the bush

http • Stands for the hypertext transfer protocol. This is the most important application http • Stands for the hypertext transfer protocol. This is the most important application layer protocol on the Internet today, because it provides the foundation for the world wide web. • defined in Fielding, Roy T. , James Gettys, Jeffrey C. Mogul, Paul J. Leach, Tim Berners. Lee ``Hypertext Transfer Protocol -- HTTP/1. 1'' (1999), RFC 2616

history • 1990: version 0. 9 allows for transfer of raw data. • 1996: history • 1990: version 0. 9 allows for transfer of raw data. • 1996: rfc 1945 defines version 1. 0. by adding attribute: value headers. • 1999: rfc 2616 – adds support for • hierarchical proxies • caching, • virtual hosts and some • Support for persistent connections – is more stringent.

http resource identification • identification of resources is assumed through Uniform Resource Identifiers (URI). http resource identification • identification of resources is assumed through Uniform Resource Identifiers (URI). • As far as http is concerned, URIs are string. • http can use ``absolute'' and ``relative'' URIs. • A URL is a special case of a URI.

rfc about http An application-level protocol for distributed, collaborative, hypermedia information systems. … HTTP rfc about http An application-level protocol for distributed, collaborative, hypermedia information systems. … HTTP is also used as a generic protocol for communication between user agents and proxies/gateways to other Internet systems, including those supported by the SMTP, NNTP, FTP, Gopher, and WAIS protocols. In this way, HTTP allows basic hypermedia access to resources available from diverse applications.

http assumes transport • http assumes that there is a reliable way to transport http assumes transport • http assumes that there is a reliable way to transport data from one host on the Internet to another one. • All http requests and responses are separate TCP connections. The default is TCP port 80, but other ports can be used.

use of other standards • http shares the same registry as the MIME multimedia use of other standards • http shares the same registry as the MIME multimedia email extensions. It is based at the IANA, at http: //www. isi. edu/innotes/iana/ assignments/media-types • The default character set is ISO-8859 -1.

Absolute http URL • the absolute http URL is http: //host[: port][[abs_path][? query]] • Absolute http URL • the absolute http URL is http: //host[: port][[abs_path][? query]] • If abs_path is empty, it is /. • The scheme name "http" and the host name are caseinsensitive. • Characters other than those in the ``reserved'' and ``unsafe'' sets of RFC 2396 are equivalent to their ``%HEX HEX'' encoding. • optional components are in [ ]

http messages • There are two types of messages. – Requests are sent form http messages • There are two types of messages. – Requests are sent form the client to the server. – Responses are sent from the server to the client. • The generic format is the same as for email messages: – – start line message headers empty line body • Empty lines before the start line are ignored. • The request's start line is called the request-line. • The response start line is called the status-line.

overall operation server side • Server sends response, required items are – status line overall operation server side • Server sends response, required items are – status line – protocol version – success or error code • optional items are – server information – body

overall operation: client side Client sends request, required items are – method – request overall operation: client side Client sends request, required items are – method – request URI – protocol version • optional items are – request modifiers – client information • Let us now look at different methods

GET and HEAD method • The GET method means retrieve whatever information (in the GET and HEAD method • The GET method means retrieve whatever information (in the form of an entity) is identified by the Request-URI. If the Request-URI refers to a data-producing process, it is the produced data which shall be returned as the entity in the response and not the source text of the process. • The HEAD method is identical to GET except that the server MUST NOT return a message-body in the response.

Conditional & partial GET • The semantics of the GET method change to a Conditional & partial GET • The semantics of the GET method change to a ``conditional GET'' if the request message includes an – – – If-Modified-Since If-Unmodified-Since If-Match If-None-Match If-Range header • The semantics of the GET method change to a ``partial GET'' if the request message includes a Range header field. A partial GET requests that only part of the entity be transferred

The POST method • The POST method is used to request that the origin The POST method • The POST method is used to request that the origin server accept the entity enclosed in the request as a new subordinate of the resource identified by the Request-URI in the Request-Line. POST is designed to allow a uniform method to cover the following functions: – Annotation of existing resources; – Posting a message to a bulletin board, newsgroup, mailing list, or similar group of articles; – Providing a block of data, such as the result of submitting a form, to a data-handling process; – Extending a database through an append operation.

PUT and DELETE methods • The PUT method requests that the enclosed entity be PUT and DELETE methods • The PUT method requests that the enclosed entity be stored under the supplied Request-URI. If the Request-URI refers to an already existing resource, the enclosed entity should be considered as a modified version of the one residing on the origin server. • The DELETE method requests that the origin server delete the resource identified by the Request-URI.

The request headers • • • Accept: Accept-Charset: Accept-Encoding: Accept-Language: Authorization: Expect: From: Host: The request headers • • • Accept: Accept-Charset: Accept-Encoding: Accept-Language: Authorization: Expect: From: Host: If-Match: If-Modified-Since: If-None-Match: If-Range: If-Unmodified-Since: Max-Forwards: Proxy-Authorization: Range: Referer: TE: User-Agent:

The status line • The status line is a set of lines that are The status line • The status line is a set of lines that are of the form • HTTP-Version Status-Code Reason-Phrase • The status code is a 3 -digit number used by the computer. • The reason line is a friendly note for a human to read.

Status code classes • 1 Informational: Request received, continuing process • 2 Success: The Status code classes • 1 Informational: Request received, continuing process • 2 Success: The action was successfully received, understood, and accepted • 3 Redirection: Further action must be taken in order to complete the request • 4 Client Error: The request contains bad syntax or cannot be understood • 5 Server error: The request is valid but can not be executed by the server

Error codes • • • 100 101 200 201 202 203 204 205 206 Error codes • • • 100 101 200 201 202 203 204 205 206 Continue Switching Protocols OK Created Accepted Non-Authoritative Information No Content Reset Content Partial Content

Error codes II • • 300 301 302 303 304 305 307 Multiple Choices Error codes II • • 300 301 302 303 304 305 307 Multiple Choices Moved Permanently Found See Other Not Modified Use Proxy Temporary Redirect

Error codes III • • • 400 401 402 403 404 405 406 407 Error codes III • • • 400 401 402 403 404 405 406 407 408 Bad Request Unauthorized Payment Required Forbidden Not Found Method Not Allowed Not Acceptable Proxy Authentication Required Request Time-out

Error codes IV • • • 409 410 411 412 413 414 415 416 Error codes IV • • • 409 410 411 412 413 414 415 416 417 Conflict Gone Length Required Precondition Failed Request Entity Too Large Request-URI Too Large Unsupported Media Type Requested range not satisfiable Expectation failed

Error codes V • • • 500 501 502 503 504 505 Internal Server Error codes V • • • 500 501 502 503 504 505 Internal Server Error Not Implemented Bad Gateway Service Unavailable Gateway Time-out HTTP Version not supported

Response headers • • • Accept-Ranges: Age: Etag: Location: Proxy-Authenticate: Retry-After: Server: Vary: WWW-Authenticate: Response headers • • • Accept-Ranges: Age: Etag: Location: Proxy-Authenticate: Retry-After: Server: Vary: WWW-Authenticate:

Entity headers, common to response and request • • • Allow: Content-Encoding: Content-Language: Content-Length: Entity headers, common to response and request • • • Allow: Content-Encoding: Content-Language: Content-Length: Content-Location: Content-MD 5: Content-Range: Content-Type: Expires: Last-Modified

The body • The entity-body (if any) sent with an HTTP request or response The body • The entity-body (if any) sent with an HTTP request or response is in a format and encoding defined by the entity-header fields. • When an entity-body is included with a message, the data type of that body is determined via the header fields Content-Type and Content. Encoding

example status: redirect • If you use Apache, you can create a file. htaccess example status: redirect • If you use Apache, you can create a file. htaccess (note the dot!) with a line redirect 301 old_url new_url • old_url must be a relative path from the top of your site • new_url can be any URL, even outside your site • This works on wotan by virtue of configuration set for apache for your home directory. Examples – redirect 301 /~krichel http: //openlib. org/home/krichel – redirect 301 Cantcook. jpg http: //www. foodtv. com

Apache • Is a free, open-source web server that is produced by the Apache Apache • Is a free, open-source web server that is produced by the Apache Software Foundation, see http: //www. apache. org • It has over 50% of the market share. • It runs best on UN*X systems but can run an a Mickeysoft OS as well. • I will cover it here because it is freely available. • Wotan runs version 2.

Apache in debian • /etc/apache 2/apache. conf is set main configuration file. • /etc/init. Apache in debian • /etc/apache 2/apache. conf is set main configuration file. • /etc/init. d/apache 2 action, where action is one of – start – stop – restart is used to fire the daemon up or down. • The daemon runs user www-data

Virtual host • On a single installation of Apache several web servers can be Virtual host • On a single installation of Apache several web servers can be supported. • That means the server can behave in a different way according to how it is being addressed. • The easiest way to implement addressing a server in different was is through DNS host names.

Directives in apache. conf • This file contains directives that control the operation of Directives in apache. conf • This file contains directives that control the operation of the Apache server process as a whole (the 'global environment'). • Some of them are – the server root, where it finds its configuration – the time out for requests – which port to listen • another part of apache. conf has extensive settings to deal with content – different languages – different character sets – different MIME types

Modules • To extend Apache, modules have written. The modules are kept in a Modules • To extend Apache, modules have written. The modules are kept in a directory modules-available • Modules that are enabled are listed in the directory modules-enabled. • Looking at this gives you vital information about what the server can do.

Server directives • User – Gives the user name apache runs under • Group Server directives • User – Gives the user name apache runs under • Group – Gives the group name the server runs under • Server. Admin – Email of a human who runs the default server • Server. Name – The name of the default server • Document. Root – The top level directory of the default server

Directory options • • Many options for a directory can be set with <directory Directory options • • Many options for a directory can be set with instructions Name is the name of a directory. Instructions can be a whole lot of stuff

Directory instructions • Options sets global options for the directory, it can be – Directory instructions • Options sets global options for the directory, it can be – None – All – Or any of • • • Indexes (form directory indexes? ) Includes (all server side includes? ) Follow. Symlinks (allow to follow server-side includes) Exec. CGI (allow cgi-scripts? ) Multi. Views

Access control • Can be part of <directory> to set directory level access control Access control • Can be part of to set directory level access control • Example – Allow from friendly. com – Deny from evil. com • Sometimes you have to set the order, example – Order allow, deny

Authentication • This is used to enable password access. In that case the authentication Authentication • This is used to enable password access. In that case the authentication is handled by a file. htaccess in the directory. • The Allow. Override instruction is used to state what the user can do within the. htaccess file. Depending on its values, you can password protect a web site. • We will not discuss this further here.

Userdir • This sets the directory that is created by the user in her Userdir • This sets the directory that is created by the user in her home directory to be accessed by requests to ~user. • On wotan, we have • User. Dir public_html • That is the default, actually.

Set up permission for user home directories <Directory /home/*/public_html> Allow. Override File. Info Auth. Set up permission for user home directories Allow. Override File. Info Auth. Config Limit Options +Includes Options Multi. Views Indexes Sym. Links. If. Owner. Match Includes. No. Exec Order allow, deny Allow from all Order deny, allow Deny from all

Logs • The web server logs every transaction. • The are severeal types of Logs • The web server logs every transaction. • The are severeal types of logs that used to be kept separately, in early days. • 209. 73. 164. 50 - - [26/Jan/2003: 09: 19: 51 -0500] "GET /~ramon/videos/ntsc 175. html HTTP/1. 1" 206 808 • Additional information may be kept in the referer and user agent log. • The referer log may have some interesting information on who links to your pages.

Virtual hosts • Most apache directive can be wrapped in a <virtualhost> </virtualhost> grouping. Virtual hosts • Most apache directive can be wrapped in a grouping. • This implies that the only hold for the virtual host. Example, from wotan Server. Admin krichel@openlib. org Document. Root /home/connect/public_html Server. Name connections 2003. liu. edu Error. Log /var/log/apache/connections 2003 -error. log Custom. Log /var/log/apache/connectios 2003 -access. log common

http: //openlib. org/home/krichel Thank you for your attention! http: //openlib. org/home/krichel Thank you for your attention!