Cento dollari mal spesi per un laptop sociale

Appunti, idee sparse e non digerite sul progetto OLPC

Provo a fare qualche riflessione sul Contrappunto di Mantellini sul progetto One Laptop Per Child, sono idee da rimaneggiare e ricondurre a impianto più omogenero, un primo tentativo di ridurre la complessità del problema.

Un sogno, un problema?

Il problema è tipicamente anglosassone, datato e fuorviante. La trasposizione di modelli socio economici in contesti non comunicanti, come per esempio i paesi del terzo mondo, nei quali al di la di schemi sovraimpressi e fondamentalmente non assimilati, l’economia, la società e le strutture interpretative sono, usiamo una espressione forte “incommensurabile”, non può avvenire geometricamente.
C’è tutta una tradizione dell’antropologia culturale, anche un po’ pericolosa, che va sotto il nome di relativismo culturale, che si fonda proprio nel tentativo di contestualizzare l’approccio a una cultura differente.
Dare un computer da 100 dollari a un bambino del Congo, che a malapena è in grado di leggere e scrivere nella propria lingua, che vive perso in distanze che per noi sono incommensurabili, che senso ha? Riporto alcuni brani di una email di qualche tempo fa, in cui chiedevo a un amico, posto che mi conceda di chiamarlo amico, quale fosse la sua esperienza di lavoro in Mozambico, paese nel quale opera dal 1999:

Mecanhelas e’ in pratica grande più o meno come la provincia di Mantova (la mia provincia) La cittadina si trova circa al centro del “distorto” (che
sarebbe un poco come i nostri “Comuni” e mi fermo perche’ se continuo andiamo sul complicato 🙂
La comunità più lontana dista oltre 100km che nel tempo piovoso costringe ad un lungo giro (più o meno 200km) per raggiungerla con tutti i problemi connessi ed alcune anche più vicine sono irraggiungibili.

Le distanze, le difficoltà, il tessuto sociale ed economico hanno maglie incommensurabilmente più ampie rispetto a quelle cui noi siamo abituati e nel quale creiamo i beni di cui godiamo e li manuteniamo:

Per dedicarmi maggiormente all’officina che e’ stata quella che mi ha dato piu’ mal di testa. Il problema principale era la mancanza di pezzi di
ricambio a non meno di duecento chilometri. A duecento chilometri c’e’ una citta’ del Malawi dove si incontra quasi tutto ma necessita di organizzare il viaggio. Appena arrivato nel periodo di “ambientamento” ho visto varie volte partire due persone in bicicletta con alcuni pezzi meccanici che trasportavano come campione, per andare in Malawi via “lago”. Si! L’ho fatto anch’io due volte, si parte con la bicicletta ed in meno di un’ora sei al “porto” dopo aver passato un “posto di dogana” (beh! una “palhota de capin”) A volte ci si arriva con la macchina ma solo per alcuni mesi dell’anno. Ci si toglie le scarpe e arrotolano i patantaloni e si sale sul “barco” e dopo due ore circa di navigazione si e’ scaricati dall’altra parte 🙂

Ora, Lee Felsenstein si chiede

But what of the absence of reliable electrical power? OLPC statements refer to the hand-cranked generator included in each unit, having a ratio of 100:1 for operating time to crank time. For an optimistically low power drain of 1 watt this implies a 100 watt generator.

Non voglio rispondere io, da qui, lascio rispondere una citazione dalla stessa email:

L’alievo elettricista per impianti delle case era ed è restato un “tacco” ma non si può pretendere uno specialista in un paese dove l’elettricità è presente solo la sera dalle 18, se tutto va bene, alle 23 con generatore dell’amministrazione.

Ma allora, cosa ci stiamo dimenticando

Questo viene da chiedersi quando le buone intenzioni della società occidentale sembrano scosse dalla mancanza di pragmatismo che, tuttavia, è uno dei tratti distintivi del sogno americano. A questo punto, sono andato a riprendere un vecchio testo di sociologia, “Le vie della sociologia” di Franco Crespi, edizioni Il Mulino, che a pagina 35 riporta un paragrafo dal titolo interessante, “Le contraddizioni fondamentali della società umana”:

…possiamo definire in via di prima approssimazione, la società umana come un sistema determinato di relazioni reciproche mediate simbolicamente, tra individui dotati di autocoscienza.

…L’individuo umano per agire cooperativamente deve apprendere il suo ruolo sociale; de essere perciò persuaso ad aderire a certe regole…attraverso accordi intersoggettivi impliciti o espliciti, sempre relativamente arbitrarii, tra i diversi membri della società.

Quale è quindi la nostra aspettativa sociale di durata (Merton, Socially Expected Durations: A Case study of Concept Formation in Sociology, 1984) del fenomeno OLPC. Lo sviluppo di questo esperimento quanto condizionerà la nostra aspettativa sociale sulla durata di questo tipo di fenomeni?

Accennavo poc’anzi al pericolo del relativismo, che come dottrina forte tende ad avere il difetto di giustificare qualunque discorso culturale all’interno di un circolo chiuso di idee, motivandolo come derivato da una interpretazione della realtà nata all’interno di una specifica esperienza sociale e culturale. Come tema di fondo, però, come “avvertenza d’uso”, il relativismo culturale può dare un monito tanto di buon senso, da apparire quasi banale: La realtà viene definita all’interno di una costellazione semantica che deriva dai processi di inculturazione in cui un individuo e una società sono inseriti. Il mondo, e il modo di vedere le cose, in parole povere, dipendono anche dal modo in cui se ne parla. Di ciò ce ne accorgiamo ora con la società mass mediatica, in cui il senso delle cose viene ridefinito dal modo in cui se ne parla, Herskovits (Man and His Works, Kop, New York, 1948), ce ne parlava nel 1948.

OLPC come processo di acculturazione?

Mi viene in mente Franco Crespi (Mediazione Simbolica e Società, Franco Angeli, 1984), pag 12:

…a livello culturale l’immediatezza del determinismo istintuale appare decisamente compromessa e, le possibilità di soluzione essendo più elastiche e relativamente arbitrarie, il grado di prevedibilità dei comportamenti individuali e collettivi diminuisce nettamente.

Il progetto di portare un laptop a ogni bambino del terzo mondo a quale natura fa riferimento? Potremmo rifarci al tipico comportamento statunitense che ripropone l’esportazione geometrica di un modello, vedi quello della democrazia, senza alcun adattamento alle mediazioni socio culturali che reggono il gioco simbolico della vita nei paesi in cui vengono “imposti”?

Nel gioco Lacaniano fra il dicibile e l’indicibile, la verità rimane forse sepolta dietro i veli delle buone intenzioni, degli auspici, di una prospettiva di un futuro radioso che si lascia frettolosamente alle spalle le rovine del presente. Il “materialismo” dell’oggetto presente schiaccia letteralmente la dimensione simbolica, in senso lato, della società che dovrebbe accoglierlo e integrarlo in un procedimento che Beals e Hoijer (Introduzione all’antropologia culturale, Il Mulino, 1987) definirebbero aggiuntivo, cioè che aggiunge nuovi tratti culturali a quelli preesistenti, che il sogno americano vorrebbe sincretico, ma che forse finirebbe per divenire de-culturante.

Introdurre uno strumento tipico di una società fortemente caratterizzata dall’informazione, dalla mass medialità (intesa come disponibilità pervasiva dell’informazione), dalla quasi illimitata disponibilità di risorse per la creazione di infrastrutture, per la loro manutenzione, per la suddivisione di mezzi e strumenti, introdurre ciò in società caratterizzate da risorse limitate, illimitate ma la cui distribuzione è fortemente coartata, in cui la distribuzione di mezzi, strumenti e risorse, risponde a logiche al di fuori dei nostri modelli interpretativi sociali e culturali, in cui l’atto stesso della introduzione può assumere un significato differente rispetto ai nostri propositi. Tutto questo dove porta?

Non c’è dubbio che portare un computer, anche se a manovella, cosa che a noi fa subito balzare alla mente bizzarre immagini dei nostri bisnonni alle prese con la “macchina del capo”, in luoghi in cui le dimensioni geografiche sono enormemente dilatate dalla struttura delle relazioni sociali, crea ben un problema. Non siamo, sicuramente, nella bassa baviera, in cui l’elettricità è un bene dato per scontato, il vicino ha più elettrodomestici di quanto tu ti sia preso lo sfizio di acquistare e in cui la distanza fra il tuo portatile e il primo centro di assistenza è quantificabile in pochi chilometri. No, e nemmeno abbiamo, qui, la stessa disponibilità di risorse accumulate, cioè non direttamente coinvolte nei processi di sussistenza, da impiegare nella riparazione dell’oggetto.

Siamo in paesi in cui, quando ci va bene, ci troviamo nelle condizioni del Brasile, la dove uscire da un centro abitato significa non solo trovarsi con una radio ammutolita, ma con il cellulare disconnesso e, per interminabili chilometri senza alcuna assistenza, tutela, sicurezza. Per converso, trovarsi in una grande città può significare essere depredati di un semplice paio di scarpe, non dico di un computer. Si, nelle grandi città c’è internet, ci sono computer, c’è uno stile di vita e un miraggio tipicamente americani, c’è anche Telecom Italia, volendo. Ma cosa se ne dovrebbero fare i bambini di un computer a manovella, per di più con un sistema operativo che non li mette nelle condizioni di passare velocemente nel mercato del lavoro, qualora se ne facessero qualcosa del portatile. Linux va benissimo per apprendere, benissimo per amministrare, non ci fai molto però in grandi aziende nelle quali i programmi di CRM, SAP e quant’altro non girano su un portatile a rotelle e non sul tuo sistema operativo.

Ora, il tutto può essere raffigurato nel donare una cadillac a tutti. Cosa me ne faccio di una cadillac, se non ho pompe di benzina, se non ho strade praticabili, se non ci sono officine per l’assistenza e nemmeno i soldi per pagare tutto questo. A ben vedere, mancano anche i soldi per mangiare, ma questo nei sogni non trova mai posto.

Quindi, dare il via a un progetto come OLPC significa dare il via a un cambiamento strutturale, economico e sociale estremamente radicale nei paesi in cui viene messo in atto.

Questo poteva essere fatto per l’agricultura, e ci ritroviamo con le monoculture intensive che hanno ridotto interi paesi allo stato di dipendenza economica.

Poteva essere fatto per il manifatturiero e industriale, ma questo ora sta avvenendo nei paesi a noi limitrofi e, comunque, maggiormente strutturati e industrializzati del terzo mondo.

Poteva essere fatto in campo informatico. Beh, si, in effetti è già stato fatto in passato, con l’India, l’India dalla grande tradizione informatica, nella quale i grandi campus informatici sono sorti in mezzo al nulla. E li, sono cresciuti gli informatici, i tecnici, i programmatori, manodopera ad alto rendimento e a basso costo. Insomma, una monocultura del terziario che fino a pochi anni fa ha permesso l'”esternalizzazione” dei servizi, spostandoli oltre oceano, la dove un buon inglese era comunque parlato, ma alla fine ben meno pagato.

E ora, dove vogliamo andare, domani?

GeekSquare – Top of the week

  • TvTribe, è nuovo, è blog, è TV! – Non perdetevi TvTribe e rimanete sull’onda dei reality, telefilm, sit e tutto quanto passa sullo schermo, senza rinunciare a una punta di ironia che la penna sottile di Gloria Amato non vi farà mancare…

  • Super Stick, è piccola, leggera, è memory flash – Super Stick di Kingmax, il più piccolo (ma non si può mai dire per quanto) e più leggero memory stick in circolazione, 29mm x 12mm e 5 gr…

  • oirartnoc la elgooG – …itatlusir 000.93 otunetto ah erauqSkeeG. entetrevid opmetassap nu è de iuq otavort omaibba’L. oirartnoc la elgooG

  • Viva la revolución! Viva Mario! – Sventolate al vento la vostra nuova t-shirt del comandante Mario…uh…e costa solo 15 dollari, più 10 di spedizione…

  • Rintraccia la tua chiave USB – Le nuove chiavi USB di LG Mirror Inspice sono in tutto e per tutto simili alle concorrenti, tranne per un piccolo particolare: se vengono rubate, alla prima occasione vi spifferano la propria posizione..

  • U2 SIM, Axalto mette il blog sul cellulare – U2 SIM, infatti, implementa un web server direttamente sulla scheda e, grazie al protocollo di rete TCP/IP, chiunque da Internet potrà leggere i contenuti messi online dal cellulare…

  • Starnex SG 210, una telecamera nel bottone – Una microcamera camuffata da bottone, connessione Bluetooth per trasmettere le immagini a un registratore remoto grande quanto una fotocamera e dotato di schermo LCD…

  • Ecco le foto dal summit di Tunisi del laptop da 100$ di Negroponte – Ora possiamo mostrarvi le foto della sua presentazione durante il World Summit on the Information Society a Tunisi, con il primo prototipo funzionante…

  • FlashVNC Alpha 1, collegati in remoto con Macromedia – E’ un client VNC, niente di strano, è realizzato in Flash, e questo è davvero strano…

  • FootieFox, il calcio in diretta su Firefox! – : Footiefox vi avvertirà in una finestra quando la vostra squadra del cuore avrà segnato un goal, permettendovi di non distrarvi dal vostro lavoro, pur seguendo la partita del giorno…

Della opacità, secondo intervento

Abbiamo visto come giocare con le immagini e i link, in modo da renderli trasparenti in maniera “sensibile” al nostro mouse. Ora, facciamo un ulteriore passo, manipolando testo e sfondo di un DIV, in per ottenere effetti tipografici.

Gli effetti di trasparenza applicati al testo

Iniziamo con l’applicare diversi gradi di opacità al testo, facendolo giocare sullo sfondo. Non è difficile.

L’opacità del testo

Se l’oggetto è un elemento contenitore, allora l’effetto risulta come se il contenuto dell’elemento contenitore venisse sfumato sullo sfondo, usando una maschera in cui il valore di ogni pixel (della maschera) è il valore di opacità indicato.

Questo testo è di colore nero, con un valore di opacità al 50%

Vediamo il codice utilizzato per ottenere questo effetto:

Da notare che abbiamo aggiunto width:100 dato che l’opacità funziona solo tramite il posizionamento o il layout indicato (in Internet Explorer). Un valore di width o height, un float o qualcosa d’altro che consenta al navigatore di elaborare un posizionamento attiverà l’effetto.

Definire l’opacità dello sfondo

Nero e Bianco

LO SFONDO E’ BIANCO
Lo sfondo è un elemento da tenere ben in considerazione nell’utilizzo dell’effetto di opacità. Se non utilizzassimo un colore di sfondo (noi abbiamo usato white), le estremità del testo potrebbero risultare seghettate. Impostare il colore a transparent non sempre funziona.

…questo assomiglia ad alcuni
titoli o sotto titoli che siamo abituati a vedere
in una
rivistaimpaginata…

DIV
Il testo qui sulla destra è un div in cui il testo è di colore black e lo sfondo white. L’opacità del div è 50 e width è a 150px.

SPAN
L’elemento span all’interno del div ha un’opacità a 25. Le estremità non dovrebbero risultare seghettate. Il padding a 10 pixel nello span è stato utilizzato per non perderci il fondo della g in rivistaimpaginata.

FUORIUSCITA DEL TESTO
Se forzato, il testo sforerà la larghezza di 150px e, naturalmente, i navigatori non gestiscono la fuoriuscita tutti allo stesso modo. Non preoccupiamoci dello sforamento e scriviamo rivistaimpaginata tutto attaccato, in modo da esplorare da vicino l’effetto di fuoriuscita.

Per ottenere questo tipo di impaginazione, copiate il seguente codice:

L’opacità del paragrafo

Rosso Mattone e Bianco

P
In questo esempio useremo il marcatore di Paragrafo

al posto del

. Il codice è lo stesso che abbiamo appena visto, solo abbiamo sostituito div con p e cambiato il colore da black a maroon.

…questo assomiglia ad alcuni titoli o sotto titoli che siamo abituati a vedere
in una rivistaimpaginata… Spaziatore da 150 pixel di larghezza

Il codice è lo stesso, solo abbiamo utilizzato il marcatore di paragrafo invece di quello del div. Alla fin fine, potrebbe addirittura risultare più semplice da comprendere per chi non è addentro alle complicazioni e idiosincrasie dei CSS.

Abbiamo utilizzato, per questo paragrafo, un bordo di 2px, nero a puntini, e lo stesso abbiamo fatto attorno all’area da 150px, qui sulla destra.

La larghezza che abbiamo definito per la trasparenza dei titoli è di 150 pixel, ma abbiamo intenzionalmente unito le parole rivistaimpaginata per mostrare che il testo non rimane necessariamente confinato nello spazio indicato.

Lo Spaziatore da 150 pixel di larghezza all’interno della parte destra del paragrafo mostra un’immagine che è larga esattamente 150 pixel: possiamo così vedere dove sarebbe finito il nostro paragrafo se non avessimo unito le parole rivistaimpaginata formando un testo troppo lungo per rimanere confinato.

Definire l’opacità nei CSS

Come facciamo a definire il carattere di opacità all’interno dei nostri CSS?

…questo è
lo stile p.pulltrans definito nel file stile1.css CSS che trovate qui
e può variare nel tempo…………..

P.pulltrans {
color:black;
width:150px;
background:white;
filter:alpha(opacity=50);-moz-opacity:.50;
opacity:.50;
float:right;
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
font-size: 28px;
line-height:26px;
text-align: right;
}

Quello che vedete è un semplice ma flessibile stile CSS, definito come p.pulltrans nel file di stile esterno. Da notare che questo file va caricato insieme alla pagina tutte le volte che questa deve essere visualizzata al navigatore. Quindi, se pensate di usarlo molto spesso, inseritelo nel foglio di stile principale del vostro sito.

Il codice da copiare nella pagina html è molto semplice e non ci sono parti superflue, tant’è che probabilmente ci converrebbe utilizzarlo come stile in linea.

Per l’esempio dei titoli appena visti, abbiamo aggiunto un marcatore e un , mentre per dare un po’ di vivacità abbiamo introdotto la definizione style="color:navy" per superare aggirare il colore nero predefinito e avere un bel testo azzurro.

Il codice da inserire nella nostra pagina, sarà quindi:

Bene, per ora è tutto. Fate qualche esperimento, giocate un po’, magari andate a dare un’occhiata al sito da cui ho tradotto questa guida e fra qualche giorno ci risentiremo, per approfondire ulteriormente l’interazione fra testo e immagini per il tramite dell’opacità.

I computer nei film…

Come vengono rappresentati i computer nei film?

  • Gli elaboratori di testo non mostrano mai un cursore;
  • Non viene mai usata la barra spaziatrice quando si scrivono frasi anche lunghe;
  • Qualsiasi monitor mostra caratteri alti almeno un pollice;
  • Le informazioni più importanti vengono mostrate in una finestra a parte giusto nel centro dello schermo, ma non c’è mai un bottone di OK o un qualsiasi altro modo per sbarazzarsene;
  • I computer più avanzati, tipo quelli utilizzati dalla NASA, dalla CIA, o da qualche istituzione governativa, avranno sempre delle interfacce grafiche di facile comprensione. Quelli che non hanno un’interfaccia grafica, possiedono delle shell testuali estremamente potenti che possono interpretare ed eseguire correttamente i comandi scritti nella lingua originale del film;
  • Corollario: potete accedere a qualsiasi informazione di vostro gradimento semplicemente digitando “ACCEDI AI FILE SEGRETI” sulla tastiera;
  • Allo stesso modo, potete infettare un computer con un virus distruttivo, semplicemente scrivendo “CARICA IL VIRUS” (vedi il film “Fortress”);
  • Tutti i computer sono connessi. Potete accedere alle informazioni contenute nel desktop di un tipo, anche se il computer è spento.
  • I computer potenti fanno sempre “beep” quando premete un tasto o quando cambia una schermata. Alcuni computer, inoltre, rallentano la visualizzazione delle informazioni in modo da non andare più velocemente di quanto voi siate in grado di leggere.
  • Quelli davvero più avanzati possono anche emulare il suono di una stampante ad aghi. (vedi “Caccia a Ottobre Rosso” o “Alien”);
  • Tutti i pannelli di un computer sono attraversati da migliaia di volt e da punti luminosi appena sotto la superficie. I malfunzionamenti sono indicati da bagliore improvviso, una nuvoletta di fumo, una doccia di scintille e un’esplosione che vi costringe a indietreggiare;
  • Corollario: inviare dei dati a un modem/streamer/stampante più velocemente di quanto questi si aspettino li farà esplodere;
  • Se smettete di scrivere al computer e ve ne andati, questo si spegnerà facendovi perdere tutti i dati (date un’occhiata ai crediti iniziali di “Caccia a Ottobre Rosso”);
  • Un hacker è sempre in grado di procurarsi il computer più sensibile al mondo prima di introdursi in un sistema e di indovinare la password segreta in due tentativi;
  • Qualsiasi errore di PERMESSO NEGATO ha una funzione di CONTROLLO MANUALE che può risolvere il problema (vedi “Demolition man” e un numero infinto di altri film);
  • Calcoli complessi e il caricamento di grandi quantità di dati verranno sempre eseguiti in tre secondi. I modem usati nei film (specialmente quelli wireless che bisogna utilizzare quando si è in macchina) di solito sembrano traspettere i dati alla velocità di due GigaByte al secondo;
  • Quando la centrale di energia/sito missilistico/o qualsiasi altra cosa, va in surriscaldamento, tutti i pannelli di controllo esploderanno insieme a tutto l’edificio;
  • Se un disco contiene dati criptati vi verrà automaticamente chiesta una password appena cercherete di accedervi;
  • Non importa di quale tipo di disco si tratti, sarà leggibile da qualsiasi sistema al quale lo colleghiate. Tutti i programmi saranno utilizzabili da qualsiasi tipo di computer (vedi “Independence Day”;
  • Più è sofisticato l’apparecchio, più bottoni si ritrova ad avere (vedi “Aliens”). Tuttavia, tutti quanti devono essere stati istruiti a puntino, visto che su nessun tasto appare l’ombra di un’etichetta ;
  • La maggior parte dei computer, non importa quanto siano piccoli, sono in grado di produrre animazioni grafiche tridimensionali estremamente realistiche, a partire dai pochi dettagli inseriti dall’utente. Basta anche non indicare alcunché, fanno tutto loro.
  • I portatili, per qualche strana ragione, sembrano sempre avere delle capacità da video telefono assurde, unite alla potenza di calcolo di un CRAY;
  • Tutte le volte che un personaggio guarda lo schermo, l’immagini è talmente brillante che riflette sul suo volto (vedi “Alien”, “2001”, “Jurassic Park”;
  • In ogni caso, quando si tratta di far funzionare un nuovo computer di tipo sperimentale, sono necessari la Scala di Jacob (avete presente quegli archi voltaici che salgono rincorrendosi fra due aste?) o il Generatore di Van Der Graaf, anche se questi apparecchi non servono a niente nella vita reale.
  • Chiunque può impartire un qualsiasi insieme complesso di comandi premendo pochi tasti (vedi “Star Trek”);
  • Nei film, internet è in grado di collegarvi a qualsiasi cosa. Potete modificare i dati relativi a un conto bancario, cercare all’interno del registro di un hotel, esaminare gli archivi criminali della polizia, cercare (e apportare modifiche) all’interno del database delle patenti di guida, modificare i dati sanitari e molto, molto di più, semplicemente usando internet! (vedi “The Net”) ;
  • Distruggere un monitor inibisce il funzionamento dell’intero sistema (vedi “Speed”);
  • Potete lanciare missili nucleari da qualsiasi stanza da letto semplicemente utilizzando un modem analogico, ma solo se conoscete l’unica password di accesso (vedi “War Games):

[Da Annoyances.org]

Della opacità

Sul sito di Mandarin Design, trovo un’interessante digressione su come utilizzare l’alfa blending nei css in modo da giocare con gli effetti di trasparenza.

Purtroppo, solo per Mozilla (anche Firefox) e Internet Explorer.

L’opacità può essere considerata come un’operazione di post processazione, ovvero dopo che un elemento è stato disegnato a video, il valore di opacità determina quanto quest’ultimo venga sfumato all’inteno di una immagine composita. Il valore di opacità attribuito tramite i CSS a un elemento può andare da 0.0 (trasparenza completa) a 1.0 (opacità completa) e ogni numero al di fuori di quest’arco verrà riportato al suo interno. Se l’oggetto è un elemento contenitore, l’effetto sarà applicato ai suoi contenuti come se venissero sfumati sullo sfondo, usando una maschera in cui il valore di ogni pixel (della maschera) è il valore di opacità indicato.

Qualche esempio

Il punto di partenza sarà la mia immagine in formato manga, giusto per avere qualcosa di brutto che non possa essere ulteriormente peggiorato dai nostri esperimenti:

Ora, giochiamo un po’.

Iniziamo a sfumare

Prendiamo l’immagine precedente e mettiamola in una serie di sfumature, partendo da un’opacità al 25% e salendo di 25% ogni volta:

Simpatico, vero? Ecco il codice che potrete inserire nelle vostre pagine e adattare:

Da notare che è stato utilizzato del codice specifico per il browser Mozilla moz-opacity, che con Firefox non si rende necessario. Meglio, comunque, utilizzarlo per una piena compatibilità con le versioni più vecchie di Mozilla.

Opacizziamo al passaggio del mouse

Definiamo alcune classi CSS che ci consentano di modificare l’opacità degli oggetti al passaggio del mouse:


E ora creiamo un testo in un div che ci consenta di gestire il passaggio del mouse:


Ora, l’effetto ottenuto sarà il seguente:

Passaci sopra con il mouse…Devi avere Mozilla o IE

Invertiamo l’attributo di partenza del div, e utiliziamo la classe transON, passando poi a transOFF

Passaci sopra con il mouse…Devi avere Mozilla o IE

Opacizziamo le immagini al passaggio del mouse

Applichiamo quanto finora visto alle immagini:

trans25
transON
trans75

Il relativo codice è:


Opacizziamo immagini e testo

Proviamo ad applicare la trasparenza contemporaneamente sia a immagini che al testo.

Passaci sopra con il mouse…Devi avere Mozilla o IE. L’opacità è al 25%

Passaci sopra con il mouse…Devi avere Mozilla o IE. L’opacità è al 50%

Passaci sopra con il mouse…Devi avere Mozilla o IE. L’opacità è al 75%

Il relativo codice è:


Immagini opacizzate e link ipertestuali

Complichiamo un po’ le cose e proviamo a creare una immagine, che cambi opacità al passaggio del mouse e che funga anche da collegamento ipertestuale. Iniziamo con il creare un paio di stili ad hoc:


E adesso è il momento di inserire il seguente codice nella pagina html:


Fatto? Ok, il risultato è…

Decisamente interessante. Non rimane ora che fare qualche prova, in attesa della seconda puntata sulla trasparenza con i CSS, nella quale verranno affrontati applicazioni dell’opacità davvero attraenti.