Introduction

Download Report

Transcript Introduction

CIT3100 – Internet Programming III
Web Applications
Lesson 1 (28 Sep 05)
Fernando J. Maymí
[email protected]
Agenda for tonight

Introductions
 Who
we are, and
 What 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

 Command
 Blank
line
 Header fields
 Blank line
 Message
HTTP/1.1
GET
/file.html
200 OKHTTP/1.1
<CR><LF>
Host: www.google.com
Content-Type:
text/html
<CR><LF>
<html><body>...</html>
Simple HTTP Request
Internet
Web Server
Web Client
GET HTTP/1.1
HTTP/1.1 200 OK
Content-Type: text/html
<html><body>
<img src=“img/happyface.gif”>
...</body></html>
GET img/happyface.gif HTTP/1.1
HTTP/1.1 200 OK
Content-Type: img/gif
/9j/4AAQSkZJRgABAQAAAQABAAD/2w
BDAAgGBgcGBQgHBwcJCQgKDBQND...
Hello
Client-Side Scripting
Client scripts are interpreted by the web
browser
 Client scripts can:

 Alter
the appearance of the document
 Validate form fields
 Perform general computational tasks

Client scripts can be embedded or attached
HTTP With JavaScript
Internet
Web Server
Web Client
GET /hello.html HTTP/1.1
HTTP/1.1 200 OK
Content-Type: text/html
<html><head>
<script language=“JavaScript”>
<!-alert(“Welcome to my world”)
-->
</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 are

 PHP
 ASP
 JSP
 Perl

Server scripts produce HTTP data
HTTP on Demand
Internet
Web Client
GET /hello.php HTTP/1.1
1. Web server
loads the script
from its file system
Web Server 2. Web server
passes the script
to the interpreter
3. The interpreter
runs the script and
passes its output to
the web server
HTTP/1.1 200 OK
Content-Type: text/html
<html><body>
<img src=“img/happyface.gif”>
...</body></html>
4. The web server
blindly passes the
output to the client
3-Tier Architectures

3 Tiers are:
 Web
Client
 Web Server
 Database Server
Essential for scalability
 Enhances security

Data-driven HTTP Request
Items
Internet
Web Server
Web Client
GET items.php HTTP/1.1
PHP Engine
HTTP/1.1 200 OK
Content-Type: text/html
<html><body><h1>Items</h1><tab
le><tr><td>Widget</td><td>$50.
Database
Server
SELECT
name, price
FROM items
Widget,50.0
Nails,0.05
Bolts,0.10
Your Turn…

Download and install the Paros proxy
 http://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 Application
Development
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
Planning
Identifying business value
 Analyze feasibility
 Develop work plan
 Staff the project
 Control and direct project

Analysis
Analysis
 Information gathering
 Process modeling
 Data modeling

Design
Physical design
 Architectural design
 Interface design
 Database and file design
 Program design

Implementation
Construction
 Installation

Processes and Deliverables
Process
Product
Planning
Project Plan
Analysis
System Proposal
Design
Implementation
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
boxes
Navigation 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 in

 Size
 Shape
 Placement
for entering data
 Reports presenting retrieved data
Layout Example 1
Layout Example 2
Content Awareness





All interfaces should have titles
Menus should show
 where you are
 where 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 carefully

 Be
aware of font and size
 Avoid using all capital letters
Aesthetics (cont’d)

Colors and patterns should be used
carefully
 Test
quality of colors by trying the interface on
a black/white monitor
 Use 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 controls
 Terminology
 Report and form design
Minimize Effort
 Three
clicks rule
 Users
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