Categoria ‘Sviluppo’


L’operazione aritmetica modulo

Il “modulo” è una delle operazioni aritmentiche disponibili su praticamente tutti i linguaggi di programmazione (l’ho usato la prima volta con il Basic del Commodore 64). Può comparire come semplice operatore, come nel caso di Actionscript o Javascript che usano entrambi il carattere “percento” (a % b), o come metodo o istruzione. Per gli sviluppatori può risultare utile in contesti apparentemente diversi tra loro. Gskinner ne ha parlato poco tempo fa, mostrando alcuni classici, ma interessanti, esempi.

Semplificando, l’operazione modulo tra due numeri restituisce il resto della loro divisione. Per completezza diciamo che l’operazione di modulo è un argomento assai vasto, che ho trattato anche in La cifratura RSA! Questa volta, tuttavia, non parleremo di codici o cifrature, ma di cose utili e molto più semplici.

Divisibile per… alternare

Il primo uso che possiamo fare dell’operazione di modulo è quella di determinare se un numero a è divisibile per un numero b! Se il risultatto di a % b(userò qui la notazione % per indicare l’operazione di modulo) è zero, a è divisibile per b. Ricordo che quando ebbi a che fare con un problema simile non conoscevo l’operazione di modulo. Sul Commodore 64 mi serviva sapere se un numero era divisibile per 2. All’epoca usai questa sintassi (ho ritrovato il codice origionale – anno 1983):

1
2
3
10 INPUT A
12 B=A/2: IF B = INT(B) THEN PRINT "OK IL NUMERO "A" E' PARI":GOTO 10
14 PRINT "IL NUMERO "A" E' DISPARI":GOTO 10

Il BASIC del Commodore 64, comunque, non possedeva l’operazione di modulo – almeno che io ricordi!!

In pratica facevo esattamente quello che per sua natura fa l’operazione di modulo: verificavo che la divisione per 2 non avesse resto, in questo caso verificavo che il risultato non contenesse decimali ( IF B = INT(B) )! Se l’operazione di divisione è uguale al suo intero, allora il numero è pari!

Se in a abbiamo il nostro valore da controllare, la stessa cosa può essere risolta da:

1
2
3
if( (a % 2) == 0 ) {
    // pari
}

Oppure, per il 3, da:

1
2
3
if( (a % 3) == 0 ) {
    // divisibile per 3
}

Piccola nota: grazie al binario se si ha a che fare con le potenze di 2 c’è annche un modo più rapido di verificare se un numero è pari o dispari. In notazione binaria, infatti, i numeri pari hanno tutti il primo bit a zero! Così, utilizzando gli operatori logici, è possibile sapere se un numero e pari o dispari semplicemente “testanto” il primo bit:

1
2
3
if( !(a & 1) ) {
    // pari
}

In Assembly, ad esempio, questo è pane quotidiano! Ed è ancora più immediato e semplice (il Motorola 68020, ad esempio, aveva un’istruzione BTST che “testata” proprio un singolo bit ;) ). Le operazioni logiche (AND, OR, NOT, XOR, etc…), infatti, sono notoriamente più veloci a livello di eseguzione e quindi di “tempo macchina”! (a & 1) esegue l’operazione logica di AND (& – moltiplicazione bit a bit) tra il nostro valore a e 1 (chiamato maschera). Se a = 7 (00000111), ad esempio:

1
2
3
00000111 AND
00000001 =
00000001 ; dispari

Se a = 8:

1
2
3
00001000 AND
00000001 =
00000000 ; pari

Non solo possiamo verificare i numeri pari, cioè con il primo bit a 0, e quindi divisibili per 2, ma possiamo anche verificare se un numero è divisibile per 4, 8, 16, 32, 64, etc… utilizzando le opportune maschere:

1
2
3
if( !(a & 3) ) {
    // divisibile per 4 (maschera = 3 = 00000011) dato che 4 è 00000100)
}

Se gli ultimi due bit sono a zero il numero è divisibile per 4! Se gli ultimi 3 bit (maschera 00000111) sono a zero il numero è divisibile per 8! E così via :)

Gskinner mostra l’uso del modulo nei casi di generazione di valori alternati. Classico esempio è quello di modificare lo sfondo di una lista di elementi: una riga bianca e una grigia. Gskinner propone:

1
2
3
4
5
if (rowIndex % 2 == 0) {
   rowColor = 0xFFFFFF;
} else {
   rowColor = 0xCCCCCC;
}

Prima di tutto il codice sopra può essere risolto con una sola riga di codice:

1
rowColor = (rowIndex % 2 == 0)?0xFFFFFF:0xCCCCCC;

Inoltre, in questo specifico caso, eviterei effettivamente di eseguire una “pesante” operazione di modulo. Questa situazione particolare è spesso innestata in loop, e quindi sarebbe “bene” non sciupare cicli di clock macchina. In questi casi a me piace la più pulita (e logica) soluzione:

1
rowColor = (fooIndex = (fooIndex == false) )?0xFFFFFF:0xCCCCCC;

Dove è fooIndex è un valore impostato precedentemete a true o false, a seconda di come vogliamo impostare inizialmente il nostro colore sfondo. Questo approccio è più sottile e meno immediato, a prima vista, ma più rapido in quanto esegue operazioni logiche di true/false. Se fooIndex è true, quando viene eseguita l’istruzione (fooIndex = (fooIndex == false) ) la condizione (fooIndex == false) sarà falsa e di conseguenza fooIndex verrà impostato da true a false. La seconda volta, tuttavia, la condizione (fooIndex == false) sarà vera e quindi fooIndex verrà impostato da false a true! E così via…

Ripetizioni: il comportamento ad orologio

L’aritmetica finita, che sta alla base del funzionamento dell’operazione di modulo, è spesso indicata come aritmetica dell’orologio. Un orologio classico a lancette ha un quadrante suddiviso in 12 ore (12 diurne più 12 notturne!), sufficienti ad indicare una delle qualsiasi 24 ore di una giornata. Se alle 08:00 del mattino vi chiedessi che ora segnerà il vostro orologio fra 18 ore, la vostra risposta non sarebbe 8+18 = 26! Bensì le 02:00 di notte! Involontariamente e senza forse saperlo, eseguiamo conitnuamente operazioni di modulo ogni qualvolta abbiamo a che fare con gli orari.

In Italia siamo abituati al sistema di 24 ore (o misto). Quando indichiamo le ore 16:00 intendiamo quell’orario che in altri paesi è indicato come 04:00 pm. Chi usa il postfisso am/pm per distinguere le ore diune da quelle notturne, esegue ancor più spesso l’operazione di modulo, in questo caso modulo 12! Noi italiani, ed altri, invece, essendo abituati a considerare le 24 ore, eseguiamo operazioni con modulo 24!

Quando sono le 11 del mattino (11:00 per tutti) e pensiamo a “fra 5 ore”, noi italiani rispondiamo 5+11 = 16 (le quattro del pomeriggio), uno straniero potrebbe ugualmente rispondere 5+11 = 4 pm. Visto che 5 + 11, nell’aritmetica classica, fa evidentemente 16, come ha fatto lo straniero a rispondere 4 pm? Ha semplicemente eseguito il modulo 12 sul risultato: 5 + 11 = 16 mod 12 = 4. Non è necessario che prendiate una calcolatrice per verificare l’esattezza del computo, ma procedete come fanno un po’ tutti; visualizzate un quadrante di un’orologio e posizionate mentalmente le lancette sulle 11, aggiungete poi – sempre visivamente – 5 ore e, come per magia vi ritroverete effettivamente sulle 4! Ecco perchè le quattro del pomeriggio vengono chiamate 16 :)

In Italia, invece, usiamo un modulo 24, infatti: 11+5 = 16 mod 24 = 16. Quando sono le 23:00 di sera, dopo 5 ore non saranno le 28:00, perchè 28 modulo 12 = 4! 122514884225 modulo 24 = 17! Quello che accade è che la cifra del risultato modulo 24 non supera mai 24. Ma la cosa più interessante è che i numeri si ripetono indefinitivamente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1 % 24 = 1
2 % 24 = 2
3 % 24 = 3
...
22 % 24 = 22
23 % 24 = 23
24 % 24 = 0
25 % 24 = 1
26 % 24 = 2
27 % 24 = 3
...
48 % 24 = 0
49 % 24 = 1
50 % 24 = 2
51 % 24 = 3
...

Questa ripetizione è di una comodità disarmante. Immaginiamo, ad esempio, di dover disporre un oggetto, un MovieClip, similmente ad una scacchiera, su quattro colonne. Creiamo un MovieClip quandrato, 55×55 pixel e dal pannello delle proprietà esportiamolo con il nome Simbolo. Il codice seguente disporrà il nostro MovieClip su quattro colonne e andrà “a capo” grazie all’operazione di modulo:

1
2
3
4
5
6
7
var col:Number = 4;
for(var i=0; i < 12; i++) {
    var s:Sprite    = new Simbolo();
    addChild( s );
    s.x             = (i % col)*60;
    s.y             = Math.floor(i/col)*60;
}

Come si vede dal codice, la variabile i del ciclo for cresce in modo indefinito. Ma la coordinata x del nostro MovieClip non supera mai un certo valore, e si ripete indefinitivamente! Ecco un esempio concreto:

Loading Flash Player...

Tramite le due manopole potete variare il numero di colonne (il modulo) e il numero totale degli elementi, sfruttando l’algoritmo di sopra.

Continua...

Papervision3D: BasicView

Papervision3D 2.0 (GreatWhite) è in continuo sviluppo e sono molte le funzione che quasi settimanalmente vengono aggiunte. Ad aprile è stato inaugurato il blog dedicato agli sviluppatori (http://dev.papervision3d.org/), tuttavia, la release 2.0, non è ancora stata rilasciata ufficialemente è spesso difficile carpirne le vere potenzialità. Una delle recenti novità introdotte, comunque, è il nuovo oggetto BasicView che crea un’ambiente 3D con pochissime righe di codice. Basta infatti creare questo oggetto per avere a disposizione scena, viewport e camera in un colpo solo.

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

undolibrary: libreria Actionscript 3.0 su Google Code

Ho aperto un progetto su Google Code: undolibrary. Per adesso, questa libreria, contiene un solo componente (Knob -  manopola) da utilizzare tramite Actionscript 3.0. Ne parlo in quanto questo componente è propedeutico ad una serie di tutorial/sorgenti in Flash che volevo rendere disponibili.

Loading Flash Player...

Google Code

Prima di tutto introduco il concetto di Google Code per chi ne fosse estraneo. Google Code è un servizio gratuito messo a disposizione da Google con lo scopo di condividere codice ma, soprattutto, di condividerlo in modo collaborativo e con un sistema di versioning (subversion) e wiki utilissimo a gruppi di sviluppo (soprattutto opensource) o a singoli programmatori. Sul sito Google Code troviamo:

È possibile cercare progetti di altri, con un motore di ricerca appositamente costruito. Molti gruppi di sviluppo, composti da team che sono ubicati in zone geografiche distanti, sfruttano questa condivisione per lavorare insieme, garantiti da un sistema di versioning ormai assodato (checkout/checkin per non sovrapporsi o il supproto per creare dei branch – spinoff di progetti). Librerie e tools come Papervision3D, Tweener o AS3corelib, ad esempio, sono ubicati proprio su Google Code godendo da un lato di un hosting di sviluppo e dall’altro di un accesso pubblico per il download dei sorgenti e della documentazione.
Punto importante, poi, è la possibilità – aperto un progetto – di impostare gli accessi e la visualizzazione. Se volete potete proteggere il vostro lavoro o renderlo del tutto privato, invece che pubblico.

Continua...

Adobe Dreamweaver CS4 beta preview

Adobe Labs

Su Adobe Labs sono disponibili le beta di Adobe Dreamweaver CS4 (stiletto), Adobe Fireworks e Adobe Soundbooth! È Possibile installare la beta di Dreamweaver parallelamente a quella esistente, tuttavia sarà possibile eseguire una sola istanza dell’applicazione (o beta CS4 o CS3, ad esempio). Adobe raccomanda di eseguire comunque un backup di tutte le impostazioni, sottolineando che essendo una beta non garantisce nulla su eventuali malfunzionamenti.

Tra le novità più interessanti, a parte l’interfaccia completamente ridisegnata, disponibili in Dreamweaver beta, troviamo:

  • Live View: grazie all’introduzione del motore opensource WebKit (lo stesso usato da Safari e da Adobe AIR) è ora possibile lavorare con codice e anteprima in contemporanea, con una resa WYSIWYG mai vista prima
  • Supporto del code hinting (auto completamento/synopsis) per alcuni dei framework Ajax: jQuery, Prototype e Spry (peccato non sia stato incluso anche Mootools)
  • Integrazione con Subversion! Ed era ora!
  • Supporto (nativo) di Adobe AIR – quindi basta estensioni aggiuntive

Sulla TV Adobe (http://tv.adobe.com) è possibile seguire delle dimostrazioni di queste beta!

Si avvicina, quindi, il momento di un upgrade dell’intera suite…

Continua...

Ottimizzare il caricamento di un sito Web

Grazie ai suggerimenti e ai consigli di Davide Salerno ho cercato di ottimizzare il caricamento di undolog.com, attività che, per questioni di "tempo", avevo sempre rimandato. In realtà non sono riuscito ad applicare tutte le preziose dritte di Davide, tuttavia sono riuscito a dare una bella "ripulita" e ridurre comunque i tempi di caricamento!

Riduzione dei Widget, Badget e Antipixel

La prima operazione che ho fatto è stata quella di ridurre il più possibile il carico prodotto dai vari Widget inseriti nel blog:

  • ho diminuito le righe visualizzate nel Widget di MyBlogLog: da 10 a 5 righe
  • ho eliminato gli antipixel dal BlogRoll
  • la biblioteca di aNoobi mostra 2 libri invece che 5

Continua...

Creare eventi personalizzati in Actionscript 3.0

Creare eventi personalizzati in Actionscript 3.0 è semplicissimo. Usarli, poi, permette di utilizzare il metodo addEventListener() e rendere il nostro oggetto del tutto standard. Se abbiamo creato una classe, ad esempio Bottone, è corretto associare a questa uno o più eventi tramite una apposita classe (derivata dalla classe Event) BottoneEvent. Potremmo realizzare tutti gli eventi che interessano il funzionamento del nostro oggetto: il click, il mouse over, o un qualsiasi altro evento! Definendo anche delle nostre personali costanti. Lo scheletro – generico – di una classe evento personalizzata è:

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
package {
    /*
    ** @name            : BottoneEvent.as
    ** @description     : Classe derivata da Event per gestire un proprio evento personalizzato
    ** @author          : =undo=
    ** @web             : http://www.undolog.com
    ** @email           : g.fazioli@undolog.com
    */
   
    import flash.events.*;

    public class BottoneEvent extends Event {
       
        public static const MIOEVENTO:String       = 'pluto'; // codice qualsiasi, anche 'mioevento' in minuscolo
       
        public var Valore:Number                   = NaN;        
        /*
        ** @name            : BottoneEvent
        ** @description     : constructor
        */

        public function BottoneEvent ( type:String, v:Number, bubbles:Boolean=false, cancelable:Boolean=false ):void {
            super(type, bubbles, cancelable);
            this.Value = v;
        }
       
        /*
        ** @override
        */

        override public function clone():Event    {
            return new KnobEvent(this.type, this.Value, this.bubbles, this.cancelable);
        }
    }
}

Continua...

FIVe3D: effetti speciali su un cubo! In attesa di Flash 10

Molto probabilmente, quando uscirà la nuova versione di Adobe Flash, librerie 3D a “basso livello” come FIVe3D faranno una brutta fine! Tuttavia, prima di “cestinarle”, ecco un esempio di quello che è possibile realizzare (con l’ultima release 2.1):

Loading Flash Player...

Il codice della demo qui sopra è abbastanza articolato, quindi non lo propongo integralmente online. Inserisco, comunque, alcune parti di codice interessanti.

Aggiornamento: per il sorgente clicca qui

Continua...

Adobe Flash: rilasciato il Player 10 in beta e le API Google Maps

Aggiornamento: vedi Come usare Google Maps in Adobe Flash CS4

Aggiornamento: pare che Google si sia sbagliata e invece di scrivere Flex ha scritto Flash! Morale della situazione le API Google Maps sono state rilasciate solo per Flex e NON funzionano in ambiente Flash: a dimostrazione della confusione che questi due “branch” (Flex/Flash) stanno causando! Leggere, a tal proposito, Damn it google get it right! the google map API is for flex not flash!

Continua...

Google Maps: come ottenere Latitudine e Longitudine da un indirizzo

Anche questa volta rispondo ad un commento con un Post, visto il generale interesse. Armando mi chiedeva se era possibile, tramite Google Maps, ottenere Latitudine e Longitudine a partire da un nome di città o di una strada. La risposta è si! Tramite il servizio Google Maps API geocoding service è possibile chiedere direttamente a Google di trasfromare la nostra informazione testuale (stato, città, via) in coordinate geografiche. Potete provare un esempio online direttamente sul sito della documementazione Google.

Continua...



Stop SOPA