Feed RSS

Posts Tagged javascript

Filmati SWF nella pagina con Swfobject e jQuery

Posted by daniele on 01.22.09

Se utilizzate SWFobject per embeddare correttamente nella pagina web i filmati flash in formato SWF (trovate tutte le ragioni per farlo, e come farlo, in questo post su swfobject e file flash che ho scritto qualche mese fa), e al contempo utilizzate JQuery come libreria javascript, non potete rinunciare a jQuery SWFObject Plugin.

Una volta che framework e plugin sono stati richiamati nella pagina, è sufficiente una riga di codice per embeddare il filmato. Ecco un esempio:
(supponiamo di voler caricare il filmato “mymovie.swf” nel div “swfdiv”):

$(document).ready(function () {  
 $('#swfdiv').flash({swf: 'mymovie.swf'  });  });

Tra le features previste e documentate anche il supporto per le flashvars.

$(document).ready(function () { 

$('#swfdiv').flash({

 swf: 'mymovie.swf'  

 flashvars: {  name1: 'value1', 
 name2: 'value2',
 name3: 'value3'  }

});

});

Twitter for developers!

Posted by daniele on 01.20.09

Se siete su twitter ci sono tra gli altri  un paio di account che potete seguire (oltre il mio).
@mootols
: l’account della ormai celebre libreria javascript rilancia snippet, plugin, tutorial e in generale spunti legati a mootools, appunto.

