Presentazione per il corso di Strumenti e Applicazioni del Web - prof. Polillo, Unimib

1. Andrea Testa
Valeria Gennari
Silvia Antognazza
Strumenti e Applicazioni del Web

2. Di che cosa parliamo oggi?
Google Chrome
e in dettaglio:
1. perchè Google Chrome è un browser moderno
2. plugin, plugin, estensioni, estensioni
3. con la testa nella cloud

3. 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

4. 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.

5. 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=hWhMKalEic
Y

6. 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.

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

8. 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#).

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

10. 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

11. 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

12. Facciamo alcuni esempi: PLUG-INS
Adobe 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

13. 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.

14. Gmail Avvisi, una piccola demo
(0:35)
http://www.youtube.com/watch?v=qEsLCftdAk8

15. 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.

16. GooEdit, come funziona
(1:07)
http://www.youtube.com/watch?v=as1JdLpbBHc

17. 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.

18. 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

19. La gestione di Chrome
Cliccando 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.

20. 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

21. Store: chi cerca, installa
Il 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"

22. 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.

23. Firefox: alcune estensioni
Yoono: è la più
scaricata, tutti i
social a portata di
click

24. 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

25. Yoono: funzionamento
(1:35)
http://www.youtube.com/watch?v=BLPTQULcC6o

26. 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 avere
la traduzione
ImTranslator by Smart Link Corporation

27. ImTranslator, una breve demo
(0:44)
http://www.youtube.com/watch?v=O436cvXPnzU

28. 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

29. 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 è..

30. 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

31. La gestione di Firefox
La gestione di plugin ed estensioni in Firefox è meno
raffinata rispetto a quella di Chrome. Il punto di accesso è
sempre il
Gestore 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)

32. Store: dove trovare tutto ciò che ti serve!

33. 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!

34. 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.

35. Dati utente e sync: Chrome
Chrome 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

36. Dati utente e sync: Firefox
Anche 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 ?!?

37. 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

38. 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

39. Domande

40. Grazie

41. Si ringraziano in particolare: