DEV034 -Web Applications, Introduction

DEV034 -Web Applications, Introduction
Presentation title DEV034 -Web Applications, Introduction General comments The goal of the general introduction is to reassure, to create a context and an ambiance, to answer the questions of the students, to start the day…. And to create a group. This part is done from: * presentation of the chairman. * Intervention of the students. This general introduction must be done for every course even if it is a self study ! The Welcome of the students is a banal phases but it must be done. The phases answer the questions Where are we ? In the C&w university ? In an Hotel , Why are we there ? Is there inconvenience ? If yes, apologies. This can be done while the students are busy drinking their coffee. Particular comments for a skills training Speakers name C&W Date

Objective of the training
Presentation title Objective of the training This course will give you an overview of web technologies. After this training, you should Have the capacity to understand the main components of a web application. Have to background necessary to follow more specialized training or to learn by yourself specific subjects in the domain of web applications (J2EE/PHP web applications/…). General comments Recall the title of the course. Why this duration and this form ? Particular comments for a skills training

Schedule of the day Schedule 09:00 – 10:45 : Training Session
Presentation title Schedule of the day Schedule 09:00 – 10:45 : Training Session 10:45 – 11:00 Break 11:00 – 12:30 Training Session 12:30 – 13:30 Lunch 13:30 – 15:15 Training Session 15:15 – 15:30 Break 15:30 – 17:00 Training Session General comments Present the agenda of a day and define rules as well as no mobile phone during training session. TURN IT OFF Introduce break and what hapens during breaks. Particular comments for a skills training

Training session Teaching from PPT. Examples and stories Exercises
Presentation title Methods and tools Training session Teaching from PPT. Examples and stories Exercises Open discussion General comments What are the tools used during training session ? Particular comments for a skills training If a pc is necessary during the session, precise that during the theory, it’s not allowed to use the pc. Insist that it’s a rule to respect !

Presentation title Methods and tools The objectives of the training is to give you an overview of standards, principles and techniques in the domain of web applications. General comments Particular comments for a skills training

Agenda First day : Introduction Theory : HTTP, XML, HTML, CSS, …
Presentation title Agenda First day : Introduction Theory : HTTP, XML, HTML, CSS, … Demonstrations Exercises Second day: Reminder Theory : server side techniques, web services, security, … General comments Recall the title of the course. Give a general overview of the complete agenda of the training. Particular comments for a skills training

Why this training session?
Presentation title Why this training session? This training session is a part of the skills training program. It‘s a pre-requisite to obtain more specialized skills: development of web applications with PHP or with Java J2EE.

Web Applications Global scheme of our presentation.
Presentation title Web Applications Global scheme of our presentation. Introduction Communication between client & server Client-side Server-Side Web-services & SOA RSS Security & Authentication

Introduction - What is a web application?
Presentation title Introduction - What is a web application? Web application Client-side server-side protocol Client application Generic server My web application Stored data

Presentation title Introduction – Application tiers: client / server, n-tiers applications Client side Fat Client UI Layer Light Client Client interface Business Layer Business Data Layer Data Data Server side

Introduction – classic dialog between the web-client and the server
Presentation title Introduction – classic dialog between the web-client and the server The classical exchange between a web client (web browser) and a web-server Web browser URL http get HTTP server Tcp/ip http answer & html page The user clicks on a hyperlink (or type the URL), the browser send an HTTP get message. The message is transferred on a TCP/IP channel. The server treats the request and returns an html page embedded into an HTTP answer. The answer may consist of different content than an HTTP page (for example, an image). The “content type” is specified with a value defined by the MIME standard.

Web Applications Global scheme of our presentation.
Presentation title Web Applications Global scheme of our presentation. Introduction Communication between client & server Client-side Server-side Web-services & SOA RSS Security & Authentication

Communication & common standards
Presentation title Communication & common standards We will introduce here some subjects concerning as well the client- side than the server side. TCP/IP : communication channel for HTTP messages HTTP : basic dialogs between the client and the server Mime : definition of content-types URL : mean to address web resources

TCP/IP Transport Communication Protocol / Internet Protocol
Presentation title TCP/IP Transport Communication Protocol / Internet Protocol Communication point to point in connected mode at least during a request/answer exchange. Each extremity is addressed via an IP address and a port number.

Resource (HTML page, image, …)‏
Presentation title HTTP An HTTP channel links two programs through internet (or an intranet) for simple request/answer dialogues. HTTP messages are transferred as well for the request (from the client to the server) than for the answer (from the server to the client). http action Client application HTTP server http answer Resource (HTML page, image, …)‏

HTTP - message. An HTTP message is composed of
Presentation title HTTP - message. An HTTP message is composed of a start line : an action (for a request) or a status (for an answer), a message header a blank line to separate the header from the body an optional message body. The message header is composed of couple of fields and value, following the template : <fieldName>:<fieldValue> The length, the type, the encoding of the content of the message body are given by the value of specific header fields. For a full description see

HTTP - actions. HTTP has few actions (HTTP Methods):
Presentation title HTTP - actions. HTTP has few actions (HTTP Methods): GET : get a resource (=> display an HTML page, download a file, execute a script producing an HTML page). Usable to submit a form but all input fields are transferred as arguments in the URL. POST : post the submission of a form; the input fields are transferred as content of the HTTP message. PUT : transfer a local resource to the host machine(upload); this is seldom allowed. HEAD : get information on a resource DELETE : delete a resource on the host machine; this is seldom allowed. TRACE : trace the network path to reach a resource.

Presentation title HTTP – answer status In the start line of an answer, the server put a status. Most used status are: 200 : OK 301 : Moved Permanently 307 : Moved Temporarily 401 : Unauthorized 404 : Not found 500 : Internal error

Presentation title HTTP header The header of an HTTP message may contain different types of variables: General variables Specific variables for requests Specific variables for answers Attributes of the body

HTTP header – General variables
Presentation title HTTP header – General variables Cache specifications (no-cache, no-store, max-age, …)‏ Connection specification (close/keep-alive)‏ Directives for proxies and authentication servers Transfer encoding …

HTTP header - Specific variables for requests
Presentation title HTTP header - Specific variables for requests Acceptable media types Acceptable char-set Authorization (schema, user, password)‏ Cookie Conditions to get the resource (IF-Modified-Since, IF-Unmodified- Since, …)‏ Referrer User-Agent (client program)‏ …

HTTP header - Specific variables for answers
Presentation title HTTP header - Specific variables for answers Location Age Set-Cookie WWW-Authenticate …

