Software development with Web

Engineering
Web software engineering has been developed under various approaches. In
the knowledge era it is very important to know about the software
development process, identifying the Analysis Modeling and the Design
Modeling of web software. This process must also consider issues related to
software testing, which cannot be left out of the development process. The
web software development process must be adopted under a quality
approach, considering the appropriate methods, techniques and tools for its
generation. The software industry is increasingly demanding the creation of
websites, web pages, web applications and a variety of software in the web
environment, including virtual learning environments. It is necessary to guide
the web developer through a process that allows for the correct and complete
construction of the web software. This book provides a series of practices
and techniques to create each of the phases of web software development
through web engineering models. Formats are included to document a web-
based project and to carry out the application of analysis modeling and
design modeling.

Computer systems engineer. In 1995, he was awarded the ITCM prize for the
highest average. In 1995, she was awarded the ANFEI prize for best ITCM
engineering graduate. In 1995 Master of Science in Computer Science. In
1998, he obtained a Master's degree in information Rosa Imelda Garcia Chi
technology. In 2010, ITV teacher and postgraduate
teacher at UNID and ALIAT
Software development
with Web Engineering
Practical Guide and Techniques
Spanish academic publisher

978-3-659-65809-9
 Rosa Imelda Garcia Chi

Software development with Web

Engineering
 Rosa Imelda Garcia Chi

Software development with Web

Engineering
Practical Guide and Techniques

Spanish Academic Publishing House

Imprint / Legal notice
Bibliografische Information der Deutschen Nationalbibliothek: Die Deutsche
Nationalbibliothek verzeichnet diese Publikation in der Deutschen
Nationalbibliografie; detailed bibliografische Daten sind im Internet über
http://dnb.d-nb.de abrufbar.
Alle in diesem Buch genannten Marken und Produktnamen unterliegen
warenzeichen-, marken- oder patentrechtlichem Schutz bzw. sind Warenzeichen
oder eingetragene Warenzeichen der jeweiligen Inhaber. Die Wiedergabe von
Marken, Produktnamen, Gebrauchsnamen, Handelsnamen,
Warenbezeichnungen usw in this Werk berechtigt auch ohne kissonde
Kennzeichnung nicht zu der Annahme, dass solche Namen im Sinne der
Warenzeichen- und Markenschutzgesetzgebung als frei zu betrachten waren und
daher von jedermann benutzt werden dürften.

Bibliographic information from the Deutsche Nationalbibliothek: The Deutsche

Nationalbibliothek classifies this publication in the Deutsche Nationalbibliografie;
detailed bibliographic data are available on the Internet at http://dnb.d-nb.de.
All brand names and product names mentioned in this book are subject to
trademark, registered trademark or patent protection and are trademarks or
registered trademarks of their respective holders. The reproduction in this work of
brand names, product names, common names, trade names, product
descriptions, etc., even without particular indication, should in no way be
construed as meaning that these names may be considered without limitations
under trademark and trademark protection legislation and, therefore, may be used
by anyone.

Coverbild / Cover image: www.ingimage.com

Publisher/ Editorial:
Spanish Academic Publishing House
ist ein Imprint der/ is a brand of
ICS Morebooks! Marketing SRL
4, Industriala street, 31 00 Balti, Republic of Moldova
Email: [email protected]

Herstellung: siehe letzte Seite/

Posted in: see last page
ISBN: 978-3-659-65809-9

Copyright/Literary property &cop Rosa Imelda García Chi

Copyright/Literary property © 2017 ICS Morebooks! Marketing SRL
All rights reserved./All rights reserved. Saarbrücken 2017
Software Development
with Web
Engineering: A
Practical
Guide
and Techniques
PREPARED BY

ISC. Rosa Imelda Garcia Chi, MTI

Computer Systems Engineer
Master in Information Technology
Professor at the National Technological Institute of Mexico, Ciudad
Valles Technological Campus
Web engineering is the application of systematic, disciplined and quantifiable
methodologies to the efficient development, operation and evolution of high-
quality applications on the World Wide Web.

Web engineering is due to the unbridled growth that the Web is having, which
is causing an impact on society and the new management that is being given
to information in the different areas in which it is presented has made people
tend to carry out all their activities through this means.

Since this began to happen, the Internet became more than just a hobby and
began to be taken more seriously, since the increase in publications and
information made the Web become a challenge for software engineers
(Software Engineering), as a result of this, disciplined, systematic approaches
and methodologies were created where specific aspects of this new medium
were taken into account.
 Web Engineering - Practical Guide and
Techniques 2017
Content

Software development with Web Engineering.....................................1

Content...............................................................................................i
1 INTRODUCTION...................................................................11
2 Web Engineering Development Phases..................................14
3 General Objective(s) of Web Software Engineering.....................7
4 Phase 1. Introduction to Web Engineering..................................10
4.1.1 What is it?.....................................................................11
4.1.2 Who does it?.................................................................11
4.1.3 Why is it important?.....................................................12
4.1.4 What are the steps?.......................................................12
4.1.5 What is the product obtained?......................................12
4.2.1 What is usability?.........................................................12
4.2.2 Is usability really necessary for creating a website?....13
4.2.3 What are the 8 Golden Rules of Usability?..................13
4.3.1 Process..........................................................................15
4.3.2 Methods........................................................................16
4.3.3 Tools and technologies.................................................17
4.4.1 Define the framework...................................................18
4.4.2 Communication with the client:...................................18
4.4.3 Planning:.......................................................................19
4.4.4 Modeling:.....................................................................19
4.4.5 Construction:................................................................19
ING. ROSA IMELDA GARCIA CHI, MTI
 Web Engineering - Practical Guide and
Techniques 2017
4.4.6 Deployment:.................................................................19
4.4.7 Refinement of the framework.......................................20
5 Practice No. 1...............................................................................22
5.1.4 Methodology......................................................................23
5.1.5 Suggestions........................................................................23
6 Phase 2. Web Engineering Formulation and Planning................25
6.1.1 Formulation questions:.................................................25
6.1.2 Gathering Requirements for WebApps........................26
6.1.3 The bridge to analytical modeling................................27
6.3.1 Team building...............................................................27
6.4.1 WebApp Planning: Outsourcing..................................28
6.4.2 WebApp Planning: Web Engineering at Home...........29
7 Practice No. 2...............................................................................30
8 Phase 3. Web Engineering Analysis Modeling...........................35
8.1.1 The user hierarchy........................................................36
8.1.2 Use case development..................................................36
8.1.3 Tuning the use case model...........................................36
8.3.1 Definition of content objects........................................37
8.3.2 Content Hierarchy Relationships..................................38
8.4.1 Use Cases.....................................................................38
8.4.2 Sequence Diagram........................................................38
8.4.3 State Diagrams.............................................................39
8.4.4 UI Prototype.................................................................39

ING. ROSA IMELDA GARCIA CHI, MTI

 Web Engineering - Practical Guide and
Techniques 2017
8.7.1 Relationship analysis: key questions............................41
8.7.2 Navigation analysis......................................................41
9 Practice No. 3...............................................................................42
9.1.1 Aim...............................................................................42
9.1.2 Introduction..................................................................43
9.1.4 Methodology......................................................................46
9.1.5 Suggestions........................................................................46
10 Phase 4. Web Application Design Modeling.............................47
10.1.1 Quality design of a WebApp....................................48
10.1.2 Design goals..............................................................48
10.3.1 W3C WCAG 1.0 Guideline 3.4................................51
10.3.2 What does it mean:...................................................51
em, %, ex, px...............................................................................51
in..................................................................................................51
%.................................................................................................52
ex.................................................................................................52
px.................................................................................................52
In favor........................................................................................53
Against........................................................................................53
Against........................................................................................53
Against........................................................................................54
Against........................................................................................54
10.3.6 Workflow in interface design...........................................55

ING. ROSA IMELDA GARCIA CHI, MTI

 Web Engineering - Practical Guide and
Techniques 2017
10.5.1 Content Objects........................................................56
10.6.1 Content Architecture........................................................57
10.7.1 Navigation semantics................................................57
10.7.2 Navigation syntax.....................................................57
10.8.1 Conceptual Design....................................................59
10.8.2 Navigational Design.................................................59
10.8.3 Abstract Interface Design.........................................60
10.8.4 Implementation.........................................................61
11 Practice No. 4.............................................................................63
11.1.2 Introduction......................................................................64
12 Phase 5. Testing for IWeb.........................................................67
12.1.1 Dimensions of quality...............................................68
12.2.1 Dimensions of Quality..............................................71
13 Practice No. 5.............................................................................74
Equipment...................................................................................76
19 Bibliography..............................................................................95
More BooksW......................................................................................112

ING. ROSA IMELDA GARCIA CHI, MTI

 Web Engineering - Practical Guide and
Techniques 2017
1 INTRODUCTION

The Web Software Engineering Technical Guide (IWeb) integrates a set of

practices that guide the development and creation of a web application.

In the first section, we begin with practices related to the strata: processes,
methods, tools/technology. The IWeb Process adopts the agile development
approach that emphasizes a “lean,” rigorous engineering viewpoint leading to
incremental delivery of the system to be built. At this point the first phase of the
IWeb project is developed, which corresponds to the proposal.

In the second section, called Formulation and Planning of IWeb, it integrates

