Categoria ‘Sviluppo’


FireFTP: un client FTP per FireFox

logo128 Le cose semplici, a volte, funzionano meglio di quelle apparentemente migliori ma complesse. Personalmente uso spessissimo applicazioni FTP, sia come client desktop veri e propri che come strumenti presenti all’intero di altre applicazioni: come Adobe Dreamweaver CS3 o UltraEdit. Come client vero e proprio ho acquistato, da tempo, FTP-Voyager, arrivato adesso alla versione 14.1. Nonostante l’ottima qualità del prodotto, FTP-Voyager si pianta quando scorre una cartella con molti file. Mi sono trovato, infatti, nella spiacevole situazione di dover eseguire un backup per un cliente che aveva collezionato una quantità nauseabonda di file all’interno di una cartella. Per fortuna ho avuto l’idea di installare questa estensione per FireFox (già consigliata da Yuma) che ha risolto il problema, altrimenti avrei dovuto “zippare” la cartella e tirarla giù come file.

FireFTP permette delle configurazioni minimali ma sufficienti nella maggiornza dei casi. Ottima la possibilità di eseguire un confroto tra file e cartelle remote, anche se in questa versione il confronto avviene esclusivamente sulla presenza o meno del file.

Insomma, FireFTP non sarà il client ftp definitivo ma averlo può essere davvero molto utile, visto poi che è gratuito a differenza di FTP-Voyager!

Continua...

EditArea: un rich Sourcecode Editor in Javascript

EditArea è un modo diverso di utilizzare le funzioni di editing online permesse dall’HTML. Questa tecnica, utilizzata il più delle volte per creare Editor WYSIWYG, viene sfruttata in questo caso per fornire un vero  e proprio editor di codice.

EditArea

Un normale campo TextArea viene trasformato in un vero e proprio editor con la possibilità di formattare il testo, cercare e sostituire parole e ottenere una colorazione del codice in tempo reale. Tra le sue caratteristiche notiamo:

  • Integrazione semplicissima tramite un solo script Javascript e una sola chiamata ad una funzione di patch.
  • Supporto della tabulazione
  • Cerca e sostituisci con regexp
  • Supporto della colorazione del codice per: PHP, CSS, Javascript, Python, HTML, XML, VB, C, CPP, Pascal, Basic, Brainf*ck
  • Auto-indentazione delle nuove linee
  • Numerazione linee di codice
  • Supporto multilingua: Croato, Danese, Inglese, Francese, Tedesco, Italiano, Giapponese, Polacco, potoghese)
  • Supporto per gzip
  • Multiple istanze
  • Fullscreen
  • Ridimensionamento della finestra in tempo reale
  • Possibilità di estendere le caratteristiche tramite plugin
  • Save e Load callback
  • Lavora con prototype e mootools

Un esempio di come usarlo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
editAreaLoader.init({
                id: "exemple_3" // id of the textarea to transform      
                ,start_highlight: true  
                ,font_size: "8"
                ,font_family: "verdana, monospace"
                ,allow_resize: "y"
                ,allow_toggle: false
                ,language: "fr"
                ,syntax: "css"  
                ,toolbar: "new_document, save, load, |, charmap, |, search, go_to_line, |, undo, redo, |, select_font, |, change_smooth_selection, highlight, reset_highlight, |, help"
                ,load_callback: "my_load"
                ,save_callback: "my_save"
                ,plugins: "charmap"
                ,charmap_default: "arrows"                  
});

Continua...

Wacom: editing grafico con le tavolette-display 2.0

CintiQ

Una rivoluzione, finalmente, nel campo dell’editing grafico. Wacom presenta un’interessante soluzione che fonde una tavoletta grafica con un sistema touch-screen. Avendo anch’io una tavoletta Wacom, che ormai uso quotidianamente al posto del mosue, apprezzo moltissimo questo passo avanti (la prossima spesa che farò ;) ). Attualmente io uso una Intuos3 formato A5, perfettamente integrata sia in Windows Vista che nei software di sviluppo che uso, come Adobe Photoshop CS3 e Flash CS3. Spesso mi è capitato anche di usarla semplicemente per scrivere una mail, grazie al software di riconoscimento della calligrafia presente in Windows Vista:

Riconoscimento calligrafico

La nuova serie CintiQ, Interactive Pen Display, si presenta con caratteristiche davvero interessanti:


1.024 livelli di sensibilità alla pressione

Sensibilità all’inclinazione
Inclinate il dispositivo di immissione dati in qualsiasi direzione per creare tratti di penna, pennello e gomma dall’effetto naturale.

