Post on 11-Jan-2016
CIT3100 – Internet Programming III
Web ApplicationsLesson 1 (28 Sep 05)
Fernando J. Maymífernando@maymi.net
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
Web Client Web Server
HTTP With JavaScript
GET /hello.html HTTP/1.1
HTTP/1.1 200 OKContent-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 arePHPASPJSPPerl
Server scripts produce HTTP data
Internet
Web Client Web Server
HTTP on Demand
GET /hello.php HTTP/1.1
HTTP/1.1 200 OKContent-Type: text/html
<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
Web Client Web Server
Data-driven HTTP RequestItems
GET items.php HTTP/1.1
HTTP/1.1 200 OKContent-Type: text/html
<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