Gli strumenti per sviluppatori di Google Chrome

Tra gli strumenti disponibili nel menu di Google Chrome, la voce Strumenti per sviluppatori è probabilmente la più importante e utile, almeno per chiunque sia interessato anche al “dietro le quinte” di una pagina. Come il nome stesso suggerisce, questa voce raccoglie una serie di strumenti, pensati principalmente per chi si occupa di produrre pagine o applicazioni web, ma in linea generale possono essere utili e interessanti anche per chi non si sognerebbe mai di diventare uno sviluppatore, ma vuole solo saperne un po’ di più e vedere come funzionano le cose.

Gli strumenti disponibili sono otto e descriverli tutti quanti in un colpo solo occuperebbe troppo spazio: per semplificare il mio lavoro, dunque, li dividerò arbitrariamente e li descriverò un poco alla volta. Partirò oggi dalle due schede che, probabilmente, saranno usate più spesso: Elements e Console, ossia la prima e l’ultima nell'ordine in cui Google Chrome ce le offre.

Elements è la scheda in cui possiamo esaminare il contenuto effettivo della pagina che abbiamo davanti: più precisamente, ne possiamo esaminare il contenuto finale. Nel menu di Chrome esiste già una funzione “Visualizza sorgente”, che ci mostra il codice di una pagina: la scheda Elements è simile, ma non identica. Visualizzando il codice sorgente, infatti, noi vediamo il contenuto del file HTML originario, senza le modifiche che possono essere state effettuate utilizzando il JavaScript; la scheda Elements, invece, ci mostra il codice della pagina finale, dopo che tutte le modifiche tramite JavaScript sono state applicate. Inoltre, sempre da qui possiamo anche esaminare il CSS per ogni componente della pagina, nella colonna di destra della scheda.

Una buona norma della programmazione web prescrive che il contenuto di una pagina sia sempre e comunque accessibile, anche per chi ha disabilitato il JavaScript: se questa norma fosse sempre rispettata, la visualizzazione del codice sorgente dovrebbe mostrarci già tutto il testo, tutte le immagini e tutti gli altri elementi contenuti in una pagina. Come la maggior parte delle buone norme, però, non sempre è rispettata alla lettera; di conseguenza, una parte più o meno cospicua del contenuto, in molti siti, è aggiunta successivamente col JavaScript. Sempre attraverso il JavaScript, parti della pagina possono essere nascoste o mostrate, modificando il CSS corrispondente, col risultato che la pagina davanti a noi è spesso molto diversa, rispetto al contenuto descritto nel file HTML iniziale.

Elements ci mostra dunque un file HTML virtuale, che descrive la pagina così come ci appare sullo schermo in questo momento. Se una immagine è stata aggiunta col JavaScript, Elements ce la mostrerà nel punto in cui è stata aggiunta, con tutti i tag HTML e tutte le regole di stile che le sono state assegnate, proprio come se avesse fatto parte fin dall’inizio della pagina. Se una parte della pagina è stata invece nascosta, in seguito a una qualche nostra azione, non la vedremo apparire in questa sezione.

Come è facile da intuire, Elements è molto utile per esaminare il contenuto della pagina, sia mentre noi ci stiamo lavorando, sia quando siamo curiosi di studiare il lavoro altrui, ma questa è solo una parte delle sue funzioni. Oltre a guardare, infatti, in questa scheda possiamo anche modificare il contenuto di una pagina, in modo molto semplice. O almeno, molto semplice se sappiamo orientarci tra i nodi di una pagina HTML e se conosciamo HTML e CSS: dopotutto, questi si chiamano “strumenti per sviluppatori” e la conoscenza dei linguaggi per la programmazione web è data per scontata, essendo rivolti agli sviluppatori di pagine e siti. Non ci piace il colore dello sfondo, oppure il colore dei caratteri? Da qui lo possiamo modificare. Clicchiamo prima col tasto sinistro del mouse sul nodo da modificare e poi, nella colonna di sinistra, cerchiamo la proprietà CSS che ci interessa e clicchiamola col tasto sinistro: in questo modo, la potremo modificare a nostro piacimento.

Se invece clicchiamo su un elemento HTML col tasto destro del mouse, si aprirà un menu contestuale, in cui ci saranno offerte altre possibilità di intervento: ad esempio, potremo modificare lo HTML, selezionando la voce “Edit as HTML”, oppure rimuovere quel particolare nodo dalla pagina, selezionando “Delete node” (se un banner vi ha rotto le scatole, potrete cancellarlo da qui). Eliminare un nodo, ad esempio, può essere un sistema rapido, per levarsi dai piedi quei fastidiosi avvisi, che impediscono di leggere una pagina fino a che non avete cliccato “Mi piace” su una pagina Facebook, oppure fino a che non vi siete registrati e cose simili.

Ovviamente, ogni modifica apportata alla pagina varrà soltanto per noi: ciò che modifichiamo è la copia locale, caricata nel nostro browser, e non la pagina originale, contenuta nel sito. Nonostante questo, è pur sempre uno strumento valido, per adattare le pagine ai nostri gusti o per rapidi interventi di correzione, oltre alle sue normali funzioni di studio ed esame della pagina.

Console è la scheda di chi ama smanettare col JavaScript. Può essere utilizzata per eseguire brevi porzioni di codice nella pagina (sempre sul lato cliente, sia chiaro), ma è molto più importante il suo ruolo di semplice ambiente di sviluppo per JavaScript. Di fatto, la console è uno spartano (ma poi neanche tanto spartano, nel caso di Google Chrome) REPL, ossia uno spazio in cui possiamo dialogare col JavaScript, direttamente nel nostro browser: scriviamo un comando o una funzione, premiamo Invio, e la console ci restituirà subito il risultato del comando o della funzione. Se stiamo studiando o imparando il JavaScript, possiamo trascorrere ore in perfetta letizia, dialogando col nostro linguaggio di programmazione; se invece stiamo lavorando alla realizzazione di una pagina e qualcosa va storto, è qui che ci saranno segnalati gli errori relativi al JavaScript.

Chiunque abbia mai utilizzato un REPL in vita propria, magari trastullandosi col Lisp o altri linguaggi di programmazione affini (anche Scala va bene), non dovrebbe avere problemi con la Console. Un REPL è un Read-Eval-Print-Loop, ossia un ciclo continuo di lettura, esecuzione e stampa del codice: noi scriviamo un comando, una funzione o qualsiasi altra cosa, premiamo Invio, e il comando (o funzione, o altro) sarà eseguito e poi scritto sullo schermo, dopodiché la console sarà pronta per il comando successivo. Ovviamente, comandi e funzioni dovranno essere in JavaScript, per poter funzionare, ma nel peggiore dei casi potete sempre utilizzarla come calcolatrice alternativa.

Come dicevo all’inizio, la console può essere utilizzata fondamentalmente in due modi: come ambiente di sviluppo per il JavaScript, oppure per alterare il contenuto della pagina che abbiamo davanti.

Come ambiente di sviluppo, è spartano ma funzionale, nonché molto utile se stiamo imparando (o se vogliamo imparare) la programmazione in JavaScript. Possiamo usarla per scrivere ed eseguire funzioni, ad esempio, ma con un’avvertenza: se vogliamo andare a capo, non dobbiamo premere Invio, ma Shift+Invio. Se premiamo Invio da solo, il codice sarà eseguito e ci ritroveremo con un messaggio di errore, se la nostra funzione era a metà. Dettagli a parte, ha il vantaggio considerevole di suggerirci i nomi di variabili, metodi, oggetti e funzioni a nostra disposizione: se cominciamo a scrivere qualcosa, la console ci mostrerà tutti i modi validi in cui possiamo concludere quella parola, proprio come accade in ambienti di sviluppo più raffinati. Ad esempio,

La console ricorda anche tutto ciò che abbiamo già fatto, durante la nostra sessione di lavoro: se abbiamo creato nuove variabili globali, oppure nuove funzioni, o nuovi oggetti, anche i loro nomi appariranno tra i suggerimenti, accanto a funzioni, metodi e oggetti già inclusi nel motore JavaScript di Google Chrome. Di fatto, la console offre tutto ciò che è strettamente indispensabile, per programmare in JavaScript.

Se invece vogliamo utilizzarla per alterare la pagina corrente, il principio di base è lo stesso, ma cambia il contesto: dalla console avremo accesso a tutto il JavaScript della pagina su cui l’abbiamo aperta, incluse eventuali altre librerie importate (jQuery, ad esempio, che è spesso presente). Se stiamo allegramente sprecando tempo con un gioco in JavaScript e vogliamo barare, possiamo farlo da qui, modificando ad esempio il numero assegnato alla variabile che contiene il punteggio. Ogni modifica avrà effetto a livello locale, ossia nella pagina aperta sul nostro browser: se dunque abbiamo usato la console, per truccare il nostro punteggio in un gioco, il nostro punteggio truccato non avrò effetto su una eventuale classifica dei migliori punteggi, ospitata nel sito del videogioco. O almeno, non dovrebbe avere effetto, a meno che il gioco non sia stato progettato molto male e abbia un livello di sicurezza pari a zero, ma questo è un altro paio di maniche.

Three.js – Una libreria per un WebGL semplificato

WebGL è una nuova tecnologia, incorporata nei browser (o almeno in buona parte dei browser), che permette di creare e disegnare immagini e animazioni 3D su una pagina web, senza bisogno di utilizzare plugin o programmi esterni, come il Flash, ma basandosi soltanto sul buon vecchio JavaScript. Questo per dirla in modo molto semplice, sorvolando sulla storia e tutto il resto.

Per visualizzare una grafica prodotta con WebGL, o per utilizzare un videogioco basato su WebGL, è sufficiente avere un browser che supporti questa tecnologia: in pratica, più o meno tutti i browser, a parte Internet Explorer, almeno per il momento. per utilizzare WebGL in modo attivo, ossia per programmare grafiche o videogiochi in 3D, gli strumenti necessari sono sempre un browser che lo supporti, una discreta conoscenza del JavaScript e una buona conoscenza di algebra lineare, se siete così pazzi o determinati, da voler programmare a mano le matrici. Se non siete così pazzi o così determinati, non preoccupatevi: praticamente nessuno lo fa, se non in fase di apprendimento. Di solito, la parte più algebricamente hardcore è affidata a librerie JavaScript, che si occupano per noi dei calcoli più complicati, lasciandoci il piacere e il privilegio di lavorare sul risultato dei calcoli. La più usata di queste librerie è Three.js, di cui parlerò oggi.

