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

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

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.

L’HTML 5 è ormai una realtà affermata, le attuali specifiche attendono solo gli ultimi commenti prima di essere dichiarate ufficiali e i browser già permettono un valido supporto che permette di iniziare ad utilizzare parte delle features offerte da questo linguaggio per i propri progetti.

Vediamo quindi come iniziare ad impostare una pagina in HTML 5 per un eventuale sito web.

Sintassi

Per creare il nostro primo file HTML è sufficiente definire un nuovo file testuale con estensione .html o .htm, al suo interno possiamo iniziare a definire la struttura della nostra pagina.

<html>
<head></head>
<body></body>
</html>

L’HTML 5 come tutti i linguaggi di marcatura ipertestuale presenta una struttura base racchiusa nell’elemento <html> con all’interno i due elementi <head> e <body> per una corretta suddivisione tra informazioni e contenuto.

Il doctype

Una delle caratteristiche più importanti dell’HTML 5 è lo shorten doctype o doctype dtdless

<!doctype html>

Questo doctype privo di indicazioni sul dtd o sul linguaggio utilizzato, forza automaticamente il browser in modalità standard senza l’aggiunta di ulteriore codice.
Nonostante la sua semplicità vanta un ottimo supporto, non a caso è utilizzato da tempo sulla homepage di Google e da molti altri siti.

Gli attributi

Non vi sono grandi differenze negli attributi rispetto ad altre versioni dell’HTML. Per enunciare l’attributo è sufficiente utilizzare il nome seguito da un = e il valore. Nell’HTML 5 il valore dell’attributo può essere dichiarato a scelta senza apici, con apici singoli o apici doppi. Tuttavia il mio consiglio è quello di utilizzare sempre apici singoli o doppi per mantenere più ordinato il codice.

<html lang="it">

Dichiarazione del Charset

Per la dichiarazione del charset della pagina è possibile utilizzare la classica sintassi:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

o in alternativa una versione contratta altrettanto compatibile e funzionante

<meta charset="utf-8">

In ogni caso è sempre opportuno (se non doveroso) esplicitare un charset valido per la pagina, possibilmente un UTF-8 piuttosto dell’ISO (questo per ragioni che in effetti sarebbe opportuno trattare in un altro post ).

CSS e JAVASCRIPT

Per il collegamento a risorse diverse dall’HTML, per esempio i javascript possiamo tranquillamente omettere l’attributo type.

<script>
//script javascript interno
</script>

anche nel caso di javascript interni alla pagina

<script src="js/javascriptesterno.js"></script>

Stesso discorso vale per i fogli stile con l’aggiunta di un attributo rel che diventa fondamentale nel caso si utilizzi il tag link.

<link href="css/fogliodistileesterno.css" rel="stylesheet">

Nel caso si utilizzi l’elemento style per definire fogli di stile interni, l’attributo rel non è necessario

<style>
/*foglio di stile interno*/
</style>

Ed infine ecco il nostro file in HTML 5:

<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>La mia prima pagina in HTML 5</title>
<link href="css/fogliodistileesterno.css" rel="stylesheet">
<style>
/*foglio di stile interno*/
</style>
<script src="js/javascriptesterno.js"></script>
<script>
//script javascript interno
</script>
</head>
<body>
</body>
</html>

Nel caso voleste fare un test, potete provare a validare il codice nel validatore w3c per l’HTML 5. Il validatore è ancora sperimentale ma è basato sulle attuali specifiche disponibili.

E i nuovi tag? Canvas? Video?

C’è molto da dire sull’HTML 5, per questioni pratiche ho pensato di suddividere i vari argomenti in più post, nei prossimi articoli vedremo come verificare la compatibilità del browser con le varie features dell’HTML 5, i nuovi elementi messi a disposizione e il loro funzionamento, semantica del linguaggio e altro ancora.
Che dire… passate a trovarmi su howtoweb.it oppure controllate i feed rss per rimanere aggiornati sugli ultimi post.

Alla prossima!