Riconoscimento della rotazione
Alcuni dispositivi di immissione dati, ad esempio il nuovo Art Marker, sono ruotabili attorno al proprio asse: grazie al riconoscimento della rotazione, il Cintiq è in grado di rilevare questa rotazione e, nelle applicazioni appropriate (ad esempio in Painter 9) di trasformarla in pennellata ruotante.

Tool ID
Con il Tool ID (ID strumento) è possibile programmare e configurare individualmente ogni dispositivo di immissione input Cintiq per qualsiasi software. Le impostazioni memorizzate vengono attivate automaticamente nel momento in cui viene avviato il software.

ExpressKeys
Gli ExpressKeys sono una serie di tasti disposti lungo il lato sinistro e il lato destro della superficie attiva. Potete assegnare agli ExpressKeys le vostre combinazioni di tasti o macro preferite, dopodiché potrete dimenticare la tastiera.

Touch Strip
Con la nuova Touch Strip è possibile eseguire operazioni spostando il dito direttamente sulla tavoletta, come sul touchpad di un computer notebook: ad esempio ingrandire e ridurre le dimensioni delle immagini oppure scorrere documenti o editor PDF spostando semplicemente il dito.

Gomma
Correggere gli errori non è mai stato così facile: basta capovolgere la penna e cancellare!

Senza cavo né batteria
Tutti i dispositivi di immissione dati funzionano senza cavo e senza batteria: la necessaria alimentazione viene fornita dalla tavoletta.

Installazione Plug & Play
Il sistema Cintiq si installa facilmente e rapidamente ed è compatibile con tutte le vostre applicazioni software.

Tecnologia della penna Wacom
La tecnologia delle penne senza cavo e senza batteria sinonimo di un prodotto affidabile e di alta qualità, che richiede un assoluto minimo di manutenzione. Il tecnologia garantisce un alto livello qualitativo dei prodotti dell’azienda leader nel settore delle soluzioni di immissione dati basate su penna.

Wacom CintiQ

Questa soluzione potrebbe rappresentare il futuro dell’interazione tra uomo e PC, un fantastico ibrido tra un touchscreen e una tavoletta, che segue la direzione giusta a vantaggio dell’usabilità e accessibilità. L’era del mouse è davvero al tramonto?

Continua...

Lettera a Babbo Adobe: Flash CS3, qualche baco e difetto

Carissimo Babbo Adobe,
nonostante abbia già ricevuto due patch per Flash CS3 (versione 9.0.2), alcuni problemini nel suo utilizzo sono apparsi come in tutti i software del mondo, soprattutto in questa release che di cambiamenti ne ha subiti davvero tanti.

  • L’editor ActionScript, ad esempio, risulta lento e scattoso! Considera, caro Babbo Adobe, che la mia macchina ha 8Gbyte di Ram e un Intel core duo quad!
  • Durante la formattazione automatica, righe di codice come questa qui sotto, vengono “fraintese” e riformattate male:
1
mybtn.addEventListener (MouseEvent.CLICK, function(e) { myfunc(); } );

Aggiungendo parentesi graffe dove non andrebbero:

1
2
mybtn.addEventListener (MouseEvent.CLICK, function(e) { myfunc(); } );
}; // < -- chi te l'ha detto?!

Quindi meglio usare la sintassi:

1
conn_btn.addEventListener (MouseEvent.CLICK, _onClick );
  • Le finestre docket, almeno nell’implementazione su Windows Vista, ogni tanto spariscono sotto altri pannelli… La finestra di Aiuto, la guida insomma, crea qualche problema quando si prova un progetto. Quest’ultimo, infatti, scompare dietro agli altri pannelli… mistero! Tuttavia questo difetto, come altri, non è sempre riproducibile.
  • Anche i componenti hanno strani comportamenti: a volte vengono mostrati, in design-time, come rettangoli bianchi… continuando comunque a funzionare a runtime!
    Missing Components
  • L’anterprima Scale9Grid, indicata come nuova nella documentazione e in grado di mostrare gli oggetti ridimensionati correttamente anche a design-time, continua ad essere afflitta dagli stessi problemi della precedente versione! Peccato!
    Scale9Grid

Comunque a Natale sia tutti più buoni… quindi, caro Babbo Adobe, aspettiamo con ansia futuri aggiornamenti.

Continua...

FreeTextBox: HTML editor WYSIWYG Javascript per ASP.NET

