Diciamo che questo grafico mi ha fatto venire voglia di tornare a postare…

via sixrevisions

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 »

È on line la quarta variante sullo scroller di feed rss, realizzato con SimplePie e jQuery.
Il primo post della serie, che contiene tutte le informazioni necessarie per creare gli scroller lo trovate qui, mentre nella pagina della demo troverete tutti i link alle risorse necessarie, nonchè fogli di stile, hmtl, codice javascript e PHP. Ecco il link: Scroller n.4

In Worpdress è possibile creare pagine e sottopagine. Nel momento in cui si crea una pagina è possibile infatti specificare una pagina “madre”. Più pagine quindi possono avere in comune la stessa “madre”, che è un altro modo per dire che più sottopagine dipendono dalla stessa pagina.
E’ un modo per ordinare gerarchicamente i propri contenuti e può essere molto utile.

Vediamo come visualizzare, all’interno di una pagina, nella sidebar, un elenco di link a tutte le pagine “sorelle” di quella corrente, ed il link alla pagina madre.
Ecco un esempio di quello che andremo a realizzare: nella sidebar sotto il modulo per la ricerca compare un elenco delle sottopagine della pagina che state visualizzando.

Verificheremo che la pagina corrente sia una sottopagina: in questo caso recupereremo l’ID della pagina madre e visualizzeremo un link a tutte le “figlie” di questa. Se invece la pagina corrente non è una sottopagina faremo in modo di visualizzare tutte le pagine figlie.

Alla variabile $parentId assegneremo l’ID della pagina di cui verrano visualizzate le figlie (o sottopagine). Quindi se quella corrente è una pagina “figlia”, $parentId conterrà l’ID della rispettiva pagina madre. Se la pagina corrente invece non ha “madre” il valore da assegnare a $parentId sara proprio l’ID della pagina corrente, in modo che ne vengano visulizzate le figlie.

global $wp_query;
 
if( empty($wp_query->post->post_parent) ) {
$parentId = $wp_query->post->ID;
$linktop=false;
$parenttitle = $wp_query->post->post_title;

} else {
$parentId = $wp_query->post->post_parent;
$parenttitle = $wp_query->post_parent->post_title;
$linktop=true;

}

La variabile $linktop ci servirà per produrre o meno un link alla pagina madre: se già ci troviamo in una pagina di questo tipo il link è inutile, poichè la pagina madre è proprio quella che stiamo visualizzando.
Recuperato l’ID della pagina madre, dobbiamo procurarci il titolo di questa, per visualizzarlo in testa al menu.

$postparentvalues = get_post($parentId);
$parenttitle = $postparentvalues->post_title;

Ricaveremo anche il permalink, ma solo nel caso in cui quella corrente non sia la pagina madre stessa perchè – come detto – solo in quest’ultimo caso è necessario il link. Ed è proprio per questa verifica che abbiamo specificato $linktop, come TRUE o FALSE.
Ecco allora il primo output con il titolo della pagina madre, ed eventualmente un link ad essa (se quella corrente è una pagina figlia).

<?php if ($linktop) { ?><a href="<?php echo get_permalink($parentId); ?>"><?php } ?>
<?php echo $parenttitle; ?>
<?php if ($linktop) { ?></a><?php } ?>

A questo punto non resta che utilizzare la funzione wp_list_pages() per visualizzare la lista con tutte le sottopagine della “madre” già individuata. A questo scopo è stato previsto il parametro child_of, al quale assegneremo ancora una volta il valore di $parentId.

wp_list_pages(title_li=&child_of='.$parentId.'&sort_column=menu_order);

Tutto qui, aggiungiamo solo la condizione if (is_page) in modo che questo “menu” compaia nella sidebar solo se ci troviamo all’interno di una pagina.
Ecco il codice completo, con un minimo di html:

<?php if (is_page()) {
global $wp_query;
 
if( empty($wp_query->post->post_parent) ) {
$parentid = $wp_query->post->ID;
$linktop=false;
$parenttitle = $wp_query->post->post_title;

} else {
$parentId = $wp_query->post->post_parent;
$parenttitle = $wp_query->post_parent->post_title;
$linktop=true;

}


$postparentvalues = get_post($parentId);
$parenttitle = $postparentvalues->post_title;
?>
<h3>
<?php if ($linktop) { ?><a href="<?php echo get_permalink($parentId); ?>"><?php } ?>
<?php echo $parenttitle; ?>
<?php if ($linktop) { ?></a><?php } ?>
</h3>
<ul>
wp_list_pages(title_li=&child_of='.$parentId.'&sort_column=menu_order); 
</ul>
<?php } ?>

Un’ultima avvertenza: questo script non funziona per qualche strano motivo con le sotto-sotto pagine, ed è un vero peccato… se qualcuno sa perchè o come risovere il problema, lo aspetto nei commenti .
E infine qualche link utile per comprendere a pieno questo tutorial:
la funzione wp-query()
la funzione wp_list_pages()

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.

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.

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.

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 »

