JavaScript - Pagina 2 di 3 - TomStardust.com

Ubiquity, comandi personalizzati per Firefox

Alla scoperta di Ubiquity, plugin dei Mozilla Labs per Firefox, con una semplice guida per creare i propri comandi di ricerca personalizzati.

Ubiquity è una delle ultime creazioni dei Mozilla labs: un plugin per Firefox che espande le funzionalità del browser.

Con una semplice combinazione di tasti ( CTRL + spazio su Pc e ALT + spazio su Mac) è possibile aprire un riquadro all’interno della finestra attiva. Da questo riquadro scrivendo poche lettere si è in grado di fare praticamente qualsiasi cosa tramite un’interfaccia a riga di comando: cercare un termine su Google o Wikipedia, tradurre il contenuto di una pagina, cercare delle immagini su Flickr o un indirizzo su Googlemaps, non ci sono limiti alle operazioni possibili.

I comandi più immediati sono:

g: ricerca su Google
w: ricerca su Wikipedia
f: ricerca su Flickr
map: ricerca su Googlemaps di un indirizzo, se selezionate del testo Ubiquity cercherà direttamente quanto evidenziato
translate: traduzione del testo evidenziato nella pagina da una qualsiasi lingua all’inglese, utilissima per lingue sconosciute come il cinese
imdb: ricerca sull’Internet Movie Database
twitter: aggiorna il proprio stato di Twitter

Fantastica è la possibilità di estendere i commenti presenti, importandoli da altri siti o scrivendoli autonomamente. Per maggiori informazioni vi rimando a quelli elencati sul sito ufficiale e su questo post dei Googlisti.

Creare comandi personalizzati

E’ possibile anche creare dei comandi personalizzati per Ubiquity, magari abbinando una parola chiave alla ricerca sul vostro sito web.

Seguendo questo tutorial potete realizzare in poche righe un comando che permette di effettuare la ricerca di qualsiasi termine. Una volta realizzato lo script, salvatelo in un file .js, caricatelo sul vostro server e collegatelo ad una pagina con il seguente codice da inserire tra i tag <head> e </head>:

<link rel="commands" href="http://percorso-del-file-js" name="Titolo" />

Potete provare il comando che ho realizzato per tomstardust.com andando su questa pagina dopo aver installato Ubiquity. Una volta autorizzato lo script, potrete utilizzare il comando tomstardust per cercare qualsiasi termine su questo sito.

Se a questo punto siete incuriositi da Ubiquity e non l’avete ancora installato, potete farlo dalla pagina ufficiale dei Mozilla Labs, dove trovate anche un video con una dimostrazione pratica.

Galleria di effetti Javascript

Una rassegna di Javascript: slider, popup e altre animazioni notevoli.

Javascript e AJAX hanno senza dubbio invaso la rete negli ultimi anni. Se in passato era molto più raro vedere degli effetti sulle pagine web, ormai i framework utilizzabili sono numerosi, ed ancora di più gli effetti disponibili.

Ecco una breve rassegna di soluzioni eleganti, che potrete prendere come fonte di ispirazione.

Coda

Il sito di CODA, l’editor per Mac, sarà già noto a molti. Gli effetti Javascript di questa pagina sono due, un elegante popup ed uno slider orizzontale. L’accessibilità è tutelata in parte: le tab restano navigabili anche con Javascript disabilitato, ma non è stata rivolta grande attenzione a questa possibilità.

Mancub

Questo sito è stata una rivelazione. Semplice ma accattivante, ha un effetto decorativo sul menu di navigazione che invita a giocarci e a soffermarsi più di un momento. E’ presente anche un effetto popup sui siti del portfolio, ed in questo caso con Javascript disabilitato si nota la cura dei dettagli. Le informazioni contenute nel popup appariranno infatti sotto gli screenshot. Ottimo lavoro.

Stragulp

Una segnalazione tutta italiana per un effetto slider realizzato con Mootools. Le potenzialità di questo framework mi hanno sempre interessato, anche in questo esempio l’animazione presente è fluida e piacevole da vedere.

Marius Roosendaal

Un altro sito più che noto, recentemente rinnovato con un terzo foglio di stile disponibile nello style switcher. Anche in questo caso la libreria utilizzata è Mootools, con il celebre accordion che consente di sfogliare il portfolio.

Conoscete altri effetti Javascript interessanti da segnalare? Fatelo nei commenti, potrebbero emergere altre risorse notevoli.

Shadowbox: soluzione Javascript per gallerie di immagini