image FreeTextBox è un editor HTML scritto in Javascript, per ASP.NET. Questa versione, la 4.0 Beta 1, è compatibile con IE, Mozilla e FireFox su tutti le piattaforme. Come altri editor (vedi: Editor WYSIWYG per il Web) permette di impostare il suo aspetto e gli strumenti. Nonostante sia per ASP.NET, framework da me non trattato, lo segnalo per la sua gradevolezza. Tuttavia, peccato, viene fornito in due versioni: una gratuita e una a pagamento!

image

Continua...

Flash CS3: la nuova gestione degli eventi

Finalmente con ActionScript 3.0 non abbiamo più due diverse gestioni di eventi come accadeva prima di ActionScript 2.0 (vedi: Gestione degli eventi: similitudini tra Flash e Javascript). Il metodo addEventListener(), onnipresente nella nuova architettura, permette di gestire in modo nuovo e straordinariamente pulito tutti gli eventi possibili, anche quelli personali. La nuova organizzazione in package permette di importare gli eventi che ci servono e trattarli tutti allo stesso modo:

1
2
3
4
// Events
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.events.Event;

Continua...

Flash CS3: TextField.appendText()

Flash CS3 ha davvero tante novità, tra cui quella “curiosa” di indicare al momento della compilazione alcuni consigli sulla scrittura del codice. Questo accade, ad esempio, quando abbiamo a che fare con gli oggetti TextField. Mi è capitato di dover aggiungere una stringa alla fine di un campo TextField, con la classica notazione:

1
mioTextField_txt.text += "Stringa aggiunta";

Ma ecco che ActionScript 3.0, al momento di compilare il filmato, mi avverte (Warning) – o consiglia:

Warning: 3551: L’aggiunta di testo a un’istanza TextField mediante += è spesso un’operazione più lenta rispetto all’uso del metodo TextField.appendText().

Fantastico! Andiamo a vedere infatti la SYNOPSIS del metodo appendText() che effettivamente dice:

Aggiunge la stringa specificata dal parametro newText alla fine del testo del relativo campo. Questo metodo è più efficiente rispetto a un’assegnazione addizione (+=) applicata a una proprietà text (ad esempio <strong>someTextField.text += moreText</strong>), in particolare nel caso di un campo di testo con una quantità di contenuto significativa.

Ci fidiamo? Per sicurezza verifichiamo:

1
2
3
4
5
6
7
8
9
import flash.utils.getTimer;

var i:uint=0;
var s:int = getTimer();
for(i; i < 10000;i++) {
    text_txt.text += "Ciao";
}
var f:int = getTimer();
trace(f-s);

Tempo: 9360 – sulla mia macchina, in debug mode. Proviamo allora come consigliato dal compilatore:

1
2
3
4
5
6
7
8
9
import flash.utils.getTimer;

var i:uint=0;
var s:int = getTimer();
for(i; i < 10000;i++) {
    text_txt.appendText ("Ciao");
}
var f:int = getTimer();
trace(f-s);

Tempo: 8415 ;)

Niente di eccezionale… tuttavia è vero! Il metodo appendText() è più rapido e performante dell’operatore pre-incrementale (+=). Come mai? Il motivo più ovvio è il seguente: l’operatore (+=) agisce su qualsiasi tipo di dato. Inoltre in un linguaggio OO questo operatore non è strutturato come nel semplice C ma è “oggettato”. In C++, ad esempio, è possibile sovrascrivere (override) tale operatore in quanto facente parte della struttura ad oggetti del linguaggio stesso. In definitiva appendText() è più rapido in quanto il suo obiettivo è quello di “appendere” una stringa e di conseguenza non si fa tante “domande” al suo interno. L’operatore (+=), invece, deve funzionare per qualsiasi tipo di dato e quindi non è ottimizzato per le stringhe. In C, al contrario, l’operatore (+=) è una funzione a basso livello e sarà sempre più rapida di una chiamata ad una funzione.

Continua...

Flash CS3: comunicazione con un Web Server

ActionScript 3.0 introduce tutta una serie di formidabili strumenti di comunicazione, alcuni totalmente nuovi, altri rivisitati e migliorati rispetto alla precedente versione di ActionScript. Cominciamo a vedere come cambia il modo di interagire con un Web Server nel caso di una semplice comunicazione tra Flash e una pagina PHP con risposta in XML. Prima di tutto l’oggetto XML non esiste più! In ActionScript 3.0 sono stati introdotte nuove classi, alcune delle quali dedicate alla “retrocompatibilità”.

Nota: la classe XML (insieme alle classi correlate) di ActionScript 2.0 è stata rinominata XMLDocument e spostata nel pacchetto flash.xml. È inclusa in ActionScript 3.0 al fine di assicurare la compatibilità con le versioni precedenti.

