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

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

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

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