Web Application Architectures

Module 6: Presentation/User Interface

Lecture 1: Introduction and Background

c 2011-13 G.L. Heileman

Module 6, Lecture 1

1 / 10

Focus of Attention
Script/
Service
Web
Client
(Browser)

Connector Database

1: request
Network
2: response

Web
Server

Script/
Service
Script/
Service

Client
tier

Web
tier

Presentation
logic
tier

Business
logic
tier

Connector Database

Data
access
tier

Data
tier

MVC Design Pattern

c 2011-13 G.L. Heileman

Module 6, Lecture 1

2 / 10

The Presentation Tier

The presentation tier (presentation logic and client tiers) produces
what users see and interact with via the browser in a web application.
But it takes more than just hyperlinking things the stickiness and
usability of a website can make or break a business.
A high-quality website has:
A visually appealing layout.
An intuitive navigation structure.

Its beyond the scope of this course to consider web site design and
navigation structure in detail.
Designing layouts from scratch requires some graphic design skills.
There are some fundamental design principles you can learn.
Next well talk about a few basic notions.
c 2011-13 G.L. Heileman

Module 6, Lecture 1

3 / 10

The Layout

c 2011-13 G.L. Heileman

Module 6, Lecture 1

4 / 10

The Layout

c 2011-13 G.L. Heileman

Module 6, Lecture 1

5 / 10

The Layout

c 2011-13 G.L. Heileman

Module 6, Lecture 1

6 / 10

The Layout

c 2011-13 G.L. Heileman

Module 6, Lecture 1

7 / 10

Wireframing
Login | Sign up

Company Logo
Home

Products

Gift Ideas

My Account

du
o
r
P
ion
ect
oll
C
ed
tur
Fea
Copyright notice

c 2011-13 G.L. Heileman

el
s
o
ar
tC

Privacy Policy

About Contact Us

els
od

ms
Ite
e
c
n
ara
Cle

Terms and Conditions

Module 6, Lecture 1

Feedback

8 / 10

Structure and Navigation

UNM Homepage

About

Students

Admissions

Welcome

Campus
Map

Certificates

c 2011-13 G.L. Heileman

Academics

Financial
Aid
Class
Schedule

Campus
Life

Athletics

Degrees

Undergraduate
Programs

Catalog

Graduate
Programs

Module 6, Lecture 1

Information

Administration

Computing

President

Alumni

Regents

Parents

University
Policy

Accreditation

9 / 10

Presentation Tier
The complexity of what is happening on the client side in web
applications has increased significantly over the years e.g., cookies,
client-side validations, client-side JavaScript associated with HTML
elements in the webpage.
Even if you arent involved in the actual design of the web pages, its
important to have knowledge of the design patterns and principles
that underly certain client-side technologies.
In the following lectures in this module well present some of these
design principles, along with:
HTML the language that is used for specifying web pages.
CSS the language used for styling web pages.
JavaScript the language used for adding behavior to web pages.

c 2011-13 G.L. Heileman

Module 6, Lecture 1

10 / 10