In ActionScript 2.0 la comunicazione con un Web Server veniva spesso risolta sfruttando l’accoppiata degli oggetti LoadVars e XML, usando il metodo sendAndLoad() dell’oggetto LoadVars (vedi: Flash: LoadVars e XML per inviare dati in POST). Ora le cose cambiano, ma basta solo abituarsi ai nuovi nomi ed oggetti. Come indicato nel manuale, infatti:

Continua...

Tunneling e proxy server per Ajax e non solo

A causa della sua capacità di comunicare con il server, l’oggetto XmlHttpRequest (XHR), usato nella tecnologia Ajax (acronimo di Asynchronous JavaScript and XML, la cui pronuncia dovrebbe essere “egiacs” anche se noi italiani preferiamo “aiacs”), ha un blocco di protezione che gli impedisce di eseguire richieste esterne al dominio in cui opera. Questa protezione è necessaria per impedire Injection Javascript (tecniche di “iniezione” di codice estremamente pericoloso con lo scopo di violare il sistema) di svariato tipo, con l’obiettivo ultimo di “irrompere” nel sistema.
Questo limite è oggi tenuto in seria considerazione e si sta pensando, in qualche modo, di risolverlo – direttamente nell’oggetto XmlHttpRequest - senza pregiudicare la sicurezza (vedi anche: Third proposal for cross-site extensions to XMLHttpRequest ).

Comunque sia la situazione oggi è la seguente:

XHR

Continua...

Creare un fiocco di neve in Flash

Alcuni lettori mi hanno chiesto come è stato creato il fiocco di neve, così realistico, del Widget natalizio. Chi ha scaricato il sorgente probabilmente già lo sa… comunque è stato davvero semplice. Prima di tutto ho selezionato lo Strumento Pennello in Flash ed ho disegnato un punto.

Fiocco di neve Fiocco di neve

Ho trasformato questo in un simbolo ed ho applicato due effetti nella giusta sequenza: smussatura e sfocatura:

Fiocco di neve Fiocco di neve

Il risultato è stato: Fiocco di neve

A questo MovieClip (simbolo) ho associato una semplice classe CNeve, che crea di fatto l’intelligenza del fiocco stesso:

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
class CNeve extends MovieClip {
    private var _interval;
    private var _maxy:Number;
    //
    function CNeve() {
        _interval = setInterval(this, "_move", 25);
        _maxy = Math.round((Stage.height+256)/2)+_getRndRange(-20, -7);
    }
    //
    private function _getRndRange(min:Number, max:Number):Number {
        var randomNum:Number = Math.floor(Math.random()*(max-min+1))+min;
        return randomNum;
    }
    //
    private function _move() {
        _y += _getRndRange(1, 5);
        _x += ((_getRndRange(-50, 50))>0) ? 1 : -1;
        _rotation += _getRndRange(1, 5);
        if (_y>_maxy) {
            clearInterval(_interval);
        }
        updateAfterEvent();

    }
}

Il metodo _move() contiene l’intelligenza del fiocco, ovvero la funzione di caduta, estremamente semplice. Variando la funzione randomica _x += ((_getRndRange(-50, 50))&gt;0) ? 1 : -1;, ad esempio inserendo un _getRndRange(-550, 50), si può aggiungere un effetto effetto vento, cioè i fiocchi cadono con una pendenza particolare. In particolare si possono mandare i fiocchi a destra e a sinistra usando un codice di questo tipo:

1
_x += ((_getRndRange( _getRndRange(-350, -50), _getRndRange(50, 350) ))>0) ? 1 : -1;

La rotazione (_rotation += _getRndRange(1, 5);), poi, conferisce un ulteriore dettaglio al fiocco stesso.
Quando creo un fiocco (vedi funzione creaFiocco() più sotto) ho aggiunto anche un alpha=90 e uno scale randomico, per avere fiocchi di neve di diverse dimensioni.

1
2
3
4
5
6
7
8
9
10
11
12
// crea fiocco
function creaFiocco() {
    var s = randRange(20, 100);
    var x = randRange(-Math.floor((Stage.width - 320) / 2), Math.round((Stage.width + 320) / 2));
    var y = -Math.floor(((Stage.height - 256) / 2)) - 10;
    c_mc.attachMovie("neve","neve_" + index,index,{_x:x, _y:y, _xscale:s, _yscale:s, _alpha:90});
    index++;
    if (index > 1000) {
        index = 1;
        c_mc = createEmptyMovieClip("c_mc", 2);
    }
}

E questo è tutto… ;) Dimenticavo… Auguri a tutti e Buone feste… ;)

Continua...



Stop SOPA