Cell. +39 3479684755
Il Blog di Instant Websites
Come usare il tag video di HTML5
Introduzione
Una delle novità più interessanti di HTML5 sarà costituita dal nuovo tag video, che consentirà appunto l’esecuzione di file video senza richiedere interfacce Flash o QuickTime.
Ciò risulta ancor più importante dal momento che numerosi tablet e smartphone non supportano la tecnologia di Adobe Flash, rendendo non fruibili i contenuti che dipendono dal relativo plugin.
La struttura base del tag <video> è la seguente:
<video><source src=”…”></video>
Tuttavia, in questa fase di sviluppo finale di HTML5, necessario predisporre il file video in più formati per garantire la compatibilità con i diversi browser.
Questi formati sono: .mp4, .ogv, .webm.
Layout a più colonne con la proprietà display: table-cell
La tecnica più impiegata per costruire un layout a due o più colonne utilizzando i CSS è sicuramente quella che si basa sulla proprietà float assegnata ai box che costituiscono le colonne.
Questa tecnica è anche definita metodo delle faux columns poiché, nel momento in cui le colonne devono avere colori di sfondo differenti, è sufficiente rendere flottante anche il box contenitore delle colonne ed assegnargli un’immagine di sfondo che, appunto, disegna le colonne rendendole in apparenza eguali in altezza.
In effetti, un box flottante risulta alto quanto basta a contenere il suo contenuto ma il box contenitore, essendo a sua volta flottante, conterrà entrambe le colonne per intero e la ripetizione sull’asse Y dell’immagine di sfondo garantisce che le colonne risultino – apparentemente – alte uguali: da qui, la denominazione di “finte colonne”.
Questa tecnica è consolidata da tempo e risulta compatibile con tutti i browser, recenti e meno recenti (attenzione ai bug di IE6 e precedenti ma questi browser sono considerati obsoleti e quindi non più supportati).
Una tecnica emergente è quella che si basa sulla dichiarazione display: table-cell applicata ai box che compongono le colonne.
Guida all’uso di font non di sistema con la proprietà @font-face
Una delle novità più interessanti introdotte con i CSS3 è costituita dalla proprietà @font-face, tramite la quale è possibile caricare nel browser dell’utente che visualizza il nostro sito un font non di sistema, vale a dire non pre-esistente nel suo PC o Mac.
Prima di analizzare come procedere, è opportuno dare qualche indicazione di base:
1) evitiamo di trasformare le pagine web in … guazzabugli di caratteri di ogni tipo e specie.
Ciò per salvaguardare la leggibilità dei contenuti, nonché il buon gusto!
2) ogni font aggiuntivo comporta il caricamento di un file, quindi richiede qualche istante (soprattutto in Internet Explorer).
Occorre stare attenti a non usare font troppo pesanti e a non caricarne troppi nella stessa pagina.
3) è indispensabile testare la resa del carattere nei diversi browser, anche rispetto alle dimensioni.
Questo passo è fondamentale anche se si usa un foglio di stile di reset che uniforma la risposta dei browser alle dimensioni, appunto, del font.
4) bisogna prevedere sempre un’alternativa di tipo standard, per i browser meno recenti che non supportano la proprietà font-face ed in generale, se qualcosa va storto.
Occorre inoltre controllare che le dimensioni del font alternativo siano compatibili con quelle del font principale.
Posti questi principi di base, vediamo dunque due modi per procedere: