In questo post di dicembre 2008 Dave Ward ci ricorda tre buoni motivi per richimare jQuery dai server di Google, anzichè dal nostro server.
Ci sono almeno tre valide ragioni per farlo.

Innanzitutto sfruttare il Content Delivery Network di Google. Il CDN è un network di computer “che collaborano in maniera trasparente per distribuire contenuti [...] agli utenti finali al fine di ottimizzarne il processo di consegna” [wikipedia]. Tra i vantaggi di questa tecnolgia anche la possibiltà che il contenuto venga servito dal nodo del network che può soddisfare la richiesta nel minor tempo possibile.

In secondo luogo  si riducono le connessioni simultanee al server (maggiori info su questo punto potete trovarle qui) .

Terzo vantaggio, probabilmente il più importante, se l’utente ha già navigato su siti internet che includevano jQuery dai server Google, la libreria è già memorizzata nella cache del browser e non deve essere nuovamente scaricata.

Si può utilizzare il tag <script>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

oppure utilizzando le API di Google e il mettodo google.load

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

    // Load jQuery
    google.load("jquery", "1.2.6");

    google.setOnLoadCallback(function() {
        // Your code goes here.
    });
       
</script>

Nello stesso modo possono essere richiamate tutte le principali librerie javascript; se vi interessa, la documentazione è qui.

Se utilizzate SWFobject per embeddare correttamente nella pagina web i filmati flash in formato SWF (trovate tutte le ragioni per farlo, e come farlo, in questo post su swfobject e file flash che ho scritto qualche mese fa), e al contempo utilizzate JQuery come libreria javascript, non potete rinunciare a jQuery SWFObject Plugin.

Una volta che framework e plugin sono stati richiamati nella pagina, è sufficiente una riga di codice per embeddare il filmato. Ecco un esempio:
(supponiamo di voler caricare il filmato “mymovie.swf” nel div “swfdiv”):

$(document).ready(function () {  
 $('#swfdiv').flash({swf: 'mymovie.swf'  });  });

Tra le features previste e documentate anche il supporto per le flashvars.

$(document).ready(function () { 

$('#swfdiv').flash({

 swf: 'mymovie.swf'  

 flashvars: {  name1: 'value1', 
 name2: 'value2',
 name3: 'value3'  }

});

});

Se siete su twitter ci sono tra gli altri  un paio di account che potete seguire (oltre il mio).
@mootols: l’account della ormai celebre libreria javascript rilancia snippet, plugin, tutorial e in generale spunti legati a mootools, appunto.

Ovviamente è da seguire anche l’omologo account, legato al framework messo a punto da John Resig (e che da queste parti si adora)  @jquery.

Se anche voi seguite qualche account twitter che raccoglie risorse per designer o sviluppatori, fatevi sotto nei commenti..

Abbiamo visto come gli angoli arrotondati, oltre ad abbellire i nostri div, abbiano anche una qualche utilità nel momento in cui servono ad indicare un div contenitore. jQuery Corners è un plugin per jquery (occupa meno di 8 KByte), che permette di impostare agevolmente angoli arrotondati per gli elementi della pagina, senza bisogno di creare immagini. Tra i vantaggi del plugin, come è facile intuire, il fatto che se javascript non è abilitato la pagina “degrada” correttamente. Il plugin sfrutta inoltre le proprietà per gli angoli arrotondati nei browser che già le prevedono, come Firefox e Safari. Ecco il link: jQuery Corners.

È on line la quarta variante sullo scroller di feed rss, realizzato con SimplePie e jQuery.
Il primo post della serie, che contiene tutte le informazioni necessarie per creare gli scroller lo trovate qui, mentre nella pagina della demo troverete tutti i link alle risorse necessarie, nonchè fogli di stile, hmtl, codice javascript e PHP. Ecco il link: Scroller n.4

Assolutamente da mettere alla prova questo plugin per jQuery che permette di modificare l’aspetto del campo SELECT di un form. Nell’immagine si vede un SELECT così come apparirebbe normalmente (in questo caso su firefox) e – a destra – un possibile “dopo la cura” fatta con jQuery e Linkselect.

Per intervenire sull’aspetto di radiobutton e checkbox si può usare invece Pretty Checkbox.
Ecco il risultato:

A parte gli innegabili vantaggi estetici, soluzioni come queste, che passano per javascript, consentono di controllare l’aspetto di questi elementi del form in modo che risultino identici su tutti i principali browsers, che come è noto li renderizzano in maniera totalmente differente.

Esistono diverse risosrse per creare tab più o meno sofisticate con jQuery: Tabs 3 per esempio, incluso nella jQuery U.I, e che dovrebbe riuscire a soddisfare tutte le vostre esigenze (parlo di tab s’intende), fino ad arrivare a qualcosa di più corposo come Coda slider, un plugin che tra le altre cose è in grado di generare delle tab. Se invece avete bisogno di una soluzione semplice e che vi costi solo qualche kbyte di javascript potete provare il plugin idTabs.

Qui c’è una live demo

