Guida all'utilizzo di jQuery

venerdì, 1 febbraio 2008 14.00 by Marco Bellinaso

Qualche giorno fa in un post relativo alle librerie JavaScript / AJAX, ho messo in elenco jQuery. Oggi mi sono messo a studiare questa libreria più seriamente, visto che finora non ne avevo mai fatto uso direttamente, ma era referenziata nei miei progetti solo come base per altri plug-in che invece usavo. Ho trovato delle guide veramente chiare e complete, che permettono di essere produttivi (nel senso che si sarà in grado di usare la libreria risparmiando effettivamente tempo rispetto a scrivere a mano montagne di JavaScript per i compiti più banali) in un'ora. La guida "Getting Started" ufficiale spiega la filosofia di base, mostra le varie scorciatoie per selezionare elementi (con un certo id, con una certa classe, di un certo tipo, con un parametro equivalente ad un certo valore, ecc.), mostra come implementare un meccanismo di rating tramite ajax, e come effettuare semplici animazioni (nascondere/mostrare dei pannelli) in una riga di codice. Quest'altra guida spiega più o meno le stesse cose ma tramite altri esempi, quindi potrebbe essere utile per chiarirsi ulteriormente le idee e vedere altri scenari di utilizzo.

Una volta acquisite le basi, il vostro riferimento diventerà Visual jQuery, una preziosa reference che raggruppa tutte le funzioni della libreria in varie categorie e sottocategorie (Core, DOM, CSS, Ajax, Effects, Events, ...) e per ciascuna offre una descrizione e un esempio di codice completo.

Per chi ora stesse usando un framework diverso da jQuery (principalmente il framework "storico" Prototype, ma anche Dojo o MooTools), e soprattutto per chi dovesse ancora scegliere quale framework adottare, di seguito elenco qualche articolo di confronto:

Ovviamente sono tutte opinioni soggettive, ma sembra che sia più facile trovare voti a favore di jQuery. Ad ogni modo, vedere i vari pezzi di codice a confronto potrebbe semplificare la vostra personale scelta.

Da non dimenticare infine che anche la Microsoft AJAX Library può essere un'opzione per un framework JavaScript client-side (cross-browser e cross-technology, nel senso che può essere usata anche in PHP, RoR ecc.), anche se per ora non sembra essere proprio allo stesso livello dei concorrenti (fosse solo per la diffusione, documentazione, esempi disponibili, estensioni ecc.)

Correntemente valutato 3.5 da 4 utenti

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

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 (2) | RSS CommentiRSS comment feed