Web Systems Architecture Web Systems & Technologies: Basic - PDF document

Web Systems Architecture Web Systems & Technologies: Basic architecture An Introduction information is structured as an ipertext allocation transparency Prof. Ing. Andrea Omicini resources as information Use of graphical interfaces Ingegneria Due, Università di Bologna a Cesena ease of use andrea.omicini@unibo.it uniform access to heterogeneous resources 2006-2007 from heterogeneous envs Perception of World Wide Web Web Systems (WWW) CERN (1989) Clicking on a work/image, you can scenario: ipertextual integration of Internet resources expand a portion of the document Goals we are interested in access & allocation transparency the document may / may not be a local one – such a perception is usability not needed multimedial presentation Clicking on a link that represents a effectiveness resource is enough to access it different protocols, the same interface without worrying about the interoperability nature of the resource itself accessing and sharing information whatevet it is, a doc, a text, a accessibility picture, whatever else W3C: http:/ /w3c.org Basic Components: Basic Components: Client-side Server-side Browsers doing presentation, handling requests Helper Applications Web Server particular presentations & formats, such videos, sounds, managing access control, accepting requests, animations administering information Applets Server-side Applications local execution of Java applications remote execution Script CGI, servlet, JSP, PHP, ASP… local execution of small applications written either in JavaScript or other scripting languages

Advanced Components: Advanced Components: Client-side Applications Examples The main problem executing applications server-side does not scale up Observations the web is an excellent opportunity for distributing Google applications have paved the way knowledge & process – that is, data & applications Today, Web Applications are likely to be the next step high standardisation of web technologies may overcome http:/ /www.whatwg.org/specs/web-apps/current-work/ the problem of heterogeneity of computing platforms In this course, however, we will just deal with basic web The approach models and technologies, sorry :) a tight integration of client- and server-side computation along with strict control & widespread diffusion of web standards to allow for the development of web-based client-side full-fledged WWW: Base Fundamental Standard Specifications & Languages Architecture Universal Addressing System URI & URL Uniform Resource Identifier/Location HTTP Protocol HyperText Transfer Protocol http HTML / XHTML + CSS client (eXtended) HyperText Markup Language Cascading Style Sheets local system CGI user Common Gateway Interface Java language for Applet, Servlet & JSP Client / Server HTTP Connection Connection HTTP Client client/server pattern toward one HTTP server at a local system remote system time by specifying an URL (either writing or clicking) request http http HTML page requests via HTTP client client HTTP response as HTML pages + other contents response (images, scripts…) One-shot connection one different connection per each object e.g.: an HTML page with a JPEG image = TCP/IP TCP/IP network 2 HTTP connections

Uniform Resource HTTP for Dummies (I) Locators Unique names for system resources, specified by clients to HyperText Transfer Protocol determine the server client / server interface protocol Uniform Resource Locators (URL) based on TCP connections node providing the resource default port 80 resource access protocol (e.g. http, gopher) HTTP version 1.0 TCP port number (service default port) Request/response: only data are requested / sent local path of the resource within the server One-shot connection: TCP connection maintained only <protocol>[:/ /<host>][:<port>][<path>] as long as necessary to send data e.g.: http:/ /www.address.edu:1234/path/subdir/file.ext Stateless: no information is kept by server between Internet services and their protocols are recognised two subsequent requests http, gopher, ftp, wais, telnet, news, nntp, e mail then, information should be kept by clients (mailto) http:/ /www.w3.org/Addressing/ HTTP for Dummies (II) HTML for Dummies (I) typical HTTP interaction http:/ /www.w3.org/MarkUp/ client request containing information for server (i.e., HyperText Markup Language page local path) specification language to encode information server response containing information (i.e, requested derived from SGML (Standard Generalized Markup page, or error message) Language) some negotiation possible on information and services it is a markup language (TeX, RTF) e.g., give me a page only if changed since my last request markup languages use tags to add features to enclosed text HTTP version 1.1: some improvements very simple so as not to make clients computationally http:/ /www.w3.org/Protocols/ complex It will be the subject of future courses, like “Computer Networks” (Reti di calcolatori) HTML for Dummies (II) XHTML for Dummies tag HTML: examples header level 1 <h1>text</h1> eXtended HyperText Markup Language bold text goals <strong>text</strong > or <B>text</B> solve HTML problems browser-dependent visualisation toward XML link some backward compatibility toward HTML <a href = "destination"> description </a> to avoid migration problems to programmers and tools image in this course, we mainly deal with XHTML <img src = "myimage.gif"> Java applet <applet code="Hello.class" width=”100” height=”80”>

Web Style Sheets Programming the Web: for Dummies A First Approach http:/ /www.w3.org/Style/ Style sheets decribe how elements of a web page should be represented on a specific medium screen, audio, paper, ecc. JavaScript CSS-1 e CSS-2 [the main block of the course, only for LTI-LA] Cascading Stye Sheets associating computations to Web pages (and browser for HTML pages events) XSL (Extensible Stylesheet Language Family) to be execute by clients (browsers) for XML sheets to interact with servers (AJAX!!!) XSL Transformations (XSLT) XML Path Language (XPath) XSL Formatting Objects (XSL-FO) Browsers: Browsers Today… the Ancient Times Mozilla / Firefox & Company version browser properties a world-wide project header, lists, the reference browser engine for this course 1.0 historic emph also for web page construction / verification inline images, Composer is fine, Front Page NOT allowed 2.0 Mosaic Different versions of Internet Explorer forms bad seeds we should coexist with 2.1 Netscape/Microsoft tables, alignment Safari, Opera, Konqueror, … good 3.2 Netscape/Microsoft frames, ... however, remember to verify compliance to standards both in theory [they claim to] 4.0 Netscape/Microsoft styles, JavaScript and in practice [they actually do]