Vortexmind: free your mind Blog

Who controls the past, controls the future. Who controls the present, controls the past.
maggio 24, 2007

Processing e MobZombies

Author: Vortexmind - Categories: Applications, Technology - Tags: , , , , , , , , , , , , , ,

Dopo una giornata davanti a distribuzioni, medie e varianze ho trovato un sito Connexions) che, oltre ad avere una buona serie di tutorial riguardanti svariati teoremi di statistica contiene anche informazioni interessanti e variegate. Tra le altre cose, ho scoperto l’esistenza di Processing, un nuovo linguaggio open source specificatamente orientato all’interazione e alla grafica. Siccome sono il prodotto di una gioventù plasmata a suon di videogiochi violenti, il mio occhio è stato morbosamente attratto da uno dei progetti nello showcase, MobZombies. Il gioco vero e proprio non è granchè, quello che è innovativo è il concetto di gameplay “a là WII“, nel senso che per evitare gli zombie dovrete correre per davvero! Inoltre pare che sarà possibile trasferire giochi di questo tipo sui nuovi cellulari tipo i Nokia serie N (che io non comprerò mai). Vabbè, ora vi sparate il trailer che è da far partire solo per ascoltare la celebre colonna sonora di Goblin.

Riuscirà il bambino ad aprirsi la fronte contro uno spigolo appuntito? Speriamo solo che poi non rinasca dalla morte …

dicembre 2, 2006

Tracciare i tempi di caricamento di una pagina web

Author: Vortexmind - Categories: Applications, Webdesign - Tags: , , , , , , , , , , , , , , , , , ,

Grafico dei tempi di caricamento di una pagina web con Tamper Data - Estensione per FirefoxVi rigiro una notizia che ho letto su edit. Se avete necessità di tracciare i tempi di caricamento di una pagina web, potete ricorrere a una funzionalità “nascosta” di un plugin per Firefox, Tamper Data. Di per sè, il plugin serve a tracciare le richieste http che si fanno tramite il browser. Tuttavia, se lo attivate e aprite una pagina, potete poi selezionare i dati di interesse e renderli in forma grafica. In questo modo si ottiene un grafico simile a quello nello screenshot, che mostra chiaramente qual’è l’evoluzione temporale del caricamento di ogni oggetto presente nel documento XHTML. Ad esempio, facendo test ripetuti, ho scoperto che il caricamento della libreria prototype impiega quasi 2 secondi! Sarebbe già un buon motivo per cercare una soluzione alternativa! Tra l’altro l’articolo citato riporta i risultati di uno studio (Yahoo) secondo cui il modo migliore per velocizzare il caricamento delle pagine è la diminuzione radicale delle richieste http che la pagina fa per essere visualizzata.

novembre 8, 2006

Amberjack – Walktrough per siti web

Author: Vortexmind - Categories: Applications, Webdesign - Tags: , , , , , , , , , , , , , ,

Amberjack : tour virtuale delle funzionalita del sitoLeggo su <edit> che è stata rilasciata Amberjack, una libreria javascript a licenza LGPL di soli 4Kb in grado di realizzare presentazioni virtuali e tour guidati per un sito web. Pensate: avete appena pubblicato un nuovo sito e volete presentare agli utenti le funzionalità predisposte in maniera accattivante. Guardate la demo di Amberjack per capire che cosa potete realizzare in poco tempo. Sicuramente un modo per migliorare l’usabilità della vostra applicazione web aiutando i vostri utenti ad utilizzare al meglio quello che avete predisposto per loro.

aprile 26, 2006

F-Shaped Pattern

Author: Vortexmind - Categories: Webdesign - Tags: , , , , , , , , , ,

F patternLo dice Jakob Nielsen, il “re dell’usabilità”. Ma cosa dice precisamente? Secondo uno studio da lui realizzato, F è la forma del percorso che l’occhio è più portato a compiere su una pagina web (se opportunamente “guidato” da un layout intelligente). Lo studio, compiuto su 232 soggetti grazie a tecniche di eyetracking (una tecnica video che permette di seguire i movimenti dell’occhio relativamente all’immagine rappresentata), ha infatti evidenziato questa peculiare forma su migliaia di pagine web. In generale, un utente:

  • Scansiona orizzontalmente la testata della pagina
  • Sposta lo sguardo poco più in basso, ed effettua una seconda veloce scansione orizzontale
  • Infine, viene visualizzata la barra laterale (supposta a sinistra), in un modo più o meno rapido a seconda dell’utente

