Central Scrutinizer Studio http://www.centralscrutinizer.it/italiano Sat, 10 Dec 2016 18:45:17 +0000 it-IT hourly 1 https://wordpress.org/?v=4.7.10 Nuovo indirizzo blog http://www.centralscrutinizer.it/italiano/blog/nuovo-indirizzo-blog-nuovo-indirizzo-feed/ http://www.centralscrutinizer.it/italiano/blog/nuovo-indirizzo-blog-nuovo-indirizzo-feed/#comments Sat, 19 Mar 2011 12:00:51 +0000 http://www.centralscrutinizer.it/italiano/?p=450 Salve mitici avventori! Al suo ottavo anno di vita, fra meno di un mese Central Scrutinizer sarà visualizzabile solo tramite il suo blog inglese, rediretto all’indirizzo:
http://marcorosel.la

Grazie, ci si vede di là!

Marco

]]>
http://www.centralscrutinizer.it/italiano/blog/nuovo-indirizzo-blog-nuovo-indirizzo-feed/feed/ 3
Stela chitara http://www.centralscrutinizer.it/italiano/internet/stela-chitara/ http://www.centralscrutinizer.it/italiano/internet/stela-chitara/#comments Fri, 06 Mar 2009 21:16:31 +0000 http://www.centralscrutinizer.it/italiano/?p=442

Chiaro, guardando fuori dal finestrino per prima cosa potreste pensare ad arance e scarpe:

]]>
http://www.centralscrutinizer.it/italiano/internet/stela-chitara/feed/ 314
Wonka 003 http://www.centralscrutinizer.it/italiano/internet/video/wonka-003/ http://www.centralscrutinizer.it/italiano/internet/video/wonka-003/#comments Thu, 22 Jan 2009 17:11:42 +0000 http://www.centralscrutinizer.it/italiano/?p=441 Nuovo promo per la serata electro milanese, stavolta con padroni di casa le icone Steve Aoki e i Bloody Beetroots – più la star dubstep Rusko.
(a proposito dei secondi, chi è che una volta mi ha detto: “Penso che la sceneggiatura di Cornelius sia stata ispirata dagli incubi che mi raccontava mia mamma quando ero giuovine.”?)

(Riguardo al primo invece, chissà se renderà di nuovo omaggio ai quattro irriverenti e anticonformisti ragazzi di Bologna come qualche mese fa:

)

]]>
http://www.centralscrutinizer.it/italiano/internet/video/wonka-003/feed/ 2
A.N.T. http://www.centralscrutinizer.it/italiano/internet/video/ant/ http://www.centralscrutinizer.it/italiano/internet/video/ant/#comments Sun, 04 Jan 2009 16:58:09 +0000 http://www.centralscrutinizer.it/italiano/internet/video/439/
[Grazie a Simone “Mozi” per il supporto tecnico.]

]]>
http://www.centralscrutinizer.it/italiano/internet/video/ant/feed/ 2
La stanza di Wonka 001 http://www.centralscrutinizer.it/italiano/internet/video/la-stanza-di-wonka-001/ http://www.centralscrutinizer.it/italiano/internet/video/la-stanza-di-wonka-001/#comments Sun, 07 Dec 2008 19:04:51 +0000 http://www.centralscrutinizer.it/italiano/?p=438 Una sera di quasi un mese fa passavo per caso su Facebook – non mi loggavo da quasi quaranta minuti – e mi apprestavo a leggere le decine e decine di email e ‘event invitation’ a varie serate milanesi – il cui rispondere sempre affermativamente al ‘Will you attend?” può dare l’illusione di un ubiquità warholiana o per lo meno far perdere le proprie tracce per le amicizie indesiderate (“Vieni alla mia festa sabato?” “No, come vedi sarò qui, qui, qui, qui, qui, qui, qui, qui e qui.” “Ma il quinto è la mia festa!””Azz.”)

Io mi sono chiesto:
ma perchè nella comunicazione degli eventi non si sfrutta maggiormente il mezzo web affiancando alle varie email e flyer qualcosa che abbia più impatto (prima cosa fra tutte: il potere sentire quale musica verrà proposta) come uno spot?

Così qualche giorno dopo, armato di mezzi umili, ho messo online ciò per una delle serate electro che aspettavo da mesi:

Avrà funzionato? Spero che abbia dato il suo piccolo contributo.
Voi avete visto in giro altri video legati ad eventi e magari utilizzati a fini promozionali su Facebook? Commentate! :)

]]>
http://www.centralscrutinizer.it/italiano/internet/video/la-stanza-di-wonka-001/feed/ 2
Occhi sulla città per un Italia sicura http://www.centralscrutinizer.it/italiano/internet/video/occhi-sulla-citta-per-un-italia-sicura/ http://www.centralscrutinizer.it/italiano/internet/video/occhi-sulla-citta-per-un-italia-sicura/#comments Mon, 03 Nov 2008 21:11:33 +0000 http://www.centralscrutinizer.it/italiano/?p=437

]]>
http://www.centralscrutinizer.it/italiano/internet/video/occhi-sulla-citta-per-un-italia-sicura/feed/ 22
Il nuovo alla claque http://www.centralscrutinizer.it/italiano/design/il-nuovo-alla-claque/ http://www.centralscrutinizer.it/italiano/design/il-nuovo-alla-claque/#comments Sun, 19 Oct 2008 15:45:16 +0000 http://www.centralscrutinizer.it/italiano/?p=427 Un immagine da \"Procrastination\", di Johnny KellyCome avrete notato da qualche mese settimanagiorno ho messo online la nuova versione di questo sito.
Il fu-blog in inglese è passato in homepage mentre questo in /italiano (che casino.), ho aggiornato la pagina con informazioni utili in caso vorreste fingermi me ad una festa ed aggiunto una pagina con gli ultimi frutti del mio operato.

Riguardo la grafica, a parte i post che alternano per il titolo ed i link i 6 colori di questa versione come già visto nella Whitezone (di cui è il negativo) ho rimandato per mesi la scelta del nuovo font che avrebbe sostituito il vecchio Dirty Ego del maestro Eduardo Recife utilizzato sin dalla seconda versione risalente al 2005. Chi l’avrebbe immaginato che nel giro di pochi anni si sarebbe trasformato in
Dirty Egoverrated con i risultati tragici di Fig.2.?

Ultima novità un qualcosa che coniuga alla perfezione inutilità e presappochismo: una lavagnetta in flash in alto a destra – in tutte le pagine tranne quelle in italiano (che casino /2) – con cui colorare a piacimento il pezzo del layout lasciato vuoto dallo spostamento sulla sinistra.
Certo che sarebbe interessante riuscire a riempire gli spazi vuoti anche nei post, magari inserendo un vecchio testo – che potrebbe anche esprimere concetti espressi in modo sconnesso che non condividete ma potrebbe servire a raggiungere un livello apprezzabile di TL;DR per essere linkati – rubato dall’archivio di un’altro blog.
Mi chiedo: tutto ciò che riguarda le arti visive non funziona allo stesso modo? Mica ci si prende la briga di mettere cit. come in un Tumblr su un lato di un poster o alla fine di uno spot.

Nella lavagna manca il pulsante per cancellare, ma non pensiate che non abbia ancora finito il tutto: si tratta solamente di una provocazione. (?)

In conclusione, un signore suona i Daft Punk con il Theremin:

]]>
http://www.centralscrutinizer.it/italiano/design/il-nuovo-alla-claque/feed/ 1
DFW http://www.centralscrutinizer.it/italiano/internet/dfw/ http://www.centralscrutinizer.it/italiano/internet/dfw/#comments Sat, 13 Sep 2008 10:05:04 +0000 http://www.centralscrutinizer.it/italiano/?p=426 Ho comprato Infinite Jest nel 2002, in una libreria di Pisa sul lungarno in cui c’erano dei libri invenduti a prezzo scontato (€ 17.30 al posto di € 24,79 al posto di 48.000 lire), e si trattava del tomo di cui avevo sentito parlare due anni prima, in occasione della sua traduzione italiana, su un settimanale in allegato ad un quotidiano. L’ho tenuto nella pellicola l’originale, trasportandolo miei vari traslochi come il bilanciere preistorico in Super Fantozzi, fino al 2006 quando ho deciso di aprirlo. Fino ad oggi è stata sempre la prima scelta nei consigli per la lettura a tutti quelli che me li richiedevano, e 9 volte su 10 mi sono sentito rispondere: “Ah, non conosco David Foster Wallace.”
Ora che una marea di blogger ha riversato i propri RIP e le librerie sono pronte ad esporre delle pile di “La ragazza dai capelli strani”, mi sento un pò come il cugino di paese che ha sempre difeso dai pretendenti quella ragazzina che qualche anno più tardi è diventata Miss Italia o il vecchio allenatore di pugilato che ha preso quel ragazzo gracilino dicendogli “Forza Giannipiero, devi credere in te stesso!”, ed una volta che il proprio pupillo è diventato una grande promessa e fila dritto verso le olimpiadi viene abbandonato a discapito di un giovane allenatore di una palestra più ricca, o l’insegnante di lettere che non viene minimamente citato quando il suo alunno devoto vince l’oscar per la sceneggiatura etc.

Si chiedono tutti cosa abbia portato Wallace a suicidarsi a 46 anni.

E’ semplice, si chiama procrastinazione.

]]>
http://www.centralscrutinizer.it/italiano/internet/dfw/feed/ 2
Grafico quel video! http://www.centralscrutinizer.it/italiano/design/grafico-quel-video/ http://www.centralscrutinizer.it/italiano/design/grafico-quel-video/#comments Wed, 27 Feb 2008 23:49:21 +0000 http://www.centralscrutinizer.it/design/grafico-quel-video/ Particular of Living Things - Bom Bom BomIeri cercavo su YouTube un tutorial che mi rendesse le idee chiare su certi aspetti della campagna elettorale relativi all’integrazione di extracomunitari, e dopo due ore di serendipità sono capitato in un video simpatico in cui un gruppo suonava all’interno di un libro per bambini, di quelli con le pagine cartonate piene di leve con cui è possibile far muovere delle figure.
Questa mattina come al solito ho dimenticato il titolo della canzone ed il nome del gruppo e YouTube si è naturalmente rifiutato di offrirmi supporto, trovando solo un gruppo di video in cui tecniche o stili relativi alla grafica per la stampa come collage, stencil o worn look erano usati per creare animazioni principali o di sfondo. (ovvero motion graphics.)
Ho chiesto al mio guru musicale Tulsas se rimembrava cinematografie di simil fattura, ed in un paio di ore abbiamo scovato:

Franz Ferdinand – This Fire


Il quartetto di Glasgow è alle prese con lo studio di un attacco bellico all’interno di poster costruttivista dinamico: tipografia sovietica, colori con alto contrasto (scala di arancioni), forme geometriche (triangoli in questo caso). Il video del capolavoro Take Me Out ha un simile approccio avant-garde.

Momenti migliori (per me): da 2:45 a 2:50
Anno: 2004
Regia: ?

Living Things – Bom Bom Bom


Acquerelli, stencil e un look anni scescianta per la rock band di Saint Louis (e dove sono finiti? meteore?). La ricetta: partire da una zebra, rubargli le striscie, aggiungere colori vari e invecchiare il tutto. (risoluzione più alta qui)

Momenti migliori: da 2:00 a 2:07
Anno: 2006
Regia: Floria Sigismondi

Elisa – Together


Le immagini di Elisa sono inserite principalmente in scene 3D, ma accompagnate da diverse immagini statiche (per es: soldati 1:40; camera man 3:25; motore 3:43; e gli ultimi secondi) inserite come in un collage fotografico.

Momenti migliori: da 1:26 a 1:47
Anno: 2005
Regia: Andrew Bennett e Mark Yamamoto

Gnarls Barkley – Crazy


(Al momento non riesco a trovare un file di cui posso prendere il codice per l’ember, quindi ecco il link). Come inserire le facce del duo di Baltimora all’interno di macchie di Rorschach in movimento? Con stencil verdi e viola (quindi immagini ad un solo livello) in movimento.

Momenti migliori: da 1:07 a 1:25
Anno: 2006
Regia: Robert Hales

Royksopp – Remind Me


A Tromsø (Norvegia) esercita un altro duo elettronico a cui piace la “rappresentazione visuale di informazioni, dati o conoscenza”, ovvero l’infografica. Tutto nella vita può essere spiegato attraverso una proiezione isometrica ed un grafo, i vostri genitori non ve l’hanno insegnato quando eravate bambini?

Momenti migliori: da 0:37 a 0:48
Anno: 2002
Regia: Ludovic Houplain and Herve de Crecy

Royksopp – Eple


Ancora i Royksopp per un viaggio all’interno di un fantastico set di foto di Vacanze di Natale ’70 e ’80 una sovrapposta all’altra; zoomando verso l’esterno di un immagine questa diventa un particolare di quella soprastante.

