L'ultima aggiunta alla collezione di script e controlli di dhtmlgoodies.com è questo Folder tree with drag and drop. Ecco la demo. Non metto la bontà  tecnica del menu, anzi, mi inchino e ammiro. Ma mi chiedo in che ambito possa trovare un'applicazione reale una soluzione di quel tipo. Forse ho orizzonti limitati, per cui vi chiedo: a voi viene in mente qualcosa?

Continua a leggere Menu ad albero con drag and drop

Categoria: Scripting

Tags: , ,

àˆ diventato piuttosto popolare di recente Timeout your mouseovers, uno script per mostrare/nascondere con un po' di ritardo una sezione a comparsa passando il mouse su un link.Ad essere sincero l'esempio mi ha ricordato per certi versi Don't click it, e non so se sia positivo: si tratta in qualche modo di una nuova (o insolita) forma di interazione. Come indicato in uno dei commenti, che condivido: Il modo adeguato è: nessun ritardo prima di mostrare, ma solo prima di chiudere. In effetti l'attesa di apertura è tempo di interazione sprecato: passando il mouse su un link ci si aspetta una transizione istantanea, o si cerca il click.Stavo pensando in quali casi potrebbe andar bene una soluzione del genere, ma trovo difficoltà : sicuramente andrebbe impiegata per informazioni accessorie e non indispensabili.

Continua a leggere Mouseover con attesa

Categoria: Scripting

Litebox

5 Jul

"Stesso gusto con meno calorie". Lo slogan fa capire bene la principale caratteristica di questa libreria Javascript. Litebox è un remake di Lightbox 2 creato avendo un obbiettivo primario da rispettare: alleggerire il peso. Si basa infatti su moo.fx in combinazione con prototype.lite. Il sito offre esempi, codice e zip con tutte le librerie necessarie.

Continua a leggere Litebox

Categoria: Scripting

Apputamento con i bookmark dedicato esclusivamente al Javascript. Cominciamo subito con una delle questioni che sta alla base di quasi ogni script, ovvero l'event handler onload. Ci sono due soluzioni decisamente interessanti.Dean Edwards ha presentato di recente window.onload (again) una versione più veloce dell'onload per Mozilla, Opera 9, Internet Explorer e Safari dato che la funzione assegnata all'evento non ha bisogno di aspettare che il contenuto della pagina (immagini incluse) sia totalmente caricato, ma è sufficiente che sia disponibile l'albero DOM. Piccola riflessione sull'implementazione: a un primo sguardo del codice, non ho potuto fare a meno di notare una forte analogia con filtri e hack CSS specifici per browser. Ma in questo caso la compatibilità  è buona, e per i browser non supportati viene comunque mantenuto il tradizionale window.onload.Approccio simile, ma basato su Prototype, viene presentato da Dan Webb in A DOM Ready Extension for Prototype. Le liste a librerie e risorse sono tra le risorse più seguite, ecco quindi le Top 10 Web Developer Libraries secondo Cameron Olthuis, di cui una buona parte è relativa a javascript. Personalmente non avrei tralasciato jQuery, che conta un crescente interesse e sviluppo anche grazie alla documentazione e alla comunità  che si sta costruendo intorno. A proposito di jQuery, dopo aver segnalato la settimana scorsa 15 Days Of jQuery è il turno della jQuery Visual Documentation una reference interattiva e molto pratica per conoscere meglio questa libreria.

Continua a leggere Bookmark Javascript

Categoria: Scripting

AJAX con Fjax

26 Jun

La 'F' di Fjax sta per 'Flash'. Non aspettatevi però di trovarvi di fronte a filmatini accattivanti ed effetti super-cool. Si tratta infatti di una tecnica crossbrowser per effettuare l'aggiornamento dei contenuti di una pagina senza refresh (in stile AJAX) che usa Flash semplicemente come motore di parsing per trasformare XML in (X)HTML. Quoto dalla pagina di presentazione:ItÂ’s important to understand that although Fjax is based around using Flash as an enabling technology, it is not about ‘Flash moviesÂ’ or presenting your content in Flash, or having Flash as part of the presentation layer at all.Fjax just uses Flash to handle XML.E in un'intervista rilasciata a Webmonkey così si esprime uno degli sviluppatori:Fjax is an alternative method for doing the kind of Web 2.0 builds that are currently done in Ajax. The advantage is that it does it in a fraction of the size, and requires no code forking to work in the different browsers. It's a streamlined way of doing asynchronous content updates with XML.Lascio a chi ne sa di più l'onere di un commento (qualucno l'ha già  testato?). Mi limito ad un'osservazione da utente medio. Volevo linkare la pagina 'Overview' del sito da cui ho tratto la citazione di sopra, ma è stato impossibile usando i metodi consueti. Niente sulla barra degli indirizzi, copiando la URL con il click destro mi da questa cosa:javascript:void(LoadFjaxContent('mnuOverview.xml'));Poi l'occhio cade su un pulsantino a sinistra:Un click e carichi la URL della pagina. Non è la prima volta che mi imbatto in qualcosa del genere (ne avevo accennato in questo post sulla navigazione con XMLHttpRequest). E più le vedo 'ste cose più rimango perplesso.Dato che però la mia opinione conta poco per chi sviluppa, ecco cosa dice Simon Willison (uno che ne capisce) in un lungo post dal titolo molto eloquente, Fjax: Just say no:In its present form, Fjax offers absolutely nothing of value to front end developers. Even the idea of using invisible Flash components to make new functionality available to JavaScript isn't a new one - dojo.storage takes advantage of Flash's ability to store large amounts of data in an offline cache, while FlashXMLHttpRequest makes cross-domain HTTP requests possible. There's a lot to be said for using Flash in this way (I'd love to see someone make the Flash accessibility APIs available to JavaScript), but Fjax is not a useful demonstration.

