Web Engineering WT 2005/06 Chapter 1:Web Applications 2005-10-18 © Gregor Engels University of Paderborn 1 Web Engineerin

Web Engineering WT 2005/06 2005-10-18 Chapter 1:Web Applications

Outline

I. Web Applications I.1 History and Notions Web Engineering I.2 Categories of Web Applications I.3 Characteristics of Web Applications Winter Term 2006/07 I.4 Web Engineering Prof. Dr. Gregor Engels

Chapter I: Web Applications

Chapter 1 © Gregor Engels - University of Paderborn 4

Acknowledgements Motivation

• Prof. Dr. Gerti Kappel, TU Wien • The World Wide Web is omnipresent!

•Why? – global and permanent availability http://www.big.tuwien.ac.at/teaching/offer/ss05/we_vo/ – comfortable and uniform access – anyone can produce and publish contents • G. Kappel, B. Pröll, S. Reich, W. Retschitzegger (eds.): Web Engineering – The Discipline of Systematic Development of Web Applications. John Wiley & Sons 2006

Chapter 1 © Gregor Engels - University of Paderborn 2 Chapter 1 © Gregor Engels - University of Paderborn 5

Literature Example: Search Engine

• G. Kappel, B. Pröll, S. Reich, W. Retschitzegger (Hrsg.): Web Engineering – Systematische Entwicklung von Web-Anwendungen. dpunkt.verlag 2004 • G. Alonso, F. Casati, H. Kuno, V. Machiraju: Web Services – Concepts, Architectures and Applications. Springer 2004 • H. Wöhr: Web-Technologien – Konzepte, Programmiermodelle, Architekturen. dpunkt.verlag 2004 • R. Pressman: Software Engineering – A Practitioner’s Approach, 6th Edition. McGraw-Hill Higher Education 2005 • A. Eberhart, St. Fischer: Java-Bausteine für E-Commerce-Anwendungen. Hanser 2001 • J. Conallen: Building Web Applications with UML. Addison-Wesley 1999 • M. P. Singh, M. N. Huhns: Service-Oriented Computing – Semantics, Processes, Agents. Wiley 2005 • to be continued …

Chapter 1 © Gregor Engels - University of Paderborn 3 Chapter 1 © Gregor Engels - University of Paderborn 6

Example: Information Basic paradigms

• Hypertext + Internet

• Hypertext: textual documents together with the ability to interconnect documents by links between them as part of the document contents

• HTML: HyperText Markup Language • http: HyperText Transfer Protocol

Chapter 1 © Gregor Engels - University of Paderborn 7 Chapter 1 © Gregor Engels - University of Paderborn 10

Example: Course Announcement Conceptual Architecture

Web-Browser Web-Server

HTML HTML

Web-Browser

HTML

Web-Browser

HTML Client/Server Architecture

Chapter 1 © Gregor Engels - University of Paderborn 8 Chapter 1 © Gregor Engels - University of Paderborn 11

Example: www.bahn.de History of the Web

• 1969: ARPA (Advanced Research Projects Agency) – First small network: Stanford Research Institute, UCLA, UC Santa Barbara, Univ. of Utah – TCP (Transmission Control Protocol) – IP (Internet Protocol) • 1972: Telnet protocol • 1973: SMTP (Simple Mail Transfer Protocol) • 1973: FTP (File Transfer Protocol) • 1989: T. Berners-Lee et al.: Word Wide Web (WWW) • 1997: HTTP (HyperText Transfer Protocol) • 1994: W3C (World Wide Web Consortium)

Chapter 1 © Gregor Engels - University of Paderborn 9 Chapter 1 © Gregor Engels - University of Paderborn 12

Protocol Stack Web Application

client server Definition: A Web Application is a software system based on HTTP HTTP technologies and standards of the World Wide Web Consortium (W3C) that provides Web specific TCP TCP resources such as content and services through a

IP IP user interface, the Web browser.

physical layer

Chapter 1 © Gregor Engels - University of Paderborn 13 Chapter 1 © Gregor Engels - University of Paderborn 16

World Wide Web Consortium (W3C) Outline

• international consortium where member I. Web Applications organizations, a full-time staff, and the public work I.1 History and Notions together to develop Web standards I.2 Categories of Web Applications • http://www.w3.org I.3 Characteristics of Web Applications I.4 Web Engineering W3C's mission: • to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web.

Chapter 1 © Gregor Engels - University of Paderborn 14 Chapter 1 © Gregor Engels - University of Paderborn 17

The W3C Technology Stack Categories of Web Applications

complexity semantic web ubiquitious portal- oriented collaborative workflow- based transaction- oriented interactive document- centered http://www.w3.org/2004/10/RecsFigure.png historical development

Chapter 1 © Gregor Engels - University of Paderborn 15 Chapter 1 © Gregor Engels - University of Paderborn 18

Categories of Web Applications (1) (cf. Pressman, p. 472, Kappel, p.7) Categories of Web Applications (4)