Momenti migliori: tutti.
Anno: 2001
Regia: Mother and Toxic

Mark Ronson: Just


Un dritto come Mark Ronson non poteva non sapere che Londra è piena di graffiti pronti a muoversi quando sei distratto. (per guardare i fuseaux di quella bionda nu-raver)

Momenti migliori: da 2:23 a 2:38
Anno: 2005
Regia: Nick Frew

Alex Gopher – The Child


New York, invece, diventa il regno dei caratteri. Questo video credo sia uno dei primi esempidi motion typography (ricordate?).

Momenti migliori: da 2:23 a 2:38
Anno: 1999
Regia: Antoine Bardou-Jacquet

Vinicio Capossela – Marajà


Assolutamente il mio preferito – e penso il miglior video musicale italiano di tutti i tempi: per Vinicio Capossela decine e decine di immagini retro – principalmente in tonalità seppia, ma talvolta con l’aggiunta di sfumature giallo o verdi – danzanti, da destra a sinistra o viceversa come in un teatrino (presente nell’incipit) o in un circo, in un colossale collage fotografico.

Momenti migliori: da 3:08 a 3:11
Anno: 2001
Regia: Ago Panini

Qualche suggerimento? Vai!

]]>
http://www.centralscrutinizer.it/italiano/design/grafico-quel-video/feed/ 4
C:ongrtlns.gvn http://www.centralscrutinizer.it/italiano/blog/congrtlnsgvn/ http://www.centralscrutinizer.it/italiano/blog/congrtlnsgvn/#comments Fri, 26 Oct 2007 00:13:29 +0000 http://www.centralscrutinizer.it/internet/congrtlnsgvn/ One of the first Apple with GavinoCiao amici.
Se sapeste cosa mi è accaduto in questi ultimi tempi…Ad esempio sono tornato in Sardegna dopo i primi tre mesi a Milano, ed ho scoperto che i miei genitori avevano affittato la mia stanza ad un’altra persona.

E’ andata più o meno così:

(entra nell’appartamento, con in braccio un pacco arancione, chiude la porta, rimette la chiave in tasca, nota che la sua camera è arredata in un modo diverso. Entra in salotto, dove suo padre siede su una poltrona; sul divano di fronte sua madre con un’altro individuo; entrambi leggono un giornale.)

Padre: (sorpreso) Figlio!
Madre: Figlio!
Marco: Ciao ciao ciao Pà e Mà.
Madre: Marco!
Marco: Mà…(si avvicina per baciarla, mentre guarda l’intruso) Come stai, che piacere. (si gira, suo padre è in piedi)Pà…
Padre: (imbarazzato) Ciao…che sorpresa…Lieto di…
Marco: Tutto a post…(finge un pugno)
Padre: Ah!…
Marco: (gli cinge il fianco) Allora, come va, come va!
Padre: Oh…bene bene…Insomma, ce la caviamo…
Marco: Beh! Eccomi qua!
Padre: Eh…(si risiede) Sì.
Madre: Ma perchè non ci hai fatto sapere niente, Marco?
Marco: Scusa Mà, volevo fare una bella sorpresa a te e a Pà.
Padre: Una sorpresa…certo…Un pò imprevista forse…
Madre: Lo stavamo leggendo sul blog in questo momento. (il tizio accanto continua a masticare qualcosa)
Padre: Però avresti dovuto dircelo…Non che non ci faccia piacere rivederti e poi, tutto guarito…
Marco: Esatto, hanno fatto un lavorone, Pà. M’hanno rimesso completamente a nuovo! Beh, (da uno sguardo in cucina)qui è tutto come prima, eh?
Padre: Oh, beh, sì.
Marco: (digrigna i denti, si avvicina minaccioso verso il padre, che arretra con la testa) Ehi Pà…c’è uno strano individuo seduto sul sofà che mastica lonticchi di pane carasau…
Padre: Quello è Gavino…

Arghhh…lo stomaco….Non riesco nemmeno a pensarci, roba da fare girare il gulliver.

Un’altro avvenimento abbastanza delicato è stato l’abbandono precoce di un grande amico – anzi il creatore – di questo blog, il mio Fujitsu-Siemens Amilo che ha smesso completamente di funzionare, come se fosse scritto nel proprio destino o nelle previsioni dei progettisti, due mesi dopo la scadenza della garanzia. Dodici ore circa di attività intesa unite al caldo di luglio, una schermata bianca ed il buio: ha visto la luce e si è spento serenamente.

Dopo aver riflettuto alcuni mesi sul da farsi, mentre aspettavo che l’assistenza mi chiamasse all’improvviso con un responso – non è difficile ingannare il tempo durante una lunga attesa se accade attorno a te un qualcosa che desta la tua curiosità; una volta ero seduto nella sala di aspetto di un radiologo in una Asl, con attorno a me una decina di persone di diverse età. Ad un certo punto un ragazzo si alzò per andare in bagno, dietro l’angolo; al ritorno, qualche minuto più tardi, il ragazzo si risedette con lo sguardo agghiacciato, quasi sotto shock. Nessuno lo notò, tranne una signora che dopo una serie di occhiate distratte posò il giornale che leggeva e si diresse verso il bagno; al ritorno la signora tremava, e si accasciò sulla sedia, ansimante. Un signore alto le chiese se si sentiva bene e un’altro signore bussò nella porta del dottore, che non rispose; il signore alto chiese a tutti di rimanere seduti e dopo qualche metro varcò la porta dei bagni; una trentina di secondi dopo sentimmo la stessa porta sbattere, girammo l’angolo in tre o quattro, e ci si presentò davanti ai nostri occhi il signore alto che appoggiato con un fianco sul muro scivolava fino ad accasciarsi lentamente sul pavimento. L’altro signore cominciò a schiaffeggiarlo, mentre il signore alto muoveva le braccia da una parte all’altra ripetendo più volte un “Lì..nel…nel…” gettando uno sguardo agghiacciato verso lo specchio sopra il lavandino dei bagni, da cui si intravedeva la porta socchiusa del bagno delle donne.
Dissi all’altro signore ed un ragazzo lì vicino che bisognava andare a controllare; entrammo nel bagno, spinsi lentamente la porta del bagno delle donne e, non me lo scorderò mai più, vedemmo che – ricevetti il responso negativo, ed al momento della scelta di un nuovo calcolatore la mia mente non ha fatto altro che ricordarsi di uno dei momenti di fighetteria più alta raggiunti da un paio di geek.
Ovvero, questo video.
(“E’ possibile, vi assicuro” spiega da quel che ho capito uno dei soci di 37Signals “conquistare una donna con carisma e rubionreils.”)
E così ho indossato un maglietta in tinta unita, ho infilato le mani nelle tasche dei jeans e sono diventato un Mac.

Da quel che ho letto e sentito, lo ‘switch’ consisterebbe nel passare dalla derisione più completa da parte di un nutrito manipolo di snob che ostentano il simbolo della mela, o citando Brodoprimordiale:

[…] la setta del Mac, inetti fighetti euromuniti con lenti catorci di design prestazionalmente irrilevanti, overcostosi senza nemmeno l’ascella pezzata e il vello pettorale.

al diventare gli appartenenti dello stesso club dimenticandosi in un lampo delle proprie origini. E lo dico soprattutto a voi che leggete con quei catorci di Winzozz.
(Inferiori.)

Io non ho mai sopportato la comunicazione che porta a distruggere la concorrenza denigrandola: è difficile scoprire una pagina del catalogo Ikea in cui vengono dileggiate le qualità di Aiazzone, o trovare una registrazione di Veltroni che si prende gioco di Adinolfi. (ok, non è la stessa cosa, mi sono venuti due esempi di manifesta inferiorità. Ma a proposito di primarie mi sembra che nessuno abbia posto l’accento sul Gawroski featuring Schettini: questa è la politica del futuro ragazzi, immaginate se Enrico Letta si fosse presentato in alleanza con Pharrell Williams) 1
Nel caso di Apple odio i siparietti nei keynote di Jobs che scatenano le risate del pubblico (ma odio soprattutto l’umorismo informatico: l’altro giorno stavo in un locale ed ho sentito un tizio che diceva ad una ragazza: “Sai, lo scorso week end abbiamo fatto una pedalata in montagna…molto 1.0, sì.” Arghhh…lo stomaco…lo avrei infilzato con la penna usb che porto sempre al collo)(update: la scena era più o meno così2) ed è chiaro da anni il PC non mi serve solo per creare grafi come il colletto bianco della pubblicità sopra, ma dopo tre giorni con un Mac non posso che annuire rileggendo o rivedendo tutti gli sfottò degli ultimi vent’anni.
Non ho imparato ancora nessuna combinazione di tasti e malapena ho scoperto Quicksilver ed Exposè, ma come mi profetizzava il mio guru di riferimento Sapo!!3 , ho provato “il Sollievo”.
Che per me è soprattutto evitare di spegnere e riaccendere scadendo i minuti (quanti, quanti) con questi versi.

Se fossi il titolare di un blog aggiornato fra qualche giorno vi racconterei qualche impressione del nuovo Leopard (che esce domani)[a proposito: guardate come si fanno i soldi4 con i blog], ma ci sono altri obiettivi ben più importanti nel mio nuovo manifesto programmatico.

[1] (i blog-lettori più abili ricorderanno la malizia vincente nella strategia ‘The Club’)
[2] (o così)
[3] (che mi da consiglio assieme allo Zio Cavedoni)
[4] (a commento della risposta di Luca Conti)

]]>
http://www.centralscrutinizer.it/italiano/blog/congrtlnsgvn/feed/ 5
x dubbi io risponderebbi cosi’ 1/x http://www.centralscrutinizer.it/italiano/design/css/9-dubbi-io-risponderebbi-cosi-14/ http://www.centralscrutinizer.it/italiano/design/css/9-dubbi-io-risponderebbi-cosi-14/#comments Wed, 29 Aug 2007 15:42:21 +0000 http://www.centralscrutinizer.it/internet/9-dubbi-io-risponderebbi-cosi-14/ illab.jpgIl mondo del web è in continua evoluzione, tranne che da queste parti. (una piccola pausa di ritenzione da cui è stato esclusa la costantemente aggiornata pagina su del.icio.us).
Il problema è dovuto al fatto che, ci terrei a ribadirlo ancora una volta, quando fai un applicazione, anche 2.0, quindi perpetual beta e una cosa e l’altra, spesso il collo di bottiglia è che deve esser produttiva alla prima release. Ora uno dei problemi fondamentali è che i tempi di produzione della prima release stabile sono lunghi, specialmente se anche l’ IT del cliente non è formato nello sviluppare. Il problema attualmente è che il mercato non è maturo perchè gli implementatori non sono maturi in questo momento, gli sviluppatori non hanno ancora abbastanza sufficienti cognizioni per andare ad agire immediatamente su quello che viene progettato, quindi si devono stabilire talmente tante sessioni di feedback per cui adesso in questo momento non è possibile agire in modo completamente agile (*) a destra.
In questo ed alcuni post seguenti vorrei raccontarvi un paio di piccoli dubbi che mi sono posto nel creare due siti extra-lavorativi, con relativa soluzione link-corredata.

Il primo sito ha per titolo: “The Lab of the Central Scrutinizer – also called “The Whitezone” – where I, Mark Rosetta, collect the experiments made in my weblogs”:

1) Come riorganizzare nel modo migliore alcuni post del proprio blog? – Creando un nuovo blog che riproponga gli stessi post (“riciclate, sempre“) in formato “raccolta di-“.
Nel mondo dei blog di web design, i quali ricevono un grande supporto dai siti di social bookmarking, è importantissimo ricordare che nel migliore dei casi 1 scrive un post, 50 lo commentano, 500 lo segnalano, 5000 lo leggono. Ci guadagna ovviamente la persona che scrive (da qui: “But why not make something new? Instead of linking to a few articles every day, write one. Instead of showcasing and discussing the latest designs, design something. You’ve got this absolutely batty opportunity of instant global publishing. Publish! The world is your oyster!“) ma anche il segnalatore che riesce a raccogliere la ‘maggior quantità’ (a volte ci si accontenta solamente di un numero o di un “how to” nel titolo del post – ma è ovvio che se uno script o tutorial non serve a niente non verrà risegnalato) di post interessanti da linkare.
Un tempo andavano di moda i listoni alla Handbook o Interesting Links di Veerle (io due anni fa ci provai con ‘la collection’), ora riscuotono un certo successo i siti con feed alla MiniAjax o Smashing Magazine, ed ovviamente l’esercito delle gallerie.

