Gian Carlo Mingati
design and development for interactive media

jQuery.Flash - sviluppato da Luke Lutman - è un potente e flessibile plugin per jQuery che serve ad aggiungere a runtime un ‘oggetto’ Flash. Come questo.

Pages are progressively enhanced when Flash and Javascript are available, and fallback to plain (X)HTML when they’re not — like search-engines, pdas or mobile phones. Replacements can happen as soon as the dom is ready. (X)HTML, CSS and Javascript stay where they belong — away from one another — making it easy to remove, update or swap out down the road.

Il plugin, offre la possibilità di fare dinamicamente l’embed di 5 ‘tipi’ di flash movies (Basic Embed, Flash Text-Replacement - sIFR, MP3 Player, YouTube Video, Inline Params, FlashBlock). Io mi sono ispirato con lo scritp che fa funzionare l’MP3 player.

Questa la mia versione ‘ispirata’ (ma sia chiaro, basata 90% su quanto già scritto da Lutman, ma anche 98…).


$('a[@href$="flv"]').flash(
{ src: 'flvplayer.swf'},
{ version: 8 },
function(htmlOptions) {
$this = $(this);
htmlOptions.width = '320';
htmlOptions.height = '260';
htmlOptions.flashvars.file = $this.attr('href');
htmlOptions.flashvars.image = $this.children().attr('src');
htmlOptions.flashvars.showfsbutton = 'false';
htmlOptions.flashvars.autostart = 'false';
$this.before($.fn.flash.transform(htmlOptions));
}
);


Infatti, anche se l’esempio con l’mp3 player usa l’SWF FLV 3.6 di Jeroen Wijering (che tra l’altro é il miglior .flv player attualmente reperibile), Lutman non aveva pensato ad usare questo player anche per i video.

E io, che tra elicotteri e gite fuori porta ho parecchi video che volendo potrei postare, avevo bisogno di un sistema che mi mantenga le pagine pulite e semplici da gestire e così ho ‘esteso’ lo script per le mie esigenze.

E questo metodo è perfetto.
Dovunque io voglia un video d’ora in poi, mi basterà inserire un’immagine ed un link:


<div class="flv-player-instance">
<a href="http://www.domain/media/yourpathtovideofile.flv"><img src="http://www.gcmingati.net/wordpress/wp-content/uploads/bergen.jpg"
alt="Bergen Intrepid Turbine R/C helicopter" /></a></div>


Il nostro javscript sostituisce a runtime il link con il nostro bel lettore di file flv e usa come preview l’immagine nel nostro tag ‘a’ e come path per il filmato, l’attributo ‘href’ del link.

Sounds accessible?
Enjoy!

Nota: jQuery Flash plugin su IE ha il bug “jQuery/Packer/ActiveX Bug” che sostanzialmente forza gli utenti a fare click su ogni singolo controlo ActiveX (Flash, Quicktime, etc.) in una pagina, prima di poterlo utilizzare anche se il plugin è embeddato dinamicamente via javascript. Per questo su IE bisogna prima attivare il plugin facendo click sopra al player video e poi riprodurre il filmato. E’ un bug risolvibile e comunque non credo sia bloccante… piuttosto usate Firefox!

Nota: il video qui riprodotto è stato downloadato da YouTube grazie a VideoDL.

Update: da mercoledi 13 febbraio 2008 jquery.flash non é più utilizzato per fare l’embed dinamico del player di filmati Flash Video JW FLV Media Player 3.14. Al suo posto utilizzo SFWObject (formerly known as FlashObject) ed é quindi possibile usufruire della modalità full-screen (in Firefox e Opera). Gli esempi in questo post restano comunque validi nella sintassi ma è comunque consigliabile usare SWFObject per l’embed dei file Flash, ed in particolare col JW FLV Media Player vista la disponibilità di una API JS con cui controllare il playback e non solo.

Mi occupo del design e dello sviluppo del front-end di alcuni siti e web applications di uno dei maggiori gruppi bancari italiani. Quindi sono un web designer. oh-yeah (?!)
Saltuariamente, svolgo qualche lavoro come freelance, ma il grosso del mio entusiasmo e del mio impegno, é vanificato ove lavoro ;-)

Mi é stato chiesto di scrivere due righe per una presentazione, due righe su cosa sono i web standard e come e perché li usiamo in banca, per le ns. applicazioni.
Le linee guida W3C in materia di accessibilità dei contenuti e struttura delle informazioni definiscono i tipi di tecnologie da utilizzare per lo sviluppo del frontend, e sono tecnologie ideate per resistere al tempo e essere accessibili al pubblico più vasto possibile.
L’ obiettivo è sempre la realizzazione di un markup pulito e semantico, pronto per la transizione a XML e altri futuri linguaggi. Le web applications in linea con gli standards web hanno le seguenti principali caratteristiche:

1. il frontend é scritto in XHTML 1.0 Strict, le informazioni relative al layout sono contenute in uno o più files CSS (Cascading Style Sheet), invece che nelle singole pagine. HTML semantico: si deve usare una marcatura semantica per strutturare il contenuto di un documento.
   Quando esiste un elemento XHTML con un significato strutturale idoneo per la parte di contenuto che si sta codificando, non ci sono ragioni per usare altre soluzioni che tra l’ altro, rendono pesante il codice e difficile la manutenzione dello stesso. Utilizzando HTML semantico, si rende il documento significativo per ogni browser, che sia l’ultimo browser grafico su un moderno PC, un vecchio browser che non gestisce i CSS, o un browser testuale in una shell Unix.
2. CSS (Cascading Style Sheet): Permettono di controllare senza limite alcuno la disposizione degli elementi di un documento, il modo in cui viene reso ogni elemento grafico, testuale e di navigazione. Funzionano bene con XHTML strutturato e semantico. L’ uso dei CSS, oltre che standard, assicura notevoli vantaggi in termini di tempo richiesto per le modifiche (sia di tipo grafico che strutturale) dato che una modifica su un singolo file (per esempio il colore di sfondo della testata, diverso per ogni Banca) si riflette su tutte le pagine, o ancor di più un elemento come un menu può essere disposto in verticale o in orizzontale con poche righe di codice, con evidenti risparmi di tempo e certezza del risultato.
3. AJAX (Asynchronous JavaScript And Xml): Lo strato di logica col quale si definisce il modo in cui l’ interfaccia (o singole parti di essa) comunica (chiede e riceve dati) col back-end: AJAX é un insieme di tecnologie standard che permettono di comunicare in maniera asincrona col web server richiedendo solo porzioni di dati, il quale tramite servizi web XML-based li invia allo strato Ajax, che li processa e li visualizza a schermo. Il risultato é un’ applicazione più veloce, dal momento che l’ammontare dei dati scambiati tra il browser e il server é notevolmente ridotto.
   Molto lavoro del Web server viene fatto dal client; la user-experience ne é notevolmente migliorata.

Certo, questi siti, magari trattano argomenti meno banca-oriented. Ma il concetto resta lo stesso: usare gli standard torna utile sia che si debba realizzare qualcosa per coca-cola sia che si debba favorire l’accesso semplice ed intuitivo a molte informazioni.

No, non è una joint venture nè ho rilevato una società . E’ un componente per creare gallerie di immagini dinamiche (xml) per flash mx. Lo ho preso per sperimentarne il funzionamento e le possibilità di customizzazione in vista di un lavoro che devo fare per il mio amico architetto di fama internazionale Giorgio.

Posterò certamente un primo esempio di galleria fatta con SlideShowPro.

Ieri sera guardavo report, sui rai tre. Beh che dire, che a sentire loro, gli USA se le sono buttate giù da soli le torri, o perlomeno che sapevano ma nessuno ha mosso un dito, o al massimo lo ha mosso dopo per lanciare ‘qualcosa’ anche sul pentagono.

In ogni caso tempo fa, navigando in rete fra i vari siti di ‘webdesign’ che giro, ho trovato questo video davvero ben fatto, che parla proprio della guerra in Iraq e del rapporto che negli stati uniti c’è tra guerra ed economia, e di quanto l’economia tutto sommato, ruoti intorno ad un piccolo, invisible yet sinister group.

© 2004 knife-party.net