Incorporare nei siti web documenti, audio e video con i tag HTML5

Per arricchire i contenuti di una pagina web, si aggiungono immagini e spesso anche video o file audio. L'inserimento delle immagini non presenta problemi visto che è supportata da tutte le piattaforme e CMS. Anche l'inserimento di video è piuttosto semplice dato che si può usare il codice HTML ottenuto dai siti di video-sharing come Youtube.

Con gli audio la cosa diventa più complessa perché non sono riuscito a trovare un servizio di audio sharing che offra gratuitamente agli utenti la possibilità di ottenere il link diretto per poter pubblicare gli audio nel web. Si può risolvere come vedremo convertendo un audio in video con una immagine fissa sullo schermo.

C'è anche la questione che i Termini e le Condizioni che regolano il caricamento di contenuti su Youtube o su siti analoghi sono piuttosto rigidi. Per esempio non possono essere caricati audio commerciali o video che anche solo minimamente possono essere adatti a un pubblico adulto. In questo post vedremo come incorporare video, documenti e anche audio in pagine web utilizzando i link diretti, i servizi OneDrive e Imgur e i tag HTML5.

Creare player HTML5 audio e video con file caricati su Google Drive

Per chi possiede un sito o una pagina web, la scelta più ovvia per pubblicare un video è quella di caricarlo su Youtube, ottenerne il codice di incorporamento per poi incollarlo nel post o nella pagina web in modalità HTML.

Su Youtube si possono pubblicare anche i file audio, semplicemente creando un video che li contenga e che sia costituito da una immagine fissa. Ovviamente ci sono anche siti di audio-sharing, così come ci sono quelli di video-sharing, che permettono di caricare file audio per poi fornirne il codice HTML da incollare in un sito.

Uno dei più interessanti è Clyp, che si può considerare una sorta di Youtube degli audio. Tutti questi siti di sharing hanno però delle regole riguardo ai contenuti condivisi. In questo post vediamo come pubblicare in un blog o in una singola pagina web un player di un audio o di un video con cui il navigatore possa interagire. Tali player non avranno bisogno di un codice ottenuto da un servizio esterno ma saremo noi stessi a crearlo.

Questa funzionalità è stata resa possibile dalla introduzione del linguaggio di markup denominato HTML5, che è una evoluzione dell'HTML propriamente detto, e che ha introdotto i due nuovi tag <audio> e <video> che ci consentono appunto di mostrare un player senza aver bisogno di servizi esterni. I file audio e video dovranno però essere caricati nel web. Chi possiede un sito Wordpress con uno spazio proprio, può caricarli in una cartella apposita oppure anche nella radice di archiviazione del dominio per poi ottenerne il link diretto.

Pubblicare audio e video nel web con i tag HTML5

Per arricchire i contenuti di una pagina web, solitamente si aggiungono immagini e qualche volta anche video o file audio. L'inserimento delle immagini non presenta problemi, e anche quello dei video, visto che si possono usare i codici ottenuti dai siti di video-sharing come Youtube e Vimeo.

Anche gli audio possono essere inseriti in questo modo, usando lo stesso Youtube, per esempio inserendo l'audio insieme a una immagine fissa. Ci sono anche servizi di audio-sharing come Clyp che permettono gratuitamente il caricamento fino a 6 ore di audio per un massimo di 25MB.

I Termini e le Condizioni che regolano il caricamento di contenuti su Youtube o su siti analoghi sono piuttosto rigidi. Per esempio non possono essere caricati audio commerciali o video che anche solo minimamente possono essere adatti a un pubblico adulto.

In questo articolo vedremo come risolvere il problema, caricando i nostri contenuti online in un servizio di hosting, con regole molto meno rigide, per poi pubblicarli in un sito, in un blog o in una pagina web utilizzando i tag HTML5 <audio> e <video> insieme ad alcuni attributi per personalizzarne i relativi player.

Come creare un Banner HTML5 con Google Web Designer

Nel precedente post abbiamo visto le principali funzionalità di Google Web Designer, un software multipiattaforma di Google per creare siti web e banner pubblicitari. In questo articolo vedremo più in dettaglio come creare un tale banner.

Il programma si può scaricare e installare dalla sua homepage in Windows, Mac e Linux. Gli oggetti saranno creati in HTML5 con animazioni e elementi interattivi. Ho iniziato a usare questo tool da pochi minuti quindi non lo maneggio completamente ma si possono fare delle realizzazioni interessanti anche utilizzandone solo le funzioni principali.