L’integrazione del video nei siti web è ormai diventata una pratica comune, l’inserimento in una pagina web è molto semplice soprattutto se supportato da un servizio che ospita e gestisce i contenuti video come Youtube.

Nell’articolo di oggi mostrerò una semplice integrazione tra le Youtube API e il plugin per JQuery Prettyphoto per ottenere una galleria di video in stile Youtube da inserire nella pagina del proprio sito.

Le Youtube API non sono altro che librerie messe a disposizione degli sviluppatori per gestire con semplicità i contenuti di Youtube su un sito esterno. E’ possibile integrarle con diversi linguaggi e tecnologie, nell’esempio di oggi vedremo com’è possibile utilizzarle con javascript. Per ulteriori informazioni è possibile consultare la relativa documentazione.

PrettyPhoto è un plugin per jquery simile in tutto e per tutto a Lightbox (per prototype e scriptaculus) ulteriori informazioni sono disponibili sul sito ufficiale di PrettyPhoto.

Per questa soluzione sono partito dall’esempio fornito da Youtube nella rispettiva documentazione. Lo script proposto carica dal canale desiderato le thumbnails dei video e il rispettivo titolo, caricando inoltre il player che esegue il filmato sul quale viene cliccato.

Nel nostro caso desidero mantenere le thumbnails e i titoli ma preferisco evitare che il player occupi spazio nella pagina, modificherò quindi lo script per permettere l’apertura del video in un div grazie al plugin PrettyPhoto.

Per iniziare creiamo la nostra pagina html, avendo l’accortezza di lasciare un div con id nel quale verranno caricate le thumbnails dei video.

Caricare i dati da Youtube

Ora possiamo iniziare a creare il javascript che richiamerà i dati necessari da Youtube.

Per prima cosa inseriamo un link alle api di youtube, dove specificheremo che cosa selezionare (nel nostra caso andremo a prelevare tutti i video del canale di GoogleDevelopers).

<script type="text/javascript"
src="http://gdata.youtube.com/feeds/users/GoogleDevelopers/uploads?alt=json-in-script&callback=getVideos">
</script>

Questo link ci permette di selezionare tutti i feed di un determinato utente (GoogleDevelopers) esenguendo una funzione javascript di callback (getVideos).

Andiamo quindi a definire la nostra funzione nella pagina.

<script type="text/javascript">
function getVideos(data) {

}
</script>

All’interno di questa funzione filtreremo i dati e li utilizzeremo per ottenere l’output desiderato.

Per prima cosa definiamo un array per i dati ottenuti

var feed = data.feed;
var entries = feed.entry || [];

Ora possiamo estrarre i dati utilizzando un ciclo for

for (var i = 0; i < entries.length; i++) {
}

All’interno del quale ricaviamo i dati che ci servono

var entry = entries[i];
var title = entry.title.$t.substr(0, 35);
var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
var videoUrl = entries[i].media$group.media$player[0].url;

Per gestire in maniera corretta l’output salviamo i dati relativi ai feed all’interno delle rispettive vairabili, in seguito raggruppiamo i dati con il codice html necessario all’impaginazione.

html.push('<div class="singleVideo"><a rel="prettyPhoto[flash]" href="',videoUrl,'" title="',title,'">',
'<img src="', thumbnailUrl, '"/>','</a>',
'<a rel="prettyPhoto[flash]" href="',videoUrl,'" title="',title,'"><span>',title,'...</span></a></div>');

Il risultato per ogni output del ciclo nell’html sarà:

<div class="singleVideo">
<a rel="prettyPhoto[flash]" href="[URLVIDEO]" title="[TITOLO VIDEO]">
<img src="[THUMBNAILVIDEO]"/>
</a>
<a rel="prettyPhoto[flash]" href="[URLVIDEO]" title="[TITOLO VIDEO]">
<span>[TITOLO VIDEO]...</span></a>
</div>

L’ultima riga stamperà il risultato nell’elemento con l’id specificato

document.getElementById('videoContainer').innerHTML = html.join('');

Aggiungiamo PrettyPhoto

