1. Structured Documents Week 3 LBSC 690 Information Technology

2. Outline Questions Finishing networks Building the Web Building a better Web

3. TCP/IP layer architecture Link Network Transport Application Virtual link for packets Virtual link for end to end packets Virtual network service Link for bits

4. The TCP/IP “Protocol Stack” Link layer moves bits –Ethernet, cable modem, DSL Network layer moves packets –IP Transport layer provides services to applications –UDP, TCP Application layer uses those services –DNS, SFTP, SSH, …

5. User Datagram Protocol (UDP) The Internet’s basic transport service –Sends every packet immediately –Passes received packets to the application No delivery guarantee –Collisions can result in packet loss Example: sending clicks on web browser

6. Transmission Control Protocol (TCP) Built on the network-layer version of UDP Guarantees delivery all data –Retransmits missing data Guarantees data will be delivered in order –“Buffers” subsequent packets if necessary No guarantee of delivery time –Long delays may occur without warning

7. File Transfer Program (FTP) Used to move files between machines –Upload (put) moves from client to server –Download (get) moves files from server to client Available using command line and GUI interfaces Normally requires an account on the server –Userid “anonymous” provides public access –Web browsers incorporate anonymous FTP Automatically converts end-of-line conventions –Unless you select “binary”

8. Hands On: FTP Start a cmd window Type “ftp ftp.umiacs.umd.edu” Login in anonymously with –User: anonymous –Password: your email address Go download a file –Type “cd pub/gina/lbsc690/” –Type “binary” –Type “get hwOne.ppt” Exit –Type “quit” Try it again with a graphical FTP program –WS_FTP, for example

9. Encryption Secret-key systems (e.g., DES) –Use the same key to encrypt and decrypt Public-key systems (e.g., PGP) –Public key: open, for encryption –Private key: secret, for decryption Digital signatures –Encrypt with private key, decrypt with public key

10. Encrypted Standards Secure Shell (SSH) –Replaces Telnet Secure FTP (SFTP)/Secure Copy (SCP) –Replaces FTP Secure HTTP (HTTPS) –Used for financial and other private data Wired Equivalent Protocol (WEP) –Used on wireless networks

11. Network Abuse Flooding –Excessive activity, intended to prevent valid activity Worms –Like a virus, but self-propagating Sniffing –Monitoring network traffic (e.g., for passwords)

12. Encryption Issues Key length –128 bits balances speed and protection today Trust infrastructure –How do you prevent “bait and switch”? –Who certifies a digital signature is valid?

13. The World-Wide Web Send Request Page Requested Fetch Page Proxy Server Local copy of Page requested Remote Sever My Browser Internet

14. Web Standards HTML –How to write and interpret the information URL –Where to find it HTTP –How to get it

15. HyperText Transfer Protocol (HTTP) Send request GET /path/file.html HTTP/1.0 From: someuser@jmarshall.com User-Agent: HTTPTool/1.0 Server response HTTP/1.0 200 OK Date: Fri, 31 Dec 1999 23:59:59 GMT Content-Type: text/html Content-Length: 1354 Happy New Millennium! …

16. Uniform Resource Locator (URL) Uniquely identify web pages on the WWW –Domain name –Directory path –File name URL: http://www.clis.umd.edu/courses/schedules/fall2003.html Domain name Directory path File name

17. HyperText Markup Language (HTML) Simple document structure language for Web Advantages –Adapts easily to different display capabilities –Widely available display software (browsers) Disadvantages –Does not directly control layout

18. Hands On: Learning HTML From Examples Use Internet Explorer to find a page you like –http://www.glue.umd.edu/~oard On the “View” menu select “Source” –Opens a notepad window with the source Compare HTML source with the Web page – Observe how each effect is achieved

19. Hands On: “Adopt” a Web Page Modify the HTML source using notepad –For example, change the page to yours Save the HTML source on your “M:” drive –In the “File” menu, select “Save As” –Select “All Files” and name it “test.html” FTP it to your ~/pub directory on WAM –sftp wam.umd.edu –cd../pub/ –put test.html View it –http://www.wam.umd.edu/~(yourlogin)/test.html

20. HTML Document Structure “Tags” mark structure – a document – an ordered list – something in italics Tag name in angle brackets <> –Not case sensitive Open/Close pairs –Close tag may be optional (if unambiguous)

21. Logical Structure Tags Head –Title Body –Headers: –Lists:, (can be nested) –Paragraphs: –Definitions: –Tables: –Role:,,, …

22. Rendering Different devices have different capabilities –Desktop –PDA Rendering maps logical tags to physical layout –Controls line wrap, size, font… Place the title in the page border Render as 24pt Times Render as bold Somewhat browser-dependent –Internet Explorer and Netscape make different choices

23. Physical Structure Tags Font –Typeface: –Size: –Color: http://webmonkey.wired.com/webmonkey/reference /color_codes/Emphasis –Bold: –Italics:

24. Hypertext “Anchors” Links make the Web a web! Internal anchors: somewhere on the same page – Students Links to: Student Information External anchors: to another page – CLIS – CLIS students

