This document provides an overview of web technologies, including: - Core technologies like web browsers, web servers, URIs, and HTTP. - Client-side technologies like HTML, CSS, JavaScript, DOM, AJAX, and HTML5 for enhancing user interfaces. - Server-side technologies like CGI, PHP, Java servlets, and JSPs for building dynamic web applications.

1. Unit 2: Web Technologies (1/2)‫‏‬
 Core
 Web browsers and web servers
 URIs
 HTTP
 Client-Side
 Basic: HTML, CSS
 Advanced: JavaScript, DOM, AJAX, HTML 5, RIA
 Server-Side technologies for Web Applications
 CGI
 PHP
 Java Servlets
 JavaServer Pages (JSPs)‫‏‬
dsbw 2011/2012 q1 1

2. World Wide Web
 “The World Wide Web (known as "WWW', "Web" or "W3") is
the universe of network-accessible information, the
embodiment of human knowledge” (W3C)‫‏‬
 The Web was created in 1989 by Tim Berners-Lee and Robert
Cailliau working at the European Organization for Nuclear
Research (CERN) in Geneva.
 The three basic components of the initial WWW proposal:
 HTML: Markup language for formatting hypertext documents
 URI: Uniform notation scheme for addressing accessible
resources over the network
 HTTP: Protocol for transporting messages over the network
dsbw 2011/2012 q1 2

3. World Wide Web: Typical Interaction
http://www.essi.upc.edu
Departament d’ESSI
1
4
index.html
BROWSER WEB SERVER
3
2 GET /index.html
FTP DNS … HTTP HTTP …
TCP TCP port 80
5
IP IP 147.83.20.44
Physical Net
dsbw 2011/2012 q1 3

4. The Universal Client: The Web Browser
 Web Browsers provide an –usually graphical- interface to
obtain, interpret, format and render HTML documents.
 HTML documents usually have links, hyperlinks, to other
documents
 Each link is encoded through an URI (Uniform Resource
Identifier)‫‏‬
 HTML documents may contain images, audio files, etc that
are also referred through URIs and that are rendered jointly
by the browser.
 Other features:
 Cache, bookmarks, printing, off-line operation, …
 Client-side scripting support: JavaScript/ VBscript
 RIA support
 Helper Applications
 Plug-ins
dsbw 2011/2012 q1 4

5. The Web Server
 Web Servers “listen to” a TCP port -usually 80- waiting for a
client (web browser) to initiate a connection.
 Once the connection is established, the web browser sends a
request and the web server returns a response. Then the
connection is released
 HTTP is the protocol that defines such a request/response
communication
 Initially, requests were about “static” resources -HTML
documents, binary pictures, etc- stored in files reachable by
the web server.
 Other features:
 Logging
 Server-side scripting: CGI, FastCGI, SSI, ASP.NET, Java Web
Containers, PHP, etc.
dsbw 2011/2012 q1 5

6. Uniform Resource Identifier (URI)‫‏‬
 “The Web is an information space. Human beings have a lot
of mental machinery for manipulating, imagining, and finding
their way in spaces. URIs are the points in that space” (W3C)‫‏‬
 A URI is a compact sequence of characters that identifies an
abstract or physical resource. Its generic syntax defines four
parts:
<scheme name> : <hierarchical part> [ ? <query> ] [ # <fragment> ]
 Example:
http://user:pass@example.com:992/animal/bird?species=seagull#wings
login host port
authority path
scheme hierarchical part query fragment
dsbw 2011/2012 q1 6

7. URLs, URNs and IRIs
 A "Uniform Resource Locator" (URL) is a URI that provides
also a mean for locating the resource by describing its
primary access mechanism. Examples:
ftp://ftp.is.co.za/rfc/rfc1808.txt
ldap://[2001:db8::7]/c=GB?objectClass?one
mailto:John.Doe@example.com
ed2k://|file|Jim%20Conallen%20-%20Building%20Web%20Applications%20
with%20UML%202nd%20Ed.chm|6685541|74112A8EDD20B521B4BCB0
52D0416FE7|/
 A "Uniform Resource Name" (URN) refers to a URI under the
"urn" scheme (e.g urn:isbn:1892295490) or to any other URI
with the properties of a name
 The Internationalized Resource Identifier (IRI) is a URI that
may contain characters from the Universal Character Set
(Unicode/ISO 10646)‫‏‬
dsbw 2011/2012 q1 7

8. HyperText Transfer Protocol (HTTP)‫‏‬
 HTTP is the transfer protocol used throughout the Web: It
specifies what messages web browsers may send to servers
and what responses they get back in return.
 Typical interaction (HTTP/1.0 or lower):
 Web browser establishes a TCP/IP connection with the target Web
server
 Web browser sends a HTTP ASCII request over the TCP/IP connection.
 Web server returns a HTTP MIME-like response and releases the
TCP/IP connection
 HTTP/1.1 improvements:
 Persistent connections: several request/response interactions in a
single connection.
 Request pipelining: multiple HTTP requests are sent without waiting
for the corresponding responses.
dsbw 2011/2012 q1 8

9. The HTTP Request
<METHOD> <Resource_Path> <HTTP_Version> <CR> // Request
( <Attribute>: <Value> <CR> )* // Parameters
<CR> // Blank line
[Body] // If needed
 METHOD := GET | POST | HEAD | …
 Example:
GET /index.html HTTP/1.1
Host: www.essi.upc.edu // Compulsory if HTTP/1.1
dsbw 2011/2012 q1 9

10. The HTTP Response
<HTTP_Version> <Result_Code> [explanation] <CR>
( <Attribute>: <Value> <CR> )*
<CR>
[Body]
 Result_Code := 200 [OK] | 400 [Bad Request] | 404 [Not
found] | …
 Example:
HTTP/1.1 200 OK
Date: Fri, 19 Feb 2010 16:48:36 GMT
Server: Apache/2.2.14 (Unix) mod_ssl/2.2.14
OpenSSL/0.9.8l PHP/4.4.9 mod_perl/2.0.4 Perl/v5.8.9
Last-Modified: Tue, 02 Feb 2010 14:36:59 GMT
ETag: "22a7f-4270-47e9f08d3ad1f"
Accept-Ranges: bytes
Content-Length: 17008
Content-Type: text/html
<HTML>… </HTML>
dsbw 2011/2012 q1 10

11. HTTP: Two Important Remarks
 HTTP is stateless:
 The Web Server handles each HTTP request independently and
there is no easy way to keep track of each client request and to
associate it with a previous one.
 However, managing state is important for many applications: a
single use case scenario often involves navigating through a
number of Web pages. Without a state management
mechanism, you would have to continually supply all previous
information entered for each new Web page.
 HTTP is one-way:
 Clearly separated roles: Clients -Web browsers- make requests
to -Web- Servers, no vice versa.
dsbw 2011/2012 q1 11

12. HyperText Markup Language (HTML)‫‏‬
 HTML is the main publishing language of the Web.
 HTML is based on SGML (Standard Generalized Markup
Language, ISO 8879)‫‏‬
 HTML Document = Content (mostly text) + Markup
 HTML Markup allows to define
 How content must be structured
 How to render each piece of structured content
 Links to other HTML documents
 Embedded objects: images, audio, video, forms, scripts,
applets, …
 Markup is performed using tags:
<TAG (ATRIBUTE=VALUE)*> Content </TAG>
dsbw 2011/2012 q1 12

13. HTMLs
 Despite an strong effort for standardization …
 Hypertext Markup Language (First Version), published as an Internet
Engineering Task Force (IETF) working draft (June 1993).
 HTML 2.0, IETF RFC 1866 November (1995)‫‏‬
 HTML 3.2, W3C Recommendation (January 1997)‫‏‬
 HTML 4.0, W3C Recommendation (December 1997)‫‏‬
 HTML 4.01, W3C Recommendation (December 1999)‫‏‬
 ISO/IEC 15445:2000, based on HTML 4.01 Strict (May 2000)‫‏‬
 XHTML 1.0, W3C Recommendation (Published January 2000, revised
August 2002)‫‏‬
 XHTML 1.1, W3C Recommendation (May 2001)‫‏‬
 XHTML 2.0, W3C Working Draft (July 2006)‫‏‬Abandoned in 2009
 (X)HTML 5.0 W3C Working Draft
 … HTML programmers are constantly faced with the problem of
using HTML features that are not supported consistently, if at all,
across all the target browser platforms.
dsbw 2011/2012 q1 13

14. HTML Forms
dsbw 2011/2012 q1 14

15. HTML Forms: Processing
dsbw 2011/2012 q1 15

16. Cascading Style Sheets (CSS)‫‏‬
 Some HTML markup already defines how to render the
affected content …
 … however, CSS is preferable because:
 provide more flexibility and control in the specification of
presentational characteristics.
 enable a clean separation of document content from document
presentation.
 allow the reuse of a same style sheet in different HTML
documents: shared look and feel.
 Cascading here refers to a priority scheme to determine
which style rules apply if more than one rule matches against
a particular element. (≈ polymorphism rules in OO
generalization hierarchies).
dsbw 2011/2012 q1 16

17. CSS: Ways of Use (1/2)‫‏‬
 Inline
<h1 style="color: red;">CSS test</h1>
<p style="font-size: 12pt; font-family: Verdana, sans-
serif">This a test to show the different ways of using
<em style="color: green;">Cascading Style
Sheets</em>.</p>
 Embedded
<html>
<head>
<STYLE TYPE="text/css">
H1 { color: red}
P { font-size: 12pt; font-family: Verdana, sans-serif;}
EM { color: green}
</STYLE>
</head>
<body>
</body>
</html>
dsbw 2011/2012 q1 17

18. CSS: Ways of Use(2/2)‫‏‬
 Linked
<html>
<head>
<LINK REL="STYLESHEET" HREF="prova.css"
TYPE="text/css">
</head>
 Imported
<html>
<head>
<STYLE>
@import url(http://localhost/prova.css);
@import url(prova2.css);
</STYLE>
</head>
dsbw 2011/2012 q1 18

19. JavaScript
 JavaScript is an interpreted programming language that
allows to embed executable code -scripts- into a HTML
document.
 Such scripts are executed by the web browser when
rendering the HTML document.
 JavaScript is a “light” version of Java:
 Type control is not strong.
 There are “objects”, but programmers cannot define their own
classes.
 ECMAScript: JavaScript “Standard” (ECMA-262 specification
and ISO/IEC 16262). Main dialects:
 JavaScript (it’s a trademark of Sun Microsystems, used under
license by Netscape and Mozilla)
 Microsoft’s JScript
 Adobe’s ActionScript
dsbw 2011/2012 q1 19

20. JavaScript: What Can It Do?
 Put dynamic text into an HTML page
 Interact with the web browser: open new windows, show
alerts, redirect to another URI, etc.
 Read and write HTML elements (e.g. form fields)‫‏‬
 Validate form data
 Handle events : onClick, onLoad, onMouseOver, onMouseOut,
onSubmit, etc.
 Create/read/write cookies
 Cookie: information sent by a server to a web browser and then
sent back unchanged by the browser each time it accesses that
server. Cookies are used for authenticating, tracking, and
keeping data about users.
 Interact with applets
dsbw 2011/2012 q1 20

21. JavaScript: Example
<html><head><title>La Data d’avui</title>
<script language="JavaScript">
function print_todays_date()‫‏‬
{ today = new Date();
days_ca = new Array("Diumenge", "Dilluns", "Dimarts",
"Dimecres", "Dijous", "Divendres", "Dissabte");
months_ca = new Array("gener", "febrer", "març", "abril",
"maig", "juny", "juliol", "agost", "setembre",
"octubre", "novembre", "desembre");
document.write(days_ca[today.getDay()]+", ");
document.write(today.getDate()+" de ");
document.write(months_ca[today.getMonth()]+" de ");
document.write(today.getFullYear());}
</script></head>
<body>
<hr>La data d’avui &eacute;s:<br><b>
<script language="JavaScript"> print_todays_date(); </script>
</b><hr></body></html>
dsbw 2011/2012 q1 21

22. Document Object Model / DHTML
 DOM “is a platform- and language-neutral interface that will
allow programs and scripts to dynamically access and update
the content, structure and style of documents. The document
can be further processed and the results of that processing
can be incorporated back into the presented page”. (W3C)‫‏‬
 HTML/XML documents and their inner elements are handled
as objects with data and behavior (operations). The whole
structure is represented -and accessed- as a object tree.
 Dynamic HTML (DHTML): “is a term used by some vendors to
describe the combination of HTML, style sheets and scripts
that allows documents to be animated” (W3C).
 Examples: www.w3schools.com/dhtml/
dsbw 2011/2012 q1 22

23. DOM: Object tree
dsbw 2011/2012 q1 23

24. AJAX
 Asynchronous JavaScript And XML
 It is indeed a “mix” of – previous – technologies:
 standards-based presentation using (X)HTML and CSS;
 dynamic display and interaction using DOM;
 data interchange and manipulation using XML and XSLT;
 asynchronous data retrieval using XMLHttpRequest;
 and JavaScript binding everything together.
dsbw 2011/2012 q1 24

25. AJAX: before and after
before after
 The browser sends a request to  User interaction with the current
the server whenever the user page displayed by the browser
selects a link or fills a form. triggers presentation events
 Event handlers may perform
 The web browser remains idle
asynchronous calls to the server
while the server is processing the
to request new/updated data.
request and building the
response.  Such calls are sent to and
processed by the server without
 The response – a whole HTML end users noticing it. The web
page – is completely build on the browser is not idle
server side.
 Server response is minimal (not a
whole HTML page)‫‏‬
 The new data is incorporated
dynamically on the current page
with JavaScript + DOM (DHTML)‫‏‬
dsbw 2011/2012 q1 25

26. AJAX: Example
Server Script: /validate
_ajax.send()
Get parameters…do some work
XMLHttpRequest Return something…
a text message
an XML document
function doResp() { an HTML snippet
if _ajax.readyState == 4 and a javascript method
_ajax.status != 200 { whatever you want…
div=document.getElementById(‘status’)
div.innerHTML = _ajax.responseText;
Message
onChange event: status=999
_ajax = new XMLHTTPRequest(); msg=Not a valid name
_ajax.onreadystatechange = doResp;
url = ‘./validate?field=’
+this.name+‘&value=’+this.value;
_ajax.open(‘GET’, url, true )
Manolito Database
Name: Not a valid name
Web Browser Web Server
dsbw 2011/2012 q1 26

27. AJAX: uses
 Auto-complete
 Full words are suggested as the user types the first letters
 Progress bar
 To show the status of the “work in progress” in the server side
 “Real-time” validation of forms
 Without needing to fill all the form fields
 Updating the information displayed on the current page
 Without “refresh”
 Rich Internet Applications (RIA)‫‏‬
dsbw 2011/2012 q1 27

28. AJAX: Some considerations
 The XMLHttpRequest object only can make requests to the
same server that provided the web page
 AJAX Programming “from scratch” is not advised.
 Unexpected results when pressing the Back and Refresh
buttons of the browser.
 Downloading time takes longer as AJAX-enabled pages
require larger amounts of code.
 Debugging gets harder as code is executed in both browser
and server sides
 AJAX code is visible, prone to be copied and hacked.
 Servers may get overloaded for abuse of asynchronous calls.
dsbw 2011/2012 q1 28

29. HTML 5
 History:
 Project started by the Web Hypertext Application Technology
Working Group (WHATWG) in 2004:
 Web Applications 1.0
 Web Forms 2.0
 In conjunction with the W3C since 2007
 Main objective: Provide good support for modern documents and
web applications (The browser as web application platform).
 Other objectives:
 Support legacy web content and provide backward compatibility
 Cover common modern browser functionality
 Make web content authoring more uniform
 Clarify processing model
dsbw 2011/2012 q1 29

30. HTML 5 Features
 New markup
 Structure: section, article, header, footer, ...
 Multimedia: audio, video, embed, ...
 Graphics: canvas, figure, ...
 New API’s
 Timed media playback: embed interactive video and audio
easily, without plugins
 Offline Web applications: ApplicationCache
 Client-side data storage: per-session (sessionStorage) and
persistently across sessions (localStorage and client-side SQL
database storage)
 Document editing, Drag-and-drop, etc.
 More flexibility in handling syntax errors
dsbw 2011/2012 q1 30

31. HTML 5 Forms (formerly Web Forms 2.0)
 Features:
 New input types
 Basic client side validation
 Repetition blocks
 Access to remote data (for e.g. select elements)
 Examples:
<input type="email” value="a@b">
<input pattern="[1-9]{10}" value="1234567891">
<input type="number" min="7" max="25” step="2">
<input type="date” required>
dsbw 2011/2012 q1 31

32. Rich Internet Applications (RIA)‫‏‬
 RIA are Web applications that have the features and
functionality of traditional desktop applications, by executing
most of their - rich -user interfaces on the client side.
 Indeed, the RIA paradigm is a new version of the Remote
User Interface pattern for Client/Server architectures
 RIAs typically:
 run in a Web browser with/without extra software installation
 run locally in a secure environment called a sandbox
 “First generation” RIA platforms:
 Java Applets, (Microsoft) ActiveX Controls, (Macromedia) Flash
 “Second generation” RIA platforms:
 AJAX (frameworks), Adobe Flex/AIR, JavaFX, (Microsoft)
Silverlight, OpenLaszlo, …
dsbw 2011/2012 q1 32

33. Java Applets: Example
<html>
<head>
<title>TicTacToe v1.1</title>
</head>
<body>
<center>
<h1>TicTacToe v1.1</h1>
<hr>
<OBJECT
codetype="application/java"
classid="java:TicTacToe.class"
width=120 height=120>
</OBJECT>
</center>
</body>
</html>
dsbw 2011/2012 q1 33

34. References
 SHKLAR, Leon et al. Web Application Architecture: Principles,
Protocols and Practices, Second Edition. John Wiley & Sons,
2009.
 www.w3c.org
 www.w3schools.com
 http://www-128.ibm.com/developerworks/
dsbw 2011/2012 q1 34