1 / 73

Internet / Intranet CIS-536

Internet / Intranet CIS-536. Class 2 More Internet Technology Client-Side Web Technology. Class 2 Agenda. Internet Technology - Continued Connectivity Mail: SMTP / POP FTP HTML. 2. Web Hierarchy. TECHNOLOGY. Key Components. Web Applications . Scripting, Applets. Web Forms. CGI .

vladimir-compton
Download Presentation

Internet / Intranet CIS-536

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. Internet / IntranetCIS-536 Class 2 More Internet Technology Client-Side Web Technology

  2. Class 2 Agenda • Internet Technology - Continued • Connectivity • Mail: SMTP / POP • FTP • HTML 2

  3. Web Hierarchy TECHNOLOGY Key Components Web Applications Scripting, Applets Web Forms CGI World Wide Web HTML, Browsers, Web Servers Core Internet Protocols SMTP (Mail), FTP, Telnet The Internet TCP/IP, DNS, Backbone Networking OSI Model, Ethernet, LANs Operating Systems UNIX, Windows, Other O/S Computers Mainframes, Minis, PC’s 3

  4. Connectivity • Connectivity Requires: • Hardware Interface Device • Transmission Protocol • TCP/IP Emulation • A Connection Point Already Linked to the Internet • ISP – Internet Services Provider • Connection Speed • Measured in Bits Per Second (bps) • Examples Show Speed to transfer a 1 Megabyte File • Actual Performance Depends on: • Protocol Overhead • Quality of Connection (Noise) • Error Detection and Recovery • Physical Limitations of Connected Computers 4

  5. Connectivity Options • Standard Analog Telephone Line • Hayes Compatible Asynchronous Modem • V.32 : 2400 – 9600 bps : 15 - 55 minutes • V32.bis : 7200bps - 14.4 kbps : 9 – 18 minutes • V34 : 14.4 – 28.8 kbps : 4 – 9 minutes • 56 kbps Modems : 2 – 4 minutes • Assume That ISP -> Telco Connection is Digital • Asymmetric: 56kbps max in one direction: 28bps in the other • K56Flex – (Rockwell Semiconductor) • X2 – (U.S. Robotics / 3Com) • V.90 – Unifies K56Flex / X2 • Performance Varies Significantly 5

  6. Connectivity Options (2) • ISDN • “Digital” Dial-Up • 3 Channels: 16 kbps, 64 kbps, 64 kbps • In Practice: 56-64 kbps (2 minutes) • Dedicated Analog Telephone Line(s) • Typically Used to Connect Networks (Shared Bandwidth) • T1 : 1.5 mbps : (5 seconds) • T3 : 44.7 mbps : ( < 1 second) • xDSL • Digital Transmission Using Standard Copper Telephone Cable • ADSL – Asymmetric • 1.5 – 9 mbps from ISP to Consumer • 16-640 kbps from Consumer to ISP 6

  7. Connectivity Options (3) • LAN – Local Area Network • Shared Bandwidth • Theoretical Max: 1MB file in Less than 1 Second • Ethernet : 10 mbps • CSMA/CD Algorithm • Only Get Access to Line If Its Not Busy • Coax (RG58) or Unshielded Twisted Pair (UTP) • 100 – 500 Meter Length of Cable Limitation • Fast Ethernet: 100 Megabits Per Second • Token Ring • “Equal Access” to The Line • 4 – 16 mbps 7

  8. Connectivity Options (4) • Cable Modems • Use Existing Cable Wiring • Implementations Vary Widely • Require Using Cable Provider as ISP • Shared Bandwidth • 30 mbps Theoretical Max : 1.5 mbps Actual • WAN – Wide Area Network • FDDI – Fiber Distributed Data Interface • 100 mbps • Can Cover Long Distances • Backbone – High Speed Connection Between Large Computers • Other Options: Satellite, ATM, Wireless etc. 8

  9. IP Over Dial-Up Lines • ISP Acts a Communications Hub • Has a “Fixed” Set of IP Addresses • Dynamically Assigns Them To Users • Dial-Up Protocols • SLIP – Serial Line Interface Protocol • IP Packets Over Point-to-Point Lines • PPP – Point-to-Point Protocol • Can Handle Other Protocols Beyond IP • Dynamic Configuration Capabilities • Error Detection • Can Dynamically Assign an IP Address 9

  10. Importance of Routers • Routers Manage the Flow In a Network • Serve as “Distribution Centers” • Additional Protocols Allow Routers to Communicate With Each Other • Smart Routers Can Handle Multiple Protocols • Some Modems are Also Routers 10

  11. Sockets • The API To the TCP/IP Protocol • Often called TCP/IP Protocol “Stack” • Windows Sockets - “Winsock” • Not part of Windows 3.1 • Mutiple Third-Party Implementation • Implementations Differ • Version 1.1 – TCP/IP Only • Version 2.0 – Other Protocols Also • e.g. SPX/IPX – Used in Novell Networks • WinInet – Win 32 Internet API • A Microsoft Attempt to Make it Easier to Program Winsock 11

  12. FTP : File Transfer Protocol User Interface FTP Commands Server Protocol Interpreter User Protocol Interpreter FTP Replies File System Server Data Transfer Module User Data Transfer Module File System Data Client Server 12

  13. FTP: Details • Session Based • Data Converted to Neutral Data Format For Transmisssion • Client/Server Convert it to Native Data Formats • Port 21 • Transmission Modes • Stream Mode • Block Mode • Compressed Mode • Login: Name/ Password • Anonymous FTP • Login: Anonymous • Allows Access to a Particular Directory Structure Only • All Anonymous Users Access Same Directory 13

  14. FTP: Commands • Get – Retrieve a File From Remote System • Put – Send a File to the Remote System • Multiple File Transfer – mput, mget • List Files in Directory – dir, ls • Change Directories • Local System (lcd) • Remote System (cd) • Transmission Mode • Binary – No Conversion • Ascii – Format Conversion • UNIX and Windows Text File Formats are Different 14

  15. FTP In Practice • FTP is Still Used to Move Files Between Machines on the Internet • Used Extensively For Publishing Web Pages • GUI Versions of FTP For Windows are Common • Hide Internal Details From User • WS_FTP • Shareware: Free For Student Use • http://www.csra.net/junodj/ws_ftp32.htm • Cute FTP • 30-day Evaluation • http://www.cuteftp.com/download/index.html 15

  16. Electronic Mail • Mail Options • Proprietary email Systems • IBM – PROFS • Microsoft – MS-Mail • cc:Mail (Lotus) • Most Based on LAN File Server Model • Sender Writes a File to Recipient’s Directory • Gets Difficult When There are Multiple Mail Servers • Servers Must Route Messages to Other Servers • SMTP – Simple Mail Transfer Protocol • TCP/IP Methodology For Sending Mail Messages • Uses Port 25 • Routers Forward Messages To Appropriate Server 16

  17. SMTP Session • SMTP Protocol is Session Based • Sending Router/Server Establishes a Connection With Target Router/Server • Waits Until Target is Ready to Receive Mail • Asks Target if It Will Accept Mail For Recipient Possible Responses: Yes Yes: Forwarding Address (Target Will Follow-Up) No: Forwarding Address (Sender Must Follow-Up) No 4. Send Data 5. Repeat Step 3,4 For Each Recipient 6. End Session 17

  18. SMTP Mail Message Format • Messages are a Human Readable Text File • Two Parts: Envelope and Contents • Envelope: • Keyword/Value Pairs • One Per Line • Common Keywords • Subject: • Date: • From: • Reply-To: • Common Mailer Generated Keywords: • Received: • Message-Id: • Message Contents • Separated From Envelope By a Blank Line 18

  19. Mail Limitations • Many Mail Implementations Impose Limits: • Maximum Line Length: 1000 bytes • Maximum Message Size: 64 KB • ASCII Only • ASCII Only Uses 7 Bits of the 8-bit Byte • NOTE: Intermediate Nodes May Have This Limitation Even If Sender, Recipient Do Not • Problem: How to Send Binary Files? • No Concept of Lines • May Be Over 64 KB • Solution: Encoding • “Translate” Binary File Into a Text Based Format • Split Long Messages Into Multiple Mail Messages 19

  20. Encoding: Header Information • MIME – Multipurpose Internet Mail Extensions • Mime Format in Mail Header Identifies the Contents • MIME Body Types • Text • Plain – No Encoding Needed • RTF – Allows Some Formatting • Image • Audio • Application • A Specific Application Format (e.g. Microsoft Word) • Structured • Allows Multiple Types in One Document • Message • Used To Identify Partial Messages 20

  21. Encoding Techniques • Portable Formats • Seven-Bit • All ASCII Characters – No Encoding • Quoted-Printable • Most of the Characters are 7-Bit ASCII • Others are Encoded • Most of Message is Human Readable • Base64 • Groups of 3 Bytes Written as 4 Six-Bit ASCII Characters • The Result Is Not Human Readable • 33% Increase In File Size • X-Token • Format is Privately Negotiated Between the SMTP Servers 21

  22. Encoding Techniques (2) • Non-Portable Formats • Will Cause Corruption if an Intermediate Server Has Limitations • Eight-Bit • No Encoding • No Line Exceeds 1000 Characters • Binary • No Encoding • Lines May Be Too Long 22

  23. Retrieving Mail • Offline Model • User Doesn’t Have to Be Connected In Order to Receive Messages • Mail Server Stores Messages For a User Locally • User Then Downloads Them To a Local File • POP – Post Office Protocol • Uses Port 110 • Current Version: POP3 (Version 3) • Allows Selective Downloading • Session Based: • Authorization • User Name, Password • Transaction • STAT – Request Statistics (Number of Messages, Size) • LIST – List of Messages With Size • RETR – Download a Message • DELE – Delete Message From Server • QUIT – End Session 23

  24. Other Mail Retrieval Options • IMAP – Internet Message Access Protocol • Intended for Laptops • Messages Remains on the Server • Laptop Has a Copy of Messages For Offline Viewing • Protocol Supports Manipulation of Server Message Files 24

  25. Mail Process Diagram Sender SMTP Server Recipient’s SMTP Server TCP/IP Routing Local Mail File SMTP Server(s) POP Formatted Mail Message SMTP Server(s) Client’s Mail Application Recipient’s Mail Application “Internet” Recipient Sender 25

  26. HTML Overview • Markup Languages • HTML Evolution • Intro to HTML “Programming” • Core HTML • Next Week: • Advanced HTML • “Layout” Tags 26

  27. Markup Languages • Late 1960’s – IBM • Add Formatting Information to a Document • Tags • Used in Some Form By All Word Processors • Human and Machine Readable Tags • More Portability Across Machines • No Standard For Binary Files • Allows For Easier Debugging • Accessible to More “Programmers” • Parsers, Add-On’s, Customizations • SGML - Formalizes Markup Language • DTD – Document Type Declarations • Formal Language to Describe a Markup “Grammar” • Describes How Tag is Interpreted, Displayed • Open – Anybody Can Create a Markup Language • Extensible – New Tags Can Be Ignored Without Fatal Results 27

  28. SGML Example – Tags, Structure <EMAIL> <SENDER> <PERSON> <FIRSTNAME>Evan</FIRSTNAME> <LASTNAME>Schapiro</LASTNAME> </PERSON> </SENDER> <BODY> <P> How many widgets do we need for next week’s shipment to RJS? </P> <P> Also, What is your weather like today? </P> </BODY> <EMAIL> 28

  29. HTML Evolution • HTML (1990) • Text Based • HTML 2.0 (1994) • The De-Facto Portability Standard • HTML 3.0 (HTML+) 1995 -INRIA / MIT • Tables • Banners (ala I.E. Marquees) • Math Symbols • Enhancements • Obsolete on Introduction • Netscape, IE, Java pursuing their own standards / enhancements 29

  30. HTML Evolution (2) • HTML 3.2 (1996) - Common Standard • Adopts many tags originated by Netscape, Microsoft, Sun • JavaApplets • Formatting and Text Flow • Header Tags • Meta, etc. • Shift in Focus • Market Driven • Focus on Page Layout, Not Logical Structure • HTML 4.0 (1999) • Style Sheets • Internationalization • Accessibility • Table / Form Improvements • Scripting / Multimedia • HTML 4.1 (1999) – Bug Fixes For HTML 4.0 30

  31. HTML Evolution (3) • XHTML 1.0 (2000) • Formalized Version of HTML • Required to Conform to Data Dictionary • XHMTL Basic (Future) • “Minimal” HTML for Mobile Devices • HTML “Variants” • Netscape, IE, etc. • ISSUE: Which Version of HTML Should we Use? • ISSUE: Which Version Should Browsers Support? 31

  32. HTML Basics • Tags and Attributes • Format: <TAG ATTRIBUTE=“attrib”>text </TAG> • Tags are Essentially Instructions to The Browser • Other Text is Either: • Text to Be Displayed • “Arguments” to the Tags • Syntax • Container Tags: Start and End Tag Required • Empty Tags: No End Tag Needed • Spacing, Linefeeds, etc. Are Mostly Ignored • Tags are Not Case Sensitive • Rules as to What Tags Can Be Included in Other Tags 32

  33. Tag Types • Structural Tags • e.g. <BODY> • Logical Display Tags • “Pure” Logical Display Tags • Tell the Browser the Type of Information • E.g. <CITE>, <AUTHOR> • Seldom Used in Practice • Common Logical Display Tags • E.g. <H1> - Header, <LI> - Items in a List • Layout Tags • Describe Specifically How an Item is to Be Displayed • E.g. <B> - Bold • Meta Tags • Information About the File • To Aid Processing • Have No Effect on the Display 33

  34. Points to Remember • A Browser Interprets the HTML File • Browsers May Display Tags Differently • Syntax Errors: • Unlike Traditional Computer Languages: • Browsers Try to “Fix” Errors • Browsers Don’t Provide Error Messages / Debugging • Each Browser Will Handle Errors Differently • Browsers Can Display Local HTML Files Directly • i.e. A Web Server is Not Required • Type Filepath Directly Into Address Field on Browser • There are Many Different Ways to Achieve the Same Result (“Redundant Tags”) • You Can Easily View the HTML For Any Web Page • Internet Explorer – View/ Source • Netscape – View / Page Source 34

  35. HTML Creation Tools • HTML Editors • Notepad • Tag Editors • Representational Editors • Tools • Syntax Checkers • Style Converters • Formatting Tools • Affect the Readability of the “Code” Only • E.g. Capitalization, Indenting of Tags • As Developers • You Should Understand the Details Before Using Such Tools • Therefore: No Editors / Tools Allowed (Yet) 35

  36. Important HTML Structural Tags • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 //EN”> • <HTML> • <HEAD> • <TITLE> • </TITLE> • </HEAD> • <BODY> • </BODY> • </HTML> 36

  37. Core HTML 2.0 Logical Tags • Headings • <H1>, <H2>, <H3>, <H4> • Paragraphs • <P> • Line Break • <BR> • Lists • <UL> - Unordered List, <OL> - Ordered List • <LI> - List Item • Graphics • <IMG SRC=“ImageFile” ALT=“DisplayText”> 37

  38. HTML Links • External / Absolute: <A HREF = “ http://www.mkat.com/index.htm”> Click for Main Page</A> • External / Relative: <A HREF = “ index.htm”> Click for Main Page</A> <A HREF = “ demos/index.htm”> Click for Demo Page</A> • Internal <A HREF=“#LocalName”>Text</A> • <A NAME=“LocalName”></A> • Mailto: • <A HREF=“mailto:evan@mkat.com”>Click Here to Send Mail</A> • Image • <A HREF=“mailto:evan@mkat.com”> <IMG SRC=“mailbox.jpg” ALT=“Send Mail to Evan”></A> 38

  39. HTML Tables & PreFormatted Text • <TABLE> • <TR> - Table Row • <TD> - Table Data • </TD> • </TR> • </TABLE> • <PRE> - PreFormatted Text • </PRE> 39

  40. Next • Presentations • HTML Lab Work • Create A Basic Home Page • Add an Image • Upload image to Server in Text Mode • View The Page • Upload image to Server in Binary Mode • View the Page • Try out the <PRE> Tag • View Output of Last week’s Class Exercise with and without <PRE> tag 40

  41. HTML Lab (1) • Create a File Locally Like This: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> <H1>This is xxxx’s Test Web Page.</H1> <H2>Hello World</H2> </BODY> </HTML> 2. Save it As index.htm 3. View it In a Web Browser Locally 41

  42. HTML Lab (2) 3. Bring Up WS_FTP 4. Connect to users.shore.net Use Your Shore.Net Account and Password • Change to the public_html Directory • Upload index.htm to This Directory • Open Your Browser With the Address: http://users.shore.net/~brinetxx (where xx is your Account #) 8. You Should See The Same Page You Just Uploaded 42

  43. Homework • Install WS_FTP or equivalent on Your Home PC • Create Your Class HomePage • Add Links to In-Class Exercises • Upload it To Your ShoreNet Account • Email Me When It is Complete • Remember to Include the URL to Your Page 43

  44. Next Week • Advanced HTML • HTML 4.0 • Cascading Style Sheets 44

  45. Additional Resources • Some HTML Primers • www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html • metalab.unc.edu/edweb/htmlintro.html • www.cwru.edu/help/introHTML/ • General Web Information • www.w3c.org – Official Site of the W3C • www.internet.com – Portal For Internet Information • www.wdl.com - Web Developer • www.webdevelopersjornal.com - Web Developer’s Journal • ISP’s • www.shore.net/services/support/ • world.std.com/help/web/tutorial.shtml 45

  46. Internet / Intranet / Extranet • The Main Difference is in the Target Audience • Internet • All Potential Users • Those With GUIs • Those With Current Browsers, Fast Connections • Those With Netscape or Internet Explorer • Intranet • Within a Specific User Community • Microsoft: Users of Microsoft O/S, Browsers • Usually Means Within a Company • Extranet • An Intranet With Some Features Available to a Broader User Community • E.g. Customers, Suppliers • Typically Means Different Levels of Access to Different Users • Two Levels of Accessibility • The Ability to View the Pages as Intended • The Ability to Access the Page 46

  47. HTML Tips / Compatibility • Quotes in Attributes • Double Quotes are Necessary if a Space Exists in Value • E.g. <FONT FACE = “Times Roman”> • Optional Otherwise • E.g. <FONT COLOR=“blue”> <FONT COLOR=blue> • Safe Tags • Results are Reasonable Even if Tag is Not Recognized • E.g. It was a <B>great</B> day! • Confusing Tags • Result is Confusing, But No Serious Harm Results • The following text is <b>bold</b> • Bad Tags • Result May Be Opposite of What You Expect • <DEL>If this text appears, we have a deal</DEL> • Page May Be Unreadable • E.g. White Text on Dark Background will be unreadable if Browser does not recognize background color. 47

  48. Using Color/Fonts in Web Pages • Originally Netscape Extensions to HTML • Now “de-facto” Standards • (Netscape and IE Support Them) • Many Not Officially Part of HTML Standard • Video Displays Vary • Many PCs Configured to Only Support 256 Colors at Once • Other Colors Often Dithered • Colors, Fonts Will Likely Look Different on Different Systems 48

  49. Specifying Color • By Name • Browsers Support Some Common Color Names • By RGB Value: #RRGGBB (Hexadecimal) • #000000 – Black • #FFFFFF - White • In Order of Portability • 16 Color Safety Palette • Colors are Same on Macs, PCs • 216 Color Palette • Netscape, IE “Map” Them to Common Colors • RGB–00,33,66,99,CC,FF • 65,536 Colors • Colors Will Vary Somewhat on Macs, PCs • 16.7 million Colors • Expect Dithering on Many Displays • Example 49

  50. Color Attributes • Body Background (defaults): • <BODY BGCOLOR=“white” TEXT=“black” LINK=“blue” VLINK=“maroon” ALINK=“red”> • BGCOLOR – Background Color • TEXT – Text Color • LINK – Color of Unvisited Links • VLINK – Color of Visited Links • ALINK (Netscape Only) – Color of Link During “MouseDown” 50

More Related