Analisi di Shadowbox, una soluzione Javascript che potrebbe definire un nuovo standard per la realizzazione di gallerie di immagini.

Le gallerie di immagini sul web occupano senza dubbio un importante spazio, soprattutto per la varietà di soluzioni javascript che ci sono a disposizione per implementarle.

Gli script più famosi sono sicuramente Lightbox e Thickbox, che ho confrontato in passato. Da qualche mese però è disponibile Shadowbox, una soluzione che potrebbe definire un nuovo standard per la realizzazione di gallerie di immagini.

Queste le caratteristiche:

Standard-compliant: il codice HTML utilizzato è valido
Cross-browser: supporta tutti i principali browser, da IE6 ad Opera passando per Firefox e Safari
Cross-platform: è adattabile a molti framework javascript (Prototype, jQuery, MooTools..) tramite gli adapters, che indicano a Shadowbox quale metodo utilizzare
Aspetto personalizzabile: tramite delle skin CSS è semplice modificare l’aspetto delle finestre
Multiformato: supporta immagini, filmati QuickTime, Windows Media Player, Flash, Flash Video e HTML
Configurabile: sono disponibili decine di opzioni di personalizzazione per cambiare facilmente colori, interfaccia e tempi di esecuzione

Quello che mi ha colpito maggiormente è proprio il supporto a diversi framework, che consente di risparmiare codice, ridurre i tempi di caricamento e integrare perfettamente Shadowbox nel proprio sito.

Se volete approfondire l’argomento vi rimando al sito ufficiale, dove sono disponibili anche varie demo.

Per valutare invece le altre soluzioni per realizzare gallerie di immagini, potete leggere il post “Gallerie di immagini, adesso c’è anche Smoothbox”, dove ho raccolto varie segnalazioni.

Thickbox 3: ecco le novità

Thickbox è un Javascript di cui ho già parlato in passato, che consente di aprire immagini, iframe e nuove pagine all’interno della stessa finestra in cui si naviga.

La novità di questi giorni è l’uscita della versione 3, a poco tempo dalla versione 2.1. Dal blog dell’autore, ecco l’elenco dei principali miglioramenti:

Se non viene impostata una dimensione per l’apertura di contenuto inline, iframe o AJAX, la finestra avrà di default 630px di altezza e 440px di larghezza
Il codice è stato ripulito utilizzando JSLint, il file thickbox.js è stato compresso ulteriormente
Aggiornamento per utilizzare la versione 1.1.2 di jQuery
L’immagine di caricamento è stata cambiata ed ora viene precaricata
Lo script ora funziona con le mappe immagini e con gli elementi input dei form oltre che con i semplici links (il tag a)
Maggiore integrazione con AJAX, per caricare nuovi contenuti in una finestra di Thickbox già aperta

Le novità sono rilevanti, probabilmente interesseranno di più chi vorrà utilizzare questo Javascript integrandolo con AJAX. E’ una valida alternativa ad altri script analoghi, spesso molto più pesanti: l’attuale versione pesa solo 10kb nella versione compressa, a cui vanno aggiunti circa 20kb di jQuery.

Potete trovare esempi, guide per l’installazione di Thickbox 3 ed ovviamente i file da scaricare sul sito ufficiale.

Quando AJAX non serve

Il mese scorso un sito a cui sono registrato ha subito un deciso restyling: si tratta di Design Snack.

E’ una community dove ognuno può segnalare un sito e farlo votare dagli altri utenti; più voti ottiene, più in alto sale in classifica, passando da semplice segnalazione a risorsa approvata ed infine “awarded”.

Appena ho visto l’homepage ho notato subito l’aggiunta di AJAX nella colonna destra, che permette di navigare tra le categorie. La funzione è comoda, peccato che con Javascript disabilitato ci si trovi davanti ad una pagina parzialmente vuota (vedi screenshot).

Qualcuno potrebbe pensare che sia impossibile trovare una soluzione accessibile ottenendo gli stessi risultati, ed invece non è così.

Un altro famoso sito risolve tutto con un semplice Javascript: Hicksdesign. Cliccando sui vari “recent works” è possibile cambiare al volo il contenuto visualizzato nella pagina, ma il bello è che tutto rimane accessibile. Se infatti provate a disabilitare Javascript, magari aiutandovi con la Web Developer Toolbar (per Firefox), vedrete comunque tutti i contenuti, raggiungibili tramite delle ancore.

Il web è ricco di esempi del genere. Non è detto che si debba per forza di cose utilizzare sempre l’ultima tecnologia disponibile: AJAX sicuramente ha grandi potenzialità, ma è sempre necessario prestare attenzione a tutte le conseguenze di una sua applicazione.