2) Come realizzare un template in pochissimo tempo? – Puntando sul bianco, la colonna unica, ed aggiornando la frase “Io amo il minimale!” in “Il web design è 95% tipografia“.
In realtà la tipografia, ma soprattutto il layout (a volte la sola tipografia può definire il layout) costituiscono l’impalcatura di ogni sito web e dovrebbero essere studiati abbastanza approfonditamente. Io ho trovato un buon punto di partenza nelle slide di due presentazioni tenute da Mark Boulton al SXSW: “Web Typography Sucks” (io, l’amico Antonio ed un newyorkese conosciuto all’albergo l’abbiamo persa perchè siamo scesi alla fermata sbagliata dell’autobus; ho detto agli altri due “Ora la gente uscirà da lì dicendo ‘Una delle migliori presentazioni a cui ho mai assistito in vita mia!'” Tristemente, avevo ragione.) con Richard Rutter, e “Grids Are Good” con Khoi Vinh.
Riutilizzerò lo stesso layout, con l’aggiunta di una colonna sulla destra, per il redesign di questo blog pronto per il 2012. (a proposito di procrastinazione feroce, il buon Fullo si immolò per tutti noi). Se un tempo soffrivo di agorafobia grafica , ora i post più lunghi hanno bisogno di una maggiore spazio in larghezza. Per rendere il testo allineato all’header e al footer, ho utilizzato un impopolare text-align: justify; questo articolo su Digital Web Magazine, però, mi da conforto:

You are probably already familiar with the text-align property, but you may not have thought about using the justify value. There are few cases when it’s useful; however, when using narrow, newspaper-like columns, it can greatly improve the flow of your text and help define the layout and overall design of your pages.

3) E’ possibile inserire, con effetto rollover, 2 link con ‘image replacement’ in un solo <h1>? – Anni ed anni di navigazione sul web ci hanno insegnato che, nella maggiorparte dei casi, il titolo in alto a sinistra nella pagina è linkato e porta all’homepage del sito.
Il titolo può essere un semplice testo, oppure questo può essere sostituito da un immagine; in entrambi i casi io utilizzo un codice HTML di questo tipo:


<div id="header">
<h1><a href="http://example.com">Titolo sito</a></h1>
</div>

dove ho inserito un h1 in un div “header”, ed al suo interno il testo del link dentro un tag <a>.

Per sostituire il testo con un immagine (“image replacement”) tramite CSS utilizzo la tecnica di Mike Rundle Accessible Image Replacement:


h1 a {
    display: block;
    width: larghezza immagine;
    height: altezza immagine;
    background: url(immagine.jpg) no-repeat;
    text-indent: -9000px;
}

L’elemento inline <a> diventa block-level, quindi può assumere delle dimensioni: queste saranno uguali a quelle dell’immagine, inserita come background di <a>, mentre il testo verrà fatto scomparire traslato fuori dall’area visibile del browser.
Al link può essere aggiunto un effetto rollover utilizzando la tecnica Fast CSS Rollover:


h1 a:hover {
        background: url(immagine.jpg) no-repeat bottom;
}

L’h1 del titolo del Lab che avevo in mente conteneva invece al suo interno due link:
The Lab of the weblog Central Scrutinizer.

Mentre il sottotitolo il link ad una sola parola:
(also called “The Whitezone“)

Tradotto in codice HTML:

<div id="header">
<h1>The <a id="logolab" href="http://lab.centralscrutinizer.it">Lab</a> of the weblog 
<a id="logocentral" href="http://www.centralscrutinizer.it/en">Central Scrutinizer</a>
</h1>
<h2>(also called "<a id="logowhite" href="http://lab.centralscrutinizer.it">The Whitezone</a>")</h2>

Nel CSS ho reso l’header position: relative in modo da diventare spazio di riferimento dei tre link a cui ho attributo position:absolute, e spostato quest’ultimi tramite top e left all’interno del div header. (un esempio simile si trova in questo post di Andy Clarke su 24ways.)
headerlab.gif

Infine, per i tre link ho utilizzato l’image replacement e il rollover come nell’esempio sopra inserendo come background le immagini logocentral, logolab e logowhite.


a#logocentral { 
	position: absolute;
	top: 47px;
	left: 0px;
	z-index: 5;
	width: 129px;
	height: 72px;
	background: url(images/logocentral.jpg) no-repeat scroll;
	overflow: hidden;
	text-indent: -9000px;
}

a#logocentral:hover{ 
	background: url(images/logocentral.jpg) no-repeat scroll bottom;
}

a#logolab { 
	position: absolute;
	top: 6px;
	left: 150px;
	z-index: 1;
	width: 183px;
	height: 110px;
	background: url(images/logolab.png) no-repeat scroll;
	overflow: hidden;
	text-indent: -9000px;
}

a#logolab:hover{ 
	background: url(images/logolab.png) no-repeat scroll bottom;
}

a#logowhite { 
	position: absolute;
	top: 117px;
	left: 5px;
	z-index: 10;
	width: 348px;
	height: 57px;
	background: url(images/logowhite.jpg) no-repeat scroll;
	overflow: hidden;
	text-indent: -9000px;
}

a#logowhite:hover{ 
	background: url(images/logowhite.jpg) no-repeat scroll bottom;
}

Arrivedòrci! ->(1 – continua…)

]]>
http://www.centralscrutinizer.it/italiano/design/css/9-dubbi-io-risponderebbi-cosi-14/feed/ 21
Il nuovo La7.it http://www.centralscrutinizer.it/italiano/design/il-nuovo-la7it/ http://www.centralscrutinizer.it/italiano/design/il-nuovo-la7it/#comments Thu, 09 Aug 2007 01:23:45 +0000 http://www.centralscrutinizer.it/internet/il-nuovo-la7it/ Salve. Digito questo post veloce in pinne fucile ed occhiali grossi (che metto – e poi tolgo) per segnalarvi che è online il redesign ‘in progress’ di

di cui ho scritto/sto scrivendo gli HTML ed i CSS.

(modellati sulla grafica di Valerio Tedesco, con me in dodicitrenta coordinati da Massimiliano Chiesa, e sul lato server del settore multimediale di La7, curato tra gli altri da Davide Ardore.
Ho inserito inoltre diversi oggetti javascript, che si interfacciano alla libreria Mootools per animazioni ed ajax.
I dettagli, (promessi) come al solito, [soprattutto su come abbia fatto a tramutarmi in sosia di Ivo Mey] in qualche prossimo float post.)

Programmi per i prossimi giorni: prima qui; poi qui.
Buone vacanze!

]]>
http://www.centralscrutinizer.it/italiano/design/il-nuovo-la7it/feed/ 7
Grafico e programmatore Java/.Net cercansi http://www.centralscrutinizer.it/italiano/internet/grafico-cercansi/ http://www.centralscrutinizer.it/italiano/internet/grafico-cercansi/#comments Tue, 05 Jun 2007 17:06:59 +0000 http://www.centralscrutinizer.it/internet/grafico-cercansi/ Nell’agenzia web in cui lavoro, Dodicitrenta, siamo alla ricerca di:

  • un grafico junior
  • un programmatore Java/.NET con almeno due anni di esperienza

Per maggiori informazioni l’email è 1230@dodicitrenta.com – la sede lavorativa, invece, è Milano: the Big Panetùn.

]]>
http://www.centralscrutinizer.it/italiano/internet/grafico-cercansi/feed/ 5
La valigetta di cartone #3 http://www.centralscrutinizer.it/italiano/internet/la-valigetta-di-cartone-3/ http://www.centralscrutinizer.it/italiano/internet/la-valigetta-di-cartone-3/#comments Mon, 12 Mar 2007 08:50:31 +0000 http://www.centralscrutinizer.it/internet/la-valigetta-di-cartone-3/ sxsw.jpgIn diretta da Austin, TX, 3:23 a.m. (ma le 9:23 in Italia): The Horizontal Way ha vinto nei 10° South By Southwest Web Awards come “Best CSS”.

award.jpg
[seguiranno foto, video, dispacci e ommammamia.]

Update 1:

Io.jpg

Io.jpg

Update 2:
Intervista per Apogeonline

Intervista per Blographik
Foto su Flickr

]]>
http://www.centralscrutinizer.it/italiano/internet/la-valigetta-di-cartone-3/feed/ 55
La valigetta di cartone /2 http://www.centralscrutinizer.it/italiano/internet/la-valigetta-di-cartone-2/ http://www.centralscrutinizer.it/italiano/internet/la-valigetta-di-cartone-2/#comments Wed, 07 Mar 2007 18:11:38 +0000 http://www.centralscrutinizer.it/internet/la-valigetta-di-cartone-2/ sxsw.jpg(continua da qui)
…e così oggi, il giorno prima della partenza, ho preso la corriera per salutare tutta la mia famiglia nella mia casa natale.
C’erano tutti. Mamma Maria mi ha dato un pezzo di formaggio e mezza cipolla che ho chiuso in un fazzoletto e messo in tasca, così se ho fame gli posso dare un morso. Ho preso di nascosto anche un tozzo di pane, speriamo non se ne siano accorti. Papà mi ha raccomandato di comportarmi bene, ed ha detto che spera presto di raggiungermi in America, anche se non ha ancora capito il perchè ci sto andando. Non ti preoccupare, gli ho risposto, sarò subito di ritorno.
I miei fratelli più piccoli Vincenzo, Mario, Aristotele, Giorgio, ed il piccolo Piero, perennemente con la tosse, sono venuti ad abbracciarmi e mi hanno chiesto di portargli una mazza da baseball e le pistole degli western. Ho dato a Vincenzo il compito di badare alla casa quando Papà è nei campi e lui si è messo sull’attenti, mentre il piccolo Piero mimava la mitragliatrice con la stampella.
Mamma Maria poi mi ha abbracciato forte e mi ha dato in mano una lettera, che dice dovrò leggere solo quando sarò arrivato.
Ho battuto tre volte sul piede del letto per salutare anche il mio topo Michelangelo, che poverino deve badare ai cuccioli che sono appena nati. Stranamente, non sembrava la sotto. Qualche secondo dopo, mentre mi alzavo, l’ho visto schizzare via sotto le mie gambe e correre spedito verso l’altra camera della casa. Dopo averlo cercato per mezzo metro quadro, spostando la paglia delle galline, l’ho visto mangiucchiare un laccio della mia scarpa come suo solito. Mi ha fatto segno di avvicinarmi. “Marco!” ha urlato “ti prego, portami con te…”
“Shhh…! Zitto! Michelangelo, ma vuoi che ti scoprano??”
“Marco, non posso più vivere in questa casa, lo sai. Devo cambiare aria….la Libertà, capisci!?.”
“Parla piano…senti, non puoi venire.”
“Ma come! Ho anche preparato una canzone per te, senti:”
(sbucano altre due topi con chitarra e tamburello) [clicca sul play]

“Beh, che ne dici, ti è piaciuta?”
“Devo andare.”
Sono ritornato nell’altra stanza, ho riabbracciato tutti ed riacchiappato la valigetta del mio portatile.

Il primo volo parte alle 10 di domani mattina, ed il buon Antonio – che si è preso una pausa dall’Erasmus in Scozia apposta – avrà la buon cura di venire a casa a schiaffeggiarmi sollevandomi dalle valigie come al solito preparate nel “ma sì, ci sarà il tempo”.
Per il resto spero di scordare qualcosa come solito, considerando però che il tutto – per un mese intero – non è stato per nulla fuori dalla mia mente: ho avuto quindi l’accortezza di prenotare sull’aereo anche i sei posti vicini, per il mio ego.
I miei colleghi della stanza mi ha avvertito di fare attenzione ai questionari che compilo lì sopra, e non segnare “sì” su tutte le caselle come nei sondaggi su internet. E non sperare di applicare (NSFW) certe teorie in casi pratici.

Seguiranno dispacci.

]]>
http://www.centralscrutinizer.it/italiano/internet/la-valigetta-di-cartone-2/feed/ 8
Repudica http://www.centralscrutinizer.it/italiano/internet/repudica/ http://www.centralscrutinizer.it/italiano/internet/repudica/#comments Wed, 21 Feb 2007 16:23:06 +0000 http://www.centralscrutinizer.it/internet/repudica/ repudica.gifIo ci voglio molto bene a Repubblica.it.
E ci voglio ancora più bene alla sua colonna di destra – apostrafata dall’indimenticato Delio “la svergognata colonna blu” e dal buon Vic “il box morboso“- che tanto ci distrae, ci tiene compagnia e ci diletta nelle nostre lunghe ore di navigazione solitaria.
Ma in ufficio, ahimè, la mente deve rimanere sgombra da (scusate i termini) seni e sederi, fenomeni internètt senza veli, calendari di oscenità e grandi fratelli di perdizione (scusate il termine) sessuale.
C’è chi vorrebbe (sebbene per altri fini) aumentarne la sua diffusione in altre maniere, ma io ho scelto di non stare al giogo: dopo aver cercato di migrare verso altri lidi, scoprendoci ugualmente la povertà della carne, ho impugnato deciso due armi fedeli come il PHP ed il Javascript ed ho così reciso di netto quella colonna dissennata… Il mio amico Tulsas, sempre pronto a placare la mia rabbia, ha invece proposto di sostituirla pacatamente con i consigli che, ogni giorno (ma proprio ogni giorno, eh!), arrivano dalla nostra Guida.
E così nato “Repudica – la versione moralizzata di Repubblica.it”:

Per tenere gli occhi puntati sull’informazione, senza strabuzzarli.

]]>
http://www.centralscrutinizer.it/italiano/internet/repudica/feed/ 23
La valigetta di cartone http://www.centralscrutinizer.it/italiano/design/css/la-valigetta-di-cartone/ http://www.centralscrutinizer.it/italiano/design/css/la-valigetta-di-cartone/#comments Fri, 02 Feb 2007 16:33:50 +0000 http://www.centralscrutinizer.it/design/css/la-valigetta-di-cartone/ sxsw.jpgEhi, chi si risente. Qualche ora fa sono stati annunciati i finalisti del “SXSW Web Awards“, il premio assegnato all’interno del South By Southwest Interactive Festival – un evento dedicato al design ed alla multimedialità ( questi gli speakers) che si svolge da dieci anni ad Austin, in Texas.
Tra i nominati della categoria CSS, ovvero

sites that push the boundaries of CSS coding technology, bringing together top-notch design and content with standards compliant and accessible code.

ho visto apparire lui, l’amato figlio: The Horizontal Way.

Bene.

Io non sono mai stato in Texas, nè tanto meno negli Stati Uniti, o in America. A dire la verità non sono mai stato fuori dall’Europa e ora che ci penso il posto più lontano fuori dall’Italia è stato Nizza, e Montecarlo, visitate in gita scolastica.
Dicono che in America ci sia in ogni casa una scatola in cui si vedono le immagini in movimento come al cinematografo, e da altre scatoline la gente ascolta tutto il giorno la musica e perfino dei tizi che ti raccontano quello che si legge nei giornali (mah!). Poi che costruiscono dei palazzi che arrivano fino alle nuvole ed i cieli sono pieni di palloni enormi che qualcuno dice molti pericolosi…Oh, non meno di tutti quei banditi che corrono per le strade con quegli abiti neri e le mitraglie sempre spianate – beh, questi individui non avranno mica una paga come tutti gli altri che, dicono, hanno un lavoro e sono felici, e le ragazze (“bebis” – mi ha detto che le chiamano così il mio amico Mimmo, che gliel’ha detto il calzolaio che c’ha il cugino di Roma che lo pagano per studiare le bombe, boh) non aspettano altro che un giovanotto marinaio che mangia spinaci. Felici…insomma – qualcuno dice che siano abbastanza depressi, soprattutto al tramonto, ma cercano di divertirsi con una strana musica che qualcuno canta pitturato di nero…Beh, ma queste sono le cose che mi raccontano.
Mi hanno detto di passare da Nuova York, e spero di riuscire a farlo: è una vita che voglio salire sul Big Ben.

]]>
http://www.centralscrutinizer.it/italiano/design/css/la-valigetta-di-cartone/feed/ 10
WIP – wysiwyg in place http://www.centralscrutinizer.it/italiano/design/js-php/wip-wysiwyg-in-place/ http://www.centralscrutinizer.it/italiano/design/js-php/wip-wysiwyg-in-place/#comments Wed, 27 Dec 2006 23:30:28 +0000 http://www.centralscrutinizer.it/design/js-php/wip-wysiwyg-in-place/ wip.gifL’esperimento che vi presento oggi è di tipo ‘sillogistico’, e prende il nome di WIP – WYSIWYG in place, ovvero un edit-in-place AJAX con utilizzo di un editor WYSIWYG.
Questa è la demo, e quella che segue è la spiegazione della frase sopra:

Cosa sono WYSIWYG, Edit-in-place e WIP?

WYSIWYG (pronuncia: “wizzy-wig”) è l’ acronimo di “What You See Is What You Get” e corrisponde a dare all’ utente l’esatta percezione, durante la creazione di un documento, di quello che verrà stampato su schermo o su carta. (Esempi di WYSIWYG sono gli editor di testo come Word , PowerPoint o i programmi di grafica come Photoshop e Flash.)
Nel web la necessità di creare e modificare velocemente e senza alcune conoscenze un codice HTML ha visto la nascita delle cosiddette Rich TextArea, delle textarea sormontate da una barra con dei bottoni che le rende simili ad un normale editor. (Scrivendo del testo, selezionandolo e cliccando su uno dei bottoni è possibile inserire il testo all’interno di un particolare tag HTML: se ad esempio vogliamo che una porzione di testo scritto nella rich textarea sia in grassetto, occorre selezionare il testo e cliccare il tasto contrassegnato da una B (o una G), che inserirà il testo all’interno del tag <strong>).
I WYSIWYG non sono mai stati ben accetti sotto il punto di vista degli standard web, perchè colpevoli di creare codice non well formed, non consentire la separazione tra struttura e presentazione (un tag <FONT face=Arial bgcolor=#000000> ne è un esempio) o di funzionare esclusivamente con Explorer. Negli ultimi sono nati così alcuni WYSIWYG, di cui alcuni open-source, che hanno saputo ben riparare agli errori dei predecessori: tra questi XINHA (acronimo di ‘XINHA is not HTMLArea’, trattandosi del figlio dell’ottimo HTMLArea,il cui sviluppo bloccato qualche anno fa è stato rimesso in piedi da una comunità open-source), TinyMCE (l’editor installato di default su WordPress) ed FCK Editor.
Un’anno fa ho inoltre segnalato WYM, un editor “What You See Is What You Mean”, che si propone di guidare l’utente nella strutturazione del documento lasciando da parte la visualizzazione finale. Secondo il mio punto di vista quest’ultimo si tratta di uno strumento che (ora) vedo troppo legato a noi che lavoriamo con il codice più che ad un utente alle prime armi abituato all’editazione in stile Word, il tipo di utente a cui un WYSIWYG sarebbe indirizzato. L’ideale sarebbe personalizzare l’editor in modo che l’utente sia obbligato a modificare esclusivamente i tag legati alla struttura di una pagina, in modo che il codice creato sia valido (mi riferisco all’XHTML) oltre che well formed, eliminando ad esempio la modifica della grandezza e del tipo di carattere lasciandone la definizione come di norma al CSS.
Per eventuali modifiche XINHA, TinyMCE e FCK consentono di passare ad una “modalità codice”, utile ad esempio per aggiungere uno span o l’id ad un paragrafo.

L’Edit-in-place (o in-place editing) è invece una tecnica javascript che consente di rendere un testo direttamente editabile nella pagina in cui si trova: cliccando su un particolare testo quest’ultimo viene inserito in una textarea della stessa grandezza, ed eventuali modifiche vengono inviate al server dopo il click di un bottone di salvataggio. Alcune delle implementazioni: il patriarca Editable Content di Tim Taylor, Edit text di Peter Paul Kock, Ajax in place editor in Script.aculo.us, AJAX Edit in place di Joseph Scott.
L’ EIP si dimostra così utile per semplici modifiche ‘al volo’ che evitano il passaggio dalla classica sezione di amministrazione.

Il WIP nasce, come vi dicevo nel primo paragrafo, da un ragionamento simile ad un sillogismo.
L’azione che descrive l’ editing-in-place può probabilmente essere quella di:

Modify any text with a <textarea>

L’editor HTMLArea aveva come slogan ufficiale:

Turn any <textarea> in a WYSIWYG Editor

Quindi è possibile:

Modify any text with a WYSIWYG Editor

Torna su

Come posso utilizzarlo?

Il WIP è costituito da un unico file javascript che consente di ottenere un edit-in-place sul testo presente in un html utilizzando un editor WYSIWYG e di comunicare le modifiche ad un server.
L’editor con cui ho testato lo script è XINHA, per cui la prima cosa da fare è scaricare l’editor da questa pagina e rinominare la cartella “xinha-nightly” in “xinha”.
Il pacchetto d’esempio wip.zip (scaricabile da qui), contiene lo script wipxinha.js, un HTML+CSS di esempio ed un file send.php che simulerà il lato server.
Tutti i file dovranno trovarsi su un webserver, e la cartella “xinha” dovrà essere inserita all’interno della cartella “wip” (quindi, se testate sul vostro PC il file HTML dovrà trovarsi all’indirizzo “http://localhost/wip/wipxinha.html”, mentre l’editor all’indirizzo “http://localhost/wip/xinha/”).

L’HTML wipxinha.html contiene il seguente codice javascript:

 <script type="text/javascript">
     _editor_url  = "xinha";
     _editor_lang = "en";
     _editor_skin = "green-look";
     </script>
     <script type="text/javascript" src="xinha/htmlarea.js"></script>
     <script type="text/javascript" src="wipxinha.js"></script>

La prima istruzione indica il percorso dell’editor, la seconda la lingua di default di questo, la terza lo stile della toolbar; le ultime due invece richiameranno lo script principale dell’editor ed il WIP.
All’interno dell’HTML saranno modificabili tutti i div che hanno classe “edit”: al passaggio del mouse i div cambieranno colore, mentre con il doppio click comparirà un editor della stessa grandezza del div. Tramite un click sul bottone “salva” il testo riprenderà il formato originario con le modifiche fatte, mentre con un click sul bottone “cancel” ovviamente le modifiche non verranno salvate.

Torna su

Come funziona?

L’oggetto javascript WIP contiene al suo interno sette funzioni: due di inizializzazione, una per l’inserimento del testo in una textarea, una per la trasformazione da textarea ad editor, due per l’invio dei dati al server tramite XMLHttpRequest, una di reset.

Rendere una porzione di testo editabile
Come detto prima, affinchè una porzione di testo sia editabile questa deve essere inserita in un div con classe predefinita: di default il nome della classe è ‘edit’, ma può essere modificata tramite la variabile globale editableClass. I div potranno contenere altri elementi come p, span o altri div (pensate ai vari <div class="post"> nel tema di default di WordPress).


   <div class="edit">
     <p id="test">Paragrafo da editare</p>
     <p id="test2">Altro paragrafo da editare</p>
   </div>

La prima funzione selezionerà tutti questi div presenti nella pagina:

init : function() { 
    var editElements = [];
    var els = document.getElementsByTagName('*');
    var elsLen = els.length;
    var patternEdit = new RegExp("(^|\\s)" + wip.editableClass + "(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
	if ( patternEdit.test(els[i].className) ) {	
	editElements[j++] = els[i]; 
    } 	
    }		
    for(var i = 0; editel = editElements[i]; i++) { 
	wip.prepare(editel);
    }
    } ,

ovvero una versione modificata di un classico getElementsByClass.
Per ogni elemento verrà chiamata una versione prepare con cui all'evento mouseover il div diventerà evidenziato con un colore modificabile tramite la variabile hoverColor; al mouseout il div riprenderà il colore originario (precedentemente salvato utilizzando una funzione esterna getCSSProp); al doppio click, invece, verrà chiamata la funzione che creerà la textarea.

prepare : function(editel) {
	editel.onmouseover = function() {
           bg = getCSSProp(this, "background-color"); 
	   this.style.backgroundColor = wip.hoverColor;
	}
	editel.onmouseout = function() { 
           this.style.backgroundColor = bg;
	}
		editel.ondblclick = function() {wip.edit(this);}
	},

Nell'esempio uno una demo con le funzioni appena viste, nell'esempio due invece un effetto dissolvenza (simile all'ultima demo di scrip.aculo.us) con l'utilizzo della Fade Anything Technique.

Inserire il testo in una textarea
La funzione edit(elem), che non riporto per esteso ma trovate nel terzo esempio, salverà il testo all'interno del div selezionato in una variabile text, memorizzando le proprietà associate al testo tramite la funzione getCSSProp.
Attraverso il DOM sostituirà quindi il div con un form che avrà un id con valore: 1) l'id del div se l'id era presente; 2)uno Unix timestamp con la data al momento del doppio click.
All'interno del form verranno creati: una textarea con all'interno il text salvato in precedenza, un bottone "Save" il cui click scatenerà la funzione send(id, text) ed un bottone "Cancel" collegato invece alla funzione cancel(id, text).
La funzione send invierà il contenuto del testo modificato al server, simulato dal send.php: in questo esempio le istruzioni all'interno del file restituiscono solamente il testo inviato, per cui tutte le modifiche verranno perse al refresh delle pagina; normalmente, invece, un file di questo tipo (o un file ad esso collegato) dovrebbe avere anche il compito di scrivere le modifiche su database.

Sostituire la textarea con l'editor WYSIWYG
XINHA permette di indicare in un file esterno (in questo caso attraverso un paio di funzioni inserite nel nostro javascript) quali textarea saranno sostituite dagli editor, e personalizzare questi ultimi attraverso alcune istruzioni descritte in questa pagina.
L'array xinha_editors conterrà al suo interno i name delle textarea rimpiazzabili con XINHA, così le ultime due istruzioni della funzione edit:


       wip.xinha_editors.push(parid);
       this.startXINHA();

inseriranno nell'array il name, uguale all'id del form, della textarea appena creata attraverso la funzione edit facendo comparire l'editor.

Nella funzione startXINHA() verranno settate le dimensioni dell'editor, uguali a quelle della textarea, e selezionati in due array i bottoni (array cinha_config.toolbar) ed i plugin[1] da inserire nella toolbar.
Come vi dicevo prima, ho inserito solamente i bottoni che modificano la struttura della HTML (bold, italic, ul etc.) ed un plugin che inserisce un bottone per la mappa dei caratteri.

Lo script è stato testato su Firefox ed Internet Explorer, mentre su Opera l'editor XINHA non è ancora supportato.
Ringrazio per le consulenze magister Skid "debugger umano" X, e vi invito come sempre a segnalare eventuali problemi [2]), soprattutto alla crew che opera sull' (a me) oscuro Safari.
Prossimamente tenterò un qualcosa di simile con TinyMCE, che consente di utilizzare uno script di configurazione, mentre dovrei ancora dare un'occhiata a FCK e WYM.

