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

L'ispirazione dell'esperimento che vi segnalo nasce esplicitamente da una funzionalità  di iPhoto, il software per la gestione di fotografie e immagini di Apple.Come mostra lo screenshot, si tratta di uno slider agendo sul quale è possibile ridimensionare al volo la dimensione delle thumbnail presenti nella libreria:John Berry di Agile Partners, è riuscito a riproporre il tutto in versione XHTML + Javascript grazie a 2 (ormai onnipresenti) librerie: Prototype e script.aculo.us.

Continua a leggere Ridimensionare immagini con uno slider

Categoria: Scripting

Chi ha letto solo qualcosa di Jacob Nielsen non si stupirà . Il guru dell'usabilità  ha lanciato il suo anatema contro l'uso scriteriato di Ajax nel suo ultimo Alertbox. Il titolo non lascia spazio a fraintendimenti: Why Ajax Sucks (Most of the Time).Il giudizio negativo ruota essenzialmente intorno ad un problema. Ajax 'rompe' il modello classico del web, quello disegnato da Tim Berners Lee per intenderci, un modello che poggia sulla pagina come unità  costitutiva minima e fondamentale. Puà insomma accadere, su un sito fortemente ajaxificato, che il nuovo contenuto visualizzato sullo schermo in seguito ad una certa azione, non corrisponda, come dovrebbe, ad una nuova unità  informativa autonoma (una pagina appunto) dotata, tra l'altro, di una sua URL univoca.Da qui i problemi derivati, come quelli relativi all'uso del tasto Back/Indietro o alle URL che smettono di funzionare o che non assolvono al loro compito precipuo.Cose già  dette ed evidenziate da altri, tutto sommato. Con un'eccezione. Mai avevo letto altrove che sui siti costruiti in doppia versione, Ajax e non-Ajax, la gran parte degli utenti ha mostrato di prediligere quella Ajax-free.Update/rettifica: come si dice 'cospargersi il capo di cenere' in tutte le lingue? E pirla? Prego, infierite pure. E grazie a skidx per il provvidenziale commento:L'articolo non è di Nielsen, è una sua parodia."Ajax Sucks" article is not by me An article is currently making the rounds (even featured on Slashdot) that looks very much like one of mine, until you read the very bottom of the page that clearly states that it is by another author and written as a spoof. Please don't send me comments on this article, since I had nothing to do with it.A mia discolpa posso solo dire che ho fatto il post (poi schedulato per oggi) appena la segnalazione del pezzo-bufala ha iniziato a circolare in rete e l'indicazione che di bufala si trattava era ben nascosta in fondo alla pagina, a differenza di quanto accade in questo momento. Certo, se avessi dato un'occhiata alla URL...

Continua a leggere La scomunica di Jacob

Categoria: Scripting

Alex Bosworth ha stilato una lista delle cose che vale la pena trattare con Ajax. Trovo che sia piuttosto sensata. Ecco la sintesi.Interazione attivata con i formGestione dell'interfaccia per dati con struttura gerarchica complessa (esempio: un thread di discussione su un forum)Comunicazione rapida da utente a utenteVoti e ratingFiltrare e/o ordinare datiAutocompletamento nell'immissione di testiSegue la lista delle cose per cui è inutile o sbagliato usare Ajax.Campi di ricerca stile Google SuggestSistema di navigazione principale di un sitoRimpiazzare grosse quantità  di testoManipolazione dell'aspetto grafico di una paginaWidget inutiliDa leggere anche gli esempi che Bosworth porta a supporto delle sue indicazioni.

Continua a leggere Ajax: per molto ma non per tutto

Categoria: Scripting

Tags: ,