the activity of communication with the client, defines the business needs, the goals
and objectives of the project, the end user categories, the main functions and
features and the degree of interoperability with other applications. The second
phase of the IWeb project is underway.

In the third section, practices that describe the IWeb Analysis Modeling are
integrated, whose purpose is to describe the basic motivation (goals) and
objectives of a WebApps, define the user categories and point out the content and
function requirements of the WebApps to establish a basic understanding of why
the WebApps will be built, who will use it and what problems it will solve for users,
generating phase three of the project, called IWeb Analysis Modeling.

In the fourth section, the IWeb design modeling is addressed, which defines
quality in terms of ease of use, functionality, reliability, efficiency, ease of
maintenance, security, scalability and time on the market.

Interface design describes the structure and organization of the user

interface. Includes a representation of the screen template, a definition of the

ING. ROSA IMELDA GARCIA CHI, MTI 11

 Web Engineering - Practical Guide and
interaction modes, Techniques 2017of the navigation mechanisms.
and a description This also
includes graphic design, which refers to the look and feel of the Web Apps and
includes color schemes, geometric layout, text size, font and placement, the use of
graphics, and related aesthetic decisions. This unit describes design metrics for
Web engineering. At this point, the generation of phase four of the project, the
IWeb Design Modeling, is requested.

And finally, the topics related to IWeb Tests are reviewed. The goal of testing
Web Apps is to exercise each of the many dimensions of quality in order to find
errors or uncover conflicts that could lead to quality failures. Testing focuses on
content, function, structure, usability, navigability, performance, compatibility,
interoperability, capacity, and security.

Testing also incorporates reviews that occur as the Web App is designed.
This unit proposes testing the product obtained by applying Web Engineering
modeling in each of its phases. Evidence of the application of the tests is
requested.

This Technical Guide aims to integrate the different elements, criteria and
methods, and includes the basic information to solve a set of Web Software
Engineering practices of the Computer Systems Engineering Degree, which
provides the student with the ability and skill to know, understand and apply in
depth the technologies and methodologies present in the professional environment
for the development of Web applications, design and direct quality solutions based
on Web applications, as well as analyze and evaluate current Web applications
within the legal, social and economic framework.

The Guide presents a series of practices or project phases that cover each
of the skills that a web software development engineer must integrate. The

ING. ROSA IMELDA GARCIA CHI, MTI 12

 Web Engineering - Practical Guide and
practices are only aTechniques 2017 for the teacher to guide the
didactic suggestion student to
apply the knowledge acquired in each of the units.

Formats are included to develop the phases of the IWeb project, so that the
practitioner or developer integrates an integrative document at the end, showing
the application and result of each of the practices or phases.

ING. ROSA IMELDA GARCIA CHI, MTI 13

 Web Engineering - Practical Guide and
2 Techniques
Web Engineering 2017 Phases
Development

2.1 Phase 1: Introduction to Web Engineering (IWeb)

Topics 1.1 Attributes of Web-based systems and applications

1.2 Layers of WebApps Engineering
1.3 The Web Engineering Process
1.3.1 Definition of the framework
1.3.2 Refinement of the framework

2.2 Phase 2: Formulation and Planning of Web Engineering

Topics 2.1 Formulation of Web-based systems

2.1.1. Form Questions
2.1.2. Gathering Requirements for WebApps
2.1.3. The bridge to analytical modeling
2.2 .Web engineering project planning
2.3 . The Web Engineering Team
2.3.1. The actors
2.3.2. Team building
2.4 . Project management conflicts for web engineering
2.4.1.WebApps Planning: Outsourcing
2.4.2.WebApps Planning: Web Engineering at Home
2.5 Measurement for Web Engineering and WebApps
2.5.1.Measurements for Web Engineering Effort
2.5.2.Measuring business value

2.3 Phase 3: Web Engineering Analysis Modeling

Topics 3.1 Requirements for the analysis of WebApps

3.1.1 The user hierarchy
3.1.2 Use case development
3.1.3 Tuning the use case model
3.2 Analysis Modeling for WebApps
3.3 Content modeling
3.3.1 Definition of content objects
3.3.2 Relationships and content hierarchy
3.3.3 Analysis classes for WebApps
3.4 The interaction model
3.5 The functional model
3.6 The configuration model
3.7 Navigation-relationship analysis
3.7.1 Relationship analysis
3.7.2 Navigation analysis

ING. ROSA IMELDA GARCIA CHI, MTI 14

 Web Engineering - Practical Guide and
Techniques 2017
2.4 Phase 4: Web Application Design Modeling

Topics 4.1 Web engineering design topics

4.1.1 Design and quality of a WebApps
4.1.2 Design goals

4.2 IWeb Design Pyramid

4.3 WebApps Interface Design

4.3.1 Principles and guidelines of interface design
4.3.2 Interface control mechanisms
4.3.3 Workflow in interface design

4.4 Aesthetic design

4.4.1 Template issues
4.4.2 Graphic design issues

4.4.3 Content Design

4.5.1 Content Objects
4.5.2 Content Design Issues

4.6 Architectural design

4.6.1 Content Architecture
4.6.2 WebApps Architecture

4.7 Navigation design

4.7.1 Navigation semantics
4.7.2 Navigation syntax

4.8 Component level design

4.9 Hypermedia Design Patterns

4.10 Object-oriented hypermedia design method (OHM)

4.10.1 MDHOO Concept Design
4.10.2 Navigation design using MDHOO
4.10.3 Abstract interface design and implementation

4.11 Design Metrics for WebApps

ING. ROSA IMELDA GARCIA CHI, MTI 15

 Web Engineering - Practical Guide and
2.5 Phase 5: TestingTechniques
for IWeb 2017

Topics 5.1. Proof of Concepts for WebApps

5.1.1. Dimensions of quality
5.1.2. Errors within a WebApps environment
5.1.3. Testing strategies
5.1.4. Test planning

5.2. The Testing Process

5.3. Content test

5.3.1. Content Test Objectives
5.3.2. Testing the database

5.4. User Interface Testing

5.4.1. Interface Testing Strategy
5.4.2. Testing interface mechanisms
5.4.3. Testing interface semantics
5.4.4. Ease of Use Test
5.4.5. Compatibility tests

5.5. Component level testing

5.6. Navigation tests

5.6.1. Testing navigation syntax
5.6.2. Testing navigation semantics

5.7. Testing the configuration

5.7.1. Conflicts on the server side
5.7.2. Conflicts on the client side

5.8. Security testing

5.9. Performance tests

5.9.1. Objectives of performance tests
5.9.2. Load testing
5.9.3. Stress tests

ING. ROSA IMELDA GARCIA CHI, MTI 16

 Web Engineering - Practical Guide and
Techniques 2017
3 General Objective(s) of Web Software Engineering
^ Provide the student with a global and updated vision of the main fields
related to Web Engineering, as well as the main lines of research related to
this discipline.
^ Know, understand and apply in depth the technologies and methodologies
present in the professional environment for the development of Web
applications.
^ Design and direct quality solutions based on Web applications in the
professional environment.
^ Analyze and evaluate current Web applications in the professional
environment under the legal, social and economic framework

3.1 Prerequisites for developing software with web engineering

^ Applies models, techniques and tools for each of the stages of the traditional
and object-oriented software development life cycle
^ Learn about Advanced Database Systems
^ Use some modeling language (UML)
^ Learn about advanced web programming
^ Identify different Technological Architectures
^ Programming.
^ Operating Systems.
^ Distributed Systems.
^ Software Engineering.
^ Computer Engineering.
^ Information Systems.
^ Information Technologies.
^ Information Technology Management
^ Business Administration and Management.
^ Service-oriented systems.

ING. ROSA IMELDA GARCIA CHI,MTI I 7

 Web Engineering - Practical Guide and
3.2 Specific skills toTechniques
be developed 2017
by phase of Web Engineering

3.2.1.1 Specific Competence of Phase 1

^ Develop the ability to identify the attributes that exist in most WebApps; as
well as the layers of WebApp engineering and the Web Engineering
process.

3.2.1.2 Specific Competence of Phase 2

^ Develop the ability to formulate Web-based systems and applications; also

visualize the planning of Web engineering projects considering the Web
engineering team, project management conflicts and measurement for Web
engineering and WebApps.

3.2.1.3 Specific Competence of Phase 3

^ Develop the skill of requirements formulation, gathering, and analysis

modeling by describing the basic motivation (goals) and objectives for the
WebApps, defining the user category, outlining the content and function
requirements for the WebApps, establishing a basic understanding of why
the WebApps will be built, who will use it, and what problem(s) it will solve
for users.

3.2.1.4 Specific Competence of Phase 4

^ Develop the ability to apply the quality of a WebApps in terms of ease of use,
functionality, reliability, efficiency, ease of maintenance, security and
scalability and time in the market achieving a good design with simplicity,
consistency, identity, robustness, navigability and visual appearance.

3.2.1.5 Specific Competence of Phase 5

^ Develop the ability to discover errors in the content, function, usability,

ING. ROSA IMELDA GARCIA CHI, MTI 8

 Web Engineering - Practical Guide and
Techniquescapacity,
navigability, performance, 2017 and security of WebApps by applying a
testing strategy that encompasses both reviews and executable tests
throughout the Web engineering process.

ING. ROSA IMELDA GARCIA CHI, MTI 9

 Web Engineering - Practical Guide and