• document-centered • workflow-based – Informational – support business processes („workflows“) within resp. read-only content is provided with simple navigation and links between different enterprises or private users – Download – an application provides a complex service to the user, e.g. a user downloads information from the appropriate server (ftp-server) assists the user in determing the mortgage payment – Customizable – prerequisite: structured flow of activities the user customizes content to specific needs

– examples: • static HTML-pages, „home pages“ – examples: • web radio • Business-to-Business (B2B) Integration Frameworks • simple presentations of companies/products • E-Government • patient workflows in health care systems

Chapter 1 © Gregor Engels - University of Paderborn 19 Chapter 1 © Gregor Engels - University of Paderborn 22

Categories of Web Applications (2) Categories of Web Applications

complexity • interactive semantic web – content of a website is dynamically generated as response to a user request ubiquitious – form-based input is the primary mechanism for communication between client and server portal- – usage of HTML-forms and Common Gateway Interface (CGI) oriented techniques collaborative • radio button, string input, choice lists workflow- Browser Web-Server based HTML transaction- – examples: oriented • dynamic HTML pages interactive • public transport schedules • search engines CGI document- program centered historical development

Chapter 1 © Gregor Engels - University of Paderborn 20 Chapter 1 © Gregor Engels - University of Paderborn 23

Categories of Web Applications (3) Categories of Web Applications (5)

• transaction-oriented • Collaborative – complex interactions – support cooperation in case of unstructured flow of activities and high degree of communication – read and write actions – „groupware“ – usage of transaction management of database systems • efficient and consistent data management • structured data and queries – examples: • support of shared information- and workspaces – examples: – Wiki, http://c2.com/cgi/wiki • online banking – BSCW, http://bscw.gmd.de • e-shopping – chatrooms • e-Learning platforms • reservation systems

Chapter 1 © Gregor Engels - University of Paderborn 21 Chapter 1 © Gregor Engels - University of Paderborn 24

Categories of Web Applications (6) Categories of Web Applications

complexity semantic • portal-oriented web – the application channels the user to other Web content or ubiquitious services outside the domain of the portal application portal- – „single point of access“ oriented collaborative

– examples: workflow- based • Community portals transaction- – dedicated user groups oriented – customer profiles interactive • enterprise portals – Intranet, extranet document- centered historical development

Chapter 1 © Gregor Engels - University of Paderborn 25 Chapter 1 © Gregor Engels - University of Paderborn 28

Categories of Web Applications (7) Outline

• ubiquitious I. Web Applications – personalized services at every time at every location I.1 History and Notions – multi-platform delivery (PC, PDA, mobile phone) I.2 Categories of Web Applications – context-dependent information I.3 Characteristics of Web Applications I.4 Web Engineering

– example: • display of today‘s menu on end-user devices while entering a restaurant

Chapter 1 © Gregor Engels - University of Paderborn 26 Chapter 1 © Gregor Engels - University of Paderborn 29

Categories of Web Applications (8) Navigation in Web Applications (1) • semantic web – information available on the web • adequate for human understanding and • adequate for automatic manipulation

– „knowledge management“ • derivation of new knowledge • re-use of knowledge • based on ontologies

–Example: • Web 2.0 • social software: wiki, Flickr, del.icio.us • Google

Chapter 1 © Gregor Engels - University of Paderborn 27 Chapter 1 © Gregor Engels - University of Paderborn 30

Development of Web Applications: Error! Link not found! today’s approach

• ad-hoc development • based on knowledge, experiences and practices of individual developers • reuse of existing applications by “copy&paste” approach • insufficient documentation of design decisions • isolated activity: no “design for change” • missing methodical approach

Chapter 1 © Gregor Engels - University of Paderborn 31 Chapter 1 © Gregor Engels - University of Paderborn 34

Navigation in Web Applications (2) Reasons for Quality Deficiencies

• document-centered view – development of web applications seen as editorial activity: “ (textual) web pages, links and use of graphics” • misconception that web applications are simple – due to availability of tools like HTML-editors and form generators • no use of know-how of relevant disciplines – no use of software engineering know-how – no use of hypermedia or HCI (Human Computer Interaction) know-how

Chapter 1 © Gregor Engels - University of Paderborn 32 Chapter 1 © Gregor Engels - University of Paderborn 35

Error! Wrong Link!

Web Crisis

• comparable to software crisis at the end of the 60’ies • lead to origin of “software engineering” discipline

• “web engineering” is needed!

Chapter 1 © Gregor Engels - University of Paderborn 33 Chapter 1 © Gregor Engels - University of Paderborn 36

Difference to software systems? Characteristics of Web Applications product presentation • What are the differences of general software • hypertext hypertext content systems and web applications? – non-linearity • main distinction to traditional software systems – systematic reading (“browsing, query, guided tour”) • Can we use the same techniques to develop web • navigation in information space depends on interest and previous applications as we are using for developing knowledge of user software systems in general? • great challenge for web application authors – risks • disorientiation: loss of sense of locality and direction ? • cognitive overload for users Web Engineering = Software Engineeering

Chapter 1 © Gregor Engels - University of Paderborn 37 Chapter 1 © Gregor Engels - University of Paderborn 40

