html5-img
1 / 46

COS 125

COS 125. DAY 6. Agenda. Questions from last Class?? Assignment #2 is posted Due Feb 6 Quiz #1 on Feb 3 (next class, Tuesday) 20 M/C, 4 Short essays, One extra Credit Chap 1-28 Capstone Projects Today’s Topic Finish on Using the World Wide Web. Capstone Projects.

Download Presentation

COS 125

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. COS 125 DAY 6

  2. Agenda • Questions from last Class?? • Assignment #2 is posted • Due Feb 6 • Quiz #1 on Feb 3 (next class, Tuesday) • 20 M/C, 4 Short essays, One extra Credit • Chap 1-28 • Capstone Projects • Today’s Topic • Finish on Using the World Wide Web

  3. Capstone Projects • Students choice of projects • Since this class is on Internet and Web Page Design, Project must be in this area • Student must go beyond the curriculum of the course • Student defined deliverables • Must have a in-class presentation of project using PowerPoint • Accepted proposal due by February 10 • Progress reports required • Guidelines

  4. Hypertext

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

  6. Short History of Hypertext From the book Multimedia and Hypertext: The Internet and Beyond • 1945 Vannevar Bush proposes Memex • 1965Ted 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 • 1975ZOG (now KMS): CMU • 1978Aspen 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 • 1985Symbolics Document Examiner, Janet Walker • 1985Intermedia, Brown University, Norman Meyrowitz • 1986 OWL introduces Guide, first widely available hypertext • 1987Apple introduces HyperCard, Bill Atkinson • 1987Hypertext'87 first major conference on hypertext • 1991World Wide Web at CERN becomes first global hypertext, Tim Berners-Lee • 1992New York Times Book Review cover story on hypertext fiction • 1993Mosaic anointed Internet killer app, National Center for Supercomputing Applications • 1993A Hard Day's Night becomes the first full-length feature film in hypermedia • 1993 Hypermedia encyclopedias sell more copies than print encyclopedias

  7. How URLs work • A URL is a unique identifier for a resource on the WWW • Like a address • Example • http://www.umfk.maine.edu/directory/bios/tgauvin.htm • Means go to the server www.umfk.maine.edu and get the hypertext file “tgauvin.htm” that is in the “directory/bios” directory using the protocol “http”

  8. 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”

  9. Creating an Image Map • First divide the image into regions • Circles • Center and radius • Rectangles • Top Left X and Y and Bottom right X and Y • Polygons • X and Y for each vertex of the Polygon

  10. Finding regions Link to www.bluesky.com Link to www.montana.com Link to www.harleydavidson.com

  11. 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!

  12. Form example http://perleybrook.umfk.maine.edu/samples/Black Jack.htm

  13. Form Example

  14. What is a form? • Two basic parts • Structure or shell • Fields • Labels • Buttons • Graphic User Interface components • Scripts to process information collected • CGI • JavaScript • ASP

  15. 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 • JavaScript interpreter

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

  17. Downloading a Complex Webpage with Two Graphics Files HTML Document Browser Webserver Application Client PC 2 Graphics Files Webserver Webpage Consists of Three Files Rendered as a Single Page On-Screen As Displayed

  18. Downloading a Complex Webpage with Two Graphics Files HTML Document HTML Document Browser Webserver Application Client PC 2 Graphics Files Webserver Download Requires 3 HTTP Request-Response Cycles; Downloads HTML Page First It has Tags to Identify Other Files As Displayed

  19. Downloading a Complex Webpage with Two Graphics Files Browser Webserver Application Client PC 2 Graphics Files Webserver Based on Tags in HTML Document, Browser Requests Downloads of Remaining Graphics or Other Files Browser Renders Combined Webpage on Screen As Displayed

  20. 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?

  21. How Web Servers Works • Web Servers may also run special program called CGI applications • CGI applications are often used to process data from forms

  22. How web servers work • In order to increase functionality most web servers also do the following • Provide a management interface to manage files, directories and virtual directories • Provide a security and authentication mechanism • Provide logging • Provide statistics

  23. How web servers work

  24. How Web sites work with databases • Most large web sites are actually database driven • my.yahoo.com • my.msn.com • Used for • Gathering information from users • Displaying information to users • Personalization of web pages

  25. CGI and Databases

  26. 3-Tier Architecture Client PC with Browser Web- server Application Server 2. Data 1. Form Mainframe Server of External Company Database Server

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

  28. 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 2. Web Service Interaction Server with Web Service 1. UDDI Request for Information, Response Interaction Between UDDI Servers to Fulfill a Request UDDI Server UDDI Server

  29. Web Service Description Language (WSDL) • Protocol for asking a corporate webserver about the company’s SOAP-compliant services WSDL Request-Response Cycle Client PC Corporate Webserver

  30. How Web Services Work • Now that you have forund the service and figured out how t use it • Send 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

  31. Web Service Web Service HTTP Request SOAP- Capable Browser HTTP Response Web Service -- Interface Properties Methods Webserver Client PC SOAP Message Using XML Syntax

  32. 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 SOAP Body

  33. 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 Request (PartNum, Quantity, ShippingType) Sending Object Pricing Object Response (Price)

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

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

  36. Microsoft .NET • http://www.microsoft.com/net/basics/whatis.asp

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

  38. 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 • Examples • Seti@home • Beowulf • Factoring large numbers

  39. Seti@home

  40. Largest number ever factored

  41. 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 calls to place web page assignments on the web server • Common practice

  42. Ftp using IE 5 • In address bar • ftp://perleybrook.umfk.maine.edu • Login with the same info as you login in to these computers • Select the folder with your first initial last name • Moving files • Drag and drop files • Use menu edit copy/paste • Click on file and right mouse for context menu

  43. Assignment #2 • A first web page • Using Microsoft Word • Assignment 2

  44. Microsoft Word • Can automatically create web pages • Problems • “bloat” code • Proprietary code • Good for quick jobs • Bad for anything that has to be maintained over time

  45. Microsoft Word as a Web Page Design Tool • Select “new” from file menu • Select “blank web page” • Type out web page • Add graphics • Save • If you use graphics, Word will create a folder • http://www.pickens.k12.sc.us/Pickens.ms/word_course.htm

  46. COS 125 Web Site • http://perleybrook.umfk.maine.edu/classes/cos125/

More Related