Introduction of Internetapplication

Introduction
Distributed
Architectures
User Interface
Design
Introduction to Internet Tools
Applications
Internet Applications, ID1354
1 / 36
Introduction
Contents
Distributed
Architectures
User Interface
Design
Tools
Distributed Architectures
User Interface Design
Tools
2 / 36
Introduction
Section
Distributed
Architectures
User Interface
Design
Tools
Tools
3 / 36
Introduction
Local Application
Distributed
Architectures
User Interface
Design
Tools
I We are familiar with an

architecture where the entire
application resides on the same
computer.
4 / 36
Introduction
Introducing a Server
Distributed
Architectures
I Now, the application will User Interface

Design
be split on two tiers Tools
(computers).
I A client that has the
view and a server that
has controller and
model.
5 / 36
Introduction
Distributed
Architectures

Design
(computers).
has controller and
model.
I The view is displayed in
a web browser.
5 / 36
Introduction
Distributed
Architectures

Design
(computers).
has controller and
model.
a web browser.
This architecture is not good, we also need
layers for communication.
5 / 36
Introduction
Distributed
Architectures

Design
(computers).
has controller and
model.
a web browser.
This architecture is not good, we also need
layers for communication.
5 / 36
Introduction
Server-Side Communication
Distributed
Architectures
I First, we add a server layer, User Interface
normally called view (a bit Design
Tools
confusing).
I However, the server side
view layer performs tasks
typical of a view:
6 / 36
Introduction
Distributed
Architectures
Tools
confusing).
typical of a view:
I Creates views (HTML),
which are sent to the client.
6 / 36
Introduction
Distributed
Architectures
Tools
confusing).
typical of a view:
I Interprets user gestures, a
click in a web page creates a
request to the server.
6 / 36
Introduction
Distributed
Architectures
Tools
confusing).
typical of a view:
It might seem that we need yet a layer, for
network handling. There is such a layer, but it is
in the web server. We don’t write it ourselves.
6 / 36
Introduction
Distributed
Architectures
Tools
confusing).
typical of a view:
It might seem that we need yet a layer, for
network handling. There is such a layer, but it is
in the web server. We don’t write it ourselves.
6 / 36
Introduction
Client-Side Communication
Distributed
Architectures
I Next, we add a client User Interface

Design
layer for communication, Tools
the net layer.

I Actually, the browser
handles most of the
communication.
I The small network code
written by us is normally
considered part of the
client-side view, the net
layer is omitted.
7 / 36
Introduction
Distributed
Architectures

Design
the net layer.

handles most of the
communication.
layer is omitted.
I This is a traditional web application.
7 / 36
Introduction
Distributed
Architectures

Design
the net layer.

handles most of the
communication.
layer is omitted.
I This is a traditional web application.
7 / 36
Introduction
The MVVM Pattern

Distributed
I The trend is that data is Architectures
stored also on the client, User Interface

Design
therefore we get a Tools
client-side model.
I This reduces the network
communication, since we
do not need to resend
the entire view each time
the user does something.
8 / 36
Introduction
The MVVM Pattern

Distributed

Design
client-side model.
I Thereby, the application
becomes faster.
8 / 36
Introduction
The MVVM Pattern

Distributed

Design
client-side model.
becomes faster.
I This is referred to as the MVVM,
model-view-viewmodel pattern.
8 / 36
Introduction
The MVVM Pattern

Distributed

Design
client-side model.
becomes faster.
I This is referred to as the MVVM,
model-view-viewmodel pattern.
8 / 36
Introduction
Programming Languages
Distributed
Architectures
User Interface
I This is the architecture Design
Tools
we will normally use
during the course.
I The view is programmed
in HTML and CSS, client
side behavior is
programmed in
JavaScript and the entire
server side code is
written in PHP.
9 / 36
Introduction
Programming Languages
Distributed
Architectures
User Interface
I This is the architecture Design
Tools
we will normally use
during the course.
I The view is programmed
in HTML and CSS, client
side behavior is
programmed in
JavaScript and the entire
server side code is
written in PHP.
9 / 36
Introduction
Three-Tier Architecture
Distributed
Architectures
User Interface
Design
I Of course, we also need Tools
to store data. That is