La configurazione che si forma assomiglia parecchio alla lettera dell’alfabeto citata. Grazie a questo studio si è capito che l’utente in media non legge dettagliatamente i testi presentati nella pagina, parola per parola. L’importante è quindi inserire nei primi due paragrafi le informazioni essenziali, in modo da catturare l’attenzione del lettore ed eventualmente indurlo a proseguire la lettura. Inoltre si è visto che è molto utile inserire nelle intestazioni due parole significative, soprattutto nel menù: questo perchè difficilmente l’utente leggerà oltre, ma preferirà continuare a scansionare le voci delle liste e delle intestazioni. Uno studio che trae conclusioni ovvie? Beh, può darsi … però è pur sempre un’osservazione concreta del comportamento degli utenti …

marzo 25, 2006

COMET – Andare oltre AJAX

Author: Vortexmind - Categories: News, Technology, Webdesign - Tags: , , , , , , , , , , , , ,

Ajax vs Comet - Modelli di comunicazione a confrontoIn principio era AJAX: Asynchronous JavaScript And XML. Ovvero rendere le applicazioni web più “interattive” e flessibili utilizzando richieste asincrone prese in carico dal browser e gestite tramite chiamate XML al server. Tutto molto bello, ma ci sono dei problemi: pur introducendo l’asincronia, il meccanismo rimane fondamentalmente basato sul paradigma “request-response” (o client-server, se preferite): è sempre il client a fare le richieste, e a “innescare” una computazione lato server (anche se effettuata in maniera asincrona, a differenza del meccanismo sincrono tradizionale). Questa limitazione si evidenzia in particolar modo per applicazioni multi-utente e collaborative: con AJAX infatti non è possibile “forzare” un update da server (ad esempio quando i dati visualizzati dal client diventano inconsistenti perchè vengono modificati, ad esempio, da un altro utente). In genere si cerca di mascherare questa limitazione utilizzando meccanismi di polling, ma la soluzione non è soddisfacente nè efficiente.

COMET
cerca di andare oltre, introducendo uno stile di comunicazione “event-driven, server-push data streaming”. In questo paradigma, i dati possono essere inviati al client anche in assenza di un evento di richiesta (da qui la denominazione server-push). Basandosi inoltre su canali http persistenti, si riesce anche a ridurre drasticamente la latenza di comunicazione.

Le informazioni presenti in questo articolo le ho tratte da questo articolo in inglese, che offre ulteriori spunti di riflessione e che vi consiglio di leggere se vi interessa la cosa.

marzo 18, 2006

Favicon dinamiche con AJAX e Javascript

Author: Vortexmind - Categories: Tutorial, Webdesign - Tags: , , , , , , , , , ,

Avevate mai pensato che utilizzando javascript in prospettiva “AJAX like” si potessero creare siti con favicon dinamiche? Se non sapete di cosa sto parlando, la favicon è l’icona normalmente associata al bookmark dei siti, che solitamente compare nella barra indirizzi accanto all’URL (nel caso di questo sito, un piccolo vortice). L’idea è: perchè non utilizzare anche la favicon per aumentare l’interattività con l’utente (magari andando a gestire in modo visuale alcune notifiche importanti di eventi della vostra web application)?

In ogni caso, ci ha pensato Michael Mahemoff: nel suo articolo viene spiegato come fare, e potete scaricare una libreria javascript pronta per l’uso con tutte le API adatte allo scopo. Buon divertimento!

marzo 10, 2006

CSS sprites: diminuire le server calls

Author: Vortexmind - Categories: Webdesign - Tags: , , , , , , , , , , ,

