From Kelly GoTo Project Planning

Scope Creep

The migration of a Web site from a simple, comprehensible project to a quickly out-of-control nightmare. It is a great term for clients who don’t realize the ramifications of individual changes and teeny modifications, which can lead to budgetary increases and time delays.

Client Survey

The client survey contains detailed questions designed to help determine the client’s expectations and to gain a better understanding of the overall goals and needs.

Creative Brief

A document that should determine the goals of the site, including look and feel and marketing strategy. The detail depends on the scope of the project and the expectations of the client.

Sitemap / flowchart (Site-view)

Develops structure from a site-view perspective. Shows overall organizational structure and main content areas. It shows a high-level view of the site, should show main areas of content and HTML pages within each section.

Wireframe (page-view)

Layout content and navigation from a page-view perspective. Use a “mental model’ to structure similar areas of content and navigation together.

Information Architecture

Creating consistent and functional systems for navigation, graphics, page layout and title languages so that the user knows where to go, what to do, and encourages them to return.

Prototype

Putting together a non-design oriented HTML click-through of the site. Testing functionality is important at this stage to have a working model of how the site will operate, to help get a sense of what the user will experience and if the site makes sense.

 

Link terms:

Absolute link

A link to access a website that includes the full URL, i.e. http://www.pasadena.edu/studentservices/index.html. Usually used to link to external website files.

Relative links

A link that locates a file in relation to the current document. For example, a link with a file path proceeded by a ../ tells the browser to move up one directory from the current file prior to looking for the linked file location. ../studentservices/index.html

Root-relative links

A link that locates a file in relation to the root of the current website. A link with an initial forward slash tells the browser to start the path to the file from the root of the current website: /studentservices/index.html

Link state

• Link - state before any action has been taken. Default appearance is blue and underlined. (a:link)
• Visited - the state after having been clicked. Default appearance is purple and underlined. (a:visited)
• Hover - state when the mouse cursor is over it. Default appearance is not changed by browser, but can be changed by css. (a:hover and a:focus for keyboard activated)
• Active - state while being clicked.Default appearance is red and underlined. (a:active

JavaScript

JavaScript is a prototype-based scripting language with a syntax loosely based on C. Web technologies are the best-known examples. One major use of web-based JavaScript is to write functions that are embedded in or included from HTML pages and interact with the Document Object Model (DOM) of the page to perform tasks not possible in HTML alone. Some common examples of this usage follow.

• Opening or popping up a new window with programmatic control over the size, position and 'look' of the new window (i.e. whether or not the menus, toolbars etc are visible).
• validation of web form input values to make sure that they will be accepted before they are submitted to the server.
• Changing images as the mouse cursor moves over them: This effect is often used to draw the user's attention to important links displayed as graphical elements.

Care must always be taken to ensure that the web page degrades gracefully and so is still usable by any user who:

• has JavaScript execution disabled - for example as a security precaution
• has a browser that does not understand the JavaScript - for example on a PDA or mobile phone
• is visually or otherwise disabled and may be using an unusual browser, a speech browser or may have selected extreme text magnification. For more information on this, see the Web Accessibility Initiative

Rollover

refers to a button as created by a web developer or web designer, found within a web page, used to provide interactivity between the user and the page itself. The term rollover in this regard originates from the visual process of "rolling the mouse cursor over the button" causing the button to react (usually visually, by replacing the button's source image with another image), and sometimes resulting in a change in the web page itself.

Review for mid-term: HTML elements, definitions and uses

<!DOCTYPE>

Version of (X)HTML defined at the beginning of the document and links to the w3c specification. Is actually a comment and must be the first element and precede the <hml> tag

<html>

HTML document, found at the beginning of every html document and is the container of the entire document.

<head>

Page information found in every html document, right after the opening html tag. Contains information such as the links to external style sheet, the page title, and meta data (keyword, description, author info, etc.) and except for the <title> content in the <head> is generally not rendered in the visual browser view.

<title>

Page Title identifies the overall content of a document., that displays in the browser window tiltlebar and is saved as the default name for a favorite or bookmark site. It is often displayed as the name of documents in search results.

<style>

Style element for styles that are embedded in the <head> of the document.

<body>

The page contents.

<!-- Comment Text -->

Example of an html comment that is hidden from the browser display and can be viewed in the code.

<em>

Emphasis to a phrase or word.

<strong>

Strong emphasis. Stronger than <em> emphasis

<q>

Short quotation inline rather than a long block of quoted content.

<abbr>

Abbreviation

<acronym>

Acronym

<address>

Author's contact information on the page.

<code>

Used to display characters representing computer code, varialbes and program statements.

<cite>

Citation or reference to some other source material.

<del>

Deleted text

<sub>

Subscript

<sup>

Superscript

<ul>

Unordered list

<li>

List item

<dl>

Definition list

<dt>

Definition term

<img />

Image. Common types are GIF and JPG, and more modern browsers, PNG

<h1>

Heading level 1. Usually there is only one for the main topic heading of the page.

<div>

Division or page section that defines a block of content. May contain many other html page elements that can be treated as a unit.

<span>

Used to specify a small chunk of content that can have style properties different from the other inline content.

<p>

Paragraph. A block element. Each <p> begins its own line. No other block element can be nested inside it. It ignores extra whitespace in the source code.

<br />

Break or soft return within a paragaph block to start a new line directly below the previous line. Interrupts the inline flow.

<blockquote>

Set off a long quotation in a document.

<ol>

Ordered list

<pre>

Pre-formatted text, usually rendered in monospace font and preserves the whitespace in the code source. Could be used for something like a visual poem with layout structure.

<ins>

Inserted text

<dl>

Definition list

<dt>

Definition term

<hr />

Horizontal Rule. A block element. Starts and ends on its own line. Does not contain anything. Can be styled.

<a href="">

Page link

<a href="mailto:">

Email link

<link rel="stylesheet" href="css/base.css" type="text/css" />

Link to an external stylesheet. This code is placed in the <head> of the document.