Internet/Web Basics

1. Internet/Web Basics Margie Metzler margie@netapp.com Java 3.3.129 (408) 822-3185 http://web.netapp.com/engineering/webresources/ August 30, 2014

2. A World Wide Computer Network What is the Internet?

3. Definitions • Internet: the largest public Wide Area Network • Intranet: a private Wide Area Network, with access restricted to those within an organization • Extranet: a private Wide Area Network for a group of companies or organizations • World Wide Web: a huge collection (all) of the HTML documents that link to other documents

4. What is a Network? • Networking is Communicating • Three Types of Computer Networks 1. Peer to Peer 2. Local Area Network 3. Wide Area Network

5. PC PC Network Cable 1. Peer to Peer

6. W/S W/S File Server 2. Local Area Network (LAN) The computing is done on the PC’s. The file server holds and protects your files.

7. Sunnyvale PC PC PC PC File Server File Server Santa Clara 3. Wide Area Network Leased phone lines

8. The Largest Public Wide Area Network So what is the Internet? TCP/IP

9. Basic Technologies • TCP/IP : Transport Control Protocol/Internetworking Protocol. Enables one computer to address and send data to another. IP handles addressing and TCP ensures delivery. • FTP: File Transfer Protocol.Service capable of moving files from one computer to another. • SMTP: Simple Mail Transport Protocol. The basis for Internet e-Mail.

10. What is on the Internet? • World Wide Web Sites • File Transfer Protocol Sites • E-mail • Telnet

11. What is the World Wide Web? • A huge collection of HTML documents H Hyper T Text M Markup L Language • Documentsthat link to other documents

12. HTML • Current standard: 4.0 (but 3.2 is what browsers do best) • See www.w3.org to see what is standard at any time • Uses open and closed brackets • Ignores white space • Is a Markup Language rather than a Programming Language • Evolved from SGML

13. What is a Web Page? • An HTML file • The HTML file may link to: • Graphic Files • Sound Files • E-mail addresses • Other HTML files

14. What is a Web Site? • A group of HTML files • A folder on a hard disk • A collection of Web Pages

15. What is a Web Server? • Computer holding the Web Site • Software that lets the computer serve the site to another computer

16. What do I need to Use the 'Net? • Computer (PC, MAC, etc) • Connection (Modem or Ethernet Card for LAN) • Internet Service Provider • Software to connect to ISP • Browser • Netscape Navigator, Microsoft Internet Explorer

17. ...and to create web pages? • Space on a Web Server • Software to upload the web site to the server • Application to create HTML (Notepad, vi)