Se ricordate la versione 3D di Pong, presentata come uno degli ultimi esperimenti su Chrome, la parte grafica è stata realizzata proprio con la libreria Three.js, come accennavo nel relativo articolo: questo per dare un esempio concreto del suo utilizzo. Niente di strano: si possono scrivere a mano le matrici e ci si può occupare personalmente di tutti i calcoli necessari, ma questo va bene solo in fase di apprendimento, quando è necessario capire i meccanismi della grafica 3D. Quando però si passa dall'apprendimento alla produzione, librerie ausiliarie come Three.js sono fondamentali, per ridurre il lavoro e il tempo da spendere sul progetto. In linea generale, usare Three.js per lavorare col WebGL è come usare jQuery per lavorare col JavaScript: entrambe le librerie costituiscono un modo per interagire a un livello più alto di astrazione con la materia grezza che si trova sotto di esse. Esattamente come jQuery, poi, Three.js non è l’unica libreria esistente, per lavorare col WebGL, ma solo una delle più diffuse e più usate.

Le caratteristiche di Three.js, dunque. Prima e principale caratteristica, comune anche alle altre librerie della stessa famiglia, è di occuparsi per conto nostro della matematica necessaria: significa che ci risparmieremo parecchie linee di codice, ad alto tasso di errori e basso tasso di divertimento (soprattutto se non amiamo la matematica). Sempre per conto nostro, Three.js si occupa anche della fase di rendering per ogni oggetto presente in scena: noi dovremo soltanto indicarle cosa fare e la libreria saprà come farlo, senza bisogno di nostre istruzioni. Inoltre, al puro WebGL unisce anche altri elementi, che spesso lo accompagnano ma che non sono parte diretta di quella tecnologia: ad esempio, il supporto per il mouse, così da poter interagire direttamente con la scena, spostando e trascinando oggetti e così via. Infine, ma non meno importante, Three.js permette facilmente di introdurre una soluzione alternativa, anche per quei browser che non supportano il WebGL: se non è presente il supporto per il 3D, possiamo sostituirlo col normale canvas 2D. Come è ovvio, il risultato estetico non sarà identico, ma la grafica o il videogioco funzioneranno ugualmente.

Three.js, poi, è orientata verso una programmazione a oggetti, il che può essere sia un vantaggio, sia uno svantaggio, a seconda dei punti di vista e delle abitudini di lavoro col JavaScript: se decidete di usare questa libreria, preparatevi a dover ricorrere spesso a new, per creare nuovi oggetti, che possono essere figure geometriche, luci, videocamere, la scena che contiene tutta la grafica e così via. Così ha deciso il suo autore.

Una caratteristica curiosa di Three.js, poi, è la presenza di un grande numero di esempi, abbinata a una documentazione alquanto scarna, sul piano dei manuali: quando scaricate la libreria, non aspettatevi niente di più elaborato di un basilare “Hello World”, incluso nel pacchetto. È possibile però trovare altrove guide e tutorial, principalmente in inglese, e anche accenni o capitoli dedicati a questa libreria, nei testi generali sul WebGL. Chi preferisce imparare smanettando col codice, però, avrà appunto oltre cento esempi con cui divertirsi, vivisezionandoli e sperimentando varie modifiche, per capire con la pratica il loro funzionamento. Tra parentesi, molti di questi esempi richiedono la presenza di un server, per funzionare: se ne avete uno installato sul vostro computer, apriteli da lì e ne guadagneranno anche le prestazioni.

I passaggi fondamentali, per creare e popolare una scena, non sono poi molto diversi da quelli che avevamo già visto, parlando di Blender: siamo sempre nel campo della grafica 3D, dopotutto, e a cambiare sono solo il linguaggio e il tipo di ambiente. Per un qualsiasi tipo di progetto con Three.js, avremo bisogno di inserire un renderer, una camera e una scena, al cui interno potremo poi sistemare oggetti (o mesh, per sembrare più professionali), luci e quant'altro. In altri termini, gli oggetti fondamentali che dovremo creare con new, nella funzione iniziale, sono:

THREE.Renderer - un oggetto che si occupa di disegnare la scena sullo schermo.

THREE.Scene - il contenitore di tutto ciò che apparirà sullo schermo.

THREE.Camera - la videocamera virtuale, attraverso cui vedremo la scena.

A questi tre oggetti, indispensabili, potremo poi aggiungerne altri, per avere anche qualcosa da vedere sullo schermo. Questi oggetti supplementari sono

THREE.Light - una sorgente di luce, di un colore a nostra scelta, indispensabile se vogliamo che sia resa la illusione di tridimensionalità degli oggetti (senza luce, appariranno bidimensionali).

THREE.Object3D - la classe base degli oggetti raffigurabili: alcuni tipi sono già definiti e pronti all'uso, altri li possiamo creare noi.

La tipologia base di oggetti, come già abbiamo visto con Blender, è Mesh e a ogni mesh dovremo assegnare due altri oggetti, nel momento della creazione: THREE.Geometry, che contiene la forma dell’oggetto (cubo, sfera, prisma eccetera) e THREE.Material, che contiene informazioni sulle qualità dell’oggetto, come il colore. In un qualsiasi progetto con Three.js, dunque, la funzione iniziale creerà un renderer, una scena, una camera, aggiungerà alla scena i vari oggetti presenti e la camera, infine passerà la mano al loop, che continuerà a ridisegnare lo schermo,a  intervalli regolari. Un esempio di come fare tutto questo lo troviamo già nel pacchetto della libreria, sotto forma di breve tutorial nella cartella "docs"; per il resto, potremo divertirci a squartare la caterva di esempi disponibili.

Esperimenti di Chrome: Cube Slam e WebRTC

Una quarantina di anni fa, quando i computer vivevano la loro età del rame e i videogiochi erano ancora in piena età della pietra, compariva sulla scena Pong, uno dei primi esemplari di gioco. Pong aveva una struttura molto semplice: due lineette verticali, una a destra e una a sinistra, si rilanciavano a vicenda un quadratino, potendosi muovere solo verso l’alto o verso il basso. Con una certa dose di fantasia, era una simulazione di ping-pong.

Curiosamente, proprio questo videogioco “preistorico” è stato scelto da Google, per essere utilizzato come cavia con cui testare e mostrare una nuova tecnologia per la comunicazione web: ne è nato così Cube Slam, uno degli ultimi esemplari appartenenti alla categoria dei Chrome Experiments, ossia applicazioni web sviluppate per mostrare quale sia il supporto offerto da Google Chrome a vari tipi di tecnologie sperimentali. Nel caso di Cube Slam, la tecnologia in questione è il WebRTC, che consente una comunicazione diretta da browser a browser, usando soltanto elementi nativi del browser stesso: niente Flash o altri tipi di plugin esterni, insomma. Ma guardiamo meglio cosa sia Cube Slam.

Questa è la schermata introduttiva, che apparirà se ci colleghiamo alla pagina con Google Chrome. Altri tipi di browser, come Firefox o Safari, potrebbero funzionare, ma non è garantito: dopotutto, è un progetto che serve a mostrare le funzionalità di Chrome e non ci si può aspettare che sia anche ottimizzato per funzionare altrettanto bene su altri browser.

Come possiamo vedere al centro, il campo di gioco è più o meno identico a quello del vecchio Pong, con una notevole variante: Cube Slam è tridimensionale, di conseguenza le due lineette sono sostituite da due parallelepipedi e il quadratino è adesso un cubo. Differenze marginali, si potrebbe dire. Una differenza più notevole è data dal contenuto del gioco, dove il semplice tic toc delle due lineette che si rilanciano l’un l’altra un quadratino è stato arricchito da svariati elementi extra, come campi gravitazionali, ostacoli, bombe e più o meno tutto l’armamentario che si può immaginare in un videogioco di questo tipo.

Sempre dalla schermata introduttiva, possiamo notare un altro particolare, cioè le due modalità di gioco offerte: contro un amico, oppure contro un orso. La seconda, per quanto possa suonare bizzarra, è soltanto un modo per dire che giocheremo contro il computer, ossia contro una tipica AI da videogioco, in questo caso impersonata da un orso. La prima opzione è invece molto più interessante, perché ci conduce al cuore dell’esperimento: la comunicazione diretta via browser, nel caso specifico tra il nostro browser e quello di un amico, contro il quale giocheremo.

WebRTC, ossia Web Real Time Communication, è una nuova tecnologia, per introdurre una comunicazione diretta tra browser, utilizzando solo le risorse a disposizione dei browser, senza appoggiarsi a programmi esterni. In particolare, il fine di WebRTC è quello di rendere la comunicazione audio e video, attraverso i browser, semplice e immediata quando la comunicazione testuale. Cube Slam utilizza WebRTC per collegarci direttamente col browser di un nostro amico, se scegliamo di giocare contro un amico e se l’amico è in linea (ovviamente), gestendo in modo diretto la comunicazione tra noi e lui: noi vedremo sullo schermo il nostro amico e lui vedrà noi. Niente di diverso da una normale video chat, da un certo punto di vista, ma la differenza sta nel modo in cui la comunicazione è realizzata: direttamente dal browser e non utilizzando un plugin di Skype, come ad esempio fa Facebook. peraltro, lo scopo stesso del gioco è proprio quello di abbattere lo schermo del nostro avversario, cosa che avverrà dopo che lo avremo colpito per tre volte.

Per essere giocato contro un amico, quindi, Cube Slam richiede la presenza di webcam e microfono (sì, oltre a vederci, possiamo anche insultarci in diretta, mentre giochiamo): se non utilizziamo un firewall (pessima abitudine), i dati saranno trasmessi direttamente dal nostro browser al browser del nostro amico, senza bisogno di un server, in un modo simile a quanto avviene con programmi P2P, come eMule o BitTorrent.

Per quanto riguarda la grafica, che è in 3D, può essere visualizzata in due modi: se il nostro browser supporta il WebGL, che è una grafica 3D nativa dei browser, il gioco sarà visualizzato utilizzando quella, dato che è stato prodotto con three.js, una libreria JavaScript per semplificare il ricorso alla grafica 3D; in assenza di WebGL, invece, ripiegherà sulla simulazione del 3D attraverso il CSS, così da garantire un risultato simile, anche se non proprio identico, anche su altri browser.

Usare un gradiente di colore nel CSS

Un gradiente è una transizione continua e graduale che conduce da un colore di partenza a un colore di arrivo: in altri termini, è un colore che sfuma a poco a poco in un altro colore. Esempi di gradienti si possono trovare più o meno ovunque nella interfaccia grafica di computer e altri strumenti analoghi: la Apple li usa più o meno per qualsiasi bottone compaia sullo schermo di uno dei suoi prodotti, ma più in generale sembrano andare molto di moda tra i grafici di ogni genere.

Più o meno qualsiasi programma di grafica (Photoshop, GIMP, eccetera) include una funzione per produrre gradienti, specificando un colore di partenza e un colore di arrivo, ma i gradienti sono supportati anche dalle ultime specifiche del CSS e possono essere utilizzati per colorare più elementi in una pagina web: lo sfondo della pagina stessa, i pulsanti, eccetera. Per esempio, se vogliamo che un elemento abbia un gradiente come colore di sfondo, nel foglio di stile CSS gli assegneremo una proprietà di questo tipo:

background: linear-gradient(rgb(229,76,16), rgb(173,54,8));

dove rgb(229,76,16) e rgb(173,54,8) sono il colore di partenza e il colore di arrivo della gradazione, espressi come “miscela” di rosso, verde e blu, i tre colori fondamentali. Leggendo questa regola nel foglio di stile, il nostro browser assegnerà all'elemento selezionato uno sfondo, in cui il primo colore indicato sfumerà gradualmente nel secondo. In teoria. In pratica, non è detto che ciò accada.

Sebbene nelle specifiche del CSS siano presenti i gradienti e i valori da attribuire a un elemento, per ottenere un gradiente, non tutti i browser li supportano. Il che è normale nel caso dei browser più vecchi, prodotti prima che i gradienti fossero introdotti nel CSS (se vi aspettate di farli visualizzare a Internet Explorer 6, andrete incontro ad amare delusioni), ma anche nei browser più recenti non è sempre garantito il supporto dei gradienti; talvolta, inserire il valore linear-gradient non è sufficiente, ma bisogna aggiungere un prefisso, specifico per ogni famiglia di browser. In altri termini, ottenere su ogni browser la grafica che abbiamo progettato può essere un lavoro discretamente seccante, se ci sono di mezzo i gradienti, perché è possibile che si debba scrivere il triplo del codice normalmente necessario. Per questo e altri motivi, esistono strumenti di supporto, che aiutano nella generazione del codice necessario per un gradiente e si possono occupare al posto nostro (se così vogliamo) di renderlo compatibile con la maggior parte dei browser in circolazione.

Ultimate CSS Gradient Generator è uno di questi strumenti, utilizzabile online sulla pagina del sito di Colorzilla e disponibile anche in due estensioni, per Firefox e Google Chrome. Come si può intuire dal nome assai umile e modesto, questo semplice programma si offre di generare per noi il codice da inserire nel foglio di stile CSS, per ottenere il tipo di gradiente da noi selezionato. Il suo funzionamento si può riassumere così: scegliamo il colore di partenza, il colore di arrivo e gli eventuali colori intermedi, poi indichiamo la direzione in cui dovrà avvenire la sfumatura (orizzontale o verticale) e il programma genererà il codice corrispondente. Una volta finito, basterà copiare il codice e incollarlo all'interno della regola CSS in cui dovrà essere utilizzato. Ma vediamo più in dettaglio.

Questa è la pancia della pagina, dove troviamo i vari comandi a nostra disposizione:

In alto a sinistra, sotto la etichetta Presets, ci è proposta una lista di modelli di gradienti, tra cui possiamo scegliere quello più simile al nostro progetto: sceglierne uno non è indispensabile, ma ci potrebbe far risparmiare tempo, se riusciamo a trovarne uno che corrisponda alle nostre idee (solo la struttura, non gli abbinamenti di colore: quelli li sceglieremo a parte).

In alto a destra, sotto la etichetta Preview, vediamo un’anteprima del nostro gradiente, ma soprattutto abbiamo la possibilità di selezionare la direzione del gradiente (sfumatura in orizzontale, in verticale, in diagonale o dal centro verso l’esterno).

Scegliere i colori è il passaggio fondamentale. È possibile che quelli proposti dai modelli del preset ci possano andare bene, ma molto più probabilmente vorremo utilizzare altri colori: li possiamo selezionare e impostare utilizzando tutti quegli altri comandi misteriosi che appaiono nella colonna di sinistra della pagina, cioè la barra colorata, Stops e Adjustments. Partiamo dalla barra colorata.

La bara colorata ha due gruppi di puntatori, che possiamo far scorrere: un gruppo nella parte superiore e uno nella parte inferiore. Il gruppo nella parte superiore serve a  regolare il livello di opacità di un colore (quanto è o non è trasparente), mentre il gruppo nella parte inferiore serve a scegliere il colore. Per avere un gradiente, servono almeno due colori, uno di partenza e uno di arrivo: per decidere il colore di partenza, clicchiamo sulla freccetta in basso a sinistra nella barra: a questo punto, vedremo che nel riquadro Stops, subito sotto, alla voce Color è apparso un colore, ossia quello di base per il modello da noi scelto. Se lo vogliamo cambiare, clicchiamo su quel colore e scegliamone un altro dalla tavola che ci apparirà. Lo stesso procedimento lo ripeteremo poi anche per il secondo colore e per gli eventuali colori intermedi.

Accanto a Color, sempre nel riquadro Stops, troviamo anche una voce Location, accompagnata da una percentuale: indica la posizione in cui si troverà quel colore, nel nostro gradiente. 1% è il colore di partenza, 100% è il colore di arrivo, percentuali intermedie indicano posizioni corrispondenti (un colore che ha 50% come Location, ad esempio, sarà raggiunto a metà della gradazione). Usando questo strumento, possiamo scegliere un colore di partenza, uno di arrivo e fino a due sfumature intermedie, se lo vogliamo. A ogni modo, possiamo anche limitarci a inizio e fine, senza tappe intermedie.

Utilizzando le frecce sulla parte alta della barra, come ho detto, si determina il livello di opacità per un colore: ci serviranno se vogliamo un gradiente che guadagna o perde trasparenza nel corso del suo passaggio da un colore all'altro  in questo caso, dopo aver cliccato su una freccia, dovremo indicare il livello di opacità, in percentuale: 100% è un colore completamente opaco, 1% è un colore completamente trasparente.

Nella colonna di destra della pagina, infine, troviamo il codice da copiare. A mano a mano che impostiamo il nostro gradiente, anche il codice cambierà corrispondentemente: una volta concluso, quando siamo soddisfatti del nostro lavoro, basterà copiare tutto quanto e incollarlo dentro a una regola del foglio di stile CSS, dove i gradiente dovrà essere applicato. Se vogliamo però che il nostro gradiente sia visibile anche su Internet Explorer 9, che per ragioni misteriose non supporta il normale gradiente in CSS, dovremo selezionare la opzione IE9 Support, che compare subito sotto il riquadro col codice: questa ci fornirà anche una porzione extra di HTML,ossia

<!--[if gte IE 9]>

  <style type="text/css">

    .gradient {

       filter: none;

    }

  </style>

<![endif]-->

Dobbiamo copiarla e incollarla nello <head> delle pagine in cui il gradiente dovrà essere utilizzato; più precisamente, incolliamola dopo il punto in cui abbiamo inserito il foglio di stile. 

Breve guida ai tipi di cookies

Premessa generale: questo non è un testo di cucina e i cookies di cui parlo sono quelli che, a ogni visita, i siti infilano nei browser dei propri utenti. Se uno strano scherzo di Google vi ha spediti qui, mentre cercavate ricette per i biscotti, forse è il caso di passare al risultato di ricerca successivo.

I cookies sono piccoli files, raramente superiori a una manciata di KB (la dimensione massima effettiva è 4095 bytes, ossia 4 KB), che il nostro browser tende ad accumulare mentre navighiamo in Rete, più o meno come un cane accumula le pulci. Questi piccoli files sono un gentile pensiero, offertoci dai siti che visitiamo, per ricordarsi del nostro. E per altri motivi, che variano da sito a sito e da cookie a cookie. Un cookie “standard” è una specie di timbro, grazie a cui un sito può riconoscerci: se non abbiamo un timbro, il sito ci vedrà come visitatori giunti lì per la prima volta e provvederà a marchiarci; se abbiamo già un timbro, il sito lo riconoscerà, saprà che siamo già passati di lì e si regolerà di conseguenza.

Un cookie, tipicamente, contiene una traccia della nostra identità, ma non solo: altri dati che possono essere memorizzati in un cookie sono i nostri dati di accesso a un sito (quando eseguite l’accesso a Facebook, per esempio, un cookie si ricorderà di questo e vi manterrà nel vostro account anche quando riaprirete il browser, se non ricorderete di fare logout alla fine della sessione), le preferenze che potremmo aver impostato per un sito (lingua, fuso orario, eccetera), ma anche le pagine che abbiamo visitato in un sito, eccetera. In breve, il cookie medio contiene un riassunto della nostra “vita” sul sito che lo ha collocato: leggendo questo riassunto, il sito può adattarsi meglio alle nostre abitudini, ai nostri interessi e alle nostre richieste, rifilandoci molto spesso le pubblicità che sono più in sintonia con noi e che, di conseguenza, hanno più probabilità di farci abboccare. Al nostro accesso, il sito pesca il suo cookie del nostro browser, ne invia le informazioni al server e, in base a queste informazioni, modificherà eventualmente i contenuti da mostrarci.

Come si può intuire, il controllo dei cookies è basilare, per chiunque sia interessato ad anonimato e privacy: coi cookies abilitati e attivi, lasciamo impronte digitali ovunque, il che potrebbe non essere ottimale, per chi si preoccupa di anonimato e privacy. I gestori di un sito potranno anche promettere di non utilizzare mai quei dati e non divulgarli mai (e di solito lo promettono, magari con le dita incrociate dietro la schiena), ma le nostre impronte digitali resteranno. Per questo motivo, i browser offrono solitamente la possibilità di controllare da quali siti vogliamo accettare cookies, quali dovranno essere bloccati, quali vogliamo cancellare, eccetera. Una buona norma sarebbe anche cancellare i cookies alla fine della sessione, ossia quando abbiamo finito di navigare, ed è una operazione che è sempre eseguita in automatico, se utilizziamo la modalità anonima, in incognito o comunque sia chiamata al nostro browser. Se li lasciamo nel browser, i cookies prima o poi moriranno per conto proprio, perché hanno una data di scadenza, ma spesso sarà necessario più di un anno, prima che un cookie muoia di morte naturale. Sempre che, nel frattempo, non saremo tornati su quel sito, rinnovandolo.

Esistono vari tipi di cookies, ognuno deputato a una funzione particolare. Se guardiamo ad esempio la lista dei cookies memorizzati all'interno di Google Chrome, che troviamo sotto chrome://settings/cookies, per ogni dominio possiamo vedere il numero dei cookies e, cliccando su quella sezione, anche il tipo di cookie, scritto in un rettangolo di colore più chiaro. In base al nome, possiamo capire anche quale sia la sua funzione. Un caso particolare, però, è rappresentato da Local storage, che non è un cookie, anche se lo troviamo elencato assieme a loro: local storage è una funzione introdotta dallo HTML5, che permette a un sito di memorizzare alcuni dati sul nostro computer, per velocizzare il caricamento o per altri scopi (un gioco, ad esempio, potrebbe registrare i nostri salvataggi come local storage, per recuperarli al nostro ritorno). Eccettuato dunque Local storage, tutti gli altri nomi che vedrete saranno tipi di cookie. Alcuni dovrebbero essere sufficientemente chiari, come language (provate a indovinarne la funzione), mentre altri hanno nomi alquanto criptici. Vedremo dunque di elencarne alcuni, tra i più diffusi.

