'Menu' (senza accento sulla -u, vi prego!) è storicamente una delle chiavi di ricerca più usate su HTML.it, ma ultimamente l'ho vista perdere colpi nella Top 10. Interesse sfumato? Tutto già  visto, tutto già  sentito? A prescindere, io la segnalazione la faccio: DOMscripting powered Panel Bar (qui il post di presentazione, qui la pagina con l'esempio completo e il link allo zip da scaricare con tutto il codice e le immagini usate).

Continua a leggere Just another CSS/JS menu…

Categoria: Scripting

Tags: , ,

Jonathan Boutelle ha iniziato sul suo blog una serie di post dedicati agli AJAX Design Patterns, modelli di interazione basati su questo insieme di tecnologie in grado, rispetto al semplice HTML, di migliorare l'interfaccia di un sito o di risolvere specifici problemi di usabilità .Dopo il primo intervento dedicato ai Read/Write Div (le sezioni editabili come quella del meteto presente sulla home page personalizzata di Google), ha analizzato una soluzione relativa alla costruzione di un modulo di login/registrazione.Si tratta di quella implementata sul sito ZohoCRM, che pur non essendo 100% pure AJAX (non prevede nessuno scambio di dati con il server in modalità  asincrona), presenta comunque aspetti interessanti.Il problema è quello di conciliare il login degli utenti già  registrati con l'invito alla registrazione per i nuovi. Boutelle fa notare che, in genere, si sceglie uno tra due approcci alternativi:Privilegiare i nuovi potenziali iscritti ed evidenziare il form di registrazione, deviando gli utenti già  registrati su un'altra pagina per il loginPrivilegiare gli iscritti, fornendo agli altri un link ad un'apposita pagina di registrazione.Perché, a suo parere, l'idea di ZohoCRM funziona? Perché tiene entrambe le categorie sulla stessa pagina con una soluzione di semplicissima implementazione e senz'altro efficace.

Continua a leggere AJAX che funziona

Categoria: Scripting

Al termine della serie dedicata alle liste di definizione (prima e seconda parte), Alessandro Fulciniti ha proposto un piccolo esperimento: un menu per ristorante strutturato in HTML ricorrendo a questo particolare tipo di lista e definito nella presentazione con i CSS.Su TJKDesign, c'è invece un tutorial che spiega come creare una serie di FAQ con le liste di definizione e Javascript, usato per visualizzare e nascondere la risposta.

Continua a leggere Creare FAQ con le liste di definizione

Categoria: Scripting

Ho parlato poco tempo fa dello scrolling morbido con Javascript. Lo stesso effetto si può ottenere in orizzontale, e in Sliding Lists viene applicato a un mini-sistema di navigazione. Credo si tratti di una versione beta, e la compatibilità  è da verificare (per esempio non va con Opera 8.5), ma potrebbe essere un buono spunto.A proposito, dato che siamo in tema mi piacerebbe lanciare un piccolo sondaggio. Ho salvato tra i miei bookmark due siti che utilizzano lo scrolling soft orizzontale. Il primo è Biok: è fatto in Flash, ma è leggero e piacevole; il secondo è Beca: una singola pagina HTML, tre sezioni principali e un po' di Javascript che degrada perfettamente. Quale preferite?

Continua a leggere Scrolling soft orizzontale

Categoria: Scripting

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