Il funzionamento del plugin è abbastanza semplice: innanzitutto come al solito includiamo jQuery ed il plugin stesso nella pagina.

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.idTabs.min.js"></script>

A questo punto i link presenti all’interno dell’elemento con la classe idTabs funzionano da pulsanti per la navigazione: l’attributo href di questi specifica quale div deve essere visualizzato. il markup è semplicissimo:

<div class="tabcontainer">
<ul class="idTabs">
	<li><a href="#lorem">Lorem...</a></li>
	<li><a href="#morbi">morbi!</a></li>
	<li><a href="#fermentum">fermentum</a></li>
</ul>
<div id="lorem">contenuto del primo div</div>
<div id="morbi">contenuto del secondo div</div>
<div id="fermentum">contenuto del terzo div</div>
</div>

Evidentemente sarà necessario impostare lo stile degli elementi in gioco. Bisognerà specificare la classe selected, che il plugin assegna automaticamente alla tab corrente.

ul.idTabs li a {float: left; padding:  5px;
text-decoration: none; background: #444; color: #fff}
.tabcontainer div {clear:left; padding: 10px; background: #fff}
ul.idTabs li a.selected {background: #fff; color: #444}

Ecco il link: idTabs.

Ho realizzato una nuova semplice variante dello scroller Rss, che abbiamo visto in questo post. In questo caso lo scroller visualizza un solo item per volta: la differenza sostanziale rispetto al primo esempio è che lo scrolling avviene in senso orizzontale. Non mi soffermo ancora sul codice necessario per parsare il feed, sul markup, il foglio di stile, e le poche (grazie a jQuery) righe di codice javascript necessarie per creare questo scroller, per il semplice fatto che tutte le informazioni (e tutti i link del caso) si trovano sempre nel primo post della serie, mentre dalla pagina della live demo è scaricabile tutto il codice. Ecco il link allo scroller n.3

Mentre qui trovate la live demo n.1 e qui la n.2
Qui il primo post con il tutorial dettagliato.

Con jQuery è un gioco da ragazzi rendere più accattivanti le pagine web che stiamo realizzando (e porre un limite alle richieste di clienti che vorrebbero un sito tutto in flash…). Ecco quattro link (un tutorial e tre plugin) in cui mi sono imbattutto negli ultimi giorni e sui quali è ormai evidente che non scrivero mai un post più approfondito.

• Elementi animati al passaggio del mouse: Animate a hover with jQuery
• Estendere l’area cliccabile di un link all’elemento che lo contiene: bigTarget.js
• Slideshow di immagini: Crossslide
• Personalizzare le scrollbar: jScrollPane

Qualche giorno fa abbiamo visto come parsare un un feed Rss, e visualizzarne il contenuto sfruttando jquery ed il plugin Serialscroll.
In quello scroller è visibile un item per volta: per ogni item si vede il titolo (che linka al permalink) e una breve descrizione. Qui c’è l’esempio funzionante, con il codice sorgente.

Oggi vi presento una variante di quell’esperimento (ed altre ne verranno…): questa volta vengono visualizzati tutti gli item che decidiamo di acquisire dal feed. Per ogni item è possibile visualizzare una breve descrizione del post, che compare nel box in alto, quando si passa con il puntatore sul titolo . Se invece si fa click, viene aperto il permalink del relativo post.

Non starò qui a scrivere un tutorial perchè la maggior parte delle informazioni basilari per realizzare questo scroller sono le stesse che avevo fornito nel primo esempio e che quindi trovate qui.
Inoltre anche nella pagina dello scroller n.2 troverete tutto il codice di cui avete bisogno (php, html, css e javascript). Per cui qui non aggiungo altro:  ecco il link allo scroller n.2.

Una buona idea per proporre il contenuto di un feed rss all’interno di una pagina web, può essere quella di inserire i vari item all’interno di un box, e rendere questo box scrollabile in modo che l’utente possa visualizzare gli item precedenti o successivi. Quello che vogliamo ottenere è – per intenderci – uno scroller come questo.
Il funzionamento di questo scroller è molto semplice: a livello di markup creeremo un contenitore per una lista di item di un feed rss. Ogni item sarà composto dal titolo con link al post, e dalla descrizione dell’articolo: dati che estrarremo dal feed utilizzando un parser PHP: Simplempie. Con i css faremo in modo che un solo item sia visibile. Infine con jQuery “attiveremo” due immagini in modo che funzionino da pulsanti per scrollare la lista da un item all’altro.

Read the rest of this entry »

Sono lontani, o almeno dovrebbero esserlo, i tempi in cui si usavano le tabelle per impostare il layout della pagina. Ormai la tabella viene utilizzata esclusimante per presentare in maniera leggibile una serie di dati. L’avvento dei framework javascript ha permesso inoltre di aggiungere alle tabelle un pizzico di movimento, e di rendere il contenuto maggiormente leggibile da parte dell’utente. Mi riferisco ovviamente alle tabelle riordinabili e ridimensionabili.
In questo tutorial vedremo come creare tabelle ordinabili, utilizzando il framework javascript Jquery ed il plugin per Jquery Tablesorter.

Read the rest of this entry »