Web Engineering?
description
Transcript of Web Engineering?
![Page 1: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/1.jpg)
Demonstrators:
Mudasir Nazir(08-CS-41)
Web Engineering?
![Page 2: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/2.jpg)
Why This Topic?
I am highly addicted to this field .
Working with W3C in research program(building CSS for
creating web site for Blind Users)
Developing web projects with some consortiums
For more details visit me at
engrmudasir.wordpress.com
![Page 3: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/3.jpg)
WEB –Designing & WEB-DevelopmentThe terms sound very similar, but there is great difference
between these two.When you are looking for some one to build website for you its important to differentiate between these.
WEB-Designing?
WEB-Development?
Front-end
Back-end
![Page 4: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/4.jpg)
What is WebApp?
Client?
Client-server Environment?
![Page 5: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/5.jpg)
Web E?
Web Systems?
![Page 6: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/6.jpg)
Attributes of web based systems
“By the time passes, we see any sort of stabilization, the web will turned into something completely different ”
LOUIS MONIER
![Page 7: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/7.jpg)
Attributes of web based systemsNetwork intensiveness
Concurrency
Unpredictable load
Performance
Availability
Data driven
Content sensitive
Continuous evolution
Immediacy
Security
Aesthetic
![Page 8: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/8.jpg)
Categories of WebApp in WebE
Informational
Download
Interaction
User input forms
User transaction
Portals
Data base access
![Page 9: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/9.jpg)
WebE Layers:
Process:
• Embrace change
• Strong interaction
• builds systems using small teams
• Increment development using small development
teams
![Page 10: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/10.jpg)
Methods:It encompasses a set of technical tasksUnderstand ,characterize and build high quality webapp
Communication methods:
Requirement analysis method:
Design method:
Testing method:
![Page 11: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/11.jpg)
Tools and technology:
![Page 12: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/12.jpg)
PlanningModelingConstructionDeployment
WebE Process:
![Page 13: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/13.jpg)
WebE process:
![Page 14: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/14.jpg)
I am Scrolling
![Page 15: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/15.jpg)
Initiating A WebApp project
During 1990 the internet boom generated arrogance than any other
event in computer history.
Web app developers argued that
a new concept of software development had arisen,that old rules are no longer
applicable.
![Page 16: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/16.jpg)
They laughed at the notion that careful formulation and planning should occur before construction commenced…??
Why is it important…??????? ? ? ?What are the steps…????????? ? ? ?
![Page 17: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/17.jpg)
Formulating Web Based systemsFormulation allows web engineering team
and stakeholders to establish a common set of goals and objectives for the construction of a webApp.
It also specify the scope of the development effort and provides a mean for successful outcome.
![Page 18: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/18.jpg)
The following are some steps for requirements gathering.
Ask stakeholders to define user categories and develop descriptions for each user.
Communicate with stakeholders to define basic webApp requirements.
Analyze information gathered and use information to follow up with stake holders.
Define use cases that describe interaction scenarios for each user class.
![Page 19: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/19.jpg)
Defining user categories.Communication with stakeholders and end
users.Analyzing information gathered.
![Page 20: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/20.jpg)
The web engineering teamWeb engineering team can be organized in
much the same way as traditional software team. Among many skills that must be distributed among the web engineering team are component based software engineering ,networking, architectural and navigational design, internet standards, human interface design, graphic design etc.
![Page 21: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/21.jpg)
The following roles should be distributed in web team.
Contents developerWeb publisherWeb engineerBusiness domain expertsSupport specialist
![Page 22: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/22.jpg)
Content developer
Because webApp are inherently contents driven so one role of the web team must focus on collection of contents.
![Page 23: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/23.jpg)
Web publisherThe contents generated by content
developersMust be organized for inclusion with in the
webAPP technology.This role is filled by the web developers who
must understand both contents and webApp technology.
![Page 24: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/24.jpg)
Web engineerA web engineer becomes invoved in wide
range of activities during the development of WebApp including requirement elicitation, analysis modeling, architectural, navigational and interface design, webApp implementation and testing.
Web engineer should also have a solid understanding of component technologies.
![Page 25: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/25.jpg)
Business domain expertsA business domain expert should be able to
answer all questions related to business goals, objectives and requirements associated to the webApp.
![Page 26: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/26.jpg)
Support specialistThis role is assigned to the person who is
responsible for continuing webApp support because webApp continously evolve the support specialist is responsible for corrections including updates of contents.
![Page 27: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/27.jpg)
AdministratorOften called the “web master” this person is
responsible for day-to-day operation including development and implementation of policies.
The administrator may also be involved in the technical activities performed by web engineers and support specialist.
![Page 28: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/28.jpg)
Application-Design Mistakes Its hard to write an article on application
mistakes because the very worst mistakes are domain-specific .Usually, applications fail because they (a) solve the wrong problem, (b) have the wrong features for the right problem, or (c) make the right features too complicated for users to understand.
![Page 29: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/29.jpg)
There are some violations that are often seen In a wide variety of applications.
Tiny Click TargetsNo Perceived AffordanceOut to Lunch Without a Progress Indicator
![Page 30: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/30.jpg)
Why the fuzzy faces?
![Page 31: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/31.jpg)
Analysis for WebAppsIt actually focuses on three things:
What information to be presented?
What functions to be performed?
What behaviors will it exhibit as it presents information
and functions?
![Page 32: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/32.jpg)
Requirment analysis for WebApps:
It actually encompasses three major tasks:
Formulation
Requirements Gathering
Analysis modeling
![Page 33: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/33.jpg)
Requirment analysis for WebApps:
Note:The main is to establish basic understanding of the WebApp is to build, who will use it and which problems it will solve
![Page 34: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/34.jpg)
The User Hirerachy
![Page 35: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/35.jpg)
Developing Use Cases
![Page 36: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/36.jpg)
The Analysis Model for WebApps
Content Analysis:
Interaction Analysis:
Functional Analysis:
Configuration Analysis:
![Page 37: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/37.jpg)
Content Model:
Defining Content Objects:o A paragraph general DescriptionoA photographoTechnical DescriptionoThumbnail Video
![Page 38: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/38.jpg)
Content RelationShip &Hierarchy
![Page 39: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/39.jpg)
Analysis Class for USE CASE
![Page 40: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/40.jpg)
The Interaction Model:
The Functional Model:
The Configuration Model:
![Page 41: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/41.jpg)
Relationship Navigation analysis:
Navigation is not only the action of jumping from page to page, but the idea of moving through information space.
![Page 42: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/42.jpg)
Scroll
![Page 43: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/43.jpg)
Design for webApp
![Page 44: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/44.jpg)
First of all we discuss what is webApp design in actual by giving answers of some questions
The first question is what is it???? Who does it????? Why is it important??? What are the steps???? What is the work product???
![Page 45: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/45.jpg)
Design issue for web engineering
Design and web quality Security Availability Scalability
![Page 46: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/46.jpg)
Offutt extends the five major quality attributes by adding the following attributes.
o Securityo Availabilityo Scalability
![Page 47: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/47.jpg)
Design goals Jean Kaiser suggests the following design
goals that are applicable to virtually every web application regardless of application domain ,size, or complex.
SimplicityConsistency IdentityNavigabilityRobustnessCompatibility
![Page 48: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/48.jpg)
The web design activities Interface design Aestheic design Content design Navigation design Architecture design Component design
![Page 49: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/49.jpg)
Interface designEvery user interface whether it is designed
for a webApp ,a traditional software app, a consumer product, or an industrial device should follow the following characteristics, easy to use , easy to learn, easy to navigate, error free and functional.
![Page 50: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/50.jpg)
Interface design principles and guidelinesCommunicationConsistencyEfficiencyFlexibilityReadability
![Page 51: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/51.jpg)
Interface design workflow
![Page 52: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/52.jpg)
Wind UP section!!
![Page 53: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/53.jpg)
Aesthetic Design:Layout Issues:
Graphic Design Issues:
Content Design Issues:
![Page 54: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/54.jpg)
REFERENCES:
http://www.w3.org/standards/ http://engrmudasir.wordpress.com/Software Engineering(a practitioner approach) By: Roger S.Pressman
![Page 55: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/55.jpg)
![Page 56: Web Engineering?](https://reader038.fdocuments.in/reader038/viewer/2022103101/56814206550346895dadea39/html5/thumbnails/56.jpg)
THANK
YOU