Uno dei maggiori produttori e distributori di cookies è sicuramente Google Analytics, uno strumento molto amato e usato dai webmaster, per “misurare l’interazione degli utenti col sito”, ossia per vedere cosa fanno gli utenti mentre visitano un sito: che pagine visita l’utente X, da dove ci è arrivato, quanto tempo ci resta, cosa clicca all'interno della pagina, eccetera. Siccome tutto ciò è effettuato attraverso il collocamento e al lettura di cookies, è inevitabile ritrovarsi con un certo numero di cookies in più, dopo aver visitato un qualsiasi sito che utilizza Google Analytics: procederò dunque con una brevissima presentazione dei principali cookies collocati da questo strumento.

_ga: la sua aspettativa di vita è di 2 anni e serve a distinguere fra loro gli utenti.

__utma: aspettativa di vita di due anni, aggiornato ogni volta che i dati sono inviati a Google Analytics, serve a distinguere gli utenti e le varie sessioni di un utente.

__utmb: determina le nuove sessioni di attività su un sito, ossia le varie nostre visite.

__utmc: cancellato alla chiusura del browser, è un “gemello” del precedente, ma è usato per interagire con altre parti di Google Analytics.

__utmv: memorizza i dati di alcune variabili, che l’utente di un sito può modificare.

__utmz: registra il modo in cui un utente è arrivato al sito e spesso va a braccetto coi cookies di varie pubblicità.

La sfilza di cookies che cominciano con bb, come bblastvisit, bbpassword, bblastactivity, e varianti sul tema, sono collegati ad alcuni modelli di forum, proprio come i cookies sul tema phpbb, kunena, e compagnia bella. Questi cookies sono impostati dai forum che visitiamo, registrando il nostro accesso, la nostra ultima attività e così via; sono anche i responsabili delle funzione che ci permettono di passare direttamente agli ultimi messaggi non letti in una discussione, oppure ci mostrano i nuovi messaggi dalla nostra ultima visita.

Allo stesso modo, anche siti come YouTube utilizzano cookies per registrare le nostre preferenze, gli ultimi video che abbiamo visto, eccetera; in particolare, recently_watched_video_id_list ricorda la lista degli ultimi video da noi visti su un determinato browser. Sempre in tema di Google, un dominio a cui prestare attenzione è doubleclick.net, al cui interno è registrato il cookie id, cioè il principale (ma non l’unico) cookie utilizzato da Google per gestire la sua pubblicità. Altri cookies pubblicitari usati da Google, e che possono essere trovati più o meno ovunque in giro per i vari siti, sono _drt_, FLC, NID, exchange_uid, ma anche il cookie __gads è spesso a braccetto con quello di doubleclick, mentre PREF è un cookie che si occupa delle preferenze nei risultati di ricerca (e non solo), anche per tutti quegli utenti che non hanno eseguito l’accesso al proprio account Google.

Cliccando sul rettangolino contenente il nome di un cookie, su Google Chrome, è inoltre possibile esaminarlo più da vicino, ottenendo informazioni sul dominio a cui è collegato, la sua data di creazione, la data di scadenza e altro, tra cui un pulsante per rimuoverlo.

Il riconoscimento vocale con Google Chrome

Una delle novità introdotte a partire dalla versione 25 di Google Chrome è il completo supporto alla interfaccia per il riconoscimento vocale; l’interfaccia per il riconoscimento vocale, a propria volta, è la Web Speech API, una delle numerose interfacce JavaScript, più o meno utili a seconda dei casi, che stanno spuntando come funghi con la diffusione dello HTML5, supportato ormai da tutti i browser più recenti.

In linea generale, questa interfaccia JavaScript dovrebbe rendere più semplice il lavoro di aggiungere alle pagine web tutte le funzioni connesse al riconoscimento vocale: dettare testi, impartire comandi, eccetera. Se effettivamente riuscirà a semplificare il lavoro, però, dipenderà da quanto sarà diffuso il supporto per questa interfaccia sui vari browser, ma questo è un altro paio di maniche. Intanto, possiamo guardare un primo esempio del suo funzionamento.

Prima di cominciare a dettare un testo, sarà necessario selezionare il linguaggio e, eventualmente, il paese, se è un linguaggio parlato in più paesi. Successivamente, un click sulla icona a forma di microfono, in alto a destra nel riquadro, permetterà al browser di attivare il microfono del nostro computer, per registrare la voce: basterà poi cominciare a parlare e vedremo il testo apparire sullo schermo, in una trascrizione più o meno corretta. Alla fine, clicchiamo di nuovo sul microfono, per avvisare che la registrazione deve essere interrotta. Appariranno a questo punto due pulsanti, sotto il riquadro di testo: il primo ci permette di copiare il testo (per incollarlo dove preferiamo), il secondo ci permetterà di creare una e-mail, il cui contenuto sarà proprio il testo da noi dettato.

Per adesso, i linguaggi supportati sono circa trenta, italiano incluso, ma ovviamente la qualità del risultato varia a seconda del linguaggio: più diffusa è la lingua, migliore in linea di massima è il risultato. In altri termini, con l’inglese funziona generalmente bene, con l’italiano non sempre si otterrà una trascrizione esatta, come potrete verificare con qualche esperimento. Miglioreranno strada facendo.

Un esempio più concreto lo si può ottenere sul sito della Peanuts Gallery, dove sono messi a disposizione vari vecchi filmati in bianco e nero, a cui è possibile aggiungere un testo utilizzando proprio questa interfaccia di riconoscimento vocale: in altri termini, scegliete un video e parlate a voce alta davanti al vostro computer, cercando di non pensare a quanto sia ridicola la scena vista dall'esterno  e la funzione di riconoscimento vocale provvederà a registrare ciò che dite, per poi aggiungerlo al filmato come intertitolo, ossia quella didascalia che, nei vecchi film muti, compariva tra una scena e l’altra.

Dopo questi due esempi di come si possa utilizzare, vediamo anche qualcosa di più preciso sul suo funzionamento: in cosa consiste questa Web Speech API?

Come qualsiasi altra interfaccia, la Web Speech API ci mette a disposizione una serie di funzioni da utilizzare nel nostro codice, con la garanzia che, utilizzando la funzione X, otterremo sempre un certo risultato (se il browser che eseguirà il nostro codice supporta questa interfaccia, ovviamente). Se il risultato è garantito, il modo in cui questo risultato sarà ottenuto è variabile e dipende dai singoli browser: alcuni possono decidere di eseguire il riconoscimento vocale in locale, ossia sul nostro computer, attraverso un apposito “motore” aggiunto al browser; altri, invece, potranno decidere di registrare ciò che diciamo, inviarlo ai propri server e poi restituirci sulla pagina il risultato del riconoscimento. Per inciso, negli esempi di Google Chrome il riconoscimento vocale avviene attraverso un server: altri browser, però, potrebbero svilupparlo differentemente. La Web Speech API supporta entrambe le soluzioni: se vogliamo utilizzarla in una nostra pagina, dunque, non abbiamo bisogno di preoccuparci di come effettivamente avvenga il riconoscimento vocale, ma basta sapere quali comandi utilizzare per avviare il riconoscimento, interromperlo e raccoglierne i risultati.

Se il discorso non è chiaro, prendiamo un esempio più familiare: l’interfaccia di un’automobile. Tutte le automobili hanno un freno; premendolo, la velocità diminuirà. Un automobilista non ha strettamente bisogno di sapere i dettagli sull’impianto frenante montato sulla sua auto: per usare il freno, gli è sufficiente conoscere il pedale corrispondente e conoscere il risultato della pressione, ossia un calo della velocità. Allo stesso modo, se vogliamo arricchire la nostra pagina web con un form, che può essere compilato dettando il testo, invece di scriverlo a mano, ci basterà sapere quali funzioni JavaScript dobbiamo invocare, lasciando poi che sia il browser a preoccuparsi per noi di effettuare il riconoscimento vero e proprio.

Per le funzioni, possiamo fare riferimento alla pagina di presentazione di questa interfaccia, su cui compaiono anche alcuni esempi di utilizzo. In linea di massima, si comincerà sempre con la verifica del supporto offerto dal browser: se il browser non supporta la Web Speech, è inutile proseguire. Se la supporta, per prima cosa creeremo un nuovo oggetto SpeechRecognition e ne utilizzeremo i metodi principali: start() per avviare la registrazione (magari cliccando su qualche elemento della pagina), stop() per interromperla. Esistono poi diversi attributi da impostare, a seconda del tipo di registrazione che vogliamo: registrazione continua o singola, come deve essere processato il testo, quale sia il linguaggio di riferimento, e così via. Per esempi più completi del suo utilizzo, però, è meglio fare riferimento a quelli proposti nella presentazione della interfaccia, oltre anche a quelli che ci ha offerto Google.

Installare e utilizzare Node.js su Windows

Node.js è una nuova piattaforma per lo sviluppo di siti web e applicazioni web, utilizzando un solo linguaggio di programmazione sia per il lato cliente, ossia per sviluppare ciò che appare dentro le pagine e con cui gli utenti interagiranno, sia per il lato server, ossia per occuparsi delle comunicazioni col server (o della sua creazione), lo scambio di dati tra pagina e server, la creazione interattiva di contenuto, eccetera. In pratica, permette di utilizzare un unico linguaggio per entrambe le fasi, invece di appoggiarsi a PHP o ASP (o Java, o altri ancora) per gestire l’interazione col server. Rispetto ad approcci tradizionali, Node.js offre una maggiore efficienza, grazie a un sistema di comunicazione asincrono tra pagina e server. Dettagli ancora più “da nerd” li potete trovare, per esempio, su questa pagina in italiano, ma ve li risparmierò. In termini umani, possiamo dire che Node.js promette (e in parte mantiene, almeno finora) di realizzare pagine e applicazioni web più veloci e reattive, che non vi costringeranno ad attendere i comodi del server, per caricare qualcosa.

Oltre a questo, Node.js è anche uno strumento per eseguire JavaScript fuori da un browser: se avete mai sognato di lanciare programmi in JavaScript dalla linea di comando, ad esempio, Node.js vi permetterà di farlo. Costruito attorno al motore JavaScript di Google Chrome, che al momento è forse il più efficiente in circolazione, oltre a essere open-source, Node.js è a propria volta un progetto e programma open-source (e disponibile per i principali sistemi operativi), che cerca di portare il JavaScript fuori dal browser, per utilizzarlo... beh, più o meno per ciò che volete, anche se il suo primo obiettivo sono, per l’appunto, le applicazioni web costruite e gestite interamente in JavaScript. Una volta convinti che il JavaScript può essere indipendente dalla finestra del vostro browser, i limiti di quello che potrete farci saranno dati solo dalla vostra creatività (e competenza). Nel peggiore dei casi, potrete sempre utilizzare Node.js per giocherellare col JavaScript dalla linea di comando e usarlo come calcolatrice o altro. Anche questo è un uso lecito.

