Ci tengo a premettere che non intendo approfondire la tematica  dal punto di vista della programmazione pura, non rientrando nelle mie competenze specifiche, bensì è mio intento indicare un sistema generale e semplice per realizzare un Widget in maniera rapida ed alla portata di tutti, derivato dalla lettura di alcune risorse online e cartacee.

Il nostro widget nel file functions

Il codice che vediamo va inserito unicamente nel file functions.php del nostro tema. Quello che andremo a fare è realizzare un semplicissimo widget con un titolo, e che stampi una frase. Il nostro widget sarà poi visibile dall’apposito pannello di WordPress e trascinabile in qualsivoglia sidebar!

La struttura funzionale

< ?php 
class myWidget extends WP_Widget {
 
	function myWidget() {
	}
	function widget( $args, $instance ) {
	}
	function update( $new_instance, $old_instance ) {
	}
	function form( $instance ) {
	}
}
function my_register_widgets() {
	register_widget( 'myWidget' );
}
add_action( 'widgets_init', 'my_register_widgets' );
?>

Quella che possiamo vedere qui sopra è la struttura di base che permette al nostro widget di essere riconosciuto e mostrato nel backend di wordpress. Tuttavia così è privo di qualsiasi funzionalità. Sottolineo solo alcuni aspetti che a mio avviso possono interessare. Innanzitutto quello che stiamo andando a fare è estendere la class WP_Widget, ovvero la classe che permette a WP di costruire i widget. In seguito poi abbiamo 4 metodi (funzioni) che permettono di indicare il nome del widget, di eseguirlo realmente, di effettuare correttamente le operazioni di salvataggio e di gestire il campo “Titolo” che può essere modificato. Le 4 funzionalità appena elencate fanno riferimento a function myWidget(), function widget(), function update() e function form().
Infine con la funzione my_register_widgets() (che potete chiamare a vostro piacimento) andiamo a registrare a tutti gli effetti il nostro widget perchè compaia nel backend ed infine lo istanziamo usando add_action().

L’esempio completo e funzionante

< ?php 
class myWidget extends WP_Widget {
	function myWidget() {
		parent::__construct( false, 'Il mio Widget' );
	}
	function widget( $args, $instance ) {
		extract($args);
		echo $before_widget;
		echo $before_title.$instance['title'].$after_title;
 
		//DA QUI INIZIA IL WIDGET VERO E PROPRIO
		echo "Ciao Wordpress";
		//FINE WIDGET
 
		echo $after_widget;
	}
	function update( $new_instance, $old_instance ) {
		return $new_instance;
	}
	function form( $instance ) {
		$title = esc_attr($instance['title']); ?>
		<p><label for="<?php echo $this->get_field_id('title');?>">
		Titolo: <input class="widefat" id="<?php echo $this-/>get_field_id('title');?>" name="< ?php echo $this->get_field_name('title');?>" type="text" value="< ?php echo $title; ?>" />
		</label></p>
		< ?php
	}
}
 
function my_register_widgets() {
	register_widget( 'myWidget' );
}
 
add_action( 'widgets_init', 'my_register_widgets' );
?>

Che si mostrerà così nel backend:

Come già anticipato non è mia competenza addentrarmi troppo nel mondo della programmazione (in particolare ad oggetti in questo caso) quindi lascio al tuo approfondimento personale lo studio di ciò che avviene in ogni passaggio. Ad ogni modo, con il codice sopra proposto in mano, sarà sufficiente (qualora non intendiate fornire ulteriori opzioni modificabili da backend) scrivere il vostro codice php normalmente al posto di:

//DA QUI INIZIA IL WIDGET VERO E PROPRIO
    echo "Ciao Wordpress";
//FINE WIDGET

Potrete infatti inserirei qui tutto ciò che vi pare, ad esempio usando query_post() potreste estrarre alcuni particolari contenuti e così via. Insomma, la struttura funzionale è questa, poi il cuore dovrete farlo pulsare voi

Altri articoli che potrebbero interessarti

1. Paginazione di categorie personalizzate in WordPress
2. Email di spam in WordPress? Prevenire si può.
3. WordPress Loop Snippets – Partire col piede giusto

Se però abbiamo l’esigenza di avere il video in pagina “nascosto”, siamo costretti a ricorrere ad altri metodi. Ed ecco che, navigando in giro per il web, scopriamo come sia possibile integrare il noto lettore Flowplayer al tanto amato Fancybox. Nel momento in cui scrivo questo articolo garantisco sulla compatibilità totale dei 2 script (in particolare Flowplayer funziona sia con la versione 1.3 che con la versione 2.0+ di Fancybox). L’unico accorgimento da prendere nel caso si utilizzino versioni di Fancybox differenti, è quello di controllare le funzioni di callback che vengono messe a disposizione.

