Risorse per lo sviluppo di effetti dinamici con JavaScript e AJAX

mercoledì, 23 gennaio 2008 20.45 by Marco Bellinaso

Gli ultimi due siti web che ho sviluppato, Pet-files e CentoMETRI, fanno uso pesante di varie effetti dinamici ottenuti tramite JavaScript e AJAX. Non essendo io un mostro di JS ho cercato qualcosa di pronto per le mie varie necessità, quali la creazione di popup cross-browser, menu, slideshow e altro ancora. Ho trovato veramente una montagna di ottimo materiale, tanto che il codice client-side che ho scritto personalmente è veramente ridotto. Riporto di seguito i link ai tool e alle librerie più interessanti:

  • CSS Dock Menu: per creare dei menu con l'effetto lente classico del Mac OSX. A qualcuno non piace, ma di sicuro fa effetto. (nota: l'ho usato per la barra della selezione lingua in Pet-files)
  • EuDock: simile alla libreria precedente, non l'ho provato direttamente, ma la demo online è molto promettente.
  • JQuery: fa un po' di tutto, ed è praticamente indispensabile in un sito che voglia essere (a torto o a ragione) considerato "moderno" e "web 2.0": accedere e manipolare nodi del DOM, gestire gli eventi della pagina, creare pannelli dagli angoli arrotondati o con un'ombreggiatura, creare menu a cascata o in stile barra-sinistra-di-outlook, creare popup, associare un watermark alle textbox, e molto altro ancora. Tra l'altro, questa libreria è ormai così popolare che ci sono dei blog completamente dedicati ad essa.
  • JQuery Cycle Plugin: come dice il nome, è una libreria che si basa su JQuery (da scaricare separatamente) per creare delle slideshow. L'utilizzo tipico è di far ciclare delle immagini (io ad esempio l'ho utilizzato per le slideshow delle foto del proprio animale, come vedete nella colonna di destra di questo blog) ma si possono far ciclare dei div contenenti testo (in modo da creare un news ticker). L'utilizzo è banale, ma l'effetto è assicurato, soprattutto perchè gli effetti di transizione disponibili sono veramente tantissimi.
  • Highslide: eccezionale libreria per creare dei popup cross-browser (tramite i div "svolazzanti"), per mostrare lo zoom di miniature di immagini, video, del testo di help a mo' di tooltip esteso, o intere pagine esterne incastrate all'interno di un IFRAME (incastrato a sua volta nel div). Il popup si apre e si richiude con una bella animazione, è possibile trascinarlo in giro e si può passare da un popup all'altro premendo i tasti direzionali della tastiera. E' di semplice utilizzo, non ho trovato bug, è fornitissima di esempi, e per siti no-profit è pure free. Io l'ho usata un po' dappertutto nei miei siti (per fare il login, per lasciare i commenti ai post/foto, per vedere le immagini ecc.).
  • MooTools: ottima libreria molto vasta, piena di componenti pronti all'uso per realizzare vari tipi di menu, pannelli espandibili/collassabili, effetti di transizione, pannelli ridimensionabili o con contenuto a scorrimento, pannelli con la gestione del drag & drop di oggetti (ad es. per implementare un carrello della spesa dove l'oggetto da comprare viene preso dal catalogo, e trascinato sull'icona del carrello...non so quanto usabile sia (poco), ma di sicuro fa colpo!), e altro ancora. Da provare...perlomeno le demo online.
  • (E2) Photo Gallery: per realizzare una galleria fotografica con una strip a scorrimento con tutte le miniature, e un pannello dove vedere una per volta le foto a dimensione intera.
  • Phatfusion: simile a (E2) Photo Gallery negli intenti, usa una diversa animazione per spostare la selezione sulle diverse miniature.
  • (UPDATE) Interface elements for jQuery: questo è conosciuto come il miglior plug-in per jQuery, e in effetti vedendo le demo sembra veramente un must. Implementa vari effetti di animazione e movimento, il controllo Accordion, il menu in stile Mac OS X, tooltip avanzati, drag & drop in varie salse, elenchi riordinabili, ed altro ancora. Da provare!

Parlando di AJAX non si possono non segnalare perlomeno un paio di siti che offrano varie icone da mostrare durante l'attesa del partial rendering della pagina. Ecco il primo (che è un po' il riferimento del caso, con dei wizard per scegliere l'aspetto delle icone con i propri colori e stili preferiti), ed ecco il secondo (molto più semplice, con una serie di icone subito visibili e pronte per essere scaricate).

Correntemente valutato 5.0 da 5 utenti

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Segnala:  
Tags:   , , , , , , , , ,
Categorie:   Sviluppo software | Web 2.0
Azioni:   E-mail | Permalink | Commenti (2) | RSS CommentiRSS comment feed

Post correlati

Commenti

aprile 13. 2008 14.27

Valentina

Ciao, ho notato l'effetto dock su un sito che ho trovato per caso e ne sono subio rimasta affascinata. Sto facendo infinite ricerche per capire come installarlo e farlo funzionare. Non capisco molto di js, ma non ho ancora trovato qualcuno che descriva passo passo come arrivare al risultato finale.

Ho letto sia dal sito ufficiale in inglese che in altri in italiano, che bisogna creare un "elemento chiamato dock". Vorrei delucidazioni a riguardo. Ti spiacerebbe aiutarmi? ciao... aspetto risposta, puoi anche scrivermi su wgeneration-redazione@hotmail.it

Valentina

aprile 23. 2008 17.53

Marco Bellinaso

Valentina,
vai ai primi due link che ho messo in elenco, e scaricati gli esempi forniti. Ti fanno vedere tutto quello che serve per crearti la tua dock.

Marco Bellinaso

Aggiungi commento


(Visualizza la tua icona Gravatar)  

  Country flag

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]



Anteprima

novembre 20. 2008 08.32