Avendo già inserito gli attributi rel per i link non resta che aggiungere Jquery e il plugin PrettyPhoto nella pagina

<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/prettyPhoto.js"></script>

ed inserire le opzioni per il desiderato funzionamento di PrettyPhoto

$(function() {
$("a[rel^='prettyPhoto']").prettyPhoto({
animationSpeed: 'normal',
padding: 40,
opacity: 0.35,
showTitle: true,
allowresize: true,
counter_separator_label: ' di ',
theme: 'light_square',
callback: function(){}
});
});

Il risultato è visibile in questa demo.

Il grande problema è rappresentato dal fatto che non tutti i sistemi operativi hanno gli stessi font installati e solo poche famiglie di caratteri risultano comuni a tutti gli utenti.

Per far fronte a questo problema ed avere la possibilità di utilizzare un qualunque font su una pagina web è possibile utilizzare una tecnici di font replacement (nota anche come sIFR).

Esistono numerose tecniche per raggiungere il proprio obiettivo, una delle più recenti e funzionali è Cufon.

Cufon permette la sotituzione del normale web font con un altro, tramite uno script Javascript che utilizzando VML e Canvas permette una rapida sostituzione del testo con il carattere desiderato senza modificare il codice html.

Per iniziare ad utilizzare Cufon, creiamo una pagina html con del testo al quale sostituiremo il font con quello desiderato.

Come secondo step scarichiamo lo script di cufon, salviamolo in un file .js e colleghiamolo alla pagina html.

<script type="text/javascript" src="javascript/cufon.js"></script>

Ora andiamo a scegliere un font da utilizzare nella pagina (per questa operazione è indispensabile avere il file del font) ed utilizziamo lo script generator presente sul sito di Cufon .

Con questo comodo tool otterremo un file .js contenente tutte i dati per sotituire il font originale con quello desiderato.

Vediamo nel dettaglio i campi e a cosa servono:

Regular typeface - Campo obbligatorio, qua dovrete selezionare il file del font presente sulla vostra macchina

Bold typeface , Italic typeface, Bold Italic typeface – Campi opzionali, se il vostro font possiede un file per il grassetto, italico e il grassetto italico aggiungete in questi campi i rispettivi files. Questo passaggio è indispensabile per renderizzare il grassetto, l’italico e il grassetto italico di un font nella pagina web.

Use the following value as the font-family of the generated font – Serve per definire una nomenclatura standard per i diversi files che verranno generati ed evitare errori nei collegamenti.

EULA - Campo obbligatorio, con questo checkbox si conferma di avere il diritto di utilizzare un determinato font secondo la legge sulle proprietà d’intelletto.

Glyphs – I checkbox seguenti richiedono quali caratteri utilizzare dalla famiglia font, come suggerito nel form è sconsigliabile utilizzarli tutti in quanto il file risulterebbe molto pesante. Una buona combinazione è data da “uppercase”, “lowercase”, “numerals”, “punctation” e “basic latin” che mette a disposizione maiuscole, minuscole, numeri e punteggiatura mantenendo le dimensioni del file contenuto. E’ anche possibile aggiungere caratteri specifici non compresi nei precedenti checkbox tramite il form al termine di questa parte.

Security – In caso di font commerciali può essere obbligatorio limitare l’utilizzo di un font a uno o più domini, inserire gli url nel campo per limitarne l’utilizzo.

Scale the font to the following size - Permette di scalare il corpo del carattere riducendo così il peso dei singoli caratteri nella pagina. E’ consigliabile mantenere comunque un corpo superiore alle 256 unità per preservarne la qualità.

If allowed, optimized paths may differ from the original by at most – Definisce di quante unità rispetto all’originale verrà ottimizzato il singolo carattere, è sconsigliabile utilizzare quest’opzione per font con corpo ridotto.

Include kerning table – Aumenta la leggibilità del carattere ma anche il peso del javascript generato.

Gli ultimi due campi sono rispettivamente relativi alla condivisione dei dati e all’accettazione dei termini e delle condizioni del servizio.

