Web Engineering CS-4513 Prepared By: Junaid Hassan Lecturer at UOS M.B.Din Campus junaidte14@gmail.com

Topics: Technologies for Web Applications: Fundamentals Client/server communication on the web Client-side technologies Document-specific technologies Server-side technologies

Overview: The choice of appropriate technologies is an important success factor in the development of Web applications. We need to know the characteristics of technologies to be able to use them meaningfully. In addition to knowing the relevant technologies, the implementation of Web applications often requires knowledge of how different technologies interact in an existing architecture

Introduction: Once we have defined the requirements of a Web application, chosen an architecture, and developed a design, etc., in short, once we have clarified the “what”, we are ready to start the implementation phase, i.e., the “how”. The resulting requirements to the implementation of Web applications begin with the choice of appropriate technologies

Introduction: The requirements for the key principle described in Chapter 5, i.e., separation of content and presentation, is a central requirement to appropriately use technologies. In addition, we have to consider requirements for the distribution and integration of other systems according to a selected or existing architecture This concerns in particular the implementation within the three views: request (client), response (server), and the rules for the communication between these two (protocol)

Fundamentals (Markup): this section focuses on the roots, i.e., markup and hypertext. After all, markup, forms the basis for HTML and XML, while hypertext describes the basic concept of the World Wide Web The concept of markup originates from the publishing industry and generally means typographic instructions for document formatting

Fundamentals (Markup): ISO defines the following markup classes: 1. Markup: This is text inserted in a document to add information as to how characters and contents should be represented in the document. 2. Descriptive markup: This is markup that describes the structure and other attributes of a document, regardless of how this document is processed for representation (e.g., comments). 3. Processing instructions: This is markup consisting of system-specific data; it controls the way a document is processed

Fundamentals (Markup): SGML (DTD) Hypertext Hypermedia

Client/Server Communication: Client/Server communication on web is done through different protocols like HTTP, SMTP etc. Request-Response protocols Its based on 2-layer architecture (ch 4) but additional modules (database, application server etc.) may also be added thus forming an n-layer architecture These protocols control how a client should make a request, which replies a server can return, and how it should do this.

Client/Server Communication: SMTP (Simple Mail Transfer Protocol), combined with POP3 (Post Office Protocol) or IMAP (Internet Message Access Protocol) allows us to send and receive e-mail The Real Time Streaming Protocol (RTSP) represents a standard published by the Internet Engineering Task Force (IETF), and is designed to support the delivery of multimedia data in real-time conditions. In contrast to HTTP, RTSP allows the transmission of resources to the client in a timely context rather than delivering them in their entirety (at once). This transmission form is commonly called streaming

Client/Server Communication: HTTP is a text-based stateless protocol, controlling how resources, e.g., HTML documents or images ,are accessed. HTTP builds on the TCP/IP stack, where the service is normally offered over port 80. Resources are addressed by using the concept of a Uniform Resource Identifier (URI) A URI allocates unique identifiers to resources, regardless of their type (HTML documents, images, etc.). Probably the most prominent representative of URIs is the URL (Uniform Resource Locator). URLs can be used in connection with the Domain Name System (DNS) to identify hosts on which such resources are found

Client Side Technologies: Helper programs are applications that can add functionality to Web browsers. Examples of helper applications include WinZip or Acrobat Reader. A helper program has to be installed by the user on their client computer. Another examples are Chrome Extensions

Document Specific Technologies: The Hypertext Markup Language (HTML) is an SGML application, describing the elements that can be used to mark contents in a hypertext document and how these elements interrelate (in a Document Type Definition (DTD)). Markup is enclosed in “ <” and “ >” symbols. HTML defines a large number of tags to denote different semantics. For example, the <H1> tag can be used to mark a level-1 heading. Inclusion of CSS and then XML to transport and share data between applications

Document Specific Technologies: The SVG (W3C 2001a) image format stands for Scalable Vector Graphics and allows describing two-dimensional graphics in XML. SVG recognizes three types of graphics objects: vector graphics consisting of straight lines and curves, images, and text. Graphic objects can be grouped and integrated into other objects SVG supports all kinds of animations, offering a large number of functions, including one to move a graphic object along a pre-defined path

Document Specific Technologies: XML SMIL (Synchronized Multimedia Integration Language) It is possible to stop, pause, fast-forward, or rewind the entire presentation. Additional functions include random generators, slow motion, and time lapse

Server Side Technologies: URI handlers are special applications used to process HTTP requests and to deliver a requested resource. More specifically, a URI is used to identify the instance that processes a request. This instance – the specialized URI handler – takes the request and forwards it for execution. The result of this execution is then returned to the Web server, which, in turn, sends the resource to the requesting user agent

Server Side Technologies: Server Side Scripting: For example Active Server Pages (ASPs), a solution offered by Microsoft, as a representative example for an entire group of approaches that can be summarized under the catchword “server-side scripting”. Other representatives of this category are PHP, Cold Fusion, and Server-Side JavaScript introduced by Netscape as part of their LiveWire program. All URI handlers mentioned here define a script language. The commands of these script languages are embedded in HTML resources and executed by a script interpreter on the server prior to delivering the resources

Server Side Technologies: Other server side technologies include: Web services Middleware Technolgies

Summary: SGML, HTML, HTML5, CSS, CSS3, CSS Frameworks (Bootstrap, W3.css), XML Client side programming, Javascript, jQuery, Javascript and jQuery plugins, Javascript Frameworks, Node.js, AngularJS Server side programming languages, PHP, MySQL, Ajax, PHP Frameworks, Laravel, symfony, Firebase Content Management Systems (CMS), WordPress, WordPress theme & plugin development, Weebly, Weebly apps/widgets, Joomla, OpenCart

References: Text Book Ch.6