A weekend In The City

Olà...incursione musicale, per consigliare un album veramente bello. Il nuovo dei Bloc Party, da ascoltare perlomeno, per tutti gli amanti dell'indie rock. A differenza del precedente "Silent Alarm" (2005) è un po' più "commerciale", ma forse un po' più ricercato nelle sonorità.

Online la nuova grafica di ZOOPPA

L'ora è tarda, ma è senz'altro con entusiasmo che posto qui la messa online della nuova grafica (un restyling della precendente, che era su da agosto) di ZOOPPA. Personalmente mi piace molto, più dell'altra, trovo che con questa nuova release abbiamo fatto un salto di qualità, se è vero che la prima cosa che conta in un sito web è il come si presenta ;)
Non solo grafica comunque, ma anche introduzione di un nuovo modo di gareggiare: gli audio ads, la possibilità di caricare files audio con i propri "esperimenti" di spot radiofonici...

Ora al lavoro sul bug fixing, che personalmente per quanto mi riguarda, vorrà dire lavoro sui css e sulla grafica.

ciao

All we need is Microformats

Sto leggendo questo libro, giuntomi nientemeno che dalla Nuova Zelanda dopo due mesi e mezzo di attesa. Scritto da John Allsopp, australiano, sviluppatore considerato uno dei più grossi esperti mondiali di Web 2.0, parla del perchè, per dirla con Bill Gates, "abbiamo bisogno dei Microformats".
Allsopp ne spiega il funzionamento, e cosa l'utilizzo dei Microformats aiuti a risolvere. Il libro parla anche della sintassi, della semantica e i rispettivi utilizzi dei Microformats, citando esempi tratti dal mondo reale al di fuori del web (!). Il libro copre inoltre una varietà di case-studies, mostrando come i maggiori web publishers come Yahoo! utilizzano i Microformats nelle loro web applications.

A Company Making Everything

Quanto abbiamo riso con i cartoni di Wile E. Coyote e Road Runner? Sto lavorando in questi giorni a un'analisi, che mi obbliga a considerare un'azienda-tipo che presti il suo marchio per ZOOPPA . E quale azienda-tipo se non la A.C.M.E.?
Cazzeggiando su Google stasera, ho trovato una cosa eccezionale a dir poco. Il catalogo completo della ACME. C'è di tutto: dalla colla ACME alla roccia artificiale, dalla classica dinamite al costume da femmina di road-runner



oppure il Do-It-Yourself Tornado Kit



o la Instant Girl






Saludos

Un'altra giovinezza

Un'altra giovinezza (Francis Ford Coppola)

In concorso al Festival del Cinema di Roma, è il nuovo film del maestro americano Francis Ford Coppola, dopo una lunga attesa.
Il film, tratto dal fortunato romanzo di Mircea Eliade, figura fondamentale della Storia delle Religioni, disciplina a cui avevo dedicato qualche tempo all'Università, racconta la storia di Dominic Matei (Tim Roth), un settantenne docente di linguistica ossessionato dal linguaggio e da Laura, amata in gioventù e morta di parto. Deciso a togliersi la vita con una dose letale di stricnina, la mattina di Pasqua viene colpito da un fulmine davanti alla stazione di Bucarest ma la scarica elettrica, invece di ucciderlo, innesca un prodigioso processo rigenerativo. Sotto la supervisione e la protezione del professor Stanciulescu, interpretato dall'eccellente Bruno Ganz ("Pane e Tulipani"), il protagonista ringiovanisce e pian piano attira sul suo caso le attenzioni sempre più pressanti del regime nazista, a cui la Romania si sottomise all'inizio della Guerra. Braccato, è costretto a scappare nella neutrale svizzera, dove sopravvive alla Guerra, alla Bomba atomica e alla guerra fredda.