HTTP header - Attributes of the body
Presentation title HTTP header - Attributes of the body Content encoding Content-Length Content-Location Content-Type Expiration date Last modification date …

HTTP – example of GET call from an URL and answer
Presentation title HTTP – example of GET call from an URL and answer Call: GET /cgi-bin/displayCurrentDate.pl HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-ms-application, application/vnd.ms-xpsdocument, application/xaml+xml, application/x-ms-xbap, application/x-shockwave-flash, */* Accept-Language: fr UA-CPU: x86 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR ; Media Center PC 5.0; .NET CLR )‏ Host: localhost:8080 Connection: Keep-Alive Answer: HTTP/ OK Date: Wed, 24 Sep :35:48 GMT Server: Apache/2.2.9 (Win32) PHP/5.2.6 Keep-Alive: timeout=5, max=100 Transfer-Encoding: chunked Content-Type: text/html; charset=iso <html>24/09/ :35:48</html>

HTTP – example of GET call from a simple form
Presentation title HTTP – example of GET call from a simple form Call: GET /cgi-bin/printenv.pl?subject=Reclamation HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-ms-application, application/vnd.ms-xpsdocument, application/xaml+xml, application/x-ms-xbap, application/x-shockwave-flash, */* Accept-Language: fr UA-CPU: x86 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR ; Media Center PC 5.0; .NET CLR )‏ Host: localhost:8080 Connection: Keep-Alive Answer: HTTP/ OK Date: Wed, 24 Sep :59:57 GMT Server: Apache/2.2.9 (Win32) PHP/5.2.6 Keep-Alive: timeout=5, max=100 Transfer-Encoding: chunked Content-Type: text/html; charset=iso 653 <html> .. <br>QUERY_STRING="subject=Reclamation" <br>REQUEST_METHOD="GET" ... <br></html>

HTTP – example of POST call from an URL and answer
Presentation title HTTP – example of POST call from an URL and answer Form: <html> <head> <title>A simple HTML page with a single form</title> </head> <body> <form action=" method=”POST”> request subject:<input type="text" name="subject"></input> Do you confirm your request? <input type="submit" value="OK"> <input type="submit" value="Cancel"> </form> <a href="simplePage.htm">Simple HTML page</a> </body> </html>

HTTP – example of POST call from a simple form
Presentation title HTTP – example of POST call from a simple form Call: POST /cgi-bin/printenv.pl HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-ms-application, application/vnd.ms-xpsdocument, application/xaml+xml, application/x-ms-xbap, application/x-shockwave-flash, */* Accept-Language: fr Content-Type: application/x-www-form-urlencoded UA-CPU: x86 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR ; Media Center PC 5.0; .NET CLR )‏ Host: localhost:8080 Content-Length: 19 Connection: Keep-Alive Cache-Control: no-cache subject=Reclamation

HTTP – example of POST call from a simple form
Presentation title HTTP – example of POST call from a simple form Answer: HTTP/ OK Date: Wed, 24 Sep :09:18 GMT Server: Apache/2.2.9 (Win32) PHP/5.2.6 Keep-Alive: timeout=5, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html; charset=iso 69f <html> <br>CONTENT_LENGTH="19" ... <br>QUERY_STRING="" <br>REQUEST_METHOD="POST" <br></html>

Presentation title HTTP cookies Cookies are data stored on client-side (via a local file). Those data are transferred by the HTTP messages. The web application returns a “Set-Cookie” instruction in the http header. The web browser will send back this cookie, in the http header of each next calls. The cookie may have a deletion date. Without date, a cookie disappears when the user closes the web-browser. A cookie is identified by a name, a domain and a path. By default, the domain is the name of the site that returned the cookie. By default, the path is the path of the resource that returned the cookie. When the browser gets a resource, he inserts the active cookies registered for the domain and the path of the resource.

Presentation title HTTP cookies The usage of Cookies on some sites may be a breach of privacy. It’s possible to set your browser options to deactivate cookies.

Presentation title HTTP cookies – Example – First call from the web-browser to the web application. GET /servlets-examples/servlet/SessionExample HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/xaml+xml, application/vnd.ms-xpsdocument, application/x-ms-xbap, application/x-ms-application, application/x-silverlight, application/x-shockwave-flash, */* Accept-Language: fr-ch UA-CPU: x86 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; InfoPath.1; .NET CLR ; .NET CLR ; .NET CLR )‏ Host: localhost Connection: Keep-Alive

Presentation title HTTP cookies – Example - HTTP answer from the web application to the web-browser HTTP/ OK Server: Apache-Coyote/1.1 Set-Cookie: JSESSIONID=4BC3CDACCD53684EFC312B7E79D0D791; Path=/servlets-examples Content-Type: text/html;charset=ISO Content-Length: 1305 Date: Mon, 06 Oct :08:35 GMT <html> … </html>

