Ma vale la pena trascurare il linguaggio Javascript e iniziare direttamente l’apprendimento di jQuery?

La risposta secondo un mio punto di vista è no! Purtroppo c’è  l’esigenza di conoscere a fondo il linguaggio di base prima di scegliere una libreria di sviluppo. Il rischio è anche quello di abusare degli strumenti che abbiamo a disposizione e non saperci orientare senza un aiuto esterno.

“Si, ho capito, dovrei avere comunque un conoscenza di base, ma quali sono le differenze sostanziali tra il mio solido Javascript, e il giovane e snello jQuery?”

A chiarirci le idee ci ha pensato Jeffrey Way, l’editor di Nettus+, che ha proposto una tavola di conversione di tutte le funzionalità di Javascript “tradotte” in jQuery. Se approdi per la prima volta nello sviluppo di jQuery ti converrebbe darci un’occhiata!

Logo jQuery

La scorsa settimana è stata rilasciata la beta release di jQuery versione 1.7.

La maggioranza delle modifiche ha interessato tre settori particolari: gestione degli eventi, inclusione asincronia della libreria e supporto migliorato per HTML5, ma andiamoli a vedere ne dettaglio:

[ad code=4]

• Nuovi metodi on() e off(); questi nuovi metodi vanno a mettere un po’ di ordine nella stratificazione che nel tempo si è creata nei metodi a disposizione per la gestione degli eventi: bind/unbind, delegate/undelegate, live/die. Alla fine ci si è resi conto che si era venuta a creare un po’ di confusione. L’approccio adesso sarà quello di usare soltanto i due nuovi metodi, che si specializzeranno a seconda dei parametri che verranno loro passati. Se per esempio alla on() verrà passato un selettore, allora jQuery userà la logica dell’attuale metodo delegate, mentre se non verrà passato userà la semplice bind. È presumibile che tra qualche versione gli altri metodi vengano abbandonati;
• Supporto per Asynchronous Module Definitio sono state effettuate delle modifiche interne, tali per cui adesso jQuery può essere caricato in maniera sicura tramite i cosiddetti “loader” (come RequireJS). Il problema era che, vista la popolarità della libreria, può capitare per errore di caricarla due volte. Il nuovo sistema fa in modo di controllare che questo non avvenga;
• Miglior supporto HTML5; jQuery non permette di creare elementi HTML per i browser che non li supportano però con la 1.7 viene effettuato correttamente il parsing degli elementi HTML5 prima che questi siano passati al metodo innerHTML. Inoltre è stato migliorato il supporto nelle operazione di cloning dei nodi, che per l’HTML5 ha bisogno di particolare attenzioni cross browser.

Logicamente tenete in conto che non è ancora un stable version ma rimane comunque un update fondamentale per la libreria in questione.

Voi che ne pensate?

jPie consiste in un menu contestuale circolare, che ha lo scopo di dare una maggiore usabilità alle vostre applicazioni web. Infatti essendo completamente personalizzabile ed associabile a qualsiasi elemento del DOM può permettere una gestione più completa rispetto ai semplici menu fissi, sidebar o menu a scomparsa che si trovano in giro per il web.

[ad code=4 align=center]

Eccovi una breve sfilza di caratteristiche per farvi un idea sulle potenzialità di questo plugin:

• Grafica completamente personalizzabile (tramite un foglio di stile apposito)
• Gestione degli eventi del menu
• Possibilità di associare ad ogni elemento del DOM un proprio menù contestuale
• Icone e funzioni associate completamente peronalizzabili
• Completamente compatibile con: Internet Explorer 7+, Chrome 10+, Firefox 3.6+, Opera 10+

Ne volete sapere di più?

Allora vi reindirizzo al sito ufficiale dove potete trovare il download e la documentazione relativa:

jPie – Menu contestuale circolare in jQuery

[ad code=4 align=center]

Il bello di cdnjs consiste nel fatto che le librerie ospitate sono scelte direttamente dagli utenti che possono proporre anche delle “new entry”.

Il servizio, per consentire velocità e alta affidabilità, si appoggia a Amazon CloudFront (per servire le librerie) e a Route 53, il sistema DNS scalabile e ridondante di Amazon.

Cdnjs oltre ad essere un servizio gratuito è anche open source, tutte le librerie ospitate sono disponibili su Github, chiunque può quindi creare un proprio fork includendo le librerie desiderate.

Logo jQuery

La nuova versione 1.6 della libreria JavaScript è realtà. Con un annuncio sul blog ufficiale, Resig ha offerto un changelog dettagliato delle novità incluse in jQuery 1.6.

Da quel che si può vedere, gli sviluppatori hanno lavorato in particolare sull’ottimizzazione delle performance, interessanti ad esempio i risultati ottenuti per il metodo .data(). Novità anche per quanto riguarda le animazioni, ora sincronizzate e più fluide.

jQuery 1.6 è direttamente richiamabile dalle due CDN messe a disposizione dal progetto:

http://code.jquery.com/jquery-1.6.min.js

[ad code=4 align=center]