Procuriamoci gli script

Per prima cosa, inevitabilmente, scarichiamo Fancybox e Fancyplayer ai link seguenti:
Fancybox: http://fancyapps.com/fancybox/
Fancyplayer (free): http://flowplayer.org/download/index.html

Dopodichè prepariamo la nostra cartella in cui lavoreremo utilizzando la struttura seguente:

Prepariamo il codice html da utilizzare

Prima di tutto includiamo il css di Fancybox (oltre ad un nostro eventuale foglio stile), jQuery ed i file .js che ci servono:

<link href="fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css">
</link><link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="flowplayer/flowplayer-3.2.6.min.js"></script>
</link>

Fatto questo prepariamo la semplicissima struttura html:

<div id="player" data-url="http://www.gleenk.com/demo/jquery/fancybox-flowplayer/Talbot%20Bay%20-%20Australia%20-%20BBC.flv"></div>
<a id="play-video" href="#player">Play video</a>

Come vediamo sarà fondamentale avere un attributo in cui inserire l’url dove si trova il video: per farlo ci siamo avvalsi della proprieta HTML5 data-nome, dove nome è qualsiasi cosa si voglia. Utilizzando jQuery non avremo alcuna difficoltà ad andare a “pescare” questo valore. Vi anticipo fin da subito che non avrete problemi di compatibilità cross-browser.
Inoltre impostiamo l’href del link con il medesimo nome dell’ID del contenitore del video.

jQuery in azione

A questo punto non ci resta che scrivere il codice che realizzerà la magia:

var url = $("#player").attr("data-url");
	$("a#play-video").fancybox({
		 'scrolling': false,
		 'titleShow': false,
		 'padding'  : 0,
		 'beforeLoad'  : function() {
			 $("#player").show();
			 $f("player", "flowplayer/flowplayer-3.2.7.swf", url);
		 },
		 'afterClose'  : function() {
			 $("#player").hide();
			 $f().unload();
		 }
	});

E’ bene sottolineare brevemente alcuni punti. Nel caso che vedete sopra abbiamo utilizzato una variabile url per memorizzare il percorso del video. In questo modo, se avessimo in pagina diversi video, utilizzando opportunamente “this” in jQuery potremmo prelevare il video che ci interessa. La variabile url verrebbe infatti cambiata ad ogni click. (Per farlo ricordiamoci di utilizzare delle classi e non ID come nell’esempio).
Infine è bene precisare che scrolling, titleShow, padding sono proprietà di Fancybox che servono per nascondere spazi, scritte e scrollbar. beforeLoad e afterClose sono invece le 2 callback di cui parlavamo all’inizio. Sono due funzioni che agiscono prima del caricamento del video e dopo. Saranno queste quelle per cui accertarsi che la sintassi non sia cambiata nel corso di future versioni!

Compatibilità con i browser

Il seguente sistema è stato testato e ne è stata accertata la funzionalità sui seguenti browser:
• Mozilla Firefox (qualsiasi versione moderna)
• Chrome (qualsiasi versione moderna)
• Opera (qualsiasi versione moderna)
• Internet Explorer 7+

Altri articoli che potrebbero interessarti

1. HTML5 tag video
2. Usare ‘$’ invece di ‘jQuery’ in WordPress
3. Stilizzare campi input file con jQuery

Nel DOM solo Ul e Li

La struttura HTML di cui ci serviamo presenta semplicemente un lista disordinato in cui, ad ogni li andiamo ad assegnare un ID unico affinchè possiamo interagire con la proprietà CSS3 di rotazione in modo diversificato:

<div id="container">
	<ul id="carte" class="clearfix">
		<li id="carta-1">
			<h2>Carta 1</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ante et lectus convallis consectetur. Maecenas quis turpis tellus, sit amet aliquam urna. Sed nec suscipit metus. Pellentesque dignissim commodo lectus, id vulputate neque hendrerit vel. Nulla dictum bibendum eros id accumsan. Aenean ut purus nulla. Integer faucibus volutpat odio sit amet ornare. Nunc orci metus, euismod nec vehicula sed, aliquam sed turpis. Vivamus eget ultrices neque. Sed viverra egestas tristique. Fusce tincidunt vulputate urna et commodo. Curabitur feugiat semper eros quis rhoncus. Duis orci mauris, pretium sed accumsan id, ornare non ligula. </p>
		</li>
		<li id="carta-2">
			<h2>Carta 2</h2>
			<p>Quisque rutrum lacus et nunc porta in congue nunc sagittis. Phasellus et mauris at elit condimentum bibendum. In nisi magna, imperdiet rhoncus egestas non, aliquam id justo. Sed vel elit est, id dictum ipsum. Integer ultricies sagittis lorem non semper. Maecenas sit amet imperdiet odio. Vestibulum tempus, metus a aliquam tincidunt, justo arcu elementum nunc, eget commodo ante sapien ac odio. Morbi cursus, nisl ac rhoncus sollicitudin, erat velit placerat elit, nec commodo lorem dolor sed elit. Praesent rutrum, est ut blandit pulvinar, tortor elit eleifend nulla, vel vulputate libero felis eget ligula.</p>
		</li>
		<li id="carta-3">
			<h2>Carta 3</h2>
			<p>Morbi eu massa sit amet turpis dignissim porta. Phasellus eget justo quis augue fermentum consectetur. Cras ac nunc quis nunc bibendum rhoncus. Ut aliquam, risus id pharetra sagittis, neque tellus aliquam risus, nec condimentum nunc neque a urna. Nam ut magna vel est suscipit cursus. Cras a rutrum nibh. Suspendisse id nisl magna, eu tincidunt nulla. Nullam adipiscing, sem et euismod iaculis, felis orci mollis risus, nec viverra turpis velit ut elit. Vestibulum a eros vel nunc ullamcorper mattis.</p>
		</li>
	</ul>
</div>

CSS3, rotazioni ed animazioni

Di per sè il codice che utilizziamo non è complesso, è semplicemente un po’ lungo da scrivere, soprattutto a causa dei numerosi prefissi che siamo costretti ad usare per cercare di ampliare un minimo il bacino di utenti che potranno osservare il nostro capolavoro ! Vi riporto il codice CSS per intero, poi analizziamo i punti più interessanti. Se volete fare a meno dei prefissi potete avventurarvi nella sperimentazione di prefixfree, uno script che farà il lavoro sporco per noi!

#container {
	width:760px;
	margin:0 auto;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	padding-top:50px;
}
#carte {
	margin:0;
	padding:0;
	}
#carte li {
	background:#333;
	margin:0;
	color:#fff;
	height:450px;
	width:200px;
	font-size:12px;
	display:block;
	float:left;
	border:1px solid #666;
	padding:10px;
	position:relative;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-box-shadow: 2px 2px 10px #000;
	box-shadow: 2px 2px 10px #000;
	-webkit-box-shadow: 2px 2px 10px #000;
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	-moz-text-shadow:1px 1px 1px #000;
	-webkit-text-shadow:1px 1px 1px #000;
	text-shadow:1px 1px 1px #000;
}
#carta-1 {
	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	transform: rotate(-20deg);
	z-index:1;
	left:150px;
	top:40px;
}
 
#carta-2 {
	z-index:2;
	left:70px;
	top:10px;
}
 
#carta-3 {
	-webkit-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	-ms-transform: rotate(-20deg);
	transform: rotate(20deg);
    top: 50px;
	right:10px;
    z-index:3;
}
#carte li:hover {
	z-index:4;
	background:#f90;
	color:#333;
	-moz-text-shadow:1px 1px 0px #fff;
	-webkit-text-shadow:1px 1px 0px #fff;
	text-shadow:1px 1px 0px #fff;
}
 
#carta-1:hover {
	-moz-transform: scale(1.1) rotate(-18deg);
	-webkit-transform: scale(1.1) rotate(-18deg);
	-ms-transform: scale(1.1) rotate(-18deg); 
	transform: scale(1.1) rotate(-18deg);
}
 
#carta-2:hover {
	-moz-transform: scale(1.1) rotate(-2deg);
	-webkit-transform: scale(1.1) rotate(-2deg);
	-ms-transform: scale(1.1) rotate(-2deg); 
	transform: scale(1.1) rotate(-2deg); 
}
 
#carta-3:hover {
	-moz-transform: scale(1.1) rotate(18deg);
	-webkit-transform: scale(1.1) rotate(18deg); 
	-ms-transform: scale(1.1) rotate(-18deg); 
	transform: scale(1.1) rotate(18deg);
}

Tralasciamo box-shadow, bordi e smancierie puramente estetiche. Quello che fondamentalmente ci interessa sono le proprietà transition e transform.
In particolare utilizzando transition: all 0.5s ease-in-out diciamo al browser che, nel momento in cui inizia la nostra azione, deve avvenire una transizione di tutte le proprietà (all) da uno stato all’altro (solitamente hover) in 0.5 secondi utilizzando una determinata curva (ease-in-out).

Con la proprietà transform: scale(1.1) rotate(18deg); invece definiamo una trasformazione dell’oggetto rispetto alla posizione originale. In particolare ne alteriamo le dimensioni (scale) e lo ruotiamo di tot gradi (rotate).
La combinazione delle due proprietà permette il passaggio graduale come mostrato nell’esempio. Relativamente semplice no?