Torna su

Dove posso scaricare il tutto?

Torna su

[1] Ci sono diversi plugin disponibili, più o meno utili a seconda delle esigenze. Uno di questi, InsertSmiley, consente l'inserimento di qualche centinaio di emoticon; sarà che non sono un grande frequentatore di forum, ma non avevo mai visto un'emoticon che rappresentasse così tragicamente la vita di coppia:
0567.gif

[2]Dopotutto mi sono avvalso della regola di Jason Kottke:

The markup is not as semantically clean as it could be, but one of the important lessons I've learned over the years is that a 90% product today is better than a 99% product three months from now.

Altri esperimenti javascript:
An SVG test: change the CS logo colours
Text Changer
Tiny Scrolling
Horizontal Tiny Scrolling
Trackrati
Technorati’s BlogInfo
Is it correct?

]]>
http://www.centralscrutinizer.it/italiano/design/js-php/wip-wysiwyg-in-place/feed/ 60
Conferenza sul web semantico in Italia http://www.centralscrutinizer.it/italiano/internet/semantic-web/conferenza-sul-web-semantico-in-italia/ http://www.centralscrutinizer.it/italiano/internet/semantic-web/conferenza-sul-web-semantico-in-italia/#comments Thu, 14 Dec 2006 18:32:23 +0000 http://www.centralscrutinizer.it/internet/semantic-web/conferenza-sul-web-semantico-in-italia/ swap1.gifUna breve segnalazione per chi segue il web semantico: dal 18 al 20 dicembre (da lunedì a mercoledì prossimi) si svolgerà alla Scuola Normale di Pisa la terza edizione della conferenza “SWAP – Semantic Web Applications and Perspectives“.
In questa pagina trovate il programma; la presentazione “Towards An Architecture for the Global WordNet Initiative”, del mio gruppo di ricerca, avverrà martedì alle 9:30.

]]>
http://www.centralscrutinizer.it/italiano/internet/semantic-web/conferenza-sul-web-semantico-in-italia/feed/ 1
Non avressi voluto, se non ci crederebbi http://www.centralscrutinizer.it/italiano/internet/non-avressi-voluto-se-non-ci-crederebbi/ http://www.centralscrutinizer.it/italiano/internet/non-avressi-voluto-se-non-ci-crederebbi/#comments Fri, 01 Dec 2006 19:38:06 +0000 http://www.centralscrutinizer.it/internet/non-avressi-voluto-se-non-ci-crederebbi/ correct.gifRieccoci. Il cambio di hosting è andato più o meno liscio, considerando che il mio è un dominio “.it”, non supportato da Dreamhost, e quindi ho dovuto cambiare le impostazioni DNS dall’amministrazione di Tophost e aspettare un paio di giorni come ben spiegato in questa guida di ricir (in caso di insuccesso mi sarei attaccato alla caviglia di Jtheo, rassicurante nei commenti).
[a proposito: se qualcuno di voi riceve delle email – e mi rivolgo all’utenza più anziana – che indirizzano ad un sito “www.centralscrutinizerit.it“, con all’interno una pagina per l’inserimento dei dati della vostra carta di credito, fate attenzione perchè si tratta di una truffa.
Io infatti richiedo solo contanti in busta chiusa verso una casella postale, o mi fingo tecnico dell’enel.]
Sempre a proposito del dominio, una delle novità/inutilità con cui mi sono messo subito a giocare sono stati i sottodomini, l’alternativa altolocata alla semplice cartella.
Il primo che vi presento, messo su con il mio collega Maurizio Tesconi, è:

Avete mai provato ad affidare a Google i vostri dubbi sintattici, sperando di trovare un certo di siti che avessero già utilizzato la vostra frase? “Is it correct?” interroga l’API Search di Google e vi da la risposta secca e decisa che aspettavate, con la possibilità di testare 28 lingue diverse.
Beh, naturalmente si tratta sempre di stime aprossimative basate su una percentuale di occorrenza, per cui davanti a “this phrase is Correct!” o “is Wrong!” c’è sempre un “Maybe”.
Update: ho aggiunto i plugin per l’utilizzo con il box dei motori di ricerca (in alto a destra) di Firefox.

Bene, io sono in partenza per il BarCamp di Torino, e questa volta non mi farò trovare impreparato: ho studiato a memoria una serie di domande che il mio prode amico Antonio sarà lieto di riascoltare quando aspetteremo il treno delle 06:25.
Ci vediamo lì, spero di riuscire a postare in diretta (uhm), ma soprattutto di incontrare qualcuno dei miei lettori di passaggio, ovvero uno dei piccoli fans.

]]>
http://www.centralscrutinizer.it/italiano/internet/non-avressi-voluto-se-non-ci-crederebbi/feed/ 6
Dal ‘top-‘ al ‘dream-‘ http://www.centralscrutinizer.it/italiano/blog/this-blog/dal-top-al-dream/ http://www.centralscrutinizer.it/italiano/blog/this-blog/dal-top-al-dream/#comments Wed, 15 Nov 2006 19:14:23 +0000 http://www.centralscrutinizer.it/internet/dal-top-al-dream/ Dopo due anni di onorato servizio, questo blog chiude.

O meglio: probabilmente non sarà raggiungibile per qualche giorno (o una settimana?) visto che ho deciso di spostarmi su un altro hosting, offerto in gran parte dalla ‘platinum utenza’ tal.
Si faticherà a notare la differenza, avrà pensato qualcuno di voi, considerando che il sottotitolo di questo blog è quasi diventato un manifesto produttivo. La gente mi ferma per strada e mi chiede:
“Oh! ma ce l’hai una cartina?? Capo?!” seguito da un: “Come mai aggiorni così di rado?…Sai, non è normale che tu non senta ribollire dentro di te il desiderio di contribuire d’istinto – trasformando i vagiti di uno sterile impulso comunicativo in un gigantesco urlo di gioia, dolore, rabbia, emozioni – alla ‘grande conversazione’. E non è che hai due spiccioli che ti stressano le tasche, amico?! Eh?”
Non so, eppure non ho particolari problemi che mi impediscono di postare regolarmente – rispondo riavvitando la vecchia stampella con la mano finta.
Quando mi trovo su un sito con in fiocchi, però, (credo di non essere il solo) a volte mi viene molto più facile cliccare un tasto su Firefox che aprire l’amministrazione di WordPress: colgo quindi l’occasione per segnalarvi la mia pagina su del.icio.us, ormai da qualche mese allegata al feed Feedburner (che potreste utilizzare al posto di “http://www.centralscrutinizer.it/feed” e fratelli).
Distinti saluti, a fra un pò.

]]>
http://www.centralscrutinizer.it/italiano/blog/this-blog/dal-top-al-dream/feed/ 1
Dal bloginfo al bloginfo http://www.centralscrutinizer.it/italiano/xml/dal-bloginfo-al-bloginfo/ http://www.centralscrutinizer.it/italiano/xml/dal-bloginfo-al-bloginfo/#comments Thu, 09 Nov 2006 14:17:35 +0000 http://www.centralscrutinizer.it/xml/dal-bloginfo-al-bloginfo/ (nota: fingere con nonchalance che siano passate poche ore dal post precedente) Sempre a proposito delle API di Technorati, qualche giorno fa ridavo un occhiata ad un esperimento che feci un anno fa (7 novembre) utilizzando delle semplici chiamate all’API BlogInfo, che restituisce informazioni relative ad un determinato blog (ma anche altri siti, purchè abbiano in entrata un certo numero di link).
La prima domanda che mi sono posto è stata: “Se io lo avrei fatto oggi, come lo riscriverebbi?”

(per l’utenza con feedreader: il form funziona solamente sul blog)

Technorati’s Blog Info

Inserisci qui l’indirizzo del tuo blog:

vai alla homepage di Technorati API

In una frase, ho eliminato la dipendenza dalla libreria DuckSoup (che predispone delle chiamate a tutte le API disponibili), utilizzando lo script PHP bloginfo.php per ‘nascondere’ l’API Key, fare delle query (corrispondenti ad determinati URL) a Technorati e ricopiare la risposta XML (facendo uso di cache su file*) che verrà inviata al Javascript bloginfo.js, il quale farà il controllo degli eventuali tag mancanti ed inserirà le informazioni nell’HTML.

Per chi volesse inserire il tutto in un post del proprio blog, i file sono come sempre disponibili per il

*considerando che il numero limite di query a Technorati è 500, ed ipotizzando che un blogger abbia 300 lettori, ognuno dei quali inserisce due blog dei quali non sono state richieste in precedenza le informazioni relative (quindi potrebbero essere fatte 600 query diverse), la cache è abbastanza (nota: non usare il termine “inutile”) ininfluente.

]]>
http://www.centralscrutinizer.it/italiano/xml/dal-bloginfo-al-bloginfo/feed/ 6
Dal trackback al trackrati http://www.centralscrutinizer.it/italiano/design/js-php/dal-trackback-al-trackrati/ http://www.centralscrutinizer.it/italiano/design/js-php/dal-trackback-al-trackrati/#comments Wed, 25 Oct 2006 18:03:27 +0000 http://www.centralscrutinizer.it/internet/dal-trackback-al-trackrati/ particolare del logo Technorati APIIn un post di una decina di giorni fa, Massimo di DTCM chiedeva alla sua utenza geek:

Ho deciso di mettere il link ai miei trackback su technorati dove prima c’erano i trackback, ovvero a fine post, in basso a destra di fianco al link ai commenti che hanno, tra parentesi, il numero di commenti presenti. Problema: come faccio a farmi dire da Technorati hic et nunc sul mio blog quante persone hanno linkato al mio post, in modo che se ho technorati [0] non clicca e non perde tempo nessuno?

Qualcuno di voi ricorderà che il desiderio di far fuori uno strumento – purtroppo affossato dallo spam – che tenesse traccia delle ‘conversazioni’ come il trackback, sostituendolo con uno servizio esterno alternativo, era già emerso nell’esperimento di Particle Tree “Replacing Trackback with Blog Search“: due script PHP 5 richiedevano al servizio ‘Google Blog Search‘ un RSS con le informazioni relative agli blog che si riferivano ad un determinato post, e queste venivano visualizzate tramite due XSLT e l’allora emergente libreria JS Lightbox in un div al centro della pagina.
Tornando a Technorati (che secondo la mia impressione perde meno post per strada di Google Blog Search) ed al semplice numero dei post linkanti, questa che leggete è la mia proposta, a disposizione di voi tutti nelle due versioni ‘WordPress plugin’ (PHP) ed ‘Ajaxxone’ (PHP + JS).

Versione ‘WordPress plugin’

Download: Trackrati_WP_0.2.zip
Funzionamento: interroga l’API CosmosQuery di Technorati ricevendo in risposta il numero di link relativi ad un post, che inserisce nel template del blog. Una cache su file riduce il numero di query al servizio.
Installazione: Aprite il file trackrati_wp.php, ed inserite la vostra Technorati API Key. Copiate la cartella trackrati_wp (con all’interno trackrati_wp.php e la cartella vuota tracache, che dovrà avere i permessi settati a 777) all’interno della cartella wp-content/plugins di WordPress, e attivate dal menu di amministrazione.
Inserite quindi <?php trackrati(); ?> nella parte del “loop” del template* in cui volete visualizzare un link “Trackrati (n)” ,con n numero di blog linkanti.

Versione ‘Ajaxxone’