Dopo aver visto come agire con Final Cut per creare un video pregressivo, è finalmente arrivato il momento di vedere le possibilità che ci offre Adobe Premiere, per ottenere questo risultato.
Come al solito, vi ricordo che qualche settimana fa ho aperto questa piccola serie di post relativi al video progressivo ed interlacciato, con una panaromica sulle sostanziali differenze tra i due tipi di scansione: se questo nozioni vi mancano, prima di proseguire con questo post dateci un’occhiata.

Veniamo a Premiere. Anche nel software Adobe, come in Final Cut, ci troviamo ad agire sul video in tre differenti momenti: quando creiamo il progetto, quando cerchiamo (eventualmente) di limitare i problemi dovuti al materiale originale interlacciato, ed al momento dell’esportazione.
Read the rest of this entry »

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 »

Qualche settimana fa abbiamo visto le differenze sostanziali tra un video progressivo e un video interlacciato. Adesso è arrivato il momento di passare dalla teoria alla pratica: in questa breve e semplice guida vedremo le scelte base da fare con Final Cut, il software di montaggio di casa Apple, per produrre un video progressivo.

Ci troveremo ad agire in tre fasi diverse: al momento di impostare il lavoro e quindi creare il progetto e le sequenze per il montaggio; sulle clip importate in timeline, per cercare di limitare i danni dovuti ad eventuale materiale interlacciato presente nel montaggio; ed infine in fase di esportazione del montato.

Read the rest of this entry »

Questo post di Massimiliano Sforza su Edit, ci ricorda che, per quanto i contenuti testuali che produciamo per il nostro sito o blog, siano pensati progettati e creati per una vita sullo schermo, è sempre probabile che finiscano per essere stampati.
Per questo motivo è necessario predisporre il nostro sito in modo che sia leggibile anche su carta.

Ecco allora come specificare un foglio di stile per la stampa all’interno del tag <HEAD>:

<link rel="stylesheet" type="text/css"media="print" href="print.css" />

All’interno di del file PRINT.CSS basterà specificare alcune semplici regole.
Innanzitutto rendiamo invisibili quegli elementi che fuori dallo schermo non hanno una funzione, come per esempio un menu o addirittura l’intera sidebar o l’header:

#header, #menu, #sidebar { display: none;}

Poi impostiamo il tag <BODY>, specificando sfondo della pagina, colore del testo, dimensione e tipo di font da utilizzare:

body{
background: white;
font-family: Georgia, serif;	
font-size: 12pt;
color: black;}

Quindi passiamo a dimensioni e margini degli elementi che contengono il testo: ammesso che quest’ultimo si trovi all’interno del div “content”, a sua volta inserito dentro ad un div “container”, una soluzione può essere quella di impostare il padding per il primo e la larghezza per il secondo:

#container {#width: 100%;}
#content {#padding: 10px;}

Infine, qualcosa che tornerà decisamente utile agli utenti che stanno leggendo il nostro sito su carta, sperando che abbiano stampato usando un browser degno di questo nome. Impostiamo il foglio di stile in modo che gli indirizzi a cui puntano i link (i quali evidentemente non potranno essere cliccati…) compaiano per esteso tra parentesi quadre dopo che è stato riportato il link stesso:

a:link:after, a:visited:after {content:" [" attr(href) "] "; }

Ed ecco questo elementare foglio di stile per intero:

body{
background: white;
font-family: Georgia, serif;	
font-size: 12pt;
color: black;}

#container {#width: 100%;}
#content {#padding: 10px;}

a:link:after, a:visited:after {content:" [" attr(href) "] "; }

Evidentemente, queste poche regole potranno essere completate con altre legate ad aspetti specifici del nostro html, e saranno inoltre integrate in maniera decisiva dal markup utilizzato per i contenuti. In particolare non dovremo (ancora una volta) trascurare i tag H1, H2 o H3, ecc., che anche se non specificati nel CSS, avranno l’aspetto che il browser assegna loro di default, e contribuiranno a rendere leggibile e piacevole la nostra pagina.

Come al solito, se non siete d’accordo su qualcosa, o avete suggerimenti, vi aspetto nei commenti…

Qualche link utile:
http://davidwalsh.name/optimize-your-links-for-print-using-css-show-url
http://www.alistapart.com/stories/goingtoprint/
http://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/

Tempo fa abbiamo visto come utilizzare la libreria javascript SWFobject per visualizzare un file flv all’interno di una pagina html, utilizzando il JW Flv player.

Se abbiamo ben presente come pubblicare un video in questo modo, sarà un gioco da ragazzi impostare il player per la riproduzione di una playlist di file FLV. Quindi il tutorial che segue presuppone la conoscenza di tutto quello che abbiamo visto nel post dedicato alla pubblicazione di file FLV in una pagina HTML.

Fatta questa dovuta premessa possiamo cominciare…
Read the rest of this entry »

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

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