Zimbra è una delle startup legate al cosiddetto Web 2.0 di cui più si è parlato negli ultimi mesi. La sua Collaboration Suite è stata da molti indicata come un modello della tendenza a distribuire il software come servizio web e dell'utilizzo di AJAX per la realizzazione di interfacce complesse, in grado di replicare l'esperienza del desktop.Ne parlo qui riprendendo questo post apparso sul blog della società . L'autore affronta il tema della pesantezza delle applicazioni AJAX, una cosa che può verificare chiunque abbia provato ad usare uno di questi servizi. Non c'è ovviamente da stupirsi se si pensa alla quantità  di codice Javascript che il browser deve caricare. Per Zimbra il peso di questo codice JS, senza compressione, è addirittura di 2Mbyte.La dieta suggerita per rendere l'applicazione più leggera e fruibile è questa:Combinare tutti i file JS in un unico file badando all'ordine di concatenazioneSottoporre il file ad un processo di ottimizzazine con jsmin per rimuovere commenti, spazi bianchi e righe eccedenti (il peso cala del 25/30%)Usare la compressione gzip sul mega-file (il peso questa volta cala del 300/400%)Il post si chiude con un esperimento fatto applicando queste tecniche alla home page di Digg. Da 199246 byte si passa a 70040, le richieste HTTP scendono da 26 a 13.

Continua a leggere Comprimere e ottimizzare Javascript

Categoria: Scripting

L'altro giorno stavo mostrando un prototipo ad una società  per la quale pensavo che AJAX potesse rappresentare un'ottima soluzione. Avevano la necessità  di validare molti form e di popolare textareas e combobox.Volevo allora mostrare come tecniche di remote scripting potevano fare al caso loro. Inserisco il cd con i miei prototipi e lancio i file HTML. Si apre Internet Explorer ma non succede nulla. Nessun file HTML fa quello che deve. Superati i primi secondi di panico chiedo di poter accedere ad Internet e mostrare qualcosa online.Solo a quel punto le cose erano più chiare. I sistemisti avevano disabilitato gli ActiveX nelle Security Settings.Questo banale equivoco mi ha fatto riflettere molto anche perchè non è la prima volta nella mia carriera che vado in una società  e trovo questo settaggio imposto dal reparto dei Sistemi Informativi. In questi scenari è d'obbligo percià fare un passo indietro e tornare a programmare il Remote Scripting con l'uso del vecchio buon IFrame.In fin dei conti, anche se l'oggetto XHR (XMLHttpRequest) espone la possibilità  di accedere agli headers ed ad altri dettagli del protocollo HTTP, a fronte di una maggiore compatibilità  sui browser l'uso dell'IFrame rappresenta ancora una scelta validissima.Nel caso, per esempio, di questa società  dovrà necessariamente perseguire questa strada.Leggiamo quotidianamente post del tipo : Ajax contro Flash, Ajax contro Coldfusion, Ajax contro Godzilla... Ma forse dovrebbe essere AJAX o IFrame per il Remote Scripting ?

Continua a leggere E se fosse AJAX contro il vecchio IFRAME

Categoria: Scripting

Avendo una conoscenza non approfondita delle tematiche relative all'accessibilità , non so se una cosa del genere possa essere davvero utile o semplicemente sensata. Mi limito a segnalare, allora, da questo post di Roger Johansson, due soluzioni che consentono all'utente di personalizzare a suo piacimento i tasti di accesso definiti dall'autore tramite l'attributo accesskey.La prima è una classe PHP (c'è pure la versione ASP) creata da Gez Lemon e Rich Pedley. La seconda (di Jacques Distler) è basata invece su Javascript: navigando fino al footer della pagina con l'articolo potrete verificare direttamente il funzionamento.

Continua a leggere Tasti di accesso personalizzabili

Categoria: Scripting

Negli ultimi giorni gli utenti che navigano con IE avranno notato il layout leggermente scombinato grazie ad una pagina senza titolo che punta al blog e compare nella sezione destra, ovvero quella dei link Technorati. Essendo i dati prodotti direttamente dalle API del servizio non è possibile intervenire con modifiche. Si tratta di un link con testo decisamente lungo e mentre in browser come Opera,Firefox e Safari questo sborda sulla destra della colonna senza influire sull'impaginazione, in IE ha il fastidioso effetto di allargare la colonna che occupa stravolgendo il layout.Di fronte a un problema, realizzare e valutare diverse soluzioni è una buona strategia e allo stesso tempo un buon modo per allenare la creatività . La prima soluzione è senza dubbio l'uso dei CSS: basterebbe una sola regola specificando la larghezza dei list-item che contengono i link "incriminati" e usando la dichiarazione overflow:hidden.C'è un'alternativa ai CSS: l'uso di Javascript. Si presenta senz'altro meno ortodossa dei CSS, ma è un buon esercizio di DOM scripting. (more...)

Continua a leggere Tagliare i link con testo troppo lungo

Categoria: Scripting

Tags: ,

In poco più di due anni mi sto avvicinando ai cento articoli, e ormai credo di aver sviluppato un modo consolidato di procedere: prima nasce l'idea, viene definita meglio, poi sviluppo gli esempi, una buona fase di test e in ultimo scrivo l'articolo o la serie. A volte capita che nella fase di definizione e valutazione di un'idea, questa venga abbandonata ancora prima della codifica HTML, CSS e Javascript.Difficilmente mi è capitato di abbandonare un articolo dopo la fase di codifica e soprattutto superati i test di compatibilità  con i browser. C'è stato un caso recentissimo però, e parlarne è un buon modo per riallacciarmi a questo post di Marco Casario sull'usabilità  di AJAX che condivido pienamente. (more...)

Continua a leggere Un template in PHP e CSS (quasi) parte V

Categoria: Scripting

àˆ risaputo che l'oggetto XMLHttpRequest è una delle basi di AJAX. àˆ altresì risaputo che la sua introduzione si deve a Microsoft, che per prima lo implementà su Internet Explorer 5 come oggetto ActiveX. Mozilla, Safari e ultimamente Opera, invece, implementano una versione nativa dell'oggetto.àˆ questo il futuro anche per IE 7. Dal blog del team di sviluppo:I'm excited to mention that IE7 will support a scriptable native version of XMLHTTP. This can be instantiated using the same syntax across different browsers and decouples AJAX functionality from an ActiveX enabled environment.Tradotto in codice: if (window.XMLHttpRequest){           // If IE7, Mozilla, Safari, etc: Use native object           var xmlHttp = new XMLHttpRequest() } else { if (window.ActiveXObject){           // ...otherwise, use the ActiveX control for IE5.x and IE6           var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");           } }

Continua a leggere XMLHttpRequest su Internet Explorer 7

Categoria: Scripting

jQuery

23 Jan

Ci sono davvero moltissime librerie Javascript, ma la recentissima JQuery sembra molto promettente per diversi motivi. Intanto, si presenta con un programma molto ambizioso :). Leggiamo sulla home page che non vuole offrire l'ennesimo framework con cui realizzare effetti mirabolanti con AJaX, ma semplicemente 'cambiare il modo in cui scrivi il tuo Javascript'.Ma torniamo ai punti di forza. Il primo è la compattezza del codice: credo che gli script compatti (al di sotto di 10Kb per me è l'ideale) siano decisamente preferibili: il più delle volte il peso, pur essendo proporzionale alle features è inversamente proporzionale alla facilità  di utilizzo. Lo dimostra ad esempio il successo della piccola e potente Moo.fx.Il secondo è la versatilità : chi ha un minimo di conoscenze di javascript e OOP sa quanto sia leggibile e intuitiva una riga del genere: $("p.surprise").addClass("ohmy").show("slow"); Il terzo motivo è la documentazione e la notevole quantità  di esempi, tanto preziosi quanto rari in molte delle altre librerie Javascript esistenti.

