Unit 02: Web Technologies (1/2)
-
Upload
dsbw-20112002-carles-farre-barcelona-tech -
Category
Technology
-
view
1.356 -
download
0
Transcript of Unit 02: Web Technologies (1/2)
1dsbw 2011/2012 q1
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)
Unit 2: Web Technologies (1/2)
2dsbw 2011/2012 q1
“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
World Wide Web
3dsbw 2011/2012 q1
World Wide Web: Typical Interaction
FTP HTTPDNS …
TCP
IP
WEB SERVER
http://www.essi.upc.edu
Departament d’ESSI
HTTP …
TCP
IP
BROWSER
147.83.20.44
index.html
port 80
GET /index.html
Physical Net
1
2
3
4
5
4dsbw 2011/2012 q1
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
The Universal Client: The Web Browser
5dsbw 2011/2012 q1
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.
The Web Server
6dsbw 2011/2012 q1
“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:[email protected]:992/animal/bird?species=seagull#wings
login host port
authority path
scheme hierarchical part query fragment
Uniform Resource Identifier (URI)
7dsbw 2011/2012 q1
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:[email protected]
ed2k://|file|Jim%20Conallen%20%20Building%20Web%20Applications%20with%20UML%202nd%20Ed.chm|6685541|74112A8EDD20B521B4BCB052D0416FE7|/
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)
URLs, URNs and IRIs
8dsbw 2011/2012 q1
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.
HyperText Transfer Protocol (HTTP)
9dsbw 2011/2012 q1
<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
The HTTP Request
10dsbw 2011/2012 q1
<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 OKDate: Fri, 19 Feb 2010 16:48:36 GMTServer: 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.9Last-Modified: Tue, 02 Feb 2010 14:36:59 GMTETag: "22a7f-4270-47e9f08d3ad1f"Accept-Ranges: bytesContent-Length: 17008Content-Type: text/html<HTML>… </HTML>
The HTTP Response
11dsbw 2011/2012 q1
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.
HTTP: Two Important Remarks
12dsbw 2011/2012 q1
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>
HyperText Markup Language (HTML)
13dsbw 2011/2012 q1
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.
HTMLs
14dsbw 2011/2012 q1
HTML Forms
15dsbw 2011/2012 q1
HTML Forms: Processing
16dsbw 2011/2012 q1
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).
Cascading Style Sheets (CSS)
17dsbw 2011/2012 q1
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>
CSS: Ways of Use (1/2)
18dsbw 2011/2012 q1
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>
CSS: Ways of Use(2/2)
19dsbw 2011/2012 q1
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
JavaScript
20dsbw 2011/2012 q1
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
JavaScript: What Can It Do?
21dsbw 2011/2012 q1
<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 és:<br><b>
<script language="JavaScript"> print_todays_date(); </script>
</b><hr></body></html>
JavaScript: Example
22dsbw 2011/2012 q1
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/
Document Object Model / DHTML
23dsbw 2011/2012 q1
DOM: Object tree
24dsbw 2011/2012 q1
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.
AJAX
25dsbw 2011/2012 q1
AJAX: before and after
before
The browser sends a request to the server whenever the user selects a link or fills a form.
The web browser remains idle while the server is processing the request and building the response.
The response – a whole HTML page – is completely build on the server side.
after User interaction with the current
page displayed by the browser triggers presentation events
Event handlers may perform asynchronous calls to the server to request new/updated data.
Such calls are sent to and processed by the server without end users noticing it. The web 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)
26dsbw 2011/2012 q1
AJAX: Example
XMLHttpRequest
function doResp() {
if _ajax.readyState == 4 and
_ajax.status != 200 {
div=document.getElementById(‘status’)
div.innerHTML = _ajax.responseText;
Server Script: /validate
Database
Web ServerWeb Browser
onChange event:
_ajax = new XMLHTTPRequest();
_ajax.onreadystatechange = doResp;
url = ‘./validate?field=’
+this.name+‘&value=’+this.value;
_ajax.open(‘GET’, url, true )
Not a valid name
_ajax.send()Get parameters…do some work
Return something…
a text message
an XML document
an HTML snippet
a javascript method
whatever you want…
Message
status=999
msg=Not a valid name
Name:
Manolito
27dsbw 2011/2012 q1
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)
AJAX: uses
28dsbw 2011/2012 q1
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.
AJAX: Some considerations
29dsbw 2011/2012 q1
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
HTML 5
30dsbw 2011/2012 q1
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
HTML 5 Features
31dsbw 2011/2012 q1
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>
HTML 5 Forms (formerly Web Forms 2.0)
32dsbw 2011/2012 q1
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, …
Rich Internet Applications (RIA)
33dsbw 2011/2012 q1
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>
34dsbw 2011/2012 q1
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/
References