Download: Trackrati_0.2.zip
Funzionamento: Il funzionamento di base è identico alla versione precedente, ma viene aggiunto un javascript (kudos al collega Skid X che mi ha risolto un problema di compatibilità dell’ XMLHttpRequest) per quei sistemi di pubblicazione che non consentono di inserire codice PHP all’interno del proprio template. (penso principalmente a Movable Type. So che dalle nuove versioni è supportato il PHP con plugin annessi, ma non sono così deciso nell’addentrarmi in questo software che si avvia verso il viale del tramonto). Visto che la funzione trackrati.init viene richiamata al caricamento della pagina, controllate se all’onload vengono richiamate altre funzioni: in questo caso usate una delle tecniche segnalate in questo post.
Installazione: Aprite il file trackrati.php ed inserite la vostra Technorati API Key. Uplodate la cartella trackrati (con all’interno trackrati.php, trackrati.js e la cartella vuota tracache che dovrà avere i permessi settati a 777). Inserite nel file HTML, o meglio nel template che lo genererà, il riferimento al javascript:
<script language="javascript" type="text/javascript" src="(percorso)/trackrati.js"></script>
e per ogni post fate in modo che compaia questo link:
<a class="trackrati" href="http://www.technorati.com/search/
(permalink)">
trackrati [?]</a>

Non ho fatto molti test a proposito (al contrario della versione sopra, da tre giorni sui due Central Scrutinizer), ma sembra che sui blog in Movable Type questa soluzione funzioni. In ogni caso potete testare, anzi, provare…per credere.

Seguirà dibattito.

*[generalmente nell’ index.php, nei div con class=”postmetadata”, accanto a <?php comments_popup_link(‘No comments »’, ‘1 Comment »’, ‘% Comments »’); ?>.]

]]>
http://www.centralscrutinizer.it/italiano/design/js-php/dal-trackback-al-trackrati/feed/ 7
Ir BarHamp http://www.centralscrutinizer.it/italiano/internet/ir-barhamp/ http://www.centralscrutinizer.it/italiano/internet/ir-barhamp/#comments Mon, 16 Oct 2006 18:31:57 +0000 http://www.centralscrutinizer.it/internet/ir-barhamp/ particolare logo BarHampSe dopo Milano è arrivato quello di Torino e da qualche giorno Roma, ne manca solo uno: il BarCamp di Firenze, BarHamp.
Io do il mio patrocinio prima di creare il wiki (e dimenticando di essere ad un’ora di distanza da lì), ma ho già ben chiara in mente la grande innovazione del nuovo evento geek: verranno introdotte le quote rosa.
Una decisione drastica, ma è in gioco la sopravvivenza della specie.

Update: sono stato letteramente sommerso da richieste provenienti da tutta Italia per la patrocinazione di un evento a due passi dal vostro PC. Per gli amici emiliani, così, do il mio benestare per il BarCarpi, in una nota culla del webdesign, mentre scendendo verso sud per il BarCampania, l’unconference napoletano, e per il Baricamp, organizzabile dagli internettiani della Puglia.

(notare quanto mi discosti dai luoghi comuni nella scelta dei loghi)

]]>
http://www.centralscrutinizer.it/italiano/internet/ir-barhamp/feed/ 11
Net System Security http://www.centralscrutinizer.it/italiano/internet/net-system-security/ http://www.centralscrutinizer.it/italiano/internet/net-system-security/#comments Mon, 16 Oct 2006 09:24:47 +0000 http://www.centralscrutinizer.it/internet/net-system-security/ particolare del poster di Net System SecurityPer gli appassionati di sicurezza segnalo che domani 17 ottobre (dalle 8 e 30 circa) si svolgerà nei locali del CNR di Pisa l’evento Net System Security, “un momento d’incontro tra le aree che caratterizzano il mondo dell’Informatica (Ricerca, Università, Studenti, Mondo del Lavoro, Tecnici) in cui sia possibile il confronto sulla sicurezza informatica, approfondendo le tematiche attuali, ed esaminando le ultime tecnologie”.
Qui il modulo per la pre-registrazione e qui il programma, dove credo sia da non perdere la tavola rotonda sul “Diritto d’autore e Digital Rights Management” (15:00) e l’intervento “Mobile Security” (16:00 aula D) [anche se sono abbastanza curioso di vedere all’opera l’oratore che, riguardo al “Social Engineering” (16:00 aula C), si è firmato ‘ipnotista’].

]]>
http://www.centralscrutinizer.it/italiano/internet/net-system-security/feed/ 1
BzaarCamp http://www.centralscrutinizer.it/italiano/internet/bzaarcamp/ http://www.centralscrutinizer.it/italiano/internet/bzaarcamp/#comments Wed, 04 Oct 2006 16:21:30 +0000 http://www.centralscrutinizer.it/internet/385/ bzaar1.gifProbabilmente ultimo fra gli ultimi, questo è il mio post dedicato al BzaarCamp di Milano, riguardo al quale non posso che dirvi che si trattava di una di quelle occasioni, e lo dico a voi appassionati di web che non eravate presenti ma soprattutto a quelli che avevano già lo zaino pronto ma per un imprevisto dell’ultimo minuto hanno perso il treno che hanno visto allontanarsi davanti ai propri occhi, capitano una sola volta nella vita. E l’occasione è già passata.
(la gente infierisce sempre senza accorgersene? Non so, ad esempio io non ho la televisione e sento ogni tanto il mio coinquilino della camera vicino che ride apposta verso il muro dicendo “Ah ah ah! Erano anni che guardavo un programma così divertente!!”. Sgrunt. E io mi accendo la filodiffusione, tiè.)
In ogni caso, comunque, si prospetta tra circa due mesi un BarCamp a Torino ed un nuovo BzaarCamp di due giorni in una nuova locazione, probabilmente un agriturismo toscano: la prima vera UnConf?
Ritornando al meeting milanese, ho avuto il piacere d’incontrare dal vivo alcuni nomi noti, rivedere vecchi miti, e scambiare opinioni, pettegolezzi e battute con geek italici prima sconosciuti che non ho mancato di aggiungere subito nell’aggregatore.
Il clima nella sede dell’Apogeo mi ricordava quello delle occupazioni alle superiori, quando si attaccavano tutti i banchi alle pareti e nelle classi si improvvisavano i corsi di chitarra, di ballo funky o di judo, ed ognuno poteva sentire l’ebrezza di condividere una passione con gente attenta, interessata e partecipe. Stavolta non hanno picchiato nessuno, però.
[Era da un sacco di tempo che non partecipavo ad un raduno di blog, probabilmente dal BlogRage di Firenze di tre anni fa in cui mi presentai (a sx) munito di maglietta taroccata di Personalità Confusa (che a quei tempi veniva venduta moltissimo)(vi spiego: si pensava ancora che fosse una donna) e l’inconscienza che la bocciatura all’esame di qualche giorno dopo avrebbe radicalmente cambiato la mia vita universitaria. (in peggio, vedi riga seguente)
Ora invece (a dx) l’entusiasmo si è pian piano affievolito ed alla prossima occasione mi presenterò probabilmente con il riporto.]
Ma tornando alle mini-presentazioni seguite da una costruttiva discussione in cui tutti, almeno una volta, hanno avuto la loro parola – c’era una cosa a cui pensavo in treno durante il viaggio di ritorno.
Il buon Bru, organizzatore dell’evento (assieme al prode Jtheo), ammoniva nel suo blog qualche giorno prima:

5. no lurkers: sì, se partecipi, preparati una presentazione (in alternativa puoi tenere una conversazione, una sessione di tai chi o di ikebana… ;) )

Io non solo non ho sfruttato l’occasione di poter presentare un qualcosa ma, sarà che sono abbastanza timido (questo è un particolare per le mie lettrici, che molti sanno costituire l’80% degli utenti di questo blog)(sì F.., ho ricevuto il tuo cellulare stamattina… ma io intendevo solo il tuo numero, eh), non do confidenza agli estranei (cioè, magari reputi un blogger molto in gamba e vi commentate a vicenda per anni, poi lo incontri dal vivo e all’improvviso ti conficca nel costato una penna usb), e ci penso sempre dieci volte prima di dire qualcosa (ho incominciato a scrivere questo post domenica mattina) – ecco, non mi è venuto da dire assolutamente nulla.

Beh, in effetti pensandoci bene la mia non è stata una manifestazione di assoluto mutismo, e per dimostrarlo riporto qui il mio intervento integrale, in esclusiva per voi:

Segue podcast.

]]>
http://www.centralscrutinizer.it/italiano/internet/bzaarcamp/feed/ 3
I “Web 2.0 ‘exit strategy'” badge http://www.centralscrutinizer.it/italiano/internet/i-web-20-exit-strategy-badge/ http://www.centralscrutinizer.it/italiano/internet/i-web-20-exit-strategy-badge/#comments Thu, 28 Sep 2006 11:06:14 +0000 http://www.centralscrutinizer.it/internet/i-web-20-exit-strategy-badge/ badj.gifTra circa un mese e mezzo si svolgerà a San Francisco la terza conferenza dedicata al Web 2.0, un luogo favorevole ad una discussione, in termini pragmatici, sull’esistenza o meno di una Bolla 2.0.
Con l’affermazione definitiva di blog, podcast, wiki, video e photo sharing, social bookmarking e tutti gli altri strumenti che valorizzano il singolo utente come una parte ‘attiva’ della rete, la continua creazione-condivisione-fruizione di contenuti viaggia ad un ritmo elevato come la crescita del numero di servizi che la supportano. Come ai tempi della ‘new economy’, infatti, ogni settimana nascono decine di startup (più di 300 negli ultimi due anni, e Go Web 2.0 e Categoriz ne danno dimostrazione) pronte a richiamare l’attenzione degli utenti su di un servizio innovativo, e storie di successo da copertina e acquisizioni miliardarie non fanno che aumentare la portata del nuovo boom: rispetto a cinque anni fa, inoltre, i costi per l’hardware e software sono nettamente inferiori, e il servizio offerto stavolta è un qualcosa di ‘tangibile’.
Il successo di ogni nuovo servizio, qualora si fosse dimostrato realmente diverso da tutti gli altri, potrebbe tuttavia decretarne la fine: dove mancano i Venture Capitals e/o la pubblicità non riesce a coprire le spese di banda, proporzionali ovviamente al traffico, l’unica scelta di sopravvivenza rimane la vendita ad un grosso gruppo. Una scelta vantaggiosa sin dall’inizio, tant’è che molte startup nascono al solo scopo di essere acquisite, talvolta creando un software compatibile con applicazioni di una grande azienda già esistenti.
Massimo Moruzzi di DTCM, in un post di qualche settimana fa, disse:

E’ una bolla, e non c’è altra exit strategy che vendere a Google o a Yahoo! – o a Murdoch, o a tanti altri, a dire il vero – e se Google o Yahoo! decidono di farselo in casa, sei fregato. A quelli di Writely per qualche strano motivo è andata bene, ma lo spreadsheet invece se lo sono fatto a Mountain View. E il calendario, pure. E Kiko ha dovuto mettersi in vendita su eBay.

Anche con un exit-strategy di questo tipo, in ogni caso, il problema rimane quello di emergere dal mare della concorrenza, e puntare allo stesso tempo con sicurezza al proprio obbiettivo.

E’ a questo punto che una pedina fondamentale di una startup web, il grafico, può dare il suo contributo decisivo per la salvezza.

Come abbiamo ormai imparato le interfacce delle applicazioni Web 2.0 sono definite da un proprio stile caratterizzato da gradienti, ombre, colori pastello, angoli arrotondati e “badge”, i distintivi a stella che campeggiano nell’header di ogni homepage.
I badge costituiscono l’elemento chiave di questo tipo di design essendo il primo a balzare agli occhi del visitatore, e quindi importante per l’efficace comunicazione di un messaggio di fondamentale rilevanza.
Qui di seguito trovate una serie di badge d’esempio suddivisi per quattro livelli incrementali, relativi ognuno ad un diverso modello di business.

Livello 1




Livello 2




Livello 3




Livello 4


