jQuery per web design

In questo articolo vedremo come grazie a jQuery, una libreria di funzioni in javascript per il web, è possibile realizzare siti internet straordinari. Non spaventatevi se le vostre conoscenze in Javascript sono poche o nulle, il punto di forza di jQuery risiede infatti nell’estrema facilità di utilizzo e nella dolce curva di apprendimento. Non per nulla il motto di questa splendida libreria Javascript è “write less, do more”, scrivere meno, fare di più.

Vi presenterò 10 tra i migliori plug in jQuery, molto semplici da implementare ed in grado di cambiare notevolmente l’aspetto di qualsiasi sito internet.
Ma andiamo con ordine e prima di tutto:

Come funziona jQuery

Per utilizzare le potenzialità di jQuery dovete caricare la libreria prima della chiusura del tag (quindi prima di ). Avete due possibilità:
1) Scaricare dal sito ufficiale di jQuery l’ultima versione, caricarla sul server tramite un programma FTP (Filezilla è un ottimo programma gratuito) e richiamare il file prima di
oppure:
2) Incollare questa stringa sempre prima del tag :
[sourcecode language=’js’]

[/sourcecode]

Rimandandovi alla guida ufficiale di jQuery, sicuramente più esaustiva vediamo brevemente uno dei concetti fondamentali per usare i plug in jQuery.

Come fare ad applicare una determinata azione ad un elemento del vostro sito internet

Per selezionare un elemento specifico dovrete usare i selettori, essi prendono la forma $(” elemento “), dove al posto di elemento va chiaramente specificato l’id, la classe o il tipo di elemento a cui l’effetto va applicato. Vediamo alcuni esempi:
[sourcecode language=’js’]
$(“#content”) = seleziona l’elemento con id=”content”
$(“h1”) = seleziona tutti gli elementi < h1 > element
$(“div#content .sub”) = seleziona tutti gli elementi con class=”sub” all’interno di un div con id=”content”
$(“ul li”) = seleziona tutti i

element annidati in

$(“ul li:first”) = seleziona solo il primo elemento
• annidato in
  [/sourcecode]

  jQuery BUZZ, per inserire audio e suoni nel vostro sito web

  

  Demo | Download

  Buzz è un plugin jQuery veramente potente, permette con pochi semplici passaggi di inserire elementi audio HTML 5 nel vostro sito.

  Per utilizzare Buzz vi basterà inserire prima di il seguente codice:
  [sourcecode language=’js’]
  
  [/sourcecode]

  i formati ogg e mp3 coprono gran parte dei browser moderni e sono caldamente consigliati.

  Immagini full screen con Vegas jQuery

  

  Demo| Download

  Sicuramente uno dei migliori plug in jQuery in circolazione. Vegas non solo permette di utilizzare immagini full screen nel background del sito ma anche di creare degli splendidi slideshow.
  Per capire come utilizzare jQuery Vegas vi rilascio all’ottima guida realizzata dal suo creatore » guida jQuery Vegas

  Video in background con jQuery Tabular

  

  Demo | Download

  Tabular è un ottimo plug in jQuery che permette di impostare come sfondo un video di YouTube. Il tutto nella consueta facilità di jQuery:

  [sourcecode language=’js’]
  $(‘body’).tubular(‘_VKW_M_uVjw’,’wrapper’);
  [/sourcecode]

  dove: _VKW_M_uVjw è l’ID del video di YouTube