Lo scenario: Web 2.0 - I - DiUniTogoy/materiale/1314/parteI_04_Web20.pdf · 3 Lo scenario: Software...

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 è che ci si stia avviando verso una nuovaL idea è che ci si stia avviando verso una nuova concezione del Web ("versione" 2.0), in contapposizione con la "vecchia" concezione ("versione" 1.0)

• Concetto confuso e sfaccettato… è difficile darne una definizione, generalmente si indicano semplicemente una serie di concetti emergenti

a.a. 2013/14 Tecnologie Web 1

• La maggior parte dei siti attualmente online (es. Google, Yahoo, eBay, Amazon, Napster, del.icio.us, Wikipedia, ecc.) possono essere considerati a pieno titolo Web 2.0

Lo scenario: Web 2.0 - II

• I siti diventano servizi interattivi (non più semplici collezioni di pagine) la navigazione di un sito diventa un'esperienza interattiva estremamente più ricca

• Sito Web = aggregazione, ri-combinazione di contenutiSito Web aggregazione, ri combinazione di contenuti eterogenei e sempre aggiornati

• Mashup ("rimescolamento"): applicazioni Web che riutilizzano funzionalità e contenuti offerti in rete per creare servizi e contenuti nuovi

• Open API (servizi "aperti"): servizi e funzionalità sono messe a disposizione sulla rete (per es. Google Maps)


p (p g p )

• Cambia il modo di definire i programmi: non sono più "prodotti", ma "servizi"

• È possibile usufruire di applicazioni Web che si sostituiscono a quelle installate sul proprio computer

2

Lo scenario: Web 2.0 - III• Applicazione Web (Web-based application) = software che

non necessita di essere installato sul computer dell’utente, ma che è reso disponibile "come servizio" su un Web Server e può essere utilizzato attraverso un normale Web Browserp

• Moltissime applicazioni tradizionalmente stand-alone stanno diventando Web-based(= basate su tecnologie Internet/Web, in contesto Internet o Intranet): scrittura, foto-ritocco, disegno, calcolo, montaggio video o audio, email, ecc.

I iti W b iù li i i W b ( i i


• I siti Web sono sempre più applicazioni Web (o servizi Web): non si limitano più a visualizzare contenuti statici, ma offrono agli utenti un'esperienza interattiva (es: e-commerce, social networks, blog, giochi di ruolo online, software collaborativi, ecc...)

Lo scenario: Software as a Service - IFrom Wikipedia [en.wikipedia.org/wiki/Software_as_a_service]:

Software as a service (SaaS […]) […] is a software delivery model in which software and associated data are centrally hosted on the cloud.

SaaS is typically accessed by users using a thin client via a web bbrowser.

SaaS has become a common delivery model for many business applications, including accounting, 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. […]

The 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) […].

a.a. 2013/14 4Tecnologie Web

3

Lo scenario: Software as a Service - IIInspired 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 in addition to traditional project planningthe SaaS model offer—in addition to traditional project planning functionality—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.

While 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 hostedusers or different customers is only possible with centrally hosted software.


Lo scenario: Software as a Service - III[Some] notable service providers[incomplete list extracted from Wikipedia]:

• Amazon Web Services (aws.amazon.com/about-aws)

• Google Apps (www.google.com/apps/index1.html)

• iCloud (www.apple.com/icloud)

• Microsoft Office 365 (www.microsoft.com/office365)

• Oracle Cloude (www.oracle.com/us/solutions/cloud/overview/index.html)

• Salesforce (www.salesforce.com)

• Windows Azure (www.windowsazure.com)

• Zoho Suite (www zoho com)Zoho Suite (www.zoho.com)


4

Lo scenario: Cloud Computing e SaaS - I• Cloud 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 smartphone o tablet)pp ( p )

• 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(servizi disponibili "nella nuvola") sono - di fatto -

li i i W b i è i b i ll l i


applicazioni Web, cioè programmi basati sulle tecnologie Web (HTTP, HTML/CSS, PHP, Javascript, AJAX, ecc...)