done in the data layer,
which is often a
database.
I We also introduce the
integration layer, to
handle the database
calls.
10 / 36
Introduction
Three-Tier Architecture
Distributed
Architectures
User Interface
Design
I Of course, we also need Tools
to store data. That is

done in the data layer,
which is often a
database.
I We also introduce the
integration layer, to
handle the database
calls.
10 / 36
Introduction
Three-Tier Architecture (Cont’d)

Distributed
Architectures
User Interface
Design
Tools
I In a bigger application, we would most likely

place the database in a separate node.
I This is called three-tier architecture and is,
since long time, the dominating architecture
for web applications.
11 / 36
Introduction
Three-Tier Architecture (Cont’d)

Distributed
Architectures
User Interface
Design
Tools
I In a bigger application, we would most likely

place the database in a separate node.
I This is called three-tier architecture and is,
since long time, the dominating architecture
for web applications.
11 / 36
Introduction
Distributed
Architectures
User Interface
Design
Tools
Question 1
12 / 36
Introduction
Event-Driven Architecture
Distributed
Architectures
User Interface
Design
Tools
I In the latest year, there is a growing tendency to

move business logic to the client, perhaps
completely remove the server-side model.
I This is made possible with web sockets, which
enable full duplex browser-server communication.
13 / 36
Introduction
Distributed
Architectures
User Interface
Design
Tools

I The motive is to reduce communication latency. The
browser informs the server about user actions, but
does not wait for response before updating the view.
13 / 36
Introduction
Distributed
Architectures
User Interface
Design
Tools

I The motive is to reduce communication latency. The
browser informs the server about user actions, but
does not wait for response before updating the view.
13 / 36
Introduction
Section
Distributed
Architectures
User Interface
Design
Tools
Tools
14 / 36
Introduction
Use UI Guidelines!
Distributed
I This is not a course in human-computer Architectures
interaction. Still, it is mandatory to consider User Interface

Design
basic heuristics for user interface design. Tools
I There are some short introductory texts on

user interface design available at Nielsen
Norman Group, such as:
15 / 36
Introduction
Use UI Guidelines!
Distributed

Design

I 10 Usability Heuristics for UI Design,
http://www.nngroup.com/articles/
ten-usability-heuristics/
15 / 36
Introduction
Use UI Guidelines!
Distributed

Design

I Top 10 Guidelines for Homepage Usability,
top-ten-guidelines-for-homepage-
usability/
15 / 36
Introduction
Use UI Guidelines!
Distributed

Design

usability/
I Top 10 Mistakes in Web Design,
top-10-mistakes-web-design/
15 / 36
Introduction
Use UI Guidelines!
Distributed

Design

usability/
I Top 10 Mistakes in Web Design,
top-10-mistakes-web-design/
15 / 36
Introduction
1. Visibility of system status

J. Nielsen’s 10 Usability Heuristics Distributed
Architectures
User Interface
Design
Tools
I The system should always keep users
informed about what is going on, through
appropriate feedback.
I The UI must change within one second
after a user action, or the user might think
nothing happened.
16 / 36
Introduction

Architectures
User Interface
Design
Tools
I The system should always keep users
nothing happened.
I Good examples:
16 / 36
Introduction

Architectures
User Interface
Design
I The system should always keep users Tools

nothing happened.
I Good examples:
16 / 36
Introduction
2. Match between system and the

real world Distributed
Architectures
User Interface
J. Nielsen’s 10 Usability Heuristics Design
Tools
I Use words, phrases and concepts familiar

to the user, rather than system-oriented
terms. Follow real-world conventions,
making information appear in a natural and
logical order.
I Good example (“How can we help you?”
better than “FAQ”):
17 / 36
Introduction

Architectures
User Interface
I Use words, phrases and concepts familiar Tools

logical order.
I Bad example (“Continue if enabled” is

system oriented language):
17 / 36
Introduction

Architectures
User Interface
I Use words, phrases and concepts familiar Tools

logical order.
I Bad example (“Continue if enabled” is
system oriented language):
17 / 36
Introduction
3. User control and freedom

Architectures
User Interface
Design
Tools
I We often do things by mistake, and

