Precedente :: Successivo |
Autore |
Messaggio |
kluster Dio maturo
Registrato: 15/04/06 12:14 Messaggi: 2898
|
Inviato: 19 Nov 2006 21:48 Oggetto: * Le principali Javascript Libraries |
|
|
Per velocizzare il proprio lavoro, chi è nel ramo della programmazione tende di solito ad utilizzare delle librerie, che non sono altro che una raccolta di funzioni utili pronte per essere utilizzate a richiamo.
Per quanto riguarda il client-scripting si tratta per lo + di uno o + file con estensione js che hanno un'insieme di proprieta' e di metodi che possono essere utilizzati ad esempio per far apparire/scomparire un elemento della pagina, creare una transizione, interagire con gli eventi della pagina, interrogare tramite Ajax (XML HTTP Request) una sezione interna al sito o proveniente addirittura da un'altro sito.
Le principali e migliori librarie utilizzate dagli sviluppatori sono le seguenti:
Prototype: http://prototype.conio.net/
Senz'altro la più completa, che fa da base a molte altre librerie.
Ottimizzata per estendere proprio le funzionalita' del linguaggio stesso javascript
I metodi sono tanti ed utilissimi, dagli effetti animati, all'ajax, a vere e proprie "aggiunte" utili agli oggetti interni del linguaggio javascript.
Per uno studio approfondito vi rimando alla:
Guida per gli sviluppatori che utilizzano prototype.js (Versione 1.4.0)
Behaviour: http://bennolan.com/behaviour/
Un nuovo metodo per "collegare" un evento ad un elemento della pagina, mantenendolo separato dal markup html.
Moo.fx: http://moofx.mad4milk.net/
Derivata da prototype e sviluppata da un programmatore italiano, è ottimizzata per gli effetti grafici:
Basta dare un occhiata alla pagina di test, per rendersene conto.
La documentazione è disponibile qui:
http://docs.mootools.net/
http://www.avinashv.net/tutorials/moofx/ (The Idiot's Guide To moo.fx)
La libreria inoltre ha il peso di soli 3kb, veramente niente per i risultati che permette di ottenere.
Scriptaculous: http://script.aculo.us/
Diciamo la migliore libreria per creare effetti di animazione, molto + pesante di Moo.fx ma senz'altro ha molte + feature.
Utile anche perchè è un add-on per prototype e quindi puo' essere allegata ad un progetto che usa prototype.
Per la documentazione vi rimando direttamente al wiki:
http://wiki.script.aculo.us/scriptaculous/
MochiKit: http://www.mochikit.com/
Anch'essa orientata agli effetti,(qui una demo degli effetti disponibili) molto utile e ben documentata:
http://www.mochikit.com/doc/html/MochiKit/index.html
WZ_DradDrop: http://www.walterzorn.com/dragdrop/dragdrop_e.htm
Tutte le librerie sopra includono ottime funzionalita' per creare script Drag&Drop (vedi questo articolo), ma diciamo una libreria dedicata per tale scopo è wz_dragdrop.
La documentazione dell'API la trovate qui.
http://www.walterzorn.com/dragdrop/api_e.htm
Qui, qualche esempio veramente carino: http://www.walterzorn.com/dragdrop/demos/demos.htm
Altre 2 libraries, molto + piccole ma non per questo meno utili che consiglio di studiare sono:
Nifty Cube, di Alessandro Fulciniti (di edit), che vi permette di arrotondare i layer delle vostre pagine:
Qui su html.it trovate articolo, documentazione ed il download dello script
e Lightbox, per creare delle bellissime gallerie fotografiche, tutto in maniera unobtrusive (non intrusiva) ossia in mancanza di js, il layout e le funzionalita' della pagina non ne vengono toccate.
Ecco la versione 1, e la successiva e + spettacolare versione 2 (che utilizza tra l'altro moo.fx per le animazioni). Qui trovate inoltre alcuni derivati di Nifty Cube, ed alcuni di Lightbox.
infine vi rimando ad un Javascript Libraries Roundup, dove trovate i link alle principali librerie js e dove disponibile anche il link alla documentazione:
http://edevil.wordpress.com/2005/11/14/javascript-libraries-roundup/
L'ultima modifica di kluster il 31 Mar 2007 11:02, modificato 2 volte |
|
Top |
|
|
kluster Dio maturo
Registrato: 15/04/06 12:14 Messaggi: 2898
|
Inviato: 20 Nov 2006 12:29 Oggetto: |
|
|
Altre librerie dedicate agli effetti animati:
MiniKit: http://candyscript.com/projects/minikit/
Anche questa pesca parte delle funzionalita' da moo.fx e da Nifty Corners
Bernie's better animator class: http://berniecode.com/writing/animator.html
Run: http://run.aka-fotos.de/index.php
la documentazione: http://run.aka-fotos.de/documentation.php
Gli esempi vederla all'opera: http://run.aka-fotos.de/examples.php
Byte Fx: http://www.devpro.it/bytefx/
documentazione: http://www.devpro.it/bytefx/#api
EJ: Essential JavaScript.
http://www.robertnyman.com/2006/11/07/ej-the-only-javascript-library-youll-ever-need/
A detta dell'autore una libreria dove trovate l'essenziale per essere utilizzato nei vostri progetti. Tutto a 2 kb.
Sottolineo: a detta dell'autore. |
|
Top |
|
|
kluster Dio maturo
Registrato: 15/04/06 12:14 Messaggi: 2898
|
Inviato: 24 Nov 2006 17:31 Oggetto: |
|
|
MudCube:
http://www.mudcube.com/code/
si va da DatePicker, al Drag&Drop, Scroller, Fader etc.
DHTML Goodies
http://www.dhtmlgoodies.com/
anche qui una bella raccolta di scripts, librerie varie per effetti, ajax, scroller, social bookmarks etc. Ognuno con il suo demo e la reference per la personalizzazione |
|
Top |
|
|
kluster Dio maturo
Registrato: 15/04/06 12:14 Messaggi: 2898
|
Inviato: 26 Nov 2006 14:32 Oggetto: |
|
|
Dojo - The Javascript Toolkit
Diciamo un po' complessa ma permette la creazione di applicazioni complete stile web 2.0 (vedi le demo nella pagina)
http://dojotoolkit.org/
l'api:
http://dojotoolkit.org/api
JSOC Framework - An Object Cache Framework for JavaScript
http://dev.webframeworks.com/projects |
|
Top |
|
|
kluster Dio maturo
Registrato: 15/04/06 12:14 Messaggi: 2898
|
Inviato: 28 Dic 2006 17:57 Oggetto: |
|
|
Questa library di dithered è da un 1k! non tiene in considerazione ajax ma è una library DHTML che contempla questi metodi:
gE(NomeLayer) (Get Element)
ritorna un riferimento all'oggeto (anche nel caso dei layer annidati di Netscape)
sE(RefLayer) (Show Element)
Mostra un livello
hE(e) (Hide Element)
Nasconde un livello
sZ(e,v) (Set Z-Index)
Imposta lo z-index di un elemento
sX(e,x) (Set X)
Cambia il posizionamento orizzontale del layer
sY(e,x) (Set Y)
Cambia il posizionamento veticale del layer
sW(e,w) (Set Width)
Cambia la larghezza del layer
sH(e,h) (Set Height)
Cambia l'altezza del layer
sC(e,t,r,b,l) (Set Clip)
Imposta la clip del layer secondo i valori t=top,r=left,b=bottom
Non supportata in Opera 7 e in Internet Explorer 4.x per Mac
wH(e,html) (Write Html)
Sovrascrive il contenuto html di un layer
Non supportata in Opera 7 e mal funzionante in Internet Explorer 4.x per Mac
Ecco la library, veramente compatta:
Codice: |
<script type="text/javascript">
d=document;l=d.layers;op=navigator.userAgent.indexOf('Opera')!=-1;px='px';
function gE(e,f){if(l){f=(f)?f:self;var V=f.document.layers;if(V[e])return V[e];for(var W=0;W<V.length;)t=gE(e,V[W++]);return t;}if(d.all)return d.all[e];return d.getElementById(e);}
function sE(e){l?e.visibility='show':e.style.visibility='visible';}
function hE(e){l?e.visibility='hide':e.style.visibility='hidden';}
function sZ(e,z){l?e.zIndex=z:e.style.zIndex=z;}
function sX(e,x){l?e.left=x: op ? e.style.pixelLeft=x:e.style.left=x+px;}
function sY(e,y){l?e.top=y: op ? e.style.pixelTop=y:e.style.top=y+px;}
function sW(e,w){l?e.clip.width=w : op ? e.style.pixelWidth=w:e.style.width=w+px;}
function sH(e,h){l?e.clip.height=h : op ? e.style.pixelHeight=h:e.style.height=h+px;}
function sC(e,t,r,b,x){l?(X=e.clip,X.top=t,X.right=r,X.bottom=b,X.left=x):e.style.clip='rect('+t+px+' '+r+px+' '+b+px+' '+x+px+')';}
function wH(e,h){if(l){Y=e.document;Y.open();Y.write(h);Y.close();}if(e.innerHTML)e.innerHTML=h;}
</script>
|
Per un esempio date un occhiata qui. |
|
Top |
|
|
kluster Dio maturo
Registrato: 15/04/06 12:14 Messaggi: 2898
|
Inviato: 28 Mar 2007 09:19 Oggetto: |
|
|
Altre 2 librerie/framework js:
DED|Chain, l'esempio di codice con l'animazione è veramente molto carino e con un codice molto intuitivo.
Yet Another JavaScript Library Without Documentation con il relativo post del blog che non fa altro che confermare una regola dell'ambiente informatico: un programmatore puo' scrivere in una giornata migliaia di righe di codice senza battere ciglio, ma chiedetegli di scrivere una sola riga di commento al suo codice e si mettera' a piangere. |
|
Top |
|
|
kluster Dio maturo
Registrato: 15/04/06 12:14 Messaggi: 2898
|
|
Top |
|
|
|
|
Non puoi inserire nuovi argomenti Non puoi rispondere a nessun argomento Non puoi modificare i tuoi messaggi Non puoi cancellare i tuoi messaggi Non puoi votare nei sondaggi
|
|