Techniques 2017
PHASE 1 TECHNICAL SCENT

Introduction to the

Web engineering
4 Phase 1. Introduction to Web Engineering

4.1 Web Engineering

ING. ROSA IMELDA GARCIA CHI,MTI I 10

 Web Engineering - Practical Guide and
Techniques 2017
The World Wide Web and the Internet that powers it are arguably the most
important developments in the history of computing. These technologies have
brought everyone into the computer age and have become an integral part of daily
life in recent days.

Figure 1 Web Engineering Model. Source: (PRESSMAN, 2006)

4.1.1 What is it?
Web-based systems and applications offer a comprehensive array of content and
serve a broad population of end users. Web engineering is the process of creating
high-quality WebApps. Web Engineering is not a perfect clone of Software
Engineering, but it uses many of its core concepts and principles.

4.1.2 Who does it?

WebApps are created by web engineers and non-technical content developers.

ING. ROSA IMELDA GARCIA CHI,MTI I 11

 Web Engineering - Practical Guide and
Techniques 2017
4.1.3 Why is it important?
As WebApps become more integrated into business strategies for small and large
companies (e.g. e-commerce), the need to build reliable, practical and adaptable
systems grows in importance.

4.1.4 What are the steps?

Like any other engineering discipline, Web Engineering applies a generic approach
that is softened by specialized strategies, techniques and methods. The IWeb
process begins with a formulation of the problem to be solved with the WebApps.
The system is built with specialized technologies and tools associated with the
Web.

4.1.5 What is the product obtained?

Many IWeb work products are produced. The end result is the operational
WebApps.

4.2 Attributes of Web Systems and Applications

4.2.1 What is usability?

Techniques that help humans perform tasks in computer graphical environments.

Three very important concepts. Work is done for human beings who want to
perform a task in a simple and efficient way and in this particular case, they must
do it in front of a computer in a graphical environment, the Web.

Usability helps this task to be carried out in a simple way by analyzing human
behavior and the steps necessary to execute the task effectively. It may sound like
a bit of an industrial job, but when we refer to the term ^^^^^^^^ ^^ it refers to
searching for a program you want to watch on TV, looking up information about a
favorite soccer team, or buying a book on martial arts.

ING. ROSA IMELDA GARCIA CHI,MTI I 12

 Web Engineering - Practical Guide and
Techniques 2017
4.2.2 Is usability really necessary for creating a website?
Whether your website is a portal or a personal page, don't forget that people who
visit your website are basically looking for something. Keeping it simple is up to
you, but I'm sure that together we can make the Internet a better place where
people don't feel lost or misplaced or just plain disappointed.

4.2.3 What are the 8 Golden Rules of Usability?

Maybe tomorrow there will be 10 rules.

1. On the Internet, the user is the boss.

This means that without users your page dies, so you better take care of them and
give them what they ask for, otherwise you will be left alone.

2. On the Internet, quality is based on speed and reliability.

On the Internet, it is more important that your website is fast than pretty, reliable
than modern, simple than complex, direct.

3. Security.

If in the real world we sometimes find it hard to trust the bank on the corner,
imagine how people feel on the Internet when they come to your site. Make sure
everything runs smoothly so people can trust your site.

4. Trust is something that is hard to gain and is lost with a bad link.

This means that with the current competition on the Internet, you cannot lose a
single visitor by having a poorly made link. It is better to go with something simple
and gradually complicate it, than to go all out and see “what happens.” Versions
1.0 are good as long as what is in place is well established and generates
confidence. Little by little and with user feedback, you will be able to make the

ING. ROSA IMELDA GARCIA CHI,MTI I 13

 Web Engineering - Practical Guide and
Techniques 2017
page more complex. But be sure before you risk.

5. If you want to make a decent page, simplify, reduce, optimize.

People aren't going to learn your site no matter how much you insist, so at least
keep it simple, reuse as many elements as you can, so that users feel comfortable
and don't get lost every time they need to find something on your site.

6. Put the conclusions at the beginning.

The user will feel more comfortable if he sees the goals at the beginning. This way
you won't have to search for what you need and you'll waste less time completing
your task. If they complete their task in less time, they will feel comfortable and
may explore your site or recommend it to a friend.

7. Don't waste people's time with things they don't need.

Be careful when cross-promoting, if you do it at least do it carefully. Make sure that

the selection of products to be cross-listed is consistent and you don't want to "sell
everything" on all pages. As the user progresses through the navigation, try to
leave more free space. It may happen that when you are about to buy something
you see an offer that distracts you and you lose that sale.

8. Good content.

Writing well for the Internet is an art. But by following the basic rules of (1) putting
the conclusions at the beginning, (2) writing about 25% of what you would put on
paper, you can go a long way.

(3) Reading on a screen is a challenge, so for web text, reduce and simplify as
much as possible.

9. Content evaluation.

ING. ROSA IMELDA GARCIA CHI,MTI I 14

 Web Engineering - Practical Guide and
Techniques 2017
Unlike application software that continually evolves, Web applications involve a
continuous process. Continuous and detailed monitoring of implicit information in
the Web application. All this makes the web application serve the end user.

4.3 Layers of Web Engineering

Web application development incorporates specialized process methods, software

engineering methods adapted to the development characteristics of Web
applications and a set of important technologies that allow for their correct
development.

The processes, methods, and technologies (tools) provide a layered approach to

the IWeb that is conceptually identical to the layers of software engineering.

4.3.1 Process
Web process models adopt the agile development philosophy. Agile development
emphasizes a rigorous development approach that incorporates rapid
development cycles.

It is important to recognize that the problem still needs to be analyzed, a design

needs to be developed, implementation needs to proceed in an incremental
fashion, and an organized testing approach needs to be initiated. Such framework
activities should be defined within a process that:

^ Embrace change: Encourage creativity and independence from the

development team and strengthen user interaction.
^ Build systems that utilize small development teams.
^ Emphasize evolutionary or incremental development by using short
development cycles.

ING. ROSA IMELDA GARCIA CHI,MTI I 15

 Web Engineering - Practical Guide and
Techniques 2017
4.3.2 Methods
Web Application Methods encompass a set of technical tasks that enable the Web
engineer to understand, characterize, and then build a high-quality Web
application. IWeb methods can be categorized as follows:

4.3.2.1 Communication methods:

Communication methods: Define the approach with which communication is
facilitated between: client and developer.

Communication techniques are important during requirements gathering.

4.3.2.2 Requirements analysis methods:

They provide a basis for understanding the content that will be delivered to the
WebApps, the functionality it will provide to the end user, and the modes of
interaction each class of user will require while navigating through the WebApps.

4.3.2.3 Design methods:

They cover a series of design techniques that address content, application and
information architecture, as well as the interface design and navigation structure of
WebApps.

4.3.2.4 Test method:

They incorporate formal technical reviews of both content and the design model
and a wide variety of testing techniques that address conflicts at the component
level.

Navigation testing, usability testing, security testing, and configuration testing.

4.3.3 Tools and technologies

Technologies encompass a broad set of content description and modeling
languages e.g. HTML, VRML, XML, etc. programming languages e.g. Java, PHP,

ING. ROSA IMELDA GARCIA CHI,MTI I 16

 Web Engineering - Practical Guide and
Techniques 2017
JSP, etc. component-based development resources e.g. CORBA, COM,
ActiveX, .NET, etc. browsers, multimedia tools, site auditing tools, database
connectivity tools, security tools, servers and server utilities, and site
administration and analysis tools.

4.4 The Web Engineering Process

In a process as fast as Web Engineering, where development times and product

life cycles are so short, is the effort required for management worth it? The answer
is that given its complexity, it is essential.

Among the aspects that add difficulty to management we highlight: - high

percentage of contracting to third parties, - development includes a wide variety of
technical and non-technical staff working in parallel, - the development team must
master such diverse aspects as component-based software, networks, architecture
and navigation design, graphic and interface design, languages and Internet
standards, Web application testing, etc., which makes the process of searching for
and hiring staff arduous.

4.4.1 Define the framework

The effectiveness of any engineering process depends on its adaptability. That is,
the organization of the project team, the modes of communication among team
members, the engineering activities and tasks to be performed, the information to
be collected and created, and the methods used to produce a high-quality product
must be tailored to the people doing the work, the project timeline and constraints,
and the problem to be solved.

Before defining a process framework for the IWeb it must be recognized that:

^ WebApps are often delivered incrementally.

^ Changes will occur frequently.

ING. ROSA IMELDA GARCIA CHI,MTI I 17

 Web Engineering - Practical Guide and
Techniques 2017
^ Deadlines are short.

4.4.2 Communication with the client:

Communication with the client is characterized by two major tasks: business
analysis and formulation. Business analysis defines the business-organizational
context for WebApps and other business applications.

Formulation is a requirements gathering activity that involves all participants.

4.4.3 Planning:
The project plan for the WebApp increase is created. The plan consists of a
definition of tasks and a schedule of deadlines regarding the period established for
the development of the project.

4.4.4 Modeling:
Conventional software engineering analysis and design tasks are adapted to
WebApp development, mixed, and then merged into an IWeb modeling activity.

The intent is to develop rapid analysis and design models that define requirements
and at the same time represent a WebApp that will satisfy them.

4.4.5 Construction:
IWeb tools and technology are applied to build the WebApp that has been
modeled. Once the WebApp increment is built it goes through a series of quick
tests to ensure that any errors in the design are discovered.