Il concetto è quello classico della Timeline in cui creare dei fotogrammi, che poi saranno gli elementi del banner quando verranno riprodotti. I frame del banner possono essere realizzati trascinando immagini, digitando testo e animando gli oggetti che si sono inseriti. Con i tool situati nella parte destra del programma si possono personalizzare colori, stili, bordi e dimensioni di tutti gli elementi.

Come creare banner con link con un video

L'obiettivo di questo post sarà quello di creare una breve animazione che si ripete all'infinito, con o senza audio, da inserire in un post o nel layout di un sito per pubblicizzare una campagna online o per rendere più accattivante il collegamento a un articolo a cui teniamo particolarmente.

Ci sono diversi servizi gratuiti che ci consentono di creare dei banner pubblicitari da usare anche per altre tipologie di collegamenti. Si possono creare pure delle immagini animate con programmi di grafica. Magari in altri articoli vedremo anche altre possibili soluzioni.

In questo articolo vedremo come creare una nostra pubblicità e come collegarci un link verso una qualsiasi pagina web. Il contenuto del banner sarà un estratto da un video, che potrà essere creato dal webmaster con la fotocamera dello smartphone, aiutandosi poi con dei programmi di editing video per aggiungere eventualmente del testo e della grafica. Si possono usare anche dei video senza copyright per poi adattarli alle nostre  esigenze specifiche.

Come creare uno spoiler in siti di cinema, letteratura, televisione, ecc.

Come certo saprete il W3C è il consorzio che sovrintende alla correttezza stilistica dei linguaggi di programmazione che non debbono essere pensati come una entità immutabile ma che anzi cambiano molto spesso aggiungendo sempre nuove funzionalità.

L'HTML5 è stata per esempio una evoluzione molto importante dell'HTML che ha introdotto novità sensazionali come la possibilità di creare menù animati senza dover usare il javascript. Forse la funzionalità più utile però è quella dei tag <audio> e <video> con cui si possono incorporare file audio e video in una pagina web.

Un discorso analogo vale anche per il CSS3 che ha enormemente arricchit0 il CSS iniziale aggiungendo le transizioni e le trasformazioni che permettono di animare oggetti HTML5 senza usare il javascript.

Come creare un bottone o un banner con un video in loop.

In un articolo scritto all'inizio di Settembre ho mostrato quasi tutte le opzioni per creare un bottone da inserire in una pagina web con un semplice codice HTML, con il linguaggio CSS per personalizzarne l'aspetto, con una immagine e addirittura con un video realizzato in Flash segnatamente in formato SWF.

Tale tecnologia sviluppata dalla Adobe è però da tempo molto criticata per la mancanza di sicurezza e per il grande consumo di risorse che richiede. Verrà abbandonata definitivamente a partire dal 2021 (cito a memoria) e sostituita integralmente con video inseriti nelle pagine web con il linguaggio HTML5.

Con questa tecnologia supportata ormai da tutti i principali browser basterà usare il tag <video> con una opportuna sorgente, così come avviene per le immagini, per mostrare un filmato senza bisogno di usare un player. Questo può essere fatto anche per un file audio senza mostrare l'icona di download e le altre icone di controllo.

Come nascondere l'icona di download nei player audio e video HTML5.

L'introduzione dell'HTML5 ha avuto un grande impatto nella implementazione di audio e video nelle pagine web. Quando non era disponibile l'HTML5, per aggiungere un audio o un video dovevamo appoggiarci a un servizio esterno che ci fornisse un player per la riproduzione.

Per un video si usava Youtube o Vimeo mentre per un audio ci si rivolgeva a uno dei tanti siti di audio sharing. Queste genere di condivisioni si utilizzano ancora adesso e anzi forse pure di più. Con l'HTML5 però possiamo condividere un audio o un video che sia di nostra esclusiva proprietà e che abbiamo caricato su un nostro spazio come per esempio Tophost per poi averne il link diretto. 

Al posto del link diretto per usare il codice HTML5 si può usare il link di download e caricare il file audio o video su servizi di spazio gratuito come Dropbox, Google Sites o Google Drive.

1. Link di download su Dropbox
2. Link di download su Google Sites
3. Link di Download su Google Drive.

Come aggiungere o nascondere informazioni a un post con HTML5.

Nel mese di Novembre il W3C cioè il consorzio che sovrintende allo standard dei linguaggi del web ha rilasciato una serie di raccomandazioni a beneficio degli webmaster. Come certo saprete il vecchio HTML è stato aggiornato alla versione HTML5 con moltissime novità con l'introduzione di nuovi tag.

