University of Virginia Department of Computer Science School of Engineering University of Virginia...

University of Virginia

Department of Computer Science

School of EngineeringUniversity of Virginia

Charlottesville, VA

Jason O. Watson Curtis M. Buyrn

CS [email protected]

http://www.cs.virginia.edu/~webman


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


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.


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


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)


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.


Web Browsers - Netscape

• Netscape-- the webteam’s 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


Web Browsers- IE

• Microsoft’s 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


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.


Web Resources

• http://www.wc3.org/ The definitive source for all things HTML• http://www.webmonkey.com/ Wired Magazine’s multiple tutorials

on web technology (from basic to the most advanced)• http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

Beginner’s guide to HTML• http://hoohoo.ncsa.uiuc.edu/docs/tutorials/includes.html

explanation of server side includes.• http://www.cs.cmu.edu/~tilt/cgh/-- CMU’s guide to composing good

HTML• HTML for Dummies-- one of the best quick reference books on

HTML out there.


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)


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


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.


Good HTML Conventions

• Common tags: <html> begins a html document• <head> contains <title>• <body text=… link=… vlink=… bgcolor=…> body

of text• <p> start a paragraph <br> new line• <img src=“URL alt=… width=… height=…>• <ul> un-numbered list <li> list element• Be sure to close lists, html, head, body tags



• 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

Frequently Asked Questions



• Colors-- defined within the <body>• 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-

text=“yellow”.



• Background images-- also defined in <body>

• <body background=“URL”>

• check background at high resolutions-- may wrap

• check to see if text color is easy to read. Generally dark backgrounds tend not to work.



• Using forms and CGI-- be careful!

• Best resource- typing man cgiwrap from the CS machines

• Debugging-- use cgiwrapd instead of cgiwrap-- for example-- <FORM METHOD="POST” ACTION="http://www.cs.virginia.edu/cgi-bin/cgiwrap?user=bct7m&script=link_bacon">



• Tables-- very effective tool to manipulate text in a web document.

• Not available with lynx

• Basic tags- <table> opens the table; <th>table header; <tr>new row; <td> new cell

• BE SURE TO CLOSE YOUR TABLE!



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



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



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



• 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/~webman/readme/imgfmt.html



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


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


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 --> Make into *.html


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) <a href=URL>name</a>

• In raw format: macro_link(Jason Watson, http://www.cs.virginia.edu/~jow4c)

• Expands into: <a href=“http://www.cs.virginia.edu/~jow4c/”>Jason Watson</a>


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, it’s 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.


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


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.


Using DeskScan II

• Can be used as an application on its own• Can be started through Photoshop

– File -> Acquire -> Twain Acquire…

• Can create and save personal settings– Custom -> 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 --> within and exporting


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”


OCR - for text

• Optical character recognition - Omni Page in Common Applications

• Common Problems– Must re-read what is OCR’d: hyphens, 1’s and l’s 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


Photoshop Overview

• Photos/Graphics

• Filters

• Image Properties

• Toolbar


Photos & Graphics

• Cropping– use marquee to select– edge of pictures

» edit -> copy -> file -> new -> edit ->paste

• Save as– very important - GIF’s and JPEGs

» use Gifs only for transparent images and cartoons/sketches


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


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


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


Assignment

• Use the guidelines that you have learned today in the design of your own web page.

• Send all completed URLs to: [email protected]

University of Virginia Department of Computer Science School of Engineering University of Virginia...

Documents

Transcript of University of Virginia Department of Computer Science School of Engineering University of Virginia...