4.4.6 Deployment:
The WebApp is configured for your operating environment, delivered to end users,
and then an evaluation period begins. Feedback on the assessment to carry out
the respective processes.

ING. ROSA IMELDA GARCIA CHI,MTI I 18

 Web Engineering - Practical Guide and
Techniques 2017

Figure 2 Construction phase of a Web application. Source: (PRESSMAN, 2006)

4.4.7 Refinement of the framework

The definition of engineering tasks required to refine each framework activity is left
to the discretionary judgment of the Web engineering team.

It is important to note that tasks associated with the IWeb framework activity may
be modified, removed, or extended based on the characteristics of the problem,
the product, the project, and the people on the Web engineering team.

4.5 Best practices in Web Engineering.

• Take time to understand the business needs and product goals, even if the
details of the WebApp are vague.
• Describe how users will interact with the WebApp using a scenario-based
approach.
• Develop a project plan, even if it is very brief

• Spend some time modeling what you will build.

• Review the consistency and quality of the models.

ING. ROSA IMELDA GARCIA CHI,MTI I 19

 Web Engineering - Practical Guide and
Techniques 2017
• Use tools and technology that allow the system to be built with as many
reusable components as possible.
• Do not rely on previous users to debug the WebApp

ING. ROSA IMELDA GARCIA CHI,MTI I 20

 Web Engineering - Practical Guide and
Techniques 2017
5 Practice No. 1

5.1 Name of the practice: Phase 1 Business Plan for Project

IWeb
Define the Business Plan as a proposal for
5.1.1 Objective
developing a Web Engineering Project.

Points to consider in a Plan

5.1.2 Introduction
Businesses are:

1. Executive summary
2. Product description and distinctive value
3. Potential market
4. Competence
5. Business model and financial plan
6. Management team and organization
7. Development status and implementation plan
8. Strategic alliances
9. Marketing and sales strategy
10. Main risks and exit strategies

5.1.3 Material and ^ Computer with Internet Access

Equipmen
t ^ Storage device
^ IT Valles Moodle Platform
^ Word Processor pe Word
1. Form a work team with

ING. ROSA IMELDA GARCIA CHI,MTI I 21

 Web Engineering - Practical Guide and
Techniques 2017
5.1.4 Methodology
various roles
2. Download the format to prepare phase 1 (Annex
No. 1). It is available on platforms such as
www.slideshare.net, www.issuu.com,
www.googledocs.com, www.scribd.com.
3. Resolve each of the points proposed in the project
phase
4. Prepare it in digital format
5. Upload it to the Virtual Learning Platform

You can review various relevant materials

5.1.5 Suggestions
to the preparation of Business Plans.

In Software Engineering we learned about Business

Modeling, which can be applied in this phase of the
project.

Similarly, the Project Management subject provides

elements to generate a Business Plan under the PMBook
scheme, which can be applied to the initial phase of the
project.

ING. ROSA IMELDA GARCIA CHI,MTI I 22

 Web Engineering - Practical Guide and
Techniques 2017

TECHNICAL OLÍA CE PHASE 2

Formulation and Planning of Web

Engineering

ING. ROSA IMELDA GARCIA CHI,MTI I 23

 Web Engineering - Practical Guide and
Techniques 2017
6 Phase 2. Web Engineering Formulation and Planning

6.1 Formulation of Web-based systems

The formulation focuses on the big picture of business needs and objectives and
related information. Clients and Web engineers want to define the required
content, discuss specific functionality, specific features, and identify how end users
will interact with the WebApp – all of this is requirements formulation and
gathering.

6.1.1 Formulation questions:

At this stage it is good to ask and answer the following:

^ What is the main motivation for WebApps?

^ What are the objectives that WebApps must satisfy?
^ Who will use the WebApp?

ING. ROSA IMELDA GARCIA CHI,MTI I 24

 Web Engineering - Practical Guide and
Techniques 2017
If we have a correct answer to these questions, they imply specific goals for the
website.

In general, two categories of goals are identified:

Informational goals: indicate an intention to provide specific information content to

the end user.

Applicable goals: indicate the ability to perform some task within the WebApp.

6.1.2 Gathering Requirements for WebApps

The overall objectives of requirements gathering proposed for software
engineering remain unchanged. Adapted for WebApps, these objectives become:

^ Identify content requirements.

^ Identify functional requirements.
^ Define interaction scenarios for different classes of users.
The following steps in requirements gathering are directed toward achieving these
goals.

1. Ask customers to define a user category and describe each category.

2. Communicate with clients to define basic requirements for WebApps.

3. Analyze the information collected and use the information to follow up with
customers.

4. Define use cases that describe interaction scenarios for each class of user.

6.1.3 The bridge to analytical modeling

All information collected and processed is modeled using use cases and UML
notation.

ING. ROSA IMELDA GARCIA CHI,MTI I 25

 Web Engineering - Practical Guide and
Techniques 2017
6.2 Web Engineering Project Planning
Given the immediacy of WebApps it is reasonable to ask: do you really need to
spend time planning and managing a WebApp effort? Shouldn't WebApps just be
allowed to get involved naturally, with little or no explanatory management?

6.3 The Web Engineering Team

A successful web engineering team mixes a wide variety of talents that must work
as a team in a high-pressure project environment. Timelines are short, changes
are inexorable and technology continues to change. Building a successful team is
no easy task.

^ The Actors
^ Developers/Content Providers
^ Web Editors
^ Web Engineer
^ Business domain experts
^ Support Specialist
^ Administrator
6.3.1 Team building
For team building it is particularly relevant when an organization forms an IWeb
team

^ A set of team guidelines should be established.

^ Strong leadership is a must
^ Respect for individual talents is crucial
^ Each team member must understand each other
^ It's easy to start, the hard part is keeping the spirit going.
6.4 Project management conflicts for web engineering
Once the formulation has been carried out and the basic requirements of the
WebApp have been identified, the company must choose one of two Web

ING. ROSA IMELDA GARCIA CHI,MTI I 26

 Web Engineering - Practical Guide and
Techniques 2017
engineering options:

^ The WebApp is outsourced: Web engineering is carried out by a third-party

provider with experience, talent and resources that the company does not
have.
^ WebApps are developed in-house by Web engineers who are employees of
the company.

6.4.1 WebApp Planning: Outsourcing

In this case a business (the client) requests a fixed price to develop the WebApp
from one or more vendors, evaluates competitive pricing, and then selects a
vendor to do the work. But what is the contracting organization looking for? How is
the competence of a WebApp provider determined? How do you know if a quote is
reasonable?

What degree of planning, work schedule, and risk assessment can be expected as
an organization embarks on an effort to develop a large WebApp?

These questions are not always easy to answer, but some guidelines are worth
considering.

6.4.1.1 Selection of candidate subcontractors:

In order to select candidate web developers, the contractor must perform some
mandatory tasks:

^ Interview former clients to determine the Web vendor's professionalism,

ability to meet deadlines and cost commitments, and ability to communicate
effectively.
^ Determine the name of the subcontracting company's chief web engineer(s)
to search for past successful projects.

ING. ROSA IMELDA GARCIA CHI,MTI I 27

 Web Engineering - Practical Guide and
Techniques 2017
^ Carefully examine examples of the subcontractor's work that are similar in
look and feel to the WebApp to be contracted.

6.4.2 WebApp Planning: Web Engineering at Home

The following steps are recommended for small to moderate-sized iWeb projects.

^ Understand the scope, dimensions of change and constraints of the project.

^ Define an incremental project strategy
^ Conduct risk analysis
^ Develop a quick estimate
^ Choose a set of tasks
^ Set a schedule
^ Define project tracking mechanisms
^ Establish a change management approach
6.5 Mediation for Web Engineering and WebApps
Software mediation provides a basis for improving the software process, which
increases the accuracy of project estimates, increases project traceability, and
improves software quality.

Measurements have three main goals:

^ Provide a quality indicator for WebApps from a technical point of view.

^ Provide a basis for effort estimation

^ Provide an indication of the success of the WebApp from a business
perspective.
7 Practice No. 2

7.1 Practice Name: Phase 2 Formulation and Planning IWeb

ING. ROSA IMELDA GARCIA CHI,MTI I 28

 Web Engineering - Practical Guide and
Techniques 2017
Develop the Formulation and Planning of a
7.1.1 Aim
Web Engineering Project

ING. ROSA IMELDA GARCIA CHI,MTI I 29

 Web Engineering - Practical Guide and
Techniques 2017

7.1.2 Introduction

Web engineering formulates processes based

on the underlying need of the web application,
the features and functions desired by users, and
the scope of the development effort.

IWeb outlines the guidelines for things that need

to be defined to establish a work plan, consider
risks, define a program, and establish
mechanisms to monitor the progress of the
research.

From IWeb there is an agile process of work

products, so formulation and planning must be
cohesive, but the documents must be written.

Information formulation and planning should be

reviewed with stakeholders to ensure that
inconsistencies and omissions are identified in a
timely manner.

ING. ROSA IMELDA GARCIA CHI,MTI I 30

 Web Engineering - Practical Guide and
Techniques 2017

7.1.3 Material and ^ Computer with Internet Access

Equipment ^ IT Valles Moodle Platform
^ Word Processor pe Word
^ Microsoft Visio or Concept Draw or DIA