25. Images or – –SRC: can be url or path/file –ALT: a text string –ALIGN: position of the image –WIDTH and HEIGHT: size of the image Can use as anchor: – Example: –http://www.umiacs.umd.edu/~daqingd/Image-Alignment.htmlhttp://www.umiacs.umd.edu/~daqingd/Image-Alignment.html

26. Tables The caption Header1 Header2 first row, first item first row, second item second row, first item second row, second item Example: http://www.umiacs.umd.edu/~daqingd/Simple-Table.htmlhttp://www.umiacs.umd.edu/~daqingd/Simple-Table.html

27. Frames Divide browser pages into separate sections –Useful when you want to scroll separately Each section can display an HTML page Example 1: menu frame on the left side of a page Example 2: –http://www.hq.nasa.gov/alsj/frame.html

28. Designing Web Pages Key design issues: –Content: What do you want to publish? –Style: How do you want to present it? –Syntax: How can you achieve that presentation? Sources of information –Online tutorials (Yahoo points to lots of these) –Technical materials (e.g., the HTML 4.0 spec)

29. Some Style Guidelines Design for generic browsers –And test on every version you wish to support Provide appropriate “access points” –User needs and navigation strategies differ Design useful navigational aids –A Web search may lead to the middle of a site Include some indication of currency –Date of last update, “new” icons, etc. Indicate who is responsible for the content –Helps readers assess authority

30. Accessibility Guidelines Design for device independence Maintain backward compatibility –Provide alternative pages if necessary Provide alternatives for aural and visual content –Alt tags for images, transcripts for audio Make is easy for assistive devices to work –Combine structural markup and style sheets –Give a title to each frame –Use HTML tables only for tabular data –Use markup to indicate language switching

31. HTML Editors Goal is to create Web pages, not learn HTML! Several are available –Macromedia Dreamweaver available commercially –In Netscape, “File” – “Edit Page” for Composer Tend to use physical layout tags extensively –Detailed control can make hand-editing difficult You may still need to edit the HTML file –Some editors use browser-specific features –Some HTML features may be missing entirely –File names may be butchered by FTP

32. HTML Validators Syntax checking: cross-browser compatibility –http://validator.w3.org Style checking: improved accessibility –http://bobby.watchfire.com

33. What’s Wrong with the Web? HTML –Confounds structure and appearance (XML) HTTP –Can’t recognize related transactions (Cookies) URL –Links breaks when you move a file (PURL)

34. What’s a Document? Content Structure Appearance Behavior

35. History of Structured Documents Early standards were “typesetting languages” –NROFF, TeX, LaTeX, SGML HTML was developed for the Web –Too specialized for other uses Specialized standards met other needs –Change tracking in Word, annotating manuscripts, … XML seeks to unify these threads –One standard format for printing, viewing, processing

36. Goals of XML Metalanguage –A toolkit for design markup languages Unambiguous markup –Clear span of tags Separate markup from presentation –Style info => stylesheet, so easy to change Be simple

37. A Family of Standards Definition: DTD –Names known types of entities with “labels” –Defines part-whole and is-a relationships Markup: XML –“Tags” regions of text with labels Markup: XLink –Defines “hypertext” (and other) link relationships Presentation: XSL –Specifies how each type of entity should be “rendered”

38. XML Example View “The Song of the Wandering Aengus” –http://www.umiacs.umd.edu/~oard/teaching/690/fall05/notes/3/xml.htm Built from three files –yeats01.xml –poem01.dtd –poem01.xsl

39. An XML Example The Song of Wandering Aengus W.B. Yeats I went on to the hazel wood, Because a fire was in my head, And cut and peeled a hazel wand,

40. Document Type Definition (DTD) #PCDATA span of text a,ba followed by b a|beither a or b a*0 or more a’s a+1 or more a’s

41. Specifying Appearance: XSL

42. An XLink Example …… <author xlink:href="yeatsRDFS3.xml“ xlink:type="simple">W. B. Yeats The Rose The Tower ……….

43. Some XML Applications Text Encoding Initiative –For adding annotation to historical manuscripts –http://www.tei-c.org/http://www.tei-c.org/ Encoded Archival Description –To enhance automated processing of finding aids –http://www.loc.gov/ead/http://www.loc.gov/ead/ Metadata Encoding and Transmission Standard –Bundles descriptive and administrative metadata –http://www.loc.gov/standards/mets/

44. What’s Wrong with the Web? HTML –Confounds structure and appearance (XML) HTTP –Can’t recognize related transactions (Cookies) URL –Links breaks when you move a file (PURL)

45. Cookies Servers know users by IP address and port –Because that’s where they send the Web pages Cookies preserve “state” –Server sends data to the browser –Browser later responds with the same data A unique code (server-side state) Information about the user (client-side state)

46. Persistent URLs www.purl.org PURL Sever My Browser PURL URL Resource Sever URL Page

47. Summary Learning to build simple Web pages is easy –Which is good news for the homework! All documents are structured documents XML is a flexible markup language toolkits The key is to understand its capabilities –XML editors can hide much of the complexity

48. Before You Go! On a sheet of paper (no names), answer the following question: What was the muddiest point in today’s class?