Karina. Galleria di immagini via css.

giugno 21, 2007

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

giugno 19, 2007

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:

newdrop screenshotnewdrop menu screenshot

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)

giugno 14, 2007

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…

blood

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

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

blood

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.

diaz bloodNon 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.blood diaz

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

giugno 14, 2007

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:cocomment banner

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

giugno 12, 2007

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>). suckerloz - screenshotUn 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!

giugno 8, 2007

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 = …

giugno 6, 2007

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

Iscriviti

Ricevi al tuo indirizzo email tutti i nuovi post del sito.