Ho trovato questo interessante articolo: si tratta di utilizzare una tecnica per inserire tutte le immagini di uso comune nel vostro sito web in un unico file da aggregare ai CSS. In questo modo i clients che si connetteranno effettueranno un’unica chiamata al webserver per ritirare detto file, e poi non dovranno più rivolgersi (appesantendolo) al server per ottenere le immagini richieste. Ovviamente questa tecnica ha senso per immagini d’uso comune che verrebbero sicuramente scaricate dai navigatori, altrimenti va a finire che l’overhead introdotto dallo scaricamento della “mappa di immagini” sia controproducente rispetto all’uso che se ne fa. Il trucco principale è creare un’immagine “a griglia” contente tutte le singole immagini usate nell’interfaccia del vostro sito, separate in modo che non si overlappino. Per fare un esempio, potete usare questa tecnica per ottenere bottoni rollover senza usare Javascript ma semplicemente sfruttando i fogli di stile. Per una maggiore comprensione ed esempi vi consiglio caldamente di leggere l’articolo originale che è molto completo. (read more | digg story)

marzo 4, 2006

Web design semplice vs complesso?

Author: Vortexmind - Categories: Surfing The Net, Technology, Webdesign - Tags: , , , , , , , , , , , ,

Yahoo! vs Google Timeline Che dire? E’meglio avere un sito web ricco di funzioni e complesso oppure mantenere la semplicità in primo piano? Leggendo questo articolo, sembra che la seconda soluzione sia quella vincente, perlomeno per quanto riguarda i motori di ricerca. Se cliccate sulla foto, vedrete una panoramica molto significativa di come sono evolute nel tempo le homepages di Google e Yahoo!. Si nota chiaramente che la seconda sia via via diventata sempre più complessa (“the portal plague“), mentre la prima sia rimasta praticamente immutata nel tempo. A misurare il rispettivo successo ottenuto dai motori si direbbe quindi che la strategia vincente è proprio quella di Google che, oltretutto, permette all’utente di “aumentare la complessità dell’homepage” ma solo tramite un intervento esplicito dello stesso (home page personalizzata previa registrazione). Insomma, ce n’è di che dibattere. Vi consiglio quindi, se siete interessati, di leggervi questo articolo.

febbraio 21, 2006

Web Semantico – Semantic Web

Author: Vortexmind - Categories: Applications, Informatica, Surfing The Net, Technology, Webdesign - Tags: , , , , , , , , , , , , , , , , , , , ,

In principio c’era l’HTML. Poi sono arrivati i Cascading Style Sheets e si è imposto il paradigma che impone di “separare lo stile dalla struttura del documento“. Ora, con la salda affermazione dell’XML, si stanno cominciando a diffondere anche i principi del cosiddetto web semantico (Semantic Web in inglese). Ora, andando oltre alla semplice descrizione strutturale e stilistica di una pagina, si cerca di rendere esplicito anche il “significato” dei dati presenti nella pagina (permettendo quindi anche alla macchina di “rendersi conto” del significato di quello che sta presentando, con ovvi vantaggi rispetto alle interazioni possibili con la pagina stessa). In questo articolo cercherò di fare una rapida panoramica dello “stato dell’arte attuale” per quanto riguarda il Web Semantico. Read it all..

gennaio 21, 2006

Google Sitemaps & Wordpress

Author: Vortexmind - Categories: Applications, Informatica, Technology, Webdesign - Tags: , , , , , , , ,

Forse non tutti voi lo conoscono: Google Sitemaps è un progetto beta, partito l’estate scorsa, che permette ai webmaster di modificare il rapporto con i motori di ricerca. In genere il designer si preoccupa di costruire le pagine e di predisporle perchè vengano poi scansionate dai motori di ricerca, mediante un processo da lui non controllabile. Con le Sitemaps invece, si permette al webmaster di fornire al motore di ricerca meta-informazioni strutturate su come il crawler deve agire sulla pagina, andando quindi ad inserire informazioni su priorit� delle sezioni del proprio sito, frequenza di aggiornamento e così via. L’idea non è nuova, sicuramente è la prima volta che viene posta in questi termini. Siccome ho voluto provare la cosa, segnalo a tutti gli utilizzatori di Wordpress che è disponibile un buon plugin in grado di prendersi in carico la generazione e l’aggiornamento del file XML utilizzato per realizzare la mappa. Per il resto, se desiderate maggiori informazioni, potete prendere spunto da questo articolo. Buona lettura!