Video orizzontali o verticali: il virus Covid-19

Il video mostra ciò che è giusto fare con di Covid-19 secondo una persona sapiente e saggia. Ma c'è molto altro...

Riguardo al sistema migliore per fronteggiare la diffusione di Covid-19 se ne sono dette e scritte di ogni.

Come si suol dire, si è detto tutto e il contrario di tutto. Ho deciso di informarmi meglio.

Il video: come bisogna comportarsi con Covid-19?

Poiché io non ho le conoscenze né gli strumenti per avere un'opinione personale fondata su qualcosa di solido, ho cercato aiuto presso una persona di cui mi fido.

Clicca sull'immagine e guarda il video per sapere com'è andata.

Lo scopo del video: orizzontale o verticale?

Lo so: il video in sé è un'autentica minchiezza, che non dice nulla su ciò che è bene fare di fronte a Covid-19. Ma questo era solo un pretesto (e perdonami se ti ho preso in giro)... Lo scopo del video è dimostrare come servire automaticamente

• un video orizzontale se l'utente usa un PC o un tablet
• un video verticale se l'utente usa un cellulare.

L'ambiente è il CMS Joomla.

Perciò lo scopo del video è tecnico, non comportamentale. E questo è anche il motivo per cui questo articolo è inserito nella categoria Informatica e non in Umanità del mio blog.

Ti chiedo ancora perdono per il mezzuccio che ho usato per farti guardare il video, ma a mia discolpa ho una ragione valida: era importante che tu non fossi cosciente del vero scopo del video, in modo da scongiurare qualunque comportamento (anche quelli non consapevoli) che non fosse quello naturale di un utente che vuole semplicemente guardare un video.

Detto questo, eccoci al punto; se tutto ha funzionato bene:

•  tu hai visto un'unica immagine, orizzontale o verticale secondo il tipo di dispositivo da te usato
• cliccando sull'immagine, si è aperta una finestra modale che conteneva il video, anch'esso orizzontale o verticale secondo il dispositivo da te usato.

E questo è il vero scopo dell'esercitazione: riuscire a servire automaticamente il video adatto al dispositivo usato dal visitatore del sito.

Durante le mie prove, tutto ha funzionato bene: da PC o da tablet vedevo solo il video orizzontale, mentre da cellulare vedevo solo il video verticale.

Ti è stato fornito il video sbagliato?

In alcune situazioni può essere che ti venga fornito il video sbagliato. Nella maggior parte dei casi, si tratta del video orizzontale che ti viene fornito anche se usi il cellulare.

Ciò può essere dovuto a impostazioni del tuo cellulare: ad esempio, se il browser è impostato affinché richieda sempre il sito desktop. Oppure se il browser usa tecnologie o parametri che impediscono al server la rilevazione corretta del dispositivo.

In questi casi, purtroppo, mettere a punto un sistema davvero sicuro richiederebbe troppi sforzi (almeno per me). Perciò, se dovessi rilevare una percentuale rilevante di forniture sbagliate, sarebbe meglio usare un sistema diverso e permettere all'utente di scegliere lui quale tipo di video guardare. Il metodo, semplicissimo, è descritto nel paragrafo Come consentire la scelta con un pulsante.

Di seguito ti spiego invece come fornire automaticamente il video giusto.

Una premessa: due versioni dello stesso video

La condizione essenziale è che vengano realizzate due versioni dello stesso video: una orizzontale e una verticale.

Così facendo, i visitatori potranno apprezzare il video nel modo migliore, indipendentemente dal dispositivo usato al momento. Ciò può essere particolarmente importante nel caso tu debba promuovere servizi o prodotti e il video orizzontale perda gran parte della sua efficacia se visualizzato su cellulari in verticale.

Io ho pubblicato entrambe le versioni del video su YouTube e, ovviamente, sono stati pubblicati su due pagine differenti.

Entrambi possono essere incorporati nell'articolo, ma ho preferito una soluzione un po' più ricercata: incorporarli in una finestra modale, che viene aperta mediante un clic su un'immagine (orizzontale o verticale secondo il dispositivo usato).

Come fornire automaticamente il video giusto con Conditional Content

Per fornire il video adatto al dispositivo del visitatore sarebbe sufficiente usare le media query (se non sai che cosa sono, puoi informarti qui sull'uso delle media query per la progettazione responsive).

Tuttavia, l'uso di media query può risultare troppo macchinoso, soprattutto se non sei un esperto di codice e se devi fornire spesso contenuti dipendenti dal dispositivo del visitatore.

Perciò ti propongo di usare un'estensione per Joomla che ti facilita enormemente il lavoro: Conditional Content, di Regular Labs. Conditional Content consente di pubblicare contenuti in un articolo di Joomla solo al verificarsi di determinate condizioni. Le condizioni che possono entrare in gioco sono numerose: data, lingua, categoria, tag, utente, sistema operativo, browser e via dicendo.

Tra queste condizioni c'è anche il dispositivo utilizzato dal visitatore. Vi sono tre opzioni: desktop, tablet e mobile. In pratica, puoi impostare ciò che deve essere mostrato per ognuno di questi tre tipi di dispositivo.

C'è anche una forma più semplice, che è quella che ho usato io: imposti ciò che deve essere mostrato per un tipo di dispositivo, e imposti ciò che deve essere mostrato se il primo caso non è verificato. In altre parole, risparmi un'impostazione.

Nel mio caso, la sintassi è:

{ show devices="mobile" }VideoVerticale{ show-else }VideoOrizzontale{ /show }

Il significato è:

• se il dispositivo del visitatore è un cellulare, allora fornisci il contenuto VideoVerticale (VideoVerticale è un segnaposto per indicare il codice per l'immagine che richiama la finestra modale con il video verticale)
• se il dispositivo del visitatore non è un cellulare, fornisci il contenuto VideoOrizzontale (VideoOrizzontale è un segnaposto per indicare il codice per l'immagine che richiama la finestra modale con il video orizzontale).

Come per tutte le estensioni di Regular Labs, il codice va inserito nell'editor WYSIWYG, non nel codice HTML. Nota che nel mio esempio ho inserito vicino alle parentesi graffe alcuni spazi che non vanno messi: servono a far sì che il testo non venga interpretato (in questo caso) coem istruzione di Conditional Content.

L'uso di Conditional Content è davvero molto semplice.

Come consentire la scelta con un pulsante

Se noti che il riconoscimento automatico del dispositivo crea più problemi di quanti ne risolva, puoi lasciare all'utente il compito di richiedere il video che vuole.

È sufficiente creare due pulsanti (o due immagini) e assegnare a ciascuno il link che porta alla pagina appropriata di YouTube.