CIT3100 – Internet Programming III Web Applications Lesson 1 (28 Sep 05) Fernando J. Maymí...

CIT3100 – Internet Programming III

Web ApplicationsLesson 1 (28 Sep 05)

Fernando J. Maymí[email protected]

Agenda for tonight

IntroductionsWho we are, andWhat do we want to be when we grow up?

World-Wide Web Communications Web Application Development User Interface Design

How the World Wide Web Communicates

Hyper-Text Transfer Protocol

Defined in RFC 2616 (for version 1.1) Encapsulated in a TCP segment Request/response message protocol

CommandBlank lineHeader fieldsBlank lineMessage

GET /file.html HTTP/1.1

<CR><LF>

Host: www.google.com

<CR><LF>

HTTP/1.1 200 OK

<CR><LF>

Content-Type: text/html

<CR><LF>

<html><body>...</html>

Internet

Web Client Web Server

Simple HTTP Request

GET HTTP/1.1

HTTP/1.1 200 OKContent-Type: text/html

<html><body><img src=“img/happyface.gif”>...</body></html>

HTTP/1.1 200 OKContent-Type: img/gif

/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQND...

GET img/happyface.gif HTTP/1.1

Hello

Client-Side Scripting

Client scripts are interpreted by the web browser

Client scripts can:Alter the appearance of the documentValidate form fieldsPerform general computational tasks

Client scripts can be embedded or attached

Internet


HTTP With JavaScript

GET /hello.html HTTP/1.1


<html><head><script language=“JavaScript”></script></head><body>...</body></html>

The client browser parses the HTML, finds the script and executes it locally

JS

Server-Side Scripting

Server scripts are interpreted by the web server

Common languages arePHPASPJSPPerl

Server scripts produce HTTP data

Internet


HTTP on Demand

GET /hello.php HTTP/1.1


<html><body><img src=“img/happyface.gif”>...</body></html>

4. The web server blindly passes the output to the client

1. Web server loads the script from its file system

2. Web server passes the script to the interpreter

3. The interpreter runs the script and passes its output to the web server

3-Tier Architectures

3 Tiers are:Web ClientWeb ServerDatabase Server

Essential for scalability Enhances security

Internet


Data-driven HTTP RequestItems

GET items.php HTTP/1.1


<html><body><h1>Items</h1><table><tr><td>Widget</td><td>$50.

SELECT name, price FROM items

DatabaseServer

Widget,50.0Nails,0.05Bolts,0.10

PH

P E

ngine

Your Turn…

Download and install the Paros proxyhttp://www.parosproxy.org/download.shtml

Setup your browser to use it as a proxy Enable trapping of both requests and

responses Visit your favorite web site and see what

happens

Web ApplicationDevelopment

Project Phases Planning

Why build the system? Analysis

Who, what, when, where will the system be? Design

How will the system work? Implementation

System delivery

Identifying business value Analyze feasibility Develop work plan Staff the project Control and direct project

Planning

Analysis Information gathering Process modeling Data modeling

Analysis

Physical design Architectural design Interface design Database and file design Program design

Design

Construction Installation

Implementation

Processes and DeliverablesProcess Product

Planning

Analysis

Design

Implementation

Project Plan

System Proposal

System Specification

New System and Maintenance

Plan

Designing the User Interface

Principles of UI Design

Layout Content awareness Aesthetics User experience Consistency Minimal user effort

Layout

The screen is often divided into three boxesNavigation area (top)Status area (bottom)Work area (middle)

Information can be presented in multiple areas

Like areas should be grouped together

Layout (cont’d)

Areas and information should minimize user movement from one to another

Ideally, areas will remain consistent inSizeShapePlacement for entering dataReports presenting retrieved data

Layout Example 1

Layout Example 2

Content Awareness

All interfaces should have titles Menus should show

where you arewhere you came from to get there

It should be clear what information is within each area

Fields and field labels should be selected carefully

Use dates and version numbers to aid system users

Aesthetics

Interfaces need to be functional and inviting to use

Avoid squeezing in too much, particularly for novice users

Design text carefullyBe aware of font and sizeAvoid using all capital letters

Aesthetics (cont’d)

Colors and patterns should be used carefullyTest quality of colors by trying the interface on

a black/white monitorUse colors to separate or categorize items

User Experience

How easy is the program to learn? How easy is the program to use for the

expert? Consider adding shortcuts for the expert Where there is low employee turnover,

some training can lessen the impact of less precise interfaces

Consistency

Enables users to predict what will happen Reduces learning curve Considers items within an application and across

applications Pertains to many different levels

Navigation controlsTerminologyReport and form design

Minimize Effort

Three clicks ruleUsers should be able to go from the start or

main menu of a system to the information or action they want in no more than three mouse clicks or three keystrokes

UI Design Process

Use Scenario Development

An outline of steps to perform work Presented in a simple narrative Document the most common cases so

interface designs will be easy to use for those situations

UI Structure Design

Window navigation diagram (WND) Shows how all screens, forms, and reports are related Shows how user moves from one to another Like a state diagram for the user interface

Boxes represent components Arrows represent transitions Stereotypes show interface type

Remember the diagram represents what will be shown to the user, NOT what the system is doing to make it work!

WND Example

Your Turn…

Develop the WND for the Online Banking system

CIT3100 – Internet Programming III Web Applications Lesson 1 (28 Sep 05) Fernando J. Maymí...

Documents

Transcript of CIT3100 – Internet Programming III Web Applications Lesson 1 (28 Sep 05) Fernando J. Maymí...