Networking and the Internet (3)

Networking and the Internet (3) • Last Week: • Computer Architecture • Operating System concepts and examples • Week 3 Focus • Views of a network (Coope, chapters 12 & 14) • Electrical; transmission management; addressing; contents • Data formats (the codes that flow) (Coope, chapter 2) • More on systems for Online Computing • e-commerce issues – what do we need for B2C? • Introduction to Writing HTML

Revision of Task Dispatching Remember that every action involves an interrupt that returns control to the Operating System The queues are OS control blocks

Dispatching Tasks • Let’s assume a Ready Queue of tasks waiting to run • Add tasks to queue according to a priority pattern (cheapest is FIFO, but we may want to improve on that) • Dispatch the task at the head of the queue • When it gives up control, dispatch new head of queue • May want to maintain queue of blocked tasks too • What if task doesn’t give up control? • Need to interrupt it at end of time slice to let others run(Windows 3.x didn’t do this except for DOS tasks) • Can return it directly to Ready Queue (with risk that it’ll consume too much CPU time) • Maybe we should favour short interactions over long

User hits ENTER Task Created Executable Task Dispatched Running Finishes On Ready Queue Terminated Time expires Enters WAIT Requeued on Event Blocked Life Cycle of an Interaction But how do we know when it’s finished?

Working On-line • On a PC, you start a program • Feed it with data e.g. edit your document • Produce some results saved or printed document • Quit the program • While you’re editing, you expect the computer.. • To keep the program running, even if you walk away • and Maintain all the information you’ve entered • This involves keeping program and data in memory • Very hard for an Internet Server to match this • How long should it hold stuff in memory for you? • What if there are 5,000 users like you? • Chosen solution is to treat interactions as “atomic”

Keeping the Process Alive User hits ENTER Maintain page tables to access process’s memory, though it’ll get paged out On idle queue Task Created User hits ENTER Nothing to do Executable Task Dispatched Running Finishes On Ready Queue Terminated Time expires Can free process’s memory Enters WAIT Requeued on Event Blocked

Transactional & Interactive Computing • Lynn Brooks (IBM Poughkeepsie) recognized and described two distinct kinds of on-line computing: • Transactional • Composed of separate, “atomic” actions • Take an order, handle a billing query • Very little “state” to carry between transactions • Each transaction may use a different program • Interactive • Usually lots of interactions with a single program, as in editing a document • Copious state information – process’s whole memory • Typically heavy on memory, light on processing

The Internet is Transactional • In general: • Every time you interact, browser sends message to server • Server responds by sending you something • Then it forgets you • Presents a problem if you want a “session” • For example, you sign on to authenticate yourself • Server then treats you as a privileged user,for a whole series of interactions • Server usually maintains minimum status information • Table of who’s signed on, with IP address and privilege • On each request, you send a “token” for server to look up • How long must it keep your entry in the table?

Impact on B2C e-commerce • Successful Business to Consumer e-commerce needs friendly service to the end-user • Server should “recognize” the user • Authenticate when needed, but do it only once per session • Not grind to a halt because server’s run out of memory • Example: amazon.co.uk • Stores “cookie” on your disk when you sign up • Retrieves it each time you connect in future • Asks you to confirm that it’s really you • Requires user name and password for secure area (anything to do with account status or payment) • Times out if you don’t sign out of the secure area

Other e-commerce Considerations • Server performance • Users need to be able to rely on availability • With adequate response time • Not usually a problem for delivering HTML pages • “http daemons” in server are tuned to be efficient • Much more serious for transactional work • Server may have to start a new process for each message • Heavy-duty activity involving address-space creationunless it can exploit a pool of processes • Database activity may involve multiple accesses • User may interact multiple times per business activity • Unless we can send a Java applet for the user to run

Networking and Communications Resolving confusion with concept of “layers”

Networking and Communications • An area made confusing by range of different activities that fit under this heading: • Electrical (or equivalent) signals actually transmitted(down twisted-pair, coaxial cable, or by radio) • How the transmission medium is managed(modem, network card, hub) • How we address data to make sure it gets to destination • How we code the information so receiver understands it • How we package information to send it to other application(email, screen-shots, file transfer…) • Can resolve confusion by the concept of “layers” • Convention is to show electrical signals at bottom

Communication Layers • Seven layer model of SNA and OSI aims to let us think about one element of the network at a time: • Application layer Services for applications • Presentation layer Maps data to what is displayed • Session layer Ties multiple flows into logical “call” • Transport layer Hides network details from above • Network layer Routing and sequencing of packets • Data Link layer Flow control and error handling • Physical layer Point-to-point flows of bits • Interfaces between layers are well-defined protocols

