Technologyaware Web Application Design

1
Technology-aware Web Application Design

• Presented to
• Dr.Natheer kasawneh
• Done by
• Zaid Alomari 20050171030
• Mahmmod kasawneh 20050171023

2
Introduction

• The Web emerged as an extremely simple hypertext
  system that supports the concept of global
  linking.
• XML was the first technology to make fully
  grown hypertext systems possible, but they are
  far from being customary.
• in the relatively short history of the Web the
  focus has been on database connections and thus
  information design.

3
Contd

• Web application developers should break down Web
  applications into three logical layers which, in
  turn, are split in two halves each by the same
  principle. We distinguish between components
  (particularly Web application nodes.
• i.e., media, software components, database
  accesses), and their arrangement in a mesh.

4
The Three Layers

• (1) the presentation design, where we design
• the look and feel, and where multi-modal user
  interfaces come into play.
• (2) the interaction design, where we design the
  navigation by use of meshes, and the specific
  dialog by use of components.
• (3) the functional design, which specifies the
  core of our Web application.

5
Basic element of hypertext document
6
Contd

• As a general approach for the design of Web
  applications, it is recommended to cover all six
  parts highlighted in Figure 5-1, and to observe
  the following aspects , the following should be
  observed-
• The cultural background of all developers should
  be represented in a team, and care should be
  taken as to their integration.
• There are independent models, methods, and tools
  for the design and implementation in each of the
  six parts, but they differ considerably,
  depending on the Web application category.

7
1st Layer Presentation Design

• In a presentation design, media designers
  define the look of the structure of how
  multimedia contents are presented.
• classic HTML specified contents together with
  format instructions, links, and programs
  (scripts).
• modern presentation design follows the conceptual
  separation of a Web applications content and its
  presentation.

8
Contd

• The content of a Web application results from the
  composition of explicitly developed multimedia
  contents on the component side and implicitly
  defined contents on the mesh side.
• a good presentation design allows us to flexibly
  adapt the presentation to various cultural,
  technological, and contextual requirements.

9
Tools available in PD

• Tools available to create Web applications can be
  grouped into two categories by how they support
  the presentation design conventional page
  editors and more advanced content management
  systems.
• Note- in recent versions many page editors
  integrate simple content management system
  functions.

10
Interaction Design

• Interaction design concerns the intersection of
  the dynamic, functional, and technical elements
  of Web applications.
• Web applications divides interaction design into
  four aspects
• user interaction.
• user interface organization.
• Navigation.
• user activities.

11
User Interaction

• Applications are being published on the Web by
  simply translating their views into HTML pages,
  while introducing only few additional features,
  such as concurrent access to databases.
• As web applications became more sophisticated, an
  increasing number of roles were coupled into
  HTML( information transport, layout, user
  interaction, navigation processes ).

12
user interaction limitation

• servers need to generate a new page each time.
• applications run more slowly.
• To overcome these limitations, over the years
  ,several
• technological approaches were developed, with
  a large set of overlapping functionality.
• Example of these teqnique (ActiveX/Applets/AJAX).

13
core properties of a software application
14
User Interface Organization

• closely related to the presentation design, but
  it is determined by integration aspects rather
  than by presentation aspects.
• Web application represent a large amount of
  information. The challenge is then to suitably
  map this large number of aspects.
• Technology navigational semantics, portability
  and usability.

15
Some approaches
16
Navigation Design

• It depends on
• users access.
• navigational structure.
• Elements become nodes in the simplest case and
  the structure defines the relationships between
  these nodes such as (anchor and URL).
• the anchor is single unidirectional element.
• users cannot be sure what the possible
  consequences will be when following a link.

17
Conts

• Navigation processes are triggered by activating
  anchors in the user interface. These anchors
  should be clear and concise.
• XML standards like XPath, XPointer, and XLink,
  offer an infrastructure for general hypermedia
  functionality.
• Example multidirectional links can be used to
  link an XML document with several resources. This
  means that one single integrated link ties these
  resources, so that they can be reached in any
  sequence.

18
Navigation and Orientation

• Navigation tools should help to limit the stress
  for users. We identify three basic strategies to
  achieve this goal
• Navigation organization This strategy
  determines the entire navigational structure. We
  avoiding navigation redundancy, e.g. ( index) .
  This type of navigation is called star-shaped
  navigation.
• Orientation aid This strategy addresses the
  questions Where am I? and Where was I?.
• Link perception This strategy concerns mainly
  issues related to the association of links .

19
Structured Dialog for Complex Activities

• three categories of forward navigation
• (1) An action is triggered as a result of the
  navigation step.
• (2) The navigation calls only one additional
  page.
• (3) The navigation step leads to a node not
  directly involved in the activity (additional
  information, etc.).

20
Functional design

• Integration
• Communication Paradigms and Middleware
• Distributed Cross-corporate Web Applications

21
Interplay with Technology and Architecture

• Simple activities that retrieve information can
  be implemented by simple 3-layer architectures,
  which use templates to generate HTML outputs
  matching client requests (e.g., based on ASP.NET,
  JSP, or PHP).
• In such simple architectures, the application
  control and the application logics are embedded
  in the script source code of the templates.
• As the information to be represented becomes more
  complex It would then be better to replace
• script languages by user-defined server-side
  tags.
• use of go-to commands in early programming.
• Model-View-Controller (MVC) architecture these
  days.

22
Questions

• Web application have three logical layers.
  mention it?
• what is the aspects of interaction design for Web
  applications ?
• What is the core properties of a software
  application?
• What is the basic strategies to achieve good
  navigation?

23
Thanks