E possibili applicazioni nella PA - Web 2.0 Università degli Studi di Ferrara Area informatica - Unità Portale

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

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
     –   Non fidarsi dei controlli JS
     –   Controlli sempre sul server o riforzati sul server
 ●
     Ampliamento della superficie di attacco
     –   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