Node Package Manager (abbreviato in npm, cioè il comando utilizzato per avviarlo) è la fidata spalla di Node.js e serve ad aggiungere nuove funzioni, installando “pezzi” aggiuntivi (noti anche come pacchetti), occupandosi del loro aggiornamento e della loro reperibilità all'interno del computer, e così via. Se all'inizio vi servirà poco, ne scoprirete l’importanza non appena cercherete di sviluppare un programma più complesso del classico “Hello world”. Se non siete interessati a sviluppare applicazioni web, ma volete soltanto uno strumento per utilizzare il motore JavaScript di Google Chrome senza avete attorno Google Chrome, allora potete anche ignorare npm e vivere sereni lo stesso. Se invece lo utilizzerete, potete da subito imparare i sue comandi che vi serviranno più spesso: npm install nome-del-pacchetto –g (per installare globalmente un nuovo pacchetto; non se lo volete installare globalmente, togliere la –g) e npm link nome-del-pacchetto (per rendere accessibile il pacchetto da qualunque punto del vostro computer). Ne esistono molti altri, ma all'inizio vi basteranno questi due.

In precedenza, installare Node.js su un sistema operativo Windows poteva essere un procedimento piuttosto complicato, costringendo spesso gli utenti a passare attraverso Cygwin o analoghi simulatori di Linux, per portare a termine la missione. Fortunatamente, da qualche mese è però disponibile una soluzione molto più semplice, che in un colpo solo elimina tutte le complicazioni e ripristina una delle principali qualità di Windows, ossia una installazione a prova di incapace totale. Questa soluzione è l’installer per Windows.

Qualunque cosa troviate scritta su manuali e guide varie, a proposito dell’installazione su Windows di Node.js e npm, ignoratela pure: quasi sicuramente è stata scritta prima che arrivasse l’installer e vi spingerebbe verso soluzioni inutilmente complicate. Per installare Node.js, dunque, andate su http://nodejs.org/download/ e scaricate Windows Installer (al momento, il nome intero è node-v0.8.14-x86.msi, ma il numero della versione è destinato a cambiare in fretta, data la velocità con cui lo sviluppo è portato avanti): lanciate poi l’installazione con il solito doppio click e seguite le indicazioni sullo schermo. Alla fine, vi ritroverete con Node.js e npm installati a dovere e pronti a funzionare.

Una volta installato, nella lista programmi del menu start (quello che esce cliccando sul tasto start di Windows) dovreste trovare una nuova voce, ossia Node.js (x86), oppure (x64), a seconda del tipo di sistema che avete. La prima opzione che vi offre al suo interno è Node.js: cliccandola, aprirete una finestra che vi inserirà direttamente nel REPL di Node. Il REPL (Read-Eval-Print-Loop) è uno strumento per la programmazione interattiva, che permette di scrivere una operazione ed eseguirla immediatamente (premendo “Invio”, ovvio): un buon sistema per sperimentare subito qualcosa e “assaggiare” un nuovo linguaggio di programmazione, senza bisogno di scrivere programmi interi.

Come vedete dall'immagine sopra, non è molto affascinante, sul piano visivo: il REPL è uno spazio in cui voi scrivete il comando accanto alla >, per ricevere subito sotto il risultato dell’operazione, in un colore diverso. Se scegliete invece la seconda opzione, ossia Node.js command prompt, si aprirà una normale finestra della linea di comando: da qui potete eseguire programmi in JavaScript utilizzando Node, oppure potete entrare nel REPL. Per eseguire un programma, basta scrivere node nome_del_programma.js e premere “Invio”; per entrare nel REPL, scrivere solo node (e premete “Invio”).

Per uscire, infine, potete scrivere il comando .exit (il punto iniziale fa parte del comando): se avete aperto direttamente il REPL. La finestra si chiuderà; se invece siete partiti dalla linea di comando, ritornerete alla linea di comando.

Bene, adesso abbiamo installato Node.js e abbiamo verificato che tutto funziona: cosa possiamo farci? Svariate cose, se conosciamo il JavaScript, ma il suo uso principale è quello di strumento per realizzare applicazioni web in JavaScript, occupandosi sia del lato cliente (ossia quello che vedete sulla pagina e coi cui interagite normalmente), sia del lato server (ossia il motore che sta dietro a tutto, col quale non interagite direttamente). Un buon punto di partenza per le esplorazioni può essere la guida in italiano che potete trovare sul sito html.it e che, in quindici lezioni, vi accompagnerà in un giro turistico delle sue funzioni e del suo funzionamento. Nella seconda puntata della guida potete ignorare la parte relativa all'installazione di npm, perché quella l’avete già risolta utilizzando l’installer: per il resto, però, non dovrebbero esserci problemi.

Installare estensioni su Google Chrome

Proprio come Firefox e gli altri browser basati su Mozilla, anche Google Chrome permette di utilizzare varie estensioni, per modificarne e personalizzarne il comportamento e l’aspetto: non siamo ai livello di invasività di Firefox, ma probabilmente ci arriveremo. Per usare una immagine che sarà chiara a molti programmatori in Java, per il momento le estensioni di Chrome sono al livello dei plugin di Netbeans, mentre quelle di Firefox rappresentano Eclipse, ma la distanza si va accorciando. Una conseguenza spiacevole dell’aumento del peso specifico delle estensioni in Chrome la possiamo vedere con l’ultima versione stabile del browser: a partire dalla versione 21, a quanto pare, anche Google Chrome ha deciso di seguire il cattivo esempio di altri imperi del male, consentendo l’installazione diretta e automatica soltanto delle estensioni approvate e distribuite dal Chrome Web Store ufficiale. Rimane comunque la possibilità di installare manualmente le altre estensioni, almeno per il momento, ma la vedremo più avanti.

Il Chrome Web Store è diventato dunque il punto di riferimento principale e privilegiato, quando si vuole aggiungere qualcosa a Chrome. Possiamo raggiungerlo in più modi: direttamente dal suo indirizzo, come è ovvio, ma una strada molto più rapida è quella di aprire una nuova scheda di Chrome (CTRL+T) e guardare nell'angolo in basso a destra, dove troveremo questo

Cliccandolo, si aprirà la pagina del Web Store, che ci apparirà così:

Più o meno, ovviamente: estensioni e applicazioni in primo piano saranno diverse, a seconda di cosa il sito abbia deciso di mettere in evidenza in quel particolare momento del giorno.

Al di là della vetrina luccicante, ciò che ci interessa è la colonna sinistra della pagina: lì infatti troviamo sia il riquadro di ricerca, sia un elenco delle principali sezioni dello Store, che potremo aprire e “setacciare” a seconda di quale tipo di estensione stiamo cercando. Per ogni estensione e applicazione, poi, potremo trovare sia un voto assegnato dai suoi utenti (o almeno da quegli utenti che hanno avuto voglia di cliccare, per esprimere un parere sul funzionamento dell’estensione), una descrizione più o meno accurata di cosa dovrebbe fare quella estensione e, di solito, anche una o più recensioni dei suoi utenti. Insomma, le solite cose che possiamo vedere su qualsiasi sito in cui siano esposti prodotti da esaminare e scegliere: dovrebbe essere sufficientemente familiare a tutti.

Per installare una nuova estensione dal Chrome Web Store, dovremo prima di tutto cercarla e sceglierla, ma diamo per scontato che questo primo passo sia stato compiuto: abbiamo localizzato l’estensione che fa al caso nostro e siamo pronti ad aggiungerla a Chrome. L’operazione è molto facile, perché basterà cliccare sul pulsante “Aggiungi a Chrome” (oppure “Add to Chrome”, o altre frasi ancora, a seconda della lingua in cui stiamo usando Chrome). Si aprirà un riquadro con la solita pappardella sui tipi di dati a cui l’estensione potrà accedere, e che poche persone leggono, come accade con le licenze di uso dei programmi da installare; una volta letta, o ignorata, potete cliccare “Installa”, per accettare le richieste della estensione e installarla su Chrome. Se avete cambiato idea, dopo aver letto le sue richieste, basterà chiudere la finestra; se invece avete avviato l’installazione, il lavoro per voi è concluso: Chrome farà tutto da solo e in pochi secondi la vostra nuova estensione sarà pronta per l’uso. Per ogni evenienza, come disattivarla, disinstallarla o modificarne le opzioni, potrete raggiungerla da “Strumenti” -> “Estensioni”.

Questo per quanto riguarda le estensioni approvate da Google e distribuite attraverso il Chrome Web Store. Esistono però altre applicazioni che non sono distribuite da questo centro ufficiale, ma possono tornare comode in molte occasioni: è il caso, ad esempio, di buona parte degli script che troviamo su Userscript, porzioni di codice JavaScript pensate per essere utilizzate all'interno di GreaseMonkey e di Firefox, ma che spesso funzionano bene anche come estensioni di Chrome. Un caso per tutti è YouTube Video Download, che aggiunge un pulsante per lo scaricamento sotto a ogni video di YouTube, fornendovi anche vari formati in cui scaricare il video.

Fino alla versione 20, queste estensioni non ufficiali potevano essere installare normalmente, come tutte le altre; dalla versione numero 21 di Google Chrome, invece, l’installazione automatica funziona soltanto per le estensioni ufficiali, mentre le altre estensioni dovrete installarle a mano. Non è complicato.

Prima di tutto, scarichiamo l’estensione che ci interessa. Siccome non abbiamo il permesso di istallarla direttamente, Chrome la scaricherà come un qualsiasi altro file, nella cartella che abbiamo scelto per il download. Apriamo ora la lista delle estensioni installate sul nostro Chrome: la troviamo qui, oppure passando da “Strumenti” -> “Estensioni”. Infine, selezioniamo il file della estensione appena scaricata, trasciniamolo sulla lista delle estensioni installate e poi “appoggiamolo” lì: Chrome ci chiederà se vogliamo davvero installarlo e, al nostro “ok”, procederà con l’installazione.

Google Chrome 22: una breve presentazione

Approfittando della recente uscita della versione 22 di Google Chrome (ebbene sì, siamo già alla 22, anche se la maggior parte degli utenti non se ne sarà neppure accorta, dato che le differenze sono raramente visibili in superficie), vedrò di presentare in modo più completo le funzioni di questo browser, dopo averne esaminate diverse in altri post, quando capitava l’argomento giusto.

