Monthly Archives: March 2007

Flash video accessibili e non intrusivi

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

Loading the player…


Google, the Master Plan. © 2007 O. Halici, J. Mayer

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…).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 $('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:

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

jQuery easing plugin

Vi ricordate le famose ‘easing equations’ di Robert Penner, che diedero il via ad un mondo di interfacce – o siti – (in Flash) che si “trasformavano” nelle dimensioni e/o interagivano rimbalzando, dissolvendosi ecc. tramite tutta una serie di algoritmi che ne modificavano lo stato in maniera parametrica? Anche io nel 2004 ero flash addicted e questo ne è un esempio. Un sito, mai terminato, che doveva servire da showcase e tecnicamente rappresentava un buon punto di arrivo per i miei skill con l’ActionScript e appunto con questi effetti di molleggio, dissolvenza etc.

Ricollegandomi al precedente post sugli effetti da applicare a frammenti di codice xHTML (tags) per mezzo di javascript, o meglio per mezzo dell’incredibile e potentissimo jQuery e dei suoi plugin, ecco che oggi dal sito learningjquery.com trovo questo plugin “jQuery Easing” sviluppato da GSGD che mi fa letteralmente sobbalzare sulla sedia non appena provo gli effetti nella pagina d’esempio.

Sono certo che stimolerà la mia fantasia così come lo farà con la vostra.
Enjoy!

BA609 – Any place to any place… at any time on time

Un aereo? Un elicottero? Tutti e due. Ed é anche italiano.
Nel 2003, Bell/Agusta Aerospace Company ha scritto una importante pagina di storia dell’aviazione, presentando al mondo il primo convertiplano ad uso civile. Un aereo che può decollare in verticale come un elicottero e viaggiare a + di 500 Km/h.

Loading the player…


BA-609 TiltRotor Flight Demonstration @ HAI Expo. © Bell/Agusta Aerospace Company

Il BA609 rappresenta un approccio totalemente nuovo al trasporto ‘executive’, perchè combina la possibilità di volare ed atterrare ovunque al comfort ed alla velocità di un aereo turboprop. Una doppia certificazione (FAA e Europea) é prevista per il 2010 con le prime consegne subito a seguire. Bell/Agusta ha ricevuto ordini per più di 60 aeromobili da 40 clienti in 18 nazioni diverse.

drop shadows con jQuery

Avvertenza: le porzioni di codice riportate in questo post non corrispondono più alla reale implementazione iniziale nel blog. Ragioni di manutenibilità, compatibilità o mera obsolescenza ne hanno reso necessaria la rimozione.

Esigenza:

Applicare un’ombra ad un’immagine qualsiasi, di qualunque dimensione, con i CSS e senza introdurre elementi extra di markup… o perlomeno che così sembri!

color_imageL’effetto è esattamente quello che vedete qui a fianco. L’ombra è un classico. Prima degli standards, che da un certo punto di vista hanno anche stimolato l’esigenza di creare stili parametrici, per così dire, coè validi per una o l’altra cosa, le immagini se avevano l’ombra era perchè dal photoshop gliela mettevi. Sin dal maggio 2004 si parla di ‘ombre’ intorno alle immagini e fatte coi CSS.

Prima di tutto bisogna dire che dal punto di vista del nostro codice (X)HTML, l’ esempio originale – introduce nel markup ben 4 div (che però non hanno valore semantico o struttuale) che “avvolgono” l’immagine, e per ognuna di esse dispone un background tagliato in un certo modo e posizionato di conseguenza. Notare che non c’è altro modo con l’(x)html ed i css per fare un’ombra!

E tutto questo, nel caso sia necessario avere un markup strutturato e semantico, probabilmente non è il metodo migliore per avere l’ombra. Se la sintassi è il vero problema, questa tecnica non è quella giusta, perchè introduce extra-markup.

Ma no, noi vogliamo l’ombra, e non vogliamo farla col photoshop su ogni immagine. E vogliamo pure mantenere il codice pulito…. cioè non vogliamo aggiungere a mano div su div intorno ad ogni immagine.

Ecco, questo è il codice (x)html che “avvolge” la nostra immagine.

1
2
3
4
5
6
7
8
<div class="wrap0">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<img alt="La mia immagine con intorno l'ombra" src="immagine.gif" /></div>
</div>
</div>
</div>

mmmh… i puristi non sembrano soddisfatti.
Non sarebbe meglio avere solo questa riga di codice?

1
<img class="dropshadow" alt="La mia immagine con intorno l'ombra" src="immagine.gif" />

Soluzione:
Ecco come jQuery risolve il problema, introducendo a runtime (al caricamento del documento) il codice extra di cui sopra:

1
2
3
$(document).ready(function(){
$("img.dropshadow").wrap("<div class='wrap0'><div class='wrap1'><div class='wrap2'>" + "<div class='wrap3'></div></div></div></div>");
});

Questo snippet usa il metodo

1
.wrap()

per creare le 4 div. Il fatto che le div siano aggiunte a runtime ci semplifica notevolmente la manutenzione del sito, l’aggiornamento, e la migrazione verso una nuova ipotetica grafica mantenendo inalterato il nostro markup.
Ogni div ha un background posizionato di conseguenza nei CSS, vediamo come:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* jquery dropshadow classes */
.wrap0 {
float:left;
background: transparent url(images/shadow.gif) right bottom no-repeat;
margin: 1em 0.5em 0 -4px;
}
.wrap1 {
background:transparent url(images/shadow180.gif) no-repeat;
}
.wrap2 {
background:transparent url(images/corner_bl.gif) -16px 100% no-repeat;
}
.wrap3 {
padding: 10px 12px 12px 10px;
background:transparent url(images/corner_tr.gif) 100% -16px no-repeat;
}
div[class="wrap0"]{ /* for modern browsers */
margin: 0 1em 0 -8px;
}

Ecco.
Quindi quale è il vantaggio dell’usare jQuery per fare i drop shadow?
Che tutto si riduce al solo tag immagine

1
<img class="dropshadow" alt="La mia immagine con intorno l'ombra" src="immagine.gif" />

a cui aggiungo solo la classe “dropshadow”.
Et voilà, drop shadows con jQuery.

ep10

Ci vogliono 4/5 gradi di passo positivi per tenerlo in hovering; è il più grande dei miei elicotteri r/c. Si tratta di un elicottero classe .600 elettrico. Pesa circa 2 Kg in assetto di volo e consuma circa 35A per stare in aria, con picco di 49 a +10 gradi di passo.
I giri del rotore sono costanti (governor mode) in qualsiasi condizione di volo; assorbimento max circa 850Watt; è un QWW Ep10.

Loading the player…

Motorizzazione:
Kontronik Mambo 15
Kontronik Jazz 55

Batterie:
FlightPower evo20 5s1p 18.5V 3700mAh

Update 13/02/2008: questo elicottero (I-QUIK) non è più in ordine di volo. Al suo posto ho comprato un Mikado Logo 500DX attualmente in fase di montaggio. Dal Quick EP10 sono stati rimossi, per essere rimontati sul Logo, il set motore+controller Kontronik, il gyro CSM HLG 200, la ricevente Graupner SMC19 PCM; tutto il resto è stato dismesso. Seguiranno informazioni sul collaudo del Logo 500 DX, previsto per aprile 2008.

multicolumn lists con jQuery

Problema:

Creare una lista disposta su 3 colonne, senza sapere a priori quanto è lunga la lista.

E aggiungono:

Non preoccuparti di quanto è lunga la lista, ci servono 3 colonne di links. La lista andrà su un sito pubblico.

mmmh. vediamo…
L’obiettivo, come al solito, è scrivere il meno possibile. Ma non perchè sono lazy, ma perchè è una sfida. Quindi mi serve certamente 3 colonne UL. Flottate, così ottengo 3 colonne. ok.
Ma per scrivere meno, dovrei avere una sola lista….

Per creare una lista su tre colonne, se sapessi quanti elementi sono nella prima e nella seconda colonna non sarebbe difficile. Basta applicare al primo LI della mia ipotetica seconda colonna, un margin-top negativo pari all’altezza della prima, ed un margin-left sempre pari alla larghezza delle colonne (tutte e due le precedenti, e così via).

1
2
3
4
5
6
7
8
9
10
11
12
<ul id="mainlist">
<li class="licol1"><a href="#">1 Exxon Mobil (XOM)</a></li>
<li class="licol1"><a href="#">2 Exxon Mobil (XOM)</a></li>
<li class="licol1"><a href="#">3 Exxon Mobil (XOM)</a></li>
<li class="licol1"><a href="#">n --- --- </a></li>
<li class="licol2"><a href="#">1 Exxon Mobil (XOM)</a></li>
<li class="licol2"><a href="#">2 Exxon Mobil (XOM)</a></li>
<li class="licol2"><a href="#">n --- --- </a></li>
<li class="licol3"><a href="#">1 Exxon Mobil (XOM)</a></li>
<li class="licol3"><a href="#">2 Exxon Mobil (XOM)</a></li>
<li class="licol3"><a href="#">n --- --- </a></li>
</ul>

Ma se questa lista non so quanto è lunga? Voglio dire, se mi possono anche dividere in tre le liste, assegnare una classe diversa per ogni blocco di lista, come posso inserire il margine negativo al punto prestabilito per fare andr sù la seconda e la terza colonna? E quale è questa misura, esattamanete in pixel?(E’ evidente che questa lista viene creata dinamicamente tramite qualcosa server-side come per es. una JSP.)
Ecco che mi viene incontro jQuery una libreria javascript ideata da John Resig e attualmente molto, molto diffusa ed estesa da molteplici plugins sviluppati dalla community.
Infatti il motto di jQuery è “write less, do more” e significa che jQuery serve per scrivere meno javascript ed ottenere di più. Tra le cose che sin dall’inizio mi hanno impressionato positivamente di questa libreria, oltre ai metodi built-in per quel che riguarda Ajax, qualche effetto e in generale la manipolazione del DOM, sono i selettori (supporta la sintassi di CSS 1-3 e basic XPath ).

E vediamo con questi selettori cosa si può fare. Ecco il codice che mi risolve brillantemente il problema delle tre liste parametriche affiancate, e del loro posizionamento.

1
2
3
4
5
6
7
8
$(document).ready(function(){
elNumberInColOne = $(".licol1").length;
var PixelCountColOne = 0;
for (i=0; i li.licol2:eq(0)").css({ marginTop: - PixelCountColOne});
ElNumberInColTwo = $(".licol2").length;
var PixelCountColTwo = 0;
for (i=0; i li.licol3:eq(0)").css({ marginTop: -PixelCountColTwo});
});

La parte più interessante, secondo me qui da notare è il selettore inserito nel ciclo

1
"li.licol1:eq("+i+")").height() + 9

che cerca nel LI con classe “licol1″ OGNI elemento LI e ne calcola l’altezza in px. +9 poi sono il padding top e bottom e il bordo assegnati via CSS al singolo LI (al suo A, a dire il vero).
Quindi cosa fa questo script?

  1. Prende la prima colonna, e per ogni LI ne calcola l’altezza in pixel
  2. Assegna al primo LI della seconda colonna un margin-top negativo pari all’altezza della prima colonna. Il margin-left resta assegnato dal css.
  3. Ripete lo step 2 nella terza colonna
1
"ul#mainlist > li.licol2:eq(0)"

Et voilà. Css multicolumn lists.
Comunque allego il sorgente dell’esempio, per chi volesse usarlo.

WordPress 1.5.2

Questo sito funziona con WordPress, a state-of-the-art semantic personal publishing platform with a focus on aesthetics, web standards, and usability.
Ieri sera avevo ben pensato di upgradare WP alla versione 2.1; ho scaricato dal sito lo zip, ho salvato dal mio server le pagine di cui avevo modificato qualcosa nel frontend e ho cancellato la vecchia versione. Contando sul fatto che i miei post fossero sul db ho cancellato e riuploadato il contenuto del folder wordpress.
Rilancio la url e mi accorgo che ho fatto un casino. Primo ho perso tutti gli upload jpg. Secondo e più grave, il mio old-styled shared server su MediaTemple ha la versione 3 di mySQL e che, sentite sentite, WP2 gira solo col la versione 4. Bene, scrivo a MT ma mi rispondo che

MySQL 4 is not available on the (ss) Shared Server. If you need a newer version of MySQL you will need to migrate to the (gs) Grid Server

Sfortunatamente questo costerebbe 20$ al mese, che per ora non vale la pena di investire. Così sto faticosamente ri-inserendo i vecchi post, le categorie ecc nella vecchia 1.5.2 che ho riscaricato.
Fortunatamente tutte le cose senza senso che vevo scritto qui, erano nel vecchio db e le sto reinserendo. Un grazie spaciale a Leo, che mi ha aiutato a capire come rifare l’installazione ed il dump del db.

Sarà una buona occasione per fare un nuovo tema (xHTML + CSS) per questo sito, che salvo decisioni in merito di budget per l’hosting, continuerà ad essere versione 1.5.