HCI 201 Week 5 Loose Ends

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

Image Files Bitmap-also known as raster graphics Bitmap-also known as raster graphics Vector- also know as object oriented graphics Vector- also know as object oriented graphics JPEG 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

Image FilesPNG  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. 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 Linking from an image  Place the tag inside the anchor tag.  

File Maintenance Telnet Telnet  Check contents of account  Create/Delete files  Create/Delete directories  Move files  Set/Change permissions  FTP FTP  Transfer files/directories  Check contents of account  Set/Change permissions

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

UNIX Is an OS Is an OS  Is a command line interface Is case sensitive Is case sensitive

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

HTML  holds title of page  requires closing tag  the section where your content and all page elements belong.  Requires a closing tag

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.

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

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

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

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

2nd Half Advanced HTML Advanced HTML  Image maps  Forms CSS CSS JavaScript JavaScript Multimedia Multimedia