Categoria ‘Sviluppo’


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

Google AJAX Language API: tutorial sul funzionamento

Rispondo, con questo post, alla richiesta di Andrea su come inserire il traduttore di Google nel proprio web. Esistono vari modi per usufruire dei servizi di traduzione automatica messi a disposizione da Google e non solo. Possiamo usare Plugin scritti da terzi, un semplice script Javascript preconfezionato da Google stessa o imparare ad usare le API, cioè una serie di funzioni richiamabili – come vedremo – in vari modi.

Plugin

Su questa soluzione non mi dilungo, in quanto credo non sia propriamente attinente alla richiesta di Andrea, se ho compreso bene. Inoltre è una soluzione sostanzialemente valida solo per i Blog e non per un uso personalizzato e generico. Posso solo segnalare, per gli utenti WordPress, Global Translator, forse il più semplice, funzionale e diffuso Plugin di questo tipo.

Script preconfezionato da Google

Il modo più semplice per tradurre il proprio sito web o il proprio Blog è quello di inserire un semplice script Javascript fornito da Google stessa. Basta andare sul sito translate.google.com e cliccare sulla scheda ‘Strumenti‘. Da questa pagina è possibile preimpostare le funzioni di traduzione o lasciare quelle di default. Lo script è molto semplice:

1
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&amp;up_source_language=it&amp;w=160&amp;h=60&amp;title=&amp;border=&amp;output=js"></script>

e come risultato si ottiene:

Google Translate

Continua...

AS3Corelib: libreria per codifica MD5, SHA1 e JPG/PNG Encoder

AS3corelib project è una libreria scritta in ActionScript 3 che contiene una serie di classi e utilities per estendere lo sviluppo con ActionScript 3. È incluso il supporto per la codifica MD5 e SHA 1, encoders per JPG e PNG, e la serializzazione JSON per stringhe, numeri e Date APIs. Questa libreia risulta davvero utile nello sviluppo di applicazioni Flash e riesce ha dare il meglio di sè in accoppiata con Adobe AIR!

Dei vari package presenti i più interessanti sono com.adobe.crypto e com.adobe.images. Il primo permette di gestire le codifiche MD5, SHA1, SHA224 e SHA256, in modo davvero semplice: tramite il metodo hash() si passa la stringa-sorgente e viene restituita la codifica! Il pacchetto images permette addirittura di ottenere l’encoder JPG o PNG a partire da una semplice bitmap Flash!

1
public function encode(image:BitmapData):ByteArray

Il risultato ByteArray rappresenta l’encoding JPG che, Flash permettendo, può essere salvato direttamento su disco! Per saperne di più potete seguire questo tutorial video su come memorizzare un’immagine PNG – a partire da un oggetto video – su disco tramite as3corelib.

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

Google Translate si aggiorna

Proprio pochi giorni fa avevo scritto un Post sulle traduzioni automatiche, affrontando la questione dei siti e/o blog multilingua dal mio punto di vista di sviluppatore. Ho ricevuto, infatti, alcuni commenti interessanti che sottolineano i limiti delle tecnologie attuali. In effetti i sistemi che permettono di tradurre “al volo” le nostre pagine Web, come Google Translate, non producono assolutamente un risultato paragonabile a quello umano, a chi – insomma – di mestiere svolge la professione di traduttore. Inoltre non esiste una specializzazione di questi sistemi pubblici: tradurre un testo scientifico in inglese e diverso da tradurre un romanzo in inglese o un manuale informatico e via dicendo. Questo, con una traduzione “umana” sappiamo che non accade e i traduttori professionisto sono proprio specializzati in ben determinati ambiti.

Tuttavia, come ho risposto (in privato essendo la mail corposa) a Leonardo, ci sono casi in cui un traduttore automatico, soprattutto con l’avvento dei Blog, permette di abbattere tempi e costi consentendo, nei limiti dei sistemi di traduzione automatica attuali, quantomeno di comprendere nella propria lingua ciò che è scritto sul Web.

image Proprio in questi giorni Google Translate ha aggiornato il suo sistema di traduzione online, aggiugendo il supporto per molte, se non tutte, le lingue del pianeta: dal cinese, al greco al giapponese e molte altre. Anche l’interfaccia si è rinnovata proponedo dei menu a tendina per rendere più semplice la scelta della lingua sorgente e quella di “traduzione”.

Continua...

Argomenti variabili e di default in Javascript, Actionscript e PHP

