Andrea TestaValeria GennariSilvia Antognazza

Strumenti e Applicazioni del Web

Di che cosa parliamo oggi?

Google Chrome

e in dettaglio:1. perchè Google Chrome è un browser moderno2. plugin, plugin, estensioni, estensioni3. con la testa nella cloud

Pubblicità a parte (cfr Note)

Google Chrome è uno dei tanti browser moderni perchè:

ideato nel 2008, licenza open source

Supporta HTML 5.0 (non del tutto), CSS 3.0: AJAX

Integra V8, LA virtual machine per javascript

Chrome ci permette di......avere un browser multi-processo efficiente

Ogni scheda è un processo, ognuno di essi esegue più Thread. Basta chiudere una scheda per liberare subito spazio E se navighiamo in un sito pericoloso? Ogni tab è eseguito in una sand-box per la massima sicurezza.

Quando interpretare non basta......è necessario accendere V8!

V8 è un software che elabora il javascript di una pagina. In linguaggio informatico, V8 è una vera e propria macchina virtuale che NON interpreta ma compila ed esegue il codice, con risultati esaltanti =

(per gli smanettoni)

http://www.youtube.com/watch?feature=player_embedded&v=hWhMKalEicY

Per rendere migliore il web...

HTML, CSS, JAVASCRIPT sono gli strumenti aperti che permettono di costruire un web migliore, un web migliore eroga servizi migliori, un servizio migliore ci fa stare meglio. HTML, CSS, JAVASCRIPT costruiscono browser migliori.

Plug-ins ed estensioni sono funzioni extra, che personalizzano e migliorano il browser aggiungendo nuove funzionalità nella stessa pagina che stiamo visualizzando.

Un browser moderno è aperto non solo alla comunità degli

sviluppatori, ma anche e soprattutto a chi fa del web la propria passione e lavoro.

Google Chrome e Firefox sono due esempi di browser moderni:

Permette di essere personalizzato (con estensioni) con gli stessi strumenti che usereste per disegnare una qualunque pagina di un sito web.

Che cos'è un plug-in

Un plug-in è un software aggiuntivo appositamente creato per elaborare alcuni contenuti. Un plug-in NON si interfaccia quasi per niente con un browser, è libero di operare all'interno di uno spazio apposito.