Altri articoli che potrebbero interessarti

1. CSS3 per Internet Explorer 6-7-8+
2. Lo pseudo selettore :target | CSS3
3. Border Radius CSS3 – Come arrotondare i bordi

Liste non ordinate intelligenti

Tutti gli sviluppatori conoscono bene le liste non ordinate in quanto permettono di raggruppare logicamente un insieme di elementi creando di fatto un contenuto semantico molto apprezzato anche dai motori di ricerca.

jQuery come noto ci permette di lavorare agevolmente anche con questo tipo di strutture dati arricchendole di eventi o modificandone il layout.

Liste + jQuery: una possibile modalità di utilizzo

Tutto normale fin qui ma la cosa intelligente sta nel fatto che tutte le informazioni utili alla visualizzazione dei singoli item sono cablate direttamente negli attributi della lista! Per chiarire meglio questo aspetto analizziamo passo passo il relativo codice sorgente partendo proprio dalla lista di elementi.

<input id="p_current_page" type=hidden>
<input id="p_show_per_page" type=hidden>
<input id="p_total_pages type=hidden">

<ul id="topnumbers">
<li id="pt"><h3 id="t-numbers">Numeri da 1 a 10</h3></li>
<li class="number"><a name="uno.jpg" class="number_li" href="#">uno</a></li>
<li class="number"><a name="due.jpg" class="number_li" href="#">due</a></li>
<li class="number"><a name="tre.jpg" class="number_li" href="#">tre</a></li>
<li class="number"><a name="quattro.jpg" class="number_li" href="#">quattro</a></li>
<li class="number"><a name="cinque.jpg" class="number_li" href="#">cinque</a></li>
<li class="number"><a name="sei.jpg" class="number_li" href="#">sei</a></li>
<li class="number"><a name="sette.jpg" class="number_li" href="#">sette</a></li>
<li class="number"><a name="otto.jpg" class="number_li" href="#">otto</a></li>
<li class="number"><a name="nove.jpg" class="number_li" href="#">nove</a></li>
<li class="number"><a name="dieci.jpg" class="number_li" href="#">dieci</a></li>
<li id="pn"><a onclick="next();return false;" href="#">Next</a></li>
</ul>

I primi tre campi nascosti servono rispettivamente per memorizzare il numero di pagina corrente del paginatore, il numero di righe del paginatore ed il numero totale di pagine da cui è costituito

Come anticipato, nell’attributo “name” dei link contenuti nei singoli singoli item della lista è stato inserito il nome del file che verrà utilizzato da jQuery per visualizzare accanto al testo cliccabile una immagine personalizzata. Questo stratagemma risulta particolarmente utile in quanto ci permette di risparmiare costose connessioni http che avremmo dovuto realizzare qualora si volesse recuperare le medesime informazioni in modo dinamico

Riguardo la parte CSS non c’è molto da segnalare eccezion fatta per la diversa formattazione imposta al primo e all’ultimo elemento della lista in quanto rispettivamente header e footer della stessa.

Passiamo quindi all’analisi del codice jQuery

La prima cosa che viene fatta al caricamento della pagina consiste nell’inizializzare i tre campi nascosti per poi richiamare la funzione go_to_page_numbers con paramentro 0 ad indicare che ci si posizionerà nella pagina iniziale del paginatore

$(document).ready(
function(){
var show_per_page=4;
var number_of_items=$('#topnumbers').children().children('.number_li').size();
$('#p_current_page').val(0);
$('#p_show_per_page').val(show_per_page);
$('#p_total_pages').val(Math.ceil(number_of_items/show_per_page));
go_to_page_numbers(0);
}
);

La funzione che segue viene richiamata dal link di paginazione e non fa altro che calcolare il numero di pagina a cui si vuole accedere a partire da quella corrente memorizzata nel campo nascosto #p_current_page per poi passarlo alla funzione go_to_page_numbers

function next(){
new_page=(parseInt($('#p_current_page').val())+1) < parseInt($('#p_total_pages').val()) ? parseInt($('#p_current_page').val())+1:0;
go_to_page_numbers(new_page);
}

Vediamo dunque come funziona il cuore del paginatore ossia la funzione go_to_page_numbers

function go_to_page_numbers(page_num){
if (page_num==0) {
var show_per_page=parseInt($('#p_show_per_page').val())+1;
}else{
var show_per_page=parseInt($('#p_show_per_page').val());
}
if (page_num==0) {
var start_from=page_num * show_per_page;
}else{
var start_from=page_num * show_per_page+1;
}
var end_on=start_from + show_per_page;
$('#topnumbers').children("li").css('display', 'none').slice(start_from, end_on).css('display', 'block');
$('#pt,#pn').css('display', 'block');
$('#topnumbers').children().children('.number_li').slice(0, 4).each(function (i) {
var n=this.innerHTML;
$(this).replaceWith('<table cellpadding=0 cellspacing=0><tr><td><img class=b width=45 height=45 alt="' + n + '" title="' + n + '" style=vertical-align:middle src=' + this.name.replace(/-/g,'/') + '></td><td>' + '<a class="number_li" href="#">' + n + '</a>' + '</span>' + '</td></tr></table>');
}
);
$('#p_current_page').val(page_num);
}

I primi due blocchi if else servono per impostare correttamente il numero di righe da visualizzare in virtù del fatto che scorrendo le varie pagine potrebbe cambiare il numero di elementi

Grazie ai metodi children e slice vengono modificati tutti gli elementi della lista aggiungendovi l’istruzione css display:none che li rende tutti invisibili. (ad eccezione del primo e dell’ultimo)

Subito dopo utilizzando i metodi children, slice ed each prima e replaceWith nell’istruzione successiva, vengono individuati, selezionati e quindi modificati tutti e soli quegli elementi della lista la cui posizione è compresa tra i valori start_from ed end_on in modo tale che al posto dell’item nascosto <li> venga visualizzata una tabella di due colonne che andrà a comporre la struttura desiderata di ogni singola riga del paginatore.

Altri articoli che potrebbero interessarti

1. Rotazione automatica immagini con jQuery

Il nostro script in poche righe

$(document).ready(function(){
    totaleImmagini=5;
    randomNumber = Math.round(Math.random()*(totaleImmagini-1))+1;
    imgPath=('/my/image/path/'+randomNumber+'.jpg'); //il percorso può essere relativo o assoluto
    $('#container').css('background-image', ('url("'+imgPath+'")')); 
});

Spiego a parole quello che fa lo script. In primo luogo dichiariamo il numero di immagini che abbiamo a disposizione da far ruotare. Nel nostro caso saranno 5. Successivamente, utilizzando le funzione Math.round (arrotonda al numero intero più vicino) e Math.random (genera un numero casuale tra 0 e 1), estraiamo un numero casuale compreso tra 1 e 5. Dichiariamo quindi il percorso in cui si trovano le nostre immagini ed impostiamo, ad esempio, lo sfondo del nostro contenitore con l’immagine scelta. Ne va da sè che ad ogni aggiornamento della pagina la foto cambierà.

Attenzione alla nomenclatura

Nell’esempio appena visto, affinchè lo script funzioni, è necessario che le nostre immagini siano numerate da 1 a 5. Nel caso avessimo la necessità di dare dei nomi più sensati alle foto, dovranno comunque mantenere una struttura nel nome simile. Ad esempio, se stiamo utilizzando delle foto di cascate, potremo scrivere cascate-niagara-01.jpg ecc… andando quindi a cambiare il percorso (path) dell’immagine in: imgPath=('/my/image/path/cascate-niagara-0'+randomNumber+'.jpg');

Altri articoli che potrebbero interessarti

1. Estrazione di numeri casuali compresi tra due valori in jQuery/Javascript
2. jQuery cookie per ambiare foglio stile!
3. Rotazione automatica immagini con jQuery

jQuery easing:il plugin

E’ nato prima l’uovo o la gallina? In questo caso non saprei rispondere, nel senso che non mi è dato di sapere se sia nato prima questo plugin e poi la nota libreria jQuery UI, o se sia stata la seconda ad inglobare il plugin originale. Fatto sta che possiamo avere a disposizione questa serie di effetti senza per forza portarci dietro tutto il pacchetto UI. Quindi in primis procuriamoci il plugin che ci servirà dal sito ufficiale.

A questo punto, includiamo jQuery nella nostra pagina Html ed andiamo a scrivere il nostro amato codice…

Premessa doverosa: gli effetti di easing si possono applicare solo alla funzione animate()! Quindi ogni tentativo di utilizzo differente non funzionerà! Per intenderci, non possiamo applicarli alle funzioni show() o hide().

Html e css

Poco da dire a riguardo, l’unica accortezza è quella, affinchè l’esempio funzioni, di impostare una position:relative o absolute al contenitore da spostare, altrimenti la proprietà left non funziona!

<div id="container">
	<div class="esempio-easing" id="easBounce">Effetto di rimbalzo</div>
	<div class="esempio-easing" id="easElastic">Effetto elastico</div>
	<div class="esempio-easing" id="easOutBack">Effetto frenata e rimbalzo</div>
</div>

.esempio-easing {
	cursor:pointer;
	position:relative;
	background:#FC0;
	padding:5px;
	width:100px;
	text-align:center;
	}

