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 è:
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…
Continua...
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <select name="event-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'>
<option value="">Seleziona una categoria </option>
<?php
$foo = ( (is_category())?(single_cat_title('', false)):"" );
$categories = get_categories('orderby=name&hierarchical=0'); $option = '';
foreach ($categories as $cat) {
$option .= '<option '.( ($cat->cat_name == $foo)?"selected":"" ).' value="/category/'.$cat->category_nicename.'">';
$option .= $cat->cat_name;
$option .= ' ('.$cat->category_count.')';
$option .= ' </option>';
}
echo $option;
?>
</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.
Continua...
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...
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:
Tramite le due manopole potete variare il numero di colonne (il modulo) e il numero totale degli elementi, sfruttando l’algoritmo di sopra.
Continua...
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...
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...
Ultimi Commenti
Giovambattista Fazioli: @Nik: Sono contento! In bocca al lupo dunque!!
Nik: Lunedì ho l’esame di informatica su java, grazie mi sei stato utilissimo, il libro che ho era poco chiaro...
Marco: Ti ringrazio moltissimo, mi hai illuminato
ho risolto impostando [cc_objc] //OptionViewController.m -...
Giovambattista Fazioli: @Marco: Ti consiglio un approccio credo più corretto. Se hai eseguito il subclass del tab...
luigi: molto chiaro e semplice devo ammettere che anche scrivendo da un pà difficilmente uso delegati creati da...