In questo articolo vediamo come ottenere rotazioni compatibili con la maggior parte dei browser, su questa pagina è presente una demo della soluzione proposta.

Rotazione con CSS3

Grazie alla proprietà transform che si occupa delle trasformazioni bidimensionali è possibile definire rotazioni customizzate per i vari elementi della pagina.

transform: rotate(7.5deg)

La sintassi è molto semplice:

proprietà: funzione(valore)

come eneunciato nelle specifiche di trasformazione bisimensionale dei CSS3 presenti sul sito del W3C.

Ampliare il supporto ai vari browser

Per ampliare il supporto di questa proprietà è possibile utilizzare la stessa sintassi ma dedicata ai singoli browser/motori di rendering.

transform: rotate(7.5deg);
/*generica*/
-webkit-transform: rotate(7.5deg);
/* CHROME/SAFARI*/
-moz-transform: rotate(7.5deg);
/* FIREFOX/MOZILLA */
-o-transform: rotate(7.5deg);
/* OPERA */
-ms-transform: rotate(7.5deg);
/* IE 9 */

Ampliare il supporto a Internet Explorer precendenti al 9

Come notiamo manca un supporto per Internet Explorer precedenti alla versione 9, per colmare questa lacuna è possibile utilizzare due filter predisposti da Microsoft a questo scopo: Basic Image e Matrix.

Basic Image

Con il filter Basic Image è possibile definire 3 tipi di rotazione per un elemento: 90°,180° e 270° settando la proprietà rotation rispettivamente a 1, 2 o 3.

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);/*ie5.5/7*/
-ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';/*ie8*/
/* nessuna rotazione*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie5.5/7*/
-ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';/*ie8*/
/* rotazione di 90°*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);/*ie5.5/7*/
-ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';/*ie8*/
/* rotazione di 180°*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);/*ie5.5/7*/
-ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';/*ie8*/
/* rotazione di 270°*/

Matrix

Il limite della poprietà Basic Image è rappresentato dal fatto di offrire solo 3 tipi di rotazione e nessun tipo di rotazione custom. Per ottenere un maggiore controllo è allora possibile utilizzare il filter Matrix, che si occupa della trasformazione bidimensionale di un elemento (come la proprietà transform dei css3).

filter: progid:DXImageTransform.Microsoft.Matrix(
       M11=0.9914448613738104,
       M12=-0.13052619222005157,
       M21=0.13052619222005157,
       M22=0.9914448613738104, sizingMethod='auto expand');
       zoom: 1;   /* IE 5.5-7*/
-ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(
       M11=0.9914448613738104,
       M12=-0.13052619222005157,
       M21=0.13052619222005157,
       M22=0.9914448613738104, sizingMethod='auto expand');
       zoom: 1'; /* IE8 */
       /*rotazione di 7.5 gradi*/

Il filter Matrix si occupa di ridefinire l’elemento in base ai 4 angoli dell’elemento, per calcolare questi 4 punti è necessaria un po’ di matematica per disporre correttamente le coordinate, nello specifico i 4 valori inseriti (m11,m12,m21,m22) saranno uguali alle seguenti formule.

m11 = cos((gradi)*3,14159265*2/360)
m12 = -sen((gradi)*3,14159265*2/360)
m21 = sen((gradi)*3,14159265*2/360)
m22 = cos((gradi)*3,14159265*2/360)

La proprietà sizingMethod definisce invece se l’elemento contenitore dovrà adattarsi o meno all’immagine generata grazie al valore “auto expand”.

Su questa pagina è possibile vedere una demo della soluzione proposta.

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)'

Cinque giornate di incontri ed eventi con notte bianca e contest non-stop di 24 ore.

Non mancheranno le possibilità di confronto con professionisti ed aziende del settore a cui viene dato spazio nella giornata di mercoledì 9 marzo presso il collegio di Milano.