therefore need a clearly marked
“emergency exit” to leave an unwanted
state without having to go through an
extended dialogue. Support undo and redo.
I Good examples:
18 / 36
Introduction
3. User control and freedom

Architectures
User Interface
Design
Tools
I We often do things by mistake, and
therefore need a clearly marked
“emergency exit” to leave an unwanted
state without having to go through an
extended dialogue. Support undo and redo.
I Good examples:
18 / 36
Introduction
4. Consistency and standards

Architectures
User Interface
Design
Tools
I Users should not have to wonder whether

different words, situations, or actions mean
the same thing. Follow platform
conventions.
I Good example (Sign in at top right, logo
with link to index page at top left):
19 / 36
Introduction
4. Consistency and standards

Architectures
User Interface
Design
Tools
I Users should not have to wonder whether
different words, situations, or actions mean
the same thing. Follow platform
conventions.
I Good example (Sign in at top right, logo
with link to index page at top left):
19 / 36
Introduction
5. Error prevention
Architectures
User Interface
Design
Tools
I Create a careful design which prevents

problems from occurring. Either eliminate
error-prone conditions or check for them
and present users with a confirmation
option before they commit to the action.
I Good example:
20 / 36
Introduction
5. Error prevention
Architectures
User Interface
Design
I Create a careful design which prevents Tools
problems from occurring. Either eliminate

error-prone conditions or check for them
and present users with a confirmation
option before they commit to the action.
I Good example:
20 / 36
Introduction
6. Recognition rather than recall

Architectures
User Interface
Design
I Minimize the user’s memory load by making objects, Tools
actions, and options visible. The user should not
have to remember information from one part of the
dialogue to another. Instructions for use of the
system should be visible or easily retrievable
whenever appropriate.
I Good example:
I Clear headline.
I No doubt where to click
to start the search.
21 / 36
Introduction
6. Recognition rather than recall

Architectures
I Minimize the user’s memory load by making objects,
User Interface
actions, and options visible. The user should not Design
have to remember information from one part of the Tools
dialogue to another. Instructions for use of the

system should be visible or easily retrievable
whenever appropriate.
I Good example:
I Clear headline.
I No doubt where to click
to start the search.
21 / 36
Introduction
7. Flexibility and efficiency of use

Architectures
User Interface
Design
Tools
I Accelerators, unseen by the novice user,
may often speed up the interaction for the
expert user.
I Allow the user to change the accelerators.
22 / 36
Introduction

Architectures
User Interface
Design
Tools
expert user.
I Examples are
I Saved searches
I Items you recently looked at
I Save query for later
22 / 36
Introduction

Architectures
User Interface
Design
Tools
expert user.
I Examples are
I Saved searches
I Items you recently looked at
I Save query for later
22 / 36
Introduction
8. Aesthetic and minimalist design

Architectures
User Interface
Design
Tools
I Dialogues should not contain information

which is irrelevant or rarely needed. Every
extra unit of information in a dialogue
competes with the relevant units of
information and diminishes their visibility.
I Bad example:
23 / 36
Introduction
8. Aesthetic and minimalist design

Architectures
I Dialogues should not contain information User Interface
Design
which is irrelevant or rarely needed. Every Tools
extra unit of information in a dialogue

competes with the relevant units of
information and diminishes their visibility.
I Bad example:
23 / 36
Introduction
9. Help users recognize, diagnose,

and recover from errors Distributed
Architectures
User Interface
Tools
I Error messages should be expressed in plain

language (no codes), precisely indicate the problem,
and constructively suggest a solution.
I Do not tell the user unexpected exception or
anything similar.
24 / 36
Introduction

Architectures
User Interface
Tools
I Error messages should be expressed in plain

anything similar.
I Good examples:
24 / 36
Introduction

Architectures
User Interface
I Error messages should be expressed in plain Tools

anything similar.
I Good examples:
24 / 36
Introduction
10. Help and documentation

Architectures
User Interface
Design
I Even though it is better if the system can be Tools
used without documentation, it may be

necessary to provide help and
documentation. Any such information
should be easy to search, focused on the
user’s task, list concrete steps to be carried
out, and not be too large.
I Good example:
25 / 36
Introduction
10. Help and documentation

