Script.aculo.us: tanti effetti con poco codice?

script

Le librerie javascript sembrano essere la moda del momento: da Script.aculo.usjQuery, da MootoolsPrototype, sempre più siti sono pieni di effetti (più o meno utili) che danno un senso di dinamicità alle proprie pagine web.

Un punto di forza di queste librerie è da ricercarsi nella loro semplicità; puoi ottenere grandi risultati con davvero poche righe di codice: questo è il caso di Script.aculo.us.

Cos’è un framework javascript?

Immagina per un attimo di dover creare un menù dinamico: al passaggio del mouse, ogni sua voce mostra un sottomenù che appare grazie ad un effetto di dissolvenza.

Escludendo Flash, questo effetto (per essere sinceri neanche dei più complessi) si può ottenere solo grazie a parecchie righe di codice javascript e a tanta pazienza.

Il menù che ti ho appena citato è solo una delle tantissime interfacce utente che, con l’evoluzione del web e dei linguaggi di programmazione, sono diventate sempre più complesse da implementare in modo nativo per un programmatore.

Con Script.aculo.us, uno dei più apprezzati framework javascript, il tuo menù acquisterà opacità semplicemente con la seguente riga di codice:

function appari(){
$('id_tuo_elemento').appear();
}

Com’è possibile tutto questo?

La risposta è nel termine framework.

Framework in inglese significa intelaiatura, proprio perché crea una struttura di supporto sulla quale progettare un’applicazione e quindi anche tutta quella serie di effetti tra cui il nostro menù a tendina.

Al programmatore non rimane, quindi, che dedicarsi al contenuto vero e proprio della sua applicazione e non alla  base sulla quale costruirla.

Perché utilizzare il framework Script.aculo.us?

Come detto in precedenza, il web prolifera di frameworks javascript: da jQuery (forse la libreria più completa in circolazione) a Mootools, da YUI a Script.aculo.us (nata da Prototype): ognuna di queste semplifica incredibilmente il lavoro del programmatore, offrendogli in più una serie di soluzioni sia funzionali che grafiche degne del miglior Flash, ma con tempi di caricamento infinitamente più bassi.

Ogni libreria è un caso a sè: Script.aculo.us ha dalla sua una grande facilità d’implementazione e personalizzazione del codice, tale da renderla accessibile anche a chi non può propriamente definirsi un “guru” della programmazione.

Non sarà potente come jQuery, ma può essere sicuramente utile per creare simpatici effetti grafici

(vedi il sito ufficiale) e, se non altro, per capire come funziona un framework javascript.

Tra i siti più importanti che utilizzano Script.aculo.us possiamo citare:

Andiamo a vedere più nel dettaglio come funziona questo framework javascript.

Primo passo: scarica e installa

Scarica dal sito ufficiale lo zip dell’ultima versione disponibile; una volta scompattato potrai trovare nella cartella principale:

  • lib (la cartella che contiene il file prototype.js);
  • src (con all’interno tutti i files javaScript che compongono la libreria);
  • test ( files per il testing delle potenzialità di Script.aculo.us, con tutti gli esempi più utili e comuni ).

All’interno della cartella “src” puoi trovare i files che dovrai integrare nella tua pagina web affinché i tuoi effetti possano prendere vita; in realtà non dovrai assolutamente integrarli tutti, ma semplicemente quelli che sono strettamente collegati alla gamma di effetti che intendi realizzare.

Vediamo un primo esempio di utilizzo di Script.aculo.us

Nella cartella principale del tuo sito crea una pagina HTML che chiameremo “index.html” , un foglio di stile “style.css” e una sottocartella che chiameremo “js“.

Per il nostro esempio ci serviranno i file “prototype.js“, “script.aculo.us.js” ed infine “effects.js” che inseriremo nella cartella “js“, insieme ad un quarto file javascript che chiameremo “prova.js”.

Ecco la pagina HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<title>Alla scoperta di Script.aculo.us!</title>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/script.aculo.us.js" type="text/javascript"></script>
<script src="js/effects.js" type="text/javascript"></script>
<script src="js/prova.js" type="text/javascript"></script>
</head>
<body>
<h1 class="titolo">Scopriamo insieme Script.aculo.us!</h1>
<div id="content">
<h2 class="sottotitolo">Cos'&egrave; Script.aculo.us?</h2>
<p>Script.aculo.us &egrave; una libreria che permette di creare effetti grafici di grande effetto utilizzando un sistema di funzioni molto semplici!</p>
</div>
</body>
</html>

Alla quale associamo un semplice file css:

body{
background-color: #9DC569;
text-align: center;
}

.titolo{
color: #fff;
font-style: italic;
}

.sottotitolo{
color:#e8a400;
font-style: italic;
}

#content{
width: 600px;
height: auto;
background-color: #fff4d8;
color: #000;
border: 2px solid #e8a400;
padding: 10px 10px 10px 10px;
margin: 0px auto 0px auto;
}

Che cosa abbiamo fatto?

La pagina che abbiamo creato è semplicemente un esempio di come inserire il collegamento ai files javascript all’interno del nostro sito; per un corretto funzionamento devi inserire prima di tutto il link a “prototype.js”, successivamente quello a “scriptaculous.js” e infine al file appartenente alla classe di effetti che intendi realizzare, nel nostro caso “effects.js”.

All’interno di prova.js potremo creare le nostre funzioni, realizzare i nostri effetti e sbizzarrire la nostra fantasia!

Script.aculo.us: i fondamentali

Lo scopo di script.aculo.us è di gestire e modificare gli elementi presenti nella nostra pagina HTML, permettendoci di muovere interi sezioni (e quindi anche interi div) , applicare effetti di dissolvenza sulle immagini o riprodurre dei suoni: inoltre, dato che ha piene capacità di interazione con il CSS possiamo cambiare le proprietà dei nostri elementi direttamente dalle nostre funzioni.

Così come jQuery, infatti,  anche script.aculo.us si serve dei selettori CSS per identificare gli elementi da modificare all’interno della pagina HTML: ricordi la pagina che abbiamo creato?

<div id="content">
<h2 class="sottotitolo">Cos'&egrave; Script.aculo.us?</h2>
<p>Script.aculo.us &egrave; una libreria che permette di creare effetti grafici di grande effetto utilizzando un....

Supponiamo di voler selezionare il nostro div “content“; tramite script.aculo.us sarà sufficiente scrivere la seguente linea di codice:

$('content')

In questo modo lo script selezionerà quell’elemento della nostra pagina web con id “content“.

Il nostro primo effetto

Quando visiti il sito ufficiale di script.aculo.us la prima cosa che attira la tua attenzione è senza ombra di dubbio l’effetto con cui appaiono i cerchi: in realtà è un effetto abbastanza semplice da implementare mediante il metodo grow().

Serviamoci della pagina HTML che abbiamo creato e supponiamo di voler arrivare a questo risutato.

Apriamo con un editor il file “prova.js” e creiamo la funzione che al caricamento della pagina ingrandisca il nostro div “content“:

onload = function cresci() {
$('content').grow({direction:'bottom-left', duration:'2'});
}

Esaminiamo il codice:

  • onload è codice javascript, comunica alla pagina che al suo caricamento deve avviare la nostra funzione ( cresci() );
  • $(‘content’) come detto in precedenza, serve a selezionare l’elemento con id “content”;
  • .grow() è l’effetto da applicare al selettore.

All’interno del metodo grow(), tra parentesi graffe, ci sono le proprietà che devono essere rispettate: direction (la direzione da cui far partire l’ingrandimento) e duration (la durata dell’effetto, espressa in secondi).

Salva tutto e apri con un browser la nostra pagina: et voila! Il nostro primo effetto è stato realizzato!

Conclusioni

Questo è solo l’inizio: hai già potuto constatare, però, che grazie ad una sola riga di codice hai potuto realizzare il tuo primo effetto con script.aculo.us.

questo indirizzo potrai trovare tutti gli effetti che realizzabili con script.aculo.us. Sbizzarrisciti pure in attesa della prossima lezione!

Altri articoli di questa guida:

  1. Script.aculo.us: tanti effetti con poco codice.
  2. Script.aculo.us: primi effetti di base
  3. Script.aculo.us: effetti avanzati, ma ancora poco codice!
Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: , ,

L'autore

Web designer, cerca l'ispirazione in ogni oggetto che lo circonda. Specializzato nella creazione di layout per Wordpress è sempre alla ricerca del framework javascript più cool, del social network più in voga, del design più innovativo... Genere musicale? Lounge...

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

10 commenti

Trackback e pingback

  1. Script.aculo.us: primi effetti di base | Your Inspiration Web
    [...] Nella prima lezione su script.aculo.us hai avuto modo di vedere come può essere facile implementare effetti grafici avanzati all’interno del tuo …
  2. Script.aculo.us: effetti avanzati, ma ancora poco codice! | Your Inspiration Web
    [...] Script.aculo.us: tanti effetti con poco codice. [...]

Lascia un Commento

Current day month ye@r *