Continua a leggere jQuery

Categoria: Scripting

Ogni giorno entro sempre più in profondità  nelle tematiche che riguardano lo sviluppo di applicazaioni web con tecniche tipo AJAX e con il Javascript Integration Kit per Flash. E devo dire che si tratta di un viaggio davvero interessante.Mi sono reso conto che una della maggiori cause di perdita di tempo nella fasi di sviluppo e rilascio è sicuramente data dall'inefficienza delle tecniche che è possibile utilizzare per il debug. Intendo in un futuro non troppo prossimo dedicare un post proprio all'argomento, per ora mi limito a segnalarvi e consigliarvi (dato che l'ho già  testata) questa estensione per Firefox : FireBug.Si tratta di un'estensione che ingloba e sostituisce 3 differenti utilities di Firefox : DOM Inspector, Javascript Console e HTTP Request Sniffer. FireBug rappresenta un grosso passo avanti per ottimizzare i tempi di debug delle applicazioni in quanto permette di "spiare" le richieste dell'oggetto XMLHttpRequest, di intercettare errori Javascript e tante altre cose. Insomma, da non perdere!

Continua a leggere Debug con FireBug

Categoria: Scripting

Non c'è nulla che ti fa crescere di più dal punto di vista professionale che il digitare codice e il testare applicazioni reali.In questo periodo ho l'occasione di partecipare alla realizzazione di progetti che usano tecnologie come AJAX (si lo so che parlare di tecnologia non è precisamente corretto) o il Flash/Javascript Integration kit. In questo post voglio concentrarmi non tanto sulle tematiche tecniche di questi tool, quanto sull'aspetto dell'usabilità  vista dalla parte degli utenti finali.Dopo migliaia di righe di codice e di prove portate all'eccesso ho cercato di stilare, per ora, una semplice lista di parametri a cui ogni sviluppatore, secondo me, dovrebbe prestare attenzione quando crea applicazioni web con Ajax. Una lista che non intende essere assolutamente esaustiva ma vuole invece rappresentare un punto di incontro e condivisione di pareri ed esperienze. (more...)

Continua a leggere L’usabilità  in Ajax e nel Flash/Javascript Integration Kit

Categoria: Scripting

Tra le molteplici soluzioni di miniature e ingrandimenti di foto e immagini, quelle che usano l'ingrandimento nella stessa pagina sono forse le più efficaci e per diversi motivi: riducono i tempi di interazione con l'utente, restano accessibili con Javascript disabilitato e soprattutto non necessitano del tasto indietro della navigazione del browser.Un po' di tempo fa ho presentato un piccolo script per avere una galleria con ingrandimento nella stessa pagina. Recentemente, poi, è comparso LightBox, una soluzione leggermente differente ma altrettanto notevole. La cosa interessante è che si può applicare a qualsiasi immagine (basta aggiungere un attributo nell'HTML), che compare un'icona di attesa durante il caricamento e che l'ingrandimento compare a centro pagina, indipendentemente dalla larghezza dello schermo.A parer mio l'unico neo dell'esempio è che la pagina si oscura un po' troppo quando viene mostrato l'ingrandimento, ma il CSS dovrebbe essere facilmente modificabile e adattabile ai propri gusti.

Continua a leggere LightBox, ingrandimenti nella stessa pagina

Categoria: Scripting