[nuovi badge? “cease and desist”? scrivimi.]

]]>
http://www.centralscrutinizer.it/italiano/internet/i-web-20-exit-strategy-badge/feed/ 17
L'”album per ritagli” /2 http://www.centralscrutinizer.it/italiano/design/lalbum-per-ritagli-2/ http://www.centralscrutinizer.it/italiano/design/lalbum-per-ritagli-2/#comments Tue, 05 Sep 2006 17:31:15 +0000 http://www.centralscrutinizer.it/design/lalbum-per-ritagli-2/ Helvetica divanoIl cielo grigio oltre la finestra sembra trattenere a stento i raggi di luce che accompagnano i passi di quella vecchina laggiù, oltre le tubature dell’edificio 11. La vedo trascinarsi stanca, mentre il vento corre verso di lei lungo la strada deserta e la investe facendole tremare le braccia già tese e affaticate dal peso delle tre buste del martedì, traboccanti di scatole di cibo per gatti .
Alzando di poco il viso getta lo sguardo verso il suo portone, da cui la separano una decina di metri che impegnerà a frugarsi nella borsa alla ricerca delle chiavi, tra una speranza e l’altra di ritrovare in casa -seduto sulla poltrona che gli piace tanto – suo figlio F., che non sente da almeno vent’anni. Quand’ecco che, con uno schianto, il portone si spalanca e due figure sbucano sugli scalini mentre la vecchia, con gli occhi sbarrati, non può fare altro che gettare le buste a terra e stendere le braccia in un gesto strozzato e non riuscire ad emettere nessun suono inseguendo solo con lo sguardo il suo televisore -amico, compagno- aggrappato alle braccia dei due, che come in una scena rivissuta tante volte aprono la macchina affiancata a poca distanza dal marciapiede e infilano l’apparecchio nel portabagagli, mentre la vecchina si guarda intorno in cerca di qualcuno e si accovaccia respirando il fumo di quella macchina -targata con un solo numero differente dall’utilitaria di mia sorella- cercando di spedire soffocato un piccolo gesto di aiuto verso quello stesso cielo grigio che…Ah, uh, cos’è questo rumore? – ecco, meno male: il portatile si è riacceso.
Certo che oggigiorno i riavvii fanno sempre perdere un sacco di tempo utile, acciderbolina.

Come vi dicevo la volta scorsa, ogni tanto è di buon uso dare un’occhiata alla fitta colonna di iconcine e link recuperati da mesi fatta comparire dalla magica estensione Scrapbook. Cliccandoci a caso… :

– Il web design si tinge di #F3A0C7 con CSS Princess – o meglio, PrinCSS – una selezione di creazioni web tutte al femminile, ispirato in qualche modo alla rubrica Powergirrrls di Netdiver.
Bene. Avete presente Programmers meet Designers? E se i programmatori uomini (ehm, il 99%?) volessero incontrare proprio le designers di sopra? Io creerei un qualcosa tipo ProgramMANs meet DesignHERs.

programmatore A: “Oh, ieri sono uscito con quella tipa che ho conosciuto in quel sito di cui ti parlavo ieri”
programmatore B:”Embè, carina?”
programmatore A: “Macchè, era un css.”

Finanziatori?

– A proposito di gallerie, negli ultimi tempi ho notato in CSS Beauty uno strano proliferare di siti -come dire… – divini. O meglio, riguardanti l’ambiente ecclesiastico. Una sorta di filone del genere è una realtà come dimostra Church Beauty, una galleria che descrive il modo in cui le chiese straniere si presentano davanti a un bacino di utenza impossibile da sottovalutare: riguardo al mio credo “worn look” vi segnalo Watermark, Betlemeth e Genesischurch.tv.
(A questi vorrei aggiungere quello che secondo me [non mi ricordo se ve l’ho detto] è il sito più bello del 2005: Generation Church.)
A volte mi chiedo se una simile strategia di marketing (se questa è la parola giusta) potrebbe funzionare qui in Italia, e se mai un giorno la voce del pretino di periferia – di quelli che probabilmente conosce i fedeli uno ad uno – potrà mai essere ascoltata da chi in chiesa non può andarci tramite podcast (qui uno dei tanti esempi) o videocast ignorando la distaccata messa in mondovisione su raiuno.
[Update:vedo ora che i monaci del monastero di S.Vincenzo Martire mettono a disposizione, per chi è interessato, la Liturgia della Settimana in formato RSS, WAP ed email (con script per l’inclusione).]
Nel frattempo tra i ricchi papiri della Santa Sede striscia famelico, nascosto tra le grinfie dell’hover del menu con i cerchi, proprio lui: il Demonio.

-Qualche giorno fa mi sono iscritto per curiosità nel pittoresco mondo di Yahoo! Answer. Per chi non lo conoscesse si tratta di un gioco basato su di un sistema di domande e risposte con punteggi e dei livelli: ad esempio ogni utente parte con 100 punti, a chi fa una domanda vengono detratti 5 punti e chi risponde ad una domanda di un’altro utente ne riceve 2 o 10 se la risposta è ritenuta la migliore tra quelle inviate; dopo un certo numero di punti accumulati si passa al livello successivo.
Pare che solo 137 utenti siano riusciti ad arrivare al livello 7, il più alto. Un utente ambizioso chiede: “Quanti giorni (occorrono) per il livello 7?” supponendo di rispondere al massimo a 50 domande al giorno.
Un utente al livello 6 fa il suo calcolo: occorrono solo 56 giorni per arrivare in cima.
Dai, non sembra impegnativo. Proviamo anche noi: allora, prima domanda.

-50 anni, e le D mostra: il font che ha invaso le nostre vite, vanta numerosi tentativi di imitazione, riesce sempre
a fare la differenza, non teme confronti ha ora un proprio blog ed un film in uscita.

(continua…)

]]>
http://www.centralscrutinizer.it/italiano/design/lalbum-per-ritagli-2/feed/ 10
“Io ce l’ho orizzontale…” http://www.centralscrutinizer.it/italiano/design/io-ce-lho-orizzontale/ http://www.centralscrutinizer.it/italiano/design/io-ce-lho-orizzontale/#comments Wed, 05 Jul 2006 19:02:19 +0000 http://www.centralscrutinizer.it/design/io-ce-lho-orizzontale/ Particolare del sito The Horizonta WayPer introdurre l’argomento di questo brevissimo post mi auto-citerò tre volte:

[…]Ma mi chiedo ancora: perchè ancora cosi pochi hanno utilizzato o utilizzano i template orizzontali[…] (23 gennaio)

[…]Senza perdermi d’animo ne ho approfittato per: 1)cominciare un nuovo progetto basato su una piccola fissazione di cui vi accennai tempo fa;[…](21 marzo)

[…]Vedremo di esplorare più in dettaglio il piccolo mondo dei layout orizzontali in qualche post futuro, […](31 marzo)

No, Python e IPv6 non c’entrano. Neanche l’effetto Digg applicato al rapporto di coppia. L’eterna rivalità “bloggers contro fisioterapisti”? Un pò fuori strada.
Con un ritardo di alcuni mesi sulla tabella di marcia (quando ho cominciato a farci un pensierino c’era sicuramente ancora in carica Ciampi) (come presidente del consiglio, dico), è giunta l’ora di chiedere il vostro parere su:


Il sito si spiega da se, per cui non mi perderò in chiacchiere: ho raccolto finora una trentina di siti orizzontali – html (con tabelle innestate e CSS) e flash – e ho creato un blog dedicando ad ogni sito linkato un paio di innocue osservazioni su layout, script aggiuntivi e altre particolarità di interesse per la costruzione di un sito orizzontale ‘ideale’.
Ho messo inoltre a disposizione un template completo di script da scaricare (una versione aggiornata dell’esempio incluso nel Horizontal Tiny Scrolling) ed ovviamente un feed da conservare con cura.
Consideratela come al solito una versione “pre-alpha-sgarrupata” anche perchè:
1)Non ho fatto test con altri browser oltre IE 6, Firefox 1.5 ed Opera (per cui ad esempio i 2+ Safaristi all’ascolto sarebbe pregati di fare un cenno in caso di malfunzionamenti)
2)I commenti che scorrono in verticale all’interno di un div con un overflow: auto che fa comparire la barra verticale (beh, ora non si vede perchè non ci sono commenti) sono una soluzione temporanea; in realtà avevo in mente di disporre i commenti in più colonne utilizzando le apposite proprietà CSS3 usufruendo del supporto nativo in Firefox 1.5 e questo script per gli altri browser – ma ci sono dei grossi problemi nella gestione di una larghezza orizzontale che sicuramente varierà da post a post.
3)Rattoppi vari imperversano nei vari CSS e JS.
4)Qualcuno mi ha detto (ma la fonte non è molto certa) che ha spedito il link a 4 amici raccomandandogli di farlo pervenire in busta chiusa ad altri 5 amici. Uno di questi, Nadario Adrupal di Bogotà, si è dimenticato di farlo ed il giorno dopo è stato colpito da un fulmine mentre… ah no, scusate. Mi stavo confondendo con il lavoro

Update 17/07: quasi tutti i problemi sono stati risolti. (l’ultima volta che ho detto questa frase la ventola del pc è sbalzata fuori volando fino in cucina)

Per la fase di testing ringrazio Antonio, Hyle, Skid X, andreaxmas e Valeria, che credo più volte siano stati sfiorati da un: “Ehi, ma i siti orizzontali sono accessibili ed usabili?”, il dubbio principe.
Ne parleremo in uno dei prossimi post, intanto qualcuno si è posto la stessa domanda sulla lista accesoweb.

]]>
http://www.centralscrutinizer.it/italiano/design/io-ce-lho-orizzontale/feed/ 98
La X di JSON – seconda parte http://www.centralscrutinizer.it/italiano/xml/la-x-di-json-seconda-parte/ http://www.centralscrutinizer.it/italiano/xml/la-x-di-json-seconda-parte/#comments Sun, 04 Jun 2006 18:08:25 +0000 http://www.centralscrutinizer.it/xml/la-x-di-json-seconda-parte/ jlogo.jpgQuesta è la seconda parte di una serie di tre post dedicati a JSON, un formato javascript per la descrizione e lo scambio di dati. Nella prima parte abbiamo visto il raffronto tra la sua sintassi e quella dell’XML, campione in carica nella stessa categoria; oggi invece si parlerà di alcune differenze specifiche tra i due formati soffermandoci in particolare sul loro ruolo nell’ interazione client-server.(con degli esempi da scaricare)

JSON sfida XML

JSON povrebbe avere le carte in regola per scalzare XML? Per avere qualche risposta ho dato uno sguardo alla ‘comparazione ‘ufficiale’ sul sito JSON, ad un raffronto indiretto di Peter-Paul Koch, alla pagina ‘messaggi JSON’ su AjaxPatterns e ad alcuni miei appunti presi su uno scontrino mentre rivedevo il post precedente.
Prendiamo come punto di partenza la frase:

It (JSON) is easy for humans to read and write.

Ne siamo davvero sicuri? E’ vero sia le ‘Persone’ – ovvero gli sviluppatori che creeranno, leggeranno e modificheranno i dati – che per i ‘Software’, ovvero le applicazioni lato server e client che i dati li dovranno generare o processare?
Creazione del codicePersone: Sono opposti due diversi modi di scrivere del codice: un linguaggio di markup (come XML) si scontra con un linguaggio di scripting (come Javascript).
Aprire e chiudere dei tag seguendo la giusta gerarchia è probabilmente più immediato che rispettare l’apertura e la chiusura di numerose parentesi graffe, quadre e tonde.
Tuttavia, un codice JSON risulta più snello sotto due aspetti:

~ La ridondanza nella descrizione dei nomi, ovvero il contenimento di dati tra tag aperti e chiusi:

    <colore>giallo</colore>

è sostituita da delle semplici coppie nome valore:

   "colore": "giallo"

~ Due o più elementi con lo stesso nome:

    <colore>magenta</colore>
    <colore>porpora</colore>
    <colore>verdognolo</colore>

possono essere ricompattati in un array:

    "colori": ["magenta","porpora","verdognolo"]

Estese queste regole ai vari oggetti e coppie nome/valore al loro interno, la sintassi JSON risulterà senza dubbio più leggera di quella XML. Secondo il mio punto di vista, però:

~ Oltre il terzo livello di innestamento – l’elemento radice possiede al suo interno almeno un elemento ‘nipote’ – ricomporre la gerarchia degli oggetti diventa molto complicato. (Vedi ad esempio il primo raffronto in questa pagina).

~ Come già detto la volta scorsa, JSON non ha uno DTD o uno schema che regoli la struttura del documento come accade con l’XML. Non esistono quindi delle regole su come gestire ad esempio gli attributi e gli elementi ‘mixed content’, ovvero quelli che hanno contemporaneamente come figli sia del testo che altri elementi.
La gestione degli attributi avviene rappresentandoli come il primo figlio di un elemento, annullandone quindi il ruolo di metadato associato a quel particolare elemento.
Riguardo ai ‘mixed content’, qualche giorno fa D. Crockford ha suggerito ad un tipico lamer logorroico (ma di sicuro dotato di un discreto fascino) di creare un figlio di nome “content” ed associargli il valore del testo inserito all’interno dell’elemento. Un’altro esempio è dato dalla ‘”serializzazione JSON del risultato delle query” in SPARQL, un linguaggio di interrogazione di RDF (a sua volta uno standard per la descrizione di metadati sotto forma di grafi) in cui il contenuto di un elemento è identificato dal nome “value”.

Software: Un qualsiasi linguaggio lato server non servirà che ad automatizzare – semplificandolo – il lavoro dello sviluppatore, per cui le differenze sono le stesse di sopra.

