Lo scenario: Web 2.0 - I - DiUniTogoy/materiale/1415/04_Web20_parteI.pdf · utilizzati attraverso...

1

Lo scenario: Web 2.0 - I• Web 2.0 = termine introdotto per la prima volta nel 2004 come

titolo di una conferenza promossa dalla casa editrice O’Reilly: l'idea era che ci si stesse avviando verso una nuova concezionedel Web ("versione" 2.0), in contapposizione con la "vecchia"

i (" i " 1 0)concezione ("versione" 1.0)

• E' il Web come lo conosciamo oggi

• E' stato (ed in parte continua ad essere) un concetto confuso e sfaccettato è difficile darne una definizione, generalmente si indicano una serie di concetti che caratterizzano questa evoluzione

( diff i l b )

a.a. 2014/15 Tecnologie Web 1

• Caratteristiche (soprattutto differenze rispetto al Web 1.0):

1. Aumenta l'interattivtà: non ci si limita più a "navigare", ma si "fanno cose" (si compra, si gioca, si discute, ecc.), attraverso un'esperienza interattiva complessa

Lo scenario: Web 2.0 - II2. le applicazioni web si sostituiscono a quelle installate sul

proprio computer (es. word-processors, strumenti di gestione, ecc.) i programmi (software) non sono più "prodotti", ma diventano "servizi" (sono erogati e pagati come tali), i è i di ibili W b Scioèsono resi disponibili su un Web Server e possono essere

utilizzati attraverso un normale Web Browser

Principale strumento tecnologico: AJAX

3. le applicazioni web sono spesso costruite aggregandocontenuti e servizi offerti da terze parti aggregazione di contenuti es. RSS e Atom


aggregazione di servizi (mashup) Open API,

servizi RESTful, SOAP Web Services

2

Lo scenario: Software as a Service - IPrima apriamo una brevissima parentesi su un altro paradigma che sta caratterizzando il Web e le ICT negli ultimi anni e che può essere visto come un'evoluzione nella stessa direzione del Web 2.0... Software-as-a-Service e Cloud Computing

From Wikipedia [en.wikipedia.org/wiki/Software_as_a_service]:Software as a service (SaaS...) is a software licensing and delivery model in which software is licensed on a subscription basis and is centrally hosted. It is sometimes referred to as "on-demand software". SaaS is typically accessed by users using a thin client via a web browser. SaaS has become a common delivery model for many business applications, including office & messaging software, payroll processing

ft DBMS ft t ft [ ] ll b tisoftware, DBMS software, management software, [...] collaboration, customer relationship management (CRM), [...]. SaaS has been incorporated into the strategy of all leading enterprise software companies. One of the biggest selling points for these companies is the potential to reduce IT support costs by outsourcing hardware and software maintenance and support to the SaaS provider.

a.a. 2014/15 3Tecnologie Web

Lo scenario: Software as a Service - IIThe term "software as a service" (SaaS) is considered to be part of the nomenclature of cloud computing, along with infrastructure as a service (IaaS), platform as a service (PaaS) […].

Collaborative (and "social") functionalityInspired by the success of online social networks and other so called webInspired by the success of online social networks and other so-called web 2.0 functionality, many SaaS applications offer features that let its users collaborate and share information.For example, many project management applications delivered in the SaaS model offer [...] collaboration features letting users comment on tasks and plans and share documents within and outside an organization. Several other SaaS applications let users vote on and offer new feature ideas.Whil ll b ti l t d f ti lit i l i t t d i tWhile some collaboration-related functionality is also integrated into on-premises software, (implicit or explicit) collaboration between users or different customers is only possible with centrally hosted software.


3

Lo scenario: Cloud Computing e SaaS - ICloud computing = i dati e i programmi non risiedono sul computer dell'utente, ma "nella nuvola" ("in the cloud") e l'utente vi accede e

