HCI 201

1
HCI 201

• Week 5
• Loose Ends

2
Agenda

• Image stuff
• File stuff
• Bandwidth
• UNIX
• HTML
• Design elements
• CSS
• JavaScript
• Next Week

3
Image Files

• Bitmap-also known as raster graphics
• Vector- also know as object oriented graphics
• JPEG
• Best for photos and complex graphics
• does not work well on line drawings, lettering or
  simple graphics
• Uses lossy compression
• GIF
• Good for images with few distinct colors line
  drawings, black and white images, small text
• Loss- less compression

4
Image Files

• PNG
• Loss-less compression
• Alternative to gif
• Lacking widespread browser support
• Stretching images- you can change an images
  height and width but doing so will stretch it.-if
  you are stretching use a vector type not bitmap
  type.
• Linking from an image
• Place the ltIMGgt tag inside the anchor tag.
• ltA HREF"top"gtltIMG SRC"top.jpg"gtlt/Agt

5
File Maintenance

• Telnet
• Check contents of account
• Create/Delete files
• Create/Delete directories
• Move files
• Set/Change permissions
• Email
• FTP
• Transfer files/directories
• Check contents of account
• Set/Change permissions

6
Bandwidth

• The measurement of bandwidth in in bits (or
  bytes) per second
• High Bandwidth internet connection
• DSL
• Cable
• T1
• Low Bandwidth internet connection
• Dial up
• ISP

7
UNIX

• Is an OS
• Is a command line interface
• Is case sensitive

8
HTML

• ltHTMLgt
• in a document this tag indicates the file is an
  html file.
• Requires closing lt/htmlgt tag
• ltHeadgt
• The title section goes in here as does coding
  like JavaScript, and ltMETAgt tags
• Content element do not belong here
• Requires lt/headgt tag
• ltMETAgt
• used to describe the contents of a Web page for a
  search engine
• No closing tag

9
HTML

• ltTitlegt
• holds title of page
• requires closing lt/titlegt tag
• ltBodygt
• the section where your content and all page
  elements belong.
• Requires a closing lt/bodygt tag

10
Page Design

• The name of the site or sponsor name/logo should
  appear on every page.
• Keep pages simple. Review all of your design
  elements and remove them one at at time. If the
  design works just as well without an element,
  kill it.
• Avoid busy or distracting backgrounds.
• Use consistent fonts, graphical elements, color
  palette, navigation options, and placement of
  elements on the page.
• In general, use more short pages instead of fewer
  long pages. However, content pages should contain
  one conceptual unit of content.
• Never make the user scroll to locate important
  navigation options or the focal point of the page.

11
Page Design

• Call attention to your most exciting content with
  size, color, and/or screen position. Minimize
  less important content.
• Use of color-less is more
• Background colors need to provide contrast with
  the text and images
• Bright colors-energetic
• Light colors-serenity
• Rule of Thirds-images are divided into thirds

12
(No Transcript)
13
Cascading Style Sheets

• Known as CSS
• Cascading Style Sheets (CSS) allow you to keep
  the format of your documents separate from the
  documents themselves.
• They also allow you to create a specific "look"
  for your site, maintained external to the pages
  themselves.
• Not fully implemented in browsers - YET

14
CSS

• 3 ways to change styles on a Web page
• in-line styles
• right in the tag you specify attributes
• document styles
• the tag itself has certain attributes (h1, h2,
  h3, etc.)
• external styles
• CSS

15
JavaScript

• An open scripting language
• Not the same as JAVA although they have
  similarities
• Interacts with HTML
• Creates dynamic content
• Actions take place when called as opposed to set
  up in advance

16
2nd Half

• Advanced HTML
• Image maps
• Forms
• CSS
• JavaScript
• Multimedia