Animare con gli effetti: jQuery

Tolte le premesse veniamo al succo della questione. In realtà quello che dovremo fare è molto semplice, ci basterà scrivere la funzione animate correttamente, per questo vi rimando alla documentazione ufficiale, e sostituire l’effetto di easing di default con quelli di nostro interesse. In particolare nell’esempio sottostante vediamo 3 tipi di animazioni:

• Effetto di rimbalzo
• Effetto elastico
• Effetto frenata e rimbalzo

$(document).ready(function() {
	//EFFETTO DI RIMBALZO
	$('#easBounce').click(function() {
		$(".complete").remove();
		$(this).animate({
			left: 500
		  }, 500, 'easeOutBounce', function() {
			  $(this).animate({
				left: 0
			  }, 500, 'easeOutBounce', function() {
				  $(this).after('<div class="complete">Animazione completata.</div>');
			  });
		  });
	});
	//EFFETTO ELASTICO
	$('#easElastic').click(function() {
		$(".complete").remove();
		$(this).animate({
			left: 500
		  }, 500, 'easeOutElastic', function() {
			  $(this).animate({
				left: 0
			  }, 500, 'easeOutElastic', function() {
				  $(this).after('<div class="complete">Animazione completata.</div>');
			  });
		  });
	});
	//EFFETTO FRENATA E RIMBAZO
	$('#easOutBack').click(function() {
		$(".complete").remove();
		$(this).animate({
			left: 500
		  }, 500, 'easeOutBack', function() {
			  $(this).animate({
				left: 0
			  }, 500, 'easeOutBack', function() {
				  $(this).after('<div class="complete">Animazione completata.</div>');
			  });
		  });
	});
});

In questo modo sfruttiamo la funzione animate a “cascata” ed eseguiamo in callback l’azione di ritorno al punto di origine annidandola dentro alla funzione animate principale. Per chi fosse interessato è possibile realizzare effetti a catena utilizzando invece i deferred object di jQuery. A tal proposito vi linko un interessante articolo di Gabriele Romanato. Buona lettura e buona sperimentazione!

Altri articoli che potrebbero interessarti

1. Effetto Easing su menù con jQuery UI
2. Votazione con jQuery animate
3. Ruotare e scalare oggetti con jQuery 2D transform

L’idea di base è molto semplice, prendiamo il primo elemento di una lista, lo facciamo sparire e, in callback, lo riaggiungiamo alla fine della lista.

Il codice HTML da utilizzare

<ul id="ticker" class="ticker">
	<li><a href="#">Lorem ipsum dolor sit amet</a>, luctus et ultrices consectetur adipiscing elit. Praesent condimentum sagittis risus ac viverra. Integer vestibulum volutpat...</li>
	<li>Faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam at ligula purus. Fusce ligula massa, commodo eu aliquam non, pharetra ut nisl.... </li>
        <li>Proin mollis eros quis massa dictum sodales. Suspendisse elementum, dui sed tincidunt ultricies, dolor ipsum dictum felis, id consequat ligula risus...</li>
	<li><a href="#">Sed</a> liquam eget blandit elit. Aenean luctus et ultrices arcu augue, fringilla a eleifend in, bibendum sed augue. Aliquam consectetur arcu at arcu...</li>
</ul>

Come possiamo vedere non c’è nulla di strano, solo un semplice elenco puntato dal quale andremo a nascondere il primo elemento…

Il CSS e due regole, il resto è creatività!

Affinchè lo nostro script funzioni correttamente sarà bene prendere alcune accortezze. Il mio consiglio spassionato è quello di impostare un’altezza fissa agli elementi di lista ed al contenitore, all’<ul> quindi, per evitare che l’altezza del blocco in cui è inserito il nostro widget vari continuamente creando uno sgradevole effetto visivo. Nel mio caso, tralasciando la non-creatività , mi sono limitato ad impostare quanto appena esposto:

#ticker {
	overflow: hidden;
	font-size:13px;
	margin:0;
	padding:0;
	height:243px;
	}
#ticker li {
	list-style:none;
	padding:0;
	margin:0;
	height: 60px;
	background:#333;
	color:#fff;
	padding:10px;
	border-bottom:1px solid #CCC;
}
#ticker li a {
	color:#F90;
	}

La dichiarazione overflow:hidden viene messa solo a scopo precauzionale nel caso in cui ci si dimenticasse si troncare il testo alla lunghezza desiderata. In questo modo non straborderà fuori dal contenitore ma verrà nascosto.

Azioniamo il tutto con jQuery

Bastano infine 4 righe per far partire l’animazione desiderata… vediamo che cosa scrivere:

