Internet intrarnet CIS class 2

Internet / Intranet CIS-536 Class More Internet Technology Client-Side Web Technology Class Agenda • Internet Technology - Continued – – – Connectivity Mail: SMTP / POP FTP • HTML Web Hierarchy TECHNOLOGY Key Components Web Applications Web Forms World Wide Web Core Internet Protocols The Internet Networking Scripting, Applets CGI HTML, Browsers, Web Servers SMTP (Mail), FTP, Telnet TCP/IP, DNS, Backbone OSI Model, Ethernet, LANs Operating Systems UNIX, Windows, Other O/S Computers Mainframes, Minis, PC’s 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 Megabyte File – Actual Performance Depends on: • • • • Protocol Overhead Quality of Connection (Noise) Error Detection and Recovery Physical Limitations of Connected Computers Connectivity Options • Standard Analog Telephone Line – Hayes Compatible Asynchronous Modem • • • – V.32 : 2400 – 9600 bps : 15 - 55 minutes V32.bis : 7200bps - 14.4 kbps : – 18 minutes V34 : 14.4 – 28.8 kbps : – minutes 56 kbps Modems : – 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 Connectivity Options (2) • ISDN – “Digital” Dial-Up – 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 : ( < second) • xDSL – Digital Transmission Using Standard Copper Telephone Cable – ADSL – Asymmetric • • 1.5 – mbps from ISP to Consumer 16-640 kbps from Consumer to ISP Connectivity Options (3) • LAN – Local Area Network – Shared Bandwidth • – Ethernet : 10 mbps • • • • – Theoretical Max: 1MB file in Less than Second 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 – 16 mbps 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 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 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 Frames (2) • – SRC – The URL to Display in This Frame – NAME – An Internal Reference Name of The Frame – SCROLLING – (Default) Allow Scrolling When Page is Larger Than Frame • Links Within Frames – – – Straight Link Replaces the Entire Page Targeted Links – Allows a Link to Replace a Frame • TARGET = The Internal Frame Reference Name • Use Frames Judiciously – Often Same Effect Can Be Achieved Through a Single Page » Example 59 Multimedia • Sound – • • • • – IE Only Plays Sound in Background SRC – URL of the Sound File – WAV, MID Formats are Common LOOP – Number of Times to Repeat Sound (Default = Once) Alternatives: • • Plug-In OBJECT= (HTML 4.0) • Video – MPG, AVI • Client-Pull – • • Document Will Reload Every Seconds If URL Specified: This Page Will Display For Seconds and Load New Page » Example 60 Client-Side Image Maps • Allow a Graphic to Be Used as a Segmented Button • When User Clicks on the Region In Map – The Appropriate URL is Invoked • • – – • – SHAPE – Circle, Rect, Polygon – COORDS – – – – – Rectangle - Lower Left, Upper Right Corners Circle: Center Coords and Radius Polygon – Polygon Edges ALT – Text to Be Displayed For Text-Only Browsers • Coords Start at Upper Left Corner Example 61 Meta Tags • Information About the Data • Information Passed to Browser, Server • Information Passed as Name, Value Pairs • – Information for Browser • – Information for Server • Meta Tags are Not Strictly Part of HTML • Standard Tags By Convention • No Guarantee That Browser / Server Will Understand Tags • No Guarantee That Browser / Server Will Obey Tags 62 Meta Tags(2) • Browser Keyword/Values: – “Author” – Author’s Name – “Review”– Page Should Be Reviewed After Specified Date – “Keywords” - Search Engine Should Index This Page on Specified Keywords – PICS-Label – Content Ratings • Server Keyword/Values: – – – – – “Refresh” / Time Period – Reload Page Periodically “Expires” / Time Period – Server Shouldn’t Cache Page After This Date Content-Type – Character Set Used in Document Page-Enter – Visual Transition Effect Upon Page Entry Page-Exit - Visual Transition Effect Upon Page Exit Example 63 Cascading Style Sheets (CSS) • Similar to Word-Processing Styles • Controls Layout, Not Content – Change in Web Page Design Philosophy – The Reality: Web Page Authors Were Using “Tricks” to Control Layout – The Response: Give in to the Inevitable • Develop a Reasonable Standard: Cascading Style Sheets • CSS is Now the Preferred Method For Portability – Allows Users to Change Styles for Readability – CSS “Requires” Upgraded Browser • • – Browser/User Now Have More Options for Making it Readable Older Browsers Won’t “Crash”, Just Won’t Show Formatting Underlying Text is More Human Readable • Proliferation of Font, Table, etc Tags Made HTML “Unreadable” in Many Cases • Styles Allow Control of: – Fonts, Colors, Spacing, Margins 64 The Philosophy of Style Sheets • • • All Text Belongs to a “Style” Style Information Kept Together in Dictionary Style Information Defined in: – Within the HTML Text Itself (Inline) • – – HTML Header A Linked CSS File • – Allows Better Access For People With Disabilities A Useful Goal: – • Can Be Easily Changed to Produce a Different Document Style A User Defined CSS File (Defaults For the Document) • • Uses Style Sheets Purely For Enhanced Formatting A Generic Set of Styles Used By Many The Reality: – – May Help Consistency Among Similar Documents Unlikely to Happen Across Companies • Designers Will Want to Create Own Unique Look and Feel 65 Basic Example of Global Style in Header • – H1 {color: blue} • • All Text Within an H1 Tag is Blue • Equvalent of: – xxx For ALL H1 Tags in the Document • Saves “Code” • Makes it Easier on Designers – Easier to Make a Global Change • Resulting HTML Body is Easier to Read 66 Same Example Using Inline Style • xxx – – In This H1 Instance, the Text is Blue Subsequent H1 Tags Revert to Default • The “Cascading” in Cascading Style Sheets – Defines How “Conflicts” are Resolved • i.e What if There’s Both a Global and Inline Style? – Common Sense Hierarchy: » Inline Rules Override Global Rules » Document Styles Override User Style Sheets – EXCEPTION: Can Override Others Through ! important Tag 67 Global Style Sheets • – • • Style Sheet “Libraries” – W3C Core Styles • • http://www.w3.org/StyleSheets/Core/stylename – Eight Core Styles For demo: http://www.w3.org/StyleSheets/Core/preview.html 68 Style Sheet Grouping • H1 {color: green} H2 {color:green} H3 {color:green} Can Be Written: H1 H2 H3 {color: green} 69 Style Sheet Classes • User Defined Classes – – • • – – – – P.stoptext {color: red; font: 16 pt} P.gotext {color: green; font: 18 pt}