"Un'altra giovinezza" può essere considerato una cosciente messinscena del tempo e insieme uno strumento di ricerca e scoperta dell'origine del linguaggio e della nostra civiltà. La ricerca a ritroso nell'evoluzione del linguaggio, fino all'arrivo al "protolinguaggio", il sogno a cui tende il professore, ovvero il sapere cosa c'era prima del linguaggio storicamente documentato e documentabile per l'uomo, viene affidato alle reincarnazioni delle quali è vittima la sua compagna, una 25enne che ha le fattezze di Laura, la donna amata dal professore nella giovinezza.
Il film è vedibile e leggibile a livelli diversi: a un primo livello è una fiaba epica e metafisica, da cui mutua la struttura circolare. Ma è solo un pretesto, visto che è un film stesso sulla Storia umana, sul rapporto tra significante (la lingua) e significato. E in ultima analisi è una riflessione sul tempo e sull'eternità (il mito di "eterna giovinezza" è una vecchia storia umana...).
Un grande film secondo me, da un maestro del cinema e dell'arte del Novecento, tornato con un'opera di discreta erudizione (mai avrei pensato di vedere un film tratto da uno scritto di Eliade), che vale la pena di vedere.

SWF Object

SWFObject è un piccolo file JavaScript da usare per includere nelle pagine web del contenuto Adobe Flash. Lo script può rilevare il plugin Flash in tutti i più diffusi browsers (sia su Mac e PC) ed è disegnato per facilitare al massimo l’inserimento di contenuti Flash.
Inoltre, cosa abbastanza importante, favorisce la validazione di codice HTML e XHTML 1.0*, ed è stato programmato avendo in mente la compatibilità futura, in modo da funzionare anche negli anni futuri. Nel codice di ZOOPPA, SWFObject è implementato in homepage e nelle pagine di dettaglio video e video-brief.

Come funzia?

Prima di tutto va creato un elemento html che incorpori l'oggetto, per esempio un div id="flashplayer". Il contenuto presente nell’elemento contenitore sarà rimpiazzato dal contenuto Flash, così che gli utenti con il plugin Flash installato non vedranno mai il contenuto presente in questo elemento. Questa caratteristica ha il vantaggio aggiuntivo di permettere ai motori di ricerca di indicizzare il testo rimpiazzato dal filmato Flash ;)

E poi creiamo direttamente l'oggetto:
var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey])



• swf – Il percorso ed il nome del file swf.
• id – L’ID dell' oggetto o embed tag. L’embed tag avrà questo valore impostato come nome per i file che sfrutteranno l’opzione swliveconnect.
• width – La larghezza del filmato Flash.
• height – L’altezza del filmato Flash.
• version – La versione del player richiesta per riprodurre il filmato Flash. Questa può essere una stringa nel formato 'majorVersion.minorVersion.revision'. Un esempio potrebbe essere: “6.0.65”. Oppure si può semplicemente richiedere la versione maggiore, come “6”.
• background color – Questo è il valore esadecimale del colore dello sfondo del filmato Flash.

Argomenti opzionali:

• quality – La qualità con la quale riprodurre il filmato Flash. Il default è “high”.
• xiRedirectUrl –Se si desidera redirezionare gli utenti che completano l’aggiornamento ExpressInstall, si può specificare un URL alternativo in questo parametro.
• redirectUrl – Se desideriamo redirezionare gli utenti che non hanno la versione corretta del plugin, usiamo questo parametro inserendo un URL alternativo.
• detectKey – Questo è l’URL che lo script SWFObject cercherà quando il rilevamento è bypassato. Il default è ‘detectflash’. Esempio: per aggirare il rilevamento del plugin Flash e semplicemente scrivere il filmato Flash nella pagina, potete aggiungere ?detectflash=false all’URL del documento contenente il filmato Flash.

Mentre so.write("flashplayer"); dice allo script SWFObject di scrivere il contenuto Flash nella pagina (se la versione corretta del plugin è installata nel sistema dell’utente) rimpiazzando il contenuto all’interno dell’elemento contenitore.

Per sviluppare pagine utilizzando SWFObject, bisognerebbe iniziare con il contenuto alternativo (cioè quello non Flash). Facciamo in modo quindi che le pagine funzionino correttamente senza i filmati Flash! Poi aggiungiamo il codice Javascript che sostituisce il contenuto alternativo con i filmati Flash. Questo assicura che il contenuto alternativo sarà indicizzato dai motori di ricerca, e che gli utenti senza il plugin Flash (cosa paradossale ormai per carità) vedranno una pagina HTML funzionante. Se il contenuto alternativo è sufficiente, potrebbe non esserci alcuna ragione di dire ai visitatori che stanno perdendo il contenuto Flash.

SWFObject funziona in tutti i più recenti browsers, compresi, su PC: IE5/5.5/6, Netscape 7/8, Firefox, Mozilla, e Opera. Su Mac: IE5.2, Safari, Firefox, Netscape 6/7, Mozilla, e Opera 7.5+, e dovrebbe continuare a funzionare correttamente anche in futuro.