Ovviamente è da seguire anche l’omologo account, legato al framework messo a punto da John Resig (e che da queste parti si adora@jquery.

Se anche voi seguite qualche account twitter che raccoglie risorse per designer o sviluppatori, fatevi sotto nei commenti..

Flv in una pagina web con flowplayer

Posted by daniele on 11.20.08


Abbiamo già visto in passato come inserire un video in formato FLV in una pagina Html, utilizzando javascript ed il player flash di Jeroen Wijering. In particolare avevamo visto come l’utilizzo di script come SWFobject, o UFO, fosse necessario per evitare importanti problemi di accessibilità legati all’embedding di un file SFW nella pagina html.

In questo tutorial scopriremo una nuova risorsa per riprodurre un file flv nel nostro sito utilizzando: FLOWplayer, ma la logica che seguiremo per embeddare il player sarà la solita: utilizzeremo javascript e il DOM per inserire il player swf all’interno di un elemento della pagina; il player quindi riprodurrà il video flv. Il risultato sarà simile a questa demo.
Read the rest of this entry »

Obbligare Internet Explorer 6 a comportarsi come IE7

Posted by daniele on 11.18.08

Ie7.js è uno script che una volta incluso nella pagina web, obbliga Internet explorer 6 a renderizzare la pagina nello stesso modo in cui la visualizzerebbe Explorer 7. Lo script (che ovviamente non funziona se l’utente ha javascript disabilitato) pone rimedio a una serie di bug relativi ad html e css, e può rappresentare un buon compromesso per chi non ha voglia di sbattersi per arginare con i soliti hack le mille falle di un browser ormai vecchio. Sul sito dello script troverete l’elenco dei bug che vengono risolti.
Naturalmente bisognerà fare in modo che il file venga incluso nella pagina solo se effettivamente questa viene caricata con una versione inferiore rispetto a Internet Explorer 7:

<!--[if lt IE 7]>
<script src="js/IE7.js" type="text/javascript"></script>
<![endif]-->

Ecco il link: ie7.js javascript library.

Tab con jQuery: il plugin idTabs

Posted by daniele on 10.15.08

Esistono diverse risosrse per creare tab più o meno sofisticate con jQuery: Tabs 3 per esempio, incluso nella jQuery U.I, e che dovrebbe riuscire a soddisfare tutte le vostre esigenze (parlo di tab s’intende), fino ad arrivare a qualcosa di più corposo come Coda slider, un plugin che tra le altre cose è in grado di generare delle tab. Se invece avete bisogno di una soluzione semplice e che vi costi solo qualche kbyte di javascript potete provare il plugin idTabs.

Qui c’è una live demo

Il funzionamento del plugin è abbastanza semplice: innanzitutto come al solito includiamo jQuery ed il plugin stesso nella pagina.

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.idTabs.min.js"></script>

A questo punto i link presenti all’interno dell’elemento con la classe idTabs funzionano da pulsanti per la navigazione: l’attributo href di questi specifica quale div deve essere visualizzato. il markup è semplicissimo:

<div class="tabcontainer">
<ul class="idTabs">
	<li><a href="#lorem">Lorem...</a></li>
	<li><a href="#morbi">morbi!</a></li>
	<li><a href="#fermentum">fermentum</a></li>
</ul>
<div id="lorem">contenuto del primo div</div>
<div id="morbi">contenuto del secondo div</div>
<div id="fermentum">contenuto del terzo div</div>
</div>

Evidentemente sarà necessario impostare lo stile degli elementi in gioco. Bisognerà specificare la classe selected, che il plugin assegna automaticamente alla tab corrente.

ul.idTabs li a {float: left; padding:  5px;
text-decoration: none; background: #444; color: #fff}
.tabcontainer div {clear:left; padding: 10px; background: #fff}
ul.idTabs li a.selected {background: #fff; color: #444}

Ecco il link: idTabs.

Scroller RSS con jQuery e Simplepie: variante #3

Posted by daniele on 10.08.08

Ho realizzato una nuova semplice variante dello scroller Rss, che abbiamo visto in questo post. In questo caso lo scroller visualizza un solo item per volta: la differenza sostanziale rispetto al primo esempio è che lo scrolling avviene in senso orizzontale. Non mi soffermo ancora sul codice necessario per parsare il feed, sul markup, il foglio di stile, e le poche (grazie a jQuery) righe di codice javascript necessarie per creare questo scroller, per il semplice fatto che tutte le informazioni (e tutti i link del caso) si trovano sempre nel primo post della serie, mentre dalla pagina della live demo è scaricabile tutto il codice. Ecco il link allo scroller n.3

Mentre qui trovate la live demo n.1 e qui la n.2
Qui il primo post con il tutorial dettagliato.

Scroller Rss con Jquery e Simplepie: variante 2

Posted by daniele on 09.24.08

Qualche giorno fa abbiamo visto come parsare un un feed Rss, e visualizzarne il contenuto sfruttando jquery ed il plugin Serialscroll.
In quello scroller è visibile un item per volta: per ogni item si vede il titolo (che linka al permalink) e una breve descrizione. Qui c’è l’esempio funzionante, con il codice sorgente.

Oggi vi presento una variante di quell’esperimento (ed altre ne verranno…): questa volta vengono visualizzati tutti gli item che decidiamo di acquisire dal feed. Per ogni item è possibile visualizzare una breve descrizione del post, che compare nel box in alto, quando si passa con il puntatore sul titolo . Se invece si fa click, viene aperto il permalink del relativo post.

Non starò qui a scrivere un tutorial perchè la maggior parte delle informazioni basilari per realizzare questo scroller sono le stesse che avevo fornito nel primo esempio e che quindi trovate qui.
Inoltre anche nella pagina dello scroller n.2 troverete tutto il codice di cui avete bisogno (php, html, css e javascript). Per cui qui non aggiungo altro:  ecco il link allo scroller n.2.

Creare uno scroller di rss con Simplepie e jQuery

Posted by daniele on 09.05.08

feed-rss-scroller

Una buona idea per proporre il contenuto di un feed rss all’interno di una pagina web, può essere quella di inserire i vari item all’interno di un box, e rendere questo box scrollabile in modo che l’utente possa visualizzare gli item precedenti o successivi. Quello che vogliamo ottenere è – per intenderci – uno scroller come questo.
Il funzionamento di questo scroller è molto semplice: a livello di markup creeremo un contenitore per una lista di item di un feed rss. Ogni item sarà composto dal titolo con link al post, e dalla descrizione dell’articolo: dati che estrarremo dal feed utilizzando un parser PHP: Simplempie. Con i css faremo in modo che un solo item sia visibile. Infine con jQuery “attiveremo” due immagini in modo che funzionino da pulsanti per scrollare la lista da un item all’altro.

Read the rest of this entry »

Lightwindow con javascript: 44 script a confronto

Posted by daniele on 07.31.08

lightbox-table
In passato abbiamo visto come funziona LightWindow 2, uno script che sfrutta la libreria Protoype e Scriptaculous per aprire lightbox all’interno di una pagina web.
In realtà sono disponibili numerosi script che permettono di aprire finestre modali all’interno della pagina html. The Lightbox Clones Matrix ne mette a confronto ben 44, evidenziando per ognuno le carattestiche principali, come il framework javascript utilizzato, le dimensioni dello script, e gli oggetti supportati. Se state cercando uno strumento del genere, vale la pena sicuramente darci un’occhiatta.

PNG trasparenti anche su Internet Explorer 6, con Unit PNG fix

Posted by daniele on 07.30.08

ie trasparency

UNIT INTERACTIVE ha sviluppato uno script che permette di sfruttare a pieno le trasparenze delle immagini in formato PNG nel design della pagina html: Unit PNG fix.
Il problema con queste immagini, come molti di voi sapranno è che Internet Explorer 6 non supporta le trasparenze dei PNG.
Non sono certo mancati finora gli espedienti per risolvere il problema. Ultimo arrivato, Unit PNG fix è un file javascript di ridottissime dimensioni, che una volta richiamato nella pagina ci permette di utilizzare normalmente i file PNG e garantisce che le trasparenza vengano visualizzate correttamente anche su Internet Explorer 6, senza dover ricorrere ad ulteriori hack nel foglio di stile.
unitpngfix
Il funzionamento è semplice: sfruttiamo i commenti condizionali per includere lo script se il browser che sta caricando la pagina è una versione di internet explorer precendente alla 7.

<!--[if lt IE 7]>
<mce:script type="text/javascript" src="unitpngfix.js" mce_src="unitpngfix.js"></mce:script>
<![endif]-->

Ecco fatto, non dovremo più preoccuparci di Explorer 6, almeno per quanto riguarda le trasparenze… provare per credere . (update: nei commenti mi fanno gentilmente notare che la demo non funziona, per il momente verificate voi stessi l’affidabilità dello script, sul sito di unitpngfix)
(per non perdervi le prossime battaglie contro questo dannato browser, potete iscrivervi al feed rss…)

Tabelle ordinabili con jQuery e Tablesorter

Posted by daniele on 06.26.08

jquery tablesorter
Sono lontani, o almeno dovrebbero esserlo, i tempi in cui si usavano le tabelle per impostare il layout della pagina. Ormai la tabella viene utilizzata esclusimante per presentare in maniera leggibile una serie di dati. L’avvento dei framework javascript ha permesso inoltre di aggiungere alle tabelle un pizzico di movimento, e di rendere il contenuto maggiormente leggibile da parte dell’utente. Mi riferisco ovviamente alle tabelle riordinabili e ridimensionabili.
In questo tutorial vedremo come creare tabelle ordinabili, utilizzando il framework javascript Jquery ed il plugin per Jquery Tablesorter.

Read the rest of this entry »

Tooltip semplici e complessi con javascript

Posted by daniele on 06.12.08

prototip tooltip

Ecco due risorse eccellenti, utilissime entrambe a seconda delle esigenze del webdesigner, per realizzare tooltip animati, semplici e complessi, con javascript.

Tooltip eccezionali con Prototype

A tutti coloro che amano sfruttare javascript per dare un pizzico di movimento alle loro pagine web suggerisco di dare un’occhiata a questo Prototip. Come già il nome suggerisce, si tratta di un plugin per il framework javascript Prototype. Uno script che facilita la creazione di tooltip per una pagina web.

Uno sguardo agli esempi basterà per rendersi conto delle potenzialità di questo strumento, che fa meraviglie dal punto di vista grafico (anche grazie all’eventuale integrazione con Scriptaculous), ma che permette di controllare tutti gli aspetti dei tooltip con pochissime righe di codice.

Funziona su IE(6), Firefox (2), Safari (2), Opera (9.25).

Ecco il link: Prototip2

Tooltip animati in due Kbyte

Per chi invece non necessita di certi effetti speciali, ma ha bisogno piuttosto di uno script leggero che non richiede framework javascript, c’è il tooltip creato da Leigeber: tooltip animato, di semplice utilizzo, in soli 2 kilobyte. Demo, istruzioni e download – vista la semplicità del progetto si tratta di un vero e proprio tutorial – sono su SixRevisions.

LightWindow 2: animazioni ed effetti grafici per aprire modal window

Posted by daniele on 03.11.08


Creative Commons License photo credit: combust
Lightwindow utilizza Scriptaculous e Prototype per associare trasparenze e animazioni all’apertura di una finestra. Con un semplice link, possiamo visualizzare all’interno di un box (modal window) risorse come pdf, video, filmati youtube, swf e addirittura pagine web esterne.Una modal window è una finestra con la quale l’utente deve interagire per poter ritornare alla finestra madre. Si trovano diversi script che permettono di associare ad un semplice link l’apertura di modal window con una particolare animazione e picevoli effetti grafici.Se non hai capito di cosa sto parlando, clicca qui per favore (non funziona nel feed reader).Questo tipo di finestre sono molto utili quando si vuole fare riferimento a una risorsa specifica, come un’immagine, una galleria di immagini o un video, un contenuto multimediale, o anche un form (pensa al login form di technorati), piuttosto che ad una vera e propria pagina. Nei limitati casi in cui è logico, utile e corretto farlo, possiamo utilzzare una modal window anche per aprire delle pagine web esterne, senza che l’utente abbandoni la navigazione del nostro sito.Inserire questo tipo di effetto nel nostro sito è molto semplice. In questa piccola guida utilizzeremo Lightwindow 2 che sfrutta la potenza di due librerie come Scriptaculous e Prototype.Tutto il necessario è contenuto nel pacchetto lightwindow.zip .includiamo i file javascript e il foglio di stile all’interno delle pagine in cui vogliamo utilizzare lightwindow.

<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script><script type="text/javascript" src="javascript/lightwindow.js"></script>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />

A questo punto ogni link della pagina potrebbe aprirsi in un box: sarà sufficiente impostare la classe “lightwindow” per il tag a:

<a href="URLdellaRISORSA" class="lightwindow">Link</a>

Possiamo indicare una serie di parametri per personalizzare la finestra che andrà ad aprirsi. CAPTION e TITLE saranno a loro volta evidenziati nel box, che potrà avere la posizione sullo schermo, la larghezza e l’altezza che di volta in volta preferiamo. Per personalizzare ulteriormente l’aspetto grafico, è possibile comunque intervenire sul foglio di stile.Trovi tutti i dettagli sul sito dell’autore.

<a href="URLdellaRISORSA" class="lightwindow" title="un titolo per la finestra" caption="una breve descrizione"
params="lightwindow_width=516,lightwindow_height=530">Link</a>

Lightwindow 2 permette di aprire in questo modo per esempio immagini, gallerie, pagine web, filmati quicktime, filmati youtube swf e file pdf.Grazie al plugin di Mockersubat, Lightwindow è utilizzabile senza troppi problemi anche su wordpress.
Una volta installato e attivato il plugin, potremo utilizzare anche in wordpress la classe lightwindow, nel modo che abbiamo appena visto, per tutti i nostri link.Puoi anche provare…
lightbox
shadowbox
… o leggere:modal window su wikipedia

[update 08-05-2008]
Nei commenti a questo post, Ciby, un utente che ha avuto problemi a far funzionare correttamente Lightwindow su iE, segnala un utile link al forum di Lightwindow: occhio al doctype e ai nomi dei div!

Inserire un video in formato flv all’interno di una pagina html

Posted by daniele on 03.03.08

player flv JW

Abbiamo già visto nei giorni scorsi come inserire all’interno di una pagina html un filmato flash utilizzando javascript e il DOM con Unobtrusive Flash Object e con SWFobject. In questo post vedremo come utilizzare una di queste tecniche per inserire all’interno della pagina web un video in formato FLV.

Per visualizzare un flusso video FLV è necessario un player. Questo non sarà nient’altro che un filmato SWF in grado di riprodurre il file. Fa al caso nostro l’ormai storico player di Jeroen Wijering.
Il file Zip che andiamo a scaricare contiene tutto il necessario per pubblicare il video.

Inseriremo all’interno della pagina il file mediaplayer.swf, utilizzando SWFobject.
La seguente istruzione sostituirà il div “container” con un div contente il player swf:

s1.write("container");

Ma prima di tutto dovremo specificare i parametri che per SWFobject sono obbligatori.

var s1 = new SWFObject("mediaplayer.swf","mediaplayer","300","170","7");

A questi parametri bisognerà aggiungere le variabili flashvars necessarie per creare il player e per riprodurre il filmato: specificheremo infatti il percorso di quest’ultimo e una serie di valori relativi all’aspetto del player.
Il parametro image per esempio indica l’immagine da visualizzare nel player finchè non viene avviata la riproduzione.

s1.addVariable("width","300");
s1.addVariable("height","170");
s1.addVariable("file","video.flv");
s1.addVariable('image','image.jpg');

Quindi, ammesso che la pagina html, swfobject.js, mediaplayer.swf e il file video.flv si trovino nella stessa cartella, il codice per pubblicare il player sarà questo:

<script type="text/javascript" src="swfobject.js"></script>

<div id="container"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>

<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">
	var s1 = new SWFObject("mediaplayer.swf","mediaplayer","300","170","7");
	s1.addVariable("width","300");
	s1.addVariable("height","170");
	s1.addVariable("file","video.flv");
	s1.addVariable('image','image.jpg');
	s1.write("container");
</script>

In questo modo SWFobject sostituisce il div container con un div chiamato mediaplayer, inserisce il filmato flash mediaplayer.swf, con i parametri specificati, all’interno del div e passa al player tutte le variabili necessarie al suo funzionamento.
Nulla di eccezionale quindi: si tratta di utilizzare SWFobject per pubblicare un filmato flash SWF specificando alcune Flashvars obbligatorie.

Ecco un esempio.

Aggiungo soltanto che è possibile personalizzare JWplayer in mille modi: tutta la documentazione è sul sito dell’autore, dove si trova anche un utilissimo wizard per impostare il player nel modo che preferiamo.

Altri link:
FLV su wikipedia

Inserire un filmato SWF (Flash) in una pagina Html con javascript: SWFObject

Posted by daniele on 02.26.08

Abbiamo già visto in questo post come utilizzare Unobtrusive Flash Object (ufo.js) per pubblicare un filmato flash swf all’interno di una pagina html. Un altra via per evitare i problemi legati ai tag OBJECT ed EMBED, è usare il file javascript SWFobject.
Anche questa tecnica si basa sull’uso del DOM: creeremo un elemento DIV, quindi, il cui contenuto sarà sostituito da javascript con il filmato flash che specificheremo.
E’ possibile scaricare swfobject qui.
Il funzionamento di swfobject.js è molto semplice.
E’ necessario innanzitutto includere lo script all’interno dell’Head nella pagina Html. Quindi:

<script type="text/javascript" src="swfobject.js"></script>

A questo punto, come nel caso di UFO, si imposta il div contenitore: il testo presente all’interno di quest’ultimo sarà visualizzato in tutti i casi in cui, per qualsiasi motivo, javascript non sarà in grado di inserire il player, ma possiamo essere abbastanza sicuri che ciò avverrà solo se non è installato il plugin. Proprio per questo motivo il testo che inseriremo in questo div farà riferimento al plugin mancante:

<div id="swfcontent">
Non è possibile visualizzare il filmato.<br/>
Potrebbe essere necessario installare il plugin flash.<br/>
Puoi scaricarlo <a href="http://www.adobe.com/shockwave/download/download.cgi">qui</a>
</div>

A questo punto possiamo ordinare a SWF Object di sostituire il contenuto del div “swfcontent” con il filmato che noi specificheremo, in questo modo:

<script type="text/javascript">
   var so = new SWFObject("mymovie.swf", "mymovie", "400", "200", "8", "#336699");
   so.write("swfcontent");
</script>

Evidentemente anche SWFOBJECT prevede parametri obbligatori: il percorso del file swf, l’ID univoco da assegnare all’oggetto multimediale che verrà creato, larghezza e altezza, la versione di flash player necessaria per visualizzare il file swf, e il colore di sfondo del filmato.

Ovviamente è possibile passare al file swf variabili flashvars, in questo modo:

so.addVariable("variable1", "value1");

Mentre la funzione getQueryParamValue permette inoltre di passare al filmato flash il contenuto di una variabile presente nell’url:

so.addVariable("varName2", getQueryParamValue("GetVarName"));

Per concludere ecco il codice completo per pubblicare contenuto flash utilizzando SWFOBJECT, supponendo che il file .swf si trovi nella stessa cartella del file html,:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFobject | pagina esempio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
</head>
  <body>
    <div id="swfcontent">
Non è possibile visualizzare il filmato. Potrebbe essere necessario installare il plugin flash, puoi scaricarlo <a href="http://www.adobe.com/shockwave/download/download.cgi">qui</a>
    </div>

<script type="text/javascript">
   var so = new SWFObject("mymovie.swf", "swfcontent", "400", "200", "8", "#336699");
// aggiungiamo righe come la seguente se vogliamo passare variabili al file swf
   so.addVariable("varName", "Var Content"); 
// aggiungiamo righe come la seguente per utilizzare variabili presenti nell'url
   so.addVariable("varName2", getQueryParamValue("GetVarName")); 
   so.write("flashcontent");
</script>


  </body>
</html>

Link:
La pagina di SWFobject