HTTP cookies – Example – next call from client
Presentation title HTTP cookies – Example – next call from client GET /servlets-examples/servlet/SessionExample HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/xaml+xml, application/vnd.ms-xpsdocument, application/x-ms-xbap, application/x-ms-application, application/x-silverlight, application/x-shockwave-flash, */* Accept-Language: fr-ch UA-CPU: x86 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; InfoPath.1; .NET CLR ; .NET CLR ; .NET CLR )‏ Host: localhost Connection: Keep-Alive Cookie: JSESSIONID=4BC3CDACCD53684EFC312B7E79D0D791

Presentation title HTTP re-location When with your web browser you call for a resource, the server may answer that the resource is present at another location. The “location” header field is the used for this purpose. Example – call from the client GET /servlets-examples HTTP/1.1 ... Answer from the server HTTP/ Déplacé Temporairement Server: Apache-Coyote/1.1 Location: Transfer-Encoding: chunked Date: Mon, 06 Oct :16:25 GMT New call from the client GET /servlets-examples/ HTTP/1.1 …

Presentation title HTTPS Secure version of HTTP. Usage of Secure Socket Layer (SSL) or Transport Layer Security (TLS) protocol. The content of the message is encrypted and the server is authenticated by an electronic certificate. The sender may also be authenticated. An URL for an HTTPS call begins with “ instead of “ for an HTTP call.

Communication & common standards – Where are we now?
Presentation title Communication & common standards – Where are we now? TCP/IP : communication channel for HTTP messages HTTP : basic dialogs between the client and the server Mime : definition of content-types URL : mean to address web resources

Common standards - Mime types
Presentation title Common standards - Mime types In web applications, we use different types of files : files referred in HTML pages, files returned to the browser. Multipurpose Internet Mail Extensions (MIME) is an Internet standard that extends the format of to support: text in character sets other than US-ASCII; non-text attachments; message bodies with multiple parts header information in non-ASCII character sets. MIME's use, however, has grown beyond describing the content of to describing content type in general. Extract of The list of registered types is available on

Presentation title URL Uniform Resource Locator (URL) is a way to identify resources on internet. A resource is supposed to identify either a static content (an HTML page, an image) or a call to a process that will create dynamically such content.

Presentation title Elements of an URL o>][?<query>][#<bookmark>] Protocol. Examples: http, ftp. User : user ID. Password : user password. Host: Server address; IP address or IP name. Port : server port. Number of TCP/IP port, 80 by default for http, 443 for https. Path to a file or a program (script, servlet, …). Path info : path after the name of a program Query : usually a list of couple <field>=<value> Bookmark : name of an anchor of an HTML page (to point to a position in the resource.

Absolute Vs relative URL in an HTML page
Presentation title Absolute Vs relative URL in an HTML page In an HTML page, we will use URLs for forms actions, inclusion of images, hyperlinks on different pages, links to CSS files, … You may use complete URL (“ or shortened URLs beginning with: “//<hostName>/<resourcePath>” “/<resourcePath>” “<relativeResourcePath>” The relative resource path is related to the “base path” of the current HTML page. The “base path” is either the base of the resource that produced the current HTML page or the value of the attribute “href” of a “base” tag in the current HTML page (the “base” tag should be a direct child of the “head” tag).

Presentation title URL encoding Some characters have to be encoded in URLs send by the client: Ascii controls characters (non printable chars, codes 0-31 and 127 decimal). Non-Ascii characters (codes decimal). Characters used in the syntax of the URL (reserved chars)‏ Unsafe chars: Some characters present the possibility of being misunderstood within URLs for various reasons. The way to encode chars is: ‘%’<char code in hexadecimal> ‘+’ : replace a space == %20

Web Applications Where are we now?
Presentation title Web Applications Where are we now? Introduction Communication between client & server Client-side Server-Side Web-services & SOA RSS Security & Authentication

Client-side - Main Web Standards and techniques
Presentation title Client-side - Main Web Standards and techniques HTML : description of the content to display in the current page of the browser CSS : styles to apply to HTML tags. Scripting : JavaScript, VBScript Client side embedded objects

Presentation of HTML SGML HTML XML X-HTML
Presentation title Presentation of HTML HTML is a language based on the usage of tags. HTML is a language created with SGML. XML is a subset of SGML, it’s a meta-language (a language used to define specific languages). X-HTML is a subset of HTML conformed to SGML and described by an XML Schema. SGML HTML XML X-HTML

Presentation title XML XML is a meta-language (a language used to define specific languages). An XML file can be well formed : respect some rules Allowed chars (no “<“ and “&” chars in the content)‏ Correct tagging of elements: <tag>….</tag> (the close tag is mandatory), correct usage of attributes of elements (attributes values enclosed in single or double quotes). Presence of a root tag Tags incorrect imbrications : <tag1><tag2></tag1></tag2> not allowed valid : conform to a language defined for XML (the definition is written with a DTD or with a XML Schema).

XML – Example, instance + DTD
Presentation title XML – Example, instance + DTD Instance <?xml version=“1.0”?> <!DOCTYPE client SYSTEM “clients.dtd”> <clients> <client id=“C1”> <name>Dupont & Dupond</name> </client> <client id=“C2”> <name>Gaston Lagaffe</name> <country>Belgium</country> </clients> clients.dtd <!ELEMENT clients (client*) > <!ELEMENT client (name, country?) > <!ELEMENT name (#PCDATA) > <!ELEMENT country (#PCDATA) > <!ATTRIBUTES client ID CDATA #REQUIRED>

XML – Example, instance + XSD
Presentation title XML – Example, instance + XSD Instance <?xml version=“1.0”?> <clients xmlns=" xmlns:xsi=" xsi:schemaLocation=" clients1.xsd"> <client id=“C1”> <name>Dupont & Dupond</name> </client> <client id=“C2”> <name>Gaston Lagaffe</name> <country>Belgium</country> </clients> clients.xsd <schema xmlns=' targetNamespace=' xmlns:t=' <element name='clients'> <complexType> <sequence> <element ref='t:client' minOccurs='0' maxOccurs='unbounded'/> </sequence> </complexType> <attribute name="id" type="ID"/> </element> <element name='client'> <element ref='t:name'/> <element ref='t:country' minOccurs='0' maxOccurs='1'/> <element name='name'> <complexType mixed='true'> <element name='country'> </schema>

Presentation of HTML … elements, tags
Presentation title Presentation of HTML … elements, tags A tag is a delimiter placed between “<“ and “>”. In fact, tags are used to delimit sections of text where you can have other tags. Elements are words of the tagged language. For example in HTML “H1”, “input”, “table” are elements. In HTML, the name of the element can be written in upper or lower case. Tags are, in principle, used by couple to mark the beginning and the end of an element: openTag : <elementName> closeTag : </elementName> Example : <H1><bold>R</bold>eport</H1>

Presentation of HTML … attributes
Presentation title Presentation of HTML … attributes In the openTag, you can insert a list of attributes & values. An attribute is a characteristic of your tag. The syntax of an open tag with attributes is: <elementName attr1Name=“attr1Value” attr2Name=“attr2Value” …> For example, in a HTML anchor you should place an “href” attribute to form a link. <a href=“ In HTML, attributes are often optional. The order of attributes are not significant. The value of an attribute should be delimited by single quotes or double quotes. In Html, you could omit the quotes if the value is a single word.

Presentation of HTML … main tags
Presentation title Presentation of HTML … main tags Main structure of the content : HTML (root element), HEAD (meta-data & scripts), BODY (visible content). Textual content: Headings : H1, H2, …, H6 Paragraphs : P Lists : OL, UL, LI Inline style : B,I, U, S, SUP, SUB, FONT Inline semantic formatting : ABR, CITE, CODE, DFN, EM, SAMP, STRONG, VAR Line breaks : BR Presentation : CENTER, PRE Organization : DIV

Presentation of HTML … main tags
Presentation title Presentation of HTML … main tags Horizontal line : HR Tables : TABLE, TH, TR, TD Links & anchors : A, LINK Images : IMG, MAP See for the full specification.

Presentation of HTML … entities
Presentation title Presentation of HTML … entities Some characters can’t be included directly because they have a special meaning in the XML/SGML tagging: <, >, “, & Named entities have been defined to replace those chars : “<” , “>”, “"”, “&” You may also insert the ascii code of special chars : “&#<code>;” – Example : “"”

A simple HTML page Presentation title <html> <head>
<title>A simple HTML page</title> </head> <body> <h1>HTML or XHTML</h1> <ul> <li>HTML is very flexible but can interpreted differently on different browsers</li> <li>XHTML is more rigorous, the validity can be controlled </li> </ul> <a href=“simpleForm.htm”>Simple HTML form</a> </body> </html>

A simple HTML form Presentation title <html> <head>
<title>A simple HTML page with a single form</title> </head> <body> <form action=“confirm”> Do you confirm your request? <input type=“submit” value=“OK”> <input type=“submit” value=“Cancel”> </form> <a href=“simplePage”>Simple HTML page</a> </body> </html>

Presentation of HTML … main tags for forms
Presentation title Presentation of HTML … main tags for forms root element of the form part : FORM. input zones : INPUT (type=“text”/”password”, ”checkbox”/”radio”), TEXAREA, SELECT. buttons : INPUT (type=“button”/“submit”/”reset”). hidden fields : INPUT (type=“hidden”). file to post : INPUT (type=“file”).

Presentation title HTML - Frames An HTML page (frame set) can be divided in different independent zones called frames. Example: <html> <frameset cols="250,*"> <frame src="SimplePage.htm"> <frame src="SimpleForm.htm"> </frameset> </html>

Client-side - Main Web Standards and techniques Where are we now?
Presentation title Client-side - Main Web Standards and techniques Where are we now? HTML : description of the content to display in the current page of the browser CSS : styles to apply to HTML tags. Scripting : JavaScript, VBScript Client side embedded objects

CSS – a simple HTML page with embedded CSS
Presentation title CSS – a simple HTML page with embedded CSS <html> <head> <title>A simple HTML page</title> <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00; color: #0000ff} li {font-family: courier} </style> </head> <body> <h1>HTML or XHTML</h1> <ul> <li>HTML is very flexible but can interpreted differently on different browsers</li> <li>XHTML is more rigorous, the validity can be controlled </li> </ul> <a href="simpleForm.htm">Simple HTML form</a> </body> </html>

CSS – a simple HTML page with external CSS.
Presentation title CSS – a simple HTML page with external CSS. SimplePageWithExternalCss.htm <html> <head> <title>A simple HTML page</title> <link rel="stylesheet" type="text/css" href="simple.css" /> </head> <body> <h1>HTML or XHTML</h1> <ul> <li>HTML is very flexible but can interpreted differently on different browsers</li> <li>XHTML is more rigorous, the validity can be controlled </li> </ul> <a href="simpleForm.htm">Simple HTML form</a> </body> </html> simple.css body {background-color: yellow} h1 {background-color: #00ff00; color: #0000ff} li {font-family: courier}

CSS syntax - style on element, id, class
Presentation title CSS syntax - style on element, id, class The syntax to define a style is: <selector>{ <propertyName>=<value>; <attributeName>=<value>; …} The selector give one or more targets (target1, target2, …). Each target can be all HTML elements with a given tag all HTML elements with a given tag and a specific value in a given attribute all HTML elements having a given id all HTML elements having a given class a combination of previous criteria For a list of available properties see

CSS syntax - style on id - example
Presentation title CSS syntax - style on id - example <html> <head> <title>A simple HTML page</title> <style type="text/css"> #important{color: #ff0000} </style> </head> <body> <h1>HTML or XHTML</h1> <ul> <li id="important">HTML is very flexible but can interpreted differently on different browsers</li> <li>XHTML is more rigorous, <strong id="important">the validity can be controlled</string> </li> </ul> <a href="simpleForm.htm">Simple HTML form</a> </body> </html>

CSS syntax - style on class - example
Presentation title CSS syntax - style on class - example <html> <head> <title>A simple HTML page</title> <style type="text/css"> .important{color: #ff0000} </style> </head> <body> <h1>HTML or XHTML</h1> <ul> <li class="important">HTML is very flexible but can interpreted differently on different browsers</li> <li>XHTML is more rigorous, <strong class="important">the validity can be controlled</string> </li> </ul> <a href="simpleForm.htm">Simple HTML form</a> </body> </html>

CSS Syntax – Pseudo-classes
Presentation title CSS Syntax – Pseudo-classes Pseudo classes are defined in CSS to let you define dynamic presentation of links when not visited / visited : a:link / a:visited some elements when there are surrounded by the mouse or received the focus or become active : hover, focus, active to let you select elements in the HTML tree: First child of any HTML element: first-child First line of a textual element : p:first-line First char of a textual element : p:first-letter to let you give attributes of the page to let you select elements expressed in a given language: lang

CSS Syntax – Pseudo-classes - Example
Presentation title CSS Syntax – Pseudo-classes - Example <html> <head> <title>A simple HTML page</title> <style type="text/css"> a:hover{font-style: oblique} p:first-line{font-weight: bold} </style> </head> <body> <h1>HTML or XHTML</h1> <ul> <li id="important"><p>HTML is very flexible <BR>but can interpreted differently on different browsers</p></li> <li>XHTML is more rigorous, <strong id="important">the validity can be controlled</string> </li> </ul> <a href="simpleForm.htm">Simple HTML form</a> </body> </html>

HTML & Client side scripting
Presentation title HTML & Client side scripting HTML syntax include a “script” tag. <script type=“…”> // script code directly included in your HTML page </script> Or <script type=“…” url=“…”></script> <!– script in an external file--> <script language=“javascript”>…</script> : Obsolete! Defined types: text/ecmascript text/javascript application/ecmascript application/javascript text/vbscript

JavaScript JavaScript is an interpreted language used mainly to give dynamical behavior into HTML pages. JavaScript has a different syntax than Java. Main characteristics: small, lightweight language object oriented variable data types are not declared (dynamic typing). prototype-based object model Reference :

JavaScript – example of definition of an object type
function mycircle(x,y,r) { this.xcoord = x; this.ycoord = y; this.radius = r; this.retArea = getTheArea; //This next line uses an alternative syntax this.retCirc = function () { return ( Math.PI * this.radius * 2 ); }; this.mvBy = mvCclBy; } function getTheArea() { return ( Math.PI * this.radius * this.radius ); function mvCclBy(xDis,yDis) { this.xcoord += xDis; this.ycoord += yDis; /* create a mycircle called testcircle where testcircle.xcoord is 3 and testcircle.ycoord is 4 and testcircle.radius is 5 */ var testcircle = new mycircle(3,4,5); use the mvBy method to displace the centre of testcircle. move it by 2 in the x direction and 3 in the y direction testcircle.mvBy(2,3); //testcircle.xcoord is now 5 and testcircle.ycoord is now 7 window.alert( 'The area of the circle is ' + testcircle.retArea() ); window.alert( 'The circumference is ' + testcircle.retCirc() ); Extract of