18. Don’t I Need a Web Page Designer? • No… If you know HTML you can use Notepad or vi. • But… • You may want to use software such as HomeSite by Allaire, FrontPage by Microsoft, Dreamweaver by Macromedia, Netscape’s Composer, Adobe PageMill or Go Live, or Arachnophilia (http://www.arachnoid.com/arachnophilia/), or… • WYSIWYG Editors don’t use “standard” HTML code. • They inject extraneous code of their own, which is tedious to remove.

19. History of the Internet • Mainframe computers share data • Person-to-Person communication • E-Mail • Distribution Lists • Development of a Language • Hypertext and Graphics • Introducing the World Wide Web!

20. 1979 Usenet 1969 ARPANET 1992 WWW 1983 TCP/IP 1986 NSF 2001 We are here! 1976 Packet switching and UUCP 1984 DNS 1990 ARPANET dissolved History (continued) • 1969, ARPANET launched: U. of Utah, SRI, UCLA, UCSB, by Advanced Research Projects Agency (ARPA) to ensure communications in case of a nuclear war • 1976, AT&T launches UUCP (Unix to Unix Copy)

21. History (continued) • Usenet, 1979: UUCP link between Duke and UNC • TCP/IP in 1983 • 1984, Domain Name System (DNS) is introduced for automatic address resolution • 1986: National Science Foundation creates NSFNET • 1992: World Wide Web

22. World Wide Web • Developed at CERN, early 1990’s • European laboratory for Particle Physics • Proposed by Tim Berners-Lee in 1989 • Prototyped on NeXT (1990) • Launched in 1992 • Mosaic introduced in 1993

23. Who Sets the Standards? • The World Wide Web consortium • www.w3.org • Tim Berners-Lee

24. Components of a Web Site • Basic Web Page (HTML) • Documents • Acrobat • HTML • Office

25. Components of a Web Site • Other • Forms • CGI scripts • Server Application Program Interfaces (API’s) • Client-Side Scripting (PERL) • JavaScripts • Security

26. The Internet Challenge: Communicating Globally • Networks • Operating systems • Workstations • Software • People Talking...

27. The Internal Solution: Technology • Using shared drives • Using the Intranet • Using e-mail Sharing Data...

28. Major Issues • You can’t control what people see • They use different browsers: Netscape, Internet Explorer, Lynx, Opera (and different versions) • They can turn off graphics and change text colors and sizes on their browsers • Mac, UNIX, PC operating systems give users much different views • Servers don’t always support your HTML code. (60% are UNIX running Apache) • They don’t like being required to download plug-ins • They use different monitors/screen sizes

29. Graphics: Types • GIF: Graphical Interchange Format (CompuServe) • JPEG: Joint Photographer’s Experts Group • PNG

30. More on Graphics • Monitors: resolutions of 640x480 to 1600x1200 • Pixels: basic building blocks • A pixel has complete set of red, blue and green dots • Size of pixel depends on the video card, how the hardware is configured, and size of the screen

31. More Graphics • Color models: • Pantone (Print media) • RGB (Red, Blue, Green.) Monitors • CYMK (Cyan, Magenta, Yellow and Black.) Printers • 216 Web-safe colors

32. Still More Graphics • Resolution • Bandwidth • File size: shouldn’t be over 50-60 KB. (Users don’t like downloading big graphics unless they’re really necessary.)

33. Usability Issues • How well can users use your site? • Some of the rules we’ve used for print no longer apply.

34. Usability Definitions • Usability describes whether people can achieve their goals in a simple and pain-free manner.

35. Six Attributes of Usability • Learnability - System enables achieving tasks on first time use • Success - System enables the user to complete work without errors • Throughput - System enables rapid completion of work • Satisfaction - System is pleasant to use • System Integrity - System does not enable the user to injure it • Health and Safety - System does not enable the user to injure herself

36. How to enhance usability • First: Overcome the fallacy that users will not have a problem.

37. Usability Issues • Audience • Line speed? • Firewall issues? • Special Technology Requirements • Plug-Ins? • Bells & whistles? • Develop for the lowest common denominator

38. Visibility of system status Match between system and the real world Aesthetic and minimalist design User control and freedom Consistency and standards Ten Usability Design Principles From Neilsen, J. 1994. Usability Inspection Methods, edited by Nielsen, J., and Mack, R.J. New York: John Wiley.

39. Ten Usability Design Principles (cont.) • Recognition rather than recall • Error prevention • Flexibility and efficiency of use • Help users recognize, diagnose, and recover from errors • Help and documentation From Neilsen, J. 1994. In Usability Inspection Methods, edited by Nielsen, J., and Mack, R.J. New York: John Wiley.

40. Writing for the Web Web Facts • 79% of users always scan; only 16% read word-by-word • Reading from computer screens is 25% slower than from paper • Web content should be 50% the size of its paper equivalent

41. Paper vs. Online Publishing Paper • Document forms a whole, and the user is focused on the entire set of information

42. Paper vs. Online Publishing Web Site Publishing • Split documents into multiple hyperlinked pages • Make sure each page stands on its own • Lower word count; readers read about 25% slower • Get to the point: Web users are task-oriented and impatient • Don’t exaggerate: Credibility is critical • Use an informal and immediate writing style • Use simple sentence structures • Update pages often • Use up-to-date statistics, numbers and examples

43. Issues that Affect Writing Style • Screen Size. 100 words on a Palm-sized computer is a lot to read. The same text at 1024 x 768 is a reasonable amount. • Resolution.Print text is 600 dpi. Online text is 72 dpi. This difference produces a jagged text that is more difficult to read and tires eyes. • "Noise."Everything on screen that distracts from the message of the content: banner ads, animations, meaningless graphics, and formatting are all "noise".

44. Writing Suggestions • Choose appropriate fonts and colors. • Use online fonts and Web-safe colors. • Use Meaningful sub-headings. • Use Bulleted lists. • Use only one idea per paragraph. • Chunk information together. • Use half the word count of conventional writing.

45. What Users Want • Simplicity • Credibility • Outbound links • Humor: But use with caution (remember “World-Wide”) • Speed: Users want to get their information quickly

46. Writing for the Web: Text Summary • Text should be scannable • Text should be concise • Users like Hypertext • Users like summaries

47. White Space (Spool, Jared et al, Web Site Usability, p. 75.) • The more white-space there was on a site, the less successful users were at finding information • The more white-space, the lower users rated the site in terms of: • Finding things easily • Ease of reading • Ease of searching • Overall appearance • Ease of use • Productivity

48. White Space • Why? Skimming is different from reading. People are “hunting” for information on the Web. White-space spreads out information and slows the “hunt.”

49. Scrolling • Conventional wisdom: people don’t like to scroll, hence information should not be “below the fold,” in newspaper parlance, or below the screen such that you have to scroll to read. • Not true: • Different sized screens, resolutions etc. make it impossible to know how big anyone’s screen is. • Usability studies show no one minds scrolling down. (They do get annoyed at strolling across, however…). • But… users quit reading when they hit a horizontal line or a line of very small text.

50. Graphics • Studies indicted that graphic design has no impact on a site’s usability. • But…. users reported that they couldn’t concentrate when there was animation on the screen.