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