HTML & Client side scripting – event handlers
Presentation title HTML & Client side scripting – event handlers Some HTML tags have attributes used to call scripts functions.

HTML & Client side scripting – event handlers - example
Presentation title HTML & Client side scripting – event handlers - example <html> <head> <title>A simple example of java script and event handlers</title> <script language="javascript"> function callSelectedPage(){ var selectControl = document.selectform.selectpage; var selectedPage = selectControl.options[selectControl.selectedIndex].text document.location= selectedPage + ".htm"; } </script> </head> <body> <form name="selectform"> <h1>selection of one of an HTML page selected in a list</h1> <select name="selectpage"> <option>SimplePage</option> <option>SimpleForm</option> <option>SimplePageWithEmbeddedCssWithStyleOnClass</option> </select> <a href="#" onclick="javascript:callSelectedPage();return(false);">call selected HTML page</a> </form> </body> </html>

HTML & Client side embedded objects
Presentation title HTML & Client side embedded objects An HTML page can embed objects using the “object” tag. Such “object” has a type (“type” attribute), a path to the code ( “codebase” attribute), a region in the screen (“height”, “width” attributes) and other attributes. The XML “object” tag may have sub-elements to give supplementary information to the object. The main objects types are: ActiveX : Ms-Windows components that you may insert in an HTML page. Applets : Java classes that you may insert in an HTML page.