This text appears in red

This text appears in green

• C-Style Comments – H2 {color: blue} /* All Headers Displayed in Blue */ 70 CSS Properties • • • • • • • • • • • • • Background: color – The Background Color Color: color – The Text Color Font-family: “font name” – The Font to Be Used Font-size : size/units (e.g 12pt or 1in) Font-style: italic Font-weight: bold, demi-bold, demi-light, extra-bold, extra-light, light, medium Line-height – distance between lines Margin-left Margin-right Margin-top Text-align: left, center, right Text-decoration: italic, line-through, none, underline Text-indent 71 More CSS Properties • List Styles – List-style-image:URL (newbullet.gif)} – List-style-type: disc,circle,square,decimal,upperalpha,lower-alpha,upper-roman,none – – UL {list-style-image:URL(newbullet.gif)} – • Cursor: auto, crosshair, default,hand,text,help,wait • Downloadable Fonts – Give the URL Where Font Can Be Found • Layers • CSS is the Foundation for Dynamic HTML – Allows Script to Reference an HTML Property • E.g ButtonClick Changes Text Color 72 Other Useful Tags / Information • – – Allows an Arbitrary Division of an HTML Document Attributes Only Apply Within the Tags • – Allows “Custom Tags” • ID, NAME Attributes – – Give a Tag Instance a Unique Name, ID Allow a Specific Tag To be Referenced Through Dynamic HTML • All HTML Tags Now Have the STYLE Attribute 73 ... Hayes Compatible Asynchronous Modem • • • – V. 32 : 24 00 – 9600 bps : 15 - 55 minutes V 32. bis : 720 0bps - 14.4 kbps : – 18 minutes V34 : 14.4 – 28 .8 kbps : – minutes 56 kbps Modems : – minutes... one direction: 28 bps in the other K56Flex – (Rockwell Semiconductor) X2 – (U.S Robotics / 3Com) V.90 – Unifies K56Flex / X2 Performance Varies Significantly Connectivity Options (2) • ISDN – “Digital”.. .Class Agenda • Internet Technology - Continued – – – Connectivity Mail: SMTP / POP FTP • HTML Web Hierarchy TECHNOLOGY Key Components Web Applications Web Forms World Wide Web Core Internet