Cell. +39 3479684755
Il Blog di Instant Websites
Box reattivo per la pubblicazione di un video tramite iframe
Esistono diversi metodi per pubblicare video in una pagina HTML, il migliore dei quali in termini di compatibilità è quello che fa uso del tag <video> della nuova versione di HTML, vale a dire HTML5 (ne abbiamo parlato in un precedente articolo).
Prevedendo diversi formati del file, compreso quello di fallback per i browser che non supportano HTML5 (.flv cioè Flash Video), è possibile rendere il video fruibile su tutti i dispositivi, recenti e meno recenti.
Ci sono però altre considerazioni che spingono a preferire una soluzione differente: pubblicare il filmato su YouTube, quindi incorporarlo nella pagina del sito.
Queste motivazioni sono riconducibili innanzitutto a quanto segue:
- rendere il video visibile anche sul sito YouTube stesso, quindi ad una platea potenzialmente molto più ampia;
- evitare di dovere convertire il file in più formati (.mp4, .ogv, .webm, .m4v, .flv);
- aggirare le limitazioni imposte da alcuni fornitori di hosting sullo spazio massimo occupabile in totale e/o relativo ad un singolo file, dato che i file video sono spesso di grosse dimensioni.
Presupponendo dunque di avere optato per questa strada, YouTube fornisce il codice per incorporare il video nella pagina, ad esempio:
<iframe width=”853″ height=”480″ src=”//www.youtube.com/embed/6U-J8Nn9JfQ”></iframe>
Notiamo per prima cosa che il filmato ha proporzioni pari a 16:9 quasi esatte, il che si traduce in un rapporto base/altezza pari a:
9/16 = 0,5625 => 56,25%
mentre nel caso di un filmato con proporzioni 4:3 il calcolo diverrebbe:
3/4 = 0,75 => 75,00%
Questa premessa è necessaria perché, come vedremo di seguito, la soluzione dell’iframe comporta delle complicazioni nel rendere adattivo il filmato.
Corsi di web design a Vigevano (Pavia)
Il nostro Corso Base di Web Design ha per oggetto le tecniche di progettazione e sviluppo di un sito web completo, partendo dalla fase di raccolta dati presso il cliente, passando per la realizzazione del layout di pagina, lo sviluppo del codice XHTML, l’applicazione delle tecniche di SEO (ottimizzazione per i motori di ricerca) fino ad arrivare alla messa in linea.
E’ un corso rivolto ai principianti, non sono infatti richieste conoscenze specifiche se non una pratica di base con il computer (PC o Mac).
Il programma del corso è stato aggiornato in modo da includere le tecniche di più recente introduzione: HTML5 e CSS3 e con esse, il design cosiddetto “reattivo” o “adattivo” che consente di ottimizzare la visualizzazione dei siti in base al dispositivo usato: computer da tavolo, tablet o smartphone.
La caratteristica distintiva di questo corso è il fatto che viene svolto con un numero estremamente limitato di partecipanti (max. 3 o addirittura individualmente) ed a stretto contatto con l’insegnante, invece che in un’aula affollata senza possibilità di interagire con l’insegnante stesso.
In base alle preferenze del partecipante, è poi possibile personalizzare il programma (nel corso individuale) ed eventualmente estenderlo, includendo argomenti quali l’utilizzo dei CMS (Content Management Systems: WordPress, Joomla! ecc.), le campagne con Google AdWords ecc.
Introduzione al design reattivo – esempi di Media Query
Premessa
In un precedente articolo di questo blog (Introduzione al design reattivo – https://lnx.instantwebsites.it/iwblog/?p=1272) abbiamo introdotto alcuni principi di base del design “reattivo” o “adattivo“.
Per approfondire il discorso, vediamo ora alcuni esempi di Media Query che consentono di subordinare l’applicazione di determinate dichiarazioni (proprietà e relativi valori), all’interno del foglio di stile, alla ricorrenza di condizioni prefissate concernenti la risoluzione video del dispositivo su cui il sito viene visualizzato e/o l’orientamento dello schermo.
Rammentiamo innanzitutto che nella sezione head della pagina occorre inserire quanto segue:
<meta name=”viewport” content=”width=device-width” />
per fare sì che il riferimento sia la risoluzione “reale” del dispositivo (dimensione della viewport) prevenendo lo zoom automatico della pagina che quest’ultimo effettuerebbe per visualizzarla interamente.
E’ anche opportuno impedire che l’utente possa materialmente effettuare lo zoom stesso, completando quanto sopra nel modo seguente:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0″ />
oppure, in modo equivalente:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no” />
Rammentiamo inoltre che per impostare le media query ci sono due modi:
1) creare diversi fogli di stile ed eseguirli a seconda del dispositivo impostando le condizioni nella sezione head (Media Feature), come nell’esempio seguente:
<!– foglio di stile comune a tutti i supporti –>
<link href=”css/common.css” rel=”stylesheet” media=”screen” />
<!– media feature compatibili con tutti gli schermi –>
<link href=”css/smartphone.css” rel=”stylesheet” media=”only screen and (max-width: 480px)” />
<link href=”css/tablet.css” rel=”stylesheet” media=”only screen and (min-width: 481px) and (max-width: 767px)” />
…
2) utilizzare un singolo foglio di stile, inserire le regole comuni, poi quelle specifiche impiegando, appunto, le Media Query come negli esempi che seguono.