WEB ENGINEERING
Unit 1: Introduction to Web
Engineering and its
requirements
Unit 1
Aim
• The aim of this unit is to introduce the student to Web
Engineering concepts and how web concepts can be
applied in developing web applications.
The unit will also cover:
• Basic principles of mark-up languages
• HTML 5 document structure
• Structuring text
• Block level and inline elements
Objectives
Discuss
Discuss the concept of the World Wide Web
Differentiate
Differentiate Web Engineering from Software
Engineering
Describe
Describe Web Applications and their attributes.
Discuss
and apply
Discuss and apply the different categories of Web
applications as they evolve.
The Internet
and the World
Wide Web
(www)
Questions:
• What is the Internet?
• What is WWW?
Write a definition of the Internet
Write a definition of the WWW
Describe the differences between the two
• The world-wide network of computer networks sharing
information
• Information shared over the Internet (not exhaustive)
The Internet
– Email
– FTP
– Instant Messaging
– WWW
– Chat
– VOIP e.g. Skype
– P2P (Peer-to-peer) networks
The World Wide
Web (WWW)
• The worldwide collection of millions of
inter-linked documents (web pages) on
the Internet
• Two main technologies define the
WWW
• HTML (HyperText Markup
Language)
• The language used to write web
pages
• HTTP HyperText Transfer Protocol
• The communication rules that
specify how web pages are
transmitted over the Internet
How the WWW Works
• The user selects the address of a web page they want to
view, e.g. http://tinyurl.com/6ynbvx
• Web addresses are known as URLs (Universal Resource
Locators)
• The request is made using HTTP
• The server receives the request
• If the client is allowed the requested page:
• The server finds the web page (a HTML document)
• Sends a copy back over the Internet to the client
• Again HTTP is used for communication between the
client and server
• The web browser understands HTML and displays the
web page for the user.
• The user views the page, clicks on a hyperlink and the
whole process starts over again.
HTML (HyperText
Markup Language)
• This is an example of a HTML
document.
• HTML describes the structure of
a web page, i.e. which part of the
page is a heading, a paragraph, a
list, a table etc
CSS (Cascading Style
Sheets)
• CSS specifies the design of
a web page:
• E.g. the fonts, colours,
positions of different
parts of the page
Web Applications
• You hear a lot about web applications these days.
• Usually with the term ‘cloud computing’
• The distinction between ‘web’ applications and ‘desktop’ applications is
becoming less meaningful on a yearly basis.
• Most desktop applications incorporate internet functionality.
• Most web applications now imitate the look and feel of desktop
applications.
Web Applications
• In the most general sense, we break a web application into
three ‘layers’, each responsible for a different part of the
system.
• The Presentation layer, which handles the user frontend
• The Application layer, which handles the ‘business logic’
• The Data layer, which handles storage and retrieval of data.
• This is usually called an N-Tier architecture, where N is the
number of tiers.
Web Applications
• There is now even an operating system fully designed to work on
the web.
• Google’s Chrome OS
• Desktop applications still have numerous benefits:
• Bandwidth is still a major bottleneck in highly interactive
performance
• Privacy and security is easier when you have control over the data
• It’s possible to optimise for the desktop context
Web Applications
• Different tools are used to handle the complexities of each of the
tiers.
• We separate them out to ensure maximum flexibility when we build
applications.
• At the user level, languages such as Javascript and formats such as
CSS are commonplace.
• For the application levels, PHP, Ruby or other server-side languages
are used.
• For the data level, MySQL and Oracle are common.
Web Applications
• It has never been more important to be able to develop
dynamic websites.
• People expect a lot of websites
• Web applications offer many advantages to both developers
and users:
• Easily maintained
• Easily deployed
• Always available
• Provided you have an internet connection
Attributes of Web Applications
• Network Intensiveness
• Concurrency
• Unpredictable Load
• Performance
• Availability
• Data Driven
• Content Sensitive
• Continuous Evolution
• Security
• Aesthetics
Web Categories
Information Web Applications
• You decide to build a home page and a few supplementary pages
that describe the Web App and its products and services.
• An informational Web App contains read-only content with
simple navigation and links.
Web App Categories
Download Web Apps
• When you begin to add content that describes more functionality of a Web
App such as security system hardware
• You will need to provide this information through PDF (Portable Document
Format) specification files describing each functionality that can be
downloaded from the website.
Web App Categories
Customizable Web Apps
• You will need to tailor the content presented at the website to the specific
needs of each customer type, using jargon and presenting content that will
meet their needs.
• You do a major overhaul of your initial Web App and create a new one that is
customizable for each user.
Web App categories
Interaction web apps
• Traffic increases rapidly, and before long you have hundreds of visitors each
day (after all, people worry about effective solutions for home and business
security).
• You want to create a feeling of community among your visitors—a place
where people can chat, ask and answer questions, provide product
testimonials, and the like.
Web App Categories
User Input Web Apps
• Implementing forms-based input so that every request from a
user is organized in a predictable manner using automation
• But at least one does not have to transcribe a variety of disparate
inputs and sources of information.
Web App Categories
Transaction-Oriented Web Apps
This provides the user with a series of algorithms for computing
hardware and monitoring functionality based on forms-based
input.
Web App Categories
Service Oriented Web Application
• You are now ready to provide a comprehensive design assistance
capability.
• The user inputs a description of a space graphically and is then
assisted in the design of a security system for that space.
• This service can lead directly to a particular part of the system as
requested.
Web App Categories
Portals
• Time passes, and your dedicated hard work pays off with thousands of
visitors each day and you do not have the time to answer each.
• To help solve the problem you begin providing links to appropriate
websites that do have answers.
• Before long, a portion of your site channels users to a wide variety of
useful information sources.
Web App Categories
Database Access
• Your product line and customer base grow dramatically, and it
becomes necessary to build these different databases as need arises.
• These databases can be queried using aspects of the user input
elements of the Web App.
Web App Categories
Data Warehousing
• As the business grows and becomes a major international supplier of
goods and services to meet the needs of many countries, you must tap
information about local building regulations, suppliers, installers, and
the like.
• You need to gain access to multiple databases and extract information
that will be useful for your customers.
• You begin to build a large-scale data warehousing component for the
Web App
Conclusion
• There are a lot of things we’re going to need to learn to build dynamic websites.
• Building client interfaces
• Building server-side applications
• Manipulating server-side databases.
• This will involve encountering a reasonable number of new languages, formats and
frameworks.
• Ajax, PHP, MySQL and XML
• By the end of this module though, you will be able to build genuinely interesting
web pages that combine your code with existing APIs.