Prima di tutto, la differenza che chiunque noterà in questa versione numero 22: la vecchia e cara icona a forma di chiave inglese, nell'angolo in alto a destra del browser, è stata sostituita da un’anonima e piuttosto squallida icona con tre lineette orizzontali. Il menu resta uguale, la posizione anche, cambia solo l’aspetto della icona e, almeno a mio parere, non cambia in meglio. Ma pazienza.

Novità molto più consistenti si trovano invece sotto il motore, legate principalmente al migliorato supporto per le potenzialità offerte dallo HTML5. In particolare, una cosa che piacerà molto agli incalliti videogiocatori online è il supporto della funzione Mouse Lock, che da questa versione di Chrome è diventata “di serie”: il Mouse Lock è una funzione che consente di cedere temporaneamente il controllo del puntatore del mouse al browser, così da poterlo utilizzare all'interno della finestra di un videogioco online in modo simile a quanto avviene in un normale videogioco. In altri termini, nei videogiochi online in cui è abilitata questa funzione, il puntatore del mouse potrà essere “bloccato” all'interno della porzione di schermo in cui si trova il videogioco, come se fosse parte del videogioco stesso. Siccome spiegarla soltanto a parole potrebbe essere difficile, e soprattutto pochi chiaro da capire, ecco un esempio pratico: qui trovate un semplice esempio di gioco in 3D, open source e sviluppato da Mozilla, dove potrete collaudare il funzionamento del Mouse Lock. Provatelo (con Chrome) e tutto dovrebbe diventare più chiaro.

Per inciso, la possibilità di trasferire temporaneamente al browser il controllo di una o più componenti del nostro computer, per eseguire alcune operazioni, è una delle peculiarità dello HTML5 e ne abbiamo già parlato in breve, accennando a Movi Kanti Revo, dove si trattava di lasciar utilizzare la webcam al nostro browser.

Per il resto, Google Chrome continua a conservare la sua natura di browser dall'interfaccia molto semplificata, quasi ridotta all'osso  A detta dei suoi sviluppatori, questo servirebbe a facilitare la vita anche agli utenti meno esperti e con meno voglia di smanettare su un programma, ma è inevitabile ripensare alla battuta di apertura di Panfilo Maria Lippi, personaggio che Luttazzi portava in scena una quindicina di anni fa. A ogni modo, questo è il meno che Chrome ci mette a disposizione (en passant, potete notare in alto a destra l’icona che ha sostituito la vecchia chiave inglese):

Scabro ed essenziale, per l’appunto. Ogni voce è accompagnata da una combinazione di tasti, che permette di attivarla senza passare dal menu, ma soprattutto ha un nome italiano che dovrebbe essere autoesplicativo. O almeno, così è nella maggior parte dei casi; alcune voci, tuttavia, meritano un poco di attenzione in più.

Che cosa sia una finestra di navigazione in incognito, e cosa intenda Chrome per navigazione in incognito e anonimato, è argomento che ho affrontato già in un precedente articolo. Questa funzione non vi renderà anonimi su internet, ma soltanto sul computer che state utilizzando: attivatela se il computer su cui vi trovate è utilizzato anche da altre persone (madre, padre, moglie, marito, figli, eccetera) e non volete che queste persone sappiano che siti visitate; se la vostra preoccupazione è di essere tracciati, individuati o schedati mentre navigate in Rete, allora questa funzione non vi aiuterà.

La voce “Strumenti” apre un sottomenu che, nella maggior parte dei casi, sarà interessante solo per un nerd, o quantomeno per chi traffica abitualmente con HTML, JavaScript e in generale si dedica a sviluppo e manutenzione di siti.

Crea scorciatoie applicazione permette di aggiungere un sito internet al tuo desktop, al menu di avvio, eccetera, come se il sito fosse una normale applicazione: cliccando l’icona o la voce del menu corrispondente, aprirete il sito che avete selezionato. Funzione di dubbia utilità, ma tant'è.

Estensioni permette di gestire le estensioni che abbiamo aggiunto a Chrome, mentre Task manager ci presenta una descrizione accurata di come Chrome stia utilizzando le risorse del nostro computer: quanta RAM consuma ogni estensione, quanta ne consuma invece il browser di base, eccetera. In linea di massima, corrisponde alla Gestione attività di un qualunque sistema operativo Windows.

Le ultime tre voci sono quelle a più alto contenuto nerd. Visualizza sorgente permette di vedere il codice HTML della pagina che abbiamo davanti, mentre Strumenti per sviluppatori e Console JavaScript ci permettono di interagire con questo codice. In particolare, Console JavaScript aprirà un riquadro con una linea di comando, dove potremo testare brevi script in JavaScript all'interno di un ambiente interattivo: scriviamo un comando o una funzione, premiamo “Invio” e abbiamo subito il risultato.

Tornando al menu principale, l’ultima voce che merita qualche parola extra è “Accedi a Chrome”: una voce che può apparire strana, dato che, se la stiamo leggendo, abbiamo già aperto Google Chrome. In realtà, più che di “accesso a Chrome”, sarebbe corretto parlare di “accesso a Google”, perché questa funzione ci connetterà al nostro account su Google. Se non abbiamo un account su Google, dovremo prima crearne uno, se vogliamo utilizzare questa funzione. Ma vogliamo utilizzare questa funzione? Questione di gusti.

Dopo aver selezionato “Accedi a Chrome” e aver effettuato il login al nostro account di Google, le impostazioni di Google Chrome che stiamo utilizzando saranno salvate all'interno del nostro account Google: i siti preferiti, le estensioni, eccetera. Accedendo poi a Chrome da un altro computer, potremo utilizzarlo come se fosse il Chrome del nostro computer: ritroveremo tutte le nostre impostazioni, le estensioni  e tutti i dati che sono stati salvati nel nostro account Google.

Oltre a queste semplici voci, accessibili a tutti, Chrome ha anche altri comandi, rivolti soprattutto a utenti più esperti; nella maggior parte dei casi, vi si può accedere scrivendo nella barra degli indirizzi un testo del tipo “about:”, seguito da un certo comando. Per esempio, about:plugins ci aprirà una pagina con la lista di tutti i plugin installati in Chrome: da lì potremo attivarli o disattivarli. about:gpu ci mostrerà invece svariate informazioni sulla grafica del nostro computer e le funzioni che supporta. about:cache ci mostrerà un lungo elenco di link, che corrisponde agli elementi contenuti nella cache di Chrome. E così via.

Google, HTML5 e Cirque du Soleil

Google, HTML5 e Cirque du Soleil sono una combinazione strana, a prima vista, ma anche a seconda vista continuano a lasciare perplessi. Sono però una combinazione che ha un suo senso e questo senso è incarnato nel recente progetto Movi Kanti Revo, realizzato attraverso una collaborazione tra Google e il Cirque du Soleil: più precisamente, il Cirque du Soleil ci ha messo la sua arte, mentre Google Chrome ha fornito la base tecnologica necessaria per il progetto. Questa base tecnologica è costituita appunto dallo HTML5, che non è certo limitato a Google Chrome, ma che Chrome supporta particolarmente bene. Per essere ancora più precisi, la base tecnologica è costituita dal progetto WebRTC, un progetto open source supportato da Google, di cui parlerò dopo. Il risultato è osservabile sul sito relativo, ossia Movi Kanti Revo.

Il sito in questione è stato costruito per essere sia il sito dello spettacolo, sia il palcoscenico dello spettacolo, sia lo spettacolo stesso: navigare attraverso il sito significa osservare lo spettacolo, ma anche prendervi parte. O almeno, questa è l’intenzione. Più in concreto, il sito è progettato per essere navigabile in un modo non convenzionale: invece di utilizzare il classico sistema del point-and-click, ossia muovere il puntatore del mouse per cliccare su questo o quell’elemento della pagina, il sito di Movi Kanti Revo propone una navigazione attraverso gesti compiuti davanti alla propria webcam. In questo modo, anche gli spettatori possono idealmente entrare nello spettacolo e muoversi assieme a esso. O qualcosa di simile.

En passant, il nome Movi Kanti Revo è formato da tre verbi in esperanto, che significano “muoversi”, “cantare” e “sognare”; l’esperanto è una lingua artificiale, nata alla fine dell’Ottocento col nobile proposito di divenire linguaggio universale per la fratellanza tra i popoli, ma che ha più o meno lo stesso seguito di altre lingue immaginarie come l’elfico di Tolkien o il Klingon. Qualcosa per nerd linguistici, insomma. Ma torniamo al progetto.

Per utilizzare il sto e assistere-partecipare in forma completa allo spettacolo, due componenti sono necessarie: un computer dotato di webcam (possibilmente accesa) e un browser che supporta la tecnologia utilizzata. Siccome la tecnologia in questione è sviluppata sotto l’ala protettrice di Google (ma non è proprietà di Google: tutto quanto è open source e potete farne ciò che volete), il browser privilegiato è Google Chrome, ma in linea di massima non dovreste aver problemi neppure con Opera e Firefox. Come terzo e quarto componente necessario, io aggiungerei una connessione stabile e di buona qualità, ma anche un computer di buona potenza, se volete evitare immagini a scatti e altri spiacevoli effetti collaterali da animazione rallentata. Detto questo, passiamo a vedere meglio quale sia la tecnologia utilizzata.

Come dicevo prima, lo spettacolo-sito si basa su WebRTC, un progetto supportato da Google, ma reso disponibile a tutti in formato open source: qui trovate la licenza d’uso, mentre qui potete vedere un altro esempio di ciò che si può ottenere con WebRTC. Il codice sorgente, infine, è accessibile da questa pagina. Scopo di questo progetto è fornire ai browser uno strumento per supportare le comunicazioni “in diretta”, senza bisogno di appoggiarsi a Flash o Silverlight, ma usando solo il JavaScript. Il sito di Movi Kanti Revo, per l’appunto, fa uso soltanto del JavaScript per ottenere il risultato che avete potuto vedere. Più nello specifico, WebRTC mette a disposizione gli strumenti per sviluppare comunicazioni audio e video: per fare un esempio, rende possibile programmare una video chat in JavaScript, ma anche molto altro.

Fra le nuove funzioni introdotte dallo HTML5 c’è appunto il supporto diretto per video e audio, che in precedenza era invece delegato a plugin esterni, come il famoso (e famigerato) Flash: tutto ciò è stato ottenuto grazie a una maggiore integrazione del JavaScript nel codice HTML. YouTube, per fare un esempio che sicuramente sarà noto a tutti, ha sempre utilizzato il Flash per la riproduzione dei video, ma negli ultimi tempi offre anche l’utilizzo di una interfaccia in HTML5 per i browser che lo supportano: in questo modo, è possibile guardare i video di YouTube anche su computer e dispositivi in cui il Flash è bloccato o assente, senza accorgersi della differenza.