function ticker(){
		$('#ticker li:first').slideUp(
		function () { $(this).appendTo($('#ticker')).slideDown(); });
	}
setInterval(function(){ ticker () }, 3000);

La funzione ticker() viene lanciata grazie al setInterval() che ci dice di ripetere le azioni ogni 3000 ms (3 secondi). Lo script dice invece semplicemente di effettuare lo slideUp() del primo elemento della lista, di appenderlo in coda a #ticker e quindi di fare lo slideDown().
Ed il trucco è presto svelato

Altri articoli che potrebbero interessarti

1. Liste sequenziali ed elementi consecutivi con jQuery
2. Realizzare un accordion jQuery in 5 righe di codice!
3. jQuery News Slider – gleenk spotSlider v1.0

Qualità prima di tutto

Le immagini che utilizzi dovranno rispettare gli standard di qualità. Parametri come la risoluzione, il contrasto saranno fondamentali perchè catturino l’attenzione fin dalle piccole thumbs che si vedranno nei risultati di ricerca. E’ un dato di fatto che gli utenti siano maggiormente attratti da immagini dettagliate, questo è il buon motivo per prestarci attenzione. Il peso tuttavia non è secondario alla qualità, assicurati quindi, se utilizzi ad esempio Photohop, di salvare sempre l’immagine per il web cercando il miglior compromesso possibile tra qualità e peso.

Utilizza il formato corretto

E’ sempre meglio ricordare che le immagini vanno salvate in .jpeg laddove possibile mentre il .png è consigliato per loghi, bottoni e laddove si riveli indispensabile l’utilizzo del canale alfa per le trasparenze. Sebbene non siano regole “ferree”, nel processo di ottimizzazione è bene seguire dei canoni possibilmente precisi.

I nomi dei files sono importanti. Questo è un fattore che viene spesso trascurato per lasciare spazio ai poco utili “DSC8457.jpg” o “01.jpg”. Assicurati invce sempre che il nome sia rilevante e coincida esattamente con ciò che si vede. Inoltre non usare gli spazi, ma fai uso dei trattini (-) per separare le parole. Quando ottimizzi immagini per il web infine verifica sempre che il file robots.txt non blocchi l’accesso alla cartella dove tieni salvati i files!

Aggiornamento e fattori tecnici: l’attributo ALT

Se le tue immagini sono il target ottimale per parole chiave molto popolari, potrebbe essere una buona pratica quella di ri-caricarle di tanto in tanto. Mantenerle aggiornate potrebbe risultare un fattore importante per il loro posizionamento.

L’attributo ALT in HTML è utilizzato per specificare un testo alternativo da mostrare quando l’immagine non può essere renderizzata. Devi fare in modo che questo tag sia sempre presente e descriva fedelmente ciò che si vede nell’immagine, possibilmente contenente le parole chiave presenti anche nel nome del files. E’ ciò che infatti consente al motore di interpretare l’immagine, così come ad un lettore vocale.

Tutto questo però potrebbe non bastare da solo, infatti è fondamentale che il testo che circonda le immagini sia coerente con quanto rappresentato e contestualizzi l’illustrazione con il contenuto della pagina.

Limita il numero e il peso delle immagini

Dato che le immagini sono ciò che fa aumentare maggiormente il peso delle tue pagine web è bene che esse occupino sempre il minor spazio possibile. Quando possibile cerca di stare dentro i 30Kb per immagine ed utilizza gli sprites CSS per tutte quelle simil-immagini (loghi, pulsanti, bottoni di share…) per ridurre le chiamate al server.

Per farlo utilizza alcune risorse gratuite online per ottimizzare le immagini comprimendole o creando gli sprites:

• Smushit
• PunyPNG
• Css Sprites Generator

Tratto e rivisto da: “How to Optimize Images for Search Engines”

Altri articoli che potrebbero interessarti

1. 5 Consigli importanti per il SEO
2. Consigli per scrivere un copy User e SEO Friendly
3. Set di dimensioni di immagini diverse per i nostri articoli WordPress

Ecco, quello che vedi nella foto è ciò che accade esattamente quando si cerca di dare una dimensione fissa ad una select. Purtroppo quelli che, a mio avviso, non possono più considerarsi “browser” come li pensiamo noi, tagliano brutalmente i contenuti delle tendine senza alcuna pietà.

Se per IE6 l’unica strada percorribile è quella di utilizzare script che “trasformano” la select in un div (ma vi assicuro che potreste uscirne davvero pazzi), per IE7 è stato realizzato uno script da Craig Hoover (reso pubblico su css-tricks.com)che, inserito rigorosamente prima della chiusura del <body>, e come ultimo script, permette di ottenere anche su IE7 lo stesso tipo di renderizzazione grafica che si ha per le opzioni delle select nei browser moderni.