Ricordo che con l'HTML5 è stato già implementato da siti importanti con Youtube che ha abbandonato il vecchio Flash. Con l'HTML5 si possono creare dei menù animati senza javascript ma le funzionalità più interessanti riguardano i tag <audio> e <video> con la possibilità di installare per esempio un player audio con playlist o  come aggiungere un file audio o video in un post di Blogger.

Come pubblicare un video Responsive con i CSS elastici.

Nel post precedente abbiamo visto un escamotage per pubblicare un video che prenda dimensioni diverse quando viene aperto da desktop o tablet rispetto a quelle che prende se la pagina è aperta da cellulare.

In questo post vedremo invece un secondo metodo anche migliore di quello precedente che permette la stessa personalizzazione ma lo fa con continuità. Con il sistema già presentato il video rimane della stessa larghezza fino a un breakpoint per poi diventare di un'altra larghezza. Ho proposto per il player del video una larghezza di 560 pixel da essere mostrata nei dispositivi desktop e tablet e una larghezza di 320 pixel per i cellulari. 

Come inserire audio di sottofondo in autoplay.

La tecnologia HTML5 ha introdotto nuovi tag che permettono di fare cose che prima erano molto difficili da configurare. Mi ricordo di quando dovevamo utilizzare il player di Yahoo per riprodurre un file audio o un file video in una pagina web.

Adesso non è più necessario avere un player perché in HTML5 sono stati introdotti i tag <audio> e <video> che servono proprio a questo scopo. La sintassi con cui utilizzare questi tag viene definita dal W3C e l'ho riportata in post precedente.

Come velocizzare il sito rendendo asincroni i javascript.

I browser rilevano i javascript presenti nel codice di una pagina web e devono scaricarli per poter mostrare la pagina in modo corretto. Questa operazione può rallentare significativamente l'apertura della pagina soprattutto se i javascript sono caricati su hosting esterni e se sono particolarmente pesanti.

I grandi player del web sono da tempo a conoscenza della importanza della velocità di caricamento nella soddisfazione della esperienza di navigazione. Tale parametro tra l'altro è uno dei più rilevanti tra i più di 200 fattori di ranking di Google. Per questa ragione Facebook, Twitter, Google, Pinterest, Disqus e altri celebri social e servizi web hanno adottato il caricamento asincrono.

Come riprodurre musica di sottofondo in tutto il blog di Blogger o solo in una sua pagina.

Quando apro una pagina in cui viene riprodotto audio in automatico mi attivo subito per silenziarla con l'apposita funzione di Chrome. Detto questo però ci sono sempre molte richieste per avere questa funzionalità in tutto il sito o solo in determinate pagine.

Riprodurre musica sul blog può portare a dei problemi di copyright e non è che si possono riprodurre dei brani senza permesso. Non sono un esperto di queste questioni ma per evitare noie è bene informarsi prima o utilizzare audio fatto da noi o musica senza copyright ottenuta da appositi siti.

Come pubblicare immagini Responsive con Blogger.

Quando si apre un post di Blogger con un tablet o con uno smartphone le immagini che vi sono pubblicate in linea di massima si adattano alla larghezza del layout del dispositivo con cui vengono visualizzate. Questo non accade sempre con tutte le immagini e con tutti i modelli.

Ricordo a quei pochi che ancora non lo sapessero che il Responsive Design è una tecnica per adattare la grafica di una pagina web alla larghezza del dispositivo con cui viene visualizzata. Si possono installare Modelli Responsive per Blogger oppure scegliere tra i tanti Temi Responsive per Wordpress.

Come aggiungere file audio o file video in un post di Blogger con il linguaggio HTML5.

Cerchiamo di illustrare in modo più analitico il significato del titolo che per ovvie ragioni deve essere stringato. Quando si vuole inserire un video in un articolo di Blogger o di qualsiasi altra piattaforma si carica su Youtube quindi si apre il player , si va su Condividi, si copia il codice e si incolla nella pagina web in cui si vuole mostrare. 

Questo lo si può fare anche per i file audio. Basta creare un video che abbia una immagine fissa e inserirvi l'audio che invece vogliamo condividere. Il video anche in questo caso andrebbe caricato su Youtube o in un altro sito di video sharing per poi ottenerne il codice. Alternativamente si può usare un sito di audio sharing come Audioo.com che funziona più o meno come Youtube ma che ci permette di caricare i nostri audio per poi condividerli nel nostro sito. Dopo la registrazione a Audioo.com e aver caricato il file audio 

Come personalizzare il player di Youtube e aggiungere un logo con reEmbed.