Lettura del codicePersone: Un codice dev’essere leggibile agli ‘umani’ soprattutto per venire incontro allo sviluppatore stesso che dovrà provvedere ad un eventuale debugging. Riguardo l’XML è sicuramente facile capire a prima vista la gerarchia di un documento, e in questo sono di aiuto Mozilla ed Explorer che forniscono un’indentazione automatica nel rendering dei file. (potete provare con qualsiasi feed RSS)
Con JSON, invece, il debugging si fa davvero duro: a volte il javascript può essere generato in modo comprensibile, come ad esempio nei traduzione feed RSS trasformati in JSON da John Resig , alle volte invece generato in modo da comparire in una sola riga come ad esempio nelle API Yahoo.

Software: Avete mai sentito parlare di ‘Rich Internet Applications’? Fino a poco fa ero sicuro avesse a che fare con la new-economy durante la bolla speculativa, oppure quel tizio che è riuscito a vendere dei pixel a peso d’oro. Mannaggia, nulla di tutto questo: si tratta di un modo di concepire applicazioni web spostando una parte del carico di lavoro del server verso il lato client allo scopo di velocizzare le prestazioni globali. Uno di questi compiti potrebbe essere quello di analizzare e riutilizzare le informazioni provenienti dal server, direttamente tramite il browser, utilizzando alcuni linguaggi lato client come JavaScript.
Con l’XML questo può essere fatto in due modi:
1) Si compie il parsing dell’XML, ovvero si prepara una struttura dati modificabile attraverso il Document Object Model (DOM). Ottenuti i vari valori sarà possibile quindi creare dinamicamente degli elementi HTML.
2) Si utilizza l’ XSLT, un linguaggio di markup (è XML infatti) che trasforma un documento XML in qualsiasi altro formato (come HTML, SVG, PDF) selezionandone i nodi attraverso un linguaggio chiamato XPath. Il parsing e il controllo delle trasformazioni viene fatto in Mozilla dall’ XSLT Processor, mentre in Explorer da un apposito ActiveX (MSXML2-3); due librerie js che consentono di richiamare facilmente entrambi sono Sarissa ed il più recente Freja (è disponibile anche progetto targato Google dal nome AJAXSLT che addirittura emula il funzionamento dei due processori in javascript, ma è stato messo in stand-by dallo stesso autore che consiglia nel frattempo i due framework menzionati prima).

Utilizzando JSON, invece, tutto diventa meno complicato. Il parsing è fatto da un unica funzione di nome eval(): questa consente di eseguire qualsiasi stringa passata come parametro allo stesso modo di un normale codice javascript. In questo caso trasformerà un messaggio JSON in un oggetto Javascript facilmente utilizzabile dal DOM.
La funzioneeval(), tuttavia, non gode di una buona fama a causa della sua potenziale pericolosità: non c’è nessuna garanzia che la stringa non contenga delle funzioni che, eseguite nel nostro browser, possano provocare dei danni. Per questo motivo Crockford ha rilasciato una libreria che consente di fare il parsing dei JSON senza l’utilizzo di eval() e di convertire, viceversa, un oggetto Javascript in un testo JSON.

Se posso trarre una prima breve conclusione dai paragrafi sopra:
1) JSON non raggiungerà mai XML nel contenimento e nella descrizione dei dati.
L’estensibilità (la “X” di JSON) esiste fino ad un certo punto, e vedo molto difficile l’affidarsi ad un formato così complicato per la gestione di enormi quantità di dati. Il primo esempio che mi viene in mente è un ‘dizionario di italiano’ costituito da migliaia di elementi, ad ognuno dei quali sono associati dei metadati che ne completano il significato e collegamenti a molti altri elementi. Una struttura del genere potrebbe essere ipoteticamente descritta da un grafo RDF, che ha proprio come sintassi ufficiale l’XML.
2) JSON sembra invece una buona alternativa ad XML nel trasporto dei dati.
O meglio, nel trasporto di piccoli dati che potrebbero ad esempio provenire da risposte a delle query.
Vediamo subito qualche esempio ‘asincrono’ a proposito.

Torna su

AJAX o AJAJ?

Nella sezione precedente si accennava un “interazione veloce tra client e server”: il maggiore artefice del risultato, come un pò tutti sanno, prende il nome di XMLHttpRequest ed il suo utilizzo ha spiccato il volo un anno fa grazie ad una azzeccata operazione di branding tecnologico. L’ oggetto javascript in questione consentire di inviare richieste HTTP ad un server senza attendere una risposta relativa ad un invio precedente, come invece avviene nel normale flusso di comunicazione.
Approssimativamente lo scambio di informazioni avviene in questo modo:

  1. creazione dell’oggetto XMLHttpRequest
  2. apertura di una connessione tramite una funzione open con parametri il metodo HTTP (get,post, put…), l’URL della risorsa richiesta e una variabile booleana relativa all’asincronismo
  3. chiamata di una funzione al ricevimento della risposta da parte del server
  4. invio del corpo della richiesta

Il tutto può essere tradotto in codice (metodo GET) in questo modo:

var xmlhttp = (window.XMLHttpRequest)? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET", "http://musicsite.buz/song.php?id=332", true);
xmlhttp.onreadystatechange = handle;
xmlhttp.send(null);

function handle() {
   if (xmlhttp.readyState == 4) {
    if (http.responseText.indexOf('invalid') == -1) {
       var resp  = xmlhttp.responseXML;
       //e una serie di operazioni....  
   }
}

Tralascio volontariamente alcune particolarità (tempi di attesa, gestione dell’header, assegnazione cross-browser specifica, altri metodi HTTP etc.) per far luce su quello che ci interessa maggiormente, ovvero la risposta che arriverà dal server. Questa può essere identificata da due parametri diversi: responseXML, che contiene l’albero DOM ottenuto dal parsing del file XML originario compiuto dall’XMLHttpRequest; responseText, che rappresenta invece un parametro associato ad una risposta di tipo stringa e può essere utilizzato – come in questo caso – per testare un eventuale presenza di errori in ricezione.

Supponiamo che il server, tramite questo semplice script PHP, ci metta a disposizione una serie di dati (un paio di informazioni su una canzone) in due formati: XML e JSON .
Vogliamo quindi stampare le informazioni nella nostra pagina HTML inserendole in una lista di questo tipo:

  <dl class="song">
    <dt>titolo canzone</dt>
    <dd>Performed by: nome gruppo </dd>
    <dd>Published in: anno</dd>
  </dl>

Proviamo a farlo utilizzando i tre metodi visti nella sezione precedente: XML+DOM, XML+XSLT, JSON+DOM.
Con il primo e con il terzo metodo tramite il DOM verranno creati nuovi dei nodi HTML in cui saranno inserite le informazioni prese dalla risorsa. Con il secondo metodo, invece, gli stessi elementi HTML saranno creati direttamente con l’XSLT.

XML+DOM – Chiediamo al server i dati in formato XML:

<song>
   <title>Birdman</title>
   <group>McDonald and Giles</group>
   <year>1971</year>
 </song>

La funzione handle, con cui manipoleremo l’oggetto DOM ottenuto grazie all’XMLHttpRequest, sarà la seguente:

function handle() {
   if (xmlhttp.readyState == 4) {
    if (xmlhttp.responseText.indexOf('invalid') == -1) {
      var resp = xmlhttp.responseXML;
      var dlist = document.createElement('dl');
      dlist.className = 'song';
      var title = document.createElement('dt');                  
  title.appendChild(document.createTextNode(resp.getElementsByTagName('title')[0].firstChild.nodeValue));
     dlist.appendChild(title);
     var group = document.createElement('dd');
     group.appendChild(document.createTextNode('Performed by: ' + resp.getElementsByTagName('group')[0].firstChild.nodeValue));
     dlist.appendChild(group);
     var year = document.createElement('dd');
     year.appendChild(document.createTextNode('Published in: ' + resp.getElementsByTagName('year')[0].firstChild.nodeValue));
     dlist.appendChild(year);
     document.getElementById('content').appendChild(dlist);
	}
}


Accedere ad uno dei valori (ad esempio, title) non è così diretto: si seleziona la radice dell'albero, ovvero responseXML; si cerca al suo interno il primo tag di nome 'title'; si seleziona il primo nodo figlio e si prende il suo valore. La verbosità aumenterebbe se nel documento ci fosse, ad esempio, un tag di nome 'album' che contiene al suo interno un'altro tag di nome 'year'. Per accedere ad valore all'interno del nostro 'year' appartenente a 'song' bisognerebbe specificare meglio il percorso con un'ulteriore precisazione:

xmlhttp.responseXML.getElementsByTagName('song')[0].getElementsByTagName('year')[0].firstChild.nodeValue. 

Argh!

XML+XSLT - Avremo bisogno inizialmente di un foglio di stile XSLT (che ho chiamato stylesheet.xsl) che trasformi l'XML in HTML.
Il file contiene al suo interno questo codice:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
 <dl class="song">
    <dt><xsl:value-of select="//title"/></dt>
    <dd>Performed by: <xsl:value-of select="//group"/></dd>
    <dd>Published in: <xsl:value-of select="//year"/></dd>
  </dl>  
</xsl:template>
</xsl:stylesheet>


In questo caso la selezione dei nodi tramite XPath è stata immediata.
Se vogliamo fare una trasformazione lato client utilizzando il framework Freja, la funzione handle non è più necessaria. Freja si preoccuperà di inizializzare l'XMLHttpRequest e richiamare il processore XSTL: basterà indicargli solo la sorgente XML, l'XSLT e l'elemento nella pagina HTML in cui vogliamo 'appendere' il risultato.

var source  = new Model('../resource.php?type=xml');
var stylesheet = new View('xslt/stylesheet.xsl');
Controller.onLoadComplete = create;
Controller.loadAssets();

function create() {
  Controller.render(source, stylesheet, { placeholder: 'content' });
}

Le prestazioni dei fogli di stile XSLT crescono all'aumentare dei livelli gerarchici da gestire, per cui costituiscono la soluzione ideale (assieme ad XQuery, ma meglio non divagare) per la gestione dei dati XML. Per i gruppi di dati più piccoli come nel nostro caso, però, rimane forse consigliata la creazione dei nodi HTML tramite la funzione del metodo precedente. Come si dice in questi casi: il gioco non vale la cHandle.

(ehm....andiamo avanti)
JSON+DOM - Chiediamo ora al server i dati in formato JSON:

{ "song": { 
  "title" : "Birdman",
  "group" : "McDonald and Giles",
  "year" : 1971 
  } 

La creazione dell'XMLHttpRequest e la funzione handle saranno di nuovo necessari.

function handle() {
   if (xmlhttp.readyState == 4) {
    if (xmlhttp.responseText.indexOf('invalid') == -1) {
     var resp = eval('(' + xmlhttp.responseText + ')');
     var dlist = document.createElement('dl');
     dlist.className = 'song';
     var title = document.createElement('dt');                  
     title.appendChild(document.createTextNode(resp.song.title));
     dlist.appendChild(title);
     var group = document.createElement('dd');
     group.appendChild(document.createTextNode('Performed by: ' + resp.song.group));
     dlist.appendChild(group);
     var year = document.createElement('dd');
     year.appendChild(document.createTextNode('Published in: ' + resp.song.year));
     dlist.appendChild(year);
     document.getElementById('content').appendChild(dlist);
    }
}

Come detto prima, la funzione eval() fara il parsing della stringa JSON restituendo un oggetto javascript. Accedere agli elementi all'interno dell'oggetto sarà molto più semplice che analizzare l'albero DOM ricavato dall'XML. Se rifacciamo l'esempio di un ipotetico tag 'year' presente in un'altra sezione del codice sorgente, il valore dell' year' all'interno di song sarebbe ottenibile in questo modo:

eval('(' + xmlhttp.responseText + ')').song.year

ovvero come nell'handle.

Altre alternative - 1) Si può utilizzare per entrambi i formati, al posto del DOM W3C, il non-standard ma molto efficace innerHTML : xmlinnerhtml.js & jsoninnerhtml.js.
2) Si possono richiedere al server i dati formattati direttamente in HTML, avendo quindi la possibilità di inserendoli in un lampo nella nostra pagina. In questo caso, però, si va un pò fuori tema.

I tre esempi sono naturalmente disponibili per il download.

Una conclusione lessicale: sappiamo tutti che AJAX è l'acronimo di "Asynchronous Javascript and XML". Sostituendo l'XML con il JSON l'acronimo diventerebbe AJAJ, "Asynchronous Javascript and Javascript" - ma nel caso che abbiamo visto resterebbe un gioco un'altro XML, quello dell'XMLHttpRequest.
Come abbiamo visto, eval può fare il parsing di JSON ed in questo modo rendere l'uso dell'XMLHttpRequest quasi del tutto superfluo .
Questo, unito all'On Demand Javascript, i feed e le API JSON, sarà l'argomento della prossima puntata. A domani martedì mercoledì (data da destinarsi)!

]]>
http://www.centralscrutinizer.it/italiano/xml/la-x-di-json-seconda-parte/feed/ 25