7.1.4 Methodology

1. Form a work team with diverse roles

2. Download the format to prepare phase 2
(Annex No. 2). It is available on platforms
such as www.slideshare.net,
www.issuu.com, www.googledocs.com,
www.scribd.com.
3. Resolve each of the points proposed in
the project phase
4. Prepare it in digital format
5. Upload it to the Virtual Learning Platform

ING. ROSA IMELDA GARCIA CHI,MTI I 31

 Web Engineering - Practical Guide and
Techniques 2017

7.1.5 Suggestions

To develop the Formulation and Planning of a Web

Engineering project, it is necessary to know and master
aspects of the Unified Modeling Language (UML),
specifically use case diagrams and class diagrams.

The use of software development tools such as

diagrammers or CASE tools is suggested. Some of these
tools are: Microsoft Visio, Concept Draw or DIA.

ING. ROSA IMELDA GARCIA CHI,MTI I 32

 Web Engineering - Practical Guide and
Techniques 2017

TECHNICAL OLÍA CE PHASE 3

Web Engineering Analysis Modeling

ING. ROSA IMELDA GARCIA CHI,MTI I 33

 Web Engineering - Practical Guide and
Techniques 2017
8 Phase 3. Web Engineering Analysis Modeling.

8.1 Requirements for WebApp analysis

Requirements analysis for WebApps covers three major tasks:

• Formulation
• Gathering Requirements
• Analysis modeling

ING. ROSA IMELDA GARCIA CHI,MTI I 34

 Web Engineering - Practical Guide and
Techniques 2017
8.1.1 The user hierarchy
End-user categories are identified as part of the requirements formulation and
gathering tasks. User categories are relatively limited and do not require a UML
representation. However, when the number of user categories grows, it is
sometimes advisable to develop a user hierarchy.

8.1.2 Use case development

Use cases are developed for each user category described in the user hierarchy.
In the context of Web engineering, the use case itself is relatively informal: a
narrative paragraph describing a specific interaction between the user and the
WebApp.

8.1.3 Tuning the use case model

As use case diagrams are created for each user category, a top-down view of the
externally observable WebApp requirements is developed.

Each package is assessed to ensure it is:

^ Understandable.
^ Cohesive
^ Loosely coupled
^ Hierarchically superficial.
Since activity analysis and modeling are iterative activities.

8.2 Analysis Modeling for WebApps

It is based on the information contained in the use cases developed for the
application. The content that the WebApp will present is identified and the
functions to be developed are extracted from the use case descriptions. Finally,
the specific implementation requirements must be developed so that the

ING. ROSA IMELDA GARCIA CHI,MTI I 35

 Web Engineering - Practical Guide and
Techniques 2017
environment and infrastructure supporting the WebApps can be built.

Four analysis activities, each with its contribution to the creation of a complete
analysis model, are:

^ Content analysis
^ Interaction analysis
^ Function analysis
^ Configuration analysis

The model itself contains structural and dynamic elements. Structural elements
identify the types of analysis and content objectives required to create a WebApp
that meets customer needs.

The dynamic elements of the analysis model describe how the structural elements
interact with each other and with end users.

8.3 The content model

The content model contains structural elements that provide important insight into
the content requirements for a WebApp. It also includes all types of analytics: user-
visible entities that are created or manipulated as the user interacts with the
WebApp.

Like other elements of the analysis model, the content model is derived from a
careful examination of the use cases developed for the WebApp.

8.3.1 Definition of content objects

A content object can be a textual description of a product, an article describing a
news event.

ING. ROSA IMELDA GARCIA CHI,MTI I 36

 Web Engineering - Practical Guide and
Techniques 2017
Content objects are extracted into use cases by examining the scenario
description for direct and indirect references to the content.

8.3.2 Content Hierarchy Relationships

The content model may contain entity relationship diagrams or data trees that
outline the relationships between content objects or the content hierarchy
maintained by a WebApp.

8.4 The interaction model

This interaction model comprises four elements:

^ Use cases
^ Sequence diagrams
^ State diagrams
^ User Interface Prototype
8.4.1 Use Cases
A use case is modeled for all the processes that the WebApp must carry out.
Processes are described within the use case by a textual description or a
sequence of executed steps.

Activity Diagrams can also be used to model scenarios graphically. Once the
application behavior is captured in this way, use cases are examined and
extended to show what objects interrelate to make this behavior occur.

8.4.2 Sequence Diagram

A Sequence diagram shows an interaction ordered according to the temporal
sequence of events. In particular, it shows the objects participating in the
interaction and the messages they exchange ordered according to their sequence
in time.

The vertical axis represents time, and on the horizontal axis the objects and actors

ING. ROSA IMELDA GARCIA CHI,MTI I 37

 Web Engineering - Practical Guide and
Techniques 2017
participating in the interaction are placed, without a predetermined order. Each
object or actor has a vertical line, and messages are represented by arrows
between the different objects. Time flows from top to bottom. Labels (such as time
constraints, action descriptions, etc.) can be placed either on the left margin or
next to the transitions or triggers they refer to.

8.4.3 State Diagrams

The real-time behavior of each class that has dynamic and meaningful behavior is
modeled using a State Diagram. The activity diagram can also be used here, this
time as an extension of the state diagram, to show the details of the actions carried
out by objects in response to internal events. The activity diagram can also be
used to graphically represent the actions of class methods.

8.4.4 UI Prototype
Some proposals are based on obtaining prototypes from the definition of
requirements that, without having all the functionality of the system, allow the user
to get an idea of the structure of the system's interface with the user. This
technique has the problem that the user must understand that what he is seeing is
a prototype and not the final system.

Since WebApp development tools are abundant and functionally powerful, it is best
to prototype the interface using such tools.

8.5 The functional model

This functional model addresses two processing elements of the WebApp and
each represents a different graph of the procedural abstraction:

^ Functionality observable with respect to the user and delivered to the end
user of the WebApp.

ING. ROSA IMELDA GARCIA CHI,MTI I 38

 Web Engineering - Practical Guide and
Techniques 2017
^ Operations within analysis classes that implement behaviors associated with
the class.

User observable functionality includes any processing functions that the user
directly indicates. For example, a financial website may implement a variety of
financial functions.

8.6 The configuration model

WebApps should be designed and implemented to accommodate a variety of
environments, both server-side and client-side. The server hardware and operating
system environment must be specified. If WebApps must access a large database
or interoperate with existing corporate applications on the server side, appropriate
interfaces, communication protocols, and information must be specified.

WebApps must be extensively tested for each browser configuration that is

specified as part of the configuration model.

8.7 Navigational relationship analysis (RNA)

Relationship-navigation analysis provides a series of analysis steps that strive to
identify relationships between the elements discovered as part of building the
analysis model.

The RNA approach is organized into five steps:

^ Analysis of the participants

^ Analysis of the elements
^ Analysis of relationships
^ Navigation analysis
^ Evaluation analysis.

ING. ROSA IMELDA GARCIA CHI,MTI I 39

 Web Engineering - Practical Guide and
Techniques 2017
8.7.1 Relationship analysis: key questions
This analysis asks a series of questions that will help us better understand the
relationship.

8.7.2 Navigation analysis

One of the most important aspects of information systems in WebApps is
navigation. The vast majority of methodological proposals for WebApp systems
highlight this aspect by offering models that allow it to be designed and
implemented while ensuring the quality of the result.

However, analyzing these models and techniques and looking at the results of
different comparative studies, it can be observed that this aspect, in most
proposals, is dealt with only in the last phases of the life cycle, mainly in design
and implementation.

Navigation mechanisms are defined as part of the design. At this stage,

developers need to consider global navigation requirements.

ING. ROSA IMELDA GARCIA CHI,MTI I 40

 Web Engineering - Practical Guide and
Techniques 2017
9 Practice No. 3

9.1 Practice Name: Phase 3 IWeb Analysis Modeling

Develop Phase 3 of the Analysis Modeling

9.1.1 Aim
Web Engineering using the Unified Modeling Language
with the help of Software Tools.

ING. ROSA IMELDA GARCIA CHI,MTI I 41

 Web Engineering - Practical Guide and
Techniques 2017
Web Application Analysis focuses on
9.1.2 Introduction
three areas:

^ the information or content that is presented

^ the end-user functions to be executed
^ web application behaviors that occur in response to
user actions.

Network engineers, content specialists, and stakeholders

develop the analysis model. Model analysis enables the
Web engineering team to create a concrete
representation of the Web application requirements.

Analysis Modeling of a web application focuses on four

fundamental aspects of the problem:

^ contents
^ interaction
^ function
^ settings
The product of the IWeb model analysis work is a set of
UML diagrams and a descriptive text describing the
results of the four analyses performed. Analysis Work
Products are reviewed for correctness, completeness,
and consistency.

Conditions that favor the analysis of models

^ Large or complex WebApps to be built

ING. ROSA IMELDA GARCIA CHI,MTI I 42

 Web Engineering - Practical Guide and
Techniques 2017
^ Large number of interested parties
^ A large number of Web engineers and other
contributors
^ Web application goals and objectives will impact the
bottom line of business
^ Web application success will have a great influence
on the success of the company

Web Application Analysis Task Requirements

Formulation

^ Identify goals and objectives for the web application

^ Define user categories and create the user
hierarchy

Gathering Requirements

^ Communication between the Web team and

