La definizione di sfumature attraverso i css  offre una valida alternativa all’utilizzo di immagini, riducendo così tempi di caricamento. Nonostante questa tecnica non sia totalmente crossbrowser ricopre i browser maggiormente utilizzati in un numero considerevole di versioni portando così un ampio numero di utenti a risparmiare tempo e banda ad ogni richiesta per le pagine web.

La creazione di sfumature attraverso i css è un tipo di immagine generata, non una proprietà. Questo significa che possono essere utilizzate all’interno di altre proprietà come avviene per rgb() o rgba().

Nei CSS3 esistono due metodi per la definizione di sfumature, in particolare uno per le sfumature lineari (linear-gradient) e uno per le sfumature radiali (radial-gradient). Da questi sono ricavati i rispettivi per firefox, google chrome e safari con uguali sintassi ma differente premessa.

Qui un esempio delle soluzioni proposte, di seguito la spiegazione nel dettaglio.

Sfumature lineari

La sintassi della sfumatura lineare richiede un minimo di tre parametri:

• posizione iniziale (valore numerico, percentuale o gradi)
• colore iniziale (colore in valore esadecimale, rgb o rgba)
• colore finale (colore in valore esadecimale, rgb o rgba)

-webkit-linear-gradient(top, #ccc, #000);
-moz-linear-gradient(top, #ccc, #000);
linear-gradient(top, #ccc, #000);

E’ possibile aggiungere più colori ad una singola sfumatura definendo la porzione occupata dal colore attraverso un valore in percentuale tra 0% e 100%. Per i colori per cui non viene specificata una percentuale la larghezza della sfumatura viene definita in automatico.

-webkit-linear-gradient(top, #ccc 20%, #000);
 -moz-linear-gradient(top, #ccc 20%, #000);
 linear-gradient(top, #ccc 20%, #000);

E’ inoltre possibile definire sfumature con più colori aggiungendoli nell’ordine desiderato

-webkit-linear-gradient(top, #ccc 20%, #000, #c00);
 -moz-linear-gradient(top, #ccc 20%, #000, #c00);
 linear-gradient(top, #ccc 20%, #000, #c00);

Ampliare il supporto per google chrome e webkit

Oltre alla definizione di sfumature con i CSS3 è possibile utilizzare webkit-gradient per ampliare il supporto a safari 4 e superiori e google chrome inferiori alla 10.

La sintassi della sfumatura lineare per webkit richiede un minimo di cinque parametri:

• tipo di sfumature (linear o radial)
• posizione iniziale (valore numerico, percentuale o gradi)
• posizione finale (valore numerico, percentuale o gradi)
• colore iniziale (colore in valore esadecimale)
• colore finale (colore in valore esadecimale)

-webkit-gradient(linear, left top, right top, from(#ccc), to(#000));

Si sconsiglia di definire i colori in rgb o rgba considerato che la dichiarazione serve per ampliare il supporto su browser meno recenti che potrebbero non supportare i colori in rgb essendo parte dei CSS3.

E’ possibile aggiungere più colori ad una singola sfumatura definendo la porzione occupata dal colore attraverso un valore in percentuale tra 0% e 100%. Per i colori per cui non viene specificata una percentuale la larghezza della sfumatura viene definita in automatico.

-webkit-gradient(linear, left top, right top, from(40%, #ccc), to(#000));

E’ inoltre possibile definire sfumature con più colori aggiungendoli attraverso la dichiarazone color-stop.

-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000),
color-stop(40%, #c00))

Sfumature lineari su Internet explorer

Le soluzioni viste fino ad ora non trovano supporto su Internet Explorer in versioni precedenti alla 9, bisogna quindi ricorrere al gradient filter.

Questo filtro per Internet Explorer permette sfumature lineari verticali ed orizzontali di due colori.

Per questo filtro sono necessari tre parametri:

• gradienttype (definisce una sfumatura verticale (0) o orizzontale (1))
• colore iniziale (in valore esadecimale)
• colore finale (in valore esadecimale)

filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 0,
startColorstr='#cccccc', endColorstr='#000000');

Per ampliare il supporto a più versioni di Internet Explorer occorre ricordare la diversa definizione di filters:

//per ie 5.5 e successivi
filter: progid:DXImageTransform.Microsoft.filtername(sProperties)
//per ie 8
-ms-filter: 'progid:DXImageTransform.Microsoft.filtername(sProperties)'

In questo modo è possibile creare sfumature con i css compatibili con Firefox 3.6+, Safari 4+, google chrome e internet explorer 7+. Purtroppo opera non offre un supporto per le sfumature da css e ricade nella soluzione di callback con la definizione di un colore o di un’immagine di sfondo.

Sfumature Radiali

E’ inoltre possibile definire sfumature radiali attraverso radial-gradient, le derivate per webkit e mozilla -webkit-radial-gradient e -moz-radial-gradient e la definizione webkit-gradient (con tipologia radial).

Per questa soluzione con i css3 può essere utile inserire un parametro di definizione sulla larghezza delle sfumature che definisce forma ed estensione.

I valori definibili sono:
Circle (per sfumature circolari)
Ellipse (per sfumature ad ellisse)

In aggiunta si possono definire ulteriori parametri per il comportamento della sfumatura:

closest-side (sfumatura al lato più vicino)
farthest-side (sfumatura al lato più distante)
closest-corner (sfumatura all’angolo più vicino)
farthest-corner (sfumatura all’angolo più lontano)

Qui un esempio delle soluzioni descritte.

Per maggiori informazioni sull’utilizzo delle sfumature ecco alcuni link:

sfumature con CSS3 in firefox (https://developer.mozilla.org/en/Using_gradients)
sfumature con CSS3 in webkit (http://www.webkit.org/blog/1424/css3-gradients)
sfumature con webkit-gradient (http://www.webkit.org/blog/175/introducing-css-gradients)
sfumature con filter per internet explorer (http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx)
definizioni della posizione della sfumatura (https://developer.mozilla.org/en/CSS/-moz-radial-gradient#Size_constants)
utilizzo di filters in Internet explorer (http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx)

-webkit-linear-gradient(top, #ccc, #000);
-moz-linear-gradient(top, #ccc, #000);
linear-gradient(top, #ccc, #000);

-webkit-linear-gradient(top, #ccc 20%, #000);
 -moz-linear-gradient(top, #ccc 20%, #000);
 linear-gradient(top, #ccc 20%, #000);

-webkit-linear-gradient(top, #ccc 20%, #000, #c00);
 -moz-linear-gradient(top, #ccc 20%, #000, #c00);
 linear-gradient(top, #ccc 20%, #000, #c00);

-webkit-gradient(linear, left top, right top, from(#ccc), to(#000));

-webkit-gradient(linear, left top, right top, from(40%, #ccc), to(#000));

-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000),
color-stop(40%, #c00))

filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 0,
startColorstr='#cccccc', endColorstr='#000000');

//per ie 5.5 e successivi
filter: progid:DXImageTransform.Microsoft.filtername(sProperties)
//per ie 8
-ms-filter: 'progid:DXImageTransform.Microsoft.filtername(sProperties)'

Una delle funzionalità più interessanti dell’HTML 5 è senza dubbio rappresentata dalla possibilità di inserire filmati video all’interno della pagina web.

Questo elemento cambia notevolmente il modo in cui gli utenti possono usufruire dei video su internet permettendo la visione del contenuto senza un player flash.

L’attuale supporto per questo elemento è riservato alle ultime versioni di firefox, safari e chrome ma la stessa microsoft ha annunciato il supporto per Internet explorer 9 mentre per Opera dalla versione 10 (10.5).

Per iniziare

Prima di iniziare con il codice è indispensabile ricordare che non tutti i browser supportano gli stessi contenitori e gli stessi codecs audio/video. Un file video è di fatti composto da un contenitore (mpeg4,flash video, ogg ecc), un codec audio (mpeg1,vorbis, ecc) e un codec video (mpeg4 asp, h.264, theora).
Per portare un po’ di ordine in questa situazione è utile tener presente ciò che è supportato dai browser e preparare due files. Uno con theora,vorbis e ogg e il secondo con h.624,aac e mp4.

Il primo files sarà supportato da firefox, opera e chrome il secondo da chrome, safari, iphone e android.

Per la conversione dei files di questo esempio sono stati utilizzati ffmpeg2theora ed handbrake .

L’elemento video

Per integrare nella pagina web il nostro video utilizziamo l’elemento video con chiusura esplicita.

<video></video>

Al suo interno è possibile specificare un contenuto alternativo nel caso il browser non supporti questo elemento.

<video>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Considerato che l’elemento video si comporta come l’elemento immagine necessita sempre di avere un altezza e una larghezza specifica.

<video width="640" height="480">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Per inserire il video sorgente aggiungiamo l’attributo src con la path relativa alla risorsa.

<video src="miovideo.ogv" width="640" height="480">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Per rendere visibili i controlli del video è sufficiente aggiungere l’attributo controls.

<video src="miovideo.ogv" width="640" height="480" controls>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Se desideriamo che il video venga scaricato non appena la pagina è caricata possiamo aggiungere l’attributo preload.

<video src="miovideo.ogv" width="640" height="480" preload>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

O in caso contrario specificare “none” come valore.

<video src="miovideo.ogv" width="640" height="480" preload="none">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Un’ultima opzione viene offerta dall’attributo autoplay che fa partire automaticamente il filmato.

<video src="miovideo.ogv" width="640" height="480" autoplay>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Un’ultima nota va dedicata al fatto che abbiamo due file da inserire e non uno, l’attributo src non è quindi sufficiente e dobbiamo utilizzare l’elemento source con l’attributo src per definire la risorsa.
In aggiunta è necessario specificare il mime del file e i codecs per far sì che il browser sappia a priori cosa andrà a caricare e se è supporta lo specifico file.

<video  width="640" height="480" autoplay>
<source src="miovideo.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="miovideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

In conclusione

Una volta applicato questo codice con i relativi percorsi ai rispettivi files si ottiene un risultato come in questo esempio.

Il video utilizzato nell’esempio è visibile su youtube ed è stato gentilmente fornito da Guido Viale Marchino che ringrazio per l’aiuto.

Una funzionalità aggiuntiva per i browser che non supportano il tag video potrebbe essere quella di aggiungere un flash player come contenuto alternativo ma richiede una verifica del supporto dell’elemento video per il client utilizzato dall’utente.

Nel prossimo articolo vedremo come verificare il supporto delle varie funzionalità dell’HTML 5 nel browser dell’utente. Torna a trovarmi su howtoweb.it per le prossime lezioni di html 5 o iscriviti agli rss per rimanere sempre aggiornato sui nuovi articoli.

Nota:

Ho notato che inizialmente il video non veniva caricato correttamente su firefox e opera, il problema era il fatto che il mime video/ogg non veniva associato da apache al file in formato .ogv

Per risolvere ho aggiunto un file .htaccess nella cartella specificando a quali formati applicare il mime presente nela pagina html.

Nel caso incontriate la stessa problematica è possibile risolvere con questa linea di codice all’interno del file .htaccess

AddType video/ogg .ogg .ogv

Una delle funzionalità più interessanti dell’HTML 5 è senza dubbio rappresentata dalla possibilità di inserire filmati video all’interno della pagina web.

Questo elemento cambia notevolmente il modo in cui gli utenti possono usufruire dei video su internet permettendo la visione del contenuto senza un player flash.

L’attuale supporto per questo elemento è riservato alle ultime versioni di firefox, safari e chrome ma la stessa microsoft ha annunciato il supporto per Internet explorer 9 mentre per Opera dalla versione 10 (10.5).

Per iniziare

Prima di iniziare con il codice è indispensabile ricordare che non tutti i browser supportano gli stessi contenitori e gli stessi codecs audio/video. Un file video è di fatti composto da un contenitore (mpeg4,flash video, ogg ecc), un codec audio (mpeg1,vorbis, ecc) e un codec video (mpeg4 asp, h.264, theora).
Per portare un po’ di ordine in questa situazione è utile tener presente ciò che è supportato dai browser e preparare due files. Uno con theora,vorbis e ogg e il secondo con h.624,aac e mp4.

Il primo files sarà supportato da firefox, opera e chrome il secondo da chrome, safari, iphone e android.

Per la conversione dei files di questo esempio sono stati utilizzati ffmpeg2theora ed handbrake .

L’elemento video

Per integrare nella pagina web il nostro video utilizziamo l’elemento video con chiusura esplicita.

<video></video>

Al suo interno è possibile specificare un contenuto alternativo nel caso il browser non supporti questo elemento.

<video>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Considerato che l’elemento video si comporta come l’elemento immagine necessita sempre di avere un altezza e una larghezza specifica.

<video width="640" height="480">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Per inserire il video sorgente aggiungiamo l’attributo src con la path relativa alla risorsa.

<video src="miovideo.ogv" width="640" height="480">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Per rendere visibili i controlli del video è sufficiente aggiungere l’attributo controls.

<video src="miovideo.ogv" width="640" height="480" controls>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Se desideriamo che il video venga scaricato non appena la pagina è caricata possiamo aggiungere l’attributo preload.

<video src="miovideo.ogv" width="640" height="480" preload>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

O in caso contrario specificare “none” come valore.

<video src="miovideo.ogv" width="640" height="480" preload="none">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Un’ultima opzione viene offerta dall’attributo autoplay che fa partire automaticamente il filmato.

<video src="miovideo.ogv" width="640" height="480" autoplay>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Un’ultima nota va dedicata al fatto che abbiamo due file da inserire e non uno, l’attributo src non è quindi sufficiente e dobbiamo utilizzare l’elemento source con l’attributo src per definire la risorsa.
In aggiunta è necessario specificare il mime del file e i codecs per far sì che il browser sappia a priori cosa andrà a caricare e se è supporta lo specifico file.

<video  width="640" height="480" autoplay>
<source src="miovideo.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="miovideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

In conclusione

Una volta applicato questo codice con i relativi percorsi ai rispettivi files si ottiene un risultato come in questo esempio.

Il video utilizzato nell’esempio è visibile su youtube ed è stato gentilmente fornito da Guido Viale Marchino che ringrazio per l’aiuto.

Una funzionalità aggiuntiva per i browser che non supportano il tag video potrebbe essere quella di aggiungere un flash player come contenuto alternativo ma richiede una verifica del supporto dell’elemento video per il client utilizzato dall’utente.

Nel prossimo articolo vedremo come verificare il supporto delle varie funzionalità dell’HTML 5 nel browser dell’utente. Torna a trovarmi su howtoweb.it per le prossime lezioni di html 5 o iscriviti agli rss per rimanere sempre aggiornato sui nuovi articoli.

Nota:

Ho notato che inizialmente il video non veniva caricato correttamente su firefox e opera, il problema era il fatto che il mime video/ogg non veniva associato da apache al file in formato .ogv

Per risolvere ho aggiunto un file .htaccess nella cartella specificando a quali formati applicare il mime presente nela pagina html.

Nel caso incontriate la stessa problematica è possibile risolvere con questa linea di codice all’interno del file .htaccess

AddType video/ogg .ogg .ogv

Firebug

E’ l’addon più gettonato di sempre, velocizza il lavoro e la verifica permettendo di analizzare nel dettaglio la pagina html, il dom e javascript. Uno strumento utile per html e css, permette infatti di analizzare un elemento della pagina e vedere quali regole sono attribuite e quali eredita. Per chi invece utilizza javascript mette a disposizione una comoda console che riporta errori e anomalie. Oltre a questo Firebug permette la modifica da browser dei css oltre ad una comoda rappresentazione del box model per valutare i parametri di ogni elemento. Uno strumento indispensabile quando si lavora con ajax anche se diventa eccessivo per la normale navigazione web.

link al sito del progetto

Web developer toolbar

Un ottimo addon dai molteplici utilizzi, consente di visualizzare separatamente javascript, css e html. Permette la modifica da browser di css e html con rendering immediato, analizza il peso della pagina fornendo un report sulle dimensioni dei files, compila automaticamente i campi di un form, valida pagine online e offline tramite il validatore w3c, permette l’anteprima a diverse risoluzioni e fornisce un righello per misurare in pixel ogni parte della pagina. Oltre a questo semplifica le normali operazioni da browser come disabilitare immagini o css e cancellare i cookie.

linka mozilla add-ons

Fireshot

E’ un addon per firefox che salva in formato png l’immagine del sito, ma non solo, permette l’aggiunta di note e commenti direttamente da browser salvando il tutto come immagine. L’opzione “capture entire page” permette di salvare un’immagine della pagina per intero e le opzioni di condivisione permettono di velocizzare la stampa, l’invio tramite mail o l’upload.

Link a mozilla add-ons

Tre ottimi strumenti per velocizzare il lavoro, se ancora non li usate non vi resta che provarli.

L’eventualità purtroppo non è rara e di norma è una conseguenza diretta di una violazione alle linee guida dettate da Google ai webmaster. Le motivazioni possono essere molte, testo nascosto, contenuto inappropriato, redirect e molte altre.

Una delle casistiche che mi ha sempre intimorito di più è il cloaking, che consiste nel proporre agli utenti un determinato contenuto, deviando però i robot dei motori di ricerca su un’altra pagina e alterare così l’indicizzazione.

Normalmente si evita di applicare intenzionalmente questa tecnica, in quanto Google riesce facilmente ad individuare questo genere di trucchi in quanto utilizza anche persone vere per la verifica dei siti oltre ai Robot .

Può capitare però che a causa di un errore umano o di un exploit sul nostro spazio web venga modificato per esempio il file .htacces con un redirect solo per gli spider dei motori di ricerca. Nel caso non ci siano modifiche palesi al sito risulta molto difficile accorgersi di questo problema intanto google avrà tolto le nostre pagine dall’indice.

E’ sempre possibile richiedere a Google di riconsiderare il motivo dell’esclusione dall’indice ma questa operazione richiede qualche tempo. Intanto si potrebbe verificare la corretta risposta del server ai robot dei motori di ricerca con questo semplice tool che ci presenta la risposta del server in base ai diversi user-agent.

La stessa procedura è eseguibile con firefox (vedi un esempio in questo articolo) ed esistono numerosi addon per gestire questo tipo di verifica, ma questa soluzione da browser mi risulta molto comoda e veloce per controlli preliminari.

Per chi volesse approfondire argomenti simili suggerisco questo recente articolo di Davide Casali che parte da un’esperienza reale per descrivere verifica, analisi e soluzioni ad un exploit sul proprio sito web.

Questa opinione è condivisa da molti che come me lavorano su Internet, poichè negli anni nonostante le migliorie delle varie versioni di Internet Explorer è sempre venuto a mancare quel supporto verso determinate tecnologie che altri browser hanno iniziato ad offrire da tempo.

Questo ha generato in me (e in molti altri) una perdita di fiducia nei confronti di un browser utilizzato da molti se non la maggioranza degli utenti che navigano in rete.

La mia posizione è dovuta ad uno scarso se non assente supporto di determinate tecnologie anche sulle ultime versioni di internet explorer, che mi impedisce di utilizzare alcune soluzioni, rendendo più lungo e problematico il mio lavoro.

Ovviamente l’utente medio non ha percezione di queste problematiche e giustamente tende alla soluzione più veloce e pratica ovvero utilizza il browser installato sul suo sistema operativo senza preoccuparsi se sia la scelta migliore, da qui l’ampia percentuale di utilizzo del browser Microsoft.

Nel confronto con Netscape negli anni ’90 Internet Explorer è riuscito a essere il browser più utilizzato grazie all’integrazione sul sistema operativo, negli anni successivi abbiamo visto come Firefox abbia puntato su un migliore supporto degli standard e delle nuove tecnologie, coinvolgendo maggiormente gli sviluppatori.

Ad oggi la guerra dei browser sembra sempre più rivolta all’utente tradizionale, Chrome per esempio offre una maggiore velocità e comodità nell’utilizzo dei servizi di Google (gmail, google maps ecc) mentre Firefox punta ad ampliare le possibilità con nuove applicazioni come Prism che permette di eseguire siti internet (twitter, facebook ecc) come applicazioni da desktop.

E’ inoltre emerso da recenti studi che i browser più sicuri siano quelli che offrono all’utente un aggiornamento automatico e questo pone ovviamente Firefox e Chrome in cima alla classifica.

In un ambito tecnologico come internet è ovvio che l’utente non si preoccupi del supporto di un browser verso determinate tecnologie o standard, diventa però più sensibile quando le possibilità offerte diventano inferiori.

Poter leggere in maniera più veloce la mail, avere un collegamento al desktop per i siti più usati per lavorare o navigare in maniera più sicura su internet sono valori non da poco per convincere una persona dei vantaggi dati da un’alternativa ad Internet Explorer.

Nei prossimi anni la migrazione da Internet Explorer ad altri browser sarà sempre più grande se Microsoft non inizierà a considerare maggiormente i bisogni dell’utente, le statistiche ad oggi propendono per questo browser come il più usato dagli utenti ma sono sinceramente dubbioso su alcuni di questi dati vedendo che sul mio piccolo blog la percentuale di utenti che utilizza le varie versioni di Internet Explorer è meno del 13% mentre Firefox supera il 70% con Safari (poco più del 6%) e Chrome (oltre il 4%) in coda.