Sul sito dell’evento (http://www.digitalfestival.net) è disponibile il programma delle varie giornate con possibilità d’iscrizione per i singoli incontri.

Se siete dei fedeli utilizzatori di wordpress e state cercando un modo veloce per aggiungere la gestione di contenuti in più lingue, vi suggerisco di provare qtranslate (http://www.qianqin.de/qtranslate/), plugin per wordpress che permette la gestione di più lingue per contenuti differente.

Per installarlo, scaricate il plugin nella versione compatibile alla vostra installazione di wordpress (potete rintracciarlo nel repository di wordpress plugin (http://wordpress.org/extend/plugins/qtranslate/)), copiate la cartella del plugin in wp-content/plugin e attivate il plugin dal pannello di amministrazione.

A questo punto verrà aggiunta la voce “lingue” (o “languages”) nel menu di amministrazione.
Da questa sezione è possibile gestire quante e quali lingue si desidera utilizzare per il proprio sito, definendone l’ordine e la lingua di default oltre ad opzioni sulla gestione dell’url per i contenuti multilingua e il tracciamento della lingua dell’utente dal browser.

Una volta impostate le varie opzioni è possibile gestire categorie, pagine ed articoli come contenuti multilingua direttamente dal pannello di amministrazione.

La gestione delle lingue di qtranslate è basata sui tag multilingua, che consentono di definire contenuti diversi in base alla lingua all’interno del sito. Questo procedimento è automatizzato per titoli e testi ma va definito a mano nel caso di testi per allegati e in alcuni casi per i custom menu.

<!--:en-->English text<!--:-->
<!--:it-->Testo in italiano<!--:-->

In base alla lingua selezionata verrà restituito come output solo il contenuto pertinente alla specifica lingua.

Nel caso incontriate la necessità di gestire il codice in maniera customizzata all’interno di funzioni o del tema è possibile utilizzare le API di Qtranslate per l’esecuzione dei tag.

__(<!--:en-->English text<!--:-->
<!--:it-->Testo in italiano<!--:--> );

Per valutare la lingua selezionata è possibile utilizzare qtrans_getLanguage() ed ottenere l’abbreviazione univoca della lingua scelta dall’utente.

if(qtrans_getLanguage() == "it"){
echo "testo italiano";
}else{
echo "english text";
}

Per ottenere la navigazione tra le lingue viene offerta la funzione qtrans_generateLanguageSelectCode().
Questa permette l’output di una lista o un dropdown con le varie lingue selezionabili dall’utente.
Tra le opzioni è possibile scegliere il tipo di output: lista con testo, lista con bandiere, lista con testo e bandiere oppure un select.

qtrans_generateLanguageSelectCode("image");
//lista lingue con immagini delle bandiere

Qtranslate fornisce di default le bandiere, i nomi e le abbreviazioni per le varie lingue, che sono ovviamente customizzabili a piacimento. Una soluzione rapida per la modifica delle immagini delle bandiere è l’utilizzo di css sprite basato sulle classi della lista di default.

#qtranslate-chooser li a.qtrans_flag{
background:#FFF url(images/flags.png) 0 0 no-repeat;
width:20px;
height:20px;
display:block;
}
#qtranslate-chooser li a.qtrans_flag_it{background-position:0 0;}
#qtranslate-chooser li a.qtrans_flag_en{background-position:0 -20px;}
#qtranslate-chooser li a.qtrans_flag_de{background-position:0 -40px;}
#qtranslate-chooser li a.qtrans_flag_fr{background-position:0 -60px;}

Un limite riscontrato nella gestione dei contenuti multilingue su wordpress attraverso qtranslate è il fatto di non poter definire allegati differenti per lo stesso contenuto in base alla lingua. Per aggirare questo ostacolo è possibile definire come testo alternativo o come excerpt dell’allegato l’abbreviazione della lingua e valutare questo parametro nel momento dell’output.

Di seguito un esempio per ricavare le immagini allegate ad una pagina solo per una specifica lingua.

<?php
$my_id = get_the_ID();
 $args = array(
'post_type' => 'attachment',
'post_parent' => $my_id,
'orderby' => 'menu_order',
'order' => 'asc'
);
 $attachments = get_posts($args);
 if ($attachments) {
   foreach ($attachments as $attachment) {
     if($attachment->post_excerpt == qtrans_getLanguage()){
       echo "<img src='".$attachment->guid."'/>";
     }
   }
}
?>

Come ultima nota suggerisco una visita al sito dell’autore del plugin (http://www.qianqin.de/qtranslate/) e al forum (http://www.qianqin.de/qtranslate/forum/), nel caso vogliate espandere le potenzialità di qtranslate potete testare altri plugin che permettono gestioni più avanzate per specifici ambiti (meta tag, buddy press, sitemap) sul repository di wordpress plugin (http://wordpress.org/extend/plugins/search.php?q=qtranslate).

Tempo fa avevo parlato su queste pagine dell’elemento video per l’html5.

Tra i maggiori vantaggi di questa soluzione c’è l’esclusione di flash per device mobili (nello specifico ipad ed iphone).
Dall’ultimo articolo è passato un po’ e trovandomi a dover integrare un video per un progetto ho rivisto le mie precedenti nozioni sul tema.

Come prima cosa ho cercato una soluzione di veloce integrazione ma che garantisse un buon supporto e mi sono imbattuto in videojs (http://videojs.com/).

Un ottimo script che offre:

• un file javascript (valuta se il browser supporta l’elemento video nel caso offre flowplayer)
• un css (per gestire lo stile del player)
• inclusione esterna a flowplayer (per browser che non supportano l’elemento video)

L’applicazione è estremamente semplice, nel caso non siate pratici del codice potete utilizzare il comodo tool (http://videojs.com/embed-builder/) che assembla il codice necessario al volo.

E’ sufficiente inserire le risorse necessarie, ovvero:

• url dell’immagine di default (viene mostrata mentre il video viene caricato)
• url delvideo in mp4
• url del video in ogg
• url del video in webm

tra le opzioni vediamo:

• quale video caricare nel player flash (di default l’mp4)
• altezza e larghezza del video
• se inserire i link per il donwload del video (per device che non supportano i video)
• support videojs (inserisce o meno un link al sito di videojs)
• preload (permette di far partire il buffer non appena la pagina è caricata)
• autoplay (fa partire il video in automatico)compact version (codice senza spazi per peso inferiore)

Con questa soluzione si velocizza notevolmente l’inserimento dei video in html su siti e applicazioni web, l’unica miglioria che mi sento di consigliare è quella di evitare l’inclusione esterna del flowplayer ma caricare la risorsa sul proprio spazio e richiamarla come tale.
In questo modo otteniamo un caricamento più veloce (e più gestibile) del player in flash oltre che assicurarci una versione più aggiornata rispetto a quella impostata nello script.

L’ultima considerazione su questa tecnica è la conversione del video nei tre formati necessari, sicuramente complessa per chi è poco pratico di questo ambito. Il mio suggerimento è quello di provare ad utilizzare vlc per la conversione, che permette un’ampia e dettagliata scelta dei codec e dei formati nella sua ultima versione includendo sia mp4 che ogg.

Come alternativa è possibile utilizzare handbrake (http://handbrake.fr/) per l’mp4 e ffmpeg2theora (http://v2v.cc/~j/ffmpeg2theora/) per l’ogg, nel caso non siate pratici di dos esiste una versione con interfaccia (http://www.softpedia.com/downloadTag/theora+converter) basata sullo stesso convertitore.
Se non incontrate successo con queste opzioni suggerisco una visita a questo post (http://www.reelseo.com/html5-ogg-h264-encoding-tools/), dove vengono consigliati numerose alternative.

Tra i consigli ho omesso un convertitore per il formato webm (http://www.webmproject.org/), personalmente non ho avuto fortuna e non son riuscito ad ottenere un file video funzionante per questo formato, probabilmente anche per il poco tempo a disposizione.

Per ora ho quindi preferito omettere questa alternativa nei miei progetti non essendo questo formato l’unico supportato dai diversi browser. Per il futuro spero di potermi applicare di più, in attesa vi lascio la lista di convertitori suggerita nel sito del webm (http://www.webmproject.org/tools/) per fare qualche test.

In questo articolo vedremo come integrare facilmente il widget autocomplete di Jquery UI all’interno di pagine dinamiche.

L’utilizzo è molto semplice, come prima cosa è necessario scaricare il pacchetto completo di Jquery UI compreso di tema personalizzato o standard e collegare i rispettivi files alla pagina dinamica.

<link rel="stylesheet" href="css/theme/ui.theme.css" type="text/css"/>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>

Ora possiamo aggiungere l’elemento input che utilizzero per l’autocomplete, per comodità di selezione verrà aggiunto un id.

<input value="Insert your tag here" />

Per ciò che riguarda javascript iniziamo applicando un autocomplete base al campo input

$(function() {var myTags = ["tag1", "tag2", "anotherTag", "simpleTag"];
$("#tags").autocomplete({source: myTags});});

In questo caso settiamo come opzione “source” che specifica come sorgente l’array “myTags”.Per rendere dinamico l’autocomplete modifichiamo la sorgente con un file dinamico che si occuperà di effettuare la ricerca

 $("#tags").autocomplete({source: "tagSearch.php"});

Di seguito un esempio per tagSearch.php:

//creazione di un array vuoto
$return_arr = array();

//dati di accesso a mysql e al db
$dbhost = 'YOUR_SERVER';
$dbuser = 'YOUR_USERNAME';
$dbpass = 'YOUR_PASSWORD';
$dbname = 'YOUR_DATABASE_NAME';

//definisco la variabile di ricerca dell'utente
$term = $_GET("term");

//connessione al a mysql
$conn = mysql_connect($dbhost, $dbuser, $dbpass)
or die ('Impossibile connettersi a Mysql');
//selezione ddb
mysql_select_db($dbname);
//se connesso
if ($conn)
{
//query select
$fetch = mysql_query("SELECT * FROM tags WHERE MATCH(tagName) AGAINST('".$term."*')");
//loop dei dati
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
$row_array['value'] = $row['tagName '];
array_push($return_arr,$row_array);
}

}
//chiudo la connessione a mysql
mysql_close($conn);
//restituisco l'array in formato json
echo json_encode($return_arr);

La variabile $terms viene ricavata dall’url, l’autocomplete di Jquery UI richiama infatti il file search.php con la variabile term (es. search.php?term=ciao) ad ogni change nel campo input.Considerato che la variabile term viene aggiornata e inviata ad ogni change del campo ho utilizzato MATCH AGAINST nella query affinchè ad ogni richiesta mysql cerchi l’input dell’utente seguito da altro.Il risultato è che a fronte di una ricerca “a” verranno restituiti tutti i dati che iniziano per “a”, aggiungendo lettere verranno restituiti solo i dati che corrispondono ai criteri della ricerca.

L’autocomplete di JQuery UI prevede una vasta serie di opzioni con le quali è possibile manipolare i dati prensenti nell’input e nei risultati, creare una cache dai dati e customizzare aspetto e animazioni dell’input.Per maggiori informazioni consiglio una lettura della documentazione disponibile sulla pagina dedicata.

In questo articolo vedremo come realizzare un selettore multilingue con html, css e jquery, per vedere l’ esempio completo visitate la demo.

Per questo tutorial ho utilizzato world-flags-sprite, una soluzione css che offre una vasta gamma di bandiere di numerosi stati attraverso la tecnica degli sprites css, consiglio vivamente questa soluzione che permette di aggiungere facilmente le immagini per nuove lingue.
Iniziamo creando un nuovo file html in cui inseriremo il nostro markup. L’esempio qui proposto è pensato in chiave statica ma può essere facilmente applicato anche a pagine dinamiche gestendo l’output del testo e delle classi.

HTML

<ul>
<li>
<a href="http://www.mywebsite.it/index.html?lang=it" title="Italy">
<span></span>Italy
</a>
</li>
<li>
<a href="http://www.mywebsite.it/index.html?lang=us" title="Usa">
<span></span>Usa
</a>
</li>
<li>
<a href="http://www.mywebsite.it/index.html?lang=uk" title="England">
<span></span>England
</a>
</li>
<li>
<a href="http://www.mywebsite.it/index.html?lang=fr" title="France">
<span></span>France
</a>
</li>
<li>
<a href="http://www.mywebsite.it/index.html?lang=es" title="Spain">
<span></span>Spain
</a>
</li>
<li>
<a href="http://www.mywebsite.it/index.html?lang=de" title="Germany">
<span></span>Germany
</a>
</li>
</ul>

Definiamo una lista non ordinata con all’interno degli elementi “li” che conterranno le singole lingue. In ogni singola voce definiamo un link che conterrà l’url al sito nella rispettiva lingua.In questo esempio ogni link rimanda ad una pagina fittizia a cui viene aggiunta una variabile per la selezione della lingua. Nel link inseriremo un elemento span che utilizzaremo come contenitore per l’immagine della bandiera e il testo della lingua.

Le classi presenti sull’elemento “ul” sono relative al layout della lista (.langSelect) e al template applicato (“.black”,”.white” oppure “.grey”). Le classi “.f16″ e “flag” sono relative a flags16.css e servono per mostrare l’immagine delle rispettive bandiere.

CSS

La prima parte del css è dedicata al template. Colori, bordi e immagini di fondo sono gestiti dalle classi “.black” , “.white” e “.grey”.

/*black theme*/
.black{background-color:#000;border:1px solid #444;}
.black li:first-child{background-position:right top;}
.black a{color:#fff;}
.black a:hover{background:#111;}
.black li:first-child + li{border-top:1px solid #444;}
/*white theme*/
.white{background-color:#eee;border:1px solid #bbb;}
.white li:first-child{background-position:right -25px;}
.white a{color:#333;}
.white a:hover{background:#ddd;}
.white li:first-child + li{border-top:1px solid #bbb;}
/*grey theme*/
.grey{background-color:#ccc;border:1px solid #eee;}
.grey li:first-child{background-position:right -50px;}
.grey a{color:#000;}
.grey a:hover{background:#999;}
.grey li:first-child + li{border-top:1px solid #aaa;}

La seconda parte del css gestisce il layout della lista definendo dimensioni, spaziature e larghezza.

.langSelect{
    width:150px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    text-align:left;
    list-style:none;
}
.langSelect li{
    line-height:25px;
    position:relative;
}
.langSelect a{
    padding-left:35px;
    position:relative;
    text-decoration:none;
    display:block;
}
.langSelect li:first-child a:hover{
    background:transparent;
}
.langSelect li:first-child{
    background-image:url(../img/bg_lang_select.png);
    background-repeat:no-repeat;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}
.langSelect li:last-child a:hover{
    -moz-border-radius:0 0 10px 10px;
    -webkit-border-radius:0 0 10px 10px;
    border-radius:0 0 10px 10px;
}
.langSelect a span{
    width:16px;
    height:16px;
    position:absolute;
    top:50%;
    margin-top:-8px;
    left:10px;
}

In questo modo è possibile creare stili customizzati in poco tempo e senza dover metter mano al layout.

JQUERY E JAVASCRIPT

Prima di inizare con il codice javascript assicuratevi di aver incluso la libreria jquery nella pagina, la potete trovare sul sito di jquery o in alternativa caricarla attraverso le Google AJAX Libraries API.
Lo script può essere incluso sia internamente che esternamente alla pagina html.

Il codice verifica innanzitutto il caricamento della pagina.

 $(function() {

Una volta certo della presenza degli elementi nel DOM inizia nascondendo tutti gli elementi “li” successivi al primo.

$(“.langSelect li:first-child”).nextAll().hide();

La seguente istruzione verifica l’hover del mouse sulla lista.

 $(".langSelect").hover(function(){

Al mouseover anima gli elementi successivi al primo “li” mostrandoli.

 $(this).find("li:first-child").nextAll().not(":animated").slideDown(500);

Mentre al mouseout li nasconde

 $(this).find("li:first-child").nextAll().not(":animated").slideUp(500);

Una piccola nota su questo passaggio, è possibile notare l’utilizzo di .not(“:animated”) questa aggiunta impedisce che le animazioni partano o si ripetano quando gli elementi sono ancora animati.
Una volta completate le istruzioni sull’animazione definiamo il codice da eseguire al click della singola voce.

 $(".langSelect li").click(function(){

Come prima cosa è necessario verificare se la voce cliccata sia quella già selezionata.

 if($("li").index(this) == 0){

in quel caso annulliamo la chiamata del link e non eseguiamo ulteriori istruzioni

 return false;

In questo caso return false sull’elemento li annulla la chiamata del link al suo interno impedendo la chiamata alla pagina su cui l’utente già si trova.
Nel caso l’utente clicchi su una lingua diversa da quella selezionata spostiamo questa voce come prima della lista.

 $(this).prependTo($(this).parent("ul"));

Subito dopo animo il menu per nascondere le altre lingue.

 $(this).parent("ul").find("li:first-child").nextAll().slideUp(400,

E aggiungo una funzione di callback che al completamento dell’animazione rimanda l’utente all’url presente nel link della lingua cliccata.

 function (){
 location.href = $(this).find("a").attr("href");
 });

Per concludere annullo la chiamata del link tradizionale ed evitare l’immediata chiamata alla pagina in questione.

 return false;

Per vedere l’ esempio completo visitate la demo.

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

Nelle ultime settimane mi si sono presentate diverse occasioni per discutere sul supporto da offrire agli utenti di Internet Explorer 6 e ho notato che la questione risulta ben lontana dall’essere risolta.

Allo stato attuale i maggiori servizi di statistiche web delineano gli utenti di Internet Explorer 6 tra il 9% e il 18% dell’utenza mondiale.

Una statistica indubbiamente preoccupante considerato che superara gli utenti di safari, chrome ed opera messi insieme.

Detto questo prima di farsi prendere dal panico suggerirei di abbandonare le ricerce per ottenere un numero preciso di utenti IE6 sul pianeta e di basarsi su qualcosa di più oggettivo.

Sicuramente se vi siete posti il problema è perchè temete di perdere utenza tra coloro che utilizzano questo vetusto browser e prima di procedere oltre vi consiglierei di rispondere alla seguente domanda:

Quanti utenti con Internet Explorer 6 navigano sul vostro sito?

Per fare un esempio su questo blog gli utenti con ie6 negli ultimi 4 mesi risultano meno dell’1% e lo stesso potrebbe essere per il vostro sito.

Non saprete mai di quanti utenti state parlando finchè non effettuerete delle verifiche sulle vostre statistiche.

Sicuramente questi dati sono molto più precisi delle statistiche globali, che essendo su grandi numeri e contesti diversi probabilmente non rappresentano il vostro caso.

Una volta verificati i numeri vi inviterei a valutare anche l’andamento delle visite degli utenti con IE6 da un anno fa ad oggi.

Sulla base di questi dati possiamo arrivare sicuramente ad almeno un paio di conclusioni:

1) Gli attuali utenti con Internet Explorer 6 sono una minoranza

2) Gli attuali utenti con Internet Explorer 6 sono meno di un anno fa

Queste sono realtà oggettive ricavabili dalle statistiche di qualunque sito web.

Perchè accade questo? Internet Explorer 6 è un browser obsoleto, uscito nel 2001 che ha visto alterni update fino al 2007/2008, da allora sono uscite 2 nuove versioni di questo browser e a breve ne vedremo una terza.Questo browser presenta innumerevoli problemi di sicurezza, performance e funzionalità, per questo motivo molte aziende quali Google hanno abbandonato il supporto a questo browser.

Per lo stesso motivo Microsoft sta portando avanti da tempo campagne a favore dell’aggiornamento a Internet Explorer 8.

Gli interventi necessari per il funzionamento delle attuali tecnologie su Internet Explorer 6 sono onerosi e in alcuni casi impossibili, richiedono lunghi tempi di produzione e di test, quindi grandi costi che potrebbero essere altrimenti destinati al miglioramento dell’accessibilità e dell’usabilità, all’ottimizzazione dei tempi di caricamento delle pagine e per i motori di ricerca che portano vantaggi concreti a tutta l’utenza del sito e non solo ad una minoranza in via d’estinzione.

Lavorare ad oggi per il supporto agli utenti di Internet Explorer 6 è di fatto uno spreco di tempo e risorse che non porta vantaggi a nessuno e rappresenta una completa opposizione al buon senso che attualmente caratterizza il mondo del web ed aziende del livello di Microsoft o Google.