Architectures
I Even though it is better if the system can be User Interface
Design
used without documentation, it may be Tools
necessary to provide help and

documentation. Any such information
should be easy to search, focused on the
user’s task, list concrete steps to be carried
out, and not be too large.
I Good example:
25 / 36
Introduction
Distributed
Architectures
User Interface
Design
Tools
Question 2
26 / 36
Introduction
Section
Distributed
Architectures
User Interface
Design
Tools
Tools
27 / 36
Introduction
Web Development Tools

Distributed
Architectures
User Interface
Design
Tools
I There are many tools that facilitates
developing web applications.
I Browser support varies between tools, most
examples will be using Firefox.
28 / 36
Introduction

Distributed
Architectures
User Interface
Design
Tools
I You are strongly advised to start using
some of the following tools, they will help
you a lot.
28 / 36
Introduction

Distributed
Architectures
User Interface
Design
Tools
I You are strongly advised to start using
some of the following tools, they will help
you a lot.
28 / 36
Introduction
Browser Web Console

Distributed
I Most browsers have a Architectures
User Interface
built-in console. Design
Tools
I The console logs
information associated
with the web page, for
example errors and
warnings related to
JavaScript, CSS and
network requests.
29 / 36
Introduction
Browser Web Console

Distributed
User Interface
Tools
I The console logs
example errors and
warnings related to
JavaScript, CSS and
network requests.
I It enables you to run

JavaScript expressions
in the web page.
29 / 36
Introduction
Browser Web Console

Distributed
User Interface
Tools
I The console logs
example errors and
warnings related to
JavaScript, CSS and
network requests.

in the web page.
I It also lets you choose elements from the web page
and have their HTML and CSS displayed.
29 / 36
Introduction
Browser Web Console

Distributed
User Interface
Tools
I The console logs
example errors and
warnings related to
JavaScript, CSS and
network requests.

in the web page.
I It also lets you choose elements from the web page
and have their HTML and CSS displayed.
29 / 36
Introduction
Browser Web Console (Cont’d)

Distributed
Architectures
User Interface
Design
Tools
I The console is opened with

Ctrl-Shift-K in Firefox and
Ctrl-Shift-J in Chrome.
30 / 36
Introduction
Firebug
Distributed
Architectures
User Interface
Design
Tools
I Firebug is a powerful plug-in to Firefox.

I In addition to console features, you can for
example debug JavaScript, mark HTML
elements, edit CSS and log network traffic.
31 / 36
Introduction
Firebug
Distributed
Architectures
User Interface
Design
Tools

I There are also many plug-ins to Firebug.
31 / 36
Introduction
Firebug
Distributed
Architectures
User Interface
Design
Tools

I There is a cross-browser version of
Firebug, written in JavaScript, that offers a
subset of the functionality for most other
browsers. 31 / 36
Introduction
Firebug
Distributed
Architectures
User Interface
Design
Tools

I There is a cross-browser version of
Firebug, written in JavaScript, that offers a
subset of the functionality for most other
browsers. 31 / 36
Introduction
Web Developer
Distributed
Architectures
I Web Developer is a powerful User Interface
plug-in to Firefox, which Design
allows you to: Tools
I edit HTML and CSS.
32 / 36
Introduction
Web Developer
Distributed
Architectures

I See the area covered
by a chosen element.
32 / 36
Introduction
Web Developer
Distributed
Architectures

I See the page in
different screen
resolutions.
32 / 36
Introduction
Web Developer
Distributed
Architectures

I See the page in
different screen
resolutions.
I Edit cookies.
32 / 36
Introduction
Web Developer
Distributed
Architectures

I See the page in
different screen
resolutions.
I Edit cookies.
I Validate HTML and
CSS.
32 / 36
Introduction
Web Developer
Distributed
Architectures

I See the page in
different screen
resolutions.
I Edit cookies.
I Validate HTML and
CSS.
I Web Developer has been

ported to Chrome.
32 / 36
Introduction
Web Developer
Distributed
Architectures

I See the page in
different screen
resolutions.
I Edit cookies.
I Validate HTML and
CSS.
I Web Developer has been

ported to Chrome.
32 / 36
Introduction
Validators
Distributed
Architectures
User Interface
Design
Tools
I There are online validators for both HTML

and CSS. Links can be found on the course
web site.
I Remember to always validate your HTML
and CSS code.
33 / 36
Introduction
Validators
Distributed
Architectures
User Interface
Design
Tools
I There are online validators for both HTML

and CSS. Links can be found on the course
web site.
I Remember to always validate your HTML
and CSS code.
33 / 36
Introduction
NetBeans
Distributed
Architectures
User Interface
Design
Tools
I There are many different IDEs for web

development, all have their pros and cons.
I NetBeans will be used for examples during
the course. Make sure to download the All
version, see image above.
34 / 36
Introduction
NetBeans
Distributed
Architectures
User Interface
Design
Tools

I Most important is that you actually use an
IDE, do not program in a text editor unless
you are really sure it is what you prefer. 34 / 36
Introduction
NetBeans
Distributed
Architectures
User Interface
Design
Tools

I Most important is that you actually use an
IDE, do not program in a text editor unless
you are really sure it is what you prefer.
34 / 36
Introduction
JSFiddle and JSLint

Distributed
Architectures
User Interface
Design
Tools
I JSFiddle is an online editor where you can

test HTML, CSS and JavaScript.
I JSLint is an online tool for testing
JavaScript code quality.
35 / 36
Introduction
JSFiddle and JSLint

Distributed
Architectures
User Interface
Design
Tools
I JSFiddle is an online editor where you can

test HTML, CSS and JavaScript.
I JSLint is an online tool for testing
JavaScript code quality.
35 / 36
Introduction
W3Schools Try It Yourself

Distributed
Architectures
User Interface
Design
Tools
I w3schools.com has excellent tutorials

for all languages covered in the course.
I All examples are presented with an online
editor where you can experiment with your
code.
36 / 36
Introduction
W3Schools Try It Yourself

Distributed
Architectures
User Interface
Design
Tools
I w3schools.com has excellent tutorials

for all languages covered in the course.
I All examples are presented with an online
editor where you can experiment with your
code.
36 / 36

Introduction of Internetapplication

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introduction of Internetapplication

Uploaded by

Copyright:

Available Formats

Introduction

Introduction to Internet Tools

User Interface Design

I We are familiar with an

I Now, the application will User Interface

be split on two tiers Tools

I Now, the application will User Interface

be split on two tiers Tools

I Now, the application will User Interface

be split on two tiers Tools

I Now, the application will User Interface

be split on two tiers Tools

I Next, we add a client User Interface

layer for communication, Tools

the net layer.

I Next, we add a client User Interface

layer for communication, Tools

the net layer.

I Next, we add a client User Interface

layer for communication, Tools

the net layer.

The MVVM Pattern

stored also on the client, User Interface

therefore we get a Tools

The MVVM Pattern

stored also on the client, User Interface

therefore we get a Tools

The MVVM Pattern

stored also on the client, User Interface

therefore we get a Tools

The MVVM Pattern

stored also on the client, User Interface

therefore we get a Tools

I Of course, we also need Tools

to store data. That is

I Of course, we also need Tools

to store data. That is

Three-Tier Architecture (Cont’d)

I In a bigger application, we would most likely

Three-Tier Architecture (Cont’d)

I In a bigger application, we would most likely

I In the latest year, there is a growing tendency to

I In the latest year, there is a growing tendency to

I In the latest year, there is a growing tendency to

interaction. Still, it is mandatory to consider User Interface

basic heuristics for user interface design. Tools

I There are some short introductory texts on

interaction. Still, it is mandatory to consider User Interface

basic heuristics for user interface design. Tools

I There are some short introductory texts on

interaction. Still, it is mandatory to consider User Interface

basic heuristics for user interface design. Tools

I There are some short introductory texts on

interaction. Still, it is mandatory to consider User Interface

basic heuristics for user interface design. Tools

I There are some short introductory texts on

interaction. Still, it is mandatory to consider User Interface

basic heuristics for user interface design. Tools

I There are some short introductory texts on

1. Visibility of system status

1. Visibility of system status

1. Visibility of system status