Karina. Galleria di immagini via css.

Perchè fare via javascript (e/o Ajax) quello che si può fare via css? (Che forse è qualcosa di simile a “perchè prendere la macchina per andare in un posto in cui puoi arrivare comodamente a piedi?”)

Sicuramente non si può fare tutto, con i css. E dove non arrivano, per ottenere quello che vogliamo, servono altri linguaggi/soluzioni. Eppure i css arrivano molto lontano – molto più di quanto la maggioranza di noi sospettino.

Una galleria di immagini via css che mi ha molto impressionato, e di cui ho scritto, mesi fa, è Hoverbox. Adoro la sua eleganza e la sua semplicità.

Più di recente ho studiato i menu stile dropdown, via css. E fatto qualche esperimento (tipo Suckerloz e Newdrop).

Adesso, con lo stesso codice html base (una lista dai cui item si aprono sottoliste interne, child lists), e con la stessa tecnica css (le sottoliste sono nascoste di default, e si attivano al passaggio del mouse sull’elemento “padre”), faccio vedere come si può gestire una – semplice – galleria di immagini.

Ecco i due esempi che ho preparato, di Karina (che è la persona ritratta nelle foto, e il nome della tecnica). Una versione orizzontale e una versione verticale.

La tecnica è davvero abbastanza basilare, e funziona con IE6, IE7, Firefox (testato sulla 2.0, ma non dovrebbe aver problemi neppure la 1.x). Dovrebbe funzioniare anche con Opera & cia – browser sicuramente meno problematici che la famiglia IE (che cmq con ie7 ha fatto dei discreti passi avanti).

Il layout della pagina di esempio è tutto sommato molto semplice, ma è facile immaginare l’implementazione della tecnica in contesti + complessi (magari + avanti farò qualche demo).

(Un’altra aggiunta interessante potrebbe essere quella di un “loader”, che segnali che le immagini stanno caricando, in background.)

Newdrop CSS menu: alpha release

Sto trascurando javascript (e disimparando quel poco che so di Ajax 😉 per via di una ricaduta, mani stomaco cervello e tutto, nel meraviglioso mondo dei CSS.

E allora “esibisco” qualcosina. Come il Newdrop menu. Versione 0.13. Un menu css based su due livelli, entrambi orizzontali. Con qualche funzioncina carina.

Spunto di partenza, una mail su css-discuss (LA lista di discussione sui css, probabilmente) e un menu preso come esempio / sfida: quello utilizzato in questa pagina su Projectseven.com. Volevo copiarlo, poi ho visto del codice complesso complesso e un tot di javascript, e ho provato a rifarlo. Da zero, from scratch. Che è sempre divertente.

Risultato:

Il codice html ancora una volta prevede (come in Suckerloz) liste e sottoliste, e la “magia” è tutta nel css.

Il file .css dell’esempio è questo – dovrebbe essere sufficientemente pulito, ordinato e commentato (ma lo sistemerò meglio).

Commenti:

l’impatto grafico mi sembra discreto – mi sono limitato a clonarlo :-).

Come tipo di menu, la cosa + interessante mi sembra la possibilità di segnalare – in modi diversi – la sezione attiva sul primo livello e la sotto-pagina attiva sul secondo. Idem per il doppio effetto rollover.

Ci sarebbero dei commenti “pseudotecnici” da fare, ma li lascio per il post aggiornato (o per un prox post). In ogni caso il codice è lì da guardare – e con qualche commento.

Limiti (attuali, at least): il menu è gestito interamente via css (questo non è un limite :-D). Testato su IE7 e Firefox, funziona ok. Non va invece con IE6, per il supporto limitato del browser alla pseudoclasse :hover.

Sto sistemando la compatibilità con IE6 – da un lato un foglio di stile dedicato, dall’altro un’operazioncina sul DOM per aggiungere dinamicamente le classi necessarie. Aggiornerò il post. Asap.