Se si possiede un’alternativa valida, accessibile e con meno problemi, è quella che va utilizzata!

Gallerie di immagini, adesso c’è anche Smoothbox

Una schermata di esempio con Smoothbox Ho parlato più volte di Mootools e delle possibilità che offre soprattutto dopo l’uscita della versione 1.0. Mi sono accorto che si sta diffondendo sempre più, ed è recente una conversione di Thickbox proprio per questa libreria, con il nome Smoothbox.

Thickbox è un Javascript che consente la creazione di gallerie di immagini ed anteprime, ne avevo parlato in questo articolo. Utilizza jQuery, ma avere più possibilità a seconda del framework che si decide di usare sul proprio sito non è un male, anzi. Infatti metterne insieme più di uno non è raccomandabile per possibili problemi di compatibilità, ma soprattutto per il peso delle pagine.

Adesso quindi se volete usare un effetto per l’ingrandimento delle immagini o per creare delle gallerie, le scelte sono molteplici:

Smoothbox se usate come libreria Mootools
Thickbox se utilizzate jQuery
Lightbox se usate Prototype

Scegliete la soluzione che preferite e che più si adatta alle vostre esigenze, la raccomandazione è di appoggiarsi sempre su una libreria Javascript ridotta all’essenziale per evitare caricamenti inutili ai visitatori.

Se avete altri script simili da segnalare non esitate a farmelo sapere tramite i commenti o il modulo contatti, le risorse sull’argomento sono infinite!

Aggiornamento: sono arrivate le prime segnalazioni interessanti, le integro nell’articolo soprattutto per facilitarne la lettura.

Simone raccomanda TripTracker, che consente la creazione di uno slideshow senza troppe difficoltà. Il Javascript pesa circa 30kb e per siti commerciali richiede l’acquisto di una licenza, ma per un sito personale è ottimo.
LeoB segnala lo script Slimbox, che è una conversione di Lightbox v2 sempre per la libreria Mootools in soli 7kb. Da provare!

Aggiornamento #2:

Ancora LeoB segnala Smoothgallery e Slideshow, due soluzioni alternative per gallerie di immagini con Mootools.
Pirolab invece segnala Clearbox, risorsa interessante anche se in ungherese.

Mootools cresce, ecco la versione 1.0

E’ da poco stato rilasciato un nuovo aggiornamento per la libreria Javascript Mootools, che in pochi kb permette di realizzare interfacce molto interessanti con vari tipi di interazione.

L’attuale versione è la 1.0, un importante traguardo soprattutto considerando le novità ed i miglioramenti al codice. Se siete interessati ai dettagli tecnici potete trovare maggiori informazioni nel post di presentazione ufficiale.

Le possibilità di questa libreria Javascript sono molte: permette di cambiare le dimensioni di un elemento, il suo colore, di far apparire dei tooltip al mouseover, per non parlare di tutti i tipi di interazione basati su Ajax e drag&drop. Se volete comunque farvi un’idea più chiara ecco alcuni esempi di siti che la utilizzano (oltre a questo sito, ovviamente):

Il sito ufficiale di Mootools, con un notevole menu principale, da dove potete anche scaricare i files necessari
Joomla OS, che emula un sistema operativo
Intabill, dal grande impatto visivo, con effetti slide, tooltip e menu interattivi

Se però devo trovare un difetto a questa libreria, è senza dubbio la mancanza di una documentazione accessibile per chi non conosce Javascript. Esiste del materiale ufficiale, ma credo non sia facile comprenderlo per tutti. Sarebbe molto utile anche un bel tutorial in italiano.
Il concorso Hosting Talk di quest’anno potrebbe essere una buona occasione, una guida sul tema sarebbe gradita a molti. Per il momento il mio consiglio se non conoscete Javascript è di cercare esempi pratici in rete e imparare sul campo, ricordando sempre di testare i risultati su più browser possibili. Per chi conosce l’inglese Mootorial è un’altra buona risorsa da cui partire.

Aggiornamenti: Mootools, favicon e segnalazioni

Ho effettuato alcuni aggiornamenti minori al sito, per migliorare la velocità di caricamento ed il consumo di banda.

La novità più importante riguarda finalmente l’aggiornamento dello script per il pannello di controllo. Adesso utilizzo la libreria Mootools di Valerio Proietti, ed ho abbandonato Prototype. Se non l’avete ancora esaminata a fondo, vi consiglio di studiare le potenzialità di questo framework javascript.

