Nel preparare l'indice di Layout Gala ho pensato di impiegare un layout liquido con delle miniature float, le tanto conosciute floating thumbnails che ho già  usato in diverse occasioni su PRO. C'è però una cosa non credo sia molto facile ottenere con i soli CSS: avere una o più sezioni di testo la cui larghezza si accorda perfettamente con quella delle miniature, tale da sintonizzare l'allineamento del testo con entrambi i lati della galleria. Volevo infatti dare risalto all'elemento centrale della pagina, ovvero la galleria, e mantenere un certo ordine con il testo della pagina. Ho così pensato di utilizzare CSS e Javascript con un approccio master-slave. In elettronica questo termine si riferisce ad un'architettura in cui un dispositivo (il master) controlla uno o più dispositivi (slave). Nel caso della pagina indice di Layout Gala (che vi invito ad osservare con Javascript disabilitato) la galleria di thumbnails è il master, mentre le sezioni di testo precedenti e successive sono gli slave. Credo che sia una tecnica che valga la pena di spiegare. (more...)

Continua a leggere Miniature master-slave con Javascript

Categoria: Scripting

Ieri sera ero fuori con un amico e chiaccherando del più e del meno siamo finiti sull'argomento VRML. Tempo fa (penso siano passati circa 3 anni) sviluppammo un semplice editor per VRML in Python a seguito di un corso universitario che trattava l'argomento e ci appassionammo un po' alla tecnologia: VRML è un linguaggio che permette di definire filmati 3D interattivi ad alta risoluzione, fruibili sul web attraverso appositi plugin.Stamattina, leggendo questo post mi è tornato in mente l'argomento ed ho deciso di sapere anche i pareri di qualcuno che segue questo blog.VRML non si è mai affermato. Sono pochissimi i siti che lo utilizzano, ed ancora meno quelli che hanno sviluppato strumenti decenti per seguirne lo sviluppo (mi ricordo di White Dune, ma in giro c'è poco altro) . I fattori che secondo me hanno portato la tecnologia ad inabissarsi senza decollare minimamente sono diversi: Prima di tutto l'hardware richiesto per eseguire filmati 3D interattivi (magari con tanto di suoni e texture dettagliate) non era alla portata di tutti quando la tecnologia è nata (mi pare nel 1994/95); In secondo luogo il plugin per eseguire filmati VRML è abbastanza pesante, poco pubblicizzato (io conosco solo quello della parallelgraphics) e poco ottimizzato; I filmati VRML di un certo livello sono troppo pesanti per essere fruiti decentemente con una connessione lenta: le texture, i suoni, gli script e tutti i comandi per la generazione dei modelli 3D appesantiscono moltissimo l'output; Infine la sintassi non è così semplice o comunque non segue gli standard evolutivi che sta avendo il web in questo periodo. A mio parere VRML avrebbe un posto di riguardo in alcune applicazioni (vedasi chat 3D, mostre interattive e molto altro) ma si dovrebbe iniziare a lavorarci seriamente proponendo strumenti di supporto, plugin multipiattaforma ottimizzati e soprattutto rinnovando la sintassi. Già  X3D è un passo avanti, dato che utilizza XML e quindi si adatta di più agli standard attuali.Se qualche anima pia volesse iniziare qualche progetto potrei essere interessato a dare una mano ... ;)

Continua a leggere Che fine ha fatto VRML ?

Categoria: Scripting

Tags: ,

Le tab sono sempre state un elemento di navigazione molto accattivante, piuttosto seguito e recentemente tornate alla ribalta con diverse soluzioni Javascript e AJAX.Ma prima una piccola introduzione ad alcune risorse sulle tab con i CSS: Sliding Doors of CSS e Sliding Doors of CSS part 2 (rispettivamente qui e qui i due articoli tradotti in italiano) sono gli articoli che maggiormente hanno contribuito a rendere le tab così famose; Centered Tabs with CSS è la variante centrata, mentre nell'articolo Un menu a tab con i CSS, uno tra i miei preferiti tra i molti che ho scritto, trovate la versione senza immagini.Ecco quindi le versioni con un pizzico di Javascript: risale a circa due anni fa Tabtastic, che spiega come, partendo da un markup ben strutturato sia possibile trasformare la navigazione interna alla pagina con tab e DOM; stessa idea, ma forse più versatile, il recentissimo DomTab di Chris Heilmann.Segnalo infine AJAX tabs in cui AJAX viene usato per caricare contenuto a richiesta all'interno della pagina.

Continua a leggere Il ritorno delle tab

Categoria: Scripting

Tags: , , ,

L'ordinamento delle tabelle è uno dei casi in cui Javascript può contribuire molto a migliorare la consultazione di dati. Segnalo così due pietre miliari, ovvero SortTable di Stuart Langridge e Table Sort di Mike Hall, a cui si aggiunge il recentissimo Standardista Table Sorting, di Neil Crosby: davvero notevole sia lo script che l'articolo stesso.

Continua a leggere Ordinare tabelle con Javascript

Categoria: Scripting

Lo ammetto. Di fronte ad esempi come questo, realizzato con script.aculo.us, di liste riordinabili con il drag&drop, mi sono sempre detto se non si trattasse di semplici esercizi di stile buoni per far vedere 'cosa si può fare', ma difficilmente 'utili' in contesti reali.Ho decisamente cambiato idea usando Backpack, dove questo sistema trova larghissimo spazio e risulta indubbiamente comodo ed efficace.Su PHP Riot() c'è un tutorial su come applicare gli effetti di librerie JS come Prototype e script.aculo.us a liste di dati estratti da database (MySQL, per esempio).

Continua a leggere Riordinare liste con AJAX e PHP

Categoria: Scripting

Sono diverse le segnalazioni interessanti in tema Javascript. Cominciamo con una risorsa nostrana: Valerio Proietti ha raccolto in questo post alcuni link riguardanti la sua piccola e potente Moo.fx, che è giunta da poco alla versione 1.2 ed è corredata ora da una pratica documentazione. Passiamo ad alcune segnalazioni su Prototype, la nota libreria Javascript su cui sono basati molte librerie e framework. Johnatan Snook ha presentato in Prototype dissected un'utile tavola che contiene proprietà  e metodi, mentre su Sitepoint è stato pubblicato Painless Javascript using Prototype, un'ottima introduzione che si aggiunge alla Quick guide to Prototype di Particletree. Segnalo infine Prototype documentation, un sito rivolto a raccogliere risorse e tutorial, ovviamente su Prototype.L'approccio object-oriented in Javascript è sempre più utilizzato negli ultimi tempi, ecco quindi due valide introduzioni a questo paradigma di programmazione: Show your love to the object literal di Chris Heilmann e JSON for the masses di Dustin Diaz. Ma è davvero così pratico e vantaggioso scrivere codice orientato agli oggetti in javascript? Su web-graphics Liorean dà  la sua personale risposta in OOJS - overhyped and overcomplicating, che potrà  risultare in controtendenza.

Continua a leggere Bookmark Javascript

Categoria: Scripting

Chi meglio di Brendan Eich, l'uomo che lo ha creato, può illuminarci sull'evoluzione di Javascript? Ne parla qui, in un post intitolato significativamente Python and Javascript. Javascript 2 (aka ECMAScript Edition 4) avrà  infatti diversi punti di contatto proprio con Python e ha già  da ora il supporto di aziende come Adobe, Microsoft e ovviamente Mozilla, un fatto che dovrebbe garantire un'implementazione rapida ed estesa ai principali browser delle sue features. Palla ai programmatori per commenti e considerazioni varie.

Continua a leggere Il futuro di Javascript

Categoria: Scripting

Tags:

Rappresenta una delle maggiori mode del momento. Uno dei primi siti (se non il primo...) a lanciare le Tag Clouds è stato del.icio.us, ma la tecnica ha subito preso piede ed oggi è quasi diventata il simbolo dei siti progettati con un approccio Web 2.0. Cerchiamo di capire meglio di cosa si tratta.Le Tag Clouds, tanto per capirci, sono quei box che contengono i tag associati ad un entry in un blog, piuttosto che ad un semplice dato, e che a secondo della loro densità  di inserimento hanno dimensioni differenti. Per la serie un esempio funziona più di mille parole eccovi un esempio preso dal blog di Peter Freitag. Perfetto, adesso che abbiamo capito di cosa stiamo parlando, vediamo anche come poter programmare questi "new mullets", come li ha definiti Jeffrey Zeldman . (more...)

Continua a leggere Programmare una Tag Cloud

Categoria: Scripting

Tags:

Un tutorial per la creazione di un carrello per l'e-commerce usando Script.aculo.us (esempio); un altro per realizzare un semplice box di navigazione a tab (esempio); il link a questa guida alla scrittura di codice Javascript. Sono le tre risorse che vi segnalo da questo Ajax Lessons, un sito con una bella grafica e ottimi contenuti. Da seguire.

Continua a leggere Lezioni di AJAX

Categoria: Scripting

Tags: ,

Tre belle novità  dedicate agli sviluppatori da Yahoo!. La prima è Yahoo! User Interface Library, una collezione di widget e controlli in Javascript da inserire nei propri progetti per creare interfacce altamente dinamiche e interattive. Tutto il codice è distribuito con licenza BSD.La seconda è Design Pattern Library. Niente codice da riusare in questo caso (almeno per ora), ma un insieme di risorse a mio parere di grande valore. Si parte dalla definizione di pattern: "Un pattern descrive la soluzione ottimale ad un problema comune nell'ambito di uno specifico contesto."Esempio: l'utente ha bisogno di avere in ogni pagina un sistema di navigazione che gli fornisca informazioni sulla sua attuale posizione all'interno del sito e gli consenta di raggiungere facilmente l'inizio. Si crea una navigazione a breadcrumbs. Ogni pagina spiega poi quando usare ciascun elemento, in che contesto, quali sono i problemi di accessibilità  da tenere presenti, etc. Ripeto, secondo me c'è tanto da studiare e imparare.Per tenere il filo della discussione, raccogliere il feedback e seguire gli aggiornamenti, infine, un nuovo blog. Complimenti!

Continua a leggere Nuove librerie su Yahoo! Developer Network

Categoria: Scripting