Ma entriamo adesso nel dettaglio delle novità introdotte nella nuova versione della libreria JavaScript. Da quello che si legge dall’annuncio ufficiale le novità principali riguardano una riscrittura completa del sottosistema per gestione degli attributi (metodo .attr() e alcuni metodi nuovi) e ovviamente tutto un nutrito elenco di bug fix e miglioramenti. L’annuncio ufficiale riporta il dettaglio di tutte le modifiche mentre invece potete leggere le modifiche avvenute alle API sulla pagina dedicata. Andiamo ad analizzare in dettaglio la modifica più interessante.

jQuery 1.6 introduce due nuovi metodi: prop() e removeProp(). Nel fare questo si è cercato di fare una distinzione semantica tra gli attributi del DOM e le proprietà del DOM (distinzione che prima della versione 1.6 era implicita e un po’ subdola).

La differenza fra questi “attibuti” e queste “proprietà” è che gli attributi sono quelli presenti nel tag di apertura dell’elemento, mentre le proprietà sono i valori dinamici del nodo DOM. Il caso più evidente in cui questa distinzione viene fuori è quella degli elementi DOM che possono avere l’attributo e la proprietà “checked”. Se si crea un elemento INPUT con l’attributo CHECKED allora l’attributo checked varrà “checked” (una stringa), mentre la sua proprietà varrà “true” (boolean).

Nelle versioni precedenti di jQuery, .attr(’checked’) in tal caso avrebbe restituito il valore boolean mentre adesso restituisce il valore stringa. Altro esempio: se impostate l’attributo “value” in un INPUT ad un certo valore e poi l’utente lo modifica, .attr(’value’) varrà sempre il valore originario mentre .prop(’value’) riporterà il valore corrente. Le informazioni su questo importante cambiamento sono un po’ sparse tra l’annuncio ufficiale e la documentazione di prop() e vi consiglio di leggerle entrambe.

Risulta quindi evidente, anche se credo sia oppurtuno dirlo esplicitamente, che la 1.6 NON è affatto retrocompatibile.

Se la risposta e si, logicamente saprete che per permettere l’uploading abbiamo bisogno necessariamente di una trasmissione sincrona del form e quindi siamo impossibilitati ad utilizzare tecniche Ajax.

Uploadify è un plugin jQuery che ci permetterà di effettuare l’upload singolo, o un multi upload di più file, simulando l’utilizzo di Ajax, cioè in modo asincrono e senza ricaricare nessuna pagina!

L’implementazione è semplicissima, eccovene un esempio

[ad code=4 align=center]

<link href="/uploadify/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/uploadify/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/uploadify/swfobject.js"></script>
<script type="text/javascript" src="/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#file_upload').uploadify({
      'uploader'  : '/uploadify/uploadify.swf',
      'script'    : '/uploadify/uploadify.php',
      'cancelImg' : '/uploadify/cancel.png',
      'folder'    : '/uploads',
      'auto'      : true
    });
  });
</script>

Il plugin sfrutta anche la potenza di flash, per poter funzionare.
Nella documentazione ufficiale troverete tutti i metodi e gli attributi che possono essere utilizzati, logicamentela parte lato server la parte lato server rimane una semplice pagina PHP

Per il download del plugin e la relativa documentazione vi rimando al sito ufficiale: Download Uploadify

Oggi vi mostro TubePlayer, un plugin jQuery che ci permetterà di gestire al meglio un video sfruttando appunto le API di Youtube, rendendo cosi l’inclusione nelle nostre pagina molto piu flessibile e funzionale.

TubePlayer oltre al caricamento del video sulla propria pagina permette la gestione di vari elementi del video come il play, stop, mute ecc.

[ad code=4 lign=center]

Inizializzare un player è semplicissimo:

jQuery("#youtube-player-container").tubeplayer({
	width: 600, // Larghezza
	height: 450, // Altezza
	allowFullScreen: "true", // Fullscreen(si,no)
	initialVideo: "DkoeNLuMbcI", // id del video caricato
	playerID: "youtube-player", // ID del youtube player embedded
	preferredQuality: "default",// Qualità del video: default, small, medium, large, hd720
	onPlay: function(id){}, // funzione eseguita dopo il metodo play
	onPause: function(){}, // funzione eseguita dopo il metodo pause
	onStop: function(){}, // funzione eseguita dopo il metodo stopped
	onSeek: function(time){}, // funzione eseguita dopo che il video salta ad un determinato punto
	onMute: function(){}, // funzione eseguita dopo il mute
	onUnMute: function(){} // funzione eseguita dopo la riattivazione dell'audio
});

HTML:

<a href="#" onClick='jQuery("#id-contenitore").tubeplayer("play")'>
	Play video
</a>
<a href="#" onClick='jQuery("#id-contenitore").tubeplayer("pause")'>
	Pause player
</a>
<a href="#" onClick='jQuery("#id-contenitore").tubeplayer("stop")'>
	Stop player
</a>
<a href="#" onClick='jQuery("#id-contenitore").tubeplayer("mute")'>
	Mute player
</a>
<a href="#" onClick='jQuery("#id-contenitore").tubeplayer("unmute")'>
	Unmute player
</a>

Per il download del plugin vi rindirizzo al sito ufficiale: Tube Player

Riccardo Tartaglia