interagisce attraverso un Web browser (o una app da g ( ppsmartphone e tablet)

• La "nuvola" ("cloud") è un insieme di server e infrastrutture che garantiscono la gestione dei dati e il funzionamento dei programmi, in modo totalmente trasparente per l'utente

• I programmi messi a disposizione come cloud services( i i di ibili " ll l ") di f


(servizi disponibili "nella nuvola") sono di fatto applicazioni web, cioè programmi basati sulle tecnologie Web (HTTP, HTML/CSS, PHP, Javascript, AJAX, ecc...)

NB di Cloud Computing si parlerà (forse) nel lab Nuove tendenze dell'ICT!

Cloud computing tipicamente suddiviso in tre livelli:

• Infrastructure as a Service (IaaS): il provider offre l'infrastruttura computazionale (server, data-center, risorse di rete ) come servizio accessibile via Internet/Web (es:

Lo scenario: Cloud Computing e SaaS - II

di rete, …) come servizio accessibile via Internet/Web (es: Amazon Amazon Elastic Compute Cloud: http://aws.amazon.com/ec2)

• Platform as a Service (PaaS): il provider offre una piattaforma computazionale (ambiente di sviluppo per applicazioni "cloud") come servizio accessibile via Internet/Web (es: the Google Apps Engine:


http://code.google.com/appengine)

• Software as a Service (SaaS): il provider offre programmi(applicazioni) come servizi accessibili via Internet/Web(e.g., GoogleDrive: http://drive.google.com)

4

Le tecnologie: AJAX - I

• AJAX permette di rendere la user experience esperita nell'interazione con le applicazioni web simile a quella esperita nell'interazione con applicazioni "desktop" (stand-alone) [www.html.it/guide/guida-ajax/]) [ g g j ]

• AJAX = Asynchronous JavaScript and XML, coniato nel febbraio del 2005 da Jasse James Garrett, per descrivere un modo di utilizzare congiuntamente diverse tecnologie esistenti:– HTML (e CSS) client-side– Javascript + DOM client-side

XMLHttpRequest client side


– XMLHttpRequest client-side– Programmi (o script) server-side (PHP, Servlet, ...)

AJAX è una nuova etichetta per riassumere l'utilizzo congiunto di tecnologie preesistenti

Le tecnologie: AJAX - II

Applicazioni Web tradizionali (con tecnologie server-side): • per ogni interazione con l'utente (per es. click sul pulsante di

invio di un modulo) inviano al server una richiesta (HTTP request) per una nuova pagina

• la risposta del server (HTTP response) contiene l'intera nuova pagina, anche se la risposta vera e propria riguarda solo una piccola parte della nuova pagina

• ciò comporta uno spreco di banda e un'interfaccia utente molto più lenta di quanto potrebbe essere

Applicazioni AJAX:• sono in grado di inviare al Web Server richieste asincrone


sono in grado di inviare al Web Server richieste asincrone(mentre l'utente può continuare ad interagire con la pagina) e parziali (relative solo ai dati necessari)

• di conseguenza consentono un'interazione più veloce (la quantità di dati che è necessario inviare al/ricevere dal server è minore) e in modalità asincrona (senza attesa)

5

Le tecnologie: AJAX - III(a)

(b)


Le tecnologie: AJAX - IVPer passare da (a) a (b):1) approccio "tradizionale"

a. il Browser (client) invia al Web Server l'informazione sul Dip. scelto

b. il Web Server genera una nuova pagina, con il Dip. selezionato nel primo menu e l'elenco dei CdL afferenti a quel Dip. nel secondo menu, e la invia al Browser

c. il Browser mostra la (nuova) pagina

2) approccio AJAXa. il Browser (client) invia al Web Server l'informazione sul Dip.

scelto


sceltob. il Web Server genera un nuovo menu per la scelta del CdL

(contenente i CdL afferenti a quel Dip.) e lo invia al Browserc. il Browser lo inserisce nel punto opportuno della pagina (senza

ricaricarla)

6

Le tecnologie: AJAX - V

ServerB

HTTP request(pag.html)

HTTP response(pag.html)

Browser

HTML + AJAX(Javascript con

XMLHttpRequest)elaborazione

(interpretazione del codice Javascript)

"richiesta"[*](rif. risorsa server-side)

XML

HTTPrequest

HTTPresponse

HTTP Client


visualizzazione

richiesta asincrona (non "blocca" l'interazione con l'utente)

XMLHttp

Request"risposta"[*]

(txt/HTML/XML)

[*] l'oggetto XMLHttpRequestviene gestito all'interno dello script Javascript (client-side)

[*] l'oggetto XMLHttpRequestviene gestito all'interno dello script Javascript (client-side)

Le tecnologie: AJAX - VI

Funzionamento tipico di un'applicazione AJAX:

• carichiamo nel Browser una pagina web (.html) che contiene degli script client-side (Javascript) che intercettano eventirelativi a parti della pagina (mediante il DOM)relativi a parti della pagina (mediante il DOM)