ESEMPI

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");
so.addParam("quality", "low");
so.addParam("wmode", "transparent");
so.addParam("salign", "t");
so.write("flashcontent");

</script>

Nel sito Adobe è riportata una lista completa dei parametri accettati da SwfObject

LINK

Passare variabili ai filmati usando il parametro “FlashVars”:

Usare FlashVars è il modo più semplice per passare dei dati dalla pagina html al filmato Flash, ma potete passare i dati solamente quando la pagina si carica. Normalmente, si aggiungerebbe un parametro chiamato FlashVars e poi i valori, passando coppie di stringhe del tipo NomeVariabile/ValoreVariabile, come in questo esempio: variabile1=valore1&variabile2=valore2& variabile3=valore3 e così via. SWFObject rende questa operazione più facile permettendo di aggiungere un numero a piacere di variabili in maniera simile a come si aggiungono i parametri aggiuntivi. L’esempio sottostante mostra come passare dei valori al filmato Flash usando questo metodo:

<script type="text/javascript">
  var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
  so.addVariable("variabile1", getQueryParamValue("variabile1"));
  so.addVariable("variabile2", getQueryParamValue("variabile2"));
  so.write("flashcontent");

</script>

SWFObject è dotato anche di una funzione extra che permette di impostare i valori delle variabili direttamente dall’URL. Un possibile esempio potrebbe essere un URL simile a questo:

http://www.example.com/page.html?variabile1=valore1& variabile2=valore2

Inoltre la funzione getQueryParamValue() supporta la lettura di variabili dalla location.hash, usata per collegarsi a timeline più interne di un filmato Flash.


Saludos amigos

La Fahrner Image Replacement

Tutte le tecniche di Image Replacement hanno lo scopo di "nascondere" visivamente una porzione di testo e di mostrare al suo posto un'immagine che viene indicata attraverso la proprietà background del css.

La Fahrner Image Replacement (FIR), abbastanza "datata" ma buona, attribuisce un background al tag h1 (o qualsiasi altro tag di titolazione) modificando la proprietà display e dichiarando che lo span dell'header non deve essere mostrato visivamente.


#pageHeader h1 span {
display: none
}


Purtroppo la FIR fa a pugni con l'accessibilità, se si considerano quelle fasce di utenti diversamente abili che utilizzano uno screen reader per "vedere" una pagina web. Lo screen reader con un display:none non legge il contenuto testuale relativo.
Ma esiste un hack. Eccolo.


h1 span{
display: block;
width: 0; height: 0; line-height: 0; /* attribuisce dimensioni nulle */
overflow: hidden; clip: rect(0,0,0,0); /* nasconde il testo */
}


Png trasparenti anche su Internet Explorer 6

Internet Explorer 6, tra le innumerevoli mancanze, annovera anche l'impossibilità di rendere un png con sfondo trasparente. Esiste però un fix in javascript che permette di ovviare a questo problema.Perchè usare un png invece di una gif? La risposta è estetica: il png supporta l'antialiasing, non mostrando quindi quell'antipatico effetto di sgranatura dei contorni tipico delle gif.Le gif non supportano l'antialias.

PNG in Windows IE

Bye

Min-height anche su Internet Explorer

Capita spesso di costruire dei layouts che sfruttino in altezza tutta la risoluzione del monitor dell'utente; è il caso per esempio di ZOOPPA.
Utilizzare l'altezza minima per un div, per esempio quello contenente il contenuto centrale della pagina, è la soluzione ottimale. In questo modo il layout non lascia spazi vuoti in altezza, per esempio sotto al footer (ciò si può notare nelle risoluzioni particolarmente ampie, sempre più diffuse).

Il problema è che mentre Firefox-Opera-Safari implementano la proprietà CSS min-height, Internet Explorer, sia nella versione 6 che nella 7, non la considera. E' questo un limite piuttosto grave del browser di Microsoft. Come fare?
Internet Explorer non supporta l'operatore !important, che permette ad una regola CSS di sovrascrivere le regole che seguono. Ma Internet Explorer ignora bellamente :-) questo operatore. Inoltre Explorer "legge" min-height come se fosse height.

Ecco allora il codice da utilizzare:


#miodiv {
min-height: 400px;
height: auto !important;
height: 400px;
}