Characteristics of Web Applications Characteristics of Web Applications product presentation • presentation hypertext content ution evol – aesthetics • look and feel • depending on current fashion use – self-explanatory technical context • intuitive use without reading any documentation • uniform application logics social natural context product context presentation project hypertext technical member content infrastruc- process ture based on: integration International Standard ISO/IEC 9126: development Software Engineering - Product Quality

Characteristics of Web Applications Characteristics of Web Applications product presentation • content hypertext content ution – “content is king” in web applications evol – document-centered and multi-media • text, tables, graphics, animation, audio, video • main objective of web applications is to communicate content use • high usability demands technical context

– high quality demands social natural • actuality, preciseness, correctness, reliability, size context product context presentation • e-shopping: information about price, availability of products project hypertext technical • quality is critical factor for acceptance of web applications member content infrastruc- process ture based on: integration International Standard ISO/IEC 9126: development Software Engineering - Product Quality

Characteristics of Web Applications Characteristics of Web Applications use project technical member infrastruc- technical context • project member • social context process ture social – multi disciplinary integration – spontaneity natural context context •mixture of development • users come and go .. – print publishing and software development • unknown number of users – marketing and computer science – art and technology • scalability important issue • IT-experts, hypertext experts, UI designer, domain experts, … – multi culturality • anonymous type of user – young average age of developers • limited knowledge about previous knowledge, handicaps, • “technology freak” preferences of users – community development • desired adaptation of content and presentation • open source • open content

Characteristics of Web Applications Characteristics of Web Applications use project technical member infrastruc- technical context • technical context • technical infrastructure process ture social integration natural – inhomogeneity context context development – quality of service • two essential components – Web server (under control of developer) • unknown network characteristics (e.g., bandwith, reliability) – Web browser (out of control of developer)

– multi platform delivery – immaturity • different types of devices (PC, PDA, BlackBerry, mobile phone) • “buggy” components due to time-to-market pressure • different versions of browsers • continuous evolution of base technology • different degree of functionality, performance, display size, …

Characteristics of Web Applications Characteristics of Web Applications use project technical member infrastruc- technical context • natural context • process process ture social integration – place and time of access natural – flexibility context context development • changing requirements – globality • changing context • internationalization of web applications • requires agile, light-weight processes – regional, cultural, linguistic differences have to be taken into account • demands on security – prevent access to private or confidential data – parallelity • of development of parts of web applications – availability • of development steps • instant delivery mechanism (also in case of partial realizations) • permanent (24/7) • time-dependent services

Characteristics of Web Applications Outline project technical member infrastruc- • integration process ture I. Web Applications integration – internal integration development I.1 History and Notions • add web access to legacy systems I.2 Categories of Web Applications I.3 Characteristics of Web Applications – external integration I.4 Web Engineering • of content and services of external web applications • similarity to integration of heterogeneous database systems, but – high autonomy of sources w.r.t. to availability and change – few detailed information about sources – heterogeneity on different levels (data, schema, data model)

Characteristics of Web Applications Difference to software systems?

• What are the differences of general software on oluti systems and web applications? ev see I.3

• Can we use the same techniques to develop web use applications as we are using for developing technical context software systems in general? social natural adapted ones! context product context presentation project hypertext technical member content infrastruc- Web Engineering process ture based on: is_specialization_of integration International Standard ISO/IEC 9126: Software Engineeering development Software Engineering - Product Quality

Characteristics of Web Applications Web Engineering

• continuous change ution evol Definition by Pressman (p. 469): – permanent evolution • changing requirements and contexts Web Engineering (WebE) applies sound scientific, • change of characteristics product, use, or development engineering, and management principles and disciplined and systematic approaches to the • competitive pressure – time-to-market successful development, deployment, and – necessity of web presence maintenance of high-quality Web-based systems – leads to shorter product life cycles and applications. – leads to shorter development cycles

• fast pace • “either you are fast or irrelevant”

Course Structure Web Service

• Part I: Web Applications Definition: – model-based development A Web Service is a software application identified • modeling approaches by a URI, whose interfaces and bindings are – architecture, middleware capable of being defined, described, and discovered • MVC (model-view-controller), PHP, Servlets, Java Server Pages, as XML artifacts. A Web Service supports direct XML, AJAX, .NET, … interactions with other software agents using XML- • Part II: Web Services based messages exchanged via Internet-based – standard techniques protocols. • WSDL, BPEL, SOAP – research approaches • visual contracts, model-driven monitoring

Architectural Types Service-oriented Architecture (SOA)

client-server silos web-based computing service-oriented Architecture (SOA) Service servers servers Specification

DiscoveryDiscovery AgencyAgency

Query Publish Service Specification internet ServiceService Interact ServiceService Requestor Provider Service Requestor Request ResponseProvider Web services Requirements

clients clients

Composition of Web Services XML-based standards

UDDI: Service Universal Description, Specification WSDL: Discovery and Integration Web Services DiscoveryDiscovery Description Language AgencyAgency ??? Query Publish Service Specification Does the service fit? Web Repository ServiceService Interact ServiceService Requestor Provider Service • interface Requestor Request ResponseProvider Requirements • behavior SOAP: Simple Object Access Protocol