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

Partiamo dalla demo, in cui il Flash/Javascript Integration Kit è stato usato per migliorare le funzionalità  di un semplice form HTML.Per scaricare il sorgente dell'esempio e per i dettagli sull'implementazione non posso che rimandarvi al solito, splendido articolo di Particletree.

Continua a leggere Flash/Javascript Integration Kit

Categoria: Scripting

Molti di voi conoscono il menu a mini-tab reso popolare da Dan Cederholm. Focus Slide Navigation è una variante 'dinamica' di quel tipo di menu realizzata da Stephen G. Clark con l'aggiunta di un pizzico di Javascript.

Continua a leggere Mini-tab… animate

Categoria: Scripting

Lo scrolling "soft" è un effetto che trovo molto accattivante. Inoltre, si basa su un ausilio che ritengo indispensabile su pagine lunghe o con molto testo: le ancore interne, cioè quei link che permettono la navigazione interna alla pagina.Secondo me, è uno di quei casi in cui Javascript contribuisce a migliorare l'usabilità  senza intaccare l'accessibilità  del contenuto o la navigabilità . Infatti, le ancore restano accessibili anche con Js disabilitato e lo scrolling soft aiuta l'utente a capire che si sta spostando all'interno dellla stessa pagina. Sono diverse le risorse che offrono script già  pronti e/o tutorial per ottenerlo. In ordine di tempo, dal più recente: Scroll your internal links smoothly di Valerio Proietti, A (slightly) better technique for "Back to Top" links di Dave Lindquist, Make Internal Links Scroll Smoothly with JavaScript di Stuart Landgridge (qui l'esempio, con la versione aggiornata dello script) e infine Scroll window di Travis Beckham.

Continua a leggere Scrolling morbido con Javascript

Categoria: Scripting

Negli ultimi tempi le animazioni sulle pagine web stanno tornando di moda. Non si tratta né di Flash, né di gif animate, né di marquee né tantomeno di Javascript della "vecchia scuola", ma di Javascript principalmente basato sul DOM e gli eventi.Sono diverse le librerie moderne per ottenere animazioni efficaci: Script.aculo.us, Moo.fx, Rico e la recente FACE, solo per fare alcuni nomi. Se vi siete sempre chiesti come sia possibile realizzare effettioni simili e avete un pizzico di conoscenze di Javascript, ecco due ottimi tutorial: il primo è An Introduction to Javascript Animation; il secondo, in due parti: Javascript Animation - Part 1 e Javascript Animation - Part 2.

Continua a leggere Animazioni con Javascript

Categoria: Scripting

Cosa sono? GIF animate da usare in un'applicazione web per indicare che l'applicazione stessa sta in quel momento svolgendo una certa attività . Esempio: inserire record in un database.La loro popolarità  è in crescita grazie al boom di AJAX, e non è un caso. Eliminando il refresh della pagina, diventa fondamentale fornire all'utente un'indicazione chiara in termini di feedback, dare il senso che in base all'input fornito 'qualcosa sta accadendo'. Su questo sito potrete scaricarne un po' da inserire nei vostri progetti.

Continua a leggere Indicatori di attività 

Categoria: Scripting

Tags: ,

Dopo le notissime script.aculo.us e moo.fx ecco FACE (Faruk's Animated CSS Enhancements), una recentissima libreria per ottenere animazioni ed effetti dinamici con Javascript.Dalle parole dell'autore Farouk Ates, che tra l'altro ha introdotto l'uso di FACE nel suo recente redesign: FACE è un modo semplice per aggiungere brio e interattività  ai siti web senza la necessità  di usare Flash. Completamente accessibile, con un'implementazione plug-and-play.[...]àˆ stato sviluppato per consentire agli sviluppatori web sensibili agli standard di aggiungere vita ed energia alle loro pagine senza dover imparare Javascript o Flash: bastano conoscenze matematiche di base e una buona comprensione dei CSS. FACE è interamente costruita sul Javascript e sul CSS che si fornisce per controllare l'animazione. Molto belli gli effetti e sorprendente il peso del file Javascript (meno di 8Kb nella versione non compressa). Sintesi, compatibilità  e cinematica sono davvero le tendenze del nuovo Javascript.

Continua a leggere FACE, animazioni con i CSS e javascript

Categoria: Scripting

Yavascript!

19 Dec

C'è grande fermento a Sunnyvale, e non solo per le recenti acquisizioni (l'ultima, come si sa, è quella di del.icio.us).A Yahoo! hanno capito molto bene che attirare intorno ai propri web services frotte di sviluppatori in grado di sfruttarli a dovere per costruire nuove applicazioni e nuovi servizi è una strategia vincente. Il Developer Network, allora, diventa sempre più un punto di riferimento obbligato. E devo dire che alcune aree sono straordinariamente ricche, si pongono davvero come risorse fondamentali non solo per chi abbia intenzione di lavorare con le API di Yahoo!. Da qualche giorno è disponibile ad esempio il Javascript Developer Center. Fossi in voi ci darei un'occhiata.Insieme ad una pagina ad hoc, poi, contiene diversi riferimenti a JSON (JavaScript Object Notation), questo formato per lo scambio di dati che molti considerano una valida alternativa a XML (almeno per un certo tipo di applicazione). Chi ne sa di più? Qualcuno lo ha usato o lo sta usando?

Continua a leggere Yavascript!

Categoria: Scripting

Volete provare uno style switcher che funzioni anche con Javascript disabilitato, che eviti quel fastidiosissimo effetto chimato F.O.U.C, che abbia il codice JS separato dal markup e sia facile da implementare? Date un'occhiata qui per la teoria e qui per un piccolo esempio. Si chiama UDASS (Unobtrusive Degradable Ajax Style Sheet Switcher).

Continua a leggere Lo style switcher di Natale

Categoria: Scripting

Uno dei problemi più annosi di window.onload, di cui ho parlato anche su web-graphics, è la latenza di esecuzione degli script. In alcuni casi questa latenza si può ridurre apparentemente a zero, in particolare quando dobbiamo nascondere o manipolare appena possibile elementi di pagina.Ho pensato così di riprendere uno degli esempi della prima parte della serie su Interazione ed eventi in Javascript per mostrare come sia possibile. Ecco quindi l'esempio aggiornato, in cui è possibile visualizzare o nascondere elementi di pagina e la transizione al caricamento è molto ridotta. (more...)

Continua a leggere Show/Hide rivisto

Categoria: Scripting