Ah. Nel menu esempio i link sono fittizi (#). E la classe .active è inserita staticamente nell’html. Magari nella prossima versione cerco di fargliela gestire dinamicamente, via php

Materia celebrale. (La vergogna di essere uomo)

Che lo dicano gli esperti di SEO, perchè cercando “diaz g8” salta fuori, bello in cima, questo mio blogghettino (ovvero, il post sulla schifosa storia delle molotov della Diaz). Prima di quotidiani e portali vari, che evidentemente sono meno bravi a indicizzare i loro contenuti che la simpatiche quattro canaglie di WordPress – certo, se i giornali rendessero liberamente accessibili i propri archivi sarebbero i primi a beneficiarne, ma vaglielo a spiegare…

Comunque, Diaz. Genova. G8. 2001. Processi in corso, ancora. Lanci di agenzia e titoli di giornali, ogni qualche settimana. Qualche poliziotto forse verrà condannato – o quantomeno rimproverato – per qualche eccesso (anche se sono decisamente sicuro di aver letto che i “protagonisti” di Genova sono stati tutti promossi – vedi questo articolo de il manifesto del 2003), e dall’altro lato 25 manifestanti rischiano un tot di anni di prigione, in una sorta di stupida logica del bilancino – se bisogna proprio condannare dei tutori dell’ordine è necessario quantomeno far finire dentro, senza troppa vergogna, anche qualcuno responsabile (quantomeno simbolicamente, moralmente, …) delle vetrine rotte e dei sassi tirati in quei giorni di fine Luglio 2001.

Come già scritto negli altri miei pochi post su Genova, supportolegale segue tutti i processi con riassunti, trascrizioni e comunicati. Difende i manifestanti e accusa i poliziotti. Non è quindi super-partes. Ma è informazione. Idem, all’incirca, per i blog di Nero e Caparossa – il primo scrive abbastanza su Genova 2001, con arguzia, il secondo meno, ma è altrettanto intelligente e incisivo. Oggi ho scovato anche il blog di Roberto Ferrucci, hosted by WP, e lo linko qui visto che parla della Diaz, e sta per uscire un suo romanzo che prende spunto da quella notte (cilena. O messicana, come si sta dicendo in questi giorni).

E per chi vuole sapere di + su Genova e i giorni del Luglio 2001 l’altra risorsa irrinunciabile sono gli archivi di Indymedia Itala. Un buon punto di partenza può essere questa pagina. (IMC Italia da un po’ di mesi è “spenta”. Si possono recuperare articoli pubblicati in passato anche tramite la Way Back Machine di archive.org).

Venendo alle novità di questi giorni, uno dei capi, o sottocapi, del massacro della Diaz cambia in tribunale la propria versione dei fatti, ammettendo di essere entrato nella scuola non a pestaggi conclusi, ma mentre altri (altri, non gli uomini del suo reparto, la confessione serve + che altro come scaricabarile) picchiavano le persone che si trovavano nella palestra e al primo piano della scuola.

“Quattro poliziotti, due con cintura bianca e gli altri in borghese stavano infierendo su manifestanti inermi a terra. Sembrava una macelleria messicana. […] Intorno alla ragazza per terra c’erano dei grumi che sul momento mi sembrarono materia cerebrale.”

(M. Fournier, in tribunale. Riportato dal Corriere.)

Ai confini dello splatter.

Cosa siano le macellerie messicane, non lo so e non mi interessa (niente di promettente, cmq, se assomigliano alla mattanza della Diaz. Dove, scusiamo la ricapitolazione… c’erano manifestanti violenti che hanno opposto resistenza, hanno detto, prima, poi si è scoperto che era falso, hanno accoltellato un agente, no un momento, era una montatura, avevano delle molotov, uhm, no le molotov le ha portate la polizia, per fabbricare una prova, uhm “ferite pregresse” degli scontri del pomeriggio e no no noi siamo arrivati dopo… 6 anni dopo qualche piccola crepa nel vergognoso muro di omertà che hanno costruito… … ….)

Il Giornale di Brescia, top seller qui della mia cittadina, sceglie giustamente una foto + soft di quella del Corsera, per illustrare un articolo pressochè identico (the power of ansa & cia + the power of copincolla)… Non una giovane sulla barella con il viso insanguinato, ma alcuni dei pochissimi ragazzi usciti con le proprie gambe (e arrestati, tutti e 93 – arresti poi ovviamente non convalidati), che sfilano tra gli uomini dei reparti speciali uscendo dalla Diaz. Eh beh, perchè urtare il lettore con immagini shock…

Io sinceramente ho pensato che forse non si trovassero + in rete delle foto con cui illustrare i propri articolini su Genova 2001. C’ho speso 10′, stamani. Da StudioAperto a Repubblica le redazioni pullulano di web hunters, cacciatori di filmati sconvolgenti, immagini shock, pettegolezzi osè, siti orripilanti, virus tremendi e amenità varie della rete. Ma forse a cercare la realtà sono un po’ meno bravi. Mah.

Non sono un fottuto sensazionalista. Le immagini di questo post, prese da siti indymedia, sono qui sono a dire una cosa: eccolo, il sangue della Diaz. Ce n’era, e tanto. Sgorgava dalle donne e dagli uomini massacrati di botte, a mezzanotte, nei loro sacchi a pelo. Se lo sono portati in ospedale, sui loro corpi martoriati. E ne hanno lasciato là – su pavimenti, caloriferi, muri.

A quella ragazza di cui parla Fournier, evidentemente le hanno aperto la testa. A manganellate, a calci.

Boh, sì, ai poliziotti avranno detto che c’erano dentro dei terroristi, nella scuola, dei “black bloc”. Gente armata. Pericolosa. O forse i poliziotti erano stanchi. Drogati. Tutte e tre le cose. Nessuna delle tre.

Cosa mi cambia, cosa ci cambia. Nulla… (Non mi interessano le commissioni di inchiesta.)

Dovrei, forse, provare rabbia.

Provo, invece, vergogna.

La vergogna di essere uomo.

(Se questo è un uomo).

CoComment: tutti i commenti, un’unica interfaccia

Ancora via Tangler, che se si sta rivelando fonte di scoperte/segnalazioni + che interessanti, ho scoperto CoComment

Per una volta localizzazione è da subito anche in italiano, per cui copincollo dalla presentazione:

“Entra nella conversazione -Seguite le vostre conversazioni su differenti piattaforme (blog, forum, comunità in linea…). Segui – coComment segue tutte le tue conversazioni online che stai seguendo in un solo spazio e ti informa quando delle nuove conversazioni sono state aggiunte. Condividi – Pubblica le tue conversazioni sul tuo blog in un click o inviale per email ad un amico. Esplora – Guarda i top commentatori, quali articoli o posts generano più traffico, chi commenta nelle stesse tue conversazioni.”

Insomma, una piattaforma web-based (con in + l’ormai quasi immancabile Firefox extension) per tenere traccia dei propri commenti. In modo molto comodo – e maneggevole.

WP ha qualcosa di (parzialmente) simile, ma limitato ai commenti fatti sui blog ospitati da WordPress stessa. Altri plugin di blog e forum consentono di essere informati via mail sullo stato di una conversazione / thread / commenti a un post.

CoComment è su questa stessa linea. Due passi avanti.

A me, che sono un commentatore medio/mediocre (10 commenti a settimana, forse meno) CoComment piace e risulta utile. Immagino possa esserlo molto di + x hard-bloggers & cia.

Dropdown CSS menu: arriva Suckerloz

Sono lieto di annunciare Suckerloz, versione 0.11.

Suckerloz è un menu css based (con un tocco di javascript esclusivamente per gli utenti di Internet Explorer – che come noto fino alla versione 6 supporta la pseudoclasse :hover solo sugli elementi <a>). Un menu verticale a scorrimento interno – che da un lato riprende, come codice, il suckerfish dropdown menu e la sua variante a scorrimento orizzontale, e dall’altro cerca invece di emulare, (molto) parzialmente, una tecnica js molto usata oggi, l’espansione delle sotto-sezioni (vedi la demo della famosa e bellissima libreria accordion, del framework mootools).

Ho preparato alcuni esempi, che fanno vedere i diversi menu, in evoluzione e in azione.

• Primo venne suckerfish, che faceva via css quello che altri facevano via dhtml. I sotto menu scendevano dai vari item di un menu di navigazione orizzontale. Ecco quindi suckerfish nudo, stilizzato, e in un layout di pagina.
• Poi arrivò horizontal dropdowns, che riprendeva suckerfish ma usava come base un menu verticale (da cui i sottomenu uscivano in orizzontale). Ecco qui horizontal dropdowns nudo, stilizzato, e in azione in una pagina. Bello, no?
• E finalmente eccoci a Suckerloz, che sfrutta la tecnica altrui, la riduce all’osso e … suckerloz solitario, suckerloz in una pagina, e suckerloz in una seconda pagina (stavolta senza background diverso per la colonna, nè elementi relative in basso, e con footer fixed).

Any feedback?

Arte di massa? Flickday!

Scopro, via Tangler (forum di betatesters & cia), l’ennesima piattaforma 2.0 interessante e di dubbia utilità. Trattasi di Flickday. Il cui motto è: “fai una foto di te stesso al giorno” (e condividila). Ti fai una foto in digitale, o meglio ancora un autoscatto via webcam, al giorno. La butti sul sito. Lì, un softwarino le fa vedere in sequenza. Come un filmino.

Due considerazioni.

A) L’idea di farsi una foto al giorno per un tot di tempo è originale e artistica, specie nel contesto di oggi. Un po’ di tempo fa avevo scritto un post su un fotografo newyorkese, Noah Kalina, che (oltre ad altre cose 😉 da cinque anni fa esattamente questo: una sua foto al giorno, poi messa on-line (e nei commenti qualcuno mi aveva segnalato anche l’esistenza di 09h09.

B) Tutti noi facciamo e condividiamo più facilmente le nostre foto, rispetto a pochi anni fa (quando non erano diffuse ed economiche come oggi le fotocamere digitali, e quando non esistevano mega-piattaforme on-line come flickr). Idem per musica, video, testi, disegni, … Il che non significa certo che di colpo siamo tutti diventati artisti. Nè che i “veri” artisti vengano minacciati dalla nostra presenza sulla scena.

Vedremo tra un po’ se su Flickday appariranno molti stream di autoscatti, e che cosa potranno dirci – da soli, o assieme. Da un punto di vista artistico e, perchè no, sociologico.

Io da parte mia, senza sapere di Flickday, da una decina di giorni stavo fotografando il tavolo del soggiorno, con su la colazione (ore 7.30 circa). Daily. Un esperimento mio. Figlio dello Zeitgeist… (mah)

2.0 + 2.0 +2.0 +2.0 = …

Un po’ di web applications che ho testato in questi ultimi giorni / settimane:

• mi sto divertendo a ricostruire a livello virtuale la mia libreria qui di casa, su anobii.com. Eccola qui. Bella idea, e piattaforma che funziona molto bene. Facile ipotizzare che possa appassionare tutto il segmento blogger-letterati e dintorni;
• sono su yedda.com “persone. condivisione. saperi”. esseri umani fanno domande, ed esseri umani rispondono. mah, interessant-ino;
• ho installato la firefox extension di blogrovr. Non la sto usando molto, ma l’idea che c’è dietro è interessante. Tu gli dici che blog vuoi seguire, e lui ti fetcha da quei blog i post che hanno a che fare con le pagine che stai navigando in quel momento nel browser (es: se sono sul sito di Mozilla e il mio amico Paolo ha scritto un post su Firefox ieri, blogrovr me lo segnala. Mi è piaciuto il fatto che io abbia esportato dal mio feedreader la lista dei blog e gliel’abbia data come input, praticamente automatizzando quasi la procedura, e risparmiando un sacco di tempo;
• sto invece cercando di seguire un po’ bene cluztr (questo il mio profilo), un progetto sviluppato attorno all’idea di social browsing, che tiene conto dei siti che visiti, ti segnala chi altro ha preferenze simili alle tue, chi ha visitato di recente le stesse pagine che stai guardando, i percorsi di navigazione (“clickstreams”) altrui, e permette anche (in una bella ff extension) di chattare con chi è sullo stesso sito, … (Ha un bel po’ di features, inutile tentare di elencarle tutte.)
• sempre sul versante social surfin, è in giro da un po’ Stumble Upon – che in base ai siti che visiti, e al voto che gli dai, ti consiglia siti simili, tramite i giudizi della community. L’ho provato per un po’, interessante, ben fatto, rischi di passare ore a navigare “per curiosità”. E-bay ha comprato SU qualche giorno fa;
• tangler.com – per discutere di beta testing, e non solo. Una specie di forum (molto) avanzato. Con anche un programmino che ti fa da Desktop Notifier (che personalmente non mi piace molto), su discussioni in corso, contatti etc. Passano di lì inviti per beta interessanti e discussioni di buon livello;
• istalker.com – social feeds aggregator, ovvero aggregatore di feed ma con anche un lato sociale. Basato sul concetto di lifestream, registra la tua attività in rete su un certo numero di servizi (tipo flickr, digg, il tuo blog, flickr, del.icio.us, last.fm, ecc) e la mostra, sia a te che agli altri (agli amici, se preferisci, o a tutti – questo ad esempio è il mio profilo). Mi piace anche il fatto che supporti il login via openid;
• net vibes non è certo una novità, ma (a parte che ha aggiunto un modulo per twitter, di recente, che funziona benissimo) lo segnalo cmq un po’ perchè ho ripreso a usarlo massicciamente, come home page personalizzata, e un po’ perchè davvero è imho fatto molto bene – bello e veloce. (Due caratteristiche imprescindibili del web che mi piace).

Orecchini… HTML :-)

Se Karina fosse un po’ + geek le regalerei sicuramente un paio di questi…

Orecchini artigianali in argento, in vendita su Etsy.com, a 20 dollari.

Descrizione del prodotto:

“Make sure you don’t walk around without a properly formatted Head. While we cannot ensure that Google will properly index the contents of your brain, these earrings could help. Be W3C verified. Always close your tags!”

Ovvero: “Assicurati di non andartene in giro senza una testa formattata correttamente. Anche se non possiamo assicurarti che Google indicizzerà correttamente i contenuti del tuo cervello, questi orecchini potrebbero aiutare. Sii verificata/o dal W3C. Chiudi sempre i tag!”

Original web-site

Poesia

Mi ero messo a scribacchiare una cosina per partecipare alla 3a edizione di Brevis – premio nazionale di scrittura essenziale.

I termini di consegna sono scaduti, e la poesiuola mi è rimasta “in canna”. La pubblico qui, allora. (Era per la categoria endecasillabo. Max. 3 versi.)

 

 

Hic

Un libro, un vino, e me; tre su un balcone.

Interseca laconica destini

La quiete dolceamara d’occasione.

 

Ecco. Tutto qui. Come si può forse immaginare, l’ho scritta una sera sul balcone. Leggevo “Il mio nome è rosso”, di Pamuk. Il vino, un Cabernet.

 

Era un po’ che non scrivevo nulla. Come poesie, ne approfitto per citare due raccolte mie, Acerbo – 29 poesie, del 2005, e l’operazione illustrata Jangadeiros, del 2004.

 

Au revoir.

API API API

API: Advanced Programming Interface. Esistono da tempo, e a livelli diversi. Qui, adesso, interessa l’implementazione di alcune API nel cd. web 2.0.

Esempio classico: Google rilascia l’API per interfacciarsi con le google maps, ovvero includere una google map nel proprio sito – uso tipico: al posto della vecchia immagine/mappa “dove siamo”.

I software comunicano tra di loro – e con i programmatori. La combinazione di dati provenienti da applicativi diversi per ottenere un nuovo flusso di dati / un’organizzazione differente dei dati è un’altra delle cose trendy del 2.0, e ha preso il nome di mash-up .

Un’applicazioncina cool del web 2.0 è Twitter. Una specie di interfaccia per brodcastare (uno a molti) messaggi stile sms.
“Cinguettare” con/per gli amici (e per il resto del mondo) in 140 caratteri.
Una cosa forse un po’ frivola, di sicuro con un buon numero di personaggi interessanti che ci stanno sperimentando dentro / attorno.

Ecco allora: twittervision (una google map del mondo con i twitting in real time), twitterholic (che mostra i “drogati” da twitter), tweetvolume (per le parole più usate su twitter).

C’è un buon bando di gente anche italica, su twitter. Non moltissima – un migliaio di presenze. Bloggers e “internet-maniaci”, principalmente. Una roba 1/3 social 1/3 experimental 1/3 waste of time.

Ed ecco che Kromeboy ha disegnato una mappa relazionale dei twitters italiani: sul suo blog la mappa, anche ad alta definizione, e la spiegazione dell’esperimento (ha usato le API di Twitter e un programma di grafica, Graphviz

Bravo Sergio!

Stesso argomento, diversa applicazione. David Troy, autore di Twittervision, ha realizzato anche Flickrvision. Stesso concetto, stesso interfacciamento con le maps di google. Solo che qui, ad essere mostrate in tempo reale e con la loro collocazione sul planisfero, sono le fotografie postate dagli utenti su Flickr. Bello, bellissimo – imho.

Per chiudere qualcosa di leggermente diverso. Digg Exposé. Le notizie segnalate -e votate – dagli utenti sul celebre Digg, in esposizione e previsualizzazione tramite Snap Preview (lo stesso che gira anche sui blog di WP, e permette la preview dei link). Qui la generazione del contenuto è dentro un oggetto flash. Da vedere.