Università degli Studi di Ferrara Area informatica Unità Portale http://www.unife.it/areainformatica/portale Web 2.0 e possibili applicazioni nella PA Ing. Luca Tebaldi
Introduzione al Web 2.0 Il termine Web 2.0 indica il passaggio concettuale da siti intesi come contenitori a veri e propri servizi con cui gli utenti possano interagire (termine coniato da Dale Dougherty, O'Reilly, e Craig Cline, MediaLive) I siti diventano applicazioni, ovvero hanno una interfaccia, una faciltà e velocità d'uso che li rendono simili ad applicazioni desktop Non tutti concordano con il concetto di Web 2.0 come innovazione, viene vissuto come una normale evoluzione del Web
Web 2.0: Concetti di base Servizi e non software pacchettizzati Web come piattaforma per lo sviluppo e la distribuzione dei servizi Architettura orientata ai servizi Architettura per favorire la partecilazione ed elevata interattività Ridistribuzione dei contenuti Social networking
Il Web 2.0 nella P.A. Il modello del Web 2.0 sembra particolarmente adatto allo scenario della Pubblica Amministrazione Integrazione dei servizi Facilità d'uso Elevata interattività Possibilità di sfruttare dispositivi mobili per la distribuzione dei servizi
Google: feed reader
Writely (editor)
Dal Web 1.0 al Web 2.0
Dal Web 1.0 al Web 2.0 (2) Da Client/server a SOA L'architettura si sposta verso un modello orientato ai servizi con comucazioni basate su protocolli aperti e standard, facili da comporre Da unidirezionale a bidirezionale Evoluzione da siti intesi come contenitori di informazioni in sola lettura verso servizi interattivi e cooperativi (wikipedia, blog, flikr, del.icio.us etc)
Dalla tassonomia alla folksonomia La folksonomy è un modo collaborativo per categorizzare le informazioni, si contrappone al modello tassonomico, ovvero una classificazione gerarchica e statica dei dati (del.icio.us, flickr) Cambio di modello di conoscenza e reperimento delle informazioni Indicizzazione basata su modelli collaborativi basati sul tagging Categorizzazione dal basso Abbandonare la tassonomia??? Un web basato sulla folksonomy sarebbe soggetto alla interpretazione degli utenti Indicizzazione sia verticale (tassonomia) che orrizzontale (folksonomia)
Da pubblicazione alla syndication La syndication è un evoluzione del modello publish subscribe, e consiste nel distribuire i contenuti informativi per essere ridistribuiti o riusati Distribuzione dei contenuti RSS, ATOM, RDF Aggiornamento dei contenuti informativi Riusabilità dei contenuti Tutela dei diritti di copyright Creative Commons
Da pubblicazione a syndication(2)
Web 2.0: architettura
Composizione di servizi Mashup, letteralmente poltiglia, un' applicazione web ibrida, costruita con la fusione di 2 o più servizi Tipicamente i contenuti fanno riferimento a contenuti di siti terzi (third party) tramite interfacce pubbliche, API o Web service Un mashup dà sempre un valore aggiunto ai contenuti terzi. Non è la copia esatta di un sito!!!
Mashup: esempi www.housingmaps.com (Google maps + craiglist)
Mashup: esempi (2) http://www.vdiddy.com/ (yahoo video, google video, etc)
RIA Rich Internet Application: applicazioni web con funzionalità e caratteristiche simili per prestazioni e usabilità, alle applicazioni desktop Con AJAX si possono creare esperienze di navigazione paritetiche a quelle che si ottengono con flash Il vantaggio: nessun plugin da installare e standard aperti In esecuzione localmente nel browser e si connettono al server solo se necessitano di inviare o ricevere dati
tecnologie XML (extensible Markup Language): linguaggio indipendente dalla piattaforma per la descrizione della struttura delle informazioni (solo contenuti non presentazione) XSD vs DTD: per la definizione della semantica del linguaggio XSL: per la rappresenzatione dei dati (X)HTML e CSS: separazione tra contenuti e presentazione del vecchio HTML riscritti in XML
Tecnologie (2) Web service È un sistema software progettato per sviluppare l'interoperabilità tra applicazioni Si basa su standard (SOAP, WSDL) Auto-contenuti e Auto-descrittivi
tecnologie (3) UDDI: Universal Description Discovery and Integration SOAP: Simple Object Access Protocol WSDL: Web Service Description Language
tecnologie (4) AJAX: Asynchronous Javascript And XML AJAX è un mix di tecnologie per la creazione di pagine Web attive XHTML e CSS per la parte visiva Document Object Model modificato via javascript XMLHTTP request per le interazioni con l'application server Non tutti i browser lo supportano! Scambio dati: XML, JSON (JavaScript Object Notation), XPath, semplice (X)HTML
AJAX
AJAX (2) Risparmio di banda e minor carico per l'application server
AJAX: esempio function invocaxmlhttprequest() { var ret = null, // variabile di ritorno, nulla di default browser = navigator.useragent.touppercase(); //che browser è // browser standard con supporto nativo if(typeof(xmlhttprequest) === "function" typeof(xmlhttprequest) === "object") ret = new XMLHttpRequest(); //se Internet Explorer else if( window.activexobject && browser.indexof("msie 4") < 0 //filtro IE 4 ){ if(browser.indexof("msie 5") < 0) ret = new ActiveXObject("Msxml2.XMLHTTP"); //IE 6 usa un nome diverso else ret = new ActiveXObject("Microsoft.XMLHTTP"); //IE 5 } return ret; } possibile uso onload = function() { var ajax = invocaxmlhttprequest(); if(ajax) { ajax.open("get", "URI", true); // sintassi del metodo open: open (method, uri [,async][,user][,password]) } }
AJAX: esempio (2) Ovviamente ci si può basare su librerie come prototype si riduce a: var ajax = new Ajax.Request( uri, { method: 'get', parameters: pars, oncomplete: showresponse });
AJAX (3) Con AJAX si ha: Maggiore interattività e dinamicità delle pagine Uno spostamento di parte della logica sul browser, quindi minor carico computazionale sul server Un risparmio di banda grazie a comunicazioni XML Asincronismo
Dispositivi mobili e Web 2.0 I provider stanno investendo molto sul mobile internet SmartPhone, PDA, telefoni di ultima generazione offrono: Smart client application: applicazioni generalmente J2ME scaricate dal dispositivo Browsing application: navigazione con microbrowser Limitazioni: Limitate capacità dei dispositivi (schermo piccolo, memoria limitata, capacità computazionali poco elevate) Banda limitata Connessione instabile Difficoltà nel porting delle applicazioni
Dispositivi mobili e Web 2.0 (1) AJAX è preferibile per le applicazioni mobili rispetto ad applicazioni J2ME perchè: Accessibile via browser (opera mobile, NetFront) XML risparmio di banda Livello di astrazione passa al browser non si deve carficare altri applicativi e si risparmia spazio in memoria Standard Offre un' esperienza soddisfacente
Dispositivi mobili e Web 2.0 (2) Esempi Mobileglu (aggregatore RSS per dispositivi mobili) [sito] Checkpad (agenda condivisa) [sito] Helio (aggregatore di servizi come myspace, podcast etc) [sito] Opera Platform : framework per lo sviluppo di applicazioni su dispositivi mobili [sito] Browser in modalità full-screen Framework AJAX per vari widgets e applicazioni Astrazione verso le funzionalità native del dispositivo
Dispositivi mobili e Web 2.0 (3) Le case produttrici si stanno interessando alle tecnologie Web 2.0 Nokia e Backbase stanno valutando le possibilità che queste tecnologie offrono Permetterebbero di importare sui dispositivi mobili applicazioni complesse (es word processor) Possibilità di interagire direttamente con le funzionalita del dispositivo (es click2dial) Le tecnologie Web 2.0 non sono indicate per alcune tipologie di applicazioni (es giochi)
Sicurezza AJAX, essendo un mix di tecnologie già in uso, non introduce nuovi tipi di vulnerabilità, rimangono quindi sempre gli stessi problemi di sicurezza delle applicazioni web Autenticazione, autorizzazioni, controlli d'accesso, validazione degli input etc Aumenta, però, il grado di complessità della fase di test Problemi di sicurezza sulle comunicazioni di dati sensibili, uso di https per questo genere di transazioni Certificato SSL, non è sempre possibile chiedere all'utente l'accettazione del certificato creando quindi problemi all'applicazione (la connessione viene terminata!)
Sicurezza (2) Controlli di sicurezza sul client Ampliamento della superficie di attacco Non fidarsi dei controlli JS Controlli sempre sul server o riforzati sul server Più pagine addette a compiti specifici implicano controlli su ognuna Cross-site scripting (XSS) Eliminando i tempi di latenza gli XSS possono non venire individuati
Sicurezza (3) Difficoltà nei test Raccolta informazioni (footprinting): proxy come bur o paros Il problema dello stato Lo stato della pagina non è identificato dalla pagina stessa ma dipende dalle iterazioni precedenti Eventi legati al tempo Chi testa potrebbe non avere coscienza di alcune funzionalità e quindi tralasciarle Aggiornamento dinamico del DOM L'eval potrebbe aprire le porte ad attacchi XSS
Sicurezza (3) Non vengono inserite nuove vulnerabilità dalle tecnologie aumenta, però, la complessità dei test: No determinazione dello stato Azioni in background
Accessibilità e usabilità Requisito 15 (DM 8 luglio 2005) e WCAG 1.0 6.3 Garantire che le pagine siano utilizzabili quando script, applet, o altri oggetti di programmazione sono disabilitati oppure non supportati; ove ciò non sia possibile fornire una spiegazione testuale della funzionalità svolta e garantire una alternativa testuale equivalente. In realtà le tecnologie assistive supportano tranquillamente JS
Accessibilità e usabilità (2) Requisito 16 (DM 8 luglio 2005) e WCAG 1.0 6.4, 9.2, 9.3 Garantire che i gestori di eventi che attivano script, applet o altri oggetti di programmazione o che possiedono una propria specifica interfaccia, siano indipendenti da uno specifico dispositivo di input. Associare all'evento non solo l'onclick ma anche l'onkeypress
Accessibilità e usabilità (3) Cambio di paradigma (click & wait => asincrono) Esperienza più ricca Drag&drop folksonomia Paradossalmente può creare difficoltà nell'uso, non essendoci più il riscontro con il caricamento della nuova pagina si può disorientare Inserire loader per chiarire all'utente la fase di caricamento
Accessibilità e usabilità (4) Forma mentis dell'utenza Uso dei backbutton e refresh Possibile soluzione backbase Chiusura della finestra prima del termine delle operazioni Importanza dei loader
Accessibilità e usabilità (5) Secondo le linee guida attuali le applicazioni Web 2.0 non possono essere considerate accessibili Le linee guida attuali risalgono al 1999.. l'evoluzione del Web si può stimare attorno al 2005 Le WCAG 2.0 sono meno restrittive Le tecnologie assistive permetterebbero l'uso delle tecnologie Molto è dovuto alla preparazione dello sviluppatore sulle problematiche L'usabilità delle applicazioni aumenta notevolmente, ma bisogna prestare attenzione al modello di navigazione degli utenti La comunità degli sviluppatori Web 2.0 è molto attenta a queste tematiche
Web 2.0: vantaggi Accesso ubiquo alle proprie informazioni Indipendenza dal dispositivo Indipendenza dalla piattaforma Gestione dei servizi centralizzata
Web 2.0: svantaggi Complessità dall'applicazione Browser aggiornato
Tecnologia Web 2.0 all'università degli studi di Ferrrara Obiettivi: costruzione di un Web desktop per l'aggregazione dei servizi UniFE e non solo Un Web desktop è una RIA. il progetto vuole spostare il concetto di desktop da ambiente locale, quindi associato a una determitato dispositivo, a un ambiente distribuito, fruibile ovunque e con qualunque dispositivo. Pro: Backup automatico, riduzione dei costi di gestione, single sign on, dati disponibili ovunque Contro: applicazione complessa, necessità di una banda adeguata, necessità di un browser aggiornato e con JS attivi
Web desktop: architettura logica
Web desktop: architettura
Web desktop: tecnologie Tecnologie (X)HTML e CSS AJAX Ruby on Rails LDAP MySQL API utilizzate per la gestione di servizi esterni Gmail Del.icio.us
Web desktop: prototipo
Web desktop: prototipo (2) #-----------------------------------Funzione che controlla la presenza di Feed nei siti----------------------------------------def aggnuovofeed(indirizzo) urlmodulo=controllacorind(indirizzo) if (urlmodulo[-4,4] == '.xml') open(urlmodulo) do file content = file.read rss = RSS::Parser.parse(content, false) end mettifeed(urlmodulo) render(:partial => 'ricaricamento') else open(urlmodulo) do file i=0 @titlefeed=[] content = file.read soup = BeautifulSoup.new(content) @titlefeed=soup.find_all('link', :attrs => {'type' => 'application/rss+xml'}) if(@titlefeed.size > 0) render(:partial => 'listafeed') else render(:text => 'Non ci sono feed nella pagina specificata') end end end rescue render(:text => 'Hai inserito un indirizzo sbagliato.') end
Web desktop: conclusioni L'applicazione con un unica autenticazione permetterà di usufruire dei servizi dell'università degli Studi di Ferrara Spazio disco virtuale, possibilità di reperire i propri dati ovunque Integrazione di servizi terzi (Gmail, del.icio.us) Backup dei dati automatico e centralizzato Abbattimento dei costi di gestione e manutenzione
Possibilità per il futuro Studio delle possibilità offerte dai dispositivi mobili Servizio di iscrizione esami Elenco telefonico di ateneo (click2dial) Strumenti collaborativi e di social networking per gli studenti
Web 2.0: riferimenti e definizioni Def Web 2.0: web2.wsj2.com/review_of_the_years_best_web_20_explanations.htm Web Service -W3C: http://www.w3.org/tr/2003/wd-ws-arch-20030808/#whatis Def mashup: http://en.wikipedia.org/wiki/mashup_(web_application_hybrid) Def RIA: http://en.wikipedia.org/wiki/rich_internet_application XML: http://www.w3.org/xml/ UDDI: http://www.uddi.org/ SOAP: http://www.w3.org/tr/soap/ WSDL: http://www.w3.org/tr/wsdl AJAX: http://ajaxpatterns.org Dispositivi mobili: http://opengardensblog.futuretext.com/archives/2005/12/mobile_web_20_w.html Sicurezza: http://www.securityfocus.com/infocus/1868/ Accessibilità: http://www.w3.org/tr/wai-webcontent/ http://www.pubbliaccesso.gov.it/
Web 2.0: siti ed esempi Gmail: http://mail.google.com Writely: http://www.writely.com/ Google readers: http://reader.google.com mashup: http://www.programmableweb.com/mashups housingmaps: www.housingmaps.com vdiddy: http://www.vdiddy.com/ questo seminario si trova all'indizzo http://www.unife.it/areainformatica/organizzazione/portale/web2.0/web2.pdf per maggiori link di esempi e riferimenti http://del.icio.us/lucatebaldi