• in risposta ad un qualche evento (es: click), Javascript invia una HTTP request "speciale" (con l'indicazione di una risorsa server-side, es. PHP) attraverso l'oggetto XMLHttpRequest

• sul server, un programma (o uno script) server-side elabora la risposta e la invia all'oggetto XMLHttpRequest, da cui lo script client-side la preleva e modifica di conseguenza una


script client-side la preleva e modifica di conseguenza una parte di pagina (mediante il DOM)

7

Le tecnologie: AJAX - VII

in altre parole, è l'oggetto XMLHttpRequest che – riceve la richiesta asincrona e parziale dal client

i l'i i ( / ) il W b S– gestisce l'interazione (request/response) con il Web Server, cioè fa da Client HTTP nei confronti del Web Server

– fornisce al Browser la risposta del Web Server

NB: AJAX non è una via di mezzo tra client-side e server-side (la computazione non può mai avvenire... "a metà strada"!)... ma l'uso congiunto di tecnologie client-side e


) g gserver side

Le tecnologie: AJAX - VIII

IndirizzoCittà

Esempio 1:

l'utente digita città, via e numero…

ViaCAP

IndirizzoCittàViaCAP

TorinoPianezza

n.

n. 5


IndirizzoCittàViaCAP

TorinoPianezza10149

il sistema scrive automaticamente il CAPn. 5

8

Le tecnologie: AJAX - IX

In un'applicazione Web tradizionale (PHP, Servlet, ...):• impossibile

In un'applicazione AJAX:d l' di i i à i i li id• quando l'utente digita città, via e numero uno script client-side

(Javascript) se ne accorge e invia (attraverso l'oggetto XMLHttpRequest) una richiesta asincrona al server nella quale si chiede il CAP associato a quella città/via

• l'utente può continuare ad interagire con la pagina• sul server, un programma (o uno script server-side) recupera il

CAP (probabilmente da un database) e lo invia all'oggetto XMLHttpRequest da cui lo script client side lo preleva e lo


XMLHttpRequest, da cui lo script client-side lo preleva e lo inserisce nella pagina

• viene effettuata una connessione asincrona con il server; la pagina non viene ricaricata (reinviata dal Web Server nell'HTTP response)

Le tecnologie: AJAX - XEsempio 2:

Tratto da: L. Borgognoni, Scidecom.org: un nuovo progetto e una nuova implementazione, Tesi di Laurea in Scienze della Comunicazione, Università di Torino, a.a. 2006/2007

scidecom.orgInserimento risorse

informaticamarketingpsicologia


argomento. . . . . .

argomento. . . . . .

psicologiasemioticasociologiaaltro

inizialmente vuoto...

informatica l'utente seleziona un argomento...



argomentoesame

informatica

informatica generaleprogrammazione webweb designinformatica applicata: basi di datiinformatica applicata: reti

il sistema popola il secondo menu

9

Le tecnologie: AJAX - XI

In un'applicazione Web tradizionale (PHP, Servlet, ...):• impossibile (o quasi...)

In un'applicazione AJAX:• quando l'utente seleziona l'argomento uno script client side• quando l'utente seleziona l'argomento uno script client-side

(Javascript) intercetta l'evento e invia (attraverso l'oggetto XMLHttpRequest) una richiesta asincrona al server nella quale si chiede l'elenco degli esami associati a quell'argomento

• sul server, un programma (o uno script server-side) recupera la lista di esami (da un database), la inserisce negli opportuni tag (<OPTION>) e la invia all'oggetto XMLHttpRequest, da cui loscript client-side lo preleva e lo crea così il secondo menu


p p(<SELECT>)


Le tecnologie: AJAX - XII

clickEsempio 3:


10

Le tecnologie: AJAX - XIIIIn un'applicazione Web tradizionale (PHP, Servlet, ...):• quando l'utente clicca su acquista parte una richiesta (HTTP

request) al Web Server• sul server, un programma (o uno script server-side) aggiorna il

carrello, inserendo i nuovi dati nella pagina che invierà al clientcarrello, inserendo i nuovi dati nella pagina che invierà al client• la (nuova) pagina viene inviata al client (in HTTP response)

In un'applicazione AJAX:• quando l'utente clicca su acquista uno script client-side

(Javascript) intercetta l'evento e invia (attraverso l'oggetto XMLHttpRequest) una richiesta asincrona al server nella quale si chiede di aggiornare i dati del carrello

l ( i t id ) i il


• sul server, un programma (o uno script server-side) aggiorna il contenuto del carrello e lo invia all'oggetto XMLHttpRequest, da cui lo script client-side lo preleva e lo inserisce nella pagina


Le tecnologie: jQuery - IjQuery (jquery.com) è una libreria Javascript che• "nasconde" la complessità dell'interazione diretta con il

DOM e con XMLHttpRequest (AJAX)• permette di sviluppare applicazioni (script client-side)permette di sviluppare applicazioni (script client side)

cross-browser[www.html.it/pag/18382/introduzione63/]

In particolare, con jQuery è possibile:• interagire con il DOM, selezionando e manipolando