Una delle funzionalità più importanti di Youtube è quella che ci permette di implementare i video nelle nostre pagine web semplicemente incollando un codice. Lo stesso Youtube offre la possibilità di tutta una serie di personalizzazioni del player a partire da quella più importante che riguarda le sue dimensioni. Un tema importante è sicuramente quello della riproduzione dei video incorporati se si aprono le pagine con un dispositivo mobile. Specialmente se si ha un blog su Blogger e se si sceglie il vecchio codice di implementazione la dimensione del video potrebbe non adattarsi alla risoluzione del dispositivo. È nato da poco un servizio che permette di personalizzare il player e di adattarlo automaticamente ai dispositivi mobili più diffusi che può risolvere molti problemi.

reEmbed è un servizio gratuito e che rimarrà tale almeno nella sua versione di base che permette di personalizzare il player anche per tutti i video di Youtube già postati nel vostro sito. Si può aggiungere il nostro logo e scegliere i colori più adatti al nostro layout

Come installare un player su Blogger per riprodurre una playlist di video in HTML5.

Abbiamo appena visto come sia possibile installare in Blogger un player HTML5 che riproduca file audio di una playlist in formato MP3. Bisogna naturalmente aver caricato i file in un hosting che li supporti e che ci fornisca il loro link diretto oppure alternativamente avere gli hotlink di file già presenti in rete.

Seguendo la stessa falsariga vediamo come si possa creare sempre in HTML5 un player video che riproduca filmati in MP4 precedentemente caricati online. La installazione di un semplice player in HTML5 per un solo video è piuttosto semplice visto che basta incollare questo codice

Menù colorato ruotante per Blogger e altre piattaforme.

Ho già presentato dei menù che utilizzano il tag <nav> che fa parte del nuovo linguaggio HTML5 come il nuovo menù che vado a illustrare in questo post che però ha la peculiarità di essere vivace e colorato. Probabilmente non è adatto a un sito particolarmente serio ma è sicuramente una alternativa per blog che fanno dell'originalità il loro punto di forza. Si tratta di cinque elementi per una larghezza complessiva di 640 pixel ma che ovviamente possono essere aumentati aumentando la larghezza totale del menù o diminuendo quella di ciascun elemento configurata a 100 pixel.

Quando il cursore di un navigatore passerà sopra a un elemento del menù ci sarà una rotazione dello stesso in senso orario che poi ritornerà alla posizione originale quando il mouse si sposterà.

Menù orizzontale su tre livelli per Blogger con HTML5.

Solo un paio di anni fa gli webmaster di tutto il mondo integravano nei loro siti librerie javascript per arricchire le pagine web di effetti, slideshow e menù molto funzionali. Dopo che Google ha inserito la velocità di caricamento come uno dei parametri che determinano il posizionamento nei risultati di ricerca si assiste a un'inversione di 180°.  L'obiettivo di adesso è quello di togliere tutti i javascript non essenziali e di utilizzare le nuove tecnologie come il CSS3 per creare queste stesse funzionalità senza appesantire la pagina. Ricordo di aver già presentato un menù orizzontale su due livelli da inserire in un gadget HTML / Javascript e un menù flottante sempre visibile che non utilizzano javascript. Altri esempi si possono trovare nell'elenco dei Migliori Menù per Blogger.

In questo articolo vediamo come realizzare un menù utilizzando oltre al CSS3 anche l'HTML5 e segnatamente il tag <nav> che introduce una sezione di una pagina che contiene link a altre pagine dello stesso documento, in pratica si tratta di una sezione con link di navigazione vale a dire un menù in senso lato. Tale tag <nav> non sostituisce gli elenchi e i tag relativi <ul> e <li> devono essere ivi racchiusi. Il menù che vado a presentare può essere inserito nel modello oppure anche in un gadget HTML/Javascript. Il suo aspetto sarà simile a questo

Come inserire player audio e video HTML5 in un blog.

HTML5 è tutto un insieme di nuove tecnologie che non è qui il caso di enumerare e che si estrinsecano in un nuovo linguaggio di markup. Mi limito a fare solo degli esempi. Visto che gli sviluppatori si riferiscono spesso a posizioni del layout quali header o footer ecco che sono stati introdotti proprio questi tag anche per dare un valore semantico a queste sezioni delle pagine web. Il linguaggio HTML5 è anche legato al CSS3 e a nuovi standard di cui ho già parlato come i microdati e i microformati.

Una parte importante dell'HTML5 la riveste soprattutto la multimedialità con l'utilizzo dei nuovi tag <audio> e <video> per l'inserimento di filmati e di file audio senza utilizzo di plugin esterni quali Flash di Adobe o Silverlight di Microsoft.