WebRTC parte da queste basi e si spinge oltre. Accanto alla semplice riproduzione di video, offre infatti anche la possibilità di catturare video e audio attraverso una webcam, come si è visto nel lavoro del Cirque du Soleil: la funzione JavaScript getUserMedia() serve appunto a questo scopo. Al posto di una spiegazione di tutto ciò che si può fare, però, è forse più semplice vederlo in azione: il sito del progetto ci offre appunto una serie di esempi che possiamo provare nel nostro browser (ammesso che li supporti), così da farci una idea di come potrebbero essere molti siti in un futuro più o meno immediato. Se sia un passo avanti, lo lascio decidere a voi; di certo, però, i problemi di sicurezza e le discussioni sulla privacy sono destinati ad aumentare, in modo più o meno sensato. A titolo informativo, attualmente Google Chrome vi chiederà il consenso, prima di accedere a webcam e microfono: potete acconsentire oppure negare, come preferite.

La modalità anonima di Chrome e Firefox

Non avevo mai utilizzato la modalità di navigazione in incognito, offerta da Google Chrome, né quella di navigazione anonima, offerta da Firefox, perché le trovavo abbastanza inutili, per motivi che presto saranno chiari. Giusto ieri, però, in un momento di intenso spleen digitale, ho provato ad aprire la finestra di navigazione in incognito di Google Chrome e mi sono trovato davanti a un messaggio introduttivo che, per certi versi, è l’equivalente di un cartello stradale del tipo “Pericolo, attraversamento dinosauri”. Il messaggio è questo:

Ora, al di là dell’icona da 007, che già di per sé è di grande aiuto per entrare nel giusto clima, ciò che ha attirato la mia attenzione è il punto quattro. Dopo averlo letto, ho capito che non avrei potuto non scrivere qualcosa in proposito. Per ulteriore curiosità, ho provato anche l’analoga funzione di Firefox, ossia la navigazione anonima, col risultato di trovarmi questo messaggio di avvio:

La mascherina in stile veneziano ha molta più classe, in effetti, e mancano gli avvisi ironico-paranoici (perché voglio credere che quel punto quattro sia stato aggiunto come presa in giro, non come avviso serio), ma il risultato non cambia: tanto la navigazione in incognito, quanto la navigazione anonima, fanno la stessa cosa. Cosa facciano è ciò che vedremo adesso.

Domanda: a cosa serve la navigazione in incognito di Google Chrome (o la navigazione anonima di Firefox, che è uguale)? Se pensate che la risposta sia “a farci navigare senza svelare tracce della nostra identità”, allora siete parecchio fuori strada. L’incognito o l’anonimato di cui parlano queste modalità di navigazione non si riferisce alla Rete, ma al computer su cui vi trovate. Tutto ciò è specificato nella descrizione che entrambi i browser offrono: siccome però poche persone si prendono la briga di leggere le istruzioni, è probabile che il fraintendimento vivrà a lungo.

La navigazione in incognito di Chrome e la navigazione anonima di Firefox non servono per farci visitare questo o quel sito, senza lasciare tracce del nostro passaggio: se effettuiamo una qualche ricerca su Google, Google continuerà a memorizzarla nella sua cronologia dedicata a noi; se entriamo in un sito, quel sito continuerà a conservare traccia del nostro passaggio nel suo database; il nostro provider (cioè la società che ci fornisce la connessione) continuerà a mantenere una lista dei siti visitati; e così via. Se cerchiamo l’anonimato in Rete, è meglio rivolgerci ad altri strumenti, come ad esempio Tor, che comunque non saranno sufficienti senza la nostra attiva collaborazione: il primo software di sicurezza e anonimato lo abbiamo dietro la nostra fronte, perché è inutile usare Tor, se poi andiamo a scrivere i nostri dati reali su questo o quel sito.

La navigazione in incognito (o anonima) fornita da questi due browser serve a cancellare le tracce della nostra attività sul computer che stiamo usando. Saremo anonimi rispetto al computer, non rispetto alla Rete, ed è quindi utile se stiamo utilizzando un computer condiviso e non vogliamo che gli altri utenti possano scoprire che siti abbiamo visitato: per esempio, se non vogliamo che nostra madre/nostra moglie/il nostro capo scoprano che abbiamo visitato il sito “OrgeAnimalesche.xxx” (nome inventato al momento, dubito che esista davvero, ma non ne sarei sorpreso). Attivando questa modalità di navigazione, le tracce della nostra navigazione saranno cancellate dal computer, alla fine della sessione (ossia quando chiudiamo il browser): non saranno conservati i cookies dei vari siti, non saranno registrate le pagine nella cronologia web, non sarà conservata la lista dei download effettuati (ma i file che abbiamo scaricato sopravviveranno, per cui è opportuno trasferirli altrove, se non vogliamo che siano visti), non saranno salvate password. Questo è l’incognito (o l’anonimato) che i due browser ci offrono: forse non quello che ci aspettavamo, ma è quanto passa il convento.

Per quanto sia una forma di anonimato minore, però, non è da disprezzare. Il browser, qualunque esso sia, ha lo spiacevole vizio di memorizzare tutto ciò che facciamo: a volte questa funzione può tornare utile, per esempio se vogliamo ritrovare un sito visitato qualche giorno fa, di cui non ricordiamo più il nome, ma altre volte si può sentire il bisogno di far sparire quella lista di dati, in particolare quando si tratta dei cookies. Un cookie permette sì a un sito di riconoscerci, quando torniamo a visitarlo, risparmiandoci magari la fatica di dover effettuare ogni volta il login, ma può anche  essere utilizzato in forme meno “benigne”, ad esempio per vedere in quali altri siti siamo stati nel frattempo: per chi è interessato alla privacy o per chi ne è fanatico, un cookie è un oggetto da maneggiare con molta attenzione. Sotto questo aspetto, sapere che il nostro browser può provvedere da solo a non conservare la cronologia e a cancellare i cookies alla fine della sessione, senza che dobbiamo provvedere noi stessi, può essere utile: la modalità di navigazione in incognito fa proprio questo, ripulisce al nostro posto le tracce che lasciamo nel browser, navigando su questo o quel sito.

Come nota a margine, la modalità in incognito di Google Chrome disattiva in automatico tutte le estensioni che avete installato nel browser. Se volete riattivarle, dovrete andare su chrome://chrome/extensions/, dove troverete la lista di tutte le estensioni installate e, sotto a ognuna di esse, vedrete una voce “Consenti modalità in incognito”: se la selezionate, quella estensione resterà attiva anche quando siete in incognito.

Se volete ricorrere a mezzi più radicali per far sparire ogni traccia di utilizzo di un computer, allora è meglio che portiate sempre con voi una chiave USB su cui è installato un sistema operativo Live, in sostituzione del sistema operativo installato sul computer da usare: Tails, ad esempio, potrebbe essere un’ottima soluzione. La maggior parte dei comuni utenti non ha bisogno di arrivare a tanto, ma nulla vi vieta di procedere, se siete convinti che vi serva.

Se però siete convinti che all’interno della vostra casa si nascondano agenti segreti di potenze straniere, per spiare la vostra attività al computer e rubarvi i dati (come suggerisce il famigerato punto quattro di Google Chrome), allora avete senza dubbio più di un problema, ma non è di sicurezza digitale. Parlatene col vostro medico di famiglia, sempre che non lo abbiano già sostituito con uno di Loro.

Come funziona la cache di un browser

La cartella cache di un browser e il suo funzionamento è un tema che spunta spesso nei commenti ad altri articoli, soprattutto quando si parla di pagine web che funzionano in modo anomalo, ma mi accorgo or ora di non aver mai scritto nulla di specifico a riguardo. Vedrò di rimediare.

Un browser è un programma con cui ci si collega alla Rete e si visitano siti: Internet Explorer, Firefox, Google Chrome, Safari, Opera e così via, a seconda delle preferenze. Navigando in Rete, un browser salva una copia di tutto ciò che noi visitiamo e visualizziamo: pagine, foto, video, eccetera. Queste copie sono salvate in una particolare cartella del nostro computer, ossia la cache: ne esiste una per ogni browser che utilizziamo e, se il computer è condiviso tra più utenti, ne esiste anche una per ogni utente.

A cosa serve salvare una copia delle pagine che visitiamo? Fondamentalmente, a semplificare e velocizzare le nostre visite future. Quando ci colleghiamo a una pagina, infatti, svariati files sono scaricati sul nostro computer: la pagina stessa (di solito un file HTML), le immagini contenute nella pagina, un eventuale foglio di stile che specifica come visualizzare la pagina (un file CSS), vari contenuti multimediali come video o audio (se presenti), eccetera. Questo accade perché, quando ci colleghiamo a un sito, di fatto ci stiamo collegando a un altro computer, ossia il server su cui si trova il sito; il server risponde alla nostra connessione inviandoci il materiale richiesto, ossia la pagina che vogliamo visitare. Questo materiale è scaricato nella cartella cache del nostro browser e da lì è recuperato, per mostrarcelo sullo schermo. Tutto ciò avviene dietro le quinte: dal nostro punto di vista, invece, abbiamo semplicemente aperto una pagina di un sito.

Quando torniamo a visitare quella pagina, però, il nostro browser caricherà prima di tutto i files che ha già salvato nella propria cache, invece di scaricare nuovamente ogni cosa dal server; una volta caricati questi, avrà bisogno di scaricare soltanto gli eventuali aggiornamenti che ci sono stati dopo la nostra ultima visita. Così facendo, la pagina si caricherà più in fretta, perché la maggior parte del materiale era già nel nostro computer, e il server dovrà lavorare di meno, dato che solo una piccola percentuale di materiale dovrà essere inviato al nostro computer.

La cache, dunque, contiene una copia di tutte le pagine che abbiamo visitato e di tutto ciò che era contenuto in quelle pagine. Questa situazione presenta diversi aspetti positivi: se una pagina è stata salvata nella nostra cache, potremo recuperarla e vederla anche offline, ossia senza bisogno di essere connessi alla Rete; tutte le foto e le immagini di vario genere che abbiamo visto su questo o quel sito saranno salvate in una cartella del nostro computer, da cui le potremo recuperare: i video di YouTube e di altri siti analoghi saranno stati salvati all'interno della nostra cache e li potremo recuperare da lì, se non conosciamo altri modi per scaricarli; e così via. D’altro lato, potrebbe non essere piacevole sapere che tutto ciò che abbiamo visitato si trova memorizzato nel nostro computer: anche per questo motivo, ogni browser dispone di una funzione per svuotare la cache, ossia cancellare tutto il suo contenuto.