Una volta completato cliccate sul pulsante in fondo e verrà generato uno o più files javascript con il nome del vostro font e il corpo (es.Marketing_Script_400.font.js), scaricatelo e linkatelo alla pagina html.

<script type="text/javascript" src="javascript/Marketing_Script_400.font.js"></script>

Ora è possibile inserire il codice javascript nella pagina per definire a quale applicare il font replacement

<script type="text/javascript">
   Cufon.replace('p');
</script>

E’ possibile definire anche più elementi a cui applicare la sostituzione

<script type="text/javascript">
  Cufon.replace(['h1','p']);
</script>

Esistono inoltre una serie di opzioni aggiuntivi per il funzionamento dell’hover o per l’utilizzo di sfumature di colore sul carattere, per una completa lista delle opzioni consultare la sezione styling del sito di Cufon.

Per un corretto funzionamento di Cufon la pagina html deve avere un doctype di tipo strict, inoltre per ottimizzare la velocità di rendering su ie si deve aggiungere questo script subito dopo il tag body

<!--[if IE]>
  <script type="text/javascript"> Cufon.now(); </script>
<![endif]-->

Una volta completati questi passaggi potete vedere un risultato simile a questa demo.

Coma abbiamo visto Cufon richiede poco tempo per l’implementazione e garantisce un ottimo risultato nonostante ciò ha i suoi limiti, vediamo di fare un bilancio di questa tecnica:

Vantaggi

- Semplice implementazione

- Compatibile su tutti i più recenti browser

- Non modifica il codice html

- Mantiene il codice leggibile per i motori di ricerca

Svantaggi

- Peso dei file javascript

- Esecuzione lenta su grandi quantità di testo

- Obbligatorio l’utilizzo di un doctype strict

Conclusioni

Nonostante i limiti rimane al momento la miglior tecnica di font replacement per prestazioni e qualità, c’è da sperare che in immediato futuro tutti i browser supportino le nuove specifiche per l’html 5 e migliorino i tempi di esecuzione del javascript in modo da avere migliori prestazioni sul rendering della pagina con questa tecnica.

Tempo fa avevamo parlato di come realizzare un semplice slideshow con jquery, oggi vediamo come creare in poco tempo uno slideshow completamente customizzabile e compatibile grazie a jquery e jquery cycle.

Cos’è jquery cycle?

Jquery cycle è una libreria per jquery che permette la realizzazione di slideshow con molteplici effetti di transizione garantendo una buona customizzazione a livello funzionale tramite le opzioni messe a disposizione dagli sviluppatori.

Jquery cycle è scaricabile da qui.

Come funziona?

Per iniziare creiamo una pagina html ed inseririamo le immagini della nostra galleria all’interno di un div, al quale daremo delle regole css per dimensioni e stile.

<div id="photos">
<img src="images/sample1.jpg" alt="Questa è la prima foto"/>
<img src="images/sample2.jpg" alt="Questa è la seconda foto"/>
<img src="images/sample3.jpg" alt="Questa è la terza foto"/>
<img src="images/sample1.jpg" alt="Questa è la quarta foto"/>
<img src="images/sample2.jpg" alt="Questa è la quinta foto"/>
<img src="images/sample3.jpg" alt="Questa è la sesta foto"/>
<img src="images/sample1.jpg" alt="Questa è la settima foto"/>
</div>

Fatto questo colleghiamo la nostra pagina html alla libreria di jquery e al plugin di jquery cycle.

<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery_cycle.js"></script>

(ovviamente i percorsi andranno definiti in base alla struttura della cartella)

A questo punto inseriamo la funzione cycle che farà funzionare il nostro slideshow

<script type="text/javascript">
$(document).ready(function() {
  $('#photos').cycle({
    fx:'fade',
    speed:  1000,
    timeout: 2000
  });
});
</script>

In questo codice applichiamo la funzione cycle al div #photos definendo un effetto di transizione fade, una velocità di transizione di un secondo (speed: 1000) ed un timeout di due secondi (timeout:2000).

Per vedere la demo clicca qui.

Come aggiungere le thumbnails delle immagini

