Planning and Storyboarding a Web Site COMP4064 Planning and Storyboarding a Web Site

Agenda Web Sites, Servers, Urls, Planning and Story boards

The Web What is the Web?? Hypertext information system Information uses links to let the user jump around from one page to another, like help files! Information information is linked together Graphical, Navigable before the web, everything was text-based you used hand-typed commands and utilities “hypermedia”

The Web The Web Hypermedia Cross-Platform Information and Transactions Distributed

What is the Web Cross-Platform Distributed almost any machine can use the web, and any platform (operating system/processor configuration) some newer web technologies break the rules - e.g. style sheet commands work differently on IE and NS Distributed how much disk space do you think the web would take up?! Information on the web is distributed over many networks

What is the Web Dynamic Interactive when software is updated, you have to re-install it web authors update their web pages so that each time it’s updated, you see it! What kinds of web pages would have to be dynamic? Interactive the web can “talk back” to the user what kinds of interactive things can you do on the web? Play games, shop, do surveys, use simulations or tutorials

Web Site vs Web Pages Web Site Single web pages Collection of related

Web Servers A web server is the program that runs the web site the browser requests files and the web server program responds the server program manages data captured in forms, and links forms and browsers with databases many browsers can talk to the server at once, so the server program must manage all the browser connections

Client sends request using http protocol How Does it Work? Laptop Server Client sends request using http protocol Server’s listener process answers and accepts request Server locates the files, sends them and closes the connection. Browser receives, reads, formats, and displays the files

URL’s Stands for…? Parts of a URL Universal (or Uniform) Resource Locator Parts of a URL protocol - the communication standard for this site/document news, gopher, WAIS, http, ftp domain name - the server where the documents or files are located eg. www.sheridanc.on.ca

URL’s Port - might be included sometimes your server may have been installed on a network port other than the default e.g. essex.sheridanc.on.ca:8900 Path and filename - the location of the file on the server e.g. www.lara.on.ca/~wendi/webtech/urls.html anchor name - a specific location in a document www.lara.on.ca/~wendi/index.html#contact

Planning a Web Site Web Site vs. Web Page a web site consists of one or more web pages that are related by some theme or topic a home page is the top page, or the start page on your web site - index.html As with programming, planning is important makes a page easier to maintain and modify makes your site more organized and easier to understand

Planning a Web Site Consider: Content Consider: Goals What kinds of content do you find in web pages? What content will your page have? If you’re stuck for an idea, do some web surfing Consider: Goals Why will people visit your site? Are they just exploring? Are they looking for something? Will they read every page? What is the purpose of your site?

Planning a Web Site Consider: Goals (cont’d) Consider: Target Audience Knowing your goals helps keep out unneeded information If the page is for a client, they’ll have to tell you what the goals are Consider: Target Audience Age? Interests? Reading level? Browsers? Connections? Design with these parameters in mind

Planning a Web Site Consider: Topics Break the content up into topics or sections Categories? Departments? Steps? Topics should group together related information Headings for each topic should be meaningful to surfers and search engines

Planning a Web Site Consider: Organization and Structure What is the structure of your site? Each structure works differently for different content You have to examine the different structures and see how your content fits into it.

Planning a Web Site: Structure Hierarchical start with a main topic, which is broken down into sub topics, and each sub topic is broken down, etc. Example Uses a Top-Down approach...

Planning a Web Site: Structure Advantages of Hierarchical easiest and most logical easy to navigate if the designer provides the proper navigational links useful for sites where the user will go in and look for something specific Disadvantages of Hierarchical easy to get lost if there are too many levels should have a consistent navigational interface

Planning a Web Site: Structure Linear (sequential) like a book, or a “wizard” you start at the home page, move to the next page, then the next page, until you reach the last page you can go back and forth but you can’t directly link to another page if it’s not just before or just after the current one Example

Planning a Web Site: Structure Advantages of Linear easy for the reader to know where they are and hard to get lost useful for instructions, tutorials, or anything else that requires a specific order Disadvantages of Linear limits user’s freedom of exploration - can only go backwards or forwards limits the way in which the designer can present information not effective with very long sets of steps

Planning a Web Site: Structure Linear with Alternatives linear structure with opportunities for the user to branch off the main line of pages Example

Planning a Web Site: Structure Linear and Hierarchical a combination of the two Hierarchical Example Linear

Planning a Web Site: Structure Things to Consider with Linear/Hierarchical you have to make sure the content lends itself to this kind of structure users might find it confusing or out of context and might get lost or lose their bearings within the site

Planning a Web Site: Structure Web structure little or no structure or pattern Example Looks like a web!

Planning a Web Site: Structure Advantages of Web Structure: useful if your users will simply explore your web site Disadvantages of Web Structure: not very organized, hard for users to locate information easy for users to get lost in your site

Story Boards Another tool used to plan web sites Taken from the film industry A diagram of the pages (and layouts) with lines that show the linkage between the pages Helps you to visualize the site

Story Boards Simple story board

Story Boards When story boarding, consider: What topics go on which pages? Usually each topic is one page but sometimes you want to put a few small topics on one page Try not to make pages too big Navigation? How do the users navigate the site? Alternate Navigation? What other methods of navigation are available? Index? Site Map? Alphabetical Listing?

Story Boards What Goes On Home Page? Goals Review A summary of your site? A list of the topics? Goals Review Are the goals you made earlier being met? Did you include extra information that is not needed?