Svuotare la cache è anche una classica misura di primo intervento, quando si verificano problemi con qualche sito. Se in un sito ci sono state modifiche alla sua struttura dopo la nostra ultima visita, e in particolare modifiche agli script (JavaScript in particolare) che lo fanno funzionare in un certo modo, è possibile che si verifichi un conflitto tra la copia della pagina salvata nella cache e la nuova versione della pagina: svuotando la cache, costringiamo il nostro browser a ricaricare da zero la pagina, scaricando tutti i files dal server, e questo è spesso sufficiente a risolvere problemi di piccola entità. Svuotare la cache è infine una misura utile per liberare spazio sul nostro disco fisso, soprattutto se non abbiamo impostato un limite di dimensione alla cartella utilizzata, e molti programmi di “pulizia”, come CCleaner, propongono lo svuotamento della cache tra le opzioni per liberare spazio. A voi decidere se ne valga la pena o meno.

La cache di un browser è una normale cartella del nostro computer ma, di solito, è una cartella a cui è piuttosto complicato accedere, perché da nessuna parte è specificato dove sia e, spesso, è inserita tra i files nascosti, se stiamo utilizzando un sistema operativo Windows. Esistono però metodi per stanarla, che variano a seconda del browser che utilizziamo: ogni browser la crea in un punto diverso, giusto per semplificare le cose.

Internet Explorer

È probabilmente il più semplice, per cui partiremo da lui. Il percorso classico per raggiungere la cartella cache è 

Strumenti -> Opzioni Internet -> Impostazioni -> Vedi files

Con alcune varianti, questo percorso è rimasto valido attraverso le varie versioni del programma. Con Internet Explorer 9, ad esempio, potrete partire cliccando sulla rotellina in alto a destra, invece che dal menu “Strumenti”.

Firefox

Semplice, ma non immediato. Scrivete nella barra degli indirizzi about:cache e si aprirà una pagina con l’indirizzo in cui si trova la cartella cache (Cache Directory) e una voce “List Cache Entries” che vi permetterà di vedere un elenco dei contenuti della cache. C’è però una brutta notizia: il contenuto della cache non è direttamente accessibile, in quanto crittografato.

Google Chrome

Complicato. Molto spesso è già difficile trovare la cartella in cui è stato installato (se utilizzate Windows, sappiate che non è nella cartella “Programmi”, come forse vi aspettavate), figuriamoci poi la cartella cache. Se avete una icona sul desktop per lanciare Chrome, oppure nel menu di avvio (o facente funzione di, a seconda del sistema operativo), allora potrete cliccare col tasto destro su quella icona, guardare le Proprietà e trovare così l’indirizzo in cui è installato Chrome: la cache, di solito, si troverà in Chrome/User Data/Default/. Anche in questo caso, però, non potrete accedere direttamente al contenuto dei files, in quanto crittografati.

Se utilizzate un sistema operativo Windows, un modo molto più semplice per accedere alla cache e aprire o salvare altrove i files contenuti, è quello di ricorrere a uno dei “CacheView” prodotti e distribuiti gratuitamente dalla NirSoft: sono programmino che non richiedono installazione e hanno il solo scopo di permettere un rapido e semplice accesso alla cache di diversi tipi di browser.

Se infine vi state chiedendo quali siano i collegamenti tra la cache di un browser e la cache di Google, sappiate che non ci sono collegamenti diretti, ma solo ideali: la cache del browser raccoglie una copia delle pagine che abbiamo visitato; la cache di Google raccoglie una copia della versione diù recente di tutte le pagine che gli spider di Google hanno visitato. In pratica, la cache di Google può essere considerata come una specie di cartella cache della intera Rete, o almeno di quelle parti della Rete che sono accessibili agli spider.

Bloccare il Flash con FlashControl

Il Flash, così come il JavaScript, è una creatura onnipresente nei siti web di oggi: ovunque ci sia bisogno di un contenuto interattivo, ecco che ci ritroviamo con un bell’elemento in Flash, appiccicato dentro la pagina: dai video, ai giochini, fino alle immagini a scorrimento e a pulsanti di vario genere, tutto realizzato rigorosamente in Flash, nella maggior parte dei casi. Si spera che, con l’adozione del famoso (e famigerato) HTML5, la situazione possa cambiare, ma per adesso questo è lo stato delle cose. Sempre come il JavaScript, anche il Flash può essere utile, di tanto in tanto e assunto in dosi moderate, ma molto più spesso è utilizzato in forme invasive e moleste, da presunti webmaster che ritengono molto originale e simpatico inserire video che partono da soli all’apertura di una pagina, per esempio, oppure amano spararci musica a tutto volume mentre siamo sul loro sito. Siccome queste trovate “geniali”, oltre a essere moleste, sprecano anche parecchie risorse dei computer che si ritrovano ad aprire simili pagine, vediamo oggi come fare a disinnescare il Flash, per utilizzarlo soltanto quando davvero ci serve a qualcosa. Nello specifico, mi riferirò al browser Google Chrome, che dispone di una discreta gestione del Flash (almeno per i miei gusti).

La soluzione più drastica è quella di disattivare i plugin relativi al Flash. Un plugin è una piccola “aggiunta” al browser, per consentirgli di visualizzare alcuni tipi di contenuti che, altrimenti, non potrebbe visualizzare: esistono plugin per far funzionare le applet Java, plugin per utilizzare Google Earth, plugin per il Flash e così via. In Google Chrome, potete trovare la lista completa dei plugin installati nel vostro browser all’indirizzo chrome://plugins/, che vi aprirà una pagina con l’elenco. Sotto a ogni plugin troverete la scritta “Abilita” (se è disattivato), oppure “Disabilita” (se è attivato): cliccandola, potrete passare da uno stato all’altro, ossia attivare o disattivare un plugin a vostra scelta. Quelli relativi al Flash sono di solito all’inizio della lista.

Una soluzione meno drastica, ma molto efficace, è l’utilizzo di una estensione per Google Chrome, che vi permetta di scegliere di volta in volta se permettere o bloccare il Flash inserito in una pagina. Una estensione che svolge questo lavoro è FlashControl.

FlashControl dispone di un buon numero di opzioni che permettono di decidere se e come visualizzare il Flash all’interno di una pagina, ma di queste parlerò a breve; intanto, diciamo che, di base, qualsiasi contenuto in Flash sarà bloccato: al suo posto, nella pagina vedremo qualcosa di questo tipo:

Significa appunto che, in quella porzione di pagina, si trova un elemento in Flash: può essere un video, un gioco, una pubblicità o qualsiasi altra cosa. Se non ci interessa vederlo o usarlo, lasciamo tutto così come è e ci risparmieremo sia di consumare banda per scaricare l’elemento, sia di consumare RAM e CPU per farlo funzionare. Se invece siamo interessati a quell'elemento, basta cliccare sul riquadro grigio: in questo modo, l’elemento sarà caricato normalmente e noi potremo vedere il video, divertirci col giochino, eccetera, a seconda dei casi. In breve, FlashControl impedisce che un elemento in Flash sia caricato e avviato automaticamente: per avviarlo servirà il nostro consenso, da esprimere con un semplicissimo click sulla superficie bloccata.

Questo è il suo funzionamento di base, ma abbiamo a disposizione parecchi strumenti per personalizzarlo: possiamo ad esempio creare una lista nera con siti che dovranno sempre essere bloccati, oppure una lista bianca di siti su cui il Flash è sempre permesso, oppure possiamo cambiare l’aspetto del riquadro che indica un elemento bloccato, e così via. tutto ciò lo possiamo ottenere su Google Chrome passando da Impostazioni -> Estensioni e cliccando Opzioni subito sotto al nome di FlashControl. Si aprirà così una pagina per configurare FlashControl.

Qui sopra vediamo la pagina di configurazione nella versione “Simple”, per gli utenti che non amano molto perdere tempo a configurare qualcosa e preferiscono un pannello con due opzioni in croce: gli utenti normali, insomma. Le impostazioni disponibili sono

Enable FlashControl, per attivare o disattivare questa estensione;

Enable address bar menu, per inserire o togliere una piccola icona nella barra degli indirizzi (della icona parlerò poi);

Default behavior, per dirgli cosa fare davanti a un elemento in Flash (bloccarlo o autorizzarlo).

Tutto molto semplice e alla portata di chiunque, come potete vedere: avete tre cose da scegliere e con queste tre scelte potete gestire tutto il Flash che incontrate, ricordando poi che basterà un click per sbloccare qualsiasi elemento bloccato. Se poi vi sentite avventurosi, potete affrontare anche i due livelli successivi di personalizzazione: Moderate e Advanced. A titolo di esempio, ecco come appare il pannello di controllo, in versione Advanced:

Le opzioni della versione Simple sono rimaste, nel riquadro in alto a sinistra, ma parecchie altre opzioni e schede si sono aggiunte. Nella parte bassa, Appearance ci permette ad esempio di decidere che faccia avrà il “blocco” del Flash, ossia che aspetto dovrà avere il rettangolo grigio che indica un elemento bloccato: dovreste avere opzioni a sufficienza per soddisfare il vostro gusto estetico. Le schede Whitelist e Blacklist, invece, ci permettono di creare liste coi siti da autorizzare sempre, oppure da bloccare sempre (le liste nere e le liste bianche, di cui parlavo prima), mentre Info contiene una raccolta di link con informazioni più dettagliate su FlashControl, oltre alle pagine su cui segnalare eventuali problemi con l’estensione. In linea di massima, comunque, il pannello Simple sarà sufficiente per la maggior parte degli utenti, che vogliono solo bloccare il Flash.

Se avete scelto di abilitare l’icona nella barra degli indirizzi, poi, vedrete una piccola icona col simbolo del Flash (una F in campo rosso) in fondo a destra, nella barra degli indirizzi: cliccando questa icona, avrete accesso a una versione “ristretta” del pannello di controllo. Questo è ciò che apparirà, se avete impostato il pannello su Simple:

Abbiamo cinque pulsanti rossi:

Allow this page consente di autorizzare in un colpo solo tutti gli elementi in Flash presenti nella pagina che state visitando; se li avete autorizzati, al suo posto troverete la scritta Block this page, che invece blocca tutti gli elementi nella pagina.

Whitelist e Blacklist permettono di aggiungere alla lista dei siti sempre autorizzati (lista bianca) o dei siti sempre bloccati (lista nera) la pagina in cui vi trovate; se la pagina è già stata inserita in una di quelle due liste, troveremo la scritta Unwhitelist o Unblacklist, per rimuoverla rispettivamente dalla lista bianca o nera.

Disable FlashControl disattiva l’estensione: se è già disattivata, al suo posto troverete Enable FlashControl che vi permette di riattivarlo.

Preference aprirà la pagina col pannello di controllo, di cui ho già parlato in precedenza.

Se avete scelto di utilizzare il pannello di controllo in una versione più avanzata, allora troverete anche altri pulsanti, tra cui Open Resources Panel: cliccando questo pulsante, si aprirà una piccola finestra con informazioni più dettagliate su quale tipo di risorse stia utilizzando il Flash presente in quella pagina, come le stia utilizzando e per confezionare filtri su misura per quel particolare sito.