Inevitabile quindi che sia arrivato il plugin per jQuery che permette di creare timeline in una pagina html. Il punto di partenza, a livello di markup, sono un paio di liste UL, poi fa tutto il plugin, o quasi. Da provare: timelinr

La tecnica si basa sull’attributo color-stop che viene specificato per il gradiente: indicando due color-stop con la stessa posizione, è possibile ottenere un cambio improvviso di colore, anziché una graduale sfumatura.
Con questa tecnica, l’autrice del post mostra come ottenere pattern più complessi, come quello in stile picnic o a scacchiera.
A parte il risultato finale, il post è interessante anche per alcune scelte della webdesigner, come l’utilizzo di un color-stop trasparente, per sfruttare il colore di sfondo come fallback per i browser che non supportano i gradienti.

In questo Cross Browser CSS gradient buttons Red Team Design mostra come sfruttare la tecnica dei gradient pattern appena vista, insieme alle altre proprietà (RGBA color mode, Box shadow, Text shadow, Rounded corners) che si usano di solito per creare pulsanti con CSS3, per ottenere un risultato abbastanza particolare (proprio per via dei pattern).

Anche in questo caso grande attenzione alla compatibilità con i browser, visto l’utilizzo massiccio di proprietà non sempre supportate.

Ecco i due link:

• Checkerboard, striped & other background patterns with CSS3 gradients
• Cross Browser CSS gradient buttons

Link: so you still think the Internet is free

Matthew James Taylor mette a disposizione tre modelli di pagina html a tre colonne con layout liquido, pronti per l’uso. L’autore per comodità di pubblicazione ha inserito il foglio di stile nell’html… non sarà una cattiva idea spostarlo in un CSS a parte.
Se ce ne fosse bisogno, vi ricordo che il layout liquido è quel layout che si estende ed occupa tutta la finestra del browser, a prescindere dalle dimensioni di quest’ultima e dalla risoluzione.

Ecco il link: The Perfect ‘Blog Style’ 3 Column Liquid Layout. Troverete i modelli per un layout liquido con larghezze in percentuale, in em, oppure con le colonne di dimensione fissa in pixel.
Un ottimo risorsa da tenere nel cassetto, e utilizzare, modificare, adattare tutte le volte in cui dovrete realizzare un sito internet o un blog con layout a tre colonne.

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