HCI 201 Week 2 UNIX Protocols Pre Design Process HTML

Agenda  Questions on reading/hw?  New Additions to course sitecourse site  Revised HW 2 Revised HW 2  HW2 Example HW2 Example  UNIX summary UNIX summary  UNIX  Protocols  Your site topics  Pre-coding design process  HTML  Next week’s assignment

UNIX  My UNIX summary page My UNIX summary page  Directory Structure in your account  Common UNIX commands  pwd  ls  ls –l  cd  rm  chmod

Protocols  What is a protocol  What do they do  TCP/IP- Transmission Control Protocol/Internet Protocol  FTP- File Transfer Protocol  HTTP-Hypertext Transfer Protocol

Your Site Topics  I’ll call each of you up here and we’ll discuss your topic for a few minutes.  Exchange addresses amongst yourselves so that you have additional support for (and from) the class.

Pre Coding  User Centered Design entails making the user’s needs, goals and abilities the primary focus of your site’s design  Before doing any code you need to determine a few things  What is the main goal of your site?  Who is your intended audience and what are some of their basic characteristics?  Why will they want to come to your site?  What will they be able to do on your site?  How will your site differ from already existing sites?

Pre Coding  Content is King- it draws the audience  Copyright law  Research  What is your competition doing?  Learn from their mistakes

Pre Coding  Placement of information  How does your audience read?  Where do they start to read?  How far down the page will they read?  Most important element (for Western European derived peoples, anyway) goes in upper-left hand corner  Determine rough site layout before coding - Sketch page/information layout  What type of navigation between pages?  What type of images, tables, lists etc… will you need?

Pre Coding  Design  Grouping  Proximity  Alignment  Browser differences  Color  Contrast between text and background  Can denote function

Pre Coding  Text  Readability  Font  Leading- space between the lines  Do you need a lot of text?  Do your images tell a story?  Browser differences

HTML  What is HTML  Hyper Text Markup Language  A WebPage is an HTML file  It can be created in any text editor (use Notepad instead of MS Word)  Pico  Vi  In this class you MUST hand code  HTML consists of text and markup commands called Tags

HTML  Tags Specify  Logical structure of elements such as  Headings  Paragraphs  Tables  Visual appearance  Bold  Italics  Fonts size  Background color  Links

HTML Begin and End Tags 

HTML  = line break; has no closing tag- there is no  = anchor (hyperlink), usually in format of: link does that work? click hereclick here  = important for search/index

Shopping List For the next assignment you need:next assignment  Your site rationale  Your content  Your site sketches  Content as HTML