Altro piccolo cambiamento riguarda la favicon del sito, modificata grazie al FavIcon Generator su Dynamic Drive. Basta uploadare un’immagine, anche con delle trasparenze, ed il vostro file .ico è pronto in un attimo.

Queste risorse sono fin da subito disponibili nella pagina utility, che ho appena aggiornato. Ho aggiunto anche un riferimento al plugin Democracy AJAX Poll per WordPress, che in questo momento utilizzo per il sondaggio nella homepage.

Infine per gli appassionati del manageriale Hattrick c’è anche un’utile estensione di Firefox chiamata Firehat, che permette di personalizzare i menu di navigazione secondo le proprie esigenze.

Se volete segnalarmi qualche altra risorsa interessante fatelo senza problemi, la aggiungerò nell’elenco.

Web Design 2007: previsioni per il futuro

Il 2006 sta arrivando al termine, e come è giusto che sia iniziano ad uscire in rete alcune previsioni per il 2007 di web designers e sviluppatori.

Ho letto un interessante articolo a riguardo, che si sbilancia su 5 argomenti, dall’accessibilità all’utilizzo di AJAX nelle pagine web. Questa una sintesi, non necessariamente tradotta dall’originale:

1. AJAX e DHTML saranno usati con cautela

A quanto pare ci si sta rendendo conto che se si è capaci di fare una cosa, non è necessario integrarla per forza nei propri lavori. Nel 2007 dopo la grande crescita di pagine in AJAX, contenuti dinamici, e javascript in abbondanza, ci sarà probabilmente un passo indietro. Meglio ottimizzare le pagine ed evitare l’integrazione di script che pesano più del necessario.

2. Addio angoli arrotondati

Previsione abbastanza azzardata questa.. che vede l’abbandono dei famosi rounded corners per concentrarsi su altri elementi grafici: linee, texture e contrasto.

3. Accessibilità per tutti

Internet continua a crescere, ed in questo processo è evidente l’attenzione sempre maggiore verso gli standard web e l’accessibilità. Nel 2007 queste tematiche avranno ancora più importanza.

4. Diffusione di CSS2 e CSS3

Internet Explorer 7 inizierà a diffondersi, e questo aiuterà l’utilizzo nei CSS di regole e selettori fino ad oggi poco supportati. Non si arriverà probabilmente a sfruttare le potenzialità dei CSS3, ma IE6 resterà solo su una minoranza di computer.
Obbligatorio offrire un’esperienza migliore a tutti gli utenti che navigano con Firefox, Opera, Safari e IE7.

5. Nascita di nuovi talenti

Previsione abbastanza scontata: è facile immaginare la nascita di nuovi talenti nell’ambito del web design, degli standard web e della programmazione. Anche in questo campo, probabilmente arriveranno novità dall’Asia.

Queste sono le previsioni di Ted Drake, pubblicate sul suo blog. Interessanti, anche se quella sugli angoli arrotondati mi lascia abbastanza dubbioso.. sicuramente è un’opinione basata su gusti personali.

E voi quali idee avete sul 2007 che arriverà? Io ritengo molto verosimile la prima previsione: è ora di abbandonare librerie javascript che pesano anche più di 200kb!

Come creare l’interfaccia ideale?

La domanda del titolo non è certo di facile risposta, e premetto che in questo articolo non troverete tutte le informazioni per realizzare un’interfaccia web funzionale.

Nonostante questo però ci sono degli strumenti molto utili che possono venire in aiuto nella creazione di un’applicazione web.

Un’ottima base da cui partire, che ho trovato casualmente mentre ero alla ricerca di javascript basati sulla libreria jQuery, è Interface elements for jQuery.

E’ un vero e proprio sito dove vengono messi a disposizione numerosi plugin per questa libreria, che tra l’altro viene utilizzata anche da script più che famosi come Thickbox. Guardando le demo potrete farvi un’idea di tutto ciò che è possibile realizzare con questi script, dagli elementi trascinabili in giro per lo schermo ai vari effetti con dissolvenza.

Le possibilità sono molteplici, non si potrà fare tutto ma le basi per la creazione di una buona interfaccia ci sono.

Se gli esempi non vi dovessero bastare è presente anche una documentazione molto dettagliata. I forum dedicati invece non sono ancora attivi.

Piccola nota negativa: non sono riuscito ad usare lo strumento per costruire il download su misura visto che mi rimandava ad una pagina bianca, ho dovuto scaricare l’intero pacchetto.