jquery form validation (continua)

Robin Herbots con il suo plugin ha eclissato il precedente jquery.mask che sembrava la panacea per molti mali.

Soprattutto, nella validazione della data espressa in vari formati è estremamente più semplice ed intuitivo. Nel calcolo degli anni bisestili, della validità  intrinseca di una data. Agendo direttamente sull’evento keyup: non puoi digitare altro che cifre nello scheletro preimpostato

Questa pagina offre anche molto aiuto per formati meno usuali. Tutto con la consapevolezza che, con HTML5, sarà  il browser a dover fare questo sporco lavoro, per tutti i form. Senza requie.

tanti auguri JZ4

Io e te siamo all’Inter dallo stesso anno, però nessuno mi ringrazierà  né festeggerà . Quindi per celebrare in modo surreale questa affinità  ho scelto  di mettere online una pagina su  inter.it che non vedrà  nessuno, a parte i 25 manzoniani lettori di questo blog.

Il link è questo

Si tratta di un box stilizzato come un quadrotto inter. Ho codificato un video in 4 formati come vuole il Video 4 Everybody generator

Infine, con un azione di jquery si sostituisce al click il codice video.

come fare un video a regola d’arte

Ho avuto una domenica tribolata perché la sintesi video della partita (pubblicata su inter.it), inizialmente  fruibile sui mac, è proditoriamente  stata sostituita da un messaggio “MIME type non corretto”. Com’è stato possibile? Sabotaggio? File sostituito?

A complicare la cosa… gli highlights erano fruibili da chrome e safari su mac, e da chrome su windows. Ma non da firefox su windows.

L’incapture_07042014_121755ghippo era duplice: solo online-convert garantisce una coppia di codec audio/video compatibile con tutti. E poi, la nostra configurazione AWS amazon faceva servire da S3 un file non modificato da oltre 12 ore. Nella riscrittura degli header http si passava da un MIME TYPE video/webm a un più generico binary-octet stream.

L’idiosincrasia era dovuta al fatto che firefox è più ligio al content-type, e con il degradamento progressivo chrome e safari chiedevano il file mp4 mentre Firefox la clip webm.

 

html5 video generator

Dopo una controversa domenica passata sulle piste di Estoul, ho avuto una folgorazione:  gli highlights video del sito dell’INTE non si visualizzano correttamente su Internet Explorer.

Mi sono esaltato per aver risolto un baco nello slider con  il vecchio laptop sulle gambe,  sul balcone al sole di Marzo. Ma era un sollievo fugace.  Convertire in proprio un video è sicuramente più error-prone che mandarlo su youtube.

Questo è il caso ideale, ma ovviamente non sempre funziona.

Questo è un ottimo tutorial, che ci mostra ad esempio che il browser perfetto non esiste: questo limitandosi alla situazione (ormai marginale dei desktop).

La soluzione, per Explorer 10+ per windows, è stata di approntare anche una versione .ogv del video. Come fare? Senza tanti patemi d’animo, rivolgendosi a online-convert oppure, in locale, utilizzando MIROVIDEO. Quindi in definitiva servono 4 versioni della stessa clip: OGV MP4 WEBM e FLV

La versione ‘master’ del video è quella mp4. La seconda e quarta versione vengono realizzate con Sorenson Squeeze. La prima e la terza con online convert oppure mirovideo.

Questo link aiuta a programmare il decadimento progressivo.

www.gianmarcopoma.com revamped

Settimana di grandi cambiamenti, di febbrili preparativi.  Di voci incontrollate e speranze da germogliare. E’ anche un’occasione per voltare pagina, e provare cose nuove. Ho intanto rilasciato il mio nuovo sito, completamente responsivo e html5. Un pretesto per riscrivere il curriculum.

A questo indirizzo si spalancano nuove possibilità  su come gestire e configurare un video e un videoplayer, come se fosse un elemento  qualsiasi del DOM  della pagina. Real Player, che voleva migliaia di dollari per licenziare il proprio screaming server, si morderà  le mani.

Questo post apre nuovi orizzonti all’utilizzo di video fullscreen

Pulito pulito, il codice per il video

<video autoplay loop poster="polina.jpg" id="bgvid">
<source src="polina.webm" type="video/webm">
<source src="polina.mp4" type="video/mp4">
</video>

E l’essenziale javascript per definire il canvas.

video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(polina.jpg) no-repeat;
background-size: cover;
}

inter.it si apre all’HTML5

Mettere le mani nel lavoro di altri e’ sempre complicato, specialmente quando si parla della home page di un sito che carica decine di javascript e un css da quasi 300k. Se poi questo sito e’ quello dell’inter e per ignavia non hai un valido ambiente di staging, c’è il rischio di perdere la pazienza.

La lega di Serie A dà  diritto alle squadre (questo è quanto han detto all’Inter, ma alla Juventus, ad esempio fanno quel c. che vogliono) di pubblicare gli highlights dopo la mezzanotte del giorno di gara a patto di non metterli su youtube. Era quindi il momento per fare un salto in avanti, abbandonando flash e scovando qualcosa di piu’ compatibile e moderno.
La scelta è caduta su mediaelements di John Dyer e soprattutto sul formato WebM preferibile rispetto all H.264 nonostante…

Il risultato? Che ogni browser tratta diversamente il tag

<video>

mettendoci i suoi controlli nativi, ma almeno per Firefox, Explorer, Chrome siamo a posto (sia windows che MacOsX). E anche per i tablet (iOS e Android)

Il framework è disponibile qua

a parte il codec VP8 è importante configurare apache2 per servire:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

SMWest-2010-HTML5-Workshop

ossimoro

chi ha conosciuto almeno una versione di office, o almeno una versione di internet explorer

sa

che microsoft e we love web standards esprimono una nota figura retorica.