Joyride è un plugin jQuery che permette di aggiungere questo tipo di tour alla pagina in maniera molto semplice: si tratta di creare una lista con i contenuti da visualizzare di volta in volta ad ogni step del tour (in questa lista si identificano – tramite ID – gli elementi della pagina su cui applicare i tooltip, e quindi a livello di javascript, chiamare il metodo joyride.

Inevitabile quindi che sia arrivato il plugin per jQuery che permette di creare timeline in una pagina html. Il punto di partenza, a livello di markup, sono un paio di liste UL, poi fa tutto il plugin, o quasi. Da provare: timelinr

Nulla contro le impostazioni di default del browser, ma, se serve, questo comportamenteo può essere modificato con Javascript e l’aspetto della finestra può essere personalizzato attraverso i fogli di stile.

trovate il tutorial e il relativo plugin per personalizzare questa finestra di dialogo su tutorialzine: How to Create a jQuery Confirm Dialog Replacement

Ma Webdesignerwall ha pubblicato un’interessante variante, che sfrutta le potenzialità dell’elemento CANVAS di Html5.

Le immagini in stato normale vengono renderizzate in bianco e nero, mentre al passaggio del mouse l’immagine gradualmente recupera i colori originali. La manipolazione di CANVAS avviene attraverso jQuery. Il tutorial è qui: HTML5 Grayscale Image Hover.

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

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.