Nulla contro le impostazioni di default del browser, ma, se serve, questo comportamenteo può essere modificato con Javascript e l’aspetto della finestra può essere personalizzato attraverso i fogli di stile.

trovate il tutorial e il relativo plugin per personalizzare questa finestra di dialogo su tutorialzine: How to Create a jQuery Confirm Dialog Replacement

via sixrevisions

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.


Sia il player, sia la libreria javascript sono contenute nel pacchetto d’istallazione di Flowplayer che possiamo scaricare qui. Sul sito di Flowplayer troveremo tre possibili download, e tre possibili licenze, a seconda dell’uso che abbiamo in mente per il player (per un utilizzo commerciale, flowplayer è a pagamento).

L’installazione base del player prevede tre step.
Innanzitutto è necessario includere lo script nella pagina:

<script type="text/javascript" src="flowplayer-3.0.0-rc3.min.js"></script>

Quindi è necessario impostare l’elmento della pagina html che verrà sostituito con il player. Il funzionamento dello script ci permette di specificare semplicemente un link diretto al file FLV al quale, perchè javascript e il DOM funzionino, è necessario assegnare un ID. Chiaramente, lo stile (nel quale in particolare vengono specificate le dimensione del player) può essere assegnato anche con un css esterno.

<a  	 href="video.flv"  
	 style="display:block;width:400px;height:300px"  
	 id="player"> 
</a>

A questo punto richiamiamo la funzione javascript flowplayer, specificando due parametri: l’ID del link da sotituire, ed il nome del file swf da utilizzare come player:

<script>
	flowplayer("player", "flowplayer-3.0.0-rc3.swf");
</script>

Questo è quanto, se è tutto corretto e javascript è attivato, il player dovrebbe funzionare a dovere, proprio come si vede nella demo.

Quella che abbiamo appena visto insieme è l'implementazione minima di Flowplayer (come è documentata anche sul sito di FP). Nei prossimi post vedremo in che modo customizzare il player, e capiremo come sfruttare a pieno lo script per far sì che il video sia comunque accessibile. Ottimi motivi per iscriversi al feed rss di danielerollo.com: stay tuned...

È 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

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

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.

DOWNLOAD NECESSARI
Ecco quello di cui avremo bisogno (agli indirizzi che seguono, oltre che un bel po’ di gente a cui dire semplicemente grazie di esistere, troveremo sia gli script e le librerie di cui avremo bisogno, sia la documentazione necessaria per capirne a pieno il funzionamento):

• l’ultima versione di jQuery
• il plugin serialScroll (il pacchetto per il download contiene anche scrollTo che sarà necessario)
• il plugin Truncate
• l’ottimo parser PHP Simplepie

MARKUP
A questo punto siamo pronti… Cominceremo dal markup.
Il div SCREEN sarà il contenitore all’interno del quale si troveranno le immagini che funzioneranno da pulsanti e il div SCROLL, quello effettivamente da scrollare. Lo scrolling avverà relativamente agli elementi LI presenti all’interno del div SCROLL. Ecco il codice html (qui la live demo):

<div id="screen">
<img class="prev" src="img/up.png" alt="prev" />
<div id="scroll">
<ul>
	<li><a href="url-del-post-corrente">Titolo del post</a>
Descrizione del post - -- Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</li>
	<li><a href="url-del-post-corrente">Titolo del post</a>
Descrizione del post - -- Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</li>
	<li><a href="url-del-post-corrente">Titolo del post</a>
Descrizione del post - -- Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</li>
	<li>...</li>
</ul>
</div>
<img class="next" src="img/down.png" alt="next" />
</div>

IL FOGLIO DI STILE
Bisognerà quindi impostare lo stile per questi elementi, in modo che venga visualizzato solo un elemento LI per volta. Per farlo assegneremo a SCROLL un altezza fissa e nasconderemo tramite la proprietà OVERFLOW tutto il contenuto del div che eccede quest’altezza. Tra le altre cose poi, distanzierermo verticalmente tra loro i vari LI settando un discreto margine inferiore. Ecco il CSS (qui il risultato):

#screen  {width:300px; text-align: center}
#screen img {margin: 0 auto}

#scroll {width:300px; height:90px; overflow: hidden; background: #dcdcdc; border: 1px solid #cccccc}
#scroll ul {margin:0; padding:0}
#scroll ul li {padding: 5px 10px 5px 5px; margin: 0 0 40px 0; list-style: none; text-align: left; }

jQuery, serialScroll e Truncate
Per far sì che lo scroll funzioni, bisognerà includere jQuery e ed il plugin serialScroll (che per funzionare ha a sua volta bisogno di scrollTo). Richiameremo anche Truncate, che ci servirà a breve.

<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery.scrollTo.js"></script>
<script type="text/javascript" src="jquery/jquery.serialScroll.js"></script>
<script type="text/javascript" src="jquery/jquery.truncate.js"></script>

La funzione serialScroll ci permetterà di rendere scrollabile SCROLL, definendo LI come item a cui lo scroll dovrà riferirsi.

$(document).ready(function(){	

$('#screen').serialScroll({
target:'#scroll',
items:'li',
prev:'img.prev',
next:'img.next',
axis:'xy',
duration:700,
force:true
});

});

Resta da considerare un aspetto che può vanificare il nostro tentativo di rendere assolutamente gradevole l’aspetto dello scroller: all’interno dell’elemento LI che viene visualizzato si potrebbe trovare un testo che occupa uno spazio superiore all’altezza prevista. Una possibiltà per ovviare a questo problema è “troncare” il testo in questione, in modo che non ecceda l’altezza del nostro scroller e che quindi non risulti tagliato. A questo scopo utilizzeremo un altro plugin per jQuery, Truncate. Una volta incluso nella pagina, ci servirà per impostare il numero di caratteri oltre i quali sarà necessario troncare il testo (senza che però venga tagliata a metà l’ultima parola): in questo caso 150.

