1. Unit 2: Web Technologies (1/2)
 Core
 Web browsers and web servers
 URIs
 HTTP
 Client-Side
 Basic: HTML, CSS
 Advanced: JavaScript, DOM, AJAX, XForms, RIA
 Server-Side technologies for Web Applications
 CGI
 PHP
 Java Servlets
 JavaServer Pages (JSPs)
dsbw 2008/2009 2q 1

2. World Wide Web
 “The World Wide Web (known as quot;WWW', quot;Webquot; or quot;W3quot;) 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.
 WWW is a technological platform build on Internet that
encompasses components, protocols, applications, resources, ...
 Web servers
 Web browsers
 Uniform Resource Identifier (URI)
 Hypertext Transfer Protocol (HTTP)
 Hypertext Markup Language (HTML)
 Search engines
 Gateways to access non-web resources
dsbw 2008/2009 2q 2

3. World Wide Web: Typical Interaction
http://www.upc.edu
Universitat Politècnica de Catalunya
1
4
index.html
WEB SERVER
BROWSER
3
2 GET /index.html
FTP DNS … HTTP HTTP …
TCP TCP port 80
5
147.83.194.21
IP IP
Physical Net
dsbw 2008/2009 2q 3

4. The Universal Client: The Web Browser
 Web Browsers provide an –usually graphical- interface to obtain,
interpret, format and render HTML documents (pages).
 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 2008/2009 2q 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 2008/2009 2q 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 2008/2009 2q 6

7. URLs, URNs and IRIs
 A quot;Uniform Resource Locatorquot; (URL) is a URI that, in addition to
identifying a resource, provide 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%20Applicatio
ns%20with%20UML%202nd%20Ed.chm|6685541|74112A8EDD20
B521B4BCB052D0416FE7|/
 A quot;Uniform Resource Namequot; (URN) refers to a URI under the quot;urnquot;
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 2008/2009 2q 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 2008/2009 2q 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.fib.upc.edu // Compulsory if HTTP/1.1
dsbw 2008/2009 2q 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: Wed, 11 Feb 2009 11:46:12 GMT
Server: Apache/2.0.52 (Red Hat)
Last-Modified: Fri, 01 Aug 2008 08:57:22 GMT
Etag: quot;2d6c509-31b-2d7e6080“
Accept-Ranges: bytes
Content-Length: 795
Content-Type: text/html; charset=ISO-8859-1
<HTML>… </HTML>
dsbw 2008/2009 2q 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 2008/2009 2q 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 2008/2009 2q 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)
 (X)HTML 5.0 W3C Working Draft (February 2009)
 … 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 2008/2009 2q 13

14. HTML Forms
dsbw 2008/2009 2q 14

15. HTML Forms: Processing
dsbw 2008/2009 2q 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 2008/2009 2q 16

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

18. CSS: Ways of Use(2/2)
 Linked
<html>
<head>
<LINK REL=quot;STYLESHEETquot; HREF=quot;prova.cssquot;
TYPE=quot;text/cssquot;>
</head>
 Imported
<html>
<head>
<STYLE>
@import url(http://localhost/prova.css);
@import url(prova2.css);
</STYLE>
</head>
dsbw 2008/2009 2q 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.
dsbw 2008/2009 2q 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 2008/2009 2q 20

21. JavaScript: Example
<html><head><title>La Data d’avui</title>
<script language=quot;JavaScriptquot;>
function print_todays_date()
{ today = new Date();
days_ca = new Array(quot;Diumengequot;, quot;Dillunsquot;, quot;Dimartsquot;,
quot;Dimecresquot;, quot;Dijousquot;, quot;Divendresquot;, quot;Dissabtequot;);
months_ca = new Array(quot;generquot;, quot;febrerquot;, quot;marçquot;, quot;abrilquot;,
quot;maigquot;, quot;junyquot;, quot;juliolquot;, quot;agostquot;, quot;setembrequot;,
quot;octubrequot;, quot;novembrequot;, quot;desembrequot;);
document.write(days_ca[today.getDay()]+quot;, quot;);
document.write(today.getDate()+quot; de quot;);
document.write(months_ca[today.getMonth()]+quot; de quot;);
document.write(today.getFullYear());}
</script></head>
<body>
<hr>La data d’avui &eacute;s:<br><b>
<script language=quot;JavaScriptquot;> print_todays_date(); </script>
</b><hr></body></html>
dsbw 2008/2009 2q 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 2008/2009 2q 22

23. DOM: Object tree
dsbw 2008/2009 2q 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 2008/2009 2q 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
 
The web browser remains idle Event handlers may perform
while the server is processing the asynchronous calls to the server
request and building the to request new/updated data.
response.
 Such calls are sent to and
 The response – a whole HTML processed by the server without
page – is completely build on the end users noticing it. The web
server side. browser is not idle
 Server response is minimal (not a
whole HTML page)
 The new data is incorporated
dynamically on the current page
with JavaScript + DOM (DHTML)
dsbw 2008/2009 2q 25

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

29. XForms
 XForms is the next generation of HTML forms and will be the forms
standard in XHTML 2.0
 Current Status:
 XForms 1.0 (Third Edition, W3C Recommendation 29 October 2007)
 XForms 1.1 (W3C Candidate Recommendation 29 November 2007)
 XForms separates data and logic from presentation
 XForms uses XML to define, store and transport form data
dsbw 2008/2009 2q 29

30. Xforms lets you
 Check data values while the user is typing them in
 Indicate that certain fields are required.
 Integrate with Web services.
 Submit the same form to different servers.
 Save and restore values to and from a file.
 Use the result of a submit as input to a further form.
 Get the initial data for a form from an external document.
 Calculate submitted values from other values.
 Constrain values in certain ways, such as requiring them to be in a
certain range.
 Build 'shopping basket' and 'wizard' style forms without needing to
resort to scripting.
dsbw 2008/2009 2q 30

31. 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 2008/2009 2q 31

32. Java Applets: Example
<html>
<head>
<title>TicTacToe v1.1</title>
</head>
<body>
<center>
<h1>TicTacToe v1.1</h1>
<hr>
<OBJECT
codetype=quot;application/javaquot;
classid=quot;java:TicTacToe.clas
squot; width=120 height=120>
</OBJECT>
</center>
</body>
</html>
dsbw 2008/2009 2q 32

33. References
 SHKLAR, Leon et al. Web Application Architecture: Principles,
Protocols and Practices, John Wiley & Sons, 2003.
 www.w3c.org
 www.w3schools.com
 http://www-128.ibm.com/developerworks/
dsbw 2008/2009 2q 33