Articoli con Tag ‘Prototype.js’


Shadowbox 3.0 beta

È stata rilasciata proprio ora (grazie alla segnalazione dell’autore Michael J. I. Jackson) la release 3.0 beta di Shadowbox.js. Oltre alla nuova grafica del sito ecco i più importanti cambiamenti di questa release preliminare:

Continua...

Camelize, CamelCase

Come già visto nel post Varietà di coding e di coding gli approcci che uno sviluppatore può avere alla risoluzione di un problema sono diversi e molteplici a parità del linguaggio di programmazione usato. Ecco come alcuni dei più noti framework Javascript hanno risolto una semplice funzione di CamelCase:

Prototype.js

Prototype.js, nella versione 1.6.0.3, propone esplicitamente un metodo camelize() per effettuare il camelcase su una stringa. L’approccio dell’autore è abbastanza semplice e il codice risulta auto-esplicativo. In questo caso non è stato fatto nessun uso delle Regular Expression!

1
2
3
4
5
6
7
8
9
10
11
12
13
camelize: function() {
    var parts = this.split('-'), len = parts.length;
    if (len == 1) return parts[0];

    var camelized = this.charAt(0) == '-'
      ? parts[0].charAt(0).toUpperCase() + parts[0].substring(1)
      : parts[0];

    for (var i = 1; i < len; i++)
      camelized += parts[i].charAt(0).toUpperCase() + parts[i].substring(1);

    return camelized;
  }

Continua...

jQuery contro tutti: un benchmark con 5 browser

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:

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

e com’è adesso con jQuery:

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

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

Continua...

jQuery restyling

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”.

Continua...

Simple Accordion con la classe USimpleTabStrip

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:

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

E riposizionando gli elementi HTML (sorgente HTML):

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

    <a href="#acc2">Accordion 2</a>
    <a name="acc2"></a>
    <div>
        <h1>Content #2</h1>
       <p>Bla bla bla....</p>
    </div>

    <a href="#acc3">Accordion 3</a>
    <a name="acc3"></a>
    <div>
        <h1>Content #3</h1>
       <p>Bla bla bla....</p>
    </div>

</div>

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

Continua...

Unobtrusive Simple TabStrip

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 (&lt;a name&gt;&lt;/a&gt;):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!-- Semplice lista di link all'interno della pagina -->
<ul>
    <li><a href="#tbs1">Link 1</a></li>
    <li><a href="#tbs2">Link 2</a></li>
    <li><a href="#tbs3">Link 3</a></li>
</ul>

<!-- Blocchi/tabs -->

<a name="tbs1"></a>
    <div>
        <h1>Scheda #1</h1>
        <p>Bla bla bla....</p>
    </div>

<a name="tbs2"></a>
    <div>
        <h1>Scheda #2</h1>
        <p>Bla bla bla....</p>
    </div>

<a name="tbs3"></a>
    <div>
        <h1>Scheda #3</h1>
        <p>Bla bla bla....</p>
    </div>

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

Continua...

Tecniche di Text Replacement in Flash

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...

Google AJAX Library API: una svolta per gli sviluppatori

AJAX Libraries API Google, in quest’ultimo periodo, ha rilasciato una moltitudine di strumenti dedicati agli sviluppatori, aggiornando di continuo i propri rilasci. Adesso stringe un accordo con i più diffusi framework AJAX, e non solo, per centralizzare la distribuzione delle librerie jQuery, prototype, script.aculo.us, MooTools e dojo!

In pratica è possibile accedere a queste librerie sfruttando le infrastrutture e la rete Google, con notevoli vantaggi in termini di velocità e sicurezza.

La velocità, nel caricamento, è garantita dalla stessa rete Google che, oltre a fornire di per se una struttura di server distribuita, permette (di default) il caricamento compresso (gzip/minify) delle librerie. Gli hosting Google più vicini alla richiesta saranno utilizzati per inviare il codice e, in caso di non raggiungimento o down temporaneo, la rete Google garantirà comunque l’invio del codice Javascript!

Continua...

Google AJAX API Language e Prototype.js

Dopo aver visto il funzionamento delle Google AJAX API mi è venuto in mente un modo alternativo per tradurre realtime le nostre pagine Web. Sfruttando prototype.js è possibile marcare i TAG HTML che desideriamo tradurre, invece di sottoporre l’intero documento alla traduzione. Per marcare i TAG HTML da tradurre ho usato l’attributo rel, impostandolo a translate:

1
<p rel="translate">Questo testo deve essere tradotto</p>

Con una semplice funzione, poi, possiamo sfruttare prototype.js per elaborare tutti i  TAG HTML con rel='translate':

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
 * @name         : translate()
 * @description  : translate  
 */
function translate() {
    $$('[rel="translate"]').each(
        function(e) {
            google.language.translate(e.innerHTML, 'it', 'en',
                function(result) {
                    if (result.translation) {
                        e.innerHTML = result.translation;
                    } else {
                        alert( 'Translate Error!\n\n' + result.error.message );
                    }
                }
            );                                          
        }
    );
}

Potete vedere questa funzione in azione su e-lementi.com

Ovviamente lo script può (e/o deve) essere perfezionato a seconda dei casi. È interessante notare, tuttavia, che è possibile specializzarlo in modo tale da sostituire delle immagini (nel caso di bottoni in grafica che contengono testo) o fargli elaborare TAG particolari come INPUT o TEXTAREA.

Uno dei limiti che ho riscontrato, e che vorrei approfondire, riguarda il numero di caratteri che possono essere tradotti. In caso di testi importanti, infatti, non è difficile ottenere un errore: che infatti ho gestito nello script con un alert().

Continua...

HTML dinamico con Prototype: stili e script

Oltre un anno fa avevo scritto un post ( HTML dinamico con Javascript) che illustrava alcune tecniche per aggiungere dinamicamente fogli di stile e script ad una pagina HTML già caricata. Chi usa Prototype.js si può semplificare notevolmente la vita usando ad esempio:

1
2
3
4
5
6
document.observe("dom:loaded",
    function() {
        var script = new Element("script", { type: "text/javascript", src: "/js/altro.js" });
        $$("head")[0].insert(script);
    }
);

Dopo che la pagina è stata caricata (document.observe) viene aggiunto un nuovo script Javascript! Per gli stili vale esattamente la stessa cosa!

Continua...