(da visualizzare con Internet Explorer 7)

jQuery per risolvere…

Vi riporto quindi, così come è stato pubblicato, il codice da incollare affinchè questo odioso problema si risolva.

// Safely use $
(function($) {
 
        $.fn._ie_select=function() { 
 
                return $(this).each(function() { 
 
                        var a = $(this),
                            p = a.parent();
 
                        p.css('position','relative');
 
                        var o = a.position(),
                            h = a.outerHeight(),
                            l = o.left,
                            t = o.top;
 
                        var c = a.clone(true);
 
                        $.data(c,'element',a);
 
                        c.css({
                                zIndex   : 100,
                                height   : h,
                                top      : t,
                                left     : l,
                                position : 'absolute',
                                width    : 'auto',
                                opacity  : 0
                        }).attr({
                                id    : this.id + '-clone',
                                name  : this.name + '-clone'
                        }).change(function() {
                                $.data(c,'element')
                                        .val($(this).val())
                                        .trigger('change')
                        });
 
                        a.before(c).click(function() {
                                c.trigger('click');
                        });
 
                }); // END RETURN
 
        }; // END PLUGIN
 
        // Usage
        if ($.browser.msie) {
                $('select')._ie_select();
        }
 
})(jQuery); // END SAFETY

Da notare come in chiusura di script venga effettuata la verifica del browser affinchè lo script venga eseguito solo sui browser microsoft.
Se invece si volesse eseguire lo script unicamente se viene riconosciuta la versione 7 di Explorer, è possibile sostituire con:

var isIE7 = $.browser.msie && parseFloat($.browser.version) == 7;
if (isIE7) {
    $('select')._ie_select();
}

E tu che tecnica utilizzi di solito?

Immagini e fonte dello script: css-tricks.com

Altri articoli che potrebbero interessarti

1. 5 semplici trucchi per risolvere grandi problemi SEO
2. Didascalie per immagini con jQuery hover e animate
3. Simulare una fonte di luce dinamica in JavaScript

Il loop semplice “condensato”

Questa è la versione immediata e funzionale del Loop. Nessun fronzolo o personalizzazione.Verrà infatti mostrato solo il contenuto!

< ?php if (have_posts()) : ?>
	< ?php while (have_posts()) : the_post(); ?>
		< ?php the_content('Leggi tutto »'); ?>
	< ?php endwhile; ?>
	< ?php else : ?>
	//Qui può essere messo ciò che si vuole che appaia nel caso in cui non si trovino post
< ?php endif; ?>

Il loop completo, pronto per la pagina di un blog

Questo esempio è un po’ più complesso. Include molti tag di “core” di WordPress che solitamente vengono usati per realizzare un blog d’informazione. Ma è solamente un incipit, sicuramente non esaustivo:

< ?php if (have_posts()) : ?>
	< ?php while (have_posts()) : the_post(); ?>
	<div class="post" id="post-<!--?php the_ID(); ?-->">
		<h2><a href="<!--?php the_permalink() ?-->" rel="bookmark" title="Link a < ?php the_title(); ?>">< ?php the_title(); ?></a></h2>
		<small>< ?php the_time('F jS, Y') ?> <!-- by <!--?php the_author() ?--> --></small>
 
		<div class="entry">
			< ?php the_content('Leggi tutto »'); ?>
		</div>
 
		<p class="postmetadata">Scritto in <!--?php the_category(', ') ?--> <strong>|</strong>
			< ?php edit_post_link('Edit','','<strong>|'); ?>
			< ?php comments_popup_link('Nessun commento »', '1 Commento »', '% Commenti
		»'); ?>
		</p>
	</div>
	< ?php endwhile; ?>
	<div class="navigation">
		<div class="alignleft">< ?php next_posts_link('« Articoli precedenti') ?></div>
		<div class="alignright">< ?php previous_posts_link('Articoli recenti »') ?></div>
	</div>
< ?php else : ?>
	<h2 class="center">Non trovato</h2>
	<p class="center">Spiacenti, ma stai cercando qualcosa che non si trova qui.</p>
	< ?php include (TEMPLATEPATH . "/searchform.php"); ?>
< ?php endif; ?>

Una piccola nota… La parte finale in cui si include il file searchform.php senza utilizzare direttamente la funzione get_search_form() permette di gestire form multiple nella stessa pagina! Dimenticavo… Se avete dubbi, chiedete

Liberamente tratto da “WordPress Cheat Sheet”

Altri articoli che potrebbero interessarti

1. Templates differenti per articoli diversi in WordPress
2. Paginazione di categorie personalizzate in WordPress
3. Trasferire WordPress 2.9 in un nuovo dominio