elementi definiti dall'HTML o dal CSS• inviare richieste (e ricevere risposte) asincrone e parziali


• inviare richieste (e ricevere risposte) asincrone e parziali (d)al Web Server, secondo il modello AJAX

sostanzialmente è un modo di scrivere script (client-side) e interazioni AJAX (per la parte client-side) utilizzando un "linguaggio" più potente e compatto rispetto a Javascript

11

Le tecnologie: jQuery - II

Per es: al click su qualunque link presente nella pagina, fai comparire una finestrella di benvenuto

$("a").click(function() {alert("Benvenuto!"); });alert( Benvenuto! ); });

jQuery viene tipicamente utilizzata per: migliorare l'aspetto e il comportamento delle pagine Web

(funzionalità di interazione con il DOM)

"selettore"


(funzionalità di interazione con il DOM) gestire interazioni asincrone e parziali tra client e server

(funzionalità AJAX)

Suggerimenti bibliografici - I(oltre ai link segnalati nelle slide...)

• V. Della Mea, L. Di Gaspero, I. Scagnetto, Programmazione Web Lato Server (seconda edizione aggiornata), Apogeo, 2011Disponibile e-book (PDF) nella collana Apogeo Spicchi: è

possibile acquistare singoli capitolipossibile acquistare singoli capitoli [www.apogeonline.com/libri/9788850314799/scheda] Frammenti suggeriti:– Cap. 6 (Tecnologie per il Web 2.0): sez. 6.9

Goy - a.a. 2014/2015 Tecnologie Web 22

12

Aggregare contenuti, un esempio

RSS: RDF Site Summary o Really Simple Syndication– Syndication: diffusione di notizie tramite un'agenzia di stampa

Web syndication: diffusione di contenuti (tipicamente news)

Aggregare contenuti: RSS e Atom - I

– Web syndication: diffusione di contenuti (tipicamente news) tramite i canali Web

NOTA: RDF Site Summary si riferisce alle versioni di RSS basate su RDF (Resource Description Framework), un modello dati esprimibile in un linguaggio XML [www.w3.org/TR/rdf-primer]; Really Simple Syndication si riferisce a quelle versioni di RSS direttamente basate su XML

• RSS = formato (linguaggio di markup) standard, basato su XML utilizzato per la distribuzione di contenuti sulsu XML, utilizzato per la distribuzione di contenuti sul Web

• RSS definisce la struttura di una "notizia" (contenuto informativo), articolandola in vari campi (es. autore, titolo, categoria, data di pubblicazione, ...)


• un sito può pubblicare i propri contenuti in formato RSS e altri siti/applicazioni possono leggerli automaticamente

• la pubblicazione di contenuti in formato RSS su Web si hi RSS f d ("fl " RSS)

Aggregare contenuti: RSS e Atom - II

chiama RSS feed ("flusso" RSS)• un RSS feed può essere letto

– da un RSS reader o feed reader: applicazioni client alle quali vengono fornite le indicazioni su quali feed "scaricare" e che periodicamente scaricano tali feed (anche da fonti diverse) e li visualizzano

siti Web che aggregano notizie scaricate da altri siti che– siti Web che aggregano notizie scaricate da altri siti che pubblicano feed e le visualizzano (eventualmente riorganizzandone il contenuto) casi di aggregazione/mashup di contenuti


13

Esempio di feed reader

Aggregare contenuti: RSS e Atom - III

NB: Diverse sorgenti di informazione (ANSA.it, Repubblica>Politica, Repubblica>Scienze, Torino Cultura-Musica-oggi)


L'insieme di fonti da cui scaricare le news è configurabile

Esempio di sito che integra notizie provenienti da varie fonti: http://news.google.it

Aggregare contenuti: RSS e Atom - IV


14

Esempio (un frammento di RSS feed):<?xml version="1.0" encoding="UTF-8"?><rss ... version="2.0"><channel> <title>Repubblica it > Politica</title>

Aggregare contenuti: RSS e Atom - V

<title>Repubblica.it > Politica</title> <link>http://www.repubblica.it/politica</link> <description><![CDATA[Repubblica.it: articoli dalla sezione Politica]]>

</description> <language>it-IT</language> <copyright>Copyright 2012 - Gruppo Ed. l'Espresso</copyright> <pubDate>Thu, 22 Mar 2012 20:54:26 +0100</pubDate>...[lista di item: vedi prossima slide]

</channel></rss>


il feed contiene: la descrizione del canale (sezione di un sito

che pubblica notizie) Repubblica>Politica una sequenza di notizie (item) pubblicate

su quel canale

<item><title><![CDATA[Articolo 18...]]>