Per aggiungere le thumbnails delle immagini possiamo utilizzare l’opzione pager per ottenere una paginazione numerica delle immagini e la funzione di callback pagerAnchorBuilder per sostituire i numeri alle rispettive thumbnails.

Creiamo quindi un div #thumbnails dove andremo a collocare le immagini

<div id="thumbnails"><ul></ul></div>

Aggiungiamo quindi l’opzione pager per dichiarare a jquery cycle dove desideriamo collocare le anteprime

$('#photos').cycle({
  fx:     'fade',
  speed:  1000,
  timeout: 2000,
  pager:  '#thumbnails ul',
});

Per alleggerire l’esecuzione di javascript ho preferito aggiungere manualmente i tag <ul></ul> ma è possibile aggiungere questi tag attraverso jquery nel funzione pagerAnchorBuilder che andiamo ad aggiungere.

$('#photos').cycle({
fx:     'fade',
speed:  1000,
timeout: 2000,
pager:  '#thumbnails ul',

pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#" title="Thumbnail"><img src="' + slide.src + '"/></a></li>';
}
});

La funzione pagerAnchorBuilder la normale paginazione di jquery cycle con le immagini contenute nello slide show.

Questo permette di visualizzare l’immagine scelta cliccando sulla thumbnail, viene inoltre messa a disposizione la classe .activeSlide presente sull’immagine attualmente visualizzata.

Questa soluzione molto comoda renderizza però due volte la stessa immagine, appesantendo notevolmente la pagina, in un contesto dinamico sarebbe opportuno gestire le thumbnails lato server per evitare ridimensionamenti da css che non riducono il peso dell’immagine.

Per vedere la demo clicca qui

Aggiungere una navigazione direzionale

Oltre alle thumbnails potrebbe essere utile aggiungere la possibilità all’utente di passare alla foto successiva o di tornare a quella precedente.

Per farè ciò è sufficiente creare due link con id da associare a jquery cycle

<div id="navPhotos">
<a id="prev" href=""><img src="images/button_prev.png" alt="Prev photo"></a>
<a id="next" href=""><img src="images/button_next.png" alt="Next photo"></a>
</div>

e aggiungere le opzioni prev e next al nostro script

[...]
next:   '#next',
prev:   '#prev',
[...]

In questo modo i due link porteranno sempre all’immagine precedente o successiva.

Da notare che entrambi i link sono contenuti nel div #navPhotos a questo viene assegnato un posizionamento assoluto e uno z-index elevato poichè jquery cycle utilizza la proprietà z-index per mostrare le immagini. Diventa dunque indispensabile settare uno z-index che sia sempre superiore al numero di immagini per poszionare i due link sopra lo slideshow.

Per vedere la demo clicca qui

Aggiungere una descrizione alle immagini

Per aggiungere una descrizione alle immagini è possibile sfruttare l’attributo alt del tag <img>.

Con l’aiuto dell opzioni before e after è possibile richiamare delle funzioni prima e dopo il caricamento dell’immagine.

Definiamo quindi una div #description dove andremo ad inserire le descrizioni

<div id="description">
</div>

E aggiungiamo al nostro script le opzioni after e before che richiameranno le funzioni onAfter e onBefore

[...]
before:  onBefore,
after:   onAfter,
[...]

Ora definiamo le funzioni onBefore e onAfter per caricare il testo contenuto nell’attributo alt del tag <img>

function onBefore() {
  $('#description p').fadeOut('1000');
}
function onAfter() {
  $('#description p').fadeIn('1000');
  $('#description').html('<p>' + this.alt + '</p>');
}

Queste due funzioni andranno definite al di fuori della funzione cycle poichè vengono valutate ad ogni caricamento della singola immagine.

Per il div #description è stata creata una regola css simile a #navPhotos in modo che la descrizione sia posta sopra lo slideshow con uno z-index superiore al numero di immagini presenti.

Per vedere una demo clicca qui

In conclusione

