Il Blog di INSTANT WEBSITES

Tag: HTML5

Il tag picture

L’introduzione del web design reattivo tramite HTML5 e CSS3 ha introdotto la possibilità di ottenere il ridimensionamento automatico di un’immagine, fino ad occupare lo spazio orizzontale disponibile e mantenendone le proporzioni, tramite la regola:

img { max-width: 100%; height: auto; }

Fino a qui, niente di nuovo; d’altronde, quella sopra esposta è una regola che compare sistematicamente nel foglio di stile base di qualsiasi sito.

Ci sono però dei casi nei quali la semplice reattività di un’immagine non si traduce in un risultato apprezzabile dal punto di vista pratico.

Immaginiamo un’immagine di intestazione che, vista nella viewport di uno schermo ampio, occupa tutta la larghezza ed una certa altezza, ad es. 1920×850 pixel.
Nel momento in cui la viewport viene ridotta e l’immagine ridimensionata proporzionalmente, quest’ultima finirà con il risultare estremamente piccola e quindi inutile dal punto di vista del risultato. Eseguendo i classici “conticini” scolastici, si fa in fretta a capire: nella viewport di uno smartphone, 1920×850 diventa 480×213 pixel.

Per prevenire questo problema, una soluzione tradizionale consiste nel posizionare l’immagine non come elemento <img> bensì come sfondo del contenitore; man mano che la viewport viene ridotta, tale contenitore occupa sempre il 100% dello spazio disponibile ed una certa altezza minima mentre l’immagine di sfondo non si adatta, sicché ne verrà mostrata solo una parte.
Potete vedere un esempio di questa tecnica nella homepage del sito https://ottolina.com/ (grafica del sito by modus comunicazione visiva).

Si tratta di una tecnica funzionale ma con un possibile effetto sgradito: verrà mostrata solo una parte dell’immagine – tipicamente quella centrale – sicché si perderanno molti dettagli della stessa.
E’ indispensabile quindi scegliere un’immagine che mantenga un effetto accettabile anche in tale contesto.

Da menzionare, senza però raccomandarla, un’alternativa molto comoda ma, per così dire, estrema: rinunciare del tutto a mostrare l’immagine stessa quando la viewport scende al di sotto di una certa dimensione.

Esiste una terza possibilità che è finalizzata ad ottimizzare l’esperienza utente al prezzo di una preventiva preparazione di due o più immagini alternative: il tag picture di HTML5.

Continua a leggere

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.

Continua a leggere

La proprietà CSS3 box-shadow

Una delle proprietà che saranno introdotte con la nuova versione dei Cascading Style Sheet, la CSS3, è quella relativa all’ombreggiatura di un elemento e cioè box-shadow.

Questa proprietà prevede di definire i seguenti quattro valori: offset orizzontale, offset verticale, blur (estensione) e colore.

L’offset orizzontale e verticale consentono di definire l’angolo dell’ombra.

La sintassi CSS è la seguente:

#box {

-moz-box-shadow: 0 1px 20px #333; /* nell’ordine: offset orizzontale – offset verticale – blur (estensione) – colore */

-webkit-box-shadow: 0 1px 20px #333;
box-shadow: 0 1px 20px #333; /* per IE9 */
… }

Come già visto per la proprietà border-radius in questo articolo, è necessario indicare il prefisso -moz- per Mozilla (Firefox) e -webkit- per Safari e Chrome;  l’unico browser in circolazione che non è in grado di applicare la proprietà è Internet Explorer fino alla versione 8, la più recente in circolazione al momento.

Per vedere un esempio di applicazione della proprietà box-shadow, aprite questa pagina.

Ora, bisogna considerare innanzitutto che il nuovo rilascio HTML5/CSS3 approfondirà e rafforzerà la corrispondenza semantica tra i selettori e gli elementi di pagina, introducendo le voci: <header>, <nav>, <article>, <time>, <aside>, <section>, <footer>.

Considerare cioè solamente le novità riferite alle proprietà grafiche “esteriori” dei box e degli altri elementi di pagina sarebbe estremamente riduttivo.

Tuttavia alcune delle proprietà di prossima introduzione quali quelle menzionate consentiranno agli sviluppatori di ridurre il loro lavoro proprio in alcune parti più noiose e banalmente esecutive, quali la creazione di gif finalizzate all’arrotondamento degli angoli o di jpeg per l’aggiunta di ombre.

E non è poco.

Categorie
Archivi