</title><author>

Aggregare contenuti: RSS e Atom - VI

ogni notizia è racchiusa fra i tag <item> e <item>

<![CDATA[[email protected] (Redaz. Repubblica.it)]]></author><category domain="http://www.repubblica.it"><![CDATA[politica]]>

</category><pubDate>Thu, 22 Mar 2012 09:35:00 +0100</pubDate><description>Domani la riforma arriva al Cdm; il governo si impegna "a evitare abusi", ma esclude passi indietro...

</description></description></item><item>...</item>...


E' un esempio di markup "semantico": i tag caratterizzano il "contenuto", specificando il "significato" delle varie porzioni di informazione

15

Un formato alternativo per i feed, più recente di RSS, èAtom

• Atom Syndication Format = formato (linguaggio di

Aggregare contenuti: RSS e Atom - VII

markup) standard, basato su XML, utilizzato per la distribuzione di contenuti sul Web (Atom feed)

• W3C Feed Validation Service: servizio online gratuito del W3C che controlla la validità (sintattica) di feed RSS e Atom: validator.w3.org/feed

• Un articolo: www html it/articoli/rss-vs-atom-1/Un articolo: www.html.it/articoli/rss vs atom 1/


Esempio (un frammento di Atom feed – da Wikipedia):<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom">

<title>Feed di esempio</title><subtitle>Testo del sotto-titolo qui</subtitle>

Aggregare contenuti: RSS e Atom - VIII

<subtitle>Testo del sotto titolo qui</subtitle><link href="http://example.org/"/><updated>2003-12-13T18:30:02Z</updated><author>

<name>jonny doe</name><email>[email protected]</email>

</author><id>urn:uuid:60a76c80-d399-11d9-b93C-0003939e0af6</id><entry>

<title>I robots Atom usano Amok</title><link href="http://example.org/2003/12/13/atom03"/><id>urn:uuid:1225c695-cfb8-4ebb-aaaa-80da344efa6a</id><updated>2003-12-13T18:30:02Z</updated><summary>Testo del sommario.</summary>

</entry></feed>


16

Suggerimenti bibliografici - II(oltre ai link segnalati nelle slide...)


possibile acquistare singoli capitolipossibile acquistare singoli capitoli [www.apogeonline.com/libri/9788850314799/scheda] Frammenti suggeriti:– Cap. 6 (Tecnologie per il Web 2.0): sez. 6.1 e 6.2


Aggregare servizi: Open API e mashup - I

Aggregare servizi Mashup ("rimescolamento") = applicazioni web che riutilizzano funzionalità offerte in rete da altri per creare servizi nuovi

MashupMashup [http://en.wikipedia.org/wiki/Mashup_%28web_application_hybrid%29]:

A mashup, in web development, is a web page, or web application, that uses content from more than one source to create a single new service displayed in a single graphical interface. [...] The term implies easy, fast integration, frequently using open application programming interfaces (open API) and data sources to produce enriched results that were not necessarily the original reason for producing

a.a. 2014/15 Tecnologie Web

the raw source data. In the past years, more and more Web applications have published APIs that enable software developers to easily integrate data and functions [...], instead of building them by themselves. Mashups can be considered to have an active role in the evolution of social software and Web 2.0.

32

17

Aggregare servizi: Open API e mashup - IIPrincipale strumento per aggregare servizi: Open API

• API = Application Programming Interface (Interfaccia di Programmazione di un'Applicazione) = strumento per rendere disponibile ad altri programmatori le funzionalità didi un programma

• Open = "aperte", disponibili a tutti

UI (User Interface)


web appgeocoder=new google.maps.Geocoder();var ll=new google.maps.LatLng(45,7);var myOptions = {zoom: 12,center: ll,mapTypeId: ROADMAP} ...

API (Application Programming Interface)

web app(mashup)

Aggregare servizi: Open API e mashup - III

Una applicazione web, oltre ad avere una User Interface, può offrire delle Open API, cioè delle API disponibili sul Web (che sfruttano le tecnologie del Web, per es. i protocolli come HTTP) un programmatore può includere nel suo programma (per es. in un'altra applicazione web) funzionalità offerte da altri programmi (applicazioni web) invocando API in remoto (cioè via Web/HTTP)


18

Aggregare servizi: Open API e mashup - IV

servizio di mappe

previsioni del tempo

tassi di cambio valute

condivi-sione di foto

calen-dario

...

Mashup: frontend (User Interface)

mappetempo valute foto

bla blabla blabla


bla, blabla, blabla, bla, bla, bla, bla, bla, bla, bla bla, bla bla bla bla bla bla, blabla, blabla, blablabla, bla, bla.

35

Aggregare servizi: Open API e mashup - V

Open API (servizio di mappe)

Open API (previsioni del tempo)

Open API (tassi di cambio

Open API (condivi-sione di

Open API (calen-dario)

Mashup: backend ("dietro le quinte")

di mappe)del tempo) cambio valute)

sione di foto)

dario)

...

<script type="text/javascript">var map = new GMap2(document.getElementById("map"));map.setCenter(new GLatLng(45.069,7.688), 14);map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());map.addControl(new GScaleControl());

invocazioni di funzioni remote


var iconUt = new GIcon();iconUt.image = "http://labs.google.com/.../mm_20_green.png";iconUt.shadow = "http://labs.google.com/.../mm_20_shadow.png";iconUt.iconSize = new GSize(12,20);iconUt.shadowSize = new GSize(22,20);iconUt.iconAnchor = new GPoint(6,20);iconUt.infoWindowAnchor = new GPoint(5,1);GEvent.addListener(map, 'click', function(overlay, point) {...

36

19

Aggregare servizi: Open API e mashup - VI

Un esempio: le Google Maps

UI (User Interface)

• Esistrono Open API delle Google Maps diponibili in diversi

GoogleMaps

API (Application Programming Interface)geocoder=new google.maps.Geocoder();var ll=new google.maps.LatLng(45,7);var myOptions = {zoom: 12,center: ll,mapTypeId: ROADMAP} ...

web app(mashup)


Esistrono Open API delle Google Maps diponibili in diversi linguaggi, tra cui Javascript; x es:map = new google.maps.Map(document.getElementById("map"),

options);crea una nuova mappa mettila nella pag. HTML

(nell'elem. "map") con queste caratteristiche (es. stradale, centrata su TO)

Esempio di mashup (applicazione web) con Google Maps:www.cyclingthealps.com

Aggregare servizi: Open API e mashup - VII


20

Aggregare servizi: Open API e mashup - VIIIPer farvi un'idea...

www.programmableweb.com/apis/directory


NOTA sulla differenza tra Open API e Open Source

Benché condividano la filosofia di fondo ("apertura"), sono due concetti diversi:• API = interfaccia (funzionalità)

Le tecnologie: Open API e mashup - IX

• API = interfaccia (funzionalità)es: le Open API di Google Maps mi mettono a disposizione una funzione per centrare una mappa su un punto geografico (es. Torino):map.setCenter(point, zoom);

io posso usare ("invocare") questa funzione, ma non ho accesso al sorgente (non so come è fatta… devo fidarmi!)

• Source = il codice sorgente


• Source il codice sorgente

Open Source: scarico il programma (codice sorgente) eposso modificarlo

Open API: non scarico nulla, ma posso solo usare("invocare") le funzioni disponibili

21

Suggerimenti bibliografici - III(oltre ai link segnalati nelle slide...)


possibile acquistare singoli capitolipossibile acquistare singoli capitoli [www.apogeonline.com/libri/9788850314799/scheda] Frammenti suggeriti:– Cap. 6 (Tecnologie per il Web 2.0): sez. 6.14


Aggregare servizi: servizi RESTful - I

In alternativa alle Open API, è possibile offrire dei "servizi": RESTful (basati sul paradigma REST)(1), oppure basati sul protocollo SOAP (Web Services)(2)

"servizio" = sistema software progettato per supportareservizio sistema software progettato per supportare l'interazione tra applicazioni, utilizzando le tecnologie e gli standard Web possibilità di far interagire in maniera trasparente applicazioni sviluppate con tecnologie eterogenee (es. linguaggi di programmazione diversi, sistemi operativi diversi)

(1)Paradigma REST (REpresentational State Transfer)


[www.html.it/pag/19595/introduzione-ai-web-service/ lezioni 1 - 4]REST = insieme di principi "architetturali" per la progettazione servizi (non è né uno standard, né una tecnologia, né un linguaggio, ...):

42

22

Aggregare servizi: servizi RESTful - II

1. Identificazione delle risorse: "risorsa" = qualsiasi elemento oggetto di elaborazionex es: un cliente, un libro, un prodotto (qualsiasi oggetto su cui è possibile effettuare operazioni)Ogni risorsa deve essere identificata univocamente attraverso un URI[*]; x es:

http://www.myapp.com/clienti/1234http://www.myapp.com/ordini/2011/98765http://www.myapp.com/prodotti?colore=rosso

[*]URI = Uniform Resource Identifier = stringa che


f f gidentifica univocamente una risorsa (es. un documento, un'immagine, un servizio, ecc.); un URL è un tipo di URI.

43

Aggregare servizi: servizi RESTful - III2. Utilizzo esplicito dei metodi HTTP:

utilizzare i metodi (le operazioni) definiti nel protocollo HTTP per interagire con il servizio: GET, POST, PUT, DELETE

x es: quando inseriamo un URL (URI) nella barra degli indirizzi chiediamo al browser di inviare una HTTP request con indicati


(tra le altre cose) una risorsa e un metodo, GET l'effetto dell'esecuzione di GET è l'accesso alla risorsa identificata questo rende uniforme l'invocazione di operazioni sulle risorse (il client non ha bisogno di conoscere gli API, es: getCustomer())

44

23

Aggregare servizi: servizi RESTful - IV3. Risorse autodescrittive:

il formato dei dati che il servizio invierà al browser è indicato nella HTTP response stessa (MIME type[*])x es: HTML, XML, JSON[**]

[*]MIME type = Internet Media type = standard per identificare il formato dei dati contenuti in un filex es, è usato dai client di posta elettronica per indicare il formato degli allegati, dai browser per determinare come visualizzare il contenuto della HTTP response (body)Un Internet Media type è composto da un tipo, un sotto-tipo, d i i i li fil HTML il MIME


dei parametri opzionali; x es, per un file HTML, il MIME type può essere text/html; charset=UTF-8 e cioè:

– tipo: text– sotto-tipo: html– parametro: charset=UTF-8

45

Aggregare servizi: servizi RESTful - V[**]JSON (JavaScript Object Notation)www.json.orgwww.html.it/articoli/introduzione-a-json-1/

• è un formato testuale molto usato per lo scambio di dati in applicazioni client-server, basato su Javascript (anche se è pp , p (indipendente dal linguaggio di programmazione)

• è basato su due strutture:– insiemi di coppie nome-valore – liste ordinate di valori

• Esempio: JSON è utilizzato nelle API di Google Maps, x es per creare una mappa:


map = new google.maps.Map(document.getElementById("map"), options);

options = {zoom: 14,center: new google.maps.LatLng(45.06...,7.68...),mapTypeId: google.maps.MapTypeId.ROADMAP

};46

JSON "object"

24

Aggregare servizi: servizi RESTful - VI4. Collegamenti tra risorse:

le risorse devono esseremesse in relazione tramite hyperlink tutto quello che un client deve sapere su una risorsa e sulle risorse ad essa correlate deve essere indicato, tramite link, nella risposta stessa (HTTP response)risposta stessa (HTTP response)x es:<ordine><numero>12345678</numero><data>01/07/2011</data><cliente rif="http://www.myapp.com/clienti/1234" /><articoli><articolo rif="http://www.myapp.com/prodotti/98765" />

// / / /


<articolo rif="http://www.myapp.com/prodotti/43210" /></articoli></ordine>

47

Aggregare servizi: servizi RESTful - VII

5. Comunicazione senza stato (stateless):il principio della comunicazione stateless (= una richiesta non ha alcuna relazione con le richieste precedenti né con quelle successive) è una delle caratteristiche principali delquelle successive) è una delle caratteristiche principali del protocollo HTTP [slide 35 01_InternetWeb_parteI.pptx] lo stesso principio vale per la comunicazione con servizi RESTful

NB comunicazione stateless non significa che un'applicazione non possa mantenere informazioni sullo stato, ma solo che la responsabilità della gestione dello stato


, p gnon deve essere demandata al Server, ma rientra nei compiti del Client.

48

25

Aggregare servizi: Web Service SOAP - I(2)Web Services basati sul protocollo SOAP

[www.html.it/guide/guida-web-service/ lezioni 2 – 5 + 13]

Web Service (WS) = applicazione software (identificata da un URI) in cui l'interfaccia (API) è definita in un linguaggio basato su

XML[*]

il protocollo di comunicazione attraverso cui è possibile inviare e ricevere messaggi (al/dal servizio) è basato su XML

tale protocollo "si appoggia" (sfrutta) il protocollo HTTP (quindi il Web)


[*] XML = eXtensible Markup Language = formato standard, definito dal W3C (www.w3.org) utilizzato per la rappresentazione di dati e di contenuti strutturati; è un meta-linguaggio, consente cioè la definizione di nuovi linguaggi di mark-up [www.html.it/pag/16214/introduzione26/]

49

Aggregare servizi: Web Service SOAP - II

ServiceConsumerService

ConsumerServicemessaggio di richiesta

ServiceProvider er

facc

ia

Obiettivo: integrazione (composizione) di applicazioni remote (servizi distribuiti sul Web) in un'unica applicazione

sono un esempio di mashup (che però si chiama

ServiceConsumermessaggio di risposta

ov de

inte

sono un esempio di mashup (che però si chiama "composizione"...), in cui gli API sono basati su particolari standard (linguaggi XML)


26

Aggregare servizi: Web Service SOAP - III

WS Composition: backend ("dietro le quinte")

ServiceProvider Service

Provider

ServiceProvider

ServiceProvider

Service Consumerinvocazioni

interfaccia

(previsionidel tempo)

interfaccia

Provider(mappe)

interfaccia

(cambiovalute)

interfaccia

(calenda-rio)

i t f i

ServiceProvider

(...)

Tecnologie Weba.a. 2013/14

Service Consumer...public class WSservlet extends HttpServlet {@WebServiceRef(wsdlLocation = "WEB-INF/wsdl/localhost_8080/WShello/WShello.wsdl")private WShello_Service service;...private String bigHello(java.lang.String destination, java.lang.String message) {web.WShello port = service.getWShelloPort();return port.bigHello(destination, message);}...

voca odi servizi remoti

51

interfaccia

Per fare questa integrazione ho bisogno di:1. un linguaggio per definire le interfacce (API) dei

Service Provider2 t ll di i i ( i i i

Aggregare servizi: Web Service SOAP - IV

2. un protocollo di comunicazione (per inviare e ricevere messaggi tra Service Provider e Service Consumer)

Inoltre...3. (eventualmente) un meccanismo per trovare i Web

Service disponibili su Web4. un modello che mi "aiuti" nell'integrazione

( i i ) di i i ti(composizione) di servizi remoti


27

1. WSDL (Web Services Description Language): linguaggio di definizione delle interfacce dei Web Services (dice cosa fa il servizio, di quali dati ha bisogno, ...) – W3C Recommendation: www.w3.org/standards/techs/wsdl

2 SOAP (Simple Object Access Protocol): protocollo di invocazione

Aggregare servizi: Web Service SOAP - V

2. SOAP (Simple Object Access Protocol): protocollo di invocazione di un Web Service, in pratica lo standard di comunicazione tra Service Consumer e Service Provider – W3C Recommendation: www.w3.org/standards/techs/soap

3. UDDI (Universal Description, Discovery and Integration): protocollo per ricercare i Web Services, una sorta di "elenco telefonico" o "pagine gialle" dei Web Services – standard promosso dal consor io OASIS (https://www oasis open org/)promosso dal consorzio OASIS (https://www.oasis-open.org/)

4. BPEL (Business Process Execution Language for Web Services): linguaggio per la specifica di processi che utilizzano più Web Services (composizione di servizi) – standard promosso dal consorzio OASIS (https://www.oasis-open.org/)


• Molto spesso la definizione di un'interfaccia WSDL viene utilizzata per "impacchettare" (to wrap) un'applicazione (magari scritta in un linguaggio obsoleto: legacy software) e renderla interoperabile (accessibile con protocolli standard,

Aggregare servizi: Web Service SOAP - VI

renderla interoperabile (accessibile con protocolli standard, quali SOAP)

interfaccia

Sistema legacy

ancora in uso, ma costruito con linguaggi, tecnologie, architetture obsolete


WSDL

accesso alle funzionalità del sistema (tramite SOAP)

28

SOAP:

• è un linguaggio basato su XML (che definisce un protocollo di comunicazione)

Aggregare servizi: Web Service SOAP - VII

protocollo di comunicazione)

• formato dei messaggi SOAP (SOAP Envelope):

SOAP Headercontiene i dati opzionalisull'invocazione stessa (autenticazione, pagamento, …)( , p g , )

SOAP Bodycontiene i dati necessari per l'invocazione del servizioe/o i risultati di ritorno


Suggerimenti bibliografici - IV(oltre ai link segnalati nelle slide...)

• V. Roberto, M. Frailis, A. Gugliotta, P. Omero, Introduzione alle Tecnologie Web, McGraw-Hill, 2005 [NB: fate "attenzione" perché è un po' vecchiotto...!]

Frammenti suggeriti:gg– Cap. 6 (Architetture web): sez. 6.9.1 e 6.9.2


possibile acquistare singoli capitoli [www.apogeonline.com/libri/9788850314799/scheda] F ti iti


Frammenti suggeriti:– Cap. 6 (Tecnologie per il Web 2.0): sez. 6.5

Lo scenario: Web 2.0 - I - DiUniTogoy/materiale/1415/04_Web20_parteI.pdf · utilizzati attraverso...

Documents

Transcript of Lo scenario: Web 2.0 - I - DiUniTogoy/materiale/1415/04_Web20_parteI.pdf · utilizzati attraverso...