Chi sviluppa sa bene che una delle caratteristiche delle funzioni (function () ) è quella di avere o meno degli argomenti di input. Può capitare, a volte, di dover scrivere una funzione che, in base ai parametri di input, si comporta in modo differente (in programmazione OO troviamo questo comportamento indicato come poliformismo). I parametri variabili (varargs), introdotti già all’epoca del C e presenti di default nella classica dichiarazione del main:

1
int main(int argc, char *argv[]);

Continua...

Papervision3D: gestire le Bitmap come in FIVe3D

Partendo dall’esempio mostrato in FIVe3D: trattare le Bitmap, vediamo come realizzare il medesimo effetto utilizzando Papervision3D 2.0 (Great White), così da proseguire ad analizzare il funzionamento di questa beta Great White.

Loading Flash Player...

Continua...

FIVe3D: trattare le Bitmap

Con la release 2.1 di FIVe3D è possibile manipolare anche oggetti Bitmap, in modo da superare l’iniziale limite di questa libreria del solo vettoriale. Se inseriamo una Bitmap in libreria e la esprotiamo in modo da poterne creare un’instanza dinamica tramite Actionscript, diventa facile creare un oggetto Bitmap3D e ruotarlo a nostro piacimento:

Loading Flash Player...

Continua...

FIVe3D: core 3D per Actionscript 3.0

FIVe3D (Flash Intercative Vector-based) è un’interessante progetto reazlizzato da Mathieu Badimon. Ne avevo preso visione già qualche tempo fa, quando Actionscript 3.0 ancora non era disponibile. È di questi giorni, invece, un aggiornamento del package alla versione 2.1.

Loading Flash Player...

Continua...

Flash 10 Astro: 3D nativo vs Papervision3D

Adobe ha annunciato da tempo alcune nuove features (Hydra per i filtri grafici evoluti e una migliore gestione del testo) che saranno presenti nella prossima release di Flash. In particolare ha destato interesse l’introduzione del 3D (l’asse Z), la capacità quindi di Flash di manipolare oggetti in un mondo tridimensionale. La stessa Adobe precisa che si tratta in realtà di un 2.5D, come spesso viene indicato, una specie di “simulazione” di un vero e proprio mondo tridimensionale. Infatti si può ruotare un simbolo Flash introno all’asse z ma, nonostante questo, il simbolo rimane piatto nello spazio tridimensionale! Un po’ quello che accade quando si distorce una bitmap in Photoshop! Tutto questo, quindi, non ha niente a che fare con progetti come Papervision3D, Away3D, Sandy e molti altri, che contengono tutta una serie di features (camera, scene, texture, etc…) assenti “nell’Astro nascente”. In sostanza Adobe non vuole assolutamente sovrapporsi a progetti 3D di terze parti ma solo fornire uno strato nativo per migliorare le prestazioni di librerie 3D già esistenti.

Comunque sia la cosa importante è che Adobe sembrerebbe orientata ad introdurre queste funzionalità tridimensionale ad un alto livello, non aiutando affatto librerie complete e complesse come Paparevision3D. Da tempo, infatti, si usano sostanzialmente due tecniche per espandere le funzionalità di Flash: API di basso livello e API di alto livello.

Le API di basso livello vengono normalmente scritte in C/C++ e fanno parte del core di Flash, compilate quindi all’interno del Player. Questo metodo se da un lato garantisce una maggiore velocità di esecuzione, dall’altro aumenta le dimesioni del Player Flash.

Le API di alto livello sono invece scritte in Actionscript e non appartengono al core nativo. In altre parole sono del tutto simili a librerie che potremmo scrivere noi, con la differenza che vengono fornite direttamente da Adobe. Come accade con il rilascio di Flash 5, la prima introduzione dell’oggetto XML fu realizzata completamente in Actionscript, creando non pochi problemi di performance!
Il vantaggio è che librerie di questo tipo vengono compilate solo quando necessarie e scaricate quindi all’interno del file SWF. Come accade oggi con l’oggetto Tween (vedi fl.motion.* o fl.transition.*) interamente scritto in Actionscript (anche per questo sono nati progetti paralleli come Tweener (caurina.transitions.Tweener) o TweenerMax.
Proprio per questo motivo la comunità Papervision non è del tutto contenta della scelta di utilizzare API di alto livello, in pratica dello stesso “livello” di Papervision3D. Questo, infatti, potrebbe non influire sulle future performance di librerie 3D.

Comunque andrà a finire, la cosa importante è che Papervision3D non è morto, anzi!

Continua...



Stop SOPA