Application Presentation Session Transport Network Data Link Physical Application Transport (TCP) Internet (IP) NetworkInterface Seven Layer Model • Simplify programming by encapsulating lower levels Purpose/Examples File transfer show screen image manage sign-on manage connections route over several links V.34 , HDLC LAN, digital-, analogue-circuit Application Presentation Session Transport Network Data Link Physical OSI terms Internet terms

Data Formats • Computers work on numbers, but human communications involve more than numbers: • Need letters, signals, pictures, sounds • Computer must be able to handle these formats • Popular character format is ASCII • 7-bit code representing characters (now 8-bit) • Each letter or number or punctuation mark is coded • to represent a character, need to know the right code • Network needs to perform “conversational” actions • Acknowledgement, slow down, “what was that?” • Extra ASCII codes were added to handle these • Also needs to check integrity of data

ASCII (examples) 32 <space> 48 0 64 @ 33 ! 49 1 65 A 34 “ 50 2 66 B 35 # 51 3 67 C 36 $ 52 4 68 D 37 % 53 5 69 E 38 & 54 6 70 F

Other forms of coding • Can store integers in two or four bytes • 2 (half-word) can go from -215 to +215-1 (-32,768 to 32,767) • Full-word from -2,147,483,648 to 2,147,483,647 • How about floating point? • Can also code pure numeric decimal data with half a byte per decimal digit • Main implementation is “Packed decimal,” for example:+597 would pack as ‘59 7C’X; -12345 as ‘12 34 5D’X • zSeries (System/390) still uses EBCDIC for characters • Conversion overhead on Mainframe/PC transmissions • Different collating sequences can cause problems • Double-byte character sets such as Unicode

Double-byte character sets • Some orthographies use more than 256 characters, usually ideograms • Examples: Japanese Kanji, Korean Hangul, Chinese • May also need room for syllabic characters (e.g. Kana) • and for a range of alphabets • Problem solved by coding each character in 2-bytes • 64K values are enough • Fortunately, you need fewer characters per message • DBCS can be pure or “SISO” • Pure DBCS uses two bytes even for Latin letters • An example is Unicode • Alternatively you could Switch In and Switch Out of DBCS

Other SBCS Encodings • Even Single-byte coding isn’t trivial • Currency symbols • Latin alphabet extensions • National characters (æ ð þ ø …) • diacritical marks (Turkish beats even Czech) • Greek • Cyrillic • Thai • Some run Right to Left (with L->R insertions!) • Hebrew • Arabic

Non-conforming Data • What if the data we’re sending isn’t just characters? • Pictures and sounds are a stream of bytes that can be close to a random selection of binary values • Binary data might well contain bytes that match the ASCII code to terminate the transmission • One way is to take seven bytes in and write eight out • That way you can avoid the values that give trouble • done in MIME encoding, and in 3270 emulator downloads • This is why e-mail attachments are sometimes gibberish • We may also be sending data coded in a different way • Such as EBCDIC, used on mainframes

World Wide Web Publishing How to write HTML (see references for more detail)

Publishing to a Diverse Audience • Some users have 14” VGA screens • Others have 21” high-resolution displays • Users run many different browsers • Multiple versions of Internet Explorer, Firefox, Chrome, Safari • or something you’ve never heard of! • Some users have character-based terminals, or don’t have bandwidth to spare for graphics • Others have high bandwidth via LAN to server • How can we make content attractive and yet still comprehensible to all these users? The trick is to describe the content, not the intended layout

Resources on the Internet • Internet is a network of networks, sharing a common 4-byte addressing scheme (e.g. 194.66.202.100) • Computer resources are collected into Domains, which are usually named, e.g. www.winchester.ac.uk • Domain Name Servers map domain to 4-byte address • Uniform Resource locator (URL) made up of three parts: • Service ID (such as http, ftp, mailto, gopher) terminated with : • Domain name[:port], terminated with / • Resource within domain • Most URLs written service://domain/resource(mailto: does not need the //)

The http Service • HyperText Transfer Protocol is the keystone of the World Wide Web • Browser transmits request to target domain, where http daemon – the server – responds by sending back the requested resource (usually a file) • Browser then reads file and formats it for display • While doing so, browser will find mark-up requesting other resources, and forward them to the appropriate server – usual example is for embedded graphics • If browser can’t handle the resource alone, it can: • Use a “helper application” such as Excel or media player • Offer to save the file to disk for future use

Overall Document Structure <HTML> <HEAD> <TITLE>Simple HTML document</TITLE> </HEAD> <BODY text="#000060"> (here’s hexadecimal again) <H1>Chapter 1</H1> <P>There isn’t much in this document. This sentence will flow after the previous one. <P>But this will be a new paragraph. </BODY> </HTML>