stakeholders intensifies
^ Content and functional requirements are listed
Interaction scenarios (use cases) are developed

9.1.3 Material an ^ Computer with Internet Access

d ^ IT Valles Moodle Platform
Equipment
^ Word Processor pe Word
^ Microsoft Visio or Concept Draw or DIA

ING. ROSA IMELDA GARCIA CHI,MTI I 43

 Web Engineering - Practical Guide and
Techniques 2017
1. Form a work team with
9.1.4 Methodology
various roles
2. Download the format to prepare phase 3 (Annex
No. 3). It is available on platforms such as
www.slideshare.net, www.issuu.com,
www.googledocs.com, www.scribd.com.
3. Resolve each of the points proposed in the project
phase
4. Prepare it in digital format
5. Upload it to the Virtual Learning Platform

For this phase of the project it is important

9.1.5 Suggestions
having completed and accredited phase 1 and phase 2 of
the project. To Model the Analysis, the use case
diagrams and the UML class diagrams generated in
phase 1 of the project are required.

This phase also requires the use of UML diagramming

tools.

ING. ROSA IMELDA GARCIA CHI,MTI I 44

 Web Engineering - Practical Guide and
Techniques 2017
TECHNICAL SCENT OF PHASE 44

Web Application Design Model

10 Phase 4. Web Application Design Modeling.

10.1 Design Topics for Web Engineering

When applying design within the context of Web engineering, both generic and
specific issues must be considered. The design must be very specific.

ING. ROSA IMELDA GARCIA CHI,MTI I 45

 Web Engineering - Practical Guide and
Techniques 2017
10.1.1 Quality design of a WebApp
In practice, the quality of websites has been assessed in an “ad hoc” manner,
based on common sense and the experience of developers. The study of the
quality of products and development processes for the Web is very recent and
there are still no widely disseminated evaluation methods for this type of
environment.

Therefore, there is a great need for effective methodologies for obtaining quality
Web applications. Currently, there are two strands of development methodologies
for the Web: the Software Engineering community and the Hypermedia
community. These methodologies, however, lack metrics that can be applied to
intermediate models (e.g. Object Model, Navigational Model) used in the Web-
oriented development process.

Other quality web design features include:

• Security
• Availability
• Scalability
• Time on the market
10.1.2 Design goals
One of the design goals of a WebApp is to cover the following:

^ Simplicity
^ Consistency
^ Identity
^ Robustness
^ Navigability
^ Visual appearance

ING. ROSA IMELDA GARCIA CHI,MTI I 46

 Web Engineering - Practical Guide and
Techniques 2017
^ Compatibility
10.2 IWEB Design Pyramid
The design leads to a model that contains an appropriate mix of aesthetics,
content and technology.

Figure 3 shows the Web engineering design pyramid.

ING. ROSA IMELDA GARCIA CHI,MTI I 47

 Web Engineering - Practical Guide and
Techniques 2017

Figure 3 IWeb Design Modeling. Source: (PRESSMAN, 2006)

10.3 WebApp Interface Design

Every user interface must have the following characteristics:

• Easy to use
• Easy to learn
• Easy to navigate
• Intuitive
• Consistent
• Efficient
• Error free
• Functional
It must offer the end user a satisfactory and rewarding experience.
The essential principles and guidelines for the design of a WebApp can be
mentioned:

ING. ROSA IMELDA GARCIA CHI,MTI I 48

 Web Engineering - Practical Guide and
Techniques 2017
^ Fair use
^ Flexibility in use
^ Simple and intuitive use
^ Perceptible information
^ Error tolerance
^ Reduced physical effort
^ Size and space to approach and use
At some point in our lives, any of us may experience a physical transition. Whether
it is a temporary disability, such as a broken bone, or a permanent handicap, we
will be faced with change.

The simple process of aging leads us to become dependent on others. Universal

design allows us to navigate these changes and continue to enjoy equal
opportunities, self-determination and quality of life.

10.3.1 W3C WCAG 1.0 Guideline 3.4

Use relative rather than absolute units when specifying values in language markup
attributes and style sheet property values.
10.3.2 What does it mean:
The layout, presentation and text content of a page must be able to adapt to the
interface used by the user, without overlapping or losing information in the event of
resizing (enlarging or reducing the display and/or characters).

em, %, ex, px

Relative units

in

the size ('font-size') of the relevant font

H1 {margin: 0.5em}

ING. ROSA IMELDA GARCIA CHI,MTI I 49

 Web Engineering - Practical Guide and
Techniques 2017
%

value relative to the value of the parent element

P {line-height: 140%}

ex

the 'x-height' of the relevant font

H1 {margin: 1ex}

px

pixels, related to visual devices

P { font-size: 14px }

10.3.3 Design techniques

10.3.3.1 Fixed design

Design that uses absolute size dimensions: inches (in), centimeters (cm),
millimeters (mm), points (pt), picas (pc). Its effect is to lock the size of an element
to a fixed size.

10.3.3.2 Liquid (or fluid) design

Design that uses percentage (%) as a unit of measurement. Its effect is the
adaptation of the elements and their arrangement taking advantage of the entire
screen width that will be calculated based on the resolution of the device used.

10.3.3.3 Elastic (or flexible) design

Design that uses em as a unit of measurement. Its effect is to adapt the width of
the elements and their arrangement based on the text size configured by the user.

ING. ROSA IMELDA GARCIA CHI,MTI I 50

 Web Engineering - Practical Guide and
Techniques 2017
10.3.3.4 Hybrid design
Design that uses absolute, percentage, and em units of measurement.

10.3.4 (More) accessible design?

10.3.4.1 Fixed design

In favor

Designers enjoy absolute control in determining the size and positioning of

elements. It promotes readability.

Against

No screen adaptation: the characteristics of the monitor used by the user are not
known a priori. “Lock” the page according to the bias of the paper.

10.3.4.2 Liquid design In favor

Presenting more information on the screen and reducing the scroll effect.
Adaptation to the environment.

Against

Causes very long lines of text in case of very high screen resolutions: difficulty in
reading.

10.3.4.3 Elastic design In favor

Designers “control” the size and arrangement of elements. Avoid overlapping

elements.

Against

Increasing the text size can cause the horizontal scroll bar to scroll in certain

ING. ROSA IMELDA GARCIA CHI,MTI I 51

 Web Engineering - Practical Guide and
Techniques 2017
layouts, making it difficult to read.

10.3.4.4 Hybrid design In favor

All the good things about the fixed, fluid and elastic design.

Against

Shall we do some research?

10.3.5 So, what is (more) accessible design?*

• There is no design that is more accessible than another.

• The type of design is chosen based on the needs (project).

ING. ROSA IMELDA GARCIA CHI,MTI I 52

 Web Engineering - Practical Guide and
Techniques 2017
*The W3C WAI does not establish which is the most accessible design, but rather
that it is transformable in a pleasant way and that the content is understandable
and navigable.

10.3.6 Workflow in interface design

The following tasks represent a rudimentary workflow for designing the WebApp
interface.

1. Review the information contained in the analysis model and refine it as

required.

2. Develop a rough outline of the WebApp interface template.

3. Correlate user goals with specific interface actions.

4. Define a set of user tasks that are associated with each action.

5. Create mockups with screen shots for each interface action.

6. Refine the interface template and mockups using input from aesthetic design.

7. Identify the user interface objects required to implement the interface.

8. Develop a procedural representation of user interaction with the interface.

9. Develop a representation of the interface behavior.

10. Describe the interface template for each state.

11. Refine and revise the interface design model.

10.4 Aesthetic design

Aesthetic design, also called graphic design, is an artistic endeavor that
complements the technical aspects of Web engineering. Without it a WebApp can

ING. ROSA IMELDA GARCIA CHI,MTI I 53

 Web Engineering - Practical Guide and
Techniques 2017
be functional, but unattractive.

10.5 Content Design

Content design focuses on two different design concerns, each addressed by
individuals with different skill sets. Content design develops a design
representation for content objects and represents the mechanisms required for
them to establish their relationships with each other.

10.5.1 Content Objects

The relationship between content objects, defined as part of the WebApp analysis
model, and the layout objects that represent content is analogous to the
relationship between analysis classes and layout components.

A content object has attributes that include content-specific information and

implementation-specific attributes that are specified as part of the design.

10.6 Architectural design

The architectural design is linked to the goals established for the WebApp, the
content that will be presented, the users who visit it and the navigation philosophy
that is established.

Content architecture is based on the way content objects are structured for
presentation and navigation.

10.6.1 Content Architecture

It focuses on defining the overall hypermedia structure of the WebApp. The layout
can be chosen from four different content structures:

^ Linear structures
^ Grid structures
^ Hierarchical structures

ING. ROSA IMELDA GARCIA CHI,MTI I 54

 Web Engineering - Practical Guide and
Techniques 2017

^ The network structure.

10.7 Navigation design
The designer must define the navigation paths that enable the user to access the
content and functions of the WebApp. To do this you must:

^ Identify navigation semantics for different site users

^ Define the mechanics that achieve navigation.
10.7.1 Navigation semantics
During the initial design stages, the navigation architecture of the WebApp is
assessed to determine one or more FdN for each use case. As noted above, a
FoN identifies navigation nodes and the links that enable navigation between
them.

10.7.2 Navigation syntax

As the design is carried out, the navigation mechanics are defined, among its
possibilities we have:

^ Single navigation link

^ Horizontal navigation bar
^ Vertical navigation column
^ Tabs
^ Site maps

ING. ROSA IMELDA GARCIA CHI,MTI I 55

 Web Engineering - Practical Guide and
Techniques 2017
10.8 Object-Oriented Hypermedia Design Method (OHDM)
Traditional software engineering methodologies, or methodologies for information
systems development, do not contain a good abstraction capable of facilitating the
task of specifying hypermedia applications. The size, complexity and number of
applications are growing rapidly today, so a systematic design methodology is
necessary to reduce complexity and allow for evolution and reusability.

Producing applications in which the user can take advantage of the potential of the
website navigation paradigm, while executing transactions based on information, is
a very difficult task to achieve.

First of all, navigation has some problems. A robust navigation structure is one of
the keys to success in hypermedia applications. If the user understands where
they can go and how to get there, it is a good sign that the app has been well
designed.

Building the interface of a web application is also a complex task; not only does
one need to specify which interface objects should be implemented, but also how
these objects will interact with the rest of the application.

In hypermedia there are requirements that must be satisfied in a unified

development environment. On the one hand, the navigation and functional
behavior of the application should be integrated. On the other hand, during the
design process it should be possible to decouple design decisions related to the
navigational structure of the application from those related to the domain model.

OOHDM proposes the development of hypermedia applications through a process

composed of four stages: conceptual design, navigational design, abstract
interface design and implementation.

ING. ROSA IMELDA GARCIA CHI,MTI I 56

 Web Engineering - Practical Guide and
Techniques 2017
10.8.1 Conceptual Design
During this activity, a conceptual scheme is built represented by the domain
objects, the existing relationships and collaborations established between them. In
conventional hypermedia applications, whose hypermedia components are not
modified during execution, a structural semantic data model (such as the entity-
relationship model) could be used. Thus, in cases where the base information can
change dynamically or complex calculations are attempted to be performed, the
behavior of the object model will need to be enriched.

In OOHDM, the conceptual scheme is built by classes, relationships and

subsystems. Classes are described as in traditional object-oriented models.
However, attributes can be of multiple types to represent different perspectives of
the same real-world entities.

It uses UML-like notation (Unified Modeling Language) and class and relationship
cards similar to CRC (Collaboration Responsibility Class) cards. The class schema
consists of a set of classes connected by relationships. Objects are instances of
classes. Classes are used during navigational design to derive nodes, and
relationships are used to build links.

10.8.2 Navigational Design

The first generation of Web applications was designed to navigate through the
information space, using a simple hypermedia data model. In OOHDM, navigation
is considered a critical step in application design. A navigational model is built as a
view on a conceptual design, allowing the construction of different models
according to different user profiles. Each navigational model provides a subjective
view of the conceptual design.

Navigation design is expressed in two schemas: the navigational classes schema

ING. ROSA IMELDA GARCIA CHI,MTI I 57

 Web Engineering - Practical Guide and
Techniques 2017
and the navigational contexts schema. In OOHDM there is a set of predefined
types of navigational classes:

Nodes, links and access structures. The semantics of nodes and links are
traditional for hypermedia applications, and access structures, such as indexes or
guided tours, represent possible access paths to the nodes.

The main primitive structure of navigational space is the notion of navigational

context. A navigational context is a set of nodes, links, context classes, and other
navigational contexts (nested contexts). They can be defined by comprehension or
extension, or by enumeration of their members.

Navigational contexts play a similar role to collections and were inspired by the
concept of nested contexts. They organize the navigational space into convenient
sets that can be traversed in a particular order and that should be defined as paths
to help the user achieve the desired task.

Nodes are enriched with a set of special classes that allow a node to observe and
present attributes (including anchors) as well as methods (behavior) when
navigated in a particular context.

10.8.3 Abstract Interface Design

Once the navigational structures are defined, the interface aspects must be
specified. This means defining how navigational objects can appear, how interface
objects will trigger navigation and the rest of the application's functionality, what
interface transformations are relevant, and when they need to be performed.

A clear separation between navigational design and abstract interface design

allows different interfaces to be built for the same navigational model, leaving a
high degree of independence from user interface technology.

ING. ROSA IMELDA GARCIA CHI,MTI I 58

 Web Engineering - Practical Guide and
Techniques 2017
The user interface aspect of interactive applications (particularly Web applications)
is a critical point in development that modern methodologies tend to neglect. In
OOHDM, Abstract Interface Design is used to describe the user interface of the
hypermedia application.

The ADVs (Abstract Data View) interface model specifies the organization and
behavior of the interface, but the actual physical appearance or attributes, and the
arrangement of the ADVs properties on the actual screen are done in the
implementation phase.

10.8.4 Implementation
In this phase, the designer must implement the design. Until now, all models were
built independently of the implementation platform; in this phase, the particular
environment in which the application will run is taken into account.

Upon reaching this phase, the first step the designer must take is to define the
information items that are part of the problem domain. You must also identify how
items are organized according to the user profile and task; decide what interface
they should see and how they should behave. In order to implement everything in
a Web environment, the designer must also decide what information should be
stored.

ING. ROSA IMELDA GARCIA CHI,MTI I 59

 Web Engineering - Practical Guide and
Techniques 2017
11 Practice No. 4

11.1 Practice Name: Phase 4: Modeling the IWeb Design

Develop the Web Application Design Modeling that
11.1.1 Objective
you have been solving since Phase 1.

ING. ROSA IMELDA GARCIA CHI,MTI I 60

 Web Engineering - Practical Guide and
Techniques 2017
When design is applied within the context of the
11.1.2 Introduction
Web engineering, both generic and specific issues must be
considered. The design must be very specific.

Quality design of a WebApp

In practice, the quality of websites has been assessed in an

“ad hoc” manner, based on common sense and the
experience of developers. The study of the quality of
products and development processes for the Web is very
recent and there are still no widely disseminated evaluation
methods for this type of environment.

Therefore, there is a great need for effective methodologies

for obtaining quality Web applications. Currently, there are
two strands of development methodologies for the Web: the
Software Engineering community and the Hypermedia
community. These methodologies, however, lack metrics
that can be applied to intermediate models (e.g. Object
Model, Navigational Model) used in the Web-oriented
development process.

ING. ROSA IMELDA GARCIA CHI,MTI I 61

 Web Engineering - Practical Guide and
Techniques 2017

11.1.3 UIPO and • Computer with Internet Access IT Valles

Moodle Platform
Eq material
• Word Processor pe Word Microsoft Visio or
• Concept Draw or DIA www.mex.tl,
• www.1&1.mx, www.mipaginawebgratis.es,
www.wix.com, among other pages that
• allow the design of the web page. Web
page design tools

1. Form a work team with diverse roles

11.1.4 Methodology

2. Download the format to prepare phase 4

(Annex No. 4). It is available on platforms
such as www.slideshare.net,
www.issuu.com, www.googledocs.com,
www.scribd.com.
3. Resolve each of the points proposed in the
project phase

4. Prepare it in digital format

5. Generate the Web page in some of the
web tools or tools

web page development

6. Upload it to the Virtual Platform

ING. ROSA IMELDA GARCIA CHI,MTI I 62

 Web Engineering - Practical Guide and
Techniques 2017
Learning

It is recommended that you use the tools

11.1.5 Web page development tips
that are
available on the Web for free, since you will be able to
see your creation on the Internet.

ING. ROSA IMELDA GARCIA CHI,MTI I 63

 Web Engineering - Practical Guide and
Techniques 2017

TECHNICAL SCENT OF PHASE 5

. Bi-
mrea
15Gs

Testing for Web Engineering

12 Phase 5. Testing for IWeb

12.1 Proof of Concepts for WebApp

Quality dimensions that are particularly relevant in any discussion of testing for

ING. ROSA IMELDA GARCIA CHI,MTI I 64

 Web Engineering - Practical Guide and
Techniques 2017
Web engineering work are considered. The nature of the errors found as a result
of testing and the testing strategy applicable to discover such errors are also
considered.

12.1.1 Dimensions of quality

Quality is built into a web application as a result of good design. It is assessed by
applying a series of technical reviews that assess various elements of the design
model and by applying a series of technical reviews that assess various elements
of the design model and by applying a testing process.

Both reviews and tests examine one or more of the following quality dimensions:

The content is evaluated both in the syntactic and semantic fields.

The testing function to discover errors that indicate there is no match with
customer requirements.

The structure is assessed to ensure that it adequately delivers the content and
function of the WebApp.

Usability is tested to ensure that each category of user is supported by the

interface.

*Navigability is tested to ensure that all navigation syntax and semantics are
exercised to uncover any navigation errors.

*Performance is tested under a variety of operating conditions, configurations and

loads to ensure the system responds to user interaction.

Compatibility is tested by running the WebApps in various guest configurations.

ING. ROSA IMELDA GARCIA CHI,MTI I 65

 Web Engineering - Practical Guide and
Techniques 2017
Interoperability is tested to ensure that the WebApp implements appropriate
interfaces.

Security is tested by assessing potential vulnerabilities and attempting to exploit

each one.

12.1.2 Testing strategies

Strategies for testing a WebApp adopt the basic principles for all software testing.

1. The WebApp content modeling is reviewed to discover errors.

2. The interface model is reviewed to ensure that all cases

12.2 Tests applied to a web application

