Categoria ‘Internet’


Una classe countDown in Javascript

Nel post 3D CountDown con FIVe3D (vedi anche How I Did It: scrivere un countdown in Flash), veniva proposta una classe per la creazione di un oggetto CountDown in Actionscript, eccone una versione simile in Javascript:

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
27
28
29
30
31
32
33
34
35
36
/**
 * CountDown Class
 *
 * @author        Giovambattista Fazioli
 * @email         g.fazioli@undolog.com
 * @web           http://www.undolog.com
 *
 * @param    dd   (string) 'month day, year'
 *
 */

function countDown( dd ) {
    // init target time
    var target            = new Date( dd );
    this.targetTime        = target.getTime();
   
    /**
     * refresh countdown
     */

    this.refresh = function() {
        var today                 = new Date();
        var currentTime           = today.getTime();
        // time left
        this._leftMilliseconds    = (this.targetTime - currentTime);
        this._leftSeconds         = Math.floor( this._leftMilliseconds / 1000 );
        this._leftMinutes         = Math.floor( this._leftSeconds / 60 );
        this._leftHours           = Math.floor( this._leftMinutes / 60 );
        // no module
        this.leftDays             = Math.floor( this._leftHours / 24 );
        // for print
        this.leftMilliseconds     = this._leftMilliseconds % 1000;
        this.leftSeconds          = this._leftSeconds % 60;
        this.leftMinutes          = this._leftMinutes % 60;
        this.leftHours            = this._leftHours % 24;
    }
    this.refresh();
}

Esempio

1
2
3
var cd = new countDown( '1 1, 2009' );
// mostra quanti giorni, ore, minuti, secondi e millisecondi al primo gennaio 2009
document.write( cd.leftDays + "," + cd.leftHours + "," + cd.leftMinutes + "," + cd.leftSeconds + "," + cd.leftMilliseconds );

Continua...

Very short trick: export con data da PHPMyAdmin

Quando si effettua un export da PHPMyAdmin è possibile preimpostare il campo “Nome file template”, nella sezione “Salva con nome…”, in modo tale che aggiunga in automatico la data del giorno. Normalmente questo campo è preimpostato a __DB__, che rappresenta il nome del database. Inserendo ad esempio __DB__-%Y%m%d otteremo il nome del nostro database seguito dall’anno, mese e giorno correnti: miodb-20081010

Continua...

Very short trick: avoid error message in PHP

Se non vogliamo che una funzione PHP emetta un qualsiasi errore o warning, basta inserire prima della chiamata alla funzione il carattere chiocciola – o at – (@):

1
2
3
4
// invece di usare la forma canonica
$res = miaFunc();
// è possibile usare
$res = @miaFunc();

Continua...

Adobe Creative Suite 4: Roma 21 ottobre 2008

Adobe Creative Suite 4: Roma 21 ottobre 2008

Adobe è lieta di invitarti agli eventi di lancio della nuova Adobe Creative Suite 4. Ti aspettiamo a Roma il 21 Ottobre e a Milano il 30 Ottobre. Per tutti i dettagli dell’incontro vai al minisito dedicato agli eventi CS4! In omaggio per tutti i partecipanti la t-shirt CS4!

Io cercherò di esserci… soprattutto per la maglietta :)

Continua...

Very short trick: PHP auto echo

In PHP è possibile usare una forma abbreviata, o contratta, per visualizzare variabili o ritorni di funzioni:

1
2
3
4
5
6
7
8
// al posto di
<?php echo $miavar ?>
// è possibile scrivere
<?=$miavar?>
// al posto di
<?php echo miaFunc() ?>
// è possibile scrivere
<?=miaFunc()?>

Continua...

Skypemote versione Adobe AIR

Download Install Skypemote Adobe AIR Version

Questa è la prima release, la 0.8 (allineata con la versione online), di Skype Emotions Editor – Skypemote – in versione Adobe AIR. Per adesso le funzionalità sono le medisime della versione online, con il vantaggio di essere un’applicazione desktop, installabile quindi su Windows, Mac e Linux.
Prima dell’installazione ricordatevi di aggiornare e/o installare per la prima volta le runtime di Adobe AIR, se non l’avete già fatto in precedenza.

Download

Potete scaricare Air Skypemote da Google Code.

Continua...

Actionscript 3.0 for beginners: lesson #3

Continuiamo l’analisi dell’esempio del gioco Tic Tac Toe, presentato in Actionscript 3.0 for beginners: lesson #2. Eravamo arrivati alla funzione che crea la griglia di gioco:

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
27
28
29
30
31
32
33
34
35
36
37
38
/**
 * Disegno graficamente la griglia (3x3) a video
 *
 * @param        void
 * @return       void
 * @private
 */

private function createGrid():void {
    // puntatore temporaneo ad uno oggetto MovieClip
    // nota: qui si sarebbe potuto usare anche un oggetto Sprite
    // ma in questo caso mi serve di poter estendere l'oggetto
    // aggiungendo alcune proproetà personali. L'oggetto Sprite
    // è una classe chiusa e quindi non estendibile runtime, mentre
    // la classe MovieClip è una classe dinamica e quindi rende
    // possibile l'aggiunta di proprietà runtime
    var tm:MovieClip, i:uint = 0;
    // aggiungo in uno schema 3x3 i MovieClip
    for(; i < 9; i++) {
        tm                    = new MovieClip();
        addChild( tm );
        tm.x                  = OFFSETX+( (i%3)*(PLAYER_WIDTH+PLAYER_OFFSET) )
        tm.y                  = OFFSETY+Math.floor(i/3)*(PLAYER_HEIGHT+PLAYER_OFFSET)
        tm._index             = i;
        drawPlayer( tm, 0 );
    }
    // disegno le 2 linee veriticali e le 2 orizzontali
    with( this.graphics ) {
        lineStyle(6,0x666666);
        moveTo(OFFSETX,OFFSETY+(PLAYER_HEIGHT+15));
        lineTo(OFFSETX+( (PLAYER_WIDTH+20)*3 ),OFFSETY+(PLAYER_HEIGHT+15));
        moveTo(OFFSETX,OFFSETY+(PLAYER_HEIGHT+20)*2);
        lineTo(OFFSETX+( (PLAYER_WIDTH+20)*3 ),OFFSETY+(PLAYER_HEIGHT+20)*2);
        moveTo(OFFSETX+(PLAYER_WIDTH+15),OFFSETY);
        lineTo(OFFSETX+(PLAYER_WIDTH+15),OFFSETY+( (PLAYER_HEIGHT+20)*3 ));
        moveTo(OFFSETX+(PLAYER_WIDTH+20)*2,OFFSETY);
        lineTo(OFFSETX+(PLAYER_WIDTH+20)*2,OFFSETY+( (PLAYER_HEIGHT+20)*3 ));
    }
}

Continua...

jQuery: come costruire un’estensione Plugin

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):

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

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

Creare un pipe separatore tramite CSS

Capita spesso di vedere una serie di link distribuiti orizzontalmente separati dal carattere pipe “|”, il simbolo grafico dell’asticella verticale. Inoltre, se è presente una buona stesura HTML, ci si accorge che questa serie di link – apparentmente orizzontali – altro non sono che liste puntate UL o OL. Ne deriva che invece di scrivere:

1
2
3
<p>
    <a href="#1">Link 1</a> | <a href="#2">Link 2</a> | <a href="#n">Link n</a>
</p>

Sarebbe meglio usare:

1
2
3
4
5
<ul>
    <li><a href="#1">Link 1</a></li>
    <li><a href="#2">Link 2</a></li>
    <li><a href="#n">Link n</a></li>
</ul>

Continua...