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 7 utenti

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Segnala:  
Tags:   , , , , , , , , ,
Categorie:   Sviluppo software | Web 2.0
Azioni:   E-mail | Permalink | Commenti (15) | 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

gennaio 3. 2010 15.27

easy loans

I was very pleased to find this site.I wanted to thank you for this great read!! I definitely enjoying every little bit of it and I have you bookmarked to check out new stuff you post.

easy loans

gennaio 20. 2010 11.28

Gate opener


Ole and Lena were so excited to get a new cellular phone. Ole was to call when he was on his way home from town. Ole called Lena when he entered the freeway. "Lena put supper on, I'm on my way home."

Lena says, "Be careful because I hear some nut is driving the wrong way on the freeway."

"It's worse than that Lena, where I'm at there are a hundred cars going the wrong way!"




Regards
Edwards

Gate opener

gennaio 21. 2010 06.37

plastic surgeon beverly hills

10. There are about 10 types of capacitors.

9. Theory tells you how a circuit works, not why it doesn't work.

8. Not everything works according to the specs in the databook.

7. Anything practical you learn will be obsolete before you use it, except the complex math, which you will never use.

6. Always try to fix the hardware with the software.

5. Engineering is like having an 8 a.m. class and a late afternoon lab every day for the rest of your life.

4. Overtime pay? What overtime pay?

3. Engineers rule the world until the next revision.

2. If you like junk food, caffeine, and all-nighters, then you should go into architecture.

1. Dilbert is a documentary.


Regards
Blankenship






plastic surgeon beverly hills

febbraio 13. 2010 11.08

teeth whitening products

Valuable information and excellent design you got here! I would like to thank you for sharing your thoughts and time into the stuff you post!! Thumbs up!

teeth whitening products

febbraio 16. 2010 14.58

Colon cleansing

Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon.

Colon cleansing

febbraio 22. 2010 11.59

Acne scar treatment

You made some good points there. I searched this topic and found out that most people will agree with your blog.

Acne scar treatment

febbraio 26. 2010 01.20

payday loans

I wasn't aware of the many ripples and depth to this story until I surfed here through Google! Great job.

payday loans

febbraio 27. 2010 19.43

personal loans

That is some inspirational stuff. Never knew that opinions could be this varied. Thanks for all the enthusiasm to offer such helpful information here.

personal loans

marzo 6. 2010 16.22

no credit check loans

That is some inspirational stuff. Never knew that opinions could be this varied. Thanks for all the enthusiasm to offer such helpful information here. Big thanks for the useful info i found on Risorse per lo sviluppo di effetti dinamici con JavaScript e AJAX.

no credit check loans

marzo 9. 2010 10.49

replica watches

thanks for the share

replica watches

marzo 10. 2010 11.23

cash loans

Finally, got what I was looking for!! I definitely enjoying every little bit of it. Glad I stumbled into this article! smile I have you bookmarked to check out new stuff you post. Big thanks for the useful info i found on Risorse per lo sviluppo di effetti dinamici con JavaScript e AJAX.

cash loans

marzo 15. 2010 13.14

Stretch marks treatment

You made some good points there. I searched this topic and found out that most people will agree with your blog.

Stretch marks treatment

marzo 19. 2010 10.31

rolex replica

thank you very much for sharing this article!

rolex replica

Aggiungi commento


(Visualizza la tua icona Gravatar)  

  Country flag

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



Anteprima

marzo 20. 2010 10.18