Come abbiamo visto jquery cycle mette a disposizione un numero elevato di opzioni per realizzare slideshow, è possibile inoltre aggiungere dei pulsanti per mettere in pausa o far ripartire lo slideshow, caricare contenuto diverso da immagini, settare un tempo di delay per sincronizzare più slideshow e customizzare i numerosi effetti presenti.

Per maggiori informazioni sulle possibilità di customizzazione esiste una sezione demo ed esempi sul sito di jquery cycle sicuramente molto utile.

Inoltre grazie alla gestione dello stile da css e al semplice markup è possibile creare valide alternative senza javascript per migliorarne l’accessibilità rendenfo questa una delle migliori soluzioni per realizzare slideshow in contesti statici e dinamici.

Obbiettivo più complesso è invece realizzare un layout con altezza che si adatti al browser. Questa operazione sicuramente non troppo comune ha il pregio (e soprattutto il difetto) di limitare il contenuto nell’altezza della finestra del browser.

Diventa quindi una scelta poco consigliata per garatire l’accessibilità dei contenuto, tuttavia può tornare utile per specifiche richieste che richiedono di emulare un full screen tipico dei siti in flash.

Per raggiungere in nostro obbiettivo è indispensabile far sì che il div contenitore della pagina mantenga un’altezza pari all’altezza della finestra del browser.

Cosa non fattibile settando semplicemente l’altezza dell’elemento al 100%, ma richiede che l’elemento genitore abbia settata un’altezza e che l’elemento in questione abbia un posizionamento assoluto.

body{
margin:0;
padding:0;
height:100%;
}

#content{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
overflow:hidden;
}

Grazie a questi parametri l’elemento si estende su tutta l’altezza della pagina rimanendo fuori dal flusso tradizionale con un posizionamento assoluto. Vedi l’esempio.

Per aggiungere un footer al nostro layout sarà sufficiente ridurre l’altezza dell’elemento precedente di pari valore all’altezza del footer ricordando di settare un posizionamento assoluto con bottom uguale a 0.

#footer{
height:10%;
width:100%;
position:absolute;
bottom:0;
left:0;
overflow:hidden;
}

In questo modo il footer rimarrà attaccato al fondo della finestra del browser anche al resize da parte dell’utente. Vedi esempio.

Come ultimo esempio vediamo come rendere centrato e a larghezza fissa il nostro layout.

Iniziamo settando delle larghezze a larghezza fissa mentre per centrare gli elementi non utilizziamo i margini laterali settati su auto bensì la proprietà left:50% in aggiunta ad un margine sinistro negativo pari alla metà della larghezza dell’elemento.

#content{
height:90%;
width:960px;
position:absolute;
top:0;
left:50%;
margin-left:-480px;
overflow:hidden;
}

#footer{
height:10%;
width:960px;
position:absolute;
bottom:0;
left:50%;
margin-left:-480px;
overflow:hidden;
}

In questo modo otteniamo un layout a larghezza fissa centrato con altezza al 100% e footer adiacente al margine inferiore della finestra del browser. Vedi l’esempio.

Note:

Questa soluzione non è consigliata per siti complessi in quanto il posizionamente assoluto rende maggiormente complessa l’impaginazione dei contenuti e come detto all’inizio mette a repentaglio l’accessibilità dei contenuti a risoluzioni ridotte.

La proprietà overflow:hidden; è stata inserita negli elementi per evitare che al ridimensionamento della finestra del browser l’altezza del contenuto comprometta il layout ma non è indispensabile per rendere l’altezza fluida.

Per far sì che il footer della pagina sia sempre adiacente al margine inferiore della pagina è possibile utilizzare solo il posizionamento assoluto con la proprietà bottom:0; senza ricorrere ad altezze in percentuale.

Le altezze in percentuale come le larghezze vengono renderizzate convertendo la dimensione in percentuale dell’elemento in pixel, può quindi accadere di avere uno spazio bianco tra due elementi (come #content e #footer) dato da un arrotondamento approssimativo, per risolvere questo problema è possibile utilizzare il background del body per non rendere visibile questo spazio. Nell’esempio si è settato volontariamente un sfondo bianco per rendere visibile questa problematica.