NB di Cloud Computing si è parlato/parlerà nel corso di Sistemi Informativi Aziendali e/o 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., GoogleDocs: http://docs.google.com/)

5

Le tecnologie: Open API e mashup - I

Quali strumenti ci permettono di realizzare il Web 2.0 e il Software as a Service?Tutte le tecnologie viste sin qui...+ Open API (mashup) + AJAX e JQuery Open API (mashup) AJAX e JQuery

Open API:• API = Application Programming Interface (Interfaccia

di Programmazione di un'Applicazione) = strumento per rendere disponibile ad altri programmatori le funzionalità di un programmaO " t " di ibili t tti

a.a. 2013/14 Tecnologie Web

• Open = "aperte", disponibili a tutti

9

Le tecnologie: Open API e mashup - IINB molto spesso... UI (User Interface)

Le Open API sono disponibili sul Web (sfruttano le tecnologie

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

API (Application Programming Interface)


p p ( gdel Web, per es. i protocolli come HTTP) un programmatore può includere nel suo programma (per es. in un'applicazione Web) funzionalità offerte da altri programmi (applicazioni Web) invocando API in remoto (cioè via Web/HTTP) = MASHUP

10

6

Le tecnologie: Open API e mashup - IIIMashup [http://en.wikipedia.org/wiki/Mashup_%28web_application_hybrid%29]:

In Web development, a mashup is a Web page or application that uses and combines data, presentation orapplication that uses and combines data, presentation or functionality from two or more sources to create new services.

The term implies easy, fast integration, frequently using open APIs and data sources to produce enriched results that were not necessarily the original reason for producing the raw source data


source data

11

Le tecnologie: 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.

12

7

Le tecnologie: 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) {...

13

Le tecnologie: Open API e mashup - VIPer farvi un'idea...

http://www.programmableweb.com/apis/directorydove (al 17/6/11) erano elencate 3.351 APIs...!(+ 5.865 esempi di utilizzo = mashup)

Qualche esempio (tra i tanti)...Yahoo Traffic API

Traffic Web Services from Yahoo! enable you to get traffic alert information from a given location. Use the Traffic REST API to customize your request with many parameters including indicating locations based on city state, zip code, or a combination of any of these things, latitude-longitude, whether to include a map image, or a search radius in miles [ ]


radius in miles. [...]

Currencies Exchange Rates APIThe Currencies API provides a single JSON structure that is a matrix containing the exchange rates for all known currencies. It is a read only service.

14

8

Le tecnologie: Open API e mashup - VII

WeatherBug APIWeatherBug is a full source weather provider featuring exclusive data from its own network of over 8,000 weather observation stations in the USA. The API gives you access to live weather conditions, forecasts and severe weather warnings for all US zip codes. and severe weather warnings for all US zip codes.

WhitePages.com APIThe WhitePages.com API gives you free access to do people search, reverse phone lookups and reverse address lookups. The powerful database offers access to millions of people records. Build mashups with the REST-based API offering XML and JSON support.

Flickr APIThe Flickr API can be used to retrieve photos from the Flickr photo


p psharing service using a variety of feeds - public photos and videos, favorites, friends, group pools, discussions, and more. The API can also be used to upload photos and video.The Flickr API supports many protocols including REST, SOAP, XML-RPC. Responses can be formatted in XML, XML-RPC, JSON and PHP.

15

Le tecnologie: Open API e mashup - VIII

Entellium APIOnline CRM solutions, software and Web-hosted CRM applications for small business. API is available only to partners.

Google Chart APITh G l Ch API l d i ll h i hThe Google Chart API lets you dynamically generate charts with a URL string and embed these charts on a web page, or download the image for local or offline use. The Google Chart Tools enable adding live charts to any web page. They provide advantages such as a rich gallery of visualizations provided as image charts and interactive charts and they can read live data from a variety of data sources.Users embed the data and formatting parameters in an HTTP request, and Google returns a PNG image of the chart. Many types of chart are supported and by making the request into an image tag the chart can


supported, and by making the request into an image tag the chart can be included in a web page.

16

9

Open API e mashup: Google Maps - IGoogle Maps UI e API• Google Maps consente di visualizzare la mappa di un

luogo prescelto e richiedere informazioni di vario tipo, per es. dove si trova un'azienda o una località, insieme ai dati di contatto e alle indicazioni stradali per raggiungerli


Open API e mashup: Google Maps - II• L'utente (tramite la UI) può effettuare sulla mappa varie

operazioni, per es. il trascinamento (per vedere zone adiacenti senza ricaricare la nuova area), l'ingrandimento o la riduzioneP ò h li i li li• Può anche scegliere se visualizzare una semplice mappacon le sole indicazioni stradali, o una carta satellitare


10

Open API e mashup: Google Maps - III

• Le Google Maps sono molto utilizzate anche dagli sviluppatori Web grazie alla possibilità di includere le mappe, con tutte le loro funzionalità, all'interno del proprio sito attraverso le Open API è possibile utilizzare le funzionalità delle mappe dalla propria pagina Web (attraverso l'invocazione remota di funzioni)

• Le Open API delle Google Maps sono state utilizzate in molti settori: di trasporti alle previsioni meteorologiche ed ambientali, dall'enogastronomia all'informazione turistica, dallo sport e tempo libero alla ricerca statistica, dal giornalismo alla musica al cinema ai videogames


giornalismo alla musica, al cinema, ai videogames...

• Esistrono Open API delle Google Maps diponibili in diversi linguaggi, tra cui Javascript

Open API e mashup: Google Maps - IVEsempio: www.bedandbreakfast-piemonte.info


11

Open API e mashup: Google Maps - VEsempio: www.fortedifenestrelle.com


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

12

Le tecnologie: AJAX - I

• AJAX permette di dare, alle applicazioni web, l'interattivitàe la velocità delle applicazioni "desktop" (stand-alone)

• AJAX = Asynchronous JavaScript and XML, coniato nel febbraio del 2005 da Jasse James Garrett per descrivere unfebbraio del 2005 da Jasse James Garrett, per descrivere un insieme di applicazioni web dinamiche basate sull'interazione tra diverse tecnologie:– HTML (e CSS) per la visualizzazione della pagina– Javascript + DOM per gestire la dinamicità della pagina

(client-side)– XMLHttpRequest ("oggetto" che consente al browser e al

server di comunicare senza che la pagina venga ricaricata


server di comunicare senza che la pagina venga ricaricata creazione di pagine "dinamiche" più veloci)

+ risorsa (programma 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)c

13

Le tecnologie: AJAX - IIIFunzionamento 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)

• 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 larisposta e la invia all'oggetto XMLHttpRequest, da cui lo script client-side la preleva e modifica di conseguenza una parte di pagina (mediante il DOM)


parte di pagina (mediante il DOM)

in altre parole, è l'oggetto XMLHttpRequest che – riceve la richiesta asincrona e parziale dal client– gestisce l'interazione (request/response) con il Web Server– fornisce al client la risposta del Web Server

Le tecnologie: AJAX - IV

Server

request(pag.html)

response(pag.html)

client

HTML + AJAX(Javascript con

XMLHttpRequest)elaborazione

(interpretazione del codice Javascript)

"request"(rif. risorsa server-side)XML

Http

request response


visualizzazione

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

pRequest "response"

(txt/HTMLo XML)

14

Le tecnologie: AJAX - V

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

Le tecnologie: AJAX - VI

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)

15

Le tecnologie: AJAX - VIIEsempio 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

Le tecnologie: AJAX - VIII

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>)


16

Le tecnologie: AJAX - IX

clickEsempio 3:


Le tecnologie: AJAX - XIn 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


17

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

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

(d)al Web Server, secondo il modello AJAX

a.a. 2012/13 Goy - Software as a Service 33

(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

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"

a.a. 2012/13 Goy - Software as a Service 34

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

(funzionalità AJAX)

Lo scenario: Web 2.0 - I - DiUniTogoy/materiale/1314/parteI_04_Web20.pdf · 3 Lo scenario: Software...

Documents

Transcript of Lo scenario: Web 2.0 - I - DiUniTogoy/materiale/1314/parteI_04_Web20.pdf · 3 Lo scenario: Software...