$("#scroll ul>li").truncate(150);

A questo punto il nostro scroller sarà pienamente funzionante: qui c’è una demo della versione realizzata fino ad ora. Adesso bisognerà riempirla con i contenuti da estrarre da un feed RSS.

PARSARE IL FEED RSS CON SIMPLEPIE
Evidentemente abbiamo bisogno di uno script server-side, in grado di recuperare il contenuto del feed che desideriamo visualizzare. Se utilizziamo PHP, fa al caso nostro Simplepie. Una volta incluso simplepie all’interno della pagina, potremo creare un array contenente i primi dieci item del nostro feed:

handle_content_type();
for ($x = 0; $x < $thefeed->get_item_quantity($total_articles); $x++  )
{
$articles[] = $thefeed->get_item($x);
}
?>

Utilizzeremo quindi un ciclo FOREACH per estrarre da questo array titolo, link e descrizione del post contenuti in ogni item. Sfrutteremo inoltre lo stesso ciclo per “creare” la lista all’interno della quale avverrà lo scrolling.

<?php
foreach ($articles as $item)
{
echo '<li><a href="' . $item->get_link() . '">' . $item->get_title() . '</a><br/>'. $item->get_description().' </li>';
}
?>

Questo è quanto: qui c’è la pagina PHP completa per realizzare lo scroller di feed rss che invece vedete in azione qui.

Spero che il tutorial sia stato utile: in questo caso ecco l’inidizzo per aggiungere danielerollo.com al vostro reader e restare sempre aggiornati.
Quanto a suggerimenti o critiche, come sempre potremo discuterne nei commenti…

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.

Progetto progressivo

A differenza di Final Cut, che permette in qualsiasi momento di cambiare la modalità di scansione di una sequenza all’interno del progetto, in Premiere, la decisione tra video interlacciato e progressivo deve essere assolutamente presa al momento della creazione del progetto, e si rifletterà necessariamente sulle sequenze che all’interno di questo andremo a creare.
Una volta scelto NUOVO PROGETTO (dal menu File, o dal menu che compare all’apertura del programma), e una volta selezionato il preset che più si avvicina alle nostre esigenze, potremo modificarne le caratteristiche aprendo la tab IMPOSTAZIONI PERSONALIZZATE. Qui, per impostare un video progressivo, nella scheda GENERALI, dal menu CAMPI, scegliamo NESSUNO – SCANSIONE PROGRESSIVA. In questo modo, tutte le sequenze del nostro progetto avranno necessariamente questo tipo di scansione.

Metraggio interlacciato nella sequenza

Una sequenza in progressivo può naturalmente contenere materiale non progressivo. L’effetto interlacciato, nei casi meno “gravi” – per così dire, sparisce con l’esportazione, che come vedremo, ed ovviamente, sarà progressiva. Nei casì in cui l’interlaccio è decisamente evidente, dobbiamo invece intervenire a monte, cercando di eliminare il problema prima dell’esportazione. Premiere offre un ottimo strumento per questo scopo. Cliccando con il tasto destro del mouse sulla clip all’interno della timeline, e selezionando OPZIONI DI CAMPO, possiamo decidere il destino dei campi della nostra clip (vale la pena dare un’occhiata anche alla relativa pagina su Adobe Help Center).

Come si vede nell’immagine, le possibiltà (oltre a lasciare invariata la clip) sono tre:

Questa opzione genera fotogrammi interlacciati, a partire da fotogrammi in modalità progressiva: ovviamente non è il nostro caso.

Questa è l’opzione da spuntare per eliminare eventuali brutture dovute a metraggio interlacciato. Se selezionata, Premiere genera fotogrammi progressivi basandosi sul campo superiore, nel caso di progetto progressivo; in tutti gli altri casi in base al campo impostato come prioritario.

Quest’opzione, infine, permetterà di eliminare lo sfarfallio dovuto all’interlaccio di frame che contengono piccoli dettagli orizzontali.

Esportazione in progressivo

Resta un ultimo semplice passo da fare, per creare il nostro video progressivo: esportare in progressivo. File > Esporta > Filmato. Le opzioni che ci interessano si trovano nella scheda FOTOGRAMMA CHIAVE E RENDERING. Ovviamente possiamo scegliere la priorità di campo, e quindi anche NESSUN CAMPO, per esportare un video perfettamente progressivo. Anche Premiere, come Final Cut, permette di deinterlacciare al momento dell’esportazione tutto il materiale utilizzato nel montaggio: serve a questo l’opzione DEINTERLACCIA METRAGGIO VIDEO presente nella finestra, se non riusciamo a deinterlacciare il materiale montato in timeline, possiamo fare un tentativo.

Riprese e acquisizione

Quelle che abbiamo visto sono poche opzioni da tenere ben presenti durante il montaggio, e normalmente sono sufficienti a produrre un video progressivo all’altezza degli schermi digitali sui quali lo visualizzeremo. Ovviamente i problemi dovuti all’interlaccio delle clip possono essere diversi, e molto dipende dalle riprese e dall’acquisizione: se possiamo lavorare in progressivo già in queste fasi, otterremo sicuramente un immagine migliore di quella che invece producono i software, interpolando frame interlacciati per ricavare frame progressivi.

Questo è tutto, ma presto arriveranno altre guide su Premiere e in generale su altri aspetti della postproduzione video: una buona ragione – se non l’avete ancora fatto – per aggiungere il feed rss di danielerollo.com al vostro aggregatore…