Michele Bologna

Tag: html5

  • HTML5 e CSS avanzato: una guida per (re)-impararli

    Nonostante HTML5 sia ancora un release candidate al momento della scrittura di questo post, molte delle peculiarità del linguaggio sono supportate dai browser più evoluti (Chrome, Safari, Firefox, Opera ed IE10).

    Ho deciso di fare un ripasso delle principali istruzioni di typesetting (e di imparare anche i nuovi tag) presenti in HTML5 e delle principali proprietà presenti in CSS. Per questo ripasso mi sono affidato a due guide ben scritte da Shay Howe:

    • Guida base HTML/CSS (comprende anche HTML5 e CSS3). Non fatevi ingannare dalla presenza della parola “base”, perché i concetti esposti sono tutt’altro che base. Per esempio, grazie a questa guida ho ripassato il box-model e il posizionamento degli elementi in CSS [vi ricordate la differenza tra static, relative, absolute e fixed?]. Segnalo anche la presenza della guida ai gradienti CSS3, un’esauriente carrellata di tutte le lists [sapete usare una definition list?], i nuovi controlli per i form in HTML5, gli onnipresenti nuovi tag per audio/video ed infine le tabelle [sapete cos’è la property border-collapse?];
    • Guida avanzata HTML/CSS. Dopo aver assimilato i concetti presenti nella guida precedente, in questa guida segnalo alcuni concetti interessanti come gli sprite CSS, i selettori CSS composti (:nth-child), i preprocessori HTML e CSS (haml e SASS).

    Entrambe le guide sono ben fatte e ricche di consigli preziosi come la minification, l’abilitazione di mod_gzip e tante altre informazioni utili. Da salvare nei bookmark!

  • Validazione dei form: jQuery o HTML5?

    Quando si realizza una form in HTML, è d’obbligo implementare una validazione dei dati inseriti (sia per verificare l’effettiva correttezza dei dati inseriti, sia per una questione di sicurezza). La validazione può essere realizzata lato client (tipicamente via JavaScript) o lato server. Nella mia esperienza, la soluzione migliore è quella di utilizzare un approccio ibrido: validazione lato client (via jQuery) e validazione lato server (tramite un linguaggio dipendente dall’applicazione realizzata); questo approccio garantisce una migliore distribuzione dell’onere di validazione, sia una maggiore robustezza del controllo (cosa succede se un browser non supporta/disabilita JavaScript?).

    Attualmente, la migliore soluzione per la validazione lato client è quella di usare jQuery in combinazione con un plugin di validazione (io ho sempre utilizzato Validation). L’utilizzo del plugin è veramente semplice: basta dichiarare le regole di validazione (eventualmente usando una regexp) e chiamare il metodo validate() sulla form che vogliamo validare. Il plugin si preoccuperà di evidenziare con un bordo rosso i campi non correttamente validati, è offrirà la possibilità di inserire un messaggio custom per guidare l’utente nella corretta compilazione del campo.

    Un approccio molto più recente, e adatto ai browser che già supportano HTML5, è quello di utilizzare la validazione nativa offerta dai componenti, ad esempio: il tag input, specificando il type implementa una validazione nativa in base al tipo passato come argomento, come ad esempio l’email.

    <input type="email" name="email" size="20" maxlength="28">

    In particolare segnalo l’attributo pattern che permette di specificare una regexp per la validazione (proprio come nel plugin per jQuery).
    Per l’inserimento di eventuali messaggi di errore, si sfruttano le proprietà CSS3, vi rimando a questo interessante post per l’approfondimento.
    La soluzione via HTML5 è senz’altro preferibile ma apre un problema di compatibilità: cosa succede con i browser più datati? Ancora una volta, un approccio ibrido sembra essere la soluzione ideale: jQuery per la validazione sui browser più datati e HTML5 per i browser più evoluti.

  • HTML5, video in autoplay e iOS4

    Come sapete i dispositivi handheld di Apple (iPhone, iPad e iPod Touch) non permettono di visualizzare contenuti Flash (per fortuna, dico io), ma permettono di sfruttare tutte le nuove potenzialità messe a disposizione da HTML5, come la possibilità di visualizzare video e animazioni (che fino a poco tempo fa erano prerogative di Flash). In tempi molto rapidi, HTML5 è stato eletto come la soluzione alternativa a Flash, se non addirittura come soluzione definitiva a Flash.

    Un’opportunità interessante che viene offerta da HTML5 su iOS4 (l’ultima release del sistema operativo di iPhone, iPad e iPod Touch) è la possibilità di visualizzare video integrati in una pagina web tramite il tag <video>, e realizzare il cosiddetto autoplay (il play automatico di un video non appena si visualizza la pagina).

    Fino alla versione di iOS3, per realizzare l’autoplay esisteva un workaround che faceva ricorso ad un fakeclick in jQuery (simulava il click del video).

    Da iOS4 in poi, il workaround non funziona e siamo costretti a modificare il codice (semplificandolo!). Vediamo come.

    Prima di tutto dobbiamo utilizzare il nuovo tag di HTML5, ovvero il tag video, indicando il video di cui vogliamo che venga fatto il playback in automatico:

    <video id="myVideo" width="640" height="480" controls>
<source src="video.mp4" type="video/mp4; codecs=’avc1.42E01E, mp4a.40.2′">
</video>

    In secondo luogo, tramite JavaScript, indichiamo al browser che il video deve essere lanciato in autoplay:

    window.onload = function() {
    var pElement = document.getElementById("myVideo");

    pElement.load();
    pElement.play();
};

    Come vedete, rispetto alla soluzione “workaround” per iOS, il codice è più semplice e comprensibile (non richiede nemmeno jQuery).
    E in più, la soluzione è retrocompatibile con iOS3.

    Link alla Link al post [Matthew Congrove].

  • La situazione della compatibilità con HTML5 dei browser più utilizzati

    HTML5 sta arrivando. Apple, Microsoft e Google stanno già sostenendo lo sviluppo e l’implementazione di questo nuovo standard; avendolo provato con mano quando lo utilizzo su YouTube HTML5 Beta per guardare i video senza il Flash Player di Adobe, ne sono già entusiasta [Nota: mi guardo bene, per ora, dal prendere posizioni a favore/a sfavore di Flash].

    Fatta questa premessa, il sito HTML5 test permette di valutare quanto è aderente alle specifiche il browser che stiamo utilizzando. Il sito è in continuo sviluppo ma è un buon mezzo per conoscere quanto il browser che utilizziamo è pronto al salto verso HTML5.

    Di conseguenza mi è venuta la curiosità di sapere quale fosse il browser (stabile) che raggiungesse il punteggio più alto in questa “competizione”, ed ho ottenuto questi risultati:

    • Windows Internet Explorer (rendering Trident) 8.0.7600.16385: 19/160
    • Mozilla Firefox (rendering Gecko) 3.6.3: 101/160
    • Apple Safari (rendering WebKit) 4.0.5 (6531.22.7): 113/160
    • Google Chrome (rendering WebKit) 4.1.249.1064 (45376): 118/160

    Conclusioni

    • Non ho testato Opera/Presto
    • Internet Explorer ottiene un punteggio molto basso rispetto ai suoi concorrenti, che tutto sommato ottengono un punteggio molto simile
    • Chrome ottiene il punteggio più alto: Google sta spingendo molto su HTML5 (una prova è YouTube in HTML5).