La prima riga non è considerata da Internet Explorer. La seconda riga serve ai browser standard-compliant considerati più sopra per sovrascrivere la terza riga, che è quella che in effetti Explorer legge. Importante: in ogni caso, lo ripeto, Explorer interpreta min-height come se si trattasse di height.

Analisi: qualche riflessione a voce alta

Mi sto trovando in questi giorni a compiere delle attività di analisi di vario tipo (funzionale, design, implementazione features, ecc.) per ZOOPPA.
Il manuale del piccolo ingegnere del software dice che l'analisi dei requisiti (o detta semplicemente "analisi") rappresenta una delle prime fasi del ciclo di vita del prodotto software. Sia esso per esempio una web application come ZOOPPA. L'analisi ha lo scopo generale di chiarire, dettagliare e documentare le funzioni, i servizi e le prestazioni che devono essere offerti da un sistema software o programma, al fine di risolvere un dato problema* nel contesto in cui esso dovrà operare.
L'analisi dei requisiti è inoltre una completa descrizione del problema* e dei requisiti posti dall'ambiente (rappresentato da utenti in primis, hardware a disposizione e/o richiesto, software, vincoli economici di budget). La descrizione comprende anche le funzionalità del software da sviluppare ("a cosa serve", "a chi serve", "come funziona"), le possibili future estensioni (features future, plug-ins), e non ultimi i requisiti di performance.

L'analisi ha lo scopo di produrre la documentazione delle specifiche, funzionali e tecniche, del software in oggetto.


*E' la causa che da' luogo all'analisi. Solitamente è costituito da un equilibrio tra esigenze del cliente (per la maggior parte a dire il vero) e le possibili soluzioni progettuali proposte dall'analista stesso, che fa parte del team di sviluppo del software.

Peace and Powder...

HTML 5: le specifiche

Da intendersi ovviamente ancora come "Work in Progress", ma ci siamo

http://www.whatwg.org/specs/web-apps/current-work/


Sicuramente interessante anche un video di Francesco Caccavella (Html.it), apparso du IcTV, che parla appunto delle novità introdotte con la nuova specifica

http://www.ictv.it/file/vedi/182/html-5/

Il Web Design nell'era del Web 2.0

Capita ormai sempre più spesso sentir parlare di siti web che si definiscono o che vengono definiti 2.0 ma che in realtà non presentano alcun connotato tipico di questo concetto.

La “colpa”, se così la vogliamo definire, è dovuta all’affermarsi di uno stile di design 2.0.
Su Web Design from Scratch è possibile trovare una guida che spiega i passi principali da seguire per realizzare un sito in puro stile Web 2.0.

Dall’utilizzo di un layout semplice e centrato alla netta separazione della testata dal resto del contenuto, dall’uso del grassetto alla scelta dei colori, dei gradienti e delle icone.

Se volete partire dal design per la vostra prossima applicazione Web 2.0 questo può essere un buon punto di partenza. Come però accade quando si dedice di seguire una moda, il rischio di cadere nell’omologazione e nella copia pedissequa di quanto già esistente è veramente dietro l’angolo.

Il sito su cui lavoro come web designer oramai da qualche mese, ZOOPPA, è considerato oggi uno degli esempi più chiari di Web 2.0 Application in Italia

http://www.oneweb20.it/11/09/2007/una-zooppa-di-brand-diversi-chi-dovrebbe-essere-il-prossimo/

http://punto-informatico.it/p.aspx?i=2069367

anche se a mio modo di vedere ci sono ancora tantissimi margini di miglioramento ;-)

Push my button

Mi è stato segnalato un interessante post uscito un annetto fa su Digital Web; si parla della possibilità di dare degli stili ai pulsanti di Submit, usati così tanto nel quotidiano. Ora cosa succedeva: molto spesso si ricorreva al classico input type="image" e si caricava una gif che faceva "da" pulsante per l'invio di un form. Ora sostanzialmente, con il tag html button, è possibile fare ben altro. Inserirlo ad esempio in una lista, come mostrato dal tutorial, gestendo diverse situazioni.

LINK

Un altro buon motivo per usare Firefox...

Sul blog di un amico vedo questo interessante link. Se non hai ancora buttato Internet Explorer nel cestino, questo articolo ti spiega perchè dovresti farlo

http://www.kernel.googlepages.com/iecrash.htm

hihihi :)