The process of testing the WebApp is a sum of activities related to a single goal:
discovering errors in the content, function, usability, navigability, performance,
capacity, and security of the WebApp.

This is achieved throughout the entire Web engineering process, by applying a

testing strategy that encompasses both reviews and executable tests.

Web engineers and other project participants (managers, clients, end users) take
part in the WebApp testing process.

If end users encounter bugs that affect their confidence in the WebApp, they will
go elsewhere for the content and functionality they need, and the WebApp will fail.

For this reason, Web engineers must work to eliminate as many bugs as possible
before the WebApp goes online.

The testing process begins by focusing on those aspects of the test that are visible
to the user and proceeds to test said technology and infrastructure.

ING. ROSA IMELDA GARCIA CHI,MTI I 66

 Web Engineering - Practical Guide and
Techniques 2017
The test consists of seven stages: content, interface, navigation, component,
configuration, performance and security testing.

In some cases a WebApp test plan is produced.

ING. ROSA IMELDA GARCIA CHI,MTI I 67

 Web Engineering - Practical Guide and
Techniques 2017

In all cases a set of test cases is developed for each stage of testing and an
archive of test results is maintained for future use.

While you can never be sure that you have performed all the testing you need, you
can be confident that the testing has uncovered bugs (and that these have been
fixed).

Additionally, if a test plan has been established, it can be verified to ensure that all
planned tests have been performed.

Because many WebApps are continually evolving, WebApp testing is a follow-up

activity led by the Web Support team, using regression tests derived from tests
developed when the WebApp was first engineered.

12.2.1 Dimensions of Quality

Figure 4 Quality Dimensions

ING. ROSA IMELDA GARCIA CHI,MTI I 68

 Web Engineering - Practical Guide and
Techniques 2017
The Testing process that must be applied to the Web page that has been built is
based on the Page Design:

Figure 5 Testing Process

Figure 6 shows all the tests to be applied to the Page that has been developed:

ING. ROSA IMELDA GARCIA CHI,MTI I 69

 Web Engineering - Practical Guide and
Techniques 2017

TESTING PROCESS

Figure 6 Testing Process

ING. ROSA IMELDA GARCIA CHI,MTI I 70

 Web Engineering - Practical Guide and
Techniques 2017
13 Practice No. 5

13.1 Practice Name: Phase 5 IWeb Testing Application

13 11 Objective Apply the entire testing process to the developed Web
Page, showing evidence of the application in a
digital document.

ING. ROSA IMELDA GARCIA CHI,MTI I 71

 Web Engineering - Practical Guide and
Techniques 2017
The strategy for testing a WebApp, adopts the
13.1.2 Introduction
basic principles for all software testing and applies a strategy and
tactics that were recommended for object-oriented systems as follows:

^ Reviewing the WebApp content model for errors

^ Review the interface model ensuring that all use
cases can be accommodated
^ Reviewing the WebApp design model for navigation
errors
^ The user interface is tested to discover errors in the
presentation or navigation mechanisms.
^ Selected functional components are tested
individually.
^ Performance tests are carried out.
^ The WebApp is tested on a controlled and monitored
population of end users looking for errors related to
ease of use, compatibility, reliability and
performance of the WebApp.

ING. ROSA IMELDA GARCIA CHI,MTI I 72

 Web Engineering - Practical Guide and
Techniques 2017
^ Computer with Internet Access
13.1.3 Material and
^ Browsers
Equipment
^ Various devices to access the
page
^ IT Valles Moodle Platform
^ Word Processor pe Word

13.1.4 1. Forming a work team Methodology

2. Have multiple devices with internet access
3. Load the web page they
developed
4. Apply each of the IWeb tests
5. Document and add evidence of the tests applied
6. Submit the evidence document on the virtual
platform.

ING. ROSA IMELDA GARCIA CHI, MTI 73

 Web Engineering - Practical Guide and
Techniques 2017
13.1.5 It is necessary that the whole team participate in the
Suggestions
web page test.

Tests cannot be applied if it is not

Web page completed.

FOR/ATO PHASES EE DROJECT IWEB

Integrating Document

ING. ROSA IMELDA GARCIA CHI,MTI I 74

ING. ROSA IMELDA GARCIA CHI, MTI 75
 Web Engineering - Practical Guide and
Techniques 2017
14 Annex No. 1. Phase 1 IWeb Project Format.

ING. ROSA IMELDA GARCIA CHI,MTI I 76

 Web Engineering - Practical Guide and
Techniques 2017

ING. ROSA IMELDA GARCIA CHI,MTI I 77

 Web Engineering - Practical Guide and
Techniques 2017
15 Annex No. 2. Phase 2 IWeb Project Format.

ING. ROSA IMELDA GARCIA CHI,MTI I 78

 Web Engineering - Practical Guide and
Techniques 2017

ING. ROSA IMELDA GARCIA CHI,MTI I 79

 Web Engineering - Practical Guide and
Techniques 2017

ING. ROSA IMELDA GARCIA CHI,MTI I 80

 Web Engineering - Practical Guide and
Techniques 2017

ING. ROSA IMELDA GARCIA CHI,MTI I 81

 Web Engineering - Practical Guide and
Techniques 2017

ING. ROSA IMELDA GARCIA CHI,MTI I 82

 Web Engineering - Practical Guide and
Techniques 2017

ING. ROSA IMELDA GARCIA CHI,MTI I 83

 Web Engineering - Practical Guide and
Techniques 2017
16 Annex No. 3. Phase 3 IWeb Project Format.

ING. ROSA IMELDA GARCIA CHI,MTI I 84

 Web Engineering - Practical Guide and
Techniques 2017

ING. ROSA IMELDA GARCIA CHI,MTI I 85

 Web Engineering - Practical Guide and
Techniques 2017
17 Annex No. 4. Phase 4 IWeb Project Format.

ING. ROSA IMELDA GARCIA CHI,MTI I 86

 Web Engineering - Practical Guide and
Techniques 2017

ING. ROSA IMELDA GARCIA CHI,MTI I 87

 Web Engineering - Practical Guide and
Techniques 2017
18 Annex No. 5. Phase 5 IWeb Project Format.

ING. ROSA IMELDA GARCIA CHI,MTI I 88

 Web Engineering - Practical Guide and
Techniques 2017

ING. ROSA IMELDA GARCIA CHI,MTI I 89

 Web Engineering - Practical Guide and
Techniques 2017

ING. ROSA IMELDA GARCIA CHI,MTI I 90

 Web Engineering - Practical Guide and
Techniques 2017
19 Bibliography

1. Cuevas, I., Web Engineering and Design Patterns. 2005.

2. Arlow, J. and I. Neustad, UML 2. Programming. Anaya Multimedia-Anaya

Interactiva, 2006.

3. Booch, G., et al., The unified modeling language. 1999: Addison Wesley
Madrid.

4. Agustín Cuevas, G., Software process management. 2002.

5. Fowler, M., R. SCOTT, and K. Scott, UML drop by drop. 1999: Pearson
Education.

6. Source, AAJ, et al., The Blue Book of Computer Engineering: an alternative

to the White Paper. I EUITIO Teaching Innovation Conference, 2005: p. 67.

7. Garcia Molina, JJ, G. Rossi, and A. Moreira, UML: the standard language for
software modeling. Novática: Journal of the Association of Computer
Technicians, 2004(168): p. 4-5.

8. Genoa, G., J.M. Fuentes, and J. Llorens, Evaluation of CASE tools for UML.

9. Grady, R.B., Successful software process improvement. 1997: Prentice Hall

PTR.

10. Guevera, A., Web Engineering: E-learning. Scientific Culture, 2011(5): p. -

1620.

11. Hernández González, A., Business Process Identification. Industrial

Engineering, 2010. 25(3): p. 6 pp.

ING. ROSA IMELDA GARCIA CHI,MTI I 91

 Web Engineering - Practical Guide and
Techniques 2017
12. Humphrey, WS, Introduction to the Personal Software Process (PSP). 2001:
Addison^Wesley.

13. Pastor, O. OOWS: An approach to Conceptual Modeling of Web

Applications. 2002.

14. Pressman, R.S. and JM Troy, Software engineering: A practical approach.

6th edition. 2006: McGraw Hill.

15. Rumbaugh, J. and I. Jacobson, Grady Booch. The Unified Modeling

Language Reference Manual (The Addison-Wesley Object Technology
Series), 2001.

16. Senn, J.A. and D. Mercer, Systems Analysis and Design. 1992: Mexico:
McGraw Hill.

17. Sommerville, I., Software engineering. 2005: Pearson Education.

18. Thomas, D., et al., Agile web development with rails. 2005: Pragmatic
bookshelf New York.

ING. ROSA IMELDA GARCIA CHI,MTI I 92

More
BooksW
 I want more books!
Buy your books fast and simple online - at one of the world's fastest
growing online book stores! Environmentally sound due to Print-on-
Demand technologies.

Buy your books online at

www.get-
morebooks.com
Buy your books quickly and directly online from one of the fastest
growing online bookstores in the world! Production that protects the
environment through print-on-demand technologies.

Buy your books online at

www.morebooks.es
OmniScriptum Marketing DEU GmbH
Bahnhofstr. 28
D - 66111 Saarbrücken [email protected] Scriptum'
Fax: +49 681 93 81 567-9 www.omniscriptum.com