Web browsers-- Web history/Netscape/Internet Explorer/Lynx

1
Department of
Computer Science
School of Engineering
University of Virginia
Charlottesville, VA
Jason O. Watson Curtis M. Buyrn
CS Webmasters webman_at_cs.virginia.edu
http//www.cs.virginia.edu/webman
2
Overview

• Web browsers-- Web history/Netscape/Internet
  Explorer/Lynx/ difference in various platforms.
• Web Resources-- good sites for learning
  HTML/books
• Searches-- Altavista/Yahoo!/Lycos/etc. Having a
  search strategy.
• Good HTML Conventions-- frames/tables/images
• Web team management-- the CS web team/ practices
  and policies/ automation of tasks
• Scanning-- availability/procedures/problems/OCR
• Photoshop-- photos/graphics/filters/image
  properties/toolbar

3
The Web

• What is it?-- The World Wide Web (known as WWW,
  Web or W3) is the universe of
  network-accessible information, the embodiment of
  human knowledge. (http//www.w3.org)
• Effect on Computing-- Millions of sites around
  the world. Billions of dollars are made buy
  businesses each year. These numbers continue
  increase.

4
Electronic Commerce

• Forrester Research, Inc. projects that in the
  United States, intercompany trade of hard goods
  over the Internet will hit 43 billon dollars in
  1998 and will surge to 1.3 trillion by 2003--an
  annual growth rate of 99.

5
The Web

• Some terms-- HTML (hyper-text mark-up language)
• HTTP (hyper-text transfer protocol)
• CGI (common gateway interface)
• SSI (server side includes)
• URL (uniform resource locator) a.k.a A link
• JPEG (joint photographic experts group) image
  format of choice
• OCR (optical character recognition)
• FTP (file transfer protocol)

6
Web Browsers

• History-- First http (hyper-text transfer
  protocol) servers appear in 1991. There were 50
  by January 1993. Mosaic, the first widely
  successful browser is introduced in early 1993.
  By the end of that year, there were over 500 http
  servers in the world. By the middle of 1994,
  there were over 1500 servers. Today there are
  millions of sites world wide.

7
Web Browsers - Netscape

• Netscape-- the webteams browser of choice.
• Estimates are roughly 40-50 of all web users.
• Founded by Marc Andreessen and Jim Kelly- early
  90s.
  
• Versions 3.0 support Java and Javascript
  
• Available for download at http//home.netscape.com
  
• UNIX, Windows, Macintosh
• Different browsers support different features

8
Web Browsers- IE

• Microsofts Internet Explorer-- attempt to break
  into the market held by Netscape
• Has different features than Netscape Navigator,
  ex., different tags, appearance, etc.
• Available from http//www.microsoft.com/ and from
  most Microsoft software products.
• Java and Javascript supported after version 2
• Macintosh, Windows

9
Web Browsers

• Lynx-- text only browser.
• Faster there are no images, applets, sounds,
  etc. to download.
• Does not support Java or Javascript.
• UNIX based.
• Available on the CS machines-- just type lynx
  from the UNIX prompt.

10
Web Resources

• http//www.wc3.org/ The definitive source for all
  things HTML
• http//www.webmonkey.com/ Wired Magazines
  multiple tutorials on web technology (from basic
  to the most advanced)
• http//www.ncsa.uiuc.edu/General/Internet/WWW/HTML
  Primer.html Beginners guide to HTML
• http//hoohoo.ncsa.uiuc.edu/docs/tutorials/include
  s.html explanation of server side includes.
• http//www.cs.cmu.edu/tilt/cgh/-- CMUs guide to
  composing good HTML
• HTML for Dummies-- one of the best quick
  reference books on HTML out there.

11
Searches

• Strategy--know what you are searching for.
  Having a plan ahead of time helps to save time.
  Good searches can take time.
• Altavista (http//altavista.com)-- great for
  single domain searches. Very powerful search
  engine.
• Yahoo(http//www.yahoo.com)-- One of the most
  popular sites on the web. Organized by
  categories.
• Lycos(http//www.lycos.com)
• Infoseek(http//www.infoseek.com)

12
Searches

• People- Finding URLs, e-mail addresses, etc.
• University and Corporate pages often have search
  engines.
• Specific search engines-- phone number databases,
  e-mail databases
• Use ,,- for advanced searches

13
Searches

• Indexing your site with the search engines-- best
  place to go is http//free.submit-it.com/
• Registering your main URL is often all you need
  to do. The search engines have robots (a.k.a.
  spiders) that automatically traverse your web
  site and index all of your pages for you.

14
Good HTML Conventions

• Common tags lthtmlgt begins a html document
• ltheadgt contains lttitlegt
• ltbody text link vlink bgcolorgt body of
  text
• ltpgt start a paragraph ltbrgt new line
• ltimg srcURL alt width heightgt
• ltulgt un-numbered list ltligt list element
• Be sure to close lists, html, head, body tags

15
Good HTML Conventions
Frequently Asked Questions

• Changing the color of the text/background
• Using a background image
• Using forms with CGI
• Incorporating tables into your design
• Best way to edit HTML from emacs

16
Good HTML Conventions

• Colors-- defined within the ltbodygt
• text - the color of the viewed text (default is
  black- 000000
• bgcolor - the background color (default is white
  FFFFFF or grey)
• link - color of unvisited links (default is blue)
• vlink - color of visited links (default is
  purple)
• Colors are based on RGB representation RRGGBB
  (where R,G,B accept values from 0-F)
• Netscape and IE allow for color names-
  textyellow.

17
Good HTML Conventions

• Background images-- also defined in ltbodygt
• ltbody backgroundURLgt
• check background at high resolutions-- may wrap
• check to see if text color is easy to read.
  Generally dark backgrounds tend not to work.

18
Good HTML Conventions

• Using forms and CGI-- be careful!
• Best resource- typing man cgiwrap from the CS
  machines
• Debugging-- use cgiwrapd instead of cgiwrap-- for
  example--
  ltFORM METHOD"POST
  ACTION"http//www.cs.virginia.edu/cgi-bin/cgiwrap
  ?userbct7mscriptlink_bacon"gt

19
Good HTML Conventions

• Tables-- very effective tool to manipulate text
  in a web document.
• Not available with lynx
• Basic tags- lttablegt opens the table ltthgttable
  header lttrgtnew row lttdgt new cell
• BE SURE TO CLOSE YOUR TABLE!

20
Good HTML Conventions

• HTML editing-- text editors work best. You have
  direct control over the page. Emacs, vi, etc.
• FrontPage 97-- good for site design.
• Netscape Editor-- not so good.

21
Good HTML Conventions

• Frames-- Not such a great idea.
• Difficulty in navigating
• Difficult to print
• Can become trapped in endless amounts of frames
• Blink Tag-- try to avoid. Source of annoyance.
• Check your links!-- Broken links sign of a poorly
  maintained web site
• Remember the T-1 Challenged-- most people will
  probably access your page over modem.

22
Good HTML Conventions

• Server side includes-- using .shtml instead of
  .html
• This is parsed HTML -- the server does
  something to the document before it is given to
  the client.
• Useful for many things. Ex. The CS error
  documents.
• Java/JavaScript-- your pages should not require
  the user to be able to view java or javascript.
  Ex. The CS/SEAS banners.

23
Good HTML Conventions

• Animated GIFs-- use sparingly. Often add nothing
  to a page except annoyance.
• Color Schemes-- Make sure that it is readable.
  Generally a white background with dark text is a
  safe bet.
• Images-- Always use width, height, alt tags
  within your images. This speeds up the loading
  of your page dramatically.
• GIFS vs. JPEG -- http//www.cs.virginia.edu/webma
  n/readme/imgfmt.html

24
Good HTML Conventions

• Success on the web-- coming up with new, useful,
  original ideas
• Feedback-- giving an outlet (your e-mail address
  or a feedback form) is often a great way to
  improve your page.

25
Web Site Management

• Maintenance of a large web site-- there is a need
  for uniformity across hundreds, even thousands of
  pages.
• Maintaining/Creating Web sites is a big business.
• Our solutions-- Makefiles

26
Web Site Management

• Makefiles-- allow the use of macros to define
  commonly used HTML sequences (ex. headers,
  footers)
• Allows for quick and simple updating of hundreds
  of pages.
• Uses the C language pre-processor to insert and
  expand macros into HTML documents
• Edit .raw files --gt Make into .html

27
Web Site Management

• Macros-- being with define declaration
• Can accept any number of arguments -- same
  fashion as C function call.
• Arguments are separated by commas.
• Sample macro
  define macro_link(name,
  URL)
  lta hrefURLgtnamelt/agt
• In raw format
  macro_link(Jason Watson,
  http//www.cs.virginia.edu/jow4c)
• Expands into
  lta hrefhttp//www.cs.virg
  inia.edu/jow4c/gtJason Watsonlt/agt
  

28
Web Site Management

• Consistency and Efficiency-- The operation of a
  large web site demands that all team members
  follow the same conventions of design
• Automation of Tasks-- using scripts to simplify
  repetitive tasks. Ex. Recently modified files
  http//www.cs.virginia.edu/webman/mod.shtml
• Quality Control-- Consider your web page a work
  of art. Once you sign your name on it, its in a
  world viewable gallery. Always run pages through
  spell/grammar checks. Always check links. Your
  web pages should look good in all browsers and
  platforms.

29
Scanning Overview

• Scanning availability to graduate students
• Proper procedures on using scanner
• Common problems that might occur while scanning
• Using the scanner for text - OCR

30
Scanning Availability To Graduate Students

• Hewlett Packard ScanJet 6100c is available in
  room Olsson 233
• Software (DeskScan II) for scanner is available
  on the Scanner PC.
• Scanner is capable of both color and black and
  white at high resolutions.

31
Using DeskScan II

• Can be used as an application on its own
• Can be started through Photoshop
• File -gt Acquire -gt Twain Acquire
• Can create and save personal settings
• Custom -gt Image Type
• 5 areas of adjustment when scanning
• Brightness contrast (self adjust), scaling
  (manual or setting)
• Highlight and Shadow, Color Adjustment, Emphasis
• Reverse, negative and lock
• Preview/final --gt within and exporting

32
Common Problems To Be Aware Of

• Scale selected area down to area be scanned
• Straighten page, rotating reduces image quality
• Use/Create proper settings
• Sharp, millions, drawing (GIF), photo under type
• Light to Dark Macintosh, PC, UNIX
• Save at proper resolution - Medium is fine
• Use 72 dpi vs. other dpi for web related work
• Set path to Screen

33
OCR - for text

• Optical character recognition - Omni Page in
  Common Applications
• Common Problems
• Must re-read what is OCRd hyphens, 1s and ls
  etc.
• Note to OmniPage if scanning more than column
• Creases in paper, background graphics
• Must be placed in one direction - cannot read
• FTP out as earlier

34
Photoshop Overview

• Photos/Graphics
• Filters
• Image Properties
• Toolbar

35
Photos Graphics

• Cropping
• use marquee to select
• edge of pictures
• edit -gt copy -gt file -gt new -gt edit -gtpaste
• Save as
• very important - GIFs and JPEGs
• use Gifs only for transparent images and
  cartoons/sketches

36
Using Filters

• Should test these out - very helpful. Can
  download new filters from http//www.adobe.com
• Sharpen
• enhances an image - good for drawings
• Blur
• distort, stylish effect
• Adding effects
• combine, possibilities are infinite

37
Image Properties

• Size
• keep resolution at 72dpi
• use pixels for web related work
• use constrain proportions option
• Rotating
• arbitrary - good for text that needs to be
  straightened
• Flip
• horizontal, vertical
• Adjust levels

38
Toolbar

• Pointer
• use shift and control
• Magic Hand
• Text tool
• Marquee
• Background Fill
• Gradient

• Magnifying Glass
• Eye Dropper
• Smudge
• Gradient
• Standard Paintbrush options - use in conjuction
  with various toolbars

39
Assignment

• Use the guidelines that you have learned today in
  the design of your own web page.
• Send all completed URLs to webman_at_cs.virginia.edu