Continua a leggere AJAX con Fjax

Categoria: Scripting

Tags: , ,

Tre script vanno ad aggiungersi alla già  numerosa lista di soluzioni in stile LightBox. La prima è iBox, che consente di avere finestre modali con immagini, div e file esterni. A differenza di LightBox 2 e di moltre altre, non si appoggia a librerie esterne quali jQuery, scriptaculous o prototype, ed è quindi decisamente leggera (11 Kb circa).Se vi state chiedendo quale sarà  il passo successivo a soluzioni di questo tipo: forse estendere l'idea della finestra modale con meccanismi di drag e/o resize, come presentato sia in Prototype Window Class sia in LitBox. Tre soluzioni differenti, ma davvero notevoli. Manca ancora una vera alternativa all'ottima funzionalità  di slideshow presente in LightBox 2, che lo rende tuttora unico.

Continua a leggere Ancora derivati LightBox

Categoria: Scripting

Di questi tempi la metafora, magari scontata, ha comunque il suo effetto. Quelli di Sitepoint non hanno resistito alla tentazione e per sintetizzare il contenuto di un articolo dedicato al confronto tra le più note librerie Javascript dell'ultima generazione, hanno puntato su questo titolo: The JavaScript Library World Cup.Ma chi sono le magnifiche quattro? Dojo, Prototype + Scriptacolous, Mochikit e Yahoo! User Interface Library.

Continua a leggere I Mondiali di… Javascript

Categoria: Scripting

Sono diversi i metodi e le librerie Javascript che consentono la creazione di tabelle dati ordinabili in base ad una delle colonne. Vi segnalo quello che è l'ultimo (ri)emerso tra le decine di link disponibili sui vari siti social bookmarking: SortedTable.In verità , ne avevamo parlato sul blog in un post del mese di marzo, in cui però molti lamentavano nei commenti la scarsa cura della documentazione e una certa disorganizzazione nella presentazione dei file JS. Tutto risolto. Per chi vuol vedere da subito cosa si può fare, ecco il collegamento all'esempio. Anche la documentazione è ora piuttosto corposa e ben fatta.

Continua a leggere Ordinare tabelle con Javascript

Categoria: Scripting

Usandola abbondantemente su Flickr e Backpack, trovo che, implementata nel posto e nel modo giusto, sia una delle più utili funzionalità  per cui affidarsi ad AJAX. Parlo della modifica inline di parti della pagina. Joseph Scott ha da poco presentato la versione 0.2.0 di Edit In Place, una libreria basata su Prototype con cui realizzare facilmente questo tipo di effetto. Ecco l'esempio.

Continua a leggere Editare la pagina con AJAX

Categoria: Scripting

Tags: , ,

Diverse segnalazioni interessanti su Ajax e Javascript negli ultimi tempi. Dustin Diaz e Christian Heillman, due noti scripters ed entrambi impiegati presso Yahoo, presentano due script molto sfiziosi basati sulla Yahoo! User Interface Library. Diaz presenta Ajax Contact Form 1.0, che usa animazioni per evidenziare campi mancanti e AJAX per input di dati da un form. Heillman propone invece Embedded Dynamic Web Search Forms with JSON, che utilizza inoltre le API della ricerca di Yahoo. Da un po' si è cominciato a parlare di accessibilità  di script DOM e soluzioni AJAX-based: Richard Rutter presenta in AJAX and accessibility diverse letture interessanti sul tema.Le finestre modali con Javascript (alla LightBox per intenderci) sono una di quelle soluzioni che trovo decisamente accattivanti e funzionali: segnalo quindi Prototype Window Class, basata su Prototype e Scriptaculous: discreta la documentazione e gli esempi. A proposito di librerie e framework Javascript: concludo segnalando 15 Days Of jQuery, un sito nato per presentare 15 esempi su JQuery, una delle libreria più leggere e versatili per avere animazioni, utilità  DOM e AJAX.

Continua a leggere Bookmark Ajax e Javascript

Categoria: Scripting