Un determinato plug-in può funzionare in molti browser, solitamente è scritto in un linguaggio di programmazione vero e proprio (java, C++, C#).

E un'estensione

Le estensioni sono piccoli add-on

(programmi supplementari) che è possibile installare sul browser per aggiungere

funzionalità.

Le estensioni sono scritte appositamente

per uno specifico browser, e usano le API che vengono messe a disposizione dagli

sviluppatori, sono scritte solitamente con

metalinguaggi (html, xml) e linguaggi di

scripting (javascript)

Tecnologicamente la differenza plugin ed estensioni non è

netta: potremmo distinguerli non ufficialmente per il

linguaggio con cui sono scritti, oppure per il codice sorgente (dei plugin), SE fosse disponibile.

Differenze tra plug ins ed estensioni

Plugin: Adobe Flash per Firefox (7.73 Mb)Estensione: McAfee (0.98 Mb)

Plugin: Adobe Flash per IE 9 (7.81 Mb)Estensione: McAfee (2.27 Mb)

Confrontiamo il peso dei pacchetti

Cosa cambia per l'utente finale? NULLA

Differenze tra plug ins ed estensioni

Evernote Web Clipper ci permette di appuntare piccoli messaggi di testo su una bacheca virtuale, il funzionamento delle due estensioni (per Chrome e per Firefox) è assolutamente identico.

Evernote per Chrome Evernote per Firefox

Facciamo alcuni esempi: PLUG-INSAdobe Flash è il plug-in per eccellenza, uno dei più conosciuti. Flash ci permette di vedere video e contenuti multimediali

La Java Virtual Machine viene installata

nel pc per poter eseguire gli applet e i

contenuti web dinamici

Facciamo alcuni esempi: ESTENSIONI (DI CHROME) I

L'estensione di notifica e-mail mostra un avviso nella barra degli strumenti del broswer.

In questo modo non sei costretto ad accedere alla posta in una finestra separata per controllare se ci sono nuovi messaggi.

Ci sono anche estensioni che funzionano silenziosamente in background (per formattare automaticamente le pagine web nel tuo stile preferito), senza che l'utente si accorda di nulla.

Gmail Avvisi, una piccola demo

(0:35)

http://www.youtube.com/watch?v=qEsLCftdAk8

GooEdit ci permette di modificare al volo l'immagine di una pagina web, semplicemente selezionandola.

Facciamo alcuni esempi: ESTENSIONI (DI CHROME) II

Possiamo caricarla su picasa, taggare un nostro amico su facebook oppure twittare l'url con il nostro account.

GooEdit, come funziona

(1:07)

http://www.youtube.com/watch?v=as1JdLpbBHc

exfm ci permette di raccogliere la musica presente sul sito ex.fm.

Facciamo alcuni esempi: ESTENSIONI (DI CHROME) III

La musica proposta non è casuale, ma basata sulle nostre precedenti navigazioni web. exfm ci consente di avere in un unico punto la musica dei nostri artisti preferiti a partire dalla nostra cronologia. Non mancano funzionalità social e possibilità di creare playlist.

Exfm: demo

(2:41)

In questa demo mostriamo anche come cercare ed installare un'estesione per google Chrome.

http://www.youtube.com/watch?v=M_JVyCVQ4QA

La gestione di ChromeCliccando sulla chiavetta che si trova nella barra degli strumenti è possibile accedere al Task manager, che permette la gestione pubblica dei plug-ins e delle estensioni.

Ogni plug-in o estensione è un elemento a se stante.

La gestione nascosta

Si raggiungono solo digitando in una nuova scheda "about:extensions" e "about:plugins".

Gli "addetti ai lavori" possono anche raggiungere una gestione avanzata di estensioni e plug-ins. La visibilità di queste impostazioni è limitata: bisogna infatti conoscere il comando esatto e digitarlo nella barra degli indirizzi. All'interno di queste sezioni possiamo leggere e modificare le varie impostazioni tecniche

Store: chi cerca, installaIl chrome store è uno spazio in cui scaricare le app e le estensioni. Per installare le app è necessario un account e se cambio pc le ritrovo sempre e comunque...

Ricerco Leggo la recensione ...e "installo"

Firefox: l'erede di Netscape

Firefox è opensource,multipiattaforma, sfrutta Gecko come motore di rendering

Firefox ha sempre puntato sulla personalizzazione con ricche API

Mozilla Foundation è una organizzazione no-profit che promuove tecnologie aperte, innovazione e partecipazione in Internet.

Firefox: alcune estensioni

Yoono: è la più scaricata, tutti i social a portata di click

E' possibile ottenere tutti gli aggiornamenti, modificare il proprio stato e condividere Facebook, Twitter,LinkedIn, YouTube e altro ancora - tutto in un’unica finestra.

Yoono: in dettaglio

Yoono: funzionamento

(1:35)

http://www.youtube.com/watch?v=BLPTQULcC6o

E’ uno strumento che in tempo reale fornisce la traduzione del testo in numerose lingue; Dopo la sua installazione è necessario settare le impostazioni di base definendo in quale lingua si vuole averela traduzione

ImTranslator by Smart Link Corporation

ImTranslator, una breve demo

(0:44)

http://www.youtube.com/watch?v=O436cvXPnzU

Permette di dire no alla pubblicità nel web. E’ possibile scegliere tra più di una quarantina di sottoscrizioni di filtri che si configurano automaticamente Scongiura richieste da parte di host noti e pericolosi

Adblock plus: sicurezza prima di tutto

E' opensource: repository

Ci permette di ottenere automaticamente il prezzo più basso quando si effettuano acquisti online o la ricerca di voli. InvisibleHand mostra una discreta notifica quando un prezzo migliore è disponibile su un prodotto o un volo che si stà acquistando. Copre oltre 580 rivenditori.

InvisibleHand: ok il prezzo è..

InvisibleHand: demo In questa demo mostriamo anche come cercare ed installare un'estesione per mozilla firefox.

(1:26)http://www.youtube.com/watch?v=ThFZeRYf_J8

La gestione di FirefoxLa gestione di plugin ed estensioni in Firefox è meno raffinata rispetto a quella di Chrome. Il punto di accesso è sempre ilGestore Componenti aggiuntivi. Il menù a sinistra si permette di scegliere su cosa intervenire.Ogni plugin o estensione è un elemento a se stante Le estensioni solitamente possono essere disattivate, configurate o rimosse

I plugin solo disattivati ma gestibili con un apposita scheda

Non abbiamo una sezione che ci informa in tempo reale delle risorse utilizzate (il Task Manager di Chrome)

Store: dove trovare tutto ciò che ti serve!

Firefox ti fornisce un'elenco delle estensioni consigliate, di quelle più popolari e di quelle emergenti. Al passaggio del mouse verrà visualizzato un menù a tendina che darà la possibilità di aggiungere l'estensione.

Store: dove trovare tutto ciò che ti serve!

Differenze sincronizzazione

Sia Chrome che Firefox utilizzano servizi cloud per memorizzare le preferenze (preferiti, cronologia, estensioni installate...) degli utenti. Chrome utilizza un account gmail in cui salva il nostro profilo completo, Firefox invece ci chiede un account (user e password) solo per le preferenze del nostro browser.

Dati utente e sync: ChromeChrome usa un account gmail per sincronizzare i nostri dati...

...affidiamo le nostre informazioni direttamente a Google (una società con fini di lucro)

Google ci mette a disposizione una dashboard web e il sito dataliberation per garantire massima trasparenza

Dati utente e sync: FirefoxAnche firefox opera il sync mediante la creazione di un account. Mozilla foundation non ha scopo di lucro A differenza di Google, firefox prevede un meccanismo end-to-end di encryption

Nonostante questo l'unico controllo che abbiamo è quello offertoci dal browser stesso... e l'encryption end-to-end è realizzato mediante un certificato univoco inviato all'utente... ...siamo esposti al man-in-the-middle ?!?

Un'ultima nota sui dati

Qui il video sottotitolato

Eli Pariser analizza come Google e Facebook utilizzino i nostri profili per creare esperienze di utilizzo personalizzate. Il rischio cui andiamo incontro è l'oscurantismo di qualunque "voce" non rientri nelle nostre preferenze. Il rischio è una gabbia invisibile.

http://www.youtube.com/watch?feature=player_embedded&v=B8ofWFx525s

Concludiamo dicendo che...Chrome e firefox sono prodotti innovativi, che mirano a costruire un web migliore

La loro grande forza non sta (solo) nell'utilizzare tecnologie all'avanguardia, ma nel costruire il loro progetto intorno all'user experience...

...plugins ed estensioni ne sono chiari esempi.

E ci ricordano che, almeno sul web, NOI possiamo fare la differenza

Domande

Grazie

Si ringraziano in particolare: