jQuery: come costruire un’estensione Plugin

Martedì 23 Settembre, 2008

Come tutte le librerie di questo tipo anche jQuery permette di estendere le sue funzionalità base tramite dei veri e propri plugin. Rispettando le regole del suo funzionamento, cioè restituiendo sempre un puntatore all'elemento selezionato o a jQuery stessa, è possibile scrivere un plugin con poche righe di codice. Prendiamo come esempio il codice proposto in jQuery contro tutti: un benchmark con 5 browser che era (dopo la correzione segnalata da Luca):

JavaScript:
  1. $('h2.dropdown').css('cursor','pointer').click(
  2.     function() {
  3.         if( $(this).next().is(':hidden') ) $(this).next().slideDown(); else $(this).next().slideUp();
  4.     }
  5. );

Continua a leggere... »

Post correlati

jQuery contro tutti: un benchmark con 5 browser

Mercoledì 17 Settembre, 2008

image Un buon sviluppatore non ha problemi a passare da un linguaggio di programmazione ad un altro. La scelta di concentrarsi su un particolare linguaggio, framework o ambiente di sviluppo, è dettata più dalla disponibilità di tempo e dal tipo di lavoro che si svolge. Tuttavia, un fattore importante che può influire sulla scelta di "framework" simili, è la simpatia o l'affezione che può maturare con il tempo.
Nello specifico, ho voluto analizzare alcuni - non certo tutti - framework Javascript disponibili oggi, anche perchè "consigliato" a dare un'occhiata soprattutto a jQuery.
I creatori di mootools (uno dei più noti framework Javascript) hanno reso disponibile uno strumento per eseguire un test di velocità e validità su cinque noti framework Javascript: Slickspeed. Questo test, dagli esiti non affatto scontati, è importante in quanto i framework Javascript operano lato client, cioè vengono eseguiti dal nostro browser. È proprio per questo motivo che alcuni trovano Safari più rapido di Internet Explorer o Google Chrome più rapido di FireFox. Tuttavia ciò spesso dipende anche dal tipo di pagina che si sta visualizzando. Infatti può benissimo capitare che un particolare sito sia davvero più "veloce" se visualizzato in Safari, ma questo non significa che "tutti i siti" saranno più veloci con Safari! Ovviamente questo discorso è valido per qualsiasi altro browser.

Il benchmark

Nel test che ho effettuato con Slickspeed ho messo a confronto i browser disponibili sulla mia macchina (Windows Vista Utilmate 64bit - Intel core 2 quad a 2.4GHz con 8Gb RAM).
Purtroppo il test non sono riuscito ad eseguirlo con Internet Explorer 7, in quanto bloccava la macchina, andando anche fuori scala con i risultati! Ancora una volta complimenti Microsoft.
Ho crercato di mantenere identico lo stato del PC durante l'esecuzione dei test, aprendo singolarmente i browser e non mandando nessun altro processo in esecuzione.

Nota: se avete voglia di eseguire anche voi uno o più di questi test, potete commentare questo post in caso di "curiosi" e diversi risultati.

image

Google Chrome è risultato davvero veloce, con un valore di 68 (media) nell'esecuzione dei test con jQuery. Il più lento, invece, è risultato Flock, nonostante provenga dalla stessa "madre" Mozilla. Questo pessimo risultato di Flock è davvero curioso visto il suo taglio Social Network; perchè sono proprio i Social Network Web 2.0 a sfruttare molti dei framework Javascript disponibili, così da fornire un'esperienza di navigazione ed interazione davvero innovativa.
A sorpresa Opera batte FireFox e anche di un bel po', ottenendo addirittura un 74 nell'esecuzione di Dojo! FireFox e Safari, tutto sommato, si assomigliano, con Safari più rapido nei test con Mootools e jQuery.

Quale framework scegliere?

Se non badiamo ai test sulla velocità di esecuzione e non ci preoccupiamo della dimesione in Kbytes dei framework stessi, la risposta potrebbe essere "quello che più vi piace" o, se preferite, "quello che conoscete meglio o vi risulta più armonico con il vostro stile di programmazione".
In ultima analisi questi framework si assomigliano un po' tutti (vedi l'uso del $ ad esempio), nonostante alcune importanti e sostanziali differenze che possono saltare agli occhi di un esperto o nell'uso davvero spinto di una particolare libreria. In linea di massima, infatti, tutto quello che si può realizzare con jQuery, ad esempio, lo si può fare benissimo con mootools o prototype! Se jQuery vanta una sintassi estremamente compatta, in quanto tutti i metodi restituiscono sempre l'oggetto base jQuery, creando così file interminabili di oggetto.metodo().metodo().metodo()... non è detto che questo sia a tutti i costi un punto di forza, soprattutto per chi dovrà fare il debug!
Librerie come prototype.js peccano forse in assenza di effetti grafici, anche semplici, costringendo lo sviluppatore ad implementare spinoff come scriptaculous.js, pesanti e distanti dalla libreria inizialmente scelta.

Un esempio

Proprio quest'ultimo motivo, ad esempio, mi ha portato a sostituire l'accoppiata prototype/scriptaculous con jQuery per realizzare i pannelli interattivi/animati qui nella sidebar di undolog.com. In effetti, usando anche Google API per importare le librerie, è uno spreco caricare tutta la libreria scriptaculous per uno slideDown e slideUp. A titolo informativo e di esempio, ecco com'era il codice Javascript con l'accoppiata prototype/scriptaculous:

JavaScript:
  1. // prototype/scriptaculous
  2. $$('h2.dropdown').each(
  3.     function(element) {
  4.         element.style.cursor="pointer";
  5.         element.observe('click',
  6.             function(event) {
  7.                 if( this.next().style.display == "" ) new Effect.BlindUp(this.next(),{duration:.5});
  8.                 else new Effect.BlindDown(this.next(),{duration:.3});
  9.                 Event.stop(event);
  10.             }
  11.         )
  12.     }
  13. );

e com'è adesso con jQuery:

JavaScript:
  1. // jQuery
  2. $('h2.dropdown').each(
  3.     function(i) {
  4.         $(this).css('cursor','pointer').click(
  5.             function() {
  6.                 if( $(this).next().is(':hidden') ) $(this).next().slideDown(); else $(this).next().slideUp();
  7.             }
  8.         );
  9.     }
  10. );

Tutto sommato, a ben guardare, non mi sembra ci sia moltissima differenza! Ma come dicevo prima... è questione "anche" di gusto personale.

Post correlati

jQuery restyling

Domenica 31 Agosto, 2008

Proprio in questi giorni (sotto consiglio...) stavo dando un'occhiata a jQuery, un'ottima libreria sullo stile di prototype.js, scriptaculous.js, mooTools, per intenderci... ed ecco che oggi tutto il sito è stato completamente ridisegnato:

image

Ottimo inizio per allargare i miei orizzonti su questo tipo di librerie! Prossimamente pubblicherò qualche articolo interessante, soprattutto sulle differenze tra jQuery e le altre librerie "simili".

Post correlati

Simple Accordion con la classe USimpleTabStrip

Mercoledì 20 Agosto, 2008

La classe USimpleTabStrip, presentata in Unobtrusive Simple TabStrip, può essere utilizzata anche per realizzare un semplice menu Accordion.
Utilizzando gli effetti di BlindUp() e BlindDown() offerti da Scriptaculous:

JavaScript:
  1. function init(){
  2.     uts = new USimpleTabStrip();
  3.     uts.Init();
  4.     uts.onShow = function(e) {
  5.         new Effect.BlindDown(e);
  6.     }           
  7.     uts.onHide = function(e) {
  8.         new Effect.BlindUp(e);
  9.     }           
  10. }

E riposizionando gli elementi HTML (sorgente HTML):

HTML:
  1. <div class="accordion">
  2.     <a href="#acc1">Accordion 1</a>
  3.     <a name="acc1"></a>
  4.     <div>
  5.         <h1>Content #1</h1>
  6.          <p>Bla bla bla....</p>
  7.     </div>
  8.  
  9.     <a href="#acc2">Accordion 2</a>
  10.     <a name="acc2"></a>
  11.     <div>
  12.         <h1>Content #2</h1>
  13.          <p>Bla bla bla....</p>
  14.     </div>
  15.  
  16.     <a href="#acc3">Accordion 3</a>
  17.     <a name="acc3"></a>
  18.     <div>
  19.         <h1>Content #3</h1>
  20.          <p>Bla bla bla....</p>
  21.     </div>
  22.  
  23. </div>

Si ottiene un semplice menu Accordion che può essere utilizzato in modo estremamente rapido.

Post correlati

Unobtrusive Simple TabStrip

Giovedì 14 Agosto, 2008

USimpleTabStrip è un Unobtrusive Javascript in grado di migliorare i classici link anchor (ancora) all'interno di una pagina HTML. Questo sorgente è un miglioramento della funzione presentata in Unobtrusive Tabstrip. In questa versione oltre ad allineare il codice alle release 1.6 di prototype.js è stata creata una vera e propria classe per gestire i TabStrip. La release qui presentata è molto semplice e lineare. Il suo principale lavoro risiede nell'aggiungere un evento click ai normali link anchor. Non sono inoltre presentati stili CSS, proprio per lasciare la massima libertà d'azione; tuttavia è possibile ottenere un efficace TabStrip con poche righe di codice CSS aggiuntivo; vedi Aggiungere degli stili CSS più sotto.

Codice HTML

La classe USimpleTabStrip lavora su un HTML molto semplice, sftuttando gli anchor (<a name></a>):

HTML:
  1. <!-- Semplice lista di link all'interno della pagina -->
  2.     <li><a href="#tbs1">Link 1</a></li>
  3.     <li><a href="#tbs2">Link 2</a></li>
  4.     <li><a href="#tbs3">Link 3</a></li>
  5. </ul>
  6.  
  7. <!-- Blocchi/tabs -->
  8.  
  9. <a name="tbs1"></a>
  10.     <div>
  11.         <h1>Scheda #1</h1>
  12.         <p>Bla bla bla....</p>
  13.     </div>
  14.  
  15. <a name="tbs2"></a>
  16.     <div>
  17.         <h1>Scheda #2</h1>
  18.         <p>Bla bla bla....</p>
  19.     </div>
  20.  
  21. <a name="tbs3"></a>
  22.     <div>
  23.         <h1>Scheda #3</h1>
  24.         <p>Bla bla bla....</p>
  25.     </div>

Il tag div subito sotto l'anchor a funziona da contenitore.

Continua a leggere... »

Post correlati

Considerazioni sull’evoluzione dei linguaggi di svilluppo: AS2 vs AS3

Martedì 5 Agosto, 2008

Leggendo l'articolo di Julius ActionScript 2 o ActionScript 3? Facciamo chiarezza! vorrei fare alcune considerazioni sull'evoluzione "inversa" di alcuni strumenti di sviluppo per chi, come me, viene dalla programmazione C/C++.

Una caratteristica comune - negli ultimi anni - di alcuni ambienti di sviluppo è quella di raffinare la sinstassi del proprio linguaggio con il tempo. Si parte da un linguaggio ad alto livello, come il Lingo di Macromedia Director, Actionscript 1.0 delle prime versioni di Flash o Microsoft Visual Basic 3 per arrivare ad allinearsi con il tempo alle specifiche e alle - ormai consolidate - sintassi dettate dallo standard ECMA. Anche se paragonare un Microsoft Visual Basic 3 con Javascript o Actionscript non è del tutto corretto, entrambe le situazioni denotano una chiara evoluzione "inversa" rispetto agli albori della codifica di programmazione.
Unica eccezione, forse, in questo scenario, sono soluzioni come Java o PHP, entrambi con radici fortemente orientate al C/C++.

Concentrandoci su Actionscript, è chiara la volontà della casa prodruttrice (ora Adobe) ad allineare il linguaggio di Flash allo standard ECMA. Usare ancora Actionscript 2.0 non porta nessun concreto vataggio allo sviluppatore, soprattutto a chi non possiede le conoscenze di base proprie del C/C++. Aggiungere patch a vecchi progetti, senza doverli "portare" (riscrivere) in base alle ultimi release, ha un senso in un'ottica di economia. Tuttavia sarebbe utile imparare subito, quando si presenta l'occasione, le "nuove" sintassi proposte dagli aggiornamenti degli ambienti di sviluppo. Più si attende e peggio sarà!

Apprendere Actionscript 3.0, per chi viene dal C/C++, è più come "disapprendere" (o disimparare), le vecchie "clausule", forzate e non standard, presenti nelle precendenti versioni. Stessa cosa accadrà con l'uscita di Flash CS4; evitare, quindi, di rimanere indietro.

Inoltre, lo standard, rende la portabilità del codice estremamente più fattibile e concreta. La similitudine tra PHP, Javascript e Actionscript 3.0, evita di dover rivedere pesantamente codici e algoritmi scritti in uno solo di questi linguaggi.

Post correlati

Firebug Lite: Firebug per IE, Opera e Safari

Martedì 22 Luglio, 2008