HTML & Client side objects - ActiveX - Example
Presentation title HTML & Client side objects - ActiveX - Example <html> <H1> test ActiveX </H1> <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B " codebase=" WIDTH="550" HEIGHT="400" id="myMovieName"> <PARAM NAME=movie VALUE=" <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="/support/flash/ts/documents/myFlashMovie.swf" quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400" NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE=" </EMBED> </OBJECT> </html>

HTML & Client side objects - Flash - Example
Presentation title HTML & Client side objects - Flash - Example <html> <H1> test embedding direct flash content </H1> <div class="resultObject"> <object type="application/x-shockwave-flash" data=" width="320" height="240"> <param name="movie" value=" <param name="loop" value="false"> alt : <a href="data/test.swf">test.swf</a> </object> </div> </html>

HTML & Client side objects - Applet
Presentation title HTML & Client side objects - Applet Applets are Java classes written to be embedded in an HTML page. There are loaded and executed by the client-browser.

HTML & Client side objects – Applet – Example 1
Presentation title HTML & Client side objects – Applet – Example 1 DisplayCurrentDateApplet.html <html> <H1>Embedding of a simple applet displaying the current date and time</H1> <APPLET CODE="appletsExercices.AppletTest1" WIDTH=400 HEIGHT=180></APPLET> </html> appletsExercices.java package appletsExercices; import java.applet.Applet; import java.awt.Graphics; import java.util.Date; public class AppletTest1 extends Applet{ private static final long serialVersionUID = 1L; public void paint(Graphics g){ g.drawString("Current date and time:" + (new Date()).toString(),10,10); }

HTML & Client side objects – Applet – Example 2
Presentation title HTML & Client side objects – Applet – Example 2 <html> <H1>A calculator as applet</H1> <APPLET CODE="appletsExercices.CalculatorApplet" ARCHIVE="swing.jar" WIDTH=180 HEIGHT=180></APPLET> </html>

Server-side of web Applications Presentation scheme
Presentation title Server-side of web Applications Presentation scheme History CGI HTML pages with embedded code executed server side Custom program executed by a web application container How to create a session context with a not-connected protocol Application/ session / request / page contexts. Logical separation of UI / business / data. MVC Principle Languages to create the view AJAX Data Layer

Standards & techniques on the server-side
Presentation title Standards & techniques on the server-side History: Beginning : static HTML pages served by HTTP servers First generation of server applications: the CGI protocol – applications executed as standalone programs – applications written mainly in C, Perl. The HTML code is directly produced by a program. Second generation, type 1 : the client calls an HTML page with embedded code. This code is executed server side. Second generation, type 2 : program executed by an web application container. The client calls a program (as for the first generation) but this code is directly executed by the server in the same process.

Presentation title CGI call The execution of a script is made through several processes launched at each call. HTTP get script Client appl. HTTP server Exec Command Interpreter Script Exec Script- Interpreter

Presentation title CGI - Transfer of information from the client to a server script through the CGI protocol Two modes of HTTP calls: Get : all user input fields are transferred to the script through the environment variable named “QUERY_STRING” Post : all user input fields are transferred on STDIN, the env variable “CONTENT_LENGTH” gives the number of bytes to read. In the both cases additional information are passed via other environment variables: REQUEST_METHOD: GET/POST PATH_INFO: part of the URL path after the name of the script HTTP_ACCEPT : the mime types the client accept REMOTE_USER : the ID of the user if identified by the server ...

CGI – Example 1 @echo off echo Content-type: text/html echo.
Presentation title CGI – Example 1 @echo off echo Content-type: text/html echo. echo ^<HTML^> echo ^<H1^>Test^</H1^> echo the current date is: echo %date% echo ^</HTML^>

CGI – Example 2 #!c:/Perl/bin/perl.exe ##
Presentation title CGI – Example 2 #!c:/Perl/bin/perl.exe ## ## displayCurrentDate.pl -- demo CGI program which just prints the current date and time print "Content-type: text/html; charset=iso \n\n"; print "<html>"; my ($sec,$min,$hour,$mday,$mon,$year,$wday,$yday,$isdst) = localtime; $year += 1900; $mon += 1; my $datetime = sprintf "%02d/%02d/%04d %02d:%02d:%02d", $mday, $mon, $year, $hour, $min, $sec; print $datetime; print "</html>";

Server-side of web Applications Where are we now?
Presentation title Server-side of web Applications Where are we now? History CGI HTML pages with embedded code executed server side Custom program executed by a web application container How to create a session context with a not-connected protocol Application/ session / request / page contexts. Logical separation of UI / business / data. MVC Principle Languages to create the view AJAX JSF Data Layer

Presentation title Standards & techniques on the server-side Second generation, type 1 : the client calls an HTML page with embedded code (or specific tags). This code is executed server side. JSP : Java Server pages ASP : active server pages PHP Coldfusion

PHP code embedded in an HTML page - example
Presentation title PHP code embedded in an HTML page - example <html> <head> <title>Display current date</title> </head> <body> <?php print "current date:"; print(Date("l F d, Y")); ?> </body> </html>

Simple JSP Example <html> <body>
Presentation title Simple JSP Example <html> <body> <%= "current Date and time :" + (new java.util.Date()).toString() %> </body> </html>

Presentation title Server-side of web Applications Where are we now? History CGI HTML pages with embedded code executed server side Custom program executed by a web application container How to create a session context with a not-connected protocol Application/ session / request / page contexts. Logical separation of UI / business / data. MVC Principle Languages to create the view AJAX Data Layer

Presentation title Standards & techniques on the server-side Second generation of server applications, type 2: web application containers. The client calls a program (as for the first generation) but this code is directly executed by the server in the same process. Java J2EE web container: servlets (+ JSP for the view). Perl with modPerl on Apache server WebObjects (Apple)‏

Presentation title Web application call The execution of a web application is made by the application server that already hosts the interpreter of the language used. HTTP get ../script Client appl. HTTP server Script- Interpreter Load and execute Script

Web application call via a J2EE webContainer
Presentation title Web application call via a J2EE webContainer With a J2EE server, the HTTP client calls a servlet directly executed by the J2EE web container. J2EE server HTTP get ../servlet Client appl. J2EE web container JVM Servlet J2EE EJB Container JVM EJB

Transfer of information from the client to a servlet
Presentation title Transfer of information from the client to a servlet Two modes of HTTP calls: Get : call of doGet(HttpServletRequest req, HttpServletResponse res)‏ Post : call of doPost(HttpServletRequest req, HttpServletResponse res)‏ In both cases, the req object gives access to the data transferred by the client application.

Example 1 of servlet Presentation title /*
Simple Servlet Example, extends HttpServlet */ package servletsExercices; import java.io.IOException; import java.io.PrintWriter; import java.util.Date; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class Servlet1 extends HttpServlet{ static final long serialVersionUID = 1; public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException,IOException{ PrintWriter out = res.getWriter(); res.setContentType("text/html"); out.println("<HTML>"); out.println("The current date and time is "); out.println((new Date()).toString()); out.println("</HTML>"); }

Example 2 of servlet Presentation title import java.io.*;
import java.util.*; import javax.servlet.*; import javax.servlet.http.*; public class Servlet8 extends HttpServlet{ static final long serialVersionUID = 1; public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException,IOException{ PrintWriter out = res.getWriter(); res.setContentType("text/html"); out.println("<HTML>"); out.println("<H3>main variables defined in the CGI protocol</H3><BR>\n"); out.println("REQUEST_METHOD :" + req.getMethod()+"<BR>\n"); out.println("PATH_INFO :" + req.getPathInfo()+"<BR>\n"); out.println("QUERY_STRING :" + req.getQueryString()+"<BR>\n"); out.println("REMOTE_HOST :" + req.getRemoteHost()+"<BR>\n"); out.println("REMOTE_ADDR :" + req.getRemoteAddr()+"<BR>\n"); out.println("CONTENT_TYPE :" + req.getContentType()+"<BR>\n"); out.println("CONTENT_LENGTH :" + req.getContentLength()+"<BR>\n"); out.println("<H3>request arguments</H3><BR>\n"); Enumeration paramNames = req.getParameterNames(); while(paramNames.hasMoreElements()){ String name = (String) paramNames.nextElement(); String value = req.getParameter(name); out.println(name + " = " + value + "<BR>\n"); } out.println("</HTML>"); public void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException,IOException{ doGet(req,res);

Example 2 of servlet - result
Presentation title Example 2 of servlet - result

How to create a session context with a not-connected protocol.
Presentation title How to create a session context with a not-connected protocol. The HTTP protocol doesn’t necessary maintain the connection between two calls to an web application. To do some treatments, it is necessary to keep information on previous requests & results. The solution is to create a logical session for each user. Each request is part of a session (except the first request, for which the server will create a new session). A session has an end triggered either by an explicit action of the user (or of the application) or by a time-out. At the end of the session, the server frees resources allocated to keep session data. Req 1 Req 2 Req n Time-out Session1 start Session end

How to create a session context with a not-connected protocol.
Presentation title How to create a session context with a not-connected protocol. Session info kept on client-side Transfer of context data via URL (in the query string) and/or via hidden fields of forms. Transfer of context data via cookies. Session info stored server-side and session ID (ticket) kept client- side Transfer of session ticket via URL and/or via hidden fields of forms. Transfer of session ticket via cookies. Usually, a web application uses a cookie to store a session ticket but if the cookies are not authorized by the web-browser (de-activated) the web application may switch automatically to the insertion of the session ticket in the call-back URLs present in the content of the page.

Application/ session / request / page contexts.
Presentation title Application/ session / request / page contexts. The HTTP protocol is not connected and has no context. An HTTP application, usually creates a session by user and may create some contexts to store and retrieve information from calls to calls. With JSP/ASP/servlets the following context scopes are available: application : information stored in this context can be shared between different entries (different servlets for a J2EE application) of the same application. session : information stored in this context can be used by the code executed after different calls of the user during the execution of the same user-session. request : information stored in this context can be used by different modules of codes chained to answer to a single call of the user. page : information stored in this context is only available to construct a single HTML page.

Logical separation of UI / business / data.
Presentation title Logical separation of UI / business / data. A good practice is to separate different concerns, in particular the user-interface, the business code, the access to data. If the design is correct, it is possible to modify or replace a component playing a specific role without any modification of the others. When you distribute a part of a layer, you have to add modules to act as an interface. UI Layer Client UI Layer Interface Server Business Layer Data Access Layer

MVC principle. MVC means Model View Controller.
Presentation title MVC principle. MVC means Model View Controller. It is a way to separate the management of the look of user-interface and the process of actions. The model is a structure of data used to exchange information between the view and the controller. The view is the expression of what the user will see (the view will be populated with data coming from the model). The controller process the actions and fills the view with results to display.

Presentation title MVC A generic controller (often furnished by a framework) calls the code implemented to achieve an action. The action code may call a business operation and may fill the model. The action code also identifies the view to return to the user. The controller calls the interpretation of the view. The view may dynamically include data stored into the model. The details of this process may differ from one framework to another. 6.Get content to return 0.Http get Generic Controller View 8.Return content 9.Http answer 1.Execute 5.Identity of the view 7. Get data Action Model 4.Fill 2. Execute 3.Return Business Operation

Languages to create the view
Presentation title Languages to create the view The principle is to separate the as much as possible the HTML from the programming code. In a web application, the view produces usually HTML code (but you can find situations where the view produces XML code or other types of content). Views are often defined as a mix of HTML code and either special tags or instructions in a hosted language (PHP, Java, VB, …). The non-HTML content is there to produce dynamically HTML to present data (injection of data, conditional production of HTML code, loops in production of HTML code, …). An other way to define dynamic behaviors in the view is to use specific tags (insertion of data, conditional sections, loops, ...).

Different languages to create the view
Presentation title Different languages to create the view For an extensive list of available templates engine for web pages, see For J2EE applications, most famous template engines are JSP (with JSTL or other custom tag libs) Apache Velocity Free Marker For PHP, see rossolini.developpez.com/comparatifs/php/templates/?page=sommaire An alternative is to use XSLT with a template in XML. Data Template Engine HTML/XML Template

Servlet + JSP (with JSTL & EL) example
Presentation title Servlet + JSP (with JSTL & EL) example Foo.jsp <html> page isELIgnored="false" %> taglib uri=" prefix="c" %> values of the bean "foo" filled by the calling servlet <ul> <c:forEach var="val" items="${foo.list}" varStatus="vs"> <li>value = ${val}</li> </c:forEach> </ul> </html> Foo.java public class Foo { String s[]; public String[] getList() { return s; } public Foo(String s[]) { this.s = s; } } FooServlet.java package servletsExercices; import java.io.*; import javax.servlet.*; import javax.servlet.http.*; import model1.Foo; public class FooServlet extends HttpServlet { private static final long serialVersionUID = 1L; public void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException String s[] = new String[] {"blue", "green", "red"}; Foo f = new Foo(s); req.setAttribute("foo", f); getServletContext().getRequestDispatcher("/foo.jsp").forward (req, res); }

J2EE JSTL & tag libs JSTL stands for Java Standard Tag Lib.
Presentation title J2EE JSTL & tag libs JSTL stands for Java Standard Tag Lib. The idea is to add specific tags in JSP pages instead of using Java code to produce dynamic HTML. See

Presentation title JSTL example taglib uri=" prefix="c" %> <html> <head> <title>Count to 10 Example (using JSTL)</title> </head> <body> <c:forEach var="i" begin="1" end="10" step="1"> <c:out value="${i}" /> <br /> </c:forEach> </body> </html>

Presentation title Velocity & freeMarker Velocity & freemarker are template engines you may use in other contexts that a call to an HTTP resource. You have to explicitly specify the association between the template and a bean and then you have to call the processing of the template. Properties p = new Properties(); p.setProperty("resource.loader", "class"); p.setProperty("class.resource.loader.class","org.apache.velocity.runtime.resource.loader.ClasspathResourceLoader"); VelocityEngine engine = new VelocityEngine(); engine.init(p); Template template = engine.getTemplate("/templates/ -workflow.vm"); // Create a context and add all the objects VelocityContext context = new VelocityContext(); context.put (“mailBody",“hello"); // Render the template for the context into a string String result = new StringWriter(); template.merge(context, result);

Velocity example <HTML> <BODY> Hello $customer.Name!
Presentation title Velocity example <HTML> <BODY> Hello $customer.Name! <br/> Here is a list of your current subscriptions:<br/><br/> <table> #foreach( $subscription in $subscriptions )‏ #if ( $customer.isSubscribed($subscription) )‏ <tr> <td> $subscription.Name </td> </tr> #end </table> </BODY> </HTML>

FreeMarker example <html> <h1>${doc.book.title}</h1>
Presentation title FreeMarker example <html> <h1>${doc.book.title}</h1> <#list doc.book.chapter as ch> <h2>${ch.title}</h2> <#list ch.para as p> <p>${p} </#list> </html>

AJAX AJAX stands for Asynchronous Javascript And XML
Presentation title AJAX AJAX stands for Asynchronous Javascript And XML It is a combination of different technologies: HTML as the main client-side language CSS for the presentation DOM & JavaScript to display results and submit requests JavaScript XMLHtppRequest for asynchronous calls XML for messages

Presentation title AJAX AJAX enables asynchronous refresh of parts of the screens. It improves the interactivity. It allows a server-side management of events on screen controls instead of a simple get or submit followed by a full refresh of all the screen.

Presentation title Data access layer. The data access layer has the responsibility to get, store and update the data. Only this layer has the knowledge of the data storage structure. The data layer manages also caching, locking, DB transactions. Usually the data are stored in a SGBD. If the structure of the data base changes, only the data access layer should be modified. It exists some generic libraries able to play the role of the access layer, you just have to configure it (by example : hibernate or JDO).

Presentation title Web Services Web Services are services (often stateless) callable by programs on internet/intranet using the web technologies and XML messages. The communication with Web Services are usually made through HTTP messages but with a supplementary layer : the SOAP protocol (Simple Object Access Protocol). Web Services may be registered in a standardized directory, UDDI (Universal Discovery, Description and Integration). The UDDI standards also define the protocol to access to the directory. Web Services communicate using platform-independent and language neutral web protocols. You may call a web service written in Java and executed on an Unix machine from a program written in .NET C# and executed on Windows Server.

Web Services - SOAP The SOAP protocol defines : Messages IN/OUT
Presentation title Web Services - SOAP The SOAP protocol defines : Messages IN/OUT The dialog (SOAP is a stateless protocol). A Web Service is defined through a WSDL file (Web Service Definition Language). The structure of messages is defined with the XSD syntax (XML Schema Description). Some systems use directories of Web Services (UDDI). A web Service offers a set of operations. SOAP defines two modes of communication: SOAP-RPC : the client requests execution of an operation & wait for the answer. The message send identifies the operation to execute and the arguments. The answer may contain a status and a result. SOAP-Message : the client sends a message and do not necessarily have to wait for an answer. The SOAP message just contains an XML document treated by the receiver.

Web services – Example of call
POST /axis/EchoHeaders.jws HTTP/1.0 Content-Type: text/xml; charset=utf-8 Accept: application/soap+xml, application/dime, multipart/related, text/* User-Agent: Axis/1.4 Host: localhost:8180 Cache-Control: no-cache Pragma: no-cache SOAPAction: "" Content-Length: 374 <?xml version="1.0" encoding="UTF-8"?> <soapenv:Envelope xmlns:soapenv=" xmlns:xsd=" xmlns:xsi=" <soapenv:Body> <ns1:list soapenv:encodingStyle=" xmlns:ns1=" </soapenv:Body> </soapenv:Envelope>

Web services – Example of answer
HTTP/ OK Server: Apache-Coyote/1.1 Set-Cookie: JSESSIONID=47307A96AE5D2471FFE16C6F01B64E6C; Path=/axis Content-Type: text/xml;charset=utf-8 Date: Sun, 19 Oct :20:21 GMT Connection: close <?xml version="1.0" encoding="utf-8"?> <soapenv:Envelope xmlns:soapenv=" xmlns:xsd=" xmlns:xsi=" <soapenv:Body> <ns1:listResponse soapenv:encodingStyle=" xmlns:ns1=" <listReturn soapenc:arrayType="xsd:string[8]" xsi:type="soapenc:Array" xmlns:soapenc=" <listReturn xsi:type="xsd:string">content-type:text/xml; charset=utf-8</listReturn> <listReturn xsi:type="xsd:string">accept:application/soap+xml, application/dime, multipart/related, text/*</listReturn> <listReturn xsi:type="xsd:string">user-agent:Axis/1.4</listReturn> <listReturn xsi:type="xsd:string">host:localhost:8180</listReturn> <listReturn xsi:type="xsd:string">cache-control:no-cache</listReturn> <listReturn xsi:type="xsd:string">pragma:no-cache</listReturn> <listReturn xsi:type="xsd:string">soapaction:""</listReturn> <listReturn xsi:type="xsd:string">content-length:374</listReturn> </listReturn></ns1:listResponse> </soapenv:Body> </soapenv:Envelope>

J2EE server Web Services in Java
Presentation title Web Services in Java In the Java world, web services are usually accessed through a servlet but can be implemented either in the web container or in the EJB container. J2EE server HTTP get ../servlet Client appl. J2EE web container JVM Servlet W-S implementation

Presentation title Web Services limits The basic technologies for Web services are not always sufficient, some issues have to be addressed: State management. Transactions. Security Some standards are available to cover those concerns but there are not widely adopted.

Presentation title SOA SOA means Service Oriented Architecture. It is based on loose coupling services implementing business operations (usually web services). Such operations are combined and reused to form business applications. The combination of elementary services, with decisions, loops, management of exceptions, ... is called “orchestration”. Specific tools help to design an orchestration without classical programming. There are standards related to the definition and the execution of business processes as BPEL.

Presentation title RSS feeds "Really Simple Syndication (RSS 2.0)", is a standard used to subscribe and receive news or often modified contents. The user subscribes to a feed by entering the feed's link into the reader or by clicking an RSS icon in a browser that initiates the subscription process. The RSS reader checks the user's subscribed feeds regularly for new work, downloads any updates that it finds, and provides a user interface to monitor and read the feeds. (extract of ). The server just publishs XML documents with metadata on articles and links to detailed content. The client filters following criteria given by the users and following the status (consulted or not).

RSS feeds – example of content
Presentation title RSS feeds – example of content <?xml version="1.0"?> <rss version="2.0"> <channel> <title>Lift Off News</title> <link> <description>Liftoff to Space Exploration.</description> <language>en-us</language> <pubDate>Tue, 10 Jun :00:00 GMT</pubDate> <lastBuildDate>Tue, 10 Jun :41:01 GMT</lastBuildDate> <docs> <generator>Weblog Editor 2.0</generator> <ttl>5</ttl> <item> <title>Star City</title> <link> <description>How do Americans get ready to work with Russians aboard the International Space Station? They take a crash course in culture, language and protocol at Russia's Star City.</description> <pubDate>Tue, 03 Jun :39:21 GMT</pubDate> <guid> </item> <title>Space Exploration</title> <description>Sky watchers in Europe, Asia, and parts of Alaska and Canada will experience a partial eclipse of the Sun on Saturday, May 31st.</description> <pubDate>Fri, 30 May :06:42 GMT</pubDate> <guid> </channel> </rss>

Web Applications Were are we now?
Presentation title Web Applications Were are we now? Introduction Communication between client & server Client-side Server-Side Web-services & SOA RSS Security & Authentication

Security with web applications.
Presentation title Security with web applications. A web application can cause some harm to your computer, can attack your privacy, can usurp your identity to act on external sites. You may configure your browser to specify some restrictions: No cookies No applets No scripting No Active-X No frames …

Security with web applications – zones.
Presentation title Security with web applications – zones. You may give different security policies by zone: Local internet : sites of your local network Trusted sites : sites that you have registered as secure. Restricted sites : sites that you have registered as non-secure. Internet : all other sites.

Security restrictions client-side.
Presentation title Security restrictions client-side. In a web browser, the applicative program should have at the minimum following restrictions: No access to the local file system. Can’t launch programs on the local system. The JavaScript security model is based on a sandbox approach where scripts run in a restricted execution environment without access to local file systems, user data, or network capabilities. The same-origin policy prevents scripts from one site from reading properties of windows loaded from a different location. A signed script can request expanded privileges that give it access to restricted information and abilities.

Security with web applications – for Active-X objects.
Presentation title Security with web applications – for Active-X objects. An Active-X object has all rights on your computer. Active-X objects are signed and certified, you should accept to load an Active-X only if you trust the provider.

Security with web applications – for applets.
Presentation title Security with web applications – for applets. By default applets loaded on an external site have restricted rights : No storage of data (except through cookies). No actions on the local file system (no read, no creation of files, directories, …). No execution of another program on the client-side. Not allowed to open network connections to any computer, except for the host that provided the .class files. To add rights to an applet, the more secure way is to use certificated and encrypted applets.

Presentation title Authentication HTTP Basic authentication : the user/password are coded (in base 64) and transferred directly in the HTTP header => it is not really secure! HTTP Digest access authentication : uses MD5 encryption (one way encryption). Public key authentication (usually implemented with HTTPS / SSL Client Certificates)‏ Kerberos or SPNEGO authentication …

Web Applications Where are we now? … It’s finished!
Presentation title Web Applications Where are we now? … It’s finished! Introduction Communication between client & server Client-side Server-Side Web-services & SOA RSS Security & Authentication

Presentation title

DEV034 -Web Applications, Introduction

Similar presentations

Presentation on theme: "DEV034 -Web Applications, Introduction"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

DEV034 -Web Applications, Introduction

Similar presentations

Presentation on theme: "DEV034 -Web Applications, Introduction"— Presentation transcript:

Similar presentations

About project

Feedback