Other Common Tags <HR /> Produces a horizontal rule on the column <BR /> “Break” – a empty text element that is at the start of a line (you can misuse it to be like a paragraph, but more compact ) <UL> Starts an unordered list (with bullets) <OL> Starts an ordered list (usually numbered) <LI> List item in either sort of list (Lists can be nested, so it’s important to close them in reverse sequence) <EM> Emphasised text (usually italic) <STRONG> Strong text (usually bold)

Advanced Text-descriptor Tags • <DIR> Starts a Directory list (multi-column) • <MENU> Starts an unordered list without bullets • <DL> Starts a Definition (or Glossary) List This contains two kinds of list item: • <DT> The Term being defined • <DD> The Description defining that term • <PRE> Pre-formatted text (as in an example) • <TABLE> We’ll build tables later Exercise: Experiment with the various list types. Try nesting them.

Creating Hyperlinks • Any hyperlink reference needs to say what it is linking to • In HTML, we use an Anchor tag with the HREF attribute • <A href="http://www.pdq.edu/freds.htm">Quick Univ</A> • <A href=“./freds.htm">Local reference</A> • You can reference any resource on the Internet – Just give its URL • Any lack of specificity means “look locally,” so missing out the domain means it is in the local file system • Always leave out as much as you can • Makes it much easier to move the site • Can also use relative references, e.g. to a sub-folder <A href=“./subdir/fred2.htm">relative reference</A>

Internal Bookmarks • You can also name a target inside a resource • Like a bookmark in Word • Also coded on Anchor tag, this time as NAME attribute • <A name="phred">target of the link</A> • <A href="#phred">Click here to get to target</A> • or if the link may be from a different document...<A href="http://www.pdq.edu/freds.htm#phred">Click</A> • So the full form of the HREF attribute is a URL followed by # and a named anchor inside the URL • Missing out the resource means it’s in this document • If the name is omitted, it refers to the top of a resource

Graphical Images • Easy to imbed with the IMG tag • Need to define the source of the image • Example<img src="fred.jpeg" alt="[fred]“/> • Text of “alt” attribute appears on non-graphical displays You can also use attributes to modify the image • <img src="/mh.jpg" width="80" alt="Picture of Mike"> • Image will be 80 dots wide, in original aspect ratio(don’t set width and height, it can distort the image) • Use align attribute to place it right left or center(HTML uses US spelling – even though it was originally written by an Englishman working in Switzerland!) • Use images in JPEG or GIF format (never BMP!) • GIF better for line drawings, JPEG better for pictures

Stick to Relative Addressing • At some point, we’ll want to move pages and images on to a real Web Server • Can test most* things on local disks, providing we address directories relative to the current page, for example: • <a href="next.html”>forward to next page</a> • meaning switch to next.html in the current directory • <img src="../graphics/freddo.jpeg" alt="[fred]"> • meaning go to next directory up, then look in its graphics subdirectory • CGI scripts and old-style Image maps do require a server, so can’t usually be tested purely from disk

HTML Covered So Far • Overall Document Structure • <HTML>, <HEAD>, <BODY> tags • Headings and other text tags • <H1>, <H2>..<H6> tags; <P>, <BR>, <EM>, <STRONG> • Lists and the items within them • <OL>, <UL> with <LI> • <DL> with <DT> and <DD> • Anchors and Hyperlinks • <A name="target"> Text labelled (if any)</A> • <A href="where_to_link_to"> Explanatory text</A> • In-line graphics • <IMG src="path to image" alt="don’t forget non-graphic user">

HTML Reference Materials • Library has some O’Reilly pocket reference books about HTML and the Web (see module handbook for references) • Or you can use one of the primers on the WWW… • Tom Drewry’s Guide to HTML tags at http://www.cems.uwe.ac.uk/~tdrewry/html/index.htm • Marc Andreessen’s athttp://www.web-nation.com/lessons/html-pri.htm • http://www.mcli.dist.maricopa.edu/tut/index.html • http://www.telacommunications.com/nutshell/primer.htm • Web design guidance http://www.winchester.ac.uk/designproject/ • http://www2.winchester.ac.uk/bm/courses/bs2911/htmlcard.html local copy (archive of NCSA primer)

Writing your own HTML • See separate document for simple exercises (Week 3 on the Learning Network) • Exercise 1 gets you in there looking at the HTML source • Pretty easy to do, providing you think about what each element of the document is, rather than what it should look like on the screen • Normal process is to have a Notepad window for sourceand a browser window to view the results • Update source in Notepad and Save • Flip to browser and Reload to see the effect • Exercise 2 has you writing your own HTML • You can re-use stuff from the other files if you wish

Networking and the Internet (3)