Tramite Firebug Lite è possibile utilizzare una versione semplificata della nota estensione per FireFox sui browser Microsoft Internet Exploer, Opera e Apple Safari. Firebug Lite può essere utilizzato in due modi: come chiamata Bookmark o come libreria offline

Bookmark mode

Aggiungendo questo "indirizzo speciale" Firebug Lite ai nostri bookmark (trascina il link nei preferiti) - il codice è:

HTML:
  1. javascript:var%20firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.pi&&window.firebug){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);

Sarà possibile attivare Firebug Lite su qualsiasi sito Web e da qualsiasi browser. Questa è forse l'opzione più interessante, nonostante le funzioni siano davvero limitate.

Offline

In alternativa, se stiamo sviluppando noi un sito Web, è possibile scaricare un pacchetto Javascript ed installarlo sul nostro Web! In questo modo possiamo usare Firebug Lite anche senza una connessione Internet ed in locale.

Firebug Lite è un modo per compensare la mancanza di questa estensione per gli altri browser, tuttavia a me è risultato lento e davvero molto limitato, soprattutto nei CSS! Come si dice: meglio di niente...

Post correlati

Menu combo categorie in WordPress 2.5.1

Giovedì 10 Luglio, 2008

Per creare un menu/combo (tag select) senza un bottone di submit e in grado di posizionarsi sulla categoria attualmente visualizzata, si può sfruttare il seguente codice:

HTML:
  1. <select name="event-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'>
  2. <option value="">Seleziona una categoria</option>
  3. <?php
  4. $foo = ( (is_category())?(single_cat_title('', false)):"" );
  5. $categories = get_categories('orderby=name&hierarchical=0'); $option = '';
  6. foreach ($categories as $cat) {
  7.     $option .= '<option '.( ($cat->cat_name == $foo)?"selected":"" ).' value="/category/'.$cat->category_nicename.'">';
  8.     $option .= $cat->cat_name;
  9.     $option .= ' ('.$cat->category_count.')';
  10.     $option .= '</option>';
  11. }
  12. echo $option;
  13. ?>
  14. </select>

L'evento onchange, nel tag select, permette di eliminare un eventuale bottone di submit. La funzione WordPress is_category(), invece, permette di stabilire se stiamo visualizzando un "archivio" categorie, così da ottenere il titolo/nome dell'attuale categoria visualizzata.

Post correlati

Shadowbox 2.0: la release candidate 1

Martedì 8 Luglio, 2008

shadowbox È stata rilasciata la release candidate 1 (rc1) della versione 2.0 della libreria Javascript Shadowbox, di Michael J. I. Jackson, utilissima per aprire finestre dedicate alla visualizzazioni di vari tipi di media, da Flash a QuickTime a pagine HTML. In questa nuova versione troviamo:

  • Il sito è più ricco di informazioni e include ora un wizard (sullo stile di mootools) per creare "al volo" un pacchetto della libreria personalizzato alle nostre esigenze
  • Possibilità di usare un modulo standalone base, senza includere necessariamente - gli adattatori per le - librerie esterne come prototype.js, jQuery, etc...
  • Miglioramenti alla gestione e realizzazione delle Skin
  • Localizzazione

La libreria è disponibile anche su SVN all'indirizzo:

http://michaeljackson.googlecode.com/svn/trunk/shadowbox

Post correlati

Tecniche di Text Replacement in Flash

Mercoledì 25 Giugno, 2008

La tecnica di Text Replacement che presento oggi è, per certi aspetti, davvero interessante. A differenza della classica sostituizione per immagine tramite CSS, questa tecnica usa un filmato Flash per sovrascrivere i titoli del nostro sito. Nonostante sia un pochino più articolata, in quanto richiede la creazione di un filmato Flash e l'uso di Javascript, permette di ottenere una serie di vantaggi non indifferenti:

  • Mantiene l'accessibilità del sito sfruttando un True-Unobtrusive-Javascript in modo che crawler e spider continuino a vedere la pagina come semplice e corretto HTML
  • Non richiede la creazione di n immagini per n titoli. Basta un solo filmato per sostituire tutti i titoli del nostro sito, con un notevole risparmio in termini di Download
  • Permette di creare anche titoli semplici ma con Font normalmente non utilizzati sul Web
  • Il testo può essere reso in HTML, grazie alle caratteristiche di Flash
  • Il testo è selezionabile
  • Essendo un filmato Flash si può inserire interattività e animazioni di qualsiasi sorta

Noterete, anche, che in questa procedura i CSS non sono praticamente presi in considerazione!

Continua a leggere... »

Post correlati